fedipod-server 0.9.0 → 0.11.0

package/web/app/fediacct-browser.mjs

@@ -0,0 +1,146 @@
+// fediacct-browser.mjs — connections to fediverse accounts the owner holds on
+// OTHER servers, in the browser.
+//
+// Same FediAccounts client the Node agent uses (lib/fediacct.mjs): the same
+// OAuth dance and authenticated calls. What the browser adds is the owner's
+// per-connection storage choice, the same one Bluesky has:
+//
+//  - "browser": the credential lives in IndexedDB on this device (default).
+//  - "pod": it lives in the owner-only pod state, so it follows the owner to
+//    any browser they sign in from.
+//
+// A record carries which backend it lives in; list() merges both, and moving a
+// connection is a re-write to the other backend. App registrations and the
+// short-lived OAuth "pending" state stay in IndexedDB (per browser), and the
+// pending state is persisted so a connection survives the worker being
+// idle-killed between the redirect out and the code coming back.
+import { FediAccounts } from '../../lib/fediacct.mjs';
+import { kvAll, kvPut, kvDel } from './idb-kv.mjs';
+
+const POD_DOC = 'fediaccts.json';   // { id: record } for pod-stored connections
+const PEND_TTL_MS = 10 * 60_000;
+
+export class BrowserFediAccounts extends FediAccounts {
+  constructor({ store, actorId = null, log = console.log } = {}) {
+    super({ localDir: '/fediaccts', actorId, log });   // localDir unused; storage below
+    this.store = store;
+    this._recs = new Map();     // browser (IndexedDB) records, id → record
+    this._apps = new Map();     // host → app registration
+  }
+
+  async load() {
+    const all = await kvAll().catch(() => ({}));
+    for (const [k, v] of Object.entries(all)) {
+      if (k.startsWith('rec:')) this._recs.set(k.slice(4), v);
+      else if (k.startsWith('app:')) this._apps.set(k.slice(4), v);
+      else if (k.startsWith('pend:')) this.pending.set(k.slice(5), v);
+    }
+    const now = Date.now();
+    for (const [s, p] of this.pending) if (now - p.at > PEND_TTL_MS) { this.pending.delete(s); kvDel('pend:' + s).catch(() => {}); }
+    return this;
+  }
+
+  _podMap() { return this.store.read(POD_DOC, {}) || {}; }
+
+  // ---- records, across both backends ----
+  ids() { return [...new Set([...this._recs.keys(), ...Object.keys(this._podMap())])]; }
+
+  read(id) {
+    let rec = null; let where = null;
+    if (this._recs.has(id)) { rec = this._recs.get(id); where = 'browser'; }
+    else { const p = this._podMap()[id]; if (p) { rec = p; where = 'pod'; } }
+    if (!rec) return null;
+    if (rec.mintedFor && this.actorId && rec.mintedFor !== this.actorId) {
+      this.log(`fediaccts/${id} belongs to ${rec.mintedFor} — not reusing it for ${this.actorId}`);
+      return null;
+    }
+    return { ...rec, storage: where };
+  }
+
+  write(rec) {
+    const where = rec.storage || 'browser';
+    const clean = { ...rec, storage: where };
+    if (where === 'pod') {
+      const map = { ...this._podMap(), [clean.id]: clean };
+      this.store.write(POD_DOC, map); this.store.flush?.().catch(() => {});
+      this._recs.delete(clean.id); kvDel('rec:' + clean.id).catch(() => {});
+    } else {
+      this._recs.set(clean.id, clean); kvPut('rec:' + clean.id, clean).catch((e) => this.log(`fediacct persist: ${e.message}`));
+      const map = this._podMap();
+      if (clean.id in map) { delete map[clean.id]; this.store.write(POD_DOC, map); this.store.flush?.().catch(() => {}); }
+    }
+  }
+
+  // Best-effort: tell the server to revoke our token (RFC 7009), so a
+  // disconnect actually invalidates it there — not just locally. Mirrors
+  // atproto's deleteSession. Called before remove(); a failure never blocks the
+  // local removal. For a pod-stored connection this is what lets one device
+  // revoke a token another device (a stolen phone) is holding.
+  async revoke(id) {
+    const rec = this.read(id);
+    const app = this._apps.get(rec?.host);
+    if (!rec?.token || !app?.clientId) return;
+    try {
+      await this._fetch(rec.host, `https://${rec.host}/oauth/revoke`, {
+        method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' },
+        body: new URLSearchParams({ client_id: app.clientId, client_secret: app.clientSecret, token: rec.token }).toString(),
+      });
+      this.log(`revoked our token at ${rec.host}`);
+    } catch (e) { this.log(`revoke at ${rec.host} failed (removing locally anyway): ${e.message}`); }
+  }
+
+  remove(id) {
+    const had = this._recs.has(id) || (id in this._podMap());
+    if (!had) return false;
+    this._recs.delete(id); kvDel('rec:' + id).catch(() => {});
+    const map = this._podMap();
+    if (id in map) { delete map[id]; this.store.write(POD_DOC, map); this.store.flush?.().catch(() => {}); }
+    this.log(`Fediverse account disconnected: ${id}`);
+    return true;
+  }
+
+  // Carry the storage location out to the record page.
+  roster() { return this.list().map(r => ({ id: r.id, handle: r.handle, host: r.host, addedAt: r.addedAt || null, enabled: r.enabled !== false, storage: r.storage })); }
+  status() {
+    return this.list().map(r => ({
+      id: r.id, handle: r.handle, host: r.host, enabled: r.enabled !== false,
+      needsReconnect: !!r.needsReconnect, storage: r.storage,
+      cooldownFor: Math.max(0, Math.round(((this.pausedUntil.get(r.host) || 0) - Date.now()) / 1000)),
+    }));
+  }
+
+  // Move a connection between backends (the Options menu's Storage control).
+  setStorage(id, where) { const rec = this.read(id); if (rec && (where === 'pod' || where === 'browser')) { this.write({ ...rec, storage: where }); return this.roster().find(r => r.id === id) || null; } return null; }
+
+  // One app registration per host, remembered — over IndexedDB.
+  async appFor(host, redirectUri) {
+    const cached = this._apps.get(host);
+    if (cached && cached.redirectUri === redirectUri && cached.clientId && cached.clientSecret) return cached;
+    const res = await this._fetch(host, `https://${host}/api/v1/apps`, {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ client_name: 'FediPod', redirect_uris: redirectUri, scopes: 'read write', website: 'https://github.com/jeff-zucker/FediPod' }),
+    });
+    const body = await this._json(res, host);
+    if (!body.client_id || !body.client_secret) throw new Error(`${host} registered no client`);
+    const app = { host, redirectUri, clientId: body.client_id, clientSecret: body.client_secret };
+    this._apps.set(host, app); await kvPut('app:' + host, app).catch(() => {});
+    return app;
+  }
+
+  // Persist the pending state across the redirect (the worker may be idle-killed).
+  async begin(opts) {
+    const r = await super.begin(opts);
+    await kvPut('pend:' + r.state, this.pending.get(r.state)).catch(() => {});
+    return r;
+  }
+
+  async complete({ state, code }) {
+    if (!this.pending.has(state)) {
+      const p = await kvAll().then((a) => a['pend:' + state]).catch(() => null);
+      if (p) this.pending.set(state, p);
+    }
+    const row = await super.complete({ state, code });
+    await kvDel('pend:' + state).catch(() => {});
+    return row;
+  }
+}

