fedipod 1.10.0 → 1.26.1

package/web/app/index.html

@@ -5,12 +5,13 @@
 <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>
+<link rel="icon" href="/icons/local.svg" type="image/svg+xml">
 <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;
+  --heading: #2c4a35; --sub: #565656; --line: #b0b0b0; --accent: #12467e;
   --btn: #3a5f43; --btn-hover: #30503a; --btn-text: #ffffff;
   --field-bg: #ececec; --field-text: #141414; --field-border: #6f6f6f;
   --select-bg: #dce7f3; --select-border: #12467e;
@@ -19,14 +20,14 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --bg: #191919; --fg: #f3f3f3;
-    --heading: #8fc2f2; --sub: #d2d2d2; --line: #6d6d6d; --accent: #8fc2f2;
+    --heading: #a7d4b5; --sub: #d2d2d2; --line: #6d6d6d; --accent: #8fc2f2;
     --field-bg: #474747; --field-text: #f5f5f5; --field-border: #9aa0a6;
     --select-bg: #2f4a66; --select-border: #8fc2f2;
     --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); }
+body { font: 1rem/1.55 Arial, Helvetica, 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; }

package/web/app/oidc-session.mjs

@@ -1,189 +1,6 @@
-// oidc-session.mjs — Solid-OIDC login for the browser agent, 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 the service worker
-// where the agent runs, and a non-extractable key can sign but never be read
-// out, even by injected script. That is the security this buys over uvdsl's
-// sessionStorage (which must hold an extractable key as a string, per-tab).
-//
-// Page:   const { authorizationUrl } = await beginLogin({ issuer, redirectUri });
-//         location.href = authorizationUrl;                 // ... redirect ...
-//         await completeLogin({ currentUrl: location.href });  // on return
-// Anywhere (page or worker):
-//         const session = await getSession();  // { webId, fetch, signOut } | null
+// oidc-session.mjs — FediPod's Solid-OIDC session: the solid-oidc-session
+// library (lib/session/) bound to this app's database and client name. The
+// page and the service worker both import this file, so both read one session.
+import { solidOidcSession } from '../../lib/session/oidc-session.mjs';
 
-const DB = 'fedipod-oidc';
-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)));
-
-function idb() {
-  return new Promise((res, rej) => {
-    const r = indexedDB.open(DB, 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); });
-}
-
-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;
-}
-
-/** Begin login: prepare PKCE + a non-extractable DPoP key, stash the pending
- *  state, and return the authorization URL for the caller to navigate to. */
-export async function beginLogin({ issuer, redirectUri, clientName = 'FediPod' }) {
-  const cfg = await discover(issuer);
-  const client_id = await registerClient(cfg, redirectUri, clientName);
-  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,
-    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. */
-export 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');
-  return sessionHandle(session);
-}
-
-/** Restore the session from IndexedDB — works in the page and the worker. */
-export async function getSession() {
-  const s = await idbGet('session');
-  return s ? sessionHandle(s) : null;
-}
-
-/**
- * Sign out, and tell the issuer.
- *
- * Dropping the row locally left the REFRESH TOKEN alive at the pod for its full
- * life — signing out of a shared or borrowed browser cleared 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.
- */
-export 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;
-    const 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' }),
-    });
-    const tok = await res.json().catch(() => ({}));
-    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 authFetch = async (url, init = {}) => {
-    if (Date.now() > expiresAt - 30_000) await refresh();
-    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 });
-  };
-  return { webId: s.webId, fetch: authFetch, refresh, signOut };
-}
+export const { beginLogin, completeLogin, getSession, signOut } = solidOidcSession({ dbName: 'fedipod-oidc', clientName: 'FediPod' });

package/web/app/signup.mjs

