feat: implement cookbook pattern detail view

- Detail page with breadcrumbs, pattern info, type badge, complexity indicator
- Tabbed interface: Manifest (YAML viewer), Starlark (read-only editor), Composition
- ManifestViewer component with CodeMirror and copy-to-clipboard
- usePatternFiles hook for lazy file content fetching
- Composition section with linked badges for dependencies
- UI component type shows placeholder for future preview
- Tests for detail page, manifest viewer, and pattern files hook

Author: bjcoombs

frontend/src/features/cookbook/components/manifest-viewer.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ManifestViewer } from './manifest-viewer'
+
+vi.mock('codemirror', () => ({ basicSetup: [] }))
+vi.mock('@codemirror/view', () => ({
+  EditorView: class MockEditorView {
+    static editable = { of: vi.fn(() => ({})) }
+    dom: HTMLElement
+    state: { doc: { toString: () => string } }
+    dispatch = vi.fn()
+    constructor(config: { state?: unknown; parent?: HTMLElement }) {
+      this.dom = document.createElement('div')
+      this.dom.className = 'cm-editor'
+      this.dom.textContent = 'yaml content'
+      this.state = { doc: { toString: () => 'yaml content' } }
+      if (config.parent) config.parent.appendChild(this.dom)
+    }
+    destroy() {}
+  },
+}))
+vi.mock('@codemirror/state', () => ({
+  EditorState: { create: vi.fn(() => ({})), readOnly: { of: vi.fn(() => ({})) } },
+}))
+
+describe('ManifestViewer', () => {
+  it('renders the viewer container', () => {
+    render(<ManifestViewer content="name: test" />)
+    expect(screen.getByTestId('manifest-viewer')).toBeInTheDocument()
+  })
+
+  it('renders the copy button', () => {
+    render(<ManifestViewer content="name: test" />)
+    expect(screen.getByRole('button', { name: /copy manifest/i })).toBeInTheDocument()
+  })
+
+  it('copies content to clipboard on button click', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.assign(navigator, { clipboard: { writeText } })
+
+    render(<ManifestViewer content="name: test" />)
+    fireEvent.click(screen.getByRole('button', { name: /copy manifest/i }))
+
+    expect(writeText).toHaveBeenCalledWith('name: test')
+  })
+})

frontend/src/features/cookbook/components/manifest-viewer.tsx

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { basicSetup } from 'codemirror'
+import { Copy, Check } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface ManifestViewerProps {
+  content: string
+  className?: string
+}
+
+export function ManifestViewer({ content, className }: ManifestViewerProps) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (!editorRef.current) return
+
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: content,
+        extensions: [
+          basicSetup,
+          EditorView.editable.of(false),
+          EditorState.readOnly.of(true),
+        ],
+      }),
+      parent: editorRef.current,
+    })
+
+    viewRef.current = view
+
+    return () => {
+      view.destroy()
+      viewRef.current = null
+    }
+  }, [content])
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(content)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [content])
+
+  return (
+    <div data-testid="manifest-viewer" className={cn('relative', className)}>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="absolute right-2 top-2 z-10 h-7 w-7 p-0"
+        onClick={handleCopy}
+        aria-label="Copy manifest"
+      >
+        {copied ? (
+          <Check className="h-3.5 w-3.5 text-green-600" />
+        ) : (
+          <Copy className="h-3.5 w-3.5" />
+        )}
+      </Button>
+      <div
+        ref={editorRef}
+        className="min-h-[200px] rounded border border-input bg-background text-sm"
+      />
+    </div>
+  )
+}

frontend/src/features/cookbook/hooks/use-pattern-files.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { renderHook, waitFor } from '@testing-library/react'
+import { usePatternFiles } from './use-pattern-files'
+
+describe('usePatternFiles', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('returns null content when no pattern name provided', () => {
+    const { result } = renderHook(() => usePatternFiles(undefined))
+    expect(result.current.starlarkContent).toBeNull()
+    expect(result.current.manifestContent).toBeNull()
+    expect(result.current.isLoading).toBe(false)
+  })
+
+  it('fetches starlark and manifest files', async () => {
+    vi.spyOn(globalThis, 'fetch').mockImplementation(async (url) => {
+      const path = typeof url === 'string' ? url : url.toString()
+      if (path.includes('saga.star')) {
+        return new Response('def execute():\n  pass', { status: 200 })
+      }
+      if (path.includes('manifest.yaml')) {
+        return new Response('name: test\ntype: registry:pattern', { status: 200 })
+      }
+      return new Response('', { status: 404 })
+    })
+
+    const { result } = renderHook(() => usePatternFiles('test-pattern'))
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+
+    expect(result.current.starlarkContent).toBe('def execute():\n  pass')
+    expect(result.current.manifestContent).toBe('name: test\ntype: registry:pattern')
+  })
+
+  it('returns null for files that return 404', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('', { status: 404 }))
+
+    const { result } = renderHook(() => usePatternFiles('missing-pattern'))
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+
+    expect(result.current.starlarkContent).toBeNull()
+    expect(result.current.manifestContent).toBeNull()
+  })
+
+  it('returns null for fetch errors', async () => {
+    vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('Network error'))
+
+    const { result } = renderHook(() => usePatternFiles('broken-pattern'))
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+
+    expect(result.current.starlarkContent).toBeNull()
+    expect(result.current.manifestContent).toBeNull()
+  })
+})

