Update GitPanel

Enhance project directory handling by integrating extractProjectDirectory and clearProjectDirectoryCache functions. Adjust git route handlers to utilize the new directory extraction logic for improved project path resolution.
Enhance project directory handling by adding extractProjectDirectory function. Update generateDisplayName to utilize actual project directory when available. Adjust getProjects and addProjectManually to incorporate new directory extraction logic for improved project path resolution.
2025-12-10 23:09:46 +00:00 · 2025-07-08 15:14:12 +00:00 · 2025-07-08 15:10:44 +00:00 · 2025-07-08 14:04:23 +00:00 · 2025-07-08 13:48:33 +00:00 · 2025-07-08 12:53:15 +00:00
12 changed files with 714 additions and 362 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "claude-code-ui",
-  "version": "1.0.0",
+  "version": "1.1.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "claude-code-ui",
-      "version": "1.0.0",
+      "version": "1.1.1",
      "license": "MIT",
      "dependencies": {
        "@anthropic-ai/claude-code": "^1.0.24",
@@ -28,7 +28,7 @@
        "express": "^4.18.2",
        "lucide-react": "^0.515.0",
        "mime-types": "^3.0.1",
-        "node-fetch": "^3.3.2",
+        "node-fetch": "^2.7.0",
        "node-pty": "^1.0.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
@@ -2618,15 +2618,6 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
-    "node_modules/data-uri-to-buffer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
    "node_modules/date-fns": {
      "version": "2.30.0",
      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -2962,29 +2953,6 @@
        "reusify": "^1.0.4"
      }
    },
-    "node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
    "node_modules/fill-range": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3041,18 +3009,6 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
-    "node_modules/formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "license": "MIT",
-      "dependencies": {
-        "fetch-blob": "^3.1.2"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -4286,42 +4242,23 @@
        "node": ">= 0.6"
      }
    },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
    "node_modules/node-fetch": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
-      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
-      "license": "MIT",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
      "dependencies": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
+        "whatwg-url": "^5.0.0"
      },
      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": "4.x || >=6.0.0"
      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
      }
    },
    "node_modules/node-pty": {
@@ -5795,6 +5732,11 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
    "node_modules/tree-kill": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -6094,13 +6036,18 @@
      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
    },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
-      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
      }
    },
    "node_modules/which": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "claude-code-ui",
