feat(website): homepage punch list — hero merge, FAQ copy, FeatureBlock rows everywhere (#897)

Hero's two noun rows merge into one linked capability row; the first FAQ
answer loses its litany; all five non-home pages migrate to FeatureBlock
rows (33 rows, claim→API grammar); the legacy bullets+cards path is
deleted and rows becomes required. Net -197 lines.

Squashed rebuild of the original commit series to shed an unsigned
api-docs bot commit that tripped required_signatures.

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

Author: blove

apps/website/src/app/ag-ui/page.tsx

@@ -59,16 +59,10 @@ export default async function AgUiPage() {
         eyebrow="Runtime choice"
         headline="Pick a backend. Keep the UI."
         body="The AG-UI protocol decouples your agent runtime from your front-end. @threadplane/ag-ui wraps any AG-UI AbstractAgent into the runtime-neutral Agent contract that @threadplane/chat consumes — so the same Angular components ship against eight different runtimes."
-        bullets={[
-          'Stream from Python, .NET, or TypeScript backends — same chat primitives',
-          'Swap runtimes without rewriting the UI layer',
-          'Protocol-first: tool calls, state deltas, citations all standardized',
-          'Future runtimes that ship AG-UI work day-one',
-        ]}
-        supportingCards={[
-          { title: 'LangGraph', description: 'Python or TS via AG-UI.' },
-          { title: 'Mastra', description: 'TypeScript-native.' },
-          { title: 'CrewAI / AG2', description: 'Multi-agent crews.' },
+        rows={[
+          { claim: 'Stream from Python, .NET, or TypeScript', api: 'AG-UI protocol' },
+          { claim: 'Tool calls, state deltas, citations — standardized', api: 'protocol events' },
+          { claim: 'New AG-UI runtimes work day one', api: 'no adapter needed' },
         ]}
         cta={{ label: 'Browse the AG-UI protocol', href: 'https://github.com/ag-ui-protocol/ag-ui' }}
         visual={<BackendsGrid />}
@@ -79,16 +73,10 @@ export default async function AgUiPage() {
         eyebrow="Same primitives"
         headline="Drop-in for everything @threadplane/chat ships."
         body="provideAgent registers an AG-UI client and exposes the same Agent contract that @threadplane/langgraph provides. Chat rendering, status, tool calls, generative UI, and citations use the same Angular primitives; durable checkpointed threads and history depend on the backend protocol, so use @threadplane/langgraph when you need the native LangGraph thread API."
-        bullets={[
-          'provideAgent + injectAgent — same names across adapters',
-          'Shared Agent contract: messages() / status() / reload()',
-          'Same A2UI surface, themes, and citations rendering',
-          'MockAgentTransport works the same way for tests',
-        ]}
-        supportingCards={[
-          { title: 'provideAgent', description: 'AG-UI wiring.' },
-          { title: 'injectAgent()', description: 'No-args helper.' },
-          { title: '@threadplane/chat', description: 'Same components.' },
+        rows={[
+          { claim: 'Same names across adapters', api: 'provideAgent + injectAgent' },
+          { claim: 'Same components, themes, citations', api: '@threadplane/chat' },
+          { claim: 'Same deterministic testing', api: 'MockAgentTransport' },
         ]}
         cta={{ label: 'API reference', href: '/docs/langgraph/api/inject-agent' }}
         visualLeft

apps/website/src/app/chat/page.tsx

@@ -51,16 +51,10 @@ export default async function ChatPage() {
         eyebrow="Compositions"
         headline="Opinionated shells, swappable parts."
         body="chat-timeline is a drop-in conversation surface that handles streaming, tool calls, interrupts, branching, and time-travel. chat-debug ships devtools alongside — tool-call inspector, message replay, thread history."
-        bullets={[
-          'chat-timeline — drop-in production surface',
-          'chat-debug — devtools alongside, ship-ready',
-          'Sidenav + history search palette',
-          'Themable via CSS vars or component overrides',
-        ]}
-        supportingCards={[
-          { title: 'chat-timeline', description: 'The conversation surface.' },
-          { title: 'chat-debug', description: 'Tool-call devtools.' },
-          { title: 'sidenav', description: 'Thread navigation.' },
+        rows={[
+          { claim: 'A drop-in production conversation surface', api: 'chat-timeline' },
+          { claim: 'Devtools beside it, ship-ready', api: 'chat-debug' },
+          { claim: 'Thread navigation and history search', api: 'sidenav + palette' },
         ]}
         cta={{ label: 'See @threadplane/chat docs', href: '/docs/chat/getting-started/introduction' }}
         visual={
@@ -90,16 +84,10 @@ export default async function ChatPage() {
         eyebrow="Headless"
         headline="Or skip the shell — use the primitives."
         body="If you have a design system, use the headless primitives directly. They're the same building blocks the compositions are made of — bring your own DOM, keep our state machine."
-        bullets={[
-          'Primitives stay unstyled',
-          'Bring your own design tokens',
-          'Compose with the streaming agent contract',
-          'No two-way coupling to the chat shell',
-        ]}
-        supportingCards={[
-          { title: 'message primitives', description: 'Streaming-aware atoms.' },
-          { title: 'tool primitives', description: 'Tool-call lifecycle.' },
-          { title: 'interrupt primitive', description: 'Approval gate.' },
+        rows={[
+          { claim: 'Unstyled primitives, your design tokens', api: 'message + tool primitives' },
+          { claim: 'The approval gate as a component', api: 'interrupt primitive' },
+          { claim: 'Composes against the streaming contract', api: 'Agent contract' },
         ]}
         cta={{ label: 'Headless API', href: '/docs/chat/api/provide-chat' }}
         visualLeft

apps/website/src/app/langgraph/page.tsx

@@ -52,16 +52,10 @@ export default async function LangGraphPage() {
         eyebrow="Providers"
         headline="Drop it into app.config.ts. Done."
         body="provideAgent wires LangGraph into Angular's DI container. From any component, injectAgent() returns a signal-based handle for messages, status, errors, and interrupts."
-        bullets={[
-          'provideAgent — wire it once in app.config.ts',
-          'injectAgent() returns a typed signal-based handle',
-          'OnPush tested',
-          'Test transports for deterministic specs',
-        ]}
-        supportingCards={[
-          { title: 'provideAgent', description: 'LangGraph wiring.' },
-          { title: 'injectAgent()', description: 'No-args helper.' },
-          { title: 'MockAgentTransport', description: 'Deterministic tests.' },
+        rows={[
+          { claim: 'Wire it once in app.config.ts', api: 'provideAgent' },
+          { claim: 'A typed, signal-based handle, no args', api: 'injectAgent()' },
+          { claim: 'Deterministic tests without a backend', api: 'MockAgentTransport' },
         ]}
         cta={{ label: 'API reference', href: '/docs/langgraph/api/inject-agent' }}
         visual={
@@ -94,16 +88,10 @@ export class ChatComponent {
         eyebrow="Signals"
         headline="Reactive without RxJS gymnastics."
         body="Every agent surface is exposed as a signal — message stream, tool progress, interrupts, errors, status. Compose with the rest of your Angular reactivity story. No subscriptions to leak."
-        bullets={[
-          'messages() / status() / error() / reload()',
-          'interrupt() for human-in-the-loop gates',
-          'Branch / history / time-travel built in',
-          'Computed signals integrate cleanly',
-        ]}
-        supportingCards={[
-          { title: 'messages()', description: 'Streaming message list.' },
-          { title: 'interrupt()', description: 'Approval-gate signal.' },
-          { title: 'reload()', description: 'Recover from errors.' },
+        rows={[
+          { claim: 'messages(), status(), error() — live signals', api: 'signal-native handle' },
+          { claim: 'Human-in-the-loop gates', api: 'interrupt()' },
+          { claim: 'Branch, history, time-travel built in', api: 'checkpoints' },
         ]}
         cta={{ label: 'Read the streaming guide', href: '/docs/langgraph/guides/streaming' }}
         visualLeft

apps/website/src/app/pilot-to-prod/page.tsx

@@ -52,16 +52,10 @@ export default function PilotToProdPage() {
         eyebrow="Week 1–2 · Discover"
         headline="Map your stack. Pick the work that earns its keep."
         body="We don't start with the model. We start with the workflow — the meeting where someone says 'this would be a great use of AI' and the friction that's stopping it from shipping."
-        bullets={[
-          'Audit existing Angular surfaces + agent-eligible workflows',
-          'Identify the 1–2 highest-leverage agents to build first',
-          'Lock down auth, data residency, observability constraints',
-          'Decide LangGraph vs AG-UI adapter strategy',
-        ]}
-        supportingCards={[
-          { title: 'Workshops', description: 'On-site or remote with your team.' },
-          { title: 'Stack audit', description: 'Existing Angular + backend review.' },
-          { title: 'Roadmap', description: 'Concrete scope for build phase.' },
+        rows={[
+          { claim: 'Audit your surfaces and agent-eligible workflows', api: 'stack audit' },
+          { claim: 'Pick the one or two agents that earn their keep', api: 'roadmap' },
+          { claim: 'Auth, residency, observability locked early', api: 'workshops' },
         ]}
         cta={{ label: 'See sample roadmap', href: '#whitepaper-block' }}
         visual={
@@ -93,16 +87,10 @@ export default function PilotToProdPage() {
         eyebrow="Week 3–5 · Build"
         headline="Ship a working agent on your real data."
         body="Working code, not slideware. We integrate against your real backend, your real auth, and your real Angular app — paired with your engineers, not behind a curtain."
-        bullets={[
-          'Real LangGraph or AG-UI backend (yours or ours, your call)',
-          'Streaming chat surface using @threadplane/chat compositions',
-          'Generative UI for the workflows that benefit from it',
-          'Daily syncs · weekly demo to stakeholders',
-        ]}
-        supportingCards={[
-          { title: 'Pair programming', description: 'Your engineers drive.' },
-          { title: 'Open repo', description: 'You own the source from day one.' },
-          { title: 'Weekly demo', description: 'Stakeholder transparency throughout.' },
+        rows={[
+          { claim: 'A working agent on your real data', api: 'your repo, your engineers' },
+          { claim: 'Streaming surface from the chat compositions', api: '@threadplane/chat' },
+          { claim: 'Weekly demos to stakeholders', api: 'open progress' },
         ]}
         cta={{ label: 'See @threadplane/chat', href: '/chat' }}
         visualLeft
@@ -125,17 +113,10 @@ export default function PilotToProdPage() {
         eyebrow="Week 6–7 · Harden"
         headline="Production-ready, not demo-ready."
         body="Observability, error boundaries, fallback strategies, deploy paths, on-call runbook. The stuff that makes the difference between a demo and an app you can leave running on a Friday afternoon."
-        bullets={[
-          'Observability — tracing, metrics, error budgets',
-          'Error/fallback strategy across every agent surface',
-          'CI/CD integration with your existing pipeline',
-          'Load + chaos testing patterns',
-          'On-call runbook handed to your team',
-        ]}
-        supportingCards={[
-          { title: 'Tracing', description: 'OpenTelemetry hooks.' },
-          { title: 'Fallback API', description: 'Per-component readiness.' },
-          { title: 'Runbook', description: 'Yours forever.' },
+        rows={[
+          { claim: 'Tracing, metrics, error budgets', api: 'OpenTelemetry hooks' },
+          { claim: 'Fallbacks across every agent surface', api: 'readiness + fallback' },
+          { claim: 'Load tested, on-call ready', api: 'runbook, yours' },
         ]}
         cta={{ label: 'Production patterns', href: '/docs/langgraph/guides/deployment' }}
         visual={

apps/website/src/app/render/page.tsx

@@ -49,16 +49,10 @@ export default async function RenderPage() {
         eyebrow="Schemas"
         headline="One spec. Your components."
         body="The agent emits structured UI as JSON. @threadplane/render maps each spec node to one of your Angular components — so the design system stays yours, and the agent gets to assemble it."
-        bullets={[
-          'Vercel json-render adapter',
-          'Google A2UI protocol',
-          'Component registry — declare once, use everywhere',
-          'Server schema, client validation',
-        ]}
-        supportingCards={[
-          { title: 'json-render', description: 'Vercel adapter.' },
-          { title: 'A2UI v1', description: 'Google A2UI protocol.' },
-          { title: 'registry', description: 'Spec → component.' },
+        rows={[
+          { claim: 'One spec, rendered by components you own', api: 'component registry' },
+          { claim: 'Both protocols spoken', api: 'json-render + A2UI' },
+          { claim: 'Schema on the server, validation in the client', api: 'validated specs' },
         ]}
         cta={{ label: 'See @threadplane/render docs', href: '/docs/render/getting-started/introduction' }}
         visual={
@@ -93,16 +87,10 @@ export default async function RenderPage() {
         eyebrow="Fallbacks"
         headline="Readiness gate + per-component fallback."
         body="When the agent emits a spec your registry doesn't know how to render, @threadplane/render falls back gracefully — and surfaces it to your observability layer. No mystery white screens."
-        bullets={[
-          'Per-component fallback API',
-          'Readiness gate holds renders until safe',
-          'Telemetry hook for render events',
-          'Streaming partial renders supported',
-        ]}
-        supportingCards={[
-          { title: 'fallback views', description: 'Per-component recovery.' },
-          { title: 'readiness gate', description: 'Hold until safe.' },
-          { title: 'render events', description: 'Telemetry surface.' },
+        rows={[
+          { claim: 'Unknown components degrade, not crash', api: 'fallback API' },
+          { claim: 'Renders hold until the surface is real', api: 'readiness gate' },
+          { claim: 'Partial renders while streaming', api: 'streaming specs' },
         ]}
         cta={{ label: 'Fallback patterns', href: '/docs/render/guides/registry' }}
         visualLeft

apps/website/src/components/landing/FeatureBlock.spec.tsx

@@ -24,21 +24,7 @@ describe('FeatureBlock', () => {
     expect(screen.getByText('Your design system, not a chat widget')).toBeTruthy();
     expect(screen.getByText('@threadplane/render')).toBeTruthy();
     expect(container.querySelector('.feature-block-card-row')).toBeNull();
-    expect(container.querySelector('.feature-block-bullets')).toBeNull();
+    expect(container.querySelectorAll('.feature-block-row')).toHaveLength(2);
     expect(container.querySelector('.feature-block-rail')).toBeTruthy();
   });
-
-  it('bullets variant (the five non-home pages) still renders bullets and cards', () => {
-    const { container } = render(
-      <FeatureBlock
-        {...base}
-        bullets={['First bullet', 'Second bullet']}
-        supportingCards={[{ title: 'chat-timeline', description: 'Drop-in surface.' }]}
-      />,
-    );
-    expect(screen.getByText('First bullet')).toBeTruthy();
-    expect(screen.getByText('chat-timeline')).toBeTruthy();
-    expect(container.querySelector('.feature-block-rows')).toBeNull();
-    expect(container.querySelector('.feature-block-rail')).toBeNull();
-  });
 });

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

@@ -3,7 +3,6 @@ import Link from 'next/link';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
-import { Card } from '../ui/Card';
 
 export interface FeatureRow {
   claim: string;
@@ -15,14 +14,10 @@ export interface FeatureBlockProps {
   headline: string;
   body: ReactNode;
   /**
-   * Rows structure (homepage, spec 2026-08-31): claim left, mono API right,
-   * in the Yes wall's row grammar. Renders the rail eyebrow and NO cards.
-   * Mutually exclusive with bullets/supportingCards.
+   * Rows structure: claim left, mono API right, in the Yes wall's row
+   * grammar. Renders the rail eyebrow.
    */
-  rows?: FeatureRow[];
-  /** Legacy structure — the five non-home consumers. */
-  bullets?: string[];
-  supportingCards?: { title: string; description: string }[];
+  rows: FeatureRow[];
   cta: { label: string; href: string };
   visual: ReactNode;
   /** If true, visual on the left; text on the right. Used to alternate sections. */
@@ -38,8 +33,6 @@ export function FeatureBlock({
   headline,
   body,
   rows,
-  bullets,
-  supportingCards,
   cta,
   visual,
   visualLeft = false,
@@ -53,55 +46,24 @@ export function FeatureBlock({
         <div className="feature-block-grid" data-visual-left={visualLeft || undefined}>
           {/* Text column */}
           <div className="feature-block-text">
-            {rows ? (
-              <div className="feature-block-rail">
-                <Eyebrow tone="accent" className="feature-block-eyebrow">{eyebrow}</Eyebrow>
-                <span className="feature-block-rail-line" aria-hidden="true" />
-              </div>
-            ) : (
+            <div className="feature-block-rail">
               <Eyebrow tone="accent" className="feature-block-eyebrow">{eyebrow}</Eyebrow>
-            )}
+              <span className="feature-block-rail-line" aria-hidden="true" />
+            </div>
             <h2 id={headingId} className="feature-block-heading">
               {headline}
             </h2>
             <p className="feature-block-body">
               {body}
             </p>
-            {rows ? (
-              <div className="feature-block-rows">
-                {rows.map((row) => (
-                  <div className="feature-block-row" key={row.claim}>
-                    <span className="feature-block-row-claim">{row.claim}</span>
-                    <span className="feature-block-row-api">{row.api}</span>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <>
-                <ul className="feature-block-bullets">
-                  {(bullets ?? []).map((b) => (
-                    <li key={b} className="feature-block-bullet">
-                      <span aria-hidden="true" className="feature-block-bullet-check">
-                        ✓
-                      </span>
-                      <span>{b}</span>
-                    </li>
-                  ))}
-                </ul>
-                <div className="feature-block-card-row">
-                  {(supportingCards ?? []).map((sc) => (
-                    <Card key={sc.title} padding="md" surface="tinted">
-                      <div className="feature-block-card-title">
-                        {sc.title}
-                      </div>
-                      <div className="feature-block-card-desc">
-                        {sc.description}
-                      </div>
-                    </Card>
-                  ))}
+            <div className="feature-block-rows">
+              {rows.map((row) => (
+                <div className="feature-block-row" key={row.claim}>
+                  <span className="feature-block-row-claim">{row.claim}</span>
+                  <span className="feature-block-row-api">{row.api}</span>
                 </div>
-              </>
-            )}
+              ))}
+            </div>
 
             <Link href={cta.href} className="feature-block-cta">
               {cta.label} →