From 8db1d5baca0d7d6ddc018cbebf4767e615555e52 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Wed, 26 Aug 2026 13:34:57 -0700
Subject: [PATCH] refactor(website): one clip player, and give the showcase its
 aria-labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The same video markup had reached three call sites — `page.tsx`,
`DemoShowcase.tsx`, and `SolutionDemoBlock.tsx` — identical down to the inline
styles. `DemoClip` already gave them a common shape, so the duplication bought
nothing. `ClipPlayer` collapses all three, with an `overlay` slot for the one
caller that draws a launch button over the video.

Making `DemoShowcase` use it required its `DemoMedia` to satisfy `DemoClip`,
which surfaced a real gap the production type-check caught: those two clips had
no `caption`, so the showcase's `<video>` had been shipping with no accessible
name at all while every other clip on the page had one. Rather than invent
captions locally, the showcase now spreads `LANGGRAPH_CLIP` and a new
`AG_UI_CLIP` from `demo-media.ts`.

That also makes an earlier comment true. `LANGGRAPH_CLIP` claimed to exist so
the showcase and the switcher could not drift, but only the switcher consumed
it; the comment had to be corrected to admit the showcase still hardcoded its
own copies. Both now read from one place, so the original claim holds and the
caveat is gone.

Built homepage unchanged in shape — 5 tablists, 5 `<video>` (one active pane
per widget), 0 iframes — and every mounted video now carries its caption as an
`aria-label`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/website/src/app/page.tsx                 | 20 +------
 .../src/components/landing/DemoShowcase.tsx   | 29 ++++------
 .../solutions/SolutionDemoBlock.tsx           | 24 +-------
 apps/website/src/components/ui/ClipPlayer.tsx | 57 +++++++++++++++++++
 apps/website/src/lib/demo-media.ts            | 16 +++++-
 5 files changed, 86 insertions(+), 60 deletions(-)
 create mode 100644 apps/website/src/components/ui/ClipPlayer.tsx

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index f3fe052bf..28cd0e628 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -3,6 +3,7 @@ import { EcosystemStrip } from '../components/landing/EcosystemStrip';
 import { Differentiator } from '../components/landing/Differentiator';
 import { FeatureBlock } from '../components/landing/FeatureBlock';
 import { BrowserFrame } from '../components/ui/BrowserFrame';
+import { ClipPlayer } from '../components/ui/ClipPlayer';
 import { DemoShowcase } from '../components/landing/DemoShowcase';
 import { MediumSwitcher } from '../components/landing/MediumSwitcher';
 import type { MediumPane } from '../components/landing/MediumSwitcher';
@@ -45,24 +46,7 @@ async function buildPanes(media: SectionMedia, clipUrl: string): Promise<MediumP
       id: 'video',
       key: 'video',
       label: 'Video',
-      content: (
-        <BrowserFrame url={clipUrl} elevation="lg">
-          <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
-            <video
-              autoPlay
-              muted
-              loop
-              playsInline
-              poster={clip.poster}
-              aria-label={clip.caption}
-              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-            >
-              <source src={clip.videoWebm} type="video/webm" />
-              <source src={clip.videoMp4} type="video/mp4" />
-            </video>
-          </div>
-        </BrowserFrame>
-      ),
+      content: <ClipPlayer clip={clip} url={clipUrl} />,
     });
   }
 
diff --git a/apps/website/src/components/landing/DemoShowcase.tsx b/apps/website/src/components/landing/DemoShowcase.tsx
index 0c302052f..c7aaa6888 100644
--- a/apps/website/src/components/landing/DemoShowcase.tsx
+++ b/apps/website/src/components/landing/DemoShowcase.tsx
@@ -1,31 +1,28 @@
 'use client';
 import { useState } from 'react';
 import { tokens } from '@threadplane/design-tokens';
-import { BrowserFrame } from '../ui/BrowserFrame';
+import { ClipPlayer } from '../ui/ClipPlayer';
 import { TabGroup } from '../ui/TabGroup';
 import { Button } from '../ui/Button';
 import { DemoCtaPair } from './DemoCtaPair';
 import { DemoModal } from './DemoModal';
 import { trackCtaClick } from '../../lib/analytics/client';
 import { DEMOS } from '../../lib/demos';
