Playground e2e harness + SCALE codec additions (#238)

* test(truapi): adopt Vitest testing style for @parity/truapi

Migrate the JS package tests from the bespoke Bun runner to Vitest, matching
the product-sdk testing style: colocated src/**/*.test.ts files, describe/it
blocks, and expect() assertions.

- Add vitest devDep + vitest.config.ts; test script runs `vitest run`.
- Move the five test/*.test.mjs suites next to the code they cover and rewrite
  them with describe/it + expect. The wire-table loop becomes an it.each over
  every generated frame id.
- The explorer registry test imports the source module so it runs without a
  prior build.
- Exclude src/**/*.test.ts from the build tsconfig so tests never land in dist.
- Scope a Prettier override (4-space, 100 width) to the test files.
- Drop the unused setup-bun step from the ts-client CI job and refresh the docs
  and ts-client-checks skill.

* test(truapi): run the suite with bun test instead of Vitest

Use Bun's built-in test runner: the repo already depends on bun, so this
drops the Vitest devDependency (and its config) while keeping the same
product-sdk-style describe/it/expect tests.

- Imports come from "bun:test"; add @types/bun for editor support.
- test script runs `bun test` (auto-discovers src/**/*.test.ts, no config).
- Restore the setup-bun step on the ts-client CI job.
- Refresh docs and the ts-client-checks skill.

* refactor(truapi): iframe MessagePort handshake and SCALE codec additions

Switch the in-iframe client to the host-transferred MessagePort handshake
(truapi-ready / truapi-init) used by the WASM host runtime, and extend the
SCALE primitives (Struct, _void, str, hex helpers) consumed by the generated
codecs. Pulls @noble/hashes in as a hex-codec dependency.

* revert(truapi): drop iframe MessagePort handshake from this PR

The truapi-ready/truapi-init handshake pairs with the WASM host's
createIframeHost (#104). Keep sandbox.ts at base so merging to main does not
break the deployed playground against the current host.

* refactor(truapi): use @noble/hashes concatBytes in wire encoding

Replace the hand-rolled byte concatenation with the concatBytes helper now
that @noble/hashes is a dependency.

Author: pgherveou

js/packages/truapi/package.json

@@ -79,6 +79,7 @@
     "typescript": "^6.0"
   },
   "dependencies": {
+    "@noble/hashes": "^2.2.0",
     "neverthrow": "^8.2.0",
     "scale-ts": "^1.6.1"
   }

js/packages/truapi/src/scale.ts

@@ -8,17 +8,25 @@
 import {
   Bytes,
   Enum,
+  Struct,
+  _void,
   createCodec,
   createDecoder,
   enhanceCodec,
+  str as scaleStr,
   u8,
   type Codec,
 } from "scale-ts";
+import {
+  bytesToHex as encodeHex,
+  hexToBytes as decodeHex,
+} from "@noble/hashes/utils.js";
 
 export type { Codec };
 export type { ResultPayload } from "scale-ts";
 
 export {
+  Bytes,
   Enum,
   Option,
   Result,
@@ -59,7 +67,9 @@ export const OptionBool: Codec<boolean | undefined> = enhanceCodec(
       case 2:
         return false;
       default:
-        throw new Error(`Unknown OptionBool byte: ${byte}. Expected 0, 1, or 2.`);
+        throw new Error(
+          `Unknown OptionBool byte: ${byte}. Expected 0, 1, or 2.`,
+        );
     }
   },
 );
