From 6e28d91b960118bdf02a84ac585330ce6b26ca07 Mon Sep 17 00:00:00 2001
From: alex <alex.xinliu@outlook.com>
Date: Thu, 5 Nov 2026 22:19:50 +0800
Subject: [PATCH] Make the editor respond faster on iPads and phones, and pages
 paint sooner

Each change was kept only if removing it measured slower (6x and 10x CPU throttle, slow 4G):
- Monaco loads in small steps, so taps during loading stay responsive.
- Run, Create File and opening a file start after the tap has painted.
- /app prerenders its title bar; signed-out visitors don't wait for Clerk.
- PostHog loads once the page is idle; events, early errors and web vitals are held for it.
- The stylesheet is inlined into the HTML, and Inter's fallback matches its metrics.
- Clerk middleware runs only for /api; locale routing is a next.config rewrite.
- The home page holds first paint until its hero window has arrived, so it does not grow after painting.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/next.config.ts                       | 28 +++++-
 apps/web/src/app/[locale]/(public)/page.tsx   |  5 +-
 apps/web/src/app/[locale]/app/page.test.tsx   | 47 ++++++++++
 apps/web/src/app/[locale]/app/page.tsx        | 79 +++++++++++++---
 .../app/components/MonacoPseudocodeEditor.tsx | 26 +++++-
 apps/web/src/app/globals.css                  | 14 ++-
 apps/web/src/instrumentation-client.ts        | 51 ++++++++--
 apps/web/src/lib/afterNextPaint.test.ts       | 41 ++++++++
 apps/web/src/lib/afterNextPaint.ts            | 35 +++++++
 apps/web/src/lib/analytics.test.ts            | 39 ++++++--
 apps/web/src/lib/analytics.ts                 | 32 ++++++-
 apps/web/src/lib/analyticsBootstrap.test.ts   | 68 ++++++++++++++
 apps/web/src/lib/analyticsBootstrap.ts        | 93 +++++++++++++++++++
 apps/web/src/lib/auth-components.tsx          | 15 +++
 apps/web/src/lib/clerkSessionHint.test.ts     | 17 ++++
 apps/web/src/lib/monaco/editing.ts            | 26 ++++++
 apps/web/src/lib/monaco/font.ts               | 12 +++
 apps/web/src/lib/monaco/model.ts              |  4 +
 apps/web/src/lib/monaco/navigation.ts         | 12 +++
 apps/web/src/lib/monaco/overlays.ts           |  6 ++
 apps/web/src/lib/monaco/quickInput.ts         |  3 +
 apps/web/src/lib/monaco/services.ts           |  3 +
 apps/web/src/lib/monaco/suggestions.ts        |  8 ++
 apps/web/src/lib/monaco/view.ts               |  6 ++
 apps/web/src/lib/monacoLocalLoader.ts         | 81 ++++++++++++++--
 apps/web/src/lib/posthogClient.ts             | 24 +++++
 apps/web/src/proxy.ts                         | 50 ++--------
 .../src/types/monaco-editor-internals.d.ts    | 13 +++
 28 files changed, 749 insertions(+), 89 deletions(-)
 create mode 100644 apps/web/src/lib/afterNextPaint.test.ts
 create mode 100644 apps/web/src/lib/afterNextPaint.ts
 create mode 100644 apps/web/src/lib/analyticsBootstrap.test.ts
 create mode 100644 apps/web/src/lib/analyticsBootstrap.ts
 create mode 100644 apps/web/src/lib/clerkSessionHint.test.ts
 create mode 100644 apps/web/src/lib/monaco/editing.ts
 create mode 100644 apps/web/src/lib/monaco/font.ts
 create mode 100644 apps/web/src/lib/monaco/model.ts
 create mode 100644 apps/web/src/lib/monaco/navigation.ts
 create mode 100644 apps/web/src/lib/monaco/overlays.ts
 create mode 100644 apps/web/src/lib/monaco/quickInput.ts
 create mode 100644 apps/web/src/lib/monaco/services.ts
 create mode 100644 apps/web/src/lib/monaco/suggestions.ts
 create mode 100644 apps/web/src/lib/monaco/view.ts
 create mode 100644 apps/web/src/lib/posthogClient.ts

diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index 39d7cd9..77e2db6 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -68,16 +68,42 @@ const nextConfig: NextConfig = {
   env: {
     NEXT_PUBLIC_POSTHOG_ENABLED: analyticsEnabled ? "1" : "",
   },
+  experimental: {
+    // Inline the stylesheet (about 15 KB compressed) into the HTML, so first paint does not wait for
+    // a separate render-blocking CSS request. Client-side navigations still load it as a file.
+    inlineCss: true,
+  },
   images: {
     unoptimized: true,
   },
   poweredByHeader: false,
   async redirects() {
     // The manual's content now lives in the docs as the pseudocode reference.
-    return ["/manual", "/app/manual"].flatMap((source) => [
+    const manual = ["/manual", "/app/manual"].flatMap((source) => [
       { source, destination: "/docs", permanent: true },
       { source: `/:locale(en|zh)${source}`, destination: "/:locale/docs", permanent: true },
     ]);
+    // English is served at the bare path, so `/en/...` redirects there and every page has one URL.
+    const englishPrefix = [
+      { source: "/en", destination: "/", permanent: true },
+      { source: "/en/:path*", destination: "/:path*", permanent: true },
+    ];
+    return [...manual, ...englishPrefix];
+  },
+  async rewrites() {
+    // English pages live under app/[locale] as `/en/...`; the bare path is rewritten there. These run
+    // in Vercel's routing layer, so cached pages are served from the CDN without invoking the proxy
+    // (middleware). `afterFiles` runs after public files and static routes (robots.txt, icons,
+    // /api, /_next) but before dynamic routes, so `/docs` reaches `/en/docs` rather than
+    // `[locale]` = "docs".
+    return {
+      beforeFiles: [],
+      afterFiles: [
+        { source: "/", destination: "/en" },
+        { source: "/:path((?!(?:en|zh|api|_next)(?:/|$)).+)", destination: "/en/:path" },
+      ],
+      fallback: [],
+    };
   },
   async headers() {
     const immutableAssetHeaders = [
diff --git a/apps/web/src/app/[locale]/(public)/page.tsx b/apps/web/src/app/[locale]/(public)/page.tsx
index af9bc9a..31f7b29 100644
--- a/apps/web/src/app/[locale]/(public)/page.tsx
+++ b/apps/web/src/app/[locale]/(public)/page.tsx
@@ -157,6 +157,9 @@ export default async function LandingPage({ params }: LocaleParams) {
 
   return (
     <main>
+      {/* The stylesheet is inlined, so the browser could paint before the hero window has arrived and then grow
+          it. Hold the first paint until the hero has been parsed (browsers without rel=expect ignore this). */}
+      <link rel="expect" href="#after-hero" blocking="render" />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
       <PublicHeader locale={locale} />
 
@@ -193,7 +196,7 @@ export default async function LandingPage({ params }: LocaleParams) {
         <HeroWindow workspace={t.windowWorkspace} compiled={t.windowCompiled} terminal={t.windowTerminal} />
       </section>
 
-      <section className="border-t border-[var(--line)]">
+      <section id="after-hero" className="border-t border-[var(--line)]">
         <div className="site-wrap py-16 md:py-20">
           <p className="site-eyebrow">{t.featuresEyebrow}</p>
           <h2 className="site-h2 mt-3 max-w-2xl">{t.featuresTitle}</h2>
diff --git a/apps/web/src/app/[locale]/app/page.test.tsx b/apps/web/src/app/[locale]/app/page.test.tsx
index 4210cf7..d87aeda 100644
--- a/apps/web/src/app/[locale]/app/page.test.tsx
+++ b/apps/web/src/app/[locale]/app/page.test.tsx
@@ -18,6 +18,8 @@ const { loadWorkspaceMock, saveWorkspaceMock, compilePseudocodeMock, runMock, ed
       lastName?: string | null;
     },
     loading: false,
+    // Whether the browser holds a Clerk session cookie (see mayHaveClerkSession).
+    sessionHint: true,
   },
 }));
 const localStore = new Map<string, string>();
@@ -41,6 +43,7 @@ vi.mock("@/lib/auth-components", () => ({
       : null;
   },
   isCloudAuthConfigured: () => true,
+  mayHaveClerkSession: () => authState.sessionHint,
   SignInButton: ({ children }: { children: React.ReactNode }) => children,
   SignUpButton: ({ children }: { children: React.ReactNode }) => children,
   UserButton: Object.assign(
@@ -310,6 +313,7 @@ describe("HomePage workspace flow", () => {
       lastName: null,
     };
     authState.loading = false;
+    authState.sessionHint = true;
     Object.defineProperty(window as Window & { electron?: { isDesktop?: boolean } }, "electron", {
       configurable: true,
       value: undefined,
@@ -495,6 +499,49 @@ describe("HomePage workspace flow", () => {
     });
   });
 
+  it("runs the source typed just before Run is tapped", async () => {
+    mockLoadedWorkspace(createWorkspaceFixture());
+    compilePseudocodeMock.mockReturnValue({ success: true, diagnostics: [], astJson: "{}" });
+    runMock.mockResolvedValue({ success: true, stdout: "done", stderr: "", diagnostics: [], virtualFiles: {} });
+    render(<HomePage />);
+    const editor = await screen.findByRole("textbox", { name: "Mock editor" });
+
+    fireEvent.change(editor, { target: { value: 'OUTPUT "Typed just now"' } });
+    fireEvent.click(screen.getByRole("button", { name: "Run" }));
+
+    // Run starts after the next paint, with the latest source.
+    await waitFor(() => {
+      expect(compilePseudocodeMock).toHaveBeenCalledWith(expect.objectContaining({ source: 'OUTPUT "Typed just now"' }));
+    });
+  });
+
+  it("waits for Clerk before loading the workspace when a session cookie is present", async () => {
+    authState.user = null;
+    authState.loading = true;
+    mockLoadedWorkspace(createWorkspaceFixture());
+    render(<HomePage />);
+
+    expect(screen.getByRole("status", { name: "Loading workspace…" })).toBeInTheDocument();
+    expect(screen.getByText("PseudoEditor")).toBeInTheDocument();
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(loadWorkspaceMock).not.toHaveBeenCalled();
+  });
+
+  it("opens the in-memory workspace without waiting for Clerk when nobody is signed in", async () => {
+    authState.user = null;
+    authState.loading = true;
+    authState.sessionHint = false;
+    mockLoadedWorkspace(createWorkspaceFixture());
+    render(<HomePage />);
+
+    await screen.findByRole("textbox", { name: "Mock editor" });
+    expect(loadWorkspaceMock).toHaveBeenCalledWith(expect.any(String), expect.objectContaining({ mode: "memory" }));
+    // The account control stays a placeholder until Clerk has loaded.
+    expect(screen.getByRole("button", { name: "Checking sign-in status" })).toBeDisabled();
+  });
+
   it("offers the flowchart from the toolbar without a beta setting, loading it on first open", async () => {
     authState.user = null;
     mockLoadedWorkspace(createWorkspaceFixture());
diff --git a/apps/web/src/app/[locale]/app/page.tsx b/apps/web/src/app/[locale]/app/page.tsx
index 4db443f..089a2c7 100644
--- a/apps/web/src/app/[locale]/app/page.tsx
+++ b/apps/web/src/app/[locale]/app/page.tsx
@@ -72,9 +72,11 @@ import {
   SignInButton,
   UserButton,
   isCloudAuthConfigured,
+  mayHaveClerkSession,
   useAuth,
 } from "@/lib/auth-components";
 import { track } from "@/lib/analytics";
+import { afterNextPaint } from "@/lib/afterNextPaint";
 import { getTouchLayout } from "@/lib/appleTouch";
 import type { Diagnostic } from "@/compiler/types";
 import { useDictionary, useLocale } from "@/i18n/context";
@@ -309,9 +311,13 @@ export default function HomePage() {
     { href: "https://github.com/The1UNeed/pseudoeditor.dev", label: t.legal.github },
   ];
   const { getToken, isLoaded: authLoaded, isSignedIn, userId } = useAuth();
-  const authLoading = !authLoaded;
   const [appPlatform] = useState(() => getClientAppPlatform());
   const cloudSavingRequired = platformUsesCloudSaving(appPlatform);
+  // Signed-out visitors (no Clerk session cookie) get the in-memory workspace straight away instead
+  // of waiting for Clerk's scripts and API calls. If Clerk then reports a session anyway, the
+  // persistence mode changes and the workspace reloads from the cloud.
+  const [awaitClerkSession] = useState(() => mayHaveClerkSession());
+  const authLoading = !authLoaded && awaitClerkSession;
   const workspacePersistenceMode = getWorkspacePersistenceMode({
     platform: appPlatform,
     signedIn: Boolean(isSignedIn),
@@ -579,6 +585,12 @@ export default function HomePage() {
     currentDocumentRef.current = currentDocument;
   }, [currentDocument]);
 
+  // Run executes the workspace's active document (the last focused panel), so the deferred Run
+  // checks that one, not the first panel's.
+  useEffect(() => {
+    runTargetIdRef.current = activeDocument?.id;
+  }, [activeDocument]);
+
   useEffect(() => {
     if (renameDialog) {
       renameInputRef.current?.focus();
@@ -847,17 +859,33 @@ export default function HomePage() {
 
   /* ── actions ── */
 
+  // A run re-renders the workspace, terminal and layout (and on a tablet the keyboard closes).
+  // Starting it after the next paint lets the tap itself paint at once.
+  const cancelScheduledRunRef = useRef<(() => void) | null>(null);
+  const runTargetIdRef = useRef<string | undefined>(undefined);
+  useEffect(() => () => cancelScheduledRunRef.current?.(), []);
   const handleRun = useCallback(() => {
+    if (cancelScheduledRunRef.current) {
+      return;
+    }
+    // The run is for the file that was active when Run was pressed.
+    const requestedId = runTargetIdRef.current;
     shouldAutoScrollOutputRef.current = true;
-    setShowTerminal(true);
-    setPanelView("output");
     preloadRunRuntime();
-    void runNow().then((outcome) => {
-      // A program that doesn't compile has nothing to show in Output; the fix list is what the student needs.
-      if (outcome === "compile_error") {
-        setPanelView("problems");
-        setTouchOutputView("problems");
+    cancelScheduledRunRef.current = afterNextPaint(() => {
+      cancelScheduledRunRef.current = null;
+      if (runTargetIdRef.current !== requestedId) {
+        return;
       }
+      setShowTerminal(true);
+      setPanelView("output");
+      void runNow().then((outcome) => {
+        // A program that doesn't compile has nothing to show in Output; the fix list is what the student needs.
+        if (outcome === "compile_error") {
+          setPanelView("problems");
+          setTouchOutputView("problems");
+        }
+      });
     });
   }, [preloadRunRuntime, runNow, setShowTerminal]);
 
@@ -1138,7 +1166,8 @@ export default function HomePage() {
       return null;
     }
 
-    if (authLoading) {
+    // Still a placeholder until Clerk loads, even when the workspace did not wait for it.
+    if (!authLoaded) {
       return (
         <button
           type="button"
@@ -1745,11 +1774,16 @@ export default function HomePage() {
     const baseName = normalizeDocumentEditableName(createFileName);
     if (!baseName) return;
     const name = `${baseName}${PSEUDO_EXTENSION}`;
-    createDocumentInWorkspace(createFileParentId, { name });
+    const parentId = createFileParentId;
+    // Close the dialog in this frame; opening the new file lays out the whole editor, so it waits
+    // until the tap has painted.
     closeCreateFileDialog();
-    // Put the caret in the new file so the first keystrokes land in the code, as in an IDE. This runs after the
-    // dialog's focus restoration, and waits for a freshly mounted editor if this was the first file.
-    focusEditorWhenReady();
+    afterNextPaint(() => {
+      createDocumentInWorkspace(parentId, { name });
+      // Put the caret in the new file so the first keystrokes land in the code, as in an IDE. This runs after the
+      // dialog's focus restoration, and waits for a freshly mounted editor if this was the first file.
+      focusEditorWhenReady();
+    });
   };
 
   const submitRename = (event: FormEvent<HTMLFormElement>) => {
@@ -2112,9 +2146,24 @@ export default function HomePage() {
   /* ── loading state ── */
 
   if (!workspace) {
+    // This is also the prerendered HTML, so it paints the title bar before any script runs. It must
+    // not depend on browser-only state (platform, viewport), or hydration would mismatch.
     return (
-      <main>
-        <EditorLoader fullScreen label={t.loading.workspace} />
+      <main className="flex h-dvh flex-col overflow-hidden bg-[var(--bg)]">
+        <header className="flex h-[52px] shrink-0 items-center bg-[var(--titlebar)] px-4">
+          <Link
+            href="/"
+            className="flex items-center gap-2 transition hover:opacity-80"
+            aria-label={t.toolbar.home}
+          >
+            <BrandMark size={20} />
+            <span className="text-[13px] font-semibold text-[var(--text)]">PseudoEditor</span>
+          </Link>
+        </header>
+        <div className="h-px shrink-0 bg-[var(--separator)]" />
+        <div className="min-h-0 flex-1">
+          <EditorLoader label={t.loading.workspace} />
+        </div>
       </main>
     );
   }
diff --git a/apps/web/src/app/components/MonacoPseudocodeEditor.tsx b/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
index c655329..cd47309 100644
--- a/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
+++ b/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
@@ -2,11 +2,12 @@
 
 import { memo, useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
 import Editor, { BeforeMount, OnMount } from "@monaco-editor/react";
-import "@/lib/monacoLocalLoader";
+import { initializeMonaco } from "@/lib/monacoLocalLoader";
 import type * as Monaco from "monaco-editor";
 import { EditorLoader } from "@/app/components/EditorLoader";
 import { Diagnostic } from "@/compiler/types";
 import { autoCorrectPseudocodeLine } from "@/app/components/pseudocodeAutocorrect";
+import { afterNextPaint } from "@/lib/afterNextPaint";
 import { isAppleTouchDevice } from "@/lib/appleTouch";
 import { ensureMonacoNullCaretHitTestGuard } from "@/lib/monacoNullCaretHitTestGuard";
 import { getPseudocodeEditorOptions } from "@/lib/pseudocodeEditorOptions";
@@ -171,7 +172,6 @@ let pseudocodeLanguageRegistered = false;
 let pseudocodeCompletionProviderRegistered = false;
 
 if (typeof window !== "undefined") {
-  void ensureMonacoNullCaretHitTestGuard();
   // Switching models cancels Monaco's in-flight work (hover, occurrences) with a `Canceled` rejection by design.
   window.addEventListener("unhandledrejection", (event) => {
     const reason = event.reason as { name?: unknown; message?: unknown } | null;
@@ -381,6 +381,18 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
     [appleTouchDevice, touchScreen],
   );
 
+  // Monaco loads in small steps (monacoLocalLoader) so that taps during loading stay responsive.
+  const [monacoReady, setMonacoReady] = useState(false);
+  const [loadingError, setLoadingError] = useState<unknown>(null);
+  useEffect(() => {
+    let active = true;
+    void initializeMonaco(editorOptions).then(
+      () => { if (active) setMonacoReady(true); },
+      (error: unknown) => { if (active) setLoadingError(error); },
+    );
+    return () => { active = false; };
+  }, [editorOptions]);
+
   const handleBeforeMount: BeforeMount = () => {
     void ensureMonacoNullCaretHitTestGuard();
   };
@@ -852,6 +864,16 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
     monaco.editor.setModelLanguage(model, languageId);
   }, [languageId, documentKey]);
 
+  // Creating a Monaco editor takes about 100 ms on a tablet. A tap that opens a file would wait for
+  // it before painting, so the editor for a document is created after the next paint instead.
+  const [readyDocumentKey, setReadyDocumentKey] = useState<string | undefined | null>(null);
+  useEffect(() => afterNextPaint(() => setReadyDocumentKey(documentKey)), [documentKey]);
+
+  if (loadingError) throw loadingError;
+  if (!monacoReady || readyDocumentKey !== documentKey) {
+    return <EditorLoader />;
+  }
+
   return (
     <Editor
       // One editor per document: on switch the wrapper saves this file's view state under its own path and the next
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index ce765d7..5574635 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -122,6 +122,16 @@
     U+FFFD;
 }
 
+/* Arial scaled to Inter's metrics, shown until Inter loads, so the swap does not move text. */
+@font-face {
+  font-family: "Inter Fallback";
+  src: local("Arial"), local("ArialMT"), local("Helvetica");
+  ascent-override: 90.44%;
+  descent-override: 22.52%;
+  line-gap-override: 0%;
+  size-adjust: 107.12%;
+}
+
 /*
  * PseudoEditor palette. One green brand accent in both themes (forest green in light, sea green in dark). Running
  * code, success and program output use a brighter, separate green so "interactive" and "execute" stay distinct.
@@ -130,7 +140,7 @@
 :root,
 :root[data-theme="dark"] {
   color-scheme: dark;
-  --font-sans: "Inter";
+  --font-sans: "Inter", "Inter Fallback";
   --font-mono: "Fira Code";
   --bg: #16171B;
   --sidebar: #1B1C21;
@@ -300,7 +310,7 @@ html {
 :root:lang(zh),
 :root[data-theme]:lang(zh) {
   /* Inter has no CJK glyphs; name the platform Chinese fonts before the generic fallback. */
-  --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC";
+  --font-sans: "Inter", "Inter Fallback", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC";
 }
 
 body {
diff --git a/apps/web/src/instrumentation-client.ts b/apps/web/src/instrumentation-client.ts
index 406662b..b33ffb7 100644
--- a/apps/web/src/instrumentation-client.ts
+++ b/apps/web/src/instrumentation-client.ts
@@ -1,15 +1,54 @@
-// Bundled so PostHog never injects scripts from its own CDN (see disable_external_dependency_loading).
-import "posthog-js/dist/exception-autocapture";
-import "posthog-js/dist/web-vitals";
-import posthog from "posthog-js";
-import { posthogConfig, prefersNoTracking } from "@/lib/analytics";
+import { prefersNoTracking } from "@/lib/analytics";
+import { startEarlyAnalytics, type EarlyAnalytics } from "@/lib/analyticsBootstrap";
 
 // next.config.ts sets NEXT_PUBLIC_POSTHOG_ENABLED only for the production web deployment, so
 // previews, local builds, and the desktop app never load analytics.
 const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+
+function loadAnalytics(key: string, early: EarlyAnalytics) {
+  // A separate chunk, fetched and evaluated only after the page has loaded and gone idle, so
+  // analytics never delays first paint or makes early clicks wait. startEarlyAnalytics already
+  // observes web vitals and holds early errors, so nothing from before then is lost.
+  import("@/lib/posthogClient")
+    .then(({ startPosthog }) => startPosthog(key, early))
+    .catch(() => {
+      /* Analytics must never break the app. */
+    });
+}
+
+function whenIdleAfterLoad(callback: () => void) {
+  let started = false;
+  const start = () => {
+    if (!started) {
+      started = true;
+      callback();
+    }
+  };
+  // Safari has no requestIdleCallback.
+  const idle = () =>
+    typeof window.requestIdleCallback === "function"
+      ? window.requestIdleCallback(start, { timeout: 5000 })
+      : setTimeout(start, 1000);
+  if (document.readyState === "complete") {
+    idle();
+  } else {
+    window.addEventListener("load", idle, { once: true });
+  }
+  // A visitor switching away before then may not come back: start now, so the visit (and the
+  // vitals PostHog reports when the page is hidden) still have a chance to be sent.
+  document.addEventListener(
+    "visibilitychange",
+    () => {
+      if (document.visibilityState === "hidden") start();
+    },
+    { once: true },
+  );
+}
+
 if (process.env.NEXT_PUBLIC_POSTHOG_ENABLED === "1" && posthogKey && !prefersNoTracking()) {
   try {
-    posthog.init(posthogKey, posthogConfig);
+    const early = startEarlyAnalytics();
+    whenIdleAfterLoad(() => loadAnalytics(posthogKey, early));
   } catch {
     /* Analytics must never break the app. */
   }
diff --git a/apps/web/src/lib/afterNextPaint.test.ts b/apps/web/src/lib/afterNextPaint.test.ts
new file mode 100644
index 0000000..cc65a09
--- /dev/null
+++ b/apps/web/src/lib/afterNextPaint.test.ts
@@ -0,0 +1,41 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { afterNextPaint } from "@/lib/afterNextPaint";
+
+describe("afterNextPaint", () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout", "requestAnimationFrame", "cancelAnimationFrame"] });
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("runs once, in a task after the next frame", () => {
+    const callback = vi.fn();
+    afterNextPaint(callback);
+    expect(callback).not.toHaveBeenCalled();
+    vi.advanceTimersToNextFrame();
+    expect(callback).not.toHaveBeenCalled();
+    // Fake timers run a zero-delay timeout on the next millisecond.
+    vi.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(200);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("still runs when no frame comes, as in a hidden tab", () => {
+    const callback = vi.fn();
+    afterNextPaint(callback);
+    // No frame is advanced.
+    vi.advanceTimersByTime(100);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing once cancelled", () => {
+    const callback = vi.fn();
+    const cancel = afterNextPaint(callback);
+    cancel();
+    vi.advanceTimersToNextFrame();
+    vi.advanceTimersByTime(200);
+    expect(callback).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/web/src/lib/afterNextPaint.ts b/apps/web/src/lib/afterNextPaint.ts
new file mode 100644
index 0000000..165bca7
--- /dev/null
+++ b/apps/web/src/lib/afterNextPaint.ts
@@ -0,0 +1,35 @@
+/** If no frame arrives (a hidden tab, a throttled frame), run anyway after this long. */
+const FRAME_FALLBACK_MS = 100;
+
+/**
+ * Runs `callback` in a new task after the browser has painted the next frame. Interaction handlers
+ * use it for work that need not block that frame, so the tap or key press shows a response first
+ * (Interaction to Next Paint ends at that paint). Returns a function that cancels the call.
+ */
+export function afterNextPaint(callback: () => void): () => void {
+  let done = false;
+  let frame: number | null = null;
+  let task: ReturnType<typeof setTimeout> | null = null;
+  const run = () => {
+    if (done) return;
+    done = true;
+    if (frame !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
+    if (task !== null) clearTimeout(task);
+    callback();
+  };
+  if (typeof requestAnimationFrame === "function" && document.visibilityState !== "hidden") {
+    frame = requestAnimationFrame(() => {
+      frame = null;
+      if (task !== null) clearTimeout(task);
+      task = setTimeout(run, 0);
+    });
+    task = setTimeout(run, FRAME_FALLBACK_MS);
+  } else {
+    task = setTimeout(run, 0);
+  }
+  return () => {
+    done = true;
+    if (frame !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
+    if (task !== null) clearTimeout(task);
+  };
+}
diff --git a/apps/web/src/lib/analytics.test.ts b/apps/web/src/lib/analytics.test.ts
index ef69593..7180540 100644
--- a/apps/web/src/lib/analytics.test.ts
+++ b/apps/web/src/lib/analytics.test.ts
@@ -1,6 +1,6 @@
-import posthog, { type CaptureResult } from "posthog-js";
+import type { CaptureResult } from "posthog-js";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { posthogConfig, prefersNoTracking, scrubUrls, stripQueryAndHash, track } from "@/lib/analytics";
+import { posthogConfig, prefersNoTracking, scrubUrls, setAnalyticsClient, stripQueryAndHash, track } from "@/lib/analytics";
 
 function captureResult(properties: Record<string, unknown>): CaptureResult {
   return { uuid: "test", event: "$pageview", properties };
@@ -84,16 +84,35 @@ describe("analytics", () => {
     expect(prefersNoTracking(nav({ globalPrivacyControl: true }))).toBe(true);
   });
 
-  it("does nothing until PostHog has been initialised", () => {
-    const capture = vi.spyOn(posthog, "capture");
-    track("syntax_changed", { syntax: "cambridge" });
-    expect(capture).not.toHaveBeenCalled();
-  });
-
   it("sends events once PostHog is loaded", () => {
-    const capture = vi.spyOn(posthog, "capture").mockReturnValue(undefined);
-    vi.spyOn(posthog, "__loaded", "get").mockReturnValue(true);
+    const capture = vi.fn();
+    setAnalyticsClient({ capture } as unknown as Parameters<typeof setAnalyticsClient>[0]);
     track("program_run", { outcome: "success", diagnostics: 0, inputs: 1 });
     expect(capture).toHaveBeenCalledWith("program_run", { outcome: "success", diagnostics: 0, inputs: 1 });
+    setAnalyticsClient(null);
+  });
+
+  it("holds production events from before PostHog loads and sends them when it does", () => {
+    vi.stubEnv("NEXT_PUBLIC_POSTHOG_ENABLED", "1");
+    track("syntax_changed", { syntax: "cambridge" });
+    const capture = vi.fn();
+    setAnalyticsClient({ capture } as unknown as Parameters<typeof setAnalyticsClient>[0]);
+    expect(capture).toHaveBeenCalledWith(
+      "syntax_changed",
+      { syntax: "cambridge", $current_url: window.location.href },
+      { timestamp: expect.any(Date) },
+    );
+    setAnalyticsClient(null);
+    vi.unstubAllEnvs();
+  });
+
+  it("queues nothing outside production, where PostHog never loads", () => {
+    vi.stubEnv("NEXT_PUBLIC_POSTHOG_ENABLED", "");
+    track("syntax_changed", { syntax: "cambridge" });
+    const capture = vi.fn();
+    setAnalyticsClient({ capture } as unknown as Parameters<typeof setAnalyticsClient>[0]);
+    expect(capture).not.toHaveBeenCalled();
+    setAnalyticsClient(null);
+    vi.unstubAllEnvs();
   });
 });
diff --git a/apps/web/src/lib/analytics.ts b/apps/web/src/lib/analytics.ts
index 203c201..39bc182 100644
--- a/apps/web/src/lib/analytics.ts
+++ b/apps/web/src/lib/analytics.ts
@@ -1,4 +1,4 @@
-import posthog, { type BeforeSendFn, type PostHogConfig } from "posthog-js";
+import type { BeforeSendFn, PostHog, PostHogConfig } from "posthog-js";
 import { POSTHOG_HOST } from "@/lib/posthogHost";
 
 /**
@@ -90,9 +90,35 @@ export function prefersNoTracking(nav: Navigator = navigator): boolean {
   return doNotTrack === "1" || globalPrivacyControl === true;
 }
 
+type AnalyticsClient = Pick<PostHog, "capture">;
+
+// PostHog loads after the page is interactive (instrumentation-client.ts), so its ~120 KB never
+// competes with hydration. Events from before then wait here, bounded, and are sent once it loads.
+const MAX_QUEUED_EVENTS = 50;
+let client: AnalyticsClient | null = null;
+// Each held event keeps the page and time it happened on, not those of when PostHog loads.
+let queue: Array<{ event: string; properties: Record<string, unknown>; url: string; at: Date }> = [];
+
+export function setAnalyticsClient(next: AnalyticsClient | null) {
+  client = next;
+  if (!next) {
+    queue = [];
+    return;
+  }
+  const pending = queue;
+  queue = [];
+  for (const { event, properties, url, at } of pending) {
+    next.capture(event, { ...properties, $current_url: url }, { timestamp: at });
+  }
+}
+
 export function track<E extends keyof AnalyticsEvents>(event: E, properties: AnalyticsEvents[E]) {
-  if (!posthog.__loaded) {
+  if (client) {
+    client.capture(event, properties);
     return;
   }
-  posthog.capture(event, properties);
+  // Only production builds load PostHog; elsewhere nothing would ever drain the queue.
+  if (process.env.NEXT_PUBLIC_POSTHOG_ENABLED === "1" && queue.length < MAX_QUEUED_EVENTS) {
+    queue.push({ event, properties, url: window.location.href, at: new Date() });
+  }
 }
diff --git a/apps/web/src/lib/analyticsBootstrap.test.ts b/apps/web/src/lib/analyticsBootstrap.test.ts
new file mode 100644
index 0000000..d2e6d49
--- /dev/null
+++ b/apps/web/src/lib/analyticsBootstrap.test.ts
@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { startEarlyAnalytics } from "@/lib/analyticsBootstrap";
+
+type Callback = (metric: { name: string; value: number }) => void;
+type Extensions = { postHogWebVitalsCallbacks?: Record<string, (callback: Callback) => void> };
+
+function installFakeWebVitals() {
+  const emit: Record<string, Callback> = {};
+  const callbacks: Record<string, (callback: Callback) => void> = {};
+  for (const name of ["onLCP", "onCLS", "onFCP", "onINP"]) {
+    callbacks[name] = (callback) => {
+      emit[name] = callback;
+    };
+  }
+  (window as Window & { __PosthogExtensions__?: Extensions }).__PosthogExtensions__ = {
+    postHogWebVitalsCallbacks: callbacks,
+  };
+  return { callbacks, emit };
+}
+
+describe("startEarlyAnalytics", () => {
+  let stop = () => {};
+  afterEach(() => stop());
+
+  it("observes web vitals from startup and replays them to PostHog when it subscribes", () => {
+    const { callbacks, emit } = installFakeWebVitals();
+    const early = startEarlyAnalytics();
+    stop = early.stop;
+
+    emit.onINP({ name: "INP", value: 96 });
+    const received: number[] = [];
+    callbacks.onINP((metric) => received.push(metric.value));
+    expect(received).toEqual([96]);
+
+    emit.onINP({ name: "INP", value: 120 });
+    expect(received).toEqual([96, 120]);
+  });
+
+  it("replays only the latest report of a metric, and keeps nothing after PostHog subscribes", () => {
+    const { callbacks, emit } = installFakeWebVitals();
+    stop = startEarlyAnalytics().stop;
+
+    emit.onINP({ id: "inp-1", name: "INP", value: 96 } as never);
+    emit.onINP({ id: "inp-1", name: "INP", value: 120 } as never);
+    const first: number[] = [];
+    callbacks.onINP((metric) => first.push(metric.value));
+    expect(first).toEqual([120]);
+
+    emit.onINP({ id: "inp-1", name: "INP", value: 150 } as never);
+    const late: number[] = [];
+    callbacks.onINP((metric) => late.push(metric.value));
+    expect(late).toEqual([]);
+    expect(first).toEqual([120, 150]);
+  });
+
+  it("holds errors raised before PostHog loads, until stopped", () => {
+    installFakeWebVitals();
+    const early = startEarlyAnalytics();
+    stop = early.stop;
+    // Message-only events: an ErrorEvent carrying an Error object counts as unhandled in Vitest.
+    window.dispatchEvent(new ErrorEvent("error", { message: "hydration failed" }));
+    early.stop();
+    window.dispatchEvent(new ErrorEvent("error", { message: "later" }));
+
+    expect(early.errors.map((entry) => entry.error)).toEqual(["hydration failed"]);
+    expect(early.landing.url).toBe(window.location.href);
+  });
+});
diff --git a/apps/web/src/lib/analyticsBootstrap.ts b/apps/web/src/lib/analyticsBootstrap.ts
new file mode 100644
index 0000000..5008469
--- /dev/null
+++ b/apps/web/src/lib/analyticsBootstrap.ts
@@ -0,0 +1,93 @@
+// Bundled so PostHog never injects scripts from its own CDN (see disable_external_dependency_loading).
+// About 4 KB gzipped: it registers the web-vitals callbacks PostHog calls when it starts.
+import "posthog-js/dist/web-vitals";
+
+/**
+ * PostHog itself loads once the page is idle (instrumentation-client.ts). This small part runs at
+ * startup so that delay loses nothing: web vitals are observed from the first frame, and errors and
+ * the landing page from before PostHog loads are held for it.
+ */
+
+type Metric = { name: string; id?: string };
+type MetricCallback = (metric: Metric) => void;
+type OnMetric = (callback: MetricCallback, options?: Record<string, unknown>) => void;
+
+const METRIC_SUBSCRIBERS = ["onLCP", "onCLS", "onFCP", "onINP"] as const;
+const MAX_EARLY_ERRORS = 20;
+
+export type EarlyAnalytics = {
+  /** The page the visit started on, if the visitor navigated away before PostHog loaded. */
+  landing: { url: string; referrer: string; at: Date };
+  errors: Array<{ error: unknown; at: Date }>;
+  stop: () => void;
+};
+
+function webVitalsCallbacks(): Record<string, OnMetric> | undefined {
+  const extensions = (window as Window & {
+    __PosthogExtensions__?: { postHogWebVitalsCallbacks?: Record<string, OnMetric> };
+  }).__PosthogExtensions__;
+  return extensions?.postHogWebVitalsCallbacks;
+}
+
+/**
+ * Starts each web-vitals observer now and swaps in a subscriber that replays what it has reported.
+ * The browser only buffers interactions of 104 ms or more, so an observer started late could miss
+ * slower-than-usual but shorter interactions and under-report INP.
+ */
+function observeWebVitalsEarly() {
+  const callbacks = webVitalsCallbacks();
+  if (!callbacks) {
+    return;
+  }
+  for (const name of METRIC_SUBSCRIBERS) {
+    const subscribe = callbacks[name];
+    if (typeof subscribe !== "function") {
+      continue;
+    }
+    const listeners: MetricCallback[] = [];
+    // Held only until PostHog subscribes, latest report per metric: web-vitals updates a metric
+    // object in place and reports it again, so older reports of the same id are superseded.
+    let pending: Map<string, Metric> | null = new Map();
+    // PostHog passes { reportSoftNavs: false } unless soft navigations are enabled; that is the default.
+    subscribe((metric) => {
+      if (pending) {
+        pending.delete(metric.id ?? metric.name);
+        pending.set(metric.id ?? metric.name, metric);
+      }
+      for (const listener of listeners) {
+        listener(metric);
+      }
+    });
+    callbacks[name] = (callback) => {
+      listeners.push(callback);
+      for (const metric of pending?.values() ?? []) {
+        callback(metric);
+      }
+      pending = null;
+    };
+  }
+}
+
+export function startEarlyAnalytics(): EarlyAnalytics {
+  observeWebVitalsEarly();
+
+  const errors: EarlyAnalytics["errors"] = [];
+  const keep = (error: unknown) => {
+    if (errors.length < MAX_EARLY_ERRORS) {
+      errors.push({ error, at: new Date() });
+    }
+  };
+  const onError = (event: ErrorEvent) => keep(event.error ?? event.message);
+  const onRejection = (event: PromiseRejectionEvent) => keep(event.reason);
+  window.addEventListener("error", onError);
+  window.addEventListener("unhandledrejection", onRejection);
+
+  return {
+    landing: { url: window.location.href, referrer: document.referrer, at: new Date() },
+    errors,
+    stop: () => {
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onRejection);
+    },
+  };
+}
diff --git a/apps/web/src/lib/auth-components.tsx b/apps/web/src/lib/auth-components.tsx
index 1a9b8eb..4410f76 100644
--- a/apps/web/src/lib/auth-components.tsx
+++ b/apps/web/src/lib/auth-components.tsx
@@ -30,6 +30,21 @@ function cloudAuthRequired() {
   return platformUsesCloudSaving(getClientAppPlatform());
 }
 
+/**
+ * Clerk keeps `__client_uat` (and a suffixed copy per instance) readable by scripts: the time of
+ * the last sign-in, or 0 when signed out. With no non-zero value nobody is signed in on this
+ * browser, so the editor can open the in-memory workspace without waiting for Clerk to load.
+ */
+export function mayHaveClerkSession(cookie: string = typeof document === "undefined" ? "" : document.cookie) {
+  for (const match of cookie.matchAll(/(?:^|;\s*)__client_uat(?:_[^=;]*)?=([^;]*)/g)) {
+    const value = match[1].trim();
+    if (value !== "" && value !== "0") {
+      return true;
+    }
+  }
+  return false;
+}
+
 export function ClerkProvider({ children }: { children: ReactNode }) {
   const locale = useLocale();
   const t = useDictionary().auth;
diff --git a/apps/web/src/lib/clerkSessionHint.test.ts b/apps/web/src/lib/clerkSessionHint.test.ts
new file mode 100644
index 0000000..d801bc5
--- /dev/null
+++ b/apps/web/src/lib/clerkSessionHint.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { mayHaveClerkSession } from "@/lib/auth-components";
+
+describe("mayHaveClerkSession", () => {
+  it("is false without a Clerk cookie or when Clerk marks the browser signed out", () => {
+    expect(mayHaveClerkSession("")).toBe(false);
+    expect(mayHaveClerkSession("theme=dark")).toBe(false);
+    expect(mayHaveClerkSession("__client_uat=0")).toBe(false);
+    expect(mayHaveClerkSession("a=1; __client_uat=0; __client_uat_Ab12Cd=0")).toBe(false);
+    expect(mayHaveClerkSession("x__client_uat=1793800000")).toBe(false);
+  });
+
+  it("is true when either the plain or the suffixed cookie records a sign-in", () => {
+    expect(mayHaveClerkSession("__client_uat=1793800000")).toBe(true);
+    expect(mayHaveClerkSession("a=1; __client_uat=0; __client_uat_Ab12Cd=1793800000")).toBe(true);
+  });
+});
diff --git a/apps/web/src/lib/monaco/editing.ts b/apps/web/src/lib/monaco/editing.ts
new file mode 100644
index 0000000..e9e44a3
--- /dev/null
+++ b/apps/web/src/lib/monaco/editing.ts
@@ -0,0 +1,26 @@
+// Everyday text editing, keyboard accessibility, clipboard and touch input.
+import "monaco-editor/esm/vs/editor/contrib/anchorSelect/browser/anchorSelect.js";
+import "monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.js";
+import "monaco-editor/esm/vs/editor/contrib/caretOperations/browser/caretOperations.js";
+import "monaco-editor/esm/vs/editor/contrib/caretOperations/browser/transpose.js";
+import "monaco-editor/esm/vs/editor/contrib/clipboard/browser/clipboard.js";
+import "monaco-editor/esm/vs/editor/contrib/comment/browser/comment.js";
+import "monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js";
+import "monaco-editor/esm/vs/editor/contrib/cursorUndo/browser/cursorUndo.js";
+import "monaco-editor/esm/vs/editor/contrib/dnd/browser/dnd.js";
+import "monaco-editor/esm/vs/editor/contrib/fontZoom/browser/fontZoom.js";
+import "monaco-editor/esm/vs/editor/contrib/indentation/browser/indentation.js";
+import "monaco-editor/esm/vs/editor/contrib/inPlaceReplace/browser/inPlaceReplace.js";
+import "monaco-editor/esm/vs/editor/contrib/insertFinalNewLine/browser/insertFinalNewLine.js";
+import "monaco-editor/esm/vs/editor/contrib/lineSelection/browser/lineSelection.js";
+import "monaco-editor/esm/vs/editor/contrib/linesOperations/browser/linesOperations.js";
+import "monaco-editor/esm/vs/editor/contrib/longLinesHelper/browser/longLinesHelper.js";
+import "monaco-editor/esm/vs/editor/contrib/middleScroll/browser/middleScroll.contribution.js";
+import "monaco-editor/esm/vs/editor/contrib/multicursor/browser/multicursor.js";
+import "monaco-editor/esm/vs/editor/contrib/smartSelect/browser/smartSelect.js";
+import "monaco-editor/esm/vs/editor/contrib/toggleTabFocusMode/browser/toggleTabFocusMode.js";
+import "monaco-editor/esm/vs/editor/contrib/wordOperations/browser/wordOperations.js";
+import "monaco-editor/esm/vs/editor/contrib/wordPartOperations/browser/wordPartOperations.js";
+import "monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js";
+
+export {};
diff --git a/apps/web/src/lib/monaco/font.ts b/apps/web/src/lib/monaco/font.ts
new file mode 100644
index 0000000..56bd80c
--- /dev/null
+++ b/apps/web/src/lib/monaco/font.ts
@@ -0,0 +1,12 @@
+import type { editor } from "monaco-editor";
+import { FontMeasurements } from "monaco-editor/esm/vs/editor/browser/config/fontMeasurements.js";
+import { createBareFontInfoFromRawSettings } from "monaco-editor/esm/vs/editor/common/config/fontInfoFromSettings.js";
+
+export function prepareMonacoFont(options: editor.IStandaloneEditorConstructionOptions): void {
+  // Monaco caches these DOM measurements. Do this in its own task so the first
+  // editor.create does not combine font layout with widget/model construction.
+  FontMeasurements.readFontInfo(
+    window,
+    createBareFontInfoFromRawSettings(options, window.devicePixelRatio),
+  );
+}
diff --git a/apps/web/src/lib/monaco/model.ts b/apps/web/src/lib/monaco/model.ts
new file mode 100644
index 0000000..ca84d04
--- /dev/null
+++ b/apps/web/src/lib/monaco/model.ts
@@ -0,0 +1,4 @@
+// Shared model, tokenization and language configuration dependencies.
+import "monaco-editor/esm/vs/editor/common/model/textModel.js";
+
+export {};
diff --git a/apps/web/src/lib/monaco/navigation.ts b/apps/web/src/lib/monaco/navigation.ts
new file mode 100644
index 0000000..ac4e50e
--- /dev/null
+++ b/apps/web/src/lib/monaco/navigation.ts
@@ -0,0 +1,12 @@
+import "monaco-editor/esm/vs/editor/contrib/find/browser/findController.js";
+import "monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js";
+import "monaco-editor/esm/vs/editor/contrib/links/browser/links.js";
+import "monaco-editor/esm/vs/editor/contrib/readOnlyMessage/browser/contribution.js";
+import "monaco-editor/esm/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.js";
+import "monaco-editor/esm/vs/editor/contrib/unusualLineTerminators/browser/unusualLineTerminators.js";
+import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js";
+import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js";
+import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js";
+import "monaco-editor/esm/vs/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js";
+
+export {};
diff --git a/apps/web/src/lib/monaco/overlays.ts b/apps/web/src/lib/monaco/overlays.ts
new file mode 100644
index 0000000..031504c
--- /dev/null
+++ b/apps/web/src/lib/monaco/overlays.ts
@@ -0,0 +1,6 @@
+// Shared menus, hovers and theme dependencies of the standalone services.
+import "monaco-editor/esm/vs/platform/hover/browser/hoverService.js";
+import "monaco-editor/esm/vs/platform/contextview/browser/contextMenuService.js";
+import "monaco-editor/esm/vs/editor/standalone/browser/standaloneThemeService.js";
+
+export {};
diff --git a/apps/web/src/lib/monaco/quickInput.ts b/apps/web/src/lib/monaco/quickInput.ts
new file mode 100644
index 0000000..73863dc
--- /dev/null
+++ b/apps/web/src/lib/monaco/quickInput.ts
@@ -0,0 +1,3 @@
+import "monaco-editor/esm/vs/platform/quickinput/browser/quickInputService.js";
+
+export {};
diff --git a/apps/web/src/lib/monaco/services.ts b/apps/web/src/lib/monaco/services.ts
new file mode 100644
index 0000000..fc93488
--- /dev/null
+++ b/apps/web/src/lib/monaco/services.ts
@@ -0,0 +1,3 @@
+import "monaco-editor/esm/vs/editor/standalone/browser/standaloneServices.js";
+
+export {};
diff --git a/apps/web/src/lib/monaco/suggestions.ts b/apps/web/src/lib/monaco/suggestions.ts
new file mode 100644
index 0000000..25190c7
--- /dev/null
+++ b/apps/web/src/lib/monaco/suggestions.ts
@@ -0,0 +1,8 @@
+// Pseudocode completion items include snippets with editable tab stops.
+import "monaco-editor/esm/vs/editor/contrib/snippet/browser/snippetController2.js";
+import "monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js";
+import "monaco-editor/esm/vs/editor/contrib/hover/browser/hoverContribution.js";
+import "monaco-editor/esm/vs/editor/contrib/gotoError/browser/gotoError.js";
+import "monaco-editor/esm/vs/editor/contrib/wordHighlighter/browser/wordHighlighter.js";
+
+export {};
diff --git a/apps/web/src/lib/monaco/view.ts b/apps/web/src/lib/monaco/view.ts
new file mode 100644
index 0000000..432cafd
--- /dev/null
+++ b/apps/web/src/lib/monaco/view.ts
@@ -0,0 +1,6 @@
+import "monaco-editor/esm/vs/editor/browser/widget/codeEditor/codeEditorWidget.js";
+import "monaco-editor/esm/vs/editor/browser/coreCommands.js";
+import "monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css";
+import "monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon-modifiers.css";
+
+export {};
diff --git a/apps/web/src/lib/monacoLocalLoader.ts b/apps/web/src/lib/monacoLocalLoader.ts
index fac56f1..6bb7ebc 100644
--- a/apps/web/src/lib/monacoLocalLoader.ts
+++ b/apps/web/src/lib/monacoLocalLoader.ts
@@ -1,11 +1,80 @@
 "use client";
 
 import { loader } from "@monaco-editor/react";
-import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
-// Keep the complete editor UI, including search, snippets, autocomplete and touch
-// input. Pseudocode provides its own language, so the bundled JS/TS/CSS/HTML
-// services and the other built-in language grammars are unnecessary.
-import "monaco-editor/esm/vs/editor/edcore.main.js";
+import type { editor } from "monaco-editor";
+import { ensureMonacoNullCaretHitTestGuard } from "./monacoNullCaretHitTestGuard";
+
+let initialization: Promise<void> | undefined;
+
+// A microtask does not yield, and a timer alone can run the next group before
+// pending input gets a paint. Resume after a frame so interaction latency does
+// not span successive groups, including when the chunks are cached.
+const yieldToBrowser = () => new Promise<void>((resolve) => {
+  if (document.hidden) {
+    setTimeout(resolve, 0);
+  } else {
+    requestAnimationFrame(() => setTimeout(resolve, 0));
+  }
+});
+
+export function initializeMonaco(
+  options: editor.IStandaloneEditorConstructionOptions,
+): Promise<void> {
+  return initialization ??= loadMonaco(options).catch((error: unknown) => {
+    initialization = undefined;
+    throw error;
+  });
+}
+
+async function loadMonaco(
+  options: editor.IStandaloneEditorConstructionOptions,
+): Promise<void> {
+  // Pre-evaluate the core's largest dependency groups separately. Importing the
+  // API first would synchronously evaluate all of them in a single long task.
+  await import("./monaco/model");
+  await yieldToBrowser();
+  await import("./monaco/view");
+  await yieldToBrowser();
+  const { prepareMonacoFont } = await import("./monaco/font");
+  prepareMonacoFont(options);
+  await yieldToBrowser();
+  await import("./monaco/overlays");
+  await yieldToBrowser();
+  await import("./monaco/quickInput");
+  await yieldToBrowser();
+  await import("./monaco/services");
+  await yieldToBrowser();
+  const monaco = await import("monaco-editor/esm/vs/editor/editor.api.js");
+  await yieldToBrowser();
+  await import("./monaco/editing");
+  await yieldToBrowser();
+  await import("./monaco/suggestions");
+  await yieldToBrowser();
+  await import("./monaco/navigation");
+  await yieldToBrowser();
+  // Initialize shared services separately from the first visible widget. Wait
+  // until contributions are loaded because services also snapshot editor features.
+  const warmupModel = monaco.editor.createModel("");
+  await yieldToBrowser();
+  await ensureMonacoNullCaretHitTestGuard();
+  await yieldToBrowser();
+  // Turbopack also evaluates some core dependencies on first construction.
+  // Prime the widget separately from the visible editor's first paint. The
+  // detached widget never paints or edits a workspace file.
+  const warmupEditor = monaco.editor.create(document.createElement("div"), {
+    ...options,
+    model: warmupModel,
+    dimension: { width: 1, height: 1 },
+    automaticLayout: false,
+  });
+  warmupEditor.dispose();
+  warmupModel.dispose();
+  await yieldToBrowser();
+
+  // Contributions must be registered before editor.create: Monaco snapshots
+  // the registry at creation, so registering them after mount loses features.
+  loader.config({ monaco });
+}
 
 // Serve Monaco from our own bundle instead of the default jsDelivr CDN so the
 // editor works under a strict Content Security Policy and without third-party
@@ -21,6 +90,4 @@ if (typeof window !== "undefined") {
         type: "module",
       }),
   };
-
-  loader.config({ monaco });
 }
diff --git a/apps/web/src/lib/posthogClient.ts b/apps/web/src/lib/posthogClient.ts
new file mode 100644
index 0000000..6b1c68a
--- /dev/null
+++ b/apps/web/src/lib/posthogClient.ts
@@ -0,0 +1,24 @@
+// Bundled so PostHog never injects scripts from its own CDN (see disable_external_dependency_loading).
+import "posthog-js/dist/exception-autocapture";
+import posthog from "posthog-js";
+import { posthogConfig, setAnalyticsClient, stripQueryAndHash } from "@/lib/analytics";
+import type { EarlyAnalytics } from "@/lib/analyticsBootstrap";
+
+/** Loaded on demand by instrumentation-client.ts once the page is idle. */
+export function startPosthog(key: string, early: EarlyAnalytics) {
+  posthog.init(key, posthogConfig);
+  // PostHog's own exception autocapture takes over from here.
+  early.stop();
+
+  // init records a pageview for the current page. If the visitor already moved on from the page
+  // they landed on, record that one too, at the time they arrived.
+  const { landing } = early;
+  if (stripQueryAndHash(landing.url) !== stripQueryAndHash(window.location.href)) {
+    posthog.capture("$pageview", { $current_url: landing.url, $referrer: landing.referrer }, { timestamp: landing.at });
+  }
+  for (const { error } of early.errors) {
+    posthog.captureException(error);
+  }
+
+  setAnalyticsClient(posthog);
+}
diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index 94288b1..816423d 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -1,7 +1,6 @@
 import type { NextFetchEvent, NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import { clerkMiddleware } from "@clerk/nextjs/server";
-import { defaultLocale, isLocale, type Locale } from "@/i18n/config";
 
 const hasClerkServerConfig = Boolean(
   process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY && process.env.CLERK_SECRET_KEY,
@@ -9,56 +8,23 @@ const hasClerkServerConfig = Boolean(
 const isElectronBuild = process.env.BUILD_TARGET === "electron";
 const shouldUseClerkProxy = !isElectronBuild && hasClerkServerConfig;
 
-// Paths that are not pages: API routes, Next internals, root metadata routes, and static files by extension.
-// Only known file extensions pass, so a page slug such as /docs/v1.2 is still localized.
-const passthrough =
-  /^\/(api|_next|\.well-known|opengraph-image|twitter-image)(\/|$)|\.(txt|xml|json|webmanifest|ico|png|jpe?g|gif|svg|webp|avif|css|js|mjs|map|wasm|woff2?|ttf|otf|pdf|zip)$/i;
+const clerkProxy = shouldUseClerkProxy ? clerkMiddleware() : null;
 
 /**
- * English is served at the bare path (`/docs`) and rewritten to `/en/docs` internally.
- * Other locales keep their prefix (`/zh/docs`). `/en/...` redirects to the bare path so
- * every page has one canonical URL.
+ * Runs for API routes only: `auth()` in api/workspace reads the session Clerk's middleware sets up.
+ * Pages authenticate in the browser through ClerkProvider, and their locale routing is a rewrite in
+ * next.config.ts, so page requests never invoke this function and are served straight from the CDN
+ * cache. (Running Clerk on pages also cost a handshake redirect whenever a returning visitor's
+ * session token had expired.)
  */
-function withLocaleHeader(request: NextRequest, locale: Locale) {
-  const headers = new Headers(request.headers);
-  headers.set("x-locale", locale);
-  return { request: { headers } };
-}
-
-function localize(request: NextRequest) {
-  const { pathname } = request.nextUrl;
-  if (passthrough.test(pathname)) {
-    return NextResponse.next();
-  }
-
-  const [, first, ...rest] = pathname.split("/");
-  if (isLocale(first)) {
-    if (first !== defaultLocale) {
-      return NextResponse.next(withLocaleHeader(request, first));
-    }
-    const url = request.nextUrl.clone();
-    url.pathname = `/${rest.join("/")}`;
-    return NextResponse.redirect(url, 308);
-  }
-
-  const url = request.nextUrl.clone();
-  url.pathname = `/${defaultLocale}${pathname}`;
-  return NextResponse.rewrite(url, withLocaleHeader(request, defaultLocale));
-}
-
-const clerkProxy = shouldUseClerkProxy ? clerkMiddleware((_auth, request) => localize(request)) : null;
-
 export default function proxy(request: NextRequest, event: NextFetchEvent) {
   if (!clerkProxy) {
-    return localize(request);
+    return NextResponse.next();
   }
 
   return clerkProxy(request, event);
 }
 
 export const config = {
-  matcher: [
-    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
-    "/(api|trpc)(.*)",
-  ],
+  matcher: ["/(api|trpc)(.*)"],
 };
diff --git a/apps/web/src/types/monaco-editor-internals.d.ts b/apps/web/src/types/monaco-editor-internals.d.ts
index cf7dabd..88195ad 100644
--- a/apps/web/src/types/monaco-editor-internals.d.ts
+++ b/apps/web/src/types/monaco-editor-internals.d.ts
@@ -3,3 +3,16 @@ declare module "monaco-editor/esm/vs/editor/browser/controller/mouseTarget.js" {
     _doHitTestWithCaretPositionFromPoint?: (...args: unknown[]) => unknown;
   };
 }
+
+declare module "monaco-editor/esm/vs/editor/browser/config/fontMeasurements.js" {
+  export const FontMeasurements: {
+    readFontInfo(targetWindow: Window, fontInfo: unknown): unknown;
+  };
+}
+
+declare module "monaco-editor/esm/vs/editor/common/config/fontInfoFromSettings.js" {
+  export function createBareFontInfoFromRawSettings(
+    options: import("monaco-editor").editor.IStandaloneEditorConstructionOptions,
+    pixelRatio: number,
+  ): unknown;
+}