gitarsenal-cli 1.9.106 → 1.9.108

package/tui-app/index.jsx

@@ -0,0 +1,848 @@
+#!/usr/bin/env bun
+
+import { render, useKeyboard, useTerminalDimensions } from '@opentui/react';
+import { useState, useEffect } from 'react';
+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;
+  }
+};
+
+const menuItems = [
+  'Create New Sandbox',
+  'View Running Sandboxes',
+  'API Keys Management',
+  'Settings',
+  'Help & Examples',
+  'Exit'
+];
+
+const gpuOptions = [
+  { name: 'T4 (16GB VRAM)', value: 'T4' },
+  { name: 'L4 (24GB VRAM)', value: 'L4' },
+  { name: 'A10G (24GB VRAM)', value: 'A10G' },
+  { name: 'A100-40 (40GB VRAM)', value: 'A100-40GB' },
+  { name: 'A100-80 (80GB VRAM)', value: 'A100-80GB' },
+  { name: 'L40S (48GB VRAM)', value: 'L40S' },
+  { name: 'H100 (80GB VRAM)', value: 'H100' },
+  { name: 'H200 (141GB VRAM)', value: 'H200' },
+  { name: 'B200 (141GB VRAM)', value: 'B200' }
+];
+
+const gpuCountOptions = [1, 2, 3, 4, 6, 8];
+
+const providerOptions = [
+  { name: 'Modal (GPU support, persistent volumes)', value: 'modal' },
+  { name: 'E2B (Faster startup, no GPU)', value: 'e2b' }
+];
+
+const Banner = () => {
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center', marginBottom: 1 }}>
+      <box borderStyle="single" borderColor="green" paddingX={2} paddingY={0}>
+        <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text bold fg="green"> ██████╗ ██╗████████╗ █████╗ ██████╗ ███████╗███████╗███╗   ██╗ █████╗ ██╗     </text>
+          <text bold fg="green">██╔════╝ ██║╚══██╔══╝██╔══██╗██╔══██╗██╔════╝██╔════╝████╗  ██║██╔══██╗██║     </text>
+          <text bold fg="green">██║  ███╗██║   ██║   ███████║██████╔╝███████╗█████╗  ██╔██╗ ██║███████║██║     </text>
+          <text bold fg="green">██║   ██║██║   ██║   ██╔══██║██╔══██╗╚════██║██╔══╝  ██║╚██╗██║██╔══██║██║     </text>
+          <text bold fg="green">╚██████╔╝██║   ██║   ██║  ██║██║  ██║███████║███████╗██║ ╚████║██║  ██║███████╗</text>
+          <text bold fg="green"> ╚═════╝ ╚═╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝╚══════╝╚═╝  ╚═══╝╚═╝  ╚═╝╚══════╝</text>
+          <text bold>GPU-Accelerated Development Environments</text>
+        </box>
+      </box>
+    </box>
+  );
+};
+
+const Menu = ({ selectedIndex }) => {
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      {menuItems.map((item, index) => (
+        <box key={index} marginY={0} marginBottom={0}>
+          {index === selectedIndex ? (
+            <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={36} style={{ justifyContent: 'center' }}>
+              <text bold fg="cyan">{item}</text>
+            </box>
+          ) : (
+            <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={36} style={{ justifyContent: 'center' }}>
+              <text dimColor>{item}</text>
+            </box>
+          )}
+        </box>
+      ))}
+      <box marginTop={1}>
+        <text dimColor fg="gray">Use ↑↓ arrows to navigate, Enter to select, Ctrl+C to exit</text>
+      </box>
+    </box>
+  );
+};
+
+const RepoInput = ({ value, onInput, onSubmit }) => {
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Create New Sandbox</text>
+      </box>
+      <box marginBottom={1}>
+        <text bold>Enter GitHub repository URL:</text>
+      </box>
+      <input
+        value={value}
+        onInput={onInput}
+        onSubmit={onSubmit}
+        placeholder="https://github.com/pytorch/examples"
+        focused
+        width={60}
+      />
+      <box marginTop={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text dimColor fg="gray">Examples:</text>
+        <text dimColor fg="gray">  • https://github.com/pytorch/examples</text>
+        <text dimColor fg="gray">  • https://github.com/huggingface/transformers</text>
+        <text dimColor fg="gray">  • https://github.com/openai/whisper</text>
+      </box>
+      <box marginTop={1}>
+        <text dimColor fg="gray">Press Enter to continue • Esc to go back • Ctrl+C to exit</text>
+      </box>
+    </box>
+  );
+};
+
+const ProviderSelection = ({ selectedIndex, repoUrl }) => {
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Select Sandbox Provider</text>
+      </box>
+      <box marginBottom={1}>
+        <text bold>Repository: </text>
+        <text fg="green">{repoUrl}</text>
+      </box>
+      {providerOptions.map((option, index) => (
+        <box key={index} marginY={0} marginBottom={0}>
+          {index === selectedIndex ? (
+            <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={50} style={{ justifyContent: 'center' }}>
+              <text bold fg="cyan">{option.name}</text>
+            </box>
+          ) : (
+            <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={50} style={{ justifyContent: 'center' }}>
+              <text dimColor>{option.name}</text>
+            </box>
+          )}
+        </box>
+      ))}
+      <box marginTop={1}>
+        <text dimColor fg="gray">Press Enter to select • Esc to go back</text>
+      </box>
+    </box>
+  );
+};
+
+const GpuSelection = ({ selectedIndex, repoUrl, provider }) => {
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Select GPU Configuration</text>
+      </box>
+      <box marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <box><text bold>Repository: </text><text fg="green">{repoUrl}</text></box>
+        <box><text bold>Provider: </text><text fg="green">{provider}</text></box>
+      </box>
+      {gpuOptions.map((option, index) => (
+        <box key={index} marginY={0} marginBottom={0}>
+          {index === selectedIndex ? (
+            <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={30} style={{ justifyContent: 'center' }}>
+              <text bold fg="cyan">{option.name}</text>
+            </box>
+          ) : (
+            <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={30} style={{ justifyContent: 'center' }}>
+              <text dimColor>{option.name}</text>
+            </box>
+          )}
+        </box>
+      ))}
+      <box marginTop={1}>
+        <text dimColor fg="gray">Press Enter to select • Esc to go back</text>
+      </box>
+    </box>
+  );
+};
+
+const GpuCountSelection = ({ selectedIndex, gpuType }) => {
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Select GPU Count</text>
+      </box>
+      <box marginBottom={1}>
+        <text bold>GPU Type: </text>
+        <text fg="green">{gpuType}</text>
+      </box>
+      {gpuCountOptions.map((count, index) => (
+        <box key={index} marginY={0} marginBottom={0}>
+          {index === selectedIndex ? (
+            <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={16} style={{ justifyContent: 'center' }}>
+              <text bold fg="cyan">{count} GPU{count > 1 ? 's' : ''}</text>
+            </box>
+          ) : (
+            <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={16} style={{ justifyContent: 'center' }}>
+              <text dimColor>{count} GPU{count > 1 ? 's' : ''}</text>
+            </box>
+          )}
+        </box>
+      ))}
+      <box marginTop={1}>
+        <text dimColor fg="gray">Press Enter to select • Esc to go back</text>
+      </box>
+    </box>
+  );
+};
+
+const Confirmation = ({ config }) => {
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Configuration Summary</text>
+      </box>
+      <box marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text bold>Repository URL:</text>
+        <text fg="cyan">{config.repoUrl}</text>
+      </box>
+      <box marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text bold>Sandbox Provider:</text>
+        <text fg="cyan">{config.sandboxProvider}</text>
+      </box>
+      {config.sandboxProvider === 'modal' && (
+        <box marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text bold>GPU Configuration:</text>
+          <text fg="cyan">{config.gpuCount > 1 ? config.gpuCount + 'x ' : ''}{config.gpuType}</text>
+        </box>
+      )}
+      <box marginTop={2} marginBottom={1}>
+        <text bold fg="green">Press Enter to create sandbox in background</text>
+      </box>
+      <box>
+        <text dimColor fg="gray">Press Esc to go back and change settings</text>
+      </box>
+    </box>
+  );
+};
+
+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 SandboxList = ({ sandboxes, selectedIndex }) => {
+  const maxVisibleItems = 10;
+  const totalSandboxes = sandboxes.length;
+  
+  // Calculate scroll offset to keep selected item in view
+  const scrollOffset = Math.max(0, Math.min(
+    selectedIndex - Math.floor(maxVisibleItems / 2),
+    Math.max(0, totalSandboxes - maxVisibleItems)
+  ));
+  
+  const visibleSandboxes = sandboxes.slice(scrollOffset, scrollOffset + maxVisibleItems);
+  const showScrollIndicator = totalSandboxes > maxVisibleItems;
+  
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Running Sandboxes</text>
+      </box>
+      {sandboxes.length === 0 ? (
+        <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text dimColor fg="gray">No sandboxes running.</text>
+          <box marginTop={1}>
+            <text dimColor fg="gray">Press Esc to go back to menu</text>
+          </box>
+        </box>
+      ) : (
+        <>
+          {showScrollIndicator && (
+            <box marginBottom={1}>
+              <text dimColor fg="gray">Showing {scrollOffset + 1}-{Math.min(scrollOffset + maxVisibleItems, totalSandboxes)} of {totalSandboxes}</text>
+            </box>
+          )}
+          <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+            {visibleSandboxes.map((sandbox, visibleIndex) => {
+              const actualIndex = scrollOffset + visibleIndex;
+              const statusColor = sandbox.status === 'running' ? 'green' : 
+                                 sandbox.status === 'initializing' ? 'yellow' : 'red';
+              const statusIcon = sandbox.status === 'running' ? '[OK]' : 
+                                sandbox.status === 'initializing' ? '[...]' : '[FAIL]';
+              return (
+                <box key={sandbox.id} marginY={0} marginBottom={0} style={{ flexDirection: 'column', alignItems: 'center' }}>
+                  {actualIndex === selectedIndex ? (
+                    <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={60} style={{ flexDirection: 'column', alignItems: 'center' }}>
+                      <text bold fg="cyan">#{sandbox.id} {statusIcon} {sandbox.repo}</text>
+                      <text fg="cyan">{sandbox.status} | {sandbox.provider} | {sandbox.gpu || 'N/A'}</text>
+                    </box>
+                  ) : (
+                    <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={60} style={{ flexDirection: 'column', alignItems: 'center' }}>
+                      <text dimColor>#{sandbox.id} {statusIcon} {sandbox.repo}</text>
+                      <text dimColor fg={statusColor}>{sandbox.status}</text>
+                    </box>
+                  )}
+                </box>
+              );
+            })}
+          </box>
+          {showScrollIndicator && (
+            <box marginTop={1}>
+              <text dimColor fg="gray">↑↓ to scroll • More {scrollOffset + maxVisibleItems < totalSandboxes ? '↓' : ''}{scrollOffset > 0 ? '↑' : ''}</text>
+            </box>
+          )}
+          <box marginTop={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+            <text bold>Controls:</text>
+            <text dimColor fg="gray">↑↓ - Navigate • Enter - View logs • D - Delete</text>
+            <text dimColor fg="gray">R - Refresh • Esc - Back to menu</text>
+          </box>
+        </>
+      )}
+    </box>
+  );
+};
+
+const SandboxLogs = ({ sandbox }) => {
+  const allLogLines = (sandbox.logs || 'No logs yet...').split('\n');
+  const totalLines = allLogLines.length;
+  
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Sandbox #{sandbox.id} Logs - {sandbox.repo}</text>
+      </box>
+      <box marginBottom={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <box>
+          <text>Status: </text>
+          <text fg={sandbox.status === 'running' ? 'green' : sandbox.status === 'initializing' ? 'yellow' : 'red'}>
+            {sandbox.status}
+          </text>
+        </box>
+        <box>
+          <text dimColor fg="gray">Total lines: {totalLines}</text>
+        </box>
+      </box>
+      <scrollbox width={84} height={17} borderStyle="single" stickyScroll="bottom">
+        <box style={{ flexDirection: 'column' }}>
+          {allLogLines.map((line, index) => (
+            <text key={index} dimColor={!line.trim()}>{line || ' '}</text>
+          ))}
+        </box>
+      </scrollbox>
+      <box marginTop={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text bold>Controls:</text>
+        <text dimColor fg="gray">Mouse Wheel or Arrow Keys - Scroll logs</text>
+        <text dimColor fg="gray">Esc - Back to sandbox list</text>
+      </box>
+    </box>
+  );
+};
+
+const App = () => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [screen, setScreen] = useState('menu');
+  const [repoUrl, setRepoUrl] = useState('');
+  const [config, setConfig] = useState({
+    repoUrl: '',
+    gpuType: 'A10G',
+    gpuCount: 1,
+    sandboxProvider: 'modal'
+  });
+  const [sandboxes, setSandboxes] = useState([]);
+  const [sandboxIdCounter, setSandboxIdCounter] = useState(1);
+  const [statusMessage, setStatusMessage] = useState('');
+  const [viewingSandboxId, setViewingSandboxId] = useState(null);
+  const [userCredentials, setUserCredentials] = useState(null);
+  const [authFormValues, setAuthFormValues] = useState({});
+
+  // Load user credentials on mount
+  useEffect(() => {
+    const credentials = loadUserCredentials();
+    if (credentials) {
+      setUserCredentials(credentials);
+      setStatusMessage(`Welcome back, ${credentials.userName}!`);
+      setTimeout(() => setStatusMessage(''), 3000);
+    }
+  }, []);
+
+
+  const createSandbox = () => {
+    const sandboxId = sandboxIdCounter;
+    setSandboxIdCounter(prev => prev + 1);
+    
+    const newSandbox = {
+      id: sandboxId,
+      repo: config.repoUrl.split('/').pop() || config.repoUrl,
+      fullRepo: config.repoUrl,
+      provider: config.sandboxProvider,
+      gpu: config.sandboxProvider === 'modal' ? `${config.gpuCount}x ${config.gpuType}` : null,
+      status: 'initializing',
+      startTime: new Date(),
+      logs: 'Starting sandbox...\n'
+    };
+    
+    setSandboxes(prev => [...prev, newSandbox]);
+    
+    const args = [
+      '--yes',
+      '--repo', config.repoUrl,
+      '--sandbox-provider', config.sandboxProvider
+    ];
+    
+    if (config.sandboxProvider === 'modal') {
+      args.push('--gpu', config.gpuType);
+      args.push('--gpu-count', config.gpuCount.toString());
+    }
+    
+    const cliPath = join(__dirname, '..', 'bin', 'gitarsenal.js');
+    
+    const child = spawn('node', [cliPath, ...args], {
+      cwd: join(__dirname, '..'),
+      detached: true,
+      stdio: 'pipe'
+    });
+    
+    // Store process reference for cleanup
+    setSandboxes(prev => prev.map(s => 
+      s.id === sandboxId ? { ...s, process: child } : s
+    ));
+    
+    let output = '';
+    child.stdout.on('data', (data) => {
+      const text = data.toString();
+      output += text;
+      
+      // Append to logs
+      setSandboxes(prev => prev.map(s => 
+        s.id === sandboxId ? { ...s, logs: (s.logs || '') + text } : s
+      ));
+      
+      if (output.includes('Sandbox created') || output.includes('successfully')) {
+        setSandboxes(prev => prev.map(s => 
+          s.id === sandboxId ? { ...s, status: 'running' } : s
+        ));
+      }
+    });
+    
+    child.stderr.on('data', (data) => {
+      const text = data.toString();
+      output += text;
+      
+      // Append to logs
+      setSandboxes(prev => prev.map(s => 
+        s.id === sandboxId ? { ...s, logs: (s.logs || '') + text } : s
+      ));
+    });
+    
+    child.on('close', (code) => {
+      setSandboxes(prev => prev.map(s => 
+        s.id === sandboxId ? { 
+          ...s, 
+          status: code === 0 ? 'running' : 'failed',
+          logs: (s.logs || '') + `\n\n[Process exited with code ${code}]`
+        } : s
+      ));
+    });
+    
+    setStatusMessage(`Sandbox #${sandboxId} started in background!`);
+    setTimeout(() => setStatusMessage(''), 3000);
+    
+    setScreen('menu');
+    setSelectedIndex(0);
+    setRepoUrl('');
+    setConfig({
+      repoUrl: '',
+      gpuType: 'A10G',
+      gpuCount: 1,
+      sandboxProvider: 'modal'
+    });
+  };
+
+  useKeyboard((key) => {
+    // Always handle Ctrl+C
+    if (key.ctrl && key.name === 'c') {
+      process.exit(0);
+    }
+
+    // Don't handle keyboard events when input is focused
+    if (screen === 'repoInput') {
+      if (key.name === 'escape') {
+        setScreen('menu');
+        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));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => (prev < menuItems.length - 1 ? prev + 1 : 0));
+      } else if (key.name === 'return' || key.name === 'enter') {
+        if (selectedIndex === 0) {
+          setScreen('repoInput');
+          setRepoUrl('');
+        } else if (selectedIndex === 1) {
+          setScreen('sandboxList');
+          setSelectedIndex(0);
+        } else if (selectedIndex === menuItems.length - 1) {
+          process.exit(0);
+        }
+      }
+    } else if (screen === 'providerSelection') {
+      if (key.name === 'up') {
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : providerOptions.length - 1));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => (prev < providerOptions.length - 1 ? prev + 1 : 0));
+      } else if (key.name === 'return' || key.name === 'enter') {
+        setConfig(prev => ({ ...prev, sandboxProvider: providerOptions[selectedIndex].value }));
+        if (providerOptions[selectedIndex].value === 'modal') {
+          setScreen('gpuSelection');
+          setSelectedIndex(0);
+        } else {
+          setScreen('confirmation');
+        }
+      } else if (key.name === 'escape') {
+        setScreen('repoInput');
+      }
+    } else if (screen === 'gpuSelection') {
+      if (key.name === 'up') {
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : gpuOptions.length - 1));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => (prev < gpuOptions.length - 1 ? prev + 1 : 0));
+      } else if (key.name === 'return' || key.name === 'enter') {
+        setConfig(prev => ({ ...prev, gpuType: gpuOptions[selectedIndex].value }));
+        setScreen('gpuCountSelection');
+        setSelectedIndex(0);
+      } else if (key.name === 'escape') {
+        setScreen('providerSelection');
+        setSelectedIndex(0);
+      }
+    } else if (screen === 'gpuCountSelection') {
+      if (key.name === 'up') {
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : gpuCountOptions.length - 1));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => (prev < gpuCountOptions.length - 1 ? prev + 1 : 0));
+      } else if (key.name === 'return' || key.name === 'enter') {
+        setConfig(prev => ({ ...prev, gpuCount: gpuCountOptions[selectedIndex] }));
+        setScreen('confirmation');
+      } else if (key.name === 'escape') {
+        setScreen('gpuSelection');
+        setSelectedIndex(0);
+      }
+    } else if (screen === 'confirmation') {
+      if (key.name === 'return' || key.name === 'enter') {
+        // Check if user is logged in before creating sandbox
+        if (!userCredentials) {
+          setScreen('authChoice');
+          setSelectedIndex(0);
+        } else {
+          createSandbox();
+        }
+      } else if (key.name === 'escape') {
+        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));
+      } else if (key.name === 'down' && sandboxes.length > 0) {
+        setSelectedIndex((prev) => (prev < sandboxes.length - 1 ? prev + 1 : 0));
+      } else if ((key.name === 'return' || key.name === 'enter') && sandboxes.length > 0) {
+        const sandbox = sandboxes[selectedIndex];
+        setViewingSandboxId(sandbox.id);
+        setScreen('sandboxLogs');
+      } else if (key.name === 'escape') {
+        setScreen('menu');
+        setSelectedIndex(0);
+      } else if (key.name === 'd' && sandboxes.length > 0) {
+        const sandbox = sandboxes[selectedIndex];
+        if (sandbox.process) {
+          sandbox.process.kill();
+        }
+        setSandboxes(prev => prev.filter(s => s.id !== sandbox.id));
+        if (selectedIndex >= sandboxes.length - 1) {
+          setSelectedIndex(Math.max(0, sandboxes.length - 2));
+        }
+      } else if (key.name === 'r') {
+        // Refresh - just re-render
+      }
+    } else if (screen === 'sandboxLogs') {
+      if (key.name === 'escape') {
+        setViewingSandboxId(null);
+        setScreen('sandboxList');
+      }
+    }
+  });
+
+  const handleRepoInputChange = (value) => {
+    setRepoUrl(value);
+    setConfig(prev => ({ ...prev, repoUrl: value }));
+  };
+
+  const handleRepoInputSubmit = () => {
+    if (repoUrl.trim()) {
+      setScreen('providerSelection');
+      setSelectedIndex(0);
+    }
+  };
+
+  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 viewingSandbox = viewingSandboxId ? sandboxes.find(s => s.id === viewingSandboxId) : null;
+
+  return (
+    <box style={{ flexDirection: 'column', padding: 1, width: '100%' }}>
+      <Banner />
+      {statusMessage && (
+        <box marginBottom={1} style={{ flexDirection: 'row', justifyContent: 'center' }}>
+          <text fg="green">{statusMessage}</text>
+        </box>
+      )}
+      {screen === 'menu' && <Menu selectedIndex={selectedIndex} />}
+      {screen === 'repoInput' && <RepoInput value={repoUrl} onInput={handleRepoInputChange} onSubmit={handleRepoInputSubmit} />}
+      {screen === 'providerSelection' && <ProviderSelection selectedIndex={selectedIndex} repoUrl={config.repoUrl} />}
+      {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} />}
+    </box>
+  );
+};
+
+render(<App />, {
+  enableMouse: true
+});