gencode-ai 0.1.0 → 0.1.1

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[] {
@@ -36,7 +43,7 @@ export function UserMessage({ text }: UserMessageProps) {
       {lines.map((line, i) => (
         <Box key={i}>
           <Text color={colors.brand}>{icons.userPrompt} </Text>
-          <Text backgroundColor="#1E293B" color={colors.text}> {line} </Text>
+          <Text backgroundColor={colors.inputBg} color={colors.text}> {line} </Text>
         </Box>
       ))}
     </Box>
@@ -51,29 +58,39 @@ 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);
+
+    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>
+    );
+  }
 
-  // Wrap text to terminal width
-  const lines = wrapText(text.trimEnd(), contentWidth);
+  // 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>{rendered}</Text>
+      </Box>
     </Box>
   );
 }
@@ -84,11 +101,24 @@ interface ToolCallProps {
 }
 
 export function ToolCall({ name, input }: ToolCallProps) {
-  const inputStr = JSON.stringify(input);
-  const shortInput = inputStr.length > 50 ? inputStr.slice(0, 47) + '...' : inputStr;
+  // WebFetch: Show "Fetch(url)" instead of JSON (Claude Code style)
+  if (name === 'WebFetch' && input?.url) {
+    const shortUrl = truncate(input.url as string, 60);
+    return (
+      <Box marginTop={1}>
+        <Text color={colors.tool}>{icons.fetch}</Text>
+        <Text> Fetch(</Text>
+        <Text color={colors.info}>{shortUrl}</Text>
+        <Text>)</Text>
+      </Box>
+    );
+  }
+
+  // Default: Show tool name with JSON input
+  const shortInput = truncate(JSON.stringify(input), 50);
 
   return (
-    <Box marginLeft={2}>
+    <Box marginTop={1}>
       <Text dimColor>
         <Text color={colors.tool}>{icons.tool}</Text> {name}{' '}
         <Text color={colors.textMuted}>{shortInput}</Text>
@@ -97,23 +127,81 @@ export function ToolCall({ name, input }: ToolCallProps) {
   );
 }
 
+// Pending tool call with spinning indicator
+interface PendingToolCallProps {
+  name: string;
+  input: Record<string, unknown>;
+}
+
+export function PendingToolCall({ name, input }: PendingToolCallProps) {
+  // WebFetch: Show "Fetch(url)" with spinner
+  if (name === 'WebFetch' && input?.url) {
+    const shortUrl = truncate(input.url as string, 60);
+    return (
+      <Box marginTop={1}>
+        <Text color={colors.tool}>
+          <InkSpinner type="dots" />
+        </Text>
+        <Text> Fetch(</Text>
+        <Text color={colors.info}>{shortUrl}</Text>
+        <Text>)</Text>
+      </Box>
+    );
+  }
+
+  // Default: Show tool name with spinner
+  const shortInput = truncate(JSON.stringify(input), 50);
+
+  return (
+    <Box marginTop={1}>
+      <Text color={colors.tool}>
+        <InkSpinner type="dots" />
+      </Text>
+      <Text> {name} </Text>
+      <Text color={colors.textMuted}>{shortInput}</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 dimColor>
+          <Text>{icons.treeEnd}</Text>{' '}
+          <Text color={statusColor}>{metadata.subtitle}</Text>
+        </Text>
+      </Box>
+    );
+  }
+
+  // Default: Show first line of output
+  const displayOutput = truncate(output.split('\n')[0]?.trim() || '', 50);
 
   return (
     <Box marginLeft={2}>
       <Text dimColor>
-        <Text color={statusColor}>{statusIcon}</Text> {name}{' '}
-        <Text color={colors.textMuted}>{displayOutput}</Text>
+        <Text>{icons.treeEnd}</Text> {name}{' '}
+        <Text color={statusColor}>{displayOutput}</Text>
       </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>