@checkstack/dependency-frontend 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,42 @@
+# @checkstack/dependency-frontend
+
+## 0.2.0
+
+### Minor Changes
+
+- 3f36a64: Add System Dependencies plugin
+
+  Introduces the system dependencies feature with three new core plugins and
+  extends the catalog with a new SystemEditorSlot extension point.
+
+  **New plugins:**
+
+  - **dependency-common**: Shared Zod schemas, RPC contract with resource-level access control, signal definitions, and routes
+  - **dependency-backend**: Drizzle schema, DependencyService with cycle detection, WarningEvaluationService with transitive impact matrix, RPC router with signal broadcasting, and per-user canvas node position persistence
+  - **dependency-frontend**: DependencyBadge (dashboard), DependencyAlert (system details), DependencyEditor (system editor dialog), and interactive DependencyMapPage (React Flow canvas)
+
+  **Catalog extensions:**
+
+  - **catalog-common**: New `SystemEditorSlot` for plugin-injected sections in the system editor dialog
+  - **catalog-frontend**: `SystemEditor` renders the slot after TeamAccessEditor for existing systems
+
+  **Key capabilities:**
+
+  - Directional dependency edges between systems (source depends on target)
+  - Three impact types: informational, degraded, critical
+  - Transitive multi-hop warning propagation with toggle switch
+  - Cycle detection at creation time with graphical chain visualization
+  - Health check-level dependency rules
+  - Interactive dependency map with drag-to-connect, edge click editor, and auto-saving node positions
+  - Inline editing of dependencies in both the system editor and the map canvas
+  - Team-based resource-level access control on all mutation endpoints
+  - Realtime signal-driven UI updates
+
+### Patch Changes
+
+- Updated dependencies [1f191cf]
+- Updated dependencies [3f36a64]
+  - @checkstack/healthcheck-common@0.9.0
+  - @checkstack/dashboard-frontend@0.3.24
+  - @checkstack/dependency-common@0.2.0
+  - @checkstack/catalog-common@1.3.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@checkstack/dependency-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/catalog-common": "1.2.11",
+    "@checkstack/common": "0.6.4",
+    "@checkstack/dashboard-frontend": "0.3.23",
+    "@checkstack/dependency-common": "0.1.0",
+    "@checkstack/frontend-api": "0.3.8",
+    "@checkstack/healthcheck-common": "0.8.4",
+    "@checkstack/signal-frontend": "0.0.14",
+    "@checkstack/ui": "1.2.0",
+    "@xyflow/react": "^12.10.2",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.20.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkstack/tsconfig": "0.0.4",
+    "@checkstack/scripts": "0.1.2"
+  }
+}

