fedipod-server 0.21.0 → 0.28.0

package/lib/gateway/notices.mjs

@@ -0,0 +1,84 @@
+// notices.mjs — notices from whoever runs the front, to every account here.
+//
+// The operator writes them on the /notices page, proved as the admin the way
+// the roster is; every page of ours asks GET /api/notices once per load and
+// shows a bell when there are any. A notice is a title, a plain-text body and
+// a time. The body is never markup: the pages render it as text.
+//
+// Kept beside the directory, in a store the adapter supplies:
+//   listNotices() -> { id: notice }     putNotice(id, notice)     deleteNotice(id)
+// A front that supplies none has no notices to offer, and says so.
+
+import crypto from 'node:crypto';
+
+const TITLE_MAX = 120;
+const BODY_MAX = 4000;
+const NOTICES_EDGE_SECONDS = 60;
+
+const clean = (v, max) => String(v ?? '').replace(/\r\n?/gu, '\n').trim().slice(0, max);
+const newest = (a, b) => String(b.at || '').localeCompare(String(a.at || ''));
+
+export async function listNotices(ctx) {
+  const all = ctx.listNotices ? await ctx.listNotices() : {};
+  return Object.values(all || {}).filter(Boolean).sort(newest);
+}
+
+// GET is public: what every account is shown. POST is the admin's alone. The
+// /notices page is where the admin writes them; it signs in like the roster.
+// Returns a response, or null when the path is neither.
+export async function routeNoticesApi(request, pathname, ctx, { j, verifyPodToken, publicFor, notFound }) {
+  // The two admin pages: the roster (who has accounts here) and the notices.
+  // Each signs in and calls its API; a deploy with no admin supplies no page.
+  const page = pathname === '/notices' ? ctx.noticesPage : pathname === '/roster' ? ctx.adminPage : undefined;
+  if (page !== undefined) {
+    if (request.method !== 'GET' && request.method !== 'HEAD') return { status: 405, headers: {}, body: '' };
+    if (!page) return notFound();
+    return { status: 200, headers: { 'content-type': 'text/html; charset=utf-8' }, body: page };
+  }
+  if (pathname !== '/api/notices') return null;
+  const open = { 'access-control-allow-origin': '*' };
+  if (request.method === 'OPTIONS') {
+    return { status: 204, headers: { ...open, 'access-control-allow-methods': 'GET, OPTIONS',
+      'access-control-allow-headers': 'Accept', allow: 'GET, POST, OPTIONS' }, body: null };
+  }
+  if (request.method === 'GET') {
+    if (!ctx.listNotices) return j(501, { error: 'this front keeps no notices' });
+    const out = j(200, { notices: await listNotices(ctx) });
+    Object.assign(out.headers, open, publicFor(NOTICES_EDGE_SECONDS));
+    return out;
+  }
+  if (request.method !== 'POST') return { status: 405, headers: {}, body: '' };
+  if (!ctx.putNotice || !ctx.deleteNotice || !ctx.adminWebId) return j(501, { error: 'this front keeps no notices' });
+  const webid = await verifyPodToken(request, pathname, ctx.verifier);
+  if (!webid) return j(401, { error: 'a Solid-OIDC token is required' });
+  if (webid !== ctx.adminWebId) return j(403, { error: 'that WebID is not the admin of this front' });
+  let body;
+  try { body = JSON.parse(await request.clone().text()); } catch { return j(400, { error: 'bad JSON' }); }
+  const action = String(body.action || '');
+  const all = (ctx.listNotices ? await ctx.listNotices() : {}) || {};
+  if (action === 'delete') {
+    const id = String(body.id || '');
+    if (!all[id]) return j(404, { error: 'no such notice' });
+    await ctx.deleteNotice(id);
+    console.log(`front: notice ${id} deleted by the admin`);
+    return j(200, { ok: true, id, deleted: true });
+  }
+  if (action !== 'create' && action !== 'update') return j(400, { error: 'action must be create, update or delete' });
+  const title = clean(body.title, TITLE_MAX);
+  const text = clean(body.body, BODY_MAX);
+  if (!title) return j(400, { error: 'a title is required' });
+  if (!text) return j(400, { error: 'a body is required' });
+  const now = new Date().toISOString();
+  let notice;
+  if (action === 'create') {
+    const id = `${Date.now().toString(36)}-${crypto.randomBytes(4).toString('hex')}`;
+    notice = { id, title, body: text, at: now, updatedAt: now };
+  } else {
+    const prior = all[String(body.id || '')];
+    if (!prior) return j(404, { error: 'no such notice' });
+    notice = { ...prior, title, body: text, updatedAt: now };
+  }
+  await ctx.putNotice(notice.id, notice);
+  console.log(`front: notice ${notice.id} ${action}d by the admin`);
+  return j(action === 'create' ? 201 : 200, { ok: true, notice });
+}