package/web/app/idb-kv.mjs

@@ -0,0 +1,35 @@
+// idb-kv.mjs — a tiny per-origin key/value store on IndexedDB, for the browser
+// agent's "on this device, never the pod" storage: a connected account's
+// credential when the owner chooses to keep it in this browser rather than let
+// it follow them to their pod. Shared by atproto-browser and fediacct-browser.
+const DB = 'fedipod-accounts';
+
+function open() {
+  return new Promise((res, rej) => {
+    const r = indexedDB.open(DB, 1);
+    r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('kv')) db.createObjectStore('kv'); };
+    r.onsuccess = () => res(r.result);
+    r.onerror = () => rej(r.error);
+  });
+}
+
+export async function kvGet(key) {
+  const db = await open();
+  return new Promise((res, rej) => { const rq = db.transaction('kv', 'readonly').objectStore('kv').get(key); rq.onsuccess = () => res(rq.result ?? null); rq.onerror = () => rej(rq.error); });
+}
+export async function kvAll() {
+  const db = await open();
+  return new Promise((res, rej) => {
+    const out = {}; const cur = db.transaction('kv', 'readonly').objectStore('kv').openCursor();
+    cur.onsuccess = () => { const c = cur.result; if (c) { out[c.key] = c.value; c.continue(); } else res(out); };
+    cur.onerror = () => rej(cur.error);
+  });
+}
+export async function kvPut(key, val) {
+  const db = await open();
+  return new Promise((res, rej) => { const tx = db.transaction('kv', 'readwrite'); tx.objectStore('kv').put(val, key); tx.oncomplete = () => res(); tx.onerror = () => rej(tx.error); });
+}
+export async function kvDel(key) {
+  const db = await open();
+  return new Promise((res, rej) => { const tx = db.transaction('kv', 'readwrite'); tx.objectStore('kv').delete(key); tx.oncomplete = () => res(); tx.onerror = () => rej(tx.error); });
+}

