diff --git a/public/components/littleblue_avatar.js b/public/components/littleblue_avatar.js new file mode 100644 index 0000000..e7e0401 --- /dev/null +++ b/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 = ` + + + + + + `; + return el('div', { class: 'lb-av' }, svg); +} diff --git a/public/components/service_tile.js b/public/components/service_tile.js new file mode 100644 index 0000000..8525ebe --- /dev/null +++ b/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 ↗')); +} diff --git a/public/style.css b/public/style.css index 6f8255c..4e5dd9b 100644 --- a/public/style.css +++ b/public/style.css @@ -212,3 +212,31 @@ ul.plain li:last-child { border-bottom: none; } .sv-card:hover .sv-bar > i { box-shadow: 0 0 9px rgba(255,79,46,.55); } .sv-search-input{width:100%;background:#0d0d13;border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--font-mono);font-size:12px} .sv-run{background:var(--accent-soft);border:1px solid var(--accent-dim);color:var(--accent);border-radius:5px;padding:3px 10px;font-family:var(--font-ui);font-size:11px;cursor:pointer} + +/* ===== Little Blue health band (Task 22) ===== */ +#sv-health { margin-top: 28px; } +.lbwrap { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } +.lb-av { width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(125,211,216,.4)); animation: lb-bob 4s ease-in-out infinite; } +@keyframes lb-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } +.lb-name { font-family: var(--font-display); letter-spacing: .08em; font-size: 15px; color: var(--text); } +.lb-sub { font-family: var(--font-body); font-style: italic; color: var(--lb); font-size: 14px; } +.lb-group { margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; } +.lb-group .gname { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); } +.lb-group .gcount { font-family: var(--font-mono); font-size: 10px; color: var(--lb); } +.lb-group .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(125,211,216,.25), transparent); } +.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } +.tile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; + background: linear-gradient(160deg, #14141c, #101017); text-decoration: none; color: var(--text); transition: border-color .25s, transform .25s; } +.tile:hover { transform: translateY(-2px); border-color: #37404a; } +.tile-icon, .tile-icon-fb { width: 26px; height: 26px; border-radius: 6px; flex: none; } +.tile-icon-fb { display: grid; place-items: center; background: #20202a; color: var(--muted); font-family: var(--font-mono); font-size: 13px; } +.tile-main { flex: 1; min-width: 0; } +.tile-nm { font-family: var(--font-mono); font-size: 12px; display: flex; align-items: center; gap: 7px; } +.tile-host { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; } +.tile .dot { width: 8px; height: 8px; border-radius: 50%; } +.tile.status-ok .dot { background: var(--ok); box-shadow: 0 0 7px var(--ok); } +.tile.status-warn .dot { background: var(--warn); box-shadow: 0 0 7px var(--warn); } +.tile.status-down .dot { background: var(--bad); box-shadow: 0 0 7px var(--bad); } +.tile.status-unknown .dot { background: var(--muted); } +.tile-go { color: var(--lb); font-size: 11px; opacity: 0; transition: opacity .25s; } +.tile:hover .tile-go { opacity: 1; } diff --git a/public/views/health_band.js b/public/views/health_band.js new file mode 100644 index 0000000..f175ea7 --- /dev/null +++ b/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; } diff --git a/public/views/sacred_valley.js b/public/views/sacred_valley.js index 65b86bc..a86b2d0 100644 --- a/public/views/sacred_valley.js +++ b/public/views/sacred_valley.js @@ -1,5 +1,6 @@ import { el, mount } from '../dom.js'; import { api } from '../api.js'; +import { renderHealthBand, stopHealthBand } from './health_band.js'; import { svCard } from '../components/sv_card.js'; import { attachReorder } from '../components/sv_reorder.js'; import { orderCards } from './cards/registry.js'; @@ -15,7 +16,7 @@ const CARD_MODULES = [clock, weather, hostPerf, jobs, inbox, search, speedtest]; let active = []; // mounted cards needing stop() export async function render(main) { - active.forEach(c => c.stop && c.stop()); active = []; + active.forEach(c => c.stop && c.stop()); active = []; stopHealthBand(); mount(main, el('h1', { class: 'view-h1' }, 'Sacred Valley'), el('p', { class: 'view-sub' }, 'The homelab, at a glance.'), @@ -43,5 +44,5 @@ export async function render(main) { try { await api.put('/api/dashboard/layout', { ...layout, card_order: newOrder }); layout.card_order = newOrder; } catch (e) { console.error('save layout', e); } }); - // health band wiring arrives in Task 22. + renderHealthBand(document.getElementById('sv-health')); }