fix(website): final-review fix batch (#922)

* docs(website): final-review fix batch spec + rulings

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

* fix(website): final-review fix batch across all marketing surfaces

/ag-ui tells the truth (seven backends, spec-pinned to the grid); the
footer tagline loses the last sitewide litany; HomeFAQ joins the rail;
/render dedupes its fallback phrasing; FinalCTA's caption and doc comment
catch up to the shipped rules; Angular pills derive from the support
source; orphaned pricing CSS deleted; a tautological assertion dropped;
the pricing kicker unifies on Eyebrow. Rulings recorded in the spec.

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

---------

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

Author: blove

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import AgUiPage from './page';
+import { BACKENDS } from '../../components/landing/ag-ui/BackendsGrid';
 
 vi.mock('../../lib/analytics/client', () => ({
   track: vi.fn(),
@@ -13,6 +14,8 @@ describe('AgUiPage', () => {
   it('renders the package kicker, marker sweep, switcher, and dark closer', async () => {
     const ui = await AgUiPage();
     const { container } = render(ui);
+        // The H1/subtitle/body say "seven"; this pins the grid to that word.
+    expect(BACKENDS).toHaveLength(7);
     expect(screen.getByText('@threadplane/ag-ui · protocol adapter')).toBeTruthy();
     expect(container.querySelector('.marker-highlight')?.textContent).toBe('work the day they ship');
     expect(screen.getAllByRole('tablist').length).toBeGreaterThanOrEqual(1);

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

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { WEBSITE_SUPPORTED_ANGULAR_MAJORS } from '../../components/pricing/angular-support.mjs';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -34,10 +35,10 @@ export default async function AgUiPage() {
               <span className="lib-hero-rail-line" aria-hidden="true" />
             </div>
             <h1 id="ag-ui-hero-heading" className="ag-ui-page-h1">
-              One adapter. Eight backends.
+              One adapter. Seven backends.
             </h1>
             <p className="ag-ui-page-hero-subtitle">
-              Build the Angular UI once, on the AG-UI protocol — eight runtimes speak it today, and new ones <span className="marker-highlight">work the day they ship</span>. History and checkpoint behavior stays with your backend.
+              Build the Angular UI once, on the AG-UI protocol — seven runtimes speak it today, and new ones <span className="marker-highlight">work the day they ship</span>. History and checkpoint behavior stays with your backend.
             </p>
             <div className="ag-ui-page-hero-buttons">
               <Button variant="primary" size="lg" href="/docs/ag-ui/getting-started/quickstart">Get started</Button>
@@ -48,7 +49,7 @@ export default async function AgUiPage() {
             </p>
             <div className="ag-ui-page-hero-pills">
               <Pill variant="accent">MIT</Pill>
-              <Pill variant="angular">Angular 20–22</Pill>
+              <Pill variant="angular">{`Angular ${WEBSITE_SUPPORTED_ANGULAR_MAJORS[0]}–${WEBSITE_SUPPORTED_ANGULAR_MAJORS.at(-1)}`}</Pill>
               <Pill variant="neutral">AG-UI protocol</Pill>
             </div>
             <p className="ag-ui-page-langgraph-note">
@@ -66,7 +67,7 @@ export default async function AgUiPage() {
         id="backends"
         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."
+        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 seven different runtimes."
         rows={[
           { claim: 'Stream from Python, .NET, or TypeScript', api: 'AG-UI protocol' },
           { claim: 'Tool calls, state deltas, citations — standardized', api: 'protocol events' },

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

@@ -1,4 +1,5 @@
 import { Container } from '../../components/ui/Container';
+import { WEBSITE_SUPPORTED_ANGULAR_MAJORS } from '../../components/pricing/angular-support.mjs';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
 import { Button } from '../../components/ui/Button';
@@ -47,7 +48,7 @@ export default async function LangGraphPage() {
             </p>
             <div className="langgraph-page-hero-pills">
               <Pill variant="accent">MIT</Pill>
-              <Pill variant="angular">Angular 20–22</Pill>
+              <Pill variant="angular">{`Angular ${WEBSITE_SUPPORTED_ANGULAR_MAJORS[0]}–${WEBSITE_SUPPORTED_ANGULAR_MAJORS.at(-1)}`}</Pill>
               <Pill variant="neutral">LangGraph + AG-UI</Pill>
             </div>
           </div>

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

@@ -36,7 +36,7 @@ export default async function RenderPage() {
               Generative UI without a second framework.
             </h1>
             <p className="render-page-hero-subtitle">
-              Server-emitted JSON specs render into Angular <span className="marker-highlight">components you already own</span>. Vercel json-render and Google A2UI both supported. Per-component fallback, readiness gate, no surprises.
+              Server-emitted JSON specs render into Angular <span className="marker-highlight">components you already own</span>. Vercel json-render and Google A2UI both supported. Unknown specs degrade gracefully — no surprises.
             </p>
             <div className="render-page-hero-buttons">
               <Button variant="primary" size="lg" href="/docs/render/getting-started/introduction">Get started</Button>

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

@@ -23,7 +23,6 @@ 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.querySelectorAll('.feature-block-row')).toHaveLength(2);
     expect(container.querySelector('.feature-block-rail')).toBeTruthy();
   });

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

@@ -15,9 +15,9 @@ interface FinalCTAProps {
   /** Optional trailing caption. Defaults to licensing and telemetry line. Pass null to hide. */
   caption?: string | null;
   /**
-   * 'dark' renders on the dark band — homepage only, pairing with the Yes
-   * wall so the inverted treatment appears twice (spec: a lone dark band
-   * reads as arbitrary). All other pages keep the default tinted surface.
+   * 'dark' renders on the dark band. Rule (amended 2026-08-31): dark closes
+   * PRODUCT pages — the homepage (pairing with the Yes wall) and the four
+   * library pages. Commerce pages keep the default tinted surface.
    */
   variant?: 'default' | 'dark';
 }
@@ -29,7 +29,7 @@ export function FinalCTA({
   subtext = 'Install the framework, read the docs, and have a streaming chat in your app this afternoon.',
   primary = null,
   secondary = DEFAULT_SECONDARY,
-  caption = 'All packages are MIT · Production support available · App telemetry off by default',
+  caption = 'All packages are MIT · Production support available · Installation is inert',
   variant = 'default',
 }: FinalCTAProps = {}) {
   return (

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

@@ -39,9 +39,12 @@ export function HomeFAQ() {
     <Section surface="white" ariaLabelledBy="faq-heading">
       <Container>
         <div className="home-faq-intro">
-          <Eyebrow tone="accent" className="home-faq-eyebrow">
-            Questions
-          </Eyebrow>
+          <div className="home-faq-rail">
+            <Eyebrow tone="accent" className="home-faq-eyebrow">
+              Questions
+            </Eyebrow>
+            <span className="home-faq-rail-line" aria-hidden="true" />
+          </div>
           <h2 id="faq-heading" className="home-faq-heading">
             Frequently asked questions.
           </h2>

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

@@ -54,6 +54,9 @@ export const YES_WALL_GROUPS: readonly YesGroup[] = [
   },
 ];
 
+// NOTE: the SectionHeader aside says "Sixteen questions" in prose — update it
+// (and the spec's toBe(16)) together with any row change; the footer count
+// derives automatically.
 const TOTAL_QUESTIONS = YES_WALL_GROUPS.reduce((n, g) => n + g.rows.length, 0);
 
 export function YesWall() {

apps/website/src/components/landing/ag-ui/BackendsGrid.tsx

@@ -3,7 +3,10 @@ interface Backend {
   readonly note: string;
 }
 
-const BACKENDS: readonly Backend[] = [
+// Three copy sites on /ag-ui say "seven" — the page spec ties this list's
+// length to that word. Adding a runtime here fails that test until the copy
+// updates. Honest counts only.
+export const BACKENDS: readonly Backend[] = [
   { name: 'LangGraph', note: 'Python / TS' },
   { name: 'CrewAI', note: 'Python' },
   { name: 'Mastra', note: 'TypeScript' },

apps/website/src/components/pricing/PricingDetails.tsx

@@ -1,4 +1,5 @@
 import { TIERS, type TierSlug } from '../../../../../pricing/tiers.config';
+import { Eyebrow } from '../ui/Eyebrow';
 
 type ComparisonCells = Record<TierSlug, string>;
 
@@ -70,7 +71,7 @@ export function ArchitectureBoundary() {
     <div className="pricing-boundary">
       <div className="pricing-section-heading-wrap">
         <div className="pricing-section-rail">
-          <p className="pricing-section-kicker">What you are buying</p>
+          <Eyebrow tone="accent" className="pricing-section-kicker">What you are buying</Eyebrow>
           <span className="pricing-section-rail-line" aria-hidden="true" />
         </div>
         <h2 id="pricing-value-heading" className="pricing-section-heading">
@@ -121,7 +122,7 @@ export function PricingComparison() {
     <div className="pricing-comparison">
       <div className="pricing-section-heading-wrap">
         <div className="pricing-section-rail">
-          <p className="pricing-section-kicker">Full comparison</p>
+          <Eyebrow tone="accent" className="pricing-section-kicker">Full comparison</Eyebrow>
           <span className="pricing-section-rail-line" aria-hidden="true" />
         </div>
         <h2 id="pricing-comparison-heading" className="pricing-section-heading">