@checkstack/satellite-frontend 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# @checkstack/satellite-frontend
+
+## 0.2.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`
+
+### Patch Changes
+
+- Updated dependencies [26d8bae]
+  - @checkstack/ui@1.3.0
+  - @checkstack/satellite-common@0.2.0

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@checkstack/satellite-frontend",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "src/index.tsx",
+  "checkstack": {
+    "type": "frontend"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkstack/common": "0.6.5",
+    "@checkstack/frontend-api": "0.3.9",
+    "@checkstack/satellite-common": "0.1.0",
+    "@checkstack/signal-frontend": "0.0.15",
+    "@checkstack/ui": "1.2.1",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.20.0"
+  },
+  "devDependencies": {
+    "@checkstack/tsconfig": "0.0.5",
+    "@checkstack/scripts": "0.1.2",
+    "@types/react": "^18.2.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/components/CreateSatelliteDialog.tsx

@@ -0,0 +1,219 @@
+import React, { useState } from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { SatelliteApi } from "@checkstack/satellite-common";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+  Label,
+  useToast,
+} from "@checkstack/ui";
+import { Copy, AlertTriangle } from "lucide-react";
+import { extractErrorMessage } from "@checkstack/common";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: () => void;
+}
+
+interface CreatedCredentials {
+  clientId: string;
+  token: string;
+}
+
+export const CreateSatelliteDialog: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  onCreated,
+}) => {
+  const satelliteClient = usePluginClient(SatelliteApi);
+  const toast = useToast();
+
+  const [name, setName] = useState("");
+  const [region, setRegion] = useState("");
+  const [credentials, setCredentials] = useState<
+    CreatedCredentials | undefined
+  >();
+
+  const createMutation = satelliteClient.createSatellite.useMutation({
+    onSuccess: (data) => {
+      setCredentials({
+        clientId: data.satellite.id,
+        token: data.token,
+      });
+      toast.success("Satellite created successfully");
+      onCreated();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to create satellite"));
+    },
+  });
+
+  const handleSubmit = () => {
+    if (!name.trim()) {
+      toast.error("Name is required");
+      return;
+    }
+    if (!region.trim()) {
+      toast.error("Region is required");
+      return;
+    }
+
+    createMutation.mutate({
+      name: name.trim(),
+      region: region.trim(),
+      tags: {},
+    });
+  };
+
+  const handleClose = () => {
+    setName("");
+    setRegion("");
+    setCredentials(undefined);
+    onOpenChange(false);
+  };
+
+  const copyToClipboard = async (text: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied to clipboard`);
+    } catch {
+      toast.error("Failed to copy to clipboard");
+    }
+  };
+
+  // After creation, show credentials
+  if (credentials) {
+    return (
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Satellite Created</DialogTitle>
+            <DialogDescription>
+              Save these credentials securely. The token will not be shown again.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="rounded-md border border-warning/50 bg-warning/10 p-3 flex items-start gap-2">
+              <AlertTriangle className="h-4 w-4 text-warning mt-0.5 shrink-0" />
+              <p className="text-sm text-warning">
+                Copy and save both values now. The token cannot be retrieved
+                after closing this dialog.
+              </p>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="client-id">Client ID</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="client-id"
+                  value={credentials.clientId}
+                  readOnly
+                  className="font-mono text-sm"
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() =>
+                    void copyToClipboard(credentials.clientId, "Client ID")
+                  }
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="token">Token</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="token"
+                  value={credentials.token}
+                  readOnly
+                  className="font-mono text-sm"
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() =>
+                    void copyToClipboard(credentials.token, "Token")
+                  }
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <div className="grid gap-2 mt-2">
+              <Label>Environment Variables</Label>
+              <pre className="rounded-md bg-muted p-3 text-xs font-mono overflow-x-auto">
+                {`CHECKSTACK_CORE_URL=<your-core-url>\nCHECKSTACK_SATELLITE_CLIENT_ID=${credentials.clientId}\nCHECKSTACK_SATELLITE_TOKEN=${credentials.token}`}
+              </pre>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button onClick={handleClose}>Done</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Creation form
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Satellite</DialogTitle>
+          <DialogDescription>
+            Deploy a satellite node to run health checks from a remote location.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="sat-name">Name</Label>
+            <Input
+              id="sat-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="EU West Production"
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="sat-region">Region</Label>
+            <Input
+              id="sat-region"
+              value={region}
+              onChange={(e) => setRegion(e.target.value)}
+              placeholder="eu-west-1"
+            />
+            <p className="text-xs text-muted-foreground">
+              A descriptive identifier for the geographic location, e.g.
+              &quot;eu-west-1&quot;, &quot;us-east-2&quot;, or
+              &quot;datacenter-fra&quot;.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={createMutation.isPending}>
+            {createMutation.isPending ? "Creating..." : "Create Satellite"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/SatelliteMenuItems.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Satellite } from "lucide-react";
+import type { UserMenuItemsContext } from "@checkstack/frontend-api";
+import { DropdownMenuItem } from "@checkstack/ui";
+import { resolveRoute } from "@checkstack/common";
+import {
+  satelliteRoutes,
+  satelliteAccess,
+  pluginMetadata,
+} from "@checkstack/satellite-common";
+
+export const SatelliteMenuItems = ({
+  accessRules: userPerms,
+}: UserMenuItemsContext) => {
+  const qualifiedId = `${pluginMetadata.pluginId}.${satelliteAccess.satellite.read.id}`;
+  const canRead = userPerms.includes("*") || userPerms.includes(qualifiedId);
+
+  if (!canRead) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <Link to={resolveRoute(satelliteRoutes.routes.list)}>
+      <DropdownMenuItem icon={<Satellite className="w-4 h-4" />}>
+        Satellites
+      </DropdownMenuItem>
+    </Link>
+  );
+};

package/src/components/SatelliteStatusBadge.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Badge } from "@checkstack/ui";
+import type { SatelliteStatus } from "@checkstack/satellite-common";
+
+const STATUS_CONFIG: Record<
+  SatelliteStatus,
+  { label: string; variant: "success" | "destructive" }
+> = {
+  online: { label: "Online", variant: "success" },
+  offline: { label: "Offline", variant: "destructive" },
+};
+
+export const SatelliteStatusBadge: React.FC<{
+  status: SatelliteStatus;
+}> = ({ status }) => {
+  const config = STATUS_CONFIG[status];
+  return <Badge variant={config.variant}>{config.label}</Badge>;
+};

package/src/index.tsx

@@ -0,0 +1,31 @@
+import {
+  createFrontendPlugin,
+  createSlotExtension,
+  UserMenuItemsSlot,
+} from "@checkstack/frontend-api";
+import {
+  satelliteRoutes,
+  pluginMetadata,
+  satelliteAccess,
+} from "@checkstack/satellite-common";
+import { SatelliteListPage } from "./pages/SatelliteListPage";
+import { SatelliteMenuItems } from "./components/SatelliteMenuItems";
+
+export default createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: satelliteRoutes.routes.list,
+      element: <SatelliteListPage />,
+      title: "Satellites",
+      accessRule: satelliteAccess.satellite.read,
+    },
+  ],
+  apis: [],
+  extensions: [
+    createSlotExtension(UserMenuItemsSlot, {
+      id: "satellite.user-menu.items",
+      component: SatelliteMenuItems,
+    }),
+  ],
+});

package/src/pages/SatelliteListPage.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import {
+  SatelliteApi,
+  satelliteAccess,
+  SATELLITE_STATUS_CHANGED,
+} from "@checkstack/satellite-common";
+import type { SatelliteWithStatus } from "@checkstack/satellite-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  LoadingSpinner,
+  EmptyState,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  useToast,
+  ConfirmationModal,
+  PageLayout,
+} from "@checkstack/ui";
+import { Plus, Satellite, Trash2, MapPin } from "lucide-react";
+import { SatelliteStatusBadge } from "../components/SatelliteStatusBadge";
+import { CreateSatelliteDialog } from "../components/CreateSatelliteDialog";
+import { extractErrorMessage } from "@checkstack/common";
+
+const SatelliteListPageContent: React.FC = () => {
+  const satelliteClient = usePluginClient(SatelliteApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
+
+  const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
+    satelliteAccess.satellite.manage,
+  );
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<
+    SatelliteWithStatus | undefined
+  >();
+
+  const {
+    data: satellites,
+    isLoading,
+    refetch,
+  } = satelliteClient.listSatellites.useQuery();
+
+  // Real-time status updates
+  useSignal(SATELLITE_STATUS_CHANGED, () => {
+    void refetch();
+  });
+
+  const deleteMutation = satelliteClient.deleteSatellite.useMutation({
+    onSuccess: () => {
+      toast.success("Satellite deleted");
+      void refetch();
+      setDeleteTarget(undefined);
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to delete satellite"));
+    },
+  });
+
+  const handleDelete = () => {
+    if (!deleteTarget) return;
+    deleteMutation.mutate({ id: deleteTarget.id });
+  };
+
+  const satelliteList = satellites?.satellites ?? [];
+
+  return (
+    <PageLayout
+      title="Satellites"
+      subtitle="Manage distributed satellite nodes for remote health check execution"
+      icon={Satellite}
+      loading={accessLoading}
+      allowed={canManage}
+      actions={
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Create Satellite
+        </Button>
+      }
+    >
+      <Card>
+        <CardHeader className="border-b border-border">
+          <div className="flex items-center gap-2">
+            <Satellite className="h-5 w-5 text-muted-foreground" />
+            <CardTitle>Satellite Nodes</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          {isLoading ? (
+            <div className="p-12 flex justify-center">
+              <LoadingSpinner />
+            </div>
+          ) : satelliteList.length === 0 ? (
+            <EmptyState
+              title="No satellites configured"
+              description="Deploy satellite nodes to execute health checks from multiple geographic locations."
+            />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Region</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Version</TableHead>
+                  <TableHead className="w-20">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {satelliteList.map((sat) => (
+                  <TableRow key={sat.id}>
+                    <TableCell>
+                      <p className="font-medium">{sat.name}</p>
+                      <p className="text-xs text-muted-foreground font-mono">
+                        {sat.id}
+                      </p>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                        <MapPin className="h-3.5 w-3.5" />
+                        {sat.region}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <SatelliteStatusBadge status={sat.status} />
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm text-muted-foreground font-mono">
+                        {sat.version ?? "—"}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setDeleteTarget(sat)}
+                      >
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <CreateSatelliteDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onCreated={() => void refetch()}
+      />
+
+      <ConfirmationModal
+        isOpen={!!deleteTarget}
+        onClose={() => setDeleteTarget(undefined)}
+        title="Delete Satellite"
+        message={`Are you sure you want to delete satellite "${deleteTarget?.name}"? This will remove all satellite assignments from health checks.`}
+        confirmText="Delete"
+        variant="danger"
+        onConfirm={handleDelete}
+        isLoading={deleteMutation.isPending}
+      />
+    </PageLayout>
+  );
+};
+
+export const SatelliteListPage = wrapInSuspense(SatelliteListPageContent);

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@checkstack/tsconfig/frontend.json",
+  "include": [
+    "src"
+  ]
+}