change layout and compose up openwebui

Signed-off-by: JaredforReal <[email protected]>

Author: JaredforReal

dashboard/frontend/src/App.tsx

@@ -69,7 +69,7 @@ const App: React.FC = () => {
     <BrowserRouter>
       <Layout>
         <Routes>
-          <Route path="/" element={<Navigate to="/monitoring" replace />} />
+          <Route path="/" element={<Navigate to="/playground" replace />} />
           <Route path="/monitoring" element={<MonitoringPage />} />
           <Route path="/config" element={<ConfigPage />} />
           <Route path="/playground" element={<PlaygroundPage />} />

dashboard/frontend/src/components/Layout.module.css

@@ -1,54 +1,53 @@
 .container {
   display: flex;
-  flex-direction: column;
   height: 100vh;
   overflow: hidden;
+  background-color: var(--color-bg);
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1.5rem;
+.sidebar {
+  width: 240px;
   background-color: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
-  box-shadow: 0 1px 3px var(--color-shadow);
-  flex-shrink: 0;
-  height: 64px;
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0.75rem;
+  gap: 1rem;
 }
 
-.headerLeft {
+.brand {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
 }
 
 .logo {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   object-fit: contain;
 }
 
-.title {
-  font-size: 1.125rem;
+.brandText {
+  font-size: 0.95rem;
   font-weight: 600;
   color: var(--color-text);
-  margin: 0;
 }
 
 .nav {
   display: flex;
-  gap: 0.5rem;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .navLink {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.5rem 1rem;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
   border-radius: var(--radius-md);
   color: var(--color-text-secondary);
-  font-size: 0.875rem;
+  font-size: 0.9rem;
   font-weight: 500;
   transition: all var(--transition-fast);
 }
@@ -71,6 +70,17 @@
 .navIcon {
   font-size: 1rem;
   line-height: 1;
+  width: 1.25rem;
+  text-align: center;
+}
+
+.navText {
+  white-space: nowrap;
+}
+
+.sidebarFooter {
+  margin-top: auto;
+  padding: 0 0.5rem;
 }
 
 .themeToggle {

dashboard/frontend/src/components/Layout.tsx

@@ -27,20 +27,20 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
   return (
     <div className={styles.container}>
-      <header className={styles.header}>
-        <div className={styles.headerLeft}>
+      <aside className={styles.sidebar}>
+        <div className={styles.brand}>
           <img src="/vllm.png" alt="vLLM" className={styles.logo} />
-          <h1 className={styles.title}>Semantic Router Dashboard</h1>
+          <span className={styles.brandText}>Semantic Router</span>
         </div>
         <nav className={styles.nav}>
           <NavLink
-            to="/monitoring"
+            to="/playground"
             className={({ isActive }) =>
               isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink
             }
           >
-            <span className={styles.navIcon}>📊</span>
-            Monitoring
+            <span className={styles.navIcon}>🎮</span>
+            <span className={styles.navText}>Playground</span>
           </NavLink>
           <NavLink
             to="/config"
@@ -49,26 +49,29 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             }
           >
             <span className={styles.navIcon}>⚙️</span>
-            Config
+            <span className={styles.navText}>Configuration</span>
           </NavLink>
           <NavLink
-            to="/playground"
+            to="/monitoring"
             className={({ isActive }) =>
               isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink
             }
           >
-            <span className={styles.navIcon}>🎮</span>
-            Playground
+            <span className={styles.navIcon}>📊</span>
+            <span className={styles.navText}>Monitoring</span>
           </NavLink>
         </nav>
-        <button
-          className={styles.themeToggle}
-          onClick={toggleTheme}
-          aria-label="Toggle theme"
-        >
-          {theme === 'light' ? '🌙' : '☀️'}
-        </button>
-      </header>
+        <div className={styles.sidebarFooter}>
+          <button
+            className={styles.themeToggle}
+            onClick={toggleTheme}
+            aria-label="Toggle theme"
+            title="Toggle theme"
+          >
+            {theme === 'light' ? '🌙' : '☀️'}
+          </button>
+        </div>
+      </aside>
       <main className={styles.main}>{children}</main>
     </div>
   )

deploy/docker-compose/docker-compose.yml

@@ -114,6 +114,21 @@ services:
     depends_on:
       - prometheus
 
+  # Open WebUI (optional, used by Dashboard Playground)
+  openwebui:
+    image: ghcr.io/open-webui/open-webui:main
+    container_name: openwebui
+    # Expose externally only if you want to access Open WebUI directly
+    # ports:
+    #   - "3001:8080"
+    environment:
+      # Add any Open WebUI env here if needed (auth, providers, etc.)
+      - WEBUI_NAME=Open WebUI
+    volumes:
+      - openwebui-data:/app/backend/data
+    networks:
+      - semantic-network
+
   # LLM Katan service for testing
   llm-katan:
     build:
@@ -143,7 +158,7 @@ services:
       - TARGET_PROMETHEUS_URL=http://prometheus:9090
       - TARGET_ROUTER_API_URL=http://semantic-router:8080
       - TARGET_ROUTER_METRICS_URL=http://semantic-router:9190/metrics
-      - TARGET_OPENWEBUI_URL=${TARGET_OPENWEBUI_URL:-}
+      - TARGET_OPENWEBUI_URL=http://openwebui:8080
     ports:
       - "8700:8700"
     networks:
@@ -155,6 +170,8 @@ services:
         condition: service_started
       prometheus:
         condition: service_started
+      openwebui:
+        condition: service_started
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8700/healthz"]
       interval: 10s
@@ -174,3 +191,4 @@ volumes:
     driver: local
   prometheus-data:
   grafana-data:
+  openwebui-data: