diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/AutoRoutersPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/AutoRoutersPanel.tsx index f11b74c939d..1625e0cbfb8 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/AutoRoutersPanel.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/AutoRoutersPanel.tsx @@ -104,8 +104,8 @@ export function AutoRoutersPanel({ Add Auto Router - Routes each request to a model by classifying its complexity. Called like any other model, so clients keep - using a single model name. + Choose a classifier to route each request to a model. Called like any other model, so clients keep using a + single model name. Array.from(new Set(models)); const COMPLEXITY_TYPE_LABELS: Record = { llm: "LLM Classifier", + capability: "Capability", + llm_v2: "Fuse v2", heuristic_first: "Heuristic first", hybrid: "Hybrid", custom: "Custom classifier", diff --git a/ui/litellm-dashboard/src/components/add_model/AutoRouterClassifierTabs.integration.test.tsx b/ui/litellm-dashboard/src/components/add_model/AutoRouterClassifierTabs.integration.test.tsx new file mode 100644 index 00000000000..ac6851349ea --- /dev/null +++ b/ui/litellm-dashboard/src/components/add_model/AutoRouterClassifierTabs.integration.test.tsx @@ -0,0 +1,75 @@ +import React, { useState } from "react"; +import { describe, expect, it, vi } from "vitest"; +import { fireEvent, renderWithProviders, screen } from "../../../tests/test-utils"; +import AutoRouterClassifierTabs from "./AutoRouterClassifierTabs"; +import type { ComplexityRouterConfigValue } from "./ComplexityRouterConfig"; + +const initial: ComplexityRouterConfigValue = { + classifier_type: "llm", + tiers: { SIMPLE: ["efficient"], MEDIUM: [], COMPLEX: [], REASONING: ["capable"] }, +}; + +function Form({ initialValue = initial }: { initialValue?: ComplexityRouterConfigValue }) { + const [value, setValue] = useState(initialValue); + return ( + + {value.classifier_type} + + ); +} + +describe("AutoRouterClassifierTabs", () => { + it.each(["heuristic", "heuristic_v2", "llm", "heuristic_first", "hybrid"] as const)( + "groups %s under Complexity without resetting its configuration", + (classifier_type) => { + const onChange = vi.fn(); + renderWithProviders( + + Existing classifier settings + , + ); + expect(screen.getByRole("tab", { name: "Complexity" })).toHaveAttribute("aria-selected", "true"); + expect(screen.getByRole("tabpanel", { name: "Complexity" })).toHaveTextContent("Existing classifier settings"); + fireEvent.click(screen.getByRole("tab", { name: "Complexity" })); + expect(onChange).not.toHaveBeenCalled(); + }, + ); + + it.each([ + ["capability", "Capability"], + ["llm_v2", "Fuse v2"], + ] as const)("opens saved %s settings and switches back to local Complexity", (classifier_type, label) => { + renderWithProviders(
); + expect(screen.getByRole("tab", { name: label })).toHaveAttribute("aria-selected", "true"); + fireEvent.click(screen.getByRole("tab", { name: "Complexity" })); + expect(screen.getByRole("tab", { name: "Complexity" })).toHaveAttribute("aria-selected", "true"); + expect(screen.getByRole("status", { name: "Classifier type" })).toHaveTextContent("heuristic"); + }); + + it("keeps custom tiers editable under Complexity and explains why forecast tabs are disabled", () => { + const onChange = vi.fn(); + renderWithProviders( + + Custom tiers + , + ); + expect(screen.getByRole("tabpanel", { name: "Complexity" })).toHaveTextContent("Custom tiers"); + for (const name of ["Capability", "Fuse v2"]) { + const tab = screen.getByRole("tab", { name }); + expect(tab).toHaveAttribute("aria-disabled", "true"); + expect(tab).toHaveAccessibleDescription("Restore standard tiers to use Capability or Fuse v2."); + fireEvent.click(tab); + } + expect(onChange).not.toHaveBeenCalled(); + expect(screen.getByText("Restore standard tiers to use Capability or Fuse v2.")).toBeVisible(); + }); +}); diff --git a/ui/litellm-dashboard/src/components/add_model/AutoRouterClassifierTabs.tsx b/ui/litellm-dashboard/src/components/add_model/AutoRouterClassifierTabs.tsx new file mode 100644 index 00000000000..98c0d4aab2f --- /dev/null +++ b/ui/litellm-dashboard/src/components/add_model/AutoRouterClassifierTabs.tsx @@ -0,0 +1,58 @@ +import React, { useId } from "react"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { effectiveClassifierType, type ComplexityRouterConfigValue } from "./ComplexityRouterConfig"; +import { transitionClassifierType } from "./classifier_type_transition"; +import { isForecastClassifier } from "./forecast_classifier_config"; + +interface AutoRouterClassifierTabsProps { + value: ComplexityRouterConfigValue; + onChange: (value: ComplexityRouterConfigValue) => void; + children: React.ReactNode; +} + +const AutoRouterClassifierTabs: React.FC = ({ value, onChange, children }) => { + const restrictionId = useId(); + const classifierType = effectiveClassifierType(value); + const selected = isForecastClassifier(classifierType) ? classifierType : "complexity"; + const hasCustomTiers = Boolean(value.custom_tier_set); + + const handleChange = (tab: unknown) => { + if (tab === selected) return; + if (tab === "complexity") { + onChange(transitionClassifierType(value, isForecastClassifier(classifierType) ? "heuristic" : classifierType)); + } else if (!hasCustomTiers && (tab === "capability" || tab === "llm_v2")) { + onChange(transitionClassifierType(value, tab)); + } + }; + + return ( + +

Classifier type

+ + Complexity + + Capability + + + Fuse v2 + + + {hasCustomTiers && ( +

+ Restore standard tiers to use Capability or Fuse v2. +

+ )} + {children} + + ); +}; + +export default AutoRouterClassifierTabs; diff --git a/ui/litellm-dashboard/src/components/add_model/ClassificationMethodConfig.tsx b/ui/litellm-dashboard/src/components/add_model/ClassificationMethodConfig.tsx index a6f2e65793a..64b08fc9ed1 100644 --- a/ui/litellm-dashboard/src/components/add_model/ClassificationMethodConfig.tsx +++ b/ui/litellm-dashboard/src/components/add_model/ClassificationMethodConfig.tsx @@ -1,3 +1,4 @@ +import { transitionClassifierType } from "./classifier_type_transition"; import { Info } from "lucide-react"; import { SimpleTooltip } from "@/components/ui/tooltip"; import { MultiSelect } from "@/components/shared/MultiSelect"; @@ -17,7 +18,6 @@ import ClassifierReasoningEffortSelect from "./ClassifierReasoningEffortSelect"; import ClassifierCircuitBreakerConfig from "./ClassifierCircuitBreakerConfig"; import ClassifierVisionConfig from "./ClassifierVisionConfig"; import type { ReasoningEffort } from "./complexity_router_tiers"; -import { nonReasoningTierFields } from "./nonReasoningTierFields"; import { useComplexityScorerDefaults } from "@/app/(dashboard)/hooks/autoRouter/useComplexityScorerDefaults"; import { ClassificationFrequency, @@ -33,12 +33,10 @@ import { DEFAULT_CLASSIFIER_FALLBACK, DEFAULT_CLASSIFIER_TIMEOUT_MS, DEFAULT_CLASSIFICATION_RUBRIC, - NEW_CLASSIFIER_CLASSIFICATION_RUBRIC, ClassificationRubric, effectiveTierLabel, heuristicScoringRole, usesLlmClassifier, - DEFAULT_HEURISTIC_FIRST_MAX_TIER, DEFAULT_HYBRID_BOUNDARY_MARGIN, HEURISTIC_FIRST_MAX_TIER_KEYS, effectiveClassifierType, @@ -263,35 +261,7 @@ const ClassificationMethodConfig: React.FC = ({ const explicitlySupportedClassifierEfforts = effortOptionsByModel[classifierModel]; const handleClassifierTypeChange = (classifierType: ClassifierType) => { - const nextValue: ComplexityRouterConfigValue = { - ...value, - classifier_type: classifierType, - classifier_llm_config: usesLlmClassifier(classifierType) - ? value.classifier_llm_config ?? { - model: "", - timeout_ms: DEFAULT_CLASSIFIER_TIMEOUT_MS, - classification_rubric: NEW_CLASSIFIER_CLASSIFICATION_RUBRIC, - } - : undefined, - classifier_context_window_size: usesLlmClassifier(classifierType) - ? value.classifier_context_window_size ?? DEFAULT_CLASSIFIER_CONTEXT_WINDOW_SIZE - : undefined, - classifier_context_budget_chars: usesLlmClassifier(classifierType) - ? value.classifier_context_budget_chars ?? DEFAULT_CLASSIFIER_CONTEXT_BUDGET_CHARS - : undefined, - classifier_context_include_assistant_turns: usesLlmClassifier(classifierType) - ? value.classifier_context_include_assistant_turns - : undefined, - classifier_fallback: usesLlmClassifier(classifierType) ? value.classifier_fallback : undefined, - heuristic_first_max_tier: - classifierType === "heuristic_first" - ? value.heuristic_first_max_tier ?? DEFAULT_HEURISTIC_FIRST_MAX_TIER - : undefined, - hybrid_boundary_margin: - classifierType === "hybrid" ? value.hybrid_boundary_margin ?? DEFAULT_HYBRID_BOUNDARY_MARGIN : undefined, - ...nonReasoningTierFields(classifierType, value), - }; - onChange(nextValue); + onChange(transitionClassifierType(value, classifierType)); }; const handleHeuristicFirstMaxTierChange = (tier: string) => { @@ -433,27 +403,6 @@ const ClassificationMethodConfig: React.FC = ({ }); }; - if (classifierType === "capability") { - return ( -

- This router uses capability forecasting. Configure its classifier, threshold, and calibration through YAML or - the API. Saving preserves those settings -

- ); - } - - if (classifierType === "llm_v2") { - return ( -
- LLM V2 classifier (experimental) -

- Combines task demands and model capability in one forecast. Its solver profiles and quality allowance are - configured through the API. Saving this router preserves those settings -

-
- ); - } - return ( <> diff --git a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx index c6b9a69e76a..4ccabff18b9 100644 --- a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx +++ b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx @@ -1,8 +1,11 @@ +import RoutingOptions from "./RoutingOptions"; +import PlanModeOverrideControls from "./PlanModeOverrideControls"; +import ForecastClassifierConfig, { ForecastSolverModels } from "./ForecastClassifierConfig"; +import { isForecastClassifier, type CapabilitySettings, type FuseSettings } from "./forecast_classifier_config"; import { SimpleTooltip } from "@/components/ui/tooltip"; import { MultiSelect } from "@/components/shared/MultiSelect"; -import { SearchSelect } from "@/components/shared/SearchSelect"; +import DefaultModelField from "./DefaultModelField"; import { ChevronRight, Info, Plus, Trash2, X } from "lucide-react"; -import { Switch } from "@/components/ui/switch"; import { AffinityControls } from "./AffinityControls"; import NonReasoningTierToggle from "./NonReasoningTierToggle"; @@ -204,11 +207,6 @@ const rowOrigin = (row: TierRow, editing: boolean): string => { return isBuiltInTierName(row.name) ? "built-in" : "custom"; }; -const defaultModelPlaceholderFor = (derivedDefaultModel: string | undefined, isCustomSet: boolean): string => { - if (derivedDefaultModel) return `Derived from tiers: ${derivedDefaultModel}`; - return isCustomSet ? "Add a model to your fallback tier" : "Add a model to the Simple or Medium tier"; -}; - const builtInTierInfo = (rowId: string): { label: string; description: string; examples: string } | undefined => { const builtIn = ALL_BUILT_IN_TIERS.find((tier) => tier === rowId); return builtIn ? TIER_DESCRIPTIONS[builtIn] : undefined; @@ -376,6 +374,8 @@ export interface ComplexityRouterConfigValue { /** An explicit pin. Unset means the default tracks the tiers - see resolveComplexityDefaultModel. */ default_model?: string; classifier_type: ClassifierType; + capability_classifier_config?: CapabilitySettings; + llm_v2_config?: FuseSettings; classifier_llm_config?: ClassifierLLMConfig; classifier_context_window_size?: number; classifier_context_budget_chars?: number; @@ -535,44 +535,6 @@ export const DEFAULT_HYBRID_BOUNDARY_MARGIN = 0.03; */ export const HEURISTIC_FIRST_MAX_TIER_KEYS = TIER_ORDER.slice(0, -1); -const PlanModeOverrideControls: React.FC<{ - value: ComplexityRouterConfigValue; - onChange: (value: ComplexityRouterConfigValue) => void; - planModeTierOptions: { value: string; label: string }[]; -}> = ({ value, onChange, planModeTierOptions }) => ( - <> -
- - onChange({ - ...value, - plan_mode_min_tier: enabled ? planModeTierOptions.at(-1)?.value : undefined, - }) - } - aria-label="Route plan-mode requests to a minimum tier" - /> - Route plan-mode requests to a minimum tier -
- - Requests from coding agents in plan mode (Claude Code, GitHub Copilot) route to at least this tier. The classifier - still wins when it picks higher, and the override only lasts while plan mode is active. - {planModeTierOptions.length === 0 && " Add models to a tier to enable this."} - - {value.plan_mode_min_tier !== undefined && ( -
- onChange({ ...value, plan_mode_min_tier: tier })} - /> -
- )} - -); - const ComplexityRouterConfig: React.FC = ({ modelInfo, value, @@ -596,6 +558,7 @@ const ComplexityRouterConfig: React.FC = ({ onAutoRouterCompressionChange, showValidationErrors = false, }) => { + const forecast = isForecastClassifier(value.classifier_type); const customTierSet = value.custom_tier_set; const tierRows = activeTierRows(value); const tierRowsError = customTierSet ? getCustomTierRowsError(customTierSet) : null; @@ -605,8 +568,6 @@ const ComplexityRouterConfig: React.FC = ({ value: row.id, label: tierRowLabel(row, value.tier_labels), })); - const derivedDefaultModel = resolveComplexityDefaultModel(value); - const defaultModelPlaceholder = defaultModelPlaceholderFor(derivedDefaultModel, Boolean(customTierSet)); const defaultModel = resolveComplexityDefaultModel(value, value.default_model); const dispatch = (action: TierSetAction) => { @@ -641,298 +602,321 @@ const ComplexityRouterConfig: React.FC = ({ tier_model_params: setTierModelParam(value.tier_model_params, tier, model, change), }); - // Clearing the select drops the key entirely rather than storing "", so an emptied pin reads as - // "track the tiers" everywhere downstream instead of as a blank model name. - const handleDefaultModelChange = (model: string | null | undefined) => { - onChange({ ...value, default_model: model || undefined }); - }; - - const handleTierLabelChange = (tier: keyof ComplexityTiers, label: string) => { - onChange({ - ...value, - tier_labels: { ...value.tier_labels, [tier]: label }, - }); - }; + const handleTierLabelChange = (tier: keyof ComplexityTiers, label: string) => + onChange({ ...value, tier_labels: { ...value.tier_labels, [tier]: label } }); return (
-

Complexity Tier Configuration

- - - +

+ {forecast ? "Solver models" : "Complexity Tier Configuration"} +

+ {!forecast && ( + + + + )}
- - - - - {!customTierSet && ( - - )} - - {tierRows.map((row, index) => { - const tierInfo = builtInTierInfo(row.id); - const label = tierRowLabel(row, value.tier_labels); - const tierMissing = showValidationErrors && row.models.length === 0; - const needsDefinition = Boolean(customTierSet) && !row.definition.trim() && !isBuiltInTierName(row.name); - const definitionMissing = showValidationErrors && needsDefinition; - const showsDisplayName = !customTierSet && !editingTiers; - return ( -
- {index > 0 && } -
- removeTierRow(row.id)} - /> - {tierInfo && !customTierSet && ( - Examples: {tierInfo.examples} - )} - {editingTiers && ( - updateTierRow(row.id, patch)} - /> - )} - {showsDisplayName && tierInfo && ( - - handleTierLabelChange(row.id as keyof ComplexityTiers, event.target.value)} - placeholder={`Display name (default: ${tierInfo.label})`} - aria-label={`Display name for the ${tierInfo.label} tier`} - /> - {value.tier_labels?.[row.id as keyof ComplexityTiers] && ( - - handleTierLabelChange(row.id as keyof ComplexityTiers, "")} - > - - - - )} - - )} - setRowModels(row, models)} - placeholder={`Select model(s) for ${label.toLowerCase()} queries`} - emptyText="No models found" - className={tierMissing ? "w-full border-destructive" : "w-full"} - /> - - handleTierModelParamChange(row.id, model, ["reasoning_effort", effort]) - } - onFastModeChange={(model, enabled) => - handleTierModelParamChange(row.id, model, ["speed", enabled ? "fast" : undefined]) - } - /> - {row.models.length > 1 && ( - - Multiple models selected: the router randomly picks among them per request (or Thompson-samples - within the pool when adaptive routing is on). - - )} - {tierMissing && The {label} tier is required} -
-
- ); - })} - - + + + + ) : ( + <> + - {customTierSet && ( - onChange(setFallbackTier(value, fallbackTierId))} - /> - )} + + + {!customTierSet && ( + + )} - + {tierRows.map((row, index) => { + const tierInfo = builtInTierInfo(row.id); + const label = tierRowLabel(row, value.tier_labels); + const tierMissing = showValidationErrors && row.models.length === 0; + const needsDefinition = + Boolean(customTierSet) && !row.definition.trim() && !isBuiltInTierName(row.name); + const definitionMissing = showValidationErrors && needsDefinition; + const showsDisplayName = !customTierSet && !editingTiers; + return ( +
+ {index > 0 && } +
+ removeTierRow(row.id)} + /> + {tierInfo && !customTierSet && ( + Examples: {tierInfo.examples} + )} + {editingTiers && ( + updateTierRow(row.id, patch)} + /> + )} + {showsDisplayName && tierInfo && ( + + + handleTierLabelChange(row.id as keyof ComplexityTiers, event.target.value) + } + placeholder={`Display name (default: ${tierInfo.label})`} + aria-label={`Display name for the ${tierInfo.label} tier`} + /> + {value.tier_labels?.[row.id as keyof ComplexityTiers] && ( + + handleTierLabelChange(row.id as keyof ComplexityTiers, "")} + > + + + + )} + + )} + setRowModels(row, models)} + placeholder={`Select model(s) for ${label.toLowerCase()} queries`} + emptyText="No models found" + className={tierMissing ? "w-full border-destructive" : "w-full"} + /> + + handleTierModelParamChange(row.id, model, ["reasoning_effort", effort]) + } + onFastModeChange={(model, enabled) => + handleTierModelParamChange(row.id, model, ["speed", enabled ? "fast" : undefined]) + } + /> + {row.models.length > 1 && ( + + Multiple models selected: the router randomly picks among them per request (or + Thompson-samples within the pool when adaptive routing is on). + + )} + {tierMissing && The {label} tier is required} +
+
+ ); + })} -
-
- Default Model - - - -
- - - Used when the tier the request lands in has no model, and when the classifier fails with "Route to - the default model" selected. - -
- - + + {customTierSet && ( + onChange(setFallbackTier(value, fallbackTierId))} + /> + )} + + + + )} + {!forecast && } -
- {[ - { - key: "classifier", - label: Advanced: Classification Method, - children: ( - - ), - }, - { - key: "adaptive", - label: Advanced: Adaptive Routing, - children: ( - - - - ), - }, - { - key: "affinity", - label: Advanced: Affinity, - children: , - }, - { - key: "modality", - label: Advanced: Modality Routing, - children: , - }, - { - key: "plan-mode", - label: Advanced: Plan-Mode Override, - children: ( - - ), - }, - { - key: "context-window", - label: Advanced: Context Window Escalation, - children: , - }, - { - key: "stall-escalation", - label: Advanced: Stalled Task Escalation, - children: ( - - - - ), - }, - { - key: "response", - label: Advanced: Response Format, - children: , - }, - ...(onEscalationKeywordsChange - ? [ - { - key: "escalation", - label: Advanced: Escalation Keywords, - children: ( - - - - ), - }, - ] - : []), - ...(onAutoRouterCompressionChange - ? [ - { - key: "compression", - label: Advanced: Compression, - children: ( - - ), - }, - ] - : []), - ...(onKeywordTierRulesChange || onSemanticMatchingEnabledChange - ? [ - { - key: "keyword-semantic", - label: Advanced: Keyword/Semantic Matching, - children: ( - <> - {onKeywordTierRulesChange && ( - - )} - {onKeywordTierRulesChange && onSemanticMatchingEnabledChange && } - {onSemanticMatchingEnabledChange && ( - - )} - - ), - }, - ] - : []), - ].map(({ key, label, children }) => ( - - - - {label} - - {children} - - ))} -
+ + {forecast && ( + <> + + + + )} +
+ {[ + ...(!forecast + ? [ + { + key: "classifier", + label: Advanced: Classification Method, + children: ( + + ), + }, + ] + : []), + ...(value.classifier_type !== "llm_v2" + ? [ + { + key: "adaptive", + label: Advanced: Adaptive Routing, + children: ( + + + + ), + }, + ] + : []), + { + key: "affinity", + label: Advanced: Affinity, + children: , + }, + { + key: "modality", + label: Advanced: Modality Routing, + children: , + }, + { + key: "plan-mode", + label: Advanced: Plan-Mode Override, + children: ( + + ), + }, + { + key: "context-window", + label: Advanced: Context Window Escalation, + children: , + }, + { + key: "stall-escalation", + label: Advanced: Stalled Task Escalation, + children: ( + + + + ), + }, + { + key: "response", + label: Advanced: Response Format, + children: , + }, + ...(onEscalationKeywordsChange + ? [ + { + key: "escalation", + label: Advanced: Escalation Keywords, + children: ( + + + + ), + }, + ] + : []), + ...(onAutoRouterCompressionChange + ? [ + { + key: "compression", + label: Advanced: Compression, + children: ( + + ), + }, + ] + : []), + ...(onKeywordTierRulesChange || onSemanticMatchingEnabledChange + ? [ + { + key: "keyword-semantic", + label: ( + Advanced: Keyword/Semantic Matching + ), + children: ( + <> + {onKeywordTierRulesChange && ( + + )} + {onKeywordTierRulesChange && onSemanticMatchingEnabledChange && } + {onSemanticMatchingEnabledChange && ( + + )} + + ), + }, + ] + : []), + ].map(({ key, label, children }) => ( + + + + {label} + + {children} + + ))} +
+
); }; diff --git a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterFastMode.integration.test.tsx b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterFastMode.integration.test.tsx index 34d14091bde..810289da79f 100644 --- a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterFastMode.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterFastMode.integration.test.tsx @@ -1,11 +1,12 @@ import userEvent from "@testing-library/user-event"; import React from "react"; import { describe, expect, it, vi } from "vitest"; -import { renderWithProviders, screen } from "../../../tests/test-utils"; +import { renderWithProviders, screen, within } from "../../../tests/test-utils"; import { buildUpdatedComplexityRouterConfig, hydrateComplexityRouterConfig, } from "../edit_auto_router/edit_auto_router_modal"; +import type { KeywordTierRule } from "./KeywordTierRules"; import type { ModelGroup } from "../llm_calls/fetch_models"; import ComplexityRouterConfig, { type ComplexityRouterConfigValue } from "./ComplexityRouterConfig"; @@ -50,8 +51,8 @@ it.each([false, true])("edits and round-trips independent model settings with cu const view = renderWithProviders(editor(initial)); const fast = () => screen.getByRole("switch", { name: `Fast mode for primary in the ${label} tier` }); - expect(screen.getAllByRole("switch", { name: /^Fast mode for/ })).toHaveLength(3); - expect(screen.queryByRole("switch", { name: /^Fast mode for (blocked|missing)/ })).not.toBeInTheDocument(); + expect(screen.getAllByRole("switch", { name: /^Fast mode for/ })).toHaveLength(4); + expect(screen.queryByRole("switch", { name: /^Fast mode for missing/ })).not.toBeInTheDocument(); expect(screen.queryByRole("combobox", { name: /^Reasoning effort for secondary/ })).not.toBeInTheDocument(); expect(screen.getByRole("switch", { name: `Fast mode for secondary in the ${label} tier` })).toBeChecked(); expect(fast()).not.toBeChecked(); @@ -125,19 +126,170 @@ it.each([false, true])("edits and round-trips independent model settings with cu ); }); -describe("Fast mode metadata", () => { - it("offers nothing before model capabilities load and leaves stored speed untouched", () => { - const value: ComplexityRouterConfigValue = { - tiers: { SIMPLE: ["primary"], MEDIUM: [], COMPLEX: [], REASONING: [] }, - classifier_type: "heuristic", - tier_model_params: { SIMPLE: { primary: { speed: "fast" } } }, - }; - const onChange = vi.fn(); - renderWithProviders(); - expect(screen.queryByRole("switch", { name: /^Fast mode for/ })).not.toBeInTheDocument(); - expect(onChange).not.toHaveBeenCalled(); - expect(buildUpdatedComplexityRouterConfig({}, value).tier_model_configs).toEqual({ - SIMPLE: [{ model_name: "primary", litellm_params: { speed: "fast" } }], - }); +it.each(["capability", "llm_v2"] as const)("preserves Fast mode controls for %s solvers", async (classifierType) => { + const user = userEvent.setup(); + const initial: ComplexityRouterConfigValue = { + classifier_type: classifierType, + classifier_llm_config: { model: "primary", timeout_ms: 3000 }, + tiers: { SIMPLE: ["primary"], MEDIUM: [], COMPLEX: [], REASONING: ["blocked"] }, + capability_classifier_config: { efficient_tier: "SIMPLE", capable_tier: "REASONING", base_threshold: 0.7 }, + llm_v2_config: { + efficient_profile: "Small solver", + capable_profile: "Large solver", + harness: "One attempt", + max_quality_gap: 0.05, + }, + tier_model_params: { SIMPLE: { primary: { reasoning_effort: "high", max_tokens: 1024 } } }, + }; + const onChange = vi.fn<(value: ComplexityRouterConfigValue) => void>(); + const editor = (value: ComplexityRouterConfigValue) => ( + + ); + const view = renderWithProviders(editor(initial)); + const fast = () => screen.getByRole("switch", { name: "Fast mode for primary in the Efficient solver tier" }); + expect(screen.getAllByRole("switch", { name: /^Fast mode for/ })).toHaveLength(1); + expect(fast()).not.toBeChecked(); + await user.click(fast()); + const enabled = onChange.mock.lastCall![0]; + expect(enabled.tier_model_params?.SIMPLE.primary).toEqual({ + reasoning_effort: "high", + max_tokens: 1024, + speed: "fast", + }); + const saved = buildUpdatedComplexityRouterConfig({}, enabled); + expect(saved.tier_model_configs).toEqual({ + SIMPLE: [{ model_name: "primary", litellm_params: { reasoning_effort: "high", max_tokens: 1024, speed: "fast" } }], + }); + view.rerender(editor(hydrateComplexityRouterConfig(saved, undefined))); + expect(fast()).toBeChecked(); + await user.click(fast()); + expect(onChange.mock.lastCall![0].tier_model_params?.SIMPLE.primary).toEqual({ + reasoning_effort: "high", + max_tokens: 1024, }); }); + +describe("Fast mode metadata", () => { + it.each(["heuristic", "capability", "llm_v2"] as const)( + "can clear stored Fast mode without current capability metadata for %s", + async (classifier_type) => { + const user = userEvent.setup(); + const value: ComplexityRouterConfigValue = { + tiers: { SIMPLE: ["primary"], MEDIUM: [], COMPLEX: [], REASONING: ["secondary"] }, + classifier_type, + tier_model_params: { SIMPLE: { primary: { speed: "fast", max_tokens: 512 } } }, + }; + const onChange = vi.fn<(value: ComplexityRouterConfigValue) => void>(); + const editor = (current: ComplexityRouterConfigValue, info: ModelGroup[]) => ( + + ); + const view = renderWithProviders(editor(value, [])); + const fast = () => screen.getByRole("switch", { name: /^Fast mode for primary/ }); + expect(fast()).toBeChecked(); + expect(onChange).not.toHaveBeenCalled(); + view.rerender(editor(value, [{ model_group: "primary", supports_fast_mode: false }])); + expect(fast()).toBeChecked(); + await user.click(fast()); + const cleared = onChange.mock.lastCall![0]; + expect(cleared.tier_model_params?.SIMPLE.primary).toEqual({ max_tokens: 512 }); + const saved = buildUpdatedComplexityRouterConfig({}, cleared); + expect(saved.tier_model_configs).toEqual({ + SIMPLE: [{ model_name: "primary", litellm_params: { max_tokens: 512 } }], + }); + view.rerender(editor(hydrateComplexityRouterConfig(saved, undefined), [])); + expect(screen.queryByRole("switch", { name: /^Fast mode for primary/ })).not.toBeInTheDocument(); + view.rerender(editor(cleared, modelInfo)); + expect(fast()).not.toBeChecked(); + }, + ); +}); + +it.each(["MEDIUM", "REASONING"])("clears a legacy Capability pool while reconciling plan floor %s", async (floor) => { + const user = userEvent.setup(); + const stored = { + classifier_type: "capability" as const, + plan_mode_min_tier: floor, + tiers: { SIMPLE: ["primary"], MEDIUM: ["secondary"], COMPLEX: [], REASONING: ["blocked"] }, + tier_model_configs: { MEDIUM: [{ model_name: "secondary", litellm_params: { speed: "fast" } }] }, + }; + const value = hydrateComplexityRouterConfig(stored, undefined); + const onChange = vi.fn<(value: ComplexityRouterConfigValue) => void>(); + renderWithProviders(); + await user.click(screen.getByRole("button", { name: "Advanced routing options" })); + expect(screen.getByRole("switch", { name: "Fast mode for secondary in the Medium routing pool tier" })).toBeChecked(); + expect(onChange).not.toHaveBeenCalled(); + await user.click(screen.getByRole("combobox", { name: "Select medium routing pool models" })); + await user.click(await screen.findByRole("option", { name: "secondary" })); + await user.keyboard("{Escape}"); + const cleared = onChange.mock.lastCall![0]; + expect(cleared.tiers.MEDIUM).toEqual([]); + expect(cleared.plan_mode_min_tier).toBe(floor === "MEDIUM" ? undefined : floor); + expect(cleared.tier_model_params).toBeUndefined(); + expect(buildUpdatedComplexityRouterConfig(stored, cleared).tiers).toEqual({ + SIMPLE: ["primary"], + REASONING: ["blocked"], + }); +}); + +it.each(["capability", "llm_v2"] as const)( + "shows and clears a persisted default model in %s", + async (classifier_type) => { + const user = userEvent.setup(); + const stored = { + classifier_type, + default_model: "legacy-default", + tiers: { SIMPLE: ["primary"], REASONING: ["secondary"] }, + }; + const onChange = vi.fn<(value: ComplexityRouterConfigValue) => void>(); + const editor = (value: ComplexityRouterConfigValue) => ( + + ); + const view = renderWithProviders(editor(hydrateComplexityRouterConfig(stored, undefined))); + await user.click(screen.getByRole("button", { name: "Advanced routing options" })); + const select = () => screen.getByRole("combobox", { name: "Default model" }); + expect(select()).toHaveValue("legacy-default"); + expect(onChange).not.toHaveBeenCalled(); + await user.click(select()); + await user.click(await screen.findByRole("option", { name: "blocked" })); + const changed = onChange.mock.lastCall![0]; + expect(buildUpdatedComplexityRouterConfig(stored, changed).default_model).toBe("blocked"); + view.rerender(editor(changed)); + await user.click( + within(screen.getByRole("group", { name: "Default model configuration" })).getByRole("button", { name: "Clear" }), + ); + const cleared = onChange.mock.lastCall![0]; + expect(cleared.default_model).toBeUndefined(); + const saved = buildUpdatedComplexityRouterConfig(stored, cleared); + expect(saved).not.toHaveProperty("default_model"); + view.rerender(editor(hydrateComplexityRouterConfig(saved, undefined))); + expect(select()).toHaveValue(""); + expect(select()).toHaveAttribute("placeholder", expect.stringContaining("primary")); + }, +); + +it.each(["capability", "llm_v2"] as const)("offers only populated keyword targets for %s", async (classifier_type) => { + const user = userEvent.setup(); + const value: ComplexityRouterConfigValue = { + classifier_type, + tiers: { SIMPLE: ["primary"], MEDIUM: [], COMPLEX: [], REASONING: ["secondary"] }, + }; + const onRulesChange = vi.fn<(rules: KeywordTierRule[]) => void>(); + const editor = (rules: KeywordTierRule[]) => ( + + ); + const view = renderWithProviders(editor([])); + await user.click(screen.getByRole("button", { name: "Advanced routing options" })); + await user.click(screen.getByText("Advanced: Keyword/Semantic Matching")); + await user.click(screen.getByRole("button", { name: "Add keyword rule" })); + const rules = onRulesChange.mock.lastCall![0]; + expect(rules[0].tier).toBe("SIMPLE"); + view.rerender(editor(rules)); + await user.click(screen.getByRole("combobox", { name: "Route keyword rule 1 to tier" })); + expect((await screen.findAllByRole("option")).map((option) => option.textContent)).toEqual(["Simple", "Reasoning"]); +}); diff --git a/ui/litellm-dashboard/src/components/add_model/DefaultModelField.tsx b/ui/litellm-dashboard/src/components/add_model/DefaultModelField.tsx new file mode 100644 index 00000000000..a3ab85f7c13 --- /dev/null +++ b/ui/litellm-dashboard/src/components/add_model/DefaultModelField.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import { Info } from "lucide-react"; +import { SearchSelect } from "@/components/shared/SearchSelect"; +import { SimpleTooltip } from "@/components/ui/tooltip"; +import type { ComplexityRouterConfigValue } from "./ComplexityRouterConfig"; +import { isForecastClassifier } from "./forecast_classifier_config"; +import { resolveComplexityDefaultModel } from "./tier_rows"; + +interface DefaultModelFieldProps { + value: ComplexityRouterConfigValue; + onChange: (value: ComplexityRouterConfigValue) => void; + modelOptions: { value: string; label: string }[]; +} + +const defaultModelPlaceholderFor = (derivedDefaultModel: string | undefined, isCustomSet: boolean): string => { + if (derivedDefaultModel) return `Derived from tiers: ${derivedDefaultModel}`; + return isCustomSet ? "Add a model to your fallback tier" : "Add a model to the Simple or Medium tier"; +}; + +const DefaultModelField = ({ value, onChange, modelOptions }: DefaultModelFieldProps) => { + const defaultModelPlaceholder = defaultModelPlaceholderFor( + resolveComplexityDefaultModel(value), + Boolean(value.custom_tier_set), + ); + // Clearing the select drops the key entirely rather than storing "", so an emptied pin reads as + // "track the tiers" everywhere downstream instead of as a blank model name. + const handleDefaultModelChange = (model: string | null | undefined) => { + onChange({ ...value, default_model: model || undefined }); + }; + + return ( +
+
+ Default Model + + + +
+ + + {isForecastClassifier(value.classifier_type) + ? "Used when routing cannot find a suitable model. Classifier failures route to the capable solver." + : 'Used when the tier the request lands in has no model, and when the classifier fails with "Route to the default model" selected.'} + +
+ ); +}; + +export default DefaultModelField; diff --git a/ui/litellm-dashboard/src/components/add_model/ForecastClassifierConfig.integration.test.tsx b/ui/litellm-dashboard/src/components/add_model/ForecastClassifierConfig.integration.test.tsx new file mode 100644 index 00000000000..c249a63899a --- /dev/null +++ b/ui/litellm-dashboard/src/components/add_model/ForecastClassifierConfig.integration.test.tsx @@ -0,0 +1,224 @@ +import React, { useState } from "react"; +import { describe, expect, it, vi } from "vitest"; +import userEvent from "@testing-library/user-event"; +import { fireEvent, renderWithProviders, screen } from "../../../tests/test-utils"; +import ClassificationMethodConfig from "./ClassificationMethodConfig"; +import AutoRouterClassifierTabs from "./AutoRouterClassifierTabs"; +import ForecastClassifierConfig from "./ForecastClassifierConfig"; +import type { ComplexityRouterConfigValue } from "./ComplexityRouterConfig"; +import { getForecastConfigError, isForecastClassifier } from "./forecast_classifier_config"; +import { buildUpdatedComplexityRouterConfig } from "../edit_auto_router/edit_auto_router_modal"; + +vi.mock("@/components/networking", async (importOriginal) => ({ + ...(await importOriginal()), + getComplexityScorerDefaults: vi.fn(async () => ({ + tier_boundaries: {}, + token_thresholds: {}, + dimension_weights: {}, + })), +})); + +const initial: ComplexityRouterConfigValue = { + classifier_type: "capability", + classifier_llm_config: { model: "judge", timeout_ms: 20000 }, + tiers: { SIMPLE: ["efficient"], MEDIUM: [], COMPLEX: [], REASONING: ["capable"] }, + capability_classifier_config: { efficient_tier: "SIMPLE", capable_tier: "REASONING", base_threshold: 0.7 }, +}; +const fuseInitial: ComplexityRouterConfigValue = { + ...initial, + classifier_type: "llm_v2", + capability_classifier_config: undefined, + adaptive: false, + llm_v2_config: { + efficient_profile: "Small solver", + capable_profile: "Larger solver", + harness: "One attempt", + max_quality_gap: 0.05, + }, +}; +const options = ["judge", "efficient", "capable"].map((model) => ({ value: model, label: model })); + +function Form({ initialValue = initial }: { initialValue?: ComplexityRouterConfigValue }) { + const [value, setValue] = useState(initialValue); + const [saved, setSaved] = useState(""); + return ( + <> + + {isForecastClassifier(value.classifier_type) ? ( + + ) : ( + + )} + + + {saved} + + ); +} + +describe("forecast classifier form", () => { + it("switches a populated standard router to Capability without saving hidden pools or their overrides", () => { + renderWithProviders( + , + ); + fireEvent.click(screen.getByRole("tab", { name: "Capability" })); + fireEvent.change(screen.getByLabelText("Solve probability threshold"), { target: { value: "0.7" } }); + expect(screen.getByRole("button", { name: "Save configuration" })).toBeEnabled(); + fireEvent.click(screen.getByRole("button", { name: "Save configuration" })); + const output = screen.getByRole("status", { name: "Saved configuration" }); + expect(output).toHaveTextContent('"classifier_type":"capability"'); + expect(output).toHaveTextContent('"SIMPLE":["efficient","second-efficient"]'); + expect(output).toHaveTextContent('"REASONING":["capable"]'); + expect(output).toHaveTextContent('"reasoning_effort":"low","speed":"fast","max_tokens":1024'); + expect(output).toHaveTextContent('"reasoning_effort":"high"'); + expect(output).toHaveTextContent('"adaptive":true'); + expect(output).not.toHaveTextContent("leftover-medium"); + expect(output).not.toHaveTextContent("leftover-complex"); + expect(output).not.toHaveTextContent('"plan_mode_min_tier"'); + }); + + it.each(["capability", "llm_v2"] as const)( + "carries non-default solver assignments when switching away from %s", + (source) => { + const pair = { efficient_tier: "MEDIUM", capable_tier: "COMPLEX" }; + const previous: ComplexityRouterConfigValue = { + ...(source === "capability" ? initial : fuseInitial), + tiers: { SIMPLE: [], MEDIUM: ["efficient"], COMPLEX: ["capable"], REASONING: [] }, + capability_classifier_config: + source === "capability" ? { ...initial.capability_classifier_config!, ...pair } : undefined, + llm_v2_config: source === "llm_v2" ? { ...fuseInitial.llm_v2_config!, ...pair } : undefined, + plan_mode_min_tier: "COMPLEX", + tier_model_params: { MEDIUM: { efficient: { max_tokens: 128 } }, COMPLEX: { capable: { speed: "fast" } } }, + }; + renderWithProviders(); + fireEvent.click(screen.getByRole("tab", { name: source === "capability" ? "Fuse v2" : "Capability" })); + if (source === "capability") { + fireEvent.change(screen.getByLabelText("Efficient solver profile"), { target: { value: "Small solver" } }); + fireEvent.change(screen.getByLabelText("Capable solver profile"), { target: { value: "Large solver" } }); + fireEvent.change(screen.getByLabelText("Harness and budget"), { target: { value: "One attempt" } }); + fireEvent.change(screen.getByLabelText("Maximum quality gap"), { target: { value: "0.05" } }); + } else { + fireEvent.change(screen.getByLabelText("Solve probability threshold"), { target: { value: "0.7" } }); + } + expect(screen.getByRole("button", { name: "Save configuration" })).toBeEnabled(); + fireEvent.click(screen.getByRole("button", { name: "Save configuration" })); + const output = screen.getByRole("status", { name: "Saved configuration" }); + expect(output).toHaveTextContent('"efficient_tier":"MEDIUM","capable_tier":"COMPLEX"'); + expect(output).toHaveTextContent('"tiers":{"MEDIUM":["efficient"],"COMPLEX":["capable"]}'); + expect(output).toHaveTextContent('"plan_mode_min_tier":"COMPLEX"'); + expect(output).toHaveTextContent('"max_tokens":128'); + expect(output).toHaveTextContent('"speed":"fast"'); + }, + ); + + it("keeps decimal and negative numbers when entered one character at a time", async () => { + const user = userEvent.setup(); + renderWithProviders(); + const threshold = screen.getByLabelText("Solve probability threshold"); + await user.clear(threshold); + await user.type(threshold, "0.65"); + expect(threshold).toHaveValue(0.65); + await user.click(screen.getByRole("button", { name: "Classifier options" })); + await user.click(screen.getByRole("switch", { name: "Use fitted calibration" })); + await user.type(screen.getByLabelText("Efficient intercept"), "-0.3"); + expect(screen.getByLabelText("Efficient intercept")).toHaveValue(-0.3); + }); + + it.each([ + ["capability", "LLM Classifier"], + ["capability", "Heuristic first"], + ["capability", "Hybrid"], + ["llm_v2", "LLM Classifier"], + ["llm_v2", "Heuristic first"], + ["llm_v2", "Hybrid"], + ] as const)("restores the current rubric when switching %s through Complexity to %s", async (source, target) => { + const user = userEvent.setup(); + renderWithProviders(); + fireEvent.click(screen.getByRole("tab", { name: "Complexity" })); + fireEvent.click(screen.getByRole("radio", { name: new RegExp(`^${target}`) })); + await user.click(screen.getByRole("combobox", { name: "Classifier Model" })); + await user.click(screen.getByRole("option", { name: "judge", exact: true })); + fireEvent.click(screen.getByRole("button", { name: "Save configuration" })); + const output = screen.getByRole("status", { name: "Saved configuration" }); + expect(output).toHaveTextContent('"classification_rubric":"agentic"'); + expect(output).toHaveTextContent('"model":"judge"'); + expect(output).toHaveTextContent('"timeout_ms":3000'); + expect(output).not.toHaveTextContent('"capability_classifier_config"'); + expect(output).not.toHaveTextContent('"llm_v2_config"'); + }); + + it("saves capability threshold edits together with fitted calibration", () => { + renderWithProviders(); + fireEvent.change(screen.getByLabelText("Solve probability threshold"), { target: { value: "0.6" } }); + fireEvent.click(screen.getByRole("button", { name: "Classifier options" })); + fireEvent.click(screen.getByRole("switch", { name: "Use fitted calibration" })); + expect(screen.getByRole("button", { name: "Save configuration" })).toBeDisabled(); + fireEvent.change(screen.getByLabelText("Calibration version"), { target: { value: "eval-a" } }); + fireEvent.change(screen.getByLabelText("Efficient slope"), { target: { value: "1.2" } }); + fireEvent.change(screen.getByLabelText("Efficient intercept"), { target: { value: "-0.3" } }); + fireEvent.click(screen.getByRole("button", { name: "Save configuration" })); + const output = screen.getByRole("status", { name: "Saved configuration" }); + expect(output).toHaveTextContent('"base_threshold":0.6'); + expect(output).toHaveTextContent('"calibration":{"version":"eval-a","slope":1.2,"intercept":-0.3}'); + fireEvent.change(screen.getByLabelText("Solve probability threshold"), { target: { value: "" } }); + expect(screen.getByRole("button", { name: "Save configuration" })).toBeDisabled(); + }); + + it("switches to Fuse, requires solver context, and saves the filled fields", () => { + renderWithProviders(); + fireEvent.click(screen.getByRole("tab", { name: "Fuse v2" })); + expect(screen.queryByLabelText("Solve probability threshold")).not.toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Save configuration" })).toBeDisabled(); + fireEvent.change(screen.getByLabelText("Efficient solver profile"), { + target: { value: "Short reasoning budget" }, + }); + fireEvent.change(screen.getByLabelText("Capable solver profile"), { target: { value: "Larger reasoning budget" } }); + fireEvent.change(screen.getByLabelText("Harness and budget"), { + target: { value: "Shell and test runner, one attempt" }, + }); + fireEvent.change(screen.getByLabelText("Maximum quality gap"), { target: { value: "0.05" } }); + fireEvent.click(screen.getByRole("button", { name: "Save configuration" })); + const output = screen.getByRole("status", { name: "Saved configuration" }); + expect(output).toHaveTextContent('"classifier_type":"llm_v2"'); + expect(output).toHaveTextContent('"efficient_profile":"Short reasoning budget"'); + expect(output).toHaveTextContent('"capable_profile":"Larger reasoning budget"'); + expect(output).toHaveTextContent('"harness":"Shell and test runner, one attempt"'); + expect(output).toHaveTextContent('"max_quality_gap":0.05'); + expect(output).toHaveTextContent('"adaptive":false'); + expect(output).not.toHaveTextContent('"capability_classifier_config"'); + }); +}); diff --git a/ui/litellm-dashboard/src/components/add_model/ForecastClassifierConfig.tsx b/ui/litellm-dashboard/src/components/add_model/ForecastClassifierConfig.tsx new file mode 100644 index 00000000000..b901a509435 --- /dev/null +++ b/ui/litellm-dashboard/src/components/add_model/ForecastClassifierConfig.tsx @@ -0,0 +1,433 @@ +import React from "react"; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; +import { ChevronRight } from "lucide-react"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { Switch } from "@/components/ui/switch"; +import { SearchSelect } from "@/components/shared/SearchSelect"; +import { MultiSelect } from "@/components/shared/MultiSelect"; +import { + type ComplexityRouterConfigValue, + type ClassificationFrequency, + classificationFrequency, + withClassificationFrequency, + DEFAULT_CLASSIFIER_TIMEOUT_MS, +} from "./ComplexityRouterConfig"; +import { + forecastTierNames, + forecastModels, + getForecastConfigError, + newCapabilitySettings, + newFuseSettings, + type CapabilitySettings, + type FuseSettings, +} from "./forecast_classifier_config"; +import ClassifierReasoningEffortSelect from "./ClassifierReasoningEffortSelect"; +import ClassifierCircuitBreakerConfig from "./ClassifierCircuitBreakerConfig"; +import ClassifierVisionConfig from "./ClassifierVisionConfig"; +import TierModelEffortRows from "./TierModelEffortRows"; +import { activeTierRows } from "./tier_rows"; +import { setTierModels } from "./tier_set_actions"; +import { tierRowLabel, setTierModelParam, setTierModelReasoningEffort } from "./complexity_router_tiers"; + +interface Props { + value: ComplexityRouterConfigValue; + onChange: (value: ComplexityRouterConfigValue) => void; + modelOptions: { value: string; label: string }[]; + effortOptionsByModel: Record; +} + +const NumberField = ({ + label, + value, + onChange, + min, + max, + step = "any", + help, +}: { + label: string; + value: number; + onChange: (value: number) => void; + min?: number; + max?: number; + step?: number | "any"; + help?: string; +}) => { + const id = React.useId(); + return ( +
+ + onChange(event.target.value === "" ? Number.NaN : Number(event.target.value))} + /> + {help &&

{help}

} +
+ ); +}; + +export const ForecastSolverModels = ({ + value, + onChange, + modelOptions, + effortOptionsByModel, + fastModeByModel, + additionalPoolsOnly = false, +}: Props & { fastModeByModel: Record; additionalPoolsOnly?: boolean }) => { + const id = React.useId(); + const names = forecastTierNames(value); + const additionalRows = + value.classifier_type === "capability" + ? activeTierRows(value) + .filter((row) => !names.includes(row.id) && row.models.length > 0) + .map((row) => ({ tier: row.id, label: `${tierRowLabel(row, value.tier_labels)} routing pool` })) + : []; + const rows = additionalPoolsOnly + ? additionalRows + : names.map((tier, index) => ({ tier, label: index === 0 ? "Efficient solver" : "Capable solver" })); + if (rows.length === 0) return null; + return ( +
+ {rows.map(({ tier, label }) => { + const models = forecastModels(value.tiers, tier); + const setModels = (next: string[]) => onChange(setTierModels(value, tier, next)); + return ( +
+ + {value.classifier_type === "llm_v2" ? ( + setModels(model ? [model] : [])} + /> + ) : ( + + )} + [model, efforts ?? []]), + )} + paramsByModel={value.tier_model_params?.[tier] ?? {}} + fastModeByModel={fastModeByModel} + onFastModeChange={(model, enabled) => + onChange({ + ...value, + tier_model_params: setTierModelParam(value.tier_model_params, tier, model, [ + "speed", + enabled ? "fast" : undefined, + ]), + }) + } + onEffortChange={(model, effort) => + onChange({ + ...value, + tier_model_params: setTierModelReasoningEffort(value.tier_model_params, tier, model, effort), + }) + } + /> +
+ ); + })} + {!additionalPoolsOnly && ( +

+ Invalid forecasts and classifier failures route to the capable solver +

+ )} +
+ ); +}; + +const CalibrationFields = ({ + label, + value, + onChange, + bounded = false, +}: { + label: string; + bounded?: boolean; + value: { slope: number; intercept: number }; + onChange: (value: { slope: number; intercept: number }) => void; +}) => ( +
+ onChange({ ...value, slope })} + /> + onChange({ ...value, intercept })} + /> +
+); + +const emptyCoefficients = () => ({ slope: Number.NaN, intercept: Number.NaN }); + +const ForecastClassifierConfig = ({ value, onChange, modelOptions, effortOptionsByModel }: Props) => { + const id = React.useId(); + const isCapability = value.classifier_type === "capability"; + const capability = value.capability_classifier_config ?? newCapabilitySettings(); + const fuse = value.llm_v2_config ?? newFuseSettings(); + const config = isCapability ? capability : fuse; + const llm = value.classifier_llm_config ?? { model: "", timeout_ms: DEFAULT_CLASSIFIER_TIMEOUT_MS }; + const updateCapability = (next: CapabilitySettings) => onChange({ ...value, capability_classifier_config: next }); + const updateFuse = (next: FuseSettings) => onChange({ ...value, llm_v2_config: next }); + const updateTransport = (patch: { max_output_tokens?: number; response_format?: "json_schema" | "json_object" }) => + isCapability ? updateCapability({ ...capability, ...patch }) : updateFuse({ ...fuse, ...patch }); + const setCalibrationVersion = (version: string) => { + if (isCapability && capability.calibration) + updateCapability({ ...capability, calibration: { ...capability.calibration, version } }); + if (!isCapability && fuse.calibration) updateFuse({ ...fuse, calibration: { ...fuse.calibration, version } }); + }; + const error = getForecastConfigError(value); + return ( +
+

+ {isCapability + ? "Forecasts whether the efficient solver can complete the task using the bundled capability card" + : "Forecasts success for both solvers and selects efficient when the estimated quality gap is within your allowance"} +

+
+ + { + if (model === llm.model) return; + onChange({ ...value, classifier_llm_config: { ...llm, model: model ?? "", reasoning_effort: undefined } }); + }} + /> +
+ {isCapability ? ( + <> + updateCapability({ ...capability, base_threshold })} + /> + + ) : ( + <> + {(["efficient_profile", "capable_profile", "harness"] as const).map((field) => { + const label = { + efficient_profile: "Efficient solver profile", + capable_profile: "Capable solver profile", + harness: "Harness and budget", + }[field]; + return ( +
+ +