fix(webapp): clearer Queues metrics cards (Allocated and Oldest wait)

Two clarity fixes on the Queues pages. The "Allocated" tile now explains
that it is the sum of your queue concurrency limits and how that
compares to the environment limit, and no longer shows a warning colour
when the total goes over the environment limit (which is expected, since
any single queue can burst past it). The queue detail "Oldest wait" card
now shows a single clear number with a tooltip, and drops a second
"worst" figure that could confusingly read lower than the headline.

Mono-RevId: f016b5868e88a675dd636131c552b10fb3993928

Author: ericallam

.server-changes/queue-oldest-wait-card.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+The queue page's "Oldest wait" card now shows a single clear number (how long the oldest waiting run has been waiting) with an explanatory tooltip, and no longer shows a second "worst" figure that could confusingly read lower than the headline.

.server-changes/queues-allocated-tile-clarity.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The Queues page Allocated tile now explains that it is the sum of your queue concurrency limits, and no longer shows a warning color when those add up to more than the environment limit, which is expected.

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

@@ -462,7 +462,6 @@ function QueuesWithMetricsView() {
   const burstLimit = Math.round(envLimit * environment.burstFactor);
   const allocated = allocation?.allocated ?? 0;
   const allocationPct = envLimit > 0 ? Math.round((allocated / envLimit) * 100) : 0;
-  const overAllocated = allocated > envLimit;
 
   // Running-block tinting (burst/limit) tracks the live running value, not the loader snapshot.
   const { limitStatus, limitClassName } = getEnvConcurrencyLimitStatus({
@@ -583,17 +582,16 @@ function QueuesWithMetricsView() {
             title={
               <span className="flex items-center gap-1">
                 Allocated
-                {allocation && overAllocated ? (
+                {allocation ? (
                   <InfoIconTooltip
-                    content="The queue limits add up to more than the environment limit, so queues will compete for concurrency when the environment saturates."
-                    buttonClassName="text-warning"
+                    content="The sum of every queue's concurrency limit. It can go over 100% of the environment limit, which is normal: it lets one queue burst while others are quiet. The environment limit still caps total running work, so queues share it when the environment is busy."
+                    contentClassName="max-w-xs"
                   />
                 ) : null}
               </span>
             }
             value={allocation ? allocated : undefined}
             formattedValue={allocation ? undefined : "–"}
-            valueClassName={cn(allocation && overAllocated && "text-warning")}
             suffix={allocation ? `${allocationPct}% of the environment limit` : undefined}
             suffixClassName="text-text-dimmed"
           />

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

@@ -1107,18 +1107,12 @@ function QueueStats({
   timeRange: TimeRangeParams;
   queueName: string;
 }) {
-  // Live "now" is empty for a queue that just drained, so add the window peak/worst as a dimmed
-  // caption (styled like "bursts up to 50" on the Queues list) — a quiet queue still shows how
-  // backed up it got recently. "worst_wait" is the window's worst head-of-line wait (max of the
-  // oldest still-waiting run's age), the same metric as the live "Oldest wait" headline — not the
-  // scheduling-delay percentiles of runs that already started. Only concurrency-keyed queues record
-  // this (max_ck_wait_ms), so it's 0/absent for non-keyed queues.
-  const { rows } = useQueueMetric(
-    `SELECT max(max_queued) AS peak_queued,\n  max(max_ck_wait_ms) AS worst_wait\nFROM queue_metrics`,
-    { ids, timeRange, queueName }
-  );
+  const { rows } = useQueueMetric(`SELECT max(max_queued) AS peak_queued\nFROM queue_metrics`, {
+    ids,
+    timeRange,
+    queueName,
+  });
   const peakQueued = rows[0] ? toNumber(rows[0].peak_queued) : 0;
-  const worstWaitMs = rows[0] ? toNumber(rows[0].worst_wait) : 0;
 
   // Latest gauges from ClickHouse, polled every 15s so the live blocks keep ticking after first
   // paint. Read the newest bucket (largest t); until the first poll lands liveRows is empty and the
@@ -1184,7 +1178,15 @@ function QueueStats({
         }
       />
       <BigNumber
-        title="Oldest wait"
+        title={
+          <span className="flex items-center gap-1">
+            Oldest wait
+            <InfoIconTooltip
+              content="How long the oldest run currently waiting in this queue has been waiting to start."
+              contentClassName="max-w-xs"
+            />
+          </span>
+        }
         formattedValue={
           oldestWaitDisplayMs !== null && oldestWaitDisplayMs > 0
             ? formatWaitMs(oldestWaitDisplayMs)
@@ -1196,8 +1198,6 @@ function QueueStats({
             oldestWaitDisplayMs >= OLDEST_WAIT_WARNING_MS &&
             "text-warning"
         )}
-        suffix={worstWaitMs > 0 ? `worst ${formatWaitMs(worstWaitMs)}` : undefined}
-        suffixClassName="text-text-dimmed"
       />
     </MetricsLayout.Grid>
   );