fedipod-server 0.10.0 → 0.12.1

package/web/admin/client/index.html

@@ -4,18 +4,17 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — client</title>
+<link rel="stylesheet" href="../tokens.css">
 <style>
-:root { color-scheme: light dark; font-size: 112.5%; --link: #1a4f8a; --heading: #5b3a8e; }
-/* The bar is fixed height, the client takes the rest — the page never scrolls,
-   the frame does. */
+/* Colours are the shared tokens (tokens.css); only layout is here. The bar is
+   a fixed height, the client takes the rest — the page never scrolls, the frame
+   does. */
+:root { color-scheme: light dark; font-size: 125%; }
 html { height: 100%; }
 body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; height: 100dvh;
   display: flex; flex-direction: column; overflow: hidden; }
 main { flex: 1 1 auto; min-height: 0; display: flex; }
 #client { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; }
-@media (prefers-color-scheme: dark) {
-  :root { --link: #7fb3e8; --heading: #b9a3e3; }
-}
 </style>
 <link rel="stylesheet" href="../bar.css">
 </head>

package/web/admin/common.js

@@ -0,0 +1,23 @@
+// common.js — what every admin page starts from: the element lookup, the
+// door the page is served behind, and the two ways it talks to the agent.
+// Loaded first by the record page and by the setup page.
+
+const $ = (id) => document.getElementById(id);
+// The door this page is served behind: nothing when the agent runs on this
+// machine, `/app` when the identity is hosted by its own pod server. Read from
+// the page's own address, so one build serves both.
+const BASE = location.pathname.replace(/\/admin\/.*$/u, '');
+// Every call carries `x-fedipod-page`. On the Node agent it is ignored — the
+// Origin check there already refuses a page on somebody else's site. In the
+// browser build the agent IS this origin's service worker, which cannot see
+// Sec-Fetch-* and answers these routes with no password, so this header is the
+// whole door: a cross-site form cannot set one, and a cross-origin fetch that
+// sets one is stopped at a preflight the worker never grants. See sw-src.mjs.
+const PAGE_HEADER = { 'x-fedipod-page': '1' };
+const api = async (path, init) => {
+  const res = await fetch(BASE + path, { ...init, headers: { ...(init?.headers || {}), ...PAGE_HEADER } });
+  return { status: res.status, json: await res.json().catch(() => null) };
+};
+const postJson = (path, body) => api(path, {
+  method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body || {}),
+});

package/web/admin/connections.js

