From 1d6fc37be7bce1a83c70cd793ddb98dd9d456757 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 2 Jun 2026 17:26:57 +0200
Subject: [PATCH 01/11] feat(templates): mirror paginated templates endpoints
 in dashboard-api spec

Regenerates the dashboard-api client types for the cursor-paginated
GET /templates (single `sort` enum) and GET /templates/{templateID}.
---
 spec/openapi.dashboard-api.yaml               | 35 ++++++++++++++
 .../shared/contracts/dashboard-api.types.ts   | 48 +++++++++++++++++++
 2 files changed, 83 insertions(+)

diff --git a/spec/openapi.dashboard-api.yaml b/spec/openapi.dashboard-api.yaml
index 1bb233b49..036b07cd5 100644
--- a/spec/openapi.dashboard-api.yaml
+++ b/spec/openapi.dashboard-api.yaml
@@ -121,6 +121,13 @@ components:
       description: Team slug to resolve.
       schema:
         type: string
+    templateID:
+      name: templateID
+      in: path
+      required: true
+      description: Identifier of the template.
+      schema:
+        type: string
     templates_limit:
       name: limit
       in: query
@@ -1359,6 +1366,34 @@ paths:
         "500":
           $ref: "#/components/responses/500"
 
+  /templates/{templateID}:
+    get:
+      summary: Get a single team template
+      description: Returns a single template owned by the team (or a default template, unless the team is on a dedicated cluster).
+      tags: [templates]
+      security:
+        - Supabase1TokenAuth: []
+          Supabase2TeamAuth: []
+        - AuthProviderBearerAuth: []
+          AuthProviderTeamAuth: []
+      parameters:
+        - $ref: "#/components/parameters/templateID"
+      responses:
+        "200":
+          description: Successfully returned the template.
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/TeamTemplate"
+        "401":
+          $ref: "#/components/responses/401"
+        "403":
+          $ref: "#/components/responses/403"
+        "404":
+          $ref: "#/components/responses/404"
+        "500":
+          $ref: "#/components/responses/500"
+
   /templates/defaults:
     get:
       summary: List default templates
