Merge pull request #253 from siteboon/viper151-patch-1

Update App.jsx

package-lock.json

@@ -24,6 +24,7 @@
         "@uiw/react-codemirror": "^4.23.13",
         "@xterm/addon-clipboard": "^0.1.0",
         "@xterm/addon-fit": "^0.10.0",
+        "@xterm/addon-web-links": "^0.11.0",
         "@xterm/addon-webgl": "^0.18.0",
         "@xterm/xterm": "^5.5.0",
         "bcrypt": "^6.0.0",
@@ -3024,6 +3025,15 @@
         "@xterm/xterm": "^5.0.0"
       }
     },
+    "node_modules/@xterm/addon-web-links": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz",
+      "integrity": "sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
     "node_modules/@xterm/addon-webgl": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.18.0.tgz",

package.json

@@ -55,6 +55,7 @@
     "@uiw/react-codemirror": "^4.23.13",
     "@xterm/addon-clipboard": "^0.1.0",
     "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-web-links": "^0.11.0",
     "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "bcrypt": "^6.0.0",

public/logo.svg

@@ -1,9 +1,17 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="32" height="32" rx="8" fill="hsl(262.1 83.3% 57.8%)"/>
-  <path d="M8 9C8 8.44772 8.44772 8 9 8H23C23.5523 8 24 8.44772 24 9V18C24 18.5523 23.5523 19 23 19H12L8 23V9Z" 
-        stroke="white" 
-        stroke-width="2" 
-        stroke-linecap="round" 
-        stroke-linejoin="round" 
-        fill="none"/>
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 32 32"
+  fill="none"
+>
+  <rect width="32" height="32" rx="8" fill="hsl(221.2 83.2% 53.3%)"/>
+  <path
+    d="M8 9C8 8.44772 8.44772 8 9 8H23C23.5523 8 24 8.44772 24 9V18C24 18.5523 23.5523 19 23 19H12L8 23V9Z"
+    stroke="white"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    fill="none"
+  />
+</svg>

server/database/db.js

