feat: glassy gradient website redesign + docs refresh

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "website-dev",
+      "runtimeExecutable": "/bin/bash",
+      "runtimeArgs": ["-c", "export PATH=/Users/blove/.nvm/versions/node/v22.14.0/bin:$PATH && npx nx serve website"],
+      "port": 3000
+    }
+  ]
+}

apps/website/content/docs-v2/api/stream-resource.mdx

@@ -0,0 +1,38 @@
+# streamResource()
+
+Creates a streaming resource connected to a LangGraph agent. Must be called within an Angular injection context.
+
+## Signature
+
+```typescript
+function streamResource<TState>(options: StreamResourceOptions<TState>): StreamResource<TState>
+```
+
+## Options
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `assistantId` | `string` | Agent or graph identifier |
+| `apiUrl` | `string` | LangGraph Platform base URL |
+| `threadId` | `Signal<string \| null> \| string \| null` | Thread to connect to |
+| `onThreadId` | `(id: string) => void` | Called when a new thread is created |
+| `onInterrupt` | `(data: unknown) => void` | Called when the agent pauses for input |
+| `transport` | `StreamTransport` | Custom transport (default: FetchStreamTransport) |
+
+## Return type
+
+streamResource() returns an object with these Signal properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `messages()` | `Signal<BaseMessage[]>` | Current message list |
+| `status()` | `Signal<'idle' \| 'streaming' \| 'error'>` | Stream status |
+| `error()` | `Signal<Error \| null>` | Last error, if any |
+| `threadId()` | `Signal<string \| null>` | Current thread ID |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `submit(input)` | Send a message or resume from interrupt |
+| `history()` | Get execution history for time travel |

apps/website/content/docs-v2/getting-started/introduction.mdx

@@ -0,0 +1,28 @@
+# Introduction
+
+StreamResource brings full parity with React's `useStream()` hook to Angular 20+. It's the enterprise streaming resource for LangChain and Angular — built natively with Angular Signals, not wrapped or adapted.
+
+<Callout type="info" title="Who is this for?">
+StreamResource serves two audiences: Angular developers building AI-powered apps, and AI/agent developers who need an Angular frontend.
+</Callout>
+
+## What you'll build
+
+With streamResource(), you can build Angular applications that connect to LangGraph agents with:
+
+- **Token-by-token streaming** via SSE
+- **Thread persistence** across sessions
+- **Human-in-the-loop** interrupts and approvals
+- **Time travel** debugging
+- **Deterministic testing** with MockStreamTransport
+
+## Next steps
+
+<CardGroup cols={2}>
+  <Card title="Quick Start" href="/docs/getting-started/quickstart">
+    Build your first streaming chat in 5 minutes
+  </Card>
+  <Card title="Installation" href="/docs/getting-started/installation">
+    Detailed setup and configuration guide
+  </Card>
+</CardGroup>

apps/website/content/docs-v2/guides/streaming.mdx

@@ -0,0 +1,53 @@
+# Streaming
+
+StreamResource provides token-by-token streaming from LangGraph agents via Server-Sent Events (SSE). Every update lands directly in Angular Signals.
+
+<Callout type="tip" title="Prerequisites">
+Make sure you've completed the Installation guide first.
+</Callout>
+
+## Basic streaming
+
+<Tabs items={['TypeScript', 'Template']}>
+<Tab>
+
+```typescript
+// chat.component.ts
+const chat = streamResource<{ messages: BaseMessage[] }>({
+  assistantId: 'chat_agent',
+});
+
+// Status updates as streaming progresses
+const isStreaming = computed(() => chat.status() === 'streaming');
+```
+
+</Tab>
+<Tab>
+
+```html
+<!-- chat.component.html -->
+@for (msg of chat.messages(); track $index) {
+  <p [class.streaming]="$last && isStreaming()">
+    {{ msg.content }}
+  </p>
+}
+```
+
+</Tab>
+</Tabs>
+
+## Stream status
+
+The `status()` signal reports the current state:
+
+<Steps>
+<Step title="idle">
+No active stream. Ready to send a message.
+</Step>
+<Step title="streaming">
+Tokens are arriving. Messages update in real-time.
+</Step>
+<Step title="error">
+Something went wrong. Check the error() signal for details.
+</Step>
+</Steps>

apps/website/e2e/website.spec.ts

@@ -7,14 +7,13 @@ test('landing page renders hero headline', async ({ page }) => {
   expect(headline).toContain('Angular');
 });
 
