@fias/plugin-dev-harness 1.1.0 → 1.1.2

package/dist/server/static/harness.js

@@ -1,5 +1,5 @@
 /**
- * FIAS Dev Harness — Client-side Bridge Host
+ * Fias Arche Dev — Client-side Bridge Host
  *
  * Ported from the production PluginBridgeHost
  * (client/src/arche/components/PluginBridge.ts).
@@ -19,10 +19,19 @@
   var themeToggle = document.getElementById('theme-toggle');
   var reloadBtn = document.getElementById('reload-btn');
   var modeBadge = document.getElementById('mode-badge');
-  var permissionsEl = document.getElementById('permissions');
+  var pluginUrlEl = document.getElementById('plugin-url');
+  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) */
@@ -53,24 +62,29 @@
   fetchConfig().then(function (config) {
     cachedConfig = config;
     currentTheme = config.mockTheme || 'dark';
+    currentMode = config.mode || 'mock';
+    hasCredentials = config.hasCredentials || false;
 
-    // Update UI
-    modeBadge.textContent = config.isLive ? 'LIVE' : 'MOCK';
-    modeBadge.className = 'mode-badge ' + (config.isLive ? 'mode-live' : 'mode-mock');
+    updateThemeBadge();
+    updateModeBadge();
 
-    permissionsEl.innerHTML = config.permissions
-      .map(function (p) {
-        return '<span class="perm-badge">' + escapeHtml(p) + '</span>';
-      })
-      .join('');
+    pluginUrlEl.textContent = config.pluginUrl;
 
-    if (config.isLive) {
+    if (currentMode === 'live') {
       creditBalance.style.display = 'inline';
       fetchCredits();
     }
 
-    // Load plugin
-    iframe.src = config.pluginUrl;
+    // 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);
+      }
+    });
   });
 
   // ────────────────────────────────────────────────────────────────
@@ -82,11 +96,29 @@
   });
 
   reloadBtn.addEventListener('click', function () {
-    iframe.src = iframe.src;
+    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(),
@@ -95,6 +127,123 @@
     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
   // ────────────────────────────────────────────────────────────────
@@ -228,8 +377,23 @@
   // Helpers
   // ────────────────────────────────────────────────────────────────
 
+  function updateModeBadge() {
+    modeBadge.textContent = currentMode.toUpperCase();
+    modeBadge.className = 'mode-badge ' + (currentMode === 'live' ? 'mode-live' : 'mode-mock');
+    modeBadge.title = currentMode === 'live'
+      ? 'Live mode (real AI) — click to switch to mock'
+      : hasCredentials
+        ? 'Mock mode — click to switch to live'
+        : 'Mock mode — click to login and enable live mode';
+  }
+
+  function updateThemeBadge() {
+    themeBadge.textContent = currentTheme.toUpperCase();
+    themeBadge.className = 'theme-badge theme-' + currentTheme;
+  }
+
   function sendToPlugin(message) {
-    // targetOrigin '*' because sandboxed iframes have opaque origins.
+    // 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, '*');
   }
@@ -255,32 +419,37 @@
     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: {
-          background: '#ffffff',
-          foreground: '#18181b',
-          primary: '#7c3aed',
-          secondary: '#ede9fe',
-          accent: '#8b5cf6',
-          muted: '#f4f4f5',
+          primary: '#7c3aed', secondary: '#ede9fe',
+          background: '#ffffff', surface: '#f4f4f5',
+          text: '#18181b', textSecondary: '#71717a',
           border: '#e4e4e7',
+          error: '#ef4444', warning: '#f59e0b', success: '#22c55e',
         },
+        spacing: SPACING,
+        fonts: FONTS,
       };
     }
     return {
       mode: 'dark',
       colors: {
-        background: '#0a0a0f',
-        foreground: '#e4e4e7',
-        primary: '#6d28d9',
-        secondary: '#1e1b4b',
-        accent: '#8b5cf6',
-        muted: '#27272a',
+        primary: '#6d28d9', secondary: '#1e1b4b',
+        background: '#0a0a0f', surface: '#27272a',
+        text: '#e4e4e7', textSecondary: '#a1a1aa',
         border: '#3f3f46',
+        error: '#ef4444', warning: '#f59e0b', success: '#22c55e',
       },
+      spacing: SPACING,
+      fonts: FONTS,
     };
   }
 
@@ -296,7 +465,7 @@
         return r.json();
       })
       .then(function (data) {
-        if (data.balance !== undefined && isFinite(data.balance)) {
+        if (data.balance !== undefined && data.balance !== null && isFinite(data.balance)) {
           creditBalance.textContent = 'Credits: ' + data.balance.toFixed(2);
         }
       })
@@ -342,4 +511,45 @@
     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.0",
+  "version": "1.1.2",
   "description": "Development harness for building and testing FIAS plugin arches locally",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",