[automated] Update test expectations

Amp-Thread-ID: https://ampcode.com/threads/T-019d0327-9c42-7359-bd74-d086101824a4
Co-authored-by: Amp <amp@ampcode.com>

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

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

@@ -1,361 +0,0 @@
----
-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,17 +44,12 @@ 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 $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
+        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

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

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

.gitignore

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

.oxfmtrc.json

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

CODEOWNERS

@@ -51,9 +51,6 @@
 # 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. */
-class MaintenanceTaskRunner {
+export class MaintenanceTaskRunner {
   constructor(readonly task: MaintenanceTask) {}
 
   private _state?: MaintenanceTaskState

apps/website/.gitignore

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

apps/website/astro.config.ts

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

@@ -1,80 +0,0 @@
-{
-  "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

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

apps/website/src/styles/global.css

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

apps/website/tsconfig.json

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

browser_tests/assets/links/duplicate_links_slot_drift.json

@@ -1,169 +0,0 @@
-{
-  "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

@@ -1,407 +0,0 @@
-{
-  "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,41 +68,6 @@ 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"]')
@@ -160,42 +125,4 @@ 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,12 +91,6 @@ 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,15 +28,10 @@ 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',
-    missingNodePacksGroup: 'error-group-missing-node',
-    missingModelsGroup: 'error-group-missing-model'
+    whatsNewSection: 'whats-new-section'
   },
   keybindings: {
     presetMenu: 'keybinding-preset-menu'
@@ -69,7 +64,6 @@ export const TestIds = {
   },
   builder: {
     ioItem: 'builder-io-item',
-    ioItemTitle: 'builder-io-item-title',
     widgetActionsMenu: 'widget-actions-menu'
   },
   breadcrumb: {
@@ -81,10 +75,6 @@ export const TestIds = {
   },
   user: {
     currentUserIndicator: 'current-user-indicator'
-  },
-  errors: {
-    imageLoadError: 'error-loading-image',
-    videoLoadError: 'error-loading-video'
   }
 } as const
 
@@ -110,4 +100,3 @@ 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,14 +281,6 @@ 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,5 +1,3 @@
-import type { Page } from '@playwright/test'
-
 import type { LGraph, Subgraph } from '../../src/lib/litegraph/src/litegraph'
 import { isSubgraph } from '../../src/utils/typeGuardUtil'
 
@@ -16,30 +14,3 @@ 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

@@ -1,168 +0,0 @@
-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,18 +30,10 @@ 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()
-  const titleHeight = await page.evaluate(
-    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-  )
-
-  await page.mouse.click(seedPos.x, seedPos.y + titleHeight)
+  await page.mouse.click(seedPos.x, seedPos.y)
   await comfyPage.nextFrame()
 
   // Select an output node
@@ -56,15 +48,9 @@ async function setupSubgraphBuilder(comfyPage: ComfyPage) {
     )
   )
   const saveImageRef = await comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-  await saveImageRef.centerOnNode()
-
-  // Node is centered on screen, so click the canvas center
-  const canvasBox = await page.locator('#graph-canvas').boundingBox()
-  if (!canvasBox) throw new Error('Canvas not found')
-  await page.mouse.click(
-    canvasBox.x + canvasBox.width / 2,
-    canvasBox.y + canvasBox.height / 2
-  )
+  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 comfyPage.nextFrame()
 
   return subgraphNode
@@ -94,15 +80,9 @@ 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 via menu', async ({
-    comfyPage
-  }) => {
+  test('Rename from builder input-select sidebar', async ({ comfyPage }) => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)
 
@@ -111,11 +91,11 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
 
     const menu = appMode.getBuilderInputItemMenu('seed')
     await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameBuilderInputViaMenu('seed', 'Builder Input Seed')
+    await appMode.renameWidget(menu, 'Builder Input Seed')
 
     // Verify in app mode after save/reload
     await appMode.exitBuilder()
-    const workflowName = `${new Date().getTime()} builder-input-menu`
+    const workflowName = `${new Date().getTime()} builder-input`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
     await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
@@ -124,24 +104,6 @@ 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,13 +38,16 @@ 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',
@@ -99,13 +102,16 @@ 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

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

browser_tests/tests/graph.spec.ts

@@ -23,85 +23,4 @@ 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,82 +829,6 @@ 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,3 +1,5 @@
+import type { Page } from '@playwright/test'
+
 import {
   comfyPageFixture as test,
   comfyExpect as expect
@@ -9,10 +11,58 @@ 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 comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
@@ -20,7 +70,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Run button visible in linear mode', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-run-button"]')
@@ -28,7 +78,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-workflow-info"]')
@@ -36,13 +86,13 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Returns to graph mode', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
     ).toBeVisible({ timeout: 5000 })
 
-    await comfyPage.appMode.toggleAppMode()
+    await enterGraphMode(comfyPage)
 
     await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
     await expect(
@@ -51,7 +101,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Canvas not visible in app mode', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')

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

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

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

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

@@ -1,132 +0,0 @@
-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,31 +206,6 @@ 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/modeSwitchLinks.spec.ts

@@ -0,0 +1,92 @@
+import type { Page } from '@playwright/test'
+
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../../fixtures/ComfyPage'
+import { fitToViewInstant } from '../../../helpers/fitToView'
+
+/**
+ * Inject linearData into the current graph so that the app mode toggle
+ * recognises output nodes and shows the linear UI.
+ */
+async function injectLinearData(page: Page) {
+  await 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))
+
+    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]
+    )
+  })
+}
+
+async function enterAppMode(comfyPage: ComfyPage) {
+  await injectLinearData(comfyPage.page)
+  await comfyPage.nextFrame()
+
+  await comfyPage.page.evaluate(() => {
+    window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
+  })
+  await comfyPage.nextFrame()
+}
+
+async function enterGraphMode(comfyPage: ComfyPage) {
+  await comfyPage.page.evaluate(() => {
+    window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
+  })
+  await comfyPage.nextFrame()
+}
+
+test.describe(
+  'Vue Node links after mode switch',
+  { tag: ['@screenshot', '@canvas'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow('default')
+      await comfyPage.vueNodes.waitForNodes()
+      await fitToViewInstant(comfyPage)
+    })
+
+    test('links render correctly after switching to app mode and back', async ({
+      comfyPage
+    }) => {
+      // Capture baseline screenshot with links visible in graph mode
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'mode-switch-links-before.png'
+      )
+
+      // Switch to app mode — graph canvas hidden via display:none
+      await enterAppMode(comfyPage)
+      await expect(
+        comfyPage.page.locator('[data-testid="linear-widgets"]')
+      ).toBeVisible({ timeout: 5000 })
+
+      // Switch back to graph mode
+      await enterGraphMode(comfyPage)
+      await comfyPage.vueNodes.waitForNodes()
+      await fitToViewInstant(comfyPage)
+
+      // Links must render at the same positions as before the mode switch
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'mode-switch-links-after.png'
+      )
+    })
+  }
+)

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

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

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

