feat(website): finish the medium switcher — Render, Ship, and live tabs (#833)

Completes the switcher across all four homepage sections. Render and Ship gain
video and code tabs, and every section gains a Live tab that frames the real
demo opened on that section's own scenario.

Two new clips, recorded against aimock fixtures so a recut reproduces
frame-for-frame:

- Render — the agent emits a spec and a real contact form mounts as Angular
  components, `render_a2ui_surface` visible in the tool call.
- Ship — a rich markdown answer, then a page reload, and it all comes back.
  Durability was initially judged unwatchable; it is exactly watchable, and it
  is the claim that section makes.

The live tab uses `?featured=` (merged in #832) so each section opens the demo on
its own curated scenario instead of the same empty chat under four headings.

`section-media.spec.ts` gains the guard that matters here: it reads the DEMO's
actual suggestion list off disk and asserts every `live.featured` id exists
there. `?featured=` falls back silently for an unknown id, so a typo would
quietly turn a live tab back into the generic demo with nothing else failing.
Mutation-tested — a one-character typo fails with
`approve -> approve-before-a-destructiv: expected [...] to include`.

The active-pane-only guarantee holds at full scale, which was the spec's main
technical risk. The built homepage carries 4 tablists, **4** `<video>` elements
rather than 12, and **0** iframes — the live iframe is not requested until its
tab is selected. Verified in a browser too: clicking Live takes iframes 0 -> 1
and videos 5 -> 4 as the video pane unmounts.

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: blove

apps/website/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./../../dist/apps/website/.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/website/src/app/page.tsx

@@ -80,12 +80,43 @@ async function buildPanes(media: SectionMedia, clipUrl: string): Promise<MediumP
     });
   });
 
+  if (media.live) {
+    const mode = media.live.mode ?? 'embed';
+    panes.push({
+      id: 'live',
+      key: 'live',
+      label: 'Live',
+      content: (
+        <BrowserFrame url={clipUrl} elevation="lg">
+          <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
+            {/*
+              Mounted only when its tab is selected — `MediumSwitcher` renders
+              one pane at a time, so this iframe is never requested on page load.
+              `?featured=` opens the demo on this section's own scenario; the id
+              is a key into the demo's curated list, so an unknown one falls back
+              rather than rendering anything this URL supplies.
+            */}
+            <iframe
+              src={`https://demo.threadplane.ai/${mode}?featured=${encodeURIComponent(media.live.featured)}`}
+              title="Threadplane live demo"
+              loading="lazy"
+              style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+            />
+          </div>
+        </BrowserFrame>
+      ),
+    });
+  }
+
   return panes;
 }
 
 export default async function HomePage() {
-  const streamPanes = await buildPanes(SECTION_MEDIA.stream, SECTION_MEDIA.stream.video?.url ?? '');
-  const approvePanes = await buildPanes(SECTION_MEDIA.approve, SECTION_MEDIA.approve.video?.url ?? '');
+  const [streamPanes, renderPanes, shipPanes, approvePanes] = await Promise.all(
+    (['stream', 'render', 'ship', 'approve'] as const).map((key) =>
+      buildPanes(SECTION_MEDIA[key], SECTION_MEDIA[key].video?.url ?? ''),
+    ),
+  );
 
   return (
     <>
@@ -144,17 +175,7 @@ export default async function HomePage() {
         ]}
         cta={{ label: 'See @threadplane/render', href: '/render' }}
         visualLeft
-        visual={
-          <BrowserFrame url="cockpit.threadplane.ai" elevation="md">
-            <img
-              src="/screenshots/cockpit-api.webp"
-              alt="Cockpit reference app — API reference rendered as structured cards"
-              style={{ display: 'block', width: '100%', height: 'auto' }}
-              loading="lazy"
-              decoding="async"
-            />
-          </BrowserFrame>
-        }
+        visual={<MediumSwitcher sectionId="render" panes={renderPanes} />}
       />
 
       {/* Ship — the live demo */}
@@ -175,17 +196,7 @@ export default async function HomePage() {
           { title: 'thread persistence', description: 'Restore conversations across sessions.' },
         ]}
         cta={{ label: 'Production patterns', href: '/docs/langgraph/guides/deployment' }}
