You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat(website): add narrative sections, pilot-to-prod page, and rebrand integration (#29)
* fix(website): add track shake animation to ProblemSection stall phase
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* fix(website): ProblemSection quality fixes — timer cleanup, unique SVG ID, aria-hidden, correct import
- Store setTimeout IDs and clear them on unmount (prevents state updates on unmounted component)
- Use useId() to generate unique hatchId per instance (prevents SVG pattern id collision)
- Add role=progressbar + aria-valuenow to track container for screen readers
- Add aria-hidden=true to decorative animated elements (pins, labels, badge, counter)
- Fix import: use local lib/design-tokens instead of unresolved @cacheplane/design-tokens
- Add invariant comment for done-timeout vs counter-duration coupling
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add FullStackSection with animated stack diagram and roadmap strip
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add ChatFeaturesSection with 4 interactive chat scenarios
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add FairComparisonSection comparison table
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: wire ProblemSection, FullStackSection, ChatFeaturesSection, FairComparisonSection into landing page
- Insert ProblemSection + FullStackSection + ChatFeaturesSection after StatsStrip
- Insert FairComparisonSection after DeepAgentsShowcase
- Add two ambient gradient blobs for extended page height
- Task 5 (FeatureStrip copy): no-op — the problematic 'no established pattern' copy was not present in this branch
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* chore: add puppeteer devDependency and generate-whitepaper script
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add whitepaper signup API route with NDJSON persistence
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add whitepaper generation script
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add WhitePaperSection with free download and optional lead-gen form
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add WhitePaperSection to landing page; remove useStream parity copy from FeatureStrip
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* fix(whitepaper): add JetBrains Mono to Google Fonts URL and regenerate preview
Fixes missing code font in whitepaper output. Regenerates whitepaper-preview.html
with correct 'EB Garamond' and 'JetBrains Mono' font references throughout.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add PilotHero component and /pilot-to-prod page skeleton
* fix: PilotHero responsive padding, eyebrow style conflict, page metadata
* feat: add WhatIsIncluded 3-column component for pilot-to-prod page
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add HowItWorks 3-phase timeline for pilot-to-prod page
* feat: add PricingSignal pricing callout for pilot-to-prod page
* feat: add WhitePaperGate 5-field lead gen form for pilot-to-prod page
* fix: change role=alert to role=status to match aria-live=polite in WhitePaperGate
* feat: add PilotFooterCTA and wire complete pilot-to-prod page
* fix: use tokens.colors.accent in PilotFooterCTA, add aria-hidden to page blobs
* feat: add Pilot to Prod nav link and restructure homepage (remove FeatureStrip/CockpitCTA/CodeBlock, add PilotProgram CTA)
* fix: correct design-tokens import path in pilot-to-prod page (3 levels up)
* fix: apply full review findings — messaging, mobile, UX, and RiskRemoval section
- Remove useStream() parity messaging from HeroTwoCol, WhatIsIncluded, StatsStrip
- Fix PricingSignal: remove ambiguous '/year', clarify as fixed fee + pilot included
- Add PricingSignal mobile padding reduction via media query
- Fix ProblemSection stat grid to collapse on mobile (auto-fit minmax)
- Add RiskRemoval section to pilot-to-prod page (between PricingSignal and WhitePaperGate)
- Fix Nav Examples link: external=true, target=_blank, rel=noopener noreferrer
- Fix WhitePaperGate: role field sent in message body, not merged into company string
- Fix PilotFooterCTA: replace broken whileHover borderColor with CSS class hover
- Fix PilotHero: remove opacity from initial animations (prevents blank hero flash)
- Increase PilotHero CTA padding to meet 44px touch target
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* fix: remove remaining useStream parity messaging from layout, Footer, and ValueProps
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* fix: second review pass — docs messaging, title, broken link, a11y labels
- introduction.mdx: remove parity/useStream opening line, use Signal-native positioning
- AGENTS.md.template + CLAUDE.md.template: update tagline to Signal-native
- layout.tsx: update <title> from LangChain to LangGraph
- Footer.tsx: fix /api-reference → /docs/api/stream-resource (was 404)
- PilotHero.tsx: add aria-hidden to decorative gradient blobs
- WhitePaperSection.tsx: add sr-only labels + aria-label to name/email inputs
- LeadForm.tsx (pricing): add sr-only labels + aria-label to all four form inputs
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: add whitepaper.pdf to public directory
Generated from whitepaper-preview.html via Puppeteer. All 6 chapters
present (Streaming State Management, Thread Persistence, Tool-Call
Rendering, Human Approval Flows, Generative UI, Deterministic Testing).
Fixes dead 'Download the Guide' CTAs on pilot-to-prod and homepage.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: citation badges on stats, pricing reframe to app deployment license
Citation badges:
- New CitationBadge component — click-to-open popover with source, stat, note, and link
- 66% stat → Stack Overflow Developer Survey 2025
- 31% stat → ISG AI Adoption Reports
- 75% stat → Stack Overflow Developer Survey 2025
- Keyboard (Escape) and outside-click dismissal, ARIA dialog role
Pricing reframe (app deployment license):
- Remove ALL refund/money-back/guarantee language site-wide
- PilotHero: trust line → "App deployment license · $20,000 · 3-month co-pilot engagement"
- PilotHero: subheadline removes "guaranteed outcome"
- WhatIsIncluded: card 3 renamed from "Production Guarantee" → "App Deployment License"
- HowItWorks: phase 3 removes "full refund" language, deliverable → "Production deployment"
- PricingSignal: subtitle + features list updated to license/co-pilot framing
- RiskRemoval: section reframed from guarantee → "What's included in the license"
Replaces money-back card with "We work alongside your team" card
- PilotFooterCTA: fine print updated
- pilot-to-prod/page.tsx: meta description updated
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat: subtler citation badge + citations on all 77% claims
CitationBadge:
- Reduced to 13px, transparent background, faint border (rgba 0.2)
- Text color rgba(0,64,144,0.35) at rest — nearly invisible until hovered
- No fill on idle state, border-only approach
New citation placements:
- PilotHero subheadline: 77% → McKinsey State of AI 2024
- PilotFooterCTA body copy: 77% → McKinsey State of AI 2024
- HomePilotCTA (new component): extracts inline pilot CTA from page.tsx
so it can be a client component with CitationBadge on the 77% claim
- page.tsx: replaces inline section with <HomePilotCTA />
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* docs: add FullStackSection redesign spec (EM/CTO layer narrative + Gen UI bug fix)
* feat(website): redesign FullStackSection for EM/CTO audience
* docs: apply Angular Stream Resource rebrand to narrative components
* chore: sync package-lock.json after merge
* fix(website): update e2e test for new landing page structure
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Copy file name to clipboardExpand all lines: apps/website/content/docs-v2/getting-started/introduction.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Introduction
2
2
3
-
StreamResource brings full parity with React's `useStream()` hook to Angular 20+. Build streaming AI applications with Angular Signals, connect to LangGraph agents, and ship production-ready frontends for your AI products.
3
+
StreamResource is the Signal-native streaming library for Angular 20+ — built natively for LangGraph, without React translation layers. Build streaming AI applications with Angular Signals, connect to LangGraph agents, and ship production-ready frontends for your AI products.
4
4
5
5
<Callouttype="info"title="What you'll learn">
6
6
This guide walks you through the complete workflow: build a LangGraph agent in Python, run it locally, connect it to an Angular app with streamResource(), and deploy to production.
<divstyle="font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:#004090;font-weight:700;margin-bottom:24px">StreamResource · Production Readiness Guide</div>
<divstyle="margin-top:16px;padding:8px 14px;background:rgba(255,160,50,.12);border:1px solid rgba(255,160,50,.3);border-radius:6px;font-family:monospace;font-size:11px;color:#c47a00;display:inline-block">⚠ PREVIEW — placeholder content. Set ANTHROPIC_API_KEY and run npm run generate-whitepaper for real content.</div>
<h2style="font-family:'EB Garamond',serif;font-size:36px;font-weight:800;color:#1a1a2e;margin-bottom:28px;line-height:1.15">Streaming State Management</h2>
65
+
<divclass="chapter-body"><h3>Overview</h3>
66
+
<p>When you move from prototype to production, the requirements change fundamentally. What worked in a demo — direct API calls, synchronous state, manual zone management — falls apart at scale.</p>
67
+
<h3>The Signals-Native Approach</h3>
68
+
<p>StreamResource provides a signals-native approach that eliminates the boilerplate:</p>
<p>Demos work with ephemeral state. Production agents need conversation history that survives page refreshes, tab switches, and navigation — wired to LangGraph's MemorySaver backend.</p>
<p>LangGraph agents invoke tools mid-stream. The UI needs to show tool execution state in real time — steps appearing as the tool runs, a final result, and collapsible history.</p>
103
+
<h3>Progressive Disclosure</h3>
104
+
<pre><code><chat-tool-call-card
105
+
[toolCall]="msg.tool_calls[0]"
106
+
[collapsed]="!isStreaming()">
107
+
</chat-tool-call-card>
108
+
</code></pre>
109
+
<h3>Production Checklist</h3>
110
+
<ul><li>Do your tool call cards handle partial step state during streaming?</li>
111
+
<li>Is tool history collapsible after completion?</li>
112
+
<li>Can you distinguish pending vs. completed tool calls?</li></ul></div>
<p>Production agents that take consequential actions must pause for human approval before proceeding. This requires a tight loop between LangGraph's interrupt() primitive and Angular UI.</p>
<p>The most advanced production agents emit structured UI specs — not just text. A data analysis agent might render a live table. A booking agent might render a reservation form.</p>
136
+
<h3>The Registry Pattern</h3>
137
+
<pre><code>defineAngularRegistry({
138
+
'data-table': DataTableComponent,
139
+
'booking-form': BookingFormComponent,
140
+
'chart-widget': ChartWidgetComponent,
141
+
});
142
+
</code></pre>
143
+
<h3>Production Checklist</h3>
144
+
<ul><li>Can your agent emit UI components without tight coupling to the frontend codebase?</li>
<p>Agent UIs are notoriously hard to test because they depend on live LLM responses. Flaky tests, slow CI, and inability to reproduce edge cases are the main reasons agent UIs ship with low confidence.</p>
0 commit comments