@checkstack/healthcheck-frontend 0.17.0 → 0.18.0

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

@@ -7,9 +7,7 @@ import {
   useApi,
   accessApiRef,
 } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import {
-  HEALTH_CHECK_RUN_COMPLETED,
   HealthCheckApi,
   healthCheckAccess,
   healthcheckRoutes,
@@ -199,11 +197,8 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
   // Pagination for history table
   const pagination = usePagination({ defaultLimit: 5 });
 
-  const {
-    data: historyData,
-    isLoading: historyLoading,
-    refetch,
-  } = healthCheckClient.getHistory.useQuery({
+  const { data: historyData, isLoading: historyLoading } =
+    healthCheckClient.getHistory.useQuery({
     systemId,
     configurationId: item.configurationId,
     limit: pagination.limit,
@@ -226,13 +221,6 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
   }
   const runs = displayRuns;
 
-  // Realtime updates
-  useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
-    if (changedId === systemId) {
-      void refetch();
-    }
-  });
-
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent size="lg">
@@ -417,7 +405,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                   <CardContent>
                     <HealthCheckStatusTimeline
                       context={chartContext}
-                      height={40}
+                      height={96}
                     />
                   </CardContent>
                 </Card>

package/src/components/HealthCheckStatusTimeline.tsx

@@ -1,6 +1,14 @@
 import { format } from "date-fns";
+import { usePerformance } from "@checkstack/ui";
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
 import type { HealthCheckDiagramSlotContext } from "../slots";
-import { SparklineTooltip } from "./SparklineTooltip";
 
 interface HealthCheckStatusTimelineProps {
   context: HealthCheckDiagramSlotContext;
@@ -13,19 +21,114 @@ const statusColors = {
   unhealthy: "hsl(var(--destructive))",
 };
 
+interface TimelineDatum {
+  bucketStart: number;
+  bucketEnd: number;
+  healthy: number;
+  degraded: number;
+  unhealthy: number;
+  runCount: number;
+}
+
+const MAX_TIMELINE_BARS = 60;
+
+function downsampleTimeline(
+  buckets: HealthCheckDiagramSlotContext["buckets"],
+): TimelineDatum[] {
+  if (buckets.length === 0) return [];
+
+  const groupSize = Math.max(1, Math.ceil(buckets.length / MAX_TIMELINE_BARS));
+  const result: TimelineDatum[] = [];
+
+  for (let i = 0; i < buckets.length; i += groupSize) {
+    const slice = buckets.slice(i, i + groupSize);
+    const first = slice[0];
+    const last = slice.at(-1) ?? first;
+    let healthy = 0;
+    let degraded = 0;
+    let unhealthy = 0;
+    let runCount = 0;
+    for (const b of slice) {
+      healthy += b.healthyCount;
+      degraded += b.degradedCount;
+      unhealthy += b.unhealthyCount;
+      runCount += b.runCount;
+    }
+    result.push({
+      bucketStart: new Date(first.bucketStart).getTime(),
+      bucketEnd: new Date(last.bucketEnd).getTime(),
+      healthy,
+      degraded,
+      unhealthy,
+      runCount,
+    });
+  }
+
+  return result;
+}
+
+function pickTickFormat(intervalSeconds: number): string {
+  if (intervalSeconds >= 86_400) return "MMM d";
+  if (intervalSeconds >= 3600) return "MMM d HH:mm";
+  return "HH:mm";
+}
+
+function StatusTimelineTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: { payload: TimelineDatum }[];
+}) {
+  if (!active || !payload?.length) return <></>;
+  const datum = payload[0].payload;
+  const span = `${format(new Date(datum.bucketStart), "MMM d, HH:mm")} – ${format(new Date(datum.bucketEnd), "HH:mm")}`;
+  return (
+    <div
+      className="rounded-md p-2 text-xs shadow-md"
+      style={{
+        backgroundColor: "hsl(var(--popover))",
+        border: "1px solid hsl(var(--border))",
+        color: "hsl(var(--popover-foreground))",
+      }}
+    >
+      <p className="text-muted-foreground mb-1">{span}</p>
+      <div className="space-y-0.5">
+        <p>
+          <span style={{ color: statusColors.healthy }}>●</span> Healthy:{" "}
+          {datum.healthy}
+        </p>
+        {datum.degraded > 0 && (
+          <p>
+            <span style={{ color: statusColors.degraded }}>●</span> Degraded:{" "}
+            {datum.degraded}
+          </p>
+        )}
+        {datum.unhealthy > 0 && (
+          <p>
+            <span style={{ color: statusColors.unhealthy }}>●</span> Unhealthy:{" "}
+            {datum.unhealthy}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
 /**
  * Timeline bar chart showing health check status distribution over time.
- * Each bar shows the distribution of statuses in that aggregated bucket.
+ * Each bar shows the stacked distribution of statuses in that aggregated bucket.
  */
 export const HealthCheckStatusTimeline: React.FC<
   HealthCheckStatusTimelineProps
-> = ({ context, height = 60 }) => {
-  const buckets = context.buckets;
+> = ({ context, height = 96 }) => {
+  const { isLowPower } = usePerformance();
+  const { buckets } = context;
 
   if (buckets.length === 0) {
     return (
       <div
-        className="flex items-center justify-center text-muted-foreground"
+        className="flex items-center justify-center text-muted-foreground text-sm"
         style={{ height }}
       >
         No status data available
@@ -33,75 +136,64 @@ export const HealthCheckStatusTimeline: React.FC<
     );
   }
 
-  // Use daily format for intervals >= 6 hours, otherwise include time
-  const timeFormat =
-    (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
-      ? "MMM d"
-      : "MMM d HH:mm";
-
-  // Calculate time range for labels
-  const firstTime = new Date(buckets[0].bucketStart).getTime();
-  const lastTime = new Date(buckets.at(-1)!.bucketStart).getTime();
+  const data = downsampleTimeline(buckets);
+  const effectiveIntervalSeconds =
+    (buckets[0]?.bucketIntervalSeconds ?? 3600) *
+    Math.max(1, Math.ceil(buckets.length / MAX_TIMELINE_BARS));
+  const tickFormat = pickTickFormat(effectiveIntervalSeconds);
 
   return (
-    <div style={{ height }} className="flex flex-col justify-between">
-      {/* Status strip - equal width stacked segments for each bucket */}
-      <div className="flex h-4 gap-px rounded-md bg-muted/30">
-        {buckets.map((bucket, index) => {
-          const total = bucket.runCount || 1;
-          const healthyPct = (bucket.healthyCount / total) * 100;
-          const degradedPct = (bucket.degradedCount / total) * 100;
-          const unhealthyPct = (bucket.unhealthyCount / total) * 100;
-
-          // Use actual bucket end time from response (critical for last bucket which extends to query end)
-          const bucketStart = new Date(bucket.bucketStart);
-          const bucketEnd = new Date(bucket.bucketEnd);
-          const timeSpan = `${format(bucketStart, "MMM d, HH:mm")} - ${format(bucketEnd, "HH:mm")}`;
-
-          return (
-            <SparklineTooltip
-              key={index}
-              content={`${timeSpan}\nHealthy: ${bucket.healthyCount}\nDegraded: ${bucket.degradedCount}\nUnhealthy: ${bucket.unhealthyCount}`}
-            >
-              <div className="flex-1 h-full flex flex-col cursor-pointer group">
-                {bucket.healthyCount > 0 && (
-                  <div
-                    className="w-full transition-opacity group-hover:opacity-80"
-                    style={{
-                      height: `${healthyPct}%`,
-                      backgroundColor: statusColors.healthy,
-                    }}
-                  />
-                )}
-                {bucket.degradedCount > 0 && (
-                  <div
-                    className="w-full transition-opacity group-hover:opacity-80"
-                    style={{
-                      height: `${degradedPct}%`,
-                      backgroundColor: statusColors.degraded,
-                    }}
-                  />
-                )}
-                {bucket.unhealthyCount > 0 && (
-                  <div
-                    className="w-full transition-opacity group-hover:opacity-80"
-                    style={{
-                      height: `${unhealthyPct}%`,
-                      backgroundColor: statusColors.unhealthy,
-                    }}
-                  />
-                )}
-              </div>
-            </SparklineTooltip>
-          );
-        })}
-      </div>
-
-      {/* Time axis labels */}
-      <div className="flex justify-between text-xs text-muted-foreground mt-1">
-        <span>{format(new Date(firstTime), timeFormat)}</span>
-        <span>{format(new Date(lastTime), timeFormat)}</span>
-      </div>
+    <div style={{ height, width: "100%" }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          data={data}
+          margin={{ top: 4, right: 4, left: 4, bottom: 0 }}
+          barCategoryGap={1}
+        >
+          <XAxis
+            dataKey="bucketStart"
+            tickFormatter={(value: number) => format(new Date(value), tickFormat)}
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={11}
+            minTickGap={48}
+            tickLine={false}
+            axisLine={false}
+            interval="preserveStartEnd"
+          />
+          <YAxis hide domain={[0, "dataMax"]} />
+          <Tooltip
+            cursor={{ fill: "hsl(var(--muted))", fillOpacity: 0.3 }}
+            content={(props) => (
+              <StatusTimelineTooltip
+                active={props.active}
+                payload={
+                  props.payload as unknown as
+                    | { payload: TimelineDatum }[]
+                    | undefined
+                }
+              />
+            )}
+          />
+          <Bar
+            dataKey="healthy"
+            stackId="status"
+            fill={statusColors.healthy}
+            isAnimationActive={!isLowPower}
+          />
+          <Bar
+            dataKey="degraded"
+            stackId="status"
+            fill={statusColors.degraded}
+            isAnimationActive={!isLowPower}
+          />
+          <Bar
+            dataKey="unhealthy"
+            stackId="status"
+            fill={statusColors.unhealthy}
+            isAnimationActive={!isLowPower}
+          />
+        </BarChart>
+      </ResponsiveContainer>
     </div>
   );
 };

package/src/components/HealthCheckSystemOverview.tsx

@@ -1,14 +1,10 @@
-import React, { useState, useCallback } from "react";
+import React, { useState } from "react";
 import {
   usePluginClient,
   type SlotContext,
 } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { SystemDetailsSlot } from "@checkstack/catalog-common";
-import {
-  HEALTH_CHECK_RUN_COMPLETED,
-  HealthCheckApi,
-} from "@checkstack/healthcheck-common";
+import { HealthCheckApi } from "@checkstack/healthcheck-common";
 import {
   HealthBadge,
   LoadingSpinner,
@@ -63,14 +59,11 @@ export function HealthCheckSystemOverview(props: SlotProps) {
     HealthCheckOverviewItem | undefined
   >();
 
-  // Fetch health check overview using useQuery
-  const {
-    data: overviewData,
-    isLoading: initialLoading,
-    refetch,
-  } = healthCheckClient.getSystemHealthOverview.useQuery({
-    systemId,
-  });
+  // Fetch health check overview using useQuery — kept fresh via SignalAutoInvalidator.
+  const { data: overviewData, isLoading: initialLoading } =
+    healthCheckClient.getSystemHealthOverview.useQuery({
+      systemId,
+    });
 
   // Transform API response to component format
   const overview: HealthCheckOverviewItem[] = React.useMemo(() => {
@@ -89,19 +82,6 @@ export function HealthCheckSystemOverview(props: SlotProps) {
     }));
   }, [overviewData]);
 
-  // Listen for realtime health check updates to refresh overview
-  useSignal(
-    HEALTH_CHECK_RUN_COMPLETED,
-    useCallback(
-      ({ systemId: changedId }) => {
-        if (changedId === systemId) {
-          void refetch();
-        }
-      },
-      [systemId, refetch],
-    ),
-  );
-
   if (initialLoading) {
     return <LoadingSpinner />;
   }

package/src/components/SystemHealthBadge.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
-import { useSignal } from "@checkstack/signal-frontend";
 import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
-import { SYSTEM_STATUS_CHANGED } from "@checkstack/healthcheck-common";
 import { HealthCheckApi } from "../api";
 import { HealthBadge } from "@checkstack/ui";
 import { useSystemBadgeDataOptional } from "@checkstack/dashboard-frontend";
@@ -17,37 +15,25 @@ type Props = SlotContext<typeof SystemStateBadgesSlot>;
  * When rendered within SystemBadgeDataProvider, uses bulk-fetched data.
  * Otherwise, falls back to individual fetch.
  *
- * Listens for realtime updates via signals.
+ * Realtime updates arrive via the SignalAutoInvalidator (auto-invalidates
+ * `[["healthcheck"]]` queries when SYSTEM_STATUS_CHANGED fires).
  */
 export const SystemHealthBadge: React.FC<Props> = ({ system }) => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const badgeData = useSystemBadgeDataOptional();
 
-  // Try to get data from provider first
   const providerData = badgeData?.getSystemBadgeData(system?.id ?? "");
   const providerStatus = providerData?.health?.status;
 
-  // Query for health status if not using provider
-  // When badgeData exists (inside provider), this query is disabled
-  const { data: healthData, refetch } =
-    healthCheckClient.getSystemHealthStatus.useQuery(
-      { systemId: system?.id ?? "" },
-      {
-        enabled: !badgeData && !!system?.id,
-        staleTime: 30_000, // Prevent unnecessary refetches
-      },
-    );
+  const { data: healthData } = healthCheckClient.getSystemHealthStatus.useQuery(
+    { systemId: system?.id ?? "" },
+    {
+      enabled: !badgeData && !!system?.id,
+      staleTime: 30_000,
+    },
+  );
 
   const localStatus = healthData?.status;
-
-  // Listen for realtime system status changes (only in fallback mode)
-  useSignal(SYSTEM_STATUS_CHANGED, ({ systemId: changedId }) => {
-    if (!badgeData && changedId === system?.id) {
-      void refetch();
-    }
-  });
-
-  // Use provider data if available, otherwise use local state
   const status = providerStatus ?? localStatus;
 
   if (!status || status === "healthy") return <></>;

package/src/components/editor/EditorPanel.tsx

@@ -8,6 +8,7 @@ import type { TreeNodeId } from "./EditorTree";
 import { GeneralSection } from "./GeneralSection";
 import { CollectorSection } from "./CollectorSection";
 import { CollectorPicker } from "./CollectorPicker";
+import { SystemsSection } from "./SystemsSection";
 import { TeamAccessEditor } from "@checkstack/auth-frontend";
 
 // =============================================================================
@@ -43,6 +44,11 @@ interface EditorPanelProps {
   onCollectorRemove: (entryId: string) => void;
   onCollectorAdd: (collectorId: string) => void;
   strategyId: string;
+  showSystemsSection?: boolean;
+  systems?: Array<{ id: string; name: string; description?: string | null }>;
+  systemsLoading?: boolean;
+  selectedSystemIds?: string[];
+  onSystemsChange?: (systemIds: string[]) => void;
 }
 
 // =============================================================================
@@ -67,6 +73,11 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
   onCollectorRemove,
   onCollectorAdd,
   strategyId,
+  showSystemsSection = false,
+  systems = [],
+  systemsLoading = false,
+  selectedSystemIds = [],
+  onSystemsChange,
 }) => {
   // --- General Section ---
   if (selectedNode === "general") {
@@ -101,6 +112,20 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
     );
   }
 
+  // --- Systems Section ---
+  if (selectedNode === "systems" && showSystemsSection) {
+    return (
+      <div className="p-6">
+        <SystemsSection
+          systems={systems}
+          selectedSystemIds={selectedSystemIds}
+          loading={systemsLoading}
+          onChange={(ids) => onSystemsChange?.(ids)}
+        />
+      </div>
+    );
+  }
+
   // --- Access Control ---
   if (selectedNode === "access") {
     return (

package/src/components/editor/EditorTree.tsx

@@ -3,7 +3,7 @@ import type {
   CollectorConfigEntry,
   CollectorDto,
 } from "@checkstack/healthcheck-common";
-import { Plus, Settings, Shield, ChevronRight } from "lucide-react";
+import { Plus, Settings, Shield, ChevronRight, Server } from "lucide-react";
 import { isBuiltInCollector } from "../../hooks/useCollectors";
 import {
   IDETreeNode,
@@ -20,6 +20,7 @@ import { HealthCheckConfigIDENodeSlot } from "../../slots";
 export type TreeNodeId =
   | "general"
   | "access"
+  | "systems"
   | "collector-picker"
   | `collector:${string}`
   | (string & {});
@@ -33,6 +34,8 @@ interface EditorTreeProps {
   validationIssues: ValidationIssue[];
   strategyId: string;
   configId?: string;
+  showSystemsNode?: boolean;
+  selectedSystemCount?: number;
 }
 
 // =============================================================================
@@ -47,6 +50,8 @@ export const EditorTree: React.FC<EditorTreeProps> = ({
   validationIssues,
   strategyId,
   configId,
+  showSystemsNode = false,
+  selectedSystemCount = 0,
 }) => {
   // Check if there are addable collectors remaining
   const hasAddableCollectors = useMemo(() => {
@@ -109,6 +114,23 @@ export const EditorTree: React.FC<EditorTreeProps> = ({
         </button>
       )}
 
+      {showSystemsNode && (
+        <>
+          <IDETreeSection label="Assignment" />
+          <IDETreeNode
+            nodeId="systems"
+            label="Systems"
+            icon={Server}
+            selected={selectedNode === "systems"}
+            onClick={() => onSelectNode("systems")}
+            issues={validationIssues}
+            badge={
+              selectedSystemCount > 0 ? String(selectedSystemCount) : undefined
+            }
+          />
+        </>
+      )}
+
       {/* Access Control */}
       <IDETreeSection label="Permissions" />