fix(ui): use SPageHead actions prop, satisfy tsc -b literal types

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app/frontend/src/app/App.tsx

@@ -1,50 +1,40 @@
-import { lazy, Suspense, type ReactNode } from 'react';
 import { Link, Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { Compass, ShieldCheck } from 'lucide-react';
 import { PlatformShell } from './layout/PlatformShell';
+import { ProjectsPage } from '@/features/projects/pages/ProjectsPage';
+import { ProjectWorkspacePage } from '@/features/workspace/pages/ProjectWorkspacePage';
+import { ServiceDetailPage } from '@/features/service/pages/ServiceDetailPage';
+import { ServiceMetricsDashboard } from '@/features/service/pages/ServiceMetricsDashboard';
+import { BuildsPage } from '@/features/builds/pages/BuildsPage';
+import { TemplatesPage } from '@/features/templates/pages/TemplatesPage';
+import { AuditLogsPage } from '@/features/audit/pages/AuditLogsPage';
+import { WebhooksPage } from '@/features/webhooks/pages/WebhooksPage';
+import { OperationsPage } from '@/features/operations/pages/OperationsPage';
+import { ActivityPage } from '@/features/activity/pages/ActivityPage';
+import { AdminPage } from '@/features/admin/pages/AdminPage';
+import { LandingPage } from '@/features/landing/LandingPage';
+import { DashboardPage } from '@/features/dashboard/pages/DashboardPage';
 import { useBranding } from '@/lib/use-branding';
+import {
+  DocsPage,
+  PeoplePage,
+  SettingsPage,
+  UsagePage,
+  DatabasesPage,
+  HighAvailabilityPage,
+  SecurityPage,
+  ComponentShowcase,
+  GitHubAppCallbackPage,
+} from '@/features/secondary/pages';
+import { NodeDetailPage } from '@/features/nodes/NodeDetailPage';
+import { AcceptInvitePage, SignInPage, SignUpPage } from '@/features/auth/pages';
+import { SetupWizardPage } from '@/features/setup/SetupWizardPage';
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
 import { getCurrentUserProfile } from '@/lib/api-client';
 import { ErrorBoundary, LoadingState } from '@/shared/components';
 
-const LandingPage = lazy(() => import('@/features/landing/LandingPage').then((m) => ({ default: m.LandingPage })));
-const SignInPage = lazy(() => import('@/features/auth/pages').then((m) => ({ default: m.SignInPage })));
-const SignUpPage = lazy(() => import('@/features/auth/pages').then((m) => ({ default: m.SignUpPage })));
-const AcceptInvitePage = lazy(() => import('@/features/auth/pages').then((m) => ({ default: m.AcceptInvitePage })));
-const SetupWizardPage = lazy(() => import('@/features/setup/SetupWizardPage').then((m) => ({ default: m.SetupWizardPage })));
-const ProjectWorkspacePage = lazy(() => import('@/features/workspace/pages/ProjectWorkspacePage').then((m) => ({ default: m.ProjectWorkspacePage })));
-const ServiceDetailPage = lazy(() => import('@/features/service/pages/ServiceDetailPage').then((m) => ({ default: m.ServiceDetailPage })));
-const ServiceMetricsDashboard = lazy(() => import('@/features/service/pages/ServiceMetricsDashboard').then((m) => ({ default: m.ServiceMetricsDashboard })));
-const DashboardPage = lazy(() => import('@/features/dashboard/pages/DashboardPage').then((m) => ({ default: m.DashboardPage })));
-const ProjectsPage = lazy(() => import('@/features/projects/pages/ProjectsPage').then((m) => ({ default: m.ProjectsPage })));
-const TemplatesPage = lazy(() => import('@/features/templates/pages/TemplatesPage').then((m) => ({ default: m.TemplatesPage })));
-const DatabasesPage = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.DatabasesPage })));
-const HighAvailabilityPage = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.HighAvailabilityPage })));
-const OperationsPage = lazy(() => import('@/features/operations/pages/OperationsPage').then((m) => ({ default: m.OperationsPage })));
-const ActivityPage = lazy(() => import('@/features/activity/pages/ActivityPage').then((m) => ({ default: m.ActivityPage })));
-const SecurityPage = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.SecurityPage })));
-const UsagePage = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.UsagePage })));
-const DocsPage = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.DocsPage })));
-const BuildsPage = lazy(() => import('@/features/builds/pages/BuildsPage').then((m) => ({ default: m.BuildsPage })));
-const PeoplePage = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.PeoplePage })));
-const SettingsPage = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.SettingsPage })));
-const GitHubAppCallbackPage = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.GitHubAppCallbackPage })));
-const AuditLogsPage = lazy(() => import('@/features/audit/pages/AuditLogsPage').then((m) => ({ default: m.AuditLogsPage })));
-const WebhooksPage = lazy(() => import('@/features/webhooks/pages/WebhooksPage').then((m) => ({ default: m.WebhooksPage })));
-const ComponentShowcase = lazy(() => import('@/features/secondary/pages').then((m) => ({ default: m.ComponentShowcase })));
-const AdminPage = lazy(() => import('@/features/admin/pages/AdminPage').then((m) => ({ default: m.AdminPage })));
-const NodeDetailPage = lazy(() => import('@/features/nodes/NodeDetailPage').then((m) => ({ default: m.NodeDetailPage })));
-
-function Page({ children }: { children: ReactNode }) {
-  return (
-    <Suspense fallback={<LoadingState message="Loading..." className="min-h-[60vh]" />}>
-      {children}
-    </Suspense>
-  );
-}
-
 function AuthRequired() {
   const location = useLocation();
   const isDemoMode = useDemoMode();
@@ -146,44 +136,44 @@ export default function App() {
   return (
     <ErrorBoundary>
       <Routes>
-        <Route path="/landing" element={<Page><LandingPage /></Page>} />
-        <Route path="/auth/sign-in" element={<Page><SignInPage /></Page>} />
-        <Route path="/auth/sign-up" element={<Page><SignUpPage /></Page>} />
-        <Route path="/auth/accept-invite" element={<Page><AcceptInvitePage /></Page>} />
-        <Route path="/setup" element={<Page><SetupWizardPage /></Page>} />
+        <Route path="/landing" element={<LandingPage />} />
+        <Route path="/auth/sign-in" element={<SignInPage />} />
+        <Route path="/auth/sign-up" element={<SignUpPage />} />
+        <Route path="/auth/accept-invite" element={<AcceptInvitePage />} />
+        <Route path="/setup" element={<SetupWizardPage />} />
 
         {/* Public browsing — approved projects, templates, docs. */}
         {/* Project workspace renders outside the shell — fullscreen canvas, no nav chrome */}
-        <Route path="/projects/:projectId" element={<Page><ProjectWorkspacePage /></Page>} />
-        <Route path="/projects/:projectId/services/:serviceId" element={<Page><ServiceDetailPage /></Page>} />
+        <Route path="/projects/:projectId" element={<ProjectWorkspacePage />} />
+        <Route path="/projects/:projectId/services/:serviceId" element={<ServiceDetailPage />} />
 
         <Route element={<PlatformShell />}>
-          <Route path="/" element={<Page><DashboardPage /></Page>} />
-          <Route path="/projects" element={<Page><ProjectsPage /></Page>} />
-          <Route path="/templates" element={<Page><TemplatesPage /></Page>} />
-          <Route path="/databases" element={<Page><DatabasesPage /></Page>} />
-          <Route path="/ha" element={<Page><HighAvailabilityPage /></Page>} />
-          <Route path="/operations" element={<Page><OperationsPage /></Page>} />
-          <Route path="/activity" element={<Page><ActivityPage /></Page>} />
-          <Route path="/security" element={<Page><SecurityPage /></Page>} />
-          <Route path="/usage" element={<Page><UsagePage /></Page>} />
-          <Route path="/docs" element={<Page><DocsPage /></Page>} />
+          <Route path="/" element={<DashboardPage />} />
+          <Route path="/projects" element={<ProjectsPage />} />
+          <Route path="/templates" element={<TemplatesPage />} />
+          <Route path="/databases" element={<DatabasesPage />} />
+          <Route path="/ha" element={<HighAvailabilityPage />} />
+          <Route path="/operations" element={<OperationsPage />} />
+          <Route path="/activity" element={<ActivityPage />} />
+          <Route path="/security" element={<SecurityPage />} />
+          <Route path="/usage" element={<UsagePage />} />
+          <Route path="/docs" element={<DocsPage />} />
 
           {/* Authenticated areas */}
           <Route element={<AuthRequired />}>
-            <Route path="/builds" element={<Page><BuildsPage /></Page>} />
-            <Route path="/people" element={<Page><PeoplePage /></Page>} />
-            <Route path="/settings" element={<Page><SettingsPage /></Page>} />
-            <Route path="/git/github-app/callback" element={<Page><GitHubAppCallbackPage /></Page>} />
-            <Route path="/settings/audit-logs" element={<Page><AuditLogsPage /></Page>} />
-            <Route path="/settings/webhooks" element={<Page><WebhooksPage /></Page>} />
-            <Route path="/showcase" element={<Page><ComponentShowcase /></Page>} />
+            <Route path="/builds" element={<BuildsPage />} />
+            <Route path="/people" element={<PeoplePage />} />
+            <Route path="/settings" element={<SettingsPage />} />
+            <Route path="/git/github-app/callback" element={<GitHubAppCallbackPage />} />
+            <Route path="/settings/audit-logs" element={<AuditLogsPage />} />
+            <Route path="/settings/webhooks" element={<WebhooksPage />} />
+            <Route path="/showcase" element={<ComponentShowcase />} />
           </Route>
 
           {/* Platform owner only */}
           <Route element={<AdminRequired />}>
-            <Route path="/admin" element={<Page><AdminPage /></Page>} />
-            <Route path="/nodes/:id" element={<Page><NodeDetailPage /></Page>} />
+            <Route path="/admin" element={<AdminPage />} />
+            <Route path="/nodes/:id" element={<NodeDetailPage />} />
           </Route>
 
           <Route path="*" element={<NotFoundPage />} />
@@ -191,7 +181,7 @@ export default function App() {
 
         {/* Full-bleed design demo — renders its own chrome, no app shell */}
         <Route element={<AuthRequired />}>
-          <Route path="/metrics-demo" element={<Page><ServiceMetricsDashboard /></Page>} />
+          <Route path="/metrics-demo" element={<ServiceMetricsDashboard />} />
         </Route>
       </Routes>
     </ErrorBoundary>