fix: constrain provider list viewport

Author: Numman Ali

README.md

@@ -149,7 +149,7 @@ Want to use different models? CC-MIRROR supports multiple providers:
 | **Ollama**     | Local + cloud models   | Auth Token | Local-first + hybrid setups     |
 | **GatewayZ**   | Multi-provider gateway | Auth Token | Centralized routing             |
 | **Vercel**     | Multi-provider gateway | Auth Token | Vercel AI Gateway               |
-| **NanoGPT**    | Anthropic-compatible   | Auth Token | Simple Anthropic compat         |
+| **NanoGPT**    | Claude Code endpoint   | Auth Token | Simple endpoint setup           |
 
 ```bash
 # Z.ai (GLM Coding Plan)
@@ -165,19 +165,19 @@ npx cc-mirror quick --provider openrouter --api-key "$OPENROUTER_API_KEY" \
 # Claude Code Router (local LLMs)
 npx cc-mirror quick --provider ccrouter
 
-# Ollama (Anthropic-compatible)
+# Ollama
 npx cc-mirror quick --provider ollama --api-key "ollama" \
   --model-sonnet "qwen3-coder" --model-opus "qwen3-coder" --model-haiku "qwen3-coder"
 
-# GatewayZ (Anthropic-compatible gateway)
+# GatewayZ
 npx cc-mirror quick --provider gatewayz --api-key "$GATEWAYZ_API_KEY" \
   --model-sonnet "claude-3-5-sonnet-20241022"
 
 # Vercel AI Gateway
 npx cc-mirror quick --provider vercel --api-key "$VERCEL_AI_GATEWAY_KEY" \
   --model-sonnet "anthropic/claude-3-5-sonnet-20241022"
 
-# NanoGPT (Anthropic-compatible)
+# NanoGPT
 npx cc-mirror quick --provider nanogpt --api-key "$NANOGPT_API_KEY"
 ```
 

src/cli/help.ts

@@ -61,7 +61,7 @@ PROVIDERS
   ollama        Local + cloud models via Ollama
   gatewayz      GatewayZ AI Gateway
   vercel        Vercel AI Gateway
-  nanogpt       NanoGPT Anthropic-compatible
+  nanogpt       NanoGPT
 
 EXAMPLES
   npx cc-mirror quick --provider mirror --name mclaude

src/providers/index.ts

@@ -22,7 +22,7 @@ export interface ProviderTemplate {
   noPromptPack?: boolean;
   /** Require empty ANTHROPIC_API_KEY (for authToken providers like Vercel AI Gateway) */
   requiresEmptyApiKey?: boolean;
-  /** Keep ANTHROPIC_API_KEY alongside auth token (e.g., Ollama Anthropic compatibility) */
+  /** Keep ANTHROPIC_API_KEY alongside auth token (e.g., Ollama compatibility) */
   authTokenAlsoSetsApiKey?: boolean;
 }
 