diff --git a/src/core/shared/contracts/dashboard-api.types.ts b/src/core/shared/contracts/dashboard-api.types.ts
index e4f40b24c..457af44b1 100644
--- a/src/core/shared/contracts/dashboard-api.types.ts
+++ b/src/core/shared/contracts/dashboard-api.types.ts
@@ -811,6 +811,52 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/templates/{templateID}': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /**
+     * Get a single team template
+     * @description Returns a single template owned by the team (or a default template, unless the team is on a dedicated cluster).
+     */
+    get: {
+      parameters: {
+        query?: never
+        header?: never
+        path: {
+          /** @description Identifier of the template. */
+          templateID: components['parameters']['templateID']
+        }
+        cookie?: never
+      }
+      requestBody?: never
+      responses: {
+        /** @description Successfully returned the template. */
+        200: {
+          headers: {
+            [name: string]: unknown
+          }
+          content: {
+            'application/json': components['schemas']['TeamTemplate']
+          }
+        }
+        401: components['responses']['401']
+        403: components['responses']['403']
+        404: components['responses']['404']
+        500: components['responses']['500']
+      }
+    }
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
   '/templates/defaults': {
     parameters: {
       query?: never
@@ -1223,6 +1269,8 @@ export interface components {
     userId: string
     /** @description Team slug to resolve. */
     teamSlug: string
+    /** @description Identifier of the template. */
+    templateID: string
     /** @description Maximum number of items to return per page. */
     templates_limit: number
     /** @description Cursor returned by the previous list response in `{sort}|{value}|{templateID}` format. Rejected if its sort does not match the request. */

From 538774dc01d0ff5eb4aac5fb4b2ad831ae73157d Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 2 Jun 2026 17:26:57 +0200
Subject: [PATCH 02/11] feat(templates): paginated listTeamTemplates repo
 method and router input

getTemplates accepts cursor/limit/filter/search and a single `sort` token
and returns a paginated page via the dashboard-api endpoint. The full-list
getTeamTemplates (used by the terminal page) is kept unchanged.
---
 src/core/modules/templates/models.ts          | 27 +++++++
 .../modules/templates/repository.server.ts    | 80 ++++++++++++++++++-
 src/core/server/api/routers/templates.ts      | 43 ++++++++--
 3 files changed, 144 insertions(+), 6 deletions(-)

diff --git a/src/core/modules/templates/models.ts b/src/core/modules/templates/models.ts
index aa08bebab..72f46e3e2 100644
--- a/src/core/modules/templates/models.ts
+++ b/src/core/modules/templates/models.ts
@@ -23,3 +23,30 @@ export type DefaultTemplate = Template & {
   isDefault: true
   defaultDescription?: string
 }
+
+export type TemplatesSort =
+  | 'name_asc'
+  | 'name_desc'
+  | 'cpu_count_asc'
+  | 'cpu_count_desc'
+  | 'memory_mb_asc'
+  | 'memory_mb_desc'
+  | 'created_at_asc'
+  | 'created_at_desc'
+  | 'updated_at_asc'
+  | 'updated_at_desc'
+
+export interface ListTeamTemplatesOptions {
+  cursor?: string
+  limit?: number
+  cpuCount?: number
+  memoryMB?: number
+  public?: boolean
+  search?: string
+  sort?: TemplatesSort
+}
+
+export interface ListTeamTemplatesResult {
+  data: Array<Template | DefaultTemplate>
+  nextCursor: string | null
+}
diff --git a/src/core/modules/templates/repository.server.ts b/src/core/modules/templates/repository.server.ts
index 680d2fbcb..2f771472b 100644
--- a/src/core/modules/templates/repository.server.ts
+++ b/src/core/modules/templates/repository.server.ts
@@ -7,7 +7,12 @@ import {
   MOCK_DEFAULT_TEMPLATES_DATA,
   MOCK_TEMPLATES_DATA,
 } from '@/configs/mock-data'
-import type { DefaultTemplate, Template } from '@/core/modules/templates/models'
+import type {
+  DefaultTemplate,
+  ListTeamTemplatesOptions,
+  ListTeamTemplatesResult,
+  Template,
+} from '@/core/modules/templates/models'
 import {
   type AuthUserEmailResolver,
   getAuthUserEmailsById,
@@ -30,6 +35,9 @@ type TemplatesRepositoryDeps = {
 
 export interface TeamTemplatesRepository {
   getTeamTemplates(): Promise<RepoResult<{ templates: Template[] }>>
+  listTeamTemplates(
+    options: ListTeamTemplatesOptions
+  ): Promise<RepoResult<ListTeamTemplatesResult>>
   deleteTemplate(templateId: string): Promise<RepoResult<{ success: true }>>
   updateTemplateVisibility(
     templateId: string,
@@ -87,6 +95,76 @@ export function createTemplatesRepository(
         ),
       })
     },
+    async listTeamTemplates(options) {
+      if (USE_MOCK_DATA) {
+        return ok({ data: MOCK_TEMPLATES_DATA, nextCursor: null })
+      }
+
+      const res = await deps.apiClient.GET('/templates', {
+        params: {
+          query: {
+            cursor: options.cursor,
+            limit: options.limit,
+            cpuCount: options.cpuCount,
+            memoryMB: options.memoryMB,
+            public: options.public,
+            search: options.search,
+            sort: options.sort,
+          },
+        },
+        headers: {
+          ...deps.authHeaders(scope.accessToken, scope.teamId),
+        },
+      })
+
+      if (!res.response.ok || res.error) {
+        return err(
+          repoErrorFromHttp(
+            res.response.status,
+            res.error?.message ?? 'Failed to fetch templates',
+            res.error
+          )
+        )
+      }
+
+      const data = (res.data?.data ?? []).map(
+        (t): Template | DefaultTemplate => {
+          const base: Template = {
+            templateID: t.templateID,
+            buildID: t.buildID,
+            cpuCount: t.cpuCount,
+            memoryMB: t.memoryMB,
+            diskSizeMB: t.diskSizeMB ?? 0,
+            public: t.public,
+            aliases: t.aliases,
+            names: t.names,
+            createdAt: t.createdAt,
+            updatedAt: t.updatedAt,
+            // Email resolution is deferred while the Supabase auth migration is
+            // in progress; the endpoint returns only the creator id for now.
+            createdBy: t.createdBy
+              ? { id: t.createdBy.id, email: t.createdBy.email ?? '' }
+              : null,
+            lastSpawnedAt: t.lastSpawnedAt ?? null,
+            spawnCount: t.spawnCount,
+            buildCount: t.buildCount,
+            envdVersion: t.envdVersion ?? '',
+          }
+
+          if (t.isDefault) {
+            return {
+              ...base,
+              isDefault: true,
+              defaultDescription: t.defaultDescription ?? undefined,
+            }
+          }
+
+          return base
+        }
+      )
+
+      return ok({ data, nextCursor: res.data?.nextCursor ?? null })
+    },
     async deleteTemplate(templateId) {
       const res = await deps.infraClient.DELETE('/templates/{templateID}', {
         params: {
diff --git a/src/core/server/api/routers/templates.ts b/src/core/server/api/routers/templates.ts
index d063c251c..1883ed49e 100644
--- a/src/core/server/api/routers/templates.ts
+++ b/src/core/server/api/routers/templates.ts
@@ -36,11 +36,44 @@ const teamTemplatesRepositoryProcedure = protectedTeamProcedure.use(
 export const templatesRouter = createTRPCRouter({
   // QUERIES
 
-  getTemplates: teamTemplatesRepositoryProcedure.query(async ({ ctx }) => {
-    const result = await ctx.templatesRepository.getTeamTemplates()
-    if (!result.ok) throwTRPCErrorFromRepoError(result.error)
-    return result.data
-  }),
+  getTemplates: teamTemplatesRepositoryProcedure
+    .input(
+      z.object({
+        cursor: z.string().optional(),
+        limit: z.number().int().min(1).max(100).default(50),
+        cpuCount: z.number().int().positive().optional(),
+        memoryMB: z.number().int().positive().optional(),
+        public: z.boolean().optional(),
+        search: z.string().optional(),
+        sort: z
+          .enum([
+            'name_asc',
+            'name_desc',
+            'cpu_count_asc',
+            'cpu_count_desc',
+            'memory_mb_asc',
+            'memory_mb_desc',
+            'created_at_asc',
+            'created_at_desc',
+            'updated_at_asc',
+            'updated_at_desc',
+          ])
+          .default('updated_at_desc'),
+      })
+    )
+    .query(async ({ ctx, input }) => {
+      const result = await ctx.templatesRepository.listTeamTemplates({
+        cursor: input.cursor,
+        limit: input.limit,
+        cpuCount: input.cpuCount,
+        memoryMB: input.memoryMB,
+        public: input.public,
+        search: input.search,
+        sort: input.sort,
+      })
+      if (!result.ok) throwTRPCErrorFromRepoError(result.error)
+      return result.data
+    }),
 
   getDefaultTemplatesCached: templatesRepositoryProcedure.query(
     async ({ ctx }) => {

From d332fc9f31ee7a3dceabb5b9fa2f45db51060b5b Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 2 Jun 2026 17:26:57 +0200
Subject: [PATCH 03/11] feat(templates): infinite-scroll templates list with
 server-side sort/filter

Switches the list to useSuspenseInfiniteQuery, flattens pages, auto-loads
the next page on scroll, and maps the active column+direction to the single
server `sort` token (react-table runs in manual mode).
---
 .../dashboard/templates/list/header.tsx       |  33 ++---
 .../dashboard/templates/list/table-body.tsx   |  40 ++++-
 .../dashboard/templates/list/table-config.tsx |  43 +-----
 .../dashboard/templates/list/table.tsx        | 137 +++++++++---------
 4 files changed, 121 insertions(+), 132 deletions(-)

diff --git a/src/features/dashboard/templates/list/header.tsx b/src/features/dashboard/templates/list/header.tsx
index 1b0f9120c..0eb2ce93d 100644
--- a/src/features/dashboard/templates/list/header.tsx
+++ b/src/features/dashboard/templates/list/header.tsx
@@ -1,6 +1,7 @@
 import type { Table } from '@tanstack/react-table'
 import { Suspense } from 'react'
 import type { Template } from '@/core/modules/templates/models'
+import { useTemplateTableStore } from './stores/table-store'
 import TemplatesTableFilters from './table-filters'
 import { SearchInput } from './table-search'
 
@@ -11,13 +12,16 @@ interface TemplatesHeaderProps {
 export default function TemplatesHeader({ table }: TemplatesHeaderProps) {
   'use no memo'
 
-  const { columnFilters, globalFilter } = table.getState()
-  const showFilteredRowCount = columnFilters.length > 0 || Boolean(globalFilter)
+  const { globalFilter, cpuCount, memoryMB, isPublic } = useTemplateTableStore()
+  const isFiltered =
+    Boolean(globalFilter) ||
+    cpuCount !== undefined ||
+    memoryMB !== undefined ||
+    isPublic !== undefined
 
-  const totalCount = table.options.data.length
-  const filteredCount = showFilteredRowCount
-    ? table.getFilteredRowModel().rows.length
-    : totalCount
+  // With server-side pagination we only know how many rows are currently
+  // loaded, not the grand total.
+  const loadedCount = table.options.data.length
 
   return (
     <div className="flex min-w-0 flex-wrap items-start gap-1 sm:items-center">
@@ -33,17 +37,12 @@ export default function TemplatesHeader({ table }: TemplatesHeaderProps) {
       <div className="hidden w-2 shrink-0 sm:block" aria-hidden="true" />
 
       <span className="prose-label-highlight h-9 flex w-full min-w-0 items-center gap-1 uppercase sm:w-auto">
-        {showFilteredRowCount ? (
-          <>
-            <span className="text-fg">
-              {filteredCount} {filteredCount === 1 ? 'result' : 'results'}
-            </span>
-            <span className="text-fg-tertiary"> · </span>
-            <span className="text-fg-tertiary">{totalCount} total</span>
-          </>
-        ) : (
-          <span className="text-fg-tertiary">{totalCount} total</span>
-        )}
+        <span className="text-fg">
+          {loadedCount} {loadedCount === 1 ? 'template' : 'templates'}
+        </span>
+        {isFiltered ? (
+          <span className="text-fg-tertiary"> · filtered</span>
+        ) : null}
       </span>
     </div>
   )
diff --git a/src/features/dashboard/templates/list/table-body.tsx b/src/features/dashboard/templates/list/table-body.tsx
index 4d9f74b80..d3b32cc56 100644
--- a/src/features/dashboard/templates/list/table-body.tsx
+++ b/src/features/dashboard/templates/list/table-body.tsx
@@ -1,5 +1,5 @@
 import { flexRender, type Table } from '@tanstack/react-table'
-import type { RefObject } from 'react'
+import { type RefObject, useEffect } from 'react'
 import type { Template } from '@/core/modules/templates/models'
 import { useVirtualRows } from '@/lib/hooks/use-virtual-rows'
 import { DataTableBody, DataTableCell, DataTableRow } from '@/ui/data-table'
@@ -11,25 +11,34 @@ import { useTemplateTableStore } from './stores/table-store'
 const ROW_HEIGHT_PX = 32
 const VIRTUAL_OVERSCAN = 8
 const INITIAL_FALLBACK_ROW_COUNT = 100
+const PREFETCH_THRESHOLD = 8
 
 interface TemplatesTableBodyProps {
   templates: Template[] | undefined
   table: Table<Template>
   scrollRef: RefObject<HTMLDivElement | null>
+  hasNextPage: boolean
+  isFetchingNextPage: boolean
+  fetchNextPage: () => void
 }
 
 export function TemplatesTableBody({
   templates,
   table,
   scrollRef,
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
 }: TemplatesTableBodyProps) {
   'use no memo'
 
-  const resetFilters = useTemplateTableStore((state) => state.resetFilters)
+  const { resetFilters, globalFilter, cpuCount, memoryMB, isPublic } =
+    useTemplateTableStore()
 
   const centerRows = table.getCenterRows()
   const {
     virtualRows,
+    virtualizer,
     totalHeight: virtualizedTotalHeight,
     paddingTop: virtualPaddingTop,
   } = useVirtualRows<Template>({
@@ -39,6 +48,26 @@ export function TemplatesTableBody({
     overscan: VIRTUAL_OVERSCAN,
   })
 
+  const virtualItems = virtualizer.getVirtualItems()
+  const lastVisibleIndex = virtualItems[virtualItems.length - 1]?.index ?? -1
+
+  // Load the next page as the user scrolls near the bottom of the list.
+  useEffect(() => {
+    if (
+      hasNextPage &&
+      !isFetchingNextPage &&
+      lastVisibleIndex >= centerRows.length - PREFETCH_THRESHOLD
+    ) {
+      fetchNextPage()
+    }
+  }, [
+    hasNextPage,
+    isFetchingNextPage,
+    lastVisibleIndex,
+    centerRows.length,
+    fetchNextPage,
+  ])
+
   const rows =
     virtualRows.length > 0
       ? virtualRows
@@ -47,9 +76,10 @@ export function TemplatesTableBody({
   const isEmpty = templates && centerRows.length === 0
 
   const hasFilter =
-    Object.values(table.getState().columnFilters).some(
-      (filter) => filter.value !== undefined
-    ) || table.getState().globalFilter !== ''
+    Boolean(globalFilter) ||
+    cpuCount !== undefined ||
+    memoryMB !== undefined ||
+    isPublic !== undefined
 
   if (isEmpty) {
     if (hasFilter) {
diff --git a/src/features/dashboard/templates/list/table-config.tsx b/src/features/dashboard/templates/list/table-config.tsx
index a2f051eab..f9003362c 100644
--- a/src/features/dashboard/templates/list/table-config.tsx
+++ b/src/features/dashboard/templates/list/table-config.tsx
@@ -1,12 +1,8 @@
 'use client'
 
-import { rankItem } from '@tanstack/match-sorter-utils'
 import {
   type ColumnDef,
-  type FilterFn,
   getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
   type TableOptions,
 } from '@tanstack/react-table'
 import posthog from 'posthog-js'
@@ -24,33 +20,6 @@ import {
   VisibilityCell,
 } from './table-cells'
 
-// FILTERS
-export const fuzzyFilter: FilterFn<unknown> = (
-  row,
-  columnId,
-  value,
-  addMeta
-) => {
-  // Skip undefined values
-  if (!value || !value.length) return true
-
-  const searchValue = value.toLowerCase()
-  const rowValue = row.getValue(columnId)
-
-  // Handle null/undefined row values
-  if (rowValue == null) return false
-
-  // Convert row value to string and lowercase for comparison
-  const itemStr = String(rowValue).toLowerCase()
-  const itemRank = rankItem(itemStr, searchValue)
-
-  addMeta({
-    itemRank,
-  })
-
-  return itemRank.passed
-}
-
 // TABLE CONFIG
 export const fallbackData: (Template | DefaultTemplate)[] = []
 
@@ -161,18 +130,14 @@ export const useColumns = (deps: unknown[]) => {
 export const templatesTableConfig: Partial<
   TableOptions<Template | DefaultTemplate>
 > = {
-  filterFns: {
-    fuzzy: fuzzyFilter,
-  },
   getCoreRowModel: getCoreRowModel(),
-  getFilteredRowModel: getFilteredRowModel(),
-  getSortedRowModel: getSortedRowModel(),
+  // Sorting, filtering, and search are performed server-side; the table is a
+  // pure renderer over the rows returned by the paginated query.
+  manualSorting: true,
+  manualFiltering: true,
   enableSorting: true,
   enableMultiSort: false,
   enableSortingRemoval: false,
   columnResizeMode: 'onChange',
   enableColumnResizing: true,
-  enableGlobalFilter: true,
-  // @ts-expect-error globalFilterFn is not a valid option
-  globalFilterFn: 'fuzzy',
 }
diff --git a/src/features/dashboard/templates/list/table.tsx b/src/features/dashboard/templates/list/table.tsx
index 922c195ef..2674eecd2 100644
--- a/src/features/dashboard/templates/list/table.tsx
+++ b/src/features/dashboard/templates/list/table.tsx
@@ -1,16 +1,22 @@
 'use client'
 
-import { useSuspenseQuery } from '@tanstack/react-query'
 import {
-  type ColumnFiltersState,
+  keepPreviousData,
+  useSuspenseInfiniteQuery,
+} from '@tanstack/react-query'
+import {
   type ColumnSizingState,
   flexRender,
   type TableOptions,
   useReactTable,
 } from '@tanstack/react-table'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { useLocalStorage } from 'usehooks-ts'
-import type { Template } from '@/core/modules/templates/models'
+import type {
+  DefaultTemplate,
+  Template,
+  TemplatesSort,
+} from '@/core/modules/templates/models'
 import { useColumnSizeVars } from '@/lib/hooks/use-column-size-vars'
 import { useRouteParams } from '@/lib/hooks/use-route-params'
 import { cn } from '@/lib/utils'
@@ -30,48 +36,68 @@ import { useTemplateTableStore } from './stores/table-store'
 import { TemplatesTableBody as TableBody } from './table-body'
 import { fallbackData, templatesTableConfig, useColumns } from './table-config'
 
+const PAGE_SIZE = 50
+
+// Maps a table column id to its server sort-token base. Only mapped columns are
+// sortable server-side; anything else falls back to updated_at.
+const COLUMN_TO_SORT_BASE: Record<string, string> = {
+  name: 'name',
+  cpuCount: 'cpu_count',
+  memoryMB: 'memory_mb',
+  createdAt: 'created_at',
+  updatedAt: 'updated_at',
+}
+
 export default function TemplatesTable() {
   'use no memo'
 
   const trpc = useTRPC()
   const { teamSlug } = useRouteParams<'/dashboard/[teamSlug]/templates'>()
 
-  const { data: templatesData, error: templatesError } = useSuspenseQuery(
-    trpc.templates.getTemplates.queryOptions(
-      { teamSlug },
+  const { sorting, setSorting, globalFilter, setGlobalFilter } =
+    useTemplateTableStore()
+  const { cpuCount, memoryMB, isPublic } = useTemplateTableStore()
+
+  // Derive the single server sort token from the active sort column + direction.
+  const sortColumn = sorting[0]
+  const sortBase =
+    (sortColumn && COLUMN_TO_SORT_BASE[sortColumn.id]) ?? 'updated_at'
+  const sort =
+    `${sortBase}_${sortColumn?.desc === false ? 'asc' : 'desc'}` as TemplatesSort
+
+  const {
+    data,
+    error: templatesError,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useSuspenseInfiniteQuery(
+    trpc.templates.getTemplates.infiniteQueryOptions(
       {
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-        refetchOnReconnect: false,
+        teamSlug,
+        limit: PAGE_SIZE,
+        cpuCount,
+        memoryMB,
+        public: isPublic,
+        // The search input already debounces before writing to the store.
+        search: globalFilter || undefined,
+        sort,
+      },
+      {
+        getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+        initialCursor: undefined,
+        placeholderData: keepPreviousData,
       }
     )
   )
 
-  const { data: defaultTemplatesData } = useSuspenseQuery(
-    trpc.templates.getDefaultTemplatesCached.queryOptions(undefined, {
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    })
-  )
-
-  const templates = useMemo(
-    () => [
-      ...(defaultTemplatesData?.templates ?? []),
-      ...(templatesData?.templates ?? []),
-    ],
-    [templatesData, defaultTemplatesData]
+  const templates = useMemo<Array<Template | DefaultTemplate>>(
+    () => data?.pages.flatMap((page) => page.data) ?? [],
+    [data]
   )
 
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  const { sorting, setSorting, globalFilter, setGlobalFilter } =
-    useTemplateTableStore()
-
-  const { cpuCount, memoryMB, isPublic } = useTemplateTableStore()
-
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-
   const [columnSizing, setColumnSizing] = useLocalStorage<ColumnSizingState>(
     'templates:columnSizing:v3',
     {},
@@ -81,37 +107,6 @@ export default function TemplatesTable() {
     }
   )
 
-  // Effect hooks for filters
-  useEffect(() => {
-    let newFilters = [...columnFilters]
-
-    // Handle CPU filter
-    if (!cpuCount) {
-      newFilters = newFilters.filter((f) => f.id !== 'cpuCount')
-    } else {
-      newFilters = newFilters.filter((f) => f.id !== 'cpuCount')
-      newFilters.push({ id: 'cpuCount', value: cpuCount })
-    }
-
-    // Handle memory filter
-    if (!memoryMB) {
-      newFilters = newFilters.filter((f) => f.id !== 'memoryMB')
-    } else {
-      newFilters = newFilters.filter((f) => f.id !== 'memoryMB')
-      newFilters.push({ id: 'memoryMB', value: memoryMB })
-    }
-
-    // Handle public filter
-    if (isPublic === undefined) {
-      newFilters = newFilters.filter((f) => f.id !== 'public')
-    } else {
-      newFilters = newFilters.filter((f) => f.id !== 'public')
-      newFilters.push({ id: 'public', value: isPublic })
-    }
-
-    setColumnFilters(newFilters)
-  }, [cpuCount, memoryMB, isPublic])
-
   const columns = useColumns([])
 
   const table = useReactTable<Template>({
@@ -122,27 +117,24 @@ export default function TemplatesTable() {
       globalFilter,
       sorting,
       columnSizing,
-      columnFilters,
     },
     onGlobalFilterChange: setGlobalFilter,
     onSortingChange: setSorting,
     onColumnSizingChange: setColumnSizing,
-    onColumnFiltersChange: setColumnFilters,
   } as TableOptions<Template>)
 
   const columnSizeVars = useColumnSizeVars(table)
 
-  const resetScroll = () => {
+  // The query refetches from the first page whenever sort/filter/search change,
+  // so reset the scroll position to the top to match. These values are
+  // intentional triggers even though the effect body only touches the ref.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll reset is triggered by query-input changes
+  useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = 0
       scrollRef.current.scrollLeft = 0
     }
-  }
-
-  // Add effect hook for scrolling to top when sorting or global filter changes
-  useEffect(() => {
-    resetScroll()
-  }, [sorting, globalFilter])
+  }, [sort, globalFilter, cpuCount, memoryMB, isPublic])
 
   if (templatesError) {
     return (
@@ -212,6 +204,9 @@ export default function TemplatesTable() {
             templates={templates}
             table={table}
             scrollRef={scrollRef}
+            hasNextPage={hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            fetchNextPage={fetchNextPage}
           />
         </DataTable>
       </div>

From dd70043f2c5630e0c5af8dd1d583ebadaace09b2 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 2 Jun 2026 17:26:57 +0200
Subject: [PATCH 04/11] feat(templates): invalidate the templates list after
 delete/visibility change

Replaces the optimistic setQueryData (incompatible with the infinite query
cache) with a pathKey invalidation matching every filter/sort variant.
---
 .../dashboard/templates/list/table-cells.tsx  | 72 +++----------------
 1 file changed, 8 insertions(+), 64 deletions(-)

diff --git a/src/features/dashboard/templates/list/table-cells.tsx b/src/features/dashboard/templates/list/table-cells.tsx
index 591cec46a..f8b983a43 100644
--- a/src/features/dashboard/templates/list/table-cells.tsx
+++ b/src/features/dashboard/templates/list/table-cells.tsx
@@ -5,7 +5,6 @@ import type { CellContext } from '@tanstack/react-table'
 import { useMemo, useState } from 'react'
 import type { DefaultTemplate, Template } from '@/core/modules/templates/models'
 import { useClipboard } from '@/lib/hooks/use-clipboard'
-import { useRouteParams } from '@/lib/hooks/use-route-params'
 import {
   defaultErrorToast,
   defaultSuccessToast,
@@ -56,16 +55,18 @@ export function ActionsCell({
 }: CellContext<Template | DefaultTemplate, unknown>) {
   const template = row.original
   const { team } = useDashboard()
-  const { teamSlug } = useRouteParams<'/dashboard/[teamSlug]/templates'>()
 
   const { toast } = useToast()
   const trpc = useTRPC()
   const queryClient = useQueryClient()
+  // Path-level key matches the paginated infinite query across every
+  // sort/filter/search variant currently in the cache.
+  const templatesListKey = trpc.templates.getTemplates.pathKey()
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
 
   const updateTemplateMutation = useMutation(
     trpc.templates.updateTemplate.mutationOptions({
-      onSuccess: async (data, variables) => {
+      onSuccess: (data) => {
         const templateName = template.aliases[0] || template.templateID
 
         toast(
@@ -77,30 +78,6 @@ export function ActionsCell({
             </>
           )
         )
-
-        await queryClient.cancelQueries({
-          queryKey: trpc.templates.getTemplates.queryKey({
-            teamSlug,
-          }),
-        })
-
-        queryClient.setQueryData(
-          trpc.templates.getTemplates.queryKey({
-            teamSlug,
-          }),
-          (old) => {
-            if (!old?.templates) return old
-
-            return {
-              ...old,
-              templates: old.templates.map((t: Template) =>
-                t.templateID === variables.templateId
-                  ? { ...t, public: variables.public }
-                  : t
-              ),
-            }
-          }
-        )
       },
       onError: (error) => {
         const templateName = template.aliases[0] || template.templateID
@@ -111,18 +88,14 @@ export function ActionsCell({
         )
       },
       onSettled: () => {
-        queryClient.invalidateQueries({
-          queryKey: trpc.templates.getTemplates.queryKey({
-            teamSlug,
-          }),
-        })
+        queryClient.invalidateQueries({ queryKey: templatesListKey })
       },
     })
   )
 
   const deleteTemplateMutation = useMutation(
     trpc.templates.deleteTemplate.mutationOptions({
-      onSuccess: async (_, variables) => {
+      onSuccess: () => {
         const templateName = template.aliases[0] || template.templateID
         toast(
           defaultSuccessToast(
@@ -133,32 +106,8 @@ export function ActionsCell({
             </>
           )
         )
-
-        // stop ongoing invlaidations and remove template from state while refetch is going in the background
-
-        await queryClient.cancelQueries({
-          queryKey: trpc.templates.getTemplates.queryKey({
-            teamSlug,
-          }),
-        })
-
-        queryClient.setQueryData(
-          trpc.templates.getTemplates.queryKey({
-            teamSlug,
-          }),
-
-          (old) => {
-            if (!old?.templates) return old
-            return {
-              ...old,
-              templates: old.templates.filter(
-                (t: Template) => t.templateID !== variables.templateId
-              ),
-            }
-          }
-        )
       },
-      onError: (error, _variables) => {
+      onError: (error) => {
         const templateName = template.aliases[0] || template.templateID
         toast(
           defaultErrorToast(
@@ -168,12 +117,7 @@ export function ActionsCell({
       },
       onSettled: () => {
         setIsDeleteDialogOpen(false)
-
-        queryClient.invalidateQueries({
-          queryKey: trpc.templates.getTemplates.queryKey({
-            teamSlug,
-          }),
-        })
+        queryClient.invalidateQueries({ queryKey: templatesListKey })
       },
     })
   )

From 9f96350c4f544732b05cf83196e13ff205c851c0 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 2 Jun 2026 22:51:57 +0200
Subject: [PATCH 05/11] use load more button pattern

---
 .../templates/builds/table-cells.tsx          | 37 ----------
 .../dashboard/templates/builds/table.tsx      |  3 +-
 .../dashboard/templates/list/table-body.tsx   | 74 +++++++++----------
 .../dashboard/templates/list/table.tsx        | 50 +++++++++++--
 src/ui/pagination-buttons.tsx                 | 41 ++++++++++
 5 files changed, 120 insertions(+), 85 deletions(-)
 create mode 100644 src/ui/pagination-buttons.tsx

diff --git a/src/features/dashboard/templates/builds/table-cells.tsx b/src/features/dashboard/templates/builds/table-cells.tsx
index 2222fe610..36ef8c3e9 100644
--- a/src/features/dashboard/templates/builds/table-cells.tsx
+++ b/src/features/dashboard/templates/builds/table-cells.tsx
@@ -18,7 +18,6 @@ import CopyButtonInline from '@/ui/copy-button-inline'
 import { Badge } from '@/ui/primitives/badge'
 import { Button } from '@/ui/primitives/button'
 import { CheckIcon, CloseIcon } from '@/ui/primitives/icons'
-import { Loader } from '@/ui/primitives/loader'
 
 export function BuildId({ id }: { id: string }) {
   return (
@@ -61,42 +60,6 @@ export function Template({
   )
 }
 
-export function LoadMoreButton({
-  isLoading,
-  onLoadMore,
-}: {
-  isLoading: boolean
-  onLoadMore: () => void
-}) {
-  if (isLoading) {
-    return (
-      <span className="inline-flex items-center gap-1">
-        Loading
-        <Loader variant="dots" />
-      </span>
-    )
-  }
-  return (
-    <button
-      onClick={onLoadMore}
-      className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
-    >
-      Load more
-    </button>
-  )
-}
-
-export function BackToTopButton({ onBackToTop }: { onBackToTop: () => void }) {
-  return (
-    <button
-      onClick={onBackToTop}
-      className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
-    >
-      Back to top
-    </button>
-  )
-}
-
 export function Duration({
   createdAt,
   finishedAt,
diff --git a/src/features/dashboard/templates/builds/table.tsx b/src/features/dashboard/templates/builds/table.tsx
index 493280d3e..1f345e5bd 100644
--- a/src/features/dashboard/templates/builds/table.tsx
+++ b/src/features/dashboard/templates/builds/table.tsx
@@ -16,6 +16,7 @@ import type {
 import { useRouteParams } from '@/lib/hooks/use-route-params'
 import { cn } from '@/lib/utils/ui'
 import { useTRPC } from '@/trpc/client'
+import { BackToTopButton, LoadMoreButton } from '@/ui/pagination-buttons'
 import { ArrowDownIcon } from '@/ui/primitives/icons'
 import { Loader } from '@/ui/primitives/loader'
 import {
@@ -28,10 +29,8 @@ import {
 } from '@/ui/primitives/table'
 import BuildsEmpty from './empty'
 import {
-  BackToTopButton,
   BuildId,
   Duration,
-  LoadMoreButton,
   Reason,
   StartedAt,
   Status,
diff --git a/src/features/dashboard/templates/list/table-body.tsx b/src/features/dashboard/templates/list/table-body.tsx
index d3b32cc56..5722c0771 100644
--- a/src/features/dashboard/templates/list/table-body.tsx
+++ b/src/features/dashboard/templates/list/table-body.tsx
@@ -1,9 +1,11 @@
 import { flexRender, type Table } from '@tanstack/react-table'
-import { type RefObject, useEffect } from 'react'
+import type { RefObject } from 'react'
 import type { Template } from '@/core/modules/templates/models'
 import { useVirtualRows } from '@/lib/hooks/use-virtual-rows'
+import { cn } from '@/lib/utils'
 import { DataTableBody, DataTableCell, DataTableRow } from '@/ui/data-table'
 import Empty from '@/ui/empty'
+import { LoadMoreButton } from '@/ui/pagination-buttons'
 import { Button } from '@/ui/primitives/button'
 import { CloseIcon, ExternalLinkIcon } from '@/ui/primitives/icons'
 import { useTemplateTableStore } from './stores/table-store'
@@ -11,7 +13,6 @@ import { useTemplateTableStore } from './stores/table-store'
 const ROW_HEIGHT_PX = 32
 const VIRTUAL_OVERSCAN = 8
 const INITIAL_FALLBACK_ROW_COUNT = 100
-const PREFETCH_THRESHOLD = 8
 
 interface TemplatesTableBodyProps {
   templates: Template[] | undefined
@@ -20,6 +21,7 @@ interface TemplatesTableBodyProps {
   hasNextPage: boolean
   isFetchingNextPage: boolean
   fetchNextPage: () => void
+  isRefetching: boolean
 }
 
 export function TemplatesTableBody({
@@ -29,6 +31,7 @@ export function TemplatesTableBody({
   hasNextPage,
   isFetchingNextPage,
   fetchNextPage,
+  isRefetching,
 }: TemplatesTableBodyProps) {
   'use no memo'
 
@@ -38,7 +41,6 @@ export function TemplatesTableBody({
   const centerRows = table.getCenterRows()
   const {
     virtualRows,
-    virtualizer,
     totalHeight: virtualizedTotalHeight,
     paddingTop: virtualPaddingTop,
   } = useVirtualRows<Template>({
@@ -48,26 +50,6 @@ export function TemplatesTableBody({
     overscan: VIRTUAL_OVERSCAN,
   })
 
-  const virtualItems = virtualizer.getVirtualItems()
-  const lastVisibleIndex = virtualItems[virtualItems.length - 1]?.index ?? -1
-
-  // Load the next page as the user scrolls near the bottom of the list.
-  useEffect(() => {
-    if (
-      hasNextPage &&
-      !isFetchingNextPage &&
-      lastVisibleIndex >= centerRows.length - PREFETCH_THRESHOLD
-    ) {
-      fetchNextPage()
-    }
-  }, [
-    hasNextPage,
-    isFetchingNextPage,
-    lastVisibleIndex,
-    centerRows.length,
-    fetchNextPage,
-  ])
-
   const rows =
     virtualRows.length > 0
       ? virtualRows
@@ -115,21 +97,35 @@ export function TemplatesTableBody({
   }
 
   return (
-    <DataTableBody virtualizedTotalHeight={virtualizedTotalHeight}>
-      {virtualPaddingTop > 0 && <div style={{ height: virtualPaddingTop }} />}
-      {rows.map((row) => (
-        <DataTableRow
-          key={row.id}
-          isSelected={row.getIsSelected()}
-          className="h-8 border-b"
-        >
-          {row.getVisibleCells().map((cell) => (
-            <DataTableCell key={cell.id} cell={cell}>
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </DataTableCell>
-          ))}
-        </DataTableRow>
-      ))}
-    </DataTableBody>
+    <>
+      <DataTableBody
+        virtualizedTotalHeight={virtualizedTotalHeight}
+        className={cn(isRefetching && 'opacity-70 transition-opacity')}
+      >
+        {virtualPaddingTop > 0 && <div style={{ height: virtualPaddingTop }} />}
+        {rows.map((row) => (
+          <DataTableRow
+            key={row.id}
+            isSelected={row.getIsSelected()}
+            className="h-8 border-b"
+          >
+            {row.getVisibleCells().map((cell) => (
+              <DataTableCell key={cell.id} cell={cell}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </DataTableCell>
+            ))}
+          </DataTableRow>
+        ))}
+      </DataTableBody>
+
+      {hasNextPage && (
+        <div className="flex items-center justify-center py-3 text-fg-tertiary max-md:sticky max-md:left-0 max-md:w-[calc(100svw-1.5rem)]">
+          <LoadMoreButton
+            isLoading={isFetchingNextPage}
+            onLoadMore={fetchNextPage}
+          />
+        </div>
+      )}
+    </>
   )
 }
diff --git a/src/features/dashboard/templates/list/table.tsx b/src/features/dashboard/templates/list/table.tsx
index 2674eecd2..886294bdf 100644
--- a/src/features/dashboard/templates/list/table.tsx
+++ b/src/features/dashboard/templates/list/table.tsx
@@ -10,7 +10,7 @@ import {
   type TableOptions,
   useReactTable,
 } from '@tanstack/react-table'
-import { useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocalStorage } from 'usehooks-ts'
 import type {
   DefaultTemplate,
@@ -38,8 +38,6 @@ import { fallbackData, templatesTableConfig, useColumns } from './table-config'
 
 const PAGE_SIZE = 50
 
-// Maps a table column id to its server sort-token base. Only mapped columns are
-// sortable server-side; anything else falls back to updated_at.
 const COLUMN_TO_SORT_BASE: Record<string, string> = {
   name: 'name',
   cpuCount: 'cpu_count',
@@ -71,6 +69,7 @@ export default function TemplatesTable() {
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
+    isFetching,
   } = useSuspenseInfiniteQuery(
     trpc.templates.getTemplates.infiniteQueryOptions(
       {
@@ -79,7 +78,6 @@ export default function TemplatesTable() {
         cpuCount,
         memoryMB,
         public: isPublic,
-        // The search input already debounces before writing to the store.
         search: globalFilter || undefined,
         sort,
       },
@@ -96,6 +94,22 @@ export default function TemplatesTable() {
     [data]
   )
 
+  const { isRefetching, clearRefetching } = useTemplatesRefetchTracking(
+    sort,
+    globalFilter,
+    cpuCount,
+    memoryMB,
+    isPublic
+  )
+
+  useEffect(() => {
+    if (!isFetching && isRefetching) {
+      clearRefetching()
+    }
+  }, [isFetching, isRefetching, clearRefetching])
+
+  const isListDimmed = isRefetching && templates.length > 0
+
   const scrollRef = useRef<HTMLDivElement>(null)
 
   const [columnSizing, setColumnSizing] = useLocalStorage<ColumnSizingState>(
@@ -125,9 +139,6 @@ export default function TemplatesTable() {
 
   const columnSizeVars = useColumnSizeVars(table)
 
-  // The query refetches from the first page whenever sort/filter/search change,
-  // so reset the scroll position to the top to match. These values are
-  // intentional triggers even though the effect body only touches the ref.
   // biome-ignore lint/correctness/useExhaustiveDependencies: scroll reset is triggered by query-input changes
   useEffect(() => {
     if (scrollRef.current) {
@@ -207,9 +218,34 @@ export default function TemplatesTable() {
             hasNextPage={hasNextPage}
             isFetchingNextPage={isFetchingNextPage}
             fetchNextPage={fetchNextPage}
+            isRefetching={isListDimmed}
           />
         </DataTable>
       </div>
     </ClientOnly>
   )
 }
+
+function useTemplatesRefetchTracking(
+  sort: string,
+  globalFilter: string,
+  cpuCount: number | undefined,
+  memoryMB: number | undefined,
+  isPublic: boolean | undefined
+) {
+  const [isRefetching, setIsRefetching] = useState(false)
+  const isFirstRender = useRef(true)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: these are change triggers, not values read in the effect
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      return
+    }
+    setIsRefetching(true)
+  }, [sort, globalFilter, cpuCount, memoryMB, isPublic])
+
+  const clearRefetching = useCallback(() => setIsRefetching(false), [])
+
+  return { isRefetching, clearRefetching }
+}
diff --git a/src/ui/pagination-buttons.tsx b/src/ui/pagination-buttons.tsx
new file mode 100644
index 000000000..4a696fd6b
--- /dev/null
+++ b/src/ui/pagination-buttons.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { Loader } from '@/ui/primitives/loader'
+
+export function LoadMoreButton({
+  isLoading,
+  onLoadMore,
+}: {
+  isLoading: boolean
+  onLoadMore: () => void
+}) {
+  if (isLoading) {
+    return (
+      <span className="inline-flex items-center gap-1">
+        Loading
+        <Loader variant="dots" />
+      </span>
+    )
+  }
+  return (
+    <button
+      type="button"
+      onClick={onLoadMore}
+      className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
+    >
+      Load more
+    </button>
+  )
+}
+
+export function BackToTopButton({ onBackToTop }: { onBackToTop: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onBackToTop}
+      className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
+    >
+      Back to top
+    </button>
+  )
+}

From ac6dd1f74bbe228eee0ca56c8f1362f564ef6121 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 2 Jun 2026 23:22:15 +0200
Subject: [PATCH 06/11] openapi spec

---
 spec/openapi.dashboard-api.yaml               | 35 --------------
 .../shared/contracts/dashboard-api.types.ts   | 48 -------------------
 2 files changed, 83 deletions(-)

diff --git a/spec/openapi.dashboard-api.yaml b/spec/openapi.dashboard-api.yaml
index 036b07cd5..1bb233b49 100644
--- a/spec/openapi.dashboard-api.yaml
+++ b/spec/openapi.dashboard-api.yaml
@@ -121,13 +121,6 @@ components:
       description: Team slug to resolve.
       schema:
         type: string
-    templateID:
-      name: templateID
-      in: path
-      required: true
-      description: Identifier of the template.
-      schema:
-        type: string
     templates_limit:
       name: limit
       in: query
@@ -1366,34 +1359,6 @@ paths:
         "500":
           $ref: "#/components/responses/500"
 
-  /templates/{templateID}:
-    get:
-      summary: Get a single team template
-      description: Returns a single template owned by the team (or a default template, unless the team is on a dedicated cluster).
-      tags: [templates]
-      security:
-        - Supabase1TokenAuth: []
-          Supabase2TeamAuth: []
-        - AuthProviderBearerAuth: []
-          AuthProviderTeamAuth: []
-      parameters:
-        - $ref: "#/components/parameters/templateID"
-      responses:
-        "200":
-          description: Successfully returned the template.
-          content:
-            application/json:
-              schema:
-                $ref: "#/components/schemas/TeamTemplate"
-        "401":
-          $ref: "#/components/responses/401"
-        "403":
-          $ref: "#/components/responses/403"
-        "404":
-          $ref: "#/components/responses/404"
-        "500":
-          $ref: "#/components/responses/500"
-
   /templates/defaults:
     get:
       summary: List default templates
diff --git a/src/core/shared/contracts/dashboard-api.types.ts b/src/core/shared/contracts/dashboard-api.types.ts
index 457af44b1..e4f40b24c 100644
--- a/src/core/shared/contracts/dashboard-api.types.ts
+++ b/src/core/shared/contracts/dashboard-api.types.ts
@@ -811,52 +811,6 @@ export interface paths {
     patch?: never
     trace?: never
   }
-  '/templates/{templateID}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get a single team template
-     * @description Returns a single template owned by the team (or a default template, unless the team is on a dedicated cluster).
-     */
-    get: {
-      parameters: {
-        query?: never
-        header?: never
-        path: {
-          /** @description Identifier of the template. */
-          templateID: components['parameters']['templateID']
-        }
-        cookie?: never
-      }
-      requestBody?: never
-      responses: {
-        /** @description Successfully returned the template. */
-        200: {
-          headers: {
-            [name: string]: unknown
-          }
-          content: {
-            'application/json': components['schemas']['TeamTemplate']
-          }
-        }
-        401: components['responses']['401']
-        403: components['responses']['403']
-        404: components['responses']['404']
-        500: components['responses']['500']
-      }
-    }
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
   '/templates/defaults': {
     parameters: {
       query?: never
@@ -1269,8 +1223,6 @@ export interface components {
     userId: string
     /** @description Team slug to resolve. */
     teamSlug: string
-    /** @description Identifier of the template. */
-    templateID: string
     /** @description Maximum number of items to return per page. */
     templates_limit: number
     /** @description Cursor returned by the previous list response in `{sort}|{value}|{templateID}` format. Rejected if its sort does not match the request. */

From be678e42a09f7676f306f978dd2d6440fa7dd974 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Wed, 3 Jun 2026 15:43:28 +0200
Subject: [PATCH 07/11] fix(dashboard): disable sort on Template ID column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Template IDs are random nanoid strings — sorting alphabetically by them
gives no meaningful order. The server-side sort enum has no templateID
variant (clicks would silently fall back to updated_at_desc on the
server), so this just removes the misleading sort affordance from the
column header to match the other unsortable columns
(Visibility, ENVD Ver., Actions).
---
 src/features/dashboard/templates/list/table-config.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/dashboard/templates/list/table-config.tsx b/src/features/dashboard/templates/list/table-config.tsx
index f9003362c..750c158bd 100644
--- a/src/features/dashboard/templates/list/table-config.tsx
+++ b/src/features/dashboard/templates/list/table-config.tsx
@@ -51,6 +51,7 @@ export const useColumns = (deps: unknown[]) => {
         header: 'ID',
         size: 156,
         enableResizing: false,
+        enableSorting: false,
         cell: TemplateIdCell,
       },
       {

From 6d18d4cb3e772efc2f8d32ec398c9c2732ee7371 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Wed, 3 Jun 2026 15:55:59 +0200
Subject: [PATCH 08/11] fallback to created_at

---
 src/features/dashboard/templates/list/table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/dashboard/templates/list/table.tsx b/src/features/dashboard/templates/list/table.tsx
index 886294bdf..fc9aed5c0 100644
--- a/src/features/dashboard/templates/list/table.tsx
+++ b/src/features/dashboard/templates/list/table.tsx
@@ -59,7 +59,7 @@ export default function TemplatesTable() {
   // Derive the single server sort token from the active sort column + direction.
   const sortColumn = sorting[0]
   const sortBase =
-    (sortColumn && COLUMN_TO_SORT_BASE[sortColumn.id]) ?? 'updated_at'
+    (sortColumn && COLUMN_TO_SORT_BASE[sortColumn.id]) ?? 'created_at'
   const sort =
     `${sortBase}_${sortColumn?.desc === false ? 'asc' : 'desc'}` as TemplatesSort
 

From c4925b64b2ad68b531c9e86fa0a063764b7407c4 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Thu, 4 Jun 2026 10:04:50 +0200
Subject: [PATCH 09/11] prefetch first page

---
 .../[teamSlug]/templates/(tabs)/list/page.tsx | 27 ++++++++++++++++---
 .../dashboard/templates/list/constants.ts     | 16 +++++++++++
 .../templates/list/stores/table-store.ts      |  3 ++-
 .../dashboard/templates/list/table.tsx        | 18 ++++++++-----
 4 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 src/features/dashboard/templates/list/constants.ts

diff --git a/src/app/dashboard/[teamSlug]/templates/(tabs)/list/page.tsx b/src/app/dashboard/[teamSlug]/templates/(tabs)/list/page.tsx
index 76f6b25ad..ae2a9e652 100644
--- a/src/app/dashboard/[teamSlug]/templates/(tabs)/list/page.tsx
+++ b/src/app/dashboard/[teamSlug]/templates/(tabs)/list/page.tsx
@@ -1,11 +1,30 @@
 import { Suspense } from 'react'
 import LoadingLayout from '@/features/dashboard/loading-layout'
+import {
+  TEMPLATES_DEFAULT_SORT,
+  TEMPLATES_PAGE_SIZE,
+} from '@/features/dashboard/templates/list/constants'
 import TemplatesTable from '@/features/dashboard/templates/list/table'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplatesListPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/list'>) {
+  const { teamSlug } = await params
+
+  prefetch(
+    trpc.templates.getTemplates.infiniteQueryOptions({
+      teamSlug,
+      limit: TEMPLATES_PAGE_SIZE,
+      sort: TEMPLATES_DEFAULT_SORT,
+    })
+  )
 
-export default function TemplatesListPage() {
   return (
-    <Suspense fallback={<LoadingLayout />}>
-      <TemplatesTable />
-    </Suspense>
+    <HydrateClient>
+      <Suspense fallback={<LoadingLayout />}>
+        <TemplatesTable />
+      </Suspense>
+    </HydrateClient>
   )
 }
diff --git a/src/features/dashboard/templates/list/constants.ts b/src/features/dashboard/templates/list/constants.ts
new file mode 100644
index 000000000..1f44ffae4
--- /dev/null
+++ b/src/features/dashboard/templates/list/constants.ts
@@ -0,0 +1,16 @@
+import type { SortingState } from '@tanstack/react-table'
+import type { TemplatesSort } from '@/core/modules/templates/models'
+
+export const TEMPLATES_PAGE_SIZE = 50
+
+export const TEMPLATES_DEFAULT_SORT_COLUMN_ID = 'createdAt'
+export const TEMPLATES_DEFAULT_SORT_BASE = 'created_at'
+export const TEMPLATES_DEFAULT_SORT_DESC = true
+
+export const TEMPLATES_DEFAULT_SORT: TemplatesSort = `${TEMPLATES_DEFAULT_SORT_BASE}_${
+  TEMPLATES_DEFAULT_SORT_DESC ? 'desc' : 'asc'
+}`
+
+export const TEMPLATES_DEFAULT_SORTING: SortingState = [
+  { id: TEMPLATES_DEFAULT_SORT_COLUMN_ID, desc: TEMPLATES_DEFAULT_SORT_DESC },
+]
diff --git a/src/features/dashboard/templates/list/stores/table-store.ts b/src/features/dashboard/templates/list/stores/table-store.ts
index 5efbd4705..db239b7b7 100644
--- a/src/features/dashboard/templates/list/stores/table-store.ts
+++ b/src/features/dashboard/templates/list/stores/table-store.ts
@@ -2,6 +2,7 @@ import type { OnChangeFn, SortingState } from '@tanstack/react-table'
 import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
 import { createHashStorage } from '@/lib/utils/store'
+import { TEMPLATES_DEFAULT_SORTING } from '../constants'
 import { trackTemplateTableInteraction } from '../table-config'
 
 interface TemplateTableState {
@@ -33,7 +34,7 @@ type Store = TemplateTableState & TemplateTableActions
 
 const initialState: TemplateTableState = {
   // Table state
-  sorting: [{ id: 'updatedAt', desc: true }],
+  sorting: TEMPLATES_DEFAULT_SORTING,
   globalFilter: '',
   // Filter state
   cpuCount: undefined,
diff --git a/src/features/dashboard/templates/list/table.tsx b/src/features/dashboard/templates/list/table.tsx
index fc9aed5c0..16b18b2bd 100644
--- a/src/features/dashboard/templates/list/table.tsx
+++ b/src/features/dashboard/templates/list/table.tsx
@@ -31,13 +31,16 @@ import {
 import ErrorBoundary from '@/ui/error'
 import HelpTooltip from '@/ui/help-tooltip'
 import { SIDEBAR_TRANSITION_CLASSNAMES } from '@/ui/primitives/sidebar'
+import {
+  TEMPLATES_DEFAULT_SORT_BASE,
+  TEMPLATES_DEFAULT_SORT_DESC,
+  TEMPLATES_PAGE_SIZE,
+} from './constants'
 import TemplatesHeader from './header'
 import { useTemplateTableStore } from './stores/table-store'
 import { TemplatesTableBody as TableBody } from './table-body'
 import { fallbackData, templatesTableConfig, useColumns } from './table-config'
 
-const PAGE_SIZE = 50
-
 const COLUMN_TO_SORT_BASE: Record<string, string> = {
   name: 'name',
   cpuCount: 'cpu_count',
@@ -59,9 +62,12 @@ export default function TemplatesTable() {
   // Derive the single server sort token from the active sort column + direction.
   const sortColumn = sorting[0]
   const sortBase =
-    (sortColumn && COLUMN_TO_SORT_BASE[sortColumn.id]) ?? 'created_at'
-  const sort =
-    `${sortBase}_${sortColumn?.desc === false ? 'asc' : 'desc'}` as TemplatesSort
+    (sortColumn && COLUMN_TO_SORT_BASE[sortColumn.id]) ??
+    TEMPLATES_DEFAULT_SORT_BASE
+  const isDesc = sortColumn
+    ? sortColumn.desc !== false
+    : TEMPLATES_DEFAULT_SORT_DESC
+  const sort = `${sortBase}_${isDesc ? 'desc' : 'asc'}` as TemplatesSort
 
   const {
     data,
@@ -74,7 +80,7 @@ export default function TemplatesTable() {
     trpc.templates.getTemplates.infiniteQueryOptions(
       {
         teamSlug,
-        limit: PAGE_SIZE,
+        limit: TEMPLATES_PAGE_SIZE,
         cpuCount,
         memoryMB,
         public: isPublic,

From 852347e0476534b1ca17c48078db29ac4a6c48a0 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 9 Jun 2026 16:51:19 +0200
Subject: [PATCH 10/11] refactor(templates): address review nits on
 listTeamTemplates

- pass options directly as query
- early return on empty data
- single-literal mapping with conditional spread for default templates
---
 .../modules/templates/repository.server.ts    | 74 ++++++++-----------
 1 file changed, 30 insertions(+), 44 deletions(-)

diff --git a/src/core/modules/templates/repository.server.ts b/src/core/modules/templates/repository.server.ts
index 2f771472b..460e30239 100644
--- a/src/core/modules/templates/repository.server.ts
+++ b/src/core/modules/templates/repository.server.ts
@@ -102,15 +102,7 @@ export function createTemplatesRepository(
 
       const res = await deps.apiClient.GET('/templates', {
         params: {
-          query: {
-            cursor: options.cursor,
-            limit: options.limit,
-            cpuCount: options.cpuCount,
-            memoryMB: options.memoryMB,
-            public: options.public,
-            search: options.search,
-            sort: options.sort,
-          },
+          query: options,
         },
         headers: {
           ...deps.authHeaders(scope.accessToken, scope.teamId),
@@ -127,43 +119,37 @@ export function createTemplatesRepository(
         )
       }
 
-      const data = (res.data?.data ?? []).map(
-        (t): Template | DefaultTemplate => {
-          const base: Template = {
-            templateID: t.templateID,
-            buildID: t.buildID,
-            cpuCount: t.cpuCount,
-            memoryMB: t.memoryMB,
-            diskSizeMB: t.diskSizeMB ?? 0,
-            public: t.public,
-            aliases: t.aliases,
-            names: t.names,
-            createdAt: t.createdAt,
-            updatedAt: t.updatedAt,
-            // Email resolution is deferred while the Supabase auth migration is
-            // in progress; the endpoint returns only the creator id for now.
-            createdBy: t.createdBy
-              ? { id: t.createdBy.id, email: t.createdBy.email ?? '' }
-              : null,
-            lastSpawnedAt: t.lastSpawnedAt ?? null,
-            spawnCount: t.spawnCount,
-            buildCount: t.buildCount,
-            envdVersion: t.envdVersion ?? '',
-          }
-
-          if (t.isDefault) {
-            return {
-              ...base,
-              isDefault: true,
-              defaultDescription: t.defaultDescription ?? undefined,
-            }
-          }
+      if (!res.data?.data?.length) {
+        return ok({ data: [], nextCursor: res.data?.nextCursor ?? null })
+      }
 
-          return base
-        }
-      )
+      const data = res.data.data.map((t): Template | DefaultTemplate => ({
+        templateID: t.templateID,
+        buildID: t.buildID,
+        cpuCount: t.cpuCount,
+        memoryMB: t.memoryMB,
+        diskSizeMB: t.diskSizeMB ?? 0,
+        public: t.public,
+        aliases: t.aliases,
+        names: t.names,
+        createdAt: t.createdAt,
+        updatedAt: t.updatedAt,
+        // Email resolution is deferred while the Supabase auth migration is
+        // in progress; the endpoint returns only the creator id for now.
+        createdBy: t.createdBy
+          ? { id: t.createdBy.id, email: t.createdBy.email ?? '' }
+          : null,
+        lastSpawnedAt: t.lastSpawnedAt ?? null,
+        spawnCount: t.spawnCount,
+        buildCount: t.buildCount,
+        envdVersion: t.envdVersion ?? '',
+        ...(t.isDefault && {
+          isDefault: true as const,
+          defaultDescription: t.defaultDescription ?? undefined,
+        }),
+      }))
 
-      return ok({ data, nextCursor: res.data?.nextCursor ?? null })
+      return ok({ data, nextCursor: res.data.nextCursor ?? null })
     },
     async deleteTemplate(templateId) {
       const res = await deps.infraClient.DELETE('/templates/{templateID}', {

From ba5a557e0aaa6841631c485f15472174cdea1bf1 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Thu, 11 Jun 2026 10:28:36 +0200
Subject: [PATCH 11/11] chore: use types from generated openapi spec

---
 src/core/modules/templates/models.ts | 28 ++++++++--------------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/core/modules/templates/models.ts b/src/core/modules/templates/models.ts
index 72f46e3e2..4cccb32fc 100644
--- a/src/core/modules/templates/models.ts
+++ b/src/core/modules/templates/models.ts
@@ -1,3 +1,7 @@
+import type {
+  components as DashboardComponents,
+  paths as DashboardPaths,
+} from '@/contracts/dashboard-api'
 import type { components as InfraComponents } from '@/contracts/infra-api'
 
 export type Template = Pick<
@@ -24,27 +28,11 @@ export type DefaultTemplate = Template & {
   defaultDescription?: string
 }
 
-export type TemplatesSort =
-  | 'name_asc'
-  | 'name_desc'
-  | 'cpu_count_asc'
-  | 'cpu_count_desc'
-  | 'memory_mb_asc'
-  | 'memory_mb_desc'
-  | 'created_at_asc'
-  | 'created_at_desc'
-  | 'updated_at_asc'
-  | 'updated_at_desc'
+export type TemplatesSort = DashboardComponents['parameters']['templates_sort']
 
-export interface ListTeamTemplatesOptions {
-  cursor?: string
-  limit?: number
-  cpuCount?: number
-  memoryMB?: number
-  public?: boolean
-  search?: string
-  sort?: TemplatesSort
-}
+export type ListTeamTemplatesOptions = NonNullable<
+  DashboardPaths['/templates']['get']['parameters']['query']
+>
 
 export interface ListTeamTemplatesResult {
   data: Array<Template | DefaultTemplate>