[Miodec]

Summary

Roadmap step L6. ready.ts and its onDOMReady callback are replaced by a DOM-free boot module plus App lifecycle code.

 index.tsx
   render(<App />)
+  boot()                         # boot.ts, DOM-free
+    initConnection()             # was onDOMReady in states/connection
+    Psa.init()                   # was a side-effect import; still on authEvent until U3
+    await config, then auth
+    merch banner, setAppReady, server config sync, service worker
-import "./ready"                 # onDOMReady → same steps + MonkeyPower.init (body transition gate already gone on master)
-import "./elements/no-css"       # module-scope setHtml into #nocss
-import "./elements/psa"
-import "./states/connection"

 <App>
+  onMount: MonkeyPower.init()     # stopgap until L3
+  <NoCssDetails>                  # Portals into #nocss-keys / -stylesheets / -js

warnings.html: #nocss stays static and gets empty mount points. Its no-JS fallbacks (generic Ctrl/Cmd keys, the "clear SW cache" hint) are dropped: without JS the no-JS warning covers the page, and JS always overwrote them. The Portal wrapper div is set to display: contents so the inline text isn't broken.

The roadmap row is ticked, and the rows that cite this work (U3, L3, L5, CL1) are updated.

Evidence

• New specs: boot.spec.ts (app ready waits for config and then auth; connection and PSA start before the awaits) and NoCssDetails.spec.tsx (Ctrl vs Cmd, stylesheet filter, client version). The full frontend suite passes (1669 tests), and lint passes.
• Browser check (dev):
  • The app fades in.
  • There is one monkey-power canvas, and checkLayout() returns [] after typing.
  • The merch banner shows when not closed, and the PSA request is made once.
  • Going offline and back online shows "No internet connection", then "back online".
  • No console errors.
  • With every stylesheet disabled, the no-CSS screen shows "Cmd + Shift + R" inline and the details below.

Merge Danger

Door: two-way

Blast Radius: boot

Startup ordering changes slightly. Connection listeners and the PSA subscription now start synchronously after render instead of on the next task after DOM-ready. App-ready still waits for config and auth, as before. If no-CSS or the PSA breaks, it shows only on startup.

🤖 Generated with Claude Code

https://claude.ai/code/session_01NZNRfGDYsGYMUTp2zYUTrv

[Copilot]

🟡 Changes recommended

An unresolved moderate finding shows onDOMReady still has an active caller in frontend/src/email-handler.html, so the roadmap's "no callers" claim is inaccurate and the planned deletion would break the email-handler build.

1 open issue

• Email handler still calls onDOMReady · New

What changed in this PR

Roadmap step L6: replaces the DOM-ready ready.ts module (and the module-scope side effects in no-css.ts, psa.tsx, connection.ts) with a DOM-free boot() function plus App-lifecycle code. Startup work now runs synchronously after render(<App />): connection listeners and the PSA subscription start immediately, then boot awaits config → auth before flipping isAppReady, showing the merch banner, syncing server config, and registering the service worker. The body transition, MonkeyPower.init (stopgap until L3), and no-CSS detection move into App, with NoCssDetails portaling into empty mount points of the static #nocss markup (now with <noscript> fallbacks).

Changes:

• New DOM-free boot.ts orchestrator; ready.ts/no-css.ts deleted; initConnection()/Psa.init() replace module-scope side effects.
• NoCssDetails.tsx component + warnings.html restructured with static mount points and <noscript> fallbacks; App.tsx gains body-transition effect, MonkeyPower.init on mount, and <NoCssDetails/>.
• New specs (boot.spec.ts, NoCssDetails.spec.tsx) and roadmap updates (L6 ticked; U3/L3/L5/CL1 annotated).

File	Description
frontend/​src/​ts/​boot.ts	New DOM-free boot orchestrator; awaits config→auth, starts connection/PSA before awaits, registers SW
frontend/​src/​ts/​index.tsx	Drops side-effect imports (no-css, connection, psa, ready); calls void boot() after render
frontend/​src/​ts/​states/​connection.ts	onDOMReady callback → exported initConnection()
frontend/​src/​ts/​elements/​psa.tsx	Module-scope auth subscription wrapped in exported init()
frontend/​src/​ts/​elements/​no-css.ts	Deleted; logic moved to NoCssDetails.tsx
frontend/​src/​ts/​components/​core/​NoCssDetails.tsx	New component portaling reload-shortcut/stylesheets/scripts into static #nocss mount points
frontend/​src/​ts/​components/​core/​App.tsx	Body-transition effect on app-ready, MonkeyPower.init on mount, renders <NoCssDetails/>
frontend/​src/​ts/​states/​core.ts	Comment update (ready.ts → boot.ts)
frontend/​src/​html/​warnings.html	Static mount-point ids + <noscript> no-JS fallbacks
frontend/​__tests__/​root/​boot.spec.ts	New spec: boot ordering (config→auth), early connection/PSA start
frontend/​__tests__/​components/​core/​NoCssDetails.spec.tsx	New spec: Ctrl vs Cmd, stylesheet filter, client version
docs/​specs/​solid-monkeytype/​roadmap.md	L6 ticked; U3/L3/L5/CL1 rows updated — one onDOMReady-caller claim is inaccurate (see comment)

The implementation is clean and well-covered by tests. The only issue found is a documentation accuracy gap in the roadmap: email-handler.html still imports onDOMReady, so the "no callers left" annotations aren't fully accurate and are relevant to the future CL1 deletion step.

_{Review effort: Balanced}