diff --git a/app/cdash/tests/CMakeLists.txt b/app/cdash/tests/CMakeLists.txt
index a8c612ffea..f67e63ad34 100644
--- a/app/cdash/tests/CMakeLists.txt
+++ b/app/cdash/tests/CMakeLists.txt
@@ -419,6 +419,8 @@ add_browser_test(/Browser/Pages/BuildNotesPageTest)
 
 add_browser_test(/Browser/Pages/BuildTargetsPageTest)
 
+add_browser_test(/Browser/Pages/BuildInstrumentationPageTest)
+
 add_browser_test(/Browser/Pages/BuildTestsPageTest)
 
 add_browser_test(/Browser/Pages/BuildConfigurePageTest)
diff --git a/resources/js/vue/components/BuildInstrumentationPage.vue b/resources/js/vue/components/BuildInstrumentationPage.vue
index 1cfb51e094..894e4ccb87 100644
--- a/resources/js/vue/components/BuildInstrumentationPage.vue
+++ b/resources/js/vue/components/BuildInstrumentationPage.vue
@@ -49,6 +49,7 @@ import FilterBuilder from './shared/FilterBuilder.vue';
 import CommandFlameChart from './shared/CommandFlameChart.vue';
 import { DateTime, Duration } from 'luxon';
 import LineChart from './shared/Charts/LineChart.vue';
+import Utils from './shared/Utils';
 
 export default {
   name: 'BuildInstrumentationPage',
@@ -104,6 +105,7 @@ export default {
                     edges {
                       node {
                         name
+                        type
                         value
                       }
                     }
@@ -133,6 +135,7 @@ export default {
                           edges {
                             node {
                               name
+                              type
                               value
                             }
                           }
@@ -249,6 +252,7 @@ export default {
           language: edge.node.language,
           config: edge.node.config,
           disabled: !this.visibleCommandIds.has(edge.node.id),
+          measurements: Utils.numericMeasurements(edge.node.measurements.edges.map(({ node }) => node)),
         };
       });
     },
diff --git a/resources/js/vue/components/BuildTestsPage.vue b/resources/js/vue/components/BuildTestsPage.vue
index 48b5c6c7c7..c1b2a9280b 100644
--- a/resources/js/vue/components/BuildTestsPage.vue
+++ b/resources/js/vue/components/BuildTestsPage.vue
@@ -90,6 +90,7 @@ import LoadingIndicator from './shared/LoadingIndicator.vue';
 import BuildSummaryCard from './shared/BuildSummaryCard.vue';
 import BuildSidebar from './shared/BuildSidebar.vue';
 import TestFlameChart from './shared/TestFlameChart.vue';
+import Utils from './shared/Utils';
 import { DateTime, Duration } from 'luxon';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faChartGantt } from '@fortawesome/free-solid-svg-icons';
@@ -342,24 +343,16 @@ export default {
         return [];
       }
 
