feat: Agent SDK auto-detects Claude Code session — no API key needed locally

ANTHROPIC_API_KEY is optional: Agent SDK uses Claude Code OAuth
session when running locally (detects CLAUDE_CODE_SSE_PORT).
In CI, ANTHROPIC_API_KEY from secrets is used.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.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,361 @@
+---
+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
+
+Perform comprehensive quality assurance of the ComfyUI frontend application by navigating all routes, clicking interactive elements, and testing features. Generate a structured report and submit it as a draft PR.
+
+## Prerequisites
+
+- Node.js 22+
+- `pnpm` package manager
+- `gh` CLI (authenticated)
+- `playwright-cli` (browser automation): `npm install -g @playwright/cli@latest`
+
+## Step 1: Environment Detection & Setup
+
+Detect the runtime environment and ensure the app is accessible.
+
+### CI Environment
+
+If `CI=true` is set:
+
+1. The ComfyUI backend is pre-configured in the CI container (`ghcr.io/comfy-org/comfyui-ci-container`)
+2. Frontend dist is already built and served by the backend
+3. Server runs at `http://127.0.0.1:8188`
+4. Skip user prompts — run fully automated
+
+### Local Environment
+
+If `CI` is not set:
+
+1. **Ask the user**: "Is a ComfyUI server already running? If so, what URL? (default: http://127.0.0.1:8188)"
+   - If yes: use the provided URL
+   - If no: offer to start one:
+
+     ```bash
+     # Option A: Use existing ComfyUI installation
+     # Ask for the path to ComfyUI, then:
+     cd <comfyui_path>
+     python main.py --cpu --multi-user --front-end-root <frontend_dist_path> &
+
+     # Option B: Build frontend and use preview server (no backend features)
+     pnpm build && pnpm preview &
+     ```
+
+2. Wait for server readiness by polling the URL (retry with 2s intervals, 60s timeout)
+
+### Browser Automation Setup
+
+Use **playwright-cli** for browser interaction via Bash commands:
+
+```bash
+playwright-cli open http://127.0.0.1:8188   # open browser and navigate
+playwright-cli snapshot                      # capture snapshot with element refs
+playwright-cli click e1                      # click by element ref from snapshot
+playwright-cli press Tab                     # keyboard shortcuts
+playwright-cli screenshot --filename=f.png  # save screenshot
+```
+
+playwright-cli is headless by default (CI-friendly). Each command outputs the current page snapshot with element references (`e1`, `e2`, …) that you use for subsequent `click`, `fill`, `hover` commands. Always run `snapshot` before interacting to get fresh refs.
+
+For local dev servers behind proxies, adjust the URL accordingly (e.g., `https://[port].stukivx.xyz` pattern if configured).
+
+## Step 2: QA Test Plan
+
+Navigate to the application URL and systematically test each area below. For each test, record:
+
+- **Status**: pass / fail / skip (with reason)
+- **Notes**: any issues, unexpected behavior, or visual glitches
+- **Screenshots**: take screenshots of failures or notable states
+
+### 2.1 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 |
+| Default redirect  | If multi-user mode, `/` redirects to `/user-select` first    |
+| 404 handling      | Navigate to `/nonexistent` — should handle gracefully        |
+
+### 2.2 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+-                                |
+| Fit view                  | Press `.` key — canvas fits to content                         |
+| Add node via double-click | Double-click canvas to open search, type "KSampler", select it |
+| Add node via search       | Open search box, find and add a node                           |
+| Delete node               | Select a node, press Delete key                                |
+| Connect nodes             | Drag from output slot to input slot                            |
+| Disconnect nodes          | Right-click a link and remove, or drag from connected slot     |
+| Multi-select              | Shift+click or drag-select multiple nodes                      |
+| Copy/Paste                | Select nodes, Ctrl+C then Ctrl+V                               |
+| Undo/Redo                 | Make changes, Ctrl+Z to undo, Ctrl+Y to redo                   |
+| Node context menu         | Right-click a node — menu appears with all expected options    |
+| Canvas context menu       | Right-click empty canvas — menu appears                        |
+
+### 2.3 Node Operations
+
+| Test                | Steps                                                      |
+| ------------------- | ---------------------------------------------------------- |
+| Bypass node         | Select node, Ctrl+B — node shows bypass state              |
+| Mute node           | Select node, Ctrl+M — node shows muted state               |
+| Collapse node       | Select node, Alt+C — node collapses                        |
+| Pin node            | Select node, press P — node becomes pinned                 |
+| Rename node         | Double-click node title — edit mode activates              |
+| Node color          | Right-click > Color — color picker works                   |
+| Group nodes         | Select multiple nodes, Ctrl+G — group created              |
+| Ungroup             | Right-click group > Ungroup                                |
+| Widget interactions | Toggle checkboxes, adjust sliders, type in text fields     |
+| Combo widget        | Click dropdown widgets — options appear and are selectable |
+
+### 2.4 Sidebar Tabs
+
+| Test                   | Steps                                                  |
+| ---------------------- | ------------------------------------------------------ |
+| Workflows tab          | Press W — workflows sidebar opens with saved workflows |
+| Node Library tab       | Press N — node library opens with categories           |
+| Model Library tab      | Press M — model library opens                          |
+| Assets tab             | Press A — assets browser opens                         |
+| Tab toggle             | Press same key again — sidebar closes                  |
+| Search in sidebar      | Type in search box — results filter                    |
+| Drag node from library | Drag a node from library onto canvas                   |
+
+### 2.5 Topbar & Workflow Tabs
+
+| Test                 | Steps                                                  |
+| -------------------- | ------------------------------------------------------ |
+| Workflow tab display | Current workflow name shown in tab bar                 |
+| New workflow         | Ctrl+N — new blank workflow created                    |
+| Rename workflow      | Double-click workflow tab                              |
+| Tab context menu     | Right-click workflow tab — menu with Close/Rename/etc. |
+| Multiple tabs        | Open multiple workflows, switch between them           |
+| Queue button         | Click Queue/Run button — prompt queues                 |
+| Batch count          | Click batch count editor, change value                 |
+| Menu hamburger       | Click hamburger menu — options appear                  |
+
+### 2.6 Settings Dialog
+
+| Test             | Steps                                                |
+| ---------------- | ---------------------------------------------------- |
+| Open settings    | Press Ctrl+, or click settings button                |
+| Settings tabs    | Navigate through all setting categories              |
+| Change a setting | Toggle a boolean setting — it persists after closing |
+| Search settings  | Type in settings search box — results filter         |
+| Keybindings tab  | Navigate to keybindings panel                        |
+| About tab        | Navigate to about panel — version info shown         |
+| Close settings   | Press Escape or click close button                   |
+
+### 2.7 Bottom Panel
+
+| Test                | Steps                                  |
+| ------------------- | -------------------------------------- |
+| Toggle panel        | Press Ctrl+` — bottom panel opens      |
+| Logs tab            | Logs/terminal tab shows server output  |
+| Shortcuts tab       | Shortcuts reference is displayed       |
+| Keybindings display | Press Ctrl+Shift+K — keybindings panel |
+
+### 2.8 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    |
+| Job history    | Open job history sidebar — past executions listed     |
+| Clear history  | Clear execution history via menu                      |
+
+### 2.9 Workflow File Operations
+
+| Test            | Steps                                             |
+| --------------- | ------------------------------------------------- |
+| Save workflow   | Ctrl+S — workflow saves (check for prompt if new) |
+| Open workflow   | Ctrl+O — file picker or workflow browser opens    |
+| Export JSON     | Menu > Export — workflow JSON downloads           |
+| Import workflow | Drag a .json workflow file onto canvas            |
+| Load default    | Menu > Load Default — default workflow loads      |
+| Clear workflow  | Menu > Clear — canvas clears (after confirmation) |
+
+### 2.10 Advanced Features
+
+| Test            | Steps                                             |
+| --------------- | ------------------------------------------------- |
+| Minimap         | Alt+M — minimap toggle                            |
+| Focus mode      | Toggle focus mode                                 |
+| Canvas lock     | Press H to lock, V to unlock                      |
+| Link visibility | Ctrl+Shift+L — toggle links                       |
+| Subgraph        | Select nodes > Ctrl+Shift+E — convert to subgraph |
+
+### 2.11 Error Handling
+
+| Test                  | Steps                                        |
+| --------------------- | -------------------------------------------- |
+| Missing nodes dialog  | Load workflow with non-existent node types   |
+| Missing models dialog | Trigger missing model warning                |
+| Network error         | Disconnect backend, verify graceful handling |
+| Invalid workflow      | Try loading malformed JSON                   |
+
+### 2.12 Responsive & Accessibility
+
+| Test                | Steps                                 |
+| ------------------- | ------------------------------------- |
+| Window resize       | Resize browser window — layout adapts |
+| Keyboard navigation | Tab through interactive elements      |
+| Sidebar resize      | Drag sidebar edge to resize           |
+
+## Step 3: Generate Report
+
+After completing all tests, generate a markdown report file.
+
+### Report Location
+
+```
+docs/qa/YYYY-MM-DD-NNN-report.md
+```
+
+Where:
+
+- `YYYY-MM-DD` is today's date
+- `NNN` is a zero-padded increment index (001, 002, etc.)
+
+To determine the increment, check existing files:
+
+```bash
+ls docs/qa/ | grep "$(date +%Y-%m-%d)" | wc -l
+```
+
+### Report Template
+
+```markdown
+# QA Report: ComfyUI Frontend
+
+**Date**: YYYY-MM-DD
+**Environment**: CI / Local (OS, Browser)
+**Frontend Version**: (git sha or version)
+**Agent**: Claude / Codex / Other
+**Server URL**: http://...
+
+## Summary
+
+| Category        | Pass | Fail | Skip | Total |
+| --------------- | ---- | ---- | ---- | ----- |
+| Routes & Load   |      |      |      |       |
+| Canvas          |      |      |      |       |
+| Node Operations |      |      |      |       |
+| Sidebar         |      |      |      |       |
+| Topbar          |      |      |      |       |
+| Settings        |      |      |      |       |
+| Bottom Panel    |      |      |      |       |
+| Execution       |      |      |      |       |
+| File Operations |      |      |      |       |
+| Advanced        |      |      |      |       |
+| Error Handling  |      |      |      |       |
+| Responsive      |      |      |      |       |
+| **Total**       |      |      |      |       |
+
+## Results
+
+### Routes & Load
+
+- [x] Root route loads — pass
+- [ ] ...
+
+### Canvas & Graph View
+
+- [x] Canvas renders — pass
+- [ ] ...
+
+(repeat for each category)
+
+## Issues Found
+
+### Issue 1: [Title]
+
+- **Severity**: critical / major / minor / cosmetic
+- **Steps to reproduce**: ...
+- **Expected**: ...
+- **Actual**: ...
+- **Screenshot**: (if available)
+
+## Notes
+
+Any additional observations, performance notes, or suggestions.
+```
+
+## Step 4: Commit and Push Report
+
+### In CI (when `CI=true`)
+
+Save the report directly to `$QA_ARTIFACTS` (the CI workflow uploads this as
+an artifact and posts results as a PR comment). Do **not** commit, push, or
+create a new PR.
+
+### Local / interactive use
+
+When running locally, create a draft PR after committing:
+
+```bash
+# Ensure on a feature branch
+BRANCH_NAME="qa/$(date +%Y-%m-%d)-$(git rev-parse --short HEAD)"
+git checkout -b "$BRANCH_NAME" 2>/dev/null || git checkout "$BRANCH_NAME"
+
+git add docs/qa/
+git commit -m "docs: add QA report $(date +%Y-%m-%d)
+
+Automated QA report covering all frontend routes and features."
+git push -u origin "$BRANCH_NAME"
+
+# Create draft PR assigned to comfy-pr-bot
+gh pr create \
+  --draft \
+  --title "QA Report: $(date +%Y-%m-%d)" \
+  --body "## QA Report
+
+Automated frontend QA run covering all routes and interactive features.
+
+See \`docs/qa/\` for the full report.
+
+/cc @comfy-pr-bot" \
+  --assignee comfy-pr-bot
+```
+
+## Execution Notes
+
+### Cross-Platform Considerations
+
+- **Windows**: Use `pwsh` or `cmd` equivalents for shell commands. `gh` CLI works on all platforms.
+- **macOS**: Keyboard shortcuts use Cmd instead of Ctrl in the actual app, but Playwright sends OS-appropriate keys.
+- **Linux**: Primary CI platform. Screenshot baselines are Linux-only.
+
+### Agent Compatibility
+
+This skill uses **playwright-cli** (`@playwright/cli`) — a token-efficient CLI designed for coding agents. Install it once with `npm install -g @playwright/cli@latest`, then use `Bash` to run commands.
+
+The key operations and their playwright-cli equivalents:
+
+| Action           | Command                                  |
+| ---------------- | ---------------------------------------- |
+| Navigate to URL  | `playwright-cli goto <url>`              |
+| Get element refs | `playwright-cli snapshot`                |
+| Click element    | `playwright-cli click <ref>`             |
+| Type text        | `playwright-cli fill <ref> <text>`       |
+| Press shortcut   | `playwright-cli press <key>`             |
+| Take screenshot  | `playwright-cli screenshot --filename=f` |
+| Hover element    | `playwright-cli hover <ref>`             |
+| Select dropdown  | `playwright-cli select <ref> <value>`    |
+
+Snapshots return element references (`e1`, `e2`, …). Always run `snapshot` after navigation or major interactions to refresh refs before acting.
+
+### Tips for Reliable QA
+
+1. **Wait for page stability** before interacting — check that elements are visible and enabled
+2. **Take a snapshot after each major navigation** to verify state
+3. **Don't use fixed timeouts** — poll for expected conditions
+4. **Record the full page snapshot** at the start for baseline comparison
+5. **If a test fails**, document it and continue — don't abort the entire QA run
+6. **Group related tests** — complete one category before moving to the next

.github/actions/setup-comfyui-server/action.yaml

@@ -44,12 +44,17 @@ runs:
         python -m pip install --upgrade pip
         pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
         pip install -r requirements.txt
-        pip install wait-for-it
 
     - name: Start ComfyUI server
       if: ${{ inputs.launch_server == 'true' }}
       shell: bash
       working-directory: ComfyUI
+      env:
+        EXTRA_SERVER_PARAMS: ${{ inputs.extra_server_params }}
       run: |
-        python main.py --cpu --multi-user --front-end-root ../dist ${{ inputs.extra_server_params }} &
-        wait-for-it --service 127.0.0.1:8188 -t 600
+        python main.py --cpu --multi-user --front-end-root ../dist $EXTRA_SERVER_PARAMS &
+        for i in $(seq 1 300); do
+          curl -sf http://127.0.0.1:8188/api/system_stats >/dev/null 2>&1 && echo "Server ready" && exit 0
+          sleep 2
+        done
+        echo "::error::ComfyUI server did not start within 600s" && exit 1

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

@@ -30,6 +30,7 @@ concurrency:
 
 jobs:
   bump-version:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     permissions:
       contents: write

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

@@ -18,6 +18,7 @@ concurrency:
 
 jobs:
   docs-check:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     timeout-minutes: 45
     steps:

.gitignore

@@ -99,4 +99,7 @@ vitest.config.*.timestamp*
 # Weekly docs check output
 /output.txt
 
-.amp
+.amp
+.playwright-cli/
+.playwright/
+.claude/scheduled_tasks.lock

.oxfmtrc.json

@@ -9,6 +9,7 @@
     "packages/registry-types/src/comfyRegistryTypes.ts",
     "public/materialdesignicons.min.css",
     "src/types/generatedManagerTypes.ts",
-    "**/__fixtures__/**/*.json"
+    "**/__fixtures__/**/*.json",
+    "scripts/qa-report-template.html"
   ]
 }

CODEOWNERS

@@ -51,6 +51,9 @@
 # Manager
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
+# Model-to-node mappings (cloud team)
+/src/platform/assets/mappings/                    @deepme987
+
 # LLM Instructions (blank on purpose)
 .claude/
 .cursor/

apps/desktop-ui/src/stores/maintenanceTaskStore.ts

@@ -15,7 +15,7 @@ type ValidationState = InstallValidation['basePath']
 type IndexedUpdate = InstallValidation & Record<string, ValidationState>
 
 /** State of a maintenance task, managed by the maintenance task store. */
-export class MaintenanceTaskRunner {
+class MaintenanceTaskRunner {
   constructor(readonly task: MaintenanceTask) {}
 
   private _state?: MaintenanceTaskState

apps/website/.gitignore

@@ -0,0 +1,2 @@
+dist/
+.astro/

apps/website/astro.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  site: 'https://comfy.org',
+  output: 'static',
+  integrations: [vue()],
+  vite: {
+    plugins: [tailwindcss()]
+  },
+  build: {
+    assetsPrefix: process.env.VERCEL_URL
+      ? `https://${process.env.VERCEL_URL}`
+      : undefined
+  },
+  i18n: {
+    locales: ['en', 'zh-CN'],
+    defaultLocale: 'en',
+    routing: {
+      prefixDefaultLocale: false
+    }
+  }
+})

apps/website/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@comfyorg/website",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@comfyorg/design-system": "workspace:*",
+    "@vercel/analytics": "catalog:",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@astrojs/vue": "catalog:",
+    "@tailwindcss/vite": "catalog:",
+    "astro": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  },
+  "nx": {
+    "tags": [
+      "scope:website",
+      "type:app"
+    ],
+    "targets": {
+      "dev": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro dev"
+        }
+      },
+      "serve": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro dev"
+        }
+      },
+      "build": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro build"
+        },
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      },
+      "preview": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro preview"
+        }
+      },
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro check"
+        }
+      }
+    }
+  }
+}

apps/website/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

apps/website/src/styles/global.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@comfyorg/design-system/css/base.css';

apps/website/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*", "astro.config.mjs"]
+}

browser_tests/assets/links/duplicate_links_slot_drift.json

