🚧 WIP

frontend/src/App.tsx

@@ -1,11 +1,14 @@
 import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "./auth";
+import { api, type SystemStatus } from "./api";
 import { LoginPage } from "./pages/Login";
 import { ClientsPage } from "./pages/Clients";
 import { RolesPage } from "./pages/Roles";
 import { GroupsPage } from "./pages/Groups";
 import { BrokerConfigPage } from "./pages/BrokerConfig";
 import { CertificatesPage } from "./pages/Certificates";
+import { SystemPage } from "./pages/System";
 
 // Navigation structure per spec section 57. Entries with a `to` route are
 // implemented; entries without one are planned pages, rendered greyed out
@@ -59,17 +62,32 @@ const NAV_SECTIONS: {
       { label: "Roles", hint: "Management roles admin (Release 3)" },
       { label: "Audit Log", hint: "Audit viewer (Release 3)" },
       { label: "Backup", hint: "Backup/restore (Release 3)" },
-      { label: "System", hint: "System settings (Release 3)" },
+      { label: "System", to: "/system" },
     ],
   },
 ];
 
+function RestartIndicator() {
+  const { data } = useQuery({
+    queryKey: ["system-status"],
+    queryFn: () => api.get<SystemStatus>("/system/status"),
+    refetchInterval: 15000,
+  });
+  if (!data?.restart_required) return null;
+  return (
+    <NavLink to="/system" className="restart-needed">
+      ⚠ Restart needed — listener changes are pending
+    </NavLink>
+  );
+}
+
 function Layout({ children }: { children: React.ReactNode }) {
   const { session, logout } = useAuth();
   return (
     <div className="layout">
       <aside className="sidebar">
         <h1>MQTT Management</h1>
+        <RestartIndicator />
         <nav>
           {NAV_SECTIONS.map((section) => (
             <div key={section.title} className="nav-section">
@@ -158,6 +176,14 @@ export function App() {
           </Protected>
         }
       />
+      <Route
+        path="/system"
+        element={
+          <Protected>
+            <SystemPage />
+          </Protected>
+        }
+      />
       <Route path="/" element={<Navigate to="/clients" replace />} />
     </Routes>
   );