fedipod-server 0.20.0 → 0.26.0

package/lib/session/oidc-session.mjs

@@ -0,0 +1,233 @@
+// oidc-session.mjs — Solid-OIDC login for a browser page, with a secure,
+// durable, worker-visible session.
+//
+// The redirect handshake (authorization-code + PKCE) runs in the page. The
+// session it yields — a DPoP keypair whose private half is NON-EXTRACTABLE, plus
+// the refresh token, the token endpoint and the WebID — is kept in IndexedDB.
+// IndexedDB survives a browser restart and is readable by a service worker,
+// and a non-extractable key can sign but never be read out, even by injected
+// script.
+//
+//   import { solidOidcSession } from 'solid-oidc-session/oidc-session.mjs';
+//   const oidc = solidOidcSession({ dbName: 'my-app-oidc', clientName: 'My app' });
+//
+// Page:   const { authorizationUrl } = await oidc.beginLogin({ issuer, redirectUri });
+//         location.href = authorizationUrl;                      // ... redirect ...
+//         await oidc.completeLogin({ currentUrl: location.href });  // on return
+// Anywhere (page or worker, SAME dbName):
+//         const session = await oidc.getSession();  // { webId, issuer, fetch, refresh, signOut } | null
+//
+// No imports, no Node built-ins, nothing named after the application that
+// uses it: IndexedDB, WebCrypto and fetch are all it needs.
+
+const STORE = 'session';
+const b64u = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+const enc = (o) => b64u(new TextEncoder().encode(JSON.stringify(o)));
+const sha256 = (s) => crypto.subtle.digest('SHA-256', new TextEncoder().encode(s));
+const rand = (n = 32) => b64u(crypto.getRandomValues(new Uint8Array(n)));
+
+async function dpopKey() { return crypto.subtle.generateKey({ name: 'ECDSA', namedCurve: 'P-256' }, false, ['sign']); }
+async function publicJwk(pair) { const j = await crypto.subtle.exportKey('jwk', pair.publicKey); return { kty: j.kty, crv: j.crv, x: j.x, y: j.y }; }
+async function dpopProof(pair, jwk, htm, htu, ath) {
+  const header = { typ: 'dpop+jwt', alg: 'ES256', jwk };
+  const payload = { htm, htu: htu.split('#')[0], jti: crypto.randomUUID(), iat: Math.floor(Date.now() / 1000), ...(ath ? { ath } : {}) };
+  const data = `${enc(header)}.${enc(payload)}`;
+  const sig = await crypto.subtle.sign({ name: 'ECDSA', hash: 'SHA-256' }, pair.privateKey, new TextEncoder().encode(data));
+  return `${data}.${b64u(sig)}`;
+}
+const jwtPayload = (jwt) => { try { return JSON.parse(new TextDecoder().decode(Uint8Array.from(atob(jwt.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')), (c) => c.charCodeAt(0)))); } catch { return {}; } };
+
+async function discover(issuer) {
+  const res = await fetch(`${issuer.replace(/\/+$/, '')}/.well-known/openid-configuration`, { headers: { accept: 'application/json' } });
+  if (!res.ok) throw new Error(`OIDC discovery failed at ${issuer} (HTTP ${res.status})`);
+  return res.json();
+}
+async function registerClient(cfg, redirectUri, clientName) {
+  const res = await fetch(cfg.registration_endpoint, {
+    method: 'POST', headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ client_name: clientName, redirect_uris: [redirectUri], token_endpoint_auth_method: 'none',
+      grant_types: ['authorization_code', 'refresh_token'], response_types: ['code'], application_type: 'web', scope: 'openid webid offline_access' }),
+  });
+  if (!res.ok) throw new Error(`client registration failed (HTTP ${res.status})`);
+  return (await res.json()).client_id;
+}
+
+/**
+ * One session store. `dbName` is the IndexedDB database the session lives in:
+ * a page and its service worker must pass the same name to see the same
+ * sign-in, and two apps on one origin pass different names to keep theirs
+ * apart. `clientName` is what the pod's login screen shows the person.
+ */
+export function solidOidcSession({ dbName = 'solid-oidc-session', clientName = 'Solid app' } = {}) {
+  function idb() {
+    return new Promise((res, rej) => {
+      const r = indexedDB.open(dbName, 1);
+      r.onupgradeneeded = () => r.result.createObjectStore(STORE);
+      r.onsuccess = () => res(r.result);
+      r.onerror = () => rej(r.error);
+    });
+  }
+  async function idbGet(key) {
+    const db = await idb();
+    return new Promise((res, rej) => { const t = db.transaction(STORE).objectStore(STORE).get(key); t.onsuccess = () => res(t.result); t.onerror = () => rej(t.error); });
+  }
+  async function idbPut(key, val) {
+    const db = await idb();
+    return new Promise((res, rej) => { const t = db.transaction(STORE, 'readwrite').objectStore(STORE).put(val, key); t.onsuccess = () => res(); t.onerror = () => rej(t.error); });
+  }
+  async function idbDel(key) {
+    const db = await idb();
+    return new Promise((res, rej) => { const t = db.transaction(STORE, 'readwrite').objectStore(STORE).delete(key); t.onsuccess = () => res(); t.onerror = () => rej(t.error); });
+  }
+
+  /** Begin login: prepare PKCE + a non-extractable DPoP key, stash the pending
+   *  state, and return the authorization URL for the caller to navigate to. */
+  async function beginLogin({ issuer, redirectUri, clientName: name = clientName, returnTo = null }) {
+    const cfg = await discover(issuer);
+    const client_id = await registerClient(cfg, redirectUri, name);
+    const pair = await dpopKey();
+    const verifier = rand(48);
+    const challenge = b64u(await sha256(verifier));
+    const state = rand(16);
+    await idbPut('pending', { issuer, client_id, redirectUri, verifier, state, pair, returnTo,
+      tokenEndpoint: cfg.token_endpoint, authorizationEndpoint: cfg.authorization_endpoint,
+      revocationEndpoint: cfg.revocation_endpoint || null });
+    const url = new URL(cfg.authorization_endpoint);
+    for (const [k, v] of Object.entries({ client_id, redirect_uri: redirectUri, response_type: 'code',
+      scope: 'openid webid offline_access', code_challenge: challenge, code_challenge_method: 'S256', state, prompt: 'consent' })) url.searchParams.set(k, v);
+    return { authorizationUrl: url.href };
+  }
+
+  /** Complete login from the redirect back. Exchanges the code (DPoP + PKCE),
+   *  stores the durable session, and returns it. Returns null if there is no code. */
+  async function completeLogin({ currentUrl }) {
+    const u = new URL(currentUrl);
+    const code = u.searchParams.get('code');
+    const state = u.searchParams.get('state');
+    if (!code) return null;
+    const p = await idbGet('pending');
+    if (!p || p.state !== state) throw new Error('login state mismatch');
+    const jwk = await publicJwk(p.pair);
+    const res = await fetch(p.tokenEndpoint, {
+      method: 'POST',
+      headers: { 'content-type': 'application/x-www-form-urlencoded', dpop: await dpopProof(p.pair, jwk, 'POST', p.tokenEndpoint) },
+      body: new URLSearchParams({ grant_type: 'authorization_code', code, redirect_uri: p.redirectUri, client_id: p.client_id, code_verifier: p.verifier }),
+    });
+    const tok = await res.json().catch(() => ({}));
+    if (!res.ok || !tok.access_token) throw new Error(`token exchange failed (HTTP ${res.status}): ${tok.error || ''}`);
+    const webId = jwtPayload(tok.access_token).webid || jwtPayload(tok.id_token || '').webid || null;
+    const session = { issuer: p.issuer, client_id: p.client_id, tokenEndpoint: p.tokenEndpoint, pair: p.pair,
+      // Where to hand the refresh token back at sign-out. Kept on the session
+      // because discovery is a network round trip and sign-out should not need
+      // one — see signOut().
+      revocationEndpoint: p.revocationEndpoint || null,
+      refreshToken: tok.refresh_token || null, accessToken: tok.access_token,
+      expiresAt: Date.now() + Math.max(30, (tok.expires_in || 300)) * 1000, webId };
+    await idbPut('session', session);
+    await idbDel('pending');
+    // `returnTo` rides only on the handle this call returns: where the person
+    // was when they left for the login page, for the caller to send them back.
+    return Object.assign(sessionHandle(session), p.returnTo ? { returnTo: p.returnTo } : {});
+  }
+
+  /** Restore the session from IndexedDB — works in the page and the worker. */
+  async function getSession() {
+    const s = await idbGet('session');
+    return s ? sessionHandle(s) : null;
+  }
+
+  /**
+   * Sign out, and tell the issuer.
+   *
+   * Dropping the row locally leaves the REFRESH TOKEN alive at the pod for its
+   * full life — signing out of a shared or borrowed browser would clear the
+   * screen and nothing else, and anyone who had copied the token could go on
+   * minting access tokens with it. RFC 7009: hand it back.
+   *
+   * Best effort, and the local teardown happens either way: an issuer that is
+   * unreachable, or that publishes no revocation endpoint, must not be able to
+   * keep somebody signed in.
+   */
+  async function signOut() {
+    const s = await idbGet('session').catch(() => null);
+    if (s?.revocationEndpoint && s.refreshToken) {
+      try {
+        await fetch(s.revocationEndpoint, {
+          method: 'POST',
+          headers: { 'content-type': 'application/x-www-form-urlencoded' },
+          body: new URLSearchParams({
+            token: s.refreshToken, token_type_hint: 'refresh_token', client_id: s.client_id,
+          }),
+        });
+      } catch { /* told if we could; leaving is not conditional on being heard */ }
+    }
+    await idbDel('session');
+    await idbDel('pending');
+  }
+
+  function sessionHandle(s) {
+    let { accessToken, expiresAt, refreshToken } = s;
+    const jwkP = publicJwk(s.pair);
+    const refresh = async () => {
+      if (!refreshToken) throw new Error('session expired and there is no refresh token — sign in again');
+      const jwk = await jwkP;
+      let res;
+      try {
+        res = await fetch(s.tokenEndpoint, {
+          method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded', dpop: await dpopProof(s.pair, jwk, 'POST', s.tokenEndpoint) },
+          body: new URLSearchParams({ grant_type: 'refresh_token', refresh_token: refreshToken, client_id: s.client_id, scope: 'openid webid offline_access' }),
+        });
+      } catch (e) {
+        // A renewal that never reached the server is not a refused one: the
+        // session is still good, and saying "your pod refused the write" about
+        // it sends whoever reads it looking in the wrong place. Under load a
+        // server refuses the token endpoint first, and a refusal with no CORS
+        // headers arrives here as the browser's bare "Failed to fetch".
+        throw new Error(`${e.message} — renewing your sign-in at ${new URL(s.tokenEndpoint).host}`);
+      }
+      const tok = await res.json().catch(() => ({}));
+      if (res.status === 429) {
+        throw new Error(`${new URL(s.tokenEndpoint).host} is asking us to slow down — your sign-in could not be renewed just now`);
+      }
+      if (!res.ok || !tok.access_token) { await idbDel('session'); throw new Error('refresh failed — sign in again'); }
+      accessToken = tok.access_token;
+      expiresAt = Date.now() + Math.max(30, (tok.expires_in || 300)) * 1000;
+      if (tok.refresh_token) refreshToken = tok.refresh_token;
+      // Re-read before writing back. There is ONE 'session' row, and this handle
+      // closed over the session it was made from — so a refresh that was already
+      // in flight when the user signed in as somebody else would put the OLD
+      // identity back, silently, over the new one. Only write if the row is still
+      // the session this handle belongs to.
+      const now = await idbGet('session');
+      if (now && now.webId !== s.webId) {
+        throw new Error('signed in as somebody else while this session was refreshing');
+      }
+      await idbPut('session', { ...s, accessToken, expiresAt, refreshToken });
+    };
+    const send = async (url, init) => {
+      const jwk = await jwkP;
+      const ath = b64u(await sha256(accessToken));
+      const headers = { ...(init.headers || {}), authorization: `DPoP ${accessToken}`, dpop: await dpopProof(s.pair, jwk, (init.method || 'GET'), url, ath) };
+      return fetch(url, { ...init, headers });
+    };
+    const authFetch = async (url, init = {}) => {
+      if (Date.now() > expiresAt - 30_000) await refresh();
+      const res = await send(url, init);
+      // A token the pod REFUSES is not only ever an expired one: a pod that
+      // restarted, a clock that drifted, a token the server stopped recognising
+      // all answer 401 while the clock here still says the token is good — so the
+      // renewal above never fires and every call fails from then on. Renew once
+      // and ask again.
+      if (res.status === 401 && refreshToken) {
+        try { await refresh(); } catch { return res; }
+        return send(url, init);
+      }
+      return res;
+    };
+    // `issuer` so a page that cannot renew can send the person back to the right
+    // login without asking them for their address again.
+    return { webId: s.webId, issuer: s.issuer, fetch: authFetch, refresh, signOut };
+  }
+
+  return { beginLogin, completeLogin, getSession, signOut };
+}

package/lib/session/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "fediverse-account",
+  "version": "0.1.0",
+  "description": "Type a Fediverse handle or a WebID and get back an account you can act with: post, read its timeline, follow, reply, favourite, boost. Works out whether the account lives on a Mastodon-family server or on a Solid pod through FediPod, sends the person to sign in there, brings them back to where they were, and speaks to whichever it is.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Jeff Zucker",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jeff-zucker/FediPod.git",
+    "directory": "lib/session"
+  },
+  "homepage": "https://github.com/jeff-zucker/FediPod/tree/main/lib/session#readme",
+  "keywords": [
+    "fediverse",
+    "activitypub",
+    "mastodon",
+    "solid",
+    "solid-oidc",
+    "webid",
+    "login",
+    "oauth",
+    "fedipod"
+  ],
+  "files": [
+    "fedi-account.mjs",
+    "fedi-login.mjs",
+    "oidc-session.mjs",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./fedi-account.mjs",
+    "./fedi-account.mjs": "./fedi-account.mjs",
+    "./fedi-login.mjs": "./fedi-login.mjs",
+    "./oidc-session.mjs": "./oidc-session.mjs"
+  },
+  "scripts": {
+    "prepublishOnly": "node ../../scripts/check-pod-calls.mjs"
+  },
+  "dependencies": {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fedipod-server",
-  "version": "0.20.0",
+  "version": "0.26.0",
   "description": "The FediPod Server: a full ActivityPub server as a Community Solid Server component.",
   "license": "MIT",
   "main": "dist/index.js",

package/run-agent.mjs

@@ -588,6 +588,10 @@ export class Agent {
     if (repair) {
       this.ensureActorPublished()
         .catch(e => this.log(`actor check failed: ${e.message}`));
+      // The human page, rewritten only when what it shows has changed: one
+      // local digest compare, and a write the first time after an upgrade.
+      this.publisher.publishProfilePage()
+        .catch(e => this.log(`profile page: ${e.message}`));
     }
     this.seedFollowNotifications().catch(e => this.log(`notification seeding failed: ${e.message}`));
   }
@@ -726,6 +730,15 @@ export async function startAgent({
   handle = null,
 } = {}) {
   fs.mkdirSync(home, { recursive: true, mode: 0o700 });
+  // A home can hold a FORUM rather than a person or a group: same profiles
+  // directory, same unit, same startup — a different thing to run. Its
+  // credential says so, and running the agent over it would publish a person
+  // where a forum lives.
+  const { isForumHome, runForum } = await import('./packages/fedipod-bb/src/run.mjs');
+  if (isForumHome(home)) {
+    console.log(`[bb:${port}] this home holds a forum — running it`);
+    return runForum({ home, port, log: (...a) => console.log(`[bb:${port}]`, ...a) });
+  }
   // connect() sets this from pod state a moment later, but the browser may
   // already be opening — seed it from what setup recorded so the named origin
   // works from the first request.

package/vendor/gate.cjs

@@ -7,8 +7,11 @@
 // authorized when it carries the secret:
 //   1. header `x-dk-token` — the Electron shell injects this on app traffic, or
 //   2. cookie `dk-token` — a browser "blessed" via the token URL, or
-//   3. query `?dk-token=<secret>` — answered with a SameSite=Strict cookie and
-//      a redirect to the same URL minus the param (the blessing flow), or
+//   3. query `?dk-token=<secret>` — answered with a SameSite=Lax cookie and
+//      a redirect to the same URL minus the param (the blessing flow). Lax,
+//      not Strict: a link from another site — the pod server's own opt-in
+//      page among them — must arrive with the cookie it was just handed, and
+//      Lax still withholds it from cross-site POSTs and subresources; or
 //   4. (opt-in, proxy only) an Origin/Referer on the allowOrigins list — app
 //      pages in a blessed browser call the proxy with plain fetch(), which
 //      doesn't attach cookies cross-port; a hostile page can't forge Origin.
@@ -105,7 +108,7 @@ function makeGate(token, { allowOrigins = [], publicEndpoints = false, secureCoo
         // Path scopes the cookie to this identity's own door: on a shared
         // origin (suffix pods) two co-tenants must not clobber each other's,
         // and a whole-origin cookie would. Defaults to '/'.
-        'set-cookie': `${COOKIE}=${t}; Path=${cookiePath}; HttpOnly; SameSite=Strict; Max-Age=31536000`
+        'set-cookie': `${COOKIE}=${t}; Path=${cookiePath}; HttpOnly; SameSite=Lax; Max-Age=31536000`
           + (secureCookie ? '; Secure' : ''),
         'location': url.pathname + url.search,
       });

package/web/admin/bar.css

@@ -58,3 +58,35 @@ body { background: var(--surface); }
    underlined rather than removed. */
 #bar button[aria-current="page"], #bar a[aria-current="page"] {
   text-decoration: underline; text-underline-offset: .3rem; }
+/* The client control: which fediverse client this browser opens. The label is
+   quieter than the links; the one in use is marked `aria-current="true"` — the
+   current item of a set, which on the record page is not the current PAGE — so
+   it needs its own mark rather than borrowing the rule above. */
+#bar #client-pick { display: inline-flex; gap: .6rem; align-items: baseline;
+  white-space: nowrap; margin-left: 1rem; }
+#bar #client-now { opacity: .75; }
+#bar a[aria-current="true"] {
+  font-weight: 700; text-decoration: underline; text-underline-offset: .3rem; }
+
+/* The two-clients notice: said once, to somebody who knew this page when it
+   had one client. Sized and placed rather than left to the browser's default,
+   which stretched it edge to edge and put it over the very links it names. */
+#client-news {
+  /* Low rather than centred: it points at the links in the bar, so the bar has
+     to stay in view while it is read. */
+  max-width: 34rem; margin: auto auto 2.5rem; padding: 1.5rem 1.7rem;
+  border: 1px solid var(--dialog-edge); border-radius: .6rem;
+  background: var(--raised); color: var(--fg);
+  font: 1rem/1.55 var(--font);
+  box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .25);
+}
+#client-news::backdrop { background: rgba(0, 0, 0, .45); }
+#client-news h2 { font-size: 1.25rem; margin: 0 0 .9rem; color: var(--heading); }
+#client-news p { margin: 0 0 1.2rem; }
+#client-news p:last-child { margin: 0; }
+#client-news button {
+  font: inherit; padding: .55rem 1.3rem; border-radius: .35rem; cursor: pointer;
+  background: var(--btn); color: var(--btn-text); border: 1px solid var(--btn);
+}
+#client-news button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
+#client-news button:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

