diff --git a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
index 2a0b768385c..22f45574583 100644
--- a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
@@ -164,6 +164,177 @@ 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 = TIER_ORDER.find((tier) => tier === rowId);
+ return builtIn ? TIER_DESCRIPTIONS[builtIn] : undefined;
+};
+
+const TierConfigIntro: React.FC<{ value: ComplexityRouterConfigValue }> = ({ value }) => (
+ <>
+
+ {heuristicScoringRole(value) === "never"
+ ? "The complexity router classifies each request with your classifier model and routes it to that tier. Configure which model(s) handle each tier."
+ : "The complexity router automatically classifies requests by complexity using rule-based scoring (no API calls, <1ms latency). Configure which model(s) handle each tier."}
+
+
+
+ {restrictedBy(value, "displayNames")?.reason ??
+ "Rename a tier to use your own vocabulary in the dashboard and your spend logs. Renaming doesn't change how requests are classified, and callers never see these names."}
+ {!value.custom_tier_set &&
+ usesLlmClassifier(value.classifier_type) &&
+ " Your classifier model reads these names, so clearer ones can sharpen its choices."}
+
+
+);
+
+const TierSetToolbar: React.FC<{
+ editing: boolean;
+ isCustomSet: boolean;
+ rowCount: number;
+ rowsError: string | null;
+ onEditingChange: ((editing: boolean) => void) | undefined;
+ onAdd: () => void;
+ onRestore: () => void;
+}> = ({ editing, isCustomSet, rowCount, rowsError, onEditingChange, onAdd, onRestore }) => (
+ <>
+
+ {editing ? (
+ <>
+
+
+
+
+ {isCustomSet && (
+
+ )}
+
+ ) : (
+ onEditingChange && (
+
+ )
+ )}
+
+ {editing && (
+
+ Add or remove tiers to define your own set. Every custom tier needs a definition the LLM classifier routes on,
+ and an edited set requires the LLM classification method
+
+ )}
+
+);
+
+const FallbackTierField: React.FC<{
+ rows: readonly TierRow[];
+ fallbackTierId: string;
+ onValueChange: (rowId: string) => void;
+}> = ({ rows, fallbackTierId, onValueChange }) => (
+
+
+ Fallback Tier
+
+
+
+
+
activeTierName(row)).map((row) => ({ value: row.id, label: activeTierName(row) }))}
+ value={fallbackTierId || null}
+ onValueChange={onValueChange}
+ placeholder="Pick the tier classifier failures route to"
+ />
+
+);
+
+const TierRowHeader: React.FC<{
+ row: TierRow;
+ index: number;
+ rowCount: number;
+ label: string;
+ description: string | undefined;
+ editing: boolean;
+ isCustomSet: boolean;
+ onRemove: () => void;
+}> = ({ row, index, rowCount, label, description, editing, isCustomSet, onRemove }) => (
+
+ {label} Tier
+
+
+
+
+ Tier {index + 1} of {rowCount} · {rowOrigin(row, isCustomSet)}
+
+ {editing && (
+
+ )}
+
+);
+
+const TierRowEditFields: React.FC<{
+ row: TierRow;
+ index: number;
+ definitionMissing: boolean;
+ onPatch: (patch: Partial
>) => void;
+}> = ({ row, index, definitionMissing, onPatch }) => (
+ <>
+ onPatch({ name: event.target.value })}
+ placeholder="Tier name, e.g. SECURITY_REVIEW"
+ aria-label={`Name for tier ${index + 1}`}
+ maxLength={MAX_TIER_NAME_CHARS}
+ className="mb-2"
+ />
+