fedipod-server 0.10.0 → 0.12.1

package/web/app/site/_redirects

@@ -0,0 +1,21 @@
+# gateway + front API → the function
+/api/handle             /.netlify/functions/front  200
+/api/attach             /.netlify/functions/front  200
+/api/relay              /.netlify/functions/front  200
+/api/roster             /.netlify/functions/front  200
+/api/revoke             /.netlify/functions/front  200
+/api/agent              /.netlify/functions/front  200
+/u/*                    /.netlify/functions/front  200
+/.well-known/*          /.netlify/functions/front  200
+/install                /.netlify/functions/front  200
+/run                    /.netlify/functions/front  200
+/roster                 /.netlify/functions/front  200
+/solid-oidc-client.js   /.netlify/functions/front  200
+# the in-browser app, served static (these win over the project catch-all)
+/            /index.html    200
+/sw.js       /sw.js         200
+/boot.js     /boot.js       200
+/app         /app/          301
+/app/*       /app/:splat    200
+/admin       /admin/        301
+/admin/*     /admin/:splat  200

package/web/app/site/admin/actors.js

@@ -0,0 +1,145 @@
+// actors.js — the other actors on this machine: the picker, going to one,
+// starting a stopped one, and the form for a new one.
+
+// Somewhere to go, and nothing else. A stopped actor is left out — the link
+// would land on nothing. The one you are on keeps its place in the row but
+// offers only `app`, because its admin page is the page you are reading.
+
+let actors = [];
+
+async function renderOthers() {
+  const { json } = await api('/profiles');
+  actors = json?.identities || [];
+  const sel = $('actor-pick');
+  sel.textContent = '';
+  // The fediverse address, which is what the actor IS to everyone else, and the
+  // only form that stays distinct: two identities can share a local handle, but
+  // never a handle AND a pod. A stopped one has no address to report — nothing
+  // answered — so it falls back to the name it is filed under.
+  const label = (r) => (r.address || r.handle || r.name)
+    + (r.mode && r.mode !== 'active' ? ` (${r.mode})` : '') + (r.mode ? '' : ' (stopped)');
+  const seen = {};
+  for (const r of actors) seen[label(r)] = (seen[label(r)] || 0) + 1;
+
+  for (const [i, r] of actors.entries()) {
+    const o = document.createElement('option');
+    o.value = String(i);
+    o.selected = !!r.current;      // it opens showing where you already are
+    o.textContent = label(r) + (seen[label(r)] > 1 && r.port ? ` :${r.port}` : '');
+    sel.appendChild(o);
+  }
+  // The way to a NEW actor rides the same dropdown as the existing ones.
+  const add = document.createElement('option');
+  add.value = '__add';
+  add.textContent = '+ add a new account…';
+  sel.appendChild(add);
+}
+
+// Going to an actor commits a navigation and, for a stopped one, a POST that
+// boots its pod — so it must run once per choice. Pressing Enter on the select
+// fires BOTH a keydown (handled below) and a native `change`, so without a
+// guard a keyboard commit would start the actor twice.
+let goingToActor = false;
+const goToActor = async () => {
+  if (goingToActor) return;
+  if ($('actor-pick').value === '__add') { renderOthers(); openNewActor(); return; }
+  const r = actors[Number($('actor-pick').value)];
+  if (!r || r.current) return;
+  goingToActor = true;
+  try {
+    if (r.mode) { location.href = r.admin; return; }
+    $('actor-pick').disabled = true;
+    say(`starting ${r.name}`);
+    const started = await write('/start-actor', { name: r.name }, `${r.name} is up`);
+    $('actor-pick').disabled = false;
+    if (started?.url) location.href = `${started.url}admin/`;
+    else renderOthers();            // put the picker back on the current actor
+  } finally {
+    goingToActor = false;
+  }
+};
+// Choosing one goes to its record, as it always has.
+//
+// Arrowing is the one case that must not: on a closed select every Arrow
+// keypress fires `change`, so a keyboard user browsing the list would be
+// carried off to the first actor they passed — and for a stopped one that
+// boots its pod. An arrow key arms a flag and the change it causes is ignored;
+// Enter commits. A mouse never sets the flag, so clicking behaves as before.
+let arrowing = false;
+$('actor-pick').addEventListener('keydown', (ev) => {
+  if (['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(ev.key)) arrowing = true;
+  if (ev.key === 'Enter') { arrowing = false; goToActor(); }
+});
+$('actor-pick').addEventListener('pointerdown', () => { arrowing = false; });
+$('actor-pick').addEventListener('change', () => {
+  if (!arrowing) goToActor();
+  arrowing = false;
+});
+
+// Setting up a new actor asks for exactly what this page cannot already tell
+// it: the pod and the account behind it, and its permanent name. Display name,
+// bio and pictures are the client's job now — Phanpy's profile editor writes
+// them through /api/v1/accounts/update_credentials. Where the private data goes
+// is not a question either: it lands beside the credential, and `state --to`
+// moves it afterwards.
+
+const picked = (name) => document.querySelector(`input[name=${name}]:checked`)?.value;
+
+function newActorRows() {
+  const mode = picked('newMode');
+  $('new-row-podname').hidden = mode !== 'new';
+  $('new-row-pod').hidden = mode !== 'existing';
+}
+for (const el of document.querySelectorAll('input[name=newMode]')) {
+  el.addEventListener('change', newActorRows);
+}
+
+// While the form is up the page IS the new actor's setup — so the record of
+// the actor you came from goes away, list included. Which panes were showing
+// is remembered rather than recomputed: whether Group and Inbox belong is a
+// decision render() already made.
+const RECORD_PANES = ['pane-identity', 'pane-group', 'pane-inbox', 'rail'];
+let putBack = [];
+
+function showNewActor(on) {
+  if (on) closePanels();              // nothing of the old actor left open behind it
+  document.body.classList.toggle('adding', on);   // see body.adding in the CSS
+  $('new-actor-form').hidden = !on;
+  if (on) {
+    putBack = RECORD_PANES.filter(id => !$(id).hidden);
+    for (const id of putBack) $(id).hidden = true;
+  } else {
+    for (const id of putBack) $(id).hidden = false;
+    putBack = [];
+  }
+}
+
+// `add a new account` is the last item of the Local Actors dropdown; choosing
+// it opens the form in place. Arriving with ?new does the same.
+function openNewActor() {
+  showNewActor(true);
+  newActorRows();
+  $('new-handle').focus();
+}
+$('new-actor-cancel').addEventListener('click', () => { showNewActor(false); say('nothing changed'); });
+
+$('new-actor-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  const handle = $('new-handle').value.trim();
+  const answers = {
+    handle,
+    kind: picked('newKind'),
+    mode: picked('newMode'),
+    issuer: $('new-issuer').value.trim(),
+    email: $('new-email').value.trim(),
+    password: $('new-password').value,
+  };
+  if (answers.mode === 'new') answers.podName = $('new-podname').value.trim() || handle;
+  else answers.pod = $('new-pod').value.trim();
+  $('new-actor-go').disabled = true;
+  say(`setting up ${handle || 'the new actor'} — this takes a while`);
+  const r = await write('/new-actor', answers, `setting up ${handle}`);
+  $('new-actor-go').disabled = false;
+  if (r?.url) location.href = r.url;      // its own page, where the progress is
+});
+

package/web/app/site/admin/bar.css

@@ -0,0 +1,60 @@
+/* The bar every page of ours carries — the record, the setup form and the
+   client view. One file so the three cannot drift apart. */
+/* One column, 960px, centred — the bar included, so the title sits over the
+   page's left edge and the buttons over its right rather than out at the window
+   borders. `width: 100%` with `box-sizing: border-box` keeps the padding inside
+   that 960 instead of adding to it, which is what makes the two margins equal. */
+/* Colours come from tokens.css (the front's palette), linked by every page
+   before this file, so the bar matches the front and the record rather than
+   Phanpy: --surface is the page ground, --raised the bar band on top of it. */
+body { background: var(--surface); }
+/* The BAND spans the window; its CONTENTS stay in the 960 column. Constraining
+   the element itself left the colour as a stripe with bare page either side.
+   The inline padding is the column's own margin plus the 1rem the page uses
+   inside it, so the title lands exactly on the page's left edge — and `max`
+   keeps it at 1rem once the window is narrower than the column.
+   No rule underneath: the tone change is the boundary, and a line as well
+   would be drawing it twice. */
+/* Wraps, because it does not fit: at 320px the title plus three destinations
+   ran 67px past the viewport, and the bar is on every page — so the whole
+   document scrolled sideways whatever was under it. */
+#bar { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
+  width: 100%; max-width: none; margin: 0; box-sizing: border-box;
+  /* The column width is the page's to declare (--bar-col); 960 stands where a
+     page says nothing. */
+  padding: .5rem max(1rem, calc((100% - var(--bar-col, 960px)) / 2 + 1rem));
+  background: var(--raised); }
+/* The actor's fediverse handle, in the row between the title and the
+   destinations. */
+#bar-handle { color: var(--heading); font-size: .95rem; margin-right: .6rem; }
+#bar-handle:empty { display: none; }
+/* The actors dropdown, where a page's bar carries one instead of the static
+   handle. Styled here so every page's bar shows the same control: the same
+   light well and drawn caret every setting on the record page uses. */
+#bar select { font: inherit; font-size: .95rem; max-width: min(24rem, 55vw);
+  margin-right: .6rem; appearance: none; min-width: 0;
+  padding: .15rem 1.7rem .15rem .55rem;
+  border: 1px solid var(--field-edge); border-radius: .3rem;
+  color: var(--ink); cursor: pointer;
+  background-color: var(--field-bg); background-image: var(--chevron);
+  background-repeat: no-repeat; background-position: right .55rem center;
+  background-size: .6rem auto; }
+#bar select:hover { background-color: var(--field-bg-hover); }
+/* The app title, in px rather than rem: it is chrome, the same on every page,
+   not something that should move when a page changes its base size. */
+#bar .name { flex: 1 1 auto; font-weight: 600; font-size: 40px; color: var(--heading);
+  margin: 0; line-height: 1.1; }
+/* The browser build wraps the brand text in a link (to /?add) — the general
+   #bar a rule below would otherwise pin it back down to nav-link size and
+   colour, since a rule on the anchor itself always wins over inheriting the
+   heading's size. */
+#bar .name a { font: inherit; color: inherit; text-decoration: none; }
+/* Plain text, not chrome: three destinations in a row read better without a
+   box round each. */
+#bar button, #bar a { font: inherit; font-size: .95rem; padding: .15rem .2rem;
+  border: 0; background: none; color: var(--link); cursor: pointer;
+  text-decoration: none; }
+/* The page you are already on stays in the row, so the set never moves — it is
+   underlined rather than removed. */
+#bar button[aria-current="page"], #bar a[aria-current="page"] {
+  text-decoration: underline; text-underline-offset: .3rem; }

