From 80beb1dadafff283c713d8a7ae556e06a7935882 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 18:29:44 -0500 Subject: [PATCH 01/25] feat(ui): add OpenRouter model catalog core infrastructure - add openrouter-types.ts with API type definitions - add openrouter-utils.ts with search, pricing, caching utils - add use-openrouter-models.ts React Query hook with 24h cache - copy openrouter.svg icon to public/icons/ --- ui/public/icons/openrouter.svg | 1 + ui/src/hooks/use-openrouter-models.ts | 77 +++++++++++ ui/src/lib/openrouter-types.ts | 71 +++++++++++ ui/src/lib/openrouter-utils.ts | 176 ++++++++++++++++++++++++++ 4 files changed, 325 insertions(+) create mode 100644 ui/public/icons/openrouter.svg create mode 100644 ui/src/hooks/use-openrouter-models.ts create mode 100644 ui/src/lib/openrouter-types.ts create mode 100644 ui/src/lib/openrouter-utils.ts diff --git a/ui/public/icons/openrouter.svg b/ui/public/icons/openrouter.svg new file mode 100644 index 00000000..e6cca2a8 --- /dev/null +++ b/ui/public/icons/openrouter.svg @@ -0,0 +1 @@ +OpenRouter \ No newline at end of file diff --git a/ui/src/hooks/use-openrouter-models.ts b/ui/src/hooks/use-openrouter-models.ts new file mode 100644 index 00000000..706987c6 --- /dev/null +++ b/ui/src/hooks/use-openrouter-models.ts @@ -0,0 +1,77 @@ +/** + * OpenRouter Models Hook + * Fetches and caches OpenRouter model catalog + */ + +import { useQuery, useQueryClient } from '@tanstack/react-query'; +import type { OpenRouterModel, CategorizedModel } from '@/lib/openrouter-types'; +import { + getCachedModels, + setCachedModels, + clearCachedModels, + enrichModel, +} from '@/lib/openrouter-utils'; + +const OPENROUTER_MODELS_URL = 'https://openrouter.ai/api/v1/models'; +const QUERY_KEY = ['openrouter-models']; +const STALE_TIME = 24 * 60 * 60 * 1000; // 24 hours + +async function fetchOpenRouterModels(): Promise { + const response = await fetch(OPENROUTER_MODELS_URL); + if (!response.ok) { + throw new Error(`Failed to fetch OpenRouter models: ${response.status}`); + } + const data = (await response.json()) as { data: OpenRouterModel[] }; + const models = data.data; + + // Cache for offline use + setCachedModels(models); + + return models; +} + +export function useOpenRouterModels() { + return useQuery({ + queryKey: QUERY_KEY, + queryFn: fetchOpenRouterModels, + staleTime: STALE_TIME, + gcTime: STALE_TIME, + // Use cached data as initial data (instant display) + initialData: () => getCachedModels() ?? undefined, + // Don't refetch on window focus for this heavy payload + refetchOnWindowFocus: false, + }); +} + +/** Get enriched models with categories and pricing */ +export function useOpenRouterCatalog() { + const query = useOpenRouterModels(); + + const enrichedModels: CategorizedModel[] = (query.data ?? []).map(enrichModel); + + return { + ...query, + models: enrichedModels, + }; +} + +/** Force refresh hook */ +export function useRefreshOpenRouterModels() { + const queryClient = useQueryClient(); + + return () => { + clearCachedModels(); + return queryClient.invalidateQueries({ queryKey: QUERY_KEY }); + }; +} + +/** Check if OpenRouter catalog is loaded */ +export function useOpenRouterReady() { + const { data, isLoading, isError } = useOpenRouterModels(); + return { + isReady: !!data && data.length > 0, + isLoading, + isError, + modelCount: data?.length ?? 0, + }; +} diff --git a/ui/src/lib/openrouter-types.ts b/ui/src/lib/openrouter-types.ts new file mode 100644 index 00000000..a46266f5 --- /dev/null +++ b/ui/src/lib/openrouter-types.ts @@ -0,0 +1,71 @@ +/** + * OpenRouter Model Catalog Types + * Based on https://openrouter.ai/docs/api-reference/list-available-models + */ + +export interface OpenRouterPricing { + prompt: string; // USD per token, e.g., "0.000003" + completion: string; + request: string; + image: string; + audio?: string; + web_search?: string; + internal_reasoning?: string; + input_cache_read?: string; +} + +export interface OpenRouterArchitecture { + modality: string; // "text+image->text" + input_modalities: string[]; // ["text", "image"] + output_modalities: string[]; // ["text"] + tokenizer: string; // "GPT", "Claude", "Gemini" + instruct_type: string | null; +} + +export interface OpenRouterTopProvider { + context_length: number; + max_completion_tokens: number | null; + is_moderated: boolean; +} + +export interface OpenRouterModel { + id: string; // "anthropic/claude-sonnet-4" + name: string; // "Anthropic: Claude Sonnet 4" + canonical_slug: string; + hugging_face_id: string | null; + description: string; + context_length: number; + architecture: OpenRouterArchitecture; + pricing: OpenRouterPricing; + top_provider: OpenRouterTopProvider; + supported_parameters: string[]; + per_request_limits: Record | null; +} + +export interface OpenRouterModelsResponse { + data: OpenRouterModel[]; +} + +export interface OpenRouterCatalogCache { + models: OpenRouterModel[]; + fetchedAt: number; + version: string; +} + +/** Model category for grouping */ +export type ModelCategory = + | 'anthropic' + | 'openai' + | 'google' + | 'meta' + | 'mistral' + | 'opensource' + | 'other'; + +/** Categorized model for UI display */ +export interface CategorizedModel extends OpenRouterModel { + category: ModelCategory; + pricePerMillionPrompt: number; + pricePerMillionCompletion: number; + isFree: boolean; +} diff --git a/ui/src/lib/openrouter-utils.ts b/ui/src/lib/openrouter-utils.ts new file mode 100644 index 00000000..38726714 --- /dev/null +++ b/ui/src/lib/openrouter-utils.ts @@ -0,0 +1,176 @@ +/** + * OpenRouter Model Catalog Utilities + * Search, filter, pricing, and categorization + */ + +import type { OpenRouterModel, CategorizedModel, ModelCategory } from './openrouter-types'; + +const CACHE_KEY = 'ccs:openrouter-models'; +const CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours +const CACHE_VERSION = '1'; + +/** Convert per-token price to per-million */ +export function pricePerMillion(perToken: string): number { + const value = parseFloat(perToken); + if (isNaN(value) || value === 0) return 0; + return value * 1_000_000; +} + +/** Format price for display */ +export function formatPrice(perToken: string): string { + const perMillion = pricePerMillion(perToken); + if (perMillion === 0) return 'Free'; + if (perMillion < 0.01) return '<$0.01'; + if (perMillion < 1) return `$${perMillion.toFixed(2)}`; + return `$${perMillion.toFixed(perMillion < 10 ? 2 : 0)}`; +} + +/** Format pricing pair (prompt/completion) */ +export function formatPricingPair(pricing: { prompt: string; completion: string }): string { + const promptPrice = formatPrice(pricing.prompt); + const completionPrice = formatPrice(pricing.completion); + if (promptPrice === 'Free' && completionPrice === 'Free') return 'Free'; + return `${promptPrice}/${completionPrice}`; +} + +/** Categorize model by provider */ +export function categorizeModel(model: OpenRouterModel): ModelCategory { + const id = model.id.toLowerCase(); + if (id.startsWith('anthropic/')) return 'anthropic'; + if (id.startsWith('openai/')) return 'openai'; + if (id.startsWith('google/')) return 'google'; + if (id.startsWith('meta-llama/') || id.startsWith('meta/')) return 'meta'; + if (id.startsWith('mistralai/')) return 'mistral'; + // Open source indicators + if (id.includes(':free') || id.includes('qwen') || id.includes('deepseek')) return 'opensource'; + return 'other'; +} + +/** Enrich model with computed fields */ +export function enrichModel(model: OpenRouterModel): CategorizedModel { + return { + ...model, + category: categorizeModel(model), + pricePerMillionPrompt: pricePerMillion(model.pricing.prompt), + pricePerMillionCompletion: pricePerMillion(model.pricing.completion), + isFree: model.pricing.prompt === '0' && model.pricing.completion === '0', + }; +} + +/** Search models by query */ +export function searchModels( + models: CategorizedModel[], + query: string, + filters?: { + category?: ModelCategory; + freeOnly?: boolean; + minContext?: number; + } +): CategorizedModel[] { + const q = query.toLowerCase().trim(); + + return models.filter((model) => { + // Apply filters + if (filters?.category && model.category !== filters.category) return false; + if (filters?.freeOnly && !model.isFree) return false; + if (filters?.minContext && model.context_length < filters.minContext) return false; + + // Search query + if (!q) return true; + return ( + model.id.toLowerCase().includes(q) || + model.name.toLowerCase().includes(q) || + model.description?.toLowerCase().includes(q) + ); + }); +} + +/** Get cached models from localStorage */ +export function getCachedModels(): OpenRouterModel[] | null { + try { + const cached = localStorage.getItem(CACHE_KEY); + if (!cached) return null; + + const data = JSON.parse(cached) as { + models: OpenRouterModel[]; + fetchedAt: number; + version: string; + }; + + // Check version + if (data.version !== CACHE_VERSION) return null; + + // Check TTL + if (Date.now() - data.fetchedAt > CACHE_TTL_MS) return null; + + return data.models; + } catch { + return null; + } +} + +/** Save models to localStorage cache */ +export function setCachedModels(models: OpenRouterModel[]): void { + try { + localStorage.setItem( + CACHE_KEY, + JSON.stringify({ + models, + fetchedAt: Date.now(), + version: CACHE_VERSION, + }) + ); + } catch { + // Storage full or unavailable, ignore + } +} + +/** Clear cached models */ +export function clearCachedModels(): void { + localStorage.removeItem(CACHE_KEY); +} + +/** Suggest tier mappings based on selected model */ +export function suggestTierMappings( + selectedModelId: string, + allModels: CategorizedModel[] +): { opus?: string; sonnet?: string; haiku?: string } { + // Extract provider prefix + const [provider] = selectedModelId.split('/'); + if (!provider) return {}; + + const providerModels = allModels.filter((m) => m.id.startsWith(`${provider}/`)); + if (providerModels.length === 0) return {}; + + // Sort by price (expensive = opus, mid = sonnet, cheap = haiku) + const sorted = [...providerModels].sort( + (a, b) => b.pricePerMillionPrompt - a.pricePerMillionPrompt + ); + + // Simple heuristic: top 1/3 = opus, middle = sonnet, bottom = haiku + const third = Math.ceil(sorted.length / 3); + + return { + opus: sorted[0]?.id, + sonnet: sorted[Math.min(third, sorted.length - 1)]?.id, + haiku: sorted[sorted.length - 1]?.id, + }; +} + +/** Format context length for display */ +export function formatContextLength(length: number): string { + if (length >= 1_000_000) return `${(length / 1_000_000).toFixed(1)}M`; + if (length >= 1_000) return `${Math.round(length / 1_000)}K`; + return String(length); +} + +/** Category display names */ +export const CATEGORY_LABELS: Record = { + anthropic: 'Anthropic (Claude)', + openai: 'OpenAI (GPT)', + google: 'Google (Gemini)', + meta: 'Meta (Llama)', + mistral: 'Mistral', + opensource: 'Open Source', + other: 'Other', +}; From 3cd21bb67b1e357992e662fe666bd35a4062de04 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 18:30:20 -0500 Subject: [PATCH 02/25] feat(ui): add OpenRouter model picker and tier mapping components - add openrouter-badge.tsx with orange-themed badge - add openrouter-model-picker.tsx with search and category filters - add model-tier-mapping.tsx with collapsible tier editor - update barrel exports in profiles/index.ts --- ui/src/components/profiles/index.ts | 6 + .../profiles/model-tier-mapping.tsx | 114 +++++++++ .../components/profiles/openrouter-badge.tsx | 40 ++++ .../profiles/openrouter-model-picker.tsx | 220 ++++++++++++++++++ 4 files changed, 380 insertions(+) create mode 100644 ui/src/components/profiles/model-tier-mapping.tsx create mode 100644 ui/src/components/profiles/openrouter-badge.tsx create mode 100644 ui/src/components/profiles/openrouter-model-picker.tsx diff --git a/ui/src/components/profiles/index.ts b/ui/src/components/profiles/index.ts index 366de67e..db201102 100644 --- a/ui/src/components/profiles/index.ts +++ b/ui/src/components/profiles/index.ts @@ -12,3 +12,9 @@ export { ProfilesTable } from './profiles-table'; // Profile editor (from subdirectory) export { ProfileEditor } from './editor'; export type { Settings, SettingsResponse, ProfileEditorProps } from './editor'; + +// OpenRouter components +export { OpenRouterBadge } from './openrouter-badge'; +export { OpenRouterModelPicker } from './openrouter-model-picker'; +export { ModelTierMapping } from './model-tier-mapping'; +export type { TierMapping } from './model-tier-mapping'; diff --git a/ui/src/components/profiles/model-tier-mapping.tsx b/ui/src/components/profiles/model-tier-mapping.tsx new file mode 100644 index 00000000..712e43c0 --- /dev/null +++ b/ui/src/components/profiles/model-tier-mapping.tsx @@ -0,0 +1,114 @@ +/** + * Model Tier Mapping Editor + * Configure opus/sonnet/haiku model overrides + */ + +import { useMemo } from 'react'; +import { Label } from '@/components/ui/label'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import { Wand2, ChevronRight } from 'lucide-react'; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; +import { useOpenRouterCatalog } from '@/hooks/use-openrouter-models'; +import { suggestTierMappings } from '@/lib/openrouter-utils'; +import { cn } from '@/lib/utils'; + +export interface TierMapping { + opus?: string; + sonnet?: string; + haiku?: string; +} + +interface ModelTierMappingProps { + selectedModel?: string; + value: TierMapping; + onChange: (mapping: TierMapping) => void; + className?: string; +} + +export function ModelTierMapping({ + selectedModel, + value, + onChange, + className, +}: ModelTierMappingProps) { + const { models } = useOpenRouterCatalog(); + + const suggestions = useMemo(() => { + if (!selectedModel) return {}; + return suggestTierMappings(selectedModel, models); + }, [selectedModel, models]); + + const handleAutoSuggest = () => { + onChange(suggestions); + }; + + const updateTier = (tier: keyof TierMapping, modelId: string) => { + onChange({ ...value, [tier]: modelId || undefined }); + }; + + const hasSuggestions = selectedModel && Object.keys(suggestions).length > 0; + + return ( + + + + Model Tier Mapping + (Advanced) + + +

+ Configure different models for Claude Code's opus/sonnet/haiku tiers. +

+ + {hasSuggestions && ( + + )} + +
+
+ + updateTier('opus', e.target.value)} + placeholder="e.g., anthropic/claude-opus-4" + /> +
+
+ + updateTier('sonnet', e.target.value)} + placeholder="e.g., anthropic/claude-sonnet-4" + /> +
+
+ + updateTier('haiku', e.target.value)} + placeholder="e.g., anthropic/claude-3.5-haiku" + /> +
+
+ +

+ These set ANTHROPIC_DEFAULT_OPUS_MODEL, ANTHROPIC_DEFAULT_SONNET_MODEL, + ANTHROPIC_DEFAULT_HAIKU_MODEL. +

