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, {
+  const [base, mesh] = await Promise.all([
-    schema: adminSummarySchema,
+    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) => (
+          {cards.map((card) => (
-            <li key={key}>
+            <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>
+    </>
+  );
+}

apps/web/src/config/paths.ts

@@ -54,6 +54,19 @@ const pathsConfig = {
       index: `${ADMIN_PREFIX}/customers`,
       customer: (id: string) => `${ADMIN_PREFIX}/customers/${id}`,
     },
+    meshes: {
+      index: `${ADMIN_PREFIX}/meshes`,
+      mesh: (id: string) => `${ADMIN_PREFIX}/meshes/${id}`,
+    },
+    sessions: {
+      index: `${ADMIN_PREFIX}/sessions`,
+    },
+    invites: {
+      index: `${ADMIN_PREFIX}/invites`,
+    },
+    audit: {
+      index: `${ADMIN_PREFIX}/audit`,
+    },
   },
   marketing: {
     pricing: "/pricing",

apps/web/src/modules/admin/audit/data-table/audit-data-table.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { use } from "react";
+
+import { DataTable } from "@turbostarter/ui-web/data-table/data-table";
+import { DataTableToolbar } from "@turbostarter/ui-web/data-table/data-table-toolbar";
+
+import { useDataTable } from "~/modules/common/hooks/use-data-table";
+
+import { useAuditColumns } from "./columns";
+
+import type { GetAuditResponse } from "@turbostarter/api/schema";
+
+interface Props {
+  readonly promise: Promise<Awaited<GetAuditResponse>>;
+  readonly perPage: number;
+}
+
+export const AuditDataTable = ({ promise, perPage }: Props) => {
+  const columns = useAuditColumns();
+  const { data, total } = use(promise);
+
+  const { table } = useDataTable({
+    persistance: "searchParams",
+    data,
+    columns,
+    pageCount: Math.ceil(total / perPage),
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnVisibility: { q: false },
+    },
+    shallow: false,
+    clearOnDefault: true,
+    enableRowSelection: false,
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <DataTableToolbar table={table} />
+      <DataTable table={table} />
+    </div>
+  );
+};

apps/web/src/modules/admin/audit/data-table/columns.tsx

@@ -0,0 +1,98 @@
+import { Badge } from "@turbostarter/ui-web/badge";
+import { DataTableColumnHeader } from "@turbostarter/ui-web/data-table/data-table-column-header";
+
+import { TurboLink } from "~/modules/common/turbo-link";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import type { GetAuditResponse } from "@turbostarter/api/schema";
+
+type Audit = GetAuditResponse["data"][number];
+
+export const useAuditColumns = (): ColumnDef<Audit>[] => [
+  {
+    id: "q",
+    accessorKey: "q",
+    meta: {
+      placeholder: "Search by event, peer, mesh…",
+      variant: "text",
+    },
+    enableHiding: false,
+    enableColumnFilter: true,
+  },
+  {
+    id: "eventType",
+    accessorKey: "eventType",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Event" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline" className="font-mono text-xs">
+        {row.original.eventType}
+      </Badge>
+    ),
+    meta: { label: "Event" },
+  },
+  {
+    id: "mesh",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Mesh" />
+    ),
+    cell: ({ row }) =>
+      row.original.meshId ? (
+        <TurboLink
+          href={`/admin/meshes/${row.original.meshId}`}
+          className="group flex flex-col gap-0.5"
+        >
+          <span className="group-hover:text-primary text-sm underline underline-offset-4">
+            {row.original.meshName ?? "—"}
+          </span>
+        </TurboLink>
+      ) : (
+        <span className="text-muted-foreground">—</span>
+      ),
+    meta: { label: "Mesh" },
+  },
+  {
+    id: "actor",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Actor" />
+    ),
+    cell: ({ row }) =>
+      row.original.actorPeerId ? (
+        <code className="text-muted-foreground font-mono text-xs">
+          {row.original.actorPeerId.slice(0, 12)}…
+        </code>
+      ) : (
+        <span className="text-muted-foreground">—</span>
+      ),
+    meta: { label: "Actor" },
+  },
+  {
+    id: "target",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Target" />
+    ),
+    cell: ({ row }) =>
+      row.original.targetPeerId ? (
+        <code className="text-muted-foreground font-mono text-xs">
+          {row.original.targetPeerId.slice(0, 12)}…
+        </code>
+      ) : (
+        <span className="text-muted-foreground">—</span>
+      ),
+    meta: { label: "Target" },
+  },
+  {
+    id: "createdAt",
+    accessorKey: "createdAt",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="When" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-muted-foreground text-sm">
+        {new Date(row.original.createdAt).toLocaleString()}
+      </span>
+    ),
+    meta: { label: "When" },
+  },
+];