frontend/src/features/cookbook/hooks/use-pattern-files.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+
+interface PatternFilesResult {
+  starlarkContent: string | null
+  manifestContent: string | null
+  isLoading: boolean
+}
+
+export function usePatternFiles(patternName: string | undefined): PatternFilesResult {
+  const [starlarkContent, setStarlarkContent] = useState<string | null>(null)
+  const [manifestContent, setManifestContent] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (!patternName) return
+
+    let cancelled = false
+    setIsLoading(true)
+    setStarlarkContent(null)
+    setManifestContent(null)
+
+    const fetchFile = async (path: string): Promise<string | null> => {
+      try {
+        const res = await fetch(path)
+        if (!res.ok) return null
+        return await res.text()
+      } catch {
+        return null
+      }
+    }
+
+    Promise.all([
+      fetchFile(`/cookbook/patterns/${patternName}/saga.star`),
+      fetchFile(`/cookbook/patterns/${patternName}/manifest.yaml`),
+    ]).then(([star, yaml]) => {
+      if (cancelled) return
+      setStarlarkContent(star)
+      setManifestContent(yaml)
+      setIsLoading(false)
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [patternName])
+
+  return { starlarkContent, manifestContent, isLoading }
+}

frontend/src/features/cookbook/index.ts

@@ -2,3 +2,5 @@ export { CookbookPage } from './pages/index'
 export { CookbookDetailPage } from './pages/detail'
 export type { CookbookItem, CookbookFile, CookbookRegistry, PatternMeta, ComponentMeta } from './hooks/use-cookbook'
 export { useCookbook } from './hooks/use-cookbook'
+export { usePatternFiles } from './hooks/use-pattern-files'
+export { ManifestViewer } from './components/manifest-viewer'

frontend/src/features/cookbook/pages/detail.test.tsx

@@ -0,0 +1,158 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { CookbookDetailPage } from './detail'
+import type { CookbookItem, PatternMeta } from '../hooks/use-cookbook'
+
+// Mock CodeMirror (jsdom doesn't support it)
+vi.mock('codemirror', () => ({ basicSetup: [] }))
+vi.mock('@codemirror/view', () => ({
+  EditorView: class MockEditorView {
+    static editable = { of: vi.fn(() => ({})) }
+    static updateListener = { of: vi.fn(() => ({})) }
+    dom: HTMLElement
+    state: { doc: { toString: () => string } }
+    dispatch = vi.fn()
+    constructor(config: { doc?: string; extensions?: unknown[]; parent?: HTMLElement }) {
+      this.dom = document.createElement('div')
+      this.dom.className = 'cm-editor'
+      this.state = { doc: { toString: () => config.doc ?? '' } }
+      if (config.parent) config.parent.appendChild(this.dom)
+    }
+    destroy() {}
+  },
+}))
+vi.mock('@codemirror/state', () => ({
+  Compartment: class { of = vi.fn(() => ({})); reconfigure = vi.fn(() => ({})) },
+  EditorState: { create: vi.fn(() => ({})), readOnly: { of: vi.fn(() => ({})) } },
+  Transaction: { userEvent: 'user-event' },
+}))
+vi.mock('@codemirror/lang-python', () => ({ python: vi.fn(() => ({})) }))
+vi.mock('@codemirror/lint', () => ({
+  linter: vi.fn(() => ({})),
+  lintGutter: vi.fn(() => ({})),
+}))
+
+const mockUseCookbook = vi.fn<() => { items: CookbookItem[]; isLoading: boolean }>()
+vi.mock('../hooks/use-cookbook', () => ({
+  useCookbook: () => mockUseCookbook(),
+}))
+
+const mockUsePatternFiles = vi.fn<() => { starlarkContent: string | null; manifestContent: string | null; isLoading: boolean }>()
+vi.mock('../hooks/use-pattern-files', () => ({
+  usePatternFiles: () => mockUsePatternFiles(),
+}))
+
+function renderDetail(name: string) {
+  return render(
+    <MemoryRouter initialEntries={[`/cookbook/${name}`]}>
+      <Routes>
+        <Route path="/cookbook/:name" element={<CookbookDetailPage />} />
+      </Routes>
+    </MemoryRouter>,
+  )
+}
+
+const patternItem: CookbookItem = {
+  name: 'fiat-current-account',
+  type: 'registry:pattern',
+  title: 'Fiat Current Account',
+  description: 'Standard fiat current account pattern for retail banking.',
+  categories: ['banking', 'retail'],
+  meta: {
+    complexity: 3,
+    design_pattern: 'Double-Entry Ledger',
+    industries: ['banking'],
+    composes_with: ['overdraft-facility'],
+    extends: [],
+    conflicts_with: ['crypto-wallet'],
+    provides: { instruments: ['GBP'], sagas: ['deposit'] },
+    requires: { instruments: ['GBP'] },
+  } satisfies PatternMeta,
+}
+
+const uiItem: CookbookItem = {
+  name: 'transaction-table',
+  type: 'registry:ui',
+  title: 'Transaction Table',
+  description: 'Reusable transaction data table.',
+}
+
+describe('CookbookDetailPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseCookbook.mockReturnValue({ items: [patternItem, uiItem], isLoading: false })
+    mockUsePatternFiles.mockReturnValue({ starlarkContent: null, manifestContent: null, isLoading: false })
+  })
+
+  it('shows loading skeleton while catalogue is loading', () => {
+    mockUseCookbook.mockReturnValue({ items: [], isLoading: true })
+    renderDetail('fiat-current-account')
+    expect(screen.getByTestId('detail-skeleton')).toBeInTheDocument()
+  })
+
+  it('shows not-found message for unknown pattern', () => {
+    renderDetail('nonexistent')
+    expect(screen.getByText(/not found/i)).toBeInTheDocument()
+  })
+
+  it('renders pattern title and description', () => {
+    renderDetail('fiat-current-account')
+    expect(screen.getByRole('heading', { name: 'Fiat Current Account' })).toBeInTheDocument()
+    expect(screen.getByText(/Standard fiat current account/)).toBeInTheDocument()
+  })
+
+  it('renders type badge for pattern', () => {
+    renderDetail('fiat-current-account')
+    expect(screen.getByText('Pattern')).toBeInTheDocument()
+  })
+
+  it('renders complexity indicator', () => {
+    renderDetail('fiat-current-account')
+    expect(screen.getByText(/Complexity: 3/)).toBeInTheDocument()
+  })
+
+  it('renders categories as badges', () => {
+    renderDetail('fiat-current-account')
+    expect(screen.getByText('retail')).toBeInTheDocument()
+    // 'banking' appears in both categories and industries
+    expect(screen.getAllByText('banking').length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('renders tabs for pattern type', () => {
+    renderDetail('fiat-current-account')
+    expect(screen.getByRole('tab', { name: 'Manifest' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Starlark' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Composition' })).toBeInTheDocument()
+  })
+
+  it('shows placeholder for UI component type', () => {
+    renderDetail('transaction-table')
+    expect(screen.getByText(/UI component preview/)).toBeInTheDocument()
+    expect(screen.queryByRole('tab')).not.toBeInTheDocument()
+  })
+
+  it('renders breadcrumb navigation', () => {
+    renderDetail('fiat-current-account')
+    const breadcrumb = screen.getByLabelText('Breadcrumb')
+    expect(breadcrumb).toBeInTheDocument()
+    expect(screen.getByText('Cookbook')).toBeInTheDocument()
+    // Title appears in both breadcrumb and heading
+    expect(screen.getAllByText('Fiat Current Account').length).toBe(2)
+  })
+
+  it('shows no manifest message when file not found', () => {
+    renderDetail('fiat-current-account')
+    expect(screen.getByText(/No manifest file found/)).toBeInTheDocument()
+  })
+
+  it('renders manifest viewer when content available', () => {
+    mockUsePatternFiles.mockReturnValue({
+      starlarkContent: null,
+      manifestContent: 'name: test\ntype: registry:pattern',
+      isLoading: false,
+    })
+    renderDetail('fiat-current-account')
+    expect(screen.getByTestId('manifest-viewer')).toBeInTheDocument()
+  })
+})