fedipod 0.18.0 → 0.19.0

package/scripts/stage-site.mjs

@@ -0,0 +1,144 @@
+// stage-site.mjs — assemble the deployable static site for the in-browser agent.
+//
+// Output (web/app/site/, gitignored): the sign-up and sign-in pages at the
+// root, the boot glue and the agent service worker (sw.js must be at the root
+// so it controls the whole origin), and Phanpy under /app/ with its own
+// service-worker registration removed so only the agent worker runs.
+//
+//   npm run build:app     # both bundles, into web/app/dist/
+//   npm run stage         # this script
+//
+// The bundles are tracked, so rebuild and commit them in the SAME commit as
+// whatever source change caused them — a dist that does not match its own
+// source is the hardest kind of thing to see in the browser build.
+import fs from 'node:fs'; import path from 'node:path'; import { fileURLToPath } from 'node:url';
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const site = path.join(root, 'web/app/site');
+fs.rmSync(site, { recursive: true, force: true }); fs.mkdirSync(path.join(site, 'app'), { recursive: true });
+const cp = (from, to) => fs.copyFileSync(path.join(root, from), path.join(site, to));
+cp('web/app/index.html', 'index.html');
+cp('web/app/dist/boot.js', 'boot.js');
+cp('web/app/dist/sw.js', 'sw.js');
+const copyDir = (from, to) => { fs.mkdirSync(to, { recursive: true });
+  for (const e of fs.readdirSync(from, { withFileTypes: true })) {
+    const s = path.join(from, e.name), d = path.join(to, e.name);
+    if (e.isDirectory()) copyDir(s, d);
+    else if (e.name === 'sw.js' || e.name === 'sw.js.map') { /* drop Phanpy's own worker */ }
+    else if (e.name === 'index.html') fs.writeFileSync(d, fs.readFileSync(s, 'utf8').replace(/<script id="vite-plugin-pwa:inline-sw">[\s\S]*?<\/script>/i, ''));
+    else fs.copyFileSync(s, d);
+  } };
+copyDir(path.join(root, 'phanpy/dist'), path.join(site, 'app'));
+// The owner's record/manage surface: the SAME web/admin pages the Node agent
+// serves, reused as static files (the agent answers their data endpoints from
+// the worker — see admin-facade.mjs). Two browser adaptations: the client shell
+// frames the client at /app/ (locally the client is the origin root, so the
+// source says "../../"), and the manual "Drain the inbox" control is hidden —
+// the browser drains automatically over notifications.
+const copyAdmin = (from, to) => { fs.mkdirSync(to, { recursive: true });
+  for (const e of fs.readdirSync(from, { withFileTypes: true })) {
+    const s = path.join(from, e.name), d = path.join(to, e.name);
+    if (e.isDirectory()) { copyAdmin(s, d); continue; }
+    if (e.name !== 'index.html') { fs.copyFileSync(s, d); continue; }
+    // Every bar in the browser build: no "Local actors" dropdown (there is one
+    // identity per browser), and the FediPod brand is a link to the sign-in /
+    // add-a-pod page — /?add shows it without bouncing a signed-in user back
+    // into the client, so setup is always one click from the bar.
+    let text = fs.readFileSync(s, 'utf8')
+      .replace('<h1 class="name">FediPod</h1>', '<h1 class="name"><a href="/?add">FediPod</a></h1>')
+      // A sign-out beside "manage account", on every bar. It clears the FediPod
+      // session, the client's stored account, browser-stored connected keys, and
+      // the worker — the /?signout page (boot.js) does the teardown.
+      .replace('>manage account</a>', '>manage account</a>\n  <a id="bar-signout" href="/?signout" title="   Sign out of FediPod and clear this browser">sign out</a>')
+      .replace('</head>', '<style>#actor-pick{display:none!important}</style>\n</head>');
+    if (/[/\\]client$/.test(from)) {
+      // The client shell frames the client at /app/ (locally the client is the
+      // origin root, so the source says "../../").
+      text = text.replace('src="../../"', 'src="/app/"');
+    } else if (/[/\\]admin$/.test(from)) {
+      // Hide controls the browser build does not carry: the manual drain (it
+      // drains automatically over notifications), the local logfile viewer
+      // (there is no local log in a browser), and the "create a handle at the
+      // gateway" choice — a fronted @you@front identity is not the browser
+      // model, and admin-facade.mjs refuses one outright. Leaving the radio
+      // visible meant the page checked the name's availability as you typed,
+      // told you it was free, and then refused the attach. With it hidden the
+      // pod-based choice stays selected, so that check never runs either.
+      // And rename "Recover posts" to the plainer "Refresh Feed" for this
+      // audience.
+      text = text
+        .replace('<style>#actor-pick', '<style>#gw-shape-front,#do-drain,#do-log,#actor-pick')
+        .replace('>Recover posts<', '>Refresh Feed<')
+        // Reveal the password row on the rotate-key warning: here the key on
+        // the pod is wrapped under the account password (keystore.mjs), so a
+        // replacement has to be wrapped too and there is nowhere to get one
+        // from but the owner. The Node agent keeps its key on disk and leaves
+        // this row hidden.
+        .replace('<div id="rotate-pw-row" hidden>', '<div id="rotate-pw-row">')
+        .replace('Put back posts this machine lost, from what the pod still holds',
+          'Refresh your feed from what your pod still holds');
+    }
+    fs.writeFileSync(d, text);
+  } };
+copyAdmin(path.join(root, 'web/admin'), path.join(site, 'admin'));
+// Netlify routing. The project sends every path to the gateway function by
+// default, which would shadow these static files, so file-based rules (which
+// win over the project's UI redirect) serve the app directly and forward only
+// the gateway's own paths to the function. First match wins.
+fs.writeFileSync(path.join(site, '_redirects'), [
+  '# gateway + front API → the function',
+  '/api/handle             /.netlify/functions/front  200',
+  '/api/attach             /.netlify/functions/front  200',
+  '/api/relay              /.netlify/functions/front  200',
+  '/api/roster             /.netlify/functions/front  200',
+  '/api/revoke             /.netlify/functions/front  200',
+  '/api/agent              /.netlify/functions/front  200',
+  '/u/*                    /.netlify/functions/front  200',
+  '/.well-known/*          /.netlify/functions/front  200',
+  '/install                /.netlify/functions/front  200',
+  '/run                    /.netlify/functions/front  200',
+  '/roster                 /.netlify/functions/front  200',
+  '/solid-oidc-client.js   /.netlify/functions/front  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',
+
+  '/app         /app/          301',
+  '/app/*       /app/:splat    200',
+  '/admin       /admin/        301',
+  '/admin/*     /admin/:splat  200',
+  '', ].join('\n'));
+// Response headers. Same-origin IS the trust boundary for this build — the
+// worker answers the admin routes on this origin, and one page here renders
+// fediverse HTML from strangers — so `script-src 'self'` is what stands
+// between a remote post and the identity. Only `/app/*` and `/admin/*` are
+// given a CSP header here: the root page carries its own `<meta>` CSP, tuned
+// to its issuer, and a header would intersect with it and break the login.
+//
+// Netlify reads ONE `_headers`, at the publish root. (Phanpy ships its own
+// under `app/`, which is why that copy has never done anything.)
+//
+// `Referrer-Policy: same-origin` and not `no-referrer`: the worker's own gate
+// reads `request.referrer` to tell the bundled client's sign-in navigation
+// from a cross-site one (sw-src.mjs), and stripping it everywhere would refuse
+// the legitimate one. Same-origin sends it to us and to nobody else.
+//
+// `style-src` keeps `'unsafe-inline'`: the admin pages get a `<style>` block
+// injected above, and `innerHTML` with a `style=` attribute is common in both.
+// Inline STYLE cannot exfiltrate the way inline SCRIPT can, and tightening it
+// would cost the boundary nothing. `/app/*` needs `https:` for images and
+// media because the whole point of the client is rendering other servers'
+// avatars and attachments.
+fs.writeFileSync(path.join(site, '_headers'), [
+  '/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',
+  '  Referrer-Policy: same-origin',
+  '',
+  '/admin/*',
+  "  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',
+  '', ].join('\n'));
+let n = 0; (function count(d) { for (const e of fs.readdirSync(d, { withFileTypes: true })) e.isDirectory() ? count(path.join(d, e.name)) : n++; })(site);
+console.log(`staged web/app/site — ${n} files`);