package/web/app/site/admin/bar.js

@@ -0,0 +1,61 @@
+// bar.js — the three destinations, shared by the record, the setup form and the
+// client view, so they cannot drift apart. Nothing here touches the client in
+// the frame: it is this agent's own root, and framing it is the whole of the
+// relationship.
+
+(() => {
+  // The three destinations are <a href> now: they are navigations, so they
+  // belong in a screen reader's links list, and middle-click and open-in-new-tab
+  // work the way they do everywhere else. Nothing here has to drive them.
+  //
+  // One exception, and it keeps its href as the fallback: on the record page
+  // `add new account` opens the form IN PLACE rather than reloading. admin.js
+  // binds that and calls preventDefault; without the form it is a plain link to
+  // ?new=1, which opens it on arrival.
+
+  // The bar says the product; the TAB says which actor, which is what tells two
+  // open windows apart without putting the handle in the page twice.
+  // /status, not /config: an agent that is not set up yet answers this one and
+  // 409s the other, which logged a failed request on every setup page.
+  fetch(location.pathname.replace(/\/admin\/.*$/u, '') + '/status', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).then((s) => {
+    if (s?.handle) document.title = `FediPod — ${s.handle}`;
+    // The full fediverse handle, centred in the bar on every page.
+    const el = document.getElementById('bar-handle');
+    if (el && s?.handle && s?.actor) {
+      try { el.textContent = `@${s.handle}@${new URL(s.actor).host}`; } catch { /* odd actor url */ }
+    }
+  }).catch(() => { /* not up yet; the bar still works */ });
+
+  // The actors dropdown, on a page whose bar carries one. The record page
+  // wires its own richer version (it can start a stopped actor and open the
+  // new-account form in place), so this one stands down there.
+  const pick = document.getElementById('actor-pick');
+  if (pick && !document.getElementById('new-actor-form')) {
+    const base = location.pathname.replace(/\/admin\/.*$/u, '');
+    fetch(base + '/profiles', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).then((j) => {
+      const actors = j?.identities || [];
+      pick.textContent = '';
+      const label = (r) => (r.address || r.handle || r.name)
+        + (r.mode && r.mode !== 'active' ? ` (${r.mode})` : '') + (r.mode ? '' : ' (stopped)');
+      for (const [i, r] of actors.entries()) {
+        const o = document.createElement('option');
+        o.value = String(i);
+        o.selected = !!r.current;
+        o.textContent = label(r);
+        pick.appendChild(o);
+      }
+      const add = document.createElement('option');
+      add.value = '__add';
+      add.textContent = '+ add a new account…';
+      pick.appendChild(add);
+      pick.addEventListener('change', () => {
+        if (pick.value === '__add') { location.href = base + '/admin/?new=1'; return; }
+        const r2 = actors[Number(pick.value)];
+        if (!r2 || r2.current) return;
+        // A running actor's client; a stopped one is started from its record.
+        if (r2.mode && r2.admin) location.href = r2.admin + 'client/';
+        else if (r2.admin) location.href = r2.admin;
+      });
+    }).catch(() => { pick.hidden = true; });
+  }
+})();

