fedipod-server 0.21.0 → 0.28.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.21.0",
+  "version": "0.28.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

@@ -33,6 +33,7 @@ import { apRoot, rootOf, writeJsonAtomic } from './lib/device/home.mjs';
 import { ensureTrustedTls } from './lib/device/certs.mjs';
 import { storageFor } from './lib/core/storage.mjs';
 import { resolveKeys } from './lib/core/keys.mjs';
+import { completeGatewayMove } from './lib/device/gateway-move.mjs';
 import { RemotePod } from './lib/device/remote.mjs';
 import { Deliverer } from './lib/core/deliver.mjs';
 import { Publisher } from './lib/core/publisher/index.mjs';
@@ -497,6 +498,18 @@ export class Agent {
     return true;
   }
 
+  // The featured collection was once written only on the first pin, so an
+  // account from before then has none, and every server that shows the
+  // profile is refused and asks again. One authenticated GET; the empty
+  // collection goes up when the pod lacks it. True when it had to.
+  async ensureFeaturedPublished() {
+    const doc = await this.remote.getJson(this.urls.featured);
+    if (doc?.id) return false;
+    this.log('featured collection missing from the pod — publishing it');
+    await this.publisher.publishFeatured();
+    return true;
+  }
+
   // Read-only mode: refresh the state cache periodically, and take over the
   // moment the active agent's lease frees.
   startViewer() {
@@ -535,6 +548,10 @@ export class Agent {
       return;                                // renewal is already running, above
     }
     await this.intake.start();
+    // An address that moved here from another gateway, whose move was left
+    // pending (the old gateway could not be told): try again now that this
+    // agent acts and the actor is published.
+    completeGatewayMove(this).catch(e => this.log(`gateway move: ${e.message}`));
     // Reused, not replaced: demote() stops this instance but does not clear it,
     // so constructing a new one over the top orphaned the old chain beyond the
     // reach of any later stop().
@@ -588,6 +605,8 @@ export class Agent {
     if (repair) {
       this.ensureActorPublished()
         .catch(e => this.log(`actor check failed: ${e.message}`));
+      this.ensureFeaturedPublished()
+        .catch(e => this.log(`featured 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()
@@ -730,6 +749,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,69 @@ 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, #bar #account-pick { display: inline-flex; gap: .6rem; align-items: baseline;
+  white-space: nowrap; margin-left: 1rem; }
+#bar #client-now, #bar #account-now { opacity: .75; }
+/* The notices bell: the one filled control in the bar, because it is the one
+   thing there that is not a place to go but something to be told. The count is
+   how many notices this browser has not opened yet; with none it is quiet. */
+#bar #bar-notices { display: inline-flex; align-items: center; gap: .35rem; margin-left: 1rem;
+  padding: .3rem .7rem; border-radius: 999px; font-size: 1.05rem; line-height: 1;
+  background: var(--btn); color: var(--btn-text); border: 1px solid var(--btn); }
+/* `display` on an id rule outranks the browser's own [hidden] rule, and the
+   shell has no !important of its own, so the bell hid on the record page and
+   showed on the client with nothing to show. Said here, once, for every page. */
+#bar #bar-notices[hidden] { display: none; }
+#bar #bar-notices:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
+#bar #bar-notices:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
+#bar #bar-notices-count { font-size: .9rem; font-weight: 700; min-width: 1.3em; text-align: center;
+  padding: .05rem .4rem; border-radius: 999px; background: var(--btn-text); color: var(--btn); }
+#bar #bar-notices-count:empty { display: none; }
+#bar #bar-notices[data-new="0"] { background: var(--field-bg); color: var(--ink); border-color: var(--field-edge); }
+#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, #notices-list, #notice-view {
+  /* 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, #notices-list::backdrop, #notice-view::backdrop { background: rgba(0, 0, 0, .45); }
+#client-news h2, #notices-list h2, #notice-view h2 { font-size: 1.25rem; margin: 0 0 .9rem; color: var(--heading); }
+#client-news p, #notices-list p, #notice-view p { margin: 0 0 1.2rem; }
+#client-news p:last-child, #notices-list p:last-child, #notice-view p:last-child { margin: 0; }
+#client-news button, #notices-list button, #notice-view 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, #notices-list button:hover, #notice-view button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
+#client-news button:focus-visible, #notices-list button:focus-visible, #notice-view button:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
+
+/* The notices dialogs are centred and never taller than the window: the
+   client-news rule above sits low, and a short window pushed a list of
+   notices up past the top edge where nothing could reach it. */
+#notices-list, #notice-view { margin: auto; max-height: calc(100dvh - 3rem); overflow: auto; box-sizing: border-box; }
+/* The list of notices: each title a button that opens that notice, the date
+   beside it, the ones not yet opened here in bold. */
+#notices-items { list-style: none; margin: 0 0 1.2rem; padding: 0; }
+#notices-items li { display: flex; gap: .8rem; align-items: baseline; padding: .45rem 0;
+  border-bottom: 1px solid var(--line); }
+#notices-items li:last-child { border-bottom: 0; }
+#notices-items button.notice-open { flex: 1 1 auto; text-align: left; padding: .1rem 0;
+  background: none; border: 0; color: var(--link); text-decoration: underline; text-underline-offset: .2rem; }
+#notices-items li.new button.notice-open { font-weight: 700; }
+#notices-items .when, #notice-view .when { color: var(--sub); font-size: .9rem; white-space: nowrap; }
+#notices-items p.none { color: var(--sub); }
+#notice-view-body p { margin: 0 0 .9rem; }
+#notice-view-body a { color: var(--link); word-break: break-all; }

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; }
@@ -27,8 +28,16 @@ main { flex: 1 1 auto; min-height: 0; display: flex; }
   <h1 class="name">FediPod</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>
+  <!-- The account group, styled like the client group beside it: one label,
+       then the places to go. The browser build adds "sign out" to it. -->
+  <span id="account-pick"><span id="account-now">account:</span>
+  <a id="bar-fediverse" href="./" title="   Open the client and read your timeline" aria-current="page">visit</a>
+  <a id="bar-manage" href="../" title="   The record: what this actor is, and what you can do to it">manage</a>
+  </span>
+  <!-- Notices from whoever runs this site. Shown only when the site has any
+       (notices-bar.js asks /api/notices); the count is how many are new here. -->
+  <button type="button" id="bar-notices" hidden aria-haspopup="dialog" aria-controls="notices-list"
+    title="   Notices from the operator of this site">&#128276;<span id="bar-notices-count" aria-live="polite"></span></button>
 </nav>
 
 <main>
@@ -37,5 +46,24 @@ main { flex: 1 1 auto; min-height: 0; display: flex; }
 
 <script src="../bar.js"></script>
 <script src="client.js"></script>
+
+<!-- The notices: the list, and one notice open. Declared here and filled by
+     notices-bar.js from /api/notices; nothing in them is markup from a notice. -->
+<dialog id="notices-list" aria-labelledby="notices-title">
+  <section>
+    <h2 id="notices-title">Notices</h2>
+    <ul id="notices-items"></ul>
+    <p class="row"><button type="button" id="notices-close" class="primary" title="   Close the list of notices">Close</button></p>
+  </section>
+</dialog>
+<dialog id="notice-view" aria-labelledby="notice-view-title">
+  <section>
+    <h2 id="notice-view-title"></h2>
+    <p class="when" id="notice-view-when"></p>
+    <div id="notice-view-body"></div>
+    <p class="row"><button type="button" id="notice-view-close" class="primary" title="   Back to the list of notices">Close</button></p>
+  </section>
+</dialog>
+<script src="../notices-bar.js"></script>
 </body>
 </html>

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 */ }
+    });
+  }
+});