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,31 +525,18 @@ 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 }) => {
-  // Show title card IMMEDIATELY — it covers the screen while setup runs behind it
-  await comfyPage.page.evaluate(([title, sub]: [string, string]) => {
-    const o = document.createElement('div')
-    o.id = 'qa-early-title'
-    o.style.cssText = 'position:fixed;inset:0;background:radial-gradient(ellipse at center,#1a1a3e,#0a0a1a);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2147483647'
-    const h = document.createElement('div')
-    h.textContent = title
-    h.style.cssText = "font-family:'Segoe UI',system-ui,sans-serif;font-size:48px;font-weight:800;color:#fff;text-align:center;max-width:80vw;line-height:1.2;text-shadow:0 2px 20px rgba(0,0,0,0.5)"
-    o.appendChild(h)
-    const s = document.createElement('div')
-    s.textContent = sub
-    s.style.cssText = "font-family:'Segoe UI',system-ui,sans-serif;font-size:22px;color:rgba(255,255,255,0.7);margin-top:16px;text-align:center"
-    o.appendChild(s)
-    document.body.appendChild(o)
-  }, ['Bug Title Here', 'Issue #NNNN'])
+  // 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 comfyPage.page.evaluate(() => document.getElementById('qa-early-title')?.remove())
+  await hideTitleCard(comfyPage.page)
 
   const script = createVideoScript()
     .title('Bug Title Here', { subtitle: 'Issue #NNNN', durationMs: 4000 })
@@ -588,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. Show an early title card via page.evaluate() BEFORE setup, then run setup behind it, remove it before createVideoScript() — see example
+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

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