From a8f8aec6dcd14095c201aeafc9b89e5931d39b0b Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Mon, 15 Jun 2026 11:55:06 +0200
Subject: [PATCH 1/3] feat: make templates list build-agnostic, move resources
 to builds

# Conflicts:
#	src/features/dashboard/templates/builds/table.tsx
#	src/features/dashboard/templates/list/table-config.tsx
#	src/features/dashboard/templates/list/table.tsx
---
 src/core/modules/builds/models.ts             |  4 +
 src/core/modules/builds/repository.server.ts  |  4 +
 .../dashboard/common/envd-version.tsx         | 39 +++++++++
 .../templates/builds/table-cells.tsx          | 80 ++++++++++++++-----
 .../dashboard/templates/builds/table.tsx      | 64 ++++++++++-----
 .../dashboard/templates/list/table-cells.tsx  | 57 -------------
 .../dashboard/templates/list/table-config.tsx | 27 -------
 7 files changed, 154 insertions(+), 121 deletions(-)
 create mode 100644 src/features/dashboard/common/envd-version.tsx

diff --git a/src/core/modules/builds/models.ts b/src/core/modules/builds/models.ts
index e94eb62c1..78b314d66 100644
--- a/src/core/modules/builds/models.ts
+++ b/src/core/modules/builds/models.ts
@@ -31,6 +31,10 @@ export interface ListedBuildModel {
   statusMessage: string | null
   createdAt: number
   finishedAt: number | null
+  cpuCount: number
+  memoryMB: number
+  diskSizeMB: number | null
+  envdVersion: string | null
 }
 
 export interface RunningBuildStatusModel {
diff --git a/src/core/modules/builds/repository.server.ts b/src/core/modules/builds/repository.server.ts
index 1cfaab6d9..df02e1ae4 100644
--- a/src/core/modules/builds/repository.server.ts
+++ b/src/core/modules/builds/repository.server.ts
@@ -149,6 +149,10 @@ export function createBuildsRepository(
             finishedAt: build.finishedAt
               ? new Date(build.finishedAt).getTime()
               : null,
+            cpuCount: build.cpuCount,
+            memoryMB: build.memoryMB,
+            diskSizeMB: build.diskSizeMB,
+            envdVersion: build.envdVersion,
           })
         ),
         nextCursor: result.data?.nextCursor ?? null,
diff --git a/src/features/dashboard/common/envd-version.tsx b/src/features/dashboard/common/envd-version.tsx
new file mode 100644
index 000000000..6d9cf11f0
--- /dev/null
+++ b/src/features/dashboard/common/envd-version.tsx
@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils'
+import { isVersionCompatible } from '@/lib/utils/version'
+import HelpTooltip from '@/ui/help-tooltip'
+
+const INVALID_ENVD_VERSION = '0.0.1'
+const SDK_V2_MINIMAL_ENVD_VERSION = '0.2.0'
+
+export function EnvdVersion({
+  version,
+  className,
+}: {
+  version: string | null | undefined
+  className?: string
+}) {
+  const versionValue =
+    version && version !== INVALID_ENVD_VERSION ? version : null
+
+  const isNotV2Compatible = versionValue
+    ? isVersionCompatible(versionValue, SDK_V2_MINIMAL_ENVD_VERSION) === false
+    : false
+
+  return (
+    <div
+      className={cn(
+        'text-fg-tertiary whitespace-nowrap font-mono flex flex-row gap-1.5',
+        { 'text-accent-error-highlight': isNotV2Compatible },
+        className
+      )}
+    >
+      {versionValue ?? '--'}
+      {isNotV2Compatible && (
+        <HelpTooltip>
+          The envd version is not compatible with the SDK v2. To update the envd
+          version, you need to rebuild the template.
+        </HelpTooltip>
+      )}
+    </div>
+  )
+}
diff --git a/src/features/dashboard/templates/builds/table-cells.tsx b/src/features/dashboard/templates/builds/table-cells.tsx
index d610f0c62..c918834be 100644
--- a/src/features/dashboard/templates/builds/table-cells.tsx
+++ b/src/features/dashboard/templates/builds/table-cells.tsx
@@ -19,6 +19,13 @@ import { Badge } from '@/ui/primitives/badge'
 import { Button } from '@/ui/primitives/button'
 import { CheckmarkIcon, CloseIcon } from '@/ui/primitives/icons'
 import { Loader } from '@/ui/primitives/loader'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/ui/primitives/tooltip'
