diff --git a/apps/website/src/components/landing/Differentiator.spec.tsx b/apps/website/src/components/landing/Differentiator.spec.tsx
new file mode 100644
index 000000000..c9734b948
--- /dev/null
+++ b/apps/website/src/components/landing/Differentiator.spec.tsx
@@ -0,0 +1,101 @@
+// SPDX-License-Identifier: MIT
+// @vitest-environment jsdom
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Differentiator } from './Differentiator';
+
+vi.mock('../../lib/analytics/client', () => ({
+ trackCtaClick: vi.fn(),
+ trackExternalLinkClick: vi.fn(),
+}));
+
+vi.mock('../ui/Container', () => ({
+ Container: ({ children }: { children: React.ReactNode }) =>
{children}
,
+}));
+vi.mock('../ui/Section', () => ({
+ Section: ({ children }: { children: React.ReactNode }) => {children},
+}));
+vi.mock('../ui/Eyebrow', () => ({
+ Eyebrow: ({ children }: { children: React.ReactNode }) => {children},
+}));
+vi.mock('@ngaf/design-tokens', () => ({
+ tokens: {
+ colors: {
+ accent: '#7c3aed',
+ textPrimary: '#111827',
+ textSecondary: '#6b7280',
+ textMuted: '#9ca3af',
+ },
+ surfaces: {
+ border: '#e5e7eb',
+ },
+ typography: {
+ h2: { family: 'sans-serif', size: '2rem', line: '1.2' },
+ bodyLg: { family: 'sans-serif', size: '1.125rem', line: '1.6' },
+ body: { family: 'sans-serif', size: '1rem', line: '1.5' },
+ fontMono: 'monospace',
+ },
+ },
+}));
+
+import { trackCtaClick } from '../../lib/analytics/client';
+
+const EXPECTED_NEEDS = [
+ 'Durable threads',
+ 'Resumable interrupts',
+ 'Tool calls as events',
+ 'Streaming state as signals',
+ 'Generative UI on your design system',
+ 'Recoverable errors',
+ 'Backend portability',
+ 'Angular-native',
+ 'Observability hooks',
+ 'MIT + self-hosted',
+];
+
+describe('Differentiator', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it('renders the section headline', () => {
+ render();
+ expect(
+ screen.getByRole('heading', {
+ level: 2,
+ name: 'Everything an Angular agent needs once the demo works.',
+ }),
+ ).toBeTruthy();
+ });
+
+ it('renders all 10 production-readiness rows', () => {
+ render();
+ for (const need of EXPECTED_NEEDS) {
+ expect(screen.getByText(need)).toBeTruthy();
+ }
+ });
+
+ it('renders the @ngaf/render primitive for the generative UI row', () => {
+ render();
+ expect(screen.getByText('@ngaf/render')).toBeTruthy();
+ });
+
+ it('links the footer CTA to /pilot-to-prod', () => {
+ render();
+ const link = screen.getByRole('link', { name: /Pilot to Prod/ });
+ expect(link.getAttribute('href')).toBe('/pilot-to-prod');
+ });
+
+ it('fires the home_why_pilot_to_prod CTA event when the footer link is clicked', () => {
+ render();
+ const link = screen.getByRole('link', { name: /Pilot to Prod/ });
+ fireEvent.click(link);
+ expect(trackCtaClick).toHaveBeenCalledWith({
+ surface: 'home',
+ destination_url: '/pilot-to-prod',
+ cta_id: 'home_why_pilot_to_prod',
+ cta_text: 'Pilot to Prod',
+ });
+ });
+});
diff --git a/apps/website/src/components/landing/Differentiator.tsx b/apps/website/src/components/landing/Differentiator.tsx
index f0e80bf35..e4f871062 100644
--- a/apps/website/src/components/landing/Differentiator.tsx
+++ b/apps/website/src/components/landing/Differentiator.tsx
@@ -1,61 +1,97 @@
-import type { ReactNode } from 'react';
+'use client';
+
import { tokens } from '@ngaf/design-tokens';
import { Container } from '../ui/Container';
import { Section } from '../ui/Section';
import { Eyebrow } from '../ui/Eyebrow';
-import { Card } from '../ui/Card';
+import { trackCtaClick } from '../../lib/analytics/client';
-interface PositionCard {
- eyebrow: string;
- headline: string;
- body: ReactNode;
+interface ProductionRow {
+ need: string;
+ description: string;
+ primitive: string;
}
-const CARDS: PositionCard[] = [
+const PRODUCTION_ROWS: ProductionRow[] = [
+ {
+ need: 'Durable threads',
+ description: 'Persist across reloads, resume, branch, replay.',
+ primitive: 'threadId signal + durable transports',
+ },
+ {
+ need: 'Resumable interrupts',
+ description: 'Human-in-the-loop pause, resume token, retry, cancel.',
+ primitive: 'interrupt(), resume()',
+ },
+ {
+ need: 'Tool calls as events',
+ description: 'Stream progress, structured args, surfaced errors.',
+ primitive: 'tool events on agent()',
+ },
{
- eyebrow: 'Runtime layer',
- headline: 'One Angular contract for every agent runtime.',
- body: 'Wire LangGraph, AG-UI, CrewAI, Mastra, Pydantic AI, AWS Strands, or your own backend behind the same Angular primitives.',
+ need: 'Streaming state as signals',
+ description: 'messages(), status(), error() — not promises.',
+ primitive: 'signal-native agent()',
},
{
- eyebrow: 'Streaming state',
- headline: 'Messages, status, errors, and tools as signals.',
- body: (
- <>
- agent() exposes token streams, interrupts, tool progress, branch history,{' '}
- error(),{' '}
- status(), and{' '}
- reload().
-
- ),
+ need: 'Generative UI on your design system',
+ description: 'Vercel json-render + Google A2UI rendered into your Angular components.',
+ primitive: '@ngaf/render',
},
{
- eyebrow: 'Generative UI',
- headline: 'Agent output renders into your component system.',
- body: (
- <>
- Render Vercel json-render and Google A2UI specs into Angular components you already own.
-
- ),
+ need: 'Recoverable errors',
+ description: 'Retry, reload, error boundaries, fallback content.',
+ primitive: 'error(), reload()',
},
{
- eyebrow: 'Production surface',
- headline: 'The pieces that move a demo into production.',
- body: 'Fallbacks, reloads, persistence patterns, observability hooks, and MIT-licensed primitives you can own long term.',
+ need: 'Backend portability',
+ description: 'LangGraph today; AG-UI / Mastra / CrewAI / your own tomorrow — same UI.',
+ primitive: 'runtime adapters behind one contract',
+ },
+ {
+ need: 'Angular-native',
+ description: 'DI, signals, RxJS interop — no React rewrite.',
+ primitive: 'built on Angular primitives, not ported',
+ },
+ {
+ need: 'Observability hooks',
+ description: 'Tracing seams; app telemetry off by default.',
+ primitive: 'event hooks, opt-in only',
+ },
+ {
+ need: 'MIT + self-hosted',
+ description: 'Own the primitives long-term, no vendor lock-in.',
+ primitive: 'MIT-licensed, no runtime SaaS dependency',
},
];
+function CheckIcon() {
+ return (
+
+ );
+}
+
export function Differentiator() {
return (
- {/* Editorial top */}
Why this exists
- The fullstack agentic library for Angular.
+ Everything an Angular agent needs once the demo works.
- NGAF brings the pieces of an agentic product into one Angular-first SDK: runtime adapters, signal-native streaming, tool events, generative UI, and production patterns. It is built from real agent UI experience, not a thin integration layer.
+ A streaming chat tutorial takes an hour. Shipping a real agent — durable, interruptible, observable, on your design system — takes most teams six months. NGAF gives the Angular surface that the rest of the stack assumes you've already built.
+
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Type-check the file**
+
+Run: `npx nx typecheck website 2>&1 | tail -20`
+Expected: no errors referencing `Differentiator.tsx`. (Other unrelated typecheck output is fine; just confirm the file isn't in the error list.)
+
+If the project has no `typecheck` target, run: `npx tsc -p apps/website/tsconfig.json --noEmit 2>&1 | grep -i differentiator || echo "ok"`
+Expected: `ok`.
+
+- [ ] **Step 3: Visual check in dev server**
+
+The website-dev preview server should already be running (port 3000). If not, start it via the harness preview tool.
+
+Use `preview_eval` to reload, then `preview_resize` to 1280×820, then `preview_screenshot`. Verify:
+- Eyebrow "Why this exists" visible.
+- Headline reads exactly "Everything an Angular agent needs once the demo works."
+- 10 rows render, each with a check icon, bold need, muted description, mono primitive on the right.
+- Footer line "Want help walking these on your codebase? Pilot to Prod →" appears below the list.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/Differentiator.tsx
+git commit -m "$(cat <<'EOF'
+feat(website): rewrite "Why this exists" section as production-readiness checklist
+
+Replaces the 4-card differentiator grid with a 10-row checklist that dramatizes
+the demos→production gap. Each row pairs a production need with the concrete
+NGAF primitive that covers it. Footer hands off to /pilot-to-prod.
+
+See docs/superpowers/specs/2026-05-19-why-this-exists-section-design.md.
+
+Co-Authored-By: Claude Opus 4.7 (1M context)
+EOF
+)"
+```
+
+---
+
+## Task 2: Add Differentiator.spec.tsx
+
+**Files:**
+- Create: `apps/website/src/components/landing/Differentiator.spec.tsx`
+
+- [ ] **Step 1: Confirm sibling test convention**
+
+Run: `ls apps/website/src/components/landing/*.spec.tsx 2>/dev/null | head -3`
+Expected output may be empty (no landing specs yet) — that's fine; the test framework wiring still applies workspace-wide.
+
+Run: `grep -l "@testing-library/react" apps/website/package.json apps/website/vite.config.mts 2>/dev/null`
+Expected: at least one match (RTL is already a dep).
+
+If RTL is *not* present, stop and add it before continuing:
+```bash
+npx nx run website:install --pkg=@testing-library/react --dev
+```
+Expected: clean install. Then continue.
+
+- [ ] **Step 2: Write the failing test file**
+
+Create `apps/website/src/components/landing/Differentiator.spec.tsx`:
+
+```tsx
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Differentiator } from './Differentiator';
+
+vi.mock('../../lib/analytics/client', () => ({
+ trackCtaClick: vi.fn(),
+ trackExternalLinkClick: vi.fn(),
+}));
+
+import { trackCtaClick } from '../../lib/analytics/client';
+
+const EXPECTED_NEEDS = [
+ 'Durable threads',
+ 'Resumable interrupts',
+ 'Tool calls as events',
+ 'Streaming state as signals',
+ 'Generative UI on your design system',
+ 'Recoverable errors',
+ 'Backend portability',
+ 'Angular-native',
+ 'Observability hooks',
+ 'MIT + self-hosted',
+];
+
+describe('Differentiator', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it('renders the section headline', () => {
+ render();
+ expect(
+ screen.getByRole('heading', {
+ level: 2,
+ name: 'Everything an Angular agent needs once the demo works.',
+ }),
+ ).toBeTruthy();
+ });
+
+ it('renders all 10 production-readiness rows', () => {
+ render();
+ for (const need of EXPECTED_NEEDS) {
+ expect(screen.getByText(need)).toBeTruthy();
+ }
+ });
+
+ it('renders the @ngaf/render primitive for the generative UI row', () => {
+ render();
+ expect(screen.getByText('@ngaf/render')).toBeTruthy();
+ });
+
+ it('links the footer CTA to /pilot-to-prod', () => {
+ render();
+ const link = screen.getByRole('link', { name: /Pilot to Prod/ });
+ expect(link.getAttribute('href')).toBe('/pilot-to-prod');
+ });
+
+ it('fires the home_why_pilot_to_prod CTA event when the footer link is clicked', () => {
+ render();
+ const link = screen.getByRole('link', { name: /Pilot to Prod/ });
+ fireEvent.click(link);
+ expect(trackCtaClick).toHaveBeenCalledWith({
+ surface: 'home',
+ destination_url: '/pilot-to-prod',
+ cta_id: 'home_why_pilot_to_prod',
+ cta_text: 'Pilot to Prod',
+ });
+ });
+});
+```
+
+- [ ] **Step 3: Run the test — verify it passes**
+
+Run: `npx nx test website -- --run Differentiator 2>&1 | tail -30`
+
+Expected: 5 passing tests under `Differentiator`. Exit code 0.
+
+If a test fails with "trackCtaClick is not a function" or similar — the mock path is wrong; double-check the import path matches what `Differentiator.tsx` uses (`../../lib/analytics/client`).
+
+If a test fails with "cannot find @testing-library/react" — RTL isn't installed; add it per Step 1's fallback.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/Differentiator.spec.tsx
+git commit -m "$(cat <<'EOF'
+test(website): cover Differentiator rows, headline, and pilot-to-prod CTA
+
+Co-Authored-By: Claude Opus 4.7 (1M context)
+EOF
+)"
+```
+
+---
+
+## Task 3: Verification pass
+
+**Files:** none (verification only)
+
+- [ ] **Step 1: Run the website test suite**
+
+Run: `npx nx test website 2>&1 | tail -20`
+Expected: all tests pass. If a pre-existing failure surfaces unrelated to `Differentiator`, leave it — note it in the PR description but do not fix it as part of this plan.
+
+- [ ] **Step 2: Confirm the page still renders end-to-end**
+
+With the website-dev preview server running on port 3000, navigate to `/`. Use `preview_snapshot` and confirm:
+- Section h2 reads "Everything an Angular agent needs once the demo works."
+- 10 list items rendered.
+- Footer link present and points to `/pilot-to-prod`.
+
+- [ ] **Step 3: Capture a screenshot for the PR**
+
+Resize preview to 1280×820, scroll to the section (it sits below the "Works with your agent stack" matrix), and capture `preview_screenshot`. Save as `/tmp/why-this-exists-after.png` for inclusion in the PR description.
+
+- [ ] **Step 4: Update auto-memory if anything novel surfaced**
+
+If any non-obvious quirk turned up (e.g., the project required a special vitest config flag, or `tokens.colors.accent` had to be swapped for another token), capture it as a feedback memory in `~/.claude/projects/-Users-blove-repos-angular-agent-framework/memory/`.
+
+Otherwise skip.
+
+---
+
+## Self-review
+
+**Spec coverage:**
+- Wedge / GTM alignment — captured in commit message + spec reference. ✓
+- Eyebrow, headline, subhead — Task 1 Step 1, literal strings match spec. ✓
+- 10 rows with need / description / primitive — Task 1 Step 1; Task 2 covers all 10 needs by name. ✓
+- Compact rows with check icon, no card grid — Task 1 Step 1 (`
` with hairlines, inline `CheckIcon`). ✓
+- Mobile wrap (primitive below description on < 640) — Task 1 Step 1 `@media` block. ✓
+- Footer "Pilot to Prod" link + `home_why_pilot_to_prod` CTA event — Task 1 Step 1, Task 2 Step 2 (last test). ✓
+- Section position unchanged — file untouched at its callsite (still `Differentiator`). ✓
+- Spec file added — Task 2 (acceptance criterion #6 says to add it). ✓
+- Lighthouse a11y not regressed — check icon has `aria-hidden`; rest of section uses semantic `
- 
+