@checkstack/healthcheck-frontend 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # @checkstack/healthcheck-frontend
 
+## 0.2.0
+
+### Minor Changes
+
+- 8e43507: # Teams and Resource-Level Access Control
+
+  This release introduces a comprehensive Teams system for organizing users and controlling access to resources at a granular level.
+
+  ## Features
+
+  ### Team Management
+
+  - Create, update, and delete teams with name and description
+  - Add/remove users from teams
+  - Designate team managers with elevated privileges
+  - View team membership and manager status
+
+  ### Resource-Level Access Control
+
+  - Grant teams access to specific resources (systems, health checks, incidents, maintenances)
+  - Configure read-only or manage permissions per team
+  - Resource-level "Team Only" mode that restricts access exclusively to team members
+  - Separate `resourceAccessSettings` table for resource-level settings (not per-grant)
+  - Automatic cleanup of grants when teams are deleted (database cascade)
+
+  ### Middleware Integration
+
+  - Extended `autoAuthMiddleware` to support resource access checks
+  - Single-resource pre-handler validation for detail endpoints
+  - Automatic list filtering for collection endpoints
+  - S2S endpoints for access verification
+
+  ### Frontend Components
+
+  - `TeamsTab` component for managing teams in Auth Settings
+  - `TeamAccessEditor` component for assigning team access to resources
+  - Resource-level "Team Only" toggle in `TeamAccessEditor`
+  - Integration into System, Health Check, Incident, and Maintenance editors
+
+  ## Breaking Changes
+
+  ### API Response Format Changes
+
+  List endpoints now return objects with named keys instead of arrays directly:
+
+  ```typescript
+  // Before
+  const systems = await catalogApi.getSystems();
+
+  // After
+  const { systems } = await catalogApi.getSystems();
+  ```
+
+  Affected endpoints:
+
+  - `catalog.getSystems` → `{ systems: [...] }`
+  - `healthcheck.getConfigurations` → `{ configurations: [...] }`
+  - `incident.listIncidents` → `{ incidents: [...] }`
+  - `maintenance.listMaintenances` → `{ maintenances: [...] }`
+
+  ### User Identity Enrichment
+
+  `RealUser` and `ApplicationUser` types now include `teamIds: string[]` field with team memberships.
+
+  ## Documentation
+
+  See `docs/backend/teams.md` for complete API reference and integration guide.
+
+- 97c5a6b: Add UUID-based collector identification for better multiple collector support
+
+  **Breaking Change**: Existing health check configurations with collectors need to be recreated.
+
+  - Each collector instance now has a unique UUID assigned on creation
+  - Collector results are stored under the UUID key with `_collectorId` and `_assertionFailed` metadata
+  - Auto-charts correctly display separate charts for each collector instance
+  - Charts are now grouped by collector instance with clear headings
+  - Assertion status card shows pass/fail for each collector
+  - Renamed "Success" to "HTTP Success" to clarify it's about HTTP request success
+  - Fixed deletion of collectors not persisting to database
+  - Fixed duplicate React key warnings in auto-chart grid
+
+### Patch Changes
+
+- 97c5a6b: Fix Radix UI accessibility warning in dialog components by adding visually hidden DialogDescription components
+- Updated dependencies [8e43507]
+- Updated dependencies [97c5a6b]
+- Updated dependencies [97c5a6b]
+- Updated dependencies [8e43507]
+- Updated dependencies [8e43507]
+- Updated dependencies [97c5a6b]
+  - @checkstack/ui@0.1.0
+  - @checkstack/auth-frontend@0.1.0
+  - @checkstack/catalog-common@1.0.0
+  - @checkstack/common@0.1.0
+  - @checkstack/healthcheck-common@0.2.0
+  - @checkstack/frontend-api@0.0.4
+  - @checkstack/signal-frontend@0.0.5
+
 ## 0.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -9,13 +9,13 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@checkstack/auth-frontend": "workspace:*",
     "@checkstack/catalog-common": "workspace:*",
     "@checkstack/common": "workspace:*",
     "@checkstack/frontend-api": "workspace:*",
     "@checkstack/healthcheck-common": "workspace:*",
     "@checkstack/signal-frontend": "workspace:*",
     "@checkstack/ui": "workspace:*",
-    "@types/prismjs": "^1.26.5",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",
@@ -28,6 +28,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
+    "@types/prismjs": "^1.26.5",
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
     "@checkstack/tsconfig": "workspace:*",

