gencode-ai 0.1.0 → 0.1.2

package/src/cli/components/Logo.tsx

@@ -1,16 +1,83 @@
 import { Box, Text } from 'ink';
+import { colors } from './theme.js';
 
+// Small G logo for inline use
 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 marginRight={1}>
+      <Text bold color={colors.brand}>◆</Text>
+    </Box>
+  );
+}
+
+// Large ASCII art logo with elegant gradient
+export function BigLogo() {
+  // Indigo gradient - brand colors
+  const c1 = '#818CF8'; // Indigo 400
+  const c2 = '#818CF8'; // Indigo 400
+  const c3 = '#A5B4FC'; // Indigo 300
+  const c4 = '#A5B4FC'; // Indigo 300
+  const c5 = '#C7D2FE'; // Indigo 200
+  const c6 = '#C7D2FE'; // Indigo 200
+  const c7 = '#C7D2FE'; // Indigo 200
+
+  // G E N C O D E
+  return (
+    <Box flexDirection="column">
+      <Text>
+        <Text color={c1}> ██████╗ </Text>
+        <Text color={c2}>███████╗</Text>
+        <Text color={c3}>███╗   ██╗</Text>
+        <Text color={c4}> ██████╗</Text>
+        <Text color={c5}> ██████╗ </Text>
+        <Text color={c6}>██████╗ </Text>
+        <Text color={c7}>███████╗</Text>
+      </Text>
+      <Text>
+        <Text color={c1}>██╔════╝ </Text>
+        <Text color={c2}>██╔════╝</Text>
+        <Text color={c3}>████╗  ██║</Text>
+        <Text color={c4}>██╔════╝</Text>
+        <Text color={c5}>██╔═══██╗</Text>
+        <Text color={c6}>██╔══██╗</Text>
+        <Text color={c7}>██╔════╝</Text>
+      </Text>
+      <Text>
+        <Text color={c1}>██║  ███╗</Text>
+        <Text color={c2}>█████╗  </Text>
+        <Text color={c3}>██╔██╗ ██║</Text>
+        <Text color={c4}>██║     </Text>
+        <Text color={c5}>██║   ██║</Text>
+        <Text color={c6}>██║  ██║</Text>
+        <Text color={c7}>█████╗  </Text>
+      </Text>
+      <Text>
+        <Text color={c1}>██║   ██║</Text>
+        <Text color={c2}>██╔══╝  </Text>
+        <Text color={c3}>██║╚██╗██║</Text>
+        <Text color={c4}>██║     </Text>
+        <Text color={c5}>██║   ██║</Text>
+        <Text color={c6}>██║  ██║</Text>
+        <Text color={c7}>██╔══╝  </Text>
+      </Text>
+      <Text>
+        <Text color={c1}>╚██████╔╝</Text>
+        <Text color={c2}>███████╗</Text>
+        <Text color={c3}>██║ ╚████║</Text>
+        <Text color={c4}>╚██████╗</Text>
+        <Text color={c5}>╚██████╔╝</Text>
+        <Text color={c6}>██████╔╝</Text>
+        <Text color={c7}>███████╗</Text>
+      </Text>
+      <Text>
+        <Text color={c1}> ╚═════╝ </Text>
+        <Text color={c2}>╚══════╝</Text>
+        <Text color={c3}>╚═╝  ╚═══╝</Text>
+        <Text color={c4}> ╚═════╝</Text>
+        <Text color={c5}> ╚═════╝ </Text>
+        <Text color={c6}>╚═════╝ </Text>
+        <Text color={c7}>╚══════╝</Text>
+      </Text>
     </Box>
   );
 }

package/src/cli/components/Messages.tsx