package/src/components/DependencyAlert.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { SystemDetailsTopSlot } from "@checkstack/catalog-common";
+import {
+  DependencyApi,
+  DEPENDENCY_CHANGED,
+  DEPENDENCY_WARNINGS_CHANGED,
+  type DerivedState,
+  type AffectedUpstream,
+} from "@checkstack/dependency-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+} from "@checkstack/ui";
+import { ArrowUpRight, AlertTriangle, Info } from "lucide-react";
+
+type Props = SlotContext<typeof SystemDetailsTopSlot>;
+
+function getAlertStyle(state: DerivedState): {
+  border: string;
+  bg: string;
+  headerBg: string;
+  icon: React.ReactNode;
+  label: string;
+} {
+  switch (state) {
+    case "down": {
+      return {
+        border: "border-destructive/30",
+        bg: "bg-destructive/5",
+        headerBg: "bg-destructive/10",
+        icon: <AlertTriangle className="h-5 w-5 text-destructive" />,
+        label: "Critical Upstream Failure",
+      };
+    }
+    case "degraded": {
+      return {
+        border: "border-warning/30",
+        bg: "bg-warning/5",
+        headerBg: "bg-warning/10",
+        icon: <AlertTriangle className="h-5 w-5 text-warning" />,
+        label: "Upstream Degradation",
+      };
+    }
+    default: {
+      return {
+        border: "border-info/30",
+        bg: "bg-info/5",
+        headerBg: "bg-info/10",
+        icon: <Info className="h-5 w-5 text-info" />,
+        label: "Upstream Dependency Notice",
+      };
+    }
+  }
+}
+
+function getImpactBadge(impactType: string): React.ReactNode {
+  switch (impactType) {
+    case "critical": {
+      return <Badge variant="destructive">Critical</Badge>;
+    }
+    case "degraded": {
+      return <Badge variant="warning">Degraded</Badge>;
+    }
+    default: {
+      return <Badge variant="secondary">Info</Badge>;
+    }
+  }
+}
+
+/**
+ * Alert banner component injected into the SystemDetailsTopSlot.
+ * Shows warnings when upstream dependencies are affected.
+ */
+export const DependencyAlert: React.FC<Props> = ({ system }) => {
+  const depClient = usePluginClient(DependencyApi);
+
+  const { data, refetch } = depClient.getWarningsForSystem.useQuery(
+    { systemId: system?.id ?? "" },
+    { enabled: !!system?.id },
+  );
+
+  // Listen for dependency graph changes
+  useSignal(DEPENDENCY_CHANGED, () => {
+    void refetch();
+  });
+
+  // Listen for warning re-evaluations
+  useSignal(DEPENDENCY_WARNINGS_CHANGED, ({ affectedSystemIds }) => {
+    if (system?.id && affectedSystemIds.includes(system.id)) {
+      void refetch();
+    }
+  });
+
+  if (!data || data.affectedUpstreams.length === 0) return;
+
+  const style = getAlertStyle(data.derivedState);
+
+  return (
+    <Card className={`${style.border} ${style.bg}`}>
+      <CardHeader
+        className={`border-b border-border py-3 ${style.headerBg}`}
+      >
+        <div className="flex items-center gap-2">
+          {style.icon}
+          <CardTitle className="text-lg font-semibold">{style.label}</CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="p-4 space-y-2">
+        <p className="text-sm text-muted-foreground mb-3">
+          This system is affected by upstream dependency issues:
+        </p>
+        {data.affectedUpstreams.map((upstream: AffectedUpstream) => (
+          <div
+            key={upstream.systemId}
+            className="flex items-center justify-between p-2 rounded border border-border bg-background"
+          >
+            <div className="flex items-center gap-2">
+              <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">
+                {upstream.systemName}
+              </span>
+              {upstream.dependencyLabel && (
+                <span className="text-xs text-muted-foreground">
+                  ({upstream.dependencyLabel})
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="text-xs">
+                {upstream.ownStatus}
+              </Badge>
+              {getImpactBadge(upstream.impactType)}
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/DependencyBadge.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
+import {
+  DependencyApi,
+  DEPENDENCY_CHANGED,
+  DEPENDENCY_WARNINGS_CHANGED,
+  type DerivedState,
+} from "@checkstack/dependency-common";
+import { Badge } from "@checkstack/ui";
+
+type Props = SlotContext<typeof SystemStateBadgesSlot>;
+
+function getBadgeVariant(
+  state: DerivedState,
+): "info" | "warning" | "destructive" {
+  switch (state) {
+    case "down": {
+      return "destructive";
+    }
+    case "degraded": {
+      return "warning";
+    }
+    default: {
+      return "info";
+    }
+  }
+}
+
+function getBadgeLabel(state: DerivedState): string {
+  switch (state) {
+    case "down": {
+      return "Upstream Down";
+    }
+    case "degraded": {
+      return "Upstream Degraded";
+    }
+    default: {
+      return "Dep. Info";
+    }
+  }
+}
+
+/**
+ * Displays a dependency warning badge for a system on the dashboard.
+ * Shows nothing if no upstream systems are affected.
+ *
+ * Listens for realtime updates via signals.
+ */
+export const DependencyBadge: React.FC<Props> = ({ system }) => {
+  const depClient = usePluginClient(DependencyApi);
+
+  const { data, refetch } = depClient.getWarningsForSystem.useQuery(
+    { systemId: system?.id ?? "" },
+    { enabled: !!system?.id },
+  );
+
+  // Listen for dependency changes
+  useSignal(DEPENDENCY_CHANGED, () => {
+    void refetch();
+  });
+
+  // Listen for warning re-evaluations
+  useSignal(DEPENDENCY_WARNINGS_CHANGED, ({ affectedSystemIds }) => {
+    if (system?.id && affectedSystemIds.includes(system.id)) {
+      void refetch();
+    }
+  });
+
+  if (!data) return;
+
+  return (
+    <Badge variant={getBadgeVariant(data.derivedState)}>
+      {getBadgeLabel(data.derivedState)}
+    </Badge>
+  );
+};

package/src/components/DependencyEdgeForm.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import type { ImpactType } from "@checkstack/dependency-common";
+import { Toggle } from "@checkstack/ui";
+import { HealthCheckRulesEditor } from "./HealthCheckRulesEditor";
+
+interface HealthCheckRule {
+  healthCheckId: string;
+  overrideImpactType: ImpactType;
+}
+
+interface Props {
+  /** Current impact type */
+  impactType: ImpactType;
+  /** Callback when impact type changes */
+  onImpactTypeChange: (impactType: ImpactType) => void;
+  /** Current transitive (multi-hop) setting */
+  transitive: boolean;
+  /** Callback when transitive setting changes */
+  onTransitiveChange: (transitive: boolean) => void;
+  /** The upstream system ID — needed for health check rules lookup */
+  targetSystemId: string;
+  /** Current health check rules */
+  healthCheckRules: HealthCheckRule[];
+  /** Callback when health check rules change */
+  onHealthCheckRulesChange: (rules: HealthCheckRule[]) => void;
+  /** Compact mode for tight layouts (e.g. map edge editor panel) */
+  compact?: boolean;
+}
+
+/**
+ * Shared form fields for editing a dependency edge.
+ * Used by both the list editor (DependencyEditor) and the map edge editor panel.
+ * Renders: impact type select, multi-hop toggle, and health check rules editor.
+ */
+export const DependencyEdgeForm: React.FC<Props> = ({
+  impactType,
+  onImpactTypeChange,
+  transitive,
+  onTransitiveChange,
+  targetSystemId,
+  healthCheckRules,
+  onHealthCheckRulesChange,
+  compact = false,
+}) => {
+  return (
+    <>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Impact</label>
+        <select
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+          value={impactType}
+          onChange={(e) => onImpactTypeChange(e.target.value as ImpactType)}
+        >
+          <option value="informational">Informational</option>
+          <option value="degraded">Degraded</option>
+          <option value="critical">Critical</option>
+        </select>
+      </div>
+      <div className="flex items-center justify-between rounded-lg border border-border p-3">
+        <div className="space-y-0.5">
+          <label className="text-sm font-medium">
+            {compact ? "Multi-hop" : "Multi-hop propagation"}
+          </label>
+          <p className="text-xs text-muted-foreground">
+            {compact
+              ? "Cascade failures transitively."
+              : "Propagate status warnings through transitive dependency chains."}
+          </p>
+        </div>
+        <Toggle
+          checked={transitive}
+          onCheckedChange={onTransitiveChange}
+          aria-label="Enable multi-hop propagation"
+        />
+      </div>
+      <HealthCheckRulesEditor
+        targetSystemId={targetSystemId}
+        rules={healthCheckRules}
+        onChange={onHealthCheckRulesChange}
+        compact={compact}
+      />
+    </>
+  );
+};