@@ -141,7 +141,7 @@ const PROVIDERS: Record<string, ProviderTemplate> = {
   gatewayz: {
     key: 'gatewayz',
     label: 'GatewayZ',
-    description: 'GatewayZ AI Gateway (Anthropic-compatible)',
+    description: 'GatewayZ AI Gateway',
     baseUrl: 'https://api.gatewayz.ai',
     env: {
       API_TIMEOUT_MS: DEFAULT_TIMEOUT_MS,
@@ -156,7 +156,7 @@ const PROVIDERS: Record<string, ProviderTemplate> = {
   vercel: {
     key: 'vercel',
     label: 'Vercel AI Gateway',
-    description: 'Vercel AI Gateway (Anthropic-compatible)',
+    description: 'Vercel AI Gateway',
     baseUrl: 'https://ai-gateway.vercel.sh',
     env: {
       API_TIMEOUT_MS: DEFAULT_TIMEOUT_MS,
@@ -172,7 +172,7 @@ const PROVIDERS: Record<string, ProviderTemplate> = {
   nanogpt: {
     key: 'nanogpt',
     label: 'NanoGPT',
-    description: 'NanoGPT Anthropic-compatible endpoint',
+    description: 'NanoGPT endpoint',
     baseUrl: 'https://nano-gpt.com/api',
     env: {
       API_TIMEOUT_MS: DEFAULT_TIMEOUT_MS,

src/tui/components/ui/Menu.tsx

@@ -110,12 +110,19 @@ interface ProviderCardProps {
   selected: boolean;
   disabled?: boolean;
   docsUrl?: string;
+  showDetails?: boolean;
 }
 
 /**
  * Provider selection card
  */
-export const ProviderCard: React.FC<ProviderCardProps> = ({ provider, selected, disabled = false, docsUrl }) => (
+export const ProviderCard: React.FC<ProviderCardProps> = ({
+  provider,
+  selected,
+  disabled = false,
+  docsUrl,
+  showDetails = true,
+}) => (
   <Box flexDirection="column" marginBottom={1}>
     <Box>
       <Text color={selected ? colors.gold : colors.textMuted}>{selected ? icons.pointer : icons.pointerEmpty} </Text>
@@ -133,14 +140,14 @@ export const ProviderCard: React.FC<ProviderCardProps> = ({ provider, selected,
         {provider.description}
       </Text>
     </Box>
-    {provider.baseUrl && !disabled && (
+    {showDetails && provider.baseUrl && !disabled && (
       <Box marginLeft={3}>
         <Text color={colors.primaryBright} dimColor>
           {provider.baseUrl}
         </Text>
       </Box>
     )}
-    {!provider.baseUrl && docsUrl && !disabled && (
+    {showDetails && !provider.baseUrl && docsUrl && !disabled && (
       <Box marginLeft={3}>
         <Text color={colors.primaryBright} dimColor>
           {docsUrl}

src/tui/content/providers.ts

@@ -141,7 +141,7 @@ export const PROVIDER_EDUCATION: Record<string, ProviderEducation> = {
     headline: 'GatewayZ — AI Gateway',
     tagline: 'One gateway, many providers',
     features: [
-      'Anthropic-compatible endpoint',
+      'Claude Code endpoint support',
       'Single API key for multiple providers',
       'Gateway-style routing',
       'Violet-themed interface',
@@ -154,13 +154,13 @@ export const PROVIDER_EDUCATION: Record<string, ProviderEducation> = {
       apiKey: 'https://gatewayz.ai',
       docs: 'https://docs.gatewayz.ai/docs/anthropic-compatibility',
     },
-    setupNote: 'GatewayZ uses Anthropic-compatible endpoints. Configure model mapping for your preferred models.',
+    setupNote: 'GatewayZ uses Claude Code endpoints. Configure model mapping for your preferred models.',
   },
   vercel: {
     headline: 'Vercel AI Gateway',
     tagline: 'Unified AI routing on Vercel',
     features: [
-      'Anthropic-compatible endpoint',
+      'Claude Code endpoint support',
       'Use provider/model identifiers',
       'Centralized usage + billing',
       'Monochrome + green accents',
@@ -176,10 +176,10 @@ export const PROVIDER_EDUCATION: Record<string, ProviderEducation> = {
     setupNote: 'Set ANTHROPIC_AUTH_TOKEN and keep ANTHROPIC_API_KEY empty.',
   },
   nanogpt: {
-    headline: 'NanoGPT — Anthropic Compatible',
+    headline: 'NanoGPT',
     tagline: 'Lean gateway, fast setup',
-    features: ['Anthropic-compatible endpoint', 'Simple API key auth', 'Neon-themed interface'],
-    bestFor: 'Simple Anthropic-compatible usage with minimal setup',
+    features: ['Claude Code endpoint support', 'Simple API key auth', 'Neon-themed interface'],
+    bestFor: 'Simple Claude Code usage with minimal setup',
     requiresMapping: false,
     hasPromptPack: false,
     setupLinks: {

src/tui/screens/ProviderSelectScreen.tsx

@@ -25,6 +25,7 @@ interface ProviderSelectScreenProps {
 export const ProviderSelectScreen: React.FC<ProviderSelectScreenProps> = ({ providers, onSelect }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [showDetails, setShowDetails] = useState(false);
+  const maxVisible = 6;
 
   // Get current selected provider and its education
   const currentProvider = providers[selectedIndex];
@@ -60,6 +61,23 @@ export const ProviderSelectScreen: React.FC<ProviderSelectScreenProps> = ({ prov
     }
   });
 
+  const getVisibleRange = (total: number, selected: number) => {
+    const half = Math.floor(maxVisible / 2);
+    let start = Math.max(0, selected - half);
+    const end = Math.min(total, start + maxVisible);
+    if (end - start < maxVisible) {
+      start = Math.max(0, end - maxVisible);
+    }
+    return { start, end };
+  };
+
+  const { start, end } = getVisibleRange(providers.length, selectedIndex);
+  const visibleProviders = providers.slice(start, end);
+  const hasAbove = start > 0;
+  const hasBelow = end < providers.length;
+  const aboveCount = start;
+  const belowCount = providers.length - end;
+
   return (
     <ScreenLayout
       title="Select Provider"
@@ -77,19 +95,31 @@ export const ProviderSelectScreen: React.FC<ProviderSelectScreenProps> = ({ prov
       </Box>
 
       <Box flexDirection="column" marginY={1}>
-        {providers.map((provider, idx) => {
+        {hasAbove && (
+          <Text color={colors.textDim}>
+            {icons.arrowUp} {aboveCount} more above
+          </Text>
+        )}
+        {visibleProviders.map((provider, idx) => {
+          const absoluteIndex = start + idx;
           const providerEducation = getProviderEducation(provider.key);
           const docsUrl = providerEducation?.setupLinks?.docs;
           return (
             <ProviderCard
               key={provider.key}
               provider={provider}
-              selected={idx === selectedIndex && !provider.experimental}
+              selected={absoluteIndex === selectedIndex && !provider.experimental}
               disabled={provider.experimental}
               docsUrl={docsUrl}
+              showDetails={absoluteIndex === selectedIndex}
             />
           );
         })}
+        {hasBelow && (
+          <Text color={colors.textDim}>
+            {icons.arrowDown} {belowCount} more below
+          </Text>
+        )}
       </Box>
 
       {/* Details panel - shows when ? is pressed */}