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

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

@@ -97,7 +97,13 @@ h1{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;letter-spacing:-.03em
     let html='';
     if(logRes.status==='fulfilled'&&logRes.value.ok){
       const log=await logRes.value.json();
-      html+=`<details style="margin-bottom:1.5rem"><summary style="cursor:pointer;font-weight:600;font-size:1rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)">Research Log &mdash; ${log.verdict||'?'} (${log.toolCalls||'?'} tool calls, ${((log.elapsedMs||0)/1000).toFixed(1)}s)</summary><div style="padding:1rem;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:auto;max-height:600px"><pre style="font-family:var(--font-mono);font-size:.8rem;line-height:1.6;white-space:pre-wrap">${JSON.stringify(log,null,2)}</pre></div></details>`;
+      // Show verdict banner for non-reproduced results
+      if(log.verdict&&log.verdict!=='REPRODUCED'){
+        const colors={NOT_REPRODUCIBLE:{bg:'oklch(25% 0.08 25)',border:'oklch(40% 0.15 25)',icon:'✗'},INCONCLUSIVE:{bg:'oklch(25% 0.06 80)',border:'oklch(40% 0.12 80)',icon:'⚠'}};
+        const c=colors[log.verdict]||colors.INCONCLUSIVE;
+        html+=`<div style="margin-bottom:1.5rem;padding:1.25rem;background:${c.bg};border:1px solid ${c.border};border-radius:var(--r-lg)"><div style="font-size:1.25rem;font-weight:700;margin-bottom:.5rem">${c.icon} ${log.verdict.replace(/_/g,' ')}</div><div style="font-size:.9rem;line-height:1.6;opacity:.9">${(log.summary||'No details available.').replace(/</g,'&lt;')}</div>${log.evidence?`<div style="margin-top:.75rem;padding:.75rem;background:oklch(0% 0 0/.2);border-radius:var(--r);font-family:var(--font-mono);font-size:.8rem;white-space:pre-wrap;max-height:200px;overflow:auto">${log.evidence.replace(/</g,'&lt;')}</div>`:''}</div>`;
+      }
+      html+=`<details style="margin-bottom:1.5rem"><summary style="cursor:pointer;font-weight:600;font-size:1rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)">Research Log &mdash; ${log.verdict||'?'} (${(log.log||[]).length||'?'} tool calls, ${((log.elapsedMs||0)/1000).toFixed(1)}s)</summary><div style="padding:1rem;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:auto;max-height:600px"><pre style="font-family:var(--font-mono);font-size:.8rem;line-height:1.6;white-space:pre-wrap">${JSON.stringify(log,null,2)}</pre></div></details>`;
     }
     if(testRes.status==='fulfilled'&&testRes.value.ok){
       const code=await testRes.value.text();
@@ -115,7 +121,7 @@ function copyBadge(){const u=location.href.replace(/\/[^/]*$/,'/');const b=u+'ba
 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.playbackRate=1;
   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)};
@@ -127,7 +133,7 @@ document.querySelectorAll('.video-wrap video').forEach(v=>{
   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});
+  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===1)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

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