@qontinui/ui-bridge 0.1.1

package/dist/debug/index.mjs

@@ -0,0 +1,664 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/debug/inspector.tsx
+
+// src/core/element-identifier.ts
+function generateXPath(element) {
+  if (element.id) {
+    return `//*[@id="${element.id}"]`;
+  }
+  const parts = [];
+  let current = element;
+  while (current && current.nodeType === Node.ELEMENT_NODE) {
+    let selector = current.nodeName.toLowerCase();
+    const uiId = current.getAttribute("data-ui-id");
+    if (uiId) {
+      selector += `[@data-ui-id="${uiId}"]`;
+      parts.unshift(selector);
+      break;
+    }
+    const testId = current.getAttribute("data-testid");
+    if (testId) {
+      selector += `[@data-testid="${testId}"]`;
+      parts.unshift(selector);
+      break;
+    }
+    const id = current.id;
+    if (id) {
+      selector += `[@id="${id}"]`;
+      parts.unshift(selector);
+      break;
+    }
+    const parentEl = current.parentElement;
+    if (parentEl) {
+      const currentEl = current;
+      const siblings = Array.from(parentEl.children).filter(
+        (child) => child.nodeName === currentEl.nodeName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(currentEl) + 1;
+        selector += `[${index}]`;
+      }
+    }
+    parts.unshift(selector);
+    current = parentEl;
+  }
+  return "/" + parts.join("/");
+}
+function generateCSSSelector(element) {
+  const uiId = element.getAttribute("data-ui-id");
+  if (uiId) {
+    return `[data-ui-id="${uiId}"]`;
+  }
+  const testId = element.getAttribute("data-testid");
+  if (testId) {
+    return `[data-testid="${testId}"]`;
+  }
+  const awasId = element.getAttribute("data-awas-element");
+  if (awasId) {
+    return `[data-awas-element="${awasId}"]`;
+  }
+  if (element.id) {
+    return `#${CSS.escape(element.id)}`;
+  }
+  const path = [];
+  let current = element;
+  while (current && current.nodeType === Node.ELEMENT_NODE) {
+    let selector = current.nodeName.toLowerCase();
+    const parentUiId = current.getAttribute("data-ui-id");
+    if (parentUiId && current !== element) {
+      path.unshift(`[data-ui-id="${parentUiId}"]`);
+      break;
+    }
+    const parentTestId = current.getAttribute("data-testid");
+    if (parentTestId && current !== element) {
+      path.unshift(`[data-testid="${parentTestId}"]`);
+      break;
+    }
+    if (current.id) {
+      path.unshift(`#${CSS.escape(current.id)}`);
+      break;
+    }
+    const parentEl = current.parentElement;
+    if (parentEl) {
+      const currentEl = current;
+      const siblings = Array.from(parentEl.children);
+      const sameTagSiblings = siblings.filter(
+        (s) => s.nodeName === currentEl.nodeName
+      );
+      if (sameTagSiblings.length > 1) {
+        const index = siblings.indexOf(currentEl) + 1;
+        selector += `:nth-child(${index})`;
+      }
+    }
+    path.unshift(selector);
+    current = current.parentElement;
+  }
+  return path.join(" > ");
+}
+function getBestIdentifier(element) {
+  const uiId = element.getAttribute("data-ui-id");
+  if (uiId) return uiId;
+  const testId = element.getAttribute("data-testid");
+  if (testId) return testId;
+  const awasId = element.getAttribute("data-awas-element");
+  if (awasId) return awasId;
+  if (element.id) return element.id;
+  return generateCSSSelector(element);
+}
+function createElementIdentifier(element) {
+  return {
+    uiId: element.getAttribute("data-ui-id") || void 0,
+    testId: element.getAttribute("data-testid") || void 0,
+    awasId: element.getAttribute("data-awas-element") || void 0,
+    htmlId: element.id || void 0,
+    xpath: generateXPath(element),
+    selector: generateCSSSelector(element)
+  };
+}
+var overlayStyles = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: 999999,
+  border: "2px solid #3b82f6",
+  backgroundColor: "rgba(59, 130, 246, 0.1)",
+  transition: "all 0.1s ease-out"
+};
+var labelStyles = {
+  position: "absolute",
+  top: "-24px",
+  left: "0",
+  padding: "2px 8px",
+  backgroundColor: "#3b82f6",
+  color: "white",
+  fontSize: "12px",
+  fontFamily: "monospace",
+  whiteSpace: "nowrap",
+  borderRadius: "4px 4px 0 0"
+};
+var panelStyles = {
+  position: "fixed",
+  bottom: "20px",
+  right: "20px",
+  width: "400px",
+  maxHeight: "500px",
+  overflow: "auto",
+  backgroundColor: "#1f2937",
+  color: "#f3f4f6",
+  borderRadius: "8px",
+  boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
+  fontFamily: "monospace",
+  fontSize: "12px",
+  zIndex: 999998
+};
+var headerStyles = {
+  padding: "12px 16px",
+  backgroundColor: "#111827",
+  borderBottom: "1px solid #374151",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderRadius: "8px 8px 0 0"
+};
+var sectionStyles = {
+  padding: "12px 16px",
+  borderBottom: "1px solid #374151"
+};
+var labelKeyStyles = {
+  color: "#9ca3af",
+  marginRight: "8px"
+};
+var valueStyles = {
+  color: "#60a5fa"
+};
+function getElementState(element) {
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  const state = {
+    visible: rect.width > 0 && rect.height > 0 && style.display !== "none",
+    enabled: !("disabled" in element && element.disabled),
+    focused: document.activeElement === element,
+    rect: {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left
+    },
+    computedStyles: {
+      display: style.display,
+      visibility: style.visibility,
+      opacity: style.opacity,
+      pointerEvents: style.pointerEvents
+    }
+  };
+  if (element instanceof HTMLInputElement) {
+    state.value = element.value;
+    if (element.type === "checkbox" || element.type === "radio") {
+      state.checked = element.checked;
+    }
+  }
+  return state;
+}
+function InspectorOverlay({ bounds, label }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...overlayStyles,
+        left: bounds.left + window.scrollX,
+        top: bounds.top + window.scrollY,
+        width: bounds.width,
+        height: bounds.height
+      },
+      children: /* @__PURE__ */ jsx("span", { style: labelStyles, children: label })
+    }
+  );
+}
+function InfoPanel({ element, onClose, registeredElement }) {
+  if (!element) return null;
+  const identifier = createElementIdentifier(element);
+  const state = getElementState(element);
+  const bestId = getBestIdentifier(element);
+  return /* @__PURE__ */ jsxs("div", { style: panelStyles, children: [
+    /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontWeight: "bold", color: "#60a5fa" }, children: "UI Bridge Inspector" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            background: "none",
+            border: "none",
+            color: "#9ca3af",
+            cursor: "pointer",
+            fontSize: "16px"
+          },
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: sectionStyles, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Element" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Tag:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: element.tagName.toLowerCase() })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Best ID:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: bestId })
+      ] }),
+      identifier.uiId && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "data-ui-id:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.uiId })
+      ] }),
+      identifier.testId && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "data-testid:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.testId })
+      ] }),
+      identifier.htmlId && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "id:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.htmlId })
+      ] }),
+      registeredElement && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Registered:" }),
+        /* @__PURE__ */ jsxs("span", { style: { color: "#10b981" }, children: [
+          "Yes (",
+          registeredElement.type,
+          ")"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: sectionStyles, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "State" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Visible:" }),
+        /* @__PURE__ */ jsx("span", { style: { color: state.visible ? "#10b981" : "#ef4444" }, children: state.visible ? "Yes" : "No" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Enabled:" }),
+        /* @__PURE__ */ jsx("span", { style: { color: state.enabled ? "#10b981" : "#ef4444" }, children: state.enabled ? "Yes" : "No" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Focused:" }),
+        /* @__PURE__ */ jsx("span", { style: { color: state.focused ? "#10b981" : "#9ca3af" }, children: state.focused ? "Yes" : "No" })
+      ] }),
+      state.value !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Value:" }),
+        /* @__PURE__ */ jsxs("span", { style: valueStyles, children: [
+          '"',
+          state.value,
+          '"'
+        ] })
+      ] }),
+      state.checked !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Checked:" }),
+        /* @__PURE__ */ jsx("span", { style: { color: state.checked ? "#10b981" : "#9ca3af" }, children: state.checked ? "Yes" : "No" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: sectionStyles, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Bounds" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Position:" }),
+        /* @__PURE__ */ jsxs("span", { style: valueStyles, children: [
+          "(",
+          Math.round(state.rect.x),
+          ", ",
+          Math.round(state.rect.y),
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Size:" }),
+        /* @__PURE__ */ jsxs("span", { style: valueStyles, children: [
+          Math.round(state.rect.width),
+          " \xD7 ",
+          Math.round(state.rect.height)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { ...sectionStyles, borderBottom: "none" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Selectors" }),
+      /* @__PURE__ */ jsxs("div", { style: { wordBreak: "break-all", marginBottom: "4px" }, children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "CSS:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.selector })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { wordBreak: "break-all" }, children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "XPath:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.xpath })
+      ] })
+    ] }),
+    registeredElement && registeredElement.actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { ...sectionStyles, borderBottom: "none" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Actions" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: registeredElement.actions.map((action) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            padding: "2px 8px",
+            backgroundColor: "#374151",
+            borderRadius: "4px",
+            color: "#60a5fa"
+          },
+          children: action
+        },
+        action
+      )) })
+    ] })
+  ] });
+}
+function useInspector(options = {}) {
+  const [active, setActive] = useState(false);
+  const [hoveredElement, setHoveredElement] = useState(null);
+  const [selectedElement, setSelectedElement] = useState(null);
+  const shortcut = useMemo(
+    () => options.shortcut ?? { key: "i", ctrl: true, shift: true },
+    [options.shortcut]
+  );
+  const toggle = useCallback(() => {
+    setActive((prev) => !prev);
+    if (active) {
+      setHoveredElement(null);
+      setSelectedElement(null);
+    }
+  }, [active]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key.toLowerCase() === shortcut.key && e.ctrlKey === !!shortcut.ctrl && e.shiftKey === !!shortcut.shift && e.altKey === !!shortcut.alt) {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggle, shortcut]);
+  useEffect(() => {
+    if (!active) return;
+    const handleMouseOver = (e) => {
+      const target = e.target;
+      if (target && target !== hoveredElement) {
+        setHoveredElement(target);
+      }
+    };
+    const handleClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.target;
+      setSelectedElement(target);
+      options.onSelect?.(target);
+    };
+    document.addEventListener("mouseover", handleMouseOver, true);
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("mouseover", handleMouseOver, true);
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [active, hoveredElement, options]);
+  const displayElement = selectedElement || hoveredElement;
+  const bounds = displayElement?.getBoundingClientRect() || null;
+  const registeredElement = displayElement ? options.getRegisteredElement?.(displayElement) : void 0;
+  return {
+    active,
+    toggle,
+    hoveredElement,
+    selectedElement,
+    setSelectedElement,
+    displayElement,
+    bounds,
+    registeredElement,
+    clearSelection: () => {
+      setSelectedElement(null);
+    }
+  };
+}
+function Inspector({ getRegisteredElement, initialActive }) {
+  const inspector = useInspector({
+    getRegisteredElement
+  });
+  useEffect(() => {
+    if (initialActive && !inspector.active) {
+      inspector.toggle();
+    }
+  }, [initialActive]);
+  if (!inspector.active) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    inspector.bounds && /* @__PURE__ */ jsx(
+      InspectorOverlay,
+      {
+        bounds: inspector.bounds,
+        label: inspector.displayElement ? getBestIdentifier(inspector.displayElement) : ""
+      }
+    ),
+    inspector.selectedElement && /* @__PURE__ */ jsx(
+      InfoPanel,
+      {
+        element: inspector.selectedElement,
+        onClose: inspector.clearSelection,
+        registeredElement: inspector.registeredElement
+      }
+    )
+  ] });
+}
+
+// src/debug/metrics.ts
+function generateId() {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 8)}`;
+}
+var MetricsCollector = class {
+  constructor(options = {}) {
+    this.history = [];
+    this.maxHistoryEntries = options.maxHistoryEntries ?? 1e3;
+    this.rateWindow = options.rateWindow ?? 6e4;
+  }
+  /**
+   * Record an element action
+   */
+  recordElementAction(target, action, response, params) {
+    const entry = {
+      id: generateId(),
+      timestamp: response.timestamp,
+      type: "element",
+      target,
+      action,
+      success: response.success,
+      durationMs: response.durationMs,
+      error: response.error,
+      params,
+      response: response.elementState
+    };
+    this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Record a component action
+   */
+  recordComponentAction(target, action, response, params) {
+    const entry = {
+      id: generateId(),
+      timestamp: response.timestamp,
+      type: "component",
+      target,
+      action,
+      success: response.success,
+      durationMs: response.durationMs,
+      error: response.error,
+      params,
+      response: response.result
+    };
+    this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Record a workflow step
+   */
+  recordWorkflowStep(workflowId, result) {
+    const entry = {
+      id: generateId(),
+      timestamp: result.timestamp,
+      type: "workflow-step",
+      target: workflowId,
+      action: result.stepId,
+      success: result.success,
+      durationMs: result.durationMs,
+      error: result.error,
+      response: result.result
+    };
+    this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Record from a bridge event
+   */
+  recordEvent(event) {
+    if (event.type === "action:completed" || event.type === "action:failed") {
+      const data = event.data;
+      if (data.elementId) {
+        this.recordElementAction(
+          data.elementId,
+          data.action,
+          data.response,
+          data.params
+        );
+      } else if (data.componentId) {
+        this.recordComponentAction(
+          data.componentId,
+          data.action,
+          data.response,
+          data.params
+        );
+      }
+    }
+  }
+  /**
+   * Get action history
+   */
+  getHistory(options) {
+    let results = [...this.history];
+    if (options?.type) {
+      results = results.filter((e) => e.type === options.type);
+    }
+    if (options?.target) {
+      results = results.filter((e) => e.target === options.target);
+    }
+    if (options?.action) {
+      results = results.filter((e) => e.action === options.action);
+    }
+    if (options?.success !== void 0) {
+      results = results.filter((e) => e.success === options.success);
+    }
+    if (options?.since) {
+      results = results.filter((e) => e.timestamp >= options.since);
+    }
+    if (options?.limit) {
+      results = results.slice(-options.limit);
+    }
+    return results;
+  }
+  /**
+   * Get performance metrics
+   */
+  getMetrics(since) {
+    const entries = since ? this.history.filter((e) => e.timestamp >= since) : this.history;
+    if (entries.length === 0) {
+      return {
+        totalActions: 0,
+        successfulActions: 0,
+        failedActions: 0,
+        successRate: 0,
+        avgDurationMs: 0,
+        minDurationMs: 0,
+        maxDurationMs: 0,
+        p95DurationMs: 0,
+        actionsPerSecond: 0,
+        errorsByType: {},
+        actionsByType: {}
+      };
+    }
+    const successful = entries.filter((e) => e.success);
+    const failed = entries.filter((e) => !e.success);
+    const durations = entries.map((e) => e.durationMs).sort((a, b) => a - b);
+    const now = Date.now();
+    const windowStart = now - this.rateWindow;
+    const recentActions = this.history.filter((e) => e.timestamp >= windowStart);
+    const windowSeconds = this.rateWindow / 1e3;
+    const errorsByType = {};
+    for (const entry of failed) {
+      const errorType = entry.error?.split(":")[0] || "Unknown";
+      errorsByType[errorType] = (errorsByType[errorType] || 0) + 1;
+    }
+    const actionsByType = {};
+    for (const entry of entries) {
+      const key = `${entry.type}:${entry.action}`;
+      actionsByType[key] = (actionsByType[key] || 0) + 1;
+    }
+    return {
+      totalActions: entries.length,
+      successfulActions: successful.length,
+      failedActions: failed.length,
+      successRate: successful.length / entries.length,
+      avgDurationMs: durations.reduce((a, b) => a + b, 0) / durations.length,
+      minDurationMs: durations[0],
+      maxDurationMs: durations[durations.length - 1],
+      p95DurationMs: durations[Math.floor(durations.length * 0.95)],
+      actionsPerSecond: recentActions.length / windowSeconds,
+      errorsByType,
+      actionsByType
+    };
+  }
+  /**
+   * Get recent errors
+   */
+  getRecentErrors(limit = 10) {
+    return this.history.filter((e) => !e.success).slice(-limit);
+  }
+  /**
+   * Get slowest actions
+   */
+  getSlowestActions(limit = 10) {
+    return [...this.history].sort((a, b) => b.durationMs - a.durationMs).slice(0, limit);
+  }
+  /**
+   * Clear history
+   */
+  clearHistory() {
+    this.history = [];
+  }
+  /**
+   * Export history as JSON
+   */
+  exportHistory() {
+    return JSON.stringify(this.history, null, 2);
+  }
+  /**
+   * Import history from JSON
+   */
+  importHistory(json) {
+    const entries = JSON.parse(json);
+    this.history = entries.slice(-this.maxHistoryEntries);
+  }
+  addEntry(entry) {
+    this.history.push(entry);
+    while (this.history.length > this.maxHistoryEntries) {
+      this.history.shift();
+    }
+  }
+};
+function createMetricsCollector(options) {
+  return new MetricsCollector(options);
+}
+function formatDuration(ms) {
+  if (ms < 1) return "<1ms";
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+  return `${(ms / 6e4).toFixed(1)}m`;
+}
+function formatPercentage(value) {
+  return `${(value * 100).toFixed(1)}%`;
+}
+
+export { InfoPanel, Inspector, InspectorOverlay, MetricsCollector, createMetricsCollector, formatDuration, formatPercentage, useInspector };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map