Index: src/assets/js/ward.js
===================================================================
--- src/assets/js/ward.js	(revision 303bfc4daeb122010e84e14370b612f2e7e286f4)
+++ src/assets/js/ward.js	(revision a5a62490bec7673afe4e4c5c788f48466eb96b8b)
@@ -98,4 +98,121 @@
 }
 
+/**
+ * De kaarten. De body komt AF van de server (dezelfde partial als de Krant),
+ * dus hier alleen invoegen; zelf HTML samenstellen zou opmaak, media en
+ * quote-kaarten opnieuw moeten uitvinden en er anders uit laten zien.
+ */
+function renderFeed(items) {
+  const box = document.getElementById('card-list');
+  box.replaceChildren();
+  document.getElementById('feed-empty').hidden = items.length > 0;
+
+  items.forEach((it) => {
+    const card = el('article', 'post');
+    card.dataset.note = it.id;              // waar de boei op mikt
+    const head = el('div', 'row');
+    if (it.authorIcon) {
+      const img = el('img', 'avatar');
+      img.src = it.authorIcon; img.alt = ''; img.loading = 'lazy';
+      head.append(img);
+    }
+    head.append(el('span', 'name', it.authorName || it.author));
+    head.append(el('span', 'when', it.whenText || ''));
+    card.append(head);
+
+    if (it.cw) card.append(el('p', 'cw', it.cw));
+    const body = el('div', 'body');
+    body.innerHTML = it.bodyHtml || '';     // server-gerenderd en gesaniteerd
+    card.append(body);
+    box.append(card);
+  });
+}
+
+async function loadFeed() {
+  try {
+    const r = await fetch('/ward/api/feed', { headers: { Accept: 'application/json' } });
+    if (!r.ok) return;
+    renderFeed((await r.json()).items || []);
+  } catch { /* de pagina blijft staan met wat er al is */ }
+}
+
+/**
+ * De reddingsboei: sleep hem op een kaart en je guardians krijgen die post.
+ *
+ * Pointer-events in plaats van muis- of touch-events apart, want dat is het
+ * enige dat op een telefoon en met een muis hetzelfde doet. `setPointerCapture`
+ * zorgt dat de sleep van jou blijft, en `touch-action: none` op de boei houdt
+ * de pagina stil terwijl je hem verplaatst: zonder dat vecht het slepen met
+ * scrollen en verlies je hem halverwege.
+ */
+function wireBuoy() {
+  const buoy = document.getElementById('buoy');
+  const dlg = document.getElementById('help-dialog');
+  let dragging = false, dx = 0, dy = 0, target = null;
+
+  const cardUnder = (x, y) => document.elementFromPoint(x, y)?.closest('.post');
+
+  buoy.addEventListener('pointerdown', (e) => {
+    dragging = true;
+    buoy.setPointerCapture(e.pointerId);
+    const r = buoy.getBoundingClientRect();
+    dx = e.clientX - r.left; dy = e.clientY - r.top;
+    buoy.classList.add('dragging');
+  });
+
+  buoy.addEventListener('pointermove', (e) => {
+    if (!dragging) return;
+    buoy.style.left = `${e.clientX - dx}px`;
+    buoy.style.top = `${e.clientY - dy}px`;
+    buoy.style.right = 'auto'; buoy.style.bottom = 'auto';
+    // Onderweg oplichten waar hij zou landen, zodat je ziet wat je kiest.
+    document.querySelectorAll('.post.hover').forEach((n) => n.classList.remove('hover'));
+    cardUnder(e.clientX, e.clientY)?.classList.add('hover');
+  });
+
+  const drop = (e) => {
+    if (!dragging) return;
+    dragging = false;
+    buoy.classList.remove('dragging');
+    const card = cardUnder(e.clientX, e.clientY);
+    document.querySelectorAll('.post.hover').forEach((n) => n.classList.remove('hover'));
+    // Terug naar zijn hoek: de boei hoort altijd op dezelfde plek te liggen.
+    buoy.style.left = buoy.style.top = 'auto';
+    buoy.style.right = ''; buoy.style.bottom = '';
+    if (card) askHelp(card.dataset.note, card.querySelector('.name')?.textContent || '');
+  };
+  buoy.addEventListener('pointerup', drop);
+  buoy.addEventListener('pointercancel', drop);
+
+  // Een tik (zonder slepen) vraagt hulp zonder dat er een post bij hoort.
+  buoy.addEventListener('click', (e) => { if (!e.detail || !dragging) askHelp(null, null); });
+
+  function askHelp(noteId, who) {
+    document.getElementById('help-title').textContent = who
+      ? `Hulp vragen bij het bericht van ${who}?` : 'Hulp vragen aan je guardians?';
+    dlg.dataset.note = noteId || '';
+    document.getElementById('help-words').value = '';
+    dlg.showModal();
+  }
+
+  dlg.addEventListener('close', async () => {
+    if (dlg.returnValue !== 'send') return;
+    const body = { note: dlg.dataset.note || undefined, words: document.getElementById('help-words').value };
+    const hint = document.getElementById('help-hint');
+    try {
+      const r = await fetch('/ward/api/help', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const out = await r.json().catch(() => ({}));
+      hint.textContent = r.ok ? state.strings.helpSent
+        : (out.error === 'no_guardians' ? 'Je hebt nog geen guardians om te vragen.' : 'Dat lukte niet; probeer het nog eens.');
+    } catch {
+      hint.textContent = 'Dat lukte niet; probeer het nog eens.';
+    }
+  });
+}
+
 /** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. */
 async function loadChecks() {
@@ -118,7 +235,10 @@
   }
   hint.textContent = `Gaat naar ${state.guardians.length} guardian(s).`;
+  btn.addEventListener('click', () => document.getElementById('buoy').click());
 }
 
 renderGuardians(null);
+wireBuoy();
+loadFeed();
 renderOffers();
 renderWaiting();