From 7999fa5be0e2c35f8f5ca51ddfa0a544c982f3dd Mon Sep 17 00:00:00 2001
From: Rajat Garga <gargarajat@outlook.com>
Date: Mon, 1 Jun 2026 15:03:30 +0530
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20age-gate=20UI=20=E2=80=94=20admin?=
 =?UTF-8?q?=20review=20queue=20and=20per-repo=20config=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../interactions/operations/age-gate.spec.ts  |  35 ++
 .../(admin)/age-gate/__tests__/page.test.tsx  |  42 +++
 src/app/(app)/(admin)/age-gate/page.tsx       | 329 ++++++++++++++++++
 src/app/(app)/(protected)/webhooks/page.tsx   |   3 +
 .../_components/age-gate-settings.test.tsx    |  89 +++++
 .../_components/age-gate-settings.tsx         | 108 ++++++
 .../notifications-tab-content.test.tsx        |   4 +-
 .../_components/notifications-tab-content.tsx |  15 +
 .../_components/repo-settings-tab.tsx         |   7 +
 .../layout/__tests__/app-sidebar.test.tsx     |   1 +
 src/components/layout/app-sidebar.tsx         |   2 +
 src/lib/api/age-gate.ts                       |  88 +++++
 src/lib/api/index.ts                          |   1 +
 src/lib/api/webhooks.ts                       |   8 +-
 14 files changed, 729 insertions(+), 3 deletions(-)
 create mode 100644 e2e/suites/interactions/operations/age-gate.spec.ts
 create mode 100644 src/app/(app)/(admin)/age-gate/__tests__/page.test.tsx
 create mode 100644 src/app/(app)/(admin)/age-gate/page.tsx
 create mode 100644 src/app/(app)/repositories/_components/age-gate-settings.test.tsx
 create mode 100644 src/app/(app)/repositories/_components/age-gate-settings.tsx
 create mode 100644 src/lib/api/age-gate.ts

