# akhil80git/scangithubrepo architecture

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

- Interactive diagram: https://gitdiagram.com/akhil80git/scangithubrepo
- Repository: https://github.com/akhil80git/scangithubrepo

## Overview

This web IDE takes a user from GitHub account/repository discovery through tree browsing and file loading into an editable workspace, with optional Gemini-assisted repository documentation and chat/code generation. `src/App.tsx` coordinates application state and invokes the API client; the Express server proxies GitHub and Gemini, while the client can fall back to direct external APIs. UI component interactions and several server details are inferred only from the README and partial excerpts, so uncertain wiring is omitted.

Main entry points: [`src/App.tsx`](https://github.com/akhil80git/scangithubrepo/blob/main/src/App.tsx) (App coordinator), [`src/services/apiClient.ts`](https://github.com/akhil80git/scangithubrepo/blob/main/src/services/apiClient.ts) (API client), [`server.ts`](https://github.com/akhil80git/scangithubrepo/blob/main/server.ts) (Express API), [`src/components/CodeWorkspace.tsx`](https://github.com/akhil80git/scangithubrepo/blob/main/src/components/CodeWorkspace.tsx) (Code and docs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_explore["Repository exploration"]
  node_repo_ui["Repository browser<br/>[RepoSidebar.tsx]"]
  node_tree_ui["File tree"]
  node_gitignore["Ignore matcher<br/>[gitignore.ts]"]
end

subgraph group_workspace["Code workspace"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_workspace_ui["Code and docs<br/>[CodeWorkspace.tsx]"]
  node_browser_store[("Browser storage")]
end

subgraph group_assistant["AI assistant"]
  node_chat_ui["Chat and studio<br/>[ChatPanel.tsx]"]
  node_token_ui["Token tracker<br/>[TokenSidebar.tsx]"]
  node_token_calc["Payload estimates<br/>[tokenCalc.ts]"]
end

subgraph group_backend["API and integrations"]
  node_api_client["API client<br/>[apiClient.ts]"]
  node_server["Express API<br/>[server.ts]"]
  node_github{{"GitHub API"}}
  node_gemini{{"Gemini model"}}
end

node_user(("User"))

node_user -->|"selects repository"| node_repo_ui
node_user -->|"browses files"| node_tree_ui
node_user -->|"edits and scans"| node_workspace_ui
node_user -->|"prompts assistant"| node_chat_ui
node_repo_ui -->|"repository selection"| node_app
node_tree_ui -->|"file selection"| node_app
node_workspace_ui -->|"workspace actions"| node_app
node_chat_ui -->|"chat and code actions"| node_app
node_app -->|"requests repositories, tree, files"| node_api_client
node_api_client -->|"proxies API requests"| node_server
node_api_client -.->|"direct API fallback"| node_github
node_server -->|"fetches repo data"| node_github
node_api_client -->|"parses ignore rules"| node_gitignore
node_server -->|"streams model generation"| node_gemini
node_api_client -.->|"direct stream fallback"| node_gemini
node_app -->|"stores username"| node_browser_store
node_app -->|"estimates prompt usage"| node_token_calc
node_token_ui -->|"calculates message sizes"| node_token_calc
node_app -->|"provides active file and docs"| node_workspace_ui
node_app -->|"provides messages and file context"| node_chat_ui
node_app -->|"provides conversation usage"| node_token_ui

click node_app "https://github.com/akhil80git/scangithubrepo/blob/main/src/App.tsx"
click node_repo_ui "https://github.com/akhil80git/scangithubrepo/blob/main/src/components/RepoSidebar.tsx"
click node_tree_ui "https://github.com/akhil80git/scangithubrepo/blob/main/src/components/FileTreeSidebar.tsx"
click node_gitignore "https://github.com/akhil80git/scangithubrepo/blob/main/src/utils/gitignore.ts"
click node_workspace_ui "https://github.com/akhil80git/scangithubrepo/blob/main/src/components/CodeWorkspace.tsx"
click node_chat_ui "https://github.com/akhil80git/scangithubrepo/blob/main/src/components/ChatPanel.tsx"
click node_token_ui "https://github.com/akhil80git/scangithubrepo/blob/main/src/components/TokenSidebar.tsx"
click node_token_calc "https://github.com/akhil80git/scangithubrepo/blob/main/src/utils/tokenCalc.ts"
click node_api_client "https://github.com/akhil80git/scangithubrepo/blob/main/src/services/apiClient.ts"
click node_server "https://github.com/akhil80git/scangithubrepo/blob/main/server.ts"

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_repo_ui,node_tree_ui,node_gitignore,node_user toneBlue
class node_app,node_workspace_ui,node_browser_store toneAmber
class node_chat_ui,node_token_ui,node_token_calc toneMint
class node_api_client,node_server,node_github,node_gemini toneRose
```

## Components

### Repository exploration

- [Repository browser](https://github.com/akhil80git/scangithubrepo/blob/main/src/components/RepoSidebar.tsx): `src/components/RepoSidebar.tsx`
- [File tree](https://github.com/akhil80git/scangithubrepo/blob/main/src/components/FileTreeSidebar.tsx): `src/components/FileTreeSidebar.tsx`
- [Ignore matcher](https://github.com/akhil80git/scangithubrepo/blob/main/src/utils/gitignore.ts): `src/utils/gitignore.ts`

### Code workspace

- [App coordinator](https://github.com/akhil80git/scangithubrepo/blob/main/src/App.tsx): `src/App.tsx`
- [Code and docs](https://github.com/akhil80git/scangithubrepo/blob/main/src/components/CodeWorkspace.tsx): `src/components/CodeWorkspace.tsx`
- **Browser storage**

### AI assistant

- [Chat and studio](https://github.com/akhil80git/scangithubrepo/blob/main/src/components/ChatPanel.tsx): `src/components/ChatPanel.tsx`
- [Token tracker](https://github.com/akhil80git/scangithubrepo/blob/main/src/components/TokenSidebar.tsx): `src/components/TokenSidebar.tsx`
- [Payload estimates](https://github.com/akhil80git/scangithubrepo/blob/main/src/utils/tokenCalc.ts): `src/utils/tokenCalc.ts`

### API and integrations

- [API client](https://github.com/akhil80git/scangithubrepo/blob/main/src/services/apiClient.ts): `src/services/apiClient.ts`
- [Express API](https://github.com/akhil80git/scangithubrepo/blob/main/server.ts): `server.ts`
- **GitHub API**
- **Gemini model**

### Other components

- **User**

## Connections

- User → Repository browser: selects repository
- User → File tree: browses files
- User → Code and docs: edits and scans
- User → Chat and studio: prompts assistant
- Repository browser → App coordinator: repository selection
- File tree → App coordinator: file selection
- Code and docs → App coordinator: workspace actions
- Chat and studio → App coordinator: chat and code actions
- App coordinator → API client: requests repositories, tree, files
- API client → Express API: proxies API requests
- API client → GitHub API: direct API fallback
- Express API → GitHub API: fetches repo data
- API client → Ignore matcher: parses ignore rules
- Express API → Gemini model: streams model generation
- API client → Gemini model: direct stream fallback
- App coordinator → Browser storage: stores username
- App coordinator → Payload estimates: estimates prompt usage
- Token tracker → Payload estimates: calculates message sizes
- App coordinator → Code and docs: provides active file and docs
- App coordinator → Chat and studio: provides messages and file context
- App coordinator → Token tracker: provides conversation usage