gencode-ai 0.1.0 → 0.1.2

package/src/cli/components/Spinner.tsx

@@ -1,7 +1,7 @@
 /**
- * Spinner Component - Compact thinking animation (Claude Code style)
+ * Spinner Component - Vivid thinking animation
  */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Box, Text } from 'ink';
 import InkSpinner from 'ink-spinner';
 import { colors } from './theme.js';
@@ -33,40 +33,153 @@ export function LoadingSpinner({ text = 'Loading...' }: SpinnerProps) {
   );
 }
 
+// Thinking phrases that rotate during processing
+const thinkingPhrases = [
+  'Thinking',
+  'Pondering',
+  'Analyzing',
+  'Processing',
+  'Reasoning',
+  'Contemplating',
+  'Figuring out',
+  'Working on it',
+  'Almost there',
+  'Crafting response',
+];
+
+// Animation frames for different styles
+const animations = {
+  // Brainwave animation
+  brainwave: ['🧠 ∿∿∿', '🧠∿ ∿∿', '🧠∿∿ ∿', '🧠∿∿∿ ', '🧠 ∿∿∿', '🧠∿ ∿∿'],
+  // Sparkle animation
+  sparkle: ['✨    ', ' ✨   ', '  ✨  ', '   ✨ ', '    ✨', '   ✨ ', '  ✨  ', ' ✨   '],
+  // DNA helix
+  dna: ['🔬 ⌬⌬⌬', '🔬⌬ ⌬⌬', '🔬⌬⌬ ⌬', '🔬⌬⌬⌬ ', '🔬 ⌬⌬⌬'],
+  // Pulse dots
+  pulse: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
+  // Wave animation
+  wave: ['≋≈∼∽', '∽≋≈∼', '∼∽≋≈', '≈∼∽≋'],
+  // Bounce bar with gradient
+  bounceGradient: [
+    '█▓▒░    ',
+    ' █▓▒░   ',
+    '  █▓▒░  ',
+    '   █▓▒░ ',
+    '    █▓▒░',
+    '   ░▒▓█ ',
+    '  ░▒▓█  ',
+    ' ░▒▓█   ',
+    '░▒▓█    ',
+  ],
+  // Orbit animation
+  orbit: ['◐', '◓', '◑', '◒'],
+  // Loading bar with shimmer
+  shimmer: [
+    '▓▓▓▓▓░░░',
+    '░▓▓▓▓▓░░',
+    '░░▓▓▓▓▓░',
+    '░░░▓▓▓▓▓',
+    '░░░░▓▓▓▓',
+    '░░░▓▓▓▓▓',
+    '░░▓▓▓▓▓░',
+    '░▓▓▓▓▓░░',
+  ],
+};
+
+type AnimationType = keyof typeof animations;
+const animationTypes = Object.keys(animations) as AnimationType[];
+
+// Format elapsed time
+function formatElapsed(ms: number): string {
+  const secs = Math.floor(ms / 1000);
+  if (secs < 60) return `${secs}s`;
+  const mins = Math.floor(secs / 60);
+  const remainSecs = secs % 60;
+  return `${mins}m ${remainSecs}s`;
+}
+
+// Format token count
+function formatTokens(count: number): string {
+  if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}k`;
+  }
+  return `${count}`;
+}
+
+interface ProgressBarProps {
+  startTime?: number;
+  tokenCount?: number;
+  isThinking?: boolean;
+}
+
 /**
  * Progress bar animation for processing state
- * Bouncing ball with trail effect
+ * Claude Code style with time, tokens, and thinking status
  */
-export function ProgressBar() {
+export function ProgressBar({ startTime, tokenCount = 0, isThinking = false }: ProgressBarProps) {
   const [frame, setFrame] = useState(0);
+  const [phraseIndex, setPhraseIndex] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setFrame((f) => (f + 1) % 14);
-    }, 100);
-    return () => clearInterval(timer);
+  // Pick a random animation style on mount
+  const animStyle = useMemo(() => {
+    const randomIndex = Math.floor(Math.random() * animationTypes.length);
+    return animationTypes[randomIndex];
   }, []);
 
-  // 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 += '·';
-    }
+  const currentAnim = animations[animStyle];
+
+  useEffect(() => {
+    // Fast animation update
+    const animTimer = setInterval(() => {
+      setFrame((f) => (f + 1) % currentAnim.length);
+    }, 120);
+
+    // Slower phrase rotation (every 2.5 seconds)
+    const phraseTimer = setInterval(() => {
+      setPhraseIndex((p) => (p + 1) % thinkingPhrases.length);
+    }, 2500);
+
+    // Update elapsed time every second
+    const elapsedTimer = setInterval(() => {
+      if (startTime) {
+        setElapsed(Date.now() - startTime);
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(animTimer);
+      clearInterval(phraseTimer);
+      clearInterval(elapsedTimer);
+    };
+  }, [currentAnim.length, startTime]);
+
+  const animFrame = currentAnim[frame];
+  const phrase = thinkingPhrases[phraseIndex];
+
+  // Animated ellipsis
+  const ellipsis = '.'.repeat((frame % 3) + 1).padEnd(3, ' ');
+
+  // Build status parts
+  const parts: string[] = [];
+  if (startTime && elapsed > 0) {
+    parts.push(formatElapsed(elapsed));
+  }
+  if (tokenCount > 0) {
+    parts.push(`↓ ${formatTokens(tokenCount)} tokens`);
   }
+  if (isThinking) {
+    parts.push('thinking');
+  }
+
+  const statusText = parts.length > 0 ? ` · ${parts.join(' · ')}` : '';
 
   return (
     <Box>
-      <Text color={colors.brand}>{bar}</Text>
-      <Text color={colors.textMuted}> esc to stop</Text>
+      <Text color={colors.brand}>{animFrame}</Text>
+      <Text color={colors.textSecondary}> {phrase}</Text>
+      <Text color={colors.textMuted}>{ellipsis}</Text>
+      <Text color={colors.textMuted}>(esc to stop{statusText})</Text>
     </Box>
   );
 }

package/src/cli/components/TodoList.tsx

@@ -0,0 +1,54 @@
+/**
+ * TodoList Component - Display current todos in CLI
+ * Design: Minimal, clean, status-driven with clear visual hierarchy
+ */
+import { Box, Text } from 'ink';
+import { colors } from './theme.js';
+import type { TodoItem } from '../../tools/types.js';
+
+interface TodoListProps {
+  todos: TodoItem[];
+}
+
+export function TodoList({ todos }: TodoListProps) {
+  if (todos.length === 0) return null;
+
+  const completed = todos.filter((t) => t.status === 'completed').length;
+  const total = todos.length;
+
+  return (
+    <Box flexDirection="column" marginTop={1} marginLeft={2}>
+      {/* Header with count */}
+      <Text color={colors.textMuted}>
+        Tasks {completed}/{total}
+      </Text>
+      {/* Task list */}
+      {todos.map((todo, i) => {
+        const isCompleted = todo.status === 'completed';
+        const isInProgress = todo.status === 'in_progress';
+
+        // Status indicators: [x] done, [>] active, [ ] pending
+        let bracket: string;
+        let bracketColor: string;
+
+        if (isCompleted) {
+          bracket = '[x]';
+          bracketColor = colors.success;
+        } else if (isInProgress) {
+          bracket = '[>]';
+          bracketColor = colors.warning;
+        } else {
+          bracket = '[ ]';
+          bracketColor = colors.textMuted;
+        }
+
+        return (
+          <Text key={i} dimColor={isCompleted}>
+            <Text color={bracketColor}>{bracket}</Text>
+            <Text strikethrough={isCompleted}> {todo.content}</Text>
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}

package/src/cli/components/index.ts

@@ -19,3 +19,9 @@ export { PromptInput, ConfirmPrompt } from './Input.js';
 export { colors, icons } from './theme.js';
 export { ModelSelector } from './ModelSelector.js';
 export { CommandSuggestions, COMMANDS, getFilteredCommands } from './CommandSuggestions.js';
+export {
+  PermissionPrompt,
+  SimpleConfirmPrompt,
+  PermissionRulesDisplay,
+  PermissionAuditDisplay,
+} from './PermissionPrompt.js';

package/src/cli/components/markdown.ts

@@ -0,0 +1,157 @@
+/**
+ * Simple Terminal Markdown Renderer
+ * Uses marked for parsing, chalk for ANSI colors
+ */
+
+import { marked, type Tokens, type RendererObject, type Token } from 'marked';
+import chalk from 'chalk';
+
+// Helper type for renderer context with parser access
+type RendererContext = {
+  parser?: {
+    parseInline(tokens: Token[]): string;
+    parse(tokens: Token[]): string;
+  }
+};
+
+// Helper to parse inline tokens from renderer context
+function parseInline(ctx: unknown, tokens: Token[], fallback: string): string {
+  const context = ctx as RendererContext;
+  return context.parser?.parseInline(tokens) ?? fallback;
+}
+
+// Helper to parse block tokens (like list item content)
+function parseTokens(ctx: unknown, tokens: Token[], fallback: string): string {
+  const context = ctx as RendererContext;
+  // For list items, tokens may contain text tokens with nested inline tokens
+  // Use parse() for block-level token arrays
+  return context.parser?.parse(tokens).trim() ?? fallback;
+}
+
+// Custom terminal renderer
+const terminalRenderer: RendererObject = {
+  // Headings: colored and bold
+  heading(token: Tokens.Heading): string {
+    const colors = [
+      chalk.bold.magenta,  // h1
+      chalk.bold.cyan,     // h2
+      chalk.bold.green,    // h3
+      chalk.bold.yellow,   // h4+
+    ];
+    const colorFn = colors[Math.min(token.depth - 1, 3)];
+    const content = parseInline(this, token.tokens, token.text);
+    return '\n' + colorFn(content) + '\n\n';
+  },
+
+  // Paragraphs - must parse inline tokens for bold/italic/etc
+  paragraph(token: Tokens.Paragraph): string {
+    const content = parseInline(this, token.tokens, token.text);
+    return content + '\n\n';
+  },
+
+  // Bold text
+  strong(token: Tokens.Strong): string {
+    const content = parseInline(this, token.tokens, token.text);
+    return chalk.bold(content);
+  },
+
+  // Italic text
+  em(token: Tokens.Em): string {
+    const content = parseInline(this, token.tokens, token.text);
+    return chalk.italic(content);
+  },
+
+  // Inline code
+  codespan({ text }: Tokens.Codespan): string {
+    return chalk.yellow('`' + text + '`');
+  },
+
+  // Code blocks - clean format without ``` markers
+  code({ text, lang }: Tokens.Code): string {
+    const langHeader = lang ? chalk.dim(`  [${lang}]`) + '\n' : '';
+    const lines = text.split('\n').map(line => chalk.cyan('    ' + line)).join('\n');
+    return '\n' + langHeader + lines + '\n\n';
+  },
+
+  // List - parse block tokens for each item (they may contain nested text+inline tokens)
+  list(token: Tokens.List): string {
+    const result = token.items.map((item, i) => {
+      const bullet = token.ordered ? chalk.dim(`${i + 1}.`) : chalk.dim('•');
+      const content = parseTokens(this, item.tokens, item.text);
+      return `  ${bullet} ${content}`;
+    }).join('\n');
+    return result + '\n\n';
+  },
+
+  // List item - use block parser since items contain text tokens with nested inline
+  listitem(token: Tokens.ListItem): string {
+    return parseTokens(this, token.tokens, token.text);
+  },
+
+  // Links
+  link(token: Tokens.Link): string {
+    const content = parseInline(this, token.tokens, token.text);
+    return chalk.blue.underline(content) + chalk.dim(` (${token.href})`);
+  },
+
+  // Blockquotes
+  blockquote(token: Tokens.Blockquote): string {
+    const text = token.text.trim();
+    const lines = text.split('\n').map(line =>
+      chalk.dim('│ ') + chalk.italic(line)
+    ).join('\n');
+    return '\n' + lines + '\n\n';
+  },
+
+  // Horizontal rule
+  hr(): string {
+    return '\n' + chalk.dim('─'.repeat(40)) + '\n\n';
+  },
+
+  // Line break
+  br(): string {
+    return '\n';
+  },
+
+  // Delete/strikethrough
+  del(token: Tokens.Del): string {
+    const content = parseInline(this, token.tokens, token.text);
+    return chalk.strikethrough(content);
+  },
+
+  // Plain text - may contain nested inline tokens (like in list items)
+  text(token: Tokens.Text | Tokens.Escape): string {
+    // Tokens.Text can have nested tokens array with inline formatting
+    if ('tokens' in token && token.tokens && token.tokens.length > 0) {
+      return parseInline(this, token.tokens, token.text);
+    }
+    return token.text ?? '';
+  },
+
+  // HTML (strip tags)
+  html(token: Tokens.HTML | Tokens.Tag): string {
+    const text = 'text' in token ? token.text : '';
+    return text.replace(/<[^>]*>/g, '');
+  },
+};
+
+// Configure marked with custom renderer
+marked.use({ renderer: terminalRenderer });
+
+/**
+ * Render markdown text to terminal-formatted string
+ */
+export function renderMarkdown(text: string): string {
+  try {
+    const result = marked.parse(text);
+    // marked.parse can return string or Promise<string>
+    if (typeof result === 'string') {
+      return result.trim();
+    }
+    // If async, return original text (shouldn't happen with sync renderer)
+    return text;
+  } catch {
+    // On error, return original text
+    return text;
+  }
+}

