npm - @makerclay/core - Versions diffs - 1.0.0 - Mend

@makerclay/core 1.0.0

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

Files changed (91) hide show

package/LICENSE +221 -0
package/README.md +82 -0
package/package.json +52 -0
package/src/admin/listing.js +149 -0
package/src/admin/routes.js +362 -0
package/src/attic.js +168 -0
package/src/auth/can.js +79 -0
package/src/auth/csrf.js +74 -0
package/src/auth/none.js +24 -0
package/src/auth/password.js +281 -0
package/src/auth/passwords.js +79 -0
package/src/auth/rate-limit.js +66 -0
package/src/auth/sessions.js +86 -0
package/src/auth/token-lanes.js +72 -0
package/src/boot.js +120 -0
package/src/client.js +99 -0
package/src/collections/index.js +397 -0
package/src/collections/routes.js +166 -0
package/src/create-host.js +351 -0
package/src/derived/data-extractor.js +22 -0
package/src/derived/index.js +121 -0
package/src/documents/format-html.js +313 -0
package/src/documents/replace.js +257 -0
package/src/documents/root-attrs.js +171 -0
package/src/documents/serve.js +137 -0
package/src/documents/stale.js +20 -0
package/src/index.js +12 -0
package/src/inspect.js +136 -0
package/src/json-errors.js +59 -0
package/src/livesync.js +75 -0
package/src/nodes/identity.js +14 -0
package/src/nodes/names.js +57 -0
package/src/nodes/ops.js +613 -0
package/src/nodes/scanner.js +321 -0
package/src/nodes/store.js +111 -0
package/src/pages.js +166 -0
package/src/paths.js +302 -0
package/src/recovery/overlay.js +327 -0
package/src/recovery/replay.js +236 -0
package/src/recovery-ui.js +185 -0
package/src/recovery.js +30 -0
package/src/requests.js +73 -0
package/src/routes/meta.js +62 -0
package/src/routes/read.js +105 -0
package/src/routes/save.js +102 -0
package/src/routes/sync.js +118 -0
package/src/routes/upload.js +128 -0
package/src/share/index.js +207 -0
package/src/share/save-tokens.js +65 -0
package/src/spec/codes.js +42 -0
package/src/spec/meta.js +52 -0
package/src/spec/wire.js +115 -0
package/src/store/index.js +29 -0
package/src/store/migrations/001-init.sql +114 -0
package/src/store/sqlite.js +540 -0
package/src/templates.js +50 -0
package/src/tenants/index.js +355 -0
package/src/tenants/isolation.js +91 -0
package/src/tenants/routes.js +131 -0
package/src/ui.js +95 -0
package/src/util/cookies.js +26 -0
package/src/util/express.js +8 -0
package/src/util/fsx.js +205 -0
package/src/util/id.js +37 -0
package/src/util/lockfile.js +52 -0
package/src/util/locks.js +35 -0
package/src/util/multipart.js +33 -0
package/src/versions/files.js +307 -0
package/src/versions/index.js +16 -0
package/src/versions/naming.js +172 -0
package/src/versions/routes.js +91 -0
package/src/wire-compat.js +61 -0
package/ui/app.css +164 -0
package/ui/attic.html +198 -0
package/ui/dashboard.html +456 -0
package/ui/editor.html +156 -0
package/ui/error.html +18 -0
package/ui/login.html +58 -0
package/ui/records.html +173 -0
package/ui/recovery.html +152 -0
package/ui/setup.html +61 -0
package/ui/share-qr.html +44 -0
package/ui/templates/blank.html +16 -0
package/ui/templates/devlog.html +71 -0
package/ui/templates/hackable-dashboard.html +145 -0
package/ui/templates/kanban.html +85 -0
package/ui/templates/landing.html +108 -0
package/ui/templates/writer.html +50 -0
package/ui/tenants.html +172 -0
package/ui/trash.html +134 -0
package/ui/versions.html +114 -0

