orquesta-cli 0.1.2 → 0.1.4

package/src/ui/components/OpenRouterModelBrowser.tsx

@@ -0,0 +1,365 @@
+/**
+ * OpenRouter Model Browser Component
+ *
+ * Fetches and displays all available OpenRouter models with:
+ * - Search/filter functionality
+ * - Free/Paid badges
+ * - Manual model ID input fallback
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+
+interface OpenRouterModel {
+  id: string;
+  name: string;
+  description?: string;
+  pricing: {
+    prompt: string;
+    completion: string;
+  };
+  context_length: number;
+  top_provider?: {
+    is_moderated: boolean;
+  };
+  architecture?: {
+    modality: string;
+    instruct_type?: string;
+  };
+}
+
+interface OpenRouterModelBrowserProps {
+  onSelect: (model: { id: string; name: string; contextLength: number; isFree: boolean }) => void;
+  onCancel: () => void;
+}
+
+type BrowseMode = 'list' | 'search' | 'manual';
+
+export const OpenRouterModelBrowser: React.FC<OpenRouterModelBrowserProps> = ({
+  onSelect,
+  onCancel,
+}) => {
+  const [mode, setMode] = useState<BrowseMode>('list');
+  const [models, setModels] = useState<OpenRouterModel[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [manualModelId, setManualModelId] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  // Max visible items in the list
+  const MAX_VISIBLE = 10;
+
+  // Fetch models from OpenRouter API
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        const response = await fetch('https://openrouter.ai/api/v1/models');
+        if (!response.ok) {
+          throw new Error(`Failed to fetch models: ${response.status}`);
+        }
+        const data = await response.json() as { data?: OpenRouterModel[] };
+
+        // Sort: free models first, then by name
+        const sortedModels = (data.data || []).sort((a: OpenRouterModel, b: OpenRouterModel) => {
+          const aFree = parseFloat(a.pricing.prompt) === 0 && parseFloat(a.pricing.completion) === 0;
+          const bFree = parseFloat(b.pricing.prompt) === 0 && parseFloat(b.pricing.completion) === 0;
+          if (aFree && !bFree) return -1;
+          if (!aFree && bFree) return 1;
+          return a.name.localeCompare(b.name);
+        });
+
+        setModels(sortedModels);
+        setIsLoading(false);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch models');
+        setIsLoading(false);
+      }
+    };
+
+    fetchModels();
+  }, []);
+
+  // Filter models based on search query
+  const filteredModels = useMemo(() => {
+    if (!searchQuery.trim()) return models;
+
+    const query = searchQuery.toLowerCase();
+    return models.filter(model =>
+      model.id.toLowerCase().includes(query) ||
+      model.name.toLowerCase().includes(query) ||
+      model.description?.toLowerCase().includes(query)
+    );
+  }, [models, searchQuery]);
+
+  // Check if model is free
+  const isFreeModel = (model: OpenRouterModel): boolean => {
+    return parseFloat(model.pricing.prompt) === 0 && parseFloat(model.pricing.completion) === 0;
+  };
+
+  // Format pricing for display
+  const formatPricing = (model: OpenRouterModel): string => {
+    const promptPrice = parseFloat(model.pricing.prompt);
+    const completionPrice = parseFloat(model.pricing.completion);
+
+    if (promptPrice === 0 && completionPrice === 0) {
+      return 'Free';
+    }
+
+    // Price per million tokens
+    const promptPer1M = (promptPrice * 1000000).toFixed(2);
+    return `$${promptPer1M}/1M`;
+  };
+
+  // Handle model selection
+  const handleSelect = () => {
+    if (mode === 'manual') {
+      if (manualModelId.trim()) {
+        onSelect({
+          id: manualModelId.trim(),
+          name: manualModelId.trim(),
+          contextLength: 128000,
+          isFree: false,
+        });
+      }
+    } else {
+      const model = filteredModels[selectedIndex];
+      if (model) {
+        onSelect({
+          id: model.id,
+          name: model.name,
+          contextLength: model.context_length,
+          isFree: isFreeModel(model),
+        });
+      }
+    }
+  };
+
+  // Keyboard handling
+  useInput((_input, key) => {
+    if (key.escape) {
+      if (mode === 'search' || mode === 'manual') {
+        setMode('list');
+        setSearchQuery('');
+        setManualModelId('');
+      } else {
+        onCancel();
+      }
+      return;
+    }
+
+    if (mode === 'list') {
+      if (key.upArrow) {
+        setSelectedIndex((prev) => {
+          const newIndex = prev > 0 ? prev - 1 : filteredModels.length - 1;
+          // Adjust scroll offset
+          if (newIndex < scrollOffset) {
+            setScrollOffset(newIndex);
+          }
+          return newIndex;
+        });
+      } else if (key.downArrow) {
+        setSelectedIndex((prev) => {
+          const newIndex = prev < filteredModels.length - 1 ? prev + 1 : 0;
+          // Adjust scroll offset
+          if (newIndex >= scrollOffset + MAX_VISIBLE) {
+            setScrollOffset(newIndex - MAX_VISIBLE + 1);
+          } else if (newIndex < scrollOffset) {
+            setScrollOffset(0);
+          }
+          return newIndex;
+        });
+      } else if (key.return) {
+        handleSelect();
+      } else if (_input === '/' || _input === 's') {
+        setMode('search');
+        setSelectedIndex(0);
+        setScrollOffset(0);
+      } else if (_input === 'm') {
+        setMode('manual');
+      }
+    } else if (mode === 'search') {
+      if (key.return) {
+        // Apply search and go back to list
+        setMode('list');
+        setSelectedIndex(0);
+        setScrollOffset(0);
+      }
+    } else if (mode === 'manual') {
+      if (key.return) {
+        handleSelect();
+      }
+    }
+  });
+
+  // Update selection when filtered list changes
+  useEffect(() => {
+    if (selectedIndex >= filteredModels.length) {
+      setSelectedIndex(Math.max(0, filteredModels.length - 1));
+    }
+  }, [filteredModels.length, selectedIndex]);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Text color="cyan">
+          <Spinner type="dots" /> Loading OpenRouter models...
+        </Text>
+      </Box>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Text color="red">Error: {error}</Text>
+        <Text color="gray">Press 'm' to enter model ID manually, or Esc to go back</Text>
+      </Box>
+    );
+  }
+
+  // Calculate visible models
+  const visibleModels = filteredModels.slice(scrollOffset, scrollOffset + MAX_VISIBLE);
+
+  return (
+    <Box flexDirection="column">
+      {/* Header */}
+      <Box borderStyle="round" borderColor="magenta" paddingX={2} marginBottom={1}>
+        <Text color="magenta" bold>
+          OpenRouter Models ({filteredModels.length} available)
+        </Text>
+      </Box>
+
+      {/* Search Mode */}
+      {mode === 'search' && (
+        <Box paddingX={1} marginBottom={1}>
+          <Text color="yellow">Search: </Text>
+          <TextInput
+            value={searchQuery}
+            onChange={setSearchQuery}
+            placeholder="Type to filter models..."
+          />
+        </Box>
+      )}
+
+      {/* Manual Mode */}
+      {mode === 'manual' && (
+        <Box flexDirection="column" paddingX={1}>
+          <Text color="yellow" bold>Enter Model ID:</Text>
+          <Box marginY={1}>
+            <Text color="gray">ID: </Text>
+            <TextInput
+              value={manualModelId}
+              onChange={setManualModelId}
+              placeholder="provider/model-name"
+            />
+          </Box>
+          <Text color="gray" dimColor>
+            Example: anthropic/claude-3.5-sonnet, openai/gpt-4-turbo
+          </Text>
+          <Box marginTop={1}>
+            <Text dimColor>Enter: confirm | Esc: back to list</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Model List */}
+      {mode !== 'manual' && (
+        <>
+          {/* Current search filter */}
+          {searchQuery && mode === 'list' && (
+            <Box paddingX={1} marginBottom={1}>
+              <Text color="gray">Filtered by: "{searchQuery}" </Text>
+              <Text color="cyan">(press / to search again)</Text>
+            </Box>
+          )}
+
+          {/* Scroll indicator - top */}
+          {scrollOffset > 0 && (
+            <Box paddingX={1}>
+              <Text color="gray">↑ {scrollOffset} more above</Text>
+            </Box>
+          )}
+
+          {/* Model List */}
+          <Box flexDirection="column" paddingX={1}>
+            {visibleModels.map((model, index) => {
+              const actualIndex = scrollOffset + index;
+              const isSelected = actualIndex === selectedIndex;
+              const isFree = isFreeModel(model);
+
+              return (
+                <Box key={model.id} flexDirection="row">
+                  {/* Selection indicator */}
+                  <Text color={isSelected ? 'cyan' : undefined}>
+                    {isSelected ? '> ' : '  '}
+                  </Text>
+
+                  {/* Free/Paid Badge */}
+                  <Text
+                    color={isFree ? 'green' : 'yellow'}
+                    bold
+                  >
+                    {isFree ? '[FREE] ' : '[PAID] '}
+                  </Text>
+
+                  {/* Model name */}
+                  <Text
+                    color={isSelected ? 'cyan' : 'white'}
+                    bold={isSelected}
+                  >
+                    {model.id}
+                  </Text>
+
+                  {/* Context length */}
+                  <Text color="gray">
+                    {' '}({Math.round(model.context_length / 1000)}k ctx)
+                  </Text>
+
+                  {/* Price */}
+                  {!isFree && (
+                    <Text color="gray" dimColor>
+                      {' '}{formatPricing(model)}
+                    </Text>
+                  )}
+                </Box>
+              );
+            })}
+          </Box>
+
+          {/* Scroll indicator - bottom */}
+          {scrollOffset + MAX_VISIBLE < filteredModels.length && (
+            <Box paddingX={1}>
+              <Text color="gray">↓ {filteredModels.length - scrollOffset - MAX_VISIBLE} more below</Text>
+            </Box>
+          )}
+
+          {/* No results */}
+          {filteredModels.length === 0 && (
+            <Box paddingX={1}>
+              <Text color="yellow">No models match your search.</Text>
+            </Box>
+          )}
+        </>
+      )}
+
+      {/* Footer / Controls */}
+      {mode === 'list' && (
+        <Box marginTop={1} flexDirection="column">
+          <Text dimColor>↑↓: navigate | Enter: select | /: search | m: manual entry | Esc: cancel</Text>
+        </Box>
+      )}
+
+      {mode === 'search' && (
+        <Box marginTop={1}>
+          <Text dimColor>Type to filter | Enter: apply | Esc: clear search</Text>
+        </Box>
+      )}
+    </Box>
+  );
+};