Merge branch 'feat/show-grant-permission-button-in-chat-for-claude' of https://github.com/siteboon/claudecodeui into feat/show-grant-permission-button-in-chat-for-claude

fix: normalize file path handling and improve scroll position restoration

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
-  <h1>Claude Code UI</h1>
+  <h1>Cloud CLI (aka Claude Code UI)</h1>
 </div>
 
 
@@ -88,32 +88,31 @@ claude-code-ui
 
 **To restart**: Stop with Ctrl+C and run `claude-code-ui` again.
 
-### CLI Commands
+**To update**:
+```bash
+cloudcli update
+```
+
+### CLI Usage
 
 After global installation, you have access to both `claude-code-ui` and `cloudcli` commands:
 
+| Command / Option | Short | Description |
+|------------------|-------|-------------|
+| `cloudcli` or `claude-code-ui` | | Start the server (default) |
+| `cloudcli start` | | Start the server explicitly |
+| `cloudcli status` | | Show configuration and data locations |
+| `cloudcli update` | | Update to the latest version |
+| `cloudcli help` | | Show help information |
+| `cloudcli version` | | Show version information |
+| `--port <port>` | `-p` | Set server port (default: 3001) |
+| `--database-path <path>` | | Set custom database location |
+
+**Examples:**
 ```bash
-# Start the server (default command)
-claude-code-ui
-cloudcli start
-
-# Show configuration and data locations
-cloudcli status
-
-# Show help information
-cloudcli help
-
-# Show version
-cloudcli version
-```
-
-**The `cloudcli status` command shows you:**
-- Installation directory location
-- Database location (where credentials are stored)
-- Current configuration (PORT, DATABASE_PATH, etc.)
-- Claude projects folder location
-- Configuration file location
-
+cloudcli                          # Start with defaults
+cloudcli -p 8080              # Start on custom port
+cloudcli status                   # Show current configuration
 ```
 
 ### Run as Background Service (Recommended for Production)
@@ -134,6 +133,9 @@ pm2 start claude-code-ui --name "claude-code-ui"
 
 # Or using the shorter alias
 pm2 start cloudcli --name "claude-code-ui"
+
+# Start on a custom port
+pm2 start cloudcli --name "claude-code-ui" -- --port 8080
 ```
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@siteboon/claude-code-ui",
-  "version": "1.13.1",
+  "version": "1.13.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@siteboon/claude-code-ui",
-      "version": "1.13.1",
+      "version": "1.13.6",
       "license": "MIT",
       "dependencies": {
         "@anthropic-ai/claude-agent-sdk": "^0.1.29",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siteboon/claude-code-ui",
-  "version": "1.13.1",
+  "version": "1.13.6",
   "description": "A web-based UI for Claude Code CLI",
   "type": "module",
   "main": "server/index.js",
@@ -10,6 +10,7 @@
   },
   "files": [
     "server/",
+    "shared/",
     "dist/",
     "README.md"
   ],

server/cli.js

@@ -14,6 +14,7 @@
 
 import fs from 'fs';
 import path from 'path';