package/web/admin/bar.js

@@ -24,6 +24,10 @@
     if (el && s?.handle && s?.actor) {
       try { el.textContent = `@${s.handle}@${new URL(s.actor).host}`; } catch { /* odd actor url */ }
     }
+    // A viewer does nothing: it publishes no profile, carries nothing and
+    // leaves the account looking broken from outside. Say so where the
+    // account is, and let the owner take it back from here.
+    if (s?.mode === 'viewer') viewerBanner();
   }).catch(() => { /* not up yet; the bar still works */ });
 
   // The actors dropdown, on a page whose bar carries one. The record page
@@ -59,3 +63,37 @@
     }).catch(() => { pick.hidden = true; });
   }
 })();
+
+// "Another device is active": what it means for this account, and the way out.
+// The lease is a document on the pod with a five-minute life; a browser that
+// was closed leaves one behind that nothing renews, and every reload asks
+// under a new name, so waiting can look like waiting forever.
+function viewerBanner() {
+  if (document.getElementById('viewer-banner')) return;
+  const base = location.pathname.replace(/\/admin\/.*$/u, '');
+  const bar = document.createElement('div');
+  bar.id = 'viewer-banner';
+  bar.setAttribute('role', 'status');
+  bar.style.cssText = 'padding:.7rem 1rem;background:var(--field-bg,#ececec);color:var(--fg,#1a1a1a);'
+    + 'border-bottom:1px solid var(--line,#b0b0b0);display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font:inherit';
+  const said = document.createElement('span');
+  said.textContent = 'Another device holds this account, so nothing is being published or delivered from here.';
+  const go = document.createElement('button');
+  go.type = 'button';
+  go.textContent = 'Take it over';
+  go.style.cssText = 'font:inherit;font-weight:600;padding:.4rem 1rem;border-radius:.4rem;border:1px solid var(--btn,#3a5f43);'
+    + 'background:var(--btn,#3a5f43);color:var(--btn-text,#fff);cursor:pointer';
+  go.addEventListener('click', async () => {
+    go.disabled = true;
+    said.textContent = 'Taking it over…';
+    try {
+      const r = await fetch(base + '/takeover', { method: 'POST', headers: { 'x-fedipod-page': '1' } });
+      const j = await r.json().catch(() => null);
+      if (r.ok && j?.mode === 'active') { location.reload(); return; }
+      said.textContent = j?.error || 'The lease could not be taken.';
+    } catch (e) { said.textContent = e.message; }
+    go.disabled = false;
+  });
+  bar.append(said, go);
+  document.body.prepend(bar);
+}

