From f090e06ec125e442edb6a912298fbf02f9768abb Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Fri, 26 Jun 2026 15:56:06 +0200
Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20Add=20API=20route=20registry=20?=
 =?UTF-8?q?and=20structural=20route-key=20matcher=20for=20UI=20gating?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Map each gated UI capability to the ServiceControl HTTP route it represents (apiRoutes.ts), and normalize a (method, path) pair into a comparison key with route parameters collapsed to {} (routeMatching.ts). Matching couples only to method and path structure, so it survives server-side route parameter renames.

Co-Authored-By: Dennis van der Stelt <dvdstelt@gmail.com>
Co-Authored-By: williambza <william.brander@gmail.com>
---
 src/Frontend/src/composables/apiRoutes.ts     | 37 +++++++++++++++++++
 .../src/composables/routeMatching.spec.ts     | 14 +++++++
 src/Frontend/src/composables/routeMatching.ts |  7 ++++
 3 files changed, 58 insertions(+)
 create mode 100644 src/Frontend/src/composables/apiRoutes.ts
 create mode 100644 src/Frontend/src/composables/routeMatching.spec.ts
 create mode 100644 src/Frontend/src/composables/routeMatching.ts

diff --git a/src/Frontend/src/composables/apiRoutes.ts b/src/Frontend/src/composables/apiRoutes.ts
new file mode 100644
index 000000000..3ac666ace
--- /dev/null
+++ b/src/Frontend/src/composables/apiRoutes.ts
@@ -0,0 +1,37 @@
+// Maps each gated UI capability to the ServiceControl HTTP route it represents.
+// This is the ONLY place coupling ServicePulse to ServiceControl's route surface:
+// the UI gates on routes it already calls, never on the internal permission grammar.
+// Paths use {} for each route parameter; matching is param-name-insensitive (see routeMatching.ts).
+// Each entry tracks a route in ServiceControl's APIApprovals.HttpApiRoutes (Primary or Monitoring instance).
+export type RouteRef = { method: string; path: string };
+
+export const ApiRoutes = {
+  // ---- nav / verb-level (GET routes gated by the matching :view permission) ----
+  viewHeartbeats: { method: "GET", path: "/api/heartbeats/stats" }, // error:heartbeats:view (EndpointsMonitoringController)
+  viewMonitoredEndpoints: { method: "GET", path: "/monitored-endpoints" }, // Monitoring instance serves at root (no /api prefix) — monitoring:endpoint:view (DiagramApiController)
+  viewAuditMessages: { method: "GET", path: "/api/messages2" }, // error:messages:view (GetMessages2Controller)
+  viewFailedMessages: { method: "GET", path: "/api/errors" }, // error:messages:view (GetAllErrorsController)
+  viewCustomChecks: { method: "GET", path: "/api/customchecks" }, // error:customchecks:view (CustomCheckController)
+  viewEventLog: { method: "GET", path: "/api/eventlogitems" }, // error:eventlog:view (EventLogApiController)
+  viewThroughput: { method: "GET", path: "/api/licensing/report/available" }, // error:throughput:view (LicensingController)
+  viewLicense: { method: "GET", path: "/api/license" }, // error:licensing:view (LicenseController)
+  viewConnections: { method: "GET", path: "/api/connection" }, // error:connections:view (ConnectionController)
+  viewNotifications: { method: "GET", path: "/api/notifications/email" }, // error:notifications:view (NotificationsController)
+  viewRedirects: { method: "GET", path: "/api/redirects" }, // error:redirects:view (MessageRedirectsController)
+  viewEndpoints: { method: "GET", path: "/api/endpoints" }, // error:endpoints:view (EndpointsMonitoringController)
+  manageThroughput: { method: "POST", path: "/api/licensing/settings/masks/update" }, // error:throughput:manage (LicensingController)
+  // ---- actions ----
+  manageNotifications: { method: "POST", path: "/api/notifications/email" },
+  testNotifications: { method: "POST", path: "/api/notifications/email/test" },
+  manageRedirects: { method: "POST", path: "/api/redirects" },
+  dismissCustomCheck: { method: "DELETE", path: "/api/customchecks/{}" },
+  retryMessage: { method: "POST", path: "/api/errors/retry" },
+  editMessage: { method: "POST", path: "/api/edit/{}" },
+  deleteMessage: { method: "PATCH", path: "/api/errors/archive" },
+  restoreMessage: { method: "PATCH", path: "/api/errors/unarchive" },
+  retryGroup: { method: "POST", path: "/api/recoverability/groups/{}/errors/retry" },
+  deleteGroup: { method: "POST", path: "/api/recoverability/groups/{}/errors/archive" },
+  restoreGroup: { method: "POST", path: "/api/recoverability/groups/{}/errors/unarchive" },
+  deleteEndpointInstance: { method: "DELETE", path: "/api/endpoints/{}" },
+  deleteMonitoredEndpoint: { method: "DELETE", path: "/monitored-instance/{}/{}" }, // Monitoring instance serves at root (no /api prefix)
+} as const satisfies Record<string, RouteRef>;
diff --git a/src/Frontend/src/composables/routeMatching.spec.ts b/src/Frontend/src/composables/routeMatching.spec.ts
new file mode 100644
index 000000000..6ebbfd012
--- /dev/null
+++ b/src/Frontend/src/composables/routeMatching.spec.ts
@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { normalizeRouteKey } from "@/composables/routeMatching";
+
+describe("normalizeRouteKey", () => {
+  it.each([
+    ["POST", "/api/errors/{id}/retry", "POST /api/errors/{}/retry"],
+    ["post", "/api/errors/{failedMessageId}/retry", "POST /api/errors/{}/retry"], // param-name-insensitive + verb case
+    ["GET", "/api/errors", "GET /api/errors"],
+    ["DELETE", "/api/monitored-instance/{name}/{instanceId}", "DELETE /api/monitored-instance/{}/{}"],
+    ["GET", "api/messages2", "GET /api/messages2"], // adds leading slash
+  ])("normalizes %s %s", (method, path, expected) => {
+    expect(normalizeRouteKey(method, path)).toBe(expected);
+  });
+});
diff --git a/src/Frontend/src/composables/routeMatching.ts b/src/Frontend/src/composables/routeMatching.ts
new file mode 100644
index 000000000..64e75ba5f
--- /dev/null
+++ b/src/Frontend/src/composables/routeMatching.ts
@@ -0,0 +1,7 @@
+// Normalizes a (method, path) into a comparison key for allowed-route matching.
+// Param names are collapsed to {} so matching couples only to method + path STRUCTURE
+// (the stable public contract), surviving server route-parameter renames.
+export function normalizeRouteKey(method: string, path: string): string {
+  const normalizedPath = path.replace(/\{[^}]*\}/g, "{}").replace(/^\/?/, "/");
+  return `${method.toUpperCase()} ${normalizedPath}`;
+}

From 5c5b961926566cb122936fa04ceecd33d6e27a4d Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Fri, 26 Jun 2026 15:56:06 +0200
Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20Fetch=20the=20allowed-route=20m?=
 =?UTF-8?q?anifest=20and=20add=20the=20route-gating=20primitive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add AllowedRoutesStore, which fetches the my/routes manifest from the Primary and Monitoring instances, merges them, and dedupes concurrent fetches. Add the useAllowedRoutes composable (canCall / canAnyCall) that resource-owning view models build on, plus the startup fetch in App.vue. Gating is fail-open until the user is authenticated and the manifest has loaded, but a malformed manifest entry is skipped rather than aborting the load, so a single bad entry can never leave the store unloaded and silently fail every gate open.

Co-Authored-By: Dennis van der Stelt <dvdstelt@gmail.com>
Co-Authored-By: williambza <william.brander@gmail.com>
---
 src/Frontend/src/App.vue                      | 17 +++-
 .../components/monitoring/monitoringClient.ts |  9 ++
 .../src/components/serviceControlClient.ts    |  9 +-
 .../src/composables/useAllowedRoutes.spec.ts  | 61 +++++++++++++
 .../src/composables/useAllowedRoutes.ts       | 33 +++++++
 .../src/composables/useAuthenticatedFetch.ts  | 25 ++++-
 src/Frontend/src/resources/RootUrls.ts        |  2 +
 .../src/stores/AllowedRoutesStore.spec.ts     | 91 +++++++++++++++++++
 src/Frontend/src/stores/AllowedRoutesStore.ts | 84 +++++++++++++++++
 .../test/preconditions/authentication.ts      |  6 ++
 10 files changed, 332 insertions(+), 5 deletions(-)
 create mode 100644 src/Frontend/src/composables/useAllowedRoutes.spec.ts
 create mode 100644 src/Frontend/src/composables/useAllowedRoutes.ts
 create mode 100644 src/Frontend/src/stores/AllowedRoutesStore.spec.ts
 create mode 100644 src/Frontend/src/stores/AllowedRoutesStore.ts

diff --git a/src/Frontend/src/App.vue b/src/Frontend/src/App.vue
index de55293cb..ccaa60e86 100644
--- a/src/Frontend/src/App.vue
+++ b/src/Frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { RouterView, useRoute } from "vue-router";
 import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
@@ -8,11 +8,26 @@ import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "@/stores/AuthStore";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
 
 const authStore = useAuthStore();
 const route = useRoute();
 const { isAuthenticated, authEnabled } = storeToRefs(authStore);
 
+// Load the allowed-route manifest (my/routes) once authenticated, so the nav and other
+// UI can gate on it. Fail-safe: a missing/old endpoint just leaves the manifest unloaded
+// and the UI fails open.
+const { fetchManifest } = useAllowedRoutes();
+watch(
+  [authEnabled, isAuthenticated],
+  ([enabled, authenticated]) => {
+    if (enabled && authenticated) {
+      fetchManifest();
+    }
+  },
+  { immediate: true }
+);
+
 // Check if the current route allows anonymous access (e.g., logged-out page)
 const isAnonymousRoute = computed(() => route.meta?.allowAnonymous === true);
 const shouldShowApp = computed(() => !authEnabled.value || isAuthenticated.value || isAnonymousRoute.value);
diff --git a/src/Frontend/src/components/monitoring/monitoringClient.ts b/src/Frontend/src/components/monitoring/monitoringClient.ts
index 5793d5f09..0c6b20785 100644
--- a/src/Frontend/src/components/monitoring/monitoringClient.ts
+++ b/src/Frontend/src/components/monitoring/monitoringClient.ts
@@ -91,6 +91,15 @@ class MonitoringClient {
     return false;
   }
 
+  public async fetchAllowedRoutes() {
+    if (this.isMonitoringDisabled) {
+      return undefined;
+    }
+    // Unlike the other Monitoring endpoints (served at root), MyRoutesController has a class-level
+    // "api" route prefix (it is the shared controller used by both Primary and Monitoring instances).
+    return await authFetch(`${this.url}api/my/routes`);
+  }
+
   public get isMonitoringEnabled() {
     return this.url && this.url !== "!" ? true : false;
   }
diff --git a/src/Frontend/src/components/serviceControlClient.ts b/src/Frontend/src/components/serviceControlClient.ts
index 40ad24c53..9db92f3f7 100644
--- a/src/Frontend/src/components/serviceControlClient.ts
+++ b/src/Frontend/src/components/serviceControlClient.ts
@@ -29,8 +29,13 @@ class ServiceControlClient {
     }
   }
 
-  public async fetchTypedFromServiceControl<T>(suffix: string, signal?: AbortSignal): Promise<[Response, T]> {
-    const response = await authFetch(`${this.url}${suffix}`, { signal });
+  public fetchTypedFromServiceControl<T>(suffix: string, signal?: AbortSignal): Promise<[Response, T]> {
+    return this.fetchTypedFromUrl<T>(`${this.url}${suffix}`, signal);
+  }
+
+  // Fetch from an absolute URL, e.g. one discovered from the ServiceControl root document.
+  public async fetchTypedFromUrl<T>(url: string, signal?: AbortSignal): Promise<[Response, T]> {
+    const response = await authFetch(url, { signal });
     if (!response.ok) throw new HttpError(response.status, response.statusText ?? "No response");
     const data = await response.json();
 
diff --git a/src/Frontend/src/composables/useAllowedRoutes.spec.ts b/src/Frontend/src/composables/useAllowedRoutes.spec.ts
new file mode 100644
index 000000000..8843a47c4
--- /dev/null
+++ b/src/Frontend/src/composables/useAllowedRoutes.spec.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { useAllowedRoutesStore } from "@/stores/AllowedRoutesStore";
+import { useAuthStore } from "@/stores/AuthStore";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
+
+vi.mock("@/components/serviceControlClient", () => ({
+  default: { fetchFromServiceControl: vi.fn(), fetchTypedFromServiceControl: vi.fn() },
+}));
+vi.mock("@/components/monitoring/monitoringClient", () => ({
+  default: { isMonitoringEnabled: false, fetchAllowedRoutes: vi.fn() },
+}));
+
+describe("useAllowedRoutes", () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  function arrange(enabled: boolean, authed: boolean, keys: string[]) {
+    const auth = useAuthStore();
+    auth.authEnabled = enabled;
+    auth.isAuthenticated = authed;
+    const store = useAllowedRoutesStore();
+    store.routes = new Map(keys.map((k) => [k, { method: "", url_template: "" }]));
+    store.loaded = keys.length > 0;
+    store.loadAttempted = true;
+  }
+
+  it("allows a granted route", () => {
+    arrange(true, true, ["POST /api/errors/retry"]);
+    expect(useAllowedRoutes().canCall(ApiRoutes.retryMessage)).toBe(true);
+  });
+  it("denies an ungranted route when gating", () => {
+    arrange(true, true, ["GET /api/errors"]);
+    expect(useAllowedRoutes().canCall(ApiRoutes.retryMessage)).toBe(false);
+  });
+  it("fails open when auth disabled", () => {
+    arrange(false, false, []);
+    expect(useAllowedRoutes().canCall(ApiRoutes.retryMessage)).toBe(true);
+  });
+  it("canCall accepts and ignores a resource argument", () => {
+    arrange(true, true, ["POST /api/errors/retry"]);
+    expect(useAllowedRoutes().canCall(ApiRoutes.retryMessage, { queue: "billing" })).toBe(true);
+  });
+  it("canAnyCall is true if any entry is granted", () => {
+    arrange(true, true, ["GET /api/errors"]);
+    expect(useAllowedRoutes().canAnyCall([ApiRoutes.retryMessage, ApiRoutes.viewFailedMessages])).toBe(true);
+  });
+
+  it("ready is false when auth on + authenticated but loadAttempted is false, then true after loadAttempted", () => {
+    const auth = useAuthStore();
+    auth.authEnabled = true;
+    auth.isAuthenticated = true;
+    const store = useAllowedRoutesStore();
+    store.routes = new Map();
+    store.loaded = false;
+    store.loadAttempted = false;
+    expect(useAllowedRoutes().ready.value).toBe(false);
+    store.loadAttempted = true;
+    expect(useAllowedRoutes().ready.value).toBe(true);
+  });
+});
diff --git a/src/Frontend/src/composables/useAllowedRoutes.ts b/src/Frontend/src/composables/useAllowedRoutes.ts
new file mode 100644
index 000000000..1473963c2
--- /dev/null
+++ b/src/Frontend/src/composables/useAllowedRoutes.ts
@@ -0,0 +1,33 @@
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useAllowedRoutesStore } from "@/stores/AllowedRoutesStore";
+import { useAuthStore } from "@/stores/AuthStore";
+import { normalizeRouteKey } from "@/composables/routeMatching";
+import type { RouteRef } from "@/composables/apiRoutes";
+
+// Route-aware gating composable (the primitive). The resource-owning view-model calls canCall and
+// exposes the result; templates bind. Gating is fail-open: only applies once authorization is enabled,
+// the user is authenticated and the manifest has loaded — otherwise everything is shown.
+export function useAllowedRoutes() {
+  const store = useAllowedRoutesStore();
+  const { authEnabled, isAuthenticated } = storeToRefs(useAuthStore());
+
+  const shouldGate = computed(() => authEnabled.value && isAuthenticated.value && store.loaded);
+  const ready = computed(() => !(authEnabled.value && isAuthenticated.value) || store.loadAttempted);
+
+  function fetchManifest(): Promise<void> {
+    return store.refresh();
+  }
+
+  // resource: reserved for future resource-level scope (ignored today). See design Future-proofing.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function canCall(entry: RouteRef, _resource?: object): boolean {
+    return !shouldGate.value || store.routes.has(normalizeRouteKey(entry.method, entry.path));
+  }
+
+  function canAnyCall(entries: RouteRef[]): boolean {
+    return entries.some((e) => canCall(e));
+  }
+
+  return { fetchManifest, canCall, canAnyCall, shouldGate, ready };
+}
diff --git a/src/Frontend/src/composables/useAuthenticatedFetch.ts b/src/Frontend/src/composables/useAuthenticatedFetch.ts
index 2fa2d0cfa..220ea4482 100644
--- a/src/Frontend/src/composables/useAuthenticatedFetch.ts
+++ b/src/Frontend/src/composables/useAuthenticatedFetch.ts
@@ -1,4 +1,6 @@
 import { useAuthStore } from "@/stores/AuthStore";
