How CodeFlow Uses a Single HTML File to X‑Ray Your Repository Architecture and Compute Change Impact

Core Features

Interactive Dependency Graph : Click any node to highlight its dependencies; supports drag, zoom, and full‑screen view.

Explosion‑Radius Analysis : Select a file and instantly see how many other files are affected by a change.

Code Ownership : Shows the main contributor for each file based on Git history.

Security Scan : Detects hard‑coded secrets, SQL‑injection patterns, dangerous eval usage, and leftover debug statements.

Pattern Detection : Recognizes Singleton, Factory, Observer/Event, React Hooks, and anti‑patterns such as God objects.

Health Scoring : Grades the codebase (A‑F) using dead‑code percentage, circular dependencies, coupling metrics, and security issues.

Activity Heatmap : Colors files by commit frequency to reveal hotspots and technical‑debt concentration.

PR Impact Analysis : Paste a PR URL to see precisely which files are touched and compute the change radius.

Practical Use Cases

Assess risk before refactoring.

Understand impact scope during code reviews.

Evaluate technical debt.

Identify module owners for review assignment.

Privacy‑First Design

All analysis runs locally in the browser; no code or token is stored on a server. Private‑repo support works with a GitHub Personal Access Token that lives only in memory.

Technical Architecture

CodeFlow is a zero‑dependency HTML file that builds a full static‑analysis pipeline in the client:

Data Layer (GitHub API) : Uses fetch to retrieve repository trees via the GitHub REST Tree API.

Parsing Layer (Tree‑sitter WASM) : Loads the Tree‑sitter parser compiled to WebAssembly (e.g., Python grammar) for accurate syntax trees.

Logic Layer (JavaScript) : Extract: Traverses the syntax tree to collect functions, classes, and imports. Connect: Searches other files for call sites (call detection).

Visualization Layer (D3.js + React) : Renders force‑directed graphs, Sankey diagrams, and heatmaps.

How Python Is Parsed via WASM

The initTreeSitter function loads the WebAssembly module, creates a TreeSitter parser, and sets the Python language:

async function initTreeSitter() {
  // 1. Initialise WASM runtime
  await TreeSitter.init({ locateFile: ... });
  var parser = new TreeSitter();
  // 2. Load compiled Python grammar
  var Python = await TreeSitter.Language.load('...tree-sitter-python.wasm');
  parser.setLanguage(Python);
  this._tsParser = parser;
}

This gives the tool the same parsing power as VS Code, understanding scopes, decorators, and async/await.

Accurate Call Detection Using CST

In findCalls, the tool checks node.parent.type to filter out definitions (function or class) and ignores identifiers inside strings or comments, preventing false positives.

Performance Optimisation – Batching & Yielding

To avoid UI freeze on large repos, CodeFlow processes code in small batches and yields control back to the browser:

for (var bi = 0; bi < analyzed.length; bi += CALL_BATCH) {
  // analyse a chunk
  await new Promise(r => setTimeout(r, 0)); // yield
}

Getting Started

Online (recommended)

Open the tool, paste any public repo name (e.g., facebook/react) or full URL, and the analysis runs instantly.

Self‑Hosted

# Clone the repository
git clone https://github.com/braedonsaunders/codeflow.git
# Open in browser
index.html

Local Folder Analysis

Open CodeFlow in the browser.

Click “Open Folder”.

Select the folder or files to analyse.

All processing stays in the browser.

Supported Languages

CodeFlow extracts functions and dependencies from over 30 languages, including JavaScript/TypeScript, Python, Java, Go, Ruby, PHP, Vue, Svelte, Rust, C/C++, C#, Swift, Kotlin, etc.

Exporting Reports

Analysis results can be exported in multiple formats, containing repository metadata, health scores, function statistics, security issues, pattern detections, duplicate code, and recommendations.

Rate Limits & Performance Notes

Unauthenticated GitHub API: 60 requests/hour.

Personal Access Token: 5 000 requests/hour.

Large repositories may take several minutes; using a token speeds up the process.

Reference Resources

- Project repository: https://github.com/braedonsaunders/codeflow
- Online tool: https://codeflow-five.vercel.app/
- GitHub token creation: https://github.com/settings/tokens
- GitHub App creation: https://github.com/settings/apps