feat: add performance optimization and comprehensive cookbook tests (#1451)

* feat: lazy load cookbook detail and graph pages

Use React.lazy() with Suspense for CookbookDetailPage and
CookbookGraphPage routes to enable code splitting. These pages
pull in heavy dependencies (@xyflow/react, elkjs, dagre,
CodeMirror) that are now loaded on demand rather than in the
initial bundle.

* test: add comprehensive tests for cookbook components and hooks

Add tests for previously untested cookbook modules:
- ComponentDetail: props table, usage context, dependencies, files
- CompositionGraph: ReactFlow rendering, filters, legend, edge types
- SagaFlowDiagram: nodes, edges, early exits, services legend
- PreviewSourceTabs: tab switching, copy button, clipboard
- useCookbook: virtual data loading, types
- useFilterState: URL sync, partial updates, clear all

Total cookbook test count: 83 -> 125 (42 new tests)

---------

Co-authored-by: Ben Coombs <bjcoombs@users.noreply.github.com>

Author: bjcoombs

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useCallback, useEffect, useRef, useState, type FormEvent } from 'react'
+import { type ReactNode, lazy, Suspense, useCallback, useEffect, useRef, useState, type FormEvent } from 'react'
 import { BrowserRouter, Routes, Route, useLocation, useNavigate } from 'react-router-dom'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
@@ -30,7 +30,14 @@ import { DashboardPage } from '@/features/dashboard'
 import { ManifestsPage } from '@/features/manifests'
 import { McpConfigPage } from '@/features/mcp-config'
 import { TransactionsPage } from '@/features/transactions'
-import { CookbookPage, CookbookDetailPage, CookbookGraphPage } from '@/features/cookbook'
+import { CookbookPage } from '@/features/cookbook'
+
+const CookbookDetailPage = lazy(() =>
+  import('@/features/cookbook/pages/detail').then((m) => ({ default: m.CookbookDetailPage })),
+)
+const CookbookGraphPage = lazy(() =>
+  import('@/features/cookbook/pages/graph').then((m) => ({ default: m.CookbookGraphPage })),
+)
 import { ThemePreviewPanel } from '@/components/dev/theme-preview-panel'
 
 // Placeholder page components - replaced as each page task is implemented
