Queue metrics & health: UI polish (TRI-12068) (#4354)

**Stacked on #4131** — targets `feat/queue-metrics-and-health`, not
`main`. GitHub will auto-retarget this to `main` once #4131 merges.
(Targeting `main` now would wrongly include all of #4131's own commits.)

UI polish for the Queue metrics & health pages (TRI-12068). 49 commits,
all under `apps/webapp/app/` — no engine/ClickHouse/package changes.

**Highlights**
- **Layout** — consolidated queue-detail header into one filter bar;
shared `MetricsLayout` spacing (2.5 scale); paused-queue banner
mirroring the environment-paused banner.
- **Charts** — inline legends under titles; threshold gradient coloring
(Env saturation orange only >100%; Concurrency orange only at/over the
limit); fullscreen legend spacing; result caching so tab switches don't
reload; brighter hover cursor + full x-axis labels.
- **Tables** — whole-row click via stretched link; custom Queues icon;
removed column sorting; Limit-cell spacing + hover-bright; "Limited by"
tooltip sizing.
- **Controls** — Pause moved into the filter bar (orange label +
accurate tooltip copy); restyled override-concurrency modal.
- **Copy** — plain-language pass; inline colour swatches; Throttled
reads "% of current period".

Also consolidated the three queue-metrics `.server-changes` notes into
one.

**Known follow-up (not in this PR):** the Concurrency-keys table is
capped at 50 keys (union of live Redis backlog + ClickHouse history, no
single cursor across both) and truncates silently — fine for most
queues, a real limit for high-cardinality per-tenant keys.

Verified locally against the `queue-metrics-demo` seed; `pnpm typecheck
--filter webapp` passes.

Author: samejr

.server-changes/paginate-concurrency-keys-table.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The concurrency keys table on a queue's page is now paginated, so queues with thousands of keys can page through all of them instead of only showing the top 50.

.server-changes/queue-metrics-dashboard.md

@@ -3,4 +3,4 @@ area: webapp
 type: feature
 ---
 
-Queue metrics and health on the Queues page: per-queue depth, throughput, concurrency, throttling, and scheduling-delay charts, plus a per-queue detail view, live queue stats and a backlog chart on the task detail page, and a waiting-in-queue explainer in the run inspector for runs that have not started yet. Off by default; enabled per organization.
+New Queue metrics & health dashboard (per-org opt-in): per-queue depth, throughput, concurrency, throttling and scheduling-delay charts, a per-queue detail view, and live queue stats. Queue concurrency limits set above the environment limit are now rejected instead of being silently capped.

.server-changes/queue-override-reject-above-limit.md

@@ -178,7 +178,7 @@ function MetricsLayoutMain({ children, scroll }: { children: ReactNode; scroll:
       <div
         className={
           scroll === "page"
-            ? "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
+            ? "flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto py-2.5 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
             : "flex min-h-0 flex-1 flex-col overflow-hidden"
         }
       >
@@ -275,9 +275,21 @@ function MetricsLayoutRoot({
  * standard page insets. Compose left/right clusters as child divs — `justify-between` spreads them
  * (a single child sits at the start).
  */
-function MetricsLayoutFilters({ children }: { children: ReactNode }) {
+function MetricsLayoutFilters({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  /** Override the baked horizontal padding (the two queue pages want slightly different insets). */
+  className?: string;
+}) {
   return (
-    <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-dimmed pl-2.5 pr-3">
+    <div
+      className={cn(
+        "flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-dimmed pl-2.5 pr-3",
+        className
+      )}
+    >
       {children}
     </div>
   );
@@ -306,7 +318,7 @@ function MetricsLayoutGrid({
   return (
     <div
       className={cn(
-        "grid gap-3 px-3",
+        "grid gap-2.5 px-2.5",
         // `shrink-0` is load-bearing: the grid sits in Root's flex-col scroll container, where the
         // default flex-shrink would collapse a fixed-height row whose chart cards have ~no
         // intrinsic height. Pin it so the charts keep their row height and the page scrolls past.
@@ -325,8 +337,8 @@ function MetricsLayoutGrid({
 /**
  * The content region below the tiles (tabs / table / list). Full-bleed by default so a list table
  * spans edge to edge with its own top border; pass `inset` for a padded column (the detail page's
- * tabs + charts). Either way Content bakes a doubled separation above it, so the tile blocks read
- * as a distinct band from the content below.
+ * tabs + charts). Separation from the tiles above comes from the scroll column's gap alone (no
+ * extra top margin), so the tile → content step matches the gap between tile rows.
  */
 function MetricsLayoutContent({
   children,
@@ -336,7 +348,7 @@ function MetricsLayoutContent({
   /** Pad the content into a column (page gutter) instead of letting it span edge to edge. */
   inset?: boolean;
 }) {
-  return <div className={cn("mt-3 flex flex-col gap-3", inset && "px-3")}>{children}</div>;
+  return <div className={cn("flex flex-col gap-2.5", inset && "px-2.5")}>{children}</div>;
 }
 
 export const MetricsLayout = {

.server-changes/queue-pages-live-and-clarity.md

@@ -40,7 +40,7 @@ export function BigNumber({
     typeof compactThreshold === "number" && v !== undefined && v >= compactThreshold;
 
   return (
-    <div className="flex flex-col justify-between gap-4 rounded-sm border border-grid-dimmed bg-background-bright p-4">
+    <div className="group flex flex-col justify-between gap-4 rounded-lg border border-grid-bright bg-background-bright pb-4 pl-4 pr-3 pt-3">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <Header3 className="leading-6">{title}</Header3>
         {accessory && <div className="shrink-0">{accessory}</div>}
@@ -56,7 +56,7 @@ export function BigNumber({
         ) : formattedValue !== undefined ? (
           <div className="flex flex-wrap items-baseline gap-2">
             {formattedValue}
-            {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
+            {suffix && <div className={cn("text-xs tabular-nums", suffixClassName)}>{suffix}</div>}
           </div>
         ) : v !== undefined ? (
           <div className="flex flex-wrap items-baseline gap-2">
@@ -70,7 +70,7 @@ export function BigNumber({
             ) : (
               formatNumber(v)
             )}
-            {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
+            {suffix && <div className={cn("text-xs tabular-nums", suffixClassName)}>{suffix}</div>}
           </div>
         ) : (
           "–"

apps/webapp/app/components/layout/MetricsLayout.tsx

@@ -138,7 +138,7 @@ export function MiniLineChart({
         type="monotone"
         dataKey="count"
         stroke={color}
-        strokeWidth={1.5}
+        strokeWidth={1}
         dot={false}
         activeDot={{ r: 2.5, fill: color, strokeWidth: 0 }}
         isAnimationActive={false}
@@ -148,7 +148,7 @@ export function MiniLineChart({
           type="monotone"
           dataKey="throttledOverlay"
           stroke="var(--color-warning)"
-          strokeWidth={1.5}
+          strokeWidth={1}
           dot={false}
           activeDot={{ r: 2.5, fill: "var(--color-warning)", strokeWidth: 0 }}
           connectNulls={false}

apps/webapp/app/components/metrics/BigNumber.tsx

@@ -76,6 +76,8 @@ type SegmentedControlProps = {
   variant?: VariantType;
   fullWidth?: boolean;
   onChange?: (value: string) => void;
+  /** Override the control's outer styling (e.g. a height that matches an adjacent input). */
+  className?: string;
 };
 
 export default function SegmentedControl({
@@ -86,6 +88,7 @@ export default function SegmentedControl({
   variant = "secondary/medium",
   fullWidth,
   onChange,
+  className,
 }: SegmentedControlProps) {
   const variantStyle = variants[variant];
   const _isPrimary = variant.startsWith("primary");
@@ -95,7 +98,8 @@ export default function SegmentedControl({
       className={cn(
         "flex rounded text-text-bright",
         variantStyle.base,
-        fullWidth ? "w-full" : "w-fit"
+        fullWidth ? "w-full" : "w-fit",
+        className
       )}
     >
       <RadioGroup

apps/webapp/app/components/metrics/MiniLineChart.tsx

@@ -181,6 +181,8 @@ type TableCellBasicProps = {
 type TableHeaderCellProps = TableCellBasicProps & {
   hiddenLabel?: boolean;
   tooltip?: ReactNode;
+  /** Extra class merged onto the tooltip content — e.g. widen it past the default max-width. */
+  tooltipContentClassName?: string;
   disableTooltipHoverableContent?: boolean;
   /**
    * When set (together with `onSort`), the header renders a sort indicator and becomes clickable.
@@ -202,6 +204,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
       colSpan,
       hiddenLabel = false,
       tooltip,
+      tooltipContentClassName,
       disableTooltipHoverableContent = false,
       sortDirection,
       onSort,
@@ -226,7 +229,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
     const tooltipNode = tooltip ? (
       <InfoIconTooltip
         content={tooltip}
-        contentClassName="normal-case tracking-normal"
+        contentClassName={cn("normal-case tracking-normal", tooltipContentClassName)}
         disableHoverableContent={disableTooltipHoverableContent}
       />
     ) : null;
@@ -271,40 +274,19 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
         tabIndex={-1}
       >
         {sortable ? (
-          // Order is always title → info icon → sort arrows. The info trigger is itself a <button>,
-          // so it can't nest inside the sort <button> (invalid DOM). Without a tooltip the arrows
-          // ride inside the full-width label button (unchanged). With a tooltip, the info sits
-          // between the label and a separate arrows button — both buttons toggle the sort.
+          // Only the sort arrows toggle sorting — the label (and info tooltip) are not clickable, so
+          // clicking the header text does nothing. Order is always title → info icon → sort arrows.
           <div className={rowClassName}>
+            {label}
+            {tooltip ? tooltipNode : null}
             <button
               type="button"
               onClick={onSort}
-              className={cn(
-                "group/sort flex cursor-pointer select-none items-center gap-1 rounded-sm font-medium text-text-bright focus-custom",
-                tooltip
-                  ? undefined
-                  : cn("w-full", {
-                      "justify-center": alignment === "center",
-                      "justify-end": alignment === "right",
-                    })
-              )}
+              aria-label="Toggle sort"
+              className="group/sort flex cursor-pointer select-none items-center rounded-sm focus-custom"
             >
-              {label}
-              {!tooltip && sortIndicator}
+              {sortIndicator}
             </button>
-            {tooltip ? (
-              <>
-                {tooltipNode}
-                <button
-                  type="button"
-                  onClick={onSort}
-                  aria-label="Toggle sort"
-                  className="group/sort flex cursor-pointer select-none items-center rounded-sm focus-custom"
-                >
-                  {sortIndicator}
-                </button>
-              </>
-            ) : null}
           </div>
         ) : tooltip ? (
           <div className={rowClassName}>
@@ -407,19 +389,27 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           // With leading/trailing content, the link is content-sized and the adornments sit beside
           // it (still inside the td) so interactive triggers never nest inside the <a>.
           leadingContent || trailingContent ? (
-            <div className={cn(flexClasses, "gap-2")}>
-              {leadingContent}
+            // Stretched link: the <a> covers the whole cell via an inset ::before overlay, so the
+            // entire cell is clickable — not just the text. The interactive adornments (tooltip
+            // icons, badge buttons) sit above the overlay (relative z-10) and stay clickable, and
+            // never nest inside the <a>.
+            <div className={cn(flexClasses, "relative gap-2")}>
+              {leadingContent ? (
+                <span className="relative z-10 flex items-center">{leadingContent}</span>
+              ) : null}
               <Link
                 to={to}
                 className={cn(
-                  "inline-flex items-center gap-2 focus:outline-hidden",
+                  "inline-flex items-center gap-2 before:absolute before:inset-0 before:content-[''] focus:outline-hidden",
                   actionClassName
                 )}
                 tabIndex={isTabbableCell ? 0 : -1}
               >
                 {children}
               </Link>
-              {trailingContent}
+              {trailingContent ? (
+                <span className="relative z-10 flex items-center">{trailingContent}</span>
+              ) : null}
             </div>
           ) : (
             <Link

apps/webapp/app/components/primitives/SegmentedControl.tsx

@@ -42,7 +42,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-hidden",
+        "z-50 max-w-[230px] overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-hidden",
         variantClasses[variant],
         className
       )}