Merge pull request #24747 from BerriAI/litellm_docs-high-availability

docs: Improve HA control plane diagram clarity

docs/my-website/docs/proxy/high_availability_control_plane.md

@@ -42,9 +42,9 @@ The **High Availability Control Plane** takes a different approach:
 
 <ControlPlaneArchitecture />
 
-The **control plane** is a LiteLLM instance that serves the admin UI and knows about all the workers. It does not proxy LLM requests, it is purely for administration.
+The **control plane** is a LiteLLM instance that serves the admin UI and knows about all the workers. It is **not a router** — it does not proxy or route any LLM requests. It exists purely so admins can switch between workers and manage them from a single UI.
 
-Each **worker** is a fully independent LiteLLM proxy that handles LLM requests for its region or team. Workers have their own users, keys, teams, and budgets.
+Each **worker** is a fully independent LiteLLM proxy that handles LLM requests for its region or team. Workers have their own database, Redis, users, keys, teams, and budgets. No infrastructure is shared between workers.
 
 ## Setup
 

docs/my-website/src/components/ControlPlaneArchitecture/ControlPlaneArchitecture.tsx

@@ -3,23 +3,56 @@ import styles from './styles.module.css';
 
 /* ────────────────────── Shared small pieces ────────────────────── */
 
-function InfraChip({ color, label }: { color: string; label: string }) {
-  const dotClass =
+function InfraBox({ icon, label, color }: { icon: string; label: string; color: 'green' | 'blue' | 'orange' }) {
+  const colorClass =
     color === 'green'
-      ? styles.infraDotGreen
+      ? styles.infraBoxGreen
       : color === 'blue'
-        ? styles.infraDotBlue
-        : styles.infraDotOrange;
+        ? styles.infraBoxBlue
+        : styles.infraBoxOrange;
 
   return (
-    <span className={styles.infraChip}>
-      <span className={`${styles.infraDot} ${dotClass}`} />
-      {label}
-    </span>
+    <div className={`${styles.infraBox} ${colorClass}`}>
+      <span className={styles.infraBoxIcon}>{icon}</span>
+      <span className={styles.infraBoxLabel}>{label}</span>
+    </div>
   );
 }
 
-/* ────────────────────── Architecture tab ────────────────────── */
+/* ────────────────────── Worker column with infra ────────────────────── */
+
+function WorkerColumn({
+  name,
+  region,
+  subtitle,
+  nodeClass,
+  badgeClass,
+}: {
+  name: string;
+  region: string;
+  subtitle: string;
+  nodeClass: string;
+  badgeClass: string;
+}) {
+  return (
+    <div className={styles.workerColumn}>
+      <div className={`${styles.node} ${styles.nodeWorker} ${nodeClass}`}>
+        <div className={styles.nodeHeader}>
+          <span className={styles.nodeTitle}>{name}</span>
+          <span className={`${styles.badge} ${badgeClass}`}>{region}</span>
+        </div>
+        <div className={styles.nodeSubtitle}>{subtitle}</div>
+        <div className={styles.nodeCaption}>Handles LLM requests</div>
+      </div>
+      <div className={styles.infraStack}>
+        <InfraBox icon="🗄" label="Own Database" color="green" />
+        <InfraBox icon="⚡" label="Own Redis" color="orange" />
+      </div>
+    </div>
+  );
+}
+
+/* ────────────────────── Architecture diagram ────────────────────── */
 
 function ArchitectureView() {
   return (
@@ -36,49 +69,41 @@ function ArchitectureView() {
       <div className={`${styles.node} ${styles.nodeControlPlane}`}>
         <div className={styles.nodeHeader}>
           <span className={styles.nodeTitle}>Control Plane</span>
-          <span className={`${styles.badge} ${styles.badgeBlue}`}>UI</span>
+          <span className={`${styles.badge} ${styles.badgeBlue}`}>ADMIN UI ONLY</span>
         </div>
         <div className={styles.nodeSubtitle}>cp.example.com</div>
-        <div className={styles.infraRow}>
-          <InfraChip color="green" label="Own DB" />
-          <InfraChip color="orange" label="Own Redis" />
-          <InfraChip color="blue" label="Own Key" />
+        <div className={styles.nodeCaption}>
+          Not a router — does not proxy LLM requests.
+          <br />
+          Lets admins switch between workers to manage them.
         </div>
       </div>
 
-      {/* Branch connector */}
-      <div className={styles.connectorBranch}>
-        <div className={`${styles.branchLeg} ${styles.branchLegLeft}`} />
-        <div className={`${styles.branchLeg} ${styles.branchLegRight}`} />
+      {/* Branch connector with label */}
+      <div className={styles.connectorBranchLabeled}>
+        <span className={styles.connectorLabel}>UI management only</span>
+        <div className={styles.connectorBranch}>
+          <div className={`${styles.branchLeg} ${styles.branchLegLeft}`} />
+          <div className={`${styles.branchLeg} ${styles.branchLegRight}`} />
+        </div>
       </div>
 
       {/* Workers */}
       <div className={styles.workersRow}>
-        <div className={`${styles.node} ${styles.nodeWorker} ${styles.nodeWorkerA}`}>
-          <div className={styles.nodeHeader}>
-            <span className={styles.nodeTitle}>Worker A</span>
-            <span className={`${styles.badge} ${styles.badgeGreen}`}>US East</span>
-          </div>
-          <div className={styles.nodeSubtitle}>worker-a.example.com</div>
-          <div className={styles.infraRow}>
-            <InfraChip color="green" label="Own DB" />
-            <InfraChip color="orange" label="Own Redis" />
-            <InfraChip color="blue" label="Own Key" />
-          </div>
-        </div>
-
-        <div className={`${styles.node} ${styles.nodeWorker} ${styles.nodeWorkerB}`}>
-          <div className={styles.nodeHeader}>
-            <span className={styles.nodeTitle}>Worker B</span>
-            <span className={`${styles.badge} ${styles.badgePurple}`}>EU West</span>
-          </div>
-          <div className={styles.nodeSubtitle}>worker-b.example.com</div>
-          <div className={styles.infraRow}>
-            <InfraChip color="green" label="Own DB" />
-            <InfraChip color="orange" label="Own Redis" />
-            <InfraChip color="blue" label="Own Key" />
-          </div>
-        </div>
+        <WorkerColumn
+          name="Worker A"
+          region="US East"
+          subtitle="worker-a.example.com"
+          nodeClass={styles.nodeWorkerA}
+          badgeClass={styles.badgeGreen}
+        />
+        <WorkerColumn
+          name="Worker B"
+          region="EU West"
+          subtitle="worker-b.example.com"
+          nodeClass={styles.nodeWorkerB}
+          badgeClass={styles.badgePurple}
+        />
       </div>
     </div>
   );

docs/my-website/src/components/ControlPlaneArchitecture/styles.module.css

@@ -284,45 +284,67 @@
   color: var(--cp-purple);
 }
 
-/* ── Infrastructure chips ── */
-.infraRow {
-  display: flex;
-  gap: 0.4rem;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 0.5rem;
+/* ── Node caption ── */
+.nodeCaption {
+  font-size: 0.72rem;
+  color: var(--cp-text-muted);
+  margin-top: 0.4rem;
+  line-height: 1.4;
+  font-style: italic;
 }
 
-.infraChip {
+/* ── Infrastructure boxes (per-worker) ── */
+.infraStack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-top: 0.5rem;
+  width: 100%;
+}
+
+.infraBox {
   display: flex;
   align-items: center;
-  gap: 0.3rem;
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: var(--cp-text-secondary);
-  background: var(--cp-infra-bg);
-  border: 1px solid var(--cp-infra-border);
-  border-radius: 6px;
-  padding: 0.2rem 0.5rem;
+  gap: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 8px;
+  border: 1.5px solid var(--cp-border);
+  background: var(--cp-card-bg);
 }
 
-.infraDot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
+.infraBoxGreen {
+  border-color: var(--cp-green);
+  background: var(--cp-green-light);
+}
+
+.infraBoxBlue {
+  border-color: var(--cp-accent);
+  background: var(--cp-accent-light);
+}
+
+.infraBoxOrange {
+  border-color: var(--cp-orange);
+  background: var(--cp-orange-light);
+}
+
+.infraBoxIcon {
+  font-size: 0.85rem;
   flex-shrink: 0;
 }
 
-.infraDotGreen {
-  background: var(--cp-green);
+.infraBoxLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cp-text);
 }
 
-.infraDotBlue {
-  background: var(--cp-accent);
-}
-
-.infraDotOrange {
-  background: var(--cp-orange);
+/* ── Worker column (card + infra stack) ── */
+.workerColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 220px;
+  max-width: 260px;
 }
 
 /* ── Workers row ── */
@@ -333,6 +355,24 @@
   flex-wrap: wrap;
 }
 
+/* ── Connector with label ── */
+.connectorBranchLabeled {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 700px;
+}
+
+.connectorLabel {
+  font-size: 0.7rem;
+  color: var(--cp-text-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
+}
+
 /* ── Animated flow ── */
 .flowLabel {
   font-size: 0.7rem;
@@ -511,6 +551,16 @@
     max-width: 260px;
   }
 
+  .workerColumn {
+    min-width: auto;
+    width: 100%;
+    max-width: 280px;
+  }
+
+  .connectorBranchLabeled {
+    display: none;
+  }
+
   .connectorBranch {
     display: none;
   }