nowaikit-utils 1.1.0

package/content/main-panel.js

@@ -0,0 +1,592 @@
+/**
+ * NowAIKit Utils — Main Panel
+ * Floating/dockable command panel with quick actions, feature toggles,
+ * page info, and connected services. Ctrl+Shift+P to toggle.
+ */
+(function() {
+  'use strict';
+
+  var panel = null;
+  var isOpen = false;
+  var isFloating = false;
+  var isDragging = false;
+  var dragOffsetX = 0;
+  var dragOffsetY = 0;
+
+  // ─── Helpers ─────────────────────────────────────────────────────
+
+  function _escapeHtml(str) {
+    if (typeof window.escapeHtml === 'function') return window.escapeHtml(str);
+    var div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function _showToast(msg, type) {
+    if (typeof window.showToast === 'function') window.showToast(msg, type);
+  }
+
+  function getModKey() {
+    return ((window.nowaikitState || {}).isMac) ? 'Cmd' : 'Ctrl';
+  }
+
+  // ─── Create Panel ───────────────────────────────────────────────
+
+  function createPanel() {
+    if (document.getElementById('nowaikit-main-panel')) return;
+
+    panel = document.createElement('div');
+    panel.id = 'nowaikit-main-panel';
+    panel.className = 'nk-mp';
+    panel.innerHTML = buildPanelHTML();
+
+    // Resize handle for sidebar mode
+    var resizeHandle = document.createElement('div');
+    resizeHandle.className = 'nk-mp-resize';
+    panel.appendChild(resizeHandle);
+    initResize(resizeHandle);
+
+    document.body.appendChild(panel);
+    injectStyles();
+    bindEvents();
+    initDrag();
+  }
+
+  // ─── Panel HTML ─────────────────────────────────────────────────
+
+  function buildPanelHTML() {
+    var NS = window.nowaikitState || {};
+    var mod = getModKey();
+    var table = NS.currentTable || '';
+    var sysId = NS.currentSysId || '';
+    var instance = NS.instanceUrl ? new URL(NS.instanceUrl).hostname.split('.')[0] : '';
+
+    return '' +
+      // Header
+      '<div class="nk-mp-header">' +
+        '<div class="nk-mp-header-left">' +
+          '<svg width="22" height="22" viewBox="0 0 512 512" style="flex-shrink:0"><defs><linearGradient id="nkMpGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#00F0C0"/><stop offset="50%" stop-color="#00D4AA"/><stop offset="100%" stop-color="#0F4C81"/></linearGradient></defs><rect width="512" height="512" rx="128" fill="url(#nkMpGrad)"/><g transform="translate(256,256) scale(9.13) translate(-22,-23)"><path d="M5 39V7l15 27V7" stroke="#fff" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M34 4l2 7 6 2-6 2-2 7-2-7-6-2 6-2z" fill="#fff" opacity="0.9"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="2s" repeatCount="indefinite"/></path><circle cx="34" cy="34" r="4.5" fill="#fff" opacity="0.8"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="2s" repeatCount="indefinite" begin="0.3s"/></circle></g></svg>' +
+          '<span class="nk-mp-title"><span class="nk-mp-logo-now">Now</span><span class="nk-mp-logo-ai">AI</span><span class="nk-mp-logo-kit">Kit</span><span class="nk-mp-logo-suffix"> Utils</span></span>' +
+        '</div>' +
+        '<div class="nk-mp-header-actions">' +
+          '<button class="nk-mp-hbtn" id="nk-mp-float" title="Float window">' +
+            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="7" y="7" width="10" height="10" rx="1" fill="currentColor" opacity="0.15"/></svg>' +
+          '</button>' +
+          '<button class="nk-mp-hbtn" id="nk-mp-close" title="Close (' + mod + '+Shift+P)">' +
+            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>' +
+          '</button>' +
+        '</div>' +
+      '</div>' +
+
+      // Scrollable body
+      '<div class="nk-mp-body">' +
+
+        // Instance status
+        '<div class="nk-mp-section">' +
+          '<div class="nk-mp-section-title">Instance</div>' +
+          '<div class="nk-mp-instance-row">' +
+            '<span class="nk-mp-dot' + (instance ? ' active' : '') + '"></span>' +
+            '<span class="nk-mp-instance-name">' + (instance ? _escapeHtml(instance) : 'Not detected') + '</span>' +
+          '</div>' +
+        '</div>' +
+
+        // Page info
+        (table ? (
+          '<div class="nk-mp-section">' +
+            '<div class="nk-mp-section-title">Page Info</div>' +
+            '<div class="nk-mp-info-grid">' +
+              '<div class="nk-mp-info-item">' +
+                '<span class="nk-mp-info-label">Table</span>' +
+                '<span class="nk-mp-info-value nk-mp-copyable" data-copy="' + _escapeHtml(table) + '">' + _escapeHtml(table) + '</span>' +
+              '</div>' +
+              (sysId ? (
+                '<div class="nk-mp-info-item">' +
+                  '<span class="nk-mp-info-label">sys_id</span>' +
+                  '<span class="nk-mp-info-value nk-mp-copyable" data-copy="' + _escapeHtml(sysId) + '">' + _escapeHtml(sysId.substring(0, 16)) + '...</span>' +
+                '</div>'
+              ) : '') +
+            '</div>' +
+          '</div>'
+        ) : '') +
+
+        // Quick actions
+        '<div class="nk-mp-section">' +
+          '<div class="nk-mp-section-title">Quick Actions</div>' +
+          '<div class="nk-mp-actions">' +
+            '<button class="nk-mp-action" data-action="copy-sysid"><span class="nk-mp-action-icon">&#128203;</span>Copy sys_id</button>' +
+            '<button class="nk-mp-action" data-action="copy-url"><span class="nk-mp-action-icon">&#128279;</span>Copy URL</button>' +
+            '<button class="nk-mp-action" data-action="list-view"><span class="nk-mp-action-icon">&#128196;</span>List View</button>' +
+            '<button class="nk-mp-action" data-action="xml-view"><span class="nk-mp-action-icon">&#128196;</span>XML View</button>' +
+            '<button class="nk-mp-action" data-action="json-view"><span class="nk-mp-action-icon">&#123;&#125;</span>JSON View</button>' +
+            '<button class="nk-mp-action" data-action="schema"><span class="nk-mp-action-icon">&#128209;</span>Schema</button>' +
+            '<button class="nk-mp-action" data-action="node-switch"><span class="nk-mp-action-icon">&#127760;</span>Switch Node</button>' +
+            '<button class="nk-mp-action" data-action="templates"><span class="nk-mp-action-icon">&#128221;</span>Templates</button>' +
+            '<button class="nk-mp-action nk-mp-action-wide" data-action="ai-assistant"><span class="nk-mp-action-icon">&#129302;</span> AI Assistant</button>' +
+          '</div>' +
+        '</div>' +
+
+        // Feature toggles
+        '<div class="nk-mp-section">' +
+          '<div class="nk-mp-section-title">Features</div>' +
+          '<div class="nk-mp-toggles">' +
+            buildToggle('showTechnicalNames', 'Technical names') +
+            buildToggle('showUpdateSetBanner', 'Update set banner') +
+            buildToggle('enableFieldCopy', 'Field copy buttons') +
+            buildToggle('enableQuickNav', 'Quick navigation') +
+          '</div>' +
+        '</div>' +
+
+        // Connected services
+        '<div class="nk-mp-section">' +
+          '<div class="nk-mp-section-title">Connected Services</div>' +
+          '<div class="nk-mp-service-row">' +
+            '<span class="nk-mp-dot" id="nk-mp-builder-dot"></span>' +
+            '<span class="nk-mp-service-name">NowAIKit Builder</span>' +
+            '<span class="nk-mp-service-status" id="nk-mp-builder-status">Checking...</span>' +
+          '</div>' +
+          '<div class="nk-mp-service-row">' +
+            '<span class="nk-mp-dot" id="nk-mp-mcp-dot"></span>' +
+            '<span class="nk-mp-service-name">MCP Server</span>' +
+            '<span class="nk-mp-service-status" id="nk-mp-mcp-status">Via Builder</span>' +
+          '</div>' +
+        '</div>' +
+
+        // Keyboard shortcuts (collapsed)
+        '<div class="nk-mp-section">' +
+          '<div class="nk-mp-section-title nk-mp-collapsible" id="nk-mp-shortcuts-toggle">Keyboard Shortcuts <span class="nk-mp-chevron">&#9654;</span></div>' +
+          '<div class="nk-mp-shortcuts collapsed" id="nk-mp-shortcuts">' +
+            buildShortcut('Main Panel', mod + '+Shift+P') +
+            buildShortcut('Quick Nav', mod + '+Shift+K') +
+            buildShortcut('Copy sys_id', mod + '+Shift+C') +
+            buildShortcut('Copy URL', mod + '+Shift+U') +
+            buildShortcut('List View', mod + '+Shift+L') +
+            buildShortcut('XML / JSON', mod + '+Shift+X / J') +
+            buildShortcut('Templates', mod + '+Shift+T') +
+            buildShortcut('AI Assistant', mod + '+Shift+A') +
+            buildShortcut('Switch Node', mod + '+Shift+N') +
+          '</div>' +
+        '</div>' +
+
+      '</div>' + // end body
+
+      // Footer
+      '<div class="nk-mp-footer">' +
+        'Part of <a href="https://nowaikit.com" target="_blank">NowAIKit</a>' +
+      '</div>';
+  }
+
+  function buildToggle(key, label) {
+    return '<div class="nk-mp-toggle-row">' +
+      '<span class="nk-mp-toggle-label">' + _escapeHtml(label) + '</span>' +
+      '<label class="nk-mp-toggle">' +
+        '<input type="checkbox" data-setting="' + key + '">' +
+        '<span class="nk-mp-toggle-slider"></span>' +
+      '</label>' +
+    '</div>';
+  }
+
+  function buildShortcut(label, keys) {
+    var kbds = keys.split('+').map(function(k) {
+      return '<kbd>' + k.trim() + '</kbd>';
+    }).join('');
+    return '<div class="nk-mp-shortcut-row">' +
+      '<span class="nk-mp-shortcut-label">' + _escapeHtml(label) + '</span>' +
+      '<div class="nk-mp-shortcut-keys">' + kbds + '</div>' +
+    '</div>';
+  }
+
+  // ─── Events ─────────────────────────────────────────────────────
+
+  function bindEvents() {
+    // Close
+    document.getElementById('nk-mp-close').addEventListener('click', closePanel);
+
+    // Float toggle
+    document.getElementById('nk-mp-float').addEventListener('click', toggleFloat);
+
+    // Shortcuts collapsible
+    var shortcutsToggle = document.getElementById('nk-mp-shortcuts-toggle');
+    var shortcutsSection = document.getElementById('nk-mp-shortcuts');
+    if (shortcutsToggle && shortcutsSection) {
+      shortcutsToggle.addEventListener('click', function() {
+        var collapsed = shortcutsSection.classList.toggle('collapsed');
+        shortcutsToggle.classList.toggle('expanded', !collapsed);
+      });
+    }
+
+    // Copyable values
+    panel.querySelectorAll('.nk-mp-copyable').forEach(function(el) {
+      el.addEventListener('click', function() {
+        var text = el.getAttribute('data-copy');
+        if (text) {
+          navigator.clipboard.writeText(text);
+          var orig = el.textContent;
+          el.textContent = 'Copied!';
+          setTimeout(function() { el.textContent = orig; }, 1000);
+        }
+      });
+    });
+
+    // Quick actions
+    panel.querySelectorAll('.nk-mp-action').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        handleAction(btn.getAttribute('data-action'));
+      });
+    });
+
+    // Feature toggles — load state and bind
+    var toggleInputs = panel.querySelectorAll('input[data-setting]');
+    var settingKeys = {};
+    toggleInputs.forEach(function(inp) {
+      settingKeys[inp.getAttribute('data-setting')] = false;
+    });
+    chrome.storage.sync.get(settingKeys, function(stored) {
+      toggleInputs.forEach(function(inp) {
+        var key = inp.getAttribute('data-setting');
+        inp.checked = !!stored[key];
+      });
+    });
+    toggleInputs.forEach(function(inp) {
+      inp.addEventListener('change', function() {
+        var obj = {};
+        obj[inp.getAttribute('data-setting')] = inp.checked;
+        chrome.storage.sync.set(obj);
+      });
+    });
+
+    // Escape key
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && isOpen) {
+        closePanel();
+      }
+    });
+
+    // Bridge status
+    checkBridgeStatus();
+  }
+
+  function handleAction(action) {
+    var NS = window.nowaikitState || {};
+    var table = NS.currentTable || '';
+    var sysId = NS.currentSysId || '';
+    var instanceUrl = NS.instanceUrl || '';
+
+    switch (action) {
+      case 'copy-sysid':
+        if (sysId) {
+          navigator.clipboard.writeText(sysId);
+          _showToast('sys_id copied!');
+        } else {
+          _showToast('No sys_id found', 'warn');
+        }
+        break;
+      case 'copy-url':
+        navigator.clipboard.writeText(window.location.href);
+        _showToast('URL copied!');
+        break;
+      case 'list-view':
+        if (table) window.open(instanceUrl + '/' + table + '_list.do', '_blank');
+        break;
+      case 'xml-view':
+        if (table && sysId) window.open(instanceUrl + '/' + table + '.do?XML&sys_id=' + sysId, '_blank');
+        else if (table) window.open(instanceUrl + '/' + table + '.do?XML', '_blank');
+        break;
+      case 'json-view':
+        if (table && sysId) window.open(instanceUrl + '/' + table + '.do?JSONv2&sysparm_action=get&sysparm_sys_id=' + sysId, '_blank');
+        else if (table) window.open(instanceUrl + '/' + table + '.do?JSONv2&sysparm_action=getRecords&sysparm_limit=20', '_blank');
+        break;
+      case 'schema':
+        if (table) window.open(instanceUrl + '/sys_dictionary_list.do?sysparm_query=name=' + table, '_blank');
+        break;
+      case 'node-switch':
+        if (typeof window.openNodeSwitcher === 'function') window.openNodeSwitcher();
+        break;
+      case 'templates':
+        if (typeof window.toggleCodeTemplates === 'function') window.toggleCodeTemplates();
+        break;
+      case 'ai-assistant':
+        if (typeof window.ensureAISidebar === 'function') window.ensureAISidebar();
+        break;
+    }
+  }
+
+  function checkBridgeStatus() {
+    if (typeof getBridgeStatus !== 'function') return;
+    try {
+      var status = getBridgeStatus();
+      var builderDot = document.getElementById('nk-mp-builder-dot');
+      var builderStatus = document.getElementById('nk-mp-builder-status');
+      var mcpDot = document.getElementById('nk-mp-mcp-dot');
+      var mcpStatus = document.getElementById('nk-mp-mcp-status');
+
+      if (status && status.connected) {
+        if (builderDot) { builderDot.classList.add('active'); }
+        if (builderStatus) { builderStatus.textContent = status.instanceName || 'Connected'; builderStatus.style.color = 'var(--nk-teal)'; }
+        if (mcpDot) { mcpDot.classList.add('active'); }
+        if (mcpStatus) { mcpStatus.textContent = 'Available'; mcpStatus.style.color = 'var(--nk-teal)'; }
+      } else {
+        if (builderStatus) builderStatus.textContent = 'Not running';
+        if (mcpStatus) mcpStatus.textContent = 'Not available';
+      }
+    } catch(e) {
+      // bridge not available
+    }
+  }
+
+  // ─── Toggle / Float / Drag / Resize ─────────────────────────────
+
+  function togglePanel() {
+    if (!panel) createPanel();
+    isOpen = !isOpen;
+    panel.classList.toggle('nk-mp-open', isOpen);
+    if (isOpen) {
+      // Close other panels
+      if (typeof window.closeAISidebar === 'function') window.closeAISidebar();
+      if (typeof window.closeCodeTemplates === 'function') window.closeCodeTemplates();
+      refreshPageInfo();
+    }
+  }
+
+  function closePanel() {
+    isOpen = false;
+    if (panel) panel.classList.remove('nk-mp-open');
+  }
+
+  function toggleFloat() {
+    if (!panel) return;
+    isFloating = !isFloating;
+    panel.classList.toggle('nk-mp-floating', isFloating);
+
+    var floatBtn = document.getElementById('nk-mp-float');
+    if (floatBtn) {
+      floatBtn.title = isFloating ? 'Dock to side' : 'Float window';
+      floatBtn.innerHTML = isFloating
+        ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>'
+        : '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="7" y="7" width="10" height="10" rx="1" fill="currentColor" opacity="0.15"/></svg>';
+    }
+
+    if (!isFloating) {
+      panel.style.left = '';
+      panel.style.top = '';
+      panel.style.right = '';
+      panel.style.width = '';
+      panel.style.height = '';
+    }
+  }
+
+  function initDrag() {
+    document.addEventListener('mousedown', function(e) {
+      if (!isFloating || !panel) return;
+      var header = panel.querySelector('.nk-mp-header');
+      if (!header || !header.contains(e.target)) return;
+      if (e.target.closest('.nk-mp-hbtn')) return;
+      isDragging = true;
+      var rect = panel.getBoundingClientRect();
+      dragOffsetX = e.clientX - rect.left;
+      dragOffsetY = e.clientY - rect.top;
+      e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', function(e) {
+      if (!isDragging) return;
+      var x = Math.max(0, Math.min(e.clientX - dragOffsetX, window.innerWidth - 100));
+      var y = Math.max(0, Math.min(e.clientY - dragOffsetY, window.innerHeight - 100));
+      panel.style.left = x + 'px';
+      panel.style.top = y + 'px';
+      panel.style.right = 'auto';
+    });
+
+    document.addEventListener('mouseup', function() {
+      isDragging = false;
+    });
+  }
+
+  function initResize(handle) {
+    var isResizing = false;
+    var startX = 0;
+    var startWidth = 0;
+
+    handle.addEventListener('mousedown', function(e) {
+      if (isFloating) return;
+      isResizing = true;
+      startX = e.clientX;
+      startWidth = panel.offsetWidth;
+      handle.classList.add('active');
+      e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', function(e) {
+      if (!isResizing) return;
+      var diff = startX - e.clientX;
+      var newWidth = Math.max(340, Math.min(startWidth + diff, window.innerWidth * 0.7));
+      panel.style.width = newWidth + 'px';
+    });
+
+    document.addEventListener('mouseup', function() {
+      if (isResizing) {
+        isResizing = false;
+        handle.classList.remove('active');
+      }
+    });
+  }
+
+  function refreshPageInfo() {
+    // Re-read state from nowaikitState since it may have changed
+    var NS = window.nowaikitState || {};
+    var table = NS.currentTable || '';
+    var sysId = NS.currentSysId || '';
+    var instance = NS.instanceUrl ? new URL(NS.instanceUrl).hostname.split('.')[0] : '';
+
+    // Update instance
+    var instEl = panel.querySelector('.nk-mp-instance-name');
+    var dotEl = panel.querySelector('.nk-mp-instance-row .nk-mp-dot');
+    if (instEl) instEl.textContent = instance || 'Not detected';
+    if (dotEl) dotEl.classList.toggle('active', !!instance);
+  }
+
+  // ─── Styles ─────────────────────────────────────────────────────
+
+  function injectStyles() {
+    if (document.getElementById('nk-mp-styles')) return;
+    var s = document.createElement('style');
+    s.id = 'nk-mp-styles';
+    s.textContent =
+      ':root{--nk-teal:#00D4AA;--nk-navy:#0F4C81;--nk-bg:#0B1020;--nk-card:#111828;--nk-border:#1e2a3e;--nk-text:#e0e5ec;--nk-text-dim:#6b7a90;}' +
+
+      /* Reset */
+      '.nk-mp,.nk-mp *{box-sizing:border-box;margin:0;padding:0;line-height:normal;}' +
+
+      /* Panel — sidebar mode */
+      '.nk-mp{position:fixed;top:0;right:-420px;width:420px;max-width:100vw;height:100vh;' +
+        'background:var(--nk-bg);border-left:1px solid var(--nk-border);z-index:2147483645;' +
+        'display:flex;flex-direction:column;overflow:hidden;' +
+        'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;' +
+        'font-size:13px;color:var(--nk-text);box-shadow:-4px 0 20px rgba(0,0,0,.4);' +
+        'transition:right .3s cubic-bezier(.4,0,.2,1);}' +
+      '.nk-mp.nk-mp-open{right:0;}' +
+
+      /* Floating */
+      '.nk-mp.nk-mp-floating{top:40px;right:40px;width:480px;height:70vh;' +
+        'border-radius:12px;border:1px solid var(--nk-border);box-shadow:0 12px 40px rgba(0,0,0,.6);' +
+        'resize:both;overflow:hidden;min-width:340px;min-height:300px;}' +
+      '.nk-mp.nk-mp-floating .nk-mp-header{cursor:grab;border-radius:12px 12px 0 0;}' +
+      '.nk-mp.nk-mp-floating .nk-mp-header:active{cursor:grabbing;}' +
+      '.nk-mp.nk-mp-floating .nk-mp-resize{display:none;}' +
+
+      /* Resize handle */
+      '.nk-mp-resize{position:absolute;top:0;left:-3px;width:6px;height:100%;cursor:ew-resize;z-index:10;}' +
+      '.nk-mp-resize:hover,.nk-mp-resize.active{background:rgba(0,212,170,.3);}' +
+
+      /* Header */
+      '.nk-mp-header{display:flex;align-items:center;justify-content:space-between;' +
+        'padding:14px 16px;background:linear-gradient(135deg,#0a2e5c 0%,#065f50 100%);flex-shrink:0;}' +
+      '.nk-mp-header-left{display:flex;align-items:center;gap:8px;color:#fff;}' +
+      '.nk-mp-title{font-size:16px;font-weight:800;color:#fff;letter-spacing:-0.02em;}' +
+      '.nk-mp-logo-now{background:linear-gradient(135deg,#fff 0%,#B8C4D4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}' +
+      '.nk-mp-logo-ai{background:linear-gradient(90deg,#00F0C0,#00D4AA,#0F4C81,#00D4AA,#00F0C0);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:nkMpShimmer 4s ease-in-out infinite;}' +
+      '.nk-mp-logo-kit{background:linear-gradient(135deg,#A0AEBE 0%,#6B7A8E 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}' +
+      '.nk-mp-logo-suffix{font-weight:400;font-size:0.75em;-webkit-text-fill-color:rgba(255,255,255,0.5);letter-spacing:0.04em;}' +
+      '@keyframes nkMpShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}' +
+      '.nk-mp-header-actions{display:flex;gap:4px;}' +
+      '.nk-mp-hbtn{width:28px;height:28px;border:none;background:rgba(255,255,255,.12);' +
+        'color:#fff;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;' +
+        'justify-content:center;transition:background .2s;flex-shrink:0;}' +
+      '.nk-mp-hbtn:hover{background:rgba(255,255,255,.25);}' +
+
+      /* Body — scrollable */
+      '.nk-mp-body{flex:1;overflow-y:auto;overflow-x:hidden;}' +
+      '.nk-mp-body::-webkit-scrollbar{width:5px;}' +
+      '.nk-mp-body::-webkit-scrollbar-thumb{background:var(--nk-border);border-radius:3px;}' +
+
+      /* Section */
+      '.nk-mp-section{padding:12px 16px;border-bottom:1px solid var(--nk-border);}' +
+      '.nk-mp-section-title{font-size:10px;font-weight:600;color:var(--nk-text-dim);' +
+        'text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}' +
+
+      /* Instance row */
+      '.nk-mp-instance-row{display:flex;align-items:center;gap:8px;}' +
+      '.nk-mp-dot{width:8px;height:8px;border-radius:50%;background:#555;flex-shrink:0;}' +
+      '.nk-mp-dot.active{background:var(--nk-teal);box-shadow:0 0 6px rgba(0,212,170,.4);}' +
+      '.nk-mp-instance-name{font-size:13px;font-weight:600;color:var(--nk-text);}' +
+
+      /* Page info */
+      '.nk-mp-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}' +
+      '.nk-mp-info-item{display:flex;flex-direction:column;gap:2px;}' +
+      '.nk-mp-info-label{font-size:10px;color:var(--nk-text-dim);text-transform:uppercase;}' +
+      '.nk-mp-info-value{font-size:12px;color:var(--nk-teal);font-family:"JetBrains Mono",monospace;}' +
+      '.nk-mp-copyable{cursor:pointer;transition:color .15s;}' +
+      '.nk-mp-copyable:hover{color:#00F0C0;}' +
+
+      /* Quick actions */
+      '.nk-mp-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}' +
+      '.nk-mp-action{background:var(--nk-card);border:1px solid var(--nk-border);border-radius:6px;' +
+        'padding:8px 6px;color:var(--nk-text);font-size:11px;cursor:pointer;text-align:center;' +
+        'transition:border-color .2s,background .2s;font-family:inherit;white-space:nowrap;}' +
+      '.nk-mp-action:hover{border-color:var(--nk-teal);background:rgba(0,212,170,.05);}' +
+      '.nk-mp-action-icon{font-size:13px;display:block;margin-bottom:2px;}' +
+      '.nk-mp-action-wide{grid-column:1/-1;background:linear-gradient(135deg,var(--nk-navy),rgba(0,212,170,.15));border-color:var(--nk-teal);}' +
+
+      /* Toggles */
+      '.nk-mp-toggles{display:flex;flex-direction:column;gap:2px;}' +
+      '.nk-mp-toggle-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;}' +
+      '.nk-mp-toggle-label{font-size:12px;color:var(--nk-text);}' +
+      '.nk-mp-toggle{position:relative;width:36px;height:20px;display:inline-block;}' +
+      '.nk-mp-toggle input{opacity:0;width:0;height:0;}' +
+      '.nk-mp-toggle-slider{position:absolute;inset:0;background:#2a3548;border-radius:10px;cursor:pointer;transition:background .2s;}' +
+      '.nk-mp-toggle-slider::before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s;}' +
+      '.nk-mp-toggle input:checked+.nk-mp-toggle-slider{background:var(--nk-teal);}' +
+      '.nk-mp-toggle input:checked+.nk-mp-toggle-slider::before{transform:translateX(16px);}' +
+
+      /* Services */
+      '.nk-mp-service-row{display:flex;align-items:center;gap:8px;padding:4px 0;}' +
+      '.nk-mp-service-name{font-size:12px;color:var(--nk-text-dim);flex:1;}' +
+      '.nk-mp-service-status{font-size:11px;color:var(--nk-text-dim);}' +
+
+      /* Shortcuts — collapsible */
+      '.nk-mp-collapsible{cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;margin-bottom:0;}' +
+      '.nk-mp-collapsible:hover{color:var(--nk-teal);}' +
+      '.nk-mp-collapsible.expanded{margin-bottom:8px;}' +
+      '.nk-mp-chevron{font-size:10px;transition:transform .2s;display:inline-block;}' +
+      '.nk-mp-collapsible.expanded .nk-mp-chevron{transform:rotate(90deg);}' +
+      '.nk-mp-shortcuts{display:flex;flex-direction:column;gap:3px;}' +
+      '.nk-mp-shortcuts.collapsed{display:none;}' +
+      '.nk-mp-shortcut-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;}' +
+      '.nk-mp-shortcut-label{color:var(--nk-text-dim);font-size:11px;}' +
+      '.nk-mp-shortcut-keys{display:flex;gap:2px;}' +
+      '.nk-mp-shortcut-keys kbd{background:#1a2236;border:1px solid var(--nk-border);border-radius:3px;' +
+        'padding:1px 5px;font-size:10px;font-family:"JetBrains Mono",monospace;color:var(--nk-teal);}' +
+
+      /* Footer */
+      '.nk-mp-footer{padding:8px 16px;text-align:center;font-size:10px;color:var(--nk-text-dim);' +
+        'border-top:1px solid var(--nk-border);flex-shrink:0;}' +
+      '.nk-mp-footer a{color:var(--nk-teal);text-decoration:none;}' +
+      '.nk-mp-footer a:hover{text-decoration:underline;}' +
+
+      /* ── Light Theme ── */
+      'body.nowaikit-light .nk-mp{--nk-bg:#f8fafc;--nk-card:#ffffff;--nk-border:#e2e8f0;--nk-text:#1a202c;--nk-text-dim:#64748b;--nk-teal:#0D9488;--nk-navy:#0F4C81;' +
+        'box-shadow:-4px 0 20px rgba(0,0,0,.08);}' +
+      'body.nowaikit-light .nk-mp-action{background:#f8fafc;border-color:#e2e8f0;color:#1a202c;}' +
+      'body.nowaikit-light .nk-mp-action:hover{border-color:#0D9488;background:rgba(13,148,136,.05);}' +
+      'body.nowaikit-light .nk-mp-action-wide{background:linear-gradient(135deg,#0D9488,rgba(13,148,136,.12));color:#fff;border-color:#0D9488;}' +
+      'body.nowaikit-light .nk-mp-toggle-slider{background:#cbd5e1;}' +
+      'body.nowaikit-light .nk-mp-shortcut-keys kbd{background:#f1f5f9;border-color:#e2e8f0;color:#0D9488;}' +
+      'body.nowaikit-light .nk-mp-body::-webkit-scrollbar-thumb{background:#cbd5e1;}' +
+      'body.nowaikit-light .nk-mp-info-value{color:#0D9488;}' +
+      'body.nowaikit-light .nk-mp-dot.active{background:#0D9488;box-shadow:0 0 6px rgba(13,148,136,.4);}' +
+
+      /* Responsive */
+      '@media(max-width:520px){' +
+        '.nk-mp{width:100vw;right:-100vw;}' +
+        '.nk-mp.nk-mp-open{right:0;}' +
+        '.nk-mp.nk-mp-floating{top:0;right:0;width:100vw;height:100vh;border-radius:0;}' +
+      '}';
+
+    document.head.appendChild(s);
+  }
+
+  // ─── Expose Globals ─────────────────────────────────────────────
+
+  window.toggleMainPanel = togglePanel;
+  window.closeMainPanel = closePanel;
+
+})();