feat(website): give each solutions page real code, and split the duplicated proof point (#830)

* feat(website): link Brian's X and LinkedIn profiles from the Person node

`sameAs` is how a Person node resolves to a real-world identity, and answer
engines lean on it for entity disambiguation — the reason /about carries a
Person node at all. It listed only GitHub, so the strongest disambiguating
signals were missing.

Add the two profiles Brian already links publicly from brianflove.com, verified
against that page's raw HTML rather than a summary. (LinkedIn answers 999 to
automated requests; that is its anti-bot response, not a dead link.)

Keep the existing invariant intact: `sameAs` states only profiles the author
record actually names. Each handle is its own opt-in field, so one is never
synthesized from another — an author with a GitHub handle does not acquire an
invented X URL — and `personProfiles()` emits them in a stable order so the
JSON-LD does not churn between builds. A test covers exactly that case.

`twitter` was already declared on the Author interface and read by nothing;
populating it now feeds only `sameAs`.

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

* feat(website): give each solutions page real code, and split the duplicated proof point

Two findings from auditing `solutions-data.ts` against its own guardrail.

The guardrail demanded "real code" the data model could not hold. `SolutionConfig`
had no code field, the page rendered none, and the live pages contained zero
`<code>` or `<pre>` elements — the clause was unfulfillable, not merely unmet.
Add a required `code` field and a snippet per entry, each written against the
published API: `agent.history()`/`langGraphHistory()` for compliance,
`agent.interrupt()`/`submit({ resume })` for customer support,
`defineAngularRegistry()` + `<render-spec>` for analytics.

Highlighting uses Shiki directly rather than `rehype-pretty-code`, which only
runs over MDX; the theme matches `MdxRenderer` so a snippet here reads like one
in the docs. It runs in an async Server Component, so it costs the browser
nothing. The wrapper uses `overflow: hidden`, not `auto` — Shiki's `<pre>`
already scrolls, and nesting a second scroll container can show two scrollbars.

The overlap between `compliance` and `customer-support` was narrower than
reported: vocabulary overlap is 26% against a 20% control, and pain points,
titles, and CTAs are all distinct. The genuine duplicate was one proof point —
both used the marker `Required` for a human-approval claim that differed only in
synonyms. Both are rewritten to their own half: compliance to the audit record,
support to approver identity.

`solutions-data.spec.ts` now enforces mechanically what the header asks for in
prose: unique proof-point markers, real code, and — the important one — that no
two entries' snippets exercise the same API. That test earned its place: it
rejected the first draft of these snippets, where compliance and support both
called `interrupt()`, which is precisely the find-and-replace the guardrail
exists to prevent. Framework entry points (`injectAgent`, `computed`) are
excluded because they appear in any Angular snippet and say nothing about which
part of the stack is on show; the exclusion list is commented so it cannot be
quietly widened to hide a real clone.

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

* feat(website): expand the solutions code blocks to component + template

One five-line snippet per page showed the call but not the shape of the work.
Each entry now carries an ordered array of blocks — the component and the
template that drives it — because the Angular story is rarely one file.

Fixes two API errors in the first pass, both caught by checking the docs rather
than the rendered page:

- The analytics snippet called `agent.surface()?.spec`, which does not exist,
  and drove `<render-spec>` directly. The real generative-UI path is `views()`
  plus `<chat [views]>`; `ChatComponent` detects a JSON spec in the AI message
  and renders it through the catalog, streaming partial specs as they arrive.
  `defineAngularRegistry()` is for driving `<render-spec>` yourself — a
  different path, and the wrong one for a chat-based analytics surface.
- The support template rendered a bare `<chat />`; the component takes
  `[agent]`.

The API-surface test needed rewriting, not relaxing. Matching any `name(`
worked for five-line snippets and broke immediately at this size: two entries
both calling `filter()` says nothing about which part of the stack they show.
It now compares framework surface only — agent methods and package entry points
— which is what the guardrail actually cares about. Still mutation-tested:
pointing support's snippet at `agent.history()` fails with
`compliance vs customer-support exercise the same API`.

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

