Rebuild demo pipeline and regenerate all GIFs

- Fix generate-demos.js to hide agents from both ~/.copilot and ~/.claude
- Fix streamer mode to set both on_air_mode and streamer_mode keys
- Add --file flag to generate-demos.js for running single tape files
- Add stale backup recovery for interrupted runs
- Add Framerate 10 setting to reduce GIF file sizes
- Bump short responseWait values (15s -> 25s) to prevent early cancellation
- Revert sample project to pre-feature state so demos work correctly
- Remove minimal-workflow-demo, add full-review-demo with agent selection
- Regenerate all 18 demo GIFs with Sonnet model

Author: DanWahlin

.github/scripts/create-tapes.js

@@ -19,8 +19,26 @@ const config = require('./demos.json');
 function generatePromptBlock(entry, defaultWait, index) {
   const text = typeof entry === 'string' ? entry : entry.text;
   const wait = (typeof entry === 'object' && entry.responseWait) || defaultWait;
+  const agentSelect = typeof entry === 'object' && entry.agentSelect;
   const label = index != null ? `Prompt ${index + 1}` : 'Execute the prompt';
 
+  // Agent selection: type /agent, wait for picker, arrow down to agent, select
+  if (agentSelect) {
+    const arrowDown = (typeof entry === 'object' && entry.arrowDown) || 0;
+    const arrowBlock = arrowDown > 0 ? `Down ${arrowDown}\nSleep 1s\n` : '';
+    return `# ${label} - Select ${agentSelect} agent
+Type "${text}"
+Sleep 1s
+Enter
+
+# Wait for agent picker
+Sleep 3s
+${arrowBlock}Enter
+
+# Wait for agent to load
+Sleep ${wait}s`;
+  }
+
   // If prompt ends with a file reference (@path), the file picker will be open.
   // Need an extra Enter to select the file before submitting the prompt.
   const endsWithFileRef = /@\S+$/.test(text);
@@ -63,6 +81,7 @@ Set Padding 20
 Set BorderRadius 8
 Set Margin 10
 Set MarginFill "#282a36"
+Set Framerate ${s.framerate}
 
 # Human typing speed
 Set TypingSpeed ${s.typingSpeed}

.github/scripts/demos.json

@@ -5,6 +5,7 @@
     "height": 600,
     "theme": "Dracula",
     "typingSpeed": "60ms",
+    "framerate": 10,
     "startupWait": 5,
     "responseWait": 25,
     "exitWait": 2
@@ -102,7 +103,7 @@
       "chapter": "05-skills",
       "name": "list-skills-demo",
       "description": "List available slash commands and skills",
-      "responseWait": 15,
+      "responseWait": 25,
       "prompt": "What slash commands and skills are available? List the main ones."
     },
     {
@@ -116,7 +117,7 @@
       "chapter": "06-mcp-servers",
       "name": "mcp-status-demo",
       "description": "Check connected MCP servers with /mcp show",
-      "responseWait": 15,
+      "responseWait": 25,
       "prompt": "/mcp show"
     },
     {
@@ -132,18 +133,17 @@
     {
       "chapter": "07-putting-it-together",
       "name": "full-review-demo",
-      "description": "Full project review prioritized by severity",
-      "responseWait": 50,
-      "prompt": "Review @samples/book-app-project/ for all code quality issues. Prioritize by severity."
-    },
-    {
-      "chapter": "07-putting-it-together",
-      "name": "minimal-workflow-demo",
-      "description": "Minimal workflow: explore, implement, test",
+      "description": "Idea to merged PR: plan, implement, test a new feature",
       "prompts": [
-        "@samples/book-app-project/books.py What methods already exist for filtering books?",
-        { "text": "Add a get_unread_books method to BookCollection that returns only books where read is False", "responseWait": 30 },
-        { "text": "@samples/book-app-project/books.py Generate pytest tests for the get_unread_books method", "responseWait": 30 }
+        { "text": "I need to add a 'list unread' command to the book app that shows only books where read is False. What files need to change?", "responseWait": 25 },
+        { "text": "/agent", "agentSelect": "python-reviewer", "arrowDown": 3, "responseWait": 3 },
+        { "text": "@samples/book-app-project/books.py Design a get_unread_books method. What is the best approach?", "responseWait": 30 },
+        { "text": "/agent", "agentSelect": "pytest-helper", "arrowDown": 2, "responseWait": 3 },
+        { "text": "@samples/book-app-project/tests/test_books.py Design test cases for filtering unread books.", "responseWait": 30 },
+        { "text": "Add a get_unread_books method to BookCollection in books.py. Add a 'list unread' command option in book_app.py. Update the help text in the show_help function.", "responseWait": 30 },
+        { "text": "Generate comprehensive tests for the new feature", "responseWait": 35 },
+        { "text": "/review", "responseWait": 25 },
+        { "text": "Create a pull request titled 'Feature: Add list unread books command'", "responseWait": 25 }
       ]
     }
   ]

