Product demo v1

apps/apollo-vertex/app/experiment/_meta.ts

@@ -0,0 +1,4 @@
+export default {
+  dashboard: "Dashboard",
+  "product-demo": "Product Demo",
+};

apps/apollo-vertex/app/experiment/dashboard/page.mdx

@@ -0,0 +1,149 @@
+import { DashboardTemplate } from '@/templates/dashboard/DashboardTemplateDynamic';
+import { PreviewFullScreen } from '@/app/_components/preview-full-screen';
+
+# Dashboard
+
+A configurable dashboard template for building AI-assisted operational views. The dashboard is composed of named card regions with defined interaction patterns, designed to be data-driven and adaptable across verticals.
+
+## Previews
+
+### Sidebar Shell
+
+<PreviewFullScreen title="Dashboard layout - sidebar shell">
+    <DashboardTemplate />
+</PreviewFullScreen>
+
+<a href="/preview/dashboard" target="_blank" className="text-sm text-primary hover:underline">Open standalone preview →</a>
+
+### Minimal Header Shell
+
+<PreviewFullScreen title="Dashboard layout - minimal shell">
+    <DashboardTemplate shellVariant="minimal" />
+</PreviewFullScreen>
+
+<a href="/preview/dashboard-minimal" target="_blank" className="text-sm text-primary hover:underline">Open standalone preview →</a>
+
+---
+
+## Anatomy
+
+The dashboard is built from four semantic regions, each with a distinct role:
+
+| Region | Description |
+|---|---|
+| **Overview Card** | The primary narrative area. Displays a greeting, headline, and subhead that summarize the current state. Occupies the top-left of the layout. |
+| **Prompt Bar** | The AI input surface. Supports text entry, recommendation chips, and an expand interaction that opens an inline chat view. Anchored below the overview card. |
+| **Insight Cards** | A grid of data cards on the right side. Each card has a type, a chart visualization, and an interaction pattern. Cards are arranged in rows of two. |
+| **Autopilot Panel** | A slide-in panel that provides AI-generated analysis for a specific insight card. Triggered from the card's autopilot icon. |
+
+## Card Types
+
+Every insight card has a `type` that determines what it displays:
+
+| Type | Renders | Example |
+|---|---|---|
+| `kpi` | A large number, badge, and description | "97.1%" with "+2.4%" badge |
+| `chart` | A data visualization determined by `chartType` | Horizontal bars, stacked bars |
+
+## Chart Types
+
+Cards with `type: "chart"` use a `chartType` to select the visualization:
+
+| Chart Type | Description |
+|---|---|
+| `horizontal-bars` | Ranked list of items with proportional bars and percentages |
+| `stacked-bar` | Grouped bars with color-coded segments and a legend |
+| `donut` | Circular progress indicator with a center label |
+| `sparkline` | Compact line chart for trend indication |
+| `area` | Filled area chart for volume over time |
+
+## Card Sizes
+
+Each card has a `size` that controls its column weight in the grid:
+
+| Size | Grid Weight | Use Case |
+|---|---|---|
+| `sm` | `1fr` | KPI cards, compact metrics |
+| `md` | `2fr` | Chart cards, detailed visualizations |
+| `lg` | `1fr` | Full-width cards |
+
+## Interaction Patterns
+
+Cards support three interaction modes:
+
+### Static
+
+No interactive behavior. The card displays its content without any hover or click affordance. Used for simple KPIs that don't need drill-down.
+
+### Navigate
+
+On hover, an **arrow-up-right** icon appears in the card header. Clicking the card navigates to a detail page. Used for KPIs or summaries that link to a deeper view.
+
+### Expand
+
+On hover, a **maximize** icon appears in the card header. Clicking expands the card to fill the grid with a multi-phase animation:
+
+1. **Width phase** — Card expands horizontally, sibling card collapses
+2. **Height phase** — Card expands vertically, other rows collapse
+3. **Full phase** — Expanded content fades in (drilldown tabs, autopilot prompts)
+
+Clicking the **minimize** icon or another card collapses back to the grid.
+
+For `horizontal-bars` cards, the expanded state includes **drilldown tabs** below the title for switching between data views.
+
+## Prompt Bar
+
+The prompt bar supports three ways to expand into the inline chat view:
+
+| Trigger | Behavior |
+|---|---|
+| **Type + Enter / Submit** | Expands and passes the user's typed query |
+| **Click a recommendation chip** | Expands and passes the chip text as the query |
+| **Click the chat icon** | Expands and shows the current session conversation |
+
+When expanded, the overview card collapses and the prompt bar grows to fill the left column. A **minimize** icon in the header collapses back to the default layout.
+
+## Autopilot Panel
+
+Each expandable card includes an **autopilot** icon alongside the expand icon. Clicking it slides in a panel from the right that provides AI-generated context for that card. The dashboard content shifts left to make room. Clicking the autopilot icon again or the close button dismisses the panel.
+
+## Data Configuration
+
+The dashboard is driven by a `DashboardDataset` object that defines all text and card content:
+
+```ts
+interface DashboardDataset {
+  name: string;              // Dataset identifier
+  brandName: string;         // Company name in header
+  brandLine: string;         // Tagline in header
+  dashboardTitle: string;    // Page title
+  badgeText: string;         // Badge next to title
+  greeting: string;          // Overview card greeting
+  headline: string;          // Overview card headline
+  subhead: string;           // Overview card description
+  promptPlaceholder: string; // Prompt bar placeholder text
+  promptSuggestions: string[]; // Recommendation chips
+  insightCards: [             // Exactly 4 insight cards
+    InsightCardData,
+    InsightCardData,
+    InsightCardData,
+    InsightCardData,
+  ];
+}
+```
+
+Each `InsightCardData` specifies its title, type, chart type, size, interaction, and the data for its visualization (KPI values, bar data, stacked segments, etc.).
+
+## Layout Modes
+
+The dashboard responds to container width:
+
+| Mode | Breakpoint | Behavior |
+|---|---|---|
+| **Desktop** | ≥ 1100px | Two-column layout, full card grid |
+| **Compact** | 800–1099px | Two-column layout, condensed card content |
+| **Stacked** | < 800px | Single-column, vertically stacked |
+
+## Theming
+
+Card backgrounds, glow effects, and gradients are configurable through `CardConfig` and `GlowConfig` objects. The dashboard supports light and dark modes with independent styling for each. Color tokens and theme values should be updated in `registry.json`, not directly in CSS files.

