From 6052975750d45c3d9a928b1cd270dc68ec1215f2 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 22 Apr 2026 22:43:54 +0200
Subject: [PATCH] ui(deploy): scaffold AppDeploymentPage + route /apps/new and
 /apps/:slug

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../AppDeploymentPage.module.css              |  7 +++++
 .../pages/AppsTab/AppDeploymentPage/index.tsx | 26 +++++++++++++++++++
 ui/src/router.tsx                             |  5 ++--
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
 create mode 100644 ui/src/pages/AppsTab/AppDeploymentPage/index.tsx

diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
new file mode 100644
index 00000000..c8d8cef7
--- /dev/null
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
+  min-height: 100%;
+}
diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/index.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/index.tsx
new file mode 100644
index 00000000..c0a73228
--- /dev/null
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/index.tsx
@@ -0,0 +1,26 @@
+import { useParams, useLocation } from 'react-router';
+import { useEnvironmentStore } from '../../../api/environment-store';
+import { useEnvironments } from '../../../api/queries/admin/environments';
+import { useApps } from '../../../api/queries/admin/apps';
+import { PageLoader } from '../../../components/PageLoader';
+import styles from './AppDeploymentPage.module.css';
+
+export default function AppDeploymentPage() {
+  const { appId } = useParams<{ appId?: string }>();
+  const location = useLocation();
+  const selectedEnv = useEnvironmentStore((s) => s.environment);
+  const { data: environments = [], isLoading: envLoading } = useEnvironments();
+  const { data: apps = [], isLoading: appsLoading } = useApps(selectedEnv);
+
+  const isNetNew = location.pathname.endsWith('/apps/new');
+  const app = isNetNew ? null : apps.find((a) => a.slug === appId) ?? null;
+
+  if (envLoading || appsLoading) return <PageLoader />;
+
+  return (
+    <div className={styles.container}>
+      <h2>{app ? app.displayName : 'Create Application'}</h2>
+      {/* Identity section, tabs, primary button land in subsequent tasks */}
+    </div>
+  );
+}
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index 0fbd88e6..6f42aaac 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -22,6 +22,7 @@ const OutboundConnectionsPage = lazy(() => import('./pages/Admin/OutboundConnect
 const OutboundConnectionEditor = lazy(() => import('./pages/Admin/OutboundConnectionEditor'));
 const SensitiveKeysPage = lazy(() => import('./pages/Admin/SensitiveKeysPage'));
 const AppsTab = lazy(() => import('./pages/AppsTab/AppsTab'));
+const AppDeploymentPage = lazy(() => import('./pages/AppsTab/AppDeploymentPage'));
 const SwaggerPage = lazy(() => import('./pages/Swagger/SwaggerPage'));
 const InboxPage        = lazy(() => import('./pages/Alerts/InboxPage'));
 const RulesListPage    = lazy(() => import('./pages/Alerts/RulesListPage'));
@@ -76,8 +77,8 @@ export const router = createBrowserRouter([
 
           // Apps tab (OPERATOR+ via UI guard, shows all or single app)
           { path: 'apps', element: <SuspenseWrapper><AppsTab /></SuspenseWrapper> },
-          { path: 'apps/new', element: <SuspenseWrapper><AppsTab /></SuspenseWrapper> },
-          { path: 'apps/:appId', element: <SuspenseWrapper><AppsTab /></SuspenseWrapper> },
+          { path: 'apps/new', element: <SuspenseWrapper><AppDeploymentPage /></SuspenseWrapper> },
+          { path: 'apps/:appId', element: <SuspenseWrapper><AppDeploymentPage /></SuspenseWrapper> },
 
           // Alerts
           { path: 'alerts', element: <Navigate to="/alerts/inbox" replace /> },