Add E2E tests and demo video for Focus View example

- Add E2E test to load focus example and verify it schedules
- Add behavioral test: focus pattern reduces visible task labels
- Add Focus View Demo to demo-features.spec.js
- Narrative: large project → overwhelming Gantt → apply focus → clarity

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

Author: alanbld

playground/tests/demo-features.spec.js

@@ -266,3 +266,52 @@ milestone golive "Go Live" {
     await hideSubtitle(page);
     await page.waitForTimeout(1000);
 });
+
+(skipDemo ? test.skip : test)('Focus View Demo', async ({ page }) => {
+    await page.goto('/');
+    await waitForWasm(page);
+    await waitForEditor(page);
+    await injectSubtitleOverlay(page);
+
+    // SCENE 1: Introduction - Large project problem
+    await showSubtitle(page, 'Focus View: Cut Through the Noise (RFC-0006)', 3000);
+    await hideSubtitle(page);
+    await page.waitForTimeout(500);
+
+    // SCENE 2: Load large project
+    await showSubtitle(page, 'Large project with 20+ tasks across 4 streams', 2500);
+    await page.selectOption('#example-select', 'focus');
+    await page.waitForTimeout(500);
+    await hideSubtitle(page);
+    await page.waitForTimeout(500);
+
+    // SCENE 3: Show overwhelming Gantt
+    await clickSchedule(page);
+    await waitForSchedule(page);
+    await clickGanttTab(page);
+    await waitForGantt(page);
+
+    await showSubtitle(page, 'Full Gantt: hard to find what you need', 2500);
+    await hideSubtitle(page);
+    await page.waitForTimeout(1500);
+
+    // SCENE 4: Apply focus filter
+    await showSubtitle(page, 'Enter "backend" in the Focus field', 2000);
+    await page.fill('#focus-input', 'backend');
+    await hideSubtitle(page);
+    await page.waitForTimeout(500);
+
+    // SCENE 5: Re-schedule with focus
+    await clickSchedule(page);
+    await waitForSchedule(page);
+    await page.waitForTimeout(500);
+
+    await showSubtitle(page, 'Now showing only backend-related tasks', 2500);
+    await hideSubtitle(page);
+    await page.waitForTimeout(2000);
+
+    // SCENE 6: Finale
+    await showSubtitle(page, 'Focus on what matters, hide the rest', 2500);
+    await hideSubtitle(page);
+    await page.waitForTimeout(1000);
+});

playground/tests/e2e.spec.js

@@ -280,6 +280,57 @@ test.describe('Example Loading', () => {
         const status = await getStatusMessage(page);
         expect(status).toContain('Scheduled successfully');
     });
+
+    test('can load focus view example', async ({ page }) => {
+        await page.selectOption('#example-select', 'focus');
+        await page.waitForTimeout(500);
+
+        await clickSchedule(page);
+        await waitForSchedule(page);
+
+        const status = await getStatusMessage(page);
+        expect(status).toContain('Scheduled successfully');
+    });
+
+    test('focus example filters tasks when pattern applied', async ({ page }) => {
+        // Load the focus example (large project with multiple streams)
+        await page.selectOption('#example-select', 'focus');
+        // Wait for editor to update with the focus example content
+        await page.waitForFunction(() => {
+            const models = window.monaco?.editor?.getModels();
+            return models && models[0]?.getValue().includes('Enterprise Platform');
+        }, { timeout: 5000 });
+
+        // Schedule without focus
+        await clickSchedule(page);
+        await waitForSchedule(page);
+        await clickGanttTab(page);
+        await waitForGantt(page);
+
+        // Verify unfiltered view shows both backend and frontend tasks
+        const iframe = page.frameLocator('#gantt-output iframe');
+        const unfilteredHtml = await iframe.locator('body').innerHTML();
+        expect(unfilteredHtml).toContain('Backend'); // Has backend tasks
+        expect(unfilteredHtml).toContain('Frontend'); // Has frontend tasks
+
+        // Count text elements (task labels) in unfiltered view
+        const unfilteredLabels = (unfilteredHtml.match(/<text/g) || []).length;
+
+        // Apply focus pattern to filter to backend tasks only
+        await page.fill('#focus-input', 'backend');
+        await clickSchedule(page);
+        await waitForSchedule(page);
+        await waitForGantt(page);
+
+        // Verify filtered view has fewer task labels
+        const filteredHtml = await iframe.locator('body').innerHTML();
+        const filteredLabels = (filteredHtml.match(/<text/g) || []).length;
+
+        // Focus should reduce the number of visible task labels
+        expect(filteredLabels).toBeLessThan(unfilteredLabels);
+        // But should still show some content (not empty)
+        expect(filteredLabels).toBeGreaterThan(0);
+    });
 });
 
 test.describe('Resource Leveling', () => {