gitarsenal-cli 1.9.111 → 1.9.113

package/.venv_status.json

@@ -1 +1 @@
-{"created":"2025-10-15T13:59:40.768Z","packages":["modal","gitingest","requests","anthropic"],"uv_version":"uv 0.8.4 (Homebrew 2025-07-30)"}
+{"created":"2025-10-15T14:18:56.158Z","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.111",
+  "version": "1.9.113",
   "description": "CLI tool for creating Modal sandboxes with GitHub repositories",
   "main": "index.js",
   "bin": {

package/tui-app/index.jsx

@@ -2,7 +2,7 @@
 
 import { render, useKeyboard, useTerminalDimensions } from '@opentui/react';
 import { useState, useEffect } from 'react';
-import { spawn } from 'child_process';
+import { spawn, exec } from 'child_process';
 import { join } from 'path';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
@@ -12,6 +12,17 @@ import os from 'os';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
+// Helper function to open URLs in default browser
+const openUrl = (url) => {
+  const command = process.platform === 'darwin' ? 'open' :
+                  process.platform === 'win32' ? 'start' : 'xdg-open';
+  exec(`${command} ${url}`, (error) => {
+    if (error) {
+      console.error('Could not open URL:', error);
+    }
+  });
+};
+
 // Helper functions for user credentials
 const getUserConfigPath = () => {
   const userConfigDir = join(os.homedir(), '.gitarsenal');
@@ -369,7 +380,7 @@ const AuthChoice = ({ selectedIndex }) => {
   );
 };
 
-const LoginForm = ({ values, onInput, onSubmit }) => {
+const LoginForm = ({ values, onInput, onSubmit, onNextField, focusedFieldIndex }) => {
   const fields = ['username', 'email', 'fullName', 'password'];
   const labels = ['Username:', 'Email Address:', 'Full Name:', 'Password:'];
   
@@ -384,21 +395,21 @@ const LoginForm = ({ values, onInput, onSubmit }) => {
           <input
             value={values[field] || ''}
             onInput={(value) => onInput(field, value)}
-            onSubmit={index === fields.length - 1 ? onSubmit : undefined}
+            onSubmit={index === fields.length - 1 ? onSubmit : () => onNextField(index)}
             placeholder={field === 'password' ? '••••••••' : ''}
-            focused={index === 0}
+            focused={index === focusedFieldIndex}
             width={50}
           />
         </box>
       ))}
       <box marginTop={1}>
-        <text dimColor fg="gray">Fill all fields and press Enter • Esc to go back</text>
+        <text dimColor fg="gray">Tab or Enter to next field • Esc to go back</text>
       </box>
     </box>
   );
 };
 
-const RegisterForm = ({ values, onInput, onSubmit }) => {
+const RegisterForm = ({ values, onInput, onSubmit, onNextField, focusedFieldIndex }) => {
   const fields = ['username', 'email', 'fullName', 'password', 'confirmPassword'];
   const labels = ['Username:', 'Email Address:', 'Full Name:', 'Password (min 8 chars):', 'Confirm Password:'];
   
@@ -413,15 +424,60 @@ const RegisterForm = ({ values, onInput, onSubmit }) => {
           <input
             value={values[field] || ''}
             onInput={(value) => onInput(field, value)}
-            onSubmit={index === fields.length - 1 ? onSubmit : undefined}
+            onSubmit={index === fields.length - 1 ? onSubmit : () => onNextField(index)}
             placeholder={field.includes('password') ? '••••••••' : ''}
-            focused={index === 0}
+            focused={index === focusedFieldIndex}
             width={50}
           />
         </box>
       ))}
       <box marginTop={1}>
