fedipod-server 0.10.0 → 0.12.1

package/web/app/site/admin/setup/setup.js

@@ -0,0 +1,297 @@
+// setup.js — the questions the CLI used to ask, asked here instead. Every
+// request is relative, so the page behaves identically whether it was reached
+// 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. `$`, `BASE`, `api` and
+// `postJson` come from ../common.js, loaded first.
+
+// 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; };
+
+let state = null;
+
+// ---- what the agent needs from us ----
+
+async function start() {
+  const { json } = await api('/setup/state');
+  state = json || {};
+  if (state.phase === 'running' || state.phase === 'done' || state.phase === 'error') return watchRun();
+  if (state.configured) return paneConfigured();
+  return paneForm();
+}
+
+function paneConfigured() {
+  strap('already set up');
+  $('configured-address').textContent = state.handle ? `@${state.handle}` : '';
+  $('configured-client').hidden = state.kind === 'group';
+  show('pane-configured');
+  // The address needs the pod host, which only /config knows.
+  api('/config').then(({ json }) => {
+    if (json?.address) $('configured-address').textContent = json.address;
+  });
+}
+
+// ---- the form ----
+
+function paneForm() {
+  // Nothing is asked in a terminal any more — every question is on this page.
+  // A fresh run needs no strap at all; a resumed one has something to say.
+  strap(state.resumable ? 'finishing a setup that did not complete' : '');
+  if (state.handle) $('handle').value = state.handle;
+  // A signup page's carry-over: the form opens with its answers already in.
+  const fr = state.firstRun;
+  if (fr && !state.resumable) {
+    if (fr.kind) $('form').elements.kind.value = fr.kind;
+    if (fr.handle) $('handle').value = fr.handle;
+    if (fr.pod) { $('form').elements.mode.value = 'existing'; $('pod').value = fr.pod; }
+    // A gateway-arranged signup names its own provider; give the dropdown that
+    // choice too, so the carried-over answer survives the narrower control.
+    if (fr.issuer) {
+      $('issuer').value = fr.issuer;
+      const sel = $('issuer-new');
+      if (![...sel.options].some(o => o.value === fr.issuer)) {
+        const o = document.createElement('option');
+        o.value = fr.issuer;
+        o.textContent = host(fr.issuer);
+        sel.appendChild(o);
+      }
+      sel.value = fr.issuer;
+    }
+    if (fr.gatewayHost) strap(`finishing your ${fr.gatewayHost} signup — enter your Solid account details`);
+  }
+  // Resuming: the account exists and the credential is minted. Asking for a
+  // password again would mint a second one and orphan the first, which cannot
+  // be recovered.
+  // Set both ways, not just hidden-when-resuming: re-entering credentials
+  // re-renders this in the other mode, and a one-way hide would strand the
+  // account and pod fields off-screen. Resuming settles the account and the
+  // credential, so those fields go; a fresh run shows them.
+  $('row-reenter').hidden = !state.resumable;
+  $('fs-pod').hidden = state.resumable;
+  // The password field also goes when AP_PASSWORD supplied it in the environment.
+  $('row-password').hidden = state.resumable || state.passwordSupplied;
+  $('submit').textContent = state.resumable ? 'Finish setting up' : 'Create it';
+  if (state.resumable) $('form-reenter').onclick = reEnter;   // the escape from a wrong credential
+  show('pane-form');
+  // The markup's autofocus was set while this pane was still hidden, so it
+  // never fired — move focus to the first field now that the pane is showing.
+  $('handle').focus();
+  for (const el of $('form').elements) {
+    el.addEventListener('input', onEdit);
+    el.addEventListener('change', onEdit);
+  }
+  $('form').addEventListener('submit', onSubmit);
+  onEdit();
+}
+
+function answers() {
+  const f = $('form').elements;
+  const kind = f.kind.value;
+  const mode = state.resumable ? 'existing' : f.mode.value;
+  const a = {
+    kind,
+    mode,
+    handle: f.handle.value.trim(),
+    issuer: (mode === 'new' ? f.issuerNew.value : f.issuer.value).trim(),
+    email: f.email.value.trim(),
+  };
+  if (mode === 'new') a.podName = f.podName.value.trim() || a.handle;
+  else a.pod = f.pod.value.trim();
+  if (!state.resumable && !state.passwordSupplied) a.password = f.password.value;
+  return a;
+}
+
+// Every warning the CLI printed before it asked "create pod and fediverse
+// account?", in the same words, as you type.
+const NOTES = {
+  'pod-is-a-path': (a) =>
+    `This pod is a path on ${host(a.pod)}, not the root of its own host. WebFinger is `
+    + 'answered only at a host root, which this pod cannot write to, so other servers '
+    + 'will not find this address. Posting and reading still work; being discovered does not.',
+};
+const REFUSALS = {
+  'group-needs-host-root': () =>
+    'A group needs a pod at the root of its own host, or nobody could ever find it. '
+    + 'Give the group a pod of its own, or set this up as a person.',
+};
+const host = (u) => { try { return new URL(u).host; } catch { return u; } };
+
+let editTimer = null;
+function onEdit() {
+  const mode = state.resumable ? 'existing' : $('form').elements.mode.value;
+  $('row-podname').hidden = mode !== 'new';
+  $('row-pod').hidden = mode === 'new';
+  $('row-issuer-new').hidden = mode !== 'new';
+  $('row-issuer-existing').hidden = mode === 'new';
+  clearTimeout(editTimer);
+  editTimer = setTimeout(preview, 150);
+}
+
+async function preview() {
+  const a = answers();
+  $('preview-notes').textContent = '';
+  if (!a.handle || (a.mode === 'existing' && !a.pod)) { $('preview').textContent = '…'; return; }
+  if (state.resumable) { $('preview').textContent = `@${a.handle}@…`; return; }
+  const { json } = await postJson('/setup/check', a);
+  if (!json) return;
+  $('preview').textContent = json.address || '…';
+  const notes = $('preview-notes');
+  for (const w of json.warnings || []) {
+    const p = document.createElement('p');
+    p.className = 'warn';
+    p.textContent = NOTES[w] ? NOTES[w](a) : w;
+    notes.appendChild(p);
+  }
+  if (json.refusal) {
+    const p = document.createElement('p');
+    p.className = 'err';
+    p.textContent = REFUSALS[json.refusal] ? REFUSALS[json.refusal]() : json.refusal;
+    notes.appendChild(p);
+  }
+  $('submit').disabled = !!json.refusal;
+}
+
+async function onSubmit(ev) {
+  ev.preventDefault();
+  $('form-error').textContent = '';
+  $('submit').disabled = true;
+  const { status, json } = await postJson('/setup', answers());
+  if (status !== 202) {
+    $('submit').disabled = false;
+    $('form-error').textContent = json?.error || `setup refused (HTTP ${status})`;
+    return;
+  }
+  watchRun();
+}
+
+// ---- the run ----
+
+const LABELS = {
+  account: 'Creating the account and pod',
+  credential: 'Minting a credential for this machine',
+  bootstrap: 'Provisioning the pod',
+  connect: 'Connecting',
+  publish: 'Publishing the actor',
+  verify: 'Checking the world can see it',
+};
+const MARKS = { waiting: '·', running: '⟳', ok: '✓', skipped: '–', error: '✗' };
+
+async function watchRun() {
+  show('pane-run');
+  strap('setting up');
+  const { json: run } = await api('/setup/progress');
+  if (!run) return;
+  renderRun(run);
+  if (run.phase === 'running') return setTimeout(watchRun, 700);
+  if (run.phase === 'done') return paneDone(run.result);
+  $('run-title').textContent = 'Setup stopped';
+  $('run-error').textContent = run.error || 'unknown error';
+  $('run-again').hidden = false;
+  $('run-again').onclick = async () => {
+    // Re-read the state: a run that got as far as the credential resumes from
+    // there rather than minting a second one.
+    const { json } = await api('/setup/state');
+    state = json || state;
+    paneForm();
+  };
+  // A failure past the credential (a wrong pod answering 401 to the first
+  // write) leaves a credential that "Try again" can only re-use. Offer to
+  // discard it and re-enter the account and pod — only when there is one.
+  const { json: st } = await api('/setup/state');
+  const reenter = $('run-reenter');
+  reenter.hidden = !st?.hasCredential;
+  reenter.onclick = reEnter;
+}
+
+// Discard the saved credential (server confirms, then the full form returns).
+// Destructive and unrecoverable — a minted credential is shown once — so it
+// asks first.
+async function reEnter() {
+  if (!confirm('Discard the saved account credential and enter the account and pod again?\n\n'
+    + 'The old credential is left on your account — revoke it from the account dashboard if you want it gone.')) return;
+  const { status, json } = await postJson('/setup/reset', {});
+  if (status !== 200) {
+    const box = $('pane-form').hidden ? $('run-error') : $('form-error');
+    box.textContent = json?.error || `could not reset (HTTP ${status})`;
+    return;
+  }
+  const { json: st } = await api('/setup/state');
+  state = st || {};
+  paneForm();
+}
+
+function renderRun(run) {
+  const ul = $('run-steps');
+  ul.textContent = '';
+  for (const s of run.steps) {
+    const li = document.createElement('li');
+    const mark = document.createElement('span');
+    mark.className = 'state';
+    mark.textContent = MARKS[s.state] || '·';
+    // The glyph is the whole of what says how a step went, and `⟳` read aloud
+    // is not a word. Naming it leaves the visual result exactly as it was.
+    mark.setAttribute('aria-label', s.state || 'waiting');
+    li.appendChild(mark);
+    li.appendChild(document.createTextNode(LABELS[s.key] || s.key));
+    if (s.note) {
+      const note = document.createElement('div');
+      note.className = 'note';
+      note.textContent = s.note;
+      li.appendChild(note);
+    }
+    ul.appendChild(li);
+  }
+  // One polite line rather than a live region over the whole list: the list is
+  // rebuilt from scratch on every poll, and announcing all six steps twice a
+  // second is not progress, it is noise. Only the step actually moving is said.
+  const now = run.steps.find(s => s.state === 'running')
+    || [...run.steps].reverse().find(s => s.state && s.state !== 'waiting');
+  const say = now ? `${LABELS[now.key] || now.key}: ${now.state}` : '';
+  const line = $('run-say');
+  if (line && line.textContent !== say) line.textContent = say;
+}
+
+function paneDone(result) {
+  // Straight to the thing you set it up FOR. A group has no client of its own,
+  // so it goes to its console instead. Warnings are the exception: an address
+  // nobody can resolve, or documents a stranger cannot read, are worth stopping
+  // for — the client would just look empty and not say why.
+  const stop = !result?.resolvable || result?.unreachable?.length;
+  if (!stop) {
+    location.href = result?.kind === 'group' ? '/admin/' : '/admin/client/';
+    return;
+  }
+  strap('set up');
+  show('pane-done');
+  $('done-address').textContent = result?.address || `@${result?.handle} — no resolvable address`;
+  const notes = [];
+  if (!result?.resolvable) {
+    notes.push(`${result?.pod} is not the root of its own host, so this address cannot be `
+      + 'discovered by other servers. Posting and reading still work.');
+  }
+  if (result?.unreachable?.length) {
+    notes.push(`Not readable without credentials yet: ${result.unreachable.join(', ')}. `
+      + 'Other servers cannot fetch this actor until that clears.');
+  }
+  $('done-note').className = notes.length ? 'warn' : '';
+  $('done-note').textContent = notes.join(' ');
+
+  const links = $('done-links');
+  links.textContent = '';
+  const add = (href, text) => {
+    if (links.hasChildNodes()) links.appendChild(document.createTextNode(' · '));
+    const a = document.createElement('a');
+    a.href = href;
+    a.textContent = text;
+    links.appendChild(a);
+  };
+  if (result?.kind !== 'group') add('/', 'Open the client');
+  add('/admin/', 'Edit the record');
+}
+
+start();