@@ -234,6 +234,7 @@ export async function signUp(answers, { onStep = () => {}, frontOrigin = null }
 
   const config = {
     remotePod: pod, root: AP_ROOT, handle, name: handle, issuer: credential.issuerOrigin,
+    createdAt: new Date().toISOString(),
     ...(gateway ? { gateway } : {}),
   };
   // Write the config to the pod (owner-only, beside the key) so a returning

package/web/app/site/_headers

@@ -1,3 +1,13 @@
+/sw.js
+  Cache-Control: no-cache
+/update.js
+  Cache-Control: no-cache
+
+/authorize_interaction
+  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'self'; form-action 'self'
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: same-origin
+
 /app/*
   Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data: blob:; media-src 'self' https: blob:; connect-src 'self' https:; font-src 'self' data:; object-src 'none'; base-uri 'none'; frame-ancestors 'self'; form-action 'self'
   X-Content-Type-Options: nosniff
@@ -7,3 +17,15 @@
   Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data: blob:; connect-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'self'; form-action 'self'
   X-Content-Type-Options: nosniff
   Referrer-Policy: same-origin
+
+/bb/*
+  Cache-Control: no-cache
+  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; connect-src 'self' https:; object-src 'none'; base-uri 'none'; frame-ancestors 'self'; form-action 'self'
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: same-origin
+
+/demo/*
+  Cache-Control: no-cache
+  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; connect-src 'self' https:; object-src 'none'; base-uri 'none'; frame-ancestors 'self'; form-action 'self'
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: same-origin

package/web/app/site/_redirects

@@ -1,5 +1,6 @@
 # gateway + front API → the function
 /api/handle             /.netlify/functions/front  200
+/api/server             /.netlify/functions/front  200
 /api/attach             /.netlify/functions/front  200
 /api/relay              /.netlify/functions/front  200
 /api/roster             /.netlify/functions/front  200
@@ -12,11 +13,27 @@
 /run                    /.netlify/functions/front  200
 /roster                 /.netlify/functions/front  200
 /solid-oidc-client.js   /.netlify/functions/front  200
+# The forum at its own host: bb.<domain> is a domain alias of this site, and
+# every path there is the forum page (forced: / would otherwise be the app).
+# The page names its forum by the first path segment and reads through <domain>.
+http://bb.fedipod.net/*          https://bb.fedipod.net/:splat  301!
+https://bb.fedipod.net/           /forum/         301!
+https://bb.fedipod.net/bb/*      /bb/:splat      200!
+https://bb.fedipod.net/icons/*   /icons/:splat   200!
+https://bb.fedipod.net/update.js /update.js      200!
+https://bb.fedipod.net/build.json /build.json     200!
+https://bb.fedipod.net/api/*     /.netlify/functions/front  200!
+https://bb.fedipod.net/*         /bb/index.html  200!
 # the in-browser app, served static (these win over the project catch-all)
 /            /index.html    200
 /sw.js       /sw.js         200
 /boot.js     /boot.js       200
+/authorize_interaction  /authorize_interaction.html  200
 /app         /app/          301
 /app/*       /app/:splat    200
+/bb          /bb/           301
+/bb/*        /bb/:splat     200
 /admin       /admin/        301
 /admin/*     /admin/:splat  200
+/sengi       /sengi/        301
+/sengi/*     /sengi/:splat  200

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

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

package/web/app/site/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/app/site/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,13 +12,17 @@
    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; }
 </style>
 <link rel="stylesheet" href="../bar.css">
 <style>#actor-pick{display:none!important}</style>
+<meta name="fedipod-version" content="1.26.1">
+<meta name="fedipod-build" content="a59138536e01">
+<script src="/update.js" defer></script>
+<script src="/admin/client-pick.js"></script>
 </head>
 <body>
 
@@ -31,13 +36,26 @@ main { flex: 1 1 auto; min-height: 0; display: flex; }
   <a id="bar-fediverse" href="./" title="   Open the client and read your timeline" aria-current="page">visit account</a>
   <a id="bar-manage" href="../" title="   The record: what this actor is, and what you can do to it">manage account</a>
   <a id="bar-signout" href="/?signout" title="   Sign out of FediPod and clear this browser">sign out</a>
+  <span id="client-pick"><span id="client-now">client:</span>
+  <a class="client-switch" href="/admin/client/" title="   Open this account in Sengi and keep it as the client this browser uses">Sengi</a>
+  <a class="client-switch" href="/admin/client-phanpy/" title="   Open this account in Phanpy and keep it as the client this browser uses">Phanpy</a></span>
 </nav>
 
 <main>
-<iframe id="client" src="/app/" title="fediverse client"></iframe>
+<iframe id="client" src="/sengi/" title="fediverse client"></iframe>
 </main>
 
 <script src="../bar.js"></script>
-<script src="client.js"></script>
+
+
+<dialog id="client-news" aria-labelledby="client-news-title">
+  <section>
+    <h2 id="client-news-title">There are two clients now</h2>
+    <p>You can read your account in <b>Sengi</b> or in <b>Phanpy</b>.
+      The links at the top right of this page switch between them, and this browser
+      stays with whichever you choose. You can switch between clients at any time.</p>
+    <p class="row"><button id="client-news-ok" class="primary">Got it</button></p>
+  </section>
+</dialog>
 </body>
 </html>

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

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>FediPod — client</title>
+<link rel="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
+   a fixed height, the client takes the rest — the page never scrolls, the frame
+   does. */
+:root { color-scheme: light dark; font-size: 125%; }
+html { height: 100%; }
+body { font: 1rem/1.5 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; }
+</style>
+<link rel="stylesheet" href="../bar.css">
+<style>#actor-pick{display:none!important}</style>
+<meta name="fedipod-version" content="1.26.1">
+<meta name="fedipod-build" content="a59138536e01">
+<script src="/update.js" defer></script>
+<script src="/admin/client-pick.js"></script>
+</head>
+<body>
+
+<!-- The same bar the record carries, so the two surfaces are one thing with two
+     views. The client below is this agent's own, at its own root: same origin,
+     which is why framing it needs nothing opened beyond frame-ancestors 'self'. -->
+<nav id="bar" aria-label="Site">
+  <h1 class="name"><a href="/?add">FediPod</a></h1>
+  <select id="actor-pick" aria-label="Local actors"
+    title="   Every actor on this machine; choosing one opens its client"></select>
+  <a id="bar-fediverse" href="./" title="   Open the client and read your timeline" aria-current="page">visit account</a>
+  <a id="bar-manage" href="../" title="   The record: what this actor is, and what you can do to it">manage account</a>
+  <a id="bar-signout" href="/?signout" title="   Sign out of FediPod and clear this browser">sign out</a>
+  <span id="client-pick"><span id="client-now">client:</span>
+  <a class="client-switch" href="/admin/client/" title="   Open this account in Sengi and keep it as the client this browser uses">Sengi</a>
+  <a class="client-switch" href="/admin/client-phanpy/" title="   Open this account in Phanpy and keep it as the client this browser uses">Phanpy</a></span>
+</nav>
+
+<main>
+<iframe id="client" src="/app/" title="fediverse client"></iframe>
+</main>
+
+<script src="../bar.js"></script>
+<script src="/admin/client/client.js"></script>
+
+<dialog id="client-news" aria-labelledby="client-news-title">
+  <section>
+    <h2 id="client-news-title">There are two clients now</h2>
+    <p>You can read your account in <b>Sengi</b> or in <b>Phanpy</b>.
+      The links at the top right of this page switch between them, and this browser
+      stays with whichever you choose. You can switch between clients at any time.</p>
+    <p class="row"><button id="client-news-ok" class="primary">Got it</button></p>
+  </section>
+</dialog>
+</body>
+</html>

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

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

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

@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — record</title>
+<link rel="icon" href="/icons/local.svg" type="image/svg+xml">
 <link rel="stylesheet" href="tokens.css">
 <style>
 /* Colours are the shared tokens (tokens.css, the front's palette), so the
@@ -15,7 +16,7 @@
 /* The page itself never scrolls: the body is exactly the window; the content
    column beside the rail is the scroll container. */
 html { height: 100%; }
-body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; height: 100dvh;
+body { font: 1rem/1.5 Arial, Helvetica, sans-serif; margin: 0; height: 100dvh;
   box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
 /* The bar spans the window; the rail and the content column share one centred
    column underneath it — wide enough that the content keeps 960 of its own
@@ -167,6 +168,10 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
 <link rel="stylesheet" href="bar.css?v=3">
 <link rel="stylesheet" href="window.css">
 <style>#gw-shape-front,#do-drain,#do-log,#actor-pick{display:none!important}</style>
+<meta name="fedipod-version" content="1.26.1">
+<meta name="fedipod-build" content="a59138536e01">
+<script src="/update.js" defer></script>
+<script src="/admin/client-pick.js"></script>
 </head>
 <body>
 
@@ -178,6 +183,9 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
   <a id="bar-fediverse" href="client/" title="   Open the client and read your timeline">visit account</a>
   <a id="bar-manage" href="./" title="   The record: what this actor is, and what you can do to it" aria-current="page">manage account</a>
   <a id="bar-signout" href="/?signout" title="   Sign out of FediPod and clear this browser">sign out</a>
+  <span id="client-pick"><span id="client-now">client:</span>
+  <a class="client-switch" href="/admin/client/" title="   Open this account in Sengi and keep it as the client this browser uses">Sengi</a>
+  <a class="client-switch" href="/admin/client-phanpy/" title="   Open this account in Phanpy and keep it as the client this browser uses">Phanpy</a></span>
 </nav>
 <main id="page">
 
@@ -560,5 +568,15 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
 <script src="group.js"></script>
 <script src="upkeep.js"></script>
 <script src="gateway.js"></script>
+
+<dialog id="client-news" aria-labelledby="client-news-title">
+  <section>
+    <h2 id="client-news-title">There are two clients now</h2>
+    <p>You can read your account in <b>Sengi</b> or in <b>Phanpy</b>.
+      The links at the top right of this page switch between them, and this browser
+      stays with whichever you choose. You can switch between clients at any time.</p>
+    <p class="row"><button id="client-news-ok" class="primary">Got it</button></p>
+  </section>
+</dialog>
 </body>
 </html>