From e8227fd7b3b9c0937749ba0f45a09b04a5cd1af8 Mon Sep 17 00:00:00 2001
From: Nickmopen <nickmelnikov82@proton.me>
Date: Sun, 3 May 2026 08:41:56 -0500
Subject: [PATCH] fix(ui): defer showModal until dialog is connected to DOM

---
 ui/src/ui/views/skills.test.ts |  2 ++
 ui/src/ui/views/skills.ts      | 10 +++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui/src/ui/views/skills.test.ts b/ui/src/ui/views/skills.test.ts
index 28a5163f777..ce354ce0f0d 100644
--- a/ui/src/ui/views/skills.test.ts
+++ b/ui/src/ui/views/skills.test.ts
@@ -100,6 +100,8 @@ describe("renderSkills", () => {
 
   it("opens detail dialogs and routes ClawHub actions", async () => {
     const container = document.createElement("div");
+    document.body.append(container);
+    dialogRestores.push(() => container.remove());
     const onDetailClose = vi.fn();
     const showModal = vi.fn(function (this: HTMLDialogElement) {
       this.setAttribute("open", "");
diff --git a/ui/src/ui/views/skills.ts b/ui/src/ui/views/skills.ts
index 5145ead7e5a..361fae6f2d3 100644
--- a/ui/src/ui/views/skills.ts
+++ b/ui/src/ui/views/skills.ts
@@ -28,7 +28,15 @@ function showDialogWhenClosed(el?: Element) {
   if (!(el instanceof HTMLDialogElement) || el.open) {
     return;
   }
-  el.showModal();
+  if (el.isConnected) {
+    el.showModal();
+  } else {
+    queueMicrotask(() => {
+      if (el.isConnected && !el.open) {
+        el.showModal();
+      }
+    });
+  }
 }
 
 export type SkillsStatusFilter = "all" | "ready" | "needs-setup" | "disabled";