From a53e6cbd2505c2dab5c5e8fd940b75af5584d600 Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Wed, 18 Feb 2026 03:07:42 +0700
Subject: [PATCH] refactor(ui): centralize provider metadata for setup wizard

- define provider display names and descriptions in provider-config

- consume shared metadata helpers in setup wizard constants
---
 ui/src/components/setup/wizard/constants.ts | 23 +++-----
 ui/src/lib/provider-config.ts               | 63 ++++++++++++++++++---
 2 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/setup/wizard/constants.ts b/ui/src/components/setup/wizard/constants.ts
index 26addd28..9fba4e91 100644
--- a/ui/src/components/setup/wizard/constants.ts
+++ b/ui/src/components/setup/wizard/constants.ts
@@ -5,20 +5,11 @@
  */
 
 import type { ProviderOption } from './types';
-import type { CLIProxyProvider } from '@/lib/provider-config';
-
-/** Provider display info for wizard - ordered by recommendation */
-const PROVIDER_INFO: Record<CLIProxyProvider, { name: string; description: string }> = {
-  agy: { name: 'Antigravity', description: 'Antigravity AI models' },
-  claude: { name: 'Claude (Anthropic)', description: 'Claude Opus/Sonnet models' },
-  gemini: { name: 'Google Gemini', description: 'Gemini Pro/Flash models' },
-  codex: { name: 'OpenAI Codex', description: 'GPT-4 and codex models' },
-  qwen: { name: 'Alibaba Qwen', description: 'Qwen Code models' },
-  iflow: { name: 'iFlow', description: 'iFlow AI models' },
-  kiro: { name: 'Kiro (AWS)', description: 'AWS CodeWhisperer models' },
-  ghcp: { name: 'GitHub Copilot (OAuth)', description: 'GitHub Copilot via OAuth' },
-  kimi: { name: 'Kimi (Moonshot)', description: 'Moonshot AI K2/K2.5 models' },
-};
+import {
+  type CLIProxyProvider,
+  getProviderDescription,
+  getProviderDisplayName,
+} from '@/lib/provider-config';
 
 /** Wizard display order - most recommended first */
 const WIZARD_PROVIDER_ORDER: CLIProxyProvider[] = [
@@ -35,8 +26,8 @@ const WIZARD_PROVIDER_ORDER: CLIProxyProvider[] = [
 
 export const PROVIDERS: ProviderOption[] = WIZARD_PROVIDER_ORDER.map((id) => ({
   id,
-  name: PROVIDER_INFO[id].name,
-  description: PROVIDER_INFO[id].description,
+  name: getProviderDisplayName(id),
+  description: getProviderDescription(id) || '',
 }));
 
 export const ALL_STEPS = ['provider', 'auth', 'variant', 'success'];
diff --git a/ui/src/lib/provider-config.ts b/ui/src/lib/provider-config.ts
index cfcf4dbb..eea4f08b 100644
--- a/ui/src/lib/provider-config.ts
+++ b/ui/src/lib/provider-config.ts
@@ -30,6 +30,50 @@ export function isValidProvider(provider: string): provider is CLIProxyProvider
   return CLIPROXY_PROVIDERS.includes(provider as CLIProxyProvider);
 }
 
+interface ProviderMetadata {
+  displayName: string;
+  description: string;
+}
+
+export const PROVIDER_METADATA: Record<CLIProxyProvider, ProviderMetadata> = {
+  agy: {
+    displayName: 'Antigravity',
+    description: 'Antigravity AI models',
+  },
+  claude: {
+    displayName: 'Claude (Anthropic)',
+    description: 'Claude Opus/Sonnet models',
+  },
+  gemini: {
+    displayName: 'Google Gemini',
+    description: 'Gemini Pro/Flash models',
+  },
+  codex: {
+    displayName: 'OpenAI Codex',
+    description: 'GPT-4 and codex models',
+  },
+  qwen: {
+    displayName: 'Alibaba Qwen',
+    description: 'Qwen Code models',
+  },
+  iflow: {
+    displayName: 'iFlow',
+    description: 'iFlow AI models',
+  },
+  kiro: {
+    displayName: 'Kiro (AWS)',
+    description: 'AWS CodeWhisperer models',
+  },
+  ghcp: {
+    displayName: 'GitHub Copilot (OAuth)',
+    description: 'GitHub Copilot via OAuth',
+  },
+  kimi: {
+    displayName: 'Kimi (Moonshot)',
+    description: 'Moonshot AI K2/K2.5 models',
+  },
+};
+
 // Map provider names to asset filenames (only providers with actual logos)
 export const PROVIDER_ASSETS: Record<string, string> = {
   gemini: '/assets/providers/gemini-color.svg',
@@ -59,16 +103,10 @@ export const PROVIDER_COLORS: Record<string, string> = {
 
 // Provider display names
 const PROVIDER_NAMES: Record<string, string> = {
-  gemini: 'Gemini',
-  agy: 'Antigravity',
-  codex: 'Codex',
+  ...Object.fromEntries(
+    CLIPROXY_PROVIDERS.map((provider) => [provider, PROVIDER_METADATA[provider].displayName])
+  ),
   vertex: 'Vertex AI',
-  iflow: 'iFlow',
-  qwen: 'Qwen',
-  kiro: 'Kiro (AWS)',
-  ghcp: 'GitHub Copilot (OAuth)',
-  claude: 'Claude (Anthropic)',
-  kimi: 'Kimi (Moonshot)',
 };
 
 // Map provider to display name
@@ -76,6 +114,13 @@ export function getProviderDisplayName(provider: string): string {
   return PROVIDER_NAMES[provider.toLowerCase()] || provider;
 }
 
+/** Map provider to user-facing short description */
+export function getProviderDescription(provider: string): string | undefined {
+  const normalized = provider.toLowerCase();
+  if (!isValidProvider(normalized)) return undefined;
+  return PROVIDER_METADATA[normalized].description;
+}
+
 /**
  * Providers that use Device Code OAuth flow instead of Authorization Code flow.
  * Device Code flow requires displaying a user code for manual entry at provider's website.