+import { useShowToast } from "@/composables/toast";
+import { TYPE } from "vue-toastification";
 
 const UNAUTHENTICATED_ENDPOINTS = ["/api/authentication/configuration"];
 
@@ -6,11 +8,24 @@ function isUnauthenticatedEndpoint(url: string): boolean {
   return UNAUTHENTICATED_ENDPOINTS.some((endpoint) => url.includes(endpoint));
 }
 
+async function handle403Toast(response: Response): Promise<void> {
+  let message = "You do not have permission to perform this action.";
+  try {
+    const body = await response.clone().json();
+    if (body?.message) message = body.message;
+  } catch {
+    // keep default message
+  }
+  useShowToast(TYPE.ERROR, "Forbidden", message);
+}
+
 /**
  * Authenticated fetch wrapper that automatically includes JWT token
  * in the Authorization header when authentication is enabled.
+ * When a 403 response is received the denial reason from ServiceControl's
+ * structured body ({ error, message }) is surfaced as an error toast.
  */
-export function authFetch(input: RequestInfo, init?: RequestInit): Promise<Response> {
+export async function authFetch(input: RequestInfo, init?: RequestInit): Promise<Response> {
   const authStore = useAuthStore();
   const url = typeof input === "string" ? input : input.url;
 
@@ -34,5 +49,11 @@ export function authFetch(input: RequestInfo, init?: RequestInit): Promise<Respo
   const headers = new Headers(init?.headers);
   headers.set("Authorization", `Bearer ${token}`);
 
-  return fetch(input, { ...init, headers });
+  const response = await fetch(input, { ...init, headers });
+
+  if (response.status === 403) {
+    await handle403Toast(response);
+  }
+
+  return response;
 }
diff --git a/src/Frontend/src/resources/RootUrls.ts b/src/Frontend/src/resources/RootUrls.ts
index 5c18ca5c6..7826ba27a 100644
--- a/src/Frontend/src/resources/RootUrls.ts
+++ b/src/Frontend/src/resources/RootUrls.ts
@@ -17,4 +17,6 @@ export default interface RootUrls {
   event_log_items: string;
   archived_groups_url: string;
   get_archive_group: string;
+  mypermissions_all?: string;
+  mypermissions_summary?: string;
 }
diff --git a/src/Frontend/src/stores/AllowedRoutesStore.spec.ts b/src/Frontend/src/stores/AllowedRoutesStore.spec.ts
new file mode 100644
index 000000000..cd7351fe0
--- /dev/null
+++ b/src/Frontend/src/stores/AllowedRoutesStore.spec.ts
@@ -0,0 +1,91 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { ApiRoutes } from "@/composables/apiRoutes";
+import { normalizeRouteKey } from "@/composables/routeMatching";
+
+const scFetch = vi.fn();
+const monFetch = vi.fn();
+vi.mock("@/components/serviceControlClient", () => ({ default: { fetchFromServiceControl: (s: string) => scFetch(s) } }));
+vi.mock("@/components/monitoring/monitoringClient", () => ({
+  default: {
+    get isMonitoringEnabled() {
+      return true;
+    },
+    fetchAllowedRoutes: () => monFetch(),
+  },
+}));
+
+import { useAllowedRoutesStore } from "@/stores/AllowedRoutesStore";
+
+const ok = (body: unknown) => ({ ok: true, status: 200, json: () => Promise.resolve(body) });
+
+describe("AllowedRoutesStore", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    scFetch.mockReset();
+    monFetch.mockReset();
+  });
+
+  it("merges Primary and Monitoring manifests into normalized keys", async () => {
+    scFetch.mockResolvedValue(ok([{ method: "POST", url_template: "/api/errors/{id}/retry" }]));
+    monFetch.mockResolvedValue(ok([{ method: "DELETE", url_template: "/api/monitored-instance/{n}/{i}" }]));
+    const store = useAllowedRoutesStore();
+    await store.refresh();
+    expect(store.routes.has("POST /api/errors/{}/retry")).toBe(true);
+    expect(store.routes.has("DELETE /api/monitored-instance/{}/{}")).toBe(true);
+    expect(store.loaded).toBe(true);
+  });
+
+  it("fails open per instance: a 404 from one instance contributes nothing but does not throw", async () => {
+    scFetch.mockResolvedValue(ok([{ method: "GET", url_template: "/api/errors" }]));
+    monFetch.mockResolvedValue({ ok: false, status: 404, json: () => Promise.resolve({}) });
+    const store = useAllowedRoutesStore();
+    await store.refresh();
+    expect(store.routes.has("GET /api/errors")).toBe(true);
+    expect(store.loadAttempted).toBe(true);
+  });
+
+  it("treats a non-array 200 response body as a failed instance: loaded stays false when both return non-array", async () => {
+    scFetch.mockResolvedValue(ok({}));
+    monFetch.mockResolvedValue(ok(null));
+    const store = useAllowedRoutesStore();
+    await store.refresh();
+    expect(store.loaded).toBe(false);
+    expect(store.loadAttempted).toBe(true);
+  });
+
+  it("fails open globally: loaded is false when both instances fail with network errors", async () => {
+    scFetch.mockRejectedValue(new Error("network error"));
+    monFetch.mockRejectedValue(new Error("network error"));
+    const store = useAllowedRoutesStore();
+    await store.refresh();
+    expect(store.loaded).toBe(false);
+    expect(store.loadAttempted).toBe(true);
+  });
+
+  it("Monitoring manifest entry at root (no /api prefix) matches the ApiRoutes registry path", async () => {
+    // The Monitoring instance serves monitored-endpoints at root — no /api prefix.
+    // This test pins the cross-repo path contract: the manifest entry the Monitoring
+    // instance returns must round-trip through normalizeRouteKey to produce the same
+    // key as the registry uses for viewMonitoredEndpoints.
+    scFetch.mockResolvedValue(ok([]));
+    monFetch.mockResolvedValue(ok([{ method: "GET", url_template: "/monitored-endpoints" }]));
+    const store = useAllowedRoutesStore();
+    await store.refresh();
+    const expectedKey = normalizeRouteKey(ApiRoutes.viewMonitoredEndpoints.method, ApiRoutes.viewMonitoredEndpoints.path);
+    expect(expectedKey).toBe("GET /monitored-endpoints");
+    expect(store.routes.has(expectedKey)).toBe(true);
+  });
+
+  it("skips a malformed entry instead of aborting the load and failing gates open", async () => {
+    // Regression: an entry without a template once threw inside the merge, leaving the store
+    // unloaded so every gate failed OPEN. A bad entry must be skipped and the rest still load.
+    scFetch.mockResolvedValue(ok([{ method: "GET", url_template: "/api/errors" }, { method: "POST" }]));
+    monFetch.mockResolvedValue(ok([]));
+    const store = useAllowedRoutesStore();
+    await store.refresh();
+    expect(store.loaded).toBe(true);
+    expect(store.routes.has("GET /api/errors")).toBe(true);
+    expect(store.routes.size).toBe(1);
+  });
+});
diff --git a/src/Frontend/src/stores/AllowedRoutesStore.ts b/src/Frontend/src/stores/AllowedRoutesStore.ts
new file mode 100644
index 000000000..cba904549
--- /dev/null
+++ b/src/Frontend/src/stores/AllowedRoutesStore.ts
@@ -0,0 +1,84 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref } from "vue";
+import serviceControlClient from "@/components/serviceControlClient";
+import monitoringClient from "@/components/monitoring/monitoringClient";
+import { normalizeRouteKey } from "@/composables/routeMatching";
+import logger from "@/logger";
+
+export interface ManifestEntry {
+  method: string;
+  // ServiceControl pins this field to snake_case on every instance (RouteManifestEntry uses
+  // [JsonPropertyName]). Optional at the type level because wire data is validated at runtime.
+  url_template?: string;
+  [k: string]: unknown;
+}
+
+// Holds the allowed-route manifest the current token may call, merged from the instances
+// ServicePulse calls directly (Primary + Monitoring). A Map (not a Set) preserves each entry so a
+// future per-route `scope` field survives (resource-level checks). Keys are normalizeRouteKey().
+export const useAllowedRoutesStore = defineStore("AllowedRoutesStore", () => {
+  const routes = ref<Map<string, ManifestEntry>>(new Map());
+  const loaded = ref(false);
+  const loadAttempted = ref(false);
+
+  // Per-store in-flight guard so concurrent callers share one request. Kept on the store
+  // (not module scope) so each Pinia instance — e.g. a re-mounted app — has its own, and a
+  // stale request can never resolve into a different store instance.
+  let inFlight: Promise<void> | null = null;
+
+  async function fetchInstance(get: () => Promise<Response | undefined>): Promise<ManifestEntry[] | null> {
+    try {
+      const response = await get();
+      if (!response || !response.ok) return null; // per-instance fail-open
+      const json = await response.json();
+      if (!Array.isArray(json)) return null; // guard against non-array bodies (error envelopes, etc.)
+      return json as ManifestEntry[];
+    } catch (error) {
+      logger.warn("Failed to fetch allowed routes", error);
+      return null;
+    }
+  }
+
+  async function load() {
+    try {
+      const [primary, monitoring] = await Promise.all([
+        fetchInstance(() => serviceControlClient.fetchFromServiceControl("my/routes")),
+        fetchInstance(() => (monitoringClient.isMonitoringEnabled ? monitoringClient.fetchAllowedRoutes() : Promise.resolve(undefined))),
+      ]);
+      const merged = new Map<string, ManifestEntry>();
+      for (const list of [primary, monitoring]) {
+        for (const entry of list ?? []) {
+          // Skip any entry missing a method or template rather than throwing: a single malformed
+          // entry must never abort the load, which would leave the store unloaded and silently
+          // fail every permission gate OPEN (showing actions the user cannot perform).
+          if (!entry.method || typeof entry.url_template !== "string") {
+            logger.warn("Skipping malformed allowed-route entry", entry);
+            continue;
+          }
+          merged.set(normalizeRouteKey(entry.method, entry.url_template), entry);
+        }
+      }
+      routes.value = merged;
+      loaded.value = primary !== null || monitoring !== null;
+    } finally {
+      loadAttempted.value = true;
+    }
+  }
+
+  // Fetch (or join an in-flight fetch of) the current user's allowed routes.
+  function refresh() {
+    return (inFlight ??= load().finally(() => (inFlight = null)));
+  }
+
+  function clear() {
+    routes.value = new Map();
+    loaded.value = false;
+    loadAttempted.value = false;
+  }
+
+  return { routes, loaded, loadAttempted, refresh, clear };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAllowedRoutesStore, import.meta.hot));
+}
diff --git a/src/Frontend/test/preconditions/authentication.ts b/src/Frontend/test/preconditions/authentication.ts
index ba8a73014..cca09ae17 100644
--- a/src/Frontend/test/preconditions/authentication.ts
+++ b/src/Frontend/test/preconditions/authentication.ts
@@ -66,6 +66,12 @@ export const hasAuthenticationEnabled =
     driver.mockEndpoint(`${serviceControlInstanceUrl}authentication/configuration`, {
       body: fullConfig,
     });
+    // Once authenticated the app fetches the my/routes manifest from each instance. These tests
+    // predate route gating and assert the full UI, so respond 404 on both: the store then fails
+    // open and gating stays inert. Gating itself is covered by dedicated store/composable tests.
+    const monitoringInstanceUrl = window.defaultConfig.monitoring_urls[0];
+    driver.mockEndpoint(`${serviceControlInstanceUrl}my/routes`, { status: 404, body: [] });
+    driver.mockEndpoint(`${monitoringInstanceUrl}api/my/routes`, { status: 404, body: [] });
     return fullConfig;
   };
 

From 0bc9faa0db4575ab6b17fc8619eb47c73c05b13c Mon Sep 17 00:00:00 2001
From: williambza <william.brander@gmail.com>
Date: Fri, 26 Jun 2026 15:56:06 +0200
Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20Gate=20the=20navigation=20menu?=
 =?UTF-8?q?=20and=20configuration=20tabs=20on=20allowed=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hide navigation items (PageHeader.vue) and Configuration sub-tabs (ConfigurationView.vue) whose backing ServiceControl route the current user is not allowed to call.