@@ -258,8 +265,8 @@ function AppShellLayout() {
         <Route path="/manifests" element={<FeatureGuard feature="manifests">{guarded(<ManifestsPage />)}</FeatureGuard>} />
         <Route path="/mcp-config" element={<FeatureGuard feature="mcp-config">{guarded(<McpConfigPage />)}</FeatureGuard>} />
         <Route path="/cookbook" element={guarded(<CookbookPage />)} />
-        <Route path="/cookbook/graph" element={guarded(<CookbookGraphPage />)} />
-        <Route path="/cookbook/:name" element={guarded(<CookbookDetailPage />)} />
+        <Route path="/cookbook/graph" element={guarded(<Suspense fallback={<div className="h-96 animate-pulse rounded bg-muted" />}><CookbookGraphPage /></Suspense>)} />
+        <Route path="/cookbook/:name" element={guarded(<Suspense fallback={<div className="h-96 animate-pulse rounded bg-muted" />}><CookbookDetailPage /></Suspense>)} />
         <Route path="/audit-log" element={<FeatureGuard feature="audit">{guarded(<AuditLogPage />)}</FeatureGuard>} />
 
         {/* Platform-only routes */}

frontend/src/features/cookbook/components/component-detail.test.tsx

@@ -0,0 +1,109 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { ComponentDetail } from './component-detail'
+import type { CookbookItem, ComponentMeta } from '../hooks/use-cookbook'
+
+vi.mock('@/api/transport', () => ({
+  createTenantTransport: vi.fn(() => ({ __type: 'mock-transport' })),
+}))
+
+vi.mock('@/api/clients', () => ({
+  createServiceClients: vi.fn(() => ({})),
+}))
+
+function renderDetail(item: CookbookItem) {
+  return render(
+    <MemoryRouter>
+      <ComponentDetail item={item} />
+    </MemoryRouter>,
+  )
+}
+
+const fullItem: CookbookItem = {
+  name: 'balance-card',
+  type: 'registry:ui',
+  title: 'Balance Card',
+  description: 'Displays account balance',
+  registryDependencies: ['currency-formatter', 'icon-set'],
+  categories: ['accounts'],
+  files: [
+    { path: 'components/balance-card.tsx', type: 'registry:ui' },
+    { path: 'components/balance-card.css' },
+  ],
+  meta: {
+    feature_module: 'accounts',
+    tenant_configurable: true,
+    configurable_props: ['showCurrency', 'decimals'],
+    used_by: ['dashboard', 'account-detail'],
+  } satisfies ComponentMeta,
+}
+
+const bareItem: CookbookItem = {
+  name: 'simple-widget',
+  type: 'registry:ui',
+  title: 'Simple Widget',
+}
+
+describe('ComponentDetail', () => {
+  it('renders configurable props table', () => {
+    renderDetail(fullItem)
+    expect(screen.getByText('Configurable Props')).toBeInTheDocument()
+    expect(screen.getByText('showCurrency')).toBeInTheDocument()
+    expect(screen.getByText('decimals')).toBeInTheDocument()
+  })
+
+  it('renders usage context with feature module', () => {
+    renderDetail(fullItem)
+    expect(screen.getByText('Usage Context')).toBeInTheDocument()
+    expect(screen.getByText('accounts')).toBeInTheDocument()
+  })
+
+  it('renders tenant configurable badge', () => {
+    renderDetail(fullItem)
+    expect(screen.getByText('Yes')).toBeInTheDocument()
+  })
+
+  it('renders used_by badges', () => {
+    renderDetail(fullItem)
+    expect(screen.getByText('dashboard')).toBeInTheDocument()
+    expect(screen.getByText('account-detail')).toBeInTheDocument()
+  })
+
+  it('renders registry dependencies as links', () => {
+    renderDetail(fullItem)
+    expect(screen.getByText('Registry Dependencies')).toBeInTheDocument()
+    expect(screen.getByText('currency-formatter')).toBeInTheDocument()
+    expect(screen.getByText('icon-set')).toBeInTheDocument()
+
+    const link = screen.getByText('currency-formatter').closest('a')
+    expect(link).toHaveAttribute('href', '/cookbook/currency-formatter')
+  })
+
+  it('shows no dependencies message when none exist', () => {
+    renderDetail(bareItem)
+    expect(screen.getByText('No registry dependencies.')).toBeInTheDocument()
+  })
+
+  it('renders source files list', () => {
+    renderDetail(fullItem)
+    expect(screen.getByText('Source Files')).toBeInTheDocument()
+    expect(screen.getByText('components/balance-card.tsx')).toBeInTheDocument()
+    expect(screen.getByText('components/balance-card.css')).toBeInTheDocument()
+  })
+
+  it('renders live preview placeholder', () => {
+    renderDetail(fullItem)
+    expect(screen.getByText('Preview not available')).toBeInTheDocument()
+  })
+
+  it('hides props table when no configurable_props', () => {
+    renderDetail(bareItem)
+    expect(screen.queryByText('Configurable Props')).not.toBeInTheDocument()
+  })
+
+  it('hides usage context when no meta', () => {
+    renderDetail(bareItem)
+    expect(screen.queryByText('Usage Context')).not.toBeInTheDocument()
+  })
+})

frontend/src/features/cookbook/components/composition-graph.test.tsx

@@ -0,0 +1,170 @@
+import { describe, it, expect, vi } from 'vitest'
+import { useState } from 'react'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { CompositionGraph } from './composition-graph'
+import type { CookbookItem, PatternMeta } from '../hooks/use-cookbook'
+
+vi.mock('@/api/transport', () => ({
+  createTenantTransport: vi.fn(() => ({ __type: 'mock-transport' })),
+}))
+
+vi.mock('@/api/clients', () => ({
+  createServiceClients: vi.fn(() => ({})),
+}))
+
+// Mock @xyflow/react
+vi.mock('@xyflow/react', () => {
+  const Position = { Top: 'top', Bottom: 'bottom', Left: 'left', Right: 'right' }
+  const BackgroundVariant = { Dots: 'dots' }
+
+  function Handle() { return null }
+
+  function ReactFlow({ nodes, edges, children }: { nodes: unknown[]; edges: unknown[]; children?: React.ReactNode }) {
+    return (
+      <div data-testid="react-flow" data-node-count={nodes.length} data-edge-count={edges.length}>
+        {(nodes as { id: string; data: { label?: string } }[]).map((n) => (
+          <div key={n.id} data-testid={`node-${n.id}`}>
+            {n.data?.label ?? n.id}
+          </div>
+        ))}
+        {children}
+      </div>
+    )
+  }
+
+  function Controls() { return <div data-testid="controls" /> }
+  function Background() { return null }
+  function MiniMap() { return <div data-testid="minimap" /> }
+
+  return {
+    ReactFlow,
+    Controls,
+    Background,
+    MiniMap,
+    Handle,
+    Position,
+    BackgroundVariant,
+    useNodesState: (init: unknown[]) => {
+      const [s, setS] = useState(init)
+      return [s, setS, vi.fn()]
+    },
+    useEdgesState: (init: unknown[]) => {
+      const [s, setS] = useState(init)
+      return [s, setS, vi.fn()]
+    },
+  }
+})
+
+// Mock ELK for layout
+vi.mock('elkjs/lib/elk.bundled.js', () => ({
+  default: class MockELK {
+    async layout(graph: { children: { id: string }[] }) {
+      return {
+        children: graph.children.map((child, i) => ({
+          id: child.id,
+          x: i * 100,
+          y: i * 100,
+        })),
+      }
+    }
+  },
+}))
+
+const patterns: CookbookItem[] = [
+  {
+    name: 'energy-trading',
+    type: 'registry:pattern',
+    title: 'Energy Trading',
+    categories: ['energy'],
+    registryDependencies: ['fiat-settlement'],
+    meta: {
+      complexity: 7,
+      composes_with: ['carbon-offset'],
+      extends: [],
+      conflicts_with: [],
+    } satisfies PatternMeta,
+  },
+  {
+    name: 'fiat-settlement',
+    type: 'registry:pattern',
+    title: 'Fiat Settlement',
+    categories: ['foundation'],
+    meta: {
+      complexity: 3,
+    } satisfies PatternMeta,
+  },
+  {
+    name: 'carbon-offset',
+    type: 'registry:pattern',
+    title: 'Carbon Offset',
+    categories: ['carbon'],
+    meta: {
+      complexity: 5,
+      composes_with: ['energy-trading'],
+    } satisfies PatternMeta,
+  },
+]
+
+const mixedItems: CookbookItem[] = [
+  ...patterns,
+  {
+    name: 'balance-card',
+    type: 'registry:ui',
+    title: 'Balance Card',
+  },
+]
+
+function renderGraph(items: CookbookItem[]) {
+  return render(
+    <MemoryRouter>
+      <CompositionGraph patterns={items} className="h-96" />
+    </MemoryRouter>,
+  )
+}
+
+describe('CompositionGraph', () => {
+  it('renders ReactFlow container', () => {
+    renderGraph(patterns)
+    expect(screen.getByTestId('react-flow')).toBeInTheDocument()
+  })
+
+  it('renders controls and minimap', () => {
+    renderGraph(patterns)
+    expect(screen.getByTestId('controls')).toBeInTheDocument()
+    expect(screen.getByTestId('minimap')).toBeInTheDocument()
+  })
+
+  it('renders filter sidebar', () => {
+    renderGraph(patterns)
+    expect(screen.getByLabelText('Filter by category')).toBeInTheDocument()
+    expect(screen.getByLabelText('Filter by industry')).toBeInTheDocument()
+  })
+
+  it('renders edge legend', () => {
+    renderGraph(patterns)
+    expect(screen.getByText('Dependency')).toBeInTheDocument()
+    expect(screen.getByText('Composes with')).toBeInTheDocument()
+    expect(screen.getByText('Extends')).toBeInTheDocument()
+    expect(screen.getByText('Conflicts')).toBeInTheDocument()
+  })
+
+  it('filters out UI components (only patterns)', () => {
+    renderGraph(mixedItems)
+    expect(screen.getByText('3 patterns')).toBeInTheDocument()
+  })
+
+  it('shows category filter options', () => {
+    renderGraph(patterns)
+    const select = screen.getByLabelText('Filter by category')
+    expect(select).toBeInTheDocument()
+    const options = select.querySelectorAll('option')
+    expect(options.length).toBe(4) // All + 3 categories
+  })
+
+  it('renders with empty patterns', () => {
+    renderGraph([])
+    expect(screen.getByTestId('react-flow')).toBeInTheDocument()
+    expect(screen.getByText('0 patterns')).toBeInTheDocument()
+  })
+})