provideAgent wires the agent into DI;{' '}
- injectAgent() hands back signals — messages(), status(), error() — plus durable threads and tool progress.
+ injectAgent() hands back signals: messages(), status(), error(),
+ isLoading(), and tool progress. Nothing to subscribe to, nothing to tear down.
}
rows={[
{ claim: 'Signals, not promises', api: 'injectAgent()' },
- { claim: 'Threads that branch, resume, replay', api: 'threadId' },
- { claim: 'Same contract on LangGraph and AG-UI', api: 'runtime adapters' },
+ { claim: 'Tool progress as it happens', api: 'toolProgress()' },
+ { claim: 'Same contract on LangGraph and AG-UI', api: 'Agent' },
]}
cta={{ label: 'Read the streaming guide', href: '/docs/langgraph/guides/streaming' }}
visual={interrupt() freezes the run inside the checkpoint. Your UI renders the proposal;{' '}
- submit({'{ resume }'}) continues with the decision on the record.
+ interrupt() freezes the run inside the checkpoint. Your UI renders the
+ proposal; submit({'{ resume }'}) continues with the decision on the
+ record.
}
rows={[
@@ -126,15 +103,67 @@ export default async function HomePage() {
{ claim: 'The decision lands beside the action it gated', api: 'submit({ resume })' },
]}
cta={{ label: 'Interrupt patterns', href: '/docs/langgraph/guides/interrupts' }}
- visualLeft
visual={provideFakeAgent() streams canned tokens in-process; mock transports
+ script tool calls and interrupts. Your component specs stay deterministic and fast.
+
+ }
+ rows={[
+ { claim: 'No key, no server, no network', api: 'provideFakeAgent()' },
+ { claim: 'Script tool calls and interrupts', api: 'mockLangGraphAgent()' },
+ { claim: 'Same UI code in test and production', api: 'Agent' },
+ ]}
+ cta={{ label: 'Try without a backend', href: INSTALL_OPTIONS[0].quickstartHref }}
+ visual={{children}
,
+}));
+vi.mock('../ui/Section', () => ({
+ Section: ({ children }: { children: React.ReactNode }) => {heading}
, +})); +vi.mock('../ui/Button', () => ({ + Button: ({ + children, + href, + onClick, + }: { + children: React.ReactNode; + href?: string; + onClick?: () => void; + }) => + href ? ( + + {children} + + ) : ( + + ), +})); + +beforeEach(() => { + trackCtaClickMock.mockClear(); + writeTextMock.mockClear(); + Object.assign(navigator, { clipboard: { writeText: writeTextMock } }); +}); + +describe('CodingAgentQuickstart', () => { + it('renders the maintained prompt verbatim and the four links', async () => { + const { CodingAgentQuickstart } = await import('./CodingAgentQuickstart'); + render(
+ {CODING_AGENT_PROMPT}
+
+
+
+ {LINKS.map((link) => (
+
+ ))}
+
+ { if (e.target === e.currentTarget) onClose(); }}
- className="demo-modal"
- >
-
-
-
diff --git a/apps/website/src/components/landing/Hero.spec.tsx b/apps/website/src/components/landing/Hero.spec.tsx
index 1d0e55c0a..da79d15a2 100644
--- a/apps/website/src/components/landing/Hero.spec.tsx
+++ b/apps/website/src/components/landing/Hero.spec.tsx
@@ -1,14 +1,21 @@
// @vitest-environment jsdom
import React from 'react';
import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, within } from '@testing-library/react';
-import { HERO_CAPABILITIES, HERO_SUBHEAD } from '../../lib/positioning';
+import { render, screen, fireEvent } from '@testing-library/react';
+import {
+ HERO_EYEBROW,
+ HERO_H1,
+ HERO_SECONDARY_HREF,
+ HERO_SUBHEAD,
+ HERO_TRUST_LINE,
+} from '../../lib/positioning';
const trackMock = vi.hoisted(() => vi.fn());
-const writeTextMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const trackCtaClickMock = vi.hoisted(() => vi.fn());
vi.mock('../../lib/analytics/client', () => ({
track: trackMock,
+ trackCtaClick: trackCtaClickMock,
}));
// Stub design-system primitives — they don't import React (rely on Next's
@@ -34,75 +41,49 @@ vi.mock('../ui/Button', () => ({
),
}));
+vi.mock('./HeroDemo', () => ({ HeroDemo: () => }));
+vi.mock('./InstallDialog', () => ({
+ InstallDialog: ({ open }: { open: boolean }) => (open ? : null),
+}));
beforeEach(() => {
trackMock.mockClear();
- writeTextMock.mockClear();
- Object.assign(navigator, { clipboard: { writeText: writeTextMock } });
+ trackCtaClickMock.mockClear();
});
describe('Hero', () => {
- it('renders the locked H1, problem-first subhead, and capability chips', async () => {
+ it('renders the category eyebrow, H1, subhead and trust line from positioning', async () => {
const { Hero } = await import('./Hero');
render(
-
-
+
);
}
diff --git a/apps/website/src/components/landing/FinalCTA.spec.tsx b/apps/website/src/components/landing/FinalCTA.spec.tsx
index bcca68291..b0a4b4779 100644
--- a/apps/website/src/components/landing/FinalCTA.spec.tsx
+++ b/apps/website/src/components/landing/FinalCTA.spec.tsx
@@ -1,14 +1,17 @@
// @vitest-environment jsdom
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
import { FinalCTA } from './FinalCTA';
+const trackCtaClickMock = vi.hoisted(() => vi.fn());
vi.mock('../../lib/analytics/client', () => ({
track: vi.fn(),
- trackCtaClick: vi.fn(),
+ trackCtaClick: trackCtaClickMock,
trackExternalLinkClick: vi.fn(),
}));
+beforeEach(() => trackCtaClickMock.mockClear());
+
describe('FinalCTA', () => {
it('defaults to the tinted surface (used by 4 non-home pages)', () => {
const { container } = render(
+ {caption || captionLink ? (
+
- {tabs.map((t) => {
- const on = t.key === active;
- return (
-
- );
- })}
-
- {tab.url}
-
+
+
-
-
+
-
+
-
+ {tabs.map((t) => {
+ const on = t.key === active;
+ return (
+
+ );
+ })}
+ {tab.url}
+
- Esc or click outside to close · no signup
- trackExternalLinkClick(tab.href, { surface: 'home_demo', cta_id: `home_demo_full_${tab.key.replace(/-/g, '_')}`, cta_text: 'Open the full demo' })}
- className="demo-modal__open-link">Open the full demo ↗
-
+
+
+
+
+
- + {caption} + {captionLink ? ( + <> + {caption ? ' · ' : null} + {captionLink.label} + + ) : null} +
+ ) : null}
- {/* Left column */}
-
-
- Threadplane · Angular agent UI
-
-
-
- {/* Right column — generative UI dashboard */}
- - Ship production agent UIs in Angular. -
-- The streaming demo takes an afternoon.{' '} - - Everything after it takes six months. - {' '} - Threadplane is the Angular layer that closes the gap — and it{' '} - - keeps your backend exactly where it is. - -
--
- {HERO_CAPABILITIES.map((cap) => (
-
- - - track(analyticsEvents.marketingCtaClick, { - cta_id: 'hero_proof_pill', - track: 'developer', - surface: 'home', - }) - } - > - {cap.label} - - - ))} -
-
- - Not another backend agent runtime. Keep LangGraph, Genkit, Mastra, CrewAI, or your own service. Threadplane solves the Angular UI layer. -
-
+ ('poster');
+ const [visible, setVisible] = useState(false);
+ const [needsClick, setNeedsClick] = useState(false);
+ const rootRef = useRef(null);
+ const iframeRef = useRef(null);
+ const lastFrameState = useRef(null);
+
+ // Visibility.
+ useEffect(() => {
+ const el = rootRef.current;
+ if (!el || typeof IntersectionObserver === 'undefined') return;
+ const io = new IntersectionObserver((entries) => setVisible(entries.some((e) => e.isIntersecting)), {
+ threshold: 0.25,
+ });
+ io.observe(el);
+ return () => io.disconnect();
+ }, []);
+
+ // Decide whether to mount.
+ useEffect(() => {
+ if (!visible) return;
+ if (state !== 'poster' && state !== 'playRequested') return;
+ if (state === 'playRequested' || autoplayAllowed()) setState('mounting');
+ else setNeedsClick(true);
+ }, [visible, state]);
+
+ // Ready timeout → fallback.
+ useEffect(() => {
+ if (state !== 'mounting') return;
+ const t = setTimeout(() => setState((s) => (s === 'mounting' ? 'fallback' : s)), READY_TIMEOUT_MS);
+ return () => clearTimeout(t);
+ }, [state]);
+
+ // Frame → website messages.
+ useEffect(() => {
+ const onMessage = (e: MessageEvent) => {
+ if (e.origin !== HERO_DEMO_ORIGIN) return;
+ const d = e.data as { type?: string; state?: string } | null;
+ if (!d || d.type !== MESSAGE_TYPE || typeof d.state !== 'string') return;
+ if (d.state === 'ready') setState((s) => (s === 'mounting' || s === 'fallback' ? 'ready' : s));
+ if (d.state === lastFrameState.current) return;
+ lastFrameState.current = d.state;
+ if (d.state === 'live') trackCtaClick({ cta_id: 'hero_demo_takeover', track: 'developer', surface: 'home' });
+ if (d.state === 'replay') trackCtaClick({ cta_id: 'hero_demo_replay', track: 'developer', surface: 'home' });
+ };
+ window.addEventListener('message', onMessage);
+ return () => window.removeEventListener('message', onMessage);
+ }, []);
+
+ const mounted = state === 'mounting' || state === 'ready' || state === 'fallback';
+
+ // Website → frame visibility. Posted whenever the iframe is mounted — while
+ // mounting, once ready, and after the ready timeout has already dropped us
+ // into `fallback` (and again on the iframe's load event) — so a frame whose
+ // referrer was stripped can learn our origin from this message and replay
+ // its `ready` state to us late.
+ useEffect(() => {
+ if (!mounted) return;
+ iframeRef.current?.contentWindow?.postMessage({ type: MESSAGE_TYPE, visible }, HERO_DEMO_ORIGIN);
+ }, [visible, mounted]);
+
+ const play = useCallback(() => {
+ trackCtaClick({ cta_id: 'hero_demo_play', track: 'developer', surface: 'home' });
+ setNeedsClick(false);
+ setState('playRequested');
+ }, []);
+
+ return (
+
+ {HERO_EYEBROW}
+
+ {HERO_H1}
+{HERO_SUBHEAD}
+ +
- {HERO_TRUST_LINE}
{children}
,
+}));
+
+type IOCallback = (entries: { isIntersecting: boolean }[]) => void;
+let ioCallback: IOCallback | null = null;
+
+function installEnv({ width = 1280, reduced = false }: { width?: number; reduced?: boolean } = {}) {
+ Object.defineProperty(window, 'innerWidth', { value: width, configurable: true });
+ window.matchMedia = vi.fn().mockImplementation((q: string) => ({
+ matches: q.includes('reduce') ? reduced : false,
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ media: q,
+ onchange: null,
+ addListener: vi.fn(),
+ removeListener: vi.fn(),
+ dispatchEvent: vi.fn(),
+ }));
+ class IO {
+ constructor(cb: IOCallback) {
+ ioCallback = cb;
+ }
+ observe() {
+ /* the test drives the callback directly */
+ }
+ unobserve() {
+ /* no-op */
+ }
+ disconnect() {
+ /* no-op */
+ }
+ }
+ (window as unknown as { IntersectionObserver: unknown }).IntersectionObserver = IO;
+}
+
+function frameReady(origin = 'https://demo.threadplane.ai') {
+ fireEvent(window, new MessageEvent('message', { origin, data: { type: 'tplane-hero', state: 'ready' } }));
+}
+
+/** Replace the jsdom iframe's `contentWindow` with a spy we can assert on. */
+function stubContentWindow(iframe: HTMLIFrameElement) {
+ const postMessage = vi.fn();
+ Object.defineProperty(iframe, 'contentWindow', { value: { postMessage }, configurable: true });
+ return postMessage;
+}
+
+beforeEach(() => {
+ vi.useFakeTimers();
+ ioCallback = null;
+ trackCtaClickMock.mockClear();
+});
+afterEach(() => {
+ vi.useRealTimers();
+});
+
+describe('HeroDemo', () => {
+ it('server-renders the poster eagerly with explicit dimensions and no iframe', async () => {
+ installEnv();
+ const { HeroDemo } = await import('./HeroDemo');
+ const { container } = render(
+
+
+ 
+ {mounted ? (
+