@checkstack/healthcheck-frontend 0.0.3 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @checkstack/healthcheck-frontend
 
+## 0.1.0
+
+### Minor Changes
+
+- f5b1f49: Added support for nested collector result display in auto-charts and history table.
+
+  - Updated `schema-parser.ts` to traverse `collectors.*` nested schemas and extract chart fields with dot-notation paths
+  - Added `getFieldValue()` support for dot-notation paths like `collectors.request.responseTimeMs`
+  - Added `ExpandedResultView` component to `HealthCheckRunsTable.tsx` that displays:
+    - Connection info (status, latency, connection time)
+    - Per-collector results as structured cards with key-value pairs
+
+- f5b1f49: Added JSONPath assertions for response body validation and fully qualified strategy IDs.
+
+  **JSONPath Assertions:**
+
+  - Added `healthResultJSONPath()` factory in healthcheck-common for fields supporting JSONPath queries
+  - Extended AssertionBuilder with jsonpath field type showing path input (e.g., `$.data.status`)
+  - Added `jsonPath` field to `CollectorAssertionSchema` for persistence
+  - HTTP Request collector body field now supports JSONPath assertions
+
+  **Fully Qualified Strategy IDs:**
+
+  - HealthCheckRegistry now uses scoped factories like CollectorRegistry
+  - Strategies are stored with `pluginId.strategyId` format
+  - Added `getStrategiesWithMeta()` method to HealthCheckRegistry interface
+  - Router returns qualified IDs so frontend can correctly fetch collectors
+
+  **UI Improvements:**
+
+  - Save button disabled when collector configs have invalid required fields
+  - Fixed nested button warning in CollectorList accordion
+
+### Patch Changes
+
+- Updated dependencies [f5b1f49]
+- Updated dependencies [f5b1f49]
+- Updated dependencies [f5b1f49]
+- Updated dependencies [f5b1f49]
+  - @checkstack/healthcheck-common@0.1.0
+  - @checkstack/common@0.0.3
+  - @checkstack/ui@0.0.4
+  - @checkstack/catalog-common@0.0.3
+  - @checkstack/frontend-api@0.0.3
+  - @checkstack/signal-frontend@0.0.4
+
 ## 0.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

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

@@ -3,15 +3,38 @@
  *
  * Parses JSON Schema objects and extracts x-chart-type, x-chart-label,
  * and x-chart-unit metadata for auto-chart rendering.
+ *
+ * Supports nested schemas under `collectors.*` for per-collector metrics.
  */
 
 import type { ChartType } from "@checkstack/healthcheck-common";