@@ -46,16 +46,4 @@ 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

@@ -1,73 +0,0 @@
-# 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

@@ -1,59 +0,0 @@
-# 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

@@ -1,60 +0,0 @@
-# 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,7 +5,6 @@ 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'
@@ -272,20 +271,6 @@ 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,6 +6,7 @@ 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'
@@ -13,34 +14,25 @@ const config: KnipConfig = {
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}', '!.claude/**']
     },
     'apps/desktop-ui': {
-      entry: ['src/i18n.ts'],
+      entry: ['src/main.ts', 'src/i18n.ts'],
       project: ['src/**/*.{js,ts,vue}']
     },
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
     'packages/shared-frontend-utils': {
-      project: ['src/**/*.{js,ts}']
+      project: ['src/**/*.{js,ts}'],
+      entry: ['src/formatUtil.ts', 'src/networkUtil.ts']
     },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     },
     'packages/ingest-types': {
-      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']
+      project: ['src/**/*.{js,ts}'],
+      entry: ['src/index.ts']
     }
   },
-  ignoreBinaries: ['python3', 'wrangler'],
+  ignoreBinaries: ['python3', 'gh', 'generate'],
   ignoreDependencies: [
     // Weird importmap things
     '@iconify-json/lucide',
@@ -48,12 +40,19 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons'
+    '@primevue/icons',
+    // Used by lucideStrokePlugin.js (CSS @plugin)
+    '@iconify/utils'
   ],
   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
