fedipod-server 0.29.0 → 0.31.0

package/web/admin/actors.js

@@ -1,147 +0,0 @@
-// actors.js — the other actors on this machine: the picker, going to one,
-// starting a stopped one, and the form for a new one.
-
-// Somewhere to go, and nothing else. A stopped actor is left out — the link
-// would land on nothing. The one you are on keeps its place in the row but
-// offers only `app`, because its admin page is the page you are reading.
-
-let actors = [];
-
-async function renderOthers() {
-  const { json } = await api('/profiles');
-  actors = json?.identities || [];
-  const sel = $('actor-pick');
-  sel.textContent = '';
-  // The fediverse address, which is what the actor IS to everyone else, and the
-  // only form that stays distinct: two identities can share a local handle, but
-  // never a handle AND a pod. A stopped one has no address to report — nothing
-  // answered — so it falls back to the name it is filed under.
-  const label = (r) => (r.address || r.handle || r.name)
-    + (r.mode && r.mode !== 'active' ? ` (${r.mode})` : '') + (r.mode ? '' : ' (stopped)');
-  const seen = {};
-  for (const r of actors) seen[label(r)] = (seen[label(r)] || 0) + 1;
-
-  for (const [i, r] of actors.entries()) {
-    const o = document.createElement('option');
-    o.value = String(i);
-    o.selected = !!r.current;      // it opens showing where you already are
-    o.textContent = label(r) + (seen[label(r)] > 1 && r.port ? ` :${r.port}` : '');
-    sel.appendChild(o);
-  }
-  // The way to a NEW actor rides the same dropdown as the existing ones.
-  const add = document.createElement('option');
-  add.value = '__add';
-  add.textContent = '+ add a new account…';
-  sel.appendChild(add);
-}
-
-// Going to an actor commits a navigation and, for a stopped one, a POST that
-// boots its pod — so it must run once per choice. Pressing Enter on the select
-// fires BOTH a keydown (handled below) and a native `change`, so without a
-// guard a keyboard commit would start the actor twice.
-let goingToActor = false;
-const goToActor = async () => {
-  if (goingToActor) return;
-  if ($('actor-pick').value === '__add') { renderOthers(); openNewActor(); return; }
-  const r = actors[Number($('actor-pick').value)];
-  if (!r || r.current) return;
-  goingToActor = true;
-  try {
-    if (r.mode) { location.href = r.admin; return; }
-    $('actor-pick').disabled = true;
-    say(`starting ${r.name}`);
-    const started = await write('/start-actor', { name: r.name }, `${r.name} is up`);
-    $('actor-pick').disabled = false;
-    if (started?.url) location.href = `${started.url}admin/`;
-    else renderOthers();            // put the picker back on the current actor
-  } finally {
-    goingToActor = false;
-  }
-};
-// Choosing one goes to its record, as it always has.
-//
-// Arrowing is the one case that must not: on a closed select every Arrow
-// keypress fires `change`, so a keyboard user browsing the list would be
-// carried off to the first actor they passed — and for a stopped one that
-// boots its pod. An arrow key arms a flag and the change it causes is ignored;
-// Enter commits. A mouse never sets the flag, so clicking behaves as before.
-let arrowing = false;
-$('actor-pick').addEventListener('keydown', (ev) => {
-  if (['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(ev.key)) arrowing = true;
-  if (ev.key === 'Enter') { arrowing = false; goToActor(); }
-});
-$('actor-pick').addEventListener('pointerdown', () => { arrowing = false; });
-$('actor-pick').addEventListener('change', () => {
-  if (!arrowing) goToActor();
-  arrowing = false;
-});
-
-// Setting up a new actor asks for exactly what this page cannot already tell
-// it: the pod and the account behind it, and its permanent name. Display name,
-// bio and pictures are the client's job now — Phanpy's profile editor writes
-// them through /api/v1/accounts/update_credentials. Where the private data goes
-// is not a question either: it lands beside the credential, and `state --to`
-// moves it afterwards.
-
-const picked = (name) => document.querySelector(`input[name=${name}]:checked`)?.value;
-
-function newActorRows() {
-  const mode = picked('newMode');
-  $('new-row-podname').hidden = mode !== 'new';
-  $('new-row-pod').hidden = mode !== 'existing';
-}
-for (const el of document.querySelectorAll('input[name=newMode]')) {
-  el.addEventListener('change', newActorRows);
-}
-
-// While the form is up the page IS the new actor's setup — so the record of
-// the actor you came from goes away, list included. Which panes were showing
-// is remembered rather than recomputed: whether Group and Inbox belong is a
-// decision render() already made.
-const RECORD_PANES = ['pane-identity', 'pane-group', 'pane-inbox', 'rail'];
-let putBack = [];
-
-function showNewActor(on) {
-  if (on) closePanels();              // nothing of the old actor left open behind it
-  document.body.classList.toggle('adding', on);   // see body.adding in the CSS
-  $('new-actor-form').hidden = !on;
-  if (on) {
-    putBack = RECORD_PANES.filter(id => !$(id).hidden);
-    for (const id of putBack) $(id).hidden = true;
-  } else {
-    for (const id of putBack) $(id).hidden = false;
-    putBack = [];
-  }
-}
-
-// `add a new account` is the last item of the Local Actors dropdown; choosing
-// it opens the form in place. Arriving with ?new does the same.
-function openNewActor() {
-  showNewActor(true);
-  newActorRows();
-  $('new-handle').focus();
-}
-$('new-actor-cancel').addEventListener('click', () => { showNewActor(false); say('nothing changed'); });
-
-$('new-actor-form').addEventListener('submit', async (ev) => {
-  ev.preventDefault();
-  const handle = $('new-handle').value.trim();
-  const answers = {
-    handle,
-    kind: picked('newKind'),
-    mode: picked('newMode'),
-    issuer: $('new-issuer').value.trim(),
-    email: $('new-email').value.trim(),
-    password: $('new-password').value,
-  };
-  if (answers.mode === 'new') answers.podName = $('new-podname').value.trim() || handle;
-  else answers.pod = $('new-pod').value.trim();
-  answers.container = $('new-container').value.trim();
-  answers.createIndex = $('new-createIndex').checked;
-  $('new-actor-go').disabled = true;
-  say(`setting up ${handle || 'the new actor'} — this takes a while`);
-  const r = await write('/new-actor', answers, `setting up ${handle}`);
-  $('new-actor-go').disabled = false;
-  if (r?.url) location.href = r.url;      // its own page, where the progress is
-});
-

package/web/admin/bar.css

@@ -1,126 +0,0 @@
-/* The bar every page of ours carries — the record, the setup form and the
-   client view. One file so the three cannot drift apart. */
-/* One column, 960px, centred — the bar included, so the title sits over the
-   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. */
-/* 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.
-   The inline padding is the column's own margin plus the 1rem the page uses
-   inside it, so the title lands exactly on the page's left edge — and `max`
-   keeps it at 1rem once the window is narrower than the column.
-   No rule underneath: the tone change is the boundary, and a line as well
-   would be drawing it twice. */
-/* Wraps, because it does not fit: at 320px the title plus three destinations
-   ran 67px past the viewport, and the bar is on every page — so the whole
-   document scrolled sideways whatever was under it. */
-#bar { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
-  width: 100%; max-width: none; margin: 0; box-sizing: border-box;
-  /* The column width is the page's to declare (--bar-col); 960 stands where a
-     page says nothing. */
-  padding: .5rem max(1rem, calc((100% - var(--bar-col, 960px)) / 2 + 1rem));
-  background: var(--raised); }
-/* The actor's fediverse handle, in the row between the title and the
-   destinations. */
-#bar-handle { color: var(--heading); font-size: .95rem; margin-right: .6rem; }
-#bar-handle:empty { display: none; }
-/* The actors dropdown, where a page's bar carries one instead of the static
-   handle. Styled here so every page's bar shows the same control: the same
-   light well and drawn caret every setting on the record page uses. */
-#bar select { font: inherit; font-size: .95rem; max-width: min(24rem, 55vw);
-  margin-right: .6rem; appearance: none; 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; }
-#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: 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;
-  border: 0; background: none; color: var(--link); cursor: pointer;
-  text-decoration: none; }
-/* The page you are already on stays in the row, so the set never moves — it is
-   underlined rather than removed. */
-#bar button[aria-current="page"], #bar a[aria-current="page"] {
-  text-decoration: underline; text-underline-offset: .3rem; }
-/* The client control: which fediverse client this browser opens. The label is
-   quieter than the links; the one in use is marked `aria-current="true"` — the
-   current item of a set, which on the record page is not the current PAGE — so
-   it needs its own mark rather than borrowing the rule above. */
-#bar #client-pick, #bar #account-pick { display: inline-flex; gap: .6rem; align-items: baseline;
-  white-space: nowrap; margin-left: 1rem; }
-#bar #client-now, #bar #account-now { opacity: .75; }
-/* The notices bell: the one filled control in the bar, because it is the one
-   thing there that is not a place to go but something to be told. The count is
-   how many notices this browser has not opened yet; with none it is quiet. */
-#bar #bar-notices { display: inline-flex; align-items: center; gap: .35rem; margin-left: 1rem;
-  padding: .3rem .7rem; border-radius: 999px; font-size: 1.05rem; line-height: 1;
-  background: var(--btn); color: var(--btn-text); border: 1px solid var(--btn); }
-/* `display` on an id rule outranks the browser's own [hidden] rule, and the
-   shell has no !important of its own, so the bell hid on the record page and
-   showed on the client with nothing to show. Said here, once, for every page. */
-#bar #bar-notices[hidden] { display: none; }
-#bar #bar-notices:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
-#bar #bar-notices:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
-#bar #bar-notices-count { font-size: .9rem; font-weight: 700; min-width: 1.3em; text-align: center;
-  padding: .05rem .4rem; border-radius: 999px; background: var(--btn-text); color: var(--btn); }
-#bar #bar-notices-count:empty { display: none; }
-#bar #bar-notices[data-new="0"] { background: var(--field-bg); color: var(--ink); border-color: var(--field-edge); }
-#bar a[aria-current="true"] {
-  font-weight: 700; text-decoration: underline; text-underline-offset: .3rem; }
-
-/* The two-clients notice: said once, to somebody who knew this page when it
-   had one client. Sized and placed rather than left to the browser's default,
-   which stretched it edge to edge and put it over the very links it names. */
-#client-news, #notices-list, #notice-view {
-  /* Low rather than centred: it points at the links in the bar, so the bar has
-     to stay in view while it is read. */
-  max-width: 34rem; margin: auto auto 2.5rem; padding: 1.5rem 1.7rem;
-  border: 1px solid var(--dialog-edge); border-radius: .6rem;
-  background: var(--raised); color: var(--fg);
-  font: 1rem/1.55 var(--font);
-  box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .25);
-}
-#client-news::backdrop, #notices-list::backdrop, #notice-view::backdrop { background: rgba(0, 0, 0, .45); }
-#client-news h2, #notices-list h2, #notice-view h2 { font-size: 1.25rem; margin: 0 0 .9rem; color: var(--heading); }
-#client-news p, #notices-list p, #notice-view p { margin: 0 0 1.2rem; }
-#client-news p:last-child, #notices-list p:last-child, #notice-view p:last-child { margin: 0; }
-#client-news button, #notices-list button, #notice-view button {
-  font: inherit; padding: .55rem 1.3rem; border-radius: .35rem; cursor: pointer;
-  background: var(--btn); color: var(--btn-text); border: 1px solid var(--btn);
-}
-#client-news button:hover, #notices-list button:hover, #notice-view button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
-#client-news button:focus-visible, #notices-list button:focus-visible, #notice-view button:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
-
-/* The notices dialogs are centred and never taller than the window: the
-   client-news rule above sits low, and a short window pushed a list of
-   notices up past the top edge where nothing could reach it. */
-#notices-list, #notice-view { margin: auto; max-height: calc(100dvh - 3rem); overflow: auto; box-sizing: border-box; }
-/* The list of notices: each title a button that opens that notice, the date
-   beside it, the ones not yet opened here in bold. */
-#notices-items { list-style: none; margin: 0 0 1.2rem; padding: 0; }
-#notices-items li { display: flex; gap: .8rem; align-items: baseline; padding: .45rem 0;
-  border-bottom: 1px solid var(--line); }
-#notices-items li:last-child { border-bottom: 0; }
-#notices-items button.notice-open { flex: 1 1 auto; text-align: left; padding: .1rem 0;
-  background: none; border: 0; color: var(--link); text-decoration: underline; text-underline-offset: .2rem; }
-#notices-items li.new button.notice-open { font-weight: 700; }
-#notices-items .when, #notice-view .when { color: var(--sub); font-size: .9rem; white-space: nowrap; }
-#notices-items p.none { color: var(--sub); }
-#notice-view-body p { margin: 0 0 .9rem; }
-#notice-view-body a { color: var(--link); word-break: break-all; }

