fedipod-server 0.11.0 → 0.13.0

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

@@ -184,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, headers: { ...(init?.headers || {}), 'x-fedipod-page': '1' } });
-  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;
 

package/web/admin/upkeep.js

@@ -0,0 +1,170 @@
+// upkeep.js — upkeep and the lifecycle: the output pane, drain, recover,
+// log and dead letters; the confirmations for rotate, retire and move; and
+// the inbox backlog panel.
+
+// Which button filled the output pane, so clicking that one again closes it
+// rather than re-fetching the same thing under an already-open panel.
+let outputSource = null;
+
+const OUTPUT_TITLES = { log: 'Log', deadletter: 'Dead letters', drain: 'Inbox drain', rebuild: 'Recovered posts' };
+const output = (obj, source = null) => {
+  closePanels('output');
+  outputSource = source;
+  solWindow.show('output', OUTPUT_TITLES[source] || 'Output');
+  $('output').textContent = typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2);
+};
+
+const showingFrom = (source) => outputSource === source && solWindow.openId() === 'output';
+
+// Drain is the one that does work rather than reveals it, so a second click
+// re-runs instead of closing. It can take a while — the agent joins a sweep
+// already in flight and queues another after it — and a button that looks dead
+// for a minute reads as broken.
+$('do-drain').addEventListener('click', async (ev) => {
+  const b = ev.currentTarget;
+  b.disabled = true;
+  b.textContent = 'draining…';
+  say('draining the inbox — if a sweep is already running this waits for it to finish');
+  const r = await write('/drain', {}, 'inbox drained');
+  b.disabled = false;
+  b.textContent = 'Drain the inbox';
+  if (r) {
+    const box = r.inbox || {};
+    say(`inbox drained — ${box.count ?? 0} still waiting`);
+    output(r, 'drain');
+  }
+});
+
+// Like the drain, this does work rather than reveals it, so a second click
+// re-runs. Nothing here can lose anything: it only adds posts back.
+$('do-rebuild').addEventListener('click', async (ev) => {
+  const b = ev.currentTarget;
+  b.disabled = true;
+  b.textContent = 'recovering…';
+  say('reading what the pod still holds — one request per post, so this takes a moment');
+  const r = await write('/rebuild', {}, 'checked');
+  b.disabled = false;
+  b.textContent = 'Recover posts';
+  if (!r) return;
+  if (r.why) { say(r.why, 'err'); return; }
+  if (!r.landed) { say('recovered posts could NOT be saved — see the log', 'err'); return; }
+  say(r.recovered
+    ? `recovered ${r.recovered} post(s) the pod had and this machine did not`
+    : `nothing was missing — the pod indexed ${r.indexed} post(s), all of them already here`);
+  output(r, 'rebuild');
+});
+
+$('do-log').addEventListener('click', async () => {
+  if (showingFrom('log')) { closePanels(); return; }
+  const { json } = await api('/log');
+  output((json?.lines || []).slice(-60).join('\n') || 'nothing logged yet', 'log');
+});
+
+$('do-deadletter').addEventListener('click', async () => {
+  if (showingFrom('deadletter')) { closePanels(); return; }
+  const { json } = await api('/deadletter');
+  output(json?.items?.length ? json.items : 'no dead letters', 'deadletter');
+});
+
+// ---- lifecycle ----
+// None of these can be taken back by clicking again, so the button only opens
+// the matching warning in the markup; the second click is the one that acts.
+// Retire also wants the handle typed, because a misclick cannot produce it.
+
+const LIFECYCLE = {
+  'rotate-key': { path: '/rotate-key', title: 'Rotate the signing key', done: (r) => (r.changed ? 'rotated and republished' : 'no change — the key was already fresh') },
+  retire: { path: '/retire', title: 'Retire this identity', go: 'Retire it', danger: true, done: (r) => `retired ${r.deletedAt}: Delete delivered to ${r.inboxes} inbox(es)` },
+  move: { path: '/move', title: 'Transfer this account away', go: 'Transfer it', focus: 'move-target',
+    done: (r) => `transferred to ${r.target}: Move delivered to ${r.inboxes} inbox(es), unfollowed ${r.unfollowed}/${r.following}` },
+};
+let pending = null;
+
+const closeConfirm = () => closePanels();
+
+for (const btn of document.querySelectorAll('[data-confirm]')) {
+  btn.addEventListener('click', () => {
+    const what = btn.dataset.confirm;
+    // The same button again closes its question rather than re-asking it.
+    if (pending === what && solWindow.openId() === 'confirm-form') { closePanels(); return; }
+    closePanels();                    // including whatever else was open
+    pending = what;
+    const spec = LIFECYCLE[what];
+    $(`warn-${what}`).hidden = false;
+    solWindow.show('confirm-form', spec.title);
+    $('confirm-go').className = spec.danger ? 'danger' : 'primary';
+    $('confirm-go').textContent = spec.go || 'Confirm';
+    if (spec.focus) $(spec.focus).focus();
+    else if (what === 'retire') $('confirm-handle').focus();
+  });
+}
+
+// Offered from inside the retire warning: someone reading it has already said
+// what they want ("not this account, here, any more") and these are the two
+// answers that are not destruction. Switching panels rather than closing means
+// they do not have to go and find the button themselves.
+const openConfirm = (what) => {
+  closePanels();                 // or `show` toggles: same panel, different warning
+  document.querySelector(`[data-confirm="${what}"]`).click();
+};
+// Park lives on the status control now; from inside the retire warning it is
+// still one click — close the question and park.
+$('go-park').addEventListener('click', () => { closePanels(); setStatus(true); });
+$('go-move').addEventListener('click', () => openConfirm('move'));
+
+$('confirm-cancel').addEventListener('click', () => { closeConfirm(); say('nothing changed'); });
+
+$('confirm-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  if (!pending) return;
+  const what = pending;
+  const body = what === 'retire' ? { confirm: $('confirm-handle').value.trim() }
+    : what === 'move' ? { target: $('move-target').value.trim(), confirm: $('confirm-handle-move').value.trim() }
+      // Only where the field is shown (the browser build — see index.html).
+      // On the Node agent the row stays hidden and nothing is sent, which is
+      // what that agent expects.
+      : what === 'rotate-key' && !$('rotate-pw-row').hidden
+        ? { password: $('rotate-password').value }
+        : {};
+  if (what === 'move' && !body.target) { say('name the account to transfer to', 'err'); return; }
+  $('confirm-go').disabled = true;
+  say(`${what} — this talks to the pod and to other servers, so it takes a moment`);
+  const r = await write(LIFECYCLE[what].path, body, what);
+  $('confirm-go').disabled = false;
+  if (!r) return;                        // write() already said why
+  closeConfirm();
+  say(LIFECYCLE[what].done(r));
+  load();                                // mode, and whether it is retired, both changed
+});
+
+// ---- inbox ----
+// Only appears when there is enough waiting to be worth a decision. The agent
+// drains oldest-first regardless; this exists to let the owner say "do not
+// bother with that fortnight", which is not a call an agent should make on
+// someone's mail by itself.
+const INBOX_PROMPT_AT = 500;
+let dismissed = false;
+
+async function renderInbox() {
+  if (dismissed) return;
+  const { json: st } = await api('/status');
+  const box = st?.inbox;
+  const panel = $('pane-inbox');
+  if (!box || box.count < INBOX_PROMPT_AT) { panel.hidden = true; return; }
+  const mb = box.bytes >= 1048576
+    ? `${(box.bytes / 1048576).toFixed(1)} MB` : `${Math.round(box.bytes / 1024)} kB`;
+  const since = box.oldest ? new Date(box.oldest).toLocaleDateString() : 'unknown';
+  $('inbox-summary').textContent =
+    `${box.count.toLocaleString()} deliveries waiting (${mb}), the oldest from ${since}.`;
+  // One request each to read and delete, and the agent holds itself to 60 a
+  // minute, so the honest number is minutes not seconds.
+  $('inbox-warn').hidden = box.count < 2000;
+  $('inbox-warn').textContent = box.count >= 2000
+    ? `At 60 requests a minute this is roughly ${Math.ceil(box.count * 2 / 60)} minutes of `
+      + 'draining if you keep everything. Discarding the old content is much quicker.'
+    : '';
+  panel.hidden = false;
+}
+
+// The gateway, as a facts row under software: attach through a multi-user
+// front with this agent's own credential, detach back to the pod inbox. The
+// forms live in the floating window, like every other disclosure.

