@checkstack/healthcheck-frontend 0.22.0 → 0.23.1

package/src/components/HealthSignalsFiller.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo } from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import { resolveRoute } from "@checkstack/common";
+import {
+  SystemSignalsSlot,
+  type SystemSignal,
+  type SystemSignalsMap,
+} from "@checkstack/catalog-common";
+import { healthcheckRoutes } from "@checkstack/healthcheck-common";
+import { HealthCheckApi } from "../api";
+
+type Props = SlotContext<typeof SystemSignalsSlot>;
+
+const SOURCE_ID = "healthcheck";
+
+/**
+ * Reports per-system health as dashboard signals. Bulk-fetches health for all
+ * overview systems in one request and contributes a signal for every system
+ * that is degraded or unhealthy, deep-linking to the failing check's history
+ * (or the system's check assignments when no specific check is failing).
+ * Renders nothing — it is a headless filler for {@link SystemSignalsSlot}.
+ */
+export const HealthSignalsFiller: React.FC<Props> = ({
+  systemIds,
+  onSignals,
+}) => {
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+
+  const { data } = healthCheckClient.getBulkSystemHealthStatus.useQuery(
+    { systemIds },
+    { enabled: systemIds.length > 0, staleTime: 30_000 },
+  );
+
+  const signals = useMemo<SystemSignalsMap>(() => {
+    const result: SystemSignalsMap = {};
+    if (!data) return result;
+
+    for (const systemId of systemIds) {
+      const status = data.statuses[systemId];
+      if (!status || status.status === "healthy") continue;
+
+      const failing = status.checkStatuses.filter(
+        (c) => c.status !== "healthy",
+      );
+      const failingCheck = failing[0];
+      const href = failingCheck
+        ? resolveRoute(healthcheckRoutes.routes.historyDetail, {
+            systemId,
+            configurationId: failingCheck.configurationId,
+          })
+        : resolveRoute(healthcheckRoutes.routes.assignments, { systemId });
+
+      const detail =
+        status.checkStatuses.length > 0
+          ? `${failing.length} of ${status.checkStatuses.length} checks failing`
+          : undefined;
+
+      const signal: SystemSignal = {
+        source: SOURCE_ID,
+        tone: status.status === "unhealthy" ? "error" : "warn",
+        label: status.status === "unhealthy" ? "Unhealthy" : "Degraded",
+        detail,
+        href,
+        iconName: "Activity",
+      };
+      result[systemId] = [signal];
+    }
+    return result;
+  }, [data, systemIds]);
+
+  useEffect(() => {
+    onSignals(SOURCE_ID, signals);
+  }, [signals, onSignals]);
+
+  return null;
+};

package/src/components/SystemHealthBadge.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
 import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
 import { HealthCheckApi } from "../api";
-import { HealthBadge } from "@checkstack/ui";
+import { StatusBadge } from "@checkstack/ui";
+import { Activity } from "lucide-react";
 import { useSystemBadgeDataOptional } from "@checkstack/dashboard-frontend";
 
 type Props = SlotContext<typeof SystemStateBadgesSlot>;
@@ -37,5 +38,9 @@ export const SystemHealthBadge: React.FC<Props> = ({ system }) => {
   const status = providerStatus ?? localStatus;
 
   if (!status || status === "healthy") return <></>;
-  return <HealthBadge status={status} />;
+  return status === "unhealthy" ? (
+    <StatusBadge tone="error" icon={Activity} label="Unhealthy" />
+  ) : (
+    <StatusBadge tone="warn" icon={Activity} label="Degraded" />
+  );
 };