* feat(website): show the HITL approval clip on the solutions pages it applies to

Adds the recorded human-in-the-loop loop after the code section: an agent
proposing to delete old backups, the graph pausing, and nothing running until a
human approves.

`demo` is optional on purpose, and must stay optional. The clip shows an
approval gate, so it goes on `compliance` and `customer-support` and NOT on
`analytics`, which has no approval story — the same footage under a heading it
does not illustrate is exactly the padding this file's header warns about. A
test pins the placement rather than trusting the next editor to remember.

`SolutionDemoBlock` is deliberately not the homepage `DemoShowcase`. That one is
a tabbed switcher with a play overlay opening the live demo in a modal, and
neither fits: there is one clip and no second runtime to switch between, and the
live demo opens on an empty thread rather than on this flow, so a "Launch live
demo" button would promise something the destination does not deliver. A plain
link under the frame says the same thing without the false promise. No client JS
— autoplay/muted/loop/playsInline is the whole behaviour.

`DEMO_CDN` moves to `lib/demo-media.ts` and `DemoShowcase` now imports it. It
was previously a private constant there, so the solutions pages would have
needed a second copy that silently drifts the next time the store moves.

The recording scripts are committed alongside, so a recut is one command instead
of rediscovery. They are `.record.ts`, which the e2e `testMatch` never picks up,
so they cannot run in CI. Both document the trap that cost me a take: aimock
matches the EXACT user message, so rewording the prompt means the agent never
calls request_approval, the graph never pauses, and there is nothing to record.

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

* feat(website): add an Approve section to the homepage, showing the HITL clip

The homepage claimed human-in-the-loop without ever showing it: the
Differentiator table lists "Resumable interrupts" as a production-readiness
dimension and the Stream block mentions interrupts in passing, but every
FeatureBlock visual is a static screenshot and none of them is an approval
claim. The strongest thing the recorded clip proves was asserted in a table row
and never evidenced.

A fourth FeatureBlock follows the established pattern and is the only placement
whose heading the clip actually illustrates — the same rule the solutions pages
follow. `visualLeft` continues the alternation after Ship.

Two placements considered and rejected. A third tab in `DemoShowcase` would
break a deliberate framing: that section is "One chat UI. Two runtimes. Same
code" and its tabs are runtimes, so a capability tab makes the tablist
heterogeneous and weakens the comparison it exists to make. Swapping an existing
FeatureBlock's screenshot for the clip would put it under Stream, Render, or
Ship — none of which is an approval claim.

Reuses `HITL_CLIP`, so the homepage and the solutions pages cannot drift, and
stays a Server Component: autoplay/muted/loop/playsInline is the whole
behaviour.

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

* docs(spec): homepage medium switcher (video / code / live embed)

Design for letting one homepage section prove its claim three ways. Records two
decisions that constrain implementation: only the active pane may mount (four
autoplaying videos plus iframes on an already-long page is the main risk), and
the live tab needs a ?prompt= param in examples/chat or it degrades into the
same empty demo under four different headings.

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

---------

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

Author: blove

.gitignore

@@ -70,3 +70,6 @@ examples/chat/angular/src/environments/generated-keys.local.ts
 
 # Local service-account keys (GSC, etc). Never commit these.
 keys/
+
+# Playwright demo-recording output (large binaries; see apps/website/scripts/upload-demo-media.md)
+**/.record-output/

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 { HITL_CLIP } from '../lib/demo-media';
 import { DemoShowcase } from '../components/landing/DemoShowcase';
 import { PilotBlock } from '../components/landing/PilotBlock';
 import { WhitePaperBlock } from '../components/landing/WhitePaperBlock';
@@ -134,6 +135,58 @@ export default async function HomePage() {
         }
       />
 
