@checkstack/healthcheck-frontend 0.11.8 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @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
+
+- 54a5f80: ### Health Check Editor Redesign — IDE-Style Experience
+
+  Replaces the modal-based health check editor with a full-page, IDE-style experience:
+
+  - **Strategy Picker Page**: New `/config/create` page with categorized strategy discovery, search filtering, and grouped card grid layout
+  - **IDE Editor Page**: New `/config/:configId/edit` page with a split-view layout — explorer tree on the left, editor panel on the right
+  - **Strategy Categories**: Introduces `StrategyCategory` enum with 16 categories (Networking, Database, Infrastructure, etc.) — all 13 strategy plugins now declare their category
+  - **New RPC Endpoint**: Added `getConfiguration` (singular by ID) for efficient single-resource fetching on the edit page
+  - **Explorer Tree**: Left-hand navigation with General, Check Items (collectors), and Access Control sections, with real-time validation indicators
+  - **Validation Status Bar**: Bottom bar showing aggregated validation issues with clickable navigation
+  - **Unsaved Changes Guard**: Browser `beforeunload` protection when the form is dirty
+  - **Responsive Design**: Split-view on desktop, stacked layout on mobile
+  - **Deleted**: Legacy `HealthCheckEditor.tsx` modal component
+
+### Patch Changes
+
+- Updated dependencies [54a5f80]
+  - @checkstack/healthcheck-common@0.10.0
+  - @checkstack/dashboard-frontend@0.3.25
+
 ## 0.11.8
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.11.8",
+  "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/components/editor/CollectorPicker.tsx

