diff --git a/ui/src/components/compare/ResourceComparisonCharts.tsx b/ui/src/components/compare/ResourceComparisonCharts.tsx
index 4974a7d56..65d2c4fba 100644
--- a/ui/src/components/compare/ResourceComparisonCharts.tsx
+++ b/ui/src/components/compare/ResourceComparisonCharts.tsx
@@ -1,66 +1,41 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ReactECharts from 'echarts-for-react'
 import { Cpu } from 'lucide-react'
-import type { TestEntry, ResourceTotals, SuiteTest } from '@/api/types'
+import type { TestEntry, StepResult, SuiteTest } from '@/api/types'
 import { formatBytes } from '@/utils/format'
 import { type ChartType, type CompareRun, type LabelMode, RUN_SLOTS, formatRunLabel } from './constants'
 import type { ZoomRange } from './MGasComparisonChart'
 import { useChartAreaClick } from './useChartAreaClick'
 import { formatTestNameLong } from '@/utils/eestName'
 import { useNameDisplayMode } from '@/hooks/useNameDisplayMode'
-
-interface AggregatedResourceData {
-  totals: ResourceTotals
-  timeTotalNs: number
-  memoryBytes: number
+import { SegmentedControl } from '@/components/shared/SegmentedControl'
+import {
+  aggregateResourceByStep,
+  DEFAULT_RESOURCE_STEP,
+  RESOURCE_STEP_OPTIONS,
+  type AggregatedResource,
+  type ResourceStep,
+  type StepResource,
+} from '@/utils/resourceStep'
+
+// stepResource normalises a per-test-result step into the shared helper's input.
+function stepResource(step?: StepResult): StepResource | undefined {
+  if (!step?.aggregated) return undefined
+
+  return { resourceTotals: step.aggregated.resource_totals, timeTotalNs: step.aggregated.time_total }
 }
 
-function getAggregatedResourceData(entry: TestEntry): AggregatedResourceData | undefined {
+function getAggregatedResourceData(entry: TestEntry, step: ResourceStep): AggregatedResource | undefined {
   if (!entry.steps) return undefined
 
-  const steps = [entry.steps.setup, entry.steps.test, entry.steps.cleanup].filter((s) => s?.aggregated?.resource_totals)
-
-  if (steps.length === 0) return undefined
-
-  let cpuUsec = 0
-  let memoryDelta = 0
-  let diskRead = 0
-  let diskWrite = 0
-  let diskReadOps = 0
-  let diskWriteOps = 0
-  let timeTotalNs = 0
-  let memoryBytes = 0
-
-  for (const step of steps) {
-    if (step?.aggregated) {
-      timeTotalNs += step.aggregated.time_total ?? 0
-      if (step.aggregated.resource_totals) {
-        const res = step.aggregated.resource_totals
-        cpuUsec += res.cpu_usec ?? 0
-        memoryDelta += res.memory_delta_bytes ?? 0
-        diskRead += res.disk_read_bytes ?? 0
-        diskWrite += res.disk_write_bytes ?? 0
-        diskReadOps += res.disk_read_iops ?? 0
-        diskWriteOps += res.disk_write_iops ?? 0
-        const stepMemory = res.memory_bytes ?? 0
-        if (stepMemory > memoryBytes) memoryBytes = stepMemory
-      }
-    }
-  }
-
-  return {
-    totals: {
-      cpu_usec: cpuUsec,
-      memory_delta_bytes: memoryDelta,
-      memory_bytes: memoryBytes,
-      disk_read_bytes: diskRead,
-      disk_write_bytes: diskWrite,
-      disk_read_iops: diskReadOps,
-      disk_write_iops: diskWriteOps,
+  return aggregateResourceByStep(
+    {
+      setup: stepResource(entry.steps.setup),
+      test: stepResource(entry.steps.test),
+      cleanup: stepResource(entry.steps.cleanup),
     },
-    timeTotalNs,
-    memoryBytes,
-  }
+    step,
+  )
 }
 
 function useDarkMode() {
@@ -114,7 +89,7 @@ function formatOps(ops: number): string {
   return `${(ops / 1_000_000).toFixed(1)}M`
 }
 
-function buildDataPoints(tests: Record<string, TestEntry>, nameFilter?: (name: string) => boolean, suiteTests?: SuiteTest[]): ResourceDataPoint[] {
+function buildDataPoints(tests: Record<string, TestEntry>, resStep: ResourceStep, nameFilter?: (name: string) => boolean, suiteTests?: SuiteTest[]): ResourceDataPoint[] {
   const suiteOrder = new Map<string, number>()
   if (suiteTests) {
     suiteTests.forEach((t, i) => suiteOrder.set(t.name, i + 1))
@@ -130,7 +105,7 @@ function buildDataPoints(tests: Record<string, TestEntry>, nameFilter?: (name: s
 
   const points: ResourceDataPoint[] = []
   sortedTests.forEach(([testName, test], index) => {
-    const agg = getAggregatedResourceData(test)
+    const agg = getAggregatedResourceData(test, resStep)
     if (agg) {
       const res = agg.totals
       let cpuPercent = 0
@@ -201,6 +176,7 @@ export function ResourceComparisonCharts({ runs, labelMode, testNameFilter, suit
   const [internalZoom, setInternalZoom] = useState({ start: 0, end: 100 })
   const zoomRange = externalZoom ?? internalZoom
   const prevZoomRef = useRef(zoomRange)
+  const [resStep, setResStep] = useState<ResourceStep>(DEFAULT_RESOURCE_STEP)
 
   const handleZoom = useCallback((start: number, end: number) => {
     if (prevZoomRef.current.start !== start || prevZoomRef.current.end !== end) {
@@ -212,8 +188,8 @@ export function ResourceComparisonCharts({ runs, labelMode, testNameFilter, suit
   }, [onZoomChange])
 
   const pointsPerRun = useMemo(
-    () => runs.map((r) => r.result ? buildDataPoints(r.result.tests, testNameFilter, suiteTests) : []),
-    [runs, testNameFilter, suiteTests],
+    () => runs.map((r) => r.result ? buildDataPoints(r.result.tests, resStep, testNameFilter, suiteTests) : []),
+    [runs, resStep, testNameFilter, suiteTests],
   )
 
   const highlightedTestRef = useRef<string | null>(null)
@@ -440,6 +416,12 @@ export function ResourceComparisonCharts({ runs, labelMode, testNameFilter, suit
             )
           })}
         </div>
+        <SegmentedControl
+          value={resStep}
+          onChange={setResStep}
+          options={RESOURCE_STEP_OPTIONS}
+          ariaLabel="Resource usage step"
+        />
       </div>
 
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
diff --git a/ui/src/components/run-detail/ResourceUsageCharts.tsx b/ui/src/components/run-detail/ResourceUsageCharts.tsx
index 4e37af56f..37149b2bb 100644
--- a/ui/src/components/run-detail/ResourceUsageCharts.tsx
+++ b/ui/src/components/run-detail/ResourceUsageCharts.tsx
@@ -1,73 +1,41 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ReactECharts from 'echarts-for-react'
 import { Cpu } from 'lucide-react'
-import type { TestEntry, ResourceTotals, SuiteTest } from '@/api/types'
+import type { TestEntry, StepResult, SuiteTest } from '@/api/types'
 import { formatBytes } from '@/utils/format'
 import { compileQuery } from '@/utils/eestNameFilter'
 import { formatTestNameLong } from '@/utils/eestName'
 import { useNameDisplayMode } from '@/hooks/useNameDisplayMode'
 import { getAggregatedStats, ALL_STEP_TYPES } from '@/pages/RunDetailPage'
-
-// Aggregated resource data from all steps of a test entry
-interface AggregatedResourceData {
-  totals: ResourceTotals
-  timeTotalNs: number
-  memoryBytes: number
+import { SegmentedControl } from '@/components/shared/SegmentedControl'
+import {
+  aggregateResourceByStep,
+  DEFAULT_RESOURCE_STEP,
+  RESOURCE_STEP_OPTIONS,
+  type AggregatedResource,
+  type ResourceStep,
+  type StepResource,
+} from '@/utils/resourceStep'
+
+// stepResource normalises a per-test-result step into the shared helper's input.
+function stepResource(step?: StepResult): StepResource | undefined {
+  if (!step?.aggregated) return undefined
+
+  return { resourceTotals: step.aggregated.resource_totals, timeTotalNs: step.aggregated.time_total }
 }
 
-// Get aggregated resource totals from all steps of a test entry
-function getAggregatedResourceData(entry: TestEntry): AggregatedResourceData | undefined {
+// Aggregate a test entry's resource usage for the selected step(s).
+function getAggregatedResourceData(entry: TestEntry, step: ResourceStep): AggregatedResource | undefined {
   if (!entry.steps) return undefined
 
-  const steps = [entry.steps.setup, entry.steps.test, entry.steps.cleanup].filter((s) => s?.aggregated?.resource_totals)
-
-  if (steps.length === 0) return undefined
-
-  // Sum up resource totals from all steps
-  let cpuUsec = 0
-  let memoryDelta = 0
-  let diskRead = 0
-  let diskWrite = 0
-  let diskReadOps = 0
-  let diskWriteOps = 0
-  let timeTotalNs = 0
-  let memoryBytes = 0
-
-  for (const step of steps) {
-    if (step?.aggregated) {
-      timeTotalNs += step.aggregated.time_total ?? 0
-
-      if (step.aggregated.resource_totals) {
-        const res = step.aggregated.resource_totals
-        cpuUsec += res.cpu_usec ?? 0
-        memoryDelta += res.memory_delta_bytes ?? 0
-        diskRead += res.disk_read_bytes ?? 0
-        diskWrite += res.disk_write_bytes ?? 0
-        diskReadOps += res.disk_read_iops ?? 0
-        diskWriteOps += res.disk_write_iops ?? 0
-
-        // Take max absolute memory across steps (it's a snapshot, not cumulative)
-        const stepMemory = res.memory_bytes ?? 0
-        if (stepMemory > memoryBytes) {
-          memoryBytes = stepMemory
-        }
-      }
-    }
-  }
-
-  return {
-    totals: {
-      cpu_usec: cpuUsec,
-      memory_delta_bytes: memoryDelta,
-      memory_bytes: memoryBytes,
-      disk_read_bytes: diskRead,
-      disk_write_bytes: diskWrite,
-      disk_read_iops: diskReadOps,
-      disk_write_iops: diskWriteOps,
+  return aggregateResourceByStep(
+    {
+      setup: stepResource(entry.steps.setup),
+      test: stepResource(entry.steps.test),
+      cleanup: stepResource(entry.steps.cleanup),
     },
-    timeTotalNs,
-    memoryBytes,
-  }
+    step,
+  )
 }
 
 function useDarkMode() {
@@ -232,6 +200,7 @@ export function ResourceUsageCharts({ tests, suiteTests, searchQuery, statusFilt
   const isDark = useDarkMode()
   const { mode: nameMode } = useNameDisplayMode()
   const [zoomRange, setZoomRange] = useState({ start: 0, end: 100 })
+  const [resStep, setResStep] = useState<ResourceStep>(DEFAULT_RESOURCE_STEP)
   const highlightedTestRef = useRef<string | null>(null)
 
   const handleZoom = useCallback((start: number, end: number) => {
@@ -291,7 +260,7 @@ export function ResourceUsageCharts({ tests, suiteTests, searchQuery, statusFilt
     sortedTests.forEach(([testName, test], index) => {
       const testIndex = index + 1
       const testNumber = suiteOrder?.get(testName) ?? testIndex
-      const agg = getAggregatedResourceData(test)
+      const agg = getAggregatedResourceData(test, resStep)
       if (agg) {
         hasData = true
         const res = agg.totals
@@ -350,7 +319,7 @@ export function ResourceUsageCharts({ tests, suiteTests, searchQuery, statusFilt
     }
 
     return { dataPoints: points, hasResourceData: hasData, hasMemoryMBData: hasMemoryMB, summaryStats: stats }
-  }, [tests, suiteTests, searchQuery, statusFilter])
+  }, [tests, suiteTests, searchQuery, statusFilter, resStep])
 
    
   const chartOptions = useMemo(() => {
@@ -708,23 +677,31 @@ export function ResourceUsageCharts({ tests, suiteTests, searchQuery, statusFilt
           <Cpu className="size-4 text-gray-400 dark:text-gray-500" />
           Resource Usage
         </h3>
-        {resourceCollectionMethod && (
-          <span className="text-xs/5 text-gray-500 dark:text-gray-400">
-            Collection via{' '}
-            <span
-              className="cursor-help rounded-xs bg-gray-100 px-1.5 py-0.5 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
-              title={
-                resourceCollectionMethod === 'cgroupv2'
-                  ? 'Metrics collected directly from Linux cgroup v2 filesystem (low overhead, high precision)'
-                  : resourceCollectionMethod === 'dockerstats'
-                    ? 'Metrics collected via Docker Stats API (fallback when cgroup access is unavailable)'
-                    : undefined
-              }
-            >
-              {resourceCollectionMethod}
+        <div className="flex items-center gap-3">
+          {resourceCollectionMethod && (
+            <span className="text-xs/5 text-gray-500 dark:text-gray-400">
+              Collection via{' '}
+              <span
+                className="cursor-help rounded-xs bg-gray-100 px-1.5 py-0.5 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+                title={
+                  resourceCollectionMethod === 'cgroupv2'
+                    ? 'Metrics collected directly from Linux cgroup v2 filesystem (low overhead, high precision)'
+                    : resourceCollectionMethod === 'dockerstats'
+                      ? 'Metrics collected via Docker Stats API (fallback when cgroup access is unavailable)'
+                      : undefined
+                }
+              >
+                {resourceCollectionMethod}
+              </span>
             </span>
-          </span>
-        )}
+          )}
+          <SegmentedControl
+            value={resStep}
+            onChange={setResStep}
+            options={RESOURCE_STEP_OPTIONS}
+            ariaLabel="Resource usage step"
+          />
+        </div>
       </div>
 
       {/* Summary Stats Row */}
diff --git a/ui/src/components/shared/SegmentedControl.tsx b/ui/src/components/shared/SegmentedControl.tsx
new file mode 100644
index 000000000..47e94fdbc
--- /dev/null
+++ b/ui/src/components/shared/SegmentedControl.tsx
@@ -0,0 +1,50 @@
+import clsx from 'clsx'
+
+interface SegmentedControlOption<T extends string> {
+  value: T
+  label: string
+}
+
+interface SegmentedControlProps<T extends string> {
+  value: T
+  onChange: (value: T) => void
+  options: SegmentedControlOption<T>[]
+  ariaLabel?: string
+  className?: string
+}
+
+// SegmentedControl is a compact single-select button group (e.g. a setup |
+// test | sum toggle). Values are string literals; the active option is filled.
+export function SegmentedControl<T extends string>({
+  value,
+  onChange,
+  options,
+  ariaLabel,
+  className,
+}: SegmentedControlProps<T>) {
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      className={clsx('inline-flex rounded-sm border border-gray-300 dark:border-gray-600', className)}
+    >
+      {options.map((option, index) => (
+        <button
+          key={option.value}
+          type="button"
+          aria-pressed={value === option.value}
+          onClick={() => onChange(option.value)}
+          className={clsx(
+            'px-3 py-1 text-xs/5 font-medium transition-colors',
+            index > 0 && 'border-l border-gray-300 dark:border-gray-600',
+            value === option.value
+              ? 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900'
+              : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
+          )}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  )
+}
diff --git a/ui/src/components/suite-detail/ResourceCharts.tsx b/ui/src/components/suite-detail/ResourceCharts.tsx
index aef88fb47..20a618d52 100644
--- a/ui/src/components/suite-detail/ResourceCharts.tsx
+++ b/ui/src/components/suite-detail/ResourceCharts.tsx
@@ -4,6 +4,13 @@ import clsx from 'clsx'
 import type { IndexEntry, ResourceTotals } from '@/api/types'
 import { getClientChartColor } from '@/utils/client-colors'
 import { formatBytes } from '@/utils/format'
+import { SegmentedControl } from '@/components/shared/SegmentedControl'
+import {
+  aggregateResourceByStep,
+  DEFAULT_RESOURCE_STEP,
+  RESOURCE_STEP_OPTIONS,
+  type ResourceStep,
+} from '@/utils/resourceStep'
 
 export type XAxisMode = 'time' | 'runCount'
 
@@ -12,6 +19,10 @@ interface ResourceChartsProps {
   isDark?: boolean
   xAxisMode?: XAxisMode
   onXAxisModeChange?: (mode: XAxisMode) => void
+  // resStep can be controlled by the page (which renders its own toggle when
+  // hideControls is set); otherwise the component manages it internally.
+  resStep?: ResourceStep
+  onResStepChange?: (step: ResourceStep) => void
   onRunClick?: (runId: string) => void
   hideControls?: boolean
   zoomRange?: { start: number; end: number }
@@ -54,33 +65,18 @@ function formatOps(ops: number): string {
 
 type MetricKey = 'cpu_usec' | 'memory_delta_bytes' | 'disk_read_bytes' | 'disk_write_bytes' | 'disk_read_iops' | 'disk_write_iops'
 
-// Aggregates resource totals from all steps (setup, test, cleanup)
-function getAggregatedResourceTotals(entry: IndexEntry): ResourceTotals | undefined {
+// Aggregates resource totals for the selected step(s) of an index entry.
+function getAggregatedResourceTotals(entry: IndexEntry, step: ResourceStep): ResourceTotals | undefined {
   const steps = entry.tests.steps
-  let hasData = false
-  const totals: ResourceTotals = {
-    cpu_usec: 0,
-    memory_delta_bytes: 0,
-    disk_read_bytes: 0,
-    disk_write_bytes: 0,
-    disk_read_iops: 0,
-    disk_write_iops: 0,
-  }
-
-  const stepList = [steps.setup, steps.test, steps.cleanup]
-  for (const step of stepList) {
-    if (step?.resource_totals) {
-      hasData = true
-      totals.cpu_usec += step.resource_totals.cpu_usec
-      totals.memory_delta_bytes += step.resource_totals.memory_delta_bytes
-      totals.disk_read_bytes += step.resource_totals.disk_read_bytes
-      totals.disk_write_bytes += step.resource_totals.disk_write_bytes
-      totals.disk_read_iops += step.resource_totals.disk_read_iops
-      totals.disk_write_iops += step.resource_totals.disk_write_iops
-    }
-  }
 
-  return hasData ? totals : undefined
+  return aggregateResourceByStep(
+    {
+      setup: { resourceTotals: steps.setup?.resource_totals },
+      test: { resourceTotals: steps.test?.resource_totals },
+      cleanup: { resourceTotals: steps.cleanup?.resource_totals },
+    },
+    step,
+  )?.totals
 }
 
 interface MetricConfig {
@@ -104,19 +100,20 @@ interface SingleChartProps {
   runs: IndexEntry[]
   isDark: boolean
   xAxisMode: XAxisMode
+  resStep: ResourceStep
   onRunClick?: (runId: string) => void
   isLargeDataset: boolean
   zoomRange: { start: number; end: number }
   onZoom: (start: number, end: number) => void
 }
 
-function SingleChart({ metric, runs, isDark, xAxisMode, onRunClick, isLargeDataset, zoomRange, onZoom }: SingleChartProps) {
+function SingleChart({ metric, runs, isDark, xAxisMode, resStep, onRunClick, isLargeDataset, zoomRange, onZoom }: SingleChartProps) {
   const { clientGroups: chartData, maxRunIndex } = useMemo(() => {
     const clientGroups = new Map<string, DataPoint[]>()
     let maxRunIndex = 1
 
     for (const run of runs) {
-      const resourceTotals = getAggregatedResourceTotals(run)
+      const resourceTotals = getAggregatedResourceTotals(run, resStep)
       if (!resourceTotals) continue
 
       const value = resourceTotals[metric.key]
@@ -147,7 +144,7 @@ function SingleChart({ metric, runs, isDark, xAxisMode, onRunClick, isLargeDatas
     }
 
     return { clientGroups, maxRunIndex }
-  }, [runs, metric.key])
+  }, [runs, metric.key, resStep])
 
   const series = useMemo(() => {
     return Array.from(chartData.entries()).map(([client, data]) => ({
@@ -347,6 +344,8 @@ export function ResourceCharts({
   isDark = false,
   xAxisMode: controlledMode,
   onXAxisModeChange,
+  resStep: controlledResStep,
+  onResStepChange,
   onRunClick,
   hideControls = false,
   zoomRange: controlledZoom,
@@ -363,6 +362,17 @@ export function ResourceCharts({
     }
   }
 
+  const [internalResStep, setInternalResStep] = useState<ResourceStep>(DEFAULT_RESOURCE_STEP)
+  const resStep = controlledResStep ?? internalResStep
+
+  const setResStep = (step: ResourceStep) => {
+    if (onResStepChange) {
+      onResStepChange(step)
+    } else {
+      setInternalResStep(step)
+    }
+  }
+
   const [internalZoom, setInternalZoom] = useState({ start: 0, end: 100 })
   const activeZoom = controlledZoom ?? internalZoom
 
@@ -383,7 +393,7 @@ export function ResourceCharts({
   }, [runs])
 
   const hasResourceData = useMemo(() => {
-    return runs.some((run) => getAggregatedResourceTotals(run) !== undefined)
+    return runs.some((run) => getAggregatedResourceTotals(run, 'sum') !== undefined)
   }, [runs])
 
   if (!hasResourceData) {
@@ -397,7 +407,13 @@ export function ResourceCharts({
   return (
     <div className="flex flex-col gap-4">
       {!hideControls && (
-        <div className="flex justify-end">
+        <div className="flex justify-end gap-2">
+          <SegmentedControl
+            value={resStep}
+            onChange={setResStep}
+            options={RESOURCE_STEP_OPTIONS}
+            ariaLabel="Resource usage step"
+          />
           <div className="inline-flex rounded-sm border border-gray-300 dark:border-gray-600">
             <button
               onClick={() => setXAxisMode('runCount')}
@@ -433,6 +449,7 @@ export function ResourceCharts({
             runs={runs}
             isDark={isDark}
             xAxisMode={xAxisMode}
+            resStep={resStep}
             onRunClick={onRunClick}
             isLargeDataset={isLargeDataset}
             zoomRange={activeZoom}
diff --git a/ui/src/pages/SuiteDetailPage.tsx b/ui/src/pages/SuiteDetailPage.tsx
index 5f6a00ede..b8d700bf5 100644
--- a/ui/src/pages/SuiteDetailPage.tsx
+++ b/ui/src/pages/SuiteDetailPage.tsx
@@ -34,6 +34,8 @@ import { ErrorState } from '@/components/shared/ErrorState'
 import { Badge } from '@/components/shared/Badge'
 import { JDenticon } from '@/components/shared/JDenticon'
 import { Pagination } from '@/components/shared/Pagination'
+import { SegmentedControl } from '@/components/shared/SegmentedControl'
+import { DEFAULT_RESOURCE_STEP, RESOURCE_STEP_OPTIONS, type ResourceStep } from '@/utils/resourceStep'
 import { MAX_COMPARE_RUNS, MIN_COMPARE_RUNS } from '@/components/compare/constants'
 import { useAuth } from '@/hooks/useAuth'
 
@@ -357,6 +359,7 @@ export function SuiteDetailPage() {
 
   const [heatmapExpanded, setHeatmapExpanded] = useState(true)
   const [chartExpanded, setChartExpanded] = useState(true)
+  const [chartResStep, setChartResStep] = useState<ResourceStep>(DEFAULT_RESOURCE_STEP)
   const [chartZoomRange, setChartZoomRange] = useState({ start: 0, end: 100 })
   const [chartClientFilter, setChartClientFilter] = useState<Set<string>>(new Set())
   const [chartLabelFilters, setChartLabelFilters] = useState<Map<string, Set<string>>>(new Map())
@@ -1293,6 +1296,12 @@ export function SuiteDetailPage() {
                       <div className="flex items-center gap-3">
                         <div className="h-px grow bg-gray-200 dark:bg-gray-700" />
                         <span className="text-xs font-medium text-gray-400 dark:text-gray-500">System Resources</span>
+                        <SegmentedControl
+                          value={chartResStep}
+                          onChange={setChartResStep}
+                          options={RESOURCE_STEP_OPTIONS}
+                          ariaLabel="Resource usage step"
+                        />
                         <div className="h-px grow bg-gray-200 dark:bg-gray-700" />
                       </div>
                       <ResourceCharts
@@ -1300,6 +1309,8 @@ export function SuiteDetailPage() {
                         isDark={isDark}
                         xAxisMode={chartMode}
                         onXAxisModeChange={handleChartModeChange}
+                        resStep={chartResStep}
+                        onResStepChange={setChartResStep}
                         onRunClick={handleRunClick}
                         hideControls
                         zoomRange={chartZoomRange}
diff --git a/ui/src/utils/averageResults.ts b/ui/src/utils/averageResults.ts
index a6d67b5e4..2eaea5d52 100644
--- a/ui/src/utils/averageResults.ts
+++ b/ui/src/utils/averageResults.ts
@@ -1,5 +1,5 @@
 import type { RunResult, AggregatedStats, TestEntry, ResourceTotals } from '@/api/types'
-import { type StepTypeOption, getAggregatedStats } from '@/pages/RunDetailPage'
+import { type StepTypeOption, ALL_STEP_TYPES, getAggregatedStats } from '@/pages/RunDetailPage'
 
 export interface AveragedResult {
   result: RunResult
@@ -7,12 +7,56 @@ export interface AveragedResult {
   variance: Record<string, { mgasStddev: number; mgasMean: number; mgasMin: number; mgasMax: number }>
 }
 
+// Per-step samples across runs. Statistics are gathered for every step
+// (setup/test/cleanup) independently so the averaged result preserves each
+// step's resource usage — the resource charts can then isolate setup vs test.
+interface StepSamples {
+  gasUsedTotal: number[]
+  gasUsedTimeTotal: number[]
+  timeTotal: number[]
+  success: number[]
+  fail: number[]
+  msgCount: number[]
+  // Resource samples are only collected for runs where the step reported them.
+  cpuUsec: number[]
+  memoryDeltaBytes: number[]
+  memoryBytes: number[]
+  diskReadBytes: number[]
+  diskWriteBytes: number[]
+  diskReadIops: number[]
+  diskWriteIops: number[]
+}
+
+function emptyStepSamples(): StepSamples {
+  return {
+    gasUsedTotal: [],
+    gasUsedTimeTotal: [],
+    timeTotal: [],
+    success: [],
+    fail: [],
+    msgCount: [],
+    cpuUsec: [],
+    memoryDeltaBytes: [],
+    memoryBytes: [],
+    diskReadBytes: [],
+    diskWriteBytes: [],
+    diskReadIops: [],
+    diskWriteIops: [],
+  }
+}
+
 /**
  * averageResults takes N RunResult objects and produces one synthetic
  * RunResult where each test's aggregated stats are the average (or
  * median) across the N runs. Tests that don't appear in all N runs
  * are still included — their average is taken over however many runs
  * contained them.
+ *
+ * Each step (setup/test/cleanup) is averaged independently and written back to
+ * its own step in the synthetic entry, so the table (which sums the active
+ * `stepFilter`) and the resource charts (which can isolate a single step) both
+ * read correct per-step data. For the default single-step filter this is
+ * identical to averaging the summed stats.
  */
 export function averageResults(
   results: RunResult[],
@@ -27,63 +71,51 @@ export function averageResults(
     return { result: results[0], variance: {} }
   }
 
-  // Gather per-test samples.
-  const testSamples = new Map<
-    string,
-    {
-      gasUsedTotal: number[]
-      gasUsedTimeTotal: number[]
-      timeTotal: number[]
-      success: number[]
-      fail: number[]
-      msgCount: number[]
-      cpuUsec: number[]
-      memoryDeltaBytes: number[]
-      memoryBytes: number[]
-      diskReadBytes: number[]
-      diskWriteBytes: number[]
-      diskReadIops: number[]
-      diskWriteIops: number[]
-    }
-  >()
+  // Per-step samples per test, plus the MGas/s samples (summed over the active
+  // step filter) used for the error bars — kept separate so variance still
+  // reflects run-to-run variability of the filtered total, as before.
+  const perStepSamples = new Map<string, Partial<Record<StepTypeOption, StepSamples>>>()
+  const mgasSamples = new Map<string, { gasUsedTotal: number[]; gasUsedTimeTotal: number[] }>()
 
   for (const result of results) {
     for (const [name, entry] of Object.entries(result.tests)) {
+      // Match the previous inclusion rule: a test is present only if it has data
+      // for the active step filter in at least one run.
       const stats = getAggregatedStats(entry, stepFilter)
       if (!stats) continue
 
-      let samples = testSamples.get(name)
-      if (!samples) {
-        samples = {
-          gasUsedTotal: [],
-          gasUsedTimeTotal: [],
-          timeTotal: [],
-          success: [],
-          fail: [],
-          msgCount: [],
-          cpuUsec: [],
-          memoryDeltaBytes: [],
-          memoryBytes: [],
-          diskReadBytes: [],
-          diskWriteBytes: [],
-          diskReadIops: [],
-          diskWriteIops: [],
-        }
-        testSamples.set(name, samples)
+      let mgas = mgasSamples.get(name)
+      if (!mgas) {
+        mgas = { gasUsedTotal: [], gasUsedTimeTotal: [] }
+        mgasSamples.set(name, mgas)
+      }
+      mgas.gasUsedTotal.push(stats.gas_used_total)
+      mgas.gasUsedTimeTotal.push(stats.gas_used_time_total)
+
+      let steps = perStepSamples.get(name)
+      if (!steps) {
+        steps = {}
+        perStepSamples.set(name, steps)
       }
 
-      samples.gasUsedTotal.push(stats.gas_used_total)
-      samples.gasUsedTimeTotal.push(stats.gas_used_time_total)
-      samples.timeTotal.push(stats.time_total)
-      samples.success.push(stats.success)
-      samples.fail.push(stats.fail)
-      samples.msgCount.push(stats.msg_count)
-
-      // getAggregatedStats doesn't include resource_totals in its
-      // return value, so read it directly from the step entries.
-      for (const stepKey of stepFilter) {
-        const step = entry.steps?.[stepKey]
-        const r = step?.aggregated?.resource_totals
+      for (const stepKey of ALL_STEP_TYPES) {
+        const aggregated = entry.steps?.[stepKey]?.aggregated
+        if (!aggregated) continue
+
+        let samples = steps[stepKey]
+        if (!samples) {
+          samples = emptyStepSamples()
+          steps[stepKey] = samples
+        }
+
+        samples.gasUsedTotal.push(aggregated.gas_used_total)
+        samples.gasUsedTimeTotal.push(aggregated.gas_used_time_total)
+        samples.timeTotal.push(aggregated.time_total)
+        samples.success.push(aggregated.success)
+        samples.fail.push(aggregated.fail)
+        samples.msgCount.push(aggregated.msg_count)
+
+        const r = aggregated.resource_totals
         if (r) {
           samples.cpuUsec.push(r.cpu_usec ?? 0)
           samples.memoryDeltaBytes.push(r.memory_delta_bytes ?? 0)
@@ -92,7 +124,6 @@ export function averageResults(
           samples.diskWriteBytes.push(r.disk_write_bytes ?? 0)
           samples.diskReadIops.push(r.disk_read_iops ?? 0)
           samples.diskWriteIops.push(r.disk_write_iops ?? 0)
-          break // one step's resource data per test is enough
         }
       }
     }
@@ -103,58 +134,53 @@ export function averageResults(
   const syntheticTests: Record<string, TestEntry> = {}
   const variance: AveragedResult['variance'] = {}
 
-  for (const [name, samples] of testSamples) {
-    const gasUsedTotal = agg(samples.gasUsedTotal)
-    const gasUsedTimeTotal = agg(samples.gasUsedTimeTotal)
-
-    // Build resource_totals if we have samples for it.
-    let resource_totals: ResourceTotals | undefined
-    if (samples.cpuUsec.length > 0) {
-      resource_totals = {
-        cpu_usec: agg(samples.cpuUsec),
-        memory_delta_bytes: agg(samples.memoryDeltaBytes),
-        memory_bytes: agg(samples.memoryBytes),
-        disk_read_bytes: agg(samples.diskReadBytes),
-        disk_write_bytes: agg(samples.diskWriteBytes),
-        disk_read_iops: agg(samples.diskReadIops),
-        disk_write_iops: agg(samples.diskWriteIops),
+  for (const [name, steps] of perStepSamples) {
+    const syntheticSteps: TestEntry['steps'] = {}
+
+    for (const stepKey of ALL_STEP_TYPES) {
+      const samples = steps[stepKey]
+      if (!samples) continue
+
+      let resource_totals: ResourceTotals | undefined
+      if (samples.cpuUsec.length > 0) {
+        resource_totals = {
+          cpu_usec: agg(samples.cpuUsec),
+          memory_delta_bytes: agg(samples.memoryDeltaBytes),
+          memory_bytes: agg(samples.memoryBytes),
+          disk_read_bytes: agg(samples.diskReadBytes),
+          disk_write_bytes: agg(samples.diskWriteBytes),
+          disk_read_iops: agg(samples.diskReadIops),
+          disk_write_iops: agg(samples.diskWriteIops),
+        }
       }
-    }
 
-    const aggregated: AggregatedStats = {
-      gas_used_total: gasUsedTotal,
-      gas_used_time_total: gasUsedTimeTotal,
-      time_total: agg(samples.timeTotal),
-      success: Math.round(agg(samples.success)),
-      fail: Math.round(agg(samples.fail)),
-      msg_count: Math.round(agg(samples.msgCount)),
-      method_stats: { times: {}, mgas_s: {} },
-      resource_totals,
-    }
+      const aggregated: AggregatedStats = {
+        gas_used_total: agg(samples.gasUsedTotal),
+        gas_used_time_total: agg(samples.gasUsedTimeTotal),
+        time_total: agg(samples.timeTotal),
+        success: Math.round(agg(samples.success)),
+        fail: Math.round(agg(samples.fail)),
+        msg_count: Math.round(agg(samples.msgCount)),
+        method_stats: { times: {}, mgas_s: {} },
+        resource_totals,
+      }
 
-    // Build the TestEntry with the active step populated.
-    // The comparison components read via getAggregatedStats which
-    // iterates the step keys from the filter, so we put the averaged
-    // data under the first step in the filter (usually "test").
-    const stepKey = stepFilter[0] ?? 'test'
-    syntheticTests[name] = {
-      dir: '',
-      steps: {
-        [stepKey]: { aggregated },
-      },
+      syntheticSteps[stepKey] = { aggregated }
     }
 
-    // Compute MGas/s variance for error bars.
-    const mgasValues = samples.gasUsedTimeTotal.map((t, i) =>
-      t > 0 ? (samples.gasUsedTotal[i] * 1000) / t : 0,
-    )
+    syntheticTests[name] = { dir: '', steps: syntheticSteps }
+
+    // Compute MGas/s variance for error bars over the active step filter.
+    const mgas = mgasSamples.get(name)
+    const gasUsedTotal = mgas?.gasUsedTotal ?? []
+    const gasUsedTimeTotal = mgas?.gasUsedTimeTotal ?? []
+    const mgasValues = gasUsedTimeTotal.map((t, i) => (t > 0 ? (gasUsedTotal[i] * 1000) / t : 0))
     const mgasAvg = mean(mgasValues)
-    const mgasStddev = stddev(mgasValues, mgasAvg)
     variance[name] = {
-      mgasStddev,
+      mgasStddev: stddev(mgasValues, mgasAvg),
       mgasMean: mgasAvg,
-      mgasMin: Math.min(...mgasValues),
-      mgasMax: Math.max(...mgasValues),
+      mgasMin: mgasValues.length > 0 ? Math.min(...mgasValues) : 0,
+      mgasMax: mgasValues.length > 0 ? Math.max(...mgasValues) : 0,
     }
   }
 
diff --git a/ui/src/utils/resourceStep.ts b/ui/src/utils/resourceStep.ts
new file mode 100644
index 000000000..c737038a9
--- /dev/null
+++ b/ui/src/utils/resourceStep.ts
@@ -0,0 +1,104 @@
+import type { ResourceTotals } from '@/api/types'
+
+// ResourceStep selects which benchmark step's resource usage the charts show:
+// the combined total, or just the setup or test step in isolation.
+export type ResourceStep = 'sum' | 'setup' | 'test'
+
+export const DEFAULT_RESOURCE_STEP: ResourceStep = 'test'
+
+// RESOURCE_STEP_OPTIONS drives the setup/test/sum toggle. "Sum" combines all
+// steps (setup + test + cleanup) — the historical default for these charts.
+export const RESOURCE_STEP_OPTIONS: { value: ResourceStep; label: string }[] = [
+  { value: 'sum', label: 'Sum' },
+  { value: 'setup', label: 'Setup' },
+  { value: 'test', label: 'Test' },
+]
+
+type StepKey = 'setup' | 'test' | 'cleanup'
+
+// resourceStepKeys maps a selection to the concrete step keys it aggregates.
+// "sum" spans every step so the total matches what the charts showed before the
+// toggle existed; "setup"/"test" isolate a single step.
+export function resourceStepKeys(step: ResourceStep): StepKey[] {
+  switch (step) {
+    case 'setup':
+      return ['setup']
+    case 'test':
+      return ['test']
+    default:
+      return ['setup', 'test', 'cleanup']
+  }
+}
+
+// StepResource is the per-step resource input, normalised so both the per-test
+// result shape (TestEntry, resource under `aggregated`) and the per-run index
+// shape (IndexEntry, resource directly on the step) can feed the same helper.
+export interface StepResource {
+  resourceTotals?: ResourceTotals
+  // Wall-clock time for the step in nanoseconds, used for CPU% (unused by the
+  // index-shape charts, which don't render CPU%).
+  timeTotalNs?: number
+}
+
+export interface AggregatedResource {
+  totals: ResourceTotals
+  timeTotalNs: number
+  memoryBytes: number
+}
+
+// aggregateResourceByStep sums the resource totals of the steps selected by
+// `step`. Cumulative metrics (cpu, disk, memory delta) are summed; absolute
+// memory is taken as the max across steps (it's a snapshot, not cumulative);
+// step wall-clock time is summed for CPU%. Returns undefined when none of the
+// selected steps carry resource data.
+export function aggregateResourceByStep(
+  steps: Partial<Record<StepKey, StepResource | undefined>>,
+  step: ResourceStep,
+): AggregatedResource | undefined {
+  let hasData = false
+  let cpuUsec = 0
+  let memoryDelta = 0
+  let diskRead = 0
+  let diskWrite = 0
+  let diskReadIops = 0
+  let diskWriteIops = 0
+  let timeTotalNs = 0
+  let memoryBytes = 0
+
+  for (const key of resourceStepKeys(step)) {
+    const entry = steps[key]
+    if (!entry) continue
+
+    timeTotalNs += entry.timeTotalNs ?? 0
+
+    const res = entry.resourceTotals
+    if (!res) continue
+
+    hasData = true
+    cpuUsec += res.cpu_usec ?? 0
+    memoryDelta += res.memory_delta_bytes ?? 0
+    diskRead += res.disk_read_bytes ?? 0
+    diskWrite += res.disk_write_bytes ?? 0
+    diskReadIops += res.disk_read_iops ?? 0
+    diskWriteIops += res.disk_write_iops ?? 0
+
+    const stepMemory = res.memory_bytes ?? 0
+    if (stepMemory > memoryBytes) memoryBytes = stepMemory
+  }
+
+  if (!hasData) return undefined
+
+  return {
+    totals: {
+      cpu_usec: cpuUsec,
+      memory_delta_bytes: memoryDelta,
+      memory_bytes: memoryBytes,
+      disk_read_bytes: diskRead,
+      disk_write_bytes: diskWrite,
+      disk_read_iops: diskReadIops,
+      disk_write_iops: diskWriteIops,
+    },
+    timeTotalNs,
+    memoryBytes,
+  }
+}