-test('landing page renders architecture diagram', async ({ page }) => {
+test('landing page renders architecture section', async ({ page }) => {
   await page.goto('/');
-  await expect(page.locator('svg[aria-label*="Architecture"]')).toBeVisible();
+  await expect(page.getByText('Architecture').first()).toBeVisible();
 });
 
 test('landing page renders 6 feature cards', async ({ page }) => {
   await page.goto('/');
-  // Feature section contains h2 "Features" and 6 cards
   const featureSection = page.locator('section').filter({ hasText: 'Features' });
   await expect(featureSection).toBeVisible();
 });
@@ -30,19 +29,18 @@ test('pricing page shows 4 plan cards', async ({ page }) => {
 test('pricing page lead form validates required fields', async ({ page }) => {
   await page.goto('/pricing');
   await page.click('button[type="submit"]');
-  // HTML5 validation prevents submit — form should still be visible
   await expect(page.locator('form')).toBeVisible();
 });
 
 test('docs page renders sidebar and content', async ({ page }) => {
-  await page.goto('/docs/deep-agents/getting-started/overview/overview/python');
+  await page.goto('/docs/getting-started/introduction');
   await expect(page.locator('aside')).toBeVisible();
   await expect(page.locator('article')).toBeVisible();
 });
 
-test('api reference page renders', async ({ page }) => {
-  await page.goto('/api-reference');
-  await expect(page.getByText('streamResource()', { exact: true }).first()).toBeVisible();
+test('api reference renders in docs', async ({ page }) => {
+  await page.goto('/docs/api/stream-resource');
+  await expect(page.getByText('streamResource()').first()).toBeVisible();
 });
 
 test('nav has pricing link', async ({ page }) => {

apps/website/lib/design-tokens.ts

@@ -3,23 +3,37 @@
  */
 export const tokens = {
   colors: {
-    bg: '#080B14',
-    accent: '#6C8EFF',
-    accentGlow: 'rgba(108, 142, 255, 0.35)',
-    accentBorder: 'rgba(108, 142, 255, 0.15)',
-    accentBorderHover: 'rgba(108, 142, 255, 0.40)',
-    accentSurface: 'rgba(108, 142, 255, 0.08)',
-    textPrimary: '#EEF1FF',
-    textSecondary: '#8B96C8',
-    textMuted: '#4A527A',
-    sidebarBg: '#0A0D18',
+    bg: '#f8f9fc',
+    accent: '#004090',
+    accentLight: '#64C3FD',
+    accentGlow: 'rgba(0, 64, 144, 0.2)',
+    accentBorder: 'rgba(0, 64, 144, 0.15)',
+    accentBorderHover: 'rgba(0, 64, 144, 0.3)',
+    accentSurface: 'rgba(0, 64, 144, 0.06)',
+    textPrimary: '#1a1a2e',
+    textSecondary: '#555770',
+    textMuted: '#8b8fa3',
+    sidebarBg: 'rgba(255, 255, 255, 0.45)',
     angularRed: '#DD0031',
   },
+  glass: {
+    bg: 'rgba(255, 255, 255, 0.45)',
+    bgHover: 'rgba(255, 255, 255, 0.55)',
+    blur: '16px',
+    border: 'rgba(255, 255, 255, 0.6)',
+    shadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
+  },
+  gradient: {
+    warm: 'radial-gradient(circle, rgba(221, 0, 49, 0.18), transparent 70%)',
+    cool: 'radial-gradient(circle, rgba(0, 64, 144, 0.18), transparent 70%)',
+    coolLight: 'radial-gradient(circle, rgba(100, 195, 253, 0.15), transparent 70%)',
+    bgFlow: 'linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%)',
+  },
   glow: {
-    hero: '0 0 40px rgba(108, 142, 255, 0.5)',
-    demo: '0 0 30px rgba(108, 142, 255, 0.25)',
-    card: '0 0 24px rgba(108, 142, 255, 0.3)',
-    border: '0 0 12px rgba(108, 142, 255, 0.2)',
-    button: '0 0 16px rgba(108, 142, 255, 0.4)',
+    hero: '0 0 60px rgba(0, 64, 144, 0.15)',
+    demo: '0 0 30px rgba(0, 64, 144, 0.1)',
+    card: '0 0 24px rgba(0, 64, 144, 0.1)',
+    border: '0 0 12px rgba(0, 64, 144, 0.08)',
+    button: '0 0 16px rgba(0, 64, 144, 0.15)',
   },
 } as const;

apps/website/src/app/docs/[[...slug]]/page.tsx

@@ -1,28 +1,30 @@
 import { notFound } from 'next/navigation';
-import { DocsSidebar } from '../../../components/docs/DocsSidebar';
-import { MdxRenderer } from '../../../components/docs/MdxRenderer';
-import { OpenInCockpit } from '../../../components/docs/open-in-cockpit';
-import { getDocBySlug, getAllDocSlugs, getPromptBySlug } from '../../../lib/docs';
+import { DocsSidebarNew } from '../../../components/docs/DocsSidebarNew';
+import { MdxRendererNew } from '../../../components/docs/MdxRenderer';
+import { DocsSearch } from '../../../components/docs/DocsSearch';
+import { getDocBySlug, getAllDocSlugs } from '../../../lib/docs-new';
 
 export function generateStaticParams() {
-  return getAllDocSlugs().map((slug) => ({ slug }));
+  return getAllDocSlugs().map(({ section, slug }) => ({ slug: [section, slug] }));
 }
 
 export default async function DocsPage({ params }: { params: Promise<{ slug?: string[] }> }) {
   const { slug: rawSlug } = await params;
-  const slug = rawSlug ?? ['deep-agents', 'getting-started', 'overview', 'overview', 'python'];
-  const doc = getDocBySlug(slug);
+  const slugParts = rawSlug ?? ['getting-started', 'introduction'];
+
+  const [section, slug] = slugParts.length >= 2
+    ? [slugParts[0], slugParts[1]]
+    : ['getting-started', 'introduction'];
+
+  const doc = getDocBySlug(section, slug);
   if (!doc) notFound();
-  const prompt = getPromptBySlug(slug) ?? undefined;
 
   return (
-    <div className="flex min-h-screen pt-16">
-      <DocsSidebar activeSlug={slug.join('/')} />
-      <div className="flex-1">
-        <div className="px-8 pt-8">
-          <OpenInCockpit bundle={doc.bundle} />
-        </div>
-        <MdxRenderer source={doc.content} prompt={prompt} />
+    <div className="flex min-h-screen pt-16" style={{ background: 'var(--gradient-bg-flow)' }}>
+      <DocsSearch />
+      <DocsSidebarNew activeSection={section} activeSlug={slug} />
+      <div className="flex-1" style={{ background: 'rgba(255, 255, 255, 0.85)' }}>
+        <MdxRendererNew source={doc.content} section={section} slug={slug} title={doc.title} />
       </div>
     </div>
   );