feat(demo): reorder demo slides to agent, viewer, cli

The Agent video is now the default opening slide; auto-advance cycles
Agent -> Viewer -> CLI. Update the demo-slides and DemoSection unit
tests for the new order and default tab.

Also fix the pre-existing-broken demo e2e: select the CLI tab to mount
the terminal player (no longer the default slide), match asciinema's
renamed theme class, and assert the mobile cast fits within the page
gutters without overflow.

Author: misonijnik

src/components/__tests__/DemoSection.test.tsx

@@ -26,16 +26,20 @@ afterEach(() => {
 });
 
 describe("DemoSection", () => {
-  it("renders three tabs with CLI selected by default", () => {
+  it("renders three tabs with Agent selected by default", () => {
     render(<DemoSection />);
     const tabs = screen.getAllByRole("tab");
-    expect(tabs.map((t) => t.textContent)).toEqual(["CLI", "Viewer", "Agent"]);
-    expect(screen.getByRole("tab", { name: "CLI" })).toHaveAttribute("aria-selected", "true");
+    expect(tabs.map((t) => t.textContent)).toEqual(["Agent", "Viewer", "CLI"]);
+    expect(screen.getByRole("tab", { name: "Agent" })).toHaveAttribute("aria-selected", "true");
   });
 
-  it("shows the terminal player on the default tab", () => {
+  it("plays the agent video with a stop control on the default tab", () => {
     render(<DemoSection />);
-    expect(screen.getByTestId("demo-hero-player")).toBeInTheDocument();
+    const video = screen.getByTestId("demo-agent-media");
+    expect(video).toBeInTheDocument();
+    // Direct mapping: a light page shows the light-named asset.
+    expect(video).toHaveAttribute("src", "/agent-video-light.mp4");
+    expect(screen.getByRole("button", { name: /pause demo/i })).toBeInTheDocument();
     expect(screen.queryByTestId("demo-viewer-media")).not.toBeInTheDocument();
   });
 
@@ -48,37 +52,35 @@ describe("DemoSection", () => {
     expect(media.closest("a")).toHaveAttribute("href", "https://viewer.opentaint.org/");
   });
 
-  it("switches to the agent slide and plays the agent video with a stop control", () => {
+  it("switches to the CLI slide and shows the terminal player", () => {
     render(<DemoSection />);
-    fireEvent.click(screen.getByRole("tab", { name: "Agent" }));
-    const video = screen.getByTestId("demo-agent-media");
-    expect(video).toBeInTheDocument();
-    // Direct mapping: a light page shows the light-named asset.
-    expect(video).toHaveAttribute("src", "/agent-video-light.mp4");
-    expect(screen.getByRole("button", { name: /pause demo/i })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("tab", { name: "CLI" }));
+    expect(screen.getByRole("tab", { name: "CLI" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByTestId("demo-hero-player")).toBeInTheDocument();
+    expect(screen.queryByTestId("demo-agent-media")).not.toBeInTheDocument();
   });
 
   it("moves between tabs with the right arrow key", () => {
     render(<DemoSection />);
-    const cliTab = screen.getByRole("tab", { name: "CLI" });
-    cliTab.focus();
-    fireEvent.keyDown(cliTab, { key: "ArrowRight" });
+    const agentTab = screen.getByRole("tab", { name: "Agent" });
+    agentTab.focus();
+    fireEvent.keyDown(agentTab, { key: "ArrowRight" });
     expect(screen.getByRole("tab", { name: "Viewer" })).toHaveAttribute("aria-selected", "true");
   });
 
   it("wraps to the last tab when ArrowLeft is pressed on the first tab", () => {
     render(<DemoSection />);
-    const cliTab = screen.getByRole("tab", { name: "CLI" });
-    cliTab.focus();
-    fireEvent.keyDown(cliTab, { key: "ArrowLeft" });
-    expect(screen.getByRole("tab", { name: "Agent" })).toHaveAttribute("aria-selected", "true");
+    const agentTab = screen.getByRole("tab", { name: "Agent" });
+    agentTab.focus();
+    fireEvent.keyDown(agentTab, { key: "ArrowLeft" });
+    expect(screen.getByRole("tab", { name: "CLI" })).toHaveAttribute("aria-selected", "true");
   });
 
   it("moves DOM focus to the newly active tab on arrow navigation", () => {
     render(<DemoSection />);
-    const cliTab = screen.getByRole("tab", { name: "CLI" });
-    cliTab.focus();
-    fireEvent.keyDown(cliTab, { key: "ArrowRight" });
+    const agentTab = screen.getByRole("tab", { name: "Agent" });
+    agentTab.focus();
+    fireEvent.keyDown(agentTab, { key: "ArrowRight" });
     expect(screen.getByRole("tab", { name: "Viewer" })).toHaveFocus();
   });
 
@@ -136,11 +138,11 @@ describe("DemoSection", () => {
     vi.useFakeTimers();
     try {
       render(<DemoSection />);
-      fireEvent.click(screen.getByRole("tab", { name: "Agent" }));
+      fireEvent.click(screen.getByRole("tab", { name: "CLI" }));
       act(() => {
         vi.advanceTimersByTime(21000);
       });
-      expect(screen.getByRole("tab", { name: "Agent" })).toHaveAttribute("aria-selected", "true");
+      expect(screen.getByRole("tab", { name: "CLI" })).toHaveAttribute("aria-selected", "true");
     } finally {
       vi.useRealTimers();
     }

src/components/__tests__/demo-slides.test.ts

@@ -2,8 +2,8 @@ import { describe, expect, it } from "vitest";
 import { DEMO_SLIDES } from "../demo-slides";
 
 describe("DEMO_SLIDES", () => {
-  it("lists terminal, viewer, agent in order", () => {
-    expect(DEMO_SLIDES.map((s) => s.id)).toEqual(["terminal", "viewer", "agent"]);
+  it("lists agent, viewer, terminal in order", () => {
+    expect(DEMO_SLIDES.map((s) => s.id)).toEqual(["agent", "viewer", "terminal"]);
   });
 
   it("gives the terminal slide the cast kind and no media sources", () => {

src/components/demo-slides.ts

@@ -23,9 +23,15 @@ export type DemoSlide = {
 // picks the source by page theme, so there is no inversion here.
 export const DEMO_SLIDES: DemoSlide[] = [
   {
-    id: "terminal",
-    label: "CLI",
-    kind: "terminal",
+    id: "agent",
+    label: "Agent",
+    kind: "video",
+    // The video plays inline; `fallback` doubles as the poster frame and the
+    // static image shown under prefers-reduced-motion.
+    sources: { light: "/agent-video-light.mp4", dark: "/agent-video-dark.mp4" },
+    fallback: { light: "/screen-light-3.png", dark: "/screen-dark-3.png" },
+    alt: "A coding agent running OpenTaint via the skill",
+    testId: "demo-agent-media",
   },
   {
     id: "viewer",
@@ -39,14 +45,8 @@ export const DEMO_SLIDES: DemoSlide[] = [
     href: "https://viewer.opentaint.org/",
   },
   {
-    id: "agent",
-    label: "Agent",
-    kind: "video",
-    // The video plays inline; `fallback` doubles as the poster frame and the
-    // static image shown under prefers-reduced-motion.
-    sources: { light: "/agent-video-light.mp4", dark: "/agent-video-dark.mp4" },
-    fallback: { light: "/screen-light-3.png", dark: "/screen-dark-3.png" },
-    alt: "A coding agent running OpenTaint via the skill",
-    testId: "demo-agent-media",
+    id: "terminal",
+    label: "CLI",
+    kind: "terminal",
   },
 ];

tests/demo.spec.ts

@@ -1,44 +1,63 @@
 import { expect, test } from "@playwright/test";
 
+// The CLI/terminal cast is no longer the default slide (the order is
+// Agent, Viewer, CLI), so each test selects the CLI tab to mount the player.
+const THEME_CLASS = /asciinema-player-theme-opentaint-(light|dark)/;
+
 test.describe("landing page demo section", () => {
   test("hero cast renders with a theme class", async ({ page }) => {
     await page.goto("/");
+    await page.getByRole("tab", { name: "CLI" }).click();
     const hero = page.getByTestId("demo-hero-player");
     await hero.scrollIntoViewIfNeeded();
     await expect(hero).toBeVisible();
-    const cls = (await hero.getAttribute("class")) ?? "";
-    expect(cls).toMatch(/ap-theme-opentaint-(light|dark)/);
+    // asciinema mounts inside the container and stamps the theme onto its player.
+    await expect(hero.locator(".ap-player")).toHaveClass(THEME_CLASS);
   });
 
   test("theme toggle swaps the scan panel wrapper class", async ({ page }) => {
     await page.goto("/");
+    await page.getByRole("tab", { name: "CLI" }).click();
     const hero = page.getByTestId("demo-hero-player");
     await hero.scrollIntoViewIfNeeded();
+    const player = hero.locator(".ap-player");
+    await expect(player).toHaveClass(THEME_CLASS);
 
-    const initial = (await hero.getAttribute("class")) ?? "";
-    const initialIsDark = initial.includes("ap-theme-opentaint-dark");
+    const initial = (await player.getAttribute("class")) ?? "";
+    const initialIsDark = initial.includes("asciinema-player-theme-opentaint-dark");
 
     await page.locator("[data-theme-toggle]").first().click();
 
     await expect
-      .poll(async () => (await hero.getAttribute("class")) ?? "")
+      .poll(async () => (await player.getAttribute("class")) ?? "")
       .toContain(
-        initialIsDark ? "ap-theme-opentaint-light" : "ap-theme-opentaint-dark",
+        initialIsDark
+          ? "asciinema-player-theme-opentaint-light"
+          : "asciinema-player-theme-opentaint-dark",
       );
   });
 
-  test("mobile layout shows the scan cast edge-to-edge", async ({ page }) => {
+  test("mobile layout fits the scan cast within the page without overflow", async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 812 });
     await page.goto("/");
+    await page.getByRole("tab", { name: "CLI" }).click();
 
     const hero = page.getByTestId("demo-hero-player");
     await hero.scrollIntoViewIfNeeded();
     await expect(hero).toBeVisible();
+    // Wait for the player to lay out before measuring its width.
+    await expect(hero.locator(".ap-player")).toHaveClass(THEME_CLASS);
 
     const viewportWidth = await page.evaluate(() => window.innerWidth);
 
-    const heroWidth = await hero.evaluate((el) => el.getBoundingClientRect().width);
-    expect(heroWidth).toBeGreaterThanOrEqual(viewportWidth - 1);
+    // The cast fills the content area symmetrically within the page gutters.
+    const { left, width } = await hero.evaluate((el) => {
+      const r = el.getBoundingClientRect();
+      return { left: r.left, width: r.width };
+    });
+    expect(left).toBeGreaterThan(0);
+    expect(left * 2 + width).toBeGreaterThanOrEqual(viewportWidth - 1);
+    expect(left * 2 + width).toBeLessThanOrEqual(viewportWidth + 1);
 
     const bodyScrollWidth = await page.evaluate(() => document.body.scrollWidth);
     expect(bodyScrollWidth).toBeLessThanOrEqual(viewportWidth + 1);