fix(pit): stop /pit rendering the entire namespace at once

The page locks browsers up and there is no script on it to blame. It drew
every ending the account holds, and under each one a form per name — CSRF
field, two inputs, two buttons — with no limit on either end. This registry
already holds 200 endings under one account. Measured at 50 endings x 100
names: 3.1 MiB of HTML and 36,082 elements. Nothing has to be slow for that
to jam; it is the DOM, and the sticky blurred app bar repaints over all of it
on every scroll frame.

Same data now renders 173 KiB and 1,926 elements — 20 endings a page, 10
names each, with the totals stated so a window is never mistaken for the
whole. `?tld=` opens one ending in full, which is where the "show all N"
links go, and where TronBrowser's mosh.<tld> console link already pointed at
a page that ignored the parameter and drew everything anyway.

Paging orders by `created_at DESC, tld` rather than `created_at` alone. A
bulk claim writes one timestamp across every ending in it, so the old sort
was not a total order: a page boundary inside a tie would repeat one ending
and lose another. Covered by a test that ties every timestamp on purpose.

Only the endings on screen are queried now — this used to run one listNames
per ending held, regardless of what it was about to render.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: ralyodio

apps/pwa/src/moshpit.mjs

@@ -39,8 +39,28 @@ export async function listTlds(limit = 200) {
   return all(`SELECT ${COLS} FROM moshpit_tlds ORDER BY created_at DESC LIMIT ?`, [limit]);
 }
 
