@checkstack/healthcheck-frontend 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @checkstack/healthcheck-frontend
 
+## 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.12.1",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -13,11 +13,11 @@
   },
   "dependencies": {
     "@checkstack/auth-frontend": "0.5.17",
-    "@checkstack/catalog-common": "1.2.11",
+    "@checkstack/catalog-common": "1.3.0",
     "@checkstack/common": "0.6.4",
-    "@checkstack/dashboard-frontend": "0.3.23",
+    "@checkstack/dashboard-frontend": "0.3.25",
     "@checkstack/frontend-api": "0.3.8",
-    "@checkstack/healthcheck-common": "0.8.4",
+    "@checkstack/healthcheck-common": "0.10.0",
     "@checkstack/signal-frontend": "0.0.14",
     "@checkstack/ui": "1.2.0",
     "ajv": "^8.18.0",
@@ -32,7 +32,7 @@
   },
   "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/HealthCheckSystemOverview.tsx

@@ -36,7 +36,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
-  AnimatedNumber,
+
 } from "@checkstack/ui";
 import { formatDistanceToNow } from "date-fns";
 import { ChevronDown, ChevronRight } from "lucide-react";
@@ -71,22 +71,6 @@ 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);
@@ -193,12 +177,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,12 +191,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 = () => {
@@ -289,48 +266,7 @@ 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">

package/src/components/SystemHealthCheckAssignment.tsx

@@ -35,7 +35,7 @@ import {
   healthcheckRoutes,
   healthCheckAccess,
 } from "@checkstack/healthcheck-common";
-import { resolveRoute } from "@checkstack/common";
+import { resolveRoute, extractErrorMessage} from "@checkstack/common";
 import { DEFAULT_RETENTION_CONFIG } from "@checkstack/healthcheck-common";
 
 type SelectedPanel = { configId: string; panel: "thresholds" | "retention" };
@@ -132,7 +132,7 @@ export const SystemHealthCheckAssignment: React.FC<Props> = ({
       void refetchAssociations();
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to update");
+      toast.error(extractErrorMessage(error, "Failed to update"));
     },
   });
 
@@ -144,7 +144,7 @@ export const SystemHealthCheckAssignment: React.FC<Props> = ({
       },
       onError: (error) => {
         toast.error(
-          error instanceof Error ? error.message : "Failed to update"
+          extractErrorMessage(error, "Failed to update")
         );
       },
     }
@@ -158,7 +158,7 @@ export const SystemHealthCheckAssignment: React.FC<Props> = ({
         setSelectedPanel(undefined);
       },
       onError: (error) => {
-        toast.error(error instanceof Error ? error.message : "Failed to save");
+        toast.error(extractErrorMessage(error, "Failed to save"));
       },
     });
 

package/src/hooks/useCollectors.ts

@@ -26,7 +26,7 @@ export function useCollectors(strategyId: string): UseCollectorsResult {
   );
 
   const collectors = data ?? [];
-  const error = queryError instanceof Error ? queryError : undefined;
+  const error = queryError ?? undefined;
 
   return {
     collectors,

package/src/pages/HealthCheckConfigPage.tsx

@@ -21,7 +21,7 @@ import {
 } from "@checkstack/ui";
 import { Plus, History, Activity } from "lucide-react";
 import { Link } from "react-router-dom";
-import { resolveRoute } from "@checkstack/common";
+import { resolveRoute, extractErrorMessage} from "@checkstack/common";
 import { useState } from "react";
 
 const HealthCheckConfigPageContent = () => {
@@ -70,7 +70,7 @@ const HealthCheckConfigPageContent = () => {
       void refetchConfigurations();
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to delete");
+      toast.error(extractErrorMessage(error, "Failed to delete"));
     },
   });
 
@@ -79,7 +79,7 @@ const HealthCheckConfigPageContent = () => {
       void refetchConfigurations();
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to pause");
+      toast.error(extractErrorMessage(error, "Failed to pause"));
     },
   });
 
@@ -88,7 +88,7 @@ const HealthCheckConfigPageContent = () => {
       void refetchConfigurations();
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to resume");
+      toast.error(extractErrorMessage(error, "Failed to resume"));
     },
   });
 

package/src/pages/HealthCheckIDEPage.tsx

@@ -11,7 +11,7 @@ import {
 } from "@checkstack/healthcheck-common";
 import { PageLayout, Button, useToast } from "@checkstack/ui";
 import { Save, Settings } from "lucide-react";
-import { resolveRoute } from "@checkstack/common";
+import { resolveRoute, extractErrorMessage} from "@checkstack/common";
 import { useCollectors } from "../hooks/useCollectors";
 import { EditorTree, type TreeNodeId } from "../components/editor/EditorTree";
 import { EditorPanel } from "../components/editor/EditorPanel";
@@ -249,7 +249,7 @@ const HealthCheckIDEPageContent = () => {
       navigate(resolveRoute(healthcheckRoutes.routes.config));
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to create");
+      toast.error(extractErrorMessage(error, "Failed to create"));
     },
   });
 
@@ -260,7 +260,7 @@ const HealthCheckIDEPageContent = () => {
       navigate(resolveRoute(healthcheckRoutes.routes.config));
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to update");
+      toast.error(extractErrorMessage(error, "Failed to update"));
     },
   });