@@ -61,8 +60,17 @@ 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'
+    '.agents/checks/eslint.strict.config.js',
+    // Loaded via @plugin directive in CSS, not detected by knip
+    'packages/design-system/src/css/lucideStrokePlugin.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,json,yaml}': (stagedFiles: string[]) => {
+  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
     const commands = [...formatAndEslint(stagedFiles), 'pnpm typecheck']
 
     const hasBrowserTestsChanges = stagedFiles

nx.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.4",
+  "version": "1.43.2",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -39,7 +39,6 @@
     "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}'",
@@ -121,9 +120,7 @@
     "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:",
@@ -138,9 +135,6 @@
     "@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:",
@@ -159,7 +153,6 @@
     "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:",
@@ -184,7 +177,9 @@
     "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,9 +12,7 @@
   "dependencies": {
     "@iconify-json/lucide": "catalog:",
     "@iconify/tailwind4": "catalog:",
-    "@iconify/utils": "catalog:",
-    "tailwindcss-primeui": "catalog:",
-    "tw-animate-css": "catalog:"
+    "@iconify/utils": "catalog:"
   },
   "devDependencies": {
     "tailwindcss": "catalog:",

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

@@ -1,46 +0,0 @@
-/*
- * 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,quiver-ai}]");
+@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}]");
 
 /* 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

@@ -1,3 +0,0 @@
-<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,10 +631,3 @@ 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,22 +4,19 @@ 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.6.1
-  '@nx/playwright': 22.6.1
-  '@nx/storybook': 22.6.1
-  '@nx/vite': 22.6.1
+  '@nx/eslint': 22.5.2
+  '@nx/playwright': 22.5.2
+  '@nx/storybook': 22.5.2
+  '@nx/vite': 22.5.2
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
@@ -37,9 +34,6 @@ 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
@@ -53,7 +47,6 @@ 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
@@ -62,7 +55,6 @@ 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
@@ -75,7 +67,6 @@ 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
@@ -88,11 +79,11 @@ catalog:
   jsdom: ^27.4.0
   jsonata: ^2.1.0
   jsondiffpatch: ^0.7.3
-  knip: ^6.0.1
+  knip: ^5.75.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
-  nx: 22.6.1
+  nx: 22.5.2
   oxfmt: ^0.40.0
   oxlint: ^1.55.0
   oxlint-tsgolint: ^0.17.0

scripts/qa-agent.ts

@@ -1,553 +0,0 @@
-#!/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

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

@@ -1,799 +0,0 @@
-#!/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

@@ -1,176 +0,0 @@
-#!/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

@@ -1,333 +0,0 @@
-#!/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

@@ -1,208 +0,0 @@
-#!/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

@@ -1,135 +0,0 @@
-<!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

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

@@ -1,757 +0,0 @@
-#!/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,10 +9,13 @@ 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'
@@ -20,6 +23,7 @@ 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()
 
@@ -94,17 +98,12 @@ onMounted(() => {
         }
       })
     }
-    // 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
-    // })
+    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,7 +34,9 @@
       "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",
@@ -43,6 +45,7 @@
       "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,8 +25,10 @@
       "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",
@@ -35,6 +37,7 @@
       "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,7 +34,9 @@
       "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",
@@ -43,6 +45,7 @@
       "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,8 +26,10 @@
       "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",
@@ -36,6 +38,7 @@
       "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,7 +34,9 @@
       "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",
@@ -43,6 +45,7 @@
       "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,7 +19,9 @@
     "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",
@@ -28,6 +30,7 @@
       "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,4 +1,5 @@
 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'
@@ -13,7 +14,6 @@ import {
   useQueueSettingsStore,
   useQueueStore
 } from '@/stores/queueStore'
-import { render, screen } from '@/utils/test-utils'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -78,40 +78,38 @@ function createTask(id: string, status: JobStatus): TaskItemImpl {
   return new TaskItemImpl(job)
 }
 
-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() {
+function createWrapper() {
   const pinia = createTestingPinia({ createSpy: vi.fn })
 
-  return render(ComfyQueueButton, {
+  return mount(ComfyQueueButton, {
     global: {
       plugins: [pinia, i18n],
       directives: {
         tooltip: () => {}
       },
-      stubs
+      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>' }
+      }
     }
   })
 }
 
 describe('ComfyQueueButton', () => {
   it('renders the batch count control before the run button', () => {
-    renderQueueButton()
-    const controls = screen.getAllByTestId(/batch-count-edit|queue-button/)
+    const wrapper = createWrapper()
+    const controls = wrapper.get('.queue-button-group').element.children
 
-    expect(controls[0]).toHaveAttribute('data-testid', 'batch-count-edit')
-    expect(controls[1]).toHaveAttribute('data-testid', 'queue-button')
+    expect(controls[0]?.getAttribute('data-testid')).toBe('batch-count-edit')
+    expect(controls[1]?.getAttribute('data-testid')).toBe('queue-button')
   })
 
   it('keeps the run instant presentation while idle even with active jobs', async () => {
-    renderQueueButton()
+    const wrapper = createWrapper()
     const queueSettingsStore = useQueueSettingsStore()
     const queueStore = useQueueStore()
 
@@ -119,27 +117,29 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    const queueButton = screen.getByTestId('queue-button')
+    const queueButton = wrapper.get('[data-testid="queue-button"]')
 
-    expect(queueButton).toHaveTextContent('Run (Instant)')
-    expect(queueButton).toHaveAttribute('data-variant', 'primary')
+    expect(queueButton.text()).toContain('Run (Instant)')
+    expect(queueButton.attributes('data-variant')).toBe('primary')
+    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
   })
 
   it('switches to stop presentation when instant mode is armed', async () => {
-    renderQueueButton()
+    const wrapper = createWrapper()
     const queueSettingsStore = useQueueSettingsStore()
 
     queueSettingsStore.mode = 'instant-running'
     await nextTick()
 
-    const queueButton = screen.getByTestId('queue-button')
+    const queueButton = wrapper.get('[data-testid="queue-button"]')
 
-    expect(queueButton).toHaveTextContent('Stop Run (Instant)')
-    expect(queueButton).toHaveAttribute('data-variant', 'destructive')
+    expect(queueButton.text()).toContain('Stop Run (Instant)')
+    expect(queueButton.attributes('data-variant')).toBe('destructive')
+    expect(wrapper.find('.icon-\\[lucide--square\\]').exists()).toBe(true)
   })
 
   it('disarms instant mode without interrupting even when jobs are active', async () => {
-    const { user } = renderQueueButton()
+    const wrapper = createWrapper()
     const queueSettingsStore = useQueueSettingsStore()
     const queueStore = useQueueStore()
     const commandStore = useCommandStore()
@@ -148,26 +148,33 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    await user!.click(screen.getByTestId('queue-button'))
+    await wrapper.get('[data-testid="queue-button"]').trigger('click')
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-idle')
-    const queueButton = screen.getByTestId('queue-button')
-    expect(queueButton).toHaveTextContent('Run (Instant)')
-    expect(queueButton).toHaveAttribute('data-variant', 'primary')
+    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)
 
     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 { user } = renderQueueButton()
+    const wrapper = createWrapper()
     const queueSettingsStore = useQueueSettingsStore()
     const commandStore = useCommandStore()
 
     queueSettingsStore.mode = 'instant-idle'
     await nextTick()
 
-    await user!.click(screen.getByTestId('queue-button'))
+    await wrapper.get('[data-testid="queue-button"]').trigger('click')
     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 { renameWidget } from '@/utils/widgetUtil'
+import { promptRenameWidget } 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,
-      canRename: true
+      rename: () => promptRenameWidget(widget, node, t)
     }
   })
 )
@@ -74,16 +74,6 @@ 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] {
@@ -244,7 +234,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
               widgetName,
               label,
               subLabel,
-              canRename
+              rename
             } in inputsWithState"
             :key="`${nodeId}: ${widgetName}`"
             :class="
@@ -252,7 +242,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             "
             :title="label ?? widgetName"
             :sub-title="subLabel"
-            :can-rename="canRename"
+            :rename
             :remove="
               () =>
                 remove(
@@ -260,7 +250,6 @@ 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,7 +6,6 @@ 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'
@@ -45,7 +44,6 @@ 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,43 +2,31 @@
 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 { title, canRename, remove } = defineProps<{
+const { rename, remove } = defineProps<{
   title: string
   subTitle?: string
-  canRename?: boolean
+  rename?: () => void
   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 (canRename)
+  if (rename)
     items.push({
       label: t('g.rename'),
-      command: () => setTimeout(() => (isEditing.value = true)),
+      command: rename,
       icon: 'icon-[lucide--pencil]'
     })
   if (remove)
@@ -55,24 +43,13 @@ 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 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'
-          )
-        "
+    <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"
         data-testid="builder-io-item-title"
-        label-class="drag-handle"
-        label-type="div"
-        @dblclick="canRename && (isEditing = true)"
-        @edit="onEditComplete"
-        @cancel="isEditing = false"
+        @mouseenter="titleTooltip = isTruncated($event) ? title : null"
+        v-text="title"
       />
       <div
         v-tooltip.left="{ value: subTitleTooltip, showDelay: 300 }"

src/components/builder/VueNodeSwitchPopup.vue

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

src/components/common/LazyImage.vue

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

src/components/common/NotificationPopup.test.ts

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

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

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

@@ -1,221 +0,0 @@
-<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({ isNewUser: !isSignIn.value })) {
+  if (await authActions.signInWithGoogle()) {
     onSuccess()
   }
 }
 
 const signInWithGithub = async () => {
-  if (await authActions.signInWithGithub({ isNewUser: !isSignIn.value })) {
+  if (await authActions.signInWithGithub()) {
     onSuccess()
   }
 }

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

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