@checkstack/healthcheck-frontend 0.19.5 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,111 @@
 # @checkstack/healthcheck-frontend
 
+## 0.21.0
+
+### Minor Changes
+
+- 35bc682: feat(healthcheck): expose check + system run-context to script collectors
+
+  Script health checks can now read which check and system a run is for.
+  Previously shell scripts got only a curated env whitelist and inline
+  scripts only `context.config`, so a script had no built-in way to know
+  its own check name or the system it was checking.
+
+  - `@checkstack/backend-api`: new `CollectorRunContext` type
+    (`{ check: { id, name, intervalSeconds }, system: { id, name } }`) and
+    an optional `runContext` param on `CollectorStrategy.execute`. Optional,
+    so existing collector implementations are unaffected.
+  - Shell-script collector: injects reserved `CHECKSTACK_CHECK_ID`,
+    `CHECKSTACK_CHECK_NAME`, `CHECKSTACK_CHECK_INTERVAL_SECONDS`,
+    `CHECKSTACK_SYSTEM_ID`, `CHECKSTACK_SYSTEM_NAME` env vars (user-supplied
+    `env` still wins on collision).
+  - Inline-script collector: exposes `context.check` and `context.system`
+    alongside `context.config`; the inline-script editor now types them for
+    autocomplete.
+  - Shell editors (health-check collectors and automation shell actions) now
+    also suggest the user's own `env` (JSON) keys as `$NAME` completions, via
+    the new exported `customShellEnvVars` helper. Keys that aren't valid shell
+    identifiers are omitted.
+  - Fix: the Typefox `CodeEditor` captured a stale `onChange` at editor start,
+    so editing one `DynamicForm` field reverted sibling fields changed since
+    mount (e.g. typing in a shell `script` field wiped an unsaved `env` value,
+    or deleted a sibling automation action added after mount). The change
+    handler now routes through a ref to the current `onChange`.
+  - Fix: focusing a JSON editor threw "LanguageStatusService.addStatus is not
+    supported" because the standalone service set omitted `ILanguageStatusService`.
+    That one service is now registered via `serviceOverrides`.
+  - Fix: the automation trigger card nested a `<Badge>` (a `<div>`) inside a
+    `<p>`, producing a `validateDOMNesting` warning. Switched the wrapper to a
+    `<div>`.
+  - Local runs (`queue-executor`) and satellite runs both populate the
+    context. `SatelliteAssignment` (and the `getAssignmentsForSatellite`
+    RPC output) gained optional `configName` / `systemName` so the metadata
+    reaches satellite-side execution; `HealthCheckService` resolves the
+    system name via the catalog client.
+
+  BREAKING CHANGE: `createHealthCheckRouter` now requires a `catalogClient`
+  option (used to resolve system names for satellite assignments). Update
+  call sites to pass the catalog RPC client.
+
+### Patch Changes
+
+- Updated dependencies [e2d6f25]
+- Updated dependencies [41c77f4]
+- Updated dependencies [41c77f4]
+- Updated dependencies [41c77f4]
+- Updated dependencies [41c77f4]
+- Updated dependencies [4832e33]
+- Updated dependencies [6d52276]
+- Updated dependencies [35bc682]
+- Updated dependencies [c39ee69]
+  - @checkstack/frontend-api@0.6.0
+  - @checkstack/ui@1.11.0
+  - @checkstack/common@0.12.0
+  - @checkstack/healthcheck-common@1.3.0
+  - @checkstack/satellite-common@0.6.0
+  - @checkstack/auth-frontend@0.6.6
+  - @checkstack/catalog-common@2.2.3
+  - @checkstack/dashboard-frontend@0.7.7
+  - @checkstack/gitops-frontend@0.4.6
+  - @checkstack/tips-frontend@0.2.6
+  - @checkstack/anomaly-common@1.2.3
+  - @checkstack/signal-frontend@0.1.5
+
+## 0.20.0
+
+### Minor Changes
+
+- ba07ae2: Quiet down notification spam on flapping systems, auto-open incidents when a check goes critical, and let operators land directly on the broken checks.
+
+  Notification policy lives **per healthcheck assignment** (one row per `system × configuration`). Different checks on the same system are fully independent — disabling a setting on one check does not affect the others. Defaults preserve existing behaviour for `suppressDeEscalations`; **auto-incident defaults to on** for new and existing assignments.
+
+  - **`suppressDeEscalations`** (off by default). When on, transitions from a worse state to a better-but-still-failing state (e.g. `unhealthy → degraded`) no longer fire a notification. Escalations and full recoveries to `healthy` are unaffected. Resolved per assignment (the just-ran check is the one driving any aggregate transition).
+  - **`autoOpenIncidentOnUnhealthy`** (on by default). Either of two independent triggers can open the auto-incident:
+    - **`sustainedUnhealthyTrigger`** (default 30 min) — opens when the check stays continuously unhealthy for the configured duration. Catches real outages.
+    - **`flappingTrigger`** (default 3 transitions in 60 min) — opens when the check flips to unhealthy that many times in the window. Catches persistent flapping where each unhealthy phase is too brief for the sustained trigger.
+      Each trigger can be individually disabled. One incident per system: triggering checks attach to an existing active auto-incident.
+  - **`useNotificationSuppression`** (on by default, only meaningful when auto-open is on). Controls whether the auto-opened incident is created with `suppressNotifications: true` — leaving this off opens the incident but still pings operators on each transition.
+  - **`skipDuringMaintenance`** (on by default). No auto-incident is opened while the system has an active maintenance window with suppression. The system is intentionally down and shouldn't trip the on-call.
+  - **`autoCloseAfterMinutes`** (default 30). Auto-close cooldown is now per-assignment and snapshotted per-incident at open time — later policy edits don't alter in-flight incidents. Setting `null` ("Never auto-close") leaves the incident for manual resolution.
+  - **Require-recovery rule.** After any auto-incident closes (manual or auto), no new auto-incident can open until the check has logged at least one healthy run. Prevents a "operator dismissed but it's still broken" loop.
+  - **Auto-close worker** ticks every 60s and resolves auto-opened incidents whose systems have been healthy for their per-row `cooldownMinutes`. Rows with `null` cooldown are skipped entirely. Per-incident: failed close attempts are logged but never abort the sweep.
+  - **`incidentResolved` hook subscriber** syncs the auto-incident mapping when an operator manually resolves the incident, so the require-recovery rule sees the close immediately.
+  - **Platform-wide defaults.** New admin RPCs `getPlatformNotificationDefaults` / `setPlatformNotificationDefaults` (under the existing `healthcheck.configuration.{read,manage}` access rules) let operators set notification policy once for the whole instance. Per-assignment rows with `notificationPolicy: null` inherit the platform defaults at read time. UI: a "Notification defaults" button in the Assignment IDE opens a modal editor. The per-assignment Notifications panel shows an inheritance banner — "Using platform defaults" (read-only) with an "Override" button, or "Custom override" with a "Use platform defaults" button to revert. The all-or-nothing model keeps the mental model simple: each assignment is either fully inherited or fully overridden.
+  - **New service-level RPCs** on the incident plugin (`createAutoIncident`, `resolveAutoIncident`) let other plugins open/close incidents without a user context. Reused by the healthcheck auto-incident flow.
+  - **Health-state notification CTA** now deep-links to `?filter=failing` on the system detail page for non-recovery transitions (label changes to "View failing checks"). The system overview gains an `All / Failing / Healthy` segmented filter wired to the same `?filter=…` param.
+  - **Notification bell badge** now counts collapse groups instead of raw rows, so the number matches what the user sees in the notifications list. Built on `COUNT(DISTINCT COALESCE(collapse_key, id))` — notifications without a collapse key still each count as one.
+  - **`statusFilter` on `getHistory` / `getDetailedHistory`** lets the run-history page and the drawer's Recent Runs panel filter to `All / Healthy / Failing` via shared pills, with the page resetting to the first page on filter change.
+  - **Pagination defaults aligned with selector options.** Several pages defaulted to a page size (5 or 20) that wasn't in the dropdown's options (`[10, 25, 50, 100]`), so the page-size `<Select>` rendered empty. The drawer's Recent Runs now defaults to 10; the Run History, History List, and Delivery Logs pages now default to 25.
+
+  Includes Drizzle migrations adding the `notification_policy` jsonb column to `system_health_checks`, plus two new tables: `health_check_unhealthy_transitions` (for threshold counting) and `health_check_auto_incidents` (for mapping back to incident ids during auto-close).
+
+### Patch Changes
+
+- Updated dependencies [ba07ae2]
+  - @checkstack/healthcheck-common@1.2.0
+  - @checkstack/dashboard-frontend@0.7.6
+  - @checkstack/satellite-common@0.5.3
+
 ## 0.19.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.19.5",