package/web/admin/admin.js

@@ -13,8 +13,15 @@ const $ = (id) => document.getElementById(id);
 // machine, `/app` when the identity is hosted by its own pod server. Read from
 // the page's own address, so one build serves both.
 const BASE = location.pathname.replace(/\/admin\/.*$/u, '');
+// Every call carries `x-fedipod-page`. On the Node agent it is ignored — the
+// Origin check there already refuses a page on somebody else's site. In the
+// browser build the agent IS this origin's service worker, which cannot see
+// Sec-Fetch-* and answers these routes with no password, so this header is the
+// whole door: a cross-site form cannot set one, and a cross-origin fetch that
+// sets one is stopped at a preflight the worker never grants. See sw-src.mjs.
+const PAGE_HEADER = { 'x-fedipod-page': '1' };
 const api = async (path, init) => {
-  const res = await fetch(BASE + path, init);
+  const res = await fetch(BASE + path, { ...init, headers: { ...(init?.headers || {}), ...PAGE_HEADER } });
   return { status: res.status, json: await res.json().catch(() => null) };
 };
 const postJson = (path, body) => api(path, {
@@ -27,14 +34,12 @@ let config = null;
 const MODERATION = $('moderation');
 const STATUS = $('status-ctl');
 const STATUS_PICK = $('status-pick');   // held: getElementById can't see it mid-render
-const BSKY_CTL = $('bsky-ctl');
 const IDENT_CTL = $('ident-ctl');
 const FOLLOWS_CTL = $('follows-ctl');
 const FOLLOWS_PICK = $('follows-pick');
 const UPDATE_CTL = $('update-ctl');
 const UPDATE_WORD = $('update-word');
 const UPDATE_GO = $('update-go');
-const BSKY_CROSSPOST = $('bsky-crosspost');   // held: it rides BSKY_CTL into a generated row
 
 // #say and #fatal live in the accessibility tree from load and hide by being
 // empty (see the stylesheet). Unhiding a live region and filling it in the same
@@ -95,10 +100,7 @@ function resetConfirm() {
   $('confirm-handle').value = '';
   $('confirm-handle-move').value = '';
   $('move-target').value = '';
-  $('state-path').value = '';
-  $('state-url').value = '';
-  document.querySelector('input[name=stateWhere][value=path]').checked = true;
-  stateRows();
+  $('rotate-password').value = '';
 }
 function closePanels(keep = null) {
   if (!keep) solWindow.close();
@@ -126,34 +128,129 @@ function identityRows() {
     dd.append(...nodes);
     out.push([dt, dd]);
   };
-  if (config.atproto?.connected) {
-    const a = document.createElement('a');
-    a.href = `https://bsky.app/profile/${config.atproto.handle}`;
-    a.textContent = `@${config.atproto.handle}`;
-    a.target = '_blank';
-    a.rel = 'noopener';
-    a.title = `   Open this account's Bluesky page in a new tab`;
-    BSKY_CTL.hidden = false;
-    BSKY_CROSSPOST.value = config.atproto.crossPost ? 'on' : 'off';
-    row('Bluesky', a, ' ', BSKY_CTL);
-  } else {
-    BSKY_CTL.hidden = true;
+  // One descriptor shape for every connected account — Bluesky and each
+  // fediverse account — so the row and its Options menu build the same way.
+  const accounts = [];
+  if (config.atproto?.connected) accounts.push({
+    label: 'Bluesky', handle: `@${config.atproto.handle}`,
+    href: `https://bsky.app/profile/${config.atproto.handle}`,
+    storage: config.atproto.storage || null,
+    feedPaused: 'feedPaused' in config.atproto ? config.atproto.feedPaused : null,
+    crossPost: 'crossPost' in config.atproto ? config.atproto.crossPost : null,
+    feed: (paused) => ['/atproto', { feedPaused: paused }],
+    cross: (on) => ['/atproto', { crossPost: on }],
+    store: (w) => ['/atproto', { storage: w }],
+    off: () => ['/atproto/disconnect', {}],
+  });
+  for (const acct of config.fediAccounts || []) accounts.push({
+    label: acct.host,
+    handle: acct.needsReconnect ? `${acct.handle} — sign in again` : acct.handle,
+    warn: acct.needsReconnect,
+    storage: acct.storage || null,
+    feedPaused: !acct.enabled,
+    crossPost: null,
+    feed: (paused) => ['/fediacct', { id: acct.id, enabled: !paused }],
+    store: (w) => ['/fediacct', { id: acct.id, storage: w }],
+    off: () => ['/fediacct/disconnect', { id: acct.id }],
+  });
+  for (const acct of accounts) {
+    const name = document.createElement(acct.href ? 'a' : 'span');
+    name.textContent = acct.handle;
+    if (acct.href) { name.href = acct.href; name.target = '_blank'; name.rel = 'noopener'; name.title = '   Open this account elsewhere in a new tab'; }
+    if (acct.warn) name.className = 'warn';
+    // Where storage is a real choice (every browser-build account today), two
+    // dropdowns sit in the row itself. Where it isn't (the Node agent's
+    // Bluesky, which shows a cross-post toggle instead), the Options
+    // disclosure it always has is unchanged.
+    row(acct.label, name, ' ', ...(acct.storage ? connectionControls(acct) : [optionsMenu(acct)]));
+  }
+  return out;
+}
+
+// Connected, Paused or Disconnected, and where the key lives — one dropdown
+// each, in the row. Replaces the separate feed and connect dropdowns that used
+// to sit behind an Options disclosure; only reached where acct.storage is set.
+function connectionControls(acct) {
+  const send = async ([path, payload], msg) => { if (await write(path, payload, msg)) await load(); };
+  const pick = (opts, current, onChange, title) => {
+    const el = document.createElement('select');
+    if (title) el.title = title;
+    for (const [v, t] of opts) { const o = document.createElement('option'); o.value = v; o.textContent = t; o.selected = v === current; el.appendChild(o); }
+    el.addEventListener('change', () => onChange(el.value));
+    return el;
+  };
+  const conn = pick(
+    [['connected', 'Connected'], ['paused', 'Paused'], ['disconnected', 'Disconnected']],
+    acct.feedPaused ? 'paused' : 'connected',
+    (v) => (v === 'disconnected'
+      ? send(acct.off(), 'disconnected')
+      : send(acct.feed(v === 'paused'), v === 'paused' ? 'paused adding to your feed' : 'added to your home feed')),
+    '   Connected feeds this account into your home feed here; Paused keeps the account but stops adding its posts; Disconnected removes it.');
+  const storage = pick(
+    [['pod', 'Store key on Pod'], ['browser', 'Store key in Browser']],
+    acct.storage,
+    (v) => {
+      if (v === 'pod' && !confirm('Store this account on your pod?\n\nIt will follow you to any browser you sign in from — but a full-access token to that account then lives on your pod.')) { load(); return; }
+      send(acct.store(v), v === 'pod' ? 'stored on your pod' : 'stored in this browser');
+    },
+    '   On your pod the key follows you to any browser you sign in from, and a full-access token then lives there; in this browser the token never leaves this device.');
+  const wrap = document.createElement('span');
+  wrap.className = 'conn-controls';
+  wrap.append(conn, ' ', storage);
+  return [wrap];
+}
+
+// Every connected account without a storage choice carries an Options menu
+// instead: pause its feed, its cross-post toggle (the Node agent's Bluesky),
+// disconnect.
+function optionsMenu(acct) {
+  const d = document.createElement('details');
+  d.className = 'opts';
+  const sum = document.createElement('summary');
+  sum.textContent = 'Options';
+  d.appendChild(sum);
+  const body = document.createElement('div');
+  d.appendChild(body);
+
+  // Each control is one dropdown whose options ARE the states, so it needs no
+  // separate label — the chosen option reads as the current state.
+  const pick = (opts, current, onChange) => {
+    const el = document.createElement('select');
+    for (const [v, t] of opts) { const o = document.createElement('option'); o.value = v; o.textContent = t; o.selected = v === current; el.appendChild(o); }
+    el.addEventListener('change', () => onChange(el.value));
+    body.appendChild(el);
+  };
+  const send = async ([path, payload], msg) => { if (await write(path, payload, msg)) await load(); };
+
+  // Feed: shown in / hidden from the feed you read here.
+  if (acct.feedPaused !== null) {
+    pick([['show', 'Add to home feed'], ['hide', 'Pause adding to home feed']], acct.feedPaused ? 'hide' : 'show',
+      (v) => send(acct.feed(v === 'hide'), v === 'hide' ? 'paused adding to your feed' : 'added to your home feed'));
   }
-  for (const acct of config.fediAccounts || []) {
-    const name = document.createElement('span');
-    name.textContent = acct.needsReconnect ? `${acct.handle} — sign in again` : acct.handle;
-    if (acct.needsReconnect) name.className = 'warn';
-    const off = document.createElement('button');
-    off.type = 'button';
-    off.className = 'inline danger';
-    off.textContent = 'Disconnect';
-    off.title = `   Stop reading ${acct.handle} and remove its stored token`;
-    off.addEventListener('click', async () => {
-      if (await write('/fediacct/disconnect', { id: acct.id }, `${acct.handle} disconnected`)) await load();
+  // Storage where the browser offers the choice; the Node agent's Bluesky shows
+  // its cross-post toggle in the same slot instead.
+  if (acct.storage) {
+    pick([['browser', 'Store key in Browser'], ['pod', 'Store key on Pod']], acct.storage, (v) => {
+      if (v === 'pod' && !confirm('Store this account on your pod?\n\nIt will follow you to any browser you sign in from — but a full-access token to that account then lives on your pod.')) { load(); return; }
+      send(acct.store(v), v === 'pod' ? 'stored on your pod' : 'stored in this browser');
     });
-    row(acct.host, name, ' ', off);
+  } else if (acct.crossPost !== null) {
+    pick([['on', 'Cross-post On'], ['off', 'Cross-post Off']], acct.crossPost ? 'on' : 'off',
+      (v) => send(acct.cross(v === 'on'), ''));
   }
-  return out;
+  // Connection: staying connected, or disconnecting.
+  pick([['connected', 'Connected'], ['disconnect', 'Disconnect']], 'connected',
+    (v) => { if (v === 'disconnect') send(acct.off(), 'disconnected'); else load(); });
+
+  // The storage consequence, at the bottom of the box under every dropdown.
+  if (acct.storage) {
+    const hint = document.createElement('p'); hint.className = 'opt-hint';
+    hint.textContent = acct.storage === 'pod'
+      ? 'Follows you to every browser you sign in from; a full-access token lives on your pod.'
+      : 'Stays in this browser; the token never leaves this device.';
+    body.appendChild(hint);
+  }
+  return d;
 }
 
 function render() {
@@ -180,9 +277,10 @@ function render() {
     ['Other identities', 'ctl'],
     ['local store', config.home],
     // The address you actually open, not the bare number — the named origin when
-    // there is one, since that is what the client and the OAuth redirect use.
-    ['local host', (origins.named || origins.loopback || `http://localhost:${config.port}`)
-      .replace(/\/$/, '')],
+    // there is one, since that is what the client and the OAuth redirect use. An
+    // agent with no local host of its own (embedded in a pod server, or in a
+    // browser) sends none, and then there is no row rather than a bare number.
+    ['local host', (origins.named || origins.loopback || '').replace(/\/$/, '') || null],
   ];
   if (config.version || config.update || config.pendingUpgrade?.length) rows.push(['software', 'ctl']);
   rows.push(['gateway', 'ctl']);
@@ -502,13 +600,8 @@ $('fediacct-form').addEventListener('submit', async (ev) => {
   } finally { fediBusy = false; }
 });
 
-$('bsky-disconnect').addEventListener('click', async () => {
-  if (bskyBusy) return;
-  bskyBusy = true;
-  try {
-    if (await write('/atproto/disconnect', {}, 'bluesky account disconnected')) await load();
-  } finally { bskyBusy = false; }
-});
+// Disconnecting Bluesky, pausing its feed and choosing its storage all live in
+// the account's Options menu now (see optionsMenu). Connecting is still here.
 // Adding resolves the old account on the agent side, so what lands in
 // alsoKnownAs is its canonical id, not the string typed here.
 // The accounts elsewhere this one may receive a Move from — the chips in the
@@ -553,15 +646,6 @@ $('alias-add').addEventListener('click', async () => {
   } finally { aliasBusy = false; }
 });
 
-// Silent on success — the select already shows the new state.
-const setCrossPost = async (on) => {
-  if (bskyBusy || on === !!config.atproto?.crossPost) return;
-  bskyBusy = true;
-  try {
-    if (await write('/atproto', { crossPost: on }, '')) config.atproto.crossPost = on;
-    BSKY_CROSSPOST.value = config.atproto?.crossPost ? 'on' : 'off';
-  } finally { bskyBusy = false; }
-};
 
 // ---- group ----
 
@@ -655,8 +739,6 @@ function onPick(el, apply, repaint = renderGroupToggles) {
 onPick($('joins-mod'), (v) => setJoins(v === MOD.on));
 onPick($('review-mod'), (v) => setReview(v === MOD.on));
 onPick(STATUS_PICK, (v) => setStatus(v === 'parked'), renderStatus);
-onPick(BSKY_CROSSPOST, (v) => setCrossPost(v === 'on'),
-  () => { BSKY_CROSSPOST.value = config?.atproto?.crossPost ? 'on' : 'off'; });
 
 // A person's follower gate. Automatic is what a migration wave needs: every
 // follower's server re-follows at once, and the waiting queue caps at 500.
@@ -897,21 +979,7 @@ const LIFECYCLE = {
   retire: { path: '/retire', title: 'Retire this identity', go: 'Retire it', danger: true, done: (r) => `retired ${r.deletedAt}: Delete delivered to ${r.inboxes} inbox(es)` },
   move: { path: '/move', title: 'Transfer this account away', go: 'Transfer it', focus: 'move-target',
     done: (r) => `transferred to ${r.target}: Move delivered to ${r.inboxes} inbox(es), unfollowed ${r.unfollowed}/${r.following}` },
-  'move-state': { path: '/state-move', title: 'Move private data', go: 'Move it', focus: 'state-path',
-    done: (r) => (r.unchanged ? 'already there — nothing moved'
-      : `moved ${r.docs} document(s) and ${r.notes} post(s) — private data is now ${r.now}`) },
 };
-
-// The destination choice reveals the field it needs: a directory for this
-// device, an address for another one, nothing for the pod.
-function stateRows() {
-  const w = picked('stateWhere');
-  $('state-row-path').hidden = w !== 'path';
-  $('state-row-url').hidden = w !== 'url';
-}
-for (const el of document.querySelectorAll('input[name=stateWhere]')) {
-  el.addEventListener('change', stateRows);
-}
 let pending = null;
 
 const closeConfirm = () => closePanels();
@@ -954,16 +1022,15 @@ $('confirm-form').addEventListener('submit', async (ev) => {
   const what = pending;
   const body = what === 'retire' ? { confirm: $('confirm-handle').value.trim() }
     : what === 'move' ? { target: $('move-target').value.trim(), confirm: $('confirm-handle-move').value.trim() }
-      : what === 'move-state' ? {
-        to: picked('stateWhere') === 'pod' ? 'pod'
-          : picked('stateWhere') === 'url' ? $('state-url').value.trim() : $('state-path').value.trim(),
-      }
+      // Only where the field is shown (the browser build — see index.html).
+      // On the Node agent the row stays hidden and nothing is sent, which is
+      // what that agent expects.
+      : what === 'rotate-key' && !$('rotate-pw-row').hidden
+        ? { password: $('rotate-password').value }
         : {};
   if (what === 'move' && !body.target) { say('name the account to transfer to', 'err'); return; }
-  if (what === 'move-state' && !body.to) { say('name the destination', 'err'); return; }
   $('confirm-go').disabled = true;
-  say(what === 'move-state' ? 'moving your private data — copying, checking, then switching over'
-    : `${what} — this talks to the pod and to other servers, so it takes a moment`);
+  say(`${what} — this talks to the pod and to other servers, so it takes a moment`);
   const r = await write(LIFECYCLE[what].path, body, what);
   $('confirm-go').disabled = false;
   if (!r) return;                        // write() already said why

package/web/admin/bar.css

@@ -4,18 +4,9 @@
    page's left edge and the buttons over its right rather than out at the window
    borders. `width: 100%` with `box-sizing: border-box` keeps the padding inside
    that 960 instead of adding to it, which is what makes the two margins equal. */
-/* Phanpy's own colours, read off the running client. --surface is the one you
-   see behind Phanpy — its --bg-faded-color — and that is the PAGE. --raised is
-   Phanpy's --bg-color, and that is the bar sitting on top of it. Declared here
-   because bar.css is on all three pages, so they cannot drift. */
-:root { --surface: #f0f2f5; --raised: #fff;
-  --ink: #1b1c1e; --field-bg: #ffffff; --field-bg-hover: #f7f4ee; --field-edge: #767676;
-  --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23444444' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
-@media (prefers-color-scheme: dark) {
-  :root { --surface: #18191a; --raised: #242526;
-    --ink: #e8eaed; --field-bg: #383d44; --field-bg-hover: #40464e; --field-edge: #9aa0a6;
-    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23dddddd' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
-}
+/* Colours come from tokens.css (the front's palette), linked by every page
+   before this file, so the bar matches the front and the record rather than
+   Phanpy: --surface is the page ground, --raised the bar band on top of it. */
 body { background: var(--surface); }
 /* The BAND spans the window; its CONTENTS stay in the 960 column. Constraining
    the element itself left the colour as a stripe with bare page either side.
@@ -51,8 +42,13 @@ body { background: var(--surface); }
 #bar select:hover { background-color: var(--field-bg-hover); }
 /* The app title, in px rather than rem: it is chrome, the same on every page,
    not something that should move when a page changes its base size. */
-#bar .name { flex: 1 1 auto; font-weight: 600; font-size: 24px; color: var(--heading);
+#bar .name { flex: 1 1 auto; font-weight: 600; font-size: 40px; color: var(--heading);
   margin: 0; line-height: 1.1; }
+/* The browser build wraps the brand text in a link (to /?add) — the general
+   #bar a rule below would otherwise pin it back down to nav-link size and
+   colour, since a rule on the anchor itself always wins over inheriting the
+   heading's size. */
+#bar .name a { font: inherit; color: inherit; text-decoration: none; }
 /* Plain text, not chrome: three destinations in a row read better without a
    box round each. */
 #bar button, #bar a { font: inherit; font-size: .95rem; padding: .15rem .2rem;

package/web/admin/bar.js

@@ -17,7 +17,7 @@
   // open windows apart without putting the handle in the page twice.
   // /status, not /config: an agent that is not set up yet answers this one and
   // 409s the other, which logged a failed request on every setup page.
-  fetch(location.pathname.replace(/\/admin\/.*$/u, '') + '/status').then(r => (r.ok ? r.json() : null)).then((s) => {
+  fetch(location.pathname.replace(/\/admin\/.*$/u, '') + '/status', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).then((s) => {
     if (s?.handle) document.title = `FediPod — ${s.handle}`;
     // The full fediverse handle, centred in the bar on every page.
     const el = document.getElementById('bar-handle');
@@ -32,7 +32,7 @@
   const pick = document.getElementById('actor-pick');
   if (pick && !document.getElementById('new-actor-form')) {
     const base = location.pathname.replace(/\/admin\/.*$/u, '');
-    fetch(base + '/profiles').then(r => (r.ok ? r.json() : null)).then((j) => {
+    fetch(base + '/profiles', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).then((j) => {
       const actors = j?.identities || [];
       pick.textContent = '';
       const label = (r) => (r.address || r.handle || r.name)

package/web/admin/client/client.js

@@ -27,7 +27,7 @@
   // "which account logged in here" is a different question, and it is the one
   // that goes wrong when the two origins get mixed.
   const base = location.pathname.replace(/\/admin\/.*$/u, '');
-  const status = await fetch(base + '/status').then(r => (r.ok ? r.json() : null)).catch(() => null);
+  const status = await fetch(base + '/status', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).catch(() => null);
   if (!status?.actor) return;                 // not set up yet; setup owns that
 
   // A deep link into the client — the record links an actor's own page this way

package/web/admin/client/index.html

@@ -4,18 +4,17 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — client</title>
+<link rel="stylesheet" href="../tokens.css">
 <style>
-:root { color-scheme: light dark; font-size: 112.5%; --link: #1a4f8a; --heading: #5b3a8e; }
-/* The bar is fixed height, the client takes the rest — the page never scrolls,
-   the frame does. */
+/* 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 system-ui, 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; }
-@media (prefers-color-scheme: dark) {
-  :root { --link: #7fb3e8; --heading: #b9a3e3; }
-}
 </style>
 <link rel="stylesheet" href="../bar.css">
 </head>