@checkstack/ui 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @checkstack/ui
 
+## 1.3.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`
+
+## 1.2.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]
+  - @checkstack/common@0.6.5
+  - @checkstack/frontend-api@0.3.9
+
 ## 1.2.0
 
 ### Minor Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
-    "@checkstack/common": "0.6.4",
-    "@checkstack/frontend-api": "0.3.8",
+    "@checkstack/common": "0.6.5",
+    "@checkstack/frontend-api": "0.3.9",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -31,7 +31,7 @@
     "@types/react": "^18.2.0",
     "@testing-library/react": "^16.0.0",
     "@checkstack/test-utils-frontend": "0.0.4",
-    "@checkstack/tsconfig": "0.0.4",
+    "@checkstack/tsconfig": "0.0.5",
     "@checkstack/scripts": "0.1.2"
   },
   "scripts": {

package/src/components/DynamicForm/DynamicForm.tsx

@@ -33,7 +33,8 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
     if (JSON.stringify(merged) !== JSON.stringify(value)) {
       onChange(merged);
     }
-  }, [schema]); // Only run when schema changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentional: runs only on schema change. Including onChange would re-fire on parent re-renders; including value would cause an infinite loop since this effect calls onChange(merged)
+  }, [schema]);
 
   // Compute validity and report changes
   React.useEffect(() => {

package/src/components/DynamicForm/DynamicOptionsField.tsx

@@ -13,6 +13,7 @@ import {
 
 import type { DynamicOptionsFieldProps, ResolverOption } from "./types";
 import { getCleanDescription, NONE_SENTINEL } from "./utils";
+import { extractErrorMessage } from "@checkstack/common";
 
 /**
  * Field component for dynamically resolved options.
@@ -72,7 +73,7 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
       .catch((error_) => {
         if (!cancelled) {
           setError(
-            error_ instanceof Error ? error_.message : "Failed to load options",
+            extractErrorMessage(error_, "Failed to load options"),
           );
           setLoading(false);
         }

package/src/components/DynamicForm/FormField.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useEffect, useState } from "react";
 import { Plus, Trash2 } from "lucide-react";
 
 import {
@@ -37,6 +37,14 @@ export const FormField: React.FC<FormFieldProps> = ({
 }) => {
   const description = propSchema.description || "";
 
+  // Const field handling - must be before any early returns (rules-of-hooks)
+  const isConstField = propSchema.const !== undefined;
+  useEffect(() => {
+    if (isConstField && value !== propSchema.const) {
+      onChange(propSchema.const);
+    }
+  }, [isConstField, value, propSchema.const, onChange]);
+
   // Dynamic options via resolver
   const resolverName = propSchema["x-options-resolver"];
   if (resolverName && optionsResolvers) {
@@ -57,14 +65,7 @@ export const FormField: React.FC<FormFieldProps> = ({
     );
   }
 
-  // Const field handling - auto-set value and hide (value is fixed)
-  if (propSchema.const !== undefined) {
-    // Silently ensure the value is set, no UI needed
-    React.useEffect(() => {
-      if (value !== propSchema.const) {
-        onChange(propSchema.const);
-      }
-    }, [value, propSchema.const, onChange]);
+  if (isConstField) {
     return <></>;
   }
 
@@ -653,7 +654,7 @@ const SecretField: React.FC<{
   isRequired?: boolean;
   onChange: (val: unknown) => void;
 }> = ({ id, label, description, value, isRequired, onChange }) => {
-  const [showPassword, setShowPassword] = React.useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const currentValue = value || "";
   const hasExistingValue = currentValue.length > 0;
 
@@ -702,7 +703,7 @@ const SecretTextareaField: React.FC<{
   isRequired?: boolean;
   onChange: (val: unknown) => void;
 }> = ({ id, label, description, value, isRequired, onChange }) => {
-  const [showContent, setShowContent] = React.useState(false);
+  const [showContent, setShowContent] = useState(false);
   const currentValue = value || "";
   const hasExistingValue = currentValue.length > 0;
 
@@ -723,7 +724,9 @@ const SecretTextareaField: React.FC<{
             value={currentValue}
             onChange={(e) => onChange(e.target.value)}
             placeholder={
-              hasExistingValue ? "Leave empty to keep existing value" : "Paste content here"
+              hasExistingValue
+                ? "Leave empty to keep existing value"
+                : "Paste content here"
             }
             rows={5}
             className="pr-10 font-mono text-xs"
@@ -750,7 +753,9 @@ const SecretTextareaField: React.FC<{
               }
             }}
             placeholder={
-              hasExistingValue ? "Leave empty to keep existing value" : "Paste content here"
+              hasExistingValue
+                ? "Leave empty to keep existing value"
+                : "Paste content here"
             }
             rows={3}
             className="pr-10"

package/src/components/IDELayout/index.tsx

@@ -0,0 +1,200 @@
+import React from "react";
+import { AlertCircle, CheckCircle2 } from "lucide-react";
+import { Badge } from "../Badge";
+
+// =============================================================================
+// SHARED TYPES
+// =============================================================================
+
+/**
+ * Generic validation issue for IDE-style editors.
+ * nodeId identifies which tree node the issue belongs to.
+ */
+export interface ValidationIssue {
+  nodeId: string;
+  message: string;
+}
+
+// =============================================================================
+// VALIDATION DOT
+// =============================================================================
+
+/**
+ * Small red dot indicator shown on tree nodes with validation issues.
+ */
+export function IDEValidationDot({
+  nodeId,
+  issues,
+}: {
+  nodeId: string;
+  issues: ValidationIssue[];
+}) {
+  const nodeIssues = issues.filter((i) => i.nodeId === nodeId);
+  if (nodeIssues.length === 0) return;
+
+  return (
+    <span className="ml-auto flex h-2 w-2 rounded-full bg-destructive shrink-0" />
+  );
+}
+
+// =============================================================================
+// TREE NODE
+// =============================================================================
+
+interface IDETreeNodeProps {
+  nodeId: string;
+  label: string;
+  icon: React.ElementType;
+  selected: boolean;
+  onClick: () => void;
+  issues?: ValidationIssue[];
+  indent?: boolean;
+  badge?: string;
+}
+
+/**
+ * Generic tree node for IDE-style left panel navigation.
+ * Highlights when selected, shows validation dots and optional badges.
+ */
+export const IDETreeNode: React.FC<IDETreeNodeProps> = ({
+  nodeId,
+  label,
+  icon: Icon,
+  selected,
+  onClick,
+  issues = [],
+  indent = false,
+  badge,
+}) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors ${
+        indent ? "pl-7" : ""
+      } ${
+        selected
+          ? "bg-primary/10 text-primary border-l-2 border-primary"
+          : "hover:bg-muted/50 border-l-2 border-transparent"
+      }`}
+    >
+      <Icon className="h-4 w-4 shrink-0 opacity-60" />
+      <span className="truncate flex-1">{label}</span>
+      {badge && (
+        <Badge variant="secondary" className="text-[10px] shrink-0">
+          {badge}
+        </Badge>
+      )}
+      <IDEValidationDot nodeId={nodeId} issues={issues} />
+    </button>
+  );
+};
+
+// =============================================================================
+// TREE SECTION HEADER
+// =============================================================================
+
+/**
+ * Section header for grouping tree nodes (e.g., "Check Items", "Permissions").
+ */
+export const IDETreeSection: React.FC<{ label: string }> = ({ label }) => (
+  <div className="px-3 pt-4 pb-1">
+    <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+      {label}
+    </span>
+  </div>
+);
+
+// =============================================================================
+// STATUS BAR
+// =============================================================================
+
+interface IDEStatusBarProps {
+  issues: ValidationIssue[];
+  onIssueClick: (nodeId: string) => void;
+}
+
+/**
+ * Bottom status bar showing validation issue count with clickable navigation.
+ */
+export const IDEStatusBar: React.FC<IDEStatusBarProps> = ({
+  issues,
+  onIssueClick,
+}) => {
+  if (issues.length === 0) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 mt-2 rounded-md border bg-card text-xs text-muted-foreground">
+        <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
+        <span>No issues found</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-2 mt-2 rounded-md border bg-card text-xs">
+      <div className="flex items-center gap-1.5 text-destructive shrink-0">
+        <AlertCircle className="h-3.5 w-3.5" />
+        <span className="font-medium">
+          {issues.length} {issues.length === 1 ? "issue" : "issues"}
+        </span>
+      </div>
+      <div className="flex items-center gap-2 overflow-x-auto">
+        {issues.map((issue, i) => (
+          <button
+            key={`${issue.nodeId}-${i}`}
+            type="button"
+            onClick={() => onIssueClick(issue.nodeId)}
+            className="text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap underline-offset-2 hover:underline"
+          >
+            {issue.message}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// =============================================================================
+// IDE LAYOUT
+// =============================================================================
+
+interface IDELayoutProps {
+  /** Left panel tree content */
+  tree: React.ReactNode;
+  /** Right panel editor content */
+  panel: React.ReactNode;
+  /** Optional status bar issues (renders IDEStatusBar automatically) */
+  issues?: ValidationIssue[];
+  /** Callback when a status bar issue is clicked */
+  onIssueClick?: (nodeId: string) => void;
+}
+
+/**
+ * Two-column IDE layout shell: left tree panel + right editor panel + status bar.
+ * Used by health check configuration editor and assignment editor.
+ */
+export const IDELayout: React.FC<IDELayoutProps> = ({
+  tree,
+  panel,
+  issues,
+  onIssueClick,
+}) => {
+  return (
+    <>
+      <div className="flex flex-col lg:flex-row gap-0 min-h-[60vh] border rounded-lg bg-card overflow-hidden">
+        {/* Explorer Tree — Left Panel */}
+        <div className="w-full lg:w-64 shrink-0 border-b lg:border-b-0 lg:border-r bg-muted/30">
+          {tree}
+        </div>
+
+        {/* Editor Panel — Right Panel */}
+        <div className="flex-1 min-w-0">{panel}</div>
+      </div>
+
+      {/* Status Bar */}
+      {issues && onIssueClick && (
+        <IDEStatusBar issues={issues} onIssueClick={onIssueClick} />
+      )}
+    </>
+  );
+};

package/src/index.ts

@@ -53,3 +53,4 @@ export * from "./components/AmbientBackground";
 export * from "./components/CodeEditor";
 export * from "./components/AnimatedNumber";
 export * from "./hooks/useAnimatedNumber";
+export * from "./components/IDELayout";