@@ -0,0 +1,112 @@
+// connections.js — the accounts held elsewhere: the rail, the connect forms
+// for Bluesky and for a fediverse account, and the migration aliases.
+
+// The connect form lives in the floating window, like every other form here.
+// The inbound transfer panel: the aliases live here now, not in the facts.
+$('do-transfer-in').addEventListener('click', () => {
+  solWindow.show('transfer-in-form', 'Transfer an account here');
+});
+
+// The rail: one click hides the actions; on a phone it starts hidden.
+function setRail(closed) {
+  $('rail').classList.toggle('closed', closed);
+  const t = $('rail-toggle');
+  t.setAttribute('aria-expanded', String(!closed));
+  t.querySelector('.rail-arrow').textContent = closed ? '»' : '«';
+  t.title = closed ? '   Show the action panel' : '   Hide the action panel';
+}
+$('rail-toggle').addEventListener('click', () => setRail(!$('rail').classList.contains('closed')));
+if (matchMedia('(max-width: 47rem)').matches) setRail(true);
+
+// One way in for both networks, because from the record they are the same
+// thing: an account elsewhere whose timeline joins the one you read here.
+$('ident-open').addEventListener('click', () => {
+  closePanels();
+  solWindow.show('ident-form', 'Connect an identity');
+});
+$('ident-pick-fedi').addEventListener('click', () => {
+  solWindow.show('fediacct-form', 'Connect a Fediverse account');
+});
+$('ident-pick-bsky').addEventListener('click', () => {
+  solWindow.show('bsky-form', 'Connect a Bluesky account');
+});
+
+let bskyBusy = false;
+$('bsky-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  if (bskyBusy) return;
+  bskyBusy = true;
+  try {
+    const r = await write('/atproto/connect', {
+      service: $('bsky-service').value.trim(),
+      identifier: $('bsky-identifier').value.trim(),
+      appPassword: $('bsky-password').value,
+    }, 'bluesky account connected');
+    if (r) {
+      $('bsky-password').value = '';
+      closePanels();
+      await load();
+    }
+  } finally { bskyBusy = false; }
+});
+// The sign-in happens at the other server, so this hands the browser over
+// rather than taking a password. What comes back lands on /fediacct/callback,
+// which this machine answers and nowhere else does.
+let fediBusy = false;
+$('fediacct-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  if (fediBusy) return;
+  fediBusy = true;
+  try {
+    const r = await write('/fediacct/connect', { host: $('fediacct-host').value.trim() }, '');
+    if (r?.authorize) location.href = r.authorize;
+  } finally { fediBusy = false; }
+});
+
+// Disconnecting Bluesky, pausing its feed and choosing its storage all live in
+// the account's Options menu now (see optionsMenu). Connecting is still here.
+// Adding resolves the old account on the agent side, so what lands in
+// alsoKnownAs is its canonical id, not the string typed here.
+// The accounts elsewhere this one may receive a Move from — the chips in the
+// Transfer-an-account-here panel. Each entry is removable, behind a second
+// click: servers still retrying a Move check the list, so removal is not a
+// tidy-up.
+function renderAliases() {
+  const box = $('alias-chips');
+  box.textContent = '';
+  for (const alias of config.aliases || []) {
+    let armed = false;
+    const rm = document.createElement('button');
+    rm.type = 'button';
+    rm.className = 'inline danger';
+    rm.textContent = '✕';
+    rm.title = '   Remove this alias';
+    rm.addEventListener('click', async () => {
+      if (!armed) {
+        armed = true;
+        rm.textContent = 'confirm ✕';
+        rm.title = '   Servers still retrying the Move check this alias — click again to remove it anyway';
+        return;
+      }
+      const r = await write('/alias', { remove: alias, confirm: true }, 'alias removed and the actor republished');
+      if (r) { config.aliases = r.aliases; render(); }
+    });
+    const chip = document.createElement('span');
+    chip.append(alias, ' ', rm);
+    box.append(chip, ' ');
+  }
+}
+
+let aliasBusy = false;
+$('alias-add').addEventListener('click', async () => {
+  if (aliasBusy) return;
+  const v = $('alias-input').value.trim();
+  if (!v) { say('enter the old account first — @you@old.server', 'err'); return; }
+  aliasBusy = true;
+  try {
+    const r = await write('/alias', { add: v }, 'alias added and the actor republished');
+    if (r) { $('alias-input').value = ''; config.aliases = r.aliases; render(); }
+  } finally { aliasBusy = false; }
+});
+
+

package/web/admin/gateway.js

