Merge pull request #1652 from minhbi245/feat/fable-tier-mapping

feat(ui): add fable tier row in model mapping

ui/src/components/cliproxy/provider-editor/index.tsx

@@ -122,6 +122,7 @@ export function ProviderEditor({
     opusModel,
     sonnetModel,
     haikuModel,
+    fableModel,
     extendedContextEnabled,
     toggleExtendedContext,
     handleRawJsonChange,
@@ -271,6 +272,7 @@ export function ProviderEditor({
                     opusModel={opusModel}
                     sonnetModel={sonnetModel}
                     haikuModel={haikuModel}
+                    fableModel={fableModel}
                     providerModels={providerModels}
                     routing={routing}
                     extendedContextEnabled={extendedContextEnabled}

ui/src/components/cliproxy/provider-editor/model-config-section.tsx

@@ -43,6 +43,7 @@ export function ModelConfigSection({
   opusModel,
   sonnetModel,
   haikuModel,
+  fableModel,
   providerModels,
   routing,
   provider,
@@ -67,7 +68,7 @@ export function ModelConfigSection({
   const extendedContextModels = useMemo(() => {
     if (!catalog) return [];
 
-    const selectedModels = [currentModel, opusModel, sonnetModel, haikuModel]
+    const selectedModels = [currentModel, opusModel, sonnetModel, haikuModel, fableModel]
       .filter((modelId): modelId is string => Boolean(modelId))
       .map((modelId) => stripExtendedContextSuffix(modelId));
 
@@ -75,7 +76,7 @@ export function ModelConfigSection({
     return uniqueIds
       .map((modelId) => findCatalogModel(catalog.provider, modelId, catalog))
       .filter((model): model is NonNullable<typeof model> => Boolean(model?.extendedContext));
-  }, [catalog, currentModel, opusModel, sonnetModel, haikuModel]);
+  }, [catalog, currentModel, opusModel, sonnetModel, haikuModel, fableModel]);
 
   const resolvedCatalogModels = useMemo(
     () => getResolvedCatalogModels(catalog, providerModels),
@@ -253,6 +254,15 @@ export function ModelConfigSection({
               onToggle={onExtendedContextToggle}
             />
           )}
+          <FlexibleModelSelector
+            label="Fable (Frontier)"
+            description="Maps the fable subagent tier; leave empty to keep the native Claude Fable model"
+            value={fableModel}
+            onChange={(model) => onUpdateEnvValue('ANTHROPIC_DEFAULT_FABLE_MODEL', model)}
+            catalog={catalog}
+            allModels={providerModels}
+            routing={routing}
+          />
           <FlexibleModelSelector
             label="Opus (Most capable)"
             description="For complex reasoning tasks"

ui/src/components/cliproxy/provider-editor/model-config-tab.tsx

@@ -27,6 +27,7 @@ interface ModelConfigTabProps {
   opusModel?: string;
   sonnetModel?: string;
   haikuModel?: string;
+  fableModel?: string;
   providerModels: Array<{ id: string; owned_by: string }>;
   routing?: CliproxyProviderRoutingHints;
   /** Whether extended context (1M tokens) is enabled */
@@ -72,6 +73,7 @@ export function ModelConfigTab({
   opusModel,
   sonnetModel,
   haikuModel,
+  fableModel,
   providerModels,
   routing,
   extendedContextEnabled,
@@ -163,6 +165,7 @@ export function ModelConfigTab({
           opusModel={opusModel}
           sonnetModel={sonnetModel}
           haikuModel={haikuModel}
+          fableModel={fableModel}
           providerModels={providerModels}
           routing={routing}
           provider={provider}

ui/src/components/cliproxy/provider-editor/types.ts

@@ -126,6 +126,7 @@ export interface ModelConfigSectionProps {
   opusModel?: string;
   sonnetModel?: string;
   haikuModel?: string;
+  fableModel?: string;
   providerModels: Array<{ id: string; owned_by: string }>;
   routing?: CliproxyProviderRoutingHints;
   /** Provider name for display */
@@ -154,6 +155,7 @@ export interface UseProviderEditorReturn {
   opusModel?: string;
   sonnetModel?: string;
   haikuModel?: string;
+  fableModel?: string;
   /** Whether extended context (1M tokens) is enabled */
   extendedContextEnabled: boolean;
   /** Toggle extended context on/off */

ui/src/components/cliproxy/provider-editor/use-provider-editor.ts

@@ -85,6 +85,7 @@ export function useProviderEditor(
   const opusModel = currentSettings?.env?.ANTHROPIC_DEFAULT_OPUS_MODEL;
   const sonnetModel = currentSettings?.env?.ANTHROPIC_DEFAULT_SONNET_MODEL;
   const haikuModel = currentSettings?.env?.ANTHROPIC_DEFAULT_HAIKU_MODEL;
+  const fableModel = currentSettings?.env?.ANTHROPIC_DEFAULT_FABLE_MODEL;
 
   // Extended context is enabled if any model has [1m] suffix
   const extendedContextEnabled = useMemo(() => {
@@ -224,6 +225,7 @@ export function useProviderEditor(
     opusModel,
     sonnetModel,
     haikuModel,
+    fableModel,
     extendedContextEnabled,
     toggleExtendedContext,
     handleRawJsonChange,