mc-gitpulse 1.0.1 → 1.0.4

package/README.md

@@ -48,6 +48,11 @@
 ## Demo
 ![GitPulse Demo on ollama repo](https://raw.githubusercontent.com/mchinnappan100/npmjs-images/main/gitpluse/gitpulse-demo-1.gif)
 
+## Screenshot
+
+![Git Diff on postgres repo](https://raw.githubusercontent.com/mchinnappan100/npmjs-images/main/gitpluse/gitpulse-demo-2.png)
+
+
 ## 📦 Installation
 
 ```bash
@@ -75,6 +80,11 @@ gitpulse -g /path/to/repo
 # Specify git repository path
 gitpulse --git-folder /path/to/repo
 
+# or URL for the git repo
+
+gitpulse -g git-repo-url
+
+
 # Specify custom port
 gitpulse --port 8080 --git-folder /path/to/repo 
 

package/analyzer.js

@@ -0,0 +1,370 @@
+const simpleGit = require('simple-git');
+const fs = require('fs').promises;
+const path = require('path');
+
+class GitAnalyzer {
+  constructor(repoPath) {
+    this.repoPath = repoPath;
+    this.git = simpleGit(repoPath);
+  }
+
+  async analyze() {
+    const [
+      branches,
+      tags,
+      remotes,
+      status,
+      log,
+      contributors,
+      repoSize,
+      garbageInfo
+    ] = await Promise.all([
+      this.getBranches(),
+      this.getTags(),
+      this.getRemotes(),
+      this.getStatus(),
+      this.getLog(),
+      this.getContributors(),
+      this.getRepoSize(),
+      this.analyzeGarbage()
+    ]);
+
+    const stats = this.calculateStats(log);
+    const health = this.assessRepoHealth(log, garbageInfo);
+
+    return {
+      branches,
+      tags,
+      remotes,
+      status,
+      commitCount: log.total,
+      recentCommits: log.all.slice(0, 50),
+      contributors,
+      stats,
+      repoSize,
+      garbageInfo,
+      health,
+      path: this.repoPath
+    };
+  }
+
+  async getBranches() {
+    const summary = await this.git.branch(['-a', '-v', '--sort=-committerdate']);
+    const current = summary.current;
+    
+    return {
+      current,
+      all: Object.entries(summary.branches).map(([name, info]) => ({
+        name,
+        current: name === current,
+        commit: info.commit,
+        label: info.label,
+        remote: name.startsWith('remotes/')
+      }))
+    };
+  }
+
+  async getTags() {
+    const tags = await this.git.tags();
+    return tags.all;
+  }
+
+  async getRemotes() {
+    const remotes = await this.git.getRemotes(true);
+    return remotes;
+  }
+
+  async getStatus() {
+    const status = await this.git.status();
+    return {
+      modified: status.modified,
+      created: status.created,
+      deleted: status.deleted,
+      renamed: status.renamed,
+      staged: status.staged,
+      conflicted: status.conflicted,
+      ahead: status.ahead,
+      behind: status.behind,
+      tracking: status.tracking,
+      isClean: status.isClean()
+    };
+  }
+
+  async getLog() {
+    const log = await this.git.log({ 
+      '--all': null,
+      '--max-count': 1000,
+      '--no-merges': null 
+    });
+    return log;
+  }
+
+  async getContributors() {
+    try {
+      const result = await this.git.raw([
+        'shortlog',
+        '-sn',
+        '--all',
+        '--no-merges'
+      ]);
+      
+      return result
+        .trim()
+        .split('\n')
+        .map(line => {
+          const match = line.trim().match(/^(\d+)\s+(.+)$/);
+          if (match) {
+            return {
+              commits: parseInt(match[1]),
+              name: match[2]
+            };
+          }
+          return null;
+        })
+        .filter(Boolean);
+    } catch (error) {
+      return [];
+    }
+  }
+
+  calculateStats(log) {
+    const commits = log.all;
+    const now = new Date();
+    const dayAgo = new Date(now - 24 * 60 * 60 * 1000);
+    const weekAgo = new Date(now - 7 * 24 * 60 * 60 * 1000);
+    const monthAgo = new Date(now - 30 * 24 * 60 * 60 * 1000);
+
+    const commitsLastDay = commits.filter(c => new Date(c.date) > dayAgo).length;
+    const commitsLastWeek = commits.filter(c => new Date(c.date) > weekAgo).length;
+    const commitsLastMonth = commits.filter(c => new Date(c.date) > monthAgo).length;
+
+    // Calculate commits per day of week
+    const dayOfWeek = [0, 0, 0, 0, 0, 0, 0];
+    const hourOfDay = new Array(24).fill(0);
+    
+    commits.forEach(commit => {
+      const date = new Date(commit.date);
+      dayOfWeek[date.getDay()]++;
+      hourOfDay[date.getHours()]++;
+    });
+
+    return {
+      total: log.total,
+      commitsLastDay,
+      commitsLastWeek,
+      commitsLastMonth,
+      dayOfWeek,
+      hourOfDay,
+      avgCommitsPerDay: (commitsLastMonth / 30).toFixed(2)
+    };
+  }
+
+  async getRepoSize() {
+    try {
+      const gitDir = path.join(this.repoPath, '.git');
+      const size = await this.getDirectorySize(gitDir);
+      return {
+        bytes: size,
+        mb: (size / 1024 / 1024).toFixed(2),
+        gb: (size / 1024 / 1024 / 1024).toFixed(3)
+      };
+    } catch (error) {
+      return { bytes: 0, mb: '0', gb: '0' };
+    }
+  }
+
+  async getDirectorySize(dirPath) {
+    let totalSize = 0;
+    
+    try {
+      const items = await fs.readdir(dirPath, { withFileTypes: true });
+      
+      for (const item of items) {
+        const itemPath = path.join(dirPath, item.name);
+        
+        if (item.isDirectory()) {
+          totalSize += await this.getDirectorySize(itemPath);
+        } else {
+          const stats = await fs.stat(itemPath);
+          totalSize += stats.size;
+        }
+      }
+    } catch (error) {
+      // Ignore errors for inaccessible files
+    }
+    
+    return totalSize;
+  }
+
+  async analyzeGarbage() {
+    try {
+      // Get count-objects info
+      const countObjects = await this.git.raw(['count-objects', '-v']);
+      const lines = countObjects.split('\n');
+      const info = {};
+      
+      lines.forEach(line => {
+        const [key, value] = line.split(':').map(s => s.trim());
+        if (key && value) {
+          info[key] = value;
+        }
+      });
+
+      const looseObjects = parseInt(info['count'] || 0);
+      const looseSize = parseFloat(info['size'] || 0);
+      const packCount = parseInt(info['packs'] || 0);
+      const packSize = parseFloat(info['size-pack'] || 0);
+
+      // Recommend GC if there are many loose objects
+      const shouldGC = looseObjects > 1000 || looseSize > 10;
+
+      return {
+        looseObjects,
+        looseSize,
+        packCount,
+        packSize,
+        shouldGC,
+        recommendation: shouldGC 
+          ? 'Run `git gc` to optimize repository performance'
+          : 'Repository is well optimized'
+      };
+    } catch (error) {
+      return {
+        looseObjects: 0,
+        looseSize: 0,
+        packCount: 0,
+        packSize: 0,
+        shouldGC: false,
+        recommendation: 'Unable to analyze'
+      };
+    }
+  }
+
+  assessRepoHealth(log, garbageInfo) {
+    const scores = [];
+    const issues = [];
+    const suggestions = [];
+
+    // Check commit frequency
+    const commits = log.all;
+    const now = new Date();
+    const weekAgo = new Date(now - 7 * 24 * 60 * 60 * 1000);
+    const recentCommits = commits.filter(c => new Date(c.date) > weekAgo).length;
+    
+    if (recentCommits > 0) {
+      scores.push(100);
+    } else {
+      scores.push(50);
+      issues.push('No commits in the last week');
+    }
+
+    // Check garbage collection
+    if (garbageInfo.shouldGC) {
+      scores.push(60);
+      issues.push('Repository needs garbage collection');
+      suggestions.push('Run: git gc --aggressive');
+    } else {
+      scores.push(100);
+    }
+
+    // Check for large pack files
+    if (garbageInfo.packSize > 100) {
+      issues.push('Large pack files detected');
+      suggestions.push('Consider using git-lfs for large files');
+    }
+
+    const avgScore = scores.reduce((a, b) => a + b, 0) / scores.length;
+    
+    let status = 'excellent';
+    if (avgScore < 90) status = 'good';
+    if (avgScore < 70) status = 'needs attention';
+    if (avgScore < 50) status = 'poor';
+
+    return {
+      score: Math.round(avgScore),
+      status,
+      issues,
+      suggestions
+    };
+  }
+
+  async getFileTree() {
+    try {
+      const result = await this.git.raw(['ls-tree', '-r', '--name-only', 'HEAD']);
+      const files = result.trim().split('\n').filter(Boolean);
+      
+      // Build tree structure
+      const tree = {};
+      
+      files.forEach(filepath => {
+        const parts = filepath.split('/');
+        let current = tree;
+        
+        parts.forEach((part, index) => {
+          if (index === parts.length - 1) {
+            // It's a file
+            if (!current._files) current._files = [];
+            current._files.push(part);
+          } else {
+            // It's a directory
+            if (!current[part]) current[part] = {};
+            current = current[part];
+          }
+        });
+      });
+      
+      return tree;
+    } catch (error) {
+      return {};
+    }
+  }
+
+  async getCommitGraph(limit = 100) {
+    try {
+      const result = await this.git.raw([
+        'log',
+        '--all',
+        '--graph',
+        '--pretty=format:%H|%P|%s|%an|%ar',
+        `--max-count=${limit}`
+      ]);
+      
+      const lines = result.split('\n');
+      const commits = [];
+      
+      lines.forEach(line => {
+        // Match graph characters: *, |, \, /, space
+        const graphMatch = line.match(/^([*|\\\/ ]+)/);
+        const graph = graphMatch ? graphMatch[1] : '';
+        const data = line.substring(graph.length);
+        
+        if (data && data.includes('|')) {
+          const parts = data.split('|');
+          if (parts.length >= 5) {
+            const [hash, parents, subject, author, date] = parts;
+            commits.push({
+              graph,
+              hash: hash.trim(),
+              parents: parents ? parents.trim().split(' ') : [],
+              subject: subject.trim(),
+              author: author.trim(),
+              date: date.trim()
+            });
+          }
+        }
+      });
+      
+      return commits;
+    } catch (error) {
+      console.error('Error getting commit graph:', error);
+      return [];
+    }
+  }
+}
+
+async function analyzeRepo(repoPath) {
+  const analyzer = new GitAnalyzer(repoPath);
+  return await analyzer.analyze();
+}
+
+module.exports = { GitAnalyzer, analyzeRepo };

package/cli.js

@@ -2,23 +2,67 @@
 
 const { program } = require('commander');
 const path = require('path');
+const fs = require('fs');
+const os = require('os');
 const chalk = require('chalk');
 const boxen = require('boxen');
+const ora = require('ora');
 const { startServer } = require('./server');
 const { analyzeRepo } = require('./analyzer');
+const simpleGit = require('simple-git');
 
 program
   .name('gitpulse')
-  .description('The ultimate Git UI - Better than SourceTree, approved by Linus')
+  .description('The ultimate Git UI' )
   .version('1.0.0');
 
+async function cloneRepository(url, targetDir) {
+  const spinner = ora('Cloning repository...').start();
+  
+  try {
+    const git = simpleGit();
+    await git.clone(url, targetDir, ['--depth', '1000']); // Limit depth for performance
+    spinner.succeed(chalk.green('Repository cloned successfully'));
+    return targetDir;
+  } catch (error) {
+    spinner.fail(chalk.red('Failed to clone repository'));
+    throw error;
+  }
+}
+
+function isGitUrl(input) {
+  // Check if input looks like a Git URL
+  return input.startsWith('http://') || 
+         input.startsWith('https://') || 
+         input.startsWith('git@') ||
+         input.startsWith('ssh://') ||
+         input.includes('github.com') ||
+         input.includes('gitlab.com') ||
+         input.includes('bitbucket.org');
+}
+
+async function resolveGitPath(input) {
+  if (isGitUrl(input)) {
+    // It's a URL, clone it to a temp directory
+    const tempDir = path.join(os.tmpdir(), 'gitpulse-' + Date.now());
+    fs.mkdirSync(tempDir, { recursive: true });
+    
+    console.log(chalk.yellow('🌐 Remote repository detected'));
+    console.log(chalk.dim(`   Cloning to: ${tempDir}`));
+    
+    await cloneRepository(input, tempDir);
+    return tempDir;
+  } else {
+    // It's a local path
+    return path.resolve(input);
+  }
+}
+
 program
-  .option('-g, --git-folder <path>', 'Path to git repository', process.cwd())
+  .option('-g, --git-folder <path>', 'Path to git repository or Git URL', process.cwd())
   .option('-p, --port <number>', 'Port for web server', '3000')
   .option('--no-browser', 'Don\'t open browser automatically')
   .action(async (options) => {
-    const gitPath = path.resolve(options.gitFolder);
-    
     console.log(boxen(
       chalk.bold.cyan('🚀 GitPulse') + '\n\n' +
       chalk.green('The Ultimate Git Repository Analyzer') + '\n' +
@@ -31,11 +75,13 @@ program
       }
     ));
 
-    console.log(chalk.yellow('📁 Repository:'), chalk.white(gitPath));
-    console.log(chalk.yellow('🌐 Port:'), chalk.white(options.port));
-    console.log();
-
     try {
+      const gitPath = await resolveGitPath(options.gitFolder);
+      
+      console.log(chalk.yellow('📁 Repository:'), chalk.white(gitPath));
+      console.log(chalk.yellow('🌐 Port:'), chalk.white(options.port));
+      console.log();
+
       // Quick analysis
       const analysis = await analyzeRepo(gitPath);
       
@@ -54,4 +100,4 @@ program
     }
   });
 
-program.parse();
+program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mc-gitpulse",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "The ultimate Git UI - CLI + Web interface with advanced repository insights",
   "main": "index.js",
   "bin": {
@@ -19,9 +19,9 @@
   ],
   "author": "Mohan Chinnappan",
   "files": [
-    "server.js", "public/*"
+    "server.js", "analyzer.js", "cli.js",
+    "public/*"
   ],
-
   "license": "MIT",
   "dependencies": {
     "boxen": "^5.1.2",

package/public/index.html

@@ -7,8 +7,7 @@
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="icon" type="image/x-icon"
         href="https://mohan-chinnappan-n5.github.io/dfv/img/mc_favIcon.ico" />
-        
-
+  
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
   <style>
@@ -61,16 +60,25 @@
       transform: translateY(-2px);
     }
 
-    .split-pane {
+    .file-tree-container {
       display: flex;
-      height: 600px;
-      gap: 1rem;
+      height: 650px;
+      gap: 0;
+      position: relative;
     }
 
     .split-left {
-      flex: 0 0 400px;
+      flex: 0 0 350px;
       overflow-y: auto;
-      border-right: 1px solid #374151;
+      min-width: 200px;
+      max-width: 600px;
+    }
+
+    .file-history-sidebar {
+      flex: 0 0 280px;
+      overflow-y: auto;
+      min-width: 200px;
+      max-width: 500px;
     }
 
     .split-right {
@@ -78,15 +86,85 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
+      min-width: 400px;
+    }
+
+    .splitter {
+      width: 4px;
+      background: #374151;
+      cursor: col-resize;
+      position: relative;
+      transition: background 0.2s;
+      flex-shrink: 0;
+    }
+
+    .splitter:hover {
+      background: #3b82f6;
+    }
+
+    .splitter:active {
+      background: #2563eb;
+    }
+
+    .splitter::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 20px;
+      height: 40px;
+      background: transparent;
+    }
+
+    #monaco-editor-container {
+      flex: 1;
+      position: relative;
     }
 
-    #monaco-editor {
+    #monaco-editor, #monaco-diff-editor {
       height: 100%;
       border: 1px solid #374151;
       border-radius: 0.5rem;
       overflow: hidden;
     }
 
+    #monaco-diff-editor {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .commit-item {
+      padding: 0.5rem;
+      border-radius: 0.375rem;
+      border: 1px solid #374151;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .commit-item:hover {
+      background-color: rgba(59, 130, 246, 0.1);
+      border-color: #3b82f6;
+    }
+
+    .commit-item.selected {
+      background-color: rgba(59, 130, 246, 0.2);
+      border-color: #3b82f6;
+    }
+
+    .commit-item.selected-1 {
+      background-color: rgba(239, 68, 68, 0.2);
+      border-color: #ef4444;
+    }
+
+    .commit-item.selected-2 {
+      background-color: rgba(16, 185, 129, 0.2);
+      border-color: #10b981;
+    }
+
     .file-item {
       cursor: pointer;
       padding: 0.5rem;
@@ -122,7 +200,6 @@
 
     .commit-node {
       font-family: monospace;
-      white-space: pre;
     }
 
     /* Modal/Popup Styles */
@@ -509,14 +586,44 @@
       <!-- File Tree Tab -->
       <div id="tree-tab" class="tab-content">
         <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
-          <h3 class="text-xl font-bold mb-4">📂 File Tree</h3>
-          <div class="split-pane">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="text-xl font-bold">📂 File Tree</h3>
+            <div class="flex items-center space-x-4">
+              <button id="view-mode-btn" onclick="toggleViewMode()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded transition text-sm">
+                📊 View Mode: <span id="view-mode-text">Single</span>
+              </button>
+              <button id="clear-selection-btn" onclick="clearCommitSelection()" class="hidden px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded transition text-sm">
+                Clear Selection
+              </button>
+            </div>
+          </div>
+          <div class="file-tree-container">
             <div class="split-left bg-gray-900 rounded p-4">
               <div id="file-tree" class="font-mono text-sm"></div>
             </div>
+            
+            <div class="splitter" id="splitter1"></div>
+            
+            <!-- File History Sidebar -->
+            <div id="file-history-sidebar" class="file-history-sidebar bg-gray-900 rounded p-4">
+              <h4 class="text-sm font-semibold mb-3 text-blue-400">File History</h4>
+              <div id="file-history-list" class="space-y-2 text-sm">
+                <p class="text-gray-500 text-xs">Select a file to see its commit history</p>
+              </div>
+            </div>
+            
+            <div class="splitter" id="splitter2"></div>
+            
+            <!-- Editor Area -->
             <div class="split-right">
-              <div id="file-info" class="mb-2 text-sm text-gray-400">Select a file to view</div>
-              <div id="monaco-editor"></div>
+              <div id="file-info" class="mb-2 text-sm text-gray-400 flex items-center justify-between">
+                <span>Select a file to view</span>
+                <span id="diff-info" class="text-xs text-blue-400"></span>
+              </div>
+              <div id="monaco-editor-container">
+                <div id="monaco-editor"></div>
+                <div id="monaco-diff-editor" class="hidden"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -580,8 +687,12 @@
     let ws;
     let currentData = null;
     let monacoEditor = null;
+    let monacoDiffEditor = null;
     let allFiles = [];
     let modalCallback = null;
+    let currentFilePath = null;
+    let selectedCommits = [];
+    let viewMode = 'single'; // 'single' or 'diff'
 
     // Modal Functions
     function showModal(options) {
@@ -712,12 +823,69 @@
       loadData();
       setupTabs();
       initMonaco();
+      initSplitters();
     });
 
+    function initSplitters() {
+      const splitter1 = document.getElementById('splitter1');
+      const splitter2 = document.getElementById('splitter2');
+      const leftPane = document.querySelector('.split-left');
+      const middlePane = document.querySelector('.file-history-sidebar');
+      
+      let isResizing = false;
+      let currentSplitter = null;
+      
+      function startResize(splitter, e) {
+        isResizing = true;
+        currentSplitter = splitter;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+      }
+      
+      function stopResize() {
+        isResizing = false;
+        currentSplitter = null;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      }
+      
+      function resize(e) {
+        if (!isResizing || !currentSplitter) return;
+        
+        const container = document.querySelector('.file-tree-container');
+        const containerRect = container.getBoundingClientRect();
+        const offsetX = e.clientX - containerRect.left;
+        
+        if (currentSplitter === splitter1) {
+          // Resizing left pane
+          const newWidth = Math.max(200, Math.min(600, offsetX));
+          leftPane.style.flexBasis = newWidth + 'px';
+        } else if (currentSplitter === splitter2) {
+          // Resizing middle pane
+          const leftWidth = leftPane.getBoundingClientRect().width;
+          const splitter1Width = splitter1.getBoundingClientRect().width;
+          const newWidth = Math.max(200, Math.min(500, offsetX - leftWidth - splitter1Width));
+          middlePane.style.flexBasis = newWidth + 'px';
+        }
+      }
+      
+      if (splitter1) {
+        splitter1.addEventListener('mousedown', (e) => startResize(splitter1, e));
+      }
+      
+      if (splitter2) {
+        splitter2.addEventListener('mousedown', (e) => startResize(splitter2, e));
+      }
+      
+      document.addEventListener('mousemove', resize);
+      document.addEventListener('mouseup', stopResize);
+    }
+
     function initMonaco() {
       require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' } });
       
       require(['vs/editor/editor.main'], function() {
+        // Single file editor
         monacoEditor = monaco.editor.create(document.getElementById('monaco-editor'), {
           value: '// Select a file from the tree to view its contents',
           language: 'javascript',
@@ -730,12 +898,27 @@
           scrollBeyondLastLine: false,
           wordWrap: 'on'
         });
+
+        // Diff editor
+        monacoDiffEditor = monaco.editor.createDiffEditor(document.getElementById('monaco-diff-editor'), {
+          theme: 'vs-dark',
+          automaticLayout: true,
+          readOnly: true,
+          renderSideBySide: true,
+          minimap: { enabled: true },
+          fontSize: 14,
+          lineNumbers: 'on',
+          scrollBeyondLastLine: false,
+          wordWrap: 'on'
+        });
       });
     }
 
     async function loadFileContent(filepath) {
       try {
-        showToast(`Loading ${filepath.split('/').pop()}...`, 'info', 1500);
+        currentFilePath = filepath;
+        selectedCommits = [];
+        updateClearSelectionButton();
         
         const ref = currentData.branches.current;
         const response = await fetch(`/api/file/${ref}/${filepath}`);
@@ -744,18 +927,7 @@
         if (data.content) {
           // Detect language from file extension
           const ext = filepath.split('.').pop().toLowerCase();
-          const languageMap = {
-            js: 'javascript', ts: 'typescript', jsx: 'javascript', tsx: 'typescript',
-            py: 'python', java: 'java', cpp: 'cpp', c: 'c', cs: 'csharp',
-            html: 'html', css: 'css', scss: 'scss', sass: 'sass',
-            json: 'json', xml: 'xml', yaml: 'yaml', yml: 'yaml',
-            md: 'markdown', sh: 'shell', bash: 'shell',
-            sql: 'sql', php: 'php', rb: 'ruby', go: 'go',
-            rs: 'rust', swift: 'swift', kt: 'kotlin',
-            vue: 'html', svelte: 'html'
-          };
-          
-          const language = languageMap[ext] || 'plaintext';
+          const language = getLanguageFromExtension(ext);
           
           monaco.editor.setModelLanguage(monacoEditor.getModel(), language);
           monacoEditor.setValue(data.content);
@@ -767,17 +939,272 @@
             </div>
           `;
           
-          showToast('File loaded successfully', 'success', 2000);
+          const filename = filepath.split('/').pop();
+          showToast(`✓ ${filename}`, 'success', 2000);
+          
+          // Load file history
+          loadFileHistory(filepath);
         }
       } catch (error) {
         monacoEditor.setValue(`// Error loading file: ${error.message}`);
         document.getElementById('file-info').innerHTML = `
           <span class="text-red-400">❌ Error loading ${escapeHtml(filepath)}</span>
         `;
-        showToast(`Failed to load ${filepath.split('/').pop()}`, 'error', 3000);
+        const filename = filepath.split('/').pop();
+        showToast(`Failed: ${filename}`, 'error', 3000);
+      }
+    }
+
+    async function loadFileHistory(filepath) {
+      try {
+        const response = await fetch(`/api/file-history/${encodeURIComponent(filepath)}?limit=1000`);
+        const data = await response.json();
+        
+        const historyList = document.getElementById('file-history-list');
+        
+        if (data.commits.length === 0) {
+          historyList.innerHTML = '<p class="text-gray-500 text-xs">No commit history available</p>';
+          return;
+        }
+        
+        historyList.innerHTML = `
+          <div class="text-xs text-gray-400 mb-2">Showing ${data.commits.length} commits</div>
+          ${data.commits.map((commit, index) => `
+            <div class="commit-item" data-commit="${commit.hash}" onclick="selectCommit('${commit.hash}', ${index})">
+              <div class="flex items-center justify-between mb-1">
+                <span class="font-mono text-xs text-yellow-400">${commit.shortHash}</span>
+                <span class="text-xs text-gray-500">${commit.relativeDate}</span>
+              </div>
+              <div class="text-xs text-gray-300 mb-1 truncate" title="${escapeHtml(commit.message)}">
+                ${escapeHtml(commit.message)}
+              </div>
+              <div class="text-xs text-gray-500 truncate">
+                ${escapeHtml(commit.author)}
+              </div>
+            </div>
+          `).join('')}
+        `;
+        
+      } catch (error) {
+        console.error('Error loading file history:', error);
+        document.getElementById('file-history-list').innerHTML = 
+          '<p class="text-red-400 text-xs">Failed to load history</p>';
+      }
+    }
+
+    function selectCommit(commitHash, index) {
+      if (viewMode === 'single') {
+        // In single mode, just view that commit
+        viewCommitVersion(commitHash);
+      } else {
+        // In diff mode, select up to 2 commits
+        const commitItem = document.querySelector(`[data-commit="${commitHash}"]`);
+        
+        if (selectedCommits.includes(commitHash)) {
+          // Deselect
+          selectedCommits = selectedCommits.filter(c => c !== commitHash);
+          commitItem.classList.remove('selected-1', 'selected-2');
+        } else {
+          if (selectedCommits.length >= 2) {
+            // Remove oldest selection
+            const oldCommit = selectedCommits.shift();
+            const oldItem = document.querySelector(`[data-commit="${oldCommit}"]`);
+            if (oldItem) oldItem.classList.remove('selected-1', 'selected-2');
+          }
+          selectedCommits.push(commitHash);
+        }
+        
+        // Update visual selection
+        document.querySelectorAll('.commit-item').forEach(item => {
+          item.classList.remove('selected-1', 'selected-2');
+        });
+        
+        if (selectedCommits.length > 0) {
+          const item1 = document.querySelector(`[data-commit="${selectedCommits[0]}"]`);
+          if (item1) item1.classList.add('selected-1');
+        }
+        
+        if (selectedCommits.length > 1) {
+          const item2 = document.querySelector(`[data-commit="${selectedCommits[1]}"]`);
+          if (item2) item2.classList.add('selected-2');
+          
+          // Show diff
+          viewDiff(selectedCommits[0], selectedCommits[1]);
+        }
+        
+        updateClearSelectionButton();
+      }
+    }
+
+    async function viewCommitVersion(commitHash) {
+      try {
+        const response = await fetch(`/api/file/${commitHash}/${currentFilePath}`);
+        const data = await response.json();
+        
+        if (data.content) {
+          const ext = currentFilePath.split('.').pop().toLowerCase();
+          const language = getLanguageFromExtension(ext);
+          
+          monaco.editor.setModelLanguage(monacoEditor.getModel(), language);
+          monacoEditor.setValue(data.content);
+          
+          const shortHash = commitHash.substring(0, 7);
+          document.getElementById('file-info').innerHTML = `
+            <div class="flex items-center justify-between">
+              <span class="text-blue-400">📄 ${escapeHtml(currentFilePath)} @ ${shortHash}</span>
+              <span class="text-gray-500">${language}</span>
+            </div>
+          `;
+          
+          showToast(`Viewing @ ${shortHash}`, 'success', 2000);
+        }
+      } catch (error) {
+        showToast('Failed to load commit version', 'error', 3000);
       }
     }
 
