@checkstack/healthcheck-frontend 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,141 @@
 # @checkstack/healthcheck-frontend
 
+## 0.23.0
+
+### Minor Changes
+
+- 9dcc848: Redesign the catalog into a group-first browse view and tabbed management tables, with inline health rollups.
+
+  - Browse view: the catalog home is a real read-only, scale-built experience - collapsible group sections (with member counts) plus a synthetic Ungrouped section, a shared toolbar (search, group/health/tag filters, density toggle), URL-backed view state (shareable deep links), polished empty states, and a manager-only "Manage catalog" link. Per-system status badges render through the existing `SystemStateBadgesSlot`; filtering is client-side over the loaded set.
+  - Management: redesigned as tabbed data tables (Systems / Groups / Environments) replacing the two-column drag-to-assign layout. Systems get multi-select + a bulk bar, inline health, and group + environment membership as removable chips with type-ahead pickers (portaled so they are never clipped); Groups get inline rename and member chips; Environments get a name / members / field-count table (CRUD gated by `catalog.environment.manage`). GitOps-locked rows stay read-only. Drag-and-drop (and `@dnd-kit` on this page) is removed; the management page also shares the browse toolbar.
+  - Inline health rollups: a new platform contract `CatalogBrowseHealthSlot` (`@checkstack/catalog-common`) - an additive optional slot catalog-frontend only consumes (a headless data boundary feeding group rollups + the health filter), with a catalog-owned `CatalogHealthStatus` vocabulary so catalog gains no health-plugin dependency. Group headers show a rollup pill derived from the reported status DATA (a system absent from the map is `"unknown"`, never healthy); all-healthy groups start collapsed. The health filter is wired on both toolbars and enables once a filler reports. healthcheck-frontend fills the slot by reusing dashboard-frontend's `SystemBadgeDataProvider`. When no health source is installed the slot is unfilled and the catalog stays fully functional.
+
+  This is a beta minor.
+
+- 9dcc848: Redesign the dashboard as an extensible "needs attention" overview, and normalize system state badges.
+
+  The dashboard now surfaces ONLY systems that need attention (degraded, unhealthy, breaching/at-risk SLO, under an incident or active maintenance, anomalous, or with a dependency problem) and hides everything healthy. A compact header summarises fleet health and filters by severity; each problem renders as an elevated card with one row per issue that deep-links to where the issue originates. A calm "all clear" state shows when nothing needs attention, a live "recent activity" feed sits below, and a "View catalog" link replaces the duplicated system list.
+
+  New platform contract `SystemSignalsSlot` (`@checkstack/catalog-common`): a headless, render-once slot where any plugin bulk-fetches and reports structured `SystemSignal[]` per system via `onSignals(sourceId, map)`. The dashboard aggregates every source agnostic to which plugins contribute; each core reliability plugin (healthcheck, incident, SLO, maintenance, anomaly, dependency) ships a filler, and third-party plugins add new per-system state the same way with no dashboard change. Signals carry an `iconName` rendered via `DynamicIcon` so the contract stays React-free. The dashboard's old summary tiles and overview sheets are removed, so it no longer depends on those plugins' packages. The group "subscribe" control moved onto the catalog browse page's group headers.
+
+  System state badges are normalized into one icon-only `@checkstack/ui` `StatusBadge` primitive - a small tinted icon chip with the full label on hover/focus (and via `aria-label`). Each signal uses its feature's navbar icon (health = Activity, incident = AlertTriangle, SLO = Target, maintenance = Wrench, dependency = GitBranch; anomaly = ChartSpline). Badges self-sort by severity via CSS `order` (error -> warn -> info), tooltips are scoped to a named group, and in catalog browse rows the cluster moved to the right edge.
+
+  This is a beta minor.
+
+- 9dcc848: Add environments as a first-class catalog primitive, with per-environment health-check fan-out, config templating, per-environment reactive health, and script run-context exposure.
+
+  - Catalog primitive: an environment is a sibling of groups - a named, instance-global record carrying free-form custom fields (baseUrl, region, tier, ...) that any system can belong to many-to-many. New `environments` + `systems_environments` tables, `EnvironmentSchema` + create/update schemas, `EntityService` environment CRUD and membership joins, RPC endpoints gated by a new `catalogAccess.environment` access rule, a GitOps `Environment` kind + `System.environments` extension, and frontend management (an `EnvironmentEditor`, an Environments management panel, and a per-system environment picker). The Environments card's Add/Edit/Delete affordances are gated on `catalogAccess.environment.manage`.
+  - Per-environment fan-out: run identity becomes `(systemId, configurationId, environmentId)`. Runs, aggregates, and state transitions gain a nullable `environmentId`. The health-check assignment gains an `environmentIds` selector with three modes (All / Specific / None; `null` and `[]` are distinct). The queue executor resolves the effective environment set via the catalog `resolveSystemEnvironments` read and executes one isolated run per environment.
+  - Config templating: a new `x-templatable` config-field marker renders a string field through the template engine at execute time, against `{ environment, check, system }`. A shared `renderTemplatableConfig` and a `renderTemplatePreview` helper (re-exported from `@checkstack/template-engine`) keep editor previews identical to the run-time render. The HTTP collector's `url`, `headers[].value`, and `body` are templatable, rendered per environment (the strategy client build moves inside the per-env loop); the `url`'s `.url()` validation moves post-render. Secrets resolve before templating; a field marked both secret and `x-templatable` is rejected at plugin load. `DynamicForm` shows a live "Preview" line, and the catalog `EnvironmentPreviewPicker` ("Preview as: <environment>") drives it in the collector editor (only when the schema has a templatable field).
+  - Script run-context: `CollectorRunContext` gains an optional `environment` field (`{ id, name, fields }`, metadata only). Shell collectors receive `CHECKSTACK_ENV_ID` / `_NAME` / `CHECKSTACK_ENV_<FIELD>` vars; inline TS collectors read `globalThis.context.environment`; the editor test panel mirrors both. The env-less path is unchanged.
+  - Per-environment reactive health (see BREAKING below), env-keyed read/write paths, env-qualified serialization locks, an optional `trigger.payload.environmentId`, per-environment isolation, and an `ENVIRONMENT_RESOLUTION_FAILED` signal when catalog resolution degrades to a single env-less run.
+
+  BREAKING CHANGES: the reactive `health` entity's id-shape and cardinality change. It now encodes two views: per-environment (id `"<systemId>::<environmentId>"`) and a system rollup (id `"<systemId>"`, the worst status across environments + env-less runs). The rollup PRESERVES the pre-existing system-level contract - dashboards, status badges, and automations referencing health by `systemId` keep working without re-authoring - but the entity's contract surface changed (new id-shape, higher cardinality, new payload field), so it is flagged breaking. `getBulkHealthState` parses env-qualified ids and keys results by the original id.
+
+  State and scale: membership and custom fields live only in catalog Postgres and are re-read every tick via the cross-plugin RPC; env-keyed health reads from shared `health_check_runs` / aggregates / transitions (compute-on-read). Every pod resolves the same effective set and the same per-environment health. No pod-local environment state.
+
+  Also: `unwrapSchema` in `zod-config.ts` loops instead of single-pass-stripping so multi-layer wrappers (`.optional().default()`) still resolve `x-templatable` meta. The env-less `{{ environment.* }}` run notice logs at `debug` (a legitimate recurring configuration), while the post-render HTTP `.url()` check still fails a genuinely-broken empty render with a clear "Rendered URL is invalid" error.
+
+  This is a beta minor.
+
+- 9dcc848: Cut initial-load JS: lazy plugin contributions, a hardened lazy-by-default contribution contract, on-demand Monaco, and a lighter icon/chart load.
+
+  - Lazy plugin route pages: each plugin's route `element` references a `React.lazy`-wrapped page rendered inside a shared `<Suspense>` boundary. Plugins still register synchronously, so nav, slots, commands, API factories, and `foreignSignals` are available on first paint. This moves ~37 route-page chunks (~600 KB) out of the entry; the entry chunk drops from ~2.4 MB to ~190 KB. Auth flow pages stay eager. The `@checkstack/scripts` scaffold template generates lazy route pages too.
+  - Hardened contribution contract (BREAKING, frontend plugin contract): plugins declare contributions lazily and let the framework own code-splitting, Suspense, and per-plugin error isolation. Routes use `load: () => import("./Page").then((m) => ({ default: m.Page }))` instead of `element: <Page />` (`element` is still accepted for the rare page that must paint without a chunk fetch; provide exactly one). Slot extensions accept either an eager `component` or a lazy `load`; new `getLazyContribution` + `ExtensionComponent` exports from `@checkstack/frontend-api` render either kind. This also fixes runtime-installed plugins: `ExtensionSlot` subscribes to the plugin registry, and the API registry rebuilds when the plugin set changes (`getPlugins()` returns an immutable snapshot via `useSyncExternalStore`). A per-plugin error boundary contains a bad contribution.
+  - On-demand Monaco: the `@checkstack/ui` barrel no longer pulls the `@codingame/*` / `monaco-languageclient` stack into the initial load. `CodeEditor` lazy-loads its Monaco-backed editor behind `React.lazy` + Suspense, `validateTypeScriptSources` imports the editor API via in-body `await import(...)`, and the "vscode services ready" signal moved to a Monaco-free module. The ~10 MB editor body loads only when a `CodeEditor` mounts. A `react-vendor` `manualChunks` split was added for stable vendor caching.
+  - lucide-react 1.x + lighter icons/charts (BREAKING for icon consumers): lucide-react unified from three drifting ranges to `^1.17.0`. lucide v1 removed brand icons, so the GitHub/GitLab marks are vendored in `@checkstack/ui` (`GithubIcon`, `GitlabIcon`, `brandIcons`); a new `IconName` type (`LucideIconName | BrandIconName`) in `@checkstack/common` is canonical, accepted by `AuthStrategy.icon` and the card components, so data-driven brand names keep working. `DynamicIcon` no longer eagerly imports lucide's ~1600-icon map (~1 MB) - it lives in a `React.lazy` `iconRegistry` chunk fetched on first data-driven render, while statically named-imported icons tree-shake normally. The recharts-backed health-check charts (~300 KB) and the `HealthCheckSystemOverview` drawer leave the initial load.
+
+  BREAKING CHANGES:
+
+  - Frontend plugin contract: routes/slot contributions are lazy-by-default (`load` instead of `element`/eager elements) as described above.
+  - Any external consumer importing a brand icon from `lucide-react` (e.g. `import { Github } from "lucide-react"`) must switch to the vendored `@checkstack/ui` brand icons or a custom SVG.
+
+  This is a beta minor.
+
+- 9dcc848: Add the auto-generated, version-pinned `@checkstack/sdk` package + codegen, and serve its types live to the in-app editor.
+
+  - A new committed workspace package `@checkstack/sdk`, generated from the platform's source of truth by `scripts/generate-sdk.ts` (`generate:sdk` / `generate:sdk:check`): a fully-typed oRPC client (`createCheckstackClient`) over the REST surface with one `InferClient` per plugin contract, real script-authoring helpers (`@checkstack/sdk/healthcheck`, `@checkstack/sdk/integration`) whose runtime body is the same identity function the in-app runner injects, per-subpath `.d.ts` under the package `exports` map, and an editor-only ambient bundle. A `generate:sdk:check` CI guard fails when the committed SDK files drift from a fresh generation. The `@checkstack/sdk` version is stamped from `@checkstack/release` and MUST NOT appear in a changeset (a guard enforces this); the `@checkstack/release` bump here advances the release version so the generated SDK can be published later. The generated client also normalizes its base URL without a backtracking-prone regex, closing a CodeQL `js/polynomial-redos` finding.
+  - Live editor type injection: a new version-keyed route `GET /api/script-packages/sdk-types/:releaseVersion` (raw handler in `@checkstack/script-packages-backend`) serves the generated SDK editor bundle with `Cache-Control: private, max-age=1y, immutable`; the pure path-build/parse module lives in `@checkstack/script-packages-common`, shared by backend and frontend. A mismatched version returns `409` so the editor refetches and never serves stale types after an upgrade. The frontend `useSdkTypeInjection` hook fetches the bundle once per session and mounts it into Monaco via `addExtraLib`. Schema-narrowed `context.config` / `context.event.payload` editor types stay local; the package-resolving module declarations come from the one published `@checkstack/sdk` source.
+
+  BREAKING CHANGES: the script-authoring import surface moves from the bare `@checkstack/healthcheck` / `@checkstack/integration` virtual modules to the `@checkstack/sdk/healthcheck` / `@checkstack/sdk/integration` subpaths of the published `@checkstack/sdk` package. The old bare-name imports no longer resolve (an old import now errors in the editor, surfacing the migration). Existing scripts must update the module specifier:
+
+      - import { defineHealthCheck } from "@checkstack/healthcheck";
+      + import { defineHealthCheck } from "@checkstack/sdk/healthcheck";
+
+      - import { defineIntegration } from "@checkstack/integration";
+      + import { defineIntegration } from "@checkstack/sdk/integration";
+
+  The helper names and their runtime behaviour are unchanged - only the module specifier moves. The global (no-import) helper form continues to work unchanged.
+
+  This is a beta minor.
+
+- 9dcc848: Align workspace dependency versions and migrate React Router to v7.
+
+  BREAKING CHANGES (React Router v7): All frontend packages now depend on `react-router-dom@^7.16.0`. Previously the workspace declared four divergent ranges (`^6.20.0`, `^6.22.0`, `^7.1.1`, `^7.14.2`), which resolved both `react-router@6` and `react-router@7` into a single bundle. Everything is now unified on v7. The public imports the app uses (`BrowserRouter`, `Routes`, `Route`, `Link`, `NavLink`, `MemoryRouter`, `useNavigate`, `useParams`, `useSearchParams`, `useLocation`) are unchanged between v6 and v7, so no source rewrites were required - but any out-of-tree plugin still on react-router v6 should upgrade to v7 (see the React Router v6 -> v7 upgrade guide) to share the host's single router instance via the import map.
+
+  Other unified ranges (no API change): `react` -> `^18.3.1`, the `@orpc/*` family (`contract`, `server`, `client`, `tanstack-query`, `openapi`, `zod`) -> `^1.14.4`, and `better-auth` -> `^1.6.13`.
+
+  Removed the pre-rename `@orpc/react-query` leftover from `@checkstack/frontend-api`; its `createRouterUtils` / `RouterUtils` / `ProcedureUtils` now come from `@orpc/tanstack-query` (the package already in use).
+
+  Stale in-range runtime deps pulled up to current published versions: `hono` `^4.12.23`, `@tanstack/react-query` (+devtools) `^5.100.14`, `date-fns` `^4.4.0`, `jose` `^6.2.3`, `tar` `^7.5.16`, `semver` `^7.8.1`, `@xyflow/react` `^12.11.0`.
+
+### Patch Changes
+
+- 9dcc848: Move primary navigation into a left sidebar, and serve the user guide in-app.
+
+  Feature navigation (a ~20-item user-menu dropdown) now lives in a persistent left sidebar (a slide-over drawer on mobile), grouped by section with the active route highlighted; the user menu keeps only account actions. A route opts into the sidebar with new `nav` metadata (`{ group, icon, label?, order?, accessRule? }`) on its registration, co-located with path + access + title. The sidebar filters entries with the same access check as page guards. `@checkstack/common` gains `isAccessRuleSatisfied` and a centralized set of in-app doc slugs (`APP_DOC_SLUGS` + `docsPath`, with a test asserting each resolves to a real docs page); `@checkstack/auth-frontend` exports `useAccessRules`.
+
+  The backend now serves the Astro Starlight docs build same-origin at `/checkstack/*` (the same artifact deployed to GitHub Pages), so the user guide is available inside the app including for self-hosted / air-gapped installs (served verbatim, no rebuild, no link rewriting; from `CHECKSTACK_DOCS_DIST`, before the SPA catch-all, degrading gracefully when absent; the Docker image builds and ships `docs/dist`; Vite proxies `/checkstack` in dev). The "Docs" link is a shell-owned external sidebar entry under the Documentation group (book icon), opening `/checkstack/user-guide/` in a new tab; the group renders even when no plugin route contributes to it.
+
+  BREAKING (plugin authors): `UserMenuItemsSlot` is no longer the way to add navigation - registering a top user-menu item no longer surfaces it anywhere. Add `nav` to the page's route instead. `UserMenuItemsBottomSlot` (account items) is unchanged. All bundled plugins have been migrated.
+
+  This is a beta minor.
+
+- 9dcc848: Guard component animations behind isLowPower, and add a shared inline Spinner.
+
+  - `@checkstack/ui` shared components (`Tabs`, `ConfirmationModal`, `Accordion`, `CodeEditor` popout-button backdrop blur) now drop their `animate-*` / `backdrop-blur` classes when the device reports the low-power tier, matching `LoadingSpinner` / `Skeleton`. No public API change; normal-power rendering is unchanged.
+  - A new shared inline `Spinner` (`@checkstack/ui`) renders a lucide `Loader2` whose `animate-spin` is gated internally behind `usePerformance().isLowPower`, so call sites inherit the low-power guard. Props: `size` (`sm`/`md`/`lg`), `className`, rest spread to the icon; decorative by default (`aria-hidden`), `role="status"` when given `aria-label`. The hand-rolled `Loader2` button/table spinners in `HealthCheckDrawer`, `HealthCheckRunsTable`, `IncidentEditor`, `IncidentUpdateForm`, `ProviderConnectionsPage`, `MaintenanceEditor`, `MaintenanceUpdateForm`, `UserChannelCard`, and `DynamicOptionsField` are migrated onto it.
+  - Remaining unguarded `animate-*` / `animate-in` / blur classes across the auth, gitops, healthcheck, incident, integration, maintenance, and notification frontends are gated behind `usePerformance().isLowPower`, so effects degrade gracefully on low-power devices per the performance rule.
+
+  Normal-power behavior is unchanged; low-power rendering drops the animations.
+
+  This is a beta minor.
+
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+  - @checkstack/ui@1.13.0
+  - @checkstack/auth-frontend@0.7.0
+  - @checkstack/healthcheck-common@1.5.0
+  - @checkstack/anomaly-common@1.3.0
+  - @checkstack/catalog-frontend@0.11.0
+  - @checkstack/catalog-common@2.3.0
+  - @checkstack/common@0.13.0
+  - @checkstack/dashboard-frontend@0.8.0
+  - @checkstack/frontend-api@0.7.0
+  - @checkstack/gitops-frontend@0.5.0
+  - @checkstack/script-packages-frontend@0.3.0
+  - @checkstack/secrets-frontend@0.2.0
+  - @checkstack/tips-frontend@0.3.0
+  - @checkstack/satellite-common@0.8.0
+  - @checkstack/signal-frontend@0.2.0
+
 ## 0.22.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -14,25 +14,26 @@
   },
   "dependencies": {
     "@checkstack/anomaly-common": "1.2.3",
-    "@checkstack/auth-frontend": "0.6.6",
+    "@checkstack/auth-frontend": "0.6.7",
     "@checkstack/catalog-common": "2.2.3",
+    "@checkstack/catalog-frontend": "0.10.7",
     "@checkstack/common": "0.12.0",
-    "@checkstack/dashboard-frontend": "0.7.7",
+    "@checkstack/dashboard-frontend": "0.7.8",
     "@checkstack/frontend-api": "0.6.0",
-    "@checkstack/gitops-frontend": "0.4.6",
-    "@checkstack/healthcheck-common": "1.3.0",
-    "@checkstack/satellite-common": "0.6.0",
-    "@checkstack/script-packages-frontend": "0.1.0",
-    "@checkstack/secrets-frontend": "0.0.1",
+    "@checkstack/gitops-frontend": "0.4.7",
+    "@checkstack/healthcheck-common": "1.4.0",
+    "@checkstack/satellite-common": "0.7.0",
+    "@checkstack/script-packages-frontend": "0.2.0",
+    "@checkstack/secrets-frontend": "0.1.0",
     "@checkstack/signal-frontend": "0.1.5",
-    "@checkstack/tips-frontend": "0.2.6",
-    "@checkstack/ui": "1.11.0",
+    "@checkstack/tips-frontend": "0.2.7",
+    "@checkstack/ui": "1.12.0",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.344.0",
-    "react": "^18.2.0",
-    "react-router-dom": "^6.20.0",
+    "date-fns": "^4.4.0",
+    "lucide-react": "^1.17.0",
+    "react": "^18.3.1",
+    "react-router-dom": "^7.16.0",
     "recharts": "^3.6.0",
     "uuid": "^14.0.0",
     "zod": "^4.2.1"

package/src/auto-charts/extension.tsx

@@ -5,12 +5,21 @@
  * for all strategies that have schema metadata.
  */
 
+import { lazy, Suspense } from "react";
 import { createSlotExtension } from "@checkstack/frontend-api";
+import { Skeleton } from "@checkstack/ui";
 import {
   HealthCheckDiagramSlot,
   type HealthCheckDiagramSlotContext,
 } from "../slots";
-import { AutoChartGrid } from "./AutoChartGrid";
+
+// Lazy-loaded: AutoChartGrid pulls in recharts (~300 KB). This extension is
+// registered eagerly at plugin load, so a static import would ship recharts in
+// the initial bundle even though charts only render inside the (on-demand)
+// HealthCheckDiagramSlot. Deferring it keeps recharts out of the initial load.
+const AutoChartGrid = lazy(() =>
+  import("./AutoChartGrid").then((m) => ({ default: m.AutoChartGrid })),
+);
 
 /**
  * Extension that renders auto-generated charts for any strategy.
@@ -22,6 +31,10 @@ import { AutoChartGrid } from "./AutoChartGrid";
 export const autoChartExtension = createSlotExtension(HealthCheckDiagramSlot, {
   id: "healthcheck.auto-charts",
   component: (context: HealthCheckDiagramSlotContext) => {
-    return <AutoChartGrid context={context} />;
+    return (
+      <Suspense fallback={<Skeleton className="h-48 w-full" />}>
+        <AutoChartGrid context={context} />
+      </Suspense>
+    );
   },
 });

package/src/components/CatalogBrowseHealthFiller.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useMemo } from "react";
+import type { SlotContext } from "@checkstack/frontend-api";
+import type { CatalogBrowseHealthSlot } from "@checkstack/catalog-common";
+import type { CatalogHealthStatuses } from "@checkstack/catalog-common";
+import {
+  SystemBadgeDataProvider,
+  useSystemBadgeData,
+} from "@checkstack/dashboard-frontend";
+
+type Props = SlotContext<typeof CatalogBrowseHealthSlot>;
+
+/**
+ * Reads the bulk-fetched health from dashboard-frontend's SystemBadgeDataProvider
+ * context and reports the per-system statuses back to the catalog browse view via
+ * `onStatuses`. Renders nothing — it is a headless reporter inside the provider.
+ *
+ * Healthcheck's status enum (`healthy` | `degraded` | `unhealthy`) matches the
+ * catalog-owned `CatalogHealthStatus` vocabulary exactly, so the mapping is a
+ * direct copy of the resolved statuses; systems with no health are simply omitted
+ * (the catalog rollup treats absence as `"unknown"`).
+ */
+const HealthStatusReporter: React.FC<Props> = ({ systemIds, onStatuses }) => {
+  const { getSystemBadgeData } = useSystemBadgeData();
+
+  // Stable, serialised status map: `useMemo` keeps the object identity fixed
+  // unless `systemIds` or the bulk-data accessor change, so the effect below
+  // re-reports only when the resolved statuses actually change.
+  const statuses = useMemo<CatalogHealthStatuses>(() => {
+    const result: CatalogHealthStatuses = {};
+    for (const id of systemIds) {
+      const status = getSystemBadgeData(id)?.health?.status;
+      if (status) result[id] = status;
+    }
+    return result;
+  }, [systemIds, getSystemBadgeData]);
+
+  useEffect(() => {
+    onStatuses(statuses);
+  }, [statuses, onStatuses]);
+
+  return null;
+};
+
+/**
+ * Fills the catalog `CatalogBrowseHealthSlot`. Wraps dashboard-frontend's existing
+ * `SystemBadgeDataProvider` (already a healthcheck-frontend dependency) over the
+ * browse list's system ids to bulk-fetch health, then reports the resolved
+ * statuses to catalog. All cross-plugin coupling lives here on the filler side;
+ * catalog stays decoupled.
+ */
+export const CatalogBrowseHealthFiller: React.FC<Props> = ({
+  systemIds,
+  onStatuses,
+}) => {
+  return (
+    <SystemBadgeDataProvider systemIds={systemIds}>
+      <HealthStatusReporter systemIds={systemIds} onStatuses={onStatuses} />
+    </SystemBadgeDataProvider>
+  );
+};

package/src/components/CollectorList.tsx

@@ -35,6 +35,14 @@ interface CollectorListProps {
   loading?: boolean;
   /** Called when collector form validity changes */
   onValidChange?: (isValid: boolean) => void;
+  /**
+   * Sample context used to preview `x-templatable` config fields (e.g. the
+   * HTTP URL's `{{ environment.baseUrl }}`). Typically the custom fields of a
+   * sample environment the system belongs to, shaped as
+   * `{ environment, check, system }`. Omit it and templatable fields render
+   * without a preview line.
+   */
+  templatePreviewContext?: Record<string, unknown>;
 }
 
 /**
@@ -48,6 +56,7 @@ export const CollectorList: React.FC<CollectorListProps> = ({
   onChange,
   loading,
   onValidChange,
+  templatePreviewContext,
 }) => {
   // Track validity state per collector index
   const [validityMap, setValidityMap] = useState<Record<number, boolean>>({});
@@ -277,6 +286,7 @@ export const CollectorList: React.FC<CollectorListProps> = ({
                           <DynamicForm
                             schema={collector.configSchema}
                             value={entry.config}
+                            templatePreviewContext={templatePreviewContext}
                             onChange={(config) =>
                               handleConfigChange(index, config)
                             }

package/src/components/HealthCheckDrawer.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useRef } from "react";
-import { Loader2, ExternalLink, Server } from "lucide-react";
+import { ExternalLink, Server, Layers } from "lucide-react";
 import { Satellite as SatelliteIcon } from "lucide-react";
+import { CatalogApi } from "@checkstack/catalog-common";
 import {
   ExtensionSlot,
   usePluginClient,
@@ -48,6 +49,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
+  Spinner,
 } from "@checkstack/ui";
 import { formatDistanceToNow } from "date-fns";
 import { useNavigate, Link } from "react-router-dom";
@@ -114,6 +116,18 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
 }) => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const satelliteClient = usePluginClient(SatelliteApi);
+  const catalogClient = usePluginClient(CatalogApi);
+
+  // Environments the system belongs to - resolves run.environmentId to a
+  // human-readable name in the run-history table (per-environment fan-out).
+  const { data: systemEnvironments = [] } =
+    catalogClient.getSystemEnvironments.useQuery(
+      { systemId },
+      { enabled: !!systemId },
+    );
+  const envNameById = new Map(
+    systemEnvironments.map((e) => [e.id, e.name]),
+  );
   const navigate = useNavigate();
   const accessApi = useApi(accessApiRef);
   const { allowed: canViewDetails } = accessApi.useAccess(
@@ -339,7 +353,10 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                         </button>
                       )}
                       {chartFetching && (
-                        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground ml-2" />
+                        <Spinner
+                          size="sm"
+                          className="text-muted-foreground ml-2"
+                        />
                       )}
                     </div>
 
@@ -453,7 +470,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                 <span className="text-sm text-muted-foreground flex items-center gap-2">
                   Recent Runs
                   {historyLoading && (
-                    <Loader2 className="h-3 w-3 animate-spin" />
+                    <Spinner size="sm" className="h-3 w-3" />
                   )}
                 </span>
                 <div className="flex-1 h-px bg-border" />
@@ -475,12 +492,13 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                     <TableRow>
                       <TableHead className="w-24">Status</TableHead>
                       <TableHead>Time</TableHead>
+                      <TableHead>Environment</TableHead>
                       <TableHead>Source</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {runs.length === 0 && !historyLoading && (
-                      <EmptyRunsTableRow colSpan={3}>
+                      <EmptyRunsTableRow colSpan={4}>
                         No runs match the{" "}
                         <span className="font-medium">{runsStatusFilter}</span>{" "}
                         filter.
@@ -518,6 +536,19 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                             addSuffix: true,
                           })}
                         </TableCell>
+                        <TableCell>
+                          {run.environmentId ? (
+                            <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-primary/10 text-primary">
+                              <Layers className="h-3 w-3" />
+                              {envNameById.get(run.environmentId) ??
+                                run.environmentId}
+                            </span>
+                          ) : (
+                            <span className="text-xs text-muted-foreground">
+                              None
+                            </span>
+                          )}
+                        </TableCell>
                         <TableCell>
                           {run.sourceId ? (
                             <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-600">

package/src/components/HealthCheckRunsTable.tsx

@@ -8,9 +8,10 @@ import {
   TableCell,
   HealthBadge,
   Pagination,
+  Spinner,
 } from "@checkstack/ui";
 import { formatDistanceToNow, format } from "date-fns";
-import { ExternalLink, Loader2, Satellite, Server } from "lucide-react";
+import { ExternalLink, Satellite, Server, Layers } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
@@ -23,16 +24,32 @@ export interface HealthCheckRunDetailed {
   status: "healthy" | "unhealthy" | "degraded";
   result: Record<string, unknown>;
   timestamp: Date;
+  /**
+   * Environment this run executed for (per-environment fan-out). undefined =
+   * env-less run (opt-out / no membership).
+   */
+  environmentId?: string;
   /** Source ID for result attribution (undefined = local core, UUID = satellite) */
   sourceId?: string;
   /** Human-readable source label (e.g. "Local" or "EU West (eu-west-1)") */
   sourceLabel?: string;
 }
 
