@@ -0,0 +1,18 @@
+---
+'@hyperdx/app': patch
+---
+
+Color service map nodes by absolute error-rate thresholds instead of scaling
+against the worst service on the graph. A service with no errors now renders
+neutral grey rather than a pale red, and the remaining nodes fall into three
+fixed buckets (under 1%, 1-5%, and 5% or above). A service the map has no error
+data for — one that only calls others, with no incoming requests in the window —
+renders hollow rather than filled, so "nothing measured" no longer looks like
+"nothing wrong".
+
+Previously every node was a shade of red whose intensity was normalized against
+the graph-wide maximum, so a map whose worst service sat at 0.3% errors painted
+it the same deep red as one at 60%, and a healthy service was indistinguishable
+from one with a trace of errors. The legend for error rate now shows the four
+discrete steps, marks the 1% and 5% boundaries, and adds a key for the hollow
+state. Latency and throughput coloring is unchanged.
@@ -5,6 +5,8 @@ import { formatDurationMs } from '@/utils';
 
 import type { ServiceMapMetricMax } from './ServiceMapMetricContext';
 import {
+  ERROR_RATE_ELEVATED,
+  ERROR_RATE_HIGH,
   formatRate,
   getMetricGradientCss,
   getRequestsPerSecond,
@@ -16,9 +18,9 @@ import {
 import styles from './ServiceMap.module.scss';
 
 /**
- * Formats the graph-wide max for the active metric into a human label so the
- * relative (max-normalized) color ramp is interpretable — e.g. the fully
- * saturated end of the scale corresponds to this value.
+ * Labels the top of the active metric's color scale. Latency and throughput
+ * are normalized against the graph, so their label is the graph-wide max;
+ * error rate is bucketed on absolute thresholds and ignores `max`.
  */
 function formatMax(
   metric: ServiceMapMetric,
@@ -27,14 +29,16 @@ function formatMax(
   dateRange: [Date, Date],
   isSingleTrace?: boolean,
 ): string {
-  // Only treat missing/invalid data as "n/a"; a real zero (e.g. a map with no
-  // errors) is meaningful and should render as a formatted 0 for its metric.
+  // Only treat missing/invalid data as "n/a"; a real zero is meaningful and
+  // should render as a formatted 0 for its metric.
   if (!Number.isFinite(max) || max < 0) {
     return 'n/a';
   }
   switch (metric) {
     case 'errorRate':
-      return max === 0 ? '0%' : `${max.toFixed(max < 10 ? 1 : 0)}%`;
+      // Error rate is bucketed on absolute thresholds rather than normalized
+      // against the graph, so the scale ends at the top bucket, not at `max`.
+      return `≥${ERROR_RATE_HIGH}%`;
     case 'latency':
       // A zero latency max is a "no latency data" sentinel (see
       // getServiceMetricValue), not a genuine 0ms, so surface it as n/a.
@@ -81,12 +85,24 @@ export default function ServiceMapLegend({
       />
       <Group justify="space-between" gap="xs" wrap="nowrap">
         <Text size="xxs" c="var(--color-text-muted)">
-          low
+          {metric === 'errorRate' ? 'none' : 'low'}
         </Text>
+        {/* Lands on the right stop only while the bar has four equal
+            segments, which puts the 1% threshold at its midpoint. */}
+        {metric === 'errorRate' && (
+          <Text size="xxs" c="var(--color-text-muted)">
+            {ERROR_RATE_ELEVATED}%
+          </Text>
+        )}
         <Text size="xxs" c="var(--color-text)">
           {formatMax(metric, max, source, dateRange, isSingleTrace)}
         </Text>
       </Group>
+      {metric === 'errorRate' && (
+        <Text size="xxs" c="var(--color-text-muted)">
+          Hollow = no data
+        </Text>
+      )}
       <Text size="xxs" c="var(--color-text-muted)">
         Node size = throughput
       </Text>
 
@@ -55,12 +55,14 @@ export default function ServiceMapNode(
 
   const { metric, metricMax } = use(ServiceMapMetricContext);
 
-  const { backgroundColor, borderColor } = getNodeColors(
-    getServiceMetricValue(data, metric),
-    metricMax[metric],
-    props.selected,
-    metric,
-  );
+  const { backgroundColor, borderColor, borderStyle, borderWidth } =
+    getNodeColors(
+      getServiceMetricValue(data, metric),
+      metricMax[metric],
+      props.selected,
+      metric,
+      totalIncomingRequestCount > 0,
+    );
 
   // Fallback matches the schema default (3 = ms); in practice the field is
   // always present on a parsed source.
@@ -116,6 +118,8 @@ export default function ServiceMapNode(
             style={{
               backgroundColor,
               borderColor,
+              borderStyle,
+              borderWidth,
               width: size,
               height: size,
             }}
 
@@ -13,6 +13,7 @@ import {
 import { formatDurationMs } from '@/utils';
 
 import {
+  ERROR_RATE_HIGH,
   formatApproximateNumber,
   formatRate,
   navigateToTraceSearch,
@@ -56,7 +57,7 @@ export default function ServiceMapTooltip({
   // Only alarm (red) once errors are non-trivial; a fraction of a percent reads
   // as amber and a clean service stays neutral-danger-free.
   const errorColor =
-    errorPercentage >= 5
+    errorPercentage >= ERROR_RATE_HIGH
       ? 'var(--color-text-danger)'
       : 'var(--color-chart-warning)';
 
 
@@ -3,6 +3,7 @@ import { SourceKind, TTraceSource } from '@hyperdx/common-utils/dist/types';
 
 import {
   deriveDisplayMetrics,
+  ERROR_RATE_HIGH,
   formatApproximateNumber,
   formatRate,
   getMetricGradientCss,
@@ -254,38 +255,134 @@ function parseHsl(color: string | undefined): {
 }
 
 describe('getNodeColors', () => {
+  // Latency and throughput stay max-normalized; error rate is bucketed on
+  // absolute thresholds and is covered separately below.
   describe('sequential ramp', () => {
     it('goes from a light tint at zero intensity to a dark shade at max', () => {
-      const low = parseHsl(getNodeColors(0, 20, false).backgroundColor);
-      const high = parseHsl(getNodeColors(20, 20, false).backgroundColor);
+      const low = parseHsl(
+        getNodeColors(0, 20, false, 'throughput').backgroundColor,
+      );
+      const high = parseHsl(
+        getNodeColors(20, 20, false, 'throughput').backgroundColor,
+      );
       // Light -> dark: lightness decreases, saturation increases as the metric
       // value climbs (a proper sequential scale, not a grey->color ramp).
       expect(high.l).toBeLessThan(low.l);
       expect(high.s).toBeGreaterThan(low.s);
     });
 
     it('increases intensity monotonically with the value', () => {
-      const l0 = parseHsl(getNodeColors(0, 20, false).backgroundColor).l;
-      const l5 = parseHsl(getNodeColors(5, 20, false).backgroundColor).l;
-      const l10 = parseHsl(getNodeColors(10, 20, false).backgroundColor).l;
-      const l20 = parseHsl(getNodeColors(20, 20, false).backgroundColor).l;
-      expect(l0).toBeGreaterThanOrEqual(l5);
-      expect(l5).toBeGreaterThanOrEqual(l10);
-      expect(l10).toBeGreaterThanOrEqual(l20);
+      const lightnessAt = (value: number) =>
+        parseHsl(getNodeColors(value, 20, false, 'throughput').backgroundColor)
+          .l;
+      expect(lightnessAt(0)).toBeGreaterThanOrEqual(lightnessAt(5));
+      expect(lightnessAt(5)).toBeGreaterThanOrEqual(lightnessAt(10));
+      expect(lightnessAt(10)).toBeGreaterThanOrEqual(lightnessAt(20));
     });
 
     it('caps at the max value even when the value is higher', () => {
-      expect(getNodeColors(30, 20, false)).toEqual(
-        getNodeColors(20, 20, false),
+      expect(getNodeColors(30, 20, false, 'throughput')).toEqual(
+        getNodeColors(20, 20, false, 'throughput'),
       );
     });
 
     it('treats a non-positive max as zero intensity', () => {
-      expect(getNodeColors(5, 0, false)).toEqual(getNodeColors(0, 20, false));
+      expect(getNodeColors(5, 0, false, 'throughput')).toEqual(
+        getNodeColors(0, 20, false, 'throughput'),
+      );
     });
 
     it('renders the border a fixed step darker than the fill', () => {
-      const { backgroundColor, borderColor } = getNodeColors(10, 20, false);
+      const { backgroundColor, borderColor } = getNodeColors(
+        10,
+        20,
+        false,
+        'throughput',
+      );
+      expect(parseHsl(borderColor).l).toBeLessThan(parseHsl(backgroundColor).l);
+      expect(parseHsl(borderColor).h).toBe(parseHsl(backgroundColor).h);
+    });
+  });
+
+  describe('absolute error-rate buckets', () => {
+    const fillAt = (errorPercentage: number, max = 100) =>
+      parseHsl(
+        getNodeColors(errorPercentage, max, false, 'errorRate').backgroundColor,
+      );
+
+    it('paints zero errors a neutral color, not the low end of the red ramp', () => {
+      const none = fillAt(0);
+      const lowest = fillAt(0.1);
+      expect(none.h).not.toBe(SERVICE_MAP_METRIC_HUE.errorRate);
+      expect(none.s).toBeLessThan(lowest.s);
+      expect(none).not.toEqual(lowest);
+    });
+
+    it('keeps zero neutral no matter what the graph-wide max is', () => {
+      expect(fillAt(0, 0)).toEqual(fillAt(0, 100));
+    });
+
+    it('ignores the graph-wide max so a shade always means the same rate', () => {
+      // The bug this replaces: a 0.3%-error service painted full-intensity red
+      // just because it was the worst on the graph.
+      expect(fillAt(0.3, 0.3)).toEqual(fillAt(0.3, 100));
+      expect(fillAt(0.3, 0.3)).not.toEqual(fillAt(60, 100));
+    });
+
+    it('darkens across the low, elevated and high buckets', () => {
+      expect(fillAt(0.5).l).toBeGreaterThan(fillAt(3).l);
+      expect(fillAt(3).l).toBeGreaterThan(fillAt(20).l);
+    });
+
+    it('treats each threshold as an inclusive lower bound', () => {
+      expect(fillAt(0.99)).toEqual(fillAt(0.01));
+      expect(fillAt(1)).toEqual(fillAt(4.99));
+      expect(fillAt(1)).not.toEqual(fillAt(0.99));
+      expect(fillAt(ERROR_RATE_HIGH)).toEqual(fillAt(100));
+      expect(fillAt(ERROR_RATE_HIGH)).not.toEqual(fillAt(4.99));
+    });
+
+    it('renders a service with no measured requests outline-only', () => {
+      // A caller-only service has errorPercentage 0 but no error data at all;
+      // a solid neutral would read as a clean record.
+      const noData = getNodeColors(0, 100, false, 'errorRate', false);
+      expect(noData.backgroundColor).toBe('transparent');
+      expect(noData.borderColor).toBe('var(--color-chart-gray)');
+    });
+
+    it('separates no-data from no-errors by border style, not colour', () => {
+      // chart-gray sits within two points of the neutral node's derived
+      // border, so the dash is what actually distinguishes the two states.
+      const noData = getNodeColors(0, 100, false, 'errorRate', false);
+      const noErrors = getNodeColors(0, 100, false, 'errorRate');
+      expect(noData.borderStyle).toBe('dashed');
+      expect(noErrors.borderStyle).toBe('solid');
+    });
+
+    it('keeps a selected no-data node visible on a white canvas', () => {
+      // The usual white selection ring would vanish: the fill is transparent
+      // and the light-mode canvas is --color-bg-body, which is white. Width
+      // carries the selection instead.
+      const selected = getNodeColors(0, 100, true, 'errorRate', false);
+      expect(selected.borderColor).not.toBe('white');
+      expect(selected.borderWidth).toBeGreaterThan(
+        getNodeColors(0, 100, false, 'errorRate', false).borderWidth,
+      );
+    });
+
+    it('does not treat other metrics as no-data', () => {
+      expect(getNodeColors(10, 20, false, 'throughput', false)).toEqual(
+        getNodeColors(10, 20, false, 'throughput'),
+      );
+    });
+
+    it('renders the border darker than the fill for the neutral state too', () => {
+      const { backgroundColor, borderColor } = getNodeColors(
+        0,
+        100,
+        false,
+        'errorRate',
+      );
       expect(parseHsl(borderColor).l).toBeLessThan(parseHsl(backgroundColor).l);
       expect(parseHsl(borderColor).h).toBe(parseHsl(backgroundColor).h);
     });
@@ -314,8 +411,8 @@ describe('getNodeColors', () => {
     });
 
     it('returns different colors for different inputs', () => {
-      expect(getNodeColors(5, 20, false)).not.toEqual(
-        getNodeColors(10, 20, false),
+      expect(getNodeColors(5, 20, false, 'throughput')).not.toEqual(
+        getNodeColors(10, 20, false, 'throughput'),
       );
     });
   });
@@ -340,7 +437,7 @@ describe('getNodeColors', () => {
 
 describe('getMetricGradientCss', () => {
   it('builds a left-to-right gradient from the ramp endpoints', () => {
-    const css = getMetricGradientCss('errorRate');
+    const css = getMetricGradientCss('latency');
     const stops = css.match(/hsl\([^)]+\)/g) ?? [];
     expect(css).toContain('linear-gradient(to right,');
     expect(stops).toHaveLength(2);
@@ -354,6 +451,27 @@ describe('getMetricGradientCss', () => {
     expect(parseHsl(stops[0]).h).toBe(SERVICE_MAP_METRIC_HUE.throughput);
     expect(parseHsl(stops[1]).h).toBe(SERVICE_MAP_METRIC_HUE.throughput);
   });
+
+  it('reuses the node fills verbatim as its error-rate stops', () => {
+    const stops =
+      getMetricGradientCss('errorRate').match(/hsl\([^)]+\)/g) ?? [];
+    const fillAt = (errorPercentage: number) =>
+      getNodeColors(errorPercentage, 100, false, 'errorRate').backgroundColor;
+    expect(stops).toEqual([fillAt(0), fillAt(0.5), fillAt(3), fillAt(10)]);
+  });
+
+  it('emits hard stops for error rate, one per bucket plus the neutral', () => {
+    const css = getMetricGradientCss('errorRate');
+    const stops = css.match(/hsl\([^)]+\)/g) ?? [];
+    expect(stops).toHaveLength(4);
+    // Hard stops, not a blend: each color carries an explicit start and end.
+    expect(css).toContain('0% 25%');
+    expect(css).toContain('75% 100%');
+    expect(parseHsl(stops[0]).h).not.toBe(SERVICE_MAP_METRIC_HUE.errorRate);
+    for (const stop of stops.slice(1)) {
+      expect(parseHsl(stop).h).toBe(SERVICE_MAP_METRIC_HUE.errorRate);
+    }
+  });
 });
 
 describe('getServiceMetricValue', () => {