Merge branch 'main' into main

2025-12-10 23:09:46 +00:00 · 2025-08-06 19:57:24 +02:00
parent 9cfccc04f3 a01d6c91e0
commit 2a0e4c58c2
11 changed files with 2076 additions and 1352 deletions
--- a/.env.example
+++ b/.env.example
@@ -7,6 +7,6 @@

 # Backend server port (Express API + WebSocket server)
 #API server
-PORT=3008
+PORT=3001
 #Frontend port
-VITE_PORT=3009
+VITE_PORT=5173
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
  "author": "Claude Code UI Contributors",
  "license": "MIT",
  "dependencies": {
-    "@anthropic-ai/claude-code": "^1.0.24",
    "@codemirror/lang-css": "^6.3.1",
    "@codemirror/lang-html": "^6.4.9",
    "@codemirror/lang-javascript": "^6.2.4",
@@ -40,13 +39,14 @@
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cors": "^2.8.5",
+    "cross-spawn": "^7.0.3",
    "express": "^4.18.2",
    "jsonwebtoken": "^9.0.2",
    "lucide-react": "^0.515.0",
    "mime-types": "^3.0.1",
    "multer": "^2.0.1",
    "node-fetch": "^2.7.0",
-    "node-pty": "^1.0.0",
+    "node-pty": "^1.1.0-beta34",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
--- a/server/claude-cli.js
+++ b/server/claude-cli.js
@@ -1,8 +1,12 @@
 import { spawn } from 'child_process';
+import crossSpawn from 'cross-spawn';
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';

+// Use cross-spawn on Windows for better command execution
+const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;
+
 let activeClaudeProcesses = new Map(); // Track active processes by session ID

 async function spawnClaude(command, options = {}, ws) {
@@ -23,7 +27,11 @@ async function spawnClaude(command, options = {}, ws) {
    
    // Add print flag with command if we have a command
    if (command && command.trim()) {
-      args.push('--print', command);
+
+      // Separate arguments for better cross-platform compatibility
+      // This prevents issues with spaces and quotes on Windows
+      args.push('--print');
+      args.push(command);
    }
    
    // Use cwd (actual project directory) instead of projectPath (Claude's metadata directory)
@@ -63,9 +71,9 @@ async function spawnClaude(command, options = {}, ws) {
          const imageNote = `\n\n[Images provided at the following paths:]\n${tempImagePaths.map((p, i) => `${i + 1}. ${p}`).join('\n')}`;
          const modifiedCommand = command + imageNote;
          
-          // Update the command in args
+          // Update the command in args - now that --print and command are separate
          const printIndex = args.indexOf('--print');
-          if (printIndex !== -1 && args[printIndex + 1] === command) {
+          if (printIndex !== -1 && printIndex + 1 < args.length && args[printIndex + 1] === command) {
            args[printIndex + 1] = modifiedCommand;
          }
        }
@@ -227,7 +235,7 @@ async function spawnClaude(command, options = {}, ws) {
    console.log('🔍 Full command args:', JSON.stringify(args, null, 2));
    console.log('🔍 Final Claude command will be: claude ' + args.join(' '));
    
-    const claudeProcess = spawn('claude', args, {
+    const claudeProcess = spawnFunction('claude', args, {
      cwd: workingDir,
      stdio: ['pipe', 'pipe', 'pipe'],
      env: { ...process.env } // Inherit all environment variables
--- a/server/index.js
+++ b/server/index.js
--- a/server/projects.js
+++ b/server/projects.js
@@ -53,13 +53,8 @@ async function generateDisplayName(projectName, actualProjectDir = null) {
  // If it starts with /, it's an absolute path
  if (projectPath.startsWith('/')) {
    const parts = projectPath.split('/').filter(Boolean);
-    if (parts.length > 3) {
-      // Show last 2 folders with ellipsis: "...projects/myapp"
-      return `.../${parts.slice(-2).join('/')}`;
-    } else {
-      // Show full path if short: "/home/user"
-      return projectPath;
-    }
+    // Return only the last folder name
+    return parts[parts.length - 1] || projectPath;
  }
  
  return projectPath;
--- a/server/routes/auth.js
+++ b/server/routes/auth.js
@@ -1,6 +1,6 @@
 import express from 'express';
 import bcrypt from 'bcrypt';
-import { userDb } from '../database/db.js';
+import { userDb, db } from '../database/db.js';
 import { generateToken, authenticateToken } from '../middleware/auth.js';

 const router = express.Router();
@@ -33,31 +33,41 @@ router.post('/register', async (req, res) => {
      return res.status(400).json({ error: 'Username must be at least 3 characters, password at least 6 characters' });
    }
    
-    // Check if users already exist (only allow one user)
-    const hasUsers = userDb.hasUsers();
-    if (hasUsers) {
-      return res.status(403).json({ error: 'User already exists. This is a single-user system.' });
+    // Use a transaction to prevent race conditions
+    db.prepare('BEGIN').run();
+    try {
+      // Check if users already exist (only allow one user)
+      const hasUsers = userDb.hasUsers();
+      if (hasUsers) {
+        db.prepare('ROLLBACK').run();
+        return res.status(403).json({ error: 'User already exists. This is a single-user system.' });
+      }
+      
+      // Hash password
+      const saltRounds = 12;
+      const passwordHash = await bcrypt.hash(password, saltRounds);
+      
+      // Create user
+      const user = userDb.createUser(username, passwordHash);
+      
+      // Generate token
+      const token = generateToken(user);
+      
+      // Update last login
+      userDb.updateLastLogin(user.id);
+
+      db.prepare('COMMIT').run();
+      
+      res.json({
+        success: true,
+        user: { id: user.id, username: user.username },
+        token
+      });
+    } catch (error) {
+      db.prepare('ROLLBACK').run();
+      throw error;
    }
    
-    // Hash password
-    const saltRounds = 12;
-    const passwordHash = await bcrypt.hash(password, saltRounds);
-    
-    // Create user
-    const user = userDb.createUser(username, passwordHash);
-    
-    // Generate token
-    const token = generateToken(user);
-    
-    // Update last login
-    userDb.updateLastLogin(user.id);
-    
-    res.json({
-      success: true,
-      user: { id: user.id, username: user.username },
-      token
-    });
-    
  } catch (error) {
    console.error('Registration error:', error);
    if (error.code === 'SQLITE_CONSTRAINT_UNIQUE') {
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -26,6 +26,88 @@ import ClaudeStatus from './ClaudeStatus';
 import { MicButton } from './MicButton.jsx';
 import { api } from '../utils/api';

+// Safe localStorage utility to handle quota exceeded errors
+const safeLocalStorage = {
+  setItem: (key, value) => {
+    try {
+      // For chat messages, implement compression and size limits
+      if (key.startsWith('chat_messages_') && typeof value === 'string') {
+        try {
+          const parsed = JSON.parse(value);
+          // Limit to last 50 messages to prevent storage bloat
+          if (Array.isArray(parsed) && parsed.length > 50) {
+            console.warn(`Truncating chat history for ${key} from ${parsed.length} to 50 messages`);
+            const truncated = parsed.slice(-50);
+            value = JSON.stringify(truncated);
+          }
+        } catch (parseError) {
+          console.warn('Could not parse chat messages for truncation:', parseError);
+        }
+      }
+      
+      localStorage.setItem(key, value);
+    } catch (error) {
+      if (error.name === 'QuotaExceededError') {
+        console.warn('localStorage quota exceeded, clearing old data');
+        // Clear old chat messages to free up space
+        const keys = Object.keys(localStorage);
+        const chatKeys = keys.filter(k => k.startsWith('chat_messages_')).sort();
+        
+        // Remove oldest chat data first, keeping only the 3 most recent projects
+        if (chatKeys.length > 3) {
+          chatKeys.slice(0, chatKeys.length - 3).forEach(k => {
+            localStorage.removeItem(k);
+            console.log(`Removed old chat data: ${k}`);
+          });
+        }
+        
+        // If still failing, clear draft inputs too
+        const draftKeys = keys.filter(k => k.startsWith('draft_input_'));
+        draftKeys.forEach(k => {
+          localStorage.removeItem(k);
+        });
+        
+        // Try again with reduced data
+        try {
+          localStorage.setItem(key, value);
+        } catch (retryError) {
+          console.error('Failed to save to localStorage even after cleanup:', retryError);
+          // Last resort: Try to save just the last 10 messages
+          if (key.startsWith('chat_messages_') && typeof value === 'string') {
+            try {
+              const parsed = JSON.parse(value);
+              if (Array.isArray(parsed) && parsed.length > 10) {
+                const minimal = parsed.slice(-10);
+                localStorage.setItem(key, JSON.stringify(minimal));
+                console.warn('Saved only last 10 messages due to quota constraints');
+              }
+            } catch (finalError) {
+              console.error('Final save attempt failed:', finalError);
+            }
+          }
+        }
+      } else {
+        console.error('localStorage error:', error);
+      }
+    }
+  },
+  getItem: (key) => {
+    try {
+      return localStorage.getItem(key);
+    } catch (error) {
+      console.error('localStorage getItem error:', error);
+      return null;
+    }
+  },
+  removeItem: (key) => {
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.error('localStorage removeItem error:', error);
+    }
+  }
+};
+
 // Memoized message component to prevent unnecessary re-renders
 const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, autoExpandTools, showRawParameters }) => {
  const isGrouped = prevMessage && prevMessage.type === message.type && 
@@ -1019,13 +1101,13 @@ const ImageAttachment = ({ file, onRemove, uploadProgress, error }) => {
 function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, messages, onFileOpen, onInputFocusChange, onSessionActive, onSessionInactive, onReplaceTemporarySession, onNavigateToSession, onShowSettings, autoExpandTools, showRawParameters, autoScrollToBottom, sendByCtrlEnter }) {
  const [input, setInput] = useState(() => {
    if (typeof window !== 'undefined' && selectedProject) {
-      return localStorage.getItem(`draft_input_${selectedProject.name}`) || '';
+      return safeLocalStorage.getItem(`draft_input_${selectedProject.name}`) || '';
    }
    return '';
  });
  const [chatMessages, setChatMessages] = useState(() => {
    if (typeof window !== 'undefined' && selectedProject) {
-      const saved = localStorage.getItem(`chat_messages_${selectedProject.name}`);
+      const saved = safeLocalStorage.getItem(`chat_messages_${selectedProject.name}`);
      return saved ? JSON.parse(saved) : [];
    }
    return [];
@@ -1310,16 +1392,16 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
  // Persist input draft to localStorage
  useEffect(() => {
    if (selectedProject && input !== '') {
-      localStorage.setItem(`draft_input_${selectedProject.name}`, input);
+      safeLocalStorage.setItem(`draft_input_${selectedProject.name}`, input);
    } else if (selectedProject && input === '') {
-      localStorage.removeItem(`draft_input_${selectedProject.name}`);
+      safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`);
    }
  }, [input, selectedProject]);

  // Persist chat messages to localStorage
  useEffect(() => {
    if (selectedProject && chatMessages.length > 0) {
-      localStorage.setItem(`chat_messages_${selectedProject.name}`, JSON.stringify(chatMessages));
+      safeLocalStorage.setItem(`chat_messages_${selectedProject.name}`, JSON.stringify(chatMessages));
    }
  }, [chatMessages, selectedProject]);

@@ -1327,7 +1409,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
  useEffect(() => {
    if (selectedProject) {
      // Always load saved input draft for the project
-      const savedInput = localStorage.getItem(`draft_input_${selectedProject.name}`) || '';
+      const savedInput = safeLocalStorage.getItem(`draft_input_${selectedProject.name}`) || '';
      if (savedInput !== input) {
        setInput(savedInput);
      }
@@ -1546,7 +1628,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
          
          // Clear persisted chat messages after successful completion
          if (selectedProject && latestMessage.exitCode === 0) {
-            localStorage.removeItem(`chat_messages_${selectedProject.name}`);
+            safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`);
          }
          break;
          
@@ -1803,14 +1885,33 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
  // Handle image files from drag & drop or file picker
  const handleImageFiles = useCallback((files) => {
    const validFiles = files.filter(file => {
-      if (!file.type.startsWith('image/')) {
+      try {
+        // Validate file object and properties
+        if (!file || typeof file !== 'object') {
+          console.warn('Invalid file object:', file);
+          return false;
+        }
+
+        if (!file.type || !file.type.startsWith('image/')) {
+          return false;
+        }
+
+        if (!file.size || file.size > 5 * 1024 * 1024) {
+          // Safely get file name with fallback
+          const fileName = file.name || 'Unknown file';
+          setImageErrors(prev => {
+            const newMap = new Map(prev);
+            newMap.set(fileName, 'File too large (max 5MB)');
+            return newMap;
+          });
+          return false;
+        }
+
+        return true;
+      } catch (error) {
+        console.error('Error validating file:', error, file);
        return false;
      }
-      if (file.size > 5 * 1024 * 1024) {
-        setImageErrors(prev => new Map(prev).set(file.name, 'File too large (max 5MB)'));
-        return false;
-      }
-      return true;
    });

    if (validFiles.length > 0) {
@@ -1866,7 +1967,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
      });
      
      try {
-        const token = localStorage.getItem('auth-token');
+        const token = safeLocalStorage.getItem('auth-token');
        const headers = {};
        if (token) {
          headers['Authorization'] = `Bearer ${token}`;
@@ -1929,7 +2030,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
    // Get tools settings from localStorage
    const getToolsSettings = () => {
      try {
-        const savedSettings = localStorage.getItem('claude-tools-settings');
+        const savedSettings = safeLocalStorage.getItem('claude-tools-settings');
        if (savedSettings) {
          return JSON.parse(savedSettings);
        }
@@ -1975,7 +2076,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
    
    // Clear the saved draft since message was sent
    if (selectedProject) {
-      localStorage.removeItem(`draft_input_${selectedProject.name}`);
+      safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`);
    }
  };

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

 function MainContent({ 
  selectedProject, 
@@ -270,24 +271,26 @@ function MainContent({
      {/* Content Area */}
      <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
        <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
-          <ChatInterface
-            selectedProject={selectedProject}
-            selectedSession={selectedSession}
-            ws={ws}
-            sendMessage={sendMessage}
-            messages={messages}
-            onFileOpen={handleFileOpen}
-            onInputFocusChange={onInputFocusChange}
-            onSessionActive={onSessionActive}
-            onSessionInactive={onSessionInactive}
-            onReplaceTemporarySession={onReplaceTemporarySession}
-            onNavigateToSession={onNavigateToSession}
-            onShowSettings={onShowSettings}
-            autoExpandTools={autoExpandTools}
-            showRawParameters={showRawParameters}
-            autoScrollToBottom={autoScrollToBottom}
-            sendByCtrlEnter={sendByCtrlEnter}
-          />
+          <ErrorBoundary showDetails={true}>
+            <ChatInterface
+              selectedProject={selectedProject}
+              selectedSession={selectedSession}
+              ws={ws}
+              sendMessage={sendMessage}
+              messages={messages}
+              onFileOpen={handleFileOpen}
+              onInputFocusChange={onInputFocusChange}
+              onSessionActive={onSessionActive}
+              onSessionInactive={onSessionInactive}
+              onReplaceTemporarySession={onReplaceTemporarySession}
+              onNavigateToSession={onNavigateToSession}
+              onShowSettings={onShowSettings}
+              autoExpandTools={autoExpandTools}
+              showRawParameters={showRawParameters}
+              autoScrollToBottom={autoScrollToBottom}
+              sendByCtrlEnter={sendByCtrlEnter}
+            />
+          </ErrorBoundary>
        </div>
        <div className={`h-full overflow-hidden ${activeTab === 'files' ? 'block' : 'hidden'}`}>
          <FileTree selectedProject={selectedProject} />
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,10 +9,14 @@ export default defineConfig(({ command, mode }) => {
  return {
    plugins: [react()],
    server: {
-      port: parseInt(env.VITE_PORT) || 3001,
+      port: parseInt(env.VITE_PORT) || 5173,
      proxy: {
-        '/api': `http://localhost:${env.PORT || 3002}`,
+        '/api': `http://localhost:${env.PORT || 3001}`,
        '/ws': {
+          target: `ws://localhost:${env.PORT || 3001}`,
+          ws: true
+        },
+        '/shell': {
          target: `ws://localhost:${env.PORT || 3002}`,
          ws: true
        }