package/web/admin/bar.js

@@ -1,99 +0,0 @@
-// bar.js — the three destinations, shared by the record, the setup form and the
-// client view, so they cannot drift apart. Nothing here touches the client in
-// the frame: it is this agent's own root, and framing it is the whole of the
-// relationship.
-
-(() => {
-  // The three destinations are <a href> now: they are navigations, so they
-  // belong in a screen reader's links list, and middle-click and open-in-new-tab
-  // work the way they do everywhere else. Nothing here has to drive them.
-  //
-  // One exception, and it keeps its href as the fallback: on the record page
-  // `add new account` opens the form IN PLACE rather than reloading. admin.js
-  // binds that and calls preventDefault; without the form it is a plain link to
-  // ?new=1, which opens it on arrival.
-
-  // The bar says the product; the TAB says which actor, which is what tells two
-  // 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', { 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');
-    if (el && s?.handle && s?.actor) {
-      try { el.textContent = `@${s.handle}@${new URL(s.actor).host}`; } catch { /* odd actor url */ }
-    }
-    // A viewer does nothing: it publishes no profile, carries nothing and
-    // leaves the account looking broken from outside. Say so where the
-    // account is, and let the owner take it back from here.
-    if (s?.mode === 'viewer') viewerBanner();
-  }).catch(() => { /* not up yet; the bar still works */ });
-
-  // The actors dropdown, on a page whose bar carries one. The record page
-  // wires its own richer version (it can start a stopped actor and open the
-  // new-account form in place), so this one stands down there.
-  const pick = document.getElementById('actor-pick');
-  if (pick && !document.getElementById('new-actor-form')) {
-    const base = location.pathname.replace(/\/admin\/.*$/u, '');
-    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)
-        + (r.mode && r.mode !== 'active' ? ` (${r.mode})` : '') + (r.mode ? '' : ' (stopped)');
-      for (const [i, r] of actors.entries()) {
-        const o = document.createElement('option');
-        o.value = String(i);
-        o.selected = !!r.current;
-        o.textContent = label(r);
-        pick.appendChild(o);
-      }
-      const add = document.createElement('option');
-      add.value = '__add';
-      add.textContent = '+ add a new account…';
-      pick.appendChild(add);
-      pick.addEventListener('change', () => {
-        if (pick.value === '__add') { location.href = base + '/admin/?new=1'; return; }
-        const r2 = actors[Number(pick.value)];
-        if (!r2 || r2.current) return;
-        // A running actor's client; a stopped one is started from its record.
-        if (r2.mode && r2.admin) location.href = r2.admin + 'client/';
-        else if (r2.admin) location.href = r2.admin;
-      });
-    }).catch(() => { pick.hidden = true; });
-  }
-})();
-
-// "Another device is active": what it means for this account, and the way out.
-// The lease is a document on the pod with a five-minute life; a browser that
-// was closed leaves one behind that nothing renews, and every reload asks
-// under a new name, so waiting can look like waiting forever.
-function viewerBanner() {
-  if (document.getElementById('viewer-banner')) return;
-  const base = location.pathname.replace(/\/admin\/.*$/u, '');
-  const bar = document.createElement('div');
-  bar.id = 'viewer-banner';
-  bar.setAttribute('role', 'status');
-  bar.style.cssText = 'padding:.7rem 1rem;background:var(--field-bg,#ececec);color:var(--fg,#1a1a1a);'
-    + 'border-bottom:1px solid var(--line,#b0b0b0);display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font:inherit';
-  const said = document.createElement('span');
-  said.textContent = 'Another device holds this account, so nothing is being published or delivered from here.';
-  const go = document.createElement('button');
-  go.type = 'button';
-  go.textContent = 'Take it over';
-  go.style.cssText = 'font:inherit;font-weight:600;padding:.4rem 1rem;border-radius:.4rem;border:1px solid var(--btn,#3a5f43);'
-    + 'background:var(--btn,#3a5f43);color:var(--btn-text,#fff);cursor:pointer';
-  go.addEventListener('click', async () => {
-    go.disabled = true;
-    said.textContent = 'Taking it over…';
-    try {
-      const r = await fetch(base + '/takeover', { method: 'POST', headers: { 'x-fedipod-page': '1' } });
-      const j = await r.json().catch(() => null);
-      if (r.ok && j?.mode === 'active') { location.reload(); return; }
-      said.textContent = j?.error || 'The lease could not be taken.';
-    } catch (e) { said.textContent = e.message; }
-    go.disabled = false;
-  });
-  bar.append(said, go);
-  document.body.prepend(bar);
-}