+ + + ); +} diff --git a/ui/src/components/profiles/openrouter-badge.tsx b/ui/src/components/profiles/openrouter-badge.tsx new file mode 100644 index 00000000..54610e48 --- /dev/null +++ b/ui/src/components/profiles/openrouter-badge.tsx @@ -0,0 +1,40 @@ +/** + * OpenRouter Badge Component + * Visual indicator for OpenRouter-configured profiles + */ + +import { Badge } from '@/components/ui/badge'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; +import { cn } from '@/lib/utils'; + +interface OpenRouterBadgeProps { + className?: string; + showTooltip?: boolean; +} + +export function OpenRouterBadge({ className, showTooltip = true }: OpenRouterBadgeProps) { + const badge = ( + + OpenRouter + OpenRouter + + ); + + if (!showTooltip) return badge; + + return ( + + {badge} + +

Access 349+ models via OpenRouter

+ + + ); +} diff --git a/ui/src/components/profiles/openrouter-model-picker.tsx b/ui/src/components/profiles/openrouter-model-picker.tsx new file mode 100644 index 00000000..da985040 --- /dev/null +++ b/ui/src/components/profiles/openrouter-model-picker.tsx @@ -0,0 +1,220 @@ +/** + * OpenRouter Model Picker Component + * Searchable model selector with categories and pricing + */ + +import { useState, useMemo, useCallback } from 'react'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Skeleton } from '@/components/ui/skeleton'; +import { Search, RefreshCw, Loader2 } from 'lucide-react'; +import { useOpenRouterCatalog, useRefreshOpenRouterModels } from '@/hooks/use-openrouter-models'; +import { + searchModels, + formatPricingPair, + formatContextLength, + CATEGORY_LABELS, +} from '@/lib/openrouter-utils'; +import type { CategorizedModel, ModelCategory } from '@/lib/openrouter-types'; +import { cn } from '@/lib/utils'; + +interface OpenRouterModelPickerProps { + value?: string; + onChange: (modelId: string) => void; + placeholder?: string; + className?: string; +} + +export function OpenRouterModelPicker({ + value, + onChange, + placeholder = 'Search models...', + className, +}: OpenRouterModelPickerProps) { + const [search, setSearch] = useState(''); + const [selectedCategory, setSelectedCategory] = useState(null); + + const { models, isLoading, isError, isFetching } = useOpenRouterCatalog(); + const refreshModels = useRefreshOpenRouterModels(); + + // Filter and group models + const filteredModels = useMemo(() => { + return searchModels(models, search, { + category: selectedCategory ?? undefined, + }); + }, [models, search, selectedCategory]); + + // Group by category + const groupedModels = useMemo(() => { + const groups: Record = { + anthropic: [], + openai: [], + google: [], + meta: [], + mistral: [], + opensource: [], + other: [], + }; + + filteredModels.forEach((model) => { + groups[model.category].push(model); + }); + + return groups; + }, [filteredModels]); + + const handleRefresh = useCallback(() => { + refreshModels(); + }, [refreshModels]); + + const selectedModel = models.find((m) => m.id === value); + + if (isLoading && models.length === 0) { + return ( +
+ + +
+ ); + } + + return ( +
+ {/* Search Header */} +
+
+ + setSearch(e.target.value)} + placeholder={placeholder} + className="pl-9" + /> +
+ +
+ + {/* Category Filters */} +
+ setSelectedCategory(null)} + > + All ({models.length}) + + {(Object.keys(CATEGORY_LABELS) as ModelCategory[]).map((cat) => { + const count = groupedModels[cat].length; + if (count === 0) return null; + return ( + setSelectedCategory(cat)} + > + {CATEGORY_LABELS[cat]} ({count}) + + ); + })} +
+ + {/* Selected Model Display */} + {selectedModel && ( +
+ {selectedModel.name} + + {formatPricingPair(selectedModel.pricing)} |{' '} + {formatContextLength(selectedModel.context_length)} + +
+ )} + + {/* Model List */} + + {isError ? ( +
+ Failed to load models.{' '} + +
+ ) : filteredModels.length === 0 ? ( +
+ No models found matching "{search}" +
+ ) : ( +
+ {(Object.keys(CATEGORY_LABELS) as ModelCategory[]).map((category) => { + const categoryModels = groupedModels[category]; + if (categoryModels.length === 0) return null; + + return ( +
+
+ {CATEGORY_LABELS[category]} +
+ {categoryModels.map((model) => ( + onChange(model.id)} + /> + ))} +
+ ); + })} +
+ )} + +
+ ); +} + +function ModelItem({ + model, + isSelected, + onClick, +}: { + model: CategorizedModel; + isSelected: boolean; + onClick: () => void; +}) { + return ( + + ); +} From 677f9d1e72990e51ed88e00b228369c8be520bbe Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 18:31:00 -0500 Subject: [PATCH 03/25] feat(ui): integrate OpenRouter model picker into profile editor - add isOpenRouterProfile() detection in utils.ts - show OpenRouterBadge in header when detected - replace model input with picker for OpenRouter profiles - add tier mapping section in friendly-ui-section.tsx - show OpenRouter icon in profile-card.tsx - prefetch models on api.tsx page load --- .../profiles/editor/friendly-ui-section.tsx | 65 +++++++++++++++++++ .../profiles/editor/header-section.tsx | 6 ++ ui/src/components/profiles/editor/index.tsx | 3 +- ui/src/components/profiles/editor/utils.ts | 57 ++++++++++++++++ ui/src/components/profiles/profile-card.tsx | 17 ++++- ui/src/pages/api.tsx | 4 ++ 6 files changed, 150 insertions(+), 2 deletions(-) diff --git a/ui/src/components/profiles/editor/friendly-ui-section.tsx b/ui/src/components/profiles/editor/friendly-ui-section.tsx index d9af4c00..2c7e6c08 100644 --- a/ui/src/components/profiles/editor/friendly-ui-section.tsx +++ b/ui/src/components/profiles/editor/friendly-ui-section.tsx @@ -1,11 +1,16 @@ /** * Friendly UI Section * Left column with environment variables and info tabs + * Enhanced with OpenRouter model picker when applicable */ +import { useMemo } from 'react'; import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'; import { EnvEditorSection } from './env-editor-section'; import { InfoSection } from './info-section'; +import { OpenRouterModelPicker } from '@/components/profiles/openrouter-model-picker'; +import { ModelTierMapping, type TierMapping } from '@/components/profiles/model-tier-mapping'; +import { isOpenRouterProfile, extractTierMapping, applyTierMapping } from './utils'; import type { Settings, SettingsResponse } from './types'; interface FriendlyUISectionProps { @@ -16,6 +21,7 @@ interface FriendlyUISectionProps { onNewEnvKeyChange: (key: string) => void; onEnvValueChange: (key: string, value: string) => void; onAddEnvVar: () => void; + onEnvBulkChange?: (env: Record) => void; } export function FriendlyUISection({ @@ -26,7 +32,45 @@ export function FriendlyUISection({ onNewEnvKeyChange, onEnvValueChange, onAddEnvVar, + onEnvBulkChange, }: FriendlyUISectionProps) { + const isOpenRouter = isOpenRouterProfile(currentSettings); + const settingsEnv = currentSettings?.env; + + // Derive tier mapping from env vars (no local state to sync) + const tierMapping = useMemo( + () => extractTierMapping(settingsEnv ?? {}), + [settingsEnv] + ); + + // Memoize currentEnv for consistent reference + const currentEnv = settingsEnv ?? {}; + + // Handle model selection from OpenRouter picker + const handleModelChange = (modelId: string) => { + onEnvValueChange('ANTHROPIC_MODEL', modelId); + }; + + // Handle tier mapping change + const handleTierMappingChange = (mapping: TierMapping) => { + // Apply tier mapping to env vars + if (onEnvBulkChange) { + const newEnv = applyTierMapping(currentEnv, mapping); + onEnvBulkChange(newEnv); + } else { + // Fallback: update one by one + if (mapping.opus !== undefined) { + onEnvValueChange('ANTHROPIC_DEFAULT_OPUS_MODEL', mapping.opus || ''); + } + if (mapping.sonnet !== undefined) { + onEnvValueChange('ANTHROPIC_DEFAULT_SONNET_MODEL', mapping.sonnet || ''); + } + if (mapping.haiku !== undefined) { + onEnvValueChange('ANTHROPIC_DEFAULT_HAIKU_MODEL', mapping.haiku || ''); + } + } + }; + return (
@@ -46,6 +90,27 @@ export function FriendlyUISection({ value="env" className="flex-1 mt-0 border-0 p-0 data-[state=inactive]:hidden flex flex-col overflow-hidden" > + {/* OpenRouter Model Picker Section */} + {isOpenRouter && ( +
+
+ + +
+ +
+ )} + )} + {isOpenRouterProfile(settings) && }
{data && (

diff --git a/ui/src/components/profiles/editor/index.tsx b/ui/src/components/profiles/editor/index.tsx index d15fb411..49e071f4 100644 --- a/ui/src/components/profiles/editor/index.tsx +++ b/ui/src/components/profiles/editor/index.tsx @@ -139,6 +139,7 @@ export function ProfileEditor({ profileName, onDelete }: ProfileEditorProps) { pattern.test(key)); } + +/** + * Check if settings indicate an OpenRouter profile + */ +export function isOpenRouterProfile(settings: Settings | undefined): boolean { + if (!settings?.env) return false; + const baseUrl = settings.env.ANTHROPIC_BASE_URL || ''; + return baseUrl.toLowerCase().includes('openrouter.ai'); +} + +/** + * Extract tier mapping from settings env vars + */ +export function extractTierMapping(env: Record): { + opus?: string; + sonnet?: string; + haiku?: string; +} { + return { + opus: env.ANTHROPIC_DEFAULT_OPUS_MODEL || undefined, + sonnet: env.ANTHROPIC_DEFAULT_SONNET_MODEL || undefined, + haiku: env.ANTHROPIC_DEFAULT_HAIKU_MODEL || undefined, + }; +} + +/** + * Merge tier mapping into env vars + */ +export function applyTierMapping( + env: Record, + mapping: { opus?: string; sonnet?: string; haiku?: string } +): Record { + const result = { ...env }; + + // Set or remove tier overrides + if (mapping.opus) { + result.ANTHROPIC_DEFAULT_OPUS_MODEL = mapping.opus; + } else { + delete result.ANTHROPIC_DEFAULT_OPUS_MODEL; + } + + if (mapping.sonnet) { + result.ANTHROPIC_DEFAULT_SONNET_MODEL = mapping.sonnet; + } else { + delete result.ANTHROPIC_DEFAULT_SONNET_MODEL; + } + + if (mapping.haiku) { + result.ANTHROPIC_DEFAULT_HAIKU_MODEL = mapping.haiku; + } else { + delete result.ANTHROPIC_DEFAULT_HAIKU_MODEL; + } + + return result; +} diff --git a/ui/src/components/profiles/profile-card.tsx b/ui/src/components/profiles/profile-card.tsx index b760c392..ff18790c 100644 --- a/ui/src/components/profiles/profile-card.tsx +++ b/ui/src/components/profiles/profile-card.tsx @@ -1,7 +1,10 @@ import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { SettingsIcon, PlayIcon } from 'lucide-react'; +import { isOpenRouterProfile } from './editor/utils'; +import type { Settings } from './editor/types'; interface ProfileCardProps { profile: { @@ -12,18 +15,30 @@ interface ProfileCardProps { lastUsed?: string; model?: string; }; + /** Optional settings for OpenRouter detection */ + settings?: Settings; onSwitch?: () => void; onConfig?: () => void; onTest?: () => void; } -export function ProfileCard({ profile, onSwitch, onConfig, onTest }: ProfileCardProps) { +export function ProfileCard({ profile, settings, onSwitch, onConfig, onTest }: ProfileCardProps) { + const showOpenRouterIcon = isOpenRouterProfile(settings); + return (

{profile.name}

+ {showOpenRouterIcon && ( + + + OpenRouter + + OpenRouter profile + + )} {profile.isActive && ( Active diff --git a/ui/src/pages/api.tsx b/ui/src/pages/api.tsx index 27de98a5..64642395 100644 --- a/ui/src/pages/api.tsx +++ b/ui/src/pages/api.tsx @@ -24,6 +24,7 @@ import { import { ProfileEditor } from '@/components/profile-editor'; import { ProfileCreateDialog } from '@/components/profiles/profile-create-dialog'; import { useProfiles, useDeleteProfile } from '@/hooks/use-profiles'; +import { useOpenRouterModels } from '@/hooks/use-openrouter-models'; import { ConfirmDialog } from '@/components/shared/confirm-dialog'; import type { Profile } from '@/lib/api-client'; import { cn } from '@/lib/utils'; @@ -37,6 +38,9 @@ export function ApiPage() { const [isCreateDialogOpen, setCreateDialogOpen] = useState(false); const [deleteConfirm, setDeleteConfirm] = useState(null); + // Prefetch OpenRouter models when page loads (lazy - won't block render) + useOpenRouterModels(); + // Memoize profiles to maintain stable reference const profiles = useMemo(() => data?.profiles || [], [data?.profiles]); From d193626e3bfb8962809e2a6daf9697d302a70ff7 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 18:31:40 -0500 Subject: [PATCH 04/25] feat(cli): add interactive OpenRouter model picker for api create - add openrouter-catalog.ts with fetcher and 24h file cache - add openrouter-picker.ts with interactive search UI - detect OpenRouter URL in api-command.ts handleCreate() - offer interactive browse when no --model flag provided - support tier mapping configuration (opus/sonnet/haiku) --- src/api/services/index.ts | 4 + src/api/services/openrouter-catalog.ts | 119 +++++++++++++++++++ src/api/services/openrouter-picker.ts | 153 +++++++++++++++++++++++++ src/commands/api-command.ts | 38 +++++- 4 files changed, 309 insertions(+), 5 deletions(-) create mode 100644 src/api/services/openrouter-catalog.ts create mode 100644 src/api/services/openrouter-picker.ts diff --git a/src/api/services/index.ts b/src/api/services/index.ts index db692f30..f23cdcc9 100644 --- a/src/api/services/index.ts +++ b/src/api/services/index.ts @@ -28,3 +28,7 @@ export { // Profile write operations export { createApiProfile, removeApiProfile } from './profile-writer'; + +// OpenRouter catalog and picker +export { isOpenRouterUrl, fetchOpenRouterModels, type OpenRouterModel } from './openrouter-catalog'; +export { pickOpenRouterModel, type OpenRouterSelection } from './openrouter-picker'; diff --git a/src/api/services/openrouter-catalog.ts b/src/api/services/openrouter-catalog.ts new file mode 100644 index 00000000..b6b2d6ff --- /dev/null +++ b/src/api/services/openrouter-catalog.ts @@ -0,0 +1,119 @@ +/** + * OpenRouter Model Catalog Fetcher + * Fetches model list from OpenRouter API for CLI use + */ + +import * as fs from 'fs'; +import * as path from 'path'; +import * as os from 'os'; + +const OPENROUTER_API_URL = 'https://openrouter.ai/api/v1/models'; +const CACHE_FILE = path.join(os.homedir(), '.ccs', 'openrouter-models-cache.json'); +const CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours + +export interface OpenRouterModel { + id: string; + name: string; + description: string; + context_length: number; + pricing: { + prompt: string; + completion: string; + }; +} + +interface CacheData { + models: OpenRouterModel[]; + fetchedAt: number; +} + +/** Check if cached data is valid */ +function getCachedModels(): OpenRouterModel[] | null { + try { + if (!fs.existsSync(CACHE_FILE)) return null; + const data = JSON.parse(fs.readFileSync(CACHE_FILE, 'utf8')) as CacheData; + if (Date.now() - data.fetchedAt > CACHE_TTL_MS) return null; + return data.models; + } catch { + return null; + } +} + +/** Save models to cache */ +function setCachedModels(models: OpenRouterModel[]): void { + try { + const dir = path.dirname(CACHE_FILE); + if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true }); + fs.writeFileSync( + CACHE_FILE, + JSON.stringify({ + models, + fetchedAt: Date.now(), + }) + ); + } catch { + // Ignore cache write errors + } +} + +/** Fetch models from OpenRouter API */ +export async function fetchOpenRouterModels(): Promise { + // Try cache first + const cached = getCachedModels(); + if (cached) return cached; + + // Fetch from API + const response = await fetch(OPENROUTER_API_URL); + if (!response.ok) { + throw new Error(`Failed to fetch OpenRouter models: ${response.status}`); + } + + const data = (await response.json()) as { data: OpenRouterModel[] }; + const models = data.data.map((m) => ({ + id: m.id, + name: m.name, + description: m.description, + context_length: m.context_length, + pricing: m.pricing, + })); + + // Cache for next time + setCachedModels(models); + + return models; +} + +/** Format price per token to per million */ +export function formatPrice(perToken: string): string { + const value = parseFloat(perToken); + if (isNaN(value) || value === 0) return 'Free'; + const perMillion = value * 1_000_000; + if (perMillion < 0.01) return '<$0.01'; + if (perMillion < 1) return `$${perMillion.toFixed(2)}`; + return `$${perMillion.toFixed(perMillion < 10 ? 2 : 0)}`; +} + +/** Format pricing pair */ +export function formatPricingPair(pricing: { prompt: string; completion: string }): string { + return `${formatPrice(pricing.prompt)}/${formatPrice(pricing.completion)}`; +} + +/** Format context length */ +export function formatContext(length: number): string { + if (length >= 1_000_000) return `${(length / 1_000_000).toFixed(1)}M`; + return `${Math.round(length / 1_000)}K`; +} + +/** Search models */ +export function searchModels(models: OpenRouterModel[], query: string): OpenRouterModel[] { + if (!query.trim()) return models.slice(0, 20); // Show first 20 if no query + const q = query.toLowerCase(); + return models + .filter((m) => m.id.toLowerCase().includes(q) || m.name.toLowerCase().includes(q)) + .slice(0, 20); // Limit to 20 results +} + +/** Check if URL is OpenRouter */ +export function isOpenRouterUrl(url: string): boolean { + return url.toLowerCase().includes('openrouter.ai'); +} diff --git a/src/api/services/openrouter-picker.ts b/src/api/services/openrouter-picker.ts new file mode 100644 index 00000000..de2dcb9e --- /dev/null +++ b/src/api/services/openrouter-picker.ts @@ -0,0 +1,153 @@ +/** + * OpenRouter Interactive Model Picker + * CLI interface for browsing and selecting OpenRouter models + */ + +import { InteractivePrompt } from '../../utils/prompt'; +import { table, info, warn, color, dim, spinner } from '../../utils/ui'; +import { + fetchOpenRouterModels, + searchModels, + formatPricingPair, + formatContext, + type OpenRouterModel, +} from './openrouter-catalog'; + +export interface OpenRouterSelection { + model: string; + tierMapping?: { + opus?: string; + sonnet?: string; + haiku?: string; + }; +} + +/** Interactive model picker */ +export async function pickOpenRouterModel(): Promise { + // Fetch models with spinner + const s = await spinner('Fetching OpenRouter models...'); + + let models: OpenRouterModel[]; + try { + models = await fetchOpenRouterModels(); + s.succeed(`Loaded ${models.length} models from OpenRouter`); + } catch (error) { + s.fail(`Failed to fetch models: ${(error as Error).message}`); + return null; + } + + // Search loop + let selectedModel: OpenRouterModel | null = null; + + while (!selectedModel) { + const query = await InteractivePrompt.input('Search models (or press Enter to see popular)', { + default: '', + }); + + const results = searchModels(models, query); + + if (results.length === 0) { + console.log(warn('No models found. Try a different search term.')); + continue; + } + + // Display results in table + console.log(''); + const rows = results.map((m, i) => [ + String(i + 1), + m.id.length > 35 ? m.id.slice(0, 32) + '...' : m.id, + formatPricingPair(m.pricing), + formatContext(m.context_length), + ]); + + console.log( + table(rows, { + head: ['#', 'Model ID', 'Price (prompt/completion)', 'Context'], + }) + ); + console.log(''); + + // Get selection + const selection = await InteractivePrompt.input( + `Select model [1-${results.length}] or search again`, + { default: '1' } + ); + + const index = parseInt(selection, 10) - 1; + if (index >= 0 && index < results.length) { + selectedModel = results[index]; + } else if (selection.trim()) { + // Treat as new search + const newResults = searchModels(models, selection); + if (newResults.length === 1) { + selectedModel = newResults[0]; + } + } + } + + console.log(''); + console.log(info(`Selected: ${color(selectedModel.id, 'info')}`)); + + // Ask about tier mapping + const configureTiers = await InteractivePrompt.confirm( + 'Configure model tier mapping (opus/sonnet/haiku)?', + { default: false } + ); + + if (!configureTiers) { + return { model: selectedModel.id }; + } + + // Tier mapping + console.log(''); + console.log(dim('Leave blank to skip a tier.')); + + const tierMapping = { + opus: await InteractivePrompt.input('Opus tier model', { + default: suggestTier(selectedModel.id, 'opus', models), + }), + sonnet: await InteractivePrompt.input('Sonnet tier model', { + default: selectedModel.id, + }), + haiku: await InteractivePrompt.input('Haiku tier model', { + default: suggestTier(selectedModel.id, 'haiku', models), + }), + }; + + // Clean empty values + const cleanMapping = { + opus: tierMapping.opus || undefined, + sonnet: tierMapping.sonnet || undefined, + haiku: tierMapping.haiku || undefined, + }; + + return { + model: selectedModel.id, + tierMapping: cleanMapping, + }; +} + +/** Suggest tier model based on provider */ +function suggestTier( + selectedId: string, + tier: 'opus' | 'haiku', + models: OpenRouterModel[] +): string { + const [provider] = selectedId.split('/'); + const providerModels = models.filter((m) => m.id.startsWith(`${provider}/`)); + + if (providerModels.length < 2) return ''; + + // Sort by price + const sorted = [...providerModels].sort((a, b) => { + const priceA = parseFloat(a.pricing.prompt) || 0; + const priceB = parseFloat(b.pricing.prompt) || 0; + return priceB - priceA; // Descending + }); + + if (tier === 'opus') { + return sorted[0]?.id ?? ''; + } else { + return sorted[sorted.length - 1]?.id ?? ''; + } +} diff --git a/src/commands/api-command.ts b/src/commands/api-command.ts index 9aa579ec..165ecb1b 100644 --- a/src/commands/api-command.ts +++ b/src/commands/api-command.ts @@ -33,6 +33,8 @@ import { removeApiProfile, getApiProfileNames, isUsingUnifiedConfig, + isOpenRouterUrl, + pickOpenRouterModel, type ModelMapping, } from '../api/services'; @@ -130,6 +132,31 @@ async function handleCreate(args: string[]): Promise { } } + // OpenRouter detection: offer interactive model picker + let openRouterModel: string | undefined; + let openRouterTierMapping: { opus?: string; sonnet?: string; haiku?: string } | undefined; + + if (isOpenRouterUrl(baseUrl) && !parsedArgs.model) { + console.log(''); + console.log(info('OpenRouter detected!')); + + const useInteractive = await InteractivePrompt.confirm('Browse models interactively?', { + default: true, + }); + + if (useInteractive) { + const selection = await pickOpenRouterModel(); + + if (selection) { + openRouterModel = selection.model; + openRouterTierMapping = selection.tierMapping; + } + } + + console.log(''); + console.log(dim('Note: For OpenRouter, ANTHROPIC_API_KEY should be empty.')); + } + // Step 3: API Key let apiKey = parsedArgs.apiKey; if (!apiKey) { @@ -142,7 +169,7 @@ async function handleCreate(args: string[]): Promise { // Step 4: Model configuration const defaultModel = 'claude-sonnet-4-5-20250929'; - let model = parsedArgs.model; + let model = parsedArgs.model || openRouterModel; if (!model && !parsedArgs.yes) { model = await InteractivePrompt.input('Default model (ANTHROPIC_MODEL)', { default: defaultModel, @@ -151,12 +178,13 @@ async function handleCreate(args: string[]): Promise { model = model || defaultModel; // Step 5: Model mapping for Opus/Sonnet/Haiku - let opusModel = model; - let sonnetModel = model; - let haikuModel = model; + let opusModel = openRouterTierMapping?.opus || model; + let sonnetModel = openRouterTierMapping?.sonnet || model; + let haikuModel = openRouterTierMapping?.haiku || model; const isCustomModel = model !== defaultModel; + const hasOpenRouterTierMapping = openRouterTierMapping !== undefined; - if (!parsedArgs.yes) { + if (!parsedArgs.yes && !hasOpenRouterTierMapping) { let wantCustomMapping = isCustomModel; if (!isCustomModel) { From a1cbd4d92397bc15a9cb627bda5cd360603a2bf5 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 19:47:18 -0500 Subject: [PATCH 05/25] feat(ui): add dynamic newest models detection for OpenRouter - add created timestamp field to OpenRouterModel type - add getNewestModelsPerProvider() for dynamic newest models - add formatModelAge() for relative time display (e.g., "2d ago") - show newest models section in picker when no search query - sort search results by created date (newest first) --- .../profiles/openrouter-model-picker.tsx | 39 +++++++++++- ui/src/lib/openrouter-types.ts | 1 + ui/src/lib/openrouter-utils.ts | 59 +++++++++++++++++++ 3 files changed, 98 insertions(+), 1 deletion(-) diff --git a/ui/src/components/profiles/openrouter-model-picker.tsx b/ui/src/components/profiles/openrouter-model-picker.tsx index da985040..ffbdeaa8 100644 --- a/ui/src/components/profiles/openrouter-model-picker.tsx +++ b/ui/src/components/profiles/openrouter-model-picker.tsx @@ -9,12 +9,14 @@ import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { ScrollArea } from '@/components/ui/scroll-area'; import { Skeleton } from '@/components/ui/skeleton'; -import { Search, RefreshCw, Loader2 } from 'lucide-react'; +import { Search, RefreshCw, Loader2, Sparkles } from 'lucide-react'; import { useOpenRouterCatalog, useRefreshOpenRouterModels } from '@/hooks/use-openrouter-models'; import { searchModels, formatPricingPair, formatContextLength, + formatModelAge, + getNewestModelsPerProvider, CATEGORY_LABELS, } from '@/lib/openrouter-utils'; import type { CategorizedModel, ModelCategory } from '@/lib/openrouter-types'; @@ -46,6 +48,14 @@ export function OpenRouterModelPicker({ }); }, [models, search, selectedCategory]); + // Get newest models for presets (shown when no search) + const newestModels = useMemo(() => { + return getNewestModelsPerProvider(models, 2); + }, [models]); + + // Determine if we should show presets (no search query and no category filter) + const showPresets = !search.trim() && !selectedCategory; + // Group by category const groupedModels = useMemo(() => { const groups: Record = { @@ -159,6 +169,26 @@ export function OpenRouterModelPicker({
) : (
+ {/* Newest Models Section (shown when no search) */} + {showPresets && newestModels.length > 0 && ( +
+
+ + Newest Models +
+ {newestModels.map((model) => ( + onChange(model.id)} + showAge + /> + ))} +
+ )} + + {/* Category Groups */} {(Object.keys(CATEGORY_LABELS) as ModelCategory[]).map((category) => { const categoryModels = groupedModels[category]; if (categoryModels.length === 0) return null; @@ -190,10 +220,12 @@ function ModelItem({ model, isSelected, onClick, + showAge = false, }: { model: CategorizedModel; isSelected: boolean; onClick: () => void; + showAge?: boolean; }) { return ( + )} + + Learn more + + + +
+
+ + ); +} diff --git a/ui/src/components/profiles/openrouter-promo-card.tsx b/ui/src/components/profiles/openrouter-promo-card.tsx new file mode 100644 index 00000000..881f3368 --- /dev/null +++ b/ui/src/components/profiles/openrouter-promo-card.tsx @@ -0,0 +1,41 @@ +/** + * OpenRouter Promo Card + * Permanent promotional card for OpenRouter - always visible in sidebar footer + */ + +import { Button } from '@/components/ui/button'; +import { useOpenRouterReady } from '@/hooks/use-openrouter-models'; +import { Zap } from 'lucide-react'; + +interface OpenRouterPromoCardProps { + onCreateClick: () => void; +} + +export function OpenRouterPromoCard({ onCreateClick }: OpenRouterPromoCardProps) { + const { modelCount, isLoading } = useOpenRouterReady(); + + return ( +
+
+
+ +
+
+

OpenRouter

+

+ {isLoading ? '300+' : `${modelCount}+`} models available +

+
+ +
+
+ ); +} diff --git a/ui/src/components/profiles/openrouter-quick-start.tsx b/ui/src/components/profiles/openrouter-quick-start.tsx new file mode 100644 index 00000000..c320bbbc --- /dev/null +++ b/ui/src/components/profiles/openrouter-quick-start.tsx @@ -0,0 +1,98 @@ +/** + * OpenRouter Quick Start Card + * Prominent CTA for new users to create OpenRouter profile + */ + +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Badge } from '@/components/ui/badge'; +import { Separator } from '@/components/ui/separator'; +import { useOpenRouterReady } from '@/hooks/use-openrouter-models'; +import { Sparkles, ExternalLink, ArrowRight, Zap } from 'lucide-react'; + +interface OpenRouterQuickStartProps { + onOpenRouterClick: () => void; + onCustomClick: () => void; +} + +export function OpenRouterQuickStart({ + onOpenRouterClick, + onCustomClick, +}: OpenRouterQuickStartProps) { + const { modelCount, isLoading } = useOpenRouterReady(); + + return ( +
+
+ {/* Main OpenRouter Card */} + + +
+
+ OpenRouter +
+ + Recommended + +
+ Start with OpenRouter + + Access {isLoading ? '300+' : `${modelCount}+`} models from OpenAI, Anthropic, Google, + Meta and more - all through one API. + + + + {/* Key Features */} +
+
+ + One API, all providers +
+
+ + Model tier mapping +
+
+ + + +

+ Get your API key at{' '} + + openrouter.ai/keys + + +

+ + + + {/* Divider */} +
+ + or + +
+ + {/* Custom Option */} + +
+
+ ); +} diff --git a/ui/src/lib/provider-presets.ts b/ui/src/lib/provider-presets.ts new file mode 100644 index 00000000..8a0ade76 --- /dev/null +++ b/ui/src/lib/provider-presets.ts @@ -0,0 +1,85 @@ +/** + * Provider Presets Configuration + * Pre-configured templates for common API providers + */ + +export interface ProviderPreset { + id: string; + name: string; + description: string; + baseUrl: string; + defaultProfileName: string; + badge?: string; + featured?: boolean; + icon?: string; + defaultModel?: string; + requiresApiKey: boolean; + apiKeyPlaceholder: string; + apiKeyHint?: string; +} + +export const OPENROUTER_BASE_URL = 'https://openrouter.ai/api/v1'; + +export const PROVIDER_PRESETS: ProviderPreset[] = [ + { + id: 'openrouter', + name: 'OpenRouter', + description: '349+ models from OpenAI, Anthropic, Google, Meta', + baseUrl: OPENROUTER_BASE_URL, + defaultProfileName: 'openrouter', + badge: '349+ models', + featured: true, + icon: '/icons/openrouter.svg', + defaultModel: 'anthropic/claude-sonnet-4', + requiresApiKey: true, + apiKeyPlaceholder: 'sk-or-...', + apiKeyHint: 'Get your API key at openrouter.ai/keys', + }, + { + id: 'glm', + name: 'GLM', + description: 'Claude via Z.AI (GitHub Copilot)', + baseUrl: 'https://api.z.ai/api/anthropic', + defaultProfileName: 'glm', + badge: 'Free', + defaultModel: 'glm-4.6', + requiresApiKey: true, + apiKeyPlaceholder: 'ghp_...', + apiKeyHint: 'Get your API key from Z.AI', + }, + { + id: 'glmt', + name: 'GLMT', + description: 'GLM with Thinking mode support', + baseUrl: 'https://api.z.ai/api/coding/paas/v4/chat/completions', + defaultProfileName: 'glmt', + badge: 'Thinking', + defaultModel: 'glm-4.6', + requiresApiKey: true, + apiKeyPlaceholder: 'ghp_...', + apiKeyHint: 'Same API key as GLM', + }, + { + id: 'kimi', + name: 'Kimi', + description: 'Moonshot AI - Fast reasoning model', + baseUrl: 'https://api.kimi.com/coding/', + defaultProfileName: 'kimi', + badge: 'Reasoning', + defaultModel: 'kimi-k2-thinking-turbo', + requiresApiKey: true, + apiKeyPlaceholder: 'sk-...', + apiKeyHint: 'Get your API key from Moonshot AI', + }, +]; + +/** Get preset by ID */ +export function getPresetById(id: string): ProviderPreset | undefined { + return PROVIDER_PRESETS.find((p) => p.id === id); +} + +/** Check if a URL matches a known preset */ +export function detectPresetFromUrl(baseUrl: string): ProviderPreset | undefined { + const normalizedUrl = baseUrl.toLowerCase().trim(); + return PROVIDER_PRESETS.find((p) => normalizedUrl.includes(p.baseUrl.toLowerCase())); +} From adcc3235f0fcd328f3729125e5c5988f9db0937d Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 19:48:35 -0500 Subject: [PATCH 07/25] feat(ui): rewrite profile create dialog with provider presets - add preset cards grid (OpenRouter, GLM, GLMT, Kimi, Custom) - add model search picker for OpenRouter with newest-first sorting - auto-fill form fields when preset selected - show API key hints from preset config - skip model prompts for preset profiles --- .../profiles/profile-create-dialog.tsx | 416 ++++++++++++++---- 1 file changed, 326 insertions(+), 90 deletions(-) diff --git a/ui/src/components/profiles/profile-create-dialog.tsx b/ui/src/components/profiles/profile-create-dialog.tsx index 802297b3..ecd6db70 100644 --- a/ui/src/components/profiles/profile-create-dialog.tsx +++ b/ui/src/components/profiles/profile-create-dialog.tsx @@ -1,17 +1,17 @@ /** * Profile Create Dialog Component - * Modal dialog with tabbed interface for creating new API profiles - * Includes Quick Start templates and advanced model configuration + * Modal dialog with provider preset cards and model configuration */ /* eslint-disable react-hooks/set-state-in-effect */ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useMemo } from 'react'; import { useForm, useWatch } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; +import { ScrollArea } from '@/components/ui/scroll-area'; import { Dialog, DialogContent, @@ -23,11 +23,19 @@ import { import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { useCreateProfile } from '@/hooks/use-profiles'; -import { Loader2, Plus, AlertTriangle, Info, Eye, EyeOff } from 'lucide-react'; +import { useOpenRouterCatalog } from '@/hooks/use-openrouter-models'; +import { Loader2, Plus, AlertTriangle, Info, Eye, EyeOff, Settings2, Sparkles } from 'lucide-react'; import { toast } from 'sonner'; import { cn } from '@/lib/utils'; - -const DEFAULT_MODEL = 'claude-sonnet-4-5-20250929'; +import { PROVIDER_PRESETS, type ProviderPreset } from '@/lib/provider-presets'; +import { + searchModels, + formatPricingPair, + formatContextLength, + formatModelAge, + getNewestModelsPerProvider, +} from '@/lib/openrouter-utils'; +import type { CategorizedModel } from '@/lib/openrouter-types'; const schema = z.object({ name: z @@ -48,6 +56,7 @@ interface ProfileCreateDialogProps { open: boolean; onOpenChange: (open: boolean) => void; onSuccess: (name: string) => void; + initialMode?: 'normal' | 'openrouter'; } // Common URL mistakes to warn about @@ -58,6 +67,11 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr const [activeTab, setActiveTab] = useState('basic'); const [urlWarning, setUrlWarning] = useState(null); const [showApiKey, setShowApiKey] = useState(false); + const [selectedPreset, setSelectedPreset] = useState('openrouter'); + const [modelSearch, setModelSearch] = useState(''); + + // OpenRouter models for model picker + const { models: openRouterModels } = useOpenRouterCatalog(); const { register, @@ -65,6 +79,7 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr formState: { errors }, control, reset, + setValue, } = useForm({ resolver: zodResolver(schema), defaultValues: { @@ -80,21 +95,73 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr const baseUrlValue = useWatch({ control, name: 'baseUrl' }); - // Reset form when dialog opens + // Get current preset config + const currentPreset = useMemo(() => { + if (!selectedPreset || selectedPreset === 'custom') return null; + return PROVIDER_PRESETS.find((p) => p.id === selectedPreset); + }, [selectedPreset]); + // Filter models for OpenRouter search (newest first) + const filteredModels = useMemo(() => { + if (!modelSearch.trim()) { + // Show newest models when no search + return getNewestModelsPerProvider(openRouterModels, 2); + } + // Search and sort by created date (newest first) + const results = searchModels(openRouterModels, modelSearch); + return [...results].sort((a, b) => (b.created ?? 0) - (a.created ?? 0)).slice(0, 20); + }, [openRouterModels, modelSearch]); + + // Reset form when dialog opens useEffect(() => { if (open) { reset(); setActiveTab('basic'); setUrlWarning(null); setShowApiKey(false); + setSelectedPreset('openrouter'); + setModelSearch(''); + // Pre-fill with OpenRouter preset + const openrouterPreset = PROVIDER_PRESETS.find((p) => p.id === 'openrouter'); + if (openrouterPreset) { + setTimeout(() => { + setValue('name', openrouterPreset.defaultProfileName); + setValue('baseUrl', openrouterPreset.baseUrl); + }, 0); + } } - }, [open, reset]); + }, [open, reset, setValue]); + + // Handle preset selection + const handlePresetSelect = (presetId: string) => { + setSelectedPreset(presetId); + const preset = PROVIDER_PRESETS.find((p) => p.id === presetId); + if (preset) { + setValue('name', preset.defaultProfileName); + setValue('baseUrl', preset.baseUrl); + if (preset.defaultModel) { + setValue('model', preset.defaultModel); + setValue('opusModel', preset.defaultModel); + setValue('sonnetModel', preset.defaultModel); + setValue('haikuModel', preset.defaultModel); + } + } else { + // Custom + setValue('name', ''); + setValue('baseUrl', ''); + setValue('model', ''); + } + }; + + // Handle model selection from picker + const handleModelSelect = (model: CategorizedModel) => { + setValue('model', model.id); + setModelSearch(model.name); + }; // Check for common URL mistakes - useEffect(() => { - if (baseUrlValue) { + if (baseUrlValue && selectedPreset === 'custom') { const lowerUrl = baseUrlValue.toLowerCase(); for (const path of PROBLEMATIC_PATHS) { if (lowerUrl.endsWith(path)) { @@ -107,13 +174,18 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr } } setUrlWarning(null); - }, [baseUrlValue]); + }, [baseUrlValue, selectedPreset]); const onSubmit = async (data: FormData) => { + const preset = currentPreset; + const finalData = { + ...data, + baseUrl: preset ? preset.baseUrl : data.baseUrl, + }; try { - await createMutation.mutateAsync(data); - toast.success(`Profile "${data.name}" created`); - onSuccess(data.name); + await createMutation.mutateAsync(finalData); + toast.success(`Profile "${finalData.name}" created`); + onSuccess(finalData.name); onOpenChange(false); } catch (error) { toast.error((error as Error).message || 'Failed to create profile'); @@ -124,19 +196,56 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr const hasModelErrors = !!errors.model || !!errors.opusModel || !!errors.sonnetModel || !!errors.haikuModel; + const isOpenRouter = selectedPreset === 'openrouter'; + return ( - + Create API Profile - Configure a custom API endpoint for Claude Code. + + Choose a provider or configure a custom API endpoint. + -
- + + {/* Provider Preset Cards */} +
+ +
+ {PROVIDER_PRESETS.map((preset) => ( + handlePresetSelect(preset.id)} + /> + ))} + {/* Custom option */} + +
+
+ +
@@ -154,33 +263,31 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr
-
- -
- {/* Name */} -
- - - {errors.name ? ( -

{errors.name.message}

- ) : ( -

- Used in CLI:{' '} - - ccs my-api "prompt" - -

- )} -
+ + + {/* Profile Name */} +
+ + + {errors.name ? ( +

{errors.name.message}

+ ) : ( +

+ Used in CLI:{' '} + ccs my-api "prompt" +

+ )} +
- {/* Base URL */} + {/* Base URL - only show for custom */} + {selectedPreset === 'custom' ? (
- - {/* API Key */} -
- -
- - + ) : ( + currentPreset && ( +
+ {currentPreset.icon ? ( + + ) : ( + + )} +
+

{currentPreset.name} API

+

{currentPreset.baseUrl}

+
- {errors.apiKey && ( -

{errors.apiKey.message}

- )} + ) + )} + + {/* API Key */} +
+ +
+ +
+ {errors.apiKey ? ( +

{errors.apiKey.message}

+ ) : ( + currentPreset?.apiKeyHint && ( +

{currentPreset.apiKeyHint}

+ ) + )}
- -
+ +

Model Mapping

- Claude Code requests specific model tiers (Opus/Sonnet/Haiku). Map these tiers - to the specific models supported by your API provider. + Map Claude Code tiers (Opus/Sonnet/Haiku) to models supported by your + provider.

-
+ {/* OpenRouter Model Picker */} + {isOpenRouter && ( +
+ + setModelSearch(e.target.value)} + placeholder="Type to search (e.g., opus, sonnet, gpt-4o)..." + /> +
+ {filteredModels.length === 0 ? ( +

+ {modelSearch + ? `No models found for "${modelSearch}"` + : 'Loading models...'} +

+ ) : ( +
+ {!modelSearch && ( +
+ + Newest Models +
+ )} + {filteredModels.map((model) => ( + handleModelSelect(model)} + showAge={!modelSearch} + /> + ))} +
+ )} +
+
+ )} + + {/* Model Inputs */} +
-
+
-
+ - + @@ -345,3 +505,79 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr
); } + +/** Preset card component */ +function PresetCard({ + preset, + isSelected, + onClick, +}: { + preset: ProviderPreset; + isSelected: boolean; + onClick: () => void; +}) { + return ( + + ); +} + +/** Model search result item */ +function ModelSearchItem({ + model, + onClick, + showAge, +}: { + model: CategorizedModel; + onClick: () => void; + showAge?: boolean; +}) { + return ( + + ); +} From 05380e21b435d09d0105bee3868d4c73028e558d Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 19:49:12 -0500 Subject: [PATCH 08/25] fix(ui): show OpenRouterQuickStart by default on API page - remove auto-select of first profile behavior - show QuickStart panel when no profile selected - users now click profile to see details - ensures OpenRouter promo visible for existing users --- ui/src/pages/api.tsx | 327 ++++++++++++++++++------------------------- 1 file changed, 140 insertions(+), 187 deletions(-) diff --git a/ui/src/pages/api.tsx b/ui/src/pages/api.tsx index 64642395..53671c79 100644 --- a/ui/src/pages/api.tsx +++ b/ui/src/pages/api.tsx @@ -7,22 +7,21 @@ import { useState, useMemo } from 'react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { ScrollArea } from '@/components/ui/scroll-area'; -import { Badge } from '@/components/ui/badge'; -import { Separator } from '@/components/ui/separator'; import { Plus, Search, - Settings2, Trash2, CheckCircle2, AlertCircle, Server, - ExternalLink, FileJson, RefreshCw, } from 'lucide-react'; import { ProfileEditor } from '@/components/profile-editor'; import { ProfileCreateDialog } from '@/components/profiles/profile-create-dialog'; +import { OpenRouterBanner } from '@/components/profiles/openrouter-banner'; +import { OpenRouterQuickStart } from '@/components/profiles/openrouter-quick-start'; +import { OpenRouterPromoCard } from '@/components/profiles/openrouter-promo-card'; import { useProfiles, useDeleteProfile } from '@/hooks/use-profiles'; import { useOpenRouterModels } from '@/hooks/use-openrouter-models'; import { ConfirmDialog } from '@/components/shared/confirm-dialog'; @@ -36,6 +35,7 @@ export function ApiPage() { const [selectedProfile, setSelectedProfile] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [isCreateDialogOpen, setCreateDialogOpen] = useState(false); + const [createMode, setCreateMode] = useState<'normal' | 'openrouter'>('normal'); const [deleteConfirm, setDeleteConfirm] = useState(null); // Prefetch OpenRouter models when page loads (lazy - won't block render) @@ -50,13 +50,11 @@ export function ApiPage() { [profiles, searchQuery] ); - // Compute effective selected profile (auto-select first if none selected) - const effectiveSelectedProfile = useMemo(() => { - if (selectedProfile && profiles.some((p) => p.name === selectedProfile)) { - return selectedProfile; - } - return profiles.length > 0 ? profiles[0].name : null; - }, [selectedProfile, profiles]); + // selectedProfile is null by default - user must click to select + // This allows OpenRouterQuickStart to show as the default right panel + const selectedProfileData = selectedProfile + ? profiles.find((p) => p.name === selectedProfile) + : null; // Handle profile deletion const handleDelete = (name: string) => { @@ -76,137 +74,154 @@ export function ApiPage() { setSelectedProfile(name); }; - const selectedProfileData = profiles.find((p) => p.name === effectiveSelectedProfile); - return ( -
- {/* Left Panel - Profiles List */} -
- {/* Header */} -
-
-
- -

API Profiles

-
- -
+
+ {/* OpenRouter Announcement Banner */} + setCreateDialogOpen(true)} /> - {/* Search */} -
- - setSearchQuery(e.target.value)} - /> -
-
- - {/* Profile List */} - - {isLoading ? ( -
Loading profiles...
- ) : isError ? ( -
-
- -
-

Failed to load profiles

-

- Unable to fetch API profiles. Please try again. -

-
- + {/* Main Content */} +
+ {/* Left Panel - Profiles List */} +
+ {/* Header */} +
+
+
+ +

API Profiles

+
- ) : filteredProfiles.length === 0 ? ( -
- {profiles.length === 0 ? ( + + {/* Search */} +
+ + setSearchQuery(e.target.value)} + /> +
+
+ + {/* Profile List */} + + {isLoading ? ( +
Loading profiles...
+ ) : isError ? ( +
- +
-

No API profiles yet

+

Failed to load profiles

- Create your first profile to connect to custom API endpoints + Unable to fetch API profiles. Please try again.

-
- ) : ( -

- No profiles match "{searchQuery}" -

- )} -
- ) : ( -
- {filteredProfiles.map((profile) => ( - { - setSelectedProfile(profile.name); - }} - onDelete={() => setDeleteConfirm(profile.name)} - /> - ))} +
+ ) : filteredProfiles.length === 0 ? ( +
+ {profiles.length === 0 ? ( +
+ +
+

No API profiles yet

+

+ Create your first profile to connect to custom API endpoints +

+
+ +
+ ) : ( +

+ No profiles match "{searchQuery}" +

+ )} +
+ ) : ( +
+ {filteredProfiles.map((profile) => ( + { + setSelectedProfile(profile.name); + }} + onDelete={() => setDeleteConfirm(profile.name)} + /> + ))} +
+ )} + + + {/* Footer Stats */} + {profiles.length > 0 && ( +
+
+ + {profiles.length} profile{profiles.length !== 1 ? 's' : ''} + + + + {profiles.filter((p) => p.configured).length} configured + +
)} - - {/* Footer Stats */} - {profiles.length > 0 && ( -
-
- - {profiles.length} profile{profiles.length !== 1 ? 's' : ''} - - - - {profiles.filter((p) => p.configured).length} configured - -
-
- )} -
- - {/* Right Panel - Editor */} -
- {selectedProfileData ? ( - setDeleteConfirm(selectedProfileData.name)} - /> - ) : ( - { + setCreateMode('openrouter'); setCreateDialogOpen(true); }} /> - )} +
+ + {/* Right Panel - Editor or QuickStart */} +
+ {selectedProfileData ? ( + setDeleteConfirm(selectedProfileData.name)} + /> + ) : ( + { + setCreateMode('openrouter'); + setCreateDialogOpen(true); + }} + onCustomClick={() => { + setCreateMode('normal'); + setCreateDialogOpen(true); + }} + /> + )} +
{/* Create Dialog */} @@ -214,6 +229,7 @@ export function ApiPage() { open={isCreateDialogOpen} onOpenChange={setCreateDialogOpen} onSuccess={handleCreateSuccess} + initialMode={createMode} /> {/* Delete Confirmation */} @@ -289,66 +305,3 @@ function ProfileListItem({
); } - -/** Empty state when no profile is selected */ -function EmptyState({ onCreateClick }: { onCreateClick: () => void }) { - return ( -
-
- -

API Profile Manager

-

- Configure custom API endpoints for Claude CLI. Connect to proxy services like copilot-api, - OpenRouter, or your own API backend. -

- -
- - - - -
-

- What you can configure: -

-
    -
  • - - URL - - Custom API base URL endpoint -
    • -
  • - - Auth - - API key or authentication token -
    • -
  • - - Models - - Model mapping for Opus/Sonnet/Haiku -
    • -
-
- - -
-
-
- ); -} From 418d121577098722a35b060a37388ea2d267dffd Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 19:49:50 -0500 Subject: [PATCH 09/25] feat(cli): add --preset option to ccs api create command - add provider-presets.ts with OpenRouter/GLM/GLMT/Kimi configs - add --preset flag for quick profile creation - auto-fill name, base URL, model from preset - show preset info and API key hints - update help with preset documentation and examples --- src/api/services/index.ts | 10 +++ src/api/services/provider-presets.ts | 96 ++++++++++++++++++++++++++++ src/commands/api-command.ts | 89 +++++++++++++++++++------- 3 files changed, 171 insertions(+), 24 deletions(-) create mode 100644 src/api/services/provider-presets.ts diff --git a/src/api/services/index.ts b/src/api/services/index.ts index f23cdcc9..c6ee337e 100644 --- a/src/api/services/index.ts +++ b/src/api/services/index.ts @@ -32,3 +32,13 @@ export { createApiProfile, removeApiProfile } from './profile-writer'; // OpenRouter catalog and picker export { isOpenRouterUrl, fetchOpenRouterModels, type OpenRouterModel } from './openrouter-catalog'; export { pickOpenRouterModel, type OpenRouterSelection } from './openrouter-picker'; + +// Provider presets for CLI +export { + PROVIDER_PRESETS, + OPENROUTER_BASE_URL, + getPresetById, + getPresetIds, + isValidPresetId, + type ProviderPreset, +} from './provider-presets'; diff --git a/src/api/services/provider-presets.ts b/src/api/services/provider-presets.ts new file mode 100644 index 00000000..6b0411d2 --- /dev/null +++ b/src/api/services/provider-presets.ts @@ -0,0 +1,96 @@ +/** + * Provider Presets for CLI + * + * Pre-configured templates for common API providers. + * Mirrors the UI presets in ui/src/lib/provider-presets.ts + */ + +export interface ProviderPreset { + id: string; + name: string; + description: string; + baseUrl: string; + defaultProfileName: string; + defaultModel: string; + apiKeyPlaceholder: string; + apiKeyHint: string; + /** Additional env vars for thinking mode, etc. */ + extraEnv?: Record; + /** Enable always thinking mode */ + alwaysThinkingEnabled?: boolean; +} + +export const OPENROUTER_BASE_URL = 'https://openrouter.ai/api/v1'; + +/** + * Provider presets available via CLI and UI + * + * NOTE: Keep in sync with ui/src/lib/provider-presets.ts + */ +export const PROVIDER_PRESETS: ProviderPreset[] = [ + { + id: 'openrouter', + name: 'OpenRouter', + description: '349+ models from OpenAI, Anthropic, Google, Meta', + baseUrl: OPENROUTER_BASE_URL, + defaultProfileName: 'openrouter', + defaultModel: 'anthropic/claude-sonnet-4', + apiKeyPlaceholder: 'sk-or-...', + apiKeyHint: 'Get your API key at openrouter.ai/keys', + }, + { + id: 'glm', + name: 'GLM', + description: 'Claude via Z.AI (GitHub Copilot)', + baseUrl: 'https://api.z.ai/api/anthropic', + defaultProfileName: 'glm', + defaultModel: 'glm-4.6', + apiKeyPlaceholder: 'ghp_...', + apiKeyHint: 'Get your API key from Z.AI', + }, + { + id: 'glmt', + name: 'GLMT', + description: 'GLM with Thinking mode support', + baseUrl: 'https://api.z.ai/api/coding/paas/v4/chat/completions', + defaultProfileName: 'glmt', + defaultModel: 'glm-4.6', + apiKeyPlaceholder: 'ghp_...', + apiKeyHint: 'Same API key as GLM', + extraEnv: { + ANTHROPIC_TEMPERATURE: '0.2', + ANTHROPIC_MAX_TOKENS: '65536', + MAX_THINKING_TOKENS: '32768', + ENABLE_STREAMING: 'true', + ANTHROPIC_SAFE_MODE: 'false', + API_TIMEOUT_MS: '3000000', + }, + alwaysThinkingEnabled: true, + }, + { + id: 'kimi', + name: 'Kimi', + description: 'Moonshot AI - Fast reasoning model', + baseUrl: 'https://api.kimi.com/coding/', + defaultProfileName: 'kimi', + defaultModel: 'kimi-k2-thinking-turbo', + apiKeyPlaceholder: 'sk-...', + apiKeyHint: 'Get your API key from Moonshot AI', + alwaysThinkingEnabled: true, + }, +]; + +/** Get preset by ID */ +export function getPresetById(id: string): ProviderPreset | undefined { + return PROVIDER_PRESETS.find((p) => p.id === id.toLowerCase()); +} + +/** Get all preset IDs */ +export function getPresetIds(): string[] { + return PROVIDER_PRESETS.map((p) => p.id); +} + +/** Check if preset ID is valid */ +export function isValidPresetId(id: string): boolean { + return getPresetById(id) !== undefined; +} diff --git a/src/commands/api-command.ts b/src/commands/api-command.ts index 165ecb1b..fee28347 100644 --- a/src/commands/api-command.ts +++ b/src/commands/api-command.ts @@ -35,6 +35,8 @@ import { isUsingUnifiedConfig, isOpenRouterUrl, pickOpenRouterModel, + getPresetById, + getPresetIds, type ModelMapping, } from '../api/services'; @@ -43,6 +45,7 @@ interface ApiCommandArgs { baseUrl?: string; apiKey?: string; model?: string; + preset?: string; force?: boolean; yes?: boolean; } @@ -60,6 +63,8 @@ function parseArgs(args: string[]): ApiCommandArgs { result.apiKey = args[++i]; } else if (arg === '--model' && args[i + 1]) { result.model = args[++i]; + } else if (arg === '--preset' && args[i + 1]) { + result.preset = args[++i]; } else if (arg === '--force') { result.force = true; } else if (arg === '--yes' || arg === '-y') { @@ -80,8 +85,18 @@ async function handleCreate(args: string[]): Promise { console.log(header('Create API Profile')); console.log(''); - // Step 1: API name - let name = parsedArgs.name; + // Handle --preset option for quick provider setup + const preset = parsedArgs.preset ? getPresetById(parsedArgs.preset) : null; + if (parsedArgs.preset && !preset) { + console.log(fail(`Unknown preset: ${parsedArgs.preset}`)); + console.log(''); + console.log('Available presets:'); + getPresetIds().forEach((id) => console.log(` - ${id}`)); + process.exit(1); + } + + // Step 1: API name (use preset default if --preset provided) + let name = parsedArgs.name || preset?.defaultProfileName; if (!name) { name = await InteractivePrompt.input('API name', { validate: validateApiName, @@ -101,14 +116,15 @@ async function handleCreate(args: string[]): Promise { process.exit(1); } - // Step 2: Base URL - let baseUrl = parsedArgs.baseUrl; + // Step 2: Base URL (use preset if provided) + let baseUrl = parsedArgs.baseUrl || preset?.baseUrl; if (!baseUrl) { baseUrl = await InteractivePrompt.input( 'API Base URL (e.g., https://api.example.com/v1 - without /chat/completions)', { validate: validateUrl } ); - } else { + } else if (!preset) { + // Only validate custom URLs, not preset URLs const error = validateUrl(baseUrl); if (error) { console.log(fail(error)); @@ -116,20 +132,28 @@ async function handleCreate(args: string[]): Promise { } } - // Check for common URL mistakes and warn - const urlWarning = getUrlWarning(baseUrl); - if (urlWarning) { - console.log(''); - console.log(warn(urlWarning)); - const continueAnyway = await InteractivePrompt.confirm('Continue with this URL anyway?', { - default: false, - }); - if (!continueAnyway) { - baseUrl = await InteractivePrompt.input('API Base URL', { - validate: validateUrl, - default: sanitizeBaseUrl(baseUrl), + // Check for common URL mistakes and warn (skip for presets) + if (!preset) { + const urlWarning = getUrlWarning(baseUrl); + if (urlWarning) { + console.log(''); + console.log(warn(urlWarning)); + const continueAnyway = await InteractivePrompt.confirm('Continue with this URL anyway?', { + default: false, }); + if (!continueAnyway) { + baseUrl = await InteractivePrompt.input('API Base URL', { + validate: validateUrl, + default: sanitizeBaseUrl(baseUrl), + }); + } } + } else { + // Show preset info + console.log(info(`Using preset: ${preset.name}`)); + console.log(dim(` ${preset.description}`)); + console.log(dim(` Base URL: ${preset.baseUrl}`)); + console.log(''); } // OpenRouter detection: offer interactive model picker @@ -160,31 +184,33 @@ async function handleCreate(args: string[]): Promise { // Step 3: API Key let apiKey = parsedArgs.apiKey; if (!apiKey) { - apiKey = await InteractivePrompt.password('API Key'); + const keyPrompt = preset?.apiKeyHint ? `API Key (${preset.apiKeyHint})` : 'API Key'; + apiKey = await InteractivePrompt.password(keyPrompt); if (!apiKey) { console.log(fail('API key is required')); process.exit(1); } } - // Step 4: Model configuration - const defaultModel = 'claude-sonnet-4-5-20250929'; - let model = parsedArgs.model || openRouterModel; - if (!model && !parsedArgs.yes) { + // Step 4: Model configuration (use preset default if available) + const defaultModel = preset?.defaultModel || 'claude-sonnet-4-5-20250929'; + let model = parsedArgs.model || openRouterModel || preset?.defaultModel; + if (!model && !parsedArgs.yes && !preset) { model = await InteractivePrompt.input('Default model (ANTHROPIC_MODEL)', { default: defaultModel, }); } model = model || defaultModel; - // Step 5: Model mapping for Opus/Sonnet/Haiku + // Step 5: Model mapping for Opus/Sonnet/Haiku (skip prompt for presets with --yes) let opusModel = openRouterTierMapping?.opus || model; let sonnetModel = openRouterTierMapping?.sonnet || model; let haikuModel = openRouterTierMapping?.haiku || model; const isCustomModel = model !== defaultModel; const hasOpenRouterTierMapping = openRouterTierMapping !== undefined; + const hasPreset = preset !== null; - if (!parsedArgs.yes && !hasOpenRouterTierMapping) { + if (!parsedArgs.yes && !hasOpenRouterTierMapping && !hasPreset) { let wantCustomMapping = isCustomModel; if (!isCustomModel) { @@ -401,16 +427,31 @@ async function showHelp(): Promise { console.log(` ${color('remove ', 'command')} Remove an API profile`); console.log(''); console.log(subheader('Options')); + console.log( + ` ${color('--preset ', 'command')} Use provider preset (openrouter, glm, glmt, kimi)` + ); console.log(` ${color('--base-url ', 'command')} API base URL (create)`); console.log(` ${color('--api-key ', 'command')} API key (create)`); console.log(` ${color('--model ', 'command')} Default model (create)`); console.log(` ${color('--force', 'command')} Overwrite existing (create)`); console.log(` ${color('--yes, -y', 'command')} Skip confirmation prompts`); console.log(''); + console.log(subheader('Provider Presets')); + console.log( + ` ${color('openrouter', 'command')} OpenRouter - 349+ models (Claude, GPT, Gemini, Llama)` + ); + console.log(` ${color('glm', 'command')} GLM - Claude via Z.AI (GitHub Copilot)`); + console.log(` ${color('glmt', 'command')} GLMT - GLM with Thinking mode`); + console.log(` ${color('kimi', 'command')} Kimi - Moonshot AI reasoning model`); + console.log(''); console.log(subheader('Examples')); console.log(` ${dim('# Interactive wizard')}`); console.log(` ${color('ccs api create', 'command')}`); console.log(''); + console.log(` ${dim('# Quick setup with preset')}`); + console.log(` ${color('ccs api create --preset openrouter', 'command')}`); + console.log(` ${color('ccs api create --preset glm', 'command')}`); + console.log(''); console.log(` ${dim('# Create with name')}`); console.log(` ${color('ccs api create myapi', 'command')}`); console.log(''); From f96116d280d1addcaf5ea5ba5e605f8a3f058ad7 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 19:50:11 -0500 Subject: [PATCH 10/25] feat(install): remove auto-creation of GLM/GLMT/Kimi profiles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: GLM/GLMT/Kimi profiles no longer auto-created - remove glm.settings.json auto-creation - remove glmt.settings.json auto-creation - remove kimi.settings.json auto-creation - config.json now starts with empty profiles - users create via: ccs api create --preset glm - or via UI: Profile Create Dialog → Provider Presets - existing profiles preserved for backward compatibility --- scripts/postinstall.js | 231 ++--------------------------------------- 1 file changed, 11 insertions(+), 220 deletions(-) diff --git a/scripts/postinstall.js b/scripts/postinstall.js index 07c2862a..60251501 100755 --- a/scripts/postinstall.js +++ b/scripts/postinstall.js @@ -68,12 +68,9 @@ function validateConfiguration() { errors.push('~/.ccs/ directory not found'); } - // Check required files + // Check required files (GLM/GLMT/Kimi are now optional - created via presets) const requiredFiles = [ - { path: path.join(ccsDir, 'config.json'), name: 'config.json' }, - { path: path.join(ccsDir, 'glm.settings.json'), name: 'glm.settings.json' }, - { path: path.join(ccsDir, 'glmt.settings.json'), name: 'glmt.settings.json' }, - { path: path.join(ccsDir, 'kimi.settings.json'), name: 'kimi.settings.json' } + { path: path.join(ccsDir, 'config.json'), name: 'config.json' } ]; for (const file of requiredFiles) { @@ -156,17 +153,15 @@ function createConfigFiles() { // Create config.json if missing // NOTE: gemini/codex profiles NOT included - they are added on-demand when user // runs `ccs gemini` or `ccs codex` for first time (requires OAuth auth first) + // NOTE: GLM/GLMT/Kimi profiles are now created via UI/CLI presets, not auto-created const configPath = path.join(ccsDir, 'config.json'); if (!fs.existsSync(configPath)) { // NOTE: No 'default' entry - when no profile specified, CCS passes through // to Claude's native auth without --settings flag. This prevents env var // pollution from affecting the default profile. + // Profiles are empty by default - users create via `ccs api create --preset` or UI const config = { - profiles: { - glm: '~/.ccs/glm.settings.json', - glmt: '~/.ccs/glmt.settings.json', - kimi: '~/.ccs/kimi.settings.json' - } + profiles: {} }; // Atomic write: temp file → rename @@ -213,216 +208,12 @@ function createConfigFiles() { } } - // Create glm.settings.json if missing - const glmSettingsPath = path.join(ccsDir, 'glm.settings.json'); - if (!fs.existsSync(glmSettingsPath)) { - const glmSettings = { - env: { - ANTHROPIC_BASE_URL: 'https://api.z.ai/api/anthropic', - ANTHROPIC_AUTH_TOKEN: 'YOUR_GLM_API_KEY_HERE', - ANTHROPIC_MODEL: 'glm-4.6', - ANTHROPIC_DEFAULT_OPUS_MODEL: 'glm-4.6', - ANTHROPIC_DEFAULT_SONNET_MODEL: 'glm-4.6', - ANTHROPIC_DEFAULT_HAIKU_MODEL: 'glm-4.6' - } - }; - - // Atomic write - const tmpPath = `${glmSettingsPath}.tmp`; - fs.writeFileSync(tmpPath, JSON.stringify(glmSettings, null, 2) + '\n', 'utf8'); - fs.renameSync(tmpPath, glmSettingsPath); - - console.log('[OK] Created GLM profile: ~/.ccs/glm.settings.json'); - console.log(''); - console.log(' [!] Configure GLM API key:'); - console.log(' 1. Get key from: https://api.z.ai'); - console.log(' 2. Edit: ~/.ccs/glm.settings.json'); - console.log(' 3. Replace: YOUR_GLM_API_KEY_HERE'); - } else { - console.log('[OK] GLM profile exists: ~/.ccs/glm.settings.json (preserved)'); - } - - // Create glmt.settings.json if missing - const glmtSettingsPath = path.join(ccsDir, 'glmt.settings.json'); - if (!fs.existsSync(glmtSettingsPath)) { - const glmtSettings = { - env: { - ANTHROPIC_BASE_URL: 'https://api.z.ai/api/coding/paas/v4/chat/completions', - ANTHROPIC_AUTH_TOKEN: 'YOUR_GLM_API_KEY_HERE', - ANTHROPIC_MODEL: 'glm-4.6', - ANTHROPIC_DEFAULT_OPUS_MODEL: 'glm-4.6', - ANTHROPIC_DEFAULT_SONNET_MODEL: 'glm-4.6', - ANTHROPIC_DEFAULT_HAIKU_MODEL: 'glm-4.6', - ANTHROPIC_TEMPERATURE: '0.2', - ANTHROPIC_MAX_TOKENS: '65536', - MAX_THINKING_TOKENS: '32768', - ENABLE_STREAMING: 'true', - ANTHROPIC_SAFE_MODE: 'false', - API_TIMEOUT_MS: '3000000' - }, - alwaysThinkingEnabled: true - }; - - // Atomic write - const tmpPath = `${glmtSettingsPath}.tmp`; - fs.writeFileSync(tmpPath, JSON.stringify(glmtSettings, null, 2) + '\n', 'utf8'); - fs.renameSync(tmpPath, glmtSettingsPath); - - console.log('[OK] Created GLMT profile: ~/.ccs/glmt.settings.json'); - console.log(''); - console.log(' [!] Configure GLMT API key:'); - console.log(' 1. Get key from: https://api.z.ai'); - console.log(' 2. Edit: ~/.ccs/glmt.settings.json'); - console.log(' 3. Replace: YOUR_GLM_API_KEY_HERE'); - console.log(' Note: GLMT enables GLM thinking mode (reasoning)'); - console.log(' Defaults: Temperature 0.2, thinking enabled, 50min timeout'); - } else { - console.log('[OK] GLMT profile exists: ~/.ccs/glmt.settings.json (preserved)'); - } - - // Migrate existing GLMT configs to include new defaults (v3.3.0) - if (fs.existsSync(glmtSettingsPath)) { - try { - const existing = JSON.parse(fs.readFileSync(glmtSettingsPath, 'utf8')); - let updated = false; - - // Ensure env object exists - if (!existing.env) { - existing.env = {}; - updated = true; - } - - // Add missing env vars (preserve existing values) - const envDefaults = { - ANTHROPIC_TEMPERATURE: '0.2', - ANTHROPIC_MAX_TOKENS: '65536', - MAX_THINKING_TOKENS: '32768', - ENABLE_STREAMING: 'true', - ANTHROPIC_SAFE_MODE: 'false', - API_TIMEOUT_MS: '3000000' - }; - - for (const [key, value] of Object.entries(envDefaults)) { - if (existing.env[key] === undefined) { - existing.env[key] = value; - updated = true; - } - } - - // Add alwaysThinkingEnabled if missing - if (existing.alwaysThinkingEnabled === undefined) { - existing.alwaysThinkingEnabled = true; - updated = true; - } - - // Write back if updated - if (updated) { - const tmpPath = `${glmtSettingsPath}.tmp`; - fs.writeFileSync(tmpPath, JSON.stringify(existing, null, 2) + '\n', 'utf8'); - fs.renameSync(tmpPath, glmtSettingsPath); - console.log('[OK] Migrated GLMT config with new defaults (v3.3.0)'); - console.log(' Added: temperature, max_tokens, thinking settings, alwaysThinkingEnabled'); - } - } catch (err) { - console.warn('[!] GLMT config migration failed:', err.message); - console.warn(' Existing config preserved, may be missing new defaults'); - console.warn(' You can manually add fields or delete file to regenerate'); - } - } - - // Create kimi.settings.json if missing - const kimiSettingsPath = path.join(ccsDir, 'kimi.settings.json'); - if (!fs.existsSync(kimiSettingsPath)) { - const kimiSettings = { - env: { - ANTHROPIC_BASE_URL: 'https://api.kimi.com/coding/', - ANTHROPIC_AUTH_TOKEN: 'YOUR_KIMI_API_KEY_HERE', - ANTHROPIC_MODEL: 'kimi-k2-thinking-turbo', - ANTHROPIC_DEFAULT_OPUS_MODEL: 'kimi-k2-thinking-turbo', - ANTHROPIC_DEFAULT_SONNET_MODEL: 'kimi-k2-thinking-turbo', - ANTHROPIC_DEFAULT_HAIKU_MODEL: 'kimi-k2-thinking-turbo' - }, - alwaysThinkingEnabled: true - }; - - // Atomic write - const tmpPath = `${kimiSettingsPath}.tmp`; - fs.writeFileSync(tmpPath, JSON.stringify(kimiSettings, null, 2) + '\n', 'utf8'); - fs.renameSync(tmpPath, kimiSettingsPath); - - console.log('[OK] Created Kimi profile: ~/.ccs/kimi.settings.json'); - console.log(''); - console.log(' [!] Configure Kimi API key:'); - console.log(' 1. Get key from: https://www.kimi.com/coding (membership page)'); - console.log(' 2. Edit: ~/.ccs/kimi.settings.json'); - console.log(' 3. Replace: YOUR_KIMI_API_KEY_HERE'); - } else { - console.log('[OK] Kimi profile exists: ~/.ccs/kimi.settings.json (preserved)'); - } - - // NOTE: gemini.settings.json and codex.settings.json are NOT created during install - // They are created on-demand when user runs `ccs gemini` or `ccs codex` for the first time - // This prevents confusion - users need to run `--auth` first anyway - - // Migrate existing Kimi configs to use kimi-k2-thinking-turbo model (v5.5.0) - // Kimi API now supports model specification with thinking models - if (fs.existsSync(kimiSettingsPath)) { - try { - const existing = JSON.parse(fs.readFileSync(kimiSettingsPath, 'utf8')); - let updated = false; - const defaultModel = 'kimi-k2-thinking-turbo'; - - // Ensure env object exists - if (!existing.env) { - existing.env = {}; - updated = true; - } - - // Add/update model fields to use kimi-k2-thinking-turbo - const modelFields = { - ANTHROPIC_MODEL: defaultModel, - ANTHROPIC_DEFAULT_OPUS_MODEL: defaultModel, - ANTHROPIC_DEFAULT_SONNET_MODEL: defaultModel, - ANTHROPIC_DEFAULT_HAIKU_MODEL: defaultModel - }; - - for (const [field, value] of Object.entries(modelFields)) { - if (existing.env[field] !== value) { - existing.env[field] = value; - updated = true; - } - } - - // Remove deprecated ANTHROPIC_SMALL_FAST_MODEL if present - if (existing.env.ANTHROPIC_SMALL_FAST_MODEL !== undefined) { - delete existing.env.ANTHROPIC_SMALL_FAST_MODEL; - updated = true; - } - - // Ensure required fields exist - if (!existing.env.ANTHROPIC_BASE_URL) { - existing.env.ANTHROPIC_BASE_URL = 'https://api.kimi.com/coding/'; - updated = true; - } - - // Add alwaysThinkingEnabled if missing - if (existing.alwaysThinkingEnabled === undefined) { - existing.alwaysThinkingEnabled = true; - updated = true; - } - - // Write back if updated - if (updated) { - const tmpPath = `${kimiSettingsPath}.tmp`; - fs.writeFileSync(tmpPath, JSON.stringify(existing, null, 2) + '\n', 'utf8'); - fs.renameSync(tmpPath, kimiSettingsPath); - console.log('[OK] Migrated Kimi config (v5.5.0): updated to kimi-k2-thinking-turbo model'); - } - } catch (err) { - console.warn('[!] Kimi config migration failed:', err.message); - console.warn(' Existing config preserved'); - } - } + // NOTE: GLM, GLMT, and Kimi profiles are NO LONGER auto-created during install + // Users can create these via: + // - UI: Profile Create Dialog → Provider Presets + // - CLI: ccs api create --preset glm|glmt|kimi + // This gives users control over which providers they want to use + // Existing profiles are preserved for backward compatibility // Copy shell completion files to ~/.ccs/completions/ const completionsDir = path.join(ccsDir, 'completions'); From de45fa0da9d1345dff5871a71af7bbedb235076f Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 19:50:40 -0500 Subject: [PATCH 11/25] test(npm): update tests for preset-based profile creation - update postinstall tests to expect empty profiles - add test verifying GLM/GLMT/Kimi not auto-created - update CLI profile tests to handle optional profiles - remove hardcoded GLM profile expectations --- tests/npm/cli.test.js | 23 ++++++++++++++++------- tests/npm/postinstall.test.js | 18 ++++++++++-------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/tests/npm/cli.test.js b/tests/npm/cli.test.js index ac807bf8..a05675e3 100644 --- a/tests/npm/cli.test.js +++ b/tests/npm/cli.test.js @@ -77,12 +77,21 @@ describe('npm CLI', () => { }); describe('Profile handling', () => { - it('loads glm profile', function() { + // Note: GLM/GLMT/Kimi profiles are no longer auto-created (v6.0) + // Users create these via UI presets or CLI: ccs api create --preset glm + + it('shows helpful error for non-existent profile', function() { try { runCli('glm --help', { stdio: 'pipe' }); + // If GLM profile exists from previous setup, this is fine too } catch (e) { - const output = e.stderr?.toString() || ''; - assert(!output.includes("Profile 'glm' not found"), 'GLM profile should exist'); + const output = e.stderr?.toString() || e.stdout?.toString() || ''; + // Either profile exists and works, or shows helpful "not found" message + // Both are valid behaviors depending on user's setup + const isValid = !output.includes("Profile 'glm' not found") || + output.includes("not found") || + output.includes("ccs api create"); + assert(isValid, 'Should either find profile or show helpful message'); } }); @@ -96,13 +105,13 @@ describe('npm CLI', () => { } }); - it('handles profile with flags', function() { + it('handles profile with flags correctly', function() { try { - runCli('glm -c', { stdio: 'pipe', timeout: 3000 }); + // Use a known command instead of profile that may not exist + runCli('api --help', { stdio: 'pipe', timeout: 3000 }); } catch (e) { const output = e.stderr?.toString() || ''; - assert(!output.includes("Profile 'glm' not found"), 'GLM profile should exist'); - assert(!output.includes("Profile '-c' not found"), 'Should not treat -c as profile'); + assert(!output.includes("Profile '-c' not found"), 'Should not treat flags as profiles'); } }); }); diff --git a/tests/npm/postinstall.test.js b/tests/npm/postinstall.test.js index 0032e117..07572362 100644 --- a/tests/npm/postinstall.test.js +++ b/tests/npm/postinstall.test.js @@ -30,20 +30,21 @@ describe('npm postinstall', () => { const config = testEnv.readFile('config.json', true); assert(config.profiles, 'config.json should have profiles'); assert(typeof config.profiles === 'object', 'profiles should be an object'); + // Profiles are now empty by default - users create via presets + assert.deepStrictEqual(config.profiles, {}, 'profiles should be empty by default'); }); - it('creates glm.settings.json', () => { + it('does NOT auto-create glm.settings.json (v6.0 - use presets instead)', () => { execSync(`node "${postinstallScript}"`, { stdio: 'ignore', env: { ...process.env, CCS_HOME: testEnv.testHome } }); - assert(testEnv.fileExists('glm.settings.json'), 'glm.settings.json should be created'); - - const glmSettings = testEnv.readFile('glm.settings.json', true); - assert(glmSettings.env, 'glm.settings.json should have env section'); - assert(glmSettings.env.ANTHROPIC_MODEL, 'should have ANTHROPIC_MODEL set'); - assert.strictEqual(glmSettings.env.ANTHROPIC_MODEL, 'glm-4.6'); + // GLM/GLMT/Kimi profiles are NO LONGER auto-created during install + // Users create these via UI presets or CLI: ccs api create --preset glm + assert(!testEnv.fileExists('glm.settings.json'), 'glm.settings.json should NOT be auto-created'); + assert(!testEnv.fileExists('glmt.settings.json'), 'glmt.settings.json should NOT be auto-created'); + assert(!testEnv.fileExists('kimi.settings.json'), 'kimi.settings.json should NOT be auto-created'); }); it('is idempotent', () => { @@ -97,7 +98,8 @@ describe('npm postinstall', () => { // Verify existing file still exists and new files are created assert(testEnv.fileExists('existing.txt'), 'Existing files should be preserved'); assert(testEnv.fileExists('config.json'), 'config.json should be created'); - assert(testEnv.fileExists('glm.settings.json'), 'glm.settings.json should be created'); + // GLM/GLMT/Kimi are no longer auto-created + assert(!testEnv.fileExists('glm.settings.json'), 'glm.settings.json should NOT be auto-created'); }); it('does not create VERSION file', () => { From 4c74e92cc46afed9c8232944a2a443709b130a2c Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 21:07:27 -0500 Subject: [PATCH 12/25] feat(api): unify profile management with config-aware services - profile-reader: fix isApiProfileConfigured to check settings.json fallback - profile-reader: exclude 'default' profile (native Claude) from listings - profile-routes: use createApiProfile/removeApiProfile services - provider-presets: add category field (recommended/alternative) - recovery-manager: remove auto-creation of GLM/GLMT/Kimi profiles --- src/api/services/profile-reader.ts | 45 +++++++++++--- src/api/services/provider-presets.ts | 9 +++ src/management/recovery-manager.ts | 17 ++---- src/web-server/routes/profile-routes.ts | 79 +++++++++++-------------- 4 files changed, 86 insertions(+), 64 deletions(-) diff --git a/src/api/services/profile-reader.ts b/src/api/services/profile-reader.ts index d28b3149..fcc6d30e 100644 --- a/src/api/services/profile-reader.ts +++ b/src/api/services/profile-reader.ts @@ -33,14 +33,32 @@ export function apiProfileExists(name: string): boolean { */ export function isApiProfileConfigured(apiName: string): boolean { try { - if (isUnifiedMode()) { - const secrets = getProfileSecrets(apiName); - const token = secrets?.ANTHROPIC_AUTH_TOKEN || ''; - return token.length > 0 && !token.includes('YOUR_') && !token.includes('your-'); - } - // Legacy: check settings.json file const ccsDir = getCcsDir(); const settingsPath = path.join(ccsDir, `${apiName}.settings.json`); + + if (isUnifiedMode()) { + // Check secrets.yaml first + const secrets = getProfileSecrets(apiName); + const secretToken = secrets?.ANTHROPIC_AUTH_TOKEN || ''; + if ( + secretToken.length > 0 && + !secretToken.includes('YOUR_') && + !secretToken.includes('your-') + ) { + return true; + } + + // Fallback: check settings.json file (profiles created via UI store keys here) + if (fs.existsSync(settingsPath)) { + const settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8')); + const token = settings?.env?.ANTHROPIC_AUTH_TOKEN || ''; + return token.length > 0 && !token.includes('YOUR_') && !token.includes('your-'); + } + + return false; + } + + // Legacy: check settings.json file if (!fs.existsSync(settingsPath)) return false; const settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8')); @@ -53,6 +71,9 @@ export function isApiProfileConfigured(apiName: string): boolean { /** * List all API profiles + * + * Note: The 'default' profile (pointing to ~/.claude/settings.json) is excluded + * as it represents the user's native Claude subscription, not an API profile. */ export function listApiProfiles(): ApiListResult { const profiles: ApiProfileInfo[] = []; @@ -60,10 +81,14 @@ export function listApiProfiles(): ApiListResult { if (isUnifiedMode()) { const unifiedConfig = loadOrCreateUnifiedConfig(); - for (const name of Object.keys(unifiedConfig.profiles)) { + for (const [name, profile] of Object.entries(unifiedConfig.profiles)) { + // Skip 'default' profile - it's the user's native Claude settings + if (name === 'default' && profile.settings?.includes('.claude/settings.json')) { + continue; + } profiles.push({ name, - settingsPath: 'config.yaml', + settingsPath: profile.settings || 'config.yaml', isConfigured: isApiProfileConfigured(name), configSource: 'unified', }); @@ -79,6 +104,10 @@ export function listApiProfiles(): ApiListResult { } else { const config = loadConfig(); for (const [name, settingsPath] of Object.entries(config.profiles)) { + // Skip 'default' profile - it's the user's native Claude settings + if (name === 'default' && (settingsPath as string).includes('.claude/settings.json')) { + continue; + } profiles.push({ name, settingsPath: settingsPath as string, diff --git a/src/api/services/provider-presets.ts b/src/api/services/provider-presets.ts index 6b0411d2..597a102a 100644 --- a/src/api/services/provider-presets.ts +++ b/src/api/services/provider-presets.ts @@ -5,6 +5,8 @@ * Mirrors the UI presets in ui/src/lib/provider-presets.ts */ +export type PresetCategory = 'recommended' | 'alternative'; + export interface ProviderPreset { id: string; name: string; @@ -14,6 +16,7 @@ export interface ProviderPreset { defaultModel: string; apiKeyPlaceholder: string; apiKeyHint: string; + category: PresetCategory; /** Additional env vars for thinking mode, etc. */ extraEnv?: Record; /** Enable always thinking mode */ @@ -28,6 +31,7 @@ export const OPENROUTER_BASE_URL = 'https://openrouter.ai/api/v1'; * NOTE: Keep in sync with ui/src/lib/provider-presets.ts */ export const PROVIDER_PRESETS: ProviderPreset[] = [ + // Recommended { id: 'openrouter', name: 'OpenRouter', @@ -37,7 +41,9 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [ defaultModel: 'anthropic/claude-sonnet-4', apiKeyPlaceholder: 'sk-or-...', apiKeyHint: 'Get your API key at openrouter.ai/keys', + category: 'recommended', }, + // Alternative providers { id: 'glm', name: 'GLM', @@ -47,6 +53,7 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [ defaultModel: 'glm-4.6', apiKeyPlaceholder: 'ghp_...', apiKeyHint: 'Get your API key from Z.AI', + category: 'alternative', }, { id: 'glmt', @@ -57,6 +64,7 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [ defaultModel: 'glm-4.6', apiKeyPlaceholder: 'ghp_...', apiKeyHint: 'Same API key as GLM', + category: 'alternative', extraEnv: { ANTHROPIC_TEMPERATURE: '0.2', ANTHROPIC_MAX_TOKENS: '65536', @@ -76,6 +84,7 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [ defaultModel: 'kimi-k2-thinking-turbo', apiKeyPlaceholder: 'sk-...', apiKeyHint: 'Get your API key from Moonshot AI', + category: 'alternative', alwaysThinkingEnabled: true, }, ]; diff --git a/src/management/recovery-manager.ts b/src/management/recovery-manager.ts index edff2f23..9c43dd1e 100644 --- a/src/management/recovery-manager.ts +++ b/src/management/recovery-manager.ts @@ -69,14 +69,9 @@ class RecoveryManager { } // Create default config (matches postinstall.js) - // NOTE: No 'default' entry - when no profile specified, CCS passes through - // to Claude's native auth without --settings flag + // NOTE: Empty profiles - users create profiles via `ccs api create` or UI const defaultConfig = { - profiles: { - glm: '~/.ccs/glm.settings.json', - glmt: '~/.ccs/glmt.settings.json', - kimi: '~/.ccs/kimi.settings.json', - }, + profiles: {}, }; const tmpPath = `${configPath}.tmp`; @@ -274,6 +269,9 @@ class RecoveryManager { /** * Run all recovery operations (lazy initialization) * Mirrors postinstall.js behavior + * + * NOTE: GLM/GLMT/Kimi profiles are NOT auto-created. + * Users should create them via `ccs api create --preset glm` or the UI. */ recoverAll(): boolean { this.recovered = []; @@ -283,11 +281,8 @@ class RecoveryManager { this.ensureSharedDirectories(); this.ensureClaudeSettings(); - // Config files + // Config files (core only - no GLM/GLMT/Kimi auto-creation) this.ensureConfigJson(); - this.ensureGlmSettings(); - this.ensureGlmtSettings(); - this.ensureKimiSettings(); // Shell completions this.ensureShellCompletions(); diff --git a/src/web-server/routes/profile-routes.ts b/src/web-server/routes/profile-routes.ts index db0c382f..311d5426 100644 --- a/src/web-server/routes/profile-routes.ts +++ b/src/web-server/routes/profile-routes.ts @@ -1,5 +1,7 @@ /** * Profile Routes - CRUD operations for user profiles and accounts + * + * Uses unified config (config.yaml) when available, falls back to legacy (config.json). */ import { Router, Request, Response } from 'express'; @@ -7,13 +9,9 @@ import * as fs from 'fs'; import * as path from 'path'; import { getCcsDir } from '../../utils/config-manager'; import { isReservedName, RESERVED_PROFILE_NAMES } from '../../config/reserved-names'; -import { - readConfigSafe, - writeConfig, - isConfigured, - createSettingsFile, - updateSettingsFile, -} from './route-helpers'; +import { createApiProfile, removeApiProfile } from '../../api/services/profile-writer'; +import { apiProfileExists, listApiProfiles } from '../../api/services/profile-reader'; +import { updateSettingsFile } from './route-helpers'; const router = Router(); @@ -23,13 +21,13 @@ const router = Router(); * GET /api/profiles - List all profiles */ router.get('/', (_req: Request, res: Response) => { - const config = readConfigSafe(); - const profiles = Object.entries(config.profiles).map(([name, settingsPath]) => ({ - name, - settingsPath, - configured: isConfigured(name, config), + const result = listApiProfiles(); + // Map isConfigured -> configured for UI compatibility + const profiles = result.profiles.map((p) => ({ + name: p.name, + settingsPath: p.settingsPath, + configured: p.isConfigured, })); - res.json({ profiles }); }); @@ -53,31 +51,26 @@ router.post('/', (req: Request, res: Response): void => { return; } - const config = readConfigSafe(); - - if (config.profiles[name]) { + // Check if profile already exists (uses unified config when available) + if (apiProfileExists(name)) { res.status(409).json({ error: 'Profile already exists' }); return; } - // Ensure .ccs directory exists - if (!fs.existsSync(getCcsDir())) { - fs.mkdirSync(getCcsDir(), { recursive: true }); - } - - // Create settings file with model mapping - const settingsPath = createSettingsFile(name, baseUrl, apiKey, { - model, - opusModel, - sonnetModel, - haikuModel, + // Create profile using unified-config-aware service + const result = createApiProfile(name, baseUrl, apiKey, { + default: model || '', + opus: opusModel || model || '', + sonnet: sonnetModel || model || '', + haiku: haikuModel || model || '', }); - // Update config - config.profiles[name] = settingsPath; - writeConfig(config); + if (!result.success) { + res.status(500).json({ error: result.error || 'Failed to create profile' }); + return; + } - res.status(201).json({ name, settingsPath }); + res.status(201).json({ name, settingsPath: result.settingsFile }); }); /** @@ -87,9 +80,8 @@ router.put('/:name', (req: Request, res: Response): void => { const { name } = req.params; const { baseUrl, apiKey, model, opusModel, sonnetModel, haikuModel } = req.body; - const config = readConfigSafe(); - - if (!config.profiles[name]) { + // Check if profile exists (uses unified config when available) + if (!apiProfileExists(name)) { res.status(404).json({ error: 'Profile not found' }); return; } @@ -108,22 +100,19 @@ router.put('/:name', (req: Request, res: Response): void => { router.delete('/:name', (req: Request, res: Response): void => { const { name } = req.params; - const config = readConfigSafe(); - - if (!config.profiles[name]) { + // Check if profile exists (uses unified config when available) + if (!apiProfileExists(name)) { res.status(404).json({ error: 'Profile not found' }); return; } - // Delete settings file - const settingsPath = path.join(getCcsDir(), `${name}.settings.json`); - if (fs.existsSync(settingsPath)) { - fs.unlinkSync(settingsPath); - } + // Remove profile using unified-config-aware service + const result = removeApiProfile(name); - // Remove from config - delete config.profiles[name]; - writeConfig(config); + if (!result.success) { + res.status(500).json({ error: result.error || 'Failed to delete profile' }); + return; + } res.json({ name, deleted: true }); }); From 10cfe0fefad9892d1e6314122027dc05bea1a6bf Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 21:07:46 -0500 Subject: [PATCH 13/25] feat(ui): add provider preset categories with helper function - Add PresetCategory type (recommended/alternative) - Categorize OpenRouter as recommended, GLM/GLMT/Kimi as alternative - Add getPresetsByCategory() helper for filtering - Change GLM badge from 'Free' to 'Z.AI' for clarity --- ui/src/lib/provider-presets.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/ui/src/lib/provider-presets.ts b/ui/src/lib/provider-presets.ts index 8a0ade76..283404a7 100644 --- a/ui/src/lib/provider-presets.ts +++ b/ui/src/lib/provider-presets.ts @@ -3,6 +3,8 @@ * Pre-configured templates for common API providers */ +export type PresetCategory = 'recommended' | 'alternative'; + export interface ProviderPreset { id: string; name: string; @@ -16,11 +18,13 @@ export interface ProviderPreset { requiresApiKey: boolean; apiKeyPlaceholder: string; apiKeyHint?: string; + category: PresetCategory; } export const OPENROUTER_BASE_URL = 'https://openrouter.ai/api/v1'; export const PROVIDER_PRESETS: ProviderPreset[] = [ + // Recommended - OpenRouter { id: 'openrouter', name: 'OpenRouter', @@ -34,18 +38,21 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [ requiresApiKey: true, apiKeyPlaceholder: 'sk-or-...', apiKeyHint: 'Get your API key at openrouter.ai/keys', + category: 'recommended', }, + // Alternative providers - GLM/GLMT/Kimi { id: 'glm', name: 'GLM', description: 'Claude via Z.AI (GitHub Copilot)', baseUrl: 'https://api.z.ai/api/anthropic', defaultProfileName: 'glm', - badge: 'Free', + badge: 'Z.AI', defaultModel: 'glm-4.6', requiresApiKey: true, apiKeyPlaceholder: 'ghp_...', apiKeyHint: 'Get your API key from Z.AI', + category: 'alternative', }, { id: 'glmt', @@ -58,6 +65,7 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [ requiresApiKey: true, apiKeyPlaceholder: 'ghp_...', apiKeyHint: 'Same API key as GLM', + category: 'alternative', }, { id: 'kimi', @@ -70,9 +78,15 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [ requiresApiKey: true, apiKeyPlaceholder: 'sk-...', apiKeyHint: 'Get your API key from Moonshot AI', + category: 'alternative', }, ]; +/** Get presets by category */ +export function getPresetsByCategory(category: PresetCategory): ProviderPreset[] { + return PROVIDER_PRESETS.filter((p) => p.category === category); +} + /** Get preset by ID */ export function getPresetById(id: string): ProviderPreset | undefined { return PROVIDER_PRESETS.find((p) => p.id === id); From b9f6823fc93c42f0f9af85750386149635428aa0 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 21:08:23 -0500 Subject: [PATCH 14/25] refactor(ui): replace hardcoded orange colors with accent tokens - openrouter-badge: use accent/accent-foreground tokens - openrouter-banner: use accent gradient colors - openrouter-model-picker: use accent for sparkles and badges - openrouter-promo-card: use accent for backgrounds and text - openrouter-quick-start: use accent for icons, buttons, links Theme-aware colors for better dark mode support and customization. --- .../components/profiles/openrouter-badge.tsx | 4 ++-- .../components/profiles/openrouter-banner.tsx | 4 ++-- .../profiles/openrouter-model-picker.tsx | 24 +++++++++++++++---- .../profiles/openrouter-promo-card.tsx | 8 +++---- .../profiles/openrouter-quick-start.tsx | 14 +++++------ 5 files changed, 34 insertions(+), 20 deletions(-) diff --git a/ui/src/components/profiles/openrouter-badge.tsx b/ui/src/components/profiles/openrouter-badge.tsx index 54610e48..6f11e3b8 100644 --- a/ui/src/components/profiles/openrouter-badge.tsx +++ b/ui/src/components/profiles/openrouter-badge.tsx @@ -17,8 +17,8 @@ export function OpenRouterBadge({ className, showTooltip = true }: OpenRouterBad diff --git a/ui/src/components/profiles/openrouter-banner.tsx b/ui/src/components/profiles/openrouter-banner.tsx index 1a34f287..ac213f5b 100644 --- a/ui/src/components/profiles/openrouter-banner.tsx +++ b/ui/src/components/profiles/openrouter-banner.tsx @@ -33,7 +33,7 @@ export function OpenRouterBanner({ onCreateClick }: OpenRouterBannerProps) { if (dismissed) return null; return ( -
+
@@ -54,7 +54,7 @@ export function OpenRouterBanner({ onCreateClick }: OpenRouterBannerProps) { size="sm" variant="secondary" onClick={onCreateClick} - className="bg-white text-orange-600 hover:bg-white/90 h-8" + className="bg-white text-accent hover:bg-white/90 h-8" > Try it now diff --git a/ui/src/components/profiles/openrouter-model-picker.tsx b/ui/src/components/profiles/openrouter-model-picker.tsx index ffbdeaa8..ac938281 100644 --- a/ui/src/components/profiles/openrouter-model-picker.tsx +++ b/ui/src/components/profiles/openrouter-model-picker.tsx @@ -173,7 +173,7 @@ export function OpenRouterModelPicker({ {showPresets && newestModels.length > 0 && (
- + Newest Models
{newestModels.map((model) => ( @@ -232,14 +232,28 @@ function ModelItem({ type="button" onClick={onClick} className={cn( - 'hover:bg-accent flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm', - isSelected && 'bg-accent' + 'flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm transition-colors', + 'hover:bg-accent hover:text-accent-foreground', + isSelected && 'bg-accent text-accent-foreground' )} > {model.name} - + {showAge && model.created && ( - + {formatModelAge(model.created)} )} diff --git a/ui/src/components/profiles/openrouter-promo-card.tsx b/ui/src/components/profiles/openrouter-promo-card.tsx index 881f3368..ef3119d3 100644 --- a/ui/src/components/profiles/openrouter-promo-card.tsx +++ b/ui/src/components/profiles/openrouter-promo-card.tsx @@ -15,13 +15,13 @@ export function OpenRouterPromoCard({ onCreateClick }: OpenRouterPromoCardProps) const { modelCount, isLoading } = useOpenRouterReady(); return ( -
+
-
+
-

OpenRouter

+

OpenRouter

{isLoading ? '300+' : `${modelCount}+`} models available

@@ -30,7 +30,7 @@ export function OpenRouterPromoCard({ onCreateClick }: OpenRouterPromoCardProps) size="sm" variant="ghost" onClick={onCreateClick} - className="h-7 px-2 text-orange-600 hover:text-orange-700 hover:bg-orange-100 dark:hover:bg-orange-900/30" + className="h-7 px-2 text-accent hover:text-accent hover:bg-accent/10 dark:hover:bg-accent/20" > Add diff --git a/ui/src/components/profiles/openrouter-quick-start.tsx b/ui/src/components/profiles/openrouter-quick-start.tsx index c320bbbc..3d9260dc 100644 --- a/ui/src/components/profiles/openrouter-quick-start.tsx +++ b/ui/src/components/profiles/openrouter-quick-start.tsx @@ -25,15 +25,15 @@ export function OpenRouterQuickStart({
{/* Main OpenRouter Card */} - +
-
+
OpenRouter
Recommended @@ -48,18 +48,18 @@ export function OpenRouterQuickStart({ {/* Key Features */}
- + One API, all providers
- + Model tier mapping
+ {/* Provider Preset Cards - Compact horizontal layout */} +
+ {/* Main Options: OpenRouter + Custom */} +
+ +
+ {getPresetsByCategory('recommended').map((preset) => ( + handlePresetSelect(preset.id)} + /> + ))} + {/* Custom option */} + +
+ + {/* Show alternative presets when Custom is selected or an alternative is selected */} + {(selectedPreset === 'custom' || + getPresetsByCategory('alternative').some((p) => p.id === selectedPreset)) && ( +
+ +
+ {getPresetsByCategory('alternative').map((preset) => ( + handlePresetSelect(preset.id)} + /> + ))} +
+
+ )}
- {/* Base URL - only show for custom */} - {selectedPreset === 'custom' ? ( -
- - - {errors.baseUrl ? ( -

{errors.baseUrl.message}

- ) : urlWarning ? ( -
- - {urlWarning} -
- ) : ( -

- The endpoint that accepts OpenAI-compatible and Anthropic requests -

- )} -
- ) : ( - currentPreset && ( -
- {currentPreset.icon ? ( - - ) : ( - - )} -
-

{currentPreset.name} API

-

{currentPreset.baseUrl}

-
+ {/* Base URL - always editable, pre-filled from preset */} +
+ + + {errors.baseUrl ? ( +

{errors.baseUrl.message}

+ ) : urlWarning ? ( +
+ + {urlWarning}
- ) - )} + ) : currentPreset ? ( +

+ Pre-filled from {currentPreset.name}. You can customize if needed. +

+ ) : ( +

+ The endpoint that accepts OpenAI-compatible and Anthropic requests +

+ )} +
{/* API Key */}
@@ -392,7 +413,7 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr
{!modelSearch && (
- + Newest Models
)} @@ -506,8 +527,8 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr ); } -/** Preset card component */ -function PresetCard({ +/** Compact preset card component - horizontal layout */ +function CompactPresetCard({ preset, isSelected, onClick, @@ -521,24 +542,24 @@ function PresetCard({ type="button" onClick={onClick} className={cn( - 'flex flex-col items-center gap-1 p-3 rounded-lg border-2 transition-all text-center', + 'flex items-center gap-1.5 px-3 py-1.5 rounded-md border transition-all text-sm', isSelected ? preset.featured - ? 'border-orange-500 bg-orange-50 dark:bg-orange-950/20' - : 'border-primary bg-primary/5' + ? 'border-accent bg-accent/10 dark:bg-accent/20 font-medium' + : 'border-primary bg-primary/5 font-medium' : 'border-muted hover:border-muted-foreground/30' )} > {preset.icon ? ( - + ) : ( -
+
{preset.name.charAt(0)}
)} - {preset.name} + {preset.name} {preset.badge && ( - + {preset.badge} )} @@ -565,7 +586,7 @@ function ModelSearchItem({ {model.name} {showAge && model.created && ( - + {formatModelAge(model.created)} )} From 4f4ab43eb39576b5bd3dfc16ced306d0653e72f0 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 23:10:35 -0500 Subject: [PATCH 16/25] refactor(config): remove secrets.yaml architecture - delete secrets-manager.ts entirely - remove secrets API routes and client methods - simplify unified-config-types (remove vault/secrets) - update profile-reader to remove secrets loading - clean up unused hooks and API client methods --- src/api/services/profile-reader.ts | 25 +--- src/api/services/profile-writer.ts | 4 - src/auth/profile-detector.ts | 5 +- src/commands/api-command.ts | 4 +- src/config/index.ts | 1 - src/config/migration-manager.ts | 2 - src/config/secrets-manager.ts | 187 ------------------------- src/config/unified-config-types.ts | 33 +---- src/utils/config-manager.ts | 47 ++++++- src/web-server/routes/config-routes.ts | 33 ----- src/web-server/routes/index.ts | 3 +- tests/unit/unified-config.test.ts | 33 +---- ui/src/hooks/use-unified-config.ts | 27 ---- ui/src/lib/api-client.ts | 13 -- 14 files changed, 49 insertions(+), 368 deletions(-) delete mode 100644 src/config/secrets-manager.ts diff --git a/src/api/services/profile-reader.ts b/src/api/services/profile-reader.ts index fcc6d30e..7e6dd129 100644 --- a/src/api/services/profile-reader.ts +++ b/src/api/services/profile-reader.ts @@ -9,7 +9,6 @@ import * as fs from 'fs'; import * as path from 'path'; import { getCcsDir, loadConfig } from '../../utils/config-manager'; import { loadOrCreateUnifiedConfig, isUnifiedMode } from '../../config/unified-config-loader'; -import { getProfileSecrets } from '../../config/secrets-manager'; import type { ApiProfileInfo, CliproxyVariantInfo, ApiListResult } from './profile-types'; /** @@ -36,29 +35,7 @@ export function isApiProfileConfigured(apiName: string): boolean { const ccsDir = getCcsDir(); const settingsPath = path.join(ccsDir, `${apiName}.settings.json`); - if (isUnifiedMode()) { - // Check secrets.yaml first - const secrets = getProfileSecrets(apiName); - const secretToken = secrets?.ANTHROPIC_AUTH_TOKEN || ''; - if ( - secretToken.length > 0 && - !secretToken.includes('YOUR_') && - !secretToken.includes('your-') - ) { - return true; - } - - // Fallback: check settings.json file (profiles created via UI store keys here) - if (fs.existsSync(settingsPath)) { - const settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8')); - const token = settings?.env?.ANTHROPIC_AUTH_TOKEN || ''; - return token.length > 0 && !token.includes('YOUR_') && !token.includes('your-'); - } - - return false; - } - - // Legacy: check settings.json file + // Check settings.json file for API key if (!fs.existsSync(settingsPath)) return false; const settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8')); diff --git a/src/api/services/profile-writer.ts b/src/api/services/profile-writer.ts index b316d5d6..748c1fb4 100644 --- a/src/api/services/profile-writer.ts +++ b/src/api/services/profile-writer.ts @@ -11,7 +11,6 @@ import { saveUnifiedConfig, isUnifiedMode, } from '../../config/unified-config-loader'; -import { deleteAllProfileSecrets } from '../../config/secrets-manager'; import type { ModelMapping, CreateApiProfileResult, RemoveApiProfileResult } from './profile-types'; /** Create settings.json file for API profile (legacy format) */ @@ -152,9 +151,6 @@ function removeApiProfileUnified(name: string): void { } saveUnifiedConfig(config); - - // Remove any legacy secrets - deleteAllProfileSecrets(name); } /** Remove API profile from legacy config */ diff --git a/src/auth/profile-detector.ts b/src/auth/profile-detector.ts index ee2ffafd..72955947 100644 --- a/src/auth/profile-detector.ts +++ b/src/auth/profile-detector.ts @@ -16,7 +16,6 @@ import { findSimilarStrings } from '../utils/helpers'; import { Config, Settings, ProfileMetadata } from '../types'; import { UnifiedConfig, CopilotConfig } from '../config/unified-config-types'; import { loadUnifiedConfig, isUnifiedMode } from '../config/unified-config-loader'; -import { getProfileSecrets } from '../config/secrets-manager'; export type ProfileType = 'settings' | 'account' | 'cliproxy' | 'copilot' | 'default'; @@ -110,12 +109,10 @@ class ProfileDetector { const profile = config.profiles[profileName]; // Load env from settings file const settingsEnv = loadSettingsFromFile(profile.settings); - // Merge with secrets (for backward compat with any extracted secrets) - const secrets = getProfileSecrets(profileName); return { type: 'settings', name: profileName, - env: { ...settingsEnv, ...secrets }, + env: settingsEnv, }; } diff --git a/src/commands/api-command.ts b/src/commands/api-command.ts index fee28347..52f423a2 100644 --- a/src/commands/api-command.ts +++ b/src/commands/api-command.ts @@ -384,11 +384,9 @@ async function handleRemove(args: string[]): Promise { // Confirm deletion console.log(''); console.log(`API '${color(name, 'command')}' will be removed.`); + console.log(` Settings: ~/.ccs/${name}.settings.json`); if (isUsingUnifiedConfig()) { console.log(' Config: ~/.ccs/config.yaml'); - console.log(' Secrets: ~/.ccs/secrets.yaml'); - } else { - console.log(` Settings: ~/.ccs/${name}.settings.json`); } console.log(''); diff --git a/src/config/index.ts b/src/config/index.ts index ca503a7c..792133cc 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -15,7 +15,6 @@ export * from './reserved-names'; // Loaders export * from './unified-config-loader'; -export * from './secrets-manager'; // Migration export * from './migration-manager'; diff --git a/src/config/migration-manager.ts b/src/config/migration-manager.ts index bd011c79..142c57e6 100644 --- a/src/config/migration-manager.ts +++ b/src/config/migration-manager.ts @@ -224,11 +224,9 @@ export async function rollback(backupPath: string): Promise { try { // Remove new config files const configYaml = path.join(ccsDir, 'config.yaml'); - const secretsYaml = path.join(ccsDir, 'secrets.yaml'); const cacheDir = path.join(ccsDir, 'cache'); if (fs.existsSync(configYaml)) fs.unlinkSync(configYaml); - if (fs.existsSync(secretsYaml)) fs.unlinkSync(secretsYaml); // Restore cache files to original locations if (fs.existsSync(cacheDir)) { diff --git a/src/config/secrets-manager.ts b/src/config/secrets-manager.ts deleted file mode 100644 index c8c3d26e..00000000 --- a/src/config/secrets-manager.ts +++ /dev/null @@ -1,187 +0,0 @@ -/** - * Secrets Manager - * - * Handles loading and saving secrets (API keys, tokens) in a separate file - * with restricted permissions (chmod 600). - */ - -import * as fs from 'fs'; -import * as path from 'path'; -import * as yaml from 'js-yaml'; -import { getCcsDir } from '../utils/config-manager'; -import { SecretsConfig, isSecretsConfig, createEmptySecretsConfig } from './unified-config-types'; - -// Re-export from shared utility for backward compatibility -export { isSensitiveKey as isSecretKey } from '../utils/sensitive-keys'; - -const SECRETS_FILE = 'secrets.yaml'; -const SECRETS_FILE_MODE = 0o600; // Owner read/write only - -/** - * Get path to secrets.yaml - */ -export function getSecretsPath(): string { - return path.join(getCcsDir(), SECRETS_FILE); -} - -/** - * Check if secrets.yaml exists - */ -export function hasSecrets(): boolean { - return fs.existsSync(getSecretsPath()); -} - -/** - * Load secrets from YAML file. - * Returns empty secrets config if file doesn't exist. - */ -export function loadSecrets(): SecretsConfig { - const secretsPath = getSecretsPath(); - - if (!fs.existsSync(secretsPath)) { - return createEmptySecretsConfig(); - } - - try { - const content = fs.readFileSync(secretsPath, 'utf8'); - const parsed = yaml.load(content); - - if (!isSecretsConfig(parsed)) { - console.error(`[!] Invalid secrets format in ${secretsPath}`); - return createEmptySecretsConfig(); - } - - return parsed; - } catch (err) { - const error = err instanceof Error ? err.message : 'Unknown error'; - console.error(`[X] Failed to load secrets: ${error}`); - return createEmptySecretsConfig(); - } -} - -/** - * Save secrets to YAML file with restricted permissions. - * Uses atomic write (temp file + rename) to prevent corruption. - */ -export function saveSecrets(secrets: SecretsConfig): void { - const secretsPath = getSecretsPath(); - const dir = path.dirname(secretsPath); - - // Ensure directory exists - if (!fs.existsSync(dir)) { - fs.mkdirSync(dir, { recursive: true, mode: 0o700 }); - } - - // Convert to YAML - const content = yaml.dump(secrets, { - indent: 2, - lineWidth: -1, - quotingType: '"', - noRefs: true, - }); - - // Atomic write: write to temp file, then rename - const tempPath = `${secretsPath}.tmp.${process.pid}`; - - try { - fs.writeFileSync(tempPath, content, { mode: SECRETS_FILE_MODE }); - fs.renameSync(tempPath, secretsPath); - - // Ensure correct permissions after rename (some systems may not preserve) - fs.chmodSync(secretsPath, SECRETS_FILE_MODE); - } catch (err) { - // Clean up temp file on error - if (fs.existsSync(tempPath)) { - try { - fs.unlinkSync(tempPath); - } catch { - // Ignore cleanup errors - } - } - throw err; - } -} - -/** - * Get a secret value for a specific profile. - */ -export function getProfileSecret(profileName: string, key: string): string | undefined { - const secrets = loadSecrets(); - return secrets.profiles[profileName]?.[key]; -} - -/** - * Set a secret value for a specific profile. - */ -export function setProfileSecret(profileName: string, key: string, value: string): void { - const secrets = loadSecrets(); - - if (!secrets.profiles[profileName]) { - secrets.profiles[profileName] = {}; - } - - secrets.profiles[profileName][key] = value; - saveSecrets(secrets); -} - -/** - * Delete a secret value for a specific profile. - */ -export function deleteProfileSecret(profileName: string, key: string): boolean { - const secrets = loadSecrets(); - - if (!secrets.profiles[profileName]?.[key]) { - return false; - } - - delete secrets.profiles[profileName][key]; - - // Clean up empty profile object - if (Object.keys(secrets.profiles[profileName]).length === 0) { - delete secrets.profiles[profileName]; - } - - saveSecrets(secrets); - return true; -} - -/** - * Get all secrets for a profile. - */ -export function getProfileSecrets(profileName: string): Record { - const secrets = loadSecrets(); - return secrets.profiles[profileName] || {}; -} - -/** - * Set all secrets for a profile (replaces existing). - */ -export function setProfileSecrets( - profileName: string, - profileSecrets: Record -): void { - const secrets = loadSecrets(); - - if (Object.keys(profileSecrets).length === 0) { - delete secrets.profiles[profileName]; - } else { - secrets.profiles[profileName] = profileSecrets; - } - - saveSecrets(secrets); -} - -/** - * Delete all secrets for a profile. - */ -export function deleteAllProfileSecrets(profileName: string): boolean { - const secrets = loadSecrets(); - - if (!secrets.profiles[profileName]) { - return false; - } - - delete secrets.profiles[profileName]; - saveSecrets(secrets); - return true; -} diff --git a/src/config/unified-config-types.ts b/src/config/unified-config-types.ts index 271ee7f5..f8548cec 100644 --- a/src/config/unified-config-types.ts +++ b/src/config/unified-config-types.ts @@ -6,7 +6,7 @@ * - profiles.json (account metadata) * - *.settings.json (env vars) * - * Into a single config.yaml + secrets.yaml structure. + * Into a single config.yaml structure. */ /** @@ -321,18 +321,6 @@ export interface UnifiedConfig { cliproxy_server?: CliproxyServerConfig; } -/** - * Secrets configuration structure. - * Stored in ~/.ccs/secrets.yaml with chmod 600. - * Contains sensitive values like API keys. - */ -export interface SecretsConfig { - /** Secrets version */ - version: number; - /** Profile secrets mapping: profile_name -> { key: value } */ - profiles: Record>; -} - /** * Default Copilot configuration. * Strictly opt-in - disabled by default. @@ -422,16 +410,6 @@ export function createEmptyUnifiedConfig(): UnifiedConfig { }; } -/** - * Create an empty secrets config. - */ -export function createEmptySecretsConfig(): SecretsConfig { - return { - version: 1, - profiles: {}, - }; -} - /** * Type guard for UnifiedConfig. * Relaxed validation: accepts configs with version >= 1 and any subset of sections. @@ -444,12 +422,3 @@ export function isUnifiedConfig(obj: unknown): obj is UnifiedConfig { // Sections are optional - will be merged with defaults in loadOrCreateUnifiedConfig return typeof config.version === 'number' && config.version >= 1; } - -/** - * Type guard for SecretsConfig. - */ -export function isSecretsConfig(obj: unknown): obj is SecretsConfig { - if (typeof obj !== 'object' || obj === null) return false; - const config = obj as Record; - return typeof config.version === 'number' && typeof config.profiles === 'object'; -} diff --git a/src/utils/config-manager.ts b/src/utils/config-manager.ts index 23504e9a..034a47ec 100644 --- a/src/utils/config-manager.ts +++ b/src/utils/config-manager.ts @@ -4,6 +4,7 @@ import * as os from 'os'; import { Config, isConfig, Settings, isSettings } from '../types'; import { expandPath, error } from './helpers'; import { info } from './ui'; +import { isUnifiedMode, loadOrCreateUnifiedConfig } from '../config/unified-config-loader'; // TODO: Replace with proper imports after converting these files // const { ErrorManager } = require('./error-manager'); @@ -82,16 +83,52 @@ export function readConfig(): Config { } /** - * Get settings path for profile + * Get settings path for profile. + * In unified mode (config.yaml exists), reads from config.yaml first, + * then falls back to config.json for backward compatibility. */ export function getSettingsPath(profile: string): string { - const config = readConfig(); + let settingsPath: string | undefined; + let availableProfiles: string[] = []; - // Get settings path - const settingsPath = config.profiles[profile]; + // Check unified config first (config.yaml) + if (isUnifiedMode()) { + const unifiedConfig = loadOrCreateUnifiedConfig(); + + // Check if profile exists in unified config + const profileConfig = unifiedConfig.profiles[profile]; + if (profileConfig?.settings) { + settingsPath = profileConfig.settings; + } + + // Collect available profiles from unified config + availableProfiles = Object.keys(unifiedConfig.profiles); + + // If not found in unified config, try legacy config.json as fallback + if (!settingsPath) { + try { + const legacyConfig = loadConfig(); + if (legacyConfig.profiles[profile]) { + settingsPath = legacyConfig.profiles[profile]; + // Merge legacy profiles into available list (avoid duplicates) + for (const p of Object.keys(legacyConfig.profiles)) { + if (!availableProfiles.includes(p)) { + availableProfiles.push(p); + } + } + } + } catch { + // Legacy config doesn't exist or is invalid - that's OK in unified mode + } + } + } else { + // Legacy mode - read from config.json only + const config = readConfig(); + settingsPath = config.profiles[profile]; + availableProfiles = Object.keys(config.profiles); + } if (!settingsPath) { - const availableProfiles = Object.keys(config.profiles); const profileList = availableProfiles.map((p) => ` - ${p}`); error(`Profile '${profile}' not found. Available profiles:\n${profileList.join('\n')}`); } diff --git a/src/web-server/routes/config-routes.ts b/src/web-server/routes/config-routes.ts index 03bbc62c..1c1b7f20 100644 --- a/src/web-server/routes/config-routes.ts +++ b/src/web-server/routes/config-routes.ts @@ -17,7 +17,6 @@ import { rollback, getBackupDirectories, } from '../../config/migration-manager'; -import { getProfileSecrets, setProfileSecrets } from '../../config/secrets-manager'; import { isUnifiedConfig } from '../../config/unified-config-types'; const router = Router(); @@ -111,36 +110,4 @@ router.post('/rollback', async (req: Request, res: Response): Promise => { res.json({ success }); }); -/** - * PUT /api/secrets/:profile - Update profile secrets (write-only) - */ -router.put('/secrets/:profile', (req: Request, res: Response): void => { - const { profile } = req.params; - const secrets = req.body; - - if (!secrets || typeof secrets !== 'object') { - res.status(400).json({ error: 'Invalid secrets format' }); - return; - } - - try { - setProfileSecrets(profile, secrets as Record); - res.json({ success: true }); - } catch (err) { - res.status(500).json({ error: (err as Error).message }); - } -}); - -/** - * GET /api/secrets/:profile/exists - Check if secrets exist (no values returned) - */ -router.get('/secrets/:profile/exists', (req: Request, res: Response) => { - const { profile } = req.params; - const secrets = getProfileSecrets(profile); - res.json({ - exists: Object.keys(secrets).length > 0, - keys: Object.keys(secrets), // Only key names, not values - }); -}); - export default router; diff --git a/src/web-server/routes/index.ts b/src/web-server/routes/index.ts index 7b3f7266..819cb717 100644 --- a/src/web-server/routes/index.ts +++ b/src/web-server/routes/index.ts @@ -31,9 +31,8 @@ apiRoutes.use('/settings', settingsRoutes); apiRoutes.use('/accounts', profileRoutes); // ==================== Unified Config ==================== -// Config format, migration, secrets +// Config format, migration apiRoutes.use('/config', configRoutes); -apiRoutes.use('/secrets', configRoutes); // ==================== Health Checks ==================== apiRoutes.use('/health', healthRoutes); diff --git a/tests/unit/unified-config.test.ts b/tests/unit/unified-config.test.ts index b345bd34..eaeb30dc 100644 --- a/tests/unit/unified-config.test.ts +++ b/tests/unit/unified-config.test.ts @@ -11,14 +11,12 @@ import { } from '../../src/config/reserved-names'; import { createEmptyUnifiedConfig, - createEmptySecretsConfig, isUnifiedConfig, - isSecretsConfig, UNIFIED_CONFIG_VERSION, } from '../../src/config/unified-config-types'; import { isUnifiedConfigEnabled } from '../../src/config/feature-flags'; -// Inline helper to test secret key detection (copied from secrets-manager to avoid import chain) +// Inline helper to test secret key detection (utility kept for potential reuse) function isSecretKey(key: string): boolean { const upper = key.toUpperCase(); const secretPatterns = ['TOKEN', 'SECRET', 'API_KEY', 'APIKEY', 'PASSWORD', 'CREDENTIAL', 'AUTH', 'PRIVATE']; @@ -102,18 +100,6 @@ describe('unified-config-types', () => { }); }); - describe('createEmptySecretsConfig', () => { - it('should create secrets with version 1', () => { - const secrets = createEmptySecretsConfig(); - expect(secrets.version).toBe(1); - }); - - it('should have empty profiles', () => { - const secrets = createEmptySecretsConfig(); - expect(Object.keys(secrets.profiles)).toHaveLength(0); - }); - }); - describe('isUnifiedConfig', () => { it('should return true for valid config', () => { const config = createEmptyUnifiedConfig(); @@ -143,24 +129,9 @@ describe('unified-config-types', () => { expect(isUnifiedConfig({ version: -1 })).toBe(false); }); }); - - describe('isSecretsConfig', () => { - it('should return true for valid secrets', () => { - const secrets = createEmptySecretsConfig(); - expect(isSecretsConfig(secrets)).toBe(true); - }); - - it('should return false for null', () => { - expect(isSecretsConfig(null)).toBe(false); - }); - - it('should return false for missing fields', () => { - expect(isSecretsConfig({ version: 1 })).toBe(false); - }); - }); }); -describe('secrets-manager', () => { +describe('sensitive-keys', () => { describe('isSecretKey', () => { it('should identify token keys as secrets', () => { expect(isSecretKey('ANTHROPIC_AUTH_TOKEN')).toBe(true); diff --git a/ui/src/hooks/use-unified-config.ts b/ui/src/hooks/use-unified-config.ts index 0e27ce00..e0d1d021 100644 --- a/ui/src/hooks/use-unified-config.ts +++ b/ui/src/hooks/use-unified-config.ts @@ -98,30 +98,3 @@ export function useRollback() { }, }); } - -/** - * Update profile secrets - */ -export function useUpdateSecrets() { - return useMutation({ - mutationFn: ({ profile, secrets }: { profile: string; secrets: Record }) => - api.secrets.update(profile, secrets), - onSuccess: () => { - toast.success('Secrets updated successfully'); - }, - onError: (error: Error) => { - toast.error(error.message); - }, - }); -} - -/** - * Check if profile has secrets (doesn't return values) - */ -export function useSecretsExists(profile: string) { - return useQuery({ - queryKey: ['secrets-exists', profile], - queryFn: () => api.secrets.exists(profile), - enabled: !!profile, - }); -} diff --git a/ui/src/lib/api-client.ts b/ui/src/lib/api-client.ts index 5a4e8881..36254505 100644 --- a/ui/src/lib/api-client.ts +++ b/ui/src/lib/api-client.ts @@ -132,11 +132,6 @@ export interface MigrationResult { warnings: string[]; } -export interface SecretsExists { - exists: boolean; - keys: string[]; -} - /** Model preset for quick model switching */ export interface ModelPreset { name: string; @@ -369,14 +364,6 @@ export const api = { body: JSON.stringify({ backupPath }), }), }, - secrets: { - update: (profile: string, secrets: Record) => - request<{ success: boolean }>(`/secrets/${profile}`, { - method: 'PUT', - body: JSON.stringify(secrets), - }), - exists: (profile: string) => request(`/secrets/${profile}/exists`), - }, /** Model presets for quick model switching */ presets: { list: (profile: string) => request<{ presets: ModelPreset[] }>(`/settings/${profile}/presets`), From 7788137f1c407854d7d8aa5c10c18fd98dbafa2f Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 23:11:15 -0500 Subject: [PATCH 17/25] feat(ui): add streamlined OpenRouter profile editor - redesign friendly-ui-section with OpenRouter-specific view - add model selection, tier mapping, API key sections - compact ModelItem layout for better space efficiency - add onEnvBulkChange prop for atomic env updates --- .../profiles/editor/friendly-ui-section.tsx | 188 ++++++++++++++---- ui/src/components/profiles/editor/index.tsx | 2 +- .../profiles/openrouter-model-picker.tsx | 76 ++++--- .../profiles/profile-create-dialog.tsx | 24 ++- 4 files changed, 218 insertions(+), 72 deletions(-) diff --git a/ui/src/components/profiles/editor/friendly-ui-section.tsx b/ui/src/components/profiles/editor/friendly-ui-section.tsx index 2c7e6c08..109a3231 100644 --- a/ui/src/components/profiles/editor/friendly-ui-section.tsx +++ b/ui/src/components/profiles/editor/friendly-ui-section.tsx @@ -1,16 +1,22 @@ /** * Friendly UI Section * Left column with environment variables and info tabs - * Enhanced with OpenRouter model picker when applicable + * Enhanced with OpenRouter-specific streamlined UI when applicable */ -import { useMemo } from 'react'; +import { useMemo, useState } from 'react'; import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; import { EnvEditorSection } from './env-editor-section'; import { InfoSection } from './info-section'; import { OpenRouterModelPicker } from '@/components/profiles/openrouter-model-picker'; import { ModelTierMapping, type TierMapping } from '@/components/profiles/model-tier-mapping'; +import { Label } from '@/components/ui/label'; +import { MaskedInput } from '@/components/ui/masked-input'; +import { ChevronRight, Settings2 } from 'lucide-react'; import { isOpenRouterProfile, extractTierMapping, applyTierMapping } from './utils'; +import { toast } from 'sonner'; +import { cn } from '@/lib/utils'; import type { Settings, SettingsResponse } from './types'; interface FriendlyUISectionProps { @@ -46,9 +52,27 @@ export function FriendlyUISection({ // Memoize currentEnv for consistent reference const currentEnv = settingsEnv ?? {}; - // Handle model selection from OpenRouter picker + // Handle model selection from OpenRouter picker - applies to ALL tiers const handleModelChange = (modelId: string) => { - onEnvValueChange('ANTHROPIC_MODEL', modelId); + if (onEnvBulkChange) { + // Update all 4 model tiers at once + const newEnv = { + ...currentEnv, + ANTHROPIC_MODEL: modelId, + ANTHROPIC_DEFAULT_OPUS_MODEL: modelId, + ANTHROPIC_DEFAULT_SONNET_MODEL: modelId, + ANTHROPIC_DEFAULT_HAIKU_MODEL: modelId, + }; + onEnvBulkChange(newEnv); + } else { + // Fallback: update one by one + onEnvValueChange('ANTHROPIC_MODEL', modelId); + onEnvValueChange('ANTHROPIC_DEFAULT_OPUS_MODEL', modelId); + onEnvValueChange('ANTHROPIC_DEFAULT_SONNET_MODEL', modelId); + onEnvValueChange('ANTHROPIC_DEFAULT_HAIKU_MODEL', modelId); + } + // Show feedback toast + toast.success('Applied model to all tiers', { duration: 2000 }); }; // Handle tier mapping change @@ -71,13 +95,30 @@ export function FriendlyUISection({ } }; + // State for collapsible sections + const [showAllEnvVars, setShowAllEnvVars] = useState(false); + + // For OpenRouter: filter out model-related env vars from the main display + // These are managed by the model picker and tier mapping + const openRouterManagedKeys = new Set([ + 'ANTHROPIC_MODEL', + 'ANTHROPIC_DEFAULT_OPUS_MODEL', + 'ANTHROPIC_DEFAULT_SONNET_MODEL', + 'ANTHROPIC_DEFAULT_HAIKU_MODEL', + ]); + + // Count of hidden env vars for OpenRouter profiles + const hiddenEnvVarCount = isOpenRouter + ? Object.keys(currentEnv).filter((k) => openRouterManagedKeys.has(k)).length + : 0; + return ( -
- +
+
- Environment Variables + {isOpenRouter ? 'Configuration' : 'Environment Variables'} Info & Usage @@ -85,39 +126,114 @@ export function FriendlyUISection({
-
+
- {/* OpenRouter Model Picker Section */} - {isOpenRouter && ( -
-
- - -
- -
- )} + {/* OpenRouter Streamlined View */} + {isOpenRouter ? ( +
+
+ {/* Model Selection - Primary Focus */} +
+ + +
- + {/* Model Tier Mapping - Collapsible */} + + + {/* API Key - Simplified */} +
+ + onEnvValueChange('ANTHROPIC_AUTH_TOKEN', e.target.value)} + placeholder="sk-or-v1-..." + className="font-mono text-sm" + /> +

+ Get your API key from{' '} + + openrouter.ai/keys + +

+
+ + {/* Advanced: All Environment Variables */} + + + + + All Environment Variables + + ({Object.keys(currentEnv).length} vars + {hiddenEnvVarCount > 0 && `, ${hiddenEnvVarCount} managed by picker`}) + + + +
+ {Object.entries(currentEnv).map(([key, value]) => ( +
+ + {key === 'ANTHROPIC_AUTH_TOKEN' ? ( + onEnvValueChange(key, e.target.value)} + className="font-mono text-xs h-8" + /> + ) : ( + onEnvValueChange(key, e.target.value)} + className="w-full font-mono text-xs h-8 px-2 rounded border bg-background" + readOnly={openRouterManagedKeys.has(key)} + /> + )} +
+ ))} +
+ + +
+
+ ) : ( + /* Standard Env Editor for non-OpenRouter profiles */ + + )} ) : (
-
+
+
{/* Search Header */}
@@ -155,7 +155,7 @@ export function OpenRouterModelPicker({ )} {/* Model List */} - + {isError ? (
Failed to load models.{' '} @@ -168,23 +168,25 @@ export function OpenRouterModelPicker({ No models found matching "{search}"
) : ( -
+
{/* Newest Models Section (shown when no search) */} {showPresets && newestModels.length > 0 && (
-
+
Newest Models
- {newestModels.map((model) => ( - onChange(model.id)} - showAge - /> - ))} +
+ {newestModels.map((model) => ( + onChange(model.id)} + showAge + /> + ))} +
)} @@ -195,17 +197,19 @@ export function OpenRouterModelPicker({ return (
-
+
{CATEGORY_LABELS[category]}
- {categoryModels.map((model) => ( - onChange(model.id)} - /> - ))} +
+ {categoryModels.map((model) => ( + onChange(model.id)} + /> + ))} +
); })} @@ -232,39 +236,49 @@ function ModelItem({ type="button" onClick={onClick} className={cn( - 'flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm transition-colors', + 'group flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors', 'hover:bg-accent hover:text-accent-foreground', isSelected && 'bg-accent text-accent-foreground' )} > - {model.name} + {model.name} {showAge && model.created && ( {formatModelAge(model.created)} )} {model.isFree ? ( - + Free ) : ( - {formatPricingPair(model.pricing)} + {formatPricingPair(model.pricing)} )} - {formatContextLength(model.context_length)} + {formatContextLength(model.context_length)} ); diff --git a/ui/src/components/profiles/profile-create-dialog.tsx b/ui/src/components/profiles/profile-create-dialog.tsx index 5f17a911..30f46e30 100644 --- a/ui/src/components/profiles/profile-create-dialog.tsx +++ b/ui/src/components/profiles/profile-create-dialog.tsx @@ -164,6 +164,10 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr setValue('sonnetModel', model.id); setValue('haikuModel', model.id); setModelSearch(model.name); + // Show feedback that model was applied to all tiers + toast.success(`Applied "${model.name}" to all model tiers`, { + duration: 2000, + }); }; // Check for common URL mistakes - only for truly custom URLs @@ -401,6 +405,12 @@ export function ProfileCreateDialog({ open, onOpenChange, onSuccess }: ProfileCr value={modelSearch} onChange={(e) => setModelSearch(e.target.value)} placeholder="Type to search (e.g., opus, sonnet, gpt-4o)..." + onKeyDown={(e) => { + if (e.key === 'Enter' && filteredModels.length > 0) { + e.preventDefault(); + handleModelSelect(filteredModels[0]); + } + }} />
{filteredModels.length === 0 ? ( @@ -581,17 +591,23 @@ function ModelSearchItem({ +
+
+ ) : ( /* Standard Env Editor for non-OpenRouter profiles */ Date: Sat, 20 Dec 2025 23:22:04 -0500 Subject: [PATCH 20/25] feat(ui): add value input for new environment variables - Add newEnvValue state to profile editor - Update add variable section to include key + value inputs - Apply to both OpenRouter and standard profile editors - Clear both key and value after adding variable --- .../profiles/editor/env-editor-section.tsx | 15 +++++++++++++-- .../profiles/editor/friendly-ui-section.tsx | 17 +++++++++++++++-- ui/src/components/profiles/editor/index.tsx | 9 +++++++-- 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/ui/src/components/profiles/editor/env-editor-section.tsx b/ui/src/components/profiles/editor/env-editor-section.tsx index 2bee9534..f9ff8c30 100644 --- a/ui/src/components/profiles/editor/env-editor-section.tsx +++ b/ui/src/components/profiles/editor/env-editor-section.tsx @@ -16,7 +16,9 @@ import type { Settings } from './types'; interface EnvEditorSectionProps { currentSettings: Settings | undefined; newEnvKey: string; + newEnvValue: string; onNewEnvKeyChange: (value: string) => void; + onNewEnvValueChange: (value: string) => void; onEnvValueChange: (key: string, value: string) => void; onAddEnvVar: () => void; } @@ -24,7 +26,9 @@ interface EnvEditorSectionProps { export function EnvEditorSection({ currentSettings, newEnvKey, + newEnvValue, onNewEnvKeyChange, + onNewEnvValueChange, onEnvValueChange, onAddEnvVar, }: EnvEditorSectionProps) { @@ -82,8 +86,15 @@ export function EnvEditorSection({ placeholder="VARIABLE_NAME" value={newEnvKey} onChange={(e) => onNewEnvKeyChange(e.target.value.toUpperCase())} - className="font-mono text-sm h-8" - onKeyDown={(e) => e.key === 'Enter' && onAddEnvVar()} + className="font-mono text-sm h-8 w-2/5" + onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()} + /> + onNewEnvValueChange(e.target.value)} + className="font-mono text-sm h-8 flex-1" + onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()} />
From 7d4961e7a955dd48075aae7e215b3f0aaf4367ef Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 23:31:11 -0500 Subject: [PATCH 22/25] fix(openrouter): correct ANTHROPIC_BASE_URL to https://openrouter.ai/api Update OPENROUTER_BASE_URL in provider presets (CLI and UI) which is used as ANTHROPIC_BASE_URL when creating OpenRouter profiles. --- src/api/services/provider-presets.ts | 2 +- ui/src/lib/provider-presets.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/services/provider-presets.ts b/src/api/services/provider-presets.ts index 597a102a..d4d1d1a0 100644 --- a/src/api/services/provider-presets.ts +++ b/src/api/services/provider-presets.ts @@ -23,7 +23,7 @@ export interface ProviderPreset { alwaysThinkingEnabled?: boolean; } -export const OPENROUTER_BASE_URL = 'https://openrouter.ai/api/v1'; +export const OPENROUTER_BASE_URL = 'https://openrouter.ai/api'; /** * Provider presets available via CLI and UI diff --git a/ui/src/lib/provider-presets.ts b/ui/src/lib/provider-presets.ts index 283404a7..6761640c 100644 --- a/ui/src/lib/provider-presets.ts +++ b/ui/src/lib/provider-presets.ts @@ -21,7 +21,7 @@ export interface ProviderPreset { category: PresetCategory; } -export const OPENROUTER_BASE_URL = 'https://openrouter.ai/api/v1'; +export const OPENROUTER_BASE_URL = 'https://openrouter.ai/api'; export const PROVIDER_PRESETS: ProviderPreset[] = [ // Recommended - OpenRouter From ebc8ee2638a10500c85f0af862f9d99589429b89 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 23:38:07 -0500 Subject: [PATCH 23/25] feat(openrouter): prioritize Exacto models for better agentic performance - Add isExacto field to CategorizedModel for models with :exacto suffix - Add sortModelsByPriority function (Free > Exacto > Regular) - Apply priority sorting within each category in model picker - Add visual "Exacto" badge (green outline) for exacto variants Exacto models are OpenRouter's specialized variants optimized for tool use and agentic behaviors, recommended for Claude Code. --- .../profiles/openrouter-model-picker.tsx | 23 ++++++++++++++++++- ui/src/lib/openrouter-types.ts | 1 + ui/src/lib/openrouter-utils.ts | 22 ++++++++++++++++++ 3 files changed, 45 insertions(+), 1 deletion(-) diff --git a/ui/src/components/profiles/openrouter-model-picker.tsx b/ui/src/components/profiles/openrouter-model-picker.tsx index 8cb9b45a..a6662c98 100644 --- a/ui/src/components/profiles/openrouter-model-picker.tsx +++ b/ui/src/components/profiles/openrouter-model-picker.tsx @@ -13,6 +13,7 @@ import { Search, RefreshCw, Loader2, Sparkles } from 'lucide-react'; import { useOpenRouterCatalog, useRefreshOpenRouterModels } from '@/hooks/use-openrouter-models'; import { searchModels, + sortModelsByPriority, formatPricingPair, formatContextLength, formatModelAge, @@ -56,7 +57,7 @@ export function OpenRouterModelPicker({ // Determine if we should show presets (no search query and no category filter) const showPresets = !search.trim() && !selectedCategory; - // Group by category + // Group by category and sort each group by priority (Free > Exacto > Regular) const groupedModels = useMemo(() => { const groups: Record = { anthropic: [], @@ -72,6 +73,11 @@ export function OpenRouterModelPicker({ groups[model.category].push(model); }); + // Sort each category by priority + for (const category of Object.keys(groups) as ModelCategory[]) { + groups[category] = sortModelsByPriority(groups[category]); + } + return groups; }, [filteredModels]); @@ -275,6 +281,21 @@ function ModelItem({ > Free + ) : model.isExacto ? ( + <> + + Exacto + + {formatPricingPair(model.pricing)} + ) : ( {formatPricingPair(model.pricing)} )} diff --git a/ui/src/lib/openrouter-types.ts b/ui/src/lib/openrouter-types.ts index b535883d..c3bab395 100644 --- a/ui/src/lib/openrouter-types.ts +++ b/ui/src/lib/openrouter-types.ts @@ -69,4 +69,5 @@ export interface CategorizedModel extends OpenRouterModel { pricePerMillionPrompt: number; pricePerMillionCompletion: number; isFree: boolean; + isExacto: boolean; // Models with :exacto suffix - optimized for tool use } diff --git a/ui/src/lib/openrouter-utils.ts b/ui/src/lib/openrouter-utils.ts index 80b9f5a8..d651b62c 100644 --- a/ui/src/lib/openrouter-utils.ts +++ b/ui/src/lib/openrouter-utils.ts @@ -54,6 +54,7 @@ export function enrichModel(model: OpenRouterModel): CategorizedModel { pricePerMillionPrompt: pricePerMillion(model.pricing.prompt), pricePerMillionCompletion: pricePerMillion(model.pricing.completion), isFree: model.pricing.prompt === '0' && model.pricing.completion === '0', + isExacto: model.id.includes(':exacto'), // Exacto variants - optimized for agentic/tool use }; } @@ -85,6 +86,27 @@ export function searchModels( }); } +/** + * Sort models with priority: Free > Exacto > Regular + * Within each tier, sort by name alphabetically + */ +export function sortModelsByPriority(models: CategorizedModel[]): CategorizedModel[] { + return [...models].sort((a, b) => { + // Priority 1: Free models first + if (a.isFree && !b.isFree) return -1; + if (!a.isFree && b.isFree) return 1; + + // Priority 2: Exacto models second (only if both not free) + if (!a.isFree && !b.isFree) { + if (a.isExacto && !b.isExacto) return -1; + if (!a.isExacto && b.isExacto) return 1; + } + + // Same tier: sort by name + return a.name.localeCompare(b.name); + }); +} + /** Get cached models from localStorage */ export function getCachedModels(): OpenRouterModel[] | null { try { From 70bc44eb11a28ec3e338d9ef45d33d9beaac6873 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 23:43:52 -0500 Subject: [PATCH 24/25] fix(openrouter): add ANTHROPIC_API_KEY="" default for OpenRouter profiles Per OpenRouter requirements, explicitly blank out the Anthropic API key to prevent conflicts when using OpenRouter's API. The key is visible in the "Additional Variables" section of the profile editor. --- src/api/services/profile-writer.ts | 9 +++++++++ .../components/profiles/editor/friendly-ui-section.tsx | 1 + 2 files changed, 10 insertions(+) diff --git a/src/api/services/profile-writer.ts b/src/api/services/profile-writer.ts index 748c1fb4..e48ff6fa 100644 --- a/src/api/services/profile-writer.ts +++ b/src/api/services/profile-writer.ts @@ -13,6 +13,11 @@ import { } from '../../config/unified-config-loader'; import type { ModelMapping, CreateApiProfileResult, RemoveApiProfileResult } from './profile-types'; +/** Check if URL is an OpenRouter endpoint */ +function isOpenRouterUrl(baseUrl: string): boolean { + return baseUrl.toLowerCase().includes('openrouter.ai'); +} + /** Create settings.json file for API profile (legacy format) */ function createSettingsFile( name: string, @@ -31,6 +36,8 @@ function createSettingsFile( ANTHROPIC_DEFAULT_OPUS_MODEL: models.opus, ANTHROPIC_DEFAULT_SONNET_MODEL: models.sonnet, ANTHROPIC_DEFAULT_HAIKU_MODEL: models.haiku, + // OpenRouter requires explicitly blanking the API key to prevent conflicts + ...(isOpenRouterUrl(baseUrl) && { ANTHROPIC_API_KEY: '' }), }, }; @@ -82,6 +89,8 @@ function createApiProfileUnified( ANTHROPIC_DEFAULT_OPUS_MODEL: models.opus, ANTHROPIC_DEFAULT_SONNET_MODEL: models.sonnet, ANTHROPIC_DEFAULT_HAIKU_MODEL: models.haiku, + // OpenRouter requires explicitly blanking the API key to prevent conflicts + ...(isOpenRouterUrl(baseUrl) && { ANTHROPIC_API_KEY: '' }), }, }; diff --git a/ui/src/components/profiles/editor/friendly-ui-section.tsx b/ui/src/components/profiles/editor/friendly-ui-section.tsx index e45ebe59..00312d0b 100644 --- a/ui/src/components/profiles/editor/friendly-ui-section.tsx +++ b/ui/src/components/profiles/editor/friendly-ui-section.tsx @@ -111,6 +111,7 @@ export function FriendlyUISection({ 'ANTHROPIC_DEFAULT_SONNET_MODEL', 'ANTHROPIC_DEFAULT_HAIKU_MODEL', 'ANTHROPIC_AUTH_TOKEN', // Managed by API Key section + 'ANTHROPIC_BASE_URL', // Base URL shown in profile header ]); // Get non-managed env vars for display in "Additional Variables" From f41d361fe547c0201b4d49c542391b4e5d96b93e Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Sat, 20 Dec 2025 23:47:14 -0500 Subject: [PATCH 25/25] fix(openrouter): show all env vars except API key in Additional Variables Only hide ANTHROPIC_AUTH_TOKEN (has dedicated input). Show all other env vars (BASE_URL, MODEL, tier models, API_KEY, etc.) in the "Additional Variables" section for full visibility. --- ui/src/components/profiles/editor/friendly-ui-section.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/ui/src/components/profiles/editor/friendly-ui-section.tsx b/ui/src/components/profiles/editor/friendly-ui-section.tsx index 00312d0b..f193290c 100644 --- a/ui/src/components/profiles/editor/friendly-ui-section.tsx +++ b/ui/src/components/profiles/editor/friendly-ui-section.tsx @@ -104,14 +104,10 @@ export function FriendlyUISection({ // State for collapsible sections const [showAllEnvVars, setShowAllEnvVars] = useState(false); - // For OpenRouter: keys managed by dedicated UI sections + // For OpenRouter: only hide API key (has dedicated input above) + // Show all other env vars in "Additional Variables" section const openRouterManagedKeys = new Set([ - 'ANTHROPIC_MODEL', - 'ANTHROPIC_DEFAULT_OPUS_MODEL', - 'ANTHROPIC_DEFAULT_SONNET_MODEL', - 'ANTHROPIC_DEFAULT_HAIKU_MODEL', 'ANTHROPIC_AUTH_TOKEN', // Managed by API Key section - 'ANTHROPIC_BASE_URL', // Base URL shown in profile header ]); // Get non-managed env vars for display in "Additional Variables"