feat(webapp): recolor the concurrency line warning at the limit

The Concurrency chart's tooltip promised 'yellow when at the limit' but nothing
was recolored. Add an at-or-above warningOverlay variant (running >= limit) and
wire it up, so the line turns warning where the queue is saturated.

Author: kathiekiwi

apps/webapp/app/components/primitives/charts/ChartLine.tsx

@@ -134,7 +134,8 @@ export type ChartLineRendererProps = {
    */
   warningOverlay?:
     | { threshold: number; color?: string }
-    | { series: string; below: string; color?: string };
+    | { series: string; below: string; color?: string }
+    | { series: string; atOrAbove: string; color?: string };
   /** Width injected by ResponsiveContainer */
   width?: number;
   /** Height injected by ResponsiveContainer */
@@ -320,6 +321,11 @@ export function ChartLineRenderer({
             const b = Number(r[warningOverlay.below]);
             return Number.isFinite(b) && v < b;
           }
+          if ("atOrAbove" in warningOverlay!) {
+            // "At the limit": the series reaches or exceeds its companion (e.g. running >= limit).
+            const b = Number(r[warningOverlay.atOrAbove]);
+            return Number.isFinite(b) && b > 0 && v >= b;
+          }
           return v > warningOverlay!.threshold;
         };
         const inOverlay = isOver(data[i - 1]) || isOver(row) || isOver(data[i + 1]);

apps/webapp/app/components/queues/QueueMetricCards.tsx

@@ -94,7 +94,7 @@ type QueueMetricChartProps = {
   fillGaps?: boolean;
   defaultPeriod?: string;
   /** Recolor a series warning where it drops below another (e.g. started below enqueued). */
-  warningOverlay?: { series: string; below: string };
+  warningOverlay?: { series: string; below: string } | { series: string; atOrAbove: string };
   /**
    * Series whose leading zeros should be back-filled with the first real value. Gauge series that
    * are only emitted while the queue is active (e.g. the concurrency `limit`) read as 0 before the

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues_.$queueParam/route.tsx

@@ -367,6 +367,8 @@ function OverviewCharts({
             { key: "limit", label: "Limit", color: COLORS.limit },
             { key: "running", label: "Running", color: COLORS.running },
           ]}
+          // Recolour Running warning where it reaches the limit (saturated), matching the tooltip.
+          warningOverlay={{ series: "running", atOrAbove: "limit" }}
           // The limit is a config value emitted only while the queue is active; back-fill its
           // leading zeros so the reference line doesn't start with a false 0→limit step.
           carryBackfill={["limit"]}