refactor(ui): centralize provider list in provider-config.ts (DRY)

- Add CLIPROXY_PROVIDERS array as single source of truth for UI
- Add CLIProxyProvider type and isValidProvider() helper
- Update api-client.ts to use CLIProxyProvider type
- Update cliproxy-dialog.tsx to import from provider-config
- Update cliproxy-header.tsx to use CLIPROXY_PROVIDERS
- Update use-cliproxy-auth-flow.ts to use isValidProvider()
- Update wizard constants to use typed provider info

Adding a new provider now only requires updating:
- Backend: src/auth/profile-detector.ts (CLIPROXY_PROFILES)
- UI: ui/src/lib/provider-config.ts (CLIPROXY_PROVIDERS)
- UI wizard: ui/src/components/setup/wizard/constants.ts (PROVIDER_INFO)

ui/src/components/cliproxy/cliproxy-dialog.tsx

@@ -13,15 +13,14 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useCreateVariant, useCliproxyAuth } from '@/hooks/use-cliproxy';
 import { usePrivacy } from '@/contexts/privacy-context';
-
-const providers = ['gemini', 'codex', 'agy', 'qwen', 'iflow', 'kiro', 'ghcp', 'claude'] as const;
+import { CLIPROXY_PROVIDERS, getProviderDisplayName } from '@/lib/provider-config';
 
 const schema = z.object({
   name: z
     .string()
     .min(1, 'Name is required')
     .regex(/^[a-zA-Z][a-zA-Z0-9._-]*$/, 'Invalid variant name'),
-  provider: z.enum(providers, { message: 'Provider is required' }),
+  provider: z.enum(CLIPROXY_PROVIDERS, { message: 'Provider is required' }),
   model: z.string().optional(),
   account: z.string().optional(),
 });
@@ -33,16 +32,10 @@ interface CliproxyDialogProps {
   onClose: () => void;
 }
 
