From 6a950df5498e1d40ec086e6f0ef2bb35b85e9128 Mon Sep 17 00:00:00 2001
From: moe-berri <moe@berri.ai>
Date: Tue, 8 Sep 2026 12:37:34 -0700
Subject: [PATCH] fix(ui): put the non-reasoning switch above the tier rows

The switch adds a row at the top of the tier list, so sitting below Reasoning
put the control and the thing it changes at opposite ends of the card. It now
heads the list, with a separator between it and the first row.
---
 .../src/components/add_model/ComplexityRouterConfig.tsx   | 8 ++++----
 .../src/components/add_model/NonReasoningTierToggle.tsx   | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
index 540b68cf9f7..c89c130af86 100644
--- a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
@@ -659,6 +659,10 @@ const ComplexityRouterConfig: React.FC<ComplexityRouterConfigProps> = ({
 
       <Card>
         <CardContent>
+          {!customTierSet && (
+            <NonReasoningTierToggle value={value} onChange={onChange} available={value.classifier_type === "llm"} />
+          )}
+
           {tierRows.map((row, index) => {
             const tierInfo = builtInTierInfo(row.id);
             const label = tierRowLabel(row, value.tier_labels);
@@ -739,10 +743,6 @@ const ComplexityRouterConfig: React.FC<ComplexityRouterConfigProps> = ({
             );
           })}
 
-          {!customTierSet && (
-            <NonReasoningTierToggle value={value} onChange={onChange} available={value.classifier_type === "llm"} />
-          )}
-
           <TierSetToolbar
             editing={editingTiers}
             isCustomSet={Boolean(customTierSet)}
diff --git a/ui/litellm-dashboard/src/components/add_model/NonReasoningTierToggle.tsx b/ui/litellm-dashboard/src/components/add_model/NonReasoningTierToggle.tsx
index 794c2e5ec70..c0d26874357 100644
--- a/ui/litellm-dashboard/src/components/add_model/NonReasoningTierToggle.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/NonReasoningTierToggle.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 
 import type { ComplexityRouterConfigValue } from "./ComplexityRouterConfig";
@@ -28,7 +29,7 @@ const NonReasoningTierToggle: React.FC<{
 
   return (
     <>
-      <div className="flex items-center gap-2 mt-4 mb-2">
+      <div className="flex items-center gap-2 mb-2">
         <Switch
           checked={value.enable_non_reasoning_tier === true}
           disabled={!available}
@@ -37,11 +38,12 @@ const NonReasoningTierToggle: React.FC<{
         />
         <strong className="font-semibold">Add a non-reasoning tier</strong>
       </div>
-      <span className="block text-xs mb-3 text-muted-foreground">
+      <span className="block text-xs text-muted-foreground">
         Adds NON_REASONING below Simple, for operational agent traffic that relays or reformats information rather than
         reasoning about it. Escalation still moves up out of it when a request needs more.
         {!available && " Requires the LLM classification method."}
       </span>
+      <Separator className="my-4" />
     </>
   );
 };