+export interface EnvironmentLabel {
+  id: string;
+  name: string;
+}
+
 export interface HealthCheckRunsTableProps {
   runs: HealthCheckRunDetailed[];
   loading: boolean;
   emptyMessage?: string;
+  /**
+   * Optional id -> name map for the Environment column. When a run's
+   * `environmentId` is present, its display name is looked up here (falling
+   * back to the id). Env-less runs render a muted dash.
+   */
+  environmentLabels?: EnvironmentLabel[];
   /** Show System ID and Configuration ID columns with link to detail page */
   showFilterColumns?: boolean;
   /** Number of columns for the expanded result row */
@@ -52,11 +69,15 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
   runs,
   loading,
   emptyMessage = "No health check runs found.",
+  environmentLabels,
   showFilterColumns = false,
   pagination,
 }) => {
   const navigate = useNavigate();
   const prevRunsRef = useRef(runs);
+  const envNameById = new Map(
+    (environmentLabels ?? []).map((e) => [e.id, e.name]),
+  );
 
   // Keep previous runs during loading to prevent layout shift
   const displayRuns =
@@ -75,9 +96,9 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     );
   };
 
-  // 3 base columns (Status, Timestamp, Source) + 3 extras when
+  // 4 base columns (Status, Timestamp, Environment, Source) + 3 extras when
   // showFilterColumns is on (System ID, Configuration ID, link icon).
