feat(sacred-valley): card factory, registry ordering, view skeleton

Adds the Plan 6 card framework: svCard() chrome factory, pure orderCards()
ordering helper with unit tests, three stub card modules (clock/weather/host-perf),
and rewrites sacred_valley.js with the two-band layout that mounts ordered cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/components/sv_card.js

@@ -0,0 +1,12 @@
+import { el } from '../dom.js';
+
+// Builds the refined-B chrome shell and returns { root, body }. The card module
+// fills `body` in its mount(); start()/stop() own its refresh timer.
+export function svCard(def) {
+  const body = el('div', { class: 'sv-card-body' });
+  const root = el('div', { class: 'sv-card', dataset: { size: def.size || 'm', cardId: def.id } },
+    el('div', { class: 'sv-card-title' }, def.title),
+    body
+  );
+  return { root, body };
+}

public/views/cards/clock.js

@@ -0,0 +1,2 @@
+// temporary stub — filled in Task 5
+export default { id: 'clock', title: 'Clock', size: 's', mount() {}, start() {}, stop() {} };

public/views/cards/host_perf.js

@@ -0,0 +1,2 @@
+// temporary stub — filled in Task 9
+export default { id: 'host-perf', title: 'Host Perf', size: 'm', mount() {}, start() {}, stop() {} };

public/views/cards/registry.js

@@ -0,0 +1,14 @@
+// Pure ordering logic (kept DOM-free so it is unit-testable). The card MODULES
+// themselves are imported by sacred_valley.js, which passes their defs here.
+export function orderCards(defs, layout = { card_order: [], hidden: [] }) {
+  const byId = new Map(defs.map(d => [d.id, d]));
+  const hidden = new Set(layout.hidden || []);
+  const out = [];
+  for (const id of layout.card_order || []) {
+    if (byId.has(id) && !hidden.has(id)) { out.push(byId.get(id)); byId.delete(id); }
+  }
+  for (const d of defs) {
+    if (byId.has(d.id) && !hidden.has(d.id)) out.push(d);
+  }
+  return out;
+}

public/views/cards/weather.js

@@ -0,0 +1,2 @@
+// temporary stub — filled in Task 7
+export default { id: 'weather', title: 'Weather', size: 's', mount() {}, start() {}, stop() {} };

public/views/sacred_valley.js

@@ -1,15 +1,34 @@
-// T17 stub — placeholder card per plan (full widgets in Plan 6).
 import { el, mount } from '../dom.js';
+import { api } from '../api.js';
+import { svCard } from '../components/sv_card.js';
+import { orderCards } from './cards/registry.js';
+import clock from './cards/clock.js';
+import weather from './cards/weather.js';
+import hostPerf from './cards/host_perf.js';
+
+const CARD_MODULES = [clock, weather, hostPerf];   // grows in later tasks
+let active = [];                                   // mounted cards needing stop()
+
 export async function render(main) {
+  active.forEach(c => c.stop && c.stop()); active = [];
   mount(main,
     el('h1', { class: 'view-h1' }, 'Sacred Valley'),
-    el('p', { class: 'view-sub' }, 'The homelab dashboard. Widgets port over in Plan 6.'),
+    el('p', { class: 'view-sub' }, 'The homelab, at a glance.'),
-    el('div', { class: 'card' },
+    el('div', { id: 'sv-cards' }),
-      el('h3', {}, 'Coming home'),
+    el('div', { id: 'sv-health' })
-      el('p', { class: 'muted' },
-        'Weather, speedtest, host-perf, media cards — all ride in from Void 1.x in Plan 6. ' +
-        'For now this card holds the route open so the sidebar link works.'
-      )
-    )
   );
+
+  let layout = { card_order: [], hidden: [], sizes: {} };
+  try { layout = await api.get('/api/dashboard/layout'); } catch { /* defaults */ }
+
+  const grid = document.getElementById('sv-cards');
+  const ordered = orderCards(CARD_MODULES, layout);
+  for (const def of ordered) {
+    const size = layout.sizes?.[def.id] || def.size;
+    const { root, body } = svCard({ ...def, size });
+    grid.appendChild(root);
+    try { def.mount(body); def.start && def.start(); active.push(def); }
+    catch (e) { body.appendChild(el('span', { class: 'muted' }, 'card failed')); console.error(def.id, e); }
+  }
+  // health band + drag wiring arrive in Tasks 22 and 10.
 }

tests/frontend/card_registry.test.js

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { orderCards } from '../../public/views/cards/registry.js';
+
+const defs = [{ id: 'clock' }, { id: 'weather' }, { id: 'host-perf' }];
+
+describe('orderCards', () => {
+  it('uses saved order first, then appends new cards in default order', () => {
+    const out = orderCards(defs, { card_order: ['weather'], hidden: [] });
+    expect(out.map(c => c.id)).toEqual(['weather', 'clock', 'host-perf']);
+  });
+  it('drops hidden cards', () => {
+    const out = orderCards(defs, { card_order: [], hidden: ['clock'] });
+    expect(out.map(c => c.id)).toEqual(['weather', 'host-perf']);
+  });
+  it('ignores stale ids in saved order', () => {
+    const out = orderCards(defs, { card_order: ['gone', 'clock'], hidden: [] });
+    expect(out.map(c => c.id)).toEqual(['clock', 'weather', 'host-perf']);
+  });
+});