Merge pull request #13 from KebanFiru/feat/ui

Feat/UI

Author: KebanFiru

README.md

@@ -3,28 +3,39 @@
 <!-- Badges -->
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![VS Code](https://img.shields.io/badge/VS%20Code-1.108.2+-blue)](https://code.visualstudio.com/)
+[![VS Marketplace](https://img.shields.io/visual-studio-marketplace/v/KebanFiru.CodeLineCounter?label=VS%20Marketplace&color=0078d7)](https://marketplace.visualstudio.com/items?itemName=KebanFiru.CodeLineCounter)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.9+-blue)](https://www.typescriptlang.org/)
 
-> Quickly analyze your project's codebase by counting lines of code, comments, and get insights organized by file types.
+> Quickly analyze your project's codebase with comprehensive metrics, Git analytics, and interactive dashboards.
 
 ## Overview
 
-**CodeCount** is a powerful VS Code extension that provides comprehensive code metrics for your projects. Instantly see how many lines of code, comments, and blank lines your workspace contains. Get detailed breakdowns by file type, understand code distribution, and track your project's scale.
-
-Perfect for developers, project managers, and teams who need quick insights into codebase size and complexity.
+**CodeCount** is a powerful VS Code extension that provides deep insights into your codebase. Get instant metrics on lines of code, understand contributor activity, track commit trends, and visualize language distribution. Perfect for developers, project managers, and teams who need comprehensive codebase analytics.
 
 ## Features
 
-- **Workspace Analysis** - Get total line counts for your entire project
-- **File-by-File Breakdown** - See statistics for individual files
-- **Extension-Based Statistics** - Analyze code distribution across file types (TypeScript, JavaScript, Python, etc.)
-- **Comment Detection** - Identify and count comment lines separately
-- **Real-Time Refresh** - Update stats anytime with a single click
-- **Sidebar Integration** - Dedicated panel in VS Code's Activity Bar
-- **Gitignore Support** - Respects your `.gitignore` patterns automatically
-- **⏱Performance Optimized** - Fast analysis even for large projects
-
-## 📋 Commands
+###  Code Metrics
+- **Workspace Analysis** - Total line counts for entire projects
+- **File-by-File Breakdown** - Statistics for individual files
+- **Language Distribution** - Analyze code across file types with expandable lists
+- **Comment Detection** - Separate counts for comment and blank lines
+- **Gitignore Support** - Automatically respects `.gitignore` patterns
+
+###  Git Analytics (Repository View)
+- **Contributor Statistics** - Track contributions with added/deleted line counts
+- **Commit Trends** - Visualize commits, additions, and deletions over time
+- **Monthly Activity** - Monitor development activity by month
+- **Work Patterns** - Understand coding patterns by weekday and hour
+- **Repository Metrics** - Total contributors, commits, and lines changed
+
+###  Interactive Dashboard
+- **Real-Time Statistics Panel** - View metrics in VS Code sidebar
+- **Expandable Lists** - Top 3 preview with "Show all" toggle for contributors and languages
+- **Responsive Charts** - Full-width visualizations using Chart.js v4.4.0
+- **Dark Mode Support** - Optimized for VS Code themes with white text on dark backgrounds
+- **Performance Optimized** - Instant analysis even for large projects
+
+##  Commands
 
 Access CodeCount commands via the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`):
 
@@ -35,81 +46,49 @@ Access CodeCount commands via the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P
 | `CodeCount: Count Lines of Code by Extension` | Get breakdown by file type |
 | `CodeCount: Refresh CodeCount Stats` | Refresh sidebar statistics |
 
-## 📦 Requirements
+##  Requirements
 
 - **VS Code:** 1.108.2 or newer
-- **Git:** Required for repository recognition (optional, but recommended)
-
-## 🚀 Quick Start
-
-### Installation
-
-1. Open VS Code
-2. Go to Extensions (`Ctrl+Shift+X` / `Cmd+Shift+X`)
-3. Search for "CodeCount"
-4. Click **Install**
-5. Reload VS Code if prompted
+- **Git:** Required for repository analytics and contributor tracking
 
 ### Usage
 
-#### Method 1: Using Commands
+#### Method 1: Using Sidebar
+- Click the **CodeCount** icon in the Activity Bar (left sidebar)
+- View comprehensive statistics including:
+  - Stats overview grid
+  - Language distribution with breakdown
+  - Top contributors and their contributions
+  - Repository analytics and commit history
+
+#### Method 2: Using Commands
 - Open Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`)
 - Type "CodeCount" to see available commands
 - Select the command you want to run
 
-#### Method 2: Using Sidebar
-- Click the **CodeCount** icon in the Activity Bar (left sidebar)
-- View current statistics
-- Click the refresh button to update
-
-#### Example Output
-```
-Total lines in workspace (145 files): 25,847
-Comment lines: 3,421
-```
+#### Dashboard Features
+- **Expandable Lists** - Click "Show all" to expand contributors or languages
+- **Interactive Charts** - Hover over visualizations for detailed information
+- **Full-Width Analytics** - View commit trends, monthly activity, and work patterns
+- **Real-Time Updates** - Click refresh to update statistics
 
-## 🛠️ Development
+##  Architecture
 
-### Prerequisites
-- Node.js 18+
-- pnpm (recommended) or npm
+### Technology Stack
+- **Frontend:** HTML/CSS/JavaScript in VS Code Webview
+- **Charts:** Chart.js v4.4.0
+- **Language:** TypeScript with strict mode
+- **Styling:** CSS Grid layout with responsive design
+- **Git Integration:** Child process execution for git commands
 
-### Setup
-
-## 📚 Configuration
+##  Configuration
 
 CodeCount respects your project's `.gitignore` file, automatically excluding:
 - `node_modules/`
 - `dist/` and `build/`
 - `.git/` directories
 - And any patterns defined in `.gitignore`
 
-## 🤝 Contributing
-
-We welcome contributions! Here's how to help:
-
-### Getting Started
-1. **Fork** the repository
-2. **Create** a feature branch: `git checkout -b feature/amazing-feature`
-3. **Make** your changes
-4. **Test** thoroughly
-5. **Commit** with clear messages: `git commit -m 'Add amazing feature'`
-6. **Push** to your branch: `git push origin feature/amazing-feature`
-7. **Open** a Pull Request
-
-### Development Guidelines
-- Follow TypeScript best practices
-- Keep code clean and well-documented
-- Run `pnpm run lint` before committing
-- Write meaningful commit messages
-- Test changes in the Extension Development Host
-
-### Code Style
-- Use TypeScript with strict mode enabled
-- Follow ESLint rules (run `pnpm run lint`)
-- Use descriptive variable and function names
-- Add comments for complex logic
-
 ##  License
 
 This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
@@ -126,15 +105,9 @@ Please include:
 - Steps to reproduce (for bugs)
 - Expected vs actual behavior
 - VS Code version and OS
+- Extension version
 
-## 📊Project Statistics
-
-- **Language:** TypeScript
-- **VS Code API:** 1.108.2+
-- **License:** MIT
-- **Status:** Active Development
-
-## 💬 Questions?
+##  Questions?
 
 Have questions? Feel free to:
 - Open a [Discussion](https://github.com/KebanFiru/CodeCount/discussions)

package.json

@@ -2,7 +2,7 @@
   "name": "CodeLineCounter",
   "displayName": "CodeLineCounter",
   "description": "A tool for learn how much line of code your project contains",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "publisher": "KebanFiru",
   "license": "MIT",
   "homepage": "https://github.com/KebanFiru/CodeCount#readme",
@@ -63,6 +63,10 @@
         "command": "codecount.refreshStats",
         "title": "Refresh CodeCount Stats"
       },
+      {
+        "command": "codecount.openAnalytics",
+        "title": "Open Analytics Dashboard"
+      },
       {
         "command": "codecount.gitRepoMissing",
         "title": "Git Repo Missing"

src/extension.ts

@@ -6,6 +6,7 @@ import { WorkspaceLineCounter } from './services/WorkspaceLineCounter';
 import { LineCounterByFileFormat } from './services/LineCounterByFileFormat';
 import { StatsTreeProvider } from './views/StatsTreeProvider';
 import { StatsService } from './services/StatsService';
+import { StatsWebviewPanel } from './views/StatsWebviewPanel';
 
 export function activate(context: vscode.ExtensionContext) {
 	const lineCounter = new LineCounter();
@@ -15,6 +16,45 @@ export function activate(context: vscode.ExtensionContext) {
 	const statsService = new StatsService(lineCounter, gitignoreService);
 	const statsProvider = new StatsTreeProvider(statsService);
 
+	let branchRefreshTimer: ReturnType<typeof setTimeout> | undefined;
+	const scheduleBranchRefresh = () => {
+		if (branchRefreshTimer) {
+			clearTimeout(branchRefreshTimer);
+		}
+		branchRefreshTimer = setTimeout(() => {
+			gitignoreService.clearCache();
+			statsProvider.refresh();
+			StatsWebviewPanel.refreshIfOpen();
+			branchRefreshTimer = undefined;
+		}, 150);
+	};
+
+	void (async () => {
+		const gitDirPath = await statsService.getGitDirPath();
+		if (!gitDirPath) {
+			return;
+		}
+
+		const gitRoot = await statsService.getGitRootPath();
+		if (!gitRoot) {
+			return;
+		}
+
+		const watchers = [
+			vscode.workspace.createFileSystemWatcher(new vscode.RelativePattern(gitRoot, '.git/HEAD')),
+			vscode.workspace.createFileSystemWatcher(new vscode.RelativePattern(gitRoot, '.git/refs/heads/**')),
+			vscode.workspace.createFileSystemWatcher(new vscode.RelativePattern(gitRoot, '.git/packed-refs')),
+			vscode.workspace.createFileSystemWatcher('**/.gitignore')
+		];
+
+		for (const watcher of watchers) {
+			watcher.onDidChange(scheduleBranchRefresh, undefined, context.subscriptions);
+			watcher.onDidCreate(scheduleBranchRefresh, undefined, context.subscriptions);
+			watcher.onDidDelete(scheduleBranchRefresh, undefined, context.subscriptions);
+			context.subscriptions.push(watcher);
+		}
+	})();
+
 	const fileline = vscode.commands.registerCommand('codecount.countLines', () => {
 		const editor = vscode.window.activeTextEditor;
 		if (!editor) {
@@ -73,6 +113,11 @@ export function activate(context: vscode.ExtensionContext) {
 
 	const refreshStats = vscode.commands.registerCommand('codecount.refreshStats', () => {
 		statsProvider.refresh();
+		StatsWebviewPanel.refreshIfOpen();
+	});
+
+	const openAnalytics = vscode.commands.registerCommand('codecount.openAnalytics', () => {
+		StatsWebviewPanel.createOrShow(context.extensionUri, statsService);
 	});
 
 	const gitRepoMissing = vscode.commands.registerCommand('codecount.gitRepoMissing', () => {
@@ -149,6 +194,7 @@ export function activate(context: vscode.ExtensionContext) {
 	context.subscriptions.push(fileslines);
 	context.subscriptions.push(fileslinesByExtension);
 	context.subscriptions.push(refreshStats);
+	context.subscriptions.push(openAnalytics);
 	context.subscriptions.push(gitRepoMissing);
 	context.subscriptions.push(openContributorFile);
 	context.subscriptions.push(