@tutti-os/agent-gui 0.0.132 → 0.0.134

package/dist/workbench/browser-element-context/index.js

@@ -0,0 +1,750 @@
+import "../../chunk-DLCZJKCA.js";
+import "../../chunk-FGLQZ6I4.js";
+import {
+  useEngineSelector
+} from "../../chunk-2RQM7PJN.js";
+import {
+  registerAgentCustomMentionKind
+} from "../../chunk-D2JUDUYY.js";
+
+// workbench/browser-element-context/BrowserElementContextAction.tsx
+import { useCallback, useState } from "react";
+import {
+  Button,
+  InspectIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  cn
+} from "@tutti-os/ui-system";
+import { useActiveBrowserNodeWebview } from "@tutti-os/browser-node/react";
+
+// workbench/browser-element-context/browserElementSnapshot.ts
+var browserElementSnapshotFormat = "tutti.browser-element.v1";
+var browserElementSnapshotMaxHtmlChars = 32e3;
+var browserElementSnapshotMaxTextChars = 4e3;
+function normalizeBrowserElementSelectionResult(value) {
+  if (!isRecord(value)) return null;
+  if (value.status === "cancelled") return { status: "cancelled" };
+  if (value.status !== "selected" || !isRecord(value.snapshot)) return null;
+  const snapshot = value.snapshot;
+  const page = isRecord(snapshot.page) ? snapshot.page : {};
+  const element = isRecord(snapshot.element) ? snapshot.element : {};
+  const bounds = isRecord(element.bounds) ? element.bounds : {};
+  const viewport = isRecord(snapshot.viewport) ? snapshot.viewport : {};
+  const normalized = {
+    format: browserElementSnapshotFormat,
+    capturedAt: boundedString(snapshot.capturedAt, 64) || (/* @__PURE__ */ new Date()).toISOString(),
+    page: {
+      title: boundedString(page.title, 500),
+      url: sanitizeSnapshotUrl(boundedString(page.url, 4e3))
+    },
+    element: {
+      ariaLabel: nullableBoundedString(element.ariaLabel, 1e3),
+      attributes: boundedStringRecord(element.attributes, 40, 200, 2e3),
+      bounds: {
+        height: finiteNumber(bounds.height),
+        width: finiteNumber(bounds.width),
+        x: finiteNumber(bounds.x),
+        y: finiteNumber(bounds.y)
+      },
+      classes: boundedStringArray(element.classes, 24, 200),
+      domPath: boundedString(element.domPath, 4e3) || boundedString(element.selector, 2e3),
+      html: boundedString(element.html, browserElementSnapshotMaxHtmlChars),
+      htmlTruncated: element.htmlTruncated === true || typeof element.html === "string" && element.html.length > browserElementSnapshotMaxHtmlChars,
+      id: nullableBoundedString(element.id, 500),
+      role: nullableBoundedString(element.role, 200),
+      selector: boundedString(element.selector, 2e3),
+      styles: boundedStringRecord(element.styles, 32, 100, 500),
+      tagName: boundedString(element.tagName, 100).toLowerCase(),
+      text: boundedString(element.text, browserElementSnapshotMaxTextChars),
+      textTruncated: element.textTruncated === true || typeof element.text === "string" && element.text.length > browserElementSnapshotMaxTextChars
+    },
+    ancestors: Array.isArray(snapshot.ancestors) ? snapshot.ancestors.slice(0, 8).flatMap(
+      (item) => isRecord(item) ? [
+        {
+          id: nullableBoundedString(item.id, 500),
+          role: nullableBoundedString(item.role, 200),
+          selector: boundedString(item.selector, 2e3),
+          tagName: boundedString(item.tagName, 100).toLowerCase()
+        }
+      ] : []
+    ) : [],
+    viewport: {
+      devicePixelRatio: finiteNumber(viewport.devicePixelRatio, 1),
+      height: finiteNumber(viewport.height),
+      scrollX: finiteNumber(viewport.scrollX),
+      scrollY: finiteNumber(viewport.scrollY),
+      width: finiteNumber(viewport.width)
+    }
+  };
+  if (!normalized.element.tagName || !normalized.element.domPath) return null;
+  return { snapshot: normalized, status: "selected" };
+}
+function serializeBrowserElementSnapshot(snapshot) {
+  const { bounds } = snapshot.element;
+  return [
+    `DOM Path: ${snapshot.element.domPath}`,
+    `Position: top=${formatPixel(bounds.y)}, left=${formatPixel(bounds.x)}, width=${formatPixel(bounds.width)}, height=${formatPixel(bounds.height)}`,
+    `HTML Element: ${compactHtmlFragment(snapshot.element.html)}`
+  ].join("\n");
+}
+function formatPixel(value) {
+  const rounded = Math.round(value * 100) / 100;
+  return `${Object.is(rounded, -0) ? 0 : rounded}px`;
+}
+function compactHtmlFragment(value) {
+  return value.replace(/\r?\n/gu, " ").replace(/\s{2,}/gu, " ").trim();
+}
+function sanitizeSnapshotUrl(value) {
+  try {
+    const url = new URL(value);
+    url.username = "";
+    url.password = "";
+    url.hash = "";
+    for (const key of [...url.searchParams.keys()]) {
+      if (/(?:token|auth|password|secret|session|cookie|key|signature)/iu.test(
+        key
+      )) {
+        url.searchParams.set(key, "[redacted]");
+      }
+    }
+    return url.toString();
+  } catch {
+    return boundedString(value, 4e3);
+  }
+}
+function boundedString(value, maxChars) {
+  return typeof value === "string" ? value.slice(0, maxChars) : "";
+}
+function nullableBoundedString(value, maxChars) {
+  const normalized = boundedString(value, maxChars).trim();
+  return normalized || null;
+}
+function boundedStringArray(value, maxItems, maxChars) {
+  return Array.isArray(value) ? value.slice(0, maxItems).filter((item) => typeof item === "string").map((item) => item.slice(0, maxChars)) : [];
+}
+function boundedStringRecord(value, maxItems, maxKeyChars, maxValueChars) {
+  if (!isRecord(value)) return {};
+  return Object.fromEntries(
+    Object.entries(value).slice(0, maxItems).flatMap(
+      ([key, item]) => typeof item === "string" ? [[key.slice(0, maxKeyChars), item.slice(0, maxValueChars)]] : []
+    )
+  );
+}
+function finiteNumber(value, fallback = 0) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// workbench/browser-element-context/browserElementSelectorScript.ts
+function runTuttiBrowserElementSelector() {
+  const selectorGlobal = globalThis;
+  selectorGlobal.__tuttiBrowserElementSelector?.cancel();
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-tutti-browser-element-highlight", "true");
+    Object.assign(overlay.style, {
+      background: "rgba(86, 156, 214, 0.12)",
+      border: "2px solid rgb(86, 156, 214)",
+      borderRadius: "3px",
+      boxSizing: "border-box",
+      display: "none",
+      left: "0",
+      pointerEvents: "none",
+      position: "fixed",
+      top: "0",
+      zIndex: "2147483647"
+    });
+    document.documentElement.append(overlay);
+    const previousCursor = document.documentElement.style.cursor;
+    document.documentElement.style.cursor = "crosshair";
+    const finish = (value) => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+      document.documentElement.style.cursor = previousCursor;
+      overlay.remove();
+      delete selectorGlobal.__tuttiBrowserElementSelector;
+      resolve(value);
+    };
+    const cancel = () => finish({ status: "cancelled" });
+    selectorGlobal.__tuttiBrowserElementSelector = { cancel };
+    function handleMouseMove(event) {
+      const target = event.target;
+      if (!(target instanceof Element) || target === overlay) return;
+      const rect = target.getBoundingClientRect();
+      Object.assign(overlay.style, {
+        display: "block",
+        height: `${Math.max(0, rect.height)}px`,
+        transform: `translate(${rect.left}px, ${rect.top}px)`,
+        width: `${Math.max(0, rect.width)}px`
+      });
+    }
+    function handleClick(event) {
+      const target = event.target;
+      if (!(target instanceof Element) || target === overlay) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      finish({ snapshot: captureSnapshot(target), status: "selected" });
+    }
+    function handleKeyDown(event) {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      cancel();
+    }
+    function captureSnapshot(target) {
+      const rect = target.getBoundingClientRect();
+      const rawText = isFormControl(target) ? "" : (target.textContent ?? "").replace(/\s+/gu, " ").trim();
+      const clone = target.cloneNode(true);
+      clone.querySelectorAll("script,style,noscript,template").forEach((item) => item.remove());
+      sanitizeElement(clone);
+      clone.querySelectorAll("*").forEach(sanitizeElement);
+      const rawHtml = clone.outerHTML;
+      const computed = getComputedStyle(target);
+      const styleNames = [
+        "display",
+        "position",
+        "color",
+        "background-color",
+        "font-family",
+        "font-size",
+        "font-weight",
+        "line-height",
+        "margin",
+        "padding",
+        "border",
+        "border-radius",
+        "width",
+        "height",
+        "flex",
+        "grid-template-columns",
+        "align-items",
+        "justify-content",
+        "overflow",
+        "opacity",
+        "visibility"
+      ];
+      return {
+        format: "tutti.browser-element.v1",
+        capturedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        page: {
+          title: document.title,
+          url: sanitizeUrl(location.href)
+        },
+        element: {
+          ariaLabel: target.getAttribute("aria-label"),
+          attributes: readAttributes(target),
+          bounds: {
+            height: rect.height,
+            width: rect.width,
+            x: rect.x,
+            y: rect.y
+          },
+          classes: [...target.classList].slice(0, 24),
+          domPath: domPathFor(target),
+          html: rawHtml.slice(0, 32e3),
+          htmlTruncated: rawHtml.length > 32e3,
+          id: target.id || null,
+          role: target.getAttribute("role"),
+          selector: selectorFor(target),
+          styles: Object.fromEntries(
+            styleNames.map((name) => [name, computed.getPropertyValue(name)])
+          ),
+          tagName: target.tagName.toLowerCase(),
+          text: rawText.slice(0, 4e3),
+          textTruncated: rawText.length > 4e3
+        },
+        ancestors: readAncestors(target),
+        viewport: {
+          devicePixelRatio: globalThis.devicePixelRatio,
+          height: globalThis.innerHeight,
+          scrollX: globalThis.scrollX,
+          scrollY: globalThis.scrollY,
+          width: globalThis.innerWidth
+        }
+      };
+    }
+    function sanitizeElement(element) {
+      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element instanceof HTMLOptionElement) {
+        element.removeAttribute("value");
+        if ("value" in element) element.value = "";
+        if (element instanceof HTMLTextAreaElement) element.textContent = "";
+      }
+      for (const attribute of [...element.attributes]) {
+        const name = attribute.name.toLowerCase();
+        if (name.startsWith("on") || name === "nonce" || name === "integrity" || name === "srcdoc" || /(?:token|auth|password|secret|session|cookie|api[-_]?key)/iu.test(
+          name
+        )) {
+          element.setAttribute(attribute.name, "[redacted]");
+          continue;
+        }
+        if (name === "href" || name === "src" || name === "action") {
+          element.setAttribute(attribute.name, sanitizeUrl(attribute.value));
+        }
+      }
+    }
+    function isFormControl(element) {
+      return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement;
+    }
+    function readAttributes(element) {
+      const result = {};
+      for (const attribute of [...element.attributes].slice(0, 40)) {
+        const name = attribute.name.toLowerCase();
+        if (name.startsWith("on") || name === "value" || name === "srcdoc") {
+          continue;
+        }
+        result[attribute.name] = /(?:token|auth|password|secret|session|cookie|api[-_]?key)/iu.test(
+          name
+        ) ? "[redacted]" : name === "href" || name === "src" || name === "action" ? sanitizeUrl(attribute.value) : attribute.value.slice(0, 2e3);
+      }
+      return result;
+    }
+    function sanitizeUrl(value) {
+      try {
+        const url = new URL(value, location.href);
+        url.username = "";
+        url.password = "";
+        url.hash = "";
+        for (const key of [...url.searchParams.keys()]) {
+          if (/(?:token|auth|password|secret|session|cookie|key|signature)/iu.test(
+            key
+          )) {
+            url.searchParams.set(key, "[redacted]");
+          }
+        }
+        return url.toString();
+      } catch {
+        return value.slice(0, 4e3);
+      }
+    }
+    function selectorFor(element) {
+      if (element.id) return `#${escapeCss(element.id)}`;
+      const segments = [];
+      let current = element;
+      while (current && segments.length < 8) {
+        let segment = current.tagName.toLowerCase();
+        const parentElement = current.parentElement;
+        if (parentElement) {
+          const currentTagName = current.tagName;
+          const siblings = [...parentElement.children].filter(
+            (item) => item.tagName === currentTagName
+          );
+          if (siblings.length > 1) {
+            segment += `:nth-of-type(${siblings.indexOf(current) + 1})`;
+          }
+        }
+        segments.unshift(segment);
+        current = parentElement;
+      }
+      return segments.join(" > ");
+    }
+    function domPathFor(element) {
+      const appRoot = document.querySelector("#app");
+      const root = appRoot?.contains(element) === true ? appRoot : document.body ?? document.documentElement;
+      const segments = [];
+      let current = element;
+      while (current) {
+        segments.unshift(domPathSegment(current, current === root));
+        if (current === root) break;
+        current = current.parentElement;
+      }
+      return segments.join(" > ").slice(0, 4e3);
+    }
+    function domPathSegment(element, isRoot) {
+      if (isRoot && element.id === "app") return "#app";
+      const tagName = element.tagName.toLowerCase();
+      const classNames = [...element.classList].filter(Boolean).slice(0, 6).map((name) => `.${name}`).join("");
+      if (classNames) return `${tagName}${classNames}`;
+      if (element.id) return `${tagName}#${element.id}`;
+      return tagName;
+    }
+    function escapeCss(value) {
+      return globalThis.CSS?.escape ? globalThis.CSS.escape(value) : value.replace(/[^a-zA-Z0-9_-]/gu, (character) => `\\${character}`);
+    }
+    function readAncestors(element) {
+      const result = [];
+      let current = element.parentElement;
+      while (current && result.length < 8) {
+        result.push({
+          id: current.id || null,
+          role: current.getAttribute("role"),
+          selector: selectorFor(current),
+          tagName: current.tagName.toLowerCase()
+        });
+        current = current.parentElement;
+      }
+      return result;
+    }
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+  });
+}
+var browserElementSelectorScript = `(${runTuttiBrowserElementSelector.toString()})()`;
+var cancelBrowserElementSelectorScript = "globalThis.__tuttiBrowserElementSelector?.cancel();";
+
+// workbench/browser-element-context/browserElementWebview.ts
+var browserElementWebviewReadyTimeoutMs = 2e3;
+function isBrowserElementWebviewReady(webview) {
+  if (!webview.isConnected) return false;
+  try {
+    const webContentsId = webview.getWebContentsId?.();
+    return typeof webContentsId === "number" && Number.isFinite(webContentsId);
+  } catch {
+    return false;
+  }
+}
+async function waitForBrowserElementWebviewReady(webview, timeoutMs = browserElementWebviewReadyTimeoutMs) {
+  if (isBrowserElementWebviewReady(webview)) return true;
+  if (!webview.isConnected) return false;
+  return new Promise((resolve) => {
+    let settled = false;
+    let timeoutSignal = null;
+    const finish = (ready) => {
+      if (settled) return;
+      settled = true;
+      timeoutSignal?.removeEventListener("abort", handleTimeout);
+      webview.removeEventListener("dom-ready", handleDomReady);
+      resolve(ready);
+    };
+    const handleDomReady = () => {
+      finish(isBrowserElementWebviewReady(webview));
+    };
+    timeoutSignal = AbortSignal.timeout(timeoutMs);
+    const handleTimeout = () => finish(false);
+    timeoutSignal.addEventListener("abort", handleTimeout, { once: true });
+    webview.addEventListener("dom-ready", handleDomReady, { once: true });
+    if (isBrowserElementWebviewReady(webview)) finish(true);
+  });
+}
+async function executeBrowserElementWebviewScript(webview, script, userGesture = false) {
+  if (!webview.executeJavaScript) {
+    throw new Error("Browser webview JavaScript execution is unavailable");
+  }
+  if (!await waitForBrowserElementWebviewReady(webview)) {
+    throw new Error("Browser webview is not ready");
+  }
+  return webview.executeJavaScript(script, userGesture);
+}
+async function cancelBrowserElementWebviewSelection(webview, script, onError) {
+  if (!webview?.executeJavaScript || !webview.isConnected) return;
+  try {
+    await webview.executeJavaScript(script);
+  } catch (error) {
+    if (onError) {
+      onError(error);
+    } else {
+      console.warn(
+        "[agent-gui] browser element selection cleanup failed",
+        error
+      );
+    }
+  }
+}
+
+// workbench/browser-element-context/browserElementMention.ts
+import { createRichTextMentionMarkdown } from "@tutti-os/ui-rich-text/core";
+var browserElementMentionKind = "browser-element";
+function createBrowserElementMentionMarkdown(reference) {
+  const tagName = normalizeBrowserElementTagName(reference.tagName);
+  const context = reference.context.trim();
+  const workspaceId = reference.workspaceId.trim();
+  if (!tagName || !context || !workspaceId) {
+    return "";
+  }
+  return createRichTextMentionMarkdown({
+    providerId: browserElementMentionKind,
+    entityId: reference.id,
+    label: tagName,
+    scope: { context, tag: tagName, workspaceId }
+  });
+}
+function browserElementMentionLabel(tagName) {
+  const normalized = normalizeBrowserElementTagName(tagName);
+  return normalized ? `<${normalized}>` : "";
+}
+function presentBrowserElementMention(mention) {
+  const label = browserElementMentionLabel(
+    mention.scope?.tag?.trim() || mention.label
+  );
+  if (!label) {
+    return null;
+  }
+  const workspaceId = mention.scope?.workspaceId?.trim() ?? "";
+  return {
+    name: label,
+    ...workspaceId ? { workspaceId } : {}
+  };
+}
+function normalizeBrowserElementTagName(value) {
+  return value.trim().toLowerCase().replace(/[^a-z0-9:-]/gu, "").slice(0, 100);
+}
+
+// workbench/browser-element-context/browserElementContextSelectionController.ts
+var BrowserElementContextSelectionController = class {
+  activeWebview = null;
+  detachFrame = null;
+  input;
+  listeners = /* @__PURE__ */ new Set();
+  session = null;
+  snapshot = { state: "idle" };
+  subscribedWebview = null;
+  constructor(input) {
+    this.input = input;
+  }
+  getSnapshot = () => this.snapshot;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  configure(input) {
+    this.input = input;
+  }
+  bindAction(node, activeWebview) {
+    if (node) {
+      if (this.detachFrame !== null) {
+        cancelAnimationFrame(this.detachFrame);
+        this.detachFrame = null;
+      }
+      this.moveToActiveWebview(activeWebview);
+      return;
+    }
+    if (this.detachFrame !== null) cancelAnimationFrame(this.detachFrame);
+    this.detachFrame = requestAnimationFrame(() => {
+      this.detachFrame = null;
+      this.dispose();
+    });
+  }
+  toggle(activeWebview) {
+    if (this.session) {
+      this.endSelection(this.session);
+      return;
+    }
+    if (!activeWebview?.executeJavaScript) {
+      this.input.onError(this.input.failedCopy);
+      return;
+    }
+    const session = {
+      attempt: 0,
+      navigationPending: false,
+      webview: null
+    };
+    this.session = session;
+    this.setState("selecting");
+    this.moveToActiveWebview(activeWebview);
+  }
+  handleStartLoading = () => {
+    if (this.session) this.session.navigationPending = true;
+  };
+  handleDomReady = () => {
+    const session = this.session;
+    const webview = this.activeWebview;
+    if (!session || !webview) return;
+    session.navigationPending = false;
+    void this.moveSelectionToWebview(session, webview, true);
+  };
+  moveToActiveWebview(webview) {
+    this.activeWebview = webview;
+    const session = this.session;
+    if (!session) return;
+    if (!webview) {
+      const previousWebview = session.webview;
+      session.webview = null;
+      session.attempt += 1;
+      this.unsubscribeFromWebview();
+      void cancelBrowserElementWebviewSelection(
+        previousWebview,
+        cancelBrowserElementSelectorScript
+      );
+      return;
+    }
+    this.subscribeToWebview(webview);
+    void this.moveSelectionToWebview(session, webview);
+  }
+  subscribeToWebview(webview) {
+    if (this.subscribedWebview === webview) return;
+    this.unsubscribeFromWebview();
+    this.subscribedWebview = webview;
+    webview.addEventListener("did-start-loading", this.handleStartLoading);
+    webview.addEventListener("dom-ready", this.handleDomReady);
+  }
+  unsubscribeFromWebview() {
+    this.subscribedWebview?.removeEventListener(
+      "did-start-loading",
+      this.handleStartLoading
+    );
+    this.subscribedWebview?.removeEventListener(
+      "dom-ready",
+      this.handleDomReady
+    );
+    this.subscribedWebview = null;
+  }
+  async moveSelectionToWebview(session, webview, force = false) {
+    if (this.session !== session) return;
+    if (!force && session.webview === webview && session.attempt > 0) return;
+    const previousWebview = session.webview;
+    session.webview = webview;
+    session.navigationPending = false;
+    const attempt = ++session.attempt;
+    await cancelBrowserElementWebviewSelection(
+      previousWebview && (force || previousWebview !== webview) ? previousWebview : null,
+      cancelBrowserElementSelectorScript
+    );
+    if (!this.isCurrentSelectionAttempt(session, attempt)) return;
+    void this.runSelectionAttempt(session, webview, attempt);
+  }
+  async runSelectionAttempt(session, webview, attempt) {
+    try {
+      const rawResult = await executeBrowserElementWebviewScript(
+        webview,
+        browserElementSelectorScript,
+        true
+      );
+      if (!this.isCurrentSelectionAttempt(session, attempt)) return;
+      const result = normalizeBrowserElementSelectionResult(rawResult);
+      if (!result || result.status === "cancelled") {
+        this.endSelection(session);
+        return;
+      }
+      const content = serializeBrowserElementSnapshot(result.snapshot);
+      const mention = createBrowserElementMentionMarkdown({
+        context: content,
+        id: createBrowserElementReferenceId(),
+        tagName: result.snapshot.element.tagName,
+        workspaceId: this.input.workspaceId
+      });
+      if (!mention)
+        throw new Error("Browser element mention could not be created");
+      this.input.onAppendMention(mention);
+      this.endSelection(session);
+    } catch {
+      if (!this.isCurrentSelectionAttempt(session, attempt)) return;
+      if (session.navigationPending) return;
+      this.input.onError(this.input.failedCopy);
+      this.endSelection(session);
+    }
+  }
+  isCurrentSelectionAttempt(session, attempt) {
+    return this.session === session && session.attempt === attempt;
+  }
+  endSelection(session) {
+    if (this.session !== session) return;
+    this.session = null;
+    session.attempt += 1;
+    const webview = session.webview;
+    session.webview = null;
+    this.unsubscribeFromWebview();
+    void cancelBrowserElementWebviewSelection(
+      webview,
+      cancelBrowserElementSelectorScript
+    );
+    this.setState("idle");
+  }
+  setState(state) {
+    if (this.snapshot.state === state) return;
+    this.snapshot = { state };
+    for (const listener of this.listeners) listener(this.snapshot);
+  }
+  dispose() {
+    const session = this.session;
+    if (session) this.endSelection(session);
+    this.unsubscribeFromWebview();
+    this.activeWebview = null;
+  }
+};
+function createBrowserElementReferenceId() {
+  return `browser-element:${globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`}`;
+}
+
+// workbench/browser-element-context/BrowserElementContextAction.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BrowserElementContextAction({
+  copy,
+  onAppendMention,
+  onError,
+  workspaceId
+}) {
+  const activeWebview = useActiveBrowserNodeWebview();
+  const [controller] = useState(
+    () => new BrowserElementContextSelectionController({
+      failedCopy: copy.failed,
+      onAppendMention,
+      onError,
+      workspaceId
+    })
+  );
+  controller.configure({
+    failedCopy: copy.failed,
+    onAppendMention,
+    onError,
+    workspaceId
+  });
+  const state = useEngineSelector(controller, (snapshot) => snapshot.state);
+  const bindAction = useCallback(
+    (node) => controller.bindAction(node, activeWebview),
+    [activeWebview, controller]
+  );
+  const label = state === "selecting" ? copy.cancel : copy.select;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": label,
+        "aria-pressed": state === "selecting",
+        className: cn(
+          "nodrag shrink-0 rounded-md",
+          state === "selecting" && "bg-[var(--transparency-block)] text-[var(--text-primary)]"
+        ),
+        size: "icon-sm",
+        ref: bindAction,
+        type: "button",
+        variant: "chrome",
+        onClick: () => controller.toggle(activeWebview),
+        children: /* @__PURE__ */ jsx(InspectIcon, { className: "size-[15px]" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: label })
+  ] });
+}
+
+// workbench/browser-element-context/registerBrowserElementMention.tsx
+import { Badge } from "@tutti-os/ui-system";
+import { InspectIcon as InspectIcon2 } from "@tutti-os/ui-system/icons";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function registerBrowserElementMention() {
+  registerAgentCustomMentionKind({
+    kind: browserElementMentionKind,
+    materializePromptText: (mention) => {
+      const context = mention.scope?.context?.trim();
+      return context ? `
+${context}
+` : null;
+    },
+    present: presentBrowserElementMention,
+    renderChip: ({ name }) => /* @__PURE__ */ jsxs2(
+      Badge,
+      {
+        className: "h-5 max-w-full gap-1.5 rounded-[6px] px-2 py-0 font-[var(--font-mono)] text-[13px] font-semibold leading-5",
+        "data-agent-browser-element-chip": "true",
+        variant: "accent",
+        children: [
+          /* @__PURE__ */ jsx2(InspectIcon2, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx2("span", { className: "truncate", children: name })
+        ]
+      }
+    )
+  });
+}
+export {
+  BrowserElementContextAction,
+  browserElementMentionKind,
+  browserElementMentionLabel,
+  createBrowserElementMentionMarkdown,
+  presentBrowserElementMention,
+  registerBrowserElementMention
+};
+//# sourceMappingURL=index.js.map