feat(web): admin backoffice — meshes, sessions, invites, audit, overview

Four new admin routes backed by the mesh API modules:

- /admin/meshes — paginated data-table (name, owner, tier, transport,
  members, created). Tier + transport multiSelect filters.
- /admin/meshes/[id] — detail page: owner row + 4 live sections
  (members, presences, invites, last 50 audit events).
- /admin/sessions — live Claude Code WS presences. Status filter,
  pulse dot for working sessions, disconnected badge.
- /admin/invites — invite tokens w/ status derived client-side
  (active/revoked/expired/exhausted).
- /admin/audit — metadata-only event log, event-type + mesh + date
  filters.

Overview page at /admin rewritten to 6 summary cards (users, orgs,
customers, meshes, sessions, messages 24h) joining the base
/admin/summary and /admin/summary/mesh endpoints.

Sidebar navigation gains a second "mesh" group with the four new entries.
paths.ts extended with admin.meshes / sessions / invites / audit.

All UI reuses @turbostarter/ui-web/data-table — columns.tsx + thin
*-data-table.tsx wrapper per the existing users pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/app/[locale]/admin/audit/page.tsx

@@ -0,0 +1,85 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+} from "nuqs/server";
+import { Suspense } from "react";
+
+import { getAuditResponseSchema } from "@turbostarter/api/schema";
+import { handle } from "@turbostarter/api/utils";
+import { pickBy } from "@turbostarter/shared/utils";
+import { DataTableSkeleton } from "@turbostarter/ui-web/data-table/data-table-skeleton";
+
+import { api } from "~/lib/api/server";
+import { getMetadata } from "~/lib/metadata";
+import { AuditDataTable } from "~/modules/admin/audit/data-table/audit-data-table";
+import { getSortingStateParser } from "~/modules/common/hooks/use-data-table/common";
+import {
+  DashboardHeader,
+  DashboardHeaderDescription,
+  DashboardHeaderTitle,
+} from "~/modules/common/layout/dashboard/header";
+
+const searchParamsCache = createSearchParamsCache({
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(50),
+  sort: getSortingStateParser().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  q: parseAsString,
+  eventType: parseAsArrayOf(parseAsString),
+  meshId: parseAsArrayOf(parseAsString),
+  createdAt: parseAsArrayOf(parseAsInteger),
+});
+
+export const generateMetadata = getMetadata({
+  title: "Audit · Admin",
+  description: "Audit log of mesh events.",
+});
+
+export default async function AuditPage(props: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const searchParams = await props.searchParams;
+  const { page, perPage, sort, ...rest } =
+    searchParamsCache.parse(searchParams);
+
+  const filters = pickBy(rest, Boolean);
+
+  const promise = handle(api.admin.audit.$get, {
+    schema: getAuditResponseSchema,
+  })({
+    query: {
+      ...filters,
+      page: page.toString(),
+      perPage: perPage.toString(),
+      sort: JSON.stringify(sort),
+    },
+  });
+
+  return (
+    <>
+      <DashboardHeader>
+        <div>
+          <DashboardHeaderTitle>Audit log</DashboardHeaderTitle>
+          <DashboardHeaderDescription>
+            Metadata-only event log — no message content, only routing.
+          </DashboardHeaderDescription>
+        </div>
+      </DashboardHeader>
+      <Suspense
+        fallback={
+          <DataTableSkeleton
+            columnCount={5}
+            filterCount={2}
+            cellWidths={["8rem", "10rem", "8rem", "8rem", "10rem"]}
+            shrinkZero
+          />
+        }
+      >
+        <AuditDataTable promise={promise} perPage={perPage} />
+      </Suspense>
+    </>
+  );
+}

apps/web/src/app/[locale]/admin/invites/page.tsx

