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/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>
+  );
+};