@thatopen/services 0.0.1

package/src/cli/templates/test/src/main.ts

@@ -0,0 +1,955 @@
+// Platform API Test Suite
+// Tests all EngineServicesClient endpoints with a BIM viewer + results panel.
+// Generated by: thatopen create --template test
+
+import * as THREE from "three";
+import * as OBC from "@thatopen/components";
+import * as OBF from "@thatopen/components-front";
+import * as FRAGS from "@thatopen/fragments";
+import * as BUI from "@thatopen/ui";
+import * as CUI from "@thatopen/ui-obc";
+import {
+  PlatformClient,
+  AppManager,
+  ViewportManager,
+} from "thatopen-services";
+import type { ThatOpenContext } from "thatopen-services";
+
+declare global {
+  interface Window {
+    __THATOPEN_CONTEXT__?: ThatOpenContext;
+  }
+}
+
+type TestResult = {
+  name: string;
+  status: "pass" | "fail" | "skip";
+  message: string;
+  duration: number;
+};
+
+type TestGroup = {
+  name: string;
+  results: TestResult[];
+};
+
+async function runTest(
+  name: string,
+  fn: () => Promise<void>,
+): Promise<TestResult> {
+  const start = performance.now();
+  try {
+    await fn();
+    return {
+      name,
+      status: "pass",
+      message: "OK",
+      duration: performance.now() - start,
+    };
+  } catch (err) {
+    return {
+      name,
+      status: "fail",
+      message: err instanceof Error ? err.message : String(err),
+      duration: performance.now() - start,
+    };
+  }
+}
+
+function assert(condition: boolean, msg: string) {
+  if (!condition) throw new Error(msg);
+}
+
+function renderResults(
+  container: HTMLElement,
+  groups: TestGroup[],
+  running: boolean,
+) {
+  let totalPass = 0;
+  let totalFail = 0;
+  let totalSkip = 0;
+  for (const g of groups) {
+    for (const r of g.results) {
+      if (r.status === "pass") totalPass++;
+      else if (r.status === "fail") totalFail++;
+      else totalSkip++;
+    }
+  }
+  const total = totalPass + totalFail + totalSkip;
+
+  let html = "";
+  if (running) {
+    html += '<p style="color:#e08a00;font-weight:bold;">Running tests...</p>';
+  }
+  if (total > 0) {
+    html += '<p style="margin-bottom:16px;">';
+    html += '<span style="color:#16a34a;font-weight:bold;">' + totalPass + " passed</span> · ";
+    html += '<span style="color:#dc2626;font-weight:bold;">' + totalFail + " failed</span> · ";
+    html += '<span style="color:#9ca3af;font-weight:bold;">' + totalSkip + " skipped</span> · ";
+    html += total + " total</p>";
+  }
+
+  for (const group of groups) {
+    html += '<details open style="margin-bottom:12px;"><summary style="cursor:pointer;font-weight:bold;font-size:16px;padding:8px 0;">' + group.name + "</summary>";
+    html += '<table style="width:100%;border-collapse:collapse;font-size:14px;">';
+    for (const r of group.results) {
+      const icon = r.status === "pass" ? "\u2713" : r.status === "fail" ? "\u2717" : "\u25CB";
+      const color = r.status === "pass" ? "#16a34a" : r.status === "fail" ? "#dc2626" : "#9ca3af";
+      const escapedMsg = r.message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
+      html += '<tr style="border-bottom:1px solid #3C3C41;">';
+      html += '<td style="padding:6px 8px;color:' + color + ';font-weight:bold;width:24px;">' + icon + "</td>";
+      html += '<td style="padding:6px 8px;">' + r.name + "</td>";
+      html += '<td style="padding:6px 8px;color:' + color + ';max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + escapedMsg + '">' + escapedMsg + "</td>";
+      html += '<td style="padding:6px 8px;color:#9ca3af;text-align:right;white-space:nowrap;">' + r.duration.toFixed(0) + "ms</td>";
+      html += "</tr>";
+    }
+    html += "</table></details>";
+  }
+
+  container.innerHTML = html;
+}
+
+// ─── Execution Message Parser ───────────────────────────────────
+// The cloud-test component sends messages in this format:
+//   "GroupName\n  ✓ testName: OK\n  ✗ testName: error"
+// We parse each message into a TestGroup so it can be rendered
+// using the same renderResults() as the local tests.
+
+function parseExecMessage(content: string, prefix: string): TestGroup | null {
+  const lines = content.split("\n");
+  if (lines.length < 2) return null;
+  const groupName = lines[0].trim();
+  if (!groupName) return null;
+  const results: TestResult[] = [];
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i].trim();
+    if (!line) continue;
+    let status: "pass" | "fail" | "skip" = "skip";
+    let rest = line;
+    if (line.startsWith("\u2713 ")) {
+      status = "pass";
+      rest = line.slice(2);
+    } else if (line.startsWith("\u2717 ")) {
+      status = "fail";
+      rest = line.slice(2);
+    } else if (line.startsWith("\u25CB ")) {
+      status = "skip";
+      rest = line.slice(2);
+    }
+    const colonIdx = rest.indexOf(": ");
+    if (colonIdx > 0) {
+      results.push({ name: rest.slice(0, colonIdx), status, message: rest.slice(colonIdx + 2), duration: 0 });
+    } else {
+      results.push({ name: rest, status, message: "", duration: 0 });
+    }
+  }
+  if (results.length === 0) return null;
+  return { name: prefix + groupName, results };
+}
+
+// ─── 1x1 transparent PNG for icon tests ────────────────────────
+function createTestPng(): Blob {
+  const bytes = new Uint8Array([
+    0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00,
+    0x0d, 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00,
+    0x00, 0x01, 0x08, 0x02, 0x00, 0x00, 0x00, 0x90, 0x77, 0x53, 0xde,
+    0x00, 0x00, 0x00, 0x0c, 0x49, 0x44, 0x41, 0x54, 0x08, 0xd7, 0x63,
+    0xf8, 0xcf, 0xc0, 0x00, 0x00, 0x00, 0x02, 0x00, 0x01, 0xe2, 0x21,
+    0xbc, 0x33, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae,
+    0x42, 0x60, 0x82,
+  ]);
+  return new Blob([bytes], { type: "image/png" });
+}
+
+async function main() {
+  const client = PlatformClient.fromPlatformContext();
+
+  // ─── OBC Components + Built-in Components ─────────────────────
+  const { components } = await client.initApp(
+    { OBC, OBF, BUI, CUI, THREE, FRAGS },
+    AppManager, ViewportManager,
+  );
+
+  // ─── 3D Viewport ──────────────────────────────────────────────
+  const viewports = components.get(ViewportManager);
+  const { element: viewerElement, world } = await viewports.create();
+
+  // ─── Load Model: GitHub → Storage → Scene ─────────────────────
+  // Fetches a .frag model, uploads to platform storage, downloads it
+  // back, and loads into the 3D viewport to prove the full pipeline.
+  const fragments = components.get(OBC.FragmentsManager);
+  const fragUrl = "https://thatopen.github.io/engine_components/resources/frags/school_arq.frag";
+  try {
+    const fetchRes = await fetch(fragUrl);
+    const fragBuffer = await fetchRes.arrayBuffer();
+
+    // Upload to platform storage
+    const uploadResult = await client.createFile({
+      file: new Blob([fragBuffer], { type: "application/octet-stream" }),
+      name: "_test_model_" + Date.now() + ".frag",
+      versionTag: "v1",
+    });
+    const modelFileId = uploadResult.item._id;
+
+    // Download from platform storage
+    const dlResponse = await client.downloadFile(modelFileId);
+    const dlBuffer = await dlResponse.arrayBuffer();
+    const bytes = new Uint8Array(dlBuffer);
+
+    // Load into 3D scene
+    await fragments.core.load(bytes, { modelId: modelFileId });
+    await fragments.core.update(true);
+    await world.camera.controls.setLookAt(68, 23, -8.5, 21.5, -5.5, 23);
+
+    // Clean up the test file from storage
+    try { await client.archiveFile(modelFileId); } catch { /* cleanup */ }
+    console.log("Model loaded: GitHub → Storage → Scene");
+  } catch (err) {
+    console.warn("Could not load model:", err);
+  }
+
+  // ─── Test Results Container ────────────────────────────────────
+  const resultsContainer = document.createElement("div");
+  resultsContainer.style.color = "#d5d5d5";
+
+  // ─── Execution Config Inputs ──────────────────────────────────
+  const inputCss = "width:100%;padding:6px 8px;background:#262528;color:#d5d5d5;border:1px solid #3C3C41;border-radius:4px;font-size:12px;box-sizing:border-box;";
+
+  const componentIdInput = document.createElement("input");
+  componentIdInput.type = "text";
+  componentIdInput.placeholder = "Paste component ID here";
+  componentIdInput.style.cssText = inputCss;
+
+  const localServerInput = document.createElement("input");
+  localServerInput.type = "text";
+  localServerInput.value = "http://localhost:4001";
+  localServerInput.style.cssText = inputCss;
+
+  // ─── Panel ────────────────────────────────────────────────────
+  const panel = () => {
+    return BUI.html`
+      <bim-panel label="API Test Suite">
+        <bim-panel-section label="Context">
+          <bim-label>App ID: ${client.context.appId}</bim-label>
+          <bim-label>Project ID: ${client.context.projectId}</bim-label>
+          <bim-label>API URL: ${client.context.apiUrl}</bim-label>
+        </bim-panel-section>
+        <bim-panel-section label="Execution Config" icon="solar:settings-bold">
+          <bim-label>Component ID (deployed):</bim-label>
+          ${componentIdInput}
+          <bim-label>Local Server URL:</bim-label>
+          ${localServerInput}
+        </bim-panel-section>
+        <bim-panel-section label="Controls">
+          <bim-button label="Run All Tests" icon="solar:play-bold"
+            @click=${() => runAllTests(resultsContainer, client, componentIdInput, localServerInput)}></bim-button>
+        </bim-panel-section>
+        <bim-panel-section label="Results">
+          ${resultsContainer}
+        </bim-panel-section>
+      </bim-panel>
+    `;
+  };
+
+  // ─── App Shell ─────────────────────────────────────────────────
+  const appManager = components.get(AppManager);
+  appManager.setup = {
+    elements: {
+      viewer: viewerElement,
+      panel,
+    },
+    layouts: {
+      Tests: {
+        template: `"panel viewer" 1fr / 24rem 1fr`,
+        icon: "solar:test-tube-bold",
+      },
+      Viewer: { template: `"viewer" 1fr / 1fr` },
+    },
+  };
+  appManager.init();
+}
+
+async function runAllTests(resultsEl: HTMLElement, client: PlatformClient, componentIdInput: HTMLInputElement, localServerInput: HTMLInputElement) {
+  const groups: TestGroup[] = [];
+  const ts = Date.now();
+
+  // ─── Context & Auth ────────────────────────────────────────
+  const ctxResults: TestResult[] = [];
+  ctxResults.push(
+    await runTest("context.appId exists", async () => {
+      assert(!!client.context.appId, "appId is empty");
+    }),
+  );
+  ctxResults.push(
+    await runTest("context.projectId exists", async () => {
+      assert(!!client.context.projectId, "projectId is empty");
+    }),
+  );
+  ctxResults.push(
+    await runTest("context.accessToken exists", async () => {
+      assert(!!client.context.accessToken, "accessToken is empty");
+    }),
+  );
+  ctxResults.push(
+    await runTest("context.apiUrl exists", async () => {
+      assert(!!client.context.apiUrl, "apiUrl is empty");
+    }),
+  );
+  groups.push({ name: "Context & Auth", results: ctxResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Projects & Permissions ────────────────────────────────
+  const projResults: TestResult[] = [];
+  if (client.context.projectId) {
+    projResults.push(
+      await runTest("getProject", async () => {
+        const project = await client.getProject(client.context.projectId);
+        assert(!!project._id, "project._id missing");
+        assert(typeof project.title === "string", "project.title missing");
+      }),
+    );
+    projResults.push(
+      await runTest("getProjectData", async () => {
+        const data = await client.getProjectData(client.context.projectId);
+        assert(!!data.project, "project missing");
+        assert(Array.isArray(data.users), "users not array");
+        assert(Array.isArray(data.files), "files not array");
+        assert(Array.isArray(data.folders), "folders not array");
+        assert(Array.isArray(data.roles), "roles not array");
+      }),
+    );
+    projResults.push(
+      await runTest("checkPermission", async () => {
+        const result = await client.checkPermission({
+          resourceId: client.context.projectId,
+          resourceType: "PROJECT",
+          action: "READ",
+          projectId: client.context.projectId,
+        });
+        assert(typeof result.hasPermission === "boolean", "hasPermission not boolean");
+      }),
+    );
+  } else {
+    const skip = (n: string) => ({ name: n, status: "skip" as const, message: "No projectId", duration: 0 });
+    projResults.push(skip("getProject"), skip("getProjectData"), skip("checkPermission"));
+  }
+  groups.push({ name: "Projects & Permissions", results: projResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Folders ───────────────────────────────────────────────
+  const folderResults: TestResult[] = [];
+  let testFolderId = "";
+  folderResults.push(
+    await runTest("createFolder", async () => {
+      const folder = await client.createFolder("_test_folder_" + ts);
+      assert(!!folder._id, "_id missing");
+      assert(!!folder.name, "name missing");
+      testFolderId = folder._id;
+    }),
+  );
+  folderResults.push(
+    await runTest("getFolder", async () => {
+      assert(!!testFolderId, "No folder created");
+      const folder = await client.getFolder(testFolderId);
+      assert(folder._id === testFolderId, "_id mismatch");
+    }),
+  );
+  folderResults.push(
+    await runTest("listFolders", async () => {
+      const folders = await client.listFolders();
+      assert(Array.isArray(folders), "Not an array");
+    }),
+  );
+  folderResults.push(
+    await runTest("updateFolder", async () => {
+      assert(!!testFolderId, "No folder");
+      const updated = await client.updateFolder(testFolderId, {
+        name: "_test_folder_renamed_" + ts,
+      });
+      assert(updated.name.includes("renamed"), "Name not updated");
+    }),
+  );
+  folderResults.push(
+    await runTest("archiveFolder", async () => {
+      assert(!!testFolderId, "No folder");
+      await client.archiveFolder(testFolderId);
+    }),
+  );
+  folderResults.push(
+    await runTest("recoverFolder", async () => {
+      assert(!!testFolderId, "No folder");
+      await client.recoverFolder(testFolderId);
+    }),
+  );
+  folderResults.push(
+    await runTest("downloadFolder", async () => {
+      assert(!!testFolderId, "No folder");
+      const response = await client.downloadFolder(testFolderId);
+      assert(!!response, "No response");
+    }),
+  );
+  groups.push({ name: "Folders", results: folderResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Files ─────────────────────────────────────────────────
+  const fileResults: TestResult[] = [];
+  let testFileId = "";
+  const testContent = "test file content " + ts;
+  const testBlob = new Blob([testContent], { type: "text/plain" });
+
+  fileResults.push(
+    await runTest("createFile", async () => {
+      const result = await client.createFile({
+        file: testBlob,
+        name: "_test_file_" + ts + ".txt",
+        versionTag: "v1",
+        parentFolderId: testFolderId || undefined,
+        metadata: { testKey: "testValue" },
+      });
+      assert(!!result.item._id, "item._id missing");
+      assert(!!result.version, "version missing");
+      testFileId = result.item._id;
+    }),
+  );
+  fileResults.push(
+    await runTest("getFile (with versions)", async () => {
+      assert(!!testFileId, "No file");
+      const file = await client.getFile(testFileId, { showVersions: true });
+      assert(file._id === testFileId, "_id mismatch");
+      assert(Array.isArray(file.versions), "versions not array");
+      assert(file.versions.length > 0, "versions empty");
+    }),
+  );
+  fileResults.push(
+    await runTest("listFiles", async () => {
+      const files = await client.listFiles();
+      assert(Array.isArray(files), "Not an array");
+    }),
+  );
+  fileResults.push(
+    await runTest("listFiles (with folderId)", async () => {
+      if (!testFolderId) throw new Error("No folder");
+      const files = await client.listFiles({ folderId: testFolderId });
+      assert(Array.isArray(files), "Not an array");
+    }),
+  );
+  fileResults.push(
+    await runTest("downloadFile", async () => {
+      assert(!!testFileId, "No file");
+      const response = await client.downloadFile(testFileId);
+      assert(response.ok !== false, "Response not ok");
+      const text = await response.text();
+      assert(text === testContent, "Content mismatch");
+    }),
+  );
+  fileResults.push(
+    await runTest("getFileVersionMetadata", async () => {
+      assert(!!testFileId, "No file");
+      const metadata = await client.getFileVersionMetadata(testFileId, "v1");
+      assert(typeof metadata === "object", "metadata not object");
+    }),
+  );
+  fileResults.push(
+    await runTest("updateFileVersionMetadata", async () => {
+      assert(!!testFileId, "No file");
+      const result = await client.updateFileVersionMetadata(testFileId, "v1", {
+        discipline: "structural",
+      });
+      assert(typeof result === "object", "result not object");
+    }),
+  );
+  fileResults.push(
+    await runTest("deleteFileVersionMetadata", async () => {
+      assert(!!testFileId, "No file");
+      await client.deleteFileVersionMetadata(testFileId, "v1");
+    }),
+  );
+  fileResults.push(
+    await runTest("updateFile (rename + new version)", async () => {
+      assert(!!testFileId, "No file");
+      const newBlob = new Blob(["updated content"], { type: "text/plain" });
+      const result = await client.updateFile(testFileId, {
+        name: "_test_file_renamed_" + ts + ".txt",
+        file: newBlob,
+        versionTag: "v2",
+      });
+      assert(!!result.version || !!result.item, "No update result");
+    }),
+  );
+  fileResults.push(
+    await runTest("archiveFile", async () => {
+      assert(!!testFileId, "No file");
+      await client.archiveFile(testFileId);
+    }),
+  );
+  fileResults.push(
+    await runTest("recoverFile", async () => {
+      assert(!!testFileId, "No file");
+      await client.recoverFile(testFileId);
+    }),
+  );
+  groups.push({ name: "Files", results: fileResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Hidden Files ──────────────────────────────────────────
+  const hiddenResults: TestResult[] = [];
+  let testHiddenId = "";
+
+  hiddenResults.push(
+    await runTest("createHiddenFile", async () => {
+      assert(!!testFileId, "No parent file");
+      const blob = new Blob(["hidden content"], { type: "text/plain" });
+      const result = await client.createHiddenFile(blob, testFileId);
+      assert(!!result.hiddenFileId, "hiddenFileId missing");
+      testHiddenId = result.hiddenFileId;
+    }),
+  );
+  hiddenResults.push(
+    await runTest("getHiddenFile", async () => {
+      assert(!!testHiddenId, "No hidden file");
+      const hidden = await client.getHiddenFile(testHiddenId);
+      assert(!!hidden._id, "_id missing");
+    }),
+  );
+  hiddenResults.push(
+    await runTest("getHiddenFilesByParent", async () => {
+      assert(!!testFileId, "No parent file");
+      const files = await client.getHiddenFilesByParent(testFileId);
+      assert(Array.isArray(files), "Not an array");
+      assert(files.length > 0, "No hidden files found");
+    }),
+  );
+  hiddenResults.push(
+    await runTest("downloadHiddenFile", async () => {
+      assert(!!testHiddenId, "No hidden file");
+      const response = await client.downloadHiddenFile(testHiddenId);
+      assert(!!response, "No response");
+    }),
+  );
+  hiddenResults.push(
+    await runTest("deleteHiddenFile", async () => {
+      assert(!!testHiddenId, "No hidden file");
+      await client.deleteHiddenFile(testHiddenId);
+    }),
+  );
+  hiddenResults.push(
+    await runTest("deleteHiddenFilesByParent", async () => {
+      assert(!!testFileId, "No parent file");
+      // Create a fresh hidden file, then delete all by parent
+      const blob = new Blob(["temp hidden"], { type: "text/plain" });
+      await client.createHiddenFile(blob, testFileId);
+      const result = await client.deleteHiddenFilesByParent(testFileId);
+      assert(Array.isArray(result), "Not an array");
+    }),
+  );
+  groups.push({ name: "Hidden Files", results: hiddenResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Icons ─────────────────────────────────────────────────
+  const iconResults: TestResult[] = [];
+  const iconBlob = createTestPng();
+
+  iconResults.push(
+    await runTest("uploadItemIcon", async () => {
+      assert(!!testFileId, "No item for icon");
+      await client.uploadItemIcon(testFileId, iconBlob);
+    }),
+  );
+  iconResults.push(
+    await runTest("getItemIcon", async () => {
+      assert(!!testFileId, "No item for icon");
+      const response = await client.getItemIcon(testFileId);
+      assert(!!response, "No response");
+    }),
+  );
+  iconResults.push(
+    await runTest("removeItemIcon", async () => {
+      assert(!!testFileId, "No item for icon");
+      await client.removeItemIcon(testFileId);
+    }),
+  );
+  groups.push({ name: "Icons", results: iconResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── General Item Operations ───────────────────────────────
+  const generalResults: TestResult[] = [];
+
+  generalResults.push(
+    await runTest("updateItem (rename without version)", async () => {
+      assert(!!testFileId, "No item");
+      const item = await client.updateItem(testFileId, {
+        name: "_test_file_general_" + ts + ".txt",
+      });
+      assert(!!item._id, "item._id missing");
+    }),
+  );
+  generalResults.push(
+    await runTest("createVersion", async () => {
+      assert(!!testFileId, "No item");
+      const blob = new Blob(["version 3 content"], { type: "text/plain" });
+      const version = await client.createVersion(testFileId, blob, "v3");
+      assert(!!version, "version missing");
+    }),
+  );
+  groups.push({ name: "General Item Operations", results: generalResults });
+  renderResults(resultsEl, groups, true);
+
+  // Cleanup test file
+  if (testFileId) {
+    try {
+      await client.archiveFile(testFileId);
+    } catch {
+      /* cleanup */
+    }
+  }
+
+  // ─── Components ────────────────────────────────────────────
+  const compResults: TestResult[] = [];
+  let testComponentId = "";
+  const compBlob = new Blob(["// test component"], {
+    type: "application/javascript",
+  });
+
+  compResults.push(
+    await runTest("createComponent", async () => {
+      const result = await client.createComponent({
+        file: compBlob,
+        name: "_test_component_" + ts,
+        versionTag: "v1",
+        componentProps: { type: "CLOUD", tier: "FREE" },
+      });
+      assert(!!result.item._id, "item._id missing");
+      assert(!!result.version, "version missing");
+      testComponentId = result.item._id;
+    }),
+  );
+  compResults.push(
+    await runTest("getComponent (with versions)", async () => {
+      assert(!!testComponentId, "No component");
+      const comp = await client.getComponent(testComponentId, {
+        showVersions: true,
+      });
+      assert(comp._id === testComponentId, "_id mismatch");
+      assert(Array.isArray(comp.versions), "versions not array");
+    }),
+  );
+  compResults.push(
+    await runTest("listComponents", async () => {
+      const components = await client.listComponents();
+      assert(Array.isArray(components), "Not an array");
+    }),
+  );
+  compResults.push(
+    await runTest("updateComponent", async () => {
+      assert(!!testComponentId, "No component");
+      const blob = new Blob(["// updated component"], {
+        type: "application/javascript",
+      });
+      const result = await client.updateComponent(testComponentId, {
+        name: "_test_component_renamed_" + ts,
+        file: blob,
+        versionTag: "v2",
+        componentProps: { type: "CLOUD", tier: "FREE" },
+      });
+      assert(!!result.version || !!result.item, "No update result");
+    }),
+  );
+  compResults.push(
+    await runTest("downloadComponent", async () => {
+      assert(!!testComponentId, "No component");
+      const response = await client.downloadComponent(testComponentId);
+      assert(!!response, "No response");
+    }),
+  );
+  compResults.push(
+    await runTest("downloadComponentBundle", async () => {
+      assert(!!testComponentId, "No component");
+      const response = await client.downloadComponentBundle(testComponentId);
+      assert(!!response, "No response");
+    }),
+  );
+  compResults.push(
+    await runTest("archiveComponent", async () => {
+      assert(!!testComponentId, "No component");
+      await client.archiveComponent(testComponentId);
+    }),
+  );
+  compResults.push(
+    await runTest("recoverComponent", async () => {
+      assert(!!testComponentId, "No component");
+      await client.recoverComponent(testComponentId);
+    }),
+  );
+  groups.push({ name: "Components", results: compResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Apps ───────────────────────────────────────────────────
+  const appResults: TestResult[] = [];
+  let testAppId = "";
+  const appBlob = new Blob(["// test app bundle"], {
+    type: "application/javascript",
+  });
+
+  appResults.push(
+    await runTest("listApps", async () => {
+      const apps = await client.listApps();
+      assert(Array.isArray(apps), "Not an array");
+    }),
+  );
+  appResults.push(
+    await runTest("createApp", async () => {
+      const result = await client.createApp({
+        file: appBlob,
+        name: "_test_app_" + ts,
+        versionTag: "v1",
+      });
+      assert(!!result.item._id, "item._id missing");
+      assert(!!result.version, "version missing");
+      testAppId = result.item._id;
+    }),
+  );
+  appResults.push(
+    await runTest("downloadApp", async () => {
+      assert(!!testAppId, "No app");
+      const response = await client.downloadApp(testAppId);
+      assert(!!response, "No response");
+    }),
+  );
+  appResults.push(
+    await runTest("downloadAppBundle", async () => {
+      assert(!!testAppId, "No app");
+      const response = await client.downloadAppBundle(testAppId);
+      assert(!!response, "No response");
+    }),
+  );
+  appResults.push(
+    await runTest("archiveApp", async () => {
+      assert(!!testAppId, "No app");
+      await client.archiveApp(testAppId);
+    }),
+  );
+  groups.push({ name: "Apps", results: appResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Execution (Deployed) ──────────────────────────────────
+  // Tests execution against a published cloud component.
+  // Requires a Component ID entered in the panel.
+  const deployedResults: TestResult[] = [];
+  const deployedCompId = componentIdInput.value.trim();
+
+  if (deployedCompId) {
+    let deployedExecId = "";
+    deployedResults.push(
+      await runTest("executeComponent (deployed)", async () => {
+        const result = await client.executeComponent(deployedCompId, {
+          testParam: "deployed-test",
+        });
+        assert(!!result.executionId, "executionId missing");
+        deployedExecId = result.executionId;
+        client.onExecutionProgress(result.executionId, (data) => {
+          if (data.messageUpdate) {
+            const g = parseExecMessage(data.messageUpdate.content, "Deployed Component: ");
+            if (g) { groups.push(g); renderResults(resultsEl, groups, true); }
+          }
+        });
+      }),
+    );
+    deployedResults.push(
+      await runTest("getExecution", async () => {
+        assert(!!deployedExecId, "No execution");
+        const execution = await client.getExecution(deployedExecId);
+        assert(!!execution, "execution missing");
+      }),
+    );
+    deployedResults.push(
+      await runTest("listExecutions", async () => {
+        const executions = await client.listExecutions(deployedCompId);
+        assert(Array.isArray(executions), "Not an array");
+      }),
+    );
+    deployedResults.push(
+      await runTest("onExecutionProgress (subscribe)", async () => {
+        const result = await client.executeComponent(deployedCompId, {
+          testParam: "progress-test",
+        });
+        assert(!!result.executionId, "executionId missing");
+        await new Promise<void>((resolve) => {
+          const timeout = setTimeout(() => resolve(), 10000);
+          client.onExecutionProgress(result.executionId, (data) => {
+            if (data.messageUpdate) {
+              const g = parseExecMessage(data.messageUpdate.content, "Deployed Component: ");
+              if (g) { groups.push(g); renderResults(resultsEl, groups, true); }
+            }
+            if (data.progressUpdate?.result) {
+              clearTimeout(timeout);
+              resolve();
+            }
+          });
+        });
+      }),
+    );
+    deployedResults.push(
+      await runTest("abortExecution", async () => {
+        const result = await client.executeComponent(deployedCompId, {
+          testParam: "abort-test",
+        });
+        assert(!!result.executionId, "executionId missing");
+        try {
+          await client.abortExecution(result.executionId);
+        } catch (err) {
+          const status =
+            err && typeof err === "object" && "status" in err
+              ? Number((err as { status?: number }).status)
+              : 0;
+          const is4xx = status >= 400 && status < 500;
+          if (!is4xx) throw err;
+        }
+      }),
+    );
+  } else {
+    const skip = (n: string) => ({
+      name: n,
+      status: "skip" as const,
+      message: "Enter a Component ID above",
+      duration: 0,
+    });
+    deployedResults.push(
+      skip("executeComponent (deployed)"),
+      skip("getExecution"),
+      skip("listExecutions"),
+      skip("onExecutionProgress"),
+      skip("abortExecution"),
+    );
+  }
+  groups.push({ name: "Execution (Deployed)", results: deployedResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Execution (Local) ─────────────────────────────────────
+  // Tests execution against a local component dev server.
+  // Requires thatopen local-server running in the component project.
+  const localResults: TestResult[] = [];
+  const localUrl = localServerInput.value.trim();
+
+  if (localUrl) {
+    client.localServerUrl = localUrl;
+    let localExecId = "";
+    localResults.push(
+      await runTest("executeComponent (local)", async () => {
+        const result = await client.executeComponent("local-test", {
+          testParam: "local-test",
+        });
+        assert(!!result.executionId, "executionId missing");
+        localExecId = result.executionId;
+        client.onExecutionProgress(result.executionId, (data) => {
+          if (data.messageUpdate) {
+            const g = parseExecMessage(data.messageUpdate.content, "Local Component: ");
+            if (g) { groups.push(g); renderResults(resultsEl, groups, true); }
+          }
+        });
+      }),
+    );
+    localResults.push(
+      await runTest("getExecution (local)", async () => {
+        assert(!!localExecId, "No local execution");
+        const execution = await client.getExecution(localExecId);
+        assert(!!execution, "execution missing");
+      }),
+    );
+    localResults.push(
+      await runTest("listExecutions (local)", async () => {
+        const executions = await client.listExecutions("local-test");
+        assert(Array.isArray(executions), "Not an array");
+      }),
+    );
+    localResults.push(
+      await runTest("onExecutionProgress (local)", async () => {
+        const result = await client.executeComponent("local-test", {
+          testParam: "progress-local",
+        });
+        assert(!!result.executionId, "executionId missing");
+        await new Promise<void>((resolve) => {
+          const timeout = setTimeout(() => resolve(), 10000);
+          client.onExecutionProgress(result.executionId, (data) => {
+            if (data.messageUpdate) {
+              const g = parseExecMessage(data.messageUpdate.content, "Local Component: ");
+              if (g) { groups.push(g); renderResults(resultsEl, groups, true); }
+            }
+            if (data.progressUpdate?.result) {
+              clearTimeout(timeout);
+              resolve();
+            }
+          });
+        });
+      }),
+    );
+    localResults.push(
+      await runTest("abortExecution (local)", async () => {
+        const result = await client.executeComponent("local-test", {
+          testParam: "abort-local",
+        });
+        assert(!!result.executionId, "executionId missing");
+        try {
+          await client.abortExecution(result.executionId);
+        } catch (err) {
+          const status =
+            err && typeof err === "object" && "status" in err
+              ? Number((err as { status?: number }).status)
+              : 0;
+          const is4xx = status >= 400 && status < 500;
+          if (!is4xx) throw err;
+        }
+      }),
+    );
+    client.localServerUrl = null;
+  } else {
+    const skip = (n: string) => ({
+      name: n,
+      status: "skip" as const,
+      message: "Clear Local Server URL to skip",
+      duration: 0,
+    });
+    localResults.push(
+      skip("executeComponent (local)"),
+      skip("getExecution (local)"),
+      skip("listExecutions (local)"),
+      skip("onExecutionProgress (local)"),
+      skip("abortExecution (local)"),
+    );
+  }
+  groups.push({ name: "Execution (Local)", results: localResults });
+  renderResults(resultsEl, groups, true);
+
+  // ─── Built-in Components ───────────────────────────────────
+  const builtInResults: TestResult[] = [];
+  builtInResults.push(
+    await runTest("getBuiltInComponent (HelloWorld)", async () => {
+      const source = await client.getBuiltInComponent(
+        "2c4ae432-fc24-43e9-9783-0c960c674e96",
+      );
+      assert(typeof source === "string", "Not a string");
+      assert(source.length > 0, "Empty source");
+    }),
+  );
+  groups.push({ name: "Built-in Components", results: builtInResults });
+
+  // ─── Cleanup ───────────────────────────────────────────────
+  if (testComponentId) {
+    try {
+      await client.archiveComponent(testComponentId);
+    } catch {
+      /* cleanup */
+    }
+  }
+  if (testFolderId) {
+    try {
+      await client.archiveFolder(testFolderId);
+    } catch {
+      /* cleanup */
+    }
+  }
+
+  renderResults(resultsEl, groups, false);
+  console.log("Test suite complete.");
+}
+
+main().catch(console.error);