@checkstack/healthcheck-frontend 0.16.5 → 0.17.1

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @checkstack/healthcheck-frontend
 
+## 0.17.1
+
+### Patch Changes
+
+- 42b0832: Refactor auto-chart layout to make collector grouping more dominant. Chart titles now show only the metric label (e.g. "Avg Response Time") instead of the prefixed "{collectorId}: Metric" form. Collector groups display the collector name as a heading with a badge containing the full collector id. Cards now stack at full width and their contents are center-aligned.
+
+## 0.17.0
+
+### Minor Changes
+
+- 8d1ef12: ## Anomaly Detection & UI Improvements
+
+  ### Anomaly Detection Enhancements (Phase 2)
+
+  - **`@checkstack/anomaly-backend`**: Implemented background baseline analyzer jobs and anomaly trend deviation detection mechanics.
+  - **`@checkstack/anomaly-common`**: Added new baseline statistical logic and inference rules.
+  - **`@checkstack/anomaly-frontend`**: Added new Anomaly Widget and refactored system detail rendering to be more human-readable.
+  - **`@checkstack/dashboard-frontend`**: Refined the global anomaly widget and fixed hardcoded access gating to render appropriately.
+  - **`@checkstack/healthcheck-backend`**: Connected executor telemetry to the anomaly pipeline.
+  - **`@checkstack/healthcheck-frontend`**: Reconciled baseline display consistency in Drawer and charts.
+
+  ### Notification Identifiers
+
+  - **`@checkstack/incident-backend`**: Resolved system IDs to human-readable System Names within Incident notifications to eliminate ID-only alert content.
+  - **`@checkstack/maintenance-backend`**: Adopted the same resolution strategy for Maintenance notifications to keep parity.
+
+  ### UI Experience
+
+  - **`@checkstack/incident-frontend`**: Fixed the "Back to X" BackLink to properly use `react-router` hook `useNavigate` instead of doing a full application reload.
+  - **`@checkstack/healthcheck-frontend`**: Implemented `useNavigate` for seamless SPA back-linking.
+  - **`@checkstack/integration-frontend`**: Updated connections and delivery logs links to navigate without hard reloads.
+
+- 8d1ef12: Phase 2 of anomaly detection: trend drift detection.
+
+  The background baseline analyzer now computes a linear regression slope across each field's chronologically-ordered history and runs a `detectDrift` evaluator that catches gradual "creeping degradation" never reaching the 3σ spike threshold. Drifts share the same `anomalies` table as spike anomalies via a new `kind` column (`spike` | `drift`, default `spike`); the existing suspicious → anomaly → recovered lifecycle is reused, ticking at the analyzer's hourly cadence with a default 2-run confirmation window.
+
+  User-facing additions: a Trend Drift toggle and threshold slider on both the template and assignment anomaly settings panels (with per-field overrides), drift rows in the System Anomaly widget, dashed regression-line overlays on the auto-generated line charts, and a new `ANOMALY_TREND_DETECTED` signal for live UI updates. Plugin authors can disable drift per chartable field via `x-anomaly-drift-enabled: false` or tighten/loosen it via `x-anomaly-drift-threshold`.
+
+### Patch Changes
+
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+  - @checkstack/healthcheck-common@0.12.0
+  - @checkstack/anomaly-common@0.2.0
+  - @checkstack/dashboard-frontend@0.5.0
+  - @checkstack/common@0.7.0
+  - @checkstack/ui@1.6.0
+  - @checkstack/satellite-common@0.2.1
+  - @checkstack/auth-frontend@0.5.30
+  - @checkstack/catalog-common@1.5.2
+  - @checkstack/frontend-api@0.3.11
+  - @checkstack/gitops-frontend@0.3.5
+  - @checkstack/signal-frontend@0.0.16
+
 ## 0.16.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.16.5",
+  "version": "0.17.1",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,15 +12,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "0.5.28",
-    "@checkstack/catalog-common": "1.4.1",
+    "@checkstack/anomaly-common": "0.1.0",
+    "@checkstack/auth-frontend": "0.5.29",
+    "@checkstack/catalog-common": "1.5.1",
     "@checkstack/common": "0.6.5",
-    "@checkstack/dashboard-frontend": "0.4.4",
-    "@checkstack/frontend-api": "0.3.9",
-    "@checkstack/gitops-frontend": "0.3.3",
+    "@checkstack/dashboard-frontend": "0.4.6",
+    "@checkstack/frontend-api": "0.3.10",
+    "@checkstack/gitops-frontend": "0.3.4",
     "@checkstack/healthcheck-common": "0.11.0",
     "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/ui": "1.5.0",
+    "@checkstack/ui": "1.5.1",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",

package/src/auto-charts/AutoChartGrid.tsx

@@ -10,7 +10,7 @@ import { extractChartFields, getFieldValue } from "./schema-parser";
 import { useStrategySchemas } from "./useStrategySchemas";
 import type { HealthCheckDiagramSlotContext } from "../slots";
 import { SparklineTooltip } from "../components/SparklineTooltip";
