feat: annotate() wraps each test step with TTS narration + subtitle

Uses demowright's annotate(page, text, callback) pattern to narrate
each "// Step N: ..." block while running the actions in parallel.
The viewer hears "Step 1: Save the workflow" while seeing the save
happen. Falls back to running the code directly if annotate fails.

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

scripts/qa-record.ts

@@ -1994,6 +1994,25 @@ async function main() {
             testCode =
               testCode.slice(0, pos) + narrationInject + testCode.slice(pos)
           }
+          // Inject step-by-step annotate() calls wrapping each code block
+          // annotate(page, text, callback) shows subtitle + speaks TTS + runs action in parallel
+          // This way narration explains what's happening AS it happens
+          //
+          // Pattern: find "// Step N: description" followed by code lines until next comment or }
+          // Wrap the code block in: annotate(page, "Step N: description", async () => { ...code... })
+          testCode = testCode.replace(
+            /(\n\s*)(\/\/\s*(?:Step \d+|── Step \d+)[^\n]*)\n([\s\S]*?)(?=\n\s*\/\/\s*(?:Step \d+|── Step \d+|BUG)|$)/g,
+            (fullMatch, indent, comment, codeBlock) => {
+              const stepText = comment
+                .replace(/^\/\/\s*(?:──\s*)?/, '')
+                .replace(/\s*──+\s*$/, '')
+                .replace(/'/g, "\\'")
+                .trim()
+              if (!codeBlock.trim()) return fullMatch
+              return `${indent}${comment}\n${indent}try { const { annotate: _a } = await import('demowright/helpers'); await _a(comfyPage.page, '${stepText}', async () => {${codeBlock}}); } catch(e) { console.warn('[qa-annotate]', e);${codeBlock}}\n`
+            }
+          )
+
           writeFileSync(videoTestFile, testCode)
 
           // Also save original test for the report