npm - fedipod-server - Versions diffs - 0.9.0 → 0.11.0 - Mend

fedipod-server 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (319) hide show

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

@@ -0,0 +1,556 @@
+<!doctype html>
+<html lang="en">
+<head>
+<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>
+/* 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%; }
+body { font: 1rem/1.5 system-ui, 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
+   beside the expanded rail. */
+#page { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1280px; margin: 0 auto;
+  padding: 1.25rem 1rem 1rem; box-sizing: border-box;
+  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; }
+#content { min-width: 0; min-height: 0; overflow-y: auto; }
+/* Two cases where the page may grow past the window: the new-account form, and
+   a group console, whose lists have no bound. Both scroll on the window. */
+body.adding, body.group { height: auto; min-height: 100dvh; overflow: auto; }
+body.adding #page { display: block; }
+body.adding #content, body.group #content { overflow: visible; min-height: auto; }
+body.group #page { min-height: auto; }
+body.adding #rail { display: none; }
+/* The action rail: a raised card of everything you can DO, so the facts keep
+   the page. Collapsed it is a slim strip holding only the toggle arrow. */
+#rail { width: 14.5rem; box-sizing: border-box; padding: .6rem .8rem .9rem;
+  align-self: start; max-height: 100%; overflow-y: auto;
+  background: var(--raised); border-radius: .5rem; }
+#rail.closed { width: auto; padding: .4rem; }
+#rail.closed .rail-groups { display: none; }
+#rail-toggle { display: flex; align-items: center; justify-content: flex-end;
+  width: 100%; margin: 0; padding: .2rem .3rem; border: 0;
+  background: none; font: inherit; font-weight: 600; color: var(--heading);
+  cursor: pointer; border-radius: .3rem; }
+#rail-toggle:hover, #rail-toggle:active { background: none; }
+.rail-arrow { color: var(--link); }
+.rail-group h2 { display: block; font-size: .9rem; font-weight: 600;
+  text-transform: uppercase; letter-spacing: .06em; margin: .9rem 0 .35rem; }
+.rail-group button { display: block; width: 100%; text-align: left;
+  margin: .35rem 0; font-size: .95rem; padding: .35rem .7rem; font-weight: 400; }
+.rail-group .apart { margin-top: 1rem; }
+/* One column on a phone: the rail becomes a strip of pills above the facts. */
+@media (max-width: 47rem) {
+  #page { display: flex; flex-direction: column; gap: .9rem; }
+  #rail { width: auto; max-height: none; overflow: visible; }
+  .rail-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
+  .rail-group h2 { flex: 0 0 100%; margin: .5rem 0 .1rem; }
+  .rail-group button { display: inline-block; width: auto; margin: .2rem 0; }
+  #content { flex: 1 1 auto; }
+}
+/* `hidden` is a UA rule, so ANY author `display` beats it — `dl { display: grid }`
+   left the facts on screen with the attribute set. Everything here toggles with
+   `hidden`, so it has to outrank them all. */
+[hidden] { display: none !important; }
+/* The two status regions are never `hidden`: a live region put into the
+   accessibility tree in the same task as its text does not reliably announce,
+   so they stay in it and disappear by being empty instead. */
+#say:empty, #fatal:empty { display: none; }
+h1, h2, h3 { color: var(--heading); }
+a { color: var(--link); }
+h2, h3 { font-size: 1.15rem; font-weight: 600; display: flex; flex-wrap: wrap;
+  align-items: baseline; gap: .6rem; }
+h2 { margin: 1.5rem 0 .5rem; }
+h3 { margin: 1.25rem 0 .35rem; }
+#facts { margin: .75rem 0 0; }
+/* They sit after the kind, on that row, so they need a gap from the word and
+   must not stretch the row's line height. */
+#moderation { margin-left: .6rem; word-break: normal; }
+#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 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; }
+.choice input[type=text] { width: 9ch; display: inline-block; padding: .15rem .3rem; }
+/* SETTINGS: light wells, unmistakably fields, in both schemes. */
+input[type=text], input[type=email], input[type=url], input[type=password], textarea {
+  font: inherit; width: 100%; padding: .5rem; box-sizing: border-box;
+  border: 1px solid var(--field-edge); border-radius: .3rem;
+  background: var(--field-bg); color: var(--ink); }
+input::placeholder { color: var(--muted); opacity: 1; }
+select { font: inherit; appearance: none; max-width: 100%; min-width: 0;
+  padding: .15rem 1.7rem .15rem .55rem;
+  border: 1px solid var(--field-edge); border-radius: .3rem;
+  color: var(--ink); cursor: pointer;
+  background-color: var(--field-bg); background-image: var(--chevron);
+  background-repeat: no-repeat; background-position: right .55rem center;
+  background-size: .6rem auto; }
+select:hover { background-color: 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. */
+button.inline { font-size: .9rem; padding: .15rem .6rem; font-weight: 400; }
+/* One visible ring for everything focusable. */
+:is(button, select, input, textarea, a):focus-visible {
+  outline: 2px solid var(--ring); outline-offset: 2px; }
+dl { margin: .5rem 0; }        /* grid only above 34rem — see the media query below */
+@media (min-width: 34rem) {
+  dl { display: grid; grid-template-columns: max-content minmax(0, 1fr);
+    gap: .6rem .9rem; align-items: baseline; }
+}
+dt { color: var(--muted); }
+/* An identity connected under "Other identities" belongs to the row above it,
+   and the indent is what says so. */
+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 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; }
+/* 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; }
+#alias-chips span { display: inline-flex; align-items: center; gap: .35rem;
+  border: 1px solid var(--btn-edge); border-radius: 999px;
+  padding: .05rem .25rem .05rem .75rem; margin: 0 .3rem .3rem 0; }
+/* Radios read as one line each: label { display: block } alone drops the text
+   below the control. */
+.choice { display: block; margin: .35rem 0; font-weight: normal; }
+.choice input { width: auto; margin-right: .4rem; }
+.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 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?v=3">
+<link rel="stylesheet" href="window.css">
+<style>#gw-shape-front,#do-drain,#do-log,#actor-pick{display:none!important}</style>
+</head>
+<body>
+<!-- The same bar the client view carries: one thing, two views. -->
+<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 goes to its record"></select>
+  <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>
+</nav>
+<main id="page">
+<!-- Everything you can DO, in one collapsible card; the facts keep the page.
+     The buttons are the same ones the two action rows used to hold — same
+     ids, same floating panels. -->
+<nav id="rail" hidden aria-label="Actions">
+  <button type="button" id="rail-toggle" aria-expanded="true" aria-label="Actions"
+    title="   Hide the action panel"><span class="rail-arrow" aria-hidden="true">«</span></button>
+  <div class="rail-groups">
+    <section class="rail-group" aria-label="Upkeep">
+      <h2>Upkeep</h2>
+      <button id="do-drain" title="   Fetch and handle whatever is waiting in the inbox now">Drain the inbox</button>
+      <button id="do-rebuild" title="   Refresh your feed from what your pod still holds">Refresh Feed</button>
+      <button id="do-log" title="   This agent's recent log lines">Show the log</button>
+      <button id="do-deadletter" title="   Deliveries that failed for good and were set aside">Show dead letters</button>
+    </section>
+    <section class="rail-group" aria-label="Lifecycle">
+      <h2>Lifecycle</h2>
+      <button id="do-rotate-key" title="   Replace the signing key and tell other servers the new one" data-confirm="rotate-key">Rotate signing key</button>
+      <button id="do-transfer-in" title="   List an old account as an alias, so its server sends its followers here">Transfer an account here</button>
+      <button id="do-move" title="   Your followers go to the account you name; this handle keeps resolving as a redirect" data-confirm="move">Transfer this account away</button>
+      <button id="do-retire" title="   End this identity for good — a Delete, then a Tombstone" class="danger apart" data-confirm="retire">Retire identity</button>
+    </section>
+  </div>
+</nav>
+<div id="content">
+<p class="err" id="fatal" role="alert"></p>
+<p aria-live="polite" id="say"></p>
+<!-- Every actor running on this machine. A stopped one is left out: there is
+     no page there to open. Plain links — a top-level navigation sends no
+     Origin, so each agent's own firewall lets it through. -->
+<section id="pane-others" aria-label="Actors on this machine" hidden>
+  <!-- Everything setup cannot work without. The bio, avatar and UI password it
+       also offers are all changeable afterwards, so they are not asked here —
+       the fuller form is what the new actor opens on. -->
+  <form id="new-actor-form" hidden>
+    <fieldset>
+      <legend>What kind of Actor?</legend>
+      <label class="choice"><input type="radio" name="newKind" value="person" checked>
+        A <strong>person</strong> — an account you read and post from</label>
+      <label class="choice"><input type="radio" name="newKind" value="group">
+        A <strong>group</strong> of Fediverse users you manage</label>
+    </fieldset>
+    <fieldset>
+      <legend>Actor's Handle</legend>
+      <label for="new-handle">Handle</label>
+      <input type="text" id="new-handle" autocomplete="off"
+        placeholder="handle part of Fediverse address: @HANDLE@server"
+        aria-describedby="new-handle-hint">
+      <p class="hint" id="new-handle-hint">The name in your Fediverse address. This is permanent.
+        Letters, digits, hyphens, and underscores only.</p>
+    </fieldset>
+    <fieldset>
+      <legend>Actor's Pod</legend>
+      <label class="choice"><input type="radio" name="newMode" value="new" checked>
+        Create a Solid account and pod for the Actor</label>
+      <label class="choice"><input type="radio" name="newMode" value="existing">
+        Use a pod I already have</label>
+      <label for="new-issuer">Solid identity provider</label>
+      <input type="url" id="new-issuer" value="https://solidcommunity.net" autocomplete="url">
+      <label for="new-email">Solid Account email/username</label>
+      <input type="email" id="new-email" autocomplete="email" placeholder="you@example.org">
+      <label for="new-password">Solid Account password</label>
+      <input type="password" id="new-password" autocomplete="current-password"
+        aria-describedby="new-password-hint">
+      <p class="hint" id="new-password-hint">Password is sent once in return for a credential which is stored locally.
+        The password itself is never stored. You may revoke the credential without changing the
+        password.</p>
+      <div id="new-row-podname">
+        <label for="new-podname">Pod name</label>
+        <input type="text" id="new-podname" autocomplete="off" aria-describedby="new-podname-hint">
+        <p class="hint" id="new-podname-hint">The subdomain of your pod address, it will become
+          https://YOUR-POD-NAME.your-identity-provider</p>
+      </div>
+      <div id="new-row-pod" hidden>
+        <label for="new-pod">Pod address</label>
+        <input type="url" id="new-pod" autocomplete="url" placeholder="https://you.solidcommunity.net/">
+      </div>
+    </fieldset>
+    <p>
+      <button type="submit" id="new-actor-go" title="   Create the account, the pod and the actor" class="primary">Create</button>
+      <button type="button" id="new-actor-cancel" title="   Change nothing and close">Cancel</button>
+    </p>
+  </form>
+</section>
+<section id="pane-identity" hidden>
+  <dl id="facts"></dl>
+  <!-- Declared here, and render() puts these on the kind row — the row they
+       belong to is generated, so this is the only place they can be written
+       down. Each reads as the setting it would change, so what it shows IS the
+       current state: changing the word is the whole action, with no save. -->
+  <span id="moderation" hidden>
+    <label for="joins-mod">join requests</label>
+    <select id="joins-mod" title="   Whether each join request waits for you">
+      <option value="unmoderated">unmoderated</option>
+      <option value="moderated">moderated</option>
+    </select>
+    <label for="review-mod">posts</label>
+    <select id="review-mod" title="   Whether members’ posts wait for you">
+      <option value="unmoderated">unmoderated</option>
+      <option value="moderated">moderated</option>
+    </select>
+  </span>
+  <span id="status-ctl" hidden>
+    <select id="status-pick" aria-label="Actor status" title="   Whether this actor is receiving mail — parking stops it and keeps the handle; active re-follows the saved graph">
+      <option value="active">active</option>
+      <option value="parked">parked</option>
+    </select>
+  </span>
+  <span id="update-ctl" hidden>
+    <span id="update-word"></span>
+    <button id="update-go" hidden title="   Pull the latest FediPod and restart every agent on this machine">Update</button>
+  </span>
+  <span id="follows-ctl" hidden>
+    <select id="follows-pick" aria-label="New followers" title="   Whether each new follower waits for you — switch to accepted automatically before moving an old account here, so the whole wave lands">
+      <option value="approve">wait for approval</option>
+      <option value="auto">accepted automatically</option>
+    </select>
+  </span>
+  <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>
+</section>
+<span id="gateway-ctl" hidden>
+  <span id="gateway-word"></span>
+  <button type="button" id="gateway-open-attach" class="inline" hidden
+    title="   Attach this account to a mail-filtering gateway">Attach to a gateway</button>
+  <button type="button" id="gateway-open-detach" class="inline danger" hidden
+    title="   Go back to your pod's own inbox">Detach from gateway</button>
+</span>
+<section id="pane-group" hidden>
+  <!-- Both queues are consequences of a moderation setting: with the setting off
+       nothing can ever arrive in them, so the heading would be a standing
+       promise of a list that cannot fill. Shown only when the setting is on AND
+       something is waiting. -->
+  <div id="block-requests" hidden>
+    <h3>Follow requests <span class="muted" id="requests-count"></span>
+      <button id="admit-all" class="inline" title="   Accept everyone waiting, in one go">Accept all</button></h3>
+    <ul class="rows" role="list" id="requests"></ul>
+  </div>
+  <div id="block-pending" hidden>
+    <h3>Posts to review <span class="muted" id="pending-count"></span></h3>
+    <ul class="rows" role="list" id="pending"></ul>
+  </div>
+  <!-- Moderation another server asked for. A delivery does not prove who sent
+       it, so a moderator's request waits to be vouched for rather than acting
+       on arrival. Shown only when something is actually waiting. -->
+  <div id="block-modqueue" hidden>
+    <h3>Moderation requests <span class="muted" id="modqueue-count"></span></h3>
+    <p class="hint">Asked for by a moderator over the Fediverse. A delivery cannot prove who
+      sent it, so nothing here has been acted on.</p>
+    <ul class="rows" role="list" id="modqueue"></ul>
+  </div>
+  <h3>Members <span class="muted" id="members-count"></span></h3>
+  <p class="hint">A group cannot force an unfollow. Muting is declining to carry; ejecting also
+    tells their server it is no longer a member.</p>
+  <ul class="rows" role="list" id="members"></ul>
+  <h3>Carried <span class="muted" id="announced-count"></span></h3>
+  <ul class="rows" role="list" id="announced"></ul>
+</section>
+<section id="pane-inbox" hidden>
+  <h2><span class="hlabel">Inbox</span></h2>
+  <p id="inbox-summary"></p>
+  <p class="hint">Your pod accepts deliveries whether or not this agent is running, so a
+    machine that has been off collects them. The agent is working through them oldest first
+    and will get there on its own — this is only here if you would rather not wait.</p>
+  <p>
+    <button id="inbox-keep" title="   Keep everything and let the agent work through it">Keep everything</button>
+    <label for="inbox-before">or discard content older than</label>
+    <select id="inbox-before">
+      <option value="7">7 days</option>
+      <option value="30" selected>30 days</option>
+      <option value="90">90 days</option>
+    </select>
+    <button id="inbox-prune" title="   Discard content older than the chosen age; keep the bookkeeping" class="primary">Discard it</button>
+  </p>
+  <p class="hint">Discarding drops posts, not bookkeeping: follows, unfollows, acceptances
+    and deletions in that period are still applied, so your follower list stays right and
+    nothing stays up that its author took down. What goes is the timeline you would have
+    read that week.</p>
+  <p class="err" id="inbox-warn" hidden></p>
+</section>
+<!-- Every form and panel is DECLARED here, inside the window that shows them.
+     Nothing is built in script — window.js only unhides one at a time, moves
+     the window and closes it. It floats rather than opening at the foot of the
+     page, so it never pushes the line you are reading out from under you. -->
+<div id="win" hidden>
+  <div id="win-bar"><span id="win-title"></span><button type="button" id="win-close" title="   Close this panel" aria-label="Close panel">✕</button></div>
+  <div id="win-body">
+<pre id="output" tabindex="0" role="region" aria-label="Output" hidden></pre>
+<!-- The inbound half of transferring: the aliases its old server checks before
+     it will send the Move. The outbound half is its own panel (confirm-form,
+     warn-move) — additive and reversible here, followers handed away there,
+     so the two directions never share a door. -->
+<div id="transfer-in-form" hidden>
+  <p class="hint">List the old account here first — its server checks this list before it
+    will send the move. Then start the transfer from the old account's own settings, and
+    set new followers to "accepted automatically" so the whole wave lands.</p>
+  <p id="alias-chips"></p>
+  <span id="alias-ctl">
+    <input type="text" id="alias-input" placeholder="@you@old.server" autocomplete="off"
+      title="   The account you are moving here from; its server checks this list before it will send the Move">
+    <button type="button" id="alias-add" class="inline"
+      title="   Resolve the old account, list it in alsoKnownAs, and republish the actor">Add alias</button>
+  </span>
+</div>
+<form id="bsky-form" hidden>
+  <ol class="hint">
+    <li>Get an account on Bluesky or another ATProto server.</li>
+    <li>On Bluesky, make an app password (Settings → Privacy and security → App Passwords)
+      and copy it — it is shown only once.</li>
+    <li>Fill in this form to connect, pasting that app password into the password
+      field.</li>
+  </ol>
+  <label for="bsky-service">service</label>
+  <input type="url" id="bsky-service" value="https://bsky.social" autocomplete="off">
+  <label for="bsky-identifier">handle</label>
+  <input type="text" id="bsky-identifier" placeholder="you.bsky.social" autocomplete="username">
+  <label for="bsky-password">app password</label>
+  <input id="bsky-password" type="password" autocomplete="current-password">
+  <p>
+    <button id="bsky-connect" type="submit" class="primary" title="   Sign in to the Bluesky account with the app password">Connect</button>
+  </p>
+</form>
+<form id="ident-form" hidden>
+  <p class="hint">Either kind brings that account's timeline and notifications
+    into the feed you read here, and acts as that account when you reply to,
+    favourite or boost one of its posts.</p>
+  <p>
+    <button type="button" id="ident-pick-fedi" class="primary" title="   Sign in at a Mastodon-API server: Mastodon, GoToSocial, Pleroma, Akkoma, Pixelfed or Friendica">A Fediverse account</button>
+    <button type="button" id="ident-pick-bsky" title="   Sign in to Bluesky or another ATProto server with an app password">A Bluesky account</button>
+  </p>
+</form>
+<form id="fediacct-form" hidden>
+  <ol class="hint">
+    <li>Name the server your other account is on.</li>
+    <li>That server asks you to sign in and to allow FediPod. It is the only
+      place your password is typed; this agent never sees or stores one.</li>
+    <li>Its timeline and notifications then join the ones you already read here,
+      and a like or a reply on one of its posts goes out as that account.</li>
+    <li>What arrives is held on this machine for reading. None of it is written
+      to your pod.</li>
+  </ol>
+  <label for="fediacct-host">server</label>
+  <input type="text" id="fediacct-host" placeholder="mastodon.social" autocomplete="off"
+    title="   The server your other account lives on — Mastodon, GoToSocial, Pleroma, Akkoma, Pixelfed and Friendica all speak the API this needs">
+  <p>
+    <button id="fediacct-connect" type="submit" class="primary" title="   Go to that server to sign in and allow FediPod">Continue to that server</button>
+  </p>
+</form>
+<!-- Every consequence is written here rather than assembled in script: the
+     page asking "are you sure" has to say what it is sure about, and this is
+     the only record of it. Script picks which block to show, nothing else. -->
+<!-- The gateway popups: attach proves the pod with this agent's own credential;
+     detach republishes the pod's own inbox. -->
+<form id="gateway-attach-form" hidden>
+  <p class="hint">A gateway filters your Fediverse mail before it reaches your pod: each
+    delivery is verified at its door, spam is dropped, and the rest lands in your pod as
+    before. Attaching proves the pod with this agent's own credential — no password
+    leaves this machine.</p>
+  <label for="gw-front">gateway</label>
+  <input type="url" id="gw-front" placeholder="https://fedipod.net" autocomplete="off">
+  <fieldset>
+    <legend>Your Fediverse handle</legend>
+    <label class="choice"><input type="radio" name="gwShape" value="pod" checked>
+      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" 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>
+      <span class="hint">Your address lives on the gateway's domain, but not your data
+        or key; you can change pods later and keep the handle.</span>
+      <span id="gw-name-msg" class="hint"></span></label>
+  </fieldset>
+  <p>
+    <button id="gw-attach" type="button" class="primary"
+      title="   Create the gateway account and point your mail through its door">Attach</button>
+  </p>
+</form>
+<form id="gateway-detach-form" hidden>
+  <p class="hint" id="gw-detach-plain">Deliveries go back to your pod's own inbox — the
+    actor is republished advertising it. Your name and data never moved.</p>
+  <p class="warn" id="gw-detach-fronted" hidden>This identity publishes under the gateway's
+    name. Detaching moves every published id back to the pod — a rename other servers
+    see, not just a mail change.</p>
+  <p>
+    <button id="gw-detach" type="button" class="primary"
+      title="   Forget the gateway and republish the actor with the pod inbox">Detach</button>
+  </p>
+</form>
+<form id="confirm-form" hidden>
+  <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">
+      <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
+      those servers to drop the account and the posts they cached, the actor document is
+      replaced with a Tombstone, and this agent will refuse to start again for this pod. Your
+      posts and RDF stay on the pod; the identity does not come back.</p>
+    <p>Two things that are not this, and can be done from here:
+      <button type="button" id="go-park" title="   Park instead: keeps the handle, just stops the mail" class="inline">Park it instead</button>
+      keeps the handle resolving and just stops the mail — setting status back to
+      active undoes it.
+      <button type="button" id="go-move" title="   Transfer instead: hands your followers to another account" class="inline">Transfer it instead</button>
+      hands your followers to another account.</p>
+    <label for="confirm-handle">Type the handle to confirm</label>
+    <input type="text" id="confirm-handle" autocomplete="off">
+  </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
+      advertises <code>movedTo</code>, so this handle keeps resolving as a redirect rather than
+      breaking — nothing here is deleted.</p>
+    <p>Then this identity is parked, exactly as Park would: everyone it follows is unfollowed
+      and the inbox is closed. Migrating is the far end's decision, so some followers will not
+      come across.</p>
+    <label for="move-target">Transfer to</label>
+    <input type="text" id="move-target" autocomplete="off" placeholder="@you@elsewhere or an actor URL">
+    <label for="confirm-handle-move">Type this actor's handle to confirm</label>
+    <input type="text" id="confirm-handle-move" autocomplete="off">
+  </div>
+  <p>
+    <button type="submit" id="confirm-go" title="   Do it" class="primary">Confirm</button>
+    <button type="button" id="confirm-cancel" title="   Change nothing and close">Cancel</button>
+  </p>
+</form>
+  </div>
+</div>
+</div>
+</main>
+<script src="bar.js"></script>
+<script src="window.js"></script>
+<script src="admin.js"></script>
+</body>
+</html>