@@ -0,0 +1,169 @@
+{
+  "id": "f1a2b3c4-d5e6-7890-abcd-ef1234567890",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "b2c3d4e5-f6a7-8901-bcde-f12345678901",
+      "pos": [400, 300],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "b2c3d4e5-f6a7-8901-bcde-f12345678901",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 120,
+          "lastLinkId": 276,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Slot Drift Duplicate Links",
+        "inputNode": {
+          "id": -10,
+          "bounding": [0, 300, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [900, 300, 120, 60]
+        },
+        "inputs": [],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 120,
+            "type": "ComfySwitchNode",
+            "title": "Switch (CFG)",
+            "pos": [100, 100],
+            "size": [200, 80],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [{ "name": "value", "type": "FLOAT", "link": null }],
+            "outputs": [
+              {
+                "name": "FLOAT",
+                "type": "FLOAT",
+                "links": [257, 271, 276]
+              }
+            ],
+            "properties": { "Node name for S&R": "ComfySwitchNode" },
+            "widgets_values": []
+          },
+          {
+            "id": 85,
+            "type": "KSamplerAdvanced",
+            "pos": [400, 50],
+            "size": [270, 262],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              { "name": "model", "type": "MODEL", "link": null },
+              { "name": "positive", "type": "CONDITIONING", "link": null },
+              { "name": "negative", "type": "CONDITIONING", "link": null },
+              { "name": "latent_image", "type": "LATENT", "link": null },
+              { "name": "steps", "type": "INT", "link": null },
+              { "name": "cfg", "type": "FLOAT", "link": 276 }
+            ],
+            "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
+            "properties": { "Node name for S&R": "KSamplerAdvanced" },
+            "widgets_values": [
+              false,
+              0,
+              "randomize",
+              20,
+              8,
+              "euler",
+              "normal",
+              0,
+              10000,
+              false
+            ]
+          },
+          {
+            "id": 86,
+            "type": "KSamplerAdvanced",
+            "pos": [400, 350],
+            "size": [270, 262],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              { "name": "model", "type": "MODEL", "link": null },
+              { "name": "positive", "type": "CONDITIONING", "link": null },
+              { "name": "negative", "type": "CONDITIONING", "link": null },
+              { "name": "latent_image", "type": "LATENT", "link": null },
+              { "name": "steps", "type": "INT", "link": null },
+              { "name": "cfg", "type": "FLOAT", "link": 271 }
+            ],
+            "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
+            "properties": { "Node name for S&R": "KSamplerAdvanced" },
+            "widgets_values": [
+              false,
+              0,
+              "randomize",
+              20,
+              8,
+              "euler",
+              "normal",
+              0,
+              10000,
+              false
+            ]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 257,
+            "origin_id": 120,
+            "origin_slot": 0,
+            "target_id": 85,
+            "target_slot": 5,
+            "type": "FLOAT"
+          },
+          {
+            "id": 271,
+            "origin_id": 120,
+            "origin_slot": 0,
+            "target_id": 86,
+            "target_slot": 5,
+            "type": "FLOAT"
+          },
+          {
+            "id": 276,
+            "origin_id": 120,
+            "origin_slot": 0,
+            "target_id": 85,
+            "target_slot": 5,
+            "type": "FLOAT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": { "scale": 1, "offset": [0, 0] },
+    "frontendVersion": "1.43.2"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/test-values-input-subgraph.json

@@ -0,0 +1,407 @@
+{
+  "id": "0cc04f4c-d744-462d-8638-4e5f5e3947e7",
+  "revision": 0,
+  "last_node_id": 19,
+  "last_link_id": 24,
+  "nodes": [
+    {
+      "id": 14,
+      "type": "CLIPLoader",
+      "pos": [143.16716182216328, 290.16372862874033],
+      "size": [270, 117.3125],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [21]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPLoader"
+      },
+      "widgets_values": [null, "stable_diffusion", "default"]
+    },
+    {
+      "id": 18,
+      "type": "PreviewImage",
+      "pos": [1305.1455526601603, 472.17095792625025],
+      "size": [225, 48],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 24
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 19,
+      "type": "314bbb9f-f1cc-456c-b14f-2ba92bd4a597",
+      "pos": [794.198171390827, 452.45433419677147],
+      "size": [225, 172],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "renamed_clip",
+          "name": "clip",
+          "type": "CLIP",
+          "link": 21
+        },
+        {
+          "label": "renamed_seed",
+          "name": "seed",
+          "type": "INT",
+          "widget": {
+            "name": "seed"
+          },
+          "link": 22
+        },
+        {
+          "label": "renamed_vae",
+          "name": "vae",
+          "type": "VAE",
+          "link": 23
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [24]
+        }
+      ],
+      "title": "Input Test Subgraph",
+      "properties": {
+        "proxyWidgets": [
+          ["12", "seed"],
+          ["15", "text"]
+        ]
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 13,
+      "type": "PrimitiveInt",
+      "pos": [155.04048166054417, 773.3816055422594],
+      "size": [270, 82],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "INT",
+          "type": "INT",
+          "links": [22]
+        }
+      ],
+      "title": "Seed Int",
+      "properties": {
+        "Node name for S&R": "PrimitiveInt"
+      },
+      "widgets_values": [0, "randomize"]
+    },
+    {
+      "id": 17,
+      "type": "VAELoader",
+      "pos": [163.6043676075426, 543.9624492717659],
+      "size": [270, 82.65625],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [23]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAELoader"
+      },
+      "widgets_values": ["pixel_space"]
+    }
+  ],
+  "links": [
+    [21, 14, 0, 19, 0, "CLIP"],
+    [22, 13, 0, 19, 1, "INT"],
+    [23, 17, 0, 19, 2, "VAE"],
+    [24, 19, 0, 18, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "314bbb9f-f1cc-456c-b14f-2ba92bd4a597",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 19,
+          "lastLinkId": 24,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Input Test Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [
+            358.8694807105848, 439.23932667242485, 123.14453125,
+            99.99999999999994
+          ]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1408.5510580294986, 463.2512895126797, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "cfaad2dc-7758-412c-a4ac-dc2e6d37b28c",
+            "name": "clip",
+            "type": "CLIP",
+            "linkIds": [16],
+            "localized_name": "clip",
+            "label": "renamed_clip",
+            "pos": [462.0140119605848, 459.23932667242485]
+          },
+          {
+            "id": "2e4600ea-e1b1-42ca-b43a-e066fd080774",
+            "name": "seed",
+            "type": "INT",
+            "linkIds": [15],
+            "localized_name": "seed",
+            "label": "renamed_seed",
+            "pos": [462.0140119605848, 479.23932667242485]
+          },
+          {
+            "id": "86ed2da7-db02-454a-9362-70a3fa3e91bf",
+            "name": "vae",
+            "type": "VAE",
+            "linkIds": [19],
+            "localized_name": "vae",
+            "label": "renamed_vae",
+            "pos": [462.0140119605848, 499.23932667242485]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "8670d1a7-0d44-4688-b7dd-d4b423f1aee0",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [20],
+            "localized_name": "IMAGE",
+            "pos": [1428.5510580294986, 483.2512895126797]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 12,
+            "type": "KSampler",
+            "pos": [769.2424728654022, 512.726159169824],
+            "size": [270, 262],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": null
+              },
+              {
+                "localized_name": "positive",
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": 17
+              },
+              {
+                "localized_name": "negative",
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "localized_name": "latent_image",
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": null
+              },
+              {
+                "localized_name": "seed",
+                "name": "seed",
+                "type": "INT",
+                "widget": {
+                  "name": "seed"
+                },
+                "link": 15
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [18]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          },
+          {
+            "id": 16,
+            "type": "VAEDecode",
+            "pos": [1208.5510580294986, 469.21581253470083],
+            "size": [140, 46],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "samples",
+                "name": "samples",
+                "type": "LATENT",
+                "link": 18
+              },
+              {
+                "localized_name": "vae",
+                "name": "vae",
+                "type": "VAE",
+                "link": 19
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": [20]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 15,
+            "type": "CLIPTextEncode",
+            "pos": [681.4596332342014, 243.17567172890932],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": 16
+              },
+              {
+                "label": "renamed_from_sidepanel",
+                "localized_name": "text",
+                "name": "text",
+                "type": "STRING",
+                "widget": {
+                  "name": "text"
+                },
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": [17]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": [""]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 17,
+            "origin_id": 15,
+            "origin_slot": 0,
+            "target_id": 12,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 18,
+            "origin_id": 12,
+            "origin_slot": 0,
+            "target_id": 16,
+            "target_slot": 0,
+            "type": "LATENT"
+          },
+          {
+            "id": 16,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 15,
+            "target_slot": 0,
+            "type": "CLIP"
+          },
+          {
+            "id": 15,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 12,
+            "target_slot": 4,
+            "type": "INT"
+          },
+          {
+            "id": 19,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 16,
+            "target_slot": 1,
+            "type": "VAE"
+          },
+          {
+            "id": 20,
+            "origin_id": 16,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.6727925600199565,
+      "offset": [446.69747171876463, 99.95078257277316]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -68,6 +68,41 @@ export class AppModeHelper {
     await this.comfyPage.nextFrame()
   }
 
+  /**
+   * Inject linearData into the current graph and enter app mode.
+   *
+   * Serializes the graph, injects linearData with the given inputs and
+   * auto-detected output node IDs, then reloads so the appModeStore
+   * picks up the data via its activeWorkflow watcher.
+   *
+   * @param inputs - Widget selections as [nodeId, widgetName] tuples
+   */
+  async enterAppModeWithInputs(inputs: [string, string][]) {
+    await this.page.evaluate(async (inputTuples) => {
+      const graph = window.app!.graph
+      if (!graph) return
+
+      const outputNodeIds = graph.nodes
+        .filter(
+          (n: { type?: string }) =>
+            n.type === 'SaveImage' || n.type === 'PreviewImage'
+        )
+        .map((n: { id: number | string }) => String(n.id))
+
+      const workflow = graph.serialize() as unknown as Record<string, unknown>
+      const extra = (workflow.extra ?? {}) as Record<string, unknown>
+      extra.linearData = { inputs: inputTuples, outputs: outputNodeIds }
+      workflow.extra = extra
+      await window.app!.loadGraphData(
+        workflow as unknown as Parameters<
+          NonNullable<typeof window.app>['loadGraphData']
+        >[0]
+      )
+    }, inputs)
+    await this.comfyPage.nextFrame()
+    await this.toggleAppMode()
+  }
+
   /** The linear-mode widget list container (visible in app mode). */
   get linearWidgets(): Locator {
     return this.page.locator('[data-testid="linear-widgets"]')
@@ -125,4 +160,42 @@ export class AppModeHelper {
     await dialogInput.waitFor({ state: 'hidden' })
     await this.comfyPage.nextFrame()
   }
+
+  /**
+   * Rename a builder IoItem via the popover menu "Rename" action.
+   * @param title The current widget title shown in the IoItem.
+   * @param newName The new name to assign.
+   */
+  async renameBuilderInputViaMenu(title: string, newName: string) {
+    const menu = this.getBuilderInputItemMenu(title)
+    await menu.click()
+    await this.page.getByText('Rename', { exact: true }).click()
+
+    const input = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByRole('textbox')
+    await input.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Rename a builder IoItem by double-clicking its title to trigger
+   * inline editing.
+   * @param title The current widget title shown in the IoItem.
+   * @param newName The new name to assign.
+   */
+  async renameBuilderInput(title: string, newName: string) {
+    const titleEl = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .filter({ hasText: title })
+    await titleEl.dblclick()
+
+    const input = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByRole('textbox')
+    await input.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await this.comfyPage.nextFrame()
+  }
 }

browser_tests/fixtures/helpers/CanvasHelper.ts

@@ -91,6 +91,12 @@ export class CanvasHelper {
     await this.page.mouse.move(10, 10)
   }
 
+  async isReadOnly(): Promise<boolean> {
+    return this.page.evaluate(() => {
+      return window.app!.canvas.state.readOnly
+    })
+  }
+
   async getScale(): Promise<number> {
     return this.page.evaluate(() => {
       return window.app!.canvas.ds.scale

browser_tests/fixtures/selectors.ts

@@ -28,10 +28,15 @@ export const TestIds = {
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
     errorOverlay: 'error-overlay',
+    errorOverlaySeeErrors: 'error-overlay-see-errors',
     runtimeErrorPanel: 'runtime-error-panel',
     missingNodeCard: 'missing-node-card',
+    errorCardFindOnGithub: 'error-card-find-on-github',
+    errorCardCopy: 'error-card-copy',
     about: 'about-panel',
-    whatsNewSection: 'whats-new-section'
+    whatsNewSection: 'whats-new-section',
+    missingNodePacksGroup: 'error-group-missing-node',
+    missingModelsGroup: 'error-group-missing-model'
   },
   keybindings: {
     presetMenu: 'keybinding-preset-menu'
@@ -64,6 +69,7 @@ export const TestIds = {
   },
   builder: {
     ioItem: 'builder-io-item',
+    ioItemTitle: 'builder-io-item-title',
     widgetActionsMenu: 'widget-actions-menu'
   },
   breadcrumb: {
@@ -75,6 +81,10 @@ export const TestIds = {
   },
   user: {
     currentUserIndicator: 'current-user-indicator'
+  },
+  errors: {
+    imageLoadError: 'error-loading-image',
+    videoLoadError: 'error-loading-video'
   }
 } as const
 
@@ -100,3 +110,4 @@ export type TestIdValue =
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.errors)[keyof typeof TestIds.errors]

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -281,6 +281,14 @@ export class NodeReference {
   getType(): Promise<string> {
     return this.getProperty('type')
   }
+  async centerOnNode(): Promise<void> {
+    await this.comfyPage.page.evaluate((id) => {
+      const node = window.app!.canvas.graph!.getNodeById(id)
+      if (!node) throw new Error(`Node ${id} not found`)
+      window.app!.canvas.centerOnNode(node)
+    }, this.id)
+    await this.comfyPage.nextFrame()
+  }
   async getPosition(): Promise<Position> {
     const pos = await this.comfyPage.canvasOps.convertOffsetToCanvas(
       await this.getProperty<[number, number]>('pos')

browser_tests/helpers/subgraphTestUtils.ts

@@ -1,3 +1,5 @@
+import type { Page } from '@playwright/test'
+
 import type { LGraph, Subgraph } from '../../src/lib/litegraph/src/litegraph'
 import { isSubgraph } from '../../src/utils/typeGuardUtil'
 
@@ -14,3 +16,30 @@ export function assertSubgraph(
     )
   }
 }
+
+/**
+ * Returns the widget-input slot Y position and the node title height
+ * for the promoted "text" input on the SubgraphNode.
+ *
+ * The slot Y should be at the widget row, not the header. A value near
+ * zero or negative indicates the slot is positioned at the header (the bug).
+ */
+export function getTextSlotPosition(page: Page, nodeId: string) {
+  return page.evaluate((id) => {
+    const node = window.app!.canvas.graph!.getNodeById(id)
+    if (!node) return null
+
+    const titleHeight = window.LiteGraph!.NODE_TITLE_HEIGHT
+
+    for (const input of node.inputs) {
+      if (!input.widget || input.type !== 'STRING') continue
+      return {
+        hasPos: !!input.pos,
+        posY: input.pos?.[1] ?? null,
+        widgetName: input.widget.name,
+        titleHeight
+      }
+    }
+    return null
+  }, nodeId)
+}

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -0,0 +1,168 @@
+import type { Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+/**
+ * Default workflow widget inputs as [nodeId, widgetName] tuples.
+ * All widgets from the default graph are selected so the panel scrolls,
+ * pushing the last widget's dropdown to the clipping boundary.
+ */
+const DEFAULT_INPUTS: [string, string][] = [
+  ['4', 'ckpt_name'],
+  ['6', 'text'],
+  ['7', 'text'],
+  ['5', 'width'],
+  ['5', 'height'],
+  ['5', 'batch_size'],
+  ['3', 'seed'],
+  ['3', 'steps'],
+  ['3', 'cfg'],
+  ['3', 'sampler_name'],
+  ['3', 'scheduler'],
+  ['3', 'denoise'],
+  ['9', 'filename_prefix']
+]
+
+function isClippedByAnyAncestor(el: Element): boolean {
+  const child = el.getBoundingClientRect()
+  let parent = el.parentElement
+
+  while (parent) {
+    const overflow = getComputedStyle(parent).overflow
+    if (overflow !== 'visible') {
+      const p = parent.getBoundingClientRect()
+      if (
+        child.top < p.top ||
+        child.bottom > p.bottom ||
+        child.left < p.left ||
+        child.right > p.right
+      ) {
+        return true
+      }
+    }
+    parent = parent.parentElement
+  }
+  return false
+}
+
+/** Add a node to the graph by type and return its ID. */
+async function addNode(page: Page, nodeType: string): Promise<string> {
+  return page.evaluate((type) => {
+    const node = window.app!.graph.add(
+      window.LiteGraph!.createNode(type, undefined, {})
+    )
+    return String(node!.id)
+  }, nodeType)
+}
+
+test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        linear_toggle_enabled: true
+      }
+    })
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('Select dropdown is not clipped in app mode panel', async ({
+    comfyPage
+  }) => {
+    const saveVideoId = await addNode(comfyPage.page, 'SaveVideo')
+    await comfyPage.nextFrame()
+
+    const inputs: [string, string][] = [
+      ...DEFAULT_INPUTS,
+      [saveVideoId, 'codec']
+    ]
+    await comfyPage.appMode.enterAppModeWithInputs(inputs)
+
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
+      timeout: 5000
+    })
+
+    // Scroll to bottom so the codec widget is at the clipping edge
+    const widgetList = comfyPage.appMode.linearWidgets
+    await widgetList.evaluate((el) =>
+      el.scrollTo({ top: el.scrollHeight, behavior: 'instant' })
+    )
+
+    // Click the codec select (combobox role with aria-label from WidgetSelectDefault)
+    const codecSelect = widgetList.getByRole('combobox', { name: 'codec' })
+    await codecSelect.click()
+
+    const overlay = comfyPage.page.locator('.p-select-overlay').first()
+    await expect(overlay).toBeVisible({ timeout: 5000 })
+
+    const isInViewport = await overlay.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
+      )
+    })
+    expect(isInViewport).toBe(true)
+
+    const isClipped = await overlay.evaluate(isClippedByAnyAncestor)
+    expect(isClipped).toBe(false)
+  })
+
+  test('FormDropdown popup is not clipped in app mode panel', async ({
+    comfyPage
+  }) => {
+    const loadImageId = await addNode(comfyPage.page, 'LoadImage')
+    await comfyPage.nextFrame()
+
+    const inputs: [string, string][] = [
+      ...DEFAULT_INPUTS,
+      [loadImageId, 'image']
+    ]
+    await comfyPage.appMode.enterAppModeWithInputs(inputs)
+
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
+      timeout: 5000
+    })
+
+    // Scroll to bottom so the image widget is at the clipping edge
+    const widgetList = comfyPage.appMode.linearWidgets
+    await widgetList.evaluate((el) =>
+      el.scrollTo({ top: el.scrollHeight, behavior: 'instant' })
+    )
+
+    // Click the FormDropdown trigger button for the image widget.
+    // The button emits 'select-click' which toggles the Popover.
+    const imageRow = widgetList.locator(
+      'div:has(> div > span:text-is("image"))'
+    )
+    const dropdownButton = imageRow.locator('button:has(> span)').first()
+    await dropdownButton.click()
+
+    // The unstyled PrimeVue Popover renders with role="dialog".
+    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
+    const popover = comfyPage.page
+      .getByRole('dialog')
+      .filter({ has: comfyPage.page.getByRole('button', { name: 'All' }) })
+      .first()
+    await expect(popover).toBeVisible({ timeout: 5000 })
+
+    const isInViewport = await popover.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
+      )
+    })
+    expect(isInViewport).toBe(true)
+
+    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
+    expect(isClipped).toBe(false)
+  })
+})

browser_tests/tests/appModeWidgetRename.spec.ts

@@ -30,10 +30,18 @@ async function setupSubgraphBuilder(comfyPage: ComfyPage) {
   await appMode.enterBuilder()
   await appMode.goToInputs()
 
+  // Reset zoom to 1 and center on the subgraph node so click coords are accurate
+  await comfyPage.canvasOps.setScale(1)
+  await subgraphNode.centerOnNode()
+
   // Click the promoted seed widget on the canvas to select it
   const seedWidgetRef = await subgraphNode.getWidget(0)
   const seedPos = await seedWidgetRef.getPosition()
-  await page.mouse.click(seedPos.x, seedPos.y)
+  const titleHeight = await page.evaluate(
+    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
+  )
+
+  await page.mouse.click(seedPos.x, seedPos.y + titleHeight)
   await comfyPage.nextFrame()
 
   // Select an output node
@@ -48,9 +56,15 @@ async function setupSubgraphBuilder(comfyPage: ComfyPage) {
     )
   )
   const saveImageRef = await comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-  const saveImagePos = await saveImageRef.getPosition()
-  // Click left edge — the right side is hidden by the builder panel
-  await page.mouse.click(saveImagePos.x + 10, saveImagePos.y - 10)
+  await saveImageRef.centerOnNode()
+
+  // Node is centered on screen, so click the canvas center
+  const canvasBox = await page.locator('#graph-canvas').boundingBox()
+  if (!canvasBox) throw new Error('Canvas not found')
+  await page.mouse.click(
+    canvasBox.x + canvasBox.width / 2,
+    canvasBox.y + canvasBox.height / 2
+  )
   await comfyPage.nextFrame()
 
   return subgraphNode
@@ -80,9 +94,15 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
       }
     })
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.AppBuilder.VueNodeSwitchDismissed',
+      true
+    )
   })
 
