cacheplane
diff --git a/‎apps/cockpit/src/app/layout.tsx‎
Lines changed: 1 addition & 1 deletion b/‎apps/cockpit/src/app/layout.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/cockpit/src/components/cockpit-shell.tsx‎
Lines changed: 5 additions & 2 deletions b/‎apps/cockpit/src/components/cockpit-shell.tsx‎
Lines changed: 5 additions & 2 deletions
diff --git a/‎apps/cockpit/src/components/code-mode/code-mode.tsx‎
Lines changed: 3 additions & 3 deletions b/‎apps/cockpit/src/components/code-mode/code-mode.tsx‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎apps/cockpit/src/components/mobile-nav-overlay.tsx‎
Lines changed: 5 additions & 6 deletions b/‎apps/cockpit/src/components/mobile-nav-overlay.tsx‎
Lines changed: 5 additions & 6 deletions
diff --git a/‎apps/cockpit/src/components/modes/mode-switcher.tsx‎
Lines changed: 3 additions & 4 deletions b/‎apps/cockpit/src/components/modes/mode-switcher.tsx‎
Lines changed: 3 additions & 4 deletions
diff --git a/‎apps/cockpit/src/components/sidebar/cockpit-sidebar.tsx‎
Lines changed: 7 additions & 2 deletions b/‎apps/cockpit/src/components/sidebar/cockpit-sidebar.tsx‎
Lines changed: 7 additions & 2 deletions
diff --git a/‎apps/cockpit/src/components/sidebar/language-picker.tsx‎
Lines changed: 5 additions & 8 deletions b/‎apps/cockpit/src/components/sidebar/language-picker.tsx‎
Lines changed: 5 additions & 8 deletions
diff --git a/‎apps/cockpit/src/components/sidebar/navigation-groups.tsx‎
Lines changed: 2 additions & 1 deletion b/‎apps/cockpit/src/components/sidebar/navigation-groups.tsx‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎apps/cockpit/src/components/ui/tabs.tsx‎
Lines changed: 1 addition & 1 deletion b/‎apps/cockpit/src/components/ui/tabs.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/website/e2e/docs.spec.ts‎
Lines changed: 68 additions & 0 deletions b/‎apps/website/e2e/docs.spec.ts‎
Lines changed: 68 additions & 0 deletions
@@ -17,7 +17,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <body
         className="min-h-screen font-sans antialiased"
         style={{
-          background: 'var(--ds-gradient-bg-flow)',
+          background: 'var(--ds-surface)',
           color: 'var(--ds-text-primary)',
         }}
       >
 
