// Opening an artifact shows ONE loading surface, not three.//// ## What went wrong//// Opening an artifact used to walk through three visually distinct placeholders// in quick succession, each in its own layout and each visible for a few hundred// milliseconds:////   1. "Loading artifact…"        — the row being fetched, small corner text//   2. "Preparing the renderer…"  — the lazy chunk arriving, a different corner//   3. "Preparing interactive UI" — the shell booting, a card in the middle//// Those are executor's own internal boundaries — an HTTP request, a code-split// point, an iframe handshake — and none of them is a fact a person opening a// saved dashboard has any use for. What they produced was churn: three// different things flashing in three different places. Three quick loading// states are worse than one longer one, because every transition is a fresh// demand on the eye.//// ## What is asserted, and why it is asserted this way//// The honest test of "the user never saw a placeholder" is not a screenshot at// one moment — the states this is about were only ever visible for a few// hundred milliseconds, so any single sample would miss them and pass against// the old code too. So the page is SAMPLED CONTINUOUSLY, from before navigation// until the artifact is live, and the assertion is over everything that was ever// on screen:////   - none of the three placeholder texts ever appeared;//   - the stage's bounding box never moved, so nothing was ever laid out twice.//// Both directions are covered, because they fail differently: warm (from the// gallery, renderer chunk already fetched) and cold (a direct URL in a fresh// context, nothing cached).import { randomBytes } from "node:crypto"; import { expect } from "@effect/vitest";import { Effect, Predicate } from "effect";import type { Page } from "playwright";import { composePluginApi } from "@executor-js/api/server";import { AccountHttpApi } from "@executor-js/api";import type { ArtifactId } from "@executor-js/sdk/shared"; import { scenario } from "../src/scenario";import { Api, Browser, Mcp, Target } from "../src/services";import { visit } from "../src/surfaces/browser"; const api = composePluginApi([] as const); const uniqueSuffix = () => randomBytes(4).toString("hex"); /** * The placeholder texts that must never reach a user again. * * Named literally rather than by testid: the point is that the WORDS are gone * from the experience, and a rename that kept the churn under a different * caption should not pass. Each string is the exact one the corresponding * placeholder rendered before this change. */const FORBIDDEN_LOADING_TEXT = [  "Loading artifact",  "Preparing the renderer",  "Preparing interactive UI",] as const; /** A tall, distinctive artifact — the same shape the main artifacts scenario *  uses, so the fill-mode sizing under test here is the real one. */const artifactSource = (marker: string) => `function App() {  return (    <div className="flex h-full flex-col gap-4">      <div data-testid="artifact-header" className="shrink-0">        <h2>Loading Surface</h2>        <p data-testid="artifact-marker">${marker}</p>      </div>      <div data-testid="artifact-scroll" className="min-h-0 flex-1 overflow-auto">        {Array.from({ length: 30 }, (_, i) => (          <p key={i} data-testid={"artifact-row-" + i} style={{ height: 28 }}>            Row {i + 1}: ${marker}          </p>        ))}      </div>    </div>  );}`; const structuredOf = (result: { readonly raw: unknown }): Record<string, unknown> =>  ((result.raw as { structuredContent?: Record<string, unknown> }).structuredContent ??    {}) as Record<string, unknown>; const artifactContent = (page: Page) =>  page.frameLocator('[data-testid="artifact-shell-frame"]').frameLocator("iframe"); type Sample = {  readonly text: string;  readonly stage: {    readonly x: number;    readonly y: number;    readonly w: number;    readonly h: number;  } | null;}; declare global {  // eslint-disable-next-line no-var  var __loadingSamples: Array<Sample> | undefined;  // eslint-disable-next-line no-var  var __loadingSampler: number | undefined;} /** * Watch the CONSOLE document continuously for the whole open. * * Installed as an init script so it is running before the first byte of the * page, and polls on an animation frame — fast enough that a placeholder * visible for even one paint is recorded. `innerText` of the console document * only (never the frames): the shell's own inner states live one document down * and are covered separately, and reaching into a frame from here would sample * the artifact's own text as if it were the console's. * * The stage's box is sampled alongside, because a placeholder that came and * went without changing any TEXT would still have moved the layout, and a * layout that jumps is the same defect wearing a different hat. */const startSampling = async (page: Page): Promise<void> => {  await page.addInitScript(() => {    globalThis.__loadingSamples = [];    const sample = () => {      const stage = document.querySelector<HTMLElement>(        '[data-testid="artifact-shell-container"], [data-slot="artifact-stage-skeleton"]',      );      const box = stage?.getBoundingClientRect();      globalThis.__loadingSamples?.push({        text: document.body?.innerText ?? "",        stage: box          ? {              x: Math.round(box.x),              y: Math.round(box.y),              w: Math.round(box.width),              h: Math.round(box.height),            }          : null,      });      globalThis.__loadingSampler = requestAnimationFrame(sample);    };    sample();  });}; const readSamples = (page: Page): Promise<ReadonlyArray<Sample>> =>  page.evaluate(() => globalThis.__loadingSamples ?? []); /** * Assert the whole open was one surface. * * Two independent properties over the same recording — no placeholder words * ever rendered, and the stage never changed size or position — because either * one alone would let the churn back in through the other door. */const expectSingleLoadingSurface = (samples: ReadonlyArray<Sample>, label: string): void => {  expect(samples.length, `${label}: the sampler actually ran`).toBeGreaterThan(3);   for (const forbidden of FORBIDDEN_LOADING_TEXT) {    const hit = samples.findIndex((entry) => entry.text.includes(forbidden));    expect(      hit,      `${label}: "${forbidden}" was on screen at sample ${hit} of ${samples.length} — the open still walks through more than one loading state`,    ).toBe(-1);  }   // The stage's geometry, over every frame in which a stage existed at all.  // The skeleton and the artifact frame share one box by construction (the  // skeleton is an absolutely-positioned cover over the frame's own container),  // so a change here means one of them was laid out differently from the other.  const boxes = samples.map((entry) => entry.stage).filter(Predicate.isNotNull);  expect(boxes.length, `${label}: the stage was on screen at some point`).toBeGreaterThan(0);   const first = boxes[0];  if (!first) return;  for (const [index, box] of boxes.entries()) {    // A pixel of tolerance for sub-pixel rounding as the scrollbar settles.    expect(      Math.abs(box.w - first.w) <= 1 && Math.abs(box.h - first.h) <= 1,      `${label}: the stage changed size mid-load at sample ${index} (${JSON.stringify(box)} vs ${JSON.stringify(first)}) — the artifact appeared in a different box than the skeleton held`,    ).toBe(true);  }}; scenario(  "Artifacts · opening an artifact shows one loading surface, not three",  { timeout: 240_000 },  Effect.gen(function* () {    const target = yield* Target;    const mcp = yield* Mcp;    const browser = yield* Browser;    const { client: apiClient } = yield* Api;     const identity = yield* target.newIdentity();    const client = yield* apiClient(api, identity);    // Artifacts are on by default; the plain session carries the surface    // this scenario exercises.    const session = mcp.session(identity);     const suffix = uniqueSuffix();    const title = `Loading Surface ${suffix}`;    const marker = `surface-ok-${suffix}`;     let artifactId: ArtifactId | undefined;     yield* Effect.gen(function* () {      const created = yield* session.call("create-artifact", {        code: artifactSource(marker),        title,        description: "An artifact opened to watch how it loads",      });      expect(created.ok, `create-artifact succeeded: ${created.text}`).toBe(true);      artifactId = structuredOf(created).artifactId as ArtifactId;      expect(artifactId, "the artifact was persisted").toBeTruthy();       const accountClient = yield* apiClient(AccountHttpApi, identity);      const me = yield* accountClient.account.me();      const orgSlug = me.organization?.slug;      const detailPath = orgSlug        ? `/${orgSlug}/artifacts/${artifactId}`        : `/artifacts/${artifactId}`;       // ------------------------------------------------------------------      // WARM: the journey a user actually takes — gallery, then a click.      // ------------------------------------------------------------------      yield* browser.session(identity, async ({ page, step }) => {        await step("Open the Artifacts gallery", async () => {          await startSampling(page);          await visit(page, `${target.baseUrl}/artifacts`);          await page            .getByRole("link", { name: `Open artifact ${title}` })            .waitFor({ timeout: 30_000 });          // Discard everything from the gallery's own load: this scenario is          // about the OPEN, and the list has a loading state of its own that is          // out of scope here.          await page.evaluate(() => {            globalThis.__loadingSamples = [];          });        });         await step("Click through to the artifact", async () => {          await page.getByRole("link", { name: `Open artifact ${title}` }).click();          await artifactContent(page).getByTestId("artifact-marker").waitFor({ timeout: 60_000 });        });         await step("The whole open was one surface", async () => {          expectSingleLoadingSurface(await readSamples(page), "warm open");        });         await step("The skeleton hands over and gets out of the way", async () => {          // The cover is removed once the artifact has painted — not left over          // it at zero opacity, which would swallow every click.          await expect            .poll(async () => await page.locator('[data-testid="artifact-stage-cover"]').count(), {              timeout: 20_000,              message: "the loading cover was removed after the artifact rendered",            })            .toBe(0);        });         await step("Fill-mode sizing survived the handoff", async () => {          // The frame is the viewport below the title bar, exactly as it is in          // the steady state — so nothing about holding a skeleton over it          // changed the height chain it measures against.          const frameBox = await page.locator('[data-testid="artifact-shell-frame"]').boundingBox();          const viewport = page.viewportSize();          expect(frameBox?.height ?? 0, "the frame fills the room it was given").toBeGreaterThan(            200,          );          expect(            frameBox?.height ?? 0,            "the frame is bounded by the window, not by its content",          ).toBeLessThanOrEqual(viewport?.height ?? 0);           const pageScrolls = await page.evaluate(            () => document.documentElement.scrollHeight > document.documentElement.clientHeight + 1,          );          expect(pageScrolls, "the console page still does not scroll").toBe(false);        });      });       // ------------------------------------------------------------------      // COLD: the deep link, in a context that has never loaded the console.      //      // The harder case, and the one the preload exists for: nothing is cached,      // so the row fetch and the renderer chunk both start from zero. This is      // where the three states used to be most visible, and where a regression      // in the preload would show up first.      // ------------------------------------------------------------------      yield* browser.session(identity, async ({ page, step }) => {        await step("Open the artifact by URL, cold", async () => {          await startSampling(page);          await page.goto(`${target.baseUrl}${detailPath}`, { waitUntil: "commit" });          await artifactContent(page).getByTestId("artifact-marker").waitFor({ timeout: 60_000 });        });         await step("The cold open was one surface too", async () => {          expectSingleLoadingSurface(await readSamples(page), "cold open");        });         await step("The artifact is live and interactive", async () => {          const rendered = artifactContent(page).getByTestId("artifact-marker");          expect(await rendered.textContent()).toContain(marker);           // Interactive, not merely painted: the cover is gone, so a scroll          // inside the artifact actually reaches it.          const scrolled = await artifactContent(page)            .getByTestId("artifact-scroll")            .evaluate((el) => {              el.scrollTop = 200;              return el.scrollTop;            });          expect(scrolled, "the artifact takes input after the handoff").toBeGreaterThan(0);        });      });    }).pipe(      Effect.ensuring(        Effect.suspend(() =>          artifactId === undefined            ? Effect.void            : client.artifacts.remove({ params: { artifactId } }),        ).pipe(Effect.ignore),      ),    );  }),);