@checkstack/anomaly-frontend 0.5.4 → 0.5.5

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @checkstack/anomaly-frontend
 
+## 0.5.5
+
+### Patch Changes
+
+- 56e7c75: Hide navigation, actions and links that the current user cannot use, so anonymous
+  and read-only users no longer see entries that lead to "Access Denied" or to
+  actions the server would reject.
+
+  - **Sidebar**: a nav entry can now declare a dynamic `nav.isVisible({ accessRules, isAuthenticated })` predicate (in addition to the static `accessRule`). A group whose every entry is filtered out is no longer rendered. The filtering/grouping logic is extracted to a pure, unit-tested helper.
+  - **Infrastructure**: its sidebar entry is shown only when the user can READ at least one contributed tab (queue, cache, …), instead of always (it previously had no static rule because tabs are contributed at runtime).
+  - **Notification Settings**: hidden from anonymous users - notifications are per-user, so an anonymous visitor can't have any.
+  - **Anomaly Mute / Suppress**: the "Mute" / "Mute all" controls (a per-user preference) are hidden from anonymous visitors; the "Suppress" control is gated on `anomalyAccess.feed.manage`. Both were previously always visible.
+  - **Dashboard**: the "Open Catalog" actions (which open the manage-only Catalog config page) are hidden from users without `catalogAccess.system.manage`, and the "View catalog" link is gated on `catalogAccess.system.read`.
+  - **Dashboard status signals**: the per-system status rows contributed by plugins (`SystemSignalsSlot`) now render as a LINK only when the user can open the target, and as plain text otherwise. `SystemSignal` gains an optional `accessRule`; the healthcheck, anomaly, and dependency fillers set it for their gated targets (check-history / assignments / dependency-map). Signals pointing at ungated pages (incident / maintenance / SLO detail) stay links.
+  - **Plugin Manager**: the "Install plugin" button (which opens the install-gated page) is hidden from users with only `plugin` view access.
+  - **Satellites**: the page is entirely manage-gated, but its route/sidebar entry was gated on `read`, so read-only users saw the nav item and hit "Access Denied" on click. The route and nav entry now require `satellite.manage`.
+
+  The `@checkstack/ai-backend` bump is only the regenerated bundled docs index
+  (the frontend routing guide gained the `nav.isVisible` section); no code change.
+
+  **BREAKING (`@checkstack/frontend-api`):** the `AccessApi` interface gains a
+  required `useIsAuthenticated()` method. Custom `AccessApi` implementations must
+  add it (it returns `{ loading, isAuthenticated }`). The built-in auth
+  implementation and the no-auth fallback already do. `NavEntry` also gains an
+  optional `isVisible` predicate (purely additive).
+
+- Updated dependencies [56e7c75]
+- Updated dependencies [56e7c75]
+  - @checkstack/frontend-api@0.9.0
+  - @checkstack/notification-frontend@0.5.5
+  - @checkstack/catalog-common@2.3.4
+  - @checkstack/healthcheck-frontend@0.23.5
+  - @checkstack/ui@1.15.1
+  - @checkstack/common@0.15.0
+  - @checkstack/anomaly-common@1.3.4
+  - @checkstack/healthcheck-common@1.5.4
+  - @checkstack/notification-common@1.3.3
+  - @checkstack/signal-frontend@0.2.4
+
 ## 0.5.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/anomaly-frontend",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,16 +13,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.3.3",
-    "@checkstack/catalog-common": "2.3.3",
-    "@checkstack/common": "0.14.1",
-    "@checkstack/frontend-api": "0.8.0",
-    "@checkstack/healthcheck-common": "1.5.3",
-    "@checkstack/healthcheck-frontend": "0.23.4",
-    "@checkstack/notification-common": "1.3.2",
-    "@checkstack/notification-frontend": "0.5.4",
-    "@checkstack/signal-frontend": "0.2.3",
-    "@checkstack/ui": "1.15.0",
+    "@checkstack/anomaly-common": "1.3.4",
+    "@checkstack/catalog-common": "2.3.4",
+    "@checkstack/common": "0.15.0",
+    "@checkstack/frontend-api": "0.9.0",
+    "@checkstack/healthcheck-common": "1.5.4",
+    "@checkstack/healthcheck-frontend": "0.23.5",
+    "@checkstack/notification-common": "1.3.3",
+    "@checkstack/notification-frontend": "0.5.5",
+    "@checkstack/signal-frontend": "0.2.4",
+    "@checkstack/ui": "1.15.1",
     "date-fns": "^4.4.0",
     "lucide-react": "^1.17.0",
     "react": "19.2.7",
