@checkstack/anomaly-frontend 0.6.13 → 0.6.14

package/CHANGELOG.md

@@ -1,5 +1,128 @@
 # @checkstack/anomaly-frontend
 
+## 0.6.14
+
+### Patch Changes
+
+- 6c8b36b: The Logs, Metrics, and Traces cards on the system overview page now match the
+  other cards. They had drifted to a flat `bg-card` background with a
+  hairline-only shadow, so they rendered visibly flatter than their siblings
+  (health, dependency, SLO, incident, anomaly, maintenance), which all use the
+  detail-page gradient plus a soft two-layer elevation shadow.
+
+  The shared card surface is now a single primitive - `DetailCard` (and the
+  `detailCardSurface` / `detailCardSurfaceFlat` class constants) in
+  `@checkstack/ui` - instead of a className that was copy-pasted (and could
+  diverge) in every system-overview card. All of those cards now render from the
+  one primitive, so they cannot drift apart again. A new `error`-level ESLint
+  rule `checkstack/no-inline-detail-card-chrome` fails the build if a card in that
+  family re-declares the surface inline instead of using `DetailCard`.
+
+- 6c8b36b: Smooth out loading states so surfaces no longer flash a wrong resolved state or
+  pop content in one piece at a time.
+
+  - **Dashboard no longer flashes "all systems healthy".** The overview aggregates
+    per-system signals from many plugins (health, incidents, SLOs, anomalies,
+    dependencies, log/metric/trace streams), each reporting asynchronously - so
+    before any had loaded, an empty problem list briefly read as an all-clear.
+    `SystemSignalsSlot` gains an additive `onLoadingChange` report; every source
+    filler reports its load state, and the dashboard holds its existing skeleton
+    until all mounted sources have settled (bounded by a grace period so a
+    non-reporting source cannot hang it).
+  - **System detail overview cards reveal together.** Each `SystemDetailsSlot` card
+    self-loads and several self-hide when empty, so they popped in one after
+    another. The slot gains an additive `onLoadingChange`; each card reports, and
+    the detail page keeps the cards mounted but behind a skeleton set until all
+    have settled, then reveals them at once - no stagger, no layout shift, and
+    cards with no content simply never appear.
+  - **Catalog manage "Health" column no longer pops in.** `CatalogBrowseHealthSlot`
+    gains an additive `onLoading` report (sourced from the health filler's bulk
+    fetch); the manage Systems tab shows a per-row placeholder until the health
+    data settles, so the status badges swap in instead of appearing onto an empty
+    cell. The same tab also keeps its state badges on one row (side by side)
+    instead of wrapping.
+  - The system detail **Dependencies** and **Logs / Metrics / Traces** cards are now
+    collapsed by default: each shows a compact "<title> N" summary and expands its
+    detail on click, so the overview column stays short. They render through a new
+    shared `CollapsibleDetailCard` (`@checkstack/ui`) that single-sources the header
+    layout (icon + title + count + rotating chevron) so every collapsible overview
+    card is vertically centred and behaves identically - the earlier per-card header
+    markup had drifted and left the Logs/Metrics/Traces titles off-centre when
+    collapsed.
+  - Moved the system detail **SLO card** from the full-width alert strip into the
+    left (monitoring) column, so it sits at the same width as the dependencies and
+    health cards; only maintenances and incidents stay full width. It now joins the
+    coordinated card reveal above.
+  - Removed a dead, unreferenced duplicate dashboard component
+    (`dashboard-frontend/src/Dashboard.tsx`); the live overview is
+    `DashboardSystemHealthSection`.
+
+  All slot-contract additions are optional/additive - existing fillers and
+  consumers keep working unchanged.
+
+- 6c8b36b: Edit forms stay stable while you are typing. Previously, editing a system's
+  description (and many other edit dialogs/settings pages) would reset the field
+  mid-edit whenever a webhook update or realtime signal refetched the underlying
+  query: the form re-seeded its local state from the fresh query result on every
+  refetch. Forms now seed their local state ONCE - on the dialog's open
+  transition, or once per record via a stable key - and ignore background
+  refetches while you are editing.
+
+  New shared primitive `useSeedFormOnOpen(open, onInit)` in `@checkstack/ui`
+  (alongside the existing `useInitOnceForKey`) seeds a dialog form once per
+  open transition, StrictMode-safe. Fixed surfaces include the catalog
+  system/environment/group editors, the healthcheck platform-defaults dialog,
+  the SLO / gitops-provider / telemetry-source / satellite / announcement /
+  role edit dialogs, and the cache / queue / notification / secrets / anomaly /
+  profile / strategies settings pages (query-seeded pages also drop their loader
+  cache via `gcTime: 0` so a warm cache cannot race the one-shot seed).
+
+- 6c8b36b: Speed up the catalog manage Systems tab and unify its per-row actions.
+
+  - The per-row `SystemHealthCheckAssignment` no longer runs two allocation-heavy
+    access hooks (`useCanAccessType` + `useResourceAccess`) plus a counts query
+    PER ROW - profiling showed this as the dominant, GC-bound cost of opening the
+    Systems tab. A new `CatalogSystemHealthCheckDataProvider`, folded around the
+    catalog tree via `CatalogBrowseDataBoundarySlot`, resolves the gate + counts
+    once for the whole visible list; the row action reads them from context (the
+    heavy standalone path is only rendered on surfaces without the provider, e.g.
+    the system detail page).
+  - The per-row `SystemAnomalyBadge` no longer instantiates two live query
+    observers (and scans up to 500-element arrays) per row. A new
+    `AnomalyBadgeDataProvider`, folded around the catalog browse/manage tree via
+    `CatalogBrowseDataBoundarySlot`, fetches the active + suspicious anomaly sets
+    once and exposes an O(1) per-system lookup - matching the SLO / incident /
+    health / dependency badges. Without the provider the badge falls back to its
+    own (deduped) queries, so the system detail page is unchanged.
+  - `ScopeSystemToTeamAction` and `SystemHealthCheckAssignment` now render through
+    the shared `RowAction`, so a system row's action cluster looks uniform.
+    `ScopeSystemToTeamAction` additionally defers mounting its Radix dialog until
+    first use, so a table of rows no longer mounts an idle dialog per row.
+  - `@checkstack/ui` `RowAction` gains an optional `badge` (e.g. an assigned-count
+    indicator) rendered next to the icon, so a count action stays a normal
+    `RowAction` instead of a bespoke button.
+
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+- Updated dependencies [6c8b36b]
+  - @checkstack/ui@1.29.0
+  - @checkstack/healthcheck-frontend@0.37.0
+  - @checkstack/healthcheck-common@1.18.0
+  - @checkstack/catalog-common@2.8.0
+  - @checkstack/frontend-api@0.16.1
+  - @checkstack/notification-frontend@0.9.6
+  - @checkstack/common@0.23.0
+  - @checkstack/anomaly-common@1.8.2
+  - @checkstack/notification-common@1.7.2
+  - @checkstack/signal-frontend@0.3.7
+
 ## 0.6.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/anomaly-frontend",
