@checkstack/healthcheck-frontend 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # @checkstack/healthcheck-frontend
 
+## 0.13.0
+
+### Minor Changes
+
+- 26d8bae: Distributed satellite health checks and Assignment IDE page
+
+  **Satellite System**
+
+  - New `satellite-backend`, `satellite-common`, `satellite-frontend`, and `satellite` agent packages for distributed health check execution
+  - WebSocket-based satellite connectivity with authentication, heartbeats, and live configuration push
+  - Satellite management UI with create dialog, status badges, and list page
+
+  **Live Configuration Updates**
+
+  - Added `assignmentChanged` hook to `healthcheck-backend` for cross-plugin communication
+  - `satellite-backend` subscribes to assignment changes and pushes config updates to connected satellites in real-time
+
+  **Assignment IDE Page**
+
+  - Replaced the 1028-line modal-based `SystemHealthCheckAssignment` component with a full-page IDE layout
+  - New modular components: `AssignmentTree`, `GeneralPanel`, `ThresholdsPanel`, `RetentionPanel`, `ExecutionPanel`
+  - Added unassign capability and sorted assignment lists for stable ordering
+
+  **Shared IDE Primitives**
+
+  - Extracted `IDETreeNode`, `IDETreeSection`, `IDEStatusBar`, `IDELayout` to `@checkstack/ui` for cross-plugin reuse
+  - Migrated existing health check IDE editor to use shared primitives
+
+  **Infrastructure**
+
+  - Added `Dockerfile.satellite` for containerized satellite deployment
+  - WebSocket route registry in `@checkstack/backend` and `@checkstack/backend-api`
+
+- 26d8bae: Source attribution and filtering for satellite health checks
+
+  **Source Attribution**
+
+  - Fixed satellite result attribution: runs from satellites now correctly display their source instead of defaulting to "Local"
+  - Added `sourceId` and `sourceLabel` to both public and detailed history API responses
+
+  **Source Filtering**
+
+  - Added `sourceFilter` parameter to `getHistory`, `getDetailedHistory`, and `getDetailedAggregatedHistory` RPC endpoints
+  - Source filter supports "local" (core-only), specific satellite UUID, or all sources
+  - Filter applies to all three aggregation tiers (raw, hourly, daily)
+
+  **Frontend**
+
+  - System detail accordion shows source filter buttons (All / Local / per-satellite) next to date range filter
+  - Filter applies to both charts and recent runs table
+  - Source column added to the recent runs table with Local/Remote badges
+  - Health check history detail page includes per-satellite source filter buttons
+
+### Patch Changes
+
+- Updated dependencies [26d8bae]
+- Updated dependencies [26d8bae]
+  - @checkstack/ui@1.3.0
+  - @checkstack/healthcheck-common@0.11.0
+  - @checkstack/satellite-common@0.2.0
+  - @checkstack/auth-frontend@0.5.19
+  - @checkstack/dashboard-frontend@0.3.27
+
+## 0.12.1
+
+### Patch Changes
+
+- d1a2796: Enforce stricter code quality standards and eliminate AI slop anti-patterns.
+
+  **New utility**
+
+  - `extractErrorMessage(error, fallback?)` in `@checkstack/common` for consistent error extraction
+
+  **ESLint rules**
+
+  - `react-hooks/rules-of-hooks` and `exhaustive-deps` for hook correctness
+  - `no-console` in frontend packages — forces `toast` over silent `console.error`
+  - `no-restricted-syntax` banning `instanceof Error` — forces `extractErrorMessage`
+  - Custom `no-eslint-disable-any` rule preventing `@typescript-eslint/no-explicit-any` circumvention
+
+  **Refactoring**
+
+  - Replace 141 `instanceof Error` boilerplate patterns across the codebase
+  - Replace swallowed `console.error` with user-visible `toast.error()` feedback
+  - Remove 15 redundant `as` type casts in IntegrationsPage and ProviderConnectionsPage
+  - Consolidate 3 identical callback handlers into `handleDialogClose`
+  - Fix conditional React hook call in `FormField.tsx`
+  - Fix unstable useMemo deps in `Dashboard.tsx`
+  - Replace `useEffect`→`setState` with derived `useMemo` in `RegisterPage.tsx`
+  - Rewrite `keystore.test.ts` with typed `DrizzleMockChain` (eliminating 7 `any` suppressions)
+  - Delete obvious comments in `encryption.ts` and Teams `provider.ts`
+
+- Updated dependencies [d1a2796]
+- Updated dependencies [3c34b07]
+  - @checkstack/common@0.6.5
+  - @checkstack/ui@1.2.1
+  - @checkstack/auth-frontend@0.5.18
+  - @checkstack/dashboard-frontend@0.3.26
+  - @checkstack/frontend-api@0.3.9
+  - @checkstack/catalog-common@1.3.1
+  - @checkstack/healthcheck-common@0.10.1
+  - @checkstack/signal-frontend@0.0.15
+
 ## 0.12.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,14 +12,14 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "0.5.17",
