Merge pull request #142 from siteboon/feature/mcp-project

feat: Local/Project MCPs and Import from JSON

.env.example

@@ -7,6 +7,6 @@
 
 # Backend server port (Express API + WebSocket server)
 #API server
-PORT=3008
+PORT=3001
 #Frontend port
-VITE_PORT=3009
+VITE_PORT=5173

.gitignore

@@ -90,6 +90,7 @@ jspm_packages/
 # Temporary folders
 tmp/
 temp/
+.tmp/
 
 # Vite
 .vite/

.nvmrc

@@ -0,0 +1 @@
+v20.19.3

README.md

@@ -33,10 +33,11 @@ A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/cla
 
 ## Features
 
-- **Responsive Design** - Works seamlessly across desktop, tablet, and mobile
+- **Responsive Design** - Works seamlessly across desktop, tablet, and mobile so you can also use Claude Code from mobile 
 - **Interactive Chat Interface** - Built-in chat interface for seamless communication with Claude Code
 - **Integrated Shell Terminal** - Direct access to Claude Code CLI through built-in shell functionality
 - **File Explorer** - Interactive file tree with syntax highlighting and live editing
+- **Git Explorer** - View, stage and commit your changes. You can also switch branches 
 - **Session Management** - Resume conversations, manage multiple sessions, and track history
 
 
@@ -44,7 +45,7 @@ A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/cla
 
 ### Prerequisites
 
