@fias/plugin-dev-harness 1.1.0 → 1.1.2

package/dist/server/harness-server.js

@@ -49,27 +49,71 @@ const fs = __importStar(require("fs"));
 const chalk_1 = __importDefault(require("chalk"));
 const mock_handler_1 = require("../bridge/mock-handler");
 const live_handler_1 = require("../bridge/live-handler");
+const credentials_1 = require("../config/credentials");
 async function startHarnessServer(options) {
     const app = (0, express_1.default)();
     app.use(express_1.default.json());
-    // Create appropriate bridge handler
-    const handler = options.isLive
+    // Mutable mode — can be toggled at runtime via UI
+    let currentMode = options.isLive ? 'live' : 'mock';
+    let currentApiKey = options.apiKey;
+    // Always create mock handler
+    const mockHandler = new mock_handler_1.MockBridgeHandler({
+        mockUser: options.mockUser,
+        mockTheme: options.mockTheme,
+        mockEntities: options.mockEntities,
+    });
+    // Create live handler (recreated when credentials change)
+    let liveHandler = currentApiKey
         ? new live_handler_1.LiveBridgeHandler({
-            apiKey: options.apiKey,
+            apiKey: currentApiKey,
             apiUrl: options.apiUrl,
             permissions: options.permissions,
             mockUser: options.mockUser,
             mockTheme: options.mockTheme,
         })
-        : new mock_handler_1.MockBridgeHandler({
+        : null;
+    function getActiveHandler() {
+        return currentMode === 'live' && liveHandler ? liveHandler : mockHandler;
+    }
+    // Mode toggle endpoint — called by harness.js
+    app.post('/api/mode', (req, res) => {
+        const { mode } = req.body;
+        if (mode === 'live') {
+            if (!liveHandler) {
+                res.status(400).json({ error: 'No API key configured. Use the login button first.' });
+                return;
+            }
+            currentMode = 'live';
+        }
+        else {
+            currentMode = 'mock';
+        }
+        console.log(chalk_1.default.dim(`  Mode switched to ${currentMode.toUpperCase()}`));
+        res.json({ mode: currentMode });
+    });
+    // Login endpoint — saves API key and creates live handler
+    app.post('/api/login', (req, res) => {
+        const { apiKey } = req.body;
+        if (!apiKey || typeof apiKey !== 'string' || apiKey.trim().length === 0) {
+            res.status(400).json({ error: 'API key is required' });
+            return;
+        }
+        currentApiKey = apiKey.trim();
+        (0, credentials_1.saveCredentials)({ apiKey: currentApiKey });
+        liveHandler = new live_handler_1.LiveBridgeHandler({
+            apiKey: currentApiKey,
+            apiUrl: options.apiUrl,
+            permissions: options.permissions,
             mockUser: options.mockUser,
             mockTheme: options.mockTheme,
-            mockEntities: options.mockEntities,
         });
+        console.log(chalk_1.default.green('  API key saved to ~/.fias/credentials'));
+        res.json({ success: true });
+    });
     // Bridge API endpoint — called by harness.js
     app.post('/api/bridge', async (req, res) => {
         try {
-            const result = await handler.handle(req.body);
+            const result = await getActiveHandler().handle(req.body);
             res.json(result);
         }
         catch (err) {
@@ -78,15 +122,15 @@ async function startHarnessServer(options) {
             });
         }
     });
-    // Credit balance endpoint (live mode only)
+    // Credit balance endpoint
     app.get('/api/credits', async (_req, res) => {
-        if (!options.isLive) {
-            res.json({ balance: Infinity, lifetimeUsed: 0, lifetimeGranted: 0 });
+        if (currentMode !== 'live' || !currentApiKey) {
+            res.json({ balance: null });
             return;
         }
         try {
             const response = await fetch(`${options.apiUrl}/developer/credits`, {
-                headers: { Authorization: `Bearer ${options.apiKey}` },
+                headers: { Authorization: `Bearer ${currentApiKey}` },
             });
             if (!response.ok) {
                 res.status(response.status).json({ error: 'Failed to fetch credits' });
@@ -100,11 +144,25 @@ async function startHarnessServer(options) {
                 .json({ error: err instanceof Error ? err.message : 'Failed to fetch credits' });
         }
     });
+    // Plugin reachability check — called by harness.js before loading iframe
+    app.get('/api/check-plugin', async (_req, res) => {
+        try {
+            const controller = new AbortController();
+            const timeout = setTimeout(() => controller.abort(), 3000);
+            const response = await fetch(options.pluginUrl, { signal: controller.signal });
+            clearTimeout(timeout);
+            res.json({ reachable: response.ok });
+        }
+        catch {
+            res.json({ reachable: false });
+        }
+    });
     // Harness config endpoint — provides config to the frontend
     app.get('/api/config', (_req, res) => {
         res.json({
             pluginUrl: options.pluginUrl,
-            isLive: options.isLive,
+            mode: currentMode,
+            hasCredentials: Boolean(currentApiKey),
             permissions: options.permissions,
             mockTheme: options.mockTheme,
         });
@@ -137,8 +195,20 @@ async function startHarnessServer(options) {
     });
     return new Promise((resolve) => {
         app.listen(options.port, () => {
-            console.log(chalk_1.default.green(`  Harness server running at http://localhost:${options.port}\n`));
-            console.log(chalk_1.default.dim('  Press Ctrl+C to stop\n'));
+            console.log(chalk_1.default.green(`\n  Harness server running at http://localhost:${options.port}`));
+            console.log(chalk_1.default.dim(`  Plugin URL: ${options.pluginUrl}`));
+            console.log(chalk_1.default.dim(`  Mode: ${currentMode.toUpperCase()}${currentApiKey ? '' : ' (no API key — click MOCK badge in toolbar to login)'}\n`));
+            // Check if plugin dev server is reachable
+            checkPluginReachable(options.pluginUrl).then((reachable) => {
+                if (reachable) {
+                    console.log(chalk_1.default.green(`  ✓ Plugin server is reachable at ${options.pluginUrl}\n`));
+                }
+                else {
+                    console.log(chalk_1.default.yellow(`  ⚠ Plugin server not reachable at ${options.pluginUrl}\n` +
+                        `    Make sure your plugin dev server is running (npm run dev)\n`));
+                }
+                console.log(chalk_1.default.dim('  Press Ctrl+C to stop\n'));
+            });
             resolve();
         });
     });
@@ -146,37 +216,55 @@ async function startHarnessServer(options) {
 /**
  * Fallback HTML when static files haven't been copied to dist.
  * This enables the harness to work during development.
+ * Mirrors the structure of harness.html but with inline styles/scripts.
  */
 function generateFallbackHtml(options) {
+    const initialMode = options.isLive ? 'live' : 'mock';
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>FIAS Dev Harness</title>
+  <title>Fias Arche Dev</title>
   <style>${EMBEDDED_CSS}</style>
 </head>
 <body>
   <div class="toolbar">
     <div class="toolbar-left">
-      <span class="logo">FIAS Dev Harness</span>
-      <span class="mode-badge ${options.isLive ? 'mode-live' : 'mode-mock'}">
-        ${options.isLive ? 'LIVE' : 'MOCK'}
-      </span>
-      <div class="permissions">
-        ${options.permissions.map((p) => `<span class="perm-badge">${p}</span>`).join('')}
-      </div>
+      <span class="logo">Fias Arche Dev</span>
+      <button id="mode-badge" class="mode-badge mode-${initialMode === 'live' ? 'live' : 'mock'}" title="Click to toggle mode">
+        ${initialMode.toUpperCase()}
+      </button>
+      <span id="plugin-url" class="plugin-url">${options.pluginUrl}</span>
     </div>
     <div class="toolbar-right">
-      <span id="credit-balance" class="credit-balance" style="display: ${options.isLive ? 'inline' : 'none'}"></span>
+      <span id="credit-balance" class="credit-balance" style="display: none"></span>
+      <span id="theme-badge" class="theme-badge theme-${options.mockTheme || 'dark'}">${(options.mockTheme || 'dark').toUpperCase()}</span>
       <button id="theme-toggle" class="btn-icon" title="Toggle theme">☀/☾</button>
       <button id="reload-btn" class="btn-icon" title="Reload plugin">↻</button>
     </div>
   </div>
+  <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>
+      </div>
+    </div>
+  </div>
+  <div id="plugin-status" class="plugin-status">
+    <div class="status-spinner"></div>
+    <p>Connecting to plugin server...</p>
+  </div>
   <iframe
     id="plugin-iframe"
-    src="${options.pluginUrl}"
-    sandbox="allow-scripts allow-forms"
+    class="hidden"
+    sandbox="allow-scripts allow-forms allow-same-origin"
   ></iframe>
   <div id="console-panel" class="console-panel">
     <div class="console-header" id="console-toggle">
@@ -189,21 +277,58 @@ function generateFallbackHtml(options) {
 </body>
 </html>`;
 }
+async function checkPluginReachable(url) {
+    try {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 3000);
+        const response = await fetch(url, { signal: controller.signal });
+        clearTimeout(timeout);
+        return response.ok;
+    }
+    catch {
+        return false;
+    }
+}
 const EMBEDDED_CSS = `
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0f; color: #e4e4e7; display: flex; flex-direction: column; height: 100vh; }
 .toolbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #18181b; border-bottom: 1px solid #3f3f46; flex-shrink: 0; }
 .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 12px; }
 .logo { font-weight: 600; font-size: 14px; color: #a78bfa; }
-.mode-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
+.mode-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s; }
+.mode-badge:hover { opacity: 0.8; }
 .mode-mock { background: #166534; color: #86efac; }
 .mode-live { background: #854d0e; color: #fde047; }
-.permissions { display: flex; gap: 4px; }
-.perm-badge { padding: 2px 6px; border-radius: 3px; font-size: 10px; background: #27272a; color: #a1a1aa; }
+.theme-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
+.theme-dark { background: #1e1b4b; color: #a78bfa; }
+.theme-light { background: #ede9fe; color: #6d28d9; }
 .credit-balance { font-size: 12px; color: #fde047; }
 .btn-icon { background: #27272a; border: 1px solid #3f3f46; color: #e4e4e7; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; }
 .btn-icon:hover { background: #3f3f46; }
+.plugin-url { font-size: 11px; color: #6b7280; font-family: monospace; }
+.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+.modal { background: #27272a; border: 1px solid #3f3f46; border-radius: 8px; padding: 24px; width: 420px; max-width: 90vw; }
+.modal h3 { font-size: 16px; color: #e4e4e7; margin-bottom: 8px; }
+.modal p { font-size: 13px; color: #a1a1aa; line-height: 1.5; margin-bottom: 4px; }
+.modal-hint { font-size: 12px !important; color: #6b7280 !important; margin-bottom: 16px !important; }
+.modal-input { width: 100%; padding: 8px 12px; background: #18181b; border: 1px solid #3f3f46; border-radius: 4px; color: #e4e4e7; font-family: monospace; font-size: 13px; margin-bottom: 12px; outline: none; }
+.modal-input:focus { border-color: #a78bfa; }
+.modal-error { font-size: 12px; color: #fca5a5; margin-bottom: 12px; }
+.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.btn-primary { background: #6d28d9; color: #e4e4e7; border: none; padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; }
+.btn-primary:hover { background: #7c3aed; }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-secondary { background: transparent; color: #a1a1aa; border: 1px solid #3f3f46; padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; }
+.btn-secondary:hover { background: #3f3f46; }
+.plugin-status { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #a1a1aa; font-size: 14px; }
+.plugin-status.hidden { display: none; }
+.plugin-status.error { color: #fca5a5; }
+.plugin-status p { max-width: 500px; text-align: center; line-height: 1.6; }
+.plugin-status code { background: #27272a; padding: 2px 8px; border-radius: 4px; font-family: monospace; font-size: 13px; color: #e4e4e7; }
+.status-spinner { width: 24px; height: 24px; border: 3px solid #3f3f46; border-top-color: #a78bfa; border-radius: 50%; animation: spin 0.8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
 #plugin-iframe { flex: 1; border: none; width: 100%; }
+#plugin-iframe.hidden { display: none; }
 .console-panel { flex-shrink: 0; border-top: 1px solid #3f3f46; background: #18181b; max-height: 250px; display: flex; flex-direction: column; }
 .console-header { display: flex; justify-content: space-between; padding: 6px 16px; cursor: pointer; font-size: 12px; color: #a1a1aa; border-bottom: 1px solid #27272a; }
 .console-body { overflow-y: auto; padding: 8px 16px; font-family: monospace; font-size: 11px; flex: 1; display: none; }
@@ -215,218 +340,161 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
 .log-time { color: #6b7280; margin-right: 8px; }
 .log-cost { color: #fbbf24; margin-left: 8px; }
 `;
+// The embedded JS mirrors harness.js but is served inline for the fallback page.
+// It uses the same API endpoints as the static version.
 const EMBEDDED_JS = `
 (function() {
-  const iframe = document.getElementById('plugin-iframe');
-  const consoleBody = document.getElementById('console-body');
-  const consoleCount = document.getElementById('console-count');
-  const consoleToggle = document.getElementById('console-toggle');
-  const creditBalance = document.getElementById('credit-balance');
-  const themeToggle = document.getElementById('theme-toggle');
-  const reloadBtn = document.getElementById('reload-btn');
+  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 themeBadge = document.getElementById('theme-badge');
+  var pluginStatus = document.getElementById('plugin-status');
+  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');
 
-  let messageCount = 0;
-  let currentTheme = 'dark';
+  var messageCount = 0;
+  var currentTheme = 'dark';
+  var currentMode = 'mock';
+  var hasCredentials = false;
+  var cachedConfig = null;
 
-  // Fetch config
-  fetch('/api/config')
-    .then(r => r.json())
-    .then(config => {
-      currentTheme = config.mockTheme || 'dark';
-      if (config.isLive) fetchCredits();
-    });
+  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',
+  };
+  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 = {};
 
-  // Console toggle
-  consoleToggle.addEventListener('click', () => {
-    consoleBody.classList.toggle('open');
-  });
+  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 };
 
-  // Reload button
-  reloadBtn.addEventListener('click', () => {
-    iframe.src = iframe.src;
+  fetch('/api/config').then(function(r) { return r.json(); }).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(); }
+    checkPluginReachable(function(reachable) {
+      if (reachable) { pluginStatus.classList.add('hidden'); iframe.classList.remove('hidden'); iframe.src = config.pluginUrl; }
+      else { pluginStatus.classList.add('error'); pluginStatus.innerHTML = '<p><strong>Plugin server not reachable</strong></p><p>Make sure your plugin dev server is running.</p>'; iframe.classList.add('hidden'); }
+    });
   });
 
-  // Theme toggle
-  themeToggle.addEventListener('click', () => {
+  consoleToggle.addEventListener('click', function() { consoleBody.classList.toggle('open'); });
+  reloadBtn.addEventListener('click', function() { if (cachedConfig) { iframe.src = cachedConfig.pluginUrl; } });
+
+  themeToggle.addEventListener('click', function() {
     currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    updateThemeBadge();
     sendToPlugin({ type: 'theme_update', messageId: 'theme_' + Date.now(), payload: getTheme() });
   });
 
-  function getTheme() {
-    if (currentTheme === 'light') {
-      return { mode: 'light', colors: { background: '#ffffff', foreground: '#18181b', primary: '#7c3aed', secondary: '#ede9fe', accent: '#8b5cf6', muted: '#f4f4f5', border: '#e4e4e7' }};
-    }
-    return { mode: 'dark', colors: { background: '#0a0a0f', foreground: '#e4e4e7', primary: '#6d28d9', secondary: '#1e1b4b', accent: '#8b5cf6', muted: '#27272a', border: '#3f3f46' }};
-  }
+  modeBadge.addEventListener('click', function() {
+    if (currentMode === 'mock') {
+      if (!hasCredentials) { showLoginModal(); return; }
+      switchMode('live');
+    } else { switchMode('mock'); }
+  });
 
-  // Permission map (matches production PluginBridgeHost)
-  const 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',
-  };
+  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(e) { throw new Error(e.error); }); return r.json(); })
+      .then(function(data) {
+        currentMode = data.mode; updateModeBadge();
+        if (currentMode === 'live') { creditBalance.style.display = 'inline'; fetchCredits(); }
+        else { creditBalance.style.display = 'none'; creditBalance.textContent = ''; }
+      }).catch(function(err) { logMessage('error', err.message); });
+  }
 
-  // Rate limits (matches production PluginBridgeHost)
-  const RATE_LIMITS = {
-    entity_invoke: { maxPerMinute: 60 },
-    storage_write: { maxPerMinute: 120 },
-    storage_read: { maxPerMinute: 300 },
-    storage_list: { maxPerMinute: 60 },
-    storage_delete: { maxPerMinute: 60 },
-  };
-  const rateBuckets = {};
+  function showLoginModal() { loginModal.style.display = 'flex'; loginInput.value = ''; loginError.style.display = 'none'; loginInput.focus(); }
+  function hideLoginModal() { loginModal.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 checkRateLimit(type) {
-    const limit = RATE_LIMITS[type];
-    if (!limit) return;
-    const now = Date.now();
-    const 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++;
+  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(e) { throw new Error(e.error); }); return r.json(); })
+      .then(function() { hasCredentials = true; hideLoginModal(); switchMode('live'); })
+      .catch(function(err) { loginError.textContent = err.message; loginError.style.display = 'block'; })
+      .finally(function() { loginSubmit.disabled = false; loginSubmit.textContent = 'Save & Connect'; });
   }
 
-  // Listen for plugin messages
-  window.addEventListener('message', async (event) => {
+  window.addEventListener('message', function(event) {
     if (event.source !== iframe.contentWindow) return;
-
-    const data = event.data;
+    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 h = data.payload && data.payload.height; if (typeof h === 'number' && h > 0) { iframe.style.height = h + 'px'; iframe.style.flex = 'none'; } return; }
+    if (data.type === 'toast') { var msg = data.payload && data.payload.message; if (typeof msg === 'string') logMessage('toast', msg); return; }
+    if (data.type === 'navigate') { var p = data.payload && data.payload.path; if (typeof p === 'string') logMessage('nav', p); return; }
+    handleRequest(data);
+  });
 
-    if (data.type === 'resize') {
-      const 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') {
-      const msg = data.payload && data.payload.message;
-      if (typeof msg === 'string') {
-        logMessage('toast', msg, data.payload);
-      }
-      return;
-    }
-
-    if (data.type === 'navigate') {
-      const navPath = data.payload && data.payload.path;
-      if (typeof navPath === 'string') {
-        logMessage('nav', navPath);
-      }
-      return;
-    }
-
-    // Request/response messages
+  function handleRequest(data) {
     try {
-      // Check permissions
-      const requiredPerm = PERMISSION_MAP[data.type];
-      if (requiredPerm) {
-        const config = await fetch('/api/config').then(r => r.json());
-        if (!config.permissions.includes(requiredPerm)) {
-          throw new Error('Permission denied: ' + requiredPerm + ' not granted');
-        }
-      }
-
+      var requiredPerm = PERMISSION_MAP[data.type];
+      if (requiredPerm && cachedConfig && cachedConfig.permissions.indexOf(requiredPerm) === -1) throw new Error('Permission denied: ' + requiredPerm);
       checkRateLimit(data.type);
+    } catch (err) { logMessage('error', err.message); sendToPlugin({ type: 'response', messageId: data.messageId, payload: null, error: err.message }); return; }
+    fetch('/api/bridge', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: data.type, payload: data.payload }) })
+      .then(function(r) { if (!r.ok) return r.json().then(function(e) { throw new Error(e.error || 'Bridge call failed'); }); return r.json(); })
+      .then(function(result) {
+        logMessage('send', 'response', result);
+        if (data.type === 'entity_invoke' && result.metadata && result.metadata.cost > 0) { logMessage('cost', 'Credits: ' + 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 }); });
+  }
 
-      const response = await fetch('/api/bridge', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ type: data.type, payload: data.payload }),
-      });
-
-      if (!response.ok) {
-        const err = await response.json().catch(() => ({}));
-        throw new Error(err.error || 'Bridge call failed');
-      }
-
-      const result = await response.json();
-      logMessage('send', 'response', result);
-
-      // Show cost for entity invocations
-      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 (err) {
-      logMessage('error', err.message);
-      sendToPlugin({ type: 'response', messageId: data.messageId, payload: null, error: err.message });
-    }
-  });
-
-  // Send init message when iframe loads
-  iframe.addEventListener('load', () => {
-    fetch('/api/config')
-      .then(r => r.json())
-      .then(config => {
-        sendToPlugin({
-          type: 'init',
-          messageId: 'init_0',
-          payload: {
-            archId: 'dev_harness',
-            permissions: config.permissions,
-            theme: getTheme(),
-            currentPath: '/',
-          },
-        });
-        logMessage('send', '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');
   });
 
-  function sendToPlugin(message) {
-    iframe.contentWindow && iframe.contentWindow.postMessage(message, '*');
+  function updateModeBadge() {
+    modeBadge.textContent = currentMode.toUpperCase();
+    modeBadge.className = 'mode-badge ' + (currentMode === 'live' ? 'mode-live' : 'mode-mock');
   }
-
-  function fetchCredits() {
-    fetch('/api/credits')
-      .then(r => r.json())
-      .then(data => {
-        if (data.balance !== undefined && data.balance !== Infinity) {
-          creditBalance.textContent = 'Credits: ' + data.balance.toFixed(2);
-        }
-      })
-      .catch(() => {});
+  function updateThemeBadge() { themeBadge.textContent = currentTheme.toUpperCase(); themeBadge.className = 'theme-badge theme-' + currentTheme; }
+  function sendToPlugin(message) { 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); bucket.count++; }
+  function getTheme() {
+    if (currentTheme === 'light') return { mode: 'light', colors: { 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: { primary: '#6d28d9', secondary: '#1e1b4b', background: '#0a0a0f', surface: '#27272a', text: '#e4e4e7', textSecondary: '#a1a1aa', border: '#3f3f46', error: '#ef4444', warning: '#f59e0b', success: '#22c55e' }, spacing: SPACING, fonts: FONTS };
   }
-
-  function logMessage(direction, type, payload) {
-    messageCount++;
-    consoleCount.textContent = messageCount + ' messages';
-
-    const entry = document.createElement('div');
-    entry.className = 'log-entry';
-
-    const time = new Date().toLocaleTimeString();
-    let cls = 'log-info';
-    if (direction === 'error') cls = 'log-error';
-    if (direction === 'warn' || direction === 'cost') cls = 'log-warn';
-
-    let text = '<span class="log-time">' + time + '</span>';
-    text += '<span class="' + cls + '">[' + direction.toUpperCase() + '] ' + type + '</span>';
-    if (payload && typeof payload === 'object') {
-      text += ' <span style="color:#6b7280">' + JSON.stringify(payload).substring(0, 120) + '</span>';
-    }
-
-    entry.innerHTML = text;
-    consoleBody.appendChild(entry);
-    consoleBody.scrollTop = consoleBody.scrollHeight;
+  function checkPluginReachable(cb) { fetch('/api/check-plugin').then(function(r) { return r.json(); }).then(function(d) { cb(d.reachable); }).catch(function() { cb(true); }); }
+  function fetchCredits() { fetch('/api/credits').then(function(r) { return r.json(); }).then(function(d) { if (d.balance != null && isFinite(d.balance)) creditBalance.textContent = 'Credits: ' + d.balance.toFixed(2); }).catch(function() {}); }
+  function logMessage(dir, type, payload) {
+    messageCount++; consoleCount.textContent = messageCount + ' messages';
+    var entry = document.createElement('div'); entry.className = 'log-entry';
+    var cls = 'log-info'; if (dir === 'error') cls = 'log-error'; if (dir === 'warn' || dir === 'cost' || dir === 'toast') cls = 'log-warn';
+    var text = '<span class="log-time">' + new Date().toLocaleTimeString() + '</span><span class="' + cls + '">[' + dir.toUpperCase() + '] ' + type + '</span>';
+    if (payload && typeof payload === 'object') text += ' <span style="color:#6b7280">' + JSON.stringify(payload).substring(0, 120) + '</span>';
+    entry.innerHTML = text; consoleBody.appendChild(entry); consoleBody.scrollTop = consoleBody.scrollHeight;
   }
 })();
 `;