package/web/app/site/admin/tokens.css

@@ -0,0 +1,56 @@
+/* tokens.css — the FediPod design tokens: the front page's palette
+   (web/app/index.html), so the front, the record page, the bar and the client
+   shell are one visual system. The front is the reference; these values mirror
+   its :root. Declared under every name the pages already use — plus aliases
+   (--ink=--fg, --muted=--sub, --link=--accent, --field-edge=--field-border,
+   --danger=--err, --ring=--focus) — so a page only has to drop its own :root
+   colours and inherit these. */
+:root {
+  color-scheme: light dark;
+
+  /* ground + text */
+  --bg: #ffffff; --fg: #1a1a1a; --ink: #1a1a1a;
+  --surface: #f0f2f5;          /* the page ground behind cards */
+  --raised: #ffffff;           /* cards, the rail, the bar band, dialogs */
+
+  /* structure + action */
+  --heading: #123f74; --accent: #12467e; --link: #12467e;
+  --sub: #565656; --muted: #565656; --line: #b0b0b0;
+
+  /* fields */
+  --field-bg: #ececec; --field-bg-hover: #e2e4e8; --field-hover: #e2e4e8;
+  --field-text: #141414; --field-edge: #6f6f6f; --field-border: #6f6f6f;
+
+  /* buttons — filled, muted forest green (like the front) */
+  --btn: #3a5f43; --btn-hover: #30503a; --btn-text: #ffffff;
+  --btn-bg: #ececec; --btn-bg-hover: #e2e4e8; --btn-bg-active: #d8dade; --btn-edge: #6f6f6f;
+
+  /* status + focus */
+  --err: #b00020; --danger: #b00020; --warn: #8a4b00; --ok: #1f7a3d;
+  --focus: #12467e; --ring: #12467e;
+
+  --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23124f8a' stroke-width='1.6' stroke-linecap='round'/></svg>");
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #191919; --fg: #f3f3f3; --ink: #f3f3f3;
+    --surface: #18191a; --raised: #242526;
+
+    --heading: #8fc2f2; --accent: #8fc2f2; --link: #8fc2f2;
+    --sub: #d2d2d2; --muted: #d2d2d2; --line: #6d6d6d;
+
+    --field-bg: #474747; --field-bg-hover: #515151; --field-hover: #515151;
+    --field-text: #f5f5f5; --field-edge: #9aa0a6; --field-border: #9aa0a6;
+
+    /* a touch brighter on the dark page so white text and the fill-vs-page edge
+       both clear their contrast floors — still muted (kept in sync with the front) */
+    --btn: #4a7a54; --btn-hover: #3f6a49; --btn-text: #ffffff;
+    --btn-bg: #474747; --btn-bg-hover: #515151; --btn-bg-active: #5b5b5b; --btn-edge: #9aa0a6;
+
+    --err: #ff9b9b; --danger: #ff9b9b; --warn: #ffb366; --ok: #7fd39a;
+    --focus: #8fc2f2; --ring: #8fc2f2;
+
+    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23bcd8f0' stroke-width='1.6' stroke-linecap='round'/></svg>");
+  }
+}

