@checkstack/ui 1.2.1 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @checkstack/ui
 
+## 1.3.1
+
+### Patch Changes
+
+- 765b764: Optimize AmbientBackground performance by replacing thousand-div grid with a single-element CSS mask and hardware-accelerated Aurora Mesh animations.
+
+## 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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "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",

package/src/components/AmbientBackground.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState } from "react";
+import React from "react";
 import { cn } from "../utils";
 
 interface AmbientBackgroundProps {
@@ -6,53 +6,15 @@ interface AmbientBackgroundProps {
   className?: string;
 }
 
-const TILE_SIZE = 48;
-
 /**
- * AmbientBackground - Animated checkerboard pattern
- * Features a chess-inspired grid where random tiles glow with the primary color.
- * Dynamically adapts to screen size.
+ * AmbientBackground - High-performance background pattern
+ * Features an "Inverse Glow Grid" where aurora effects shine through transparent grid lines.
+ * Provides a premium "glowing grid" aesthetic with minimal performance impact.
  */
 export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
   children,
   className,
 }) => {
-  const [dimensions, setDimensions] = useState({ cols: 40, rows: 25 });
-
-  // Calculate grid size based on viewport
-  useEffect(() => {
-    const updateDimensions = () => {
-      const cols = Math.ceil(globalThis.innerWidth / TILE_SIZE) + 2;
-      const rows = Math.ceil(globalThis.innerHeight / TILE_SIZE) + 2;
-      setDimensions({ cols, rows });
-    };
-
-    updateDimensions();
-    globalThis.addEventListener("resize", updateDimensions);
-    return () => globalThis.removeEventListener("resize", updateDimensions);
-  }, []);
-
-  // Generate tile grid with staggered animation delays
-  const tiles = useMemo(() => {
-    const { cols, rows } = dimensions;
-    const result: Array<{ key: string; delay: number; isLight: boolean }> = [];
-
-    for (let row = 0; row < rows; row++) {
-      for (let col = 0; col < cols; col++) {
-        const isLight = (row + col) % 2 === 0;
-        // Negative delay so tiles start at different points in their 12s cycle
-        // This creates a gentle, staggered breathing effect across the grid
-        const delay = -((row * 7 + col * 13 + row * col) % 24) * 0.5;
-        result.push({
-          key: `${row}-${col}`,
-          delay,
-          isLight,
-        });
-      }
-    }
-    return result;
-  }, [dimensions]);
-
   return (
     <div
       className={cn(
@@ -60,40 +22,49 @@ export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
         className
       )}
     >
-      {/* Checkerboard grid - covers full viewport */}
-      <div
-        className="pointer-events-none fixed inset-0 overflow-hidden"
-        style={{
-          display: "grid",
-          gridTemplateColumns: `repeat(${dimensions.cols}, ${TILE_SIZE}px)`,
-          gridTemplateRows: `repeat(${dimensions.rows}, ${TILE_SIZE}px)`,
-        }}
-      >
-        {tiles.map(({ key, delay, isLight }) => (
-          <div
-            key={key}
-            className="tile-glow"
-            style={
-              {
-                width: TILE_SIZE,
-                height: TILE_SIZE,
-                backgroundColor: isLight
-                  ? "hsl(var(--muted-foreground) / 0.12)"
-                  : "hsl(var(--muted-foreground) / 0.04)",
-                "--glow-delay": `${delay}s`,
-              } as React.CSSProperties
-            }
-          />
-        ))}
+      {/* Performance optimized background layers */}
+      <div className="pointer-events-none fixed inset-0 overflow-hidden">
+        {/* Layer 1: Aurora Blobs (Bottom) - Hardware accelerated via transform/compositor */}
+        <div
+          className="aurora-blob absolute w-[50%] h-[50%] -top-[10%] -left-[10%]"
+          style={{
+            background: "radial-gradient(circle at center, hsl(var(--primary) / 0.8), transparent 60%)",
+            animation: "aurora-float-1 25s ease-in-out infinite",
+          }}
+        />
+        <div
+          className="aurora-blob absolute w-[40%] h-[40%] bottom-[10%] right-[10%]"
+          style={{
+            background: "radial-gradient(circle at center, hsl(var(--chart-2) / 0.7), transparent 60%)",
+            animation: "aurora-float-2 20s ease-in-out infinite",
+          }}
+        />
+        <div
+          className="aurora-blob absolute w-[35%] h-[35%] top-[30%] left-[40%]"
+          style={{
+            background: "radial-gradient(circle at center, hsl(var(--primary) / 0.6), transparent 60%)",
+            animation: "aurora-float-3 30s ease-in-out infinite",
+          }}
+        />
+        <div
+          className="aurora-blob absolute w-[45%] h-[45%] bottom-[20%] left-[10%]"
+          style={{
+            background: "radial-gradient(circle at center, hsl(var(--chart-1) / 0.5), transparent 60%)",
+            animation: "aurora-float-4 35s ease-in-out infinite",
+          }}
+        />
+
+        {/* Layer 2: Inverse Grid Mask (Top) - Transparent lines on a solid background */}
+        <div className="ambient-grid-inverse absolute inset-0 overflow-hidden" />
       </div>
 
-      {/* Edge vignette to fade out the grid smoothly */}
+      {/* Layer 3: Edge vignette to fade out the background smoothly */}
       <div
         className="pointer-events-none fixed inset-0"
         style={{
           background: `
-            linear-gradient(to right, hsl(var(--background)) 0%, transparent 5%, transparent 95%, hsl(var(--background)) 100%),
-            linear-gradient(to bottom, hsl(var(--background)) 0%, transparent 8%, transparent 92%, hsl(var(--background)) 100%)
+            linear-gradient(to right, hsl(var(--background)) 0%, transparent 15%, transparent 85%, hsl(var(--background)) 100%),
+            linear-gradient(to bottom, hsl(var(--background)) 0%, transparent 15%, transparent 85%, hsl(var(--background)) 100%)
           `,
         }}
       />

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

package/src/themes.css

@@ -143,41 +143,15 @@
 
 /* Custom animations */
 @keyframes bell-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  10% {
-    transform: rotate(15deg);
-  }
-
-  20% {
-    transform: rotate(-15deg);
-  }
-
-  30% {
-    transform: rotate(10deg);
-  }
-
-  40% {
-    transform: rotate(-10deg);
-  }
-
-  50% {
-    transform: rotate(5deg);
-  }
-
-  60% {
-    transform: rotate(-5deg);
-  }
-
-  70% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
+  0% { transform: rotate(0deg); }
+  10% { transform: rotate(15deg); }
+  20% { transform: rotate(-15deg); }
+  30% { transform: rotate(10deg); }
+  40% { transform: rotate(-10deg); }
+  50% { transform: rotate(5deg); }
+  60% { transform: rotate(-5deg); }
+  70% { transform: rotate(0deg); }
+  100% { transform: rotate(0deg); }
 }
 
 .animate-bell-ring {
@@ -185,20 +159,48 @@
   transform-origin: top center;
 }
 
-/* Subtle tile pulse animation - gentle breathing effect */
-@keyframes tile-pulse {
+/* High-performance ambient background styles */
+@keyframes aurora-float-1 {
+  0% { transform: translate(-15vw, -10vh) rotate(0deg); }
+  50% { transform: translate(35vw, 25vh) rotate(180deg); }
+  100% { transform: translate(-15vw, -10vh) rotate(360deg); }
+}
 
-  0%,
-  100% {
-    opacity: 1;
-  }
+@keyframes aurora-float-2 {
+  0% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(-30vw, 25vh) scale(1.2); }
+  100% { transform: translate(0, 0) scale(1); }
+}
 
-  50% {
-    opacity: 0.4;
-  }
+@keyframes aurora-float-3 {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  50% { transform: translate(25vw, -30vh) rotate(-180deg); }
+  100% { transform: translate(0, 0) rotate(-360deg); }
+}
+
+@keyframes aurora-float-4 {
+  0% { transform: translate(0, 0) scale(1.1); }
+  50% { transform: translate(-20vw, -20vh) scale(1); }
+  100% { transform: translate(0, 0) scale(1.1); }
+}
+
+.ambient-grid {
+  background-image:
+    linear-gradient(to right, hsl(var(--muted-foreground) / 0.15) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(var(--muted-foreground) / 0.15) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+
+.ambient-grid-inverse {
+  background: hsl(var(--background));
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='47' height='47' fill='black'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='47' height='47' fill='black'/%3E%3C/svg%3E");
 }
 
-.tile-glow {
-  animation: tile-pulse 12s ease-in-out infinite;
-  animation-delay: var(--glow-delay, 0s);
+.aurora-blob {
+  position: absolute;
+  filter: blur(60px);
+  opacity: 0.6;
+  pointer-events: none;
+  will-change: transform;
 }