@fias/plugin-dev-harness 1.4.1 → 1.5.0

package/dist/server/static/harness.js

@@ -1,9 +1,6 @@
 /**
  * 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.
@@ -22,14 +19,17 @@
   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 loginEmail = document.getElementById('login-email');
+  var loginPassword = document.getElementById('login-password');
   var loginError = document.getElementById('login-error');
   var loginSubmit = document.getElementById('login-submit');
   var loginCancel = document.getElementById('login-cancel');
+  var envSelector = document.getElementById('env-selector');
 
   var messageCount = 0;
   var currentTheme = 'dark';
   var currentMode = 'mock';
+  var currentEnvironment = 'staging';
   var hasCredentials = false;
   var cachedConfig = null;
 
@@ -62,8 +62,10 @@
     cachedConfig = config;
     currentTheme = config.mockTheme || 'dark';
     currentMode = config.mode || 'mock';
+    currentEnvironment = config.environment || 'staging';
     hasCredentials = config.hasCredentials || false;
 
+    envSelector.value = currentEnvironment;
     updateThemeBadge();
     updateModeBadge();
 
@@ -72,7 +74,6 @@
       fetchCredits();
     }
 
-    // Check if plugin server is reachable, then load
     checkPluginReachable(config.pluginUrl, function (reachable) {
       if (reachable) {
         pluginStatus.classList.add('hidden');
@@ -94,7 +95,6 @@
 
   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>';
@@ -124,10 +124,9 @@
     logMessage('send', 'theme_update', { mode: currentTheme });
   });
 
-  // Mode toggle — click the badge to switch between mock/live
+  // Mode toggle
   modeBadge.addEventListener('click', function () {
     if (currentMode === 'mock') {
-      // Switching to live — need credentials
       if (!hasCredentials) {
         showLoginModal();
         return;
@@ -138,6 +137,42 @@
     }
   });
 
+  // Environment selector
+  envSelector.addEventListener('change', function () {
+    fetch('/api/environment', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ environment: envSelector.value }),
+    })
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (data) {
+        currentEnvironment = data.environment;
+        currentMode = data.mode;
+        hasCredentials = data.hasCredentials;
+        updateModeBadge();
+
+        if (currentMode === 'live') {
+          creditBalance.style.display = 'inline';
+          fetchCredits();
+        } else {
+          creditBalance.style.display = 'none';
+          creditBalance.textContent = '';
+        }
+
+        logMessage(
+          'info',
+          'Environment: ' +
+            currentEnvironment.toUpperCase() +
+            (hasCredentials ? '' : ' (not authenticated)'),
+        );
+      })
+      .catch(function (err) {
+        logMessage('error', err.message);
+      });
+  });
+
   function switchMode(newMode) {
     fetch('/api/mode', {
       method: 'POST',
@@ -174,17 +209,21 @@
   // Login Modal
   // ────────────────────────────────────────────────────────────────
 
+  var loginTarget = document.getElementById('login-target');
+
   function showLoginModal() {
     loginModal.style.display = 'flex';
-    loginInput.value = '';
+    loginEmail.value = '';
+    loginPassword.value = '';
     loginError.style.display = 'none';
-    loginInput.focus();
+    loginSubmit.disabled = false;
+    loginSubmit.textContent = 'Sign in';
+    loginTarget.textContent = currentEnvironment === 'production' ? 'fias.io' : 'staging.fias.io';
+    loginEmail.focus();
   }
 
   function hideLoginModal() {
     loginModal.style.display = 'none';
-    loginInput.value = '';
-    loginError.style.display = 'none';
   }
 
   loginCancel.addEventListener('click', hideLoginModal);
@@ -193,7 +232,12 @@
     if (e.target === loginModal) hideLoginModal();
   });
 
-  loginInput.addEventListener('keydown', function (e) {
+  loginEmail.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter') loginPassword.focus();
+    if (e.key === 'Escape') hideLoginModal();
+  });
+
+  loginPassword.addEventListener('keydown', function (e) {
     if (e.key === 'Enter') submitLogin();
     if (e.key === 'Escape') hideLoginModal();
   });
@@ -201,25 +245,28 @@
   loginSubmit.addEventListener('click', submitLogin);
 
   function submitLogin() {
-    var apiKey = loginInput.value.trim();
-    if (!apiKey) {
-      loginError.textContent = 'Please enter an API key.';
+    var email = loginEmail.value.trim();
+    var password = loginPassword.value;
+
+    if (!email || !password) {
+      loginError.textContent = 'Email and password are required.';
       loginError.style.display = 'block';
       return;
     }
 
     loginSubmit.disabled = true;
-    loginSubmit.textContent = 'Connecting...';
+    loginSubmit.textContent = 'Signing in...';
+    loginError.style.display = 'none';
 
-    fetch('/api/login', {
+    fetch('/api/auth/login', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ apiKey: apiKey }),
+      body: JSON.stringify({ email: email, password: password }),
     })
       .then(function (r) {
         if (!r.ok) {
           return r.json().then(function (err) {
-            throw new Error(err.error || 'Login failed');
+            throw new Error(err.error || 'Sign in failed');
           });
         }
         return r.json();
@@ -227,8 +274,7 @@
       .then(function () {
         hasCredentials = true;
         hideLoginModal();
-        logMessage('info', 'API key saved successfully');
-        // Automatically switch to live mode after login
+        logMessage('info', 'Signed in for ' + currentEnvironment.toUpperCase());
         switchMode('live');
       })
       .catch(function (err) {
@@ -237,7 +283,7 @@
       })
       .finally(function () {
         loginSubmit.disabled = false;
-        loginSubmit.textContent = 'Save & Connect';
+        loginSubmit.textContent = 'Sign in';
       });
   }
 
@@ -253,7 +299,6 @@
 
     logMessage('recv', data.type, data.payload);
 
-    // Fire-and-forget messages
     if (data.type === 'ready') return;
 
     if (data.type === 'resize') {
@@ -281,19 +326,15 @@
       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);
@@ -306,7 +347,12 @@
       return;
     }
 
-    // Proxy to harness server
+    // Streaming path for entity_invoke with stream: true
+    if (data.type === 'entity_invoke' && data.payload && data.payload.stream) {
+      handleStreamingRequest(data);
+      return;
+    }
+
     fetch('/api/bridge', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -323,7 +369,6 @@
       .then(function (result) {
         logMessage('send', 'response', result);
 
-        // Show cost for entity invocations in live mode
         if (
           data.type === 'entity_invoke' &&
           result.metadata &&
@@ -350,6 +395,86 @@
       });
   }
 
+  function handleStreamingRequest(data) {
+    fetch('/api/bridge/stream', {
+      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 streaming call failed');
+          });
+        }
+
+        var contentType = response.headers.get('content-type') || '';
+        if (contentType.indexOf('text/event-stream') === -1) {
+          // Fallback: not SSE, parse as JSON
+          return response.json().then(function (result) {
+            sendToPlugin({ type: 'response', messageId: data.messageId, payload: result });
+          });
+        }
+
+        // Parse SSE stream
+        var reader = response.body.getReader();
+        var decoder = new TextDecoder();
+        var buffer = '';
+        var finalPayload = null;
+
+        function pump() {
+          return reader.read().then(function (chunk) {
+            if (chunk.done) {
+              if (finalPayload) {
+                logMessage('send', 'response', finalPayload);
+                sendToPlugin({ type: 'response', messageId: data.messageId, payload: finalPayload });
+              }
+              return;
+            }
+
+            buffer += decoder.decode(chunk.value, { stream: true });
+            var lines = buffer.split('\n');
+            buffer = lines.pop() || '';
+
+            for (var i = 0; i < lines.length; i++) {
+              var line = lines[i];
+              if (line.indexOf('data: ') !== 0) continue;
+              try {
+                var parsed = JSON.parse(line.slice(6));
+                if (parsed.error) throw new Error(parsed.error);
+                if (parsed.text) {
+                  sendToPlugin({ type: 'stream_token', messageId: data.messageId, text: parsed.text });
+                }
+                if (parsed.done) {
+                  finalPayload = { output: parsed.output, metadata: parsed.metadata };
+                  if (parsed.metadata && parsed.metadata.cost > 0) {
+                    logMessage('cost', 'Credits used: ' + parsed.metadata.cost.toFixed(4));
+                    fetchCredits();
+                  }
+                }
+              } catch (e) {
+                if (e instanceof SyntaxError) continue;
+                throw e;
+              }
+            }
+
+            return pump();
+          });
+        }
+
+        return pump();
+      })
+      .catch(function (err) {
+        logMessage('error', err.message);
+        sendToPlugin({
+          type: 'response',
+          messageId: data.messageId,
+          payload: null,
+          error: err.message,
+        });
+      });
+  }
+
   // ────────────────────────────────────────────────────────────────
   // Iframe Init
   // ────────────────────────────────────────────────────────────────
@@ -385,11 +510,26 @@
     themeBadge.textContent = currentTheme.toUpperCase();
     themeBadge.className = 'theme-badge theme-' + currentTheme;
     document.body.style.background = currentTheme === 'light' ? '#ffffff' : '#0a0a0a';
+
+    // Update toolbar to match theme
+    var toolbar = document.querySelector('.toolbar');
+    var logo = document.querySelector('.logo');
+    var icons = document.querySelectorAll('.btn-icon');
+    var env = document.getElementById('env-selector');
+    if (currentTheme === 'light') {
+      if (toolbar) { toolbar.style.background = '#f5f5f5'; toolbar.style.borderBottomColor = '#e5e5e5'; }
+      if (logo) { logo.style.color = '#171717'; }
+      if (env) { env.style.background = '#e5e5e5'; env.style.color = '#171717'; env.style.borderColor = '#d4d4d4'; }
+      icons.forEach(function (btn) { btn.style.background = '#e5e5e5'; btn.style.color = '#171717'; btn.style.borderColor = '#d4d4d4'; });
+    } else {
+      if (toolbar) { toolbar.style.background = '#18181b'; toolbar.style.borderBottomColor = '#3f3f46'; }
+      if (logo) { logo.style.color = '#e4e4e7'; }
+      if (env) { env.style.background = '#27272a'; env.style.color = '#a1a1aa'; env.style.borderColor = '#3f3f46'; }
+      icons.forEach(function (btn) { btn.style.background = '#27272a'; btn.style.color = '#e4e4e7'; btn.style.borderColor = '#3f3f46'; });
+    }
   }
 
   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, '*');
   }
 
@@ -419,32 +559,51 @@
   var SPACING = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' };
   var FONTS = { body: SYSTEM_FONTS, heading: SYSTEM_FONTS, mono: MONO_FONTS };
 
+  var COMPONENTS = {
+    borderRadius: '0.5rem',
+    buttonRadius: '0.375rem',
+    cardRadius: '0.5rem',
+    inputRadius: '0.375rem',
+    shadowSm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    shadowMd: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+    shadowLg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    borderWidth: '1px',
+  };
+
   function getTheme() {
     if (currentTheme === 'light') {
       return {
         mode: 'light',
         colors: {
-          primary: '#171717', secondary: '#e5e5e5',
+          primary: '#171717', primaryText: '#ffffff',
+          secondary: '#e5e5e5', accent: '#2563eb',
           background: '#ffffff', surface: '#fafafa',
+          card: '#ffffff', cardText: '#0a0a0a',
           text: '#0a0a0a', textSecondary: '#737373',
+          muted: '#f5f5f5', mutedText: '#a3a3a3',
           border: '#e5e5e5',
-          error: '#dc2626', warning: '#d97706', success: '#16a34a',
+          error: '#dc2626', warning: '#d97706', success: '#16a34a', info: '#2563eb',
         },
         spacing: SPACING,
         fonts: FONTS,
+        components: COMPONENTS,
       };
     }
     return {
       mode: 'dark',
       colors: {
-        primary: '#ffffff', secondary: '#1f1f1f',
+        primary: '#ffffff', primaryText: '#0a0a0a',
+        secondary: '#1f1f1f', accent: '#3b82f6',
         background: '#0a0a0a', surface: '#171717',
+        card: '#141414', cardText: '#ffffff',
         text: '#ffffff', textSecondary: '#a6a6a6',
+        muted: '#1e1e1e', mutedText: '#737373',
         border: '#2e2e2e',
-        error: '#ef4444', warning: '#f59e0b', success: '#22c55e',
+        error: '#ef4444', warning: '#f59e0b', success: '#22c55e', info: '#3b82f6',
       },
       spacing: SPACING,
       fonts: FONTS,
+      components: COMPONENTS,
     };
   }
 
@@ -510,7 +669,6 @@
   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) {
@@ -522,12 +680,10 @@
       .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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fias/plugin-dev-harness",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Development harness for building and testing FIAS plugin arches locally",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",