package/lib/gateway/quiet.mjs

@@ -0,0 +1,184 @@
+// quiet.mjs — accounts that go quiet: what the front knows about an account
+// nobody opens, and what its owner may say about it. The router in
+// front-core.mjs asks closedState/accountState at the door and on every
+// public read, stamps noteOpened from the relay, counts noteReceived after
+// a forwarded delivery, and hands /api/open, /api/pause and /api/close here.
+
+// ---- accounts that go quiet -------------------------------------------------
+//
+// The gateway holds no mail: every delivery it takes is two writes into the
+// owner's pod inbox, read only when their browser is open. An account nobody
+// opens grows on its pod without limit, and its owner comes back to a drain
+// of everything at once. So the front keeps two facts about each browser
+// account — when its owner was last here, and how much content has arrived
+// since — and acts on them.
+//
+// `openedAt` is written when the owner signs in (POST /api/open, always) and
+// while they act through the relay (at most hourly). The count of content
+// deliveries since then lives in its own record, keyed by handle AND
+// openedAt: a fresh stamp starts a fresh count with nothing to reset, and a
+// delivery's write can never overwrite a sign-in's. Two deliveries landing
+// together may each read the same total and one increment is lost — the cap
+// comes out slightly soft, never too strict.
+//
+// PAUSED: the count has reached the cap, or the owner said so. Content is
+// accepted and discarded, control (follows, unfollows, moves, deletions,
+// blocks) still lands. The owner's next sign-in ends a cap pause by itself; a
+// pause they set lasts until they lift it.
+//
+// CLOSED: the owner said so, or nothing has opened the account for the close
+// window. Found closed by time, it is written down so it stays closed. From
+// then on the door, the actor and the handle answer 410 — never a failure
+// code, which senders retry and count against this whole host, and never a
+// success, which would keep them sending. Nothing on the pod is touched. An
+// address that moved (see /api/move) keeps answering as moved; closing does
+// not take that away.
+//
+// Only an account whose owner has signed in from a browser carries
+// `openedAt`. A DeviceAgent behind this door never does: it drains its own
+// inbox as it runs, so it is never counted, never paused and never closed by
+// time. Accounts from before this was built are counted from their next
+// sign-in.
+export const DEFAULT_PAUSE_ITEMS = 5000;
+export const DEFAULT_CLOSE_DAYS = 183;                // six months
+const OPEN_STAMP_EVERY_MS = 60 * 60_000;              // the relay's stamp, at most hourly
+const pauseItemsOf = (ctx) => (Number(ctx.pauseItems) > 0 ? Number(ctx.pauseItems) : DEFAULT_PAUSE_ITEMS);
+const closeDaysOf = (ctx) => (Number(ctx.closeDays) > 0 ? Number(ctx.closeDays) : DEFAULT_CLOSE_DAYS);
+const receivedKey = (key, rec) => `${key}/${rec.openedAt}`;
+
+export async function receivedSince(ctx, key, rec) {
+  if (!ctx.readReceived || !rec.openedAt) return { items: 0, bytes: 0 };
+  const got = await ctx.readReceived(receivedKey(key, rec)).catch(() => null);
+  return { items: Number(got?.items) || 0, bytes: Number(got?.bytes) || 0 };
+}
+
+// One more content delivery reached the pod. Nothing to count against until
+// the owner has been here once.
+export async function noteReceived(ctx, key, rec, bytes) {
+  if (!ctx.readReceived || !ctx.writeReceived || !rec.openedAt) return;
+  const so = await receivedSince(ctx, key, rec);
+  await ctx.writeReceived(receivedKey(key, rec), { items: so.items + 1, bytes: so.bytes + (Number(bytes) || 0) })
+    .catch((e) => console.log(`front @${key}: count not written: ${e?.message || e}`));
+}
+
+// The owner is here. `always` is a sign-in; the relay stamps at most hourly,
+// so a busy hour of posting is one write. The count that went with the old
+// stamp is dropped: it is over, and a store should not keep one per hour.
+export async function noteOpened(ctx, key, rec, { always = false } = {}) {
+  if (!ctx.putDirectory) return rec;
+  if (!always && rec.openedAt && Date.now() - Date.parse(rec.openedAt) < OPEN_STAMP_EVERY_MS) return rec;
+  const next = { ...rec, openedAt: new Date().toISOString() };
+  await ctx.putDirectory(key, next);
+  if (rec.openedAt && ctx.dropReceived) await ctx.dropReceived(receivedKey(key, rec)).catch(() => {});
+  return next;
+}
+
+// Closed, and why. Reads no count: this is asked on every public read.
+export async function closedState(ctx, key, rec) {
+  if (rec.movedTo) return { closed: false };
+  if (rec.closedAt) return { closed: true, closedAt: rec.closedAt, closedBy: rec.closedBy || 'owner' };
+  if (rec.openedAt && Date.now() - Date.parse(rec.openedAt) > closeDaysOf(ctx) * 86400_000) {
+    const closedAt = new Date().toISOString();
+    if (ctx.putDirectory) await ctx.putDirectory(key, { ...rec, closedAt, closedBy: 'quiet' });
+    console.log(`front @${key}: closed — nothing opened it since ${rec.openedAt}`);
+    return { closed: true, closedAt, closedBy: 'quiet' };
+  }
+  return { closed: false };
+}
+
+// The whole standing of an account, for the door and for its owner's page.
+export async function accountState(ctx, key, rec) {
+  const c = await closedState(ctx, key, rec);
+  const received = c.closed ? { items: 0, bytes: 0 } : await receivedSince(ctx, key, rec);
+  const cap = pauseItemsOf(ctx);
+  const pausedBy = c.closed ? null : rec.pausedAt ? 'owner' : received.items >= cap ? 'quiet' : null;
+  return {
+    closed: c.closed, closedAt: c.closedAt || null, closedBy: c.closedBy || null,
+    paused: !!pausedBy, pausedBy, pausedAt: rec.pausedAt || null,
+    openedAt: rec.openedAt || null, received, pauseItems: cap, closeDays: closeDaysOf(ctx),
+  };
+}
+
+// A 410 with a reason, the shape every closed or moved id answers with.
+export const closedAnswer = (headers = {}, why = 'this address is closed') => ({
+  status: 410, headers: { ...headers, 'content-type': 'application/json', 'cache-control': 'no-store' },
+  body: JSON.stringify({ error: why }) });
+
+// The owner of a row, proved the way the relay proves them: a pod token whose
+// WebID is the row's, or lives on the row's pod for a row from before WebIDs
+// were recorded.
+async function provedOwner(request, pathname, ctx, rec, { j, verifyPodToken, webidUnderPod }) {
+  const webid = await verifyPodToken(request, pathname, ctx.verifier);
+  if (!webid) return { error: j(401, { error: 'a Solid-OIDC token proving the pod is required' }) };
+  const owner = rec.webId ? webid === rec.webId : webidUnderPod(webid, rec.podHome);
+  if (!owner) return { error: j(403, { error: "the token proves a different pod than this account's" }) };
+  return { webid };
+}
+
+// The owner's three routes. `deps` are front-core's own JSON reply and
+// token check, handed in so this module stays free of the router's privates.
+// Returns a response, or null when the path is not one of these.
+export async function routeQuietApi(request, pathname, ctx, deps) {
+  const { j } = deps;
+  if (request.method !== 'POST' || !['/api/open', '/api/pause', '/api/close'].includes(pathname)) return null;
+  // The owner is here: their browser says so as it opens the account. The
+  // answer is the account's standing at this gateway, which the manage page
+  // shows. A closed address is told so and nothing is written.
+  if (pathname === '/api/open' && request.method === 'POST') {
+    if (!ctx.putDirectory) return j(501, { error: 'this front keeps no directory' });
+    let body;
+    try { body = JSON.parse(await request.clone().text()); } catch { return j(400, { error: 'bad JSON' }); }
+    const handle = String(body.handle || '').toLowerCase();
+    let rec = await ctx.lookup(handle);
+    if (!rec) return j(404, { error: 'no such account' });
+    const who = await provedOwner(request, pathname, ctx, rec, deps);
+    if (who.error) return who.error;
+    const before = await closedState(ctx, handle, rec);
+    if (before.closed) return j(410, { error: 'this address is closed', closedAt: before.closedAt, closedBy: before.closedBy });
+    rec = await noteOpened(ctx, handle, rec, { always: true });
+    return j(200, { ok: true, handle, ...await accountState(ctx, handle, rec) });
+  }
+
+  // The owner pausing their own account, or lifting the pause they set.
+  if (pathname === '/api/pause' && request.method === 'POST') {
+    if (!ctx.putDirectory) return j(501, { error: 'this front keeps no directory' });
+    let body;
+    try { body = JSON.parse(await request.clone().text()); } catch { return j(400, { error: 'bad JSON' }); }
+    const handle = String(body.handle || '').toLowerCase();
+    let rec = await ctx.lookup(handle);
+    if (!rec) return j(404, { error: 'no such account' });
+    const who = await provedOwner(request, pathname, ctx, rec, deps);
+    if (who.error) return who.error;
+    const before = await closedState(ctx, handle, rec);
+    if (before.closed) return j(410, { error: 'this address is closed', closedAt: before.closedAt });
+    if (typeof body.paused !== 'boolean') return j(400, { error: 'paused must be true or false' });
+    if (body.paused && !rec.pausedAt) rec = { ...rec, pausedAt: new Date().toISOString() };
+    if (!body.paused && rec.pausedAt) { rec = { ...rec }; delete rec.pausedAt; }
+    // Lifting a pause is a sign-in's worth of "I am here": the count starts over.
+    if (!body.paused) rec = { ...rec, openedAt: new Date().toISOString() };
+    await ctx.putDirectory(handle, rec);
+    console.log(`front @${handle}: ${body.paused ? 'paused' : 'resumed'} by its owner`);
+    return j(200, { ok: true, handle, ...await accountState(ctx, handle, rec) });
+  }
+
+  // The owner closing their address for good. Repeating it changes nothing.
+  if (pathname === '/api/close' && request.method === 'POST') {
+    if (!ctx.putDirectory) return j(501, { error: 'this front keeps no directory' });
+    let body;
+    try { body = JSON.parse(await request.clone().text()); } catch { return j(400, { error: 'bad JSON' }); }
+    const handle = String(body.handle || '').toLowerCase();
+    let rec = await ctx.lookup(handle);
+    if (!rec) return j(404, { error: 'no such account' });
+    const who = await provedOwner(request, pathname, ctx, rec, deps);
+    if (who.error) return who.error;
+    if (body.confirm !== true) return j(400, { error: 'closing is for good — send confirm: true' });
+    if (!rec.closedAt) {
+      rec = { ...rec, closedAt: new Date().toISOString(), closedBy: 'owner' };
+      await ctx.putDirectory(handle, rec);
+      console.log(`front @${handle}: closed by its owner`);
+    }
+    return j(200, { ok: true, handle, ...await accountState(ctx, handle, rec) });
+  }
+
+  return null;
+}

