@majkapp/plugin-kit 1.3.2 → 1.3.4

package/dist/mcp-dom-agent.js

@@ -0,0 +1,404 @@
+// mcp-dom-agent.js
+// Automatically injected into all MAJK plugin screens for remote control and screenshots
+
+(function () {
+  if (window.__mcpDomAgent) return;
+  window.__mcpDomAgent = true;
+
+  // ---- Configuration ----
+  const SCREENSHOT_ENDPOINT = '/api/mcp/screenshot';
+  let replyId = 0;
+
+  // ---- Helpers ----
+
+  function getById(id) {
+    return document.querySelector('[data-mcp-id="' + CSS.escape(id) + '"]');
+  }
+
+  function centerScroll(el) {
+    el.scrollIntoView({
+      behavior: 'instant',
+      block: 'center',
+      inline: 'center'
+    });
+  }
+
+  function elementCenter(el) {
+    const r = el.getBoundingClientRect();
+    return {
+      x: r.left + r.width / 2,
+      y: r.top + r.height / 2,
+      rect: { x: r.left, y: r.top, width: r.width, height: r.height }
+    };
+  }
+
+  function dispatchClick(el) {
+    const { x, y } = elementCenter(el);
+    ['mousedown', 'mouseup', 'click'].forEach((type) => {
+      el.dispatchEvent(new MouseEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        clientX: x,
+        clientY: y,
+        button: 0
+      }));
+    });
+  }
+
+  function dispatchHover(el) {
+    const { x, y } = elementCenter(el);
+    el.dispatchEvent(new MouseEvent('mousemove', {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      clientX: x,
+      clientY: y
+    }));
+  }
+
+  function reply(ev, id, result, error) {
+    if (ev.source) {
+      ev.source.postMessage(
+        {
+          __mcpReplyId: id,
+          result: result,
+          error: error ? String(error) : undefined
+        },
+        '*'
+      );
+    }
+  }
+
+  // ---- Screenshot Capture ----
+
+  async function captureScreenshot(options = {}) {
+    try {
+      // Use html2canvas if available, otherwise use basic canvas approach
+      if (typeof html2canvas !== 'undefined') {
+        const canvas = await html2canvas(document.body, {
+          allowTaint: true,
+          useCORS: true,
+          logging: false,
+          ...options
+        });
+        return canvas.toDataURL('image/png');
+      } else {
+        // Fallback: Use basic canvas API to capture visible viewport
+        return captureViewportScreenshot(options);
+      }
+    } catch (error) {
+      console.error('[MCP DOM Agent] Screenshot capture failed:', error);
+      throw error;
+    }
+  }
+
+  function captureViewportScreenshot(options = {}) {
+    return new Promise((resolve, reject) => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        // This is a basic fallback - it won't capture actual content
+        // but provides a placeholder implementation
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        ctx.fillStyle = '#333333';
+        ctx.font = '20px Arial';
+        ctx.fillText('Screenshot captured at ' + new Date().toISOString(), 50, 50);
+        ctx.fillText('(Install html2canvas for full screenshot support)', 50, 80);
+
+        resolve(canvas.toDataURL('image/png'));
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  async function sendScreenshotToBackend(dataUrl, metadata = {}) {
+    try {
+      const baseUrl = window.__MAJK_BASE_URL__ || '';
+      const response = await fetch(baseUrl + SCREENSHOT_ENDPOINT, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          data: dataUrl,
+          metadata: {
+            url: window.location.href,
+            timestamp: new Date().toISOString(),
+            userAgent: navigator.userAgent,
+            viewport: {
+              width: window.innerWidth,
+              height: window.innerHeight
+            },
+            ...metadata
+          }
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`Screenshot upload failed: ${response.status} ${response.statusText}`);
+      }
+
+      const result = await response.json();
+      return result;
+    } catch (error) {
+      console.error('[MCP DOM Agent] Failed to send screenshot to backend:', error);
+      throw error;
+    }
+  }
+
+  // ---- Main Listener ----
+
+  window.addEventListener('message', async function (ev) {
+    const msg = ev.data;
+    if (!msg || !msg.__mcpCmdId) return;
+
+    const cmdId = msg.__mcpCmdId;
+    const type = msg.type;
+    const id = msg.id;
+
+    let el = null;
+    if (typeof id === 'string') {
+      el = getById(id);
+    }
+
+    try {
+      switch (type) {
+
+        case 'find': {
+          reply(ev, cmdId, { exists: !!el });
+          break;
+        }
+
+        case 'scrollIntoView': {
+          if (!el) throw new Error('not found: ' + id);
+          centerScroll(el);
+          requestAnimationFrame(function () {
+            reply(ev, cmdId, { ok: true });
+          });
+          break;
+        }
+
+        case 'click': {
+          if (!el) throw new Error('not found: ' + id);
+          centerScroll(el);
+          requestAnimationFrame(function () {
+            dispatchClick(el);
+            reply(ev, cmdId, { ok: true });
+          });
+          break;
+        }
+
+        case 'hover': {
+          if (!el) throw new Error('not found: ' + id);
+          centerScroll(el);
+          requestAnimationFrame(function () {
+            dispatchHover(el);
+            reply(ev, cmdId, { ok: true });
+          });
+          break;
+        }
+
+        case 'getRect': {
+          if (!el) throw new Error('not found: ' + id);
+          const r = el.getBoundingClientRect();
+          reply(ev, cmdId, {
+            x: r.left,
+            y: r.top,
+            width: r.width,
+            height: r.height
+          });
+          break;
+        }
+
+        case 'captureScreenshot': {
+          const options = msg.options || {};
+          const metadata = msg.metadata || {};
+          const sendToBackend = msg.sendToBackend !== false; // Default true
+
+          // Capture screenshot
+          const dataUrl = await captureScreenshot(options);
+
+          // Send to backend if requested
+          let backendResult = null;
+          if (sendToBackend) {
+            backendResult = await sendScreenshotToBackend(dataUrl, metadata);
+          }
+
+          reply(ev, cmdId, {
+            success: true,
+            dataUrl: sendToBackend ? undefined : dataUrl, // Don't send back if already sent to backend
+            backend: backendResult
+          });
+          break;
+        }
+
+        default: {
+          reply(ev, cmdId, null, 'unknown type: ' + type);
+        }
+      }
+    } catch (err) {
+      reply(ev, cmdId, null, err && err.message ? err.message : String(err));
+    }
+  });
+
+  // ---- File Picker Bridge ----
+  // Since plugins run in cross-origin iframes, they can't directly use File System Access APIs
+  // This bridge sends requests to the parent window which executes the APIs and returns results
+
+  let filePickerRequestId = 0;
+  const pendingFilePickerRequests = new Map();
+
+  // Listen for file picker results from parent window
+  window.addEventListener('message', function (ev) {
+    const msg = ev.data;
+    if (!msg) return;
+
+    // Handle directory picker result
+    if (msg.type === 'majk:file-picker:directory-picker-result') {
+      const pending = pendingFilePickerRequests.get(msg.requestId);
+      if (pending) {
+        pendingFilePickerRequests.delete(msg.requestId);
+        if (msg.success) {
+          pending.resolve(msg.result);
+        } else {
+          pending.reject(new Error(msg.error?.message || 'Directory picker failed'));
+        }
+      }
+    }
+
+    // Handle open file picker result
+    if (msg.type === 'majk:file-picker:open-file-picker-result') {
+      const pending = pendingFilePickerRequests.get(msg.requestId);
+      if (pending) {
+        pendingFilePickerRequests.delete(msg.requestId);
+        if (msg.success) {
+          pending.resolve(msg.results);
+        } else {
+          pending.reject(new Error(msg.error?.message || 'File picker failed'));
+        }
+      }
+    }
+
+    // Handle save file picker result
+    if (msg.type === 'majk:file-picker:save-file-picker-result') {
+      const pending = pendingFilePickerRequests.get(msg.requestId);
+      if (pending) {
+        pendingFilePickerRequests.delete(msg.requestId);
+        if (msg.success) {
+          pending.resolve(msg.result);
+        } else {
+          pending.reject(new Error(msg.error?.message || 'Save file picker failed'));
+        }
+      }
+    }
+  });
+
+  // Polyfill File System Access APIs to use the bridge
+  async function showDirectoryPickerBridge(options) {
+    const requestId = 'file-picker-' + (filePickerRequestId++);
+
+    return new Promise((resolve, reject) => {
+      pendingFilePickerRequests.set(requestId, { resolve, reject });
+
+      // Send request to parent window
+      window.parent.postMessage({
+        type: 'majk:file-picker:show-directory-picker',
+        requestId,
+        options
+      }, '*');
+
+      // Timeout after 5 minutes
+      setTimeout(() => {
+        if (pendingFilePickerRequests.has(requestId)) {
+          pendingFilePickerRequests.delete(requestId);
+          reject(new Error('Directory picker request timed out'));
+        }
+      }, 300000);
+    });
+  }
+
+  async function showOpenFilePickerBridge(options) {
+    const requestId = 'file-picker-' + (filePickerRequestId++);
+
+    return new Promise((resolve, reject) => {
+      pendingFilePickerRequests.set(requestId, { resolve, reject });
+
+      // Send request to parent window
+      window.parent.postMessage({
+        type: 'majk:file-picker:show-open-file-picker',
+        requestId,
+        options
+      }, '*');
+
+      // Timeout after 5 minutes
+      setTimeout(() => {
+        if (pendingFilePickerRequests.has(requestId)) {
+          pendingFilePickerRequests.delete(requestId);
+          reject(new Error('File picker request timed out'));
+        }
+      }, 300000);
+    });
+  }
+
+  async function showSaveFilePickerBridge(options) {
+    const requestId = 'file-picker-' + (filePickerRequestId++);
+
+    return new Promise((resolve, reject) => {
+      pendingFilePickerRequests.set(requestId, { resolve, reject });
+
+      // Send request to parent window
+      window.parent.postMessage({
+        type: 'majk:file-picker:show-save-file-picker',
+        requestId,
+        options
+      }, '*');
+
+      // Timeout after 5 minutes
+      setTimeout(() => {
+        if (pendingFilePickerRequests.has(requestId)) {
+          pendingFilePickerRequests.delete(requestId);
+          reject(new Error('Save file picker request timed out'));
+        }
+      }, 300000);
+    });
+  }
+
+  // ---- Global API for direct access ----
+  window.mcpDomAgent = {
+    version: '1.1.0',
+    captureScreenshot: async (options) => {
+      const dataUrl = await captureScreenshot(options);
+      return dataUrl;
+    },
+    captureAndSend: async (metadata) => {
+      const dataUrl = await captureScreenshot();
+      const result = await sendScreenshotToBackend(dataUrl, metadata);
+      return result;
+    },
+    // File picker APIs - use these instead of native File System Access APIs in plugin iframes
+    showDirectoryPicker: showDirectoryPickerBridge,
+    showOpenFilePicker: showOpenFilePickerBridge,
+    showSaveFilePicker: showSaveFilePickerBridge
+  };
+
+  // Also expose file pickers as global functions for convenience (matching native API)
+  if (!window.showDirectoryPicker) {
+    window.showDirectoryPicker = showDirectoryPickerBridge;
+  }
+  if (!window.showOpenFilePicker) {
+    window.showOpenFilePicker = showOpenFilePickerBridge;
+  }
+  if (!window.showSaveFilePicker) {
+    window.showSaveFilePicker = showSaveFilePickerBridge;
+  }
+
+  console.log('[MCP DOM Agent] Initialized v1.1.0 with File Picker Bridge');
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majkapp/plugin-kit",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Fluent builder framework for creating robust MAJK plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && cp src/mcp-dom-agent.js dist/mcp-dom-agent.js",
     "watch": "tsc --watch",
     "clean": "rm -rf dist"
   },