@ibealec/create-zed-bridge 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibealec/create-zed-bridge",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Setup script for @zed-controller/react-bridge and LocatorJS integration",
   "type": "module",
   "bin": {

package/templates/@zed-controller/react-bridge/dist/index.cjs

@@ -200,7 +200,7 @@ function captureContext(element) {
     selectedText: getSelectedText(),
     selectedElement: {
       tagName: element.tagName.toLowerCase(),
-      className: element.className,
+      className: getClassNameString(element),
       id: element.id || void 0,
       innerText: truncateText(element.innerText, 200)
     },
@@ -222,12 +222,22 @@ function getSelectedText() {
   return void 0;
 }
 function truncateText(text, maxLength) {
+  if (!text) return "";
   const cleaned = text.replace(/\s+/g, " ").trim();
   if (cleaned.length <= maxLength) {
     return cleaned;
   }
   return cleaned.slice(0, maxLength) + "...";
 }
+function getClassNameString(element) {
+  if (typeof element.className === "string") {
+    return element.className;
+  }
+  if (element.className && typeof element.className.baseVal === "string") {
+    return element.className.baseVal;
+  }
+  return "";
+}
 function getSourceFile(element) {
   let current = element;
   while (current) {
@@ -330,10 +340,13 @@ function getDomPath(element) {
     let selector = current.tagName.toLowerCase();
     if (current.id) {
       selector += `#${current.id}`;
-    } else if (current.className) {
-      const classes = current.className.split(/\s+/).filter((c) => c && !c.startsWith("__")).slice(0, 2).join(".");
-      if (classes) {
-        selector += `.${classes}`;
+    } else {
+      const classNameStr = getClassNameString(current);
+      if (classNameStr) {
+        const classes = classNameStr.split(/\s+/).filter((c) => c && !c.startsWith("__")).slice(0, 2).join(".");
+        if (classes) {
+          selector += `.${classes}`;
+        }
       }
     }
     path.unshift(selector);
@@ -463,11 +476,34 @@ async function captureElementScreenshot(element, options = {}) {
       useCORS: true,
       allowTaint: true,
       backgroundColor: null,
-      logging: false
+      logging: false,
+      // Ignore elements that might cause issues
+      ignoreElements: (el) => {
+        return el.tagName === "IFRAME" || el.tagName === "VIDEO";
+      },
+      onclone: (clonedDoc) => {
+        try {
+          const styleSheets = clonedDoc.styleSheets;
+          const fallbackStyle = clonedDoc.createElement("style");
+          fallbackStyle.textContent = `
+            * {
+              /* Fallback for elements using unsupported color functions */
+              --html2canvas-fallback: inherit;
+            }
+          `;
+          clonedDoc.head.appendChild(fallbackStyle);
+        } catch {
+        }
+      }
     });
     return canvas.toDataURL("image/png");
   } catch (error) {
-    console.error("[ClaudeBridge] Screenshot capture failed:", error);
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    if (errorMessage.includes("unsupported color function") || errorMessage.includes("oklch") || errorMessage.includes("lab(") || errorMessage.includes("lch(")) {
+      console.debug("[ClaudeBridge] Screenshot skipped: page uses modern CSS colors not supported by html2canvas");
+      return void 0;
+    }
+    console.warn("[ClaudeBridge] Screenshot capture failed:", errorMessage);
     return void 0;
   }
 }
@@ -510,10 +546,14 @@ function createHighlightOverlay() {
       let labelText = element.tagName.toLowerCase();
       if (element.id) {
         labelText += `#${element.id}`;
-      } else if (element.className) {
-        const firstClass = element.className.split(/\s+/)[0];
-        if (firstClass && !firstClass.startsWith("__")) {
-          labelText += `.${firstClass}`;
+      } else {
+        const className = element.className;
+        const classNameStr = typeof className === "string" ? className : className?.baseVal || "";
+        if (classNameStr) {
+          const firstClass = classNameStr.split(/\s+/)[0];
+          if (firstClass && !firstClass.startsWith("__")) {
+            labelText += `.${firstClass}`;
+          }
         }
       }
       label.textContent = labelText;
@@ -1740,7 +1780,7 @@ function TaskStatusToast({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [size]);
-  const killSession = (0, import_react5.useCallback)((sessionId) => {
+  const killSession = (0, import_react5.useCallback)((sessionId, taskPrompt) => {
     return new Promise((resolve) => {
       const wsUrl = serverUrl.replace(/^http/, "ws").replace(/\/$/, "");
       const ws = new WebSocket(`${wsUrl}/ws/bridge?token=${encodeURIComponent(token)}`);
@@ -1755,7 +1795,10 @@ function TaskStatusToast({
       ws.onopen = () => {
         ws.send(JSON.stringify({
           type: "kill_session",
-          sessionId
+          sessionId,
+          // Include task prompt for auto-commit message
+          taskPrompt,
+          autoCommit: true
         }));
       };
       ws.onmessage = (event) => {
@@ -1776,17 +1819,17 @@ function TaskStatusToast({
           resolve();
         }
       };
-      setTimeout(cleanup, 3e3);
+      setTimeout(cleanup, 1e4);
     });
   }, [serverUrl, token]);
   const handleDismiss = (0, import_react5.useCallback)(async () => {
     if (killOnClose && task?.sessionId) {
-      await killSession(task.sessionId);
+      await killSession(task.sessionId, task.prompt);
     }
     setVisible(false);
     setExpanded(false);
     setTimeout(onDismiss, 300);
-  }, [killOnClose, task?.sessionId, killSession, onDismiss]);
+  }, [killOnClose, task?.sessionId, task?.prompt, killSession, onDismiss]);
   const handleToggleExpand = (0, import_react5.useCallback)(() => {
     setExpanded(!expanded);
   }, [expanded]);