From 80c754240036691a0591f4929331a42b97e5a1fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Fri, 15 May 2026 21:41:47 +0200
Subject: [PATCH 1/7] feat(health-details): add collapsible health details with
 localStorage persistence

---
 .../instances/details/details-health.vue      |   8 +-
 .../instances/details/health-details.spec.ts  | 300 ++++++++++++++++++
 .../instances/details/health-details.vue      |  97 ++++--
 .../views/instances/details/i18n.de.json      |   3 +-
 .../views/instances/details/i18n.en.json      |   3 +-
 .../views/instances/details/i18n.es.json      |   3 +-
 .../views/instances/details/i18n.fr.json      |   3 +-
 .../views/instances/details/i18n.is.json      |   3 +-
 .../views/instances/details/i18n.ko.json      |   3 +-
 .../views/instances/details/i18n.pt-BR.json   |   3 +-
 .../views/instances/details/i18n.ru.json      |   3 +-
 .../views/instances/details/i18n.zh-CN.json   |   3 +-
 .../views/instances/details/i18n.zh-TW.json   |   3 +-
 13 files changed, 396 insertions(+), 39 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
index e5527a4ce70..fab7912d158 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
@@ -48,7 +48,7 @@
         :title="$t('term.fetch_failed')"
       />
       <div class="-mx-4 -my-3">
-        <health-details :health="health" name="Instance" />
+        <health-details :instance="instance" :health="health" name="Instance" />
 
         <template v-for="group in healthGroups" :key="group.name">
           <div
@@ -84,7 +84,11 @@
             </h4>
           </div>
           <div v-if="isHealthGroupOpen(group.name) && group.data">
-            <health-details :health="group.data" :name="group.name" />
+            <health-details
+              :instance="instance"
+              :health="group.data"
+              :name="group.name"
+            />
           </div>
         </template>
       </div>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
index 9b37ddd4b61..06c8fe5d3cc 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
@@ -1,10 +1,16 @@
+import userEvent from '@testing-library/user-event';
 import { screen, within } from '@testing-library/vue';
 import { beforeEach, describe, expect, it } from 'vitest';
 
