From 6e3cf1a44cc261148076c0230e5079250495da58 Mon Sep 17 00:00:00 2001
From: Thomas Kosiewski <tk@coder.com>
Date: Wed, 14 Oct 2026 04:36:59 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=A4=96=20tests:=20pin=20the=20static?=
 =?UTF-8?q?=20first-run=20view=20to=20the=20live=20gateway=20step=20(T3=20?=
 =?UTF-8?q?C=20step=202=20PR=202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The server will paint a static copy of the onboarding wizard's gateway step before the app JS runs
(plan section 5.6), and the live wizard replaces it in one commit. This test parses
FIRST_RUN_VIEW_HTML the way the page will (a <template>, content.cloneNode), puts it in the body
as #xum-pre, renders OnboardingWizardSplash over it, and compares the tags, classes and text of
the overlay and dialog with the live ones. It fails while the constant does not exist yet.

anthropic:claude-opus-5-5 high 322.92
---
 .../ui/onboarding/firstRunViewParity.test.ts  | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 tests/ui/onboarding/firstRunViewParity.test.ts

diff --git a/tests/ui/onboarding/firstRunViewParity.test.ts b/tests/ui/onboarding/firstRunViewParity.test.ts
new file mode 100644
index 00000000000..82946a59ead
--- /dev/null
+++ b/tests/ui/onboarding/firstRunViewParity.test.ts
@@ -0,0 +1,111 @@
+/**
+ * The server's static first-run view must match the live wizard's gateway step (T3 #5971, C step 2,
+ * plan section 5.6, PR 2). The live wizard replaces the static copy in one commit, so any drift in
+ * tags, classes or text shows as a jump at handoff. Catches, for example, a class changed on the
+ * live step (OnboardingWizardSplash) without the same change in FIRST_RUN_VIEW_HTML.
+ *
+ * The test renders OnboardingWizardSplash directly: SplashScreenProvider shows no splash in test
+ * mode (DISABLE_SPLASH_SCREENS, SplashScreens/index.ts).
+ */
+import "../dom";
+import React from "react";
+import { act, cleanup, render } from "@testing-library/react";
+
+let mockProviders: { config: Record<string, unknown> | null; loading: boolean };
+
+jest.mock("@/browser/hooks/useProvidersConfig", () => ({
+  useProvidersConfig: () => ({
+    ...mockProviders,
+    refresh: jest.fn(),
+    updateOptimistically: jest.fn(),
+  }),
+}));
+jest.mock("@/browser/features/SplashScreens/SplashScreenProvider", () => ({
+  ...jest.requireActual<typeof import("@/browser/features/SplashScreens/SplashScreenProvider")>(
+    "@/browser/features/SplashScreens/SplashScreenProvider"
+  ),
+  useOnboardingPause: () => ({ paused: null, pause: jest.fn(), resume: jest.fn() }),
+}));
+jest.mock("@/browser/contexts/SettingsContext", () => ({
+  useSettings: () => ({ open: jest.fn(), registerOnClose: () => () => undefined }),
+}));
+jest.mock("@/browser/contexts/ProjectContext", () => ({
+  useProjectContext: () => ({ addProject: jest.fn(), userProjects: new Map() }),
+}));
+jest.mock("@/browser/contexts/API", () => ({
+  useAPI: () => ({ api: null }),
+  useLiveAPI: () => null,
+}));
+jest.mock("@/browser/hooks/useRouting", () => ({
+  useRouting: () => ({ navigateToProject: jest.fn() }),
+}));
+jest.mock("@/browser/hooks/useMuxGatewayAccountStatus", () => ({
+  ...jest.requireActual<typeof import("@/browser/hooks/useMuxGatewayAccountStatus")>(
+    "@/browser/hooks/useMuxGatewayAccountStatus"
+  ),
+  useMuxGatewayAccountStatus: () => ({
+    data: null,
+    error: null,
+    isLoading: false,
+    refresh: jest.fn(),
+  }),
+}));
+
+import { OnboardingWizardSplash } from "@/browser/features/SplashScreens/OnboardingWizardSplash";
+import { FIRST_RUN_VIEW_ID } from "@/common/constants/firstRunView";
+import { FIRST_RUN_VIEW_HTML } from "@/node/orpc/firstRunView";
+
+/** Every element in document order: tag, class attribute and its own text, whitespace-collapsed. */
+function shape(root: Element): string[] {
+  const norm = (s: string) => s.replace(/\s+/g, " ").trim();
+  return [root, ...Array.from(root.querySelectorAll("*"))].map((el) => {
+    const text = Array.from(el.childNodes)
+      .filter((n) => n.nodeType === Node.TEXT_NODE)
+      .map((n) => n.textContent ?? "")
+      .join("");
+    return `<${el.tagName.toLowerCase()} class="${norm(el.getAttribute("class") ?? "")}">${norm(text)}`;
+  });
+}
+
+/** Parses the constant the way the page will: from a <template>, cloned with content.cloneNode. */
+function staticView(): HTMLElement {
+  const doc = new DOMParser().parseFromString(
+    `<template>${FIRST_RUN_VIEW_HTML}</template>`,
+    "text/html"
+  );
+  const fragment = doc.querySelector("template")!.content.cloneNode(true) as DocumentFragment;
+  expect(fragment.children).toHaveLength(1);
+  return document.importNode(fragment.firstElementChild!, true) as HTMLElement;
+}
+
+afterEach(() => {
+  cleanup();
+  document.body.innerHTML = "";
+});
+
+test("the static view is one inert element with the shared id and no main landmark", () => {
+  const view = staticView();
+  expect(view.id).toBe(FIRST_RUN_VIEW_ID);
+  expect(view.hasAttribute("inert")).toBe(true);
+  expect(view.querySelector("main")).toBeNull(); // the boot loader's <main> stays the only one
+});
+
+test("the static view matches the live gateway step's overlay and dialog", () => {
+  const view = staticView();
+  const expected = (selector: string) => shape(view.querySelector(selector)!);
+  const staticOverlay = expected("[data-modal-dialog-overlay]");
+  const staticDialog = expected("[role=dialog]");
+
+  // Under the static view, the live wizard opens on the gateway step and removes it (PR 1).
+  document.body.append(view);
+  mockProviders = { config: null, loading: true };
+  const wizard = () => React.createElement(OnboardingWizardSplash, { onDismiss: jest.fn() });
+  const rendered = render(wizard());
+  mockProviders = { config: {}, loading: false };
+  act(() => rendered.rerender(wizard()));
+  expect(document.getElementById(FIRST_RUN_VIEW_ID)).toBeNull();
+
+  const live = (selector: string) => shape(document.body.querySelector(selector)!);
+  expect(live("[data-modal-dialog-overlay]")).toEqual(staticOverlay);
+  expect(live("[role=dialog]")).toEqual(staticDialog);
+});

From e812b9eb05e774619462c05c77e681a39af774d5 Mon Sep 17 00:00:00 2001
From: Thomas Kosiewski <tk@coder.com>
Date: Wed, 14 Oct 2026 04:39:57 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=A4=96=20perf:=20add=20the=20static?=
 =?UTF-8?q?=20first-run=20view's=20markup=20as=20a=20server=20constant=20(?=
 =?UTF-8?q?T3=20C=20step=202=20PR=202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FIRST_RUN_VIEW_HTML in src/node/orpc/firstRunView.ts is a copy of the onboarding wizard's
gateway step, the view PR 4 will paint on / before the app JS runs. No response uses it yet.

It comes from the prototype's 412 px capture (61 elements): the app shell's <main> is a <div>,
Radix runtime artifacts (focus guards, generated ids, aria-hidden, tabindex, pointer-events) and
the disabled attributes are gone, the overlay and dialog take the live class strings, and the
root is the inert #xum-pre element. A SECURITY AUDIT comment marks it as trusted server text.

The parity test now uses window.DOMParser and window.Node: tests/ui/dom.ts does not install them
as globals.

anthropic:claude-opus-5-5 high 322.92
---
 src/node/orpc/firstRunView.ts                 | 91 +++++++++++++++++++
 .../ui/onboarding/firstRunViewParity.test.ts  |  4 +-
 2 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 src/node/orpc/firstRunView.ts

diff --git a/src/node/orpc/firstRunView.ts b/src/node/orpc/firstRunView.ts
new file mode 100644
index 00000000000..4a177c0e0e0
--- /dev/null
+++ b/src/node/orpc/firstRunView.ts
@@ -0,0 +1,91 @@
+import { FIRST_RUN_VIEW_ID } from "@/common/constants/firstRunView";
+
+/**
+ * The static first-run view (T3 #5971, Option C step 2, plan section 5.6): a copy of the onboarding
+ * wizard's gateway step ("Xum Gateway (evaluation credits)"), the step a new server opens on. On `/`,
+ * the server will put it in a <template> and an early script will show it before the app JS runs
+ * (PR 4). Until then nothing serves it. The live wizard removes it once it shows the same step.
+ *
+ * Captured from the live page at 412 px (61 elements), then edited:
+ * - The app shell's <main> is a <div>. The boot loader's <main> in #root stays the only landmark.
+ * - Radix runtime artifacts are gone: focus guards, generated ids, aria-hidden, tabindex,
+ *   pointer-events. The disabled attributes are gone too: the live buttons are enabled, and
+ *   `disabled:opacity-50` made the copy look disabled.
+ * - The root is `inert`, so no part of the copy takes focus or clicks before the handoff.
+ * tests/ui/onboarding/firstRunViewParity.test.ts fails when the overlay or the dialog drifts from
+ * the live wizard in tags, classes or text.
+ *
+ * SECURITY AUDIT: trusted server text. Every byte is fixed at build time: it holds no user,
+ * request, config or repo data, and nothing may be interpolated into it but FIRST_RUN_VIEW_ID.
+ * PR 4 inserts it with `template.content.cloneNode(true)`, never with innerHTML, outerHTML or
+ * insertAdjacentHTML.
+ */
+export const FIRST_RUN_VIEW_HTML = `<div id="${FIRST_RUN_VIEW_ID}" inert style="position:fixed;inset:0;overflow:hidden">
+  <div>
+    <div class="bg-surface-primary h-full">
+      <div class="bg-surface-primary mobile-layout flex h-full overflow-hidden pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pl-[env(safe-area-inset-left)]">
+        <div class="mobile-main-content flex min-w-0 flex-1 flex-col overflow-hidden">
+          <div class="mobile-layout flex flex-1 overflow-hidden">
+            <div class="bg-surface-primary flex flex-1 flex-col overflow-hidden">
+              <div class="bg-sidebar border-border-light flex shrink-0 items-center border-b px-4 py-2 ">
+                <button type="button" class="border-border-medium bg-background-secondary text-foreground hover:bg-hover rounded-md border px-3 py-1.5 text-sm transition-colors " aria-label="Open sidebar menu">Open sidebar</button>
+              </div>
+              <div class="flex flex-1 items-center justify-center px-6">
+                <p class="text-content-secondary text-sm">Select or add a project to get started.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div data-modal-dialog-overlay="" class="fixed inset-0 z-[1500] before:absolute before:inset-0 before:bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"></div>
+  <div role="dialog" class="bg-dark border-border fixed top-[50%] left-[50%] z-[1500] grid w-[90%] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] max-h-[85vh] grid-rows-[auto_minmax(0,1fr)_auto]" style="max-width: 500px">
+    <div class="flex flex-col space-y-1.5 text-left">
+      <h2 class="text-foreground text-lg font-semibold leading-none tracking-tight">Xum Gateway (evaluation credits)</h2>
+    </div>
+    <div class="min-h-0 overflow-y-auto">
+      <div class="text-content-secondary flex flex-col gap-4">
+        <div class="flex items-center justify-end gap-2">
+          <span class="text-content-secondary text-xs" aria-hidden="true">1 / 7</span>
+          <div class="flex items-center gap-1" role="img" aria-label="Step 1 of 7">
+            <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
+            <span class="h-1.5 w-1.5 rounded-full bg-border-medium"></span>
+            <span class="h-1.5 w-1.5 rounded-full bg-border-medium"></span>
+            <span class="h-1.5 w-1.5 rounded-full bg-border-medium"></span>
+            <span class="h-1.5 w-1.5 rounded-full bg-border-medium"></span>
+            <span class="h-1.5 w-1.5 rounded-full bg-border-medium"></span>
+            <span class="h-1.5 w-1.5 rounded-full bg-border-medium"></span>
+          </div>
+        </div>
+        <div class="flex flex-col gap-3">
+          <div class="text-foreground flex items-center gap-2 text-sm font-medium">
+            <span class="bg-accent/10 text-accent inline-flex h-8 w-8 items-center justify-center rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-4 w-4" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></span>
+            <span>Xum Gateway (evaluation credits)</span>
+          </div>
+          <div class="text-content-secondary flex flex-col gap-3 text-sm">
+            <p>Xum Gateway enables you to use free AI tokens from <a href="https://coder.com" target="_blank" rel="noopener noreferrer" class="text-accent underline">Coder</a>.</p>
+            <p>OSS contributors with GitHub accounts older than 12 months (or GitHub Pro members) can use this to get free evaluation credits.</p>
+            <div class="mt-3 flex flex-wrap gap-2">
+              <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all active:scale-[0.98] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-accent text-accent-foreground shadow hover:bg-accent-button-hover h-9 px-4 py-2">Login with Xum Gateway</button>
+            </div>
+            <p class="mt-3">You can also receive those credits through:</p>
+            <ul class="ml-4 list-disc space-y-1">
+              <li>early adopters can request credits tied to their GH logins on our <a href="https://discord.gg/VfZXvtnR" target="_blank" rel="noopener noreferrer" class="text-accent underline">Discord</a></li>
+              <li>vouchers which you can <a href="https://gateway.xum.cdr.dev" target="_blank" rel="noopener noreferrer" class="text-accent underline">claim here</a></li>
+            </ul>
+            <p class="mt-3">You can enable this in <button type="button" class="text-accent underline">Settings → Providers</button>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex gap-3 pt-4 justify-between">
+      <div></div>
+      <div class="flex items-center gap-3">
+        <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all active:scale-[0.98] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-accent text-accent-foreground shadow hover:bg-accent-button-hover h-9 px-4 py-2 min-w-24">Next</button>
+        <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all active:scale-[0.98] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-border-medium text-foreground shadow-sm hover:bg-border-darker h-9 px-4 py-2 min-w-24">Skip</button>
+      </div>
+    </div>
+    <button type="button" class="text-muted hover:text-foreground absolute top-4 right-4 rounded-sm transition-colors focus:outline-none disabled:pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button>
+  </div>
+</div>`;
diff --git a/tests/ui/onboarding/firstRunViewParity.test.ts b/tests/ui/onboarding/firstRunViewParity.test.ts
index 82946a59ead..6ae4e211ffe 100644
--- a/tests/ui/onboarding/firstRunViewParity.test.ts
+++ b/tests/ui/onboarding/firstRunViewParity.test.ts
@@ -60,7 +60,7 @@ function shape(root: Element): string[] {
   const norm = (s: string) => s.replace(/\s+/g, " ").trim();
   return [root, ...Array.from(root.querySelectorAll("*"))].map((el) => {
     const text = Array.from(el.childNodes)
-      .filter((n) => n.nodeType === Node.TEXT_NODE)
+      .filter((n) => n.nodeType === window.Node.TEXT_NODE)
       .map((n) => n.textContent ?? "")
       .join("");
     return `<${el.tagName.toLowerCase()} class="${norm(el.getAttribute("class") ?? "")}">${norm(text)}`;
@@ -69,7 +69,7 @@ function shape(root: Element): string[] {
 
 /** Parses the constant the way the page will: from a <template>, cloned with content.cloneNode. */
 function staticView(): HTMLElement {
-  const doc = new DOMParser().parseFromString(
+  const doc = new window.DOMParser().parseFromString(
     `<template>${FIRST_RUN_VIEW_HTML}</template>`,
     "text/html"
   );

From 4de5a0bdbbd46ac33648c00199888f4d4b61daab Mon Sep 17 00:00:00 2001
From: Thomas Kosiewski <tk@coder.com>
Date: Wed, 14 Oct 2026 04:55:37 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A4=96=20fix:=20give=20the=20static?=
 =?UTF-8?q?=20first-run=20view's=20shell=20the=20viewport=20height=20(PR?=
 =?UTF-8?q?=202=20review)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Codex P2 on #6444: outside #root, which globals.css sizes to the viewport, the shell's first
<div> had auto height, so its nested h-full resolved against nothing and the shell collapsed to
its content: the empty-state text sat at the top instead of the centre. The <div> is now h-full of
#xum-pre (position:fixed; inset:0). Checked by painting the constant over a built server at 390 and
1440 px: the dialog box matches the live one (20,120,351,604 and 470,188,500,524).

anthropic:claude-opus-5-5 high 322.92
---
 src/node/orpc/firstRunView.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/node/orpc/firstRunView.ts b/src/node/orpc/firstRunView.ts
index 4a177c0e0e0..6630487819d 100644
--- a/src/node/orpc/firstRunView.ts
+++ b/src/node/orpc/firstRunView.ts
@@ -8,6 +8,8 @@ import { FIRST_RUN_VIEW_ID } from "@/common/constants/firstRunView";
  *
  * Captured from the live page at 412 px (61 elements), then edited:
  * - The app shell's <main> is a <div>. The boot loader's <main> in #root stays the only landmark.
+ * - The shell's root is `h-full`: outside #root, which globals.css sizes to the viewport, its
+ *   nested `h-full` would resolve against an auto height and collapse to the content height.
  * - Radix runtime artifacts are gone: focus guards, generated ids, aria-hidden, tabindex,
  *   pointer-events. The disabled attributes are gone too: the live buttons are enabled, and
  *   `disabled:opacity-50` made the copy look disabled.
@@ -21,7 +23,7 @@ import { FIRST_RUN_VIEW_ID } from "@/common/constants/firstRunView";
  * insertAdjacentHTML.
  */
 export const FIRST_RUN_VIEW_HTML = `<div id="${FIRST_RUN_VIEW_ID}" inert style="position:fixed;inset:0;overflow:hidden">
-  <div>
+  <div class="h-full">
     <div class="bg-surface-primary h-full">
       <div class="bg-surface-primary mobile-layout flex h-full overflow-hidden pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pl-[env(safe-area-inset-left)]">
         <div class="mobile-main-content flex min-w-0 flex-1 flex-col overflow-hidden">

From 1a760834722aa77d3751befebffa122ed4e019ac Mon Sep 17 00:00:00 2001
From: Thomas Kosiewski <tk@coder.com>
Date: Wed, 14 Oct 2026 05:23:29 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=A4=96=20fix:=20stack=20the=20static?=
 =?UTF-8?q?=20first-run=20view=20on=20the=20live=20overlay's=20layer=20(PR?=
 =?UTF-8?q?=202=20review)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Codex P2 on #6444: #xum-pre is position:fixed, so it is a stacking context at the auto level, and
its z-[1500] overlay could not rise above the iOS standalone .ios-status-bar-band (fixed, z-index
1001). The live Radix overlay sits under body at 1500 and covers the band, so the band would change
at handoff. #xum-pre now has z-index:1500.

anthropic:claude-opus-5-5 high 322.92
---
 src/node/orpc/firstRunView.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/node/orpc/firstRunView.ts b/src/node/orpc/firstRunView.ts
index 6630487819d..2d22af7dc2a 100644
--- a/src/node/orpc/firstRunView.ts
+++ b/src/node/orpc/firstRunView.ts
@@ -14,6 +14,8 @@ import { FIRST_RUN_VIEW_ID } from "@/common/constants/firstRunView";
  *   pointer-events. The disabled attributes are gone too: the live buttons are enabled, and
  *   `disabled:opacity-50` made the copy look disabled.
  * - The root is `inert`, so no part of the copy takes focus or clicks before the handoff.
+ * - The root is `fixed`, so it is a stacking context: its z-index is the live overlay's 1500
+ *   (`z-[1500]`), or the iOS standalone `.ios-status-bar-band` (1001) would paint over the copy.
  * tests/ui/onboarding/firstRunViewParity.test.ts fails when the overlay or the dialog drifts from
  * the live wizard in tags, classes or text.
  *
@@ -22,7 +24,7 @@ import { FIRST_RUN_VIEW_ID } from "@/common/constants/firstRunView";
  * PR 4 inserts it with `template.content.cloneNode(true)`, never with innerHTML, outerHTML or
  * insertAdjacentHTML.
  */
-export const FIRST_RUN_VIEW_HTML = `<div id="${FIRST_RUN_VIEW_ID}" inert style="position:fixed;inset:0;overflow:hidden">
+export const FIRST_RUN_VIEW_HTML = `<div id="${FIRST_RUN_VIEW_ID}" inert style="position:fixed;inset:0;z-index:1500;overflow:hidden">
   <div class="h-full">
     <div class="bg-surface-primary h-full">
       <div class="bg-surface-primary mobile-layout flex h-full overflow-hidden pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pl-[env(safe-area-inset-left)]">