package/web/admin/client/client.js

@@ -1,66 +0,0 @@
-// client.js — make the framed client be THIS agent's actor.
-//
-// The client is a general fediverse client: it keeps a list of accounts in
-// localStorage and one of them is current. Nothing makes that one agree with
-// the agent serving the page. A leftover account from another identity wins,
-// and you get somebody else's timeline on this actor's page, with the profile
-// editor pointed at a host that cannot answer.
-//
-// Per-origin storage is what keeps identities apart, and it does work — each
-// actor answers at <handle>.localhost:<port> and each origin has its own
-// accounts list. What was missing is the other half: telling the client which
-// account it is meant to be showing.
-//
-// The frame's markup declares what it loads (`src="/"`), and that does not
-// change. This navigates the loaded app to its own login route, which is app
-// navigation, not an include: `?instance=` prefills and `?submit=` runs it, so
-// the round trip needs no typing. Hash-routed, so the query lives after the
-// hash; `submit` must be non-empty, because the empty string is falsy and the
-// auto-submit never fires.
-
-(async () => {
-  const frame = document.getElementById('client');
-  if (!frame) return;
-
-  // Who this agent is, in the form the client stores: `info.uri` is the actor
-  // URI on the pod. Matching on that rather than on the origin is deliberate —
-  // "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', { 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
-  // — arrives as a hash on THIS page, and the frame never sees it. Forward it,
-  // so the link lands where it says while keeping the bar above it.
-  const wanted = location.hash && location.hash !== '#' ? location.hash : null;
-  const sendTo = (hash) => {
-    try { frame.contentWindow.location.hash = hash; } catch { /* not ready yet */ }
-  };
-  const whenReady = (fn) => {
-    if (frame.contentWindow?.location?.href && frame.contentWindow.location.href !== 'about:blank') fn();
-    else frame.addEventListener('load', fn, { once: true });
-  };
-
-  let accounts = [];
-  try { accounts = JSON.parse(localStorage.getItem('accounts') || '[]'); } catch { /* unreadable */ }
-  const ours = accounts.find(a => a?.info?.uri === status.actor);
-  if (ours) {
-    // A stored login can be dead — its token revoked or minted by a run that
-    // never finished. Trusting it shows an empty client with no way out, so
-    // ask the facade first; a dead one falls through to the same one-trip
-    // login a missing account gets.
-    const alive = ours.accessToken && await fetch('/api/v1/accounts/verify_credentials', {
-      headers: { authorization: `Bearer ${ours.accessToken}` },
-    }).then(r => r.ok).catch(() => false);
-    if (alive) {
-      if (wanted) whenReady(() => sendTo(wanted));
-      return;
-    }
-  }
-
-  // Same origin, so the frame's own host is the instance to log into. A deep
-  // link is dropped here on purpose: logging in navigates the frame anyway, and
-  // arriving somewhere unexpected afterwards is worse than arriving home.
-  whenReady(() => sendTo(`#/login?instance=${encodeURIComponent(location.host)}&submit=1`));
-})();