+    async function viewDiff(commit1, commit2) {
+      try {
+        // Check if Monaco is ready
+        if (!monacoDiffEditor) {
+          throw new Error('Monaco Diff Editor not initialized yet. Please wait a moment and try again.');
+        }
+        
+        const response = await fetch(
+          `/api/file-diff/${encodeURIComponent(currentFilePath)}?commit1=${commit1}&commit2=${commit2}`
+        );
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        
+        if (data.error) {
+          throw new Error(data.error);
+        }
+        
+        const ext = currentFilePath.split('.').pop().toLowerCase();
+        const language = getLanguageFromExtension(ext);
+        
+        // Ensure monaco.editor is available
+        if (typeof monaco === 'undefined' || !monaco.editor) {
+          throw new Error('Monaco Editor not loaded yet. Please refresh and try again.');
+        }
+        
+        const originalModel = monaco.editor.createModel(data.content1, language);
+        const modifiedModel = monaco.editor.createModel(data.content2, language);
+        
+        monacoDiffEditor.setModel({
+          original: originalModel,
+          modified: modifiedModel
+        });
+        
+        // Switch to diff view
+        const monacoEditorEl = document.getElementById('monaco-editor');
+        const monacoDiffEditorEl = document.getElementById('monaco-diff-editor');
+        const fileInfoEl = document.getElementById('file-info');
+        const diffInfoEl = document.getElementById('diff-info');
+        
+        if (monacoEditorEl) monacoEditorEl.classList.add('hidden');
+        if (monacoDiffEditorEl) monacoDiffEditorEl.classList.remove('hidden');
+        
+        const short1 = commit1.substring(0, 7);
+        const short2 = commit2.substring(0, 7);
+        
+        if (fileInfoEl) {
+          fileInfoEl.innerHTML = `
+            <div class="flex items-center justify-between">
+              <span class="text-blue-400">📄 ${escapeHtml(currentFilePath)}</span>
+              <span class="text-gray-500">${language}</span>
+            </div>
+          `;
+        }
+        
+        if (diffInfoEl) {
+          diffInfoEl.innerHTML = `
+            <span class="text-red-400">${short1}</span> ⟷ <span class="text-green-400">${short2}</span>
+          `;
+        }
+        
+        // Only show success toast
+        showToast(`Comparing ${short1} ⟷ ${short2}`, 'success', 2500);
+        
+      } catch (error) {
+        console.error('Diff loading error:', error);
+        showToast(`Diff error: ${error.message}`, 'error', 4000);
+      }
+    }
+
+    function toggleViewMode() {
+      viewMode = viewMode === 'single' ? 'diff' : 'single';
+      document.getElementById('view-mode-text').textContent = 
+        viewMode === 'single' ? 'Single' : 'Diff';
+      
+      clearCommitSelection();
+      
+      showToast(
+        viewMode === 'single' 
+          ? 'Single file view mode' 
+          : 'Diff mode: Select 2 commits to compare',
+        'info',
+        3000
+      );
+    }
+
+    function clearCommitSelection() {
+      selectedCommits = [];
+      document.querySelectorAll('.commit-item').forEach(item => {
+        item.classList.remove('selected-1', 'selected-2');
+      });
+      
+      // Switch back to single editor
+      document.getElementById('monaco-editor').classList.remove('hidden');
+      document.getElementById('monaco-diff-editor').classList.add('hidden');
+      document.getElementById('diff-info').innerHTML = '';
+      
+      updateClearSelectionButton();
+      
+      // Reload current file
+      if (currentFilePath) {
+        const ref = currentData.branches.current;
+        fetch(`/api/file/${ref}/${currentFilePath}`)
+          .then(res => res.json())
+          .then(data => {
+            if (data.content) {
+              const ext = currentFilePath.split('.').pop().toLowerCase();
+              const language = getLanguageFromExtension(ext);
+              monaco.editor.setModelLanguage(monacoEditor.getModel(), language);
+              monacoEditor.setValue(data.content);
+            }
+          });
+      }
+    }
+
+    function updateClearSelectionButton() {
+      const btn = document.getElementById('clear-selection-btn');
+      if (selectedCommits.length > 0 || viewMode === 'diff') {
+        btn.classList.remove('hidden');
+      } else {
+        btn.classList.add('hidden');
+      }
+    }
+
+    function getLanguageFromExtension(ext) {
+      const languageMap = {
+        js: 'javascript', ts: 'typescript', jsx: 'javascript', tsx: 'typescript',
+        py: 'python', java: 'java', cpp: 'cpp', c: 'c', cs: 'csharp',
+        html: 'html', css: 'css', scss: 'scss', sass: 'sass',
+        json: 'json', xml: 'xml', yaml: 'yaml', yml: 'yaml',
+        md: 'markdown', sh: 'shell', bash: 'shell',
+        sql: 'sql', php: 'php', rb: 'ruby', go: 'go',
+        rs: 'rust', swift: 'swift', kt: 'kotlin',
+        vue: 'html', svelte: 'html'
+      };
+      return languageMap[ext] || 'plaintext';
+    }
+
+
     function initWebSocket() {
       ws = new WebSocket(`ws://${window.location.host}`);
       
@@ -795,7 +1222,7 @@
         if (data.type === 'update') {
           currentData = data.data;
           renderData();
-          showToast('Repository data updated', 'success', 2000);
+          showToast('✓ Data refreshed', 'success', 2000);
         }
       };
     }
