gitarsenal-cli 1.9.107 → 1.9.111

package/.venv_status.json

@@ -1 +1 @@
-{"created":"2025-10-15T12:10:37.722Z","packages":["modal","gitingest","requests","anthropic"],"uv_version":"uv 0.8.4 (Homebrew 2025-07-30)"}
+{"created":"2025-10-15T13:59:40.768Z","packages":["modal","gitingest","requests","anthropic"],"uv_version":"uv 0.8.4 (Homebrew 2025-07-30)"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitarsenal-cli",
-  "version": "1.9.107",
+  "version": "1.9.111",
   "description": "CLI tool for creating Modal sandboxes with GitHub repositories",
   "main": "index.js",
   "bin": {
@@ -8,7 +8,8 @@
     "gitarsenal-tui": "./bin/gitarsenal-tui.js"
   },
   "scripts": {
-    "postinstall": "node scripts/postinstall.js"
+    "postinstall": "node scripts/postinstall.js",
+    "ensure-deps": "bash scripts/ensure-dependencies.sh"
   },
   "keywords": [
     "modal",

package/scripts/ensure-dependencies.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+# Ensure all Python dependencies are installed in the virtual environment
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PACKAGE_DIR="$(dirname "$SCRIPT_DIR")"
+
+echo "📦 Ensuring Python dependencies are installed..."
+echo "📁 Package directory: $PACKAGE_DIR"
+
+# Check if virtual environment exists
+if [ ! -d "$PACKAGE_DIR/.venv" ]; then
+  echo "❌ Virtual environment not found. Please run: npm install"
+  exit 1
+fi
+
+# Activate virtual environment
+source "$PACKAGE_DIR/.venv/bin/activate"
+
+# Check if uv is available
+if ! command -v uv &> /dev/null; then
+  echo "❌ uv is not installed. Please install it first."
+  exit 1
+fi
+
+# Install from requirements.txt
+if [ -f "$PACKAGE_DIR/python/requirements.txt" ]; then
+  echo "📦 Installing packages from requirements.txt..."
+  uv pip install -r "$PACKAGE_DIR/python/requirements.txt"
+else
+  echo "📦 Installing core packages..."
+  uv pip install modal requests pathlib python-dotenv flask flask-cors pexpect anthropic gitingest exa-py e2b-code-interpreter
+fi
+
+# Verify critical packages
+echo ""
+echo "🔍 Verifying installations..."
+python -c "import modal; print('✅ Modal installed')"
+python -c "import e2b_code_interpreter; print('✅ E2B Code Interpreter installed')"
+python -c "import gitingest; print('✅ Gitingest installed')"
+python -c "import anthropic; print('✅ Anthropic installed')"
+
+echo ""
+echo "✅ All dependencies installed successfully!"
+

package/scripts/postinstall.js

@@ -138,21 +138,37 @@ async function createVirtualEnvironment() {
     
     console.log(chalk.gray(`🔄 Installing packages in virtual environment with uv...`));
     
+    // Determine the activation command based on platform
+    const isWindows = process.platform === 'win32';
+    const activateCmd = isWindows ? 
+      'call .venv\\Scripts\\activate.bat && ' : 
+      'source .venv/bin/activate && ';
+    
     // Install packages using uv pip from requirements.txt
     const requirementsPath = path.join(packageDir, 'python', 'requirements.txt');
     if (await fs.pathExists(requirementsPath)) {
       console.log(chalk.gray(`📦 Installing packages from requirements.txt...`));
-      await execAsync(`uv pip install -r ${requirementsPath}`, {
+      const installCmd = isWindows ? 
+        `${activateCmd}uv pip install -r ${requirementsPath}` :
+        `bash -c "${activateCmd}uv pip install -r ${requirementsPath}"`;
+      
+      await execAsync(installCmd, {
         cwd: packageDir,
         env: { ...process.env, PYTHONIOENCODING: 'utf-8' },
-        stdio: 'inherit'
+        stdio: 'inherit',
+        shell: isWindows ? 'cmd.exe' : '/bin/bash'
       });
     } else {
       console.log(chalk.gray(`📦 Installing packages: ${packages.join(', ')}`));
-      await execAsync(`uv pip install ${packages.join(' ')}`, {
+      const installCmd = isWindows ? 
+        `${activateCmd}uv pip install ${packages.join(' ')}` :
+        `bash -c "${activateCmd}uv pip install ${packages.join(' ')}"`;
+      
+      await execAsync(installCmd, {
         cwd: packageDir,
         env: { ...process.env, PYTHONIOENCODING: 'utf-8' },
-        stdio: 'inherit'
+        stdio: 'inherit',
+        shell: isWindows ? 'cmd.exe' : '/bin/bash'
       });
     }
     
@@ -160,7 +176,7 @@ async function createVirtualEnvironment() {
     
     // Verify packages are installed
     const pythonPath = path.join(venvPath, 'bin', 'python');
-    const packagesToVerify = [...packages, 'anthropic']; // Ensure anthropic is checked
+    const packagesToVerify = [...packages, 'anthropic', 'e2b_code_interpreter']; // Ensure anthropic and e2b are checked
     for (const pkg of packagesToVerify) {
       try {
         await execAsync(`${pythonPath} -c "import ${pkg}; print('${pkg} imported successfully')"`);
@@ -171,8 +187,6 @@ async function createVirtualEnvironment() {
     }
     
     // Create a script to activate the virtual environment
-    const isWindows = process.platform === 'win32';
-    
     const activateScript = isWindows ? 
       `@echo off
 cd /d "%~dp0"
@@ -391,6 +405,7 @@ if __name__ == "__main__":
    • GitArsenal CLI (npm package)
    • Virtual environment with Python packages:
      - Modal
+     - E2B Code Interpreter
      - GitIngest  
      - Requests
      - Anthropic (for Claude fallback)

package/tui-app/index.jsx

@@ -6,10 +6,119 @@ import { spawn } from 'child_process';
 import { join } from 'path';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
+import fs from 'fs';
+import os from 'os';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
+// Helper functions for user credentials
+const getUserConfigPath = () => {
+  const userConfigDir = join(os.homedir(), '.gitarsenal');
+  const userConfigPath = join(userConfigDir, 'user-config.json');
+  return { userConfigDir, userConfigPath };
+};
+
+const loadUserCredentials = () => {
+  const { userConfigPath } = getUserConfigPath();
+  if (fs.existsSync(userConfigPath)) {
+    try {
+      const config = JSON.parse(fs.readFileSync(userConfigPath, 'utf8'));
+      if (config.userId && config.userName && config.userEmail && !config.userEmail.includes('@example.com')) {
+        return config;
+      }
+    } catch (error) {
+      console.error('Could not read user config:', error);
+    }
+  }
+  return null;
+};
+
+const saveUserCredentials = (userId, userName, userEmail) => {
+  const { userConfigDir, userConfigPath } = getUserConfigPath();
+  try {
+    if (!fs.existsSync(userConfigDir)) {
+      fs.mkdirSync(userConfigDir, { recursive: true });
+    }
+    const config = {
+      userId,
+      userName,
+      userEmail,
+      savedAt: new Date().toISOString()
+    };
+    fs.writeFileSync(userConfigPath, JSON.stringify(config, null, 2));
+    return true;
+  } catch (error) {
+    console.error('Could not save credentials:', error);
+    return false;
+  }
+};
+
+// Helper functions for API keys management
+// Uses the same storage format as gitarsenal-cli Python CredentialsManager
+const getCredentialsPath = () => {
+  const configDir = join(os.homedir(), '.gitarsenal');
+  const credentialsPath = join(configDir, 'credentials.json');
+  return { configDir, credentialsPath };
+};
+
+const loadApiKeys = () => {
+  const { credentialsPath } = getCredentialsPath();
+  if (fs.existsSync(credentialsPath)) {
+    try {
+      const credentials = JSON.parse(fs.readFileSync(credentialsPath, 'utf8'));
+      return credentials;
+    } catch (error) {
+      console.error('Could not read credentials:', error);
+    }
+  }
+  return {};
+};
+
+const saveApiKey = (serviceName, apiKey) => {
+  const { configDir, credentialsPath } = getCredentialsPath();
+  try {
+    if (!fs.existsSync(configDir)) {
+      fs.mkdirSync(configDir, { recursive: true });
+    }
+    
+    // Load existing credentials
+    let credentials = loadApiKeys();
+    
+    // Update or delete the key
+    if (apiKey && apiKey.trim()) {
+      credentials[serviceName] = apiKey.trim();
+    } else {
+      delete credentials[serviceName];
+    }
+    
+    fs.writeFileSync(credentialsPath, JSON.stringify(credentials, null, 2));
+    
+    // Set restrictive permissions on Unix-like systems
+    if (process.platform !== 'win32') {
+      fs.chmodSync(credentialsPath, 0o600);
+    }
+    
+    return true;
+  } catch (error) {
+    console.error('Could not save credentials:', error);
+    return false;
+  }
+};
+
+const deleteApiKey = (serviceName) => {
+  const { credentialsPath } = getCredentialsPath();
+  try {
+    let credentials = loadApiKeys();
+    delete credentials[serviceName];
+    fs.writeFileSync(credentialsPath, JSON.stringify(credentials, null, 2));
+    return true;
+  } catch (error) {
+    console.error('Could not delete credential:', error);
+    return false;
+  }
+};
+
 const menuItems = [
   'Create New Sandbox',
   'View Running Sandboxes',
@@ -229,6 +338,215 @@ const Confirmation = ({ config }) => {
   );
 };
 
+const AuthChoice = ({ selectedIndex }) => {
+  const authOptions = ['Create new account', 'Login with existing account'];
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>GitArsenal Authentication</text>
+      </box>
+      <box marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text dimColor fg="gray">Create an account or login to use GitArsenal</text>
+        <text dimColor fg="gray">Your credentials will be saved locally</text>
+      </box>
+      {authOptions.map((option, index) => (
+        <box key={index} marginY={0} marginBottom={0}>
+          {index === selectedIndex ? (
+            <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={42} style={{ justifyContent: 'center' }}>
+              <text bold fg="cyan">{option}</text>
+            </box>
+          ) : (
+            <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={42} style={{ justifyContent: 'center' }}>
+              <text dimColor>{option}</text>
+            </box>
+          )}
+        </box>
+      ))}
+      <box marginTop={1}>
+        <text dimColor fg="gray">Press Enter to select • Esc to exit</text>
+      </box>
+    </box>
+  );
+};
+
+const LoginForm = ({ values, onInput, onSubmit }) => {
+  const fields = ['username', 'email', 'fullName', 'password'];
+  const labels = ['Username:', 'Email Address:', 'Full Name:', 'Password:'];
+  
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Login</text>
+      </box>
+      {fields.map((field, index) => (
+        <box key={field} marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text bold>{labels[index]}</text>
+          <input
+            value={values[field] || ''}
+            onInput={(value) => onInput(field, value)}
+            onSubmit={index === fields.length - 1 ? onSubmit : undefined}
+            placeholder={field === 'password' ? '••••••••' : ''}
+            focused={index === 0}
+            width={50}
+          />
+        </box>
+      ))}
+      <box marginTop={1}>
+        <text dimColor fg="gray">Fill all fields and press Enter • Esc to go back</text>
+      </box>
+    </box>
+  );
+};
+
+const RegisterForm = ({ values, onInput, onSubmit }) => {
+  const fields = ['username', 'email', 'fullName', 'password', 'confirmPassword'];
+  const labels = ['Username:', 'Email Address:', 'Full Name:', 'Password (min 8 chars):', 'Confirm Password:'];
+  
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Create New Account</text>
+      </box>
+      {fields.map((field, index) => (
+        <box key={field} marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text bold>{labels[index]}</text>
+          <input
+            value={values[field] || ''}
+            onInput={(value) => onInput(field, value)}
+            onSubmit={index === fields.length - 1 ? onSubmit : undefined}
+            placeholder={field.includes('password') ? '••••••••' : ''}
+            focused={index === 0}
+            width={50}
+          />
+        </box>
+      ))}
+      <box marginTop={1}>
+        <text dimColor fg="gray">Fill all fields and press Enter • Esc to go back</text>
+      </box>
+    </box>
+  );
+};
+
+const ApiKeysManagement = ({ apiKeys, selectedIndex }) => {
+  // Get all stored keys as an array
+  const storedKeyNames = Object.keys(apiKeys).sort();
+  const hasStoredKeys = storedKeyNames.length > 0;
+
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>API Keys Management</text>
+      </box>
+      <box marginBottom={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text dimColor fg="gray">Universal support for any service API key</text>
+        {hasStoredKeys ? (
+          <text fg="green">{storedKeyNames.length} key{storedKeyNames.length > 1 ? 's' : ''} stored</text>
+        ) : (
+          <text dimColor fg="gray">No API keys stored yet</text>
+        )}
+      </box>
+      
+      {/* Add New button */}
+      <box marginY={0} marginBottom={1}>
+        {selectedIndex === 0 ? (
+          <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={54} style={{ justifyContent: 'center' }}>
+            <text bold fg="cyan">+ Add New API Key</text>
+          </box>
+        ) : (
+          <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={54} style={{ justifyContent: 'center' }}>
+            <text dimColor>+ Add New API Key</text>
+          </box>
+        )}
+      </box>
+
+      {/* Stored keys */}
+      {storedKeyNames.map((serviceName, index) => {
+        const itemIndex = index + 1; // +1 because "Add New" is at index 0
+        return (
+          <box key={serviceName} marginY={0} marginBottom={0}>
+            {itemIndex === selectedIndex ? (
+              <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={54} style={{ justifyContent: 'center' }}>
+                <text bold fg="cyan">{serviceName}</text>
+              </box>
+            ) : (
+              <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={54} style={{ justifyContent: 'center' }}>
+                <text dimColor>{serviceName}</text>
+              </box>
+            )}
+          </box>
+        );
+      })}
+
+      <box marginTop={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text bold>Controls:</text>
+        <text dimColor fg="gray">↑↓ - Navigate • Enter - {selectedIndex === 0 ? 'Add' : 'Modify'}</text>
+        {selectedIndex > 0 && <text dimColor fg="gray">D - Delete selected key</text>}
+        <text dimColor fg="gray">Esc - Back to menu</text>
+      </box>
+    </box>
+  );
+};
+
+const ApiKeyForm = ({ serviceName, apiKey, onServiceInput, onKeyInput, onSubmit, isEditing }) => {
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>{isEditing ? 'Modify' : 'Add'} API Key</text>
+      </box>
+      <box marginBottom={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        {isEditing ? (
+          <>
+            <text fg="green">Modifying existing API key</text>
+            <text dimColor fg="gray">Update the API key value below</text>
+          </>
+        ) : (
+          <>
+            <text dimColor fg="gray">Add API key for any service</text>
+            <text dimColor fg="gray">Examples: openai_api_key, WANDB_API_KEY, modal_token</text>
+          </>
+        )}
+      </box>
+      
+      {!isEditing && (
+        <box marginBottom={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text bold>Service Name:</text>
+          <input
+            value={serviceName || ''}
+            onInput={onServiceInput}
+            placeholder="e.g., openai_api_key"
+            focused={true}
+            width={70}
+          />
+        </box>
+      )}
+      
+      {isEditing && (
+        <box marginBottom={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text bold>Service:</text>
+          <text fg="cyan">{serviceName}</text>
+        </box>
+      )}
+      
+      <box marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text bold>API Key:</text>
+        <input
+          value={apiKey || ''}
+          onInput={onKeyInput}
+          onSubmit={onSubmit}
+          placeholder="Paste your API key here..."
+          focused={isEditing}
+          width={70}
+        />
+      </box>
+      
+      <box marginTop={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text dimColor fg="gray">Enter to save • Esc to cancel</text>
+        {isEditing && <text dimColor fg="gray">Clear field to remove the key</text>}
+      </box>
+    </box>
+  );
+};
+
 const SandboxList = ({ sandboxes, selectedIndex }) => {
   const maxVisibleItems = 10;
   const totalSandboxes = sandboxes.length;
@@ -292,11 +610,8 @@ const SandboxList = ({ sandboxes, selectedIndex }) => {
           )}
           <box marginTop={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
             <text bold>Controls:</text>
-            <box><text fg="cyan">↑↓</text><text> - Navigate sandboxes</text></box>
-            <box><text fg="cyan">Enter</text><text> - View logs</text></box>
-            <box><text fg="cyan">D</text><text> - Delete sandbox</text></box>
-            <box><text fg="cyan">R</text><text> - Refresh list</text></box>
-            <box><text fg="cyan">Esc</text><text> - Back to menu</text></box>
+            <text dimColor fg="gray">↑↓ - Navigate • Enter - View logs • D - Delete</text>
+            <text dimColor fg="gray">R - Refresh • Esc - Back to menu</text>
           </box>
         </>
       )}
@@ -333,8 +648,8 @@ const SandboxLogs = ({ sandbox }) => {
       </scrollbox>
       <box marginTop={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
         <text bold>Controls:</text>
-        <box><text fg="cyan">Mouse Wheel</text><text> or </text><text fg="cyan">↑↓</text><text> - Scroll logs</text></box>
-        <box><text fg="cyan">Esc</text><text> - Back to sandbox list</text></box>
+        <text dimColor fg="gray">Mouse Wheel or Arrow Keys - Scroll logs</text>
+        <text dimColor fg="gray">Esc - Back to sandbox list</text>
       </box>
     </box>
   );
@@ -354,6 +669,29 @@ const App = () => {
   const [sandboxIdCounter, setSandboxIdCounter] = useState(1);
   const [statusMessage, setStatusMessage] = useState('');
   const [viewingSandboxId, setViewingSandboxId] = useState(null);
+  const [userCredentials, setUserCredentials] = useState(null);
+  const [authFormValues, setAuthFormValues] = useState({});
+  const [apiKeys, setApiKeys] = useState({});
+  const [editingServiceName, setEditingServiceName] = useState('');
+  const [serviceNameInput, setServiceNameInput] = useState('');
+  const [apiKeyInput, setApiKeyInput] = useState('');
+  const [isEditingExisting, setIsEditingExisting] = useState(false);
+
+  // Load user credentials on mount
+  useEffect(() => {
+    const credentials = loadUserCredentials();
+    if (credentials) {
+      setUserCredentials(credentials);
+      setStatusMessage(`Welcome back, ${credentials.userName}!`);
+      setTimeout(() => setStatusMessage(''), 3000);
+    }
+  }, []);
+
+  // Load API keys on mount
+  useEffect(() => {
+    const keys = loadApiKeys();
+    setApiKeys(keys);
+  }, []);
 
 
   const createSandbox = () => {
@@ -464,6 +802,19 @@ const App = () => {
       return;
     }
 
+    if (screen === 'apiKeyForm') {
+      if (key.name === 'escape') {
+        setEditingServiceName('');
+        setServiceNameInput('');
+        setApiKeyInput('');
+        setIsEditingExisting(false);
+        setScreen('apiKeysManagement');
+        setSelectedIndex(0);
+      }
+      // Let the input component handle all other keys
+      return;
+    }
+
     if (screen === 'menu') {
       if (key.name === 'up') {
         setSelectedIndex((prev) => (prev > 0 ? prev - 1 : menuItems.length - 1));
@@ -476,6 +827,9 @@ const App = () => {
         } else if (selectedIndex === 1) {
           setScreen('sandboxList');
           setSelectedIndex(0);
+        } else if (selectedIndex === 2) {
+          setScreen('apiKeysManagement');
+          setSelectedIndex(0);
         } else if (selectedIndex === menuItems.length - 1) {
           process.exit(0);
         }
@@ -523,11 +877,51 @@ const App = () => {
       }
     } else if (screen === 'confirmation') {
       if (key.name === 'return' || key.name === 'enter') {
-        createSandbox();
+        // Check if user is logged in before creating sandbox
+        if (!userCredentials) {
+          setScreen('authChoice');
+          setSelectedIndex(0);
+        } else {
+          createSandbox();
+        }
       } else if (key.name === 'escape') {
-        setScreen('gpuCountSelection');
+        if (config.sandboxProvider === 'modal') {
+          setScreen('gpuCountSelection');
+        } else {
+          setScreen('providerSelection');
+        }
         setSelectedIndex(0);
       }
+    } else if (screen === 'authChoice') {
+      if (key.name === 'up') {
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 1));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => (prev < 1 ? prev + 1 : 0));
+      } else if (key.name === 'return' || key.name === 'enter') {
+        if (selectedIndex === 0) {
+          setScreen('register');
+          setAuthFormValues({});
+        } else {
+          setScreen('login');
+          setAuthFormValues({});
+        }
+      } else if (key.name === 'escape') {
+        process.exit(0);
+      }
+    } else if (screen === 'login') {
+      if (key.name === 'escape') {
+        setScreen('authChoice');
+        setSelectedIndex(0);
+        setAuthFormValues({});
+      }
+      // Submit is handled by input component's onSubmit
+    } else if (screen === 'register') {
+      if (key.name === 'escape') {
+        setScreen('authChoice');
+        setSelectedIndex(0);
+        setAuthFormValues({});
+      }
+      // Submit is handled by input component's onSubmit
     } else if (screen === 'sandboxList') {
       if (key.name === 'up' && sandboxes.length > 0) {
         setSelectedIndex((prev) => (prev > 0 ? prev - 1 : sandboxes.length - 1));
@@ -557,6 +951,50 @@ const App = () => {
         setViewingSandboxId(null);
         setScreen('sandboxList');
       }
+    } else if (screen === 'apiKeysManagement') {
+      // Calculate items: 1 "Add New" + all stored keys
+      const storedKeyNames = Object.keys(apiKeys).sort();
+      const totalItems = 1 + storedKeyNames.length; // 1 for "Add New" + stored keys
+      
+      if (key.name === 'up') {
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : totalItems - 1));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : 0));
+      } else if (key.name === 'return' || key.name === 'enter') {
+        if (selectedIndex === 0) {
+          // "Add New API Key" selected
+          setServiceNameInput('');
+          setApiKeyInput('');
+          setIsEditingExisting(false);
+          setScreen('apiKeyForm');
+        } else {
+          // One of the stored keys selected - edit it
+          const serviceName = storedKeyNames[selectedIndex - 1];
+          setEditingServiceName(serviceName);
+          setServiceNameInput(serviceName);
+          setApiKeyInput(apiKeys[serviceName] || '');
+          setIsEditingExisting(true);
+          setScreen('apiKeyForm');
+        }
+      } else if (key.name === 'd') {
+        if (selectedIndex > 0) {
+          // Delete a stored key
+          const serviceName = storedKeyNames[selectedIndex - 1];
+          const success = deleteApiKey(serviceName);
+          if (success) {
+            setApiKeys(loadApiKeys());
+            setStatusMessage(`${serviceName} removed`);
+            setTimeout(() => setStatusMessage(''), 3000);
+            // Adjust selection if needed
+            if (selectedIndex >= totalItems - 1 && selectedIndex > 0) {
+              setSelectedIndex(selectedIndex - 1);
+            }
+          }
+        }
+      } else if (key.name === 'escape') {
+        setScreen('menu');
+        setSelectedIndex(0);
+      }
     }
   });
 
@@ -572,6 +1010,124 @@ const App = () => {
     }
   };
 
+  const handleAuthFormInput = (field, value) => {
+    setAuthFormValues(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleLoginSubmit = () => {
+    const { username, email, fullName, password } = authFormValues;
+    if (username && email && fullName && password) {
+      // Save credentials
+      const saved = saveUserCredentials(username, fullName, email);
+      if (saved) {
+        setUserCredentials({ userId: username, userName: fullName, userEmail: email });
+        setStatusMessage(`Welcome, ${fullName}!`);
+        setTimeout(() => setStatusMessage(''), 3000);
+        createSandbox();
+      } else {
+        setStatusMessage('Failed to save credentials');
+        setTimeout(() => setStatusMessage(''), 3000);
+      }
+    }
+  };
+
+  const handleRegisterSubmit = () => {
+    const { username, email, fullName, password, confirmPassword } = authFormValues;
+    
+    // Validation
+    if (!username || username.length < 3) {
+      setStatusMessage('Username must be at least 3 characters');
+      setTimeout(() => setStatusMessage(''), 3000);
+      return;
+    }
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setStatusMessage('Please enter a valid email address');
+      setTimeout(() => setStatusMessage(''), 3000);
+      return;
+    }
+    if (!fullName) {
+      setStatusMessage('Full name is required');
+      setTimeout(() => setStatusMessage(''), 3000);
+      return;
+    }
+    if (!password || password.length < 8) {
+      setStatusMessage('Password must be at least 8 characters');
+      setTimeout(() => setStatusMessage(''), 3000);
+      return;
+    }
+    if (password !== confirmPassword) {
+      setStatusMessage('Passwords do not match');
+      setTimeout(() => setStatusMessage(''), 3000);
+      return;
+    }
+
+    // Save credentials
+    const saved = saveUserCredentials(username, fullName, email);
+    if (saved) {
+      setUserCredentials({ userId: username, userName: fullName, userEmail: email });
+      setStatusMessage(`Account created! Welcome, ${fullName}!`);
+      setTimeout(() => setStatusMessage(''), 3000);
+      createSandbox();
+    } else {
+      setStatusMessage('Failed to save credentials');
+      setTimeout(() => setStatusMessage(''), 3000);
+    }
+  };
+
+  const handleServiceNameInput = (value) => {
+    setServiceNameInput(value);
+  };
+
+  const handleApiKeyInput = (value) => {
+    setApiKeyInput(value);
+  };
+
+  const handleApiKeyFormSubmit = () => {
+    const serviceName = isEditingExisting ? editingServiceName : serviceNameInput.trim();
+    const apiKey = apiKeyInput.trim();
+    
+    // Validation
+    if (!isEditingExisting && !serviceName) {
+      setStatusMessage('Service name is required');
+      setTimeout(() => setStatusMessage(''), 3000);
+      return;
+    }
+    
+    if (!apiKey && !isEditingExisting) {
+      setStatusMessage('API key is required');
+      setTimeout(() => setStatusMessage(''), 3000);
+      return;
+    }
+    
+    // Save the API key
+    const saved = saveApiKey(serviceName, apiKey);
+    
+    if (saved) {
+      // Reload all keys
+      setApiKeys(loadApiKeys());
+      
+      if (!apiKey) {
+        setStatusMessage(`${serviceName} removed successfully!`);
+      } else if (isEditingExisting) {
+        setStatusMessage(`${serviceName} updated successfully!`);
+      } else {
+        setStatusMessage(`${serviceName} added successfully!`);
+      }
+      setTimeout(() => setStatusMessage(''), 3000);
+      
+      // Reset and go back
+      setEditingServiceName('');
+      setServiceNameInput('');
+      setApiKeyInput('');
+      setIsEditingExisting(false);
+      setScreen('apiKeysManagement');
+      setSelectedIndex(0);
+    } else {
+      setStatusMessage('Failed to save API key');
+      setTimeout(() => setStatusMessage(''), 3000);
+    }
+  };
+
   const viewingSandbox = viewingSandboxId ? sandboxes.find(s => s.id === viewingSandboxId) : null;
 
   return (
@@ -588,8 +1144,13 @@ const App = () => {
       {screen === 'gpuSelection' && <GpuSelection selectedIndex={selectedIndex} repoUrl={config.repoUrl} provider={config.sandboxProvider} />}
       {screen === 'gpuCountSelection' && <GpuCountSelection selectedIndex={selectedIndex} gpuType={config.gpuType} />}
       {screen === 'confirmation' && <Confirmation config={config} />}
+      {screen === 'authChoice' && <AuthChoice selectedIndex={selectedIndex} />}
+      {screen === 'login' && <LoginForm values={authFormValues} onInput={handleAuthFormInput} onSubmit={handleLoginSubmit} />}
+      {screen === 'register' && <RegisterForm values={authFormValues} onInput={handleAuthFormInput} onSubmit={handleRegisterSubmit} />}
       {screen === 'sandboxList' && <SandboxList sandboxes={sandboxes} selectedIndex={selectedIndex} />}
       {screen === 'sandboxLogs' && viewingSandbox && <SandboxLogs sandbox={viewingSandbox} />}
+      {screen === 'apiKeysManagement' && <ApiKeysManagement apiKeys={apiKeys} selectedIndex={selectedIndex} />}
+      {screen === 'apiKeyForm' && <ApiKeyForm serviceName={serviceNameInput} apiKey={apiKeyInput} onServiceInput={handleServiceNameInput} onKeyInput={handleApiKeyInput} onSubmit={handleApiKeyFormSubmit} isEditing={isEditingExisting} />}
     </box>
   );
 };