package/src/cli/components/theme.ts

@@ -14,6 +14,7 @@ export const colors = {
   textMuted: '#64748B', // Slate 500
   tool: '#C084FC', // Purple 400
   separator: '#1E293B', // Slate 800
+  inputBg: '#111827', // Gray 900 - subtle background for user input
 };
 
 export const icons = {
@@ -29,8 +30,14 @@ export const icons = {
   info: 'ℹ',
   // Tools
   tool: '⚡', // Lightning for tools
+  fetch: '●', // Filled circle for fetch (Claude Code style)
   arrow: '→',
   // UI
   thinking: '✱', // Star for thinking state
   cursor: '▋',
+  // Selection
+  radio: '●', // Filled radio for selected
+  radioEmpty: '○', // Empty radio for unselected
+  // Tree connectors
+  treeEnd: '└', // Tree end connector for tool results
 };

package/src/cli/index.tsx

@@ -9,7 +9,7 @@ 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';
+import { SettingsManager, ProvidersConfigManager, type Settings, type ProviderName } from '../config/index.js';
 
 // ============================================================================
 // Proxy Setup
@@ -31,12 +31,17 @@ async function setupProxy(): Promise<void> {
 // ============================================================================
 // Configuration
 // ============================================================================
-function detectConfig(settings: Settings): AgentConfig {
-  let provider: 'openai' | 'anthropic' | 'gemini' = 'gemini';
+function detectConfig(settings: Settings, providersConfig: ProvidersConfigManager): AgentConfig {
+  let provider: ProviderName = 'gemini';
   let model = 'gemini-2.0-flash';
 
+  // Check for explicit Vertex AI enablement first (highest priority for auto-detect)
+  if (process.env.GENCODE_USE_VERTEX === '1' || process.env.CLAUDE_CODE_USE_VERTEX === '1') {
+    provider = 'vertex-ai';
+    model = process.env.VERTEX_AI_MODEL ?? 'claude-sonnet-4-5@20250929';
+  }
   // Auto-detect from API keys
-  if (process.env.ANTHROPIC_API_KEY) {
+  else if (process.env.ANTHROPIC_API_KEY) {
     provider = 'anthropic';
     model = 'claude-sonnet-4-20250514';
   } else if (process.env.OPENAI_API_KEY) {
@@ -49,7 +54,7 @@ function detectConfig(settings: Settings): AgentConfig {
 
   // Override from env vars
   if (process.env.GENCODE_PROVIDER) {
-    provider = process.env.GENCODE_PROVIDER as 'openai' | 'anthropic' | 'gemini';
+    provider = process.env.GENCODE_PROVIDER as ProviderName;
   }
   if (process.env.GENCODE_MODEL) {
     model = process.env.GENCODE_MODEL;
@@ -61,6 +66,13 @@ function detectConfig(settings: Settings): AgentConfig {
   }
   if (settings.model) {
     model = settings.model;
+    // Auto-infer provider from model using providers.json (if not explicitly set)
+    if (!settings.provider) {
+      const inferredProvider = providersConfig.inferProvider(model);
+      if (inferredProvider) {
+        provider = inferredProvider;
+      }
+    }
   }
 
   return {
@@ -76,10 +88,21 @@ function detectConfig(settings: Settings): AgentConfig {
 // ============================================================================
 function parseArgs() {
   const args = process.argv.slice(2);
+
+  // Extract prompt value from -p "message" or --prompt "message"
+  let prompt: string | undefined;
+  for (let i = 0; i < args.length; i++) {
+    if ((args[i] === '-p' || args[i] === '--prompt') && args[i + 1]) {
+      prompt = args[i + 1];
+      break;
+    }
+  }
+
   return {
     continue: args.includes('-c') || args.includes('--continue'),
     resume: args.includes('-r') || args.includes('--resume'),
     help: args.includes('-h') || args.includes('--help'),
+    prompt,
   };
 }
 
@@ -90,17 +113,47 @@ function printUsage(): void {
   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('    -c, --continue       Resume the most recent session');
+  console.log('    -r, --resume         Select a session interactively');
+  console.log('    -p, --prompt <msg>   Run a single prompt (non-interactive)');
+  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('    gencode                    Start new session');
+  console.log('    gencode -c                 Continue last session');
+  console.log('    gencode -r                 Pick a session');
+  console.log('    gencode -p "2+2"           Run single prompt');
   console.log();
 }
 
+// ============================================================================
+// Non-interactive mode
+// ============================================================================
+async function runNonInteractive(prompt: string, config: AgentConfig): Promise<void> {
+  const { Agent } = await import('../agent/agent.js');
+
+  const agent = new Agent(config);
+
+  let response = '';
+  for await (const event of agent.run(prompt)) {
+    switch (event.type) {
+      case 'text':
+        response += event.text;
+        break;
+      case 'tool_start':
+        console.error(`[tool] ${event.name}`);
+        break;
+      case 'error':
+        console.error(`[error] ${event.error.message}`);
+        break;
+      case 'done':
+        break;
+    }
+  }
+
+  console.log(response);
+}
+
 // ============================================================================
 // Main
 // ============================================================================
@@ -114,11 +167,20 @@ async function main() {
 
   await setupProxy();
 
-  // Load saved settings
+  // Load saved settings and providers config
   const settingsManager = new SettingsManager();
   const settings = await settingsManager.load();
 
-  const config = detectConfig(settings);
+  const providersConfig = new ProvidersConfigManager();
+  await providersConfig.load();
+
+  const config = detectConfig(settings, providersConfig);
+
+  // Non-interactive mode with -p flag
+  if (args.prompt) {
+    await runNonInteractive(args.prompt, config);
+    return;
+  }
 
   // Render the Ink app
   render(
@@ -126,6 +188,7 @@ async function main() {
       config={config}
       settingsManager={settingsManager}
       resumeLatest={args.continue}
+      permissionSettings={settings.permissions}
     />
   );
 }

package/src/config/index.ts

@@ -1,7 +1,82 @@
 /**
- * Config Module Exports
+ * Configuration Module - Multi-level configuration system (Claude Code compatible)
+ *
+ * This module provides a hierarchical configuration system that:
+ * - Supports multiple levels: user, project, local, managed
+ * - Merges .gencode and .claude directories at each level (gencode wins)
+ * - Supports GENCODE_CONFIG_DIRS environment variable for extra config dirs
+ * - Enforces managed settings that cannot be overridden
  */
 
-export { SettingsManager } from './manager.js';
-export type { Settings, SettingsManagerOptions, ProviderName } from './types.js';
-export { DEFAULT_SETTINGS_DIR, SETTINGS_FILE_NAME } from './types.js';
+// Core types
+export type {
+  Settings,
+  SettingsManagerOptions,
+  ProviderName,
+  PermissionRules,
+  ConfigLevelType,
+  ConfigLevel,
+  ConfigSource,
+  MergedConfig,
+  ProvidersConfig,
+  ProviderConnection,
+  CachedModel,
+  ProviderModels,
+} from './types.js';
+
+// Constants
+export {
+  DEFAULT_SETTINGS_DIR,
+  PROJECT_SETTINGS_DIR,
+  FALLBACK_SETTINGS_DIR,
+  FALLBACK_PROJECT_DIR,
+  SETTINGS_FILE_NAME,
+  SETTINGS_LOCAL_FILE_NAME,
+  MANAGED_SETTINGS_FILE_NAME,
+  PROVIDERS_FILE_NAME,
+  GENCODE_DIR,
+  CLAUDE_DIR,
+  USER_GENCODE_DIR,
+  USER_CLAUDE_DIR,
+  GENCODE_CONFIG_DIRS_ENV,
+  getManagedPaths,
+} from './types.js';
+
+// Configuration levels
+export {
+  findProjectRoot,
+  parseExtraConfigDirs,
+  getConfigLevels,
+  getPrimarySettingsDir,
+  getSettingsFilePath,
+  type ConfigPathInfo,
+  type ResolvedLevel,
+} from './levels.js';
+
+// Configuration loader
+export {
+  loadAllSources,
+  loadSourcesByLevel,
+  loadUserSettings,
+  loadProjectSettings,
+  loadManagedSettings,
+  getConfigInfo,
+  getExistingConfigFiles,
+} from './loader.js';
+
+// Configuration merger
+export {
+  deepMerge,
+  mergeSettings,
+  extractManagedDeny,
+  applyManagedRestrictions,
+  mergeAllSources,
+  mergeWithCliArgs,
+  createMergeSummary,
+} from './merger.js';
+
+// Configuration managers
+export { ConfigManager, SettingsManager } from './manager.js';
+
+// Providers configuration
+export { ProvidersConfigManager } from './providers-config.js';