feat: cookbook pattern detail view (#1447)

* 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

* fix: use useReducer in usePatternFiles to satisfy React compiler

Replace multiple useState calls with useReducer to avoid cascading
renders from synchronous setState within useEffect.

* fix: add clipboard error handling and timeout cleanup in ManifestViewer

Wrap clipboard.writeText in try/catch for non-HTTPS environments.
Clear copy timeout on unmount and re-copy to prevent stale setState.

* fix: encode URL segments for pattern names with special characters

Encode patternName in fetch URLs and composition link paths to prevent
broken navigation for names containing reserved characters.

* fix: reset state on empty patternName and use typed composition links

Clear stale file content when patternName becomes undefined.
Use explicit linkTo property instead of colon-presence heuristic
for determining which composition items are navigable.

---------

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

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,81 @@
+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 copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | 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])
+
+  useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current)
+    }
+  }, [])
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current)
+      setCopied(true)
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Clipboard access denied (non-HTTPS or permission denied)
+    }
+  }, [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,68 @@
+import { useEffect, useReducer } from 'react'
+
+interface PatternFilesState {
+  starlarkContent: string | null
+  manifestContent: string | null
+  isLoading: boolean
+}
+
+type PatternFilesAction =
+  | { type: 'reset' }
+  | { type: 'fetch_start' }
+  | { type: 'fetch_done'; starlark: string | null; manifest: string | null }
+
+const initialState: PatternFilesState = {
+  starlarkContent: null,
+  manifestContent: null,
+  isLoading: false,
+}
+
+function reducer(_state: PatternFilesState, action: PatternFilesAction): PatternFilesState {
+  switch (action.type) {
+    case 'reset':
+      return initialState
+    case 'fetch_start':
+      return { starlarkContent: null, manifestContent: null, isLoading: true }
+    case 'fetch_done':
+      return { starlarkContent: action.starlark, manifestContent: action.manifest, isLoading: false }
+  }
+}
+
+export function usePatternFiles(patternName: string | undefined): PatternFilesState {
+  const [state, dispatch] = useReducer(reducer, initialState)
+
+  useEffect(() => {
+    if (!patternName) {
+      dispatch({ type: 'reset' })
+      return
+    }
+
+    let cancelled = false
+    dispatch({ type: 'fetch_start' })
+
+    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
+      }
+    }
+
+    const encoded = encodeURIComponent(patternName)
+    Promise.all([
+      fetchFile(`/cookbook/patterns/${encoded}/saga.star`),
+      fetchFile(`/cookbook/patterns/${encoded}/manifest.yaml`),
+    ]).then(([star, yaml]) => {
+      if (cancelled) return
+      dispatch({ type: 'fetch_done', starlark: star, manifest: yaml })
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [patternName])
+
+  return state
+}

frontend/src/features/cookbook/index.ts

@@ -4,6 +4,8 @@ export { CookbookGraphPage } from './pages/graph'
 export { CompositionGraph } from './components/composition-graph'
 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'
 export { parseStarlarkSaga } from './lib/star-parser'
 export type { SagaFlow, SagaFlowStep, ServiceCall, EarlyExit } from './lib/star-parser'
 export { generateMermaidMarkup } from './lib/saga-mermaid'