-  test('Rename from builder input-select sidebar', async ({ comfyPage }) => {
+  test('Rename from builder input-select sidebar via menu', async ({
+    comfyPage
+  }) => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)
 
@@ -91,11 +111,11 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
 
     const menu = appMode.getBuilderInputItemMenu('seed')
     await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameWidget(menu, 'Builder Input Seed')
+    await appMode.renameBuilderInputViaMenu('seed', 'Builder Input Seed')
 
     // Verify in app mode after save/reload
     await appMode.exitBuilder()
-    const workflowName = `${new Date().getTime()} builder-input`
+    const workflowName = `${new Date().getTime()} builder-input-menu`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
     await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
@@ -104,6 +124,24 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     ).toBeVisible()
   })
 
+  test('Rename from builder input-select sidebar via double-click', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+
+    await appMode.goToInputs()
+
+    await appMode.renameBuilderInput('seed', 'Dblclick Seed')
+
+    await appMode.exitBuilder()
+    const workflowName = `${new Date().getTime()} builder-input-dblclick`
+    await saveAndReopenInAppMode(comfyPage, workflowName)
+
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets.getByText('Dblclick Seed')).toBeVisible()
+  })
+
   test('Rename from builder preview sidebar', async ({ comfyPage }) => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)

browser_tests/tests/colorPalette.spec.ts

@@ -38,16 +38,13 @@ const customColorPalettes = {
         CLEAR_BACKGROUND_COLOR: '#222222',
         NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
         NODE_SELECTED_TITLE_COLOR: '#FFF',
-        NODE_TEXT_SIZE: 14,
         NODE_TEXT_COLOR: '#b8b8b8',
-        NODE_SUBTEXT_SIZE: 12,
         NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
         NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
         NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#236692',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
-        DEFAULT_GROUP_FONT: 24,
         WIDGET_BGCOLOR: '#242424',
         WIDGET_OUTLINE_COLOR: '#333',
         WIDGET_TEXT_COLOR: '#a3a3a8',
@@ -102,16 +99,13 @@ const customColorPalettes = {
         CLEAR_BACKGROUND_COLOR: '#000',
         NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
         NODE_SELECTED_TITLE_COLOR: '#FFF',
-        NODE_TEXT_SIZE: 14,
         NODE_TEXT_COLOR: '#b8b8b8',
-        NODE_SUBTEXT_SIZE: 12,
         NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
         NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
         NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#236692',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
-        DEFAULT_GROUP_FONT: 24,
         WIDGET_BGCOLOR: '#242424',
         WIDGET_OUTLINE_COLOR: '#333',
         WIDGET_TEXT_COLOR: '#a3a3a8',

browser_tests/tests/defaultKeybindings.spec.ts

@@ -0,0 +1,318 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+async function pressKeyAndExpectRequest(
+  comfyPage: ComfyPage,
+  key: string,
+  urlPattern: string,
+  method: string = 'POST'
+) {
+  const requestPromise = comfyPage.page.waitForRequest(
+    (req) => req.url().includes(urlPattern) && req.method() === method,
+    { timeout: 5000 }
+  )
+  await comfyPage.page.keyboard.press(key)
+  return requestPromise
+}
+
+test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
+  test.describe('Sidebar Toggle Shortcuts', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
+      await comfyPage.nextFrame()
+    })
+
+    const sidebarTabs = [
+      { key: 'KeyW', tabId: 'workflows', label: 'workflows' },
+      { key: 'KeyN', tabId: 'node-library', label: 'node library' },
+      { key: 'KeyM', tabId: 'model-library', label: 'model library' },
+      { key: 'KeyA', tabId: 'assets', label: 'assets' }
+    ] as const
+
+    for (const { key, tabId, label } of sidebarTabs) {
+      test(`'${key}' toggles ${label} sidebar`, async ({ comfyPage }) => {
+        const selectedButton = comfyPage.page.locator(
+          `.${tabId}-tab-button.side-bar-button-selected`
+        )
+
+        await expect(selectedButton).not.toBeVisible()
+
+        await comfyPage.canvas.press(key)
+        await comfyPage.nextFrame()
+        await expect(selectedButton).toBeVisible()
+
+        await comfyPage.canvas.press(key)
+        await comfyPage.nextFrame()
+        await expect(selectedButton).not.toBeVisible()
+      })
+    }
+  })
+
+  test.describe('Canvas View Controls', () => {
+    test("'Alt+=' zooms in", async ({ comfyPage }) => {
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.canvas.press('Alt+Equal')
+      await comfyPage.nextFrame()
+
+      const newScale = await comfyPage.canvasOps.getScale()
+      expect(newScale).toBeGreaterThan(initialScale)
+    })
+
+    test("'Alt+-' zooms out", async ({ comfyPage }) => {
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.canvas.press('Alt+Minus')
+      await comfyPage.nextFrame()
+
+      const newScale = await comfyPage.canvasOps.getScale()
+      expect(newScale).toBeLessThan(initialScale)
+    })
+
+    test("'.' fits view to nodes", async ({ comfyPage }) => {
+      // Set scale very small so fit-view will zoom back to fit nodes
+      await comfyPage.canvasOps.setScale(0.1)
+      const scaleBefore = await comfyPage.canvasOps.getScale()
+      expect(scaleBefore).toBeCloseTo(0.1, 1)
+
+      // Click canvas to ensure focus is within graph-canvas-container
+      await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
+      await comfyPage.nextFrame()
+
+      await comfyPage.canvas.press('Period')
+      await comfyPage.nextFrame()
+
+      const scaleAfter = await comfyPage.canvasOps.getScale()
+      expect(scaleAfter).toBeGreaterThan(scaleBefore)
+    })
+
+    test("'h' locks canvas", async ({ comfyPage }) => {
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+
+      await comfyPage.canvas.press('KeyH')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+    })
+
+    test("'v' unlocks canvas", async ({ comfyPage }) => {
+      // Lock first
+      await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+      await comfyPage.nextFrame()
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+
+      await comfyPage.canvas.press('KeyV')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+    })
+  })
+
+  test.describe('Node State Toggles', () => {
+    test("'Alt+c' collapses and expands selected nodes", async ({
+      comfyPage
+    }) => {
+      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(nodes.length).toBeGreaterThan(0)
+      const node = nodes[0]
+
+      await node.click('title')
+      await comfyPage.nextFrame()
+
+      expect(await node.isCollapsed()).toBe(false)
+
+      await comfyPage.canvas.press('Alt+KeyC')
+      await comfyPage.nextFrame()
+      expect(await node.isCollapsed()).toBe(true)
+
+      await comfyPage.canvas.press('Alt+KeyC')
+      await comfyPage.nextFrame()
+      expect(await node.isCollapsed()).toBe(false)
+    })
+
+    test("'Ctrl+m' mutes and unmutes selected nodes", async ({ comfyPage }) => {
+      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(nodes.length).toBeGreaterThan(0)
+      const node = nodes[0]
+
+      await node.click('title')
+      await comfyPage.nextFrame()
+
+      // Normal mode is ALWAYS (0)
+      const getMode = () =>
+        comfyPage.page.evaluate((nodeId) => {
+          return window.app!.canvas.graph!.getNodeById(nodeId)!.mode
+        }, node.id)
+
+      expect(await getMode()).toBe(0)
+
+      await comfyPage.canvas.press('Control+KeyM')
+      await comfyPage.nextFrame()
+      // NEVER (2) = muted
+      expect(await getMode()).toBe(2)
+
+      await comfyPage.canvas.press('Control+KeyM')
+      await comfyPage.nextFrame()
+      expect(await getMode()).toBe(0)
+    })
+  })
+
+  test.describe('Mode and Panel Toggles', () => {
+    test("'Alt+m' toggles app mode", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      // Set up linearData so app mode has something to show
+      await comfyPage.appMode.enterAppModeWithInputs([])
+      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+
+      // Toggle off with Alt+m
+      await comfyPage.page.keyboard.press('Alt+KeyM')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.appMode.linearWidgets).not.toBeVisible()
+
+      // Toggle on again
+      await comfyPage.page.keyboard.press('Alt+KeyM')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+    })
+
+    test("'Alt+Shift+m' toggles minimap", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
+      await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+      await comfyPage.workflow.loadWorkflow('default')
+
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      await expect(minimap).toBeVisible()
+
+      await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
+      await comfyPage.nextFrame()
+      await expect(minimap).not.toBeVisible()
+
+      await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
+      await comfyPage.nextFrame()
+      await expect(minimap).toBeVisible()
+    })
+
+    test("'Ctrl+`' toggles terminal/logs panel", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
+
+      await comfyPage.page.keyboard.press('Control+Backquote')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.bottomPanel.root).toBeVisible()
+
+      await comfyPage.page.keyboard.press('Control+Backquote')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
+    })
+  })
+
+  test.describe('Queue and Execution', () => {
+    test("'Ctrl+Enter' queues prompt", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Enter',
+        '/prompt',
+        'POST'
+      )
+      expect(request.url()).toContain('/prompt')
+    })
+
+    test("'Ctrl+Shift+Enter' queues prompt to front", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Shift+Enter',
+        '/prompt',
+        'POST'
+      )
+      const body = request.postDataJSON()
+      expect(body.front).toBe(true)
+    })
+
+    test("'Ctrl+Alt+Enter' interrupts execution", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Alt+Enter',
+        '/interrupt',
+        'POST'
+      )
+      expect(request.url()).toContain('/interrupt')
+    })
+  })
+
+  test.describe('File Operations', () => {
+    test("'Ctrl+s' triggers save workflow", async ({ comfyPage }) => {
+      // On a new unsaved workflow, Ctrl+s triggers Save As dialog.
+      // The dialog appearing proves the keybinding was intercepted by the app.
+      await comfyPage.page.keyboard.press('Control+s')
+      await comfyPage.nextFrame()
+
+      // The Save As dialog should appear (p-dialog overlay)
+      const dialogOverlay = comfyPage.page.locator('.p-dialog-mask')
+      await expect(dialogOverlay).toBeVisible({ timeout: 3000 })
+
+      // Dismiss the dialog
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+    })
+
+    test("'Ctrl+o' triggers open workflow", async ({ comfyPage }) => {
+      // Ctrl+o calls app.ui.loadFile() which clicks a hidden file input.
+      // Detect the file input click via an event listener.
+      await comfyPage.page.evaluate(() => {
+        window.TestCommand = false
+        const fileInputs =
+          document.querySelectorAll<HTMLInputElement>('input[type="file"]')
+        for (const input of fileInputs) {
+          input.addEventListener('click', () => {
+            window.TestCommand = true
+          })
+        }
+      })
+
+      await comfyPage.page.keyboard.press('Control+o')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
+    })
+  })
+
+  test.describe('Graph Operations', () => {
+    test("'Ctrl+Shift+e' converts selection to subgraph", async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(initialCount).toBeGreaterThan(1)
+
+      // Select all nodes
+      await comfyPage.canvas.press('Control+a')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.keyboard.press('Control+Shift+KeyE')
+      await comfyPage.nextFrame()
+
+      // After conversion, node count should decrease
+      // (multiple nodes replaced by single subgraph node)
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
+          timeout: 5000
+        })
+        .toBeLessThan(initialCount)
+    })
+
+    test("'r' refreshes node definitions", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'KeyR',
+        '/object_info',
+        'GET'
+      )
+      expect(request.url()).toContain('/object_info')
+    })
+  })
+})

browser_tests/tests/dialog.spec.ts

@@ -28,7 +28,7 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
     await expect(missingNodesTitle).toBeVisible()
   })
 
@@ -42,11 +42,13 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
     await expect(missingNodesTitle).toBeVisible()
 
     // Click "See Errors" to open the errors tab and verify subgraph node content
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     const missingNodeCard = comfyPage.page.getByTestId(
@@ -75,7 +77,9 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     await expect(errorOverlay).toBeVisible()
 
     // Click "See Errors" to open the right side panel errors tab
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Verify MissingNodeCard is rendered in the errors tab
@@ -165,17 +169,19 @@ test.describe('Error actions in Errors Tab', { tag: '@ui' }, () => {
       TestIds.dialogs.errorOverlay
     )
     await expect(errorOverlay).toBeVisible()
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Verify Find on GitHub button is present in the error card
-    const findOnGithubButton = comfyPage.page.getByRole('button', {
-      name: 'Find on GitHub'
-    })
+    const findOnGithubButton = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorCardFindOnGithub
+    )
     await expect(findOnGithubButton).toBeVisible()
 
     // Verify Copy button is present in the error card
-    const copyButton = comfyPage.page.getByRole('button', { name: 'Copy' })
+    const copyButton = comfyPage.page.getByTestId(TestIds.dialogs.errorCardCopy)
     await expect(copyButton).toBeVisible()
   })
 })
@@ -204,7 +210,7 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
     await expect(missingModelsTitle).toBeVisible()
   })
 
@@ -220,7 +226,7 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
     await expect(missingModelsTitle).toBeVisible()
   })
 
@@ -231,13 +237,10 @@ test.describe('Missing models in Error Tab', () => {
       'missing/model_metadata_widget_mismatch'
     )
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).not.toBeVisible()
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).not.toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    ).not.toBeVisible()
+    await expect(comfyPage.page.getByText(/Missing Models/)).not.toBeVisible()
   })
 
   // Flaky test after parallelization

browser_tests/tests/graph.spec.ts

@@ -23,4 +23,85 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
     await comfyPage.workflow.loadWorkflow('links/bad_link')
     await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(2)
   })
+
+  // Regression: duplicate links with shifted target_slot (widget-to-input
+  // conversion) caused the wrong link to survive during deduplication.
+  // Switch(CFG) node 120 connects to both KSamplerAdvanced 85 and 86 (2 links).
+  // Links 257 and 276 shared the same tuple (origin=120 → target=85 slot=5).
+  // Node 85's input.link was 276 (valid), but the bug kept 257 (stale) and
+  // removed 276, breaking the cfg connection on KSamplerAdvanced 85.
+  // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/10291
+  test('Deduplicates links without breaking connections on slot-drift workflow', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('links/duplicate_links_slot_drift')
+
+    const result = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.graph!
+
+      const subgraph = graph.subgraphs.values().next().value
+      if (!subgraph) return { error: 'No subgraph found' }
+
+      // Node 120 = Switch (CFG), connects to both KSamplerAdvanced 85 and 86
+      const switchCfg = subgraph.getNodeById(120)
+      const ksampler85 = subgraph.getNodeById(85)
+      const ksampler86 = subgraph.getNodeById(86)
+      if (!switchCfg || !ksampler85 || !ksampler86)
+        return { error: 'Required nodes not found' }
+
+      // Find cfg inputs by name (slot indices shift due to widget-to-input)
+      const cfgInput85 = ksampler85.inputs.find(
+        (i: { name: string }) => i.name === 'cfg'
+      )
+      const cfgInput86 = ksampler86.inputs.find(
+        (i: { name: string }) => i.name === 'cfg'
+      )
+      const cfg85Linked = cfgInput85?.link != null
+      const cfg86Linked = cfgInput86?.link != null
+
+      // Verify the surviving links exist in the subgraph link map
+      const cfg85LinkValid =
+        cfg85Linked && subgraph.links.has(cfgInput85!.link!)
+      const cfg86LinkValid =
+        cfg86Linked && subgraph.links.has(cfgInput86!.link!)
+
+      // Switch(CFG) output should have exactly 2 links (one to each KSampler)
+      const switchOutputLinkCount = switchCfg.outputs[0]?.links?.length ?? 0
+
+      // Count links from Switch(CFG) to node 85 cfg (should be 1, not 2)
+      let cfgLinkToNode85Count = 0
+      for (const link of subgraph.links.values()) {
+        if (link.origin_id === 120 && link.target_id === 85)
+          cfgLinkToNode85Count++
+      }
+
+      return {
+        cfg85Linked,
+        cfg86Linked,
+        cfg85LinkValid,
+        cfg86LinkValid,
+        cfg85LinkId: cfgInput85?.link ?? null,
+        cfg86LinkId: cfgInput86?.link ?? null,
+        switchOutputLinkIds: [...(switchCfg.outputs[0]?.links ?? [])],
+        switchOutputLinkCount,
+        cfgLinkToNode85Count
+      }
+    })
+
+    expect(result).not.toHaveProperty('error')
+    // Both KSamplerAdvanced nodes must have their cfg input connected
+    expect(result.cfg85Linked).toBe(true)
+    expect(result.cfg86Linked).toBe(true)
+    // Links must exist in the subgraph link map
+    expect(result.cfg85LinkValid).toBe(true)
+    expect(result.cfg86LinkValid).toBe(true)
+    // Switch(CFG) output has exactly 2 links (one per KSamplerAdvanced)
+    expect(result.switchOutputLinkCount).toBe(2)
+    // Only 1 link from Switch(CFG) to node 85 (duplicate removed)
+    expect(result.cfgLinkToNode85Count).toBe(1)
+    // Output link IDs must match the input link IDs (source/target integrity)
+    expect(result.switchOutputLinkIds).toEqual(
+      expect.arrayContaining([result.cfg85LinkId, result.cfg86LinkId])
+    )
+  })
 })

browser_tests/tests/interaction.spec.ts

@@ -764,13 +764,13 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     )
   })
 
