gencode-ai 0.4.1 → 0.5.0

package/src/cli/components/CommandSuggestions.tsx

@@ -4,9 +4,16 @@ import { colors } from './theme.js';
 interface Command {
   name: string;
   description: string;
+  argumentHint?: string;
 }
 
-export const COMMANDS: Command[] = [
+interface CommandMatch {
+  command: Command;
+  score: number;
+}
+
+// Built-in commands
+export const BUILTIN_COMMANDS: Command[] = [
   { name: '/plan', description: 'Enter plan mode (Shift+Tab to cycle)' },
   { name: '/normal', description: 'Exit to normal mode' },
   { name: '/accept', description: 'Enter auto-accept mode' },
@@ -15,6 +22,7 @@ export const COMMANDS: Command[] = [
   { name: '/permissions', description: 'View permission rules' },
   { name: '/permissions audit', description: 'View permission audit log' },
   { name: '/sessions', description: 'List sessions' },
+  { name: '/tasks', description: 'List background tasks' },
   { name: '/resume', description: 'Resume session' },
   { name: '/new', description: 'New session' },
   { name: '/save', description: 'Save session' },
@@ -27,32 +35,89 @@ export const COMMANDS: Command[] = [
   { name: '/rewind', description: 'Undo file changes' },
   { name: '/context', description: 'Show context usage stats' },
   { name: '/compact', description: 'Manually compact conversation' },
+  { name: '/commands', description: 'List custom commands' },
 ];
 
+/**
+ * Fuzzy match scoring algorithm
+ * Returns a score for how well the query matches the text
+ * Higher score = better match
+ *
+ * Matching rules:
+ * - Must match from the beginning of the command
+ * - /email matches /email:digest (prefix match)
+ * - /email:d matches /email:digest (prefix match)
+ * - /digest does NOT match /email:digest (no namespace prefix)
+ */
+function fuzzyMatchScore(query: string, text: string): number {
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+
+  // Exact match gets highest score
+  if (t === q) return 1000;
+
+  // Starts with query gets high score (prefix match)
+  if (t.startsWith(q)) return 900;
+
+  // Sequential character matching (fuzzy) - but only if it starts from beginning
+  let score = 0;
+  let queryIndex = 0;
+  let lastMatchIndex = -1;
+
+  for (let i = 0; i < t.length && queryIndex < q.length; i++) {
+    if (t[i] === q[queryIndex]) {
+      // First character MUST match at position 0 (start of command)
+      if (queryIndex === 0 && i !== 0) {
+        return 0; // Reject if first char doesn't match at start
+      }
+
+      // Bonus for consecutive matches
+      const consecutiveBonus = (i === lastMatchIndex + 1) ? 5 : 0;
+      score += 10 + consecutiveBonus;
+      lastMatchIndex = i;
+      queryIndex++;
+    }
+  }
+
+  // Return 0 if not all query characters were found
+  if (queryIndex !== q.length) return 0;
+
+  return score;
+}
+
 interface CommandSuggestionsProps {
   input: string;
   selectedIndex: number;
+  customCommands?: Command[];
 }
 
-export function CommandSuggestions({ input, selectedIndex }: CommandSuggestionsProps) {
-  // Filter commands matching input
-  const prefix = input.toLowerCase();
-  const suggestions = COMMANDS.filter((cmd) =>
-    cmd.name.toLowerCase().startsWith(prefix)
-  );
+export function CommandSuggestions({ input, selectedIndex, customCommands = [] }: CommandSuggestionsProps) {
+  // Combine built-in and custom commands
+  const allCommands = [...BUILTIN_COMMANDS, ...customCommands];
+
+  // Fuzzy match and sort by score
+  const matches: CommandMatch[] = allCommands
+    .map((cmd) => ({
+      command: cmd,
+      score: fuzzyMatchScore(input, cmd.name),
+    }))
+    .filter((match) => match.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 10); // Show top 10 matches
 
-  if (suggestions.length === 0) {
+  if (matches.length === 0) {
     return null;
   }
 
   return (
     <Box flexDirection="column" marginLeft={2}>
-      {suggestions.map((cmd, i) => {
+      {matches.map((match, i) => {
         const isSelected = i === selectedIndex;
+        const cmd = match.command;
         return (
           <Box key={cmd.name}>
             <Text color={isSelected ? colors.primary : colors.textSecondary}>
-              {cmd.name.padEnd(12)}
+              {cmd.name.padEnd(25)}
             </Text>
             <Text color={colors.textMuted}>{cmd.description}</Text>
           </Box>
@@ -62,7 +127,18 @@ export function CommandSuggestions({ input, selectedIndex }: CommandSuggestionsP
   );
 }
 
-export function getFilteredCommands(input: string): Command[] {
-  const prefix = input.toLowerCase();
-  return COMMANDS.filter((cmd) => cmd.name.toLowerCase().startsWith(prefix));
+export function getFilteredCommands(input: string, customCommands: Command[] = []): Command[] {
+  const allCommands = [...BUILTIN_COMMANDS, ...customCommands];
+
+  // Fuzzy match and sort
+  const matches = allCommands
+    .map((cmd) => ({
+      command: cmd,
+      score: fuzzyMatchScore(input, cmd.name),
+    }))
+    .filter((match) => match.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 10);
+
+  return matches.map((m) => m.command);
 }

package/src/cli/components/DiffPreview.tsx

@@ -0,0 +1,134 @@
+/**
+ * DiffPreview Component - Simplified
+ * Displays unified diff with syntax highlighting for Edit tool
+ */
+
+import { Box, Text } from 'ink';
+import { colors } from './theme.js';
+
+interface DiffLineData {
+  type: 'header' | 'hunk' | 'add' | 'remove' | 'context';
+  content: string;
+}
+
+interface DiffPreviewProps {
+  filePath: string;
+  diff: string;
+  collapsed?: boolean;
+  maxLines?: number;
+}
+
+/**
+ * Parse unified diff format into typed lines
+ */
+function parseDiff(diff: string): DiffLineData[] {
+  const lines: DiffLineData[] = [];
+
+  for (const line of diff.split('\n')) {
+    if (line.startsWith('---') || line.startsWith('+++')) {
+      lines.push({ type: 'header', content: line });
+    } else if (line.startsWith('@@')) {
+      lines.push({ type: 'hunk', content: line });
+    } else if (line.startsWith('+')) {
+      lines.push({ type: 'add', content: line });
+    } else if (line.startsWith('-')) {
+      lines.push({ type: 'remove', content: line });
+    } else {
+      lines.push({ type: 'context', content: line });
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * Render a single diff line with appropriate color
+ */
+function DiffLine({ line }: { line: DiffLineData }) {
+  const colorMap: Record<DiffLineData['type'], string> = {
+    header: colors.textMuted,
+    hunk: colors.diffHunk,
+    add: colors.diffAdd,
+    remove: colors.diffRemove,
+    context: colors.textSecondary,
+  };
+
+  const color = colorMap[line.type];
+
+  // Don't show prefix for header lines (they already have --- or +++)
+  if (line.type === 'header') {
+    return <Text color={color}>{line.content}</Text>;
+  }
+
+  // For hunk headers, show as-is with cyan color
+  if (line.type === 'hunk') {
+    return <Text color={colors.diffHunk}>{line.content}</Text>;
+  }
+
+  // For add/remove/context, show with proper prefix highlighting
+  const prefix = line.content.charAt(0);
+  const content = line.content.slice(1);
+
+  return (
+    <Text>
+      <Text color={color} bold={line.type === 'add' || line.type === 'remove'}>
+        {prefix}
+      </Text>
+      <Text color={color}>{content}</Text>
+    </Text>
+  );
+}
+
+/**
+ * DiffPreview component - displays unified diff with syntax highlighting
+ * Uses Ink's native borderStyle for proper alignment
+ */
+export function DiffPreview({ filePath, diff, collapsed = true, maxLines = 50 }: DiffPreviewProps) {
+  const lines = parseDiff(diff);
+
+  // Count additions and deletions
+  const addCount = lines.filter(l => l.type === 'add').length;
+  const removeCount = lines.filter(l => l.type === 'remove').length;
+
+  // Determine if we should show collapse/expand
+  const isTruncated = collapsed && lines.length > maxLines;
+  const displayLines = isTruncated ? lines.slice(0, maxLines) : lines;
+  const hiddenCount = lines.length - maxLines;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.toolBorder}
+      paddingX={1}
+    >
+      {/* Header with file path and stats */}
+      <Box>
+        <Text color={colors.toolHeader}>[E] </Text>
+        <Text color={colors.textSecondary}>{filePath}</Text>
+        <Text>  </Text>
+        <Text color={colors.diffAdd}>+{addCount}</Text>
+        <Text color={colors.textMuted}>/</Text>
+        <Text color={colors.diffRemove}>-{removeCount}</Text>
+      </Box>
+
+      {/* Diff content */}
+      <Box flexDirection="column" marginTop={1}>
+        {displayLines.map((line, idx) => (
+          <Box key={idx}>
+            <DiffLine line={line} />
+          </Box>
+        ))}
+      </Box>
+
+      {/* Truncation indicator */}
+      {isTruncated && (
+        <Box justifyContent="flex-end" marginTop={1}>
+          <Text color={colors.textMuted}>
+            ▼ {hiddenCount} more lines
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/cli/components/Input.tsx

@@ -6,9 +6,10 @@ interface PromptInputProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: (value: string) => void;
+  hint?: string;
 }
 
-export function PromptInput({ value, onChange, onSubmit }: PromptInputProps) {
+export function PromptInput({ value, onChange, onSubmit, hint }: PromptInputProps) {
   const handleSubmit = (text: string) => {
     if (text.trim()) {
       onSubmit(text);
@@ -30,6 +31,7 @@ export function PromptInput({ value, onChange, onSubmit }: PromptInputProps) {
           onSubmit={handleSubmit}
           placeholder=""
         />
+        {hint && <Text dimColor> {hint}</Text>}
       </Box>
       <Text color={colors.textMuted}>{border}</Text>
     </Box>

package/src/cli/components/Messages.tsx

@@ -3,13 +3,47 @@ import { Box, Text } from 'ink';
 import InkSpinner from 'ink-spinner';
 import { colors, icons } from './theme.js';
 import { renderMarkdown } from './markdown.js';
-import { formatTokens, formatCost } from '../../pricing/calculator.js';
-import type { CostEstimate } from '../../pricing/types.js';
+import { formatTokens, formatCost } from '../../core/pricing/calculator.js';
+import type { CostEstimate } from '../../core/pricing/types.js';
 
 // Truncate string with ellipsis
 const truncate = (str: string, maxLen: number) =>
   str.length > maxLen ? str.slice(0, maxLen - 3) + '...' : str;
 
+// Compress multi-line text to single line, then truncate
+const truncateSingleLine = (str: string, maxLen: number) => {
+  // Replace newlines and multiple whitespace with single space
+  const singleLine = str.replace(/\s+/g, ' ').trim();
+  return singleLine.length > maxLen ? singleLine.slice(0, maxLen - 3) + '...' : singleLine;
+};
+
+// Get tool-specific icon
+function getToolIcon(name: string): string {
+  switch (name) {
+    case 'Bash':
+      return icons.toolBash;
+    case 'Read':
+      return icons.toolRead;
+    case 'Write':
+      return icons.toolWrite;
+    case 'Edit':
+      return icons.toolEdit;
+    case 'Glob':
+      return icons.toolGlob;
+    case 'Grep':
+      return icons.toolGrep;
+    case 'WebFetch':
+    case 'WebSearch':
+      return icons.toolWeb;
+    case 'TodoWrite':
+      return icons.toolTodo;
+    case 'AskUserQuestion':
+      return icons.toolQuestion;
+    default:
+      return icons.tool;
+  }
+}
+
 // Word wrap text to terminal width
 function wrapText(text: string, width: number): string[] {
   const lines: string[] = [];
@@ -67,7 +101,8 @@ export function AssistantMessage({ text, streaming }: AssistantMessageProps) {
   if (streaming) {
     const termWidth = process.stdout.columns || 80;
     const contentWidth = termWidth - 4;
-    const lines = wrapText(text.trimEnd(), contentWidth);
+    // Trim both ends to remove leading/trailing newlines
+    const lines = wrapText(text.trim(), contentWidth);
 
     return (
       <Box flexDirection="column" marginTop={1} marginBottom={0}>
@@ -123,7 +158,8 @@ function formatToolInput(name: string, input: Record<string, unknown>): string {
     }
 
     case 'Bash':
-      return truncate((input.command as string) || '', 50);
+      // Return raw command; truncateSingleLine will handle compression at display time
+      return (input.command as string) || '';
 
     case 'WebFetch':
       return (input.url as string) || '';
@@ -148,38 +184,16 @@ export function ToolCall({ name, input }: ToolCallProps) {
   // Hide TodoWrite (shown in TodoList component)
   if (name === 'TodoWrite') return null;
 
-  // Special display for AskUserQuestion (Claude Code style with expand hint)
-  if (name === 'AskUserQuestion') {
-    const json = JSON.stringify(input);
-    const displayJson = truncate(json, 70);
-
-    return (
-      <Box marginTop={1} flexDirection="column">
-        <Box>
-          <Text color={colors.tool}>{icons.tool}</Text>
-          <Text> </Text>
-          <Text bold>{name}</Text>
-          <Text color={colors.textMuted}>  </Text>
-          <Text color={colors.textSecondary}>{displayJson}</Text>
-          <Text color={colors.textMuted}>  ctrl+o</Text>
-        </Box>
-      </Box>
-    );
-  }
-
+  const toolIcon = getToolIcon(name);
   const displayInput = formatToolInput(name, input);
 
   return (
     <Box marginTop={1}>
-      <Text color={colors.tool}>{icons.tool}</Text>
-      <Text> </Text>
+      <Text color={colors.statusSuccess}>{icons.statusCheck} </Text>
+      <Text color={colors.toolHeader}>{toolIcon} </Text>
       <Text bold>{name}</Text>
-      {displayInput && (
-        <>
-          <Text color={colors.textMuted}> </Text>
-          <Text color={colors.textSecondary}>{truncate(displayInput, 60)}</Text>
-        </>
-      )}
+      <Text>  </Text>
+      <Text color={colors.textSecondary}>{truncateSingleLine(displayInput, 60)}</Text>
     </Box>
   );
 }
@@ -194,40 +208,16 @@ export function PendingToolCall({ name, input }: PendingToolCallProps) {
   // Hide TodoWrite (shown in TodoList component)
   if (name === 'TodoWrite') return null;
 
-  // Special display for AskUserQuestion
-  if (name === 'AskUserQuestion') {
-    const json = JSON.stringify(input);
-    const displayJson = truncate(json, 70);
-
-    return (
-      <Box marginTop={1}>
-        <Text color={colors.tool}>
-          <InkSpinner type="dots" />
-        </Text>
-        <Text> </Text>
-        <Text bold>{name}</Text>
-        <Text color={colors.textMuted}>  </Text>
-        <Text color={colors.textSecondary}>{displayJson}</Text>
-        <Text color={colors.textMuted}>  ctrl+o</Text>
-      </Box>
-    );
-  }
-
+  const toolIcon = getToolIcon(name);
   const displayInput = formatToolInput(name, input);
 
   return (
     <Box marginTop={1}>
-      <Text color={colors.tool}>
-        <InkSpinner type="dots" />
-      </Text>
-      <Text> </Text>
+      <Text color={colors.statusRunning}><InkSpinner type="dots" /> </Text>
+      <Text color={colors.toolHeader}>{toolIcon} </Text>
       <Text bold>{name}</Text>
-      {displayInput && (
-        <>
-          <Text> </Text>
-          <Text color={colors.textSecondary}>{truncate(displayInput, 60)}</Text>
-        </>
-      )}
+      <Text>  </Text>
+      <Text color={colors.textSecondary}>{truncateSingleLine(displayInput, 60)}</Text>
     </Box>
   );
 }
@@ -245,19 +235,21 @@ interface ToolResultProps {
   name: string;
   success: boolean;
   output: string;
+  error?: string;
   metadata?: ToolResultMetadata;
+  expanded?: boolean;
+  id?: string;
 }
 
-export function ToolResult({ name, success, output, metadata }: ToolResultProps) {
-  const statusColor = success ? colors.success : colors.error;
+export function ToolResult({ name, success, output, error, metadata, expanded }: ToolResultProps) {
+  const statusColor = success ? colors.statusSuccess : colors.statusError;
 
   // If metadata has subtitle (e.g., "Received 540.3KB (200 OK)"), show it
   if (metadata?.subtitle) {
     return (
-      <Box marginLeft={2}>
-        <Text color={colors.textMuted}>{icons.treeEnd}</Text>
-        <Text> </Text>
-        <Text color={statusColor}>{metadata.subtitle}</Text>
+      <Box marginLeft={2} marginTop={1}>
+        <Text color={colors.textMuted}>└─ </Text>
+        <Text color={colors.textSecondary}>{metadata.subtitle}</Text>
       </Box>
     );
   }
@@ -267,14 +259,38 @@ export function ToolResult({ name, success, output, metadata }: ToolResultProps)
     return null;
   }
 
-  // Default: Show first line of output with status icon
-  const displayOutput = truncate(output.split('\n')[0]?.trim() || '', 60);
+  // Determine content to display: prioritize error field when failed
+  const contentToShow = (!success && error) ? error : output;
+  const lines = contentToShow.split('\n').filter(line => line.trim());
+  const maxDisplayLines = 3;
+  const isTruncated = !expanded && lines.length > maxDisplayLines;
+  const remainingLines = lines.length - maxDisplayLines;
+
+  // When expanded, show all lines
+  const displayLines = expanded ? lines : lines.slice(0, maxDisplayLines);
+
+  // First line with tree connector
+  const firstLine = displayLines[0] || (success ? 'Done' : 'Failed');
 
   return (
-    <Box marginLeft={2}>
-      <Text color={colors.textMuted}>{icons.treeEnd}</Text>
-      <Text> </Text>
-      <Text color={statusColor}>{displayOutput || (success ? 'Done' : 'Failed')}</Text>
+    <Box marginLeft={2} flexDirection="column" marginTop={1}>
+      <Box>
+        <Text color={colors.textMuted}>└─ </Text>
+        <Text color={statusColor}>{truncate(firstLine.trim(), 70)}</Text>
+      </Box>
+      {/* Additional lines */}
+      {displayLines.slice(1).map((line, idx) => (
+        <Box key={idx}>
+          <Text color={colors.textMuted}>   </Text>
+          <Text color={colors.textSecondary}>{truncate(line.trim(), 70)}</Text>
+        </Box>
+      ))}
+      {/* Truncation indicator */}
+      {isTruncated && (
+        <Box>
+          <Text color={colors.textMuted}>   ... {remainingLines} more lines</Text>
+        </Box>
+      )}
     </Box>
   );
 }
@@ -384,3 +400,63 @@ export function CompletionMessage({ durationMs, usage, cost }: CompletionMessage
     </Box>
   );
 }
+
+interface CommandDefinition {
+  name: string;
+  description?: string;
+  argumentHint?: string;
+  level: 'user' | 'project';
+  namespace: 'gen' | 'claude';
+}
+
+interface CommandListDisplayProps {
+  commands: CommandDefinition[];
+}
+
+export function CommandListDisplay({ commands }: CommandListDisplayProps) {
+  if (commands.length === 0) {
+    return (
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>No custom commands found</Text>
+      </Box>
+    );
+  }
+
+  // Group commands by namespace
+  const genCommands = commands.filter(c => c.namespace === 'gen');
+  const claudeCommands = commands.filter(c => c.namespace === 'claude');
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text bold color={colors.info}>Available Custom Commands:</Text>
+
+      {genCommands.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text dimColor>GenCode Commands:</Text>
+          {genCommands.map(cmd => (
+            <Box key={cmd.name} marginLeft={2}>
+              <Text color={colors.success}>/{cmd.name}</Text>
+              {cmd.argumentHint && <Text dimColor> {cmd.argumentHint}</Text>}
+              {cmd.description && <Text dimColor> - {cmd.description}</Text>}
+              <Text dimColor> ({cmd.level})</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {claudeCommands.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text dimColor>Claude Code Commands:</Text>
+          {claudeCommands.map(cmd => (
+            <Box key={cmd.name} marginLeft={2}>
+              <Text color={colors.success}>/{cmd.name}</Text>
+              {cmd.argumentHint && <Text dimColor> {cmd.argumentHint}</Text>}
+              {cmd.description && <Text dimColor> - {cmd.description}</Text>}
+              <Text dimColor> ({cmd.level})</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/cli/components/ModeIndicator.tsx

@@ -11,7 +11,7 @@
 
 import { Box, Text } from 'ink';
 import { colors, icons } from './theme.js';
-import type { ModeType } from '../../planning/types.js';
+import type { ModeType } from '../planning/types.js';
 
 // ============================================================================
 // Types

package/src/cli/components/ModelSelector.tsx

@@ -6,9 +6,9 @@ import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 import { colors, icons } from './theme.js';
 import { LoadingSpinner } from './Spinner.js';
-import { getProviderStore, type ModelInfo } from '../../providers/store.js';
-import { getProviderMeta } from '../../providers/registry.js';
-import type { Provider, AuthMethod } from '../../providers/index.js';
+import { getProviderStore, type ModelInfo } from '../../core/providers/store.js';
+import { getProviderMeta } from '../../core/providers/registry.js';
+import type { Provider, AuthMethod } from '../../core/providers/index.js';
 
 interface ModelItem {
   providerId: Provider;