-  "version": "0.6.13",
+  "version": "0.6.14",
   "license": "Elastic-2.0",
   "type": "module",
   "sideEffects": [
@@ -16,16 +16,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.8.1",
-    "@checkstack/catalog-common": "2.7.3",
-    "@checkstack/common": "0.22.0",
-    "@checkstack/frontend-api": "0.16.0",
-    "@checkstack/healthcheck-common": "1.17.0",
-    "@checkstack/healthcheck-frontend": "0.36.2",
-    "@checkstack/notification-common": "1.7.1",
-    "@checkstack/notification-frontend": "0.9.5",
-    "@checkstack/signal-frontend": "0.3.6",
-    "@checkstack/ui": "1.28.2",
+    "@checkstack/anomaly-common": "1.8.2",
+    "@checkstack/catalog-common": "2.8.0",
+    "@checkstack/common": "0.23.0",
+    "@checkstack/frontend-api": "0.16.1",
+    "@checkstack/healthcheck-common": "1.18.0",
+    "@checkstack/healthcheck-frontend": "0.37.0",
+    "@checkstack/notification-common": "1.7.2",
+    "@checkstack/notification-frontend": "0.9.6",
+    "@checkstack/signal-frontend": "0.3.7",
+    "@checkstack/ui": "1.29.0",
     "date-fns": "^4.4.0",
     "lucide-react": "^1.17.0",
     "react": "19.2.7",
@@ -33,7 +33,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.7.5",
+    "@checkstack/scripts": "0.7.6",
     "@checkstack/tsconfig": "0.0.7",
     "@types/react": "^19.0.0",
     "typescript": "^5.0.0"

package/src/components/AnomalyBadgeDataProvider.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { AnomalyApi } from "@checkstack/anomaly-common";
+
+interface AnomalyBadgeDataContextValue {
+  /**
+   * The worst anomaly state for a system from the two bulk fetches, or
+   * `undefined` when the system has no active/suspicious anomaly.
+   */
+  getSystemState: (systemId: string) => "anomaly" | "suspicious" | undefined;
+  loading: boolean;
+}
+
+const AnomalyBadgeDataContext = createContext<
+  AnomalyBadgeDataContextValue | undefined
+>(undefined);
+
+/**
+ * Provider that fetches the active + suspicious anomaly sets ONCE and derives an
+ * O(1) per-system lookup, so per-row `SystemAnomalyBadge`s read from context
+ * instead of each instantiating its own live query observers and scanning the
+ * (up to 500-element) arrays. Without this provider each badge falls back to its
+ * own (deduped) queries, so surfaces that don't install it still work.
+ *
+ * The `getAnomalies` queries are unscoped (they return every active/suspicious
+ * anomaly, capped at 500), so this provider ignores `systemIds` for fetching and
+ * only uses the results to build the lookup once.
+ */
+export const AnomalyBadgeDataProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const anomalyClient = usePluginClient(AnomalyApi);
+
+  const { data: confirmed = [], isLoading: confirmedLoading } =
+    anomalyClient.getAnomalies.useQuery(
+      { state: "anomaly", limit: 500 },
+      { staleTime: 30_000 },
+    );
+  const { data: suspicious = [], isLoading: suspiciousLoading } =
+    anomalyClient.getAnomalies.useQuery(
+      { state: "suspicious", limit: 500 },
+      { staleTime: 30_000 },
+    );
+
+  const contextValue = useMemo<AnomalyBadgeDataContextValue>(() => {
+    const confirmedIds = new Set(confirmed.map((a) => a.systemId));
+    const suspiciousIds = new Set(suspicious.map((a) => a.systemId));
+    return {
+      getSystemState: (systemId) => {
+        if (confirmedIds.has(systemId)) return "anomaly";
+        if (suspiciousIds.has(systemId)) return "suspicious";
+        return;
+      },
+      loading: confirmedLoading || suspiciousLoading,
+    };
+  }, [confirmed, suspicious, confirmedLoading, suspiciousLoading]);
+
+  return (
+    <AnomalyBadgeDataContext.Provider value={contextValue}>
+      {children}
+    </AnomalyBadgeDataContext.Provider>
+  );
+};
+
+export function useAnomalyBadgeDataOptional():
+  | AnomalyBadgeDataContextValue
+  | undefined {
+  return useContext(AnomalyBadgeDataContext);
+}

