perf(ui): drop typebox from Control UI startup by lazy-loading the approval page (#110528)

steipete · web-flow · commit e77140ab8ef1 · 2026-07-18T09:02:27.000+01:00
* perf(ui): drop typebox from Control UI startup by lazy-loading the approval page

The approval document page was statically registered in app-host, pulling
the protocol validators and the full typebox runtime (schemas, value
checks, formats, locales) into every Control UI boot even though the page
only renders for /approve document URLs.

- register openclaw-approval-page through the existing OptionalCustomElement
  seam, preloaded only when bootstrap resolves an approval document mode;
  the approval document's booting splash covers the load gap
- ratchet startup budgets to the new baseline (340 KiB gzip, 20 requests)
  so the win cannot silently regress

Startup JS: 369.1 -&gt; 321.8 KiB gzip (-13%), 22 -&gt; 13 requests.

* chore(ui): record approval-page label in i18n raw-copy baseline
diff --git a/scripts/check-control-ui-performance.mjs b/scripts/check-control-ui-performance.mjs
@@ -10,9 +10,9 @@ const KIB = 1024;
 // Small, explicit headroom over the optimized baseline. Budget changes should
 // accompany an intentional loading or chunking decision.
 export const CONTROL_UI_PERFORMANCE_BUDGETS = Object.freeze({
-  startupJsRequests: 28,
+  startupJsRequests: 20,
   startupCssRequests: 1,
-  startupJsGzipBytes: 370 * KIB,
+  startupJsGzipBytes: 340 * KIB,
   startupCssGzipBytes: 42 * KIB,
   largestJsGzipBytes: 215 * KIB,
   largestCssGzipBytes: 42 * KIB,
diff --git a/ui/src/app/app-host.ts b/ui/src/app/app-host.ts
@@ -51,7 +51,6 @@ import { isTerminalAvailable } from "../lib/terminal-availability.ts";
 import { OpenClawLightDomElement } from "../lit/openclaw-element.ts";
 import { SubscriptionsController } from "../lit/subscriptions-controller.ts";
 import { findSettingsSearchBlocks } from "../pages/config/settings-search.ts";
-import "../pages/approval/approval-page-registration.ts";
 import { newSessionSearch, type NewSessionTarget } from "../pages/new-session/location.ts";
 import { renderDevicePairSetup } from "../pages/nodes/view-pairing.ts";
 import { pluginTabKey, pluginTabRefFromSearch } from "../pages/plugin/route.ts";
@@ -63,6 +62,7 @@ import {
 } from "./context.ts";
 import { resolveControlUiAuthToken } from "./control-ui-auth.ts";
 import {
+  APPROVAL_PAGE_ELEMENT,
   BROWSER_PANEL_ELEMENT,
   COMMAND_PALETTE_ELEMENT,
   ensureOptionalElementForHost,
@@ -244,6 +244,9 @@ class OpenClawApp extends OpenClawLightDomElement {
     if (this.terminalOnly) {
       preloadOptionalElement(this, TERMINAL_PANEL_ELEMENT);
     }
+    if (this.runtime.documentMode?.kind === "approval") {
+      preloadOptionalElement(this, APPROVAL_PAGE_ELEMENT);
+    }
     const context = this.runtime.context;
     this.initialAuthPresent = hasStoredGatewayAuth(context.gateway.connection);
     this.pendingGatewayUrl = this.runtime.pendingGatewayConnection?.gatewayUrl ?? null;
diff --git a/ui/src/app/lazy-custom-element.ts b/ui/src/app/lazy-custom-element.ts
@@ -56,6 +56,14 @@ export const BROWSER_PANEL_ELEMENT = {
   loadModule: () => import("../components/browser/browser-panel.ts"),
 } satisfies OptionalCustomElement;
 
+// Loaded only for approval document URLs: the approval page pulls the protocol
+// validators (typebox runtime) and must stay out of the normal startup graph.
+export const APPROVAL_PAGE_ELEMENT = {
+  tagName: "openclaw-approval-page",
+  label: "approval page",
+  loadModule: () => import("../pages/approval/approval-page-registration.ts"),
+} satisfies OptionalCustomElement;
+
 const hostElementLoads = new WeakMap<UpdatingHost, Map<string, Promise<void>>>();
 
 export function isOptionalElementDefined(element: OptionalCustomElement): boolean {
diff --git a/ui/src/i18n/.i18n/raw-copy-baseline.json b/ui/src/i18n/.i18n/raw-copy-baseline.json
