@gxp-dev/tools 2.0.16 → 2.0.18

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);
@@ -54,6 +55,11 @@ export default function App({ autoStart, args }: AppProps) {
   // Get terminal height for full screen
   const terminalHeight = stdout?.rows || 24;
 
+  // Stable callback for suggestion row changes to prevent unnecessary re-renders
+  const handleSuggestionsChange = useCallback((count: number) => {
+    setSuggestionRows(count);
+  }, []);
+
   // Sync services from ServiceManager
   const syncServices = useCallback(() => {
     const managerServices = serviceManager.getAllServices();
@@ -226,9 +232,8 @@ export default function App({ autoStart, args }: AppProps) {
         exit();
         break;
 
-      case 'gemini':
       case 'ai':
-        handleGeminiCommand(cmdArgs);
+        handleAICommand(cmdArgs);
         break;
 
       case 'extract-config':
@@ -385,68 +390,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 +676,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 +703,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}
       />
     );
@@ -723,7 +748,7 @@ Keyboard shortcuts:
           name: currentService.name,
           status: currentService.status
         } : null}
-        onSuggestionsChange={setSuggestionRows}
+        onSuggestionsChange={handleSuggestionsChange}
       />
     </Box>
   );

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>
+  );
+}