-    "@checkstack/catalog-common": "1.2.11",
-    "@checkstack/common": "0.6.4",
-    "@checkstack/dashboard-frontend": "0.3.23",
-    "@checkstack/frontend-api": "0.3.8",
-    "@checkstack/healthcheck-common": "0.8.4",
-    "@checkstack/signal-frontend": "0.0.14",
-    "@checkstack/ui": "1.2.0",
+    "@checkstack/auth-frontend": "0.5.18",
+    "@checkstack/catalog-common": "1.3.1",
+    "@checkstack/common": "0.6.5",
+    "@checkstack/dashboard-frontend": "0.3.26",
+    "@checkstack/frontend-api": "0.3.9",
+    "@checkstack/healthcheck-common": "0.10.1",
+    "@checkstack/signal-frontend": "0.0.15",
+    "@checkstack/ui": "1.2.1",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",
@@ -28,11 +28,12 @@
     "react-router-dom": "^6.20.0",
     "recharts": "^3.6.0",
     "uuid": "^13.0.0",
-    "zod": "^4.2.1"
+    "zod": "^4.2.1",
+    "@checkstack/satellite-common": "0.1.0"
   },
   "devDependencies": {
     "@checkstack/scripts": "0.1.2",
-    "@checkstack/tsconfig": "0.0.4",
+    "@checkstack/tsconfig": "0.0.5",
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0"
   }

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

@@ -230,10 +230,6 @@ function extractComputedValue(value: unknown): unknown {
 
   // _type is required for all aggregated state objects
   if (!("_type" in obj)) {
-    console.error(
-      "[AutoChart] Missing _type discriminator in aggregated state:",
-      obj,
-    );
     return value;
   }
 
@@ -252,9 +248,6 @@ function extractComputedValue(value: unknown): unknown {
       return obj.max;
     }
     default: {
-      console.error(
-        `[AutoChart] Unrecognized aggregated state type: ${String(obj._type)}`,
-      );
       return value;
     }
   }

package/src/components/HealthCheckRunsTable.tsx

@@ -10,7 +10,7 @@ import {
   Pagination,
 } from "@checkstack/ui";
 import { formatDistanceToNow, format } from "date-fns";
-import { ExternalLink, Loader2 } from "lucide-react";
+import { ExternalLink, Loader2, Satellite, Server } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
@@ -22,6 +22,10 @@ export interface HealthCheckRunDetailed {
   status: "healthy" | "unhealthy" | "degraded";
   result: Record<string, unknown>;
   timestamp: Date;
+  /** Source ID for result attribution (undefined = local core, UUID = satellite) */
+  sourceId?: string;
+  /** Human-readable source label (e.g. "Local" or "EU West (eu-west-1)") */
+  sourceLabel?: string;
 }
 
 export interface HealthCheckRunsTableProps {
@@ -93,6 +97,7 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                 </>
               )}
               <TableHead>Timestamp</TableHead>
+              <TableHead>Source</TableHead>
               {showFilterColumns && <TableHead className="w-16"></TableHead>}
             </TableRow>
           </TableHeader>