-- [Node.js](https://nodejs.org/) v16 or higher
+- [Node.js](https://nodejs.org/) v20 or higher
 - [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and configured
 
 ### Installation
@@ -72,6 +73,7 @@ cp .env.example .env
 npm run dev
 
 ```
+The application will start at the port you specified in your .env
 
 5. **Open your browser:**
    - Development: `http://localhost:3001`
@@ -120,17 +122,21 @@ The UI automatically discovers Claude Code projects from `~/.claude/projects/` a
 - **Syntax Highlighting** - Support for multiple programming languages
 - **File Operations** - Create, rename, delete files and directories
 
+#### Git Explorer
+
+
 #### Session Management
 - **Session Persistence** - All conversations automatically saved
 - **Session Organization** - Group sessions by project and timestamp
 - **Session Actions** - Rename, delete, and export conversation history
 - **Cross-device Sync** - Access sessions from any device
 
-### Mobile Experience
+### Mobile App
 - **Responsive Design** - Optimized for all screen sizes
 - **Touch-friendly Interface** - Swipe gestures and touch navigation
 - **Mobile Navigation** - Bottom tab bar for easy thumb navigation
 - **Adaptive Layout** - Collapsible sidebar and smart content prioritization
+- **Add shortcut to Home Screen** - Add a shortcut to your home screen and the app will behave like a PWA
 
 ## Architecture
 
@@ -230,8 +236,10 @@ This project is open source and free to use, modify, and distribute under the GP
 - **Watch** for updates and new releases
 - **Follow** the project for announcements
 
+### Sponsors
+- [Siteboon - AI powered website builder](https://siteboon.ai)
 ---
 
 <div align="center">
-  <strong>Made with care for the Claude Code community</strong>
-</div>
+  <strong>Made with care for the Claude Code community.</strong>
+</div>

package.json

@@ -1,7 +1,8 @@
 {
   "name": "claude-code-ui",
-  "version": "1.1.1",
+  "version": "1.6.0",
   "description": "A web-based UI for Claude Code CLI",
+  "type": "module",
   "main": "server/index.js",
   "scripts": {
     "dev": "concurrently --kill-others \"npm run server\" \"npm run client\"",
@@ -21,7 +22,6 @@
   "author": "Claude Code UI Contributors",
   "license": "MIT",
   "dependencies": {
-    "@anthropic-ai/claude-code": "^1.0.24",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.4",
@@ -33,17 +33,23 @@
     "@uiw/react-codemirror": "^4.23.13",
     "@xterm/addon-clipboard": "^0.1.0",
     "@xterm/addon-webgl": "^0.18.0",
+    "bcrypt": "^6.0.0",
+    "better-sqlite3": "^12.2.0",
     "chokidar": "^4.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cors": "^2.8.5",
+    "cross-spawn": "^7.0.3",
     "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.515.0",
     "mime-types": "^3.0.1",
+    "multer": "^2.0.1",
     "node-fetch": "^2.7.0",
-    "node-pty": "^1.0.0",
+    "node-pty": "^1.1.0-beta34",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.8.1",
     "tailwind-merge": "^3.3.1",
@@ -54,12 +60,12 @@
   "devDependencies": {
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.6.0",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
     "postcss": "^8.4.32",
     "sharp": "^0.34.2",
     "tailwindcss": "^3.4.0",
-    "vite": "^5.0.8"
+    "vite": "^7.0.4"
   }
-}
+}

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

server/claude-cli.js

@@ -1,10 +1,17 @@
-const { spawn } = require('child_process');
+import { spawn } from 'child_process';
+import crossSpawn from 'cross-spawn';
+import { promises as fs } from 'fs';
+import path from 'path';
+import os from 'os';
+
+// Use cross-spawn on Windows for better command execution
+const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;
 
 let activeClaudeProcesses = new Map(); // Track active processes by session ID
 
 async function spawnClaude(command, options = {}, ws) {
   return new Promise(async (resolve, reject) => {
-    const { sessionId, projectPath, cwd, resume, toolsSettings } = options;
+    const { sessionId, projectPath, cwd, resume, toolsSettings, permissionMode, images } = options;
     let capturedSessionId = sessionId; // Track session ID throughout the process
     let sessionCreatedSent = false; // Track if we've already sent session-created event
     
@@ -14,13 +21,67 @@ async function spawnClaude(command, options = {}, ws) {
       disallowedTools: [],
       skipPermissions: false
     };
-  
+    
     // Build Claude CLI command - start with print/resume flags first
     const args = [];
     
     // Add print flag with command if we have a command
     if (command && command.trim()) {
-      args.push('--print', command);
+
+      // Separate arguments for better cross-platform compatibility
+      // This prevents issues with spaces and quotes on Windows
+      args.push('--print');
+      args.push(command);
+    }
+    
+    // Use cwd (actual project directory) instead of projectPath (Claude's metadata directory)
+    const workingDir = cwd || process.cwd();
+    
+    // Handle images by saving them to temporary files and passing paths to Claude
+    const tempImagePaths = [];
+    let tempDir = null;
+    if (images && images.length > 0) {
+      try {
+        // Create temp directory in the project directory so Claude can access it
+        tempDir = path.join(workingDir, '.tmp', 'images', Date.now().toString());
+        await fs.mkdir(tempDir, { recursive: true });
+        
+        // Save each image to a temp file
+        for (const [index, image] of images.entries()) {
+          // Extract base64 data and mime type
+          const matches = image.data.match(/^data:([^;]+);base64,(.+)$/);
+          if (!matches) {
+            console.error('Invalid image data format');
+            continue;
+          }
+          
+          const [, mimeType, base64Data] = matches;
+          const extension = mimeType.split('/')[1] || 'png';
+          const filename = `image_${index}.${extension}`;
+          const filepath = path.join(tempDir, filename);
+          
+          // Write base64 data to file
+          await fs.writeFile(filepath, Buffer.from(base64Data, 'base64'));
+          tempImagePaths.push(filepath);
+        }
+        
+        // Include the full image paths in the prompt for Claude to reference
+        // Only modify the command if we actually have images and a command
+        if (tempImagePaths.length > 0 && command && command.trim()) {
+          const imageNote = `\n\n[Images provided at the following paths:]\n${tempImagePaths.map((p, i) => `${i + 1}. ${p}`).join('\n')}`;
+          const modifiedCommand = command + imageNote;
+          
+          // Update the command in args - now that --print and command are separate
+          const printIndex = args.indexOf('--print');
+          if (printIndex !== -1 && printIndex + 1 < args.length && args[printIndex + 1] === command) {
+            args[printIndex + 1] = modifiedCommand;
+          }
+        }
+        
+        
+      } catch (error) {
+        console.error('Error processing images for Claude:', error);
+      }
     }
     
     // Add resume flag if resuming
@@ -31,20 +92,121 @@ async function spawnClaude(command, options = {}, ws) {
     // Add basic flags
     args.push('--output-format', 'stream-json', '--verbose');
     
+    // Add MCP config flag only if MCP servers are configured
+    try {
+      console.log('🔍 Starting MCP config check...');
+      // Use already imported modules (fs.promises is imported as fs, path, os)
+      const fsSync = await import('fs'); // Import synchronous fs methods
+      console.log('✅ Successfully imported fs sync methods');
+      
+      // Check for MCP config in ~/.claude.json
+      const claudeConfigPath = path.join(os.homedir(), '.claude.json');
+      
+      console.log(`🔍 Checking for MCP configs in: ${claudeConfigPath}`);
+      console.log(`  Claude config exists: ${fsSync.existsSync(claudeConfigPath)}`);
+      
+      let hasMcpServers = false;
+      
+      // Check Claude config for MCP servers
+      if (fsSync.existsSync(claudeConfigPath)) {
+        try {
+          const claudeConfig = JSON.parse(fsSync.readFileSync(claudeConfigPath, 'utf8'));
+          
+          // Check global MCP servers
+          if (claudeConfig.mcpServers && Object.keys(claudeConfig.mcpServers).length > 0) {
+            console.log(`✅ Found ${Object.keys(claudeConfig.mcpServers).length} global MCP servers`);
+            hasMcpServers = true;
+          }
+          
+          // Check project-specific MCP servers
+          if (!hasMcpServers && claudeConfig.claudeProjects) {
+            const currentProjectPath = process.cwd();
+            const projectConfig = claudeConfig.claudeProjects[currentProjectPath];
+            if (projectConfig && projectConfig.mcpServers && Object.keys(projectConfig.mcpServers).length > 0) {
+              console.log(`✅ Found ${Object.keys(projectConfig.mcpServers).length} project MCP servers`);
+              hasMcpServers = true;
+            }
+          }
+        } catch (e) {
+          console.log(`❌ Failed to parse Claude config:`, e.message);
+        }
+      }
+      
+      console.log(`🔍 hasMcpServers result: ${hasMcpServers}`);
+      
+      if (hasMcpServers) {
+        // Use Claude config file if it has MCP servers
+        let configPath = null;
+        
+        if (fsSync.existsSync(claudeConfigPath)) {
+          try {
+            const claudeConfig = JSON.parse(fsSync.readFileSync(claudeConfigPath, 'utf8'));
+            
+            // Check if we have any MCP servers (global or project-specific)
+            const hasGlobalServers = claudeConfig.mcpServers && Object.keys(claudeConfig.mcpServers).length > 0;
+            const currentProjectPath = process.cwd();
+            const projectConfig = claudeConfig.claudeProjects && claudeConfig.claudeProjects[currentProjectPath];
+            const hasProjectServers = projectConfig && projectConfig.mcpServers && Object.keys(projectConfig.mcpServers).length > 0;
+            
+            if (hasGlobalServers || hasProjectServers) {
+              configPath = claudeConfigPath;
+            }
+          } catch (e) {
+            // No valid config found
+          }
+        }
+        
+        if (configPath) {
+          console.log(`📡 Adding MCP config: ${configPath}`);
+          args.push('--mcp-config', configPath);
+        } else {
+          console.log('⚠️ MCP servers detected but no valid config file found');
+        }
+      }
+    } catch (error) {
+      // If there's any error checking for MCP configs, don't add the flag
+      console.log('❌ MCP config check failed:', error.message);
+      console.log('📍 Error stack:', error.stack);
+      console.log('Note: MCP config check failed, proceeding without MCP support');
+    }
+    
     // Add model for new sessions
     if (!resume) {
       args.push('--model', 'sonnet');
     }
     
+    // Add permission mode if specified (works for both new and resumed sessions)
+    if (permissionMode && permissionMode !== 'default') {
+      args.push('--permission-mode', permissionMode);
+      console.log('🔒 Using permission mode:', permissionMode);
+    }
+    
     // Add tools settings flags
-    if (settings.skipPermissions) {
+    // Don't use --dangerously-skip-permissions when in plan mode
+    if (settings.skipPermissions && permissionMode !== 'plan') {
       args.push('--dangerously-skip-permissions');
       console.log('⚠️  Using --dangerously-skip-permissions (skipping other tool settings)');
     } else {
       // Only add allowed/disallowed tools if not skipping permissions
+      
+      // Collect all allowed tools, including plan mode defaults
+      let allowedTools = [...(settings.allowedTools || [])];
+      
+      // Add plan mode specific tools
+      if (permissionMode === 'plan') {
+        const planModeTools = ['Read', 'Task', 'exit_plan_mode', 'TodoRead', 'TodoWrite'];
+        // Add plan mode tools that aren't already in the allowed list
+        for (const tool of planModeTools) {
+          if (!allowedTools.includes(tool)) {
+            allowedTools.push(tool);
+          }
+        }
+        console.log('📝 Plan mode: Added default allowed tools:', planModeTools);
+      }
+      
       // Add allowed tools
-      if (settings.allowedTools && settings.allowedTools.length > 0) {
-        for (const tool of settings.allowedTools) {
+      if (allowedTools.length > 0) {
+        for (const tool of allowedTools) {
           args.push('--allowedTools', tool);
           console.log('✅ Allowing tool:', tool);
         }
@@ -57,24 +219,32 @@ async function spawnClaude(command, options = {}, ws) {
           console.log('❌ Disallowing tool:', tool);
         }
       }
+      
+      // Log when skip permissions is disabled due to plan mode
+      if (settings.skipPermissions && permissionMode === 'plan') {
+        console.log('📝 Skip permissions disabled due to plan mode');
+      }
     }
     
-    // Use cwd (actual project directory) instead of projectPath (Claude's metadata directory)
-    const workingDir = cwd || process.cwd();
     console.log('Spawning Claude CLI:', 'claude', args.map(arg => {
       const cleanArg = arg.replace(/\n/g, '\\n').replace(/\r/g, '\\r');
       return cleanArg.includes(' ') ? `"${cleanArg}"` : cleanArg;
     }).join(' '));
     console.log('Working directory:', workingDir);
     console.log('Session info - Input sessionId:', sessionId, 'Resume:', resume);
-    console.log('🔍 Full command args:', args);
+    console.log('🔍 Full command args:', JSON.stringify(args, null, 2));
+    console.log('🔍 Final Claude command will be: claude ' + args.join(' '));
     
-    const claudeProcess = spawn('claude', args, {
+    const claudeProcess = spawnFunction('claude', args, {
       cwd: workingDir,
       stdio: ['pipe', 'pipe', 'pipe'],
       env: { ...process.env } // Inherit all environment variables
     });
     
+    // Attach temp file info to process for cleanup later
+    claudeProcess.tempImagePaths = tempImagePaths;
+    claudeProcess.tempDir = tempDir;
+    
     // Store process reference for potential abort
     const processKey = capturedSessionId || sessionId || Date.now().toString();
     activeClaudeProcesses.set(processKey, claudeProcess);
@@ -138,7 +308,7 @@ async function spawnClaude(command, options = {}, ws) {
     });
     
     // Handle process completion
-    claudeProcess.on('close', (code) => {
+    claudeProcess.on('close', async (code) => {
       console.log(`Claude CLI process exited with code ${code}`);
       
       // Clean up process reference
@@ -151,6 +321,20 @@ async function spawnClaude(command, options = {}, ws) {
         isNewSession: !sessionId && !!command // Flag to indicate this was a new session
       }));
       
+      // Clean up temporary image files if any
+      if (claudeProcess.tempImagePaths && claudeProcess.tempImagePaths.length > 0) {
+        for (const imagePath of claudeProcess.tempImagePaths) {
+          await fs.unlink(imagePath).catch(err => 
+            console.error(`Failed to delete temp image ${imagePath}:`, err)
+          );
+        }
+        if (claudeProcess.tempDir) {
+          await fs.rm(claudeProcess.tempDir, { recursive: true, force: true }).catch(err => 
+            console.error(`Failed to delete temp directory ${claudeProcess.tempDir}:`, err)
+          );
+        }
+      }
+      
       if (code === 0) {
         resolve();
       } else {
@@ -201,7 +385,7 @@ function abortClaudeSession(sessionId) {
   return false;
 }
 
-module.exports = {
+export {
   spawnClaude,
   abortClaudeSession
-};
+};

server/database/db.js

@@ -0,0 +1,86 @@
+import Database from 'better-sqlite3';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const DB_PATH = path.join(__dirname, 'auth.db');
+const INIT_SQL_PATH = path.join(__dirname, 'init.sql');
+
+// Create database connection
+const db = new Database(DB_PATH);
+console.log('Connected to SQLite database');
+
+// Initialize database with schema
+const initializeDatabase = async () => {
+  try {
+    const initSQL = fs.readFileSync(INIT_SQL_PATH, 'utf8');
+    db.exec(initSQL);
+    console.log('Database initialized successfully');
+  } catch (error) {
+    console.error('Error initializing database:', error.message);
+    throw error;
+  }
+};
+
+// User database operations
+const userDb = {
+  // Check if any users exist
+  hasUsers: () => {
+    try {
+      const row = db.prepare('SELECT COUNT(*) as count FROM users').get();
+      return row.count > 0;
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  // Create a new user
+  createUser: (username, passwordHash) => {
+    try {
+      const stmt = db.prepare('INSERT INTO users (username, password_hash) VALUES (?, ?)');
+      const result = stmt.run(username, passwordHash);
+      return { id: result.lastInsertRowid, username };
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  // Get user by username
+  getUserByUsername: (username) => {
+    try {
+      const row = db.prepare('SELECT * FROM users WHERE username = ? AND is_active = 1').get(username);
+      return row;
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  // Update last login time
+  updateLastLogin: (userId) => {
+    try {
+      db.prepare('UPDATE users SET last_login = CURRENT_TIMESTAMP WHERE id = ?').run(userId);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  // Get user by ID
+  getUserById: (userId) => {
+    try {
+      const row = db.prepare('SELECT id, username, created_at, last_login FROM users WHERE id = ? AND is_active = 1').get(userId);
+      return row;
+    } catch (err) {
+      throw err;
+    }
+  }
+};
+
+export {
+  db,
+  initializeDatabase,
+  userDb
+};

server/database/init.sql

@@ -0,0 +1,16 @@
+-- Initialize authentication database
+PRAGMA foreign_keys = ON;
+
+-- Users table (single user system)
+CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    username TEXT UNIQUE NOT NULL,
+    password_hash TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    last_login DATETIME,
+    is_active BOOLEAN DEFAULT 1
+);
+
+-- Indexes for performance
+CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
+CREATE INDEX IF NOT EXISTS idx_users_active ON users(is_active);

server/middleware/auth.js

@@ -0,0 +1,80 @@
+import jwt from 'jsonwebtoken';
+import { userDb } from '../database/db.js';
+
+// Get JWT secret from environment or use default (for development)
+const JWT_SECRET = process.env.JWT_SECRET || 'claude-ui-dev-secret-change-in-production';
+
+// Optional API key middleware
+const validateApiKey = (req, res, next) => {
+  // Skip API key validation if not configured
+  if (!process.env.API_KEY) {
+    return next();
+  }
+  
+  const apiKey = req.headers['x-api-key'];
+  if (apiKey !== process.env.API_KEY) {
+    return res.status(401).json({ error: 'Invalid API key' });
+  }
+  next();
+};
+
+// JWT authentication middleware
+const authenticateToken = async (req, res, next) => {
+  const authHeader = req.headers['authorization'];
+  const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN
+
+  if (!token) {
+    return res.status(401).json({ error: 'Access denied. No token provided.' });
+  }
+
+  try {
+    const decoded = jwt.verify(token, JWT_SECRET);
+    
+    // Verify user still exists and is active
+    const user = userDb.getUserById(decoded.userId);
+    if (!user) {
+      return res.status(401).json({ error: 'Invalid token. User not found.' });
+    }
+    
+    req.user = user;
+    next();
+  } catch (error) {
+    console.error('Token verification error:', error);
+    return res.status(403).json({ error: 'Invalid token' });
+  }
+};
+
+// Generate JWT token (never expires)
+const generateToken = (user) => {
+  return jwt.sign(
+    { 
+      userId: user.id, 
+      username: user.username 
+    },
+    JWT_SECRET
+    // No expiration - token lasts forever
+  );
+};
+
+// WebSocket authentication function
+const authenticateWebSocket = (token) => {
+  if (!token) {
+    return null;
+  }
+  
+  try {
+    const decoded = jwt.verify(token, JWT_SECRET);
+    return decoded;
+  } catch (error) {
+    console.error('WebSocket token verification error:', error);
+    return null;
+  }
+};
+
+export {
+  validateApiKey,
+  authenticateToken,
+  generateToken,
+  authenticateWebSocket,
+  JWT_SECRET
+};

server/projects.js

@@ -1,6 +1,17 @@
-const fs = require('fs').promises;
-const path = require('path');
-const readline = require('readline');
+import { promises as fs } from 'fs';
+import fsSync from 'fs';
+import path from 'path';
+import readline from '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();
+}
 
 // Load project configuration file
 async function loadProjectConfig() {
@@ -42,24 +53,26 @@ async function generateDisplayName(projectName, actualProjectDir = null) {
   // If it starts with /, it's an absolute path
   if (projectPath.startsWith('/')) {
     const parts = projectPath.split('/').filter(Boolean);
-    if (parts.length > 3) {
-      // Show last 2 folders with ellipsis: "...projects/myapp"
-      return `.../${parts.slice(-2).join('/')}`;
-    } else {
-      // Show full path if short: "/home/user"
-      return projectPath;
-    }
+    // Return only the last folder name
+    return parts[parts.length - 1] || projectPath;
   }
   
   return projectPath;
 }
 
-// Extract the actual project directory from JSONL sessions
+// 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);
+  }
+  
+  
   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);
@@ -67,75 +80,86 @@ async function extractProjectDirectory(projectName) {
     
     if (jsonlFiles.length === 0) {
       // Fall back to decoded project name if no sessions
-      return projectName.replace(/-/g, '/');
-    }
-    
-    // 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);
+      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 = fsSync.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);
               
-              // Track the most recent cwd
-              const timestamp = new Date(entry.timestamp || 0).getTime();
-              if (timestamp > latestTimestamp) {
-                latestTimestamp = timestamp;
-                latestCwd = entry.cwd;
+              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
             }
-          } 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, '/');
+        }
+      }
     }
     
-    // Determine the best cwd to use
-    if (cwdCounts.size === 0) {
-      // No cwd found, fall back to decoded project name
-      return projectName.replace(/-/g, '/');
-    }
+    // Cache the result
+    projectDirectoryCache.set(projectName, extractedPath);
     
-    if (cwdCounts.size === 1) {
-      // Only one cwd, use it
-      return Array.from(cwdCounts.keys())[0];
-    }
-    
-    // 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) {
-      return latestCwd;
-    }
-    
-    // Otherwise use the most frequently used cwd
-    for (const [cwd, count] of cwdCounts.entries()) {
-      if (count === maxCount) {
-        return cwd;
-      }
-    }
-    
-    // Fallback (shouldn't reach here)
-    return latestCwd || projectName.replace(/-/g, '/');
+    return extractedPath;
     
   } catch (error) {
     console.error(`Error extracting project directory for ${projectName}:`, error);
     // Fall back to decoded project name
-    return projectName.replace(/-/g, '/');
+    extractedPath = projectName.replace(/-/g, '/');
+    
+    // Cache the fallback result too
+    projectDirectoryCache.set(projectName, extractedPath);
+    
+    return extractedPath;
   }
 }
 
@@ -294,7 +318,7 @@ async function parseJsonlSessions(filePath) {
   const sessions = new Map();
   
   try {
-    const fileStream = require('fs').createReadStream(filePath);
+    const fileStream = fsSync.createReadStream(filePath);
     const rl = readline.createInterface({
       input: fileStream,
       crlfDelay: Infinity
@@ -378,7 +402,7 @@ async function getSessionMessages(projectName, sessionId) {
     // Process all JSONL files to find messages for this session
     for (const file of jsonlFiles) {
       const jsonlFile = path.join(projectDir, file);
-      const fileStream = require('fs').createReadStream(jsonlFile);
+      const fileStream = fsSync.createReadStream(jsonlFile);
       const rl = readline.createInterface({
         input: fileStream,
         crlfDelay: Infinity
@@ -570,7 +594,7 @@ async function addProjectManually(projectPath, displayName = null) {
 }
 
 
-module.exports = {
+export {
   getProjects,
   getSessions,
   getSessionMessages,
@@ -582,5 +606,6 @@ module.exports = {
   addProjectManually,
   loadProjectConfig,
   saveProjectConfig,
-  extractProjectDirectory
+  extractProjectDirectory,
+  clearProjectDirectoryCache
 };

server/routes/auth.js

@@ -0,0 +1,135 @@
+import express from 'express';
+import bcrypt from 'bcrypt';
+import { userDb, db } from '../database/db.js';
+import { generateToken, authenticateToken } from '../middleware/auth.js';
+
+const router = express.Router();
+
+// Check auth status and setup requirements
+router.get('/status', async (req, res) => {
+  try {
+    const hasUsers = await userDb.hasUsers();
+    res.json({ 
+      needsSetup: !hasUsers,
+      isAuthenticated: false // Will be overridden by frontend if token exists
+    });
+  } catch (error) {
+    console.error('Auth status error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// User registration (setup) - only allowed if no users exist
+router.post('/register', async (req, res) => {
+  try {
+    const { username, password } = req.body;
+    
+    // Validate input
+    if (!username || !password) {
+      return res.status(400).json({ error: 'Username and password are required' });
+    }
+    
+    if (username.length < 3 || password.length < 6) {
+      return res.status(400).json({ error: 'Username must be at least 3 characters, password at least 6 characters' });
+    }
+    
+    // Use a transaction to prevent race conditions
+    db.prepare('BEGIN').run();
+    try {
+      // Check if users already exist (only allow one user)
+      const hasUsers = userDb.hasUsers();
+      if (hasUsers) {
+        db.prepare('ROLLBACK').run();
+        return res.status(403).json({ error: 'User already exists. This is a single-user system.' });
+      }
+      
+      // Hash password
+      const saltRounds = 12;
+      const passwordHash = await bcrypt.hash(password, saltRounds);
+      
+      // Create user
+      const user = userDb.createUser(username, passwordHash);
+      
+      // Generate token
+      const token = generateToken(user);
+      
+      // Update last login
+      userDb.updateLastLogin(user.id);
+
+      db.prepare('COMMIT').run();
+      
+      res.json({
+        success: true,
+        user: { id: user.id, username: user.username },
+        token
+      });
+    } catch (error) {
+      db.prepare('ROLLBACK').run();
+      throw error;
+    }
+    
+  } catch (error) {
+    console.error('Registration error:', error);
+    if (error.code === 'SQLITE_CONSTRAINT_UNIQUE') {
+      res.status(409).json({ error: 'Username already exists' });
+    } else {
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  }
+});
+
+// User login
+router.post('/login', async (req, res) => {
+  try {
+    const { username, password } = req.body;
+    
+    // Validate input
+    if (!username || !password) {
+      return res.status(400).json({ error: 'Username and password are required' });
+    }
+    
+    // Get user from database
+    const user = userDb.getUserByUsername(username);
+    if (!user) {
+      return res.status(401).json({ error: 'Invalid username or password' });
+    }
+    
+    // Verify password
+    const isValidPassword = await bcrypt.compare(password, user.password_hash);
+    if (!isValidPassword) {
+      return res.status(401).json({ error: 'Invalid username or password' });
+    }
+    
+    // Generate token
+    const token = generateToken(user);
+    
+    // Update last login
+    userDb.updateLastLogin(user.id);
+    
+    res.json({
+      success: true,
+      user: { id: user.id, username: user.username },
+      token
+    });
+    
+  } catch (error) {
+    console.error('Login error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Get current user (protected route)
+router.get('/user', authenticateToken, (req, res) => {
+  res.json({
+    user: req.user
+  });
+});
+
+// Logout (client-side token removal, but this endpoint can be used for logging)
+router.post('/logout', authenticateToken, (req, res) => {
+  // In a simple JWT system, logout is mainly client-side
+  // This endpoint exists for consistency and potential future logging
+  res.json({ success: true, message: 'Logged out successfully' });
+});
+
+export default router;

server/routes/git.js

@@ -1,17 +1,49 @@
-const express = require('express');
-const { exec } = require('child_process');
-const { promisify } = require('util');
-const path = require('path');
-const fs = require('fs').promises;
+import express from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import { promises as fs } from 'fs';
+import { extractProjectDirectory } from '../projects.js';
 
 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 = '';
@@ -385,4 +420,403 @@ function generateSimpleCommitMessage(files, diff) {
   }
 }
 
-module.exports = router;
+// Get remote status (ahead/behind commits with smart remote detection)
+router.get('/remote-status', async (req, res) => {
+  const { project } = req.query;
+  
+  if (!project) {
+    return res.status(400).json({ error: 'Project name is required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Get current branch
+    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
+    const branch = currentBranch.trim();
+
+    // Check if there's a remote tracking branch (smart detection)
+    let trackingBranch;
+    let remoteName;
+    try {
+      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      trackingBranch = stdout.trim();
+      remoteName = trackingBranch.split('/')[0]; // Extract remote name (e.g., "origin/main" -> "origin")
+    } catch (error) {
+      // No upstream branch configured - but check if we have remotes
+      let hasRemote = false;
+      let remoteName = null;
+      try {
+        const { stdout } = await execAsync('git remote', { cwd: projectPath });
+        const remotes = stdout.trim().split('\n').filter(r => r.trim());
+        if (remotes.length > 0) {
+          hasRemote = true;
+          remoteName = remotes.includes('origin') ? 'origin' : remotes[0];
+        }
+      } catch (remoteError) {
+        // No remotes configured
+      }
+      
+      return res.json({ 
+        hasRemote,
+        hasUpstream: false,
+        branch,
+        remoteName,
+        message: 'No remote tracking branch configured'
+      });
+    }
+
+    // Get ahead/behind counts
+    const { stdout: countOutput } = await execAsync(
+      `git rev-list --count --left-right ${trackingBranch}...HEAD`,
+      { cwd: projectPath }
+    );
+    
+    const [behind, ahead] = countOutput.trim().split('\t').map(Number);
+
+    res.json({
+      hasRemote: true,
+      hasUpstream: true,
+      branch,
+      remoteBranch: trackingBranch,
+      remoteName,
+      ahead: ahead || 0,
+      behind: behind || 0,
+      isUpToDate: ahead === 0 && behind === 0
+    });
+  } catch (error) {
+    console.error('Git remote status error:', error);
+    res.json({ error: error.message });
+  }
+});
+
+// Fetch from remote (using smart remote detection)
+router.post('/fetch', async (req, res) => {
+  const { project } = req.body;
+  
+  if (!project) {
+    return res.status(400).json({ error: 'Project name is required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Get current branch and its upstream remote
+    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
+    const branch = currentBranch.trim();
+
+    let remoteName = 'origin'; // fallback
+    try {
+      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      remoteName = stdout.trim().split('/')[0]; // Extract remote name
+    } catch (error) {
+      // No upstream, try to fetch from origin anyway
+      console.log('No upstream configured, using origin as fallback');
+    }
+
+    const { stdout } = await execAsync(`git fetch ${remoteName}`, { cwd: projectPath });
+    
+    res.json({ success: true, output: stdout || 'Fetch completed successfully', remoteName });
+  } catch (error) {
+    console.error('Git fetch error:', error);
+    res.status(500).json({ 
+      error: 'Fetch failed', 
+      details: error.message.includes('Could not resolve hostname') 
+        ? 'Unable to connect to remote repository. Check your internet connection.'
+        : error.message.includes('fatal: \'origin\' does not appear to be a git repository')
+        ? 'No remote repository configured. Add a remote with: git remote add origin <url>'
+        : error.message
+    });
+  }
+});
+
+// Pull from remote (fetch + merge using smart remote detection)
+router.post('/pull', async (req, res) => {
+  const { project } = req.body;
+  
+  if (!project) {
+    return res.status(400).json({ error: 'Project name is required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Get current branch and its upstream remote
+    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
+    const branch = currentBranch.trim();
+
+    let remoteName = 'origin'; // fallback
+    let remoteBranch = branch; // fallback
+    try {
+      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const tracking = stdout.trim();
+      remoteName = tracking.split('/')[0]; // Extract remote name
+      remoteBranch = tracking.split('/').slice(1).join('/'); // Extract branch name
+    } catch (error) {
+      // No upstream, use fallback
+      console.log('No upstream configured, using origin/branch as fallback');
+    }
+
+    const { stdout } = await execAsync(`git pull ${remoteName} ${remoteBranch}`, { cwd: projectPath });
+    
+    res.json({ 
+      success: true, 
+      output: stdout || 'Pull completed successfully', 
+      remoteName,
+      remoteBranch
+    });
+  } catch (error) {
+    console.error('Git pull error:', error);
+    
+    // Enhanced error handling for common pull scenarios
+    let errorMessage = 'Pull failed';
+    let details = error.message;
+    
+    if (error.message.includes('CONFLICT')) {
+      errorMessage = 'Merge conflicts detected';
+      details = 'Pull created merge conflicts. Please resolve conflicts manually in the editor, then commit the changes.';
+    } else if (error.message.includes('Please commit your changes or stash them')) {
+      errorMessage = 'Uncommitted changes detected';  
+      details = 'Please commit or stash your local changes before pulling.';
+    } else if (error.message.includes('Could not resolve hostname')) {
+      errorMessage = 'Network error';
+      details = 'Unable to connect to remote repository. Check your internet connection.';
+    } else if (error.message.includes('fatal: \'origin\' does not appear to be a git repository')) {
+      errorMessage = 'Remote not configured';
+      details = 'No remote repository configured. Add a remote with: git remote add origin <url>';
+    } else if (error.message.includes('diverged')) {
+      errorMessage = 'Branches have diverged';
+      details = 'Your local branch and remote branch have diverged. Consider fetching first to review changes.';
+    }
+    
+    res.status(500).json({ 
+      error: errorMessage, 
+      details: details
+    });
+  }
+});
+
+// Push commits to remote repository
+router.post('/push', async (req, res) => {
+  const { project } = req.body;
+  
+  if (!project) {
+    return res.status(400).json({ error: 'Project name is required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Get current branch and its upstream remote
+    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
+    const branch = currentBranch.trim();
+
+    let remoteName = 'origin'; // fallback
+    let remoteBranch = branch; // fallback
+    try {
+      const { stdout } = await execAsync(`git rev-parse --abbrev-ref ${branch}@{upstream}`, { cwd: projectPath });
+      const tracking = stdout.trim();
+      remoteName = tracking.split('/')[0]; // Extract remote name
+      remoteBranch = tracking.split('/').slice(1).join('/'); // Extract branch name
+    } catch (error) {
+      // No upstream, use fallback
+      console.log('No upstream configured, using origin/branch as fallback');
+    }
+
+    const { stdout } = await execAsync(`git push ${remoteName} ${remoteBranch}`, { cwd: projectPath });
+    
+    res.json({ 
+      success: true, 
+      output: stdout || 'Push completed successfully', 
+      remoteName,
+      remoteBranch
+    });
+  } catch (error) {
+    console.error('Git push error:', error);
+    
+    // Enhanced error handling for common push scenarios
+    let errorMessage = 'Push failed';
+    let details = error.message;
+    
+    if (error.message.includes('rejected')) {
+      errorMessage = 'Push rejected';
+      details = 'The remote has newer commits. Pull first to merge changes before pushing.';
+    } else if (error.message.includes('non-fast-forward')) {
+      errorMessage = 'Non-fast-forward push';
+      details = 'Your branch is behind the remote. Pull the latest changes first.';
+    } else if (error.message.includes('Could not resolve hostname')) {
+      errorMessage = 'Network error';
+      details = 'Unable to connect to remote repository. Check your internet connection.';
+    } else if (error.message.includes('fatal: \'origin\' does not appear to be a git repository')) {
+      errorMessage = 'Remote not configured';
+      details = 'No remote repository configured. Add a remote with: git remote add origin <url>';
+    } else if (error.message.includes('Permission denied')) {
+      errorMessage = 'Authentication failed';
+      details = 'Permission denied. Check your credentials or SSH keys.';
+    } else if (error.message.includes('no upstream branch')) {
+      errorMessage = 'No upstream branch';
+      details = 'No upstream branch configured. Use: git push --set-upstream origin <branch>';
+    }
+    
+    res.status(500).json({ 
+      error: errorMessage, 
+      details: details
+    });
+  }
+});
+
+// Publish branch to remote (set upstream and push)
+router.post('/publish', async (req, res) => {
+  const { project, branch } = req.body;
+  
+  if (!project || !branch) {
+    return res.status(400).json({ error: 'Project name and branch are required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Get current branch to verify it matches the requested branch
+    const { stdout: currentBranch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
+    const currentBranchName = currentBranch.trim();
+    
+    if (currentBranchName !== branch) {
+      return res.status(400).json({ 
+        error: `Branch mismatch. Current branch is ${currentBranchName}, but trying to publish ${branch}` 
+      });
+    }
+
+    // Check if remote exists
+    let remoteName = 'origin';
+    try {
+      const { stdout } = await execAsync('git remote', { cwd: projectPath });
+      const remotes = stdout.trim().split('\n').filter(r => r.trim());
+      if (remotes.length === 0) {
+        return res.status(400).json({ 
+          error: 'No remote repository configured. Add a remote with: git remote add origin <url>' 
+        });
+      }
+      remoteName = remotes.includes('origin') ? 'origin' : remotes[0];
+    } catch (error) {
+      return res.status(400).json({ 
+        error: 'No remote repository configured. Add a remote with: git remote add origin <url>' 
+      });
+    }
+
+    // Publish the branch (set upstream and push)
+    const { stdout } = await execAsync(`git push --set-upstream ${remoteName} ${branch}`, { cwd: projectPath });
+    
+    res.json({ 
+      success: true, 
+      output: stdout || 'Branch published successfully', 
+      remoteName,
+      branch
+    });
+  } catch (error) {
+    console.error('Git publish error:', error);
+    
+    // Enhanced error handling for common publish scenarios
+    let errorMessage = 'Publish failed';
+    let details = error.message;
+    
+    if (error.message.includes('rejected')) {
+      errorMessage = 'Publish rejected';
+      details = 'The remote branch already exists and has different commits. Use push instead.';
+    } else if (error.message.includes('Could not resolve hostname')) {
+      errorMessage = 'Network error';
+      details = 'Unable to connect to remote repository. Check your internet connection.';
+    } else if (error.message.includes('Permission denied')) {
+      errorMessage = 'Authentication failed';
+      details = 'Permission denied. Check your credentials or SSH keys.';
+    } else if (error.message.includes('fatal:') && error.message.includes('does not appear to be a git repository')) {
+      errorMessage = 'Remote not configured';
+      details = 'Remote repository not properly configured. Check your remote URL.';
+    }
+    
+    res.status(500).json({ 
+      error: errorMessage, 
+      details: details
+    });
+  }
+});
+
+// Discard changes for a specific file
+router.post('/discard', async (req, res) => {
+  const { project, file } = req.body;
+  
+  if (!project || !file) {
+    return res.status(400).json({ error: 'Project name and file path are required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Check file status to determine correct discard command
+    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
+    
+    if (!statusOutput.trim()) {
+      return res.status(400).json({ error: 'No changes to discard for this file' });
+    }
+
+    const status = statusOutput.substring(0, 2);
+    
+    if (status === '??') {
+      // Untracked file - delete it
+      await fs.unlink(path.join(projectPath, file));
+    } else if (status.includes('M') || status.includes('D')) {
+      // Modified or deleted file - restore from HEAD
+      await execAsync(`git restore "${file}"`, { cwd: projectPath });
+    } else if (status.includes('A')) {
+      // Added file - unstage it
+      await execAsync(`git reset HEAD "${file}"`, { cwd: projectPath });
+    }
+    
+    res.json({ success: true, message: `Changes discarded for ${file}` });
+  } catch (error) {
+    console.error('Git discard error:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Delete untracked file
+router.post('/delete-untracked', async (req, res) => {
+  const { project, file } = req.body;
+  
+  if (!project || !file) {
+    return res.status(400).json({ error: 'Project name and file path are required' });
+  }
+
+  try {
+    const projectPath = await getActualProjectPath(project);
+    await validateGitRepository(projectPath);
+
+    // Check if file is actually untracked
+    const { stdout: statusOutput } = await execAsync(`git status --porcelain "${file}"`, { cwd: projectPath });
+    
+    if (!statusOutput.trim()) {
+      return res.status(400).json({ error: 'File is not untracked or does not exist' });
+    }
+
+    const status = statusOutput.substring(0, 2);
+    
+    if (status !== '??') {
+      return res.status(400).json({ error: 'File is not untracked. Use discard for tracked files.' });
+    }
+
+    // Delete the untracked file
+    await fs.unlink(path.join(projectPath, file));
+    
+    res.json({ success: true, message: `Untracked file ${file} deleted successfully` });
+  } catch (error) {
+    console.error('Git delete untracked error:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
+export default router;

server/routes/mcp.js

@@ -0,0 +1,552 @@
+import express from 'express';
+import { promises as fs } from 'fs';
+import path from 'path';
+import os from 'os';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { spawn } from 'child_process';
+
+const router = express.Router();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Claude CLI command routes
+
+// GET /api/mcp/cli/list - List MCP servers using Claude CLI
+router.get('/cli/list', async (req, res) => {
+  try {
+    console.log('📋 Listing MCP servers using Claude CLI');
+    
+    const { spawn } = await import('child_process');
+    const { promisify } = await import('util');
+    const exec = promisify(spawn);
+    
+    const process = spawn('claude', ['mcp', 'list'], {
+      stdio: ['pipe', 'pipe', 'pipe']
+    });
+    
+    let stdout = '';
+    let stderr = '';
+    
+    process.stdout.on('data', (data) => {
+      stdout += data.toString();
+    });
+    
+    process.stderr.on('data', (data) => {
+      stderr += data.toString();
+    });
+    
+    process.on('close', (code) => {
+      if (code === 0) {
+        res.json({ success: true, output: stdout, servers: parseClaudeListOutput(stdout) });
+      } else {
+        console.error('Claude CLI error:', stderr);
+        res.status(500).json({ error: 'Claude CLI command failed', details: stderr });
+      }
+    });
+    
+    process.on('error', (error) => {
+      console.error('Error running Claude CLI:', error);
+      res.status(500).json({ error: 'Failed to run Claude CLI', details: error.message });
+    });
+  } catch (error) {
+    console.error('Error listing MCP servers via CLI:', error);
+    res.status(500).json({ error: 'Failed to list MCP servers', details: error.message });
+  }
+});
+
+// POST /api/mcp/cli/add - Add MCP server using Claude CLI
+router.post('/cli/add', async (req, res) => {
+  try {
+    const { name, type = 'stdio', command, args = [], url, headers = {}, env = {}, scope = 'user', projectPath } = req.body;
+    
+    console.log(`➕ Adding MCP server using Claude CLI (${scope} scope):`, name);
+    
+    const { spawn } = await import('child_process');
+    
+    let cliArgs = ['mcp', 'add'];
+    
+    // Add scope flag
+    cliArgs.push('--scope', scope);
+    
+    if (type === 'http') {
+      cliArgs.push('--transport', 'http', name, url);
+      // Add headers if provided
+      Object.entries(headers).forEach(([key, value]) => {
+        cliArgs.push('--header', `${key}: ${value}`);
+      });
+    } else if (type === 'sse') {
+      cliArgs.push('--transport', 'sse', name, url);
+      // Add headers if provided
+      Object.entries(headers).forEach(([key, value]) => {
+        cliArgs.push('--header', `${key}: ${value}`);
+      });
+    } else {
+      // stdio (default): claude mcp add --scope user <name> <command> [args...]
+      cliArgs.push(name);
+      // Add environment variables
+      Object.entries(env).forEach(([key, value]) => {
+        cliArgs.push('-e', `${key}=${value}`);
+      });
+      cliArgs.push(command);
+      if (args && args.length > 0) {
+        cliArgs.push(...args);
+      }
+    }
+    
+    console.log('🔧 Running Claude CLI command:', 'claude', cliArgs.join(' '));
+    
+    // For local scope, we need to run the command in the project directory
+    const spawnOptions = {
+      stdio: ['pipe', 'pipe', 'pipe']
+    };
+    
+    if (scope === 'local' && projectPath) {
+      spawnOptions.cwd = projectPath;
+      console.log('📁 Running in project directory:', projectPath);
+    }
+    
+    const process = spawn('claude', cliArgs, spawnOptions);
+    
+    let stdout = '';
+    let stderr = '';
+    
+    process.stdout.on('data', (data) => {
+      stdout += data.toString();
+    });
+    
+    process.stderr.on('data', (data) => {
+      stderr += data.toString();
+    });
+    
+    process.on('close', (code) => {
+      if (code === 0) {
+        res.json({ success: true, output: stdout, message: `MCP server "${name}" added successfully` });
+      } else {
+        console.error('Claude CLI error:', stderr);
+        res.status(400).json({ error: 'Claude CLI command failed', details: stderr });
+      }
+    });
+    
+    process.on('error', (error) => {
+      console.error('Error running Claude CLI:', error);
+      res.status(500).json({ error: 'Failed to run Claude CLI', details: error.message });
+    });
+  } catch (error) {
+    console.error('Error adding MCP server via CLI:', error);
+    res.status(500).json({ error: 'Failed to add MCP server', details: error.message });
+  }
+});
+
+// POST /api/mcp/cli/add-json - Add MCP server using JSON format
+router.post('/cli/add-json', async (req, res) => {
+  try {
+    const { name, jsonConfig, scope = 'user', projectPath } = req.body;
+    
+    console.log('➕ Adding MCP server using JSON format:', name);
+    
+    // Validate and parse JSON config
+    let parsedConfig;
+    try {
+      parsedConfig = typeof jsonConfig === 'string' ? JSON.parse(jsonConfig) : jsonConfig;
+    } catch (parseError) {
+      return res.status(400).json({ 
+        error: 'Invalid JSON configuration', 
+        details: parseError.message 
+      });
+    }
+    
+    // Validate required fields
+    if (!parsedConfig.type) {
+      return res.status(400).json({ 
+        error: 'Invalid configuration', 
+        details: 'Missing required field: type' 
+      });
+    }
+    
+    if (parsedConfig.type === 'stdio' && !parsedConfig.command) {
+      return res.status(400).json({ 
+        error: 'Invalid configuration', 
+        details: 'stdio type requires a command field' 
+      });
+    }
+    
+    if ((parsedConfig.type === 'http' || parsedConfig.type === 'sse') && !parsedConfig.url) {
+      return res.status(400).json({ 
+        error: 'Invalid configuration', 
+        details: `${parsedConfig.type} type requires a url field` 
+      });
+    }
+    
+    const { spawn } = await import('child_process');
+    
+    // Build the command: claude mcp add-json --scope <scope> <name> '<json>'
+    const cliArgs = ['mcp', 'add-json', '--scope', scope, name];
+    
+    // Add the JSON config as a properly formatted string
+    const jsonString = JSON.stringify(parsedConfig);
+    cliArgs.push(jsonString);
+    
+    console.log('🔧 Running Claude CLI command:', 'claude', cliArgs[0], cliArgs[1], cliArgs[2], cliArgs[3], cliArgs[4], jsonString);
+    
+    // For local scope, we need to run the command in the project directory
+    const spawnOptions = {
+      stdio: ['pipe', 'pipe', 'pipe']
+    };
+    
+    if (scope === 'local' && projectPath) {
+      spawnOptions.cwd = projectPath;
+      console.log('📁 Running in project directory:', projectPath);
+    }
+    
+    const process = spawn('claude', cliArgs, spawnOptions);
+    
+    let stdout = '';
+    let stderr = '';
+    
+    process.stdout.on('data', (data) => {
+      stdout += data.toString();
+    });
+    
+    process.stderr.on('data', (data) => {
+      stderr += data.toString();
+    });
+    
+    process.on('close', (code) => {
+      if (code === 0) {
+        res.json({ success: true, output: stdout, message: `MCP server "${name}" added successfully via JSON` });
+      } else {
+        console.error('Claude CLI error:', stderr);
+        res.status(400).json({ error: 'Claude CLI command failed', details: stderr });
+      }
+    });
+    
+    process.on('error', (error) => {
+      console.error('Error running Claude CLI:', error);
+      res.status(500).json({ error: 'Failed to run Claude CLI', details: error.message });
+    });
+  } catch (error) {
+    console.error('Error adding MCP server via JSON:', error);
+    res.status(500).json({ error: 'Failed to add MCP server', details: error.message });
+  }
+});
+
+// DELETE /api/mcp/cli/remove/:name - Remove MCP server using Claude CLI
+router.delete('/cli/remove/:name', async (req, res) => {
+  try {
+    const { name } = req.params;
+    const { scope } = req.query; // Get scope from query params
+    
+    // Handle the ID format (remove scope prefix if present)
+    let actualName = name;
+    let actualScope = scope;
+    
+    // If the name includes a scope prefix like "local:test", extract it
+    if (name.includes(':')) {
+      const [prefix, serverName] = name.split(':');
+      actualName = serverName;
+      actualScope = actualScope || prefix; // Use prefix as scope if not provided in query
+    }
+    
+    console.log('🗑️ Removing MCP server using Claude CLI:', actualName, 'scope:', actualScope);
+    
+    const { spawn } = await import('child_process');
+    
+    // Build command args based on scope
+    let cliArgs = ['mcp', 'remove'];
+    
+    // Add scope flag if it's local scope
+    if (actualScope === 'local') {
+      cliArgs.push('--scope', 'local');
+    } else if (actualScope === 'user' || !actualScope) {
+      // User scope is default, but we can be explicit
+      cliArgs.push('--scope', 'user');
+    }
+    
+    cliArgs.push(actualName);
+    
+    console.log('🔧 Running Claude CLI command:', 'claude', cliArgs.join(' '));
+    
+    const process = spawn('claude', cliArgs, {
+      stdio: ['pipe', 'pipe', 'pipe']
+    });
+    
+    let stdout = '';
+    let stderr = '';
+    
+    process.stdout.on('data', (data) => {
+      stdout += data.toString();
+    });
+    
+    process.stderr.on('data', (data) => {
+      stderr += data.toString();
+    });
+    
+    process.on('close', (code) => {
+      if (code === 0) {
+        res.json({ success: true, output: stdout, message: `MCP server "${name}" removed successfully` });
+      } else {
+        console.error('Claude CLI error:', stderr);
+        res.status(400).json({ error: 'Claude CLI command failed', details: stderr });
+      }
+    });
+    
+    process.on('error', (error) => {
+      console.error('Error running Claude CLI:', error);
+      res.status(500).json({ error: 'Failed to run Claude CLI', details: error.message });
+    });
+  } catch (error) {
+    console.error('Error removing MCP server via CLI:', error);
+    res.status(500).json({ error: 'Failed to remove MCP server', details: error.message });
+  }
+});
+
+// GET /api/mcp/cli/get/:name - Get MCP server details using Claude CLI
+router.get('/cli/get/:name', async (req, res) => {
+  try {
+    const { name } = req.params;
+    
+    console.log('📄 Getting MCP server details using Claude CLI:', name);
+    
+    const { spawn } = await import('child_process');
+    
+    const process = spawn('claude', ['mcp', 'get', name], {
+      stdio: ['pipe', 'pipe', 'pipe']
+    });
+    
+    let stdout = '';
+    let stderr = '';
+    
+    process.stdout.on('data', (data) => {
+      stdout += data.toString();
+    });
+    
+    process.stderr.on('data', (data) => {
+      stderr += data.toString();
+    });
+    
+    process.on('close', (code) => {
+      if (code === 0) {
+        res.json({ success: true, output: stdout, server: parseClaudeGetOutput(stdout) });
+      } else {
+        console.error('Claude CLI error:', stderr);
+        res.status(404).json({ error: 'Claude CLI command failed', details: stderr });
+      }
+    });
+    
+    process.on('error', (error) => {
+      console.error('Error running Claude CLI:', error);
+      res.status(500).json({ error: 'Failed to run Claude CLI', details: error.message });
+    });
+  } catch (error) {
+    console.error('Error getting MCP server details via CLI:', error);
+    res.status(500).json({ error: 'Failed to get MCP server details', details: error.message });
+  }
+});
+
+// GET /api/mcp/config/read - Read MCP servers directly from Claude config files
+router.get('/config/read', async (req, res) => {
+  try {
+    console.log('📖 Reading MCP servers from Claude config files');
+    
+    const homeDir = os.homedir();
+    const configPaths = [
+      path.join(homeDir, '.claude.json'),
+      path.join(homeDir, '.claude', 'settings.json')
+    ];
+    
+    let configData = null;
+    let configPath = null;
+    
+    // Try to read from either config file
+    for (const filepath of configPaths) {
+      try {
+        const fileContent = await fs.readFile(filepath, 'utf8');
+        configData = JSON.parse(fileContent);
+        configPath = filepath;
+        console.log(`✅ Found Claude config at: ${filepath}`);
+        break;
+      } catch (error) {
+        // File doesn't exist or is not valid JSON, try next
+        console.log(`ℹ️ Config not found or invalid at: ${filepath}`);
+      }
+    }
+    
+    if (!configData) {
+      return res.json({ 
+        success: false, 
+        message: 'No Claude configuration file found',
+        servers: [] 
+      });
+    }
+    
+    // Extract MCP servers from the config
+    const servers = [];
+    
+    // Check for user-scoped MCP servers (at root level)
+    if (configData.mcpServers && typeof configData.mcpServers === 'object' && Object.keys(configData.mcpServers).length > 0) {
+      console.log('🔍 Found user-scoped MCP servers:', Object.keys(configData.mcpServers));
+      for (const [name, config] of Object.entries(configData.mcpServers)) {
+        const server = {
+          id: name,
+          name: name,
+          type: 'stdio', // Default type
+          scope: 'user',  // User scope - available across all projects
+          config: {},
+          raw: config // Include raw config for full details
+        };
+        
+        // Determine transport type and extract config
+        if (config.command) {
+          server.type = 'stdio';
+          server.config.command = config.command;
+          server.config.args = config.args || [];
+          server.config.env = config.env || {};
+        } else if (config.url) {
+          server.type = config.transport || 'http';
+          server.config.url = config.url;
+          server.config.headers = config.headers || {};
+        }
+        
+        servers.push(server);
+      }
+    }
+    
+    // Check for local-scoped MCP servers (project-specific)
+    const currentProjectPath = process.cwd();
+    
+    // Check under 'projects' key
+    if (configData.projects && configData.projects[currentProjectPath]) {
+      const projectConfig = configData.projects[currentProjectPath];
+      if (projectConfig.mcpServers && typeof projectConfig.mcpServers === 'object' && Object.keys(projectConfig.mcpServers).length > 0) {
+        console.log(`🔍 Found local-scoped MCP servers for ${currentProjectPath}:`, Object.keys(projectConfig.mcpServers));
+        for (const [name, config] of Object.entries(projectConfig.mcpServers)) {
+          const server = {
+            id: `local:${name}`,  // Prefix with scope for uniqueness
+            name: name,           // Keep original name
+            type: 'stdio', // Default type
+            scope: 'local',  // Local scope - only for this project
+            projectPath: currentProjectPath,
+            config: {},
+            raw: config // Include raw config for full details
+          };
+          
+          // Determine transport type and extract config
+          if (config.command) {
+            server.type = 'stdio';
+            server.config.command = config.command;
+            server.config.args = config.args || [];
+            server.config.env = config.env || {};
+          } else if (config.url) {
+            server.type = config.transport || 'http';
+            server.config.url = config.url;
+            server.config.headers = config.headers || {};
+          }
+          
+          servers.push(server);
+        }
+      }
+    }
+    
+    console.log(`📋 Found ${servers.length} MCP servers in config`);
+    
+    res.json({ 
+      success: true, 
+      configPath: configPath,
+      servers: servers 
+    });
+  } catch (error) {
+    console.error('Error reading Claude config:', error);
+    res.status(500).json({ 
+      error: 'Failed to read Claude configuration', 
+      details: error.message 
+    });
+  }
+});
+
+// Helper functions to parse Claude CLI output
+function parseClaudeListOutput(output) {
+  const servers = [];
+  const lines = output.split('\n').filter(line => line.trim());
+  
+  for (const line of lines) {
+    // Skip the header line
+    if (line.includes('Checking MCP server health')) continue;
+    
+    // Parse lines like "test: test test - ✗ Failed to connect"
+    // or "server-name: command or description - ✓ Connected"
+    if (line.includes(':')) {
+      const colonIndex = line.indexOf(':');
+      const name = line.substring(0, colonIndex).trim();
+      
+      // Skip empty names
+      if (!name) continue;
+      
+      // Extract the rest after the name
+      const rest = line.substring(colonIndex + 1).trim();
+      
+      // Try to extract description and status
+      let description = rest;
+      let status = 'unknown';
+      let type = 'stdio'; // default type
+      
+      // Check for status indicators
+      if (rest.includes('✓') || rest.includes('✗')) {
+        const statusMatch = rest.match(/(.*?)\s*-\s*([✓✗].*)$/);
+        if (statusMatch) {
+          description = statusMatch[1].trim();
+          status = statusMatch[2].includes('✓') ? 'connected' : 'failed';
+        }
+      }
+      
+      // Try to determine type from description
+      if (description.startsWith('http://') || description.startsWith('https://')) {
+        type = 'http';
+      }
+      
+      servers.push({
+        name,
+        type,
+        status: status || 'active',
+        description
+      });
+    }
+  }
+  
+  console.log('🔍 Parsed Claude CLI servers:', servers);
+  return servers;
+}
+
+function parseClaudeGetOutput(output) {
+  // Parse the output from 'claude mcp get <name>' command
+  // This is a simple parser - might need adjustment based on actual output format
+  try {
+    // Try to extract JSON if present
+    const jsonMatch = output.match(/\{[\s\S]*\}/);
+    if (jsonMatch) {
+      return JSON.parse(jsonMatch[0]);
+    }
+    
+    // Otherwise, parse as text
+    const server = { raw_output: output };
+    const lines = output.split('\n');
+    
+    for (const line of lines) {
+      if (line.includes('Name:')) {
+        server.name = line.split(':')[1]?.trim();
+      } else if (line.includes('Type:')) {
+        server.type = line.split(':')[1]?.trim();
+      } else if (line.includes('Command:')) {
+        server.command = line.split(':')[1]?.trim();
+      } else if (line.includes('URL:')) {
+        server.url = line.split(':')[1]?.trim();
+      }
+    }
+    
+    return server;
+  } catch (error) {
+    return { raw_output: output, parse_error: error.message };
+  }
+}
+
+export default router;

src/App.jsx

@@ -28,7 +28,10 @@ import QuickSettingsPanel from './components/QuickSettingsPanel';
 
 import { useWebSocket } from './utils/websocket';
 import { ThemeProvider } from './contexts/ThemeContext';
+import { AuthProvider } from './contexts/AuthContext';
+import ProtectedRoute from './components/ProtectedRoute';
 import { useVersionCheck } from './hooks/useVersionCheck';
+import { api } from './utils/api';
 
 
 // Main App component with routing
@@ -61,6 +64,10 @@ function AppContent() {
     const saved = localStorage.getItem('autoScrollToBottom');
     return saved !== null ? JSON.parse(saved) : true;
   });
+  const [sendByCtrlEnter, setSendByCtrlEnter] = useState(() => {
+    const saved = localStorage.getItem('sendByCtrlEnter');
+    return saved !== null ? JSON.parse(saved) : false;
+  });
   // Session Protection System: Track sessions with active conversations to prevent
   // automatic project updates from interrupting ongoing chats. When a user sends
   // a message, the session is marked as "active" and project updates are paused
@@ -182,7 +189,7 @@ function AppContent() {
   const fetchProjects = async () => {
     try {
       setIsLoadingProjects(true);
-      const response = await fetch('/api/projects');
+      const response = await api.projects();
       const data = await response.json();
       
       // Optimize to preserve object references when data hasn't changed
@@ -304,7 +311,7 @@ function AppContent() {
   const handleSidebarRefresh = async () => {
     // Refresh only the sessions for all projects, don't change selected state
     try {
-      const response = await fetch('/api/projects');
+      const response = await api.projects();
       const freshProjects = await response.json();
       
       // Optimize to preserve object references and minimize re-renders
@@ -582,6 +589,8 @@ function AppContent() {
           onShowSettings={() => setShowToolsSettings(true)}
           autoExpandTools={autoExpandTools}
           showRawParameters={showRawParameters}
+          autoScrollToBottom={autoScrollToBottom}
+          sendByCtrlEnter={sendByCtrlEnter}
         />
       </div>
 
@@ -613,6 +622,11 @@ function AppContent() {
             setAutoScrollToBottom(value);
             localStorage.setItem('autoScrollToBottom', JSON.stringify(value));
           }}
+          sendByCtrlEnter={sendByCtrlEnter}
+          onSendByCtrlEnterChange={(value) => {
+            setSendByCtrlEnter(value);
+            localStorage.setItem('sendByCtrlEnter', JSON.stringify(value));
+          }}
           isMobile={isMobile}
         />
       )}
@@ -621,6 +635,7 @@ function AppContent() {
       <ToolsSettings
         isOpen={showToolsSettings}
         onClose={() => setShowToolsSettings(false)}
+        projects={projects}
       />
 
       {/* Version Upgrade Modal */}
@@ -633,12 +648,16 @@ function AppContent() {
 function App() {
   return (
     <ThemeProvider>
-      <Router>
-        <Routes>
-          <Route path="/" element={<AppContent />} />
-          <Route path="/session/:sessionId" element={<AppContent />} />
-        </Routes>
-      </Router>
+      <AuthProvider>
+        <ProtectedRoute>
+          <Router>
+            <Routes>
+              <Route path="/" element={<AppContent />} />
+              <Route path="/session/:sessionId" element={<AppContent />} />
+            </Routes>
+          </Router>
+        </ProtectedRoute>
+      </AuthProvider>
     </ThemeProvider>
   );
 }

src/components/CodeEditor.jsx

@@ -10,6 +10,7 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateField, StateEffect, RangeSetBuilder } from '@codemirror/state';
 import { X, Save, Download, Maximize2, Minimize2, Eye, EyeOff } from 'lucide-react';
+import { api } from '../utils/api';
 
 function CodeEditor({ file, onClose, projectPath }) {
   const [content, setContent] = useState('');
@@ -19,6 +20,7 @@ function CodeEditor({ file, onClose, projectPath }) {
   const [isDarkMode, setIsDarkMode] = useState(true);
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [showDiff, setShowDiff] = useState(!!file.diffInfo);
+  const [wordWrap, setWordWrap] = useState(false);
 
   // Create diff highlighting
   const diffEffect = StateEffect.define();
@@ -138,7 +140,7 @@ function CodeEditor({ file, onClose, projectPath }) {
       try {
         setLoading(true);
         
-        const response = await fetch(`/api/projects/${file.projectName}/file?filePath=${encodeURIComponent(file.path)}`);
+        const response = await api.readFile(file.projectName, file.path);
         
         if (!response.ok) {
           throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
@@ -175,16 +177,7 @@ function CodeEditor({ file, onClose, projectPath }) {
   const handleSave = async () => {
     setSaving(true);
     try {
-      const response = await fetch(`/api/projects/${file.projectName}/file`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          filePath: file.path,
-          content: content
-        })
-      });
+      const response = await api.saveFile(file.projectName, file.path, content);
 
       if (!response.ok) {
         const errorData = await response.json();
@@ -265,28 +258,17 @@ function CodeEditor({ file, onClose, projectPath }) {
   }
 
   return (
-    <>
-      <style>
-        {`
-          .code-editor-modal {
-            background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
-          }
-          .code-editor-modal:hover {
-            background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
-          }
-        `}
-      </style>
-      <div className={`fixed inset-0 z-50 ${
-        // Mobile: native fullscreen, Desktop: modal with backdrop
-        'md:bg-black/50 md:flex md:items-center md:justify-center md:p-4'
-      } ${isFullscreen ? 'md:p-0' : ''}`}>
-        <div className={`code-editor-modal shadow-2xl flex flex-col ${
-          // Mobile: always fullscreen, Desktop: modal sizing
-          'w-full h-full md:rounded-lg md:shadow-2xl' +
-          (isFullscreen ? ' md:w-full md:h-full md:rounded-none' : ' md:w-full md:max-w-6xl md:h-[80vh] md:max-h-[80vh]')
-        }`}>
+    <div className={`fixed inset-0 z-50 ${
+      // Mobile: native fullscreen, Desktop: modal with backdrop
+      'md:bg-black/50 md:flex md:items-center md:justify-center md:p-4'
+    } ${isFullscreen ? 'md:p-0' : ''}`}>
+      <div className={`bg-white shadow-2xl flex flex-col ${
+        // Mobile: always fullscreen, Desktop: modal sizing
+        'w-full h-full md:rounded-lg md:shadow-2xl' +
+        (isFullscreen ? ' md:w-full md:h-full md:rounded-none' : ' md:w-full md:max-w-6xl md:h-[80vh] md:max-h-[80vh]')
+      }`}>
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 min-w-0">
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0 min-w-0">
           <div className="flex items-center gap-3 min-w-0 flex-1">
             <div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center flex-shrink-0">
               <span className="text-white text-sm font-mono">
@@ -295,14 +277,14 @@ function CodeEditor({ file, onClose, projectPath }) {
             </div>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2 min-w-0">
-                <h3 className="font-medium text-gray-900 dark:text-white truncate">{file.name}</h3>
+                <h3 className="font-medium text-gray-900 truncate">{file.name}</h3>
                 {file.diffInfo && (
-                  <span className="text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-1 rounded whitespace-nowrap">
+                  <span className="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded whitespace-nowrap">
                     📝 Has changes
                   </span>
                 )}
               </div>
-              <p className="text-sm text-gray-500 dark:text-gray-400 truncate">{file.path}</p>
+              <p className="text-sm text-gray-500 truncate">{file.path}</p>
             </div>
           </div>
           
@@ -317,6 +299,18 @@ function CodeEditor({ file, onClose, projectPath }) {
               </button>
             )}
             
+            <button
+              onClick={() => setWordWrap(!wordWrap)}
+              className={`p-2 md:p-2 rounded-md hover:bg-gray-100 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center ${
+                wordWrap 
+                  ? 'text-blue-600 bg-blue-50' 
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}
+              title={wordWrap ? 'Disable word wrap' : 'Enable word wrap'}
+            >
+              <span className="text-sm md:text-xs font-mono font-bold">↵</span>
+            </button>
+            
             <button
               onClick={() => setIsDarkMode(!isDarkMode)}
               className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
@@ -384,7 +378,8 @@ function CodeEditor({ file, onClose, projectPath }) {
             extensions={[
               ...getLanguageExtension(file.name),
               diffField,
-              diffTheme
+              diffTheme,
+              ...(wordWrap ? [EditorView.lineWrapping] : [])
             ]}
             theme={isDarkMode ? oneDark : undefined}
             height="100%"
@@ -421,7 +416,6 @@ function CodeEditor({ file, onClose, projectPath }) {
         </div>
       </div>
     </div>
-    </>
   );
 }
 

src/components/ErrorBoundary.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Log the error details
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    
+    // You can also log the error to an error reporting service here
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Fallback UI
+      return (
+        <div className="flex flex-col items-center justify-center p-8 text-center">
+          <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md">
+            <div className="flex items-center mb-4">
+              <div className="flex-shrink-0">
+                <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+              </div>
+              <h3 className="ml-3 text-sm font-medium text-red-800">
+                Something went wrong
+              </h3>
+            </div>
+            <div className="text-sm text-red-700">
+              <p className="mb-2">An error occurred while loading the chat interface.</p>
+              {this.props.showDetails && this.state.error && (
+                <details className="mt-4">
+                  <summary className="cursor-pointer text-xs font-mono">Error Details</summary>
+                  <pre className="mt-2 text-xs bg-red-100 p-2 rounded overflow-auto max-h-40">
+                    {this.state.error.toString()}
+                    {this.state.errorInfo && this.state.errorInfo.componentStack}
+                  </pre>
+                </details>
+              )}
+            </div>
+            <div className="mt-4">
+              <button
+                onClick={() => {
+                  this.setState({ hasError: false, error: null, errorInfo: null });
+                  if (this.props.onRetry) this.props.onRetry();
+                }}
+                className="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
+              >
+                Try Again
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/FileTree.jsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { ScrollArea } from './ui/scroll-area';
 import { Button } from './ui/button';
-import { Folder, FolderOpen, File, FileText, FileCode } from 'lucide-react';
+import { Folder, FolderOpen, File, FileText, FileCode, List, TableProperties, Eye } from 'lucide-react';
 import { cn } from '../lib/utils';
 import CodeEditor from './CodeEditor';
 import ImageViewer from './ImageViewer';
+import { api } from '../utils/api';
 
 function FileTree({ selectedProject }) {
   const [files, setFiles] = useState([]);
@@ -12,6 +13,7 @@ function FileTree({ selectedProject }) {
   const [expandedDirs, setExpandedDirs] = useState(new Set());
   const [selectedFile, setSelectedFile] = useState(null);
   const [selectedImage, setSelectedImage] = useState(null);
+  const [viewMode, setViewMode] = useState('detailed'); // 'simple', 'detailed', 'compact'
 
   useEffect(() => {
     if (selectedProject) {
@@ -19,10 +21,18 @@ function FileTree({ selectedProject }) {
     }
   }, [selectedProject]);
 
+  // Load view mode preference from localStorage
+  useEffect(() => {
+    const savedViewMode = localStorage.getItem('file-tree-view-mode');
+    if (savedViewMode && ['simple', 'detailed', 'compact'].includes(savedViewMode)) {
+      setViewMode(savedViewMode);
+    }
+  }, []);
+
   const fetchFiles = async () => {
     setLoading(true);
     try {
-      const response = await fetch(`/api/projects/${selectedProject.name}/files`);
+      const response = await api.getFiles(selectedProject.name);
       
       if (!response.ok) {
         const errorText = await response.text();
@@ -51,6 +61,35 @@ function FileTree({ selectedProject }) {
     setExpandedDirs(newExpanded);
   };
 
+  // Change view mode and save preference
+  const changeViewMode = (mode) => {
+    setViewMode(mode);
+    localStorage.setItem('file-tree-view-mode', mode);
+  };
+
+  // Format file size
+  const formatFileSize = (bytes) => {
+    if (!bytes || bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  };
+
+  // Format date as relative time
+  const formatRelativeTime = (date) => {
+    if (!date) return '-';
+    const now = new Date();
+    const past = new Date(date);
+    const diffInSeconds = Math.floor((now - past) / 1000);
+    
+    if (diffInSeconds < 60) return 'just now';
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} min ago`;
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`;
+    if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)} days ago`;
+    return past.toLocaleDateString();
+  };
+
   const renderFileTree = (items, level = 0) => {
     return items.map((item) => (
       <div key={item.path} className="select-none">
@@ -134,6 +173,129 @@ function FileTree({ selectedProject }) {
     }
   };
 
+  // Render detailed view with table-like layout
+  const renderDetailedView = (items, level = 0) => {
+    return items.map((item) => (
+      <div key={item.path} className="select-none">
+        <div
+          className={cn(
+            "grid grid-cols-12 gap-2 p-2 hover:bg-accent cursor-pointer items-center",
+          )}
+          style={{ paddingLeft: `${level * 16 + 12}px` }}
+          onClick={() => {
+            if (item.type === 'directory') {
+              toggleDirectory(item.path);
+            } else if (isImageFile(item.name)) {
+              setSelectedImage({
+                name: item.name,
+                path: item.path,
+                projectPath: selectedProject.path,
+                projectName: selectedProject.name
+              });
+            } else {
+              setSelectedFile({
+                name: item.name,
+                path: item.path,
+                projectPath: selectedProject.path,
+                projectName: selectedProject.name
+              });
+            }
+          }}
+        >
+          <div className="col-span-5 flex items-center gap-2 min-w-0">
+            {item.type === 'directory' ? (
+              expandedDirs.has(item.path) ? (
+                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
+              ) : (
+                <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+              )
+            ) : (
+              getFileIcon(item.name)
+            )}
+            <span className="text-sm truncate text-foreground">
+              {item.name}
+            </span>
+          </div>
+          <div className="col-span-2 text-sm text-muted-foreground">
+            {item.type === 'file' ? formatFileSize(item.size) : '-'}
+          </div>
+          <div className="col-span-3 text-sm text-muted-foreground">
+            {formatRelativeTime(item.modified)}
+          </div>
+          <div className="col-span-2 text-sm text-muted-foreground font-mono">
+            {item.permissionsRwx || '-'}
+          </div>
+        </div>
+        
+        {item.type === 'directory' && 
+         expandedDirs.has(item.path) && 
+         item.children && 
+         renderDetailedView(item.children, level + 1)}
+      </div>
+    ));
+  };
+
+  // Render compact view with inline details
+  const renderCompactView = (items, level = 0) => {
+    return items.map((item) => (
+      <div key={item.path} className="select-none">
+        <div
+          className={cn(
+            "flex items-center justify-between p-2 hover:bg-accent cursor-pointer",
+          )}
+          style={{ paddingLeft: `${level * 16 + 12}px` }}
+          onClick={() => {
+            if (item.type === 'directory') {
+              toggleDirectory(item.path);
+            } else if (isImageFile(item.name)) {
+              setSelectedImage({
+                name: item.name,
+                path: item.path,
+                projectPath: selectedProject.path,
+                projectName: selectedProject.name
+              });
+            } else {
+              setSelectedFile({
+                name: item.name,
+                path: item.path,
+                projectPath: selectedProject.path,
+                projectName: selectedProject.name
+              });
+            }
+          }}
+        >
+          <div className="flex items-center gap-2 min-w-0">
+            {item.type === 'directory' ? (
+              expandedDirs.has(item.path) ? (
+                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
+              ) : (
+                <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+              )
+            ) : (
+              getFileIcon(item.name)
+            )}
+            <span className="text-sm truncate text-foreground">
+              {item.name}
+            </span>
+          </div>
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            {item.type === 'file' && (
+              <>
+                <span>{formatFileSize(item.size)}</span>
+                <span className="font-mono">{item.permissionsRwx}</span>
+              </>
+            )}
+          </div>
+        </div>
+        
+        {item.type === 'directory' && 
+         expandedDirs.has(item.path) && 
+         item.children && 
+         renderCompactView(item.children, level + 1)}
+      </div>
+    ));
+  };
+
   if (loading) {
     return (
       <div className="h-full flex items-center justify-center">
@@ -146,6 +308,51 @@ function FileTree({ selectedProject }) {
 
   return (
     <div className="h-full flex flex-col bg-card">
+      {/* View Mode Toggle */}
+      <div className="p-4 border-b border-border flex items-center justify-between">
+        <h3 className="text-sm font-medium text-foreground">Files</h3>
+        <div className="flex gap-1">
+          <Button
+            variant={viewMode === 'simple' ? 'default' : 'ghost'}
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => changeViewMode('simple')}
+            title="Simple view"
+          >
+            <List className="w-4 h-4" />
+          </Button>
+          <Button
+            variant={viewMode === 'compact' ? 'default' : 'ghost'}
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => changeViewMode('compact')}
+            title="Compact view"
+          >
+            <Eye className="w-4 h-4" />
+          </Button>
+          <Button
+            variant={viewMode === 'detailed' ? 'default' : 'ghost'}
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => changeViewMode('detailed')}
+            title="Detailed view"
+          >
+            <TableProperties className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Column Headers for Detailed View */}
+      {viewMode === 'detailed' && files.length > 0 && (
+        <div className="px-4 pt-2 pb-1 border-b border-border">
+          <div className="grid grid-cols-12 gap-2 px-2 text-xs font-medium text-muted-foreground">
+            <div className="col-span-5">Name</div>
+            <div className="col-span-2">Size</div>
+            <div className="col-span-3">Modified</div>
+            <div className="col-span-2">Permissions</div>
+          </div>
+        </div>
+      )}
       
       <ScrollArea className="flex-1 p-4">
         {files.length === 0 ? (
@@ -159,8 +366,10 @@ function FileTree({ selectedProject }) {
             </p>
           </div>
         ) : (
-          <div className="space-y-1">
-            {renderFileTree(files)}
+          <div className={viewMode === 'detailed' ? '' : 'space-y-1'}>
+            {viewMode === 'simple' && renderFileTree(files)}
+            {viewMode === 'compact' && renderCompactView(files)}
+            {viewMode === 'detailed' && renderDetailedView(files)}
           </div>
         )}
       </ScrollArea>

src/components/LoginForm.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { MessageSquare } from 'lucide-react';
+
+const LoginForm = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  
+  const { login } = useAuth();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    
+    if (!username || !password) {
+      setError('Please enter both username and password');
+      return;
+    }
+    
+    setIsLoading(true);
+    
+    const result = await login(username, password);
+    
+    if (!result.success) {
+      setError(result.error);
+    }
+    
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-card rounded-lg shadow-lg border border-border p-8 space-y-6">
+          {/* Logo and Title */}
+          <div className="text-center">
+            <div className="flex justify-center mb-4">
+              <div className="w-16 h-16 bg-primary rounded-lg flex items-center justify-center shadow-sm">
+                <MessageSquare className="w-8 h-8 text-primary-foreground" />
+              </div>
+            </div>
+            <h1 className="text-2xl font-bold text-foreground">Welcome Back</h1>
+            <p className="text-muted-foreground mt-2">
+              Sign in to your Claude Code UI account
+            </p>
+          </div>
+
+          {/* Login Form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-foreground mb-1">
+                Username
+              </label>
+              <input
+                type="text"
+                id="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Enter your username"
+                required
+                disabled={isLoading}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Enter your password"
+                required
+                disabled={isLoading}
+              />
+            </div>
+
+            {error && (
+              <div className="p-3 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-md">
+                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
+            >
+              {isLoading ? 'Signing in...' : 'Sign In'}
+            </button>
+          </form>
+
+          <div className="text-center">
+            <p className="text-sm text-muted-foreground">
+              Enter your credentials to access Claude Code UI
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginForm;

src/components/MainContent.jsx

@@ -17,6 +17,7 @@ import FileTree from './FileTree';
 import CodeEditor from './CodeEditor';
 import Shell from './Shell';
 import GitPanel from './GitPanel';
+import ErrorBoundary from './ErrorBoundary';
 
 function MainContent({ 
   selectedProject, 
@@ -39,7 +40,8 @@ function MainContent({
   onShowSettings,         // Show tools settings panel
   autoExpandTools,        // Auto-expand tool accordions
   showRawParameters,      // Show raw parameters in tool accordions
-  autoScrollToBottom      // Auto-scroll to bottom when new messages arrive
+  autoScrollToBottom,     // Auto-scroll to bottom when new messages arrive
+  sendByCtrlEnter         // Send by Ctrl+Enter mode for East Asian language input
 }) {
   const [editingFile, setEditingFile] = useState(null);
 
@@ -269,23 +271,26 @@ function MainContent({
       {/* Content Area */}
       <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
         <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
-          <ChatInterface
-            selectedProject={selectedProject}
-            selectedSession={selectedSession}
-            ws={ws}
-            sendMessage={sendMessage}
-            messages={messages}
-            onFileOpen={handleFileOpen}
-            onInputFocusChange={onInputFocusChange}
-            onSessionActive={onSessionActive}
-            onSessionInactive={onSessionInactive}
-            onReplaceTemporarySession={onReplaceTemporarySession}
-            onNavigateToSession={onNavigateToSession}
-            onShowSettings={onShowSettings}
-            autoExpandTools={autoExpandTools}
-            showRawParameters={showRawParameters}
-            autoScrollToBottom={autoScrollToBottom}
-          />
+          <ErrorBoundary showDetails={true}>
+            <ChatInterface
+              selectedProject={selectedProject}
+              selectedSession={selectedSession}
+              ws={ws}
+              sendMessage={sendMessage}
+              messages={messages}
+              onFileOpen={handleFileOpen}
+              onInputFocusChange={onInputFocusChange}
+              onSessionActive={onSessionActive}
+              onSessionInactive={onSessionInactive}
+              onReplaceTemporarySession={onReplaceTemporarySession}
+              onNavigateToSession={onNavigateToSession}
+              onShowSettings={onShowSettings}
+              autoExpandTools={autoExpandTools}
+              showRawParameters={showRawParameters}
+              autoScrollToBottom={autoScrollToBottom}
+              sendByCtrlEnter={sendByCtrlEnter}
+            />
+          </ErrorBoundary>
         </div>
         <div className={`h-full overflow-hidden ${activeTab === 'files' ? 'block' : 'hidden'}`}>
           <FileTree selectedProject={selectedProject} />

src/components/ProtectedRoute.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import SetupForm from './SetupForm';
+import LoginForm from './LoginForm';
+import { MessageSquare } from 'lucide-react';
+
+const LoadingScreen = () => (
+  <div className="min-h-screen bg-background flex items-center justify-center p-4">
+    <div className="text-center">
+      <div className="flex justify-center mb-4">
+        <div className="w-16 h-16 bg-primary rounded-lg flex items-center justify-center shadow-sm">
+          <MessageSquare className="w-8 h-8 text-primary-foreground" />
+        </div>
+      </div>
+      <h1 className="text-2xl font-bold text-foreground mb-2">Claude Code UI</h1>
+      <div className="flex items-center justify-center space-x-2">
+        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
+        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+      </div>
+      <p className="text-muted-foreground mt-2">Loading...</p>
+    </div>
+  </div>
+);
+
+const ProtectedRoute = ({ children }) => {
+  const { user, isLoading, needsSetup } = useAuth();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (needsSetup) {
+    return <SetupForm />;
+  }
+
+  if (!user) {
+    return <LoginForm />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;

src/components/QuickSettingsPanel.jsx

@@ -11,7 +11,8 @@ import {
   Mic,
   Brain,
   Sparkles,
-  FileText
+  FileText,
+  Languages
 } from 'lucide-react';
 import DarkModeToggle from './DarkModeToggle';
 import { useTheme } from '../contexts/ThemeContext';
@@ -25,6 +26,8 @@ const QuickSettingsPanel = ({
   onShowRawParametersChange,
   autoScrollToBottom,
   onAutoScrollChange,
+  sendByCtrlEnter,
+  onSendByCtrlEnterChange,
   isMobile
 }) => {
   const [localIsOpen, setLocalIsOpen] = useState(isOpen);
@@ -142,6 +145,27 @@ const QuickSettingsPanel = ({
               </label>
             </div>
 
+            {/* Input Settings */}
+            <div className="space-y-2">
+              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Input Settings</h4>
+              
+              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
+                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
+                  <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+                  Send by Ctrl+Enter
+                </span>
+                <input
+                  type="checkbox"
+                  checked={sendByCtrlEnter}
+                  onChange={(e) => onSendByCtrlEnterChange(e.target.checked)}
+                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
+                />
+              </label>
+              <p className="text-xs text-gray-500 dark:text-gray-400 ml-3">
+                When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends.
+              </p>
+            </div>
+
             {/* 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>

src/components/SetupForm.jsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import ClaudeLogo from './ClaudeLogo';
+
+const SetupForm = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  
+  const { register } = useAuth();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+    
+    if (username.length < 3) {
+      setError('Username must be at least 3 characters long');
+      return;
+    }
+    
+    if (password.length < 6) {
+      setError('Password must be at least 6 characters long');
+      return;
+    }
+    
+    setIsLoading(true);
+    
+    const result = await register(username, password);
+    
+    if (!result.success) {
+      setError(result.error);
+    }
+    
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-card rounded-lg shadow-lg border border-border p-8 space-y-6">
+          {/* Logo and Title */}
+          <div className="text-center">
+            <div className="flex justify-center mb-4">
+              <ClaudeLogo size={64} />
+            </div>
+            <h1 className="text-2xl font-bold text-foreground">Welcome to Claude Code UI</h1>
+            <p className="text-muted-foreground mt-2">
+              Set up your account to get started
+            </p>
+          </div>
+
+          {/* Setup Form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-foreground mb-1">
+                Username
+              </label>
+              <input
+                type="text"
+                id="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Enter your username"
+                required
+                disabled={isLoading}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
+                Password
+              </label>
+              <input
+                type="password"
+                id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Enter your password"
+                required
+                disabled={isLoading}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-1">
+                Confirm Password
+              </label>
+              <input
+                type="password"
+                id="confirmPassword"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Confirm your password"
+                required
+                disabled={isLoading}
+              />
+            </div>
+
+            {error && (
+              <div className="p-3 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-md">
+                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
+            >
+              {isLoading ? 'Setting up...' : 'Create Account'}
+            </button>
+          </form>
+
+          <div className="text-center">
+            <p className="text-sm text-muted-foreground">
+              This is a single-user system. Only one account can be created.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SetupForm;

src/components/Shell.jsx

@@ -5,6 +5,27 @@ import { ClipboardAddon } from '@xterm/addon-clipboard';
 import { WebglAddon } from '@xterm/addon-webgl';
 import 'xterm/css/xterm.css';
 
+// CSS to remove xterm focus outline
+const xtermStyles = `
+  .xterm .xterm-screen {
+    outline: none !important;
+  }
+  .xterm:focus .xterm-screen {
+    outline: none !important;
+  }
+  .xterm-screen:focus {
+    outline: none !important;
+  }
+`;
+
+// Inject styles
+if (typeof document !== 'undefined') {
+  const styleSheet = document.createElement('style');
+  styleSheet.type = 'text/css';
+  styleSheet.innerText = xtermStyles;
+  document.head.appendChild(styleSheet);
+}
+
 // Global store for shell sessions to persist across tab switches
 const shellSessions = new Map();
 
@@ -138,6 +159,14 @@ function Shell({ selectedProject, selectedSession, isActive }) {
         setTimeout(() => {
           if (fitAddon.current) {
             fitAddon.current.fit();
+            // Send terminal size to backend after reattaching
+            if (ws.current && ws.current.readyState === WebSocket.OPEN) {
+              ws.current.send(JSON.stringify({
+                type: 'resize',
+                cols: terminal.current.cols,
+                rows: terminal.current.rows
+              }));
+            }
           }
         }, 100);
         
@@ -226,6 +255,13 @@ function Shell({ selectedProject, selectedSession, isActive }) {
     
     terminal.current.open(terminalRef.current);
 
+    // Wait for terminal to be fully rendered, then fit
+    setTimeout(() => {
+      if (fitAddon.current) {
+        fitAddon.current.fit();
+      }
+    }, 50);
+
     // Add keyboard shortcuts for copy/paste
     terminal.current.attachCustomKeyEventHandler((event) => {
       // Ctrl+C or Cmd+C for copy (when text is selected)
@@ -252,10 +288,18 @@ function Shell({ selectedProject, selectedSession, isActive }) {
       return true;
     });
     
-    // Ensure terminal takes full space
+    // Ensure terminal takes full space and notify backend of size
     setTimeout(() => {
       if (fitAddon.current) {
         fitAddon.current.fit();
+        // Send terminal size to backend after fitting
+        if (terminal.current && ws.current && ws.current.readyState === WebSocket.OPEN) {
+          ws.current.send(JSON.stringify({
+            type: 'resize',
+            cols: terminal.current.cols,
+            rows: terminal.current.rows
+          }));
+        }
       }
     }, 100);
     
@@ -276,6 +320,14 @@ function Shell({ selectedProject, selectedSession, isActive }) {
       if (fitAddon.current && terminal.current) {
         setTimeout(() => {
           fitAddon.current.fit();
+          // Send updated terminal size to backend after resize
+          if (ws.current && ws.current.readyState === WebSocket.OPEN) {
+            ws.current.send(JSON.stringify({
+              type: 'resize',
+              cols: terminal.current.cols,
+              rows: terminal.current.rows
+            }));
+          }
         }, 50);
       }
     });
@@ -309,10 +361,18 @@ function Shell({ selectedProject, selectedSession, isActive }) {
   useEffect(() => {
     if (!isActive || !isInitialized) return;
 
-    // Fit terminal when tab becomes active
+    // Fit terminal when tab becomes active and notify backend
     setTimeout(() => {
       if (fitAddon.current) {
         fitAddon.current.fit();
+        // Send terminal size to backend after tab activation
+        if (terminal.current && ws.current && ws.current.readyState === WebSocket.OPEN) {
+          ws.current.send(JSON.stringify({
+            type: 'resize',
+            cols: terminal.current.cols,
+            rows: terminal.current.rows
+          }));
+        }
       }
     }, 100);
   }, [isActive, isInitialized]);
@@ -322,10 +382,21 @@ function Shell({ selectedProject, selectedSession, isActive }) {
     if (isConnecting || isConnected) return;
     
     try {
+      // Get authentication token
+      const token = localStorage.getItem('auth-token');
+      if (!token) {
+        console.error('No authentication token found for Shell WebSocket connection');
+        return;
+      }
+      
       // Fetch server configuration to get the correct WebSocket URL
       let wsBaseUrl;
       try {
-        const configResponse = await fetch('/api/config');
+        const configResponse = await fetch('/api/config', {
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
         const config = await configResponse.json();
         wsBaseUrl = config.wsUrl;
         
@@ -343,7 +414,8 @@ function Shell({ selectedProject, selectedSession, isActive }) {
         wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
       }
       
-      const wsUrl = `${wsBaseUrl}/shell`;
+      // Include token in WebSocket URL as query parameter
+      const wsUrl = `${wsBaseUrl}/shell?token=${encodeURIComponent(token)}`;
       
       ws.current = new WebSocket(wsUrl);
 
@@ -351,16 +423,38 @@ function Shell({ selectedProject, selectedSession, isActive }) {
         setIsConnected(true);
         setIsConnecting(false);
         
-        // Send initial setup with project path and session info
-        const initPayload = {
-          type: 'init',
-          projectPath: selectedProject.fullPath || selectedProject.path,
-          sessionId: selectedSession?.id,
-          hasSession: !!selectedSession
-        };
-        
-        
-        ws.current.send(JSON.stringify(initPayload));
+        // Wait for terminal to be ready, then fit and send dimensions
+        setTimeout(() => {
+          if (fitAddon.current && terminal.current) {
+            // Force a fit to ensure proper dimensions
+            fitAddon.current.fit();
+            
+            // Wait a bit more for fit to complete, then send dimensions
+            setTimeout(() => {
+              const initPayload = {
+                type: 'init',
+                projectPath: selectedProject.fullPath || selectedProject.path,
+                sessionId: selectedSession?.id,
+                hasSession: !!selectedSession,
+                cols: terminal.current.cols,
+                rows: terminal.current.rows
+              };
+              
+              ws.current.send(JSON.stringify(initPayload));
+              
+              // Also send resize message immediately after init
+              setTimeout(() => {
+                if (terminal.current && ws.current && ws.current.readyState === WebSocket.OPEN) {
+                  ws.current.send(JSON.stringify({
+                    type: 'resize',
+                    cols: terminal.current.cols,
+                    rows: terminal.current.rows
+                  }));
+                }
+              }, 100);
+            }, 50);
+          }
+        }, 200);
       };
 
       ws.current.onmessage = (event) => {
@@ -430,7 +524,7 @@ function Shell({ selectedProject, selectedSession, isActive }) {
   }
 
   return (
-    <div className="h-full flex flex-col bg-gray-900">
+    <div className="h-full flex flex-col bg-gray-900 w-full">
       {/* Header */}
       <div className="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
         <div className="flex items-center justify-between">
@@ -482,7 +576,7 @@ function Shell({ selectedProject, selectedSession, isActive }) {
 
       {/* Terminal */}
       <div className="flex-1 p-2 overflow-hidden relative">
-        <div ref={terminalRef} className="h-full w-full" />
+        <div ref={terminalRef} className="h-full w-full focus:outline-none" style={{ outline: 'none' }} />
         
         {/* Loading state */}
         {!isInitialized && (

src/components/Sidebar.jsx

@@ -3,9 +3,11 @@ import { ScrollArea } from './ui/scroll-area';
 import { Button } from './ui/button';
 import { Badge } from './ui/badge';
 import { Input } from './ui/input';
-import { FolderOpen, Folder, Plus, MessageSquare, Clock, ChevronDown, ChevronRight, Edit3, Check, X, Trash2, Settings, FolderPlus, RefreshCw, Sparkles, Edit2 } from 'lucide-react';
+
+import { FolderOpen, Folder, Plus, MessageSquare, Clock, ChevronDown, ChevronRight, Edit3, Check, X, Trash2, Settings, FolderPlus, RefreshCw, Sparkles, Edit2, Star, Search } from 'lucide-react';
 import { cn } from '../lib/utils';
 import ClaudeLogo from './ClaudeLogo';
+import { api } from '../utils/api';
 
 // Move formatTimeAgo outside component to avoid recreation on every render
 const formatTimeAgo = (dateString, currentTime) => {
@@ -60,14 +62,32 @@ function Sidebar({
   const [additionalSessions, setAdditionalSessions] = useState({});
   const [initialSessionsLoaded, setInitialSessionsLoaded] = useState(new Set());
   const [currentTime, setCurrentTime] = useState(new Date());
+  const [projectSortOrder, setProjectSortOrder] = useState('name');
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [editingSession, setEditingSession] = useState(null);
   const [editingSessionName, setEditingSessionName] = useState('');
   const [generatingSummary, setGeneratingSummary] = useState({});
+  const [searchFilter, setSearchFilter] = useState('');
 
-  // Touch handler to prevent double-tap issues on iPad
+  
+  // Starred projects state - persisted in localStorage
+  const [starredProjects, setStarredProjects] = useState(() => {
+    try {
+      const saved = localStorage.getItem('starredProjects');
+      return saved ? new Set(JSON.parse(saved)) : new Set();
+    } catch (error) {
+      console.error('Error loading starred projects:', error);
+      return new Set();
+    }
+  });
+
+  // Touch handler to prevent double-tap issues on iPad (only for buttons, not scroll areas)
   const handleTouchClick = (callback) => {
     return (e) => {
+      // Only prevent default for buttons/clickable elements, not scrollable areas
+      if (e.target.closest('.overflow-y-auto') || e.target.closest('[data-scroll-container]')) {
+        return;
+      }
       e.preventDefault();
       e.stopPropagation();
       callback();
@@ -109,6 +129,45 @@ function Sidebar({
     }
   }, [projects, isLoading]);
 
+  // Load project sort order from settings
+  useEffect(() => {
+    const loadSortOrder = () => {
+      try {
+        const savedSettings = localStorage.getItem('claude-tools-settings');
+        if (savedSettings) {
+          const settings = JSON.parse(savedSettings);
+          setProjectSortOrder(settings.projectSortOrder || 'name');
+        }
+      } catch (error) {
+        console.error('Error loading sort order:', error);
+      }
+    };
+
+    // Load initially
+    loadSortOrder();
+
+    // Listen for storage changes
+    const handleStorageChange = (e) => {
+      if (e.key === 'claude-tools-settings') {
+        loadSortOrder();
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    
+    // Also check periodically when component is focused (for same-tab changes)
+    const checkInterval = setInterval(() => {
+      if (document.hasFocus()) {
+        loadSortOrder();
+      }
+    }, 1000);
+    
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      clearInterval(checkInterval);
+    };
+  }, []);
+
   const toggleProject = (projectName) => {
     const newExpanded = new Set(expandedProjects);
     if (newExpanded.has(projectName)) {
@@ -119,6 +178,71 @@ function Sidebar({
     setExpandedProjects(newExpanded);
   };
 
+  // Starred projects utility functions
+  const toggleStarProject = (projectName) => {
+    const newStarred = new Set(starredProjects);
+    if (newStarred.has(projectName)) {
+      newStarred.delete(projectName);
+    } else {
+      newStarred.add(projectName);
+    }
+    setStarredProjects(newStarred);
+    
+    // Persist to localStorage
+    try {
+      localStorage.setItem('starredProjects', JSON.stringify([...newStarred]));
+    } catch (error) {
+      console.error('Error saving starred projects:', error);
+    }
+  };
+
+  const isProjectStarred = (projectName) => {
+    return starredProjects.has(projectName);
+  };
+
+  // Helper function to get all sessions for a project (initial + additional)
+  const getAllSessions = (project) => {
+    const initialSessions = project.sessions || [];
+    const additional = additionalSessions[project.name] || [];
+    return [...initialSessions, ...additional];
+  };
+
+  // Helper function to get the last activity date for a project
+  const getProjectLastActivity = (project) => {
+    const allSessions = getAllSessions(project);
+    if (allSessions.length === 0) {
+      return new Date(0); // Return epoch date for projects with no sessions
+    }
+    
+    // Find the most recent session activity
+    const mostRecentDate = allSessions.reduce((latest, session) => {
+      const sessionDate = new Date(session.lastActivity);
+      return sessionDate > latest ? sessionDate : latest;
+    }, new Date(0));
+    
+    return mostRecentDate;
+  };
+
+  // Combined sorting: starred projects first, then by selected order
+  const sortedProjects = [...projects].sort((a, b) => {
+    const aStarred = isProjectStarred(a.name);
+    const bStarred = isProjectStarred(b.name);
+    
+    // First, sort by starred status
+    if (aStarred && !bStarred) return -1;
+    if (!aStarred && bStarred) return 1;
+    
+    // For projects with same starred status, sort by selected order
+    if (projectSortOrder === 'date') {
+      // Sort by most recent activity (descending)
+      return getProjectLastActivity(b) - getProjectLastActivity(a);
+    } else {
+      // Sort by display name (user-defined) or fallback to name (ascending)
+      const nameA = a.displayName || a.name;
+      const nameB = b.displayName || b.name;
+      return nameA.localeCompare(nameB);
+    }
+  });
 
   const startEditing = (project) => {
     setEditingProject(project.name);
@@ -132,13 +256,7 @@ function Sidebar({
 
   const saveProjectName = async (projectName) => {
     try {
-      const response = await fetch(`/api/projects/${projectName}/rename`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ displayName: editingName }),
-      });
+      const response = await api.renameProject(projectName, editingName);
 
       if (response.ok) {
         // Refresh projects to get updated data
@@ -164,9 +282,7 @@ function Sidebar({
     }
 
     try {
-      const response = await fetch(`/api/projects/${projectName}/sessions/${sessionId}`, {
-        method: 'DELETE',
-      });
+      const response = await api.deleteSession(projectName, sessionId);
 
       if (response.ok) {
         // Call parent callback if provided
@@ -189,9 +305,7 @@ function Sidebar({
     }
 
     try {
-      const response = await fetch(`/api/projects/${projectName}`, {
-        method: 'DELETE',
-      });
+      const response = await api.deleteProject(projectName);
 
       if (response.ok) {
         // Call parent callback if provided
@@ -218,15 +332,7 @@ function Sidebar({
     setCreatingProject(true);
     
     try {
-      const response = await fetch('/api/projects/create', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ 
-          path: newProjectPath.trim()
-        }),
-      });
+      const response = await api.createProject(newProjectPath.trim());
 
       if (response.ok) {
         const result = await response.json();
@@ -268,9 +374,7 @@ function Sidebar({
 
     try {
       const currentSessionCount = (project.sessions?.length || 0) + (additionalSessions[project.name]?.length || 0);
-      const response = await fetch(
-        `/api/projects/${project.name}/sessions?limit=5&offset=${currentSessionCount}`
-      );
+      const response = await api.sessions(project.name, 5, currentSessionCount);
       
       if (response.ok) {
         const result = await response.json();
@@ -297,12 +401,17 @@ function Sidebar({
     }
   };
 
-  // Helper function to get all sessions for a project (initial + additional)
-  const getAllSessions = (project) => {
-    const initialSessions = project.sessions || [];
-    const additional = additionalSessions[project.name] || [];
-    return [...initialSessions, ...additional];
-  };
+  // Filter projects based on search input
+  const filteredProjects = sortedProjects.filter(project => {
+    if (!searchFilter.trim()) return true;
+    
+    const searchLower = searchFilter.toLowerCase();
+    const displayName = (project.displayName || project.name).toLowerCase();
+    const projectName = project.name.toLowerCase();
+    
+    // Search in both display name and actual project name/path
+    return displayName.includes(searchLower) || projectName.includes(searchLower);
+  });
 
   return (
     <div className="h-full flex flex-col bg-card md:select-none">
@@ -488,6 +597,30 @@ function Sidebar({
         </div>
       )}
       
+      {/* Search Filter */}
+      {projects.length > 0 && !isLoading && (
+        <div className="px-3 md:px-4 py-2 border-b border-border">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder="Search projects..."
+              value={searchFilter}
+              onChange={(e) => setSearchFilter(e.target.value)}
+              className="pl-9 h-9 text-sm bg-muted/50 border-0 focus:bg-background focus:ring-1 focus:ring-primary/20"
+            />
+            {searchFilter && (
+              <button
+                onClick={() => setSearchFilter('')}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 hover:bg-accent rounded"
+              >
+                <X className="w-3 h-3 text-muted-foreground" />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+      
       {/* Projects List */}
       <ScrollArea className="flex-1 md:px-2 md:py-3 overflow-y-auto overscroll-contain">
         <div className="md:space-y-1 pb-safe-area-inset-bottom">
@@ -511,10 +644,21 @@ function Sidebar({
                 Run Claude CLI in a project directory to get started
               </p>
             </div>
+          ) : filteredProjects.length === 0 ? (
+            <div className="text-center py-12 md:py-8 px-4">
+              <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
+                <Search className="w-6 h-6 text-muted-foreground" />
+              </div>
+              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">No matching projects</h3>
+              <p className="text-sm text-muted-foreground">
+                Try adjusting your search term
+              </p>
+            </div>
           ) : (
-            projects.map((project) => {
+            filteredProjects.map((project) => {
               const isExpanded = expandedProjects.has(project.name);
               const isSelected = selectedProject?.name === project.name;
+              const isStarred = isProjectStarred(project.name);
               
               return (
                 <div key={project.name} className="md:space-y-1">
@@ -525,7 +669,8 @@ function Sidebar({
                       <div
                         className={cn(
                           "p-3 mx-3 my-1 rounded-lg bg-card border border-border/50 active:scale-[0.98] transition-all duration-150",
-                          isSelected && "bg-primary/5 border-primary/20"
+                          isSelected && "bg-primary/5 border-primary/20",
+                          isStarred && !isSelected && "bg-yellow-50/50 dark:bg-yellow-900/5 border-yellow-200/30 dark:border-yellow-800/30"
                         )}
                         onClick={() => {
                           // On mobile, just toggle the folder - don't select the project
@@ -607,6 +752,28 @@ function Sidebar({
                               </>
                             ) : (
                               <>
+                                {/* Star button */}
+                                <button
+                                  className={cn(
+                                    "w-8 h-8 rounded-lg flex items-center justify-center active:scale-90 transition-all duration-150 border",
+                                    isStarred 
+                                      ? "bg-yellow-500/10 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800" 
+                                      : "bg-gray-500/10 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    toggleStarProject(project.name);
+                                  }}
+                                  onTouchEnd={handleTouchClick(() => toggleStarProject(project.name))}
+                                  title={isStarred ? "Remove from favorites" : "Add to favorites"}
+                                >
+                                  <Star className={cn(
+                                    "w-4 h-4 transition-colors",
+                                    isStarred 
+                                      ? "text-yellow-600 dark:text-yellow-400 fill-current" 
+                                      : "text-gray-600 dark:text-gray-400"
+                                  )} />
+                                </button>
                                 {getAllSessions(project).length === 0 && (
                                   <button
                                     className="w-8 h-8 rounded-lg bg-red-500/10 dark:bg-red-900/30 flex items-center justify-center active:scale-90 border border-red-200 dark:border-red-800"
@@ -648,7 +815,8 @@ function Sidebar({
                       variant="ghost"
                       className={cn(
                         "hidden md:flex w-full justify-between p-2 h-auto font-normal hover:bg-accent/50",
-                        isSelected && "bg-accent text-accent-foreground"
+                        isSelected && "bg-accent text-accent-foreground",
+                        isStarred && !isSelected && "bg-yellow-50/50 dark:bg-yellow-900/10 hover:bg-yellow-100/50 dark:hover:bg-yellow-900/20"
                       )}
                       onClick={() => {
                         // Desktop behavior: select project and toggle
@@ -735,6 +903,27 @@ function Sidebar({
                           </>
                         ) : (
                           <>
+                            {/* Star button */}
+                            <div
+                              className={cn(
+                                "w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 flex items-center justify-center rounded cursor-pointer touch:opacity-100",
+                                isStarred 
+                                  ? "hover:bg-yellow-50 dark:hover:bg-yellow-900/20 opacity-100" 
+                                  : "hover:bg-accent"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                toggleStarProject(project.name);
+                              }}
+                              title={isStarred ? "Remove from favorites" : "Add to favorites"}
+                            >
+                              <Star className={cn(
+                                "w-3 h-3 transition-colors",
+                                isStarred 
+                                  ? "text-yellow-600 dark:text-yellow-400 fill-current" 
+                                  : "text-muted-foreground"
+                              )} />
+                            </div>
                             <div
                               className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-accent flex items-center justify-center rounded cursor-pointer touch:opacity-100"
                               onClick={(e) => {

src/components/ui/scroll-area.jsx

@@ -7,7 +7,13 @@ const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) =>
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <div className="h-full w-full rounded-[inherit] overflow-auto">
+    <div 
+      className="h-full w-full rounded-[inherit] overflow-auto"
+      style={{
+        WebkitOverflowScrolling: 'touch',
+        touchAction: 'pan-y'
+      }}
+    >
       {children}
     </div>
   </div>

src/contexts/AuthContext.jsx

@@ -0,0 +1,158 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { api } from '../utils/api';
+
+const AuthContext = createContext({
+  user: null,
+  token: null,
+  login: () => {},
+  register: () => {},
+  logout: () => {},
+  isLoading: true,
+  needsSetup: false,
+  error: null
+});
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [token, setToken] = useState(localStorage.getItem('auth-token'));
+  const [isLoading, setIsLoading] = useState(true);
+  const [needsSetup, setNeedsSetup] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Check authentication status on mount
+  useEffect(() => {
+    checkAuthStatus();
+  }, []);
+
+  const checkAuthStatus = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      
+      // Check if system needs setup
+      const statusResponse = await api.auth.status();
+      const statusData = await statusResponse.json();
+      
+      if (statusData.needsSetup) {
+        setNeedsSetup(true);
+        setIsLoading(false);
+        return;
+      }
+      
+      // If we have a token, verify it
+      if (token) {
+        try {
+          const userResponse = await api.auth.user();
+          
+          if (userResponse.ok) {
+            const userData = await userResponse.json();
+            setUser(userData.user);
+            setNeedsSetup(false);
+          } else {
+            // Token is invalid
+            localStorage.removeItem('auth-token');
+            setToken(null);
+            setUser(null);
+          }
+        } catch (error) {
+          console.error('Token verification failed:', error);
+          localStorage.removeItem('auth-token');
+          setToken(null);
+          setUser(null);
+        }
+      }
+    } catch (error) {
+      console.error('Auth status check failed:', error);
+      setError('Failed to check authentication status');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const login = async (username, password) => {
+    try {
+      setError(null);
+      const response = await api.auth.login(username, password);
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setToken(data.token);
+        setUser(data.user);
+        localStorage.setItem('auth-token', data.token);
+        return { success: true };
+      } else {
+        setError(data.error || 'Login failed');
+        return { success: false, error: data.error || 'Login failed' };
+      }
+    } catch (error) {
+      console.error('Login error:', error);
+      const errorMessage = 'Network error. Please try again.';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    }
+  };
+
+  const register = async (username, password) => {
+    try {
+      setError(null);
+      const response = await api.auth.register(username, password);
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setToken(data.token);
+        setUser(data.user);
+        setNeedsSetup(false);
+        localStorage.setItem('auth-token', data.token);
+        return { success: true };
+      } else {
+        setError(data.error || 'Registration failed');
+        return { success: false, error: data.error || 'Registration failed' };
+      }
+    } catch (error) {
+      console.error('Registration error:', error);
+      const errorMessage = 'Network error. Please try again.';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    }
+  };
+
+  const logout = () => {
+    setToken(null);
+    setUser(null);
+    localStorage.removeItem('auth-token');
+    
+    // Optional: Call logout endpoint for logging
+    if (token) {
+      api.auth.logout().catch(error => {
+        console.error('Logout endpoint error:', error);
+      });
+    }
+  };
+
+  const value = {
+    user,
+    token,
+    login,
+    register,
+    logout,
+    isLoading,
+    needsSetup,
+    error
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

src/contexts/ThemeContext.jsx

@@ -32,9 +32,31 @@ export const ThemeProvider = ({ children }) => {
     if (isDarkMode) {
       document.documentElement.classList.add('dark');
       localStorage.setItem('theme', 'dark');
+      
+      // Update iOS status bar style and theme color for dark mode
+      const statusBarMeta = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
+      if (statusBarMeta) {
+        statusBarMeta.setAttribute('content', 'black-translucent');
+      }
+      
+      const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+      if (themeColorMeta) {
+        themeColorMeta.setAttribute('content', '#0c1117'); // Dark background color (hsl(222.2 84% 4.9%))
+      }
     } else {
       document.documentElement.classList.remove('dark');
       localStorage.setItem('theme', 'light');
+      
+      // Update iOS status bar style and theme color for light mode
+      const statusBarMeta = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
+      if (statusBarMeta) {
+        statusBarMeta.setAttribute('content', 'default');
+      }
+      
+      const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+      if (themeColorMeta) {
+        themeColorMeta.setAttribute('content', '#ffffff'); // Light background color
+      }
     }
   }, [isDarkMode]);
 

src/index.css

@@ -64,7 +64,7 @@
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --ring: 217.2 91.2% 59.8%;
   }
 }
 
@@ -99,8 +99,12 @@
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
   
-  /* Color transitions for theme switching */
-  * {
+  /* Color transitions for theme switching - exclude interactive elements */
+  body, div, section, article, aside, header, footer, nav, main,
+  h1, h2, h3, h4, h5, h6, p, span, blockquote,
+  ul, ol, li, dl, dt, dd,
+  table, thead, tbody, tfoot, tr, td, th,
+  form, fieldset, legend, label {
     transition: background-color 200ms ease-in-out, 
                 border-color 200ms ease-in-out,
                 color 200ms ease-in-out;
@@ -436,6 +440,12 @@
       -webkit-tap-highlight-color: transparent;
     }
     
+    /* Allow vertical scrolling in scroll containers */
+    .overflow-y-auto, [data-scroll-container] {
+      touch-action: pan-y;
+      -webkit-overflow-scrolling: touch;
+    }
+    
     /* Preserve checkbox visibility */
     input[type="checkbox"] {
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
@@ -549,16 +559,6 @@
       transform: inherit !important;
     }
     
-    /* Preserve backgrounds for containers and modals */
-    .fixed:hover,
-    .modal:hover,
-    .bg-white:hover,
-    .bg-gray-800:hover,
-    .bg-gray-900:hover,
-    [class*="bg-"]:hover {
-      background-color: revert !important;
-    }
-    
     /* Force buttons to be immediately clickable */
     button, [role="button"], .cursor-pointer {
       cursor: pointer !important;
@@ -736,4 +736,4 @@
     background-color: rgb(31 41 55) !important;
     color: rgb(243 244 246) !important;
   }
-}
+}

src/utils/api.js

@@ -0,0 +1,81 @@
+// Utility function for authenticated API calls
+export const authenticatedFetch = (url, options = {}) => {
+  const token = localStorage.getItem('auth-token');
+  
+  const defaultHeaders = {
+    'Content-Type': 'application/json',
+  };
+  
+  if (token) {
+    defaultHeaders['Authorization'] = `Bearer ${token}`;
+  }
+  
+  return fetch(url, {
+    ...options,
+    headers: {
+      ...defaultHeaders,
+      ...options.headers,
+    },
+  });
+};
+
+// API endpoints
+export const api = {
+  // Auth endpoints (no token required)
+  auth: {
+    status: () => fetch('/api/auth/status'),
+    login: (username, password) => fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    }),
+    register: (username, password) => fetch('/api/auth/register', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    }),
+    user: () => authenticatedFetch('/api/auth/user'),
+    logout: () => authenticatedFetch('/api/auth/logout', { method: 'POST' }),
+  },
+  
+  // Protected endpoints
+  config: () => authenticatedFetch('/api/config'),
+  projects: () => authenticatedFetch('/api/projects'),
+  sessions: (projectName, limit = 5, offset = 0) => 
+    authenticatedFetch(`/api/projects/${projectName}/sessions?limit=${limit}&offset=${offset}`),
+  sessionMessages: (projectName, sessionId) =>
+    authenticatedFetch(`/api/projects/${projectName}/sessions/${sessionId}/messages`),
+  renameProject: (projectName, displayName) =>
+    authenticatedFetch(`/api/projects/${projectName}/rename`, {
+      method: 'PUT',
+      body: JSON.stringify({ displayName }),
+    }),
+  deleteSession: (projectName, sessionId) =>
+    authenticatedFetch(`/api/projects/${projectName}/sessions/${sessionId}`, {
+      method: 'DELETE',
+    }),
+  deleteProject: (projectName) =>
+    authenticatedFetch(`/api/projects/${projectName}`, {
+      method: 'DELETE',
+    }),
+  createProject: (path) =>
+    authenticatedFetch('/api/projects/create', {
+      method: 'POST',
+      body: JSON.stringify({ path }),
+    }),
+  readFile: (projectName, filePath) =>
+    authenticatedFetch(`/api/projects/${projectName}/file?filePath=${encodeURIComponent(filePath)}`),
+  saveFile: (projectName, filePath, content) =>
+    authenticatedFetch(`/api/projects/${projectName}/file`, {
+      method: 'PUT',
+      body: JSON.stringify({ filePath, content }),
+    }),
+  getFiles: (projectName) =>
+    authenticatedFetch(`/api/projects/${projectName}/files`),
+  transcribe: (formData) =>
+    authenticatedFetch('/api/transcribe', {
+      method: 'POST',
+      body: formData,
+      headers: {}, // Let browser set Content-Type for FormData
+    }),
+};

src/utils/websocket.js

@@ -21,10 +21,21 @@ export function useWebSocket() {
 
   const connect = async () => {
     try {
+      // Get authentication token
+      const token = localStorage.getItem('auth-token');
+      if (!token) {
+        console.warn('No authentication token found for WebSocket connection');
+        return;
+      }
+      
       // Fetch server configuration to get the correct WebSocket URL
       let wsBaseUrl;
       try {
-        const configResponse = await fetch('/api/config');
+        const configResponse = await fetch('/api/config', {
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
         const config = await configResponse.json();
         wsBaseUrl = config.wsUrl;
         
@@ -44,7 +55,8 @@ export function useWebSocket() {
         wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
       }
       
-      const wsUrl = `${wsBaseUrl}/ws`;
+      // Include token in WebSocket URL as query parameter
+      const wsUrl = `${wsBaseUrl}/ws?token=${encodeURIComponent(token)}`;
       const websocket = new WebSocket(wsUrl);
 
       websocket.onopen = () => {

src/utils/whisper.js

@@ -1,3 +1,5 @@
+import { api } from './api';
+
 export async function transcribeWithWhisper(audioBlob, onStatusChange) {
     const formData = new FormData();
     const fileName = `recording_${Date.now()}.webm`;
@@ -14,10 +16,7 @@ export async function transcribeWithWhisper(audioBlob, onStatusChange) {
         onStatusChange('transcribing');
       }
   
-      const response = await fetch('/api/transcribe', {
-        method: 'POST',
-        body: formData,
-      });
+      const response = await api.transcribe(formData);
   
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));

vite.config.js

@@ -9,10 +9,14 @@ export default defineConfig(({ command, mode }) => {
   return {
     plugins: [react()],
     server: {
-      port: parseInt(env.VITE_PORT) || 3001,
+      port: parseInt(env.VITE_PORT) || 5173,
       proxy: {
-        '/api': `http://localhost:${env.PORT || 3002}`,
+        '/api': `http://localhost:${env.PORT || 3001}`,
         '/ws': {
+          target: `ws://localhost:${env.PORT || 3001}`,
+          ws: true
+        },
+        '/shell': {
           target: `ws://localhost:${env.PORT || 3002}`,
           ws: true
         }