package/ui/templates/hackable-dashboard.html ADDED Viewed

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>My files</title>
+<script src="/_/clay.js"></script>
+<style>
+  /* This is your file. Change any of it, save, and it stays changed. */
+  :root { --bg:#fbfaf8; --panel:#fff; --ink:#1c1b19; --muted:#6b6862; --line:#e3dfd8; --accent:#9a5b28;
+          color-scheme: light dark; }
+  @media (prefers-color-scheme: dark) {
+    :root { --bg:#171614; --panel:#1f1e1b; --ink:#ece8e1; --muted:#9b968d; --line:#322f2a; --accent:#d98b4a; }
+  }
+  * { box-sizing: border-box; }
+  body { margin:0; background:var(--bg); color:var(--ink);
+         font:15px/1.55 ui-sans-serif, system-ui, sans-serif; }
+  .wrap { max-width:56rem; margin:0 auto; padding:2.5rem 1.25rem 5rem; }
+  h1 { font-size:1.5rem; margin:0 0 .2rem; }
+  .tagline { color:var(--muted); margin:0 0 2rem; }
+  h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:2rem 0 .6rem; }
+  ul { list-style:none; margin:0; padding:0; }
+  li { display:flex; gap:.6rem; align-items:baseline; padding:.35rem .5rem; border-bottom:1px solid var(--line); }
+  li a { color:var(--ink); text-decoration:none; flex:1; }
+  li a:hover { color:var(--accent); }
+  .when { color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums; }
+  button { font:inherit; font-size:.8rem; background:none; border:1px solid var(--line); color:var(--muted);
+           border-radius:6px; padding:.1rem .45rem; cursor:pointer; }
+  button:hover { color:var(--ink); border-color:var(--muted); }
+  .empty { color:var(--muted); padding:1.5rem .5rem; }
+  html[editmode="false"] button { display:none; }
+  /* Two layouts. `body[layout="grid"]` is saved into the file, so the one you
+     picked is the one that loads next time, on any machine. */
+  body[layout="grid"] ul { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.4rem; }
+  body[layout="grid"] li { border:1px solid var(--line); border-radius:8px; background:var(--panel); }
+  body[layout="grid"] .when { display:none; }
+</style>
+</head>
+<body layout="list">
+<div class="wrap">
+  <h1 contenteditable>My files</h1>
+  <p class="tagline" contenteditable>This page is one of them. Open it in the editor and it
+  changes shape.</p>
+  <h2>Pinned</h2>
+  <!-- Pinned rows are ordinary elements, so they ARE saved into this file. -->
+  <ul id="pinned"></ul>
+  <p class="empty" id="no-pins">Nothing pinned yet. Pin something below.</p>
+  <h2>Everything <button onclick="toggleLayout()">layout</button></h2>
+  <!-- The live listing is built inside here at runtime, inside a `no-save`
+       island, so a listing that was true thirty seconds ago never gets written
+       into this file as if it were content. -->
+  <div id="listing"><p class="empty">Reading…</p></div>
+</div>
+<script>
+  // The same /_/nodes API the shipped dashboard uses, called with your own
+  // session. If this page can read it, so can anything else you write.
+  async function load() {
+    const listing = document.getElementById('listing');
+    let body;
+    try {
+      const res = await fetch('/_/nodes', { headers: { Accept: 'application/json' } });
+      body = await res.json();
+      if (!res.ok) throw new Error(body.msg || res.statusText);
+    } catch (problem) {
+      listing.replaceChildren(say('Could not read your files: ' + problem.message
+        + '. Sign in as the owner and reload.'));
+      return;
+    }
+    const island = document.createElement('div');
+    island.setAttribute('clay', 'no-save');
+    const list = document.createElement('ul');
+    const pinned = new Set([...document.querySelectorAll('#pinned li')].map((li) => li.dataset.path));
+    for (const entry of body.entries) {
+      if (pinned.has(entry.path)) continue;
+      list.append(row(entry, 'Pin', () => pin(entry)));
+    }
+    island.append(list.children.length ? list : say('This folder is empty.'));
+    listing.replaceChildren(island);
+    drawPins();
+  }
+  function row(entry, label, action) {
+    const li = document.createElement('li');
+    li.dataset.path = entry.path;
+    const link = document.createElement('a');
+    link.href = '/' + entry.path.split('/').map(encodeURIComponent).join('/');
+    link.textContent = entry.name;
+    const when = document.createElement('span');
+    when.className = 'when';
+    when.textContent = entry.modified ? new Date(entry.modified).toLocaleDateString() : '';
+    const button = document.createElement('button');
+    button.textContent = label;
+    button.addEventListener('click', action);
+    li.append(link, when, button);
+    return li;
+  }
+  function say(text) {
+    const p = document.createElement('p');
+    p.className = 'empty';
+    p.textContent = text;
+    return p;
+  }
+  // A pinned row is written into THIS document. Save, and it is still there
+  // tomorrow, in the file, with no database anywhere holding your layout.
+  function pin(entry) {
+    const li = row(entry, 'Unpin', null);
+    li.querySelector('button').setAttribute('onclick', 'unpin(this)');
+    document.getElementById('pinned').append(li);
+    load();
+  }
+  function unpin(button) {
+    button.closest('li').remove();
+    drawPins();
+    load();
+  }
+  function drawPins() {
+    const any = document.querySelectorAll('#pinned li').length > 0;
+    document.getElementById('no-pins').hidden = any;
+  }
+  function toggleLayout() {
+    const body = document.body;
+    body.setAttribute('layout', body.getAttribute('layout') === 'grid' ? 'list' : 'grid');
+  }
+  load();
+</script>
+</body>
+</html>

