RepoVision Svelte Themes

Repovision

A high-performance Git analytics platform built with Svelte 5. Visualize codebase health, calculate Bus Factor, and track contributor velocity with a non-blocking asynchronous pipeline. ⚡

🚀 RepoVision: Multi-Dimensional Git Analysis Platform

🏆 The Professional Tool for Unlocking Codebase Narratives - RepoVision provides a high-performance, non-blocking analysis framework for turning Git history into actionable project management intelligence.


💡 Project Overview: The Need for Deep Git Insight

RepoVision was engineered to overcome the inherent challenges of analyzing and understanding complex Git repositories. Unlike traditional, slow tools, this platform uses an asynchronous job system and modern web technologies to deliver comprehensive, highly-filterable metrics with smooth performance. The architecture leverages Svelte 5 Runes for frontend reactivity and a modular data pipeline.


✨ Core Features Explained in Detail (3000+ Lines Equivalent)

1. Architectural Concurrency and Performance

RepoVision's backend is architected to handle heavy Git operations without freezing the server, ensuring maximum throughput and responsiveness for all users.

1.1. Asynchronous Git Parsing (Non-Blocking Server)

  • Problem: Standard child_process.execSync (synchronous) for commands like git clone halts the entire Node.js single thread during long I/O operations (cloning, logging).
  • Solution: The core Git operations in src/lib/server/git-parser.ts use asynchronous child_process.exec. This pattern frees the Node.js event loop to process concurrent user requests while Git runs in a background subprocess.
  • Implementation: This shift is managed via a Promise-wrapped utility function, ensuring the main thread remains available.
  • Concurrency Benefit: This is a critical factor for scalability, allowing the server to efficiently manage multiple analysis requests simultaneously.

1.2. Job System, Polling, and Live Feedback

  • Job Initiation: A client request to /api/analyze immediately returns a unique jobId (HTTP 202 - Accepted), freeing the client to proceed without waiting.
  • Real-time Polling: The client continuously polls /api/status/[jobId] using asynchronous GET requests. This endpoint retrieves the current progress and stage from the in-memory jobStore/+server.ts, RepoVision/src/lib/server/jobs.ts].
  • Integrated Progress UX: The generic "Analyze Now" button dynamically converts into a detailed Progress Indicator, showing the current task (e.g., "Cloning repository...") and percentage completion.
  • Data Caching: To prevent unnecessary repeat work, completed analysis results are stored locally in the .cache directory with a 24-hour Time-To-Live (TTL), guaranteeing instantaneous reloading for repeat visitors.

2. Deep Project Analytics

The src/lib/stores/analytics.ts module houses a comprehensive suite of metrics designed for project health assessment.

2.1. Bus Factor (Knowledge Concentration)

  • Definition: Calculated as the smallest number of core contributors whose combined commits represent $90%$ of the project's total commit count.
  • Risk Assessment: A low score signals high vulnerability to team turnover, highlighting where knowledge is critically concentrated.
  • Mechanism: The function sorts contributors by commit volume and iteratively sums contributions against the $90%$ threshold.

2.2. Code Quality and Health Scores

  • Health Score (0-100): A holistic score reflecting the project's overall vitality, based on a balanced blend of continuous activity, contributor diversity, and stable code churn rates.
  • Code Quality Score (0.00-100.00): A score derived from contributor volume and sustained velocity. It is explicitly formatted using toFixed(2) to ensure a clean, professional display with a maximum of two decimal places, avoiding messy, overly long numbers in the UI.

2.3. File Type Activity Breakdown

  • Goal: To visualize development focus and identify codebase volatility areas.
  • Calculation: The system aggregates total file change events (across all commits) and tracks the total additions/deletions per file extension.
  • Insight: Displays the Top 10 most frequently changed file types (e.g., TypeScript, Svelte, CSS), indicating where development effort is concentrated.

3. Granular Filtering and User Control

The AdvancedSearch component (backed by src/lib/stores/filters.ts) provides precise tools for dissecting the commit history.

3.1. Commit Type Filter (Conventional Commits)

  • Functionality: Users can filter the commit list to include only specific categories defined by the Conventional Commits specification (e.g., feat for new features, fix for bug patches, refactor, etc.).
  • Search Precision: This enables highly targeted analysis, allowing managers to quickly audit bug density or track feature velocity.

3.2. Code Change Size Filter

  • Functionality: Allows filtering commits by the total cumulative volume of changes (additions + deletions). Users can set both a minimum and maximum line count.
  • Use Case: Perfect for isolating massive refactoring efforts (high max limit) or sifting out minimal commits (low max limit).

3.3. Date Range and Presets

  • Quick Access: Provides convenient buttons for common analysis periods: "Last 7 Days," "Last Month," "Last Year".
  • Time Accuracy: The internal date logic correctly adjusts the end date to include the entire 24-hour period selected, ensuring complete data inclusion.

3.4. Global Accessibility and Navigation

  • Functional Panels: All Header utility panels (ThemeSwitcher, SettingsPanel, AccessibilityPanel) are configured using local $state in their respective components, ensuring reliable click-and-toggle functionality across all routes after moving the Header to the root layout.
  • Keyboard Shortcuts: Global shortcuts are registered in the main layout for efficiency:
    • Ctrl + K: Focus the input field.
    • Ctrl + T: Toggle the theme.
    • Ctrl + S: Open Settings Panel.
    • Ctrl + A: Open Accessibility Panel.

🛠 Project Structure and Technical Stack

RepoVision is built on a modern, high-performance stack:

Component File Path Role and Key Technologies
Global Layout src/routes/+layout.svelte Defines structural elements (Header, Footer, <main>), manages global event binding.
Server Git Core src/lib/server/git-parser.ts Asynchronous Git Operations (exec), controls cloning and raw data extraction.
API Analysis src/routes/api/analyze/+server.ts Initiates jobs and handles cache lookups/misses.
API Status src/routes/api/status/[jobId]/+server.ts Endpoint for client polling, retrieves status from jobStore/+server.ts].
Analytics Store src/lib/stores/analytics.ts Centralized data processing: Bus Factor, Code Quality calculation.
Filtering Store src/lib/stores/filters.ts Manages global filter state and implements all commit/contributor filtering logic.
Graphing Logic src/lib/d3-graph.ts Uses Dagre for layered graph layout calculation, optimizing node positioning for visualization.
Design Tokens tailwind.config.js & src/app.css Implements HSL color variables for dynamic theming (e.g., Ocean, Sunset, Midnight) and Tailwind utility mapping.
Dependencies package.json Core dependencies include svelte, sveltejs/kit, typescript, dagre, d3.js (implicit via dagre), and development tools like prettier.

🚀 Getting Started

Prerequisites

You need Node.js (18 or later) and Git installed on your system.

Installation and Setup

# 1. Clone the repository
git clone [repo-url] RepoVision
cd RepoVision

# 2. Install dependencies
npm install

# 3. Run the development server
npm run dev

# Access the application at: http://localhost:5173/

Top categories

Loading Svelte Themes