package/web/admin/client/index.html

@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — client</title>
+<link rel="icon" href="/icons/local.svg" type="image/svg+xml">
 <link rel="stylesheet" href="../tokens.css">
 <style>
 /* Colours are the shared tokens (tokens.css); only layout is here. The bar is
@@ -11,7 +12,7 @@
    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;
+body { font: 1rem/1.5 Arial, Helvetica, 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; }

package/web/admin/client-pick.js

@@ -0,0 +1,79 @@
+// client-pick.js — which fediverse client this browser opens.
+//
+// The site carries more than one client. Each one has its own shell page whose
+// markup declares the app it frames, and every switch is an ordinary link from
+// one shell to another. This file adds one thing only: it REMEMBERS which shell
+// you last chose, so /admin/client/ — where signing in lands, and where the
+// record's "visit account" goes — hands you back the same client next time.
+//
+// The choice is this browser's, not the account's. It decides which page you
+// are given and nothing else: both clients talk to the same agent, with the
+// same bearer, on this same origin. Nothing about the identity moves with it,
+// which is why it lives in localStorage and is never written to the pod.
+//
+// Staged into the site by scripts/stage-site.mjs, which also generates the
+// shells and the links in the bar. The device agent carries one client and
+// never loads this.
+
+const KEY = 'fedipod-client';
+// The default client's shell. It is also the page that redirects, so a browser
+// that has chosen something else does not have to pass through the default.
+const DEFAULT_SHELL = '/admin/client/';
+// A stored value is a path this site generated, and nothing else is followed.
+// Without this, anything that can write localStorage — including the framed
+// client itself — could send the next visit off this origin.
+const SHELL = /^\/admin\/client(-[a-z0-9-]+)?\/$/;
+
+const read = () => {
+  // A private window, or a browser told to keep no site data, throws on the
+  // read rather than answering empty. There is no choice to honour then, which
+  // is the same as not having made one.
+  try { return localStorage.getItem(KEY) || ''; } catch { return ''; }
+};
+
+// Before anything renders: if this browser last chose another client, that is
+// the page it asked for. `replace` and not `href`, so Back does not bounce
+// between the two shells.
+if (location.pathname === DEFAULT_SHELL) {
+  const chosen = read();
+  if (chosen && chosen !== DEFAULT_SHELL && SHELL.test(chosen)) location.replace(chosen);
+}
+
+// Somebody who knew this page when it had one client should be told, once,
+// that it now has two and where to change it. Marked as said as soon as it is
+// shown rather than when it is dismissed: a reader who closes the tab instead
+// of pressing the button has still read it, and being told twice is worse than
+// not being told a second time.
+const SAID = 'fedipod-client-news';
+function sayOnce() {
+  const dlg = document.getElementById('client-news');
+  if (!dlg) return;
+  let told = true;
+  try { told = !!localStorage.getItem(SAID); } catch { /* keeps no site data */ }
+  if (told) return;
+  try { localStorage.setItem(SAID, '1'); } catch { /* keeps no site data */ }
+  dlg.showModal();
+  document.getElementById('client-news-ok')?.addEventListener('click', () => dlg.close());
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  sayOnce();
+  // Which one is current. On a shell it is the page you are on — you may have
+  // typed its address, and what is in front of you is the true answer whatever
+  // storage says. Anywhere else (the record page) it is the remembered choice.
+  const here = SHELL.test(location.pathname) ? location.pathname : (read() || DEFAULT_SHELL);
+
+  for (const a of document.querySelectorAll('a.client-switch')) {
+    // `aria-current` and not a class alone: this is one of a set of links, one
+    // of which is the one in use — which is the state the attribute exists to
+    // carry, and the only way a screen reader is told about it at all.
+    if (a.getAttribute('href') === here) a.setAttribute('aria-current', 'true');
+    // Each link records the choice it stands for and then follows its own href,
+    // the destination written in the markup. Recorded on the way OUT rather
+    // than on arrival, so a shell opened deliberately by address — or the one
+    // the redirect above lands on — does not silently become the default.
+    a.addEventListener('click', () => {
+      try { localStorage.setItem(KEY, a.getAttribute('href')); } catch { /* keeps no site data */ }
+    });
+  }
+});

