feat(ui): kumo-style app shell for the authenticated area

app/admin/activation-requests/page.tsx

@@ -45,10 +45,7 @@ export default async function AdminActivationRequestsPage() {
   const requests = await getActivationRequests();
 
   return (
-    <main
-      className="flex-1 max-w-[1040px] w-full mx-auto px-6 py-10"
-      data-mount-stagger
-    >
+    <>
       <header className="mb-10" data-mount-row>
         <div className="flex items-baseline gap-2 mb-2">
           <span className="text-[13px] text-muted">admin.activations</span>
@@ -109,6 +106,6 @@ export default async function AdminActivationRequestsPage() {
           )}
         </Section>
       </div>
-    </main>
+    </>
   );
 }

app/admin/bans/page.tsx

@@ -35,10 +35,7 @@ export default async function AdminBansPage() {
   const revoked = bans.filter(b => b.revoked_at);
 
   return (
-    <main
-      className="flex-1 max-w-[960px] w-full mx-auto px-6 py-10"
-      data-mount-stagger
-    >
+    <>
       <header className="mb-10" data-mount-row>
         <div className="flex items-baseline gap-2 mb-2">
           <span className="text-[13px] text-muted tabular-nums">
@@ -124,6 +121,6 @@ export default async function AdminBansPage() {
           </Section>
         </div>
       )}
-    </main>
+    </>
   );
 }

app/admin/keys/page.tsx

@@ -27,10 +27,7 @@ export default function AdminKeysPage() {
   }));
 
   return (
-    <main
-      className="flex-1 max-w-[1040px] w-full mx-auto px-6 py-10"
-      data-mount-stagger
-    >
+    <>
       <header className="mb-10" data-mount-row>
         <div className="flex items-baseline gap-2 mb-2">
           <span className="text-[13px] text-muted">admin.keys</span>
@@ -107,6 +104,6 @@ export default function AdminKeysPage() {
           ))}
         </Section>
       </div>
-    </main>
+    </>
   );
 }

app/admin/layout.tsx

@@ -1,9 +1,20 @@
 import { headers } from "next/headers";
 import { redirect } from "next/navigation";
-import { AdminSidebar } from "@/components/AdminSidebar";
+import { AppShell } from "@/components/AppShell";
 import { isAdminStepUpVerified } from "@/lib/server/adminStepUp";
 import { getCurrentSession } from "@/lib/server/session";
 
+const TRAILS: Record<string, string> = {
+  "/admin": "Overview",
+  "/admin/users": "Users",
+  "/admin/oauth-clients": "OAuth clients",
+  "/admin/keys": "Signing keys",
+  "/admin/activation-requests": "Activation requests",
+  "/admin/webhooks": "Webhook deliveries",
+  "/admin/bans": "Bans",
+  "/admin/security": "Security events",
+};
+
 export default async function AdminLayout({
   children,
 }: {
@@ -17,19 +28,27 @@ export default async function AdminLayout({
   const headersList = await headers();
   const pathname = headersList.get("x-pathname") || "";
 
-  if (pathname !== "/admin/verify") {
-    const verified = await isAdminStepUpVerified(current.user.id);
-    if (!verified) {
-      redirect("/admin/verify");
-    }
+  // The step-up gate renders its own minimal shell; everything else gets the
+  // admin app shell once the live Telegram step-up is verified.
+  if (pathname === "/admin/verify") {
+    return <>{children}</>;
+  }
+
+  const verified = await isAdminStepUpVerified(current.user.id);
+  if (!verified) {
+    redirect("/admin/verify");
   }
 
   return (
-    <div className="flex min-h-screen bg-bg">
-      {pathname !== "/admin/verify" && (
-        <AdminSidebar username={current.user.username} />
-      )}
-      <div className="flex-1 min-w-0 flex flex-col">{children}</div>
-    </div>
+    <AppShell
+      variant="admin"
+      user={{
+        name: current.user.firstName || current.user.username,
+        username: current.user.username,
+      }}
+      trail={TRAILS[pathname] ?? "Admin"}
+    >
+      {children}
+    </AppShell>
   );
 }

app/admin/oauth-clients/page.tsx

@@ -12,10 +12,7 @@ export default async function AdminOAuthClientsPage() {
   const requests = await listPendingOAuthClientRegistrationRequests();
 
   return (
-    <main
-      className="flex-1 max-w-[1040px] w-full mx-auto px-6 py-10"
-      data-mount-stagger
-    >
+    <>
       <header className="mb-10" data-mount-row>
         <div className="flex items-baseline gap-2 mb-2 text-[13px]">
           <span className="text-muted">Admin</span>
@@ -121,6 +118,6 @@ export default async function AdminOAuthClientsPage() {
           )}
         </Section>
       </div>
-    </main>
+    </>
   );
 }

app/admin/page.tsx

@@ -53,10 +53,7 @@ export default async function AdminPage() {
   const data = await getOverviewData();
 
   return (
-    <main
-      className="flex-1 max-w-[960px] w-full mx-auto px-6 py-10"
-      data-mount-stagger
-    >
+    <>
       <header className="mb-10" data-mount-row>
         <div className="flex items-baseline gap-2 mb-2">
           <span className="text-[12px] text-muted">Admin</span>
@@ -153,6 +150,6 @@ export default async function AdminPage() {
           )}
         </Section>
       </div>
-    </main>
+    </>
   );
 }

app/admin/security/page.tsx

@@ -46,10 +46,7 @@ export default async function AdminSecurityPage({
   }
 
   return (
-    <main
-      className="flex-1 max-w-[1120px] w-full mx-auto px-6 py-10"
-      data-mount-stagger
-    >
+    <>
       <header
         className="mb-10 flex items-end justify-between gap-4"
         data-mount-row
@@ -137,6 +134,6 @@ export default async function AdminSecurityPage({
           )}
         </Section>
       </div>
-    </main>
+    </>
   );
 }

app/admin/users/page.tsx

@@ -65,10 +65,7 @@ export default async function AdminUsersPage({
   const users = await getUsers(search);
 
   return (
-    <main
-      className="flex-1 max-w-[1040px] w-full mx-auto px-6 py-10"
-      data-mount-stagger
-    >
+    <>
       <header className="mb-10" data-mount-row>
         <p className="text-[12px] text-muted mb-2 tabular-nums">
           Admin / Users &middot; {users.length} records
@@ -144,6 +141,6 @@ export default async function AdminUsersPage({
           )}
         </Section>
       </div>
-    </main>
+    </>
   );
 }

app/admin/webhooks/page.tsx

@@ -47,10 +47,7 @@ export default async function AdminWebhooksPage({
   });
 
   return (
-    <main
-      className="flex-1 max-w-[1120px] w-full mx-auto px-6 py-10"
-      data-mount-stagger
-    >
+    <>
       <header
         className="mb-10 flex items-end justify-between gap-4"
         data-mount-row
@@ -155,6 +152,6 @@ export default async function AdminWebhooksPage({
           )}
         </Section>
       </div>
-    </main>
+    </>
   );
 }