package/lib/pod/root.mjs

@@ -94,8 +94,11 @@ export async function probeAnswers(podUrl, fetchImpl = fetch) {
  *
  * ---- asked by: a front publishing a pod's public face under its own name ----
  */
-export async function readPublicDocument(getter, podTarget, { podHome, maxBytes = PUBLIC_DOC_MAX_BYTES } = {}) {
-  const res = await getter(podTarget, { podHome });
+export async function readPublicDocument(getter, podTarget, { podHome, accept = null, maxBytes = PUBLIC_DOC_MAX_BYTES } = {}) {
+  const res = await getter(podTarget, { podHome, accept });
   if (!res || res.status >= 400) return { status: res?.status || 502, text: null };
-  return { status: 200, text: await readCapped(res, maxBytes) };
+  // What the pod called it: a front that relabels an HTML page as JSON hands
+  // a browser something it will not render.
+  const type = res.headers?.get?.('content-type') || null;
+  return { status: 200, text: await readCapped(res, maxBytes), type };
 }

package/lib/pod/state.mjs

@@ -11,11 +11,11 @@
 
 // ---- the owner's agent ----
 
-export const readWrappedKeys = (pod, urls) => pod.getJson(urls.state + 'keys.json');
+export const readKeys = (pod, urls) => pod.getJson(urls.state + 'keys.json');
 export const readConfig = (pod, urls) => pod.getJson(urls.state + 'config.json');
 
-export const writeWrappedKeys = (pod, urls, envelope) =>
-  pod.putJson(urls.state + 'keys.json', envelope, 'application/json');
+export const writeKeys = (pod, urls, keys) =>
+  pod.putJson(urls.state + 'keys.json', keys, 'application/json');
 export const writeConfig = (pod, urls, config) =>
   pod.putJson(urls.state + 'config.json', config, 'application/json');
 
@@ -30,10 +30,11 @@ export const writeConfig = (pod, urls, config) =>
  * public. As two statements this was two chances to get it wrong; as one
  * operation there is nowhere to put them in the other order.
  *
- * The envelope is built by the caller. This library does not choose how a key
- * is wrapped, and should not be able to write an unwrapped one by accident.
+ * The keys record is stored as it is: the container's access rule is what
+ * keeps it to the owner, the same rule every private document on the pod
+ * lives under.
  */
-export async function provisionKey(pod, { stateUrl, keysUrl, envelope }) {
+export async function provisionKey(pod, { stateUrl, keysUrl, keys }) {
   await pod.setAcl(stateUrl, []);
-  await pod.putJson(keysUrl, envelope, 'application/json');
+  await pod.putJson(keysUrl, keys, 'application/json');
 }

package/lib/pod/transport.mjs

@@ -309,7 +309,7 @@ export class PodTransport {
   // leaves the private trees world-readable. $rdf.sym() also throws on an
   // illegal IRI, so a pod URL with something odd in it fails here rather than
   // silently producing a document that means something else.
-  aclDoc(targetUrl, publicModes, { appendAgents = [], aclUrl = null } = {}) {
+  aclDoc(targetUrl, publicModes, { appendAgents = [], readAgents = [], aclUrl = null } = {}) {
     const url = aclUrl || targetUrl + '.acl';
     const doc = $rdf.sym(url);
     const target = $rdf.sym(targetUrl);
@@ -328,6 +328,10 @@ export class PodTransport {
     // locked to a gateway — public loses Append, the gateway's WebID keeps it.
     appendAgents.forEach((webId, i) =>
       authorize($rdf.sym(url + `#gw${i}`), ACL('agent'), $rdf.sym(webId), ['Append']));
+    // Named agents granted Read but not public: this is how a forum's
+    // moderators read a queue that names people, without it being public.
+    readAgents.forEach((webId, i) =>
+      authorize($rdf.sym(url + `#r${i}`), ACL('agent'), $rdf.sym(webId), ['Read']));
     authorize($rdf.sym(url + '#owner'), ACL('agent'), $rdf.sym(this.webId),
       ['Read', 'Write', 'Control']);
     return $rdf.serialize(doc, g, url, 'text/turtle');

package/lib/session/README.md

@@ -0,0 +1,123 @@
+# fediverse-account
+
+The library lets an app take a Fediverse handle or a WebID and act as that
+account.
+
+- **`login`** — sends the person to wherever their account signs in, their
+  Mastodon server or their pod, and brings them back to where they were.
+- **`resume`** — on every page load, finishes a sign-in they are coming back
+  from. Otherwise does nothing.
+- **`current`** — the signed-in account, or nothing.
+- **`signOut`** — signs them out, at their server or pod as well as in the
+  browser.
+- **`describe`** — says what an address is without signing in: a Mastodon
+  account or a pod account, and its handle.
+
+Once signed in, the account gives you:
+
+- **`post`** — publishes a post as them, public, unlisted or followers-only.
+- **`reply`** — answers a post.
+- **`timeline`** — their home timeline, newest first.
+- **`follow`** — follows someone by handle.
+- **`favourite`**, **`boost`** — as they say.
+- **`profile`** — who they are as their server or pod shows them: name,
+  handle, picture, bio, counts, profile page, and the WebID for a pod
+  account.
+- **`notice`** — a sentence to show them, or nothing. A browser-based
+  FediPod account gets: "Because you have a browser-based account, your
+  posts and interactions will only go out to the Fediverse when your browser
+  is opened to your account."
+- **`handle`, `name`, `kind`** — who they are, and whether the account is on
+  Mastodon or a pod, for an app that wants to know.
+- **`signOut`** — the same as above.
+
+The app never asks which kind it has. A Mastodon account acts at once. A
+pod account's actions are carried out by its own agent, at once for a
+DeviceAgent or Server account, and when fedipod.net is next open for a
+browser-based one.
+
+Three files, no dependencies. It runs in a page and in a service worker.
+
+[The demo](https://jeff-zucker.github.io/FediPod/) shows the sign-in and
+the profile that comes back.
+
+## Get it
+
+From a CDN, with nothing to install:
+
+```js
+import { fediAccount } from 'https://cdn.jsdelivr.net/npm/fediverse-account@0.1.0/fedi-account.mjs';
+```
+
+Or from npm:
+
+```bash
+npm install fediverse-account
+```
+
+```js
+import { fediAccount } from 'fediverse-account';
+```
+
+## Use
+
+```js
+import { fediAccount } from 'fediverse-account';
+const accounts = fediAccount({ dbName: 'my-app', clientName: 'My app' });
+
+await accounts.resume();                                   // on every page load
+
+signInButton.onclick = () => accounts.login(addressField.value);
+
+const me = await accounts.current();                       // null when nobody is signed in
+if (me?.notice) show(me.notice);
+await me.post({ text: 'Hello from my app' });
+for (const p of await me.timeline({ limit: 20 })) render(p);
+await me.follow('@aisha@her.server');
+await me.reply(p.url, 'Well said');
+await me.signOut();
+```
+
+## The details
+
+- **`fediAccount({ dbName, clientName })`** — sets the library up for your
+  app, once. `dbName` keeps this app's sign-ins apart from another app's on
+  the same origin. `clientName` is what the person sees on the consent
+  screen.
+- **`login(address, { returnTo, redirectUri })`** — `@kwame@mastodon.social`
+  goes to Mastodon; `@mei@fedipod.net`, or a WebID, goes to the pod. They
+  come back to this page unless `redirectUri` says otherwise, and are
+  returned to where they were unless `returnTo` says otherwise.
+- **`post({ text, inReplyTo, visibility })`** — `visibility` is `public`,
+  `unlisted` or `followers`.
+- **`reply(post, text)`** — the post is named by its address or its id.
+- **`timeline({ limit })`** — each post as `{ id, url, author: { id, handle,
+  name }, html, published, inReplyTo }`.
+- **`fetch`** — the raw authenticated fetch, for anything the above does not
+  cover.
+- **`actor`** — the account's ActivityPub id.
+
+Every action answers `{ sent: true }` when the server did it, or `{ queued:
+true }` when the account's own agent will carry it out.
+
+## What it cannot do
+
+- **An address whose server is neither a Mastodon-family server nor a Solid
+  pod** is refused with a sentence naming the host.
+- **A browser-based FediPod account acts when its browser is open.** Posts,
+  follows and replies wait at the account's outbox until fedipod.net is next
+  open in some browser, and its timeline is the one that browser last built.
+  The account's `notice` says so; show it.
+- **A Mastodon account has no pod.** An app that keeps things on a pod has
+  nowhere to keep them for such a person.
+
+## Where the sign-in goes, and what stays in the browser
+
+A Mastodon account signs in at its own server, which asks the person to
+approve your app once. The token it grants stays in their browser and is
+handed back to the server at sign-out.
+
+A pod account signs in at the pod's login provider. The key that proves the
+sign-in is made in the browser and cannot be read out of it, even by a
+script on the page. The person stays signed in across browser restarts
+until they sign out, and sign-out is reported to the provider.

package/lib/session/demo.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Act as a Fediverse account</title>
+<link rel="stylesheet" href="../../web/admin/tokens.css">
+<style>
+  body { font-family: var(--font, Arial, Helvetica, sans-serif); background: var(--bg); color: var(--fg); margin: 0; padding: .75rem 1rem 2rem; }
+  main { max-width: 44rem; margin: 0 auto; }
+  h1 { margin-top: .5rem; }
+  form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; margin: 1.25rem 0; }
+  label { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 18rem; }
+  input { font: inherit; padding: .6rem .8rem; background: var(--field-bg); color: var(--field-text); border: 1px solid var(--field-border); border-radius: .4rem; }
+  button { font: inherit; padding: .6rem 1.2rem; background: var(--btn); color: var(--btn-text); border: 1px solid var(--btn-edge); border-radius: .4rem; cursor: pointer; }
+  button:hover { background: var(--btn-hover); }
+  a { color: var(--link); }
+  .kinds { padding-left: 1.4rem; margin: .75rem 0 1.25rem; } .kinds li { margin: .4rem 0; }
+  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
+  .skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; }
+  #status, #profile { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); margin: 1rem 0; }
+  #status { min-height: 1.5em; }
+  #status[data-kind="error"] { border-color: var(--err); }
+  #status[hidden] { display: none; }
+  #profile { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; align-items: start; }
+  #profile img { width: 5rem; height: 5rem; border-radius: .6rem; object-fit: cover; background: var(--raised); }
+  #profile dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
+  #profile dt { font-weight: bold; } #profile dd { margin: 0; overflow-wrap: anywhere; }
+  section[hidden] { display: none; }
+</style>
+</head>
+<body>
+<a href="#main" class="skip">Skip to content</a>
+<main id="main">
+  <h1>Act as a Fediverse account</h1>
+  <p>Type an address and you are sent to wherever that account signs in, then come back here signed in as it. Any of these works:</p>
+  <ul class="kinds">
+    <li><strong>A FediPod handle</strong> — <code>@jeff@fedipod.net</code> — signs in at your Solid pod</li>
+    <li><strong>Other Fediverse handle</strong> — <code>@you@mastodon.social</code> — signs in at your server</li>
+    <li><strong>A WebID</strong> — <code>https://you.solidcommunity.net/profile/card#me</code> — signs in at your Solid pod</li>
+  </ul>
+  <p>This demo is created with the <a href="https://github.com/jeff-zucker/FediPod/tree/main/lib/session">fediverse-account</a> library. Once signed in, the demo shows you your profile. The library itself returns an account session with methods to post, reply, like, etc.</p>
+  <form id="form">
+    <label>Your address
+      <input id="address" name="address" type="text" autocomplete="username" placeholder="@you@your.server" required>
+    </label>
+    <button type="submit" id="go">Sign in</button>
+    <button type="button" id="out" hidden>Sign out</button>
+  </form>
+  <p id="status" role="status" aria-live="polite">Not signed in.</p>
+  <section id="acting" hidden aria-labelledby="profile-h">
+    <h2 id="profile-h">Profile</h2>
+    <div id="profile"></div>
+  </section>
+</main>
+<script type="module">
+  import { fediAccount } from './fedi-account.mjs';
+  const accounts = fediAccount({ dbName: 'fedi-account-demo', clientName: 'Fediverse account demo' });
+  const $ = (id) => document.getElementById(id);
+  const say = (text, kind = '') => { $('status').hidden = false; $('status').textContent = text; $('status').dataset.kind = kind; $('status').setAttribute('role', kind === 'error' ? 'alert' : 'status'); };
+  const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const link = (u) => (u ? `<a href="${esc(u)}">${esc(u)}</a>` : '—');
+  const showProfile = async (me) => {
+    try {
+      const p = await me.profile();
+      $('profile').innerHTML = `${p.avatar ? `<img src="${esc(p.avatar)}" alt="">` : '<span></span>'}
+        <dl>
+          <dt>Name</dt><dd>${esc(p.name || '—')}</dd>
+          <dt>Handle</dt><dd>${esc(p.handle || '—')}</dd>
+          <dt>Kind</dt><dd>${me.kind === 'pod' ? 'a FediPod account on a Solid pod' : 'a Mastodon account'}</dd>
+          <dt>Bio</dt><dd>${p.bio || '—'}</dd>
+          <dt>Counts</dt><dd>${p.posts ?? '?'} posts, ${p.followers ?? '?'} followers, ${p.following ?? '?'} following</dd>
+          <dt>Profile page</dt><dd>${link(p.url)}</dd>
+          <dt>Actor</dt><dd>${link(p.actor)}</dd>
+          ${p.webId ? `<dt>WebID</dt><dd>${link(p.webId)}</dd>` : ''}
+        </dl>`;
+    } catch (e) { $('profile').textContent = `The profile could not be read: ${e.message}`; }
+  };
+  const show = async () => {
+    const me = await accounts.current();
+    $('out').hidden = !me; $('acting').hidden = !me; $('status').hidden = !!me;
+    if (!me) { say('Not signed in.'); $('profile').innerHTML = ''; return; }
+    await showProfile(me);
+  };
+  try { await accounts.resume(); } catch (e) { say(e.message, 'error'); }
+  await show();
+  $('form').addEventListener('submit', async (e) => {
+    e.preventDefault(); say('Finding that account…');
+    try { await accounts.login($('address').value); } catch (err) { say(err.message, 'error'); }
+  });
+  $('out').addEventListener('click', async () => { await accounts.signOut(); await show(); });
+</script>
+</body>
+</html>