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" },
+  },
+];