apps/web/src/modules/admin/invites/data-table/columns.tsx

@@ -0,0 +1,123 @@
+import { Badge } from "@turbostarter/ui-web/badge";
+import { DataTableColumnHeader } from "@turbostarter/ui-web/data-table/data-table-column-header";
+
+import { TurboLink } from "~/modules/common/turbo-link";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import type { GetInvitesResponse } from "@turbostarter/api/schema";
+
+type Invite = GetInvitesResponse["data"][number];
+
+export const useInviteColumns = (): ColumnDef<Invite>[] => [
+  {
+    id: "q",
+    accessorKey: "q",
+    meta: { placeholder: "Search by mesh or token…", variant: "text" },
+    enableHiding: false,
+    enableColumnFilter: true,
+  },
+  {
+    id: "mesh",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Mesh" />
+    ),
+    cell: ({ row }) =>
+      row.original.meshId ? (
+        <TurboLink
+          href={`/admin/meshes/${row.original.meshId}`}
+          className="group flex flex-col gap-0.5"
+        >
+          <span className="group-hover:text-primary text-sm font-medium underline underline-offset-4">
+            {row.original.meshName ?? "—"}
+          </span>
+          <span className="text-muted-foreground font-mono text-xs">
+            {row.original.meshSlug ?? "—"}
+          </span>
+        </TurboLink>
+      ) : (
+        <span className="text-muted-foreground">—</span>
+      ),
+    meta: { label: "Mesh" },
+    enableHiding: false,
+  },
+  {
+    id: "token",
+    accessorKey: "token",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Token" />
+    ),
+    cell: ({ row }) => (
+      <code className="bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs">
+        {row.original.token.slice(0, 12)}…
+      </code>
+    ),
+    meta: { label: "Token" },
+  },
+  {
+    id: "role",
+    accessorKey: "role",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Role" />
+    ),
+    cell: ({ row }) => (
+      <Badge variant="outline">{row.original.role}</Badge>
+    ),
+    meta: { label: "Role" },
+  },
+  {
+    id: "uses",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Uses" />
+    ),
+    cell: ({ row }) => (
+      <span className="font-mono text-sm">
+        {row.original.usedCount} / {row.original.maxUses}
+      </span>
+    ),
+    meta: { label: "Uses" },
+  },
+  {
+    id: "expiresAt",
+    accessorKey: "expiresAt",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Expires" />
+    ),
+    cell: ({ row }) => {
+      const expired = new Date(row.original.expiresAt) < new Date();
+      return (
+        <span
+          className={
+            "text-sm " + (expired ? "text-destructive" : "text-muted-foreground")
+          }
+        >
+          {new Date(row.original.expiresAt).toLocaleDateString()}
+          {expired && " (expired)"}
+        </span>
+      );
+    },
+    meta: { label: "Expires" },
+  },
+  {
+    id: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Status" />
+    ),
+    cell: ({ row }) => {
+      if (row.original.revokedAt) {
+        return (
+          <Badge className="bg-destructive/15 text-destructive">revoked</Badge>
+        );
+      }
+      if (new Date(row.original.expiresAt) < new Date()) {
+        return <Badge variant="outline">expired</Badge>;
+      }
+      if (row.original.usedCount >= row.original.maxUses) {
+        return <Badge variant="outline">exhausted</Badge>;
+      }
+      return (
+        <Badge className="bg-success/15 text-success">active</Badge>
+      );
+    },
+    meta: { label: "Status" },
+  },
+];

