From 66abb1fe3a6544500e8500fe96d5e7309a5cc549 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 13:59:20 +0100
Subject: [PATCH] feat(ui): restructure router for tab-based navigation with
 legacy redirects

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/router.tsx | 64 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 46 insertions(+), 18 deletions(-)

diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index 48eadc04..8c9383f8 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -1,4 +1,4 @@
-import { createBrowserRouter, Navigate } from 'react-router';
+import { createBrowserRouter, Navigate, useParams } from 'react-router';
 import { ProtectedRoute } from './auth/ProtectedRoute';
 import { LoginPage } from './auth/LoginPage';
 import { OidcCallback } from './auth/OidcCallback';
@@ -6,12 +6,9 @@ import { LayoutShell } from './components/LayoutShell';
 import { lazy, Suspense } from 'react';
 import { Spinner } from '@cameleer/design-system';
 
-const Dashboard = lazy(() => import('./pages/Dashboard/Dashboard'));
-const ExchangeDetail = lazy(() => import('./pages/ExchangeDetail/ExchangeDetail'));
-const RoutesMetrics = lazy(() => import('./pages/Routes/RoutesMetrics'));
-const RouteDetail = lazy(() => import('./pages/Routes/RouteDetail'));
-const AgentHealth = lazy(() => import('./pages/AgentHealth/AgentHealth'));
-const AgentInstance = lazy(() => import('./pages/AgentInstance/AgentInstance'));
+const ExchangesPage = lazy(() => import('./pages/Exchanges/ExchangesPage'));
+const DashboardPage = lazy(() => import('./pages/DashboardTab/DashboardPage'));
+const RuntimePage = lazy(() => import('./pages/RuntimeTab/RuntimePage'));
 const AdminLayout = lazy(() => import('./pages/Admin/AdminLayout'));
 const RbacPage = lazy(() => import('./pages/Admin/RbacPage'));
 const AuditLogPage = lazy(() => import('./pages/Admin/AuditLogPage'));
@@ -29,6 +26,20 @@ function SuspenseWrapper({ children }: { children: React.ReactNode }) {
   );
 }
 
+/** Redirect legacy /apps/:appId/:routeId paths to /exchanges/:appId/:routeId */
+function LegacyAppRedirect() {
+  const { appId, routeId } = useParams<{ appId: string; routeId?: string }>();
+  const path = routeId ? `/exchanges/${appId}/${routeId}` : `/exchanges/${appId}`;
+  return <Navigate to={path} replace />;
+}
+
+/** Redirect legacy /agents/:appId/:instanceId paths to /runtime/:appId/:instanceId */
+function LegacyAgentRedirect() {
+  const { appId, instanceId } = useParams<{ appId: string; instanceId?: string }>();
+  const path = instanceId ? `/runtime/${appId}/${instanceId}` : `/runtime/${appId}`;
+  return <Navigate to={path} replace />;
+}
+
 export const router = createBrowserRouter([
   { path: '/login', element: <LoginPage /> },
   { path: '/oidc/callback', element: <OidcCallback /> },
@@ -38,17 +49,34 @@ export const router = createBrowserRouter([
       {
         element: <LayoutShell />,
         children: [
-          { index: true, element: <Navigate to="/apps" replace /> },
-          { path: 'apps', element: <SuspenseWrapper><Dashboard /></SuspenseWrapper> },
-          { path: 'apps/:appId', element: <SuspenseWrapper><Dashboard /></SuspenseWrapper> },
-          { path: 'apps/:appId/:routeId', element: <SuspenseWrapper><Dashboard /></SuspenseWrapper> },
-          { path: 'exchanges/:id', element: <SuspenseWrapper><ExchangeDetail /></SuspenseWrapper> },
-          { path: 'routes', element: <SuspenseWrapper><RoutesMetrics /></SuspenseWrapper> },
-          { path: 'routes/:appId', element: <SuspenseWrapper><RoutesMetrics /></SuspenseWrapper> },
-          { path: 'routes/:appId/:routeId', element: <SuspenseWrapper><RouteDetail /></SuspenseWrapper> },
-          { path: 'agents', element: <SuspenseWrapper><AgentHealth /></SuspenseWrapper> },
-          { path: 'agents/:appId', element: <SuspenseWrapper><AgentHealth /></SuspenseWrapper> },
-          { path: 'agents/:appId/:instanceId', element: <SuspenseWrapper><AgentInstance /></SuspenseWrapper> },
+          // Default redirect
+          { index: true, element: <Navigate to="/exchanges" replace /> },
+
+          // Exchanges tab
+          { path: 'exchanges', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
+          { path: 'exchanges/:appId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
+          { path: 'exchanges/:appId/:routeId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
+          { path: 'exchanges/:appId/:routeId/:exchangeId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
+
+          // Dashboard tab
+          { path: 'dashboard', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },
+          { path: 'dashboard/:appId', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },
+          { path: 'dashboard/:appId/:routeId', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },
+
+          // Runtime tab
+          { path: 'runtime', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },
+          { path: 'runtime/:appId', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },
+          { path: 'runtime/:appId/:instanceId', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },
+
+          // Legacy redirects — Sidebar uses hardcoded /apps/... and /agents/... paths
+          { path: 'apps', element: <Navigate to="/exchanges" replace /> },
+          { path: 'apps/:appId', element: <LegacyAppRedirect /> },
+          { path: 'apps/:appId/:routeId', element: <LegacyAppRedirect /> },
+          { path: 'agents', element: <Navigate to="/runtime" replace /> },
+          { path: 'agents/:appId', element: <LegacyAgentRedirect /> },
+          { path: 'agents/:appId/:instanceId', element: <LegacyAgentRedirect /> },
+
+          // Admin (unchanged)
           {
             path: 'admin',
             element: <SuspenseWrapper><AdminLayout /></SuspenseWrapper>,