@@ -838,8 +1265,6 @@
     }
 
     function refreshData() {
-      showToast('Refreshing repository data...', 'info', 2000);
-      
       if (ws && ws.readyState === WebSocket.OPEN) {
         ws.send(JSON.stringify({ type: 'refresh' }));
       } else {
@@ -895,34 +1320,123 @@
 
     async function loadGitGraph() {
       try {
+        const graphElement = document.getElementById('git-graph');
+        if (!graphElement) return;
+        
+        // Show loading state
+        graphElement.innerHTML = '<div class="text-gray-400 py-4">Loading git graph...</div>';
+        
         const limit = document.getElementById('graph-limit')?.value || 100;
         const response = await fetch(`/api/graph?limit=${limit}`);
-        const graph = await response.json();
         
-        const graphElement = document.getElementById('git-graph');
-        if (!graphElement) return;
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
         
-        graphElement.innerHTML = graph.map(commit => {
-          const graphPart = commit.graph.replace(/\*/g, '<span class="text-yellow-400">●</span>')
-                                        .replace(/\|/g, '<span class="text-blue-400">│</span>')
-                                        .replace(/\//g, '<span class="text-green-400">╱</span>')
-                                        .replace(/\\/g, '<span class="text-purple-400">╲</span>');
-          
-          return `
-            <div class="commit-node hover:bg-gray-800 py-1 px-2 rounded">
-              <span class="text-gray-400">${graphPart}</span>
-              <span class="text-yellow-500 mx-2">${commit.hash.substring(0, 7)}</span>
-              <span class="text-gray-300">${escapeHtml(commit.subject)}</span>
-              <span class="text-blue-400 ml-2">(${escapeHtml(commit.author)})</span>
-              <span class="text-gray-500 ml-2">${escapeHtml(commit.date)}</span>
+        const graph = await response.json();
+        
+        if (!graph || graph.length === 0) {
+          graphElement.innerHTML = `
+            <div class="text-yellow-400 py-4">
+              <p class="mb-2">⚠️ No commits found in git graph</p>
+              <p class="text-sm text-gray-400">This could mean:</p>
+              <ul class="text-sm text-gray-400 list-disc list-inside ml-4 mt-2">
+                <li>The repository is empty</li>
+                <li>There are no commits yet</li>
+                <li>There's an issue with git log</li>
+              </ul>
             </div>
           `;
-        }).join('');
+          return;
+        }
+        
+        // Clear existing content
+        graphElement.innerHTML = '';
+        
+        // Build DOM elements directly instead of using innerHTML with strings
+        graph.forEach(commit => {
+          const row = document.createElement('div');
+          row.className = 'commit-node hover:bg-gray-800 py-1 px-2 rounded flex items-start';
+          
+          // Graph column
+          const graphCol = document.createElement('div');
+          graphCol.className = 'text-gray-400 font-mono inline-block';
+          
+          // Process each character in the graph
+          const graphChars = (commit.graph || '').split('');
+          graphChars.forEach(char => {
+            const span = document.createElement('span');
+            switch(char) {
+              case '*':
+                span.className = 'text-yellow-400';
+                span.textContent = '●';
+                break;
+              case '|':
+                span.className = 'text-blue-400';
+                span.textContent = '│';
+                break;
+              case '/':
+                span.className = 'text-green-400';
+                span.textContent = '╱';
+                break;
+              case '\\':
+                span.className = 'text-purple-400';
+                span.textContent = '╲';
+                break;
+              case ' ':
+                span.innerHTML = '&nbsp;';
+                break;
+              default:
+                span.textContent = char;
+            }
+            graphCol.appendChild(span);
+          });
+          
+          // Hash column
+          const hashCol = document.createElement('span');
+          hashCol.className = 'text-yellow-500 mx-2 font-mono flex-shrink-0';
+          hashCol.textContent = commit.hash.substring(0, 7);
+          
+          // Subject column
+          const subjectCol = document.createElement('span');
+          subjectCol.className = 'text-gray-300 flex-1';
+          subjectCol.textContent = commit.subject;
+          
+          // Author column
+          const authorCol = document.createElement('span');
+          authorCol.className = 'text-blue-400 ml-2 flex-shrink-0';
+          authorCol.textContent = `(${commit.author})`;
+          
+          // Date column
+          const dateCol = document.createElement('span');
+          dateCol.className = 'text-gray-500 ml-2 whitespace-nowrap flex-shrink-0';
+          dateCol.textContent = commit.date;
+          
+          // Assemble row
+          row.appendChild(graphCol);
+          row.appendChild(hashCol);
+          row.appendChild(subjectCol);
+          row.appendChild(authorCol);
+          row.appendChild(dateCol);
+          
+          graphElement.appendChild(row);
+        });
+        
+        console.log(`Git graph loaded: ${graph.length} commits`);
+        
       } catch (error) {
         console.error('Error loading git graph:', error);
         const graphElement = document.getElementById('git-graph');
         if (graphElement) {
-          graphElement.innerHTML = '<div class="text-red-400">Error loading git graph</div>';
+          graphElement.innerHTML = `
+            <div class="text-red-400 py-4">
+              <p class="mb-2">❌ Error loading git graph</p>
+              <p class="text-sm">${error.message}</p>
+              <button onclick="loadGitGraph()" class="mt-3 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm">
+                Try Again
+              </button>
+            </div>
+          `;
         }
       }
     }
@@ -1358,4 +1872,4 @@
     }
   </script>
 </body>
-</html>
+</html>

package/server.js

@@ -2,9 +2,29 @@ const express = require('express');
 const path = require('path');
 const http = require('http');
 const WebSocket = require('ws');
-const {openResource} = require('open-resource');
 const chalk = require('chalk');
 const { GitAnalyzer } = require('./analyzer');
+const { openResource } = require('open-resource');
+
+function getRelativeTime(date) {
+  const now = new Date();
+  const diff = now - date;
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+
+  if (seconds < 60) return 'just now';
+  if (minutes < 60) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+  if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+  if (days < 7) return `${days} day${days > 1 ? 's' : ''} ago`;
+  if (weeks < 4) return `${weeks} week${weeks > 1 ? 's' : ''} ago`;
+  if (months < 12) return `${months} month${months > 1 ? 's' : ''} ago`;
+  return `${years} year${years > 1 ? 's' : ''} ago`;
+}
 
 async function startServer(repoPath, port, openBrowser = true) {
   const app = express();
@@ -39,9 +59,19 @@ async function startServer(repoPath, port, openBrowser = true) {
   app.get('/api/graph', async (req, res) => {
     try {
       const limit = parseInt(req.query.limit) || 100;
+      console.log(`Fetching git graph with limit: ${limit}`);
+      
       const graph = await analyzer.getCommitGraph(limit);
+      
+      console.log(`Git graph returned ${graph.length} commits`);
+      
+      if (graph.length === 0) {
+        console.warn('Warning: Git graph is empty');
+      }
+      
       res.json(graph);
     } catch (error) {
+      console.error('Error in /api/graph:', error);
       res.status(500).json({ error: error.message });
     }
   });
@@ -57,6 +87,70 @@ async function startServer(repoPath, port, openBrowser = true) {
     }
   });
 
+  app.get('/api/file-history/:filepath(*)', async (req, res) => {
+    try {
+      const filepath = req.params.filepath;
+      const limit = parseInt(req.query.limit) || 1000;
+      
+      // Get file history with commit details
+      const log = await analyzer.git.log({
+        file: filepath,
+        '--max-count': limit
+      });
+      
+      const commits = log.all.map(commit => ({
+        hash: commit.hash,
+        shortHash: commit.hash.substring(0, 7),
+        message: commit.message,
+        author: commit.author_name,
+        date: commit.date,
+        relativeDate: getRelativeTime(new Date(commit.date))
+      }));
+      
+      res.json({ commits, filepath });
+    } catch (error) {
+      res.status(500).json({ error: error.message });
+    }
+  });
+
+  app.get('/api/file-diff/:filepath(*)', async (req, res) => {
+    try {
+      const filepath = req.params.filepath;
+      const commit1 = req.query.commit1;
+      const commit2 = req.query.commit2;
+      
+      if (!commit1 || !commit2) {
+        return res.status(400).json({ error: 'Both commit1 and commit2 are required' });
+      }
+      
+      // Get file content at both commits
+      let content1 = '';
+      let content2 = '';
+      
+      try {
+        content1 = await analyzer.git.show([`${commit1}:${filepath}`]);
+      } catch (e) {
+        content1 = '// File does not exist at this commit';
+      }
+      
+      try {
+        content2 = await analyzer.git.show([`${commit2}:${filepath}`]);
+      } catch (e) {
+        content2 = '// File does not exist at this commit';
+      }
+      
+      res.json({ 
+        content1, 
+        content2,
+        commit1,
+        commit2,
+        filepath
+      });
+    } catch (error) {
+      res.status(500).json({ error: error.message });
+    }
+  });
+
   app.post('/api/gc', async (req, res) => {
     try {
       await analyzer.git.raw(['gc', '--aggressive']);
@@ -104,4 +198,4 @@ async function startServer(repoPath, port, openBrowser = true) {
   return server;
 }
 
-module.exports = { startServer };
+module.exports = { startServer };