+import os from 'os';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 
@@ -115,7 +116,7 @@ function showStatus() {
     console.log(`       CONTEXT_WINDOW: ${c.dim(process.env.CONTEXT_WINDOW || '160000 (default)')}`);
 
     // Claude projects folder
-    const claudeProjectsPath = path.join(process.env.HOME, '.claude', 'projects');
+    const claudeProjectsPath = path.join(os.homedir(), '.claude', 'projects');
     const projectsExists = fs.existsSync(claudeProjectsPath);
     console.log(`\n${c.info('[INFO]')} Claude Projects Folder:`);
     console.log(`       ${c.dim(claudeProjectsPath)}`);
@@ -130,10 +131,10 @@ function showStatus() {
 
     console.log('\n' + c.dim('═'.repeat(60)));
     console.log(`\n${c.tip('[TIP]')} Hints:`);
-    console.log(`      ${c.dim('>')} Set DATABASE_PATH env variable to use a custom database location`);
-    console.log(`      ${c.dim('>')} Create .env file in installation directory for persistent config`);
-    console.log(`      ${c.dim('>')} Run "claude-code-ui" or "cloudcli start" to start the server`);
-    console.log(`      ${c.dim('>')} Access the UI at http://localhost:3001 (or custom PORT)\n`);
+    console.log(`      ${c.dim('>')} Use ${c.bright('cloudcli --port 8080')} to run on a custom port`);
+    console.log(`      ${c.dim('>')} Use ${c.bright('cloudcli --database-path /path/to/db')} for custom database`);
+    console.log(`      ${c.dim('>')} Run ${c.bright('cloudcli help')} for all options`);
+    console.log(`      ${c.dim('>')} Access the UI at http://localhost:${process.env.PORT || '3001'}\n`);
 }
 
 // Show help
@@ -144,19 +145,28 @@ function showHelp() {
 ╚═══════════════════════════════════════════════════════════════╝
 
 Usage:
-  claude-code-ui [command]
-  cloudcli [command]
+  claude-code-ui [command] [options]
+  cloudcli [command] [options]
 
 Commands:
   start          Start the Claude Code UI server (default)
   status         Show configuration and data locations
+  update         Update to the latest version
   help           Show this help information
   version        Show version information
 
+Options:
+  -p, --port <port>           Set server port (default: 3001)
+  --database-path <path>      Set custom database location
+  -h, --help                  Show this help information
+  -v, --version               Show version information
+
 Examples:
-  $ claude-code-ui              # Start the server
-  $ cloudcli status             # Show configuration
-  $ cloudcli help               # Show help
+  $ cloudcli                        # Start with defaults
+  $ cloudcli --port 8080            # Start on port 8080
+  $ cloudcli -p 3000                # Short form for port
+  $ cloudcli start --port 4000      # Explicit start command
+  $ cloudcli status                 # Show configuration
 
 Environment Variables:
   PORT                Set server port (default: 3001)
@@ -164,11 +174,6 @@ Environment Variables:
   CLAUDE_CLI_PATH     Set custom Claude CLI path
   CONTEXT_WINDOW      Set context window size (default: 160000)
 
-Configuration:
-  Create a .env file in the installation directory to set
-  persistent environment variables. Use 'cloudcli status' to
-  see the installation directory path.
-
 Documentation:
   ${packageJson.homepage || 'https://github.com/siteboon/claudecodeui'}
 
@@ -182,16 +187,110 @@ function showVersion() {
     console.log(`${packageJson.version}`);
 }
 
+// Compare semver versions, returns true if v1 > v2
+function isNewerVersion(v1, v2) {
+    const parts1 = v1.split('.').map(Number);
+    const parts2 = v2.split('.').map(Number);
+    for (let i = 0; i < 3; i++) {
+        if (parts1[i] > parts2[i]) return true;
+        if (parts1[i] < parts2[i]) return false;
+    }
+    return false;
+}
+
+// Check for updates
+async function checkForUpdates(silent = false) {
+    try {
+        const { execSync } = await import('child_process');
+        const latestVersion = execSync('npm show @siteboon/claude-code-ui version', { encoding: 'utf8' }).trim();
+        const currentVersion = packageJson.version;
+
+        if (isNewerVersion(latestVersion, currentVersion)) {
+            console.log(`\n${c.warn('[UPDATE]')} New version available: ${c.bright(latestVersion)} (current: ${currentVersion})`);
+            console.log(`         Run ${c.bright('cloudcli update')} to update\n`);
+            return { hasUpdate: true, latestVersion, currentVersion };
+        } else if (!silent) {
+            console.log(`${c.ok('[OK]')} You are on the latest version (${currentVersion})`);
+        }
+        return { hasUpdate: false, latestVersion, currentVersion };
+    } catch (e) {
+        if (!silent) {
+            console.log(`${c.warn('[WARN]')} Could not check for updates`);
+        }
+        return { hasUpdate: false, error: e.message };
+    }
+}
+
+// Update the package
+async function updatePackage() {
+    try {
+        const { execSync } = await import('child_process');
+        console.log(`${c.info('[INFO]')} Checking for updates...`);
+
+        const { hasUpdate, latestVersion, currentVersion } = await checkForUpdates(true);
+
+        if (!hasUpdate) {
+            console.log(`${c.ok('[OK]')} Already on the latest version (${currentVersion})`);
+            return;
+        }
+
+        console.log(`${c.info('[INFO]')} Updating from ${currentVersion} to ${latestVersion}...`);
+        execSync('npm update -g @siteboon/claude-code-ui', { stdio: 'inherit' });
+        console.log(`${c.ok('[OK]')} Update complete! Restart cloudcli to use the new version.`);
+    } catch (e) {
+        console.error(`${c.error('[ERROR]')} Update failed: ${e.message}`);
+        console.log(`${c.tip('[TIP]')} Try running manually: npm update -g @siteboon/claude-code-ui`);
+    }
+}
+
 // Start the server
 async function startServer() {
+    // Check for updates silently on startup
+    checkForUpdates(true);
+
     // Import and run the server
     await import('./index.js');
 }
 
+// Parse CLI arguments
+function parseArgs(args) {
+    const parsed = { command: 'start', options: {} };
+
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+
+        if (arg === '--port' || arg === '-p') {
+            parsed.options.port = args[++i];
+        } else if (arg.startsWith('--port=')) {
+            parsed.options.port = arg.split('=')[1];
+        } else if (arg === '--database-path') {
+            parsed.options.databasePath = args[++i];
+        } else if (arg.startsWith('--database-path=')) {
+            parsed.options.databasePath = arg.split('=')[1];
+        } else if (arg === '--help' || arg === '-h') {
+            parsed.command = 'help';
+        } else if (arg === '--version' || arg === '-v') {
+            parsed.command = 'version';
+        } else if (!arg.startsWith('-')) {
+            parsed.command = arg;
+        }
+    }
+
+    return parsed;
+}
+
 // Main CLI handler
 async function main() {
     const args = process.argv.slice(2);
-    const command = args[0] || 'start';
+    const { command, options } = parseArgs(args);
+
+    // Apply CLI options to environment variables
+    if (options.port) {
+        process.env.PORT = options.port;
+    }
+    if (options.databasePath) {
+        process.env.DATABASE_PATH = options.databasePath;
+    }
 
     switch (command) {
         case 'start':
@@ -211,6 +310,9 @@ async function main() {
         case '--version':
             showVersion();
             break;
+        case 'update':
+            await updatePackage();
+            break;
         default:
             console.error(`\n❌ Unknown command: ${command}`);
             console.log('   Run "cloudcli help" for usage information.\n');

server/index.js

@@ -84,7 +84,7 @@ const connectedClients = new Set();
 // Setup file system watcher for Claude projects folder using chokidar
 async function setupProjectsWatcher() {
     const chokidar = (await import('chokidar')).default;
-    const claudeProjectsPath = path.join(process.env.HOME, '.claude', 'projects');
+    const claudeProjectsPath = path.join(os.homedir(), '.claude', 'projects');
 
     if (projectsWatcher) {
         projectsWatcher.close();
@@ -462,7 +462,7 @@ app.post('/api/projects/create', authenticateToken, async (req, res) => {
 });
 
 // Browse filesystem endpoint for project suggestions - uses existing getFileTree
-app.get('/api/browse-filesystem', authenticateToken, async (req, res) => {    
+app.get('/api/browse-filesystem', authenticateToken, async (req, res) => {
     try {
         const { path: dirPath } = req.query;
         
@@ -510,9 +510,9 @@ app.get('/api/browse-filesystem', authenticateToken, async (req, res) => {
             suggestions.push(...directories);
         }
         
-        res.json({ 
+        res.json({
             path: targetPath,
-            suggestions: suggestions 
+            suggestions: suggestions
         });
         
     } catch (error) {
@@ -1015,7 +1015,7 @@ function handleShellConnection(ws) {
                         name: 'xterm-256color',
                         cols: termCols,
                         rows: termRows,
-                        cwd: process.env.HOME || (os.platform() === 'win32' ? process.env.USERPROFILE : '/'),
+                        cwd: os.homedir(),
                         env: {
                             ...process.env,
                             TERM: 'xterm-256color',

server/openai-codex.js

@@ -280,7 +280,8 @@ export async function queryCodex(command, options = {}, ws) {
     // Send completion event
     sendMessage(ws, {
       type: 'codex-complete',
-      sessionId: currentSessionId
+      sessionId: currentSessionId,
+      actualSessionId: thread.id
     });
 
   } catch (error) {

server/projects.js

@@ -204,7 +204,7 @@ function clearProjectDirectoryCache() {
 
 // Load project configuration file
 async function loadProjectConfig() {
-  const configPath = path.join(process.env.HOME, '.claude', 'project-config.json');
+  const configPath = path.join(os.homedir(), '.claude', 'project-config.json');
   try {
     const configData = await fs.readFile(configPath, 'utf8');
     return JSON.parse(configData);
@@ -216,7 +216,7 @@ async function loadProjectConfig() {
 
 // Save project configuration file
 async function saveProjectConfig(config) {
-  const claudeDir = path.join(process.env.HOME, '.claude');
+  const claudeDir = path.join(os.homedir(), '.claude');
   const configPath = path.join(claudeDir, 'project-config.json');
   
   // Ensure the .claude directory exists
@@ -276,7 +276,7 @@ async function extractProjectDirectory(projectName) {
     return originalPath;
   }
 
-  const projectDir = path.join(process.env.HOME, '.claude', 'projects', projectName);
+  const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
   const cwdCounts = new Map();
   let latestTimestamp = 0;
   let latestCwd = null;
@@ -380,7 +380,7 @@ async function extractProjectDirectory(projectName) {
 }
 
 async function getProjects() {
-  const claudeDir = path.join(process.env.HOME, '.claude', 'projects');
+  const claudeDir = path.join(os.homedir(), '.claude', 'projects');
   const config = await loadProjectConfig();
   const projects = [];
   const existingProjects = new Set();
@@ -546,7 +546,7 @@ async function getProjects() {
 }
 
 async function getSessions(projectName, limit = 5, offset = 0) {
-  const projectDir = path.join(process.env.HOME, '.claude', 'projects', projectName);
+  const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
 
   try {
     const files = await fs.readdir(projectDir);
@@ -828,7 +828,7 @@ async function parseJsonlSessions(filePath) {
 
 // Get messages for a specific session with pagination support
 async function getSessionMessages(projectName, sessionId, limit = null, offset = 0) {
-  const projectDir = path.join(process.env.HOME, '.claude', 'projects', projectName);
+  const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
 
   try {
     const files = await fs.readdir(projectDir);
@@ -917,7 +917,7 @@ async function renameProject(projectName, newDisplayName) {
 
 // Delete a session from a project
 async function deleteSession(projectName, sessionId) {
-  const projectDir = path.join(process.env.HOME, '.claude', 'projects', projectName);
+  const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
   
   try {
     const files = await fs.readdir(projectDir);
@@ -980,7 +980,7 @@ async function isProjectEmpty(projectName) {
 
 // Delete an empty project
 async function deleteProject(projectName) {
-  const projectDir = path.join(process.env.HOME, '.claude', 'projects', projectName);
+  const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
   
   try {
     // First check if the project is empty
@@ -1020,7 +1020,7 @@ async function addProjectManually(projectPath, displayName = null) {
   
   // Check if project already exists in config
   const config = await loadProjectConfig();
-  const projectDir = path.join(process.env.HOME, '.claude', 'projects', projectName);
+  const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
 
   if (config[projectName]) {
     throw new Error(`Project already configured for path: ${absolutePath}`);
@@ -1206,7 +1206,12 @@ async function getCodexSessions(projectPath) {
         const sessionData = await parseCodexSessionFile(filePath);
 
         // Check if this session matches the project path
-        if (sessionData && sessionData.cwd === projectPath) {
+        // Handle Windows long paths with \\?\ prefix
+        const sessionCwd = sessionData?.cwd || '';
+        const cleanSessionCwd = sessionCwd.startsWith('\\\\?\\') ? sessionCwd.slice(4) : sessionCwd;
+        const cleanProjectPath = projectPath.startsWith('\\\\?\\') ? projectPath.slice(4) : projectPath;
+
+        if (sessionData && (sessionData.cwd === projectPath || cleanSessionCwd === cleanProjectPath || path.relative(cleanSessionCwd, cleanProjectPath) === '')) {
           sessions.push({
             id: sessionData.id,
             summary: sessionData.summary || 'Codex Session',
@@ -1273,12 +1278,12 @@ async function parseCodexSessionFile(filePath) {
           // Count messages and extract user messages for summary
           if (entry.type === 'event_msg' && entry.payload?.type === 'user_message') {
             messageCount++;
-            if (entry.payload.text) {
-              lastUserMessage = entry.payload.text;
+            if (entry.payload.message) {
+              lastUserMessage = entry.payload.message;
             }
           }
 
-          if (entry.type === 'response_item' && entry.payload?.type === 'message') {
+          if (entry.type === 'response_item' && entry.payload?.type === 'message' && entry.payload.role === 'assistant') {
             messageCount++;
           }
 

server/routes/codex.js

@@ -8,6 +8,17 @@ import { getCodexSessions, getCodexSessionMessages, deleteCodexSession } from '.
 
 const router = express.Router();
 
+function createCliResponder(res) {
+  let responded = false;
+  return (status, payload) => {
+    if (responded || res.headersSent) {
+      return;
+    }
+    responded = true;
+    res.status(status).json(payload);
+  };
+}
+
 router.get('/config', async (req, res) => {
   try {
     const configPath = path.join(os.homedir(), '.codex', 'config.toml');
@@ -88,24 +99,30 @@ router.delete('/sessions/:sessionId', async (req, res) => {
 
 router.get('/mcp/cli/list', async (req, res) => {
   try {
+    const respond = createCliResponder(res);
     const proc = spawn('codex', ['mcp', 'list'], { stdio: ['pipe', 'pipe', 'pipe'] });
 
     let stdout = '';
     let stderr = '';
 
-    proc.stdout.on('data', (data) => { stdout += data.toString(); });
-    proc.stderr.on('data', (data) => { stderr += data.toString(); });
+    proc.stdout?.on('data', (data) => { stdout += data.toString(); });
+    proc.stderr?.on('data', (data) => { stderr += data.toString(); });
 
     proc.on('close', (code) => {
       if (code === 0) {
-        res.json({ success: true, output: stdout, servers: parseCodexListOutput(stdout) });
+        respond(200, { success: true, output: stdout, servers: parseCodexListOutput(stdout) });
       } else {
-        res.status(500).json({ error: 'Codex CLI command failed', details: stderr });
+        respond(500, { error: 'Codex CLI command failed', details: stderr || `Exited with code ${code}` });
       }
     });
 
     proc.on('error', (error) => {
-      res.status(500).json({ error: 'Failed to run Codex CLI', details: error.message });
+      const isMissing = error?.code === 'ENOENT';
+      respond(isMissing ? 503 : 500, {
+        error: isMissing ? 'Codex CLI not installed' : 'Failed to run Codex CLI',
+        details: error.message,
+        code: error.code
+      });
     });
   } catch (error) {
     res.status(500).json({ error: 'Failed to list MCP servers', details: error.message });
@@ -133,24 +150,30 @@ router.post('/mcp/cli/add', async (req, res) => {
       cliArgs.push(...args);
     }
 
+    const respond = createCliResponder(res);
     const proc = spawn('codex', cliArgs, { stdio: ['pipe', 'pipe', 'pipe'] });
 
     let stdout = '';
     let stderr = '';
 
-    proc.stdout.on('data', (data) => { stdout += data.toString(); });
-    proc.stderr.on('data', (data) => { stderr += data.toString(); });
+    proc.stdout?.on('data', (data) => { stdout += data.toString(); });
+    proc.stderr?.on('data', (data) => { stderr += data.toString(); });
 
     proc.on('close', (code) => {
       if (code === 0) {
-        res.json({ success: true, output: stdout, message: `MCP server "${name}" added successfully` });
+        respond(200, { success: true, output: stdout, message: `MCP server "${name}" added successfully` });
       } else {
-        res.status(400).json({ error: 'Codex CLI command failed', details: stderr });
+        respond(400, { error: 'Codex CLI command failed', details: stderr || `Exited with code ${code}` });
       }
     });
 
     proc.on('error', (error) => {
-      res.status(500).json({ error: 'Failed to run Codex CLI', details: error.message });
+      const isMissing = error?.code === 'ENOENT';
+      respond(isMissing ? 503 : 500, {
+        error: isMissing ? 'Codex CLI not installed' : 'Failed to run Codex CLI',
+        details: error.message,
+        code: error.code
+      });
     });
   } catch (error) {
     res.status(500).json({ error: 'Failed to add MCP server', details: error.message });
@@ -161,24 +184,30 @@ router.delete('/mcp/cli/remove/:name', async (req, res) => {
   try {
     const { name } = req.params;
 
+    const respond = createCliResponder(res);
     const proc = spawn('codex', ['mcp', 'remove', name], { stdio: ['pipe', 'pipe', 'pipe'] });
 
     let stdout = '';
     let stderr = '';
 
-    proc.stdout.on('data', (data) => { stdout += data.toString(); });
-    proc.stderr.on('data', (data) => { stderr += data.toString(); });
+    proc.stdout?.on('data', (data) => { stdout += data.toString(); });
+    proc.stderr?.on('data', (data) => { stderr += data.toString(); });
 
     proc.on('close', (code) => {
       if (code === 0) {
-        res.json({ success: true, output: stdout, message: `MCP server "${name}" removed successfully` });
+        respond(200, { success: true, output: stdout, message: `MCP server "${name}" removed successfully` });
       } else {
-        res.status(400).json({ error: 'Codex CLI command failed', details: stderr });
+        respond(400, { error: 'Codex CLI command failed', details: stderr || `Exited with code ${code}` });
       }
     });
 
     proc.on('error', (error) => {
-      res.status(500).json({ error: 'Failed to run Codex CLI', details: error.message });
+      const isMissing = error?.code === 'ENOENT';
+      respond(isMissing ? 503 : 500, {
+        error: isMissing ? 'Codex CLI not installed' : 'Failed to run Codex CLI',
+        details: error.message,
+        code: error.code
+      });
     });
   } catch (error) {
     res.status(500).json({ error: 'Failed to remove MCP server', details: error.message });
@@ -189,24 +218,30 @@ router.get('/mcp/cli/get/:name', async (req, res) => {
   try {
     const { name } = req.params;
 
+    const respond = createCliResponder(res);
     const proc = spawn('codex', ['mcp', 'get', name], { stdio: ['pipe', 'pipe', 'pipe'] });
 
     let stdout = '';
     let stderr = '';
 
-    proc.stdout.on('data', (data) => { stdout += data.toString(); });
-    proc.stderr.on('data', (data) => { stderr += data.toString(); });
+    proc.stdout?.on('data', (data) => { stdout += data.toString(); });
+    proc.stderr?.on('data', (data) => { stderr += data.toString(); });
 
     proc.on('close', (code) => {
       if (code === 0) {
-        res.json({ success: true, output: stdout, server: parseCodexGetOutput(stdout) });
+        respond(200, { success: true, output: stdout, server: parseCodexGetOutput(stdout) });
       } else {
-        res.status(404).json({ error: 'Codex CLI command failed', details: stderr });
+        respond(404, { error: 'Codex CLI command failed', details: stderr || `Exited with code ${code}` });
       }
     });
 
     proc.on('error', (error) => {
-      res.status(500).json({ error: 'Failed to run Codex CLI', details: error.message });
+      const isMissing = error?.code === 'ENOENT';
+      respond(isMissing ? 503 : 500, {
+        error: isMissing ? 'Codex CLI not installed' : 'Failed to run Codex CLI',
+        details: error.message,
+        code: error.code
+      });
     });
   } catch (error) {
     res.status(500).json({ error: 'Failed to get MCP server details', details: error.message });

src/App.jsx

@@ -177,7 +177,9 @@ function AppContent() {
         // If so, and the session is not active, trigger a message reload in ChatInterface
         if (latestMessage.changedFile && selectedSession && selectedProject) {
           // Extract session ID from changedFile (format: "project-name/session-id.jsonl")
-          const changedFileParts = latestMessage.changedFile.split('/');
+          const normalized = latestMessage.changedFile.replace(/\\/g, '/');
+          const changedFileParts = normalized.split('/');
+
           if (changedFileParts.length >= 2) {
             const filename = changedFileParts[changedFileParts.length - 1];
             const changedSessionId = filename.replace('.jsonl', '');

src/components/ChatInterface.jsx

@@ -16,7 +16,7 @@
  * This ensures uninterrupted chat experience by coordinating with App.jsx to pause sidebar updates.
  */
 
-import React, { useState, useEffect, useRef, useMemo, useCallback, memo } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect, memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
@@ -236,6 +236,97 @@ const safeLocalStorage = {
   }
 };
 
+const CLAUDE_SETTINGS_KEY = 'claude-settings';
+
+function safeJsonParse(value) {
+  if (!value || typeof value !== 'string') return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+function getClaudeSettings() {
+  const raw = safeLocalStorage.getItem(CLAUDE_SETTINGS_KEY);
+  if (!raw) {
+    return {
+      allowedTools: [],
+      disallowedTools: [],
+      skipPermissions: false,
+      projectSortOrder: 'name'
+    };
+  }
+
+  try {
+    const parsed = JSON.parse(raw);
+    return {
+      ...parsed,
+      allowedTools: Array.isArray(parsed.allowedTools) ? parsed.allowedTools : [],
+      disallowedTools: Array.isArray(parsed.disallowedTools) ? parsed.disallowedTools : [],
+      skipPermissions: Boolean(parsed.skipPermissions),
+      projectSortOrder: parsed.projectSortOrder || 'name'
+    };
+  } catch {
+    return {
+      allowedTools: [],
+      disallowedTools: [],
+      skipPermissions: false,
+      projectSortOrder: 'name'
+    };
+  }
+}
+
+function buildClaudeToolPermissionEntry(toolName, toolInput) {
+  if (!toolName) return null;
+  if (toolName !== 'Bash') return toolName;
+
+  const parsed = safeJsonParse(toolInput);
+  const command = typeof parsed?.command === 'string' ? parsed.command.trim() : '';
+  if (!command) return toolName;
+
+  const tokens = command.split(/\s+/);
+  if (tokens.length === 0) return toolName;
+
+  // For Bash, allow the command family instead of every Bash invocation.
+  if (tokens[0] === 'git' && tokens[1]) {
+    return `Bash(${tokens[0]} ${tokens[1]}:*)`;
+  }
+  return `Bash(${tokens[0]}:*)`;
+}
+
+function getClaudePermissionSuggestion(message, provider) {
+  if (provider !== 'claude') return null;
+  if (!message?.toolResult?.isError) return null;
+
+  const toolName = message?.toolName;
+  const entry = buildClaudeToolPermissionEntry(toolName, message.toolInput);
+
+  if (!entry) return null;
+
+  const settings = getClaudeSettings();
+  const isAllowed = settings.allowedTools.includes(entry);
+  return { toolName, entry, isAllowed };
+}
+
+function grantClaudeToolPermission(entry) {
+  if (!entry) return { success: false };
+
+  const settings = getClaudeSettings();
+  const alreadyAllowed = settings.allowedTools.includes(entry);
+  const nextAllowed = alreadyAllowed ? settings.allowedTools : [...settings.allowedTools, entry];
+  const nextDisallowed = settings.disallowedTools.filter(tool => tool !== entry);
+  const updatedSettings = {
+    ...settings,
+    allowedTools: nextAllowed,
+    disallowedTools: nextDisallowed,
+    lastUpdated: new Date().toISOString()
+  };
+
+  safeLocalStorage.setItem(CLAUDE_SETTINGS_KEY, JSON.stringify(updatedSettings));
+  return { success: true, alreadyAllowed, updatedSettings };
+}
+
 // Common markdown components to ensure consistent rendering (tables, inline code, links, etc.)
 const markdownComponents = {
   code: ({ node, inline, className, children, ...props }) => {
@@ -356,7 +447,7 @@ const markdownComponents = {
 };
 
 // Memoized message component to prevent unnecessary re-renders
-const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, autoExpandTools, showRawParameters, showThinking, selectedProject }) => {
+const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, onGrantToolPermission, autoExpandTools, showRawParameters, showThinking, selectedProject, provider }) => {
   const isGrouped = prevMessage && prevMessage.type === message.type &&
                    ((prevMessage.type === 'assistant') ||
                     (prevMessage.type === 'user') ||
@@ -364,6 +455,13 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                     (prevMessage.type === 'error'));
   const messageRef = React.useRef(null);
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const permissionSuggestion = getClaudePermissionSuggestion(message, provider);
+  const [permissionGrantState, setPermissionGrantState] = React.useState('idle');
+
+  React.useEffect(() => {
+    setPermissionGrantState('idle');
+  }, [permissionSuggestion?.entry, message.toolId]);
+
   React.useEffect(() => {
     if (!autoExpandTools || !messageRef.current || !message.isToolUse) return;
     
@@ -1358,6 +1456,59 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                           </Markdown>
                         );
                       })()}
+                      {permissionSuggestion && (
+                        <div className="mt-4 border-t border-red-200/60 dark:border-red-800/60 pt-3">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                if (!onGrantToolPermission) return;
+                                const result = onGrantToolPermission(permissionSuggestion);
+                                if (result?.success) {
+                                  setPermissionGrantState('granted');
+                                } else {
+                                  setPermissionGrantState('error');
+                                }
+                              }}
+                              disabled={permissionSuggestion.isAllowed || permissionGrantState === 'granted'}
+                              className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium border transition-colors ${
+                                permissionSuggestion.isAllowed || permissionGrantState === 'granted'
+                                  ? 'bg-green-100 dark:bg-green-900/30 border-green-300/70 dark:border-green-800/60 text-green-800 dark:text-green-200 cursor-default'
+                                  : 'bg-white/80 dark:bg-gray-900/40 border-red-300/70 dark:border-red-800/60 text-red-700 dark:text-red-200 hover:bg-white dark:hover:bg-gray-900/70'
+                              }`}
+                            >
+                              {permissionSuggestion.isAllowed || permissionGrantState === 'granted'
+                                ? 'Permission added'
+                                : `Grant permission for ${permissionSuggestion.toolName}`}
+                            </button>
+                            {onShowSettings && (
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  onShowSettings();
+                                }}
+                                className="text-xs text-red-700 dark:text-red-200 underline hover:text-red-800 dark:hover:text-red-100"
+                              >
+                                Open settings
+                              </button>
+                            )}
+                          </div>
+                          <div className="mt-2 text-xs text-red-700/90 dark:text-red-200/80">
+                            Adds <span className="font-mono">{permissionSuggestion.entry}</span> to Allowed Tools.
+                          </div>
+                          {permissionGrantState === 'error' && (
+                            <div className="mt-2 text-xs text-red-700 dark:text-red-200">
+                              Unable to update permissions. Please try again.
+                            </div>
+                          )}
+                          {(permissionSuggestion.isAllowed || permissionGrantState === 'granted') && (
+                            <div className="mt-2 text-xs text-green-700 dark:text-green-200">
+                              Permission saved. Retry the request to use the tool.
+                            </div>
+                          )}
+                        </div>
+                      )}
                     </div>
                   </div>
                   );
@@ -1696,6 +1847,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   const inputContainerRef = useRef(null);
   const scrollContainerRef = useRef(null);
   const isLoadingSessionRef = useRef(false); // Track session loading to prevent multiple scrolls
+  const isLoadingMoreRef = useRef(false);
+  const topLoadLockRef = useRef(false);
+  const pendingScrollRestoreRef = useRef(null);
   // Streaming throttle buffers
   const streamBufferRef = useRef('');
   const streamTimerRef = useRef(null);
@@ -2710,6 +2864,39 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     return scrollHeight - scrollTop - clientHeight < 50;
   }, []);
 
+  const loadOlderMessages = useCallback(async (container) => {
+    if (!container || isLoadingMoreRef.current || isLoadingMoreMessages) return false;
+    if (!hasMoreMessages || !selectedSession || !selectedProject) return false;
+
+    const sessionProvider = selectedSession.__provider || 'claude';
+    if (sessionProvider === 'cursor') return false;
+
+    isLoadingMoreRef.current = true;
+    const previousScrollHeight = container.scrollHeight;
+    const previousScrollTop = container.scrollTop;
+
+    try {
+      const moreMessages = await loadSessionMessages(
+        selectedProject.name,
+        selectedSession.id,
+        true,
+        sessionProvider
+      );
+
+      if (moreMessages.length > 0) {
+        pendingScrollRestoreRef.current = {
+          height: previousScrollHeight,
+          top: previousScrollTop
+        };
+        // Prepend new messages to the existing ones
+        setSessionMessages(prev => [...moreMessages, ...prev]);
+      }
+      return true;
+    } finally {
+      isLoadingMoreRef.current = false;
+    }
+  }, [hasMoreMessages, isLoadingMoreMessages, selectedSession, selectedProject, loadSessionMessages]);
+
   // Handle scroll events to detect when user manually scrolls up and load more messages
   const handleScroll = useCallback(async () => {
     if (scrollContainerRef.current) {
@@ -2719,32 +2906,29 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
       
       // Check if we should load more messages (scrolled near top)
       const scrolledNearTop = container.scrollTop < 100;
-      const provider = localStorage.getItem('selected-provider') || 'claude';
-      
-      if (scrolledNearTop && hasMoreMessages && !isLoadingMoreMessages && selectedSession && selectedProject && provider !== 'cursor') {
-        // Save current scroll position
-        const previousScrollHeight = container.scrollHeight;
-        const previousScrollTop = container.scrollTop;
-        
-        // Load more messages
-        const moreMessages = await loadSessionMessages(selectedProject.name, selectedSession.id, true, selectedSession.__provider || 'claude');
-        
-        if (moreMessages.length > 0) {
-          // Prepend new messages to the existing ones
-          setSessionMessages(prev => [...moreMessages, ...prev]);
-          
-          // Restore scroll position after DOM update
-          setTimeout(() => {
-            if (scrollContainerRef.current) {
-              const newScrollHeight = scrollContainerRef.current.scrollHeight;
-              const scrollDiff = newScrollHeight - previousScrollHeight;
-              scrollContainerRef.current.scrollTop = previousScrollTop + scrollDiff;
-            }
-          }, 0);
+      if (!scrolledNearTop) {
+        topLoadLockRef.current = false;
+      } else if (!topLoadLockRef.current) {
+        const didLoad = await loadOlderMessages(container);
+        if (didLoad) {
+          topLoadLockRef.current = true;
         }
       }
     }
-  }, [isNearBottom, hasMoreMessages, isLoadingMoreMessages, selectedSession, selectedProject, loadSessionMessages]);
+  }, [isNearBottom, loadOlderMessages]);
+
+  // Restore scroll position after paginated messages render
+  useLayoutEffect(() => {
+    if (!pendingScrollRestoreRef.current || !scrollContainerRef.current) return;
+
+    const { height, top } = pendingScrollRestoreRef.current;
+    const container = scrollContainerRef.current;
+    const newScrollHeight = container.scrollHeight;
+    const scrollDiff = newScrollHeight - height;
+
+    container.scrollTop = top + Math.max(scrollDiff, 0);
+    pendingScrollRestoreRef.current = null;
+  }, [chatMessages.length]);
 
   useEffect(() => {
     // Load session messages when session changes
@@ -2873,7 +3057,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
             // convertedMessages will be automatically updated via useMemo
 
             // Smart scroll behavior: only auto-scroll if user is near bottom
-            if (isNearBottom && autoScrollToBottom) {
+            const shouldAutoScroll = autoScrollToBottom && isNearBottom();
+            if (shouldAutoScroll) {
               setTimeout(() => scrollToBottom(), 200);
             }
             // If user scrolled up, preserve their position (they're reading history)
@@ -2971,6 +3156,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           if (latestMessage.sessionId && !currentSessionId) {
             sessionStorage.setItem('pendingSessionId', latestMessage.sessionId);
             
+            // Mark as system change to prevent clearing messages when session ID updates
+            setIsSystemSessionChange(true);
+            
             // Session Protection: Replace temporary "new-session-*" identifier with real session ID
             // This maintains protection continuity - no gap between temp ID and real ID
             // The temporary session is removed and real session is marked as active
@@ -3530,8 +3718,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           }
 
           const codexPendingSessionId = sessionStorage.getItem('pendingSessionId');
+          const codexActualSessionId = latestMessage.actualSessionId || codexPendingSessionId;
           if (codexPendingSessionId && !currentSessionId) {
-            setCurrentSessionId(codexPendingSessionId);
+            setCurrentSessionId(codexActualSessionId);
+            setIsSystemSessionChange(true);
+            if (onNavigateToSession) {
+              onNavigateToSession(codexActualSessionId);
+            }
             sessionStorage.removeItem('pendingSessionId');
             console.log('Codex session complete, ID set to:', codexPendingSessionId);
           }
@@ -4091,6 +4284,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     }
   }, [input, isLoading, selectedProject, attachedImages, currentSessionId, selectedSession, provider, permissionMode, onSessionActive, cursorModel, claudeModel, codexModel, sendMessage, setInput, setAttachedImages, setUploadingImages, setImageErrors, setIsTextareaExpanded, textareaRef, setChatMessages, setIsLoading, setCanAbortSession, setClaudeStatus, setIsUserScrolledUp, scrollToBottom]);
 
+  const handleGrantToolPermission = useCallback((suggestion) => {
+    if (!suggestion || provider !== 'claude') {
+      return { success: false };
+    }
+    return grantClaudeToolPermission(suggestion.entry);
+  }, [provider]);
+
   // Store handleSubmit in ref so handleCustomCommand can access it
   useEffect(() => {
     handleSubmitRef.current = handleSubmit;
@@ -4410,6 +4610,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
         {/* Messages Area - Scrollable Middle Section */}
       <div 
         ref={scrollContainerRef}
+        onWheel={handleScroll}
+        onTouchMove={handleScroll}
         className="flex-1 overflow-y-auto overflow-x-hidden px-0 py-3 sm:p-4 space-y-3 sm:space-y-4 relative"
       >
         {isLoadingSessionMessages && chatMessages.length === 0 ? (
@@ -4667,10 +4869,12 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                   createDiff={createDiff}
                   onFileOpen={onFileOpen}
                   onShowSettings={onShowSettings}
+                  onGrantToolPermission={handleGrantToolPermission}
                   autoExpandTools={autoExpandTools}
                   showRawParameters={showRawParameters}
                   showThinking={showThinking}
                   selectedProject={selectedProject}
+                  provider={provider}
                 />
               );
             })}

src/components/LoginModal.jsx

@@ -25,13 +25,15 @@ function LoginModal({
   const getCommand = () => {
     if (customCommand) return customCommand;
 
+    const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
+
     switch (provider) {
       case 'claude':
         return 'claude setup-token --dangerously-skip-permissions';
       case 'cursor':
         return 'cursor-agent login';
       case 'codex':
-        return 'codex login';
+        return isPlatform ? 'codex login --device-auth' : 'codex login';
       default:
         return 'claude setup-token --dangerously-skip-permissions';
     }

src/components/Sidebar.jsx

@@ -595,9 +595,44 @@ function Sidebar({
         </div>
       </div>
 
-      {/* Search Filter and Actions */}
+      {/* Action Buttons - Desktop only - Always show when not loading */}
+      {!isLoading && !isMobile && (
+        <div className="px-3 md:px-4 py-2 border-b border-border">
+          <div className="flex gap-2">
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90 transition-all duration-200"
+              onClick={() => setShowNewProject(true)}
+              title="Create new project"
+            >
+              <FolderPlus className="w-3.5 h-3.5 mr-1.5" />
+              New Project
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200 group"
+              onClick={async () => {
+                setIsRefreshing(true);
+                try {
+                  await onRefresh();
+                } finally {
+                  setIsRefreshing(false);
+                }
+              }}
+              disabled={isRefreshing}
+              title="Refresh projects and sessions (Ctrl+R)"
+            >
+              <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''} group-hover:rotate-180 transition-transform duration-300`} />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Search Filter - Only show when there are projects */}
       {projects.length > 0 && !isLoading && (
-        <div className="px-3 md:px-4 py-2 border-b border-border space-y-2">
+        <div className="px-3 md:px-4 py-2 border-b border-border">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
             <Input
@@ -616,39 +651,6 @@ function Sidebar({
               </button>
             )}
           </div>
-
-          {/* Action Buttons - Desktop only */}
-          {!isMobile && (
-            <div className="flex gap-2">
-              <Button
-                variant="default"
-                size="sm"
-                className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90 transition-all duration-200"
-                onClick={() => setShowNewProject(true)}
-                title="Create new project (Ctrl+N)"
-              >
-                <FolderPlus className="w-3.5 h-3.5 mr-1.5" />
-                New Project
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200 group"
-                onClick={async () => {
-                  setIsRefreshing(true);
-                  try {
-                    await onRefresh();
-                  } finally {
-                    setIsRefreshing(false);
-                  }
-                }}
-                disabled={isRefreshing}
-                title="Refresh projects and sessions (Ctrl+R)"
-              >
-                <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''} group-hover:rotate-180 transition-transform duration-300`} />
-              </Button>
-            </div>
-          )}
         </div>
       )}
       
@@ -1392,4 +1394,4 @@ function Sidebar({
   );
 }
 
-export default Sidebar;
+export default Sidebar;