@@ -79,8 +79,11 @@ export function CockpitShell({
         onClose={() => setIsSidebarOpen(false)}
       />
 
-      <section className="grid grid-rows-[auto_1fr] gap-2 p-4 overflow-hidden bg-[var(--ds-glass-bg)] backdrop-blur-[var(--ds-glass-blur)]">
-        <header className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+      <section className="grid grid-rows-[auto_1fr] gap-2 p-4 overflow-hidden bg-[var(--ds-surface)]">
+        <header
+          className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between pb-3"
+          style={{ borderBottom: '1px solid var(--ds-border)' }}
+        >
           <div className="flex items-center gap-3">
             <button
               className="md:hidden"
 
@@ -20,9 +20,9 @@ function CodeFileContent({ path, content }: { path: string; content: string | un
 
   return (
     <div className="code-mode-block" style={{
-      borderRadius: 8,
-      border: '1px solid var(--ds-glass-border)',
-      boxShadow: 'var(--ds-glass-shadow)',
+      borderRadius: 'var(--ds-radius-md)',
+      border: '1px solid var(--ds-border)',
+      boxShadow: 'var(--ds-shadow-sm)',
       overflow: 'hidden',
     }}>
       <div style={{
 
@@ -64,9 +64,8 @@ export function MobileNavOverlay({
       data-state={state}
       className="fixed inset-0 z-50 md:hidden flex flex-col"
       style={{
-        background: 'var(--ds-glass-bg)',
-        backdropFilter: 'blur(var(--ds-glass-blur))',
-        WebkitBackdropFilter: 'blur(var(--ds-glass-blur))',
+        background: 'var(--ds-surface)',
+        boxShadow: 'var(--ds-shadow-lg)',
         opacity: state === 'open' ? 1 : 0,
         transform: state === 'open' ? 'translateY(0)' : 'translateY(8px)',
         transition: state === 'open'
@@ -77,7 +76,7 @@ export function MobileNavOverlay({
       {/* Header */}
       <header
         className="flex items-center justify-between px-4 py-3"
-        style={{ borderBottom: '1px solid var(--ds-glass-border)' }}
+        style={{ borderBottom: '1px solid var(--ds-border)' }}
       >
         <p
           className="font-mono text-xs font-semibold uppercase tracking-wide"
@@ -118,8 +117,8 @@ export function MobileNavOverlay({
             <div
               key={product.product}
               style={{
-                background: 'var(--ds-glass-bg)',
-                border: '1px solid var(--ds-glass-border)',
+                background: 'var(--ds-surface-tinted)',
+                border: '1px solid var(--ds-border)',
                 borderRadius: 10,
                 padding: 12,
               }}
 
@@ -40,9 +40,8 @@ export function ModeSwitcher<T extends string>({
         gap: 0,
         padding: 3,
         borderRadius: 999,
-        background: 'var(--ds-glass-bg)',
-        border: '1px solid var(--ds-glass-border)',
-        boxShadow: 'var(--ds-glass-shadow)',
+        background: 'var(--ds-surface-tinted)',
+        border: '1px solid var(--ds-border)',
       }}
     >
       {/* Sliding indicator */}
@@ -75,7 +74,7 @@ export function ModeSwitcher<T extends string>({
               borderRadius: 999,
               border: 'none',
               background: 'transparent',
-              color: isActive ? '#fff' : 'var(--ds-text-secondary)',
+              color: isActive ? 'var(--ds-text-inverted)' : 'var(--ds-text-secondary)',
               fontFamily: 'var(--ds-font-mono)',
               fontSize: '0.8rem',
               fontWeight: isActive ? 500 : 400,
 
@@ -20,8 +20,13 @@ export function CockpitSidebar({
   return (
     <aside
       aria-label="Cockpit sidebar"
-      className="grid gap-4 py-6 px-0 border-r border-[var(--ds-glass-border)] bg-[var(--ds-glass-bg)] backdrop-blur-[var(--ds-glass-blur)] content-start overflow-y-auto"
-      style={{ position: 'sticky', top: 0, minHeight: '100vh' }}
+      className="grid gap-4 py-6 px-0 border-r bg-[var(--ds-surface-tinted)] content-start overflow-y-auto"
+      style={{
+        position: 'sticky',
+        top: 0,
+        minHeight: '100vh',
+        borderRightColor: 'var(--ds-border-strong)',
+      }}
     >
       <header className="flex items-center justify-between px-4">
         <p className="text-[var(--ds-text-muted)] font-mono text-xs font-medium tracking-wide uppercase">Cockpit</p>
 
@@ -50,9 +50,8 @@ export function LanguagePicker({ manifest, entry }: LanguagePickerProps) {
         style={{
           padding: '4px 10px',
           borderRadius: 6,
-          border: '1px solid var(--ds-accent-border)',
-          background: 'rgba(255, 255, 255, 0.7)',
-          backdropFilter: 'blur(var(--ds-glass-blur))',
+          border: '1px solid var(--ds-border)',
+          background: 'var(--ds-surface)',
           color: 'var(--ds-text-secondary)',
           fontSize: '0.75rem',
           fontFamily: 'var(--ds-font-mono)',
@@ -73,11 +72,9 @@ export function LanguagePicker({ manifest, entry }: LanguagePickerProps) {
             minWidth: 120,
             padding: 4,
             borderRadius: 8,
-            border: '1px solid var(--ds-glass-border)',
-            background: 'rgba(255, 255, 255, 0.92)',
-            backdropFilter: 'blur(var(--ds-glass-blur))',
-            WebkitBackdropFilter: 'blur(var(--ds-glass-blur))',
-            boxShadow: 'var(--ds-glass-shadow)',
+            border: '1px solid var(--ds-border)',
+            background: 'var(--ds-surface)',
+            boxShadow: 'var(--ds-shadow-md)',
             zIndex: 50,
           }}
         >
 
@@ -78,12 +78,13 @@ function ProductGroup({
                   aria-current={isActive ? 'page' : undefined}
                   style={{
                     display: 'block',
-                    padding: '5px 16px',
+                    padding: isActive ? '5px 16px 5px 14px' : '5px 16px',
                     margin: '0 8px',
                     borderRadius: 6,
                     fontSize: '0.825rem',
                     color: isActive ? 'var(--ds-accent)' : 'var(--ds-text-secondary)',
                     background: isActive ? 'var(--ds-accent-surface)' : 'transparent',
+                    borderLeft: isActive ? '2px solid var(--ds-accent)' : 'none',
                     textDecoration: 'none',
                     transition: 'all 0.15s',
                   }}
 
@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex items-center gap-0 border-b border-[var(--ds-accent-border)]',
+      'inline-flex items-center gap-0 border-b border-[var(--ds-border)]',
       className
     )}
     {...props}
 
@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Docs landing page', () => {
+  test('renders library cards + popular topics + search prompt', async ({ page }) => {
+    await page.goto('/docs');
+    // Header
+    await expect(page.locator('#docs-heading')).toBeVisible();
+    // Library grid — all 4 libraries (agent, render, chat, ag-ui)
+    await expect(page.locator('main a[href="/docs/agent/getting-started/introduction"]').first()).toBeVisible();
+    await expect(page.locator('main a[href="/docs/render/getting-started/introduction"]').first()).toBeVisible();
+    await expect(page.locator('main a[href="/docs/chat/getting-started/introduction"]').first()).toBeVisible();
+    await expect(page.locator('main a[href="/docs/ag-ui/getting-started/introduction"]').first()).toBeVisible();
+    // Popular topics — 3 cards
+    await expect(page.getByText('Streaming with signals').first()).toBeVisible();
+    await expect(page.getByText('Generative UI fundamentals').first()).toBeVisible();
+    await expect(page.getByText('Production patterns').first()).toBeVisible();
+    // Search prompt
+    await expect(page.getByText('Looking for something specific?').first()).toBeVisible();
+  });
+});
+
+test.describe('Docs slug page', () => {
+  const route = '/docs/agent/getting-started/introduction';
+
+  test('renders breadcrumb + h1 + sidebar', async ({ page }) => {
+    await page.goto(route);
+    await expect(page.locator('aside').first()).toBeVisible();
+    await expect(page.locator('nav[aria-label="Breadcrumb"]').first()).toBeVisible();
+    await expect(page.locator('article').first()).toBeVisible();
+  });
+
+  test('breadcrumb shows the library + page title', async ({ page }) => {
+    await page.goto(route);
+    const breadcrumb = page.locator('nav[aria-label="Breadcrumb"]').first();
+    await expect(breadcrumb).toContainText('Docs');
+  });
+
+  test('renders DocsPrevNext at the bottom (next-only for the first page)', async ({ page }) => {
+    await page.goto(route);
+    const prevNext = page.locator('nav[aria-label="Previous and next page"]').first();
+    await expect(prevNext).toBeVisible();
+  });
+
+  test('headings have ID anchors for hash links', async ({ page }) => {
+    await page.goto(route);
+    const h2 = page.locator('article h2').first();
+    await expect(h2).toBeVisible();
+    const id = await h2.getAttribute('id');
+    expect(id).toBeTruthy();
+    expect(id?.length).toBeGreaterThan(0);
+  });
+
+  test('breadcrumb renders exactly once', async ({ page }) => {
+    await page.goto('/docs/agent/getting-started/introduction');
+    await expect(page.locator('nav[aria-label="Breadcrumb"]')).toHaveCount(1);
+  });
+});
+
+test.describe('Docs search', () => {
+  test('Cmd+K opens the search modal', async ({ page, browserName }) => {
+    await page.goto('/docs/agent/getting-started/introduction');
+    // Mac uses Meta; other platforms emulate the same shortcut via keydown.
+    const modifier = browserName === 'webkit' ? 'Meta' : 'Control';
+    await page.keyboard.press(`${modifier}+KeyK`);
+    // The modal mounts somewhere — assert by visible input role with placeholder text.
+    await expect(page.locator('input[placeholder*="Search"], input[type="search"]').first()).toBeVisible({ timeout: 3000 });
+  });
+});
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export default function RootLayout({ children }: RootLayoutProps) {`
`17`	`17`	`<body`
`18`	`18`	`className="min-h-screen font-sans antialiased"`
`19`	`19`	`style={{`
`20`		`- background: 'var(--ds-gradient-bg-flow)',`
	`20`	`+ background: 'var(--ds-surface)',`
`21`	`21`	`color: 'var(--ds-text-primary)',`
`22`	`22`	`}}`
`23`	`23`	`>`