-  const columnCount = showFilterColumns ? 6 : 3;
+  const columnCount = showFilterColumns ? 7 : 4;
   const showEmptyRow = !loading && displayRuns.length === 0;
 
   return (
@@ -89,7 +110,9 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
               <TableHead className="w-24">
                 <span className="flex items-center gap-2">
                   Status
-                  {loading && <Loader2 className="h-3 w-3 animate-spin" />}
+                  {loading && (
+                    <Spinner size="sm" className="h-3 w-3" />
+                  )}
                 </span>
               </TableHead>
               {showFilterColumns && (
@@ -99,6 +122,7 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                 </>
               )}
               <TableHead>Timestamp</TableHead>
+              <TableHead>Environment</TableHead>
               <TableHead>Source</TableHead>
               {showFilterColumns && <TableHead className="w-16"></TableHead>}
             </TableRow>
@@ -135,6 +159,16 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                     })}
                   </span>
                 </TableCell>
+                <TableCell>
+                  {run.environmentId ? (
+                    <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-primary/10 text-primary">
+                      <Layers className="h-3 w-3" />
+                      {envNameById.get(run.environmentId) ?? run.environmentId}
+                    </span>
+                  ) : (
+                    <span className="text-xs text-muted-foreground">None</span>
+                  )}
+                </TableCell>
                 <TableCell>
                   {run.sourceId ? (
                     <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-600">

package/src/components/HealthCheckSystemOverview.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, lazy, Suspense } from "react";
 import { useSearchParams } from "react-router-dom";
 import {
   usePluginClient,
@@ -17,7 +17,13 @@ import {
 } from "@checkstack/ui";
 import { Heart } from "lucide-react";
 import { HealthCheckSparkline } from "./HealthCheckSparkline";
-import { HealthCheckDrawer } from "./HealthCheckDrawer";
+// Lazy-loaded: the drawer pulls in the recharts-based latency/timeline charts
+// (~300 KB). This component is an eagerly-registered slot extension, so a static
+// import would ship recharts in the initial bundle. The drawer only renders when
+// a check is selected, so deferring it keeps charts out of the initial load.
+const HealthCheckDrawer = lazy(() =>
+  import("./HealthCheckDrawer").then((m) => ({ default: m.HealthCheckDrawer })),
+);
 
 import type {
   StateThresholds,
@@ -206,16 +212,18 @@ export function HealthCheckSystemOverview(props: SlotProps) {
         </CardContent>
       </Card>
 
-      {/* Slide-over Drawer */}
+      {/* Slide-over Drawer (lazy: loads the chart bundle on first open) */}
       {selectedCheck && (
-        <HealthCheckDrawer
-          item={selectedCheck}
-          systemId={systemId}
-          open={!!selectedCheck}
-          onOpenChange={(open) => {
-            if (!open) setSelectedCheck(undefined);
-          }}
-        />
+        <Suspense fallback={null}>
+          <HealthCheckDrawer
+            item={selectedCheck}
+            systemId={systemId}
+            open={!!selectedCheck}
+            onOpenChange={(open) => {
+              if (!open) setSelectedCheck(undefined);
+            }}
+          />
+        </Suspense>
       )}
     </>
   );