From 4fef7e44ed1e0b3efecf213560a6c420c2a930db Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 27 Oct 2026 23:23:34 +0100
Subject: [PATCH 1/5] refactor: boot module replaces ready, PSA/merch/no-CSS
 become state + components (L6)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NZNRfGDYsGYMUTp2zYUTrv
---
 docs/specs/solid-monkeytype/roadmap.md        |  10 +-
 .../components/core/NoCssDetails.spec.tsx     |  51 +++++++++
 frontend/__tests__/root/boot.spec.ts          |  48 ++++++++
 frontend/src/html/warnings.html               | 106 +++++++++---------
 frontend/src/ts/{ready.ts => boot.ts}         |  21 ++--
 frontend/src/ts/components/core/App.tsx       |  15 ++-
 .../src/ts/components/core/NoCssDetails.tsx   |  93 +++++++++++++++
 frontend/src/ts/elements/no-css.ts            |  97 ----------------
 frontend/src/ts/elements/psa.tsx              |  13 ++-
 frontend/src/ts/index.tsx                     |   6 +-
 frontend/src/ts/states/connection.ts          |   5 +-
 frontend/src/ts/states/core.ts                |   2 +-
 12 files changed, 293 insertions(+), 174 deletions(-)
 create mode 100644 frontend/__tests__/components/core/NoCssDetails.spec.tsx
 create mode 100644 frontend/__tests__/root/boot.spec.ts
 rename frontend/src/ts/{ready.ts => boot.ts} (75%)
 create mode 100644 frontend/src/ts/components/core/NoCssDetails.tsx
 delete mode 100644 frontend/src/ts/elements/no-css.ts

