gencode-ai 0.1.0

package/src/cli/components/Input.tsx

@@ -0,0 +1,60 @@
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { colors, icons } from './theme.js';
+
+interface PromptInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+}
+
+export function PromptInput({ value, onChange, onSubmit }: PromptInputProps) {
+  const handleSubmit = (text: string) => {
+    if (text.trim()) {
+      onSubmit(text);
+    }
+  };
+
+  // Get terminal full width for border
+  const width = process.stdout.columns || 80;
+  const border = '─'.repeat(width);
+
+  return (
+    <Box flexDirection="column" marginTop={0}>
+      <Text color={colors.textMuted}>{border}</Text>
+      <Box>
+        <Text color={colors.brand}>{icons.prompt} </Text>
+        <TextInput
+          value={value}
+          onChange={onChange}
+          onSubmit={handleSubmit}
+          placeholder=""
+        />
+      </Box>
+      <Text color={colors.textMuted}>{border}</Text>
+    </Box>
+  );
+}
+
+interface ConfirmPromptProps {
+  message: string;
+  onConfirm: (confirmed: boolean) => void;
+}
+
+export function ConfirmPrompt({ message, onConfirm }: ConfirmPromptProps) {
+  useInput((input, key) => {
+    if (input.toLowerCase() === 'y' || key.return) {
+      onConfirm(true);
+    } else if (input.toLowerCase() === 'n' || key.escape) {
+      onConfirm(false);
+    }
+  });
+
+  return (
+    <Box>
+      <Text color={colors.warning}>{icons.warning} </Text>
+      <Text>{message} </Text>
+      <Text color={colors.textMuted}>[y/n] </Text>
+    </Box>
+  );
+}

package/src/cli/components/Logo.tsx

@@ -0,0 +1,16 @@
+import { Box, Text } from 'ink';
+
+export function Logo() {
+  // Full G with 3D shadow - subdued slate color
+  const slateColor = "#64748B"; // Slate 500 - stable, professional
+  return (
+    <Box flexDirection="column" marginRight={1}>
+      <Text color={slateColor}>  ██████╗ </Text>
+      <Text color={slateColor}> ██╔════╝ </Text>
+      <Text color={slateColor}> ██║  ███╗</Text>
+      <Text color={slateColor}> ██║   ██║</Text>
+      <Text color={slateColor}> ╚██████╔╝</Text>
+      <Text color={slateColor}>  ╚═════╝ </Text>
+    </Box>
+  );
+}

package/src/cli/components/Messages.tsx

