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

public/components/littleblue_avatar.js

@@ -0,0 +1,14 @@
+import { el } from '../dom.js';
+// Placeholder: a simple blue humanoid water-wisp. Swap for final art later.
+export function littleblueAvatar() {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 40 48'); svg.setAttribute('width', '40'); svg.setAttribute('height', '48');
+  svg.innerHTML = `
+    <defs><radialGradient id="lbg" cx="40%" cy="30%" r="70%">
+      <stop offset="0%" stop-color="#bff0f3"/><stop offset="55%" stop-color="#4fb6c4"/><stop offset="100%" stop-color="#1d5f70"/>
+    </radialGradient></defs>
+    <path d="M20 2 C12 14 6 20 6 30 a14 14 0 0 0 28 0 C34 20 28 14 20 2 Z" fill="url(#lbg)"/>
+    <circle cx="15" cy="28" r="2.4" fill="#06222a"/><circle cx="25" cy="28" r="2.4" fill="#06222a"/>
+    <path d="M15 35 q5 4 10 0" stroke="#06222a" stroke-width="1.6" fill="none" stroke-linecap="round"/>`;
+  return el('div', { class: 'lb-av' }, svg);
+}

public/components/service_tile.js

@@ -0,0 +1,11 @@
+import { el, safeHref } from '../dom.js';
+export function serviceTile(s) {
+  const img = el('img', { class: 'tile-icon', loading: 'lazy', src: `/api/icons/${s.icon}.png`, alt: s.name });
+  img.onerror = () => img.replaceWith(el('div', { class: 'tile-icon-fb' }, (s.name[0] || '?').toUpperCase()));
+  return el('a', { class: `tile status-${s.status}`, href: safeHref(s.url), target: '_blank', rel: 'noreferrer' },
+    img,
+    el('div', { class: 'tile-main' },
+      el('div', { class: 'tile-nm' }, el('span', { class: 'dot' }), s.name),
+      el('div', { class: 'tile-host' }, s.host || '')),
+    el('span', { class: 'tile-go' }, 'open ↗'));
+}