Harden Calm Filters surface before Track 3

- Add API test layer (TestClient): bad prefs -> 200, mute affects feed,
  avoid-term filters, brief filters down, counts match filtered feed.
- Render article cards via the DOM API (textContent) instead of HTML string
  interpolation, and only allow http(s) hrefs — defense-in-depth XSS guard for
  when the feed faces untrusted sources publicly.
- Refresh the stale README Next Steps to reflect what's done vs ahead.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

goodnews/static/index.html

@@ -192,28 +192,55 @@
       return r.json();
     }
 
+    // Build cards with the DOM API (textContent) rather than HTML strings, so
+    // feed-supplied text can never inject markup even if upstream cleaning misses.
+    const node = (tag, cls, text) => {
+      const e = document.createElement(tag);
+      if (cls) e.className = cls;
+      if (text != null) e.textContent = text;
+      return e;
+    };
+
     function articleCard(a, showRank) {
-      const rank = showRank && a.rank ? `<span class="rank-badge">${a.rank}</span>` : "";
-      const tags = [a.topic, a.flavor].filter(Boolean).map(t => `<span class="tag">${t}</span>`).join(" ");
-      const desc = a.description ? `<p class="desc">${a.description}</p>` : "";
-      const why = a.reason_text ? `<div class="why">${a.reason_text}</div>` : "";
-      const acts = [];
-      if (a.topic) acts.push(`<button data-act="notToday" data-topic="${a.topic}">Not today</button>`);
-      if (a.flavor) acts.push(`<button data-act="lessLikeThis" data-flavor="${a.flavor}">Less like this</button>`);
-      if (a.topic) acts.push(`<button data-act="alwaysHide" data-topic="${a.topic}">Always hide ${a.topic}</button>`);
-      return `<article>
-        <div class="meta">${rank}${tags}<span>${a.source}</span>
-        ${a.published_at ? `<span>· ${a.published_at.slice(0,10)}</span>` : ""}</div>
-        <h3><a href="${a.url}" target="_blank" rel="noopener">${a.title}</a></h3>
-        ${desc}${why}
-        <div class="actions">${acts.join("")}</div>
-      </article>`;
+      const article = node("article");
+      const meta = node("div", "meta");
+      if (showRank && a.rank) meta.append(node("span", "rank-badge", a.rank));
+      [a.topic, a.flavor].filter(Boolean).forEach(t => meta.append(node("span", "tag", t)));
+      meta.append(node("span", null, a.source));
+      if (a.published_at) meta.append(node("span", null, "· " + a.published_at.slice(0, 10)));
+      article.append(meta);
+
+      const h3 = node("h3");
+      const link = node("a", null, a.title);
+      link.href = (typeof a.url === "string" && /^https?:\/\//.test(a.url)) ? a.url : "#";
+      link.target = "_blank"; link.rel = "noopener";
+      h3.append(link);
+      article.append(h3);
+
+      if (a.description) article.append(node("p", "desc", a.description));
+      if (a.reason_text) article.append(node("div", "why", a.reason_text));
+
+      const acts = node("div", "actions");
+      const btn = (label, act, key, val) => {
+        const b = node("button", null, label);
+        b.dataset.act = act;
+        if (key) b.dataset[key] = val;
+        return b;
+      };
+      if (a.topic) acts.append(btn("Not today", "notToday", "topic", a.topic));
+      if (a.flavor) acts.append(btn("Less like this", "lessLikeThis", "flavor", a.flavor));
+      if (a.topic) acts.append(btn("Always hide " + a.topic, "alwaysHide", "topic", a.topic));
+      article.append(acts);
+      return article;
     }
 
     function renderList(target, items, showRank) {
-      target.innerHTML = items.length
-        ? items.map(a => articleCard(a, showRank)).join("")
-        : `<div class="empty">Nothing here right now — try easing a filter.</div>`;
+      target.replaceChildren();
+      if (!items.length) {
+        target.append(node("div", "empty", "Nothing here right now — try easing a filter."));
+        return;
+      }
+      items.forEach(a => target.append(articleCard(a, showRank)));
     }
 
     // delegated clicks for the per-article gentle actions