Co-Authored-By: Ramon Smits <ramon.smits@gmail.com>
Co-Authored-By: Dennis van der Stelt <dvdstelt@gmail.com>
---
 src/Frontend/src/components/PageHeader.vue   | 35 +++++----
 src/Frontend/src/views/ConfigurationView.vue | 76 +++++++++++++++++---
 2 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/src/Frontend/src/components/PageHeader.vue b/src/Frontend/src/components/PageHeader.vue
index 093cff518..f465a267c 100644
--- a/src/Frontend/src/components/PageHeader.vue
+++ b/src/Frontend/src/components/PageHeader.vue
@@ -15,6 +15,8 @@ import AuditMenuItem from "./audit/AuditMenuItem.vue";
 import monitoringClient from "@/components/monitoring/monitoringClient";
 import UserProfileMenuItem from "@/components/UserProfileMenuItem.vue";
 import { useAuthStore } from "@/stores/AuthStore";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 import { storeToRefs } from "pinia";
 
 const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
@@ -22,20 +24,27 @@ const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
 const authStore = useAuthStore();
 const { authEnabled, isAuthenticated } = storeToRefs(authStore);
 
+const { canCall, ready } = useAllowedRoutes();
+
+// Each item gates on the specific route ServiceControl enforces for that area.
+// Gate-on-ready: render nothing until permissions are known, so items never appear and
+// then disappear. canCall() fails open, so auth-disabled / failed-load shows everything.
 // prettier-ignore
-const menuItems = computed(
-  () => [
-  DashboardMenuItem,
-  HeartbeatsMenuItem,
-  ...(isMonitoringEnabled ? [MonitoringMenuItem] : []),
-  AuditMenuItem,
-  FailedMessagesMenuItem,
-  CustomChecksMenuItem,
-  EventsMenuItem,
-  ThroughputMenuItem,
-  ConfigurationMenuItem,
-  FeedbackButton,
-]);
+const menuItems = computed(() => {
+  if (!ready.value) return [];
+  return [
+    DashboardMenuItem,
+    ...(canCall(ApiRoutes.viewHeartbeats) ? [HeartbeatsMenuItem] : []),
+    ...(isMonitoringEnabled && canCall(ApiRoutes.viewMonitoredEndpoints) ? [MonitoringMenuItem] : []),
+    ...(canCall(ApiRoutes.viewAuditMessages) ? [AuditMenuItem] : []),
+    ...(canCall(ApiRoutes.viewFailedMessages) ? [FailedMessagesMenuItem] : []),
+    ...(canCall(ApiRoutes.viewCustomChecks) ? [CustomChecksMenuItem] : []),
+    ...(canCall(ApiRoutes.viewEventLog) ? [EventsMenuItem] : []),
+    ...(canCall(ApiRoutes.viewThroughput) ? [ThroughputMenuItem] : []),
+    ConfigurationMenuItem,
+    FeedbackButton,
+  ];
+});
 </script>
 
 <template>
diff --git a/src/Frontend/src/views/ConfigurationView.vue b/src/Frontend/src/views/ConfigurationView.vue
index ecb4b8e43..f823e23a1 100644
--- a/src/Frontend/src/views/ConfigurationView.vue
+++ b/src/Frontend/src/views/ConfigurationView.vue
@@ -11,6 +11,9 @@ import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoR
 import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
 import { useRedirectsStore } from "@/stores/RedirectsStore";
 import { useLicenseStore } from "@/stores/LicenseStore";
+import { useAuthStore } from "@/stores/AuthStore";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 
 const { store: throughputStore } = useThroughputStoreAutoRefresh();
 const { hasErrors } = storeToRefs(throughputStore);
@@ -19,6 +22,11 @@ const connectionState = connectionStore.connectionState;
 const redirectsStore = useRedirectsStore();
 const licenseStore = useLicenseStore();
 const { licenseStatus } = licenseStore;
+const authStore = useAuthStore();
+
+// Each tab gates on the specific route ServiceControl enforces for it. Gate-on-ready:
+// the tab row is held until permissions are known, so tabs don't appear and then disappear.
+const { canCall, ready } = useAllowedRoutes();
 
 onMounted(async () => {
   if (notConnected.value) {
@@ -53,12 +61,13 @@ function preventIfDisabled(e: Event) {
     </div>
     <div class="row">
       <div class="col-sm-12">
-        <div class="nav tabs">
-          <h5 :class="{ active: isRouteSelected(routeLinks.configuration.license.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="license">
+        <div class="nav tabs" v-if="ready">
+          <h5 v-if="canCall(ApiRoutes.viewLicense)" :class="{ active: isRouteSelected(routeLinks.configuration.license.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="license">
             <RouterLink :to="routeLinks.configuration.license.link">License</RouterLink>
             <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
           </h5>
           <h5
+            v-if="canCall(ApiRoutes.manageThroughput)"
             :class="{ active: isRouteSelected(routeLinks.throughput.setup.root) || isRouteSelected(routeLinks.throughput.setup.mask.link) || isRouteSelected(routeLinks.throughput.setup.diagnostics.link), disabled: notConnected }"
             @click.capture="preventIfDisabled"
             class="nav-item"
@@ -69,33 +78,84 @@ function preventIfDisabled(e: Event) {
             <exclamation-mark :type="WarningLevel.Danger" v-if="hasErrors" />
           </h5>
           <template v-if="!licenseStatus.isExpired">
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.massTransitConnector.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="mass-transit-connector">
+            <h5
+              v-if="canCall(ApiRoutes.viewConnections)"
+              :class="{
+                active: isRouteSelected(routeLinks.configuration.massTransitConnector.link),
+                disabled: notConnected,
+              }"
+              @click.capture="preventIfDisabled"
+              class="nav-item"
+              role="tab"
+              aria-label="mass-transit-connector"
+            >
               <RouterLink :to="routeLinks.configuration.massTransitConnector.link">MassTransit Connector</RouterLink>
             </h5>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.healthCheckNotifications.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="health-check-notifications">
+            <h5
+              v-if="canCall(ApiRoutes.viewNotifications)"
+              :class="{
+                active: isRouteSelected(routeLinks.configuration.healthCheckNotifications.link),
+                disabled: notConnected,
+              }"
+              @click.capture="preventIfDisabled"
+              class="nav-item"
+              role="tab"
+              aria-label="health-check-notifications"
+            >
               <RouterLink :to="routeLinks.configuration.healthCheckNotifications.link">Health Check Notifications</RouterLink>
             </h5>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.retryRedirects.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="retry-redirects">
+            <h5
+              v-if="canCall(ApiRoutes.viewRedirects)"
+              :class="{
+                active: isRouteSelected(routeLinks.configuration.retryRedirects.link),
+                disabled: notConnected,
+              }"
+              @click.capture="preventIfDisabled"
+              class="nav-item"
+              role="tab"
+              aria-label="retry-redirects"
+            >
               <RouterLink :to="routeLinks.configuration.retryRedirects.link">Retry Redirects ({{ redirectsStore.redirects.total }})</RouterLink>
             </h5>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.connections.link) }" class="nav-item" role="tab" aria-label="connections">
+            <h5
+              v-if="canCall(ApiRoutes.viewConnections)"
+              :class="{
+                active: isRouteSelected(routeLinks.configuration.connections.link),
+              }"
+              class="nav-item"
+              role="tab"
+              aria-label="connections"
+            >
               <RouterLink :to="routeLinks.configuration.connections.link">
                 Connections
                 <exclamation-mark v-if="connectionStore.displayConnectionsWarning" :type="WarningLevel.Danger" />
               </RouterLink>
             </h5>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.endpointConnection.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="endpoint-connection">
+            <h5
+              v-if="canCall(ApiRoutes.viewEndpoints)"
+              :class="{
+                active: isRouteSelected(routeLinks.configuration.endpointConnection.link),
+                disabled: notConnected,
+              }"
+              @click.capture="preventIfDisabled"
+              class="nav-item"
+              role="tab"
+              aria-label="endpoint-connection"
+            >
               <RouterLink :to="routeLinks.configuration.endpointConnection.link">Endpoint Connection</RouterLink>
             </h5>
           </template>
           <template v-else>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.connections.link) }" class="nav-item" role="tab" aria-label="connections">
+            <h5 v-if="canCall(ApiRoutes.viewConnections)" :class="{ active: isRouteSelected(routeLinks.configuration.connections.link) }" class="nav-item" role="tab" aria-label="connections">
               <RouterLink :to="routeLinks.configuration.connections.link">
                 Connections
                 <exclamation-mark v-if="connectionStore.displayConnectionsWarning" :type="WarningLevel.Danger" />
               </RouterLink>
             </h5>
           </template>
+          <h5 v-if="authStore.authEnabled" :class="{ active: isRouteSelected(routeLinks.configuration.userPermissions.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="user-permissions">
+            <RouterLink :to="routeLinks.configuration.userPermissions.link">User Permissions</RouterLink>
+          </h5>
         </div>
       </div>
     </div>

From 3e1e354ca50af234aed488d70bf3f2262466f2e6 Mon Sep 17 00:00:00 2001
From: Dennis van der Stelt <dvdstelt@gmail.com>
Date: Fri, 26 Jun 2026 15:56:51 +0200
Subject: [PATCH 4/6] =?UTF-8?q?=E2=9C=A8=20Disable=20unavailable=20message?=
 =?UTF-8?q?=20and=20configuration=20actions=20with=20a=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add PermissionGate, a wrapper that disables a slotted action and shows a tooltip with the reason when the user lacks the backing route, instead of hiding the control. Apply it to failed-message, deleted-message and message-group actions, custom-check dismiss, heartbeat endpoint instances, redirects, health-check notifications, edit and retry, and monitored endpoint deletion. Resource-owning stores expose the capability getters these controls bind to. The edit/config fetch is skipped for users without edit permission and treats a 403 as unavailable rather than logging an error.

Co-Authored-By: Ramon Smits <ramon.smits@gmail.com>
Co-Authored-By: williambza <william.brander@gmail.com>
---
 src/Frontend/src/assets/main.css              |   1 +
 src/Frontend/src/components/OnOffSwitch.vue   |  23 +++-
 .../src/components/PermissionGate.spec.ts     |  25 +++++
 .../src/components/PermissionGate.vue         |  45 ++++++++
 .../HealthCheckNotifications.vue              |  18 ++-
 .../configuration/RetryRedirects.vue          |  17 ++-
 .../customchecks/CustomCheckView.vue          |  16 ++-
 .../failedmessages/DeletedMessageGroups.vue   |  25 +++--
 .../failedmessages/DeletedMessages.vue        |  15 ++-
 .../failedmessages/FailedMessages.vue         |  31 +++++-
 .../failedmessages/MessageGroupList.vue       |  65 ++++++-----
 .../messageGroupButtonPermissions.spec.ts     | 105 ++++++++++++++++++
 .../heartbeats/EndpointInstances.vue          |  13 ++-
 .../messages/DeleteMessageButton.vue          |   4 +-
 .../messages/EditAndRetryButton.vue           |  12 +-
 .../messages/RestoreMessageButton.vue         |   4 +-
 .../messages/RetryMessageButton.vue           |   4 +-
 .../messages/messageButtonPermissions.spec.ts |  84 ++++++++++++++
 .../monitoring/EndpointInstances.vue          |   4 +-
 src/Frontend/src/stores/HealthChecksStore.ts  |  10 +-
 .../src/stores/HeartbeatInstancesStore.ts     |   6 +
 src/Frontend/src/stores/MessageStore.ts       |  21 +++-
 .../stores/MonitoringEndpointDetailsStore.ts  |   8 +-
 src/Frontend/src/stores/RedirectsStore.ts     |   9 +-
 src/Frontend/src/stores/ThroughputStore.ts    |  10 +-
 25 files changed, 500 insertions(+), 75 deletions(-)
 create mode 100644 src/Frontend/src/components/PermissionGate.spec.ts
 create mode 100644 src/Frontend/src/components/PermissionGate.vue
 create mode 100644 src/Frontend/src/components/failedmessages/messageGroupButtonPermissions.spec.ts
 create mode 100644 src/Frontend/src/components/messages/messageButtonPermissions.spec.ts

