Feature: Add C4 Architecture Diagrams (L1-L3)

[kibarik]

Problem

Current dependency graph visualization in RepoWise UI, while visually appealing, doesn't provide actionable insights for repository navigation and understanding. The existing graph view modes (module, full, architecture, dead, hotfiles) display complex network relationships that are difficult to interpret and don't align with standard software architecture visualization practices.

When exploring a new repository or understanding codebase structure, I need:

• Clear hierarchical representation of system boundaries
• Standard abstraction levels (system → containers → components)
• Easy navigation between different architectural levels
• Focus on structural understanding rather than complex dependency webs

Proposed Solution

Add C4 model support with L1-L3 diagram levels:

L1 - System Context

• Shows repository in context of external dependencies
• Displays upstream dependencies (libraries, frameworks)
• Shows downstream consumers (if available)
• Simple, high-level view for quick orientation

L2 - Container View

• Displays major modules/packages as containers
• Shows relationships between top-level components
• Represents monorepo structure clearly (packages/cli, packages/core, packages/server, packages/web)
• Interactive drill-down into each container

L3 - Component View

• Internal structure of selected container/module
• Files, classes, functions within specific module
• Internal dependencies and relationships
• Focused, scoped view for detailed understanding

Implementation approach:

1. Extend existing graph data model to support C4 hierarchy
2. Add new view mode "c4" to GraphFlow component
3. Create C4-specific layout algorithms (hierarchical tree, layered)
4. Add C4 navigation controls (level selector, breadcrumb navigation)
5. Integrate with existing module/architecture graph data sources

UI/UX:

• Level tabs: [L1 System | L2 Containers | L3 Components]
• Interactive zoom and pan at each level
• Click-through navigation (L2 node → opens L3 view)
• Breadcrumb trail: System > packages/core > ingestion/
• Export as PNG/SVG for documentation

Alternatives Considered

1. Improve existing graphs: Could enhance current graph layouts, but fundamental issue is wrong abstraction level for navigation
2. PlantUML/Mermaid integration: Could use external tools, but adds dependency and reduces interactivity
3. Custom hierarchy viewer: Simpler but less standardized than C4 approach

C4 model provides industry-standard semantics and familiar mental model for developers.

Additional Context

C4 Model Reference: https://c4model.com/

Current limitation: The existing GraphFlow component with view modes like "architecture" still shows network graphs rather than hierarchical structural diagrams.

Priority: High - This would significantly improve RepoWise value for codebase onboarding and architectural understanding.

Use cases:

• New developer onboarding to unfamiliar codebases
• Quick architectural assessment for code reviews
• Documentation generation with structural diagrams
• Migration planning (monolith → microservices analysis)
• Dead code identification with proper context