@checkstack/healthcheck-frontend 0.17.1 → 0.18.1

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" />
 

package/src/components/editor/SystemsSection.tsx

@@ -0,0 +1,126 @@
+import React, { useMemo, useState } from "react";
+import { Checkbox, Input, InfoBanner, InfoBannerContent } from "@checkstack/ui";
+import { Info, Search } from "lucide-react";
+
+interface SystemOption {
+  id: string;
+  name: string;
+  description?: string | null;
+}
+
+interface SystemsSectionProps {
+  systems: SystemOption[];
+  selectedSystemIds: string[];
+  loading: boolean;
+  onChange: (systemIds: string[]) => void;
+}
+
+export const SystemsSection: React.FC<SystemsSectionProps> = ({
+  systems,
+  selectedSystemIds,
+  loading,
+  onChange,
+}) => {
+  const [query, setQuery] = useState("");
+
+  const selectedSet = useMemo(
+    () => new Set(selectedSystemIds),
+    [selectedSystemIds],
+  );
+
+  const filteredSystems = useMemo(() => {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed) return systems;
+    return systems.filter((s) => s.name.toLowerCase().includes(trimmed));
+  }, [systems, query]);
+
+  const toggle = ({ systemId }: { systemId: string }) => {
+    if (selectedSet.has(systemId)) {
+      onChange(selectedSystemIds.filter((id) => id !== systemId));
+    } else {
+      onChange([...selectedSystemIds, systemId]);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Assign to systems</h2>
+        <p className="text-sm text-muted-foreground">
+          Optionally pick systems this check should monitor. You can also
+          assign it later from a system&apos;s catalog page.
+        </p>
+      </div>
+
+      <InfoBanner variant="info">
+        <Info className="h-4 w-4 shrink-0 mt-0.5" />
+        <InfoBannerContent>
+          Health checks are reusable templates — they can be assigned to
+          additional systems at any time.
+        </InfoBannerContent>
+      </InfoBanner>
+
+      <div className="space-y-2">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search systems..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="pl-9"
+            disabled={loading}
+          />
+        </div>
+
+        {loading ? (
+          <p className="text-sm text-muted-foreground italic px-1">
+            Loading systems...
+          </p>
+        ) : filteredSystems.length === 0 ? (
+          <p className="text-sm text-muted-foreground italic px-1">
+            {systems.length === 0
+              ? "No systems exist yet. Create one from the catalog first."
+              : "No systems match your search."}
+          </p>
+        ) : (
+          <div className="max-h-[420px] overflow-y-auto rounded-md border border-border/50 divide-y divide-border/50">
+            {filteredSystems.map((system) => {
+              const isChecked = selectedSet.has(system.id);
+              return (
+                <button
+                  key={system.id}
+                  type="button"
+                  onClick={() => toggle({ systemId: system.id })}
+                  className="flex items-start gap-3 w-full px-3 py-2.5 text-left hover:bg-muted/40 transition-colors"
+                >
+                  <Checkbox
+                    checked={isChecked}
+                    onCheckedChange={() => toggle({ systemId: system.id })}
+                    className="mt-0.5"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium truncate">
+                      {system.name}
+                    </div>
+                    {system.description && (
+                      <div className="text-xs text-muted-foreground truncate">
+                        {system.description}
+                      </div>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        {selectedSystemIds.length > 0 && (
+          <p className="text-xs text-muted-foreground px-1">
+            {selectedSystemIds.length} system
+            {selectedSystemIds.length === 1 ? "" : "s"} selected
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};