package/web/app/README.md

@@ -5,13 +5,13 @@ See `claude/plans/browser-agent.md` for the whole design and status.
 
 | file | what |
 |---|---|
-| `pod-auth.mjs` | The pod side of sign-in, browser-native: create a CSS account + pod, mint a client credential, and a DPoP-bound `fetch` that writes to the pod. The twin of `lib/account.mjs` + `vendor/idp-grant.cjs`. |
+| `pod-auth.mjs` | The pod side of sign-in, browser-native: create a CSS account + pod, mint a client credential, and a DPoP-bound `fetch` that writes to the pod. The twin of `lib/device/account.mjs` + `vendor/idp-grant.cjs`. |
 | `keystore.mjs` | WebCrypto RSA/Ed25519 key generation, and wrapping the keys under the account password (PBKDF2-SHA256 + AES-GCM-256). The pod holds only the wrapped form, so the pod's host cannot sign as you. |
 | `keys-browser.mjs` | Importing a keys record for signing, and finding one: this browser's opened copy in IndexedDB first, else the pod's. A wrapped one the browser has not opened yet raises `KeyPasswordNeeded`, which `boot.mjs` answers with the unlock pane — once per browser. |
 | `signup.mjs` | The `fedipod setup` flow, in the browser, up to publish: account, pod, credential, keys locked on the pod (owner-only ACL written *before* the key). Produces the credential/keys/config shapes the agent already reads. |
 | `shims/fedify-sig.mjs` | Browser stand-in for `@fedify/fedify/sig` (which will not bundle for a browser). `sign()` returns signed headers as data for the relay; `signRequest()` wraps it Fedify-shaped. Proven byte-identical to Fedify. |
 | `shims/node-crypto.mjs` | Browser stand-in for `node:crypto` — the small synchronous slice the agent uses, via crypto-browserify, plus native WebCrypto. |