package/web/app/site/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/site/admin/window.css

@@ -0,0 +1,55 @@
+/* window.css — the floating panel every page of ours puts a form in.
+   Shared like bar.css, so the three surfaces cannot drift apart. */
+
+/* Fixed, so it floats over the page rather than pushing it about — which is
+   what the accordions did, moving the line you were reading every time one
+   opened. Resizing is the browser's own grip: `resize` needs `overflow` set to
+   anything but visible, which is also what keeps a long form inside the frame. */
+#win {
+  position: fixed; z-index: 40;
+  top: 5rem; left: 50%; transform: translateX(-50%);
+  width: min(46rem, calc(100vw - 2rem));
+  /* Tall enough for what is in it and no taller: a fixed height made a short
+     panel roomy and a long one scroll for no reason. `auto` up to a cap, so it
+     only ever scrolls when the content genuinely will not fit the screen — and
+     the moment you drag the corner, that inline height wins over both. */
+  height: auto;
+  min-width: 18rem; min-height: 8rem;
+  max-width: 100vw; max-height: calc(100vh - 7rem);
+  resize: both; overflow: hidden;
+  display: flex; flex-direction: column;
+  /* Raised, like the bar: it sits ON the page, so it takes the same colour the
+     bar does rather than the page's own. The shadow lifts it; the colour says
+     which layer it belongs to. */
+  background: var(--raised); color: CanvasText;
+  border: 1px solid var(--btn-edge); border-radius: .5rem;
+  box-shadow: 0 .6rem 2rem #0004;
+}
+/* Dragged by the bar, so the grab area is obvious and a text selection inside
+   the form never moves the window. */
+/* Its own title bar keeps a rule: this one IS two surfaces meeting inside a
+   single small box, where a tone change alone is too quiet to read as a grab
+   handle. Different problem from the page bar, different answer. */
+#win-bar {
+  flex: 0 0 auto; display: flex; align-items: baseline; gap: .6rem;
+  padding: .45rem .7rem; cursor: move; user-select: none;
+  border-bottom: 1px solid var(--btn-edge); border-radius: .5rem .5rem 0 0;
+  background: var(--surface);
+}
+#win-title { flex: 1 1 auto; font-weight: 600; color: var(--heading); }
+/* 24x24 is the 2.5.8 minimum; at .1rem of vertical padding this came out
+   21.6px tall, which is a small target for the one control that dismisses the
+   thing covering your page. Same glyph, same place, bigger hit area. */
+#win-close {
+  font: inherit; line-height: 1; cursor: pointer;
+  min-width: 24px; min-height: 24px; padding: .2rem .5rem;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 0; background: none; color: var(--link);
+}
+/* The window scrolls, never the page — same rule the rest of the app follows. */
+#win-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .2rem 1rem 1rem; }
+#win-body > * { margin-top: .6rem; }
+#win-body pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
+  font-size: .9rem; }
+/* Dragging with the pointer over the frame would otherwise select text inside it. */
+body.dragging { user-select: none; }