package/web/admin/client/index.html

@@ -1,69 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>FediPod — client</title>
-<link rel="icon" href="/icons/local.svg" type="image/svg+xml">
-<link rel="stylesheet" href="../tokens.css">
-<style>
-/* Colours are the shared tokens (tokens.css); only layout is here. The bar is
-   a fixed height, the client takes the rest — the page never scrolls, the frame
-   does. */
-:root { color-scheme: light dark; font-size: 125%; }
-html { height: 100%; }
-body { font: 1rem/1.5 Arial, Helvetica, sans-serif; margin: 0; height: 100dvh;
-  display: flex; flex-direction: column; overflow: hidden; }
-main { flex: 1 1 auto; min-height: 0; display: flex; }
-#client { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; }
-</style>
-<link rel="stylesheet" href="../bar.css">
-</head>
-<body>
-
-<!-- The same bar the record carries, so the two surfaces are one thing with two
-     views. The client below is this agent's own, at its own root: same origin,
-     which is why framing it needs nothing opened beyond frame-ancestors 'self'. -->
-<nav id="bar" aria-label="Site">
-  <h1 class="name">FediPod</h1>
-  <select id="actor-pick" aria-label="Local actors"
-    title="   Every actor on this machine; choosing one opens its client"></select>
-  <!-- The account group, styled like the client group beside it: one label,
-       then the places to go. The browser build adds "sign out" to it. -->
-  <span id="account-pick"><span id="account-now">account:</span>
-  <a id="bar-fediverse" href="./" title="   Open the client and read your timeline" aria-current="page">visit</a>
-  <a id="bar-manage" href="../" title="   The record: what this actor is, and what you can do to it">manage</a>
-  </span>
-  <!-- Notices from whoever runs this site. Shown only when the site has any
-       (notices-bar.js asks /api/notices); the count is how many are new here. -->
-  <button type="button" id="bar-notices" hidden aria-haspopup="dialog" aria-controls="notices-list"
-    title="   Notices from the operator of this site">&#128276;<span id="bar-notices-count" aria-live="polite"></span></button>
-</nav>
-
-<main>
-<iframe id="client" src="../../" title="fediverse client"></iframe>
-</main>
-
-<script src="../bar.js"></script>
-<script src="client.js"></script>
-
-<!-- The notices: the list, and one notice open. Declared here and filled by
-     notices-bar.js from /api/notices; nothing in them is markup from a notice. -->
-<dialog id="notices-list" aria-labelledby="notices-title">
-  <section>
-    <h2 id="notices-title">Notices</h2>
-    <ul id="notices-items"></ul>
-    <p class="row"><button type="button" id="notices-close" class="primary" title="   Close the list of notices">Close</button></p>
-  </section>
-</dialog>
-<dialog id="notice-view" aria-labelledby="notice-view-title">
-  <section>
-    <h2 id="notice-view-title"></h2>
-    <p class="when" id="notice-view-when"></p>
-    <div id="notice-view-body"></div>
-    <p class="row"><button type="button" id="notice-view-close" class="primary" title="   Back to the list of notices">Close</button></p>
-  </section>
-</dialog>
-<script src="../notices-bar.js"></script>
-</body>
-</html>

package/web/admin/client-pick.js

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

package/web/admin/common.js

@@ -1,23 +0,0 @@
-// common.js — what every admin page starts from: the element lookup, the
-// door the page is served behind, and the two ways it talks to the agent.
-// Loaded first by the record page and by the setup page.
-
-const $ = (id) => document.getElementById(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, '');
-// 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, headers: { ...(init?.headers || {}), ...PAGE_HEADER } });
-  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 || {}),
-});