feat: introduce DashboardPageLayout component to streamline page structure and improve layout consistency

frontend/src/app/agents/new/page.tsx

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 
-import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {
@@ -15,10 +15,7 @@ import {
 import { useCreateAgentApiV1AgentsPost } from "@/api/generated/agents/agents";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
 import type { BoardRead } from "@/api/generated/model";
-import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
-import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
-import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import SearchableSelect, {
@@ -155,32 +152,17 @@ export default function NewAgentPage() {
   };
 
   return (
-    <DashboardShell>
+    <DashboardPageLayout
-      <SignedOut>
+      signedOut={{
-        <SignedOutPanel
+        message: "Sign in to create an agent.",
-          message="Sign in to create an agent."
+        forceRedirectUrl: "/agents/new",
-          forceRedirectUrl="/agents/new"
+        signUpForceRedirectUrl: "/agents/new",
-          signUpForceRedirectUrl="/agents/new"
+      }}
-        />
+      title="Create agent"
-      </SignedOut>
+      description="Agents start in provisioning until they check in."
-      <SignedIn>
+      isAdmin={isAdmin}
-        <DashboardSidebar />
+      adminOnlyMessage="Only organization owners and admins can create agents."
-        <main className="flex-1 overflow-y-auto bg-slate-50">
+    >
-          <div className="border-b border-slate-200 bg-white px-8 py-6">
-            <div>
-              <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
-                Create agent
-              </h1>
-              <p className="mt-1 text-sm text-slate-500">
-                Agents start in provisioning until they check in.
-              </p>
-            </div>
-          </div>
-
-          <div className="p-8">
-            {!isAdmin ? (
-              <AdminOnlyNotice message="Only organization owners and admins can create agents." />
-            ) : (
       <form
         onSubmit={handleSubmit}
         className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
@@ -373,10 +355,6 @@ export default function NewAgentPage() {
                   </Button>
                 </div>
       </form>
-            )}
+    </DashboardPageLayout>
-          </div>
-        </main>
-      </SignedIn>
-    </DashboardShell>
   );
 }

frontend/src/app/agents/page.tsx

@@ -6,7 +6,7 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
-import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { useAuth } from "@/auth/clerk";
 import {
   type ColumnDef,
   type SortingState,
@@ -18,8 +18,7 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 
 import { StatusPill } from "@/components/atoms/StatusPill";
-import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Dialog,
@@ -44,8 +43,6 @@ import {
 } from "@/api/generated/boards/boards";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
 import type { AgentRead } from "@/api/generated/model";
-import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
-import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
 
 const parseTimestamp = (value?: string | null) => {
   if (!value) return null;
@@ -289,42 +286,24 @@ export default function AgentsPage() {
   });
 
   return (
-    <DashboardShell>
-      <SignedOut>
-        <SignedOutPanel
-          message="Sign in to view agents."
-          forceRedirectUrl="/agents"
-          signUpForceRedirectUrl="/agents"
-        />
-      </SignedOut>
-      <SignedIn>
-        <DashboardSidebar />
-        <main className="flex-1 overflow-y-auto bg-slate-50">
-          <div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
-            <div className="px-8 py-6">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h1 className="text-2xl font-semibold tracking-tight text-slate-900">
-                    Agents
-                  </h1>
-                  <p className="mt-1 text-sm text-slate-500">
-                    {agents.length} agent{agents.length === 1 ? "" : "s"} total.
-                  </p>
-                </div>
-                {agents.length > 0 ? (
-                  <Button onClick={() => router.push("/agents/new")}>
-                    New agent
-                  </Button>
-                ) : null}
-              </div>
-            </div>
-          </div>
-
-          <div className="p-8">
-            {!isAdmin ? (
-              <AdminOnlyNotice message="Only organization owners and admins can access agents." />
-            ) : (
     <>
+      <DashboardPageLayout
+        signedOut={{
+          message: "Sign in to view agents.",
+          forceRedirectUrl: "/agents",
+          signUpForceRedirectUrl: "/agents",
+        }}
+        title="Agents"
+        description={`${agents.length} agent${agents.length === 1 ? "" : "s"} total.`}
+        headerActions={
+          agents.length > 0 ? (
+            <Button onClick={() => router.push("/agents/new")}>New agent</Button>
+          ) : null
+        }
+        isAdmin={isAdmin}
+        adminOnlyMessage="Only organization owners and admins can access agents."
+        stickyHeader
+      >
         <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
           <div className="overflow-x-auto">
             <table className="w-full text-left text-sm">
@@ -348,9 +327,7 @@ export default function AgentsPage() {
                 {agentsQuery.isLoading ? (
                   <tr>
                     <td colSpan={columns.length} className="px-6 py-8">
-                              <span className="text-sm text-slate-500">
+                      <span className="text-sm text-slate-500">Loading…</span>
-                                Loading…
-                              </span>
                     </td>
                   </tr>
                 ) : table.getRowModel().rows.length ? (
@@ -390,8 +367,8 @@ export default function AgentsPage() {
                           No agents yet
                         </h3>
                         <p className="mb-6 max-w-md text-sm text-slate-500">
-                                  Create your first agent to start executing
+                          Create your first agent to start executing tasks on
-                                  tasks on this board.
+                          this board.
                         </p>
                         <Link
                           href="/agents/new"
@@ -412,15 +389,9 @@ export default function AgentsPage() {
         </div>
 
         {agentsQuery.error ? (
-                  <p className="mt-4 text-sm text-red-500">
+          <p className="mt-4 text-sm text-red-500">{agentsQuery.error.message}</p>
-                    {agentsQuery.error.message}
-                  </p>
         ) : null}
-              </>
+      </DashboardPageLayout>
-            )}
-          </div>
-        </main>
-      </SignedIn>
 
       <Dialog
         open={!!deleteTarget}
@@ -453,6 +424,6 @@ export default function AgentsPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </DashboardShell>
+    </>
   );
 }

frontend/src/app/boards/[boardId]/edit/page.tsx

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 
-import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { useAuth } from "@/auth/clerk";
 import { X } from "lucide-react";
 
 import { ApiError } from "@/api/mutator";
@@ -29,10 +29,7 @@ import type {
   BoardUpdate,
 } from "@/api/generated/model";
 import { BoardOnboardingChat } from "@/components/BoardOnboardingChat";
-import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
-import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
-import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogClose, DialogContent } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
@@ -293,32 +290,18 @@ export default function EditBoardPage() {
 
   return (
     <>
-      <DashboardShell>
+      <DashboardPageLayout
-        <SignedOut>
+        signedOut={{
-          <SignedOutPanel
+          message: "Sign in to edit boards.",
-            message="Sign in to edit boards."
+          forceRedirectUrl: `/boards/${boardId}/edit`,
-            forceRedirectUrl={`/boards/${boardId}/edit`}
+          signUpForceRedirectUrl: `/boards/${boardId}/edit`,
-            signUpForceRedirectUrl={`/boards/${boardId}/edit`}
+        }}
-          />
+        title="Edit board"
-        </SignedOut>
+        description="Update board settings and gateway."
-        <SignedIn>
+        isAdmin={isAdmin}
-          <DashboardSidebar />
+        adminOnlyMessage="Only organization owners and admins can edit board settings."
-          <main ref={mainRef} className="flex-1 overflow-y-auto bg-slate-50">
+        mainRef={mainRef}
-            <div className="border-b border-slate-200 bg-white px-8 py-6">
+      >
-              <div>
-                <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
-                  Edit board
-                </h1>
-                <p className="mt-1 text-sm text-slate-500">
-                  Update board settings and gateway.
-                </p>
-              </div>
-            </div>
-
-            <div className="p-8">
-              {!isAdmin ? (
-                <AdminOnlyNotice message="Only organization owners and admins can edit board settings." />
-              ) : (
         <div className="space-y-6">
           <form
             onSubmit={handleSubmit}
@@ -498,11 +481,7 @@ export default function EditBoardPage() {
                     </div>
           </form>
         </div>
-              )}
+      </DashboardPageLayout>
-            </div>
-          </main>
-        </SignedIn>
-      </DashboardShell>
       <Dialog open={isOnboardingOpen} onOpenChange={setIsOnboardingOpen}>
         <DialogContent
           aria-label="Board onboarding"

frontend/src/app/boards/new/page.tsx

@@ -6,7 +6,7 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
-import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import { useCreateBoardApiV1BoardsPost } from "@/api/generated/boards/boards";
@@ -20,10 +20,7 @@ import {
 } from "@/api/generated/gateways/gateways";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
 import type { BoardGroupRead } from "@/api/generated/model";
-import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
-import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
-import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import SearchableSelect from "@/components/ui/searchable-select";
@@ -141,32 +138,17 @@ export default function NewBoardPage() {
   };
 
   return (
-    <DashboardShell>
+    <DashboardPageLayout
-      <SignedOut>
+      signedOut={{
-        <SignedOutPanel
+        message: "Sign in to create a board.",
-          message="Sign in to create a board."
+        forceRedirectUrl: "/boards/new",
-          forceRedirectUrl="/boards/new"
+        signUpForceRedirectUrl: "/boards/new",
-          signUpForceRedirectUrl="/boards/new"
+      }}
-        />
+      title="Create board"
-      </SignedOut>
+      description="Boards organize tasks and agents by mission context."
-      <SignedIn>
+      isAdmin={isAdmin}
-        <DashboardSidebar />
+      adminOnlyMessage="Only organization owners and admins can create boards."
-        <main className="flex-1 overflow-y-auto bg-slate-50">
+    >
-          <div className="border-b border-slate-200 bg-white px-8 py-6">
-            <div>
-              <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
-                Create board
-              </h1>
-              <p className="mt-1 text-sm text-slate-500">
-                Boards organize tasks and agents by mission context.
-              </p>
-            </div>
-          </div>
-
-          <div className="p-8">
-            {!isAdmin ? (
-              <AdminOnlyNotice message="Only organization owners and admins can create boards." />
-            ) : (
       <form
         onSubmit={handleSubmit}
         className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
@@ -243,9 +225,7 @@ export default function NewBoardPage() {
           </div>
         ) : null}
 
-                {errorMessage ? (
+        {errorMessage ? <p className="text-sm text-red-500">{errorMessage}</p> : null}
-                  <p className="text-sm text-red-500">{errorMessage}</p>
-                ) : null}
 
         <div className="flex justify-end gap-3">
           <Button
@@ -261,10 +241,6 @@ export default function NewBoardPage() {
           </Button>
         </div>
       </form>
-            )}
+    </DashboardPageLayout>
-          </div>
-        </main>
-      </SignedIn>
-    </DashboardShell>
   );
 }

frontend/src/app/gateways/[gatewayId]/edit/page.tsx

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {
@@ -15,11 +15,8 @@ import {
 } from "@/api/generated/gateways/gateways";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
 import type { GatewayUpdate } from "@/api/generated/model";
-import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
-import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
 import { GatewayForm } from "@/components/gateways/GatewayForm";
-import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { DashboardShell } from "@/components/templates/DashboardShell";
 import {
   DEFAULT_MAIN_SESSION_KEY,
   DEFAULT_WORKSPACE_ROOT,
@@ -164,33 +161,20 @@ export default function EditGatewayPage() {
   };
 
   return (
-    <DashboardShell>
+    <DashboardPageLayout
-      <SignedOut>
+      signedOut={{
-        <SignedOutPanel
+        message: "Sign in to edit a gateway.",
-          message="Sign in to edit a gateway."
+        forceRedirectUrl: `/gateways/${gatewayId}/edit`,
-          forceRedirectUrl={`/gateways/${gatewayId}/edit`}
+      }}
-        />
+      title={
-      </SignedOut>
+        resolvedName.trim()
-      <SignedIn>
-        <DashboardSidebar />
-        <main className="flex-1 overflow-y-auto bg-slate-50">
-          <div className="border-b border-slate-200 bg-white px-8 py-6">
-            <div>
-              <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
-                {resolvedName.trim()
           ? `Edit gateway — ${resolvedName.trim()}`
-                  : "Edit gateway"}
+          : "Edit gateway"
-              </h1>
+      }
-              <p className="mt-1 text-sm text-slate-500">
+      description="Update connection settings for this OpenClaw gateway."
-                Update connection settings for this OpenClaw gateway.
+      isAdmin={isAdmin}
-              </p>
+      adminOnlyMessage="Only organization owners and admins can edit gateways."
-            </div>
+    >
-          </div>
-
-          <div className="p-8">
-            {!isAdmin ? (
-              <AdminOnlyNotice message="Only organization owners and admins can edit gateways." />
-            ) : (
       <GatewayForm
         name={resolvedName}
         gatewayUrl={resolvedGatewayUrl}
@@ -230,10 +214,6 @@ export default function EditGatewayPage() {
         }}
         onWorkspaceRootChange={setWorkspaceRoot}
       />
-            )}
+    </DashboardPageLayout>
-          </div>
-        </main>
-      </SignedIn>
-    </DashboardShell>
   );
 }

frontend/src/app/gateways/[gatewayId]/page.tsx

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useMemo } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {
@@ -19,10 +19,7 @@ import {
   useListAgentsApiV1AgentsGet,
 } from "@/api/generated/agents/agents";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
-import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
-import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
-import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button } from "@/components/ui/button";
 
 const formatTimestamp = (value?: string | null) => {
@@ -113,48 +110,29 @@ export default function GatewayDetailPage() {
   );
 
   return (
-    <DashboardShell>
+    <DashboardPageLayout
-      <SignedOut>
+      signedOut={{
-        <SignedOutPanel
+        message: "Sign in to view a gateway.",
-          message="Sign in to view a gateway."
+        forceRedirectUrl: `/gateways/${gatewayId}`,
-          forceRedirectUrl={`/gateways/${gatewayId}`}
+      }}
-        />
+      title={title}
-      </SignedOut>
+      description="Gateway configuration and connection details."
-      <SignedIn>
+      headerActions={
-        <DashboardSidebar />
-        <main className="flex-1 overflow-y-auto bg-slate-50">
-          <div className="border-b border-slate-200 bg-white px-8 py-6">
-            <div className="flex flex-wrap items-center justify-between gap-4">
-              <div>
-                <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
-                  {title}
-                </h1>
-                <p className="mt-1 text-sm text-slate-500">
-                  Gateway configuration and connection details.
-                </p>
-              </div>
         <div className="flex items-center gap-2">
-                <Button
+          <Button variant="outline" onClick={() => router.push("/gateways")}>
-                  variant="outline"
-                  onClick={() => router.push("/gateways")}
-                >
             Back to gateways
           </Button>
           {isAdmin && gatewayId ? (
-                  <Button
+            <Button onClick={() => router.push(`/gateways/${gatewayId}/edit`)}>
-                    onClick={() => router.push(`/gateways/${gatewayId}/edit`)}
-                  >
               Edit gateway
             </Button>
           ) : null}
         </div>
-            </div>
+      }
-          </div>
+      isAdmin={isAdmin}
-
+      adminOnlyMessage="Only organization owners and admins can access gateways."
-          <div className="p-8">
+    >
-            {!isAdmin ? (
+      {gatewayQuery.isLoading ? (
-              <AdminOnlyNotice message="Only organization owners and admins can access gateways." />
-            ) : gatewayQuery.isLoading ? (
         <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
           Loading gateway…
         </div>
@@ -314,9 +292,6 @@ export default function GatewayDetailPage() {
                 </div>
         </div>
       ) : null}
-          </div>
+    </DashboardPageLayout>
-        </main>
-      </SignedIn>
-    </DashboardShell>
   );
 }

frontend/src/app/gateways/new/page.tsx

@@ -5,16 +5,13 @@ export const dynamic = "force-dynamic";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 
-import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import { useCreateGatewayApiV1GatewaysPost } from "@/api/generated/gateways/gateways";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
-import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
-import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
 import { GatewayForm } from "@/components/gateways/GatewayForm";
-import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { DashboardShell } from "@/components/templates/DashboardShell";
 import {
   DEFAULT_MAIN_SESSION_KEY,
   DEFAULT_WORKSPACE_ROOT,
@@ -125,31 +122,16 @@ export default function NewGatewayPage() {
   };
 
   return (
-    <DashboardShell>
+    <DashboardPageLayout
-      <SignedOut>
+      signedOut={{
-        <SignedOutPanel
+        message: "Sign in to create a gateway.",
-          message="Sign in to create a gateway."
+        forceRedirectUrl: "/gateways/new",
-          forceRedirectUrl="/gateways/new"
+      }}
-        />
+      title="Create gateway"
-      </SignedOut>
+      description="Configure an OpenClaw gateway for mission control."
-      <SignedIn>
+      isAdmin={isAdmin}
-        <DashboardSidebar />
+      adminOnlyMessage="Only organization owners and admins can create gateways."
-        <main className="flex-1 overflow-y-auto bg-slate-50">
+    >
-          <div className="border-b border-slate-200 bg-white px-8 py-6">
-            <div>
-              <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
-                Create gateway
-              </h1>
-              <p className="mt-1 text-sm text-slate-500">
-                Configure an OpenClaw gateway for mission control.
-              </p>
-            </div>
-          </div>
-
-          <div className="p-8">
-            {!isAdmin ? (
-              <AdminOnlyNotice message="Only organization owners and admins can create gateways." />
-            ) : (
       <GatewayForm
         name={name}
         gatewayUrl={gatewayUrl}
@@ -189,10 +171,6 @@ export default function NewGatewayPage() {
         }}
         onWorkspaceRootChange={setWorkspaceRoot}
       />
-            )}
+    </DashboardPageLayout>
-          </div>
-        </main>
-      </SignedIn>
-    </DashboardShell>
   );
 }

frontend/src/app/gateways/page.tsx

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 import { useMemo, useState } from "react";
 import Link from "next/link";
 
-import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";
+import { useAuth } from "@/auth/clerk";
 import {
   type ColumnDef,
   type SortingState,
@@ -16,8 +16,7 @@ import {
 } from "@tanstack/react-table";
 import { useQueryClient } from "@tanstack/react-query";
 
-import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
-import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Dialog,
@@ -37,8 +36,6 @@ import {
 } from "@/api/generated/gateways/gateways";
 import { useOrganizationMembership } from "@/lib/use-organization-membership";
 import type { GatewayRead } from "@/api/generated/model";
-import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
-import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
 
 const truncate = (value?: string | null, max = 24) => {
   if (!value) return "—";
@@ -220,28 +217,16 @@ export default function GatewaysPage() {
   });
 
   return (
-    <DashboardShell>
+    <>
-      <SignedOut>
+      <DashboardPageLayout
-        <SignedOutPanel
+      signedOut={{
-          message="Sign in to view gateways."
+        message: "Sign in to view gateways.",
-          forceRedirectUrl="/gateways"
+        forceRedirectUrl: "/gateways",
-        />
+      }}
-      </SignedOut>
+      title="Gateways"
-      <SignedIn>
+      description="Manage OpenClaw gateway connections used by boards"
-        <DashboardSidebar />
+      headerActions={
-        <main className="flex-1 overflow-y-auto bg-slate-50">
+        isAdmin && gateways.length > 0 ? (
-          <div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
-            <div className="px-8 py-6">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h1 className="text-2xl font-semibold tracking-tight text-slate-900">
-                    Gateways
-                  </h1>
-                  <p className="mt-1 text-sm text-slate-500">
-                    Manage OpenClaw gateway connections used by boards
-                  </p>
-                </div>
-                {isAdmin && gateways.length > 0 ? (
           <Link
             href="/gateways/new"
             className={buttonVariants({
@@ -251,16 +236,12 @@ export default function GatewaysPage() {
           >
             Create gateway
           </Link>
-                ) : null}
+        ) : null
-              </div>
+      }
-            </div>
+      isAdmin={isAdmin}
-          </div>
+      adminOnlyMessage="Only organization owners and admins can access gateways."
-
+      stickyHeader
-          <div className="p-8">
+    >
-            {!isAdmin ? (
-              <AdminOnlyNotice message="Only organization owners and admins can access gateways." />
-            ) : (
-              <>
       <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
         <div className="overflow-x-auto">
           <table className="w-full text-left text-sm">
@@ -284,9 +265,7 @@ export default function GatewaysPage() {
               {gatewaysQuery.isLoading ? (
                 <tr>
                   <td colSpan={columns.length} className="px-6 py-8">
-                              <span className="text-sm text-slate-500">
+                    <span className="text-sm text-slate-500">Loading…</span>
-                                Loading…
-                              </span>
                   </td>
                 </tr>
               ) : table.getRowModel().rows.length ? (
@@ -331,8 +310,8 @@ export default function GatewaysPage() {
                         No gateways yet
                       </h3>
                       <p className="mb-6 max-w-md text-sm text-slate-500">
-                                  Create your first gateway to connect boards
+                        Create your first gateway to connect boards and start
-                                  and start managing your OpenClaw connections.
+                        managing your OpenClaw connections.
                       </p>
                       <Link
                         href="/gateways/new"
@@ -353,15 +332,9 @@ export default function GatewaysPage() {
       </div>
 
       {gatewaysQuery.error ? (
-                  <p className="mt-4 text-sm text-red-500">
+        <p className="mt-4 text-sm text-red-500">{gatewaysQuery.error.message}</p>
-                    {gatewaysQuery.error.message}
-                  </p>
       ) : null}
-              </>
+      </DashboardPageLayout>
-            )}
-          </div>
-        </main>
-      </SignedIn>
 
       <Dialog
         open={Boolean(deleteTarget)}
@@ -390,6 +363,6 @@ export default function GatewaysPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </DashboardShell>
+    </>
   );
 }

frontend/src/components/templates/DashboardPageLayout.tsx

@@ -0,0 +1,117 @@
+import type { ReactNode, Ref } from "react";
+
+import { SignedIn, SignedOut } from "@/auth/clerk";
+
+import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
+import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
+import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
+import { cn } from "@/lib/utils";
+
+import { DashboardShell } from "./DashboardShell";
+
+type SignedOutConfig = {
+  message: string;
+  forceRedirectUrl: string;
+  signUpForceRedirectUrl?: string;
+  mode?: "modal" | "redirect";
+  buttonLabel?: string;
+  buttonTestId?: string;
+};
+
+type DashboardPageLayoutProps = {
+  signedOut: SignedOutConfig;
+  title: ReactNode;
+  description?: ReactNode;
+  headerActions?: ReactNode;
+  children: ReactNode;
+  isAdmin?: boolean;
+  adminOnlyMessage?: string;
+  stickyHeader?: boolean;
+  mainClassName?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  mainRef?: Ref<HTMLElement>;
+};
+
+export function DashboardPageLayout({
+  signedOut,
+  title,
+  description,
+  headerActions,
+  children,
+  isAdmin,
+  adminOnlyMessage,
+  stickyHeader = false,
+  mainClassName,
+  headerClassName,
+  contentClassName,
+  mainRef,
+}: DashboardPageLayoutProps) {
+  const showAdminOnlyNotice =
+    typeof isAdmin === "boolean" && Boolean(adminOnlyMessage) && !isAdmin;
+
+  return (
+    <DashboardShell>
+      <SignedOut>
+        <SignedOutPanel
+          message={signedOut.message}
+          forceRedirectUrl={signedOut.forceRedirectUrl}
+          signUpForceRedirectUrl={signedOut.signUpForceRedirectUrl}
+          mode={signedOut.mode}
+          buttonLabel={signedOut.buttonLabel}
+          buttonTestId={signedOut.buttonTestId}
+        />
+      </SignedOut>
+      <SignedIn>
+        <DashboardSidebar />
+        <main
+          ref={mainRef}
+          className={cn("flex-1 overflow-y-auto bg-slate-50", mainClassName)}
+        >
+          <div
+            className={cn(
+              "border-b border-slate-200 bg-white",
+              stickyHeader && "sticky top-0 z-30",
+              headerClassName,
+            )}
+          >
+            <div className="px-8 py-6">
+              {headerActions ? (
+                <div className="flex flex-wrap items-center justify-between gap-4">
+                  <div>
+                    <h1 className="font-heading text-2xl font-semibold tracking-tight text-slate-900">
+                      {title}
+                    </h1>
+                    {description ? (
+                      <p className="mt-1 text-sm text-slate-500">
+                        {description}
+                      </p>
+                    ) : null}
+                  </div>
+                  {headerActions}
+                </div>
+              ) : (
+                <div>
+                  <h1 className="font-heading text-2xl font-semibold tracking-tight text-slate-900">
+                    {title}
+                  </h1>
+                  {description ? (
+                    <p className="mt-1 text-sm text-slate-500">{description}</p>
+                  ) : null}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className={cn("p-8", contentClassName)}>
+            {showAdminOnlyNotice ? (
+              <AdminOnlyNotice message={adminOnlyMessage ?? ""} />
+            ) : (
+              children
+            )}
+          </div>
+        </main>
+      </SignedIn>
+    </DashboardShell>
+  );
+}