-import { DEMO_CDN } from '../../lib/demo-media';
+import { AG_UI_CLIP, LANGGRAPH_CLIP, type DemoClip } from '../../lib/demo-media';
 
 type TabKey = (typeof DEMOS)[number]['key'];
 
-interface DemoMedia {
+/** A runtime tab: the shared clip plus how this section labels and links it. */
+interface DemoMedia extends DemoClip {
   key: TabKey;
   tabLabel: string;
-  url: string;
-  videoMp4: string;
-  videoWebm: string;
-  poster: string;
   href: string;
 }
 
 
 const MEDIA: DemoMedia[] = [
-  { key: 'langgraph', tabLabel: 'LangGraph', url: 'demo.threadplane.ai', videoMp4: `${DEMO_CDN}/langgraph-demo.mp4`, videoWebm: `${DEMO_CDN}/langgraph-demo.webm`, poster: `${DEMO_CDN}/langgraph-demo-poster.webp`, href: DEMOS.find((d) => d.key === 'langgraph')!.href },
-  { key: 'ag-ui', tabLabel: 'AG-UI', url: 'ag-ui.threadplane.ai', videoMp4: `${DEMO_CDN}/ag-ui-demo.mp4`, videoWebm: `${DEMO_CDN}/ag-ui-demo.webm`, poster: `${DEMO_CDN}/ag-ui-demo-poster.webp`, href: DEMOS.find((d) => d.key === 'ag-ui')!.href },
+  { ...LANGGRAPH_CLIP, key: 'langgraph', tabLabel: 'LangGraph', href: DEMOS.find((d) => d.key === 'langgraph')!.href },
+  { ...AG_UI_CLIP, key: 'ag-ui', tabLabel: 'AG-UI', href: DEMOS.find((d) => d.key === 'ag-ui')!.href },
 ];
 
 export function DemoShowcase() {
@@ -61,21 +58,17 @@ export function DemoShowcase() {
           id: m.key,
           label: m.tabLabel,
           content: (
-            <BrowserFrame url={m.url} elevation="lg">
-              <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
-                <video autoPlay muted loop playsInline poster={m.poster}
-                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
-                  <source src={m.videoWebm} type="video/webm" />
-                  <source src={m.videoMp4} type="video/mp4" />
-                </video>
+            <ClipPlayer
+              clip={m}
+              overlay={
                 <button onClick={() => launch(m)} aria-label={`Launch ${m.tabLabel} live demo`}
                   style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10,
                     background: 'linear-gradient(180deg, rgba(16,18,32,.15), rgba(16,18,32,.45))', border: 'none', cursor: 'pointer' }}>
                   <span style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(255,255,255,.95)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#15161f', fontSize: 22 }}>&#9654;</span>
                   <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13, color: '#fff', background: 'rgba(0,0,0,.5)', padding: '8px 14px', borderRadius: 8 }}>Launch live demo</span>
                 </button>
-              </div>
-            </BrowserFrame>
+              }
+            />
           ),
         }))}
         onSelect={(pane) => setActive(pane.id as TabKey)}