package/src/components/AnomalySignalsFiller.tsx

@@ -28,17 +28,20 @@ type Props = SlotContext<typeof SystemSignalsSlot>;
 export const AnomalySignalsFiller: React.FC<Props> = ({
   systemIds,
   onSignals,
+  onLoadingChange,
 }) => {
   const anomalyClient = usePluginClient(AnomalyApi);
 
-  const { data: confirmed = [] } = anomalyClient.getAnomalies.useQuery(
-    { state: "anomaly", limit: 500 },
-    { staleTime: 30_000 },
-  );
-  const { data: suspicious = [] } = anomalyClient.getAnomalies.useQuery(
-    { state: "suspicious", limit: 500 },
-    { staleTime: 30_000 },
-  );
+  const { data: confirmed = [], isLoading: confirmedLoading } =
+    anomalyClient.getAnomalies.useQuery(
+      { state: "anomaly", limit: 500 },
+      { staleTime: 30_000 },
+    );
+  const { data: suspicious = [], isLoading: suspiciousLoading } =
+    anomalyClient.getAnomalies.useQuery(
+      { state: "suspicious", limit: 500 },
+      { staleTime: 30_000 },
+    );
 
   const signals = useMemo<SystemSignalsMap>(() => {
     const inOverview = new Set(systemIds);
@@ -71,5 +74,13 @@ export const AnomalySignalsFiller: React.FC<Props> = ({
     onSignals(ANOMALY_SIGNAL_SOURCE_ID, signals);
   }, [signals, onSignals]);
 
+  // Report load state so the dashboard holds its overview skeleton until this
+  // (and every other source) has settled, instead of flashing "all healthy".
+  const isLoading = confirmedLoading || suspiciousLoading;
+  useEffect(() => {
+    if (systemIds.length === 0) return;
+    onLoadingChange(ANOMALY_SIGNAL_SOURCE_ID, isLoading);
+  }, [isLoading, systemIds.length, onLoadingChange]);
+
   return null;
 };

package/src/components/AnomalyTemplatePanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import {
   Card,
   CardHeader,
@@ -8,6 +8,7 @@ import {
   CardFooter,
   Button,
   useToast,
+  useInitOnceForKey,
 } from "@checkstack/ui";
 import { Activity, Save } from "lucide-react";
 import type { HealthCheckConfigIDEContext } from "@checkstack/healthcheck-frontend";
@@ -37,7 +38,7 @@ export function AnomalyTemplatePanel({ context }: { context: HealthCheckConfigID
 
   const { data: configRecord, isLoading } = anomalyClient.getAnomalyConfig.useQuery(
     { configurationId: context.configurationId },
-    { enabled: !!context.configurationId },
+    { enabled: !!context.configurationId, gcTime: 0 },
   );
 
   const availableFields = useAnomalyFields(context.configurationId);
@@ -47,18 +48,16 @@ export function AnomalyTemplatePanel({ context }: { context: HealthCheckConfigID
     onError: () => toast.error("Failed to save settings"),
   });
 
-  useEffect(() => {
-    if (configRecord?.data) {
-      setValues({
-        enabled: configRecord.data.enabled ?? true,
-        baselineWindow: configRecord.data.baselineWindow ?? "7d",
-        notify: configRecord.data.notify ?? true,
-        fieldOverrides:
-          (configRecord.data.fieldOverrides as Record<string, AnomalyFieldConfig>) ??
-          {},
-      });
-    }
-  }, [configRecord]);
+  // Seed the form once per configuration id; ignores background refetches so
+  // in-progress edits aren't wiped by a realtime-driven query update.
+  useInitOnceForKey(configRecord?.data, context.configurationId, (data) => {
+    setValues({
+      enabled: data.enabled ?? true,
+      baselineWindow: data.baselineWindow ?? "7d",
+      notify: data.notify ?? true,
+      fieldOverrides: (data.fieldOverrides as Record<string, AnomalyFieldConfig>) ?? {},
+    });
+  });
 
   const handleChange = <K extends keyof AnomalySettingsFormValues>(
     key: K,

package/src/components/CatalogBrowseAnomalyDataFiller.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { AnomalyBadgeDataProvider } from "./AnomalyBadgeDataProvider";
+
+/**
+ * Fills catalog's `CatalogBrowseDataBoundarySlot`. Wraps the boundary's
+ * `children` (the catalog browse / manage tree) in `AnomalyBadgeDataProvider`,
+ * so the per-row `SystemAnomalyBadge`s read the anomaly lookup from context
+ * (`useAnomalyBadgeDataOptional`) instead of each instantiating its own live
+ * query observers - eliminating the per-row observer + array-scan cost.
+ *
+ * `children` is typed OPTIONAL so the component stays assignable to the slot
+ * context (which declares only `systemIds` / `groupIds`); catalog-frontend
+ * supplies the children when it folds this filler around the tree. The anomaly
+ * fetch is unscoped, so `systemIds` / `groupIds` are unused here.
+ */
+export const CatalogBrowseAnomalyDataFiller = ({
+  children,
+}: {
+  systemIds: string[];
+  groupIds: string[];
+  children?: React.ReactNode;
+}) => <AnomalyBadgeDataProvider>{children}</AnomalyBadgeDataProvider>;

package/src/components/SystemAnomalyBadge.tsx

@@ -1,49 +1,53 @@
 import React, { useMemo } from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
 import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
-import { AnomalyApi, type AnomalyState } from "@checkstack/anomaly-common";
+import { AnomalyApi } from "@checkstack/anomaly-common";
 import { StatusBadge } from "@checkstack/ui";
 import { ChartSpline } from "lucide-react";
+import { useAnomalyBadgeDataOptional } from "./AnomalyBadgeDataProvider";
 
 type Props = SlotContext<typeof SystemStateBadgesSlot>;
 
 /**
  * Renders an anomaly status badge for a system.
  *
- * Fetches ONLY active anomalies (state = "anomaly") and suspicious states
- * in two separate queries. React Query deduplicates these globally across
- * all badge instances on the dashboard, so even with 50+ badges we only
- * issue 2 requests total. Recovered anomalies are excluded to prevent
- * unbounded growth in the response payload.
+ * On the catalog browse / manage tree an `AnomalyBadgeDataProvider` (installed
+ * via `CatalogBrowseDataBoundarySlot`) fetches the active + suspicious anomaly
+ * sets ONCE and exposes an O(1) per-system lookup; when present this badge reads
+ * from it and disables its own queries, so a table of rows instantiates NO
+ * per-row query observers. Without the provider (e.g. the system detail page)
+ * the fallback queries run, deduped across all badge instances by React Query,
+ * so even 50+ badges issue only 2 requests total. Recovered anomalies are
+ * excluded to keep the payload bounded.
  */
 export const SystemAnomalyBadge: React.FC<Props> = ({ system }) => {
   const anomalyClient = usePluginClient(AnomalyApi);
+  const badgeCtx = useAnomalyBadgeDataOptional();
 
-  // Fetch confirmed anomalies — deduped across all badge instances via React Query
+  // Fallback queries only when no bulk provider is present. Disabled (no live
+  // observer created) on surfaces that install the provider.
   const { data: confirmedAnomalies = [] } = anomalyClient.getAnomalies.useQuery(
     { state: "anomaly", limit: 500 },
-    { staleTime: 30_000 },
+    { staleTime: 30_000, enabled: !badgeCtx },
   );
-
-  // Fetch suspicious states — deduped across all badge instances via React Query
   const { data: suspiciousAnomalies = [] } =
     anomalyClient.getAnomalies.useQuery(
       { state: "suspicious", limit: 500 },
-      { staleTime: 30_000 },
+      { staleTime: 30_000, enabled: !badgeCtx },
     );
 
-  // Find the worst state for this specific system
+  // Worst state for this system: from the provider's O(1) lookup when present,
+  // else scan the (deduped) fallback results.
   const systemState = useMemo(() => {
-    // Check confirmed anomalies first (worst state)
+    if (badgeCtx) return badgeCtx.getSystemState(system?.id ?? "");
     if (confirmedAnomalies.some((a) => a.systemId === system?.id)) {
-      return "anomaly" as AnomalyState;
+      return "anomaly" as const;
     }
-    // Check suspicious states
     if (suspiciousAnomalies.some((a) => a.systemId === system?.id)) {
-      return "suspicious" as AnomalyState;
+      return "suspicious" as const;
     }
     return;
-  }, [confirmedAnomalies, suspiciousAnomalies, system?.id]);
+  }, [badgeCtx, confirmedAnomalies, suspiciousAnomalies, system?.id]);
 
   if (!systemState) return <></>;
 

package/src/components/SystemAnomalyWidget.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   usePluginClient,
   useApi,
@@ -14,7 +14,7 @@ import {
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
 import {
-  Card,
+  DetailCard,
   CardHeader,
   CardTitle,
   CardContent,
@@ -311,7 +311,10 @@ function AnomalyRow({
 // Main Widget
 // ─────────────────────────────────────────────────────────────────────────────
 
-export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
+export const SystemAnomalyWidget: React.FC<Props> = ({
+  system,
+  onLoadingChange,
+}) => {
   const anomalyClient = usePluginClient(AnomalyApi);
   const catalogClient = usePluginClient(CatalogApi);
   const toast = useToast();
@@ -404,12 +407,18 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
 
   const isLoading = loadingConfirmed || loadingSuspicious;
 
+  // Report load state so the detail page reveals all overview cards together
+  // instead of each popping in as its own fetch settles.
+  useEffect(() => {
+    onLoadingChange?.("anomaly.widget", isLoading);
+  }, [isLoading, onLoadingChange]);
+
   // Confirmed anomalies first, then suspicious
   const activeAnomalies = [...confirmedAnomalies, ...suspiciousAnomalies];
 
   if (isLoading) {
     return (
-      <Card className="relative overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)]">
+      <DetailCard className="relative overflow-hidden">
         <CardHeader>
           <CardTitle className="flex items-center gap-2 text-base">
             <Activity className="h-4 w-4" />
@@ -421,7 +430,7 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
             Loading anomalies...
           </div>
         </CardContent>
-      </Card>
+      </DetailCard>
     );
   }
 
@@ -440,7 +449,7 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
   const suspiciousStyles = anomalyToneStyles("unknown");
 
   return (
-    <Card className="relative overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)] transition-all">
+    <DetailCard className="relative overflow-hidden transition-all">
       {/* Status accent stripe: worst active state encoded by hue + position. */}
       <span
         className={cn("absolute inset-y-0 left-0 w-1", accent.accent)}
@@ -547,6 +556,6 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
           ))}
         </div>
       </CardContent>
-    </Card>
+    </DetailCard>
   );
 };

package/src/plugin.tsx

@@ -13,10 +13,12 @@ import {
   SystemStateBadgesSlot,
   SystemDetailsSlot,
   SystemSignalsSlot,
+  CatalogBrowseDataBoundarySlot,
 } from "@checkstack/catalog-common";
 import { registerSubscriptionSubControls } from "@checkstack/notification-frontend";
 import { anomalySystemSubscription } from "@checkstack/anomaly-common";
 import { SystemAnomalyBadge } from "./components/SystemAnomalyBadge";
+import { CatalogBrowseAnomalyDataFiller } from "./components/CatalogBrowseAnomalyDataFiller";
 import { SystemAnomalyWidget } from "./components/SystemAnomalyWidget";
 import { AnomalyFieldMuteList } from "./components/AnomalyFieldMuteList";
 import { IDETreeNode } from "@checkstack/ui";
@@ -47,6 +49,13 @@ export const plugin: FrontendPlugin = {
       id: "anomaly.system-badge",
       component: SystemAnomalyBadge,
     }),
+    // Bulk-fills the catalog browse/manage tree so the per-row anomaly badges
+    // read an O(1) lookup from context instead of each instantiating two live
+    // query observers + scanning the anomaly arrays (the SystemsTab mount cost).
+    createSlotExtension(CatalogBrowseDataBoundarySlot, {
+      id: "anomaly.catalog.browse-anomaly-data",
+      component: CatalogBrowseAnomalyDataFiller,
+    }),
     createSlotExtension(SystemSignalsSlot, {
       id: "anomaly.dashboard.signals",
       load: () =>