feat: add topology for vllm dash

dashboard/frontend/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0"
+    "react-router-dom": "^6.28.0",
+    "reactflow": "^11.11.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.18",
@@ -26,4 +27,4 @@
     "typescript": "^5.9.3",
     "vite": "^5.4.11"
   }
-}
+}

dashboard/frontend/src/App.tsx

@@ -5,6 +5,7 @@ import LandingPage from './pages/LandingPage'
 import MonitoringPage from './pages/MonitoringPage'
 import ConfigPage from './pages/ConfigPage'
 import PlaygroundPage from './pages/PlaygroundPage'
+import TopologyPage from './pages/TopologyPage'
 import { ConfigSection } from './components/ConfigNav'
 
 const App: React.FC = () => {
@@ -105,6 +106,17 @@ const App: React.FC = () => {
             </Layout>
           }
         />
+        <Route
+          path="/topology"
+          element={
+            <Layout
+              configSection={configSection}
+              onConfigSectionChange={(section) => setConfigSection(section as ConfigSection)}
+            >
+              <TopologyPage />
+            </Layout>
+          }
+        />
       </Routes>
     </BrowserRouter>
   )

dashboard/frontend/src/components/ConfigNav.tsx

@@ -6,6 +6,7 @@ export type ConfigSection =
   | 'prompt-guard'
   | 'similarity-cache'
   | 'intelligent-routing'
+  | 'topology'
   | 'tools-selection'
   | 'observability'
   | 'classification-api'
@@ -41,6 +42,12 @@ const ConfigNav: React.FC<ConfigNavProps> = ({ activeSection, onSectionChange })
       title: 'Intelligent Routing',
       description: 'Classify BERT, categories & reasoning'
     },
+    {
+      id: 'topology' as ConfigSection,
+      icon: '🗺️',
+      title: 'Topology',
+      description: 'Visualize routing chain-of-thought'
+    },
     {
       id: 'tools-selection' as ConfigSection,
       icon: '🔧',

dashboard/frontend/src/components/Layout.tsx

@@ -56,16 +56,26 @@ const Layout: React.FC<LayoutProps> = ({ children, configSection, onConfigSectio
                 { id: 'prompt-guard', icon: '🛡️', title: 'Prompt Guard' },
                 { id: 'similarity-cache', icon: '⚡', title: 'Similarity Cache' },
                 { id: 'intelligent-routing', icon: '🧠', title: 'Intelligent Routing' },
+                { id: 'topology', icon: '🗺️', title: 'Topology' },
                 { id: 'tools-selection', icon: '🔧', title: 'Tools Selection' },
                 { id: 'observability', icon: '👁️', title: 'Observability' },
                 { id: 'classification-api', icon: '🔌', title: 'Classification API' }
               ].map((section) => (
                 <button
                   key={section.id}
-                  className={`${styles.navLink} ${isConfigPage && configSection === section.id ? styles.navLinkActive : ''}`}
+                  className={`${styles.navLink} ${
+                    (section.id === 'topology' && location.pathname === '/topology') ||
+                    (isConfigPage && configSection === section.id)
+                      ? styles.navLinkActive
+                      : ''
+                  }`}
                   onClick={() => {
-                    onConfigSectionChange(section.id)
-                    navigate('/config')
+                    if (section.id === 'topology') {
+                      navigate('/topology')
+                    } else {
+                      onConfigSectionChange(section.id)
+                      navigate('/config')
+                    }
                   }}
                 >
                   <span className={styles.navIcon}>{section.icon}</span>
@@ -95,7 +105,7 @@ const Layout: React.FC<LayoutProps> = ({ children, configSection, onConfigSectio
             {theme === 'light' ? '🌙' : '☀️'}
           </button>
           <a
-            href="https://github.com/vllm-project/vllm"
+            href="https://github.com/vllm-project/semantic-router"
             target="_blank"
             rel="noopener noreferrer"
             className={styles.iconButton}
@@ -107,7 +117,7 @@ const Layout: React.FC<LayoutProps> = ({ children, configSection, onConfigSectio
             </svg>
           </a>
           <a
-            href="https://docs.vllm.ai"
+            href="https://vllm-semantic-router.com"
             target="_blank"
             rel="noopener noreferrer"
             className={styles.iconButton}

dashboard/frontend/src/pages/TopologyPage.module.css

@@ -0,0 +1,258 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--bg-primary);
+  overflow: hidden;
+}
+
+.header {
+  padding: 1.5rem 2rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.title {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  margin: 0.25rem 0 0 0;
+  flex: 1;
+}
+
+.refreshButton {
+  padding: 0.5rem 1rem;
+  background: var(--accent-color);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.refreshButton:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
+.flowContainer {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: var(--bg-primary);
+}
+
+/* ReactFlow custom styling */
+.flowContainer :global(.react-flow) {
+  background: var(--bg-primary);
+}
+
+.flowContainer :global(.react-flow__node) {
+  border-radius: 8px;
+  padding: 12px 16px;
+  font-size: 13px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.2s;
+}
+
+.flowContainer :global(.react-flow__node:hover) {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.flowContainer :global(.react-flow__edge-path) {
+  stroke-width: 2;
+  stroke: var(--text-secondary);
+}
+
+.flowContainer :global(.react-flow__edge.animated .react-flow__edge-path) {
+  stroke: var(--accent-color);
+  stroke-width: 2.5;
+}
+
+.flowContainer :global(.react-flow__controls) {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.flowContainer :global(.react-flow__controls-button) {
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+
+.flowContainer :global(.react-flow__controls-button:hover) {
+  background: var(--bg-hover);
+}
+
+.flowContainer :global(.react-flow__minimap) {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+
+.flowContainer :global(.react-flow__background) {
+  background: var(--bg-primary);
+}
+
+.flowContainer :global(.react-flow__attribution) {
+  background: var(--bg-secondary);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+
+/* Legend */
+.legend {
+  position: absolute;
+  top: 80px;
+  right: 20px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  max-width: 200px;
+  z-index: 10;
+}
+
+.legend h3 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.legendItems {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.legendItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.legendColor {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+/* Loading state */
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary);
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--border-color);
+  border-top-color: var(--accent-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading p {
+  font-size: 1rem;
+  margin: 0;
+}
+
+/* Error state */
+.error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary);
+  padding: 2rem;
+  text-align: center;
+}
+
+.errorIcon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.error p {
+  font-size: 1rem;
+  margin: 0 0 1.5rem 0;
+  color: var(--text-primary);
+}
+
+.retryButton {
+  padding: 0.75rem 1.5rem;
+  background: var(--accent-color);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.retryButton:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .legend {
+    position: static;
+    margin: 1rem;
+    max-width: none;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .subtitle {
+    font-size: 0.85rem;
+  }
+}
+