@fias/plugin-dev-harness 1.1.5 → 1.1.6

package/dist/server/static/static/harness.js

@@ -0,0 +1,550 @@
+/**
+ * Fias Arche Dev — Client-side Bridge Host
+ *
+ * Ported from the production PluginBridgeHost
+ * (client/src/arche/components/PluginBridge.ts).
+ *
+ * Handles postMessage communication with the plugin iframe,
+ * enforcing permissions and rate limits, and proxying server-side
+ * operations through the harness Express server.
+ */
+(function () {
+  'use strict';
+
+  var iframe = document.getElementById('plugin-iframe');
+  var consoleBody = document.getElementById('console-body');
+  var consoleCount = document.getElementById('console-count');
+  var consoleToggle = document.getElementById('console-toggle');
+  var creditBalance = document.getElementById('credit-balance');
+  var themeToggle = document.getElementById('theme-toggle');
+  var reloadBtn = document.getElementById('reload-btn');
+  var modeBadge = document.getElementById('mode-badge');
+  var pluginStatus = document.getElementById('plugin-status');
+  var themeBadge = document.getElementById('theme-badge');
+  var loginModal = document.getElementById('login-modal');
+  var loginInput = document.getElementById('login-input');
+  var loginError = document.getElementById('login-error');
+  var loginSubmit = document.getElementById('login-submit');
+  var loginCancel = document.getElementById('login-cancel');
+
+  var messageCount = 0;
+  var currentTheme = 'dark';
+  var currentMode = 'mock';
+  var hasCredentials = false;
+  var cachedConfig = null;
+
+  /** Permission requirements per bridge call type (matches production) */
+  var PERMISSION_MAP = {
+    get_user: 'user:profile:read',
+    get_theme: 'theme:read',
+    entity_invoke: 'entities:invoke',
+    storage_read: 'storage:sandbox',
+    storage_write: 'storage:sandbox',
+    storage_list: 'storage:sandbox',
+    storage_delete: 'storage:sandbox',
+  };
+
+  /** Rate limits per message type (matches production) */
+  var RATE_LIMITS = {
+    entity_invoke: { maxPerMinute: 60 },
+    storage_write: { maxPerMinute: 120 },
+    storage_read: { maxPerMinute: 300 },
+    storage_list: { maxPerMinute: 60 },
+    storage_delete: { maxPerMinute: 60 },
+  };
+  var rateBuckets = {};
+
+  // ────────────────────────────────────────────────────────────────
+  // Initialization
+  // ────────────────────────────────────────────────────────────────
+
+  fetchConfig().then(function (config) {
+    cachedConfig = config;
+    currentTheme = config.mockTheme || 'dark';
+    currentMode = config.mode || 'mock';
+    hasCredentials = config.hasCredentials || false;
+
+    updateThemeBadge();
+    updateModeBadge();
+
+    if (currentMode === 'live') {
+      creditBalance.style.display = 'inline';
+      fetchCredits();
+    }
+
+    // Check if plugin server is reachable, then load
+    checkPluginReachable(config.pluginUrl, function (reachable) {
+      if (reachable) {
+        pluginStatus.classList.add('hidden');
+        iframe.classList.remove('hidden');
+        iframe.src = config.pluginUrl;
+      } else {
+        showPluginError(config.pluginUrl);
+      }
+    });
+  });
+
+  // ────────────────────────────────────────────────────────────────
+  // UI Controls
+  // ────────────────────────────────────────────────────────────────
+
+  consoleToggle.addEventListener('click', function () {
+    consoleBody.classList.toggle('open');
+  });
+
+  reloadBtn.addEventListener('click', function () {
+    if (cachedConfig) {
+      // Re-check reachability on reload
+      pluginStatus.classList.remove('hidden', 'error');
+      pluginStatus.innerHTML =
+        '<div class="status-spinner"></div><p>Connecting to plugin server...</p>';
+      iframe.classList.add('hidden');
+      checkPluginReachable(cachedConfig.pluginUrl, function (reachable) {
+        if (reachable) {
+          pluginStatus.classList.add('hidden');
+          iframe.classList.remove('hidden');
+          iframe.src = cachedConfig.pluginUrl;
+        } else {
+          showPluginError(cachedConfig.pluginUrl);
+        }
+      });
+    } else {
+      iframe.src = iframe.src;
+    }
+  });
+
+  themeToggle.addEventListener('click', function () {
+    currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    updateThemeBadge();
+    sendToPlugin({
+      type: 'theme_update',
+      messageId: 'theme_' + Date.now(),
+      payload: getTheme(),
+    });
+    logMessage('send', 'theme_update', { mode: currentTheme });
+  });
+
+  // Mode toggle — click the badge to switch between mock/live
+  modeBadge.addEventListener('click', function () {
+    if (currentMode === 'mock') {
+      // Switching to live — need credentials
+      if (!hasCredentials) {
+        showLoginModal();
+        return;
+      }
+      switchMode('live');
+    } else {
+      switchMode('mock');
+    }
+  });
+
+  function switchMode(newMode) {
+    fetch('/api/mode', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ mode: newMode }),
+    })
+      .then(function (r) {
+        if (!r.ok) {
+          return r.json().then(function (err) {
+            throw new Error(err.error || 'Failed to switch mode');
+          });
+        }
+        return r.json();
+      })
+      .then(function (data) {
+        currentMode = data.mode;
+        updateModeBadge();
+        logMessage('info', 'Mode switched to ' + currentMode.toUpperCase());
+
+        if (currentMode === 'live') {
+          creditBalance.style.display = 'inline';
+          fetchCredits();
+        } else {
+          creditBalance.style.display = 'none';
+          creditBalance.textContent = '';
+        }
+      })
+      .catch(function (err) {
+        logMessage('error', err.message);
+      });
+  }
+
+  // ────────────────────────────────────────────────────────────────
+  // Login Modal
+  // ────────────────────────────────────────────────────────────────
+
+  function showLoginModal() {
+    loginModal.style.display = 'flex';
+    loginInput.value = '';
+    loginError.style.display = 'none';
+    loginInput.focus();
+  }
+
+  function hideLoginModal() {
+    loginModal.style.display = 'none';
+    loginInput.value = '';
+    loginError.style.display = 'none';
+  }
+
+  loginCancel.addEventListener('click', hideLoginModal);
+
+  loginModal.addEventListener('click', function (e) {
+    if (e.target === loginModal) hideLoginModal();
+  });
+
+  loginInput.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter') submitLogin();
+    if (e.key === 'Escape') hideLoginModal();
+  });
+
+  loginSubmit.addEventListener('click', submitLogin);
+
+  function submitLogin() {
+    var apiKey = loginInput.value.trim();
+    if (!apiKey) {
+      loginError.textContent = 'Please enter an API key.';
+      loginError.style.display = 'block';
+      return;
+    }
+
+    loginSubmit.disabled = true;
+    loginSubmit.textContent = 'Connecting...';
+
+    fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ apiKey: apiKey }),
+    })
+      .then(function (r) {
+        if (!r.ok) {
+          return r.json().then(function (err) {
+            throw new Error(err.error || 'Login failed');
+          });
+        }
+        return r.json();
+      })
+      .then(function () {
+        hasCredentials = true;
+        hideLoginModal();
+        logMessage('info', 'API key saved successfully');
+        // Automatically switch to live mode after login
+        switchMode('live');
+      })
+      .catch(function (err) {
+        loginError.textContent = err.message;
+        loginError.style.display = 'block';
+      })
+      .finally(function () {
+        loginSubmit.disabled = false;
+        loginSubmit.textContent = 'Save & Connect';
+      });
+  }
+
+  // ────────────────────────────────────────────────────────────────
+  // Message Handling
+  // ────────────────────────────────────────────────────────────────
+
+  window.addEventListener('message', function (event) {
+    if (event.source !== iframe.contentWindow) return;
+
+    var data = event.data;
+    if (!data || typeof data !== 'object' || !data.type || !data.messageId) return;
+
+    logMessage('recv', data.type, data.payload);
+
+    // Fire-and-forget messages
+    if (data.type === 'ready') return;
+
+    if (data.type === 'resize') {
+      var height = data.payload && data.payload.height;
+      if (typeof height === 'number' && height > 0) {
+        iframe.style.height = height + 'px';
+        iframe.style.flex = 'none';
+      }
+      return;
+    }
+
+    if (data.type === 'toast') {
+      var msg = data.payload && data.payload.message;
+      if (typeof msg === 'string') {
+        logMessage('toast', msg, data.payload);
+      }
+      return;
+    }
+
+    if (data.type === 'navigate') {
+      var navPath = data.payload && data.payload.path;
+      if (typeof navPath === 'string') {
+        logMessage('nav', navPath);
+      }
+      return;
+    }
+
+    // Request/response messages — enforce permissions + rate limits, then proxy
+    handleRequest(data);
+  });
+
+  function handleRequest(data) {
+    try {
+      // Check permissions
+      var requiredPerm = PERMISSION_MAP[data.type];
+      if (requiredPerm && cachedConfig && cachedConfig.permissions.indexOf(requiredPerm) === -1) {
+        throw new Error('Permission denied: ' + requiredPerm + ' not granted');
+      }
+
+      // Check rate limit
+      checkRateLimit(data.type);
+    } catch (err) {
+      logMessage('error', err.message);
+      sendToPlugin({
+        type: 'response',
+        messageId: data.messageId,
+        payload: null,
+        error: err.message,
+      });
+      return;
+    }
+
+    // Proxy to harness server
+    fetch('/api/bridge', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type: data.type, payload: data.payload }),
+    })
+      .then(function (response) {
+        if (!response.ok) {
+          return response.json().then(function (err) {
+            throw new Error(err.error || 'Bridge call failed');
+          });
+        }
+        return response.json();
+      })
+      .then(function (result) {
+        logMessage('send', 'response', result);
+
+        // Show cost for entity invocations in live mode
+        if (
+          data.type === 'entity_invoke' &&
+          result.metadata &&
+          result.metadata.cost > 0
+        ) {
+          logMessage('cost', 'Credits used: ' + result.metadata.cost.toFixed(4));
+          fetchCredits();
+        }
+
+        sendToPlugin({
+          type: 'response',
+          messageId: data.messageId,
+          payload: result,
+        });
+      })
+      .catch(function (err) {
+        logMessage('error', err.message);
+        sendToPlugin({
+          type: 'response',
+          messageId: data.messageId,
+          payload: null,
+          error: err.message,
+        });
+      });
+  }
+
+  // ────────────────────────────────────────────────────────────────
+  // Iframe Init
+  // ────────────────────────────────────────────────────────────────
+
+  iframe.addEventListener('load', function () {
+    if (!cachedConfig) return;
+
+    sendToPlugin({
+      type: 'init',
+      messageId: 'init_0',
+      payload: {
+        archId: 'dev_harness',
+        permissions: cachedConfig.permissions,
+        theme: getTheme(),
+        currentPath: '/',
+      },
+    });
+    logMessage('send', 'init');
+  });
+
+  // ────────────────────────────────────────────────────────────────
+  // Helpers
+  // ────────────────────────────────────────────────────────────────
+
+  function updateModeBadge() {
+    var opposite = currentMode === 'live' ? 'Mock' : 'Live';
+    modeBadge.textContent = currentMode.toUpperCase() + ' \u21C6';
+    modeBadge.className = 'mode-badge ' + (currentMode === 'live' ? 'mode-live' : 'mode-mock');
+    modeBadge.title = 'Click to switch to ' + opposite + ' mode';
+  }
+
+  function updateThemeBadge() {
+    themeBadge.textContent = currentTheme.toUpperCase();
+    themeBadge.className = 'theme-badge theme-' + currentTheme;
+    document.body.style.background = currentTheme === 'light' ? '#ffffff' : '#0a0a0a';
+  }
+
+  function sendToPlugin(message) {
+    // targetOrigin '*' because the plugin may be on a different port.
+    // Security is enforced by checking event.source on incoming messages.
+    iframe.contentWindow && iframe.contentWindow.postMessage(message, '*');
+  }
+
+  function checkRateLimit(type) {
+    var limit = RATE_LIMITS[type];
+    if (!limit) return;
+
+    var now = Date.now();
+    var bucket = rateBuckets[type];
+
+    if (!bucket || now - bucket.windowStart > 60000) {
+      rateBuckets[type] = { count: 1, windowStart: now };
+      return;
+    }
+
+    if (bucket.count >= limit.maxPerMinute) {
+      throw new Error(
+        'Rate limit exceeded for ' + type + ': max ' + limit.maxPerMinute + '/minute',
+      );
+    }
+
+    bucket.count++;
+  }
+
+  var SYSTEM_FONTS = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+  var MONO_FONTS = '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace';
+  var SPACING = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' };
+  var FONTS = { body: SYSTEM_FONTS, heading: SYSTEM_FONTS, mono: MONO_FONTS };
+
+  function getTheme() {
+    if (currentTheme === 'light') {
+      return {
+        mode: 'light',
+        colors: {
+          primary: '#171717', secondary: '#e5e5e5',
+          background: '#ffffff', surface: '#fafafa',
+          text: '#0a0a0a', textSecondary: '#737373',
+          border: '#e5e5e5',
+          error: '#dc2626', warning: '#d97706', success: '#16a34a',
+        },
+        spacing: SPACING,
+        fonts: FONTS,
+      };
+    }
+    return {
+      mode: 'dark',
+      colors: {
+        primary: '#ffffff', secondary: '#1f1f1f',
+        background: '#0a0a0a', surface: '#171717',
+        text: '#ffffff', textSecondary: '#a6a6a6',
+        border: '#2e2e2e',
+        error: '#ef4444', warning: '#f59e0b', success: '#22c55e',
+      },
+      spacing: SPACING,
+      fonts: FONTS,
+    };
+  }
+
+  function fetchConfig() {
+    return fetch('/api/config').then(function (r) {
+      return r.json();
+    });
+  }
+
+  function fetchCredits() {
+    fetch('/api/credits')
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (data) {
+        if (data.balance !== undefined && data.balance !== null && isFinite(data.balance)) {
+          creditBalance.textContent = 'Credits: ' + data.balance.toFixed(2);
+        }
+      })
+      .catch(function () {});
+  }
+
+  function logMessage(direction, type, payload) {
+    messageCount++;
+    consoleCount.textContent = messageCount + ' messages';
+
+    var entry = document.createElement('div');
+    entry.className = 'log-entry';
+
+    var time = new Date().toLocaleTimeString();
+    var cls = 'log-info';
+    if (direction === 'error') cls = 'log-error';
+    if (direction === 'warn' || direction === 'cost') cls = 'log-warn';
+    if (direction === 'toast') cls = 'log-warn';
+
+    var text = '<span class="log-time">' + escapeHtml(time) + '</span>';
+    text +=
+      '<span class="' +
+      cls +
+      '">[' +
+      escapeHtml(direction.toUpperCase()) +
+      '] ' +
+      escapeHtml(String(type)) +
+      '</span>';
+    if (payload && typeof payload === 'object') {
+      text +=
+        ' <span style="color:#6b7280">' +
+        escapeHtml(JSON.stringify(payload).substring(0, 120)) +
+        '</span>';
+    }
+
+    entry.innerHTML = text;
+    consoleBody.appendChild(entry);
+    consoleBody.scrollTop = consoleBody.scrollHeight;
+  }
+
+  function escapeHtml(str) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
+  function checkPluginReachable(url, callback) {
+    var done = false;
+
+    // Try fetching through the harness server to avoid CORS issues
+    fetch('/api/check-plugin')
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        if (!done) {
+          done = true;
+          callback(data.reachable);
+        }
+      })
+      .catch(function () {
+        if (!done) {
+          done = true;
+          // If the check endpoint doesn't exist, assume reachable and let iframe handle it
+          callback(true);
+        }
+      });
+
+    // Timeout after 5 seconds
+    setTimeout(function () {
+      if (!done) {
+        done = true;
+        callback(false);
+      }
+    }, 5000);
+  }
+
+  function showPluginError(url) {
+    pluginStatus.classList.add('error');
+    pluginStatus.innerHTML =
+      '<p><strong>Plugin server not reachable</strong></p>' +
+      '<p>The harness cannot connect to your plugin at<br/><code>' + escapeHtml(url) + '</code></p>' +
+      '<p>Make sure your plugin dev server is running:</p>' +
+      '<p><code>npm run dev</code></p>' +
+      '<p style="color:#6b7280;font-size:12px;margin-top:8px;">' +
+      'The harness will automatically retry when you click the reload button (&#8635;).</p>';
+    iframe.classList.add('hidden');
+  }
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fias/plugin-dev-harness",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Development harness for building and testing FIAS plugin arches locally",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,14 +30,14 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@fias/arche-sdk": "workspace:*",
+    "chalk": "^4.1.2",
     "commander": "^12.0.0",
-    "express": "^4.21.0",
-    "open": "^10.0.0",
-    "chalk": "^4.1.2"
+    "express": "^4.21.0"
   },
   "devDependencies": {
     "@types/express": "^5.0.0",
-    "@types/node": "^25.0.0",
+    "@types/node": "^25.5.0",
     "typescript": "^5.3.3"
   }
 }