apps/web/src/modules/admin/invites/data-table/invites-data-table.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { use } from "react";
+
+import { DataTable } from "@turbostarter/ui-web/data-table/data-table";
+import { DataTableToolbar } from "@turbostarter/ui-web/data-table/data-table-toolbar";
+
+import { useDataTable } from "~/modules/common/hooks/use-data-table";
+
+import { useInviteColumns } from "./columns";
+
+import type { GetInvitesResponse } from "@turbostarter/api/schema";
+
+interface Props {
+  readonly promise: Promise<Awaited<GetInvitesResponse>>;
+  readonly perPage: number;
+}
+
+export const InvitesDataTable = ({ promise, perPage }: Props) => {
+  const columns = useInviteColumns();
+  const { data, total } = use(promise);
+
+  const { table } = useDataTable({
+    persistance: "searchParams",
+    data,
+    columns,
+    pageCount: Math.ceil(total / perPage),
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnVisibility: { q: false },
+    },
+    shallow: false,
+    clearOnDefault: true,
+    enableRowSelection: false,
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <DataTableToolbar table={table} />
+      <DataTable table={table} />
+    </div>
+  );
+};

apps/web/src/modules/admin/meshes/data-table/columns.tsx

@@ -0,0 +1,145 @@
+import { Badge } from "@turbostarter/ui-web/badge";
+import { DataTableColumnHeader } from "@turbostarter/ui-web/data-table/data-table-column-header";
+
+import { TurboLink } from "~/modules/common/turbo-link";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import type { GetMeshesResponse } from "@turbostarter/api/schema";
+
+type Mesh = GetMeshesResponse["data"][number];
+
+const TIER_COLORS: Record<string, string> = {
+  free: "bg-muted text-muted-foreground",
+  pro: "bg-blue-500/15 text-blue-600",
+  team: "bg-purple-500/15 text-purple-600",
+  enterprise: "bg-amber-500/15 text-amber-600",
+};
+
+const TRANSPORT_COLORS: Record<string, string> = {
+  managed: "bg-primary/15 text-primary",
+  tailscale: "bg-emerald-500/15 text-emerald-600",
+  self_hosted: "bg-zinc-500/15 text-zinc-600",
+};
+
+export const useMeshColumns = (): ColumnDef<Mesh>[] => [
+  {
+    id: "q",
+    accessorKey: "q",
+    meta: { placeholder: "Search by name or slug…", variant: "text" },
+    enableHiding: false,
+    enableColumnFilter: true,
+  },
+  {
+    id: "name",
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Mesh" />
+    ),
+    cell: ({ row }) => (
+      <TurboLink
+        href={`/admin/meshes/${row.original.id}`}
+        className="group flex flex-col gap-0.5"
+      >
+        <span className="group-hover:text-primary truncate font-medium underline underline-offset-4">
+          {row.original.name}
+        </span>
+        <span className="text-muted-foreground font-mono text-xs">
+          {row.original.slug}
+        </span>
+      </TurboLink>
+    ),
+    enableHiding: false,
+  },
+  {
+    id: "owner",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Owner" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex flex-col gap-0.5">
+        <span className="truncate text-sm font-medium">
+          {row.original.ownerName ?? "—"}
+        </span>
+        <span className="text-muted-foreground truncate text-xs">
+          {row.original.ownerEmail ?? "—"}
+        </span>
+      </div>
+    ),
+    meta: { label: "Owner" },
+  },
+  {
+    id: "tier",
+    accessorKey: "tier",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Tier" />
+    ),
+    cell: ({ row }) => (
+      <Badge
+        variant="secondary"
+        className={TIER_COLORS[row.original.tier] ?? ""}
+      >
+        {row.original.tier}
+      </Badge>
+    ),
+    meta: {
+      label: "Tier",
+      variant: "multiSelect",
+      options: [
+        { label: "Free", value: "free" },
+        { label: "Pro", value: "pro" },
+        { label: "Team", value: "team" },
+        { label: "Enterprise", value: "enterprise" },
+      ],
+    },
+    enableColumnFilter: true,
+  },
+  {
+    id: "transport",
+    accessorKey: "transport",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Transport" />
+    ),
+    cell: ({ row }) => (
+      <Badge
+        variant="secondary"
+        className={TRANSPORT_COLORS[row.original.transport] ?? ""}
+      >
+        {row.original.transport}
+      </Badge>
+    ),
+    meta: {
+      label: "Transport",
+      variant: "multiSelect",
+      options: [
+        { label: "Managed", value: "managed" },
+        { label: "Tailscale", value: "tailscale" },
+        { label: "Self-hosted", value: "self_hosted" },
+      ],
+    },
+    enableColumnFilter: true,
+  },
+  {
+    id: "memberCount",
+    accessorKey: "memberCount",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Members" />
+    ),
+    cell: ({ row }) => (
+      <span className="font-mono text-sm">{row.original.memberCount}</span>
+    ),
+    meta: { label: "Members" },
+  },
+  {
+    id: "createdAt",
+    accessorKey: "createdAt",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Created" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-muted-foreground text-sm">
+        {new Date(row.original.createdAt).toLocaleDateString()}
+      </span>
+    ),
+    meta: { label: "Created" },
+  },
+];