+  const generateUniqueFilename = (extension = '') =>
+    `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
+
   test.describe('Restore all open workflows on reload', () => {
     let workflowA: string
     let workflowB: string
 
-    const generateUniqueFilename = (extension = '') =>
-      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
-
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
 
@@ -829,6 +829,82 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     })
   })
 
+  test.describe('Restore workflow tabs after browser restart', () => {
+    let workflowA: string
+    let workflowB: string
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      workflowA = generateUniqueFilename()
+      await comfyPage.menu.topbar.saveWorkflow(workflowA)
+      workflowB = generateUniqueFilename()
+      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.menu.topbar.saveWorkflow(workflowB)
+
+      // Wait for localStorage fallback pointers to be written
+      await comfyPage.page.waitForFunction(() => {
+        for (let i = 0; i < window.localStorage.length; i++) {
+          const key = window.localStorage.key(i)
+          if (key?.startsWith('Comfy.Workflow.LastOpenPaths:')) {
+            return true
+          }
+        }
+        return false
+      })
+
+      // Simulate browser restart: clear sessionStorage (lost on close)
+      // but keep localStorage (survives browser restart)
+      await comfyPage.page.evaluate(() => {
+        sessionStorage.clear()
+      })
+      await comfyPage.setup({ clearStorage: false })
+    })
+
+    test('Restores topbar workflow tabs after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+      // Wait for both restored tabs to render (localStorage fallback is async)
+      await expect(
+        comfyPage.page.locator('.workflow-tabs .workflow-label', {
+          hasText: workflowA
+        })
+      ).toBeVisible()
+
+      const tabs = await comfyPage.menu.topbar.getTabNames()
+      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
+
+      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+
+    test('Restores sidebar workflows after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+      const openWorkflows =
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      const activeWorkflowName =
+        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      expect(openWorkflows).toEqual(
+        expect.arrayContaining([workflowA, workflowB])
+      )
+      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
+        openWorkflows.indexOf(workflowB)
+      )
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+  })
+
   test('Auto fit view after loading workflow', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.EnableWorkflowViewRestore',

browser_tests/tests/linearMode.spec.ts

@@ -1,5 +1,3 @@
-import type { Page } from '@playwright/test'
-
 import {
   comfyPageFixture as test,
   comfyExpect as expect
@@ -11,58 +9,10 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
     await comfyPage.setup()
   })
 
-  async function enterAppMode(comfyPage: {
-    page: Page
-    nextFrame: () => Promise<void>
-  }) {
-    // LinearControls requires hasOutputs to be true. Serialize the current
-    // graph, inject linearData with output node IDs, then reload so the
-    // appModeStore picks up the outputs via its activeWorkflow watcher.
-    await comfyPage.page.evaluate(async () => {
-      const graph = window.app!.graph
-      if (!graph) return
-
-      const outputNodeIds = graph.nodes
-        .filter(
-          (n: { type?: string }) =>
-            n.type === 'SaveImage' || n.type === 'PreviewImage'
-        )
-        .map((n: { id: number | string }) => String(n.id))
-
-      // Serialize, inject linearData, and reload to sync stores
-      const workflow = graph.serialize() as unknown as Record<string, unknown>
-      const extra = (workflow.extra ?? {}) as Record<string, unknown>
-      extra.linearData = { inputs: [], outputs: outputNodeIds }
-      workflow.extra = extra
-      await window.app!.loadGraphData(
-        workflow as unknown as Parameters<
-          NonNullable<typeof window.app>['loadGraphData']
-        >[0]
-      )
-    })
-    await comfyPage.nextFrame()
-
-    // Toggle to app mode via the command which sets canvasStore.linearMode
-    await comfyPage.page.evaluate(() => {
-      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
-    })
-    await comfyPage.nextFrame()
-  }
-
-  async function enterGraphMode(comfyPage: {
-    page: Page
-    nextFrame: () => Promise<void>
-  }) {
-    await comfyPage.page.evaluate(() => {
-      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
-    })
-    await comfyPage.nextFrame()
-  }
-
   test('Displays linear controls when app mode active', async ({
     comfyPage
   }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
@@ -70,7 +20,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Run button visible in linear mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-run-button"]')
@@ -78,7 +28,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-workflow-info"]')
@@ -86,13 +36,13 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Returns to graph mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
     ).toBeVisible({ timeout: 5000 })
 
-    await enterGraphMode(comfyPage)
+    await comfyPage.appMode.toggleAppMode()
 
     await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
     await expect(
@@ -101,7 +51,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Canvas not visible in app mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')

browser_tests/tests/subgraph-promoted-slot-position.spec.ts

@@ -0,0 +1,86 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { getTextSlotPosition } from '../helpers/subgraphTestUtils'
+
+test.describe(
+  'Subgraph promoted widget-input slot position',
+  { tag: '@subgraph' },
+  () => {
+    test('Promoted text widget slot is positioned at widget row, not header', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      // Render a few frames so arrange() runs
+      await comfyPage.nextFrame()
+      await comfyPage.nextFrame()
+
+      const result = await getTextSlotPosition(comfyPage.page, '11')
+      expect(result).not.toBeNull()
+      expect(result!.hasPos).toBe(true)
+
+      // The slot Y position should be well below the title area.
+      // If it's near 0 or negative, the slot is stuck at the header (the bug).
+      expect(result!.posY).toBeGreaterThan(result!.titleHeight)
+    })
+
+    test('Slot position remains correct after renaming subgraph input label', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+      await comfyPage.nextFrame()
+      await comfyPage.nextFrame()
+
+      // Verify initial position is correct
+      const before = await getTextSlotPosition(comfyPage.page, '11')
+      expect(before).not.toBeNull()
+      expect(before!.hasPos).toBe(true)
+      expect(before!.posY).toBeGreaterThan(before!.titleHeight)
+
+      // Navigate into subgraph and rename the text input
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialLabel = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        const textInput = graph.inputs?.find(
+          (i: { type: string }) => i.type === 'STRING'
+        )
+        return textInput?.label || textInput?.name || null
+      })
+
+      if (!initialLabel)
+        throw new Error('Could not find STRING input in subgraph')
+
+      await comfyPage.subgraph.rightClickInputSlot(initialLabel)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      const dialog = '.graphdialog input'
+      await comfyPage.page.waitForSelector(dialog, { state: 'visible' })
+      await comfyPage.page.fill(dialog, '')
+      await comfyPage.page.fill(dialog, 'my_custom_prompt')
+      await comfyPage.page.keyboard.press('Enter')
+      await comfyPage.page.waitForSelector(dialog, { state: 'hidden' })
+
+      // Navigate back to parent graph
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Verify slot position is still at the widget row after rename
+      const after = await getTextSlotPosition(comfyPage.page, '11')
+      expect(after).not.toBeNull()
+      expect(after!.hasPos).toBe(true)
+      expect(after!.posY).toBeGreaterThan(after!.titleHeight)
+
+      // widget.name is the stable identity key — it does NOT change on rename.
+      // The display label is on input.label, read via PromotedWidgetView.label.
+      expect(after!.widgetName).not.toBe('my_custom_prompt')
+    })
+  }
+)

browser_tests/tests/subgraph-promoted-widget-dom.spec.ts

@@ -0,0 +1,57 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
+
+test.describe(
+  'Subgraph promoted widget DOM position',
+  { tag: '@subgraph' },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
+    test('Promoted seed widget renders in node body, not header', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('default')
+
+      // Convert KSampler (id 3) to subgraph — seed is auto-promoted.
+      const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+      await ksampler.click('title')
+      const subgraphNode = await ksampler.convertToSubgraph()
+      await comfyPage.nextFrame()
+
+      // Enable Vue nodes now that the subgraph has been created
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+      const subgraphNodeId = String(subgraphNode.id)
+      const promotedNames = await getPromotedWidgetNames(
+        comfyPage,
+        subgraphNodeId
+      )
+      expect(promotedNames).toContain('seed')
+
+      // Wait for Vue nodes to render
+      await comfyPage.vueNodes.waitForNodes()
+
+      const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
+      await expect(nodeLocator).toBeVisible()
+
+      // The seed widget should be visible inside the node body
+      const seedWidget = nodeLocator.getByLabel('seed', { exact: true }).first()
+      await expect(seedWidget).toBeVisible()
+
+      // Verify widget is inside the node body, not the header
+      const headerBox = await nodeLocator
+        .locator('[data-testid^="node-header-"]')
+        .boundingBox()
+      const widgetBox = await seedWidget.boundingBox()
+      expect(headerBox).not.toBeNull()
+      expect(widgetBox).not.toBeNull()
+
+      // Widget top should be below the header bottom
+      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
+    })
+  }
+)

browser_tests/tests/subgraphInputSlotRename.spec.ts

@@ -0,0 +1,117 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+const WORKFLOW = 'subgraphs/test-values-input-subgraph'
+const RENAMED_LABEL = 'my_seed'
+
+/**
+ * Regression test for subgraph input slot rename propagation.
+ *
+ * Renaming a SubgraphInput slot (e.g. "seed") inside the subgraph must
+ * update the promoted widget label shown on the parent SubgraphNode and
+ * keep the widget positioned in the node body (not the header).
+ *
+ * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10195
+ */
+test.describe(
+  'Subgraph input slot rename propagation',
+  { tag: ['@subgraph', '@widget'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    })
+
+    test('Renaming a subgraph input slot updates the widget label on the parent node', async ({
+      comfyPage
+    }) => {
+      const { page } = comfyPage
+
+      // 1. Load workflow with subgraph containing a promoted seed widget input
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.vueNodes.waitForNodes()
+
+      const sgNode = comfyPage.vueNodes.getNodeLocator('19')
+      await expect(sgNode).toBeVisible()
+
+      // 2. Verify the seed widget is visible on the parent node
+      const seedWidget = sgNode.getByLabel('seed', { exact: true })
+      await expect(seedWidget).toBeVisible()
+
+      // Verify widget is in the node body, not the header
+      const headerBox = await sgNode
+        .locator('[data-testid^="node-header-"]')
+        .boundingBox()
+      const widgetBox = await seedWidget.boundingBox()
+      expect(headerBox).not.toBeNull()
+      expect(widgetBox).not.toBeNull()
+      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
+
+      // 3. Enter the subgraph and rename the seed slot.
+      //    The subgraph IO rename uses canvas.prompt() which requires the
+      //    litegraph context menu, so temporarily disable Vue nodes.
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.nextFrame()
+
+      const sgNodeRef = await comfyPage.nodeOps.getNodeRefById('19')
+      await sgNodeRef.navigateIntoSubgraph()
+
+      // Find the seed SubgraphInput slot
+      const seedSlotName = await page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph) return null
+        const inputs = (
+          graph as { inputs?: Array<{ name: string; type: string }> }
+        ).inputs
+        return inputs?.find((i) => i.name.includes('seed'))?.name ?? null
+      })
+      expect(seedSlotName).not.toBeNull()
+
+      // 4. Right-click the seed input slot and rename it
+      await comfyPage.subgraph.rightClickInputSlot(seedSlotName!)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      const dialog = '.graphdialog input'
+      await page.waitForSelector(dialog, { state: 'visible' })
+      await page.fill(dialog, '')
+      await page.fill(dialog, RENAMED_LABEL)
+      await page.keyboard.press('Enter')
+      await page.waitForSelector(dialog, { state: 'hidden' })
+
+      // 5. Navigate back to parent graph and re-enable Vue nodes
+      await comfyPage.subgraph.exitViaBreadcrumb()
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.vueNodes.waitForNodes()
+
+      // 6. Verify the widget label updated to the renamed value
+      const sgNodeAfter = comfyPage.vueNodes.getNodeLocator('19')
+      await expect(sgNodeAfter).toBeVisible()
+
+      const updatedLabel = await page.evaluate(() => {
+        const node = window.app!.canvas.graph!.getNodeById('19')
+        if (!node) return null
+        const w = node.widgets?.find((w: { name: string }) =>
+          w.name.includes('seed')
+        )
+        return w?.label || w?.name || null
+      })
+      expect(updatedLabel).toBe(RENAMED_LABEL)
+
+      // 7. Verify the widget is still in the body, not the header
+      const seedWidgetAfter = sgNodeAfter.getByLabel('seed', { exact: true })
+      await expect(seedWidgetAfter).toBeVisible()
+
+      const headerAfter = await sgNodeAfter
+        .locator('[data-testid^="node-header-"]')
+        .boundingBox()
+      const widgetAfter = await seedWidgetAfter.boundingBox()
+      expect(headerAfter).not.toBeNull()
+      expect(widgetAfter).not.toBeNull()
+      expect(widgetAfter!.y).toBeGreaterThan(
+        headerAfter!.y + headerAfter!.height
+      )
+    })
+  }
+)

browser_tests/tests/subgraphSlotAlignment.spec.ts

@@ -0,0 +1,132 @@
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+
+import { expect } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+interface SlotMeasurement {
+  key: string
+  offsetX: number
+  offsetY: number
+}
+
+interface NodeSlotData {
+  nodeId: string
+  isSubgraph: boolean
+  nodeW: number
+  nodeH: number
+  slots: SlotMeasurement[]
+}
+
+/**
+ * Regression test for link misalignment on SubgraphNodes when loading
+ * workflows with workflowRendererVersion: "LG".
+ *
+ * Root cause: ensureCorrectLayoutScale scales nodes by 1.2x for LG workflows,
+ * and fitView() updates lgCanvas.ds immediately. The Vue TransformPane's CSS
+ * transform lags by a frame, causing clientPosToCanvasPos to produce wrong
+ * slot offsets. The fix uses DOM-relative measurement instead.
+ */
+test.describe(
+  'Subgraph slot alignment after LG layout scale',
+  { tag: ['@subgraph', '@canvas'] },
+  () => {
+    test('slot positions stay within node bounds after loading LG workflow', async ({
+      comfyPage
+    }) => {
+      const SLOT_BOUNDS_MARGIN = 20
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+      const workflowPath = resolve(
+        import.meta.dirname,
+        '../assets/subgraphs/basic-subgraph.json'
+      )
+      const workflow = JSON.parse(
+        readFileSync(workflowPath, 'utf-8')
+      ) as ComfyWorkflowJSON
+      workflow.extra = {
+        ...workflow.extra,
+        workflowRendererVersion: 'LG'
+      }
+
+      await comfyPage.page.evaluate(
+        (wf) =>
+          window.app!.loadGraphData(wf as ComfyWorkflowJSON, true, true, null, {
+            openSource: 'template'
+          }),
+        workflow
+      )
+      await comfyPage.nextFrame()
+
+      // Wait for slot elements to appear in DOM
+      await comfyPage.page.locator('[data-slot-key]').first().waitFor()
+
+      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
+        const nodes = window.app!.graph._nodes
+        const slotData: NodeSlotData[] = []
+
+        for (const node of nodes) {
+          const nodeId = String(node.id)
+          const nodeEl = document.querySelector(
+            `[data-node-id="${nodeId}"]`
+          ) as HTMLElement | null
+          if (!nodeEl) continue
+
+          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
+          if (slotEls.length === 0) continue
+
+          const slots: SlotMeasurement[] = []
+
+          const nodeRect = nodeEl.getBoundingClientRect()
+          for (const slotEl of slotEls) {
+            const slotRect = slotEl.getBoundingClientRect()
+            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
+            slots.push({
+              key: slotKey,
+              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
+              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
+            })
+          }
+
+          slotData.push({
+            nodeId,
+            isSubgraph: !!node.isSubgraphNode?.(),
+            nodeW: nodeRect.width,
+            nodeH: nodeRect.height,
+            slots
+          })
+        }
+
+        return slotData
+      })
+
+      const subgraphNodes = result.filter((n) => n.isSubgraph)
+      expect(subgraphNodes.length).toBeGreaterThan(0)
+
+      for (const node of subgraphNodes) {
+        for (const slot of node.slots) {
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
+
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
+        }
+      }
+    })
+  }
+)

browser_tests/tests/templates.spec.ts

@@ -206,6 +206,31 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })
 
+  test(
+    'select components in filter bar render correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      // Wait for filter bar select components to render
+      const dialog = comfyPage.page.getByRole('dialog')
+      const sortBySelect = dialog.getByRole('combobox', { name: /Sort/ })
+      await expect(sortBySelect).toBeVisible()
+
+      // Screenshot the filter bar containing MultiSelect and SingleSelect
+      const filterBar = sortBySelect.locator(
+        'xpath=ancestor::div[contains(@class, "justify-between")]'
+      )
+      await expect(filterBar).toHaveScreenshot(
+        'template-filter-bar-select-components.png',
+        {
+          mask: [comfyPage.page.locator('.p-toast')]
+        }
+      )
+    }
+  )
+
   test(
     'template cards descriptions adjust height dynamically',
     { tag: '@screenshot' },

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -47,6 +47,46 @@ test.describe('Vue Node Moving', () => {
     }
   )
 
+  test('should not move node when pointer moves less than drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
+      steps: 5
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    expect(afterPos.x).toBeCloseTo(headerPos.x, 0)
+    expect(afterPos.y).toBeCloseTo(headerPos.y, 0)
+
+    // The small movement should have selected the node, not dragged it
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
+
+  test('should move node when pointer moves beyond drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move 50px — well beyond the 3px drag threshold
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 50, headerPos.y + 50, {
+      steps: 20
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await expectPosChanged(headerPos, afterPos)
+  })
+
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts

@@ -2,6 +2,7 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
+import { TestIds } from '../../../../fixtures/selectors'
 
 test.describe('Vue Upload Widgets', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +20,14 @@ test.describe('Vue Upload Widgets', () => {
     ).not.toBeVisible()
 
     await expect
-      .poll(() => comfyPage.page.getByText('Error loading image').count())
+      .poll(() =>
+        comfyPage.page.getByTestId(TestIds.errors.imageLoadError).count()
+      )
       .toBeGreaterThan(0)
     await expect
-      .poll(() => comfyPage.page.getByText('Error loading video').count())
+      .poll(() =>
+        comfyPage.page.getByTestId(TestIds.errors.videoLoadError).count()
+      )
       .toBeGreaterThan(0)
   })
 })

browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts

@@ -46,4 +46,16 @@ test.describe('Vue Multiline String Widget', () => {
 
     await expect(textarea).toHaveValue('Keep me around')
   })
+  test('should use native context menu when focused', async ({ comfyPage }) => {
+    const textarea = getFirstMultilineStringWidget(comfyPage)
+    const vueContextMenu = comfyPage.page.locator('.p-contextmenu')
+
+    await textarea.focus()
+    await textarea.click({ button: 'right' })
+    await expect(vueContextMenu).not.toBeVisible()
+    await textarea.blur()
+
+    await textarea.click({ button: 'right' })
+    await expect(vueContextMenu).toBeVisible()
+  })
 })

docs/qa/TROUBLESHOOTING.md

@@ -0,0 +1,73 @@
+# QA Pipeline Troubleshooting
+
+## Common Failures
+
+### `set -euo pipefail` + grep with no match
+**Symptom**: Deploy script crashes silently, badge shows FAILED.
+**Cause**: `grep -oP` returns exit code 1 when no match. Under `pipefail`, this kills the entire script.
+**Fix**: Always append `|| true` to grep pipelines in bash scripts.
+
+### `__name is not defined` in page.evaluate
+**Symptom**: Recording crashes with `ReferenceError: __name is not defined`.
+**Cause**: tsx compiles arrow functions inside `page.evaluate()` with `__name` helpers. The browser context doesn't have these.
+**Fix**: Use `page.addScriptTag({ content: '...' })` with plain JS strings instead of `page.evaluate(() => { ... })` with arrow functions.
+
+### `Set<string>()` in page.evaluate
+**Symptom**: Same `__name` error.
+**Cause**: TypeScript generics like `new Set<string>()` get compiled incorrectly for browser context.
+**Fix**: Use `new Set()` without type parameter.
+
+### `zod/v4` import error
+**Symptom**: `ERR_PACKAGE_PATH_NOT_EXPORTED: Package subpath './v4' is not defined`.
+**Cause**: claude-agent-sdk depends on `zod/v4` internally, but the project's zod doesn't export it.
+**Fix**: Import from `zod` (not `zod/v4`) in project code.
+
+### `ERR_PNPM_LOCKFILE_CONFIG_MISMATCH`
+**Symptom**: pnpm install fails with frozen lockfile mismatch.
+**Cause**: Adding a new dependency changes the workspace catalog but lockfile wasn't regenerated.
+**Fix**: Run `pnpm install` to regenerate lockfile, commit `pnpm-workspace.yaml` + `pnpm-lock.yaml`.
+
+### `loadDefaultWorkflow` — "Load Default" not found
+**Symptom**: Menu item "Load Default" not found, canvas stays empty.
+**Cause**: The menu item name varies by version/locale. Menu navigation is fragile.
+**Fix**: Use `app.resetToDefaultWorkflow()` JS API via `page.evaluate` instead of menu navigation.
+
+### Model ID not found (Claude Agent SDK)
+**Symptom**: `There's an issue with the selected model (claude-sonnet-4-6-20250514)`.
+**Cause**: Dated model IDs like `claude-sonnet-4-6-20250514` don't exist.
+**Fix**: Use `claude-sonnet-4-6` (no date suffix).
+
+### Model not found (Gemini)
+**Symptom**: 404 from Gemini API.
+**Cause**: Preview model names like `gemini-2.5-flash-preview-05-20` expire.
+**Fix**: Use `gemini-3-flash-preview` (latest stable).
+
+## Badge Mismatches
+
+### False REPRODUCED
+**Symptom**: Badge says REPRODUCED but AI review says "could not reproduce".
+**Root cause**: Grep pattern `reproduc|confirm` matches neutral words like "reproduction steps" or "could not be confirmed".
+**Fix**: Use structured JSON verdict from AI (`## Verdict` section with `{"verdict": "..."}`) instead of regex matching the prose.
+
+### INCONCLUSIVE feedback loop
+**Symptom**: Once an issue gets INCONCLUSIVE, all future runs stay INCONCLUSIVE.
+**Cause**: QA bot's own previous comments contain "INCONCLUSIVE", which gets fed back into pr-context.txt.
+**Fix**: Filter out `github-actions[bot]` comments when building pr-context.
+
+### pressKey with hold prevents event propagation
+**Symptom**: BEFORE video doesn't show the bug (e.g., Escape doesn't close dialog).
+**Cause**: `keyboard.down()` + 400ms sleep + `keyboard.up()` changes event timing. Some UI frameworks handle held keys differently than instant presses.
+**Fix**: Use instant `keyboard.press()` for testing. Show key name via subtitle overlay instead.
+
+## Cursor Not Visible
+**Symptom**: No mouse cursor in recorded videos.
+**Cause**: Headless Chrome doesn't render system cursor. The CSS cursor overlay relies on DOM `mousemove` events which Playwright CDP doesn't reliably trigger.
+**Fix**: Monkey-patch `page.mouse.move/click/dblclick/down/up` to call `__moveCursor(x,y)` on the injected cursor div. This makes ALL mouse operations update the overlay.
+
+## Agent Doesn't Perform Steps
+**Symptom**: Agent opens menus and settings but never interacts with the canvas.
+**Causes**:
+1. `loadDefaultWorkflow` failed (no nodes on canvas)
+2. Agent ran out of turn budget (30 turns / 120s)
+3. Gemini Flash (old agent) ignores prompt hints
+**Fix**: Use hybrid agent (Claude Sonnet 4.6 + Gemini vision). Claude's superior reasoning follows instructions precisely.