apps/apollo-vertex/app/experiment/product-demo/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { DashboardTemplate } from "@/templates/dashboard/DashboardTemplateDynamic";
+import { invoiceProcessingDataset } from "@/templates/dashboard/dashboard-data";
+
+export default function ProductDemoPage() {
+  return (
+    <div className="fixed inset-0 z-50 bg-background not-prose">
+      <DashboardTemplate dataset={invoiceProcessingDataset} demoMode />
+    </div>
+  );
+}

apps/apollo-vertex/app/globals.css

@@ -1,4 +1,6 @@
 @import 'tailwindcss';
+@source "../registry";
+@source "../templates";
 
 /* Optional: import Nextra theme styles */
 @import 'nextra-theme-docs/style.css';

apps/apollo-vertex/app/patterns/ai-chat/page.mdx

@@ -1,12 +1,15 @@
 import { AiChatTemplate } from '@/templates/AiChatTemplate';
+import { PreviewFullScreen } from '@/app/_components/preview-full-screen';
 
 # AI Chat
 
 A composable AI chat UI component for Apollo Vertex. Built with React, TypeScript, and Tailwind CSS. Designed to work with [TanStack AI](https://tanstack.com/ai) — you bring `useChat` and a connection adapter, the component handles the chrome (scroll, input, loading, suggestions, errors) while you control how messages and tool calls render.
 
-<div className="not-prose my-8">
-  <AiChatTemplate />
-</div>
+<PreviewFullScreen height={600} title="AI Chat">
+  <AiChatTemplate className="h-full flex w-full flex-col" />
+</PreviewFullScreen>
+
+> **All visual states and sub-components →** [Component Preview](/vertex-components/ai-chat/preview)
 
 ## Features
 

apps/apollo-vertex/app/preview/_meta.ts

@@ -0,0 +1,3 @@
+export default {
+  "*": { display: "hidden" },
+};

apps/apollo-vertex/app/preview/dashboard-minimal/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const DashboardTemplate = dynamic(
+  () =>
+    import("@/templates/dashboard/DashboardTemplate").then(
+      (mod) => mod.DashboardTemplate,
+    ),
+  { ssr: false },
+);
+
+export default function DashboardMinimalPreviewPage() {
+  return (
+    <div className="fixed inset-0 z-50 bg-background not-prose">
+      <DashboardTemplate shellVariant="minimal" />
+    </div>
+  );
+}

apps/apollo-vertex/app/preview/dashboard/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { invoiceProcessingDataset } from "@/templates/dashboard/dashboard-data";
+
+const DashboardTemplate = dynamic(
+  () =>
+    import("@/templates/dashboard/DashboardTemplate").then(
+      (mod) => mod.DashboardTemplate,
+    ),
+  { ssr: false },
+);
+
+export default function DashboardPreviewPage() {
+  return (
+    <div className="fixed inset-0 z-50 bg-background not-prose">
+      <DashboardTemplate dataset={invoiceProcessingDataset} demoMode />
+    </div>
+  );
+}