Component Visualizer

Graph Features

• Force-directed layout — nodes self-organize by dependency proximity
• Color-coded categories:
  • Blue: Route files (src/client/routes/)
  • Green: Feature components (src/client/components/)
  • Purple: UI components (src/client/components/ui/ — DSAI)
  • Gray: Other files
• Interactive — drag nodes, scroll to zoom, click for file details
• Filterable — toggle category visibility with checkboxes
• Hover highlighting — shows direct dependency edges for any node
• Zero dependencies — standalone HTML with embedded CSS/JS, no CDN

What It Scans

Import Resolution

The script resolves these import patterns:

• @/components/ui/button → src/client/components/ui/button.tsx
• @/components/app-sidebar → src/client/components/app-sidebar.tsx
• ../components/header → relative path resolution
• ./sub-component → same-directory resolution

Node module imports (e.g., react, @tanstack/router) are excluded.

Interpreting the Graph

Healthy patterns:

• Routes (blue) connect to components (green), which compose DSAI UI (purple)
• Clusters indicate feature groupings
• DSAI UI nodes have many incoming edges (high reuse)

Warning signs:

• Components with no incoming edges may be dead code
• Circular dependency clusters (tight bidirectional edges)
• Routes importing directly from ui/ (skipping feature abstraction layer)
• Single components with excessive outgoing edges (doing too much)

Limitations

• Static analysis only — does not resolve dynamic imports or React.lazy() paths
• Does not parse re-exports from barrel files (index.ts)
• TypeScript path aliases other than @/ are not resolved
• File must exist on disk (does not resolve virtual modules)