diff --git a/docs/specs/solid-monkeytype/roadmap.md b/docs/specs/solid-monkeytype/roadmap.md
index 0d9d88404a8d..89456e8f9fa8 100644
--- a/docs/specs/solid-monkeytype/roadmap.md
+++ b/docs/specs/solid-monkeytype/roadmap.md
@@ -110,7 +110,7 @@ Serial; each step needs the previous one. Verify each in the browser (`__mt.chec
 |---|---|---|---|---|---|
 | [ ] | U1 | L · PR | Single-row user collection with `getUser()` and named writes (direct writes for server-side effects, optimistic actions for user changes, incl. quote ratings); convert **all writers** (result save, xp, badges, inbox count, lb memory, streak offset, quote rate, favourite quotes, edit profile, update name, unlink Discord, Discord OAuth, auth); delete the reactive mirror; `DB.getSnapshot()` becomes a read-only shim over the row | none | Writers must move in the same PR: there's no mutable object left |
 | [ ] | U2 | M · PR | Activity calendar: plain activity data in the user row; the calendar becomes a Solid component; delete the imperative test-activity modules | U1 (data shape) | Can share a PR with U1 |
-| [ ] | U3 | M · PR | Remove the snapshot-updated auth event (PSA, last-signed-out-result modal read `getUser()`); auth becomes a signal the router reads, with the user-data load as state (loading/loaded/failed) plus `reloadUserData()` replacing the event's promise; delete the auth bus | U1 | |
+| [ ] | U3 | M · PR | Remove the snapshot-updated auth event (PSA, last-signed-out-result modal read `getUser()`); PSA's `authEvent` subscription (`Psa.init`, started by boot) follows the auth signal; auth becomes a signal the router reads, with the user-data load as state (loading/loaded/failed) plus `reloadUserData()` replacing the event's promise; delete the auth bus | U1 | |
 | [ ] | U4 | S · commit per area | Readers move from the `DB.getSnapshot()` shim to `getUser()`, by area; the last PR deletes the shim and the snapshot code in `db.ts` | U1 | Parallel by area |
 | [ ] | U5 | M · PR | Tags, presets and custom themes get the `getUser()` pattern: plain getters backed by a module-level reactive mirror, replacing their live-query hooks (keep `gcTime: Infinity`). Rewrite the non-test `__nonReactive` callers as Solid code reading the getters: commandline tag/preset lists, the custom-themes check in config metadata, the tag PB helpers in `db.ts` (or they go with U4) | none | Test-page callers go with T6a/T6c |
 | [ ] | U6 | S · commit | Delete `__nonReactive` from every module once no caller is left | U5, T6a, T6c | Pure deletion: a caller still left means a step missed it |
@@ -130,10 +130,10 @@ Serial; each step needs the previous one. Verify each in the browser (`__mt.chec
 |---|---|---|---|---|
 | [x] | L1 | M · PR | Focus mode becomes a signal; layout binds focus state; cursor hiding goes to CSS; one component owns the mouse-move exit. Done in [#8519](https://github.com/monkeytypegame/monkeytype/pull/8519): `isFocusMode`/`setFocusMode` (rAF-deferred) in states/test; `data-focused` on app, header, footer, banners; `FocusModeExit`; caret blink follows the signal; `test/focus.ts` deleted | none (before T5) |
 | [x] | L2 | L · PR | Funbox component owns funbox document state (body state, stylesheet link, CRT scanline); funbox functions stop touching the DOM and become engine plugin hooks, getting input as arguments instead of importing the EventLog; display tweaks via `data-ui-*` / funbox CSS. Done in [#8522](https://github.com/monkeytypegame/monkeytype/pull/8522): `components/core/Funbox.tsx` in App derives `fb-*`/`ignore-reduced-motion` and per-funbox links from `getAppliedFunboxes()` (set by `activate()` after validation, cleared by `clear()`), crt (`crtmode`, `#scanline`, global link) from `config.funbox` unless screenshotting; selectors unchanged; body classes via the `useBodyClasses` hook (Theme's `darkMode` and DevOptionsModal's debug classes moved too). `applyGlobalCSS`/`clearGlobal` and funbox's config-event subscriber deleted; crt loses `hasCssFile` (was loaded twice). Safari ≤16.5 crt check → `getFunboxUnsupportedReason` (metadata `isBlocked`, `toggleFunbox` setter, `activate()`). `handleKeydown`/`handleSpace` get a `FunboxInput` (`current()`, `forWord(i)`) from input instead of importing `events/data`. Hook shape left for T6a | none (before T5) |
-| [ ] | L3 | M · PR | Monkey power as a component owning its canvas, positioned from the caret | T3 |
+| [ ] | L3 | M · PR | Monkey power as a component owning its canvas, positioned from the caret; replaces App's `MonkeyPower.init` on mount (L6 stopgap) | T3 |
 | [ ] | L4 | M · PR | Result word highlight becomes part of words history, driven by a highlighted-range signal from the chart | none |
-| [ ] | L5 | M · PR | Screenshot-mode signal; elements hide through state; capture uses the result ref | none |
-| [ ] | L6 | M · PR | Boot cleanup: the ready module goes into App lifecycle / a boot module; PSA, merch banner and no-CSS detection become state plus components | none |
+| [ ] | L5 | M · PR | Screenshot-mode signal; elements hide through state (incl. the static `#nocss` box); capture uses the result ref | none |
+| [x] | L6 | M · PR | Boot cleanup: the ready module goes into App lifecycle / a boot module; PSA, merch banner and no-CSS detection become state plus components. Done: DOM-free `boot.ts` (called after render) awaits config then auth, sets app ready, shows merch banner, syncs server config, registers the service worker, and starts connection listeners (`initConnection`, was `onDOMReady`) and PSA (`Psa.init`, still on the auth bus until U3); App owns the body transition (effect on app ready) and calls `MonkeyPower.init` on mount until L3; `NoCssDetails` portals into empty mount points of the static `#nocss` box (`<noscript>` fallbacks); `ready.ts` and `no-css.ts` deleted, no `onDOMReady` callers left | none |
 | [ ] | L7 | S · commit | Remove stray DOM queries: account page, leaderboard table, captcha, challenge controller header, ad/analytics controllers. Done except the leaderboard table: #8524 rewrites its scroll-to-user and should switch to DataTable's `rowSelection.scrollToActiveRow` | none |
 | [ ] | L8 | S · commit | Delete dead modules: result batches, character counter, discord avatar util, input indicator, unused input-validation exports, tag builder plus its spec | none |
 | [ ] | L9 | M · PR | Replace the sorted-table utility with DataTable | none |
@@ -145,7 +145,7 @@ Serial; each step needs the previous one. Verify each in the browser (`__mt.chec
 
 | Done | ID | Size | Step | Blocked by |
 |---|---|---|---|---|
-| [ ] | CL1 | M · PR | Delete the DOM-wrapper utility library, the ref-with-utils hook and `onDOMReady` | T7, all L, U2 |
+| [ ] | CL1 | M · PR | Delete the DOM-wrapper utility library, the ref-with-utils hook and `onDOMReady` (no callers since L6) | T7, all L, U2 |
 | [ ] | CL2 | M · PR | DOM-query / `innerHTML` lint ban, with the server-HTML allowlist (notifications, simple modal, version history, quote-search highlight) | CL1 |
 | [ ] | CL3 | M · PR | **Announced removal of legacy theme selectors** (old ids, classes, `letter`): the single break for user custom CSS; delete remaining SCSS | T1, L11, L12 |
 | [ ] | CL4 | S · commit | Update coding standards and agent docs to describe only the final patterns | CL1 |
diff --git a/frontend/__tests__/components/core/NoCssDetails.spec.tsx b/frontend/__tests__/components/core/NoCssDetails.spec.tsx
new file mode 100644
index 000000000000..9642a4bfdcbc
--- /dev/null
+++ b/frontend/__tests__/components/core/NoCssDetails.spec.tsx
@@ -0,0 +1,51 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+
+import { NoCssDetails } from "../../../src/ts/components/core/NoCssDetails";
+
+function text(id: string): string {
+  return (document.getElementById(id)?.textContent ?? "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+describe("NoCssDetails", () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div id="nocss">
+        <span id="nocss-keys"></span>
+        <span id="nocss-stylesheets"></span>
+        <span id="nocss-js"></span>
+      </div>`;
+    document.head.innerHTML = `<link rel="stylesheet" href="/css/style.abc.css"><link rel="stylesheet" href="/other.css">`;
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.head.innerHTML = "";
+  });
+
+  it("shows Ctrl outside mac", () => {
+    vi.stubGlobal("navigator", { userAgent: "Mozilla/5.0 (X11; Linux)" });
+    render(() => <NoCssDetails />);
+
+    expect(text("nocss-keys")).toBe("Ctrl + Shift + R");
+  });
+
+  it("shows Cmd on mac", () => {
+    vi.stubGlobal("navigator", { userAgent: "Mozilla/5.0 (Macintosh)" });
+    render(() => <NoCssDetails />);
+
+    expect(text("nocss-keys")).toBe("Cmd + Shift + R");
+  });
+
+  it("lists only the app stylesheets and the client version", () => {
+    render(() => <NoCssDetails />);
+
+    expect(text("nocss-stylesheets")).toBe(
+      `Requested stylesheets:${location.origin}/css/style.abc.css`,
+    );
+    expect(text("nocss-js")).toMatch(/^Requested Javascript files:/);
+    expect(text("nocss-js")).toMatch(/Client version:\S+$/);
+  });
+});
diff --git a/frontend/__tests__/root/boot.spec.ts b/frontend/__tests__/root/boot.spec.ts
new file mode 100644
index 000000000000..57d9858bd6d9
--- /dev/null
+++ b/frontend/__tests__/root/boot.spec.ts
@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from "vitest";
+
+const { config, auth } = vi.hoisted(() => ({
+  config: Promise.withResolvers<undefined>(),
+  auth: Promise.withResolvers<undefined>(),
+}));
+
+vi.mock("../../src/ts/config/lifecycle", () => ({
+  configLoadPromise: config.promise,
+}));
+vi.mock("../../src/ts/firebase", () => ({ authPromise: auth.promise }));
+vi.mock("../../src/ts/elements/merch-banner", () => ({
+  showIfNotClosedBefore: vi.fn(),
+}));
+vi.mock("../../src/ts/elements/psa", () => ({ init: vi.fn() }));
+vi.mock("../../src/ts/states/connection", () => ({ initConnection: vi.fn() }));
+vi.mock("../../src/ts/ape/server-configuration", () => ({
+  sync: vi.fn(async () => undefined),
+}));
+vi.mock("../../src/ts/utils/env", () => ({ isDevEnvironment: () => false }));
+
+import * as ServerConfiguration from "../../src/ts/ape/server-configuration";
+import { boot } from "../../src/ts/boot";
+import * as MerchBanner from "../../src/ts/elements/merch-banner";
+import * as Psa from "../../src/ts/elements/psa";
+import { initConnection } from "../../src/ts/states/connection";
+import { isAppReady } from "../../src/ts/states/core";
+
+describe("boot", () => {
+  it("waits for config, then auth, before the app is ready", async () => {
+    const booted = boot();
+
+    // started before awaiting, so the first auth state change shows PSAs
+    expect(initConnection).toHaveBeenCalledOnce();
+    expect(Psa.init).toHaveBeenCalledOnce();
+
+    auth.resolve(undefined);
+    await Promise.resolve();
+    expect(isAppReady()).toBe(false);
+
+    config.resolve(undefined);
+    await booted;
+
+    expect(isAppReady()).toBe(true);
+    expect(MerchBanner.showIfNotClosedBefore).toHaveBeenCalledOnce();
+    expect(ServerConfiguration.sync).toHaveBeenCalledOnce();
+  });
+});
diff --git a/frontend/src/html/warnings.html b/frontend/src/html/warnings.html
index 36840c09f75a..a9d5c1212fc4 100644
--- a/frontend/src/html/warnings.html
+++ b/frontend/src/html/warnings.html
@@ -108,52 +108,54 @@
       It seems like the CSS failed to load. Please try clearing your cache to
       redownload the styles:
       <br />