@@ -1,5 +1,12 @@
+import { useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
+import InkSpinner from 'ink-spinner';
 import { colors, icons } from './theme.js';
+import { renderMarkdown } from './markdown.js';
+
+// Truncate string with ellipsis
+const truncate = (str: string, maxLen: number) =>
+  str.length > maxLen ? str.slice(0, maxLen - 3) + '...' : str;
 
 // Word wrap text to terminal width
 function wrapText(text: string, width: number): string[] {
@@ -31,12 +38,15 @@ interface UserMessageProps {
 
 export function UserMessage({ text }: UserMessageProps) {
   const lines = text.trimEnd().split('\n');
+  // Subtle gray - ~8% darker than pure white
+  const inputBg = '#EFEFEF';
+
   return (
     <Box flexDirection="column" marginTop={1} marginBottom={0}>
       {lines.map((line, i) => (
-        <Box key={i}>
+        <Box key={i} backgroundColor={inputBg}>
           <Text color={colors.brand}>{icons.userPrompt} </Text>
-          <Text backgroundColor="#1E293B" color={colors.text}> {line} </Text>
+          <Text>{line}</Text>
         </Box>
       ))}
     </Box>
@@ -51,29 +61,40 @@ interface AssistantMessageProps {
 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
+  // Streaming: use simple text display (markdown incomplete during stream)
+  if (streaming) {
+    const termWidth = process.stdout.columns || 80;
+    const contentWidth = termWidth - 4;
+    const lines = wrapText(text.trimEnd(), contentWidth);
 
-  // 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}
+              {i === lines.length - 1 && (
+                <Text color={colors.brandLight}>{icons.cursor}</Text>
+              )}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  // Completed: render with markdown
+  const rendered = renderMarkdown(text);
 
   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>
+        <Text color={colors.success}>{icons.assistant}</Text>
+        <Text> </Text>
+        <Text wrap="wrap">{rendered}</Text>
+      </Box>
     </Box>
   );
 }
@@ -83,38 +104,126 @@ interface ToolCallProps {
   input: Record<string, unknown>;
 }
 
+// Format tool input for display
+function formatToolInput(name: string, input: Record<string, unknown>): string {
+  switch (name) {
+    case 'Read':
+      return input.file_path as string || '';
+    case 'Write':
+    case 'Edit':
+      return input.file_path as string || '';
+    case 'Glob':
+      return input.pattern as string || '';
+    case 'Grep':
+      return `"${input.pattern}"` + (input.path ? ` in ${input.path}` : '');
+    case 'Bash':
+      return truncate(input.command as string || '', 50);
+    case 'WebFetch':
+      return input.url as string || '';
+    case 'WebSearch':
+      return `"${input.query}"` || '';
+    case 'TodoWrite': {
+      const todos = input.todos as Array<{ content: string; status: string }> || [];
+      return `${todos.length} task${todos.length !== 1 ? 's' : ''}`;
+    }
+    default:
+      return truncate(JSON.stringify(input), 40);
+  }
+}
+
 export function ToolCall({ name, input }: ToolCallProps) {
-  const inputStr = JSON.stringify(input);
-  const shortInput = inputStr.length > 50 ? inputStr.slice(0, 47) + '...' : inputStr;
+  // Hide TodoWrite (shown in TodoList component)
+  if (name === 'TodoWrite') return null;
+
+  const displayInput = formatToolInput(name, input);
 
   return (
-    <Box marginLeft={2}>
-      <Text dimColor>
-        <Text color={colors.tool}>{icons.tool}</Text> {name}{' '}
-        <Text color={colors.textMuted}>{shortInput}</Text>
+    <Box marginTop={1}>
+      <Text color={colors.tool}>{icons.tool}</Text>
+      <Text> </Text>
+      <Text bold>{name}</Text>
+      {displayInput && (
+        <>
+          <Text color={colors.textMuted}> </Text>
+          <Text color={colors.textSecondary}>{truncate(displayInput, 60)}</Text>
+        </>
+      )}
+    </Box>
+  );
+}
+
+// Pending tool call with spinning indicator
+interface PendingToolCallProps {
+  name: string;
+  input: Record<string, unknown>;
+}
+
+export function PendingToolCall({ name, input }: PendingToolCallProps) {
+  // Hide TodoWrite (shown in TodoList component)
+  if (name === 'TodoWrite') return null;
+
+  const displayInput = formatToolInput(name, input);
+
+  return (
+    <Box marginTop={1}>
+      <Text color={colors.tool}>
+        <InkSpinner type="dots" />
       </Text>
+      <Text> </Text>
+      <Text bold>{name}</Text>
+      {displayInput && (
+        <>
+          <Text> </Text>
+          <Text color={colors.textSecondary}>{truncate(displayInput, 60)}</Text>
+        </>
+      )}
     </Box>
   );
 }
 
+interface ToolResultMetadata {
+  title?: string;
+  subtitle?: string;
+  size?: number;
+  statusCode?: number;
+  contentType?: string;
+  duration?: number;
+}
+
 interface ToolResultProps {
   name: string;
   success: boolean;
   output: string;
+  metadata?: ToolResultMetadata;
 }
 
-export function ToolResult({ name, success, output }: ToolResultProps) {
-  const firstLine = output.split('\n')[0]?.trim() || '';
-  const displayOutput = firstLine.length > 50 ? firstLine.slice(0, 47) + '...' : firstLine;
+export function ToolResult({ name, success, output, metadata }: ToolResultProps) {
   const statusColor = success ? colors.success : colors.error;
-  const statusIcon = success ? icons.success : icons.error;
+
+  // 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>
+    );
+  }
+
+  // TodoWrite: Don't show result (TodoList component shows the full list)
+  if (name === 'TodoWrite') {
+    return null;
+  }
+
+  // Default: Show first line of output with status icon
+  const displayOutput = truncate(output.split('\n')[0]?.trim() || '', 60);
 
   return (
     <Box marginLeft={2}>
-      <Text dimColor>
-        <Text color={statusColor}>{statusIcon}</Text> {name}{' '}
-        <Text color={colors.textMuted}>{displayOutput}</Text>
-      </Text>
+      <Text color={colors.textMuted}>{icons.treeEnd}</Text>
+      <Text> </Text>
+      <Text color={statusColor}>{displayOutput || (success ? 'Done' : 'Failed')}</Text>
     </Box>
   );
 }
@@ -150,11 +259,10 @@ interface WelcomeMessageProps {
   model: string;
 }
 
-export function WelcomeMessage({ model }: WelcomeMessageProps) {
+export function WelcomeMessage({ model: _model }: WelcomeMessageProps) {
   return (
     <Box marginTop={1} marginBottom={0}>
-      <Text color={colors.textMuted}>Welcome to </Text>
-      <Text color={colors.brand}>{model}</Text>
+      <Text color={colors.textMuted}>? for help · Ctrl+C to exit</Text>
     </Box>
   );
 }

package/src/cli/components/ModelSelector.tsx

@@ -1,22 +1,26 @@
 /**
- * Model Selector Component - Interactive model selection with fuzzy filter
+ * Model Selector Component - Interactive model selection from cached providers
  */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } 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';
+import { getProviderStore, type ModelInfo } from '../../providers/store.js';
+import { getProvider } from '../../providers/registry.js';
+import type { ProviderName } from '../../providers/index.js';
 
-interface Model {
-  id: string;
-  name: string;
+interface ModelItem {
+  providerId: ProviderName;
+  providerName: string;
+  model: ModelInfo;
 }
 
 interface ModelSelectorProps {
   currentModel: string;
-  onSelect: (modelId: string) => void;
+  onSelect: (modelId: string, providerId: ProviderName) => void;
   onCancel: () => void;
-  listModels: () => Promise<Model[]>;
+  listModels: () => Promise<{ id: string; name: string }[]>; // Fallback for current provider
 }
 
 export function ModelSelector({
@@ -25,32 +29,86 @@ export function ModelSelector({
   onCancel,
   listModels,
 }: ModelSelectorProps) {
-  const [models, setModels] = useState<Model[]>([]);
+  const store = getProviderStore();
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const [filter, setFilter] = useState('');
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [allModels, setAllModels] = useState<ModelItem[]>([]);
 
+  // Load models from cache
   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);
+    const loadModels = async () => {
+      const connectedProviders = store.getConnectedProviders();
+      const items: ModelItem[] = [];
+
+      for (const providerId of connectedProviders) {
+        const cachedModels = store.getModels(providerId);
+        const providerDef = getProvider(providerId);
+        const providerName = providerDef?.name || providerId;
+
+        for (const model of cachedModels) {
+          items.push({
+            providerId,
+            providerName,
+            model,
+          });
+        }
       }
+
+      // If no cached models, fallback to listModels for current provider
+      if (items.length === 0) {
+        try {
+          const models = await listModels();
+          for (const model of models) {
+            items.push({
+              providerId: 'anthropic' as ProviderName, // Default, will be overridden
+              providerName: 'Current Provider',
+              model,
+            });
+          }
+        } catch {
+          // Ignore errors
+        }
+      }
+
+      setAllModels(items);
+      setLoading(false);
     };
-    fetchModels();
-  }, [listModels]);
-
-  // Fuzzy filter models
-  const filtered = models.filter(
-    (m) =>
-      m.id.toLowerCase().includes(filter.toLowerCase()) ||
-      m.name.toLowerCase().includes(filter.toLowerCase())
-  );
+
+    loadModels();
+  }, [store, listModels]);
+
+  // Filter models
+  const filterLower = filter.toLowerCase();
+  const filtered = useMemo(() => {
+    return allModels.filter(
+      (item) =>
+        item.model.id.toLowerCase().includes(filterLower) ||
+        item.model.name.toLowerCase().includes(filterLower) ||
+        item.providerName.toLowerCase().includes(filterLower)
+    );
+  }, [allModels, filterLower]);
+
+  // Group by provider for display
+  const groupedModels = useMemo(() => {
+    const groups: Record<string, ModelItem[]> = {};
+    for (const item of filtered) {
+      if (!groups[item.providerId]) {
+        groups[item.providerId] = [];
+      }
+      groups[item.providerId].push(item);
+    }
+    return groups;
+  }, [filtered]);
+
+  // Flat list for navigation
+  const flatList = useMemo(() => {
+    const items: ModelItem[] = [];
+    for (const providerId of Object.keys(groupedModels)) {
+      items.push(...groupedModels[providerId]);
+    }
+    return items;
+  }, [groupedModels]);
 
   // Reset selection when filter changes
   useEffect(() => {
@@ -62,10 +120,11 @@ export function ModelSelector({
     if (key.upArrow) {
       setSelectedIndex((i) => Math.max(0, i - 1));
     } else if (key.downArrow) {
-      setSelectedIndex((i) => Math.min(filtered.length - 1, i + 1));
+      setSelectedIndex((i) => Math.min(flatList.length - 1, i + 1));
     } else if (key.return) {
-      if (filtered.length > 0) {
-        onSelect(filtered[selectedIndex].id);
+      if (flatList.length > 0) {
+        const selected = flatList[selectedIndex];
+        onSelect(selected.model.id, selected.providerId);
       }
     } else if (key.escape) {
       onCancel();
@@ -81,43 +140,99 @@ export function ModelSelector({
     );
   }
 
-  if (error) {
-    onCancel();
-    return null;
-  }
+  // Count providers and models
+  const providerCount = Object.keys(groupedModels).length;
+  const modelCount = flatList.length;
 
-  const maxVisible = 8;
+  // Calculate visible window
+  const maxVisible = 10;
   const startIndex = Math.max(
     0,
-    Math.min(selectedIndex - Math.floor(maxVisible / 2), filtered.length - maxVisible)
+    Math.min(selectedIndex - Math.floor(maxVisible / 2), flatList.length - maxVisible)
   );
-  const visibleModels = filtered.slice(startIndex, startIndex + maxVisible);
+  const endIndex = Math.min(startIndex + maxVisible, flatList.length);
+
+  // Build visible items with provider headers
+  let currentIdx = 0;
+  const renderItems: Array<{ type: 'header' | 'model'; content: string; item?: ModelItem }> = [];
+
+  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 = 0; i < models.length; i++) {
+        const globalIdx = currentIdx + i;
+        if (globalIdx >= startIndex && globalIdx < endIndex) {
+          renderItems.push({ type: 'model', content: '', item: models[i] });
+        }
+      }
+    }
+
+    currentIdx += models.length;
+  }
 
   return (
     <Box flexDirection="column">
-      <Box>
-        <Text color={colors.primary}>{icons.prompt} </Text>
-        <TextInput
-          value={filter}
-          onChange={setFilter}
-          placeholder="Type to filter models..."
-        />
+      <Text color={colors.primary} bold>
+        Select Model
+      </Text>
+
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>{icons.prompt} </Text>
+        <TextInput value={filter} onChange={setFilter} placeholder="Filter models..." />
       </Box>
+
       <Box flexDirection="column" marginTop={1}>
-        {visibleModels.length === 0 ? (
-          <Text color={colors.textMuted}>No models match "{filter}"</Text>
+        {flatList.length === 0 ? (
+          <Box flexDirection="column">
+            <Text color={colors.textMuted}>No cached models.</Text>
+            <Text color={colors.textMuted}>Use /provider to connect and cache models.</Text>
+          </Box>
         ) : (
-          visibleModels.map((m, i) => {
-            const actualIndex = startIndex + i;
-            const isSelected = actualIndex === selectedIndex;
-            const isCurrent = m.id === currentModel;
+          renderItems.map((renderItem, i) => {
+            if (renderItem.type === 'header') {
+              return (
+                <Text key={`header-${i}`} color={colors.textSecondary}>
+                  {renderItem.content}
+                </Text>
+              );
+            }
+
+            const item = renderItem.item!;
+            const globalIndex = flatList.findIndex(
+              (f) => f.providerId === item.providerId && f.model.id === item.model.id
+            );
+            const isSelected = globalIndex === selectedIndex;
+            const isCurrent = item.model.id === currentModel;
+
             return (
-              <Box key={m.id}>
+              <Box key={`${item.providerId}-${item.model.id}`} paddingLeft={2}>
                 <Text color={isSelected ? colors.primary : colors.textMuted}>
                   {isSelected ? icons.arrow : ' '}
                 </Text>
+                <Text color={isCurrent ? colors.primary : colors.textMuted}>
+                  {isCurrent ? icons.radio : icons.radioEmpty}
+                </Text>
                 <Text color={isSelected ? colors.text : colors.textSecondary} bold={isSelected}>
-                  {m.name}
+                  {' '}{item.model.name || item.model.id}
                 </Text>
                 {isCurrent && <Text color={colors.success}> (current)</Text>}
               </Box>
@@ -125,9 +240,11 @@ export function ModelSelector({
           })
         )}
       </Box>
+
       <Box marginTop={1}>
         <Text color={colors.textMuted}>
-          {filtered.length} models · ↑↓ navigate · Enter select · Esc cancel
+          {providerCount} provider{providerCount !== 1 ? 's' : ''} · {modelCount} model
+          {modelCount !== 1 ? 's' : ''} · ↑↓ navigate · Enter select · Esc cancel
         </Text>
       </Box>
     </Box>