Concept Graph Visualization App

Objective

Build a Neo.mjs application that visualizes the concept ontology graph interactively. Provides value as both a validation tool and an LLM context primer.

Context

Phase 2 of the Concept Ontology epic (#10030). Depends on the ConceptService from #10032.

Deliverables

Neo.mjs Visualization App

Location: examples/conceptGraph/ or apps/conceptGraph/

Features

1. Hierarchical tree view of all concepts (using Neo.mjs tree component or LearningSection-like layout)
2. Color-coded by tier: Tier 1 (red/high priority), Tier 2 (orange), Tier 3 (blue)
3. Coverage status indicators: ✅ has guide, ⚠️ partial coverage, 🔴 gap
4. Click concept → detail panel showing:
   • Description
   • IMPLEMENTED_BY classes (with file paths)
   • EXPLAINED_BY guides (with links)
   • EXEMPLIFIED_BY examples
   • REQUIRES prerequisites
5. Gap report view: Filter to show only concepts missing guides, sorted by weight
6. Export: Serialize current concept tree as compact text (the LLM context format)

Optional: Force-Directed Graph View

If feasible, add a d3-force or pure-Neo.mjs force-directed layout showing concept nodes and relationships visually. This gives a spatial overview of the knowledge architecture.

Data Source

Loads directly from .neo-ai-data/concepts/nodes.jsonl and edges.jsonl via fetch or the ConceptService.

Value Proposition

1. Validation tool: Visually inspect the concept graph for errors, missing relationships, tier assignments
2. Curation UI: Identify gaps and malformed entries before they enter the real graph
3. Dogfooding: Neo.mjs visualizing its own architecture — showcase material
4. LLM primer: The serialized tree view can be copy-pasted into agent prompts

Acceptance Criteria

• App loads and renders the full concept hierarchy
• Tree view supports expand/collapse
• Coverage status is visible per concept
• Gap report filters correctly by weight threshold
• Runs in development mode (npx neo-app)

Origin Session ID: 496c0120-29aa-4b02-a804-d5a32ff6b5eb