@@ -0,0 +1,129 @@
+import React, { useMemo } from "react";
+import type {
+  CollectorConfigEntry,
+  CollectorDto,
+} from "@checkstack/healthcheck-common";
+import { Badge } from "@checkstack/ui";
+import { Search } from "lucide-react";
+import { isBuiltInCollector } from "../../hooks/useCollectors";
+
+interface CollectorPickerProps {
+  availableCollectors: CollectorDto[];
+  configuredCollectors: CollectorConfigEntry[];
+  loading: boolean;
+  onAdd: (collectorId: string) => void;
+  strategyId: string;
+}
+
+export const CollectorPicker: React.FC<CollectorPickerProps> = ({
+  availableCollectors,
+  configuredCollectors,
+  loading,
+  onAdd,
+  strategyId,
+}) => {
+  const configuredIds = useMemo(
+    () => new Set(configuredCollectors.map((c) => c.collectorId)),
+    [configuredCollectors],
+  );
+
+  const builtInCollectors = availableCollectors.filter((c) =>
+    isBuiltInCollector(c.id, strategyId),
+  );
+  const externalCollectors = availableCollectors.filter(
+    (c) => !isBuiltInCollector(c.id, strategyId),
+  );
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <h2 className="text-lg font-semibold">Add Check Item</h2>
+        <p className="text-sm text-muted-foreground">Loading collectors...</p>
+      </div>
+    );
+  }
+
+  const renderCollectorCard = (collector: CollectorDto) => {
+    const alreadyAdded = configuredIds.has(collector.id);
+    const canAdd = !alreadyAdded || collector.allowMultiple;
+
+    return (
+      <button
+        key={collector.id}
+        type="button"
+        disabled={!canAdd}
+        onClick={() => onAdd(collector.id)}
+        className={`flex flex-col items-start gap-1.5 rounded-lg border p-4 text-left transition-all ${
+          canAdd
+            ? "hover:border-primary/50 hover:shadow-md hover:shadow-primary/5 cursor-pointer"
+            : "opacity-50 cursor-not-allowed"
+        }`}
+      >
+        <div className="flex w-full items-center justify-between gap-2">
+          <h3 className="font-semibold text-sm">{collector.displayName}</h3>
+          <div className="flex gap-1.5 shrink-0">
+            {collector.allowMultiple && (
+              <Badge variant="outline" className="text-[10px]">
+                Multiple
+              </Badge>
+            )}
+            {alreadyAdded && (
+              <Badge variant="secondary" className="text-[10px]">
+                Added
+              </Badge>
+            )}
+          </div>
+        </div>
+        {collector.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {collector.description}
+          </p>
+        )}
+      </button>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Add Check Item</h2>
+        <p className="text-sm text-muted-foreground">
+          Select a collector to add to this health check.
+        </p>
+      </div>
+
+      {availableCollectors.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+          <Search className="h-8 w-8 mb-3 opacity-40" />
+          <p className="text-sm">No collectors available for this strategy.</p>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {builtInCollectors.length > 0 && (
+            <section>
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+                Built-in
+              </h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {builtInCollectors.map((col) => renderCollectorCard(col))}
+              </div>
+            </section>
+          )}
+
+          {externalCollectors.length > 0 && (
+            <section>
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+                External
+              </h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {externalCollectors.map((extCol) =>
+                  renderCollectorCard(extCol),
+                )}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/editor/CollectorSection.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import type {
+  CollectorConfigEntry,
+  CollectorDto,
+} from "@checkstack/healthcheck-common";
+import { Button, DynamicForm, Label } from "@checkstack/ui";
+import { Trash2 } from "lucide-react";
+import { AssertionBuilder, type Assertion } from "../AssertionBuilder";
+
+interface CollectorSectionProps {
+  entry: CollectorConfigEntry;
+  collectorDef: CollectorDto | undefined;
+  onConfigChange: (config: Record<string, unknown>) => void;
+  onAssertionsChange: (assertions: CollectorConfigEntry["assertions"]) => void;
+  onValidChange: (isValid: boolean) => void;
+  onRemove: () => void;
+}
+
+export const CollectorSection: React.FC<CollectorSectionProps> = ({
+  entry,
+  collectorDef,
+  onConfigChange,
+  onAssertionsChange,
+  onValidChange,
+  onRemove,
+}) => {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h2 className="text-lg font-semibold">
+            {collectorDef?.displayName ?? entry.collectorId}
+          </h2>
+          {collectorDef?.description && (
+            <p className="text-sm text-muted-foreground">
+              {collectorDef.description}
+            </p>
+          )}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-destructive hover:text-destructive shrink-0"
+          onClick={onRemove}
+          title="Remove collector"
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Configuration */}
+      {collectorDef?.configSchema && (
+        <div className="space-y-3">
+          <div>
+            <Label className="text-sm font-semibold">Configuration</Label>
+            <p className="text-xs text-muted-foreground">
+              Configure how this check item behaves.
+            </p>
+          </div>
+          <DynamicForm
+            schema={collectorDef.configSchema}
+            value={entry.config}
+            onChange={onConfigChange}
+            onValidChange={onValidChange}
+          />
+        </div>
+      )}
+
+      {/* Assertions */}
+      {collectorDef?.resultSchema && (
+        <div className="space-y-3 pt-2 border-t">
+          <div>
+            <Label className="text-sm font-semibold">Assertions</Label>
+            <p className="text-xs text-muted-foreground">
+              Define conditions that must be met for this check to pass.
+            </p>
+          </div>
+          <AssertionBuilder
+            resultSchema={collectorDef.resultSchema}
+            assertions={
+              (entry.assertions as unknown as Assertion[]) ?? []
+            }
+            onChange={(assertions) =>
+              onAssertionsChange(
+                assertions as unknown as CollectorConfigEntry["assertions"],
+              )
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/editor/EditorPanel.tsx

@@ -0,0 +1,164 @@
+import React from "react";
+import type {
+  CollectorConfigEntry,
+  CollectorDto,
+  HealthCheckStrategyDto,
+} from "@checkstack/healthcheck-common";
+import type { TreeNodeId } from "./EditorTree";
+import { GeneralSection } from "./GeneralSection";
+import { CollectorSection } from "./CollectorSection";
+import { CollectorPicker } from "./CollectorPicker";
+import { TeamAccessEditor } from "@checkstack/auth-frontend";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface EditorPanelProps {
+  selectedNode: TreeNodeId;
+  formState: {
+    name: string;
+    intervalSeconds: number;
+    strategyConfig: Record<string, unknown>;
+    collectors: CollectorConfigEntry[];
+  };
+  strategy: HealthCheckStrategyDto | undefined;
+  availableCollectors: CollectorDto[];
+  collectorsLoading: boolean;
+  isEditMode: boolean;
+  configId: string | undefined;
+  onNameChange: (name: string) => void;
+  onIntervalChange: (interval: number) => void;
+  onStrategyConfigChange: (config: Record<string, unknown>) => void;
+  onStrategyConfigValidChange: (isValid: boolean) => void;
+  onCollectorConfigChange: (
+    entryId: string,
+    config: Record<string, unknown>,
+  ) => void;
+  onCollectorAssertionsChange: (
+    entryId: string,
+    assertions: CollectorConfigEntry["assertions"],
+  ) => void;
+  onCollectorValidChange: (entryId: string, isValid: boolean) => void;
+  onCollectorRemove: (entryId: string) => void;
+  onCollectorAdd: (collectorId: string) => void;
+  strategyId: string;
+}
+
+// =============================================================================
+// PANEL COMPONENT
+// =============================================================================
+
+export const EditorPanel: React.FC<EditorPanelProps> = ({
+  selectedNode,
+  formState,
+  strategy,
+  availableCollectors,
+  collectorsLoading,
+  isEditMode,
+  configId,
+  onNameChange,
+  onIntervalChange,
+  onStrategyConfigChange,
+  onStrategyConfigValidChange,
+  onCollectorConfigChange,
+  onCollectorAssertionsChange,
+  onCollectorValidChange,
+  onCollectorRemove,
+  onCollectorAdd,
+  strategyId,
+}) => {
+  // --- General Section ---
+  if (selectedNode === "general") {
+    return (
+      <div className="p-6">
+        <GeneralSection
+          name={formState.name}
+          intervalSeconds={formState.intervalSeconds}
+          strategyConfig={formState.strategyConfig}
+          strategy={strategy}
+          onNameChange={onNameChange}
+          onIntervalChange={onIntervalChange}
+          onStrategyConfigChange={onStrategyConfigChange}
+          onStrategyConfigValidChange={onStrategyConfigValidChange}
+        />
+      </div>
+    );
+  }
+
+  // --- Collector Picker ---
+  if (selectedNode === "collector-picker") {
+    return (
+      <div className="p-6">
+        <CollectorPicker
+          availableCollectors={availableCollectors}
+          configuredCollectors={formState.collectors}
+          loading={collectorsLoading}
+          onAdd={onCollectorAdd}
+          strategyId={strategyId}
+        />
+      </div>
+    );
+  }
+
+  // --- Access Control ---
+  if (selectedNode === "access") {
+    return (
+      <div className="p-6">
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-lg font-semibold">Access Control</h2>
+            <p className="text-sm text-muted-foreground">
+              Manage team permissions for this health check configuration.
+            </p>
+          </div>
+          {isEditMode && configId ? (
+            <TeamAccessEditor
+              resourceType="healthcheck.configuration"
+              resourceId={configId}
+              compact
+              expanded
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground italic">
+              Access control is available after saving the configuration.
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // --- Collector Section ---
+  if (selectedNode.startsWith("collector:")) {
+    const entryId = selectedNode.replace("collector:", "");
+    const entry = formState.collectors.find((c) => c.id === entryId);
+
+    if (!entry) {
+      return (
+        <div className="p-6 text-muted-foreground">Collector not found.</div>
+      );
+    }
+
+    const collectorDef = availableCollectors.find(
+      (c) => c.id === entry.collectorId,
+    );
+
+    return (
+      <div className="p-6">
+        <CollectorSection
+          entry={entry}
+          collectorDef={collectorDef}
+          onConfigChange={(config) => onCollectorConfigChange(entryId, config)}
+          onAssertionsChange={(assertions) =>
+            onCollectorAssertionsChange(entryId, assertions)
+          }
+          onValidChange={(isValid) => onCollectorValidChange(entryId, isValid)}
+          onRemove={() => onCollectorRemove(entryId)}
+        />
+      </div>
+    );
+  }
+
+  return;
+};