package/src/auto-charts/AutoChartGrid.tsx

@@ -33,6 +33,9 @@ interface AutoChartGridProps {
 
 /**
  * Main component that renders a grid of auto-generated charts.
+ *
+ * Discovers actual collector instances from run data and creates
+ * separate charts for each instance, grouped with headings.
  */
 export function AutoChartGrid({ context }: AutoChartGridProps) {
   const { schemas, loading } = useStrategySchemas(context.strategyId);
@@ -55,22 +58,247 @@ export function AutoChartGrid({ context }: AutoChartGridProps) {
     return;
   }
 
-  const fields = extractChartFields(schema);
-  if (fields.length === 0) {
+  const schemaFields = extractChartFields(schema);
+  if (schemaFields.length === 0) {
     return;
   }
 
+  // Discover actual collector instances from run data
+  const instanceMap = discoverCollectorInstances(context);
+
+  // Separate strategy-level fields from collector fields
+  const strategyFields = schemaFields.filter((f) => !f.collectorId);
+
+  // Build grouped collector fields
+  const collectorGroups = buildCollectorGroups(schemaFields, instanceMap);
+
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mt-4">
-      {fields.map((field) => (
-        <AutoChartCard key={field.name} field={field} context={context} />
+    <div className="space-y-6 mt-4">
+      {/* Strategy-level fields */}
+      {strategyFields.length > 0 && (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {strategyFields.map((field) => (
+            <AutoChartCard key={field.name} field={field} context={context} />
+          ))}
+        </div>
+      )}
+
+      {/* Collector groups */}
+      {collectorGroups.map((group) => (
+        <CollectorGroup
+          key={group.instanceKey}
+          group={group}
+          context={context}
+        />
       ))}
     </div>
   );
 }
 
+/**
+ * A group of fields for a single collector instance.
+ */
+interface CollectorGroupData {
+  instanceKey: string;
+  collectorId: string;
+  displayName: string;
+  fields: ExpandedChartField[];
+}
+
+/**
+ * Build grouped collector data from schema fields and instance map.
+ */
+function buildCollectorGroups(
+  schemaFields: ChartField[],
+  instanceMap: Record<string, string[]>
+): CollectorGroupData[] {
+  const groups: CollectorGroupData[] = [];
+
+  // Process each collector type
+  for (const [collectorId, instanceKeys] of Object.entries(instanceMap)) {
+    // Get fields for this collector type
+    const collectorFields = schemaFields.filter(
+      (f) => f.collectorId === collectorId
+    );
+    if (collectorFields.length === 0) continue;
+
+    // Create a group for each instance
+    for (const [index, instanceKey] of instanceKeys.entries()) {
+      const displayName =
+        instanceKeys.length === 1
+          ? collectorId.split(".").pop() || collectorId
+          : `${collectorId.split(".").pop() || collectorId} #${index + 1}`;
+
+      groups.push({
+        instanceKey,
+        collectorId,
+        displayName,
+        fields: collectorFields.map((field) => ({
+          ...field,
+          instanceKey,
+        })),
+      });
+    }
+  }
+
+  return groups;
+}
+
+/**
+ * Renders a collector group with heading, assertion status, and field cards.
+ */
+function CollectorGroup({
+  group,
+  context,
+}: {
+  group: CollectorGroupData;
+  context: HealthCheckDiagramSlotContext;
+}) {
+  // Get assertion status for this collector instance
+  const assertionFailed = getAssertionFailed(context, group.instanceKey);
+
+  return (
+    <div>
+      <h4 className="text-sm font-medium text-muted-foreground mb-3 uppercase tracking-wide">
+        {group.displayName}
+      </h4>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {/* Assertion status card */}
+        <AssertionStatusCard assertionFailed={assertionFailed} />
+
+        {/* Field cards */}
+        {group.fields.map((field) => (
+          <AutoChartCard
+            key={`${field.instanceKey}-${field.name}`}
+            field={field}
+            context={context}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Get the _assertionFailed value for a specific collector instance.
+ */
+function getAssertionFailed(
+  context: HealthCheckDiagramSlotContext,
+  instanceKey: string
+): string | undefined {
+  if (context.type === "raw" && context.runs.length > 0) {
+    const latestRun = context.runs[0];
+    const result = latestRun.result as StoredHealthCheckResult | undefined;
+    const collectors = result?.metadata?.collectors as
+      | Record<string, Record<string, unknown>>
+      | undefined;
+    const collectorData = collectors?.[instanceKey];
+    return collectorData?._assertionFailed as string | undefined;
+  }
+  return undefined;
+}
+
+/**
+ * Card showing assertion pass/fail status.
+ */
+function AssertionStatusCard({
+  assertionFailed,
+}: {
+  assertionFailed: string | undefined;
+}) {
+  if (!assertionFailed) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Assertion</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-2 text-green-600">
+            <div className="w-3 h-3 rounded-full bg-green-500" />
+            <span>Passed</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border-red-200 dark:border-red-900">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-red-600">
+          Assertion Failed
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-sm text-red-600 bg-red-50 dark:bg-red-950 px-2 py-1 rounded">
+          {assertionFailed}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * Discover collector instances from actual run data.
+ * Returns a map from base collector ID (type) to array of instance UUIDs.
+ */
+function discoverCollectorInstances(
+  context: HealthCheckDiagramSlotContext
+): Record<string, string[]> {
+  const instanceMap: Record<string, Set<string>> = {};
+
+  const addInstances = (collectors: Record<string, unknown> | undefined) => {
+    if (!collectors || typeof collectors !== "object") return;
+
+    for (const [uuid, data] of Object.entries(collectors)) {
+      // Read the collector type from the stored _collectorId metadata
+      const collectorData = data as Record<string, unknown> | undefined;
+      const collectorId = collectorData?._collectorId as string | undefined;
+
+      if (collectorId) {
+        if (!instanceMap[collectorId]) {
+          instanceMap[collectorId] = new Set();
+        }
+        instanceMap[collectorId].add(uuid);
+      }
+    }
+  };
+
+  if (context.type === "raw") {
+    for (const run of context.runs) {
+      const result = run.result as StoredHealthCheckResult | undefined;
+      const collectors = result?.metadata?.collectors as
+        | Record<string, unknown>
+        | undefined;
+      addInstances(collectors);
+    }
+  } else {
+    for (const bucket of context.buckets) {
+      const collectors = (
+        bucket.aggregatedResult as Record<string, unknown> | undefined
+      )?.collectors as Record<string, unknown> | undefined;
+      addInstances(collectors);
+    }
+  }
+
+  // Convert sets to arrays
+  const result: Record<string, string[]> = {};
+  for (const [collectorId, uuids] of Object.entries(instanceMap)) {
+    result[collectorId] = [...uuids].toSorted();
+  }
+  return result;
+}
+
+/**
+ * Extended ChartField with instance UUID for data lookup.
+ */
+interface ExpandedChartField extends ChartField {
+  /** Instance UUID for data lookup */
+  instanceKey?: string;
+}
+
 interface AutoChartCardProps {
-  field: ChartField;
+  field: ExpandedChartField;
   context: HealthCheckDiagramSlotContext;
 }
 
@@ -91,7 +319,7 @@ function AutoChartCard({ field, context }: AutoChartCardProps) {
 }
 
 interface ChartRendererProps {
-  field: ChartField;
+  field: ExpandedChartField;
   context: HealthCheckDiagramSlotContext;
 }
 
@@ -139,7 +367,7 @@ function ChartRenderer({ field, context }: ChartRendererProps) {
  * Counts how many times each value appears across all runs/buckets.
  */
 function CounterRenderer({ field, context }: ChartRendererProps) {
-  const counts = getValueCounts(field.name, context);
+  const counts = getValueCounts(field.name, context, field.instanceKey);
   const entries = Object.entries(counts);
 
   if (entries.length === 0) {
@@ -184,7 +412,7 @@ function CounterRenderer({ field, context }: ChartRendererProps) {
  * Renders a percentage gauge visualization using Recharts RadialBarChart.
  */
 function GaugeRenderer({ field, context }: ChartRendererProps) {
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
   const numValue =
     typeof value === "number" ? Math.min(100, Math.max(0, value)) : 0;
   const unit = field.unit ?? "%";
@@ -231,7 +459,7 @@ function GaugeRenderer({ field, context }: ChartRendererProps) {
  * Renders a boolean indicator (success/failure).
  */
 function BooleanRenderer({ field, context }: ChartRendererProps) {
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
   const isTrue = value === true;
 
   return (
@@ -252,7 +480,7 @@ function BooleanRenderer({ field, context }: ChartRendererProps) {
  * Renders text value.
  */
 function TextRenderer({ field, context }: ChartRendererProps) {
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
   const displayValue = formatTextValue(value);
 
   return (
@@ -269,7 +497,7 @@ function TextRenderer({ field, context }: ChartRendererProps) {
  * Renders error/status badge.
  */
 function StatusRenderer({ field, context }: ChartRendererProps) {
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
   const hasValue = value !== undefined && value !== null && value !== "";
 
   if (!hasValue) {
@@ -287,7 +515,7 @@ function StatusRenderer({ field, context }: ChartRendererProps) {
  * Renders an area chart for time series data using Recharts AreaChart.
  */
 function LineChartRenderer({ field, context }: ChartRendererProps) {
-  const values = getAllValues(field.name, context);
+  const values = getAllValues(field.name, context, field.instanceKey);
   const unit = field.unit ?? "";
 
   if (values.length === 0) {
@@ -443,7 +671,7 @@ const CHART_COLORS = [
  */
 function PieChartRenderer({ field, context }: ChartRendererProps) {
   // First, try to get a pre-aggregated object value
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
 
   // Determine the data source: use pre-aggregated object or count simple values
   let dataRecord: Record<string, number>;
@@ -453,7 +681,7 @@ function PieChartRenderer({ field, context }: ChartRendererProps) {
     dataRecord = value as Record<string, number>;
   } else {
     // Simple values (like statusCode) - count occurrences
-    dataRecord = getValueCounts(field.name, context);
+    dataRecord = getValueCounts(field.name, context, field.instanceKey);
   }
 
   const entries = Object.entries(dataRecord).slice(0, 8);
@@ -542,7 +770,8 @@ function PieChartRenderer({ field, context }: ChartRendererProps) {
  */
 function getLatestValue(
   fieldName: string,
-  context: HealthCheckDiagramSlotContext
+  context: HealthCheckDiagramSlotContext,
+  collectorId?: string
 ): unknown {
   if (context.type === "raw") {
     const runs = context.runs;
@@ -550,7 +779,7 @@ function getLatestValue(
     // For raw runs, aggregate across all runs for record types
     const allValues = runs.map((run) => {
       const result = run.result as StoredHealthCheckResult | undefined;
-      return getFieldValue(result?.metadata, fieldName);
+      return getFieldValue(result?.metadata, fieldName, collectorId);
     });
 
     // If the values are record types (like statusCodeCounts), combine them
@@ -613,14 +842,15 @@ function combineRecordValues(
  */
 function getValueCounts(
   fieldName: string,
-  context: HealthCheckDiagramSlotContext
+  context: HealthCheckDiagramSlotContext,
+  collectorId?: string
 ): Record<string, number> {
   const counts: Record<string, number> = {};
 
   if (context.type === "raw") {
     for (const run of context.runs) {
       const result = run.result as StoredHealthCheckResult | undefined;
-      const value = getFieldValue(result?.metadata, fieldName);
+      const value = getFieldValue(result?.metadata, fieldName, collectorId);
       if (value !== undefined && value !== null) {
         const key = String(value);
         counts[key] = (counts[key] || 0) + 1;
@@ -631,7 +861,8 @@ function getValueCounts(
     for (const bucket of context.buckets) {
       const value = getFieldValue(
         bucket.aggregatedResult as Record<string, unknown>,
-        fieldName
+        fieldName,
+        collectorId
       );
       if (value !== undefined && value !== null) {
         const key = String(value);
@@ -651,14 +882,15 @@ function getValueCounts(
  */
 function getAllValues(
   fieldName: string,
-  context: HealthCheckDiagramSlotContext
+  context: HealthCheckDiagramSlotContext,
+  collectorId?: string
 ): number[] {
   if (context.type === "raw") {
     return context.runs
       .map((run) => {
         // result is typed as StoredHealthCheckResult with { status, latencyMs, message, metadata }
         const result = run.result as StoredHealthCheckResult;
-        return getFieldValue(result?.metadata, fieldName);
+        return getFieldValue(result?.metadata, fieldName, collectorId);
       })
       .filter((v): v is number => typeof v === "number");
   }
@@ -666,7 +898,8 @@ function getAllValues(
     .map((bucket) =>
       getFieldValue(
         bucket.aggregatedResult as Record<string, unknown>,
-        fieldName
+        fieldName,
+        collectorId
       )
     )
     .filter((v): v is number => typeof v === "number");

package/src/auto-charts/schema-parser.ts

@@ -34,7 +34,7 @@ export type ResultSchema = JsonSchemaBase<ResultSchemaProperty>;
  * Chart field information extracted from JSON Schema.
  */
 export interface ChartField {
-  /** Field path (supports dot notation for nested fields like "collectors.request.responseTimeMs") */
+  /** Field name (simple name for collector fields, path for others) */
   name: string;
   /** Chart type to render */
   chartType: ChartType;
@@ -44,7 +44,7 @@ export interface ChartField {
   unit?: string;
   /** JSON Schema type (number, string, boolean, etc.) */
   schemaType: string;
-  /** Collector ID if this field is from a collector */
+  /** Collector ID if this field is from a collector (used for data lookup) */
   collectorId?: string;
 }
 
@@ -78,7 +78,6 @@ export function extractChartFields(
           // Extract fields from the collector's result schema
           const collectorFields = extractFieldsFromProperties(
             collectorProp.properties,
-            `collectors.${collectorId}`,
             collectorId
           );
           fields.push(...collectorFields);
@@ -101,7 +100,6 @@ export function extractChartFields(
  */
 function extractFieldsFromProperties(
   properties: Record<string, ResultSchemaProperty>,
-  pathPrefix: string,
   collectorId: string
 ): ChartField[] {
   const fields: ChartField[] = [];
@@ -110,8 +108,8 @@ function extractFieldsFromProperties(
     const chartType = prop["x-chart-type"];
     if (!chartType) continue;
 
-    const fullPath = `${pathPrefix}.${fieldName}`;
-    const field = extractSingleField(fullPath, prop);
+    // Use just field name - collectorId is stored separately for data lookup
+    const field = extractSingleField(fieldName, prop);
     field.collectorId = collectorId;
     // Prefix label with collector ID for clarity
     if (!prop["x-chart-label"]?.includes(collectorId)) {
@@ -165,28 +163,53 @@ function formatFieldName(name: string): string {
 
 /**
  * Get the value for a field from a data object.
- * Supports dot-notation paths like "collectors.request.responseTimeMs".
+ * For strategy-level fields, also searches inside collectors as fallback.
+ *
+ * @param data - The metadata object
+ * @param fieldName - Simple field name (no dot notation for collector fields)
+ * @param collectorInstanceId - Optional: if provided, looks in collectors[collectorInstanceId]
  */
 export function getFieldValue(
   data: Record<string, unknown> | undefined,
-  fieldName: string
+  fieldName: string,
+  collectorInstanceId?: string
 ): unknown {
   if (!data) return undefined;
 
-  // Simple case: no dot notation
-  if (!fieldName.includes(".")) {
-    return data[fieldName];
+  // If collectorInstanceId is provided, look in that specific collector's data
+  if (collectorInstanceId) {
+    const collectors = data.collectors as
+      | Record<string, Record<string, unknown>>
+      | undefined;
+    if (collectors && typeof collectors === "object") {
+      const collectorData = collectors[collectorInstanceId];
+      if (collectorData && typeof collectorData === "object") {
+        return collectorData[fieldName];
+      }
+    }
+    return undefined;
   }
 
-  // Dot notation: traverse the path
-  const parts = fieldName.split(".");
-  let current: unknown = data;
+  // For non-collector fields, try direct lookup first
+  const directValue = data[fieldName];
+  if (directValue !== undefined) {
+    return directValue;
+  }
 
-  for (const part of parts) {
-    if (current === null || current === undefined) return undefined;
-    if (typeof current !== "object") return undefined;
-    current = (current as Record<string, unknown>)[part];
+  // Fallback: search all collectors for the field (for strategy schema fields)
+  const collectors = data.collectors as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  if (collectors && typeof collectors === "object") {
+    for (const collectorData of Object.values(collectors)) {
+      if (collectorData && typeof collectorData === "object") {
+        const value = collectorData[fieldName];
+        if (value !== undefined) {
+          return value;
+        }
+      }
+    }
   }
 
-  return current;
+  return undefined;
 }

package/src/auto-charts/useStrategySchemas.ts

@@ -1,5 +1,9 @@
 /**
  * Hook to fetch and cache strategy schemas.
+ *
+ * Fetches both strategy result schemas AND collector result schemas,
+ * merging them into a unified schema where collector schemas are nested
+ * under `properties.collectors.<collectorId>`.
  */
 
 import { useEffect, useState } from "react";
@@ -14,6 +18,9 @@ interface StrategySchemas {
 /**
  * Fetch and cache strategy schemas for auto-chart rendering.
  *
+ * Also fetches collector schemas and merges them into the result schema
+ * so that chart fields from collectors are properly extracted.
+ *
  * @param strategyId - The strategy ID to fetch schemas for
  * @returns Schemas for the strategy, or undefined if not found
  */
@@ -30,13 +37,30 @@ export function useStrategySchemas(strategyId: string): {
 
     async function fetchSchemas() {
       try {
-        const strategies = await api.getStrategies();
+        // Fetch strategy and collectors in parallel
+        const [strategies, collectors] = await Promise.all([
+          api.getStrategies(),
+          api.getCollectors({ strategyId }),
+        ]);
+
         const strategy = strategies.find((s) => s.id === strategyId);
 
         if (!cancelled && strategy) {
+          // Build collector schemas object for nesting under resultSchema.properties.collectors
+          const collectorProperties: Record<string, unknown> = {};
+          for (const collector of collectors) {
+            // Use full ID so it matches stored data keys like "healthcheck-http.request"
+            collectorProperties[collector.id] = collector.resultSchema;
+          }
+
+          // Merge collector schemas into strategy result schema
+          const mergedResultSchema = mergeCollectorSchemas(
+            strategy.resultSchema as Record<string, unknown> | undefined,
+            collectorProperties
+          );
+
           setSchemas({
-            resultSchema:
-              (strategy.resultSchema as Record<string, unknown>) ?? undefined,
+            resultSchema: mergedResultSchema,
             aggregatedResultSchema:
               (strategy.aggregatedResultSchema as Record<string, unknown>) ??
               undefined,
@@ -60,3 +84,49 @@ export function useStrategySchemas(strategyId: string): {
 
   return { schemas, loading };
 }
+
+/**
+ * Merge collector result schemas into a strategy result schema.
+ *
+ * Creates a schema structure where collectors are nested under
+ * `properties.collectors.<collectorId>`, matching the actual data structure
+ * stored by the health check executor.
+ */
+function mergeCollectorSchemas(
+  strategySchema: Record<string, unknown> | undefined,
+  collectorProperties: Record<string, unknown>
+): Record<string, unknown> | undefined {
+  // If no collectors, return original schema
+  if (Object.keys(collectorProperties).length === 0) {
+    return strategySchema;
+  }
+
+  // Build the collectors nested schema
+  const collectorsSchema = {
+    type: "object",
+    properties: collectorProperties,
+  };
+
+  // If no strategy schema, create one just with collectors
+  if (!strategySchema) {
+    return {
+      type: "object",
+      properties: {
+        collectors: collectorsSchema,
+      },
+    };
+  }
+
+  // Merge: add collectors to existing properties
+  const existingProps = (strategySchema.properties ?? {}) as Record<
+    string,
+    unknown
+  >;
+  return {
+    ...strategySchema,
+    properties: {
+      ...existingProps,
+      collectors: collectorsSchema,
+    },
+  };
+}

package/src/components/AssertionBuilder.tsx

@@ -302,15 +302,22 @@ export const AssertionBuilder: React.FC<AssertionBuilderProps> = ({
     <div className="space-y-4">
       {assertions.map((assertion, index) => {
         const field = getFieldByPath(assertion.field);
-        const operators = field ? OPERATORS[field.type] : [];
+        // Safely get operators with fallback to empty array
+        const operators = field ? OPERATORS[field.type] ?? [] : [];
         const needsValue = !VALUE_LESS_OPERATORS.has(assertion.operator);
 
+        // Check if current values match available options (prevents Radix UI crash)
+        const fieldValueValid = fields.some((f) => f.path === assertion.field);
+        const operatorValueValid = operators.some(
+          (op) => op.value === assertion.operator
+        );
+
         return (
           <div key={index} className="flex items-start gap-2 flex-wrap">
             {/* Field selector */}
             <div className="flex-1 min-w-[120px]">
               <Select
-                value={assertion.field}
+                value={fieldValueValid ? assertion.field : undefined}
                 onValueChange={(v) => handleFieldChange(index, v)}
               >
                 <SelectTrigger>
@@ -340,7 +347,7 @@ export const AssertionBuilder: React.FC<AssertionBuilderProps> = ({
             {/* Operator selector */}
             <div className="flex-1 min-w-[100px]">
               <Select
-                value={assertion.operator}
+                value={operatorValueValid ? assertion.operator : undefined}
                 onValueChange={(v) => handleOperatorChange(index, v)}
               >
                 <SelectTrigger>

package/src/components/CollectorList.tsx

@@ -100,6 +100,7 @@ export const CollectorList: React.FC<CollectorListProps> = ({
     if (!collector) return;
 
     const newEntry: CollectorConfigEntry = {
+      id: crypto.randomUUID(),
       collectorId,
       config: {},
       assertions: [],
@@ -111,6 +112,11 @@ export const CollectorList: React.FC<CollectorListProps> = ({
   const handleRemove = (index: number) => {
     const updated = [...configuredCollectors];
     updated.splice(index, 1);
+
+    // Reset validity map to prevent stale entries after index shift
+    // The DynamicForm components will re-report their validity on next render
+    setValidityMap({});
+
     onChange(updated);
   };
 

package/src/components/HealthCheckEditor.tsx

@@ -13,12 +13,14 @@ import {
   useToast,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
 } from "@checkstack/ui";
 import { useCollectors } from "../hooks/useCollectors";
 import { CollectorList } from "./CollectorList";
+import { TeamAccessEditor } from "@checkstack/auth-frontend";
 
 interface HealthCheckEditorProps {
   strategies: HealthCheckStrategyDto[];
@@ -82,7 +84,7 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
         strategyId,
         intervalSeconds: Number.parseInt(interval, 10),
         config,
-        collectors: collectors.length > 0 ? collectors : undefined,
+        collectors, // Always send the array, even if empty, to allow clearing
       });
     } catch (error) {
       const message =
@@ -102,6 +104,11 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
             <DialogTitle>
               {initialData ? "Edit Health Check" : "Create Health Check"}
             </DialogTitle>
+            <DialogDescription className="sr-only">
+              {initialData
+                ? "Modify the settings for this health check configuration"
+                : "Configure a new health check to monitor your services"}
+            </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-6 py-4 max-h-[70vh] overflow-y-auto">
@@ -148,6 +155,16 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
                 onValidChange={setCollectorsValid}
               />
             )}
+
+            {/* Team Access Editor - only shown for existing configurations */}
+            {initialData?.id && (
+              <TeamAccessEditor
+                resourceType="healthcheck.configuration"
+                resourceId={initialData.id}
+                compact
+                expanded
+              />
+            )}
           </div>
 
           <DialogFooter>

package/src/components/HealthCheckRunsTable.tsx

@@ -300,7 +300,7 @@ function CollectorResultCard({
 function formatKey(key: string): string {
   return key
     .replaceAll(/([a-z])([A-Z])/g, "$1 $2")
-    .replaceAll(/^./, (c) => c.toUpperCase());
+    .replace(/^./, (c) => c.toUpperCase());
 }
 
 /**

package/src/components/SystemHealthCheckAssignment.tsx

@@ -9,6 +9,7 @@ import {
   Button,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -79,10 +80,11 @@ export const SystemHealthCheckAssignment: React.FC<Props> = ({
   const loadData = async () => {
     setLoading(true);
     try {
-      const [allConfigs, systemAssociations] = await Promise.all([
-        api.getConfigurations(),
-        api.getSystemAssociations({ systemId }),
-      ]);
+      const [{ configurations: allConfigs }, systemAssociations] =
+        await Promise.all([
+          api.getConfigurations(),
+          api.getSystemAssociations({ systemId }),
+        ]);
       setConfigs(allConfigs);
       setAssociations(systemAssociations);
     } catch (error) {
@@ -741,6 +743,9 @@ export const SystemHealthCheckAssignment: React.FC<Props> = ({
         <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>Health Check Assignments</DialogTitle>
+            <DialogDescription className="sr-only">
+              Manage health check assignments for this system
+            </DialogDescription>
           </DialogHeader>
 
           {loading ? (

package/src/pages/HealthCheckConfigPage.tsx

@@ -45,7 +45,7 @@ const HealthCheckConfigPageContent = () => {
   const [isDeleting, setIsDeleting] = useState(false);
 
   const fetchData = async () => {
-    const [configs, strats] = await Promise.all([
+    const [{ configurations: configs }, strats] = await Promise.all([
       api.getConfigurations(),
       api.getStrategies(),
     ]);