apps/web/src/modules/admin/meshes/data-table/meshes-data-table.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { use } from "react";
+
+import { DataTable } from "@turbostarter/ui-web/data-table/data-table";
+import { DataTableToolbar } from "@turbostarter/ui-web/data-table/data-table-toolbar";
+
+import { useDataTable } from "~/modules/common/hooks/use-data-table";
+
+import { useMeshColumns } from "./columns";
+
+import type { GetMeshesResponse } from "@turbostarter/api/schema";
+
+interface Props {
+  readonly promise: Promise<Awaited<GetMeshesResponse>>;
+  readonly perPage: number;
+}
+
+export const MeshesDataTable = ({ promise, perPage }: Props) => {
+  const columns = useMeshColumns();
+  const { data, total } = use(promise);
+
+  const { table } = useDataTable({
+    persistance: "searchParams",
+    data,
+    columns,
+    pageCount: Math.ceil(total / perPage),
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnVisibility: { q: false },
+    },
+    shallow: false,
+    clearOnDefault: true,
+    enableRowSelection: false,
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <DataTableToolbar table={table} />
+      <DataTable table={table} />
+    </div>
+  );
+};

apps/web/src/modules/admin/sessions/data-table/columns.tsx

@@ -0,0 +1,137 @@
+import { Badge } from "@turbostarter/ui-web/badge";
+import { DataTableColumnHeader } from "@turbostarter/ui-web/data-table/data-table-column-header";
+
+import { TurboLink } from "~/modules/common/turbo-link";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import type { GetSessionsResponse } from "@turbostarter/api/schema";
+
+type Session = GetSessionsResponse["data"][number];
+
+const STATUS_COLORS: Record<string, string> = {
+  working: "bg-primary/15 text-primary",
+  idle: "bg-muted text-muted-foreground",
+  dnd: "bg-destructive/15 text-destructive",
+};
+
+export const useSessionColumns = (): ColumnDef<Session>[] => [
+  {
+    id: "q",
+    accessorKey: "q",
+    meta: { placeholder: "Search by peer, cwd, mesh…", variant: "text" },
+    enableHiding: false,
+    enableColumnFilter: true,
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Status" />
+    ),
+    cell: ({ row }) => {
+      const disconnected = row.original.disconnectedAt !== null;
+      return (
+        <div className="flex items-center gap-2">
+          <span
+            className={
+              "inline-block h-2 w-2 rounded-full " +
+              (disconnected
+                ? "bg-muted-foreground/40"
+                : row.original.status === "working"
+                  ? "bg-primary animate-pulse"
+                  : row.original.status === "dnd"
+                    ? "bg-destructive"
+                    : "bg-muted-foreground")
+            }
+          />
+          <Badge
+            variant="secondary"
+            className={
+              disconnected
+                ? "bg-muted/50 text-muted-foreground"
+                : (STATUS_COLORS[row.original.status] ?? "")
+            }
+          >
+            {disconnected ? "disconnected" : row.original.status}
+          </Badge>
+        </div>
+      );
+    },
+    meta: {
+      label: "Status",
+      variant: "multiSelect",
+      options: [
+        { label: "Working", value: "working" },
+        { label: "Idle", value: "idle" },
+        { label: "DND", value: "dnd" },
+      ],
+    },
+    enableColumnFilter: true,
+  },
+  {
+    id: "peer",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Peer" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex flex-col gap-0.5">
+        <span className="text-sm font-medium">
+          {row.original.displayName ?? "—"}
+        </span>
+        <span className="text-muted-foreground font-mono text-xs">
+          pid {row.original.pid}
+        </span>
+      </div>
+    ),
+    meta: { label: "Peer" },
+  },
+  {
+    id: "mesh",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Mesh" />
+    ),
+    cell: ({ row }) =>
+      row.original.meshId ? (
+        <TurboLink
+          href={`/admin/meshes/${row.original.meshId}`}
+          className="group flex flex-col gap-0.5"
+        >
+          <span className="group-hover:text-primary text-sm font-medium underline underline-offset-4">
+            {row.original.meshName ?? "—"}
+          </span>
+          <span className="text-muted-foreground font-mono text-xs">
+            {row.original.meshSlug ?? "—"}
+          </span>
+        </TurboLink>
+      ) : (
+        <span className="text-muted-foreground">—</span>
+      ),
+    meta: { label: "Mesh" },
+  },
+  {
+    id: "cwd",
+    accessorKey: "cwd",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="CWD" />
+    ),
+    cell: ({ row }) => (
+      <code className="text-muted-foreground max-w-xs truncate text-xs">
+        {row.original.cwd}
+      </code>
+    ),
+    meta: { label: "CWD" },
+  },
+  {
+    id: "lastPingAt",
+    accessorKey: "lastPingAt",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Last ping" />
+    ),
+    cell: ({ row }) => (
+      <span className="text-muted-foreground text-sm">
+        {new Date(row.original.lastPingAt).toLocaleTimeString()}
+      </span>
+    ),
+    meta: { label: "Last ping" },
+  },
+];

apps/web/src/modules/admin/sessions/data-table/sessions-data-table.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { use } from "react";
+
+import { DataTable } from "@turbostarter/ui-web/data-table/data-table";
+import { DataTableToolbar } from "@turbostarter/ui-web/data-table/data-table-toolbar";
+
+import { useDataTable } from "~/modules/common/hooks/use-data-table";
+
+import { useSessionColumns } from "./columns";
+
+import type { GetSessionsResponse } from "@turbostarter/api/schema";
+
+interface Props {
+  readonly promise: Promise<Awaited<GetSessionsResponse>>;
+  readonly perPage: number;
+}
+
+export const SessionsDataTable = ({ promise, perPage }: Props) => {
+  const columns = useSessionColumns();
+  const { data, total } = use(promise);
+
+  const { table } = useDataTable({
+    persistance: "searchParams",
+    data,
+    columns,
+    pageCount: Math.ceil(total / perPage),
+    initialState: {
+      sorting: [{ id: "lastPingAt", desc: true }],
+      columnVisibility: { q: false },
+    },
+    shallow: false,
+    clearOnDefault: true,
+    enableRowSelection: false,
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <DataTableToolbar table={table} />
+      <DataTable table={table} />
+    </div>
+  );
+};