gencode-ai 0.4.0 → 0.5.0

package/src/cli/components/PermissionPrompt.tsx

@@ -1,21 +1,29 @@
 /**
- * Permission Prompt Component - Claude Code style approval UI
+ * Permission Prompt Component - Simplified UI
  *
- * Claude Code design:
- *
- * Tool use
- * Web Search("query text here")
- *
- * Do you want to proceed?
- *   [1] Yes
- *   [2] Yes, and don't ask again for Web Search in /path/to/project
- *   [3] No
+ * Design:
+ * ╭──────────────────────────────────────────────────╮
+ * │  [$] Bash                                        │
+ * │                                                  │
+ * │  osascript -e '                                  │
+ * │    tell application "Mail"                       │
+ * │    ...                                           │
+ * │                               ▼ 28 more lines tab│
+ * │                                                  │
+ * │  Allow this action?                              │
+ * │                                                  │
+ * │  ▸ [1] Yes                                       │
+ * │    [2] Yes, always                               │
+ * │    [3] No                                        │
+ * ╰──────────────────────────────────────────────────╯
  */
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import type { ReactElement } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { colors, icons } from './theme.js';
-import type { ApprovalAction, ApprovalSuggestion } from '../../permissions/types.js';
+import { DiffPreview } from './DiffPreview.js';
+import type { ApprovalAction, ApprovalSuggestion } from '../../core/permissions/types.js';
 
 // ============================================================================
 // Types
@@ -32,6 +40,8 @@ interface PermissionPromptProps {
   onDecision: (action: ApprovalAction) => void;
   /** Project path for "don't ask again" option */
   projectPath?: string;
+  /** Additional metadata for display (e.g., diff preview) */
+  metadata?: Record<string, unknown>;
 }
 
 // ============================================================================