@@ -0,0 +1,210 @@
+import { Box, Text } from 'ink';
+import { colors, icons } from './theme.js';
+
+// Word wrap text to terminal width
+function wrapText(text: string, width: number): string[] {
+  const lines: string[] = [];
+  for (const line of text.split('\n')) {
+    if (line.length <= width) {
+      lines.push(line);
+    } else {
+      // Simple word wrap
+      let currentLine = '';
+      const words = line.split(' ');
+      for (const word of words) {
+        if (currentLine.length + word.length + 1 <= width) {
+          currentLine += (currentLine ? ' ' : '') + word;
+        } else {
+          if (currentLine) lines.push(currentLine);
+          currentLine = word;
+        }
+      }
+      if (currentLine) lines.push(currentLine);
+    }
+  }
+  return lines;
+}
+
+interface UserMessageProps {
+  text: string;
+}
+
+export function UserMessage({ text }: UserMessageProps) {
+  const lines = text.trimEnd().split('\n');
+  return (
+    <Box flexDirection="column" marginTop={1} marginBottom={0}>
+      {lines.map((line, i) => (
+        <Box key={i}>
+          <Text color={colors.brand}>{icons.userPrompt} </Text>
+          <Text backgroundColor="#1E293B" color={colors.text}> {line} </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+interface AssistantMessageProps {
+  text: string;
+  streaming?: boolean;
+}
+
+export function AssistantMessage({ text, streaming }: AssistantMessageProps) {
+  if (!text) return null;
+
+  // Get terminal width for wrapping
+  const termWidth = process.stdout.columns || 80;
+  const contentWidth = termWidth - 4; // Account for prefix
+
+  // Wrap text to terminal width
+  const lines = wrapText(text.trimEnd(), contentWidth);
+
+  return (
+    <Box flexDirection="column" marginTop={1} marginBottom={0}>
+      {lines.map((line, i) => (
+        <Box key={i}>
+          {i === 0 && <Text color={colors.success}>{icons.assistant} </Text>}
+          {i > 0 && <Text>  </Text>}
+          <Text>
+            {line}
+            {streaming && i === lines.length - 1 ? (
+              <Text color={colors.brandLight}>{icons.cursor}</Text>
+            ) : (
+              ''
+            )}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+interface ToolCallProps {
+  name: string;
+  input: Record<string, unknown>;
+}
+
+export function ToolCall({ name, input }: ToolCallProps) {
+  const inputStr = JSON.stringify(input);
+  const shortInput = inputStr.length > 50 ? inputStr.slice(0, 47) + '...' : inputStr;
+
+  return (
+    <Box marginLeft={2}>
+      <Text dimColor>
+        <Text color={colors.tool}>{icons.tool}</Text> {name}{' '}
+        <Text color={colors.textMuted}>{shortInput}</Text>
+      </Text>
+    </Box>
+  );
+}
+
+interface ToolResultProps {
+  name: string;
+  success: boolean;
+  output: string;
+}
+
+export function ToolResult({ name, success, output }: ToolResultProps) {
+  const firstLine = output.split('\n')[0]?.trim() || '';
+  const displayOutput = firstLine.length > 50 ? firstLine.slice(0, 47) + '...' : firstLine;
+  const statusColor = success ? colors.success : colors.error;
+  const statusIcon = success ? icons.success : icons.error;
+
+  return (
+    <Box marginLeft={2}>
+      <Text dimColor>
+        <Text color={statusColor}>{statusIcon}</Text> {name}{' '}
+        <Text color={colors.textMuted}>{displayOutput}</Text>
+      </Text>
+    </Box>
+  );
+}
+
+interface InfoMessageProps {
+  text: string;
+  type?: 'info' | 'success' | 'warning' | 'error';
+}
+
+export function InfoMessage({ text, type = 'info' }: InfoMessageProps) {
+  const config = {
+    info: { color: colors.info, icon: icons.info },
+    success: { color: colors.success, icon: icons.success },
+    warning: { color: colors.warning, icon: icons.warning },
+    error: { color: colors.error, icon: icons.error },
+  };
+  const { color, icon } = config[type];
+
+  return (
+    <Box>
+      <Text color={color}>{icon} </Text>
+      <Text color={colors.textSecondary}>{text}</Text>
+    </Box>
+  );
+}
+
+export function Separator() {
+  const width = process.stdout.columns || 80;
+  return <Text color={colors.separator}>{'─'.repeat(width)}</Text>;
+}
+
+interface WelcomeMessageProps {
+  model: string;
+}
+
+export function WelcomeMessage({ model }: WelcomeMessageProps) {
+  return (
+    <Box marginTop={1} marginBottom={0}>
+      <Text color={colors.textMuted}>Welcome to </Text>
+      <Text color={colors.brand}>{model}</Text>
+    </Box>
+  );
+}
+
+export function ShortcutsHint() {
+  return (
+    <Box marginTop={1}>
+      <Text color={colors.textMuted}>  ? for shortcuts</Text>
+    </Box>
+  );
+}
+
+// Random verbs for completion message (Claude Code style)
+const COMPLETION_VERBS = [
+  'Baked',
+  'Crafted',
+  'Brewed',
+  'Cooked',
+  'Forged',
+  'Built',
+  'Woven',
+  'Assembled',
+  'Conjured',
+  'Rendered',
+  'Compiled',
+  'Distilled',
+];
+
+function formatDuration(ms: number): string {
+  const totalSecs = Math.floor(ms / 1000);
+  const mins = Math.floor(totalSecs / 60);
+  const secs = totalSecs % 60;
+  if (mins > 0) {
+    return `${mins}m ${secs}s`;
+  }
+  return `${secs}s`;
+}
+
+interface CompletionMessageProps {
+  durationMs: number;
+}
+
+export function CompletionMessage({ durationMs }: CompletionMessageProps) {
+  // Pick a random verb (stable per render via useMemo would be better, but keep simple)
+  const verb = COMPLETION_VERBS[Math.floor(Math.random() * COMPLETION_VERBS.length)];
+  return (
+    <Box marginTop={1}>
+      <Text color={colors.textMuted}>
+        ✻ {verb} for {formatDuration(durationMs)}
+      </Text>
+    </Box>
+  );
+}

package/src/cli/components/ModelSelector.tsx

@@ -0,0 +1,135 @@
+/**
+ * Model Selector Component - Interactive model selection with fuzzy filter
+ */
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { colors, icons } from './theme.js';
+import { LoadingSpinner } from './Spinner.js';
+
+interface Model {
+  id: string;
+  name: string;
+}
+
+interface ModelSelectorProps {
+  currentModel: string;
+  onSelect: (modelId: string) => void;
+  onCancel: () => void;
+  listModels: () => Promise<Model[]>;
+}
+
+export function ModelSelector({
+  currentModel,
+  onSelect,
+  onCancel,
+  listModels,
+}: ModelSelectorProps) {
+  const [models, setModels] = useState<Model[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        const result = await listModels();
+        setModels(result);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch models');
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchModels();
+  }, [listModels]);
+
+  // Fuzzy filter models
+  const filtered = models.filter(
+    (m) =>
+      m.id.toLowerCase().includes(filter.toLowerCase()) ||
+      m.name.toLowerCase().includes(filter.toLowerCase())
+  );
+
+  // Reset selection when filter changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filter]);
+
+  // Keyboard navigation
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex((i) => Math.min(filtered.length - 1, i + 1));
+    } else if (key.return) {
+      if (filtered.length > 0) {
+        onSelect(filtered[selectedIndex].id);
+      }
+    } else if (key.escape) {
+      onCancel();
+    }
+  });
+
+  if (loading) {
+    return (
+      <Box>
+        <LoadingSpinner />
+        <Text color={colors.textMuted}> Loading models...</Text>
+      </Box>
+    );
+  }
+
+  if (error) {
+    onCancel();
+    return null;
+  }
+
+  const maxVisible = 8;
+  const startIndex = Math.max(
+    0,
+    Math.min(selectedIndex - Math.floor(maxVisible / 2), filtered.length - maxVisible)
+  );
+  const visibleModels = filtered.slice(startIndex, startIndex + maxVisible);
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color={colors.primary}>{icons.prompt} </Text>
+        <TextInput
+          value={filter}
+          onChange={setFilter}
+          placeholder="Type to filter models..."
+        />
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {visibleModels.length === 0 ? (
+          <Text color={colors.textMuted}>No models match "{filter}"</Text>
+        ) : (
+          visibleModels.map((m, i) => {
+            const actualIndex = startIndex + i;
+            const isSelected = actualIndex === selectedIndex;
+            const isCurrent = m.id === currentModel;
+            return (
+              <Box key={m.id}>
+                <Text color={isSelected ? colors.primary : colors.textMuted}>
+                  {isSelected ? icons.arrow : ' '}
+                </Text>
+                <Text color={isSelected ? colors.text : colors.textSecondary} bold={isSelected}>
+                  {m.name}
+                </Text>
+                {isCurrent && <Text color={colors.success}> (current)</Text>}
+              </Box>
+            );
+          })
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>
+          {filtered.length} models · ↑↓ navigate · Enter select · Esc cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/cli/components/Spinner.tsx

@@ -0,0 +1,72 @@
+/**
+ * Spinner Component - Compact thinking animation (Claude Code style)
+ */
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import InkSpinner from 'ink-spinner';
+import { colors } from './theme.js';
+
+interface SpinnerProps {
+  text?: string;
+}
+
+export function ThinkingSpinner({ text = 'Thinking' }: SpinnerProps) {
+  return (
+    <Box marginTop={1} marginBottom={0}>
+      <Text color={colors.brand}>
+        <InkSpinner type="dots" />
+      </Text>
+      <Text color={colors.textSecondary}> {text}</Text>
+      <Text color={colors.textMuted}> · ctrl+c to stop</Text>
+    </Box>
+  );
+}
+
+export function LoadingSpinner({ text = 'Loading...' }: SpinnerProps) {
+  return (
+    <Box>
+      <Text color={colors.textSecondary}>
+        <InkSpinner type="dots" />
+      </Text>
+      <Text color={colors.textMuted}> {text}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Progress bar animation for processing state
+ * Bouncing ball with trail effect
+ */
+export function ProgressBar() {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame((f) => (f + 1) % 14);
+    }, 100);
+    return () => clearInterval(timer);
+  }, []);
+
+  // Bouncing ball animation: ball moves left-right with trail
+  const width = 7;
+  // Frame 0-6: left to right, 7-13: right to left
+  const pos = frame < 7 ? frame : 13 - frame;
+
+  let bar = '';
+  for (let i = 0; i < width; i++) {
+    if (i === pos) {
+      bar += '●';
+    } else if (i === pos - 1 || i === pos + 1) {
+      bar += '○';
+    } else {
+      bar += '·';
+    }
+  }
+
+  return (
+    <Box>
+      <Text color={colors.brand}>{bar}</Text>
+      <Text color={colors.textMuted}> esc to stop</Text>
+    </Box>
+  );
+}

package/src/cli/components/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Ink Components Index
+ */
+export { App } from './App.js';
+export { Header, Welcome } from './Header.js';
+export {
+  UserMessage,
+  AssistantMessage,
+  ToolCall,
+  ToolResult,
+  InfoMessage,
+  Separator,
+  WelcomeMessage,
+  ShortcutsHint,
+  CompletionMessage,
+} from './Messages.js';
+export { ThinkingSpinner, LoadingSpinner, ProgressBar } from './Spinner.js';
+export { PromptInput, ConfirmPrompt } from './Input.js';
+export { colors, icons } from './theme.js';
+export { ModelSelector } from './ModelSelector.js';
+export { CommandSuggestions, COMMANDS, getFilteredCommands } from './CommandSuggestions.js';

package/src/cli/components/theme.ts

@@ -0,0 +1,36 @@
+/**
+ * Theme Configuration - Claude Code inspired
+ */
+export const colors = {
+  brand: '#818CF8', // Indigo 400
+  brandLight: '#A5B4FC', // Indigo 300
+  primary: '#818CF8',
+  success: '#34D399', // Emerald 400
+  warning: '#FBBF24', // Amber 400
+  error: '#F87171', // Red 400
+  info: '#60A5FA', // Blue 400
+  text: '#F1F5F9', // Slate 100
+  textSecondary: '#94A3B8', // Slate 400
+  textMuted: '#64748B', // Slate 500
+  tool: '#C084FC', // Purple 400
+  separator: '#1E293B', // Slate 800
+};
+
+export const icons = {
+  // Message prefixes (Claude Code style)
+  userPrompt: '❯', // Chevron for user input
+  assistant: '●', // Filled circle for assistant
+  // Prompt
+  prompt: '❯',
+  // Status
+  success: '✔',
+  error: '✖',
+  warning: '⚠',
+  info: 'ℹ',
+  // Tools
+  tool: '⚡', // Lightning for tools
+  arrow: '→',
+  // UI
+  thinking: '✱', // Star for thinking state
+  cursor: '▋',
+};

package/src/cli/index.tsx

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+/**
+ * GenCode CLI - Modern Ink-based Interactive Agent Interface
+ * Beautiful terminal UI with React components
+ */
+
+import 'dotenv/config';
+import { render } from 'ink';
+import React from 'react';
+import { App } from './components/App.js';
+import type { AgentConfig } from '../agent/types.js';
+import { SettingsManager, type Settings } from '../config/index.js';
+
+// ============================================================================
+// Proxy Setup
+// ============================================================================
+async function setupProxy(): Promise<void> {
+  const proxyUrl = process.env.HTTP_PROXY || process.env.HTTPS_PROXY || process.env.http_proxy || process.env.https_proxy;
+
+  if (proxyUrl) {
+    try {
+      const { ProxyAgent, setGlobalDispatcher } = await import('undici');
+      const agent = new ProxyAgent(proxyUrl);
+      setGlobalDispatcher(agent);
+    } catch {
+      // undici not available, proxy won't work
+    }
+  }
+}
+
+// ============================================================================
+// Configuration
+// ============================================================================
+function detectConfig(settings: Settings): AgentConfig {
+  let provider: 'openai' | 'anthropic' | 'gemini' = 'gemini';
+  let model = 'gemini-2.0-flash';
+
+  // Auto-detect from API keys
+  if (process.env.ANTHROPIC_API_KEY) {
+    provider = 'anthropic';
+    model = 'claude-sonnet-4-20250514';
+  } else if (process.env.OPENAI_API_KEY) {
+    provider = 'openai';
+    model = 'gpt-4o';
+  } else if (process.env.GOOGLE_API_KEY) {
+    provider = 'gemini';
+    model = 'gemini-2.0-flash';
+  }
+
+  // Override from env vars
+  if (process.env.GENCODE_PROVIDER) {
+    provider = process.env.GENCODE_PROVIDER as 'openai' | 'anthropic' | 'gemini';
+  }
+  if (process.env.GENCODE_MODEL) {
+    model = process.env.GENCODE_MODEL;
+  }
+
+  // Override from saved settings (highest priority)
+  if (settings.provider) {
+    provider = settings.provider;
+  }
+  if (settings.model) {
+    model = settings.model;
+  }
+
+  return {
+    provider,
+    model,
+    cwd: process.cwd(),
+    maxTurns: 20,
+  };
+}
+
+// ============================================================================
+// CLI Arguments
+// ============================================================================
+function parseArgs() {
+  const args = process.argv.slice(2);
+  return {
+    continue: args.includes('-c') || args.includes('--continue'),
+    resume: args.includes('-r') || args.includes('--resume'),
+    help: args.includes('-h') || args.includes('--help'),
+  };
+}
+
+function printUsage(): void {
+  console.log();
+  console.log('  gencode - AI-Powered Coding Assistant');
+  console.log();
+  console.log('  Usage: gencode [options]');
+  console.log();
+  console.log('  Options:');
+  console.log('    -c, --continue    Resume the most recent session');
+  console.log('    -r, --resume      Select a session interactively');
+  console.log('    -h, --help        Show this help');
+  console.log();
+  console.log('  Examples:');
+  console.log('    gencode              Start new session');
+  console.log('    gencode -c           Continue last session');
+  console.log('    gencode -r           Pick a session');
+  console.log();
+}
+
+// ============================================================================
+// Main
+// ============================================================================
+async function main() {
+  const args = parseArgs();
+
+  if (args.help) {
+    printUsage();
+    process.exit(0);
+  }
+
+  await setupProxy();
+
+  // Load saved settings
+  const settingsManager = new SettingsManager();
+  const settings = await settingsManager.load();
+
+  const config = detectConfig(settings);
+
+  // Render the Ink app
+  render(
+    <App
+      config={config}
+      settingsManager={settingsManager}
+      resumeLatest={args.continue}
+    />
+  );
+}
+
+main().catch((error) => {
+  console.error('Fatal error:', error);
+  process.exit(1);
+});

package/src/config/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Config Module Exports
+ */
+
+export { SettingsManager } from './manager.js';
+export type { Settings, SettingsManagerOptions, ProviderName } from './types.js';
+export { DEFAULT_SETTINGS_DIR, SETTINGS_FILE_NAME } from './types.js';