fix: restrict system health UI to admins

Author: matteius

tests/integration/specs/system-health.ui.spec.ts

@@ -81,3 +81,29 @@ test.describe('System Health operator view @ui @system', () => {
     await expect(page.getByRole('button', { name: 'Retry' })).toBeVisible();
   });
 });
+
+test.describe('System Health authorization @ui @system', () => {
+  test('does not expose administrator health data to viewers', async ({ page }) => {
+    await login(page, USERS.viewer);
+    await page.route('**/api/system/info', (route) => route.fulfill({ json: systemInfo }));
+
+    let healthRequestCount = 0;
+    page.on('request', (request) => {
+      const path = new URL(request.url()).pathname;
+      if (path === '/api/system/health' || path === '/api/system/health/incidents') {
+        healthRequestCount += 1;
+      }
+    });
+
+    const roleLoaded = page.waitForResponse((response) =>
+      new URL(response.url()).pathname === '/api/auth/verify' && response.status() === 200);
+    await page.goto('/system.html', { waitUntil: 'domcontentloaded' });
+    const session = await (await roleLoaded).json();
+
+    expect(session.role).toBe('viewer');
+    await expect(page.getByTestId('system-tab')).toBeVisible();
+    await expect(page.getByTestId('health-tab')).toHaveCount(0);
+    await expect(page.getByTestId('system-health-view')).toHaveCount(0);
+    expect(healthRequestCount).toBe(0);
+  });
+});

web/js/components/preact/SystemView.jsx

@@ -127,6 +127,8 @@ export function SystemView() {
   const roleLoading = userRole === null;
   // Only admin can restart/shutdown system; default to false while loading
   const canControlSystem = !roleLoading && userRole === 'admin';
+  // Operational health endpoints require the same system-admin permission.
+  const canViewSystemHealth = canControlSystem;
 
   // Define all query hooks next
   const {
@@ -263,22 +265,24 @@ export function SystemView() {
 
       <div className="mb-4 border-b border-border" role="tablist" aria-label={t('system.sections')}>
           <div className="flex gap-2">
-            <button
-              type="button"
-              id="health-tab"
-              role="tab"
-              data-testid="health-tab"
-              aria-selected={activeTab === 'health'}
-              aria-controls="health-panel"
-              className={`rounded-t-lg px-4 py-2 text-sm font-medium transition-colors ${
-                activeTab === 'health'
-                  ? 'bg-card text-card-foreground border border-border border-b-0 -mb-px'
-                  : 'text-muted-foreground hover:text-foreground'
-              }`}
-              onClick={() => setActiveTab('health')}
-            >
-              {t('system.health.tab')}
-            </button>
+            {canViewSystemHealth && (
+              <button
+                type="button"
+                id="health-tab"
+                role="tab"
+                data-testid="health-tab"
+                aria-selected={activeTab === 'health'}
+                aria-controls="health-panel"
+                className={`rounded-t-lg px-4 py-2 text-sm font-medium transition-colors ${
+                  activeTab === 'health'
+                    ? 'bg-card text-card-foreground border border-border border-b-0 -mb-px'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+                onClick={() => setActiveTab('health')}
+              >
+                {t('system.health.tab')}
+              </button>
+            )}
             <button
               type="button"
               id="system-tab"
@@ -314,7 +318,7 @@ export function SystemView() {
           </div>
       </div>
 
-      {activeTab === 'health' ? (
+      {activeTab === 'health' && canViewSystemHealth ? (
         <div role="tabpanel" id="health-panel" aria-labelledby="health-tab">
           <SystemHealth />
         </div>