package/src/components/assignments/ExecutionPanel.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { Checkbox, Label, Tooltip } from "@checkstack/ui";
-import { Satellite } from "lucide-react";
+import { Satellite, Layers } from "lucide-react";
+import {
+  modeFromEnvironmentIds,
+  type EnvironmentSelectorMode,
+} from "./environment-selector.logic";
 
 interface SatelliteDto {
   id: string;
@@ -9,12 +13,26 @@ interface SatelliteDto {
   status: "online" | "offline";
 }
 
+interface EnvironmentDto {
+  id: string;
+  name: string;
+}
+
 interface ExecutionPanelProps {
   includeLocal: boolean;
   satelliteIds: string[];
   satellites: SatelliteDto[];
   onToggleLocal: () => void;
   onToggleSatellite: (satelliteId: string) => void;
+  /**
+   * Per-assignment environment selector value. null = all current
+   * environments; [] = opt out (env-less); non-empty = those env ids.
+   */
+  environmentIds: string[] | null;
+  /** Environments the system currently belongs to. */
+  environments: EnvironmentDto[];
+  onSetEnvironmentMode: (mode: EnvironmentSelectorMode) => void;
+  onToggleEnvironment: (environmentId: string) => void;
   saving: boolean;
   isLocked?: boolean;
 }
@@ -29,11 +47,24 @@ export const ExecutionPanel: React.FC<ExecutionPanelProps> = ({
   satellites,
   onToggleLocal,
   onToggleSatellite,
+  environmentIds,
+  environments,
+  onSetEnvironmentMode,
+  onToggleEnvironment,
   saving,
   isLocked,
 }) => {
   const hasSatellites = satelliteIds.length > 0;
   const willRunAnywhere = includeLocal || hasSatellites;
+  const envMode = modeFromEnvironmentIds(environmentIds);
+  const selectedEnvIds = new Set<string>(
+    environmentIds === null ? [] : environmentIds,
+  );
+  const envModes: { value: EnvironmentSelectorMode; label: string; hint: string }[] = [
+    { value: "all", label: "All environments", hint: "Run once per environment the system belongs to" },
+    { value: "specific", label: "Specific", hint: "Run only for the selected environments" },
+    { value: "none", label: "None", hint: "Run once with no environment" },
+  ];
 
   return (
     <div className="p-6 space-y-4">
@@ -118,6 +149,65 @@ export const ExecutionPanel: React.FC<ExecutionPanelProps> = ({
         )}
       </div>
 
+      {/* Environment Selector */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Layers className="h-3.5 w-3.5 text-muted-foreground" />
+          <Label className="text-sm font-medium">Environments</Label>
+          <Tooltip content="Fan this check out into one run per environment. The custom fields of each environment are exposed to scripts and templating." />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Choose how this check fans out across the system's environments.
+        </p>
+
+        <div className="space-y-1.5">
+          {envModes.map((m) => (
+            <label
+              key={m.value}
+              className="flex items-start gap-3 p-2.5 rounded-md border hover:bg-muted/30 transition-colors cursor-pointer"
+            >
+              <input
+                type="radio"
+                name="environment-mode"
+                className="mt-1"
+                checked={envMode === m.value}
+                disabled={saving || isLocked}
+                onChange={() => onSetEnvironmentMode(m.value)}
+              />
+              <div className="flex-1 min-w-0">
+                <span className="text-sm font-medium">{m.label}</span>
+                <p className="text-xs text-muted-foreground mt-0.5">{m.hint}</p>
+              </div>
+            </label>
+          ))}
+        </div>
+
+        {envMode === "specific" && (
+          <div className="space-y-1.5 pl-6">
+            {environments.length === 0 ? (
+              <p className="text-sm text-muted-foreground italic py-2">
+                This system has no environments. Attach environments to the
+                system in the catalog first.
+              </p>
+            ) : (
+              environments.map((env) => (
+                <div
+                  key={env.id}
+                  className="flex items-center gap-3 p-2 rounded-md border hover:bg-muted/30 transition-colors"
+                >
+                  <Checkbox
+                    checked={selectedEnvIds.has(env.id)}
+                    onCheckedChange={() => onToggleEnvironment(env.id)}
+                    disabled={saving || isLocked}
+                  />
+                  <span className="text-sm truncate">{env.name}</span>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+
       {/* Execution Summary */}
       <div className="p-3 bg-muted/30 rounded-lg border text-xs text-muted-foreground">
         <span className="font-medium">Execution: </span>

package/src/components/assignments/environment-selector.logic.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect } from "bun:test";
+import {
+  modeFromEnvironmentIds,
+  environmentIdsForMode,
+  toggleEnvironmentId,
+} from "./environment-selector.logic";
+
+describe("modeFromEnvironmentIds", () => {
+  it("null => all", () => {
+    expect(modeFromEnvironmentIds(null)).toBe("all");
+  });
+  it("undefined => all", () => {
+    expect(modeFromEnvironmentIds(undefined)).toBe("all");
+  });
+  it("[] => none", () => {
+    expect(modeFromEnvironmentIds([])).toBe("none");
+  });
+  it("non-empty => specific", () => {
+    expect(modeFromEnvironmentIds(["prod"])).toBe("specific");
+  });
+});
+
+describe("environmentIdsForMode", () => {
+  it("all => null", () => {
+    expect(environmentIdsForMode({ mode: "all", selectedIds: ["x"] })).toBeNull();
+  });
+  it("none => []", () => {
+    expect(environmentIdsForMode({ mode: "none", selectedIds: ["x"] })).toEqual(
+      [],
+    );
+  });
+  it("specific => the selected ids verbatim", () => {
+    expect(
+      environmentIdsForMode({ mode: "specific", selectedIds: ["prod", "qa"] }),
+    ).toEqual(["prod", "qa"]);
+  });
+
+  it("round-trips through modeFromEnvironmentIds for all three modes", () => {
+    expect(
+      modeFromEnvironmentIds(
+        environmentIdsForMode({ mode: "all", selectedIds: [] }),
+      ),
+    ).toBe("all");
+    expect(
+      modeFromEnvironmentIds(
+        environmentIdsForMode({ mode: "none", selectedIds: [] }),
+      ),
+    ).toBe("none");
+    expect(
+      modeFromEnvironmentIds(
+        environmentIdsForMode({ mode: "specific", selectedIds: ["e1"] }),
+      ),
+    ).toBe("specific");
+  });
+});
+
+describe("toggleEnvironmentId", () => {
+  it("adds an id not present, preserving order", () => {
+    expect(
+      toggleEnvironmentId({ selectedIds: ["a"], environmentId: "b" }),
+    ).toEqual(["a", "b"]);
+  });
+  it("removes an id already present", () => {
+    expect(
+      toggleEnvironmentId({ selectedIds: ["a", "b"], environmentId: "a" }),
+    ).toEqual(["b"]);
+  });
+});

package/src/components/assignments/environment-selector.logic.ts

@@ -0,0 +1,69 @@
+/**
+ * Pure, DOM-free logic for the per-assignment environment selector. Kept
+ * separate from the React component so it can be unit-tested in the repo-root
+ * `bun test` run (which has no happy-dom).
+ *
+ * The selector has three modes that map to the `environmentIds` wire value
+ * (semantics locked in the environments plan, §2/§7.1):
+ * - "all"      => `null`  : run for ALL environments the system belongs to.
+ * - "specific" => `string[]` (non-empty): run for exactly those env ids.
+ * - "none"     => `[]`    : opt out, run ONCE with no environment.
+ */
+export type EnvironmentSelectorMode = "all" | "specific" | "none";
+
+/**
+ * Derive the UI mode from the stored `environmentIds` wire value.
+ * `null`/`undefined` = all; `[]` = none; non-empty = specific.
+ */
+export function modeFromEnvironmentIds(
+  environmentIds: string[] | null | undefined,
+): EnvironmentSelectorMode {
+  if (environmentIds === null || environmentIds === undefined) return "all";
+  if (environmentIds.length === 0) return "none";
+  return "specific";
+}
+
+/**
+ * Compute the `environmentIds` wire value to persist for a chosen mode.
+ *
+ * For "specific", `selectedIds` is used verbatim (empty selection under
+ * "specific" is NOT auto-coerced to "none" here — the component keeps the
+ * mode explicit and `selectedIds` empty; callers/UI should require at least
+ * one selection before this is treated as a meaningful "specific" set).
+ */
+export function environmentIdsForMode({
+  mode,
+  selectedIds,
+}: {
+  mode: EnvironmentSelectorMode;
+  selectedIds: string[];
+}): string[] | null {
+  switch (mode) {
+    case "all": {
+      return null;
+    }
+    case "none": {
+      return [];
+    }
+    case "specific": {
+      return selectedIds;
+    }
+  }
+}
+
+/**
+ * Toggle one environment id in a "specific" selection, returning the new
+ * sorted-stable list (membership order is the caller's concern; this just
+ * adds/removes preserving existing order).
+ */
+export function toggleEnvironmentId({
+  selectedIds,
+  environmentId,
+}: {
+  selectedIds: string[];
+  environmentId: string;
+}): string[] {
+  return selectedIds.includes(environmentId)
+    ? selectedIds.filter((id) => id !== environmentId)
+    : [...selectedIds, environmentId];
+}

package/src/components/editor/CollectorSection.tsx

@@ -10,10 +10,18 @@ import {
   healthcheckScriptContext,
 } from "@checkstack/ui";
 import { Trash2 } from "lucide-react";
-import { useScriptPackageTypeAcquisition } from "@checkstack/script-packages-frontend";
+import {
+  useScriptPackageTypeAcquisition,
+  useSdkTypeInjection,
+} from "@checkstack/script-packages-frontend";
 import { useSecretNames } from "@checkstack/secrets-frontend";
+import {
+  EnvironmentPreviewPicker,
+  type Environment,
+} from "@checkstack/catalog-frontend";
 import { AssertionBuilder, type Assertion } from "../AssertionBuilder";
 import { createCollectorScriptTestRenderer } from "./CollectorScriptTestRenderer";
+import { schemaHasTemplatableFields } from "./collector-preview-context.logic";
 
 interface CollectorSectionProps {
   entry: CollectorConfigEntry;
@@ -22,6 +30,21 @@ interface CollectorSectionProps {
   onAssertionsChange: (assertions: CollectorConfigEntry["assertions"]) => void;
   onValidChange: (isValid: boolean) => void;
   onRemove: () => void;
+  /**
+   * Environments offered in the "Preview as" picker (the system's when one is
+   * in context, else all). Empty disables the picker.
+   */
+  previewEnvironments: ReadonlyArray<Environment>;
+  /** Currently selected preview environment id (shared across collectors). */
+  previewEnvironmentId: string | null;
+  /** Called when the author picks (or clears) a preview environment. */
+  onPreviewEnvironmentChange: (environmentId: string | null) => void;
+  /**
+   * Sample context for previewing `x-templatable` fields, built from the
+   * selected environment's custom fields plus curated check/system metadata.
+   * `undefined` when no environment is selected (preview line stays hidden).
+   */
+  templatePreviewContext?: Record<string, unknown>;
 }
 
 export const CollectorSection: React.FC<CollectorSectionProps> = ({
@@ -31,6 +54,10 @@ export const CollectorSection: React.FC<CollectorSectionProps> = ({
   onAssertionsChange,
   onValidChange,
   onRemove,
+  previewEnvironments,
+  previewEnvironmentId,
+  onPreviewEnvironmentChange,
+  templatePreviewContext,
 }) => {
   const scriptTestRenderer = React.useMemo(
     () => createCollectorScriptTestRenderer(entry.config),
@@ -41,6 +68,8 @@ export const CollectorSection: React.FC<CollectorSectionProps> = ({
   // drives import-specifier name completion before any module is registered.
   const { acquireTypes, acquireResetKey, importablePackages } =
     useScriptPackageTypeAcquisition();
+  // SDK editor types so `@checkstack/sdk/healthcheck` imports resolve.
+  const { sdkTypes, sdkTypesResetKey } = useSdkTypeInjection();
   // Secret names (never values) for the secret -> env mapping editor.
   const { secretNames } = useSecretNames();
 
@@ -72,11 +101,21 @@ export const CollectorSection: React.FC<CollectorSectionProps> = ({
       {/* Configuration */}
       {collectorDef?.configSchema && (
         <div className="space-y-3">
-          <div>
-            <Label className="text-sm font-semibold">Configuration</Label>
-            <p className="text-xs text-muted-foreground">
-              Configure how this check item behaves.
-            </p>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <Label className="text-sm font-semibold">Configuration</Label>
+              <p className="text-xs text-muted-foreground">
+                Configure how this check item behaves.
+              </p>
+            </div>
+            {/* Only offer the preview picker when a templatable field exists. */}
+            {schemaHasTemplatableFields(collectorDef.configSchema) && (
+              <EnvironmentPreviewPicker
+                environments={previewEnvironments}
+                selectedId={previewEnvironmentId}
+                onSelect={onPreviewEnvironmentChange}
+              />
+            )}
           </div>
           {(() => {
             const ctx = healthcheckScriptContext({
@@ -90,11 +129,14 @@ export const CollectorSection: React.FC<CollectorSectionProps> = ({
                 value={entry.config}
                 onChange={onConfigChange}
                 onValidChange={onValidChange}
+                templatePreviewContext={templatePreviewContext}
                 {...ctx}
                 scriptTestRenderer={scriptTestRenderer}
                 secretNames={secretNames}
                 acquireTypes={acquireTypes}
                 acquireResetKey={acquireResetKey}
+                sdkTypes={sdkTypes}
+                sdkTypesResetKey={sdkTypesResetKey}
                 importablePackages={importablePackages}
               />
             );

package/src/components/editor/EditorPanel.tsx

@@ -10,6 +10,7 @@ import { CollectorSection } from "./CollectorSection";
 import { CollectorPicker } from "./CollectorPicker";
 import { SystemsSection } from "./SystemsSection";
 import { TeamAccessEditor } from "@checkstack/auth-frontend";
+import type { Environment } from "@checkstack/catalog-frontend";
 
 // =============================================================================
 // TYPES
@@ -49,6 +50,21 @@ interface EditorPanelProps {
   systemsLoading?: boolean;
   selectedSystemIds?: string[];
   onSystemsChange?: (systemIds: string[]) => void;
+  /**
+   * Environments offered in the collector "Preview as" picker (the system's
+   * environments when a single system is in context, else all). Empty hides
+   * the picker.
+   */
+  previewEnvironments?: ReadonlyArray<Environment>;
+  /** Selected preview environment id (shared across collectors). */
+  previewEnvironmentId?: string | null;
+  /** Called when the author picks (or clears) a preview environment. */
+  onPreviewEnvironmentChange?: (environmentId: string | null) => void;
+  /**
+   * Sample context for previewing the selected collector's `x-templatable`
+   * fields, built from the chosen environment. `undefined` when none chosen.
+   */
+  templatePreviewContext?: Record<string, unknown>;
 }
 
 // =============================================================================
@@ -78,6 +94,10 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
   systemsLoading = false,
   selectedSystemIds = [],
   onSystemsChange,
+  previewEnvironments = [],
+  previewEnvironmentId = null,
+  onPreviewEnvironmentChange,
+  templatePreviewContext,
 }) => {
   // --- General Section ---
   if (selectedNode === "general") {
@@ -180,6 +200,12 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
           }
           onValidChange={(isValid) => onCollectorValidChange(entryId, isValid)}
           onRemove={() => onCollectorRemove(entryId)}
+          previewEnvironments={previewEnvironments}
+          previewEnvironmentId={previewEnvironmentId}
+          onPreviewEnvironmentChange={(id) =>
+            onPreviewEnvironmentChange?.(id)
+          }
+          templatePreviewContext={templatePreviewContext}
         />
       </div>
     );

package/src/components/editor/collector-preview-context.logic.test.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect } from "bun:test";
+import {
+  schemaHasTemplatableFields,
+  buildTemplatePreviewContext,
+} from "./collector-preview-context.logic";
+import type { JsonSchema } from "@checkstack/ui";
+
+describe("schemaHasTemplatableFields", () => {
+  it("returns false for empty/missing schema", () => {
+    expect(schemaHasTemplatableFields(undefined)).toBe(false);
+    expect(schemaHasTemplatableFields(null)).toBe(false);
+    expect(schemaHasTemplatableFields({ type: "object" })).toBe(false);
+    expect(
+      schemaHasTemplatableFields({ type: "object", properties: {} }),
+    ).toBe(false);
+  });
+
+  it("detects a top-level templatable field", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        url: { type: "string", "x-templatable": true },
+        method: { type: "string" },
+      },
+    };
+    expect(schemaHasTemplatableFields(schema)).toBe(true);
+  });
+
+  it("returns false when no field is templatable", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        url: { type: "string" },
+        timeout: { type: "number" },
+      },
+    };
+    expect(schemaHasTemplatableFields(schema)).toBe(false);
+  });
+
+  it("detects a nested templatable field in an object property", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        auth: {
+          type: "object",
+          properties: {
+            token: { type: "string", "x-templatable": true },
+          },
+        },
+      },
+    };
+    expect(schemaHasTemplatableFields(schema)).toBe(true);
+  });
+
+  it("detects a templatable field inside array items", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        headers: {
+          type: "array",
+          items: {
+            type: "object",
+            properties: {
+              value: { type: "string", "x-templatable": true },
+            },
+          },
+        },
+      },
+    };
+    expect(schemaHasTemplatableFields(schema)).toBe(true);
+  });
+});
+
+describe("buildTemplatePreviewContext", () => {
+  it("places environment fields under `environment`", () => {
+    const ctx = buildTemplatePreviewContext({
+      environmentFields: { baseUrl: "https://staging.example.com" },
+    });
+    expect(ctx.environment).toEqual({
+      baseUrl: "https://staging.example.com",
+    });
+  });
+
+  it("defaults check/system to empty objects when absent", () => {
+    const ctx = buildTemplatePreviewContext({ environmentFields: {} });
+    expect(ctx).toEqual({ environment: {}, check: {}, system: {} });
+  });
+
+  it("includes curated check/system metadata when provided", () => {
+    const ctx = buildTemplatePreviewContext({
+      environmentFields: { baseUrl: "https://x" },
+      check: { id: "c1", name: "API health", intervalSeconds: 60 },
+      system: { id: "s1", name: "Payments" },
+    });
+    expect(ctx).toEqual({
+      environment: { baseUrl: "https://x" },
+      check: { id: "c1", name: "API health", intervalSeconds: 60 },
+      system: { id: "s1", name: "Payments" },
+    });
+  });
+});