Split the web UI into a page per section

The dashboard was a single route that swapped section components via a `section` state field. Convert it to the App Router's multi-page model so each left-nav selection is its own route (/, /repositories, /agents, /schedules, /approvals, /servers, /activity, /shared, /login), making the pages modular and independently updatable. - Move the token gate + store provider + sidebar into a persistent frame (AppFrame + Shell) rendered by the root layout, so auth, the polling loop, and shared state survive client-side navigation. - Sidebar items are now <Link> routes; the active item and the store's polled section are derived from the URL (lib/nav). - Each section gets an app/<section>/page.tsx; Runs stays at root and keeps its full-height split layout, the rest render in the shared scroll frame. - Emit per-route index.html (trailingSlash) so the FastAPI StaticFiles mount serves clean slash-terminated URLs with no SPA rewrite. - Regenerate the bundled static export. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PsAeGVadULRzPhV2PRDttM
2026-09-11 04:56:23 +00:00 · 2026-07-22 19:34:33 +00:00
parent c600ad481e
commit 5d8c62450c
58 changed files with 410 additions and 174 deletions
@@ -1,15 +1,20 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { AppFrame } from "@/components/AppFrame";

 export const metadata: Metadata = {
  title: "Handler · Claude Activity",
  description: "Monitor and manage Claude Code agents across projects.",
 };

+/* The frame (token gate, store/polling, sidebar) wraps every route and persists across
+ * navigation; each page under app/ supplies only its own section content. */
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
-      <body>{children}</body>
+      <body>
+        <AppFrame>{children}</AppFrame>
+      </body>
    </html>
  );
 }