From 530dd3587cfdcae3afeba387531abf716f85e3f9 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 27 Aug 2026 16:15:14 +0200
Subject: [PATCH] Draw the error series terracotta on Home
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Failures were slot 1 of a ramp that carries identity by lightness alone, so at
a 2px stroke the line that matters read as one picture with avg and lag. It
takes --brand-secondary now — the same terracotta the brain graph above it
already spends on a flow that cannot run. A palette entry naming a token is
resolved off the chart's element, since a canvas cannot parse var().

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/Common/UplotChart.tsx     | 11 +++++++----
 frontend/src/components/Health/HealthActivity.tsx |  9 +++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Common/UplotChart.tsx b/frontend/src/components/Common/UplotChart.tsx
index ffb3a63..5943ffe 100644
--- a/frontend/src/components/Common/UplotChart.tsx
+++ b/frontend/src/components/Common/UplotChart.tsx
@@ -176,13 +176,16 @@ function token(name: string, from: Element): string {
 /**
  * What one line is drawn in.
  *
- * A palette entry is either a slot of the app's own ramp — the shape a
- * dashboard stored before it could name colours — or a colour, which is what a
- * palette writes today. A colour is used as it stands.
+ * A palette entry is one of three things: a slot of the app's own ramp — the
+ * shape a dashboard stored before it could name colours — a token, for a line
+ * that means something the ramp has no step for, or a colour, which is what a
+ * dashboard palette writes today. A colour is used as it stands; the other two
+ * are resolved here, since the canvas cannot read a custom property.
  */
 const seriesColor = (index: number, slots: string[], from: Element) => {
   const slot = slots[index % slots.length]
-  return CHART_SLOTS.includes(slot) ? token(`--chart-${slot}`, from) : slot
+  if (CHART_SLOTS.includes(slot)) return token(`--chart-${slot}`, from)
+  return slot.startsWith("--") ? token(slot, from) : slot
 }
 
 /**
diff --git a/frontend/src/components/Health/HealthActivity.tsx b/frontend/src/components/Health/HealthActivity.tsx
index b6a9fce..4e4dbfd 100644
--- a/frontend/src/components/Health/HealthActivity.tsx
+++ b/frontend/src/components/Health/HealthActivity.tsx
@@ -102,12 +102,15 @@ function Chart({
   plots,
   pending,
   moment,
+  palette,
 }: {
   title: string
   labels: string[]
   plots: HistoryPoint[][]
   pending: boolean
   moment: Moment
+  /** Only where a line means something the ramp has no step for. */
+  palette?: string[]
 }) {
   return (
     <div
@@ -128,6 +131,7 @@ function Chart({
       <UplotChart
         labels={labels}
         plots={plots}
+        palette={palette}
         empty="Nothing has run yet."
         pending={pending}
         onCursor={moment.onCursor}
@@ -304,6 +308,11 @@ export function HealthActivity({ range }: { range: Range }) {
           ]}
           pending={seriesPending}
           moment={failuresAt}
+          // Failures are the one line here that is not a measurement of how
+          // much ran, and five steps of one blue ramp cannot say so — at a
+          // 2px stroke they read as one picture. Terracotta is what the brain
+          // graph above already spends on a flow that cannot run.
+          palette={["--brand-secondary", "3", "5"]}
         />
       </section>