gencode-ai 0.1.3 → 0.3.0

package/src/cli/components/ModeIndicator.tsx

@@ -0,0 +1,174 @@
+/**
+ * Mode Indicator Component - Shows current mode (NORMAL/PLAN/ACCEPT)
+ *
+ * Design:
+ * ╭────────────────────────────────────╮
+ * │  ◉ NORMAL   ○ PLAN   ○ ACCEPT     │
+ * ╰────────────────────────────────────╯
+ *
+ * Or with Shift+Tab toggle hint
+ */
+
+import { Box, Text } from 'ink';
+import { colors, icons } from './theme.js';
+import type { ModeType } from '../../planning/types.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface ModeIndicatorProps {
+  /** Current mode */
+  mode: ModeType;
+  /** Show toggle hint */
+  showHint?: boolean;
+  /** Compact mode (inline) */
+  compact?: boolean;
+}
+
+// ============================================================================
+// Mode Indicator Component
+// ============================================================================
+
+/**
+ * Mode Indicator - Shows NORMAL/PLAN/ACCEPT mode toggle
+ */
+export function ModeIndicator({ mode, showHint = false, compact = false }: ModeIndicatorProps) {
+  const isNormal = mode === 'normal';
+  const isPlan = mode === 'plan';
+  const isAccept = mode === 'accept';
+
+  if (compact) {
+    // Compact inline indicator
+    const modeLabel = isPlan ? 'PLAN' : isAccept ? 'ACCEPT' : '';
+    const modeColor = isPlan ? colors.warning : isAccept ? colors.success : colors.textMuted;
+
+    if (!modeLabel) return null;
+
+    return (
+      <Box>
+        <Text color={modeColor}>
+          {isPlan ? icons.modePlan : icons.modeAccept}
+        </Text>
+        <Text color={modeColor}> {modeLabel}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box borderStyle="round" borderColor={isPlan ? colors.warning : isAccept ? colors.success : colors.textMuted} paddingX={1}>
+        {/* NORMAL option */}
+        <Text color={isNormal ? colors.primary : colors.textMuted}>
+          {isNormal ? icons.radio : icons.radioEmpty}
+        </Text>
+        <Text color={isNormal ? colors.text : colors.textMuted} bold={isNormal}>
+          {' '}NORMAL
+        </Text>
+
+        <Text color={colors.textMuted}>   </Text>
+
+        {/* PLAN option */}
+        <Text color={isPlan ? colors.warning : colors.textMuted}>
+          {isPlan ? icons.radio : icons.radioEmpty}
+        </Text>
+        <Text color={isPlan ? colors.text : colors.textMuted} bold={isPlan}>
+          {' '}PLAN
+        </Text>
+
+        <Text color={colors.textMuted}>   </Text>
+
+        {/* ACCEPT option */}
+        <Text color={isAccept ? colors.success : colors.textMuted}>
+          {isAccept ? icons.radio : icons.radioEmpty}
+        </Text>
+        <Text color={isAccept ? colors.text : colors.textMuted} bold={isAccept}>
+          {' '}ACCEPT
+        </Text>
+      </Box>
+
+      {showHint && (
+        <Box marginTop={0}>
+          <Text color={colors.textMuted} dimColor>  Shift+Tab to cycle modes</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+// ============================================================================
+// Mode Badge Component
+// ============================================================================
+
+interface ModeBadgeProps {
+  mode: ModeType;
+}
+
+/**
+ * Mode Badge - Compact badge for header display
+ */
+export function ModeBadge({ mode }: ModeBadgeProps) {
+  const color = mode === 'plan' ? colors.warning : mode === 'accept' ? colors.success : colors.primary;
+  const label = mode === 'plan' ? 'PLAN' : mode === 'accept' ? 'ACCEPT' : 'NORMAL';
+
+  return (
+    <Text color={color} bold>
+      [{label}]
+    </Text>
+  );
+}
+
+// ============================================================================
+// Plan Status Bar Component
+// ============================================================================
+
+interface PlanStatusBarProps {
+  /** Current planning phase */
+  phase: string;
+  /** Plan file path */
+  planFilePath?: string;
+}
+
+/**
+ * Plan Status Bar - Shows plan mode status
+ */
+export function PlanStatusBar({ phase, planFilePath }: PlanStatusBarProps) {
+  // Shorten plan file path for display
+  const displayPath = planFilePath
+    ? planFilePath.replace(process.env.HOME || '', '~').split('/').slice(-2).join('/')
+    : '';
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={colors.warning}
+      paddingX={1}
+      flexDirection="column"
+    >
+      {/* Status line */}
+      <Box>
+        <Text color={colors.warning}>PLAN MODE</Text>
+        <Text color={colors.textMuted}> │ </Text>
+        <Text color={colors.textSecondary}>Phase: </Text>
+        <Text color={colors.info}>{phase}</Text>
+        <Text color={colors.textMuted}> │ </Text>
+        <Text color={colors.textMuted}>Shift+Tab to switch</Text>
+      </Box>
+
+      {/* Tools info */}
+      <Box>
+        <Text color={colors.textMuted}>
+          Allowed: Read, Glob, Grep, WebFetch, WebSearch, TodoWrite
+        </Text>
+      </Box>
+
+      {/* Plan file */}
+      {displayPath && (
+        <Box>
+          <Text color={colors.textMuted}>Plan: </Text>
+          <Text color={colors.primary}>{displayPath}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/cli/components/ModelSelector.tsx

@@ -7,24 +7,27 @@ 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 { getProvider } from '../../providers/registry.js';
-import type { ProviderName } from '../../providers/index.js';
+import { getProviderMeta } from '../../providers/registry.js';
+import type { Provider, AuthMethod } from '../../providers/index.js';
 
 interface ModelItem {
-  providerId: ProviderName;
+  providerId: Provider;
   providerName: string;
+  authMethod: AuthMethod;
   model: ModelInfo;
 }
 
 interface ModelSelectorProps {
   currentModel: string;
-  onSelect: (modelId: string, providerId: ProviderName) => void;
+  currentProvider?: Provider; // Current provider for adding missing model placeholder
+  onSelect: (modelId: string, providerId: Provider, authMethod?: AuthMethod) => void;
   onCancel: () => void;
   listModels: () => Promise<{ id: string; name: string }[]>; // Fallback for current provider
 }
 
 export function ModelSelector({
   currentModel,
+  currentProvider,
   onSelect,
   onCancel,
   listModels,
@@ -42,14 +45,17 @@ export function ModelSelector({
       const items: ModelItem[] = [];
 
       for (const providerId of connectedProviders) {
+        const connection = store.getConnection(providerId);
+        const authMethod = connection?.authMethod || 'api_key';
         const cachedModels = store.getModels(providerId);
-        const providerDef = getProvider(providerId);
-        const providerName = providerDef?.name || providerId;
+        const providerMeta = getProviderMeta(providerId);
+        const providerName = providerMeta?.name || providerId;
 
         for (const model of cachedModels) {
           items.push({
             providerId,
             providerName,
+            authMethod,
             model,
           });
         }
@@ -61,8 +67,9 @@ export function ModelSelector({
           const models = await listModels();
           for (const model of models) {
             items.push({
-              providerId: 'anthropic' as ProviderName, // Default, will be overridden
+              providerId: 'anthropic' as Provider, // Default, will be overridden
               providerName: 'Current Provider',
+              authMethod: 'api_key', // Default
               model,
             });
           }
@@ -71,12 +78,32 @@ export function ModelSelector({
         }
       }
 
+      // Add current model if not in list (e.g., experimental models not cached)
+      const hasCurrentModel = items.some((item) => item.model.id === currentModel);
+
+      if (!hasCurrentModel && currentModel && currentProvider) {
+        const connection = store.getConnection(currentProvider);
+        const authMethod = connection?.authMethod || 'api_key';
+        const providerMeta = getProviderMeta(currentProvider);
+        const providerName = providerMeta?.name || currentProvider;
+
+        items.unshift({
+          providerId: currentProvider,
+          providerName,
+          authMethod,
+          model: {
+            id: currentModel,
+            name: currentModel, // Display logic will add "(current)" marker
+          },
+        });
+      }
+
       setAllModels(items);
       setLoading(false);
     };
 
     loadModels();
-  }, [store, listModels]);
+  }, [store, listModels, currentModel, currentProvider]);
 
   // Filter models
   const filterLower = filter.toLowerCase();
@@ -101,14 +128,21 @@ export function ModelSelector({
     return groups;
   }, [filtered]);
 
-  // Flat list for navigation
+  // Flat list for navigation - sort to put current model first
   const flatList = useMemo(() => {
     const items: ModelItem[] = [];
     for (const providerId of Object.keys(groupedModels)) {
       items.push(...groupedModels[providerId]);
     }
-    return items;
-  }, [groupedModels]);
+    // Sort: current model first, then alphabetically
+    return items.sort((a, b) => {
+      const aIsCurrent = a.model.id === currentModel;
+      const bIsCurrent = b.model.id === currentModel;
+      if (aIsCurrent && !bIsCurrent) return -1;
+      if (!aIsCurrent && bIsCurrent) return 1;
+      return (a.model.name || a.model.id).localeCompare(b.model.name || b.model.id);
+    });
+  }, [groupedModels, currentModel]);
 
   // Reset selection when filter changes
   useEffect(() => {
@@ -124,7 +158,7 @@ export function ModelSelector({
     } else if (key.return) {
       if (flatList.length > 0) {
         const selected = flatList[selectedIndex];
-        onSelect(selected.model.id, selected.providerId);
+        onSelect(selected.model.id, selected.providerId, selected.authMethod);
       }
     } else if (key.escape) {
       onCancel();
@@ -152,41 +186,24 @@ export function ModelSelector({
   );
   const endIndex = Math.min(startIndex + maxVisible, flatList.length);
 
-  // Build visible items with provider headers
-  let currentIdx = 0;
+  // Build visible items with provider headers from sorted flatList
   const renderItems: Array<{ type: 'header' | 'model'; content: string; item?: ModelItem }> = [];
+  let lastProviderId: string | null = null;
 
-  for (const providerId of Object.keys(groupedModels)) {
-    const models = groupedModels[providerId];
-    const firstIdx = currentIdx;
-    const lastIdx = currentIdx + models.length - 1;
-
-    // Check if any model from this provider is in visible range
-    if (lastIdx >= startIndex && firstIdx < endIndex) {
-      // Add header if first visible item is from this provider
-      const providerDef = getProvider(providerId as ProviderName);
-      const connection = store.getConnection(providerId as ProviderName);
-      const headerText = `${providerDef?.name || providerId}${connection ? ` (${connection.method})` : ''}:`;
-
-      // Only add header if we're showing models from this provider
-      const visibleModelsFromProvider = models.filter((_, i) => {
-        const globalIdx = currentIdx + i;
-        return globalIdx >= startIndex && globalIdx < endIndex;
-      });
-
-      if (visibleModelsFromProvider.length > 0 && (firstIdx >= startIndex || renderItems.length === 0)) {
-        renderItems.push({ type: 'header', content: headerText });
-      }
+  for (let i = startIndex; i < endIndex; i++) {
+    const item = flatList[i];
+    if (!item) continue;
 
-      for (let i = 0; i < models.length; i++) {
-        const globalIdx = currentIdx + i;
-        if (globalIdx >= startIndex && globalIdx < endIndex) {
-          renderItems.push({ type: 'model', content: '', item: models[i] });
-        }
-      }
+    // Add provider header when provider changes
+    const providerKey = `${item.providerId}:${item.authMethod}`;
+    if (providerKey !== lastProviderId) {
+      const providerMeta = getProviderMeta(item.providerId);
+      const headerText = `${providerMeta?.name || item.providerId} (${item.authMethod}):`;
+      renderItems.push({ type: 'header', content: headerText });
+      lastProviderId = providerKey;
     }
 
-    currentIdx += models.length;
+    renderItems.push({ type: 'model', content: '', item });
   }
 
   return (
@@ -228,11 +245,13 @@ export function ModelSelector({
                 <Text color={isSelected ? colors.primary : colors.textMuted}>
                   {isSelected ? icons.arrow : ' '}
                 </Text>
+                <Text> </Text>
                 <Text color={isCurrent ? colors.primary : colors.textMuted}>
                   {isCurrent ? icons.radio : icons.radioEmpty}
                 </Text>
+                <Text> </Text>
                 <Text color={isSelected ? colors.text : colors.textSecondary} bold={isSelected}>
-                  {' '}{item.model.name || item.model.id}
+                  {item.model.name || item.model.id}
                 </Text>
                 {isCurrent && <Text color={colors.success}> (current)</Text>}
               </Box>

package/src/cli/components/PlanApproval.tsx

@@ -0,0 +1,327 @@
+/**
+ * Plan Approval Component - Beautiful plan approval UI
+ *
+ * Displays the implementation plan and asks for user approval with options:
+ * 1. Yes, clear context and auto-accept edits (shift+tab)
+ * 2. Yes, auto-accept edits
+ * 3. Yes, manually approve edits
+ * 4. Type here to tell Claude what to change
+ *
+ * Based on Claude Code's plan approval UI.
+ */
+
+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';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface PlanApprovalProps {
+  /** Plan summary text */
+  planSummary: string;
+  /** Requested permissions from the plan */
+  requestedPermissions: AllowedPrompt[];
+  /** Files to be changed */
+  filesToChange: Array<{ path: string; action: 'create' | 'modify' | 'delete' }>;
+  /** Plan file path for display */
+  planFilePath: string;
+  /** Callback when user makes a decision */
+  onDecision: (option: PlanApprovalOption, customInput?: string) => void;
+}
+
+interface ApprovalOption {
+  label: string;
+  shortcut: string;
+  option: PlanApprovalOption;
+  description?: string;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const APPROVAL_OPTIONS: ApprovalOption[] = [
+  {
+    label: 'Yes, clear context and auto-accept edits',
+    shortcut: 'shift+tab',
+    option: 'approve_clear',
+    description: 'Fresh start with automatic approval',
+  },
+  {
+    label: 'Yes, auto-accept edits',
+    shortcut: '1',
+    option: 'approve',
+    description: 'Continue with automatic approval',
+  },
+  {
+    label: 'Yes, manually approve edits',
+    shortcut: '2',
+    option: 'approve_manual',
+    description: 'Review each change before applying',
+  },
+  {
+    label: 'Type here to tell Claude what to change',
+    shortcut: '3',
+    option: 'modify',
+    description: 'Go back to modify the plan',
+  },
+];
+
+// ============================================================================
+// Helper Components
+// ============================================================================
+
+function FileChangesList({
+  files,
+}: {
+  files: Array<{ path: string; action: 'create' | 'modify' | 'delete' }>;
+}) {
+  if (files.length === 0) return null;
+
+  const getIcon = (action: string) => {
+    switch (action) {
+      case 'create':
+        return { icon: '+', color: colors.success };
+      case 'modify':
+        return { icon: '~', color: colors.warning };
+      case 'delete':
+        return { icon: '-', color: colors.error };
+      default:
+        return { icon: '?', color: colors.textMuted };
+    }
+  };
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={colors.textSecondary}>Files to change:</Text>
+      {files.slice(0, 8).map((file, i) => {
+        const { icon, color } = getIcon(file.action);
+        return (
+          <Text key={i}>
+            <Text color={color}>  {icon} </Text>
+            <Text>{file.path}</Text>
+            <Text color={colors.textMuted}> ({file.action})</Text>
+          </Text>
+        );
+      })}
+      {files.length > 8 && (
+        <Text color={colors.textMuted}>  ... and {files.length - 8} more files</Text>
+      )}
+    </Box>
+  );
+}
+
+function PermissionsList({ permissions }: { permissions: AllowedPrompt[] }) {
+  if (permissions.length === 0) return null;
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={colors.textSecondary}>Requested permissions:</Text>
+      {permissions.map((perm, i) => (
+        <Text key={i}>
+          <Text color={colors.textMuted}>  - </Text>
+          <Text color={colors.tool}>{perm.tool}</Text>
+          <Text color={colors.textMuted}>(prompt: </Text>
+          <Text>{perm.prompt}</Text>
+          <Text color={colors.textMuted}>)</Text>
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+// ============================================================================
+// Plan Approval Component
+// ============================================================================
+
+export function PlanApproval({
+  planSummary,
+  requestedPermissions,
+  filesToChange,
+  planFilePath,
+  onDecision,
+}: PlanApprovalProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isTyping, setIsTyping] = useState(false);
+  const [customInput, setCustomInput] = useState('');
+
+  // Handle keyboard input
+  useInput((inputChar, key) => {
+    if (isTyping) {
+      // Handle typing mode
+      if (key.escape) {
+        setIsTyping(false);
+        setCustomInput('');
+      } else if (key.return && customInput.trim()) {
+        onDecision('modify', customInput.trim());
+      } else if (key.backspace || key.delete) {
+        setCustomInput((prev) => prev.slice(0, -1));
+      } else if (inputChar && !key.ctrl && !key.meta) {
+        setCustomInput((prev) => prev + inputChar);
+      }
+      return;
+    }
+
+    // Arrow navigation
+    if (key.upArrow) {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex((i) => Math.min(APPROVAL_OPTIONS.length - 1, i + 1));
+    }
+
+    // Enter to select current option
+    if (key.return) {
+      const selected = APPROVAL_OPTIONS[selectedIndex];
+      if (selected.option === 'modify') {
+        setIsTyping(true);
+      } else {
+        onDecision(selected.option);
+      }
+    }
+
+    // Escape to cancel
+    if (key.escape) {
+      onDecision('cancel');
+    }
+
+    // Shift+Tab for approve_clear
+    if (key.shift && key.tab) {
+      onDecision('approve_clear');
+    }
+
+    // Number shortcuts
+    if (inputChar === '1') {
+      onDecision('approve');
+    } else if (inputChar === '2') {
+      onDecision('approve_manual');
+    } else if (inputChar === '3') {
+      setSelectedIndex(3);
+      setIsTyping(true);
+    }
+  });
+
+  // Shorten plan file path
+  const displayPath = planFilePath
+    .replace(process.env.HOME || '', '~')
+    .split('/')
+    .slice(-3)
+    .join('/');
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor={colors.warning} paddingX={1} paddingY={0}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text color={colors.warning} bold>Implementation Plan</Text>
+      </Box>
+
+      {/* Plan Summary */}
+      <Box flexDirection="column">
+        <Text color={colors.text}>{planSummary}</Text>
+      </Box>
+
+      {/* Files to change */}
+      <FileChangesList files={filesToChange} />
+
+      {/* Requested permissions */}
+      <PermissionsList permissions={requestedPermissions} />
+
+      {/* Question */}
+      <Box marginTop={1}>
+        <Text bold>Would you like to proceed?</Text>
+      </Box>
+
+      {/* Options */}
+      <Box flexDirection="column" marginTop={0} marginLeft={1}>
+        {APPROVAL_OPTIONS.map((opt, index) => {
+          const isSelected = index === selectedIndex;
+          return (
+            <Box key={opt.option}>
+              <Text color={isSelected ? colors.primary : colors.textMuted}>
+                {isSelected ? icons.radio : icons.radioEmpty}
+              </Text>
+              <Text color={colors.textMuted}> {String(index + 1)}. </Text>
+              <Text color={isSelected ? colors.text : colors.textSecondary}>
+                {opt.label}
+              </Text>
+              {opt.shortcut !== String(index + 1) && (
+                <Text color={colors.textMuted}> ({opt.shortcut})</Text>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      {/* Typing mode */}
+      {isTyping && (
+        <Box marginTop={1} marginLeft={1}>
+          <Text color={colors.primary}>{icons.prompt} </Text>
+          <Text>{customInput}</Text>
+          <Text color={colors.primary}>{icons.cursor}</Text>
+        </Box>
+      )}
+
+      {/* Footer hint */}
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>
+          ctrl-g to edit in VS Code · {displayPath}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+// ============================================================================
+// Plan Mode Toggle Notification
+// ============================================================================
+
+interface ModeChangeNotificationProps {
+  fromMode: 'build' | 'plan';
+  toMode: 'build' | 'plan';
+  planFilePath?: string;
+}
+
+export function ModeChangeNotification({
+  fromMode,
+  toMode,
+  planFilePath,
+}: ModeChangeNotificationProps) {
+  const isPlanMode = toMode === 'plan';
+  const displayPath = planFilePath
+    ? planFilePath.replace(process.env.HOME || '', '~').split('/').slice(-2).join('/')
+    : '';
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={isPlanMode ? colors.warning : colors.success}
+      paddingX={1}
+    >
+      <Box>
+        <Text color={colors.textMuted}>{icons.radioEmpty} {fromMode.toUpperCase()}</Text>
+        <Text color={colors.textMuted}>  {icons.arrow}  </Text>
+        <Text color={isPlanMode ? colors.warning : colors.success} bold>
+          {icons.radio} {toMode.toUpperCase()}
+        </Text>
+      </Box>
+
+      <Box>
+        {isPlanMode ? (
+          <Text color={colors.warning}>Switched to PLAN mode</Text>
+        ) : (
+          <Text color={colors.success}>Switched to BUILD mode</Text>
+        )}
+      </Box>
+
+      {isPlanMode && displayPath && (
+        <Box>
+          <Text color={colors.textMuted}>Plan file: </Text>
+          <Text color={colors.primary}>{displayPath}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}