-const providerOptions = [
-  { value: 'gemini', label: 'Google Gemini' },
-  { value: 'codex', label: 'OpenAI Codex' },
-  { value: 'agy', label: 'Antigravity' },
-  { value: 'qwen', label: 'Alibaba Qwen' },
-  { value: 'iflow', label: 'iFlow' },
-  { value: 'kiro', label: 'Kiro (AWS)' },
-  { value: 'ghcp', label: 'GitHub Copilot (OAuth)' },
-  { value: 'claude', label: 'Claude (Anthropic)' },
-];
+const providerOptions = CLIPROXY_PROVIDERS.map((id) => ({
+  value: id,
+  label: getProviderDisplayName(id),
+}));
 
 export function CliproxyDialog({ open, onClose }: CliproxyDialogProps) {
   const createMutation = useCreateVariant();

ui/src/components/cliproxy/cliproxy-header.tsx

@@ -10,6 +10,7 @@ import { RefreshCw, Loader2, AlertTriangle } from 'lucide-react';
 import { useCliproxyAuth } from '@/hooks/use-cliproxy';
 import { useCliproxyAuthFlow } from '@/hooks/use-cliproxy-auth-flow';
 import { cn } from '@/lib/utils';
+import { CLIPROXY_PROVIDERS, getProviderDisplayName } from '@/lib/provider-config';
 
 interface VersionInfo {
   currentVersion: string;
@@ -135,16 +136,10 @@ export function CliproxyHeader({
       .catch(() => {}); // Silently fail
   }, []);
 
-  const providers = [
-    { id: 'claude', displayName: 'Claude' },
-    { id: 'gemini', displayName: 'Gemini' },
-    { id: 'codex', displayName: 'Codex' },
-    { id: 'agy', displayName: 'Agy' },
-    { id: 'qwen', displayName: 'Qwen' },
-    { id: 'iflow', displayName: 'iFlow' },
-    { id: 'kiro', displayName: 'Kiro' },
-    { id: 'ghcp', displayName: 'GitHub Copilot' },
-  ];
+  const providers = CLIPROXY_PROVIDERS.map((id) => ({
+    id,
+    displayName: getProviderDisplayName(id),
+  }));
 
   const getProviderStatus = (providerId: string) => {
     const status = authData?.authStatus.find((s) => s.provider === providerId);

ui/src/components/setup/wizard/constants.ts

@@ -1,20 +1,42 @@
 /**
  * Constants for Quick Setup Wizard
+ * Provider display info with custom ordering for wizard UI.
+ * Provider IDs must match CLIPROXY_PROVIDERS from provider-config.ts
  */
 
 import type { ProviderOption } from './types';
+import type { CLIProxyProvider } from '@/lib/provider-config';
 
-export const PROVIDERS: ProviderOption[] = [
-  { id: 'agy', name: 'Antigravity', description: 'Antigravity AI models' },
-  { id: 'claude', name: 'Claude (Anthropic)', description: 'Claude Opus/Sonnet models' },
-  { id: 'gemini', name: 'Google Gemini', description: 'Gemini Pro/Flash models' },
-  { id: 'codex', name: 'OpenAI Codex', description: 'GPT-4 and codex models' },
-  { id: 'qwen', name: 'Alibaba Qwen', description: 'Qwen Code models' },
-  { id: 'iflow', name: 'iFlow', description: 'iFlow AI models' },
-  { id: 'kiro', name: 'Kiro (AWS)', description: 'AWS CodeWhisperer models' },
-  { id: 'ghcp', name: 'GitHub Copilot (OAuth)', description: 'GitHub Copilot via OAuth' },
+/** 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' },
+};
+
+/** Wizard display order - most recommended first */
+const WIZARD_PROVIDER_ORDER: CLIProxyProvider[] = [
+  'agy',
+  'claude',
+  'gemini',
+  'codex',
+  'qwen',
+  'iflow',
+  'kiro',
+  'ghcp',
 ];
 
+export const PROVIDERS: ProviderOption[] = WIZARD_PROVIDER_ORDER.map((id) => ({
+  id,
+  name: PROVIDER_INFO[id].name,
+  description: PROVIDER_INFO[id].description,
+}));
+
 export const ALL_STEPS = ['provider', 'auth', 'variant', 'success'];
 
 export function getStepProgress(step: string): number {

ui/src/components/setup/wizard/index.tsx

@@ -22,6 +22,7 @@ import {
   useCancelAuth,
 } from '@/hooks/use-cliproxy';
 import type { AuthStatus, OAuthAccount } from '@/lib/api-client';
+import type { CLIProxyProvider } from '@/lib/provider-config';
 import { applyDefaultPreset } from '@/lib/preset-utils';
 import { usePrivacy } from '@/contexts/privacy-context';
 import { toast } from 'sonner';
@@ -136,15 +137,7 @@ export function QuickSetupWizard({ open, onClose }: QuickSetupWizardProps) {
     try {
       await createMutation.mutateAsync({
         name: variantName,
-        provider: selectedProvider as
-          | 'gemini'
-          | 'codex'
-          | 'agy'
-          | 'qwen'
-          | 'iflow'
-          | 'kiro'
-          | 'ghcp'
-          | 'claude',
+        provider: selectedProvider as CLIProxyProvider,
         model: modelName || undefined,
         account: selectedAccount?.id,
       });

ui/src/hooks/use-cliproxy-auth-flow.ts

@@ -7,6 +7,7 @@ import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { api } from '@/lib/api-client';
+import { isValidProvider } from '@/lib/provider-config';
 
 interface AuthFlowState {
   provider: string | null;
@@ -14,8 +15,6 @@ interface AuthFlowState {
   error: string | null;
 }
 
-const VALID_PROVIDERS = ['gemini', 'codex', 'agy', 'qwen', 'iflow', 'kiro', 'ghcp', 'claude'];
-
 export function useCliproxyAuthFlow() {
   const [state, setState] = useState<AuthFlowState>({
     provider: null,
@@ -35,7 +34,7 @@ export function useCliproxyAuthFlow() {
 
   const startAuth = useCallback(
     async (provider: string) => {
-      if (!VALID_PROVIDERS.includes(provider)) {
+      if (!isValidProvider(provider)) {
         setState({
           provider: null,
           isAuthenticating: false,

ui/src/lib/api-client.ts

@@ -3,6 +3,8 @@
  * Phase 03: REST API Routes & CRUD
  */
 
+import type { CLIProxyProvider } from './provider-config';
+
 const BASE_URL = '/api';
 
 async function request<T>(url: string, options?: RequestInit): Promise<T> {
@@ -47,7 +49,7 @@ export interface UpdateProfile {
 
 export interface Variant {
   name: string;
-  provider: 'gemini' | 'codex' | 'agy' | 'qwen' | 'iflow' | 'kiro' | 'ghcp' | 'claude';
+  provider: CLIProxyProvider;
   settings: string;
   account?: string;
   port?: number;
@@ -56,13 +58,13 @@ export interface Variant {
 
 export interface CreateVariant {
   name: string;
-  provider: 'gemini' | 'codex' | 'agy' | 'qwen' | 'iflow' | 'kiro' | 'ghcp' | 'claude';
+  provider: CLIProxyProvider;
   model?: string;
   account?: string;
 }
 
 export interface UpdateVariant {
-  provider?: 'gemini' | 'codex' | 'agy' | 'qwen' | 'iflow' | 'kiro' | 'ghcp' | 'claude';
+  provider?: CLIProxyProvider;
   model?: string;
   account?: string;
 }
@@ -72,7 +74,7 @@ export interface OAuthAccount {
   id: string;
   email?: string;
   nickname?: string;
-  provider: 'gemini' | 'codex' | 'agy' | 'qwen' | 'iflow' | 'kiro' | 'ghcp' | 'claude';
+  provider: CLIProxyProvider;
   isDefault: boolean;
   tokenFile: string;
   createdAt: string;

ui/src/lib/provider-config.ts

@@ -1,8 +1,34 @@
 /**
  * Provider Configuration
- * Shared constants for provider branding and assets
+ * Shared constants for CLIProxy providers - SINGLE SOURCE OF TRUTH for UI
+ *
+ * When adding a new provider, update CLIPROXY_PROVIDERS array and related mappings.
  */
 
+/**
+ * Canonical list of CLIProxy provider IDs
+ * This is the UI's single source of truth for valid providers.
+ * Must stay in sync with backend's CLIPROXY_PROFILES in src/auth/profile-detector.ts
+ */
+export const CLIPROXY_PROVIDERS = [
+  'gemini',
+  'codex',
+  'agy',
+  'qwen',
+  'iflow',
+  'kiro',
+  'ghcp',
+  'claude',
+] as const;
+
+/** Union type for CLIProxy provider IDs */
+export type CLIProxyProvider = (typeof CLIPROXY_PROVIDERS)[number];
+
+/** Check if a string is a valid CLIProxy provider */
+export function isValidProvider(provider: string): provider is CLIProxyProvider {
+  return CLIPROXY_PROVIDERS.includes(provider as CLIProxyProvider);
+}
+
 // Map provider names to asset filenames (only providers with actual logos)
 export const PROVIDER_ASSETS: Record<string, string> = {
   gemini: '/assets/providers/gemini-color.svg',