+import type {
+  JsonSchemaPropertyCore,
+  JsonSchemaBase,
+} from "@checkstack/common";
+
+/**
+ * JSON Schema property with healthcheck result-specific x-* extensions.
+ * Uses the generic core type for proper recursive typing.
+ */
+export interface ResultSchemaProperty
+  extends JsonSchemaPropertyCore<ResultSchemaProperty> {
+  // Result-specific x-* extensions for chart rendering
+  "x-chart-type"?: ChartType;
+  "x-chart-label"?: string;
+  "x-chart-unit"?: string;
+}
+
+/**
+ * JSON Schema for result schemas with chart metadata.
+ */
+export type ResultSchema = JsonSchemaBase<ResultSchemaProperty>;
 
 /**
  * Chart field information extracted from JSON Schema.
  */
 export interface ChartField {
-  /** Field name in the schema */
+  /** Field path (supports dot notation for nested fields like "collectors.request.responseTimeMs") */
   name: string;
   /** Chart type to render */
   chartType: ChartType;
@@ -21,33 +44,15 @@ export interface ChartField {
   unit?: string;
   /** JSON Schema type (number, string, boolean, etc.) */
   schemaType: string;
-}
-
-/**
- * JSON Schema property with potential chart metadata.
- */
-interface JsonSchemaProperty {
-  type?: string;
-  "x-chart-type"?: ChartType;
-  "x-chart-label"?: string;
-  "x-chart-unit"?: string;
-  items?: JsonSchemaProperty;
-  additionalProperties?: JsonSchemaProperty;
-}
-
-/**
- * JSON Schema object structure.
- */
-interface JsonSchema {
-  type?: string;
-  properties?: Record<string, JsonSchemaProperty>;
+  /** Collector ID if this field is from a collector */
+  collectorId?: string;
 }
 
 /**
  * Extract chart fields from a JSON Schema.
  *
  * Looks for properties with x-chart-type metadata and extracts
- * relevant chart configuration.
+ * relevant chart configuration. Supports nested collector schemas.
  *
  * @param schema - JSON Schema object
  * @returns Array of chart fields with metadata
@@ -57,41 +62,102 @@ export function extractChartFields(
 ): ChartField[] {
   if (!schema) return [];
 
-  const typed = schema as JsonSchema;
+  const typed = schema as ResultSchema;
   if (typed.type !== "object" || !typed.properties) return [];
 
   const fields: ChartField[] = [];
 
   for (const [name, prop] of Object.entries(typed.properties)) {
+    // Check for nested collector schemas
+    if (name === "collectors" && prop.type === "object" && prop.properties) {
+      // Traverse each collector's schema
+      for (const [collectorId, collectorProp] of Object.entries(
+        prop.properties
+      )) {
+        if (collectorProp.type === "object" && collectorProp.properties) {
+          // Extract fields from the collector's result schema
+          const collectorFields = extractFieldsFromProperties(
+            collectorProp.properties,
+            `collectors.${collectorId}`,
+            collectorId
+          );
+          fields.push(...collectorFields);
+        }
+      }
+      continue;
+    }
+
     const chartType = prop["x-chart-type"];
     if (!chartType) continue;
 
-    // Determine the underlying schema type
-    let schemaType = prop.type ?? "unknown";
-    if (prop.type === "array" && prop.items?.type) {
-      schemaType = `array<${prop.items.type}>`;
-    }
-    if (prop.additionalProperties?.type) {
-      schemaType = `record<${prop.additionalProperties.type}>`;
-    }
+    fields.push(extractSingleField(name, prop));
+  }
+
+  return fields;
+}
 
-    fields.push({
-      name,
-      chartType,
-      label: prop["x-chart-label"] ?? formatFieldName(name),
-      unit: prop["x-chart-unit"],
-      schemaType,
-    });
+/**
+ * Extract fields from a nested properties object.
+ */
+function extractFieldsFromProperties(
+  properties: Record<string, ResultSchemaProperty>,
+  pathPrefix: string,
+  collectorId: string
+): ChartField[] {
+  const fields: ChartField[] = [];
+
+  for (const [fieldName, prop] of Object.entries(properties)) {
+    const chartType = prop["x-chart-type"];
+    if (!chartType) continue;
+
+    const fullPath = `${pathPrefix}.${fieldName}`;
+    const field = extractSingleField(fullPath, prop);
+    field.collectorId = collectorId;
+    // Prefix label with collector ID for clarity
+    if (!prop["x-chart-label"]?.includes(collectorId)) {
+      field.label = `${collectorId}: ${field.label}`;
+    }
+    fields.push(field);
   }
 
   return fields;
 }
 
+/**
+ * Extract a single field from a property.
+ */
+function extractSingleField(
+  name: string,
+  prop: ResultSchemaProperty
+): ChartField {
+  let schemaType = prop.type ?? "unknown";
+  if (prop.type === "array" && prop.items?.type) {
+    schemaType = `array<${prop.items.type}>`;
+  }
+  if (
+    prop.additionalProperties &&
+    typeof prop.additionalProperties === "object" &&
+    prop.additionalProperties.type
+  ) {
+    schemaType = `record<${prop.additionalProperties.type}>`;
+  }
+
+  return {
+    name,
+    chartType: prop["x-chart-type"]!,
+    label: prop["x-chart-label"] ?? formatFieldName(name),
+    unit: prop["x-chart-unit"],
+    schemaType,
+  };
+}
+
 /**
  * Convert camelCase or snake_case field name to human-readable label.
  */
 function formatFieldName(name: string): string {
-  return name
+  // Extract just the field name if it's a path
+  const baseName = name.includes(".") ? name.split(".").pop()! : name;
+  return baseName
     .replaceAll(/([a-z])([A-Z])/g, "$1 $2") // camelCase
     .replaceAll("_", " ") // snake_case
     .replaceAll(/\b\w/g, (c) => c.toUpperCase()); // Capitalize
@@ -99,11 +165,28 @@ function formatFieldName(name: string): string {
 
 /**
  * Get the value for a field from a data object.
+ * Supports dot-notation paths like "collectors.request.responseTimeMs".
  */
 export function getFieldValue(
   data: Record<string, unknown> | undefined,
   fieldName: string
 ): unknown {
   if (!data) return undefined;
-  return data[fieldName];
+
+  // Simple case: no dot notation
+  if (!fieldName.includes(".")) {
+    return data[fieldName];
+  }
+
+  // Dot notation: traverse the path
+  const parts = fieldName.split(".");
+  let current: unknown = data;
+
+  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];
+  }
+
+  return current;
 }

package/src/components/AssertionBuilder.tsx

@@ -0,0 +1,425 @@
+import React, { useMemo } from "react";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Input,
+} from "@checkstack/ui";
+import type {
+  JsonSchemaBase,
+  JsonSchemaPropertyBase,
+} from "@checkstack/common";
+import { Plus, Trash2 } from "lucide-react";
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+// Use base types for assertion building - works with any JSON Schema
+type JsonSchema = JsonSchemaBase<JsonSchemaPropertyBase>;
+type JsonSchemaProperty = JsonSchemaPropertyBase;
+
+type FieldType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "enum"
+  | "array"
+  | "jsonpath";
+
+export interface AssertableField {
+  path: string;
+  displayName: string;
+  type: FieldType;
+  enumValues?: unknown[];
+  /** For jsonpath fields, the original field path (e.g., "body") */
+  sourceField?: string;
+}
+
+export interface Assertion {
+  field: string;
+  operator: string;
+  value?: unknown;
+  /** JSONPath expression for jsonpath-type fields */
+  jsonPath?: string;
+}
+
+interface AssertionBuilderProps {
+  resultSchema: JsonSchema;
+  assertions: Assertion[];
+  onChange: (assertions: Assertion[]) => void;
+}
+
+// ============================================================================
+// OPERATORS BY FIELD TYPE
+// ============================================================================
+
+const OPERATORS: Record<FieldType, { value: string; label: string }[]> = {
+  string: [
+    { value: "equals", label: "Equals" },
+    { value: "notEquals", label: "Not Equals" },
+    { value: "contains", label: "Contains" },
+    { value: "startsWith", label: "Starts With" },
+    { value: "endsWith", label: "Ends With" },
+    { value: "matches", label: "Matches (Regex)" },
+    { value: "isEmpty", label: "Is Empty" },
+  ],
+  number: [
+    { value: "equals", label: "Equals" },
+    { value: "notEquals", label: "Not Equals" },
+    { value: "lessThan", label: "Less Than" },
+    { value: "lessThanOrEqual", label: "Less Than or Equal" },
+    { value: "greaterThan", label: "Greater Than" },
+    { value: "greaterThanOrEqual", label: "Greater Than or Equal" },
+  ],
+  boolean: [
+    { value: "isTrue", label: "Is True" },
+    { value: "isFalse", label: "Is False" },
+  ],
+  enum: [{ value: "equals", label: "Equals" }],
+  array: [
+    { value: "exists", label: "Exists" },
+    { value: "notExists", label: "Not Exists" },
+  ],
+  jsonpath: [
+    { value: "exists", label: "Exists" },
+    { value: "notExists", label: "Not Exists" },
+    { value: "equals", label: "Equals" },
+    { value: "notEquals", label: "Not Equals" },
+    { value: "contains", label: "Contains" },
+    { value: "greaterThan", label: "Greater Than" },
+    { value: "lessThan", label: "Less Than" },
+  ],
+};
+
+// Operators that don't need a value input
+const VALUE_LESS_OPERATORS = new Set([
+  "isEmpty",
+  "isTrue",
+  "isFalse",
+  "exists",
+  "notExists",
+]);
+
+// ============================================================================
+// SCHEMA EXTRACTION
+// ============================================================================
+
+/**
+ * Extract assertable fields from a JSON Schema, supporting nested objects.
+ * Reuses the JsonSchemaProperty type from @checkstack/ui DynamicForm.
+ */
+export function extractAssertableFields(
+  schema: JsonSchema,
+  prefix = ""
+): AssertableField[] {
+  const fields: AssertableField[] = [];
+
+  if (!schema.properties) return fields;
+
+  for (const [key, prop] of Object.entries(schema.properties)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+    const displayName = path
+      .split(".")
+      .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
+      .join(" → ");
+
+    // Handle enum type
+    if (prop.enum && prop.enum.length > 0) {
+      fields.push({
+        path,
+        displayName,
+        type: "enum",
+        enumValues: prop.enum,
+      });
+      continue;
+    }
+
+    // Determine type (handle type arrays like ["string", "null"] if present)
+    const type = prop.type;
+
+    switch (type) {
+      case "string": {
+        // Check for x-jsonpath metadata
+        const hasJsonPath =
+          (prop as Record<string, unknown>)["x-jsonpath"] === true;
+        if (hasJsonPath) {
+          fields.push({
+            path: `${path}.$`,
+            displayName: `${displayName} (JSONPath)`,
+            type: "jsonpath",
+            sourceField: path,
+          });
+        }
+        fields.push({ path, displayName, type: "string" });
+        break;
+      }
+      case "number":
+      case "integer": {
+        fields.push({ path, displayName, type: "number" });
+        break;
+      }
+      case "boolean": {
+        fields.push({ path, displayName, type: "boolean" });
+        break;
+      }
+      case "array": {
+        // Add array-level assertions
+        fields.push({ path, displayName, type: "array" });
+        // If array has typed items with properties, add item-level fields
+        if (
+          prop.items &&
+          typeof prop.items === "object" &&
+          "properties" in prop.items
+        ) {
+          const itemsWithProps = prop.items as JsonSchemaProperty;
+          if (itemsWithProps.properties) {
+            const itemFields = extractAssertableFields(
+              { properties: itemsWithProps.properties },
+              `${path}[*]`
+            );
+            fields.push(...itemFields);
+          }
+        }
+        break;
+      }
+      case "object": {
+        // Recurse into nested objects
+        if (prop.properties) {
+          const nestedFields = extractAssertableFields(
+            { properties: prop.properties },
+            path
+          );
+          fields.push(...nestedFields);
+        }
+        break;
+      }
+      default: {
+        // Unknown type - treat as string for flexibility
+        if (type) {
+          fields.push({ path, displayName, type: "string" });
+        }
+      }
+    }
+  }
+
+  return fields;
+}
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * AssertionBuilder component for creating assertions based on JSON Schema.
+ * Automatically derives available fields and operators from the result schema.
+ */
+export const AssertionBuilder: React.FC<AssertionBuilderProps> = ({
+  resultSchema,
+  assertions,
+  onChange,
+}) => {
+  // Extract assertable fields from schema
+  const fields = useMemo(
+    () => extractAssertableFields(resultSchema),
+    [resultSchema]
+  );
+
+  const getFieldByPath = (path: string) => {
+    return fields.find((f) => f.path === path);
+  };
+
+  const handleAddAssertion = () => {
+    if (fields.length === 0) return;
+
+    const firstField = fields[0];
+    const operators = OPERATORS[firstField.type];
+
+    onChange([
+      ...assertions,
+      {
+        field: firstField.path,
+        operator: operators[0].value,
+        value: undefined,
+      },
+    ]);
+  };
+
+  const handleRemoveAssertion = (index: number) => {
+    const updated = [...assertions];
+    updated.splice(index, 1);
+    onChange(updated);
+  };
+
+  const handleFieldChange = (index: number, fieldPath: string) => {
+    const field = getFieldByPath(fieldPath);
+    if (!field) return;
+
+    const operators = OPERATORS[field.type];
+    const updated = [...assertions];
+    updated[index] = {
+      field: fieldPath,
+      operator: operators[0].value,
+      value: undefined,
+    };
+    onChange(updated);
+  };
+
+  const handleOperatorChange = (index: number, operator: string) => {
+    const updated = [...assertions];
+    updated[index] = { ...updated[index], operator };
+    // Clear value if operator doesn't need one
+    if (VALUE_LESS_OPERATORS.has(operator)) {
+      updated[index].value = undefined;
+    }
+    onChange(updated);
+  };
+
+  const handleValueChange = (index: number, value: unknown) => {
+    const updated = [...assertions];
+    updated[index] = { ...updated[index], value };
+    onChange(updated);
+  };
+
+  const handleJsonPathChange = (index: number, jsonPath: string) => {
+    const updated = [...assertions];
+    updated[index] = { ...updated[index], jsonPath };
+    onChange(updated);
+  };
+
+  if (fields.length === 0) {
+    return (
+      <div className="text-muted-foreground text-sm">
+        No assertable fields available in result schema.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {assertions.map((assertion, index) => {
+        const field = getFieldByPath(assertion.field);
+        const operators = field ? OPERATORS[field.type] : [];
+        const needsValue = !VALUE_LESS_OPERATORS.has(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}
+                onValueChange={(v) => handleFieldChange(index, v)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select field..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {fields.map((f) => (
+                    <SelectItem key={f.path} value={f.path}>
+                      {f.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* JSONPath input (for jsonpath fields) */}
+            {field?.type === "jsonpath" && (
+              <div className="flex-1 min-w-[120px]">
+                <Input
+                  value={assertion.jsonPath ?? ""}
+                  onChange={(e) => handleJsonPathChange(index, e.target.value)}
+                  placeholder="$.path.to.value"
+                />
+              </div>
+            )}
+
+            {/* Operator selector */}
+            <div className="flex-1 min-w-[100px]">
+              <Select
+                value={assertion.operator}
+                onValueChange={(v) => handleOperatorChange(index, v)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select operator..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {operators.map((op) => (
+                    <SelectItem key={op.value} value={op.value}>
+                      {op.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Value input */}
+            {needsValue && (
+              <div className="flex-1 min-w-[120px]">
+                {field?.type === "enum" && field.enumValues ? (
+                  <Select
+                    value={String(assertion.value ?? "")}
+                    onValueChange={(v) => handleValueChange(index, v)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select value..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {field.enumValues.map((v) => (
+                        <SelectItem key={String(v)} value={String(v)}>
+                          {String(v)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : field?.type === "number" ? (
+                  <Input
+                    type="number"
+                    value={(assertion.value as number) ?? ""}
+                    onChange={(e) =>
+                      handleValueChange(
+                        index,
+                        e.target.value ? Number(e.target.value) : undefined
+                      )
+                    }
+                    placeholder="Value"
+                  />
+                ) : (
+                  <Input
+                    value={String(assertion.value ?? "")}
+                    onChange={(e) => handleValueChange(index, e.target.value)}
+                    placeholder="Value"
+                  />
+                )}
+              </div>
+            )}
+
+            {/* Remove button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-destructive hover:text-destructive"
+              onClick={() => handleRemoveAssertion(index)}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        );
+      })}
+
+      {/* Add assertion button */}
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleAddAssertion}
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add Assertion
+      </Button>
+    </div>
+  );
+};

package/src/components/CollectorList.tsx

@@ -0,0 +1,303 @@
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  CollectorDto,
+  CollectorConfigEntry,
+} from "@checkstack/healthcheck-common";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  DynamicForm,
+  Badge,
+} from "@checkstack/ui";
+import { Plus, Trash2 } from "lucide-react";
+import { isBuiltInCollector } from "../hooks/useCollectors";
+import { AssertionBuilder, type Assertion } from "./AssertionBuilder";
+
+interface CollectorListProps {
+  strategyId: string;
+  availableCollectors: CollectorDto[];
+  configuredCollectors: CollectorConfigEntry[];
+  onChange: (collectors: CollectorConfigEntry[]) => void;
+  loading?: boolean;
+  /** Called when collector form validity changes */
+  onValidChange?: (isValid: boolean) => void;
+}
+
+/**
+ * Component for managing collector configurations within a health check.
+ * Shows currently configured collectors and allows adding new ones.
+ */
+export const CollectorList: React.FC<CollectorListProps> = ({
+  strategyId,
+  availableCollectors,
+  configuredCollectors,
+  onChange,
+  loading,
+  onValidChange,
+}) => {
+  // Track validity state per collector index
+  const [validityMap, setValidityMap] = useState<Record<number, boolean>>({});
+
+  // Compute overall validity and report changes
+  useEffect(() => {
+    if (!onValidChange) return;
+
+    // All collectors must be valid (or have no config schema)
+    const isValid = configuredCollectors.every((_, index) => {
+      // If no validity recorded for this collector, assume valid (no schema)
+      return validityMap[index] !== false;
+    });
+
+    onValidChange(isValid);
+  }, [validityMap, configuredCollectors, onValidChange]);
+
+  const handleCollectorValidChange = useCallback(
+    (index: number, isValid: boolean) => {
+      setValidityMap((prev) => ({ ...prev, [index]: isValid }));
+    },
+    []
+  );
+  // Separate built-in and external collectors
+  const builtInCollectors = availableCollectors.filter((c) =>
+    isBuiltInCollector(c.id, strategyId)
+  );
+  const externalCollectors = availableCollectors.filter(
+    (c) => !isBuiltInCollector(c.id, strategyId)
+  );
+
+  // Get collectors that can still be added
+  const getAddableCollectors = () => {
+    const configuredIds = new Set(
+      configuredCollectors.map((c) => c.collectorId)
+    );
+
+    return availableCollectors.filter((c) => {
+      // Already configured?
+      if (configuredIds.has(c.id)) {
+        // Can add multiple?
+        return c.allowMultiple;
+      }
+      return true;
+    });
+  };
+
+  const addableCollectors = getAddableCollectors();
+
+  const handleAdd = (collectorId: string) => {
+    const collector = availableCollectors.find((c) => c.id === collectorId);
+    if (!collector) return;
+
+    const newEntry: CollectorConfigEntry = {
+      collectorId,
+      config: {},
+      assertions: [],
+    };
+
+    onChange([...configuredCollectors, newEntry]);
+  };
+
+  const handleRemove = (index: number) => {
+    const updated = [...configuredCollectors];
+    updated.splice(index, 1);
+    onChange(updated);
+  };
+
+  const handleConfigChange = (
+    index: number,
+    config: Record<string, unknown>
+  ) => {
+    const updated = [...configuredCollectors];
+    updated[index] = { ...updated[index], config };
+    onChange(updated);
+  };
+
+  const handleAssertionsChange = (index: number, assertions: Assertion[]) => {
+    const updated = [...configuredCollectors];
+    updated[index] = { ...updated[index], assertions };
+    onChange(updated);
+  };
+
+  const getCollectorDetails = (collectorId: string) => {
+    return availableCollectors.find((c) => c.id === collectorId);
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Check Items</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-muted-foreground text-sm">
+            Loading collectors...
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle className="text-base">Check Items</CardTitle>
+        {addableCollectors.length > 0 && (
+          <Select value="" onValueChange={handleAdd}>
+            <SelectTrigger className="w-[200px]">
+              <Plus className="h-4 w-4 mr-2" />
+              <SelectValue placeholder="Add collector..." />
+            </SelectTrigger>
+            <SelectContent>
+              {/* Built-in collectors first */}
+              {builtInCollectors.length > 0 && (
+                <>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                    Built-in
+                  </div>
+                  {builtInCollectors
+                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
+                    .map((collector) => (
+                      <SelectItem key={collector.id} value={collector.id}>
+                        <div className="flex items-center gap-2">
+                          <span>{collector.displayName}</span>
+                          {collector.allowMultiple && (
+                            <Badge variant="outline" className="text-xs">
+                              Multiple
+                            </Badge>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+              {/* External collectors */}
+              {externalCollectors.length > 0 && (
+                <>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                    External
+                  </div>
+                  {externalCollectors
+                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
+                    .map((collector) => (
+                      <SelectItem key={collector.id} value={collector.id}>
+                        <div className="flex items-center gap-2">
+                          <span>{collector.displayName}</span>
+                          {collector.allowMultiple && (
+                            <Badge variant="outline" className="text-xs">
+                              Multiple
+                            </Badge>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+            </SelectContent>
+          </Select>
+        )}
+      </CardHeader>
+      <CardContent>
+        {configuredCollectors.length === 0 ? (
+          <div className="text-muted-foreground text-sm text-center py-4">
+            No check items configured. Add a collector to define what to check.
+          </div>
+        ) : (
+          <Accordion type="multiple" className="w-full">
+            {configuredCollectors.map((entry, index) => {
+              const collector = getCollectorDetails(entry.collectorId);
+              const isBuiltIn = isBuiltInCollector(
+                entry.collectorId,
+                strategyId
+              );
+
+              return (
+                <AccordionItem key={index} value={`item-${index}`}>
+                  <AccordionTrigger className="hover:no-underline">
+                    <div className="flex items-center gap-2 flex-1">
+                      <span className="font-medium">
+                        {collector?.displayName || entry.collectorId}
+                      </span>
+                      {isBuiltIn && (
+                        <Badge variant="secondary" className="text-xs">
+                          Built-in
+                        </Badge>
+                      )}
+                    </div>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      className="inline-flex items-center justify-center rounded-md h-8 w-8 text-destructive hover:text-destructive hover:bg-accent cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemove(index);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.stopPropagation();
+                          handleRemove(index);
+                        }
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <div className="space-y-6 pt-4">
+                      {/* Configuration Section */}
+                      {collector?.configSchema && (
+                        <div className="space-y-4">
+                          <Label className="text-sm font-medium">
+                            Configuration
+                          </Label>
+                          <DynamicForm
+                            schema={collector.configSchema}
+                            value={entry.config}
+                            onChange={(config) =>
+                              handleConfigChange(index, config)
+                            }
+                            onValidChange={(isValid) =>
+                              handleCollectorValidChange(index, isValid)
+                            }
+                          />
+                        </div>
+                      )}
+
+                      {/* Assertion Builder Section */}
+                      {collector?.resultSchema && (
+                        <div className="space-y-4">
+                          <Label className="text-sm font-medium">
+                            Assertions
+                          </Label>
+                          <AssertionBuilder
+                            resultSchema={collector.resultSchema}
+                            assertions={
+                              (entry.assertions as unknown as Assertion[]) ?? []
+                            }
+                            onChange={(assertions) =>
+                              handleAssertionsChange(index, assertions)
+                            }
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+          </Accordion>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/HealthCheckEditor.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   HealthCheckConfiguration,
   HealthCheckStrategyDto,
   CreateHealthCheckConfiguration,
+  CollectorConfigEntry,
 } from "@checkstack/healthcheck-common";
 import {
   Button,
@@ -16,6 +17,8 @@ import {
   DialogTitle,
   DialogFooter,
 } from "@checkstack/ui";
+import { useCollectors } from "../hooks/useCollectors";
+import { CollectorList } from "./CollectorList";
 
 interface HealthCheckEditorProps {
   strategies: HealthCheckStrategyDto[];
@@ -40,20 +43,36 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
   const [config, setConfig] = useState<Record<string, unknown>>(
     (initialData?.config as Record<string, unknown>) || {}
   );
+  const [collectors, setCollectors] = useState<CollectorConfigEntry[]>(
+    initialData?.collectors || []
+  );
 
   const toast = useToast();
   const [loading, setLoading] = useState(false);
+  const [collectorsValid, setCollectorsValid] = useState(true);
+
+  // Fetch available collectors for the selected strategy
+  const { collectors: availableCollectors, loading: collectorsLoading } =
+    useCollectors(strategyId);
 
   // Reset form when dialog opens with new data
-  React.useEffect(() => {
+  useEffect(() => {
     if (open) {
       setName(initialData?.name || "");
       setStrategyId(initialData?.strategyId || "");
       setInterval(initialData?.intervalSeconds?.toString() || "60");
       setConfig((initialData?.config as Record<string, unknown>) || {});
+      setCollectors(initialData?.collectors || []);
     }
   }, [open, initialData]);
 
+  // Clear collectors when strategy changes (new strategy = different collectors)
+  const handleStrategyChange = (id: string) => {
+    setStrategyId(id);
+    setConfig({});
+    setCollectors([]);
+  };
+
   const handleSave = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -63,6 +82,7 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
         strategyId,
         intervalSeconds: Number.parseInt(interval, 10),
         config,
+        collectors: collectors.length > 0 ? collectors : undefined,
       });
     } catch (error) {
       const message =
@@ -84,7 +104,7 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
             </DialogTitle>
           </DialogHeader>
 
-          <div className="space-y-4 py-4">
+          <div className="space-y-6 py-4 max-h-[70vh] overflow-y-auto">
             <div className="space-y-2">
               <Label htmlFor="name">Name</Label>
               <Input
@@ -111,21 +131,30 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
               label="Strategy"
               plugins={strategies}
               selectedPluginId={strategyId}
-              onPluginChange={(id) => {
-                setStrategyId(id);
-                setConfig({});
-              }}
+              onPluginChange={handleStrategyChange}
               config={config}
               onConfigChange={setConfig}
               disabled={!!initialData}
             />
+
+            {/* Collector Configuration Section */}
+            {strategyId && (
+              <CollectorList
+                strategyId={strategyId}
+                availableCollectors={availableCollectors}
+                configuredCollectors={collectors}
+                onChange={setCollectors}
+                loading={collectorsLoading}
+                onValidChange={setCollectorsValid}
+              />
+            )}
           </div>
 
           <DialogFooter>
             <Button type="button" variant="outline" onClick={onCancel}>
               Cancel
             </Button>
-            <Button type="submit" disabled={loading}>
+            <Button type="submit" disabled={loading || !collectorsValid}>
               {loading ? "Saving..." : "Save"}
             </Button>
           </DialogFooter>

package/src/components/HealthCheckRunsTable.tsx

@@ -153,12 +153,7 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                         colSpan={calculatedColSpan}
                         className="bg-muted/30 p-4"
                       >
-                        <div className="space-y-2">
-                          <h4 className="text-sm font-medium">Result Data</h4>
-                          <pre className="text-xs bg-card rounded-md p-3 overflow-auto max-h-64 border">
-                            {JSON.stringify(run.result, undefined, 2)}
-                          </pre>
-                        </div>
+                        <ExpandedResultView result={run.result} />
                       </TableCell>
                     </TableRow>
                   )}
@@ -185,3 +180,144 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     </>
   );
 };
+
+// =============================================================================
+// EXPANDED RESULT VIEW
+// =============================================================================
+
+interface ExpandedResultViewProps {
+  result: Record<string, unknown>;
+}
+
+/**
+ * Displays the result data in a structured format.
+ * Shows collector results as cards with key-value pairs.
+ */
+function ExpandedResultView({ result }: ExpandedResultViewProps) {
+  const metadata = result.metadata as Record<string, unknown> | undefined;
+  const rawCollectors = metadata?.collectors;
+
+  // Type guard for collectors object
+  const collectors: Record<string, Record<string, unknown>> | undefined =
+    rawCollectors &&
+    typeof rawCollectors === "object" &&
+    !Array.isArray(rawCollectors)
+      ? (rawCollectors as Record<string, Record<string, unknown>>)
+      : undefined;
+
+  // Check if we have collectors to display
+  const collectorEntries = collectors ? Object.entries(collectors) : [];
+
+  // Extract connection time as typed value
+  const connectionTimeMs = metadata?.connectionTimeMs as number | undefined;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-4 text-sm">
+        <div>
+          <span className="text-muted-foreground">Status: </span>
+          <span className="font-medium">{String(result.status)}</span>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Latency: </span>
+          <span className="font-medium">{String(result.latencyMs)}ms</span>
+        </div>
+        {connectionTimeMs !== undefined && (
+          <div>
+            <span className="text-muted-foreground">Connection: </span>
+            <span className="font-medium">{connectionTimeMs}ms</span>
+          </div>
+        )}
+      </div>
+
+      {collectorEntries.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium">Collector Results</h4>
+          <div className="grid gap-3 md:grid-cols-2">
+            {collectorEntries.map(([collectorId, collectorResult]) => (
+              <CollectorResultCard
+                key={collectorId}
+                collectorId={collectorId}
+                result={collectorResult}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {result.message ? (
+        <div className="text-sm text-muted-foreground">
+          {String(result.message)}
+        </div>
+      ) : undefined}
+    </div>
+  );
+}
+
+interface CollectorResultCardProps {
+  collectorId: string;
+  result: Record<string, unknown>;
+}
+
+/**
+ * Card displaying a single collector's result values.
+ */
+function CollectorResultCard({
+  collectorId,
+  result,
+}: CollectorResultCardProps) {
+  if (!result || typeof result !== "object") {
+    return;
+  }
+
+  // Filter out null/undefined values
+  const entries = Object.entries(result).filter(
+    ([, value]) => value !== null && value !== undefined
+  );
+
+  return (
+    <div className="rounded-md border bg-card p-3 space-y-2">
+      <h5 className="text-sm font-medium text-primary">{collectorId}</h5>
+      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
+        {entries.map(([key, value]) => (
+          <div key={key} className="contents">
+            <span className="text-muted-foreground truncate">
+              {formatKey(key)}
+            </span>
+            <span className="font-mono text-xs truncate" title={String(value)}>
+              {formatValue(value)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Format a camelCase key to a readable label.
+ */
+function formatKey(key: string): string {
+  return key
+    .replaceAll(/([a-z])([A-Z])/g, "$1 $2")
+    .replaceAll(/^./, (c) => c.toUpperCase());
+}
+
+/**
+ * Format a value for display.
+ */
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return "—";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "number") {
+    return Number.isInteger(value) ? String(value) : value.toFixed(2);
+  }
+  if (Array.isArray(value)) {
+    return value.length > 3
+      ? `[${value.slice(0, 3).join(", ")}…]`
+      : `[${value.join(", ")}]`;
+  }
+  if (typeof value === "object") return JSON.stringify(value);
+  const str = String(value);
+  return str.length > 50 ? `${str.slice(0, 47)}…` : str;
+}

package/src/hooks/useCollectors.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from "react";
+import { useApi } from "@checkstack/frontend-api";
+import { healthCheckApiRef } from "../api";
+import { CollectorDto } from "@checkstack/healthcheck-common";
+
+interface UseCollectorsResult {
+  collectors: CollectorDto[];
+  loading: boolean;
+  error: Error | undefined;
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Hook to fetch collectors for a given strategy.
+ * @param strategyId - The strategy ID to fetch collectors for
+ */
+export function useCollectors(strategyId: string): UseCollectorsResult {
+  const api = useApi(healthCheckApiRef);
+  const [collectors, setCollectors] = useState<CollectorDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error>();
+
+  const refetch = useCallback(async () => {
+    if (!strategyId) {
+      setCollectors([]);
+      return;
+    }
+
+    setLoading(true);
+    setError(undefined);
+    try {
+      const result = await api.getCollectors({ strategyId });
+      setCollectors(result);
+    } catch (error_) {
+      setError(
+        error_ instanceof Error
+          ? error_
+          : new Error("Failed to fetch collectors")
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [api, strategyId]);
+
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  return { collectors, loading, error, refetch };
+}
+
+/**
+ * Check if a collector is built-in for a given strategy.
+ * Built-in collectors are those registered by the same plugin as the strategy.
+ */
+export function isBuiltInCollector(
+  collectorId: string,
+  strategyId: string
+): boolean {
+  // Collector ID format: ownerPluginId.collectorId
+  // Strategy ID typically equals its plugin ID
+  return collectorId.startsWith(`${strategyId}.`);
+}