@@ -0,0 +1,111 @@
+// gateway.js — the gateway row and its attach and detach forms, the inbox
+// prune actions, and the load that starts the page.
+
+const GATEWAY_CTL = $('gateway-ctl');           // held: it rides into a generated row
+const GATEWAY_WORD = $('gateway-word');
+const GW_OPEN_ATTACH = $('gateway-open-attach');
+const GW_OPEN_DETACH = $('gateway-open-detach');
+let gwState = null;
+async function refreshGateway() {
+  const { status, json: g } = await api('/gateway');
+  if (status !== 200 || !g) return;
+  gwState = g;
+  GATEWAY_CTL.hidden = false;
+  if (g.configured) {
+    let host = g.url;
+    try { host = new URL(g.url).host; } catch { /* show it as-is */ }
+    const frontName = g.frontActor?.match(/\/u\/([^/]+)\/ap\/actor\/?$/)?.[1];
+    GATEWAY_WORD.textContent = frontName ? `${host} — publishing as @${frontName}@${host}` : host;
+    GW_OPEN_ATTACH.hidden = true;
+    GW_OPEN_DETACH.hidden = false;
+  } else {
+    GATEWAY_WORD.textContent = '';
+    GW_OPEN_ATTACH.hidden = false;
+    GW_OPEN_DETACH.hidden = true;
+  }
+}
+const gwShape = () => document.querySelector('input[name=gwShape]:checked')?.value || 'pod';
+function gwPreviews() {
+  $('gw-pod-preview').textContent = config?.address || `@${config?.handle || 'you'}@your.pod`;
+  try { $('gw-front-host').textContent = new URL($('gw-front').value.trim()).host; }
+  catch { /* not a URL yet — the placeholder host stands */ }
+}
+function gwShapeChanged() { gwPreviews(); gwCheck(); }
+for (const r of document.querySelectorAll('input[name=gwShape]')) r.addEventListener('change', gwShapeChanged);
+// Typing in the blank IS choosing that shape.
+$('gw-name').addEventListener('focus', () => {
+  const r = document.querySelector('input[name=gwShape][value=front]');
+  if (!r.checked) { r.checked = true; gwShapeChanged(); }
+});
+GW_OPEN_ATTACH.addEventListener('click', () => {
+  gwShapeChanged();
+  solWindow.show('gateway-attach-form', 'Attach to a gateway');
+});
+GW_OPEN_DETACH.addEventListener('click', () => {
+  $('gw-detach-fronted').hidden = !gwState?.frontActor;
+  $('gw-detach-plain').hidden = !!gwState?.frontActor;
+  solWindow.show('gateway-detach-form', 'Detach from gateway');
+});
+// Live availability, asked through the agent (the front answers it without CORS).
+let gwTimer = null;
+function gwCheck() {
+  clearTimeout(gwTimer);
+  const front = $('gw-front').value.trim().replace(/\/+$/, '');
+  const name = $('gw-name').value.trim().toLowerCase();
+  $('gw-name-msg').textContent = ''; $('gw-name-msg').className = 'hint';
+  if (gwShape() !== 'front' || !front || !name) return;
+  gwTimer = setTimeout(async () => {
+    const { status, json } = await postJson('/gateway', { action: 'check', front, handle: name });
+    if (status !== 200 || !json) return;
+    $('gw-name-msg').textContent = json.available
+      ? `${name} is free at ${front.replace(/^https?:\/\//, '')}`
+      : (json.reason || 'that name is taken');
+    $('gw-name-msg').className = json.available ? 'hint' : 'warn';
+  }, 300);
+}
+$('gw-front').addEventListener('input', () => { gwPreviews(); gwCheck(); });
+$('gw-name').addEventListener('input', () => { gwPreviews(); gwCheck(); });
+$('gw-attach').addEventListener('click', async () => {
+  const front = $('gw-front').value.trim().replace(/\/+$/, '');
+  const fronted = gwShape() === 'front';
+  const name = $('gw-name').value.trim().toLowerCase();
+  if (fronted && !name) { say('give the handle you want at the gateway', 'err'); return; }
+  $('gw-attach').disabled = true;
+  // Pod-based sends no name: the door's label is the agent's business, not
+  // the user's, and the agent picks a free variant by itself.
+  const r = await write('/gateway',
+    { action: 'attach', front, ...(fronted ? { handle: name, fronted: true } : {}) },
+    fronted ? 'attached — the agent is restarting to publish under the gateway handle; reload in a moment'
+      : 'attached — your mail now arrives through the gateway, filtered');
+  $('gw-attach').disabled = false;
+  if (r) { closePanels(); refreshGateway(); }
+});
+$('gw-detach').addEventListener('click', async () => {
+  const fronted = !!gwState?.frontActor;
+  const r = await write('/gateway', { action: 'forget' },
+    fronted ? 'detached — the agent is restarting under your pod\'s own name; reload in a moment'
+      : 'detached — the actor was republished advertising your pod\'s own inbox');
+  if (r) { closePanels(); refreshGateway(); }
+});
+
+$('inbox-keep').addEventListener('click', () => {
+  dismissed = true;
+  $('pane-inbox').hidden = true;
+  say('leaving it to the agent — it drains oldest first');
+});
+
+$('inbox-prune').addEventListener('click', async () => {
+  const days = Number($('inbox-before').value);
+  const before = new Date(Date.now() - days * 86400_000).toISOString();
+  $('inbox-prune').disabled = true;
+  say(`discarding content older than ${days} days — this takes a while`);
+  const r = await write('/inbox/prune', { before }, 'done');
+  $('inbox-prune').disabled = false;
+  if (r) {
+    say(`applied ${r.applied} follow/unfollow/delete, discarded ${r.dropped + r.discarded} posts`
+      + (r.failed ? `, ${r.failed} failed` : ''));
+    renderInbox();
+  }
+});
+
+load();

