feat: paginate company invite history

packages/shared/src/index.ts

@@ -311,6 +311,7 @@ export type {
   CompanyMemberRecord,
   CompanyMembersResponse,
   CompanyMembership,
+  CompanyInviteListResponse,
   CompanyInviteRecord,
   PrincipalPermissionGrant,
   Invite,

packages/shared/src/types/access.ts

@@ -85,6 +85,11 @@ export interface CompanyInviteRecord extends Invite {
   relatedJoinRequestId: string | null;
 }
 
+export interface CompanyInviteListResponse {
+  invites: CompanyInviteRecord[];
+  nextOffset: number | null;
+}
+
 export interface JoinRequest {
   id: string;
   inviteId: string;

packages/shared/src/types/index.ts

@@ -171,6 +171,7 @@ export type {
   CompanyMemberRecord,
   CompanyMembersResponse,
   CompanyMembership,
+  CompanyInviteListResponse,
   CompanyInviteRecord,
   PrincipalPermissionGrant,
   Invite,

packages/shared/src/validators/access.ts

@@ -52,6 +52,8 @@ export type ListJoinRequestsQuery = z.infer<typeof listJoinRequestsQuerySchema>;
 
 export const listCompanyInvitesQuerySchema = z.object({
   state: z.enum(["active", "revoked", "accepted", "expired"]).optional(),
+  limit: z.coerce.number().int().min(1).max(100).optional().default(20),
+  offset: z.coerce.number().int().min(0).optional().default(0),
 });
 
 export type ListCompanyInvitesQuery = z.infer<typeof listCompanyInvitesQuerySchema>;

server/src/__tests__/invite-list-route.test.ts

@@ -0,0 +1,164 @@
+import { randomUUID } from "node:crypto";
+import express from "express";
+import request from "supertest";
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { companies, createDb, invites, joinRequests } from "@paperclipai/db";
+import { getEmbeddedPostgresTestSupport, startEmbeddedPostgresTestDatabase } from "./helpers/embedded-postgres.js";
+import { accessRoutes } from "../routes/access.js";
+import { errorHandler } from "../middleware/index.js";
+
+vi.mock("../services/index.js", () => ({
+  accessService: () => ({
+    isInstanceAdmin: vi.fn(),
+    canUser: vi.fn(),
+    hasPermission: vi.fn(),
+  }),
+  agentService: () => ({
+    getById: vi.fn(),
+  }),
+  boardAuthService: () => ({
+    createChallenge: vi.fn(),
+    resolveBoardAccess: vi.fn(),
+    assertCurrentBoardKey: vi.fn(),
+    revokeBoardApiKey: vi.fn(),
+  }),
+  deduplicateAgentName: vi.fn(),
+  logActivity: vi.fn(),
+  notifyHireApproved: vi.fn(),
+}));
+
+const embeddedPostgresSupport = await getEmbeddedPostgresTestSupport();
+const describeEmbeddedPostgres = embeddedPostgresSupport.supported ? describe : describe.skip;
+
+if (!embeddedPostgresSupport.supported) {
+  console.warn(
+    `Skipping embedded Postgres invite list route tests on this host: ${embeddedPostgresSupport.reason ?? "unsupported environment"}`,
+  );
+}
+
+describeEmbeddedPostgres("GET /companies/:companyId/invites", () => {
+  let db!: ReturnType<typeof createDb>;
+  let tempDb: Awaited<ReturnType<typeof startEmbeddedPostgresTestDatabase>> | null = null;
+  let companyId!: string;
+
+  beforeAll(async () => {
+    tempDb = await startEmbeddedPostgresTestDatabase("paperclip-invite-list-route-");
+    db = createDb(tempDb.connectionString);
+  }, 20_000);
+
+  beforeEach(async () => {
+    companyId = randomUUID();
+    await db.insert(companies).values({
+      id: companyId,
+      name: "Paperclip",
+      issuePrefix: `T${companyId.replace(/-/g, "").slice(0, 6).toUpperCase()}`,
+      requireBoardApprovalForNewAgents: false,
+    });
+  });
+
+  afterEach(async () => {
+    await db.delete(joinRequests);
+    await db.delete(invites);
+    await db.delete(companies);
+  });
+
+  afterAll(async () => {
+    await tempDb?.cleanup();
+  });
+
+  function createApp(currentCompanyId: string) {
+    const app = express();
+    app.use(express.json());
+    app.use((req, _res, next) => {
+      (req as any).actor = {
+        type: "board",
+        source: "local_implicit",
+        userId: null,
+        companyIds: [currentCompanyId],
+      };
+      next();
+    });
+    app.use(
+      "/api",
+      accessRoutes(db, {
+        deploymentMode: "local_trusted",
+        deploymentExposure: "private",
+        bindHost: "127.0.0.1",
+        allowedHostnames: [],
+      }),
+    );
+    app.use(errorHandler);
+    return app;
+  }
+
+  it("returns invite history in descending pages with nextOffset", async () => {
+    const inviteOneId = randomUUID();
+    const inviteTwoId = randomUUID();
+    const inviteThreeId = randomUUID();
+
+    await db.insert(invites).values([
+      {
+        id: inviteOneId,
+        companyId,
+        inviteType: "company_join",
+        tokenHash: "invite-token-1",
+        allowedJoinTypes: "human",
+        defaultsPayload: { humanRole: "viewer" },
+        expiresAt: new Date("2026-04-20T00:00:00.000Z"),
+        createdAt: new Date("2026-04-10T00:00:00.000Z"),
+        updatedAt: new Date("2026-04-10T00:00:00.000Z"),
+      },
+      {
+        id: inviteTwoId,
+        companyId,
+        inviteType: "company_join",
+        tokenHash: "invite-token-2",
+        allowedJoinTypes: "human",
+        defaultsPayload: { humanRole: "operator" },
+        expiresAt: new Date("2026-04-21T00:00:00.000Z"),
+        createdAt: new Date("2026-04-11T00:00:00.000Z"),
+        updatedAt: new Date("2026-04-11T00:00:00.000Z"),
+      },
+      {
+        id: inviteThreeId,
+        companyId,
+        inviteType: "company_join",
+        tokenHash: "invite-token-3",
+        allowedJoinTypes: "human",
+        defaultsPayload: { humanRole: "admin" },
+        expiresAt: new Date("2026-04-22T00:00:00.000Z"),
+        createdAt: new Date("2026-04-12T00:00:00.000Z"),
+        updatedAt: new Date("2026-04-12T00:00:00.000Z"),
+      },
+    ]);
+
+    await db.insert(joinRequests).values({
+      id: randomUUID(),
+      inviteId: inviteThreeId,
+      companyId,
+      requestType: "human",
+      status: "pending_approval",
+      requestIp: "127.0.0.1",
+      requestEmailSnapshot: "person@example.com",
+      createdAt: new Date("2026-04-12T00:05:00.000Z"),
+      updatedAt: new Date("2026-04-12T00:05:00.000Z"),
+    });
+
+    const app = createApp(companyId);
+
+    const firstPage = await request(app).get(`/api/companies/${companyId}/invites?limit=2`);
+
+    expect(firstPage.status).toBe(200);
+    expect(firstPage.body.invites).toHaveLength(2);
+    expect(firstPage.body.invites.map((invite: { id: string }) => invite.id)).toEqual([inviteThreeId, inviteTwoId]);
+    expect(firstPage.body.invites[0].relatedJoinRequestId).toBeTruthy();
+    expect(firstPage.body.nextOffset).toBe(2);
+
+    const secondPage = await request(app).get(`/api/companies/${companyId}/invites?limit=2&offset=2`);
+
+    expect(secondPage.status).toBe(200);
+    expect(secondPage.body.invites).toHaveLength(1);
+    expect(secondPage.body.invites[0].id).toBe(inviteOneId);
+    expect(secondPage.body.nextOffset).toBeNull();
+  });
+});

server/src/routes/access.ts

@@ -9,7 +9,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { Router } from "express";
 import type { Request } from "express";
-import { and, desc, eq, inArray, isNull } from "drizzle-orm";
+import { and, desc, eq, gt, inArray, isNotNull, isNull, lte } from "drizzle-orm";
 import type { Db } from "@paperclipai/db";
 import {
   assets,
@@ -1033,25 +1033,74 @@ async function loadCompanyMemberRecords(db: Db, companyId: string) {
   }));
 }
 
-async function loadCompanyInviteRecords(db: Db, companyId: string) {
+function inviteStateWhereClause(
+  state: "active" | "accepted" | "expired" | "revoked" | undefined,
+) {
+  const now = new Date();
+  switch (state) {
+    case "active":
+      return and(
+        isNull(invites.revokedAt),
+        isNull(invites.acceptedAt),
+        gt(invites.expiresAt, now),
+      );
+    case "accepted":
+      return isNotNull(invites.acceptedAt);
+    case "expired":
+      return and(
+        isNull(invites.revokedAt),
+        isNull(invites.acceptedAt),
+        lte(invites.expiresAt, now),
+      );
+    case "revoked":
+      return isNotNull(invites.revokedAt);
+    default:
+      return undefined;
+  }
+}
+
+async function loadCompanyInviteRecords(
+  db: Db,
+  companyId: string,
+  options: {
+    state?: "active" | "accepted" | "expired" | "revoked";
+    limit: number;
+    offset: number;
+  },
+) {
+  const whereClause = inviteStateWhereClause(options.state);
   const rows = await db
     .select()
     .from(invites)
-    .where(eq(invites.companyId, companyId))
-    .orderBy(desc(invites.createdAt));
+    .where(whereClause ? and(eq(invites.companyId, companyId), whereClause) : eq(invites.companyId, companyId))
+    .orderBy(desc(invites.createdAt))
+    .limit(options.limit + 1)
+    .offset(options.offset);
+  const hasMore = rows.length > options.limit;
+  const visibleRows = hasMore ? rows.slice(0, options.limit) : rows;
   const userIds = [
     ...new Set(
-      rows
+      visibleRows
         .map((invite) => invite.invitedByUserId)
         .filter((value): value is string => Boolean(value)),
     ),
   ];
   const [userMap, joinRows, companyName] = await Promise.all([
     loadUsersById(db, userIds),
-    db
-      .select({ id: joinRequests.id, inviteId: joinRequests.inviteId })
-      .from(joinRequests)
-      .where(eq(joinRequests.companyId, companyId)),
+    visibleRows.length
+      ? db
+          .select({ id: joinRequests.id, inviteId: joinRequests.inviteId })
+          .from(joinRequests)
+          .where(
+            and(
+              eq(joinRequests.companyId, companyId),
+              inArray(
+                joinRequests.inviteId,
+                visibleRows.map((invite) => invite.id),
+              ),
+            ),
+          )
+      : Promise.resolve([]),
     db
       .select({ name: companies.name })
       .from(companies)
@@ -1062,17 +1111,20 @@ async function loadCompanyInviteRecords(db: Db, companyId: string) {
     joinRows.map((row: { inviteId: string; id: string }) => [row.inviteId, row.id]),
   );
 
-  return rows.map((invite) => ({
-    ...invite,
-    companyName,
-    humanRole: extractInviteHumanRole(invite),
-    inviteMessage: extractInviteMessage(invite),
-    state: inviteState(invite),
-    invitedByUser: invite.invitedByUserId
-      ? userMap.get(invite.invitedByUserId) ?? null
-      : null,
-    relatedJoinRequestId: joinRequestIdByInviteId.get(invite.id) ?? null,
-  }));
+  return {
+    invites: visibleRows.map((invite) => ({
+      ...invite,
+      companyName,
+      humanRole: extractInviteHumanRole(invite),
+      inviteMessage: extractInviteMessage(invite),
+      state: inviteState(invite),
+      invitedByUser: invite.invitedByUserId
+        ? userMap.get(invite.invitedByUserId) ?? null
+        : null,
+      relatedJoinRequestId: joinRequestIdByInviteId.get(invite.id) ?? null,
+    })),
+    nextOffset: hasMore ? options.offset + options.limit : null,
+  };
 }
 
 async function loadJoinRequestRecords(db: Db, companyId: string) {
@@ -3110,12 +3162,8 @@ export function accessRoutes(
     const companyId = req.params.companyId as string;
     await assertCompanyPermission(req, companyId, "users:invite");
     const query = listCompanyInvitesQuerySchema.parse(req.query);
-    const invitesForCompany = await loadCompanyInviteRecords(db, companyId);
-    res.json(
-      invitesForCompany.filter((invite) =>
-        query.state ? invite.state === query.state : true,
-      ),
-    );
+    const invitesForCompany = await loadCompanyInviteRecords(db, companyId, query);
+    res.json(invitesForCompany);
   });
 
   router.get("/companies/:companyId/join-requests", async (req, res) => {

ui/src/api/access.ts

@@ -156,6 +156,11 @@ export type CompanyInviteRecord = {
   relatedJoinRequestId: string | null;
 };
 
+export type CompanyInviteListResponse = {
+  invites: CompanyInviteRecord[];
+  nextOffset: number | null;
+};
+
 export type CompanyJoinRequest = JoinRequest & {
   requesterUser: { id: string; email: string | null; name: string | null; image: string | null } | null;
   approvedByUser: { id: string; email: string | null; name: string | null; image: string | null } | null;
@@ -216,6 +221,19 @@ export type CurrentBoardAccess = {
   keyId: string | null;
 };
 
+function buildInviteListQuery(options: {
+  state?: "active" | "revoked" | "accepted" | "expired";
+  limit?: number;
+  offset?: number;
+}) {
+  const params = new URLSearchParams();
+  if (options.state) params.set("state", options.state);
+  if (options.limit) params.set("limit", String(options.limit));
+  if (options.offset) params.set("offset", String(options.offset));
+  const query = params.toString();
+  return query ? `?${query}` : "";
+}
+
 export const accessApi = {
   createCompanyInvite: (
     companyId: string,
@@ -251,10 +269,14 @@ export const accessApi = {
 
   listInvites: (
     companyId: string,
-    state?: "active" | "revoked" | "accepted" | "expired",
+    options: {
+      state?: "active" | "revoked" | "accepted" | "expired";
+      limit?: number;
+      offset?: number;
+    } = {},
   ) =>
-    api.get<CompanyInviteRecord[]>(
-      `/companies/${companyId}/invites${state ? `?state=${state}` : ""}`,
+    api.get<CompanyInviteListResponse>(
+      `/companies/${companyId}/invites${buildInviteListQuery(options)}`,
     ),
 
   revokeInvite: (inviteId: string) => api.post(`/invites/${inviteId}/revoke`, {}),

ui/src/lib/queryKeys.ts

@@ -88,8 +88,8 @@ export const queryKeys = {
     issues: (approvalId: string) => ["approvals", "issues", approvalId] as const,
   },
   access: {
-    invites: (companyId: string, state: string = "all") =>
-      ["access", "invites", companyId, state] as const,
+    invites: (companyId: string, state: string = "all", limit: number = 20) =>
+      ["access", "invites", companyId, state, limit] as const,
     joinRequests: (companyId: string, status: string = "pending_approval") =>
       ["access", "join-requests", companyId, status] as const,
     companyMembers: (companyId: string) => ["access", "company-members", companyId] as const,

ui/src/pages/CompanyInvites.test.tsx

@@ -16,7 +16,7 @@ const clipboardWriteTextMock = vi.hoisted(() => vi.fn());
 
 vi.mock("@/api/access", () => ({
   accessApi: {
-    listInvites: (companyId: string) => listInvitesMock(companyId),
+    listInvites: (companyId: string, options?: unknown) => listInvitesMock(companyId, options),
     createCompanyInvite: (companyId: string, input: unknown) =>
       createCompanyInviteMock(companyId, input),
     revokeInvite: (inviteId: string) => revokeInviteMock(inviteId),
@@ -50,63 +50,47 @@ async function flushReact() {
 
 describe("CompanyInvites", () => {
   let container: HTMLDivElement;
+  const inviteHistory = Array.from({ length: 25 }, (_, index) => {
+    const inviteNumber = 25 - index;
+    const isActive = inviteNumber === 25;
+    return {
+      id: `invite-${inviteNumber}`,
+      companyId: "company-1",
+      inviteType: "company_join",
+      tokenHash: `hash-${inviteNumber}`,
+      allowedJoinTypes: "human",
+      defaultsPayload: null,
+      expiresAt: "2026-04-20T00:00:00.000Z",
+      invitedByUserId: "user-1",
+      revokedAt: null,
+      acceptedAt: isActive ? null : "2026-04-11T00:00:00.000Z",
+      createdAt: `2026-04-${String(inviteNumber).padStart(2, "0")}T00:00:00.000Z`,
+      updatedAt: `2026-04-${String(inviteNumber).padStart(2, "0")}T00:00:00.000Z`,
+      companyName: "Paperclip",
+      humanRole: isActive ? "operator" : "viewer",
+      inviteMessage: null,
+      state: isActive ? "active" : "accepted",
+      invitedByUser: {
+        id: "user-1",
+        name: `Board User ${inviteNumber}`,
+        email: `board${inviteNumber}@paperclip.local`,
+        image: null,
+      },
+      relatedJoinRequestId: isActive ? "join-1" : null,
+    };
+  });
 
   beforeEach(() => {
     container = document.createElement("div");
     document.body.appendChild(container);
 
-    listInvitesMock.mockResolvedValue([
-      {
-        id: "invite-1",
-        companyId: "company-1",
-        inviteType: "company_join",
-        tokenHash: "hash-1",
-        allowedJoinTypes: "human",
-        defaultsPayload: null,
-        expiresAt: "2026-04-20T00:00:00.000Z",
-        invitedByUserId: "user-1",
-        revokedAt: null,
-        acceptedAt: null,
-        createdAt: "2026-04-10T00:00:00.000Z",
-        updatedAt: "2026-04-10T00:00:00.000Z",
-        companyName: "Paperclip",
-        humanRole: "operator",
-        inviteMessage: null,
-        state: "active",
-        invitedByUser: {
-          id: "user-1",
-          name: "Board User",
-          email: "board@paperclip.local",
-          image: null,
-        },
-        relatedJoinRequestId: "join-1",
-      },
-      {
-        id: "invite-2",
-        companyId: "company-1",
-        inviteType: "company_join",
-        tokenHash: "hash-2",
-        allowedJoinTypes: "human",
-        defaultsPayload: null,
-        expiresAt: "2026-04-20T00:00:00.000Z",
-        invitedByUserId: "user-1",
-        revokedAt: null,
-        acceptedAt: "2026-04-11T00:00:00.000Z",
-        createdAt: "2026-04-09T00:00:00.000Z",
-        updatedAt: "2026-04-11T00:00:00.000Z",
-        companyName: "Paperclip",
-        humanRole: "viewer",
-        inviteMessage: null,
-        state: "accepted",
-        invitedByUser: {
-          id: "user-1",
-          name: "Board User",
-          email: "board@paperclip.local",
-          image: null,
-        },
-        relatedJoinRequestId: null,
-      },
-    ]);
+    listInvitesMock.mockImplementation((_companyId: string, options?: { limit?: number; offset?: number }) => {
+      const limit = options?.limit ?? 20;
+      const offset = options?.offset ?? 0;
+      const invites = inviteHistory.slice(offset, offset + limit);
+      const nextOffset = offset + invites.length < inviteHistory.length ? offset + invites.length : null;
+      return Promise.resolve({ invites, nextOffset });
+    });
 
     createCompanyInviteMock.mockResolvedValue({
       inviteUrl: "https://paperclip.local/invite/new-token",
@@ -151,8 +135,11 @@ describe("CompanyInvites", () => {
     expect(container.textContent).toContain("Company Invites");
     expect(container.textContent).toContain("Create invite");
     expect(container.textContent).toContain("Invite history");
-    expect(container.textContent).toContain("Board User");
+    expect(container.textContent).toContain("Board User 25");
+    expect(container.textContent).toContain("Board User 6");
+    expect(container.textContent).not.toContain("Board User 5");
     expect(container.textContent).toContain("Review request");
+    expect(container.textContent).toContain("View more");
     expect(container.textContent).not.toContain("Human or agent");
     expect(container.textContent).not.toContain("Invite message");
     expect(container.textContent).not.toContain("Latest generated invite");
@@ -165,6 +152,22 @@ describe("CompanyInvites", () => {
     expect(container.textContent).toContain("Each invite link is single-use.");
     expect(container.textContent).toContain("Can create agents, invite users, assign tasks, and approve join requests.");
     expect(container.textContent).toContain("Everything in Admin, plus managing members and permission grants.");
+    expect(listInvitesMock).toHaveBeenCalledWith("company-1", { limit: 20, offset: 0 });
+
+    const viewMoreButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "View more",
+    );
+
+    await act(async () => {
+      viewMoreButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    await flushReact();
+    await flushReact();
+
+    expect(listInvitesMock).toHaveBeenCalledWith("company-1", { limit: 20, offset: 20 });
+    expect(container.textContent).toContain("Board User 5");
+    expect(container.textContent).toContain("Board User 1");
+    expect(container.textContent).not.toContain("View more");
 
     await act(async () => {
       const viewerRadio = container.querySelector('input[type="radio"][value="viewer"]') as HTMLInputElement | null;
@@ -218,7 +221,7 @@ describe("CompanyInvites", () => {
     });
     await flushReact();
 
-    expect(revokeInviteMock).toHaveBeenCalledWith("invite-1");
+    expect(revokeInviteMock).toHaveBeenCalledWith("invite-25");
 
     await act(async () => {
       root.unmount();

ui/src/pages/CompanyInvites.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Check, ExternalLink, MailPlus } from "lucide-react";
 import { accessApi } from "@/api/access";
 import { ApiError } from "@/api/client";
@@ -37,6 +37,8 @@ const inviteRoleOptions = [
   },
 ] as const;
 
+const INVITE_HISTORY_PAGE_SIZE = 20;
+
 export function CompanyInvites() {
   const { selectedCompany, selectedCompanyId } = useCompany();
   const { setBreadcrumbs } = useBreadcrumbs();
@@ -80,11 +82,22 @@ export function CompanyInvites() {
     ]);
   }, [selectedCompany?.name, setBreadcrumbs]);
 
-  const invitesQuery = useQuery({
-    queryKey: queryKeys.access.invites(selectedCompanyId ?? "", "all"),
-    queryFn: () => accessApi.listInvites(selectedCompanyId!),
+  const inviteHistoryQueryKey = queryKeys.access.invites(selectedCompanyId ?? "", "all", INVITE_HISTORY_PAGE_SIZE);
+  const invitesQuery = useInfiniteQuery({
+    queryKey: inviteHistoryQueryKey,
+    queryFn: ({ pageParam }) =>
+      accessApi.listInvites(selectedCompanyId!, {
+        limit: INVITE_HISTORY_PAGE_SIZE,
+        offset: pageParam,
+      }),
     enabled: !!selectedCompanyId,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => lastPage.nextOffset ?? undefined,
   });
+  const inviteHistory = useMemo(
+    () => invitesQuery.data?.pages.flatMap((page) => page.invites) ?? [],
+    [invitesQuery.data?.pages],
+  );
 
   const createInviteMutation = useMutation({
     mutationFn: () =>
@@ -98,7 +111,7 @@ export function CompanyInvites() {
       setLatestInviteCopied(false);
       const copied = await copyInviteUrl(invite.inviteUrl);
 
-      await queryClient.invalidateQueries({ queryKey: queryKeys.access.invites(selectedCompanyId!, "all") });
+      await queryClient.invalidateQueries({ queryKey: inviteHistoryQueryKey });
       pushToast({
         title: "Invite created",
         body: copied ? "Invite ready below and copied to clipboard." : "Invite ready below.",
@@ -117,7 +130,7 @@ export function CompanyInvites() {
   const revokeMutation = useMutation({
     mutationFn: (inviteId: string) => accessApi.revokeInvite(inviteId),
     onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: queryKeys.access.invites(selectedCompanyId!, "all") });
+      await queryClient.invalidateQueries({ queryKey: inviteHistoryQueryKey });
       pushToast({ title: "Invite revoked", tone: "success" });
     },
     onError: (error) => {
@@ -265,68 +278,82 @@ export function CompanyInvites() {
           </Link>
         </div>
 
-        {(invitesQuery.data ?? []).length === 0 ? (
+        {inviteHistory.length === 0 ? (
           <div className="border-t border-border px-5 py-8 text-sm text-muted-foreground">
             No invites have been created for this company yet.
           </div>
         ) : (
-          <div className="overflow-x-auto border-t border-border">
-            <table className="min-w-full text-left text-sm">
-              <thead>
-                <tr className="border-b border-border">
-                  <th className="px-5 py-3 font-medium text-muted-foreground">State</th>
-                  <th className="px-5 py-3 font-medium text-muted-foreground">Role</th>
-                  <th className="px-5 py-3 font-medium text-muted-foreground">Invited by</th>
-                  <th className="px-5 py-3 font-medium text-muted-foreground">Created</th>
-                  <th className="px-5 py-3 font-medium text-muted-foreground">Join request</th>
-                  <th className="px-5 py-3 text-right font-medium text-muted-foreground">Action</th>
-                </tr>
-              </thead>
-              <tbody>
-                {invitesQuery.data!.map((invite) => (
-                  <tr key={invite.id} className="border-b border-border last:border-b-0">
-                    <td className="px-5 py-3 align-top">
-                      <span className="inline-flex rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
-                        {formatInviteState(invite.state)}
-                      </span>
-                    </td>
-                    <td className="px-5 py-3 align-top">{invite.humanRole ?? "—"}</td>
-                    <td className="px-5 py-3 align-top">
-                      <div>{invite.invitedByUser?.name || invite.invitedByUser?.email || "Unknown inviter"}</div>
-                      {invite.invitedByUser?.email && invite.invitedByUser.name ? (
-                        <div className="text-xs text-muted-foreground">{invite.invitedByUser.email}</div>
-                      ) : null}
-                    </td>
-                    <td className="px-5 py-3 align-top text-muted-foreground">
-                      {new Date(invite.createdAt).toLocaleString()}
-                    </td>
-                    <td className="px-5 py-3 align-top">
-                      {invite.relatedJoinRequestId ? (
-                        <Link to="/inbox/requests" className="underline underline-offset-4">
-                          Review request
-                        </Link>
-                      ) : (
-                        <span className="text-muted-foreground">—</span>
-                      )}
-                    </td>
-                    <td className="px-5 py-3 text-right align-top">
-                      {invite.state === "active" ? (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => revokeMutation.mutate(invite.id)}
-                          disabled={revokeMutation.isPending}
-                        >
-                          Revoke
-                        </Button>
-                      ) : (
-                        <span className="text-xs text-muted-foreground">Inactive</span>
-                      )}
-                    </td>
+          <div className="border-t border-border">
+            <div className="overflow-x-auto">
+              <table className="min-w-full text-left text-sm">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="px-5 py-3 font-medium text-muted-foreground">State</th>
+                    <th className="px-5 py-3 font-medium text-muted-foreground">Role</th>
+                    <th className="px-5 py-3 font-medium text-muted-foreground">Invited by</th>
+                    <th className="px-5 py-3 font-medium text-muted-foreground">Created</th>
+                    <th className="px-5 py-3 font-medium text-muted-foreground">Join request</th>
+                    <th className="px-5 py-3 text-right font-medium text-muted-foreground">Action</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {inviteHistory.map((invite) => (
+                    <tr key={invite.id} className="border-b border-border last:border-b-0">
+                      <td className="px-5 py-3 align-top">
+                        <span className="inline-flex rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
+                          {formatInviteState(invite.state)}
+                        </span>
+                      </td>
+                      <td className="px-5 py-3 align-top">{invite.humanRole ?? "—"}</td>
+                      <td className="px-5 py-3 align-top">
+                        <div>{invite.invitedByUser?.name || invite.invitedByUser?.email || "Unknown inviter"}</div>
+                        {invite.invitedByUser?.email && invite.invitedByUser.name ? (
+                          <div className="text-xs text-muted-foreground">{invite.invitedByUser.email}</div>
+                        ) : null}
+                      </td>
+                      <td className="px-5 py-3 align-top text-muted-foreground">
+                        {new Date(invite.createdAt).toLocaleString()}
+                      </td>
+                      <td className="px-5 py-3 align-top">
+                        {invite.relatedJoinRequestId ? (
+                          <Link to="/inbox/requests" className="underline underline-offset-4">
+                            Review request
+                          </Link>
+                        ) : (
+                          <span className="text-muted-foreground">—</span>
+                        )}
+                      </td>
+                      <td className="px-5 py-3 text-right align-top">
+                        {invite.state === "active" ? (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => revokeMutation.mutate(invite.id)}
+                            disabled={revokeMutation.isPending}
+                          >
+                            Revoke
+                          </Button>
+                        ) : (
+                          <span className="text-xs text-muted-foreground">Inactive</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {invitesQuery.hasNextPage ? (
+              <div className="flex justify-center border-t border-border px-5 py-4">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => invitesQuery.fetchNextPage()}
+                  disabled={invitesQuery.isFetchingNextPage}
+                >
+                  {invitesQuery.isFetchingNextPage ? "Loading more…" : "View more"}
+                </Button>
+              </div>
+            ) : null}
           </div>
         )}
       </section>