docs/qa/backlog.md

@@ -0,0 +1,59 @@
+# QA Pipeline Backlog
+
+## Comparison Modes
+
+### Type A: Same code, different settings (IMPLEMENTED)
+Agent demonstrates both working (control) and broken (test) states in one session by toggling settings. E.g., Nodes 2.0 OFF → drag works, Nodes 2.0 ON → drag broken.
+
+### Type B: Different commits
+For regressions reported as "worked in vX.Y, broken in vX.Z":
+- `qa-analyze-pr.ts` detects regression markers ("since v1.38", "after PR #1234")
+- Pipeline checks out the old commit, records control video
+- Records test video on current main
+- Side-by-side comparison on report page (reuses PR before/after infra)
+
+### Type C: Different browsers
+For browser-specific bugs ("works on Chrome, broken on Firefox"):
+- Run recording with different Playwright browser contexts
+- Compare behavior across browsers in one report
+
+## Agent Improvements
+
+### TTS Narration
+- OpenAI TTS (`tts-1`, nova voice) generates audio from agent reasoning
+- Merged into video via ffmpeg at correct timestamps
+- Currently in qa-record.ts but needs wiring into hybrid agent path
+
+### Image/Screenshot Reading
+- `qa-analyze-pr.ts` already downloads and sends images from issue bodies to Gemini
+- Could also send them to the Claude agent as context ("the reporter showed this screenshot")
+
+### Placeholder Page
+- Deploy a status page immediately when CI starts
+- Auto-refreshes every 30s until final report replaces it
+- Shows spinner, CI link, badge
+
+### Pre-seed Assets
+- Upload test images via ComfyUI API before recording
+- Enables reproduction of bugs requiring assets (#10424 zoom button)
+
+### Environment-Dependent Issues
+- #7942: needs custom TestNode — could install a test custom node pack in CI
+- #9101: needs completed generation — could run with a tiny model checkpoint
+
+## Cost Optimization
+
+### Lazy A11y Tree
+- `inspect(selector)` searches tree for specific element (~20 tokens)
+- `getUIChanges()` diffs against previous snapshot (~100 tokens)
+- vs dumping full tree every turn (~2000 tokens)
+
+### Gemini Video vs Images
+- 30s video clip: ~7,700 tokens (258 tok/s)
+- 15 screenshots: ~19,500 tokens (1,300 tok/frame)
+- Video is 2.5x cheaper and shows temporal changes
+
+### Model Selection
+- Claude Sonnet 4.6: $3/$15 per 1M in/out — best reasoning
+- Gemini 2.5 Flash: $0.10/$0.40 per 1M — best vision-per-dollar
+- Hybrid uses each where it's strongest

docs/qa/models.md

@@ -0,0 +1,60 @@
+# QA Pipeline Model Selection
+
+## Current Configuration
+
+| Script                | Role                                   | Model                    | Why                                                                                                 |
+| --------------------- | -------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------- |
+| `qa-analyze-pr.ts`    | PR/issue analysis, QA guide generation | `gemini-3.1-pro-preview` | Needs deep reasoning over PR diffs, screenshots, and issue threads                                  |
+| `qa-record.ts`        | Playwright step generation             | `gemini-3.1-pro-preview` | Step quality is critical — must understand ComfyUI's canvas UI and produce precise action sequences |
+| `qa-video-review.ts`  | Video comparison review                | `gemini-3-flash-preview` | Video analysis with structured output; flash is sufficient and faster                               |
+| `qa-generate-test.ts` | Regression test generation             | `gemini-3-flash-preview` | Code generation from QA reports; flash handles this well                                            |
+
+## Model Comparison
+
+### Gemini 3.1 Pro vs GPT-5.4
+
+|                   | Gemini 3.1 Pro Preview | GPT-5.4           |
+| ----------------- | ---------------------- | ----------------- |
+| Context window    | 1M tokens              | 1M tokens         |
+| Max output        | 65K tokens             | 128K tokens       |
+| Video input       | Yes                    | No                |
+| Image input       | Yes                    | Yes               |
+| Audio input       | Yes                    | No                |
+| Pricing (input)   | $2/1M tokens           | $2.50/1M tokens   |
+| Pricing (output)  | $12/1M tokens          | $15/1M tokens     |
+| Function calling  | Yes                    | Yes               |
+| Code execution    | Yes                    | Yes (interpreter) |
+| Structured output | Yes                    | Yes               |
+
+**Why Gemini over GPT for QA:**
+
+- Native video understanding (can review recordings directly)
+- Lower cost at comparable quality
+- Native multimodal input (screenshots, videos, audio from issue threads)
+- Better price/performance for high-volume CI usage
+
+### Gemini 3 Flash vs GPT-5.4 Mini
+
+|                  | Gemini 3 Flash Preview | GPT-5.4 Mini    |
+| ---------------- | ---------------------- | --------------- |
+| Context window   | 1M tokens              | 1M tokens       |
+| Pricing (input)  | $0.50/1M tokens        | $0.40/1M tokens |
+| Pricing (output) | $3/1M tokens           | $1.60/1M tokens |
+| Video input      | Yes                    | No              |
+
+**Why Gemini Flash for video review:**
+
+- Video input support is required — GPT models cannot process video files
+- Good enough quality for structured comparison reports
+
+## Upgrade History
+
+| Date       | Change                                                           | Reason                                                                     |
+| ---------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| 2026-03-24 | `gemini-2.5-flash` → `gemini-3.1-pro-preview` (record)           | Shallow step generation; pro model needed for complex ComfyUI interactions |
+| 2026-03-24 | `gemini-2.5-pro` → `gemini-3.1-pro-preview` (analyze)            | Keep analysis on latest pro                                                |
+| 2026-03-24 | `gemini-2.5-flash` → `gemini-3-flash-preview` (review, test-gen) | Latest flash for cost-efficient tasks                                      |
+
+## Override
+
+All scripts accept `--model <name>` to override the default. Pass any Gemini model ID.

eslint.config.ts

@@ -5,6 +5,7 @@ import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
+import testingLibrary from 'eslint-plugin-testing-library'
 // eslint-config-prettier disables ESLint rules that conflict with formatters (oxfmt)
 import eslintConfigPrettier from 'eslint-config-prettier'
 import { configs as storybookConfigs } from 'eslint-plugin-storybook'
@@ -271,6 +272,20 @@ export default defineConfig([
       ]
     }
   },