-        visual={
-          <BrowserFrame url="demo.threadplane.ai" elevation="lg">
-            <img
-              src="/screenshots/canonical-demo-generative-ui.webp"
-              alt="Threadplane chat rendering a live generative-UI dashboard"
-              style={{ display: 'block', width: '100%', height: 'auto' }}
-              loading="lazy"
-              decoding="async"
-            />
-          </BrowserFrame>
-        }
+        visual={<MediumSwitcher sectionId="ship" panes={shipPanes} />}
       />
 
       {/*

apps/website/src/lib/demo-media.ts

@@ -51,3 +51,31 @@ export const LANGGRAPH_CLIP: DemoClip = {
   videoWebm: `${DEMO_CDN}/langgraph-demo.webm`,
   poster: `${DEMO_CDN}/langgraph-demo-poster.webp`,
 };
+
+/**
+ * Generative UI: the agent emits a json-render spec and the demo mounts it as
+ * real Angular components. Recorded by
+ * `examples/chat/angular/e2e/record-render.record.ts`.
+ */
+export const RENDER_CLIP: DemoClip = {
+  caption:
+    'The agent emits a spec and your own components render it — this form is Angular, not a screenshot.',
+  url: 'demo.threadplane.ai',
+  videoMp4: `${DEMO_CDN}/render-demo.mp4`,
+  videoWebm: `${DEMO_CDN}/render-demo.webm`,
+  poster: `${DEMO_CDN}/render-demo-poster.webp`,
+};
+
+/**
+ * Durability: send a message, reload the page, and the conversation is still
+ * there — the thread lives in a checkpoint, not in component state. Recorded by
+ * `examples/chat/angular/e2e/record-ship.record.ts`.
+ */
+export const SHIP_CLIP: DemoClip = {
+  caption:
+    'Reload the page mid-conversation and nothing is lost — the thread is restored from its checkpoint.',
+  url: 'demo.threadplane.ai',
+  videoMp4: `${DEMO_CDN}/ship-demo.mp4`,
+  videoWebm: `${DEMO_CDN}/ship-demo.webm`,
+  poster: `${DEMO_CDN}/ship-demo-poster.webp`,
+};

apps/website/src/lib/section-media.spec.ts

@@ -1,4 +1,6 @@
 // SPDX-License-Identifier: MIT
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { describe, expect, it } from 'vitest';
 import { SECTION_MEDIA } from './section-media';
 import { DEMO_CDN } from './demo-media';
@@ -29,4 +31,24 @@ describe('SECTION_MEDIA', () => {
       }
     }
   });
+
+  it('points every live tab at a suggestion the demo actually has', () => {
+    // Cross-project on purpose. `?featured=` falls back silently for an id it
+    // does not recognise, so a typo here would quietly turn a live tab back
+    // into the generic empty demo — the exact thing the live tab exists to
+    // avoid — and nothing else would fail. Read the demo's real list rather
+    // than duplicating the ids, so renaming one there breaks this test instead
+    // of breaking the homepage in production.
+    const source = readFileSync(
+      join(__dirname, '../../../../examples/chat/angular/src/app/modes/welcome-suggestions.ts'),
+      'utf8',
+    );
+    const known = new Set(Array.from(source.matchAll(/id: '([^']+)'/g), (m) => m[1]));
+    expect(known.size).toBeGreaterThan(0);
+
+    for (const [key, media] of Object.entries(SECTION_MEDIA)) {
+      if (!media.live) continue;
+      expect(known, `${key} -> ${media.live.featured}`).toContain(media.live.featured);
+    }
+  });
 });

apps/website/src/lib/section-media.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-import { HITL_CLIP, LANGGRAPH_CLIP, type DemoClip } from './demo-media';
+import { HITL_CLIP, LANGGRAPH_CLIP, RENDER_CLIP, SHIP_CLIP, type DemoClip } from './demo-media';
 import type { SolutionCodeBlocks } from './solutions-data';
 
 /**
@@ -11,13 +11,22 @@ import type { SolutionCodeBlocks } from './solutions-data';
 export interface SectionMedia {
   video?: DemoClip;
   code?: SolutionCodeBlocks;
-  /** Phase 2. Declared now so the switcher's shape does not change later. */
-  live?: { prompt: string; mode?: 'embed' | 'popup' | 'sidebar' };
+  /**
+   * Opens the live demo on a curated scenario via `?featured=`.
+   *
+   * A KEY into `examples/chat`'s suggestion list, never free text — the demo
+   * falls back to its default for an id it does not recognise, so a link can
+   * never put arbitrary words inside the demo UI. Renaming a suggestion's id
+   * there breaks this link, which is why those ids are explicit rather than
+   * derived from labels.
+   */
+  live?: { featured: string; mode?: 'embed' | 'popup' | 'sidebar' };
 }
 