package/ui/templates/kanban.html ADDED Viewed

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Board</title>
+  <script src="/_/clay.js?plugins=sortable,undo"></script>
+  <style>
+    :root { color-scheme: light dark; --ink: #1b1b1f; --paper: #f6f6f4; --card: #fff;
+            --line: #e1e0dc; --muted: #74736e; --accent: #b0562a; }
+    @media (prefers-color-scheme: dark) {
+      :root { --ink: #e9e8e4; --paper: #131315; --card: #1c1c20; --line: #2c2c31; --muted: #98968f; --accent: #d98b4a; }
+    }
+    * { box-sizing: border-box; }
+    body { font: 15px/1.5 system-ui, sans-serif; color: var(--ink); background: var(--paper);
+           margin: 0; padding: 2rem 1.5rem 4rem; }
+    h1 { font-size: 1.4rem; margin: 0 0 1.5rem; }
+    .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; align-items: start; }
+    .column { background: color-mix(in oklab, var(--card) 55%, transparent);
+              border: 1px solid var(--line); border-radius: 10px; padding: .75rem; }
+    .column > h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
+                   color: var(--muted); margin: 0 0 .7rem; }
+    .cards { min-height: 2.5rem; display: flex; flex-direction: column; gap: .5rem; }
+    .card { background: var(--card); border: 1px solid var(--line); border-radius: 7px;
+            padding: .6rem .7rem; cursor: grab; }
+    .card:focus-within { border-color: var(--accent); }
+    button { font: inherit; background: none; border: 1px dashed var(--line); color: var(--muted);
+             border-radius: 7px; padding: .45rem; width: 100%; margin-top: .5rem; cursor: pointer; }
+    button:hover { color: var(--ink); border-color: var(--muted); }
+    /* clayjs stamps editmode="true|false" on <html>, so a reader never sees the
+       affordances they cannot use. */
+    html[editmode="false"] button { display: none; }
+    html[editmode="false"] .card { cursor: default; }
+  </style>
+</head>
+<body>
+<h1 contenteditable>What I am working on</h1>
+<div class="board">
+  <section class="column">
+    <h2 contenteditable>To do</h2>
+    <div class="cards" sortable="board">
+      <div class="card" contenteditable>Write the thing down before it escapes</div>
+      <div class="card" contenteditable>Drag me into another column</div>
+    </div>
+    <button onclick="addCard(this)">+ Add a card</button>
+  </section>
+  <section class="column">
+    <h2 contenteditable>Doing</h2>
+    <div class="cards" sortable="board">
+      <div class="card" contenteditable>Exactly one thing, ideally</div>
+    </div>
+    <button onclick="addCard(this)">+ Add a card</button>
+  </section>
+  <section class="column">
+    <h2 contenteditable>Done</h2>
+    <div class="cards" sortable="board"></div>
+    <button onclick="addCard(this)">+ Add a card</button>
+  </section>
+</div>
+<script>
+  function addCard(button) {
+    const card = document.createElement('div');
+    card.className = 'card';
+    card.setAttribute('contenteditable', '');
+    card.textContent = 'New card';
+    button.previousElementSibling.appendChild(card);
+    card.focus();
+    getSelection().selectAllChildren(card);
+  }
+  // An emptied card is a deleted card, which is less fiddly than a delete button
+  // on every one of them.
+  document.addEventListener('blur', (event) => {
+    const card = event.target.closest?.('.card');
+    if (card && !card.textContent.trim()) card.remove();
+  }, true);
+</script>
+</body>
+</html>