@@ -30,7 +30,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.6.0",
+    "@checkstack/scripts": "0.6.1",
     "@checkstack/tsconfig": "0.0.7",
     "@types/react": "^19.0.0",
     "typescript": "^5.0.0"

package/src/components/AnomalyFieldMuteList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Bell, BellOff } from "lucide-react";
 import { Button, useToast } from "@checkstack/ui";
-import { usePluginClient } from "@checkstack/frontend-api";
+import { usePluginClient, useApi, accessApiRef } from "@checkstack/frontend-api";
 import { AnomalyApi } from "@checkstack/anomaly-common";
 import { extractErrorMessage } from "@checkstack/common";
 
@@ -22,6 +22,10 @@ export const AnomalyFieldMuteList: React.FC<{
   const { systemId } = resource;
   const anomalyClient = usePluginClient(AnomalyApi);
   const toast = useToast();
+  // Muting is a per-user preference for logged-in users only; anonymous
+  // visitors (e.g. reaching this via a direct link) get no mute controls.
+  const accessApi = useApi(accessApiRef);
+  const { isAuthenticated: canMute } = accessApi.useIsAuthenticated();
 
   // Notification mute is a per-user concern orthogonal to global suppression,
   // so the mute-management list must include suppressed rows — otherwise a
@@ -81,24 +85,26 @@ export const AnomalyFieldMuteList: React.FC<{
           Mute the entire system or just specific fields. Mutes persist
           across re-subscribes.
         </span>
-        <Button
-          type="button"
-          variant={isSystemMuted ? "outline" : "primary"}
-          size="sm"
-          className="h-6 px-2 text-[11px] gap-1"
-          disabled={isPending}
-          onClick={() => handleToggle("", isSystemMuted)}
-        >
-          {isSystemMuted ? (
-            <>
-              <BellOff className="h-3 w-3" /> System muted
-            </>
-          ) : (
-            <>
-              <Bell className="h-3 w-3" /> Mute system
-            </>
-          )}
-        </Button>
+        {canMute && (
+          <Button
+            type="button"
+            variant={isSystemMuted ? "outline" : "primary"}
+            size="sm"
+            className="h-6 px-2 text-[11px] gap-1"
+            disabled={isPending}
+            onClick={() => handleToggle("", isSystemMuted)}
+          >
+            {isSystemMuted ? (
+              <>
+                <BellOff className="h-3 w-3" /> System muted
+              </>
+            ) : (
+              <>
+                <Bell className="h-3 w-3" /> Mute system
+              </>
+            )}
+          </Button>
+        )}
       </div>
 
       {fieldPaths.length === 0 ? (
@@ -116,23 +122,23 @@ export const AnomalyFieldMuteList: React.FC<{
                 className="flex items-center justify-between px-3 py-1.5 text-xs"
               >
                 <span className="font-mono truncate">{fp}</span>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  disabled={isPending || isSystemMuted}
-                  title={muted ? "Unmute this field" : "Mute this field"}
-                  onClick={() =>
-                    handleToggle(fp, mutedFields.has(fp))
-                  }
-                >
-                  {muted ? (
-                    <BellOff className="h-3 w-3" />
-                  ) : (
-                    <Bell className="h-3 w-3" />
-                  )}
-                </Button>
+                {canMute && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6"
+                    disabled={isPending || isSystemMuted}
+                    title={muted ? "Unmute this field" : "Mute this field"}
+                    onClick={() => handleToggle(fp, mutedFields.has(fp))}
+                  >
+                    {muted ? (
+                      <BellOff className="h-3 w-3" />
+                    ) : (
+                      <Bell className="h-3 w-3" />
+                    )}
+                  </Button>
+                )}
               </div>
             );
           })}

package/src/components/AnomalySignalsFiller.tsx

@@ -7,7 +7,10 @@ import {
   type SystemSignalsMap,
 } from "@checkstack/catalog-common";
 import { AnomalyApi } from "@checkstack/anomaly-common";
-import { healthcheckRoutes } from "@checkstack/healthcheck-common";
+import {
+  healthcheckRoutes,
+  healthCheckAccess,
+} from "@checkstack/healthcheck-common";
 
 type Props = SlotContext<typeof SystemSignalsSlot>;
 
@@ -57,6 +60,8 @@ export const AnomalySignalsFiller: React.FC<Props> = ({
           systemId,
           configurationId,
         }),
+        // The history detail page is gated; render as text for users without it.
+        accessRule: healthCheckAccess.details,
         since: new Date(startedAt).toISOString(),
         iconName: "ChartSpline",
       };

package/src/components/SystemAnomalyWidget.tsx

@@ -1,8 +1,14 @@
 import React from "react";
