fix(playground): move iframe host integration

Author: pgherveou

playground/src/components/DiagnosisView.tsx

@@ -72,13 +72,17 @@ export function DiagnosisView({
     };
   }, [services, testResults]);
 
+  const reportMarkdown = useMemo(
+    () =>
+      hasResults && !isRunning
+        ? renderReportMarkdown(services, testResults)
+        : "",
+    [hasResults, isRunning, services, testResults],
+  );
+
   const handleCopyReport = async () => {
     try {
-      // Rendered on demand: the full report is only needed on copy, not on
-      // every per-method result update during a run.
-      await navigator.clipboard.writeText(
-        renderReportMarkdown(services, testResults),
-      );
+      await navigator.clipboard.writeText(reportMarkdown);
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     } catch {
@@ -92,7 +96,7 @@ export function DiagnosisView({
   // Copy the report to the clipboard first as a fallback if the body is
   // truncated.
   const handleSubmitReport = () => {
-    const report = renderReportMarkdown(services, testResults);
+    const report = reportMarkdown;
     void navigator.clipboard?.writeText(report).catch(() => {});
     const url = reportIssueUrl(report, detectHostMode());
     try {
@@ -123,11 +127,12 @@ export function DiagnosisView({
           <span className="panel__label">About</span>
         </div>
         <p className="panel__desc">
-          Runs every TrUAPI method against the connected host to build a coverage
-          report — which methods work, which fail, and which aren&apos;t wired
-          yet. Methods run one at a time, in order; those that need your approval
-          (signing, permission and resource requests) wait on your response
-          before the run continues. When it finishes, copy the report below.
+          Runs every TrUAPI method against the connected host to build a
+          coverage report — which methods work, which fail, and which
+          aren&apos;t wired yet. Methods run one at a time, in order; those that
+          need your approval (signing, permission and resource requests) wait on
+          your response before the run continues. When it finishes, copy the
+          report below.
         </p>
         <p className="diag__callout">
           Before you start: make sure you are <strong>logged in</strong>, and
@@ -145,24 +150,38 @@ export function DiagnosisView({
             Stop
           </button>
         ) : (
-          <button type="button" className="btn btn--primary" onClick={onRun}>
+          <button
+            type="button"
+            className="btn btn--primary"
+            data-testid="diagnosis-run"
+            onClick={onRun}
+          >
             <span className="btn__glyph">▶</span>
             Run diagnosis
           </button>
         )}
         {hasResults && (
           <span
             className="autotest__summary"
+            data-testid="diagnosis-summary"
             data-has-fail={!isRunning && failCount > 0}
           >
             {passCount} success · {failCount} failed
           </span>
         )}
         {hasResults && !isRunning && (
           <div className="diag__report-actions">
+            <pre
+              hidden
+              data-testid="diagnosis-report-markdown"
+              data-report-ready={reportMarkdown.length > 0}
+            >
+              {reportMarkdown}
+            </pre>
             <button
               type="button"
               className="autotest__report-copy"
+              data-testid="diagnosis-copy-report"
               onClick={handleCopyReport}
             >
               {copied ? "Copied ✓" : "Copy report"}
@@ -188,6 +207,7 @@ export function DiagnosisView({
               <div key={r.id}>
                 <div
                   className="diag__row"
+                  data-testid="diagnosis-row"
                   data-status={r.status}
                   data-expandable={expandable}
                   onClick={

playground/src/components/ServiceTable.tsx

@@ -30,6 +30,7 @@ export function ServiceTable({
       <button
         type="button"
         className="method method--autotest"
+        data-testid="diagnosis-entry"
         data-active={isDiagnosisActive}
         data-supported="true"
         onClick={() => onSelect(DIAGNOSIS_ID, "")}

playground/src/lib/auto-test.ts

@@ -1,8 +1,4 @@
-import {
-  runExample,
-  type LogEntry,
-  type RunResult,
-} from "./example-runner";
+import { runExample, type LogEntry, type RunResult } from "./example-runner";
 import { getClient } from "./transport";
 import type { MethodInfo, ServiceInfo } from "./services";
 
@@ -18,6 +14,7 @@ export interface TestEntry {
 
 const UNARY_TIMEOUT_MS = 10_000;
 const SIGNING_TIMEOUT_MS = 30_000;
+const SSO_TIMEOUT_MS = 60_000;
 
 // Services skipped wholesale in the diagnosis until hosts wire them up.
 const SKIPPED_SERVICES = new Set(["Coin Payment"]);
@@ -36,6 +33,10 @@ const LONG_TIMEOUT_METHODS = new Set([
   "Preimage/submit",
 ]);
 
+const METHOD_TIMEOUT_MS = new Map<string, number>([
+  ["Account/get_account_alias", SSO_TIMEOUT_MS],
+]);
+
 type RunOneOpts = {
   serviceName: string;
   method: MethodInfo;
@@ -63,9 +64,9 @@ async function runOne({
   const source = method.exampleSource;
   const logs: LogEntry[] = [];
   const onLog = (entry: LogEntry) => logs.push(entry);
-  const timeoutMs = LONG_TIMEOUT_METHODS.has(id)
-    ? SIGNING_TIMEOUT_MS
-    : UNARY_TIMEOUT_MS;
+  const timeoutMs =
+    METHOD_TIMEOUT_MS.get(id) ??
+    (LONG_TIMEOUT_METHODS.has(id) ? SIGNING_TIMEOUT_MS : UNARY_TIMEOUT_MS);
 
   // The example decides pass/fail explicitly: it resolves on success and throws
   // (via `assert(...)` or any uncaught error) on failure. `console.*` is pure

playground/src/lib/diagnosis-report.ts

@@ -66,10 +66,9 @@ export function renderReportMarkdown(
   return lines.join("\n");
 }
 
-// The failure reason for a method, flattened to a single escaped table cell.
-// Only failures carry details; other statuses leave the cell empty.
+// Method output flattened to a single escaped table cell.
 function detailCell(entry: TestEntry | undefined): string {
-  if (entry?.status !== "fail" || entry.output == null) return "";
+  if (entry?.output == null) return "";
   return entry.output.replace(/\s+/g, " ").replace(/\|/g, "\\|").trim();
 }
 

playground/src/lib/example-runner.ts

@@ -76,11 +76,10 @@ export async function runExample(opts: {
   client: TrUApiClient;
   onLog: (entry: LogEntry) => void;
 }): Promise<RunResult> {
-  const { source, client, onLog } = opts;
-
+  const { client, onLog } = opts;
   let js: string;
   try {
-    js = transform(source, { transforms: ["typescript"] }).code;
+    js = transform(opts.source, { transforms: ["typescript"] }).code;
   } catch (err) {
     throw new ExampleSyntaxError(
       err instanceof Error ? err.message : String(err),

playground/src/lib/transport.ts

@@ -1,6 +1,5 @@
 import {
   createClient,
-  createIframeProvider,
   createMessagePortProvider,
   createTransport,
   type Provider,
@@ -48,6 +47,61 @@ async function waitForWebviewPort(
   );
 }
 
+function waitForIframePort(
+  hostOrigin: string,
+  signal?: AbortSignal,
+  timeoutMs = 20_000,
+): Promise<MessagePort> {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    const cleanup = () => {
+      window.removeEventListener("message", onMessage);
+      signal?.removeEventListener("abort", onAbort);
+      if (timer !== null) clearTimeout(timer);
+    };
+    const finish = (port: MessagePort) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      resolve(port);
+    };
+    const fail = (error: Error) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      reject(error);
+    };
+    const onAbort = () => fail(new Error("waitForIframePort aborted"));
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== window.parent) return;
+      if (event.origin !== hostOrigin) return;
+      if (event.data?.type !== "truapi-init") return;
+      const port = event.ports[0];
+      if (!port) {
+        fail(new Error("truapi-init did not include a MessagePort"));
+        return;
+      }
+      finish(port);
+    };
+
+    window.addEventListener("message", onMessage);
+    signal?.addEventListener("abort", onAbort, { once: true });
+    timer = setTimeout(
+      () =>
+        fail(
+          new Error(
+            `Timed out waiting for iframe MessagePort (${timeoutMs}ms)`,
+          ),
+        ),
+      timeoutMs,
+    );
+
+    window.parent.postMessage({ type: "truapi-ready" }, hostOrigin);
+  });
+}
+
 /** Origin used as the `targetOrigin` argument for outbound `postMessage`
  * frames. `document.referrer` is the URL of the parent document that loaded
  * the iframe, so its origin is the host that's expected to receive our
@@ -76,7 +130,16 @@ function createSandboxProvider(): Provider {
           "the playground must be embedded by a host that sends a Referer header.",
       );
     }
-    return createIframeProvider({ target: window.parent, hostOrigin });
+    const portController = new AbortController();
+    const provider = createMessagePortProvider(
+      waitForIframePort(hostOrigin, portController.signal),
+    );
+    const baseDispose = provider.dispose;
+    provider.dispose = () => {
+      portController.abort();
+      baseDispose?.();
+    };
+    return provider;
   }
   if (isWebview()) {
     const portController = new AbortController();

playground/tests/e2e/handshake.spec.ts

@@ -11,7 +11,9 @@ test.describe("handshake", () => {
     await waitForOnline(frame);
 
     // Once connected, the splash unmounts and the service rail mounts.
-    // The Auto-Test entry button is the simplest stable proof of that.
-    await expect(frame.locator(".method--autotest")).toBeVisible();
+    // The diagnosis entry is the simplest stable proof of that.
+    await expect(
+      frame.getByRole("button", { name: /Diagnosis Full host coverage report/ }),
+    ).toBeVisible();
   });
 });

playground/tests/e2e/helpers.ts

@@ -12,7 +12,7 @@ export async function openPlaygroundInDotli(page: Page): Promise<FrameLocator> {
   // dotli renders an additional hidden iframe (host.localhost:5173?mode=direct)
   // alongside the proxied playground; scope to the playground src so the
   // FrameLocator is unique under Playwright strict mode.
-  const frame = page.frameLocator('iframe[src="http://localhost:3000"]');
+  const frame = page.frameLocator('iframe[src^="http://localhost:3000"]');
   // The playground renders the masthead once mounted; the status chip is
   // there from the first render in either splash or shell mode.
   await expect(frame.locator(".status")).toBeVisible({ timeout: 30_000 });

playground/tests/e2e/login-modal.spec.ts

@@ -0,0 +1,68 @@
+import { expect, test, type Page } from "@playwright/test";
+import { openPlaygroundInDotli, waitForOnline } from "./helpers";
+
+/**
+ * The login pairing UI is driven by the Rust core's ordered auth-state
+ * stream. This spec pins the two failure modes of the event-soup era:
+ * a boot-time disconnected tick closing the just-opened pairing modal,
+ * and a dismissed modal leaving the login flow polling forever.
+ */
+test.describe("login pairing modal", () => {
+  test("stays open while pairing, cancels on close, reopens on retry", async ({
+    page,
+  }) => {
+    const subscribeSends: number[] = [];
+    page.on("console", (msg) => {
+      const text = msg.text();
+      if (
+        text.includes("chainSend") &&
+        text.includes("statement_subscribeStatement")
+      ) {
+        subscribeSends.push(Date.now());
+      }
+    });
+    await page.addInitScript(() => {
+      try {
+        localStorage.setItem("truapi:logLevel", "debug");
+      } catch {
+        /* storage unavailable */
+      }
+    });
+
+    const frame = await openPlaygroundInDotli(page);
+    await waitForOnline(frame);
+
+    // Opening the login modal renders the pairing QR from the core's
+    // `Pairing` auth state.
+    await openPairingModal(page);
+
+    // The modal must survive the first seconds of pairing: the freshly
+    // booted core's session-store sync must not tear it down.
+    await page.waitForTimeout(5_000);
+    await expect(page.locator("#auth-modal-backdrop.open")).toBeVisible();
+    await expect(page.locator("#auth-modal-qr canvas")).toBeVisible();
+
+    // While pairing, the core polls the statement store with ~2s
+    // snapshot queries.
+    expect(subscribeSends.length).toBeGreaterThanOrEqual(2);
+
+    // Closing the modal cancels the login in the core: polling stops.
+    await page.locator("#auth-modal-close").click();
+    await expect(page.locator("#auth-modal-backdrop.open")).toBeHidden();
+    await page.waitForTimeout(1_000); // grace for an in-flight tick
+    const sendsAtCancel = subscribeSends.length;
+    await page.waitForTimeout(6_000);
+    expect(subscribeSends.length).toBe(sendsAtCancel);
+
+    // Retry opens a fresh pairing modal.
+    await openPairingModal(page);
+  });
+});
+
+async function openPairingModal(page: Page): Promise<void> {
+  await page.locator("#auth-button").click();
+  await expect(page.locator("#auth-modal-backdrop.open")).toBeVisible();
+  await expect(page.locator("#auth-modal-qr canvas")).toBeVisible({
+    timeout: 15_000,
+  });
+}

playground/tests/e2e/subscription.spec.ts

@@ -19,10 +19,7 @@ test.describe("subscription", () => {
     await expect(entries.first()).toBeVisible({ timeout: 6_000 });
     await expect(frame.locator('[data-testid="error-display"]')).toHaveCount(0);
 
-    // Once the first event is delivered the run completes and the Run button
-    // returns (no long-lived stream to Stop).
-    await expect(
-      frame.locator('[data-testid="subscribe-button"]'),
-    ).toBeVisible();
+    const text = await entries.first().innerText();
+    expect(text).toContain("connection status:");
   });
 });