package/web/app/site/admin/client/client.js

@@ -0,0 +1,66 @@
+// client.js — make the framed client be THIS agent's actor.
+//
+// The client is a general fediverse client: it keeps a list of accounts in
+// localStorage and one of them is current. Nothing makes that one agree with
+// the agent serving the page. A leftover account from another identity wins,
+// and you get somebody else's timeline on this actor's page, with the profile
+// editor pointed at a host that cannot answer.
+//
+// Per-origin storage is what keeps identities apart, and it does work — each
+// actor answers at <handle>.localhost:<port> and each origin has its own
+// accounts list. What was missing is the other half: telling the client which
+// account it is meant to be showing.
+//
+// The frame's markup declares what it loads (`src="/"`), and that does not
+// change. This navigates the loaded app to its own login route, which is app
+// navigation, not an include: `?instance=` prefills and `?submit=` runs it, so
+// the round trip needs no typing. Hash-routed, so the query lives after the
+// hash; `submit` must be non-empty, because the empty string is falsy and the
+// auto-submit never fires.
+
+(async () => {
+  const frame = document.getElementById('client');
+  if (!frame) return;
+
+  // Who this agent is, in the form the client stores: `info.uri` is the actor
+  // URI on the pod. Matching on that rather than on the origin is deliberate —
+  // "which account logged in here" is a different question, and it is the one
+  // that goes wrong when the two origins get mixed.
+  const base = location.pathname.replace(/\/admin\/.*$/u, '');
+  const status = await fetch(base + '/status', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).catch(() => null);
+  if (!status?.actor) return;                 // not set up yet; setup owns that
+
+  // A deep link into the client — the record links an actor's own page this way
+  // — arrives as a hash on THIS page, and the frame never sees it. Forward it,
+  // so the link lands where it says while keeping the bar above it.
+  const wanted = location.hash && location.hash !== '#' ? location.hash : null;
+  const sendTo = (hash) => {
+    try { frame.contentWindow.location.hash = hash; } catch { /* not ready yet */ }
+  };
+  const whenReady = (fn) => {
+    if (frame.contentWindow?.location?.href && frame.contentWindow.location.href !== 'about:blank') fn();
+    else frame.addEventListener('load', fn, { once: true });
+  };
+
+  let accounts = [];
+  try { accounts = JSON.parse(localStorage.getItem('accounts') || '[]'); } catch { /* unreadable */ }
+  const ours = accounts.find(a => a?.info?.uri === status.actor);
+  if (ours) {
+    // A stored login can be dead — its token revoked or minted by a run that
+    // never finished. Trusting it shows an empty client with no way out, so
+    // ask the facade first; a dead one falls through to the same one-trip
+    // login a missing account gets.
+    const alive = ours.accessToken && await fetch('/api/v1/accounts/verify_credentials', {
+      headers: { authorization: `Bearer ${ours.accessToken}` },
+    }).then(r => r.ok).catch(() => false);
+    if (alive) {
+      if (wanted) whenReady(() => sendTo(wanted));
+      return;
+    }
+  }
+
+  // Same origin, so the frame's own host is the instance to log into. A deep
+  // link is dropped here on purpose: logging in navigates the frame anyway, and
+  // arriving somewhere unexpected afterwards is worse than arriving home.
+  whenReady(() => sendTo(`#/login?instance=${encodeURIComponent(location.host)}&submit=1`));
+})();

package/web/app/site/admin/client/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+<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>
+/* 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; }
+</style>
+<link rel="stylesheet" href="../bar.css">
+<style>#actor-pick{display:none!important}</style>
+</head>
+<body>
+
+<!-- The same bar the record carries, so the two surfaces are one thing with two
+     views. The client below is this agent's own, at its own root: same origin,
+     which is why framing it needs nothing opened beyond frame-ancestors 'self'. -->
+<nav id="bar" aria-label="Site">
+  <h1 class="name"><a href="/?add">FediPod</a></h1>
+  <select id="actor-pick" aria-label="Local actors"
+    title="   Every actor on this machine; choosing one opens its client"></select>
+  <a id="bar-fediverse" href="./" title="   Open the client and read your timeline" aria-current="page">visit account</a>
+  <a id="bar-manage" href="../" title="   The record: what this actor is, and what you can do to it">manage account</a>
+  <a id="bar-signout" href="/?signout" title="   Sign out of FediPod and clear this browser">sign out</a>
+</nav>
+
+<main>
+<iframe id="client" src="/app/" title="fediverse client"></iframe>
+</main>
+
+<script src="../bar.js"></script>
+<script src="client.js"></script>
+</body>
+</html>

package/web/app/site/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/app/site/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/app/site/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();