-| `shims/safefetch.mjs` | Browser stand-in for `lib/safefetch.mjs`. Pinning and the private-address checks are unnecessary here (a browser closes DNS rebinding itself); the BYTE BUDGET is not, so `readCapped` streams and stops at the cap exactly as the Node one does. |
+| `shims/safefetch.mjs` | Browser stand-in for `lib/shared/safefetch.mjs`. Pinning and the private-address checks are unnecessary here (a browser closes DNS rebinding itself); the BYTE BUDGET is not, so `readCapped` streams and stops at the cap exactly as the Node one does. |
 | `dist/` | The bundled agent, built by `scripts/build-app.mjs`. Committed like `phanpy/dist`, regenerated on release. (Not present until the agent entry is built.) |
 
 Build: `node scripts/build-app.mjs`. Tests live in `claude/validation/`:
@@ -39,12 +39,12 @@ worker answers the data endpoints it calls. See
 
 | file | what |
 |---|---|
-| `admin-facade.mjs` | Answers the owner/manage endpoints (`/status`, `/config`, `/gateway`, `/alias`, `/rotate-key`, `/rebuild`, `/move`, `/retire`, `/inbox/prune`, `/deadletter`, `/blocks`, `/atproto*`, `/fediacct*`) over the browser agent, mirroring `lib/admin.mjs`. Personal only. |
-| `atproto-browser.mjs` | The Bluesky connection (`lib/atproto.mjs`) with a per-connection storage choice — IndexedDB (this browser) or owner-only pod state — plus pause. |
-| `fediacct-browser.mjs` | Connections to fediverse accounts on other servers (`lib/fediacct.mjs`): the OAuth dance, the same storage choice, and a best-effort server-side revoke on disconnect. |
+| `admin-facade.mjs` | Answers the owner/manage endpoints (`/status`, `/config`, `/gateway`, `/alias`, `/rotate-key`, `/rebuild`, `/move`, `/retire`, `/inbox/prune`, `/deadletter`, `/blocks`, `/atproto*`, `/fediacct*`) over the browser agent, mirroring `lib/device/admin.mjs`. Personal only. |
+| `atproto-browser.mjs` | The Bluesky connection (`lib/connections/atproto.mjs`) with a per-connection storage choice — IndexedDB (this browser) or owner-only pod state — plus pause. |
+| `fediacct-browser.mjs` | Connections to fediverse accounts on other servers (`lib/connections/fediacct.mjs`): the OAuth dance, the same storage choice, and a best-effort server-side revoke on disconnect. |
 | `idb-kv.mjs` | The per-origin IndexedDB key/value store the two connectors use for "on this device, never the pod" credentials. |
 
-`agent.mjs` also holds the single-active-agent **lease** (`lib/lease.mjs`) — a
+`agent.mjs` also holds the single-active-agent **lease** (`lib/core/lease.mjs`) — a
 second device runs read-only until it takes over — and starts the drain/mirrors
 only when it is the active holder.
 

package/web/app/admin-facade.mjs

@@ -14,10 +14,10 @@
 //
 // It mirrors lib/admin.mjs's handlers for those paths, calling the same agent
 // objects (store, publisher, intake, deliverer, remote) the Node agent does.
-import { publicHandle, webfingerHost } from '../../lib/wire.mjs';
+import { publicHandle, webfingerHost } from '../../lib/core/wire.mjs';
 import * as podInbox from '../../lib/pod/inbox.mjs';
-import { normalizeImport, IMPORT_KINDS } from '../../lib/import.mjs';
-import { hashPassword } from '../../lib/mastoapi.mjs';
+import { normalizeImport, IMPORT_KINDS } from '../../lib/connections/import.mjs';
+import { hashPassword } from '../../lib/client/masto/index.mjs';
 
 // The identity itself — changing any means a different actor, i.e. a new setup.
 const PERMANENT_CONFIG = ['handle', 'remotePod', 'issuer', 'root', 'kind'];