feat: gradient feature chips, copy icon, TOC fix

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

@@ -242,34 +242,9 @@ Open `http://localhost:4200` and start chatting with your agent. Messages stream
 
 ## Key Concepts
 
-Here's what streamResource() gives you out of the box:
+Everything streamResource() gives you out of the box — click any to learn more:
 
-<CardGroup cols={2}>
-  <Card title="Messages" href="/docs/guides/streaming">
-    `chat.messages()` — live message list that updates as each token arrives from the agent
-  </Card>
-  <Card title="Status" href="/docs/guides/streaming">
-    `chat.status()` — current state: idle, loading, resolved, or error
-  </Card>
-  <Card title="Thread Persistence" href="/docs/guides/persistence">
-    `threadId` option — conversations survive page refreshes via localStorage or backend
-  </Card>
-  <Card title="Interrupts" href="/docs/guides/interrupts">
-    `chat.interrupt()` — agent pauses for human approval, your UI handles the decision
-  </Card>
-  <Card title="Time Travel" href="/docs/guides/time-travel">
-    `chat.history()` — full checkpoint timeline for debugging and branching
-  </Card>
-  <Card title="Subagents" href="/docs/guides/subgraphs">
-    `chat.subagents()` — track delegated agent work across multiple graphs
-  </Card>
-  <Card title="Tool Calls" href="/docs/guides/streaming">
-    `chat.toolCalls()` — see what tools the agent is invoking in real-time
-  </Card>
-  <Card title="Testing" href="/docs/guides/testing">
-    `MockStreamTransport` — deterministic testing without a running server
-  </Card>
-</CardGroup>
+<FeatureChips />
 
 ## Deploy to Production
 

apps/website/src/app/global.css