-      return this.executedTests.filter((test) => test.node.startTime).map((test) => {
-        const numericMeasurements = test.node.testMeasurements
-          .filter((measurement) => measurement.type.startsWith('numeric'))
-          .map((measurement) => ({ name: measurement.name, value: parseFloat(measurement.value) }));
-        const maxRssMeasurement = numericMeasurements.find((measurement) => measurement.name === 'MaxRSS');
-
-        return {
-          id: test.node.id,
-          name: test.node.name,
-          startTime: DateTime.fromISO(test.node.startTime),
-          duration: Duration.fromObject({ seconds: test.node.runningTime }),
-          status: test.node.status,
-          subProject: test.subProject,
-          disabled: !this.visibleTestIds.has(test.node.id),
-          maxRss: maxRssMeasurement ? maxRssMeasurement.value : null,
-          numericMeasurements,
-        };
-      });
+      return this.executedTests.filter((test) => test.node.startTime).map((test) => ({
+        id: test.node.id,
+        name: test.node.name,
+        startTime: DateTime.fromISO(test.node.startTime),
+        duration: Duration.fromObject({ seconds: test.node.runningTime }),
+        status: test.node.status,
+        subProject: test.subProject,
+        disabled: !this.visibleTestIds.has(test.node.id),
+        measurements: Utils.numericMeasurements(test.node.testMeasurements),
+      }));
     },
 
     pinnedMeasurementColumns() {
diff --git a/resources/js/vue/components/shared/Charts/FlameChart.vue b/resources/js/vue/components/shared/Charts/FlameChart.vue
index e9ea11c231..ac83336534 100644
--- a/resources/js/vue/components/shared/Charts/FlameChart.vue
+++ b/resources/js/vue/components/shared/Charts/FlameChart.vue
@@ -1,11 +1,47 @@
 <template>
-  <VChart
-    class="tw-w-full"
-    :option="chartOptions"
-    :style="{ height: height + 'px' }"
-    autoresize
-    @click="$emit('click', $event)"
-  />
+  <div>
+    <div
+      v-if="hasHeatmapData"
+      class="tw-flex tw-justify-end tw-px-2.5 tw-pt-2.5"
+    >
+      <select
+        v-model="colorMode"
+        class="tw-select tw-select-bordered tw-select-sm"
+        data-test="flame-chart-color-mode"
+      >
+        <option value="category">
+          {{ categoryLabel }}
+        </option>
+        <option value="heatmap">
+          {{ heatmapMeasurement }}
+        </option>
+      </select>
+    </div>
+    <div
+      v-if="colorMode === 'category'"
+      class="tw-flex tw-flex-wrap tw-justify-center tw-items-center tw-gap-x-5 tw-gap-y-2.5 tw-p-2.5 tw-text-xs"
+      data-test="flame-chart-legend"
+    >
+      <div
+        v-for="(color, category) in categoryColors"
+        :key="category"
+        class="tw-flex tw-items-center"
+      >
+        <span
+          class="tw-w-3 tw-h-3 tw-mr-1.5 tw-rounded-sm"
+          :style="{ backgroundColor: color }"
+        />
+        <span class="tw-text-gray-700">{{ category }}</span>
+      </div>
+    </div>
+    <VChart
+      class="tw-w-full tw-p-0 tw-flex-grow"
+      :option="chartOptions"
+      :style="{ height: height + 'px' }"
+      autoresize
+      @click="onClick"
+    />
+  </div>
 </template>
 
 <script>
@@ -20,6 +56,7 @@ import {
 } from 'echarts/components';
 import VChart from 'vue-echarts';
 import Utils from '../Utils';
+import FlameChartLayout, { Dimension } from './FlameChartLayout';
 
 use([
   CanvasRenderer,
@@ -38,57 +75,121 @@ export default {
   },
 
   props: {
-    data: {
+    /**
+     * The items to display. Each item is expected to have the following properties:
+     * {
+     *     id: Number|String,     // Compared against selectedId
+     *     startTime: Object,     // A Luxon DateTime object
+     *     duration: Object,      // A Luxon Duration object
+     *     category: String,      // A key of categoryColors
+     *     disabled: Boolean,     // Whether to "gray out" the item
+     *     measurements: Array,   // Optional numeric measurements: { name: String, value: Number }
+     * }
+     */
+    items: {
       type: Array,
       required: true,
     },
-    tracks: {
-      type: Array,
-      required: true,
-    },
-    overallStartTime: {
-      type: Number,
+
+    /** A mapping of each item category to the color used for it and shown in the legend. */
+    categoryColors: {
+      type: Object,
       required: true,
     },
-    overallEndTime: {
-      type: Number,
+
+    /** The name of the color mode which colors items by category. */
+    categoryLabel: {
+      type: String,
       required: true,
     },
-    height: {
-      type: Number,
-      required: true,
+
+    /** The measurement used to color items in heatmap mode, which is only offered if an item has it. */
+    heatmapMeasurement: {
+      type: String,
+      required: false,
+      default: 'MaxRSS',
     },
-    tooltipFormatter: {
+
+    /**
+     * Returns the tooltip lines for an item as { label, value, isBold, isCode } objects.
+     * The item's measurements are listed after these lines.
+     */
+    tooltipFields: {
       type: Function,
       required: true,
     },
-    renderItem: {
-      type: Function,
-      required: true,
+
+    /** The id of an item to outline. */
+    selectedId: {
+      type: [Number, String],
+      required: false,
+      default: null,
     },
+
     large: {
       type: Boolean,
       required: false,
       default: true,
     },
+
     progressive: {
       type: Number,
       required: false,
       default: 400,
     },
-    /** An echarts `visualMap` config (continuous), used to color items by a data dimension. */
-    visualMap: {
-      type: Object,
-      required: false,
-      default: null,
-    },
   },
 
-  // eslint-disable-next-line vue/require-emit-validator
-  emits: ['click'],
+  emits: {
+    /** Emitted with the clicked item. */
+    click: (item) => item !== undefined,
+  },
+
+  data() {
+    return {
+      colorMode: 'category',
+      barHeight: 15,
+      barSpacing: 5,
+      // Keep zero-duration items visible and clickable.
+      minimumBarWidth: 2,
+      // Items without the heatmap measurement, shown only in heatmap mode.
+      noDataColor: '#e1e0d9',
+    };
+  },
 
   computed: {
+    layout() {
+      return FlameChartLayout.layout(this.items, this.heatmapMeasurement);
+    },
+
+    height() {
+      return ((this.barHeight + this.barSpacing) * this.layout.trackCount) + 60;
+    },
+
+    hasHeatmapData() {
+      return this.layout.heatmapRange !== null;
+    },
+
+    // Let ECharts use its theme's default gradient by leaving inRange unset.
+    // Read via `api.visual('color')` in renderItem.
+    visualMap() {
+      if (this.colorMode !== 'heatmap' || !this.hasHeatmapData) {
+        return null;
+      }
+      const { min, max } = this.layout.heatmapRange;
+      return {
+        show: false,
+        type: 'continuous',
+        seriesIndex: 0,
+        dimension: Dimension.HEATMAP_VALUE,
+        min,
+        max: max > min ? max : min + 1,
+      };
+    },
+
     chartOptions() {
+      // Referenced here so that changing either redraws the items.
+      const { colorMode, selectedId } = this;
+
       return {
         // An array lets vue-echarts remove the visual map without resetting the zoom.
         visualMap: this.visualMap ? [this.visualMap] : [],
@@ -96,7 +197,7 @@ export default {
           confine: true,
           trigger: 'item',
           extraCssText: 'max-width: 500px; white-space: normal;',
-          formatter: this.tooltipFormatter,
+          formatter: this.getTooltipElement,
         },
         grid: {
           top: '0px',
@@ -105,11 +206,11 @@ export default {
           bottom: '50px',
         },
         xAxis: {
-          max: this.overallEndTime,
+          max: this.layout.overallEndTime,
           type: 'time',
           axisLabel: {
             formatter: (val) => {
-              const relativeTime = val - this.overallStartTime;
+              const relativeTime = val - this.layout.overallStartTime;
               return Utils.formatDuration(relativeTime);
             },
           },
@@ -117,7 +218,7 @@ export default {
         yAxis: {
           show: false,
           type: 'category',
-          data: this.tracks,
+          data: Array.from({ length: this.layout.trackCount }, (_, i) => `Track ${i + 1}`),
           inverse: true,
         },
         dataZoom: [
@@ -136,17 +237,126 @@ export default {
         series: [{
           type: 'custom',
           coordinateSystem: 'cartesian2d',
-          data: this.data,
+          data: this.layout.data,
           large: this.large,
           progressive: this.progressive,
-          renderItem: this.renderItem,
+          renderItem: (params, api) => this.renderItem(api, colorMode, selectedId),
           encode: {
-            x: [1, 2],
-            y: 0,
+            x: [Dimension.START_TIME, Dimension.END_TIME],
+            y: Dimension.TRACK,
           },
         }],
       };
     },
   },
+
+  watch: {
+    hasHeatmapData(hasData) {
+      if (!hasData) {
+        this.colorMode = 'category';
+      }
+    },
+  },
+
+  methods: {
+    itemFromEvent(params) {
+      const value = params.data?.value;
+      return Array.isArray(value) ? this.items[value[Dimension.ITEM_INDEX]] : undefined;
+    },
+
+    getTooltipElement(params) {
+      const item = this.itemFromEvent(params);
+      if (!item) {
+        return '';
+      }
+
+      const container = document.createElement('div');
+      const lines = [
+        ...this.tooltipFields(item),
+        ...(item.measurements ?? []).map((measurement) => ({
+          label: measurement.name,
+          value: Utils.formatMeasurement(measurement.name, measurement.value),
+        })),
+      ];
+
+      lines.forEach(({ label, value, isBold = false, isCode = false }) => {
+        if (!value) {
+          return;
+        }
+        if (container.childNodes.length > 0) {
+          container.appendChild(document.createElement('br'));
+        }
+        container.appendChild(document.createTextNode(`${label}: `));
+
+        let valueNode;
+        if (isCode) {
+          valueNode = document.createElement('div');
+          valueNode.className = 'tw-font-mono tw-bg-gray-100 tw-p-1 tw-rounded tw-whitespace-pre-wrap tw-break-all !tw-mt-0';
+          valueNode.textContent = value;
+        } else if (isBold) {
+          valueNode = document.createElement('b');
+          valueNode.textContent = value;
+        } else {
+          valueNode = document.createTextNode(value);
+        }
+        container.appendChild(valueNode);
+      });
+
+      return container;
+    },
+
+    onClick(params) {
+      const item = this.itemFromEvent(params);
+      if (item) {
+        this.$emit('click', item);
+      }
+    },
+
+    renderItem(api, colorMode, selectedId) {
+      const track = api.value(Dimension.TRACK);
+      const start = api.coord([api.value(Dimension.START_TIME), track]);
+      const end = api.coord([api.value(Dimension.END_TIME), track]);
+      if (!start || !end) {
+        return;
+      }
+
+      const item = this.items[api.value(Dimension.ITEM_INDEX)];
+
+      let style;
+      if (colorMode === 'heatmap') {
+        const hasHeatmapValue = Number.isFinite(api.value(Dimension.HEATMAP_VALUE));
+        style = { fill: hasHeatmapValue ? api.visual('color') : this.noDataColor, opacity: 0.9 };
+      } else {
+        style = { fill: this.categoryColors[item.category], opacity: 0.85 };
+      }
+
+      if (item.disabled) {
+        Object.assign(style, {
+          fill: '#d1d5db',
+          stroke: '#d1d5db',
+          lineWidth: 0.5,
+          opacity: 0.4,
+        });
+      }
+
+      if (selectedId !== null && item.id === selectedId) {
+        Object.assign(style, {
+          stroke: '#000000',
+          lineWidth: 2,
+        });
+      }
+
+      return {
+        type: 'rect',
+        shape: {
+          x: start[0],
+          y: start[1] - (this.barHeight / 2),
+          width: Math.max(end[0] - start[0], this.minimumBarWidth),
+          height: this.barHeight,
+        },
+        style: style,
+      };
+    },
+  },
 };
 </script>
diff --git a/resources/js/vue/components/shared/Charts/FlameChartLayout.js b/resources/js/vue/components/shared/Charts/FlameChartLayout.js
new file mode 100644
index 0000000000..38364669cc
--- /dev/null
+++ b/resources/js/vue/components/shared/Charts/FlameChartLayout.js
@@ -0,0 +1,73 @@
+/** The position of each field in a laid out item's ECharts `value` array. */
+export const Dimension = Object.freeze({
+  TRACK: 0,
+  START_TIME: 1,
+  END_TIME: 2,
+  HEATMAP_VALUE: 3,
+  ITEM_INDEX: 4,
+});
+
+export default {
+  /**
+   * Lays out timeline items for the FlameChart. Each item is placed on the first track
+   * which is free at its start time, so concurrently running items are drawn on separate rows.
+   *
+   * @param {Array} items Items with Luxon DateTime `startTime` and Duration `duration` values,
+   *                      and optional numeric `measurements` ({ name, value } objects).
+   * @param {string} heatmapMeasurement The name of the measurement used to color items in heatmap mode.
+   * @returns {{
+   *   data: Array<{ value: Array }>,
+   *   trackCount: number,
+   *   overallStartTime: number,
+   *   overallEndTime: number,
+   *   heatmapRange: ?{ min: number, max: number },
+   * }} ECharts series data, indexed by Dimension, and the extent of the times and heatmap values.
+   */
+  layout(items, heatmapMeasurement) {
+    const trackEndTimes = [];
+    let overallStartTime = 0;
+    let overallEndTime = 0;
+    let heatmapRange = null;
+
+    const data = items
+      .map((item, index) => {
+        const startTime = item.startTime.toMillis();
+        const heatmapValue = item.measurements?.find((measurement) => measurement.name === heatmapMeasurement)?.value;
+        return {
+          startTime,
+          endTime: startTime + item.duration.toMillis(),
+          heatmapValue: Number.isFinite(heatmapValue) ? heatmapValue : null,
+          index,
+        };
+      })
+      .sort((a, b) => a.startTime - b.startTime)
+      .map(({ startTime, endTime, heatmapValue, index }, sortedIndex) => {
+        let track = trackEndTimes.findIndex((trackEndTime) => startTime >= trackEndTime);
+        if (track === -1) {
+          track = trackEndTimes.length;
+        }
+        trackEndTimes[track] = endTime;
+
+        overallStartTime = sortedIndex === 0 ? startTime : Math.min(overallStartTime, startTime);
+        overallEndTime = sortedIndex === 0 ? endTime : Math.max(overallEndTime, endTime);
+        if (heatmapValue !== null) {
+          heatmapRange = {
+            min: Math.min(heatmapRange?.min ?? heatmapValue, heatmapValue),
+            max: Math.max(heatmapRange?.max ?? heatmapValue, heatmapValue),
+          };
+        }
+
+        return {
+          value: [track, startTime, endTime, heatmapValue, index],
+        };
+      });
+
+    return {
+      data,
+      trackCount: trackEndTimes.length,
+      overallStartTime,
+      overallEndTime,
+      heatmapRange,
+    };
+  },
+};
diff --git a/resources/js/vue/components/shared/CommandFlameChart.vue b/resources/js/vue/components/shared/CommandFlameChart.vue
index 3725c60c42..c8fc9f8e28 100644
--- a/resources/js/vue/components/shared/CommandFlameChart.vue
+++ b/resources/js/vue/components/shared/CommandFlameChart.vue
@@ -1,35 +1,16 @@
 <template>
   <div>
-    <div
-      id="legend-container"
-      class="tw-flex tw-flex-wrap tw-justify-center tw-gap-x-5 tw-gap-y-2.5 tw-p-2.5 tw-text-xs"
-    >
-      <div
-        v-for="(color, type) in colors"
-        :key="type"
-        class="tw-flex tw-items-center"
-      >
-        <span
-          class="tw-w-3 tw-h-3 tw-mr-1.5 tw-rounded-sm"
-          :style="{ backgroundColor: color }"
-        />
-        <span class="tw-text-gray-700">{{ type }}</span>
-      </div>
-    </div>
     <FlameChart
-      class="tw-w-full tw-p-0 tw-flex-grow"
-      :data="processedChartData.data"
-      :tracks="processedChartData.tracks"
-      :overall-start-time="processedChartData.overallStartTime"
-      :overall-end-time="processedChartData.overallEndTime"
-      :height="totalChartHeight"
-      :tooltip-formatter="getTooltipElement"
-      :render-item="renderItem"
-      @click="onCellClick"
+      :items="chartItems"
+      :category-colors="colors"
+      category-label="Command Type"
+      :tooltip-fields="tooltipFields"
+      :selected-id="selectedCommandId"
+      @click="onItemClick"
     />
     <template v-if="selectedCommandId">
       <div class="tw-divider" />
-      <CommandInfoCard :command-id="selectedCommandId" />
+      <CommandInfoCard :command-id="Number(selectedCommandId)" />
     </template>
   </div>
 </template>
@@ -61,6 +42,7 @@ export default {
      *     command: String,
      *     language: String,
      *     config: String,
+     *     measurements: Array, // Optional numeric measurements: { name: String, value: Number }
      * }
      */
     commands: {
@@ -80,199 +62,33 @@ export default {
         CMAKE_INSTALL: '#CC79A7',
         INSTALL: '#56B4E9',
       },
-      commandBarHeight: 15,
-      commandBarSpacing: 5,
       selectedCommandId: null,
     };
   },
 
   computed: {
-    processedChartData() {
-      if (!this.commands || this.commands.length === 0) {
-        return {
-          data: [],
-          tracks: [],
-          overallStartTime: 0,
-          overallEndTime: 0,
-        };
-      }
-
-      const rawCommandData = this.commands.map((cmd, index) => {
-        const startTime = cmd.startTime.toMillis();
-        const endTime = startTime + cmd.duration.toMillis();
-        return {
-          ...cmd,
-          startTime,
-          endTime,
-          originalIndex: index,
-        };
-      });
-
-      const overallStartTime = rawCommandData.reduce((start, cmd) => Math.min(start, cmd.startTime), Infinity);
-      const overallEndTime = rawCommandData.reduce((end, cmd) => Math.max(end, cmd.endTime), -Infinity);
-
-      const trackEndTimes = [];
-      const processedData = [];
-      const sortedData = rawCommandData.slice().sort((a, b) => a.startTime - b.startTime);
-
-      sortedData.forEach((command) => {
-        let placed = false;
-        let trackIndex = -1;
-        for (let i = 0; i < trackEndTimes.length; i++) {
-          if (command.startTime >= trackEndTimes[i]) {
-            trackEndTimes[i] = command.endTime;
-            trackIndex = i;
-            placed = true;
-            break;
-          }
-        }
-        if (!placed) {
-          trackIndex = trackEndTimes.length;
-          trackEndTimes.push(command.endTime);
-        }
-
-        const processedCommand = {
-          value: [
-            trackIndex,
-            command.startTime,
-            command.endTime,
-            command.duration.toMillis(),
-            command.originalIndex,
-            command.type,
-            command.disabled,
-            command.targetName,
-            command.source,
-            command.language,
-            command.config,
-            command.id,
-          ],
-        };
-        processedData.push(processedCommand);
-      });
-
-      return {
-        data: processedData,
-        tracks: trackEndTimes.map((_, i) => `Thread ${i + 1}`),
-        overallStartTime,
-        overallEndTime,
-      };
-    },
-
-    totalChartHeight() {
-      const numtracks = this.processedChartData.tracks.length;
-      return ((this.commandBarHeight + this.commandBarSpacing) * numtracks) + 60;
+    chartItems() {
+      return this.commands.map((command) => ({
+        ...command,
+        category: command.type,
+      }));
     },
   },
 
   methods: {
-    getTooltipElement(params) {
-      if (!params.data.value || !Array.isArray(params.data.value)) {
-        return '';
-      }
-      const data = params.data.value;
-      const type = data[5];
-      const duration = Utils.formatDuration(data[3]);
-      const targetName = data[7];
-      const source = data[8];
-      const language = data[9];
-      const config = data[10];
-
-      const container = document.createElement('div');
-
-      const appendLine = (label, value, isBold = false, isCode = false) => {
-        if (value) {
-          if (container.childNodes.length > 0) {
-            container.appendChild(document.createElement('br'));
-          }
-          const labelNode = document.createTextNode(`${label}: `);
-          container.appendChild(labelNode);
-
-          let valueNode;
-          if (isCode) {
-            valueNode = document.createElement('div');
-            valueNode.className = 'tw-font-mono tw-bg-gray-100 tw-p-1 tw-rounded tw-whitespace-pre-wrap tw-break-all !tw-mt-0';
-            valueNode.textContent = value;
-          } else if (isBold) {
-            valueNode = document.createElement('b');
-            valueNode.textContent = value;
-          } else {
-            valueNode = document.createTextNode(value);
-          }
-          container.appendChild(valueNode);
-        }
-      };
-
-      appendLine('Target', targetName, true);
-      appendLine('Type', type);
-      appendLine('Duration', duration);
-      appendLine('Language', language);
-      appendLine('Config', config);
-      appendLine('Source', source, false, true);
-
-      return container;
-    },
-
-    handleResize() {
-      // No-op, vue-echarts handles resize via autoresize prop
-    },
-
-    onCellClick(params) {
-      if (!params.data.value || !Array.isArray(params.data.value)) {
-        return;
-      }
-
-      const clickedCommandId = parseInt(params.data.value[11]);
-      if (this.selectedCommandId === clickedCommandId) {
-        this.selectedCommandId = null;
-      } else {
-        this.selectedCommandId = clickedCommandId;
-      }
+    tooltipFields(command) {
+      return [
+        { label: 'Target', value: command.targetName, isBold: true },
+        { label: 'Type', value: command.type },
+        { label: 'Duration', value: Utils.formatDuration(command.duration.toMillis()) },
+        { label: 'Language', value: command.language },
+        { label: 'Config', value: command.config },
+        { label: 'Source', value: command.source, isCode: true },
+      ];
     },
 
-    renderItem(params, api) {
-      const trackIndex = api.value(0);
-      const start = api.coord([api.value(1), trackIndex]);
-      const end = api.coord([api.value(2), trackIndex]);
-      if (!start || !end) {
-        return;
-      }
-
-      const height = this.commandBarHeight;
-      const itemType = api.value(5);
-      const isDisabled = api.value(6);
-      const commandId = api.value(11);
-
-      const style = {
-        fill: this.colors[itemType],
-        opacity: 0.85,
-      };
-
-      if (isDisabled) {
-        Object.assign(style, {
-          fill: '#d1d5db',
-          stroke: '#d1d5db',
-          lineWidth: 0.5,
-          opacity: 0.4,
-        });
-      }
-
-      if (commandId === this.selectedCommandId) {
-        Object.assign(style, {
-          stroke: '#000000',
-          lineWidth: 2,
-        });
-      }
-
-      return {
-        type: 'rect',
-        shape: {
-          x: start[0],
-          y: start[1] - (height / 2),
-          width: end[0] - start[0],
-          height: height,
-        },
-        style: style,
-      };
+    onItemClick(command) {
+      this.selectedCommandId = this.selectedCommandId === command.id ? null : command.id;
     },
   },
 };
diff --git a/resources/js/vue/components/shared/CommandInfoCard.vue b/resources/js/vue/components/shared/CommandInfoCard.vue
index b17ba0da5e..ba6cd7f7a2 100644
--- a/resources/js/vue/components/shared/CommandInfoCard.vue
+++ b/resources/js/vue/components/shared/CommandInfoCard.vue
@@ -86,7 +86,7 @@
             <td class="tw-font-bold tw-w-px">
               {{ measurement.name }}
             </td>
-            <td>{{ addUnitsToSpecialMeasurements(measurement.name, measurement.value) }}</td>
+            <td>{{ formatMeasurement(measurement) }}</td>
           </tr>
         </tbody>
       </table>
@@ -151,6 +151,7 @@ export default {
                 node {
                   id
                   name
+                  type
                   value
                 }
               }
@@ -194,12 +195,10 @@ export default {
       return Utils.formatBytes(inputInBytes);
     },
 
-    addUnitsToSpecialMeasurements(measurementName, measurementValue) {
-      if (['BeforeHostMemoryUsed', 'AfterHostMemoryUsed'].includes(measurementName)) {
-        return Utils.formatBytesFromKib(measurementValue);
-      }
-
-      return measurementValue;
+    /** Formats numeric measurements with units, and shows any other measurement's value as-is. */
+    formatMeasurement(measurement) {
+      const [numericMeasurement] = Utils.numericMeasurements([measurement]);
+      return numericMeasurement ? Utils.formatMeasurement(numericMeasurement.name, numericMeasurement.value) : measurement.value;
     },
   },
 };
diff --git a/resources/js/vue/components/shared/TestFlameChart.vue b/resources/js/vue/components/shared/TestFlameChart.vue
index 7ed456bba2..c524855341 100644
--- a/resources/js/vue/components/shared/TestFlameChart.vue
+++ b/resources/js/vue/components/shared/TestFlameChart.vue
@@ -1,54 +1,13 @@
 <template>
-  <div>
-    <div
-      v-if="hasMaxRssData"
-      class="tw-flex tw-justify-end tw-px-2.5 tw-pt-2.5"
-    >
-      <select
-        v-model="colorMode"
-        class="tw-select tw-select-bordered tw-select-sm"
-        data-test="test-flame-chart-color-mode"
-      >
-        <option value="status">
-          Passing/Failing
-        </option>
-        <option value="maxRss">
-          MaxRSS
-        </option>
-      </select>
-    </div>
-    <div
-      v-if="colorMode === 'status'"
-      id="test-legend-container"
-      class="tw-flex tw-flex-wrap tw-justify-center tw-items-center tw-gap-x-5 tw-gap-y-2.5 tw-p-2.5 tw-text-xs"
-    >
-      <div
-        v-for="(colorClass, status) in colorClasses"
-        :key="status"
-        class="tw-flex tw-items-center"
-      >
-        <span
-          class="tw-w-3 tw-h-3 tw-mr-1.5 tw-rounded-sm"
-          :class="colorClass"
-        />
-        <span class="tw-text-gray-700">{{ status }}</span>
-      </div>
-    </div>
-    <FlameChart
-      class="tw-w-full tw-p-0 tw-flex-grow"
-      :data="processedChartData.data"
-      :tracks="processedChartData.tracks"
-      :overall-start-time="processedChartData.overallStartTime"
-      :overall-end-time="processedChartData.overallEndTime"
-      :height="totalChartHeight"
-      :tooltip-formatter="getTooltipElement"
-      :render-item="renderItem"
-      :large="false"
-      :progressive="0"
-      :visual-map="maxRssVisualMap"
-      @click="onCellClick"
-    />
-  </div>
+  <FlameChart
+    :items="chartItems"
+    :category-colors="categoryColors"
+    category-label="Passing/Failing"
+    :tooltip-fields="tooltipFields"
+    :large="false"
+    :progressive="0"
+    @click="onItemClick"
+  />
 </template>
 
 <script>
@@ -75,14 +34,6 @@ function resolveTailwindColor(colorClass) {
   return `rgb(${r}, ${g}, ${b})`;
 }
 
-// Known numeric CTest/instrumentation measurements and their base unit, keyed by
-// measurement name. Values are scaled to the largest useful unit for display.
-// Measurements not listed here (e.g. Processors, a CPU load average, or a
-// project-defined custom measurement) are shown as a plain number.
-const KIB_MEMORY_MEASUREMENTS = new Set(['MaxRSS', 'AfterHostMemoryUsed', 'BeforeHostMemoryUsed']);
-const MICROSECOND_TIME_MEASUREMENTS = new Set(['UserTime', 'SystemTime']);
-const SECOND_TIME_MEASUREMENTS = new Set(['Execution Time']);
-
 export default {
   name: 'TestFlameChart',
 
@@ -91,7 +42,10 @@ export default {
   },
 
   props: {
-    /** Test records with Luxon DateTime startTime and Duration duration values. */
+    /**
+     * Test records with Luxon DateTime startTime and Duration duration values, and
+     * numeric measurements ({ name, value } objects).
+     */
     tests: {
       type: Array,
       required: true,
@@ -100,147 +54,24 @@ export default {
 
   data() {
     return {
-      colorMode: 'status',
-      colorClasses: {
-        Passed: 'tw-bg-success',
-        Failed: 'tw-bg-error',
-      },
-      resolvedColors: {},
-      testBarHeight: 15,
-      testBarSpacing: 5,
-      minimumBarWidth: 2,
-      // Bars with no MaxRSS measurement, shown only in MaxRSS color mode.
-      noDataColor: '#e1e0d9',
+      categoryColors: {},
     };
   },
 
   computed: {
-    processedChartData() {
-      if (!this.tests || this.tests.length === 0) {
-        return {
-          data: [],
-          tracks: [],
-          overallStartTime: 0,
-          overallEndTime: 0,
-        };
-      }
-
-      const rawTestData = this.tests.map((test, index) => {
-        const startTime = test.startTime.toMillis();
-        const endTime = startTime + test.duration.toMillis();
-        return {
-          ...test,
-          startTime,
-          endTime,
-          originalIndex: index,
-        };
-      });
-
-      const overallStartTime = rawTestData.reduce((start, test) => Math.min(start, test.startTime), Infinity);
-      const overallEndTime = rawTestData.reduce((end, test) => Math.max(end, test.endTime), -Infinity);
-
-      const trackEndTimes = [];
-      const processedData = [];
-      const sortedData = rawTestData.slice().sort((a, b) => a.startTime - b.startTime);
-
-      sortedData.forEach((test) => {
-        let placed = false;
-        let trackIndex = -1;
-        for (let i = 0; i < trackEndTimes.length; i++) {
-          if (test.startTime >= trackEndTimes[i]) {
-            trackEndTimes[i] = test.endTime;
-            trackIndex = i;
-            placed = true;
-            break;
-          }
-        }
-        if (!placed) {
-          trackIndex = trackEndTimes.length;
-          trackEndTimes.push(test.endTime);
-        }
-
-        const processedTest = {
-          value: [
-            trackIndex,
-            test.startTime,
-            test.endTime,
-            test.duration.toMillis(),
-            test.originalIndex,
-            test.status,
-            test.disabled,
-            test.name,
-            test.subProject,
-            test.id,
-            Number.isFinite(test.maxRss) ? test.maxRss : null,
-            test.numericMeasurements ?? [],
-          ],
-        };
-        processedData.push(processedTest);
-      });
-
-      return {
-        data: processedData,
-        tracks: trackEndTimes.map((_, i) => `Slot ${i + 1}`),
-        overallStartTime,
-        overallEndTime,
-      };
-    },
-
-    totalChartHeight() {
-      const numtracks = this.processedChartData.tracks.length;
-      return ((this.testBarHeight + this.testBarSpacing) * numtracks) + 60;
-    },
-
-    hasMaxRssData() {
-      return (this.tests ?? []).some((test) => Number.isFinite(test.maxRss));
-    },
-
-    maxRssRange() {
-      let min = Infinity;
-      let max = -Infinity;
-      for (const test of this.tests ?? []) {
-        if (Number.isFinite(test.maxRss)) {
-          min = Math.min(min, test.maxRss);
-          max = Math.max(max, test.maxRss);
-        }
-      }
-      return min === Infinity ? { min: 0, max: 0 } : { min, max };
-    },
-
-    // Let ECharts use its theme's default gradient by leaving inRange unset.
-    // Dimension 10 is the MaxRSS value in each item's `value` array.
-    // Read via `api.visual('color')` in renderItem.
-    maxRssVisualMap() {
-      if (this.colorMode !== 'maxRss' || !this.hasMaxRssData) {
-        return null;
-      }
-      const { min, max } = this.maxRssRange;
-      return {
-        show: false,
-        type: 'continuous',
-        seriesIndex: 0,
-        dimension: 10,
-        min,
-        max: max > min ? max : min + 1,
-      };
-    },
-  },
-
-  watch: {
-    hasMaxRssData(hasData) {
-      if (!hasData) {
-        this.colorMode = 'status';
-      }
+    chartItems() {
+      return this.tests.map((test) => ({
+        ...test,
+        category: this.humanReadableTestStatus(test.status),
+      }));
     },
   },
 
   created() {
-    this.resolvedColors = Object.fromEntries(
-      Object.entries(this.colorClasses).map(([status, colorClass]) => [
-        status,
-        resolveTailwindColor(colorClass),
-      ]),
-    );
+    this.categoryColors = {
+      Passed: resolveTailwindColor('tw-bg-success'),
+      Failed: resolveTailwindColor('tw-bg-error'),
+    };
   },
 
   methods: {
@@ -257,126 +88,17 @@ export default {
       }
     },
 
-    formatMeasurementValue(value) {
-      if (!Number.isFinite(value)) {
-        return String(value);
-      }
-      return Number.isInteger(value) ? value.toLocaleString() : value.toFixed(2);
-    },
-
-    // Dispatches each measurement to the formatter for its base unit, scaling to
-    // the largest useful unit. Measurements with no known unit are shown as a
-    // plain number.
-    formatMeasurement(name, value) {
-      if (!Number.isFinite(value)) {
-        return String(value);
-      }
-      if (KIB_MEMORY_MEASUREMENTS.has(name)) {
-        return Utils.formatBytesFromKib(value);
-      }
-      if (MICROSECOND_TIME_MEASUREMENTS.has(name)) {
-        return Utils.formatDuration(value / 1000);
-      }
-      if (SECOND_TIME_MEASUREMENTS.has(name)) {
-        return Utils.formatDuration(value * 1000);
-      }
-      return this.formatMeasurementValue(value);
-    },
-
-    getTooltipElement(params) {
-      if (!params.data.value || !Array.isArray(params.data.value)) {
-        return '';
-      }
-      const data = params.data.value;
-      const duration = Utils.formatDuration(data[3]);
-      const status = this.humanReadableTestStatus(data[5]);
-      const name = data[7];
-      const subProject = data[8];
-      const numericMeasurements = data[11] ?? [];
-
-      const container = document.createElement('div');
-
-      const appendLine = (label, value, isBold = false) => {
-        if (value) {
-          if (container.childNodes.length > 0) {
-            container.appendChild(document.createElement('br'));
-          }
-          const labelNode = document.createTextNode(`${label}: `);
-          container.appendChild(labelNode);
-
-          if (isBold) {
-            const valueNode = document.createElement('b');
-            valueNode.textContent = value;
-            container.appendChild(valueNode);
-          } else {
-            container.appendChild(document.createTextNode(value));
-          }
-        }
-      };
-
-      appendLine('Name', name, true);
-      appendLine('SubProject', subProject);
-      appendLine('Status', status);
-      appendLine('Duration', duration);
-      numericMeasurements.forEach((measurement) => {
-        appendLine(measurement.name, this.formatMeasurement(measurement.name, measurement.value));
-      });
-
-      return container;
+    tooltipFields(test) {
+      return [
+        { label: 'Name', value: test.name, isBold: true },
+        { label: 'SubProject', value: test.subProject },
+        { label: 'Status', value: test.category },
+        { label: 'Duration', value: Utils.formatDuration(test.duration.toMillis()) },
+      ];
     },
 
-    onCellClick(params) {
-      if (!params.data.value || !Array.isArray(params.data.value)) {
-        return;
-      }
-
-      const testId = params.data.value[9];
-      window.location.href = `${this.$baseURL}/tests/${testId}`;
-    },
-
-    renderItem(params, api) {
-      const trackIndex = api.value(0);
-      const start = api.coord([api.value(1), trackIndex]);
-      const end = api.coord([api.value(2), trackIndex]);
-      if (!start || !end) {
-        return;
-      }
-
-      const height = this.testBarHeight;
-      const status = this.humanReadableTestStatus(api.value(5));
-      const isDisabled = api.value(6);
-      const maxRss = api.value(10);
-
-      let style;
-      if (this.colorMode === 'maxRss') {
-        const hasMaxRss = Number.isFinite(maxRss);
-        style = { fill: hasMaxRss ? api.visual('color') : this.noDataColor, opacity: 0.9 };
-      } else {
-        style = { fill: this.resolvedColors[status], opacity: 0.85 };
-      }
-
-      if (isDisabled) {
-        Object.assign(style, {
-          fill: '#d1d5db',
-          stroke: '#d1d5db',
-          lineWidth: 0.5,
-          opacity: 0.4,
-        });
-      }
-
-      // Keep zero-duration tests visible and clickable.
-      const width = Math.max(end[0] - start[0], this.minimumBarWidth);
-
-      return {
-        type: 'rect',
-        shape: {
-          x: start[0],
-          y: start[1] - (height / 2),
-          width: width,
-          height: height,
-        },
-        style: style,
-      };
+    onItemClick(test) {
+      window.location.href = `${this.$baseURL}/tests/${test.id}`;
     },
   },
 };
diff --git a/resources/js/vue/components/shared/Utils.js b/resources/js/vue/components/shared/Utils.js
index d23c2f7f91..2a8b5ec628 100644
--- a/resources/js/vue/components/shared/Utils.js
+++ b/resources/js/vue/components/shared/Utils.js
@@ -49,4 +49,43 @@ export default {
   formatBytesFromMib(mib) {
     return this.formatBytes(mib * (1024 ** 2));
   },
+
+  /**
+   * Returns the numeric measurements (those with a numeric/* type) from a list of GraphQL test or
+   * build command measurements, as { name, value } objects with a number value.  Numeric measurements
+   * whose value can't be parsed as a finite number are skipped.
+   */
+  numericMeasurements(measurements) {
+    return measurements
+      .filter((measurement) => measurement.type.startsWith('numeric'))
+      .map((measurement) => ({ name: measurement.name, value: parseFloat(measurement.value) }))
+      .filter((measurement) => Number.isFinite(measurement.value));
+  },
+
+  /**
+   * Formats a numeric test or build command measurement in its base unit, scaled to
+   * the largest useful unit. Measurements with no known unit are shown as a plain number.
+   */
+  formatMeasurement(name, value) {
+    // Known numeric CTest/instrumentation measurements and their base unit, keyed by
+    // measurement name. Measurements not listed here (e.g. Processors, a CPU load
+    // average, or a project-defined custom measurement) are shown as a plain number.
+    const KIB_MEMORY_MEASUREMENTS = new Set(['MaxRSS', 'AfterHostMemoryUsed', 'BeforeHostMemoryUsed']);
+    const MICROSECOND_TIME_MEASUREMENTS = new Set(['UserTime', 'SystemTime']);
+    const SECOND_TIME_MEASUREMENTS = new Set(['Execution Time']);
+
+    if (!Number.isFinite(value)) {
+      return String(value);
+    }
+    if (KIB_MEMORY_MEASUREMENTS.has(name)) {
+      return this.formatBytesFromKib(value);
+    }
+    if (MICROSECOND_TIME_MEASUREMENTS.has(name)) {
+      return this.formatDuration(value / 1000);
+    }
+    if (SECOND_TIME_MEASUREMENTS.has(name)) {
+      return this.formatDuration(value * 1000);
+    }
+    return Number.isInteger(value) ? value.toLocaleString() : value.toFixed(2);
+  },
 };
diff --git a/tests/Browser/Pages/BuildInstrumentationPageTest.php b/tests/Browser/Pages/BuildInstrumentationPageTest.php
new file mode 100644
index 0000000000..b3448f49d0
--- /dev/null
+++ b/tests/Browser/Pages/BuildInstrumentationPageTest.php
@@ -0,0 +1,125 @@
+<?php
+
+namespace Tests\Browser\Pages;
+
+use App\Enums\BuildCommandType;
+use App\Models\Build;
+use App\Models\BuildCommand;
+use App\Models\Project;
+use App\Models\Site;
+use App\Models\SiteInformation;
+use App\Services\SiteService;
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Str;
+use Laravel\Dusk\Browser;
+use Tests\BrowserTestCase;
+use Tests\Traits\CreatesProjects;
+
+class BuildInstrumentationPageTest extends BrowserTestCase
+{
+    use CreatesProjects;
+
+    private Project $project;
+
+    private Build $build;
+
+    private Site $site;
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        $this->project = $this->makePublicProject();
+
+        $this->site = Site::factory()->create();
+        SiteService::updateSiteInfoIfChanged($this->site, new SiteInformation([]));
+
+        /** @var Build $build */
+        $build = $this->project->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+        ]);
+        $this->build = $build;
+    }
+
+    public function tearDown(): void
+    {
+        $this->project->delete();
+        $this->site->delete();
+
+        parent::tearDown();
+    }
+
+    /**
+     * @param array<string,string> $measurements
+     */
+    private function addCompileCommand(array $measurements, string $measurementType = 'numeric/integer'): BuildCommand
+    {
+        /** @var BuildCommand $command */
+        $command = $this->build->commands()->create([
+            'type' => BuildCommandType::COMPILE,
+            'starttime' => Carbon::now(),
+            'duration' => 12345,
+            'command' => Str::random(10),
+            'result' => '0',
+            'source' => Str::random(10),
+            'language' => 'C++',
+            'config' => 'Release',
+            'workingdirectory' => Str::uuid()->toString(),
+        ]);
+
+        foreach ($measurements as $name => $value) {
+            $command->measurements()->create([
+                'name' => $name,
+                'type' => $measurementType,
+                'value' => $value,
+            ]);
+        }
+
+        return $command;
+    }
+
+    public function testHeatmapColorModeHiddenWithoutMaxRss(): void
+    {
+        $this->addCompileCommand(['BeforeHostMemoryUsed' => '2753536']);
+
+        $this->browse(function (Browser $browser): void {
+            $browser->visit("/builds/{$this->build->id}/instrumentation")
+                ->waitFor('@flame-chart-legend')
+                ->assertSeeIn('@flame-chart-legend', 'COMPILE')
+                ->assertMissing('@flame-chart-color-mode')
+            ;
+        });
+    }
+
+    public function testHeatmapColorModeHiddenWithNonNumericMaxRss(): void
+    {
+        $this->addCompileCommand(['MaxRSS' => '78144'], 'text/string');
+
+        $this->browse(function (Browser $browser): void {
+            $browser->visit("/builds/{$this->build->id}/instrumentation")
+                ->waitFor('@flame-chart-legend')
+                ->assertMissing('@flame-chart-color-mode')
+            ;
+        });
+    }
+
+    public function testHeatmapColorModeShownWithMaxRss(): void
+    {
+        $this->addCompileCommand(['MaxRSS' => '78144']);
+
+        $this->browse(function (Browser $browser): void {
+            $browser->visit("/builds/{$this->build->id}/instrumentation")
+                ->waitFor('@flame-chart-color-mode')
+                ->assertSelectHasOptions('@flame-chart-color-mode', ['category', 'heatmap'])
+                ->assertSeeIn('@flame-chart-color-mode', 'MaxRSS')
+                ->assertSeeIn('@flame-chart-legend', 'COMPILE')
+                ->select('@flame-chart-color-mode', 'heatmap')
+                ->waitUntilMissing('@flame-chart-legend')
+                ->select('@flame-chart-color-mode', 'category')
+                ->waitFor('@flame-chart-legend')
+            ;
+        });
+    }
+}
diff --git a/tests/Browser/Pages/BuildTestsPageTest.php b/tests/Browser/Pages/BuildTestsPageTest.php
index ece959c95e..48db24b3e9 100644
--- a/tests/Browser/Pages/BuildTestsPageTest.php
+++ b/tests/Browser/Pages/BuildTestsPageTest.php
@@ -498,6 +498,42 @@ public function testShowsTestTimelineWhenStartTimesPresent(): void
                 ->assertSeeIn('@test-timeline', 'Test Execution Timeline')
                 ->click('@test-timeline')
                 ->assertSeeIn('@test-timeline', 'Passed')
+                ->assertMissing('@flame-chart-color-mode')
+            ;
+        });
+    }
+
+    public function testTestTimelineHeatmapColorModeShownWithMaxRss(): void
+    {
+        /** @var Build $build */
+        $build = $this->project->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+        ]);
+
+        /** @var Test $test */
+        $test = $build->tests()->create([
+            'testname' => Str::uuid()->toString(),
+            'status' => 'passed',
+            'time' => '1.5',
+            'starttime' => '2025-01-01 11:22:33',
+        ]);
+
+        $test->testMeasurements()->create([
+            'name' => 'MaxRSS',
+            'type' => 'numeric/integer',
+            'value' => '14576',
+        ]);
+
+        $this->browse(function (Browser $browser) use ($build): void {
+            $browser->visit("/builds/{$build->id}/tests")
+                ->waitFor('@test-timeline')
+                ->click('@test-timeline')
+                ->waitFor('@flame-chart-color-mode')
+                ->assertSeeIn('@flame-chart-legend', 'Passed')
+                ->select('@flame-chart-color-mode', 'heatmap')
+                ->waitUntilMissing('@flame-chart-legend')
             ;
         });
     }
diff --git a/tests/Spec/CMakeLists.txt b/tests/Spec/CMakeLists.txt
index 27b4ccbff4..7418491e4f 100644
--- a/tests/Spec/CMakeLists.txt
+++ b/tests/Spec/CMakeLists.txt
@@ -6,5 +6,6 @@ function(add_jest_test TestName)
   )
 endfunction()
 
+add_jest_test(flame-chart-layout)
 add_jest_test(repository-integrations)
 add_jest_test(utils)
diff --git a/tests/Spec/flame-chart-layout.spec.js b/tests/Spec/flame-chart-layout.spec.js
new file mode 100644
index 0000000000..1ba8264017
--- /dev/null
+++ b/tests/Spec/flame-chart-layout.spec.js
@@ -0,0 +1,72 @@
+import { DateTime, Duration } from 'luxon';
+import FlameChartLayout, { Dimension } from '../../resources/js/vue/components/shared/Charts/FlameChartLayout';
+
+const BASE_TIME = DateTime.fromISO('2026-01-01T00:00:00Z');
+
+function item(startOffsetMs, durationMs, measurements = undefined) {
+  return {
+    startTime: BASE_TIME.plus({ milliseconds: startOffsetMs }),
+    duration: Duration.fromMillis(durationMs),
+    measurements,
+  };
+}
+
+function values(layout, dimension) {
+  return layout.data.map((datum) => datum.value[dimension]);
+}
+
+describe('FlameChartLayout', () => {
+  describe('layout', () => {
+    it('handles an empty list of items', () => {
+      expect(FlameChartLayout.layout([], 'MaxRSS')).toEqual({
+        data: [],
+        trackCount: 0,
+        overallStartTime: 0,
+        overallEndTime: 0,
+        heatmapRange: null,
+      });
+    });
+
+    it('places sequential items on a single track', () => {
+      const layout = FlameChartLayout.layout([item(0, 100), item(100, 50), item(200, 10)], 'MaxRSS');
+      expect(layout.trackCount).toBe(1);
+      expect(values(layout, Dimension.TRACK)).toEqual([0, 0, 0]);
+    });
+
+    it('places overlapping items on separate tracks and reuses freed tracks', () => {
+      const layout = FlameChartLayout.layout([item(0, 100), item(50, 100), item(120, 10)], 'MaxRSS');
+      expect(layout.trackCount).toBe(2);
+      expect(values(layout, Dimension.TRACK)).toEqual([0, 1, 0]);
+    });
+
+    it('sorts by start time and records each item\'s original index', () => {
+      const layout = FlameChartLayout.layout([item(200, 10), item(0, 10), item(100, 10)], 'MaxRSS');
+      expect(values(layout, Dimension.ITEM_INDEX)).toEqual([1, 2, 0]);
+      expect(values(layout, Dimension.START_TIME)).toEqual([0, 100, 200].map((offset) => BASE_TIME.toMillis() + offset));
+    });
+
+    it('computes the overall start and end times', () => {
+      const layout = FlameChartLayout.layout([item(100, 500), item(0, 50), item(300, 50)], 'MaxRSS');
+      expect(layout.overallStartTime).toBe(BASE_TIME.toMillis());
+      expect(layout.overallEndTime).toBe(BASE_TIME.toMillis() + 600);
+      expect(values(layout, Dimension.END_TIME)).toEqual([50, 600, 350].map((offset) => BASE_TIME.toMillis() + offset));
+    });
+
+    it('extracts the heatmap measurement and its range', () => {
+      const layout = FlameChartLayout.layout([
+        item(0, 10, [{ name: 'MaxRSS', value: 300 }, { name: 'UserTime', value: 1 }]),
+        item(10, 10, [{ name: 'UserTime', value: 1000 }]),
+        item(20, 10),
+        item(30, 10, [{ name: 'MaxRSS', value: 100 }]),
+        item(40, 10, [{ name: 'MaxRSS', value: NaN }]),
+      ], 'MaxRSS');
+      expect(values(layout, Dimension.HEATMAP_VALUE)).toEqual([300, null, null, 100, null]);
+      expect(layout.heatmapRange).toEqual({ min: 100, max: 300 });
+    });
+
+    it('has no heatmap range when no item has the heatmap measurement', () => {
+      const layout = FlameChartLayout.layout([item(0, 10, [{ name: 'UserTime', value: 1 }]), item(10, 10)], 'MaxRSS');
+      expect(layout.heatmapRange).toBeNull();
+    });
+  });
+});
diff --git a/tests/Spec/utils.spec.js b/tests/Spec/utils.spec.js
index 11b3fec59a..3d56676868 100644
--- a/tests/Spec/utils.spec.js
+++ b/tests/Spec/utils.spec.js
@@ -135,4 +135,60 @@ describe('Utils', () => {
       expect(Utils.formatBytesFromMib(1024 ** 2)).toBe('1.00 TiB');
     });
   });
+
+  describe('numericMeasurements', () => {
+    it('parses measurements with a numeric type', () => {
+      expect(Utils.numericMeasurements([
+        { name: 'MaxRSS', type: 'numeric/integer', value: '78144' },
+        { name: 'AfterCPULoadAverage', type: 'numeric/double', value: '7.3916015625' },
+      ])).toEqual([
+        { name: 'MaxRSS', value: 78144 },
+        { name: 'AfterCPULoadAverage', value: 7.3916015625 },
+      ]);
+    });
+
+    it('skips measurements without a numeric type, even if their value looks numeric', () => {
+      expect(Utils.numericMeasurements([
+        { name: 'Version', type: 'text/string', value: '1.2.3' },
+        { name: 'Log', type: 'text/preformatted', value: '42' },
+        { name: 'output.txt', type: 'file', value: '' },
+        { name: 'MaxRSS', type: 'numeric/integer', value: '100' },
+      ])).toEqual([{ name: 'MaxRSS', value: 100 }]);
+    });
+
+    it('skips numeric measurements whose value is not a finite number', () => {
+      expect(Utils.numericMeasurements([
+        { name: 'Empty', type: 'numeric/double', value: '' },
+        { name: 'Word', type: 'numeric/double', value: 'abc' },
+        { name: 'Infinite', type: 'numeric/double', value: 'Infinity' },
+      ])).toEqual([]);
+    });
+  });
+
+  describe('formatMeasurement', () => {
+    it('formats KiB memory measurements', () => {
+      expect(Utils.formatMeasurement('MaxRSS', 1024)).toBe('1.00 MiB');
+      expect(Utils.formatMeasurement('BeforeHostMemoryUsed', 1024 ** 2)).toBe('1.00 GiB');
+      expect(Utils.formatMeasurement('AfterHostMemoryUsed', 1)).toBe('1.00 KiB');
+    });
+
+    it('formats microsecond CPU time measurements', () => {
+      expect(Utils.formatMeasurement('UserTime', 1500000)).toBe('1.50s');
+      expect(Utils.formatMeasurement('SystemTime', 500000)).toBe('500ms');
+    });
+
+    it('formats second time measurements', () => {
+      expect(Utils.formatMeasurement('Execution Time', 2.5)).toBe('2.50s');
+    });
+
+    it('formats unknown measurements as plain numbers', () => {
+      expect(Utils.formatMeasurement('Processors', 4)).toBe('4');
+      expect(Utils.formatMeasurement('AfterCPULoadAverage', 7.3916015625)).toBe('7.39');
+    });
+
+    it('returns non-finite values as strings', () => {
+      expect(Utils.formatMeasurement('MaxRSS', NaN)).toBe('NaN');
+      expect(Utils.formatMeasurement('MaxRSS', null)).toBe('null');
+    });
+  });
 });