@gxp-dev/tools 2.0.15 → 2.0.17

package/bin/lib/tui/App.tsx

@@ -5,7 +5,7 @@ import Header from './components/Header.js';
 import TabBar from './components/TabBar.js';
 import LogPanel from './components/LogPanel.js';
 import CommandInput from './components/CommandInput.js';
-import GeminiPanel from './components/GeminiPanel.js';
+import AIPanel from './components/AIPanel.js';
 import {
   serviceManager,
   startVite,
@@ -18,9 +18,10 @@ import {
   sendSocketEvent,
   ServiceStatus,
   BrowserType,
-  geminiService,
-  isAuthenticated,
-  clearAuthTokens,
+  aiService,
+  getAvailableProviders,
+  getProviderStatus,
+  AIProvider,
 } from './services/index.js';
 
 export interface Service {
@@ -46,7 +47,7 @@ export interface AppProps {
 export default function App({ autoStart, args }: AppProps) {
   const { exit } = useApp();
   const { stdout } = useStdout();
-  const [showGemini, setShowGemini] = useState(false);
+  const [showAIPanel, setShowAIPanel] = useState(false);
   const [services, setServices] = useState<Service[]>([]);
   const [activeTab, setActiveTab] = useState(0);
   const [suggestionRows, setSuggestionRows] = useState(0);
@@ -226,9 +227,8 @@ export default function App({ autoStart, args }: AppProps) {
         exit();
         break;
 
-      case 'gemini':
       case 'ai':
-        handleGeminiCommand(cmdArgs);
+        handleAICommand(cmdArgs);
         break;
 
       case 'extract-config':
@@ -385,68 +385,89 @@ export default function App({ autoStart, args }: AppProps) {
     syncServices();
   };
 
-  const handleGeminiCommand = async (cmdArgs: string[]) => {
+  const handleAICommand = async (cmdArgs: string[]) => {
     const subCommand = cmdArgs[0];
 
     switch (subCommand) {
-      case 'enable':
-        addSystemLog('Starting Google OAuth flow...');
-        addSystemLog('A browser window will open for authentication.');
-        const result = await geminiService.startOAuthFlow();
-        if (result.success) {
-          addSystemLog(`✅ ${result.message}`);
+      case 'model':
+        // Set or show current AI provider
+        const providerArg = cmdArgs[1] as AIProvider | undefined;
+        if (providerArg) {
+          const result = aiService.setProvider(providerArg);
+          if (result.success) {
+            addSystemLog(`✅ ${result.message}`);
+          } else {
+            addSystemLog(`❌ ${result.message}`);
+          }
         } else {
-          addSystemLog(`❌ ${result.message}`);
+          // Show current provider and available providers
+          const current = aiService.getProviderInfo();
+          const providers = getAvailableProviders();
+          let message = `Current AI provider: ${current ? getProviderStatus(current) : 'None'}\n\nAvailable providers:`;
+          for (const p of providers) {
+            const status = p.available ? getProviderStatus(p) : `${p.name} (not available)`;
+            const marker = p.id === current?.id ? ' ← current' : '';
+            message += `\n  ${p.id}: ${status}${marker}`;
+            if (!p.available && p.reason) {
+              message += `\n       ${p.reason}`;
+            }
+          }
+          message += '\n\nUsage: /ai model <claude|codex|gemini>';
+          addSystemLog(message);
         }
         break;
 
-      case 'logout':
-      case 'disable':
-        clearAuthTokens();
-        addSystemLog('Logged out from Gemini AI.');
-        break;
-
       case 'status':
-        if (isAuthenticated()) {
-          addSystemLog('✅ Gemini AI is authenticated and ready.');
-        } else {
-          addSystemLog('❌ Not authenticated. Run /gemini enable to set up.');
+        // Show detailed status of all providers
+        const providers = getAvailableProviders();
+        const currentProvider = aiService.getProvider();
+        let statusMsg = 'AI Provider Status:\n';
+        for (const p of providers) {
+          const icon = p.available ? '✅' : '❌';
+          const current = p.id === currentProvider ? ' (current)' : '';
+          statusMsg += `\n  ${icon} ${getProviderStatus(p)}${current}`;
+          if (!p.available && p.reason) {
+            statusMsg += `\n     ${p.reason}`;
+          }
         }
+        addSystemLog(statusMsg);
         break;
 
       case 'ask':
         // Quick question without opening panel
         const question = cmdArgs.slice(1).join(' ');
         if (!question) {
-          addSystemLog('Usage: /gemini ask <your question>');
+          addSystemLog('Usage: /ai ask <your question>');
           return;
         }
-        if (!isAuthenticated()) {
-          addSystemLog('Not authenticated. Run /gemini enable first.');
+        if (!aiService.isAvailable()) {
+          addSystemLog(`Current provider (${aiService.getProvider()}) is not available. Run /ai model to select a different provider.`);
           return;
         }
-        addSystemLog(`Asking Gemini: ${question}`);
+        const providerName = aiService.getProviderInfo()?.name || 'AI';
+        addSystemLog(`Asking ${providerName}: ${question}`);
         try {
-          geminiService.loadProjectContext(process.cwd());
-          const response = await geminiService.sendMessage(question);
-          addSystemLog(`Gemini: ${response}`);
+          aiService.loadProjectContext(process.cwd());
+          const response = await aiService.sendMessage(question);
+          addSystemLog(`${providerName}: ${response}`);
         } catch (err) {
           addSystemLog(`Error: ${err instanceof Error ? err.message : 'Unknown error'}`);
         }
         break;
 
       case 'clear':
-        geminiService.clearConversation();
+        aiService.clearConversation();
         addSystemLog('Conversation history cleared.');
         break;
 
+      case 'chat':
       default:
-        // No subcommand = open chat panel
-        if (!isAuthenticated()) {
-          addSystemLog('Not authenticated. Run /gemini enable to set up Google authentication.');
+        // Open AI chat panel
+        if (!aiService.isAvailable()) {
+          addSystemLog(`Current provider (${aiService.getProvider()}) is not available. Run /ai model to select a different provider.`);
           return;
         }
-        setShowGemini(true);
+        setShowAIPanel(true);
     }
   };
 
@@ -650,13 +671,12 @@ Available commands:
     /extract-config -o    Overwrite existing values
 
   AI Assistant:
-    /gemini               Open Gemini AI chat panel
-    /gemini enable        Set up Google authentication
-    /gemini ask <query>   Quick question to AI
-    /gemini status        Check auth status
-    /gemini logout        Log out from Gemini
-    /gemini clear         Clear conversation history
-    /ai                   Alias for /gemini
+    /ai                   Open AI chat with current provider
+    /ai model             Show available AI providers
+    /ai model <name>      Switch to claude, codex, or gemini
+    /ai ask <query>       Quick question to AI
+    /ai status            Check provider availability
+    /ai clear             Clear conversation history
 
   Service Management:
     /stop [service]       Stop current or specified service
@@ -678,11 +698,11 @@ Keyboard shortcuts:
   Esc              Clear input
 `;
 
-  // Show Gemini panel
-  if (showGemini) {
+  // Show AI panel
+  if (showAIPanel) {
     return (
-      <GeminiPanel
-        onClose={() => setShowGemini(false)}
+      <AIPanel
+        onClose={() => setShowAIPanel(false)}
         onLog={addSystemLog}
       />
     );

package/bin/lib/tui/components/AIPanel.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import TextInput from 'ink-text-input';
+import {
+  aiService,
+  getProviderStatus,
+} from '../services/index.js';
+
+interface AIPanelProps {
+  onClose: () => void;
+  onLog: (message: string) => void;
+}
+
+interface Message {
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+}
+
+export default function AIPanel({ onClose, onLog }: AIPanelProps) {
+  const { stdout } = useStdout();
+  const [input, setInput] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  // Calculate available height for messages
+  const maxMessageLines = stdout ? Math.max(5, stdout.rows - 8) : 10;
+
+  // Get provider info for display
+  const providerInfo = aiService.getProviderInfo();
+  const providerName = providerInfo?.name || 'AI';
+
+  // Check provider availability on mount
+  useEffect(() => {
+    if (!aiService.isAvailable()) {
+      setMessages([{
+        role: 'system',
+        content: `${providerName} is not available. Run /ai model to select a different provider, or install the required CLI.`,
+      }]);
+    } else {
+      const status = getProviderStatus(providerInfo!);
+      setMessages([{
+        role: 'system',
+        content: `${status} ready.\nType your message and press Enter. Press Escape to close.`,
+      }]);
+      // Load project context
+      aiService.loadProjectContext(process.cwd());
+    }
+  }, []);
+
+  // Handle keyboard input
+  useInput((char, key) => {
+    if (key.escape) {
+      onClose();
+      return;
+    }
+
+    // Scroll with Shift+Up/Down
+    if (key.shift && key.upArrow) {
+      setScrollOffset(prev => Math.min(prev + 1, Math.max(0, messages.length - maxMessageLines)));
+      return;
+    }
+    if (key.shift && key.downArrow) {
+      setScrollOffset(prev => Math.max(0, prev - 1));
+      return;
+    }
+  });
+
+  const handleSubmit = async (value: string) => {
+    if (!value.trim() || isLoading) return;
+
+    const userMessage = value.trim();
+    setInput('');
+
+    // Add user message
+    setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
+    setIsLoading(true);
+
+    try {
+      const response = await aiService.sendMessage(userMessage);
+      setMessages(prev => [...prev, { role: 'assistant', content: response }]);
+      setScrollOffset(0); // Auto-scroll to bottom
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setMessages(prev => [...prev, {
+        role: 'system',
+        content: `Error: ${errorMessage}`,
+      }]);
+      onLog(`${providerName} error: ${errorMessage}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Render messages with scrolling
+  const renderMessages = () => {
+    const start = Math.max(0, messages.length - maxMessageLines - scrollOffset);
+    const end = messages.length - scrollOffset;
+    const visibleMessages = messages.slice(start, end);
+
+    return visibleMessages.map((msg, idx) => {
+      let color: string;
+      let prefix: string;
+
+      switch (msg.role) {
+        case 'user':
+          color = 'cyan';
+          prefix = 'You: ';
+          break;
+        case 'assistant':
+          color = 'green';
+          prefix = `${providerName}: `;
+          break;
+        default:
+          color = 'yellow';
+          prefix = '';
+      }
+
+      return (
+        <Box key={start + idx} flexDirection="column" marginBottom={1}>
+          <Text color={color} bold>{prefix}</Text>
+          <Text wrap="wrap">{msg.content}</Text>
+        </Box>
+      );
+    });
+  };
+
+  // Get border color based on provider
+  const getBorderColor = (): string => {
+    switch (aiService.getProvider()) {
+      case 'claude':
+        return 'magenta';
+      case 'codex':
+        return 'green';
+      case 'gemini':
+        return 'blue';
+      default:
+        return 'gray';
+    }
+  };
+
+  const borderColor = getBorderColor();
+
+  return (
+    <Box flexDirection="column" height="100%" borderStyle="double" borderColor={borderColor}>
+      <Box paddingX={1} justifyContent="space-between">
+        <Text bold color={borderColor}>{providerName} AI Assistant</Text>
+        <Text color="gray" dimColor>Esc to close · /ai model to switch</Text>
+      </Box>
+
+      <Box flexDirection="column" flexGrow={1} paddingX={1} overflow="hidden">
+        {messages.length > maxMessageLines + scrollOffset && (
+          <Text color="gray" dimColor>
+            ... {messages.length - maxMessageLines - scrollOffset} earlier messages
+          </Text>
+        )}
+        {renderMessages()}
+        {scrollOffset > 0 && (
+          <Text color="gray" dimColor>... {scrollOffset} newer messages below</Text>
+        )}
+      </Box>
+
+      <Box borderStyle="single" borderColor="gray" paddingX={1}>
+        {isLoading ? (
+          <Text color="yellow">Thinking...</Text>
+        ) : (
+          <Box>
+            <Text color={borderColor}>&gt; </Text>
+            <TextInput
+              value={input}
+              onChange={setInput}
+              onSubmit={handleSubmit}
+              placeholder={`Ask ${providerName} something...`}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/bin/lib/tui/components/CommandInput.tsx

@@ -35,13 +35,14 @@ const COMMANDS = [
   { cmd: '/extract-config', args: '--overwrite', desc: 'Overwrite existing config values' },
 
   // AI commands
-  { cmd: '/gemini', args: '', desc: 'Open Gemini AI chat panel' },
-  { cmd: '/gemini', args: 'enable', desc: 'Set up Google authentication' },
-  { cmd: '/gemini', args: 'ask <query>', desc: 'Quick AI question' },
-  { cmd: '/gemini', args: 'status', desc: 'Check AI auth status' },
-  { cmd: '/gemini', args: 'logout', desc: 'Log out from Gemini' },
-  { cmd: '/gemini', args: 'clear', desc: 'Clear conversation history' },
-  { cmd: '/ai', args: '', desc: 'Open Gemini AI chat (alias)' },
+  { cmd: '/ai', args: '', desc: 'Open AI chat with current provider' },
+  { cmd: '/ai', args: 'model', desc: 'Show available AI providers' },
+  { cmd: '/ai', args: 'model claude', desc: 'Switch to Claude AI' },
+  { cmd: '/ai', args: 'model codex', desc: 'Switch to Codex AI' },
+  { cmd: '/ai', args: 'model gemini', desc: 'Switch to Gemini AI' },
+  { cmd: '/ai', args: 'ask <query>', desc: 'Quick AI question' },
+  { cmd: '/ai', args: 'status', desc: 'Check provider availability' },
+  { cmd: '/ai', args: 'clear', desc: 'Clear conversation history' },
 
   // General
   { cmd: '/help', args: '', desc: 'Show all commands' },
@@ -72,7 +73,10 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
   // Track previous suggestion count to avoid unnecessary parent updates
   const prevSuggestionCount = useRef(0);
 
-  // Filter commands based on typed value
+  // Maximum visible suggestions in the dropdown
+  const MAX_VISIBLE = 8;
+
+  // Filter commands based on typed value (no limit - we'll handle display separately)
   const suggestions = useMemo(() => {
     if (!value.startsWith('/')) return [];
 
@@ -81,9 +85,31 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
       const fullCmd = c.args ? `${c.cmd} ${c.args}` : c.cmd;
       return fullCmd.toLowerCase().includes(search) ||
              c.cmd.toLowerCase().startsWith(search);
-    }).slice(0, 8); // Limit to 8 suggestions for cleaner UI
+    });
   }, [value]);
 
+  // Calculate visible window of suggestions (scrolls to keep selection visible)
+  const { visibleSuggestions, startIndex } = useMemo(() => {
+    if (suggestions.length <= MAX_VISIBLE) {
+      return { visibleSuggestions: suggestions, startIndex: 0 };
+    }
+
+    // Calculate window to keep selected item visible
+    let start = 0;
+    if (selectedSuggestion >= MAX_VISIBLE) {
+      // Selected item is beyond initial window, scroll down
+      start = selectedSuggestion - MAX_VISIBLE + 1;
+    }
+    // Ensure we don't go past the end
+    start = Math.min(start, suggestions.length - MAX_VISIBLE);
+    start = Math.max(0, start);
+
+    return {
+      visibleSuggestions: suggestions.slice(start, start + MAX_VISIBLE),
+      startIndex: start,
+    };
+  }, [suggestions, selectedSuggestion]);
+
   const showSuggestions = value.startsWith('/') && value.length >= 1 && suggestions.length > 0;
 
   // Helper to build full command string from suggestion
@@ -97,9 +123,10 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
     return suggestion.cmd;
   }, []);
 
-  // Notify parent when suggestions change (debounced to reduce flicker)
+  // Notify parent when suggestions change (use visible count, not total)
   useEffect(() => {
-    const count = showSuggestions ? suggestions.length + 2 : 0;
+    const visibleCount = Math.min(suggestions.length, MAX_VISIBLE);
+    const count = showSuggestions ? visibleCount + 2 : 0; // +2 for border and hint line
     if (count !== prevSuggestionCount.current) {
       prevSuggestionCount.current = count;
       onSuggestionsChange?.(count);
@@ -124,14 +151,22 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
       return;
     }
 
-    // Up/Down to navigate suggestions when showing
+    // Up/Down to navigate suggestions when showing (circular navigation)
     if (showSuggestions) {
       if (key.upArrow) {
-        setSelectedSuggestion(prev => Math.max(0, prev - 1));
+        setSelectedSuggestion(prev => {
+          // Wrap to bottom when at top
+          if (prev <= 0) return suggestions.length - 1;
+          return prev - 1;
+        });
         return;
       }
       if (key.downArrow) {
-        setSelectedSuggestion(prev => Math.min(suggestions.length - 1, prev + 1));
+        setSelectedSuggestion(prev => {
+          // Wrap to top when at bottom
+          if (prev >= suggestions.length - 1) return 0;
+          return prev + 1;
+        });
         return;
       }
     } else {
@@ -219,32 +254,48 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
           borderColor="gray"
           marginBottom={0}
         >
-          {suggestions.map((suggestion, index) => (
-            <Box key={`${suggestion.cmd}-${suggestion.args}-${index}`} paddingX={1}>
-              <Text
-                backgroundColor={index === selectedSuggestion ? 'blue' : undefined}
-                color={index === selectedSuggestion ? 'white' : 'cyan'}
-                bold={index === selectedSuggestion}
-              >
-                {suggestion.cmd}
-              </Text>
-              {suggestion.args && (
+          {/* Scroll up indicator */}
+          {startIndex > 0 && (
+            <Box paddingX={1}>
+              <Text color="gray">↑ {startIndex} more above</Text>
+            </Box>
+          )}
+          {visibleSuggestions.map((suggestion, visibleIndex) => {
+            const actualIndex = startIndex + visibleIndex;
+            const isSelected = actualIndex === selectedSuggestion;
+            return (
+              <Box key={`${suggestion.cmd}-${suggestion.args}-${actualIndex}`} paddingX={1}>
                 <Text
-                  color={index === selectedSuggestion ? 'white' : 'gray'}
-                  backgroundColor={index === selectedSuggestion ? 'blue' : undefined}
+                  backgroundColor={isSelected ? 'blue' : undefined}
+                  color={isSelected ? 'white' : 'cyan'}
+                  bold={isSelected}
                 >
-                  {' '}{suggestion.args}
+                  {suggestion.cmd}
                 </Text>
-              )}
-              <Text color="gray"> - </Text>
-              <Text
-                color={index === selectedSuggestion ? 'white' : 'gray'}
-                dimColor={index !== selectedSuggestion}
-              >
-                {suggestion.desc}
-              </Text>
+                {suggestion.args && (
+                  <Text
+                    color={isSelected ? 'white' : 'gray'}
+                    backgroundColor={isSelected ? 'blue' : undefined}
+                  >
+                    {' '}{suggestion.args}
+                  </Text>
+                )}
+                <Text color="gray"> - </Text>
+                <Text
+                  color={isSelected ? 'white' : 'gray'}
+                  dimColor={!isSelected}
+                >
+                  {suggestion.desc}
+                </Text>
+              </Box>
+            );
+          })}
+          {/* Scroll down indicator */}
+          {startIndex + MAX_VISIBLE < suggestions.length && (
+            <Box paddingX={1}>
+              <Text color="gray">↓ {suggestions.length - startIndex - MAX_VISIBLE} more below</Text>
             </Box>
-          ))}
+          )}
           <Box paddingX={1}>
             <Text dimColor>Tab complete · ↑↓ select · Esc cancel</Text>
           </Box>