@@ -91,8 +91,8 @@ html {
 .docs-prose [data-rehype-pretty-code-figure] pre {
   padding: 1.25rem 1.5rem;
   border-radius: 0.75rem;
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
   overflow-x: auto;
   font-size: 0.8rem;
   line-height: 1.7;

apps/website/src/components/docs/DocsTOC.tsx

@@ -29,8 +29,8 @@ export function DocsTOC({ headings }: { headings: DocHeading[] }) {
   if (headings.length === 0) return null;
 
   return (
-    <aside className="hidden xl:block w-52 shrink-0 py-8 pl-8"
-      style={{ position: 'sticky', top: '5rem', maxHeight: 'calc(100vh - 6rem)', overflowY: 'auto' }}>
+    <aside className="hidden xl:block w-56 shrink-0 py-8 pl-8 pr-6"
+      style={{ position: 'sticky', top: '5rem', alignSelf: 'flex-start', maxHeight: 'calc(100vh - 6rem)', overflowY: 'auto' }}>
       <p className="font-mono text-xs uppercase tracking-wider mb-3"
         style={{ color: tokens.colors.textMuted, fontWeight: 600 }}>On this page</p>
       <nav className="flex flex-col gap-1.5">

apps/website/src/components/docs/MdxRenderer.tsx

@@ -6,6 +6,7 @@ import { Tabs, Tab } from './mdx/Tabs';
 import { Card, CardGroup } from './mdx/Card';
 import { CodeGroup } from './mdx/CodeGroup';
 import { Pre } from './mdx/CodeBlock';
+import { FeatureChips } from './mdx/FeatureChips';
 import { ArchFlowDiagram } from './ArchFlowDiagram';
 import { DocsBreadcrumb } from './DocsBreadcrumb';
 import { DocsPrevNext } from './DocsPrevNext';
@@ -22,6 +23,7 @@ const mdxComponents = {
   CardGroup,
   CodeGroup,
   ArchFlowDiagram,
+  FeatureChips,
   pre: Pre,
 };
 

apps/website/src/components/docs/mdx/CodeBlock.tsx

@@ -1,6 +1,23 @@
 'use client';
 import { useRef, useState } from 'react';
 
+function CopyIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="5" y="5" width="9" height="9" rx="1.5" />
+      <path d="M11 5V3.5A1.5 1.5 0 009.5 2h-6A1.5 1.5 0 002 3.5v6A1.5 1.5 0 003.5 11H5" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 8.5l3.5 3.5L13 5" />
+    </svg>
+  );
+}
+
 export function Pre({ children, ...props }: React.HTMLAttributes<HTMLPreElement>) {
   const ref = useRef<HTMLPreElement>(null);
   const [copied, setCopied] = useState(false);
@@ -20,22 +37,34 @@ export function Pre({ children, ...props }: React.HTMLAttributes<HTMLPreElement>
         aria-label={copied ? 'Copied' : 'Copy code'}
         style={{
           position: 'absolute',
-          top: 8,
-          right: 8,
-          padding: '4px 8px',
-          borderRadius: 5,
-          border: '1px solid rgba(255,255,255,0.1)',
-          background: 'rgba(255,255,255,0.06)',
-          color: copied ? '#34c759' : '#636366',
-          fontFamily: 'var(--font-mono)',
-          fontSize: 10,
+          top: 10,
+          right: 10,
+          padding: '6px',
+          borderRadius: 6,
+          border: '1px solid rgba(255,255,255,0.12)',
+          background: copied ? 'rgba(52,199,89,0.15)' : 'rgba(255,255,255,0.08)',
+          color: copied ? '#34c759' : '#8b8fa3',
           cursor: 'pointer',
-          transition: 'all 0.15s',
-          opacity: 0.6,
+          transition: 'all 0.2s',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        onMouseEnter={(e) => {
+          if (!copied) {
+            e.currentTarget.style.background = 'rgba(255,255,255,0.14)';
+            e.currentTarget.style.color = '#c8c8cc';
+            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)';
+          }
         }}
-        onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
-        onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.6'; }}>
-        {copied ? '✓ Copied' : 'Copy'}
+        onMouseLeave={(e) => {
+          if (!copied) {
+            e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+            e.currentTarget.style.color = '#8b8fa3';
+            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)';
+          }
+        }}>
+        {copied ? <CheckIcon /> : <CopyIcon />}
       </button>
     </div>
   );

apps/website/src/components/docs/mdx/FeatureChips.tsx

@@ -0,0 +1,78 @@
+'use client';
+import Link from 'next/link';
+import { tokens } from '../../../../lib/design-tokens';
+
+interface ChipData {
+  icon: string;
+  title: string;
+  signal: string;
+  href: string;
+  gradient: string;
+  border: string;
+}
+
+const CHIPS: ChipData[] = [
+  { icon: '⚡', title: 'Messages', signal: 'chat.messages()', href: '/docs/guides/streaming', gradient: 'linear-gradient(135deg, rgba(0,64,144,0.06), rgba(100,195,253,0.08))', border: 'rgba(0,64,144,0.1)' },
+  { icon: '📡', title: 'Status', signal: 'chat.status()', href: '/docs/guides/streaming', gradient: 'linear-gradient(135deg, rgba(100,80,200,0.06), rgba(140,120,220,0.08))', border: 'rgba(100,80,200,0.1)' },
+  { icon: '💾', title: 'Persistence', signal: 'threadId', href: '/docs/guides/persistence', gradient: 'linear-gradient(135deg, rgba(16,185,129,0.06), rgba(52,199,89,0.08))', border: 'rgba(16,185,129,0.1)' },
+  { icon: '✋', title: 'Interrupts', signal: 'chat.interrupt()', href: '/docs/guides/interrupts', gradient: 'linear-gradient(135deg, rgba(232,147,12,0.06), rgba(245,180,60,0.08))', border: 'rgba(232,147,12,0.1)' },
+  { icon: '⏪', title: 'Time Travel', signal: 'chat.history()', href: '/docs/guides/time-travel', gradient: 'linear-gradient(135deg, rgba(221,0,49,0.05), rgba(255,100,130,0.07))', border: 'rgba(221,0,49,0.08)' },
+  { icon: '🔀', title: 'Subagents', signal: 'chat.subagents()', href: '/docs/guides/subgraphs', gradient: 'linear-gradient(135deg, rgba(0,64,144,0.05), rgba(0,100,180,0.07))', border: 'rgba(0,64,144,0.08)' },
+  { icon: '🔧', title: 'Tool Calls', signal: 'chat.toolCalls()', href: '/docs/guides/streaming', gradient: 'linear-gradient(135deg, rgba(100,80,200,0.05), rgba(120,100,210,0.07))', border: 'rgba(100,80,200,0.08)' },
+  { icon: '🧪', title: 'Testing', signal: 'MockTransport', href: '/docs/guides/testing', gradient: 'linear-gradient(135deg, rgba(16,185,129,0.05), rgba(40,200,140,0.07))', border: 'rgba(16,185,129,0.08)' },
+];
+
+export function FeatureChips() {
+  return (
+    <div style={{
+      display: 'flex',
+      gap: 10,
+      overflowX: 'auto',
+      paddingBottom: 8,
+      marginTop: 20,
+      marginBottom: 28,
+      scrollbarWidth: 'thin',
+      scrollbarColor: `${tokens.colors.accentBorder} transparent`,
+    }}>
+      {CHIPS.map((chip) => (
+        <Link key={chip.title} href={chip.href} style={{ textDecoration: 'none', flexShrink: 0 }}>
+          <div
+            style={{
+              width: 130,
+              padding: '16px 14px',
+              borderRadius: 14,
+              background: chip.gradient,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+              border: `1px solid ${chip.border}`,
+              textAlign: 'center',
+              cursor: 'pointer',
+              transition: 'transform 0.2s, box-shadow 0.2s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = 'translateY(-2px)';
+              e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.06)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = 'none';
+            }}>
+            <div style={{ fontSize: 22, marginBottom: 8 }}>{chip.icon}</div>
+            <div style={{
+              fontSize: 13,
+              fontWeight: 600,
+              color: tokens.colors.textPrimary,
+              marginBottom: 4,
+            }}>{chip.title}</div>
+            <div style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: 10,
+              color: tokens.colors.accent,
+              opacity: 0.8,
+            }}>{chip.signal}</div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}