# ashutoshpalhare/repolens architecture

> Architecture diagram of the GitHub repository ashutoshpalhare/repolens, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ashutoshpalhare/repolens
- Repository: https://github.com/ashutoshpalhare/repolens

## Overview

RepoLens is a browser-based GitHub repository explorer. Users submit a repository reference, then browse its file tree and source, review repository insights, or inspect a lightweight import-dependency map. The documented workflow and sampled code show repository data fetching and analysis coordinated by a React Query hook, with dependency analysis optionally delegated to a worker. The workspace route wiring and several panel implementations were not sampled, so those connections reflect documented capabilities; uncertain implementation details are omitted.

Main entry points: [`src/hooks/useRepoData.ts`](https://github.com/ashutoshpalhare/repolens/blob/main/src/hooks/useRepoData.ts) (Repository data hook), [`src/lib/github.ts`](https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/github.ts) (GitHub API client), [`src/routes/index.tsx`](https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/index.tsx) (Repository input), [`src/routes/r.$owner.$repo.tsx`](https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/r.%24owner.%24repo.tsx) (Repository workspace)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Repository entry"]
  node_landing["Repository input<br/>[index.tsx]"]
  node_workspace_route["Repository workspace<br/>[r.$owner.$repo.tsx]"]
  node_overview_route["Repository overview"]
  node_architecture_route["Architecture route"]
end

subgraph group_data["Repository data"]
  node_input_parser["Input parser<br/>[github.ts]"]
  node_repo_data["Repository data hook<br/>[useRepoData.ts]"]
  node_github_client["GitHub API client<br/>[github.ts]"]
  node_repo_types["Repository data types<br/>[repo.ts]"]
end

subgraph group_analysis["Analysis"]
  node_tree_builder["File tree and insights<br/>[analysis.ts]"]
  node_source_picker["Source file selection<br/>[analysis.ts]"]
  node_source_parser["Source parser<br/>[parse.ts]"]
  node_dependency_builder["Dependency graph builder<br/>[analysis.ts]"]
  node_analysis_worker["Analysis worker<br/>[deps.worker.ts]"]
end

subgraph group_workspace["Workspace"]
  node_file_explorer["File explorer<br/>[FileExplorer.tsx]"]
  node_code_viewer["Code viewer<br/>[CodeViewer.tsx]"]
  node_insights_panel["Insights panel<br/>[InsightsPanel.tsx]"]
  node_architecture_view["Architecture map"]
end

node_user(("Developer"))
node_github_api{{"GitHub REST API"}}

node_user -->|"enters repository"| node_landing
node_landing -->|"validates reference"| node_input_parser
node_landing -->|"navigates to"| node_workspace_route
node_workspace_route -->|"loads repository"| node_repo_data
node_repo_data -->|"requests metadata and tree"| node_github_client
node_github_client -->|"fetches repository data"| node_github_api
node_repo_data -->|"builds tree and insights"| node_tree_builder
node_repo_data -->|"uses shared data shapes"| node_repo_types
node_repo_data -->|"fetches selected file"| node_github_client
node_repo_data -->|"provides file tree"| node_file_explorer
node_repo_data -->|"provides file content"| node_code_viewer
node_repo_data -->|"provides insights"| node_insights_panel
node_repo_data -->|"provides repository data"| node_overview_route
node_workspace_route -->|"opens architecture"| node_architecture_route
node_repo_data -->|"selects source files"| node_source_picker
node_repo_data -->|"fetches candidate sources"| node_github_client
node_source_picker -->|"parses source imports"| node_source_parser
node_source_parser -->|"produces parsed modules"| node_dependency_builder
node_repo_data -.->|"dispatches graph request"| node_analysis_worker
node_analysis_worker -->|"builds graph"| node_dependency_builder
node_repo_data -->|"builds graph on fallback"| node_dependency_builder
node_repo_data -->|"provides dependency graph"| node_architecture_view
node_architecture_route -->|"renders dependency map"| node_architecture_view
node_architecture_view -->|"opens selected file"| node_code_viewer

click node_landing "https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/index.tsx"
click node_input_parser "https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/github.ts"
click node_workspace_route "https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/r.%24owner.%24repo.tsx"
click node_repo_data "https://github.com/ashutoshpalhare/repolens/blob/main/src/hooks/useRepoData.ts"
click node_github_client "https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/github.ts"
click node_repo_types "https://github.com/ashutoshpalhare/repolens/blob/main/src/types/repo.ts"
click node_tree_builder "https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/analysis.ts"
click node_file_explorer "https://github.com/ashutoshpalhare/repolens/blob/main/src/components/repolens/FileExplorer.tsx"
click node_code_viewer "https://github.com/ashutoshpalhare/repolens/blob/main/src/components/repolens/CodeViewer.tsx"
click node_insights_panel "https://github.com/ashutoshpalhare/repolens/blob/main/src/components/repolens/InsightsPanel.tsx"
click node_overview_route "https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/r.%24owner.%24repo.overview.tsx"
click node_architecture_route "https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/r.%24owner.%24repo.architecture.tsx"
click node_source_picker "https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/analysis.ts"
click node_source_parser "https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/parse.ts"
click node_dependency_builder "https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/analysis.ts"
click node_analysis_worker "https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/deps.worker.ts"
click node_architecture_view "https://github.com/ashutoshpalhare/repolens/blob/main/src/components/repolens/ArchitectureView.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_landing,node_workspace_route,node_overview_route,node_architecture_route toneBlue
class node_input_parser,node_repo_data,node_github_client,node_repo_types toneAmber
class node_tree_builder,node_source_picker,node_source_parser,node_dependency_builder,node_analysis_worker,node_github_api toneMint
class node_file_explorer,node_code_viewer,node_insights_panel,node_architecture_view toneRose
class node_user toneIndigo
```

## Components

### Repository entry

- [Repository input](https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- [Repository workspace](https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/r.%24owner.%24repo.tsx): `src/routes/r.$owner.$repo.tsx`
- [Repository overview](https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/r.%24owner.%24repo.overview.tsx): `src/routes/r.$owner.$repo.overview.tsx`
- [Architecture route](https://github.com/ashutoshpalhare/repolens/blob/main/src/routes/r.%24owner.%24repo.architecture.tsx): `src/routes/r.$owner.$repo.architecture.tsx`

### Repository data

- [Input parser](https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/github.ts): `src/lib/github.ts`
- [Repository data hook](https://github.com/ashutoshpalhare/repolens/blob/main/src/hooks/useRepoData.ts): `src/hooks/useRepoData.ts`
- [GitHub API client](https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/github.ts): `src/lib/github.ts`
- [Repository data types](https://github.com/ashutoshpalhare/repolens/blob/main/src/types/repo.ts): `src/types/repo.ts`

### Analysis

- [File tree and insights](https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/analysis.ts): `src/lib/analysis.ts`
- [Source file selection](https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/analysis.ts): `src/lib/analysis.ts`
- [Source parser](https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/parse.ts): `src/lib/parse.ts`
- [Dependency graph builder](https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/analysis.ts): `src/lib/analysis.ts`
- [Analysis worker](https://github.com/ashutoshpalhare/repolens/blob/main/src/lib/deps.worker.ts): `src/lib/deps.worker.ts`

### Workspace

- [File explorer](https://github.com/ashutoshpalhare/repolens/blob/main/src/components/repolens/FileExplorer.tsx): `src/components/repolens/FileExplorer.tsx`
- [Code viewer](https://github.com/ashutoshpalhare/repolens/blob/main/src/components/repolens/CodeViewer.tsx): `src/components/repolens/CodeViewer.tsx`
- [Insights panel](https://github.com/ashutoshpalhare/repolens/blob/main/src/components/repolens/InsightsPanel.tsx): `src/components/repolens/InsightsPanel.tsx`
- [Architecture map](https://github.com/ashutoshpalhare/repolens/blob/main/src/components/repolens/ArchitectureView.tsx): `src/components/repolens/ArchitectureView.tsx`

### Other components

- **Developer**
- **GitHub REST API**

## Connections

- Developer → Repository input: enters repository
- Repository input → Input parser: validates reference
- Repository input → Repository workspace: navigates to
- Repository workspace → Repository data hook: loads repository
- Repository data hook → GitHub API client: requests metadata and tree
- GitHub API client → GitHub REST API: fetches repository data
- Repository data hook → File tree and insights: builds tree and insights
- Repository data hook → Repository data types: uses shared data shapes
- Repository data hook → GitHub API client: fetches selected file
- Repository data hook → File explorer: provides file tree
- Repository data hook → Code viewer: provides file content
- Repository data hook → Insights panel: provides insights
- Repository data hook → Repository overview: provides repository data
- Repository workspace → Architecture route: opens architecture
- Repository data hook → Source file selection: selects source files
- Repository data hook → GitHub API client: fetches candidate sources
- Source file selection → Source parser: parses source imports
- Source parser → Dependency graph builder: produces parsed modules
- Repository data hook → Analysis worker: dispatches graph request
- Analysis worker → Dependency graph builder: builds graph
- Repository data hook → Dependency graph builder: builds graph on fallback
- Repository data hook → Architecture map: provides dependency graph
- Architecture route → Architecture map: renders dependency map
- Architecture map → Code viewer: opens selected file