@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.90

package/src/perf/otlp-trace.ts

@@ -0,0 +1,130 @@
+/**
+ * Ship perf spans to a local OTLP/HTTP trace viewer (kundi) so an interaction's phases read as a
+ * callstack. Every export is a no-op unless OTEL_EXPORTER_OTLP_ENDPOINT is set. Tracing never throws
+ * into the app: a failed POST is swallowed. Attributes are scalar-only, matching the viewer's decoder.
+ */
+
+import type { PhaseMark } from "./perf-timings";
+
+export type SpanAttributeValue =
+  | { stringValue: string }
+  | { doubleValue: number }
+  | { boolValue: boolean };
+
+export interface SpanAttribute {
+  key: string;
+  value: SpanAttributeValue;
+}
+
+export interface TraceSpan {
+  traceId: string;
+  spanId: string;
+  parentSpanId?: string;
+  name: string;
+  startTimeUnixNano: string;
+  endTimeUnixNano: string;
+  attributes?: readonly SpanAttribute[];
+}
+
+function randomHex(bytes: number): string {
+  const buffer = new Uint8Array(bytes);
+  crypto.getRandomValues(buffer);
+
+  return Array.from(buffer, (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+/** A 16-byte trace id as 32 lowercase hex chars, per the OTLP wire format. */
+export function newTraceId(): string {
+  return randomHex(16);
+}
+
+/** An 8-byte span id as 16 lowercase hex chars, per the OTLP wire format. */
+export function newSpanId(): string {
+  return randomHex(8);
+}
+
+/** Build the OTLP/JSON `resourceSpans` body the trace viewer's `/v1/traces` decoder reads. */
+export function buildOtlpTracePayload(serviceName: string, spans: readonly TraceSpan[]) {
+  return {
+    resourceSpans: [
+      {
+        resource: {
+          attributes: [{ key: "service.name", value: { stringValue: serviceName } }],
+        },
+        scopeSpans: [
+          {
+            spans: spans.map((span) => ({
+              traceId: span.traceId,
+              spanId: span.spanId,
+              // the viewer reads a missing parent as root; an empty string is the same, without a conditional key
+              parentSpanId: span.parentSpanId ?? "",
+              name: span.name,
+              startTimeUnixNano: span.startTimeUnixNano,
+              endTimeUnixNano: span.endTimeUnixNano,
+              attributes: (span.attributes ?? []).map((attribute) => ({
+                key: attribute.key,
+                value: attribute.value,
+              })),
+            })),
+          },
+        ],
+      },
+    ],
+  };
+}
+
+function nanosFromPerfMs(milliseconds: number): string {
+  const originNs = BigInt(Math.round(performance.timeOrigin * 1e6));
+
+  return String(originNs + BigInt(Math.round(milliseconds * 1e6)));
+}
+
+/** Turn drained phase marks into a span tree: a `scope` root with one child span per phase, in order. */
+export function phaseMarksToSpans(scope: string, marks: readonly PhaseMark[]): TraceSpan[] {
+  const totalMs = marks.reduce((sum, mark) => sum + mark.elapsedMs, 0);
+  const endMs = performance.now();
+  const startMs = endMs - totalMs;
+  const traceId = newTraceId();
+  const rootSpanId = newSpanId();
+  const root: TraceSpan = {
+    traceId,
+    spanId: rootSpanId,
+    name: `cueloop.${scope}`,
+    startTimeUnixNano: nanosFromPerfMs(startMs),
+    endTimeUnixNano: nanosFromPerfMs(endMs),
+  };
+
+  let cursorMs = startMs;
+  const children = marks.map((mark) => {
+    const phaseStartMs = cursorMs;
+    cursorMs += mark.elapsedMs;
+
+    return {
+      traceId,
+      spanId: newSpanId(),
+      parentSpanId: rootSpanId,
+      name: `cueloop.${scope}.${mark.label}`,
+      startTimeUnixNano: nanosFromPerfMs(phaseStartMs),
+      endTimeUnixNano: nanosFromPerfMs(cursorMs),
+    };
+  });
+
+  return [root, ...children];
+}
+
+/** POST the spans to `${OTEL_EXPORTER_OTLP_ENDPOINT}/v1/traces` as OTLP/JSON; a no-op when the endpoint is unset. */
+export async function postOtlpTrace(
+  serviceName: string,
+  spans: readonly TraceSpan[],
+): Promise<void> {
+  const endpoint = process.env.OTEL_EXPORTER_OTLP_ENDPOINT;
+  if (endpoint === undefined || spans.length === 0) return;
+
+  // strip a trailing slash so an endpoint like "http://host:4318/" does not become "//v1/traces"
+  const base = endpoint.replace(/\/+$/, "");
+  await fetch(`${base}/v1/traces`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(buildOtlpTracePayload(serviceName, spans)),
+  }).catch(() => undefined);
+}

package/src/perf/perf-report.ts

@@ -0,0 +1,17 @@
+/**
+ * Report the drained perf marks for a scope two ways from one set of instrumentation: a phase block on
+ * stderr when CUELOOP_PERF=1, and a kundi span tree when the OTLP endpoint is set. No-op when neither is on.
+ */
+
+import { formatPerfBlock, takePerfMarks } from "./perf-timings";
+import { phaseMarksToSpans, postOtlpTrace } from "./otlp-trace";
+
+const PERF_SERVICE_NAME = "cueloop-client";
+
+export function reportPerfMarks(scope: string): void {
+  const marks = takePerfMarks();
+  if (marks.length === 0) return;
+
+  if (process.env.CUELOOP_PERF === "1") process.stderr.write(formatPerfBlock(scope, marks));
+  void postOtlpTrace(PERF_SERVICE_NAME, phaseMarksToSpans(scope, marks));
+}

package/src/perf/perf-timings.test.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test";
+import { formatPerfBlock } from "./perf-timings";
+
+test("formatPerfBlock renders labeled rows and a summed TOTAL", () => {
+  const block = formatPerfBlock("startup", [
+    { label: "connect", elapsedMs: 12.34 },
+    { label: "firstRender", elapsedMs: 7.66 },
+  ]);
+
+  expect(block).toContain("--- perf startup ---");
+  expect(block).toContain("connect  12.3ms");
+  expect(block).toContain("firstRender  7.7ms");
+  expect(block).toContain("TOTAL  20.0ms");
+});
+
+test("formatPerfBlock totals to zero for no marks", () => {
+  expect(formatPerfBlock("startup", [])).toContain("TOTAL  0.0ms");
+});

package/src/perf/perf-timings.ts

@@ -0,0 +1,38 @@
+/** Startup phase timing for the perf harness: records elapsed ms between marks and flushes a
+ * labeled block to stderr. Every entry point is a no-op unless the CUELOOP_PERF env var is "1". */
+
+export interface PhaseMark {
+  label: string;
+  elapsedMs: number;
+}
+
+const phaseMarks: PhaseMark[] = [];
+let lastMarkAt: number | null = null;
+
+/** Marks record when the stderr timer (CUELOOP_PERF=1) or the kundi exporter (OTEL endpoint) is on. */
+function perfInstrumentationEnabled(): boolean {
+  return process.env.CUELOOP_PERF === "1" || process.env.OTEL_EXPORTER_OTLP_ENDPOINT !== undefined;
+}
+
+/** Record the elapsed ms since the previous mark (or process start) under `label`. */
+export function perfMark(label: string): void {
+  if (!perfInstrumentationEnabled()) return;
+  const now = performance.now();
+  phaseMarks.push({ label, elapsedMs: now - (lastMarkAt ?? 0) });
+  lastMarkAt = now;
+}
+
+/** Drain the recorded marks for a reporter to format or export; empties the buffer for the next scope. */
+export function takePerfMarks(): PhaseMark[] {
+  lastMarkAt = null;
+
+  return phaseMarks.splice(0, phaseMarks.length);
+}
+
+/** Render phase deltas as the stderr block: a header, one indented row per mark, a summed TOTAL. */
+export function formatPerfBlock(scope: string, marks: readonly PhaseMark[]): string {
+  const totalMs = marks.reduce((sum, mark) => sum + mark.elapsedMs, 0);
+  const rows = marks.map((mark) => `  ${mark.label}  ${mark.elapsedMs.toFixed(1)}ms`);
+
+  return [`--- perf ${scope} ---`, ...rows, `  TOTAL  ${totalMs.toFixed(1)}ms`, ""].join("\n");
+}

package/src/prototype-browser.test.ts

@@ -0,0 +1,81 @@
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import {
+  closePrototypeBrowser,
+  cssBoxToCell,
+  imageCellToCss,
+  setPrototypeBrowserForTest,
+} from "./prototype-browser";
+
+const IMAGE = { x: 1, y: 1, width: 80, height: 40 };
+const VIEWPORT = { width: 1280, height: 720 };
+
+describe("imageCellToCss", () => {
+  test("maps a cell inside the image to the center of its viewport pixel band", () => {
+    // Act - the image's top-left cell (1,1)
+    const css = imageCellToCss({ x: 1, y: 1 }, IMAGE, VIEWPORT)!;
+
+    // Assert - half a cell into the first band
+    expect(css.x).toBeCloseTo((0.5 / 80) * 1280, 5);
+    expect(css.y).toBeCloseTo((0.5 / 40) * 720, 5);
+  });
+
+  test("a click below the image's origin lands deeper in the page", () => {
+    // Act
+    const top = imageCellToCss({ x: 40, y: 2 }, IMAGE, VIEWPORT)!;
+    const bottom = imageCellToCss({ x: 40, y: 38 }, IMAGE, VIEWPORT)!;
+
+    // Assert
+    expect(bottom.y).toBeGreaterThan(top.y);
+  });
+
+  test("a cell outside the image returns null", () => {
+    // Assert - the gutter left of and the row above the image
+    expect(imageCellToCss({ x: 0, y: 10 }, IMAGE, VIEWPORT)).toBeNull();
+    expect(imageCellToCss({ x: 10, y: 0 }, IMAGE, VIEWPORT)).toBeNull();
+    expect(imageCellToCss({ x: 200, y: 10 }, IMAGE, VIEWPORT)).toBeNull();
+  });
+});
+
+describe("cssBoxToCell", () => {
+  test("maps a viewport rect back to the image cells covering it", () => {
+    // Arrange - a rect covering the right half, lower half of the page
+    const box = { x: 640, y: 360, width: 320, height: 180 };
+
+    // Act
+    const cell = cssBoxToCell(box, IMAGE, VIEWPORT);
+
+    // Assert - x at half width -> 40 cells in from the image origin (1)
+    expect(cell.column).toBe(1 + Math.floor((640 / 1280) * 80));
+    expect(cell.row).toBe(1 + Math.floor((360 / 720) * 40));
+    expect(cell.columns).toBe(Math.round((320 / 1280) * 80));
+    expect(cell.rows).toBe(Math.round((180 / 720) * 40));
+  });
+
+  test("a zero-size rect still reserves at least one cell", () => {
+    // Assert
+    const cell = cssBoxToCell({ x: 0, y: 0, width: 0, height: 0 }, IMAGE, VIEWPORT);
+
+    expect(cell.columns).toBe(1);
+    expect(cell.rows).toBe(1);
+  });
+});
+
+describe("closePrototypeBrowser", () => {
+  afterEach(() => setPrototypeBrowserForTest(null));
+
+  test("is a safe no-op when no prototype browser was ever launched", async () => {
+    // the shutdown path calls this on every quit; with no warm Chromium it must not throw or load puppeteer
+    await expect(closePrototypeBrowser()).resolves.toBeUndefined();
+    await expect(closePrototypeBrowser()).resolves.toBeUndefined();
+  });
+
+  test("closes a warm browser once without launching Chrome", async () => {
+    const close = mock(async () => {});
+
+    setPrototypeBrowserForTest({ close });
+    await closePrototypeBrowser();
+    await closePrototypeBrowser();
+
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+});

package/src/prototype-browser.ts

@@ -0,0 +1,329 @@
+/// <reference lib="dom" />
+/**
+ * Headless-Chromium backing for prototype review: render an HTML file to a PNG
+ * and resolve a click coordinate to a DOM element. puppeteer-core is imported
+ * lazily so plan/diff review and the test suite never load it.
+ */
+
+export interface PrototypeElement {
+  /** Stable CSS selector - the annotation anchor's authority. */
+  selector: string;
+  /** Short human label for the rail card (element text, else the selector). */
+  quote: string;
+  /** Element rectangle in CSS pixels within the captured viewport. */
+  box: ElementBox;
+}
+
+export interface ElementBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface PrototypeViewport {
+  width: number;
+  height: number;
+}
+
+export interface PrototypeRenderer {
+  readonly viewport: PrototypeViewport;
+  screenshot(): Promise<Uint8Array>;
+  elementAt(cssX: number, cssY: number): Promise<PrototypeElement | null>;
+  /** Scroll the page by a pixel delta; returns whether the scroll position moved. */
+  scrollBy(deltaY: number): Promise<boolean>;
+  close(): Promise<void>;
+}
+
+export interface LaunchOptions {
+  filePath: string;
+  viewport: PrototypeViewport;
+  /** Capture density; 1 when the viewport already matches the region's pixels. */
+  deviceScaleFactor?: number;
+  /** Absolute path to a Chrome/Chromium binary; falls back to the channel. */
+  executablePath?: string;
+  /** The terminal's color scheme, emulated as prefers-color-scheme so a mockup
+   *  with theme-aware CSS renders to match the surface it emerges into. */
+  colorScheme?: "dark" | "light";
+}
+
+/** Cell click -> CSS pixel inside the letterboxed image, or null when outside it. */
+export function imageCellToCss(
+  event: { x: number; y: number },
+  image: { x: number; y: number; width: number; height: number },
+  viewport: PrototypeViewport,
+): { x: number; y: number } | null {
+  const columnInImage = event.x - image.x;
+  const rowInImage = event.y - image.y;
+
+  if (
+    columnInImage < 0 ||
+    rowInImage < 0 ||
+    columnInImage >= image.width ||
+    rowInImage >= image.height
+  ) {
+    return null;
+  }
+
+  return {
+    x: ((columnInImage + 0.5) / image.width) * viewport.width,
+    y: ((rowInImage + 0.5) / image.height) * viewport.height,
+  };
+}
+
+/** CSS pixel rect -> the image cell it maps to, for anchoring overlays. */
+export function cssBoxToCell(
+  box: ElementBox,
+  image: { x: number; y: number; width: number; height: number },
+  viewport: PrototypeViewport,
+) {
+  const scaleColumn = image.width / viewport.width;
+  const scaleRow = image.height / viewport.height;
+
+  return {
+    column: image.x + Math.floor(box.x * scaleColumn),
+    row: image.y + Math.floor(box.y * scaleRow),
+    columns: Math.max(1, Math.round(box.width * scaleColumn)),
+    rows: Math.max(1, Math.round(box.height * scaleRow)),
+  };
+}
+
+export type PrototypeRendererFactory = (options: LaunchOptions) => Promise<PrototypeRenderer>;
+
+let rendererFactory: PrototypeRendererFactory | null = null;
+
+/** Override the renderer factory so tests can inject a browserless fake. */
+export function setPrototypeRendererFactory(factory: PrototypeRendererFactory | null): void {
+  rendererFactory = factory;
+}
+
+/** The active factory - the injected fake in tests, else real headless Chromium. */
+export function prototypeRendererFactory(): PrototypeRendererFactory {
+  return rendererFactory ?? launchPrototypeRenderer;
+}
+
+type PuppeteerBrowser = Awaited<ReturnType<typeof import("puppeteer-core").default.launch>>;
+
+// One Chromium per process, kept warm and reused across prototype opens: the
+// launch is the dominant load cost, so each open only spawns a fresh page.
+let sharedBrowser: Promise<PuppeteerBrowser> | null = null;
+
+/** Install only the browser lifecycle used by unit tests, without launching Chrome. */
+export function setPrototypeBrowserForTest(browser: Pick<PuppeteerBrowser, "close"> | null): void {
+  // SAFETY: tests call only closePrototypeBrowser before resetting this seam, so close is the sole
+  // browser member the shared slot can read while the double is installed.
+  sharedBrowser = browser ? Promise.resolve(browser as PuppeteerBrowser) : null;
+}
+
+async function warmBrowser(executablePath: string | undefined): Promise<PuppeteerBrowser> {
+  // reuse the warm browser only while it is still connected; a crashed or
+  // disconnected Chromium is dropped so the next open relaunches instead of
+  // calling newPage on a dead process forever
+  const cached = sharedBrowser ? await sharedBrowser.catch(() => null) : null;
+
+  if (cached && cached.connected) return cached;
+  const puppeteer = (await import("puppeteer-core")).default;
+  const launched = puppeteer.launch({
+    executablePath: executablePath ?? chromeExecutable(),
+    headless: true,
+    args: ["--no-sandbox", "--hide-scrollbars", "--force-color-profile=srgb"],
+  });
+
+  sharedBrowser = launched;
+  const browser = await launched.catch((error) => {
+    if (sharedBrowser === launched) sharedBrowser = null;
+    throw error;
+  });
+
+  browser.once("disconnected", () => {
+    if (sharedBrowser === launched) sharedBrowser = null;
+  });
+
+  return browser;
+}
+
+/**
+ * Close the warm Chromium so it never orphans when cueloop exits. Called from
+ * the shutdown path (the normal quit is not a signal, so puppeteer's own signal
+ * handlers do not fire). Idempotent.
+ */
+export async function closePrototypeBrowser(): Promise<void> {
+  const pending = sharedBrowser;
+
+  sharedBrowser = null;
+  if (!pending) return;
+  const browser = await pending.catch(() => null);
+
+  await browser?.close().catch(() => undefined);
+}
+
+export async function launchPrototypeRenderer(options: LaunchOptions): Promise<PrototypeRenderer> {
+  const { pathToFileURL } = await import("node:url");
+  const browser = await warmBrowser(options.executablePath);
+  // close only the page on teardown, never the shared browser, so the next open
+  // reuses the warm Chromium
+  const page = await browser.newPage();
+
+  try {
+    await page.setViewport({
+      width: options.viewport.width,
+      height: options.viewport.height,
+      deviceScaleFactor: options.deviceScaleFactor ?? 2,
+    });
+    // match the terminal's scheme so a theme-aware mockup renders its dark or
+    // light variant to sit correctly on the surface it emerges into
+    await page.emulateMediaFeatures([
+      { name: "prefers-color-scheme", value: options.colorScheme ?? "light" },
+    ]);
+    // `load` waits for images and styles but skips networkidle0's fixed 500ms
+    // idle window, which a static local file would otherwise always pay
+    await page.goto(pathToFileURL(options.filePath).href, { waitUntil: "load" });
+    // Render the mockup on the terminal's own surface rather than on an opaque
+    // page: strip the root background so it never paints a square box, and the
+    // capture (taken with alpha, below) lets the active terminal theme show
+    // through around the mockup's own components - the prototype emerges into
+    // whatever theme is running instead of sitting in a grey card.
+    await page.evaluate(() => {
+      for (const element of [document.documentElement, document.body]) {
+        element?.style.setProperty("background", "transparent", "important");
+      }
+    });
+  } catch (error) {
+    await page.close().catch(() => undefined);
+    throw error;
+  }
+
+  return {
+    viewport: options.viewport,
+    async screenshot() {
+      // omitBackground keeps the alpha from the stripped page background, so the
+      // terminal composites the mockup over its own theme surface.
+      const buffer = await page.screenshot({
+        type: "png",
+        encoding: "binary",
+        omitBackground: true,
+      });
+
+      return new Uint8Array(buffer);
+    },
+    async elementAt(cssX, cssY) {
+      return page.evaluate(elementAtScript, cssX, cssY);
+    },
+    async scrollBy(deltaY) {
+      return page.evaluate(scrollByScript, deltaY);
+    },
+    async close() {
+      await page.close().catch(() => undefined);
+    },
+  };
+}
+
+/** Serialized into the page (self-contained for puppeteer): resolve the click to a component element. */
+function elementAtScript(x: number, y: number) {
+  const SEMANTIC = new Set([
+    "SECTION",
+    "ARTICLE",
+    "LI",
+    "NAV",
+    "HEADER",
+    "FOOTER",
+    "ASIDE",
+    "FORM",
+  ]);
+  const isNamed = (element: Element): boolean =>
+    element.classList.length > 0 || SEMANTIC.has(element.tagName);
+  // a card wraps several children: climb to the nearest named container holding
+  // more than one child, else the nearest named ancestor, else the clicked leaf
+  const componentRoot = (start: Element): Element => {
+    let namedFallback: Element | null = null;
+    let current: Element | null = start;
+
+    while (current && current !== document.body) {
+      if (isNamed(current)) {
+        if (current.childElementCount > 1) return current;
+        namedFallback = namedFallback ?? current;
+      }
+      current = current.parentElement;
+    }
+
+    return namedFallback ?? start;
+  };
+  const selectorFor = (start: Element): string => {
+    const parts: string[] = [];
+    let current: Element | null = start;
+
+    while (current && current.nodeType === 1 && current !== document.documentElement) {
+      let part = current.tagName.toLowerCase();
+
+      if (current.id) {
+        parts.unshift(part + "#" + CSS.escape(current.id));
+        break;
+      }
+      const parent: Element | null = current.parentElement;
+
+      if (parent) {
+        const currentTagName = current.tagName;
+        const twins = [...parent.children].filter((child) => child.tagName === currentTagName);
+
+        if (twins.length > 1) part += ":nth-of-type(" + (twins.indexOf(current) + 1) + ")";
+      }
+      parts.unshift(part);
+      current = current.parentElement;
+    }
+
+    return parts.join(" > ");
+  };
+  // Prefer the nearest focusable target before falling back to its component container.
+  const focusableTarget = (start: Element | null): Element | null => {
+    for (
+      let element: Element | null = start;
+      element && element !== document.body;
+      element = element.parentElement
+    ) {
+      if (element instanceof HTMLElement && element.tabIndex >= 0) {
+        return element;
+      }
+    }
+
+    return null;
+  };
+  const hit = document.elementFromPoint(x, y);
+
+  if (!(hit instanceof Element)) return null;
+  const node = focusableTarget(hit) ?? componentRoot(hit);
+  const selector = selectorFor(node);
+
+  if (!selector) return null;
+  const text = (node.textContent || "").replace(/\s+/g, " ").trim();
+  const tag = node.tagName.toLowerCase();
+  const quote = text
+    ? text.slice(0, 80)
+    : node.id
+      ? tag + "#" + node.id
+      : node.classList.length
+        ? tag + "." + node.classList[0]
+        : tag;
+  const rect = node.getBoundingClientRect();
+
+  return { selector, quote, box: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } };
+}
+
+function scrollByScript(deltaY: number): boolean {
+  const before = window.scrollY;
+
+  window.scrollBy(0, deltaY);
+
+  return window.scrollY !== before;
+}
+
+/** Standard Chrome install locations by platform; puppeteer-core ships no browser. */
+function chromeExecutable(): string {
+  if (process.platform === "darwin") {
+    return "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
+  }
+  if (process.platform === "win32") {
+    return "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
+  }
+
+  return "/usr/bin/google-chrome";
+}

package/src/prototype-pixels.tsx

@@ -0,0 +1,35 @@
+/**
+ * Lazy boundary for the opt-in kitty pixel prototype. The pixel path pulls in the
+ * kitty image writer, the headless-browser renderer, and (on first paint) puppeteer;
+ * none of that belongs in the runtime unless the `[experimental] prototype_pixels`
+ * flag is on. Importing only the TYPE here is erased at build time, so the real
+ * module - and its dependencies - loads only when this component actually mounts,
+ * which App does exclusively for a pixel prototype. This lives outside components/
+ * on purpose: it is an app boundary, not a visual component the story catalog covers.
+ */
+
+import React, { useEffect, useState } from "react";
+import type { PrototypeContentViewProps } from "./components/PrototypeContentView";
+
+type PixelPrototypeView =
+  (typeof import("./components/PrototypeContentView"))["PrototypeContentView"];
+
+export function PrototypePixels(props: PrototypeContentViewProps): React.ReactNode {
+  const [View, setView] = useState<PixelPrototypeView | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+
+    void import("./components/PrototypeContentView").then((module) => {
+      if (alive) setView(() => module.PrototypeContentView);
+    });
+
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  if (!View) return null;
+
+  return <View {...props} />;
+}