@@ -48,8 +58,24 @@ function formatToolName(tool: string): string {
 
 /**
  * Format tool input for display
+ * Returns string or ReactElement (for special previews like diff)
  */
-function formatInput(tool: string, input: Record<string, unknown>): string {
+function formatInput(
+  tool: string,
+  input: Record<string, unknown>,
+  metadata?: Record<string, unknown>
+): string | ReactElement {
+  // Special case: Edit tool with diff metadata
+  if (tool === 'Edit' && metadata?.diff && metadata?.filePath) {
+    return (
+      <DiffPreview
+        filePath={metadata.filePath as string}
+        diff={metadata.diff as string}
+        collapsed={true}
+      />
+    );
+  }
+
   switch (tool) {
     case 'Bash':
       return (input.command as string) ?? JSON.stringify(input);
@@ -85,55 +111,32 @@ function formatInput(tool: string, input: Record<string, unknown>): string {
 }
 
 /**
- * Format tool call in Claude Code style: Tool("input")
- * Returns an array of lines for proper wrapping
- */
-function formatToolCall(tool: string, input: Record<string, unknown>): { name: string; input: string } {
-  const displayName = formatToolName(tool);
-  let inputStr = formatInput(tool, input);
-
-  // Truncate very long inputs
-  const maxLen = 60;
-  if (inputStr.length > maxLen) {
-    inputStr = inputStr.slice(0, maxLen - 3) + '...';
-  }
-
-  return { name: displayName, input: inputStr };
-}
-
-/**
- * Get icon for tool
+ * Get icon for tool (terminal style)
  */
 function getToolIcon(tool: string): string {
   switch (tool) {
     case 'Bash':
-      return '⚡';
+      return '[$]';
     case 'Read':
+      return '[R]';
     case 'Write':
+      return '[W]';
     case 'Edit':
-      return '📄';
+      return '[E]';
     case 'Glob':
+      return '[G]';
     case 'Grep':
-      return '🔍';
+      return '[S]';
     case 'WebFetch':
     case 'WebSearch':
-      return '🌐';
+      return '[W]';
     case 'TodoWrite':
-      return '📋';
+      return '[T]';
     default:
       return icons.tool;
   }
 }
 
-/**
- * Get shortcut key display
- */
-function getShortcutDisplay(shortcut?: string): string {
-  if (!shortcut) return '';
-  if (shortcut === 'n') return 'n';
-  return shortcut;
-}
-
 // ============================================================================
 // Permission Prompt Component
 // ============================================================================
@@ -144,6 +147,7 @@ export function PermissionPrompt({
   suggestions,
   onDecision,
   projectPath,
+  metadata,
 }: PermissionPromptProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [expanded, setExpanded] = useState(false);
@@ -189,66 +193,93 @@ export function PermissionPrompt({
     }
   });
 
-  const toolInfo = formatToolCall(tool, input);
   const displayToolName = formatToolName(tool);
-  const fullInput = formatInput(tool, input);
-  const isLongInput = fullInput.length > 60;
+  const fullInput = formatInput(tool, input, metadata);
+  const toolIcon = getToolIcon(tool);
+
+  // Parse content lines for display
+  let contentLines: string[] = [];
+  if (typeof fullInput === 'string') {
+    contentLines = fullInput.split('\n').filter(Boolean);
+  }
+  const maxContentLines = 8;
+  const isLongInput = contentLines.length > maxContentLines;
+  const displayContentLines = expanded ? contentLines : contentLines.slice(0, maxContentLines);
+  const hiddenLines = contentLines.length - maxContentLines;
 
   // Get dynamic label for "don't ask again" option
   const getDynamicLabel = (suggestion: ApprovalSuggestion): string => {
     if (suggestion.action === 'allow_always' && projectPath) {
-      // Shorten project path for display
       const shortPath = projectPath.replace(process.env.HOME || '', '~');
-      return `Yes, don't ask again for ${displayToolName} in ${shortPath}`;
+      return `Yes, always in ${shortPath}`;
     }
     return suggestion.label;
   };
 
   return (
-    <Box flexDirection="column" marginTop={1} borderStyle="round" borderColor={colors.warning} paddingX={1}>
-      {/* Header */}
-      <Box>
-        <Text color={colors.warning}>⚡ </Text>
-        <Text bold>{toolInfo.name}</Text>
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={colors.permissionBorder}
+      paddingX={1}
+      marginTop={1}
+    >
+      {/* Tool name header */}
+      <Box marginTop={1}>
+        <Text color={colors.toolHeader}>{toolIcon} </Text>
+        <Text bold>{displayToolName}</Text>
       </Box>
 
-      {/* Tool input - collapsible for long content */}
-      <Box flexDirection="column" marginLeft={2}>
-        {expanded || !isLongInput ? (
-          <Text color={colors.textSecondary}>{fullInput}</Text>
+      {/* Content: either text lines or JSX (like DiffPreview) */}
+      <Box flexDirection="column" marginLeft={2} marginY={1}>
+        {typeof fullInput === 'string' ? (
+          <>
+            {displayContentLines.map((line, idx) => (
+              <Text key={idx} color={colors.textSecondary}>{line}</Text>
+            ))}
+            {isLongInput && (
+              <Box justifyContent="flex-end">
+                <Text color={colors.textMuted}>
+                  {expanded ? '▲ less' : `▼ ${hiddenLines} more lines`}  tab
+                </Text>
+              </Box>
+            )}
+          </>
         ) : (
-          <Box>
-            <Text color={colors.textSecondary}>{toolInfo.input}</Text>
-            <Text color={colors.textMuted}>{' [-> expand]'}</Text>
-          </Box>
+          // Render JSX element (like DiffPreview)
+          <Box flexDirection="column">{fullInput}</Box>
         )}
       </Box>
 
       {/* Question */}
       <Box marginTop={1}>
-        <Text>Allow this action?</Text>
+        <Text bold>Allow this action?</Text>
       </Box>
 
       {/* Options */}
-      <Box flexDirection="column" marginTop={0} marginLeft={2}>
+      <Box flexDirection="column" marginLeft={2} marginY={1}>
         {suggestions.map((suggestion, index) => {
           const isSelected = index === selectedIndex;
-          const shortcut = getShortcutDisplay(suggestion.shortcut);
           const label = getDynamicLabel(suggestion);
 
           return (
             <Box key={suggestion.action}>
-              <Text color={isSelected ? colors.primary : colors.textMuted}>
-                {isSelected ? '▶' : ' '}
+              <Text color={isSelected ? colors.optionSelected : colors.textMuted}>
+                {isSelected ? '▸ ' : '  '}
               </Text>
-              <Text color={colors.textMuted}> [{shortcut}] </Text>
-              <Text color={isSelected ? colors.text : colors.textSecondary}>
+              <Text color={colors.textMuted}>[{suggestion.shortcut}] </Text>
+              <Text color={isSelected ? colors.text : colors.textSecondary} bold={isSelected}>
                 {label}
               </Text>
             </Box>
           );
         })}
       </Box>
+
+      {/* Keyboard hint */}
+      <Box justifyContent="flex-end" marginBottom={1}>
+        <Text color={colors.textMuted}>↑↓ navigate • Enter confirm</Text>
+      </Box>
     </Box>
   );
 }

package/src/cli/components/PlanApproval.tsx

@@ -13,7 +13,7 @@
 import { useState, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { colors, icons } from './theme.js';
-import type { PlanApprovalOption, AllowedPrompt } from '../../planning/types.js';
+import type { PlanApprovalOption, AllowedPrompt } from '../planning/types.js';
 
 // ============================================================================
 // Types
@@ -50,21 +50,27 @@ const APPROVAL_OPTIONS: ApprovalOption[] = [
     option: 'approve_clear',
     description: 'Fresh start with automatic approval',
   },
+  {
+    label: 'Yes, and manually approve edits',
+    shortcut: '2',
+    option: 'approve_manual_keep',
+    description: 'Keep context, review each change',
+  },
   {
     label: 'Yes, auto-accept edits',
-    shortcut: '1',
+    shortcut: '3',
     option: 'approve',
     description: 'Continue with automatic approval',
   },
   {
     label: 'Yes, manually approve edits',
-    shortcut: '2',
+    shortcut: '4',
     option: 'approve_manual',
     description: 'Review each change before applying',
   },
   {
     label: 'Type here to tell Claude what to change',
-    shortcut: '3',
+    shortcut: '5',
     option: 'modify',
     description: 'Go back to modify the plan',
   },
@@ -194,11 +200,15 @@ export function PlanApproval({
 
     // Number shortcuts
     if (inputChar === '1') {
-      onDecision('approve');
+      onDecision('approve_clear');
     } else if (inputChar === '2') {
-      onDecision('approve_manual');
+      onDecision('approve_manual_keep');
     } else if (inputChar === '3') {
-      setSelectedIndex(3);
+      onDecision('approve');
+    } else if (inputChar === '4') {
+      onDecision('approve_manual');
+    } else if (inputChar === '5') {
+      setSelectedIndex(4);
       setIsTyping(true);
     }
   });

package/src/cli/components/ProviderManager.tsx

@@ -14,11 +14,11 @@ import {
   type ProviderClass,
   type ProviderMeta,
   type SearchProviderDefinition,
-} from '../../providers/registry.js';
-import { getProviderStore, type ModelInfo } from '../../providers/store.js';
-import { createProvider, type Provider } from '../../providers/index.js';
-import { isSearchProviderAvailable, type SearchProviderName } from '../../providers/search/index.js';
-import type { AuthMethod } from '../../providers/types.js';
+} from '../../core/providers/registry.js';
+import { getProviderStore, type ModelInfo } from '../../core/providers/store.js';
+import { createProvider, type Provider } from '../../core/providers/index.js';
+import { isSearchProviderAvailable, type SearchProviderName } from '../../core/providers/search/index.js';
+import type { AuthMethod } from '../../core/providers/types.js';
 
 interface ProviderManagerProps {
   onClose: () => void;

package/src/cli/components/QuestionPrompt.tsx

@@ -11,7 +11,7 @@
 import { useState, useCallback } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { colors } from './theme.js';
-import type { Question, QuestionAnswer } from '../../tools/types.js';
+import type { Question, QuestionAnswer } from '../../core/tools/types.js';
 
 // ============================================================================
 // Types

package/src/cli/components/TodoList.tsx

@@ -4,7 +4,7 @@
  */
 import { Box, Text } from 'ink';
 import { colors } from './theme.js';
-import type { TodoItem } from '../../tools/types.js';
+import type { TodoItem } from '../../core/tools/types.js';
 
 interface TodoListProps {
   todos: TodoItem[];

package/src/cli/components/index.ts

@@ -18,7 +18,7 @@ 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';
+export { CommandSuggestions, BUILTIN_COMMANDS, getFilteredCommands } from './CommandSuggestions.js';
 export {
   PermissionPrompt,
   SimpleConfirmPrompt,
@@ -26,3 +26,4 @@ export {
   PermissionAuditDisplay,
 } from './PermissionPrompt.js';
 export { QuestionPrompt, AnswerDisplay } from './QuestionPrompt.js';
+export { DiffPreview } from './DiffPreview.js';

package/src/cli/components/markdown.ts

@@ -5,6 +5,8 @@
 
 import { marked, type Tokens, type RendererObject, type Token } from 'marked';
 import chalk from 'chalk';
+import Table from 'cli-table3';
+import stringWidth from 'string-width';
 
 // Helper type for renderer context with parser access
 type RendererContext = {
@@ -28,6 +30,32 @@ function parseTokens(ctx: unknown, tokens: Token[], fallback: string): string {
   return context.parser?.parse(tokens).trim() ?? fallback;
 }
 
+/**
+ * Create cli-table3 instance with terminal-optimized settings
+ * Handles CJK characters correctly using string-width
+ */
+function createTable(headers: string[], rows: string[][]): string {
+  const table = new Table({
+    head: headers,
+    chars: {
+      'top': '─', 'top-mid': '┬', 'top-left': '┌', 'top-right': '┐',
+      'bottom': '─', 'bottom-mid': '┴', 'bottom-left': '└', 'bottom-right': '┘',
+      'left': '│', 'left-mid': '├', 'mid': '─', 'mid-mid': '┼',
+      'right': '│', 'right-mid': '┤', 'middle': '│'
+    },
+    style: {
+      head: ['cyan', 'bold'],  // Match existing code block style (cyan)
+      border: ['dim'],
+      compact: true
+    },
+    wordWrap: true,
+    wrapOnWordBoundary: true,
+  });
+
+  rows.forEach(row => table.push(row));
+  return table.toString();
+}
+
 // Custom terminal renderer
 const terminalRenderer: RendererObject = {
   // Headings: colored and bold
@@ -40,13 +68,13 @@ const terminalRenderer: RendererObject = {
     ];
     const colorFn = colors[Math.min(token.depth - 1, 3)];
     const content = parseInline(this, token.tokens, token.text);
-    return '\n' + colorFn(content) + '\n\n';
+    return colorFn(content) + '\n';  // Reduced whitespace around headings
   },
 
   // 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';
+    return content + '\n';  // Single newline to reduce whitespace
   },
 
   // Bold text
@@ -70,7 +98,7 @@ const terminalRenderer: RendererObject = {
   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';
+    return langHeader + lines + '\n';  // Reduced whitespace around code blocks
   },
 
   // List - parse block tokens for each item (they may contain nested text+inline tokens)
@@ -80,7 +108,7 @@ const terminalRenderer: RendererObject = {
       const content = parseTokens(this, item.tokens, item.text);
       return `  ${bullet} ${content}`;
     }).join('\n');
-    return result + '\n\n';
+    return result + '\n';  // Single newline after lists
   },
 
   // List item - use block parser since items contain text tokens with nested inline
@@ -100,12 +128,12 @@ const terminalRenderer: RendererObject = {
     const lines = text.split('\n').map(line =>
       chalk.dim('│ ') + chalk.italic(line)
     ).join('\n');
-    return '\n' + lines + '\n\n';
+    return lines + '\n';  // Reduced whitespace around blockquotes
   },
 
   // Horizontal rule
   hr(): string {
-    return '\n' + chalk.dim('─'.repeat(40)) + '\n\n';
+    return chalk.dim('─'.repeat(40)) + '\n';  // Reduced whitespace
   },
 
   // Line break
@@ -119,6 +147,30 @@ const terminalRenderer: RendererObject = {
     return chalk.strikethrough(content);
   },
 
+  // Table - render using cli-table3
+  table(token: Tokens.Table): string {
+    const headers = token.header.map(cell => {
+      return parseInline(this, cell.tokens, cell.text);
+    });
+
+    const rows = token.rows.map(row => {
+      return row.map(cell => {
+        return parseInline(this, cell.tokens, cell.text);
+      });
+    });
+
+    const tableOutput = createTable(headers, rows);
+    return tableOutput + '\n';
+  },
+
+  tablecell(token: Tokens.TableCell): string {
+    return parseInline(this, token.tokens, token.text);
+  },
+
+  tablerow(token: Tokens.TableRow): string {
+    return token.text;
+  },
+
   // 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

package/src/cli/components/theme.ts

@@ -15,6 +15,25 @@ export const colors = {
   tool: '#C084FC', // Purple 400
   separator: '#1E293B', // Slate 800
   inputBg: '#111827', // Gray 900 - subtle background for user input
+
+  // Tool UI extensions
+  toolHeader: '#60A5FA', // Blue 400 - tool name
+  toolBg: '#1E293B', // Slate 800 - background
+  toolBorder: '#334155', // Slate 700 - border
+
+  // Status colors
+  statusRunning: '#FBBF24', // Amber 400 - running
+  statusSuccess: '#34D399', // Emerald 400 - success
+  statusError: '#F87171', // Red 400 - error
+
+  // Permission dialog
+  permissionBorder: '#3B82F6', // Blue 500
+  optionSelected: '#3B82F6', // Blue 500
+
+  // Diff colors
+  diffAdd: '#22C55E', // Green 500
+  diffRemove: '#EF4444', // Red 500
+  diffHunk: '#06B6D4', // Cyan 500
 };
 
 export const icons = {
@@ -50,7 +69,51 @@ export const icons = {
   boxVertical: '│',
   // Tree connectors
   treeEnd: '└', // Tree end connector for tool results
+  treeMiddle: '├', // Tree middle connector
+  treeLine: '│', // Tree continuation line
   // Mode indicators
   modePlan: '⏸', // Pause for plan mode
   modeAccept: '⏵⏵', // Double play for accept mode
+
+  // Tool-specific icons (terminal style)
+  toolBash: '[$]',
+  toolRead: '[R]',
+  toolWrite: '[W]',
+  toolEdit: '[E]',
+  toolGlob: '[G]',
+  toolGrep: '[S]',
+  toolWeb: '[W]',
+  toolTodo: '[T]',
+  toolQuestion: '[?]',
+
+  // Status indicators
+  statusCheck: '✓',
+  statusCross: '✗',
+  statusDot: '●',
+
+  // Box drawing (extended)
+  boxTopLeft: '┌',
+  boxTopRight: '┐',
+  boxBottomLeft: '└',
+  boxBottomRight: '┘',
+  boxHorizontal: '─',
+  boxTeeLeft: '├',
+  boxTeeRight: '┤',
+
+  // Rounded box drawing (for permission dialogs)
+  roundTopLeft: '╭',
+  roundTopRight: '╮',
+  roundBottomLeft: '╰',
+  roundBottomRight: '╯',
+
+  // Selection indicator
+  selectArrow: '▸',
+
+  // Other
+  shield: '🛡',
+  expand: '▼',
+  collapse: '▲',
+
+  // Spinner frames
+  spinner: ['◐', '◓', '◑', '◒'],
 };