-        <text dimColor fg="gray">Fill all fields and press Enter • Esc to go back</text>
+        <text dimColor fg="gray">Tab or Enter to next field • Esc to go back</text>
+      </box>
+    </box>
+  );
+};
+
+const Settings = ({ userCredentials, selectedIndex }) => {
+  const settingsOptions = userCredentials 
+    ? ['Create New Account', 'Logout', 'Back to Menu']
+    : ['Create Account', 'Login', 'Back to Menu'];
+
+  return (
+    <box style={{ flexDirection: 'column', alignItems: 'center' }}>
+      <box borderStyle="single" padding={1} marginBottom={1}>
+        <text bold>Settings</text>
+      </box>
+      
+      {userCredentials ? (
+        <box marginBottom={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text fg="green">Logged in as: {userCredentials.userName}</text>
+          <text dimColor fg="gray">{userCredentials.userEmail}</text>
+        </box>
+      ) : (
+        <box marginBottom={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+          <text dimColor fg="gray">No account logged in</text>
+        </box>
+      )}
+
+      {settingsOptions.map((option, index) => (
+        <box key={index} marginY={0} marginBottom={0}>
+          {index === selectedIndex ? (
+            <box borderStyle="single" borderColor="cyan" paddingX={2} paddingY={0} width={48} style={{ justifyContent: 'center' }}>
+              <text bold fg="cyan">{option}</text>
+            </box>
+          ) : (
+            <box borderStyle="single" borderColor="gray" paddingX={2} paddingY={0} width={48} style={{ justifyContent: 'center' }}>
+              <text dimColor>{option}</text>
+            </box>
+          )}
+        </box>
+      ))}
+
+      <box marginTop={2} style={{ flexDirection: 'column', alignItems: 'center' }}>
+        <text bold>Controls:</text>
+        <text dimColor fg="gray">↑↓ - Navigate • Enter - Select</text>
+        <text dimColor fg="gray">Esc - Back to menu</text>
       </box>
     </box>
   );
@@ -487,7 +543,7 @@ const ApiKeysManagement = ({ apiKeys, selectedIndex }) => {
   );
 };
 
-const ApiKeyForm = ({ serviceName, apiKey, onServiceInput, onKeyInput, onSubmit, isEditing }) => {
+const ApiKeyForm = ({ serviceName, apiKey, onServiceInput, onKeyInput, onSubmit, onNextField, isEditing, focusedFieldIndex }) => {
   return (
     <box style={{ flexDirection: 'column', alignItems: 'center' }}>
       <box borderStyle="single" padding={1} marginBottom={1}>
@@ -513,8 +569,9 @@ const ApiKeyForm = ({ serviceName, apiKey, onServiceInput, onKeyInput, onSubmit,
           <input
             value={serviceName || ''}
             onInput={onServiceInput}
+            onSubmit={onNextField}
             placeholder="e.g., openai_api_key"
-            focused={true}
+            focused={focusedFieldIndex === 0}
             width={70}
           />
         </box>
@@ -534,13 +591,13 @@ const ApiKeyForm = ({ serviceName, apiKey, onServiceInput, onKeyInput, onSubmit,
           onInput={onKeyInput}
           onSubmit={onSubmit}
           placeholder="Paste your API key here..."
-          focused={isEditing}
+          focused={isEditing || focusedFieldIndex === 1}
           width={70}
         />
       </box>
       
       <box marginTop={1} style={{ flexDirection: 'column', alignItems: 'center' }}>
-        <text dimColor fg="gray">Enter to save • Esc to cancel</text>
+        <text dimColor fg="gray">{isEditing ? 'Enter to save' : 'Tab or Enter to next field'} • Esc to cancel</text>
         {isEditing && <text dimColor fg="gray">Clear field to remove the key</text>}
       </box>
     </box>
@@ -671,11 +728,13 @@ const App = () => {
   const [viewingSandboxId, setViewingSandboxId] = useState(null);
   const [userCredentials, setUserCredentials] = useState(null);
   const [authFormValues, setAuthFormValues] = useState({});
+  const [authFieldIndex, setAuthFieldIndex] = useState(0);
   const [apiKeys, setApiKeys] = useState({});
   const [editingServiceName, setEditingServiceName] = useState('');
   const [serviceNameInput, setServiceNameInput] = useState('');
   const [apiKeyInput, setApiKeyInput] = useState('');
   const [isEditingExisting, setIsEditingExisting] = useState(false);
+  const [apiKeyFieldIndex, setApiKeyFieldIndex] = useState(0);
 
   // Load user credentials on mount
   useEffect(() => {
@@ -808,8 +867,14 @@ const App = () => {
         setServiceNameInput('');
         setApiKeyInput('');
         setIsEditingExisting(false);
+        setApiKeyFieldIndex(0);
         setScreen('apiKeysManagement');
         setSelectedIndex(0);
+      } else if (key.name === 'tab') {
+        // Toggle between fields when adding new key
+        if (!isEditingExisting) {
+          setApiKeyFieldIndex((prev) => (prev === 0 ? 1 : 0));
+        }
       }
       // Let the input component handle all other keys
       return;
@@ -830,6 +895,15 @@ const App = () => {
         } else if (selectedIndex === 2) {
           setScreen('apiKeysManagement');
           setSelectedIndex(0);
+        } else if (selectedIndex === 3) {
+          // Settings
+          setScreen('settings');
+          setSelectedIndex(0);
+        } else if (selectedIndex === 4) {
+          // Help & Examples - open docs page
+          openUrl('https://gitarsenal.dev/docs');
+          setStatusMessage('Opening documentation in your browser...');
+          setTimeout(() => setStatusMessage(''), 3000);
         } else if (selectedIndex === menuItems.length - 1) {
           process.exit(0);
         }
@@ -901,25 +975,35 @@ const App = () => {
         if (selectedIndex === 0) {
           setScreen('register');
           setAuthFormValues({});
+          setAuthFieldIndex(0);
         } else {
           setScreen('login');
           setAuthFormValues({});
+          setAuthFieldIndex(0);
         }
       } else if (key.name === 'escape') {
         process.exit(0);
       }
     } else if (screen === 'login') {
+      const loginFields = 4;
       if (key.name === 'escape') {
-        setScreen('authChoice');
+        setScreen('settings');
         setSelectedIndex(0);
         setAuthFormValues({});
+        setAuthFieldIndex(0);
+      } else if (key.name === 'tab') {
+        setAuthFieldIndex((prev) => (prev < loginFields - 1 ? prev + 1 : 0));
       }
       // Submit is handled by input component's onSubmit
     } else if (screen === 'register') {
+      const registerFields = 5;
       if (key.name === 'escape') {
-        setScreen('authChoice');
+        setScreen('settings');
         setSelectedIndex(0);
         setAuthFormValues({});
+        setAuthFieldIndex(0);
+      } else if (key.name === 'tab') {
+        setAuthFieldIndex((prev) => (prev < registerFields - 1 ? prev + 1 : 0));
       }
       // Submit is handled by input component's onSubmit
     } else if (screen === 'sandboxList') {
@@ -951,6 +1035,59 @@ const App = () => {
         setViewingSandboxId(null);
         setScreen('sandboxList');
       }
+    } else if (screen === 'settings') {
+      const settingsOptions = userCredentials ? 3 : 3; // Always 3 options
+      
+      if (key.name === 'up') {
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : settingsOptions - 1));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => (prev < settingsOptions - 1 ? prev + 1 : 0));
+      } else if (key.name === 'return' || key.name === 'enter') {
+        if (userCredentials) {
+          // Logged in: Create New Account, Logout, Back to Menu
+          if (selectedIndex === 0) {
+            // Create New Account
+            setScreen('register');
+            setAuthFormValues({});
+            setAuthFieldIndex(0);
+          } else if (selectedIndex === 1) {
+            // Logout
+            setUserCredentials(null);
+            const { userConfigPath } = getUserConfigPath();
+            if (fs.existsSync(userConfigPath)) {
+              fs.unlinkSync(userConfigPath);
+            }
+            setStatusMessage('Logged out successfully');
+            setTimeout(() => setStatusMessage(''), 3000);
+            setScreen('menu');
+            setSelectedIndex(0);
+          } else if (selectedIndex === 2) {
+            // Back to Menu
+            setScreen('menu');
+            setSelectedIndex(0);
+          }
+        } else {
+          // Not logged in: Create Account, Login, Back to Menu
+          if (selectedIndex === 0) {
+            // Create Account
+            setScreen('register');
+            setAuthFormValues({});
+            setAuthFieldIndex(0);
+          } else if (selectedIndex === 1) {
+            // Login
+            setScreen('login');
+            setAuthFormValues({});
+            setAuthFieldIndex(0);
+          } else if (selectedIndex === 2) {
+            // Back to Menu
+            setScreen('menu');
+            setSelectedIndex(0);
+          }
+        }
+      } else if (key.name === 'escape') {
+        setScreen('menu');
+        setSelectedIndex(0);
+      }
     } else if (screen === 'apiKeysManagement') {
       // Calculate items: 1 "Add New" + all stored keys
       const storedKeyNames = Object.keys(apiKeys).sort();
@@ -966,6 +1103,7 @@ const App = () => {
           setServiceNameInput('');
           setApiKeyInput('');
           setIsEditingExisting(false);
+          setApiKeyFieldIndex(0);
           setScreen('apiKeyForm');
         } else {
           // One of the stored keys selected - edit it
@@ -974,6 +1112,7 @@ const App = () => {
           setServiceNameInput(serviceName);
           setApiKeyInput(apiKeys[serviceName] || '');
           setIsEditingExisting(true);
+          setApiKeyFieldIndex(0);
           setScreen('apiKeyForm');
         }
       } else if (key.name === 'd') {
@@ -1014,6 +1153,13 @@ const App = () => {
     setAuthFormValues(prev => ({ ...prev, [field]: value }));
   };
 
+  const handleAuthNextField = (currentIndex) => {
+    const maxFields = screen === 'register' ? 4 : 3; // register has 5 fields (0-4), login has 4 fields (0-3)
+    if (currentIndex < maxFields) {
+      setAuthFieldIndex(currentIndex + 1);
+    }
+  };
+
   const handleLoginSubmit = () => {
     const { username, email, fullName, password } = authFormValues;
     if (username && email && fullName && password) {
@@ -1021,9 +1167,11 @@ const App = () => {
       const saved = saveUserCredentials(username, fullName, email);
       if (saved) {
         setUserCredentials({ userId: username, userName: fullName, userEmail: email });
-        setStatusMessage(`Welcome, ${fullName}!`);
+        setStatusMessage(`Welcome back, ${fullName}!`);
         setTimeout(() => setStatusMessage(''), 3000);
-        createSandbox();
+        setScreen('settings');
+        setSelectedIndex(0);
+        setAuthFormValues({});
       } else {
         setStatusMessage('Failed to save credentials');
         setTimeout(() => setStatusMessage(''), 3000);
@@ -1067,7 +1215,9 @@ const App = () => {
       setUserCredentials({ userId: username, userName: fullName, userEmail: email });
       setStatusMessage(`Account created! Welcome, ${fullName}!`);
       setTimeout(() => setStatusMessage(''), 3000);
-      createSandbox();
+      setScreen('settings');
+      setSelectedIndex(0);
+      setAuthFormValues({});
     } else {
       setStatusMessage('Failed to save credentials');
       setTimeout(() => setStatusMessage(''), 3000);
@@ -1082,6 +1232,13 @@ const App = () => {
     setApiKeyInput(value);
   };
 
+  const handleApiKeyNextField = () => {
+    // Move from Service Name (0) to API Key (1)
+    if (apiKeyFieldIndex === 0) {
+      setApiKeyFieldIndex(1);
+    }
+  };
+
   const handleApiKeyFormSubmit = () => {
     const serviceName = isEditingExisting ? editingServiceName : serviceNameInput.trim();
     const apiKey = apiKeyInput.trim();
@@ -1120,6 +1277,7 @@ const App = () => {
       setServiceNameInput('');
       setApiKeyInput('');
       setIsEditingExisting(false);
+      setApiKeyFieldIndex(0);
       setScreen('apiKeysManagement');
       setSelectedIndex(0);
     } else {
@@ -1145,12 +1303,13 @@ const App = () => {
       {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 === 'login' && <LoginForm values={authFormValues} onInput={handleAuthFormInput} onSubmit={handleLoginSubmit} onNextField={handleAuthNextField} focusedFieldIndex={authFieldIndex} />}
+      {screen === 'register' && <RegisterForm values={authFormValues} onInput={handleAuthFormInput} onSubmit={handleRegisterSubmit} onNextField={handleAuthNextField} focusedFieldIndex={authFieldIndex} />}
       {screen === 'sandboxList' && <SandboxList sandboxes={sandboxes} selectedIndex={selectedIndex} />}
       {screen === 'sandboxLogs' && viewingSandbox && <SandboxLogs sandbox={viewingSandbox} />}
+      {screen === 'settings' && <Settings userCredentials={userCredentials} selectedIndex={selectedIndex} />}
       {screen === 'apiKeysManagement' && <ApiKeysManagement apiKeys={apiKeys} selectedIndex={selectedIndex} />}
-      {screen === 'apiKeyForm' && <ApiKeyForm serviceName={serviceNameInput} apiKey={apiKeyInput} onServiceInput={handleServiceNameInput} onKeyInput={handleApiKeyInput} onSubmit={handleApiKeyFormSubmit} isEditing={isEditingExisting} />}
+      {screen === 'apiKeyForm' && <ApiKeyForm serviceName={serviceNameInput} apiKey={apiKeyInput} onServiceInput={handleServiceNameInput} onKeyInput={handleApiKeyInput} onSubmit={handleApiKeyFormSubmit} onNextField={handleApiKeyNextField} isEditing={isEditingExisting} focusedFieldIndex={apiKeyFieldIndex} />}
     </box>
   );
 };