diff --git a/apps/website/src/components/solutions/SolutionDemoBlock.tsx b/apps/website/src/components/solutions/SolutionDemoBlock.tsx
index 3fbf1fe2a..85c803e96 100644
--- a/apps/website/src/components/solutions/SolutionDemoBlock.tsx
+++ b/apps/website/src/components/solutions/SolutionDemoBlock.tsx
@@ -3,7 +3,7 @@ import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
-import { BrowserFrame } from '../ui/BrowserFrame';
+import { ClipPlayer } from '../ui/ClipPlayer';
 import type { DemoClip } from '../../lib/demo-media';
 
 /**
@@ -53,27 +53,7 @@ export function SolutionDemoBlock({ clip, accent }: { clip: DemoClip; accent: st
             {clip.caption}
           </p>
 
-          <BrowserFrame url={clip.url} elevation="lg">
-            <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
-              {/*
-                Silent, decorative loop. `aria-label` rather than captions: there
-                is no audio track and no narration to caption, and the prose
-                above already states what the clip shows.
-              */}
-              <video
-                autoPlay
-                muted
-                loop
-                playsInline
-                poster={clip.poster}
-                aria-label={clip.caption}
-                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-              >
-                <source src={clip.videoWebm} type="video/webm" />
-                <source src={clip.videoMp4} type="video/mp4" />
-              </video>
-            </div>
-          </BrowserFrame>
+          <ClipPlayer clip={clip} />
 
           <p
             style={{
diff --git a/apps/website/src/components/ui/ClipPlayer.tsx b/apps/website/src/components/ui/ClipPlayer.tsx
new file mode 100644
index 000000000..1db1521e4
--- /dev/null
+++ b/apps/website/src/components/ui/ClipPlayer.tsx
@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: MIT
+import type { ReactNode } from 'react';
+import { BrowserFrame } from './BrowserFrame';
+import type { DemoClip } from '../../lib/demo-media';
+
+interface ClipPlayerProps {
+  clip: DemoClip;
+  /**
+   * Overlay drawn on top of the video — the homepage showcase puts its
+   * "Launch live demo" button here. Absent everywhere else.
+   */
+  overlay?: ReactNode;
+  /** Address-bar text, when it should differ from the clip's own. */
+  url?: string;
+}
+
+/**
+ * A recorded clip in a browser frame.
+ *
+ * Extracted after the same markup reached three call sites — the homepage
+ * sections, the homepage demo showcase, and the solutions pages — identical
+ * down to the inline styles. `DemoClip` already gave them a common shape, so
+ * the duplication bought nothing.
+ *
+ * Silent and decorative: no audio track, no narration, so `aria-label` carries
+ * the description and there is nothing for captions to caption. Callers mount
+ * this only when its pane is active, which is what keeps a page with several
+ * clips from fetching all of them at once.
+ */
+export function ClipPlayer({ clip, overlay, url }: ClipPlayerProps) {
+  return (
+    <BrowserFrame url={url ?? clip.url} elevation="lg">
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          aspectRatio: '16 / 10',
+          background: '#15161f',
+        }}
+      >
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          poster={clip.poster}
+          aria-label={clip.caption}
+          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+        >
+          <source src={clip.videoWebm} type="video/webm" />
+          <source src={clip.videoMp4} type="video/mp4" />
+        </video>
+        {overlay}
+      </div>
+    </BrowserFrame>
+  );
+}
diff --git a/apps/website/src/lib/demo-media.ts b/apps/website/src/lib/demo-media.ts
index 44fcd10a2..940aecc45 100644
--- a/apps/website/src/lib/demo-media.ts
+++ b/apps/website/src/lib/demo-media.ts
@@ -41,8 +41,8 @@ export const HITL_CLIP: DemoClip = {
 
 /**
  * The LangGraph streaming demo, recorded on the canonical demo shell. Exported
- * so the section switcher does not add another hardcoded copy of these URLs.
- * `DemoShowcase` still declares its own; consolidating it is tracked separately.
+ * Shared by the homepage showcase and the section switcher, so a recut or a
+ * store move changes one place rather than three.
  */
 export const LANGGRAPH_CLIP: DemoClip = {
   caption: 'Tokens stream into the Angular surface as the agent produces them.',
@@ -52,6 +52,18 @@ export const LANGGRAPH_CLIP: DemoClip = {
   poster: `${DEMO_CDN}/langgraph-demo-poster.webp`,
 };
 
+/**
+ * The AG-UI runtime demo. Paired with `LANGGRAPH_CLIP` so the homepage showcase
+ * can state "same front end, two runtimes" from one place.
+ */
+export const AG_UI_CLIP: DemoClip = {
+  caption: 'The same Threadplane chat surface, running against an AG-UI backend.',
+  url: 'ag-ui.threadplane.ai',
+  videoMp4: `${DEMO_CDN}/ag-ui-demo.mp4`,
+  videoWebm: `${DEMO_CDN}/ag-ui-demo.webm`,
+  poster: `${DEMO_CDN}/ag-ui-demo-poster.webp`,
+};
+
 /**
  * Generative UI: the agent emits a json-render spec and the demo mounts it as
  * real Angular components. Recorded by