-  "version": "1.0.0",
+  "version": "1.1.3",
  "description": "A web-based UI for Claude Code CLI",
  "main": "server/index.js",
  "scripts": {
@@ -40,7 +40,7 @@
    "express": "^4.18.2",
    "lucide-react": "^0.515.0",
    "mime-types": "^3.0.1",
-    "node-fetch": "^3.3.2",
+    "node-fetch": "^2.7.0",
    "node-pty": "^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
--- a/server/index.js
+++ b/server/index.js
@@ -30,7 +30,7 @@ const os = require('os');
 const pty = require('node-pty');
 const fetch = require('node-fetch');

-const { getProjects, getSessions, getSessionMessages, renameProject, deleteSession, deleteProject, addProjectManually } = require('./projects');
+const { getProjects, getSessions, getSessionMessages, renameProject, deleteSession, deleteProject, addProjectManually, extractProjectDirectory, clearProjectDirectoryCache } = require('./projects');
 const { spawnClaude, abortClaudeSession } = require('./claude-cli');
 const gitRoutes = require('./routes/git');

@@ -76,6 +76,9 @@ function setupProjectsWatcher() {
      debounceTimer = setTimeout(async () => {
        try {
          
+          // Clear project directory cache when files change
+          clearProjectDirectoryCache();
+          
          // Get updated projects list
          const updatedProjects = await getProjects();
          
@@ -372,47 +375,15 @@ app.get('/api/projects/:projectName/files', async (req, res) => {
  try {
    
    const fs = require('fs').promises;
-    const projectPath = path.join(process.env.HOME, '.claude', 'projects', req.params.projectName);
-    
-    // Try different methods to get the actual project path
-    let actualPath = projectPath;
    
+    // Use extractProjectDirectory to get the actual project path
+    let actualPath;
    try {
-      // First try to read metadata.json
-      const metadataPath = path.join(projectPath, 'metadata.json');
-      const metadata = JSON.parse(await fs.readFile(metadataPath, 'utf8'));
-      actualPath = metadata.path || metadata.cwd;
-    } catch (e) {
-      // Fallback: try to find the actual path by testing different dash interpretations
-      let testPath = req.params.projectName;
-      if (testPath.startsWith('-')) {
-        testPath = testPath.substring(1);
-      }
-      
-      // Try to intelligently decode the path by testing which directories exist
-      const pathParts = testPath.split('-');
-      actualPath = '/' + pathParts.join('/');
-      
-      // If the simple replacement doesn't work, try to find the correct path
-      // by testing combinations where some dashes might be part of directory names
-      if (!require('fs').existsSync(actualPath)) {
-        // Try different combinations of dash vs slash
-        for (let i = pathParts.length - 1; i >= 0; i--) {
-          let testParts = [...pathParts];
-          // Try joining some parts with dashes instead of slashes
-          for (let j = i; j < testParts.length - 1; j++) {
-            testParts[j] = testParts[j] + '-' + testParts[j + 1];
-            testParts.splice(j + 1, 1);
-            let testActualPath = '/' + testParts.join('/');
-            if (require('fs').existsSync(testActualPath)) {
-              actualPath = testActualPath;
-              break;
-            }
-          }
-          if (require('fs').existsSync(actualPath)) break;
-        }
-      }
-      
+      actualPath = await extractProjectDirectory(req.params.projectName);
+    } catch (error) {
+      console.error('Error extracting project directory:', error);
+      // Fallback to simple dash replacement
+      actualPath = req.params.projectName.replace(/-/g, '/');
    }
    
    // Check if path exists
@@ -691,7 +662,6 @@ app.post('/api/transcribe', async (req, res) => {
        formData.append('language', 'en');
        
        // Make request to OpenAI
-        const fetch = require('node-fetch');
        const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
          method: 'POST',
          headers: {
--- a/server/projects.js
+++ b/server/projects.js
@@ -2,6 +2,17 @@ const fs = require('fs').promises;
 const path = require('path');
 const readline = require('readline');

+// Cache for extracted project directories
+const projectDirectoryCache = new Map();
+let cacheTimestamp = Date.now();
+
+// Clear cache when needed (called when project files change)
+function clearProjectDirectoryCache() {
+  projectDirectoryCache.clear();
+  cacheTimestamp = Date.now();
+  console.log('🗑️ Project directory cache cleared');
+}
+
 // Load project configuration file
 async function loadProjectConfig() {
  const configPath = path.join(process.env.HOME, '.claude', 'project-config.json');
@@ -21,9 +32,9 @@ async function saveProjectConfig(config) {
 }

 // Generate better display name from path
-async function generateDisplayName(projectName) {
-  // Convert "-home-user-projects-myapp" to a readable format
-  let projectPath = projectName.replace(/-/g, '/');
+async function generateDisplayName(projectName, actualProjectDir = null) {
+  // Use actual project directory if provided, otherwise decode from project name
+  let projectPath = actualProjectDir || projectName.replace(/-/g, '/');
  
  // Try to read package.json from the project path
  try {
@@ -54,6 +65,111 @@ async function generateDisplayName(projectName) {
  return projectPath;
 }

+// Extract the actual project directory from JSONL sessions (with caching)
+async function extractProjectDirectory(projectName) {
+  // Check cache first
+  if (projectDirectoryCache.has(projectName)) {
+    return projectDirectoryCache.get(projectName);
+  }
+  
+  console.log(`🔍 Extracting project directory for: ${projectName}`);
+  
+  const projectDir = path.join(process.env.HOME, '.claude', 'projects', projectName);
+  const cwdCounts = new Map();
+  let latestTimestamp = 0;
+  let latestCwd = null;
+  let extractedPath;
+  
+  try {
+    const files = await fs.readdir(projectDir);
+    const jsonlFiles = files.filter(file => file.endsWith('.jsonl'));
+    
+    if (jsonlFiles.length === 0) {
+      // Fall back to decoded project name if no sessions
+      extractedPath = projectName.replace(/-/g, '/');
+    } else {
+      // Process all JSONL files to collect cwd values
+      for (const file of jsonlFiles) {
+        const jsonlFile = path.join(projectDir, file);
+        const fileStream = require('fs').createReadStream(jsonlFile);
+        const rl = readline.createInterface({
+          input: fileStream,
+          crlfDelay: Infinity
+        });
+        
+        for await (const line of rl) {
+          if (line.trim()) {
+            try {
+              const entry = JSON.parse(line);
+              
+              if (entry.cwd) {
+                // Count occurrences of each cwd
+                cwdCounts.set(entry.cwd, (cwdCounts.get(entry.cwd) || 0) + 1);
+                
+                // Track the most recent cwd
+                const timestamp = new Date(entry.timestamp || 0).getTime();
+                if (timestamp > latestTimestamp) {
+                  latestTimestamp = timestamp;
+                  latestCwd = entry.cwd;
+                }
+              }
+            } catch (parseError) {
+              // Skip malformed lines
+            }
+          }
+        }
+      }
+      
+      // Determine the best cwd to use
+      if (cwdCounts.size === 0) {
+        // No cwd found, fall back to decoded project name
+        extractedPath = projectName.replace(/-/g, '/');
+      } else if (cwdCounts.size === 1) {
+        // Only one cwd, use it
+        extractedPath = Array.from(cwdCounts.keys())[0];
+      } else {
+        // Multiple cwd values - prefer the most recent one if it has reasonable usage
+        const mostRecentCount = cwdCounts.get(latestCwd) || 0;
+        const maxCount = Math.max(...cwdCounts.values());
+        
+        // Use most recent if it has at least 25% of the max count
+        if (mostRecentCount >= maxCount * 0.25) {
+          extractedPath = latestCwd;
+        } else {
+          // Otherwise use the most frequently used cwd
+          for (const [cwd, count] of cwdCounts.entries()) {
+            if (count === maxCount) {
+              extractedPath = cwd;
+              break;
+            }
+          }
+        }
+        
+        // Fallback (shouldn't reach here)
+        if (!extractedPath) {
+          extractedPath = latestCwd || projectName.replace(/-/g, '/');
+        }
+      }
+    }
+    
+    // Cache the result
+    projectDirectoryCache.set(projectName, extractedPath);
+    console.log(`💾 Cached project directory: ${projectName} -> ${extractedPath}`);
+    
+    return extractedPath;
+    
+  } catch (error) {
+    console.error(`Error extracting project directory for ${projectName}:`, error);
+    // Fall back to decoded project name
+    extractedPath = projectName.replace(/-/g, '/');
+    
+    // Cache the fallback result too
+    projectDirectoryCache.set(projectName, extractedPath);
+    
+    return extractedPath;
+  }
+}
+
 async function getProjects() {
  const claudeDir = path.join(process.env.HOME, '.claude', 'projects');
  const config = await loadProjectConfig();
@@ -69,14 +185,17 @@ async function getProjects() {
        existingProjects.add(entry.name);
        const projectPath = path.join(claudeDir, entry.name);
        
+        // Extract actual project directory from JSONL sessions
+        const actualProjectDir = await extractProjectDirectory(entry.name);
+        
        // Get display name from config or generate one
        const customName = config[entry.name]?.displayName;
-        const autoDisplayName = await generateDisplayName(entry.name);
-        const fullPath = entry.name.replace(/-/g, '/');
+        const autoDisplayName = await generateDisplayName(entry.name, actualProjectDir);
+        const fullPath = actualProjectDir;
        
        const project = {
          name: entry.name,
-          path: projectPath,
+          path: actualProjectDir,
          displayName: customName || autoDisplayName,
          fullPath: fullPath,
          isCustomName: !!customName,
@@ -105,17 +224,27 @@ async function getProjects() {
  // Add manually configured projects that don't exist as folders yet
  for (const [projectName, projectConfig] of Object.entries(config)) {
    if (!existingProjects.has(projectName) && projectConfig.manuallyAdded) {
-      const fullPath = projectName.replace(/-/g, '/');
+      // Use the original path if available, otherwise extract from potential sessions
+      let actualProjectDir = projectConfig.originalPath;
      
-      const project = {
-        name: projectName,
-        path: null, // No physical path yet
-        displayName: projectConfig.displayName || await generateDisplayName(projectName),
-        fullPath: fullPath,
-        isCustomName: !!projectConfig.displayName,
-        isManuallyAdded: true,
-        sessions: []
-      };
+      if (!actualProjectDir) {
+        try {
+          actualProjectDir = await extractProjectDirectory(projectName);
+        } catch (error) {
+          // Fall back to decoded project name
+          actualProjectDir = projectName.replace(/-/g, '/');
+        }
+      }
+      
+              const project = {
+          name: projectName,
+          path: actualProjectDir,
+          displayName: projectConfig.displayName || await generateDisplayName(projectName, actualProjectDir),
+          fullPath: actualProjectDir,
+          isCustomName: !!projectConfig.displayName,
+          isManuallyAdded: true,
+          sessions: []
+        };
      
      projects.push(project);
    }
@@ -463,9 +592,9 @@ async function addProjectManually(projectPath, displayName = null) {
  
  return {
    name: projectName,
-    path: null,
+    path: absolutePath,
    fullPath: absolutePath,
-    displayName: displayName || await generateDisplayName(projectName),
+    displayName: displayName || await generateDisplayName(projectName, absolutePath),
    isManuallyAdded: true,
    sessions: []
  };
@@ -483,5 +612,7 @@ module.exports = {
  deleteProject,
  addProjectManually,
  loadProjectConfig,
-  saveProjectConfig
+  saveProjectConfig,
+  extractProjectDirectory,
+  clearProjectDirectoryCache
 };
--- a/server/routes/git.js
+++ b/server/routes/git.js
@@ -3,15 +3,47 @@ const { exec } = require('child_process');
 const { promisify } = require('util');
 const path = require('path');
 const fs = require('fs').promises;
+const { extractProjectDirectory } = require('../projects');

 const router = express.Router();
 const execAsync = promisify(exec);

 // Helper function to get the actual project path from the encoded project name
-function getActualProjectPath(projectName) {
-  // Claude stores projects with dashes instead of slashes
-  // Convert "-Users-dmieloch-Dev-experiments-claudecodeui" to "/Users/dmieloch/Dev/experiments/claudecodeui"
-  return projectName.replace(/-/g, '/');
+async function getActualProjectPath(projectName) {
+  try {
+    return await extractProjectDirectory(projectName);
+  } catch (error) {
+    console.error(`Error extracting project directory for ${projectName}:`, error);
+    // Fallback to the old method
+    return projectName.replace(/-/g, '/');
+  }
+}
+
+// Helper function to validate git repository
+async function validateGitRepository(projectPath) {
+  try {
+    // Check if directory exists
+    await fs.access(projectPath);
+  } catch {
+    throw new Error(`Project path not found: ${projectPath}`);
+  }
+
+  try {
+    // Use --show-toplevel to get the root of the git repository
+    const { stdout: gitRoot } = await execAsync('git rev-parse --show-toplevel', { cwd: projectPath });
+    const normalizedGitRoot = path.resolve(gitRoot.trim());
+    const normalizedProjectPath = path.resolve(projectPath);
+    
+    // Ensure the git root matches our project path (prevent using parent git repos)
+    if (normalizedGitRoot !== normalizedProjectPath) {
+      throw new Error(`Project directory is not a git repository. This directory is inside a git repository at ${normalizedGitRoot}, but git operations should be run from the repository root.`);
+    }
+  } catch (error) {
+    if (error.message.includes('Project directory is not a git repository')) {
+      throw error;
+    }
+    throw new Error('Not a git repository. This directory does not contain a .git folder. Initialize a git repository with "git init" to use source control features.');
+  }
 }

 // Get git status for a project
@@ -23,24 +55,11 @@ router.get('/status', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
    console.log('Git status for project:', project, '-> path:', projectPath);
    
-    // Check if directory exists
-    try {
-      await fs.access(projectPath);
-    } catch {
-      console.error('Project path not found:', projectPath);
-      return res.json({ error: 'Project not found' });
-    }
-
-    // Check if it's a git repository
-    try {
-      await execAsync('git rev-parse --git-dir', { cwd: projectPath });
-    } catch {
-      console.error('Not a git repository:', projectPath);
-      return res.json({ error: 'Not a git repository' });
-    }
+    // Validate git repository
+    await validateGitRepository(projectPath);

    // Get current branch
    const { stdout: branch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
@@ -79,7 +98,14 @@ router.get('/status', async (req, res) => {
    });
  } catch (error) {
    console.error('Git status error:', error);
-    res.json({ error: error.message });
+    res.json({ 
+      error: error.message.includes('not a git repository') || error.message.includes('Project directory is not a git repository') 
+        ? error.message 
+        : 'Git operation failed',
+      details: error.message.includes('not a git repository') || error.message.includes('Project directory is not a git repository')
+        ? error.message
+        : `Failed to get git status: ${error.message}`
+    });
  }
 });

@@ -92,7 +118,10 @@ router.get('/diff', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
+    
+    // Validate git repository
+    await validateGitRepository(projectPath);
    
    // Check if file is untracked
    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
@@ -133,7 +162,10 @@ router.post('/commit', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
+    
+    // Validate git repository
+    await validateGitRepository(projectPath);
    
    // Stage selected files
    for (const file of files) {
@@ -159,9 +191,12 @@ router.get('/branches', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
    console.log('Git branches for project:', project, '-> path:', projectPath);
    
+    // Validate git repository
+    await validateGitRepository(projectPath);
+    
    // Get all branches
    const { stdout } = await execAsync('git branch -a', { cwd: projectPath });
    
@@ -199,7 +234,7 @@ router.post('/checkout', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
    
    // Checkout the branch
    const { stdout } = await execAsync(`git checkout "${branch}"`, { cwd: projectPath });
@@ -220,7 +255,7 @@ router.post('/create-branch', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
    
    // Create and checkout new branch
    const { stdout } = await execAsync(`git checkout -b "${branch}"`, { cwd: projectPath });
@@ -241,7 +276,7 @@ router.get('/commits', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
    
    // Get commit log with stats
    const { stdout } = await execAsync(
@@ -292,7 +327,7 @@ router.get('/commit-diff', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
    
    // Get diff for the commit
    const { stdout } = await execAsync(
@@ -316,7 +351,7 @@ router.post('/generate-commit-message', async (req, res) => {
  }

  try {
-    const projectPath = getActualProjectPath(project);
+    const projectPath = await getActualProjectPath(project);
    
    // Get diff for selected files
    let combinedDiff = '';
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -28,6 +28,7 @@ import QuickSettingsPanel from './components/QuickSettingsPanel';

 import { useWebSocket } from './utils/websocket';
 import { ThemeProvider } from './contexts/ThemeContext';
+import { useVersionCheck } from './hooks/useVersionCheck';


 // Main App component with routing
@@ -35,6 +36,9 @@ function AppContent() {
  const navigate = useNavigate();
  const { sessionId } = useParams();
  
+  const { updateAvailable, latestVersion, currentVersion } = useVersionCheck('siteboon', 'claudecodeui');
+  const [showVersionModal, setShowVersionModal] = useState(false);
+  
  const [projects, setProjects] = useState([]);
  const [selectedProject, setSelectedProject] = useState(null);
  const [selectedSession, setSelectedSession] = useState(null);
@@ -399,6 +403,92 @@ function AppContent() {
    }
  };

+  // Version Upgrade Modal Component
+  const VersionUpgradeModal = () => {
+    if (!showVersionModal) return null;
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        {/* Backdrop */}
+        <div 
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={() => setShowVersionModal(false)}
+        />
+        
+        {/* Modal */}
+        <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-md mx-4 p-6 space-y-4">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
+                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+                </svg>
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Update Available</h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400">A new version is ready</p>
+              </div>
+            </div>
+            <button
+              onClick={() => setShowVersionModal(false)}
+              className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Version Info */}
+          <div className="space-y-3">
+            <div className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Current Version</span>
+              <span className="text-sm text-gray-900 dark:text-white font-mono">{currentVersion}</span>
+            </div>
+            <div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
+              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">Latest Version</span>
+              <span className="text-sm text-blue-900 dark:text-blue-100 font-mono">{latestVersion}</span>
+            </div>
+          </div>
+
+          {/* Upgrade Instructions */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-medium text-gray-900 dark:text-white">How to upgrade:</h3>
+            <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 border">
+              <code className="text-sm text-gray-800 dark:text-gray-200 font-mono">
+                git checkout main && git pull && npm install
+              </code>
+            </div>
+            <p className="text-xs text-gray-600 dark:text-gray-400">
+              Run this command in your Claude Code UI directory to update to the latest version.
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-2 pt-2">
+            <button
+              onClick={() => setShowVersionModal(false)}
+              className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
+            >
+              Later
+            </button>
+            <button
+              onClick={() => {
+                // Copy command to clipboard
+                navigator.clipboard.writeText('git checkout main && git pull && npm install');
+                setShowVersionModal(false);
+              }}
+              className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
+            >
+              Copy Command
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
  return (
    <div className="fixed inset-0 flex bg-background">
      {/* Fixed Desktop Sidebar */}
@@ -417,6 +507,10 @@ function AppContent() {
              isLoading={isLoadingProjects}
              onRefresh={handleSidebarRefresh}
              onShowSettings={() => setShowToolsSettings(true)}
+              updateAvailable={updateAvailable}
+              latestVersion={latestVersion}
+              currentVersion={currentVersion}
+              onShowVersionModal={() => setShowVersionModal(true)}
            />
          </div>
        </div>
@@ -458,6 +552,10 @@ function AppContent() {
              isLoading={isLoadingProjects}
              onRefresh={handleSidebarRefresh}
              onShowSettings={() => setShowToolsSettings(true)}
+              updateAvailable={updateAvailable}
+              latestVersion={latestVersion}
+              currentVersion={currentVersion}
+              onShowVersionModal={() => setShowVersionModal(true)}
            />
          </div>
        </div>
@@ -524,6 +622,9 @@ function AppContent() {
        isOpen={showToolsSettings}
        onClose={() => setShowToolsSettings(false)}
      />
+
+      {/* Version Upgrade Modal */}
+      <VersionUpgradeModal />
    </div>
  );
 }
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -1112,15 +1112,15 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
  const isNearBottom = useCallback(() => {
    if (!scrollContainerRef.current) return false;
    const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
-    // Consider "near bottom" if within 100px of the bottom
-    return scrollHeight - scrollTop - clientHeight < 100;
+    // Consider "near bottom" if within 50px of the bottom
+    return scrollHeight - scrollTop - clientHeight < 50;
  }, []);

  // Handle scroll events to detect when user manually scrolls up
  const handleScroll = useCallback(() => {
    if (scrollContainerRef.current) {
-      const wasNearBottom = isNearBottom();
-      setIsUserScrolledUp(!wasNearBottom);
+      const nearBottom = isNearBottom();
+      setIsUserScrolledUp(!nearBottom);
    }
  }, [isNearBottom]);

@@ -1540,13 +1540,12 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
  });

  useEffect(() => {
-    // Only auto-scroll to bottom when new messages arrive if:
-    // 1. Auto-scroll is enabled in settings
-    // 2. User hasn't manually scrolled up
+    // Auto-scroll to bottom when new messages arrive
    if (scrollContainerRef.current && chatMessages.length > 0) {
      if (autoScrollToBottom) {
+        // If auto-scroll is enabled, always scroll to bottom unless user has manually scrolled up
        if (!isUserScrolledUp) {
-          setTimeout(() => scrollToBottom(), 0);
+          setTimeout(() => scrollToBottom(), 50); // Small delay to ensure DOM is updated
        }
      } else {
        // When auto-scroll is disabled, preserve the visual position
@@ -1564,12 +1563,15 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
    }
  }, [chatMessages.length, isUserScrolledUp, scrollToBottom, autoScrollToBottom]);

-  // Scroll to bottom when component mounts with existing messages
+  // Scroll to bottom when component mounts with existing messages or when messages first load
  useEffect(() => {
-    if (scrollContainerRef.current && chatMessages.length > 0 && autoScrollToBottom) {
-      setTimeout(() => scrollToBottom(), 100); // Small delay to ensure rendering
+    if (scrollContainerRef.current && chatMessages.length > 0) {
+      // Always scroll to bottom when messages first load (user expects to see latest)
+      // Also reset scroll state
+      setIsUserScrolledUp(false);
+      setTimeout(() => scrollToBottom(), 200); // Longer delay to ensure full rendering
    }
-  }, [scrollToBottom, autoScrollToBottom]);
+  }, [chatMessages.length > 0, scrollToBottom]); // Trigger when messages first appear

  // Add scroll event listener to detect user scrolling
  useEffect(() => {
@@ -1636,8 +1638,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
      can_interrupt: true
    });
    
-    // Always scroll to bottom when user sends a message (they're actively participating)
-    setTimeout(() => scrollToBottom(), 0);
+    // Always scroll to bottom when user sends a message and reset scroll state
+    setIsUserScrolledUp(false); // Reset scroll state so auto-scroll works for Claude's response
+    setTimeout(() => scrollToBottom(), 100); // Longer delay to ensure message is rendered

    // Session Protection: Mark session as active to prevent automatic project updates during conversation
    // This is crucial for maintaining chat state integrity. We handle two cases:
@@ -1882,21 +1885,21 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
        )}
        
        <div ref={messagesEndRef} />
-        
-        {/* Floating scroll to bottom button */}
-        {isUserScrolledUp && chatMessages.length > 0 && (
-          <button
-            onClick={scrollToBottom}
-            className="absolute bottom-4 right-4 w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800 z-10"
-            title="Scroll to bottom"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-            </svg>
-          </button>
-        )}
      </div>

+      {/* Floating scroll to bottom button - positioned outside scrollable container */}
+      {isUserScrolledUp && chatMessages.length > 0 && (
+        <button
+          onClick={scrollToBottom}
+          className="fixed bottom-20 sm:bottom-24 right-4 sm:right-6 w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800 z-50"
+          title="Scroll to bottom"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+          </svg>
+        </button>
+      )}
+
      {/* Input Area - Fixed Bottom */}
      <div className={`p-2 sm:p-4 md:p-6 flex-shrink-0 ${
        isInputFocused ? 'pb-2 sm:pb-4 md:pb-6' : 'pb-16 sm:pb-4 md:pb-6'
@@ -1977,8 +1980,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                </svg>
              </button>
            )}
-            {/* Mic button */}
-            <div className="absolute right-16 sm:right-16 top-1/2 transform -translate-y-1/2">
+            {/* Mic button - HIDDEN */}
+            <div className="absolute right-16 sm:right-16 top-1/2 transform -translate-y-1/2" style={{ display: 'none' }}>
              <MicButton 
                onTranscript={handleTranscript}
                className="w-10 h-10 sm:w-10 sm:h-10"
--- a/src/components/GitPanel.jsx
+++ b/src/components/GitPanel.jsx
@@ -62,7 +62,7 @@ function GitPanel({ selectedProject, isMobile }) {
      
      if (data.error) {
        console.error('Git status error:', data.error);
-        setGitStatus(null);
+        setGitStatus({ error: data.error, details: data.details });
      } else {
        setGitStatus(data);
        setCurrentBranch(data.branch || 'main');
@@ -506,169 +506,191 @@ function GitPanel({ selectedProject, isMobile }) {
        </button>
      </div>

-      {/* Tab Navigation */}
-      <div className="flex border-b border-gray-200 dark:border-gray-700">
-        <button
-          onClick={() => setActiveView('changes')}
-          className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
-            activeView === 'changes'
-              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
-              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-          }`}
-        >
-          <div className="flex items-center justify-center gap-2">
-            <FileText className="w-4 h-4" />
-            <span>Changes</span>
+      {/* Git Repository Not Found Message */}
+      {gitStatus?.error ? (
+        <div className="flex-1 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 px-6 py-12">
+          <GitBranch className="w-20 h-20 mb-6 opacity-30" />
+          <h3 className="text-xl font-medium mb-3 text-center">{gitStatus.error}</h3>
+          {gitStatus.details && (
+            <p className="text-sm text-center leading-relaxed mb-6 max-w-md">{gitStatus.details}</p>
+          )}
+          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 max-w-md">
+            <p className="text-sm text-blue-700 dark:text-blue-300 text-center">
+              <strong>Tip:</strong> Run <code className="bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded font-mono text-xs">git init</code> in your project directory to initialize git source control.
+            </p>
          </div>
-        </button>
-        <button
-          onClick={() => setActiveView('history')}
-          className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
-            activeView === 'history'
-              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
-              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-          }`}
-        >
-          <div className="flex items-center justify-center gap-2">
-            <History className="w-4 h-4" />
-            <span>History</span>
-          </div>
-        </button>
-      </div>
-
-      {/* Changes View */}
-      {activeView === 'changes' && (
+        </div>
+      ) : (
        <>
-          {/* Commit Message Input */}
-          <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-            <div className="relative">
-              <textarea
-                ref={textareaRef}
-                value={commitMessage}
-                onChange={(e) => setCommitMessage(e.target.value)}
-                placeholder="Message (Ctrl+Enter to commit)"
-                className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 resize-none pr-20"
-                rows="3"
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                    handleCommit();
-                  }
-                }}
-              />
-              <div className="absolute right-2 top-2 flex gap-1">
+          {/* Tab Navigation - Only show when git is available */}
+          <div className="flex border-b border-gray-200 dark:border-gray-700">
+            <button
+              onClick={() => setActiveView('changes')}
+              className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+                activeView === 'changes'
+                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+              }`}
+            >
+              <div className="flex items-center justify-center gap-2">
+                <FileText className="w-4 h-4" />
+                <span>Changes</span>
+              </div>
+            </button>
+            <button
+              onClick={() => setActiveView('history')}
+              className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+                activeView === 'history'
+                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+              }`}
+            >
+              <div className="flex items-center justify-center gap-2">
+                <History className="w-4 h-4" />
+                <span>History</span>
+              </div>
+            </button>
+          </div>
+
+          {/* Changes View */}
+          {activeView === 'changes' && (
+            <>
+              {/* Commit Message Input */}
+              <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+                <div className="relative">
+                  <textarea
+                    ref={textareaRef}
+                    value={commitMessage}
+                    onChange={(e) => setCommitMessage(e.target.value)}
+                    placeholder="Message (Ctrl+Enter to commit)"
+                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 resize-none pr-20"
+                    rows="3"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                        handleCommit();
+                      }
+                    }}
+                  />
+                  <div className="absolute right-2 top-2 flex gap-1">
+                    <button
+                      onClick={generateCommitMessage}
+                      disabled={selectedFiles.size === 0 || isGeneratingMessage}
+                      className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Generate commit message"
+                    >
+                      {isGeneratingMessage ? (
+                        <RefreshCw className="w-4 h-4 animate-spin" />
+                      ) : (
+                        <Sparkles className="w-4 h-4" />
+                      )}
+                    </button>
+                    <div style={{ display: 'none' }}>
+                      <MicButton
+                        onTranscript={(transcript) => setCommitMessage(transcript)}
+                        mode="default"
+                        className="p-1.5"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between mt-2">
+                  <span className="text-xs text-gray-500">
+                    {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
+                  </span>
+                  <button
+                    onClick={handleCommit}
+                    disabled={!commitMessage.trim() || selectedFiles.size === 0 || isCommitting}
+                    className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
+                  >
+                    <Check className="w-3 h-3" />
+                    <span>{isCommitting ? 'Committing...' : 'Commit'}</span>
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* File Selection Controls - Only show in changes view and when git is working */}
+          {activeView === 'changes' && gitStatus && !gitStatus.error && (
+            <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+              <span className="text-xs text-gray-600 dark:text-gray-400">
+                {selectedFiles.size} of {(gitStatus?.modified?.length || 0) + (gitStatus?.added?.length || 0) + (gitStatus?.deleted?.length || 0) + (gitStatus?.untracked?.length || 0)} files selected
+              </span>
+              <div className="flex gap-2">
                <button
-                  onClick={generateCommitMessage}
-                  disabled={selectedFiles.size === 0 || isGeneratingMessage}
-                  className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
-                  title="Generate commit message"
+                  onClick={() => {
+                    const allFiles = new Set([
+                      ...(gitStatus?.modified || []),
+                      ...(gitStatus?.added || []),
+                      ...(gitStatus?.deleted || []),
+                      ...(gitStatus?.untracked || [])
+                    ]);
+                    setSelectedFiles(allFiles);
+                  }}
+                  className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
                >
-                  {isGeneratingMessage ? (
-                    <RefreshCw className="w-4 h-4 animate-spin" />
-                  ) : (
-                    <Sparkles className="w-4 h-4" />
-                  )}
+                  Select All
+                </button>
+                <span className="text-gray-300 dark:text-gray-600">|</span>
+                <button
+                  onClick={() => setSelectedFiles(new Set())}
+                  className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+                >
+                  Deselect All
                </button>
-                <MicButton
-                  onTranscript={(transcript) => setCommitMessage(transcript)}
-                  mode="default"
-                  className="p-1.5"
-                />
              </div>
            </div>
-            <div className="flex items-center justify-between mt-2">
-              <span className="text-xs text-gray-500">
-                {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
-              </span>
+          )}
+
+          {/* Status Legend Toggle */}
+          {!gitStatus?.error && (
+            <div className="border-b border-gray-200 dark:border-gray-700">
              <button
-                onClick={handleCommit}
-                disabled={!commitMessage.trim() || selectedFiles.size === 0 || isCommitting}
-                className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
+                onClick={() => setShowLegend(!showLegend)}
+                className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1"
              >
-                <Check className="w-3 h-3" />
-                <span>{isCommitting ? 'Committing...' : 'Commit'}</span>
+                <Info className="w-3 h-3" />
+                <span>File Status Guide</span>
+                {showLegend ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
              </button>
+              
+              {showLegend && (
+                <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-xs">
+                  <div className={`${isMobile ? 'grid grid-cols-2 gap-3 justify-items-center' : 'flex justify-center gap-6'}`}>
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800 font-bold text-xs">
+                        M
+                      </span>
+                      <span className="text-gray-600 dark:text-gray-400 italic">Modified</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded border border-green-200 dark:border-green-800 font-bold text-xs">
+                        A
+                      </span>
+                      <span className="text-gray-600 dark:text-gray-400 italic">Added</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded border border-red-200 dark:border-red-800 font-bold text-xs">
+                        D
+                      </span>
+                      <span className="text-gray-600 dark:text-gray-400 italic">Deleted</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded border border-gray-300 dark:border-gray-600 font-bold text-xs">
+                        U
+                      </span>
+                      <span className="text-gray-600 dark:text-gray-400 italic">Untracked</span>
+                    </div>
+                  </div>
+                </div>
+              )}
            </div>
-          </div>
+          )}
        </>
      )}

-      {/* File Selection Controls - Only show in changes view */}
-      {activeView === 'changes' && gitStatus && (
-        <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            {selectedFiles.size} of {(gitStatus?.modified?.length || 0) + (gitStatus?.added?.length || 0) + (gitStatus?.deleted?.length || 0) + (gitStatus?.untracked?.length || 0)} files selected
-          </span>
-          <div className="flex gap-2">
-            <button
-              onClick={() => {
-                const allFiles = new Set([
-                  ...(gitStatus?.modified || []),
-                  ...(gitStatus?.added || []),
-                  ...(gitStatus?.deleted || []),
-                  ...(gitStatus?.untracked || [])
-                ]);
-                setSelectedFiles(allFiles);
-              }}
-              className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
-            >
-              Select All
-            </button>
-            <span className="text-gray-300 dark:text-gray-600">|</span>
-            <button
-              onClick={() => setSelectedFiles(new Set())}
-              className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
-            >
-              Deselect All
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Status Legend Toggle */}
-      <div className="border-b border-gray-200 dark:border-gray-700">
-        <button
-          onClick={() => setShowLegend(!showLegend)}
-          className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1"
-        >
-          <Info className="w-3 h-3" />
-          <span>File Status Guide</span>
-          {showLegend ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
-        </button>
-        
-        {showLegend && (
-          <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-xs">
-            <div className={`${isMobile ? 'grid grid-cols-2 gap-3 justify-items-center' : 'flex justify-center gap-6'}`}>
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800 font-bold text-xs">
-                  M
-                </span>
-                <span className="text-gray-600 dark:text-gray-400 italic">Modified</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded border border-green-200 dark:border-green-800 font-bold text-xs">
-                  A
-                </span>
-                <span className="text-gray-600 dark:text-gray-400 italic">Added</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded border border-red-200 dark:border-red-800 font-bold text-xs">
-                  D
-                </span>
-                <span className="text-gray-600 dark:text-gray-400 italic">Deleted</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center justify-center w-5 h-5 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded border border-gray-300 dark:border-gray-600 font-bold text-xs">
-                  U
-                </span>
-                <span className="text-gray-600 dark:text-gray-400 italic">Untracked</span>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* File List - Changes View */}
-      {activeView === 'changes' && (
+      {/* File List - Changes View - Only show when git is available */}
+      {activeView === 'changes' && !gitStatus?.error && (
        <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
          {isLoading ? (
            <div className="flex items-center justify-center h-32">
@@ -690,8 +712,8 @@ function GitPanel({ selectedProject, isMobile }) {
        </div>
      )}

-      {/* History View */}
-      {activeView === 'history' && (
+      {/* History View - Only show when git is available */}
+      {activeView === 'history' && !gitStatus?.error && (
        <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
          {isLoading ? (
            <div className="flex items-center justify-center h-32">
--- a/src/components/MicButton.jsx
+++ b/src/components/MicButton.jsx
@@ -5,13 +5,35 @@ import { transcribeWithWhisper } from '../utils/whisper';
 export function MicButton({ onTranscript, className = '' }) {
  const [state, setState] = useState('idle'); // idle, recording, transcribing, processing
  const [error, setError] = useState(null);
+  const [isSupported, setIsSupported] = useState(true);
  
  const mediaRecorderRef = useRef(null);
  const streamRef = useRef(null);
  const chunksRef = useRef([]);
  const lastTapRef = useRef(0);
  
-  // Version indicator to verify updates
+  // Check microphone support on mount
+  useEffect(() => {
+    const checkSupport = () => {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        setIsSupported(false);
+        setError('Microphone not supported. Please use HTTPS or a modern browser.');
+        return;
+      }
+      
+      // Additional check for secure context
+      if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
+        setIsSupported(false);
+        setError('Microphone requires HTTPS. Please use a secure connection.');
+        return;
+      }
+      
+      setIsSupported(true);
+      setError(null);
+    };
+    
+    checkSupport();
+  }, []);

  // Start recording
  const startRecording = async () => {
@@ -20,6 +42,11 @@ export function MicButton({ onTranscript, className = '' }) {
      setError(null);
      chunksRef.current = [];

+      // Check if getUserMedia is available
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        throw new Error('Microphone access not available. Please use HTTPS or a supported browser.');
+      }
+
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      streamRef.current = stream;

@@ -79,7 +106,23 @@ export function MicButton({ onTranscript, className = '' }) {
      console.log('Recording started successfully');
    } catch (err) {
      console.error('Failed to start recording:', err);
-      setError('Microphone access denied');
+      
+      // Provide specific error messages based on error type
+      let errorMessage = 'Microphone access failed';
+      
+      if (err.name === 'NotAllowedError') {
+        errorMessage = 'Microphone access denied. Please allow microphone permissions.';
+      } else if (err.name === 'NotFoundError') {
+        errorMessage = 'No microphone found. Please check your audio devices.';
+      } else if (err.name === 'NotSupportedError') {
+        errorMessage = 'Microphone not supported by this browser.';
+      } else if (err.name === 'NotReadableError') {
+        errorMessage = 'Microphone is being used by another application.';
+      } else if (err.message.includes('HTTPS')) {
+        errorMessage = err.message;
+      }
+      
+      setError(errorMessage);
      setState('idle');
    }
  };
@@ -109,6 +152,11 @@ export function MicButton({ onTranscript, className = '' }) {
      e.stopPropagation();
    }
    
+    // Don't proceed if microphone is not supported
+    if (!isSupported) {
+      return;
+    }
+    
    // Debounce for mobile double-tap issue
    const now = Date.now();
    if (now - lastTapRef.current < 300) {
@@ -138,6 +186,14 @@ export function MicButton({ onTranscript, className = '' }) {

  // Button appearance based on state
  const getButtonAppearance = () => {
+    if (!isSupported) {
+      return {
+        icon: <Mic className="w-5 h-5" />,
+        className: 'bg-gray-400 cursor-not-allowed',
+        disabled: true
+      };
+    }
+    
    switch (state) {
      case 'recording':
        return {
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -142,8 +142,8 @@ const QuickSettingsPanel = ({
              </label>
            </div>

-            {/* Whisper Dictation Settings */}
-            <div className="space-y-2">
+            {/* Whisper Dictation Settings - HIDDEN */}
+            <div className="space-y-2" style={{ display: 'none' }}>
              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Whisper Dictation</h4>
              
              <div className="space-y-2">
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -44,7 +44,11 @@ function Sidebar({
  onProjectDelete,
  isLoading,
  onRefresh,
-  onShowSettings
+  onShowSettings,
+  updateAvailable,
+  latestVersion,
+  currentVersion,
+  onShowVersionModal
 }) {
  const [expandedProjects, setExpandedProjects] = useState(new Set());
  const [editingProject, setEditingProject] = useState(null);
@@ -1036,6 +1040,50 @@ function Sidebar({
        </div>
      </ScrollArea>
      
+      {/* Version Update Notification */}
+      {updateAvailable && (
+        <div className="md:p-2 border-t border-border/50 flex-shrink-0">
+          {/* Desktop Version Notification */}
+          <div className="hidden md:block">
+            <Button
+              variant="ghost"
+              className="w-full justify-start gap-3 p-3 h-auto font-normal text-left hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors duration-200 border border-blue-200 dark:border-blue-700 rounded-lg mb-2"
+              onClick={onShowVersionModal}
+            >
+              <div className="relative">
+                <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+                </svg>
+                <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">Update Available</div>
+                <div className="text-xs text-blue-600 dark:text-blue-400">Version {latestVersion} is ready</div>
+              </div>
+            </Button>
+          </div>
+          
+          {/* Mobile Version Notification */}
+          <div className="md:hidden p-3 pb-2">
+            <button
+              className="w-full h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl flex items-center justify-start gap-3 px-4 active:scale-[0.98] transition-all duration-150"
+              onClick={onShowVersionModal}
+            >
+              <div className="relative">
+                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+                </svg>
+                <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+              </div>
+              <div className="min-w-0 flex-1 text-left">
+                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">Update Available</div>
+                <div className="text-xs text-blue-600 dark:text-blue-400">Version {latestVersion} is ready</div>
+              </div>
+            </button>
+          </div>
+        </div>
+      )}
+      
      {/* Settings Section */}
      <div className="md:p-2 md:border-t md:border-border flex-shrink-0">
        {/* Mobile Settings */}
--- a/src/hooks/useVersionCheck.js
+++ b/src/hooks/useVersionCheck.js
@@ -0,0 +1,39 @@
+// hooks/useVersionCheck.js
+import { useState, useEffect } from 'react';
+import { version } from '../../package.json';
+
+export const useVersionCheck = (owner, repo) => {
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [latestVersion, setLatestVersion] = useState(null);
+
+  useEffect(() => {
+    const checkVersion = async () => {
+      try {
+        const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/releases/latest`);
+        const data = await response.json();
+        
+        // Handle the case where there might not be any releases
+        if (data.tag_name) {
+          const latest = data.tag_name.replace(/^v/, '');
+          setLatestVersion(latest);
+          setUpdateAvailable(version !== latest);
+        } else {
+          // No releases found, don't show update notification
+          setUpdateAvailable(false);
+          setLatestVersion(null);
+        }
+      } catch (error) {
+        console.error('Version check failed:', error);
+        // On error, don't show update notification
+        setUpdateAvailable(false);
+        setLatestVersion(null);
+      }
+    };
+
+    checkVersion();
+    const interval = setInterval(checkVersion, 5 * 60 * 1000); // Check every 5 minutes
+    return () => clearInterval(interval);
+  }, [owner, repo]);
+
+  return { updateAvailable, latestVersion, currentVersion: version };
+};
Author	SHA1	Message	Date
simos	bca97a5284	Update GitPanel	2025-07-08 15:14:12 +00:00
simos	1bdc75e37b	Enhance project directory handling by integrating extractProjectDirectory and clearProjectDirectoryCache functions. Adjust git route handlers to utilize the new directory extraction logic for improved project path resolution.	2025-07-08 15:10:44 +00:00
simos	c5e3bd0633	Enhance project directory handling by adding extractProjectDirectory function. Update generateDisplayName to utilize actual project directory when available. Adjust getProjects and addProjectManually to incorporate new directory extraction logic for improved project path resolution.	2025-07-08 14:04:23 +00:00
simos	27f34db777	Refactor ChatInterface and MicButton components for improved scroll behavior and microphone support. Adjusted auto-scroll thresholds, added error handling for microphone access, and hid unused UI elements.	2025-07-08 13:48:33 +00:00
simos	fca741ab3f	modified: package-lock.json	2025-07-08 12:53:15 +00:00
simos	2de9766597	Update package version to 1.1.1, downgrade node-fetch to 2.7.0,	2025-07-08 12:53:03 +00:00
simos	fbe2f356cf	modified: package.json	2025-07-08 12:48:14 +00:00
simos	5bbc0446a7	Add version update notification to Sidebar component for both desktop and mobile views	2025-07-08 12:48:10 +00:00
simos	1906f3b53f	Update Sidebar component to include version information props for enhanced version management	2025-07-08 12:46:10 +00:00
simos	4e0e0e6e92	Integrate version checking system with App.jsx and Sidebar components	2025-07-08 12:38:39 +00:00
simos	781394bbcd	Add smart version checking feature - automatically detects updates and shows notifications	2025-07-08 12:18:16 +00:00