From f95ca403eb879a1a03498e4f654e5d865d019d34 Mon Sep 17 00:00:00 2001
From: Tim Jacomb <timjacomb1@gmail.com>
Date: Wed, 22 Jul 2026 21:54:03 +0100
Subject: [PATCH 1/5] Redesign manage roles page

---
 docs/DEVELOPER.md                             |  21 +-
 package-lock.json                             |  15 +
 package.json                                  |   1 +
 src/main/frontend/common/api/client.ts        |  13 +
 src/main/frontend/common/api/strategy.ts      |  50 +-
 src/main/frontend/common/api/validation.ts    |  39 ++
 .../common/components/AppBarButton.tsx        |  19 +-
 .../common/components/PermissionGroups.tsx    |   2 +-
 src/main/frontend/common/components/Tabs.tsx  |  63 +++
 .../frontend/common/styles/role-strategy.css  | 108 ++++
 src/main/frontend/common/types/bootstrap.ts   |  17 +
 src/main/frontend/common/types/role.ts        |  11 +
 .../common/utils/permissionSummary.ts         |  36 ++
 .../manage-roles/ManageRolesPage.spec.tsx     | 236 +++++++++
 .../frontend/manage-roles/ManageRolesPage.tsx | 416 ++++++++++++++++
 .../frontend/manage-roles/MatchingDialog.tsx  |  87 ++++
 .../frontend/manage-roles/RoleDialog.spec.tsx | 189 +++++++
 src/main/frontend/manage-roles/RoleDialog.tsx | 266 ++++++++++
 src/main/frontend/manage-roles/index.tsx      |  27 +
 .../PermissionTemplatesPage.tsx               |  28 +-
 src/main/frontend/setupTests.ts               |   8 +
 .../RoleBasedAuthorizationStrategy.java       |  45 +-
 .../rolestrategy/RoleStrategyConfig.java      |  81 ++-
 .../manage-agent-roles.jelly                  |  71 ---
 .../manage-global-roles.jelly                 |  69 ---
 .../manage-global-roles_fr.properties         |  25 -
 .../manage-project-roles.jelly                | 105 ----
 .../manage-project-roles_fr.properties        |  26 -
 .../RoleStrategyConfig/manage-roles.jelly     | 256 ++--------
 .../manage-roles.properties                   |   2 +
 .../manage-roles_fr.properties                |  26 -
 src/main/webapp/js/tableManage.js             | 462 ------------------
 .../hudson/plugins/rolestrategy/ApiTest.java  |  38 ++
 .../FormSubmissionPermissionsTest.java        |  22 +-
 .../rolestrategy/PatternMatchingApiTest.java  |  23 +-
 .../playwright/ManageRolesUITest.java         | 158 ++++++
 .../playwright/helpers/UITestHelper.java      |  21 +
 .../playwright/pages/ManageRolesPage.java     | 159 ++++++
 vite.config.ts                                |   1 +
 39 files changed, 2127 insertions(+), 1115 deletions(-)
 create mode 100644 src/main/frontend/common/api/validation.ts
 create mode 100644 src/main/frontend/common/components/Tabs.tsx
 create mode 100644 src/main/frontend/common/types/role.ts
 create mode 100644 src/main/frontend/common/utils/permissionSummary.ts
 create mode 100644 src/main/frontend/manage-roles/ManageRolesPage.spec.tsx
 create mode 100644 src/main/frontend/manage-roles/ManageRolesPage.tsx
 create mode 100644 src/main/frontend/manage-roles/MatchingDialog.tsx
 create mode 100644 src/main/frontend/manage-roles/RoleDialog.spec.tsx
 create mode 100644 src/main/frontend/manage-roles/RoleDialog.tsx
 create mode 100644 src/main/frontend/manage-roles/index.tsx
 delete mode 100644 src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-agent-roles.jelly
 delete mode 100644 src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles.jelly
 delete mode 100644 src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles_fr.properties
 delete mode 100644 src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles.jelly
 delete mode 100644 src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles_fr.properties
 create mode 100644 src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.properties
 delete mode 100644 src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles_fr.properties
 delete mode 100644 src/main/webapp/js/tableManage.js
 create mode 100644 src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/ManageRolesUITest.java
 create mode 100644 src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/pages/ManageRolesPage.java

diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md
index 9a0d8484..a1933f17 100644
--- a/docs/DEVELOPER.md
+++ b/docs/DEVELOPER.md
@@ -7,22 +7,11 @@ This page contains links to the information for plugin developers.
 
 See the [Developer Documentation](https://www.jenkins.io/doc/developer/).
 
-### Manual Testing of the UI
-There are no tests available for the UI part. Mainly the javascript code and the interaction between html elements in the jelly files needs manual testing.
-After starting Jenkins locally via `mvn hpi:run` go to the `Manage and Assigne Roles` page. 
-Verify that following things work on `Manage Roles`:
-1. Adding a global, item and agent role
-2. Deleting a role by pressing on the red x deletes the role
-3. Clicking on the pencil next to a pattern enables edit mode of the pattern (validate for both items and agents)
-4. Pressing return key when in the input field of the pattern terminates edit mode and pattern has the new value
-5. Pressing escape when in the input field of the pattern terminates edit mode and pattern has the old value
-6. Clicking on the pencil next to the pattern disables edit mode of the pattern when it is enabled and pattern has new value
-7. Clicking on the pattern opens a dialog box showing the matching items or agents
-8. Hovering over the checkboxes properly highlights the row and column and shows a tooltip
-9. Tooltips are properly formatted
-10. Entering html as rolename is printed as plain text in the field and in the tooltips.
-11. After changing the pattern, tooltips are properly updated
-12. After pressing Save/Apply and page reload new data is there
+### Testing the UI
+The React pages (`Manage Roles`, `Permission Templates`) are covered by Vitest component
+tests (`npm run test`) and Playwright end-to-end tests (`ManageRolesUITest`,
+`PermissionTemplatesUITest`). The remaining jelly/vanilla-JS pages need manual testing.
+After starting Jenkins locally via `mvn hpi:run` go to the `Manage and Assigne Roles` page.
 
 Verify that following things work on `Assign Roles`:
 1. Adding a new user to global, item and agent role
diff --git a/package-lock.json b/package-lock.json
index 078a7684..a0e81a21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@biomejs/biome": "^2.5.4",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/node": "^24.0.0",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.3",
@@ -887,6 +888,20 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tippyjs/react": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
diff --git a/package.json b/package.json
index 3bcc43aa..cb7dae97 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@biomejs/biome": "^2.5.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.0.0",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.3",
diff --git a/src/main/frontend/common/api/client.ts b/src/main/frontend/common/api/client.ts
index 87040fa6..730240f6 100644
--- a/src/main/frontend/common/api/client.ts
+++ b/src/main/frontend/common/api/client.ts
@@ -23,6 +23,19 @@ async function ensureOk(response: Response): Promise<Response> {
   return response;
 }
 
+export async function getJson<T>(url: string, params: Params): Promise<T> {
+  const query = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value === undefined || value === null) continue;
+    query.append(key, String(value));
+  }
+  const response = await fetch(`${url}?${query}`, {
+    headers: { Accept: "application/json" },
+  });
+  await ensureOk(response);
+  return (await response.json()) as T;
+}
+
 export async function postForm(url: string, params: Params): Promise<void> {
   const body = new URLSearchParams();
   for (const [key, value] of Object.entries(params)) {
diff --git a/src/main/frontend/common/api/strategy.ts b/src/main/frontend/common/api/strategy.ts
index 33f6282e..15edb027 100644
--- a/src/main/frontend/common/api/strategy.ts
+++ b/src/main/frontend/common/api/strategy.ts
@@ -1,4 +1,15 @@
-import { postForm } from "./client.ts";
+import type { RoleTypeKey } from "../types/role.ts";
+import { getJson, postForm } from "./client.ts";
+
+export interface MatchingJobs {
+  matchingJobs: string[];
+  itemCount: number;
+}
+
+export interface MatchingAgents {
+  matchingAgents: string[];
+  agentCount: number;
+}
 
 /**
  * Client for the role-strategy REST endpoints exposed on
@@ -18,6 +29,25 @@ export interface StrategyClient {
     overwrite: boolean,
   ): Promise<void>;
   removeTemplates(templateNames: string[]): Promise<void>;
+  /**
+   * Create or update a role. Pass {@code overwrite: true} when editing an
+   * existing role; its assignments are kept. A bound {@code template} takes
+   * precedence over {@code permissionIds} (item roles only).
+   */
+  addRole(
+    type: RoleTypeKey,
+    roleName: string,
+    permissionIds: string[],
+    overwrite: boolean,
+    pattern?: string,
+    template?: string,
+  ): Promise<void>;
+  removeRoles(type: RoleTypeKey, roleNames: string[]): Promise<void>;
+  getMatchingJobs(pattern: string, maxJobs: number): Promise<MatchingJobs>;
+  getMatchingAgents(
+    pattern: string,
+    maxAgents: number,
+  ): Promise<MatchingAgents>;
 }
 
 export function createStrategyClient(baseUrl: string): StrategyClient {
@@ -34,5 +64,23 @@ export function createStrategyClient(baseUrl: string): StrategyClient {
       postForm(url("removeTemplates"), {
         names: templateNames.join(","),
       }),
+    addRole: (type, roleName, permissionIds, overwrite, pattern, template) =>
+      postForm(url("addRole"), {
+        type,
+        roleName,
+        permissionIds: permissionIds.join(","),
+        overwrite: String(overwrite),
+        pattern,
+        template,
+      }),
+    removeRoles: (type, roleNames) =>
+      postForm(url("removeRoles"), {
+        type,
+        roleNames: roleNames.join(","),
+      }),
+    getMatchingJobs: (pattern, maxJobs) =>
+      getJson(url("getMatchingJobs"), { pattern, maxJobs }),
+    getMatchingAgents: (pattern, maxAgents) =>
+      getJson(url("getMatchingAgents"), { pattern, maxAgents }),
   };
 }
diff --git a/src/main/frontend/common/api/validation.ts b/src/main/frontend/common/api/validation.ts
new file mode 100644
index 00000000..f9495a8d
--- /dev/null
+++ b/src/main/frontend/common/api/validation.ts
@@ -0,0 +1,39 @@
+import { ApiError } from "./client.ts";
+
+export interface PatternValidation {
+  ok: boolean;
+  message?: string;
+}
+
+/**
+ * Validate a role pattern against the descriptor's {@code checkPattern}
+ * endpoint, which responds with a Jenkins FormValidation HTML fragment.
+ */
+export async function checkPattern(
+  checkPatternUrl: string,
+  value: string,
+): Promise<PatternValidation> {
+  const body = new URLSearchParams({ value });
+  const headers = crumb.wrap({
+    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+  });
+  const response = await fetch(checkPatternUrl, {
+    method: "POST",
+    headers,
+    body,
+  });
+  if (!response.ok) {
+    throw new ApiError(
+      `${response.status} ${response.statusText}`,
+      response.status,
+      await response.text(),
+    );
+  }
+  const html = await response.text();
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const error = doc.querySelector(".error");
+  if (error) {
+    return { ok: false, message: error.textContent?.trim() || undefined };
+  }
+  return { ok: true };
+}
diff --git a/src/main/frontend/common/components/AppBarButton.tsx b/src/main/frontend/common/components/AppBarButton.tsx
index c0ecce5a..56609c9f 100644
--- a/src/main/frontend/common/components/AppBarButton.tsx
+++ b/src/main/frontend/common/components/AppBarButton.tsx
@@ -3,8 +3,16 @@ import { useEffect } from "react";
 /**
  * Attach a click handler to a Jelly-rendered app-bar button identified by `id`.
  * The button lives outside the React mount node but in the same document.
+ * `options.visible` toggles the button, e.g. when only some tabs of a page are
+ * editable; Jelly still gates whether the button is rendered at all.
  */
-export function useAppBarButton(id: string, handler: () => void) {
+export function useAppBarButton(
+  id: string,
+  handler: () => void,
+  options?: { visible?: boolean },
+) {
+  const visible = options?.visible ?? true;
+
   useEffect(() => {
     const node = document.getElementById(id);
     if (!node) return;
@@ -15,4 +23,13 @@ export function useAppBarButton(id: string, handler: () => void) {
     node.addEventListener("click", onClick);
     return () => node.removeEventListener("click", onClick);
   }, [id, handler]);
+
+  useEffect(() => {
+    const node = document.getElementById(id);
+    if (!node) return;
+    node.hidden = !visible;
+    return () => {
+      node.hidden = false;
+    };
+  }, [id, visible]);
 }
diff --git a/src/main/frontend/common/components/PermissionGroups.tsx b/src/main/frontend/common/components/PermissionGroups.tsx
index 2e41ba0c..84fadb67 100644
--- a/src/main/frontend/common/components/PermissionGroups.tsx
+++ b/src/main/frontend/common/components/PermissionGroups.tsx
@@ -51,7 +51,7 @@ export function PermissionGroups({
               return (
                 <label
                   key={p.id}
-                  className="rsp-perm__item"
+                  className={`rsp-perm__item${isImplied ? " rsp-perm__item--implied" : ""}`}
                   data-permission-id={p.id}
                 >
                   <input
diff --git a/src/main/frontend/common/components/Tabs.tsx b/src/main/frontend/common/components/Tabs.tsx
new file mode 100644
index 00000000..cd7524ab
--- /dev/null
+++ b/src/main/frontend/common/components/Tabs.tsx
@@ -0,0 +1,63 @@
+import { type KeyboardEvent, useRef } from "react";
+
+export interface TabDef {
+  key: string;
+  label: string;
+}
+
+interface TabsProps {
+  tabs: TabDef[];
+  activeKey: string;
+  onSelect: (key: string) => void;
+  /** id of the tabpanel element every tab controls. */
+  panelId: string;
+}
+
+/**
+ * ARIA tablist with roving focus and arrow-key navigation. Jenkins core has no
+ * reusable tab markup outside jelly, so this brings its own `rsp-tabs` styling.
+ */
+export function Tabs({ tabs, activeKey, onSelect, panelId }: TabsProps) {
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    e.preventDefault();
+    const index = tabs.findIndex((t) => t.key === activeKey);
+    const delta = e.key === "ArrowRight" ? 1 : -1;
+    const next = tabs[(index + delta + tabs.length) % tabs.length];
+    onSelect(next.key);
+    listRef.current
+      ?.querySelector<HTMLElement>(`[data-tab-key="${next.key}"]`)
+      ?.focus();
+  };
+
+  return (
+    <div
+      ref={listRef}
+      className="rsp-tabs"
+      role="tablist"
+      onKeyDown={onKeyDown}
+    >
+      {tabs.map((tab) => {
+        const active = tab.key === activeKey;
+        return (
+          <button
+            key={tab.key}
+            type="button"
+            role="tab"
+            id={`rsp-tab-${tab.key}`}
+            data-tab-key={tab.key}
+            aria-selected={active}
+            aria-controls={panelId}
+            tabIndex={active ? 0 : -1}
+            className={`rsp-tabs__tab${active ? " rsp-tabs__tab--active" : ""}`}
+            onClick={() => onSelect(tab.key)}
+          >
+            {tab.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/main/frontend/common/styles/role-strategy.css b/src/main/frontend/common/styles/role-strategy.css
index be617ae4..e03d361e 100644
--- a/src/main/frontend/common/styles/role-strategy.css
+++ b/src/main/frontend/common/styles/role-strategy.css
@@ -411,6 +411,21 @@ dialog .tippy-box {
   color: inherit;
 }
 
+/* Implied grants are context, not the role's own selections; render them as
+   muted pills so the directly granted permissions stand out. */
+.rsp-perm__item--implied:has(input:checked) {
+  background: var(--item-background--hover);
+  color: var(--text-color-secondary);
+}
+
+.rsp-perm__item--implied:has(input:checked):hover {
+  filter: none;
+}
+
+.rsp-perm__item--implied:has(input:checked) .rsp-perm__item-name {
+  color: var(--text-color-secondary);
+}
+
 /* ============================================
    Dismissible error alert
    ============================================ */
@@ -525,3 +540,96 @@ dialog .tippy-box {
   color: var(--text-color-secondary);
   font-style: italic;
 }
+
+/* ============================================
+   Tabs (Manage Roles)
+   ============================================ */
+
+.rsp-tabs {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  width: fit-content;
+  border-radius: 0.75rem;
+  background: var(--card-background);
+  border: var(--jenkins-border--subtle);
+}
+
+.rsp-tabs__tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-bold-weight);
+  color: var(--text-color-secondary);
+  padding: 0.375rem 0.875rem;
+  border-radius: 0.5rem;
+  transition: var(--standard-transition);
+}
+
+.rsp-tabs__tab:hover {
+  background: var(--item-background--hover);
+  color: var(--text-color);
+}
+
+.rsp-tabs__tab:active {
+  background: var(--item-background--active);
+}
+
+.rsp-tabs__tab--active,
+.rsp-tabs__tab--active:hover {
+  background: var(--accent-color);
+  /* Same pairing as the primary button: stays readable in the dark theme,
+     where --background flips dark but this variable stays light. */
+  color: var(--button-color--primary, var(--background));
+}
+
+.rsp-tabs__tab:focus-visible {
+  outline: 2px solid var(--focus-input-border);
+  outline-offset: 1px;
+}
+
+/* ============================================
+   Role pattern chip
+   ============================================ */
+
+.rsp-card__pattern {
+  font-family: var(--font-family-mono);
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  background: var(--item-background--hover);
+  color: var(--text-color-secondary);
+  white-space: nowrap;
+  flex-shrink: 1;
+  min-width: 2rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 16rem;
+}
+
+.rsp-card__pattern--button {
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  transition: var(--standard-transition);
+}
+
+.rsp-card__pattern--button:hover {
+  background: var(--item-background--active);
+  color: var(--text-color);
+}
+
+/* ============================================
+   Matching items/agents dialog
+   ============================================ */
+
+.rsp-matching-list {
+  margin: 0;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  word-break: break-all;
+}
diff --git a/src/main/frontend/common/types/bootstrap.ts b/src/main/frontend/common/types/bootstrap.ts
index d485abcc..3b6384c6 100644
--- a/src/main/frontend/common/types/bootstrap.ts
+++ b/src/main/frontend/common/types/bootstrap.ts
@@ -1,4 +1,5 @@
 import type { PermissionGroup } from "./permission.ts";
+import type { Role } from "./role.ts";
 import type { PermissionTemplate } from "./template.ts";
 
 export interface TemplatesBootstrap {
@@ -6,3 +7,19 @@ export interface TemplatesBootstrap {
   permissionGroups: PermissionGroup[];
   canEdit: boolean;
 }
+
+export interface RoleTypeBootstrap {
+  /** Whether the current user may see this role type at all. */
+  visible: boolean;
+  canEdit: boolean;
+  permissionGroups: PermissionGroup[];
+  roles: Role[];
+}
+
+export interface ManageRolesBootstrap {
+  globalRoles: RoleTypeBootstrap;
+  projectRoles: RoleTypeBootstrap;
+  slaveRoles: RoleTypeBootstrap;
+  /** All permission templates, for the item-role dialog's template selector. */
+  templates: PermissionTemplate[];
+}
diff --git a/src/main/frontend/common/types/role.ts b/src/main/frontend/common/types/role.ts
new file mode 100644
index 00000000..86e9b310
--- /dev/null
+++ b/src/main/frontend/common/types/role.ts
@@ -0,0 +1,11 @@
+/** Wire names of the three role types, as used by the REST endpoints. */
+export type RoleTypeKey = "globalRoles" | "projectRoles" | "slaveRoles";
+
+export interface Role {
+  name: string;
+  /** Item/agent roles only. */
+  pattern?: string;
+  /** Item roles only; set when the role takes its permissions from a template. */
+  templateName?: string;
+  permissionIds: string[];
+}
diff --git a/src/main/frontend/common/utils/permissionSummary.ts b/src/main/frontend/common/utils/permissionSummary.ts
new file mode 100644
index 00000000..4c8cfe53
--- /dev/null
+++ b/src/main/frontend/common/utils/permissionSummary.ts
@@ -0,0 +1,36 @@
+import type { PermissionGroup } from "../types/permission.ts";
+
+export interface PermissionRef {
+  name: string;
+  groupTitle: string;
+}
+
+/** Index permissions by id for summary building. */
+export function indexPermissions(
+  groups: PermissionGroup[],
+): Map<string, PermissionRef> {
+  const m = new Map<string, PermissionRef>();
+  for (const g of groups) {
+    for (const p of g.permissions) {
+      m.set(p.id, { name: p.name, groupTitle: g.title });
+    }
+  }
+  return m;
+}
+
+/**
+ * Build the "Group/Permission, …" card summary line for a set of permission
+ * ids. Returns null when nothing is granted so cards can show a placeholder.
+ */
+export function buildPermissionSummary(
+  permissionIds: string[],
+  permissionsById: ReadonlyMap<string, PermissionRef>,
+): string | null {
+  if (permissionIds.length === 0) return null;
+  return permissionIds
+    .map((id) => permissionsById.get(id))
+    .filter((p): p is PermissionRef => !!p)
+    .map((p) => `${p.groupTitle}/${p.name}`)
+    .sort()
+    .join(", ");
+}
diff --git a/src/main/frontend/manage-roles/ManageRolesPage.spec.tsx b/src/main/frontend/manage-roles/ManageRolesPage.spec.tsx
new file mode 100644
index 00000000..60c4b8ce
--- /dev/null
+++ b/src/main/frontend/manage-roles/ManageRolesPage.spec.tsx
@@ -0,0 +1,236 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { StrategyClient } from "../common/api/strategy.ts";
+import type {
+  ManageRolesBootstrap,
+  RoleTypeBootstrap,
+} from "../common/types/bootstrap.ts";
+import { ManageRolesPage } from "./ManageRolesPage.tsx";
+
+vi.mock("../common/api/validation.ts", () => ({
+  checkPattern: vi.fn().mockResolvedValue({ ok: true }),
+}));
+
+const typeBootstrap = (
+  overrides: Partial<RoleTypeBootstrap> = {},
+): RoleTypeBootstrap => ({
+  visible: true,
+  canEdit: true,
+  permissionGroups: [
+    {
+      title: "Job",
+      permissions: [
+        { id: "job.read", name: "Read", description: "", impliedByList: [] },
+      ],
+    },
+  ],
+  roles: [],
+  ...overrides,
+});
+
+const bootstrap = (
+  overrides: Partial<ManageRolesBootstrap> = {},
+): ManageRolesBootstrap => ({
+  globalRoles: typeBootstrap({
+    roles: [{ name: "admin", permissionIds: ["job.read"] }],
+  }),
+  projectRoles: typeBootstrap({
+    roles: [
+      { name: "dev", pattern: "dev-.*", permissionIds: ["job.read"] },
+      {
+        name: "templated",
+        pattern: ".*",
+        templateName: "developer",
+        permissionIds: ["job.read"],
+      },
+    ],
+  }),
+  slaveRoles: typeBootstrap(),
+  templates: [{ name: "developer", permissionIds: ["job.read"], isUsed: true }],
+  ...overrides,
+});
+
+const createClient = (): StrategyClient => ({
+  addTemplate: vi.fn(),
+  removeTemplates: vi.fn(),
+  addRole: vi.fn().mockResolvedValue(undefined),
+  removeRoles: vi.fn().mockResolvedValue(undefined),
+  getMatchingJobs: vi
+    .fn()
+    .mockResolvedValue({ matchingJobs: ["dev-a"], itemCount: 1 }),
+  getMatchingAgents: vi
+    .fn()
+    .mockResolvedValue({ matchingAgents: [], agentCount: 0 }),
+});
+
+const renderPage = (
+  b: ManageRolesBootstrap = bootstrap(),
+  client: StrategyClient = createClient(),
+) => {
+  render(
+    <ManageRolesPage
+      bootstrap={b}
+      client={client}
+      rootUrl="/jenkins"
+      checkPatternUrl="/checkPattern"
+    />,
+  );
+  return client;
+};
+
+describe("ManageRolesPage", () => {
+  let addButton: HTMLButtonElement;
+
+  beforeEach(() => {
+    // The add button is rendered by Jelly in the app-bar, outside React.
+    addButton = document.createElement("button");
+    addButton.id = "rsp-add-role-btn";
+    document.body.appendChild(addButton);
+    vi.stubGlobal("dialog", {
+      confirm: vi.fn().mockResolvedValue(true),
+    });
+  });
+
+  afterEach(() => {
+    addButton.remove();
+    vi.unstubAllGlobals();
+    window.location.hash = "";
+  });
+
+  it("renders a tab per visible role type and switches between them", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    expect(screen.getAllByRole("tab")).toHaveLength(3);
+    expect(screen.getByText("admin")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("tab", { name: "Item roles" }));
+    expect(screen.getByText("dev")).toBeInTheDocument();
+    expect(screen.queryByText("admin")).not.toBeInTheDocument();
+  });
+
+  it("hides tabs for role types the user cannot see", () => {
+    renderPage(
+      bootstrap({
+        globalRoles: typeBootstrap({ visible: false, canEdit: false }),
+        slaveRoles: typeBootstrap({ visible: false, canEdit: false }),
+      }),
+    );
+    // With a single visible type there is no tab bar at all.
+    expect(screen.queryByRole("tab")).not.toBeInTheDocument();
+    expect(screen.getByText("dev")).toBeInTheDocument();
+  });
+
+  it("opens the item roles tab when deep-linked via hash", () => {
+    window.location.hash = "#item";
+    renderPage();
+    expect(screen.getByRole("tab", { name: "Item roles" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByText("dev")).toBeInTheDocument();
+  });
+
+  it("hides edit and delete actions and the add button when not editable", async () => {
+    const user = userEvent.setup();
+    renderPage(
+      bootstrap({
+        globalRoles: typeBootstrap({
+          canEdit: false,
+          roles: [{ name: "admin", permissionIds: ["job.read"] }],
+        }),
+      }),
+    );
+
+    expect(screen.queryByLabelText("Edit role")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Delete role")).not.toBeInTheDocument();
+    expect(addButton).not.toBeVisible();
+
+    // An editable tab shows them again.
+    await user.click(screen.getByRole("tab", { name: "Item roles" }));
+    expect(screen.getAllByLabelText("Edit role").length).toBeGreaterThan(0);
+    expect(addButton).toBeVisible();
+  });
+
+  it("shows the template badge on template-bound roles", async () => {
+    const user = userEvent.setup();
+    renderPage();
+    await user.click(screen.getByRole("tab", { name: "Item roles" }));
+    expect(screen.getByText("Template: developer")).toBeInTheDocument();
+  });
+
+  it("adds a role through the dialog and shows it in the list", async () => {
+    const user = userEvent.setup();
+    const client = renderPage();
+
+    await user.click(addButton);
+    await user.type(screen.getByLabelText("Name"), "reader");
+    await user.click(screen.getByLabelText("Read"));
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    await waitFor(() =>
+      expect(client.addRole).toHaveBeenCalledWith(
+        "globalRoles",
+        "reader",
+        ["job.read"],
+        false,
+        undefined,
+        undefined,
+      ),
+    );
+    expect(screen.getByText("reader")).toBeInTheDocument();
+  });
+
+  it("deletes a role after confirmation", async () => {
+    const user = userEvent.setup();
+    const client = renderPage();
+
+    await user.click(screen.getByLabelText("Delete role"));
+
+    await waitFor(() =>
+      expect(client.removeRoles).toHaveBeenCalledWith("globalRoles", ["admin"]),
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("admin")).not.toBeInTheDocument(),
+    );
+  });
+
+  it("keeps the role when the delete confirmation is cancelled", async () => {
+    vi.stubGlobal("dialog", {
+      confirm: vi.fn().mockRejectedValue(new Error("cancelled")),
+    });
+    const user = userEvent.setup();
+    const client = renderPage();
+
+    await user.click(screen.getByLabelText("Delete role"));
+
+    expect(client.removeRoles).not.toHaveBeenCalled();
+    expect(screen.getByText("admin")).toBeInTheDocument();
+  });
+
+  it("resets search when switching tabs", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    const search = screen.getByPlaceholderText("Search global roles");
+    await user.type(search, "admin");
+
+    await user.click(screen.getByRole("tab", { name: "Item roles" }));
+    expect(screen.getByPlaceholderText("Search item roles")).toHaveValue("");
+  });
+
+  it("opens the matching dialog from the pattern chip", async () => {
+    const user = userEvent.setup();
+    const client = renderPage();
+
+    await user.click(screen.getByRole("tab", { name: "Item roles" }));
+    await user.click(screen.getByText("dev-.*"));
+
+    await waitFor(() =>
+      expect(client.getMatchingJobs).toHaveBeenCalledWith("dev-.*", 15),
+    );
+    expect(await screen.findByText("dev-a")).toBeInTheDocument();
+  });
+});
diff --git a/src/main/frontend/manage-roles/ManageRolesPage.tsx b/src/main/frontend/manage-roles/ManageRolesPage.tsx
new file mode 100644
index 00000000..130004de
--- /dev/null
+++ b/src/main/frontend/manage-roles/ManageRolesPage.tsx
@@ -0,0 +1,416 @@
+import "../common/styles/role-strategy.css";
+
+import { useCallback, useMemo, useState } from "react";
+
+import type { StrategyClient } from "../common/api/strategy.ts";
+import { useAppBarButton } from "../common/components/AppBarButton.tsx";
+import { Card } from "../common/components/Card.tsx";
+import { IconButton } from "../common/components/IconButton.tsx";
+import { CloseIcon } from "../common/components/icons/CloseIcon.tsx";
+import { EditIcon } from "../common/components/icons/EditIcon.tsx";
+import { TrashIcon } from "../common/components/icons/TrashIcon.tsx";
+import { PermissionGroups } from "../common/components/PermissionGroups.tsx";
+import { SearchWithFilter } from "../common/components/SearchWithFilter.tsx";
+import { Tabs } from "../common/components/Tabs.tsx";
+import { Tooltip } from "../common/components/Tooltip.tsx";
+import type { ManageRolesBootstrap } from "../common/types/bootstrap.ts";
+import type { Role, RoleTypeKey } from "../common/types/role.ts";
+import {
+  buildPermissionSummary,
+  indexPermissions,
+} from "../common/utils/permissionSummary.ts";
+import { MatchingDialog } from "./MatchingDialog.tsx";
+import { RoleDialog, type RoleDialogResult } from "./RoleDialog.tsx";
+
+interface ManageRolesPageProps {
+  bootstrap: ManageRolesBootstrap;
+  client: StrategyClient;
+  rootUrl: string;
+  checkPatternUrl: string;
+}
+
+interface TabConfig {
+  key: RoleTypeKey;
+  label: string;
+  singular: string;
+  hash: string;
+}
+
+const TABS: TabConfig[] = [
+  {
+    key: "globalRoles",
+    label: "Global roles",
+    singular: "global role",
+    hash: "#global",
+  },
+  {
+    key: "projectRoles",
+    label: "Item roles",
+    singular: "item role",
+    hash: "#item",
+  },
+  {
+    key: "slaveRoles",
+    label: "Agent roles",
+    singular: "agent role",
+    hash: "#agent",
+  },
+];
+
+const byName = (a: Role, b: Role) => a.name.localeCompare(b.name);
+
+export function ManageRolesPage({
+  bootstrap,
+  client,
+  rootUrl,
+  checkPatternUrl,
+}: ManageRolesPageProps) {
+  const visibleTabs = useMemo(
+    () => TABS.filter((t) => bootstrap[t.key].visible),
+    [bootstrap],
+  );
+
+  const [activeKey, setActiveKey] = useState<RoleTypeKey>(() => {
+    const fromHash = visibleTabs.find((t) => t.hash === window.location.hash);
+    return (fromHash ?? visibleTabs[0])?.key ?? "globalRoles";
+  });
+  const [rolesByType, setRolesByType] = useState<Record<RoleTypeKey, Role[]>>(
+    () => ({
+      globalRoles: [...bootstrap.globalRoles.roles].sort(byName),
+      projectRoles: [...bootstrap.projectRoles.roles].sort(byName),
+      slaveRoles: [...bootstrap.slaveRoles.roles].sort(byName),
+    }),
+  );
+  const [search, setSearch] = useState("");
+  const [filterIds, setFilterIds] = useState<ReadonlySet<string>>(new Set());
+  const [mode, setMode] = useState<"closed" | "add" | { edit: string }>(
+    "closed",
+  );
+  const [matching, setMatching] = useState<{
+    kind: "items" | "agents";
+    pattern: string;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const activeTab =
+    visibleTabs.find((t) => t.key === activeKey) ?? visibleTabs[0];
+  const active = bootstrap[activeKey];
+  const roles = rolesByType[activeKey];
+
+  const openAdd = useCallback(() => setMode("add"), []);
+  useAppBarButton("rsp-add-role-btn", openAdd, { visible: active.canEdit });
+
+  const permissionsById = useMemo(
+    () => indexPermissions(active.permissionGroups),
+    [active.permissionGroups],
+  );
+
+  const selectTab = (key: string) => {
+    const tab = visibleTabs.find((t) => t.key === key);
+    if (!tab || tab.key === activeKey) return;
+    setActiveKey(tab.key);
+    // Search and permission filter are scoped to a role type; the permission
+    // catalogue differs between types, so carrying them over would be wrong.
+    setSearch("");
+    setFilterIds(new Set());
+    setMode("closed");
+    setError(null);
+    history.replaceState(null, "", tab.hash);
+  };
+
+  const toggleFilter = (id: string) => {
+    setFilterIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return roles.filter((r) => {
+      const matchesSearch =
+        !q ||
+        r.name.toLowerCase().includes(q) ||
+        (r.pattern ?? "").toLowerCase().includes(q);
+      const matchesFilter =
+        filterIds.size === 0 ||
+        [...filterIds].every((id) => r.permissionIds.includes(id));
+      return matchesSearch && matchesFilter;
+    });
+  }, [roles, search, filterIds]);
+
+  const updateRoles = (key: RoleTypeKey, update: (prev: Role[]) => Role[]) => {
+    setRolesByType((prev) => ({ ...prev, [key]: update(prev[key]) }));
+  };
+
+  const toRole = (input: RoleDialogResult): Role => {
+    // A bound template dictates the permissions; mirror what the backend stores.
+    const template = input.template
+      ? bootstrap.templates.find((t) => t.name === input.template)
+      : undefined;
+    return {
+      name: input.name,
+      pattern: input.pattern,
+      templateName: template?.name,
+      permissionIds: template ? template.permissionIds : input.permissionIds,
+    };
+  };
+
+  const handleAdd = async (input: RoleDialogResult) => {
+    await client.addRole(
+      activeKey,
+      input.name,
+      input.permissionIds,
+      false,
+      input.pattern,
+      input.template,
+    );
+    updateRoles(activeKey, (prev) => [...prev, toRole(input)].sort(byName));
+    setMode("closed");
+  };
+
+  const handleEdit = async (input: RoleDialogResult) => {
+    await client.addRole(
+      activeKey,
+      input.name,
+      input.permissionIds,
+      true,
+      input.pattern,
+      input.template,
+    );
+    updateRoles(activeKey, (prev) =>
+      prev.map((r) => (r.name === input.name ? toRole(input) : r)),
+    );
+    setMode("closed");
+  };
+
+  const handleDelete = async (role: Role) => {
+    // dialog.confirm rejects when the user cancels.
+    const confirmed = await dialog
+      .confirm(`Delete role "${role.name}"?`, {
+        type: "destructive",
+        okText: "Delete",
+      })
+      .catch(() => false);
+    if (!confirmed) return;
+    setError(null);
+    const key = activeKey;
+    try {
+      await client.removeRoles(key, [role.name]);
+      updateRoles(key, (prev) => prev.filter((r) => r.name !== role.name));
+    } catch (err) {
+      console.error("Failed to delete role", role.name, err);
+      setError(`Failed to delete role "${role.name}".`);
+    }
+  };
+
+  const buildBadges = (role: Role) => {
+    if (!role.pattern && !role.templateName) return null;
+    const matchKind = activeKey === "slaveRoles" ? "agents" : "items";
+    return (
+      <>
+        {role.pattern !== undefined &&
+          (active.canEdit ? (
+            <Tooltip content={`Show matching ${matchKind}`} placement="top">
+              <button
+                type="button"
+                className="rsp-card__pattern rsp-card__pattern--button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setMatching({
+                    kind: matchKind,
+                    pattern: role.pattern ?? "",
+                  });
+                }}
+              >
+                {role.pattern}
+              </button>
+            </Tooltip>
+          ) : (
+            <span className="rsp-card__pattern">{role.pattern}</span>
+          ))}
+        {role.templateName && (
+          <span className="rsp-card__template-badge">
+            Template: {role.templateName}
+          </span>
+        )}
+      </>
+    );
+  };
+
+  const editing =
+    typeof mode === "object" && mode.edit
+      ? (roles.find((r) => r.name === mode.edit) ?? null)
+      : null;
+
+  if (visibleTabs.length === 0) return null;
+
+  return (
+    <>
+      {error && (
+        <div
+          role="alert"
+          className="jenkins-alert jenkins-alert-danger rsp-alert jenkins-!-margin-bottom-3"
+        >
+          <span>{error}</span>
+          <button
+            type="button"
+            className="jenkins-button jenkins-button--tertiary rsp-alert__dismiss"
+            aria-label="Dismiss"
+            onClick={() => setError(null)}
+          >
+            <CloseIcon />
+          </button>
+        </div>
+      )}
+      {visibleTabs.length > 1 && (
+        <div className="jenkins-!-margin-bottom-3">
+          <Tabs
+            tabs={visibleTabs}
+            activeKey={activeKey}
+            onSelect={selectTab}
+            panelId="rsp-roles-panel"
+          />
+        </div>
+      )}
+      <div
+        id="rsp-roles-panel"
+        role="tabpanel"
+        aria-labelledby={`rsp-tab-${activeKey}`}
+      >
+        {roles.length > 0 && (
+          <div className="jenkins-!-margin-bottom-3">
+            <SearchWithFilter
+              searchPlaceholder={`Search ${activeTab.label.toLowerCase()}`}
+              search={search}
+              onSearchChange={setSearch}
+              filterGroups={active.permissionGroups}
+              selectedFilterIds={filterIds}
+              onFilterToggle={toggleFilter}
+              onFilterReset={() => setFilterIds(new Set())}
+            />
+          </div>
+        )}
+        {roles.length === 0 ? (
+          <div className="jenkins-notice">
+            <div className="jenkins-notice__title">
+              No {activeTab.label.toLowerCase()} defined
+            </div>
+            {active.canEdit && (
+              <div className="jenkins-notice__description">
+                Click Add Role to create one.
+              </div>
+            )}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="jenkins-notice">
+            <div>No matching roles</div>
+            <div className="jenkins-notice__description">
+              <button
+                type="button"
+                className="jenkins-button"
+                onClick={() => {
+                  setSearch("");
+                  setFilterIds(new Set());
+                }}
+              >
+                Clear filters
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="rsp-cards">
+            {filtered.map((role) => (
+              <Card
+                key={role.name}
+                name={role.name}
+                badges={buildBadges(role)}
+                summary={buildPermissionSummary(
+                  role.permissionIds,
+                  permissionsById,
+                )}
+                summaryPlaceholder="No permissions"
+                actions={
+                  active.canEdit && (
+                    <>
+                      <IconButton
+                        tooltip="Edit role"
+                        onClick={() => setMode({ edit: role.name })}
+                        icon={<EditIcon />}
+                      />
+                      <IconButton
+                        tooltip="Delete role"
+                        destructive
+                        onClick={() => handleDelete(role)}
+                        icon={<TrashIcon />}
+                      />
+                    </>
+                  )
+                }
+                readOnly={!active.canEdit}
+                body={
+                  <PermissionGroups
+                    groups={active.permissionGroups}
+                    selectedIds={new Set(role.permissionIds)}
+                    disabled
+                    showOnlySelected
+                  />
+                }
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      {mode === "add" && (
+        <RoleDialog
+          roleType={activeKey}
+          title={`Add ${activeTab.singular}`}
+          submitLabel="Add"
+          allowNameEdit
+          existingNames={new Set(roles.map((r) => r.name))}
+          permissionGroups={active.permissionGroups}
+          templates={bootstrap.templates}
+          checkPatternUrl={checkPatternUrl}
+          rootUrl={rootUrl}
+          initialName=""
+          initialPattern=".*"
+          initialTemplateName=""
+          initialPermissionIds={[]}
+          onCancel={() => setMode("closed")}
+          onSubmit={handleAdd}
+        />
+      )}
+      {editing && (
+        <RoleDialog
+          roleType={activeKey}
+          title={`Edit role: ${editing.name}`}
+          submitLabel="Save"
+          allowNameEdit={false}
+          existingNames={new Set()}
+          permissionGroups={active.permissionGroups}
+          templates={bootstrap.templates}
+          checkPatternUrl={checkPatternUrl}
+          rootUrl={rootUrl}
+          initialName={editing.name}
+          initialPattern={editing.pattern ?? ".*"}
+          initialTemplateName={editing.templateName ?? ""}
+          initialPermissionIds={
+            editing.templateName ? [] : editing.permissionIds
+          }
+          onCancel={() => setMode("closed")}
+          onSubmit={handleEdit}
+        />
+      )}
+      {matching && (
+        <MatchingDialog
+          kind={matching.kind}
+          pattern={matching.pattern}
+          client={client}
+          onClose={() => setMatching(null)}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/main/frontend/manage-roles/MatchingDialog.tsx b/src/main/frontend/manage-roles/MatchingDialog.tsx
new file mode 100644
index 00000000..be61ccd6
--- /dev/null
+++ b/src/main/frontend/manage-roles/MatchingDialog.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+
+import type { StrategyClient } from "../common/api/strategy.ts";
+import { Dialog } from "../common/components/Dialog.tsx";
+
+// Search limits carried over from the previous manage page.
+const MAX_ITEMS = 15;
+const MAX_AGENTS = 10;
+
+interface MatchingDialogProps {
+  kind: "items" | "agents";
+  pattern: string;
+  client: StrategyClient;
+  onClose: () => void;
+}
+
+/** Lists the jobs or agents whose names match a role's pattern. */
+export function MatchingDialog({
+  kind,
+  pattern,
+  client,
+  onClose,
+}: MatchingDialogProps) {
+  const [names, setNames] = useState<string[] | null>(null);
+  const [totalCount, setTotalCount] = useState(0);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        if (kind === "items") {
+          const result = await client.getMatchingJobs(pattern, MAX_ITEMS);
+          if (cancelled) return;
+          setNames(result.matchingJobs);
+          setTotalCount(result.itemCount);
+        } else {
+          const result = await client.getMatchingAgents(pattern, MAX_AGENTS);
+          if (cancelled) return;
+          setNames(result.matchingAgents);
+          setTotalCount(result.agentCount);
+        }
+      } catch (err) {
+        console.error("Failed to fetch matches for pattern", pattern, err);
+        if (!cancelled) setFailed(true);
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [kind, pattern, client]);
+
+  const noun = kind === "items" ? "items" : "agents";
+  const max = kind === "items" ? MAX_ITEMS : MAX_AGENTS;
+
+  let title = `Matching ${noun}`;
+  if (names !== null) {
+    if (names.length === 0) {
+      title = `No ${noun} found matching "${pattern}"`;
+    } else if (totalCount > names.length) {
+      title = `First ${max} ${noun} (out of ${totalCount}) matching "${pattern}"`;
+    } else {
+      title = `${kind === "items" ? "Items" : "Agents"} matching "${pattern}"`;
+    }
+  }
+
+  return (
+    <Dialog title={title} onClose={onClose}>
+      {failed ? (
+        <div className="jenkins-alert jenkins-alert-danger">
+          Unable to fetch matching {noun}.
+        </div>
+      ) : names === null ? (
+        <div className="jenkins-spinner">Loading…</div>
+      ) : (
+        names.length > 0 && (
+          <ul className="rsp-matching-list">
+            {names.map((n) => (
+              <li key={n}>{n}</li>
+            ))}
+          </ul>
+        )
+      )}
+    </Dialog>
+  );
+}
diff --git a/src/main/frontend/manage-roles/RoleDialog.spec.tsx b/src/main/frontend/manage-roles/RoleDialog.spec.tsx
new file mode 100644
index 00000000..0bb37fe0
--- /dev/null
+++ b/src/main/frontend/manage-roles/RoleDialog.spec.tsx
@@ -0,0 +1,189 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { checkPattern } from "../common/api/validation.ts";
+import type { PermissionGroup } from "../common/types/permission.ts";
+import type { PermissionTemplate } from "../common/types/template.ts";
+import { RoleDialog } from "./RoleDialog.tsx";
+
+vi.mock("../common/api/validation.ts", () => ({
+  checkPattern: vi.fn().mockResolvedValue({ ok: true }),
+}));
+
+const checkPatternMock = vi.mocked(checkPattern);
+
+const GROUPS: PermissionGroup[] = [
+  {
+    title: "Job",
+    permissions: [
+      { id: "job.read", name: "Read", description: "", impliedByList: [] },
+      { id: "job.build", name: "Build", description: "", impliedByList: [] },
+    ],
+  },
+];
+
+const TEMPLATES: PermissionTemplate[] = [
+  { name: "developer", permissionIds: ["job.build"], isUsed: false },
+];
+
+const baseProps = {
+  title: "Add item role",
+  submitLabel: "Add",
+  allowNameEdit: true,
+  existingNames: new Set<string>(),
+  permissionGroups: GROUPS,
+  templates: TEMPLATES,
+  checkPatternUrl: "/checkPattern",
+  rootUrl: "/jenkins",
+  initialName: "",
+  initialPattern: ".*",
+  initialTemplateName: "",
+  initialPermissionIds: [],
+  onCancel: () => {},
+};
+
+describe("RoleDialog", () => {
+  beforeEach(() => {
+    checkPatternMock.mockClear();
+    checkPatternMock.mockResolvedValue({ ok: true });
+  });
+
+  it("disables submit until the name is filled", async () => {
+    const user = userEvent.setup();
+    render(
+      <RoleDialog {...baseProps} roleType="projectRoles" onSubmit={vi.fn()} />,
+    );
+
+    const submit = screen.getByRole("button", { name: "Add" });
+    expect(submit).toBeDisabled();
+
+    await user.type(screen.getByLabelText("Name"), "dev");
+    expect(submit).toBeEnabled();
+  });
+
+  it("validates the pattern on blur, not while typing", async () => {
+    const user = userEvent.setup();
+    render(
+      <RoleDialog {...baseProps} roleType="projectRoles" onSubmit={vi.fn()} />,
+    );
+
+    await user.type(screen.getByLabelText("Pattern"), "x");
+    expect(checkPatternMock).not.toHaveBeenCalled();
+
+    await user.tab();
+    await waitFor(() =>
+      expect(checkPatternMock).toHaveBeenCalledWith("/checkPattern", ".*x"),
+    );
+  });
+
+  it("keeps submit enabled while a pattern check is still in flight", async () => {
+    // A check that never resolves stands in for a slow round trip.
+    checkPatternMock.mockReturnValue(new Promise(() => {}));
+    const user = userEvent.setup();
+    render(
+      <RoleDialog {...baseProps} roleType="projectRoles" onSubmit={vi.fn()} />,
+    );
+
+    await user.type(screen.getByLabelText("Name"), "dev");
+    await user.type(screen.getByLabelText("Pattern"), "x");
+    await user.tab();
+
+    expect(screen.getByRole("button", { name: "Add" })).toBeEnabled();
+  });
+
+  it("shows the server message on blur for an invalid pattern and clears it on edit", async () => {
+    checkPatternMock.mockResolvedValue({
+      ok: false,
+      message: "Unclosed group",
+    });
+    const user = userEvent.setup();
+    render(
+      <RoleDialog {...baseProps} roleType="projectRoles" onSubmit={vi.fn()} />,
+    );
+
+    await user.type(screen.getByLabelText("Name"), "dev");
+    await user.type(screen.getByLabelText("Pattern"), "(");
+    await user.tab();
+
+    await waitFor(() =>
+      expect(screen.getByText("Unclosed group")).toBeInTheDocument(),
+    );
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+
+    // Editing the field clears the error until the next blur.
+    await user.type(screen.getByLabelText("Pattern"), "x");
+    expect(screen.queryByText("Unclosed group")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add" })).toBeEnabled();
+  });
+
+  it("does not render a pattern field for global roles", () => {
+    render(
+      <RoleDialog {...baseProps} roleType="globalRoles" onSubmit={vi.fn()} />,
+    );
+    expect(screen.queryByLabelText("Pattern")).not.toBeInTheDocument();
+  });
+
+  it("rejects names containing commas", async () => {
+    const user = userEvent.setup();
+    render(
+      <RoleDialog {...baseProps} roleType="globalRoles" onSubmit={vi.fn()} />,
+    );
+
+    await user.type(screen.getByLabelText("Name"), "a,b");
+    expect(
+      screen.getByText("Role names must not contain commas."),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+  });
+
+  it("rejects names that already exist", async () => {
+    const user = userEvent.setup();
+    render(
+      <RoleDialog
+        {...baseProps}
+        roleType="globalRoles"
+        existingNames={new Set(["admin"])}
+        onSubmit={vi.fn()}
+      />,
+    );
+
+    await user.type(screen.getByLabelText("Name"), "admin");
+    expect(
+      screen.getByText("A role with this name already exists."),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+  });
+
+  it("binding a template shows its permissions read-only and submits the template", async () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    const user = userEvent.setup();
+    render(
+      <RoleDialog {...baseProps} roleType="projectRoles" onSubmit={onSubmit} />,
+    );
+
+    await user.type(screen.getByLabelText("Name"), "dev");
+    await user.selectOptions(
+      screen.getByLabelText("Permission template"),
+      "developer",
+    );
+
+    // The template's permission is shown checked but not editable.
+    const buildCheckbox = screen.getByLabelText("Build");
+    expect(buildCheckbox).toBeChecked();
+    expect(buildCheckbox).toBeDisabled();
+
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Add" })).toBeEnabled(),
+    );
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled());
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: "dev",
+      pattern: ".*",
+      template: "developer",
+      permissionIds: [],
+    });
+  });
+});
diff --git a/src/main/frontend/manage-roles/RoleDialog.tsx b/src/main/frontend/manage-roles/RoleDialog.tsx
new file mode 100644
index 00000000..684cb123
--- /dev/null
+++ b/src/main/frontend/manage-roles/RoleDialog.tsx
@@ -0,0 +1,266 @@
+import { type FormEvent, useMemo, useRef, useState } from "react";
+
+import { ApiError } from "../common/api/client.ts";
+import { checkPattern } from "../common/api/validation.ts";
+import { Dialog } from "../common/components/Dialog.tsx";
+import { PermissionList } from "../common/components/PermissionList.tsx";
+import type { PermissionGroup } from "../common/types/permission.ts";
+import type { RoleTypeKey } from "../common/types/role.ts";
+import type { PermissionTemplate } from "../common/types/template.ts";
+
+export interface RoleDialogResult {
+  name: string;
+  pattern?: string;
+  template?: string;
+  permissionIds: string[];
+}
+
+interface RoleDialogProps {
+  roleType: RoleTypeKey;
+  title: string;
+  submitLabel: string;
+  allowNameEdit: boolean;
+  existingNames: ReadonlySet<string>;
+  permissionGroups: PermissionGroup[];
+  /** Selectable permission templates; item roles only. */
+  templates: PermissionTemplate[];
+  checkPatternUrl: string;
+  rootUrl: string;
+  initialName: string;
+  initialPattern: string;
+  initialTemplateName: string;
+  initialPermissionIds: string[];
+  onCancel: () => void;
+  onSubmit: (input: RoleDialogResult) => Promise<void>;
+}
+
+export function RoleDialog({
+  roleType,
+  title,
+  submitLabel,
+  allowNameEdit,
+  existingNames,
+  permissionGroups,
+  templates,
+  checkPatternUrl,
+  rootUrl,
+  initialName,
+  initialPattern,
+  initialTemplateName,
+  initialPermissionIds,
+  onCancel,
+  onSubmit,
+}: RoleDialogProps) {
+  const [name, setName] = useState(initialName);
+  const [pattern, setPattern] = useState(initialPattern);
+  const [patternError, setPatternError] = useState<string | null>(null);
+  const [templateName, setTemplateName] = useState(initialTemplateName);
+  const [selected, setSelected] = useState<ReadonlySet<string>>(
+    new Set(initialPermissionIds),
+  );
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Invalidates in-flight pattern checks once the field is edited again.
+  const patternCheckSeq = useRef(0);
+
+  const hasPattern = roleType !== "globalRoles";
+  const hasTemplates = roleType === "projectRoles" && templates.length > 0;
+
+  // Validation runs on blur only, never mid-typing, and only ever disables
+  // submit once a pattern is known to be bad. A bad pattern submitted before
+  // the check lands is rejected by the backend and surfaced in the dialog.
+  const handlePatternChange = (value: string) => {
+    setPattern(value);
+    setPatternError(null);
+    patternCheckSeq.current++;
+  };
+
+  const handlePatternBlur = async () => {
+    const value = pattern.trim();
+    if (value === "") return;
+    const seq = ++patternCheckSeq.current;
+    try {
+      const result = await checkPattern(checkPatternUrl, value);
+      if (seq !== patternCheckSeq.current) return;
+      setPatternError(result.ok ? null : (result.message ?? "Invalid pattern"));
+    } catch {
+      // Validation endpoint unreachable; let the backend reject on submit.
+    }
+  };
+
+  const togglePermission = (id: string, next: boolean) => {
+    setSelected((prev) => {
+      const ns = new Set(prev);
+      if (next) ns.add(id);
+      else ns.delete(id);
+      return ns;
+    });
+  };
+
+  const trimmedName = name.trim();
+  const nameTaken =
+    allowNameEdit && existingNames.has(trimmedName) && trimmedName !== "";
+  // removeRoles takes a comma-separated name list, so commas cannot round-trip.
+  const nameHasComma = trimmedName.includes(",");
+  const patternInvalid =
+    hasPattern && (pattern.trim() === "" || patternError !== null);
+  const canSubmit =
+    trimmedName !== "" &&
+    !nameTaken &&
+    !nameHasComma &&
+    !patternInvalid &&
+    !submitting;
+
+  // A bound template dictates the permissions; show its set read-only.
+  const boundTemplate = templateName
+    ? (templates.find((t) => t.name === templateName) ?? null)
+    : null;
+  const shownPermissionIds = useMemo(
+    () => (boundTemplate ? new Set(boundTemplate.permissionIds) : selected),
+    [boundTemplate, selected],
+  );
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await onSubmit({
+        name: trimmedName,
+        pattern: hasPattern ? pattern.trim() : undefined,
+        template: boundTemplate ? boundTemplate.name : undefined,
+        permissionIds: boundTemplate ? [] : Array.from(selected),
+      });
+    } catch (err) {
+      const detail = err instanceof ApiError ? err.body.trim() : "";
+      setError(
+        detail ? `Failed to save role: ${detail}` : "Failed to save role.",
+      );
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog
+      title={title}
+      onClose={onCancel}
+      primaryAction={
+        <button
+          type="submit"
+          form="rsp-role-form"
+          className="jenkins-button jenkins-button--primary"
+          disabled={!canSubmit}
+        >
+          {submitting ? "Saving…" : submitLabel}
+        </button>
+      }
+    >
+      <form
+        id="rsp-role-form"
+        onSubmit={handleSubmit}
+        className="rsp-dialog__form"
+      >
+        {error && (
+          <div className="jenkins-alert jenkins-alert-danger">{error}</div>
+        )}
+        <div className="jenkins-form-item">
+          <label className="jenkins-form-label" htmlFor="rsp-role-name">
+            Name
+          </label>
+          <input
+            id="rsp-role-name"
+            type="text"
+            className="jenkins-input"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={!allowNameEdit}
+            data-autofocus={allowNameEdit ? "true" : undefined}
+            required
+          />
+          {nameTaken && (
+            <div className="jenkins-form-description jenkins-!-color-red">
+              A role with this name already exists.
+            </div>
+          )}
+          {nameHasComma && (
+            <div className="jenkins-form-description jenkins-!-color-red">
+              Role names must not contain commas.
+            </div>
+          )}
+        </div>
+        {hasPattern && (
+          <div className="jenkins-form-item">
+            <label className="jenkins-form-label" htmlFor="rsp-role-pattern">
+              Pattern
+            </label>
+            <input
+              id="rsp-role-pattern"
+              type="text"
+              className="jenkins-input"
+              value={pattern}
+              onChange={(e) => handlePatternChange(e.target.value)}
+              onBlur={handlePatternBlur}
+              required
+            />
+            {patternError && (
+              <div className="jenkins-form-description jenkins-!-color-red">
+                {patternError}
+              </div>
+            )}
+            <div className="jenkins-form-description">
+              Regular expression matching{" "}
+              {roleType === "projectRoles" ? "item" : "agent"} names, e.g.{" "}
+              <code>prod-.*</code>.{" "}
+              <a
+                href={`${rootUrl}/manage/role-strategy/list-macros`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                View available macros
+              </a>
+            </div>
+          </div>
+        )}
+        {hasTemplates && (
+          <div className="jenkins-form-item">
+            <label className="jenkins-form-label" htmlFor="rsp-role-template">
+              Permission template
+            </label>
+            <div className="jenkins-select">
+              <select
+                id="rsp-role-template"
+                className="jenkins-select__input"
+                value={templateName}
+                onChange={(e) => setTemplateName(e.target.value)}
+              >
+                <option value="">None</option>
+                {templates.map((t) => (
+                  <option key={t.name} value={t.name}>
+                    {t.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            {boundTemplate && (
+              <div className="jenkins-form-description">
+                Permissions are managed by the template and cannot be edited
+                here.
+              </div>
+            )}
+          </div>
+        )}
+        <div className="jenkins-form-item">
+          <div className="jenkins-form-label">Permissions</div>
+          <PermissionList
+            groups={permissionGroups}
+            selectedIds={shownPermissionIds}
+            disabled={!!boundTemplate}
+            onToggle={togglePermission}
+            filterAutoFocus={!allowNameEdit}
+          />
+        </div>
+      </form>
+    </Dialog>
+  );
+}
diff --git a/src/main/frontend/manage-roles/index.tsx b/src/main/frontend/manage-roles/index.tsx
new file mode 100644
index 00000000..f1970156
--- /dev/null
+++ b/src/main/frontend/manage-roles/index.tsx
@@ -0,0 +1,27 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { createStrategyClient } from "../common/api/strategy.ts";
+import type { ManageRolesBootstrap } from "../common/types/bootstrap.ts";
+import { readBootstrap } from "../common/utils/bootstrap.ts";
+import { ManageRolesPage } from "./ManageRolesPage.tsx";
+
+const mountNode = document.getElementById("manage-roles-root");
+if (mountNode) {
+  const bootstrap = readBootstrap<ManageRolesBootstrap>(
+    mountNode,
+    "data-bootstrap",
+  );
+  const strategyUrl = mountNode.dataset.strategyUrl ?? "";
+  const client = createStrategyClient(strategyUrl);
+  createRoot(mountNode).render(
+    <StrictMode>
+      <ManageRolesPage
+        bootstrap={bootstrap}
+        client={client}
+        rootUrl={mountNode.dataset.rootUrl ?? ""}
+        checkPatternUrl={mountNode.dataset.checkPatternUrl ?? ""}
+      />
+    </StrictMode>,
+  );
+}
diff --git a/src/main/frontend/permission-templates/PermissionTemplatesPage.tsx b/src/main/frontend/permission-templates/PermissionTemplatesPage.tsx
index 3f311e62..2e9442f4 100644
--- a/src/main/frontend/permission-templates/PermissionTemplatesPage.tsx
+++ b/src/main/frontend/permission-templates/PermissionTemplatesPage.tsx
@@ -13,6 +13,10 @@ import { PermissionGroups } from "../common/components/PermissionGroups.tsx";
 import { SearchWithFilter } from "../common/components/SearchWithFilter.tsx";
 import type { TemplatesBootstrap } from "../common/types/bootstrap.ts";
 import type { PermissionTemplate } from "../common/types/template.ts";
+import {
+  buildPermissionSummary,
+  indexPermissions,
+} from "../common/utils/permissionSummary.ts";
 import { TemplateDialog } from "./TemplateDialog.tsx";
 
 interface PermissionTemplatesPageProps {
@@ -40,15 +44,10 @@ export function PermissionTemplatesPage({
   const openAdd = useCallback(() => setMode("add"), []);
   useAppBarButton("rsp-add-template-btn", openAdd);
 
-  const permissionsById = useMemo(() => {
-    const m = new Map<string, { name: string; groupTitle: string }>();
-    for (const g of bootstrap.permissionGroups) {
-      for (const p of g.permissions) {
-        m.set(p.id, { name: p.name, groupTitle: g.title });
-      }
-    }
-    return m;
-  }, [bootstrap.permissionGroups]);
+  const permissionsById = useMemo(
+    () => indexPermissions(bootstrap.permissionGroups),
+    [bootstrap.permissionGroups],
+  );
 
   const toggleFilter = (id: string) => {
     setFilterIds((prev) => {
@@ -70,15 +69,8 @@ export function PermissionTemplatesPage({
     });
   }, [templates, search, filterIds]);
 
-  const buildSummary = (template: PermissionTemplate) => {
-    if (template.permissionIds.length === 0) return null;
-    return template.permissionIds
-      .map((id) => permissionsById.get(id))
-      .filter((p): p is { name: string; groupTitle: string } => !!p)
-      .map((p) => `${p.groupTitle}/${p.name}`)
-      .sort()
-      .join(", ");
-  };
+  const buildSummary = (template: PermissionTemplate) =>
+    buildPermissionSummary(template.permissionIds, permissionsById);
 
   const handleAdd = async (input: {
     name: string;
diff --git a/src/main/frontend/setupTests.ts b/src/main/frontend/setupTests.ts
index c6b569c0..0617b1d6 100644
--- a/src/main/frontend/setupTests.ts
+++ b/src/main/frontend/setupTests.ts
@@ -15,3 +15,11 @@ class MockIntersectionObserver {
 
 globalThis.IntersectionObserver =
   MockIntersectionObserver as unknown as typeof IntersectionObserver;
+
+// jsdom does not implement the native <dialog> modal API.
+HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
+  this.open = true;
+};
+HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+  this.open = false;
+};
diff --git a/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy.java b/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy.java
index 780e58b0..0ddeb574 100644
--- a/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy.java
+++ b/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy.java
@@ -601,7 +601,13 @@ public void doAddRole(@QueryParameter(required = true) String type,
     List<String> permissionList = Arrays.asList(permissionIds.split(","));
     Set<Permission> permissionSet = PermissionHelper.fromStrings(permissionList, true);
 
-    Role role = new Role(roleName, pttrn, permissionSet);
+    Role role;
+    try {
+      role = new Role(roleName, pttrn, permissionSet);
+    } catch (PatternSyntaxException pse) {
+      Stapler.getCurrentResponse2().sendError(HttpServletResponse.SC_BAD_REQUEST, "Invalid pattern: " + pse.getMessage());
+      return;
+    }
 
     if (RoleBasedAuthorizationStrategy.PROJECT.equals(type) && templateName != null) {
       if (!hasPermissionTemplate(template)) {
@@ -615,14 +621,17 @@ public void doAddRole(@QueryParameter(required = true) String type,
     }
 
     RoleType roleType = RoleType.fromString(type);
-    if (overwriteb) {
-      RoleMap roleMap = getRoleMap(roleType);
-      Role role2 = roleMap.getRole(roleName);
-      if (role2 != null) {
-        roleMap.removeRole(role2);
-      }
+    RoleMap roleMap = getRoleMap(roleType);
+    Role existing = overwriteb ? roleMap.getRole(roleName) : null;
+    if (existing != null) {
+      // Keep the assignments of the role being replaced; dropping them would
+      // turn every edit into an implicit unassign-all.
+      Set<PermissionEntry> sids = roleMap.getSidEntriesForRole(roleName);
+      roleMap.removeRole(existing);
+      roleMap.addRole(role, sids);
+    } else {
+      roleMap.addRole(role);
     }
-    addRole(roleType, role);
     persistChanges();
   }
 
@@ -1117,7 +1126,7 @@ public void doGetRoleAssignments(@QueryParameter(fixEmpty = true) String type) t
   @Restricted(NoExternalUse.class)
   public void doGetMatchingJobs(@QueryParameter(required = true) String pattern,
       @QueryParameter() int maxJobs) throws IOException {
-    checkAdminPerm();
+    checkPerms(ITEM_ROLES_ADMIN);
     List<String> matchingItems = new ArrayList<>();
     int itemCount = RoleMap.getMatchingItemNames(matchingItems, Pattern.compile(pattern), maxJobs);
     JSONObject responseJson = new JSONObject();
@@ -1144,7 +1153,7 @@ public void doGetMatchingJobs(@QueryParameter(required = true) String pattern,
   @Restricted(NoExternalUse.class)
   public void doGetMatchingAgents(@QueryParameter(required = true) String pattern,
       @QueryParameter() int maxAgents) throws IOException {
-    checkAdminPerm();
+    checkPerms(AGENT_ROLES_ADMIN);
     List<String> matchingAgents = new ArrayList<>();
     int agentCount = RoleMap.getMatchingAgentNames(matchingAgents, Pattern.compile(pattern), maxAgents);
     JSONObject responseJson = new JSONObject();
@@ -1413,22 +1422,6 @@ public FormValidation doCheckForWhitespace(@QueryParameter String value) {
       }
     }
 
-    /**
-     * Called on role management form's submission.
-     */
-    @RequirePOST
-    @Restricted(NoExternalUse.class)
-    public void doRolesSubmit(StaplerRequest2 req, StaplerResponse2 rsp) throws ServletException, IOException {
-      checkPerms(ITEM_ROLES_ADMIN, AGENT_ROLES_ADMIN);
-
-      req.setCharacterEncoding("UTF-8");
-      JSONObject json = req.getSubmittedForm();
-      AuthorizationStrategy strategy = this.newInstance(req, json);
-      instance().setAuthorizationStrategy(strategy);
-      // Persist the data
-      persistChanges();
-    }
-
     /**
      * Called on role assignment form's submission.
      */
diff --git a/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig.java b/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig.java
index 739c9939..dff83980 100644
--- a/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig.java
+++ b/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig.java
@@ -165,19 +165,6 @@ public AuthorizationStrategy getStrategy() {
     }
   }
 
-  /**
-   * Called on roles management form submission.
-   */
-  @RequirePOST
-  @Restricted(NoExternalUse.class)
-  public void doRolesSubmit(StaplerRequest2 req, StaplerResponse2 rsp) throws IOException, ServletException {
-    Jenkins.get().checkAnyPermission(RoleBasedAuthorizationStrategy.ADMINISTER_AND_SOME_ROLES_ADMIN);
-    // Let the strategy descriptor handle the form
-    RoleBasedAuthorizationStrategy.DESCRIPTOR.doRolesSubmit(req, rsp);
-    // Redirect to the plugin index page
-    FormApply.success(".").generateResponse(req, rsp, this);
-  }
-
   /**
    * Called on roles generator form submission.
    */
@@ -253,6 +240,74 @@ public String getPermissionTemplatesBootstrapJson() {
     return result.toString();
   }
 
+  /**
+   * Bootstrap JSON for the Manage Roles page, intended to be embedded in a {@code data-*}
+   * attribute so the React UI can render immediately without an additional round trip.
+   *
+   * @return JSON string with the roles, permission groups and edit permission per role type,
+   *         plus the permission templates for the item-role dialog
+   */
+  @Restricted(NoExternalUse.class)
+  public String getManageRolesBootstrapJson() {
+    AuthorizationStrategy raw = getStrategy();
+    RoleBasedAuthorizationStrategy strategy = raw instanceof RoleBasedAuthorizationStrategy rbas ? rbas : null;
+    Jenkins jenkins = Jenkins.get();
+    JSONObject result = new JSONObject();
+    result.put(RoleBasedAuthorizationStrategy.GLOBAL, roleTypeToJson(strategy, RoleType.Global,
+        jenkins.hasPermission(Jenkins.SYSTEM_READ),
+        jenkins.hasPermission(Jenkins.ADMINISTER)));
+    result.put(RoleBasedAuthorizationStrategy.PROJECT, roleTypeToJson(strategy, RoleType.Project,
+        jenkins.hasAnyPermission(Jenkins.SYSTEM_READ, RoleBasedAuthorizationStrategy.ITEM_ROLES_ADMIN),
+        jenkins.hasPermission(RoleBasedAuthorizationStrategy.ITEM_ROLES_ADMIN)));
+    result.put(RoleBasedAuthorizationStrategy.SLAVE, roleTypeToJson(strategy, RoleType.Slave,
+        jenkins.hasAnyPermission(Jenkins.SYSTEM_READ, RoleBasedAuthorizationStrategy.AGENT_ROLES_ADMIN),
+        jenkins.hasPermission(RoleBasedAuthorizationStrategy.AGENT_ROLES_ADMIN)));
+    JSONArray templates = new JSONArray();
+    if (strategy != null) {
+      for (PermissionTemplate template : strategy.getPermissionTemplates()) {
+        templates.add(templateToJson(template));
+      }
+    }
+    result.put("templates", templates);
+    return result.toString();
+  }
+
+  private static JSONObject roleTypeToJson(@CheckForNull RoleBasedAuthorizationStrategy strategy, RoleType roleType,
+      boolean visible, boolean canEdit) {
+    JSONObject json = new JSONObject();
+    json.put("visible", visible);
+    json.put("canEdit", visible && canEdit);
+    JSONArray groups = new JSONArray();
+    JSONArray roles = new JSONArray();
+    if (visible && strategy != null) {
+      groups = permissionGroupsToJson(RoleBasedAuthorizationStrategy.DESCRIPTOR, roleType.getStringType());
+      for (Role role : strategy.getRoleMap(roleType).getRoles()) {
+        roles.add(roleToJson(role, roleType));
+      }
+    }
+    json.put("permissionGroups", groups);
+    json.put("roles", roles);
+    return json;
+  }
+
+  private static JSONObject roleToJson(Role role, RoleType roleType) {
+    JSONObject roleJson = new JSONObject();
+    roleJson.put("name", role.getName());
+    if (roleType != RoleType.Global) {
+      roleJson.put("pattern", role.getPattern().pattern());
+    }
+    String templateName = role.getTemplateName();
+    if (roleType == RoleType.Project && templateName != null && !templateName.isEmpty()) {
+      roleJson.put("templateName", templateName);
+    }
+    JSONArray permIds = new JSONArray();
+    for (Permission p : role.getPermissions()) {
+      permIds.add(p.getId());
+    }
+    roleJson.put("permissionIds", permIds);
+    return roleJson;
+  }
+
   private static JSONObject templateToJson(PermissionTemplate template) {
     JSONObject templateJson = new JSONObject();
     templateJson.put("name", template.getName());
diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-agent-roles.jelly b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-agent-roles.jelly
deleted file mode 100644
index 985e7606..00000000
--- a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-agent-roles.jelly
+++ /dev/null
@@ -1,71 +0,0 @@
-<!--
-  - The MIT License
-  -
-  - Copyright (c) 2013, Oleg Nenashev, Synopsys Inc.
-  -
-  - OriginalFile: manage-project-roles.jelly
-  - Thomas Maurel & Romain Seguy, Manufacture Française des Pneumatiques Michelin,
-  - 
-  -
-  - Permission is hereby granted, free of charge, to any person obtaining a copy
-  - of this software and associated documentation files (the "Software"), to deal
-  - in the Software without restriction, including without limitation the rights
-  - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  - copies of the Software, and to permit persons to whom the Software is
-  - furnished to do so, subject to the following conditions:
-  -
-  - The above copyright notice and this permission notice shall be included in
-  - all copies or substantial portions of the Software.
-  -
-  - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  - THE SOFTWARE.
-  -->
-<?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define"
-          xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:local="local">
-
-  <j:set var="agentGroups" value="${it.strategy.descriptor.getGroups(it.strategy.SLAVE)}"/>
-  <j:set var="agentGrantedRoles" value="${it.strategy.getGrantedRoles(it.strategy.SLAVE)}"/>
-  <j:set var="tableid" value="agentRoles"/>
-  <j:set var="neededPermission" value="${it.strategy.AGENT_ROLES_ADMIN}"/>
-
-  <table id="${tableid}" class="jenkins-table jenkins-table--small jenkins-table--auto-width role-strategy-table ${readOnlyMode ? 'read-only' : ''}" name="data">
-
-    <local:thead permissionGroups="${agentGroups}" showRoleName="${true}" showPattern="${true}" strategy="${it.strategy.SLAVE}" neededPermission="${neededPermission}"/>
-    <tbody>
-      <j:forEach var="role" items="${agentGrantedRoles}">
-        <tr name="[${role.key.name}]" class="permission-row highlight-row">
-          <local:roleRow title="${role.key.name}" pattern="${role.key.pattern}" role="${role.key}" showRoleName="${true}" showPattern="${true}" type="${it.strategy.SLAVE}"
-                         project="${false}" neededPermission="${neededPermission}"/>
-        </tr>
-      </j:forEach>
-    </tbody>
-    <local:tfoot permissionGroups="${agentGroups}" strategy="${it.strategy.SLAVE}" roles="${agentGrantedRoles}" showPattern="${true}" neededPermission="${neededPermission}"/>
-  </table>
-
-  <template id="newAgentRoleTemplate">
-    <tr class="permission-row highlight-row">
-      <local:roleRow title="{{ROLE}}" pattern="{{PATTERN}}" global="${false}" type="${it.strategy.SLAVE}" showRoleName="${true}" showPattern="${true}" neededPermission="${neededPermission}"/>
-    </tr>
-  </template>
-
-  <l:hasPermission permission="${neededPermission}">
-    <br/>
-    <f:entry title="${%Role to add}">
-      <a href="list-macros">${%View available macros}</a>
-      <f:textbox id="${tableid}text" />
-    </f:entry>
-    <f:entry help="${rootURL}/plugin/role-strategy/help/help-pattern.html" title="${%Pattern}">
-      <f:textbox id="${tableid}pattern" checkUrl="${descriptorPath}/checkPattern" checkDependsOn=""/>
-    </f:entry>
-    <f:entry>
-      <local:addButton id="newAgentRoleTemplate" tableid="${tableid}" highlighter="agentTableHighlighter"/>
-    </f:entry>
-  </l:hasPermission>
-
-</j:jelly>
diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles.jelly b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles.jelly
deleted file mode 100644
index d85fadae..00000000
--- a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles.jelly
+++ /dev/null
@@ -1,69 +0,0 @@
-<!--
-  - The MIT License
-  -
-  - Copyright (c) 2010-2011, Manufacture Française des Pneumatiques Michelin,
-  - Thomas Maurel, Romain Seguy
-  -
-  - Permission is hereby granted, free of charge, to any person obtaining a copy
-  - of this software and associated documentation files (the "Software"), to deal
-  - in the Software without restriction, including without limitation the rights
-  - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  - copies of the Software, and to permit persons to whom the Software is
-  - furnished to do so, subject to the following conditions:
-  -
-  - The above copyright notice and this permission notice shall be included in
-  - all copies or substantial portions of the Software.
-  -
-  - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  - THE SOFTWARE.
-  -->
-<?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define"
-          xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:local="local">
-
-  <j:set var="tableid" value="globalRoles"/>
-
-  <j:set var="globalPermissionGroups" value="${it.strategy.descriptor.getGroups(it.strategy.GLOBAL)}"/>
-  <j:set var="globalGrantedRoles" value="${it.strategy.getGrantedRoles(it.strategy.GLOBAL)}"/>
-  <j:set var="neededPermission" value="${app.ADMINISTER}"/>
-
-  <div id="globalRoleInputFilter" data-table-id="${tableid}" data-initial-size="${globalGrantedRoles.size()}" class="row-filter">
-    <f:entry title="${%Filter by Role}">
-      <input id="globalRoleInput" class="row-input-filter jenkins-input setting-input" data-table-id="${tableid}"/>
-    </f:entry>
-  </div>
-  <table id="${tableid}" class="jenkins-table jenkins-table--small jenkins-table--auto-width center-align role-strategy-table ${readOnlyMode ? 'read-only' : ''}" name="data">
-
-      <!-- The first row shows grouping -->
-    <local:thead permissionGroups="${globalPermissionGroups}" showRoleName="${true}" showPattern="${false}" strategy="${it.strategy.GLOBAL}" neededPermission="${neededPermission}"/>
-    <tbody>
-      <j:forEach var="role" items="${globalGrantedRoles}">
-        <tr name="[${role.key.name}]" class="permission-row highlight-row">
-          <local:roleRow title="${role.key.name}" role="${role.key}" showRoleName="${true}" showPattern="${false}" type="${it.strategy.GLOBAL}" neededPermission="${neededPermission}"/>
-        </tr>
-      </j:forEach>
-    </tbody>
-    <local:tfoot permissionGroups="${globalPermissionGroups}" strategy="${it.strategy.GLOBAL}" roles="${globalGrantedRoles}" showPattern="${false}" neededPermission="${neededPermission}"/>
-  </table>
-
-  <template id="newGlobalRoleTemplate">
-    <tr class="permission-row highlight-row">
-      <local:roleRow title="{{ROLE}}" global="${true}" type="${it.strategy.GLOBAL}" showRoleName="${true}" showPattern="${false}" neededPermission="${neededPermission}"/>
-    </tr>
-  </template>
-
-  <l:hasPermission permission="${app.ADMINISTER}">
-    <br />
-    <f:entry title="${%Role to add}">
-      <f:textbox id="${tableid}text" />
-    </f:entry>
-    <f:entry>
-      <local:addButton id="newGlobalRoleTemplate" tableid="${tableid}" highlighter="globalTableHighlighter"/>
-    </f:entry>
-  </l:hasPermission>
-</j:jelly>
diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles_fr.properties b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles_fr.properties
deleted file mode 100644
index c3bae8bb..00000000
--- a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-global-roles_fr.properties
+++ /dev/null
@@ -1,25 +0,0 @@
-# The MIT License
-#
-# Copyright (c) 2010-2011, Manufacture Fran\u00e7aise des Pneumatiques Michelin, Thomas Maurel
-#
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-#
-# The above copyright notice and this permission notice shall be included in
-# all copies or substantial portions of the Software.
-#
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-# THE SOFTWARE.
-
-Role=R\u00f4le
-Role\ to\ add=R\u00f4le \u00e0 ajouter
-Add=Ajouter
\ No newline at end of file
diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles.jelly b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles.jelly
deleted file mode 100644
index 6fcdc86d..00000000
--- a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles.jelly
+++ /dev/null
@@ -1,105 +0,0 @@
-<!--
-  - The MIT License
-  -
-  - Copyright (c) 2010-2011, Manufacture Française des Pneumatiques Michelin,
-  - Thomas Maurel, Romain Seguy
-  -
-  - Permission is hereby granted, free of charge, to any person obtaining a copy
-  - of this software and associated documentation files (the "Software"), to deal
-  - in the Software without restriction, including without limitation the rights
-  - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  - copies of the Software, and to permit persons to whom the Software is
-  - furnished to do so, subject to the following conditions:
-  -
-  - The above copyright notice and this permission notice shall be included in
-  - all copies or substantial portions of the Software.
-  -
-  - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  - THE SOFTWARE.
-  -->
-<?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define"
-          xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:local="local" xmlns:rs="/lib/rolestrategy">
-
-  <j:set var="itemPermissionGroups" value="${it.strategy.descriptor.getGroups(it.strategy.PROJECT)}"/>
-  <j:set var="itemGrantedRoles" value="${it.strategy.getGrantedRolesEntries(it.strategy.PROJECT)}"/>
-  <j:set var="tableid" value="projectRoles"/>
-  <j:set var="neededPermission" value="${it.strategy.ITEM_ROLES_ADMIN}"/>
-
-  <div id="itemRoleInputFilter" data-table-id="${tableid}" data-initial-size="${itemGrantedRoles.size()}" class="row-filter">
-    <f:entry title="${%Filter by Role}">
-      <input id="itemRoleInput" class="row-input-filter jenkins-input setting-input" data-table-id="${tableid}"/>
-    </f:entry>
-  </div>
-  <table id="${tableid}" class="jenkins-table jenkins-table--small jenkins-table--auto-width role-strategy-table ${readOnlyMode ? 'read-only' : ''}" name="data">
-
-    <local:thead permissionGroups="${itemPermissionGroups}" showRoleName="${true}" showPattern="${true}" showTemplate="${true}"
-                 strategy="${it.strategy.PROJECT}" neededPermission="${neededPermission}"/>
-    <tbody>
-      <j:forEach var="role" items="${itemGrantedRoles}">
-        <tr name="[${role.key.name}]" class="permission-row highlight-row">
-          <local:roleRow title="${role.key.name}" pattern="${role.key.pattern}" role="${role.key}"
-                         disable="${role.key.templateName != null and role.key.templateName != ''}"
-                         showRoleName="${true}" showPattern="${true}" showTemplate="${true}"
-                         type="${it.strategy.PROJECT}"
-                         templateName="${role.key.templateName}"
-                         project="${true}" neededPermission="${neededPermission}"/>
-        </tr>
-      </j:forEach>
-    </tbody>
-    <local:tfoot permissionGroups="${itemPermissionGroups}" strategy="${it.strategy.PROJECT}" roles="${itemGrantedRoles}"
-                 showPattern="${true}" showTemplate="${true}" neededPermission="${neededPermission}"/>
-
-  </table>
-
-  <template id="newItemRoleTemplate">
-    <tr class="permission-row highlight-row">
-      <local:roleRow title="{{ROLE}}" global="${false}" pattern="{{PATTERN}}" type="${it.strategy.PROJECT}" templateName=""
-                     showRoleName="${true}" showPattern="${true}" showTemplate="${true}" neededPermission="${neededPermission}" />
-    </tr>
-  </template>
-
-  <l:hasPermission permission="${neededPermission}">
-    <br />
-    <f:entry title="${%Role to add}">
-      <a href="list-macros">${%View available macros}</a>
-      <f:textbox id="${tableid}text" />
-    </f:entry>
-    <f:entry help="${rootURL}/plugin/role-strategy/help/help-pattern.html" title="${%Pattern}">
-      <f:textbox id="${tableid}pattern" checkUrl="${descriptorPath}/checkPattern" checkDependsOn=""/>
-    </f:entry>
-    <f:entry>
-      <rs:dropdownList title="Permission Template" name="template" id="${tableid}template">
-        <f:dropdownListBlock title="None" selected="true" value="">
-        </f:dropdownListBlock>
-        <j:forEach var="permissionTemplate" items="${it.strategy.getPermissionTemplates()}">
-          <f:dropdownListBlock title="${permissionTemplate.getName()}" selected="false" value="${permissionTemplate.getName()}">
-            <table id="${tableid}" class="jenkins-table jenkins-table--small jenkins-table--auto-width center-align role-strategy-table ${readOnlyMode ? 'read-only' : ''}" style="display:none">
-            <local:thead permissionGroups="${itemPermissionGroups}" strategy="${it.strategy.PROJECT}" neededPermission="${neededPermission}"/>
-            <tr>
-              <local:roleRow title="" role="${permissionTemplate}" disable="${true}" showRoleName="${false}" showPattern="${false}" type="${it.strategy.PROJECT}"
-                             project="${true}" neededPermission="${neededPermission}"/>
-            </tr>
-            </table>
-            <template id="newItemRoleTemplate-${permissionTemplate.getName()}">
-              <tr class="permission-row highlight-row">
-                <local:roleRow title="{{ROLE}}" role="${permissionTemplate}" global="${false}" pattern="{{PATTERN}}"
-                               type="${it.strategy.PROJECT}"
-                               showRoleName="${true}" showPattern="${true}" disable="${true}" showTemplate="${true}"
-                               templateName="${permissionTemplate.name}" neededPermission="${neededPermission}"/>
-              </tr>
-            </template>
-          </f:dropdownListBlock>
-        </j:forEach>
-      </rs:dropdownList>
-    </f:entry>
-    <f:entry>
-      <local:addButton id="newItemRoleTemplate" tableid="${tableid}" highlighter="projectTableHighlighter"/>
-    </f:entry>
-  </l:hasPermission>
-</j:jelly>
diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles_fr.properties b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles_fr.properties
deleted file mode 100644
index 2df391cd..00000000
--- a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-project-roles_fr.properties
+++ /dev/null
@@ -1,26 +0,0 @@
-# The MIT License
-#
-# Copyright (c) 2010-2011, Manufacture Fran\u00e7aise des Pneumatiques Michelin, Thomas Maurel
-#
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-#
-# The above copyright notice and this permission notice shall be included in
-# all copies or substantial portions of the Software.
-#
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-# THE SOFTWARE.
-
-Pattern=Patron
-Role=R\u00f4le
-Role\ to\ add=R\u00f4le \u00e0 ajouter
-Add=Ajouter
\ No newline at end of file
diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly
index abca6837..11658246 100644
--- a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly
+++ b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly
@@ -26,227 +26,37 @@
   - THE SOFTWARE.
   -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define"
-         xmlns:l="/lib/layout" xmlns:f="/lib/form" xmlns:local="local">
-    <l:layout permissions="${it.strategy.SYSTEM_READ_AND_SOME_ROLES_ADMIN}" type="one-column" title="${%Roles}">
-      <l:breadcrumb title="Manage Roles"/>
-        <l:main-panel>
-          <link rel="stylesheet" href="${rootURL}/plugin/role-strategy/css/role-strategy.css" type="text/css" />
-          <script type="text/javascript" src="${rootURL}/plugin/role-strategy/js/table.js" />
-          <script type="text/javascript" src="${rootURL}/plugin/role-strategy/js/tableManage.js" />
-
-          <j:if test="${empty(descriptorPath)}">
-            <j:set var="descriptorPath" value="${rootURL}/descriptor/${it.strategy.descriptor.clazz.name}"/>
-          </j:if>
-
-          <d:taglib uri="local">
-            <d:tag name="thead">
-              <thead>
-                <tr class="group-row">
-                  <j:if test="${attrs.showRoleName}">
-                    <l:hasPermission permission="${attrs.neededPermission}"><td rowspan="2" class="start" /></l:hasPermission>
-                    <th rowspan="2" class="rsp-table__header-column">
-                      ${%Role}
-                    </th>
-                  </j:if>
-                  <j:if test="${attrs.showPattern}">
-                    <th rowspan="2" class="rsp-table__header-column">
-                      ${%Pattern}
-                    </th>
-                  </j:if>
-                  <j:if test="${attrs.showTemplate}">
-                    <th rowspan="2" class="rsp-table__header-column">
-                      ${%Template}
-                    </th>
-                  </j:if>
-                  <j:forEach var="g" items="${attrs.permissionGroups}" varStatus="s">
-                    <j:set var="cnt" value="${0}" />
-                    <j:forEach var="p" items="${g.permissions}">
-                      <j:if test="${it.strategy.descriptor.showPermission(attrs.strategy, p)}">
-                        <j:set var="cnt" value="${cnt+1}"/>
-                      </j:if>
-                    </j:forEach>
-
-                    <th colspan="${cnt}" class="rsp-table--header-th ${s.first ? 'first' : ''} ${s.last ? 'last' : ''}">
-                      ${g.title}
-                    </th>
-                  </j:forEach>
-                  <j:if test="${attrs.showRoleName != 'false'}">
-                    <l:hasPermission permission="${attrs.neededPermission}"><td rowspan="2" class="stop" /></l:hasPermission>
-                  </j:if>
-                </tr>
-                <!-- The second row for individual permission -->
-                <tr class="caption-row highlight-row">
-                  <j:forEach var="g" items="${attrs.permissionGroups}">
-                    <j:forEach var="p" items="${g.permissions}">
-                      <j:if test="${it.strategy.descriptor.showPermission(attrs.strategy, p)}">
-                        <th tooltip="${p.description}" class="rsp-table__permission">
-                          <span>${p.name}</span>
-                        </th>
-                      </j:if>
-                    </j:forEach>
-                  </j:forEach>
-                </tr>
-              </thead>
-            </d:tag>
-            <d:tag name="tfoot">
-              <j:set var="hidefooter" value=""/>
-              <j:if test="${attrs.roles.size() lt 20}">
-                <j:set var="hidefooter" value="default-hidden"/>
-              </j:if>
-              <tfoot class="${hidefooter}">
-                <tr class="caption-row highlight-row">
-                  <l:hasPermission permission="${attrs.neededPermission}"><td rowspan="2" class="start" /></l:hasPermission>
-                  <th rowspan="2" class="rsp-table__footer-column">
-                    ${%Role}
-                  </th>
-                  <j:if test="${attrs.showPattern}">
-                    <th rowspan="2" class="rsp-table__footer-column">
-                      ${%Pattern}
-                    </th>
-                  </j:if>
-                  <j:if test="${attrs.showTemplate}">
-                    <th rowspan="2" class="rsp-table__footer-column">
-                      ${%Template}
-                    </th>
-                  </j:if>
-                  <j:forEach var="g" items="${attrs.permissionGroups}">
-                    <j:forEach var="p" items="${g.permissions}">
-                      <j:if test="${it.strategy.descriptor.showPermission(attrs.strategy, p)}">
-                        <th tooltip="${p.description}" class="rsp-table__permission rsp-table__permission-footer">
-                          <span>${p.name}</span>
-                        </th>
-                      </j:if>
-                    </j:forEach>
-                  </j:forEach>
-                </tr>
-                <tr class="group-row">
-                  <j:forEach var="g" items="${attrs.permissionGroups}" varStatus="s">
-                    <j:set var="cnt" value="${0}" />
-                    <j:forEach var="p" items="${g.permissions}">
-                      <j:if test="${it.strategy.descriptor.showPermission(attrs.strategy, p)}">
-                        <j:set var="cnt" value="${cnt+1}"/>
-                      </j:if>
-                    </j:forEach>
-
-                    <th colspan="${cnt}" class="rsp-table--header-th ${s.first ? 'first' : ''} ${s.last ? 'last' : ''}">
-                      ${g.title}
-                    </th>
-                  </j:forEach>
-                </tr>
-              </tfoot>
-            </d:tag>
-            <d:tag name="addButton">
-              <button type="button" class="jenkins-button role-strategy-add-button" data-template-id="${id}" data-table-id="${attrs.tableid}" data-highlighter="${attrs.highlighter}">${%Add}</button>
-            </d:tag>
-            <d:tag name="roleRow">
-              <j:if test="${attrs.showRoleName}">
-                <l:hasPermission permission="${attrs.neededPermission}">
-                  <td class="start">
-                    <div class="rsp-remove">
-                      <l:icon src="symbol-trash-outline plugin-ionicons-api" class="icon-sm icon-red rsp-table__icon"/>
-                    </div>
-                  </td>
-                </l:hasPermission>
-                <td class="left-most" style="white-space: nowrap;">${title}</td>
-              </j:if>
-              <j:set var="pattern" value=""/>
-              <j:set var="patternTemplate" value=""/>
-              <j:if test="${attrs.showPattern}">
-                <j:set var="pattern" value="&lt;br/&gt; &lt;b&gt;Pattern&lt;/b&gt;: ${attrs.pattern}"/>
-                <j:set var="patternTemplate" value="&lt;br/&gt; &lt;b&gt;Pattern&lt;/b&gt;: {{PATTERNTEMPLATE}}"/>
-                <j:if test="${attrs.pattern != '{{PATTERN}}'}">
-                  <j:set var="pattern" value="&lt;br/&gt; &lt;b&gt;Pattern&lt;/b&gt;: ${h.escape(attrs.role.pattern.toString())}"/>
-                </j:if>
-                <td>
-                  <div class="pattern-cell">
-                      <l:icon src="symbol-pencil plugin-ionicons-api" class="icon-pencil icon-sm" tooltip="Edit pattern"/>
-                      <span data-edit="false">
-                        <div class="patternAnchor" data-pattern="${attrs.role.pattern}" tooltip="Show matching">&quot;${attrs.role.pattern.toString()}&quot;</div>
-                        <input class="patternEdit" type="hidden" name="[pattern]" value="${attrs.role.pattern}" />
-                      </span>
-                  </div>
-
-                </td>
-                <j:if test="${attrs.showTemplate}">
-                  <td>
-                    <div class="pattern-cell">
-                      ${attrs.templateName}
-                      <input type="hidden" name="templateName" value="${attrs.templateName}" disabled="true"/>
-                    </div>
-                  </td>
-                </j:if>
-              </j:if>
-
-              <j:set var="tableItems" value="${it.strategy.descriptor.getGroups(attrs.type)}"/>
-              <j:forEach var="g" items="${tableItems}">
-                <j:forEach var="p" items="${g.permissions}">
-                  <j:if test="${it.strategy.descriptor.showPermission(attrs.type, p)}">
-                    <td
-                        class="rsp-highlight-input permissionInput"
-                        data-implied-by-list="${it.strategy.descriptor.impliedByList(p)}"
-                        data-permission-id="${p.id}"
-                        data-disable-checkboxes="${attrs.disable}"
-                        data-tooltip-template="&lt;b&gt;Permission&lt;/b&gt;: ${g.title}/${p.name}{{GRANTBYOTHER}} &lt;br/&gt; &lt;b&gt;Role&lt;/b&gt;: ${h.escape(attrs.title)} ${patternTemplate}">
-                      <f:checkbox name="[${p.id}]" checked="${attrs.role.hasPermission(p)}"/>
-                    </td>
-                  </j:if>
-                </j:forEach>
-              </j:forEach>
-              <j:if test="${attrs.showRoleName}">
-                <l:hasPermission permission="${attrs.neededPermission}">
-                  <td class="stop">
-                    <div class="rsp-remove">
-                      <l:icon src="symbol-trash-outline plugin-ionicons-api" class="icon-sm icon-red rsp-table__icon" htmlTooltip="&lt;b&gt;Role&lt;/b&gt;: ${h.escape(attrs.title)}"/>
-                    </div>
-                  </td>
-                </l:hasPermission>
-              </j:if>
-            </d:tag>
-          </d:taglib>
-
-          <l:app-bar title="${%Roles}">
-              <a href="permission-templates" class="jenkins-button">
-                ${%Permission Templates}
-              </a>
-          </l:app-bar>
-
-          <f:form method="post" name="config" action="rolesSubmit">
-            <button class="default-hidden" id="rs-dirty-indicator"/>
-
-            <j:if test="${app.hasPermission(app.SYSTEM_READ)}">
-              <f:section title="${%Global roles}">
-                <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}" />
-                <f:rowSet name="globalRoles">
-                  <f:block><st:include page="manage-global-roles.jelly" optional="true" /></f:block>
-                </f:rowSet>
-              </f:section>
-            </j:if>
-            <j:if test="${app.hasPermission(it.strategy.ITEM_ROLES_ADMIN) or app.hasPermission(app.SYSTEM_READ)}">
-              <f:section title="${%Item roles}">
-                <j:set var="readOnlyMode" value="${!app.hasPermission(it.strategy.ITEM_ROLES_ADMIN)}" />
-                <f:rowSet name="projectRoles">
-                  <f:block><st:include page="manage-project-roles.jelly" optional="true" /></f:block>
-                </f:rowSet>
-              </f:section>
-            </j:if>
-            <j:if test="${app.hasPermission(it.strategy.AGENT_ROLES_ADMIN) or app.hasPermission(app.SYSTEM_READ)}">
-              <f:section title="${%Agent roles}">
-                <j:set var="readOnlyMode" value="${!app.hasPermission(it.strategy.AGENT_ROLES_ADMIN)}" />
-                <f:rowSet name="slaveRoles">
-                  <f:block><st:include page="manage-agent-roles.jelly" optional="true" /></f:block>
-                </f:rowSet>
-              </f:section>
-            </j:if>
-            <j:if test="${app.hasAnyPermission(it.strategy.ADMINISTER_AND_SOME_ROLES_ADMIN)}">
-              <f:bottomButtonBar>
-                <f:submit value="${%Save}" />
-                <f:apply />
-              </f:bottomButtonBar>
-            </j:if>
-          </f:form>
-          <div class="overlay default-hidden"/>
-          <st:adjunct includes="lib.form.confirm" />
-        </l:main-panel>
-    </l:layout>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler"
+         xmlns:l="/lib/layout">
+  <j:set var="header">
+    <l:view>
+      <l:app-bar title="${%Roles}">
+        <a href="permission-templates" class="jenkins-button">
+          ${%Permission Templates}
+        </a>
+        <j:if test="${app.hasAnyPermission(it.strategy.ADMINISTER_AND_SOME_ROLES_ADMIN)}">
+          <button type="button" class="jenkins-button jenkins-button--primary" id="rsp-add-role-btn">
+            <l:icon src="symbol-add plugin-ionicons-api"/>
+            ${%Add Role}
+          </button>
+        </j:if>
+      </l:app-bar>
+      <p class="jenkins-page-description">
+        ${%blurb}
+      </p>
+    </l:view>
+  </j:set>
+  <l:settings-subpage permissions="${it.strategy.SYSTEM_READ_AND_SOME_ROLES_ADMIN}"
+                      title="${%Roles}"
+                      noDefer="true"
+                      includeBreadcrumb="true"
+                      header="${header}">
+    <div id="manage-roles-root"
+         data-resource-url="${resURL}"
+         data-root-url="${rootURL}"
+         data-strategy-url="${rootURL}/role-strategy/strategy"
+         data-check-pattern-url="${rootURL}/descriptor/${it.strategy.descriptor.clazz.name}/checkPattern"
+         data-bootstrap="${it.manageRolesBootstrapJson}"/>
+    <script src="${resURL}/plugin/role-strategy/js/bundles/manage-roles-bundle.js" type="module"/>
+  </l:settings-subpage>
 </j:jelly>
diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.properties b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.properties
new file mode 100644
index 00000000..f98310ef
--- /dev/null
+++ b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.properties
@@ -0,0 +1,2 @@
+blurb=Roles grant permissions Jenkins-wide (global roles), on items matching a pattern (item roles), \
+  or on agents matching a pattern (agent roles). Assign users and groups to roles on the Assign Roles page.
diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles_fr.properties b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles_fr.properties
deleted file mode 100644
index 842a9494..00000000
--- a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles_fr.properties
+++ /dev/null
@@ -1,26 +0,0 @@
-# The MIT License
-#
-# Copyright (c) 2010-2011, Manufacture Fran\u00e7aise des Pneumatiques Michelin, Thomas Maurel
-#
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-#
-# The above copyright notice and this permission notice shall be included in
-# all copies or substantial portions of the Software.
-#
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-# THE SOFTWARE.
-
-Global\ roles=R\u00f4les globaux
-Item\ roles=R\u00f4les de projets
-Agent\ roles=R\u00f4les d`agent
-Save=Enregistrer
\ No newline at end of file
diff --git a/src/main/webapp/js/tableManage.js b/src/main/webapp/js/tableManage.js
deleted file mode 100644
index 06d88a3f..00000000
--- a/src/main/webapp/js/tableManage.js
+++ /dev/null
@@ -1,462 +0,0 @@
-/*
- * The MIT License
- *
- * Copyright (c) 2022, Markus Winter
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-// number of lines required for the role filter to get enabled
-var filterLimit = 10;
-// number of lines required for the footer to get displayed
-var footerLimit = 20;
-var globalTableHighlighter;
-var newGlobalRoleTemplate;
-var projectTableHighlighter;
-var newItemRoleTemplate;
-var agentTableHighlighter;
-var newAgentRoleTemplate;
-
-
-function filterRows(filter, table) {
-  for (let row of table.tBodies[0].rows) {
-    let userCell = row.cells[1].textContent.toUpperCase();
-    if (userCell.indexOf(filter) > -1) {
-      row.style.display = "";
-    } else {
-      row.style.display = "none";
-    }
-  }
-}
-
-
-getPattern = function(row) {
-  let pattern = "";
-  patternEditInputs = row.getElementsByClassName("patternEdit");
-  if (patternEditInputs.length > 0) {
-    pattern = patternEditInputs[0].value;
-  }
-  return pattern;
-}
-
-
-Behaviour.specify(".row-input-filter", "RoleBasedAuthorizationStrategy", 0, function(e) {
-  e.onkeyup = debounce((event) => {
-    if (ignoreKeys(event.code)) {
-      return;
-    }
-    let filter = e.value.toUpperCase();
-    let table = document.getElementById(e.getAttribute("data-table-id"));
-    filterRows(filter, table);
-  });
-});
-
-
-Behaviour.specify("svg.icon-pencil", 'RoleBasedAuthorizationStrategy', 0, function(e) {
-  e.onclick = handlePatternEdit;
-});
-
-handlePatternEdit = function() {
-  let span = this.nextSibling;
-  div = span.childNodes[0];
-  input = span.childNodes[1];
-  if (span.getAttribute("data-edit") === "false") {
-    span.setAttribute("data-edit", "true");
-    div.style.display = "none";
-    input.type = "text";
-    input.setAttribute("size", input.value.length);
-    input.onkeydown = handleKey;
-    const end = input.value.length;
-    input.setSelectionRange(end, end);
-    input.focus();
-  } else {
-    endPatternInput(span, false);
-    this.blur();
-  }
-  return false;
-}
-
-handleKey = function(e) {
-  let key = e.key || 0;
-  if (key == "Enter" || key === "Escape") {
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    let span = e.target.parentNode;
-    endPatternInput(span, key === "Escape");
-  }
-};
-
-
-endPatternInput = function(span, cancel) {
-  let div = span.childNodes[0];
-  let input = span.childNodes[1];
-  let pattern = input.value;
-  let table = span.closest("TABLE");
-  input.type = "hidden";
-  div.style.display = "block";
-  span.setAttribute("data-edit", "false");
-  if (cancel) {
-    input.value = div.getAttribute("data-pattern");
-  } else {
-    div.setAttribute("data-pattern", pattern);
-    div.textContent = '"' + pattern + '"'
-    let row = span.closest("TR");
-    for (td of row.getElementsByClassName('permissionInput')) {
-      updateTooltip(row, td, pattern);
-    }
-    Behaviour.applySubtree(row, true);
-  }
-}
-
-
-updateTooltip = function(tr, td, pattern) {
-  let tooltipTemplate = td.getAttribute("data-tooltip-template");
-  let impliedByString = td.getAttribute('data-implied-by-list');
-  let impliedByList = impliedByString.split(" ");
-  let input = td.getElementsByTagName('INPUT')[0];
-  input.disabled = false;
-  let disableCheckboxes = td.getAttribute("data-disable-checkboxes");
-  if (disableCheckboxes === 'true') {
-    input.disabled = true;
-  }
-
-  let tooltip = tooltipTemplate.replace("{{PATTERNTEMPLATE}}", escapeHTML(pattern)).replace("{{GRANTBYOTHER}}", "");
-  input.nextSibling.setAttribute("data-html-tooltip", tooltip);
-
-  for (let permissionId of impliedByList) {
-    let reference = tr.querySelector("td[data-permission-id='" + permissionId + "'] input");
-    if (reference !== null) {
-      if (reference.checked) {
-        input.disabled = true;
-        tooltip = tooltipTemplate.replace("{{PATTERNTEMPLATE}}", escapeHTML(pattern)).replace("{{GRANTBYOTHER}}", " is granted through another permission");;
-        input.nextSibling.setAttribute("data-html-tooltip", tooltip); // 2.335+
-      }
-    }
-  }
-
-  if (window.registerTooltips) {
-    window.registerTooltips(e.nextSibling.parentElement);
-  }
-}
-
-
-Behaviour.specify(
-  ".role-strategy-add-button", "RoleBasedAuthorizationStrategy", 0,
-  function(elem) {
-    elem.onclick = function(e) {
-      let tableId = elem.getAttribute("data-table-id");
-      let table = document.getElementById(tableId);
-      let templateId = elem.getAttribute("data-template-id");
-      let highlighter = window[elem.getAttribute("data-highlighter")];
-      addButtonAction(e, templateId, table, highlighter, tableId);
-      let tbody = table.tBodies[0];
-      if (tbody.children.length >= filterLimit) {
-        let rolefilters = document.querySelectorAll(".row-filter");
-        for (let filter of rolefilters) {
-          if (filter.getAttribute("data-table-id") === tableId) {
-            filter.style.display = "block";
-          }
-        }
-      }
-      if (tbody.children.length >= footerLimit) {
-        table.tFoot.style.display = "table-footer-group";
-      }
-    }
-  }
-);
-
-addButtonAction = function(e, templateId, table, tableHighlighter, tableId) {
-  let tbody = table.tBodies[0];
-  let roleInput = document.getElementById(tableId + 'text')
-  let name = roleInput.value.trim();
-  if (name == "") {
-    alert("Please enter a role name");
-    return;
-  }
-  if (findElementsBySelector(tbody, "TR").find(function(n) {
-      return n.getAttribute("name") == '[' + name + ']';
-    }) != null) {
-    alert("Entry for '" + name + "' already exists");
-    return;
-  }
-  let pattern = "";
-  let template = window[templateId].content.firstElementChild.cloneNode(true);
-  let templateName = "";
-
-  if (tableId !== "globalRoles") {
-    let patternInput = document.getElementById(tableId + 'pattern')
-    pattern = patternInput.value;
-    if (pattern == "") {
-      alert("Please enter a pattern");
-      return;
-    }
-    if (tableId === "projectRoles") {
-      let templateSelect = document.getElementById(tableId + 'template');
-      let templateName = templateSelect.value;
-      if (templateName !== '') {
-        template = window[templateId + "-" + templateName].content.firstElementChild.cloneNode(true);
-      }
-    }
-  }
-
-  let copy = document.importNode(template, true);
-  let child = copy.childNodes[1];
-  child.textContent = name;
-  if (tableId !== "globalRoles") {
-    let doubleQuote = '"';
-    copy.getElementsByClassName("patternAnchor")[0].textContent = doubleQuote + pattern + doubleQuote;
-    copy.getElementsByClassName("patternEdit")[0].value = pattern;
-  }
-
-  let children = copy.childNodes
-  children.forEach(function(item){
-    item.outerHTML= item.outerHTML.replace(/{{ROLE}}/g, doubleEscapeHTML(name)).replace(/{{PATTERN}}/g, doubleEscapeHTML(pattern));
-  });
-
-  if (tableId !== "globalRoles") {
-    spanElement = copy.childNodes[2].childNodes[0].childNodes[1];
-    if (tableId === "projectRoles") {
-      bindListenerToPattern(spanElement.childNodes[0]);
-    } else {
-      bindAgentListenerToPattern(spanElement.childNodes[0]);
-    }
-  }
-
-  copy.setAttribute("name", '[' + name + ']');
-  if (tableId !== "globalRoles") {
-    copy.querySelector("svg.icon-pencil").onclick = handlePatternEdit;
-  }
-  tbody.appendChild(copy);
-  tableHighlighter.scan(copy);
-  Behaviour.applySubtree(copy.closest("TABLE"), true);
-}
-
-
-Behaviour.specify(".role-strategy-table .rsp-remove", 'RoleBasedAuthorizationStrategy', 0, function(e) {
-  e.onclick = function() {
-    let table = this.closest("TABLE");
-    let tableId = table.getAttribute("id");
-    let tr = this.closest("TR");
-    parent = tr.parentNode;
-    parent.removeChild(tr);
-    if (parent.children.length < filterLimit) {
-      let userfilters = document.querySelectorAll(".row-filter")
-      for (let filter of userfilters) {
-        if (filter.getAttribute("data-table-id") === tableId) {
-          filter.style.display = "none";
-          let inputs = filter.getElementsByTagName("INPUT");
-          inputs[0].value = ""
-          let event = new Event("keyup");
-          inputs[0].dispatchEvent(event);
-        }
-      }
-    }
-    if (parent.children.length < footerLimit) {
-      table.tFoot.style.display = "none";
-    }
-    let dirtyButton = document.getElementById("rs-dirty-indicator");
-    dirtyButton.dispatchEvent(new Event('click'));
-    return false;
-  }
-});
-
-Behaviour.specify(".role-strategy-table td.permissionInput input", 'RoleBasedAuthorizationStrategy', 0, function(e) {
-  let table = e.closest("TABLE");
-  if (table.classList.contains('read-only')) {
-    // if this is a read-only UI (ExtendedRead / SystemRead), do not enable checkboxes
-    return;
-  }
-
-  let row = e.closest("TR");
-  let pattern = getPattern(row);
-  let td = e.closest("TD");
-  updateTooltip(row, td, pattern);
-  e.onchange = function() {
-    Behaviour.applySubtree(row.closest("TABLE"), true);
-    return true;
-  };
-});
-
-
-// methods for item roles
-showMatchingProjects = function() {
-  let pattern = this.textContent.substring(1, this.textContent.length - 1); // Ignore quotes for the pattern
-  let maxItems = 15; // Maximum items to search for
-  let url = 'strategy/getMatchingJobs';
-  reqParams = {
-    'pattern': pattern,
-    'maxJobs': maxItems
-  }
-
-  fetch(url + toQueryString(reqParams)).then((rsp) => {
-    if (rsp.ok) {
-      rsp.json().then((responseJson) => {
-        let matchingItems = responseJson.matchingJobs;
-        let itemCount = responseJson.itemCount;
-
-        if (matchingItems != null) {
-          showItemsModal(matchingItems, itemCount, maxItems, pattern);
-        } else {
-          showErrorMessageModal();
-        }
-      });
-    } else {
-      showErrorMessageModal();
-    }
-  });
-}
-
-showItemsModal = function(items, itemCount, maxItems, pattern) {
-  let modalTitle = '';
-
-  if (items.length > 0) {
-    if (itemCount > items.length) {
-      modalTitle += 'First ' + maxItems + ' items (out of ' + itemCount + ') matching';
-    } else {
-      modalTitle += 'Items matching';
-    }
-  } else {
-    modalTitle = 'No items found matching';
-  }
-  modalTitle += ' "' + pattern + '"';
-  showModal(modalTitle, items)
-}
-
-showErrorMessageModal = function() {
-  dialog.alert('Unable to fetch matching Jobs.');
-}
-
-bindListenerToPattern = function(elem) {
-  elem.addEventListener('click', showMatchingProjects);
-}
-
-
-// methods for agent roles
-showMatchingAgents = function() {
-  let pattern = this.textContent.substring(1, this.textContent.length - 1); // Ignore quotes for the pattern
-  let maxAgents = 10; // Maximum agents to search for
-  let url = 'strategy/getMatchingAgents';
-  reqParams = {
-    'pattern': pattern,
-    'maxAgents': maxAgents
-  }
-
-  fetch(url + toQueryString(reqParams)).then((rsp) => {
-    if (rsp.ok) {
-      rsp.json().then((responseJson) => {
-        let matchingAgents = responseJson.matchingAgents;
-        let agentCount = responseJson.itemCount;
-
-        if (matchingAgents != null) {
-          showAgentsModal(matchingAgents, agentCount, maxAgents, pattern);
-        } else {
-          showAgentErrorMessageModal();
-        }
-      });
-    } else {
-      showAgentErrorMessageModal();
-    }
-  });
-}
-
-showAgentsModal = function(agents, agentCount, maxAgents, pattern) {
-  let modalTitle = '';
-  if (agents.length > 0) {
-    if (agentCount > agents.length) {
-      modalTitle += 'First ' + maxAgents + ' agents (out of ' + agentCount + ') matching';
-    } else {
-      modalTitle += 'Agents matching';
-    }
-  } else {
-    modalTitle += 'No Agents found matching';
-  }
-  modalTitle += ' "' + pattern + '"';
-  showModal(modalTitle, agents)
-}
-
-showModal = function(title, itemlist) {
-  messageElement=document.createElement("div");
-  for (let item of itemlist) {
-    line = document.createTextNode("- " + item);
-    messageElement.appendChild(line);
-    messageElement.appendChild(document.createElement("br"));
-  }
-  dialog.modal(messageElement, {title: title});
-}
-
-showAgentErrorMessageModal = function() {
-  dialogalert('Unable to fetch matching Agents.');
-}
-
-bindAgentListenerToPattern = function(elem) {
-  elem.addEventListener('click', showMatchingAgents);
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-
-  // global roles initialization
-  const globalTable = document.getElementById("globalRoles");
-  if (globalTable) {
-    const readOnly = globalTable.classList.contains("read-only");
-
-    let globalRoleInputFilter = document.getElementById('globalRoleInputFilter');
-    if (globalRoleInputFilter && parseInt(globalRoleInputFilter.getAttribute("data-initial-size")) >= filterLimit) {
-      globalRoleInputFilter.style.display = "block"
-    }
-    newGlobalRoleTemplate = document.getElementById('newGlobalRoleTemplate');
-
-    globalTableHighlighter = new TableHighlighter('globalRoles', readOnly ? 1 : 2);
-  }
-
-  // item roles initialization
-  const projectRolesTable = document.getElementById('projectRoles');
-  if (projectRolesTable) {
-    const readOnly = projectRolesTable.classList.contains("read-only");
-
-    let itemRoleInputFilter = document.getElementById('itemRoleInputFilter');
-    if (itemRoleInputFilter && parseInt(itemRoleInputFilter.getAttribute("data-initial-size")) >= filterLimit ) {
-      itemRoleInputFilter.style.display = "block"
-    }
-
-    newItemRoleTemplate = document.getElementById('newItemRoleTemplate');
-
-    projectTableHighlighter = new TableHighlighter('projectRoles', readOnly ? 3 : 4);
-
-    // Show jobs matching a pattern on click
-    let itemPatterns = projectRolesTable.getElementsByClassName('patternAnchor');
-    for (let pattern of itemPatterns) {
-      bindListenerToPattern(pattern);
-    }
-  }
-
-  // agent roles initialization
-  const agentRolesTable = document.getElementById('agentRoles');
-  if (agentRolesTable) {
-    const readOnly = agentRolesTable.classList.contains("read-only");
-
-    newAgentRoleTemplate = document.getElementById('newAgentRoleTemplate');
-
-    agentTableHighlighter = new TableHighlighter('agentRoles', readOnly ? 2 : 3);
-    // Show agents matching a pattern on click
-    let agentPatterns = agentRolesTable.getElementsByClassName('patternAnchor');
-    for (let pattern of agentPatterns) {
-      bindAgentListenerToPattern(pattern);
-    }
-  }
-});
\ No newline at end of file
diff --git a/src/test/java/com/michelin/cio/hudson/plugins/rolestrategy/ApiTest.java b/src/test/java/com/michelin/cio/hudson/plugins/rolestrategy/ApiTest.java
index fda8acc2..8fe3c44e 100644
--- a/src/test/java/com/michelin/cio/hudson/plugins/rolestrategy/ApiTest.java
+++ b/src/test/java/com/michelin/cio/hudson/plugins/rolestrategy/ApiTest.java
@@ -232,6 +232,44 @@ void testAddRoleWithMissingTemplate() throws IOException {
     assertEquals(HttpURLConnection.HTTP_BAD_REQUEST, page.getWebResponse().getStatusCode(), "Testing if request failed");
   }
 
+  @Test
+  void testAddRoleWithOverwriteKeepsAssignments() throws IOException {
+    // "developers" was created in setUp() with developerUser assigned
+    URL apiUrl = new URL(jenkinsRule.jenkins.getRootUrl() + "role-strategy/strategy/addRole");
+    WebRequest request = new WebRequest(apiUrl, HttpMethod.POST);
+    request.setRequestParameters(
+            Arrays.asList(new NameValuePair("type", RoleType.Project.getStringType()),
+                    new NameValuePair("roleName", "developers"),
+                    new NameValuePair("permissionIds", "hudson.model.Item.Read"),
+                    new NameValuePair("overwrite", "true"), new NameValuePair("pattern", "dev-.*")));
+    Page page = webClient.getPage(request);
+    assertEquals(HttpURLConnection.HTTP_OK, page.getWebResponse().getStatusCode(), "Testing if request is successful");
+
+    RoleMap roleMap = rbas.getRoleMap(RoleType.Project);
+    Role role = roleMap.getRole("developers");
+    assertThat(role, notNullValue());
+    assertThat(role.getPattern().pattern(), equalTo("dev-.*"));
+    assertThat(role.hasPermission(Item.BUILD), equalTo(false));
+    Set<PermissionEntry> sids = roleMap.getSidEntriesForRole("developers");
+    assertThat(sids, notNullValue());
+    assertTrue(sids.stream().anyMatch(entry -> entry.getSid().equals("developerUser")),
+        "Overwriting a role must keep its assignments");
+  }
+
+  @Test
+  void testAddRoleWithInvalidPattern() throws IOException {
+    URL apiUrl = new URL(jenkinsRule.jenkins.getRootUrl() + "role-strategy/strategy/addRole");
+    WebRequest request = new WebRequest(apiUrl, HttpMethod.POST);
+    request.setRequestParameters(
+            Arrays.asList(new NameValuePair("type", RoleType.Project.getStringType()),
+                    new NameValuePair("roleName", "broken-pattern-role"),
+                    new NameValuePair("permissionIds", "hudson.model.Item.Read"),
+                    new NameValuePair("overwrite", "false"), new NameValuePair("pattern", "(")));
+    Page page = webClient.getPage(request);
+    assertEquals(HttpURLConnection.HTTP_BAD_REQUEST, page.getWebResponse().getStatusCode(), "Testing if request failed");
+    assertThat(rbas.getRoleMap(RoleType.Project).getRole("broken-pattern-role"), nullValue());
+  }
+
   @Test
   void testAddTemplate() throws IOException {
     String template = "quality";
diff --git a/src/test/java/org/jenkinsci/plugins/rolestrategy/FormSubmissionPermissionsTest.java b/src/test/java/org/jenkinsci/plugins/rolestrategy/FormSubmissionPermissionsTest.java
index d26c4a6d..449e7726 100644
--- a/src/test/java/org/jenkinsci/plugins/rolestrategy/FormSubmissionPermissionsTest.java
+++ b/src/test/java/org/jenkinsci/plugins/rolestrategy/FormSubmissionPermissionsTest.java
@@ -23,7 +23,7 @@
  * These tests verify that the entry-level permission checks work correctly.
  * The actual form processing logic is tested through the REST API endpoints.
  *
- * Note: Form submission handlers (doRolesSubmit, doAssignSubmit, doTemplatesSubmit)
+ * Note: Form submission handlers (doAssignSubmit, doTemplatesSubmit)
  * check minimum permissions at entry, then delegate to descriptor methods that use
  * selective filtering (processing sections the user has permission for, copying
  * unauthorized sections from the old strategy). This selective filtering behavior
@@ -85,26 +85,6 @@ private void performAsAndExpect(String username, WebRequest request, int expecte
     assertEquals(expectedCode, page.getWebResponse().getStatusCode(), "HTTP code mismatch for user " + username);
   }
 
-  @Test
-  void testRolesSubmitAccessControl() throws Exception {
-    // Test that doRolesSubmit entry point correctly checks for ADMINISTER_AND_SOME_ROLES_ADMIN
-
-    URL apiUrl = new URL(jenkinsRule.jenkins.getRootUrl() + "role-strategy/rolesSubmit");
-    WebRequest request = new WebRequest(apiUrl, HttpMethod.POST);
-
-    // adminUser has Jenkins.ADMINISTER - should pass entry check (but will fail on empty form)
-    performAsAndExpect("adminUser", request, HttpURLConnection.HTTP_BAD_REQUEST);
-
-    // itemAdminUser has ITEM_ROLES_ADMIN - should pass entry check (but will fail on empty form)
-    performAsAndExpect("itemAdminUser", request, HttpURLConnection.HTTP_BAD_REQUEST);
-
-    // agentAdminUser has AGENT_ROLES_ADMIN - should pass entry check (but will fail on empty form)
-    performAsAndExpect("agentAdminUser", request, HttpURLConnection.HTTP_BAD_REQUEST);
-
-    // developerUser has no admin permissions - should get 403 at entry
-    performAsAndExpect("developerUser", request, HttpURLConnection.HTTP_FORBIDDEN);
-  }
-
   @Test
   void testAssignSubmitAccessControl() throws Exception {
     // Test that doAssignSubmit entry point correctly checks for ADMINISTER_AND_SOME_ROLES_ADMIN
diff --git a/src/test/java/org/jenkinsci/plugins/rolestrategy/PatternMatchingApiTest.java b/src/test/java/org/jenkinsci/plugins/rolestrategy/PatternMatchingApiTest.java
index 1ce9f8e5..0fb00ba7 100644
--- a/src/test/java/org/jenkinsci/plugins/rolestrategy/PatternMatchingApiTest.java
+++ b/src/test/java/org/jenkinsci/plugins/rolestrategy/PatternMatchingApiTest.java
@@ -20,7 +20,8 @@
 /**
  * Tests for permission-based access control on pattern matching API endpoints.
  * These endpoints are used by the UI to show which items/agents match a given pattern.
- * They require Jenkins.ADMINISTER permission.
+ * getMatchingJobs requires ITEM_ROLES_ADMIN, getMatchingAgents requires AGENT_ROLES_ADMIN
+ * (both implied by Jenkins.ADMINISTER).
  */
 @WithJenkins
 class PatternMatchingApiTest {
@@ -50,13 +51,13 @@ void setUp(JenkinsRule jenkinsRule) throws Exception {
         "false", "", "");
     rbas.doAssignUserRole("globalRoles", "adminRole", "adminUser");
 
-    // Adding itemAdmin role and assigning itemAdminUser (should NOT have access to pattern matching)
+    // Adding itemAdmin role and assigning itemAdminUser (may match jobs but not agents)
     rbas.doAddRole("globalRoles", "itemAdminRole",
         "hudson.model.Hudson.Read," + RoleBasedAuthorizationStrategy.ITEM_ROLES_ADMIN.getId(),
         "false", "", "");
     rbas.doAssignUserRole("globalRoles", "itemAdminRole", "itemAdminUser");
 
-    // Adding agentAdmin role and assigning agentAdminUser (should NOT have access to pattern matching)
+    // Adding agentAdmin role and assigning agentAdminUser (may match agents but not jobs)
     rbas.doAddRole("globalRoles", "agentAdminRole",
         "hudson.model.Hudson.Read," + RoleBasedAuthorizationStrategy.AGENT_ROLES_ADMIN.getId(),
         "false", "", "");
@@ -108,13 +109,13 @@ void testGetMatchingJobsPermissions() throws Exception {
     URL apiUrl = new URL(jenkinsRule.jenkins.getRootUrl() + "role-strategy/strategy/getMatchingJobs?pattern=.*");
     WebRequest request = new WebRequest(apiUrl, HttpMethod.GET);
 
-    // adminUser has Jenkins.ADMINISTER - should succeed
+    // adminUser has Jenkins.ADMINISTER (implies ITEM_ROLES_ADMIN) - should succeed
     performAsAndExpect("adminUser", request, HttpURLConnection.HTTP_OK);
 
-    // itemAdminUser does NOT have Jenkins.ADMINISTER - should fail
-    performAsAndExpect("itemAdminUser", request, HttpURLConnection.HTTP_FORBIDDEN);
+    // itemAdminUser has ITEM_ROLES_ADMIN - should succeed
+    performAsAndExpect("itemAdminUser", request, HttpURLConnection.HTTP_OK);
 
-    // agentAdminUser does NOT have Jenkins.ADMINISTER - should fail
+    // agentAdminUser does NOT have ITEM_ROLES_ADMIN - should fail
     performAsAndExpect("agentAdminUser", request, HttpURLConnection.HTTP_FORBIDDEN);
 
     // developerUser has no admin permissions - should fail
@@ -152,14 +153,14 @@ void testGetMatchingAgentsPermissions() throws Exception {
     URL apiUrl = new URL(jenkinsRule.jenkins.getRootUrl() + "role-strategy/strategy/getMatchingAgents?pattern=.*");
     WebRequest request = new WebRequest(apiUrl, HttpMethod.GET);
 
-    // adminUser has Jenkins.ADMINISTER - should succeed
+    // adminUser has Jenkins.ADMINISTER (implies AGENT_ROLES_ADMIN) - should succeed
     performAsAndExpect("adminUser", request, HttpURLConnection.HTTP_OK);
 
-    // itemAdminUser does NOT have Jenkins.ADMINISTER - should fail
+    // itemAdminUser does NOT have AGENT_ROLES_ADMIN - should fail
     performAsAndExpect("itemAdminUser", request, HttpURLConnection.HTTP_FORBIDDEN);
 
-    // agentAdminUser does NOT have Jenkins.ADMINISTER - should fail
-    performAsAndExpect("agentAdminUser", request, HttpURLConnection.HTTP_FORBIDDEN);
+    // agentAdminUser has AGENT_ROLES_ADMIN - should succeed
+    performAsAndExpect("agentAdminUser", request, HttpURLConnection.HTTP_OK);
 
     // developerUser has no admin permissions - should fail
     performAsAndExpect("developerUser", request, HttpURLConnection.HTTP_FORBIDDEN);
diff --git a/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/ManageRolesUITest.java b/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/ManageRolesUITest.java
new file mode 100644
index 00000000..d6fc7f96
--- /dev/null
+++ b/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/ManageRolesUITest.java
@@ -0,0 +1,158 @@
+package org.jenkinsci.plugins.rolestrategy.playwright;
+
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.junit.UsePlaywright;
+import org.jenkinsci.plugins.rolestrategy.playwright.config.PlaywrightConfig;
+import org.jenkinsci.plugins.rolestrategy.playwright.helpers.UITestHelper;
+import org.jenkinsci.plugins.rolestrategy.playwright.pages.ManageRolesPage;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.jvnet.hudson.test.JenkinsRule;
+import org.jvnet.hudson.test.junit.jupiter.WithJenkins;
+
+/**
+ * End-to-end UI tests for the React-based Manage Roles page.
+ */
+@WithJenkins
+@UsePlaywright(PlaywrightConfig.class)
+@DisplayName("Manage Roles page")
+class ManageRolesUITest {
+
+  private static final String OVERALL_READ = "hudson.model.Hudson.Read";
+  private static final String ITEM_READ = "hudson.model.Item.Read";
+  private static final String ITEM_BUILD = "hudson.model.Item.Build";
+  private static final String COMPUTER_CONFIGURE = "hudson.model.Computer.Configure";
+
+  private ManageRolesPage open(JenkinsRule j, Page page) throws Exception {
+    UITestHelper.setupRbasWithRoles(j);
+    String baseUrl = j.jenkins.getRootUrl();
+    UITestHelper.loginAsAdmin(page, baseUrl);
+    return new ManageRolesPage(page, baseUrl).goTo();
+  }
+
+  @Test
+  @DisplayName("lists the seeded roles on their respective tabs")
+  void listsSeededRolesPerTab(JenkinsRule j, Page page) throws Exception {
+    open(j, page)
+        .hasRoleCard("admin")
+        .hasRoleCard("readers")
+        .roleCardHasSummary("readers", "Read")
+        .hasNoRoleCard("dev-role")
+        .selectTab("Item roles")
+        .hasRoleCard("dev-role")
+        .roleCardHasPattern("dev-role", "dev-.*")
+        .roleCardHasTemplateBadge("templated-role", "dev-template")
+        .selectTab("Agent roles")
+        .hasRoleCard("agent-role")
+        .roleCardHasPattern("agent-role", "agent-.*");
+  }
+
+  @Test
+  @DisplayName("adds a global role through the dialog")
+  void addGlobalRole(JenkinsRule j, Page page) throws Exception {
+    open(j, page)
+        .clickAddRole()
+        .waitForDialog()
+        .dialogSetName("auditors")
+        .dialogTogglePermission(OVERALL_READ)
+        .submitDialog()
+        .hasRoleCard("auditors")
+        .roleCardHasSummary("auditors", "Read");
+  }
+
+  @Test
+  @DisplayName("adds an item role bound to a template, with read-only permissions")
+  void addItemRoleWithTemplate(JenkinsRule j, Page page) throws Exception {
+    open(j, page)
+        .selectTab("Item roles")
+        .clickAddRole()
+        .waitForDialog()
+        .dialogSetName("qa-role")
+        .dialogSetPattern("qa-.*")
+        .dialogSelectTemplate("dev-template")
+        .dialogPermissionDisabled(ITEM_READ)
+        .submitDialog()
+        .hasRoleCard("qa-role")
+        .roleCardHasPattern("qa-role", "qa-.*")
+        .roleCardHasTemplateBadge("qa-role", "dev-template")
+        .roleCardHasSummary("qa-role", "Build");
+  }
+
+  @Test
+  @DisplayName("edits an existing role's pattern and permissions")
+  void editRole(JenkinsRule j, Page page) throws Exception {
+    open(j, page)
+        .selectTab("Item roles")
+        .clickEditRole("dev-role")
+        .waitForDialog()
+        .dialogSetPattern("staging-.*")
+        .submitDialog()
+        .roleCardHasPattern("dev-role", "staging-.*");
+  }
+
+  @Test
+  @DisplayName("shows a validation error and blocks submit for an invalid pattern")
+  void invalidPatternBlocksSubmit(JenkinsRule j, Page page) throws Exception {
+    open(j, page)
+        .selectTab("Agent roles")
+        .clickAddRole()
+        .waitForDialog()
+        .dialogSetName("broken")
+        .dialogTogglePermission(COMPUTER_CONFIGURE)
+        .dialogSetPattern("(")
+        .dialogSubmitDisabled()
+        .cancelDialog();
+  }
+
+  @Test
+  @DisplayName("keeps the role when deletion is cancelled and removes it when confirmed")
+  void deleteRoleCancelKeepsItThenConfirmRemovesIt(JenkinsRule j, Page page) throws Exception {
+    ManageRolesPage roles = open(j, page);
+
+    roles.clickDeleteRole("readers")
+        .confirmDialogContainsText("readers")
+        .dismissConfirmDialog()
+        .hasRoleCard("readers");
+
+    roles.clickDeleteRole("readers")
+        .acceptConfirmDialog()
+        .hasNoRoleCard("readers");
+  }
+
+  @Test
+  @DisplayName("shows the jobs matching an item role's pattern")
+  void showMatchingJobs(JenkinsRule j, Page page) throws Exception {
+    ManageRolesPage roles = open(j, page);
+    j.createFreeStyleProject("dev-app");
+    j.createFreeStyleProject("other-app");
+
+    roles.selectTab("Item roles")
+        .clickPatternChip("dev-role")
+        .matchingDialogContainsText("dev-app")
+        .closeMatchingDialog();
+  }
+
+  @Test
+  @DisplayName("filters the visible roles as the user types in the search box")
+  void searchFiltersRoles(JenkinsRule j, Page page) throws Exception {
+    open(j, page)
+        .search("read")
+        .hasRoleCard("readers")
+        .hasNoRoleCard("admin");
+  }
+
+  @Test
+  @DisplayName("adds an item role with explicit permissions")
+  void addItemRoleWithPermissions(JenkinsRule j, Page page) throws Exception {
+    open(j, page)
+        .selectTab("Item roles")
+        .clickAddRole()
+        .waitForDialog()
+        .dialogSetName("builders")
+        .dialogSetPattern("build-.*")
+        .dialogTogglePermission(ITEM_BUILD)
+        .submitDialog()
+        .hasRoleCard("builders")
+        .roleCardHasSummary("builders", "Build");
+  }
+}
diff --git a/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/helpers/UITestHelper.java b/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/helpers/UITestHelper.java
index a2493ac2..92e3cbad 100644
--- a/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/helpers/UITestHelper.java
+++ b/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/helpers/UITestHelper.java
@@ -49,4 +49,25 @@ public static RoleBasedAuthorizationStrategy setupRbasWithTemplates(JenkinsRule
 
     return rbas;
   }
+
+  /**
+   * The template seed plus one role per type, as the Manage Roles UI test expects.
+   *
+   * <ul>
+   *   <li>{@code readers}: global role with Overall Read</li>
+   *   <li>{@code dev-role}: item role on {@code dev-.*}</li>
+   *   <li>{@code agent-role}: agent role on {@code agent-.*}</li>
+   * </ul>
+   */
+  public static RoleBasedAuthorizationStrategy setupRbasWithRoles(JenkinsRule j) throws IOException {
+    RoleBasedAuthorizationStrategy rbas = setupRbasWithTemplates(j);
+
+    rbas.doAddRole("globalRoles", "readers", "hudson.model.Hudson.Read", "false", "", "");
+    rbas.doAddRole("projectRoles", "dev-role",
+        "hudson.model.Item.Read,hudson.model.Item.Build", "false", "dev-.*", "");
+    rbas.doAddRole("slaveRoles", "agent-role",
+        "hudson.model.Computer.Connect", "false", "agent-.*", "");
+
+    return rbas;
+  }
 }
diff --git a/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/pages/ManageRolesPage.java b/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/pages/ManageRolesPage.java
new file mode 100644
index 00000000..5b0ff951
--- /dev/null
+++ b/src/test/java/org/jenkinsci/plugins/rolestrategy/playwright/pages/ManageRolesPage.java
@@ -0,0 +1,159 @@
+package org.jenkinsci.plugins.rolestrategy.playwright.pages;
+
+import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
+
+import com.microsoft.playwright.Locator;
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.options.AriaRole;
+
+/**
+ * Page object for the Manage Roles page. Role types render as tabs; roles as
+ * {@code .rsp-card} elements identified by their {@code .rsp-card__name} text.
+ * Shared modal handling lives in {@link RoleStrategyPage}.
+ */
+public class ManageRolesPage extends RoleStrategyPage<ManageRolesPage> {
+
+  public ManageRolesPage(Page page, String baseUrl) {
+    super(page, baseUrl + "manage/role-strategy/manage-roles");
+  }
+
+  @Override
+  protected void waitForLoaded() {
+    assertThat(page.getByRole(AriaRole.HEADING,
+        new Page.GetByRoleOptions().setName("Roles"))).isVisible();
+  }
+
+  // --- Tabs ---
+
+  public ManageRolesPage selectTab(String label) {
+    page.getByRole(AriaRole.TAB, new Page.GetByRoleOptions().setName(label)).click();
+    return this;
+  }
+
+  // --- Card assertions ---
+
+  public ManageRolesPage hasRoleCard(String name) {
+    assertThat(card(name)).isVisible();
+    return this;
+  }
+
+  public ManageRolesPage hasNoRoleCard(String name) {
+    assertThat(card(name)).hasCount(0);
+    return this;
+  }
+
+  public ManageRolesPage roleCardHasSummary(String name, String expected) {
+    assertThat(card(name).locator(".rsp-card__summary")).containsText(expected);
+    return this;
+  }
+
+  public ManageRolesPage roleCardHasPattern(String name, String pattern) {
+    assertThat(card(name).locator(".rsp-card__pattern")).containsText(pattern);
+    return this;
+  }
+
+  public ManageRolesPage roleCardHasTemplateBadge(String name, String template) {
+    assertThat(card(name).locator(".rsp-card__template-badge")).containsText(template);
+    return this;
+  }
+
+  // --- Actions ---
+
+  public ManageRolesPage clickAddRole() {
+    page.locator("#rsp-add-role-btn").click();
+    return this;
+  }
+
+  public ManageRolesPage clickEditRole(String name) {
+    card(name).locator(".rsp-card__actions button").first().click();
+    return this;
+  }
+
+  public ManageRolesPage clickDeleteRole(String name) {
+    card(name).locator(".rsp-card__actions button").last().click();
+    return this;
+  }
+
+  public ManageRolesPage search(String query) {
+    page.locator("#rsp-roles-panel .jenkins-search__input").first().fill(query);
+    return this;
+  }
+
+  /** Open the matching items/agents dialog from the card's pattern chip. */
+  public ManageRolesPage clickPatternChip(String name) {
+    card(name).locator("button.rsp-card__pattern").click();
+    return this;
+  }
+
+  public ManageRolesPage matchingDialogContainsText(String text) {
+    assertThat(dialog()).containsText(text);
+    return this;
+  }
+
+  public ManageRolesPage closeMatchingDialog() {
+    dialog().locator("button[aria-label='Close']").click();
+    assertThat(dialog()).hasCount(0);
+    return this;
+  }
+
+  // --- Add/Edit dialog fields (role-specific) ---
+
+  public ManageRolesPage waitForDialog() {
+    assertThat(dialog()).isVisible();
+    dialog().locator(".rsp-assign-dialog__role-item").first()
+        .waitFor(new Locator.WaitForOptions().setTimeout(60000));
+    return this;
+  }
+
+  public ManageRolesPage dialogSetName(String name) {
+    dialog().locator("#rsp-role-name").fill(name);
+    return this;
+  }
+
+  public ManageRolesPage dialogSetPattern(String pattern) {
+    // Blur after filling: pattern validation only runs when the field loses focus.
+    dialog().locator("#rsp-role-pattern").fill(pattern);
+    dialog().locator("#rsp-role-pattern").blur();
+    return this;
+  }
+
+  public ManageRolesPage dialogSelectTemplate(String template) {
+    dialog().locator("#rsp-role-template").selectOption(template);
+    return this;
+  }
+
+  public ManageRolesPage dialogTogglePermission(String permissionId) {
+    dialog().locator(".rsp-assign-dialog__role-item[data-permission-id='" + permissionId + "'] label")
+        .click();
+    return this;
+  }
+
+  public ManageRolesPage dialogPermissionDisabled(String permissionId) {
+    assertThat(dialog()
+        .locator(".rsp-assign-dialog__role-item[data-permission-id='" + permissionId + "'] input"))
+        .isDisabled();
+    return this;
+  }
+
+  public ManageRolesPage dialogHasError(String text) {
+    assertThat(dialog()).containsText(text);
+    return this;
+  }
+
+  public ManageRolesPage dialogSubmitDisabled() {
+    assertThat(dialog().locator("button.jenkins-button--primary")).isDisabled();
+    return this;
+  }
+
+  public ManageRolesPage cancelDialog() {
+    dialog().locator("button[aria-label='Close']").click();
+    assertThat(dialog()).hasCount(0);
+    return this;
+  }
+
+  // --- Locators ---
+
+  private Locator card(String name) {
+    return page.locator(".rsp-card:has(.rsp-card__name:text-is(\"" + name + "\"))");
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
index 7890eef4..7834dda1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
       input: {
         "permission-templates":
           "src/main/frontend/permission-templates/index.tsx",
+        "manage-roles": "src/main/frontend/manage-roles/index.tsx",
       },
       output: {
         entryFileNames: "[name]-bundle.js",

From 8e345958171853407f5b72a89a0637e5d6d46894 Mon Sep 17 00:00:00 2001
From: Tim Jacomb <timjacomb1@gmail.com>
Date: Wed, 22 Jul 2026 22:35:52 +0100
Subject: [PATCH 2/5] Copilot comments

---
 docs/DEVELOPER.md                             |  2 +-
 .../common/utils/permissionSummary.spec.ts    | 41 +++++++++++++++++++
 .../common/utils/permissionSummary.ts         |  9 ++--
 .../RoleBasedAuthorizationStrategy.java       | 36 ++++++++++++----
 .../rolestrategy/PatternMatchingApiTest.java  | 14 +++++++
 5 files changed, 90 insertions(+), 12 deletions(-)
 create mode 100644 src/main/frontend/common/utils/permissionSummary.spec.ts

diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md
index a1933f17..0db0a0e1 100644
--- a/docs/DEVELOPER.md
+++ b/docs/DEVELOPER.md
@@ -11,7 +11,7 @@ See the [Developer Documentation](https://www.jenkins.io/doc/developer/).
 The React pages (`Manage Roles`, `Permission Templates`) are covered by Vitest component
 tests (`npm run test`) and Playwright end-to-end tests (`ManageRolesUITest`,
 `PermissionTemplatesUITest`). The remaining jelly/vanilla-JS pages need manual testing.
-After starting Jenkins locally via `mvn hpi:run` go to the `Manage and Assigne Roles` page.
+After starting Jenkins locally via `mvn hpi:run` go to the `Manage and Assign Roles` page.
 
 Verify that following things work on `Assign Roles`:
 1. Adding a new user to global, item and agent role
diff --git a/src/main/frontend/common/utils/permissionSummary.spec.ts b/src/main/frontend/common/utils/permissionSummary.spec.ts
new file mode 100644
index 00000000..6a81b931
--- /dev/null
+++ b/src/main/frontend/common/utils/permissionSummary.spec.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+
+import type { PermissionGroup } from "../types/permission.ts";
+import {
+  buildPermissionSummary,
+  indexPermissions,
+} from "./permissionSummary.ts";
+
+const GROUPS: PermissionGroup[] = [
+  {
+    title: "Job",
+    permissions: [
+      { id: "job.read", name: "Read", description: "", impliedByList: [] },
+      { id: "job.build", name: "Build", description: "", impliedByList: [] },
+    ],
+  },
+];
+
+describe("buildPermissionSummary", () => {
+  const byId = indexPermissions(GROUPS);
+
+  it("joins resolved permissions as sorted Group/Permission pairs", () => {
+    expect(buildPermissionSummary(["job.build", "job.read"], byId)).toBe(
+      "Job/Build, Job/Read",
+    );
+  });
+
+  it("returns null for an empty id list", () => {
+    expect(buildPermissionSummary([], byId)).toBeNull();
+  });
+
+  it("returns null when no id resolves, so callers show their placeholder", () => {
+    expect(buildPermissionSummary(["stale.permission"], byId)).toBeNull();
+  });
+
+  it("ignores unresolvable ids among valid ones", () => {
+    expect(buildPermissionSummary(["stale.permission", "job.read"], byId)).toBe(
+      "Job/Read",
+    );
+  });
+});
diff --git a/src/main/frontend/common/utils/permissionSummary.ts b/src/main/frontend/common/utils/permissionSummary.ts
index 4c8cfe53..ed26ebe8 100644
--- a/src/main/frontend/common/utils/permissionSummary.ts
+++ b/src/main/frontend/common/utils/permissionSummary.ts
@@ -26,10 +26,13 @@ export function buildPermissionSummary(
   permissionIds: string[],
   permissionsById: ReadonlyMap<string, PermissionRef>,
 ): string | null {
-  if (permissionIds.length === 0) return null;
-  return permissionIds
+  const resolved = permissionIds
     .map((id) => permissionsById.get(id))
-    .filter((p): p is PermissionRef => !!p)
+    .filter((p): p is PermissionRef => !!p);
+  // Also null when no id resolved (e.g. stale permission ids), so callers show
+  // their placeholder instead of an empty summary.
+  if (resolved.length === 0) return null;
+  return resolved
     .map((p) => `${p.groupTitle}/${p.name}`)
     .sort()
     .join(", ");
diff --git a/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy.java b/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy.java
index 0ddeb574..d3a5b53a 100644
--- a/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy.java
+++ b/src/main/java/com/michelin/cio/hudson/plugins/rolestrategy/RoleBasedAuthorizationStrategy.java
@@ -601,13 +601,11 @@ public void doAddRole(@QueryParameter(required = true) String type,
     List<String> permissionList = Arrays.asList(permissionIds.split(","));
     Set<Permission> permissionSet = PermissionHelper.fromStrings(permissionList, true);
 
-    Role role;
-    try {
-      role = new Role(roleName, pttrn, permissionSet);
-    } catch (PatternSyntaxException pse) {
-      Stapler.getCurrentResponse2().sendError(HttpServletResponse.SC_BAD_REQUEST, "Invalid pattern: " + pse.getMessage());
+    Pattern compiledPattern = compilePatternOrSendError(pttrn);
+    if (compiledPattern == null) {
       return;
     }
+    Role role = new Role(roleName, compiledPattern, permissionSet, null);
 
     if (RoleBasedAuthorizationStrategy.PROJECT.equals(type) && templateName != null) {
       if (!hasPermissionTemplate(template)) {
@@ -628,13 +626,27 @@ public void doAddRole(@QueryParameter(required = true) String type,
       // turn every edit into an implicit unassign-all.
       Set<PermissionEntry> sids = roleMap.getSidEntriesForRole(roleName);
       roleMap.removeRole(existing);
-      roleMap.addRole(role, sids);
+      roleMap.addRole(role, sids != null ? sids : Collections.emptySet());
     } else {
       roleMap.addRole(role);
     }
     persistChanges();
   }
 
+  /**
+   * Compile the given pattern, answering the request with a 400 and returning {@code null} when it is not a valid
+   * regular expression.
+   */
+  @CheckForNull
+  private static Pattern compilePatternOrSendError(String pattern) throws IOException {
+    try {
+      return Pattern.compile(pattern);
+    } catch (PatternSyntaxException pse) {
+      Stapler.getCurrentResponse2().sendError(HttpServletResponse.SC_BAD_REQUEST, "Invalid pattern: " + pse.getMessage());
+      return null;
+    }
+  }
+
   /**
    * API method to remove roles.
    *
@@ -1127,8 +1139,12 @@ public void doGetRoleAssignments(@QueryParameter(fixEmpty = true) String type) t
   public void doGetMatchingJobs(@QueryParameter(required = true) String pattern,
       @QueryParameter() int maxJobs) throws IOException {
     checkPerms(ITEM_ROLES_ADMIN);
+    Pattern compiledPattern = compilePatternOrSendError(pattern);
+    if (compiledPattern == null) {
+      return;
+    }
     List<String> matchingItems = new ArrayList<>();
-    int itemCount = RoleMap.getMatchingItemNames(matchingItems, Pattern.compile(pattern), maxJobs);
+    int itemCount = RoleMap.getMatchingItemNames(matchingItems, compiledPattern, maxJobs);
     JSONObject responseJson = new JSONObject();
     responseJson.put("matchingJobs", matchingItems);
     responseJson.put("itemCount", itemCount);
@@ -1154,8 +1170,12 @@ public void doGetMatchingJobs(@QueryParameter(required = true) String pattern,
   public void doGetMatchingAgents(@QueryParameter(required = true) String pattern,
       @QueryParameter() int maxAgents) throws IOException {
     checkPerms(AGENT_ROLES_ADMIN);
+    Pattern compiledPattern = compilePatternOrSendError(pattern);
+    if (compiledPattern == null) {
+      return;
+    }
     List<String> matchingAgents = new ArrayList<>();
-    int agentCount = RoleMap.getMatchingAgentNames(matchingAgents, Pattern.compile(pattern), maxAgents);
+    int agentCount = RoleMap.getMatchingAgentNames(matchingAgents, compiledPattern, maxAgents);
     JSONObject responseJson = new JSONObject();
     responseJson.put("matchingAgents", matchingAgents);
     responseJson.put("agentCount", agentCount);
diff --git a/src/test/java/org/jenkinsci/plugins/rolestrategy/PatternMatchingApiTest.java b/src/test/java/org/jenkinsci/plugins/rolestrategy/PatternMatchingApiTest.java
index 0fb00ba7..6ec836a1 100644
--- a/src/test/java/org/jenkinsci/plugins/rolestrategy/PatternMatchingApiTest.java
+++ b/src/test/java/org/jenkinsci/plugins/rolestrategy/PatternMatchingApiTest.java
@@ -166,6 +166,20 @@ void testGetMatchingAgentsPermissions() throws Exception {
     performAsAndExpect("developerUser", request, HttpURLConnection.HTTP_FORBIDDEN);
   }
 
+  @Test
+  void testGetMatchingJobsWithInvalidPattern() throws Exception {
+    URL apiUrl = new URL(jenkinsRule.jenkins.getRootUrl() + "role-strategy/strategy/getMatchingJobs?pattern=(");
+    WebRequest request = new WebRequest(apiUrl, HttpMethod.GET);
+    performAsAndExpect("adminUser", request, HttpURLConnection.HTTP_BAD_REQUEST);
+  }
+
+  @Test
+  void testGetMatchingAgentsWithInvalidPattern() throws Exception {
+    URL apiUrl = new URL(jenkinsRule.jenkins.getRootUrl() + "role-strategy/strategy/getMatchingAgents?pattern=(");
+    WebRequest request = new WebRequest(apiUrl, HttpMethod.GET);
+    performAsAndExpect("adminUser", request, HttpURLConnection.HTTP_BAD_REQUEST);
+  }
+
   @Test
   void testGetMatchingJobsWithMaxLimit() throws Exception {
     // Create more jobs than the limit

From 57960a775ef03184312547e693661969b253705d Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sat, 25 Jul 2026 16:51:10 +0100
Subject: [PATCH 3/5] Move button

---
 .../rolestrategy/RoleStrategyConfig/manage-roles.jelly      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly
index 11658246..fe70c158 100644
--- a/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly
+++ b/src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/manage-roles.jelly
@@ -31,15 +31,15 @@
   <j:set var="header">
     <l:view>
       <l:app-bar title="${%Roles}">
-        <a href="permission-templates" class="jenkins-button">
-          ${%Permission Templates}
-        </a>
         <j:if test="${app.hasAnyPermission(it.strategy.ADMINISTER_AND_SOME_ROLES_ADMIN)}">
           <button type="button" class="jenkins-button jenkins-button--primary" id="rsp-add-role-btn">
             <l:icon src="symbol-add plugin-ionicons-api"/>
             ${%Add Role}
           </button>
         </j:if>
+        <a href="permission-templates" class="jenkins-button">
+          ${%Permission Templates}
+        </a>
       </l:app-bar>
       <p class="jenkins-page-description">
         ${%blurb}

From bd5fcae0b90f613bf45a7bbb9b5cb4b5de31fdfd Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sat, 25 Jul 2026 16:55:32 +0100
Subject: [PATCH 4/5] Refine tabs

---
 src/main/frontend/common/components/Tabs.tsx  |  2 +-
 .../frontend/common/styles/role-strategy.css  | 69 ++++++++-----------
 2 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/main/frontend/common/components/Tabs.tsx b/src/main/frontend/common/components/Tabs.tsx
index cd7524ab..0a8fae23 100644
--- a/src/main/frontend/common/components/Tabs.tsx
+++ b/src/main/frontend/common/components/Tabs.tsx
@@ -51,7 +51,7 @@ export function Tabs({ tabs, activeKey, onSelect, panelId }: TabsProps) {
             aria-selected={active}
             aria-controls={panelId}
             tabIndex={active ? 0 : -1}
-            className={`rsp-tabs__tab${active ? " rsp-tabs__tab--active" : ""}`}
+            className={`jenkins-button ${active ? "" : " jenkins-button--tertiary"}`}
             onClick={() => onSelect(tab.key)}
           >
             {tab.label}
diff --git a/src/main/frontend/common/styles/role-strategy.css b/src/main/frontend/common/styles/role-strategy.css
index e03d361e..74b03e2c 100644
--- a/src/main/frontend/common/styles/role-strategy.css
+++ b/src/main/frontend/common/styles/role-strategy.css
@@ -548,46 +548,37 @@ dialog .tippy-box {
 .rsp-tabs {
   display: flex;
   gap: 0.25rem;
-  padding: 0.25rem;
-  width: fit-content;
-  border-radius: 0.75rem;
-  background: var(--card-background);
-  border: var(--jenkins-border--subtle);
-}
-
-.rsp-tabs__tab {
-  appearance: none;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-bold-weight);
-  color: var(--text-color-secondary);
-  padding: 0.375rem 0.875rem;
-  border-radius: 0.5rem;
-  transition: var(--standard-transition);
-}
-
-.rsp-tabs__tab:hover {
-  background: var(--item-background--hover);
-  color: var(--text-color);
-}
-
-.rsp-tabs__tab:active {
-  background: var(--item-background--active);
-}
-
-.rsp-tabs__tab--active,
-.rsp-tabs__tab--active:hover {
-  background: var(--accent-color);
-  /* Same pairing as the primary button: stays readable in the dark theme,
-     where --background flips dark but this variable stays light. */
-  color: var(--button-color--primary, var(--background));
-}
 
-.rsp-tabs__tab:focus-visible {
-  outline: 2px solid var(--focus-input-border);
-  outline-offset: 1px;
+  button {
+    border-radius: 100px;
+
+    &:not(.jenkins-button--tertiary) {
+      pointer-events: none;
+      font-weight: var(--font-bold-weight);
+    }
+
+    &.jenkins-button--tertiary {
+      color: color-mix(
+        in sRGB,
+        var(--text-color-secondary) 75%,
+        var(--text-color)
+      ) !important;
+
+      &::before,
+      &::after {
+        inset: 3px;
+      }
+    }
+
+    &:hover {
+      color: var(--text-color) !important;
+
+      &::before,
+      &::after {
+        inset: 1.5px;
+      }
+    }
+  }
 }
 
 /* ============================================

From f786af6f6d67d51f65955a4e87f2f047bb0c68c4 Mon Sep 17 00:00:00 2001
From: Tim Jacomb <timjacomb1@gmail.com>
Date: Sat, 25 Jul 2026 22:28:58 +0100
Subject: [PATCH 5/5] Fix keyboard activation inside card

---
 src/main/frontend/common/components/Card.tsx  |  4 +++
 .../manage-roles/ManageRolesPage.spec.tsx     | 30 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/main/frontend/common/components/Card.tsx b/src/main/frontend/common/components/Card.tsx
index 085485c2..7c041bc5 100644
--- a/src/main/frontend/common/components/Card.tsx
+++ b/src/main/frontend/common/components/Card.tsx
@@ -80,6 +80,10 @@ export function Card({
 
   const toggle = () => setExpanded((v) => !v);
   const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    // Only react to keys aimed at the header itself. Key events from focused
+    // buttons inside it (badges, actions) bubble up here, and preventDefault
+    // would swallow the native click those buttons synthesize on Enter/Space.
+    if (e.target !== e.currentTarget) return;
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       toggle();
diff --git a/src/main/frontend/manage-roles/ManageRolesPage.spec.tsx b/src/main/frontend/manage-roles/ManageRolesPage.spec.tsx
index 60c4b8ce..35d71d0c 100644
--- a/src/main/frontend/manage-roles/ManageRolesPage.spec.tsx
+++ b/src/main/frontend/manage-roles/ManageRolesPage.spec.tsx
@@ -221,6 +221,36 @@ describe("ManageRolesPage", () => {
     expect(screen.getByPlaceholderText("Search item roles")).toHaveValue("");
   });
 
+  it("opens the matching dialog from the pattern chip with the keyboard", async () => {
+    const user = userEvent.setup();
+    const client = renderPage();
+
+    await user.click(screen.getByRole("tab", { name: "Item roles" }));
+    screen.getByRole("button", { name: "dev-.*" }).focus();
+    await user.keyboard("{Enter}");
+
+    await waitFor(() =>
+      expect(client.getMatchingJobs).toHaveBeenCalledWith("dev-.*", 15),
+    );
+    // The key press must not also toggle the surrounding card open.
+    expect(
+      screen
+        .getAllByRole("button", { name: /dev/ })
+        .find((b) => b.classList.contains("rsp-card__header"))
+        ?.getAttribute("aria-expanded") ?? "false",
+    ).toBe("false");
+  });
+
+  it("activates the edit action with the keyboard", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    screen.getByLabelText("Edit role").focus();
+    await user.keyboard("{Enter}");
+
+    expect(await screen.findByText("Edit role: admin")).toBeInTheDocument();
+  });
+
   it("opens the matching dialog from the pattern chip", async () => {
     const user = userEvent.setup();
     const client = renderPage();