From 00fe75e83d3f14130fea44afd8160ae4e4abc670 Mon Sep 17 00:00:00 2001
From: moe-berri <moe@berri.ai>
Date: Tue, 1 Sep 2026 15:31:35 -0700
Subject: [PATCH] feat(ui): configure capability routers

---
 .../app/(dashboard)/hooks/models/useModels.ts |   1 +
 .../AutoRouters/autoRouterRows.test.ts        |  26 ++
 .../components/AutoRouters/autoRouterRows.ts  |  12 +-
 .../add_model/AutoRouterRoutingTest.tsx       |   7 +-
 .../add_model/CapabilityRouterConfig.tsx      | 151 ++++++++
 .../add_model/add_auto_router_tab.tsx         | 358 +++++++++++-------
 ...capability_router_tab.integration.test.tsx |  90 +++++
 .../add_model/auto_router_strategies.ts       |  16 +-
 .../build_auto_router_routing_test_request.ts |   9 +-
 .../capability_router_config.test.ts          |  52 +++
 .../add_model/capability_router_config.ts     |  63 +++
 .../handle_add_auto_router_submit.tsx         |  25 +-
 .../edit_auto_router_modal.tsx                | 228 +++++++----
 .../src/components/networking.tsx             |  13 +-
 .../LogDetailsDrawer/RoutingDecisionCard.tsx  |  35 ++
 15 files changed, 861 insertions(+), 225 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/add_model/CapabilityRouterConfig.tsx
 create mode 100644 ui/litellm-dashboard/src/components/add_model/add_capability_router_tab.integration.test.tsx
 create mode 100644 ui/litellm-dashboard/src/components/add_model/capability_router_config.test.ts
 create mode 100644 ui/litellm-dashboard/src/components/add_model/capability_router_config.ts

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts
index a9f7c54698a..6a9627e1938 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts
@@ -92,6 +92,7 @@ export interface AutoRouterDeployment extends AutoRouterCandidateDeployment {
     model?: string | null;
     complexity_router_config?: unknown;
     complexity_router_default_model?: string | null;
+    capability_router_config?: unknown;
     auto_router_config?: unknown;
     auto_router_default_model?: string | null;
     auto_router_embedding_model?: string | null;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/autoRouterRows.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/autoRouterRows.test.ts
index 23585f6c110..f5400fb51c7 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/autoRouterRows.test.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/autoRouterRows.test.ts
@@ -43,6 +43,32 @@ const semanticDeployment = {
 };
 
 describe("autoRouterRows", () => {
+  it("classifies a capability router and lists its candidate models", () => {
+    const row = toAutoRouterRow(
+      {
+        model_name: "cost-router",
+        litellm_params: {
+          model: "auto_router/capability_router",
+          capability_router_config: {
+            candidates: [
+              { model: "small", description: "bounded tasks" },
+              { model: "frontier", description: "hard tasks" },
+            ],
+          },
+        },
+        model_info: { id: "cap-1", db_model: true },
+      },
+      0,
+      ADMIN,
+      null,
+    );
+
+    expect(row.kind).toBe("capability");
+    expect(row.typeLabel).toBe("Capability");
+    expect(row.targets).toEqual(["small", "frontier"]);
+    expect(row.canEdit).toBe(true);
+  });
+
   it("classifies a complexity router and unions its tier models as targets", () => {
     const row = toAutoRouterRow(complexityDeployment, 0, ADMIN, null);
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/autoRouterRows.ts b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/autoRouterRows.ts
index c4d7f45b7cc..fb587d6b5b5 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/autoRouterRows.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AutoRouters/autoRouterRows.ts
@@ -79,6 +79,14 @@ const configManaged = (label: string, config: Record<string, unknown>): Presenta
 
 /** How each strategy renders itself, given its own config object. */
 const PRESENTERS: Record<AutoRouterKind, (config: Record<string, unknown>) => Presentation> = {
+  capability: (config) => ({
+    typeLabel: "Capability",
+    targets: dedupe(
+      (Array.isArray(config.candidates) ? config.candidates : [])
+        .map((candidate) => asRecord(candidate).model)
+        .filter((model): model is string => typeof model === "string" && model.length > 0),
+    ),
+  }),
   complexity: (config) => ({
     typeLabel: complexityTypeLabel(config),
     targets: dedupe(Object.values(asRecord(config.tiers)).flatMap(normalizeTierModels)),
@@ -116,7 +124,9 @@ export const toAutoRouterRow = (
     canDelete: canDelete && mayActOnRow,
     editBlockedReason,
     createdAt: info.created_at ?? undefined,
-    defaultModel: (params[strategy.defaultModelKey] as string | null | undefined) ?? null,
+    defaultModel: strategy.defaultModelKey
+      ? (params[strategy.defaultModelKey] as string | null | undefined) ?? null
+      : null,
     deployment,
     ...PRESENTERS[strategy.kind](asRecord(params[strategy.configKey])),
   };
diff --git a/ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.tsx b/ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.tsx
index 00b2e75dfd1..37852ae0229 100644
--- a/ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.tsx
@@ -7,10 +7,12 @@ import RoutingDecisionCard from "@/components/view_logs/LogDetailsDrawer/Routing
 import { AutoRouterRoutingTestResult, testAutoRouterRouting } from "../networking";
 import { ComplexityRouterConfigPayload } from "./build_complexity_router_config";
 import { buildAutoRouterRoutingTestRequest } from "./build_auto_router_routing_test_request";
+import { CapabilityRouterConfigValue } from "./capability_router_config";
 
 interface AutoRouterRoutingTestProps {
   accessToken: string;
-  config: ComplexityRouterConfigPayload;
+  config?: ComplexityRouterConfigPayload;
+  capabilityConfig?: CapabilityRouterConfigValue;
   defaultModel: string | undefined;
   routerName: string | undefined;
   teamId: string | undefined;
@@ -25,6 +27,7 @@ type TestState =
 const AutoRouterRoutingTest: React.FC<AutoRouterRoutingTestProps> = ({
   accessToken,
   config,
+  capabilityConfig,
   defaultModel,
   routerName,
   teamId,
@@ -34,7 +37,7 @@ const AutoRouterRoutingTest: React.FC<AutoRouterRoutingTestProps> = ({
 
   const send = async () => {
     setState({ status: "running" });
-    const params = { prompt, config, defaultModel, routerName, teamId };
+    const params = { prompt, config, capabilityConfig, defaultModel, routerName, teamId };
     const request = buildAutoRouterRoutingTestRequest(params);
     const response = await testAutoRouterRouting(accessToken, request);
     setState(
diff --git a/ui/litellm-dashboard/src/components/add_model/CapabilityRouterConfig.tsx b/ui/litellm-dashboard/src/components/add_model/CapabilityRouterConfig.tsx
new file mode 100644
index 00000000000..564077e239c
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/CapabilityRouterConfig.tsx
@@ -0,0 +1,151 @@
+import React from "react";
+import { Plus, Trash2 } from "lucide-react";
+
+import { type ModelGroup } from "@/components/llm_calls/fetch_models";
+import { SearchSelect } from "@/components/shared/SearchSelect";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { type CapabilityRouterConfigValue } from "./capability_router_config";
+
+interface Props {
+  modelInfo: ModelGroup[];
+  value: CapabilityRouterConfigValue;
+  onChange: (value: CapabilityRouterConfigValue) => void;
+}
+
+const CapabilityRouterConfig: React.FC<Props> = ({ modelInfo, value, onChange }) => {
+  const options = React.useMemo(
+    () =>
+      Array.from(new Set(modelInfo.filter((model) => model.mode !== "embedding").map((model) => model.model_group)))
+        .filter((model) => !model.startsWith("auto_router/"))
+        .map((model) => ({ value: model, label: model })),
+    [modelInfo],
+  );
+
+  const updateCandidate = (index: number, patch: Partial<CapabilityRouterConfigValue["candidates"][number]>) => {
+    const previousModel = value.candidates[index]?.model;
+    const candidates = value.candidates.map((candidate, row) =>
+      row === index ? { ...candidate, ...patch } : candidate,
+    );
+    const fallback_model =
+      previousModel === value.fallback_model && patch.model !== undefined ? patch.model : value.fallback_model;
+    onChange({ ...value, candidates, fallback_model });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold">Candidate models</h3>
+        <p className="text-sm text-muted-foreground">
+          Describe the tasks each model can reliably complete. Price is calculated separately.
+        </p>
+      </div>
+      {value.candidates.map((candidate, index) => (
+        <div key={index} className="space-y-3 rounded-lg border border-border p-4">
+          <div className="flex items-center justify-between">
+            <Label>Candidate {index + 1}</Label>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              disabled={value.candidates.length <= 2}
+              aria-label={`Remove candidate ${index + 1}`}
+              onClick={() => {
+                const candidates = value.candidates.filter((_, row) => row !== index);
+                onChange({
+                  ...value,
+                  candidates,
+                  fallback_model: candidates.some((item) => item.model === value.fallback_model)
+                    ? value.fallback_model
+                    : candidates[0]?.model ?? "",
+                });
+              }}
+            >
+              <Trash2 />
+            </Button>
+          </div>
+          <SearchSelect
+            options={options.filter(
+              (option) =>
+                option.value === candidate.model ||
+                !value.candidates.some((item, row) => row !== index && item.model === option.value),
+            )}
+            value={candidate.model}
+            onValueChange={(model) => updateCandidate(index, { model })}
+            placeholder="Select a model group"
+            emptyText="No models found"
+          />
+          <Textarea
+            value={candidate.description}
+            onChange={(event) => updateCandidate(index, { description: event.target.value })}
+            placeholder="Example: Fast and reliable for extraction, summarization, and bounded code edits; weaker on long-horizon debugging."
+            rows={3}
+          />
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="outline"
+        onClick={() => onChange({ ...value, candidates: [...value.candidates, { model: "", description: "" }] })}
+      >
+        <Plus /> Add candidate
+      </Button>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label>Classifier model</Label>
+          <SearchSelect
+            options={options}
+            value={value.classifier.model}
+            onValueChange={(model) => onChange({ ...value, classifier: { ...value.classifier, model } })}
+            placeholder="Select classifier"
+            emptyText="No models found"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>Fallback model</Label>
+          <SearchSelect
+            options={value.candidates
+              .filter((candidate) => candidate.model)
+              .map((candidate) => ({ value: candidate.model, label: candidate.model }))}
+            value={value.fallback_model}
+            onValueChange={(fallback_model) => onChange({ ...value, fallback_model })}
+            placeholder="Select fallback"
+            emptyText="Select candidates first"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="capability-probability-threshold">Probability threshold</Label>
+          <Input
+            id="capability-probability-threshold"
+            type="number"
+            min={0}
+            max={1}
+            step={0.05}
+            value={value.probability_threshold}
+            onChange={(event) => onChange({ ...value, probability_threshold: Number(event.target.value) })}
+          />
+          <p className="text-xs text-muted-foreground">
+            Higher values favor reliability; lower values favor cost savings.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="capability-cache-ttl">Decision cache TTL (seconds)</Label>
+          <Input
+            id="capability-cache-ttl"
+            type="number"
+            min={1}
+            step={1}
+            value={value.cache_ttl_seconds}
+            onChange={(event) => onChange({ ...value, cache_ttl_seconds: Number(event.target.value) })}
+          />
+          <p className="text-xs text-muted-foreground">Reuses the decision for repeated calls in the same user turn.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CapabilityRouterConfig;
diff --git a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
index 1a1725b8dd0..67b7ec56464 100644
--- a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
@@ -50,6 +50,12 @@ import { tierRowLabel } from "./complexity_router_tiers";
 import { buildAutoRouterTestTargets, AutoRouterTestTarget } from "./build_auto_router_test_targets";
 import AutoRouterConnectionTest from "./auto_router_connection_test";
 import AutoRouterRoutingTest from "./AutoRouterRoutingTest";
+import CapabilityRouterConfig from "./CapabilityRouterConfig";
+import {
+  capabilityRouterConfigError,
+  defaultCapabilityRouterConfig,
+  type CapabilityRouterConfigValue,
+} from "./capability_router_config";
 import { toast } from "@/lib/toast";
 import {
   getMissingModelsInPreset,
@@ -186,6 +192,9 @@ const AddAutoRouterTab: React.FC<AddAutoRouterTabProps> = ({
     tiers: { SIMPLE: [], MEDIUM: [], COMPLEX: [], REASONING: [] },
     classifier_type: "heuristic",
   });
+  const [routerKind, setRouterKind] = useState<"complexity" | "capability">("complexity");
+  const [capabilityRouterConfig, setCapabilityRouterConfig] =
+    useState<CapabilityRouterConfigValue>(defaultCapabilityRouterConfig);
 
   const [customTechnicalKeywords, setCustomTechnicalKeywords] = useState<string[]>([]);
   const [keywordTierRules, setKeywordTierRules] = useState<KeywordTierRule[]>([]);
@@ -342,13 +351,16 @@ const AddAutoRouterTab: React.FC<AddAutoRouterTabProps> = ({
     defaultModel: complexityRouterConfig.default_model,
   };
 
-  const submitBlockedReason = getSubmitBlockedReason(
-    complexityRouterConfig,
-    keywordTierRules,
-    referencedModelsParams,
-    groupsOnlyAvailability,
-    modelInfo,
-  );
+  const submitBlockedReason =
+    routerKind === "capability"
+      ? capabilityRouterConfigError(capabilityRouterConfig)
+      : getSubmitBlockedReason(
+          complexityRouterConfig,
+          keywordTierRules,
+          referencedModelsParams,
+          groupsOnlyAvailability,
+          modelInfo,
+        );
 
   const complexityRouterConfigParams: BuildComplexityRouterConfigParams = {
     tiers: complexityRouterConfig.tiers,
@@ -460,27 +472,75 @@ const AddAutoRouterTab: React.FC<AddAutoRouterTabProps> = ({
 
     setIsSubmitting(true);
     try {
-      await submitRecommendedRouter(name);
+      if (routerKind === "capability") {
+        const blockedReason = capabilityRouterConfigError(capabilityRouterConfig);
+        if (blockedReason) {
+          toast.fromError(blockedReason);
+          return;
+        }
+        if (!(await form.trigger(requiresTeamScope ? ["auto_router_name", "team_id"] : ["auto_router_name"]))) {
+          return;
+        }
+        const serverVerdict = await validateAutoRouterConfig(
+          accessToken,
+          capabilityRouterConfig as unknown as Record<string, unknown>,
+          requiresTeamScope ? form.getValues("team_id") : undefined,
+          "capability",
+        );
+        const dryRunError = dryRunRejection(serverVerdict);
+        if (dryRunError) {
+          toast.fromError(dryRunError);
+          return;
+        }
+        await handleAddAutoRouterSubmit(
+          {
+            auto_router_name: name,
+            ...teamScopePayload(requiresTeamScope, form.getValues("team_id")),
+            model_type: "capability_router",
+            capability_router_config: capabilityRouterConfig,
+            model_access_group: form.getValues("model_access_group"),
+          },
+          accessToken,
+          () => form.reset(EMPTY_FORM_VALUES),
+          handleOk,
+        );
+      } else {
+        await submitRecommendedRouter(name);
+      }
     } finally {
       setIsSubmitting(false);
     }
   };
 
   const handleTestConnection = () => {
-    const testTargetParams = {
-      tiers: activeTierRows(complexityRouterConfig).map(
-        (row) => [activeTierName(row), row.models] as [string, string[]],
-      ),
-      semanticMatchingEnabled,
-      embeddingModel,
-      defaultModel: resolveComplexityDefaultModel(complexityRouterConfig, complexityRouterConfig.default_model),
-      classifier: usesLlmClassifier(effectiveClassifierType(complexityRouterConfig))
+    const testTargetParams =
+      routerKind === "capability"
         ? {
-            model: complexityRouterConfig.classifier_llm_config?.model ?? "",
-            reasoningEffort: complexityRouterConfig.classifier_llm_config?.reasoning_effort,
+            tiers: [
+              ["Candidates", capabilityRouterConfig.candidates.map((candidate) => candidate.model).filter(Boolean)] as [
+                string,
+                string[],
+              ],
+            ],
+            semanticMatchingEnabled: false,
+            embeddingModel: undefined,
+            defaultModel: capabilityRouterConfig.fallback_model,
+            classifier: { model: capabilityRouterConfig.classifier.model },
           }
-        : undefined,
-    };
+        : {
+            tiers: activeTierRows(complexityRouterConfig).map(
+              (row) => [activeTierName(row), row.models] as [string, string[]],
+            ),
+            semanticMatchingEnabled,
+            embeddingModel,
+            defaultModel: resolveComplexityDefaultModel(complexityRouterConfig, complexityRouterConfig.default_model),
+            classifier: usesLlmClassifier(effectiveClassifierType(complexityRouterConfig))
+              ? {
+                  model: complexityRouterConfig.classifier_llm_config?.model ?? "",
+                  reasoningEffort: complexityRouterConfig.classifier_llm_config?.reasoning_effort,
+                }
+              : undefined,
+          };
     const targets = buildAutoRouterTestTargets(testTargetParams);
 
     if (targets.length === 0) {
@@ -508,71 +568,100 @@ const AddAutoRouterTab: React.FC<AddAutoRouterTabProps> = ({
                 {({ ref, ...field }) => <Input {...field} ref={ref} placeholder="e.g., smart_router, auto_router_1" />}
               </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">Template</label>
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-foreground">Router type</label>
                 <Select
-                  items={templateItems}
-                  value={selectedPreset ?? null}
-                  onValueChange={(presetKey: string | null) => handlePresetChange(presetKey ?? undefined)}
+                  value={routerKind}
+                  onValueChange={(value: string | null) =>
+                    setRouterKind(value === "capability" ? "capability" : "complexity")
+                  }
                 >
-                  <SelectTrigger data-testid="template-selector" className="w-full">
-                    <SelectValue placeholder="Choose a template or select Custom to define your own" />
+                  <SelectTrigger className="w-full" data-testid="router-type-selector">
+                    <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    {sortedPresetOptions.map(({ preset, availability: presetState }) => {
-                      const disabledHint = presetDisabledHint(presetState);
-                      const hintClass = isPresetHintAlarming(presetState)
-                        ? "text-destructive"
-                        : "text-muted-foreground";
-                      const matchedHint =
-                        presetState.kind === "available" && presetState.viaDeployments
-                          ? "Matches your deployments"
-                          : null;
-
-                      return (
-                        <SelectItem
-                          key={preset.key}
-                          value={preset.key}
-                          label={preset.label}
-                          disabled={disabledHint !== null}
-                          title={disabledHint ?? preset.description}
-                        >
-                          <div>
-                            <div className="font-medium">{preset.label}</div>
-                            <div className="text-xs text-muted-foreground">{preset.description}</div>
-                            {disabledHint && <div className={`text-xs mt-1 ${hintClass}`}>{disabledHint}</div>}
-                            {matchedHint && <div className="text-xs mt-1 text-success">{matchedHint}</div>}
-                          </div>
-                        </SelectItem>
-                      );
-                    })}
-                    <SelectItem value="custom" label="Custom Configuration">
-                      <div>
-                        <div className="font-medium">Custom Configuration</div>
-                        <div className="text-xs text-muted-foreground">Define your auto router from scratch</div>
-                      </div>
+                    <SelectItem value="complexity" label="Complexity">
+                      Complexity
+                    </SelectItem>
+                    <SelectItem value="capability" label="Capability">
+                      Capability
                     </SelectItem>
                   </SelectContent>
                 </Select>
-                {modelsUnverifiable && (
-                  <div className="text-xs mt-1 text-destructive">
-                    Could not load available models.{" "}
-                    <button type="button" className="underline" onClick={() => refetchModels()}>
-                      Retry
-                    </button>
-                  </div>
-                )}
-                {presetsPending && <div className="text-xs mt-1 text-muted-foreground">Loading templates...</div>}
-                {presetsUnavailable && (
-                  <div className="text-xs mt-1 text-destructive">
-                    Could not load templates, so only Custom Configuration is shown.{" "}
-                    <button type="button" className="underline" onClick={() => void refetchPresets()}>
-                      Retry
-                    </button>
-                  </div>
-                )}
+                <p className="text-xs text-muted-foreground">
+                  {routerKind === "capability"
+                    ? "Estimate each model's probability of success, then choose the cheapest model above your threshold."
+                    : "Route requests by estimated task complexity."}
+                </p>
               </div>
 
+              {routerKind === "complexity" && (
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-2">Template</label>
+                  <Select
+                    items={templateItems}
+                    value={selectedPreset ?? null}
+                    onValueChange={(presetKey: string | null) => handlePresetChange(presetKey ?? undefined)}
+                  >
+                    <SelectTrigger data-testid="template-selector" className="w-full">
+                      <SelectValue placeholder="Choose a template or select Custom to define your own" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {sortedPresetOptions.map(({ preset, availability: presetState }) => {
+                        const disabledHint = presetDisabledHint(presetState);
+                        const hintClass = isPresetHintAlarming(presetState)
+                          ? "text-destructive"
+                          : "text-muted-foreground";
+                        const matchedHint =
+                          presetState.kind === "available" && presetState.viaDeployments
+                            ? "Matches your deployments"
+                            : null;
+
+                        return (
+                          <SelectItem
+                            key={preset.key}
+                            value={preset.key}
+                            label={preset.label}
+                            disabled={disabledHint !== null}
+                            title={disabledHint ?? preset.description}
+                          >
+                            <div>
+                              <div className="font-medium">{preset.label}</div>
+                              <div className="text-xs text-muted-foreground">{preset.description}</div>
+                              {disabledHint && <div className={`text-xs mt-1 ${hintClass}`}>{disabledHint}</div>}
+                              {matchedHint && <div className="text-xs mt-1 text-success">{matchedHint}</div>}
+                            </div>
+                          </SelectItem>
+                        );
+                      })}
+                      <SelectItem value="custom" label="Custom Configuration">
+                        <div>
+                          <div className="font-medium">Custom Configuration</div>
+                          <div className="text-xs text-muted-foreground">Define your auto router from scratch</div>
+                        </div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {modelsUnverifiable && (
+                    <div className="text-xs mt-1 text-destructive">
+                      Could not load available models.{" "}
+                      <button type="button" className="underline" onClick={() => refetchModels()}>
+                        Retry
+                      </button>
+                    </div>
+                  )}
+                  {presetsPending && <div className="text-xs mt-1 text-muted-foreground">Loading templates...</div>}
+                  {presetsUnavailable && (
+                    <div className="text-xs mt-1 text-destructive">
+                      Could not load templates, so only Custom Configuration is shown.{" "}
+                      <button type="button" className="underline" onClick={() => void refetchPresets()}>
+                        Retry
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )}
+
               {requiresTeamScope && (
                 <FormField
                   control={form.control}
@@ -588,56 +677,64 @@ const AddAutoRouterTab: React.FC<AddAutoRouterTabProps> = ({
                 </FormField>
               )}
 
-              <div className="border border-border rounded-lg">
-                <button
-                  type="button"
-                  onClick={() => setDetailsExpanded((expanded) => !expanded)}
-                  className="w-full flex flex-col gap-1 px-4 py-3 text-left hover:bg-muted"
-                  data-testid="detailed-configuration-toggle"
-                >
-                  <span className="flex items-center gap-2 font-medium text-foreground">
-                    {detailsExpanded ? (
-                      <ChevronDown className="size-3 text-muted-foreground" />
-                    ) : (
-                      <ChevronRight className="size-3 text-muted-foreground" />
-                    )}
-                    Detailed Configuration
-                  </span>
-                  {!detailsExpanded && (
-                    <span className="text-xs text-muted-foreground line-clamp-2">
-                      {tierConfigSummary(complexityRouterConfig)}
-                    </span>
-                  )}
-                </button>
-                {detailsExpanded && (
-                  <div className="px-4 pb-4">
-                    <ComplexityRouterConfig
-                      editingTiers={editingTiers}
-                      onEditingTiersChange={setEditingTiers}
-                      modelInfo={modelInfo}
-                      value={complexityRouterConfig}
-                      onChange={setComplexityRouterConfig}
-                      customTechnicalKeywords={customTechnicalKeywords}
-                      onCustomTechnicalKeywordsChange={setCustomTechnicalKeywords}
-                      keywordTierRules={keywordTierRules}
-                      onKeywordTierRulesChange={setKeywordTierRules}
-                      keywordRulesError={getKeywordTierRulesError(
-                        keywordTierRules,
-                        activeTierRows(complexityRouterConfig),
+              {routerKind === "complexity" ? (
+                <div className="border border-border rounded-lg">
+                  <button
+                    type="button"
+                    onClick={() => setDetailsExpanded((expanded) => !expanded)}
+                    className="w-full flex flex-col gap-1 px-4 py-3 text-left hover:bg-muted"
+                    data-testid="detailed-configuration-toggle"
+                  >
+                    <span className="flex items-center gap-2 font-medium text-foreground">
+                      {detailsExpanded ? (
+                        <ChevronDown className="size-3 text-muted-foreground" />
+                      ) : (
+                        <ChevronRight className="size-3 text-muted-foreground" />
                       )}
-                      semanticMatchingEnabled={semanticMatchingEnabled}
-                      onSemanticMatchingEnabledChange={setSemanticMatchingEnabled}
-                      embeddingModel={embeddingModel}
-                      onEmbeddingModelChange={setEmbeddingModel}
-                      matchThreshold={matchThreshold}
-                      onMatchThresholdChange={setMatchThreshold}
-                      escalationKeywords={escalationKeywords}
-                      onEscalationKeywordsChange={setEscalationKeywords}
-                      showValidationErrors={showValidationErrors}
-                    />
-                  </div>
-                )}
-              </div>
+                      Detailed Configuration
+                    </span>
+                    {!detailsExpanded && (
+                      <span className="text-xs text-muted-foreground line-clamp-2">
+                        {tierConfigSummary(complexityRouterConfig)}
+                      </span>
+                    )}
+                  </button>
+                  {detailsExpanded && (
+                    <div className="px-4 pb-4">
+                      <ComplexityRouterConfig
+                        editingTiers={editingTiers}
+                        onEditingTiersChange={setEditingTiers}
+                        modelInfo={modelInfo}
+                        value={complexityRouterConfig}
+                        onChange={setComplexityRouterConfig}
+                        customTechnicalKeywords={customTechnicalKeywords}
+                        onCustomTechnicalKeywordsChange={setCustomTechnicalKeywords}
+                        keywordTierRules={keywordTierRules}
+                        onKeywordTierRulesChange={setKeywordTierRules}
+                        keywordRulesError={getKeywordTierRulesError(
+                          keywordTierRules,
+                          activeTierRows(complexityRouterConfig),
+                        )}
+                        semanticMatchingEnabled={semanticMatchingEnabled}
+                        onSemanticMatchingEnabledChange={setSemanticMatchingEnabled}
+                        embeddingModel={embeddingModel}
+                        onEmbeddingModelChange={setEmbeddingModel}
+                        matchThreshold={matchThreshold}
+                        onMatchThresholdChange={setMatchThreshold}
+                        escalationKeywords={escalationKeywords}
+                        onEscalationKeywordsChange={setEscalationKeywords}
+                        showValidationErrors={showValidationErrors}
+                      />
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <CapabilityRouterConfig
+                  modelInfo={modelInfo}
+                  value={capabilityRouterConfig}
+                  onChange={setCapabilityRouterConfig}
+                />
+              )}
 
               {isAdmin && (
                 <FormField
@@ -723,8 +820,15 @@ const AddAutoRouterTab: React.FC<AddAutoRouterTabProps> = ({
           {isRoutingTestVisible && (
             <AutoRouterRoutingTest
               accessToken={accessToken}
-              config={buildComplexityRouterConfig(complexityRouterConfigParams)}
-              defaultModel={resolveComplexityDefaultModel(complexityRouterConfig, complexityRouterConfig.default_model)}
+              config={
+                routerKind === "complexity" ? buildComplexityRouterConfig(complexityRouterConfigParams) : undefined
+              }
+              capabilityConfig={routerKind === "capability" ? capabilityRouterConfig : undefined}
+              defaultModel={
+                routerKind === "complexity"
+                  ? resolveComplexityDefaultModel(complexityRouterConfig, complexityRouterConfig.default_model)
+                  : undefined
+              }
               routerName={watchedName}
               teamId={requiresTeamScope ? watchedTeamId : undefined}
             />
diff --git a/ui/litellm-dashboard/src/components/add_model/add_capability_router_tab.integration.test.tsx b/ui/litellm-dashboard/src/components/add_model/add_capability_router_tab.integration.test.tsx
new file mode 100644
index 00000000000..aff26d0b01a
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/add_capability_router_tab.integration.test.tsx
@@ -0,0 +1,90 @@
+import userEvent from "@testing-library/user-event";
+import { fireEvent, renderWithProviders, screen, testQueryClient, waitFor } from "../../../tests/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import AddAutoRouterTab from "./add_auto_router_tab";
+import { handleAddAutoRouterSubmit } from "./handle_add_auto_router_submit";
+
+vi.mock(
+  "@/app/(dashboard)/hooks/autoRouter/useComplexityScorerDefaults",
+  async () => await import("../../../tests/mocks/complexityScorerDefaults"),
+);
+
+const { mockFetchAvailableModels, mockFetchAllModelDeployments, validateAutoRouterConfig } = vi.hoisted(() => ({
+  mockFetchAvailableModels: vi.fn(),
+  mockFetchAllModelDeployments: vi.fn(),
+  validateAutoRouterConfig: vi.fn().mockResolvedValue({ valid: true }),
+}));
+
+vi.mock("../networking", () => ({
+  modelAvailableCall: vi.fn().mockResolvedValue({ data: [] }),
+  validateAutoRouterConfig,
+}));
+vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: mockFetchAvailableModels }));
+vi.mock("@/app/(dashboard)/hooks/models/useModels", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/app/(dashboard)/hooks/models/useModels")>();
+  return { ...actual, fetchAllModelDeployments: mockFetchAllModelDeployments };
+});
+vi.mock("./handle_add_auto_router_submit", () => ({ handleAddAutoRouterSubmit: vi.fn() }));
+vi.mock("./CapabilityRouterConfig", () => ({
+  default: ({ onChange }: { onChange: (value: unknown) => void }) => (
+    <button
+      type="button"
+      onClick={() =>
+        onChange({
+          candidates: [
+            { model: "small", description: "Bounded extraction" },
+            { model: "frontier", description: "Ambiguous multi-step work" },
+          ],
+          classifier: { model: "classifier", timeout_ms: 3000, max_output_tokens: 1024 },
+          probability_threshold: 0.75,
+          fallback_model: "frontier",
+          estimated_output_tokens: 1000,
+          cache_ttl_seconds: 3600,
+        })
+      }
+    >
+      Fill capability config
+    </button>
+  ),
+}));
+
+describe("AddAutoRouterTab capability flow", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    testQueryClient.clear();
+    mockFetchAvailableModels.mockResolvedValue(
+      ["small", "frontier", "classifier"].map((model_group) => ({ model_group, mode: "chat" })),
+    );
+    mockFetchAllModelDeployments.mockResolvedValue([]);
+  });
+
+  it("validates and submits the capability config shown in the form", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AddAutoRouterTab handleOk={vi.fn()} accessToken="token" userRole="Admin" />);
+
+    fireEvent.click(screen.getByTestId("router-type-selector"));
+    await user.click(screen.getByRole("option", { name: "Capability" }));
+    expect(screen.queryByTestId("template-selector")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Fill capability config" }));
+    await user.type(screen.getByPlaceholderText(/smart_router/i), "cost-router");
+    await user.click(screen.getByRole("button", { name: "Add Auto Router" }));
+
+    await waitFor(() => expect(handleAddAutoRouterSubmit).toHaveBeenCalledOnce());
+    expect(validateAutoRouterConfig).toHaveBeenCalledWith(
+      "token",
+      expect.objectContaining({ probability_threshold: 0.75, cache_ttl_seconds: 3600 }),
+      undefined,
+      "capability",
+    );
+    expect(vi.mocked(handleAddAutoRouterSubmit).mock.calls[0]?.[0]).toMatchObject({
+      auto_router_name: "cost-router",
+      model_type: "capability_router",
+      capability_router_config: {
+        fallback_model: "frontier",
+        probability_threshold: 0.75,
+        cache_ttl_seconds: 3600,
+      },
+    });
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/add_model/auto_router_strategies.ts b/ui/litellm-dashboard/src/components/add_model/auto_router_strategies.ts
index e7880969d1c..822d6951bd1 100644
--- a/ui/litellm-dashboard/src/components/add_model/auto_router_strategies.ts
+++ b/ui/litellm-dashboard/src/components/add_model/auto_router_strategies.ts
@@ -13,12 +13,13 @@
  * prefixes are matched first, and only a bare `auto_router/<name>` is the semantic router.
  */
 
-export type AutoRouterKind = "complexity" | "adaptive" | "quality" | "semantic";
+export type AutoRouterKind = "complexity" | "capability" | "adaptive" | "quality" | "semantic";
 
 export interface AutoRouterParams {
   model?: string | null;
   complexity_router_config?: unknown;
   complexity_router_default_model?: string | null;
+  capability_router_config?: unknown;
   auto_router_config?: unknown;
   auto_router_default_model?: string | null;
   adaptive_router_config?: unknown;
@@ -32,7 +33,7 @@ export interface AutoRouterStrategy {
   /** Type-pill label. The complexity router overrides this with its classifier. */
   label: string;
   configKey: keyof AutoRouterParams;
-  defaultModelKey: keyof AutoRouterParams;
+  defaultModelKey?: keyof AutoRouterParams;
   /** Whether the dashboard has a form that understands this strategy's config shape. */
   hasEditor: boolean;
   matches: (params: AutoRouterParams) => boolean;
@@ -42,6 +43,13 @@ const startsWith = (params: AutoRouterParams, prefix: string): boolean => params
 
 /** Ordered; the semantic entry matches anything left and must stay last. */
 export const AUTO_ROUTER_STRATEGIES: readonly AutoRouterStrategy[] = [
+  {
+    kind: "capability",
+    label: "Capability",
+    configKey: "capability_router_config",
+    hasEditor: true,
+    matches: (p) => startsWith(p, "auto_router/capability_router") || p.capability_router_config != null,
+  },
   {
     kind: "complexity",
     label: "Complexity",
@@ -84,10 +92,14 @@ export const autoRouterStrategy = (params: AutoRouterParams | null | undefined):
 export const isComplexityRouter = (params: AutoRouterParams | null | undefined): boolean =>
   autoRouterStrategy(params).kind === "complexity";
 
+export const isCapabilityRouter = (params: AutoRouterParams | null | undefined): boolean =>
+  autoRouterStrategy(params).kind === "capability";
+
 /** Any `auto_router/*` deployment, whatever its strategy. Use for listing and filtering. */
 export const isAutoRouterDeployment = (params: AutoRouterParams | null | undefined): boolean =>
   params?.model?.startsWith("auto_router/") === true ||
   params?.complexity_router_config != null ||
+  params?.capability_router_config != null ||
   params?.auto_router_config != null;
 
 /**
diff --git a/ui/litellm-dashboard/src/components/add_model/build_auto_router_routing_test_request.ts b/ui/litellm-dashboard/src/components/add_model/build_auto_router_routing_test_request.ts
index 219dcbf6070..e4f0fe38b11 100644
--- a/ui/litellm-dashboard/src/components/add_model/build_auto_router_routing_test_request.ts
+++ b/ui/litellm-dashboard/src/components/add_model/build_auto_router_routing_test_request.ts
@@ -1,9 +1,11 @@
 import { AutoRouterRoutingTestRequest } from "../networking";
 import { ComplexityRouterConfigPayload } from "./build_complexity_router_config";
+import { CapabilityRouterConfigValue } from "./capability_router_config";
 
 export interface BuildAutoRouterRoutingTestRequestParams {
   prompt: string;
-  config: ComplexityRouterConfigPayload;
+  config?: ComplexityRouterConfigPayload;
+  capabilityConfig?: CapabilityRouterConfigValue;
   defaultModel: string | undefined;
   routerName: string | undefined;
   teamId: string | undefined;
@@ -12,12 +14,15 @@ export interface BuildAutoRouterRoutingTestRequestParams {
 export const buildAutoRouterRoutingTestRequest = ({
   prompt,
   config,
+  capabilityConfig,
   defaultModel,
   routerName,
   teamId,
 }: BuildAutoRouterRoutingTestRequestParams): AutoRouterRoutingTestRequest => ({
   prompt,
-  complexity_router_config: config,
+  ...(capabilityConfig
+    ? { capability_router_config: capabilityConfig as unknown as Record<string, unknown> }
+    : { complexity_router_config: config }),
   ...(defaultModel ? { default_model: defaultModel } : {}),
   ...(routerName?.trim() ? { router_name: routerName.trim() } : {}),
   ...(teamId ? { team_id: teamId } : {}),
diff --git a/ui/litellm-dashboard/src/components/add_model/capability_router_config.test.ts b/ui/litellm-dashboard/src/components/add_model/capability_router_config.test.ts
new file mode 100644
index 00000000000..b9508b1a855
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/capability_router_config.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  capabilityRouterConfigError,
+  defaultCapabilityRouterConfig,
+  hydrateCapabilityRouterConfig,
+} from "./capability_router_config";
+
+const validConfig = () => ({
+  ...defaultCapabilityRouterConfig(),
+  candidates: [
+    { model: "small", description: "Good for bounded extraction" },
+    { model: "frontier", description: "Good for ambiguous multi-step work" },
+  ],
+  classifier: { model: "classifier", timeout_ms: 3000, max_output_tokens: 1024 },
+  fallback_model: "frontier",
+});
+
+describe("capability router config", () => {
+  it("accepts the minimal complete configuration", () => {
+    expect(capabilityRouterConfigError(validConfig())).toBeNull();
+  });
+
+  it("requires descriptions, unique models, and a candidate fallback", () => {
+    expect(
+      capabilityRouterConfigError({
+        ...validConfig(),
+        candidates: [{ model: "small", description: "" }, validConfig().candidates[1]],
+      }),
+    ).toContain("Describe");
+    expect(
+      capabilityRouterConfigError({
+        ...validConfig(),
+        candidates: [validConfig().candidates[0], validConfig().candidates[0]],
+      }),
+    ).toContain("unique");
+    expect(capabilityRouterConfigError({ ...validConfig(), fallback_model: "other" })).toContain("fallback");
+  });
+
+  it("hydrates stored values while supplying newly introduced defaults", () => {
+    const hydrated = hydrateCapabilityRouterConfig({
+      candidates: validConfig().candidates,
+      classifier: { model: "classifier" },
+      fallback_model: "frontier",
+      probability_threshold: 0.8,
+    });
+
+    expect(hydrated.probability_threshold).toBe(0.8);
+    expect(hydrated.classifier.timeout_ms).toBe(3000);
+    expect(hydrated.cache_ttl_seconds).toBe(3600);
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/add_model/capability_router_config.ts b/ui/litellm-dashboard/src/components/add_model/capability_router_config.ts
new file mode 100644
index 00000000000..27c8b1b11af
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/add_model/capability_router_config.ts
@@ -0,0 +1,63 @@
+export interface CapabilityCandidate {
+  model: string;
+  description: string;
+}
+
+export interface CapabilityRouterConfigValue {
+  candidates: CapabilityCandidate[];
+  classifier: { model: string; timeout_ms: number; max_output_tokens: number };
+  probability_threshold: number;
+  fallback_model: string;
+  estimated_output_tokens: number;
+  cache_ttl_seconds: number;
+}
+
+export const defaultCapabilityRouterConfig = (): CapabilityRouterConfigValue => ({
+  candidates: [
+    { model: "", description: "" },
+    { model: "", description: "" },
+  ],
+  classifier: { model: "", timeout_ms: 3000, max_output_tokens: 1024 },
+  probability_threshold: 0.7,
+  fallback_model: "",
+  estimated_output_tokens: 1000,
+  cache_ttl_seconds: 3600,
+});
+
+export const capabilityRouterConfigError = (config: CapabilityRouterConfigValue): string | null => {
+  if (config.candidates.length < 2) return "Add at least two candidate models";
+  if (config.candidates.some((candidate) => !candidate.model.trim())) return "Select a model for every candidate";
+  if (new Set(config.candidates.map((candidate) => candidate.model)).size !== config.candidates.length) {
+    return "Candidate models must be unique";
+  }
+  if (config.candidates.some((candidate) => !candidate.description.trim())) {
+    return "Describe what every candidate model is good at";
+  }
+  if (!config.classifier.model.trim()) return "Select a classifier model";
+  if (!config.candidates.some((candidate) => candidate.model === config.fallback_model)) {
+    return "Select one candidate as the fallback model";
+  }
+  if (
+    !Number.isFinite(config.probability_threshold) ||
+    config.probability_threshold < 0 ||
+    config.probability_threshold > 1
+  ) {
+    return "Probability threshold must be between 0 and 1";
+  }
+  if (!Number.isInteger(config.cache_ttl_seconds) || config.cache_ttl_seconds < 1) {
+    return "Cache TTL must be at least one second";
+  }
+  return null;
+};
+
+export const hydrateCapabilityRouterConfig = (stored: unknown): CapabilityRouterConfigValue => {
+  const defaults = defaultCapabilityRouterConfig();
+  if (typeof stored !== "object" || stored === null || Array.isArray(stored)) return defaults;
+  const value = stored as Partial<CapabilityRouterConfigValue>;
+  return {
+    ...defaults,
+    ...value,
+    candidates: Array.isArray(value.candidates) ? value.candidates : defaults.candidates,
+    classifier: { ...defaults.classifier, ...(value.classifier ?? {}) },
+  };
+};
diff --git a/ui/litellm-dashboard/src/components/add_model/handle_add_auto_router_submit.tsx b/ui/litellm-dashboard/src/components/add_model/handle_add_auto_router_submit.tsx
index 9385836ce1a..208d6c8e9f0 100644
--- a/ui/litellm-dashboard/src/components/add_model/handle_add_auto_router_submit.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/handle_add_auto_router_submit.tsx
@@ -1,12 +1,14 @@
 import { modelCreateCall } from "../networking";
 import { toast } from "@/lib/toast";
 import type { ComplexityRouterConfigPayload } from "./build_complexity_router_config";
+import type { CapabilityRouterConfigValue } from "./capability_router_config";
 
 export interface AddAutoRouterValues {
   auto_router_name: string;
-  auto_router_default_model: string | undefined;
-  model_type: "complexity_router";
-  complexity_router_config: ComplexityRouterConfigPayload;
+  model_type: "complexity_router" | "capability_router";
+  auto_router_default_model?: string;
+  complexity_router_config?: ComplexityRouterConfigPayload;
+  capability_router_config?: CapabilityRouterConfigValue;
   team_id?: string;
   model_access_group?: string[];
 }
@@ -18,13 +20,20 @@ export const handleAddAutoRouterSubmit = async (
   callback?: () => void,
 ) => {
   try {
+    const litellmParams =
+      values.model_type === "capability_router"
+        ? {
+            model: "auto_router/capability_router",
+            capability_router_config: values.capability_router_config!,
+          }
+        : {
+            model: "auto_router/complexity_router",
+            complexity_router_config: values.complexity_router_config!,
+            complexity_router_default_model: values.auto_router_default_model,
+          };
     const autoRouterConfig = {
       model_name: values.auto_router_name,
-      litellm_params: {
-        model: "auto_router/complexity_router",
-        complexity_router_config: values.complexity_router_config,
-        complexity_router_default_model: values.auto_router_default_model,
-      },
+      litellm_params: litellmParams,
       model_info: {
         ...(values.team_id ? { team_id: values.team_id } : {}),
         ...(values.model_access_group?.length ? { access_groups: values.model_access_group } : {}),
diff --git a/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx b/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx
index ea1e5cba6a3..2e69ea2a0f2 100644
--- a/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx
+++ b/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx
@@ -23,7 +23,14 @@ import {
   tierParamsByRowId,
   resolveComplexityDefaultModel,
 } from "../add_model/tier_rows";
-import { isComplexityRouter } from "../add_model/auto_router_strategies";
+import { isCapabilityRouter, isComplexityRouter } from "../add_model/auto_router_strategies";
+import CapabilityRouterConfig from "../add_model/CapabilityRouterConfig";
+import {
+  capabilityRouterConfigError,
+  defaultCapabilityRouterConfig,
+  hydrateCapabilityRouterConfig,
+  type CapabilityRouterConfigValue,
+} from "../add_model/capability_router_config";
 import {
   type BuildComplexityRouterConfigParams,
   buildComplexityRouterConfig,
@@ -428,28 +435,36 @@ const EditAutoRouterModal: React.FC<EditAutoRouterModalProps> = ({
     tiers: { SIMPLE: [], MEDIUM: [], COMPLEX: [], REASONING: [] },
     classifier_type: "heuristic",
   });
+  const [capabilityRouterConfig, setCapabilityRouterConfig] =
+    useState<CapabilityRouterConfigValue>(defaultCapabilityRouterConfig);
   const isComplexityRouterModel = isComplexityRouter(modelData?.litellm_params);
+  const isCapabilityRouterModel = isCapabilityRouter(modelData?.litellm_params);
 
   const schema = useMemo(
-    () => (isComplexityRouterModel ? complexityRouterSchema : semanticRouterSchema),
-    [isComplexityRouterModel],
+    () => (isComplexityRouterModel || isCapabilityRouterModel ? complexityRouterSchema : semanticRouterSchema),
+    [isCapabilityRouterModel, isComplexityRouterModel],
   );
   const form = useZodForm(schema, { defaultValues: EMPTY_FORM_VALUES });
 
   // Mirrors the create form: the button says why it is unavailable and disables on the same
   // answer. Tiers use this modal's own rule, which allows a partly filled router, so an edit that
   // is legal today stays legal.
-  const submitBlockedReason = !isComplexityRouterModel
-    ? null
-    : (complexityRouterConfig.custom_tier_set
-        ? getCustomTierRowsError(complexityRouterConfig.custom_tier_set) ??
-          getMissingTiersError(activeTierRows(complexityRouterConfig))
-        : (Object.values(complexityRouterConfig.tiers).every((models) => models.length === 0)
-            ? "Please select at least one model for a complexity tier"
-            : null) ?? getTierLabelsError(complexityRouterConfig.tier_labels)) ??
-      getPlanModeTierError(complexityRouterConfig.plan_mode_min_tier, activeTierRows(complexityRouterConfig)) ??
-      getKeywordTierRulesError(keywordTierRules, activeTierRows(complexityRouterConfig)) ??
-      getClassifierModelError(complexityRouterConfig);
+  const complexitySubmitBlockedReason =
+    (complexityRouterConfig.custom_tier_set
+      ? getCustomTierRowsError(complexityRouterConfig.custom_tier_set) ??
+        getMissingTiersError(activeTierRows(complexityRouterConfig))
+      : (Object.values(complexityRouterConfig.tiers).every((models) => models.length === 0)
+          ? "Please select at least one model for a complexity tier"
+          : null) ?? getTierLabelsError(complexityRouterConfig.tier_labels)) ??
+    getPlanModeTierError(complexityRouterConfig.plan_mode_min_tier, activeTierRows(complexityRouterConfig)) ??
+    getKeywordTierRulesError(keywordTierRules, activeTierRows(complexityRouterConfig)) ??
+    getClassifierModelError(complexityRouterConfig);
+  let submitBlockedReason: string | null = null;
+  if (isCapabilityRouterModel) {
+    submitBlockedReason = capabilityRouterConfigError(capabilityRouterConfig);
+  } else if (isComplexityRouterModel) {
+    submitBlockedReason = complexitySubmitBlockedReason;
+  }
 
   useEffect(() => {
     if (isVisible && modelData) {
@@ -487,6 +502,15 @@ const EditAutoRouterModal: React.FC<EditAutoRouterModalProps> = ({
   const initializeForm = () => {
     setEditingTiers(false);
     try {
+      if (isCapabilityRouterModel) {
+        setCapabilityRouterConfig(hydrateCapabilityRouterConfig(modelData.litellm_params?.capability_router_config));
+        form.reset({
+          ...EMPTY_FORM_VALUES,
+          auto_router_name: modelData.model_name,
+          model_access_group: modelData.model_info?.access_groups || [],
+        });
+        return;
+      }
       if (isComplexityRouterModel) {
         // Parse the complexity_router_config if it exists and is a string
         let parsedConfig = modelData.litellm_params?.complexity_router_config || {};
@@ -551,6 +575,46 @@ const EditAutoRouterModal: React.FC<EditAutoRouterModalProps> = ({
   };
 
   const saveValues = async (values: EditAutoRouterFormValues) => {
+    if (isCapabilityRouterModel) {
+      const validationError = capabilityRouterConfigError(capabilityRouterConfig);
+      if (validationError) {
+        toast.fromError(validationError);
+        return;
+      }
+      const serverVerdict = await validateAutoRouterConfig(
+        accessToken,
+        capabilityRouterConfig as unknown as Record<string, unknown>,
+        modelData?.model_info?.team_id,
+        "capability",
+      );
+      const dryRunError = dryRunRejection(serverVerdict);
+      if (dryRunError) {
+        toast.fromError(dryRunError);
+        return;
+      }
+      const updatedLitellmParams = {
+        ...modelData.litellm_params,
+        capability_router_config: capabilityRouterConfig,
+      };
+      const updatedModelInfo = {
+        ...modelData.model_info,
+        access_groups: values.model_access_group || [],
+      };
+      await modelPatchUpdateCall(
+        accessToken,
+        { model_name: values.auto_router_name, litellm_params: updatedLitellmParams, model_info: updatedModelInfo },
+        modelData.model_info.id,
+      );
+      toast.success("Auto router configuration updated successfully");
+      onSuccess({
+        ...modelData,
+        model_name: values.auto_router_name,
+        litellm_params: updatedLitellmParams,
+        model_info: updatedModelInfo,
+      });
+      onCancel();
+      return;
+    }
     if (isComplexityRouterModel) {
       const { tiers, custom_tier_set, classifier_llm_config } = complexityRouterConfig;
       const rows = activeTierRows(complexityRouterConfig);
@@ -721,78 +785,86 @@ const EditAutoRouterModal: React.FC<EditAutoRouterModalProps> = ({
                 {({ ref, ...field }) => <Input {...field} ref={ref} placeholder="e.g., auto_router_1, smart_routing" />}
               </FormField>
 
-              {isComplexityRouterModel ? (
-                /* Complexity Router Configuration */
-                <div className="w-full">
-                  <ComplexityRouterConfig
-                    editingTiers={editingTiers}
-                    onEditingTiersChange={setEditingTiers}
-                    showValidationErrors={showValidationErrors}
-                    modelInfo={modelInfo}
-                    value={complexityRouterConfig}
-                    onChange={(config) => {
-                      setComplexityRouterConfig(config);
-                    }}
-                    customTechnicalKeywords={customTechnicalKeywords}
-                    onCustomTechnicalKeywordsChange={setCustomTechnicalKeywords}
-                    keywordTierRules={keywordTierRules}
-                    onKeywordTierRulesChange={setKeywordTierRules}
-                    keywordRulesError={getKeywordTierRulesError(
-                      keywordTierRules,
-                      activeTierRows(complexityRouterConfig),
-                    )}
-                    semanticMatchingEnabled={semanticMatchingEnabled}
-                    onSemanticMatchingEnabledChange={setSemanticMatchingEnabled}
-                    embeddingModel={embeddingModel}
-                    onEmbeddingModelChange={setEmbeddingModel}
-                    matchThreshold={matchThreshold}
-                    onMatchThresholdChange={setMatchThreshold}
-                    escalationKeywords={escalationKeywords}
-                    onEscalationKeywordsChange={setEscalationKeywords}
-                  />
-                </div>
-              ) : (
-                <>
-                  {/* Router Configuration Builder */}
+              {isCapabilityRouterModel && (
+                <CapabilityRouterConfig
+                  modelInfo={modelInfo}
+                  value={capabilityRouterConfig}
+                  onChange={setCapabilityRouterConfig}
+                />
+              )}
+              {!isCapabilityRouterModel &&
+                (isComplexityRouterModel ? (
+                  /* Complexity Router Configuration */
                   <div className="w-full">
-                    <RouterConfigBuilder
+                    <ComplexityRouterConfig
+                      editingTiers={editingTiers}
+                      onEditingTiersChange={setEditingTiers}
+                      showValidationErrors={showValidationErrors}
                       modelInfo={modelInfo}
-                      value={routerConfig}
+                      value={complexityRouterConfig}
                       onChange={(config) => {
-                        setRouterConfig(config);
+                        setComplexityRouterConfig(config);
                       }}
+                      customTechnicalKeywords={customTechnicalKeywords}
+                      onCustomTechnicalKeywordsChange={setCustomTechnicalKeywords}
+                      keywordTierRules={keywordTierRules}
+                      onKeywordTierRulesChange={setKeywordTierRules}
+                      keywordRulesError={getKeywordTierRulesError(
+                        keywordTierRules,
+                        activeTierRows(complexityRouterConfig),
+                      )}
+                      semanticMatchingEnabled={semanticMatchingEnabled}
+                      onSemanticMatchingEnabledChange={setSemanticMatchingEnabled}
+                      embeddingModel={embeddingModel}
+                      onEmbeddingModelChange={setEmbeddingModel}
+                      matchThreshold={matchThreshold}
+                      onMatchThresholdChange={setMatchThreshold}
+                      escalationKeywords={escalationKeywords}
+                      onEscalationKeywordsChange={setEscalationKeywords}
                     />
                   </div>
-
-                  <FormField control={form.control} name="auto_router_default_model" label="Default Model">
-                    {({ id, value, onChange, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) => (
-                      <ModelChoiceCombobox
-                        id={id}
-                        value={value}
-                        onChange={onChange}
-                        choices={modelChoices}
-                        placeholder="Select a default model"
-                        ariaInvalid={ariaInvalid}
-                        ariaDescribedBy={ariaDescribedBy}
+                ) : (
+                  <>
+                    {/* Router Configuration Builder */}
+                    <div className="w-full">
+                      <RouterConfigBuilder
+                        modelInfo={modelInfo}
+                        value={routerConfig}
+                        onChange={(config) => {
+                          setRouterConfig(config);
+                        }}
                       />
-                    )}
-                  </FormField>
+                    </div>
 
-                  <FormField control={form.control} name="auto_router_embedding_model" label="Embedding Model">
-                    {({ id, value, onChange, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) => (
-                      <ModelChoiceCombobox
-                        id={id}
-                        value={value}
-                        onChange={onChange}
-                        choices={modelChoices}
-                        placeholder="Select an embedding model"
-                        ariaInvalid={ariaInvalid}
-                        ariaDescribedBy={ariaDescribedBy}
-                      />
-                    )}
-                  </FormField>
-                </>
-              )}
+                    <FormField control={form.control} name="auto_router_default_model" label="Default Model">
+                      {({ id, value, onChange, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) => (
+                        <ModelChoiceCombobox
+                          id={id}
+                          value={value}
+                          onChange={onChange}
+                          choices={modelChoices}
+                          placeholder="Select a default model"
+                          ariaInvalid={ariaInvalid}
+                          ariaDescribedBy={ariaDescribedBy}
+                        />
+                      )}
+                    </FormField>
+
+                    <FormField control={form.control} name="auto_router_embedding_model" label="Embedding Model">
+                      {({ id, value, onChange, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) => (
+                        <ModelChoiceCombobox
+                          id={id}
+                          value={value}
+                          onChange={onChange}
+                          choices={modelChoices}
+                          placeholder="Select an embedding model"
+                          ariaInvalid={ariaInvalid}
+                          ariaDescribedBy={ariaDescribedBy}
+                        />
+                      )}
+                    </FormField>
+                  </>
+                ))}
 
               {userRole === "Admin" && (
                 <FormField
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 1384679a88a..63908874cf6 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -2411,7 +2411,8 @@ export const testModelGroupConnection = async (
 
 export interface AutoRouterRoutingTestRequest {
   prompt: string;
-  complexity_router_config: ComplexityRouterConfigPayload;
+  complexity_router_config?: ComplexityRouterConfigPayload;
+  capability_router_config?: Record<string, unknown>;
   default_model?: string;
   router_name?: string;
   team_id?: string;
@@ -2452,16 +2453,18 @@ export interface ComplexityRouterConfigValidation {
 // write gate stays authoritative.
 export const validateAutoRouterConfig = async (
   accessToken: string,
-  complexityRouterConfig: Record<string, unknown>,
+  routerConfig: Record<string, unknown>,
   teamId?: string,
+  routerType: "complexity" | "capability" = "complexity",
 ): Promise<ComplexityRouterConfigValidation> => {
   try {
-    return await apiClient.post<ComplexityRouterConfigValidation>("/auto_router/validate_complexity_router_config", {
+    const configKey = `${routerType}_router_config`;
+    return await apiClient.post<ComplexityRouterConfigValidation>(`/auto_router/validate_${routerType}_router_config`, {
       accessToken,
-      body: { complexity_router_config: complexityRouterConfig, ...(teamId && { team_id: teamId }) },
+      body: { [configKey]: routerConfig, ...(teamId && { team_id: teamId }) },
     });
   } catch (error) {
-    console.warn("Could not dry-run the complexity router config; the save will be validated server side", error);
+    console.warn(`Could not dry-run the ${routerType} router config; the save will be validated server side`, error);
     return { valid: true };
   }
 };
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RoutingDecisionCard.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RoutingDecisionCard.tsx
index cf2c71e64c6..bf13e6d0423 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RoutingDecisionCard.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RoutingDecisionCard.tsx
@@ -27,12 +27,19 @@ export interface RoutingDecision {
   escalated?: boolean;
   tier_boundaries?: RoutingDecisionTierBoundaries;
   reasoning_override_min_score?: number;
+  probability_threshold?: number;
+  candidate_probabilities?: Record<string, number>;
+  candidate_costs?: Record<string, number>;
+  qualified_models?: string[];
+  fallback_reason?: string;
+  cached?: boolean;
 }
 
 const ROUTER_TYPE_LABELS: Record<string, string> = {
   complexity: "Auto-Router v2",
   adaptive: "Adaptive router",
   quality: "Quality router",
+  capability: "Capability router",
 };
 
 /**
@@ -99,6 +106,9 @@ const CONSTANT_CAUSE_LABELS: Record<string, string> = {
   default_fallback: "Default model, no route matched",
   classifier_fallback: "Fallback tier, LLM classifier failed",
   default_model_fallback: "Default model, LLM classifier failed",
+  capability_classifier: "Capability classifier",
+  capability_cache: "Cached capability decision",
+  capability_fallback: "Capability fallback",
 };
 
 function describeCause(decision: RoutingDecision): string {
@@ -171,6 +181,12 @@ export function RoutingDecisionCard({
     escalated,
     escalation_keyword: escalationKeyword,
     tier_boundaries: tierBoundaries,
+    probability_threshold: probabilityThreshold,
+    candidate_probabilities: candidateProbabilities,
+    candidate_costs: candidateCosts,
+    qualified_models: qualifiedModels,
+    fallback_reason: fallbackReason,
+    cached,
   } = decision;
 
   // On an override row the score did not decide the tier, so showing it against a
@@ -218,6 +234,25 @@ export function RoutingDecisionCard({
 
         {routedModel && <Row label="Routed to">{routedModel}</Row>}
 
+        {probabilityThreshold !== undefined && <Row label="Threshold">{Math.round(probabilityThreshold * 100)}%</Row>}
+
+        {candidateProbabilities && Object.keys(candidateProbabilities).length > 0 && (
+          <Row label="Candidates">
+            <span className="space-y-1">
+              {Object.entries(candidateProbabilities).map(([model, probability]) => (
+                <span key={model} className="block">
+                  {model}: {Math.round(probability * 100)}%
+                  {candidateCosts?.[model] !== undefined && ` · $${candidateCosts[model].toFixed(6)}`}
+                  {qualifiedModels?.includes(model) ? " · qualified" : ""}
+                </span>
+              ))}
+            </span>
+          </Row>
+        )}
+
+        {fallbackReason && <Row label="Fallback">{fallbackReason.replaceAll("_", " ")}</Row>}
+        {cached !== undefined && <Row label="Cached">{cached ? "Yes" : "No"}</Row>}
+
         {escalated !== undefined && <Row label="Escalated">{describeEscalation(escalated, escalationKeyword)}</Row>}
 
         {signals && signals.length > 0 && (