@@ -123,6 +128,19 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                     })}
                   </span>
                 </TableCell>
+                <TableCell>
+                  {run.sourceId ? (
+                    <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-600">
+                      <Satellite className="h-3 w-3" />
+                      {run.sourceLabel ?? "Remote"}
+                    </span>
+                  ) : (
+                    <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+                      <Server className="h-3 w-3" />
+                      {run.sourceLabel ?? "Local"}
+                    </span>
+                  )}
+                </TableCell>
                 {showFilterColumns && (
                   <TableCell>
                     <ExternalLink className="h-4 w-4 text-muted-foreground" />

package/src/components/HealthCheckSystemOverview.tsx

@@ -15,6 +15,7 @@ import {
   healthCheckAccess,
   healthcheckRoutes,
 } from "@checkstack/healthcheck-common";
+import { SatelliteApi, satelliteAccess } from "@checkstack/satellite-common";
 import { resolveRoute } from "@checkstack/common";
 import {
   HealthBadge,
@@ -36,10 +37,14 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
-  AnimatedNumber,
 } from "@checkstack/ui";
 import { formatDistanceToNow } from "date-fns";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Satellite as SatelliteIcon,
+  Server,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { HealthCheckSparkline } from "./HealthCheckSparkline";
 import { HealthCheckLatencyChart } from "./HealthCheckLatencyChart";
@@ -71,30 +76,24 @@ interface ExpandedRowProps {
   systemId: string;
 }
 
-// Helper to get color class for availability percentage
-const getAvailabilityColorClass = (
-  value: number | null,
-  totalRuns: number,
-): string => {
-  if (value === null || totalRuns === 0) {
-    return "text-muted-foreground";
-  }
-  if (value >= 99.9) {
-    return "text-green-600 dark:text-green-400";
-  }
-  if (value >= 99) {
-    return "text-yellow-600 dark:text-yellow-400";
-  }
-  return "text-red-600 dark:text-red-400";
-};
-
 const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
+  const satelliteClient = usePluginClient(SatelliteApi);
   const navigate = useNavigate();
   const accessApi = useApi(accessApiRef);
   const { allowed: canViewDetails } = accessApi.useAccess(
     healthCheckAccess.details,
   );
+  const { allowed: canReadSatellites } = accessApi.useAccess(
+    satelliteAccess.satellite.read,
+  );
+
+  // Fetch satellites for source filter (only if user has access)
+  const { data: satellitesData } = satelliteClient.listSatellites.useQuery(
+    {},
+    { enabled: canReadSatellites },
+  );
+  const satellites = satellitesData?.satellites ?? [];
 
   // Date range state for filtering - default to last 24 hours
   const [dateRange, setDateRange] = useState(() =>
@@ -102,6 +101,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   );
   // Track if a rolling preset is active (vs custom range)
   const [isRollingPreset, setIsRollingPreset] = useState(true);
+  const [sourceFilter, setSourceFilter] = useState<string | undefined>();
 
   // Callback to handle date range changes from the filter
   const handleDateRangeChange = useCallback(
@@ -155,6 +155,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     configurationId: item.configurationId,
     strategyId: item.strategyId,
     dateRange,
+    sourceFilter,
     isRollingPreset,
     // Update endDate to current time when new runs are detected (only for rolling presets)
     onDateRangeRefresh: (newEndDate) => {
@@ -177,6 +178,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     offset: pagination.offset,
     startDate: dateRange.startDate,
     // Don't pass endDate - backend defaults to 'now' so new runs are included
+    sourceFilter,
     sortOrder: "desc",
   });
 
@@ -193,12 +195,11 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   }
   const runs = displayRuns;
 
-  // Listen for realtime health check updates to refresh history table and availability stats
+  // Listen for realtime health check updates to refresh history table
   // Charts are refreshed automatically by useHealthCheckData
   useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
     if (changedId === systemId) {
       void refetch();
-      void refetchAvailability();
     }
   });
 