-export const SECTION_MEDIA: Record<'stream' | 'approve', SectionMedia> = {
+export const SECTION_MEDIA: Record<'stream' | 'render' | 'ship' | 'approve', SectionMedia> = {
   stream: {
     video: LANGGRAPH_CLIP,
+    live: { featured: 'tell-me-about-coral' },
     code: [
       {
         label: 'chat.component.ts — headless streaming',
@@ -36,8 +45,48 @@ export const SECTION_MEDIA: Record<'stream' | 'approve', SectionMedia> = {
       },
     ],
   },
+  render: {
+    video: RENDER_CLIP,
+    live: { featured: 'generative-ui-contact-form' },
+    code: [
+      {
+        label: 'dashboard.component.ts — the view catalog',
+        language: 'typescript',
+        source: `import { ChatComponent, views } from '@threadplane/chat';
+
+// Your components, keyed by the name the agent uses in its spec.
+const catalog = views({
+  contact_form: ContactFormComponent,
+  bar_chart: BarChartComponent,
+  kpi_card: KpiCardComponent,
+});
+
+// <chat [agent]="agent" [views]="catalog" />
+// ChatComponent detects a JSON spec in the AI message and renders it through
+// the catalog, mounting partial specs as they stream.`,
+      },
+    ],
+  },
+  ship: {
+    video: SHIP_CLIP,
+    live: { featured: 'tell-me-about-coral' },
+    code: [
+      {
+        label: 'app.config.ts — durable threads',
+        language: 'typescript',
+        source: `provideAgent(DEMO_AGENT, {
+  apiUrl: 'https://your-deployment.langgraph.app',
+  // The thread id is the durability boundary. Persist it (URL, storage,
+  // your own records) and the conversation survives a reload, a new tab,
+  // or a different device — the messages live in the checkpoint, not here.
+  threadId: signal(threadIdFromUrl()),
+});`,
+      },
+    ],
+  },
   approve: {
     video: HITL_CLIP,
+    live: { featured: 'approve-before-a-destructive' },
     code: [
       {
         label: 'approval.component.ts — the gate',

examples/chat/angular/e2e/record-render.record.ts

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: MIT
+/**
+ * Records generative UI for the website's Render section: the agent emits a
+ * json-render spec and the demo mounts it as real Angular components.
+ *
+ * NOT a test — `.record.ts`, which the e2e config's `**\/*.spec.ts` never picks
+ * up. Run with `record-demo.config.ts`, which boots the same aimock backend the
+ * e2e suite uses, so the take is deterministic and needs no API key.
+ *
+ * See apps/website/scripts/upload-demo-media.md for encoding and upload.
+ */
+import { test, expect } from '@playwright/test';
+import { openDemo } from './test-helpers';
+
+test.describe.configure({ retries: 0 });
+
+// VERBATIM from FEATURED_SUGGESTIONS[0] in modes/welcome-suggestions.ts, which
+// is also what the contact-form fixture matches. Reword it and the agent never
+// emits a spec, so there is nothing to record.
+const PROMPT =
+  'Show me a contact form with fields for name, email address, subject, and a ' +
+  'multi-line message, plus a Send button.';
+
+test('generative ui render', async ({ page }) => {
+  await openDemo(page, '/embed');
+  await page.waitForTimeout(1500);
+
+  const input = page.getByRole('textbox', { name: /type a message|message|prompt/i });
+  await input.click();
+  await input.pressSequentially(PROMPT, { delay: 26 });
+  await page.waitForTimeout(600);
+  await page.getByRole('button', { name: /send/i }).click();
+
+  // The spec streams in and mounts as components — the beat worth showing.
+  await expect(page.locator('chat-message[data-role="assistant"]')).toBeVisible({ timeout: 90_000 });
+  await page.waitForTimeout(6000);
+});

examples/chat/angular/e2e/record-ship.record.ts

@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: MIT
+/**
+ * Records durability for the website's Ship section: send a message, reload the
+ * page, and watch the conversation come back. The thread lives in a LangGraph
+ * checkpoint, not in component state, so a reload restores it rather than
+ * clearing it.
+ *
+ * NOT a test — `.record.ts`, which the e2e config's `**\/*.spec.ts` never picks
+ * up. Run with `record-demo.config.ts`.
+ *
+ * See apps/website/scripts/upload-demo-media.md for encoding and upload.
+ */
+import { test, expect } from '@playwright/test';
+import { openDemo } from './test-helpers';
+
+test.describe.configure({ retries: 0 });
+
+// Matches the markdown fixture — a response with enough structure that its
+// return after reload is unmistakable on camera.
+const PROMPT = 'respond with the markdown checklist kitchen sink';
+
+test('thread survives reload', async ({ page }) => {
+  await openDemo(page, '/embed');
+  await page.waitForTimeout(1200);
+
+  const input = page.getByRole('textbox', { name: /type a message|message|prompt/i });
+  await input.click();
+  await input.pressSequentially(PROMPT, { delay: 30 });
+  await page.waitForTimeout(400);
+  await page.getByRole('button', { name: /send/i }).click();
+
+  const assistant = page.locator('chat-message[data-role="assistant"]');
+  await expect(assistant).toBeVisible({ timeout: 90_000 });
+  await page.waitForTimeout(2500);
+
+  // The URL now carries the thread id. Reload it — this is the whole point.
+  await page.reload();
+
+  // Same content, restored from the checkpoint rather than re-sent.
+  await expect(assistant).toBeVisible({ timeout: 60_000 });
+  await page.waitForTimeout(3500);
+});