-export async function listTldsForUser(userId) {
-  return all(`SELECT ${COLS} FROM moshpit_tlds WHERE user_id = ? ORDER BY created_at DESC`, [userId]);
+/**
+ * The endings one account holds.
+ *
+ * `limit`/`offset` page it. They are optional because the JSON API hands the
+ * whole list back and a list of strings costs nothing -- it is /pit that cannot
+ * afford it, because every ending it draws brings a form per name with it.
+ *
+ * Ordered by `created_at DESC, tld` rather than `created_at DESC` alone. A bulk
+ * claim writes one timestamp across every ending in it, so `created_at` is not
+ * a total order, and a page boundary landing inside a tie would show the same
+ * ending twice on one page and skip another entirely.
+ */
+export async function listTldsForUser(userId, { limit = null, offset = 0 } = {}) {
+  const page = limit === null ? "" : ` LIMIT ? OFFSET ?`;
+  const args = limit === null ? [userId] : [userId, limit, offset];
+  return all(`SELECT ${COLS} FROM moshpit_tlds WHERE user_id = ? ORDER BY created_at DESC, tld${page}`, args);
+}
+
+/** How many endings the account holds -- for the pager, which needs the total. */
+export async function countTldsForUser(userId) {
+  const row = await get(`SELECT COUNT(*) AS n FROM moshpit_tlds WHERE user_id = ?`, [userId]);
+  return Number(row?.n ?? 0);
 }
 
 /**
@@ -205,6 +225,17 @@ export async function listNames(tld, limit = 500) {
   return all(`SELECT ${NAME_COLS} FROM moshpit_names WHERE tld = ? ORDER BY label LIMIT ?`, [tld, limit]);
 }
 
+/**
+ * How many names live under an ending.
+ *
+ * /pit draws a handful of them per ending and has to say how many it is not
+ * drawing -- "12 shown" with no total reads as "you have 12 names".
+ */
+export async function countNames(tld) {
+  const row = await get(`SELECT COUNT(*) AS n FROM moshpit_names WHERE tld = ?`, [tld]);
+  return Number(row?.n ?? 0);
+}
+
 export async function listNamesForUser(userId) {
   return all(`SELECT ${NAME_COLS} FROM moshpit_names WHERE user_id = ? ORDER BY tld, label`, [userId]);
 }
@@ -317,13 +348,28 @@ export async function setTldPrice({ tld: tldInput, userId, priceUsd }) {
   return { ok: true, tld, priceUsd: price };
 }
 
-/** TLDs somebody else holds. `forSale` narrows to the ones actually buyable. */
-export async function listTldsNotOwnedBy(userId, { forSale = false, limit = 200 } = {}) {
+/**
+ * TLDs somebody else holds. `forSale` narrows to the ones actually buyable.
+ *
+ * `tld` breaks the tie for the same reason it does in listTldsForUser: a bulk
+ * claim shares one timestamp, and paging through a partial order loses rows.
+ */
+export async function listTldsNotOwnedBy(userId, { forSale = false, limit = 200, offset = 0 } = {}) {
   const sql = `SELECT tld, user_id, owner_email, alias_of, price_usd, created_at
                FROM moshpit_tlds
                WHERE user_id IS NOT ?${forSale ? " AND price_usd IS NOT NULL" : ""}
-               ORDER BY price_usd IS NULL, created_at DESC LIMIT ?`;
-  return all(sql, [userId ?? "", limit]);
+               ORDER BY price_usd IS NULL, created_at DESC, tld LIMIT ? OFFSET ?`;
+  return all(sql, [userId ?? "", limit, offset]);
+}
+
+/** How many endings somebody else holds -- the Theirs pager needs the total. */
+export async function countTldsNotOwnedBy(userId, { forSale = false } = {}) {
+  const row = await get(
+    `SELECT COUNT(*) AS n FROM moshpit_tlds
+     WHERE user_id IS NOT ?${forSale ? " AND price_usd IS NOT NULL" : ""}`,
+    [userId ?? ""],
+  );
+  return Number(row?.n ?? 0);
 }
 
 export async function getTldWithPrice(tld) {

apps/pwa/src/routes/moshpit.mjs

@@ -25,6 +25,9 @@ import {
   addPin,
   clearAlias,
   clearExempt,
+  countNames,
+  countTldsForUser,
+  countTldsNotOwnedBy,
   DEFAULT_TLD_PRICE_USD,
   getName,
   getTld,
@@ -774,6 +777,8 @@ const PIT_CSS = `
   font-size:.8rem;line-height:1.55;resize:vertical;min-height:9em}
 .pit-bulk textarea:focus{outline:none;border-color:var(--acid)}
 .pit-tabs{display:flex;gap:4px;margin:22px 0 26px;border-bottom:1px solid var(--line)}
+.pit-pager{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:22px 0 4px;font-size:.72rem}
+.pit-pager .btn[aria-disabled]{opacity:.4;pointer-events:none}
 .pit-tab{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
   padding:11px 15px;border-bottom:2px solid transparent;margin-bottom:-1px}
 .pit-tab:hover{color:var(--text)}
@@ -814,12 +819,67 @@ const pitTabs = (active, counts = null) => `
 
 const forSale = (t) => t.price_usd !== null && t.price_usd !== undefined;
 
+/**
+ * How much of the namespace one page may draw.
+ *
+ * /pit ships no script at all, and it still locked browsers up: the page grew
+ * as endings x names-under-them, and neither end was bounded. Every name is a
+ * form with a CSRF field, two inputs and two buttons, so an account holding 50
+ * endings with 100 names each rendered 3 MiB of HTML and 36k elements. Nothing
+ * has to be slow for that to jam -- it is the DOM, and the sticky blurred app
+ * bar repainting over it on every scroll frame.
+ *
+ * So the page shows a window and says what it is not showing. `?tld=` opens one
+ * ending in full, which is also where the "show all N" links go -- and where
+ * TronBrowser's `mosh.<tld>` already pointed, on a page that until now ignored
+ * the parameter and drew everything anyway.
+ */
+const TLDS_PER_PAGE = 20;
+const NAMES_PER_TLD = 10;
+const NAMES_FOCUSED = 250;
+
+/** `?page=` as a 1-based page number; anything unreadable is page 1. */
+const pageParam = (value) => {
+  const n = Number.parseInt(value, 10);
+  return Number.isFinite(n) && n > 1 ? n : 1;
+};
+
+/** Prev/next for a window into `total` rows, or nothing when it all fits. */
+const pager = ({ page, total, perPage, href }) => {
+  const pages = Math.max(1, Math.ceil(total / perPage));
+  if (pages <= 1) return "";
+  const link = (n, label) => `<a class="btn" href="${href(n)}">${label}</a>`;
+  return `<nav class="pit-pager">
+    ${page > 1 ? link(page - 1, "← Newer") : `<span class="btn faint" aria-disabled="true">← Newer</span>`}
+    <span class="mono faint">page ${page} of ${pages} · ${total} endings</span>
+    ${page < pages ? link(page + 1, "Older →") : `<span class="btn faint" aria-disabled="true">Older →</span>`}
+  </nav>`;
+};
+
 moshpitRouter.get("/pit", async (req, res) => {
-  const [theirs, mine, bal] = await Promise.all([
-    listTldsNotOwnedBy(req.user?.id ?? null, { limit: 100 }),
-    req.user ? listTldsForUser(req.user.id) : [],
+  // An unknown ?tab= falls back to Yours rather than rendering an empty page.
+  const tab = req.query.tab === "theirs" ? "theirs" : "yours";
+  const pageNo = pageParam(req.query.page);
+
+  // `?tld=` opens a single ending in full. Only meaningful for one you hold --
+  // Theirs is one row per ending and has nothing to expand.
+  const wanted = normalizeTld(req.query.tld) || null;
+  const focused = tab === "yours" && req.user && wanted
+    ? await getTld(wanted).then((t) => (t && t.user_id === req.user.id ? t : null))
+    : null;
+
+  const [theirs, theirsTotal, mine, mineTotal, bal] = await Promise.all([
+    tab === "theirs"
+      ? listTldsNotOwnedBy(req.user?.id ?? null, { limit: TLDS_PER_PAGE, offset: (pageNo - 1) * TLDS_PER_PAGE })
+      : [],
+    countTldsNotOwnedBy(req.user?.id ?? null),
+    req.user && !focused
+      ? listTldsForUser(req.user.id, { limit: TLDS_PER_PAGE, offset: (pageNo - 1) * TLDS_PER_PAGE })
+      : [],
+    req.user ? countTldsForUser(req.user.id) : 0,
     req.user ? balance(req.user.id) : 0,
   ]);
+  const shown = focused ? [focused] : mine;
 
   // `?name=mosh.whatever` — somebody typed a Moshpit name and ended up here
   // instead of at a site. Work out what they can actually do about it.
@@ -839,18 +899,22 @@ moshpitRouter.get("/pit", async (req, res) => {
     });
   }
 
-  // An unknown ?tab= falls back to Yours rather than rendering an empty page.
-  const tab = req.query.tab === "theirs" ? "theirs" : "yours";
-  const forSaleCount = theirs.filter(forSale).length;
+  const forSaleCount = await countTldsNotOwnedBy(req.user?.id ?? null, { forSale: true });
 
-  // Per-TLD detail is only needed by the panel actually on screen, and only
-  // Yours has any: Theirs is one row per ending.
+  // Per-TLD detail is only needed by the endings actually on screen, and only
+  // Yours has any: Theirs is one row per ending. That is the whole fix -- this
+  // used to run one listNames per ending the account held, however many that
+  // was, and then render every row it got back.
   const exemptions = new Map();
   const names = new Map();
+  const nameTotals = new Map();
   if (tab === "yours") {
     // Exemptions are only meaningful for a TLD that points somewhere.
-    await Promise.all(mine.filter((t) => t.alias_of).map(async (t) => exemptions.set(t.tld, await listExempt(t.tld))));
-    await Promise.all(mine.map(async (t) => names.set(t.tld, await listNames(t.tld))));
+    await Promise.all(shown.filter((t) => t.alias_of).map(async (t) => exemptions.set(t.tld, await listExempt(t.tld))));
+    await Promise.all(shown.map(async (t) => {
+      names.set(t.tld, await listNames(t.tld, focused ? NAMES_FOCUSED : NAMES_PER_TLD));
+      nameTotals.set(t.tld, await countNames(t.tld));
+    }));
   }
 
   const msg = req.query.err ? `<p class="pit-msg err">${esc(req.query.err)}</p>`
@@ -859,12 +923,13 @@ moshpitRouter.get("/pit", async (req, res) => {
   const mineHtml = !req.user
     ? `<p class="dim">Sign in with your moshcode account to claim one — the same login the CLI uses.</p>
        <p><a class="btn acid" href="/">Sign in →</a></p>`
-    : mine.length
-      ? mine.map((t) => `
+    : shown.length
+      ? shown.map((t) => `
         <div class="pit-tld">
           <h3 class="acid">.${esc(t.tld)}</h3>
           <div class="mono faint" style="font-size:.72rem">
             ${t.alias_of ? `points at <span class="acid">.${esc(t.alias_of)}</span>` : "stands on its own"}
+            · ${nameTotals.get(t.tld) ?? 0} name${(nameTotals.get(t.tld) ?? 0) === 1 ? "" : "s"}
           </div>
           <div class="pit-names">
             ${(names.get(t.tld) || []).length
@@ -878,6 +943,12 @@ moshpitRouter.get("/pit", async (req, res) => {
                   <button class="btn" type="submit" name="release" value="1">Release</button>
                 </form>`).join("")
               : `<p class="mono faint" style="font-size:.72rem;margin:6px 0">no names under .${esc(t.tld)} yet</p>`}
+            ${(nameTotals.get(t.tld) ?? 0) > (names.get(t.tld) || []).length ? `
+            <p class="mono faint" style="font-size:.72rem;margin:6px 0">
+              ${(names.get(t.tld) || []).length} of ${nameTotals.get(t.tld)} shown${focused
+                ? ` — this ending holds more than the ${NAMES_FOCUSED} a page will draw`
+                : ` · <a class="acid" href="/pit?tld=${encodeURIComponent(t.tld)}">open .${esc(t.tld)} on its own →</a>`}
+            </p>` : ""}
             <form method="post" action="/pit/${esc(t.tld)}/names" class="pit-row">
               ${csrfInput(req)}
               <input name="label" placeholder="new name" autocomplete="off" required>
@@ -955,22 +1026,35 @@ moshpitRouter.get("/pit", async (req, res) => {
   ${landingCard(req, landing)}
   ${msg}
   ${req.user ? claimForm(req) + bulkClaimForm(req) : ""}
-  ${pitTabs(tab, { yours: mine.length, theirs: theirs.length, forSale: forSaleCount })}
+  ${pitTabs(tab, { yours: mineTotal, theirs: theirsTotal, forSale: forSaleCount })}
 
   <section class="pit-panel">
   ${tab === "yours" ? `
+    ${focused ? `
+    <p class="dim" style="max-width:62ch;margin:0 0 14px">
+      <a class="acid" href="/pit">← all ${mineTotal} of your endings</a> · showing
+      <span class="mono acid">.${esc(focused.tld)}</span> on its own.
+    </p>` : `
     <p class="dim" style="max-width:62ch;margin:0 0 14px">
       Endings you hold. Names under them are yours to mint for nothing — or put a price on the
       ending and let anyone buy one.
-    </p>
+    </p>`}
     ${mineHtml}
+    ${focused ? "" : pager({
+      page: pageNo, total: mineTotal, perPage: TLDS_PER_PAGE,
+      href: (n) => `/pit?tab=yours&page=${n}`,
+    })}
   ` : `
     <p class="dim" style="max-width:62ch;margin:0 0 14px">
       Endings somebody else holds. Where the operator has set a price you can buy a name under it —
       <span class="mono">foo.whatever</span> without owning <span class="mono">.whatever</span>. Paid in crypto
       through CoinPay; the name lands the moment the payment confirms.
     </p>
     ${theirsHtml}
+    ${pager({
+      page: pageNo, total: theirsTotal, perPage: TLDS_PER_PAGE,
+      href: (n) => `/pit?tab=theirs&page=${n}`,
+    })}
   `}
   </section>
 </main>${footer}`,