nowaikit-utils 1.1.0

package/popup/popup.js

@@ -0,0 +1,414 @@
+/**
+ * NowAIKit Utils — Popup Script
+ *
+ * Handles: instance detection, quick actions, feature toggles,
+ * integration status, and hierarchical saved-instance management.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Detect OS for modifier key labels
+  const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+  if (isMac) {
+    document.querySelectorAll('.mod-key').forEach((el) => {
+      el.textContent = '\u2318';
+    });
+  }
+
+  // ─── Theme Toggle ──────────────────────────────────────────────────
+  const themeBtn = document.getElementById('themeToggle');
+  const themeIcon = document.getElementById('themeIcon');
+  const sunSVG = '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>';
+  const moonSVG = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
+
+  function applyPopupTheme(theme) {
+    document.body.classList.toggle('light', theme === 'light');
+    if (themeIcon) themeIcon.innerHTML = theme === 'dark' ? sunSVG : moonSVG;
+    if (themeBtn) themeBtn.title = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+  }
+
+  // Load saved theme
+  chrome.storage.local.get({ nowaikitTheme: 'dark' }, (data) => {
+    applyPopupTheme(data.nowaikitTheme || 'dark');
+  });
+
+  if (themeBtn) {
+    themeBtn.addEventListener('click', () => {
+      const isLight = document.body.classList.contains('light');
+      const newTheme = isLight ? 'dark' : 'light';
+      chrome.storage.local.set({ nowaikitTheme: newTheme });
+      applyPopupTheme(newTheme);
+      // Also notify content script to update page theme
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0]?.id) chrome.tabs.sendMessage(tabs[0].id, { action: 'nowaikit-set-theme', theme: newTheme });
+      });
+    });
+  }
+
+  // ─── Collapsible Keyboard Shortcuts ──────────────────────────────────
+  const shortcutsToggle = document.getElementById('shortcutsToggle');
+  const shortcutsSection = document.getElementById('shortcutsSection');
+  if (shortcutsToggle && shortcutsSection) {
+    shortcutsToggle.addEventListener('click', () => {
+      const isCollapsed = shortcutsSection.classList.toggle('collapsed');
+      shortcutsToggle.classList.toggle('expanded', !isCollapsed);
+    });
+  }
+
+  // ─── Current Tab Detection ────────────────────────────────────────────
+
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    const tab = tabs[0];
+    if (!tab?.url) return;
+
+    const isServiceNow = tab.url.includes('.service-now.com') || tab.url.includes('.servicenow.com');
+    const statusDot = document.getElementById('statusDot');
+    const instanceName = document.getElementById('instanceName');
+
+    if (isServiceNow) {
+      statusDot.classList.add('active');
+      instanceName.textContent = new URL(tab.url).hostname.split('.')[0];
+
+      const doMatch = tab.url.match(/\/([a-z_][a-z0-9_]*)\.do(?:\?|#|$)/);
+      const sysIdMatch = tab.url.match(/[?&]sys_id=([a-f0-9]{32})/);
+      const listMatch = tab.url.match(/\/([a-z_][a-z0-9_]*)_list\.do/);
+      const wsMatch = tab.url.match(/\/now\/(?:sow|workspace)[^/]*\/(?:.*\/)?record\/([a-z_][a-z0-9_]*)\/([a-f0-9]{32})/);
+
+      const pageInfo = document.getElementById('pageInfo');
+      const tableEl = document.getElementById('tableName');
+      const sysIdEl = document.getElementById('sysId');
+
+      if (doMatch && sysIdMatch) {
+        pageInfo.style.display = 'block';
+        tableEl.textContent = doMatch[1];
+        sysIdEl.textContent = sysIdMatch[1].substring(0, 12) + '...';
+        sysIdEl.dataset.full = sysIdMatch[1];
+        tableEl.dataset.full = doMatch[1];
+      } else if (wsMatch) {
+        pageInfo.style.display = 'block';
+        tableEl.textContent = wsMatch[1];
+        sysIdEl.textContent = wsMatch[2].substring(0, 12) + '...';
+        sysIdEl.dataset.full = wsMatch[2];
+        tableEl.dataset.full = wsMatch[1];
+      } else if (listMatch) {
+        pageInfo.style.display = 'block';
+        tableEl.textContent = listMatch[1];
+        sysIdEl.textContent = 'N/A (list)';
+        tableEl.dataset.full = listMatch[1];
+      } else if (doMatch) {
+        pageInfo.style.display = 'block';
+        tableEl.textContent = doMatch[1];
+        sysIdEl.textContent = 'N/A';
+        tableEl.dataset.full = doMatch[1];
+      }
+
+      tableEl?.addEventListener('click', () => {
+        if (tableEl.dataset.full) {
+          navigator.clipboard.writeText(tableEl.dataset.full).then(() => {
+            const orig = tableEl.dataset.full;
+            tableEl.textContent = 'Copied!';
+            setTimeout(() => { tableEl.textContent = orig; }, 1000);
+          }).catch(() => { /* clipboard denied */ });
+        }
+      });
+      sysIdEl?.addEventListener('click', () => {
+        if (sysIdEl.dataset.full) {
+          navigator.clipboard.writeText(sysIdEl.dataset.full).then(() => {
+            sysIdEl.textContent = 'Copied!';
+            setTimeout(() => { sysIdEl.textContent = sysIdEl.dataset.full.substring(0, 12) + '...'; }, 1000);
+          }).catch(() => { /* clipboard denied */ });
+        }
+      });
+    } else {
+      instanceName.textContent = 'Not a ServiceNow page';
+    }
+  });
+
+  // ─── Quick Actions ────────────────────────────────────────────────────
+
+  function sendAction(action) {
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      if (tabs[0]?.id) chrome.tabs.sendMessage(tabs[0].id, { action });
+    });
+  }
+
+  document.getElementById('btnCopySysId').addEventListener('click', () => sendAction('nowaikit-copy-sysid'));
+  document.getElementById('btnCopyUrl').addEventListener('click', () => sendAction('nowaikit-copy-record-url'));
+  document.getElementById('btnOpenList').addEventListener('click', () => sendAction('nowaikit-open-list'));
+  document.getElementById('btnViewXml').addEventListener('click', () => sendAction('nowaikit-xml-view'));
+  document.getElementById('btnViewJson').addEventListener('click', () => sendAction('nowaikit-json-view'));
+  document.getElementById('btnSchema').addEventListener('click', () => sendAction('nowaikit-open-schema'));
+  document.getElementById('btnSwitchNode').addEventListener('click', () => sendAction('nowaikit-switch-node'));
+  document.getElementById('btnCodeTemplates').addEventListener('click', () => sendAction('nowaikit-open-code-templates'));
+  document.getElementById('btnAISidebar').addEventListener('click', () => sendAction('nowaikit-toggle-ai-sidebar'));
+  document.getElementById('btnMainPanel').addEventListener('click', () => sendAction('nowaikit-toggle-main-panel'));
+
+  // ─── Integration Status ───────────────────────────────────────────────
+
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    if (!tabs[0]?.id) return;
+    chrome.tabs.sendMessage(tabs[0].id, { action: 'nowaikit-get-bridge-status' }, (response) => {
+      const builderDot = document.getElementById('builderDot');
+      const builderStatus = document.getElementById('builderStatus');
+      const mcpDot = document.getElementById('mcpDot');
+      const mcpStatus = document.getElementById('mcpStatus');
+
+      if (chrome.runtime.lastError || !response) {
+        builderStatus.textContent = 'Not detected';
+        mcpStatus.textContent = 'Not available';
+        return;
+      }
+      if (response.connected) {
+        builderDot.style.background = 'var(--teal)';
+        builderDot.style.boxShadow = '0 0 4px rgba(0,212,170,0.4)';
+        builderStatus.textContent = response.instanceName || 'Connected';
+        builderStatus.style.color = 'var(--teal)';
+        mcpDot.style.background = 'var(--teal)';
+        mcpDot.style.boxShadow = '0 0 4px rgba(0,212,170,0.4)';
+        mcpStatus.textContent = 'Available';
+        mcpStatus.style.color = 'var(--teal)';
+      } else {
+        builderStatus.textContent = 'Not running';
+        mcpStatus.textContent = 'Not available';
+      }
+    });
+  });
+
+  // ─── Feature Toggles ─────────────────────────────────────────────────
+
+  const toggleMap = {
+    toggleTechNames: 'showTechnicalNames',
+    toggleUpdateSet: 'showUpdateSetBanner',
+    toggleFieldCopy: 'enableFieldCopy',
+    toggleQuickNav: 'enableQuickNav',
+  };
+
+  chrome.storage.sync.get({
+    showTechnicalNames: false,
+    showUpdateSetBanner: false,
+    enableFieldCopy: false,
+    enableQuickNav: false,
+  }, (settings) => {
+    for (const [toggleId, key] of Object.entries(toggleMap)) {
+      const el = document.getElementById(toggleId);
+      if (el) el.checked = settings[key];
+    }
+  });
+
+  for (const [toggleId, key] of Object.entries(toggleMap)) {
+    const el = document.getElementById(toggleId);
+    if (el) {
+      el.addEventListener('change', () => {
+        chrome.storage.sync.set({ [key]: el.checked });
+      });
+    }
+  }
+
+  // ─── Saved Instances — Hierarchical Tree ──────────────────────────────
+
+  let collapsedState = {};
+
+  function escapeHtml(str) {
+    const d = document.createElement('div');
+    d.textContent = str;
+    return d.innerHTML;
+  }
+
+  /** Validate an instance URL slug is safe (alphanumeric, hyphens, underscores only) */
+  function isValidInstanceSlug(slug) {
+    return /^[a-zA-Z0-9][a-zA-Z0-9_-]*$/.test(slug) && slug.length <= 100;
+  }
+
+  function loadInstances() {
+    chrome.storage.sync.get({ savedInstances: [] }, (syncData) => {
+      chrome.storage.local.get({ collapsedGroups: {} }, (localData) => {
+        collapsedState = localData.collapsedGroups || {};
+        renderTree(syncData.savedInstances);
+        updateSuggestions(syncData.savedInstances);
+      });
+    });
+  }
+
+  function saveCollapsedState() {
+    chrome.storage.local.set({ collapsedGroups: collapsedState });
+  }
+
+  function toggleCollapse(key) {
+    collapsedState[key] = !collapsedState[key];
+    saveCollapsedState();
+    loadInstances();
+  }
+
+  function updateSuggestions(instances) {
+    const groups = new Set();
+    instances.forEach((inst) => {
+      if (inst.group) groups.add(inst.group);
+    });
+
+    const gList = document.getElementById('groupSuggestions');
+    gList.innerHTML = '';
+    groups.forEach((g) => { const o = document.createElement('option'); o.value = g; gList.appendChild(o); });
+  }
+
+  function renderTree(instances) {
+    const tree = document.getElementById('instanceTree');
+    tree.innerHTML = '';
+
+    if (instances.length === 0) {
+      tree.innerHTML = '<div class="empty-state"><span>&#128203;</span>No saved instances yet.<br>Add your ServiceNow instances below.</div>';
+      return;
+    }
+
+    // Build hierarchy: { groupName: [instances] }
+    const grouped = {};
+    const ungrouped = [];
+
+    instances.forEach((inst, idx) => {
+      const item = { ...inst, _idx: idx };
+      if (inst.group) {
+        if (!grouped[inst.group]) grouped[inst.group] = [];
+        grouped[inst.group].push(item);
+      } else {
+        ungrouped.push(item);
+      }
+    });
+
+    // Render grouped
+    const groupNames = Object.keys(grouped).sort();
+    for (const groupName of groupNames) {
+      const insts = grouped[groupName];
+      const isCollapsed = !!collapsedState[groupName];
+
+      // Group header
+      const gh = document.createElement('div');
+      gh.className = 'inst-group';
+      gh.innerHTML =
+        '<span class="inst-chevron' + (isCollapsed ? ' collapsed' : '') + '">\u25BE</span>' +
+        '<span class="inst-group-icon">\uD83D\uDCC1</span>' +
+        '<span class="inst-group-name">' + escapeHtml(groupName) + '</span>' +
+        '<span class="inst-group-count">' + insts.length + '</span>';
+      gh.addEventListener('click', () => toggleCollapse(groupName));
+      tree.appendChild(gh);
+
+      // Children container
+      const children = document.createElement('div');
+      children.className = 'inst-children' + (isCollapsed ? ' collapsed' : '');
+      insts.forEach((inst) => children.appendChild(createInstanceRow(inst, 1)));
+      tree.appendChild(children);
+    }
+
+    // Render ungrouped
+    if (ungrouped.length > 0 && groupNames.length > 0) {
+      // Add a subtle separator if there are also groups
+      const sep = document.createElement('div');
+      sep.style.cssText = 'height:1px;background:var(--border);margin:4px 0;';
+      tree.appendChild(sep);
+    }
+    ungrouped.forEach((inst) => tree.appendChild(createInstanceRow(inst, 0)));
+  }
+
+  function createInstanceRow(inst, depth) {
+    const row = document.createElement('div');
+    row.className = 'inst-row depth-' + depth;
+
+    const envLabel = inst.env || 'other';
+    const display = inst.alias || inst.url;
+
+    row.innerHTML =
+      '<div class="inst-env-dot ' + escapeHtml(envLabel) + '"></div>' +
+      '<div class="inst-details">' +
+        '<div class="inst-name">' + escapeHtml(display) + '</div>' +
+        (inst.alias ? '<div class="inst-alias">' + escapeHtml(inst.url) + '</div>' : '') +
+      '</div>' +
+      '<span class="inst-env-badge ' + escapeHtml(envLabel) + '">' + escapeHtml(envLabel) + '</span>' +
+      '<div class="inst-actions">' +
+        '<button class="btn-open" title="Open in new tab">\u2197</button>' +
+        '<button class="btn-remove" title="Remove">\u00D7</button>' +
+      '</div>';
+
+    // Open instance (validate URL slug first)
+    row.querySelector('.btn-open').addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (isValidInstanceSlug(inst.url)) {
+        window.open('https://' + inst.url + '.service-now.com', '_blank');
+      }
+    });
+
+    // Remove instance
+    row.querySelector('.btn-remove').addEventListener('click', (e) => {
+      e.stopPropagation();
+      removeInstance(inst._idx);
+    });
+
+    // Click row to open (validate URL slug first)
+    row.addEventListener('click', () => {
+      if (isValidInstanceSlug(inst.url)) {
+        window.open('https://' + inst.url + '.service-now.com', '_blank');
+      }
+    });
+
+    return row;
+  }
+
+  function removeInstance(idx) {
+    chrome.storage.sync.get({ savedInstances: [] }, (data) => {
+      data.savedInstances.splice(idx, 1);
+      chrome.storage.sync.set({ savedInstances: data.savedInstances }, loadInstances);
+    });
+  }
+
+  // ─── Add Instance Form ────────────────────────────────────────────────
+
+  document.getElementById('btnAddInstance').addEventListener('click', () => {
+    const form = document.getElementById('addInstanceForm');
+    form.style.display = form.style.display === 'flex' ? 'none' : 'flex';
+    if (form.style.display === 'flex') {
+      document.getElementById('newInstanceUrl').focus();
+    }
+  });
+
+  document.getElementById('btnSaveInstance').addEventListener('click', saveNewInstance);
+
+  // Enter key in any form field saves
+  document.getElementById('addInstanceForm').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') saveNewInstance();
+  });
+
+  function saveNewInstance() {
+    const url = document.getElementById('newInstanceUrl').value.trim();
+    if (!url) return;
+
+    // Validate the instance URL slug
+    if (!isValidInstanceSlug(url)) {
+      document.getElementById('newInstanceUrl').style.borderColor = '#f87171';
+      setTimeout(() => { document.getElementById('newInstanceUrl').style.borderColor = ''; }, 1500);
+      return;
+    }
+
+    const env = document.getElementById('newInstanceEnv').value;
+    const alias = document.getElementById('newInstanceAlias').value.trim();
+    const group = document.getElementById('newInstanceGroup').value.trim();
+
+    const instance = { url, env, alias };
+    if (group) instance.group = group;
+
+    chrome.storage.sync.get({ savedInstances: [] }, (data) => {
+      // Prevent duplicates
+      if (data.savedInstances.some((i) => i.url === url)) {
+        document.getElementById('newInstanceUrl').style.borderColor = '#f87171';
+        setTimeout(() => { document.getElementById('newInstanceUrl').style.borderColor = ''; }, 1500);
+        return;
+      }
+
+      data.savedInstances.push(instance);
+      chrome.storage.sync.set({ savedInstances: data.savedInstances }, () => {
+        loadInstances();
+        document.getElementById('addInstanceForm').style.display = 'none';
+        document.getElementById('newInstanceUrl').value = '';
+        document.getElementById('newInstanceAlias').value = '';
+        document.getElementById('newInstanceGroup').value = '';
+      });
+    });
+  }
+
+  loadInstances();
+});