feat(#72): implement interactive graph visualization component

- Create KnowledgeGraphViewer component with @xyflow/react
- Implement three layout types: force-directed, hierarchical (ELK), circular
- Add node sizing based on connection count (40px-120px range)
- Apply PDA-friendly status colors (green=published, blue=draft, gray=archived)
- Highlight orphan nodes with distinct color
- Add interactive features: zoom, pan, click-to-navigate
- Implement filters: status, tags, show/hide orphans
- Add statistics display and legend panel
- Create comprehensive test suite (16 tests, all passing)
- Add fetchKnowledgeGraph API function
- Create /knowledge/graph page
- Performance tested with 500+ nodes
- All quality gates passed (tests, typecheck, lint)

Refs #72

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

docs/scratchpads/72-graph-visualization.md

@@ -0,0 +1,127 @@
+# Issue #72: Graph Visualization Component
+
+## Objective
+
+Create interactive knowledge graph visualization component in Next.js web UI using the graph API from issue #71.
+
+## Approach
+
+1. Research and select graph visualization library
+2. Follow TDD: Write tests before implementation
+3. Create graph visualization component with:
+   - Force-directed layout
+   - Node sizing based on connections
+   - PDA-friendly status colors
+   - Click handlers for navigation
+   - Zoom/pan controls
+   - Layout toggle options
+4. Performance test with 500+ nodes
+5. Integrate with graph API
+
+## Library Selection
+
+Evaluating options:
+
+- **react-force-graph**: WebGL-based, high performance, good for 500+ nodes
+- **vis-network**: Canvas-based, feature-rich
+- **d3-force**: Low-level, full control but more complex
+
+**Decision: react-force-graph-2d**
+
+- Best performance for 500+ nodes (WebGL rendering)
+- Simple API
+- Built-in zoom/pan
+- Easy to customize node appearance
+- Active maintenance
+
+## Progress
+
+- [x] Create scratchpad
+- [x] Set up component structure
+- [x] Write tests (TDD) - 16 tests, all passing
+- [x] Implement basic graph rendering
+- [x] Add node sizing logic (based on connection count)
+- [x] Add status-based coloring (PDA-friendly colors)
+- [x] Implement click handlers (navigation to entry)
+- [x] Add layout controls (force, hierarchical, circular)
+- [x] Performance testing (supports 500+ nodes)
+- [x] Create display page at /knowledge/graph
+- [x] Add filters (status, tags, orphans)
+- [x] Type checking passes
+- [x] Linting passes
+- [ ] Code review
+- [ ] QA checks
+- [ ] Commit and close issue
+
+## Testing Strategy
+
+1. Unit tests for graph component
+2. Test node rendering
+3. Test interaction handlers
+4. Test layout switching
+5. Performance test with large datasets
+
+## PDA-Friendly Colors
+
+From CLAUDE.md:
+
+- 🟢 Active: green-500
+- 🔵 Scheduled: blue-500
+- ⏸️ Paused: yellow-500
+- 💤 Dormant: gray-400
+- ⚪ Archived: gray-300
+
+## Implementation Summary
+
+### Components Created
+
+1. **KnowledgeGraphViewer.tsx** - Main graph visualization component
+   - Force-directed, hierarchical, and circular layout options
+   - PDA-friendly status colors (green=published, blue=draft, gray=archived)
+   - Node sizing based on connection count
+   - Interactive zoom/pan controls
+   - Click to navigate to entry
+   - Filters: status, tags, orphan visibility
+   - Legend panel showing color meanings
+
+2. **KnowledgeGraphViewer.test.tsx** - Comprehensive test suite
+   - 16 tests covering all features
+   - 100% test pass rate
+   - Performance test with 500+ nodes
+
+3. **page.tsx** - Display page at /knowledge/graph
+
+### API Integration
+
+- Added fetchKnowledgeGraph() to knowledge.ts API client
+- Fetches from /api/knowledge/graph endpoint (implemented in issue #71)
+- Supports filtering by tags, status, and limit
+
+### Libraries Used
+
+- @xyflow/react - Graph rendering and layout
+- elkjs - Hierarchical layout algorithm
+- Already in package.json, no new dependencies needed
+
+### Features Implemented
+
+- ✅ Force-directed layout (default)
+- ✅ Hierarchical layout (ELK algorithm)
+- ✅ Circular layout
+- ✅ Node sizing based on connections (40px - 120px)
+- ✅ PDA-friendly colors by status
+- ✅ Orphan node detection and highlighting
+- ✅ Click to navigate to entry
+- ✅ Zoom and pan controls (ReactFlow built-in)
+- ✅ MiniMap for navigation
+- ✅ Filters: status, tags, show/hide orphans
+- ✅ Statistics display (total nodes, edges, orphans)
+- ✅ Legend panel
+- ✅ Performance tested with 500+ nodes
+
+### Notes
+
+- Using @xyflow/react instead of react-force-graph (already in dependencies)
+- Memoization implemented for filtered nodes/edges
+- Layout calculations are async to prevent UI blocking
+- All quality gates passed (tests, typecheck, lint)