@@ -55,12 +55,40 @@ if (process.env.DATABASE_PATH) {
 console.log(c.dim('═'.repeat(60)));
 console.log('');
 
+const runMigrations = () => {
+  try {
+    const tableInfo = db.prepare("PRAGMA table_info(users)").all();
+    const columnNames = tableInfo.map(col => col.name);
+
+    if (!columnNames.includes('git_name')) {
+      console.log('Running migration: Adding git_name column');
+      db.exec('ALTER TABLE users ADD COLUMN git_name TEXT');
+    }
+
+    if (!columnNames.includes('git_email')) {
+      console.log('Running migration: Adding git_email column');
+      db.exec('ALTER TABLE users ADD COLUMN git_email TEXT');
+    }
+
+    if (!columnNames.includes('has_completed_onboarding')) {
+      console.log('Running migration: Adding has_completed_onboarding column');
+      db.exec('ALTER TABLE users ADD COLUMN has_completed_onboarding BOOLEAN DEFAULT 0');
+    }
+
+    console.log('Database migrations completed successfully');
+  } catch (error) {
+    console.error('Error running migrations:', error.message);
+    throw error;
+  }
+};
+
 // Initialize database with schema
 const initializeDatabase = async () => {
   try {
     const initSQL = fs.readFileSync(INIT_SQL_PATH, 'utf8');
     db.exec(initSQL);
     console.log('Database initialized successfully');
+    runMigrations();
   } catch (error) {
     console.error('Error initializing database:', error.message);
     throw error;
@@ -126,6 +154,42 @@ const userDb = {
     } catch (err) {
       throw err;
     }
+  },
+
+  updateGitConfig: (userId, gitName, gitEmail) => {
+    try {
+      const stmt = db.prepare('UPDATE users SET git_name = ?, git_email = ? WHERE id = ?');
+      stmt.run(gitName, gitEmail, userId);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  getGitConfig: (userId) => {
+    try {
+      const row = db.prepare('SELECT git_name, git_email FROM users WHERE id = ?').get(userId);
+      return row;
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  completeOnboarding: (userId) => {
+    try {
+      const stmt = db.prepare('UPDATE users SET has_completed_onboarding = 1 WHERE id = ?');
+      stmt.run(userId);
+    } catch (err) {
+      throw err;
+    }
+  },
+
+  hasCompletedOnboarding: (userId) => {
+    try {
+      const row = db.prepare('SELECT has_completed_onboarding FROM users WHERE id = ?').get(userId);
+      return row?.has_completed_onboarding === 1;
+    } catch (err) {
+      throw err;
+    }
   }
 };
 

server/database/init.sql

@@ -8,7 +8,10 @@ CREATE TABLE IF NOT EXISTS users (
     password_hash TEXT NOT NULL,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
     last_login DATETIME,
-    is_active BOOLEAN DEFAULT 1
+    is_active BOOLEAN DEFAULT 1,
+    git_name TEXT,
+    git_email TEXT,
+    has_completed_onboarding BOOLEAN DEFAULT 0
 );
 
 -- Indexes for performance

server/index.js

@@ -70,6 +70,8 @@ import commandsRoutes from './routes/commands.js';
 import settingsRoutes from './routes/settings.js';
 import agentRoutes from './routes/agent.js';
 import projectsRoutes from './routes/projects.js';
+import cliAuthRoutes from './routes/cli-auth.js';
+import userRoutes from './routes/user.js';
 import { initializeDatabase } from './database/db.js';
 import { validateApiKey, authenticateToken, authenticateWebSocket } from './middleware/auth.js';
 
@@ -164,6 +166,9 @@ async function setupProjectsWatcher() {
 const app = express();
 const server = http.createServer(app);
 
+const ptySessionsMap = new Map();
+const PTY_SESSION_TIMEOUT = 30 * 60 * 1000;
+
 // Single WebSocket server that handles both paths
 const wss = new WebSocketServer({
     server,
@@ -247,6 +252,12 @@ app.use('/api/commands', authenticateToken, commandsRoutes);
 // Settings API Routes (protected)
 app.use('/api/settings', authenticateToken, settingsRoutes);
 
+// CLI Authentication API Routes (protected)
+app.use('/api/cli', authenticateToken, cliAuthRoutes);
+
+// User API Routes (protected)
+app.use('/api/user', authenticateToken, userRoutes);
+
 // Agent API Routes (uses API key authentication)
 app.use('/api/agent', agentRoutes);
 
@@ -397,9 +408,12 @@ app.put('/api/projects/:projectName/rename', authenticateToken, async (req, res)
 app.delete('/api/projects/:projectName/sessions/:sessionId', authenticateToken, async (req, res) => {
     try {
         const { projectName, sessionId } = req.params;
+        console.log(`[API] Deleting session: ${sessionId} from project: ${projectName}`);
         await deleteSession(projectName, sessionId);
+        console.log(`[API] Session ${sessionId} deleted successfully`);
         res.json({ success: true });
     } catch (error) {
+        console.error(`[API] Error deleting session ${req.params.sessionId}:`, error);
         res.status(500).json({ error: error.message });
     }
 });
@@ -797,6 +811,8 @@ function handleChatConnection(ws) {
 function handleShellConnection(ws) {
     console.log('🐚 Shell client connected');
     let shellProcess = null;
+    let ptySessionKey = null;
+    let outputBuffer = [];
 
     ws.on('message', async (message) => {
         try {
@@ -804,7 +820,6 @@ function handleShellConnection(ws) {
             console.log('📨 Shell message received:', data.type);
 
             if (data.type === 'init') {
-                // Initialize shell with project path and session info
                 const projectPath = data.projectPath || process.cwd();
                 const sessionId = data.sessionId;
                 const hasSession = data.hasSession;
@@ -812,6 +827,35 @@ function handleShellConnection(ws) {
                 const initialCommand = data.initialCommand;
                 const isPlainShell = data.isPlainShell || (!!initialCommand && !hasSession) || provider === 'plain-shell';
 
+                ptySessionKey = `${projectPath}_${sessionId || 'default'}`;
+
+                const existingSession = ptySessionsMap.get(ptySessionKey);
+                if (existingSession) {
+                    console.log('♻️  Reconnecting to existing PTY session:', ptySessionKey);
+                    shellProcess = existingSession.pty;
+
+                    clearTimeout(existingSession.timeoutId);
+
+                    ws.send(JSON.stringify({
+                        type: 'output',
+                        data: `\x1b[36m[Reconnected to existing session]\x1b[0m\r\n`
+                    }));
+
+                    if (existingSession.buffer && existingSession.buffer.length > 0) {
+                        console.log(`📜 Sending ${existingSession.buffer.length} buffered messages`);
+                        existingSession.buffer.forEach(bufferedData => {
+                            ws.send(JSON.stringify({
+                                type: 'output',
+                                data: bufferedData
+                            }));
+                        });
+                    }
+
+                    existingSession.ws = ws;
+
+                    return;
+                }
+
                 console.log('[INFO] Starting shell in:', projectPath);
                 console.log('📋 Session info:', hasSession ? `Resume session ${sessionId}` : (isPlainShell ? 'Plain shell mode' : 'New session'));
                 console.log('🤖 Provider:', isPlainShell ? 'plain-shell' : provider);
@@ -885,10 +929,15 @@ function handleShellConnection(ws) {
                     const shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
                     const shellArgs = os.platform() === 'win32' ? ['-Command', shellCommand] : ['-c', shellCommand];
 
+                    // Use terminal dimensions from client if provided, otherwise use defaults
+                    const termCols = data.cols || 80;
+                    const termRows = data.rows || 24;
+                    console.log('📐 Using terminal dimensions:', termCols, 'x', termRows);
+
                     shellProcess = pty.spawn(shell, shellArgs, {
                         name: 'xterm-256color',
-                        cols: 80,
-                        rows: 24,
+                        cols: termCols,
+                        rows: termRows,
                         cwd: process.env.HOME || (os.platform() === 'win32' ? process.env.USERPROFILE : '/'),
                         env: {
                             ...process.env,
@@ -902,9 +951,28 @@ function handleShellConnection(ws) {
 
                     console.log('🟢 Shell process started with PTY, PID:', shellProcess.pid);
 
+                    ptySessionsMap.set(ptySessionKey, {
+                        pty: shellProcess,
+                        ws: ws,
+                        buffer: [],
+                        timeoutId: null,
+                        projectPath,
+                        sessionId
+                    });
+
                     // Handle data output
                     shellProcess.onData((data) => {
-                        if (ws.readyState === WebSocket.OPEN) {
+                        const session = ptySessionsMap.get(ptySessionKey);
+                        if (!session) return;
+
+                        if (session.buffer.length < 5000) {
+                            session.buffer.push(data);
+                        } else {
+                            session.buffer.shift();
+                            session.buffer.push(data);
+                        }
+
+                        if (session.ws && session.ws.readyState === WebSocket.OPEN) {
                             let outputData = data;
 
                             // Check for various URL opening patterns
@@ -928,7 +996,7 @@ function handleShellConnection(ws) {
                                     console.log('[DEBUG] Detected URL for opening:', url);
 
                                     // Send URL opening message to client
-                                    ws.send(JSON.stringify({
+                                    session.ws.send(JSON.stringify({
                                         type: 'url_open',
                                         url: url
                                     }));
@@ -941,7 +1009,7 @@ function handleShellConnection(ws) {
                             });
 
                             // Send regular output
-                            ws.send(JSON.stringify({
+                            session.ws.send(JSON.stringify({
                                 type: 'output',
                                 data: outputData
                             }));
@@ -951,12 +1019,17 @@ function handleShellConnection(ws) {
                     // Handle process exit
                     shellProcess.onExit((exitCode) => {
                         console.log('🔚 Shell process exited with code:', exitCode.exitCode, 'signal:', exitCode.signal);
-                        if (ws.readyState === WebSocket.OPEN) {
-                            ws.send(JSON.stringify({
+                        const session = ptySessionsMap.get(ptySessionKey);
+                        if (session && session.ws && session.ws.readyState === WebSocket.OPEN) {
+                            session.ws.send(JSON.stringify({
                                 type: 'output',
                                 data: `\r\n\x1b[33mProcess exited with code ${exitCode.exitCode}${exitCode.signal ? ` (${exitCode.signal})` : ''}\x1b[0m\r\n`
                             }));
                         }
+                        if (session && session.timeoutId) {
+                            clearTimeout(session.timeoutId);
+                        }
+                        ptySessionsMap.delete(ptySessionKey);
                         shellProcess = null;
                     });
 
@@ -999,9 +1072,21 @@ function handleShellConnection(ws) {
 
     ws.on('close', () => {
         console.log('🔌 Shell client disconnected');
-        if (shellProcess && shellProcess.kill) {
-            console.log('🔴 Killing shell process:', shellProcess.pid);
-            shellProcess.kill();
+
+        if (ptySessionKey) {
+            const session = ptySessionsMap.get(ptySessionKey);
+            if (session) {
+                console.log('⏳ PTY session kept alive, will timeout in 30 minutes:', ptySessionKey);
+                session.ws = null;
+
+                session.timeoutId = setTimeout(() => {
+                    console.log('⏰ PTY session timeout, killing process:', ptySessionKey);
+                    if (session.pty && session.pty.kill) {
+                        session.pty.kill();
+                    }
+                    ptySessionsMap.delete(ptySessionKey);
+                }, PTY_SESSION_TIMEOUT);
+            }
         }
     });
 

server/routes/cli-auth.js

@@ -0,0 +1,180 @@
+import express from 'express';
+import { spawn } from 'child_process';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+
+const router = express.Router();
+
+router.get('/claude/status', async (req, res) => {
+  try {
+    const credentialsResult = await checkClaudeCredentials();
+
+    if (credentialsResult.authenticated) {
+      return res.json({
+        authenticated: true,
+        email: credentialsResult.email || 'Authenticated',
+        method: 'credentials_file'
+      });
+    }
+
+    return res.json({
+      authenticated: false,
+      email: null,
+      error: credentialsResult.error || 'Not authenticated'
+    });
+
+  } catch (error) {
+    console.error('Error checking Claude auth status:', error);
+    res.status(500).json({
+      authenticated: false,
+      email: null,
+      error: error.message
+    });
+  }
+});
+
+router.get('/cursor/status', async (req, res) => {
+  try {
+    const result = await checkCursorStatus();
+
+    res.json({
+      authenticated: result.authenticated,
+      email: result.email,
+      error: result.error
+    });
+
+  } catch (error) {
+    console.error('Error checking Cursor auth status:', error);
+    res.status(500).json({
+      authenticated: false,
+      email: null,
+      error: error.message
+    });
+  }
+});
+
+async function checkClaudeCredentials() {
+  try {
+    const credPath = path.join(os.homedir(), '.claude', '.credentials.json');
+    const content = await fs.readFile(credPath, 'utf8');
+    const creds = JSON.parse(content);
+
+    const oauth = creds.claudeAiOauth;
+    if (oauth && oauth.accessToken) {
+      const isExpired = oauth.expiresAt && Date.now() >= oauth.expiresAt;
+
+      if (!isExpired) {
+        return {
+          authenticated: true,
+          email: creds.email || creds.user || null
+        };
+      }
+    }
+
+    return {
+      authenticated: false,
+      email: null
+    };
+  } catch (error) {
+    return {
+      authenticated: false,
+      email: null
+    };
+  }
+}
+
+function checkCursorStatus() {
+  return new Promise((resolve) => {
+    let processCompleted = false;
+
+    const timeout = setTimeout(() => {
+      if (!processCompleted) {
+        processCompleted = true;
+        if (childProcess) {
+          childProcess.kill();
+        }
+        resolve({
+          authenticated: false,
+          email: null,
+          error: 'Command timeout'
+        });
+      }
+    }, 5000);
+
+    let childProcess;
+    try {
+      childProcess = spawn('cursor-agent', ['status']);
+    } catch (err) {
+      clearTimeout(timeout);
+      processCompleted = true;
+      resolve({
+        authenticated: false,
+        email: null,
+        error: 'Cursor CLI not found or not installed'
+      });
+      return;
+    }
+
+    let stdout = '';
+    let stderr = '';
+
+    childProcess.stdout.on('data', (data) => {
+      stdout += data.toString();
+    });
+
+    childProcess.stderr.on('data', (data) => {
+      stderr += data.toString();
+    });
+
+    childProcess.on('close', (code) => {
+      if (processCompleted) return;
+      processCompleted = true;
+      clearTimeout(timeout);
+
+      if (code === 0) {
+        const emailMatch = stdout.match(/Logged in as ([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/i);
+
+        if (emailMatch) {
+          resolve({
+            authenticated: true,
+            email: emailMatch[1],
+            output: stdout
+          });
+        } else if (stdout.includes('Logged in')) {
+          resolve({
+            authenticated: true,
+            email: 'Logged in',
+            output: stdout
+          });
+        } else {
+          resolve({
+            authenticated: false,
+            email: null,
+            error: 'Not logged in'
+          });
+        }
+      } else {
+        resolve({
+          authenticated: false,
+          email: null,
+          error: stderr || 'Not logged in'
+        });
+      }
+    });
+
+    childProcess.on('error', (err) => {
+      if (processCompleted) return;
+      processCompleted = true;
+      clearTimeout(timeout);
+
+      resolve({
+        authenticated: false,
+        email: null,
+        error: 'Cursor CLI not found or not installed'
+      });
+    });
+  });
+}
+
+export default router;

server/routes/git.js

@@ -80,34 +80,47 @@ async function validateGitRepository(projectPath) {
 // Get git status for a project
 router.get('/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);
-    
+
     // Validate git repository
     await validateGitRepository(projectPath);
 
-    // Get current branch
-    const { stdout: branch } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
-    
+    // Get current branch - handle case where there are no commits yet
+    let branch = 'main';
+    let hasCommits = true;
+    try {
+      const { stdout: branchOutput } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: projectPath });
+      branch = branchOutput.trim();
+    } catch (error) {
+      // No HEAD exists - repository has no commits yet
+      if (error.message.includes('unknown revision') || error.message.includes('ambiguous argument')) {
+        hasCommits = false;
+        branch = 'main';
+      } else {
+        throw error;
+      }
+    }
+
     // Get git status
     const { stdout: statusOutput } = await execAsync('git status --porcelain', { cwd: projectPath });
-    
+
     const modified = [];
     const added = [];
     const deleted = [];
     const untracked = [];
-    
+
     statusOutput.split('\n').forEach(line => {
       if (!line.trim()) return;
-      
+
       const status = line.substring(0, 2);
       const file = line.substring(3);
-      
+
       if (status === 'M ' || status === ' M' || status === 'MM') {
         modified.push(file);
       } else if (status === 'A ' || status === 'AM') {
@@ -118,9 +131,10 @@ router.get('/status', async (req, res) => {
         untracked.push(file);
       }
     });
-    
+
     res.json({
-      branch: branch.trim(),
+      branch,
+      hasCommits,
       modified,
       added,
       deleted,
@@ -128,9 +142,9 @@ router.get('/status', async (req, res) => {
     });
   } catch (error) {
     console.error('Git status error:', error);
-    res.json({ 
-      error: error.message.includes('not a git repository') || error.message.includes('Project directory is not a git repository') 
-        ? 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
@@ -161,10 +175,18 @@ router.get('/diff', async (req, res) => {
     let diff;
     if (isUntracked) {
       // For untracked files, show the entire file content as additions
-      const fileContent = await fs.readFile(path.join(projectPath, file), 'utf-8');
-      const lines = fileContent.split('\n');
-      diff = `--- /dev/null\n+++ b/${file}\n@@ -0,0 +1,${lines.length} @@\n` +
-             lines.map(line => `+${line}`).join('\n');
+      const filePath = path.join(projectPath, file);
+      const stats = await fs.stat(filePath);
+
+      if (stats.isDirectory()) {
+        // For directories, show a simple message
+        diff = `Directory: ${file}\n(Cannot show diff for directories)`;
+      } else {
+        const fileContent = await fs.readFile(filePath, 'utf-8');
+        const lines = fileContent.split('\n');
+        diff = `--- /dev/null\n+++ b/${file}\n@@ -0,0 +1,${lines.length} @@\n` +
+               lines.map(line => `+${line}`).join('\n');
+      }
     } else if (isDeleted) {
       // For deleted files, show the entire file content from HEAD as deletions
       const { stdout: fileContent } = await execAsync(`git show HEAD:"${file}"`, { cwd: projectPath });
@@ -222,7 +244,15 @@ router.get('/file-with-diff', async (req, res) => {
       currentContent = headContent; // Show the deleted content in editor
     } else {
       // Get current file content
-      currentContent = await fs.readFile(path.join(projectPath, file), 'utf-8');
+      const filePath = path.join(projectPath, file);
+      const stats = await fs.stat(filePath);
+
+      if (stats.isDirectory()) {
+        // Cannot show content for directories
+        return res.status(400).json({ error: 'Cannot show diff for directories' });
+      }
+
+      currentContent = await fs.readFile(filePath, 'utf-8');
 
       if (!isUntracked) {
         // Get the old content from HEAD for tracked files
@@ -248,6 +278,50 @@ router.get('/file-with-diff', async (req, res) => {
   }
 });
 
+// Create initial commit
+router.post('/initial-commit', 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);
+
+    // Validate git repository
+    await validateGitRepository(projectPath);
+
+    // Check if there are already commits
+    try {
+      await execAsync('git rev-parse HEAD', { cwd: projectPath });
+      return res.status(400).json({ error: 'Repository already has commits. Use regular commit instead.' });
+    } catch (error) {
+      // No HEAD - this is good, we can create initial commit
+    }
+
+    // Add all files
+    await execAsync('git add .', { cwd: projectPath });
+
+    // Create initial commit
+    const { stdout } = await execAsync('git commit -m "Initial commit"', { cwd: projectPath });
+
+    res.json({ success: true, output: stdout, message: 'Initial commit created successfully' });
+  } catch (error) {
+    console.error('Git initial commit error:', error);
+
+    // Handle the case where there's nothing to commit
+    if (error.message.includes('nothing to commit')) {
+      return res.status(400).json({
+        error: 'Nothing to commit',
+        details: 'No files found in the repository. Add some files first.'
+      });
+    }
+
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // Commit changes
 router.post('/commit', async (req, res) => {
   const { project, message, files } = req.body;
@@ -474,8 +548,14 @@ router.post('/generate-commit-message', async (req, res) => {
       for (const file of files) {
         try {
           const filePath = path.join(projectPath, file);
-          const content = await fs.readFile(filePath, 'utf-8');
-          diffContext += `\n--- ${file} (new file) ---\n${content.substring(0, 1000)}\n`;
+          const stats = await fs.stat(filePath);
+
+          if (!stats.isDirectory()) {
+            const content = await fs.readFile(filePath, 'utf-8');
+            diffContext += `\n--- ${file} (new file) ---\n${content.substring(0, 1000)}\n`;
+          } else {
+            diffContext += `\n--- ${file} (new directory) ---\n`;
+          }
         } catch (error) {
           console.error(`Error reading file ${file}:`, error);
         }
@@ -976,10 +1056,17 @@ router.post('/discard', async (req, res) => {
     }
 
     const status = statusOutput.substring(0, 2);
-    
+
     if (status === '??') {
-      // Untracked file - delete it
-      await fs.unlink(path.join(projectPath, file));
+      // Untracked file or directory - delete it
+      const filePath = path.join(projectPath, file);
+      const stats = await fs.stat(filePath);
+
+      if (stats.isDirectory()) {
+        await fs.rm(filePath, { recursive: true, force: true });
+      } else {
+        await fs.unlink(filePath);
+      }
     } else if (status.includes('M') || status.includes('D')) {
       // Modified or deleted file - restore from HEAD
       await execAsync(`git restore "${file}"`, { cwd: projectPath });
@@ -1020,10 +1107,18 @@ router.post('/delete-untracked', async (req, res) => {
       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` });
+    // Delete the untracked file or directory
+    const filePath = path.join(projectPath, file);
+    const stats = await fs.stat(filePath);
+
+    if (stats.isDirectory()) {
+      // Use rm with recursive option for directories
+      await fs.rm(filePath, { recursive: true, force: true });
+      res.json({ success: true, message: `Untracked directory ${file} deleted successfully` });
+    } else {
+      await fs.unlink(filePath);
+      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 });

server/routes/taskmaster.js

@@ -331,15 +331,6 @@ router.get('/detect/:projectName', async (req, res) => {
             timestamp: new Date().toISOString()
         };
 
-        // Broadcast TaskMaster project update via WebSocket
-        if (req.app.locals.wss) {
-            broadcastTaskMasterProjectUpdate(
-                req.app.locals.wss, 
-                projectName, 
-                taskMasterResult
-            );
-        }
-
         res.json(responseData);
 
     } catch (error) {
@@ -537,7 +528,8 @@ router.get('/next/:projectName', async (req, res) => {
             console.warn('Failed to execute task-master CLI:', cliError.message);
             
             // Fallback to loading tasks and finding next one locally
-            const tasksResponse = await fetch(`${req.protocol}://${req.get('host')}/api/taskmaster/tasks/${encodeURIComponent(projectName)}`, {
+            // Use localhost to bypass proxy for internal server-to-server calls
+            const tasksResponse = await fetch(`http://localhost:${process.env.PORT || 3001}/api/taskmaster/tasks/${encodeURIComponent(projectName)}`, {
                 headers: {
                     'Authorization': req.headers.authorization
                 }

server/routes/user.js

@@ -0,0 +1,106 @@
+import express from 'express';
+import { userDb } from '../database/db.js';
+import { authenticateToken } from '../middleware/auth.js';
+import { getSystemGitConfig } from '../utils/gitConfig.js';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+const router = express.Router();
+
+router.get('/git-config', authenticateToken, async (req, res) => {
+  try {
+    const userId = req.user.id;
+    let gitConfig = userDb.getGitConfig(userId);
+
+    // If database is empty, try to get from system git config
+    if (!gitConfig || (!gitConfig.git_name && !gitConfig.git_email)) {
+      const systemConfig = await getSystemGitConfig();
+
+      // If system has values, save them to database for this user
+      if (systemConfig.git_name || systemConfig.git_email) {
+        userDb.updateGitConfig(userId, systemConfig.git_name, systemConfig.git_email);
+        gitConfig = systemConfig;
+        console.log(`Auto-populated git config from system for user ${userId}: ${systemConfig.git_name} <${systemConfig.git_email}>`);
+      }
+    }
+
+    res.json({
+      success: true,
+      gitName: gitConfig?.git_name || null,
+      gitEmail: gitConfig?.git_email || null
+    });
+  } catch (error) {
+    console.error('Error getting git config:', error);
+    res.status(500).json({ error: 'Failed to get git configuration' });
+  }
+});
+
+// Apply git config globally via git config --global
+router.post('/git-config', authenticateToken, async (req, res) => {
+  try {
+    const userId = req.user.id;
+    const { gitName, gitEmail } = req.body;
+
+    if (!gitName || !gitEmail) {
+      return res.status(400).json({ error: 'Git name and email are required' });
+    }
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(gitEmail)) {
+      return res.status(400).json({ error: 'Invalid email format' });
+    }
+
+    userDb.updateGitConfig(userId, gitName, gitEmail);
+
+    try {
+      await execAsync(`git config --global user.name "${gitName.replace(/"/g, '\\"')}"`);
+      await execAsync(`git config --global user.email "${gitEmail.replace(/"/g, '\\"')}"`);
+      console.log(`Applied git config globally: ${gitName} <${gitEmail}>`);
+    } catch (gitError) {
+      console.error('Error applying git config:', gitError);
+    }
+
+    res.json({
+      success: true,
+      gitName,
+      gitEmail
+    });
+  } catch (error) {
+    console.error('Error updating git config:', error);
+    res.status(500).json({ error: 'Failed to update git configuration' });
+  }
+});
+
+router.post('/complete-onboarding', authenticateToken, async (req, res) => {
+  try {
+    const userId = req.user.id;
+    userDb.completeOnboarding(userId);
+
+    res.json({
+      success: true,
+      message: 'Onboarding completed successfully'
+    });
+  } catch (error) {
+    console.error('Error completing onboarding:', error);
+    res.status(500).json({ error: 'Failed to complete onboarding' });
+  }
+});
+
+router.get('/onboarding-status', authenticateToken, async (req, res) => {
+  try {
+    const userId = req.user.id;
+    const hasCompleted = userDb.hasCompletedOnboarding(userId);
+
+    res.json({
+      success: true,
+      hasCompletedOnboarding: hasCompleted
+    });
+  } catch (error) {
+    console.error('Error checking onboarding status:', error);
+    res.status(500).json({ error: 'Failed to check onboarding status' });
+  }
+});
+
+export default router;

server/utils/gitConfig.js

@@ -0,0 +1,24 @@
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+/**
+ * Read git configuration from system's global git config
+ * @returns {Promise<{git_name: string|null, git_email: string|null}>}
+ */
+export async function getSystemGitConfig() {
+  try {
+    const [nameResult, emailResult] = await Promise.all([
+      execAsync('git config --global user.name').catch(() => ({ stdout: '' })),
+      execAsync('git config --global user.email').catch(() => ({ stdout: '' }))
+    ]);
+
+    return {
+      git_name: nameResult.stdout.trim() || null,
+      git_email: emailResult.stdout.trim() || null
+    };
+  } catch (error) {
+    return { git_name: null, git_email: null };
+  }
+}

slash-command-fix-progress.md

@@ -1,151 +0,0 @@
-# Slash Command Execution Fix - Progress Report
-
-## Issue
-Slash commands weren't executing when selected from the command menu. After typing a command like `/tm:list` and selecting it from the menu, nothing would happen - the page would stay on "Choose Your AI Assistant" screen.
-
-## Root Cause
-The `handleCustomCommand` function was trying to call `handleSubmit` via a ref, but the ref wasn't being set properly. Originally attempted to set the ref inside `handleSubmit` itself, which meant it was only set AFTER the first submit - too late for command execution.
-
-## Solution Implemented
-1. Converted `handleSubmit` to use `useCallback` with proper dependencies
-2. Added a `useEffect` hook that runs after `handleSubmit` is defined to store it in `handleSubmitRef`
-3. Now `handleCustomCommand` can access `handleSubmit` via the ref and call it with a fake event
-
-## Code Changes
-
-### File: src/components/ChatInterface.jsx
-
-**Added ref declaration (around line 1534):**
-```javascript
-// Ref to store handleSubmit so we can call it from handleCustomCommand
-const handleSubmitRef = useRef(null);
-```
-
-**Modified handleCustomCommand (around line 1555):**
-```javascript
-// Set the input to the command content
-setInput(content);
-
-// Wait for state to update, then directly call handleSubmit
-setTimeout(() => {
-  if (handleSubmitRef.current) {
-    // Create a fake event to pass to handleSubmit
-    const fakeEvent = { preventDefault: () => {} };
-    handleSubmitRef.current(fakeEvent);
-  }
-}, 50);
-```
-
-**Converted handleSubmit to useCallback (line 3292):**
-```javascript
-const handleSubmit = useCallback(async (e) => {
-  e.preventDefault();
-  if (!input.trim() || isLoading || !selectedProject) return;
-  // ... rest of function
-}, [input, isLoading, selectedProject, attachedImages, currentSessionId, selectedSession, provider, permissionMode, onSessionActive, cursorModel, sendMessage, setInput, setAttachedImages, setUploadingImages, setImageErrors, setIsTextareaExpanded, textareaRef, setChatMessages, setIsLoading, setCanAbortSession, setClaudeStatus, setIsUserScrolledUp, scrollToBottom]);
-```
-
-**Added useEffect to store ref (line 3437):**
-```javascript
-// Store handleSubmit in ref so handleCustomCommand can access it
-useEffect(() => {
-  handleSubmitRef.current = handleSubmit;
-}, [handleSubmit]);
-```
-
-## Fixed Issues
-
-### 1. Commands Button Visibility ✅ FIXED
-- **Problem**: Button was not showing in active chat sessions with provider selected
-- **Root Cause**: Button was positioned at `right-14 sm:right-16` which overlapped with the clear button at `sm:right-28`
-- **Solution**: Changed button position to `right-14 sm:right-36` to place it left of the clear button
-- **File**: src/components/ChatInterface.jsx:4255
-- **Status**: Fixed in build dist/assets/index-CWRjcZ7A.js
-
-### 2. Slash Command Menu Positioning ✅ FIXED
-- **Problem**: Mobile positioning was inconsistent - used wrong ref for bottom calculation
-- **Root Cause**: Position calculation used `inputContainerRef` (permission mode selector) instead of `textareaRef` (actual input)
-- **Solution**:
-  - Changed bottom calculation to use `textareaRef` instead of `inputContainerRef`
-  - Updated formula: `window.innerHeight - textareaRef.getBoundingClientRect().top + 8`
-  - Removed extra `+ 8` in CommandMenu.jsx since spacing is already in the calculation
-  - Added explicit `maxHeight: '300px'` to desktop positioning for consistency
-  - Mobile maxHeight now uses `min(50vh, 300px)` for better consistency
-- **Files Modified**:
-  - src/components/ChatInterface.jsx:4132-4134 - Fixed bottom position calculation
-  - src/components/CommandMenu.jsx:30-46 - Improved positioning logic and max heights
-
-## Related Issues Found (Not Fixed Yet)
-
-### 3. Service Worker Caching Issue
-- After building, the service worker caches old build files
-- Requires manual unregistration of service worker on first load after build
-- Causes 404 errors for old asset filenames (e.g., index-n_2V3_vw.js when new build has index-Wp3pq386.js)
-- Need to implement proper cache busting or service worker update strategy
-
-### 4. Chat Screen Jumping
-- Screen jumps/scrolls when Task Master widget appears/disappears
-- Likely due to layout shifts from the task widget
-
-## Testing Status
-- ✅ Slash command execution fix implemented and built
-- ✅ Commands button visibility fix implemented and built
-- ⏳ Not yet tested end-to-end due to service worker caching issues requiring manual cache clearing
-- Need to test:
-  1. Verify commands button is now visible to the left of clear button
-  2. Click commands button to open menu
-  3. Type `/tm:list` in chat input
-  4. Select command from menu
-  5. Verify command content loads and sends to Claude
-  6. Verify session is created if none exists
-
-## Next Steps
-1. Test the slash command button visibility fix
-2. Test the slash command execution fix end-to-end
-3. Fix service worker caching to enable easier testing
-4. Fix chat screen jumping issue
-
-## Build Info
-- Latest build: dist/assets/index-C5zDTo8x.js (657.55 kB)
-- Commands button positioned at `right-14 sm:right-36` (mobile/desktop)
-- Menu positioning uses `textareaRef` for accurate placement
-- Mobile menu: `bottom` calculated from textarea top + 8px spacing
-- Desktop menu: `top` calculated with 316px offset, max 300px height
-- Server running on port 3001
-- Using Claude Agents SDK for Claude integration
-
-## Implementation Details
-
-### Mobile Positioning
-```javascript
-// ChatInterface.jsx - Position calculation
-bottom: textareaRef.current
-  ? window.innerHeight - textareaRef.current.getBoundingClientRect().top + 8
-  : 90
-
-// CommandMenu.jsx - Mobile layout
-{
-  position: 'fixed',
-  bottom: `${inputBottom}px`,
-  left: '16px',
-  right: '16px',
-  maxHeight: 'min(50vh, 300px)'
-}
-```
-
-### Desktop Positioning
-```javascript
-// ChatInterface.jsx - Position calculation
-top: textareaRef.current
-  ? Math.max(16, textareaRef.current.getBoundingClientRect().top - 316)
-  : 0
-
-// CommandMenu.jsx - Desktop layout
-{
-  position: 'fixed',
-  top: `${calculatedTop}px`,
-  left: `${position.left}px`,
-  width: 'min(400px, calc(100vw - 32px))',
-  maxHeight: '300px'
-}
-```

src/App.jsx

@@ -89,7 +89,8 @@ function AppContent() {
                           window.navigator.standalone ||
                           document.referrer.includes('android-app://');
       setIsPWA(isStandalone);
-      
+        document.addEventListener('touchstart', {});
+
       // Add class to html and body for CSS targeting
       if (isStandalone) {
         document.documentElement.classList.add('pwa-mode');
@@ -966,4 +967,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/components/ApiKeysSettings.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github } from 'lucide-react';
+import { authenticatedFetch } from '../utils/api';
 
 function ApiKeysSettings() {
   const [apiKeys, setApiKeys] = useState([]);
@@ -23,19 +24,14 @@ function ApiKeysSettings() {
   const fetchData = async () => {
     try {
       setLoading(true);
-      const token = localStorage.getItem('auth-token');
 
       // Fetch API keys
-      const apiKeysRes = await fetch('/api/settings/api-keys', {
-        headers: { 'Authorization': `Bearer ${token}` }
-      });
+      const apiKeysRes = await authenticatedFetch('/api/settings/api-keys');
       const apiKeysData = await apiKeysRes.json();
       setApiKeys(apiKeysData.apiKeys || []);
 
       // Fetch GitHub tokens
-      const githubRes = await fetch('/api/settings/credentials?type=github_token', {
-        headers: { 'Authorization': `Bearer ${token}` }
-      });
+      const githubRes = await authenticatedFetch('/api/settings/credentials?type=github_token');
       const githubData = await githubRes.json();
       setGithubTokens(githubData.credentials || []);
     } catch (error) {
@@ -49,13 +45,8 @@ function ApiKeysSettings() {
     if (!newKeyName.trim()) return;
 
     try {
-      const token = localStorage.getItem('auth-token');
-      const res = await fetch('/api/settings/api-keys', {
+      const res = await authenticatedFetch('/api/settings/api-keys', {
         method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({ keyName: newKeyName })
       });
 
@@ -75,10 +66,8 @@ function ApiKeysSettings() {
     if (!confirm('Are you sure you want to delete this API key?')) return;
 
     try {
-      const token = localStorage.getItem('auth-token');
-      await fetch(`/api/settings/api-keys/${keyId}`, {
-        method: 'DELETE',
-        headers: { 'Authorization': `Bearer ${token}` }
+      await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
+        method: 'DELETE'
       });
       fetchData();
     } catch (error) {
@@ -88,13 +77,8 @@ function ApiKeysSettings() {
 
   const toggleApiKey = async (keyId, isActive) => {
     try {
-      const token = localStorage.getItem('auth-token');
-      await fetch(`/api/settings/api-keys/${keyId}/toggle`, {
+      await authenticatedFetch(`/api/settings/api-keys/${keyId}/toggle`, {
         method: 'PATCH',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({ isActive: !isActive })
       });
       fetchData();
@@ -107,13 +91,8 @@ function ApiKeysSettings() {
     if (!newTokenName.trim() || !newGithubToken.trim()) return;
 
     try {
-      const token = localStorage.getItem('auth-token');
-      const res = await fetch('/api/settings/credentials', {
+      const res = await authenticatedFetch('/api/settings/credentials', {
         method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({
           credentialName: newTokenName,
           credentialType: 'github_token',
@@ -137,10 +116,8 @@ function ApiKeysSettings() {
     if (!confirm('Are you sure you want to delete this GitHub token?')) return;
 
     try {
-      const token = localStorage.getItem('auth-token');
-      await fetch(`/api/settings/credentials/${tokenId}`, {
-        method: 'DELETE',
-        headers: { 'Authorization': `Bearer ${token}` }
+      await authenticatedFetch(`/api/settings/credentials/${tokenId}`, {
+        method: 'DELETE'
       });
       fetchData();
     } catch (error) {
@@ -150,13 +127,8 @@ function ApiKeysSettings() {
 
   const toggleGithubToken = async (tokenId, isActive) => {
     try {
-      const token = localStorage.getItem('auth-token');
-      await fetch(`/api/settings/credentials/${tokenId}/toggle`, {
+      await authenticatedFetch(`/api/settings/credentials/${tokenId}/toggle`, {
         method: 'PATCH',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({ isActive: !isActive })
       });
       fetchData();

src/components/ChatInterface.jsx

@@ -1728,11 +1728,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   // Load Cursor default model from config
   useEffect(() => {
     if (provider === 'cursor') {
-      fetch('/api/cursor/config', {
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('auth-token')}`
-        }
-      })
+      authenticatedFetch('/api/cursor/config')
       .then(res => res.json())
       .then(data => {
         if (data.success && data.config?.model?.modelId) {
@@ -3752,15 +3748,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
       });
       
       try {
-        const token = safeLocalStorage.getItem('auth-token');
-        const headers = {};
-        if (token) {
-          headers['Authorization'] = `Bearer ${token}`;
-        }
-        
-        const response = await fetch(`/api/projects/${selectedProject.name}/upload-images`, {
+        const response = await authenticatedFetch(`/api/projects/${selectedProject.name}/upload-images`, {
           method: 'POST',
-          headers: headers,
+          headers: {}, // Let browser set Content-Type for FormData
           body: formData
         });
         

src/components/CredentialsSettings.jsx

@@ -4,6 +4,7 @@ import { Input } from './ui/input';
 import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github, ExternalLink } from 'lucide-react';
 import { useVersionCheck } from '../hooks/useVersionCheck';
 import { version } from '../../package.json';
+import { authenticatedFetch } from '../utils/api';
 
 function CredentialsSettings() {
   const [apiKeys, setApiKeys] = useState([]);
@@ -29,19 +30,14 @@ function CredentialsSettings() {
   const fetchData = async () => {
     try {
       setLoading(true);
-      const token = localStorage.getItem('auth-token');
 
       // Fetch API keys
-      const apiKeysRes = await fetch('/api/settings/api-keys', {
-        headers: { 'Authorization': `Bearer ${token}` }
-      });
+      const apiKeysRes = await authenticatedFetch('/api/settings/api-keys');
       const apiKeysData = await apiKeysRes.json();
       setApiKeys(apiKeysData.apiKeys || []);
 
       // Fetch GitHub credentials only
-      const credentialsRes = await fetch('/api/settings/credentials?type=github_token', {
-        headers: { 'Authorization': `Bearer ${token}` }
-      });
+      const credentialsRes = await authenticatedFetch('/api/settings/credentials?type=github_token');
       const credentialsData = await credentialsRes.json();
       setGithubCredentials(credentialsData.credentials || []);
     } catch (error) {
@@ -55,13 +51,8 @@ function CredentialsSettings() {
     if (!newKeyName.trim()) return;
 
     try {
-      const token = localStorage.getItem('auth-token');
-      const res = await fetch('/api/settings/api-keys', {
+      const res = await authenticatedFetch('/api/settings/api-keys', {
         method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({ keyName: newKeyName })
       });
 
@@ -81,10 +72,8 @@ function CredentialsSettings() {
     if (!confirm('Are you sure you want to delete this API key?')) return;
 
     try {
-      const token = localStorage.getItem('auth-token');
-      await fetch(`/api/settings/api-keys/${keyId}`, {
-        method: 'DELETE',
-        headers: { 'Authorization': `Bearer ${token}` }
+      await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
+        method: 'DELETE'
       });
       fetchData();
     } catch (error) {
@@ -94,13 +83,8 @@ function CredentialsSettings() {
 
   const toggleApiKey = async (keyId, isActive) => {
     try {
-      const token = localStorage.getItem('auth-token');
-      await fetch(`/api/settings/api-keys/${keyId}/toggle`, {
+      await authenticatedFetch(`/api/settings/api-keys/${keyId}/toggle`, {
         method: 'PATCH',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({ isActive: !isActive })
       });
       fetchData();
@@ -113,13 +97,8 @@ function CredentialsSettings() {
     if (!newGithubName.trim() || !newGithubToken.trim()) return;
 
     try {
-      const token = localStorage.getItem('auth-token');
-      const res = await fetch('/api/settings/credentials', {
+      const res = await authenticatedFetch('/api/settings/credentials', {
         method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({
           credentialName: newGithubName,
           credentialType: 'github_token',
@@ -145,10 +124,8 @@ function CredentialsSettings() {
     if (!confirm('Are you sure you want to delete this GitHub token?')) return;
 
     try {
-      const token = localStorage.getItem('auth-token');
-      await fetch(`/api/settings/credentials/${credentialId}`, {
-        method: 'DELETE',
-        headers: { 'Authorization': `Bearer ${token}` }
+      await authenticatedFetch(`/api/settings/credentials/${credentialId}`, {
+        method: 'DELETE'
       });
       fetchData();
     } catch (error) {
@@ -158,13 +135,8 @@ function CredentialsSettings() {
 
   const toggleGithubCredential = async (credentialId, isActive) => {
     try {
-      const token = localStorage.getItem('auth-token');
-      await fetch(`/api/settings/credentials/${credentialId}/toggle`, {
+      await authenticatedFetch(`/api/settings/credentials/${credentialId}/toggle`, {
         method: 'PATCH',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({ isActive: !isActive })
       });
       fetchData();

src/components/GitPanel.jsx

@@ -32,6 +32,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
   const [isPublishing, setIsPublishing] = useState(false);
   const [isCommitAreaCollapsed, setIsCommitAreaCollapsed] = useState(isMobile); // Collapsed by default on mobile
   const [confirmAction, setConfirmAction] = useState(null); // { type: 'discard|commit|pull|push', file?: string, message?: string }
+  const [isCreatingInitialCommit, setIsCreatingInitialCommit] = useState(false);
   const textareaRef = useRef(null);
   const dropdownRef = useRef(null);
 
@@ -547,7 +548,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
 
   const handleCommit = async () => {
     if (!commitMessage.trim() || selectedFiles.size === 0) return;
-    
+
     setIsCommitting(true);
     try {
       const response = await authenticatedFetch('/api/git/commit', {
@@ -559,7 +560,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
           files: Array.from(selectedFiles)
         })
       });
-      
+
       const data = await response.json();
       if (data.success) {
         // Reset state after successful commit
@@ -577,6 +578,32 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
     }
   };
 
+  const createInitialCommit = async () => {
+    setIsCreatingInitialCommit(true);
+    try {
+      const response = await authenticatedFetch('/api/git/initial-commit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          project: selectedProject.name
+        })
+      });
+
+      const data = await response.json();
+      if (data.success) {
+        fetchGitStatus();
+        fetchRemoteStatus();
+      } else {
+        console.error('Initial commit failed:', data.error);
+        alert(data.error || 'Failed to create initial commit');
+      }
+    } catch (error) {
+      console.error('Error creating initial commit:', error);
+      alert('Failed to create initial commit');
+    } finally {
+      setIsCreatingInitialCommit(false);
+    }
+  };
 
   const getStatusLabel = (status) => {
     switch (status) {
@@ -1161,6 +1188,31 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
             <div className="flex items-center justify-center h-32">
               <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
             </div>
+          ) : gitStatus?.hasCommits === false ? (
+            <div className="flex flex-col items-center justify-center p-8 text-center">
+              <GitBranch className="w-16 h-16 mb-4 opacity-30 text-gray-400 dark:text-gray-500" />
+              <h3 className="text-lg font-medium mb-2 text-gray-900 dark:text-white">No commits yet</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-6 max-w-md">
+                This repository doesn't have any commits yet. Create your first commit to start tracking changes.
+              </p>
+              <button
+                onClick={createInitialCommit}
+                disabled={isCreatingInitialCommit}
+                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+              >
+                {isCreatingInitialCommit ? (
+                  <>
+                    <RefreshCw className="w-4 h-4 animate-spin" />
+                    <span>Creating Initial Commit...</span>
+                  </>
+                ) : (
+                  <>
+                    <GitCommit className="w-4 h-4" />
+                    <span>Create Initial Commit</span>
+                  </>
+                )}
+              </button>
+            </div>
           ) : !gitStatus || (!gitStatus.modified?.length && !gitStatus.added?.length && !gitStatus.deleted?.length && !gitStatus.untracked?.length) ? (
             <div className="flex flex-col items-center justify-center h-32 text-gray-500 dark:text-gray-400">
               <GitCommit className="w-12 h-12 mb-2 opacity-50" />

src/components/GitSettings.jsx

@@ -0,0 +1,129 @@
+import { useState, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { GitBranch, Check } from 'lucide-react';
+import { authenticatedFetch } from '../utils/api';
+
+function GitSettings() {
+  const [gitName, setGitName] = useState('');
+  const [gitEmail, setGitEmail] = useState('');
+  const [gitConfigLoading, setGitConfigLoading] = useState(false);
+  const [gitConfigSaving, setGitConfigSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState(null);
+
+  useEffect(() => {
+    loadGitConfig();
+  }, []);
+
+  const loadGitConfig = async () => {
+    try {
+      setGitConfigLoading(true);
+      const response = await authenticatedFetch('/api/user/git-config');
+      if (response.ok) {
+        const data = await response.json();
+        setGitName(data.gitName || '');
+        setGitEmail(data.gitEmail || '');
+      }
+    } catch (error) {
+      console.error('Error loading git config:', error);
+    } finally {
+      setGitConfigLoading(false);
+    }
+  };
+
+  const saveGitConfig = async () => {
+    try {
+      setGitConfigSaving(true);
+      const response = await authenticatedFetch('/api/user/git-config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ gitName, gitEmail })
+      });
+
+      if (response.ok) {
+        setSaveStatus('success');
+        setTimeout(() => setSaveStatus(null), 3000);
+      } else {
+        const data = await response.json();
+        setSaveStatus('error');
+        console.error('Failed to save git config:', data.error);
+      }
+    } catch (error) {
+      console.error('Error saving git config:', error);
+      setSaveStatus('error');
+    } finally {
+      setGitConfigSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <div className="flex items-center gap-2 mb-4">
+          <GitBranch className="h-5 w-5" />
+          <h3 className="text-lg font-semibold">Git Configuration</h3>
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-4">
+          Configure your git identity for commits. These settings will be applied globally via <code className="bg-muted px-2 py-0.5 rounded text-xs">git config --global</code>
+        </p>
+
+        <div className="p-4 border rounded-lg bg-card space-y-3">
+          <div>
+            <label htmlFor="settings-git-name" className="block text-sm font-medium text-foreground mb-2">
+              Git Name
+            </label>
+            <Input
+              id="settings-git-name"
+              type="text"
+              value={gitName}
+              onChange={(e) => setGitName(e.target.value)}
+              placeholder="John Doe"
+              disabled={gitConfigLoading}
+              className="w-full"
+            />
+            <p className="mt-1 text-xs text-muted-foreground">
+              Your name for git commits
+            </p>
+          </div>
+
+          <div>
+            <label htmlFor="settings-git-email" className="block text-sm font-medium text-foreground mb-2">
+              Git Email
+            </label>
+            <Input
+              id="settings-git-email"
+              type="email"
+              value={gitEmail}
+              onChange={(e) => setGitEmail(e.target.value)}
+              placeholder="john@example.com"
+              disabled={gitConfigLoading}
+              className="w-full"
+            />
+            <p className="mt-1 text-xs text-muted-foreground">
+              Your email for git commits
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button
+              onClick={saveGitConfig}
+              disabled={gitConfigSaving || !gitName || !gitEmail}
+            >
+              {gitConfigSaving ? 'Saving...' : 'Save Configuration'}
+            </Button>
+
+            {saveStatus === 'success' && (
+              <div className="text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
+                <Check className="w-4 h-4" />
+                Saved successfully
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default GitSettings;

src/components/ImageViewer.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button } from './ui/button';
 import { X } from 'lucide-react';
+import { authenticatedFetch } from '../utils/api';
 
 function ImageViewer({ file, onClose }) {
   const imagePath = `/api/projects/${file.projectName}/files/content?path=${encodeURIComponent(file.path)}`;
@@ -18,16 +19,7 @@ function ImageViewer({ file, onClose }) {
         setError(null);
         setImageUrl(null);
 
-        const token = localStorage.getItem('auth-token');
-        if (!token) {
-          setError('Missing authentication token');
-          return;
-        }
-
-        const response = await fetch(imagePath, {
-          headers: {
-            'Authorization': `Bearer ${token}`
-          },
+        const response = await authenticatedFetch(imagePath, {
           signal: controller.signal
         });
 

src/components/LoginModal.jsx

@@ -0,0 +1,86 @@
+import { X } from 'lucide-react';
+import StandaloneShell from './StandaloneShell';
+
+/**
+ * Reusable login modal component for Claude and Cursor CLI authentication
+ *
+ * @param {Object} props
+ * @param {boolean} props.isOpen - Whether the modal is visible
+ * @param {Function} props.onClose - Callback when modal is closed
+ * @param {'claude'|'cursor'} props.provider - Which CLI provider to authenticate with
+ * @param {Object} props.project - Project object containing name and path information
+ * @param {Function} props.onComplete - Callback when login process completes (receives exitCode)
+ * @param {string} props.customCommand - Optional custom command to override defaults
+ */
+function LoginModal({
+  isOpen,
+  onClose,
+  provider = 'claude',
+  project,
+  onComplete,
+  customCommand
+}) {
+  if (!isOpen) return null;
+
+  const getCommand = () => {
+    if (customCommand) return customCommand;
+
+    switch (provider) {
+      case 'claude':
+        return 'claude setup-token --dangerously-skip-permissions';
+      case 'cursor':
+        return 'cursor-agent login';
+      default:
+        return 'claude setup-token --dangerously-skip-permissions';
+    }
+  };
+
+  const getTitle = () => {
+    switch (provider) {
+      case 'claude':
+        return 'Claude CLI Login';
+      case 'cursor':
+        return 'Cursor CLI Login';
+      default:
+        return 'CLI Login';
+    }
+  };
+
+  const handleComplete = (exitCode) => {
+    if (onComplete) {
+      onComplete(exitCode);
+    }
+    if (exitCode === 0) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999] max-md:items-stretch max-md:justify-stretch">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl h-3/4 flex flex-col md:max-w-4xl md:h-3/4 md:rounded-lg md:m-4 max-md:max-w-none max-md:h-full max-md:rounded-none max-md:m-0">
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {getTitle()}
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+            aria-label="Close login modal"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-hidden">
+          <StandaloneShell
+            project={project}
+            command={getCommand()}
+            onComplete={handleComplete}
+            minimal={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoginModal;

src/components/MainContent.jsx

@@ -496,20 +496,25 @@ function MainContent({
             />
           </ErrorBoundary>
         </div>
-        <div className={`h-full overflow-hidden ${activeTab === 'files' ? 'block' : 'hidden'}`}>
-          <FileTree selectedProject={selectedProject} />
-        </div>
-        <div className={`h-full overflow-hidden ${activeTab === 'shell' ? 'block' : 'hidden'}`}>
-          <StandaloneShell
-            project={selectedProject}
-            session={selectedSession}
-            isActive={activeTab === 'shell'}
-            showHeader={false}
-          />
-        </div>
-        <div className={`h-full overflow-hidden ${activeTab === 'git' ? 'block' : 'hidden'}`}>
-          <GitPanel selectedProject={selectedProject} isMobile={isMobile} onFileOpen={handleFileOpen} />
-        </div>
+        {activeTab === 'files' && (
+          <div className="h-full overflow-hidden">
+            <FileTree selectedProject={selectedProject} />
+          </div>
+        )}
+        {activeTab === 'shell' && (
+          <div className="h-full w-full overflow-hidden">
+            <StandaloneShell
+              project={selectedProject}
+              session={selectedSession}
+              showHeader={false}
+            />
+          </div>
+        )}
+        {activeTab === 'git' && (
+          <div className="h-full overflow-hidden">
+            <GitPanel selectedProject={selectedProject} isMobile={isMobile} onFileOpen={handleFileOpen} />
+          </div>
+        )}
         {shouldShowTasksTab && (
           <div className={`h-full ${activeTab === 'tasks' ? 'block' : 'hidden'}`}>
             <div className="h-full flex flex-col overflow-hidden">

src/components/Onboarding.jsx

@@ -0,0 +1,589 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronRight, ChevronLeft, Check, GitBranch, User, Mail, LogIn, ExternalLink, Loader2 } from 'lucide-react';
+import ClaudeLogo from './ClaudeLogo';
+import CursorLogo from './CursorLogo';
+import LoginModal from './LoginModal';
+import { authenticatedFetch } from '../utils/api';
+import { useAuth } from '../contexts/AuthContext';
+
+const Onboarding = ({ onComplete }) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [gitName, setGitName] = useState('');
+  const [gitEmail, setGitEmail] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  // CLI authentication states
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [loginProvider, setLoginProvider] = useState('');
+  const [selectedProject, setSelectedProject] = useState({ name: 'default', fullPath: '' });
+
+  const [claudeAuthStatus, setClaudeAuthStatus] = useState({
+    authenticated: false,
+    email: null,
+    loading: true,
+    error: null
+  });
+
+  const [cursorAuthStatus, setCursorAuthStatus] = useState({
+    authenticated: false,
+    email: null,
+    loading: true,
+    error: null
+  });
+
+  const { user } = useAuth();
+
+  // Load existing git config on mount
+  useEffect(() => {
+    loadGitConfig();
+  }, []);
+
+  // Check authentication status on mount and when modal closes
+  useEffect(() => {
+    checkClaudeAuthStatus();
+    checkCursorAuthStatus();
+  }, []);
+
+  const loadGitConfig = async () => {
+    try {
+      const response = await authenticatedFetch('/api/user/git-config');
+      if (response.ok) {
+        const data = await response.json();
+        if (data.gitName) setGitName(data.gitName);
+        if (data.gitEmail) setGitEmail(data.gitEmail);
+      }
+    } catch (error) {
+      console.error('Error loading git config:', error);
+      // Silently fail - user can still enter config manually
+    }
+  };
+
+  // Auto-check authentication status periodically when on CLI steps
+  useEffect(() => {
+    if (currentStep === 1 || currentStep === 2) {
+      const interval = setInterval(() => {
+        if (currentStep === 1) {
+          checkClaudeAuthStatus();
+        } else if (currentStep === 2) {
+          checkCursorAuthStatus();
+        }
+      }, 3000); // Check every 3 seconds
+
+      return () => clearInterval(interval);
+    }
+  }, [currentStep]);
+
+  const checkClaudeAuthStatus = async () => {
+    try {
+      const response = await authenticatedFetch('/api/cli/claude/status');
+      if (response.ok) {
+        const data = await response.json();
+        setClaudeAuthStatus({
+          authenticated: data.authenticated,
+          email: data.email,
+          loading: false,
+          error: data.error || null
+        });
+      } else {
+        setClaudeAuthStatus({
+          authenticated: false,
+          email: null,
+          loading: false,
+          error: 'Failed to check authentication status'
+        });
+      }
+    } catch (error) {
+      console.error('Error checking Claude auth status:', error);
+      setClaudeAuthStatus({
+        authenticated: false,
+        email: null,
+        loading: false,
+        error: error.message
+      });
+    }
+  };
+
+  const checkCursorAuthStatus = async () => {
+    try {
+      const response = await authenticatedFetch('/api/cli/cursor/status');
+      if (response.ok) {
+        const data = await response.json();
+        setCursorAuthStatus({
+          authenticated: data.authenticated,
+          email: data.email,
+          loading: false,
+          error: data.error || null
+        });
+      } else {
+        setCursorAuthStatus({
+          authenticated: false,
+          email: null,
+          loading: false,
+          error: 'Failed to check authentication status'
+        });
+      }
+    } catch (error) {
+      console.error('Error checking Cursor auth status:', error);
+      setCursorAuthStatus({
+        authenticated: false,
+        email: null,
+        loading: false,
+        error: error.message
+      });
+    }
+  };
+
+  const handleClaudeLogin = () => {
+    setLoginProvider('claude');
+    setShowLoginModal(true);
+  };
+
+  const handleCursorLogin = () => {
+    setLoginProvider('cursor');
+    setShowLoginModal(true);
+  };
+
+  const handleLoginComplete = (exitCode) => {
+    if (exitCode === 0) {
+      if (loginProvider === 'claude') {
+        checkClaudeAuthStatus();
+      } else if (loginProvider === 'cursor') {
+        checkCursorAuthStatus();
+      }
+    }
+  };
+
+  const handleNextStep = async () => {
+    setError('');
+
+    // Step 0: Git config validation and submission
+    if (currentStep === 0) {
+      if (!gitName.trim() || !gitEmail.trim()) {
+        setError('Both git name and email are required');
+        return;
+      }
+
+      // Validate email format
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(gitEmail)) {
+        setError('Please enter a valid email address');
+        return;
+      }
+
+      setIsSubmitting(true);
+      try {
+        // Save git config to backend (which will also apply git config --global)
+        const response = await authenticatedFetch('/api/user/git-config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ gitName, gitEmail })
+        });
+
+        if (!response.ok) {
+          const data = await response.json();
+          throw new Error(data.error || 'Failed to save git configuration');
+        }
+
+        setCurrentStep(currentStep + 1);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setIsSubmitting(false);
+      }
+      return;
+    }
+
+    // Other steps: just move forward
+    setCurrentStep(currentStep + 1);
+  };
+
+  const handlePrevStep = () => {
+    setError('');
+    setCurrentStep(currentStep - 1);
+  };
+
+  const handleFinish = async () => {
+    setIsSubmitting(true);
+    setError('');
+
+    try {
+      // Mark onboarding as complete
+      const response = await authenticatedFetch('/api/user/complete-onboarding', {
+        method: 'POST'
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to complete onboarding');
+      }
+
+      // Call the onComplete callback
+      if (onComplete) {
+        onComplete();
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const steps = [
+    {
+      title: 'Git Configuration',
+      description: 'Set up your git identity for commits',
+      icon: GitBranch,
+      required: true
+    },
+    {
+      title: 'Claude Code CLI',
+      description: 'Connect your Claude Code account',
+      icon: () => <ClaudeLogo size={24} />,
+      required: false
+    },
+    {
+      title: 'Cursor CLI',
+      description: 'Connect your Cursor account',
+      icon: () => <CursorLogo size={24} />,
+      required: false
+    }
+  ];
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 0:
+        return (
+          <div className="space-y-6">
+            <div className="text-center mb-8">
+              <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
+                <GitBranch className="w-8 h-8 text-blue-600 dark:text-blue-400" />
+              </div>
+              <h2 className="text-2xl font-bold text-foreground mb-2">Git Configuration</h2>
+              <p className="text-muted-foreground">
+                Configure your git identity to ensure proper attribution for your commits
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="gitName" className="flex items-center gap-2 text-sm font-medium text-foreground mb-2">
+                  <User className="w-4 h-4" />
+                  Git Name <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  id="gitName"
+                  value={gitName}
+                  onChange={(e) => setGitName(e.target.value)}
+                  className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="John Doe"
+                  required
+                  disabled={isSubmitting}
+                />
+                <p className="mt-1 text-xs text-muted-foreground">
+                  This will be used as: git config --global user.name
+                </p>
+              </div>
+
+              <div>
+                <label htmlFor="gitEmail" className="flex items-center gap-2 text-sm font-medium text-foreground mb-2">
+                  <Mail className="w-4 h-4" />
+                  Git Email <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="email"
+                  id="gitEmail"
+                  value={gitEmail}
+                  onChange={(e) => setGitEmail(e.target.value)}
+                  className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="john@example.com"
+                  required
+                  disabled={isSubmitting}
+                />
+                <p className="mt-1 text-xs text-muted-foreground">
+                  This will be used as: git config --global user.email
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 1:
+        return (
+          <div className="space-y-6">
+            <div className="text-center mb-8">
+              <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
+                <ClaudeLogo size={32} />
+              </div>
+              <h2 className="text-2xl font-bold text-foreground mb-2">Claude Code CLI</h2>
+              <p className="text-muted-foreground">
+                Connect your Claude account to enable AI-powered coding features
+              </p>
+            </div>
+
+            {/* Auth Status Card */}
+            <div className="border border-border rounded-lg p-6 bg-card">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-3">
+                  <div className={`w-3 h-3 rounded-full ${
+                    claudeAuthStatus.loading ? 'bg-gray-400 animate-pulse' :
+                    claudeAuthStatus.authenticated ? 'bg-green-500' : 'bg-gray-300'
+                  }`} />
+                  <span className="font-medium text-foreground">
+                    {claudeAuthStatus.loading ? 'Checking...' :
+                     claudeAuthStatus.authenticated ? 'Connected' : 'Not Connected'}
+                  </span>
+                </div>
+                {claudeAuthStatus.authenticated && (
+                  <Check className="w-5 h-5 text-green-500" />
+                )}
+              </div>
+
+              {claudeAuthStatus.authenticated && claudeAuthStatus.email && (
+                <p className="text-sm text-muted-foreground mb-4">
+                  Signed in as: <span className="text-foreground font-medium">{claudeAuthStatus.email}</span>
+                </p>
+              )}
+
+              {!claudeAuthStatus.authenticated && (
+                <>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Click the button below to authenticate with Claude Code CLI. A terminal will open with authentication instructions.
+                  </p>
+                  <button
+                    onClick={handleClaudeLogin}
+                    className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2"
+                  >
+                    <LogIn className="w-5 h-5" />
+                    Login to Claude Code
+                  </button>
+                  <p className="text-xs text-muted-foreground mt-3 text-center">
+                    Or manually run: <code className="bg-muted px-2 py-1 rounded">claude auth login</code>
+                  </p>
+                </>
+              )}
+
+              {claudeAuthStatus.error && !claudeAuthStatus.authenticated && (
+                <div className="mt-4 p-3 bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-300 dark:border-yellow-800 rounded-lg">
+                  <p className="text-sm text-yellow-700 dark:text-yellow-400">{claudeAuthStatus.error}</p>
+                </div>
+              )}
+            </div>
+
+            <div className="text-center text-sm text-muted-foreground">
+              <p>This step is optional. You can skip and configure it later in Settings.</p>
+            </div>
+          </div>
+        );
+
+      case 2:
+        return (
+          <div className="space-y-6">
+            <div className="text-center mb-8">
+              <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
+                <CursorLogo size={32} />
+              </div>
+              <h2 className="text-2xl font-bold text-foreground mb-2">Cursor CLI</h2>
+              <p className="text-muted-foreground">
+                Connect your Cursor account to enable AI-powered features
+              </p>
+            </div>
+
+            {/* Auth Status Card */}
+            <div className="border border-border rounded-lg p-6 bg-card">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-3">
+                  <div className={`w-3 h-3 rounded-full ${
+                    cursorAuthStatus.loading ? 'bg-gray-400 animate-pulse' :
+                    cursorAuthStatus.authenticated ? 'bg-green-500' : 'bg-gray-300'
+                  }`} />
+                  <span className="font-medium text-foreground">
+                    {cursorAuthStatus.loading ? 'Checking...' :
+                     cursorAuthStatus.authenticated ? 'Connected' : 'Not Connected'}
+                  </span>
+                </div>
+                {cursorAuthStatus.authenticated && (
+                  <Check className="w-5 h-5 text-green-500" />
+                )}
+              </div>
+
+              {cursorAuthStatus.authenticated && cursorAuthStatus.email && (
+                <p className="text-sm text-muted-foreground mb-4">
+                  Signed in as: <span className="text-foreground font-medium">{cursorAuthStatus.email}</span>
+                </p>
+              )}
+
+              {!cursorAuthStatus.authenticated && (
+                <>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Click the button below to authenticate with Cursor CLI. A terminal will open with authentication instructions.
+                  </p>
+                  <button
+                    onClick={handleCursorLogin}
+                    className="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2"
+                  >
+                    <LogIn className="w-5 h-5" />
+                    Login to Cursor
+                  </button>
+                  <p className="text-xs text-muted-foreground mt-3 text-center">
+                    Or manually run: <code className="bg-muted px-2 py-1 rounded">cursor auth login</code>
+                  </p>
+                </>
+              )}
+
+              {cursorAuthStatus.error && !cursorAuthStatus.authenticated && (
+                <div className="mt-4 p-3 bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-300 dark:border-yellow-800 rounded-lg">
+                  <p className="text-sm text-yellow-700 dark:text-yellow-400">{cursorAuthStatus.error}</p>
+                </div>
+              )}
+            </div>
+
+            <div className="text-center text-sm text-muted-foreground">
+              <p>This step is optional. You can skip and configure it later in Settings.</p>
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const isStepValid = () => {
+    switch (currentStep) {
+      case 0:
+        return gitName.trim() && gitEmail.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(gitEmail);
+      case 1:
+      case 2:
+        return true; // CLI steps are optional
+      default:
+        return false;
+    }
+  };
+
+  return (
+    <>
+      <div className="min-h-screen bg-background flex items-center justify-center p-4">
+        <div className="w-full max-w-2xl">
+          {/* Progress Steps */}
+          <div className="mb-8">
+            <div className="flex items-center justify-between">
+              {steps.map((step, index) => (
+                <React.Fragment key={index}>
+                  <div className="flex flex-col items-center flex-1">
+                    <div className={`w-12 h-12 rounded-full flex items-center justify-center border-2 transition-colors duration-200 ${
+                      index < currentStep ? 'bg-green-500 border-green-500 text-white' :
+                      index === currentStep ? 'bg-blue-600 border-blue-600 text-white' :
+                      'bg-background border-border text-muted-foreground'
+                    }`}>
+                      {index < currentStep ? (
+                        <Check className="w-6 h-6" />
+                      ) : typeof step.icon === 'function' ? (
+                        <step.icon />
+                      ) : (
+                        <step.icon className="w-6 h-6" />
+                      )}
+                    </div>
+                    <div className="mt-2 text-center">
+                      <p className={`text-sm font-medium ${
+                        index === currentStep ? 'text-foreground' : 'text-muted-foreground'
+                      }`}>
+                        {step.title}
+                      </p>
+                      {step.required && (
+                        <span className="text-xs text-red-500">Required</span>
+                      )}
+                    </div>
+                  </div>
+                  {index < steps.length - 1 && (
+                    <div className={`flex-1 h-0.5 mx-2 transition-colors duration-200 ${
+                      index < currentStep ? 'bg-green-500' : 'bg-border'
+                    }`} />
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+
+          {/* Main Card */}
+          <div className="bg-card rounded-lg shadow-lg border border-border p-8">
+            {renderStepContent()}
+
+            {/* Error Message */}
+            {error && (
+              <div className="mt-6 p-4 bg-red-100 dark:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-lg">
+                <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
+              </div>
+            )}
+
+            {/* Navigation Buttons */}
+            <div className="flex items-center justify-between mt-8 pt-6 border-t border-border">
+              <button
+                onClick={handlePrevStep}
+                disabled={currentStep === 0 || isSubmitting}
+                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
+              >
+                <ChevronLeft className="w-4 h-4" />
+                Previous
+              </button>
+
+              <div className="flex items-center gap-3">
+                {currentStep < steps.length - 1 ? (
+                  <button
+                    onClick={handleNextStep}
+                    disabled={!isStepValid() || isSubmitting}
+                    className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors duration-200"
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        Saving...
+                      </>
+                    ) : (
+                      <>
+                        Next
+                        <ChevronRight className="w-4 h-4" />
+                      </>
+                    )}
+                  </button>
+                ) : (
+                  <button
+                    onClick={handleFinish}
+                    disabled={isSubmitting}
+                    className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 disabled:bg-green-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors duration-200"
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        Completing...
+                      </>
+                    ) : (
+                      <>
+                        <Check className="w-4 h-4" />
+                        Complete Setup
+                      </>
+                    )}
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Login Modal */}
+      {showLoginModal && (
+        <LoginModal
+          isOpen={showLoginModal}
+          onClose={() => setShowLoginModal(false)}
+          provider={loginProvider}
+          project={selectedProject}
+          onLoginComplete={handleLoginComplete}
+        />
+      )}
+    </>
+  );
+};
+
+export default Onboarding;

src/components/ProtectedRoute.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import SetupForm from './SetupForm';
 import LoginForm from './LoginForm';
+import Onboarding from './Onboarding';
 import { MessageSquare } from 'lucide-react';
 
 const LoadingScreen = () => (
@@ -24,14 +25,20 @@ const LoadingScreen = () => (
 );
 
 const ProtectedRoute = ({ children }) => {
-  const { user, isLoading, needsSetup } = useAuth();
+  const { user, isLoading, needsSetup, hasCompletedOnboarding, refreshOnboardingStatus } = useAuth();
 
-  // Platform mode: skip all auth UI and directly render children
   if (import.meta.env.VITE_IS_PLATFORM === 'true') {
+    if (isLoading) {
+      return <LoadingScreen />;
+    }
+
+    if (!hasCompletedOnboarding) {
+      return <Onboarding onComplete={refreshOnboardingStatus} />;
+    }
+
     return children;
   }
 
-  // Normal OSS mode: standard auth flow
   if (isLoading) {
     return <LoadingScreen />;
   }
@@ -44,6 +51,10 @@ const ProtectedRoute = ({ children }) => {
     return <LoginForm />;
   }
 
+  if (!hasCompletedOnboarding) {
+    return <Onboarding onComplete={refreshOnboardingStatus} />;
+  }
+
   return children;
 };
 

src/components/Settings.jsx

@@ -2,24 +2,18 @@ import { useState, useEffect } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Badge } from './ui/badge';
-import { X, Plus, Settings as SettingsIcon, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Globe, Terminal, Zap, FolderOpen, LogIn, Key } from 'lucide-react';
+import { X, Plus, Settings as SettingsIcon, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Globe, Terminal, Zap, FolderOpen, LogIn, Key, GitBranch, Check } from 'lucide-react';
 import { useTheme } from '../contexts/ThemeContext';
-import { useTasksSettings } from '../contexts/TasksSettingsContext';
-import StandaloneShell from './StandaloneShell';
 import ClaudeLogo from './ClaudeLogo';
 import CursorLogo from './CursorLogo';
 import CredentialsSettings from './CredentialsSettings';
+import GitSettings from './GitSettings';
+import TasksSettings from './TasksSettings';
+import LoginModal from './LoginModal';
+import { authenticatedFetch } from '../utils/api';
 
 function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
   const { isDarkMode, toggleDarkMode } = useTheme();
-  const { 
-    tasksEnabled, 
-    setTasksEnabled, 
-    isTaskMasterInstalled, 
-    isTaskMasterReady, 
-    installationStatus, 
-    isCheckingInstallation 
-  } = useTasksSettings();
   const [allowedTools, setAllowedTools] = useState([]);
   const [disallowedTools, setDisallowedTools] = useState([]);
   const [newAllowedTool, setNewAllowedTool] = useState('');
@@ -81,10 +75,23 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
   const [newCursorDisallowedCommand, setNewCursorDisallowedCommand] = useState('');
   const [cursorMcpServers, setCursorMcpServers] = useState([]);
 
-  // Login modal states
   const [showLoginModal, setShowLoginModal] = useState(false);
-  const [loginProvider, setLoginProvider] = useState(''); // 'claude' or 'cursor'
+  const [loginProvider, setLoginProvider] = useState('');
   const [selectedProject, setSelectedProject] = useState(null);
+
+  const [claudeAuthStatus, setClaudeAuthStatus] = useState({
+    authenticated: false,
+    email: null,
+    loading: true,
+    error: null
+  });
+  const [cursorAuthStatus, setCursorAuthStatus] = useState({
+    authenticated: false,
+    email: null,
+    loading: true,
+    error: null
+  });
+
   // Common tool patterns for Claude
   const commonTools = [
     'Bash(git log:*)',
@@ -122,14 +129,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
   // Fetch Cursor MCP servers
   const fetchCursorMcpServers = async () => {
     try {
-      const token = localStorage.getItem('auth-token');
-      const response = await fetch('/api/cursor/mcp', {
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      
+      const response = await authenticatedFetch('/api/cursor/mcp');
+
       if (response.ok) {
         const data = await response.json();
         setCursorMcpServers(data.servers || []);
@@ -144,16 +145,9 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
   // MCP API functions
   const fetchMcpServers = async () => {
     try {
-      const token = localStorage.getItem('auth-token');
-      
       // Try to read directly from config files for complete details
-      const configResponse = await fetch('/api/mcp/config/read', {
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      
+      const configResponse = await authenticatedFetch('/api/mcp/config/read');
+
       if (configResponse.ok) {
         const configData = await configResponse.json();
         if (configData.success && configData.servers) {
@@ -161,15 +155,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
           return;
         }
       }
-      
+
       // Fallback to Claude CLI
-      const cliResponse = await fetch('/api/mcp/cli/list', {
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      
+      const cliResponse = await authenticatedFetch('/api/mcp/cli/list');
+
       if (cliResponse.ok) {
         const cliData = await cliResponse.json();
         if (cliData.success && cliData.servers) {
@@ -194,15 +183,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
           return;
         }
       }
-      
+
       // Final fallback to direct config reading
-      const response = await fetch('/api/mcp/servers?scope=user', {
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
-      });
-      
+      const response = await authenticatedFetch('/api/mcp/servers?scope=user');
+
       if (response.ok) {
         const data = await response.json();
         setMcpServers(data.servers || []);
@@ -216,20 +200,14 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
 
   const saveMcpServer = async (serverData) => {
     try {
-      const token = localStorage.getItem('auth-token');
-      
       if (editingMcpServer) {
         // For editing, remove old server and add new one
         await deleteMcpServer(editingMcpServer.id, 'user');
       }
-      
+
       // Use Claude CLI to add the server
-      const response = await fetch('/api/mcp/cli/add', {
+      const response = await authenticatedFetch('/api/mcp/cli/add', {
         method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
         body: JSON.stringify({
           name: serverData.name,
           type: serverData.type,
@@ -242,7 +220,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
           env: serverData.config?.env || {}
         })
       });
-      
+
       if (response.ok) {
         const result = await response.json();
         if (result.success) {
@@ -263,17 +241,11 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
 
   const deleteMcpServer = async (serverId, scope = 'user') => {
     try {
-      const token = localStorage.getItem('auth-token');
-      
       // Use Claude CLI to remove the server with proper scope
-      const response = await fetch(`/api/mcp/cli/remove/${serverId}?scope=${scope}`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
+      const response = await authenticatedFetch(`/api/mcp/cli/remove/${serverId}?scope=${scope}`, {
+        method: 'DELETE'
       });
-      
+
       if (response.ok) {
         const result = await response.json();
         if (result.success) {
@@ -294,15 +266,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
 
   const testMcpServer = async (serverId, scope = 'user') => {
     try {
-      const token = localStorage.getItem('auth-token');
-      const response = await fetch(`/api/mcp/servers/${serverId}/test?scope=${scope}`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
+      const response = await authenticatedFetch(`/api/mcp/servers/${serverId}/test?scope=${scope}`, {
+        method: 'POST'
       });
-      
+
       if (response.ok) {
         const data = await response.json();
         return data.testResult;
@@ -319,15 +286,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
 
   const discoverMcpTools = async (serverId, scope = 'user') => {
     try {
-      const token = localStorage.getItem('auth-token');
-      const response = await fetch(`/api/mcp/servers/${serverId}/tools?scope=${scope}`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        }
+      const response = await authenticatedFetch(`/api/mcp/servers/${serverId}/tools?scope=${scope}`, {
+        method: 'POST'
       });
-      
+
       if (response.ok) {
         const data = await response.json();
         return data.toolsResult;
@@ -344,7 +306,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
   useEffect(() => {
     if (isOpen) {
       loadSettings();
-      // Set the active tab when the modal opens
+      checkClaudeAuthStatus();
+      checkCursorAuthStatus();
       setActiveTab(initialTab);
     }
   }, [isOpen, initialTab]);
@@ -417,7 +380,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
       await fetchCursorMcpServers();
     } catch (error) {
       console.error('Error loading tool settings:', error);
-      // Set defaults on error
       setAllowedTools([]);
       setDisallowedTools([]);
       setSkipPermissions(false);
@@ -425,7 +387,67 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
     }
   };
 
-  // Login handlers
+  const checkClaudeAuthStatus = async () => {
+    try {
+      const response = await authenticatedFetch('/api/cli/claude/status');
+
+      if (response.ok) {
+        const data = await response.json();
+        setClaudeAuthStatus({
+          authenticated: data.authenticated,
+          email: data.email,
+          loading: false,
+          error: data.error || null
+        });
+      } else {
+        setClaudeAuthStatus({
+          authenticated: false,
+          email: null,
+          loading: false,
+          error: 'Failed to check authentication status'
+        });
+      }
+    } catch (error) {
+      console.error('Error checking Claude auth status:', error);
+      setClaudeAuthStatus({
+        authenticated: false,
+        email: null,
+        loading: false,
+        error: error.message
+      });
+    }
+  };
+
+  const checkCursorAuthStatus = async () => {
+    try {
+      const response = await authenticatedFetch('/api/cli/cursor/status');
+
+      if (response.ok) {
+        const data = await response.json();
+        setCursorAuthStatus({
+          authenticated: data.authenticated,
+          email: data.email,
+          loading: false,
+          error: data.error || null
+        });
+      } else {
+        setCursorAuthStatus({
+          authenticated: false,
+          email: null,
+          loading: false,
+          error: 'Failed to check authentication status'
+        });
+      }
+    } catch (error) {
+      console.error('Error checking Cursor auth status:', error);
+      setCursorAuthStatus({
+        authenticated: false,
+        email: null,
+        loading: false,
+        error: error.message
+      });
+    }
+  };
   const handleClaudeLogin = () => {
     setLoginProvider('claude');
     setSelectedProject(projects?.[0] || { name: 'default', fullPath: process.cwd() });
@@ -440,9 +462,14 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
 
   const handleLoginComplete = (exitCode) => {
     if (exitCode === 0) {
-      // Login successful - could show a success message here
+      setSaveStatus('success');
+
+      if (loginProvider === 'claude') {
+        checkClaudeAuthStatus();
+      } else if (loginProvider === 'cursor') {
+        checkCursorAuthStatus();
+      }
     }
-    setShowLoginModal(false);
   };
 
   const saveSettings = () => {
@@ -556,13 +583,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
     try {
       if (mcpFormData.importMode === 'json') {
         // Use JSON import endpoint
-        const token = localStorage.getItem('auth-token');
-        const response = await fetch('/api/mcp/cli/add-json', {
+        const response = await authenticatedFetch('/api/mcp/cli/add-json', {
           method: 'POST',
-          headers: {
-            'Authorization': `Bearer ${token}`,
-            'Content-Type': 'application/json'
-          },
           body: JSON.stringify({
             name: mcpFormData.name,
             jsonConfig: mcpFormData.jsonInput,
@@ -570,7 +592,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
             projectPath: mcpFormData.projectPath
           })
         });
-        
+
         if (response.ok) {
           const result = await response.json();
           if (result.success) {
@@ -714,14 +736,15 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
                 Appearance
               </button>
               <button
-                onClick={() => setActiveTab('tasks')}
+                onClick={() => setActiveTab('git')}
                 className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
-                  activeTab === 'tasks'
+                  activeTab === 'git'
                     ? 'border-blue-600 text-blue-600 dark:text-blue-400'
                     : 'border-transparent text-muted-foreground hover:text-foreground'
                 }`}
               >
-                Tasks
+                <GitBranch className="w-4 h-4 inline mr-2" />
+                Git
               </button>
               <button
                 onClick={() => setActiveTab('api')}
@@ -734,6 +757,16 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
                 <Key className="w-4 h-4 inline mr-2" />
                 API & Tokens
               </button>
+              <button
+                onClick={() => setActiveTab('tasks')}
+                className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === 'tasks'
+                    ? 'border-blue-600 text-blue-600 dark:text-blue-400'
+                    : 'border-transparent text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                Tasks
+              </button>
             </div>
           </div>
 
@@ -961,6 +994,9 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
               </div>
             )}
 
+            {/* Git Tab */}
+            {activeTab === 'git' && <GitSettings />}
+
             {/* Tools Tab */}
             {activeTab === 'tools' && (
               <div className="space-y-6 md:space-y-8">
@@ -1029,7 +1065,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
               </div>
             </div>
 
-            {/* Claude Login */}
             <div className="space-y-4">
               <div className="flex items-center gap-3">
                 <LogIn className="w-5 h-5 text-blue-500" />
@@ -1038,23 +1073,50 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
                 </h3>
               </div>
               <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <div className="font-medium text-blue-900 dark:text-blue-100">
-                      Claude CLI Login
-                    </div>
-                    <div className="text-sm text-blue-700 dark:text-blue-300">
-                      Sign in to your Claude account to enable AI features
-                    </div>
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2">
+                    {claudeAuthStatus.loading ? (
+                      <span className="text-sm text-blue-700 dark:text-blue-300">
+                        Checking authentication...
+                      </span>
+                    ) : claudeAuthStatus.authenticated ? (
+                      <div className="flex items-center gap-2">
+                        <Badge variant="success" className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
+                          ✓ Logged in
+                        </Badge>
+                        {claudeAuthStatus.email && (
+                          <span className="text-sm text-blue-700 dark:text-blue-300">
+                            as {claudeAuthStatus.email}
+                          </span>
+                        )}
+                      </div>
+                    ) : (
+                      <Badge variant="secondary" className="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300">
+                        Not authenticated
+                      </Badge>
+                    )}
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="font-medium text-blue-900 dark:text-blue-100">
+                        Claude CLI Login
+                      </div>
+                      <div className="text-sm text-blue-700 dark:text-blue-300">
+                        {claudeAuthStatus.authenticated
+                          ? 'Re-authenticate or switch accounts'
+                          : 'Sign in to your Claude account to enable AI features'}
+                      </div>
+                    </div>
+                    <Button
+                      onClick={handleClaudeLogin}
+                      className="bg-blue-600 hover:bg-blue-700 text-white"
+                      size="sm"
+                    >
+                      <LogIn className="w-4 h-4 mr-2" />
+                      Login
+                    </Button>
                   </div>
-                  <Button
-                    onClick={handleClaudeLogin}
-                    className="bg-blue-600 hover:bg-blue-700 text-white"
-                    size="sm"
-                  >
-                    <LogIn className="w-4 h-4 mr-2" />
-                    Login
-                  </Button>
                 </div>
               </div>
             </div>
@@ -1789,7 +1851,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
                   </div>
                 </div>
 
-                {/* Cursor Login */}
                 <div className="space-y-4">
                   <div className="flex items-center gap-3">
                     <LogIn className="w-5 h-5 text-purple-500" />
@@ -1798,23 +1859,50 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
                     </h3>
                   </div>
                   <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <div className="font-medium text-purple-900 dark:text-purple-100">
-                          Cursor CLI Login
-                        </div>
-                        <div className="text-sm text-purple-700 dark:text-purple-300">
-                          Sign in to your Cursor account to enable AI features
-                        </div>
+                    <div className="space-y-3">
+                      <div className="flex items-center gap-2">
+                        {cursorAuthStatus.loading ? (
+                          <span className="text-sm text-purple-700 dark:text-purple-300">
+                            Checking authentication...
+                          </span>
+                        ) : cursorAuthStatus.authenticated ? (
+                          <div className="flex items-center gap-2">
+                            <Badge variant="success" className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
+                              ✓ Logged in
+                            </Badge>
+                            {cursorAuthStatus.email && (
+                              <span className="text-sm text-purple-700 dark:text-purple-300">
+                                as {cursorAuthStatus.email}
+                              </span>
+                            )}
+                          </div>
+                        ) : (
+                          <Badge variant="secondary" className="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300">
+                            Not authenticated
+                          </Badge>
+                        )}
+                      </div>
+
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <div className="font-medium text-purple-900 dark:text-purple-100">
+                            Cursor CLI Login
+                          </div>
+                          <div className="text-sm text-purple-700 dark:text-purple-300">
+                            {cursorAuthStatus.authenticated
+                              ? 'Re-authenticate or switch accounts'
+                              : 'Sign in to your Cursor account to enable AI features'}
+                          </div>
+                        </div>
+                        <Button
+                          onClick={handleCursorLogin}
+                          className="bg-purple-600 hover:bg-purple-700 text-white"
+                          size="sm"
+                        >
+                          <LogIn className="w-4 h-4 mr-2" />
+                          Login
+                        </Button>
                       </div>
-                      <Button
-                        onClick={handleCursorLogin}
-                        className="bg-purple-600 hover:bg-purple-700 text-white"
-                        size="sm"
-                      >
-                        <LogIn className="w-4 h-4 mr-2" />
-                        Login
-                      </Button>
                     </div>
                   </div>
                 </div>
@@ -2000,154 +2088,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
             {/* Tasks Tab */}
             {activeTab === 'tasks' && (
               <div className="space-y-6 md:space-y-8">
-                {/* Installation Status Check */}
-                {isCheckingInstallation ? (
-                  <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-                    <div className="flex items-center gap-3">
-                      <div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full"></div>
-                      <span className="text-sm text-muted-foreground">Checking TaskMaster installation...</span>
-                    </div>
-                  </div>
-                ) : (
-                  <>
-                    {/* TaskMaster Not Installed Warning */}
-                    {!isTaskMasterInstalled && (
-                      <div className="bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
-                        <div className="flex items-start gap-3">
-                          <div className="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                            <svg className="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
-                            </svg>
-                          </div>
-                          <div className="flex-1">
-                            <div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
-                              TaskMaster AI CLI Not Installed
-                            </div>
-                            <div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
-                              <p>TaskMaster CLI is required to use task management features. Install it to get started:</p>
-                              
-                              <div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
-                                <code>npm install -g task-master-ai</code>
-                               <a 
-                                  href="https://github.com/eyaltoledano/claude-task-master" 
-                                  target="_blank" 
-                                  rel="noopener noreferrer"
-                                  className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"
-                                >
-                                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                    <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
-                                  </svg>
-                                  View on GitHub
-                                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                                  </svg>
-                                </a>
-                              </div>
-                              
-                              <div className="space-y-2">
-                                <p className="font-medium">After installation:</p>
-                                <ol className="list-decimal list-inside space-y-1 text-xs">
-                                  <li>Restart this application</li>
-                                  <li>TaskMaster features will automatically become available</li>
-                                  <li>Use <code className="bg-orange-100 dark:bg-orange-800 px-1 rounded">task-master init</code> in your project directory</li>
-                                </ol>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* TaskMaster Settings */}
-                    <div className="space-y-4">
-                      <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-                        <div className="flex items-center justify-between">
-                          <div>
-                            <div className="font-medium text-foreground">
-                              Enable TaskMaster Integration
-                            </div>
-                            <div className="text-sm text-muted-foreground mt-1">
-                              Show TaskMaster tasks, banners, and sidebar indicators across the interface
-                            </div>
-                            {!isTaskMasterInstalled && (
-                              <div className="text-xs text-orange-600 dark:text-orange-400 mt-1">
-                                TaskMaster CLI must be installed first
-                              </div>
-                            )}
-                          </div>
-                          <label className="relative inline-flex items-center cursor-pointer">
-                            <input
-                              type="checkbox"
-                              checked={tasksEnabled}
-                              onChange={(e) => setTasksEnabled(e.target.checked)}
-                              disabled={!isTaskMasterInstalled}
-                              className="sr-only peer"
-                            />
-                            <div className={`w-11 h-6 ${!isTaskMasterInstalled ? 'bg-gray-300 dark:bg-gray-600' : 'bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800'} rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600`}></div>
-                          </label>
-                        </div>
-                      </div>
-
-                      {/* TaskMaster Information */}
-                      <div className="bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-                    <div className="flex items-start gap-3">
-                      <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                        <Zap className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                      </div>
-                      <div>
-                        <div className="font-medium text-blue-900 dark:text-blue-100 mb-2">
-                          🎯 About TaskMaster AI
-                        </div>
-                        <div className="text-sm text-blue-800 dark:text-blue-200 space-y-2">
-                          <p><strong>AI-Powered Task Management:</strong> Break complex projects into manageable subtasks with AI assistance</p>
-                          <p><strong>PRD:</strong> Generate structured tasks from Product Requirements Documents</p>
-                          <p><strong>Dependency Tracking:</strong> Understand task relationships and execution order</p>
-                          <p><strong>Progress Visualization:</strong> Kanban boards, and detailed task views</p>
-                        </div>
-                      </div>
-                      
-                      {/* GitHub Link and Resources */}
-                      <div className="mt-4 pt-4 border-t border-blue-200 dark:border-blue-700">
-                        <div className="flex items-start gap-3">
-                          <div className="w-6 h-6 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                            <svg className="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
-                              <path fillRule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clipRule="evenodd" />
-                            </svg>
-                          </div>
-                          <div className="flex-1">
-                            <div className="font-medium text-blue-900 dark:text-blue-100 mb-2">
-                              📚 Learn More & Tutorial
-                            </div>
-                            <div className="text-sm text-blue-800 dark:text-blue-200 space-y-2">
-                              <p>TaskMaster AI (aka <strong>claude-task-master</strong> ) is an advanced AI-powered task management system built for developers.</p>
-                              <div className="flex flex-col gap-2">
-                                <a 
-                                  href="https://github.com/eyaltoledano/claude-task-master" 
-                                  target="_blank" 
-                                  rel="noopener noreferrer"
-                                  className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"
-                                >
-                                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                    <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
-                                  </svg>
-                                  View on GitHub
-                                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                                  </svg>
-                                </a>
-                                <p className="text-xs text-blue-700 dark:text-blue-300">
-                                  Find documentation, setup guides, and examples for advanced TaskMaster workflows
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                      </div>
-                    </div>
-                  </>
-                )}
+                <TasksSettings />
               </div>
             )}
 
@@ -2207,31 +2148,13 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
       </div>
 
       {/* Login Modal */}
-      {showLoginModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 max-md:items-stretch max-md:justify-stretch">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl h-3/4 flex flex-col md:max-w-4xl md:h-3/4 md:rounded-lg md:m-4 max-md:max-w-none max-md:h-full max-md:rounded-none max-md:m-0">
-            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                {loginProvider === 'claude' ? 'Claude CLI Login' : 'Cursor CLI Login'}
-              </h3>
-              <button
-                onClick={() => setShowLoginModal(false)}
-                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-              >
-                <X className="w-6 h-6" />
-              </button>
-            </div>
-            <div className="flex-1 overflow-hidden">
-              <StandaloneShell
-                project={selectedProject}
-                command={loginProvider === 'claude' ? 'claude /login' : 'cursor-agent login'}
-                onComplete={handleLoginComplete}
-                showHeader={false}
-              />
-            </div>
-          </div>
-        </div>
-      )}
+      <LoginModal
+        isOpen={showLoginModal}
+        onClose={() => setShowLoginModal(false)}
+        provider={loginProvider}
+        project={selectedProject}
+        onComplete={handleLoginComplete}
+      />
     </div>
   );
 }

src/components/Shell.jsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
-import { ClipboardAddon } from '@xterm/addon-clipboard';
 import { WebglAddon } from '@xterm/addon-webgl';
+import { WebLinksAddon } from '@xterm/addon-web-links';
 import '@xterm/xterm/css/xterm.css';
 
-// CSS to remove xterm focus outline
 const xtermStyles = `
   .xterm .xterm-screen {
     outline: none !important;
@@ -18,7 +17,6 @@ const xtermStyles = `
   }
 `;
 
-// Inject styles
 if (typeof document !== 'undefined') {
   const styleSheet = document.createElement('style');
   styleSheet.type = 'text/css';
@@ -26,10 +24,7 @@ if (typeof document !== 'undefined') {
   document.head.appendChild(styleSheet);
 }
 
-// Global store for shell sessions to persist across tab switches
-const shellSessions = new Map();
-
-function Shell({ selectedProject, selectedSession, isActive, initialCommand, isPlainShell = false, onProcessComplete }) {
+function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell = false, onProcessComplete, minimal = false, autoConnect = false }) {
   const terminalRef = useRef(null);
   const terminal = useRef(null);
   const fitAddon = useRef(null);
@@ -40,177 +35,212 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
   const [lastSessionId, setLastSessionId] = useState(null);
   const [isConnecting, setIsConnecting] = useState(false);
 
-  // Connect to shell function
-  const connectToShell = () => {
-    if (!isInitialized || isConnected || isConnecting) return;
-    
-    setIsConnecting(true);
-    
-    // Start the WebSocket connection
-    connectWebSocket();
-  };
+  const selectedProjectRef = useRef(selectedProject);
+  const selectedSessionRef = useRef(selectedSession);
+  const initialCommandRef = useRef(initialCommand);
+  const isPlainShellRef = useRef(isPlainShell);
+  const onProcessCompleteRef = useRef(onProcessComplete);
 
-  // Disconnect from shell function
-  const disconnectFromShell = () => {
-    
+  useEffect(() => {
+    selectedProjectRef.current = selectedProject;
+    selectedSessionRef.current = selectedSession;
+    initialCommandRef.current = initialCommand;
+    isPlainShellRef.current = isPlainShell;
+    onProcessCompleteRef.current = onProcessComplete;
+  });
+
+  const connectWebSocket = useCallback(async () => {
+    if (isConnecting || isConnected) return;
+
+    try {
+      const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
+      let wsUrl;
+
+      if (isPlatform) {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        wsUrl = `${protocol}//${window.location.host}/shell`;
+      } else {
+        const token = localStorage.getItem('auth-token');
+        if (!token) {
+          console.error('No authentication token found for Shell WebSocket connection');
+          return;
+        }
+
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        wsUrl = `${protocol}//${window.location.host}/shell?token=${encodeURIComponent(token)}`;
+      }
+
+      ws.current = new WebSocket(wsUrl);
+
+      ws.current.onopen = () => {
+        setIsConnected(true);
+        setIsConnecting(false);
+
+        setTimeout(() => {
+          if (fitAddon.current && terminal.current) {
+            fitAddon.current.fit();
+
+            ws.current.send(JSON.stringify({
+              type: 'init',
+              projectPath: selectedProjectRef.current.fullPath || selectedProjectRef.current.path,
+              sessionId: isPlainShellRef.current ? null : selectedSessionRef.current?.id,
+              hasSession: isPlainShellRef.current ? false : !!selectedSessionRef.current,
+              provider: isPlainShellRef.current ? 'plain-shell' : (selectedSessionRef.current?.__provider || 'claude'),
+              cols: terminal.current.cols,
+              rows: terminal.current.rows,
+              initialCommand: initialCommandRef.current,
+              isPlainShell: isPlainShellRef.current
+            }));
+          }
+        }, 100);
+      };
+
+      ws.current.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+
+          if (data.type === 'output') {
+            let output = data.data;
+
+            if (isPlainShellRef.current && onProcessCompleteRef.current) {
+              const cleanOutput = output.replace(/\x1b\[[0-9;]*m/g, '');
+              if (cleanOutput.includes('Process exited with code 0')) {
+                onProcessCompleteRef.current(0);
+              } else if (cleanOutput.match(/Process exited with code (\d+)/)) {
+                const exitCode = parseInt(cleanOutput.match(/Process exited with code (\d+)/)[1]);
+                if (exitCode !== 0) {
+                  onProcessCompleteRef.current(exitCode);
+                }
+              }
+            }
+
+            if (terminal.current) {
+              terminal.current.write(output);
+            }
+          } else if (data.type === 'url_open') {
+            window.open(data.url, '_blank');
+          }
+        } catch (error) {
+          console.error('[Shell] Error handling WebSocket message:', error, event.data);
+        }
+      };
+
+      ws.current.onclose = (event) => {
+        setIsConnected(false);
+        setIsConnecting(false);
+
+        if (terminal.current) {
+          terminal.current.clear();
+          terminal.current.write('\x1b[2J\x1b[H');
+        }
+      };
+
+      ws.current.onerror = (error) => {
+        setIsConnected(false);
+        setIsConnecting(false);
+      };
+    } catch (error) {
+      setIsConnected(false);
+      setIsConnecting(false);
+    }
+  }, [isConnecting, isConnected]);
+
+  const connectToShell = useCallback(() => {
+    if (!isInitialized || isConnected || isConnecting) return;
+    setIsConnecting(true);
+    connectWebSocket();
+  }, [isInitialized, isConnected, isConnecting, connectWebSocket]);
+
+  const disconnectFromShell = useCallback(() => {
     if (ws.current) {
       ws.current.close();
       ws.current = null;
     }
-    
-    // Clear terminal content completely
+
     if (terminal.current) {
       terminal.current.clear();
-      terminal.current.write('\x1b[2J\x1b[H'); // Clear screen and move cursor to home
+      terminal.current.write('\x1b[2J\x1b[H');
     }
-    
+
     setIsConnected(false);
     setIsConnecting(false);
-  };
+  }, []);
+
+  const sessionDisplayName = useMemo(() => {
+    if (!selectedSession) return null;
+    return selectedSession.__provider === 'cursor'
+      ? (selectedSession.name || 'Untitled Session')
+      : (selectedSession.summary || 'New Session');
+  }, [selectedSession]);
+
+  const sessionDisplayNameShort = useMemo(() => {
+    if (!sessionDisplayName) return null;
+    return sessionDisplayName.slice(0, 30);
+  }, [sessionDisplayName]);
+
+  const sessionDisplayNameLong = useMemo(() => {
+    if (!sessionDisplayName) return null;
+    return sessionDisplayName.slice(0, 50);
+  }, [sessionDisplayName]);
 
-  // Restart shell function
   const restartShell = () => {
     setIsRestarting(true);
-    
-    // Clear ALL session storage for this project to force fresh start
-    const sessionKeys = Array.from(shellSessions.keys()).filter(key => 
-      key.includes(selectedProject.name)
-    );
-    sessionKeys.forEach(key => shellSessions.delete(key));
-    
-    
-    // Close existing WebSocket
+
     if (ws.current) {
       ws.current.close();
       ws.current = null;
     }
-    
-    // Clear and dispose existing terminal
+
     if (terminal.current) {
-      
-      // Dispose terminal immediately without writing text
       terminal.current.dispose();
       terminal.current = null;
       fitAddon.current = null;
     }
-    
-    // Reset states
+
     setIsConnected(false);
     setIsInitialized(false);
-    
-    
-    // Force re-initialization after cleanup
+
     setTimeout(() => {
       setIsRestarting(false);
     }, 200);
   };
 
-  // Watch for session changes and restart shell
   useEffect(() => {
     const currentSessionId = selectedSession?.id || null;
-    
-    
-    // Disconnect when session changes (user will need to manually reconnect)
+
     if (lastSessionId !== null && lastSessionId !== currentSessionId && isInitialized) {
-      
-      // Disconnect from current shell
       disconnectFromShell();
-      
-      // Clear stored sessions for this project
-      const allKeys = Array.from(shellSessions.keys());
-      allKeys.forEach(key => {
-        if (key.includes(selectedProject.name)) {
-          shellSessions.delete(key);
-        }
-      });
     }
-    
+
     setLastSessionId(currentSessionId);
-  }, [selectedSession?.id, isInitialized]);
+  }, [selectedSession?.id, isInitialized, disconnectFromShell]);
 
-  // Initialize terminal when component mounts
   useEffect(() => {
-    
-    if (!terminalRef.current || !selectedProject || isRestarting) {
+    if (!terminalRef.current || !selectedProject || isRestarting || terminal.current) {
       return;
     }
 
-    // Create session key for this project/session combination
-    const sessionKey = selectedSession?.id || `project-${selectedProject.name}`;
-    
-    // Check if we have an existing session
-    const existingSession = shellSessions.get(sessionKey);
-    if (existingSession && !terminal.current) {
-      
-      try {
-        // Reuse existing terminal
-        terminal.current = existingSession.terminal;
-        fitAddon.current = existingSession.fitAddon;
-        ws.current = existingSession.ws;
-        setIsConnected(existingSession.isConnected);
-        
-        // Reattach to DOM - dispose existing element first if needed
-        if (terminal.current.element && terminal.current.element.parentNode) {
-          terminal.current.element.parentNode.removeChild(terminal.current.element);
-        }
-        
-        terminal.current.open(terminalRef.current);
-        
-        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);
-        
-        setIsInitialized(true);
-        return;
-      } catch (error) {
-        // Clear the broken session and continue to create a new one
-        shellSessions.delete(sessionKey);
-        terminal.current = null;
-        fitAddon.current = null;
-        ws.current = null;
-      }
-    }
+    console.log('[Shell] Terminal initializing, mounting component');
 
-    if (terminal.current) {
-      return;
-    }
-
-
-    // Initialize new terminal
     terminal.current = new Terminal({
       cursorBlink: true,
       fontSize: 14,
       fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      allowProposedApi: true, // Required for clipboard addon
+      allowProposedApi: true,
       allowTransparency: false,
       convertEol: true,
       scrollback: 10000,
       tabStopWidth: 4,
-      // Enable full color support
       windowsMode: false,
       macOptionIsMeta: true,
       macOptionClickForcesSelection: false,
-      // Enhanced theme with full 16-color ANSI support + true colors
       theme: {
-        // Basic colors
         background: '#1e1e1e',
         foreground: '#d4d4d4',
         cursor: '#ffffff',
         cursorAccent: '#1e1e1e',
         selection: '#264f78',
         selectionForeground: '#ffffff',
-        
-        // Standard ANSI colors (0-7)
         black: '#000000',
         red: '#cd3131',
         green: '#0dbc79',
@@ -219,8 +249,6 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
         magenta: '#bc3fbc',
         cyan: '#11a8cd',
         white: '#e5e5e5',
-        
-        // Bright ANSI colors (8-15)
         brightBlack: '#666666',
         brightRed: '#f14c4c',
         brightGreen: '#23d18b',
@@ -229,10 +257,7 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
         brightMagenta: '#d670d6',
         brightCyan: '#29b8db',
         brightWhite: '#ffffff',
-        
-        // Extended colors for better Claude output
         extendedAnsi: [
-          // 16-color palette extension for 256-color support
           '#000000', '#800000', '#008000', '#808000',
           '#000080', '#800080', '#008080', '#c0c0c0',
           '#808080', '#ff0000', '#00ff00', '#ffff00',
@@ -242,35 +267,27 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
     });
 
     fitAddon.current = new FitAddon();
-    const clipboardAddon = new ClipboardAddon();
     const webglAddon = new WebglAddon();
-    
+    const webLinksAddon = new WebLinksAddon();
+
     terminal.current.loadAddon(fitAddon.current);
-    terminal.current.loadAddon(clipboardAddon);
-    
+    terminal.current.loadAddon(webLinksAddon);
+    // Note: ClipboardAddon removed - we handle clipboard operations manually in attachCustomKeyEventHandler
+
     try {
       terminal.current.loadAddon(webglAddon);
     } catch (error) {
+      console.warn('[Shell] WebGL renderer unavailable, using Canvas fallback');
     }
-    
+
     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)
       if ((event.ctrlKey || event.metaKey) && event.key === 'c' && terminal.current.hasSelection()) {
         document.execCommand('copy');
         return false;
       }
-      
-      // Ctrl+V or Cmd+V for paste
+
       if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         navigator.clipboard.readText().then(text => {
           if (ws.current && ws.current.readyState === WebSocket.OPEN) {
@@ -279,20 +296,16 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
               data: text
             }));
           }
-        }).catch(err => {
-          // Failed to read clipboard
-        });
+        }).catch(() => {});
         return false;
       }
-      
+
       return true;
     });
-    
-    // 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',
@@ -302,10 +315,8 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
         }
       }
     }, 100);
-    
-    setIsInitialized(true);
 
-    // Handle terminal input
+    setIsInitialized(true);
     terminal.current.onData((data) => {
       if (ws.current && ws.current.readyState === WebSocket.OPEN) {
         ws.current.send(JSON.stringify({
@@ -315,12 +326,10 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
       }
     });
 
-    // Add resize observer to handle container size changes
     const resizeObserver = new ResizeObserver(() => {
       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',
@@ -337,178 +346,25 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
     }
 
     return () => {
+      console.log('[Shell] Terminal cleanup, unmounting component');
       resizeObserver.disconnect();
-      
-      // Store session for reuse instead of disposing
-      if (terminal.current && selectedProject) {
-        const sessionKey = selectedSession?.id || `project-${selectedProject.name}`;
-        
-        try {
-          shellSessions.set(sessionKey, {
-            terminal: terminal.current,
-            fitAddon: fitAddon.current,
-            ws: ws.current,
-            isConnected: isConnected
-          });
-          
-        } catch (error) {
-        }
+
+      if (ws.current && (ws.current.readyState === WebSocket.OPEN || ws.current.readyState === WebSocket.CONNECTING)) {
+        ws.current.close();
+      }
+      ws.current = null;
+
+      if (terminal.current) {
+        terminal.current.dispose();
+        terminal.current = null;
       }
     };
-  }, [terminalRef.current, selectedProject, selectedSession, isRestarting]);
+  }, [selectedProject?.path || selectedProject?.fullPath, isRestarting]);
 
-  // Fit terminal when tab becomes active
   useEffect(() => {
-    if (!isActive || !isInitialized) return;
-
-    // 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]);
-
-  // WebSocket connection function (called manually)
-  const connectWebSocket = async () => {
-    if (isConnecting || isConnected) return;
-
-    try {
-      const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
-
-      // Construct WebSocket URL
-      let wsUrl;
-
-      if (isPlatform) {
-        // Platform mode: Use same domain as the page (goes through proxy)
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        wsUrl = `${protocol}//${window.location.host}/shell`;
-      } else {
-        // OSS mode: Connect to same host:port that served the page
-        const token = localStorage.getItem('auth-token');
-        if (!token) {
-          console.error('No authentication token found for Shell WebSocket connection');
-          return;
-        }
-
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        wsUrl = `${protocol}//${window.location.host}/shell?token=${encodeURIComponent(token)}`;
-      }
-
-      ws.current = new WebSocket(wsUrl);
-
-      ws.current.onopen = () => {
-        setIsConnected(true);
-        setIsConnecting(false);
-        
-        // 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: isPlainShell ? null : selectedSession?.id,
-                hasSession: isPlainShell ? false : !!selectedSession,
-                provider: isPlainShell ? 'plain-shell' : (selectedSession?.__provider || 'claude'),
-                cols: terminal.current.cols,
-                rows: terminal.current.rows,
-                initialCommand: initialCommand,
-                isPlainShell: isPlainShell
-              };
-              
-              console.log('Shell init payload:', initPayload);
-              
-              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) => {
-        try {
-          const data = JSON.parse(event.data);
-          if (data.type === 'output') {
-            // Check for URLs in the output and make them clickable
-            const urlRegex = /(https?:\/\/[^\s\x1b\x07]+)/g;
-            let output = data.data;
-            
-            // Find URLs in the text (excluding ANSI escape sequences)
-            const urls = [];
-            let match;
-            while ((match = urlRegex.exec(output.replace(/\x1b\[[0-9;]*m/g, ''))) !== null) {
-              urls.push(match[1]);
-            }
-            
-            if (isPlainShell && onProcessComplete) {
-              const cleanOutput = output.replace(/\x1b\[[0-9;]*m/g, ''); // Remove ANSI codes
-              if (cleanOutput.includes('Process exited with code 0')) {
-                onProcessComplete(0); // Success
-              } else if (cleanOutput.match(/Process exited with code (\d+)/)) {
-                const exitCode = parseInt(cleanOutput.match(/Process exited with code (\d+)/)[1]);
-                if (exitCode !== 0) {
-                  onProcessComplete(exitCode); // Error
-                }
-              }
-            }
-            
-            // If URLs found, log them for potential opening
-            
-            terminal.current.write(output);
-          } else if (data.type === 'url_open') {
-            // Handle explicit URL opening requests from server
-            window.open(data.url, '_blank');
-          }
-        } catch (error) {
-        }
-      };
-
-      ws.current.onclose = (event) => {
-        setIsConnected(false);
-        setIsConnecting(false);
-        
-        // Clear terminal content when connection closes
-        if (terminal.current) {
-          terminal.current.clear();
-          terminal.current.write('\x1b[2J\x1b[H'); // Clear screen and move cursor to home
-        }
-        
-        // Don't auto-reconnect anymore - user must manually connect
-      };
-
-      ws.current.onerror = (error) => {
-        setIsConnected(false);
-        setIsConnecting(false);
-      };
-    } catch (error) {
-      setIsConnected(false);
-      setIsConnecting(false);
-    }
-  };
-
+    if (!autoConnect || !isInitialized || isConnecting || isConnected) return;
+    connectToShell();
+  }, [autoConnect, isInitialized, isConnecting, isConnected, connectToShell]);
 
   if (!selectedProject) {
     return (
@@ -526,23 +382,25 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
     );
   }
 
+  if (minimal) {
+    return (
+      <div className="h-full w-full bg-gray-900">
+        <div ref={terminalRef} className="h-full w-full focus:outline-none" style={{ outline: 'none' }} />
+      </div>
+    );
+  }
+
   return (
     <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">
           <div className="flex items-center space-x-2">
             <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
-            {selectedSession && (() => {
-              const displaySessionName = selectedSession.__provider === 'cursor'
-                ? (selectedSession.name || 'Untitled Session')
-                : (selectedSession.summary || 'New Session');
-              return (
-                <span className="text-xs text-blue-300">
-                  ({displaySessionName.slice(0, 30)}...)
-                </span>
-              );
-            })()}
+            {selectedSession && (
+              <span className="text-xs text-blue-300">
+                ({sessionDisplayNameShort}...)
+              </span>
+            )}
             {!selectedSession && (
               <span className="text-xs text-gray-400">(New Session)</span>
             )}
@@ -566,7 +424,7 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
                 <span>Disconnect</span>
               </button>
             )}
-            
+
             <button
               onClick={restartShell}
               disabled={isRestarting || isConnected}
@@ -582,18 +440,15 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
         </div>
       </div>
 
-      {/* Terminal */}
       <div className="flex-1 p-2 overflow-hidden relative">
         <div ref={terminalRef} className="h-full w-full focus:outline-none" style={{ outline: 'none' }} />
-        
-        {/* Loading state */}
+
         {!isInitialized && (
           <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90">
             <div className="text-white">Loading terminal...</div>
           </div>
         )}
-        
-        {/* Connect button when not connected */}
+
         {isInitialized && !isConnected && !isConnecting && (
           <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 p-4">
             <div className="text-center max-w-sm w-full">
@@ -608,23 +463,17 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
                 <span>Continue in Shell</span>
               </button>
               <p className="text-gray-400 text-sm mt-3 px-2">
-                {isPlainShell ? 
+                {isPlainShell ?
                   `Run ${initialCommand || 'command'} in ${selectedProject.displayName}` :
-                  selectedSession ? 
-                    (() => {
-                      const displaySessionName = selectedSession.__provider === 'cursor'
-                        ? (selectedSession.name || 'Untitled Session')
-                        : (selectedSession.summary || 'New Session');
-                      return `Resume session: ${displaySessionName.slice(0, 50)}...`;
-                    })() : 
+                  selectedSession ?
+                    `Resume session: ${sessionDisplayNameLong}...` :
                     'Start a new Claude session'
                 }
               </p>
             </div>
           </div>
         )}
-        
-        {/* Connecting state */}
+
         {isConnecting && (
           <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 p-4">
             <div className="text-center max-w-sm w-full">
@@ -633,7 +482,7 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
                 <span className="text-base font-medium">Connecting to shell...</span>
               </div>
               <p className="text-gray-400 text-sm mt-3 px-2">
-                {isPlainShell ? 
+                {isPlainShell ?
                   `Running ${initialCommand || 'command'} in ${selectedProject.displayName}` :
                   `Starting Claude CLI in ${selectedProject.displayName}`
                 }

src/components/Sidebar.jsx

@@ -303,19 +303,25 @@ function Sidebar({
     }
 
     try {
+      console.log('[Sidebar] Deleting session:', { projectName, sessionId });
       const response = await api.deleteSession(projectName, sessionId);
+      console.log('[Sidebar] Delete response:', { ok: response.ok, status: response.status });
 
       if (response.ok) {
+        console.log('[Sidebar] Session deleted successfully, calling callback');
         // Call parent callback if provided
         if (onSessionDelete) {
           onSessionDelete(sessionId);
+        } else {
+          console.warn('[Sidebar] No onSessionDelete callback provided');
         }
       } else {
-        console.error('Failed to delete session');
+        const errorText = await response.text();
+        console.error('[Sidebar] Failed to delete session:', { status: response.status, error: errorText });
         alert('Failed to delete session. Please try again.');
       }
     } catch (error) {
-      console.error('Error deleting session:', error);
+      console.error('[Sidebar] Error deleting session:', error);
       alert('Error deleting session. Please try again.');
     }
   };

src/components/StandaloneShell.jsx

@@ -1,14 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
 import Shell from './Shell.jsx';
 
 /**
  * Generic Shell wrapper that can be used in tabs, modals, and other contexts.
  * Provides a flexible API for both standalone and session-based usage.
- * 
+ *
  * @param {Object} project - Project object with name, fullPath/path, displayName
  * @param {Object} session - Session object (optional, for tab usage)
  * @param {string} command - Initial command to run (optional)
- * @param {boolean} isActive - Whether the shell is active (for tab usage, default: true)
  * @param {boolean} isPlainShell - Use plain shell mode vs Claude CLI (default: auto-detect)
  * @param {boolean} autoConnect - Whether to auto-connect when mounted (default: true)
  * @param {function} onComplete - Callback when process completes (receives exitCode)
@@ -17,33 +16,32 @@ import Shell from './Shell.jsx';
  * @param {string} className - Additional CSS classes
  * @param {boolean} showHeader - Whether to show custom header (default: true)
  * @param {boolean} compact - Use compact layout (default: false)
+ * @param {boolean} minimal - Use minimal mode: no header, no overlays, auto-connect (default: false)
  */
 function StandaloneShell({
   project,
   session = null,
   command = null,
-  isActive = true,
-  isPlainShell = null, // Auto-detect: true if command provided, false if session provided
+  isPlainShell = null,
   autoConnect = true,
   onComplete = null,
   onClose = null,
   title = null,
   className = "",
   showHeader = true,
-  compact = false
+  compact = false,
+  minimal = false
 }) {
   const [isCompleted, setIsCompleted] = useState(false);
 
-  // Auto-detect isPlainShell based on props
   const shouldUsePlainShell = isPlainShell !== null ? isPlainShell : (command !== null);
 
-  // Handle process completion
-  const handleProcessComplete = (exitCode) => {
+  const handleProcessComplete = useCallback((exitCode) => {
     setIsCompleted(true);
     if (onComplete) {
       onComplete(exitCode);
     }
-  };
+  }, [onComplete]);
 
   if (!project) {
     return (
@@ -62,9 +60,9 @@ function StandaloneShell({
   }
 
   return (
-    <div className={`h-full flex flex-col ${className}`}>
+    <div className={`h-full w-full flex flex-col ${className}`}>
       {/* Optional custom header */}
-      {showHeader && title && (
+      {!minimal && showHeader && title && (
         <div className="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-2">
@@ -89,14 +87,15 @@ function StandaloneShell({
       )}
 
       {/* Shell component wrapper */}
-      <div className="flex-1">
+      <div className="flex-1 w-full min-h-0">
         <Shell
           selectedProject={project}
           selectedSession={session}
-          isActive={isActive}
           initialCommand={command}
           isPlainShell={shouldUsePlainShell}
           onProcessComplete={handleProcessComplete}
+          minimal={minimal}
+          autoConnect={minimal ? true : autoConnect}
         />
       </div>
     </div>

src/components/TasksSettings.jsx

@@ -0,0 +1,107 @@
+import { Zap } from 'lucide-react';
+import { useTasksSettings } from '../contexts/TasksSettingsContext';
+
+function TasksSettings() {
+  const {
+    tasksEnabled,
+    setTasksEnabled,
+    isTaskMasterInstalled,
+    isCheckingInstallation
+  } = useTasksSettings();
+
+  return (
+    <div className="space-y-8">
+      {/* Installation Status Check */}
+      {isCheckingInstallation ? (
+        <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+          <div className="flex items-center gap-3">
+            <div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full"></div>
+            <span className="text-sm text-muted-foreground">Checking TaskMaster installation...</span>
+          </div>
+        </div>
+      ) : (
+        <>
+          {/* TaskMaster Not Installed Warning */}
+          {!isTaskMasterInstalled && (
+            <div className="bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
+              <div className="flex items-start gap-3">
+                <div className="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                  <svg className="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                  </svg>
+                </div>
+                <div className="flex-1">
+                  <div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
+                    TaskMaster AI CLI Not Installed
+                  </div>
+                  <div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
+                    <p>TaskMaster CLI is required to use task management features. Install it to get started:</p>
+
+                    <div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
+                      <code>npm install -g task-master-ai</code>
+                    </div>
+
+                    <div>
+                      <a
+                        href="https://github.com/eyaltoledano/claude-task-master"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm"
+                      >
+                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
+                        </svg>
+                        View on GitHub
+                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                        </svg>
+                      </a>
+                    </div>
+
+                    <div className="space-y-2">
+                      <p className="font-medium">After installation:</p>
+                      <ol className="list-decimal list-inside space-y-1 text-xs">
+                        <li>Restart this application</li>
+                        <li>TaskMaster features will automatically become available</li>
+                        <li>Use <code className="bg-orange-100 dark:bg-orange-800 px-1 rounded">task-master init</code> in your project directory</li>
+                      </ol>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* TaskMaster Settings */}
+          {isTaskMasterInstalled && (
+            <div className="space-y-4">
+              <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="font-medium text-foreground">
+                      Enable TaskMaster Integration
+                    </div>
+                    <div className="text-sm text-muted-foreground mt-1">
+                      Show TaskMaster tasks, banners, and sidebar indicators across the interface
+                    </div>
+                  </div>
+                  <label className="relative inline-flex items-center cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={tasksEnabled}
+                      onChange={(e) => setTasksEnabled(e.target.checked)}
+                      className="sr-only peer"
+                    />
+                    <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default TasksSettings;

src/contexts/AuthContext.jsx

@@ -9,6 +9,8 @@ const AuthContext = createContext({
   logout: () => {},
   isLoading: true,
   needsSetup: false,
+  hasCompletedOnboarding: true,
+  refreshOnboardingStatus: () => {},
   error: null
 });
 
@@ -25,22 +27,38 @@ export const AuthProvider = ({ children }) => {
   const [token, setToken] = useState(localStorage.getItem('auth-token'));
   const [isLoading, setIsLoading] = useState(true);
   const [needsSetup, setNeedsSetup] = useState(false);
+  const [hasCompletedOnboarding, setHasCompletedOnboarding] = useState(true);
   const [error, setError] = useState(null);
 
-  // Check authentication status on mount
   useEffect(() => {
-    // Platform mode: skip all auth checks, set dummy user
     if (import.meta.env.VITE_IS_PLATFORM === 'true') {
       setUser({ username: 'platform-user' });
       setNeedsSetup(false);
+      checkOnboardingStatus();
       setIsLoading(false);
       return;
     }
 
-    // Normal OSS mode: check auth status
     checkAuthStatus();
   }, []);
 
+  const checkOnboardingStatus = async () => {
+    try {
+      const response = await api.user.onboardingStatus();
+      if (response.ok) {
+        const data = await response.json();
+        setHasCompletedOnboarding(data.hasCompletedOnboarding);
+      }
+    } catch (error) {
+      console.error('Error checking onboarding status:', error);
+      setHasCompletedOnboarding(true);
+    }
+  };
+
+  const refreshOnboardingStatus = async () => {
+    await checkOnboardingStatus();
+  };
+
   const checkAuthStatus = async () => {
     try {
       setIsLoading(true);
@@ -65,6 +83,7 @@ export const AuthProvider = ({ children }) => {
             const userData = await userResponse.json();
             setUser(userData.user);
             setNeedsSetup(false);
+            await checkOnboardingStatus();
           } else {
             // Token is invalid
             localStorage.removeItem('auth-token');
@@ -156,6 +175,8 @@ export const AuthProvider = ({ children }) => {
     logout,
     isLoading,
     needsSetup,
+    hasCompletedOnboarding,
+    refreshOnboardingStatus,
     error
   };
 

src/contexts/TaskMasterContext.jsx

@@ -133,36 +133,14 @@ export const TaskMasterProvider = ({ children }) => {
   const setCurrentProject = useCallback(async (project) => {
     try {
       setCurrentProjectState(project);
-      
-      // Clear previous project's data immediately when switching projects
+
       setTasks([]);
       setNextTask(null);
-      setProjectTaskMaster(null); // Clear previous TaskMaster data
-      
-      // Try to fetch fresh TaskMaster detection data for the project
-      if (project?.name) {
-        try {
-          const response = await api.get(`/taskmaster/detect/${encodeURIComponent(project.name)}`);
-          if (response.ok) {
-            const detectionData = await response.json();
-            setProjectTaskMaster(detectionData.taskmaster);
-          } else {
-            // If individual detection fails, fall back to project data from /api/projects
-            console.warn('Individual TaskMaster detection failed, using project data:', response.status);
-            setProjectTaskMaster(project.taskmaster || null);
-          }
-        } catch (detectionError) {
-          // If individual detection fails, fall back to project data from /api/projects  
-          console.warn('TaskMaster detection error, using project data:', detectionError.message);
-          setProjectTaskMaster(project.taskmaster || null);
-        }
-      } else {
-        setProjectTaskMaster(null);
-      }
+
+      setProjectTaskMaster(project?.taskmaster || null);
     } catch (err) {
       console.error('Error in setCurrentProject:', err);
       handleError(err, 'set current project');
-      // Fall back to project data if available
       setProjectTaskMaster(project?.taskmaster || null);
     }
   }, []);

src/utils/api.js

@@ -1,15 +1,16 @@
 // Utility function for authenticated API calls
 export const authenticatedFetch = (url, options = {}) => {
+  const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
   const token = localStorage.getItem('auth-token');
-  
+
   const defaultHeaders = {
     'Content-Type': 'application/json',
   };
-  
-  if (token) {
+
+  if (!isPlatform && token) {
     defaultHeaders['Authorization'] = `Bearer ${token}`;
   }
-  
+
   return fetch(url, {
     ...options,
     headers: {
@@ -137,10 +138,25 @@ export const api = {
   browseFilesystem: (dirPath = null) => {
     const params = new URLSearchParams();
     if (dirPath) params.append('path', dirPath);
-    
+
     return authenticatedFetch(`/api/browse-filesystem?${params}`);
   },
 
+  // User endpoints
+  user: {
+    gitConfig: () => authenticatedFetch('/api/user/git-config'),
+    updateGitConfig: (gitName, gitEmail) =>
+      authenticatedFetch('/api/user/git-config', {
+        method: 'POST',
+        body: JSON.stringify({ gitName, gitEmail }),
+      }),
+    onboardingStatus: () => authenticatedFetch('/api/user/onboarding-status'),
+    completeOnboarding: () =>
+      authenticatedFetch('/api/user/complete-onboarding', {
+        method: 'POST',
+      }),
+  },
+
   // Generic GET method for any endpoint
   get: (endpoint) => authenticatedFetch(`/api${endpoint}`),
 };