+      {/*
+        The homepage claims human-in-the-loop in the Differentiator table and
+        mentions interrupts in the Stream block, but nothing here showed it.
+        This is the only section whose heading the approval clip actually
+        illustrates — the same rule the solutions pages follow.
+      */}
+      <FeatureBlock
+        id="approve"
+        eyebrow="Approve"
+        headline="Nothing irreversible happens without a human."
+        body={
+          <>
+            <code style={{ fontFamily: tokens.typography.fontMono }}>interrupt()</code> freezes the graph
+            mid-run and the pause lives in the checkpoint, not in component state. Your UI renders the
+            proposal, the human answers, and{' '}
+            <code style={{ fontFamily: tokens.typography.fontMono }}>submit({'{ resume }'})</code> continues
+            the run — with the decision written back beside the action it gated.
+          </>
+        }
+        bullets={[
+          'interrupt() pauses mid-run; submit({ resume }) continues it',
+          '<chat-interrupt-panel> renders the proposal',
+          'The pause is a checkpoint, not a modal',
+          'Decision and proposal land in one thread record',
+        ]}
+        supportingCards={[
+          { title: 'interrupt()', description: 'Freezes the graph before the action runs.' },
+          { title: 'resume', description: 'Carries the human decision back into the run.' },
+          { title: 'checkpoint', description: 'The pause survives; it is not UI state.' },
+        ]}
+        cta={{ label: 'Interrupt patterns', href: '/docs/langgraph/guides/interrupts' }}
+        visualLeft
+        visual={
+          <BrowserFrame url={HITL_CLIP.url} elevation="lg">
+            <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
+              <video
+                autoPlay
+                muted
+                loop
+                playsInline
+                poster={HITL_CLIP.poster}
+                aria-label={HITL_CLIP.caption}
+                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+              >
+                <source src={HITL_CLIP.videoWebm} type="video/webm" />
+                <source src={HITL_CLIP.videoMp4} type="video/mp4" />
+              </video>
+            </div>
+          </BrowserFrame>
+        }
+      />
+
       <PilotBlock />
       <WhitePaperBlock />
       <Promises />

apps/website/src/app/solutions/[slug]/page.tsx

@@ -10,6 +10,8 @@ import {
 } from '../../../lib/solutions-data';
 import { Container } from '../../../components/ui/Container';
 import { Section } from '../../../components/ui/Section';
+import { SolutionCodeBlock } from '../../../components/solutions/SolutionCodeBlock';
+import { SolutionDemoBlock } from '../../../components/solutions/SolutionDemoBlock';
 import { Eyebrow } from '../../../components/ui/Eyebrow';
 import { Button } from '../../../components/ui/Button';
 import { Pill } from '../../../components/ui/Pill';
@@ -333,6 +335,8 @@ export default async function SolutionPage({ params }: PageProps) {
       <PainPoints items={solution.painPoints} accent={solution.color} />
       <Architecture intro={solution.architectureIntro} layers={solution.architectureLayers} accent={solution.color} />
       <Capabilities items={solution.proofPoints} accent={solution.color} />
+      <SolutionCodeBlock code={solution.code} accent={solution.color} />
+      {solution.demo && <SolutionDemoBlock clip={solution.demo} accent={solution.color} />}
       <WhitePaperBlock />
       <FinalCTA
         headline={solution.ctaHeadline}

apps/website/src/components/landing/DemoShowcase.tsx

@@ -7,6 +7,7 @@ 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';
 
 type TabKey = (typeof DEMOS)[number]['key'];
 
@@ -20,11 +21,6 @@ interface DemoMedia {
   href: string;
 }
 
-// Demo media is hosted on Vercel Blob (store: ngaf-website-assets) rather than
-// committed to the repo — these clips are large binaries that would bloat git
-// history on every recut. Re-uploading with the same pathnames keeps these URLs
-// stable. See apps/website/scripts/upload-demo-media.md for the upload steps.
-const DEMO_CDN = 'https://elgkdaxpsvqcrns1.public.blob.vercel-storage.com/demo';
 
 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 },