+import { EnvdVersion } from '../../common/envd-version'
+import ResourceUsage from '../../common/resource-usage'
 
 export function BuildId({ id }: { id: string }) {
   return (
@@ -107,9 +114,10 @@ export function StartedAt({ timestamp }: { timestamp: number }) {
 
 interface StatusProps {
   status: BuildStatus
+  statusMessage?: ListedBuildModel['statusMessage']
 }
 
-export function Status({ status }: StatusProps) {
+export function Status({ status, statusMessage }: StatusProps) {
   const config: Record<
     BuildStatus,
     {
@@ -137,31 +145,65 @@ export function Status({ status }: StatusProps) {
 
   const { label, icon, variant } = config[status]!
 
+  const badge = (
+    <Badge
+      variant={variant}
+      className={cn('select-none shrink-0 uppercase', {
+        'bg-bg-inverted/10': variant === 'default',
+      })}
+    >
+      {icon}
+      {label}
+    </Badge>
+  )
+
+  const showReason = status === 'failed' && Boolean(statusMessage)
+
   return (
     <div className="flex items-center gap-3 min-w-0">
-      <Badge
-        variant={variant}
-        className={cn('select-none shrink-0 uppercase', {
-          'bg-bg-inverted/10': variant === 'default',
-        })}
-      >
-        {icon}
-        {label}
-      </Badge>
+      {showReason ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{badge}</TooltipTrigger>
+          <TooltipContent className="max-w-[360px] whitespace-pre-wrap break-words text-left font-mono text-xs normal-case text-fg-secondary">
+            {statusMessage}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        badge
+      )}
     </div>
   )
 }
 
-export function Reason({
-  statusMessage,
-}: {
-  statusMessage: ListedBuildModel['statusMessage']
-}) {
-  if (!statusMessage) return null
+export function Cpu({ cpuCount }: { cpuCount: number }) {
+  return (
+    <div className="w-full flex justify-center">
+      <ResourceUsage type="cpu" total={cpuCount} mode="simple" />
+    </div>
+  )
+}
 
+export function Memory({ memoryMB }: { memoryMB: number }) {
   return (
-    <span className="block truncate max-w-0 min-w-full text-left text-fg-tertiary">
-      {statusMessage}
-    </span>
+    <div className="w-full flex justify-end">
+      <ResourceUsage type="mem" total={memoryMB} mode="simple" />
+    </div>
+  )
+}
+
+export function Storage({ diskSizeMB }: { diskSizeMB: number | null }) {
+  const diskSizeGB = diskSizeMB != null ? diskSizeMB / 1024 : null
+  return (
+    <div className="w-full flex justify-end">
+      <ResourceUsage type="disk" total={diskSizeGB} mode="simple" />
+    </div>
+  )
+}
+
+export function Envd({ version }: { version: string | null }) {
+  return (
+    <div className="w-full flex justify-end">
+      <EnvdVersion version={version} />
+    </div>
   )
 }
diff --git a/src/features/dashboard/templates/builds/table.tsx b/src/features/dashboard/templates/builds/table.tsx
index 1f345e5bd..37e6b42c3 100644
--- a/src/features/dashboard/templates/builds/table.tsx
+++ b/src/features/dashboard/templates/builds/table.tsx
@@ -30,10 +30,13 @@ import {
 import BuildsEmpty from './empty'
 import {
   BuildId,
+  Cpu,
   Duration,
-  Reason,
+  Envd,
+  Memory,
   StartedAt,
   Status,
+  Storage,
   Template,
 } from './table-cells'
 import useFilters from './use-filters'
@@ -46,6 +49,10 @@ const COLUMN_WIDTHS = {
   id: 152,
   status: 96,
   template: 192,
+  cpu: 72,
+  memory: 88,
+  storage: 88,
+  envd: 98,
   started: 126,
   duration: 96,
 } as const
@@ -163,16 +170,25 @@ const BuildsTable = () => {
           <colgroup>
             <col style={colStyle(COLUMN_WIDTHS.status)} />
             <col style={colStyle(COLUMN_WIDTHS.template)} />
+            <col style={colStyle(COLUMN_WIDTHS.id)} />
+            <col style={colStyle(COLUMN_WIDTHS.cpu)} />
+            <col style={colStyle(COLUMN_WIDTHS.memory)} />
+            <col style={colStyle(COLUMN_WIDTHS.storage)} />
+            <col style={colStyle(COLUMN_WIDTHS.envd)} />
             <col style={colStyle(COLUMN_WIDTHS.started)} />
             <col style={colStyle(COLUMN_WIDTHS.duration)} />
-            <col style={colStyle(COLUMN_WIDTHS.id)} />
-            <col className="max-lg:min-w-[500px]" />
+            <col />
           </colgroup>
 
           <TableHeader className="sticky top-0 z-10 bg-bg">
             <TableRow>
               <TableHead>Status</TableHead>
               <TableHead>Template</TableHead>
+              <TableHead>ID</TableHead>
+              <TableHead className="text-end">CPU</TableHead>
+              <TableHead className="text-end">Memory</TableHead>
+              <TableHead className="text-end">Storage</TableHead>
+              <TableHead className="text-end">ENVD Ver.</TableHead>
               <TableHead>
                 <span className="inline-flex items-center gap-1 text-fg">
                   Started
@@ -180,7 +196,6 @@ const BuildsTable = () => {
                 </span>
               </TableHead>
               <TableHead className="text-end">Duration</TableHead>
-              <TableHead>ID</TableHead>
               <th />
             </TableRow>
           </TableHeader>
@@ -192,7 +207,7 @@ const BuildsTable = () => {
           >
             {showLoader && (
               <TableRow>
-                <TableCell colSpan={6}>
+                <TableCell colSpan={10}>
                   <div className="h-[35svh] w-full flex justify-center items-center">
                     <Loader variant="slash" size="lg" />
                   </div>
@@ -202,7 +217,7 @@ const BuildsTable = () => {
 
             {showEmpty && (
               <TableRow>
-                <TableCell colSpan={6}>
+                <TableCell colSpan={10}>
                   <BuildsEmpty error={buildsError?.message} />
                 </TableCell>
               </TableRow>
@@ -213,7 +228,7 @@ const BuildsTable = () => {
                 {hasScrolledPastInitialPages && (
                   <TableRow>
                     <TableCell
-                      colSpan={6}
+                      colSpan={10}
                       className="text-center max-lg:text-start text-fg-tertiary"
                     >
                       <BackToTopButton onBackToTop={handleBackToTop} />
@@ -247,7 +262,10 @@ const BuildsTable = () => {
                         className="py-1.5"
                         style={{ maxWidth: COLUMN_WIDTHS.status }}
                       >
-                        <Status status={build.status} />
+                        <Status
+                          status={build.status}
+                          statusMessage={build.statusMessage}
+                        />
                       </TableCell>
                       <TableCell
                         className="py-1.5 overflow-hidden"
@@ -258,6 +276,24 @@ const BuildsTable = () => {
                           templateId={build.templateId}
                         />
                       </TableCell>
+                      <TableCell
+                        className="py-1.5 overflow-hidden"
+                        style={{ maxWidth: COLUMN_WIDTHS.id }}
+                      >
+                        <BuildId id={build.id} />
+                      </TableCell>
+                      <TableCell className="py-1.5">
+                        <Cpu cpuCount={build.cpuCount} />
+                      </TableCell>
+                      <TableCell className="py-1.5">
+                        <Memory memoryMB={build.memoryMB} />
+                      </TableCell>
+                      <TableCell className="py-1.5">
+                        <Storage diskSizeMB={build.diskSizeMB} />
+                      </TableCell>
+                      <TableCell className="py-1.5">
+                        <Envd version={build.envdVersion} />
+                      </TableCell>
                       <TableCell className="py-1.5">
                         <StartedAt timestamp={build.createdAt} />
                       </TableCell>
@@ -268,15 +304,7 @@ const BuildsTable = () => {
                           isBuilding={isBuilding}
                         />
                       </TableCell>
-                      <TableCell
-                        className="py-1.5 overflow-hidden"
-                        style={{ maxWidth: COLUMN_WIDTHS.id }}
-                      >
-                        <BuildId id={build.id} />
-                      </TableCell>
-                      <TableCell className="py-1.5 w-full">
-                        <Reason statusMessage={build.statusMessage} />
-                      </TableCell>
+                      <TableCell className="py-1.5 w-full" />
                     </TableRow>
                   )
                 })}
@@ -284,7 +312,7 @@ const BuildsTable = () => {
                 {hasNextPage && (
                   <TableRow>
                     <TableCell
-                      colSpan={6}
+                      colSpan={10}
                       className="text-center max-lg:text-start text-fg-tertiary"
                     >
                       <LoadMoreButton
diff --git a/src/features/dashboard/templates/list/table-cells.tsx b/src/features/dashboard/templates/list/table-cells.tsx
index ce0e9485e..3fdd5dbf3 100644
--- a/src/features/dashboard/templates/list/table-cells.tsx
+++ b/src/features/dashboard/templates/list/table-cells.tsx
@@ -12,7 +12,6 @@ import {
 } from '@/lib/hooks/use-toast'
 import { cn } from '@/lib/utils'
 import { formatLocalLogStyleTimestamp } from '@/lib/utils/formatting'
-import { isVersionCompatible } from '@/lib/utils/version'
 import { useTRPC } from '@/trpc/client'
 import { AlertDialog } from '@/ui/alert-dialog'
 import { E2BBadge } from '@/ui/brand'
@@ -36,7 +35,6 @@ import {
   UnlockIcon,
 } from '@/ui/primitives/icons'
 import { Loader } from '@/ui/primitives/loader'
-import ResourceUsage from '../../common/resource-usage'
 import { useDashboard } from '../../context'
 
 function E2BTemplateBadge() {
@@ -311,28 +309,6 @@ export function TemplateNameCell({
   )
 }
 
-export function CpuCell({
-  row,
-}: CellContext<Template | DefaultTemplate, unknown>) {
-  const cpuCount = row.getValue('cpuCount') as number
-  return (
-    <div className="w-full flex justify-end">
-      <ResourceUsage type="cpu" total={cpuCount} mode="simple" />
-    </div>
-  )
-}
-
-export function MemoryCell({
-  row,
-}: CellContext<Template | DefaultTemplate, unknown>) {
-  const memoryMB = row.getValue('memoryMB') as number
-  return (
-    <div className="w-full flex justify-end">
-      <ResourceUsage type="mem" total={memoryMB} mode="simple" />
-    </div>
-  )
-}
-
 export function CreatedAtCell({
   getValue,
 }: CellContext<Template | DefaultTemplate, unknown>) {
@@ -406,36 +382,3 @@ export function VisibilityCell({
     </Badge>
   )
 }
-
-const INVALID_ENVD_VERSION = '0.0.1'
-const SDK_V2_MINIMAL_ENVD_VERSION = '0.2.0'
-
-export function EnvdVersionCell({
-  getValue,
-}: CellContext<Template | DefaultTemplate, unknown>) {
-  const valueString = getValue() as string
-  const versionValue =
-    valueString && valueString !== INVALID_ENVD_VERSION ? valueString : null
-
-  const isNotV2Compatible = versionValue
-    ? isVersionCompatible(versionValue, SDK_V2_MINIMAL_ENVD_VERSION) === false
-    : false
-  return (
-    <div
-      className={cn(
-        'text-fg-tertiary whitespace-nowrap font-mono flex flex-row gap-1.5',
-        {
-          'text-accent-error-highlight': isNotV2Compatible,
-        }
-      )}
-    >
-      {versionValue ?? '--'}
-      {isNotV2Compatible && (
-        <HelpTooltip>
-          The envd version is not compatible with the SDK v2. To update the envd
-          version, you need to rebuild the template.
-        </HelpTooltip>
-      )}
-    </div>
-  )
-}
diff --git a/src/features/dashboard/templates/list/table-config.tsx b/src/features/dashboard/templates/list/table-config.tsx
index 94f21124a..6909d1407 100644
--- a/src/features/dashboard/templates/list/table-config.tsx
+++ b/src/features/dashboard/templates/list/table-config.tsx
@@ -10,10 +10,7 @@ import { useMemo } from 'react'
 import type { DefaultTemplate, Template } from '@/core/modules/templates/models'
 import {
   ActionsCell,
-  CpuCell,
   CreatedAtCell,
-  EnvdVersionCell,
-  MemoryCell,
   TemplateIdCell,
   TemplateNameCell,
   UpdatedAtCell,
@@ -55,22 +52,6 @@ export const useColumns = (deps: unknown[]) => {
         enableSorting: false,
         cell: TemplateIdCell,
       },
-      {
-        accessorKey: 'cpuCount',
-        header: 'CPU',
-        size: 64,
-        enableResizing: false,
-        cell: CpuCell,
-        enableSorting: false,
-      },
-      {
-        accessorKey: 'memoryMB',
-        header: 'Memory',
-        size: 80,
-        enableResizing: false,
-        cell: MemoryCell,
-        enableSorting: false,
-      },
       {
         accessorKey: 'createdAt',
         enableGlobalFilter: true,
@@ -106,14 +87,6 @@ export const useColumns = (deps: unknown[]) => {
         enableSorting: false,
         filterFn: 'equals',
       },
-      {
-        accessorKey: 'envdVersion',
-        header: 'ENVD Ver.',
-        size: 40,
-        enableResizing: false,
-        cell: EnvdVersionCell,
-        enableSorting: false,
-      },
       {
         id: 'actions',
         enableSorting: false,

From 6b81f91ecab308f6c80f54630a7ec8b9c5e28cb9 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 16 Jun 2026 15:48:01 +0200
Subject: [PATCH 2/3] feat: refactor builds table to TanStack

---
 src/core/modules/builds/models.ts             |   1 +
 .../dashboard/templates/builds/header.tsx     |   2 +-
 .../dashboard/templates/builds/table-body.tsx |  74 ++++
 .../templates/builds/table-cells.tsx          |   7 +-
 .../templates/builds/table-config.tsx         | 124 +++++++
 .../dashboard/templates/builds/table.tsx      | 335 +++++++-----------
 6 files changed, 331 insertions(+), 212 deletions(-)
 create mode 100644 src/features/dashboard/templates/builds/table-body.tsx
 create mode 100644 src/features/dashboard/templates/builds/table-config.tsx

diff --git a/src/core/modules/builds/models.ts b/src/core/modules/builds/models.ts
index 78b314d66..463d10552 100644
--- a/src/core/modules/builds/models.ts
+++ b/src/core/modules/builds/models.ts
@@ -22,6 +22,7 @@ type _BuildStatusExhaustiveCheck = AssertTrue<
 // TypeCheck: End
 
 export const BuildStatusSchema = z.enum(BUILD_STATUS_VALUES)
+
 export interface ListedBuildModel {
   id: string
   // id or alias
diff --git a/src/features/dashboard/templates/builds/header.tsx b/src/features/dashboard/templates/builds/header.tsx
index 2c783b8d8..e0f024c5b 100644
--- a/src/features/dashboard/templates/builds/header.tsx
+++ b/src/features/dashboard/templates/builds/header.tsx
@@ -102,7 +102,7 @@ export default function BuildsHeader() {
   }
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-row items-center gap-1">
       <Input
         placeholder="Build ID, Template ID or Name"
         className="w-full max-w-62"
diff --git a/src/features/dashboard/templates/builds/table-body.tsx b/src/features/dashboard/templates/builds/table-body.tsx
new file mode 100644
index 000000000..5f7add7e8
--- /dev/null
+++ b/src/features/dashboard/templates/builds/table-body.tsx
@@ -0,0 +1,74 @@
+import { flexRender, type Table } from '@tanstack/react-table'
+import type { RefObject } from 'react'
+import type { ListedBuildModel } from '@/core/modules/builds/models'
+import { useVirtualRows } from '@/lib/hooks/use-virtual-rows'
+import { cn } from '@/lib/utils'
+import { DataTableBody, DataTableCell, DataTableRow } from '@/ui/data-table'
+import { columnClassName, isRightAlignedColumn } from './table-config'
+
+const ROW_HEIGHT_PX = 40
+const VIRTUAL_OVERSCAN = 8
+const INITIAL_FALLBACK_ROW_COUNT = 100
+
+interface BuildsTableBodyProps {
+  table: Table<ListedBuildModel>
+  scrollRef: RefObject<HTMLDivElement | null>
+  onRowClick: (build: ListedBuildModel) => void
+}
+
+export function BuildsTableBody({
+  table,
+  scrollRef,
+  onRowClick,
+}: BuildsTableBodyProps) {
+  'use no memo'
+
+  const rows = table.getRowModel().rows
+  const {
+    virtualRows,
+    totalHeight: virtualizedTotalHeight,
+    paddingTop: virtualPaddingTop,
+  } = useVirtualRows<ListedBuildModel>({
+    rows,
+    scrollRef,
+    estimateSizePx: ROW_HEIGHT_PX,
+    overscan: VIRTUAL_OVERSCAN,
+  })
+
+  const renderedRows =
+    virtualRows.length > 0
+      ? virtualRows
+      : rows.slice(0, INITIAL_FALLBACK_ROW_COUNT)
+
+  return (
+    <DataTableBody virtualizedTotalHeight={virtualizedTotalHeight}>
+      {virtualPaddingTop > 0 && <div style={{ height: virtualPaddingTop }} />}
+      {renderedRows.map((row) => {
+        const isBuilding = row.original.status === 'building'
+
+        return (
+          <DataTableRow
+            key={row.id}
+            className={cn('h-10 cursor-pointer hover:bg-bg-hover', {
+              'bg-bg-1 animate-pulse': isBuilding,
+            })}
+            onClick={() => onRowClick(row.original)}
+          >
+            {row.getVisibleCells().map((cell) => (
+              <DataTableCell
+                key={cell.id}
+                cell={cell}
+                className={cn(
+                  columnClassName(cell.column.id),
+                  isRightAlignedColumn(cell.column.id) && 'justify-end'
+                )}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </DataTableCell>
+            ))}
+          </DataTableRow>
+        )
+      })}
+    </DataTableBody>
+  )
+}
diff --git a/src/features/dashboard/templates/builds/table-cells.tsx b/src/features/dashboard/templates/builds/table-cells.tsx
index c918834be..fff79bb87 100644
--- a/src/features/dashboard/templates/builds/table-cells.tsx
+++ b/src/features/dashboard/templates/builds/table-cells.tsx
@@ -31,9 +31,10 @@ export function BuildId({ id }: { id: string }) {
   return (
     <CopyButtonInline
       value={id}
+      truncate={false}
       className="w-full text-left text-fg-tertiary font-mono prose-table-numeric"
     >
-      {id.slice(0, 6)}...{id.slice(-6)}
+      {id.slice(0, 7)}...{id.slice(-5)}
     </CopyButtonInline>
   )
 }
@@ -160,7 +161,7 @@ export function Status({ status, statusMessage }: StatusProps) {
   const showReason = status === 'failed' && Boolean(statusMessage)
 
   return (
-    <div className="flex items-center gap-3 min-w-0">
+    <div className="flex items-center gap-3 min-w-0 shrink-0">
       {showReason ? (
         <Tooltip>
           <TooltipTrigger asChild>{badge}</TooltipTrigger>
@@ -177,7 +178,7 @@ export function Status({ status, statusMessage }: StatusProps) {
 
 export function Cpu({ cpuCount }: { cpuCount: number }) {
   return (
-    <div className="w-full flex justify-center">
+    <div className="w-full flex justify-end">
       <ResourceUsage type="cpu" total={cpuCount} mode="simple" />
     </div>
   )
diff --git a/src/features/dashboard/templates/builds/table-config.tsx b/src/features/dashboard/templates/builds/table-config.tsx
new file mode 100644
index 000000000..9337a635f
--- /dev/null
+++ b/src/features/dashboard/templates/builds/table-config.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  type TableOptions,
+} from '@tanstack/react-table'
+import type { ListedBuildModel } from '@/core/modules/builds/models'
+import {
+  BuildId,
+  Cpu,
+  Duration,
+  Envd,
+  Memory,
+  StartedAt,
+  Status,
+  Storage,
+  Template,
+} from './table-cells'
+
+export const fallbackData: ListedBuildModel[] = []
+
+const RIGHT_ALIGNED_COLUMNS = new Set([
+  'cpuCount',
+  'memoryMB',
+  'diskSizeMB',
+  'envdVersion',
+  'createdAt',
+  'duration',
+])
+
+export const isRightAlignedColumn = (id: string) =>
+  RIGHT_ALIGNED_COLUMNS.has(id)
+
+// Flex behavior per column, applied to both header and body cells. Columns are
+// fixed-width by default (shrink-0 → horizontal scroll); Template grows to fill
+// the leftover space.
+const COLUMN_CLASSNAMES: Record<string, string> = {
+  template: 'flex-1 min-w-[160px]',
+}
+
+export const columnClassName = (id: string) =>
+  COLUMN_CLASSNAMES[id] ?? 'shrink-0'
+
+export const buildsColumns: ColumnDef<ListedBuildModel>[] = [
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    size: 76,
+    cell: ({ row }) => (
+      <Status
+        status={row.original.status}
+        statusMessage={row.original.statusMessage}
+      />
+    ),
+  },
+  {
+    accessorKey: 'template',
+    header: 'Template',
+    size: 160,
+    cell: ({ row }) => (
+      <Template
+        template={row.original.template}
+        templateId={row.original.templateId}
+      />
+    ),
+  },
+  {
+    accessorKey: 'id',
+    header: 'ID',
+    size: 128,
+    cell: ({ row }) => <BuildId id={row.original.id} />,
+  },
+  {
+    accessorKey: 'cpuCount',
+    header: 'CPU',
+    size: 64,
+    cell: ({ row }) => <Cpu cpuCount={row.original.cpuCount} />,
+  },
+  {
+    accessorKey: 'memoryMB',
+    header: 'Memory',
+    size: 80,
+    cell: ({ row }) => <Memory memoryMB={row.original.memoryMB} />,
+  },
+  {
+    accessorKey: 'diskSizeMB',
+    header: 'Storage',
+    size: 80,
+    cell: ({ row }) => <Storage diskSizeMB={row.original.diskSizeMB} />,
+  },
+  {
+    accessorKey: 'envdVersion',
+    header: 'ENVD Ver.',
+    size: 96,
+    cell: ({ row }) => <Envd version={row.original.envdVersion} />,
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Started',
+    size: 110,
+    cell: ({ row }) => <StartedAt timestamp={row.original.createdAt} />,
+  },
+  {
+    accessorKey: 'duration',
+    header: 'Duration',
+    size: 110,
+    cell: ({ row }) => (
+      <div className="w-full text-end">
+        <Duration
+          createdAt={row.original.createdAt}
+          finishedAt={row.original.finishedAt}
+          isBuilding={row.original.status === 'building'}
+        />
+      </div>
+    ),
+  },
+]
+
+export const buildsTableConfig: Partial<TableOptions<ListedBuildModel>> = {
+  getCoreRowModel: getCoreRowModel(),
+  enableSorting: false,
+  enableColumnResizing: false,
+}
diff --git a/src/features/dashboard/templates/builds/table.tsx b/src/features/dashboard/templates/builds/table.tsx
index 37e6b42c3..132688a2a 100644
--- a/src/features/dashboard/templates/builds/table.tsx
+++ b/src/features/dashboard/templates/builds/table.tsx
@@ -6,6 +6,11 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
+import {
+  flexRender,
+  type TableOptions,
+  useReactTable,
+} from '@tanstack/react-table'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { PROTECTED_URLS } from '@/configs/urls'
@@ -13,50 +18,34 @@ import type {
   ListedBuildModel,
   RunningBuildStatusModel,
 } from '@/core/modules/builds/models'
+import { useColumnSizeVars } from '@/lib/hooks/use-column-size-vars'
 import { useRouteParams } from '@/lib/hooks/use-route-params'
-import { cn } from '@/lib/utils/ui'
+import { cn } from '@/lib/utils'
 import { useTRPC } from '@/trpc/client'
+import {
+  DataTable,
+  DataTableHead,
+  DataTableHeader,
+  DataTableRow,
+} from '@/ui/data-table'
 import { BackToTopButton, LoadMoreButton } from '@/ui/pagination-buttons'
-import { ArrowDownIcon } from '@/ui/primitives/icons'
 import { Loader } from '@/ui/primitives/loader'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/ui/primitives/table'
+import { SIDEBAR_TRANSITION_CLASSNAMES } from '@/ui/primitives/sidebar'
 import BuildsEmpty from './empty'
+import { BuildsTableBody } from './table-body'
 import {
-  BuildId,
-  Cpu,
-  Duration,
-  Envd,
-  Memory,
-  StartedAt,
-  Status,
-  Storage,
-  Template,
-} from './table-cells'
+  buildsColumns,
+  buildsTableConfig,
+  columnClassName,
+  fallbackData,
+  isRightAlignedColumn,
+} from './table-config'
 import useFilters from './use-filters'
 
 const BUILDS_REFETCH_INTERVAL_MS = 15_000
 const RUNNING_BUILD_POLL_INTERVAL_MS = 3_000
 const MAX_CACHED_PAGES = 3
 
-const COLUMN_WIDTHS = {
-  id: 152,
-  status: 96,
-  template: 192,
-  cpu: 72,
-  memory: 88,
-  storage: 88,
-  envd: 98,
-  started: 126,
-  duration: 96,
-} as const
-
 const BuildsTable = () => {
   const trpc = useTRPC()
   const queryClient = useQueryClient()
@@ -70,6 +59,12 @@ const BuildsTable = () => {
     buildIdOrTemplate
   )
 
+  const queryInput = {
+    teamSlug,
+    statuses,
+    buildIdOrTemplate,
+  }
+
   // Builds list query
   const {
     data: paginatedBuilds,
@@ -80,17 +75,14 @@ const BuildsTable = () => {
     isPending: isInitialLoad,
     error: buildsError,
   } = useInfiniteQuery(
-    trpc.builds.list.infiniteQueryOptions(
-      { teamSlug, statuses, buildIdOrTemplate },
-      {
-        getNextPageParam: (page) => page.nextCursor ?? undefined,
-        placeholderData: keepPreviousData,
-        retry: 3,
-        refetchInterval: BUILDS_REFETCH_INTERVAL_MS,
-        refetchIntervalInBackground: false,
-        maxPages: MAX_CACHED_PAGES,
-      }
-    )
+    trpc.builds.list.infiniteQueryOptions(queryInput, {
+      getNextPageParam: (page) => page.nextCursor ?? undefined,
+      placeholderData: keepPreviousData,
+      retry: 3,
+      refetchInterval: BUILDS_REFETCH_INTERVAL_MS,
+      refetchIntervalInBackground: false,
+      maxPages: MAX_CACHED_PAGES,
+    })
   )
 
   const builds = useMemo(
@@ -136,12 +128,17 @@ const BuildsTable = () => {
     [builds, runningStatusesData]
   )
 
+  const table = useReactTable<ListedBuildModel>({
+    ...buildsTableConfig,
+    data: buildsWithLiveStatus ?? fallbackData,
+    columns: buildsColumns,
+  } as TableOptions<ListedBuildModel>)
+
+  const columnSizeVars = useColumnSizeVars(table)
+
   // Handlers
-  const buildsQueryKey = trpc.builds.list.infiniteQueryOptions({
-    teamSlug,
-    statuses,
-    buildIdOrTemplate,
-  }).queryKey
+  const buildsQueryKey =
+    trpc.builds.list.infiniteQueryOptions(queryInput).queryKey
 
   const handleLoadMore = useCallback(() => {
     fetchNextPage()
@@ -154,6 +151,14 @@ const BuildsTable = () => {
     }
   }, [queryClient, buildsQueryKey])
 
+  // Reset scroll when the query inputs change.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: these are change triggers, not values read in the effect
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0
+    }
+  }, [statuses, buildIdOrTemplate])
+
   // Derived UI state
   const hasData = buildsWithLiveStatus.length > 0
   const showLoader = isInitialLoad && !hasData
@@ -161,182 +166,95 @@ const BuildsTable = () => {
   const showFilterRefetchingOverlay = isFilterRefetching && hasData
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden relative">
-      <div
+    <div
+      className={cn(
+        'flex-1 min-h-0 w-full overflow-x-auto md:max-w-[calc(calc(100svw-48px)-var(--sidebar-width-active))]',
+        SIDEBAR_TRANSITION_CLASSNAMES
+      )}
+    >
+      <DataTable
         ref={scrollContainerRef}
-        className="min-h-0 flex-1 overflow-y-auto overflow-x-auto lg:overflow-x-hidden"
+        className={cn(
+          'h-full overflow-y-auto md:min-w-[calc(100svw-48px-var(--sidebar-width-active))]',
+          SIDEBAR_TRANSITION_CLASSNAMES
+        )}
+        style={{ ...columnSizeVars }}
       >
-        <Table suppressHydrationWarning>
-          <colgroup>
-            <col style={colStyle(COLUMN_WIDTHS.status)} />
-            <col style={colStyle(COLUMN_WIDTHS.template)} />
-            <col style={colStyle(COLUMN_WIDTHS.id)} />
-            <col style={colStyle(COLUMN_WIDTHS.cpu)} />
-            <col style={colStyle(COLUMN_WIDTHS.memory)} />
-            <col style={colStyle(COLUMN_WIDTHS.storage)} />
-            <col style={colStyle(COLUMN_WIDTHS.envd)} />
-            <col style={colStyle(COLUMN_WIDTHS.started)} />
-            <col style={colStyle(COLUMN_WIDTHS.duration)} />
-            <col />
-          </colgroup>
-
-          <TableHeader className="sticky top-0 z-10 bg-bg">
-            <TableRow>
-              <TableHead>Status</TableHead>
-              <TableHead>Template</TableHead>
-              <TableHead>ID</TableHead>
-              <TableHead className="text-end">CPU</TableHead>
-              <TableHead className="text-end">Memory</TableHead>
-              <TableHead className="text-end">Storage</TableHead>
-              <TableHead className="text-end">ENVD Ver.</TableHead>
-              <TableHead>
-                <span className="inline-flex items-center gap-1 text-fg">
-                  Started
-                  <ArrowDownIcon className="size-3" />
-                </span>
-              </TableHead>
-              <TableHead className="text-end">Duration</TableHead>
-              <th />
-            </TableRow>
-          </TableHeader>
-
-          <TableBody
+        <DataTableHeader className="sticky top-0 z-10 bg-bg">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <DataTableRow key={headerGroup.id} className="border-b-0">
+              {headerGroup.headers.map((header) => (
+                <DataTableHead
+                  key={header.id}
+                  header={header}
+                  className={columnClassName(header.id)}
+                  align={isRightAlignedColumn(header.id) ? 'right' : 'left'}
+                >
+                  <span>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </span>
+                </DataTableHead>
+              ))}
+            </DataTableRow>
+          ))}
+        </DataTableHeader>
+
+        {showLoader && (
+          <div className="h-[35svh] w-full flex justify-center items-center">
+            <Loader variant="slash" size="lg" />
+          </div>
+        )}
+
+        {showEmpty && <BuildsEmpty error={buildsError?.message} />}
+
+        {hasData && (
+          <div
             className={
               showFilterRefetchingOverlay ? 'opacity-70 transition-opacity' : ''
             }
           >
-            {showLoader && (
-              <TableRow>
-                <TableCell colSpan={10}>
-                  <div className="h-[35svh] w-full flex justify-center items-center">
-                    <Loader variant="slash" size="lg" />
-                  </div>
-                </TableCell>
-              </TableRow>
-            )}
-
-            {showEmpty && (
-              <TableRow>
-                <TableCell colSpan={10}>
-                  <BuildsEmpty error={buildsError?.message} />
-                </TableCell>
-              </TableRow>
+            {hasScrolledPastInitialPages && (
+              <div className="py-2 text-center text-fg-tertiary">
+                <BackToTopButton onBackToTop={handleBackToTop} />
+              </div>
             )}
 
-            {hasData && (
-              <>
-                {hasScrolledPastInitialPages && (
-                  <TableRow>
-                    <TableCell
-                      colSpan={10}
-                      className="text-center max-lg:text-start text-fg-tertiary"
-                    >
-                      <BackToTopButton onBackToTop={handleBackToTop} />
-                    </TableCell>
-                  </TableRow>
-                )}
-
-                {buildsWithLiveStatus.map((build) => {
-                  const isBuilding = build.status === 'building'
-
-                  return (
-                    <TableRow
-                      key={build.id}
-                      className={cn(
-                        'transition-colors cursor-pointer hover:bg-bg-hover',
-                        {
-                          'bg-bg-1 animate-pulse': isBuilding,
-                        }
-                      )}
-                      onClick={() => {
-                        router.push(
-                          PROTECTED_URLS.TEMPLATE_BUILD(
-                            teamSlug,
-                            build.templateId,
-                            build.id
-                          )
-                        )
-                      }}
-                    >
-                      <TableCell
-                        className="py-1.5"
-                        style={{ maxWidth: COLUMN_WIDTHS.status }}
-                      >
-                        <Status
-                          status={build.status}
-                          statusMessage={build.statusMessage}
-                        />
-                      </TableCell>
-                      <TableCell
-                        className="py-1.5 overflow-hidden"
-                        style={{ maxWidth: COLUMN_WIDTHS.template }}
-                      >
-                        <Template
-                          template={build.template}
-                          templateId={build.templateId}
-                        />
-                      </TableCell>
-                      <TableCell
-                        className="py-1.5 overflow-hidden"
-                        style={{ maxWidth: COLUMN_WIDTHS.id }}
-                      >
-                        <BuildId id={build.id} />
-                      </TableCell>
-                      <TableCell className="py-1.5">
-                        <Cpu cpuCount={build.cpuCount} />
-                      </TableCell>
-                      <TableCell className="py-1.5">
-                        <Memory memoryMB={build.memoryMB} />
-                      </TableCell>
-                      <TableCell className="py-1.5">
-                        <Storage diskSizeMB={build.diskSizeMB} />
-                      </TableCell>
-                      <TableCell className="py-1.5">
-                        <Envd version={build.envdVersion} />
-                      </TableCell>
-                      <TableCell className="py-1.5">
-                        <StartedAt timestamp={build.createdAt} />
-                      </TableCell>
-                      <TableCell className="py-1.5 text-end">
-                        <Duration
-                          createdAt={build.createdAt}
-                          finishedAt={build.finishedAt}
-                          isBuilding={isBuilding}
-                        />
-                      </TableCell>
-                      <TableCell className="py-1.5 w-full" />
-                    </TableRow>
+            <BuildsTableBody
+              table={table}
+              scrollRef={scrollContainerRef}
+              onRowClick={(build) =>
+                router.push(
+                  PROTECTED_URLS.TEMPLATE_BUILD(
+                    teamSlug,
+                    build.templateId,
+                    build.id
                   )
-                })}
-
-                {hasNextPage && (
-                  <TableRow>
-                    <TableCell
-                      colSpan={10}
-                      className="text-center max-lg:text-start text-fg-tertiary"
-                    >
-                      <LoadMoreButton
-                        isLoading={isFetchingNextPage}
-                        onLoadMore={handleLoadMore}
-                      />
-                    </TableCell>
-                  </TableRow>
-                )}
-              </>
+                )
+              }
+            />
+
+            {hasNextPage && (
+              <div className="py-2 text-center text-fg-tertiary">
+                <LoadMoreButton
+                  isLoading={isFetchingNextPage}
+                  onLoadMore={handleLoadMore}
+                />
+              </div>
             )}
-          </TableBody>
-        </Table>
-      </div>
+          </div>
+        )}
+      </DataTable>
     </div>
   )
 }
 
 export default BuildsTable
 
-function colStyle(width: number) {
-  return { width, minWidth: width, maxWidth: width }
-}
-
 function useFilterChangeTracking(
   statuses: string[],
   buildIdOrTemplate: string | undefined
@@ -344,6 +262,7 @@ function useFilterChangeTracking(
   const [isFilterRefetching, setIsFilterRefetching] = 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

From 0aefc80607b045d86b4568150c26d790af01f035 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 16 Jun 2026 15:49:01 +0200
Subject: [PATCH 3/3] feat: add cpu/memory resources filter to builds

---
 spec/openapi.dashboard-api.yaml               |  20 ++++
 src/core/modules/builds/repository.server.ts  |   4 +
 src/core/server/api/routers/builds.ts         |   7 +-
 .../shared/contracts/dashboard-api.types.ts   |   8 ++
 .../dashboard/common/resources-filter.tsx     | 103 +++++++++++++++++
 .../templates/builds/filter-params.ts         |   3 +
 .../dashboard/templates/builds/header.tsx     | 106 +++++++++++++-----
 .../dashboard/templates/builds/table.tsx      |  16 ++-
 .../templates/builds/use-filters.tsx          |  15 +++
 9 files changed, 250 insertions(+), 32 deletions(-)
 create mode 100644 src/features/dashboard/common/resources-filter.tsx

diff --git a/spec/openapi.dashboard-api.yaml b/spec/openapi.dashboard-api.yaml
index 24c59aa12..2a725c054 100644
--- a/spec/openapi.dashboard-api.yaml
+++ b/spec/openapi.dashboard-api.yaml
@@ -66,6 +66,24 @@ components:
       description: Cursor returned by the previous list response in `created_at|build_id` format.
       schema:
         type: string
+    builds_cpu_count:
+      name: cpuCount
+      in: query
+      required: false
+      description: Filter builds by exact vCPU count.
+      schema:
+        type: integer
+        format: int32
+        minimum: 1
+    builds_memory_mb:
+      name: memoryMB
+      in: query
+      required: false
+      description: Filter builds by exact memory size in MB.
+      schema:
+        type: integer
+        format: int32
+        minimum: 1
     build_id_or_template:
       name: build_id_or_template
       in: query
@@ -905,6 +923,8 @@ paths:
       parameters:
         - $ref: "#/components/parameters/build_id_or_template"
         - $ref: "#/components/parameters/build_statuses"
+        - $ref: "#/components/parameters/builds_cpu_count"
+        - $ref: "#/components/parameters/builds_memory_mb"
         - $ref: "#/components/parameters/builds_limit"
         - $ref: "#/components/parameters/builds_cursor"
       responses:
diff --git a/src/core/modules/builds/repository.server.ts b/src/core/modules/builds/repository.server.ts
index df02e1ae4..f9a234a42 100644
--- a/src/core/modules/builds/repository.server.ts
+++ b/src/core/modules/builds/repository.server.ts
@@ -57,6 +57,8 @@ function normalizeListBuildsLimit(limit?: number): number {
 }
 
 interface ListBuildsOptions {
+  cpuCount?: number
+  memoryMB?: number
   limit?: number
   cursor?: string
 }
@@ -101,6 +103,8 @@ export function createBuildsRepository(
           query: {
             build_id_or_template: buildIdOrTemplate?.trim() || undefined,
             statuses,
+            cpuCount: options.cpuCount,
+            memoryMB: options.memoryMB,
             limit,
             cursor: options.cursor,
           },
diff --git a/src/core/server/api/routers/builds.ts b/src/core/server/api/routers/builds.ts
index 98aab5bf8..536991f84 100644
--- a/src/core/server/api/routers/builds.ts
+++ b/src/core/server/api/routers/builds.ts
@@ -29,17 +29,22 @@ export const buildsRouter = createTRPCRouter({
       z.object({
         buildIdOrTemplate: z.string().optional(),
         statuses: z.array(BuildStatusSchema),
+        cpuCount: z.number().int().min(1).optional(),
+        memoryMB: z.number().int().min(1).optional(),
         limit: z.number().min(1).max(100).default(50),
         cursor: z.string().optional(),
       })
     )
     .query(async ({ ctx, input }) => {
-      const { buildIdOrTemplate, statuses, limit, cursor } = input
+      const { buildIdOrTemplate, statuses, cpuCount, memoryMB, limit, cursor } =
+        input
 
       const result = await ctx.buildsRepository.listBuilds(
         buildIdOrTemplate,
         statuses,
         {
+          cpuCount,
+          memoryMB,
           limit,
           cursor,
         }
diff --git a/src/core/shared/contracts/dashboard-api.types.ts b/src/core/shared/contracts/dashboard-api.types.ts
index 562a37e03..b42f24832 100644
--- a/src/core/shared/contracts/dashboard-api.types.ts
+++ b/src/core/shared/contracts/dashboard-api.types.ts
@@ -55,6 +55,10 @@ export interface paths {
           build_id_or_template?: components['parameters']['build_id_or_template']
           /** @description Comma-separated list of build statuses to include. */
           statuses?: components['parameters']['build_statuses']
+          /** @description Filter builds by exact vCPU count. */
+          cpuCount?: components['parameters']['builds_cpu_count']
+          /** @description Filter builds by exact memory size in MB. */
+          memoryMB?: components['parameters']['builds_memory_mb']
           /** @description Maximum number of items to return per page. */
           limit?: components['parameters']['builds_limit']
           /** @description Cursor returned by the previous list response in `created_at|build_id` format. */
@@ -1229,6 +1233,10 @@ export interface components {
     builds_limit: number
     /** @description Cursor returned by the previous list response in `created_at|build_id` format. */
     builds_cursor: string
+    /** @description Filter builds by exact vCPU count. */
+    builds_cpu_count: number
+    /** @description Filter builds by exact memory size in MB. */
+    builds_memory_mb: number
     /** @description Optional filter by build identifier, template identifier, or template alias. */
     build_id_or_template: string
     /** @description Comma-separated list of build statuses to include. */
diff --git a/src/features/dashboard/common/resources-filter.tsx b/src/features/dashboard/common/resources-filter.tsx
new file mode 100644
index 000000000..f8a0902b6
--- /dev/null
+++ b/src/features/dashboard/common/resources-filter.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { NumberInput } from '@/ui/number-input'
+import { Button } from '@/ui/primitives/button'
+import { Label } from '@/ui/primitives/label'
+import { Separator } from '@/ui/primitives/separator'
+
+export interface ResourcesFilterValue {
+  cpuCount?: number
+  memoryMB?: number
+}
+
+interface ResourcesFilterProps {
+  value: ResourcesFilterValue
+  onChange: (value: ResourcesFilterValue) => void
+  className?: string
+}
+
+const formatMemoryDisplay = (memoryValue: number) => {
+  if (memoryValue === 0) return 'Unfiltered'
+
+  return memoryValue < 1024 ? `${memoryValue} MB` : `${memoryValue / 1024} GB`
+}
+
+/**
+ * State-agnostic CPU + memory filter. The parent owns the value (URL params,
+ * a store, …) and is responsible for any debouncing.
+ */
+export function ResourcesFilter({
+  value,
+  onChange,
+  className,
+}: ResourcesFilterProps) {
+  const cpu = value.cpuCount ?? 0
+  const memory = value.memoryMB ?? 0
+
+  const handleCpuChange = (next: number) => {
+    onChange({ cpuCount: next || undefined, memoryMB: value.memoryMB })
+  }
+
+  const handleMemoryChange = (next: number) => {
+    onChange({ cpuCount: value.cpuCount, memoryMB: next || undefined })
+  }
+
+  return (
+    <div className={cn('w-80 p-4', className)}>
+      <div className="grid gap-4">
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label>CPU Cores</Label>
+            <span className="text-accent-main-highlight text-xs">
+              {cpu === 0 ? 'Unfiltered' : `${cpu} core${cpu === 1 ? '' : 's'}`}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <NumberInput
+              value={cpu}
+              onChange={handleCpuChange}
+              min={0}
+              max={8}
+              step={1}
+              className="w-full"
+            />
+            {cpu > 0 && (
+              <Button
+                variant="secondary"
+                onClick={() => handleCpuChange(0)}
+                className="h-9 text-xs"
+              >
+                Clear
+              </Button>
+            )}
+          </div>
+        </div>
+        <Separator />
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label>Memory</Label>
+            <span className="text-accent-main-highlight text-xs">
+              {formatMemoryDisplay(memory)}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <NumberInput
+              value={memory}
+              onChange={handleMemoryChange}
+              min={0}
+              max={8192}
+              step={512}
+              className="w-full"
+            />
+            {memory > 0 && (
+              <Button variant="secondary" onClick={() => handleMemoryChange(0)}>
+                Clear
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/features/dashboard/templates/builds/filter-params.ts b/src/features/dashboard/templates/builds/filter-params.ts
index 05acc834d..d9d950df6 100644
--- a/src/features/dashboard/templates/builds/filter-params.ts
+++ b/src/features/dashboard/templates/builds/filter-params.ts
@@ -1,6 +1,7 @@
 import {
   createLoader,
   parseAsArrayOf,
+  parseAsInteger,
   parseAsString,
   parseAsStringEnum,
 } from 'nuqs/server'
@@ -10,6 +11,8 @@ export const templateBuildsFilterParams = {
     parseAsStringEnum(['building', 'failed', 'success'])
   ),
   buildIdOrTemplate: parseAsString,
+  cpuCount: parseAsInteger,
+  memoryMB: parseAsInteger,
 }
 
 export const loadTemplateBuildsFilters = createLoader(
diff --git a/src/features/dashboard/templates/builds/header.tsx b/src/features/dashboard/templates/builds/header.tsx
index e0f024c5b..2debfb746 100644
--- a/src/features/dashboard/templates/builds/header.tsx
+++ b/src/features/dashboard/templates/builds/header.tsx
@@ -11,7 +11,17 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/ui/primitives/dropdown-menu'
+import { FilterIcon } from '@/ui/primitives/icons'
 import { Input } from '@/ui/primitives/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/ui/primitives/popover'
+import {
+  ResourcesFilter,
+  type ResourcesFilterValue,
+} from '../../common/resources-filter'
 import { Status } from './table-cells'
 import useFilters from './use-filters'
 
@@ -63,14 +73,25 @@ const STATUS_OPTIONS: Array<{ value: BuildStatus; label: string }> = [
 ]
 
 export default function BuildsHeader() {
-  const { statuses, setStatuses, buildIdOrTemplate, setBuildIdOrTemplate } =
-    useFilters()
+  const {
+    statuses,
+    setStatuses,
+    buildIdOrTemplate,
+    setBuildIdOrTemplate,
+    cpuCount,
+    memoryMB,
+    setResources,
+  } = useFilters()
 
   const [localBuildIdOrTemplate, setLocalBuildIdOrTemplate] = useState<string>(
     buildIdOrTemplate ?? ''
   )
 
   const [localStatuses, setLocalStatuses] = useState<BuildStatus[]>(statuses)
+  const [localResources, setLocalResources] = useState<ResourcesFilterValue>({
+    cpuCount,
+    memoryMB,
+  })
 
   useEffect(() => {
     setLocalBuildIdOrTemplate(buildIdOrTemplate ?? '')
@@ -80,6 +101,21 @@ export default function BuildsHeader() {
     setLocalStatuses(statuses)
   }, [statuses])
 
+  useEffect(() => {
+    setLocalResources({ cpuCount, memoryMB })
+  }, [cpuCount, memoryMB])
+
+  const handleResourcesChange = (next: {
+    cpuCount?: number
+    memoryMB?: number
+  }) => {
+    setLocalResources(next)
+    setResources(next)
+  }
+
+  const activeResourceCount =
+    (localResources.cpuCount ? 1 : 0) + (localResources.memoryMB ? 1 : 0)
+
   const toggleStatus = (status: BuildStatus) => {
     const isSelected = localStatuses.includes(status)
 
@@ -113,34 +149,52 @@ export default function BuildsHeader() {
         }}
       />
 
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="secondary" className="w-min pr-3 pl-2.5">
-            <StatusIcons selectedStatuses={localStatuses} /> Status •{' '}
-            {localStatuses.length}/{STATUS_OPTIONS.length}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuCheckboxItem
-            checked={localStatuses.length === STATUS_OPTIONS.length}
-            onCheckedChange={selectAllStatuses}
-            onSelect={(e) => e.preventDefault()}
-          >
-            All
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuSeparator />
-          {STATUS_OPTIONS.map((option) => (
+      <div className="flex items-center gap-1">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="secondary" className="w-min pr-3 pl-2.5">
+              <StatusIcons selectedStatuses={localStatuses} /> Status •{' '}
+              {localStatuses.length}/{STATUS_OPTIONS.length}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
             <DropdownMenuCheckboxItem
-              key={option.value}
-              checked={localStatuses.includes(option.value)}
-              onCheckedChange={() => toggleStatus(option.value)}
+              checked={localStatuses.length === STATUS_OPTIONS.length}
+              onCheckedChange={selectAllStatuses}
               onSelect={(e) => e.preventDefault()}
             >
-              <Status status={option.value} />
+              All
             </DropdownMenuCheckboxItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+            <DropdownMenuSeparator />
+            {STATUS_OPTIONS.map((option) => (
+              <DropdownMenuCheckboxItem
+                key={option.value}
+                checked={localStatuses.includes(option.value)}
+                onCheckedChange={() => toggleStatus(option.value)}
+                onSelect={(e) => e.preventDefault()}
+              >
+                <Status status={option.value} />
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="secondary" className="w-min gap-2 pr-3 pl-2.5">
+              <FilterIcon className="size-4 text-fg-tertiary" />
+              Filter
+              {activeResourceCount > 0 ? ` • ${activeResourceCount}` : ''}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-auto p-0">
+            <ResourcesFilter
+              value={localResources}
+              onChange={handleResourcesChange}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
     </div>
   )
 }
diff --git a/src/features/dashboard/templates/builds/table.tsx b/src/features/dashboard/templates/builds/table.tsx
index 132688a2a..96845269c 100644
--- a/src/features/dashboard/templates/builds/table.tsx
+++ b/src/features/dashboard/templates/builds/table.tsx
@@ -53,16 +53,20 @@ const BuildsTable = () => {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   const { teamSlug } = useRouteParams<'/dashboard/[teamSlug]/templates'>()
-  const { statuses, buildIdOrTemplate } = useFilters()
+  const { statuses, buildIdOrTemplate, cpuCount, memoryMB } = useFilters()
   const { isFilterRefetching, clearFilterRefetching } = useFilterChangeTracking(
     statuses,
-    buildIdOrTemplate
+    buildIdOrTemplate,
+    cpuCount,
+    memoryMB
   )
 
   const queryInput = {
     teamSlug,
     statuses,
     buildIdOrTemplate,
+    cpuCount,
+    memoryMB,
   }
 
   // Builds list query
@@ -157,7 +161,7 @@ const BuildsTable = () => {
     if (scrollContainerRef.current) {
       scrollContainerRef.current.scrollTop = 0
     }
-  }, [statuses, buildIdOrTemplate])
+  }, [statuses, buildIdOrTemplate, cpuCount, memoryMB])
 
   // Derived UI state
   const hasData = buildsWithLiveStatus.length > 0
@@ -257,7 +261,9 @@ export default BuildsTable
 
 function useFilterChangeTracking(
   statuses: string[],
-  buildIdOrTemplate: string | undefined
+  buildIdOrTemplate: string | undefined,
+  cpuCount: number | undefined,
+  memoryMB: number | undefined
 ) {
   const [isFilterRefetching, setIsFilterRefetching] = useState(false)
   const isFirstRender = useRef(true)
@@ -269,7 +275,7 @@ function useFilterChangeTracking(
       return
     }
     setIsFilterRefetching(true)
-  }, [statuses, buildIdOrTemplate])
+  }, [statuses, buildIdOrTemplate, cpuCount, memoryMB])
 
   const clearFilterRefetching = useCallback(() => {
     setIsFilterRefetching(false)
diff --git a/src/features/dashboard/templates/builds/use-filters.tsx b/src/features/dashboard/templates/builds/use-filters.tsx
index 03ca7b2b1..0a035584d 100644
--- a/src/features/dashboard/templates/builds/use-filters.tsx
+++ b/src/features/dashboard/templates/builds/use-filters.tsx
@@ -18,6 +18,8 @@ export default function useFilters() {
   )
 
   const buildIdOrTemplate = filters?.buildIdOrTemplate ?? undefined
+  const cpuCount = filters.cpuCount ?? undefined
+  const memoryMB = filters.memoryMB ?? undefined
 
   const setStatuses = useDebounceCallback((statuses: BuildStatus[]) => {
     setFilters({ statuses: statuses })
@@ -30,10 +32,23 @@ export default function useFilters() {
     300
   )
 
+  const setResources = useDebounceCallback(
+    (resources: { cpuCount?: number; memoryMB?: number }) => {
+      setFilters({
+        cpuCount: resources.cpuCount ?? null,
+        memoryMB: resources.memoryMB ?? null,
+      })
+    },
+    300
+  )
+
   return {
     statuses,
     buildIdOrTemplate,
+    cpuCount,
+    memoryMB,
     setStatuses,
     setBuildIdOrTemplate,
+    setResources,
   }
 }