.github/scripts/generate-demos.js

@@ -10,6 +10,7 @@
  *   npm run generate:vhs                          # all chapters, 5 concurrent
  *   npm run generate:vhs -- --chapter 03          # only chapter 03
  *   npm run generate:vhs -- --chapter 03 --chapter 05
+ *   npm run generate:vhs -- --file path/to/demo.tape  # single tape file
  *   npm run generate:vhs -- --concurrency 3       # limit to 3 at a time
  *
  * Requirements:
@@ -21,46 +22,97 @@ const { readdirSync, statSync, existsSync, readFileSync, renameSync, writeFileSy
 const { join, relative, dirname } = require('path');
 
 const rootDir = join(__dirname, '..', '..');
-const copilotConfigPath = join(require('os').homedir(), '.copilot', 'config.json');
-
-// Ensure on-air mode is enabled so recordings don't show model names or quota
-function enableOnAirMode() {
+const homeDir = require('os').homedir();
+const copilotConfigPath = join(homeDir, '.copilot', 'config.json');
+// Personal agents live in both ~/.copilot/agents and ~/.claude/agents
+const personalAgentsDirs = [
+  { dir: join(homeDir, '.copilot', 'agents'), backup: join(homeDir, '.copilot', 'agents.recording-bak') },
+  { dir: join(homeDir, '.claude', 'agents'), backup: join(homeDir, '.claude', 'agents.recording-bak') }
+];
+
+// Ensure streamer mode is enabled so recordings don't show model names or quota
+function enableStreamerMode() {
   try {
     const config = JSON.parse(readFileSync(copilotConfigPath, 'utf8'));
-    if (!config.on_air_mode) {
-      config.on_air_mode = true;
-      writeFileSync(copilotConfigPath, JSON.stringify(config, null, 2) + '\n');
-      console.log('🔴 On-air mode: enabled (was off)');
-      return false; // was off, we turned it on
-    }
-    console.log('🔴 On-air mode: already enabled');
-    return true; // was already on
+    const wasOn = config.streamer_mode || false;
+    config.streamer_mode = true;
+    delete config.on_air_mode;
+    writeFileSync(copilotConfigPath, JSON.stringify(config, null, 2) + '\n');
+    console.log(`🔴 Streamer mode: ${wasOn ? 'already enabled' : 'enabled'}`);
+    return { wasOn };
   } catch (e) {
-    console.warn('⚠ Could not read copilot config, on-air mode not verified');
+    console.warn('⚠ Could not read copilot config, streamer mode not verified');
     return null;
   }
 }
 
-// Restore on-air mode to its original state
-function restoreOnAirMode(wasAlreadyOn) {
-  if (wasAlreadyOn === false) {
+// Restore streamer mode to its original state
+function restoreStreamerMode(state) {
+  if (state && !state.wasOn) {
     try {
       const config = JSON.parse(readFileSync(copilotConfigPath, 'utf8'));
-      config.on_air_mode = false;
+      config.streamer_mode = false;
       writeFileSync(copilotConfigPath, JSON.stringify(config, null, 2) + '\n');
-      console.log('🔴 On-air mode: restored to off');
+      console.log('🔴 Streamer mode: restored to off');
     } catch (e) { /* ignore */ }
   }
 }
 
+// Hide personal agents so only course agents appear in /agent picker
+function hidePersonalAgents() {
+  const hidden = [];
+  for (const { dir, backup } of personalAgentsDirs) {
+    try {
+      // Restore stale backup from a previous interrupted run
+      if (!existsSync(dir) && existsSync(backup)) {
+        renameSync(backup, dir);
+        console.log(`👤 Restored stale backup: ${backup}`);
+      }
+      if (existsSync(dir)) {
+        renameSync(dir, backup);
+        hidden.push({ dir, backup });
+      }
+    } catch (e) {
+      console.warn(`⚠ Could not hide ${dir}:`, e.message);
+    }
+  }
+  if (hidden.length > 0) {
+    console.log(`👤 Personal agents: hidden (${hidden.length} location(s))`);
+  }
+  return hidden;
+}
+
+// Restore personal agents to their original locations
+function restorePersonalAgents(hidden) {
+  if (!hidden || hidden.length === 0) return;
+  for (const { dir, backup } of hidden) {
+    try {
+      if (existsSync(backup)) {
+        // Copilot may recreate the agents dir during recording - remove it first
+        if (existsSync(dir)) {
+          rmSync(dir, { recursive: true });
+        }
+        renameSync(backup, dir);
+      }
+    } catch (e) {
+      console.warn(`⚠ Could not restore ${dir}:`, e.message);
+      console.warn(`  Manual fix: mv "${backup}" "${dir}"`);
+    }
+  }
+  console.log(`👤 Personal agents: restored (${hidden.length} location(s))`);
+}
+
 // Parse CLI args
 const args = process.argv.slice(2);
 const chapters = [];
+const files = [];
 let concurrency = 5;
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--chapter' && args[i + 1]) {
     chapters.push(args[++i]);
+  } else if (args[i] === '--file' && args[i + 1]) {
+    files.push(args[++i]);
   } else if (args[i] === '--concurrency' && args[i + 1]) {
     concurrency = parseInt(args[++i], 10);
   }
@@ -136,26 +188,28 @@ function runVhs(tapeFile, wrappedPath) {
 
     exec(`vhs ${relativePath}`, {
       cwd: rootDir,
-      timeout: 180000,
+      timeout: 600000,
       env: { ...process.env, PATH: wrappedPath }
     }, (error) => {
       const elapsed = ((Date.now() - startTime) / 1000).toFixed(0);
 
-      if (error) {
-        console.log(`  ✗ ${relativePath} (${elapsed}s) - ${error.message}`);
-        resolve({ success: false, path: relativePath });
-        return;
-      }
-
-      // Move generated GIF to the images folder if it was created in root
+      // Always move GIF if it was created, even if VHS exited non-zero
+      let gifCreated = false;
       if (outputFilename) {
         const generatedPath = join(rootDir, outputFilename);
         const targetPath = join(imagesDir, outputFilename);
         if (existsSync(generatedPath) && generatedPath !== targetPath) {
           renameSync(generatedPath, targetPath);
+          gifCreated = true;
         }
       }
 
+      if (error && !gifCreated) {
+        console.log(`  ✗ ${relativePath} (${elapsed}s) - ${error.message}`);
+        resolve({ success: false, path: relativePath });
+        return;
+      }
+
       console.log(`  ✓ ${relativePath} (${elapsed}s)`);
       resolve({ success: true, path: relativePath });
     });
@@ -187,17 +241,33 @@ async function runWithConcurrency(tasks, limit) {
 async function main() {
   console.log('🎬 Generating course demos...\n');
 
-  if (chapters.length > 0) {
+  if (files.length > 0) {
+    console.log(`Files: ${files.join(', ')}`);
+  } else if (chapters.length > 0) {
     console.log(`Chapters: ${chapters.join(', ')}`);
   }
   console.log(`Concurrency: ${concurrency}`);
   console.log('');
 
-  // Enable on-air mode before recording
-  const wasAlreadyOn = enableOnAirMode();
+  // Enable streamer mode and hide personal agents before recording
+  const streamerState = enableStreamerMode();
+  const agentsWereHidden = hidePersonalAgents();
   console.log('');
 
-  const tapeFiles = findTapeFiles(rootDir, chapters);
+  // Resolve tape files: explicit --file paths take priority over chapter scan
+  let tapeFiles;
+  if (files.length > 0) {
+    const { resolve } = require('path');
+    tapeFiles = files.map(f => resolve(rootDir, f)).filter(f => {
+      if (!existsSync(f)) {
+        console.log(`  ⚠ File not found: ${f}`);
+        return false;
+      }
+      return true;
+    });
+  } else {
+    tapeFiles = findTapeFiles(rootDir, chapters);
+  }
 
   if (tapeFiles.length === 0) {
     console.log('No .tape files found');
@@ -222,7 +292,8 @@ async function main() {
   const results = await runWithConcurrency(tasks, concurrency);
 
   cleanupCopilotWrapper();
-  restoreOnAirMode(wasAlreadyOn);
+  restorePersonalAgents(agentsWereHidden);
+  restoreStreamerMode(streamerState);
 
   const succeeded = results.filter(r => r.success).length;
   const failedResults = results.filter(r => !r.success);
@@ -241,6 +312,7 @@ async function main() {
 main().catch(e => {
   console.error(e);
   cleanupCopilotWrapper();
-  restoreOnAirMode(false); // restore on-air to off on error
+  restorePersonalAgents(personalAgentsDirs); // always try to restore on error
+  restoreStreamerMode({ wasOn: false });
   process.exit(1);
 });

00-quick-start/images/hello-demo.gif

@@ -11,6 +11,7 @@ Set Padding 20
 Set BorderRadius 8
 Set Margin 10
 Set MarginFill "#282a36"
+Set Framerate 10
 
 # Human typing speed
 Set TypingSpeed 60ms

00-quick-start/images/hello-demo.tape

@@ -11,6 +11,7 @@ Set Padding 20
 Set BorderRadius 8
 Set Margin 10
 Set MarginFill "#282a36"
+Set Framerate 10
 
 # Human typing speed
 Set TypingSpeed 60ms

01-setup-and-first-steps/images/code-review-demo.gif

@@ -11,6 +11,7 @@ Set Padding 20
 Set BorderRadius 8
 Set Margin 10
 Set MarginFill "#282a36"
+Set Framerate 10
 
 # Human typing speed
 Set TypingSpeed 60ms