-      <span class="keys">
-        <span
-          style="
-            padding: 1rem;
-            display: inline-block;
-            border-radius: 1rem;
-            background: #2c2e31;
-            margin-top: 1rem;
-            margin-bottom: 1rem;
-          "
-        >
-          Ctrl
-        </span>
-        /
-        <span
-          style="
-            padding: 1rem;
-            display: inline-block;
-            border-radius: 1rem;
-            background: #2c2e31;
-          "
-        >
-          Cmd
-        </span>
-        +
-        <span
-          style="
-            padding: 1rem;
-            display: inline-block;
-            border-radius: 1rem;
-            background: #2c2e31;
-          "
-        >
-          Shift
-        </span>
-        +
-        <span
-          style="
-            padding: 1rem;
-            display: inline-block;
-            border-radius: 1rem;
-            background: #2c2e31;
-          "
-        >
-          R
-        </span>
+      <span class="keys" id="nocss-keys">
+        <noscript>
+          <span
+            style="
+              padding: 1rem;
+              display: inline-block;
+              border-radius: 1rem;
+              background: #2c2e31;
+              margin-top: 1rem;
+              margin-bottom: 1rem;
+            "
+          >
+            Ctrl
+          </span>
+          /
+          <span
+            style="
+              padding: 1rem;
+              display: inline-block;
+              border-radius: 1rem;
+              background: #2c2e31;
+            "
+          >
+            Cmd
+          </span>
+          +
+          <span
+            style="
+              padding: 1rem;
+              display: inline-block;
+              border-radius: 1rem;
+              background: #2c2e31;
+            "
+          >
+            Shift
+          </span>
+          +
+          <span
+            style="
+              padding: 1rem;
+              display: inline-block;
+              border-radius: 1rem;
+              background: #2c2e31;
+            "
+          >
+            R
+          </span>
+        </noscript>
       </span>
       <br />
       You could also try to reinstall the service worker:
@@ -172,11 +174,13 @@
       If that doesn't help contact support (support@monkeytype.com or
       discord.gg/monkeytype)
     </span>
-    <span class="requestedStylesheets">
-      If the website works for a bit but then this screen comes back, clear your
-      cache again and then on Monkeytype open the command line (esc) and search
-      for "Clear SW cache".
+    <span class="requestedStylesheets" id="nocss-stylesheets">
+      <noscript>
+        If the website works for a bit but then this screen comes back, clear
+        your cache again and then on Monkeytype open the command line (esc) and
+        search for "Clear SW cache".
+      </noscript>
     </span>
-    <span class="requestedJs"></span>
+    <span class="requestedJs" id="nocss-js"></span>
   </div>
 </div>
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/boot.ts
similarity index 75%
rename from frontend/src/ts/ready.ts
rename to frontend/src/ts/boot.ts
index cde35b5fe3f3..d734eae721fb 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/boot.ts
@@ -1,13 +1,18 @@
-import * as MonkeyPower from "./elements/monkey-power";
-import * as MerchBanner from "./elements/merch-banner";
 import * as ServerConfiguration from "./ape/server-configuration";
 import { configLoadPromise } from "./config/lifecycle";
