fedipod-server 0.10.0 → 0.12.1

package/web/admin/index.html

@@ -4,30 +4,14 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — record</title>
+<link rel="stylesheet" href="tokens.css">
 <style>
-/* 20px on the root, not on body, so every rem below scales with it.
-   Two accents, kept apart on purpose: --link is anything you can act on,
-   --heading is structure. Using one colour for both made the headings
-   look clickable. */
-/* One control chassis, one selector per element kind so nothing can fall
-   through unstyled: every control sits in the same light well; a select
-   carries a drawn chevron, a button carries the action-blue text. */
-:root { color-scheme: light dark; font-size: 112.5%;
-  --bar-col: 1280px;                 /* the bar centres on the same column */
-  --link: #1a4f8a; --heading: #5b3a8e;
-  --ink: #1b1c1e; --muted: #4a4e53;
-  --btn-bg: #f4efe6; --btn-bg-hover: #ece3d2; --btn-bg-active: #e2d5bd; --btn-edge: #8a7a61;
-  --field-bg: #ffffff; --field-bg-hover: #f7f4ee; --field-edge: #767676;
-  --danger: #b00020; --ring: var(--link);
-  --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 { --link: #7fb3e8; --heading: #b9a3e3;
-    --ink: #e8eaed; --muted: #b9bdc2;
-    --btn-bg: #35302a; --btn-bg-hover: #423b31; --btn-bg-active: #4d4436; --btn-edge: #9a8d7a;
-    --field-bg: #383d44; --field-bg-hover: #40464e; --field-edge: #9aa0a6;
-    --danger: #ff8a8a;
-    --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 are the shared tokens (tokens.css, the front's palette), so the
+   record, the front and the bar are one visual system; only the layout root —
+   the base scale and the bar's column — stays here. Controls share one look: a
+   field is a light well with a drawn chevron, a button is the front's filled
+   green. */
+:root { color-scheme: light dark; font-size: 125%; --bar-col: 1280px; }
 /* The page itself never scrolls: the body is exactly the window; the content
    column beside the rail is the scroll container. */
 html { height: 100%; }
@@ -95,7 +79,7 @@ h3 { margin: 1.25rem 0 .35rem; }
 #moderation label { display: inline; margin: 0 .3rem 0 .5rem; font-weight: normal; color: var(--muted); }
 p { margin: .5rem 0; }
 .sub { color: var(--muted); margin-top: 0; }
-fieldset { border: 1px solid #bbb; border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
+fieldset { border: 1px solid var(--line); border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
 legend { padding: 0 .3rem; font-weight: 600; color: var(--heading); }
 label { display: block; margin: .75rem 0 .2rem; }
 .hint { color: var(--muted); font-size: 1rem; margin: .15rem 0 0; }
@@ -114,12 +98,12 @@ select { font: inherit; appearance: none; max-width: 100%; min-width: 0;
   background-repeat: no-repeat; background-position: right .55rem center;
   background-size: .6rem auto; }
 select:hover { background-color: var(--field-bg-hover); }
-/* ACTIONS: identical to the settings — same well, same border, same ink,
-   Retire included. One control look for the whole page. */
-button { font: inherit; padding: .45rem 1rem; border-radius: .3rem; border: 1px solid var(--field-edge);
-  background: var(--field-bg); color: var(--ink); cursor: pointer; }
-button:hover { background: var(--field-bg-hover); }
-button:active { background: var(--field-bg-hover); }
+/* ACTIONS: the front's filled-green button, one look for the whole page,
+   Retire included — the typed-handle confirm, not a colour, is what guards the
+   destructive ones. */
+button { font: inherit; padding: .45rem 1rem; border-radius: .3rem; border: 1px solid var(--btn);
+  background: var(--btn); color: var(--btn-text); cursor: pointer; }
+button:hover, button:active { background: var(--btn-hover); border-color: var(--btn-hover); }
 button.primary { font-weight: 600; }
 button:disabled { opacity: .55; cursor: default; }
 /* Small buttons that sit in a line of text. */
@@ -139,12 +123,29 @@ dt.under { padding-left: 1.25rem; }
 dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
 .rows { list-style: none; padding: 0; margin: .3rem 0; }
 .rows li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
-  padding: .4rem 0; border-top: 1px solid #ddd; }
+  padding: .4rem 0; border-top: 1px solid var(--line); }
 .rows li span { flex: 1 1 18rem; overflow-wrap: anywhere; }
 .muted { color: var(--muted); }
 /* The actors dropdown rides the bar, at the bar's own text scale. */
 #bar select { font-size: .95rem; }
-#bsky-ctl { display: inline-flex; gap: .6rem; align-items: baseline; margin-left: .6rem; }
+/* The per-account Options disclosure: only where storage is not a real choice
+   (the Node agent's Bluesky, cross-post instead) — a summary opening
+   Show/Hide in Feed, Cross-post On/Off, Connected/Disconnect. Where storage
+   IS a choice, two dropdowns sit in the row directly instead (admin.js
+   connectionControls). */
+details.opts { display: inline-block; }
+details.opts > summary { cursor: pointer; color: var(--link); list-style: none; }
+details.opts > summary::-webkit-details-marker { display: none; }
+details.opts > summary::after { content: ' \25be'; }
+details.opts[open] > summary::after { content: ' \25b4'; }
+details.opts > div { margin: .4rem 0 .2rem; padding: .5rem .6rem; display: flex; flex-direction: column;
+  gap: .4rem; align-items: stretch; border: 1px solid var(--line); border-radius: .3rem;
+  background: var(--raised); min-width: 11rem; }
+details.opts > div select { width: 100%; }
+.opt-hint { color: var(--muted); font-size: .9rem; margin: -.1rem 0 .1rem; }
+/* The connection and storage dropdowns that sit in the row itself (admin.js
+   connectionControls) — extra room from the account name before them. */
+.conn-controls { display: inline-flex; align-items: center; gap: .4rem; margin-left: 1rem; }
 /* The alias row inside the Transfer-an-account-here panel. */
 #alias-ctl { display: flex; gap: .5rem; align-items: center; margin-top: .3rem; }
 #alias-ctl input { flex: 1 1 12rem; width: auto; }
@@ -155,15 +156,15 @@ dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
    below the control. */
 .choice { display: block; margin: .35rem 0; font-weight: normal; }
 .choice input { width: auto; margin-right: .4rem; }
-.warn { border-left: .25rem solid #c60; padding-left: .75rem; }
+.warn { border-left: .25rem solid var(--warn); padding-left: .75rem; }
 .err { border-left: .25rem solid var(--danger); padding-left: .75rem; color: var(--danger); }
-.ok { border-left: .25rem solid #2a7; padding-left: .75rem; }
+.ok { border-left: .25rem solid var(--ok); padding-left: .75rem; }
 pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem; font-size: .9rem; }
 @media (prefers-color-scheme: dark) {
   fieldset { border-color: #555; } .rows li { border-color: #444; }
 }
 </style>
-<link rel="stylesheet" href="bar.css">
+<link rel="stylesheet" href="bar.css?v=3">
 <link rel="stylesheet" href="window.css">
 </head>
 <body>
@@ -309,13 +310,6 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
   <span id="ident-ctl" hidden>
     <button type="button" id="ident-open" class="inline" title="   Connect an account you hold on another network, so its timeline joins the one you read here">Connect an identity</button>
   </span>
-  <span id="bsky-ctl" hidden>
-    <select id="bsky-crosspost" aria-label="Bluesky crossposting" title="   Whether your public posts also go to the Bluesky account">
-      <option value="on">crosspost on</option>
-      <option value="off">crosspost off</option>
-    </select>
-    <button type="button" id="bsky-disconnect" class="inline danger" title="   Forget the Bluesky session and remove the stored credential">Disconnect</button>
-  </span>
 </section>
 
 <span id="gateway-ctl" hidden>
@@ -470,7 +464,7 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
       Keep my pod-based handle: <strong id="gw-pod-preview"></strong><br>
       <span class="hint">Your address stays tied to your own pod — you can drop the
         gateway any time and keep everything.</span></label>
-    <label class="choice"><input type="radio" name="gwShape" value="front">
+    <label class="choice" id="gw-shape-front"><input type="radio" name="gwShape" value="front">
       Create a handle at the gateway:
       @<input type="text" id="gw-name" placeholder="name" autocomplete="off"
         autocapitalize="off" spellcheck="false">@<span id="gw-front-host">fedipod.net</span><br>
@@ -498,6 +492,15 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
   <div id="warn-rotate-key" class="warn" hidden>
     <p>A new keypair replaces the one in this home and the actor is republished so other
       servers learn it. Any other device still holding the old key stops being able to sign.</p>
+    <!-- Browser build only: there the key on the pod is locked under the account
+         password, so a new one has to be locked too. The Node agent keeps its key
+         on disk and needs nothing here — stage-site.mjs reveals this row. -->
+    <div id="rotate-pw-row" hidden>
+      <label for="rotate-password">Your account password</label>
+      <input type="password" id="rotate-password" autocomplete="current-password">
+      <p class="hint">Your signing key is kept on your pod locked under this, so the
+        replacement has to be locked under it too. It is not sent anywhere else.</p>
+    </div>
   </div>
   <div id="warn-retire" class="warn" hidden>
     <p><strong>This cannot be undone.</strong> A Delete goes to every follower's inbox telling
@@ -513,28 +516,13 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
     <label for="confirm-handle">Type the handle to confirm</label>
     <input type="text" id="confirm-handle" autocomplete="off">
   </div>
-  <div id="warn-move-state" class="warn" hidden>
-    <p>Your timeline, contacts, blocklist and notifications move to the place you choose.
-      Everything is copied and checked before the agent switches over, and the old copy is
-      left where it was for you to delete. The agent keeps running.</p>
-    <fieldset>
-      <legend>Where to</legend>
-      <label class="choice"><input type="radio" name="stateWhere" value="path" checked>
-        another place on this device</label>
-      <label class="choice"><input type="radio" name="stateWhere" value="url">
-        another device</label>
-      <label class="choice"><input type="radio" name="stateWhere" value="pod">
-        onto the pod</label>
-      <div id="state-row-path">
-        <label for="state-path">Directory</label>
-        <input type="text" id="state-path" autocomplete="off" placeholder="~/somewhere/private/">
-      </div>
-      <div id="state-row-url" hidden>
-        <label for="state-url">Address the other device serves</label>
-        <input type="url" id="state-url" autocomplete="off" placeholder="https://other-device.example/private/">
-      </div>
-    </fieldset>
-  </div>
+  <!-- "Move private data" (POST /state-move) had a panel here and no way to
+       open it: nothing in this page has ever carried data-confirm="move-state",
+       so the panel was only ever hidden. Removed 2026-09-09 rather than left as
+       markup that looks like a feature. The route is still there for the CLI,
+       which is where moving the private half between a directory and the pod
+       belongs — it is about filesystem paths and credential.json, neither of
+       which a browser has. -->
   <div id="warn-move" class="warn" hidden>
     <p>A <code>Move</code> goes to every follower's inbox and their servers migrate them to the
       account you name, so they end up following that one instead. The actor left behind
@@ -561,6 +549,12 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
 
 <script src="bar.js"></script>
 <script src="window.js"></script>
-<script src="admin.js"></script>
+<script src="common.js"></script>
+<script src="record.js"></script>
+<script src="actors.js"></script>
+<script src="connections.js"></script>
+<script src="group.js"></script>
+<script src="upkeep.js"></script>
+<script src="gateway.js"></script>
 </body>
 </html>

package/web/admin/record.js

@@ -0,0 +1,378 @@
+// record.js — the record itself: what the page holds of the config, the
+// messages it says, every write, the load, the panels, and the rows of the
+// facts list with the identity rows and their controls.
+// admin.js — the record, as a page. Everything here is an existing admin
+// route; the CLI's own group commands are thin clients over the same ones.
+//
+// Two rules the routes enforce and this page respects: a write is a MERGE, so a
+// form that never mentions a field cannot delete it; and anything on the wire is
+// not real until the actor is republished, which POST /config does for itself.
+//
+// The UI password is deliberately not here — `fedipod passwd` sets it. It
+// only gates /oauth/authorize, so it does nothing for a loopback-only agent.
+
+let config = null;
+// Held, because render() moves it into a generated row and empties that row's
+// list on the next pass — after which getElementById would not find it again.
+const MODERATION = $('moderation');
+const STATUS = $('status-ctl');
+const STATUS_PICK = $('status-pick');   // held: getElementById can't see it mid-render
+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');
+
+// #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
+// task is the classic way to get no announcement at all.
+function say(text, cls = 'ok') {
+  const el = $('say');
+  el.className = cls;
+  // Clear first, then set on the next task: a live region that is handed the
+  // same text it already holds announces nothing, so two identical messages in
+  // a row ("nothing changed", "nothing changed") would be silent the second time.
+  el.textContent = '';
+  setTimeout(() => { el.textContent = text; }, 30);
+}
+
+// Every write goes through here, so nothing silently half-succeeds.
+async function write(path, body, done) {
+  const { status, json } = await postJson(path, body);
+  if (status >= 400) { say(json?.error || `refused (HTTP ${status})`, 'err'); return null; }
+  say(done);
+  return json;
+}
+
+UPDATE_GO.onclick = async () => {
+  UPDATE_GO.disabled = true;
+  const r = await write('/update', {}, 'updating — the agents restart when it finishes; reload in a moment');
+  if (!r) UPDATE_GO.disabled = false;
+};
+
+async function load() {
+  const { status, json } = await api('/config');
+  if (status === 409) {
+    $('fatal').textContent = 'This agent has no identity yet.';
+    const a = document.createElement('a');
+    a.href = '/admin/setup/';
+    a.textContent = ' Set it up.';
+    $('fatal').appendChild(a);
+    return;
+  }
+  if (status !== 200 || !json) {
+    $('fatal').textContent = json?.error || `could not read the record (HTTP ${status})`;
+    return;
+  }
+  config = json;
+  render();
+  if (new URLSearchParams(location.search).has('new')) openNewActor();
+}
+
+// Every disclosure on the page — a form, the log, a lifecycle confirmation —
+// is a panel declared inside the floating window and shown by window.js. It
+// used to be an accordion at the foot of the page, which pushed whatever you
+// were reading out from under you and could only ever show one thing.
+//
+// The reset lives here rather than in window.js: the window knows how to show a
+// panel, not what any of them mean.
+function resetConfirm() {
+  pending = null;
+  for (const k of Object.keys(LIFECYCLE)) $(`warn-${k}`)?.hidden !== undefined && ($(`warn-${k}`).hidden = true);
+  $('confirm-handle').value = '';
+  $('confirm-handle-move').value = '';
+  $('move-target').value = '';
+  $('rotate-password').value = '';
+}
+function closePanels(keep = null) {
+  if (!keep) solWindow.close();
+  if (keep !== 'output') outputSource = null;
+  if (keep !== 'confirm-form') resetConfirm();
+}
+// Closing it by the ✕ or by Escape has to clear the same state a Cancel does.
+document.getElementById('win').addEventListener('win:closed', () => {
+  outputSource = null;
+  resetConfirm();
+  $('bsky-password').value = '';        // never leave a secret in a closed panel
+});
+
+
+// One row per identity connected elsewhere, indented under the row that adds
+// them. Each carries its own way out: disconnecting one has nothing to do with
+// the others.
+function identityRows() {
+  const out = [];
+  const row = (label, ...nodes) => {
+    const dt = document.createElement('dt');
+    dt.className = 'under';
+    dt.textContent = label;
+    const dd = document.createElement('dd');
+    dd.append(...nodes);
+    out.push([dt, dd]);
+  };
+  // 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'));
+  }
+  // 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');
+    });
+  } else if (acct.crossPost !== null) {
+    pick([['on', 'Cross-post On'], ['off', 'Cross-post Off']], acct.crossPost ? 'on' : 'off',
+      (v) => send(acct.cross(v === 'on'), ''));
+  }
+  // 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() {
+  // The bar names the actor, the same way on every page. Only the tab title is
+  // this page's own business.
+  document.title = `FediPod — ${config.handle}`;
+  const facts = $('facts');
+  facts.textContent = '';
+  // What this actor IS comes first. The handle is already in the address beside
+  // the heading; the pod, the issuer and the actor URL all read off the WebID;
+  // and where the private half sits is not something you act on from here.
+  const origins = config.origins || {};
+  // Two of these are addresses of things you can open, so they are links. The
+  // fediverse one goes to this actor's own page in the client, same origin, so
+  // it stays in the tab. The Solid one leaves for the pod, so it does not.
+  const rows = [
+    ['kind', config.kind ? config.kind[0].toUpperCase() + config.kind.slice(1) : config.kind],
+    // The value is the select itself — what it shows IS the state, and
+    // changing the word is the whole action, like the moderation controls.
+    ['status', 'ctl'],
+    ['Fediverse identity', config.address || `@${config.handle} — no resolvable address`,
+      config.accountId && config.address ? { href: `/admin/client/#/a/${config.accountId}` } : null],
+    ['Solid identity', config.webId, config.remotePod ? { href: config.remotePod, blank: true } : null],
+    ['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. 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']);
+  if (config.quiescedAt) rows.push(['parked since', config.quiescedAt]);
+  if (config.movedTo) rows.push(['moved to', config.movedTo]);
+  // A person gates followers here; a group's gate is the joins control on its
+  // kind row, so the row would be a second switch for the same thing.
+  if (config.kind !== 'group') rows.splice(2, 0, ['new followers', 'ctl']);
+  // Rows that belong under the one being written, appended after it.
+  let kids = null;
+  for (const [k, v, link] of rows) {
+    if (!v) continue;
+    const dt = document.createElement('dt');
+    dt.textContent = k;
+    const dd = document.createElement('dd');
+    if (link) {
+      const a = document.createElement('a');
+      a.href = link.href;
+      a.textContent = v;
+      if (link.blank) {
+        a.target = '_blank';
+        // noopener because the pod is another origin: without it the page we
+        // open gets a handle on this one through window.opener.
+        a.rel = 'noopener';
+        a.title = `   Open ${link.href} in a new tab`;
+      } else {
+        a.title = `   This actor's page in our client`;
+      }
+      dd.appendChild(a);
+    } else {
+      dd.textContent = v;
+    }
+    // What a group can be moderated into is a property of BEING a group, so the
+    // controls sit on the row that says so. Moved rather than built here: the
+    // page still declares them, and `facts` is emptied on every render.
+    if (k === 'kind' && config.kind === 'group') dd.append(MODERATION);
+    if (k === 'status') {
+      dd.textContent = '';
+      dd.append(STATUS);
+      STATUS.hidden = false;
+      renderStatus();
+    }
+    if (k === 'new followers') {
+      dd.textContent = '';
+      dd.append(FOLLOWS_CTL);
+      FOLLOWS_CTL.hidden = false;
+      FOLLOWS_PICK.value = config.autoAcceptFollows ? 'auto' : 'approve';
+    }
+    if (k === 'gateway') {
+      dd.textContent = '';
+      dd.append(GATEWAY_CTL);
+      refreshGateway();
+    }
+    if (k === 'software') {
+      dd.textContent = '';
+      dd.append(UPDATE_CTL);
+      UPDATE_CTL.hidden = false;
+      const u = config.update;
+      // The version this agent is running, never the one sitting in the
+      // checkout — saying otherwise would name a version nobody is serving.
+      const running = config.version || u?.current || null;
+      const words = [];
+      if (running) words.push(u?.available ? `FediPod ${running} — ${u.latest} available` : `FediPod ${running}`);
+      if (config.versionOnDisk && running && config.versionOnDisk !== running)
+        words.push(`${config.versionOnDisk} is on disk — restart to run it`);
+      if (config.pendingUpgrade?.length) words.push('older data layout — run `fedipod upgrade` in a terminal');
+      UPDATE_WORD.textContent = words.join('; ');
+      UPDATE_GO.hidden = !u?.available;
+    }
+    // The way to add one. Each account already connected is a row of its own
+    // underneath, so this row stays the action and never becomes a list.
+    if (k === 'Other identities') {
+      dd.textContent = '';
+      dd.append(IDENT_CTL);
+      IDENT_CTL.hidden = false;
+      kids = identityRows();
+    }
+    facts.append(dt, dd);
+    if (kids) {
+      for (const [ckt, ckd] of kids) facts.append(ckt, ckd);
+      kids = null;
+    }
+  }
+  if (!config.address) {
+    const p = document.createElement('p');
+    p.className = 'warn';
+    p.textContent = `${config.remotePod} is not the root of its own host, so this actor cannot be `
+      + 'discovered as a handle by other servers. Posting and reading still work.';
+    $('pane-identity').appendChild(p);
+  }
+
+  // pane-others carries the create control too, so it appears even when this is
+  // the only actor and even if /profiles cannot be read.
+  for (const id of ['pane-others', 'pane-identity', 'rail']) $(id).hidden = false;
+  renderAliases();
+  renderOthers();
+  renderInbox();
+  if (config.kind === 'group') {
+    // Its lists have no bound, so this page scrolls — see body.group in the CSS.
+    document.body.classList.add('group');
+    $('pane-group').hidden = false;
+    MODERATION.hidden = false;           // only a group has any
+    renderGroupToggles();
+    refreshGroup();
+  } else {
+    // A person has a follow-request queue too now: nothing binds an inbound
+    // Follow to the actor it names, so one that cannot be verified waits here
+    // rather than being accepted on the strength of who it claims to be.
+    refreshRequests();
+  }
+}
+

package/web/admin/setup/index.html

@@ -4,9 +4,10 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — setup</title>
+<link rel="stylesheet" href="../tokens.css">
 <style>
 /* 20px on the root, not on body, so every rem below scales with it. */
-:root { color-scheme: light dark; font-size: 112.5%; --heading: #1a4f8a; }
+:root { color-scheme: light dark; font-size: 125%; --heading: #1a4f8a; }
 body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; }
 /* The bar spans the window; the form stays in a centred column under it. */
 /* The same 960 column the bar and the record use, so the three pages line up. */
@@ -183,6 +184,7 @@ button:disabled { opacity: .5; cursor: default; }
 </main>
 
 <script src="../bar.js"></script>
+<script src="../common.js"></script>
 <script src="setup.js"></script>
 </body>
 </html>

package/web/admin/setup/setup.js

@@ -3,26 +3,15 @@
 // at localhost:<port> or at <handle>.localhost:<port>.
 //
 // External file, not an inline script: the CSP allows 'self' plus the hashes
-// of Phanpy's own inline bootstrap, and nothing else.
+// of Phanpy's own inline bootstrap, and nothing else. `$`, `BASE`, `api` and
+// `postJson` come from ../common.js, loaded first.
 
-const $ = (id) => document.getElementById(id);
 // Empty means gone, not a blank line where a sentence used to be.
 const strap = (t) => { const el = $('strap'); el.textContent = t || ''; el.hidden = !t; };
 // By id, not by position: these were `body > section` until a wrapper went
 // round them for layout, and the selector then matched nothing — every pane
 // kept whatever it started as and the page sat on "Reading this agent's state".
 const show = (id) => { for (const s of document.querySelectorAll('section[id^="pane-"]')) s.hidden = s.id !== id; };
-// The door this page is served behind: nothing when the agent runs on this
-// 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, '');
-const api = async (path, init) => {
-  const res = await fetch(BASE + path, init);
-  return { status: res.status, json: await res.json().catch(() => null) };
-};
-const postJson = (path, body) => api(path, {
-  method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body),
-});
 
 let state = null;