@fias/plugin-dev-harness 1.2.0 → 1.3.1

package/dist/server/static/static/harness.css

@@ -37,6 +37,28 @@ body {
   color: #a78bfa;
 }
 
+/* Environment selector */
+.env-selector {
+  background: #27272a;
+  color: #a1a1aa;
+  border: 1px solid #3f3f46;
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  outline: none;
+  text-transform: uppercase;
+}
+
+.env-selector:hover {
+  border-color: #52525b;
+}
+
+.env-selector:focus {
+  border-color: #a78bfa;
+}
+
 .mode-badge {
   padding: 3px 10px;
   border-radius: 4px;
@@ -193,6 +215,12 @@ body {
   cursor: not-allowed;
 }
 
+.btn-full {
+  width: 100%;
+  padding: 10px 16px;
+  margin-bottom: 12px;
+}
+
 .btn-secondary {
   background: transparent;
   color: #a1a1aa;
@@ -207,6 +235,36 @@ body {
   background: #3f3f46;
 }
 
+.btn-link {
+  background: none;
+  border: none;
+  color: #a78bfa;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+}
+
+.btn-link:hover {
+  text-decoration: underline;
+}
+
+.modal-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 12px 0;
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.modal-divider::before,
+.modal-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #3f3f46;
+}
+
 /* Plugin status overlay */
 .plugin-status {
   flex: 1;

package/dist/server/static/static/harness.html

@@ -10,6 +10,10 @@
   <div class="toolbar">
     <div class="toolbar-left">
       <span class="logo">Fias Arche Dev</span>
+      <select id="env-selector" class="env-selector">
+        <option value="staging">STAGING</option>
+        <option value="production">PRODUCTION</option>
+      </select>
       <button id="mode-badge" class="mode-badge mode-mock" title="Click to switch mode">MOCK &#8646;</button>
     </div>
     <div class="toolbar-right">
@@ -23,14 +27,23 @@
   <div id="login-modal" class="modal-overlay" style="display: none">
     <div class="modal">
       <h3>Connect to FIAS</h3>
-      <p>Enter your API key to enable live mode with real AI responses.</p>
-      <p class="modal-hint">Get an API key from your FIAS platform account settings.</p>
-      <input id="login-input" type="password" class="modal-input" placeholder="fias_sk_..." autocomplete="off" />
-      <div id="login-error" class="modal-error" style="display: none"></div>
-      <div class="modal-actions">
-        <button id="login-cancel" class="btn-secondary">Cancel</button>
-        <button id="login-submit" class="btn-primary">Save &amp; Connect</button>
+      <p>Sign in to your FIAS account to enable live mode with real AI responses.</p>
+      <div id="login-popup-section">
+        <button id="login-popup-btn" class="btn-primary btn-full">Sign in with FIAS</button>
+        <p id="login-popup-hint" class="modal-hint" style="display:none">
+          Popup blocked? <a id="login-popup-link" href="#" target="_blank" style="color:#a78bfa">Open login page manually</a>
+        </p>
+        <div class="modal-divider"><span>or</span></div>
+        <button id="login-manual-toggle" class="btn-link">Enter API key manually</button>
+      </div>
+      <div id="login-manual-section" style="display:none">
+        <input id="login-input" type="password" class="modal-input" placeholder="fias_sk_..." autocomplete="off" />
+        <div class="modal-actions">
+          <button id="login-cancel" class="btn-secondary">Cancel</button>
+          <button id="login-submit" class="btn-primary">Save &amp; Connect</button>
+        </div>
       </div>
+      <div id="login-error" class="modal-error" style="display: none"></div>
     </div>
   </div>
   <div id="plugin-status" class="plugin-status">

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

@@ -26,12 +26,21 @@
   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 loginPopupBtn = document.getElementById('login-popup-btn');
+  var loginPopupHint = document.getElementById('login-popup-hint');
+  var loginPopupLink = document.getElementById('login-popup-link');
+  var loginManualToggle = document.getElementById('login-manual-toggle');
+  var loginManualSection = document.getElementById('login-manual-section');
+  var loginPopupSection = document.getElementById('login-popup-section');
 
   var messageCount = 0;
   var currentTheme = 'dark';
   var currentMode = 'mock';
+  var currentEnvironment = 'staging';
   var hasCredentials = false;
   var cachedConfig = null;
+  var authPollInterval = null;
 
   /** Permission requirements per bridge call type (matches production) */
   var PERMISSION_MAP = {
@@ -62,8 +71,10 @@
     cachedConfig = config;
     currentTheme = config.mockTheme || 'dark';
     currentMode = config.mode || 'mock';
+    currentEnvironment = config.environment || 'staging';
     hasCredentials = config.hasCredentials || false;
 
+    envSelector.value = currentEnvironment;
     updateThemeBadge();
     updateModeBadge();
 
@@ -138,6 +149,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',
@@ -176,15 +223,19 @@
 
   function showLoginModal() {
     loginModal.style.display = 'flex';
-    loginInput.value = '';
+    loginPopupSection.style.display = 'block';
+    loginManualSection.style.display = 'none';
+    loginPopupHint.style.display = 'none';
     loginError.style.display = 'none';
-    loginInput.focus();
+    loginPopupBtn.disabled = false;
+    loginPopupBtn.textContent = 'Sign in with FIAS';
   }
 
   function hideLoginModal() {
     loginModal.style.display = 'none';
     loginInput.value = '';
     loginError.style.display = 'none';
+    stopAuthPolling();
   }
 
   loginCancel.addEventListener('click', hideLoginModal);
@@ -193,6 +244,13 @@
     if (e.target === loginModal) hideLoginModal();
   });
 
+  // Toggle to manual key entry
+  loginManualToggle.addEventListener('click', function () {
+    loginPopupSection.style.display = 'none';
+    loginManualSection.style.display = 'block';
+    loginInput.focus();
+  });
+
   loginInput.addEventListener('keydown', function (e) {
     if (e.key === 'Enter') submitLogin();
     if (e.key === 'Escape') hideLoginModal();
@@ -200,6 +258,39 @@
 
   loginSubmit.addEventListener('click', submitLogin);
 
+  // Popup-based login
+  loginPopupBtn.addEventListener('click', function () {
+    loginPopupBtn.disabled = true;
+    loginPopupBtn.textContent = 'Opening...';
+
+    fetch('/api/auth/start', { method: 'POST' })
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (data) {
+        var popup = window.open(data.authUrl, 'fias-auth', 'width=500,height=650');
+
+        if (!popup || popup.closed) {
+          // Popup was blocked — show fallback link
+          loginPopupHint.style.display = 'block';
+          loginPopupLink.href = data.authUrl;
+          loginPopupBtn.disabled = false;
+          loginPopupBtn.textContent = 'Sign in with FIAS';
+        } else {
+          loginPopupBtn.textContent = 'Waiting for sign-in...';
+        }
+
+        // Start polling as fallback (works even if popup can't postMessage)
+        startAuthPolling();
+      })
+      .catch(function (err) {
+        loginError.textContent = err.message;
+        loginError.style.display = 'block';
+        loginPopupBtn.disabled = false;
+        loginPopupBtn.textContent = 'Sign in with FIAS';
+      });
+  });
+
   function submitLogin() {
     var apiKey = loginInput.value.trim();
     if (!apiKey) {
@@ -241,11 +332,57 @@
       });
   }
 
+  // Auth polling — fallback for popup blocked or postMessage unavailable
+  function startAuthPolling() {
+    if (authPollInterval) return;
+    authPollInterval = setInterval(function () {
+      fetch('/api/config')
+        .then(function (r) {
+          return r.json();
+        })
+        .then(function (config) {
+          if (config.hasCredentials && !hasCredentials) {
+            hasCredentials = true;
+            stopAuthPolling();
+            hideLoginModal();
+            logMessage('info', 'Authenticated for ' + currentEnvironment.toUpperCase());
+            switchMode('live');
+          }
+        })
+        .catch(function () {});
+    }, 2000);
+  }
+
+  function stopAuthPolling() {
+    if (authPollInterval) {
+      clearInterval(authPollInterval);
+      authPollInterval = null;
+    }
+  }
+
   // ────────────────────────────────────────────────────────────────
   // Message Handling
   // ────────────────────────────────────────────────────────────────
 
   window.addEventListener('message', function (event) {
+    // Handle auth callback from popup
+    if (event.data && event.data.type === 'auth_callback') {
+      stopAuthPolling();
+      if (event.data.success) {
+        hasCredentials = true;
+        hideLoginModal();
+        logMessage('info', 'Authenticated for ' + currentEnvironment.toUpperCase());
+        switchMode('live');
+      } else {
+        loginError.textContent = event.data.error || 'Authentication failed';
+        loginError.style.display = 'block';
+      }
+      loginPopupBtn.disabled = false;
+      loginPopupBtn.textContent = 'Sign in with FIAS';
+      return;
+    }
+
+    // Handle plugin iframe messages
     if (event.source !== iframe.contentWindow) return;
 
     var data = event.data;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fias/plugin-dev-harness",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Development harness for building and testing FIAS plugin arches locally",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,6 +15,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc && cp -r src/server/static dist/server/static",
+    "clean": "rm -rf dist",
+    "watch": "tsc -w",
+    "typecheck": "tsc --noEmit"
+  },
   "keywords": [
     "fias",
     "plugin",
@@ -24,20 +30,14 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@fias/arche-sdk": "^1.0.0",
     "chalk": "^4.1.2",
     "commander": "^12.0.0",
-    "express": "^4.21.0",
-    "@fias/arche-sdk": "1.2.1"
+    "express": "^4.21.0"
   },
   "devDependencies": {
     "@types/express": "^5.0.0",
     "@types/node": "^25.5.0",
     "typescript": "^5.3.3"
-  },
-  "scripts": {
-    "build": "tsc && cp -r src/server/static dist/server/static",
-    "clean": "rm -rf dist",
-    "watch": "tsc -w",
-    "typecheck": "tsc --noEmit"
   }
-}
+}