+  {
+    files: ['**/*.test.ts'],
+    plugins: { 'testing-library': testingLibrary },
+    rules: {
+      'testing-library/prefer-screen-queries': 'error',
+      'testing-library/no-container': 'error',
+      'testing-library/no-node-access': 'error',
+      'testing-library/no-wait-for-multiple-assertions': 'error',
+      'testing-library/prefer-find-by': 'error',
+      'testing-library/prefer-presence-queries': 'error',
+      'testing-library/prefer-user-event': 'error',
+      'testing-library/no-debugging-utils': 'error'
+    }
+  },
   {
     files: ['scripts/**/*.js'],
     languageOptions: {

knip.config.ts

@@ -6,7 +6,6 @@ const config: KnipConfig = {
       entry: [
         '{build,scripts}/**/*.{js,ts}',
         'src/assets/css/style.css',
-        'src/main.ts',
         'src/scripts/ui/menu/index.ts',
         'src/types/index.ts',
         'src/storybook/mocks/**/*.ts'
@@ -14,25 +13,34 @@ const config: KnipConfig = {
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}', '!.claude/**']
     },
     'apps/desktop-ui': {
-      entry: ['src/main.ts', 'src/i18n.ts'],
+      entry: ['src/i18n.ts'],
       project: ['src/**/*.{js,ts,vue}']
     },
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
     'packages/shared-frontend-utils': {
-      project: ['src/**/*.{js,ts}'],
-      entry: ['src/formatUtil.ts', 'src/networkUtil.ts']
+      project: ['src/**/*.{js,ts}']
     },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     },
     'packages/ingest-types': {
-      project: ['src/**/*.{js,ts}'],
-      entry: ['src/index.ts']
+      project: ['src/**/*.{js,ts}']
+    },
+    'apps/website': {
+      entry: [
+        'src/pages/**/*.astro',
+        'src/layouts/**/*.astro',
+        'src/components/**/*.vue',
+        'src/styles/global.css',
+        'astro.config.ts'
+      ],
+      project: ['src/**/*.{astro,vue,ts}', '*.{js,ts,mjs}'],
+      ignoreDependencies: ['@comfyorg/design-system', '@vercel/analytics']
     }
   },
-  ignoreBinaries: ['python3', 'gh', 'generate'],
+  ignoreBinaries: ['python3', 'wrangler'],
   ignoreDependencies: [
     // Weird importmap things
     '@iconify-json/lucide',
@@ -40,19 +48,12 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Used by lucideStrokePlugin.js (CSS @plugin)
-    '@iconify/utils'
+    '@primevue/icons'
   ],
   ignore: [
     // Auto generated API types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
-    'packages/registry-types/src/comfyRegistryTypes.ts',
-    'packages/ingest-types/src/types.gen.ts',
     'packages/ingest-types/src/zod.gen.ts',
-    'packages/ingest-types/openapi-ts.config.ts',
-    // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
     // Used by stacked PR (feat/glsl-live-preview)
     'src/renderer/glsl/useGLSLRenderer.ts',
     // Workflow files contain license names that knip misinterprets as binaries
@@ -60,17 +61,8 @@ const config: KnipConfig = {
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
     // Agent review check config, not part of the build
-    '.agents/checks/eslint.strict.config.js',
-    // Loaded via @plugin directive in CSS, not detected by knip
-    'packages/design-system/src/css/lucideStrokePlugin.js'
+    '.agents/checks/eslint.strict.config.js'
   ],
-  compilers: {
-    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
-    css: (text: string) =>
-      [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
-        .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
-        .join('\n')
-  },
   vite: {
     config: ['vite?(.*).config.mts']
   },

lint-staged.config.ts

@@ -11,7 +11,7 @@ export default {
 
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
+  './**/*.{ts,tsx,vue,mts,json,yaml}': (stagedFiles: string[]) => {
     const commands = [...formatAndEslint(stagedFiles), 'pnpm typecheck']
 
     const hasBrowserTestsChanges = stagedFiles

nx.json

@@ -36,5 +36,6 @@
         "targetName": "e2e"
       }
     }
-  ]
+  ],
+  "analytics": false
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.2",
+  "version": "1.43.4",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -39,6 +39,7 @@
     "preinstall": "pnpm dlx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
+    "qa:video-review": "tsx scripts/qa-video-review.ts",
     "storybook": "nx storybook",
     "storybook:desktop": "nx run @comfyorg/desktop-ui:storybook",
     "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
@@ -120,7 +121,9 @@
     "zod-validation-error": "catalog:"
   },
   "devDependencies": {
+    "@anthropic-ai/claude-agent-sdk": "catalog:",
     "@eslint/js": "catalog:",
+    "@google/generative-ai": "catalog:",
     "@intlify/eslint-plugin-vue-i18n": "catalog:",
     "@lobehub/i18n-cli": "catalog:",
     "@nx/eslint": "catalog:",
@@ -135,6 +138,9 @@
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@testing-library/vue": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -153,6 +159,7 @@
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
     "eslint-plugin-storybook": "catalog:",
+    "eslint-plugin-testing-library": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
     "fast-check": "catalog:",
@@ -177,9 +184,7 @@
     "storybook": "catalog:",
     "stylelint": "catalog:",
     "tailwindcss": "catalog:",
-    "tailwindcss-primeui": "catalog:",
     "tsx": "catalog:",
-    "tw-animate-css": "catalog:",
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",
     "unplugin-icons": "catalog:",

packages/design-system/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@iconify-json/lucide": "catalog:",
     "@iconify/tailwind4": "catalog:",
-    "@iconify/utils": "catalog:"
+    "@iconify/utils": "catalog:",
+    "tailwindcss-primeui": "catalog:",
+    "tw-animate-css": "catalog:"
   },
   "devDependencies": {
     "tailwindcss": "catalog:",

packages/design-system/src/css/base.css

@@ -0,0 +1,46 @@
+/*
+ * Design System Base — Brand tokens + fonts only.
+ * For marketing sites that don't use PrimeVue or the node editor.
+ * Import the full style.css instead for the desktop app.
+ */
+
+@import './fonts.css';
+
+@theme {
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
+  /* Palette Colors */
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
+
+  --color-neutral-550: #636363;
+
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
+
+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Brand Colors */
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+}

packages/design-system/src/css/style.css

@@ -15,7 +15,7 @@
 @plugin "./lucideStrokePlugin.js";
 
 /* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver-ai}]");
 
 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
 @source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent,i-tools-preview-image,i-tools-compare-image,canny-to-image,image-edit,text-to-image,pose-to-image,depth-to-video,image-to-image,canny-to-video,depth-to-image,image-to-video,pose-to-video,text-to-video,image-inpainting,image-outpainting}]");

packages/design-system/src/icons/quiver-ai.svg

@@ -0,0 +1,3 @@
+<svg width="281" height="281" viewBox="0 0 281 281" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140.069 0C217.427 0.000220786 280.138 62.7116 280.138 140.069V280.138H140.069C62.7116 280.138 0.000220844 217.427 0 140.069C0 62.7114 62.7114 0 140.069 0ZM74.961 66.6054C69.8263 64.8847 64.9385 69.7815 66.6687 74.913L123.558 243.619C125.929 250.65 136.321 248.945 136.321 241.524V135.823H241.329C248.756 135.823 250.453 125.416 243.41 123.056L74.961 66.6054Z" fill="#F8F8F8"/>
+</svg>

packages/shared-frontend-utils/src/formatUtil.ts

@@ -631,3 +631,10 @@ export function isPreviewableMediaType(mediaType: MediaType): boolean {
     mediaType === '3D'
   )
 }
+
+export function formatTime(seconds: number): string {
+  if (isNaN(seconds) || seconds === 0) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}

pnpm-workspace.yaml

@@ -4,19 +4,22 @@ packages:
 
 catalog:
   '@alloc/quick-lru': ^5.2.0
+  '@anthropic-ai/claude-agent-sdk': ^0.2.85
+  '@astrojs/vue': ^5.0.0
   '@comfyorg/comfyui-electron-types': 0.6.2
   '@eslint/js': ^9.39.1
   '@formkit/auto-animate': ^0.9.0
+  '@google/generative-ai': ^0.24.1
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
   '@iconify/tailwind4': ^1.2.0
   '@iconify/utils': ^3.1.0
   '@intlify/eslint-plugin-vue-i18n': ^4.1.1
   '@lobehub/i18n-cli': ^1.26.1
-  '@nx/eslint': 22.5.2
-  '@nx/playwright': 22.5.2
-  '@nx/storybook': 22.5.2
-  '@nx/vite': 22.5.2
+  '@nx/eslint': 22.6.1
+  '@nx/playwright': 22.6.1
+  '@nx/storybook': 22.6.1
+  '@nx/vite': 22.6.1
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
@@ -34,6 +37,9 @@ catalog:
   '@storybook/vue3': ^10.2.10
   '@storybook/vue3-vite': ^10.2.10
   '@tailwindcss/vite': ^4.2.0
+  '@testing-library/jest-dom': ^6.9.1
+  '@testing-library/user-event': ^14.6.1
+  '@testing-library/vue': ^8.1.0
   '@tiptap/core': ^2.27.2
   '@tiptap/extension-link': ^2.27.2
   '@tiptap/extension-table': ^2.27.2
@@ -47,6 +53,7 @@ catalog:
   '@types/node': ^24.1.0
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
+  '@vercel/analytics': ^2.0.1
   '@vitejs/plugin-vue': ^6.0.0
   '@vitest/coverage-v8': ^4.0.16
   '@vitest/ui': ^4.0.16
@@ -55,6 +62,7 @@ catalog:
   '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
+  astro: ^5.10.0
   axios: ^1.13.5
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4
@@ -67,6 +75,7 @@ catalog:
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.55.0
   eslint-plugin-storybook: ^10.2.10
+  eslint-plugin-testing-library: ^7.16.1
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   fast-check: ^4.5.3
@@ -79,11 +88,11 @@ catalog:
   jsdom: ^27.4.0
   jsonata: ^2.1.0
   jsondiffpatch: ^0.7.3
-  knip: ^5.75.1
+  knip: ^6.0.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
-  nx: 22.5.2
+  nx: 22.6.1
   oxfmt: ^0.40.0
   oxlint: ^1.55.0
   oxlint-tsgolint: ^0.17.0

scripts/qa-agent.ts

@@ -0,0 +1,553 @@
+#!/usr/bin/env tsx
+/**
+ * Hybrid QA Agent — Claude Sonnet 4.6 brain + Gemini 3.1 Pro eyes
+ *
+ * Claude plans and reasons. Gemini watches the video buffer and describes
+ * what it sees. The agent uses 4 tools:
+ *   - observe(seconds, focus) — Gemini reviews last N seconds of video
+ *   - inspect(selector) — search accessibility tree for element state
+ *   - perform(action, params) — execute Playwright action
+ *   - done(verdict, summary) — finish with result
+ */
+
+import type { Page } from '@playwright/test'
+import { query, tool, createSdkMcpServer } from '@anthropic-ai/claude-agent-sdk'
+import { GoogleGenerativeAI } from '@google/generative-ai'
+import { z } from 'zod'
+import { execSync } from 'child_process'
+import { mkdirSync, writeFileSync, readFileSync } from 'fs'
+
+// ── Types ──
+
+interface AgentOptions {
+  page: Page
+  issueContext: string
+  qaGuide: string
+  outputDir: string
+  geminiApiKey: string
+  anthropicApiKey?: string // Optional — Agent SDK auto-detects Claude Code session
+  maxTurns?: number
+  timeBudgetMs?: number
+}
+
+interface ScreenshotFrame {
+  timestampMs: number
+  base64: string
+}
+
+// ── Video buffer ──
+
+const FRAME_INTERVAL_MS = 2000
+const MAX_BUFFER_FRAMES = 30 // 60 seconds at 2fps
+
+class VideoBuffer {
+  private frames: ScreenshotFrame[] = []
+  private startMs = Date.now()
+  private intervalId: ReturnType<typeof setInterval> | null = null
+  private page: Page
+
+  constructor(page: Page) {
+    this.page = page
+  }
+
+  start() {
+    this.startMs = Date.now()
+    this.intervalId = setInterval(async () => {
+      try {
+        const buf = await this.page.screenshot({
+          type: 'jpeg',
+          quality: 60
+        })
+        this.frames.push({
+          timestampMs: Date.now() - this.startMs,
+          base64: buf.toString('base64')
+        })
+        if (this.frames.length > MAX_BUFFER_FRAMES) {
+          this.frames.shift()
+        }
+      } catch {
+        // page may be navigating
+      }
+    }, FRAME_INTERVAL_MS)
+  }
+
+  stop() {
+    if (this.intervalId) clearInterval(this.intervalId)
+  }
+
+  getLastFrames(seconds: number): ScreenshotFrame[] {
+    const cutoffMs = Date.now() - this.startMs - seconds * 1000
+    return this.frames.filter((f) => f.timestampMs >= cutoffMs)
+  }
+
+  async buildVideoClip(
+    seconds: number,
+    outputDir: string
+  ): Promise<Buffer | null> {
+    const frames = this.getLastFrames(seconds)
+    if (frames.length < 2) return null
+
+    const clipDir = `${outputDir}/.clip-frames`
+    mkdirSync(clipDir, { recursive: true })
+
+    // Write frames as numbered JPEGs
+    for (let i = 0; i < frames.length; i++) {
+      writeFileSync(
+        `${clipDir}/frame-${String(i).padStart(4, '0')}.jpg`,
+        Buffer.from(frames[i].base64, 'base64')
+      )
+    }
+
+    // Compose into video with ffmpeg
+    const clipPath = `${outputDir}/.observe-clip.mp4`
+    try {
+      const fps = Math.max(1, Math.round(frames.length / seconds))
+      execSync(
+        `ffmpeg -y -framerate ${fps} -i "${clipDir}/frame-%04d.jpg" ` +
+          `-c:v libx264 -preset ultrafast -pix_fmt yuv420p "${clipPath}" 2>/dev/null`,
+        { timeout: 10000 }
+      )
+      return readFileSync(clipPath)
+    } catch {
+      return null
+    }
+  }
+}
+
+// ── Gemini Vision ──
+
+async function geminiObserve(
+  videoBuffer: VideoBuffer,
+  seconds: number,
+  focus: string,
+  outputDir: string,
+  geminiApiKey: string
+): Promise<string> {
+  const genAI = new GoogleGenerativeAI(geminiApiKey)
+  const model = genAI.getGenerativeModel({
+    model: 'gemini-3-flash-preview'
+  })
+
+  // Try video clip first, fall back to last frame
+  const clip = await videoBuffer.buildVideoClip(seconds, outputDir)
+
+  const parts: Array<
+    { text: string } | { inlineData: { mimeType: string; data: string } }
+  > = [
+    {
+      text: `You are observing a ComfyUI frontend session. Focus on: ${focus}\n\nDescribe what happened in the last ${seconds} seconds. Be specific about UI state, actions taken, and results.`
+    }
+  ]
+
+  if (clip) {
+    parts.push({
+      inlineData: { mimeType: 'video/mp4', data: clip.toString('base64') }
+    })
+  } else {
+    // Fall back to last frame
+    const frames = videoBuffer.getLastFrames(seconds)
+    if (frames.length > 0) {
+      parts.push({
+        inlineData: {
+          mimeType: 'image/jpeg',
+          data: frames[frames.length - 1].base64
+        }
+      })
+    }
+  }
+
+  const result = await model.generateContent(parts)
+  return result.response.text().trim()
+}
+
+// ── Accessibility tree helpers ──
+
+interface A11yNode {
+  role: string
+  name: string
+  value?: string
+  checked?: boolean
+  disabled?: boolean
+  children?: A11yNode[]
+}
+
+function searchA11y(node: A11yNode | null, selector: string): A11yNode | null {
+  if (!node) return null
+  const sel = selector.toLowerCase()
+
+  // Match by name or role
+  if (
+    node.name?.toLowerCase().includes(sel) ||
+    node.role?.toLowerCase().includes(sel)
+  ) {
+    return node
+  }
+
+  // Recurse into children
+  if (node.children) {
+    for (const child of node.children) {
+      const found = searchA11y(child, selector)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+function flattenA11y(node: A11yNode | null, depth = 0): string {
+  if (!node || depth > 3) return ''
+  const parts: string[] = []
+  const indent = '  '.repeat(depth)
+  const attrs: string[] = []
+  if (node.value !== undefined) attrs.push(`value="${node.value}"`)
+  if (node.checked !== undefined) attrs.push(`checked=${node.checked}`)
+  if (node.disabled) attrs.push('disabled')
+  const attrStr = attrs.length ? ` [${attrs.join(', ')}]` : ''
+  if (node.name || attrs.length) {
+    parts.push(`${indent}${node.role}: ${node.name || '(unnamed)'}${attrStr}`)
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      parts.push(flattenA11y(child, depth + 1))
+    }
+  }
+  return parts.filter(Boolean).join('\n')
+}
+
+// ── Subtitle overlay ──
+
+async function showSubtitle(page: Page, text: string, turn: 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',transition:'opacity 0.3s',whiteSpace:'normal'});
+        document.body.appendChild(el);
+      }
+      var msg=decodeURIComponent('${encoded}');
+      el.textContent='['+${turn}+'] '+msg;
+      el.style.opacity='1';
+    })()`
+  })
+}
+
+// ── Main agent ──
+
+export async function runHybridAgent(opts: AgentOptions): Promise<{
+  verdict: string
+  summary: string
+}> {
+  const {
+    page,
+    issueContext,
+    qaGuide,
+    outputDir,
+    geminiApiKey,
+    anthropicApiKey
+  } = opts
+  const maxTurns = opts.maxTurns ?? 30
+  const timeBudgetMs = opts.timeBudgetMs ?? 120_000
+
+  // Start video buffer
+  const videoBuffer = new VideoBuffer(page)
+  videoBuffer.start()
+
+  let lastA11ySnapshot: A11yNode | null = null
+  let agentDone = false
+  let finalVerdict = 'INCONCLUSIVE'
+  let finalSummary = 'Agent did not complete'
+  let turnCount = 0
+  const startTime = Date.now()
+
+  // Import executeAction from qa-record.ts (shared Playwright helpers)
+  // For now, inline the action execution
+  const { executeAction } = await import('./qa-record.js')
+
+  // Define tools
+  const observeTool = tool(
+    'observe',
+    'Watch the last N seconds of screen recording through Gemini vision. Use this to verify visual state, check if actions had visible effect, or inspect visual bugs. Pass a focused question so Gemini knows what to look for.',
+    {
+      seconds: z
+        .number()
+        .min(3)
+        .max(60)
+        .default(10)
+        .describe('How many seconds to look back'),
+      focus: z
+        .string()
+        .describe(
+          'What to look for — be specific, e.g. "Did the Nodes 2.0 toggle switch to ON?"'
+        )
+    },
+    async (args) => {
+      const description = await geminiObserve(
+        videoBuffer,
+        args.seconds,
+        args.focus,
+        outputDir,
+        geminiApiKey
+      )
+      return { content: [{ type: 'text' as const, text: description }] }
+    }
+  )
+
+  const inspectTool = tool(
+    'inspect',
+    'Search the accessibility tree for a specific UI element. Returns its role, name, value, checked state. Fast and precise — use this to verify element state without vision.',
+    {
+      selector: z
+        .string()
+        .describe(
+          'Element name or role to search for, e.g. "Nodes 2.0", "KSampler seed", "Run button"'
+        )
+    },
+    async (args) => {
+      try {
+        const snapshot =
+          (await page.accessibility.snapshot()) as A11yNode | null
+        lastA11ySnapshot = snapshot
+        const found = searchA11y(snapshot, args.selector)
+        if (found) {
+          return {
+            content: [
+              {
+                type: 'text' as const,
+                text: JSON.stringify({
+                  role: found.role,
+                  name: found.name,
+                  value: found.value,
+                  checked: found.checked,
+                  disabled: found.disabled,
+                  hasChildren: Boolean(found.children?.length)
+                })
+              }
+            ]
+          }
+        }
+        // Return nearby elements if exact match not found
+        const tree = flattenA11y(snapshot, 0).slice(0, 2000)
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `Element "${args.selector}" not found. Available elements:\n${tree}`
+            }
+          ]
+        }
+      } catch (e) {
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `inspect failed: ${e instanceof Error ? e.message : e}`
+            }
+          ]
+        }
+      }
+    }
+  )
+
+  const performTool = tool(
+    'perform',
+    `Execute a Playwright action on the ComfyUI page. Available actions:
+- click(text): click element by visible text
+- clickCanvas(x, y): click at coordinates
+- rightClickCanvas(x, y): right-click at coordinates
+- doubleClick(x, y): double-click at coordinates
+- dragCanvas(fromX, fromY, toX, toY): drag between points
+- scrollCanvas(x, y, deltaY): scroll wheel (negative=zoom in)
+- pressKey(key): press keyboard key (Escape, Enter, Delete, Control+c, etc.)
+- fillDialog(text): fill input and press Enter
+- openMenu(): open hamburger menu
+- hoverMenuItem(label): hover menu item
+- clickMenuItem(label): click submenu item
+- setSetting(id, value): change a ComfyUI setting
+- loadDefaultWorkflow(): load the 7-node default workflow
+- openSettings(): open Settings dialog
+- reload(): reload the page
+- addNode(nodeName, x, y): add a node via search
+- copyPaste(x, y): Ctrl+C then Ctrl+V at coords
+- holdKeyAndDrag(key, fromX, fromY, toX, toY): hold key while dragging
+- screenshot(name): take a named screenshot`,
+    {
+      action: z.string().describe('Action name'),
+      params: z
+        .record(z.unknown())
+        .optional()
+        .describe('Action parameters as key-value pairs')
+    },
+    async (args) => {
+      turnCount++
+      if (turnCount > maxTurns || Date.now() - startTime > timeBudgetMs) {
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `Budget exceeded (${turnCount}/${maxTurns} turns, ${Math.round((Date.now() - startTime) / 1000)}s). Use done() now.`
+            }
+          ]
+        }
+      }
+
+      // Build TestAction object from args
+      const actionObj = { action: args.action, ...args.params } as Parameters<
+        typeof executeAction
+      >[1]
+
+      try {
+        const result = await executeAction(page, actionObj, outputDir)
+        // Show subtitle
+        await showSubtitle(
+          page,
+          `${args.action}: ${result.success ? 'OK' : result.error}`,
+          turnCount
+        )
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: result.success
+                ? `Action "${args.action}" succeeded.`
+                : `Action "${args.action}" FAILED: ${result.error}`
+            }
+          ]
+        }
+      } catch (e) {
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `Action "${args.action}" threw: ${e instanceof Error ? e.message : e}`
+            }
+          ]
+        }
+      }
+    }
+  )
+
+  const doneTool = tool(
+    'done',
+    'Signal that reproduction is complete. Call this when you have either confirmed the bug or determined it cannot be reproduced.',
+    {
+      verdict: z
+        .enum(['REPRODUCED', 'NOT_REPRODUCIBLE', 'INCONCLUSIVE'])
+        .describe('Final verdict'),
+      summary: z
+        .string()
+        .describe(
+          'One paragraph: what you did, what you observed, and why you reached this verdict'
+        )
+    },
+    async (args) => {
+      agentDone = true
+      finalVerdict = args.verdict
+      finalSummary = args.summary
+      await showSubtitle(page, `DONE: ${args.verdict}`, turnCount)
+      return {
+        content: [
+          {
+            type: 'text' as const,
+            text: `Agent finished: ${args.verdict}`
+          }
+        ]
+      }
+    }
+  )
+
+  // Create MCP server with our tools
+  const server = createSdkMcpServer({
+    name: 'qa-agent',
+    version: '1.0.0',
+    tools: [observeTool, inspectTool, performTool, doneTool]
+  })
+
+  // Build system prompt
+  const systemPrompt = `You are a senior QA engineer reproducing a reported bug in ComfyUI, a node-based AI image generation tool.
+
+## Your tools
+- observe(seconds, focus) — Gemini AI watches the last N seconds of screen recording and answers your focused question. Use for visual verification.
+- inspect(selector) — Search the accessibility tree for a specific element's state. Use for precise state checks (toggle on/off, value, disabled).
+- perform(action, params) — Execute a Playwright action on the browser.
+- done(verdict, summary) — Finish with your conclusion.
+
+## Strategy
+1. Start by understanding the issue, then plan your reproduction steps.
+2. Use perform() to take actions. After each action, use inspect() to verify state or observe() for visual confirmation.
+3. If a setting change doesn't seem to take effect, try reload() then verify again.
+4. Focus on the specific bug — don't explore randomly.
+5. Take screenshots at key moments for the video evidence.
+6. When you've confirmed or ruled out the bug, call done().
+
+## Control/Test Comparison (IMPORTANT)
+When a bug is triggered by a specific setting, mode, or configuration:
+1. **CONTROL phase**: First demonstrate the WORKING state. Disable the trigger (e.g., Nodes 2.0 OFF), perform the action, take a screenshot labeled "control-*", verify it works.
+2. **TEST phase**: Then enable the trigger (e.g., Nodes 2.0 ON), reload if needed, perform the SAME action, take a screenshot labeled "test-*", verify it's broken.
+3. In your done() summary, explicitly compare: "With X OFF, behavior was Y. With X ON, behavior was Z."
+
+This contrast is critical evidence — it proves the bug is caused by the specific setting, not a general issue. Always try to show both states when possible.
+
+Examples of control/test pairs:
+- Nodes 2.0 OFF → ON (for node rendering, widget, drag bugs)
+- Default theme → specific theme (for visual bugs)
+- Single node → multiple overlapping nodes (for z-index bugs)
+- Empty workflow → loaded workflow (for state bugs)
+
+## ComfyUI Layout (1280×720 viewport)
+- Canvas with node graph centered at ~(640, 400)
+- Hamburger menu top-left (C logo)
+- Sidebar: Workflows, Node Library, Models
+- Default workflow nodes: Load Checkpoint (~150,300), CLIP Text Encode (~450,250/450), Empty Latent (~450,600), KSampler (~750,350), VAE Decode (~1000,350), Save Image (~1200,350)
+
+${qaGuide ? `## QA Guide\n${qaGuide}\n` : ''}
+## Issue to Reproduce
+${issueContext}`
+
+  // Run the agent
+  console.warn('Starting hybrid agent (Claude Sonnet 4.6 + Gemini vision)...')
+
+  try {
+    for await (const message of query({
+      prompt:
+        'Reproduce the reported bug. Start by reading the issue context in your system prompt, then use your tools to interact with the ComfyUI browser session.',
+      options: {
+        model: 'claude-sonnet-4-6',
+        systemPrompt,
+        ...(anthropicApiKey ? { apiKey: anthropicApiKey } : {}),
+        maxTurns,
+        mcpServers: { 'qa-agent': server },
+        allowedTools: [
+          'mcp__qa-agent__observe',
+          'mcp__qa-agent__inspect',
+          'mcp__qa-agent__perform',
+          'mcp__qa-agent__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) {
+    console.warn(`Agent error: ${e instanceof Error ? e.message : e}`)
+  }
+
+  videoBuffer.stop()
+
+  return { verdict: finalVerdict, summary: finalSummary }
+}

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([])
+  })
+})

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)
+  })
+}

scripts/qa-batch.sh

@@ -0,0 +1,176 @@
+#!/usr/bin/env bash
+# Batch-trigger QA runs by creating and pushing sno-qa-* branches.
+#
+# Usage:
+#   ./scripts/qa-batch.sh 10394 10238 9996          # Trigger specific numbers
+#   ./scripts/qa-batch.sh --from tmp/issues.md --top 5  # From triage file
+#   ./scripts/qa-batch.sh --dry-run 10394 10238     # Preview only
+#   ./scripts/qa-batch.sh --cleanup                 # Delete old sno-qa-* branches
+
+set -euo pipefail
+
+DELAY=5
+DRY_RUN=false
+CLEANUP=false
+FROM_FILE=""
+TOP_N=0
+NUMBERS=()
+
+die() { echo "error: $*" >&2; exit 1; }
+
+usage() {
+  cat <<'EOF'
+Usage: qa-batch.sh [options] [numbers...]
+
+Options:
+  --from <file>   Extract numbers from a triage markdown file
+  --top <N>       Take first N entries from Tier 1 (requires --from)
+  --dry-run       Print what would happen without pushing
+  --cleanup       Delete all sno-qa-* remote branches
+  --delay <secs>  Seconds between pushes (default: 5)
+  -h, --help      Show this help
+EOF
+  exit 0
+}
+
+# --- Parse args ---
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+    --from)     FROM_FILE="$2"; shift 2 ;;
+    --top)      TOP_N="$2"; shift 2 ;;
+    --dry-run)  DRY_RUN=true; shift ;;
+    --cleanup)  CLEANUP=true; shift ;;
+    --delay)    DELAY="$2"; shift 2 ;;
+    -h|--help)  usage ;;
+    -*)         die "unknown option: $1" ;;
+    *)          NUMBERS+=("$1"); shift ;;
+  esac
+done
+
+# --- Cleanup mode ---
+if $CLEANUP; then
+  echo "Fetching remote sno-qa-* branches..."
+  branches=$(git ls-remote --heads origin 'refs/heads/sno-qa-*' | awk '{print $2}' | sed 's|refs/heads/||')
+
+  if [[ -z "$branches" ]]; then
+    echo "No sno-qa-* branches found on remote."
+    exit 0
+  fi
+
+  echo "Found branches:"
+  while IFS= read -r b; do echo "  $b"; done <<< "$branches"
+  echo
+
+  if $DRY_RUN; then
+    echo "[dry-run] Would delete the above branches."
+    exit 0
+  fi
+
+  read -rp "Delete all of the above? [y/N] " confirm
+  if [[ "$confirm" != "y" && "$confirm" != "Y" ]]; then
+    echo "Aborted."
+    exit 0
+  fi
+
+  for branch in $branches; do
+    echo "Deleting origin/$branch..."
+    git push origin --delete "$branch"
+  done
+  echo "Done. Cleaned up $(echo "$branches" | wc -l | tr -d ' ') branches."
+  exit 0
+fi
+
+# --- Extract numbers from markdown ---
+if [[ -n "$FROM_FILE" ]]; then
+  [[ -f "$FROM_FILE" ]] || die "file not found: $FROM_FILE"
+  [[ "$TOP_N" -gt 0 ]] || die "--top N required with --from"
+
+  # Extract Tier 1 table rows: | N | [#NNNNN](...) | ...
+  # Stop at the next ## heading after Tier 1
+  extracted=$(awk '/^## Tier 1/,/^## Tier [^1]/' "$FROM_FILE" \
+    | grep -oP '\[#\K\d+' \
+    | head -n "$TOP_N")
+
+  if [[ -z "$extracted" ]]; then
+    die "no numbers found in $FROM_FILE"
+  fi
+
+  while IFS= read -r num; do
+    NUMBERS+=("$num")
+  done <<< "$extracted"
+fi
+
+[[ ${#NUMBERS[@]} -gt 0 ]] || die "no numbers specified. Use positional args or --from/--top."
+
+# --- Validate ---
+for num in "${NUMBERS[@]}"; do
+  [[ "$num" =~ ^[0-9]+$ ]] || die "invalid number: $num"
+done
+
+# Deduplicate
+# shellcheck disable=SC2207 # mapfile not available on macOS default bash
+NUMBERS=($(printf '%s\n' "${NUMBERS[@]}" | sort -un))
+
+# --- Push branches ---
+echo "Triggering QA for: ${NUMBERS[*]}"
+if $DRY_RUN; then
+  echo "[dry-run]"
+fi
+echo
+
+pushed=()
+skipped=()
+
+# Fetch remote refs once
+remote_refs=$(git ls-remote --heads origin 'refs/heads/sno-qa-*' 2>/dev/null | awk '{print $2}' | sed 's|refs/heads/||')
+
+for num in "${NUMBERS[@]}"; do
+  branch="sno-qa-$num"
+
+  # Check if already exists on remote
+  if echo "$remote_refs" | grep -qx "$branch"; then
+    echo "  skip: $branch (already exists on remote)"
+    skipped+=("$num")
+    continue
+  fi
+
+  if $DRY_RUN; then
+    echo "  would push: $branch"
+    pushed+=("$num")
+    continue
+  fi
+
+  # Create branch at current HEAD and push
+  git branch -f "$branch" HEAD
+  git push origin "$branch"
+  pushed+=("$num")
+  echo "  pushed: $branch"
+
+  # Clean up local branch
+  git branch -D "$branch" 2>/dev/null || true
+
+  # Delay between pushes to avoid CI concurrency storm
+  if [[ "$num" != "${NUMBERS[-1]}" ]]; then
+    echo "  waiting ${DELAY}s..."
+    sleep "$DELAY"
+  fi
+done
+
+# --- Summary ---
+echo
+echo "=== Summary ==="
+echo "Triggered: ${#pushed[@]}"
+echo "Skipped:   ${#skipped[@]}"
+
+if [[ ${#pushed[@]} -gt 0 ]]; then
+  echo
+  echo "Triggered numbers: ${pushed[*]}"
+  repo_url=$(git remote get-url origin | sed 's/\.git$//' | sed 's|git@github.com:|https://github.com/|')
+  echo "Actions: ${repo_url}/actions"
+fi
+
+if [[ ${#skipped[@]} -gt 0 ]]; then
+  echo
+  echo "Skipped (already exist): ${skipped[*]}"
+  echo "Use --cleanup first to remove old branches."
+fi

scripts/qa-deploy-pages.sh

@@ -0,0 +1,333 @@
+#!/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 muted 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 muted 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 muted 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 muted 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 | sed 's/^Title: //')
+  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 | grep -v '^Description:\|^###' | head -5 | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g' | tr '\n' ' ' | head -c 400)
+  [ -z "$PR_DESC" ] && PR_DESC=$(sed -n '3,8p' pr-context.txt | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g' | tr '\n' ' ' | head -c 400)
+  # Build requirements from QA guide JSON
+  REQS_HTML=""
+  QA_GUIDE=$(ls qa-guides/qa-guide-*.json 2>/dev/null | head -1)
+  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
+
+# Generate badge SVGs into deploy dir
+# Verdict detection: check each report file's ## Summary section individually,
+# then aggregate across passes for a "X/Y REPRODUCED" badge.
+REPRO_COUNT=0 INCONC_COUNT=0 NOT_REPRO_COUNT=0 TOTAL_REPORTS=0
+if [ -d video-reviews ]; then
+  for rpt in video-reviews/*-qa-video-report.md; do
+    [ -f "$rpt" ] || continue
+    TOTAL_REPORTS=$((TOTAL_REPORTS + 1))
+    # Try structured JSON verdict first (from ## Verdict section)
+    VERDICT_JSON=$(grep -oP '"verdict":\s*"[A-Z_]+' "$rpt" 2>/dev/null | tail -1 | grep -oP '[A-Z_]+$' || true)
+    RISK_JSON=$(grep -oP '"risk":\s*"[a-z]+' "$rpt" 2>/dev/null | tail -1 | grep -oP '[a-z]+$' || true)
+
+    if [ -n "$VERDICT_JSON" ]; then
+      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
+    else
+      # 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))
+      fi
+    fi
+  done
+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}"
+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)
+    fi
+    RISK_FIRST=$(echo "$RISK_TEXT" | grep -oiP '^\s*(high|medium|moderate|low|minimal|critical)' | head -1 | tr '[:upper:]' '[:lower:]')
+    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"
+BADGE_STATUS="${REPRO_RESULT:-UNKNOWN}${FIX_RESULT:+ | Fix: ${FIX_RESULT}}"
+echo "badge_status=${BADGE_STATUS:-FINISHED}" >> "$GITHUB_OUTPUT"
+
+BRANCH=$(echo "$RAW_BRANCH" | sed 's/[^a-zA-Z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//' | cut -c1-28)
+URL=$(wrangler pages deploy "$DEPLOY_DIR" \
+  --project-name="comfy-qa" \
+  --branch="$BRANCH" 2>&1 \
+  | grep -oE 'https://[a-zA-Z0-9.-]+\.pages\.dev\S*' | head -1)
+
+echo "url=${URL:-https://${BRANCH}.comfy-qa.pages.dev}" >> "$GITHUB_OUTPUT"
+echo "Deployed to: ${URL}"

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)
+})

scripts/qa-report-template.html

@@ -0,0 +1,135 @@
+<!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><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;v.removeAttribute('autoplay');v.pause();
+  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>

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')
+  })
+})

scripts/qa-video-review.ts

@@ -0,0 +1,757 @@
+#!/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.',
+    ''
+  ]
+
+  const isIssueContext =
+    prContext &&
+    /^### Issue #|^Title:.*\bbug\b|^This video attempts to reproduce/im.test(
+      prContext
+    )
+
+  if (prContext) {
+    if (isIssueContext) {
+      lines.push(
+        '## Issue Context',
+        'This video attempts to reproduce a reported bug on the main branch.',
+        'Your review MUST evaluate whether the reported bug is visible and reproducible.',
+        '',
+        prContext,
+        '',
+        '## Review Instructions',
+        '1. Does the video demonstrate the reported bug occurring?',
+        '2. Is the bug clearly visible and reproducible from the steps shown?',
+        '3. Are there any other issues visible during the reproduction attempt?',
+        '',
+        '## CRITICAL: Honesty Requirements',
+        '- If the video only shows login, idle canvas, or trivial menu interactions WITHOUT actually performing the reproduction steps, say "INCONCLUSIVE — reproduction steps were not performed".',
+        '- Do NOT claim a bug is "confirmed" unless you can clearly see the bug behavior described in the issue.',
+        '- Do NOT hallucinate findings. If the video does not show meaningful interaction, say so clearly.',
+        '- Rate confidence as "Low" if the video does not actually demonstrate the bug scenario.',
+        ''
+      )
+    } else {
+      lines.push(
+        '## PR Context',
+        'The video is a QA session testing a specific pull request.',
+        'Your review MUST evaluate whether the PR achieves its stated purpose.',
+        '',
+        prContext,
+        '',
+        '## Review Instructions',
+        "1. Does the video demonstrate the PR's intended behavior working correctly?",
+        '2. Are there regressions or side effects caused by the PR changes?',
+        '3. Does the observed behavior match what the PR claims to implement/fix?',
+        ''
+      )
+    }
+  }
+
+  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',
+    '',
+    '## 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"}',
+    '- 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'
+  )
+
+  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)
+  })
+}

src/App.vue

@@ -9,13 +9,10 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted, onUnmounted, watch } from 'vue'
 
-import { useI18n } from 'vue-i18n'
-
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useToastStore } from '@/platform/updates/common/toastStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI } from '@/utils/envUtil'
@@ -23,7 +20,6 @@ import { parsePreloadError } from '@/utils/preloadErrorUtil'
 import { useDialogService } from '@/services/dialogService'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()
 
@@ -98,12 +94,17 @@ onMounted(() => {
         }
       })
     }
-    useToastStore().add({
-      severity: 'error',
-      summary: t('g.preloadErrorTitle'),
-      detail: t('g.preloadError'),
-      life: 10000
-    })
+    // Disabled: Third-party custom node extensions frequently trigger this toast
+    // (e.g., bare "vue" imports, wrong relative paths to scripts/app.js, missing
+    // core dependencies). These are plugin bugs, not ComfyUI core failures, but
+    // the generic error message alarms users and offers no actionable guidance.
+    // The console.error above still logs the details for developers to debug.
+    // useToastStore().add({
+    //   severity: 'error',
+    //   summary: t('g.preloadErrorTitle'),
+    //   detail: t('g.preloadError'),
+    //   life: 10000
+    // })
   })
 
   // Capture resource load failures (CSS, scripts) in non-localhost distributions

src/assets/palettes/arc.json

@@ -34,9 +34,7 @@
       "CLEAR_BACKGROUND_COLOR": "#2b2f38",
       "NODE_TITLE_COLOR": "#b2b7bd",
       "NODE_SELECTED_TITLE_COLOR": "#FFF",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#AAA",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#2b2f38",
       "NODE_DEFAULT_BGCOLOR": "#242730",
       "NODE_DEFAULT_BOXCOLOR": "#6e7581",
@@ -45,7 +43,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 22,
       "WIDGET_BGCOLOR": "#2b2f38",
       "WIDGET_OUTLINE_COLOR": "#6e7581",
       "WIDGET_TEXT_COLOR": "#DDD",

src/assets/palettes/dark.json

@@ -25,10 +25,8 @@
       "CLEAR_BACKGROUND_COLOR": "#141414",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#FFF",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#AAA",
       "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#333",
       "NODE_DEFAULT_BGCOLOR": "#353535",
       "NODE_DEFAULT_BOXCOLOR": "#666",
@@ -37,7 +35,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#222",
       "WIDGET_OUTLINE_COLOR": "#666",
       "WIDGET_TEXT_COLOR": "#DDD",

src/assets/palettes/github.json

@@ -34,9 +34,7 @@
       "CLEAR_BACKGROUND_COLOR": "#040506",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#bcc2c8",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#161b22",
       "NODE_DEFAULT_BGCOLOR": "#13171d",
       "NODE_DEFAULT_BOXCOLOR": "#30363d",
@@ -45,7 +43,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#161b22",
       "WIDGET_OUTLINE_COLOR": "#30363d",
       "WIDGET_TEXT_COLOR": "#bcc2c8",

src/assets/palettes/light.json

@@ -26,10 +26,8 @@
       "CLEAR_BACKGROUND_COLOR": "lightgray",
       "NODE_TITLE_COLOR": "#222",
       "NODE_SELECTED_TITLE_COLOR": "#000",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#444",
       "NODE_TEXT_HIGHLIGHT_COLOR": "#1e293b",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#F7F7F7",
       "NODE_DEFAULT_BGCOLOR": "#F5F5F5",
       "NODE_DEFAULT_BOXCOLOR": "#CCC",
@@ -38,7 +36,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#D4D4D4",
       "WIDGET_OUTLINE_COLOR": "#999",
       "WIDGET_TEXT_COLOR": "#222",

src/assets/palettes/nord.json

@@ -34,9 +34,7 @@
       "CLEAR_BACKGROUND_COLOR": "#212732",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#bcc2c8",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#2e3440",
       "NODE_DEFAULT_BGCOLOR": "#161b22",
       "NODE_DEFAULT_BOXCOLOR": "#545d70",
@@ -45,7 +43,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#2e3440",
       "WIDGET_OUTLINE_COLOR": "#545d70",
       "WIDGET_TEXT_COLOR": "#bcc2c8",

src/assets/palettes/solarized.json

@@ -19,9 +19,7 @@
     "litegraph_base": {
       "NODE_TITLE_COLOR": "#fdf6e3",
       "NODE_SELECTED_TITLE_COLOR": "#A9D400",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#657b83",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#094656",
       "NODE_DEFAULT_BGCOLOR": "#073642",
       "NODE_DEFAULT_BOXCOLOR": "#839496",
@@ -30,7 +28,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#002b36",
       "WIDGET_OUTLINE_COLOR": "#839496",
       "WIDGET_TEXT_COLOR": "#fdf6e3",

src/components/actionbar/ComfyRunButton/ComfyQueueButton.test.ts

@@ -1,5 +1,4 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -14,6 +13,7 @@ import {
   useQueueSettingsStore,
   useQueueStore
 } from '@/stores/queueStore'
+import { render, screen } from '@/utils/test-utils'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -78,38 +78,40 @@ function createTask(id: string, status: JobStatus): TaskItemImpl {
   return new TaskItemImpl(job)
 }
 
-function createWrapper() {
+const stubs = {
+  BatchCountEdit: BatchCountEditStub,
+  DropdownMenuRoot: { template: '<div><slot /></div>' },
+  DropdownMenuTrigger: { template: '<div><slot /></div>' },
+  DropdownMenuPortal: { template: '<div><slot /></div>' },
+  DropdownMenuContent: { template: '<div><slot /></div>' },
+  DropdownMenuItem: { template: '<div><slot /></div>' }
+}
+
+function renderQueueButton() {
   const pinia = createTestingPinia({ createSpy: vi.fn })
 
-  return mount(ComfyQueueButton, {
+  return render(ComfyQueueButton, {
     global: {
       plugins: [pinia, i18n],
       directives: {
         tooltip: () => {}
       },
-      stubs: {
-        BatchCountEdit: BatchCountEditStub,
-        DropdownMenuRoot: { template: '<div><slot /></div>' },
-        DropdownMenuTrigger: { template: '<div><slot /></div>' },
-        DropdownMenuPortal: { template: '<div><slot /></div>' },
-        DropdownMenuContent: { template: '<div><slot /></div>' },
-        DropdownMenuItem: { template: '<div><slot /></div>' }
-      }
+      stubs
     }
   })
 }
 
 describe('ComfyQueueButton', () => {
   it('renders the batch count control before the run button', () => {
-    const wrapper = createWrapper()
-    const controls = wrapper.get('.queue-button-group').element.children
+    renderQueueButton()
+    const controls = screen.getAllByTestId(/batch-count-edit|queue-button/)
 
-    expect(controls[0]?.getAttribute('data-testid')).toBe('batch-count-edit')
-    expect(controls[1]?.getAttribute('data-testid')).toBe('queue-button')
+    expect(controls[0]).toHaveAttribute('data-testid', 'batch-count-edit')
+    expect(controls[1]).toHaveAttribute('data-testid', 'queue-button')
   })
 
   it('keeps the run instant presentation while idle even with active jobs', async () => {
-    const wrapper = createWrapper()
+    renderQueueButton()
     const queueSettingsStore = useQueueSettingsStore()
     const queueStore = useQueueStore()
 
@@ -117,29 +119,27 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
+    const queueButton = screen.getByTestId('queue-button')
 
-    expect(queueButton.text()).toContain('Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('primary')
-    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
+    expect(queueButton).toHaveTextContent('Run (Instant)')
+    expect(queueButton).toHaveAttribute('data-variant', 'primary')
   })
 
   it('switches to stop presentation when instant mode is armed', async () => {
-    const wrapper = createWrapper()
+    renderQueueButton()
     const queueSettingsStore = useQueueSettingsStore()
 
     queueSettingsStore.mode = 'instant-running'
     await nextTick()
 
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
+    const queueButton = screen.getByTestId('queue-button')
 
-    expect(queueButton.text()).toContain('Stop Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('destructive')
-    expect(wrapper.find('.icon-\\[lucide--square\\]').exists()).toBe(true)
+    expect(queueButton).toHaveTextContent('Stop Run (Instant)')
+    expect(queueButton).toHaveAttribute('data-variant', 'destructive')
   })
 
   it('disarms instant mode without interrupting even when jobs are active', async () => {
-    const wrapper = createWrapper()
+    const { user } = renderQueueButton()
     const queueSettingsStore = useQueueSettingsStore()
     const queueStore = useQueueStore()
     const commandStore = useCommandStore()
@@ -148,33 +148,26 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    await wrapper.get('[data-testid="queue-button"]').trigger('click')
+    await user!.click(screen.getByTestId('queue-button'))
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-idle')
-    const queueButtonWhileStopping = wrapper.get('[data-testid="queue-button"]')
-    expect(queueButtonWhileStopping.text()).toContain('Run (Instant)')
-    expect(queueButtonWhileStopping.attributes('data-variant')).toBe('primary')
-    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
+    const queueButton = screen.getByTestId('queue-button')
+    expect(queueButton).toHaveTextContent('Run (Instant)')
+    expect(queueButton).toHaveAttribute('data-variant', 'primary')
 
     expect(commandStore.execute).not.toHaveBeenCalled()
-
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
-    expect(queueSettingsStore.mode).toBe('instant-idle')
-    expect(queueButton.text()).toContain('Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('primary')
-    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
   })
 
   it('activates instant running mode when queueing again', async () => {
-    const wrapper = createWrapper()
+    const { user } = renderQueueButton()
     const queueSettingsStore = useQueueSettingsStore()
     const commandStore = useCommandStore()
 
     queueSettingsStore.mode = 'instant-idle'
     await nextTick()
 
-    await wrapper.get('[data-testid="queue-button"]').trigger('click')
+    await user!.click(screen.getByTestId('queue-button'))
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-running')

src/components/builder/AppBuilder.vue

@@ -25,7 +25,7 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import { app } from '@/scripts/app'
 import { DOMWidgetImpl } from '@/scripts/domWidget'
-import { promptRenameWidget } from '@/utils/widgetUtil'
+import { renameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
 import { resolveNodeWidget } from '@/utils/litegraphUtil'
@@ -63,7 +63,7 @@ const inputsWithState = computed(() =>
       widgetName,
       label: widget.label,
       subLabel: node.title,
-      rename: () => promptRenameWidget(widget, node, t)
+      canRename: true
     }
   })
 )
@@ -74,6 +74,16 @@ const outputsWithState = computed<[NodeId, string][]>(() =>
   ])
 )
 
+function inlineRenameInput(
+  nodeId: NodeId,
+  widgetName: string,
+  newLabel: string
+) {
+  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+  if (!node || !widget) return
+  renameWidget(widget, node, newLabel)
+}
+
 function getHovered(
   e: MouseEvent
 ): undefined | [LGraphNode, undefined] | [LGraphNode, IBaseWidget] {
@@ -234,7 +244,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
               widgetName,
               label,
               subLabel,
-              rename
+              canRename
             } in inputsWithState"
             :key="`${nodeId}: ${widgetName}`"
             :class="
@@ -242,7 +252,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             "
             :title="label ?? widgetName"
             :sub-title="subLabel"
-            :rename
+            :can-rename="canRename"
             :remove="
               () =>
                 remove(
@@ -250,6 +260,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
                   ([id, name]) => nodeId == id && widgetName === name
                 )
             "
+            @rename="inlineRenameInput(nodeId, widgetName, $event)"
           />
         </DraggableList>
       </PropertiesAccordionItem>

src/components/builder/AppModeWidgetList.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
@@ -44,6 +45,7 @@ const appModeStore = useAppModeStore()
 const maskEditor = useMaskEditor()
 
 provide(HideLayoutFieldKey, true)
+provide(OverlayAppendToKey, 'body')
 
 const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
 useEventListener(

src/components/builder/IoItem.vue

@@ -2,31 +2,43 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import EditableText from '@/components/common/EditableText.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
 
-const titleTooltip = ref<string | null>(null)
 const subTitleTooltip = ref<string | null>(null)
+const isEditing = ref(false)
 
 function isTruncated(e: MouseEvent): boolean {
   const el = e.currentTarget as HTMLElement
   return el.scrollWidth > el.clientWidth
 }
-const { rename, remove } = defineProps<{
+const { title, canRename, remove } = defineProps<{
   title: string
   subTitle?: string
-  rename?: () => void
+  canRename?: boolean
   remove?: () => void
 }>()
 
+const emit = defineEmits<{
+  rename: [newName: string]
+}>()
+
+function onEditComplete(newName: string) {
+  isEditing.value = false
+  const trimmed = newName.trim()
+  if (trimmed && trimmed !== title) emit('rename', trimmed)
+}
+
 const entries = computed(() => {
   const items = []
-  if (rename)
+  if (canRename)
     items.push({
       label: t('g.rename'),
-      command: rename,
+      command: () => setTimeout(() => (isEditing.value = true)),
       icon: 'icon-[lucide--pencil]'
     })
   if (remove)
@@ -43,13 +55,24 @@ const entries = computed(() => {
     class="my-2 flex items-center-safe gap-2 rounded-lg p-2"
     data-testid="builder-io-item"
   >
-    <div class="drag-handle mr-auto flex min-w-0 flex-col gap-1">
-      <div
-        v-tooltip.left="{ value: titleTooltip, showDelay: 300 }"
-        class="drag-handle truncate text-sm"
+    <div class="drag-handle mr-auto flex w-full min-w-0 flex-col gap-1">
+      <EditableText
+        :model-value="title"
+        :is-editing="isEditing"
+        :input-attrs="{ class: 'p-1' }"
+        :class="
+          cn(
+            'drag-handle h-5 text-sm',
+            isEditing && 'relative -top-0.5 -left-1 -mt-px mb-px -ml-px',
+            !isEditing && 'truncate'
+          )
+        "
         data-testid="builder-io-item-title"
-        @mouseenter="titleTooltip = isTruncated($event) ? title : null"
-        v-text="title"
+        label-class="drag-handle"
+        label-type="div"
+        @dblclick="canRename && (isEditing = true)"
+        @edit="onEditComplete"
+        @cancel="isEditing = false"
       />
       <div
         v-tooltip.left="{ value: subTitleTooltip, showDelay: 300 }"

src/components/builder/VueNodeSwitchPopup.vue

@@ -0,0 +1,55 @@
+<template>
+  <NotificationPopup
+    v-if="appModeStore.showVueNodeSwitchPopup"
+    :title="$t('appBuilder.vueNodeSwitch.title')"
+    show-close
+    position="bottom-left"
+    @close="dismiss"
+  >
+    {{ $t('appBuilder.vueNodeSwitch.content') }}
+
+    <template #footer-start>
+      <label
+        class="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground"
+      >
+        <input
+          v-model="dontShowAgain"
+          type="checkbox"
+          class="accent-primary-background"
+        />
+        {{ $t('appBuilder.vueNodeSwitch.dontShowAgain') }}
+      </label>
+    </template>
+
+    <template #footer-end>
+      <Button
+        variant="secondary"
+        size="lg"
+        class="font-normal"
+        @click="dismiss"
+      >
+        {{ $t('appBuilder.vueNodeSwitch.dismiss') }}
+      </Button>
+    </template>
+  </NotificationPopup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import NotificationPopup from '@/components/common/NotificationPopup.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useAppModeStore } from '@/stores/appModeStore'
+
+const appModeStore = useAppModeStore()
+const settingStore = useSettingStore()
+const dontShowAgain = ref(false)
+
+function dismiss() {
+  if (dontShowAgain.value) {
+    void settingStore.set('Comfy.AppBuilder.VueNodeSwitchDismissed', true)
+  }
+  appModeStore.showVueNodeSwitchPopup = false
+}
+</script>

src/components/common/EditableText.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="editable-text">
-    <span v-if="!isEditing">
+    <component :is="labelType" v-if="!isEditing" :class="labelClass">
       {{ modelValue }}
-    </span>
+    </component>
     <!-- Avoid double triggering finishEditing event when keydown.enter is triggered -->
     <InputText
       v-else
@@ -35,11 +35,15 @@ import { nextTick, ref, watch } from 'vue'
 const {
   modelValue,
   isEditing = false,
-  inputAttrs = {}
+  inputAttrs = {},
+  labelClass = '',
+  labelType = 'span'
 } = defineProps<{
   modelValue: string
   isEditing?: boolean
   inputAttrs?: Record<string, string>
+  labelClass?: string
+  labelType?: string
 }>()
 
 const emit = defineEmits(['edit', 'cancel'])

src/components/common/LazyImage.vue

@@ -42,7 +42,6 @@ import type { StyleValue } from 'vue'
 
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useMediaCache } from '@/services/mediaCacheService'
-import type { ClassValue } from '@/utils/tailwindUtil'
 
 const {
   src,
@@ -54,8 +53,8 @@ const {
 } = defineProps<{
   src: string
   alt?: string
-  containerClass?: ClassValue
-  imageClass?: ClassValue
+  containerClass?: string
+  imageClass?: string
   imageStyle?: StyleValue
   rootMargin?: string
 }>()

src/components/common/NotificationPopup.test.ts

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import NotificationPopup from './NotificationPopup.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: { g: { close: 'Close' } }
+  }
+})
+
+function mountPopup(
+  props: ComponentProps<typeof NotificationPopup> = {
+    title: 'Test'
+  },
+  slots: Record<string, string> = {}
+) {
+  return mount(NotificationPopup, {
+    global: { plugins: [i18n] },
+    props,
+    slots
+  })
+}
+
+describe('NotificationPopup', () => {
+  it('renders title', () => {
+    const wrapper = mountPopup({ title: 'Hello World' })
+    expect(wrapper.text()).toContain('Hello World')
+  })
+
+  it('has role="status" for accessibility', () => {
+    const wrapper = mountPopup()
+    expect(wrapper.find('[role="status"]').exists()).toBe(true)
+  })
+
+  it('renders subtitle when provided', () => {
+    const wrapper = mountPopup({ title: 'T', subtitle: 'v1.2.3' })
+    expect(wrapper.text()).toContain('v1.2.3')
+  })
+
+  it('renders icon when provided', () => {
+    const wrapper = mountPopup({
+      title: 'T',
+      icon: 'icon-[lucide--rocket]'
+    })
+    expect(wrapper.find('i.icon-\\[lucide--rocket\\]').exists()).toBe(true)
+  })
+
+  it('emits close when close button clicked', async () => {
+    const wrapper = mountPopup({ title: 'T', showClose: true })
+    await wrapper.find('[aria-label="Close"]').trigger('click')
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+
+  it('renders default slot content', () => {
+    const wrapper = mountPopup({ title: 'T' }, { default: 'Body text here' })
+    expect(wrapper.text()).toContain('Body text here')
+  })
+
+  it('renders footer slots', () => {
+    const wrapper = mountPopup(
+      { title: 'T' },
+      { 'footer-start': 'Left side', 'footer-end': 'Right side' }
+    )
+    expect(wrapper.text()).toContain('Left side')
+    expect(wrapper.text()).toContain('Right side')
+  })
+
+  it('positions bottom-right when specified', () => {
+    const wrapper = mountPopup({ title: 'T', position: 'bottom-right' })
+    const root = wrapper.find('[role="status"]')
+    expect(root.attributes('data-position')).toBe('bottom-right')
+  })
+})

src/components/common/NotificationPopup.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    role="status"
+    :data-position="position"
+    :class="
+      cn(
+        'pointer-events-auto absolute z-1000 flex max-h-96 w-96 flex-col rounded-lg border border-border-default bg-base-background shadow-interface',
+        position === 'bottom-left' && 'bottom-4 left-4',
+        position === 'bottom-right' && 'right-4 bottom-4'
+      )
+    "
+  >
+    <div class="flex min-h-0 flex-1 flex-col gap-4 p-4">
+      <div class="flex items-center gap-4">
+        <div
+          v-if="icon"
+          class="flex shrink-0 items-center justify-center rounded-lg bg-primary-background-hover p-3"
+        >
+          <i :class="cn('size-4 text-white', icon)" />
+        </div>
+        <div class="flex flex-1 flex-col gap-1">
+          <div class="text-sm leading-[1.429] font-normal text-base-foreground">
+            {{ title }}
+          </div>
+          <div
+            v-if="subtitle"
+            class="text-sm leading-[1.21] font-normal text-muted-foreground"
+          >
+            {{ subtitle }}
+          </div>
+        </div>
+        <Button
+          v-if="showClose"
+          class="size-6 shrink-0 self-start"
+          size="icon-sm"
+          variant="muted-textonly"
+          :aria-label="$t('g.close')"
+          @click="emit('close')"
+        >
+          <i class="icon-[lucide--x] size-3.5" />
+        </Button>
+      </div>
+
+      <div
+        v-if="$slots.default"
+        class="min-h-0 flex-1 overflow-y-auto text-sm text-muted-foreground"
+      >
+        <slot />
+      </div>
+    </div>
+
+    <div
+      v-if="$slots['footer-start'] || $slots['footer-end']"
+      class="flex items-center justify-between px-4 pb-4"
+    >
+      <div>
+        <slot name="footer-start" />
+      </div>
+      <div class="flex items-center gap-4">
+        <slot name="footer-end" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  icon,
+  title,
+  subtitle,
+  showClose = false,
+  position = 'bottom-left'
+} = defineProps<{
+  icon?: string
+  title: string
+  subtitle?: string
+  showClose?: boolean
+  position?: 'bottom-left' | 'bottom-right'
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+</script>

src/components/common/WaveAudioPlayer.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import WaveAudioPlayer from './WaveAudioPlayer.vue'
+
+const meta: Meta<typeof WaveAudioPlayer> = {
+  title: 'Components/Audio/WaveAudioPlayer',
+  component: WaveAudioPlayer,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    src: '/assets/audio/sample.wav',
+    barCount: 40,
+    height: 32
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template:
+        '<div class="w-80 rounded-lg bg-base-background p-4"><story /></div>'
+    })
+  ]
+}
+
+export const BottomAligned: Story = {
+  args: {
+    src: '/assets/audio/sample.wav',
+    barCount: 40,
+    height: 48,
+    align: 'bottom'
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template:
+        '<div class="w-80 rounded-lg bg-base-background p-4"><story /></div>'
+    })
+  ]
+}
+
+export const Expanded: Story = {
+  args: {
+    src: '/assets/audio/sample.wav',
+    variant: 'expanded',
+    barCount: 80,
+    height: 120
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template:
+        '<div class="w-[600px] rounded-2xl bg-base-background/80 p-8 backdrop-blur-sm"><story /></div>'
+    })
+  ]
+}

src/components/common/WaveAudioPlayer.vue

@@ -0,0 +1,221 @@
+<template>
+  <!-- Compact: [▶] [waveform] [time] -->
+  <div
+    v-if="variant === 'compact'"
+    :class="
+      cn('flex w-full gap-2', align === 'center' ? 'items-center' : 'items-end')
+    "
+    @pointerdown.stop
+    @click.stop
+  >
+    <Button
+      variant="textonly"
+      size="icon-sm"
+      class="size-7 shrink-0 rounded-full bg-muted-foreground/15 hover:bg-muted-foreground/25"
+      :aria-label="isPlaying ? $t('g.pause') : $t('g.play')"
+      :loading="loading"
+      @click.stop="togglePlayPause"
+    >
+      <i
+        v-if="!isPlaying"
+        class="ml-0.5 icon-[lucide--play] size-3 text-base-foreground"
+      />
+      <i v-else class="icon-[lucide--pause] size-3 text-base-foreground" />
+    </Button>
+
+    <div
+      :ref="(el) => (waveformRef = el as HTMLElement)"
+      :class="
+        cn(
+          'flex min-w-0 flex-1 cursor-pointer gap-px',
+          align === 'center' ? 'items-center' : 'items-end'
+        )
+      "
+      :style="{ height: height + 'px' }"
+      @click="handleWaveformClick"
+    >
+      <div
+        v-for="(bar, index) in bars"
+        :key="index"
+        :class="
+          cn(
+            'min-h-0.5 flex-1 rounded-full',
+            loading
+              ? 'bg-muted-foreground/20'
+              : index <= playedBarIndex
+                ? 'bg-base-foreground'
+                : 'bg-muted-foreground/40'
+          )
+        "
+        :style="{ height: (bar.height / 100) * height + 'px' }"
+      />
+    </div>
+
+    <span class="shrink-0 text-xs text-muted-foreground tabular-nums">
+      {{ formattedCurrentTime }} / {{ formattedDuration }}
+    </span>
+  </div>
+
+  <!-- Expanded: waveform / progress bar + times / transport -->
+  <div v-else class="flex w-full flex-col gap-4" @pointerdown.stop @click.stop>
+    <div
+      class="flex w-full items-center gap-0.5"
+      :style="{ height: height + 'px' }"
+    >
+      <div
+        v-for="(bar, index) in bars"
+        :key="index"
+        :class="
+          cn(
+            'min-h-0.5 flex-1 rounded-full',
+            loading ? 'bg-muted-foreground/20' : 'bg-base-foreground'
+          )
+        "
+        :style="{ height: (bar.height / 100) * height + 'px' }"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <div
+        ref="progressRef"
+        class="relative h-1 w-full cursor-pointer rounded-full bg-muted-foreground/20"
+        @click="handleProgressClick"
+      >
+        <div
+          class="absolute top-0 left-0 h-full rounded-full bg-base-foreground"
+          :style="{ width: progressRatio + '%' }"
+        />
+      </div>
+      <div
+        class="flex justify-between text-xs text-muted-foreground tabular-nums"
+      >
+        <span>{{ formattedCurrentTime }}</span>
+        <span>{{ formattedDuration }}</span>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <div class="w-20" />
+
+      <div class="flex flex-1 items-center justify-center gap-2">
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-8 rounded-full"
+          :aria-label="$t('g.skipToStart')"
+          :disabled="loading"
+          @click="seekToStart"
+        >
+          <i class="icon-[lucide--skip-back] size-4 text-base-foreground" />
+        </Button>
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-10 rounded-full bg-muted-foreground/15 hover:bg-muted-foreground/25"
+          :aria-label="isPlaying ? $t('g.pause') : $t('g.play')"
+          :loading="loading"
+          @click="togglePlayPause"
+        >
+          <i
+            v-if="!isPlaying"
+            class="ml-0.5 icon-[lucide--play] size-5 text-base-foreground"
+          />
+          <i v-else class="icon-[lucide--pause] size-5 text-base-foreground" />
+        </Button>
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-8 rounded-full"
+          :aria-label="$t('g.skipToEnd')"
+          :disabled="loading"
+          @click="seekToEnd"
+        >
+          <i class="icon-[lucide--skip-forward] size-4 text-base-foreground" />
+        </Button>
+      </div>
+
+      <div class="flex w-20 items-center gap-1">
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-8 shrink-0 rounded-full"
+          :aria-label="$t('g.volume')"
+          :disabled="loading"
+          @click="toggleMute"
+        >
+          <i :class="cn(volumeIcon, 'size-4 text-base-foreground')" />
+        </Button>
+        <Slider
+          :model-value="[volume * 100]"
+          :min="0"
+          :max="100"
+          :step="1"
+          class="flex-1"
+          @update:model-value="(v) => (volume = (v?.[0] ?? 100) / 100)"
+        />
+      </div>
+    </div>
+  </div>
+
+  <audio
+    :ref="(el) => (audioRef = el as HTMLAudioElement)"
+    :src="audioSrc"
+    preload="metadata"
+    class="hidden"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, toRef } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+import { useWaveAudioPlayer } from '@/composables/useWaveAudioPlayer'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  src,
+  barCount = 40,
+  height = 32,
+  align = 'center',
+  variant = 'compact'
+} = defineProps<{
+  src: string
+  barCount?: number
+  height?: number
+  align?: 'center' | 'bottom'
+  variant?: 'compact' | 'expanded'
+}>()
+
+const progressRef = ref<HTMLElement>()
+
+const {
+  audioRef,
+  waveformRef,
+  audioSrc,
+  bars,
+  loading,
+  isPlaying,
+  playedBarIndex,
+  progressRatio,
+  formattedCurrentTime,
+  formattedDuration,
+  togglePlayPause,
+  seekToStart,
+  seekToEnd,
+  volume,
+  volumeIcon,
+  toggleMute,
+  seekToRatio,
+  handleWaveformClick
+} = useWaveAudioPlayer({
+  src: toRef(() => src),
+  barCount
+})
+
+function handleProgressClick(event: MouseEvent) {
+  if (!progressRef.value) return
+  const rect = progressRef.value.getBoundingClientRect()
+  seekToRatio((event.clientX - rect.left) / rect.width)
+}
+</script>

src/components/dialog/content/SignInContent.vue

@@ -186,13 +186,13 @@ const toggleState = () => {
 }
 
 const signInWithGoogle = async () => {
-  if (await authActions.signInWithGoogle()) {
+  if (await authActions.signInWithGoogle({ isNewUser: !isSignIn.value })) {
     onSuccess()
   }
 }
 
 const signInWithGithub = async () => {
-  if (await authActions.signInWithGithub()) {
+  if (await authActions.signInWithGithub({ isNewUser: !isSignIn.value })) {
     onSuccess()
   }
 }

src/components/dialog/content/error/FindIssueButton.vue

@@ -19,10 +19,7 @@ const props = defineProps<{
 
 const queryString = computed(() => props.errorMessage + ' is:issue')
 
-/**
- * Open GitHub issues search and track telemetry.
- */
-const openGitHubIssues = () => {
+function openGitHubIssues() {
   useTelemetry()?.trackUiButtonClicked({
     button_id: 'error_dialog_find_existing_issues_clicked'
   })

src/components/error/ErrorOverlay.vue

@@ -49,7 +49,12 @@
           <Button variant="muted-textonly" size="unset" @click="dismiss">
             {{ t('g.dismiss') }}
           </Button>
-          <Button variant="secondary" size="lg" @click="seeErrors">
+          <Button
+            variant="secondary"
+            size="lg"
+            data-testid="error-overlay-see-errors"
+            @click="seeErrors"
+          >
             {{
               appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
             }}

src/components/graph/GraphCanvas.vue

@@ -97,6 +97,7 @@
 
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
+  <VueNodeSwitchPopup />
 
   <!-- Initialize components after comfyApp is ready. useAbsolutePosition requires
   canvasStore.canvas to be initialized. -->
@@ -128,6 +129,7 @@ import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitter
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
 import AppBuilder from '@/components/builder/AppBuilder.vue'
+import VueNodeSwitchPopup from '@/components/builder/VueNodeSwitchPopup.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
@@ -193,6 +195,7 @@ import { forEachNode } from '@/utils/graphTraversalUtil'
 import SelectionRectangle from './SelectionRectangle.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useCreateWorkspaceUrlLoader } from '@/platform/workspace/composables/useCreateWorkspaceUrlLoader'
 import { useInviteUrlLoader } from '@/platform/workspace/composables/useInviteUrlLoader'
 
 const { t } = useI18n()
@@ -453,8 +456,9 @@ useEventListener(
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
 const { flags } = useFeatureFlags()
-// Set up invite loader during setup phase so useRoute/useRouter work correctly
+// Set up URL loaders during setup phase so useRoute/useRouter work correctly
 const inviteUrlLoader = isCloud ? useInviteUrlLoader() : null
+const createWorkspaceUrlLoader = isCloud ? useCreateWorkspaceUrlLoader() : null
 useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()
@@ -574,6 +578,18 @@ onMounted(async () => {
     await inviteUrlLoader.loadInviteFromUrl()
   }
 
+  // Open create workspace dialog from URL if present (e.g., ?create_workspace=1)
+  if (createWorkspaceUrlLoader && flags.teamWorkspacesEnabled) {
+    try {
+      await createWorkspaceUrlLoader.loadCreateWorkspaceFromUrl()
+    } catch (error) {
+      console.error(
+        '[GraphCanvas] Failed to load create workspace from URL:',
+        error
+      )
+    }
+  }
+
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
   const { useReleaseStore } =
     await import('@/platform/updates/common/releaseStore')

src/components/graph/TitleEditor.vue

@@ -84,7 +84,9 @@ watch(
         pos: group.pos,
         size: [group.size[0], group.titleHeight]
       })
-      inputFontStyle.value = { fontSize: `${group.font_size * scale}px` }
+      inputFontStyle.value = {
+        fontSize: `${LiteGraph.GROUP_TEXT_SIZE * scale}px`
+      }
     } else if (target instanceof LGraphNode) {
       const node = target
       const [x, y] = node.getBounding()

src/components/helpcenter/HelpCenterPopups.vue

@@ -17,11 +17,7 @@
   <!-- Release Notification Toast positioned within canvas area -->
   <Teleport to="#graph-canvas-container">
     <ReleaseNotificationToast
-      :class="{
-        'sidebar-left': sidebarLocation === 'left',
-        'sidebar-right': sidebarLocation === 'right',
-        'small-sidebar': isSmall
-      }"
+      :position="sidebarLocation === 'right' ? 'bottom-right' : 'bottom-left'"
     />
   </Teleport>