package/ui/templates/landing.html ADDED Viewed

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>A thing worth telling people about</title>
+  <script src="/_/clay.js"></script>
+  <style>
+    :root { color-scheme: light dark; --ink: #17171a; --paper: #fdfcfa; --line: #e4e3df;
+            --muted: #6f6e69; --accent: #b0562a; }
+    @media (prefers-color-scheme: dark) {
+      :root { --ink: #ecebe7; --paper: #111113; --line: #2a2a2f; --muted: #9a988f; --accent: #d98b4a; }
+    }
+    * { box-sizing: border-box; }
+    body { font: 17px/1.65 system-ui, sans-serif; color: var(--ink); background: var(--paper);
+           margin: 0; padding: 0 1.25rem 6rem; }
+    .wrap { max-width: 44rem; margin: 0 auto; }
+    .hero { padding: 6rem 0 4rem; }
+    .hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.1; margin: 0 0 1rem; letter-spacing: -.02em; }
+    .hero p { font-size: 1.2rem; color: var(--muted); margin: 0 0 2rem; max-width: 30rem; }
+    .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+                gap: 2rem; padding: 3rem 0; border-top: 1px solid var(--line); }
+    .features h3 { margin: 0 0 .4rem; font-size: 1rem; }
+    .features p { margin: 0; color: var(--muted); font-size: .95rem; }
+    form { border-top: 1px solid var(--line); padding-top: 3rem; display: flex; gap: .6rem; flex-wrap: wrap; }
+    input { font: inherit; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px;
+            background: var(--paper); color: var(--ink); flex: 1 1 15rem; }
+    input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+    button { font: inherit; padding: .7rem 1.3rem; border: none; border-radius: 8px;
+             background: var(--accent); color: #fff; cursor: pointer; }
+    .said { margin-top: .9rem; color: var(--muted); font-size: .93rem; min-height: 1.2em; }
+    .setup { background: color-mix(in oklab, var(--accent) 12%, transparent);
+             border: 1px solid var(--accent); border-radius: 8px; padding: .9rem 1rem;
+             font-size: .92rem; margin-top: 1rem; }
+    html[editmode="false"] .setup { display: none; }
+  </style>
+</head>
+<body>
+<div class="wrap">
+  <section class="hero">
+    <h1 contenteditable>A thing worth telling people about</h1>
+    <p contenteditable>One sentence on what it is and who it is for. Resist the
+    urge to write three.</p>
+  </section>
+  <section class="features">
+    <div>
+      <h3 contenteditable>It is one file</h3>
+      <p contenteditable>Everything on this page lives in the HTML you are reading.</p>
+    </div>
+    <div>
+      <h3 contenteditable>It edits itself</h3>
+      <p contenteditable>Sign in, click anything, type. Save when you like it.</p>
+    </div>
+    <div>
+      <h3 contenteditable>It goes with you</h3>
+      <p contenteditable>Download it and it still works, on any machine, offline.</p>
+    </div>
+  </section>
+  <form onsubmit="return signUp(event)">
+    <input name="email" type="email" placeholder="you@example.com" required aria-label="Email">
+    <button type="submit" contenteditable>Keep me posted</button>
+  </form>
+  <p class="said" id="said"></p>
+  <p class="setup">
+    To collect these: press <b>Collect</b> next to this file on your dashboard,
+    then copy the two attributes it gives you onto the <code>&lt;form&gt;</code>
+    above. Until you do, the form says so instead of pretending to work.
+  </p>
+</div>
+<script>
+  // The collection slug and submit token are ATTRIBUTES on the form, so they
+  // travel with the file and survive a download. The token only permits posting
+  // a record: it reads nothing back.
+  async function signUp(event) {
+    event.preventDefault();
+    const form = event.target;
+    const said = document.getElementById('said');
+    const slug = form.getAttribute('collection');
+    const token = form.getAttribute('collection-token');
+    if (!slug || !token) {
+      said.textContent = 'This form has no collection yet, so nothing was sent.';
+      return false;
+    }
+    try {
+      const res = await fetch('/_/collection/' + slug + '/records', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, data: { email: form.email.value } }),
+      });
+      if (!res.ok) throw new Error((await res.json().catch(() => ({}))).msg || 'Something went wrong.');
+      said.textContent = 'Got it. Thank you.';
+      form.reset();
+    } catch (problem) {
+      said.textContent = problem.message;
+    }
+    return false;
+  }
+</script>
+</body>
+</html>

