feat: use demowright showTitleCard API for early title overlay

- Import showTitleCard/hideTitleCard from demowright/video-script
- Replace page.evaluate() hack with official demowright API
- CI clones demowright feat/show-title-card-api branch
- demowright PR: https://github.com/snomiao/demowright/pull/11

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

@@ -525,14 +525,19 @@ The videoScript is a complete, standalone Playwright test file for Phase 2 demo
 
 \`\`\`typescript
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { createVideoScript } from 'demowright/video-script'
+import { createVideoScript, showTitleCard, hideTitleCard } from 'demowright/video-script'
 
 test('Demo: Bug Title', async ({ comfyPage }) => {
-  // IMPORTANT: ALL setup code MUST go here BEFORE createVideoScript()
-  // so the title card is the FIRST thing viewers see in the video
+  // Show title card IMMEDIATELY — covers the screen while setup runs behind it
+  await showTitleCard(comfyPage.page, 'Bug Title Here', { subtitle: 'Issue #NNNN' })
+
+  // Setup runs while title card is visible
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
   await comfyPage.workflow.setupWorkflowsDirectory({})
 
+  // Remove early title card before script starts (script will show its own)
+  await hideTitleCard(comfyPage.page)
+
   const script = createVideoScript()
     .title('Bug Title Here', { subtitle: 'Issue #NNNN', durationMs: 4000 })
     .segment('Step 1: description of what we do', async (pace) => {
@@ -570,7 +575,7 @@ to happen before it happens. Pattern:
 
 IMPORTANT RULES for videoScript:
 1. You MUST provide videoScript when verdict is REPRODUCED — every reproduced bug needs a narrated demo
-2. ALL setup code (setSetting, setupWorkflowsDirectory) goes BEFORE createVideoScript() — title card must be first thing in video
+2. Call showTitleCard() BEFORE setup, run setup behind it, call hideTitleCard() before createVideoScript() — see example
 3. Call \`await pace()\` FIRST in each segment callback, BEFORE actions
 4. Add \`waitForTimeout(2000)\` after each action so viewers can see the result
 5. Final evidence segment: hold for 5+ seconds

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

@@ -77,15 +77,15 @@ for os in Linux macOS Windows; do
   fi
 
   if [ "$HAS_BEFORE" = "1" ]; then
-    CARDS="${CARDS}<div class='card reveal' style='--i:${CARD_COUNT}'><div class=card-header><span class=platform><span class=icon>${ICON}</span>${os}</span><span class=links>${REPORT_LINK}</span></div><div class=comparison><div class=comp-panel><div class=comp-label>Before <span class=comp-tag>main</span></div><div class=video-wrap><video controls autoplay preload=auto><source src=qa-before-${os}.mp4 type=video/mp4></video></div><div class=comp-dl><a class=dl href=qa-before-${os}.mp4 download>${DL_ICON}Before</a></div></div><div class=comp-panel><div class=comp-label>After <span class=comp-tag>PR</span></div><div class=video-wrap><video controls autoplay preload=auto><source src=qa-${os}.mp4 type=video/mp4></video></div><div class=comp-dl><a class=dl href=qa-${os}.mp4 download>${DL_ICON}After</a></div></div></div>${REPORT_HTML}</div>"
+    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 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 preload=auto><source src=qa-${os}.mp4 type=video/mp4></video></div><div class=comp-dl><a class=dl href=qa-${os}.mp4 download>${DL_ICON}After</a></div></div></div>${REPORT_HTML}</div>"
   elif [ -f "$DEPLOY_DIR/qa-${os}.mp4" ]; then
-    CARDS="${CARDS}<div class='card reveal' style='--i:${CARD_COUNT}'><div class=video-wrap><video controls autoplay preload=auto><source src=qa-${os}.mp4 type=video/mp4></video></div><div class=card-body><span class=platform><span class=icon>${ICON}</span>${os}</span><span class=links><a class=dl href=qa-${os}.mp4 download>${DL_ICON}Download</a>${REPORT_LINK}</span></div>${REPORT_HTML}</div>"
+    CARDS="${CARDS}<div class='card reveal' style='--i:${CARD_COUNT}'><div class=video-wrap><video controls preload=auto><source src=qa-${os}.mp4 type=video/mp4></video></div><div class=card-body><span class=platform><span class=icon>${ICON}</span>${os}</span><span class=links><a class=dl href=qa-${os}.mp4 download>${DL_ICON}Download</a>${REPORT_LINK}</span></div>${REPORT_HTML}</div>"
   else
     PASS_VIDEOS=""
     for pass_vid in "$DEPLOY_DIR/qa-${os}-pass"[0-9].mp4; do
       [ -f "$pass_vid" ] || continue
       PASS_NUM=$(basename "$pass_vid" | sed "s/qa-${os}-pass\([0-9]\).mp4/\1/")
-      PASS_VIDEOS="${PASS_VIDEOS}<div class=comp-panel><div class=comp-label>Pass ${PASS_NUM}</div><div class=video-wrap><video controls autoplay preload=auto><source src=qa-${os}-pass${PASS_NUM}.mp4 type=video/mp4></video></div><div class=comp-dl><a class=dl href=qa-${os}-pass${PASS_NUM}.mp4 download>${DL_ICON}Pass ${PASS_NUM}</a></div></div>"
+      PASS_VIDEOS="${PASS_VIDEOS}<div class=comp-panel><div class=comp-label>Pass ${PASS_NUM}</div><div class=video-wrap><video controls 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

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

@@ -2087,22 +2087,10 @@ export default withDemowright(baseConfig, {
           }
 
           if (demowrightMp4) {
-            // Trim first 7s (ComfyUI loading screen) from the video
-            try {
-              execSync(
-                `ffmpeg -y -i "${demowrightMp4}" -ss 7 -c copy -avoid_negative_ts 1 "${opts.outputDir}/qa-session.mp4" 2>/dev/null`
-              )
-              console.warn(
-                `Phase 2: Trimmed video → ${opts.outputDir}/qa-session.mp4`
-              )
-            } catch {
-              execSync(
-                `cp "${demowrightMp4}" "${opts.outputDir}/qa-session.mp4"`
-              )
-              console.warn(
-                `Phase 2: Narrated video → ${opts.outputDir}/qa-session.mp4`
-              )
-            }
+            execSync(`cp "${demowrightMp4}" "${opts.outputDir}/qa-session.mp4"`)
+            console.warn(
+              `Phase 2: Narrated video → ${opts.outputDir}/qa-session.mp4`
+            )
           }
 
           // Also copy raw webm as fallback

.github/workflows/pr-qa.yaml

@@ -206,7 +206,7 @@ jobs:
       - name: Install QA dependencies
         run: |
           pnpm add -D @google/generative-ai@^0.24.1 @anthropic-ai/claude-agent-sdk@^0.2.85
-          git clone --depth 1 https://github.com/snomiao/demowright.git /tmp/demowright
+          git clone --depth 1 --branch feat/show-title-card-api https://github.com/snomiao/demowright.git /tmp/demowright
           cd /tmp/demowright && npm install && npm install typescript && npm run build
           sed -i 's|"./src/setup.ts"|"./dist/setup.mjs"|' register.cjs
           node --input-type=module -e "import{readFileSync,writeFileSync}from'fs';const p=JSON.parse(readFileSync('package.json','utf8'));p.exports['./video-script']={import:'./dist/video-script.mjs',types:'./dist/video-script.d.mts'};p.exports['./setup']={import:'./dist/setup.mjs',types:'./dist/setup.d.mts'};writeFileSync('package.json',JSON.stringify(p,null,2))"
@@ -392,7 +392,7 @@ jobs:
       - name: Install QA dependencies
         run: |
           pnpm add -D @google/generative-ai@^0.24.1
-          git clone --depth 1 https://github.com/snomiao/demowright.git /tmp/demowright
+          git clone --depth 1 --branch feat/show-title-card-api https://github.com/snomiao/demowright.git /tmp/demowright
           cd /tmp/demowright && npm install && npm install typescript && npm run build
           sed -i 's|"./src/setup.ts"|"./dist/setup.mjs"|' register.cjs
           node --input-type=module -e "import{readFileSync,writeFileSync}from'fs';const p=JSON.parse(readFileSync('package.json','utf8'));p.exports['./video-script']={import:'./dist/video-script.mjs',types:'./dist/video-script.d.mts'};p.exports['./setup']={import:'./dist/setup.mjs',types:'./dist/setup.d.mts'};writeFileSync('package.json',JSON.stringify(p,null,2))"