apps/website/src/components/solutions/SolutionCodeBlock.tsx

@@ -0,0 +1,88 @@
+// SPDX-License-Identifier: MIT
+import { codeToHtml } from 'shiki';
+import { tokens } from '@threadplane/design-tokens';
+import { Container } from '../ui/Container';
+import { Section } from '../ui/Section';
+import { Eyebrow } from '../ui/Eyebrow';
+import type { SolutionCode, SolutionCodeBlocks } from '../../lib/solutions-data';
+
+/**
+ * The `code` block on a solutions page.
+ *
+ * Highlighted with Shiki directly rather than through `rehype-pretty-code`:
+ * that plugin only runs over MDX, and these pages are TSX. The theme matches
+ * `MdxRenderer`'s (`tokyo-night`) so a snippet here reads the same as one in
+ * the docs.
+ *
+ * This is an async Server Component, so highlighting happens at build time and
+ * ships no Shiki payload to the browser.
+ */
+async function highlight(block: SolutionCode) {
+  return codeToHtml(block.source, { lang: block.language, theme: 'tokyo-night' });
+}
+
+export async function SolutionCodeBlock({ code, accent }: { code: SolutionCodeBlocks; accent: string }) {
+  // Highlight every block up front: an async map inside JSX would give React
+  // promises to render rather than markup.
+  const rendered = await Promise.all(
+    code.map(async (block) => ({ ...block, html: await highlight(block) })),
+  );
+
+  return (
+    <Section surface="canvas" ariaLabelledBy="solution-code-heading">
+      <Container>
+        <div style={{ maxWidth: 820, margin: '0 auto' }}>
+          <Eyebrow style={{ color: accent, marginBottom: 12 }}>In practice</Eyebrow>
+          <h2
+            id="solution-code-heading"
+            style={{
+              fontFamily: tokens.typography.h2.family,
+              fontSize: tokens.typography.h2.size,
+              lineHeight: tokens.typography.h2.line,
+              fontWeight: 700,
+              color: tokens.colors.textPrimary,
+              margin: 0,
+              marginBottom: 12,
+              letterSpacing: '-0.015em',
+            }}
+          >
+            What it looks like in your codebase
+          </h2>
+          {rendered.map((block, index) => (
+            <div key={block.label} style={{ marginTop: index === 0 ? 0 : 24 }}>
+              <p
+                style={{
+                  fontFamily: tokens.typography.fontMono,
+                  fontSize: 12,
+                  fontWeight: 700,
+                  letterSpacing: '0.04em',
+                  color: tokens.colors.textMuted,
+                  margin: '0 0 10px',
+                }}
+              >
+                {block.label}
+              </p>
+          {/*
+            Shiki emits a complete <pre> that already carries its own background,
+            padding, and `overflow-x: auto`, so this wrapper owns only the frame.
+            `overflow: hidden` is what makes the radius clip that background — it
+            must not be `auto`, which would nest a second scroll container around
+            a element that already scrolls and can show two scrollbars.
+          */}
+              <div
+                className="solution-code"
+                style={{
+                  borderRadius: 12,
+                  overflow: 'hidden',
+                  border: `1px solid ${tokens.surfaces.border}`,
+                  fontSize: 14,
+                }}
+                dangerouslySetInnerHTML={{ __html: block.html }}
+              />
+            </div>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  );
+}

apps/website/src/components/solutions/SolutionDemoBlock.tsx

@@ -0,0 +1,101 @@
+// SPDX-License-Identifier: MIT
+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 type { DemoClip } from '../../lib/demo-media';
+
+/**
+ * A recorded clip on a solutions page, shown after the code.
+ *
+ * Deliberately NOT the homepage `DemoShowcase`: that one is a tabbed switcher
+ * with a play overlay that opens the live demo in a modal. Neither fits here —
+ * there is one clip and no second runtime to switch between, and the live demo
+ * opens on an empty thread rather than on the flow this clip is about, so a
+ * "Launch live demo" button would promise something the destination does not
+ * deliver. A link under the frame says the same thing honestly.
+ *
+ * No client JS: `autoPlay muted loop playsInline` is the whole behaviour, so
+ * this stays a Server Component.
+ */
+export function SolutionDemoBlock({ clip, accent }: { clip: DemoClip; accent: string }) {
+  return (
+    <Section surface="tinted" ariaLabelledBy="solution-demo-heading">
+      <Container>
+        <div style={{ maxWidth: 820, margin: '0 auto' }}>
+          <Eyebrow style={{ color: accent, marginBottom: 12 }}>See it running</Eyebrow>
+          <h2
+            id="solution-demo-heading"
+            style={{
+              fontFamily: tokens.typography.h2.family,
+              fontSize: tokens.typography.h2.size,
+              lineHeight: tokens.typography.h2.line,
+              fontWeight: 700,
+              color: tokens.colors.textPrimary,
+              margin: 0,
+              marginBottom: 12,
+              letterSpacing: '-0.015em',
+            }}
+          >
+            The approval gate, in the product
+          </h2>
+          <p
+            style={{
+              fontFamily: tokens.typography.bodyLg.family,
+              fontSize: tokens.typography.bodyLg.size,
+              lineHeight: tokens.typography.bodyLg.line,
+              color: tokens.colors.textSecondary,
+              margin: '0 0 20px',
+              maxWidth: '62ch',
+            }}
+          >
+            {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>
+
+          <p
+            style={{
+              fontFamily: tokens.typography.body.family,
+              fontSize: tokens.typography.body.size,
+              color: tokens.colors.textMuted,
+              margin: '14px 0 0',
+            }}
+          >
+            Recorded from the{' '}
+            <a
+              href="https://demo.threadplane.ai"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: tokens.colors.accent }}
+            >
+              live demo
+            </a>
+            , which you can drive yourself.
+          </p>
+        </div>
+      </Container>
+    </Section>
+  );
+}

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

@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: MIT
+/**
+ * Recorded demo clips, hosted on Vercel Blob (store `ngaf-website-assets`)
+ * rather than committed to the repo — they are large binaries that would bloat
+ * git history on every recut. Re-uploading with the same pathname keeps these
+ * URLs stable, so a recut needs no code change.
+ *
+ * Shared by the homepage `DemoShowcase` and the solutions pages so one base URL
+ * is stated once; a second copy would silently drift on the next store move.
+ *
+ * See apps/website/scripts/upload-demo-media.md for producing and uploading.
+ */
+export const DEMO_CDN = 'https://elgkdaxpsvqcrns1.public.blob.vercel-storage.com/demo';
+
+export interface DemoClip {
+  /** What the clip shows, for the caption under the frame. */
+  caption: string;
+  /** Faux address-bar text on the surrounding browser frame. */
+  url: string;
+  videoMp4: string;
+  videoWebm: string;
+  poster: string;
+}
+
+/**
+ * The human-in-the-loop approval loop, recorded on the canonical demo shell:
+ * an agent proposing to delete old backups, pausing for sign-off, and resuming
+ * once approved.
+ *
+ * Recorded by `examples/chat/angular/e2e/record-demo.record.ts` against aimock
+ * fixtures, so a recut is one command and reproduces frame-for-frame.
+ */
+export const HITL_CLIP: DemoClip = {
+  caption:
+    'The agent proposes a destructive action, the graph pauses, and nothing runs until a human approves it.',
+  url: 'demo.threadplane.ai',
+  videoMp4: `${DEMO_CDN}/hitl-demo.mp4`,
+  videoWebm: `${DEMO_CDN}/hitl-demo.webm`,
+  poster: `${DEMO_CDN}/hitl-demo-poster.webp`,
+};