@@ -0,0 +1,84 @@
+import {
+  createSearchParamsCache,
+  parseAsBoolean,
+  parseAsInteger,
+  parseAsString,
+} from "nuqs/server";
+import { Suspense } from "react";
+
+import { getInvitesResponseSchema } from "@turbostarter/api/schema";
+import { handle } from "@turbostarter/api/utils";
+import { pickBy } from "@turbostarter/shared/utils";
+import { DataTableSkeleton } from "@turbostarter/ui-web/data-table/data-table-skeleton";
+
+import { api } from "~/lib/api/server";
+import { getMetadata } from "~/lib/metadata";
+import { InvitesDataTable } from "~/modules/admin/invites/data-table/invites-data-table";
+import { getSortingStateParser } from "~/modules/common/hooks/use-data-table/common";
+import {
+  DashboardHeader,
+  DashboardHeaderDescription,
+  DashboardHeaderTitle,
+} from "~/modules/common/layout/dashboard/header";
+
+const searchParamsCache = createSearchParamsCache({
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(20),
+  sort: getSortingStateParser().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  q: parseAsString,
+  revoked: parseAsBoolean,
+  expired: parseAsBoolean,
+});
+
+export const generateMetadata = getMetadata({
+  title: "Invites · Admin",
+  description: "Mesh invite tokens across the system.",
+});
+
+export default async function InvitesPage(props: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const searchParams = await props.searchParams;
+  const { page, perPage, sort, ...rest } =
+    searchParamsCache.parse(searchParams);
+
+  const filters = pickBy(rest, Boolean);
+
+  const promise = handle(api.admin.invites.$get, {
+    schema: getInvitesResponseSchema,
+  })({
+    query: {
+      ...filters,
+      page: page.toString(),
+      perPage: perPage.toString(),
+      sort: JSON.stringify(sort),
+    },
+  });
+
+  return (
+    <>
+      <DashboardHeader>
+        <div>
+          <DashboardHeaderTitle>Invites</DashboardHeaderTitle>
+          <DashboardHeaderDescription>
+            Mesh invite tokens — active, revoked, expired, exhausted.
+          </DashboardHeaderDescription>
+        </div>
+      </DashboardHeader>
+      <Suspense
+        fallback={
+          <DataTableSkeleton
+            columnCount={6}
+            filterCount={2}
+            cellWidths={["12rem", "8rem", "5rem", "5rem", "7rem", "5rem"]}
+            shrinkZero
+          />
+        }
+      >
+        <InvitesDataTable promise={promise} perPage={perPage} />
+      </Suspense>
+    </>
+  );
+}

apps/web/src/app/[locale]/admin/layout.tsx

@@ -35,6 +35,31 @@ const menu = [
       },
     ],
   },
