T47 Ship: a gallery whose wasm fetch fails retries, then tells the host; the host shows it at once and waits a minute for a slow start

frontend/e2e/live.spec.ts

@@ -20,6 +20,23 @@ test("a story runs live and follows the site's mode", async ({ page }) => {
   await expect(frame.locator("html")).toHaveClass(/dark/);
 });
 
+test("a frame whose wasm fetch fails once starts on its retry", async ({ page }) => {
+  let aborted = false;
+  await page.route("**/gallery/gallery_bg.wasm", (route) => {
+    if (aborted) return route.continue();
+    aborted = true;
+    return route.abort();
+  });
+  await live(page, "/components/buttons/button/");
+  expect(aborted).toBe(true);
+});
+
+test("a frame that cannot start says so at once", async ({ page }) => {
+  await page.route("**/gallery/gallery_bg.wasm", (route) => route.abort());
+  await page.goto("/components/buttons/button/");
+  await expect(page.locator(".live .live-state")).toContainText("Couldn't start", { timeout: 15_000 });
+});
+
 test("a starting story leaves focus with the host", async ({ page, isMobile }) => {
   test.skip(isMobile, "no hardware keyboard");
   await page.goto("/");

frontend/src/Live.tsx

@@ -4,7 +4,7 @@ import { hold } from "./scroll";
 import { mode, useMode } from "./theme";
 
 const SPIN_AFTER = 400;
-const GIVE_UP = 20000;
+const GIVE_UP = 60000;
 
 type State = "starting" | "slow" | "ready" | "failed";
 
@@ -28,7 +28,15 @@ export function Live({ page, story, title }: { page: string; story: string; titl
       console.error(`live: ${page}/${story} sent no ready in ${GIVE_UP} ms`);
     }, GIVE_UP);
     const ready = (event: MessageEvent) => {
-      if (event.source !== frame.current?.contentWindow || event.data?.ely !== "ready") return;
+      if (event.source !== frame.current?.contentWindow) return;
+      if (event.data?.ely === "failed") {
+        clearTimeout(slow);
+        clearTimeout(failed);
+        setState("failed");
+        console.error(`live: ${page}/${story} failed to start: ${event.data.error}`);
+        return;
+      }
+      if (event.data?.ely !== "ready") return;
       clearTimeout(slow);
       clearTimeout(failed);
       setState("ready");