From 11502701b562fc6ddc3c26cee909e6ce32489f06 Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <contact@mobula.io>
Date: Thu, 16 Jul 2026 14:53:54 +0200
Subject: [PATCH] downtime bands: provider-colored tint + name/silent label +
 edge markers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feedback on #1203: the neutral red band read as 'something happened
here' without telling the reader WHO. Tint each band in the
provider's own color, add dashed edges at the outage boundaries, and
label 'PROVIDER · SILENT' above the band when it fits (with a caret
that survives on narrow single-bucket bands). Works uniformly for
Mobula/Codex/Gecko or any future provider with a live_activity
query.
---
 src/components/time-series-chart/series.tsx | 103 +++++++++++++++-----
 1 file changed, 80 insertions(+), 23 deletions(-)

diff --git a/src/components/time-series-chart/series.tsx b/src/components/time-series-chart/series.tsx
index 7769bca2..587f1099 100644
--- a/src/components/time-series-chart/series.tsx
+++ b/src/components/time-series-chart/series.tsx
@@ -22,21 +22,23 @@ type DowntimeBandsProps = {
   innerH: number;
 };
 
-/** Semi-transparent red rectangles that highlight the exact window each
- *  line was silent (contiguous gap indices). Rendered under SeriesPaths
- *  so the line stroke stays on top; drawn only for visible (non-excluded)
- *  lines so toggling a provider off in the legend hides its band with
- *  it. A single-point gap (1 bucket) still renders as a narrow band by
- *  extending one step to the right — makes a short outage visible
- *  instead of being an invisible zero-width sliver. */
+/** Colored rectangles that highlight the exact window each line was
+ *  silent (contiguous gap indices). Each band tints in the provider's
+ *  own color so multiple simultaneous outages read distinctly (e.g.
+ *  Codex teal + Mobula orange bands overlapping look like two events,
+ *  not one). A small label sits above the band with the provider name
+ *  and a short reason so a reader doesn't need to hover the line to
+ *  understand who dropped off. Rendered under SeriesPaths so the line
+ *  stroke stays on top; skipped for excluded (legend-toggled)
+ *  providers so their bands disappear with the line. A single-point
+ *  gap still renders (min width 4 px) — a short outage matters just
+ *  as much as a long one. */
 export function DowntimeBands({ drawn, padT, innerH }: DowntimeBandsProps) {
   return (
     <>
       {drawn.map((d) => {
         if (d.excluded) return null;
-        // Collect contiguous gap ranges as [startX, endX] pairs. endX is
-        // extended by one step (or the innerH) so a 1-point gap has a
-        // real visible width.
+        // Collect contiguous gap ranges as [startX, endX] pairs.
         const bands: { x: number; w: number }[] = [];
         let runStart: number | null = null;
         for (let i = 0; i < d.pts.length; i++) {
@@ -46,7 +48,7 @@ export function DowntimeBands({ drawn, padT, innerH }: DowntimeBandsProps) {
           } else if (runStart != null) {
             const startX = d.pts[runStart].x;
             const endX = d.pts[i].x;
-            bands.push({ x: startX, w: Math.max(2, endX - startX) });
+            bands.push({ x: startX, w: Math.max(4, endX - startX) });
             runStart = null;
           }
         }
@@ -54,22 +56,77 @@ export function DowntimeBands({ drawn, padT, innerH }: DowntimeBandsProps) {
         if (runStart != null) {
           const startX = d.pts[runStart].x;
           const endX = d.pts[d.pts.length - 1].x;
-          bands.push({ x: startX, w: Math.max(2, endX - startX) });
+          bands.push({ x: startX, w: Math.max(4, endX - startX) });
         }
         if (bands.length === 0) return null;
         return (
           <g key={`down-${d.slug}`} className="ts-downtime">
-            {bands.map((b, i) => (
-              <rect
-                key={i}
-                x={b.x}
-                y={padT}
-                width={b.w}
-                height={innerH}
-                fill="var(--color-danger, #b0402e)"
-                opacity={0.08}
-              />
-            ))}
+            {bands.map((b, i) => {
+              // Label only when the band is wide enough that the text
+              // fits without overflowing. On narrow bands (1 bucket)
+              // the caret above the band carries the meaning alone.
+              const cx = b.x + b.w / 2;
+              const showLabel = b.w >= 42;
+              return (
+                <g key={i}>
+                  {/* Tinted fill spans the outage window. */}
+                  <rect
+                    x={b.x}
+                    y={padT}
+                    width={b.w}
+                    height={innerH}
+                    fill={d.color}
+                    opacity={0.09}
+                  />
+                  {/* Left + right edges: dashed provider-colored strokes so
+                     the boundaries of the outage are unambiguous even
+                     when the tint is subtle. */}
+                  <line
+                    x1={b.x}
+                    x2={b.x}
+                    y1={padT}
+                    y2={padT + innerH}
+                    stroke={d.color}
+                    strokeWidth={0.8}
+                    strokeDasharray="3 3"
+                    opacity={0.55}
+                  />
+                  <line
+                    x1={b.x + b.w}
+                    x2={b.x + b.w}
+                    y1={padT}
+                    y2={padT + innerH}
+                    stroke={d.color}
+                    strokeWidth={0.8}
+                    strokeDasharray="3 3"
+                    opacity={0.55}
+                  />
+                  {/* Caret above the band, then the label. The caret
+                     alone survives on very narrow bands where the text
+                     would be truncated. */}
+                  <path
+                    d={`M ${(cx - 4).toFixed(2)} ${(padT - 2).toFixed(2)} L ${cx.toFixed(2)} ${(padT + 3).toFixed(2)} L ${(cx + 4).toFixed(2)} ${(padT - 2).toFixed(2)} Z`}
+                    fill={d.color}
+                    opacity={0.9}
+                  />
+                  {showLabel && (
+                    <text
+                      x={cx}
+                      y={padT + 14}
+                      textAnchor="middle"
+                      fontFamily="var(--font-sans)"
+                      fontSize="9.5"
+                      fontWeight="600"
+                      letterSpacing="0.06em"
+                      fill={d.color}
+                      opacity={0.95}
+                    >
+                      {d.name.toUpperCase()} · SILENT
+                    </text>
+                  )}
+                </g>
+              );
+            })}
           </g>
         );
       })}