@gxp-dev/tools 2.0.5

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

@@ -0,0 +1,278 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+
+// Command definitions with descriptions
+const COMMANDS = [
+  { cmd: '/dev', args: '', desc: 'Start Vite (+ Socket if SOCKET_IO_ENABLED)' },
+  { cmd: '/dev', args: '--with-socket', desc: 'Start Vite + Socket.IO' },
+  { cmd: '/dev', args: '--with-mock', desc: 'Start Vite + Socket.IO + Mock API server' },
+  { cmd: '/dev', args: '--firefox', desc: 'Start Vite + Firefox extension' },
+  { cmd: '/dev', args: '--chrome', desc: 'Start Vite + Chrome extension' },
+  { cmd: '/dev', args: '--no-socket', desc: 'Start Vite without Socket.IO' },
+  { cmd: '/dev', args: '--no-https', desc: 'Start Vite without SSL' },
+  { cmd: '/socket', args: '', desc: 'Start Socket.IO server' },
+  { cmd: '/socket', args: 'send <event>', desc: 'Send socket event' },
+  { cmd: '/socket', args: 'list', desc: 'List available events' },
+  { cmd: '/ext', args: 'chrome', desc: 'Launch Chrome extension' },
+  { cmd: '/ext', args: 'firefox', desc: 'Launch Firefox extension' },
+  { cmd: '/stop', args: '[service]', desc: 'Stop current/specified service' },
+  { cmd: '/restart', args: '[service]', desc: 'Restart current/specified service' },
+  { cmd: '/clear', args: '', desc: 'Clear current log panel' },
+  { cmd: '/gemini', args: '', desc: 'Open Gemini AI chat' },
+  { cmd: '/gemini', args: 'enable', desc: 'Set up Google auth' },
+  { cmd: '/gemini', args: 'ask <query>', desc: 'Quick AI question' },
+  { cmd: '/help', args: '', desc: 'Show all commands' },
+  { cmd: '/quit', args: '', desc: 'Exit application' },
+];
+
+interface ActiveService {
+  id: string;
+  name: string;
+  status: string;
+}
+
+interface CommandInputProps {
+  onSubmit: (command: string) => void;
+  activeService?: ActiveService | null;
+  onSuggestionsChange?: (count: number) => void;
+}
+
+export default function CommandInput({ onSubmit, activeService, onSuggestionsChange }: CommandInputProps) {
+  const [value, setValue] = useState('');  // The actual typed value (for filtering)
+  const [displayValue, setDisplayValue] = useState('');  // What's shown in input (may differ when navigating)
+  const [isNavigating, setIsNavigating] = useState(false);  // Track if user is arrowing through suggestions
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [selectedSuggestion, setSelectedSuggestion] = useState(0);
+  // Key to force TextInput remount when value is set programmatically (resets cursor)
+  const [inputKey, setInputKey] = useState(0);
+
+  // Filter commands based on the TYPED value (not display value)
+  const suggestions = useMemo(() => {
+    if (!value.startsWith('/')) return [];
+
+    const search = value.toLowerCase();
+    return COMMANDS.filter(c => {
+      const fullCmd = c.args ? `${c.cmd} ${c.args}` : c.cmd;
+      return fullCmd.toLowerCase().includes(search) ||
+             c.cmd.toLowerCase().startsWith(search);
+    });
+  }, [value]);
+
+  const showSuggestions = value.startsWith('/') && value.length >= 1 && suggestions.length > 0;
+
+  // Helper to build full command string from suggestion
+  const buildFullCommand = (suggestion: typeof COMMANDS[0]): string => {
+    if (suggestion.args) {
+      const hasPlaceholder = suggestion.args.includes('<') || suggestion.args.includes('[');
+      if (!hasPlaceholder) {
+        return `${suggestion.cmd} ${suggestion.args}`;
+      }
+    }
+    return suggestion.cmd;
+  };
+
+  // Notify parent when suggestions change (for layout adjustment)
+  useEffect(() => {
+    if (onSuggestionsChange) {
+      // +2 for border and help text row
+      onSuggestionsChange(showSuggestions ? suggestions.length + 2 : 0);
+    }
+  }, [showSuggestions, suggestions.length, onSuggestionsChange]);
+
+  useInput((input, key) => {
+    // Tab to autocomplete selected suggestion (commits the selection)
+    if (key.tab && showSuggestions && suggestions[selectedSuggestion]) {
+      const suggestion = suggestions[selectedSuggestion];
+      const fullCmd = buildFullCommand(suggestion);
+      // Commit to both value and displayValue
+      setValue(fullCmd);
+      setDisplayValue(fullCmd);
+      setSelectedSuggestion(0);
+      setIsNavigating(false);
+      // Increment key to force TextInput remount (resets cursor to end)
+      setInputKey(k => k + 1);
+      return;
+    }
+
+    // Up/Down to navigate suggestions when showing
+    if (showSuggestions) {
+      if (key.upArrow) {
+        const newIndex = Math.max(0, selectedSuggestion - 1);
+        setSelectedSuggestion(newIndex);
+        setIsNavigating(true);
+        // Update display value to show highlighted command
+        const suggestion = suggestions[newIndex];
+        if (suggestion) {
+          setDisplayValue(buildFullCommand(suggestion));
+          setInputKey(k => k + 1);
+        }
+        return;
+      }
+      if (key.downArrow) {
+        const newIndex = Math.min(suggestions.length - 1, selectedSuggestion + 1);
+        setSelectedSuggestion(newIndex);
+        setIsNavigating(true);
+        // Update display value to show highlighted command
+        const suggestion = suggestions[newIndex];
+        if (suggestion) {
+          setDisplayValue(buildFullCommand(suggestion));
+          setInputKey(k => k + 1);
+        }
+        return;
+      }
+    } else {
+      // History navigation when not showing suggestions
+      if (key.upArrow && history.length > 0) {
+        const newIndex = Math.min(historyIndex + 1, history.length - 1);
+        setHistoryIndex(newIndex);
+        const histVal = history[history.length - 1 - newIndex] || '';
+        setValue(histVal);
+        setDisplayValue(histVal);
+        setInputKey(k => k + 1);
+        return;
+      }
+
+      if (key.downArrow) {
+        const newIndex = Math.max(historyIndex - 1, -1);
+        setHistoryIndex(newIndex);
+        if (newIndex < 0) {
+          setValue('');
+          setDisplayValue('');
+        } else {
+          const histVal = history[history.length - 1 - newIndex] || '';
+          setValue(histVal);
+          setDisplayValue(histVal);
+        }
+        setInputKey(k => k + 1);
+        return;
+      }
+    }
+  });
+
+  const handleSubmit = (input: string) => {
+    if (!input.trim()) return;
+
+    // Add to history
+    if (input.trim()) {
+      setHistory(prev => [...prev.filter(h => h !== input.trim()), input.trim()]);
+    }
+
+    // Reset state
+    setValue('');
+    setDisplayValue('');
+    setHistoryIndex(-1);
+    setSelectedSuggestion(0);
+    setIsNavigating(false);
+
+    // Call handler
+    onSubmit(input);
+  };
+
+  // Handle text input changes
+  const handleChange = (v: string) => {
+    // User typed something, reset navigation state
+    setValue(v);
+    setDisplayValue(v);
+    setSelectedSuggestion(0);
+    setIsNavigating(false);
+  };
+
+  // Get context-specific hints for current tab
+  const getHints = (): string[] => {
+    const hints: string[] = [];
+
+    if (activeService) {
+      const isRunning = activeService.status === 'running' || activeService.status === 'starting';
+      if (isRunning) {
+        hints.push(`Ctrl+K stop ${activeService.name}`);
+        hints.push(`/restart to restart`);
+      }
+      if (activeService.id === 'vite') {
+        hints.push('r to refresh browser');
+      }
+    }
+
+    hints.push('Ctrl+L clear logs');
+    hints.push('Tab/Arrow switch tabs');
+    hints.push('Ctrl+C quit');
+
+    return hints;
+  };
+
+  const hints = getHints();
+
+  return (
+    <Box flexDirection="column">
+      {/* Suggestions dropdown (above input) */}
+      {showSuggestions && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          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 && (
+                <Text
+                  color={index === selectedSuggestion ? 'white' : 'gray'}
+                  backgroundColor={index === selectedSuggestion ? 'blue' : undefined}
+                >
+                  {' '}{suggestion.args}
+                </Text>
+              )}
+              <Text color="gray"> - </Text>
+              <Text
+                color={index === selectedSuggestion ? 'white' : 'gray'}
+                dimColor={index !== selectedSuggestion}
+              >
+                {suggestion.desc}
+              </Text>
+            </Box>
+          ))}
+          <Box paddingX={1} borderStyle={undefined}>
+            <Text dimColor>Tab to complete · Up/Down to select</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Input box */}
+      <Box
+        borderStyle="single"
+        borderColor="cyan"
+        paddingX={1}
+      >
+        <Text color="cyan" bold>&gt;</Text>
+        <Text> </Text>
+        <TextInput
+          key={inputKey}
+          value={displayValue}
+          onChange={handleChange}
+          onSubmit={() => handleSubmit(displayValue.startsWith('/') ? displayValue : '/' + displayValue)}
+          placeholder="Type / to run a command..."
+        />
+      </Box>
+
+      {/* Hints bar (below input) */}
+      <Box paddingX={1} justifyContent="space-between">
+        <Box>
+          {hints.slice(0, 4).map((hint, index) => (
+            <React.Fragment key={hint}>
+              {index > 0 && <Text color="gray"> · </Text>}
+              <Text dimColor>{hint}</Text>
+            </React.Fragment>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import TextInput from 'ink-text-input';
+import {
+  geminiService,
+  isAuthenticated,
+  loadGeminiConfig,
+} from '../services/index.js';
+
+interface GeminiPanelProps {
+  onClose: () => void;
+  onLog: (message: string) => void;
+}
+
+interface Message {
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+}
+
+export default function GeminiPanel({ onClose, onLog }: GeminiPanelProps) {
+  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;
+
+  // Check authentication on mount
+  useEffect(() => {
+    if (!isAuthenticated()) {
+      setMessages([{
+        role: 'system',
+        content: 'Not authenticated. Run /gemini enable to set up Google authentication.',
+      }]);
+    } else {
+      const config = loadGeminiConfig();
+      setMessages([{
+        role: 'system',
+        content: `Gemini AI ready. ${config.projectContext ? 'Project context loaded.' : ''}\nType your message and press Enter. Press Escape to close.`,
+      }]);
+      // Load project context
+      geminiService.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 geminiService.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(`Gemini 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 = 'Gemini: ';
+          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>
+      );
+    });
+  };
+
+  return (
+    <Box flexDirection="column" height="100%" borderStyle="double" borderColor="magenta">
+      <Box paddingX={1} justifyContent="space-between">
+        <Text bold color="magenta">Gemini AI Assistant</Text>
+        <Text color="gray" dimColor>Esc to close</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="magenta">&gt; </Text>
+            <TextInput
+              value={input}
+              onChange={setInput}
+              onSubmit={handleSubmit}
+              placeholder="Ask Gemini something..."
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface HeaderProps {
+  projectName: string;
+}
+
+export default function Header({ projectName }: HeaderProps) {
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="blue"
+      paddingX={1}
+      justifyContent="space-between"
+    >
+      <Box>
+        <Text color="blue" bold>GxP</Text>
+        <Text color="white"> DevStudio</Text>
+        <Text color="gray"> - </Text>
+        <Text color="cyan">{projectName}</Text>
+      </Box>
+      <Box>
+        <Text color="gray">Ctrl+C to quit</Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useStdout, useInput } from 'ink';
+
+interface LogPanelProps {
+  logs: string[];
+  isActive?: boolean;
+  maxHeight?: number; // Maximum height in rows (from parent container)
+}
+
+export default function LogPanel({ logs, isActive = true, maxHeight }: LogPanelProps) {
+  const { stdout } = useStdout();
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  // Calculate visible lines based on provided maxHeight or terminal height
+  // Subtract 2 for padding, 2 for border
+  const defaultMaxLines = stdout ? Math.max(5, stdout.rows - 10) : 15;
+  const maxLines = maxHeight ? Math.max(3, maxHeight - 4) : defaultMaxLines;
+
+  // Reset scroll when logs are cleared
+  useEffect(() => {
+    if (logs.length === 0) {
+      setScrollOffset(0);
+      setAutoScroll(true);
+    }
+  }, [logs.length === 0]);
+
+  // Auto-scroll to bottom when new logs arrive (if autoScroll is enabled)
+  useEffect(() => {
+    if (autoScroll) {
+      setScrollOffset(0);
+    }
+  }, [logs.length, autoScroll]);
+
+  // Handle keyboard input for scrolling
+  useInput((input, key) => {
+    if (!isActive) return;
+
+    // Page Up - scroll up by half a page
+    if (key.pageUp || (key.shift && key.upArrow)) {
+      const maxOffset = Math.max(0, logs.length - maxLines);
+      setScrollOffset(prev => Math.min(prev + Math.floor(maxLines / 2), maxOffset));
+      setAutoScroll(false);
+      return;
+    }
+
+    // Page Down - scroll down by half a page
+    if (key.pageDown || (key.shift && key.downArrow)) {
+      setScrollOffset(prev => {
+        const newOffset = Math.max(prev - Math.floor(maxLines / 2), 0);
+        if (newOffset === 0) setAutoScroll(true);
+        return newOffset;
+      });
+      return;
+    }
+
+    // Home - scroll to top
+    if (key.meta && key.upArrow) {
+      const maxOffset = Math.max(0, logs.length - maxLines);
+      setScrollOffset(maxOffset);
+      setAutoScroll(false);
+      return;
+    }
+
+    // End - scroll to bottom
+    if (key.meta && key.downArrow) {
+      setScrollOffset(0);
+      setAutoScroll(true);
+      return;
+    }
+  });
+
+  // Calculate visible logs with scroll offset
+  const totalLogs = logs.length;
+  const startIndex = Math.max(0, totalLogs - maxLines - scrollOffset);
+  const endIndex = Math.max(0, totalLogs - scrollOffset);
+  const visibleLogs = logs.slice(startIndex, endIndex);
+
+  // Show scroll indicator
+  const canScrollUp = startIndex > 0;
+  const canScrollDown = scrollOffset > 0;
+
+  return (
+    <Box flexDirection="column" padding={1} flexGrow={1} overflow="hidden">
+      {canScrollUp && (
+        <Text color="gray" dimColor>↑ {startIndex} more lines (Shift+↑ to scroll)</Text>
+      )}
+      {visibleLogs.length === 0 ? (
+        <Text color="gray" dimColor>No logs yet...</Text>
+      ) : (
+        visibleLogs.map((log, index) => (
+          <Text key={startIndex + index} wrap="wrap">
+            {formatLog(log)}
+          </Text>
+        ))
+      )}
+      {canScrollDown && (
+        <Text color="gray" dimColor>↓ {scrollOffset} more lines (Shift+↓ to scroll)</Text>
+      )}
+    </Box>
+  );
+}
+
+function formatLog(log: string): React.ReactNode {
+  // Color code different log types
+  if (log.startsWith('[VITE]') || log.includes('VITE')) {
+    return <Text color="cyan">{log}</Text>;
+  }
+  if (log.startsWith('[SOCKET]') || log.includes('Socket')) {
+    return <Text color="green">{log}</Text>;
+  }
+  if (log.includes('error') || log.includes('Error') || log.includes('ERROR')) {
+    return <Text color="red">{log}</Text>;
+  }
+  if (log.includes('warning') || log.includes('Warning') || log.includes('WARN')) {
+    return <Text color="yellow">{log}</Text>;
+  }
+  if (log.includes('Starting') || log.includes('started')) {
+    return <Text color="blue">{log}</Text>;
+  }
+  return <Text>{log}</Text>;
+}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { Service } from '../App.js';
+
+interface TabBarProps {
+  services: Service[];
+  activeTab: number;
+  onTabChange: (index: number) => void;
+}
+
+const STATUS_COLORS: Record<Service['status'], string> = {
+  stopped: 'gray',
+  starting: 'yellow',
+  running: 'green',
+  error: 'red',
+};
+
+const STATUS_ICONS: Record<Service['status'], string> = {
+  stopped: '○',
+  starting: '◐',
+  running: '●',
+  error: '✖',
+};
+
+export default function TabBar({ services, activeTab, onTabChange }: TabBarProps) {
+  return (
+    <Box paddingX={1} gap={2} justifyContent="space-between">
+      <Box gap={2}>
+        {services.map((service, index) => {
+          const isActive = index === activeTab;
+          const statusColor = STATUS_COLORS[service.status];
+          const statusIcon = STATUS_ICONS[service.status];
+
+          return (
+            <Box key={service.id}>
+              <Text
+                color={isActive ? 'white' : 'gray'}
+                backgroundColor={isActive ? 'blue' : undefined}
+                bold={isActive}
+              >
+                {' '}
+                <Text color={statusColor}>{statusIcon}</Text>
+                {' '}
+                {service.name}
+                {' '}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+      <Box>
+        <Text color="gray">Tab/←→ switch tabs</Text>
+      </Box>
+    </Box>
+  );
+}