package/web/admin/index.html

@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — record</title>
+<link rel="icon" href="/icons/local.svg" type="image/svg+xml">
 <link rel="stylesheet" href="tokens.css">
 <style>
 /* Colours are the shared tokens (tokens.css, the front's palette), so the
@@ -15,7 +16,7 @@
 /* The page itself never scrolls: the body is exactly the window; the content
    column beside the rail is the scroll container. */
 html { height: 100%; }
-body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; height: 100dvh;
+body { font: 1rem/1.5 Arial, Helvetica, sans-serif; margin: 0; height: 100dvh;
   box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
 /* The bar spans the window; the rail and the content column share one centred
    column underneath it — wide enough that the content keeps 960 of its own

package/web/admin/oauth-signin.mjs

@@ -0,0 +1,37 @@
+// oauth-signin.mjs — a client asked this account to sign its owner in. The
+// owner signs in at their own pod, with the fediverse-account library, and the
+// page proves that sign-in to the account with one signed request; the account
+// then hands the client its code. No password of ours anywhere.
+import { fediLogin } from './fedi-login.mjs';
+
+const $ = (id) => document.getElementById(id);
+const say = (text, error = false) => { const s = $('signin-status'); s.textContent = text; s.setAttribute('role', error ? 'alert' : 'status'); };
+const webId = $('webid').href;
+const here = location.origin + location.pathname;
+const login = fediLogin({ dbName: 'fedipod-signin', clientName: 'FediPod sign-in', redirectUri: here });
+
+// Back from the pod: this finishes the sign-in and returns to the client's
+// request, which carries the client's own parameters.
+try { await login.resume(); } catch (e) { say(e.message, true); }
+
+async function prove() {
+  const s = await login.getSession();
+  if (!s) return false;
+  if (s.webId !== webId) { say(`You signed in as ${s.webId}, but this account belongs to ${webId}. Sign out there and sign in as the owner.`, true); return true; }
+  say('Signing you in…');
+  const res = await s.fetch(here, {
+    method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    body: location.search.replace(/^\?/u, ''),
+  });
+  const d = await res.json().catch(() => ({}));
+  if (res.ok && d.redirect) { location.href = d.redirect; return true; }
+  if (res.ok && d.code) { say(`Your authorization code: ${d.code}`); return true; }
+  say(d.error || `The account refused the sign-in (HTTP ${res.status}).`, true);
+  return true;
+}
+
+if (location.search.includes('client_id=') && !(await prove())) $('signin').hidden = false;
+$('signin').addEventListener('click', async () => {
+  say('Taking you to your pod…');
+  try { await login.login(webId, { returnTo: location.href, redirectUri: here }); } catch (e) { say(e.message, true); }
+});

package/web/admin/setup/index.html

@@ -4,11 +4,12 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — setup</title>
+<link rel="icon" href="/icons/local.svg" type="image/svg+xml">
 <link rel="stylesheet" href="../tokens.css">
 <style>
 /* 20px on the root, not on body, so every rem below scales with it. */
 :root { color-scheme: light dark; font-size: 125%; --heading: #1a4f8a; }
-body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; }
+body { font: 1rem/1.5 Arial, Helvetica, sans-serif; margin: 0; }
 /* The bar spans the window; the form stays in a centred column under it. */
 /* The same 960 column the bar and the record use, so the three pages line up. */
 #page { max-width: 960px; margin: 0 auto; padding: 1.75rem 1rem 4rem; box-sizing: border-box; }

package/web/admin/tokens.css

@@ -4,9 +4,12 @@
    its :root. Declared under every name the pages already use — plus aliases
    (--ink=--fg, --muted=--sub, --link=--accent, --field-edge=--field-border,
    --danger=--err, --ring=--focus) — so a page only has to drop its own :root
-   colours and inherit these. */
+   colours and inherit these. The base size and the font family live here too:
+   20px base, Arial, and nothing on any page below 16px. */
 :root {
   color-scheme: light dark;
+  font-size: 125%;                      /* 20px base (125% of 16) */
+  --font: Arial, Helvetica, sans-serif;  /* one family across the site */
 
   /* ground + text */
   --bg: #ffffff; --fg: #1a1a1a; --ink: #1a1a1a;
@@ -14,7 +17,7 @@
   --raised: #ffffff;           /* cards, the rail, the bar band, dialogs */
 
   /* structure + action */
-  --heading: #123f74; --accent: #12467e; --link: #12467e;
+  --heading: #2c4a35; --accent: #12467e; --link: #12467e;
   --sub: #565656; --muted: #565656; --line: #b0b0b0;
 
   /* fields */
@@ -29,6 +32,13 @@
   --err: #b00020; --danger: #b00020; --warn: #8a4b00; --ok: #1f7a3d;
   --focus: #12467e; --ring: #12467e;
 
+  /* the edge of a dialog: bright against the page behind it */
+  --dialog-edge: #b8b8b8;
+
+  /* every other row of a table. A stripe nobody can see is not a stripe:
+     this is a real step from the page, not a hint of one. */
+  --stripe: #d3dce8;
+
   --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23124f8a' stroke-width='1.6' stroke-linecap='round'/></svg>");
 }
 
@@ -37,7 +47,7 @@
     --bg: #191919; --fg: #f3f3f3; --ink: #f3f3f3;
     --surface: #18191a; --raised: #242526;
 
-    --heading: #8fc2f2; --accent: #8fc2f2; --link: #8fc2f2;
+    --heading: #a7d4b5; --accent: #8fc2f2; --link: #8fc2f2;
     --sub: #d2d2d2; --muted: #d2d2d2; --line: #6d6d6d;
 
     --field-bg: #474747; --field-bg-hover: #515151; --field-hover: #515151;
@@ -50,6 +60,8 @@
 
     --err: #ff9b9b; --danger: #ff9b9b; --warn: #ffb366; --ok: #7fd39a;
     --focus: #8fc2f2; --ring: #8fc2f2;
+    --dialog-edge: #f3f3f3;
+    --stripe: #363c45;
 
     --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23bcd8f0' stroke-width='1.6' stroke-linecap='round'/></svg>");
   }