package/ui/templates/writer.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Untitled</title>
+  <script src="/_/clay.js"></script>
+  <style>
+    :root { color-scheme: light dark; --ink: #1c1b19; --paper: #fbfaf7; --muted: #6d6a63; }
+    @media (prefers-color-scheme: dark) { :root { --ink: #e8e6e1; --paper: #17171a; --muted: #97948d; } }
+    body {
+      font: 19px/1.7 Georgia, "Iowan Old Style", serif;
+      color: var(--ink); background: var(--paper);
+      max-width: 36rem; margin: 0 auto; padding: 5rem 1.25rem 8rem;
+    }
+    h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .35em; }
+    .byline { color: var(--muted); font-size: .95rem; margin: 0 0 3rem; }
+    p { margin: 0 0 1.4em; }
+    [contenteditable]:focus { outline: 2px solid color-mix(in oklab, var(--ink) 25%, transparent); outline-offset: .4rem; }
+    footer { position: fixed; bottom: 0; left: 0; right: 0; padding: .6rem 1rem;
+             font: 13px/1 system-ui, sans-serif; color: var(--muted); text-align: right; }
+  </style>
+</head>
+<body>
+<h1 contenteditable>An untitled piece</h1>
+<p class="byline" contenteditable>by someone, one afternoon</p>
+<article contenteditable>
+  <p>Start typing. Everything you write is stored in this file, in the paragraphs
+  you are reading, so there is no database to lose and nothing to export.</p>
+  <p>Press Enter for a new paragraph. Save when you are done.</p>
+</article>
+<footer><span id="count"></span></footer>
+<script>
+  // Derived, never stored: a word count saved into the file would be one more
+  // thing that can disagree with the words.
+  const recount = () => {
+    const words = (document.querySelector('article').innerText.match(/\S+/g) || []).length;
+    document.getElementById('count').textContent = words + (words === 1 ? ' word' : ' words');
+  };
+  document.addEventListener('input', recount);
+  recount();
+</script>
+</body>
+</html>

package/ui/tenants.html ADDED Viewed

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}}</title>
+<link rel="stylesheet" href="/_/ui.css">
+<style>
+  .state { font-size: .82rem; padding: .1rem .45rem; border-radius: 4px; border: 1px solid var(--line); }
+  .state.waiting { color: var(--accent); border-color: var(--accent); }
+  .state.suspended { color: var(--danger); border-color: var(--danger); }
+  .usage { color: var(--muted); font-size: .86rem; white-space: nowrap; }
+  .code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; letter-spacing: .04em; }
+</style>
+</head>
+<body>
+<header class="bar">
+  <a class="btn" href="/_/" title="Back to your files">←</a>
+  <span class="brand">People</span>
+  <span class="spacer"></span>
+  <span class="usage" id="count"></span>
+</header>
+<main class="wrap">
+  <table>
+    <thead>
+      <tr><th>Username</th><th>State</th><th>Using</th><th>Joined</th><th class="actions">Actions</th></tr>
+    </thead>
+    <tbody id="rows"></tbody>
+  </table>
+  <div class="empty" id="empty" hidden>Nobody has signed up yet.</div>
+  <p class="hint" style="margin-top:1.5rem">
+    Each person gets their own copy of the document they signed up to, at
+    <code>/~username/…</code>, and their own login. You can read what they have
+    made and you can suspend or remove them, but you cannot edit their copy: it
+    is their document. There is no email on this server, so a password reset is a
+    recovery code you read out to them.
+  </p>
+</main>
+<div class="toast" id="toast"></div>
+<script>
+const rows = document.getElementById('rows');
+const empty = document.getElementById('empty');
+const count = document.getElementById('count');
+const toastEl = document.getElementById('toast');
+function toast(message, isError) {
+  toastEl.textContent = message;
+  toastEl.className = 'toast show' + (isError ? ' error' : '');
+  clearTimeout(toast.timer);
+  toast.timer = setTimeout(() => { toastEl.className = 'toast'; }, 4000);
+}
+async function api(path, body) {
+  const res = await fetch(path, {
+    method: body === undefined ? 'GET' : 'POST',
+    headers: { Accept: 'application/json', ...(body ? { 'Content-Type': 'application/json' } : {}) },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const parsed = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(parsed.msg || res.statusText);
+  return parsed;
+}
+function bytes(value) {
+  if (!value) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let size = value;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) { size /= 1024; unit += 1; }
+  return (size >= 10 || unit === 0 ? Math.round(size) : size.toFixed(1)) + ' ' + units[unit];
+}
+function button(label, className, onClick) {
+  const el = document.createElement('button');
+  el.textContent = label;
+  if (className) el.className = className;
+  el.addEventListener('click', onClick);
+  return el;
+}
+function cell(content) {
+  const td = document.createElement('td');
+  if (typeof content === 'string') td.textContent = content;
+  else td.append(content);
+  return td;
+}
+async function act(path, message) {
+  try {
+    const result = await api(path, {});
+    toast(typeof message === 'function' ? message(result) : message);
+    await load();
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+async function load() {
+  try {
+    const body = await api('/_/tenants');
+    count.textContent = body.tenants.length + ' of ' + body.limits.maxTenants;
+    empty.hidden = body.tenants.length > 0;
+    rows.replaceChildren(...body.tenants.map((person) => {
+      const tr = document.createElement('tr');
+      const name = document.createElement('a');
+      name.href = '/~' + person.username + '/';
+      name.textContent = person.username;
+      tr.append(cell(name));
+      const state = document.createElement('span');
+      state.className = 'state ' + person.state;
+      state.textContent = person.state;
+      tr.append(cell(state));
+      const usage = document.createElement('span');
+      usage.className = 'usage';
+      usage.textContent = person.usage.docs + ' / ' + body.limits.maxDocsPerTenant
+        + ' · ' + bytes(person.usage.bytes);
+      tr.append(cell(usage));
+      tr.append(cell(new Date(person.createdAt).toLocaleDateString()));
+      const actions = document.createElement('td');
+      actions.className = 'actions';
+      const base = '/_/tenants/' + encodeURIComponent(person.username);
+      if (person.state === 'waiting') {
+        actions.append(button('Approve', 'primary', () =>
+          act(base + '/approve', (result) => 'Approved. Their copy is at ' + result.tenant.instance.url)));
+      } else if (person.state === 'suspended') {
+        actions.append(button('Unsuspend', '', () => act(base + '/resume', 'They can sign in again.')));
+      } else {
+        actions.append(button('Suspend', '', () => act(base + '/suspend', 'Suspended and signed out.')));
+      }
+      actions.append(button('Reset password', '', () => act(base + '/reset', (result) =>
+        'Read this to them, it works once: ' + result.recoveryCode)));
+      actions.append(button('Remove', 'danger', () => {
+        if (!confirm('Remove ' + person.username + '? Their files go to the trash, so this is undoable.')) return;
+        return act(base + '/delete', 'Removed. Their files are in the trash.');
+      }));
+      tr.append(actions);
+      return tr;
+    }));
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+load();
+// The same SSE feed the dashboard uses, so a signup that arrives while this page
+// is open lands in the table without a reload.
+const events = new EventSource('/_/events');
+let pending = null;
+for (const name of ['tenant-created', 'tenant-approved', 'tenant-updated', 'tenant-removed']) {
+  events.addEventListener(name, () => {
+    clearTimeout(pending);
+    pending = setTimeout(load, 120);
+  });
+}
+</script>
+</body>
+</html>