From df0e136bc7dd752bf564aa22a0fe84f5dff5a5da Mon Sep 17 00:00:00 2001
From: Jacob Tomlinson <jacobtomlinson@users.noreply.github.com>
Date: Tue, 31 Mar 2026 02:29:28 -0700
Subject: [PATCH] Canvas Host: build default status with DOM nodes (#58266)

---
 src/canvas-host/server.test.ts |  2 ++
 src/canvas-host/server.ts      | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/canvas-host/server.test.ts b/src/canvas-host/server.test.ts
index 6a7cb82c990..ec95a74e731 100644
--- a/src/canvas-host/server.test.ts
+++ b/src/canvas-host/server.test.ts
@@ -145,6 +145,8 @@ describe("canvas host", () => {
       expect(html).toContain("Interactive test page");
       expect(html).toContain("openclawSendUserAction");
       expect(html).toContain(CANVAS_WS_PATH);
+      expect(html).toContain('document.createElement("span")');
+      expect(html).not.toContain("statusEl.innerHTML");
     } finally {
       await server.close();
     }
diff --git a/src/canvas-host/server.ts b/src/canvas-host/server.ts
index a42c7c5d6cd..6b582c8f100 100644
--- a/src/canvas-host/server.ts
+++ b/src/canvas-host/server.ts
@@ -121,11 +121,18 @@ function defaultIndexHTML() {
         typeof window.openclawCanvasA2UIAction.postMessage === "function")
     );
   const hasHelper = () => typeof window.openclawSendUserAction === "function";
-  statusEl.innerHTML =
-    "Bridge: " +
-    (hasHelper() ? "<span class='ok'>ready</span>" : "<span class='bad'>missing</span>") +
-    " · iOS=" + (hasIOS() ? "yes" : "no") +
-    " · Android=" + (hasAndroid() ? "yes" : "no");
+  const helperReady = hasHelper();
+  statusEl.textContent = "";
+  statusEl.appendChild(document.createTextNode("Bridge: "));
+  const bridgeStatus = document.createElement("span");
+  bridgeStatus.className = helperReady ? "ok" : "bad";
+  bridgeStatus.textContent = helperReady ? "ready" : "missing";
+  statusEl.appendChild(bridgeStatus);
+  statusEl.appendChild(
+    document.createTextNode(
+      " · iOS=" + (hasIOS() ? "yes" : "no") + " · Android=" + (hasAndroid() ? "yes" : "no"),
+    ),
+  );
 
   const onStatus = (ev) => {
     const d = ev && ev.detail || {};