From 611c20188718a1e32a6dbb9a5cf9541e8c9c51c8 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 13:58:10 +0100
Subject: [PATCH] feat(ui): add RuntimePage and DashboardPage tab wrappers

Thin wrapper pages that conditionally render AgentHealth/AgentInstance
and RoutesMetrics/RouteDetail based on URL params for the nav redesign.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/pages/DashboardTab/DashboardPage.tsx | 17 +++++++++++++++++
 ui/src/pages/RuntimeTab/RuntimePage.tsx     | 17 +++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 ui/src/pages/DashboardTab/DashboardPage.tsx
 create mode 100644 ui/src/pages/RuntimeTab/RuntimePage.tsx

diff --git a/ui/src/pages/DashboardTab/DashboardPage.tsx b/ui/src/pages/DashboardTab/DashboardPage.tsx
new file mode 100644
index 00000000..ed6dcf0c
--- /dev/null
+++ b/ui/src/pages/DashboardTab/DashboardPage.tsx
@@ -0,0 +1,17 @@
+import { useParams } from 'react-router';
+import { lazy, Suspense } from 'react';
+import { Spinner } from '@cameleer/design-system';
+
+const RoutesMetrics = lazy(() => import('../Routes/RoutesMetrics'));
+const RouteDetail = lazy(() => import('../Routes/RouteDetail'));
+
+const Fallback = <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>;
+
+export default function DashboardPage() {
+  const { routeId } = useParams<{ appId?: string; routeId?: string }>();
+
+  if (routeId) {
+    return <Suspense fallback={Fallback}><RouteDetail /></Suspense>;
+  }
+  return <Suspense fallback={Fallback}><RoutesMetrics /></Suspense>;
+}
diff --git a/ui/src/pages/RuntimeTab/RuntimePage.tsx b/ui/src/pages/RuntimeTab/RuntimePage.tsx
new file mode 100644
index 00000000..a55a4c86
--- /dev/null
+++ b/ui/src/pages/RuntimeTab/RuntimePage.tsx
@@ -0,0 +1,17 @@
+import { useParams } from 'react-router';
+import { lazy, Suspense } from 'react';
+import { Spinner } from '@cameleer/design-system';
+
+const AgentHealth = lazy(() => import('../AgentHealth/AgentHealth'));
+const AgentInstance = lazy(() => import('../AgentInstance/AgentInstance'));
+
+const Fallback = <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>;
+
+export default function RuntimePage() {
+  const { instanceId } = useParams<{ appId?: string; instanceId?: string }>();
+
+  if (instanceId) {
+    return <Suspense fallback={Fallback}><AgentInstance /></Suspense>;
+  }
+  return <Suspense fallback={Fallback}><AgentHealth /></Suspense>;
+}