🚧 WIP

frontend/src/pages/Clients.tsx

@@ -164,6 +164,12 @@ export function ClientsPage() {
         </div>
       )}
       {error && <div className="banner error">{error}</div>}
+      {(clients.error || roles.error || groups.error) && (
+        <div className="banner error">
+          Failed to load clients/roles/groups from the broker management API:{" "}
+          {((clients.error ?? roles.error ?? groups.error) as Error).message}
+        </div>
+      )}
 
       <form className="stack" onSubmit={submit}>
         <label htmlFor="new-client">New client username</label>

frontend/src/pages/Groups.tsx

@@ -102,6 +102,12 @@ export function GroupsPage() {
         group manages its own roles and members.
       </p>
       {error && <div className="banner error">{error}</div>}
+      {(groups.error || roles.error || clients.error) && (
+        <div className="banner error">
+          Failed to load groups/roles/clients from the broker management API:{" "}
+          {((groups.error ?? roles.error ?? clients.error) as Error).message}
+        </div>
+      )}
 
       <form className="stack" onSubmit={submit}>
         <label htmlFor="group-name">New group name</label>

frontend/src/pages/Roles.tsx

@@ -142,6 +142,12 @@ export function RolesPage() {
         username and client id.
       </p>
       {error && <div className="banner error">{error}</div>}
+      {(roles.error || detail.error) && (
+        <div className="banner error">
+          Failed to load roles from the broker management API:{" "}
+          {((roles.error ?? detail.error) as Error).message}
+        </div>
+      )}
       {banner && !error && <div className="banner ok">{banner}</div>}
 
       <form className="stack" onSubmit={submit}>