-import { Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
+import { Badge, Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
 import {
   PieChart,
   Pie,
@@ -25,7 +25,13 @@ import {
   Area,
   RadialBarChart,
   RadialBar,
+  ReferenceArea,
 } from "recharts";
+import {
+  AnomalyApi,
+  type AnomalyBaselineDto,
+} from "@checkstack/anomaly-common";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { format } from "date-fns";
 import { MAX_SPARKLINE_BARS } from "../utils/sparkline-downsampling";
 
@@ -41,6 +47,11 @@ interface AutoChartGridProps {
  */
 export function AutoChartGrid({ context }: AutoChartGridProps) {
   const { schemas, loading } = useStrategySchemas(context.strategyId);
+  const anomalyClient = usePluginClient(AnomalyApi);
+  const { data: baselines = [] } = anomalyClient.getAnomalyBaselines.useQuery({
+    systemId: context.systemId,
+    configurationId: context.configurationId,
+  });
 
   if (loading) {
     return; // Don't show loading state, let custom charts render first
@@ -75,9 +86,14 @@ export function AutoChartGrid({ context }: AutoChartGridProps) {
     <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">
+        <div className="space-y-4">
           {strategyFields.map((field) => (
-            <AutoChartCard key={field.name} field={field} context={context} />
+            <AutoChartCard
+              key={field.name}
+              field={field}
+              context={context}
+              baselines={baselines}
+            />
           ))}
         </div>
       )}
@@ -88,6 +104,7 @@ export function AutoChartGrid({ context }: AutoChartGridProps) {
           key={group.instanceKey}
           group={group}
           context={context}
+          baselines={baselines}
         />
       ))}
     </div>
@@ -101,6 +118,7 @@ interface CollectorGroupData {
   instanceKey: string;
   collectorId: string;
   displayName: string;
+  instanceLabel?: string;
   fields: ExpandedChartField[];
 }
 
@@ -123,15 +141,15 @@ function buildCollectorGroups(
 
     // 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}`;
+      const displayName = collectorId.split(".").pop() || collectorId;
+      const instanceLabel =
+        instanceKeys.length > 1 ? `#${index + 1}` : undefined;
 
       groups.push({
         instanceKey,
         collectorId,
         displayName,
+        instanceLabel,
         fields: collectorFields.map((field) => ({
           ...field,
           instanceKey,
@@ -151,11 +169,14 @@ function buildCollectorGroups(
 function CollectorGroup({
   group,
   context,
+  baselines,
 }: {
   group: CollectorGroupData;
   context: HealthCheckDiagramSlotContext;
+  baselines: AnomalyBaselineDto[];
 }) {
-  // Separate fields into narrow (grid) and wide (full-width) categories
+  // Order: narrow (summary) cards first, then wide timeline cards.
+  // Layout is now fully stacked at 100% width.
   const narrowFields = group.fields.filter(
     (f) => !WIDE_CHART_TYPES.has(f.chartType),
   );
@@ -165,25 +186,30 @@ function CollectorGroup({
 
   return (
     <div className="space-y-4">
-      <h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
-        {group.displayName}
-      </h4>
-
-      {/* Narrow cards grid - these pack together nicely */}
-      {narrowFields.length > 0 && (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {narrowFields.map((field) => (
-            <AutoChartCard
-              key={`${field.instanceKey}-${field.name}`}
-              field={field}
-              context={context}
-            />
-          ))}
-        </div>
-      )}
+      <div className="flex items-center gap-2 flex-wrap border-b pb-2">
+        <h3 className="text-lg font-semibold capitalize">
+          {group.displayName}
+        </h3>
+        {group.instanceLabel && (
+          <span className="text-sm font-medium text-muted-foreground">
+            {group.instanceLabel}
+          </span>
+        )}
+        <Badge variant="outline" className="font-mono">
+          {group.collectorId}
+        </Badge>
+      </div>
 
-      {/* Wide timeline cards - assertion plus timeline fields */}
       <div className="space-y-4">
+        {narrowFields.map((field) => (
+          <AutoChartCard
+            key={`${field.instanceKey}-${field.name}`}
+            field={field}
+            context={context}
+            baselines={baselines}
+          />
+        ))}
+
         <AssertionStatusCard
           context={context}
           instanceKey={group.instanceKey}
@@ -194,6 +220,7 @@ function CollectorGroup({
             key={`${field.instanceKey}-${field.name}`}
             field={field}
             context={context}
+            baselines={baselines}
           />
         ))}
       </div>
@@ -254,9 +281,11 @@ function AssertionStatusCard({
     return (
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-sm font-medium">Assertion</CardTitle>
+          <CardTitle className="text-sm font-medium text-center">
+            Assertion
+          </CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="text-center">
           <div className="text-sm text-muted-foreground">No data</div>
         </CardContent>
       </Card>
@@ -277,14 +306,14 @@ function AssertionStatusCard({
     >
       <CardHeader className="pb-2">
         <CardTitle
-          className={`text-sm font-medium ${latestResult.passed ? "" : "text-red-600"}`}
+          className={`text-sm font-medium text-center ${latestResult.passed ? "" : "text-red-600"}`}
         >
           {latestResult.passed ? "Assertion" : "Assertion Failed"}
         </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-2">
+      <CardContent className="space-y-2 text-center">
         {/* Current status with rate */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center justify-center gap-2">
           <div
             className={`w-3 h-3 rounded-full ${
               latestResult.passed ? "bg-green-500" : "bg-red-500"
@@ -383,6 +412,7 @@ interface ExpandedChartField extends ChartField {
 interface AutoChartCardProps {
   field: ExpandedChartField;
   context: HealthCheckDiagramSlotContext;
+  baselines?: AnomalyBaselineDto[];
 }
 
 /**
@@ -393,14 +423,46 @@ const WIDE_CHART_TYPES = new Set(["line", "boolean", "text"]);
 /**
  * Individual chart card that renders based on field type.
  */
-function AutoChartCard({ field, context }: AutoChartCardProps) {
+function AutoChartCard({ field, context, baselines }: AutoChartCardProps) {
+  const fullFieldPath = field.collectorId
+    ? `collectors.${field.collectorId}.${field.name}`
+    : field.name;
+
+  let baseline = baselines?.find((b) => b.fieldPath === fullFieldPath);
+
+  // If no exact match, try mapping aggregated field names back to raw field names
+  if (!baseline) {
+    let rawFieldName = field.name;
+    if (rawFieldName.startsWith("avg")) {
+      rawFieldName =
+        rawFieldName.charAt(3).toLowerCase() + rawFieldName.slice(4);
+    } else if (rawFieldName.startsWith("min")) {
+      rawFieldName =
+        rawFieldName.charAt(3).toLowerCase() + rawFieldName.slice(4);
+    } else if (rawFieldName.startsWith("max")) {
+      rawFieldName =
+        rawFieldName.charAt(3).toLowerCase() + rawFieldName.slice(4);
+    } else if (rawFieldName === "successRate") {
+      rawFieldName = "success";
+    }
+
+    if (rawFieldName !== field.name) {
+      const rawFullFieldPath = field.collectorId
+        ? `collectors.${field.collectorId}.${rawFieldName}`
+        : rawFieldName;
+      baseline = baselines?.find((b) => b.fieldPath === rawFullFieldPath);
+    }
+  }
+
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-sm font-medium">{field.label}</CardTitle>
+        <CardTitle className="text-sm font-medium text-center">
+          {field.label}
+        </CardTitle>
       </CardHeader>
-      <CardContent>
-        <ChartRenderer field={field} context={context} />
+      <CardContent className="flex flex-col items-center text-center [&>*]:w-full">
+        <ChartRenderer field={field} context={context} baseline={baseline} />
       </CardContent>
     </Card>
   );
@@ -409,36 +471,57 @@ function AutoChartCard({ field, context }: AutoChartCardProps) {
 interface ChartRendererProps {
   field: ExpandedChartField;
   context: HealthCheckDiagramSlotContext;
+  baseline?: AnomalyBaselineDto;
 }
 
 /**
  * Dispatches to appropriate chart renderer based on chart type.
  */
-function ChartRenderer({ field, context }: ChartRendererProps) {
+function ChartRenderer({ field, context, baseline }: ChartRendererProps) {
   switch (field.chartType) {
     case "line": {
-      return <LineChartRenderer field={field} context={context} />;
+      return (
+        <LineChartRenderer
+          field={field}
+          context={context}
+          baseline={baseline}
+        />
+      );
     }
     case "gauge": {
-      return <GaugeRenderer field={field} context={context} />;
+      return (
+        <GaugeRenderer field={field} context={context} baseline={baseline} />
+      );
     }
     case "counter": {
-      return <CounterRenderer field={field} context={context} />;
+      return (
+        <CounterRenderer field={field} context={context} baseline={baseline} />
+      );
     }
     case "bar": {
-      return <BarChartRenderer field={field} context={context} />;
+      return (
+        <BarChartRenderer field={field} context={context} baseline={baseline} />
+      );
     }
     case "pie": {
-      return <PieChartRenderer field={field} context={context} />;
+      return (
+        <PieChartRenderer field={field} context={context} baseline={baseline} />
+      );
     }
     case "boolean": {
-      return <BooleanRenderer field={field} context={context} />;
+      return (
+        <BooleanRenderer field={field} context={context} baseline={baseline} />
+      );
     }
     case "text": {
-      return <TextRenderer field={field} context={context} />;
+      return (
+        <TextRenderer field={field} context={context} baseline={baseline} />
+      );
     }
     case "status": {
-      return <StatusRenderer field={field} context={context} />;
+      return (
+        <StatusRenderer field={field} context={context} baseline={baseline} />
+      );
     }
     default: {
       return;
@@ -502,7 +585,7 @@ function CounterRenderer({ field, context }: ChartRendererProps) {
 /**
  * Renders a percentage gauge visualization using Recharts RadialBarChart.
  */
-function GaugeRenderer({ field, context }: ChartRendererProps) {
+function GaugeRenderer({ field, context, baseline }: ChartRendererProps) {
   const value = getLatestValue(field.name, context, field.instanceKey);
   const numValue =
     typeof value === "number" ? Math.min(100, Math.max(0, value)) : 0;
@@ -519,29 +602,66 @@ function GaugeRenderer({ field, context }: ChartRendererProps) {
   const data = [{ name: field.label, value: numValue, fill: fillColor }];
 
   return (
-    <div className="flex items-center gap-3">
-      <ResponsiveContainer width={80} height={80}>
-        <RadialBarChart
-          cx="50%"
-          cy="50%"
-          innerRadius="60%"
-          outerRadius="100%"
-          barSize={8}
-          data={data}
-          startAngle={90}
-          endAngle={-270}
-        >
-          <RadialBar
-            dataKey="value"
-            cornerRadius={4}
-            background={{ fill: "hsl(var(--muted))" }}
-          />
-        </RadialBarChart>
-      </ResponsiveContainer>
-      <div className="text-2xl font-bold" style={{ color: fillColor }}>
-        {numValue.toFixed(1)}
-        {unit}
+    <div className="flex flex-col gap-2 items-center">
+      <div className="flex items-center justify-center gap-3">
+        <ResponsiveContainer width={80} height={80}>
+          <RadialBarChart
+            cx="50%"
+            cy="50%"
+            innerRadius="60%"
+            outerRadius="100%"
+            barSize={8}
+            data={data}
+            startAngle={90}
+            endAngle={-270}
+          >
+            <RadialBar
+              dataKey="value"
+              cornerRadius={4}
+              background={{ fill: "hsl(var(--muted))" }}
+            />
+          </RadialBarChart>
+        </ResponsiveContainer>
+        <div className="text-2xl font-bold" style={{ color: fillColor }}>
+          {numValue.toFixed(1)}
+          {unit}
+        </div>
       </div>
+      {baseline &&
+        (() => {
+          if (
+            baseline.dominantValue !== undefined &&
+            baseline.dominantValue !== null
+          ) {
+            let expectedNum = Number(baseline.dominantValue);
+            if (baseline.dominantValue === "true" || baseline.dominantValue === "false") {
+              const ratio = baseline.dominantRatio ?? (baseline.dominantValue === "true" ? 1 : 0);
+              expectedNum = baseline.dominantValue === "true" ? (ratio * 100) : ((1 - ratio) * 100);
+            }
+            if (!Number.isNaN(expectedNum)) {
+              return (
+                <div className="text-xs text-muted-foreground mt-1">
+                  Expected: {expectedNum.toFixed(1)}
+                  {unit}
+                </div>
+              );
+            }
+          }
+
+          if (typeof baseline.mean === "number") {
+            const min = Math.max(0, baseline.mean - baseline.stdDev * 3);
+            const max = baseline.mean + baseline.stdDev * 3;
+            return (
+              <div className="text-xs text-muted-foreground mt-1">
+                Expected: {baseline.mean.toFixed(1)}
+                {unit} (±{(baseline.stdDev * 3).toFixed(1)}) [{min.toFixed(1)} -{" "}
+                {max.toFixed(1)}]
+              </div>
+            );
+          }
+
+          return <></>;
+        })()}
     </div>
   );
 }
@@ -549,7 +669,7 @@ function GaugeRenderer({ field, context }: ChartRendererProps) {
 /**
  * Renders a boolean indicator with historical sparkline.
  */
-function BooleanRenderer({ field, context }: ChartRendererProps) {
+function BooleanRenderer({ field, context, baseline }: ChartRendererProps) {
   const valuesWithTime = getAllBooleanValuesWithTime(
     field.name,
     context,
@@ -571,7 +691,7 @@ function BooleanRenderer({ field, context }: ChartRendererProps) {
   return (
     <div className="space-y-2">
       {/* Current status with rate */}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center justify-center gap-2">
         <div
           className={`w-3 h-3 rounded-full ${
             latestValue ? "bg-green-500" : "bg-red-500"
@@ -587,6 +707,17 @@ function BooleanRenderer({ field, context }: ChartRendererProps) {
         )}
       </div>
 
+      {baseline &&
+        baseline.dominantValue !== undefined &&
+        baseline.dominantValue !== null && (
+          <div className="text-xs text-muted-foreground">
+            Expected: {String(baseline.dominantValue)}
+            {baseline.dominantRatio
+              ? ` (${(baseline.dominantRatio * 100).toFixed(0)}%)`
+              : ""}
+          </div>
+        )}
+
       {/* Sparkline timeline - render each value as a bar */}
       <div className="flex h-2 gap-px rounded">
         {valuesWithTime.map((item, index) => {
@@ -611,7 +742,7 @@ function BooleanRenderer({ field, context }: ChartRendererProps) {
 /**
  * Renders text value with historical sparkline for status-type fields.
  */
-function TextRenderer({ field, context }: ChartRendererProps) {
+function TextRenderer({ field, context, baseline }: ChartRendererProps) {
   const valuesWithTime = getAllStringValuesWithTime(
     field.name,
     context,
@@ -632,7 +763,7 @@ function TextRenderer({ field, context }: ChartRendererProps) {
   return (
     <div className="space-y-2">
       {/* Current value with count */}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center justify-center gap-2">
         <span className="text-sm font-mono">{latestValue || "—"}</span>
         {!allSame && (
           <span className="text-xs text-muted-foreground">
@@ -641,6 +772,17 @@ function TextRenderer({ field, context }: ChartRendererProps) {
         )}
       </div>
 
+      {baseline &&
+        baseline.dominantValue !== undefined &&
+        baseline.dominantValue !== null && (
+          <div className="text-xs text-muted-foreground">
+            Expected: {String(baseline.dominantValue)}
+            {baseline.dominantRatio
+              ? ` (${(baseline.dominantRatio * 100).toFixed(0)}%)`
+              : ""}
+          </div>
+        )}
+
       {/* Sparkline timeline - always show for historical context */}
       {(() => {
         // Downsample for string values - bucket is "primary" if all values match latest
@@ -733,7 +875,7 @@ function StatusRenderer({ field, context }: ChartRendererProps) {
 /**
  * Renders an area chart for time series data using Recharts AreaChart.
  */
-function LineChartRenderer({ field, context }: ChartRendererProps) {
+function LineChartRenderer({ field, context, baseline }: ChartRendererProps) {
   const valuesWithTime = getAllValuesWithTime(
     field.name,
     context,
@@ -745,28 +887,69 @@ function LineChartRenderer({ field, context }: ChartRendererProps) {
     return <div className="text-muted-foreground">No data</div>;
   }
 
-  // Transform values to recharts data format with time labels
+  const avg =
+    valuesWithTime.reduce((a, b) => a + b.value, 0) / valuesWithTime.length;
+
+  // Calculate average runs per bucket to adjust the visual standard deviation.
+  // Since the chart plots the *average* of the bucket, the standard deviation
+  // of that average is sigma / sqrt(n). This makes the baseline band visually
+  // correct for the aggregated data being displayed.
+  const totalRuns = context.buckets.reduce(
+    (sum, b) => sum + (b.runCount || 1),
+    0,
+  );
+  const avgRunCount = Math.max(
+    1,
+    totalRuns / Math.max(1, context.buckets.length),
+  );
+
+  // Trend is the slope projected over the baseline window: slope × sampleCount
+  // — the same scalar the drift evaluator uses. Surfaced as a header chip rather
+  // than a diagonal line because it's a rate, not an absolute value, and shares
+  // no natural axis with the data series.
+  const projectedChange = baseline ? baseline.trendSlope * baseline.sampleCount : 0;
+  const showTrend = !!baseline && Math.abs(projectedChange) > 0.01;
+  const driftSigmas = baseline && baseline.stdDev > 0
+    ? Math.abs(projectedChange) / baseline.stdDev
+    : 0;
+  const isDrifting = driftSigmas >= 2;
+
   const chartData = valuesWithTime.map((item, index) => ({
     index,
     value: item.value,
     timeLabel: item.timeLabel,
   }));
 
-  const avg =
-    valuesWithTime.reduce((a, b) => a + b.value, 0) / valuesWithTime.length;
-
   return (
     <div className="space-y-2">
-      <div className="text-lg font-medium">
-        Avg: {avg.toFixed(1)}
-        {unit && (
-          <span className="text-sm font-normal text-muted-foreground ml-1">
-            {unit}
+      {baseline ? (
+        <div className="flex items-center justify-between text-xs px-1 gap-3">
+          <span className="text-warning font-medium">
+            Expected: {baseline.mean.toFixed(1)}{unit} (±{((baseline.stdDev / Math.sqrt(avgRunCount)) * 3).toFixed(1)})
           </span>
-        )}
-      </div>
-      <ResponsiveContainer width="100%" height={60}>
-        <AreaChart data={chartData}>
+          <div className="flex items-center gap-3">
+            {showTrend && (
+              <span className={isDrifting ? "text-warning font-medium" : "text-muted-foreground"}>
+                Trend: {projectedChange >= 0 ? "↑ +" : "↓ "}{projectedChange.toFixed(1)}{unit}
+              </span>
+            )}
+            <span className="text-muted-foreground">
+              Avg: {avg.toFixed(1)}{unit}
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center justify-end text-xs px-1">
+          <span className="text-muted-foreground">
+            Avg: {avg.toFixed(1)}{unit}
+          </span>
+        </div>
+      )}
+      <ResponsiveContainer width="100%" height={120}>
+        <AreaChart
+          data={chartData}
+          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+        >
           <defs>
             <linearGradient
               id={`gradient-${field.name}`}
@@ -787,6 +970,41 @@ function LineChartRenderer({ field, context }: ChartRendererProps) {
               />
             </linearGradient>
           </defs>
+          <XAxis
+            dataKey="index"
+            type="number"
+            domain={["dataMin", "dataMax"]}
+            tickFormatter={(index: number) => {
+              const label = chartData[index]?.timeLabel;
+              return label ? label.split(" - ")[0] : "";
+            }}
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+            minTickGap={30}
+          />
+          <YAxis
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+            tickFormatter={(v: number) => `${v}${unit}`}
+            width={60}
+          />
+          {baseline && (
+            <ReferenceArea
+              y1={Math.max(
+                0,
+                baseline.mean -
+                  (baseline.stdDev / Math.sqrt(avgRunCount)) * 3,
+              )}
+              y2={
+                baseline.mean + (baseline.stdDev / Math.sqrt(avgRunCount)) * 3
+              }
+              fill="hsl(var(--warning))"
+              fillOpacity={0.08}
+              stroke="hsl(var(--warning))"
+              strokeOpacity={0.4}
+              strokeWidth={1}
+            />
+          )}
           <Area
             type="monotone"
             dataKey="value"

package/src/auto-charts/SingleRunChartGrid.tsx

@@ -8,7 +8,7 @@
 import type { ChartField } from "./schema-parser";
 import { extractChartFields, getFieldValue } from "./schema-parser";
 import { useStrategySchemas } from "./useStrategySchemas";
-import { Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
+import { Badge, Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
 import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
 
 interface SingleRunChartGridProps {
@@ -62,7 +62,7 @@ export function SingleRunChartGrid({
     <div className="space-y-6">
       {/* Strategy-level fields */}
       {strategyFields.length > 0 && (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="space-y-4">
           {strategyFields.map((field) => (
             <SingleValueCard
               key={field.name}
@@ -124,12 +124,13 @@ function CollectorSection({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-2">
-        <h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
-          {displayName}
-        </h4>
-        <span className="text-xs text-muted-foreground">
-          ({instanceId.slice(0, 8)})
+      <div className="flex items-center gap-2 flex-wrap border-b pb-2">
+        <h3 className="text-lg font-semibold capitalize">{displayName}</h3>
+        <Badge variant="outline" className="font-mono">
+          {collectorId}
+        </Badge>
+        <span className="text-xs text-muted-foreground font-mono">
+          {instanceId.slice(0, 8)}
         </span>
       </div>
 
@@ -165,7 +166,7 @@ function CollectorSection({
         </Card>
       )}
 
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <div className="space-y-4">
         {fields.map((field) => (
           <SingleValueCard
             key={field.name}
@@ -190,9 +191,11 @@ function SingleValueCard({ field, value }: SingleValueCardProps) {
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-sm font-medium">{field.label}</CardTitle>
+        <CardTitle className="text-sm font-medium text-center">
+          {field.label}
+        </CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex flex-col items-center text-center [&>*]:w-full">
         <SingleValueRenderer field={field} value={value} />
       </CardContent>
     </Card>
@@ -292,7 +295,7 @@ function GaugeRenderer({ value, unit }: { value: unknown; unit?: string }) {
   const data = [{ name: "value", value: clampedValue, fill: fillColor }];
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center justify-center gap-3">
       <ResponsiveContainer width={80} height={80}>
         <RadialBarChart
           cx="50%"
@@ -330,7 +333,7 @@ function BooleanRenderer({ value }: { value: unknown }) {
   const boolValue = Boolean(value);
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center justify-center gap-2">
       <div
         className={`w-3 h-3 rounded-full ${
           boolValue ? "bg-green-500" : "bg-red-500"

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

@@ -108,12 +108,9 @@ function extractFieldsFromProperties(
     if (!chartType) continue;
 
     // Use just field name - collectorId is stored separately for data lookup
+    // and surfaced via a separate badge in the group header
     const field = extractSingleField(fieldName, 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);
   }
 

package/src/components/HealthCheckDrawer.tsx

@@ -15,6 +15,7 @@ import {
   healthcheckRoutes,
 } from "@checkstack/healthcheck-common";
 import { SatelliteApi, satelliteAccess } from "@checkstack/satellite-common";
+import { AnomalyApi } from "@checkstack/anomaly-common";
 import { resolveRoute } from "@checkstack/common";
 import {
   HealthBadge,
@@ -189,6 +190,12 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
     },
   });
 
+  const anomalyClient = usePluginClient(AnomalyApi);
+  const { data: baselines = [] } = anomalyClient.getAnomalyBaselines.useQuery(
+    { systemId, configurationId: item.configurationId },
+    { enabled: !!systemId && !!item.configurationId }
+  );
+
   // Pagination for history table
   const pagination = usePagination({ defaultLimit: 5 });
 
@@ -425,6 +432,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                       context={chartContext}
                       height={120}
                       showAverage
+                      baselines={baselines}
                     />
                   </CardContent>
                 </Card>

package/src/components/HealthCheckLatencyChart.tsx

@@ -5,15 +5,18 @@ import {
   YAxis,
   Tooltip,
   ResponsiveContainer,
-  ReferenceLine,
+  ReferenceArea,
 } from "recharts";
 import { format } from "date-fns";
 import type { HealthCheckDiagramSlotContext } from "../slots";
 
+import type { AnomalyBaselineDto } from "@checkstack/anomaly-common";
+
 interface HealthCheckLatencyChartProps {
   context: HealthCheckDiagramSlotContext;
   height?: number;
   showAverage?: boolean;
+  baselines?: AnomalyBaselineDto[];
 }
 
 /**
@@ -23,7 +26,7 @@ interface HealthCheckLatencyChartProps {
  */
 export const HealthCheckLatencyChart: React.FC<
   HealthCheckLatencyChartProps
-> = ({ context, height = 200, showAverage = true }) => {
+> = ({ context, height = 200, showAverage = true, baselines }) => {
   const buckets = context.buckets.filter((b) => b.avgLatencyMs !== undefined);
 
   if (buckets.length === 0) {
@@ -37,6 +40,20 @@ export const HealthCheckLatencyChart: React.FC<
     );
   }
 
+  const baseline = baselines?.find((b) => b.fieldPath === "latencyMs");
+  const totalRuns = context.buckets.reduce((sum, b) => sum + (b.runCount || 1), 0);
+  const avgRunCount = Math.max(1, totalRuns / Math.max(1, context.buckets.length));
+
+  // Trend is the slope projected over the baseline window — a rate, surfaced in
+  // the header chip rather than as a chart line so it doesn't share a y-axis
+  // with absolute latency values.
+  const projectedChange = baseline ? baseline.trendSlope * baseline.sampleCount : 0;
+  const showTrend = !!baseline && Math.abs(projectedChange) > 0.01;
+  const driftSigmas = baseline && baseline.stdDev > 0
+    ? Math.abs(projectedChange) / baseline.stdDev
+    : 0;
+  const isDrifting = driftSigmas >= 2;
+
   const chartData = buckets.map((d) => ({
     timestamp: new Date(d.bucketStart).getTime(),
     bucketEndTimestamp: new Date(d.bucketEnd).getTime(),
@@ -57,8 +74,34 @@ export const HealthCheckLatencyChart: React.FC<
       : "MMM d, HH:mm";
 
   return (
-    <ResponsiveContainer width="100%" height={height}>
-      <AreaChart data={chartData}>
+    <div className="space-y-2">
+      {showAverage && (
+        baseline ? (
+          <div className="flex items-center justify-between text-xs px-1 gap-3">
+            <span className="text-warning font-medium">
+              Expected: {baseline.mean.toFixed(0)}ms (±{((baseline.stdDev / Math.sqrt(avgRunCount)) * 3).toFixed(0)})
+            </span>
+            <div className="flex items-center gap-3">
+              {showTrend && (
+                <span className={isDrifting ? "text-warning font-medium" : "text-muted-foreground"}>
+                  Trend: {projectedChange >= 0 ? "↑ +" : "↓ "}{projectedChange.toFixed(0)}ms
+                </span>
+              )}
+              <span className="text-muted-foreground">
+                Avg: {avgLatency.toFixed(0)}ms
+              </span>
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center justify-end text-xs px-1">
+            <span className="text-muted-foreground">
+              Avg: {avgLatency.toFixed(0)}ms
+            </span>
+          </div>
+        )
+      )}
+      <ResponsiveContainer width="100%" height={height}>
+        <AreaChart data={chartData}>
         <defs>
           <linearGradient id="latencyGradient" x1="0" y1="0" x2="0" y2="1">
             <stop
@@ -109,17 +152,15 @@ export const HealthCheckLatencyChart: React.FC<
             );
           }}
         />
-        {showAverage && (
-          <ReferenceLine
-            y={avgLatency}
-            stroke="hsl(var(--muted-foreground))"
-            strokeDasharray="3 3"
-            label={{
-              value: `Avg: ${avgLatency.toFixed(0)}ms`,
-              position: "right",
-              fill: "hsl(var(--muted-foreground))",
-              fontSize: 12,
-            }}
+        {baseline && (
+          <ReferenceArea
+            y1={Math.max(0, baseline.mean - (baseline.stdDev / Math.sqrt(avgRunCount)) * 3)}
+            y2={baseline.mean + (baseline.stdDev / Math.sqrt(avgRunCount)) * 3}
+            fill="hsl(var(--warning))"
+            fillOpacity={0.08}
+            stroke="hsl(var(--warning))"
+            strokeOpacity={0.4}
+            strokeWidth={1}
           />
         )}
         <Area
@@ -131,5 +172,6 @@ export const HealthCheckLatencyChart: React.FC<
         />
       </AreaChart>
     </ResponsiveContainer>
+    </div>
   );
 };

package/src/components/assignments/AssignmentTree.tsx

@@ -1,16 +1,14 @@
 import React from "react";
 import { Settings, Gauge, Database, Radio, Plus, Check } from "lucide-react";
 import { IDETreeNode, IDETreeSection } from "@checkstack/ui";
+import { ExtensionSlot } from "@checkstack/frontend-api";
+import { AssignmentIDENodeSlot } from "../../slots";
 
 // =============================================================================
 // TYPES
 // =============================================================================
 
-export type AssignmentNodeId =
-  | `general:${string}`
-  | `thresholds:${string}`
-  | `retention:${string}`
-  | `execution:${string}`;
+export type AssignmentNodeId = string;
 
 interface AssignmentConfig {
   configurationId: string;
@@ -20,6 +18,7 @@ interface AssignmentConfig {
 }
 
 interface AssignmentTreeProps {
+  systemId: string;
   assigned: AssignmentConfig[];
   available: Array<{ id: string; name: string; strategyId: string }>;
   selectedNode: AssignmentNodeId | undefined;
@@ -33,6 +32,7 @@ interface AssignmentTreeProps {
 // =============================================================================
 
 export const AssignmentTree: React.FC<AssignmentTreeProps> = ({
+  systemId,
   assigned,
   available,
   selectedNode,
@@ -97,6 +97,16 @@ export const AssignmentTree: React.FC<AssignmentTreeProps> = ({
             indent
             badge={assoc.satelliteCount > 0 ? `${assoc.satelliteCount}` : undefined}
           />
+          <ExtensionSlot 
+            slot={AssignmentIDENodeSlot} 
+            context={{
+              systemId,
+              configurationId: assoc.configurationId,
+              selectedNode,
+              onSelectNode,
+              isLocked
+            }} 
+          />
         </div>
       ))}
 

package/src/components/editor/EditorTree.tsx

@@ -10,6 +10,8 @@ import {
   IDETreeSection,
   type ValidationIssue,
 } from "@checkstack/ui";
+import { ExtensionSlot } from "@checkstack/frontend-api";
+import { HealthCheckConfigIDENodeSlot } from "../../slots";
 
 // =============================================================================
 // TYPES
@@ -19,7 +21,8 @@ export type TreeNodeId =
   | "general"
   | "access"
   | "collector-picker"
-  | `collector:${string}`;
+  | `collector:${string}`
+  | (string & {});
 
 interface EditorTreeProps {
   collectors: CollectorConfigEntry[];
@@ -29,6 +32,7 @@ interface EditorTreeProps {
   onAddCollector: (collectorId: string) => void;
   validationIssues: ValidationIssue[];
   strategyId: string;
+  configId?: string;
 }
 
 // =============================================================================
@@ -42,6 +46,7 @@ export const EditorTree: React.FC<EditorTreeProps> = ({
   onSelectNode,
   validationIssues,
   strategyId,
+  configId,
 }) => {
   // Check if there are addable collectors remaining
   const hasAddableCollectors = useMemo(() => {
@@ -115,6 +120,19 @@ export const EditorTree: React.FC<EditorTreeProps> = ({
         onClick={() => onSelectNode("access")}
         issues={validationIssues}
       />
+
+      {/* Plugin Configuration Slots */}
+      {configId && (
+        <ExtensionSlot
+          slot={HealthCheckConfigIDENodeSlot}
+          context={{
+            configurationId: configId,
+            strategyId,
+            selectedNode,
+            onSelectNode,
+          }}
+        />
+      )}
     </div>
   );
 };

package/src/index.tsx

@@ -29,13 +29,20 @@ import {
 // Export slot definitions for other plugins to use
 export {
   HealthCheckDiagramSlot,
-  createDiagramExtensionFactory,
+  AssignmentIDENodeSlot,
+  AssignmentIDEPanelSlot,
+  HealthCheckConfigIDENodeSlot,
+  HealthCheckConfigIDEPanelSlot,
   type HealthCheckDiagramSlotContext,
+  type AssignmentIDEContext,
+  type HealthCheckConfigIDEContext,
+  createDiagramExtensionFactory,
   type TypedAggregatedBucket,
 } from "./slots";
 
 // Export hooks for reusable data fetching
 export { useHealthCheckData } from "./hooks";
+export { useStrategySchemas } from "./auto-charts/useStrategySchemas";
 
 export default createFrontendPlugin({
   metadata: pluginMetadata,

package/src/pages/AssignmentIDEPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { usePluginClient, wrapInSuspense } from "@checkstack/frontend-api";
+import { usePluginClient, wrapInSuspense, ExtensionSlot } from "@checkstack/frontend-api";
 import { HealthCheckApi } from "../api";
 import { SatelliteApi } from "@checkstack/satellite-common";
 import {
@@ -24,6 +24,7 @@ import {
   type RetentionData,
 } from "../components/assignments/RetentionPanel";
 import { ExecutionPanel } from "../components/assignments/ExecutionPanel";
+import { AssignmentIDEPanelSlot } from "../slots";
 
 // =============================================================================
 // HELPERS
@@ -448,6 +449,20 @@ const AssignmentIDEPageContent = () => {
           />
         );
       }
+      default: {
+        return (
+          <ExtensionSlot 
+            slot={AssignmentIDEPanelSlot} 
+            context={{
+              systemId: systemId ?? "",
+              configurationId: configId,
+              selectedNode,
+              onSelectNode: setSelectedNode,
+              isLocked
+            }} 
+          />
+        );
+      }
     }
   };
 
@@ -480,6 +495,7 @@ const AssignmentIDEPageContent = () => {
       <IDELayout
         tree={
           <AssignmentTree
+            systemId={systemId ?? ""}
             assigned={assignedConfigs}
             available={availableConfigs}
             selectedNode={selectedNode}

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -121,7 +121,7 @@ const HealthCheckHistoryDetailPageContent = () => {
       loading={accessLoading}
       allowed={canManage}
       actions={
-        <BackLink to={resolveRoute(healthcheckRoutes.routes.history)}>
+        <BackLink onClick={() => navigate(resolveRoute(healthcheckRoutes.routes.history))}>
           Back to All History
         </BackLink>
       }

package/src/pages/HealthCheckIDEPage.tsx

@@ -3,8 +3,10 @@ import { useParams, useSearchParams, useNavigate } from "react-router-dom";
 import {
   usePluginClient,
   wrapInSuspense,
+  ExtensionSlot,
 } from "@checkstack/frontend-api";
 import { HealthCheckApi } from "../api";
+import { HealthCheckConfigIDEPanelSlot } from "../slots";
 import {
   healthcheckRoutes,
   type CollectorConfigEntry,
@@ -349,32 +351,47 @@ const HealthCheckIDEPageContent = () => {
             onAddCollector={handleCollectorAdd}
             validationIssues={validationIssues}
             strategyId={activeStrategyId ?? ""}
+            configId={configId}
           />
         }
         panel={
-          <EditorPanel
-            selectedNode={selectedNode}
-            formState={formState}
-            strategy={activeStrategy}
-            availableCollectors={availableCollectors}
-            collectorsLoading={collectorsLoading}
-            isEditMode={isEditMode}
-            configId={configId}
-            onNameChange={(name) => updateField("name", name)}
-            onIntervalChange={(interval) =>
-              updateField("intervalSeconds", interval)
-            }
-            onStrategyConfigChange={(config) =>
-              updateField("strategyConfig", config)
-            }
-            onStrategyConfigValidChange={setStrategyConfigValid}
-            onCollectorConfigChange={handleCollectorConfigChange}
-            onCollectorAssertionsChange={handleCollectorAssertionsChange}
-            onCollectorValidChange={handleCollectorValidChange}
-            onCollectorRemove={handleCollectorRemove}
-            onCollectorAdd={handleCollectorAdd}
-            strategyId={activeStrategyId ?? ""}
-          />
+          <>
+            <EditorPanel
+              selectedNode={selectedNode}
+              formState={formState}
+              strategy={activeStrategy}
+              availableCollectors={availableCollectors}
+              collectorsLoading={collectorsLoading}
+              isEditMode={isEditMode}
+              configId={configId}
+              onNameChange={(name) => updateField("name", name)}
+              onIntervalChange={(interval) =>
+                updateField("intervalSeconds", interval)
+              }
+              onStrategyConfigChange={(config) =>
+                updateField("strategyConfig", config)
+              }
+              onStrategyConfigValidChange={setStrategyConfigValid}
+              onCollectorConfigChange={handleCollectorConfigChange}
+              onCollectorAssertionsChange={handleCollectorAssertionsChange}
+              onCollectorValidChange={handleCollectorValidChange}
+              onCollectorRemove={handleCollectorRemove}
+              onCollectorAdd={handleCollectorAdd}
+              strategyId={activeStrategyId ?? ""}
+            />
+            {configId && (
+              <ExtensionSlot
+                slot={HealthCheckConfigIDEPanelSlot}
+                context={{
+                  configurationId: configId,
+                  strategyId: activeStrategyId ?? "",
+                  selectedNode,
+                  onSelectNode: setSelectedNode,
+                  isLocked,
+                }}
+              />
+            )}
+          </>
         }
         issues={validationIssues}
         onIssueClick={(nodeId) => setSelectedNode(nodeId as TreeNodeId)}

package/src/slots.tsx

@@ -44,6 +44,47 @@ export const HealthCheckDiagramSlot = createSlot<HealthCheckDiagramSlotContext>(
   "healthcheck.diagram",
 );
 
+export interface AssignmentIDEContext {
+  systemId: string;
+  configurationId: string;
+  selectedNode: string | undefined;
+  onSelectNode: (nodeId: string) => void;
+  isLocked?: boolean;
+}
+
+/**
+ * Extension slot for adding items to the Assignment IDE tree
+ */
+export const AssignmentIDENodeSlot = createSlot<AssignmentIDEContext>(
+  "healthcheck.assignment.ide.node"
+);
+
+export const AssignmentIDEPanelSlot = createSlot<AssignmentIDEContext>(
+  "healthcheck.assignment.ide.panel"
+);
+
+export interface HealthCheckConfigIDEContext {
+  configurationId: string;
+  strategyId: string;
+  selectedNode: string | undefined;
+  onSelectNode: (nodeId: string) => void;
+  isLocked?: boolean;
+}
+
+/**
+ * Extension slot for adding items to the Health Check Configuration IDE tree
+ */
+export const HealthCheckConfigIDENodeSlot = createSlot<HealthCheckConfigIDEContext>(
+  "healthcheck.config.ide.node"
+);
+
+/**
+ * Extension slot for rendering the panel of a Health Check Configuration IDE item
+ */
+export const HealthCheckConfigIDEPanelSlot = createSlot<HealthCheckConfigIDEContext>(
+  "healthcheck.config.ide.panel"
+);
+
 // =============================================================================
 // DIAGRAM EXTENSION FACTORY
 // =============================================================================