@@ -79,22 +89,12 @@ export function toHexString(value: string): HexString {
 
 /** Encode a byte array as a lower-case hex string with a `0x` prefix. */
 export function bytesToHex(bytes: Uint8Array): HexString {
-  let hex = "0x";
-  for (let i = 0; i < bytes.length; i++) {
-    hex += bytes[i]!.toString(16).padStart(2, "0");
-  }
-  return hex as HexString;
+  return `0x${encodeHex(bytes)}`;
 }
 
 /** Decode a hex string into a byte array. Tolerates a missing `0x` prefix. */
 export function hexToBytes(hex: string): Uint8Array {
-  const start = hex.startsWith("0x") ? 2 : 0;
-  const length = (hex.length - start) >> 1;
-  const bytes = new Uint8Array(length);
-  for (let i = 0; i < length; i++) {
-    bytes[i] = parseInt(hex.substring(start + i * 2, start + i * 2 + 2), 16);
-  }
-  return bytes;
+  return decodeHex(hex.startsWith("0x") ? hex.slice(2) : hex);
 }
 
 /**
@@ -123,6 +123,51 @@ export function TaggedUnion<O extends TaggedUnionCodecs>(
   return Enum(inner) as unknown as Codec<TaggedUnionValue<O>>;
 }
 
+/**
+ * Wire codec for Rust `CallError<D>`, projected to the public domain error `D`.
+ *
+ * Generated TypeScript APIs expose only the domain error union in
+ * `ResultAsync<Ok, D>`. The Rust host still wraps that value in
+ * `CallError::Domain` on the wire so framework errors can share the response
+ * channel. Encoding always emits `Domain`; decoding returns the inner domain
+ * value and throws for framework-level failures that have no public `D` shape.
+ */
+export function CallError<D>(domain: Codec<D>): Codec<D> {
+  type WireCallError =
+    | { tag: "Domain"; value: D }
+    | { tag: "Denied"; value?: undefined }
+    | { tag: "Unsupported"; value?: undefined }
+    | { tag: "MalformedFrame"; value: { reason: string } }
+    | { tag: "HostFailure"; value: { reason: string } };
+
+  const wire = Enum({
+    Domain: domain,
+    Denied: _void,
+    Unsupported: _void,
+    MalformedFrame: Struct({ reason: scaleStr }),
+    HostFailure: Struct({ reason: scaleStr }),
+  }) as unknown as Codec<WireCallError>;
+
+  return enhanceCodec(
+    wire,
+    (value: D): WireCallError => ({ tag: "Domain", value }),
+    (value: WireCallError): D => {
+      switch (value.tag) {
+        case "Domain":
+          return value.value;
+        case "Denied":
+          throw new Error("Host denied the request");
+        case "Unsupported":
+          throw new Error("Host does not support this request");
+        case "MalformedFrame":
+          throw new Error(`Malformed request frame: ${value.value.reason}`);
+        case "HostFailure":
+          throw new Error(`Host failure: ${value.value.reason}`);
+      }
+    },
+  );
+}
+
 type TaggedUnionCodecs = {
   [Sym: symbol]: never;
   [Num: number]: never;

js/packages/truapi/src/transport.ts

@@ -1,3 +1,4 @@
+import { concatBytes } from "@noble/hashes/utils.js";
 import { err, ok, type Result, type ResultAsync } from "neverthrow";
 
 import { str, u8, type ResultPayload } from "./scale.js";
@@ -279,6 +280,10 @@ export interface WireProvider {
 
   /**
    * Register a callback for provider-level close or failure events.
+   *
+   * Providers keep a terminal close reason. The callback fires at most once
+   * for an active subscription, and fires immediately when registered after
+   * the provider has already closed.
    **/
   subscribeClose?(callback: (error: Error) => void): () => void;
 
@@ -288,21 +293,6 @@ export interface WireProvider {
   dispose(): void;
 }
 
-/**
- * Concatenate byte arrays without mutating the source arrays.
- **/
-function concatBytes(parts: Uint8Array[]): Uint8Array {
-  let total = 0;
-  for (const p of parts) total += p.length;
-  const out = new Uint8Array(total);
-  let off = 0;
-  for (const p of parts) {
-    out.set(p, off);
-    off += p.length;
-  }
-  return out;
-}
-
 /**
  * Encode a `ProtocolMessage` into a SCALE wire frame.
  **/
@@ -314,11 +304,7 @@ export function encodeWireMessage(
     return err(new Error(`Invalid wire discriminant: ${id}`));
   }
   return ok(
-    concatBytes([
-      str.enc(message.requestId),
-      u8.enc(id),
-      message.payload.value,
-    ]),
+    concatBytes(str.enc(message.requestId), u8.enc(id), message.payload.value),
   );
 }
 

package-lock.json

@@ -7,6 +7,9 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 An interactive explorer for the TrUAPI, the Host API surface exposed to products running inside the Polkadot Desktop Browser webview. The app must be opened from within a Host environment. It talks to the host over iframe `postMessage` frames or the native webview `window.__HOST_API_PORT__` MessagePort.
 
 To develop locally, run `yarn dev` and open the app via `https://dot.li/localhost:3000` inside the Desktop Host.
+For host-backed diagnosis/e2e runs, signer-bot settings may live in the
+repo-root `.env`; if they are not present in the current worktree environment,
+load or copy them from that file before treating signer-bot as unavailable.
 
 ## Commands
 

playground/CLAUDE.md

@@ -23,6 +23,7 @@ import {
   runDiagnosis,
   runSingleTest,
 } from "@/src/lib/auto-test";
+import { installE2EHooks } from "@/src/lib/e2e-hooks";
 import packageJson from "../../package.json";
 
 const VERSION_LABEL = `v${packageJson.version}`;
@@ -188,6 +189,7 @@ export default function PlaygroundPage() {
 
   useEffect(() => {
     try {
+      installE2EHooks();
       return subscribeConnectionStatus(setStatus);
     } catch {
       setStatus("disconnected");

playground/src/app/page.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());
     // No-op outside a host container; navigation is best-effort.
@@ -143,24 +147,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"}
@@ -186,6 +204,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/DiagnosisView.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/components/ServiceTable.tsx

@@ -14,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"]);
@@ -32,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;
@@ -59,9 +64,16 @@ 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);
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  const timeoutPromise = new Promise<never>((_, reject) => {
+    timeout = setTimeout(
+      () => reject(new Error(`timed out after ${timeoutMs / 1000}s`)),
+      timeoutMs,
+    );
+  });
 
   // The example decides pass/fail explicitly: it resolves on success and throws
   // (via `assert(...)` or any uncaught error) on failure. `console.*` is pure
@@ -74,16 +86,11 @@ async function runOne({
         "App must be opened inside a TrUAPI host (iframe or webview).",
       );
     }
-    run = await runExample({ source, client, onLog });
-    await Promise.race([
-      run.promise,
-      new Promise<never>((_, reject) =>
-        setTimeout(
-          () => reject(new Error(`timed out after ${timeoutMs / 1000}s`)),
-          timeoutMs,
-        ),
-      ),
+    run = await Promise.race([
+      runExample({ source, client, onLog }),
+      timeoutPromise,
     ]);
+    await Promise.race([run.promise, timeoutPromise]);
     onUpdate(id, {
       status: "pass",
       request: source,
@@ -98,6 +105,7 @@ async function runOne({
       output: log ? `${log}\n${message}` : message,
     });
   } finally {
+    if (timeout !== undefined) clearTimeout(timeout);
     run?.cancel();
   }
 }

playground/src/lib/auto-test.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();
 }