@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+New Limits alerts: watch the limits that can interrupt or degrade runtime flow, one at a time or combined into a single alert with "any" or "all" and the signals you choose (limit reached or approaching), in the dashboard, the API and the agent.
@@ -66,8 +66,18 @@ vi.mock("./ActivityBars", async (importOriginal) => ({
 }));
 vi.mock("./AlertThresholdChart", async (importOriginal) => ({
   ...(await importOriginal<object>()),
-  AlertMultiSeriesChart: ({ seriesMap }: { seriesMap: Map<string, unknown> }) =>
-    createElement("i", { "data-chart": "multi", "data-keys": [...seriesMap.keys()].join(",") }),
+  AlertMultiSeriesChart: ({
+    seriesMap,
+    label,
+  }: {
+    seriesMap: Map<string, unknown>;
+    label: string;
+  }) =>
+    createElement("i", {
+      "data-chart": "multi",
+      "data-keys": [...seriesMap.keys()].join(","),
+      "data-label": label,
+    }),
 }));
 
 const HOUR = 60 * 60 * 1000;
@@ -203,6 +213,7 @@ describe("AlertDetailChart query groups", () => {
     expect(document.querySelector<HTMLInputElement>("input")!.placeholder).not.toContain("Up to");
   });
 
+  // Mutation: labelling a sole selected group with the alert title fails the label check.
   it("shows the only remaining group even after it was deselected", () => {
     const c = mount({ queryGroups: ["g9", "g8"] });
     act(() => c.querySelector<HTMLElement>("button")!.click());
@@ -211,6 +222,7 @@ describe("AlertDetailChart query groups", () => {
     )!;
     act(() => g9.click());
     expect(keys(c)).toEqual(["g8"]);
+    expect(c.querySelector("[data-chart=multi]")!.getAttribute("data-label")).toBe("g8");
 
     render({ queryGroups: ["g9"] });
     expect(keys(c)).toEqual(["g9"]);
 
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useUserTimeZone } from "~/components/primitives/DateTime";
 import { DetailChartBlock } from "~/components/primitives/DetailChartBlock";
 import { TimeFilter } from "~/components/runs/v3/SharedFilters";
@@ -42,6 +42,12 @@ import {
   assignGroupColors,
   thresholdChartLegend,
 } from "./AlertThresholdChart";
+import {
+  hasTileData,
+  isLimitComponent,
+  isLimitsComposite,
+  type LimitTileSeries,
+} from "./limitTiles";
 import { defaultGroupSelection, MAX_VISIBLE_GROUPS } from "./queryGroupSelection";
 
 const METRIC_LABEL: Record<string, string> = {
@@ -90,33 +96,68 @@ type AlertDetailChartProps = {
   metricSeriesMap: Map<string, MetricSeriesPoint[]>;
   healthBands: HealthBandRow[];
   componentSeries?: HealthQuerySeries[];
+  limitTiles?: LimitTileSeries[];
   window: DetailWindow & { isLifetime?: boolean; explicitTo?: boolean };
   now: Date;
   createdAt?: Date;
   queryGroups?: string[];
   querySeriesMode?: "threshold" | "absence" | "match";
 };
 
-export function AlertDetailChart(props: AlertDetailChartProps) {
+function limitsAsQueryProps(
+  props: AlertDetailChartProps,
+  tiles: LimitTileSeries[]
+): AlertDetailChartProps {
+  const { alert } = props;
+  const single = tiles.length === 1 ? tiles[0] : undefined;
+  return {
+    ...props,
+    alert: {
+      ...alert,
+      kind: "threshold",
+      operator: ">",
+      thresholdValue: tiles.find((t) => t.threshold !== null)?.threshold ?? undefined,
+      unitSuffix: "%",
+      scope: { type: "all" },
+      currentReading: { status: "unavailable" },
+      capabilityTitle: single?.label ?? alert.capabilityTitle,
+    } as AlertDetail,
+    metricSeriesMap: single
+      ? new Map([["__agg__", single.points]])
+      : new Map(tiles.map((t) => [t.label, t.points])),
+    queryGroups: tiles.length > 1 ? tiles.map((t) => t.label) : [],
+    querySeriesMode: "threshold",
+  };
+}
+
+export function AlertDetailChart(rawProps: AlertDetailChartProps) {
   const [healthView, setHealthView] = useState<HealthView>("together");
   const [picked, setPicked] = useState<string[] | null>(null);
+  const isLimits =
+    rawProps.alert.kind === "state" &&
+    (isLimitComponent(rawProps.alert.capabilityKey) ||
+      isLimitsComposite(rawProps.alert.capabilityKey));
+  const props = isLimits
+    ? limitsAsQueryProps(
+        rawProps,
+        (rawProps.limitTiles ?? []).filter((t) => !t.failed && hasTileData(t.points))
+      )
+    : rawProps;
   const { alert, window, metricSeriesMap, queryGroups = [] } = props;
   const showToggle = alert.kind === "state" && (props.componentSeries?.length ?? 0) > 1;
+  const groups = queryGroups;
+  const groupSeries = metricSeriesMap;
   const grouped =
     alert.kind === "threshold" && props.querySeriesMode !== "match" && queryGroups.length > 0;
-  const defaults = useMemo(
-    () =>
-      grouped
-        ? defaultGroupSelection({
-            groups: queryGroups,
-            seriesMap: metricSeriesMap,
-            operator: alert.operator,
-            range: { since: window.since.getTime(), until: window.until.getTime() },
-          })
-        : [],
-    [grouped, queryGroups, metricSeriesMap, alert.operator, window.since, window.until]
-  );
-  const showPicker = grouped && queryGroups.length > 1;
+  const defaults = grouped
+    ? defaultGroupSelection({
+        groups,
+        seriesMap: groupSeries,
+        operator: alert.operator,
+        range: { since: window.since.getTime(), until: window.until.getTime() },
+      })
+    : [];
+  const showPicker = grouped && groups.length > 1;
   const selected = showPicker ? (picked ?? defaults) : defaults;
   // Colours carry over from the previous selection, so a toggle doesn't repaint other groups.
   const [colorState, setColorState] = useState({ key: "", colors: new Map<string, string>() });
@@ -135,29 +176,42 @@ export function AlertDetailChart(props: AlertDetailChartProps) {
           : [...selected, group]
     );
 
+  const loadedTiles = rawProps.limitTiles ?? [];
+  const limitsUnloaded =
+    isLimits &&
+    metricSeriesMap.size === 0 &&
+    (loadedTiles.length === 0 || loadedTiles.some((t) => t.failed));
+
   return (
     <DetailChartBlock
       toolbar={<AlertDetailFilterBar lifetime={window.isLifetime ? window : undefined} />}
     >
       <div className="min-h-[210px] flex-1">
-        <AlertDetailChartBody
-          {...props}
-          healthView={healthView}
-          selectedGroups={grouped ? selected : undefined}
-          groupColors={groupColors}
-          accessory={
-            showToggle ? (
-              <HealthViewToggle value={healthView} onChange={setHealthView} />
-            ) : showPicker ? (
-              <GroupsDropdown
-                groups={queryGroups}
-                selected={selected}
-                onToggle={toggleGroup}
-                colors={groupColors}
-              />
-            ) : undefined
-          }
-        />
+        {limitsUnloaded ? (
+          <div className="flex h-full items-center justify-center text-xs text-text-dimmed">
+            Couldn't load this data. Try again in a moment.
+          </div>
+        ) : (
+          <AlertDetailChartBody
+            {...props}
+            healthView={healthView}
+            selectedGroups={grouped ? selected : undefined}
+            groupColors={groupColors}
+            accessory={
+              showToggle ? (
+                <HealthViewToggle value={healthView} onChange={setHealthView} />
+              ) : showPicker ? (
+                <GroupsDropdown
+                  groups={groups}
+                  selected={selected}
+                  onToggle={toggleGroup}
+                  colors={groupColors}
+                  noun={isLimits ? "limits" : undefined}
+                />
+              ) : undefined
+            }
+          />
+        )}
       </div>
     </DetailChartBlock>
   );
@@ -168,6 +222,7 @@ function AlertDetailChartBody({
   metricSeriesMap,
   healthBands,
   componentSeries = [],
+  limitTiles = [],
   window,
   now,
   createdAt,
@@ -234,7 +289,9 @@ function AlertDetailChartBody({
         : undefined;
     const threshold =
       typeof facts?.threshold === "number" ? facts.threshold : (alert.thresholdValue ?? null);
-    const label = METRIC_LABEL[alert.capabilityKey] ?? alert.capabilityTitle;
+    const soleGroup =
+      pick.multi && pick.seriesMap.size === 1 ? [...pick.seriesMap.keys()][0] : undefined;
+    const label = soleGroup ?? METRIC_LABEL[alert.capabilityKey] ?? alert.capabilityTitle;
     const chart = pick.multi ? (
       <AlertMultiSeriesChart
         seriesMap={pick.seriesMap}
 
@@ -173,6 +173,7 @@ export const AREA_OPTIONS: { value: AreaFilterValue; label: string }[] = [
   { value: "errors", label: "Errors" },
   { value: "runs", label: "Runs" },
   { value: "health", label: "Health" },
+  { value: "limits", label: "Limits" },
   { value: "query", label: "Custom" },
   { value: "unknown", label: "Unknown" },
 ];
 
@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+import { createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { ChartLegend, warningLegendItem, type ChartLegendItem } from "./ChartLegend";
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  globalThis.ResizeObserver ??= class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+const series = (n: number): ChartLegendItem[] =>
+  Array.from({ length: n }, (_, i) => ({
+    swatch: "line" as const,
+    color: `#00000${i}`,
+    label: `Series ${i + 1}`,
+  }));
+
+const render = (items: ChartLegendItem[]) =>
+  act(() => root.render(createElement(ChartLegend, { items })));
+
+describe("ChartLegend", () => {
+  it("compacts more than three series into dots and a +N popover listing all of them", () => {
+    render([...series(7), warningLegendItem("Above threshold")]);
+    const entries = [...container.firstElementChild!.children].map((el) => el.textContent);
+    expect(entries.slice(0, 4)).toEqual(["Above threshold", "Series 1", "Series 2", "Series 3"]);
+    expect(container.textContent).not.toContain("Series 4");
+    expect(container.firstElementChild!.firstElementChild!.textContent).toBe("Above threshold");
+    const chip = container.querySelector("button")!;
+    expect(chip.textContent).toBe("See all");
+    act(() => chip.click());
+    const text = document.body.textContent ?? "";
+    for (let i = 1; i <= 7; i += 1) expect(text).toContain(`Series ${i}`);
+  });
+
+  it("keeps labels inline for three series or fewer", () => {
+    render([...series(3), warningLegendItem("Above threshold")]);
+    expect(container.querySelector("button")).toBeNull();
+    expect(container.textContent).toContain("Series 3");
+    expect(container.textContent).toContain("Above threshold");
+  });
+});
@@ -1,3 +1,4 @@
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
 import { cn } from "~/utils/cn";
 
 export const THRESHOLD_LINE_COLOR = "var(--color-border-brighter)";
@@ -31,6 +32,51 @@ function Swatch({ swatch, color }: Pick<ChartLegendItem, "swatch" | "color">) {
   return <span className="size-2.5 rounded-[2px]" style={{ backgroundColor: color }} />;
 }
 
+const COMPACT_AFTER = 3;
+
+function LegendEntry({ item }: { item: ChartLegendItem }) {
+  return (
+    <span className="flex items-center gap-1 text-xs font-normal text-text-dimmed">
+      <Swatch swatch={item.swatch} color={item.color} />
+      {item.label}
+    </span>
+  );
+}
+
+function CompactLegend({
+  warning,
+  series,
+}: {
+  warning: ChartLegendItem[];
+  series: ChartLegendItem[];
+}) {
+  return (
+    <>
+      {warning.map((item) => (
+        <LegendEntry key={`${item.swatch}-${item.label}`} item={item} />
+      ))}
+      {series.slice(0, COMPACT_AFTER).map((item) => (
+        <LegendEntry key={`${item.swatch}-${item.label}`} item={item} />
+      ))}
+      <Popover>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            className="rounded-sm bg-background-hover px-1.5 text-xs font-normal text-text-dimmed hover:text-text-bright"
+          >
+            See all
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="flex flex-col gap-1.5 p-2">
+          {series.map((item) => (
+            <LegendEntry key={`${item.swatch}-${item.label}`} item={item} />
+          ))}
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}
+
 export function ChartLegend({
   items,
   className,
@@ -39,17 +85,15 @@ export function ChartLegend({
   className?: string;
 }) {
   if (items.length === 0) return null;
+  const warning = items.filter((item) => item.color === WARNING_COLOR);
+  const series = items.filter((item) => item.color !== WARNING_COLOR);
   return (
     <span className={cn("flex flex-wrap items-center gap-x-2 gap-y-1", className)}>
-      {items.map((item) => (
-        <span
-          key={`${item.swatch}-${item.label}`}
-          className="flex items-center gap-1 text-xs font-normal text-text-dimmed"
-        >
-          <Swatch swatch={item.swatch} color={item.color} />
-          {item.label}
-        </span>
-      ))}
+      {series.length > COMPACT_AFTER ? (
+        <CompactLegend warning={warning} series={series} />
+      ) : (
+        items.map((item) => <LegendEntry key={`${item.swatch}-${item.label}`} item={item} />)
+      )}
     </span>
   );
 }
@@ -303,7 +303,7 @@ describe("creation card hands off to the chat and back", () => {
     });
     act(() => button("Continue setup")!.click());
     expect(card()?.getAttribute("aria-label")).toBe("How long should it stay active?");
-    expect(card()?.textContent).toContain("4 of 5");
+    expect(card()?.textContent).toContain("4 of 6");
   });
 
   // Mutation: dropping the selected check from hasNext lets Next pass an unanswered step.