diff --git a/src/Frontend/src/assets/main.css b/src/Frontend/src/assets/main.css
index a3bd8e2a0..47c52a772 100644
--- a/src/Frontend/src/assets/main.css
+++ b/src/Frontend/src/assets/main.css
@@ -353,6 +353,7 @@ input.check-label {
 .btn-toolbar > .btn,
 .btn-toolbar > .btn-group,
 .btn-toolbar > .input-group,
+.btn-toolbar > .permission-gate,
 .action-btns .btn {
   margin-left: 0;
   margin-right: 5px;
diff --git a/src/Frontend/src/components/OnOffSwitch.vue b/src/Frontend/src/components/OnOffSwitch.vue
index 1042c63cd..18aa2250d 100644
--- a/src/Frontend/src/components/OnOffSwitch.vue
+++ b/src/Frontend/src/components/OnOffSwitch.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
-defineProps<{
-  id: string;
-  value: boolean | null;
-}>();
+withDefaults(
+  defineProps<{
+    id: string;
+    value: boolean | null;
+    disabled?: boolean;
+  }>(),
+  { disabled: false }
+);
 
 const emit = defineEmits<{ toggle: [] }>();
 </script>
 
 <template>
-  <div class="onoffswitch">
-    <input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" :aria-label="`onoffswitch${id}`" class="onoffswitch-checkbox" @click="emit('toggle')" :checked="value ?? false" />
+  <div class="onoffswitch" :class="{ disabled }">
+    <input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" :aria-label="`onoffswitch${id}`" class="onoffswitch-checkbox" :disabled="disabled" @click="emit('toggle')" :checked="value ?? false" />
     <label class="onoffswitch-label" :for="`onoffswitch${id}`" role="switch" :aria-checked="value ?? false" :aria-label="id">
       <span class="onoffswitch-inner"></span>
       <span class="onoffswitch-switch"></span>
@@ -27,6 +31,13 @@ const emit = defineEmits<{ toggle: [] }>();
   width: 76px;
 }
 
+/* Disabled: dim it and let pointer events pass through to a wrapping PermissionGate so its
+   tooltip shows. The native :disabled on the checkbox already prevents toggling. */
+.onoffswitch.disabled {
+  opacity: 0.65;
+  pointer-events: none;
+}
+
 .onoffswitch-checkbox {
   display: none;
 }
diff --git a/src/Frontend/src/components/PermissionGate.spec.ts b/src/Frontend/src/components/PermissionGate.spec.ts
new file mode 100644
index 000000000..eb60fc752
--- /dev/null
+++ b/src/Frontend/src/components/PermissionGate.spec.ts
@@ -0,0 +1,25 @@
+import { render } from "@testing-library/vue";
+import { describe, test, expect } from "vitest";
+import PermissionGate from "@/components/PermissionGate.vue";
+
+function mountGate(allowed: boolean) {
+  return render(PermissionGate, {
+    props: { allowed, reason: "You don't have permission" },
+    slots: { default: '<button class="btn">Do it</button>' },
+    global: { directives: { tippy: () => {} } },
+  });
+}
+
+describe("PermissionGate", () => {
+  test("renders the slot and marks the wrapper denied when not allowed", () => {
+    const { container, getByText } = mountGate(false);
+    expect(getByText("Do it")).toBeTruthy();
+    expect(container.querySelector(".permission-gate.denied")).not.toBeNull();
+  });
+
+  test("does not mark the wrapper denied when allowed", () => {
+    const { container } = mountGate(true);
+    expect(container.querySelector(".permission-gate")).not.toBeNull();
+    expect(container.querySelector(".permission-gate.denied")).toBeNull();
+  });
+});
diff --git a/src/Frontend/src/components/PermissionGate.vue b/src/Frontend/src/components/PermissionGate.vue
new file mode 100644
index 000000000..a04ee05b9
--- /dev/null
+++ b/src/Frontend/src/components/PermissionGate.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Wraps an action (button or link) so that, when the current user is not allowed to use it,
+// it stays visible but reads as disabled and shows a tooltip explaining why, instead of
+// silently failing server-side.
+//
+// The consumer still disables the inner control (so it gets the native disabled state and
+// any other disable conditions still apply); this wrapper adds the tooltip, lets pointer
+// events reach the wrapper so the tooltip shows even over a disabled button, and tidies the
+// disabled look of link-style buttons.
+interface Props {
+  allowed: boolean;
+  reason?: string;
+}
+withDefaults(defineProps<Props>(), { reason: "" });
+</script>
+
+<template>
+  <span class="permission-gate" :class="{ denied: !allowed }" v-tippy="!allowed ? reason : ''">
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.permission-gate {
+  display: inline-flex;
+}
+
+.permission-gate.denied {
+  cursor: not-allowed;
+}
+
+/* Let pointer events reach the wrapper so its tooltip shows even though the button is disabled. */
+.permission-gate.denied :deep(.btn) {
+  pointer-events: none;
+}
+
+/* A permission-disabled link should read as disabled: gray, without the default button box. */
+.permission-gate.denied :deep(.btn-link),
+.permission-gate.denied :deep(.btn-link .button-text) {
+  color: #6c757d;
+  opacity: 1;
+  background-color: transparent;
+  border-color: transparent;
+}
+</style>
diff --git a/src/Frontend/src/components/configuration/HealthCheckNotifications.vue b/src/Frontend/src/components/configuration/HealthCheckNotifications.vue
index cc23cd219..a79564e7f 100644
--- a/src/Frontend/src/components/configuration/HealthCheckNotifications.vue
+++ b/src/Frontend/src/components/configuration/HealthCheckNotifications.vue
@@ -9,12 +9,16 @@ import type UpdateEmailNotificationsSettingsRequest from "@/resources/UpdateEmai
 import OnOffSwitch from "../OnOffSwitch.vue";
 import FAIcon from "@/components/FAIcon.vue";
 import ActionButton from "@/components/ActionButton.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
 import { faCheck, faEdit, faEnvelope, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { useHealthChecksStore } from "@/stores/HealthChecksStore";
 import { storeToRefs } from "pinia";
 
 const healthChecksStore = useHealthChecksStore();
-const { emailNotifications } = storeToRefs(healthChecksStore);
+const { emailNotifications, canManageNotifications, canTestNotifications } = storeToRefs(healthChecksStore);
+
+const manageDeniedTooltip = "You don't have permission to manage notifications.";
+const testDeniedTooltip = "You don't have permission to send test notifications.";
 
 const emailTestSuccessful = ref<boolean | null>(null);
 const emailTestInProgress = ref<boolean | null>(null);
@@ -77,7 +81,9 @@ onMounted(async () => {
                 <div class="col-12 no-side-padding">
                   <div class="row">
                     <div class="col-auto">
-                      <OnOffSwitch id="emailNotifications" @toggle="toggleEmailNotifications" :value="emailNotifications.enabled" />
+                      <PermissionGate :allowed="canManageNotifications" :reason="manageDeniedTooltip">
+                        <OnOffSwitch id="emailNotifications" @toggle="toggleEmailNotifications" :value="emailNotifications.enabled" :disabled="!canManageNotifications" />
+                      </PermissionGate>
                       <div>
                         <span class="connection-test connection-failed">
                           <template v-if="emailToggleSuccessful === false"> <FAIcon :icon="faExclamationTriangle" /> Update failed </template>
@@ -89,10 +95,14 @@ onMounted(async () => {
                         <div class="col-12">
                           <p class="lead">Email notifications</p>
                           <p class="endpoint-metadata">
-                            <ActionButton variant="link" size="sm" :icon="faEdit" @click="editEmailNotifications">Configure</ActionButton>
+                            <PermissionGate :allowed="canManageNotifications" :reason="manageDeniedTooltip">
+                              <ActionButton variant="link" size="sm" :icon="faEdit" :disabled="!canManageNotifications" @click="editEmailNotifications">Configure</ActionButton>
+                            </PermissionGate>
                           </p>
                           <p class="endpoint-metadata">
-                            <ActionButton variant="link" size="sm" :icon="faEnvelope" @click="testEmailNotifications" :disabled="!!emailTestInProgress">Send test notification</ActionButton>
+                            <PermissionGate :allowed="canTestNotifications" :reason="testDeniedTooltip">
+                              <ActionButton variant="link" size="sm" :icon="faEnvelope" :disabled="!!emailTestInProgress || !canTestNotifications" @click="testEmailNotifications">Send test notification</ActionButton>
+                            </PermissionGate>
                             <span class="connection-test connection-testing">
                               <template v-if="emailTestInProgress">
                                 <i class="glyphicon glyphicon-refresh rotate"></i>
diff --git a/src/Frontend/src/components/configuration/RetryRedirects.vue b/src/Frontend/src/components/configuration/RetryRedirects.vue
index 4904439aa..b657f12fe 100644
--- a/src/Frontend/src/components/configuration/RetryRedirects.vue
+++ b/src/Frontend/src/components/configuration/RetryRedirects.vue
@@ -11,11 +11,16 @@ import type Redirect from "@/resources/Redirect";
 import RetryRedirectEdit, { type RetryRedirect } from "@/components/configuration/RetryRedirectEdit.vue";
 import FAIcon from "@/components/FAIcon.vue";
 import ActionButton from "@/components/ActionButton.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { useRedirectsStore } from "@/stores/RedirectsStore";
 import LoadingSpinner from "../LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
 
 const redirectsStore = useRedirectsStore();
+const { canManageRedirects } = storeToRefs(redirectsStore);
+// Creating, modifying and ending redirects all manage redirects.
+const redirectsDeniedTooltip = "You don't have permission to manage redirects.";
 
 const loadingData = ref(true);
 const redirects = redirectsStore.redirects;
@@ -131,7 +136,9 @@ onMounted(async () => {
           <div class="row">
             <div class="col-sm-12">
               <div class="btn-toolbar">
-                <ActionButton @click="createRedirect"><i class="fa pa-redirect-source pa-redirect-small"></i> Create Redirect</ActionButton>
+                <PermissionGate :allowed="canManageRedirects" :reason="redirectsDeniedTooltip">
+                  <ActionButton @click="createRedirect" :disabled="!canManageRedirects"><i class="fa pa-redirect-source pa-redirect-small"></i> Create Redirect</ActionButton>
+                </PermissionGate>
                 <span></span>
               </div>
             </div>
@@ -163,8 +170,12 @@ onMounted(async () => {
                     <div class="row">
                       <div class="col-sm-12">
                         <p class="small">
-                          <ActionButton variant="link" size="sm" @click="deleteRedirect(redirect)">End Redirect</ActionButton>
-                          <ActionButton variant="link" size="sm" @click="editRedirect(redirect)">Modify Redirect</ActionButton>
+                          <PermissionGate :allowed="canManageRedirects" :reason="redirectsDeniedTooltip">
+                            <ActionButton variant="link" size="sm" :disabled="!canManageRedirects" @click="deleteRedirect(redirect)">End Redirect</ActionButton>
+                          </PermissionGate>
+                          <PermissionGate :allowed="canManageRedirects" :reason="redirectsDeniedTooltip">
+                            <ActionButton variant="link" size="sm" :disabled="!canManageRedirects" @click="editRedirect(redirect)">Modify Redirect</ActionButton>
+                          </PermissionGate>
                         </p>
                       </div>
                     </div>
diff --git a/src/Frontend/src/components/customchecks/CustomCheckView.vue b/src/Frontend/src/components/customchecks/CustomCheckView.vue
index e59f0acfd..038576823 100644
--- a/src/Frontend/src/components/customchecks/CustomCheckView.vue
+++ b/src/Frontend/src/components/customchecks/CustomCheckView.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import type CustomCheck from "@/resources/CustomCheck";
 import TimeSince from "@/components/TimeSince.vue";
 import FAIcon from "@/components/FAIcon.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
 import { faCheck, faList, faServer } from "@fortawesome/free-solid-svg-icons";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { hexToCSSFilter } from "hex-to-css-filter";
 import useCustomChecksStoreAutoRefresh from "@/composables/useCustomChecksStoreAutoRefresh";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 
-defineProps<{ customCheck: CustomCheck }>();
+const props = defineProps<{ customCheck: CustomCheck }>();
 
 const { store } = useCustomChecksStoreAutoRefresh();
 const endpointColor = hexToCSSFilter("#929E9E").filter;
+
+const { canCall } = useAllowedRoutes();
+const canDismiss = computed(() => canCall(ApiRoutes.dismissCustomCheck, props.customCheck));
+const dismissDeniedTooltip = "You don't have permission to dismiss custom checks.";
 </script>
 
 <template>
@@ -36,7 +44,11 @@ const endpointColor = hexToCSSFilter("#929E9E").filter;
           </div>
         </div>
         <div>
-          <button type="button" class="btn btn-default" title="Dismiss this custom check so it doesn't show up as an alert" role="button" aria-label="custom-check-dismiss" @click="store.dismissCustomCheck(customCheck.id)">Dismiss</button>
+          <PermissionGate :allowed="canDismiss" :reason="dismissDeniedTooltip">
+            <button type="button" class="btn btn-default" title="Dismiss this custom check so it doesn't show up as an alert" role="button" aria-label="custom-check-dismiss" :disabled="!canDismiss" @click="store.dismissCustomCheck(customCheck.id)">
+              Dismiss
+            </button>
+          </PermissionGate>
         </div>
       </div>
     </div>
diff --git a/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue b/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue
index 39bc37259..4d0a31355 100644
--- a/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue
+++ b/src/Frontend/src/components/failedmessages/DeletedMessageGroups.vue
@@ -11,6 +11,9 @@ import routeLinks from "@/router/routeLinks";
 import { TYPE } from "vue-toastification";
 import MetadataItem from "@/components/MetadataItem.vue";
 import ActionButton from "@/components/ActionButton.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 import { faArrowRotateRight, faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { useDeletedMessageGroupsStore, statusesForRestoreOperation, type ExtendedFailureGroupView, type Status } from "@/stores/DeletedMessageGroupsStore";
@@ -25,6 +28,13 @@ const { autoRefresh, isRefreshing, updateInterval } = useStoreAutoRefresh("delet
 const { store } = autoRefresh();
 const { archiveGroups, classifiers, selectedClassifier } = storeToRefs(store);
 const router = useRouter();
+
+const { canCall } = useAllowedRoutes();
+// Restoring a deleted group is an unarchive; keep the button visible but disabled with a
+// tooltip when the user lacks the permission, instead of silently failing server-side.
+const canRestoreGroups = computed(() => canCall(ApiRoutes.restoreGroup));
+const restoreDeniedTooltip = "You don't have permission to restore message groups.";
+
 const showRestoreGroupModal = ref(false);
 const selectedGroup = ref<ExtendedFailureGroupView>();
 
@@ -163,16 +173,11 @@ watch(isRestoreInProgress, (restoreInProgress) => {
 
                             <div class="row" v-if="!isBeingRestored(group.workflow_state.status)">
                               <div class="col-sm-12 no-side-padding">
-                                <ActionButton
-                                  variant="link"
-                                  size="sm"
-                                  :icon="faArrowRotateRight"
-                                  :disabled="group.count === 0 || isBeingRestored(group.workflow_state.status)"
-                                  v-if="archiveGroups.length > 0"
-                                  @click.stop="showRestoreGroupDialog(group)"
-                                >
-                                  Restore group
-                                </ActionButton>
+                                <PermissionGate :allowed="canRestoreGroups" :reason="restoreDeniedTooltip" v-if="archiveGroups.length > 0">
+                                  <ActionButton variant="link" size="sm" :icon="faArrowRotateRight" :disabled="group.count === 0 || isBeingRestored(group.workflow_state.status) || !canRestoreGroups" @click.stop="showRestoreGroupDialog(group)">
+                                    Restore group
+                                  </ActionButton>
+                                </PermissionGate>
                               </div>
                             </div>
 
diff --git a/src/Frontend/src/components/failedmessages/DeletedMessages.vue b/src/Frontend/src/components/failedmessages/DeletedMessages.vue
index b63533a18..11bc5ae1b 100644
--- a/src/Frontend/src/components/failedmessages/DeletedMessages.vue
+++ b/src/Frontend/src/components/failedmessages/DeletedMessages.vue
@@ -10,6 +10,9 @@ import PaginationStrip from "../../components/PaginationStrip.vue";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { TYPE } from "vue-toastification";
 import FAIcon from "@/components/FAIcon.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 import { faArrowRotateRight } from "@fortawesome/free-solid-svg-icons";
 import { storeToRefs } from "pinia";
 import { useStoreAutoRefresh } from "@/composables/useAutoRefresh";
@@ -27,6 +30,12 @@ const { messages, groupId, groupName, totalCount, pageNumber, selectedPeriod } =
 const showConfirmRestore = ref(false);
 const messageList = ref<IMessageList | undefined>();
 
+const { canCall } = useAllowedRoutes();
+// Restoring messages is an unarchive; keep the button visible but disabled with a tooltip
+// when the user lacks the permission, instead of silently failing server-side.
+const canRestoreMessages = computed(() => canCall(ApiRoutes.restoreMessage));
+const restoreDeniedTooltip = "You don't have permission to restore messages.";
+
 function numberSelected() {
   return messageList.value?.getSelectedMessages()?.length ?? 0;
 }
@@ -103,7 +112,11 @@ watch(isRefreshing, () => {
             <div class="btn-toolbar">
               <button type="button" class="btn btn-default select-all" @click="selectAll" v-if="!isAnythingSelected()">Select all</button>
               <button type="button" class="btn btn-default select-all" @click="deselectAll" v-if="isAnythingSelected()">Clear selection</button>
-              <button type="button" class="btn btn-default" @click="showConfirmRestore = true" :disabled="!isAnythingSelected()"><FAIcon :icon="faArrowRotateRight" class="icon" /> Restore {{ numberSelected() }} selected</button>
+              <PermissionGate :allowed="canRestoreMessages" :reason="restoreDeniedTooltip">
+                <button type="button" class="btn btn-default" @click="showConfirmRestore = true" :disabled="!isAnythingSelected() || !canRestoreMessages">
+                  <FAIcon :icon="faArrowRotateRight" class="icon" /> Restore {{ numberSelected() }} selected
+                </button>
+              </PermissionGate>
             </div>
           </div>
           <div class="col-3">
diff --git a/src/Frontend/src/components/failedmessages/FailedMessages.vue b/src/Frontend/src/components/failedmessages/FailedMessages.vue
index 54cc9e165..1277f865b 100644
--- a/src/Frontend/src/components/failedmessages/FailedMessages.vue
+++ b/src/Frontend/src/components/failedmessages/FailedMessages.vue
@@ -16,6 +16,9 @@ import { TYPE } from "vue-toastification";
 import type GroupOperation from "@/resources/GroupOperation";
 import { faArrowDownAZ, faArrowDownZA, faArrowDownShortWide, faArrowDownWideShort, faArrowRotateRight, faTrash, faDownload } from "@fortawesome/free-solid-svg-icons";
 import ActionButton from "@/components/ActionButton.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 import { useMessageStore } from "@/stores/MessageStore";
 import { useRecoverabilityStore } from "@/stores/RecoverabilityStore";
 import { useStoreAutoRefresh } from "@/composables/useAutoRefresh";
@@ -32,6 +35,18 @@ const { autoRefresh, isRefreshing, updateInterval } = useStoreAutoRefresh("recov
 const { store } = autoRefresh();
 const { messages, groupId, groupName, totalCount, pageNumber } = storeToRefs(store);
 
+const { canCall } = useAllowedRoutes();
+// Keep the toolbar actions visible but disabled (with a tooltip) when the user lacks the
+// permission, so the capability stays discoverable and clicks don't silently fail server-side.
+const canRetryMessages = computed(() => canCall(ApiRoutes.retryMessage));
+const canDeleteMessages = computed(() => canCall(ApiRoutes.deleteMessage));
+const canRetryGroup = computed(() => canCall(ApiRoutes.retryGroup));
+const canDeleteGroup = computed(() => canCall(ApiRoutes.deleteGroup));
+const retryDeniedTooltip = "You don't have permission to retry messages.";
+const deleteDeniedTooltip = "You don't have permission to delete messages.";
+const retryAllDeniedTooltip = "You don't have permission to retry message groups.";
+const deleteAllDeniedTooltip = "You don't have permission to delete message groups.";
+
 const showDelete = ref(false);
 const showConfirmRetryAll = ref(false);
 const showConfirmDeleteAll = ref(false);
@@ -217,11 +232,19 @@ watch(isRefreshing, () => {
             <div class="btn-toolbar">
               <ActionButton v-if="!isAnythingSelected()" @click="selectAll">Select all</ActionButton>
               <ActionButton v-if="isAnythingSelected()" @click="deselectAll">Clear selection</ActionButton>
-              <ActionButton :icon="faArrowRotateRight" @click="retrySelected()" :disabled="!isAnythingSelected()">Retry {{ numberSelected() }} selected</ActionButton>
-              <ActionButton :icon="faTrash" @click="showDelete = true" :disabled="!isAnythingSelected()">Delete {{ numberSelected() }} selected</ActionButton>
+              <PermissionGate :allowed="canRetryMessages" :reason="retryDeniedTooltip">
+                <ActionButton :icon="faArrowRotateRight" @click="retrySelected()" :disabled="!isAnythingSelected() || !canRetryMessages">Retry {{ numberSelected() }} selected</ActionButton>
+              </PermissionGate>
+              <PermissionGate :allowed="canDeleteMessages" :reason="deleteDeniedTooltip">
+                <ActionButton :icon="faTrash" @click="showDelete = true" :disabled="!isAnythingSelected() || !canDeleteMessages">Delete {{ numberSelected() }} selected</ActionButton>
+              </PermissionGate>
               <ActionButton :icon="faDownload" @click="exportSelected()" :disabled="!isAnythingSelected()">Export {{ numberSelected() }} selected</ActionButton>
-              <ActionButton v-if="groupId" :icon="faArrowRotateRight" @click="showConfirmRetryAll = true">Retry all</ActionButton>
-              <ActionButton v-if="groupId" :icon="faTrash" @click="showConfirmDeleteAll = true">Delete all</ActionButton>
+              <PermissionGate :allowed="canRetryGroup" :reason="retryAllDeniedTooltip" v-if="groupId">
+                <ActionButton :icon="faArrowRotateRight" @click="showConfirmRetryAll = true" :disabled="!canRetryGroup">Retry all</ActionButton>
+              </PermissionGate>
+              <PermissionGate :allowed="canDeleteGroup" :reason="deleteAllDeniedTooltip" v-if="groupId">
+                <ActionButton :icon="faTrash" @click="showConfirmDeleteAll = true" :disabled="!canDeleteGroup">Delete all</ActionButton>
+              </PermissionGate>
             </div>
           </div>
           <div class="col-3">
diff --git a/src/Frontend/src/components/failedmessages/MessageGroupList.vue b/src/Frontend/src/components/failedmessages/MessageGroupList.vue
index 55ee9307d..977bbaf75 100644
--- a/src/Frontend/src/components/failedmessages/MessageGroupList.vue
+++ b/src/Frontend/src/components/failedmessages/MessageGroupList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useShowToast } from "../../composables/toast";
 import createMessageGroupClient from "./messageGroupClient";
@@ -15,6 +15,17 @@ import { faArrowRotateRight, faEnvelope, faEraser, faExclamationTriangle, faPenc
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import ProgressMessage from "./ProgressMessage.vue";
 import ActionButton from "@/components/ActionButton.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
+
+const { canCall } = useAllowedRoutes();
+// Group-level actions are gated on the recoverabilitygroups permissions. When the user
+// lacks them the buttons stay visible but disabled, with a tooltip explaining why.
+const canRetryGroups = computed(() => canCall(ApiRoutes.retryGroup));
+const canDeleteGroups = computed(() => canCall(ApiRoutes.deleteGroup));
+const retryDeniedTooltip = "You don't have permission to request a retry for message groups.";
+const deleteDeniedTooltip = "You don't have permission to delete message groups.";
 
 interface WorkflowState {
   status: string;
@@ -400,31 +411,33 @@ defineExpose<IMessageGroupList>({
                   </div>
                   <div class="row" v-if="!isBeingRetried(group) && !isBeingArchived(group.workflow_state.status)">
                     <div class="col-sm-12 no-side-padding">
-                      <ActionButton
-                        variant="link"
-                        size="sm"
-                        :icon="faArrowRotateRight"
-                        :disabled="group.count == 0 || isBeingRetried(group)"
-                        @mouseenter="group.hover3 = true"
-                        @mouseleave="group.hover3 = false"
-                        v-if="exceptionGroups.length > 0"
-                        @click.stop="retryGroup(group)"
-                      >
-                        <span>Request retry</span>
-                      </ActionButton>
-
-                      <ActionButton
-                        variant="link"
-                        size="sm"
-                        :icon="faTrash"
-                        :disabled="group.count == 0 || isBeingRetried(group)"
-                        @mouseenter="group.hover3 = true"
-                        @mouseleave="group.hover3 = false"
-                        v-if="exceptionGroups.length > 0"
-                        @click.stop="deleteGroup(group)"
-                      >
-                        <span>Delete group</span>
-                      </ActionButton>
+                      <PermissionGate :allowed="canRetryGroups" :reason="retryDeniedTooltip" v-if="exceptionGroups.length > 0">
+                        <ActionButton
+                          variant="link"
+                          size="sm"
+                          :icon="faArrowRotateRight"
+                          :disabled="group.count == 0 || isBeingRetried(group) || !canRetryGroups"
+                          @mouseenter="group.hover3 = true"
+                          @mouseleave="group.hover3 = false"
+                          @click.stop="retryGroup(group)"
+                        >
+                          <span>Request retry</span>
+                        </ActionButton>
+                      </PermissionGate>
+
+                      <PermissionGate :allowed="canDeleteGroups" :reason="deleteDeniedTooltip" v-if="exceptionGroups.length > 0">
+                        <ActionButton
+                          variant="link"
+                          size="sm"
+                          :icon="faTrash"
+                          :disabled="group.count == 0 || isBeingRetried(group) || !canDeleteGroups"
+                          @mouseenter="group.hover3 = true"
+                          @mouseleave="group.hover3 = false"
+                          @click.stop="deleteGroup(group)"
+                        >
+                          <span>Delete group</span>
+                        </ActionButton>
+                      </PermissionGate>
                       <ActionButton variant="link" size="sm" :icon="faStickyNote" v-if="!group.comment" @click.stop="editNote(group)">Add note</ActionButton>
                       <ActionButton variant="link" size="sm" :icon="faPencil" v-if="group.comment" @click.stop="editNote(group)">Edit note</ActionButton>
                       <ActionButton variant="link" size="sm" :icon="faEraser" v-if="group.comment" @click.stop="deleteNote(group)">Remove note</ActionButton>
diff --git a/src/Frontend/src/components/failedmessages/messageGroupButtonPermissions.spec.ts b/src/Frontend/src/components/failedmessages/messageGroupButtonPermissions.spec.ts
new file mode 100644
index 000000000..55f02bcfa
--- /dev/null
+++ b/src/Frontend/src/components/failedmessages/messageGroupButtonPermissions.spec.ts
@@ -0,0 +1,105 @@
+import { describe, test, expect, beforeEach, vi } from "vitest";
+import { render, screen } from "@testing-library/vue";
+import { createTestingPinia } from "@pinia/testing";
+import { defineComponent, h, nextTick, ref } from "vue";
+import { createRouter, createMemoryHistory } from "vue-router";
+import type GroupOperation from "@/resources/GroupOperation";
+import MessageGroupList, { type IMessageGroupList } from "@/components/failedmessages/MessageGroupList.vue";
+import type { ManifestEntry } from "@/stores/AllowedRoutesStore";
+import { ApiRoutes } from "@/composables/apiRoutes";
+import { normalizeRouteKey } from "@/composables/routeMatching";
+
+// The group-level Retry/Delete actions are gated on the recoverabilitygroups allowed routes.
+// Unlike the per-message buttons (which hide), these stay VISIBLE but DISABLED when the
+// route is missing, with a tooltip explaining why, so it's clear the action exists.
+const RETRY_ROUTE_KEY = normalizeRouteKey(ApiRoutes.retryGroup.method, ApiRoutes.retryGroup.path);
+const DELETE_ROUTE_KEY = normalizeRouteKey(ApiRoutes.deleteGroup.method, ApiRoutes.deleteGroup.path);
+
+const group: GroupOperation = {
+  id: "group-1",
+  title: "SomeException",
+  type: "exception-type",
+  count: 2,
+  comment: "",
+  operation_status: "None",
+  operation_progress: 0,
+  need_user_acknowledgement: false,
+};
+
+vi.mock("@/components/failedmessages/messageGroupClient", () => ({
+  default: () => ({
+    getExceptionGroups: vi.fn().mockResolvedValue([group]),
+    isError: () => false,
+  }),
+}));
+
+function makeRoutes(keys: string[]): Map<string, ManifestEntry> {
+  return new Map(keys.map((k) => [k, { method: "", url_template: "" }]));
+}
+
+async function renderGroupList(allowedRouteKeys: string[]) {
+  const listRef = ref<IMessageGroupList>();
+
+  const Harness = defineComponent({
+    setup() {
+      return () => h(MessageGroupList, { ref: listRef, sortFunction: () => 0 });
+    },
+  });
+
+  const router = createRouter({ history: createMemoryHistory(), routes: [{ path: "/:catchAll(.*)", component: { template: "<div />" } }] });
+
+  render(Harness, {
+    global: {
+      plugins: [
+        router,
+        createTestingPinia({
+          stubActions: true,
+          initialState: {
+            auth: { authEnabled: true, isAuthenticated: true },
+            AllowedRoutesStore: { routes: makeRoutes(allowedRouteKeys), loaded: true, loadAttempted: true },
+          },
+        }),
+      ],
+      directives: { tippy: () => {} },
+    },
+  });
+
+  await nextTick();
+  await listRef.value?.loadFailedMessageGroups();
+  await nextTick();
+}
+
+function button(text: RegExp): HTMLButtonElement | null {
+  return screen.queryByText(text)?.closest("button") ?? null;
+}
+
+describe("failed-message group action button permissions", () => {
+  beforeEach(() => {
+    // Teleport target used by the confirm dialogs the list renders.
+    document.body.innerHTML = '<div id="modalDisplay"></div>';
+  });
+
+  test("Request retry is enabled when its route is allowed", async () => {
+    await renderGroupList([RETRY_ROUTE_KEY, DELETE_ROUTE_KEY]);
+    expect(button(/Request retry/i)?.disabled).toBe(false);
+  });
+
+  test("Request retry stays visible but disabled when its route is not allowed", async () => {
+    await renderGroupList([DELETE_ROUTE_KEY]);
+    const retry = button(/Request retry/i);
+    expect(retry).not.toBeNull();
+    expect(retry?.disabled).toBe(true);
+  });
+
+  test("Delete group is enabled when its route is allowed", async () => {
+    await renderGroupList([RETRY_ROUTE_KEY, DELETE_ROUTE_KEY]);
+    expect(button(/Delete group/i)?.disabled).toBe(false);
+  });
+
+  test("Delete group stays visible but disabled when its route is not allowed", async () => {
+    await renderGroupList([RETRY_ROUTE_KEY]);
+    const del = button(/Delete group/i);
+    expect(del).not.toBeNull();
+    expect(del?.disabled).toBe(true);
+  });
+});
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 8fea77c1a..421b64af1 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -19,6 +19,7 @@ import FilterInput from "../FilterInput.vue";
 import ResultsCount from "../ResultsCount.vue";
 import { faBell, faBellSlash, faChevronLeft, faHeartbeat, faTrash } from "@fortawesome/free-solid-svg-icons";
 import FAIcon from "@/components/FAIcon.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
 import useHeartbeatInstancesStoreAutoRefresh from "@/composables/useHeartbeatInstancesStoreAutoRefresh";
 import { useEndpointSettingsStore } from "@/stores/EndpointSettingsStore";
 
@@ -29,9 +30,11 @@ enum Operation {
 
 const route = useRoute();
 const router = useRouter();
+
+const deleteDeniedTooltip = "You don't have permission to delete endpoints.";
 const endpointName = route.params.endpointName.toString();
 const { store } = useHeartbeatInstancesStoreAutoRefresh();
-const { filteredInstances, sortedInstances, instanceFilterString, sortByInstances } = storeToRefs(store);
+const { filteredInstances, sortedInstances, instanceFilterString, sortByInstances, canDeleteEndpointInstance } = storeToRefs(store);
 const endpointSettingsStore = useEndpointSettingsStore();
 const endpointSettings = ref<EndpointSettings[]>([endpointSettingsStore.defaultEndpointSettingsValue]);
 
@@ -170,7 +173,9 @@ async function toggleAlerts(instance: EndpointsView) {
       <no-data v-if="filteredValidInstances.length === 0" message="No endpoint instances found. For untracked endpoints, disconnected instances are automatically pruned.">
         <div class="delete-all">
           <span>You may</span>
-          <button type="button" @click="deleteAllInstances()" class="btn btn-danger btn-sm"><FAIcon :icon="faTrash" class="icon text-white" /> Delete</button>
+          <PermissionGate :allowed="canDeleteEndpointInstance" :reason="deleteDeniedTooltip">
+            <button type="button" @click="deleteAllInstances()" class="btn btn-danger btn-sm" :disabled="!canDeleteEndpointInstance"><FAIcon :icon="faTrash" class="icon text-white" /> Delete</button>
+          </PermissionGate>
           <span>this endpoint</span>
         </div>
       </no-data>
@@ -195,7 +200,9 @@ async function toggleAlerts(instance: EndpointsView) {
                 </div>
               </div>
               <div role="cell" aria-label="actions" class="col-1 actions">
-                <button v-if="instance.heartbeat_information?.reported_status !== EndpointStatus.Alive" type="button" @click="deleteInstance(instance)" class="btn btn-danger btn-sm"><FAIcon :icon="faTrash" class="icon text-white" /> Delete</button>
+                <PermissionGate v-if="instance.heartbeat_information?.reported_status !== EndpointStatus.Alive" :allowed="canDeleteEndpointInstance" :reason="deleteDeniedTooltip">
+                  <button type="button" @click="deleteInstance(instance)" class="btn btn-danger btn-sm" :disabled="!canDeleteEndpointInstance"><FAIcon :icon="faTrash" class="icon text-white" /> Delete</button>
+                </PermissionGate>
               </div>
             </div>
           </div>
diff --git a/src/Frontend/src/components/messages/DeleteMessageButton.vue b/src/Frontend/src/components/messages/DeleteMessageButton.vue
index 033d39ba1..1dc9830c1 100644
--- a/src/Frontend/src/components/messages/DeleteMessageButton.vue
+++ b/src/Frontend/src/components/messages/DeleteMessageButton.vue
@@ -11,12 +11,12 @@ import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 
 const store = useMessageStore();
-const { state } = storeToRefs(store);
+const { state, canDelete } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
 const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.resolved);
-const isVisible = computed(() => !failureStatus.value.archived && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
+const isVisible = computed(() => canDelete.value && !failureStatus.value.archived && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
diff --git a/src/Frontend/src/components/messages/EditAndRetryButton.vue b/src/Frontend/src/components/messages/EditAndRetryButton.vue
index 4976aedf4..54ac1c653 100644
--- a/src/Frontend/src/components/messages/EditAndRetryButton.vue
+++ b/src/Frontend/src/components/messages/EditAndRetryButton.vue
@@ -10,12 +10,18 @@ import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { faPencil } from "@fortawesome/free-solid-svg-icons";
+import PermissionGate from "@/components/PermissionGate.vue";
 
 const store = useMessageStore();
-const { state, edit_and_retry_config, editRetryResponse } = storeToRefs(store);
+const { state, edit_and_retry_config, editRetryResponse, canEdit } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 const isEditIgnoredDialogVisible = ref(false);
 
+// Edit & retry is enabled by a ServiceControl setting (edit_and_retry_config). When it is on,
+// the button is shown to everyone but disabled (with a tooltip) for users without the edit
+// permission, rather than hidden.
+const editDeniedTooltip = "You don't have permission to edit and retry messages.";
+
 const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
 const isVisible = computed(() => edit_and_retry_config.value.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
@@ -45,7 +51,9 @@ async function openDialog() {
 
 <template>
   <template v-if="isVisible">
-    <ActionButton :icon="faPencil" aria-label="Edit & retry" :disabled="isDisabled" @click="openDialog">Edit & retry</ActionButton>
+    <PermissionGate :allowed="canEdit" :reason="editDeniedTooltip">
+      <ActionButton :icon="faPencil" aria-label="Edit & retry" :disabled="isDisabled || !canEdit" @click="openDialog">Edit & retry</ActionButton>
+    </PermissionGate>
     <Teleport to="#modalDisplay">
       <EditRetryDialog v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog>
       <EditIgnoredDialog v-if="isEditIgnoredDialogVisible" @close="handleIgnoreClose"></EditIgnoredDialog>
diff --git a/src/Frontend/src/components/messages/RestoreMessageButton.vue b/src/Frontend/src/components/messages/RestoreMessageButton.vue
index 5390b3f82..407098b86 100644
--- a/src/Frontend/src/components/messages/RestoreMessageButton.vue
+++ b/src/Frontend/src/components/messages/RestoreMessageButton.vue
@@ -10,10 +10,10 @@ import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { faUndo } from "@fortawesome/free-solid-svg-icons";
 
 const store = useMessageStore();
-const { state } = storeToRefs(store);
+const { state, canRestore } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
-const isVisible = computed(() => state.value.data.failure_status.archived);
+const isVisible = computed(() => canRestore.value && state.value.data.failure_status.archived);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
diff --git a/src/Frontend/src/components/messages/RetryMessageButton.vue b/src/Frontend/src/components/messages/RetryMessageButton.vue
index b670a8908..534bf4515 100644
--- a/src/Frontend/src/components/messages/RetryMessageButton.vue
+++ b/src/Frontend/src/components/messages/RetryMessageButton.vue
@@ -11,12 +11,12 @@ import { FailedMessageStatus } from "@/resources/FailedMessage";
 import { faRefresh } from "@fortawesome/free-solid-svg-icons";
 
 const store = useMessageStore();
-const { state } = storeToRefs(store);
+const { state, canRetry } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
 const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
-const isVisible = computed(() => state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
+const isVisible = computed(() => canRetry.value && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
diff --git a/src/Frontend/src/components/messages/messageButtonPermissions.spec.ts b/src/Frontend/src/components/messages/messageButtonPermissions.spec.ts
new file mode 100644
index 000000000..26c3fa017
--- /dev/null
+++ b/src/Frontend/src/components/messages/messageButtonPermissions.spec.ts
@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/vue";
+import { describe, test, expect, beforeEach } from "vitest";
+import { createTestingPinia } from "@pinia/testing";
+import type { Component } from "vue";
+import { MessageStatus } from "@/resources/Message";
+import RetryMessageButton from "@/components/messages/RetryMessageButton.vue";
+import EditAndRetryButton from "@/components/messages/EditAndRetryButton.vue";
+import DeleteMessageButton from "@/components/messages/DeleteMessageButton.vue";
+import RestoreMessageButton from "@/components/messages/RestoreMessageButton.vue";
+import type { ManifestEntry } from "@/stores/AllowedRoutesStore";
+
+// Each failed-message action button is gated on its own ServiceControl route. These
+// tests pin the per-action gating: with auth enabled + the manifest loaded, the button
+// shows only when the matching route is in the allowed set.
+interface ButtonCase {
+  name: string;
+  component: Component;
+  routeKey: string; // normalized route key in AllowedRoutesStore
+  text: RegExp;
+  archived: boolean; // Restore is only relevant on an archived message; the others on a live one
+}
+
+// Retry / Delete / Restore are hidden when the route is not allowed. Edit & retry is handled
+// separately below: it is enabled by a setting and, when on, disabled (not hidden) without
+// the permission.
+const cases: ButtonCase[] = [
+  { name: "Retry", component: RetryMessageButton, routeKey: "POST /api/errors/retry", text: /Retry message/i, archived: false },
+  { name: "Delete", component: DeleteMessageButton, routeKey: "PATCH /api/errors/archive", text: /Delete message/i, archived: false },
+  { name: "Restore", component: RestoreMessageButton, routeKey: "PATCH /api/errors/unarchive", text: /Restore/i, archived: true },
+];
+
+function makeRoutes(keys: string[]): Map<string, ManifestEntry> {
+  return new Map(keys.map((k) => [k, { method: "", url_template: "" }]));
+}
+
+function renderButton(component: Component, allowedRouteKeys: string[], archived: boolean) {
+  render(component, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          stubActions: true,
+          initialState: {
+            auth: { authEnabled: true, isAuthenticated: true },
+            AllowedRoutesStore: { routes: makeRoutes(allowedRouteKeys), loaded: true, loadAttempted: true },
+            MessageStore: {
+              state: { data: { id: "msg-1", status: MessageStatus.Failed, failure_status: { archived } } },
+              edit_and_retry_config: { enabled: true, locked_headers: [], sensitive_headers: [] },
+            },
+          },
+        }),
+      ],
+      directives: { tippy: () => {} },
+    },
+  });
+}
+
+describe("failed-message action button permissions", () => {
+  beforeEach(() => {
+    // Teleport target used by the confirm dialogs the buttons render.
+    document.body.innerHTML = '<div id="modalDisplay"></div>';
+  });
+
+  test.each(cases)("$name is shown when its route is allowed", ({ component, routeKey, text, archived }) => {
+    renderButton(component, [routeKey], archived);
+    expect(screen.queryByText(text)).not.toBeNull();
+  });
+
+  test.each(cases)("$name is hidden when its route is not allowed", ({ component, text, archived }) => {
+    renderButton(component, [], archived);
+    expect(screen.queryByText(text)).toBeNull();
+  });
+
+  test("Edit & retry is shown and enabled when edit route is allowed", () => {
+    renderButton(EditAndRetryButton, ["POST /api/edit/{}"], false);
+    const button = screen.getByRole("button", { name: /Edit & retry/i }) as HTMLButtonElement;
+    expect(button.disabled).toBe(false);
+  });
+
+  test("Edit & retry is shown but disabled when edit route is not allowed", () => {
+    renderButton(EditAndRetryButton, [], false);
+    const button = screen.getByRole("button", { name: /Edit & retry/i }) as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+  });
+});
diff --git a/src/Frontend/src/components/monitoring/EndpointInstances.vue b/src/Frontend/src/components/monitoring/EndpointInstances.vue
index f78d09f91..611750e55 100644
--- a/src/Frontend/src/components/monitoring/EndpointInstances.vue
+++ b/src/Frontend/src/components/monitoring/EndpointInstances.vue
@@ -18,7 +18,7 @@ import logger from "@/logger";
 const isRemovingEndpointEnabled = ref<boolean>(false);
 const router = useRouter();
 const monitoringEndpointDetailsStore = useMonitoringEndpointDetailsStore();
-const { endpointDetails: endpoint, endpointName } = storeToRefs(monitoringEndpointDetailsStore);
+const { endpointDetails: endpoint, endpointName, canDeleteMonitoredEndpoint } = storeToRefs(monitoringEndpointDetailsStore);
 
 async function removeEndpoint(endpointName: string, instance: ExtendedEndpointInstance) {
   try {
@@ -147,7 +147,7 @@ onMounted(async () => {
 
                 <!--remove endpoint-->
                 <div class="col-xs-2 col-xl-1 no-side-padding">
-                  <a v-if="isRemovingEndpointEnabled && instance.isStale" class="remove-endpoint" @click="removeEndpoint(endpointName, instance)">
+                  <a v-if="isRemovingEndpointEnabled && instance.isStale && canDeleteMonitoredEndpoint" class="remove-endpoint" @click="removeEndpoint(endpointName, instance)">
                     <FAIcon :icon="faTrash" v-tippy="`Remove endpoint`" />
                   </a>
                 </div>
diff --git a/src/Frontend/src/stores/HealthChecksStore.ts b/src/Frontend/src/stores/HealthChecksStore.ts
index 9612b5632..6aff63c4c 100644
--- a/src/Frontend/src/stores/HealthChecksStore.ts
+++ b/src/Frontend/src/stores/HealthChecksStore.ts
@@ -1,11 +1,13 @@
 import type EmailSettings from "@/components/configuration/EmailSettings";
 import { acceptHMRUpdate, defineStore } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import serviceControlClient from "@/components/serviceControlClient";
 import type EmailNotifications from "@/resources/EmailNotifications";
 import type UpdateEmailNotificationsSettingsRequest from "@/resources/UpdateEmailNotificationsSettingsRequest";
 import { useEnvironmentAndVersionsStore } from "./EnvironmentAndVersionsStore";
 import logger from "@/logger";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 
 export const useHealthChecksStore = defineStore("HealthChecksStore", () => {
   const emailNotifications = ref<EmailSettings>({
@@ -22,6 +24,10 @@ export const useHealthChecksStore = defineStore("HealthChecksStore", () => {
   const environmentStore = useEnvironmentAndVersionsStore();
   const hasResponseStatusInHeaders = environmentStore.serviceControlIsGreaterThan("5.2");
 
+  const { canCall } = useAllowedRoutes();
+  const canManageNotifications = computed(() => canCall(ApiRoutes.manageNotifications));
+  const canTestNotifications = computed(() => canCall(ApiRoutes.testNotifications));
+
   async function refresh() {
     let result: EmailNotifications | null;
     try {
@@ -112,6 +118,8 @@ export const useHealthChecksStore = defineStore("HealthChecksStore", () => {
   return {
     refresh,
     emailNotifications,
+    canManageNotifications,
+    canTestNotifications,
     toggleEmailNotifications,
     saveEmailNotifications,
     testEmailNotifications,
diff --git a/src/Frontend/src/stores/HeartbeatInstancesStore.ts b/src/Frontend/src/stores/HeartbeatInstancesStore.ts
index 98d131bff..5e329e93a 100644
--- a/src/Frontend/src/stores/HeartbeatInstancesStore.ts
+++ b/src/Frontend/src/stores/HeartbeatInstancesStore.ts
@@ -7,6 +7,8 @@ import getSortFunction from "@/components/getSortFunction";
 import { useHeartbeatsStore } from "@/stores/HeartbeatsStore";
 import type { EndpointsView } from "@/resources/EndpointView";
 import serviceControlClient from "@/components/serviceControlClient";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 
 export enum ColumnNames {
   InstanceName = "name",
@@ -32,6 +34,9 @@ export const useHeartbeatInstancesStore = defineStore("HeartbeatInstancesStore",
   const sortedInstances = computed<EndpointsView[]>(() => endpointInstances.value.sort(getSortFunction(columnSortings.get(sortByInstances.value.property), sortByInstances.value.isAscending ? SortDirection.Ascending : SortDirection.Descending)));
   const filteredInstances = computed<EndpointsView[]>(() => sortedInstances.value.filter((instance) => !instanceFilterString.value || instance.host_display_name.toLowerCase().includes(instanceFilterString.value.toLowerCase())));
 
+  const { canCall } = useAllowedRoutes();
+  const canDeleteEndpointInstance = computed(() => canCall(ApiRoutes.deleteEndpointInstance));
+
   const refresh = () => store.refresh();
 
   watch(instanceFilterString, (newValue) => {
@@ -57,6 +62,7 @@ export const useHeartbeatInstancesStore = defineStore("HeartbeatInstancesStore",
     sortedInstances,
     filteredInstances,
     instanceFilterString,
+    canDeleteEndpointInstance,
     deleteEndpointInstance,
     toggleEndpointMonitor,
     sortByInstances,
diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts
index 424f388bc..fddf0f47e 100644
--- a/src/Frontend/src/stores/MessageStore.ts
+++ b/src/Frontend/src/stores/MessageStore.ts
@@ -7,6 +7,7 @@ import { type FailedMessage, type ExceptionDetails, FailedMessageStatus } from "
 import { useConfigurationStore } from "@/stores/ConfigurationStore";
 import { type default as Message, MessageStatus } from "@/resources/Message";
 import dayjs from "@/utils/dayjs";
+import { HttpError } from "@/utils/HttpError";
 import { parse, stringify } from "lossless-json";
 import xmlFormat from "xml-formatter";
 import type { DataContainer } from "./DataContainer";
@@ -16,6 +17,8 @@ import type EditRetryResponse from "@/resources/EditRetryResponse";
 import type { EditedMessage } from "@/resources/EditMessage";
 import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
 import { timeSpanToDuration } from "@/composables/formatter";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 
 interface Model {
   id?: string;
@@ -81,11 +84,23 @@ export const useMessageStore = defineStore("MessageStore", () => {
   const { configuration } = storeToRefs(configStore);
   const error_retention_period = computed(() => timeSpanToDuration(configuration.value?.data_retention?.error_retention_period).asHours());
 
+  const { canCall } = useAllowedRoutes();
+  const canRetry = computed(() => canCall(ApiRoutes.retryMessage, state.data));
+  const canEdit = computed(() => canCall(ApiRoutes.editMessage, state.data));
+  const canDelete = computed(() => canCall(ApiRoutes.deleteMessage, state.data));
+  const canRestore = computed(() => canCall(ApiRoutes.restoreMessage, state.data));
+
   async function loadEditAndRetryConfiguration() {
+    // edit/config is an edit-only endpoint (requires the edit permission). Skip it for users who
+    // cannot edit, leaving the default disabled config in place. A 403 (e.g. during the brief
+    // window before the route manifest loads) is the expected "not allowed" response, not an
+    // error, so it is swallowed silently rather than logged.
+    if (!canEdit.value) return;
     try {
       const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EditAndRetryConfig>("edit/config");
       edit_and_retry_config.value = data;
-    } catch {
+    } catch (error) {
+      if (error instanceof HttpError && error.status === 403) return;
       logger.warn("Failed to load Edit and Retry configuration");
     }
   }
@@ -367,6 +382,10 @@ export const useMessageStore = defineStore("MessageStore", () => {
     state,
     edit_and_retry_config,
     editRetryResponse,
+    canRetry,
+    canEdit,
+    canDelete,
+    canRestore,
     reset,
     loadMessage,
     loadFailedMessage,
diff --git a/src/Frontend/src/stores/MonitoringEndpointDetailsStore.ts b/src/Frontend/src/stores/MonitoringEndpointDetailsStore.ts
index cb7fb3457..2b6556221 100644
--- a/src/Frontend/src/stores/MonitoringEndpointDetailsStore.ts
+++ b/src/Frontend/src/stores/MonitoringEndpointDetailsStore.ts
@@ -1,5 +1,5 @@
 import { defineStore, acceptHMRUpdate } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import MessageTypes from "@/components/monitoring/messageTypes";
 import { formatGraphDuration } from "../components/monitoring/formatGraph";
 import { type ExtendedEndpointDetails, type ExtendedEndpointInstance, type MessageType, type EndpointDetails, type EndpointDetailsError, isError } from "@/resources/MonitoringEndpoint";
@@ -10,6 +10,8 @@ import { emptyEndpointDetails } from "@/components/monitoring/endpoints";
 import { useMemoize } from "@vueuse/core";
 import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
 import monitoringClient from "@/components/monitoring/monitoringClient";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 
 export const useMonitoringEndpointDetailsStore = defineStore("MonitoringEndpointDetailsStore", () => {
   const historyPeriodStore = useMonitoringHistoryPeriodStore();
@@ -43,6 +45,9 @@ export const useMonitoringEndpointDetailsStore = defineStore("MonitoringEndpoint
   const messageTypesUpdatedSet = ref<MessageType[]>([]);
   const negativeCriticalTimeIsPresent = ref<boolean>(false);
 
+  const { canCall } = useAllowedRoutes();
+  const canDeleteMonitoredEndpoint = computed(() => canCall(ApiRoutes.deleteMonitoredEndpoint));
+
   async function getEndpointDetails(name: string) {
     const { data, refresh } = getMemoisedEndpointDetails(name, historyPeriodStore.historyPeriod.pVal);
     if (!connectionStore.monitoringConnectionState.unableToConnect) await refresh();
@@ -115,6 +120,7 @@ export const useMonitoringEndpointDetailsStore = defineStore("MonitoringEndpoint
     messageTypesAvailable,
     messageTypesUpdatedSet,
     negativeCriticalTimeIsPresent,
+    canDeleteMonitoredEndpoint,
     updateMessageTypes,
     getEndpointDetails,
   };
diff --git a/src/Frontend/src/stores/RedirectsStore.ts b/src/Frontend/src/stores/RedirectsStore.ts
index 4c7d36499..1cc7dcc5f 100644
--- a/src/Frontend/src/stores/RedirectsStore.ts
+++ b/src/Frontend/src/stores/RedirectsStore.ts
@@ -1,10 +1,12 @@
 import type Redirect from "@/resources/Redirect";
 import type QueueAddress from "@/resources/QueueAddress";
 import { acceptHMRUpdate, defineStore } from "pinia";
-import { reactive } from "vue";
+import { computed, reactive } from "vue";
 import serviceControlClient from "@/components/serviceControlClient";
 import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
 import type { RetryRedirect } from "@/components/configuration/RetryRedirectEdit.vue";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 
 export interface Redirects {
   data: Redirect[];
@@ -22,6 +24,9 @@ export const useRedirectsStore = defineStore("RedirectsStore", () => {
   const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
   const hasResponseStatusInHeader = environmentStore.serviceControlIsGreaterThan("5.2.0");
 
+  const { canCall } = useAllowedRoutes();
+  const canManageRedirects = computed(() => canCall(ApiRoutes.manageRedirects));
+
   async function getKnownQueues() {
     const [, data] = await serviceControlClient.fetchTypedFromServiceControl<QueueAddress[]>("errors/queues/addresses");
     redirects.queues = data.map((x) => x.physical_address);
@@ -79,7 +84,7 @@ export const useRedirectsStore = defineStore("RedirectsStore", () => {
     };
   }
 
-  return { refresh, redirects, retryPendingMessagesForQueue, createRedirect, updateRedirect, deleteRedirect };
+  return { refresh, redirects, canManageRedirects, retryPendingMessagesForQueue, createRedirect, updateRedirect, deleteRedirect };
 });
 
 if (import.meta.hot) {
diff --git a/src/Frontend/src/stores/ThroughputStore.ts b/src/Frontend/src/stores/ThroughputStore.ts
index e90b48cc4..60e702a07 100644
--- a/src/Frontend/src/stores/ThroughputStore.ts
+++ b/src/Frontend/src/stores/ThroughputStore.ts
@@ -5,6 +5,7 @@ import createThroughputClient from "@/views/throughputreport/throughputClient";
 import { Transport } from "@/views/throughputreport/transport";
 import useIsThroughputSupported from "@/views/throughputreport/isThroughputSupported";
 import monitoringClient from "@/components/monitoring/monitoringClient";
+import logger from "@/logger";
 
 export const useThroughputStore = defineStore("ThroughputStore", () => {
   const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
@@ -13,8 +14,15 @@ export const useThroughputStore = defineStore("ThroughputStore", () => {
   const throughputClient = createThroughputClient();
 
   const refresh = async () => {
-    if (isThroughputSupported.value) {
+    if (!isThroughputSupported.value) {
+      return;
+    }
+    try {
       testResults.value = await throughputClient.test();
+    } catch (error) {
+      // This runs on a watch/auto-refresh, so a rejection here would be unhandled. Swallow
+      // and log (e.g. ServiceControl unreachable, or the token cleared during logout).
+      logger.error("Failed to run throughput connection test", error);
     }
   };
 

From 92475b18981d8967b508bf779889808162931a12 Mon Sep 17 00:00:00 2001
From: Dennis van der Stelt <dvdstelt@gmail.com>
Date: Fri, 26 Jun 2026 15:56:51 +0200
Subject: [PATCH 5/6] =?UTF-8?q?=E2=9C=A8=20Add=20the=20User=20Permissions?=
 =?UTF-8?q?=20page=20showing=20the=20user's=20capabilities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render a Configuration page that lists the capabilities derived from the current user's allowed routes, with the supporting route and router-link entries.

Co-Authored-By: Ramon Smits <ramon.smits@gmail.com>
Co-Authored-By: williambza <william.brander@gmail.com>
---
 .../configuration/UserPermissions.vue         | 188 ++++++++++++++++++
 src/Frontend/src/router/config.ts             |   5 +
 src/Frontend/src/router/routeLinks.ts         |   1 +
 3 files changed, 194 insertions(+)
 create mode 100644 src/Frontend/src/components/configuration/UserPermissions.vue

diff --git a/src/Frontend/src/components/configuration/UserPermissions.vue b/src/Frontend/src/components/configuration/UserPermissions.vue
new file mode 100644
index 000000000..ae81d3739
--- /dev/null
+++ b/src/Frontend/src/components/configuration/UserPermissions.vue
@@ -0,0 +1,188 @@
+<script lang="ts">
+import { ApiRoutes } from "@/composables/apiRoutes";
+
+// Static capability groupings: each area lists the API routes the user may or may not be able to call.
+// Permissions are derived at render time from canCall — no permission strings are involved.
+// Defined at module scope (outside setup) so it is shared across component instances.
+export const groups = [
+  {
+    area: "Failed messages",
+    caps: [
+      { label: "View", ref: ApiRoutes.viewFailedMessages },
+      { label: "Retry", ref: ApiRoutes.retryMessage },
+      { label: "Edit", ref: ApiRoutes.editMessage },
+      { label: "Delete", ref: ApiRoutes.deleteMessage },
+      { label: "Restore", ref: ApiRoutes.restoreMessage },
+    ],
+  },
+  {
+    area: "Recoverability groups",
+    caps: [
+      { label: "Retry group", ref: ApiRoutes.retryGroup },
+      { label: "Delete group", ref: ApiRoutes.deleteGroup },
+      { label: "Restore group", ref: ApiRoutes.restoreGroup },
+    ],
+  },
+  {
+    area: "Audit",
+    caps: [{ label: "View", ref: ApiRoutes.viewAuditMessages }],
+  },
+  {
+    area: "Monitoring",
+    caps: [
+      { label: "View", ref: ApiRoutes.viewMonitoredEndpoints },
+      { label: "Remove endpoint", ref: ApiRoutes.deleteMonitoredEndpoint },
+    ],
+  },
+  {
+    area: "Custom checks",
+    caps: [
+      { label: "View", ref: ApiRoutes.viewCustomChecks },
+      { label: "Dismiss", ref: ApiRoutes.dismissCustomCheck },
+    ],
+  },
+  {
+    area: "Event log",
+    caps: [{ label: "View", ref: ApiRoutes.viewEventLog }],
+  },
+  {
+    area: "Configuration — License",
+    caps: [{ label: "View", ref: ApiRoutes.viewLicense }],
+  },
+  {
+    area: "Configuration — Connections",
+    caps: [{ label: "View", ref: ApiRoutes.viewConnections }],
+  },
+  {
+    area: "Configuration — Notifications",
+    caps: [
+      { label: "View", ref: ApiRoutes.viewNotifications },
+      { label: "Manage", ref: ApiRoutes.manageNotifications },
+      { label: "Test", ref: ApiRoutes.testNotifications },
+    ],
+  },
+  {
+    area: "Configuration — Redirects",
+    caps: [
+      { label: "View", ref: ApiRoutes.viewRedirects },
+      { label: "Manage", ref: ApiRoutes.manageRedirects },
+    ],
+  },
+  {
+    area: "Configuration — Endpoints",
+    caps: [
+      { label: "View", ref: ApiRoutes.viewEndpoints },
+      { label: "View heartbeats", ref: ApiRoutes.viewHeartbeats },
+      { label: "Remove instance", ref: ApiRoutes.deleteEndpointInstance },
+    ],
+  },
+  {
+    area: "Configuration — Throughput",
+    caps: [
+      { label: "View", ref: ApiRoutes.viewThroughput },
+      { label: "Manage", ref: ApiRoutes.manageThroughput },
+    ],
+  },
+];
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import FAIcon from "@/components/FAIcon.vue";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+
+const { canCall } = useAllowedRoutes();
+
+const rows = computed(() =>
+  groups.map((g) => ({
+    area: g.area,
+    caps: g.caps.map((c) => ({ label: c.label, granted: canCall(c.ref) })),
+  }))
+);
+</script>
+
+<template>
+  <section name="user-permissions">
+    <div class="box">
+      <h3>Your permissions</h3>
+
+      <table class="permissions-table">
+        <thead>
+          <tr>
+            <th scope="col" class="area-col">Area</th>
+            <th scope="col" class="cap-col">Capability</th>
+            <th scope="col" class="status-col">Allowed</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="row in rows" :key="row.area">
+            <tr v-for="(cap, idx) in row.caps" :key="cap.label" class="cap-row">
+              <td v-if="idx === 0" :rowspan="row.caps.length" class="area-col area-cell">{{ row.area }}</td>
+              <td class="cap-col">{{ cap.label }}</td>
+              <td class="status-col">
+                <FAIcon v-if="cap.granted" :icon="faCheck" class="check" aria-label="Allowed" />
+                <FAIcon v-else :icon="faXmark" class="deny" aria-label="Not allowed" />
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.permissions-table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: auto;
+}
+
+.area-col {
+  width: 260px;
+}
+
+.cap-col {
+  width: 200px;
+}
+
+.status-col {
+  width: 90px;
+  text-align: center;
+}
+
+.permissions-table th,
+.permissions-table td {
+  padding: 8px 12px;
+  font-size: 14px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.permissions-table thead th {
+  font-weight: 600;
+  color: #6c757d;
+  border-bottom: 2px solid #e9ecef;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.permissions-table thead th.status-col {
+  text-align: center;
+}
+
+.area-cell {
+  font-weight: 600;
+  color: #2a2a2a;
+  vertical-align: top;
+  padding-top: 10px;
+}
+
+.check {
+  color: #28a745;
+}
+
+.deny {
+  color: #dc3545;
+}
+</style>
diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index 9e4f579db..10ed24d8e 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -206,6 +206,11 @@ const config: RouteItem[] = [
         path: routeLinks.configuration.endpointConnection.template,
         component: () => import("@/components/configuration/EndpointConnection.vue"),
       },
+      {
+        title: "User Permissions",
+        path: routeLinks.configuration.userPermissions.template,
+        component: () => import("@/components/configuration/UserPermissions.vue"),
+      },
       {
         title: "Usage Setup",
         path: routeLinks.throughput.setup.root,
diff --git a/src/Frontend/src/router/routeLinks.ts b/src/Frontend/src/router/routeLinks.ts
index 64ee77620..f2e957c9b 100644
--- a/src/Frontend/src/router/routeLinks.ts
+++ b/src/Frontend/src/router/routeLinks.ts
@@ -51,6 +51,7 @@ const configurationLinks = (root: string) => {
     retryRedirects: createLink("retry-redirects"),
     connections: createLink("connections"),
     endpointConnection: createLink("endpoint-connection"),
+    userPermissions: createLink("user-permissions"),
   };
 };
 

From 04eafa76048c294cc37d56e12f75e6884161e654 Mon Sep 17 00:00:00 2001
From: Dennis van der Stelt <dvdstelt@gmail.com>
Date: Fri, 26 Jun 2026 15:56:51 +0200
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=93=A6=20Update=20vite=20to=208.0.16?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Frontend/package-lock.json | 242 ++++++++++++++++-----------------
 src/Frontend/package.json      |   2 +-
 2 files changed, 118 insertions(+), 126 deletions(-)

diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
index 2fe418e69..a4987b58e 100644
--- a/src/Frontend/package-lock.json
+++ b/src/Frontend/package-lock.json
@@ -64,7 +64,7 @@
         "prettier": "3.8.3",
         "typescript": "6.0.3",
         "typescript-eslint": "8.60.0",
-        "vite": "8.0.14",
+        "vite": "8.0.16",
         "vite-plugin-checker": "0.14.1",
         "vite-plugin-vue-devtools": "8.1.2",
         "vitest": "4.1.7",
@@ -1016,24 +1016,22 @@
       "license": "MIT"
     },
     "node_modules/@emnapi/core": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
-      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.2.1",
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
-      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -1559,13 +1557,13 @@
       }
     },
     "node_modules/@napi-rs/wasm-runtime": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
-      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
+      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@tybys/wasm-util": "^0.10.1"
+        "@tybys/wasm-util": "^0.10.2"
       },
       "funding": {
         "type": "github",
@@ -1609,9 +1607,9 @@
       "license": "MIT"
     },
     "node_modules/@oxc-project/types": {
-      "version": "0.132.0",
-      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.132.0.tgz",
-      "integrity": "sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==",
+      "version": "0.133.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.133.0.tgz",
+      "integrity": "sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==",
       "devOptional": true,
       "license": "MIT",
       "funding": {
@@ -1662,9 +1660,9 @@
       }
     },
     "node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.2.tgz",
-      "integrity": "sha512-ZS4D1JPGn/MYQN/SYDWftIE/nVsM8j/AFOYEzAoOE2O3NktQOZru+/vYXGbR/qtdLdIfGCP0lcoJiYVzsEz+iQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
+      "integrity": "sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==",
       "cpu": [
         "arm64"
       ],
@@ -1678,9 +1676,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.2.tgz",
-      "integrity": "sha512-vdFA9+C/rekyGce7WqHs/xoT0ioZEWaOFyZLIV1mEeNFaFDUQrPIo8Vs2GvJ6eetb3rzDUtUBgzto3ExpXJB3w==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.3.tgz",
+      "integrity": "sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==",
       "cpu": [
         "arm64"
       ],
@@ -1694,9 +1692,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.2.tgz",
-      "integrity": "sha512-BewSOwTHazv77DTYiAZXSqqKZ4KP/KonFisDMVU7PImxoWfB2aepnPhd2E4SWz3zDzYgDNbs6jBmTdgNnF02GA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.3.tgz",
+      "integrity": "sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg==",
       "cpu": [
         "x64"
       ],
@@ -1710,9 +1708,9 @@
       }
     },
     "node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.2.tgz",
-      "integrity": "sha512-m41o7M0YWtUdqk61Tb+jnKb2rN++iRdIASlExkUoKfIAH30DOHCB8fVLzSUpbWHHU8esmEioY62PxzexE8MBuA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.3.tgz",
+      "integrity": "sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==",
       "cpu": [
         "x64"
       ],
@@ -1726,9 +1724,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.2.tgz",
-      "integrity": "sha512-jcojB9H7W/jS29pMKWAK1N+fU99vXodHDTatS3b3y/XSOCiHo0kkA74pL3jJmkoQtYpOCxDvaKs1fo2Ij/1X5w==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.3.tgz",
+      "integrity": "sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==",
       "cpu": [
         "arm"
       ],
@@ -1742,12 +1740,15 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.2.tgz",
-      "integrity": "sha512-1jn6qDU5iiOgFgygDzKUuKP0maTi0/f1+sBLgvij/76C77Nm3ts6ufz9Bjg5q5dduxiUIxtq86JIoBvo1xQ4Ig==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.3.tgz",
+      "integrity": "sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1758,12 +1759,15 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.2.tgz",
-      "integrity": "sha512-QVLO/czFMdoMFSqlX3bcswcJNm/23r+qoa/jgtmFc/qEp6/jXmIkDjF/XIo8dPfGaiwy1xfQn8o77L79GeXFgw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.3.tgz",
+      "integrity": "sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1774,12 +1778,15 @@
       }
     },
     "node_modules/@rolldown/binding-linux-ppc64-gnu": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.2.tgz",
-      "integrity": "sha512-hgO5Abm0w5UL6FEa2iFnZqo2KlK7TQ5QhV5x09hujBf7t5KzHQ1VmfPuTpqRy/rNlSxua3eWH374xxiVrP+lcA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.3.tgz",
+      "integrity": "sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==",
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1790,12 +1797,15 @@
       }
     },
     "node_modules/@rolldown/binding-linux-s390x-gnu": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.2.tgz",
-      "integrity": "sha512-fy8rXxuYEu602abC8MUNaPjYLIFzReOaEIEMKMUa0rFEUxNpVXhs15KSSQ4qlqSaM7B6rcj9rDZgADh/IGDzLQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.3.tgz",
+      "integrity": "sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==",
       "cpu": [
         "s390x"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1806,12 +1816,15 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.2.tgz",
-      "integrity": "sha512-0+bOkiQ779+r1WpoHOWHqncvyySci0vKph+myNDYb+im6meJAzHQXay6oEgnkHuUGouM1LKTZwqKpBow6Kj7CQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.3.tgz",
+      "integrity": "sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1822,12 +1835,15 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.2.tgz",
-      "integrity": "sha512-mjSkrzZK5Qsl0a9d1JgILOiuZOSDTVdKENcSXBoqbzSrspLR/4/IRVDo5wd2GgZjNss/viBFJdeq+j7qH2nypw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.3.tgz",
+      "integrity": "sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1838,9 +1854,9 @@
       }
     },
     "node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.2.tgz",
-      "integrity": "sha512-1v5vHasdfQAZoEHakBV72LIFAC9JjnymsiKxp+GEr/ma3+NJCPSaYK+qavInOovJkgwFrs7GccX2d6IgDA3Z5w==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.3.tgz",
+      "integrity": "sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==",
       "cpu": [
         "arm64"
       ],
@@ -1854,9 +1870,9 @@
       }
     },
     "node_modules/@rolldown/binding-wasm32-wasi": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.2.tgz",
-      "integrity": "sha512-mb1VobWn6NheziTk5/WEaR6AKVbrwT5sOi6C7zk3gy/pD1qtJfU1j4PgTo2NJnOtbL9Dl3Aeei8w9jJ7qC2jZQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.3.tgz",
+      "integrity": "sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==",
       "cpu": [
         "wasm32"
       ],
@@ -1871,31 +1887,10 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
-    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.2.tgz",
-      "integrity": "sha512-SqKonF56vA/L2yHwHYcEp2P34URpOZ7d1fS635cTkpDnUtEGdUbhI6NzsPdqeSWvAAeGDrxjWjNmibDIdFf9/A==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.3.tgz",
+      "integrity": "sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==",
       "cpu": [
         "arm64"
       ],
@@ -1909,9 +1904,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.2.tgz",
-      "integrity": "sha512-v7qRI7gXLRINcOGXt+7YmAZ6iFuyZVMIoXAxhd8oP+DR9dLfL9GfNIx7PLMxmhZdvq8waUJBQiWN9EKNy+TRBQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.3.tgz",
+      "integrity": "sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==",
       "cpu": [
         "x64"
       ],
@@ -2074,9 +2069,9 @@
       "license": "MIT"
     },
     "node_modules/@tybys/wasm-util": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
-      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -3348,9 +3343,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5488,14 +5483,11 @@
       }
     },
     "node_modules/js-cookie": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
       "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      }
+      "license": "MIT"
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -6846,13 +6838,13 @@
       "license": "MIT"
     },
     "node_modules/rolldown": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.2.tgz",
-      "integrity": "sha512-oZx5zVDtVB44AW3eaifgDml1gWRDZGvjcfdxonE4swNPG98PrrXjaO/KrnUjzlMnztCCRVlUueA1kCXhARGk6g==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
+      "integrity": "sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@oxc-project/types": "=0.132.0",
+        "@oxc-project/types": "=0.133.0",
         "@rolldown/pluginutils": "^1.0.0"
       },
       "bin": {
@@ -6862,21 +6854,21 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "optionalDependencies": {
-        "@rolldown/binding-android-arm64": "1.0.2",
-        "@rolldown/binding-darwin-arm64": "1.0.2",
-        "@rolldown/binding-darwin-x64": "1.0.2",
-        "@rolldown/binding-freebsd-x64": "1.0.2",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.0.2",
-        "@rolldown/binding-linux-arm64-gnu": "1.0.2",
-        "@rolldown/binding-linux-arm64-musl": "1.0.2",
-        "@rolldown/binding-linux-ppc64-gnu": "1.0.2",
-        "@rolldown/binding-linux-s390x-gnu": "1.0.2",
-        "@rolldown/binding-linux-x64-gnu": "1.0.2",
-        "@rolldown/binding-linux-x64-musl": "1.0.2",
-        "@rolldown/binding-openharmony-arm64": "1.0.2",
-        "@rolldown/binding-wasm32-wasi": "1.0.2",
-        "@rolldown/binding-win32-arm64-msvc": "1.0.2",
-        "@rolldown/binding-win32-x64-msvc": "1.0.2"
+        "@rolldown/binding-android-arm64": "1.0.3",
+        "@rolldown/binding-darwin-arm64": "1.0.3",
+        "@rolldown/binding-darwin-x64": "1.0.3",
+        "@rolldown/binding-freebsd-x64": "1.0.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.3",
+        "@rolldown/binding-linux-arm64-musl": "1.0.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.3",
+        "@rolldown/binding-linux-x64-gnu": "1.0.3",
+        "@rolldown/binding-linux-x64-musl": "1.0.3",
+        "@rolldown/binding-openharmony-arm64": "1.0.3",
+        "@rolldown/binding-wasm32-wasi": "1.0.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.3",
+        "@rolldown/binding-win32-x64-msvc": "1.0.3"
       }
     },
     "node_modules/run-applescript": {
@@ -7285,9 +7277,9 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.16",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
-      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -7468,9 +7460,9 @@
       "license": "MIT"
     },
     "node_modules/undici": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.25.0.tgz",
-      "integrity": "sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.28.0.tgz",
+      "integrity": "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -7586,17 +7578,17 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "8.0.14",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.14.tgz",
-      "integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
+      "version": "8.0.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
+      "integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
         "postcss": "^8.5.15",
-        "rolldown": "1.0.2",
-        "tinyglobby": "^0.2.16"
+        "rolldown": "1.0.3",
+        "tinyglobby": "^0.2.17"
       },
       "bin": {
         "vite": "bin/vite.js"
diff --git a/src/Frontend/package.json b/src/Frontend/package.json
index 81bdfa7fd..94d3cf9dc 100644
--- a/src/Frontend/package.json
+++ b/src/Frontend/package.json
@@ -76,7 +76,7 @@
     "prettier": "3.8.3",
     "typescript": "6.0.3",
     "typescript-eslint": "8.60.0",
-    "vite": "8.0.14",
+    "vite": "8.0.16",
     "vite-plugin-checker": "0.14.1",
     "vite-plugin-vue-devtools": "8.1.2",
     "vitest": "4.1.7",