diff --git a/e2e/suites/interactions/operations/age-gate.spec.ts b/e2e/suites/interactions/operations/age-gate.spec.ts
new file mode 100644
index 00000000..8f804106
--- /dev/null
+++ b/e2e/suites/interactions/operations/age-gate.spec.ts
@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Age Gate Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/age-gate');
+  });
+
+  test('page loads with Age Gate heading', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: /age gate/i })).toBeVisible({
+      timeout: 10000,
+    });
+  });
+
+  test('pending and history tabs are visible', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: /age gate/i })).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(page.getByRole('tab', { name: /pending/i })).toBeVisible();
+    await expect(page.getByRole('tab', { name: /history/i })).toBeVisible();
+  });
+
+  test('pending tab shows table or empty state', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: /age gate/i })).toBeVisible({
+      timeout: 10000,
+    });
+
+    const tableHeader = page.getByText(/repository|package/i);
+    const emptyState = page.getByText(/no pending reviews/i);
+
+    const hasTable = await tableHeader.first().isVisible({ timeout: 5000 }).catch(() => false);
+    const hasEmpty = await emptyState.first().isVisible({ timeout: 5000 }).catch(() => false);
+
+    expect(hasTable || hasEmpty).toBeTruthy();
+  });
+});
diff --git a/src/app/(app)/(admin)/age-gate/__tests__/page.test.tsx b/src/app/(app)/(admin)/age-gate/__tests__/page.test.tsx
new file mode 100644
index 00000000..22a8e9b0
--- /dev/null
+++ b/src/app/(app)/(admin)/age-gate/__tests__/page.test.tsx
@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+
+import "@testing-library/jest-dom/vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import AgeGatePage from "../page";
+import ageGateApi from "@/lib/api/age-gate";
+
+vi.mock("@/providers/auth-provider", () => ({
+  useAuth: () => ({ user: { is_admin: true } }),
+}));
+
+vi.mock("@/lib/api/age-gate", () => ({
+  default: {
+    listReviews: vi.fn(),
+    approve: vi.fn(),
+    reject: vi.fn(),
+  },
+}));
+
+describe("AgeGatePage", () => {
+  beforeEach(() => {
+    vi.mocked(ageGateApi.listReviews).mockResolvedValue({
+      items: [],
+      pagination: { page: 1, per_page: 20, total: 0, total_pages: 0 },
+    });
+  });
+
+  it("renders pending tab and empty state", async () => {
+    const client = new QueryClient();
+    render(
+      <QueryClientProvider client={client}>
+        <AgeGatePage />
+      </QueryClientProvider>,
+    );
+
+    expect(await screen.findByRole("heading", { name: "Age Gate" })).toBeInTheDocument();
+    expect(await screen.findByText("No pending reviews")).toBeInTheDocument();
+  });
+});
diff --git a/src/app/(app)/(admin)/age-gate/page.tsx b/src/app/(app)/(admin)/age-gate/page.tsx
new file mode 100644
index 00000000..daaca869
--- /dev/null
+++ b/src/app/(app)/(admin)/age-gate/page.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  CheckCircle2,
+  XCircle,
+  Clock,
+  Hourglass,
+  Loader2,
+  Inbox,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useAuth } from "@/providers/auth-provider";
+import ageGateApi, { type AgeGateReview } from "@/lib/api/age-gate";
+import { mutationErrorToast } from "@/lib/error-utils";
+import { formatDate } from "@/lib/utils";
+
+import { PageHeader } from "@/components/common/page-header";
+import { DataTable, type DataTableColumn } from "@/components/common/data-table";
+import { EmptyState } from "@/components/common/empty-state";
+import { StatCard } from "@/components/common/stat-card";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+function StatusBadge({ status }: { status: AgeGateReview["status"] }) {
+  const colors =
+    status === "pending"
+      ? "border-amber-500/40 text-amber-700 dark:text-amber-400"
+      : status === "approved"
+        ? "border-emerald-500/40 text-emerald-700 dark:text-emerald-400"
+        : "border-red-500/40 text-red-700 dark:text-red-400";
+  return (
+    <Badge variant="outline" className={`border font-medium capitalize ${colors}`}>
+      {status}
+    </Badge>
+  );
+}
+
+function packageAgeDays(review: AgeGateReview): string {
+  if (!review.upstream_published_at) return "—";
+  const published = new Date(review.upstream_published_at).getTime();
+  const days = Math.max(0, Math.floor((Date.now() - published) / 86_400_000));
+  return `${days}d`;
+}
+
+export default function AgeGatePage() {
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const [activeTab, setActiveTab] = useState<"pending" | "history">("pending");
+  const [pendingPage, setPendingPage] = useState(1);
+  const [historyPage, setHistoryPage] = useState(1);
+  const perPage = 20;
+  const [actionDialog, setActionDialog] = useState<{
+    type: "approve" | "reject";
+    review: AgeGateReview;
+  } | null>(null);
+  const [actionReason, setActionReason] = useState("");
+
+  const { data: pendingData, isLoading: pendingLoading } = useQuery({
+    queryKey: ["age-gate", "reviews", "pending", pendingPage],
+    queryFn: () =>
+      ageGateApi.listReviews({
+        status: "pending",
+        page: pendingPage,
+        per_page: perPage,
+      }),
+    enabled: !!user?.is_admin,
+  });
+
+  const { data: historyData, isLoading: historyLoading } = useQuery({
+    queryKey: ["age-gate", "reviews", "history", historyPage],
+    queryFn: () =>
+      ageGateApi.listReviews({
+        page: historyPage,
+        per_page: perPage,
+      }),
+    enabled: !!user?.is_admin && activeTab === "history",
+  });
+
+  const pendingItems = pendingData?.items ?? [];
+  const historyItems =
+    historyData?.items.filter((item) => item.status !== "pending") ?? [];
+  const pendingTotal = pendingData?.pagination?.total ?? 0;
+
+  const approveMutation = useMutation({
+    mutationFn: ({ id, reason }: { id: string; reason?: string }) =>
+      ageGateApi.approve(id, reason),
+    onSuccess: () => {
+      toast.success("Package version approved");
+      queryClient.invalidateQueries({ queryKey: ["age-gate"] });
+      setActionDialog(null);
+      setActionReason("");
+    },
+    onError: mutationErrorToast("Failed to approve review"),
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: ({ id, reason }: { id: string; reason?: string }) =>
+      ageGateApi.reject(id, reason),
+    onSuccess: () => {
+      toast.success("Package version rejected");
+      queryClient.invalidateQueries({ queryKey: ["age-gate"] });
+      setActionDialog(null);
+      setActionReason("");
+    },
+    onError: mutationErrorToast("Failed to reject review"),
+  });
+
+  const isActioning = approveMutation.isPending || rejectMutation.isPending;
+
+  function handleAction() {
+    if (!actionDialog) return;
+    const reason = actionReason.trim() || undefined;
+    if (actionDialog.type === "approve") {
+      approveMutation.mutate({ id: actionDialog.review.id, reason });
+    } else {
+      rejectMutation.mutate({ id: actionDialog.review.id, reason });
+    }
+  }
+
+  if (!user?.is_admin) {
+    return (
+      <EmptyState
+        icon={Hourglass}
+        title="Admin access required"
+        description="You need administrator privileges to manage the age gate review queue."
+      />
+    );
+  }
+
+  const pendingColumns: DataTableColumn<AgeGateReview>[] = [
+    {
+      id: "repository",
+      header: "Repository",
+      accessor: (row) => row.repository_key,
+    },
+    {
+      id: "package",
+      header: "Package",
+      cell: (row) => (
+        <span className="font-mono text-sm">
+          {row.package_name}@{row.package_version}
+        </span>
+      ),
+    },
+    {
+      id: "published",
+      header: "Published",
+      cell: (row) =>
+        row.upstream_published_at ? formatDate(row.upstream_published_at) : "—",
+    },
+    {
+      id: "age",
+      header: "Age",
+      cell: (row) => packageAgeDays(row),
+    },
+    {
+      id: "requests",
+      header: "Requests",
+      accessor: (row) => row.request_count,
+    },
+    {
+      id: "requested",
+      header: "Last requested",
+      cell: (row) => formatDate(row.last_requested_at),
+    },
+    {
+      id: "actions",
+      header: "",
+      cell: (row) => (
+        <div className="flex justify-end gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setActionDialog({ type: "approve", review: row })}
+          >
+            Approve
+          </Button>
+          <Button
+            size="sm"
+            variant="destructive"
+            onClick={() => setActionDialog({ type: "reject", review: row })}
+          >
+            Reject
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const historyColumns: DataTableColumn<AgeGateReview>[] = [
+    ...pendingColumns.filter((c) => c.id !== "actions"),
+    {
+      id: "status",
+      header: "Status",
+      cell: (row) => <StatusBadge status={row.status} />,
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Age Gate"
+        description="Review proxy packages younger than the configured age threshold before they are served to clients."
+      />
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <StatCard
+          label="Pending reviews"
+          value={pendingTotal}
+          icon={Clock}
+          description="Awaiting admin decision"
+        />
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={(v) => setActiveTab(v as "pending" | "history")}
+      >
+        <TabsList>
+          <TabsTrigger value="pending">Pending</TabsTrigger>
+          <TabsTrigger value="history">History</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="pending" className="mt-6">
+          {pendingLoading ? (
+            <DataTable columns={pendingColumns} data={[]} loading />
+          ) : pendingItems.length === 0 ? (
+            <EmptyState
+              icon={Inbox}
+              title="No pending reviews"
+              description="Young package versions will appear here when clients request them through an age-gated proxy."
+            />
+          ) : (
+            <DataTable
+              columns={pendingColumns}
+              data={pendingItems}
+              total={pendingData?.pagination?.total}
+              page={pendingPage}
+              pageSize={perPage}
+              onPageChange={setPendingPage}
+              rowKey={(r) => r.id}
+            />
+          )}
+        </TabsContent>
+
+        <TabsContent value="history" className="mt-6">
+          {historyLoading ? (
+            <DataTable columns={historyColumns} data={[]} loading />
+          ) : historyItems.length === 0 ? (
+            <EmptyState
+              icon={Inbox}
+              title="No review history"
+              description="Approved and rejected reviews will appear here."
+            />
+          ) : (
+            <DataTable
+              columns={historyColumns}
+              data={historyItems}
+              total={historyData?.pagination?.total}
+              page={historyPage}
+              pageSize={perPage}
+              onPageChange={setHistoryPage}
+              rowKey={(r) => r.id}
+            />
+          )}
+        </TabsContent>
+      </Tabs>
+
+      <Dialog open={!!actionDialog} onOpenChange={() => setActionDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {actionDialog?.type === "approve" ? "Approve package" : "Reject package"}
+            </DialogTitle>
+            <DialogDescription>
+              {actionDialog?.review.package_name}@{actionDialog?.review.package_version}{" "}
+              in {actionDialog?.review.repository_key}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            <Label htmlFor="reason">Reason (optional)</Label>
+            <Textarea
+              id="reason"
+              value={actionReason}
+              onChange={(e) => setActionReason(e.target.value)}
+              placeholder="Notes for the audit trail"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setActionDialog(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant={actionDialog?.type === "reject" ? "destructive" : "default"}
+              disabled={isActioning}
+              onClick={handleAction}
+            >
+              {isActioning ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : actionDialog?.type === "approve" ? (
+                <>
+                  <CheckCircle2 className="size-4" /> Approve
+                </>
+              ) : (
+                <>
+                  <XCircle className="size-4" /> Reject
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/src/app/(app)/(protected)/webhooks/page.tsx b/src/app/(app)/(protected)/webhooks/page.tsx
index f48a2a18..487b7200 100644
--- a/src/app/(app)/(protected)/webhooks/page.tsx
+++ b/src/app/(app)/(protected)/webhooks/page.tsx
@@ -74,6 +74,9 @@ const WEBHOOK_EVENTS: { value: WebhookEvent; label: string }[] = [
   { value: "build_started", label: "Build Started" },
   { value: "build_completed", label: "Build Completed" },
   { value: "build_failed", label: "Build Failed" },
+  { value: "age_gate_queued", label: "Age Gate: Queued" },
+  { value: "age_gate_approved", label: "Age Gate: Approved" },
+  { value: "age_gate_rejected", label: "Age Gate: Rejected" },
 ];
 
 function eventColor(event: string): "green" | "red" | "blue" | "default" {
diff --git a/src/app/(app)/repositories/_components/age-gate-settings.test.tsx b/src/app/(app)/repositories/_components/age-gate-settings.test.tsx
new file mode 100644
index 00000000..f026dff1
--- /dev/null
+++ b/src/app/(app)/repositories/_components/age-gate-settings.test.tsx
@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+
+import "@testing-library/jest-dom/vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { AgeGateSettings } from "./age-gate-settings";
+import ageGateApi from "@/lib/api/age-gate";
+import type { Repository } from "@/types";
+
+vi.mock("@/lib/api/age-gate", () => ({
+  default: {
+    getRepoConfig: vi.fn(),
+    updateRepoConfig: vi.fn(),
+  },
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+const remoteNpmRepo: Repository = {
+  id: "repo-1",
+  key: "npm-proxy",
+  name: "npm proxy",
+  format: "npm",
+  repo_type: "remote",
+  is_public: true,
+  allow_anonymous_access: true,
+  storage_used_bytes: 0,
+  upstream_url: "https://registry.npmjs.org",
+  created_at: "2024-01-01T00:00:00Z",
+  updated_at: "2024-01-01T00:00:00Z",
+};
+
+describe("AgeGateSettings", () => {
+  beforeEach(() => {
+    vi.mocked(ageGateApi.getRepoConfig).mockResolvedValue({
+      repository_key: "npm-proxy",
+      enabled: false,
+      min_age_days: 7,
+    });
+    vi.mocked(ageGateApi.updateRepoConfig).mockResolvedValue({
+      repository_key: "npm-proxy",
+      enabled: true,
+      min_age_days: 14,
+    });
+  });
+
+  it("renders for remote npm repositories", async () => {
+    const client = new QueryClient();
+    render(
+      <QueryClientProvider client={client}>
+        <AgeGateSettings repository={remoteNpmRepo} />
+      </QueryClientProvider>,
+    );
+
+    expect(await screen.findByText("Age Gate")).toBeInTheDocument();
+    expect(screen.getByLabelText("Enable age gate")).toBeInTheDocument();
+  });
+
+  it("submits updated config", async () => {
+    const user = userEvent.setup();
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <AgeGateSettings repository={remoteNpmRepo} />
+      </QueryClientProvider>,
+    );
+
+    await screen.findByLabelText("Enable age gate");
+    await user.click(screen.getByLabelText("Enable age gate"));
+    const daysInput = await screen.findByLabelText("Minimum age (days)");
+    await user.clear(daysInput);
+    await user.type(daysInput, "14");
+    await user.click(screen.getAllByRole("button", { name: /save age gate settings/i })[0]);
+
+    expect(ageGateApi.updateRepoConfig).toHaveBeenCalledWith("npm-proxy", {
+      enabled: true,
+      min_age_days: 14,
+    });
+  });
+});
diff --git a/src/app/(app)/repositories/_components/age-gate-settings.tsx b/src/app/(app)/repositories/_components/age-gate-settings.tsx
new file mode 100644
index 00000000..ac5c3707
--- /dev/null
+++ b/src/app/(app)/repositories/_components/age-gate-settings.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import ageGateApi from "@/lib/api/age-gate";
+import { mutationErrorToast } from "@/lib/error-utils";
+import type { Repository } from "@/types/repository";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+interface AgeGateSettingsProps {
+  repository: Repository;
+}
+
+interface FormOverrides {
+  enabled?: boolean;
+  minAgeDays?: number;
+}
+
+export function AgeGateSettings({ repository }: AgeGateSettingsProps) {
+  const queryClient = useQueryClient();
+  const isEligible =
+    repository.repo_type === "remote" &&
+    (repository.format === "npm" || repository.format === "pypi");
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["repository", repository.key, "age-gate"],
+    queryFn: () => ageGateApi.getRepoConfig(repository.key),
+    enabled: isEligible,
+  });
+
+  // Local overrides track user edits. Undefined = fall back to server value.
+  const [overrides, setOverrides] = useState<FormOverrides>({});
+
+  const enabled = overrides.enabled ?? data?.enabled ?? false;
+  const minAgeDays = overrides.minAgeDays ?? data?.min_age_days ?? 7;
+
+  const saveMutation = useMutation({
+    mutationFn: () =>
+      ageGateApi.updateRepoConfig(repository.key, {
+        enabled,
+        min_age_days: minAgeDays,
+      }),
+    onSuccess: () => {
+      toast.success("Age gate settings saved");
+      setOverrides({});
+      queryClient.invalidateQueries({ queryKey: ["repository", repository.key] });
+      queryClient.invalidateQueries({ queryKey: ["repository", repository.key, "age-gate"] });
+    },
+    onError: mutationErrorToast("Failed to save age gate settings"),
+  });
+
+  if (!isEligible) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4 rounded-lg border p-4">
+      <div>
+        <h3 className="text-base font-semibold">Age Gate</h3>
+        <p className="text-sm text-muted-foreground">
+          Block upstream package versions younger than the configured threshold. Clients receive
+          the last known good version until a version is approved or crosses the age threshold.
+        </p>
+      </div>
+
+      <div className="flex items-center justify-between gap-4">
+        <div className="space-y-0.5">
+          <Label htmlFor="age-gate-enabled">Enable age gate</Label>
+          <p className="text-xs text-muted-foreground">
+            Applies to npm and PyPI proxy downloads for this repository.
+          </p>
+        </div>
+        <Switch
+          id="age-gate-enabled"
+          checked={enabled}
+          disabled={isLoading || saveMutation.isPending}
+          onCheckedChange={(v) => setOverrides((o) => ({ ...o, enabled: v }))}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="age-gate-days">Minimum age (days)</Label>
+        <Input
+          id="age-gate-days"
+          type="number"
+          min={1}
+          max={3650}
+          value={minAgeDays}
+          disabled={!enabled || isLoading || saveMutation.isPending}
+          onChange={(e) => setOverrides((o) => ({ ...o, minAgeDays: Number(e.target.value) }))}
+        />
+      </div>
+
+      <Button
+        type="button"
+        disabled={isLoading || saveMutation.isPending}
+        onClick={() => saveMutation.mutate()}
+      >
+        Save age gate settings
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(app)/repositories/_components/notifications-tab-content.test.tsx b/src/app/(app)/repositories/_components/notifications-tab-content.test.tsx
index e83a6ab2..5d7f9579 100644
--- a/src/app/(app)/repositories/_components/notifications-tab-content.test.tsx
+++ b/src/app/(app)/repositories/_components/notifications-tab-content.test.tsx
@@ -672,8 +672,8 @@ describe("NotificationsTabContent", () => {
   // WEBHOOK_EVENTS constant
   // -----------------------------------------------------------------------
 
-  it("exports WEBHOOK_EVENTS with 9 event types", () => {
-    expect(WEBHOOK_EVENTS).toHaveLength(9);
+  it("exports WEBHOOK_EVENTS with 12 event types", () => {
+    expect(WEBHOOK_EVENTS).toHaveLength(12);
     expect(WEBHOOK_EVENTS.map((e) => e.value)).toContain("artifact_uploaded");
     expect(WEBHOOK_EVENTS.map((e) => e.value)).toContain("build_completed");
     expect(WEBHOOK_EVENTS.map((e) => e.value)).toContain("repository_deleted");
diff --git a/src/app/(app)/repositories/_components/notifications-tab-content.tsx b/src/app/(app)/repositories/_components/notifications-tab-content.tsx
index bdf2d22a..80540cd3 100644
--- a/src/app/(app)/repositories/_components/notifications-tab-content.tsx
+++ b/src/app/(app)/repositories/_components/notifications-tab-content.tsx
@@ -94,6 +94,21 @@ export const WEBHOOK_EVENTS: { value: WebhookEvent; label: string; description:
     label: "User Deleted",
     description: "Triggered when a user account is removed",
   },
+  {
+    value: "age_gate_queued",
+    label: "Age Gate: Queued",
+    description: "Triggered when a young package version is queued for review",
+  },
+  {
+    value: "age_gate_approved",
+    label: "Age Gate: Approved",
+    description: "Triggered when an age gate review is approved",
+  },
+  {
+    value: "age_gate_rejected",
+    label: "Age Gate: Rejected",
+    description: "Triggered when an age gate review is rejected",
+  },
 ];
 
 // ---------------------------------------------------------------------------
diff --git a/src/app/(app)/repositories/_components/repo-settings-tab.tsx b/src/app/(app)/repositories/_components/repo-settings-tab.tsx
index c0b57989..2b2354e1 100644
--- a/src/app/(app)/repositories/_components/repo-settings-tab.tsx
+++ b/src/app/(app)/repositories/_components/repo-settings-tab.tsx
@@ -23,6 +23,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
+import { AgeGateSettings } from "./age-gate-settings";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -759,6 +760,12 @@ export function RepoSettingsTab({ repository }: RepoSettingsTabProps) {
 
       <Separator />
 
+      <section aria-labelledby="settings-age-gate-heading">
+        <AgeGateSettings repository={repository} />
+      </section>
+
+      <Separator />
+
       {/* -- Read-only Info Section -- */}
       <section aria-labelledby="settings-info-heading">
         <h3 id="settings-info-heading" className="text-base font-semibold mb-4">
diff --git a/src/components/layout/__tests__/app-sidebar.test.tsx b/src/components/layout/__tests__/app-sidebar.test.tsx
index c069f317..70045597 100644
--- a/src/components/layout/__tests__/app-sidebar.test.tsx
+++ b/src/components/layout/__tests__/app-sidebar.test.tsx
@@ -96,6 +96,7 @@ vi.mock("lucide-react", () => {
     FolderSearch: icon,
     ClipboardCheck: icon,
     Gauge: icon,
+    Hourglass: icon,
   };
 });
 
diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx
index 7f82648e..d131543c 100644
--- a/src/components/layout/app-sidebar.tsx
+++ b/src/components/layout/app-sidebar.tsx
@@ -36,6 +36,7 @@ import {
   FolderSearch,
   ClipboardCheck,
   Gauge,
+  Hourglass,
 } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "@/providers/auth-provider";
@@ -94,6 +95,7 @@ const securityItems: NavItem[] = [
 const operationsItems: NavItem[] = [
   { title: "Analytics", href: "/analytics", icon: BarChart3 },
   { title: "Approvals", href: "/approvals", icon: ClipboardCheck },
+  { title: "Age Gate", href: "/age-gate", icon: Hourglass },
   { title: "Health", href: "/system-health", icon: HeartPulse },
   { title: "Lifecycle", href: "/lifecycle", icon: Recycle },
   { title: "Monitoring", href: "/monitoring", icon: Activity },
diff --git a/src/lib/api/age-gate.ts b/src/lib/api/age-gate.ts
new file mode 100644
index 00000000..c6ae75e4
--- /dev/null
+++ b/src/lib/api/age-gate.ts
@@ -0,0 +1,88 @@
+import { apiFetch } from '@/lib/api/fetch';
+
+export interface AgeGateReview {
+  id: string;
+  repository_key: string;
+  package_name: string;
+  package_version: string;
+  upstream_published_at?: string | null;
+  status: 'pending' | 'approved' | 'rejected';
+  requested_at: string;
+  reviewed_by?: string | null;
+  reviewed_at?: string | null;
+  review_reason?: string | null;
+  request_count: number;
+  last_requested_at: string;
+}
+
+export interface AgeGateReviewListResponse {
+  items: AgeGateReview[];
+  pagination: {
+    page: number;
+    per_page: number;
+    total: number;
+    total_pages: number;
+  };
+}
+
+export interface AgeGateConfig {
+  repository_key: string;
+  enabled: boolean;
+  min_age_days: number;
+}
+
+const ageGateApi = {
+  listReviews: async (params?: {
+    repository_key?: string;
+    status?: string;
+    page?: number;
+    per_page?: number;
+  }): Promise<AgeGateReviewListResponse> => {
+    const searchParams = new URLSearchParams();
+    if (params?.repository_key) searchParams.set('repository_key', params.repository_key);
+    if (params?.status) searchParams.set('status', params.status);
+    if (params?.page) searchParams.set('page', String(params.page));
+    if (params?.per_page) searchParams.set('per_page', String(params.per_page));
+    const qs = searchParams.toString();
+    return apiFetch<AgeGateReviewListResponse>(
+      `/api/v1/admin/age-gate/reviews${qs ? `?${qs}` : ''}`,
+    );
+  },
+
+  getReview: async (id: string): Promise<AgeGateReview> => {
+    return apiFetch<AgeGateReview>(`/api/v1/admin/age-gate/reviews/${id}`);
+  },
+
+  approve: async (id: string, reason?: string): Promise<AgeGateReview> => {
+    return apiFetch<AgeGateReview>(`/api/v1/admin/age-gate/reviews/${id}/approve`, {
+      method: 'POST',
+      body: JSON.stringify({ reason }),
+    });
+  },
+
+  reject: async (id: string, reason?: string): Promise<AgeGateReview> => {
+    return apiFetch<AgeGateReview>(`/api/v1/admin/age-gate/reviews/${id}/reject`, {
+      method: 'POST',
+      body: JSON.stringify({ reason }),
+    });
+  },
+
+  getRepoConfig: async (repoKey: string): Promise<AgeGateConfig> => {
+    return apiFetch<AgeGateConfig>(`/api/v1/repositories/${encodeURIComponent(repoKey)}/age-gate`);
+  },
+
+  updateRepoConfig: async (
+    repoKey: string,
+    config: Pick<AgeGateConfig, 'enabled' | 'min_age_days'>,
+  ): Promise<AgeGateConfig> => {
+    return apiFetch<AgeGateConfig>(
+      `/api/v1/repositories/${encodeURIComponent(repoKey)}/age-gate`,
+      {
+        method: 'PUT',
+        body: JSON.stringify(config),
+      },
+    );
+  },
+};
+
+export default ageGateApi;
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 98fd44af..e83a1080 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -19,6 +19,7 @@ export { default as lifecycleApi } from './lifecycle';
 export { default as telemetryApi } from './telemetry';
 export { default as monitoringApi } from './monitoring';
 export { default as qualityGatesApi } from './quality-gates';
+export { default as ageGateApi } from './age-gate';
 
 export type { LoginCredentials } from './auth';
 export type { ListRepositoriesParams } from './repositories';
diff --git a/src/lib/api/webhooks.ts b/src/lib/api/webhooks.ts
index 824996fe..55a23894 100644
--- a/src/lib/api/webhooks.ts
+++ b/src/lib/api/webhooks.ts
@@ -34,7 +34,10 @@ export type WebhookEvent =
   | 'user_deleted'
   | 'build_started'
   | 'build_completed'
-  | 'build_failed';
+  | 'build_failed'
+  | 'age_gate_queued'
+  | 'age_gate_approved'
+  | 'age_gate_rejected';
 
 const WEBHOOK_EVENTS = new Set<WebhookEvent>([
   'artifact_uploaded',
@@ -46,6 +49,9 @@ const WEBHOOK_EVENTS = new Set<WebhookEvent>([
   'build_started',
   'build_completed',
   'build_failed',
+  'age_gate_queued',
+  'age_gate_approved',
+  'age_gate_rejected',
 ]);
 
 export interface Webhook {

From d1195b06627241a79f657230957bf4b37a66d9a4 Mon Sep 17 00:00:00 2001
From: Rajat Garga <gargarajat@outlook.com>
Date: Thu, 18 Jun 2026 16:14:12 +0530
Subject: [PATCH 2/2] =?UTF-8?q?fix(age-gate-ui):=20address=20review=20?=
 =?UTF-8?q?=E2=80=94=20a11y,=20history=20filter,=20min-age=20validation,?=
 =?UTF-8?q?=20encode=20review=20IDs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- page.tsx: per-row aria-label on Approve/Reject buttons, aria-live status region,
  server-side history filter (status=approved,rejected param), aria-hidden spinner icon
- age-gate-settings.tsx: fix build-breaking import (types/repository → types),
  min_age_days 1–3650 validation with inline error, disabled Save on invalid, live status region
- data-table.tsx: srOnlyHeader column option renders screen-reader-only header text
- age-gate.ts: encodeURIComponent on review IDs in getReview/approve/reject URLs
---
 src/app/(app)/(admin)/age-gate/page.tsx       | 39 +++++++++++++++----
 .../_components/age-gate-settings.tsx         | 30 ++++++++++++--
 src/components/common/data-table.tsx          | 15 +++++--
 src/lib/api/age-gate.ts                       | 26 ++++++++-----
 4 files changed, 87 insertions(+), 23 deletions(-)

diff --git a/src/app/(app)/(admin)/age-gate/page.tsx b/src/app/(app)/(admin)/age-gate/page.tsx
index daaca869..02c515e1 100644
--- a/src/app/(app)/(admin)/age-gate/page.tsx
+++ b/src/app/(app)/(admin)/age-gate/page.tsx
@@ -68,6 +68,9 @@ export default function AgeGatePage() {
     review: AgeGateReview;
   } | null>(null);
   const [actionReason, setActionReason] = useState("");
+  // Visually-hidden status announced to assistive tech after a review action,
+  // since toasts alone are not reliably surfaced by every screen reader.
+  const [actionStatus, setActionStatus] = useState("");
 
   const { data: pendingData, isLoading: pendingLoading } = useQuery({
     queryKey: ["age-gate", "reviews", "pending", pendingPage],
@@ -84,6 +87,9 @@ export default function AgeGatePage() {
     queryKey: ["age-gate", "reviews", "history", historyPage],
     queryFn: () =>
       ageGateApi.listReviews({
+        // Filter server-side so pagination totals match the rows shown; filtering
+        // client-side left "pending" rows out of a page while still counting them.
+        status: "approved,rejected",
         page: historyPage,
         per_page: perPage,
       }),
@@ -91,8 +97,7 @@ export default function AgeGatePage() {
   });
 
   const pendingItems = pendingData?.items ?? [];
-  const historyItems =
-    historyData?.items.filter((item) => item.status !== "pending") ?? [];
+  const historyItems = historyData?.items ?? [];
   const pendingTotal = pendingData?.pagination?.total ?? 0;
 
   const approveMutation = useMutation({
@@ -100,11 +105,15 @@ export default function AgeGatePage() {
       ageGateApi.approve(id, reason),
     onSuccess: () => {
       toast.success("Package version approved");
+      setActionStatus("Package version approved.");
       queryClient.invalidateQueries({ queryKey: ["age-gate"] });
       setActionDialog(null);
       setActionReason("");
     },
-    onError: mutationErrorToast("Failed to approve review"),
+    onError: (err) => {
+      setActionStatus("Failed to approve review.");
+      mutationErrorToast("Failed to approve review")(err);
+    },
   });
 
   const rejectMutation = useMutation({
@@ -112,11 +121,15 @@ export default function AgeGatePage() {
       ageGateApi.reject(id, reason),
     onSuccess: () => {
       toast.success("Package version rejected");
+      setActionStatus("Package version rejected.");
       queryClient.invalidateQueries({ queryKey: ["age-gate"] });
       setActionDialog(null);
       setActionReason("");
     },
-    onError: mutationErrorToast("Failed to reject review"),
+    onError: (err) => {
+      setActionStatus("Failed to reject review.");
+      mutationErrorToast("Failed to reject review")(err);
+    },
   });
 
   const isActioning = approveMutation.isPending || rejectMutation.isPending;
@@ -179,12 +192,14 @@ export default function AgeGatePage() {
     },
     {
       id: "actions",
-      header: "",
+      header: "Actions",
+      srOnlyHeader: true,
       cell: (row) => (
         <div className="flex justify-end gap-2">
           <Button
             size="sm"
             variant="outline"
+            aria-label={`Approve ${row.package_name}@${row.package_version}`}
             onClick={() => setActionDialog({ type: "approve", review: row })}
           >
             Approve
@@ -192,6 +207,7 @@ export default function AgeGatePage() {
           <Button
             size="sm"
             variant="destructive"
+            aria-label={`Reject ${row.package_name}@${row.package_version}`}
             onClick={() => setActionDialog({ type: "reject", review: row })}
           >
             Reject
@@ -217,6 +233,10 @@ export default function AgeGatePage() {
         description="Review proxy packages younger than the configured age threshold before they are served to clients."
       />
 
+      <p role="status" aria-live="polite" className="sr-only">
+        {actionStatus}
+      </p>
+
       <div className="grid gap-4 sm:grid-cols-3">
         <StatCard
           label="Pending reviews"
@@ -307,17 +327,20 @@ export default function AgeGatePage() {
             <Button
               variant={actionDialog?.type === "reject" ? "destructive" : "default"}
               disabled={isActioning}
+              aria-label={
+                actionDialog?.type === "approve" ? "Approve package" : "Reject package"
+              }
               onClick={handleAction}
             >
               {isActioning ? (
-                <Loader2 className="size-4 animate-spin" />
+                <Loader2 className="size-4 animate-spin" aria-hidden="true" />
               ) : actionDialog?.type === "approve" ? (
                 <>
-                  <CheckCircle2 className="size-4" /> Approve
+                  <CheckCircle2 className="size-4" aria-hidden="true" /> Approve
                 </>
               ) : (
                 <>
-                  <XCircle className="size-4" /> Reject
+                  <XCircle className="size-4" aria-hidden="true" /> Reject
                 </>
               )}
             </Button>
diff --git a/src/app/(app)/repositories/_components/age-gate-settings.tsx b/src/app/(app)/repositories/_components/age-gate-settings.tsx
index ac5c3707..8610e4af 100644
--- a/src/app/(app)/repositories/_components/age-gate-settings.tsx
+++ b/src/app/(app)/repositories/_components/age-gate-settings.tsx
@@ -5,7 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import ageGateApi from "@/lib/api/age-gate";
 import { mutationErrorToast } from "@/lib/error-utils";
-import type { Repository } from "@/types/repository";
+import type { Repository } from "@/types";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -35,10 +35,19 @@ export function AgeGateSettings({ repository }: AgeGateSettingsProps) {
 
   // Local overrides track user edits. Undefined = fall back to server value.
   const [overrides, setOverrides] = useState<FormOverrides>({});
+  // Visually-hidden status announced to assistive tech after a save attempt.
+  const [statusMessage, setStatusMessage] = useState("");
 
   const enabled = overrides.enabled ?? data?.enabled ?? false;
   const minAgeDays = overrides.minAgeDays ?? data?.min_age_days ?? 7;
 
+  // Mirror the backend CHECK (1..=3650) so invalid input is caught before the
+  // request, with an accessible inline error instead of a generic 400 toast.
+  const minAgeError =
+    !Number.isInteger(minAgeDays) || minAgeDays < 1 || minAgeDays > 3650
+      ? "Enter a whole number of days between 1 and 3650."
+      : null;
+
   const saveMutation = useMutation({
     mutationFn: () =>
       ageGateApi.updateRepoConfig(repository.key, {
@@ -47,11 +56,15 @@ export function AgeGateSettings({ repository }: AgeGateSettingsProps) {
       }),
     onSuccess: () => {
       toast.success("Age gate settings saved");
+      setStatusMessage("Age gate settings saved.");
       setOverrides({});
       queryClient.invalidateQueries({ queryKey: ["repository", repository.key] });
       queryClient.invalidateQueries({ queryKey: ["repository", repository.key, "age-gate"] });
     },
-    onError: mutationErrorToast("Failed to save age gate settings"),
+    onError: (err) => {
+      setStatusMessage("Failed to save age gate settings.");
+      mutationErrorToast("Failed to save age gate settings")(err);
+    },
   });
 
   if (!isEligible) {
@@ -92,17 +105,28 @@ export function AgeGateSettings({ repository }: AgeGateSettingsProps) {
           max={3650}
           value={minAgeDays}
           disabled={!enabled || isLoading || saveMutation.isPending}
+          aria-invalid={minAgeError ? true : undefined}
+          aria-describedby={minAgeError ? "age-gate-days-error" : undefined}
           onChange={(e) => setOverrides((o) => ({ ...o, minAgeDays: Number(e.target.value) }))}
         />
+        {minAgeError ? (
+          <p id="age-gate-days-error" role="alert" className="text-xs text-destructive">
+            {minAgeError}
+          </p>
+        ) : null}
       </div>
 
       <Button
         type="button"
-        disabled={isLoading || saveMutation.isPending}
+        disabled={isLoading || saveMutation.isPending || !!minAgeError}
         onClick={() => saveMutation.mutate()}
       >
         Save age gate settings
       </Button>
+
+      <p role="status" aria-live="polite" className="sr-only">
+        {statusMessage}
+      </p>
     </div>
   );
 }
diff --git a/src/components/common/data-table.tsx b/src/components/common/data-table.tsx
index a4b37f68..e2e8f4b6 100644
--- a/src/components/common/data-table.tsx
+++ b/src/components/common/data-table.tsx
@@ -22,6 +22,12 @@ export interface DataTableColumn<T> {
   sortable?: boolean;
   className?: string;
   headerClassName?: string;
+  /**
+   * Render the header text visually hidden but still exposed to screen readers.
+   * Use for utility columns (e.g. row actions) that should not show a visible
+   * label but must not leave an empty, nameless column header.
+   */
+  srOnlyHeader?: boolean;
 }
 
 type SortDir = "asc" | "desc";
@@ -96,6 +102,9 @@ export function DataTable<T>({
 
   const totalItems = total ?? data.length;
 
+  const renderHeaderLabel = (col: DataTableColumn<T>) =>
+    col.srOnlyHeader ? <span className="sr-only">{col.header}</span> : col.header;
+
   if (loading) {
     return (
       <div className="space-y-3" role="status" aria-busy="true" aria-live="polite">
@@ -106,7 +115,7 @@ export function DataTable<T>({
               <TableRow>
                 {columns.map((col) => (
                   <TableHead key={col.id} className={col.headerClassName}>
-                    {col.header}
+                    {renderHeaderLabel(col)}
                   </TableHead>
                 ))}
               </TableRow>
@@ -136,7 +145,7 @@ export function DataTable<T>({
             <TableRow>
               {columns.map((col) => (
                 <TableHead key={col.id} className={col.headerClassName}>
-                  {col.header}
+                  {renderHeaderLabel(col)}
                 </TableHead>
               ))}
             </TableRow>
@@ -189,7 +198,7 @@ export function DataTable<T>({
                         )}
                       </button>
                     ) : (
-                      col.header
+                      renderHeaderLabel(col)
                     )}
                   </TableHead>
                 );
diff --git a/src/lib/api/age-gate.ts b/src/lib/api/age-gate.ts
index c6ae75e4..f4c50820 100644
--- a/src/lib/api/age-gate.ts
+++ b/src/lib/api/age-gate.ts
@@ -50,21 +50,29 @@ const ageGateApi = {
   },
 
   getReview: async (id: string): Promise<AgeGateReview> => {
-    return apiFetch<AgeGateReview>(`/api/v1/admin/age-gate/reviews/${id}`);
+    return apiFetch<AgeGateReview>(
+      `/api/v1/admin/age-gate/reviews/${encodeURIComponent(id)}`,
+    );
   },
 
   approve: async (id: string, reason?: string): Promise<AgeGateReview> => {
-    return apiFetch<AgeGateReview>(`/api/v1/admin/age-gate/reviews/${id}/approve`, {
-      method: 'POST',
-      body: JSON.stringify({ reason }),
-    });
+    return apiFetch<AgeGateReview>(
+      `/api/v1/admin/age-gate/reviews/${encodeURIComponent(id)}/approve`,
+      {
+        method: 'POST',
+        body: JSON.stringify({ reason }),
+      },
+    );
   },
 
   reject: async (id: string, reason?: string): Promise<AgeGateReview> => {
-    return apiFetch<AgeGateReview>(`/api/v1/admin/age-gate/reviews/${id}/reject`, {
-      method: 'POST',
-      body: JSON.stringify({ reason }),
-    });
+    return apiFetch<AgeGateReview>(
+      `/api/v1/admin/age-gate/reviews/${encodeURIComponent(id)}/reject`,
+      {
+        method: 'POST',
+        body: JSON.stringify({ reason }),
+      },
+    );
   },
 
   getRepoConfig: async (repoKey: string): Promise<AgeGateConfig> => {