package/web/app/index.html

@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https:; form-action 'self'; base-uri 'none'">
+<title>FediPod</title>
+<style>
+:root {
+  color-scheme: light dark;
+  font-size: 125%;                      /* 20px default (125% of 16) */
+  --bg: #ffffff; --fg: #1a1a1a;
+  --heading: #123f74; --sub: #565656; --line: #b0b0b0; --accent: #12467e;
+  --btn: #3a5f43; --btn-hover: #30503a; --btn-text: #ffffff;
+  --field-bg: #ececec; --field-text: #141414; --field-border: #6f6f6f;
+  --err: #b00020; --warn: #8a4b00; --focus: #12467e;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #191919; --fg: #f3f3f3;
+    --heading: #8fc2f2; --sub: #d2d2d2; --line: #6d6d6d; --accent: #8fc2f2;
+    --field-bg: #474747; --field-text: #f5f5f5; --field-border: #9aa0a6;
+    --btn: #4a7a54; --btn-hover: #3f6a49;
+    --err: #ff9b9b; --warn: #ffb366; --focus: #8fc2f2;
+  }
+}
+body { font: 1rem/1.55 system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); }
+#page { max-width: 42rem; margin: 0 auto; padding: 1.75rem 1rem 4rem; box-sizing: border-box; }
+h1, h2, h3 { color: var(--heading); }
+h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
+#brand { margin: 0 0 1.25rem; }
+h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
+p { margin: .6rem 0; }
+code { background: rgba(120,120,120,.18); padding: .05em .35em; border-radius: 4px; }
+.sub { color: var(--sub); margin-top: 0; }
+.hint { color: var(--sub); font-size: .95rem; margin: .15rem 0 0; }    /* ~17px, never under 16 */
+.grouplabel { display: block; margin: .75rem 0 .2rem; font-weight: 600; }
+fieldset { border: 1px solid var(--line); border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
+legend { padding: 0 .3rem; font-weight: 600; }
+label { display: block; margin: .75rem 0 .2rem; }
+input[type=text], input[type=email], input[type=url], input[type=password], select {
+  font: inherit; font-size: 1rem; width: 100%; padding: .55rem; box-sizing: border-box;
+  border: 1px solid var(--field-border); border-radius: .3rem;
+  background: var(--field-bg); color: var(--field-text); }
+::placeholder { color: var(--sub); opacity: 1; }
+.choice { display: block; margin: .4rem 0; font-weight: normal; }
+.choice input { margin-right: .5rem; width: auto; }
+button { font: inherit; font-size: 1rem; padding: .6rem 1.3rem; border-radius: .4rem;
+  border: 1px solid var(--btn); background: var(--btn); color: var(--btn-text);
+  font-weight: 600; cursor: pointer; }
+button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
+button.primary { font-weight: 700; }
+button:disabled { opacity: .55; cursor: default; }
+#create { margin-bottom: 2rem; }
+:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
+.row { display: flex; gap: .5rem; align-items: center; }
+.row input { flex: 1; }
+.row button { white-space: nowrap; }
+.address { font-size: 1.25rem; font-weight: 700; word-break: break-all; color: var(--fg); }
+.warn { border-left: .25rem solid var(--warn); padding-left: .75rem; color: var(--warn); }
+.err { border-left: .25rem solid var(--err); padding-left: .75rem; color: var(--err); }
+.err:empty { display: none; }
+.steps { list-style: none; padding: 0; }
+.steps li { padding: .3rem 0; }
+a { color: var(--accent); }
+[hidden] { display: none !important; }
+</style>
+</head>
+<body>
+<main id="page">
+
+<!-- The marketing hero: shown on the landing, hidden once a form is up. -->
+<header id="hero">
+  <h1>FediPod - join the Fediverse from a Solid pod.</h1>
+  <p>Welcome to <b>fedipod.net</b>! By creating an account here, you can get a free Solid pod
+  and Fediverse identity or link to your existing pod/identity. Your fedipod.net
+  account provides you a portal to the Fediverse and filters unverified mail.</p>
+
+  <p>There is nothing to install, once you've setup an account, just point any browser at
+  <code>https://fedipod.net</code> and sign in.</p>
+</header>
+
+<!-- The short brand: shown only when a form is up, so the form stands alone. -->
+<h1 id="brand" hidden>FediPod</h1>
+
+<p id="loading" role="status">Loading…</p>
+
+<section id="landing" hidden>
+  <h2>Already have a FediPod account?</h2>
+  <p class="row">
+    <input type="text" id="signin-address" autocapitalize="off" spellcheck="false" placeholder="@me@mypod"
+      aria-label="Your FediPod address, in the form @you@yourpod">
+    <button type="button" class="primary" id="signin">sign in</button>
+  </p>
+  <p class="err" id="signin-error" role="alert"></p>
+  <h2>New user?</h2>
+  <p><button type="button" class="primary" id="create">create an account</button></p>
+  <p>Fedipod.net is a FediPod Gateway operated by Jeff Zucker. You can detach from the gateway at any
+  time and transfer your account either to your own FediPod Gateway (easy to set up on a free tier Netlify) 
+  or to any Fediverse server. All of your data lives on your pod and your Fediverse identity is yours
+  forever independent of which gateway you attach to.</p>
+  <p>For more information, see
+    <a href="https://github.com/jeff-zucker/FediPod">github.com/jeff-zucker/FediPod</a></p>
+</section>
+
+<!-- Shown only on a browser that has signed in but has never opened the signing
+     key. The key is kept on the pod encrypted under the account password, so
+     the pod's host cannot sign as you; a browser opens it once and remembers. -->
+<section id="unlock" hidden>
+  <h2>Unlock your signing key</h2>
+  <p>Your signing key is stored on your pod, locked under your account password,
+  so nobody who can read your pod — your pod's host included — can post as you.
+  This browser has not opened it yet.</p>
+  <p class="row">
+    <input type="password" id="unlock-password" autocomplete="current-password"
+      placeholder="Your account password" aria-label="Your account password">
+    <button type="button" class="primary" id="unlock-go">unlock</button>
+  </p>
+  <p class="err" id="unlock-error" role="alert"></p>
+  <p class="hint">This browser only — it is not sent anywhere.</p>
+</section>
+
+
+<section id="pane-form" hidden>
+  <form id="form">
+
+    <!-- Screen 1: Your Solid Pod -->
+    <div class="step" id="step-1">
+      <fieldset>
+        <legend>Your Solid Pod</legend>
+
+        <div role="radiogroup" aria-labelledby="podtype-label">
+          <span id="podtype-label" class="grouplabel">Pod type</span>
+          <label class="choice"><input type="radio" name="mode" value="existing"> An existing pod</label>
+          <label class="choice"><input type="radio" name="mode" value="new" checked> A new pod</label>
+        </div>
+
+        <label for="provider">Pod provider</label>
+        <input type="url" id="provider" name="provider" autocomplete="url" placeholder="https://solidcommunity.net">
+
+        <label for="podName">Pod username/subdomain</label>
+        <input type="text" id="podName" name="podName" autocomplete="off" aria-describedby="podname-hint">
+        <p class="hint" id="podname-hint">The subdomain of your pod. On solidcommunity.net, alice
+          becomes the pod https://alice.solidcommunity.net.</p>
+
+        <label for="email">Pod email</label>
+        <input type="email" id="email" name="email" autocomplete="email" placeholder="you@example.org">
+
+        <label for="password">Pod password</label>
+        <input type="password" id="password" name="password" autocomplete="current-password"
+          aria-describedby="password-hint">
+        <p class="hint" id="password-hint">Your password is sent once, to make your account and to
+          lock your signing key. It is never stored. The credential used to set things up is
+          deleted when setup finishes — from then on this browser signs in through your pod,
+          the way any other Solid app does.</p>
+      </fieldset>
+      <p class="err" id="err-1" role="alert"></p>
+      <p>
+        <button type="button" id="cancel">Cancel</button>
+        <button type="button" class="primary" id="to-2">Continue</button>
+      </p>
+    </div>
+
+    <!-- Screen 2: Your Fediverse Identity -->
+    <div class="step" id="step-2" hidden>
+      <fieldset>
+        <legend>Your Fediverse Identity</legend>
+
+        <label for="handle">Fediverse handle</label>
+        <input type="text" id="handle" name="handle" autocomplete="off"
+          placeholder="the handle part of your address: @HANDLE@server" aria-describedby="handle-hint">
+        <p class="hint" id="handle-hint">The name in your Fediverse address. This is permanent.
+          Letters, digits, and hyphens only.</p>
+
+        <span id="addr-label" class="grouplabel">Your Fediverse address</span>
+        <p class="address" id="preview" role="status" aria-live="polite" aria-labelledby="addr-label">@…@…</p>
+      </fieldset>
+      <p class="hint">The handle and the pod cannot be changed afterwards. Everything else — display
+        name, bio, pictures — you set later in the client.</p>
+      <p class="err" id="form-error" role="alert"></p>
+      <p>
+        <button type="button" id="back-1">Back</button>
+        <button type="submit" class="primary" id="submit">Create Pod and Fediverse accounts</button>
+      </p>
+    </div>
+
+  </form>
+</section>
+
+<section id="running" hidden>
+  <h2 id="running-title">Setting up…</h2>
+  <ul class="steps" id="steps" aria-live="polite"></ul>
+  <p class="err" id="run-error" role="alert"></p>
+  <p id="run-actions" hidden>
+    <button type="button" id="run-back">Start over</button>
+    <button type="button" class="primary" id="run-retry">Try again</button>
+  </p>
+</section>
+
+</main>
+<script type="module" src="/boot.js"></script>
+</body>
+</html>

package/web/app/index.html~

@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://solidcommunity.net https://*.solidcommunity.net; form-action 'self' https://solidcommunity.net https://*.solidcommunity.net; base-uri 'none'">
+<title>FediPod</title>
+<style>
+:root { color-scheme: light dark; font-size: 112.5%; --heading: #1a4f8a; --sub: #666; --line: #bbb; --accent: #1a4f8a; }
+@media (prefers-color-scheme: dark) { :root { --heading: #7fb3e8; --sub: #aaa; --line: #555; --accent: #7fb3e8; } }
+body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; }
+#page { max-width: 42rem; margin: 0 auto; padding: 1.75rem 1rem 4rem; box-sizing: border-box; }
+h1, h2, h3 { color: var(--heading); }
+h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
+#brand { margin: 0 0 1.25rem; }
+h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
+p { margin: .6rem 0; }
+code { background: rgba(120,120,120,.14); padding: .05em .35em; border-radius: 4px; }
+.sub { color: var(--sub); margin-top: 0; }
+.hint { color: var(--sub); font-size: .9rem; margin: .15rem 0 0; }
+fieldset { border: 1px solid var(--line); border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
+legend { padding: 0 .3rem; font-weight: 600; }
+label { display: block; margin: .75rem 0 .2rem; }
+input[type=text], input[type=email], input[type=url], input[type=password], select {
+  font: inherit; width: 100%; padding: .5rem; box-sizing: border-box;
+  border: 1px solid #767676; border-radius: .3rem; background: Field; color: FieldText; }
+.choice { display: block; margin: .35rem 0; font-weight: normal; }
+.choice input { margin-right: .4rem; width: auto; }
+button { font: inherit; padding: .6rem 1.2rem; border-radius: .3rem; border: 1px solid #666;
+  background: ButtonFace; color: ButtonText; cursor: pointer; }
+button.primary { font-weight: 600; }
+button:disabled { opacity: .5; cursor: default; }
+.row { display: flex; gap: .5rem; align-items: center; }
+.row input { flex: 1; }
+.row button { white-space: nowrap; }
+.address { font-size: 1.2rem; font-weight: 600; word-break: break-all; }
+.warn { border-left: .25rem solid #c60; padding-left: .75rem; }
+.err { border-left: .25rem solid #b00020; padding-left: .75rem; color: #b00020; }
+@media (prefers-color-scheme: dark) { .err { color: #ff8a8a; border-left-color: #ff8a8a; } }
+#form-error:empty, #signin-error:empty { display: none; }
+.steps { list-style: none; padding: 0; }
+.steps li { padding: .3rem 0; }
+a { color: var(--accent); }
+[hidden] { display: none !important; }
+</style>
+</head>
+<body>
+<main id="page">
+
+<!-- The marketing hero: shown on the landing, hidden once a form is up. -->
+<header id="hero">
+  <h1>FediPod - join the Fediverse from a Solid pod.</h1>
+  <p>Welcome to <b>fedipod.net</b>! By creating an account here, you can get a free Solid pod
+  and Fediverse identity or link to your existing pod/identity. Your <code>fedipod.net</code>
+  account provides you a portal to the Fediverse and filters unverified mail but does not tie
+  you to anything. All of your data lives on your pod and your Fediverse identity is yours
+  forever regardless of what happens to fedipod.net.</p>
+  <p>There is nothing to install, once you've setup an account, just point any browser at
+  <code>https://fedipod.net</code> and sign in.</p>
+</header>
+
+<!-- The short brand: shown only when a form is up, so the form stands alone. -->
+<h1 id="brand" hidden>FediPod</h1>
+
+<p id="loading">Loading…</p>
+
+<section id="landing" hidden>
+  <h2>Already have an account?</h2>
+  <p class="row">
+    <input type="text" id="signin-address" autocapitalize="off" spellcheck="false" placeholder="@me@mypod">
+    <button type="button" class="primary" id="signin">sign in</button>
+  </p>
+  <p class="err" id="signin-error" role="alert"></p>
+  <h2>New user?</h2>
+  <p><button type="button" class="primary" id="create">create an account</button></p>
+  <p class="hint">For more information, see
+    <a href="https://github.com/jeff-zucker/FediPod">github.com/jeff-zucker/FediPod</a></p>
+</section>
+
+<section id="pane-form" hidden>
+  <form id="form">
+
+    <!-- Screen 1: Your Solid Pod -->
+    <div class="step" id="step-1">
+      <fieldset>
+        <legend>Your Solid Pod</legend>
+
+        <label>Pod type</label>
+        <label class="choice"><input type="radio" name="mode" value="existing"> An existing pod</label>
+        <label class="choice"><input type="radio" name="mode" value="new" checked> A new pod</label>
+
+        <label for="provider">Pod provider</label>
+        <input type="url" id="provider" name="provider" autocomplete="url" placeholder="https://solidcommunity.net">
+
+        <label for="podName">Pod username/subdomain</label>
+        <input type="text" id="podName" name="podName" autocomplete="off" aria-describedby="podname-hint">
+        <p class="hint" id="podname-hint">The subdomain of your pod: your pod address becomes
+          https://YOUR-USERNAME.your-provider.</p>
+
+        <label for="email">Pod email</label>
+        <input type="email" id="email" name="email" autocomplete="email" placeholder="you@example.org">
+
+        <label for="password">Pod password</label>
+        <input type="password" id="password" name="password" autocomplete="current-password"
+          aria-describedby="password-hint">
+        <p class="hint" id="password-hint">The password is sent once in return for a credential stored
+          in this browser. The password itself is never stored, and you can revoke the credential
+          without changing it.</p>
+      </fieldset>
+      <p class="err" id="err-1" role="alert"></p>
+      <p>
+        <button type="button" id="cancel">Cancel</button>
+        <button type="button" class="primary" id="to-2">Continue</button>
+      </p>
+    </div>
+
+    <!-- Screen 2: Your Fediverse Identity -->
+    <div class="step" id="step-2" hidden>
+      <fieldset>
+        <legend>Your Fediverse Identity</legend>
+
+        <label for="handle">Fediverse handle</label>
+        <input type="text" id="handle" name="handle" autocomplete="off"
+          placeholder="the handle part of your address: @HANDLE@server" aria-describedby="handle-hint">
+        <p class="hint" id="handle-hint">The name in your Fediverse address. This is permanent.
+          Letters, digits, and hyphens only.</p>
+
+        <label>Your Fediverse address</label>
+        <p class="address" id="preview">@…@…</p>
+      </fieldset>
+      <p class="hint">The handle and the pod cannot be changed afterwards. Everything else — display
+        name, bio, pictures — you set later in the client.</p>
+      <p class="err" id="form-error" role="alert"></p>
+      <p>
+        <button type="button" id="back-1">Back</button>
+        <button type="submit" class="primary" id="submit">Create Pod and Fediverse accounts</button>
+      </p>
+    </div>
+
+  </form>
+</section>
+
+<section id="running" hidden>
+  <h2>Setting up…</h2>
+  <ul class="steps" id="steps"></ul>
+  <p class="err" id="run-error" role="alert"></p>
+</section>
+
+</main>
+<script type="module" src="/boot.js"></script>
+</body>
+</html>

package/web/app/keys-browser.mjs

@@ -0,0 +1,46 @@
+// keys-browser.mjs — turn the keys record (from keystore/the pod) into what the
+// agent's deliverer and publisher expect. The Node agent's resolveKeys returns
+// { rsaPrivate (a WebCrypto key), rsaPublicPem, edPrivate, edPublicMultibase };
+// this returns the same, RSA only. FEP-8b32 Ed25519 proofs are optional — the
+// deliverer treats a null edPrivate as "no proof", and an unproved activity
+// still federates — so the browser MVP omits them.
+import { kvGet, kvPut } from './idb-kv.mjs';
+import * as podState from '../../lib/pod/state.mjs';
+import { isKeyEnvelope, KeyPasswordNeeded } from './keystore.mjs';
+
+const pemToDer = (pem) => Uint8Array.from(
+  atob(pem.replace(/-----[^-]+-----/g, '').replace(/\s+/g, '')), (c) => c.charCodeAt(0));
+
+export async function importSigningKey(keysRecord) {
+  const rsaPrivate = await crypto.subtle.importKey('pkcs8', pemToDer(keysRecord.rsa.privatePem),
+    { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' }, true, ['sign']);
+  return { rsaPrivate, rsaPublicPem: keysRecord.rsa.publicPem, edPrivate: null, edPublicMultibase: null };
+}
+
+// Where this browser keeps its own opened copy of the signing key. The pod's
+// copy is wrapped under the account password; this one is not, because it never
+// leaves the origin — the same protection the OIDC session in the next IDB row
+// already relies on. It is what lets the worker boot itself after an idle kill
+// without a soul around to type anything.
+export const keyCacheKey = (actorUrl) => `signing-keys:${actorUrl}`;
+
+// Read the signing key for this actor and import it for signing.
+//
+// Two places hold one: this browser (opened, in IndexedDB) and the pod (wrapped).
+// The browser's is tried first — it is the only one that can be read with no
+// password, and a service worker has nobody to ask. Falling through to the pod
+// covers the browser that has just signed in and has no copy yet: a bare record
+// there is from before wrapping and is used as it stands, while an envelope
+// needs the password and so has to go back to the page.
+export async function loadKeysFromPod(remote, urls) {
+  const cached = await kvGet(keyCacheKey(urls.actor)).catch(() => null);
+  if (cached?.rsa) return importSigningKey(cached);
+
+  const doc = await podState.readWrappedKeys(remote, urls);
+  if (isKeyEnvelope(doc)) throw new KeyPasswordNeeded();
+  if (!doc || !doc.rsa) throw new Error('no signing key on the pod — sign up did not finish');
+  // A pre-wrapping install. Cache it so the next boot is one read, and leave
+  // the pod's copy alone: re-wrapping it would need the password we do not have.
+  await kvPut(keyCacheKey(urls.actor), doc).catch(() => {});
+  return importSigningKey(doc);
+}