package/web/admin/group.js

@@ -0,0 +1,258 @@
+// group.js — the group operator's console and the status, joins, review and
+// follower controls shared with a person: the pickers with their keyboard
+// guard, the request rows, and the refresh of every list.
+
+// Each control shows the setting it would change, so what it displays IS the
+// current state — no separate sentence reporting it.
+const MOD = { on: 'moderated', off: 'unmoderated' };
+function renderGroupToggles() {
+  $('joins-mod').value = config.approveJoins ? MOD.on : MOD.off;
+  $('review-mod').value = config.review ? MOD.on : MOD.off;
+}
+function renderStatus() {
+  STATUS_PICK.value = config.quiescedAt ? 'parked' : 'active';
+}
+
+// Parking is reversible — the follow graph is saved first and going back to
+// active re-sends a Follow to everyone in it — so the word applies directly,
+// like the moderation controls. The result line says what actually happened.
+let statusBusy = false;
+const setStatus = async (parked) => {
+  if (statusBusy || parked === !!config.quiescedAt) return;
+  statusBusy = true;
+  try {
+    const r = await write(parked ? '/park' : '/revive', {},
+      parked ? 'parking — unfollowing everyone and closing the inbox' : 'reviving — re-following the saved graph');
+    if (r) {
+      say(parked
+        ? `parked ${r.quiescedAt}: unfollowed ${r.unfollowed}/${r.following}, inbox closed`
+        : `revived: inbox open, ${r.refollowed}/${r.of} follow(s) re-sent`);
+      await load();
+    }
+    renderStatus();
+  } finally { statusBusy = false; }
+};
+
+// One write at a time, because committing an open picker with Enter fires our
+// keydown AND the browser's change — the second call must find the first still
+// holding the flag, or config, not yet updated by the awaited write, lets a
+// duplicate POST through.
+let modBusy = false;
+const setJoins = async (approve) => {
+  // Picking the value already in force is not a change: no write, and no
+  // republish of the actor for a setting that did not move.
+  if (modBusy || approve === !!config.approveJoins) return;
+  modBusy = true;
+  try {
+    if (await write('/joins', { approve }, approve ? 'join requests will wait' : 'anyone may join')) {
+      config.approveJoins = approve;
+      refreshGroup();
+    }
+    // Both ways: refused, the control must not keep the value it did not get;
+    // granted, a blur meanwhile may have repainted it to the old state.
+    renderGroupToggles();
+  } finally { modBusy = false; }
+};
+const setReview = async (on) => {
+  if (modBusy || on === !!config.review) return;
+  modBusy = true;
+  try {
+    if (await write('/review', { on }, on ? 'posts will be held' : 'posts will be carried at once')) {
+      config.review = on;
+      refreshGroup();
+    }
+    renderGroupToggles();
+  } finally { modBusy = false; }
+};
+
+// Arrowing a closed select fires `change` on every keypress, so a keyboard user
+// running down the list would apply each value they passed — here that silently
+// opens or closes the group. An arrow arms a flag and the change it causes is
+// ignored; Enter commits. A mouse never sets the flag, so clicking is unchanged.
+// Same guard as the actor picker above, for the same reason.
+function onPick(el, apply, repaint = renderGroupToggles) {
+  let arrowing = false;
+  el.addEventListener('keydown', (ev) => {
+    if (['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(ev.key)) arrowing = true;
+    if (ev.key === 'Enter') { arrowing = false; apply(el.value); }
+    // Escape abandons the armed value; what shows must return to what is.
+    if (ev.key === 'Escape') { arrowing = false; repaint(); }
+  });
+  // Leaving abandons too. Unconditional, because the swallow above already
+  // consumed the flag — the select may show a state that was never applied,
+  // and repainting from config costs nothing when it does match.
+  el.addEventListener('blur', () => { arrowing = false; repaint(); });
+  el.addEventListener('pointerdown', () => { arrowing = false; });
+  el.addEventListener('change', () => {
+    if (!arrowing) apply(el.value);
+    arrowing = false;
+  });
+}
+
+onPick($('joins-mod'), (v) => setJoins(v === MOD.on));
+onPick($('review-mod'), (v) => setReview(v === MOD.on));
+onPick(STATUS_PICK, (v) => setStatus(v === 'parked'), renderStatus);
+
+// A person's follower gate. Automatic is what a migration wave needs: every
+// follower's server re-follows at once, and the waiting queue caps at 500.
+let followsBusy = false;
+const setAutoAccept = async (auto) => {
+  if (followsBusy || auto === !!config.autoAcceptFollows) return;
+  followsBusy = true;
+  try {
+    if (await write('/config', { autoAcceptFollows: auto },
+      auto ? 'new followers are accepted automatically' : 'new followers will wait for you')) {
+      config.autoAcceptFollows = auto;
+    }
+    FOLLOWS_PICK.value = config.autoAcceptFollows ? 'auto' : 'approve';
+  } finally { followsBusy = false; }
+};
+onPick(FOLLOWS_PICK, (v) => setAutoAccept(v === 'auto'),
+  () => { FOLLOWS_PICK.value = config?.autoAcceptFollows ? 'auto' : 'approve'; });
+
+// One row: what it is, then what can be done to it.
+function row(text, sub, actions) {
+  const li = document.createElement('li');
+  const span = document.createElement('span');
+  span.textContent = text;
+  if (sub) {
+    const small = document.createElement('div');
+    small.className = 'muted';
+    small.textContent = sub;
+    span.appendChild(small);
+  }
+  li.appendChild(span);
+  for (const [label, run, hint] of actions) {
+    const b = document.createElement('button');
+    b.className = 'inline';           // sized like the page's other buttons
+    b.textContent = label;
+    // A list of fifteen buttons all reading "Mute" tells a screen-reader user
+    // browsing by button nothing; name each one for the row it acts on.
+    b.setAttribute('aria-label', `${label} ${text}`);
+    // Three leading spaces: the tooltip appears under the pointer, and without
+    // them the first word sits behind the cursor.
+    if (hint) b.title = `   ${hint}`;
+    // Where focus should land afterwards. `b.disabled = true` blurs it to
+    // <body> at once, and refreshGroup() then wipes and rebuilds the list, so
+    // without this every mute, eject, admit or refuse dropped a keyboard user
+    // back to the top of the page.
+    b.addEventListener('click', async () => {
+      const list = li.parentNode;
+      focusAfterRefresh = { listId: list?.id, index: [...(list?.children || [])].indexOf(li), label };
+      b.disabled = true;
+      await run();
+      refreshGroup();
+    });
+    li.appendChild(b);
+  }
+  return li;
+}
+
+// Set by a row action, consumed by the fill() that replaces that row.
+let focusAfterRefresh = null;
+
+function fill(listId, countId, items, make) {
+  const ul = $(listId);
+  ul.textContent = '';
+  $(countId).textContent = items.length ? `(${items.length})` : '(none)';
+  for (const it of items) ul.appendChild(make(it));
+  if (!focusAfterRefresh || focusAfterRefresh.listId !== listId) return;
+  const { index, label } = focusAfterRefresh;
+  focusAfterRefresh = null;
+  // The same action on the row that took this one's place, or the row before it
+  // when the list just got shorter. Nothing left to land on is the one case
+  // where the heading is the honest answer.
+  const rows = [...ul.children];
+  const li = rows[Math.min(index, rows.length - 1)];
+  const same = li && [...li.querySelectorAll('button')].find(x => x.textContent === label);
+  const heading = $(countId).closest('h3');
+  // A bare <h3> is not focusable, so the "nothing left" fallback would silently
+  // drop focus to <body> — give it a programmatic-only tab stop first.
+  if (heading && !heading.hasAttribute('tabindex')) heading.setAttribute('tabindex', '-1');
+  (same || li?.querySelector('button') || heading)?.focus?.();
+}
+
+// The request rows, shared: a group calls them joins, a person calls them
+// follows, and the two do exactly the same thing to exactly the same queue.
+function fillRequests(list) {
+  fill('requests', 'requests-count', list, (r) => row(r.actor, r.at, [
+    ['Accept', () => write('/admit', { actor: r.actor }, 'accepted'), 'Let them follow you'],
+    ['Refuse', () => write('/refuse', { actor: r.actor }, 'refused'), 'Turn this down; they may ask again'],
+  ]));
+}
+
+// The whole queue in one action — the shape a migration wave arrives in.
+$('admit-all').addEventListener('click', async () => {
+  if (await write('/admit', { all: true }, 'accepted everyone waiting')) {
+    if (config.kind === 'group') refreshGroup(); else refreshRequests();
+  }
+});
+
+// A person's whole group pane is this one block, and only when it has something
+// in it — an empty heading promising a list is what the group console avoids too.
+async function refreshRequests() {
+  const { json } = await api('/requests');
+  const list = json?.requests || [];
+  $('pane-group').hidden = !list.length;
+  $('block-requests').hidden = !list.length;
+  if (list.length) fillRequests(list);
+}
+
+// What a queued moderation would do, in the words the buttons beside it use.
+function describeModeration(e) {
+  const o = e.activity?.object;
+  const id = typeof o === 'string' ? o : o?.id || '';
+  if (e.type === 'Block') return `block ${id}`;
+  if (e.type === 'Remove') return `eject ${id}`;
+  if (e.type === 'Delete') return `take down ${id}`;
+  if (e.type === 'Add') return `add ${id}`;
+  return id || 'no target named';
+}
+
+async function refreshGroup() {
+  const [members, requests, pending, announced, modqueue] = await Promise.all(
+    ['/members', '/requests', '/pending', '/announced', '/modqueue']
+      .map(p => api(p).then(r => r.json || {})));
+
+  fill('requests', 'requests-count', requests.requests || [], (r) => row(r.actor, r.at, [
+    ['Admit', () => write('/admit', { actor: r.actor }, 'admitted'), 'Let them in — they become a member'],
+    ['Refuse', () => write('/refuse', { actor: r.actor }, 'refused'), 'Turn this request down; they may ask again'],
+  ]));
+
+  fill('pending', 'pending-count', pending.pending || [], (p) => row(p.noteId, `${p.actor} · ${p.at}`, [
+    ['Carry it', () => write('/approve', { noteId: p.noteId }, 'carried'), 'Announce this post to every member'],
+    ['Decline', () => write('/decline', { noteId: p.noteId }, 'declined'), 'Do not carry it — the post stays up on its author\u2019s pod'],
+  ]));
+
+  // Moderation another server asked for: apply it, or turn it down. The route
+  // answers with the list itself, not an object wrapping one.
+  const modq = Array.isArray(modqueue) ? modqueue : (modqueue.queue || []);
+  fill('modqueue', 'modqueue-count', modq, (e) => row(
+    `${e.type} — ${describeModeration(e)}`, `asked by ${e.moderator} · ${e.at}`, [
+      ['Carry it out', () => write('/modqueue', { id: e.id, action: 'apply' }, 'applied'),
+        'Do what the moderator asked, as if you had asked it'],
+      ['Turn it down', () => write('/modqueue', { id: e.id, action: 'dismiss' }, 'dismissed'),
+        'Leave things as they are and drop the request'],
+    ]));
+
+  // A queue nothing can arrive in is not an empty list, it is a list that does
+  // not apply — so the setting has to be on before the heading appears at all.
+  // This one has no setting: it fills only when a moderator has asked.
+  $('block-requests').hidden = !(config.approveJoins && (requests.requests || []).length);
+  $('block-pending').hidden = !(config.review && (pending.pending || []).length);
+  $('block-modqueue').hidden = !modq.length;
+
+  fill('members', 'members-count', members.members || [], (m) => row(
+    m.handle || m.actor, m.muted ? 'muted — their posts are not carried' : null,
+    [
+      m.muted
+        ? ['Unmute', () => write('/unmute', { actor: m.actor }, 'unmuted'), 'Carry their posts again']
+        : ['Mute', () => write('/mute', { actor: m.actor }, 'muted'), 'Stop carrying their posts; they stay a member'],
+      ['Eject', () => write('/eject', { actor: m.actor }, 'ejected'), 'Remove them and tell their server; also mutes'],
+    ]));
+
+  fill('announced', 'announced-count', announced.announced || [], (a) => row(
+    a.noteId, `${a.actor} · ${a.announcedAt}`,
+    [['Retract', () => write('/retract', { noteId: a.noteId }, 'retracted'), 'Un-say this announcement to everyone it reached']]));
+}
+