+  "version": "0.21.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,18 +13,18 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.2.1",
-    "@checkstack/auth-frontend": "0.6.4",
-    "@checkstack/catalog-common": "2.2.1",
-    "@checkstack/common": "0.10.0",
-    "@checkstack/dashboard-frontend": "0.7.4",
-    "@checkstack/frontend-api": "0.5.1",
-    "@checkstack/gitops-frontend": "0.4.4",
-    "@checkstack/healthcheck-common": "1.1.1",
-    "@checkstack/satellite-common": "0.5.1",
-    "@checkstack/signal-frontend": "0.1.3",
-    "@checkstack/tips-frontend": "0.2.4",
-    "@checkstack/ui": "1.9.0",
+    "@checkstack/anomaly-common": "1.2.2",
+    "@checkstack/auth-frontend": "0.6.5",
+    "@checkstack/catalog-common": "2.2.2",
+    "@checkstack/common": "0.11.0",
+    "@checkstack/dashboard-frontend": "0.7.6",
+    "@checkstack/frontend-api": "0.5.2",
+    "@checkstack/gitops-frontend": "0.4.5",
+    "@checkstack/healthcheck-common": "1.2.0",
+    "@checkstack/satellite-common": "0.5.3",
+    "@checkstack/signal-frontend": "0.1.4",
+    "@checkstack/tips-frontend": "0.2.5",
+    "@checkstack/ui": "1.10.0",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",
@@ -36,7 +36,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.3.2",
+    "@checkstack/scripts": "0.3.3",
     "@checkstack/tsconfig": "0.0.7",
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0"

