feat(health): Little Blue health band — avatar, grouped service tiles, local icons

public/views/health_band.js

@@ -0,0 +1,27 @@
+import { el, mount } from '../dom.js';
+import { api } from '../api.js';
+import { littleblueAvatar } from '../components/littleblue_avatar.js';
+import { serviceTile } from '../components/service_tile.js';
+
+const TITLE = { agents: 'Agents', infrastructure: 'Infrastructure', media: 'Media', other: 'Other' };
+let host, timer;
+async function load() {
+  if (!host) return;
+  try {
+    const groups = await api.get('/api/health/services');
+    const sections = groups.map(g =>
+      el('div', { class: 'lb-section' },
+        el('div', { class: 'lb-group' },
+          el('span', { class: 'gname' }, TITLE[g.category] || g.category),
+          el('span', { class: 'gcount' }, `${g.healthy}/${g.total} healthy`),
+          el('span', { class: 'line' })),
+        el('div', { class: 'tiles' }, g.services.map(serviceTile))));
+    mount(host,
+      el('div', { class: 'lbwrap' }, littleblueAvatar(),
+        el('div', {}, el('div', { class: 'lb-name' }, 'Little Blue'),
+          el('div', { class: 'lb-sub' }, 'Health & Uptime of the lab'))),
+      sections);
+  } catch { mount(host, el('span', { class: 'muted' }, 'Health band unavailable')); }
+}
+export function renderHealthBand(el_) { host = el_; load(); timer = setInterval(load, 60000); }
+export function stopHealthBand() { clearInterval(timer); host = null; }