feat(web): refine hire agents pagination controls

Author: 0xTomDaniel

typescript/clients/web-ag-ui/apps/web/.env.example

@@ -10,6 +10,8 @@ NEXT_PUBLIC_DELEGATIONS_BYPASS=false
 
 # Optional: which agent is selected by default.
 # NEXT_PUBLIC_DEFAULT_AGENT_ID=agent-clmm
+# Optional: enable extra mock Hire Agents rows for pagination QA.
+NEXT_PUBLIC_ENABLE_HIRE_AGENTS_PAGINATION_MOCKS=false
 
 # Optional: polling intervals (ms) for sync refresh.
 # NEXT_PUBLIC_AGENT_LIST_SYNC_POLL_MS=15000

typescript/clients/web-ag-ui/apps/web/src/app/hire-agents/page.tsx

@@ -7,6 +7,10 @@ import { getAllAgents, getFeaturedAgents } from '@/config/agents';
 import { canonicalizeChainLabel } from '@/utils/iconResolution';
 import { mergeUniqueStrings, normalizeStringList } from '@/utils/agentCollections';
 
+const PAGINATION_QA_MOCK_COUNT = 27;
+const PAGINATION_QA_MOCKS_ENABLED =
+  process.env.NEXT_PUBLIC_ENABLE_HIRE_AGENTS_PAGINATION_MOCKS === 'true';
+
 export default function HireAgentsRoute() {
   const router = useRouter();
   const { agents: agentStates } = useAgentList();
@@ -63,6 +67,40 @@ export default function HireAgentsRoute() {
     };
   });
 