@@ -208,13 +209,6 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
       : `Window mode (${item.stateThresholds.windowSize} runs): Degraded at ${item.stateThresholds.degraded.minFailureCount}+ failures, Unhealthy at ${item.stateThresholds.unhealthy.minFailureCount}+ failures`
     : "Using default thresholds";
 
-  // Fetch availability stats
-  const { data: availabilityData, refetch: refetchAvailability } =
-    healthCheckClient.getAvailabilityStats.useQuery({
-      systemId,
-      configurationId: item.configurationId,
-    });
-
   // Render charts - charts handle data transformation internally
   const renderCharts = () => {
     if (chartLoading) {
@@ -289,49 +283,6 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
         </div>
       </div>
 
-      {/* Availability Stats - Prominent Display */}
-      {availabilityData && (
-        <div className="grid grid-cols-2 gap-4">
-          <div className="flex flex-col gap-1 p-4 rounded-lg border bg-card">
-            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-              31-Day Availability
-            </span>
-            <div className="flex items-baseline gap-2">
-              <AnimatedNumber
-                value={availabilityData.availability31Days ?? undefined}
-                suffix="%"
-                className={`text-2xl font-bold ${getAvailabilityColorClass(availabilityData.availability31Days, availabilityData.totalRuns31Days)}`}
-              />
-              {availabilityData.totalRuns31Days > 0 && (
-                <span className="text-sm text-muted-foreground">
-                  ({availabilityData.totalRuns31Days.toLocaleString()} runs)
-                </span>
-              )}
-            </div>
-          </div>
-          <div className="flex flex-col gap-1 p-4 rounded-lg border bg-card">
-            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-              365-Day Availability
-            </span>
-            <div className="flex items-baseline gap-2">
-              <AnimatedNumber
-                value={availabilityData.availability365Days ?? undefined}
-                suffix="%"
-                className={`text-2xl font-bold ${getAvailabilityColorClass(availabilityData.availability365Days, availabilityData.totalRuns365Days)}`}
-              />
-              {availabilityData.totalRuns365Days > 0 && (
-                <span className="text-sm text-muted-foreground">
-                  ({availabilityData.totalRuns365Days.toLocaleString()} runs)
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Divider */}
-      <div className="h-px bg-border" />
-
       {/* Date Range Filter with Loading Spinner */}
       <div className="flex items-center gap-3 flex-wrap">
         <DateRangeFilter
@@ -356,6 +307,49 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
           <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
         )}
       </div>
+      {/* Source filter (visible when satellites exist and user has read access) */}
+      {canReadSatellites && satellites.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">Source:</span>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => setSourceFilter(undefined)}
+              className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                sourceFilter === undefined
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+            >
+              All
+            </button>
+            <button
+              onClick={() => setSourceFilter("local")}
+              className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                sourceFilter === "local"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+            >
+              <Server className="h-3 w-3" />
+              Local
+            </button>
+            {satellites.map((sat) => (
+              <button
+                key={sat.id}
+                onClick={() => setSourceFilter(sat.id)}
+                className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                  sourceFilter === sat.id
+                    ? "bg-orange-500 text-white"
+                    : "bg-orange-500/10 text-orange-600 hover:bg-orange-500/20"
+                }`}
+              >
+                <SatelliteIcon className="h-3 w-3" />
+                {sat.name}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
 
       {/* Charts Section */}
       {renderCharts()}
@@ -373,12 +367,14 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
             </span>
             <div className="flex-1 h-px bg-border" />
           </div>
+
           <div className="rounded-md border">
             <Table>
               <TableHeader>
                 <TableRow>
                   <TableHead className="w-24">Status</TableHead>
                   <TableHead>Time</TableHead>
+                  <TableHead>Source</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -412,6 +408,19 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
                         addSuffix: true,
                       })}
                     </TableCell>
+                    <TableCell>
+                      {run.sourceId ? (
+                        <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-600">
+                          <SatelliteIcon className="h-3 w-3" />
+                          {run.sourceLabel ?? "Remote"}
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+                          <Server className="h-3 w-3" />
+                          {run.sourceLabel ?? "Local"}
+                        </span>
+                      )}
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>