+import * as MerchBanner from "./elements/merch-banner";
+import * as Psa from "./elements/psa";
 import { authPromise } from "./firebase";
-import { onDOMReady } from "./utils/dom";
-import { isDevEnvironment } from "./utils/env";
+import { initConnection } from "./states/connection";
 import { setAppReady } from "./states/core";
+import { isDevEnvironment } from "./utils/env";
+
+/** App startup work that doesn't touch the DOM. Call once, right after render. */
+export async function boot(): Promise<void> {
+  // before awaiting: PSAs show on the first auth state change
+  initConnection();
+  Psa.init();
 
-onDOMReady(async () => {
   await configLoadPromise;
   await authPromise;
 
@@ -17,8 +22,10 @@ onDOMReady(async () => {
 
   void ServerConfiguration.sync();
 
-  MonkeyPower.init();
+  registerServiceWorker();
+}
 
+function registerServiceWorker(): void {
   if (isDevEnvironment()) {
     void navigator.serviceWorker
       .getRegistrations()
@@ -44,4 +51,4 @@ onDOMReady(async () => {
       });
     }
   }
-});
+}
diff --git a/frontend/src/ts/components/core/App.tsx b/frontend/src/ts/components/core/App.tsx
index f6bbc3ae99d8..781c4b38135a 100644
--- a/frontend/src/ts/components/core/App.tsx
+++ b/frontend/src/ts/components/core/App.tsx
@@ -3,8 +3,9 @@ import {
   RouterContextProvider,
   RouterProvider as RouteRenderer,
 } from "@tanstack/solid-router";
-import { JSXElement } from "solid-js";
+import { createEffect, JSXElement, onMount } from "solid-js";
 
+import * as MonkeyPower from "../../elements/monkey-power";
 import { queryClient } from "../../queries";
 import { router } from "../../router/app-router";
 import { getGlobalOffsetTop, isAppReady } from "../../states/core";
@@ -23,9 +24,20 @@ import { BarTimerProgress } from "../pages/test/live-stats/BarTimerProgress";
 import { CustomBackground } from "./CustomBackground";
 import { Font } from "./Font";
 import { Funbox } from "./Funbox";
+import { NoCssDetails } from "./NoCssDetails";
 import { Theme } from "./Theme";
 
 export function App(): JSXElement {
+  // set once ready, so the initial theme doesn't animate the background color
+  createEffect(() => {
+    if (isAppReady()) {
+      document.body.style.transition = "background .25s, transform .05s";
+    }
+  });
+
+  // until monkey power owns its canvas (L3)
+  onMount(() => MonkeyPower.init());
+
   return (
     <Providers>
       <Overlays />
@@ -66,6 +78,7 @@ export function App(): JSXElement {
         <Advertisement id="ad-footer" visible={"sellout"} />
       </Anime>
       <DevTools />
+      <NoCssDetails />
     </Providers>
   );
 }
diff --git a/frontend/src/ts/components/core/NoCssDetails.tsx b/frontend/src/ts/components/core/NoCssDetails.tsx
new file mode 100644
index 000000000000..87b0e9252e9c
--- /dev/null
+++ b/frontend/src/ts/components/core/NoCssDetails.tsx
@@ -0,0 +1,93 @@
+import { For, JSXElement, Show } from "solid-js";
+import { Portal } from "solid-js/web";
+import { envConfig } from "virtual:env-config";
+
+const keyStyle = {
+  padding: "1rem",
+  display: "inline-block",
+  "border-radius": "1rem",
+  background: "#2c2e31",
+};
+
+/**
+ * Fills the static no-CSS warning (warnings.html) with the reload shortcut for
+ * this platform and the requested stylesheets and scripts. Inline styles only:
+ * it shows when the CSS failed to load.
+ */
+export function NoCssDetails(): JSXElement {
+  const isMac = window.navigator.userAgent.toLowerCase().includes("mac");
+  const stylesheets = (
+    [...document.querySelectorAll("link[rel=stylesheet]")] as HTMLLinkElement[]
+  )
+    .map((l) => l.href)
+    .filter((l) => /\/css\/style/gi.test(l));
+  const scripts = (
+    [...document.querySelectorAll("script")] as HTMLScriptElement[]
+  )
+    .map((l) => l.src)
+    .filter((l) => /(\/js\/mon|\/js\/vendor)/gi.test(l));
+
+  return (
+    <>
+      <Mount at={document.getElementById("nocss-keys")}>
+        <span
+          style={{
+            ...keyStyle,
+            "margin-top": isMac ? "1rem" : undefined,
+            "margin-bottom": "1rem",
+          }}
+        >
+          {isMac ? "Cmd" : "Ctrl"}
+        </span>{" "}
+        + <span style={keyStyle}>Shift</span> + <span style={keyStyle}>R</span>
+      </Mount>
+      <Mount at={document.getElementById("nocss-stylesheets")}>
+        Requested stylesheets:
+        <For each={stylesheets}>
+          {(href) => (
+            <>
+              <br />
+              {href}
+            </>
+          )}
+        </For>
+      </Mount>
+      <Mount at={document.getElementById("nocss-js")}>
+        Requested Javascript files:
+        <For each={scripts}>
+          {(src) => (
+            <>
+              <br />
+              {src}
+            </>
+          )}
+        </For>
+        <br />
+        <br />
+        Client version:
+        <br />
+        {envConfig.clientVersion}
+      </Mount>
+    </>
+  );
+}
+
+/** Renders into an empty mount point of the static warning markup. */
+function Mount(props: {
+  at: HTMLElement | null;
+  children: JSXElement;
+}): JSXElement {
+  return (
+    <Show when={props.at}>
+      {(el) => (
+        <Portal
+          mount={el()}
+          // the wrapper div Portal adds must not break the inline text
+          ref={(wrapper) => (wrapper.style.display = "contents")}
+        >
+          {props.children}
+        </Portal>
+      )}
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/elements/no-css.ts b/frontend/src/ts/elements/no-css.ts
deleted file mode 100644
index c12d08cbe370..000000000000
--- a/frontend/src/ts/elements/no-css.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-// queries only static markup from index.html (#nocss, links, scripts)
-/* oxlint-disable monkeytype-rules/no-module-scope-dom-query */
-import { envConfig } from "virtual:env-config";
-import { qs } from "../utils/dom";
-
-qs("#nocss .requestedStylesheets")?.setHtml(
-  `Requested stylesheets:<br>${(
-    [...document.querySelectorAll("link[rel=stylesheet")] as HTMLAnchorElement[]
-  )
-    .map((l) => l.href)
-    .filter((l) => /\/css\/style/gi.test(l))
-    .join("<br>")}`,
-);
-
-qs("#nocss .requestedJs")?.setHtml(
-  `Requested Javascript files:<br>${(
-    [...document.querySelectorAll("script")] as HTMLScriptElement[]
-  )
-    .map((l) => l.src)
-    .filter((l) => /(\/js\/mon|\/js\/vendor)/gi.test(l))
-    .join("<br>")}<br><br>Client version:<br>${envConfig.clientVersion}`,
-);
-
-if (window.navigator.userAgent.toLowerCase().includes("mac")) {
-  qs("#nocss .keys")?.setHtml(`
-    <span
-      style="
-        padding: 1rem;
-        display: inline-block;
-        border-radius: 1rem;
-        background: #2c2e31;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-      "
-    >
-      Cmd
-    </span>
-    +
-    <span
-      style="
-        padding: 1rem;
-        display: inline-block;
-        border-radius: 1rem;
-        background: #2c2e31;
-      "
-    >
-      Shift
-    </span>
-    +
-    <span
-      style="
-        padding: 1rem;
-        display: inline-block;
-        border-radius: 1rem;
-        background: #2c2e31;
-      "
-    >
-      R
-    </span>
-  `);
-} else {
-  qs("#nocss .keys")?.setHtml(`
-    <span
-      style="
-        padding: 1rem;
-        display: inline-block;
-        border-radius: 1rem;
-        background: #2c2e31;
-        margin-bottom: 1rem;
-      "
-    >
-      Ctrl
-    </span>
-    +
-    <span
-      style="
-        padding: 1rem;
-        display: inline-block;
-        border-radius: 1rem;
-        background: #2c2e31;
-      "
-    >
-      Shift
-    </span>
-    +
-    <span
-      style="
-        padding: 1rem;
-        display: inline-block;
-        border-radius: 1rem;
-        background: #2c2e31;
-      "
-    >
-      R
-    </span>
-  `);
-}
diff --git a/frontend/src/ts/elements/psa.tsx b/frontend/src/ts/elements/psa.tsx
index a86b81c8f414..34173168adc3 100644
--- a/frontend/src/ts/elements/psa.tsx
+++ b/frontend/src/ts/elements/psa.tsx
@@ -203,8 +203,11 @@ export async function show(): Promise<void> {
   });
 }
 
-authEvent.subscribe((event) => {
-  if (event.type === "authStateChanged") {
-    void show();
-  }
-});
+/** Shows the PSAs on every auth state change. */
+export function init(): void {
+  authEvent.subscribe((event) => {
+    if (event.type === "authStateChanged") {
+      void show();
+    }
+  });
+}
diff --git a/frontend/src/ts/index.tsx b/frontend/src/ts/index.tsx
index 404a438d18b8..64a115cc1df5 100644
--- a/frontend/src/ts/index.tsx
+++ b/frontend/src/ts/index.tsx
@@ -17,21 +17,18 @@ import { Config } from "./config/store";
 import * as TestTimer from "./test/test-timer";
 import { toggleSmoothedBurst } from "./states/result";
 import { onAuthStateChanged } from "./auth";
-import "./elements/no-css";
-import "./states/connection";
 import "./test/tts";
 import { addToGlobal } from "./utils/misc";
 import { fetchLatestVersion } from "./utils/version";
 import * as Sentry from "./sentry";
 import * as Cookies from "./cookies";
-import "./elements/psa";
 import { applyEngineSettings } from "./anim";
 import { qs, qsa, qsr } from "./utils/dom";
 import { render } from "solid-js/web";
 import { App } from "./components/core/App";
-import "./ready";
 import { setVersion } from "./states/core";
 import { loadFromLocalStorage } from "./config/lifecycle";
+import { boot } from "./boot";
 
 import "./input/hotkeys";
 import { showModal } from "./states/modals";
@@ -64,6 +61,7 @@ if (import.meta.env.DEV) {
 // render before anything that might touch component-rendered DOM (eg. test page).
 // Renders after the static markup in <body> (index.html)
 render(() => <App />, document.body);
+void boot();
 
 applyEngineSettings();
 void loadFromLocalStorage();
diff --git a/frontend/src/ts/states/connection.ts b/frontend/src/ts/states/connection.ts
index 250e1f3d1e89..49ed0df372e8 100644
--- a/frontend/src/ts/states/connection.ts
+++ b/frontend/src/ts/states/connection.ts
@@ -1,7 +1,6 @@
 import { createSignal } from "solid-js";
 import { debounce } from "throttle-debounce";
 import { showSuccessNotification } from "./notifications";
-import { onDOMReady } from "../utils/dom";
 import { addBanner, removeBanner } from "./banners";
 import { isTestActive } from "./test";
 
@@ -45,11 +44,11 @@ function handleConnectionChange(newState: boolean): void {
   throttledHandleState();
 }
 
-onDOMReady(() => {
+export function initConnection(): void {
   window.addEventListener("online", () => handleConnectionChange(true));
   window.addEventListener("offline", () => handleConnectionChange(false));
   setOnline(navigator.onLine);
   if (!isOnline()) {
     showOfflineBanner();
   }
-});
+}
diff --git a/frontend/src/ts/states/core.ts b/frontend/src/ts/states/core.ts
index 5cca4c3ecbd4..42b6b452a1c3 100644
--- a/frontend/src/ts/states/core.ts
+++ b/frontend/src/ts/states/core.ts
@@ -23,7 +23,7 @@ export const [getThemeIndicator, setThemeIndicator] = createSignal<{
 });
 
 export const [getGlobalOffsetTop, setGlobalOffsetTop] = createSignal(0);
-// #app stays hidden until the config and auth are loaded (see ready.ts)
+// #app stays hidden until the config and auth are loaded (see boot.ts)
 export const [isAppReady, setAppReady] = createSignal(false);
 export const [getIsScreenshotting, setIsScreenshotting] = createSignal(false);
 

From 25d409ca61ed777032e4aec94027baa733020b9b Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 27 Oct 2026 23:25:49 +0100
Subject: [PATCH 2/5] refactor: drop no-CSS noscript fallbacks, the no-JS
 warning covers them (L6)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NZNRfGDYsGYMUTp2zYUTrv
---
 docs/specs/solid-monkeytype/roadmap.md |  2 +-
 frontend/src/html/warnings.html        | 58 +-------------------------
 2 files changed, 3 insertions(+), 57 deletions(-)

diff --git a/docs/specs/solid-monkeytype/roadmap.md b/docs/specs/solid-monkeytype/roadmap.md
index 89456e8f9fa8..fb09b8c63e21 100644
--- a/docs/specs/solid-monkeytype/roadmap.md
+++ b/docs/specs/solid-monkeytype/roadmap.md
@@ -133,7 +133,7 @@ Serial; each step needs the previous one. Verify each in the browser (`__mt.chec
 | [ ] | L3 | M · PR | Monkey power as a component owning its canvas, positioned from the caret; replaces App's `MonkeyPower.init` on mount (L6 stopgap) | T3 |
 | [ ] | L4 | M · PR | Result word highlight becomes part of words history, driven by a highlighted-range signal from the chart | none |
 | [ ] | L5 | M · PR | Screenshot-mode signal; elements hide through state (incl. the static `#nocss` box); capture uses the result ref | none |
-| [x] | L6 | M · PR | Boot cleanup: the ready module goes into App lifecycle / a boot module; PSA, merch banner and no-CSS detection become state plus components. Done: DOM-free `boot.ts` (called after render) awaits config then auth, sets app ready, shows merch banner, syncs server config, registers the service worker, and starts connection listeners (`initConnection`, was `onDOMReady`) and PSA (`Psa.init`, still on the auth bus until U3); App owns the body transition (effect on app ready) and calls `MonkeyPower.init` on mount until L3; `NoCssDetails` portals into empty mount points of the static `#nocss` box (`<noscript>` fallbacks); `ready.ts` and `no-css.ts` deleted, no `onDOMReady` callers left | none |
+| [x] | L6 | M · PR | Boot cleanup: the ready module goes into App lifecycle / a boot module; PSA, merch banner and no-CSS detection become state plus components. Done: DOM-free `boot.ts` (called after render) awaits config then auth, sets app ready, shows merch banner, syncs server config, registers the service worker, and starts connection listeners (`initConnection`, was `onDOMReady`) and PSA (`Psa.init`, still on the auth bus until U3); App owns the body transition (effect on app ready) and calls `MonkeyPower.init` on mount until L3; `NoCssDetails` portals into empty mount points of the static `#nocss` box; `ready.ts` and `no-css.ts` deleted, no `onDOMReady` callers left | none |
 | [ ] | L7 | S · commit | Remove stray DOM queries: account page, leaderboard table, captcha, challenge controller header, ad/analytics controllers. Done except the leaderboard table: #8524 rewrites its scroll-to-user and should switch to DataTable's `rowSelection.scrollToActiveRow` | none |
 | [ ] | L8 | S · commit | Delete dead modules: result batches, character counter, discord avatar util, input indicator, unused input-validation exports, tag builder plus its spec | none |
 | [ ] | L9 | M · PR | Replace the sorted-table utility with DataTable | none |
diff --git a/frontend/src/html/warnings.html b/frontend/src/html/warnings.html
index a9d5c1212fc4..6a4763a7baa8 100644
--- a/frontend/src/html/warnings.html
+++ b/frontend/src/html/warnings.html
@@ -108,55 +108,7 @@
       It seems like the CSS failed to load. Please try clearing your cache to
       redownload the styles:
       <br />
-      <span class="keys" id="nocss-keys">
-        <noscript>
-          <span
-            style="
-              padding: 1rem;
-              display: inline-block;
-              border-radius: 1rem;
-              background: #2c2e31;
-              margin-top: 1rem;
-              margin-bottom: 1rem;
-            "
-          >
-            Ctrl
-          </span>
-          /
-          <span
-            style="
-              padding: 1rem;
-              display: inline-block;
-              border-radius: 1rem;
-              background: #2c2e31;
-            "
-          >
-            Cmd
-          </span>
-          +
-          <span
-            style="
-              padding: 1rem;
-              display: inline-block;
-              border-radius: 1rem;
-              background: #2c2e31;
-            "
-          >
-            Shift
-          </span>
-          +
-          <span
-            style="
-              padding: 1rem;
-              display: inline-block;
-              border-radius: 1rem;
-              background: #2c2e31;
-            "
-          >
-            R
-          </span>
-        </noscript>
-      </span>
+      <span class="keys" id="nocss-keys"></span>
       <br />
       You could also try to reinstall the service worker:
       <br />
@@ -174,13 +126,7 @@
       If that doesn't help contact support (support@monkeytype.com or
       discord.gg/monkeytype)
     </span>
-    <span class="requestedStylesheets" id="nocss-stylesheets">
-      <noscript>
-        If the website works for a bit but then this screen comes back, clear
-        your cache again and then on Monkeytype open the command line (esc) and
-        search for "Clear SW cache".
-      </noscript>
-    </span>
+    <span class="requestedStylesheets" id="nocss-stylesheets"></span>
     <span class="requestedJs" id="nocss-js"></span>
   </div>
 </div>

From 9e8f628721f8044be87063ccc1dc734997a7772a Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 27 Oct 2026 23:28:31 +0100
Subject: [PATCH 3/5] refactor: body transition via useBodyClasses (L6)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NZNRfGDYsGYMUTp2zYUTrv
---
 frontend/src/ts/components/core/App.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/components/core/App.tsx b/frontend/src/ts/components/core/App.tsx
index 781c4b38135a..ced3d6714e18 100644
--- a/frontend/src/ts/components/core/App.tsx
+++ b/frontend/src/ts/components/core/App.tsx
@@ -3,9 +3,10 @@ import {
   RouterContextProvider,
   RouterProvider as RouteRenderer,
 } from "@tanstack/solid-router";
-import { createEffect, JSXElement, onMount } from "solid-js";
+import { JSXElement, onMount } from "solid-js";
 
 import * as MonkeyPower from "../../elements/monkey-power";
+import { useBodyClasses } from "../../hooks/useBodyClasses";
 import { queryClient } from "../../queries";
 import { router } from "../../router/app-router";
 import { getGlobalOffsetTop, isAppReady } from "../../states/core";
@@ -29,11 +30,9 @@ import { Theme } from "./Theme";
 
 export function App(): JSXElement {
   // set once ready, so the initial theme doesn't animate the background color
-  createEffect(() => {
-    if (isAppReady()) {
-      document.body.style.transition = "background .25s, transform .05s";
-    }
-  });
+  useBodyClasses(() => ({
+    "[transition:background_.25s,transform_.05s]": isAppReady(),
+  }));
 
   // until monkey power owns its canvas (L3)
   onMount(() => MonkeyPower.init());

From 9b78c931954e0a983f83245e5e3a9bea87670744 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 27 Oct 2026 23:53:21 +0100
Subject: [PATCH 4/5] refactor: drop the body transition gate, the first paint
 has the stored theme (L6)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NZNRfGDYsGYMUTp2zYUTrv
---
 docs/specs/solid-monkeytype/roadmap.md  | 2 +-
 frontend/src/ts/components/core/App.tsx | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/docs/specs/solid-monkeytype/roadmap.md b/docs/specs/solid-monkeytype/roadmap.md
index fb09b8c63e21..3020024df2ab 100644
--- a/docs/specs/solid-monkeytype/roadmap.md
+++ b/docs/specs/solid-monkeytype/roadmap.md
@@ -133,7 +133,7 @@ Serial; each step needs the previous one. Verify each in the browser (`__mt.chec
 | [ ] | L3 | M · PR | Monkey power as a component owning its canvas, positioned from the caret; replaces App's `MonkeyPower.init` on mount (L6 stopgap) | T3 |
 | [ ] | L4 | M · PR | Result word highlight becomes part of words history, driven by a highlighted-range signal from the chart | none |
 | [ ] | L5 | M · PR | Screenshot-mode signal; elements hide through state (incl. the static `#nocss` box); capture uses the result ref | none |
-| [x] | L6 | M · PR | Boot cleanup: the ready module goes into App lifecycle / a boot module; PSA, merch banner and no-CSS detection become state plus components. Done: DOM-free `boot.ts` (called after render) awaits config then auth, sets app ready, shows merch banner, syncs server config, registers the service worker, and starts connection listeners (`initConnection`, was `onDOMReady`) and PSA (`Psa.init`, still on the auth bus until U3); App owns the body transition (effect on app ready) and calls `MonkeyPower.init` on mount until L3; `NoCssDetails` portals into empty mount points of the static `#nocss` box; `ready.ts` and `no-css.ts` deleted, no `onDOMReady` callers left | none |
+| [x] | L6 | M · PR | Boot cleanup: the ready module goes into App lifecycle / a boot module; PSA, merch banner and no-CSS detection become state plus components. Done: DOM-free `boot.ts` (called after render) awaits config then auth, sets app ready, shows merch banner, syncs server config, registers the service worker, and starts connection listeners (`initConnection`, was `onDOMReady`) and PSA (`Psa.init`, still on the auth bus until U3); App calls `MonkeyPower.init` on mount until L3 (the body transition gate went in 99ef85bb6: the first paint has the stored theme); `NoCssDetails` portals into empty mount points of the static `#nocss` box; `ready.ts` and `no-css.ts` deleted, no `onDOMReady` callers left | none |
 | [ ] | L7 | S · commit | Remove stray DOM queries: account page, leaderboard table, captcha, challenge controller header, ad/analytics controllers. Done except the leaderboard table: #8524 rewrites its scroll-to-user and should switch to DataTable's `rowSelection.scrollToActiveRow` | none |
 | [ ] | L8 | S · commit | Delete dead modules: result batches, character counter, discord avatar util, input indicator, unused input-validation exports, tag builder plus its spec | none |
 | [ ] | L9 | M · PR | Replace the sorted-table utility with DataTable | none |
diff --git a/frontend/src/ts/components/core/App.tsx b/frontend/src/ts/components/core/App.tsx
index ced3d6714e18..c1117847447f 100644
--- a/frontend/src/ts/components/core/App.tsx
+++ b/frontend/src/ts/components/core/App.tsx
@@ -6,7 +6,6 @@ import {
 import { JSXElement, onMount } from "solid-js";
 
 import * as MonkeyPower from "../../elements/monkey-power";
-import { useBodyClasses } from "../../hooks/useBodyClasses";
 import { queryClient } from "../../queries";
 import { router } from "../../router/app-router";
 import { getGlobalOffsetTop, isAppReady } from "../../states/core";
@@ -29,11 +28,6 @@ import { NoCssDetails } from "./NoCssDetails";
 import { Theme } from "./Theme";
 
 export function App(): JSXElement {
-  // set once ready, so the initial theme doesn't animate the background color
-  useBodyClasses(() => ({
-    "[transition:background_.25s,transform_.05s]": isAppReady(),
-  }));
-
   // until monkey power owns its canvas (L3)
   onMount(() => MonkeyPower.init());
 

From 0401efe5f05213216300423c4fdf2a00bca2178a Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 28 Oct 2026 09:38:52 +0100
Subject: [PATCH 5/5] docs(roadmap): email-handler still uses onDOMReady and qs
 (L6, CL1)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NZNRfGDYsGYMUTp2zYUTrv
---
 docs/specs/solid-monkeytype/roadmap.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/specs/solid-monkeytype/roadmap.md b/docs/specs/solid-monkeytype/roadmap.md
index 3020024df2ab..253923e82483 100644
--- a/docs/specs/solid-monkeytype/roadmap.md
+++ b/docs/specs/solid-monkeytype/roadmap.md
@@ -133,7 +133,7 @@ Serial; each step needs the previous one. Verify each in the browser (`__mt.chec
 | [ ] | L3 | M · PR | Monkey power as a component owning its canvas, positioned from the caret; replaces App's `MonkeyPower.init` on mount (L6 stopgap) | T3 |
 | [ ] | L4 | M · PR | Result word highlight becomes part of words history, driven by a highlighted-range signal from the chart | none |
 | [ ] | L5 | M · PR | Screenshot-mode signal; elements hide through state (incl. the static `#nocss` box); capture uses the result ref | none |
-| [x] | L6 | M · PR | Boot cleanup: the ready module goes into App lifecycle / a boot module; PSA, merch banner and no-CSS detection become state plus components. Done: DOM-free `boot.ts` (called after render) awaits config then auth, sets app ready, shows merch banner, syncs server config, registers the service worker, and starts connection listeners (`initConnection`, was `onDOMReady`) and PSA (`Psa.init`, still on the auth bus until U3); App calls `MonkeyPower.init` on mount until L3 (the body transition gate went in 99ef85bb6: the first paint has the stored theme); `NoCssDetails` portals into empty mount points of the static `#nocss` box; `ready.ts` and `no-css.ts` deleted, no `onDOMReady` callers left | none |
+| [x] | L6 | M · PR | Boot cleanup: the ready module goes into App lifecycle / a boot module; PSA, merch banner and no-CSS detection become state plus components. Done: DOM-free `boot.ts` (called after render) awaits config then auth, sets app ready, shows merch banner, syncs server config, registers the service worker, and starts connection listeners (`initConnection`, was `onDOMReady`) and PSA (`Psa.init`, still on the auth bus until U3); App calls `MonkeyPower.init` on mount until L3 (the body transition gate went in 99ef85bb6: the first paint has the stored theme); `NoCssDetails` portals into empty mount points of the static `#nocss` box; `ready.ts` and `no-css.ts` deleted; the app has no `onDOMReady` callers left (`email-handler.html` still uses it, see CL1) | none |
 | [ ] | L7 | S · commit | Remove stray DOM queries: account page, leaderboard table, captcha, challenge controller header, ad/analytics controllers. Done except the leaderboard table: #8524 rewrites its scroll-to-user and should switch to DataTable's `rowSelection.scrollToActiveRow` | none |
 | [ ] | L8 | S · commit | Delete dead modules: result batches, character counter, discord avatar util, input indicator, unused input-validation exports, tag builder plus its spec | none |
 | [ ] | L9 | M · PR | Replace the sorted-table utility with DataTable | none |
@@ -145,7 +145,7 @@ Serial; each step needs the previous one. Verify each in the browser (`__mt.chec
 
 | Done | ID | Size | Step | Blocked by |
 |---|---|---|---|---|
-| [ ] | CL1 | M · PR | Delete the DOM-wrapper utility library, the ref-with-utils hook and `onDOMReady` (no callers since L6) | T7, all L, U2 |
+| [ ] | CL1 | M · PR | Delete the DOM-wrapper utility library, the ref-with-utils hook and `onDOMReady` (the app has none since L6; `email-handler.html`, a separate Vite entry, still imports `qs` and `onDOMReady` from `utils/dom`, so migrate that page first) | T7, all L, U2 |
 | [ ] | CL2 | M · PR | DOM-query / `innerHTML` lint ban, with the server-HTML allowlist (notifications, simple modal, version history, quote-search highlight) | CL1 |
 | [ ] | CL3 | M · PR | **Announced removal of legacy theme selectors** (old ids, classes, `letter`): the single break for user custom CSS; delete remaining SCSS | T1, L11, L12 |
 | [ ] | CL4 | S · commit | Update coding standards and agent docs to describe only the final patterns | CL1 |