+  const paginationMockAgents: Agent[] = PAGINATION_QA_MOCKS_ENABLED
+    ? Array.from({ length: PAGINATION_QA_MOCK_COUNT }, (_, index) => {
+        const ordinal = index + 1;
+        const paddedOrdinal = ordinal.toString().padStart(2, '0');
+
+        return {
+          id: `agent-mock-${paddedOrdinal}`,
+          rank: registeredAgents.length + ordinal,
+          name: `Mock Strategy ${paddedOrdinal}`,
+          creator: 'Ember QA',
+          creatorVerified: false,
+          rating: undefined,
+          weeklyIncome: 150 + ordinal * 11,
+          apy: 4 + ((ordinal * 7) % 18),
+          users: 20 + ordinal * 3,
+          aum: 12_000 + ordinal * 1_250,
+          chains: ['Arbitrum'],
+          protocols: ordinal % 2 === 0 ? ['Camelot'] : ['Pendle'],
+          tokens: ordinal % 3 === 0 ? ['USDC', 'ARB'] : ['USDC', 'WETH'],
+          points: ordinal,
+          pointsTrend: 'up',
+          trendMultiplier: `${ordinal}x`,
+          avatar: '🤖',
+          avatarBg: 'linear-gradient(135deg, #334155 0%, #0f172a 100%)',
+          status: 'for_hire',
+          isActive: false,
+          isFeatured: false,
+          isLoaded: true,
+        };
+      })
+    : [];
+
+  const agentListWithMocks = [...agentList, ...paginationMockAgents];
+
   // Build featured agents list from config, prioritizing real data when available
   const featuredAgents: FeaturedAgent[] = featuredAgentConfigs.map((config) => {
     const listState = agentStates[config.id];
@@ -121,7 +159,7 @@ export default function HireAgentsRoute() {
 
   return (
     <HireAgentsPage
-      agents={agentList}
+      agents={agentListWithMocks}
       featuredAgents={featuredAgents}
       onHireAgent={handleHireAgent}
       onViewAgent={handleViewAgent}

typescript/clients/web-ag-ui/apps/web/src/components/AgentRuntimeProvider.tsx

@@ -104,7 +104,13 @@ export function AgentRuntimeProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <CopilotKit runtimeUrl="/api/copilotkit" useSingleEndpoint agent={agentId} threadId={threadId} key={threadId}>
+    <CopilotKit
+      runtimeUrl="/api/copilotkit"
+      useSingleEndpoint
+      agent={agentId}
+      threadId={threadId}
+      key={threadId}
+    >
       <AgentProvider agentId={agentId}>
         <AgentListRuntimeBridge />
         {children}

typescript/clients/web-ag-ui/apps/web/src/components/HireAgentsPage.tsx

@@ -152,9 +152,12 @@ export function HireAgentsPage({
 
   const itemsPerPage = 10;
   const totalPages = Math.max(1, Math.ceil(filteredAgents.length / itemsPerPage));
+  const shouldShowPagination = filteredAgents.length > itemsPerPage;
+  const safeCurrentPage = Math.min(Math.max(currentPage, 1), totalPages);
+
   const paginatedAgents = filteredAgents.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage,
+    (safeCurrentPage - 1) * itemsPerPage,
+    safeCurrentPage * itemsPerPage,
   );
 
   const iconDataSources = useMemo(() => [...agents, ...featuredAgents], [agents, featuredAgents]);
@@ -378,7 +381,13 @@ export function HireAgentsPage({
           />
 
           {/* Pagination */}
-          <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
+          {shouldShowPagination ? (
+            <Pagination
+              currentPage={safeCurrentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+            />
+          ) : null}
         </div>
       </div>
     </div>

typescript/clients/web-ag-ui/apps/web/src/components/ui/Pagination.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 
 interface PaginationProps {
   currentPage: number;
@@ -7,52 +7,57 @@ interface PaginationProps {
 }
 
 export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  const normalizedTotalPages =
+    Number.isFinite(totalPages) && totalPages > 0 ? Math.floor(totalPages) : 1;
+
+  if (normalizedTotalPages <= 1) {
+    return null;
+  }
+
+  const clampedCurrentPage = Math.min(Math.max(currentPage, 1), normalizedTotalPages);
+  const canGoPrevious = clampedCurrentPage > 1;
+  const canGoNext = clampedCurrentPage < normalizedTotalPages;
+
   return (
     <div className="flex items-center justify-end gap-4 mt-5">
       <span className="text-[13px] text-gray-400">
-        Page {currentPage} of {totalPages}
+        Page {clampedCurrentPage} of {normalizedTotalPages}
       </span>
       <div className="flex items-center gap-1 rounded-full border border-white/10 bg-white/5 p-1">
-        {/* First Page */}
         <button
           onClick={() => onPageChange(1)}
-          disabled={currentPage === 1}
+          disabled={!canGoPrevious}
           className="p-2 rounded-full hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           aria-label="First page"
         >
-          <ChevronLeft className="w-4 h-4" />
-          <ChevronLeft className="w-4 h-4 -ml-2" />
+          <ChevronsLeft className="w-4 h-4" />
         </button>
 
-        {/* Previous Page */}
         <button
-          onClick={() => onPageChange(Math.max(1, currentPage - 1))}
-          disabled={currentPage === 1}
+          onClick={() => onPageChange(Math.max(1, clampedCurrentPage - 1))}
+          disabled={!canGoPrevious}
           className="p-2 rounded-full hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           aria-label="Previous page"
         >
           <ChevronLeft className="w-4 h-4" />
         </button>
 
-        {/* Next Page */}
         <button
-          onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
-          disabled={currentPage === totalPages}
+          onClick={() => onPageChange(Math.min(normalizedTotalPages, clampedCurrentPage + 1))}
+          disabled={!canGoNext}
           className="p-2 rounded-full hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           aria-label="Next page"
         >
           <ChevronRight className="w-4 h-4" />
         </button>
 
-        {/* Last Page */}
         <button
-          onClick={() => onPageChange(totalPages)}
-          disabled={currentPage === totalPages}
+          onClick={() => onPageChange(normalizedTotalPages)}
+          disabled={!canGoNext}
           className="p-2 rounded-full hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           aria-label="Last page"
         >
-          <ChevronRight className="w-4 h-4" />
-          <ChevronRight className="w-4 h-4 -ml-2" />
+          <ChevronsRight className="w-4 h-4" />
         </button>
       </div>
     </div>

typescript/clients/web-ag-ui/apps/web/src/components/ui/Pagination.unit.test.ts

@@ -6,6 +6,9 @@ import { Pagination } from './Pagination';
 
 function getPaginationButtons(props: React.ComponentProps<typeof Pagination>) {
   const tree = Pagination(props);
+  if (tree === null) {
+    return [];
+  }
   const controls = (tree.props.children as React.ReactNode[])[1] as React.ReactElement<{
     children: React.ReactNode[];
   }>;
@@ -15,6 +18,18 @@ function getPaginationButtons(props: React.ComponentProps<typeof Pagination>) {
 }
 
 describe('Pagination', () => {
+  it('does not render pagination when there is only one page', () => {
+    const html = renderToStaticMarkup(
+      React.createElement(Pagination, {
+        currentPage: 1,
+        totalPages: 1,
+        onPageChange: () => {},
+      }),
+    );
+
+    expect(html).toBe('');
+  });
+
   it('renders pagination controls and current page text', () => {
     const html = renderToStaticMarkup(
       React.createElement(Pagination, {
@@ -78,4 +93,28 @@ describe('Pagination', () => {
     expect(onPageChange).toHaveBeenNthCalledWith(3, 5);
     expect(onPageChange).toHaveBeenNthCalledWith(4, 5);
   });
+
+  it('does not render when totalPages is invalid', () => {
+    const html = renderToStaticMarkup(
+      React.createElement(Pagination, {
+        currentPage: 1,
+        totalPages: Number.NaN,
+        onPageChange: () => {},
+      }),
+    );
+
+    expect(html).toBe('');
+  });
+
+  it('clamps currentPage to valid boundaries', () => {
+    const html = renderToStaticMarkup(
+      React.createElement(Pagination, {
+        currentPage: 99,
+        totalPages: 5,
+        onPageChange: () => {},
+      }),
+    );
+
+    expect(html).toContain('Page 5 of 5');
+  });
 });