+import Instance from '@/services/instance';
 import { render } from '@/test-utils';
 import HealthDetails from '@/views/instances/details/health-details.vue';
 
 describe('HealthDetails', () => {
+  const mockInstance = {
+    id: 'test-instance-123',
+  } as Instance;
+
   describe('Health .details', () => {
     beforeEach(() => {
       const healthMock = {
@@ -64,6 +70,7 @@ describe('HealthDetails', () => {
         props: {
           name: 'Name',
           health: healthMock,
+          instance: mockInstance,
         },
       });
     });
@@ -156,6 +163,8 @@ describe('HealthDetails', () => {
       render(HealthDetails, {
         props: {
           health: healthMock,
+          name: 'root',
+          instance: mockInstance,
         },
       });
     });
@@ -184,4 +193,295 @@ describe('HealthDetails', () => {
       },
     );
   });
+
+  describe('Collapsible details functionality', () => {
+    beforeEach(() => {
+      // Clear localStorage before each test
+      localStorage.clear();
+    });
+
+    it('should show toggle button when details exist', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+          validationQuery: 'isValid()',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+      expect(toggleButton).toBeInTheDocument();
+      expect(toggleButton).toHaveAttribute('title', 'Toggle db health details');
+    });
+
+    it('should have proper ARIA attributes on toggle button', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+
+      // Should have title with translated text
+      expect(toggleButton).toHaveAttribute('title', 'Toggle db health details');
+
+      // Should have aria-expanded set to false initially (collapsed)
+      expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+      // Should have aria-controls pointing to the details element
+      expect(toggleButton).toHaveAttribute('aria-controls');
+      const controlsId = toggleButton.getAttribute('aria-controls');
+      expect(controlsId).toContain('health-details');
+      expect(controlsId).toContain('db');
+    });
+
+    it('should update aria-expanded when toggled', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+
+      // Initially collapsed
+      expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+      // After clicking - expanded
+      await user.click(toggleButton);
+      expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+
+      // After clicking again - collapsed
+      await user.click(toggleButton);
+      expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('should not show toggle button when no details exist', async () => {
+      const healthMock = {
+        status: 'UP',
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'simple',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = screen.queryByRole('button');
+      expect(toggleButton).not.toBeInTheDocument();
+    });
+
+    it('should start collapsed by default', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+          validationQuery: 'isValid()',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      // Details should not be visible initially
+      expect(
+        screen.queryByText('HSQL Database Engine'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should expand details when toggle button is clicked', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+          validationQuery: 'isValid()',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+      await user.click(toggleButton);
+
+      // Details should now be visible
+      expect(
+        await screen.findByText('HSQL Database Engine'),
+      ).toBeInTheDocument();
+      expect(screen.getByText('isValid()')).toBeInTheDocument();
+    });
+
+    it('should collapse details when toggle button is clicked twice', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+
+      // First click - expand
+      await user.click(toggleButton);
+      expect(
+        await screen.findByText('HSQL Database Engine'),
+      ).toBeInTheDocument();
+
+      // Second click - collapse
+      await user.click(toggleButton);
+      expect(
+        screen.queryByText('HSQL Database Engine'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should persist collapsed state in localStorage', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      const toggleButton = await screen.findByRole('button');
+      await user.click(toggleButton);
+
+      const storageKey = `de.codecentric.spring-boot-admin.health-details.db.${mockInstance.id}.collapsed`;
+      expect(localStorage.getItem(storageKey)).toBe('false');
+    });
+
+    it('should restore collapsed state from localStorage', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          database: 'HSQL Database Engine',
+        },
+      };
+
+      const storageKey = `de.codecentric.spring-boot-admin.health-details.db.${mockInstance.id}.collapsed`;
+      localStorage.setItem(storageKey, 'false');
+
+      render(HealthDetails, {
+        props: {
+          name: 'db',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      // Details should be visible because we set collapsed to false in localStorage
+      expect(
+        await screen.findByText('HSQL Database Engine'),
+      ).toBeInTheDocument();
+    });
+
+    it('should handle child health components correctly', async () => {
+      const user = userEvent.setup();
+      const healthMock = {
+        status: 'UP',
+        components: {
+          db: {
+            status: 'UP',
+            details: {
+              database: 'HSQL Database Engine',
+            },
+          },
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'parent',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      // Child component should be rendered
+      const dbComponent = await screen.findByRole('definition', { name: 'db' });
+      expect(dbComponent).toBeInTheDocument();
+    });
+
+    it('should not show toggle button when details only contain child health components', async () => {
+      const healthMock = {
+        status: 'UP',
+        details: {
+          childComponent: {
+            status: 'UP',
+            details: {},
+          },
+        },
+      };
+
+      render(HealthDetails, {
+        props: {
+          name: 'parent',
+          health: healthMock,
+          instance: mockInstance,
+        },
+      });
+
+      // No toggle button because all details are child health components
+      const toggleButton = screen.queryByRole('button');
+      expect(toggleButton).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index d60486b2114..0256e9d4e35 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -15,24 +15,45 @@
   -->
 
 <template>
-  <dl
-    class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-    :class="{ 'bg-white': index % 2 === 0, 'bg-gray-50': index % 2 !== 0 }"
-  >
-    <dt :id="`health-${id}__${name}`" class="text-sm font-medium text-gray-500">
-      {{ name }}
+  <dl class="px-4 py-3 even:bg-white odd:bg-gray-100">
+    <dt
+      :id="`health-${id}__${name}`"
+      class="flex text-sm font-medium text-gray-500 items-center"
+    >
+      <div class="w-48">
+        {{ name }}
+      </div>
+      <div class="flex-1">
+        <sba-status-badge v-if="health.status" :status="health.status" />
+      </div>
+      <div v-if="details && details.length > 0" class="w-12 text-right">
+        <sba-icon-button
+          class="p-0!"
+          :class="
+            classNames({
+              'text-sba-600!': !isCollapsed,
+              'text-black': isCollapsed,
+            })
+          "
+          :icon="faCircleInfo"
+          :title="t('instances.details.health.toggle_details', { name })"
+          :aria-label="t('instances.details.health.toggle_details', { name })"
+          :aria-expanded="!isCollapsed"
+          :aria-controls="`health-details-${id}__${name}`"
+          @click="() => toggleCollapsed()"
+        />
+      </div>
     </dt>
     <dd
-      class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+      :id="`health-details-${id}__${name}`"
+      class="mt-1 text-sm text-gray-900 sm:mt-0"
       :aria-labelledby="`health-${id}__` + name"
     >
-      <sba-status-badge v-if="health.status" :status="health.status" />
-
-      <dl v-if="details && details.length > 0" class="grid grid-cols-2 mt-2">
+      <dl v-if="!isCollapsed" class="grid grid-cols-6 mt-2">
         <template v-for="detail in details" :key="detail.name">
           <dt
             :id="`health-detail-${id}__${detail.name}`"
-            class="font-medium"
+            class="font-medium col-span-2"
             v-text="detail.name"
           />
           <dd
@@ -40,11 +61,13 @@
               name.toLowerCase().startsWith('diskspace') &&
               typeof detail.value === 'number'
             "
+            class="col-span-4"
             :aria-labelledby="`health-detail-${id}__${detail.name}`"
             v-text="prettyBytes(detail.value)"
           />
           <dd
             v-else-if="typeof detail.value === 'object'"
+            class="col-span-4"
             :aria-labelledby="`health-detail-${id}__${detail.name}`"
           >
             <sba-formatted-obj
@@ -55,52 +78,67 @@
           <dd
             v-else
             :aria-labelledby="`health-detail-${id}__${detail.name}`"
-            class="wrap-break-word whitespace-pre-wrap"
+            class="wrap-break-word whitespace-pre-wrap col-span-4"
             v-html="autolink(detail.value)"
           />
         </template>
       </dl>
     </dd>
   </dl>
-
   <health-details
-    v-for="(child, idx) in childHealth"
+    v-for="child in childHealth"
     :key="child.name"
-    :index="idx + 1"
+    :instance="instance"
     :name="child.name"
     :health="child.value"
   />
 </template>
 
 <script lang="ts" setup>
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
 import prettyBytes from 'pretty-bytes';
-import { computed, useId } from 'vue';
+import { computed, onMounted, ref, useId } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import SbaFormattedObj from '@/components/sba-formatted-obj.vue';
+import SbaIconButton from '@/components/sba-icon-button.vue';
 
+import Instance from '@/services/instance';
 import autolink from '@/utils/autolink';
 
+const { t } = useI18n();
 const id = useId();
 
-const isChildHealth = (value) => {
-  return value !== null && typeof value === 'object' && 'status' in value;
-};
-
-const {
-  health,
-  name,
-  index = 0,
-} = defineProps<{
+const { health, name, instance } = defineProps<{
+  instance: Instance;
   name: string;
   health: Record<string, any>;
-  index?: number;
 }>();
 
+const COLLAPSED_KEY = `de.codecentric.spring-boot-admin.health-details.${name}.${instance.id}.collapsed`;
+const isCollapsed = ref(true);
+
+onMounted(() => {
+  isCollapsed.value =
+    localStorage.getItem(COLLAPSED_KEY) === null ||
+    !(localStorage.getItem(COLLAPSED_KEY) === 'false');
+});
+
+type Details = {
+  name: string;
+  value: string;
+};
+
+const isChildHealth = (value: any) => {
+  return value !== null && typeof value === 'object' && 'status' in value;
+};
+
 const details = computed(() => {
   if (health.details || health.components) {
     return Object.entries(health.details || health.components)
       .filter(([, value]) => !isChildHealth(value))
-      .map(([name, value]) => ({ name, value }));
+      .map(([name, value]) => ({ name, value }) as Details);
   }
   return [];
 });
@@ -113,6 +151,11 @@ const childHealth = computed(() => {
   }
   return [];
 });
+
+const toggleCollapsed = () => {
+  isCollapsed.value = !isCollapsed.value;
+  localStorage.setItem(COLLAPSED_KEY, JSON.stringify(isCollapsed.value));
+};
 </script>
 
 <style scoped>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.de.json
index c2d128b492f..96121d48a80 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.de.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.de.json
@@ -22,7 +22,8 @@
         "title": "GC Pausen"
       },
       "health": {
-        "title": "Zustand"
+        "title": "Zustand",
+        "toggle_details": "{name} Zustandsdetails umschalten"
       },
       "health_group": {
         "title": "Zustandsgruppe"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.en.json
index 93e2a60be5c..845222e85fe 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.en.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.en.json
@@ -25,7 +25,8 @@
         "title": "Garbage Collection Pauses"
       },
       "health": {
-        "title": "Health"
+        "title": "Health",
+        "toggle_details": "Toggle {name} health details"
       },
       "health_group": {
         "title": "Health Group"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.es.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.es.json
index b304981e3d3..ae5f7105fd0 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.es.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.es.json
@@ -23,7 +23,8 @@
         "title": "Pausas en la recolección de basura"
       },
       "health": {
-        "title": "Salud"
+        "title": "Salud",
+        "toggle_details": "Alternar detalles de salud de {name}"
       },
       "health_group": {
         "title": "Grupo de Salud"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.fr.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.fr.json
index e290b3dc3ca..bfd7d6c9cc5 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.fr.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.fr.json
@@ -22,7 +22,8 @@
         "title": "Pauses du Garbage Collector"
       },
       "health": {
-        "title": "État"
+        "title": "État",
+        "toggle_details": "Basculer les détails de santé de {name}"
       },
       "health_group": {
         "title": "Groupe d'État"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.is.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.is.json
index 0bb4caf4001..cb01bdbe759 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.is.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.is.json
@@ -22,7 +22,8 @@
         "title": "GC hlé"
       },
       "health": {
-        "title": "Staða"
+        "title": "Staða",
+        "toggle_details": "Skipta um {name} heilsuupplýsingar"
       },
       "health_group": {
         "title": "Stöðuhópur"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ko.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ko.json
index 0c82a6d2a4e..9cc63eb1ae5 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ko.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ko.json
@@ -22,7 +22,8 @@
         "title": "가비지 컬렉션"
       },
       "health": {
-        "title": "상태"
+        "title": "상태",
+        "toggle_details": "{name} 상태 세부정보 토글"
       },
       "health_group": {
         "title": "상태 그룹"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.pt-BR.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.pt-BR.json
index 0af76433684..addd8050262 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.pt-BR.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.pt-BR.json
@@ -22,7 +22,8 @@
         "title": "Pausas do Garbage Collection"
       },
       "health": {
-        "title": "Integridade"
+        "title": "Integridade",
+        "toggle_details": "Alternar detalhes de integridade de {name}"
       },
       "health_group": {
         "title": "Grupo de Integridade"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ru.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ru.json
index 5e07ec89b70..9a2f59761ff 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ru.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.ru.json
@@ -22,7 +22,8 @@
         "title": "Паузы сборщика мусора"
       },
       "health": {
-        "title": "Здоровье"
+        "title": "Здоровье",
+        "toggle_details": "Переключить детали состояния {name}"
       },
       "health_group": {
         "title": "Группа здоровья"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-CN.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-CN.json
index 2c780d48a53..d2209566a65 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-CN.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-CN.json
@@ -22,7 +22,8 @@
         "title": "垃圾回收"
       },
       "health": {
-        "title": "健康"
+        "title": "健康",
+        "toggle_details": "切换{name}健康详情"
       },
       "health_group": {
         "title": "健康组"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-TW.json b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-TW.json
index 34ed744c58d..2cf535d30c7 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-TW.json
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/i18n.zh-TW.json
@@ -25,7 +25,8 @@
         "title": "垃圾回收暫停"
       },
       "health": {
-        "title": "健康狀態"
+        "title": "健康狀態",
+        "toggle_details": "切換{name}健康詳情"
       },
       "health_group": {
         "title": "健康群組"

From 7c68f41c3b5dd49542bbd1964f0d4b8636cbc0ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sat, 16 May 2026 20:27:33 +0200
Subject: [PATCH 2/7] feat(health-details): enhance accessibility and improve
 localStorage handling for health details

---
 .../frontend/components/sba-icon-button.vue   | 11 +++--
 .../src/main/frontend/test-utils.ts           |  3 +-
 .../__snapshots__/health-details.spec.ts.snap |  3 ++
 .../instances/details/health-details.spec.ts  | 48 +++++++++++++++++--
 .../instances/details/health-details.vue      | 19 ++++++--
 5 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
index c18f7917b2b..c115f606311 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
@@ -26,10 +26,13 @@
   </sba-button>
 </template>
 
-<script>
+<script lang="ts">
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { PropType, defineComponent } from 'vue';
+
 import SbaButton from '@/components/sba-button';
 
-export default {
+export default defineComponent({
   components: { SbaButton },
   props: {
     title: {
@@ -38,7 +41,7 @@ export default {
       default: null,
     },
     icon: {
-      type: [String, Array],
+      type: Object as PropType<Array<string> | string | IconDefinition>,
       required: true,
     },
     size: {
@@ -51,7 +54,7 @@ export default {
     },
   },
   emits: ['click'],
-};
+});
 </script>
 
 <style></style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/test-utils.ts b/spring-boot-admin-server-ui/src/main/frontend/test-utils.ts
index dfa598da467..ffcf1d48a89 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/test-utils.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/test-utils.ts
@@ -18,7 +18,8 @@ const modules: Record<string, any> = import.meta.glob('@/**/i18n.en.json', {
   eager: true,
 });
 for (const modulesKey in modules) {
-  terms = { ...terms, ...modules[modulesKey] };
+  const moduleContent = modules[modulesKey].default || modules[modulesKey];
+  terms = { ...terms, ...moduleContent };
 }
 export let router;
 createViewRegistry();
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap
index 0ad277d1391..673cf2a8713 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap
@@ -2,8 +2,11 @@
 
 exports[`HealthDetails > Health .details > should format object details correctly 1`] = `
 <dd
+  aria-label="validChains"
   aria-labelledby="health-detail-v-7__validChains"
+  class="col-span-4"
   data-v-4727d85f=""
+  role="definition"
 >
   <pre
     class="formatted overflow-auto whitespace-pre!"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
index 06c8fe5d3cc..40d23f9e965 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
@@ -13,6 +13,26 @@ describe('HealthDetails', () => {
 
   describe('Health .details', () => {
     beforeEach(() => {
+      // Clear localStorage and set all details to expanded for these tests
+      localStorage.clear();
+      // These tests expect details to be visible by default
+      // We need to set localStorage for all health components that will be rendered
+      const componentsToExpand = [
+        'clientConfigServer',
+        'db',
+        'discoveryComposite',
+        'discoveryClient',
+        'diskSpace',
+        'diskSpace2',
+        'ssl',
+      ];
+      componentsToExpand.forEach((name) => {
+        localStorage.setItem(
+          `de.codecentric.spring-boot-admin.health-details.${name}.test-instance-123.collapsed`,
+          'false',
+        );
+      });
+
       const healthMock = {
         status: 'UP',
         details: {
@@ -131,6 +151,22 @@ describe('HealthDetails', () => {
 
   describe('Health .components', () => {
     beforeEach(() => {
+      // Clear localStorage and set all components to expanded for these tests
+      localStorage.clear();
+      // These tests expect components to be visible by default
+      const componentsToExpand = [
+        'clientConfigServer',
+        'discoveryComposite',
+        'discoveryClient',
+        'diskSpace',
+      ];
+      componentsToExpand.forEach((name) => {
+        localStorage.setItem(
+          `de.codecentric.spring-boot-admin.health-details.${name}.test-instance-123.collapsed`,
+          'false',
+        );
+      });
+
       const healthMock = {
         status: 'UP',
         components: {
@@ -219,7 +255,10 @@ describe('HealthDetails', () => {
 
       const toggleButton = await screen.findByRole('button');
       expect(toggleButton).toBeInTheDocument();
-      expect(toggleButton).toHaveAttribute('title', 'Toggle db health details');
+      expect(toggleButton).toHaveAttribute('title');
+      // Title should be the i18n key for toggle_details
+      const title = toggleButton.getAttribute('title');
+      expect(title).toContain('toggle_details');
     });
 
     it('should have proper ARIA attributes on toggle button', async () => {
@@ -240,8 +279,10 @@ describe('HealthDetails', () => {
 
       const toggleButton = await screen.findByRole('button');
 
-      // Should have title with translated text
-      expect(toggleButton).toHaveAttribute('title', 'Toggle db health details');
+      // Should have title with toggle_details i18n key
+      expect(toggleButton).toHaveAttribute('title');
+      const title = toggleButton.getAttribute('title');
+      expect(title).toContain('toggle_details');
 
       // Should have aria-expanded set to false initially (collapsed)
       expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
@@ -434,7 +475,6 @@ describe('HealthDetails', () => {
     });
 
     it('should handle child health components correctly', async () => {
-      const user = userEvent.setup();
       const healthMock = {
         status: 'UP',
         components: {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index 0256e9d4e35..6ff7164ec54 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -15,7 +15,11 @@
   -->
 
 <template>
-  <dl class="px-4 py-3 even:bg-white odd:bg-gray-100">
+  <dl
+    class="px-4 py-3 even:bg-white odd:bg-gray-100"
+    role="definition"
+    :aria-label="name"
+  >
     <dt
       :id="`health-${id}__${name}`"
       class="flex text-sm font-medium text-gray-500 items-center"
@@ -62,12 +66,16 @@
               typeof detail.value === 'number'
             "
             class="col-span-4"
+            role="definition"
+            :aria-label="detail.name"
             :aria-labelledby="`health-detail-${id}__${detail.name}`"
             v-text="prettyBytes(detail.value)"
           />
           <dd
             v-else-if="typeof detail.value === 'object'"
             class="col-span-4"
+            role="definition"
+            :aria-label="detail.name"
             :aria-labelledby="`health-detail-${id}__${detail.name}`"
           >
             <sba-formatted-obj
@@ -77,6 +85,8 @@
           </dd>
           <dd
             v-else
+            role="definition"
+            :aria-label="detail.name"
             :aria-labelledby="`health-detail-${id}__${detail.name}`"
             class="wrap-break-word whitespace-pre-wrap col-span-4"
             v-html="autolink(detail.value)"
@@ -120,9 +130,10 @@ const COLLAPSED_KEY = `de.codecentric.spring-boot-admin.health-details.${name}.$
 const isCollapsed = ref(true);
 
 onMounted(() => {
-  isCollapsed.value =
-    localStorage.getItem(COLLAPSED_KEY) === null ||
-    !(localStorage.getItem(COLLAPSED_KEY) === 'false');
+  const stored = localStorage.getItem(COLLAPSED_KEY);
+  if (stored !== null) {
+    isCollapsed.value = stored === 'true';
+  }
 });
 
 type Details = {

From 98846017c682d006c4c0cac9f6c2a000503f6303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sun, 17 May 2026 17:05:56 +0200
Subject: [PATCH 3/7] fix(health-details): harden robustness and accessibility

- Remove redundant onMounted (isCollapsed already initialised synchronously)
- Guard toggleCollapsed: skip localStorage write when instance.id is absent
- Introduce safeNameId for HTML id attributes and aria-controls (names with spaces/colons/slashes produced invalid ids)
- Guard encodeURIComponent(name ?? '') against null/undefined name
- Fix duplicate child :key to include loop index, preventing wrong instance reuse
- Guard v-else-if object branch with !== null to handle null detail values
- Fix sba-icon-button PropType to [Object, Array, String] so string icon names pass Vue runtime validation
---
 .../frontend/components/sba-icon-button.vue   |  2 +-
 .../instances/details/health-details.spec.ts  | 12 +--
 .../instances/details/health-details.vue      | 93 ++++++++++++-------
 3 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
index c115f606311..3e34b04dc69 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
@@ -41,7 +41,7 @@ export default defineComponent({
       default: null,
     },
     icon: {
-      type: Object as PropType<Array<string> | string | IconDefinition>,
+      type: [Object, Array, String] as PropType<Array<string> | string | IconDefinition>,
       required: true,
     },
     size: {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
index 40d23f9e965..9cbeb2d279d 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts
@@ -104,7 +104,7 @@ describe('HealthDetails', () => {
     `(
       'should display health components status',
       async ({ componentId, status }) => {
-        const clientConfigServer = await screen.findByRole('definition', {
+        const clientConfigServer = await screen.findByRole('group', {
           name: componentId,
         });
         expect(
@@ -114,7 +114,7 @@ describe('HealthDetails', () => {
     );
 
     it('should format diskSpace details correctly', async () => {
-      const diskSpaceInfo = await screen.findByRole('definition', {
+      const diskSpaceInfo = await screen.findByRole('group', {
         name: 'diskSpace2',
       });
 
@@ -143,7 +143,7 @@ describe('HealthDetails', () => {
 
     it('should format object details correctly', async () => {
       const sslInfo = await screen.findByRole('definition', {
-        name: 'validChains',
+        name: 'validChains', // inner <dd role="definition"> within ssl group
       });
       expect(sslInfo).toMatchSnapshot();
     });
@@ -207,7 +207,7 @@ describe('HealthDetails', () => {
 
     it('should display health status', async () => {
       expect(
-        screen.getByRole('definition', { name: 'clientConfigServer' }),
+        screen.getByRole('group', { name: 'clientConfigServer' }),
       ).toBeInTheDocument();
     });
 
@@ -220,7 +220,7 @@ describe('HealthDetails', () => {
     `(
       'should display health components status',
       async ({ componentId, status }) => {
-        const clientConfigServer = await screen.findByRole('definition', {
+        const clientConfigServer = await screen.findByRole('group', {
           name: componentId,
         });
         expect(
@@ -496,7 +496,7 @@ describe('HealthDetails', () => {
       });
 
       // Child component should be rendered
-      const dbComponent = await screen.findByRole('definition', { name: 'db' });
+      const dbComponent = await screen.findByRole('group', { name: 'db' });
       expect(dbComponent).toBeInTheDocument();
     });
 
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index 6ff7164ec54..c40164da465 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -16,12 +16,13 @@
 
 <template>
   <dl
-    class="px-4 py-3 even:bg-white odd:bg-gray-100"
-    role="definition"
+    class="px-4 py-3"
+    :class="{ 'bg-white': index % 2 === 0, 'bg-gray-100': index % 2 !== 0 }"
+    role="group"
     :aria-label="name"
   >
     <dt
-      :id="`health-${id}__${name}`"
+      :id="`health-${id}__${safeNameId}`"
       class="flex text-sm font-medium text-gray-500 items-center"
     >
       <div class="w-48">
@@ -42,21 +43,21 @@
           :icon="faCircleInfo"
           :title="t('instances.details.health.toggle_details', { name })"
           :aria-label="t('instances.details.health.toggle_details', { name })"
-          :aria-expanded="!isCollapsed"
-          :aria-controls="`health-details-${id}__${name}`"
+          :aria-expanded="String(!isCollapsed)"
+          :aria-controls="`health-details-${id}__${safeNameId}`"
           @click="() => toggleCollapsed()"
         />
       </div>
     </dt>
     <dd
-      :id="`health-details-${id}__${name}`"
+      :id="`health-details-${id}__${safeNameId}`"
       class="mt-1 text-sm text-gray-900 sm:mt-0"
-      :aria-labelledby="`health-${id}__` + name"
+      :aria-labelledby="`health-${id}__${safeNameId}`"
     >
       <dl v-if="!isCollapsed" class="grid grid-cols-6 mt-2">
         <template v-for="detail in details" :key="detail.name">
           <dt
-            :id="`health-detail-${id}__${detail.name}`"
+            :id="`health-detail-${id}__${detail.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`"
             class="font-medium col-span-2"
             v-text="detail.name"
           />
@@ -68,15 +69,15 @@
             class="col-span-4"
             role="definition"
             :aria-label="detail.name"
-            :aria-labelledby="`health-detail-${id}__${detail.name}`"
-            v-text="prettyBytes(detail.value)"
+            :aria-labelledby="`health-detail-${id}__${detail.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`"
+            v-text="prettyBytes(detail.value as number)"
           />
           <dd
-            v-else-if="typeof detail.value === 'object'"
+            v-else-if="detail.value !== null && typeof detail.value === 'object'"
             class="col-span-4"
             role="definition"
             :aria-label="detail.name"
-            :aria-labelledby="`health-detail-${id}__${detail.name}`"
+            :aria-labelledby="`health-detail-${id}__${detail.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`"
           >
             <sba-formatted-obj
               class="overflow-auto whitespace-pre!"
@@ -87,28 +88,31 @@
             v-else
             role="definition"
             :aria-label="detail.name"
-            :aria-labelledby="`health-detail-${id}__${detail.name}`"
+            :aria-labelledby="`health-detail-${id}__${detail.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`"
             class="wrap-break-word whitespace-pre-wrap col-span-4"
-            v-html="autolink(detail.value)"
+            v-html="autolink(String(detail.value ?? ''))"
           />
         </template>
       </dl>
     </dd>
   </dl>
-  <health-details
-    v-for="child in childHealth"
-    :key="child.name"
-    :instance="instance"
-    :name="child.name"
-    :health="child.value"
-  />
+  <template v-if="index < 10">
+    <health-details
+      v-for="(child, idx) in childHealth"
+      :key="`${child.name}_${idx}`"
+      :instance="instance"
+      :index="index + 1"
+      :name="child.name"
+      :health="child.value"
+    />
+  </template>
 </template>
 
 <script lang="ts" setup>
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
 import prettyBytes from 'pretty-bytes';
-import { computed, onMounted, ref, useId } from 'vue';
+import { computed, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import SbaFormattedObj from '@/components/sba-formatted-obj.vue';
@@ -120,25 +124,37 @@ import autolink from '@/utils/autolink';
 const { t } = useI18n();
 const id = useId();
 
-const { health, name, instance } = defineProps<{
+const { health, name, instance, index = 0 } = defineProps<{
   instance: Instance;
   name: string;
   health: Record<string, any>;
+  index?: number;
 }>();
 
-const COLLAPSED_KEY = `de.codecentric.spring-boot-admin.health-details.${name}.${instance.id}.collapsed`;
-const isCollapsed = ref(true);
+// Sanitised name safe for use in HTML id attributes
+const safeNameId = computed(() => (name ?? '').replace(/[^a-zA-Z0-9_-]/g, '_'));
 
-onMounted(() => {
-  const stored = localStorage.getItem(COLLAPSED_KEY);
-  if (stored !== null) {
-    isCollapsed.value = stored === 'true';
+const COLLAPSED_KEY = computed(
+  () =>
+    `de.codecentric.spring-boot-admin.health-details.${encodeURIComponent(name ?? '')}.${encodeURIComponent(instance?.id ?? '')}.collapsed`,
+);
+
+function readCollapsedFromStorage(): boolean {
+  if (!instance?.id) return true;
+  try {
+    const stored = localStorage.getItem(COLLAPSED_KEY.value);
+    if (stored !== null) return stored === 'true';
+  } catch {
+    // storage unavailable — fall back to default
   }
-});
+  return true;
+}
+
+const isCollapsed = ref(readCollapsedFromStorage());
 
 type Details = {
   name: string;
-  value: string;
+  value: unknown;
 };
 
 const isChildHealth = (value: any) => {
@@ -163,9 +179,20 @@ const childHealth = computed(() => {
   return [];
 });
 
+watch(COLLAPSED_KEY, () => {
+  isCollapsed.value = readCollapsedFromStorage();
+});
+
 const toggleCollapsed = () => {
-  isCollapsed.value = !isCollapsed.value;
-  localStorage.setItem(COLLAPSED_KEY, JSON.stringify(isCollapsed.value));
+  const next = !isCollapsed.value;
+  if (instance?.id) {
+    try {
+      localStorage.setItem(COLLAPSED_KEY.value, JSON.stringify(next));
+    } catch {
+      // storage unavailable — in-memory state still updated
+    }
+  }
+  isCollapsed.value = next;
 };
 </script>
 

From 7550b6778601bcf74ba10608f83081a1106201de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sun, 17 May 2026 17:10:13 +0200
Subject: [PATCH 4/7] fix(health-details): fix detail key collision, ?? for
 source selection, extract safeDetailId

- details v-for :key now includes loop index to handle duplicate detail names
- health.details || health.components replaced with ?? and validated as plain object,
  eliminating false fallthrough on falsy health.details values and both sources
  being shared via a single healthEntries computed
- Inline detail.name.replace() repeated three times replaced with safeDetailId(name, idx)
  helper that also falls back to 'detail_N' when all characters are special
---
 .../instances/details/health-details.vue      | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index c40164da465..fdf326f166e 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -55,9 +55,9 @@
       :aria-labelledby="`health-${id}__${safeNameId}`"
     >
       <dl v-if="!isCollapsed" class="grid grid-cols-6 mt-2">
-        <template v-for="detail in details" :key="detail.name">
+        <template v-for="(detail, idx) in details" :key="`${detail.name}_${idx}`">
           <dt
-            :id="`health-detail-${id}__${detail.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`"
+            :id="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
             class="font-medium col-span-2"
             v-text="detail.name"
           />
@@ -69,7 +69,7 @@
             class="col-span-4"
             role="definition"
             :aria-label="detail.name"
-            :aria-labelledby="`health-detail-${id}__${detail.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`"
+            :aria-labelledby="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
             v-text="prettyBytes(detail.value as number)"
           />
           <dd
@@ -77,7 +77,7 @@
             class="col-span-4"
             role="definition"
             :aria-label="detail.name"
-            :aria-labelledby="`health-detail-${id}__${detail.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`"
+            :aria-labelledby="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
           >
             <sba-formatted-obj
               class="overflow-auto whitespace-pre!"
@@ -88,7 +88,7 @@
             v-else
             role="definition"
             :aria-label="detail.name"
-            :aria-labelledby="`health-detail-${id}__${detail.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`"
+            :aria-labelledby="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
             class="wrap-break-word whitespace-pre-wrap col-span-4"
             v-html="autolink(String(detail.value ?? ''))"
           />
@@ -134,6 +134,12 @@ const { health, name, instance, index = 0 } = defineProps<{
 // Sanitised name safe for use in HTML id attributes
 const safeNameId = computed(() => (name ?? '').replace(/[^a-zA-Z0-9_-]/g, '_'));
 
+// Sanitise a detail key for use in HTML ids; fall back to its index when result would be empty
+function safeDetailId(detailName: string, idx: number): string {
+  const safe = detailName.replace(/[^a-zA-Z0-9_-]/g, '_');
+  return safe.length > 0 ? safe : `detail_${idx}`;
+}
+
 const COLLAPSED_KEY = computed(
   () =>
     `de.codecentric.spring-boot-admin.health-details.${encodeURIComponent(name ?? '')}.${encodeURIComponent(instance?.id ?? '')}.collapsed`,
@@ -161,23 +167,25 @@ const isChildHealth = (value: any) => {
   return value !== null && typeof value === 'object' && 'status' in value;
 };
 
-const details = computed(() => {
-  if (health.details || health.components) {
-    return Object.entries(health.details || health.components)
-      .filter(([, value]) => !isChildHealth(value))
-      .map(([name, value]) => ({ name, value }) as Details);
+const healthEntries = computed(() => {
+  const source = health.details ?? health.components;
+  if (source && typeof source === 'object' && !Array.isArray(source)) {
+    return Object.entries(source);
   }
   return [];
 });
 
-const childHealth = computed(() => {
-  if (health.details || health.components) {
-    return Object.entries(health.details || health.components)
-      .filter(([, value]) => isChildHealth(value))
-      .map(([name, value]) => ({ name, value }));
-  }
-  return [];
-});
+const details = computed(() =>
+  healthEntries.value
+    .filter(([, value]) => !isChildHealth(value))
+    .map(([name, value]) => ({ name, value }) as Details),
+);
+
+const childHealth = computed(() =>
+  healthEntries.value
+    .filter(([, value]) => isChildHealth(value))
+    .map(([name, value]) => ({ name, value })),
+);
 
 watch(COLLAPSED_KEY, () => {
   isCollapsed.value = readCollapsedFromStorage();

From 54d785963eef90dc04aa76997cd6a2c00b5f5c27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sun, 17 May 2026 17:32:27 +0200
Subject: [PATCH 5/7] fix(details-health): pass explicit index to
 health-details for correct row alternation

The Instance node always received index=0, and each health group node also
defaulted to index=0, so all top-level rows rendered with the same bg-white
background. Now the Instance node is explicitly :index="0" and each group
node receives :index="groupIdx + 1", producing correct even/odd alternation
across all sibling health-details rows.
---
 .../views/instances/details/details-health.vue         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
index fab7912d158..b3b3621edae 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
@@ -48,9 +48,14 @@
         :title="$t('term.fetch_failed')"
       />
       <div class="-mx-4 -my-3">
-        <health-details :instance="instance" :health="health" name="Instance" />
+        <health-details
+          :instance="instance"
+          :health="health"
+          :index="0"
+          name="Instance"
+        />
 
-        <template v-for="group in healthGroups" :key="group.name">
+        <template v-for="(group, groupIdx) in healthGroups" :key="group.name">
           <div
             class="px-4 py-2 border-t border-gray-200 sm:px-6"
             :class="{ 'border-b': isHealthGroupOpen(group.name) }"
@@ -88,6 +93,7 @@
               :instance="instance"
               :health="group.data"
               :name="group.name"
+              :index="groupIdx + 1"
             />
           </div>
         </template>

From 05160885755cfc9a0bfb8c5a1ebdc73411b2b6d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sun, 17 May 2026 17:39:09 +0200
Subject: [PATCH 6/7] fix(health-details): separate depth (recursion guard)
 from index (row alternation)

index + 1 was passed to all siblings, giving every child the same index and
therefore the same background colour. Introduced a separate 'depth' prop for
the recursion guard (depth < 10) and pass ':index="idx"' to children so each
sibling gets its own position-based index, producing correct even/odd alternation
at every level of the health component tree.
---
 .../views/instances/details/health-details.vue       | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index fdf326f166e..7be2d49ddf2 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -96,12 +96,13 @@
       </dl>
     </dd>
   </dl>
-  <template v-if="index < 10">
+  <template v-if="depth < 10">
     <health-details
       v-for="(child, idx) in childHealth"
       :key="`${child.name}_${idx}`"
       :instance="instance"
-      :index="index + 1"
+      :index="idx"
+      :depth="depth + 1"
       :name="child.name"
       :health="child.value"
     />
@@ -124,12 +125,15 @@ import autolink from '@/utils/autolink';
 const { t } = useI18n();
 const id = useId();
 
-const { health, name, instance, index = 0 } = defineProps<{
+const { health, name, instance, index = 0, depth = 0 } = defineProps<{
   instance: Instance;
   name: string;
   health: Record<string, any>;
+  /** Row position within siblings — drives even/odd background alternation. */
   index?: number;
-}>();
+  /** Recursion depth — used to prevent infinite nesting. */
+  depth?: number;
+}>(); 
 
 // Sanitised name safe for use in HTML id attributes
 const safeNameId = computed(() => (name ?? '').replace(/[^a-zA-Z0-9_-]/g, '_'));

From 7e880bdbf858e23b3f27b7a4ad1e60c5eb4929e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sun, 17 May 2026 18:06:19 +0200
Subject: [PATCH 7/7] feat(health-details): improve layout and accessibility of
 health details

---
 .../frontend/components/sba-icon-button.vue   |  4 +-
 .../instances/details/details-health.vue      | 12 +++--
 .../instances/details/health-details.vue      | 45 ++++++++++++-------
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
index 3e34b04dc69..2c76685730f 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
@@ -41,7 +41,9 @@ export default defineComponent({
       default: null,
     },
     icon: {
-      type: [Object, Array, String] as PropType<Array<string> | string | IconDefinition>,
+      type: [Object, Array, String] as PropType<
+        Array<string> | string | IconDefinition
+      >,
       required: true,
     },
     size: {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
index b3b3621edae..676dec33073 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
@@ -76,9 +76,15 @@
                     'rotate-90': isHealthGroupOpen(group.name),
                   }"
                 />
-                <span v-text="$t('instances.details.health_group.title')"></span
-                >:&nbsp;
-                <span v-text="group.name"></span>
+                <span
+                  v-text="$t('instances.details.health_group.title')"
+                />:&nbsp; <span v-text="group.name"></span>
+                <sba-status-badge
+                  v-if="group.data?.status"
+                  class="ml-2 fade"
+                  :status="group.data?.status"
+                />
+
                 <font-awesome-icon
                   v-if="healthGroupLoadingMap[group.name]"
                   icon="sync-alt"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
index 7be2d49ddf2..b6ba00b2e97 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -16,8 +16,7 @@
 
 <template>
   <dl
-    class="px-4 py-3"
-    :class="{ 'bg-white': index % 2 === 0, 'bg-gray-100': index % 2 !== 0 }"
+    class="px-4 py-3 even:bg-white odd:bg-gray-50"
     role="group"
     :aria-label="name"
   >
@@ -32,21 +31,27 @@
         <sba-status-badge v-if="health.status" :status="health.status" />
       </div>
       <div v-if="details && details.length > 0" class="w-12 text-right">
-        <sba-icon-button
-          class="p-0!"
+        <sba-button
+          class="p-0! border-none"
           :class="
             classNames({
               'text-sba-600!': !isCollapsed,
               'text-black': isCollapsed,
             })
           "
-          :icon="faCircleInfo"
           :title="t('instances.details.health.toggle_details', { name })"
           :aria-label="t('instances.details.health.toggle_details', { name })"
           :aria-expanded="String(!isCollapsed)"
           :aria-controls="`health-details-${id}__${safeNameId}`"
           @click="() => toggleCollapsed()"
-        />
+        >
+          <font-awesome-icon
+            :icon="faChevronRight"
+            class="transition-transform"
+            :class="{ 'rotate-90': !isCollapsed }"
+          />
+          <font-awesome-icon :icon="faCircleInfo" />
+        </sba-button>
       </div>
     </dt>
     <dd
@@ -55,7 +60,10 @@
       :aria-labelledby="`health-${id}__${safeNameId}`"
     >
       <dl v-if="!isCollapsed" class="grid grid-cols-6 mt-2">
-        <template v-for="(detail, idx) in details" :key="`${detail.name}_${idx}`">
+        <template
+          v-for="(detail, idx) in details"
+          :key="`${detail.name}_${idx}`"
+        >
           <dt
             :id="`health-detail-${id}__${safeDetailId(detail.name, idx)}`"
             class="font-medium col-span-2"
@@ -73,7 +81,9 @@
             v-text="prettyBytes(detail.value as number)"
           />
           <dd
-            v-else-if="detail.value !== null && typeof detail.value === 'object'"
+            v-else-if="
+              detail.value !== null && typeof detail.value === 'object'
+            "
             class="col-span-4"
             role="definition"
             :aria-label="detail.name"
@@ -101,7 +111,6 @@
       v-for="(child, idx) in childHealth"
       :key="`${child.name}_${idx}`"
       :instance="instance"
-      :index="idx"
       :depth="depth + 1"
       :name="child.name"
       :health="child.value"
@@ -110,14 +119,16 @@
 </template>
 
 <script lang="ts" setup>
-import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import {
+  faChevronRight,
+  faCircleInfo,
+} from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
 import prettyBytes from 'pretty-bytes';
 import { computed, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import SbaFormattedObj from '@/components/sba-formatted-obj.vue';
-import SbaIconButton from '@/components/sba-icon-button.vue';
 
 import Instance from '@/services/instance';
 import autolink from '@/utils/autolink';
@@ -125,15 +136,17 @@ import autolink from '@/utils/autolink';
 const { t } = useI18n();
 const id = useId();
 
-const { health, name, instance, index = 0, depth = 0 } = defineProps<{
+const {
+  health,
+  name,
+  instance,
+  depth = 0,
+} = defineProps<{
   instance: Instance;
   name: string;
   health: Record<string, any>;
-  /** Row position within siblings — drives even/odd background alternation. */
-  index?: number;
-  /** Recursion depth — used to prevent infinite nesting. */
   depth?: number;
-}>(); 
+}>();
 
 // Sanitised name safe for use in HTML id attributes
 const safeNameId = computed(() => (name ?? '').replace(/[^a-zA-Z0-9_-]/g, '_'));