+  {
+    label: "mesh",
+    items: [
+      {
+        title: "meshes",
+        href: pathsConfig.admin.meshes.index,
+        icon: Icons.Share,
+      },
+      {
+        title: "sessions",
+        href: pathsConfig.admin.sessions.index,
+        icon: Icons.Activity,
+      },
+      {
+        title: "invites",
+        href: pathsConfig.admin.invites.index,
+        icon: Icons.Link,
+      },
+      {
+        title: "audit",
+        href: pathsConfig.admin.audit.index,
+        icon: Icons.ScrollText,
+      },
+    ],
+  },
 ];
 
 export default async function AdminLayout({

apps/web/src/app/[locale]/admin/meshes/[id]/page.tsx

@@ -0,0 +1,277 @@
+import { notFound } from "next/navigation";
+
+import { getMeshResponseSchema } from "@turbostarter/api/schema";
+import { handle } from "@turbostarter/api/utils";
+import { Badge } from "@turbostarter/ui-web/badge";
+
+import { api } from "~/lib/api/server";
+import { getMetadata } from "~/lib/metadata";
+import {
+  DashboardHeader,
+  DashboardHeaderDescription,
+  DashboardHeaderTitle,
+} from "~/modules/common/layout/dashboard/header";
+
+export const generateMetadata = getMetadata({
+  title: "Mesh detail · Admin",
+  description: "Members, presences, invites, audit events for a mesh.",
+});
+
+export default async function MeshDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const data = await handle(api.admin.meshes[":id"].$get, {
+    schema: getMeshResponseSchema,
+  })({ param: { id } }).catch(() => null);
+
+  if (!data || !data.mesh) notFound();
+
+  const { mesh, members, presences, invites, auditEvents } = data;
+
+  return (
+    <>
+      <DashboardHeader>
+        <div>
+          <DashboardHeaderTitle>
+            <span className="flex items-center gap-3">
+              {mesh.name}
+              <Badge variant="outline" className="font-mono text-xs">
+                {mesh.slug}
+              </Badge>
+            </span>
+          </DashboardHeaderTitle>
+          <DashboardHeaderDescription>
+            Owner: {mesh.ownerName ?? "—"} · {mesh.ownerEmail ?? "—"} · tier{" "}
+            {mesh.tier} · transport {mesh.transport} · visibility{" "}
+            {mesh.visibility}
+          </DashboardHeaderDescription>
+        </div>
+      </DashboardHeader>
+
+      <div className="grid gap-8">
+        <Section
+          title="Members"
+          count={members.length}
+          empty="No members yet."
+        >
+          <table className="w-full text-sm">
+            <thead className="text-muted-foreground border-b text-left text-xs uppercase">
+              <tr>
+                <th className="px-3 py-2 font-medium">Display name</th>
+                <th className="px-3 py-2 font-medium">Role</th>
+                <th className="px-3 py-2 font-medium">Pubkey</th>
+                <th className="px-3 py-2 font-medium">Joined</th>
+                <th className="px-3 py-2 font-medium">Last seen</th>
+                <th className="px-3 py-2 font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {members.map((m) => (
+                <tr key={m.id}>
+                  <td className="px-3 py-2 font-medium">{m.displayName}</td>
+                  <td className="px-3 py-2">
+                    <Badge variant="outline">{m.role}</Badge>
+                  </td>
+                  <td className="text-muted-foreground px-3 py-2 font-mono text-xs">
+                    {m.peerPubkey.slice(0, 12)}…
+                  </td>
+                  <td className="text-muted-foreground px-3 py-2">
+                    {new Date(m.joinedAt).toLocaleDateString()}
+                  </td>
+                  <td className="text-muted-foreground px-3 py-2">
+                    {m.lastSeenAt
+                      ? new Date(m.lastSeenAt).toLocaleString()
+                      : "—"}
+                  </td>
+                  <td className="px-3 py-2">
+                    {m.revokedAt ? (
+                      <Badge className="bg-destructive/15 text-destructive">
+                        revoked
+                      </Badge>
+                    ) : (
+                      <Badge className="bg-success/15 text-success">
+                        active
+                      </Badge>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+
+        <Section
+          title="Live presences"
+          count={presences.length}
+          empty="No active sessions."
+        >
+          <table className="w-full text-sm">
+            <thead className="text-muted-foreground border-b text-left text-xs uppercase">
+              <tr>
+                <th className="px-3 py-2 font-medium">Peer</th>
+                <th className="px-3 py-2 font-medium">Status</th>
+                <th className="px-3 py-2 font-medium">PID</th>
+                <th className="px-3 py-2 font-medium">CWD</th>
+                <th className="px-3 py-2 font-medium">Last ping</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {presences.map((p) => (
+                <tr key={p.id}>
+                  <td className="px-3 py-2 font-medium">
+                    {p.displayName ?? "—"}
+                  </td>
+                  <td className="px-3 py-2">
+                    <Badge
+                      variant="secondary"
+                      className={
+                        p.disconnectedAt
+                          ? "bg-muted/50 text-muted-foreground"
+                          : p.status === "working"
+                            ? "bg-primary/15 text-primary"
+                            : p.status === "dnd"
+                              ? "bg-destructive/15 text-destructive"
+                              : "bg-muted text-muted-foreground"
+                      }
+                    >
+                      {p.disconnectedAt ? "disconnected" : p.status}
+                    </Badge>
+                  </td>
+                  <td className="text-muted-foreground px-3 py-2 font-mono text-xs">
+                    {p.pid}
+                  </td>
+                  <td className="text-muted-foreground max-w-xs truncate px-3 py-2 font-mono text-xs">
+                    {p.cwd}
+                  </td>
+                  <td className="text-muted-foreground px-3 py-2">
+                    {new Date(p.lastPingAt).toLocaleTimeString()}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+
+        <Section
+          title="Invites"
+          count={invites.length}
+          empty="No invites issued."
+        >
+          <table className="w-full text-sm">
+            <thead className="text-muted-foreground border-b text-left text-xs uppercase">
+              <tr>
+                <th className="px-3 py-2 font-medium">Token</th>
+                <th className="px-3 py-2 font-medium">Role</th>
+                <th className="px-3 py-2 font-medium">Uses</th>
+                <th className="px-3 py-2 font-medium">Expires</th>
+                <th className="px-3 py-2 font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {invites.map((inv) => (
+                <tr key={inv.id}>
+                  <td className="text-muted-foreground px-3 py-2 font-mono text-xs">
+                    {inv.token.slice(0, 12)}…
+                  </td>
+                  <td className="px-3 py-2">
+                    <Badge variant="outline">{inv.role}</Badge>
+                  </td>
+                  <td className="px-3 py-2 font-mono">
+                    {inv.usedCount} / {inv.maxUses}
+                  </td>
+                  <td className="text-muted-foreground px-3 py-2">
+                    {new Date(inv.expiresAt).toLocaleDateString()}
+                  </td>
+                  <td className="px-3 py-2">
+                    {inv.revokedAt ? (
+                      <Badge className="bg-destructive/15 text-destructive">
+                        revoked
+                      </Badge>
+                    ) : new Date(inv.expiresAt) < new Date() ? (
+                      <Badge variant="outline">expired</Badge>
+                    ) : (
+                      <Badge className="bg-success/15 text-success">
+                        active
+                      </Badge>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+
+        <Section
+          title="Last 50 audit events"
+          count={auditEvents.length}
+          empty="No events yet."
+        >
+          <table className="w-full text-sm">
+            <thead className="text-muted-foreground border-b text-left text-xs uppercase">
+              <tr>
+                <th className="px-3 py-2 font-medium">When</th>
+                <th className="px-3 py-2 font-medium">Event</th>
+                <th className="px-3 py-2 font-medium">Actor</th>
+                <th className="px-3 py-2 font-medium">Target</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {auditEvents.map((e) => (
+                <tr key={e.id}>
+                  <td className="text-muted-foreground px-3 py-2 font-mono text-xs whitespace-nowrap">
+                    {new Date(e.createdAt).toLocaleString()}
+                  </td>
+                  <td className="px-3 py-2">
+                    <Badge variant="outline" className="font-mono text-xs">
+                      {e.eventType}
+                    </Badge>
+                  </td>
+                  <td className="text-muted-foreground px-3 py-2 font-mono text-xs">
+                    {e.actorPeerId?.slice(0, 12) ?? "—"}
+                  </td>
+                  <td className="text-muted-foreground px-3 py-2 font-mono text-xs">
+                    {e.targetPeerId?.slice(0, 12) ?? "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      </div>
+    </>
+  );
+}
+
+function Section({
+  title,
+  count,
+  empty,
+  children,
+}: {
+  title: string;
+  count: number;
+  empty: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="rounded-lg border">
+      <header className="flex items-center justify-between border-b px-4 py-3">
+        <h2 className="font-medium">{title}</h2>
+        <Badge variant="outline" className="font-mono text-xs">
+          {count}
+        </Badge>
+      </header>
+      {count === 0 ? (
+        <p className="text-muted-foreground px-4 py-8 text-center text-sm">
+          {empty}
+        </p>
+      ) : (
+        <div className="overflow-x-auto">{children}</div>
+      )}
+    </section>
+  );
+}

apps/web/src/app/[locale]/admin/meshes/page.tsx

@@ -0,0 +1,93 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsBoolean,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server";
+import { Suspense } from "react";
+
+import { getMeshesResponseSchema } from "@turbostarter/api/schema";
+import { handle } from "@turbostarter/api/utils";
+import { pickBy } from "@turbostarter/shared/utils";
+import { DataTableSkeleton } from "@turbostarter/ui-web/data-table/data-table-skeleton";
+
+import { api } from "~/lib/api/server";
+import { getMetadata } from "~/lib/metadata";
+import { MeshesDataTable } from "~/modules/admin/meshes/data-table/meshes-data-table";
+import { getSortingStateParser } from "~/modules/common/hooks/use-data-table/common";
+import {
+  DashboardHeader,
+  DashboardHeaderDescription,
+  DashboardHeaderTitle,
+} from "~/modules/common/layout/dashboard/header";
+
+const TIER_VALUES = ["free", "pro", "team", "enterprise"] as const;
+const TRANSPORT_VALUES = ["managed", "tailscale", "self_hosted"] as const;
+const VISIBILITY_VALUES = ["private", "public"] as const;
+
+const searchParamsCache = createSearchParamsCache({
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(20),
+  sort: getSortingStateParser().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  q: parseAsString,
+  tier: parseAsArrayOf(parseAsStringEnum([...TIER_VALUES])),
+  transport: parseAsArrayOf(parseAsStringEnum([...TRANSPORT_VALUES])),
+  visibility: parseAsArrayOf(parseAsStringEnum([...VISIBILITY_VALUES])),
+  archived: parseAsBoolean,
+  createdAt: parseAsArrayOf(parseAsInteger),
+});
+
+export const generateMetadata = getMetadata({
+  title: "Meshes · Admin",
+  description: "All meshes in the system.",
+});
+
+export default async function MeshesPage(props: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const searchParams = await props.searchParams;
+  const { page, perPage, sort, ...rest } =
+    searchParamsCache.parse(searchParams);
+
+  const filters = pickBy(rest, Boolean);
+
+  const promise = handle(api.admin.meshes.$get, {
+    schema: getMeshesResponseSchema,
+  })({
+    query: {
+      ...filters,
+      page: page.toString(),
+      perPage: perPage.toString(),
+      sort: JSON.stringify(sort),
+    },
+  });
+
+  return (
+    <>
+      <DashboardHeader>
+        <div>
+          <DashboardHeaderTitle>Meshes</DashboardHeaderTitle>
+          <DashboardHeaderDescription>
+            All meshes across the system — tier, transport, owner, member count.
+          </DashboardHeaderDescription>
+        </div>
+      </DashboardHeader>
+      <Suspense
+        fallback={
+          <DataTableSkeleton
+            columnCount={6}
+            filterCount={3}
+            cellWidths={["14rem", "12rem", "6rem", "6rem", "5rem", "6rem"]}
+            shrinkZero
+          />
+        }
+      >
+        <MeshesDataTable promise={promise} perPage={perPage} />
+      </Suspense>
+    </>
+  );
+}

apps/web/src/app/[locale]/admin/page.tsx

@@ -35,12 +35,65 @@ export default async function AdminPage() {
     organizations: z.number(),
     customers: z.number(),
   });
+  const meshSummarySchema = z.object({
+    meshes: z.number(),
+    activeMeshes: z.number(),
+    totalPresences: z.number(),
+    activePresences: z.number(),
+    messages24h: z.number(),
+  });
 
-  const data = await handle(api.admin.summary.$get, {
-    schema: adminSummarySchema,
-  })();
+  const [base, mesh] = await Promise.all([
+    handle(api.admin.summary.$get, { schema: adminSummarySchema })(),
+    handle(api.admin.summary.mesh.$get, { schema: meshSummarySchema })(),
+  ]);
 
-  const cards = ["users", "organizations", "customers"] as const;
+  const nf = new Intl.NumberFormat(i18n.language);
+
+  const cards = [
+    {
+      key: "users" as const,
+      title: t("common:users"),
+      description: t("home.summary.users"),
+      href: pathsConfig.admin.users.index,
+      value: base.users,
+    },
+    {
+      key: "organizations" as const,
+      title: t("common:organizations"),
+      description: t("home.summary.organizations"),
+      href: pathsConfig.admin.organizations.index,
+      value: base.organizations,
+    },
+    {
+      key: "customers" as const,
+      title: t("common:customers"),
+      description: t("home.summary.customers"),
+      href: pathsConfig.admin.customers.index,
+      value: base.customers,
+    },
+    {
+      key: "meshes" as const,
+      title: "Meshes",
+      description: `${nf.format(mesh.activeMeshes)} active`,
+      href: pathsConfig.admin.meshes.index,
+      value: mesh.meshes,
+    },
+    {
+      key: "sessions" as const,
+      title: "Sessions",
+      description: `${nf.format(mesh.activePresences)} live now`,
+      href: pathsConfig.admin.sessions.index,
+      value: mesh.totalPresences,
+    },
+    {
+      key: "messages" as const,
+      title: "Messages (24h)",
+      description: "Routed through the broker",
+      href: pathsConfig.admin.audit.index,
+      value: mesh.messages24h,
+    },
+  ];
 
   return (
     <>
@@ -57,10 +110,10 @@ export default async function AdminPage() {
 
       <nav className="@container/stats w-full">
         <ul className="grid grid-cols-1 gap-4 @lg/stats:grid-cols-2 @2xl/stats:grid-cols-3">
-          {cards.map((key) => (
-            <li key={key}>
+          {cards.map((card) => (
+            <li key={card.key}>
               <TurboLink
-                href={pathsConfig.admin[key].index}
+                href={card.href}
                 className={cn(
                   buttonVariants({ variant: "outline" }),
                   "text-muted-foreground h-full w-full flex-col items-start justify-between gap-3 p-0",
@@ -69,18 +122,17 @@ export default async function AdminPage() {
                 <CardHeader className="w-full">
                   <div className="flex w-full items-center justify-between gap-3">
                     <CardTitle className="text-foreground truncate">
-                      {t(`common:${key}`)}
+                      {card.title}
                     </CardTitle>
                     <Icons.ChevronRight className="mt-0.5 size-4" />
                   </div>
                   <CardDescription className="whitespace-normal">
-                    {t(`home.summary.${key}`)}
+                    {card.description}
                   </CardDescription>
                 </CardHeader>
-
                 <CardFooter>
                   <span className="text-foreground font-mono text-4xl font-bold tracking-tight">
-                    {new Intl.NumberFormat(i18n.language).format(data[key])}
+                    {nf.format(card.value)}
                   </span>
                 </CardFooter>
               </TurboLink>

apps/web/src/app/[locale]/admin/sessions/page.tsx

@@ -0,0 +1,88 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsBoolean,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server";
+import { Suspense } from "react";
+
+import { getSessionsResponseSchema } from "@turbostarter/api/schema";
+import { handle } from "@turbostarter/api/utils";
+import { pickBy } from "@turbostarter/shared/utils";
+import { DataTableSkeleton } from "@turbostarter/ui-web/data-table/data-table-skeleton";
+
+import { api } from "~/lib/api/server";
+import { getMetadata } from "~/lib/metadata";
+import { SessionsDataTable } from "~/modules/admin/sessions/data-table/sessions-data-table";
+import { getSortingStateParser } from "~/modules/common/hooks/use-data-table/common";
+import {
+  DashboardHeader,
+  DashboardHeaderDescription,
+  DashboardHeaderTitle,
+} from "~/modules/common/layout/dashboard/header";
+
+const STATUS_VALUES = ["idle", "working", "dnd"] as const;
+
+const searchParamsCache = createSearchParamsCache({
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(20),
+  sort: getSortingStateParser().withDefault([
+    { id: "lastPingAt", desc: true },
+  ]),
+  q: parseAsString,
+  status: parseAsArrayOf(parseAsStringEnum([...STATUS_VALUES])),
+  active: parseAsBoolean,
+});
+
+export const generateMetadata = getMetadata({
+  title: "Sessions · Admin",
+  description: "Live Claude Code sessions across all meshes.",
+});
+
+export default async function SessionsPage(props: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const searchParams = await props.searchParams;
+  const { page, perPage, sort, ...rest } =
+    searchParamsCache.parse(searchParams);
+
+  const filters = pickBy(rest, Boolean);
+
+  const promise = handle(api.admin.sessions.$get, {
+    schema: getSessionsResponseSchema,
+  })({
+    query: {
+      ...filters,
+      page: page.toString(),
+      perPage: perPage.toString(),
+      sort: JSON.stringify(sort),
+    },
+  });
+
+  return (
+    <>
+      <DashboardHeader>
+        <div>
+          <DashboardHeaderTitle>Sessions</DashboardHeaderTitle>
+          <DashboardHeaderDescription>
+            Live Claude Code presences across every mesh.
+          </DashboardHeaderDescription>
+        </div>
+      </DashboardHeader>
+      <Suspense
+        fallback={
+          <DataTableSkeleton
+            columnCount={5}
+            filterCount={2}
+            cellWidths={["6rem", "10rem", "12rem", "14rem", "6rem"]}
+            shrinkZero
+          />
+        }
+      >
+        <SessionsDataTable promise={promise} perPage={perPage} />
+      </Suspense>
+    </>
+  );
+}