package/src/components/EmptyRunsTableRow.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { TableRow, TableCell } from "@checkstack/ui";
+
+interface EmptyRunsTableRowProps {
+  /** Number of columns in the parent table (drives `colSpan`). */
+  colSpan: number;
+  /** Message to display in the empty cell. Plain strings or rich nodes. */
+  children: React.ReactNode;
+}
+
+/**
+ * Single-row empty state rendered inside a runs table body. Centralises
+ * the look so the drawer's Recent Runs and the Run History page can
+ * share the same in-table empty state.
+ */
+export function EmptyRunsTableRow({ colSpan, children }: EmptyRunsTableRowProps) {
+  return (
+    <TableRow>
+      <TableCell
+        colSpan={colSpan}
+        className="text-center text-xs text-muted-foreground py-6"
+      >
+        {children}
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/components/HealthCheckDrawer.tsx

@@ -56,6 +56,12 @@ import { HealthCheckLatencyChart } from "./HealthCheckLatencyChart";
 import { useHealthCheckData } from "../hooks/useHealthCheckData";
 import { AggregatedDataBanner } from "./AggregatedDataBanner";
 import { HealthCheckDiagramSlot } from "../slots";
+import {
+  StatusFilterPills,
+  STATUS_FILTER_TO_STATUSES,
+  type StatusFilter,
+} from "./StatusFilterPills";
+import { EmptyRunsTableRow } from "./EmptyRunsTableRow";
 import { Heart, Clock, CheckCircle, AlertTriangle } from "lucide-react";
 
 import type {
@@ -130,6 +136,8 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
   );
   const [isRollingPreset, setIsRollingPreset] = useState(true);
   const [sourceFilter, setSourceFilter] = useState<string | undefined>();
+  const [runsStatusFilter, setRunsStatusFilter] =
+    useState<StatusFilter>("all");
 
   const activePreset = detectPreset(dateRange);
   const activePresetLabel = PRESETS.find((p) => p.id === activePreset)?.shortLabel ?? "Custom";
@@ -195,7 +203,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
   );
 
   // Pagination for history table
-  const pagination = usePagination({ defaultLimit: 5 });
+  const pagination = usePagination({ defaultLimit: 10 });
 
   const { data: historyData, isLoading: historyLoading } =
     healthCheckClient.getHistory.useQuery({
@@ -205,6 +213,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
     offset: pagination.offset,
     startDate: dateRange.startDate,
     sourceFilter,
+    statusFilter: STATUS_FILTER_TO_STATUSES[runsStatusFilter],
     sortOrder: "desc",
   });
 
@@ -437,7 +446,7 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
           </div>
 
           {/* Zone 3 — Recent Runs */}
-          {runs.length > 0 && (
+          {(runs.length > 0 || runsStatusFilter !== "all") && (
             <div className="space-y-3">
               <div className="flex items-center gap-4">
                 <div className="flex-1 h-px bg-border" />
@@ -450,6 +459,16 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                 <div className="flex-1 h-px bg-border" />
               </div>
 
+              <div className="flex justify-end">
+                <StatusFilterPills
+                  value={runsStatusFilter}
+                  onChange={(next) => {
+                    setRunsStatusFilter(next);
+                    pagination.setPage(1);
+                  }}
+                />
+              </div>
+
               <div className="rounded-md border">
                 <Table>
                   <TableHeader>
@@ -460,6 +479,13 @@ export const HealthCheckDrawer: React.FC<HealthCheckDrawerProps> = ({
                     </TableRow>
                   </TableHeader>
                   <TableBody>
+                    {runs.length === 0 && !historyLoading && (
+                      <EmptyRunsTableRow colSpan={3}>
+                        No runs match the{" "}
+                        <span className="font-medium">{runsStatusFilter}</span>{" "}
+                        filter.
+                      </EmptyRunsTableRow>
+                    )}
                     {runs.map((run) => (
                       <TableRow
                         key={run.id}

package/src/components/HealthCheckRunsTable.tsx

@@ -14,6 +14,7 @@ import { ExternalLink, Loader2, Satellite, Server } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
+import { EmptyRunsTableRow } from "./EmptyRunsTableRow";
 
 export interface HealthCheckRunDetailed {
   id: string;
@@ -64,10 +65,6 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     prevRunsRef.current = runs;
   }
 
-  if (!loading && runs.length === 0 && prevRunsRef.current.length === 0) {
-    return <p className="text-muted-foreground text-sm">{emptyMessage}</p>;
-  }
-
   const handleRowClick = (run: HealthCheckRunDetailed) => {
     navigate(
       resolveRoute(healthcheckRoutes.routes.historyRun, {
@@ -78,6 +75,11 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     );
   };
 
+  // 3 base columns (Status, Timestamp, Source) + 3 extras when
+  // showFilterColumns is on (System ID, Configuration ID, link icon).
+  const columnCount = showFilterColumns ? 6 : 3;
+  const showEmptyRow = !loading && displayRuns.length === 0;
+
   return (
     <>
       <div className="rounded-md border">
@@ -102,6 +104,11 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
             </TableRow>
           </TableHeader>
           <TableBody>
+            {showEmptyRow && (
+              <EmptyRunsTableRow colSpan={columnCount}>
+                {emptyMessage}
+              </EmptyRunsTableRow>
+            )}
             {displayRuns.map((run) => (
               <TableRow
                 key={run.id}

package/src/components/HealthCheckSystemOverview.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import {
   usePluginClient,
   type SlotContext,
@@ -12,6 +13,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Button,
 } from "@checkstack/ui";
 import { Heart } from "lucide-react";
 import { HealthCheckSparkline } from "./HealthCheckSparkline";
@@ -22,6 +24,24 @@ import type {
   HealthCheckStatus,
 } from "@checkstack/healthcheck-common";
 
+type HealthFilter = "all" | "failing" | "healthy";
+
+const FILTERS: { value: HealthFilter; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "failing", label: "Failing" },
+  { value: "healthy", label: "Healthy" },
+];
+
+function parseFilter(raw: string | null): HealthFilter {
+  return raw === "failing" || raw === "healthy" ? raw : "all";
+}
+
+function matchesFilter(state: HealthCheckStatus, filter: HealthFilter) {
+  if (filter === "all") return true;
+  if (filter === "healthy") return state === "healthy";
+  return state !== "healthy";
+}
+
 type SlotProps = SlotContext<typeof SystemDetailsSlot>;
 
 /**
@@ -54,6 +74,8 @@ interface HealthCheckOverviewItem {
 export function HealthCheckSystemOverview(props: SlotProps) {
   const systemId = props.system.id;
   const healthCheckClient = usePluginClient(HealthCheckApi);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filter = parseFilter(searchParams.get("filter"));
 
   const [selectedCheck, setSelectedCheck] = useState<
     HealthCheckOverviewItem | undefined
@@ -82,6 +104,21 @@ export function HealthCheckSystemOverview(props: SlotProps) {
     }));
   }, [overviewData]);
 
+  const visible = React.useMemo(
+    () => overview.filter((item) => matchesFilter(item.state, filter)),
+    [overview, filter],
+  );
+
+  const setFilter = (next: HealthFilter) => {
+    const params = new URLSearchParams(searchParams);
+    if (next === "all") {
+      params.delete("filter");
+    } else {
+      params.set("filter", next);
+    }
+    setSearchParams(params, { replace: true });
+  };
+
   if (initialLoading) {
     return <LoadingSpinner />;
   }
@@ -94,16 +131,46 @@ export function HealthCheckSystemOverview(props: SlotProps) {
     <>
       <Card>
         <CardHeader className="pb-3">
-          <div className="flex items-center gap-2">
-            <Heart className="h-4 w-4 text-muted-foreground" />
-            <CardTitle className="text-base font-semibold">
-              Health Checks
-            </CardTitle>
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Heart className="h-4 w-4 text-muted-foreground" />
+              <CardTitle className="text-base font-semibold">
+                Health Checks
+              </CardTitle>
+            </div>
+            <div
+              className="flex items-center gap-1 rounded-md border bg-muted/30 p-0.5"
+              role="tablist"
+              aria-label="Filter health checks"
+            >
+              {FILTERS.map((f) => {
+                const active = filter === f.value;
+                return (
+                  <Button
+                    key={f.value}
+                    size="sm"
+                    variant={active ? "secondary" : "ghost"}
+                    className="h-7 px-2 text-xs"
+                    onClick={() => setFilter(f.value)}
+                    role="tab"
+                    aria-selected={active}
+                  >
+                    {f.label}
+                  </Button>
+                );
+              })}
+            </div>
           </div>
         </CardHeader>
         <CardContent className="p-0">
-          <div className="divide-y divide-border">
-            {overview.map((item) => (
+          {visible.length === 0 ? (
+            <div className="px-4 py-6 text-center text-xs text-muted-foreground">
+              No health checks match the{" "}
+              <span className="font-medium">{filter}</span> filter.
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {visible.map((item) => (
               <button
                 key={item.configurationId}
                 className="w-full px-4 py-3 text-left hover:bg-muted/50 transition-colors flex items-center gap-3"
@@ -133,8 +200,9 @@ export function HealthCheckSystemOverview(props: SlotProps) {
                   {formatCompactTime(item.lastRunAt)}
                 </span>
               </button>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
         </CardContent>
       </Card>
 

package/src/components/StatusFilterPills.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { CheckCircle, AlertTriangle } from "lucide-react";
+import type { HealthCheckStatus } from "@checkstack/healthcheck-common";
+
+/**
+ * Coarse status filter buckets for run-history surfaces. "Failing"
+ * collapses degraded and unhealthy because operators investigating a
+ * problem usually care about "anything not green" rather than the
+ * degraded/unhealthy distinction.
+ */
+export type StatusFilter = "all" | "healthy" | "failing";
+
+export const STATUS_FILTER_TO_STATUSES: Record<
+  StatusFilter,
+  HealthCheckStatus[] | undefined
+> = {
+  all: undefined,
+  healthy: ["healthy"],
+  failing: ["degraded", "unhealthy"],
+};
+
+interface StatusFilterPillsProps {
+  value: StatusFilter;
+  onChange: (next: StatusFilter) => void;
+}
+
+const OPTIONS: {
+  value: StatusFilter;
+  label: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  activeClass: string;
+}[] = [
+  {
+    value: "all",
+    label: "All",
+    activeClass: "bg-primary text-primary-foreground",
+  },
+  {
+    value: "healthy",
+    label: "Healthy",
+    icon: CheckCircle,
+    activeClass: "bg-success text-white",
+  },
+  {
+    value: "failing",
+    label: "Failing",
+    icon: AlertTriangle,
+    activeClass: "bg-destructive text-destructive-foreground",
+  },
+];
+
+export function StatusFilterPills({ value, onChange }: StatusFilterPillsProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-muted-foreground">Status:</span>
+      <div className="flex items-center gap-1">
+        {OPTIONS.map((opt) => {
+          const active = value === opt.value;
+          const Icon = opt.icon;
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => onChange(opt.value)}
+              className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                active
+                  ? opt.activeClass
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+            >
+              {Icon && <Icon className="h-3 w-3" />}
+              {opt.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/assignments/AssignmentTree.tsx

@@ -1,5 +1,13 @@
 import React from "react";
-import { Settings, Gauge, Database, Radio, Plus, Check } from "lucide-react";
+import {
+  Settings,
+  Gauge,
+  Database,
+  Radio,
+  Plus,
+  Check,
+  Bell,
+} from "lucide-react";
 import { IDETreeNode, IDETreeSection } from "@checkstack/ui";
 import { ExtensionSlot } from "@checkstack/frontend-api";
 import { AssignmentIDENodeSlot } from "../../slots";
@@ -97,6 +105,18 @@ export const AssignmentTree: React.FC<AssignmentTreeProps> = ({
             indent
             badge={assoc.satelliteCount > 0 ? `${assoc.satelliteCount}` : undefined}
           />
+          <IDETreeNode
+            nodeId={`notifications:${assoc.configurationId}`}
+            label="Notifications"
+            icon={Bell}
+            selected={
+              selectedNode === `notifications:${assoc.configurationId}`
+            }
+            onClick={() =>
+              onSelectNode(`notifications:${assoc.configurationId}`)
+            }
+            indent
+          />
           <ExtensionSlot 
             slot={AssignmentIDENodeSlot} 
             context={{