-import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import {
+  usePluginClient,
+  useApi,
+  accessApiRef,
+  type SlotContext,
+} from "@checkstack/frontend-api";
 import { SystemDetailsSlot } from "@checkstack/catalog-common";
 import {
   AnomalyApi,
+  anomalyAccess,
   type AnomalyDto,
 } from "@checkstack/anomaly-common";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
@@ -117,6 +123,8 @@ function AnomalyRow({
   isToggling,
   onSuppress,
   isSuppressing,
+  canMute,
+  canManage,
 }: {
   anomaly: AnomalyDto;
   systemId: string;
@@ -125,6 +133,10 @@ function AnomalyRow({
   isToggling: boolean;
   onSuppress: (anomalyId: string) => void;
   isSuppressing: boolean;
+  /** Whether the user may mute notifications (any logged-in user). */
+  canMute: boolean;
+  /** Whether the user may suppress the anomaly (anomalyAccess.feed.manage). */
+  canManage: boolean;
 }) {
   const isSuspicious = anomaly.state === "suspicious";
   const isDrift = anomaly.kind === "drift";
@@ -219,30 +231,32 @@ function AnomalyRow({
           )}
           {deviationValue}σ
         </Badge>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7 text-muted-foreground hover:text-foreground"
-          disabled={isToggling}
-          title={
-            isMuted
-              ? "Unmute notifications for this field"
-              : "Mute notifications for this field"
-          }
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            onToggleMute(anomaly.fieldPath, isMuted);
-          }}
-        >
-          {isMuted ? (
-            <BellOff className="h-3.5 w-3.5" />
-          ) : (
-            <Bell className="h-3.5 w-3.5" />
-          )}
-        </Button>
-        {!isSuspicious && (
+        {canMute && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            disabled={isToggling}
+            title={
+              isMuted
+                ? "Unmute notifications for this field"
+                : "Mute notifications for this field"
+            }
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onToggleMute(anomaly.fieldPath, isMuted);
+            }}
+          >
+            {isMuted ? (
+              <BellOff className="h-3.5 w-3.5" />
+            ) : (
+              <Bell className="h-3.5 w-3.5" />
+            )}
+          </Button>
+        )}
+        {canManage && !isSuspicious && (
           <Button
             type="button"
             variant="ghost"
@@ -272,6 +286,14 @@ function AnomalyRow({
 export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
   const anomalyClient = usePluginClient(AnomalyApi);
   const toast = useToast();
+  const accessApi = useApi(accessApiRef);
+  // Muting notifications is a per-user preference any LOGGED-IN user may set
+  // (contract: userType "user", access []), so it is gated on authentication,
+  // not on manage. Suppressing an anomaly is an operator action gated on
+  // anomalyAccess.feed.manage. Anonymous visitors get neither. The server
+  // enforces both regardless.
+  const { isAuthenticated: canMute } = accessApi.useIsAuthenticated();
+  const { allowed: canManage } = accessApi.useAccess(anomalyAccess.feed.manage);
 
   // Fetch only active anomalies — exclude recovered ones.
   // Two queries with React Query deduplication: confirmed anomalies + suspicious.
@@ -394,31 +416,33 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
                 {suspiciousCount}
               </Badge>
             )}
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-6 px-2 text-[11px] gap-1"
-              disabled={isToggling}
-              title={
-                isSystemMuted
-                  ? "Resume anomaly notifications for this system"
-                  : "Stop receiving any anomaly notifications for this system"
-              }
-              onClick={() => handleToggleMute("", isSystemMuted)}
-            >
-              {isSystemMuted ? (
-                <>
-                  <BellOff className="h-3 w-3" />
-                  Muted
-                </>
-              ) : (
-                <>
-                  <Bell className="h-3 w-3" />
-                  Mute all
-                </>
-              )}
-            </Button>
+            {canMute && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-[11px] gap-1"
+                disabled={isToggling}
+                title={
+                  isSystemMuted
+                    ? "Resume anomaly notifications for this system"
+                    : "Stop receiving any anomaly notifications for this system"
+                }
+                onClick={() => handleToggleMute("", isSystemMuted)}
+              >
+                {isSystemMuted ? (
+                  <>
+                    <BellOff className="h-3 w-3" />
+                    Muted
+                  </>
+                ) : (
+                  <>
+                    <Bell className="h-3 w-3" />
+                    Mute all
+                  </>
+                )}
+              </Button>
+            )}
           </div>
         </div>
       </CardHeader>
@@ -434,6 +458,8 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
               isToggling={isToggling}
               onSuppress={handleSuppress}
               isSuppressing={suppressMutation.isPending}
+              canMute={canMute}
+              canManage={canManage}
             />
           ))}
         </div>