nowaikit-utils 1.1.0

package/content/ai-sidebar.js

@@ -0,0 +1,1198 @@
+/**
+ * NowAIKit Utils — AI Sidebar
+ * BYOK AI assistant for ServiceNow. Context-aware chat with quick actions.
+ */
+
+// ─── Shared Helpers (from content.js via window globals) ─────────
+function _showToast(msg, type) {
+  if (typeof window.showToast === 'function') window.showToast(msg, type);
+}
+function _escapeHtml(str) {
+  if (typeof window.escapeHtml === 'function') return window.escapeHtml(str);
+  var div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// ─── API Key Encryption ─────────────────────────────────────────
+// Encrypts API keys before storing in chrome.storage.local using AES-GCM.
+// Key is derived from the extension ID via PBKDF2 — prevents casual snooping
+// of stored credentials while remaining transparent to the user.
+
+async function _deriveEncryptionKey() {
+  var keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    new TextEncoder().encode(chrome.runtime.id || 'nowaikit-utils'),
+    'PBKDF2',
+    false,
+    ['deriveKey']
+  );
+  return crypto.subtle.deriveKey(
+    { name: 'PBKDF2', salt: new TextEncoder().encode('nowaikit-utils-v1'), iterations: 100000, hash: 'SHA-256' },
+    keyMaterial,
+    { name: 'AES-GCM', length: 256 },
+    false,
+    ['encrypt', 'decrypt']
+  );
+}
+
+async function encryptApiKey(plaintext) {
+  if (!plaintext) return '';
+  try {
+    var key = await _deriveEncryptionKey();
+    var iv = crypto.getRandomValues(new Uint8Array(12));
+    var encrypted = await crypto.subtle.encrypt(
+      { name: 'AES-GCM', iv: iv },
+      key,
+      new TextEncoder().encode(plaintext)
+    );
+    var combined = new Uint8Array(iv.length + encrypted.byteLength);
+    combined.set(iv);
+    combined.set(new Uint8Array(encrypted), iv.length);
+    return 'enc:' + btoa(String.fromCharCode.apply(null, combined));
+  } catch (e) {
+    // Fallback: return plaintext if crypto unavailable
+    return plaintext;
+  }
+}
+
+async function decryptApiKey(stored) {
+  if (!stored) return '';
+  // Not encrypted (legacy or fallback)
+  if (!stored.startsWith('enc:')) return stored;
+  try {
+    var key = await _deriveEncryptionKey();
+    var combined = Uint8Array.from(atob(stored.slice(4)), function(c) { return c.charCodeAt(0); });
+    var iv = combined.slice(0, 12);
+    var ciphertext = combined.slice(12);
+    var decrypted = await crypto.subtle.decrypt(
+      { name: 'AES-GCM', iv: iv },
+      key,
+      ciphertext
+    );
+    return new TextDecoder().decode(decrypted);
+  } catch (e) {
+    // Decryption failed — corrupted or wrong extension context
+    return '';
+  }
+}
+
+// ─── State ──────────────────────────────────────────────────────
+let aiSidebarOpen = false;
+let aiSidebarEl = null;
+let aiConversation = []; // Array of { role: 'user'|'assistant', content: string }
+let aiPort = null; // chrome.runtime port for streaming
+let aiStreaming = false;
+
+// ─── System Prompt ──────────────────────────────────────────────
+const SN_SYSTEM_PROMPT = `You are NowAIKit Utils — ServiceNow AI Assistant, an expert ServiceNow platform assistant embedded directly in the user's browser.
+
+You have deep expertise in:
+- GlideRecord, GlideAjax, GlideSystem, GlideAggregate, GlideDateTime, GlideQuery APIs
+- Business Rules (before, after, async), Client Scripts (onChange, onLoad, onSubmit, onCellEdit)
+- Script Includes, UI Policies, UI Actions, UI Pages, Processors
+- ACLs, roles, security best practices, and scoped application development
+- Flow Designer, IntegrationHub, Scripted REST APIs
+- Service Portal (sp_widget), Now Experience (UIB), Angular providers
+- CMDB, ITSM, ITOM, CSM, HR, SecOps modules
+- Performance optimization (query efficiency, indexing, caching)
+- Upgrade best practices, technical debt identification
+
+Context:
+- You are running inside the user's ServiceNow browser session
+- You can see the current page context (table, record, fields)
+- When the user asks about "this record" or "this table", refer to the context provided
+- Always provide code examples following ServiceNow best practices
+- Use getValue/setValue in scoped apps, prefer GlideQuery where applicable
+- Include null checks, setLimit, and proper error handling in generated code`;
+
+// ─── Context Extraction ─────────────────────────────────────────
+
+function isBridgeConnected() {
+  return typeof getBridgeStatus === 'function' && getBridgeStatus().connected;
+}
+
+function getBridgeInfo() {
+  if (!isBridgeConnected()) return null;
+  return getBridgeStatus();
+}
+
+async function gatherPageContext() {
+  // Read shared state from content.js (exposed on window.nowaikitState)
+  var _ns = window.nowaikitState || {};
+
+  // Build a context object from the current ServiceNow page
+  const ctx = {
+    table: _ns.currentTable || '',
+    sysId: _ns.currentSysId || '',
+    instance: _ns.instanceUrl ? new URL(_ns.instanceUrl).hostname.split('.')[0] : '',
+    isForm: _ns.isForm || false,
+    isList: _ns.isList || false,
+    url: window.location.href,
+    fields: {},
+    scripts: [],
+    schemaInfo: null,
+    fullRecord: null,
+  };
+
+  // Gather form field values if on a form
+  if (ctx.isForm && typeof g_form !== 'undefined') {
+    try {
+      // Get all field names from the form
+      const formFields = document.querySelectorAll('input[id^="sys_display."], input[name]:not([type="hidden"]), select[name], textarea[name]');
+      formFields.forEach(function(el) {
+        const name = el.name || el.id.replace('sys_display.', '');
+        if (name && !name.startsWith('ni.') && !name.startsWith('sys_display.')) {
+          ctx.fields[name] = (el.value || '').substring(0, 500);
+        }
+      });
+    } catch (e) {
+      // Silently fail — form may not be fully loaded
+    }
+  }
+
+  // Gather script content from any open script editors
+  try {
+    // CodeMirror instances
+    document.querySelectorAll('.CodeMirror').forEach(function(cm) {
+      if (cm.CodeMirror) {
+        const val = cm.CodeMirror.getValue();
+        if (val && val.trim().length > 0) {
+          ctx.scripts.push(val.substring(0, 5000));
+        }
+      }
+    });
+    // Textarea script fields
+    document.querySelectorAll('textarea[id*="script"], textarea[name="script"], textarea[name="condition"]').forEach(function(ta) {
+      if (ta.value && ta.value.trim().length > 0 && ctx.scripts.indexOf(ta.value.substring(0, 5000)) === -1) {
+        ctx.scripts.push(ta.value.substring(0, 5000));
+      }
+    });
+  } catch (e) {
+    // Silently fail
+  }
+
+  // Enrich context with bridge data when available
+  if (isBridgeConnected()) {
+    // Fetch table schema if we have a table name
+    if (ctx.table && typeof bridgeGetTableSchema === 'function') {
+      try {
+        ctx.schemaInfo = await bridgeGetTableSchema(ctx.table);
+      } catch (e) {
+        // Bridge call failed — proceed with DOM-only context
+      }
+    }
+
+    // Fetch full record data if we have a table and sys_id
+    if (ctx.table && ctx.sysId && typeof bridgeGetRecord === 'function') {
+      try {
+        ctx.fullRecord = await bridgeGetRecord(ctx.table, ctx.sysId);
+      } catch (e) {
+        // Bridge call failed — proceed with DOM-only context
+      }
+    }
+  }
+
+  return ctx;
+}
+
+function buildContextMessage(ctx) {
+  // Build a context string to inject into the conversation
+  var parts = [];
+  if (ctx.instance) parts.push('Instance: ' + ctx.instance);
+  if (ctx.table) parts.push('Table: ' + ctx.table);
+  if (ctx.sysId) parts.push('sys_id: ' + ctx.sysId);
+  if (ctx.isForm) parts.push('Page type: Form');
+  if (ctx.isList) parts.push('Page type: List');
+
+  // Add table schema info from bridge (enriched context)
+  if (ctx.schemaInfo) {
+    try {
+      var columns = ctx.schemaInfo.columns || ctx.schemaInfo.fields || [];
+      var colCount = columns.length;
+      var keyColumns = columns.slice(0, 25).map(function(col) {
+        var name = col.name || col.element || col.column_label || '';
+        var type = col.type || col.internal_type || '';
+        return name + (type ? ' (' + type + ')' : '');
+      });
+      parts.push('Table Schema: ' + ctx.table + ' has ' + colCount + ' columns including: ' + keyColumns.join(', '));
+    } catch (e) {
+      // Schema data in unexpected format — skip
+    }
+  }
+
+  // Add full record data from bridge (enriched context)
+  if (ctx.fullRecord) {
+    try {
+      var recordEntries = Object.entries(ctx.fullRecord);
+      if (recordEntries.length > 0) {
+        var recordLines = recordEntries
+          .filter(function(e) { return e[1] !== null && e[1] !== undefined && String(e[1]).length > 0; })
+          .slice(0, 40)
+          .map(function(e) { return '  ' + e[0] + ': ' + String(e[1]).substring(0, 500); });
+        if (recordLines.length > 0) {
+          parts.push('Full Record Data:\n' + recordLines.join('\n'));
+        }
+      }
+    } catch (e) {
+      // Record data in unexpected format — skip
+    }
+  }
+
+  // Add key field values (limit to avoid context bloat)
+  var fieldEntries = Object.entries(ctx.fields);
+  if (fieldEntries.length > 0) {
+    var fieldLines = fieldEntries
+      .filter(function(e) { return e[1] && e[1].length > 0; })
+      .slice(0, 20)
+      .map(function(e) { return '  ' + e[0] + ': ' + e[1]; });
+    if (fieldLines.length > 0) {
+      parts.push('Fields:\n' + fieldLines.join('\n'));
+    }
+  }
+
+  // Add script content
+  if (ctx.scripts.length > 0) {
+    ctx.scripts.forEach(function(script, i) {
+      parts.push('Script ' + (i + 1) + ':\n```javascript\n' + script + '\n```');
+    });
+  }
+
+  return parts.length > 0 ? '[Current Page Context]\n' + parts.join('\n') : '';
+}
+
+// ─── Quick Actions ──────────────────────────────────────────────
+
+const QUICK_ACTIONS = [
+  { id: 'explain', icon: '\u{1F4A1}', label: 'Explain', prompt: 'Explain this script in detail. What does it do, what events trigger it, and are there any issues?' },
+  { id: 'summarize', icon: '\u{1F4CB}', label: 'Summarize', prompt: 'Summarize this record. What is it about, what is its current state, and what are the key details?' },
+  { id: 'review', icon: '\u{1F50D}', label: 'Review', prompt: 'Review this code for security issues, performance problems, and best practice violations. Provide specific fixes.' },
+  { id: 'generate', icon: '\u26A1', label: 'Generate', prompt: null }, // opens sub-menu or input
+  { id: 'fix', icon: '\u{1F527}', label: 'Fix Issues', prompt: 'Identify and fix all issues in this script. Return the corrected code with explanations of each change.' },
+  { id: 'optimize', icon: '\u{1F680}', label: 'Optimize', prompt: 'Optimize this script for performance. Identify inefficient patterns and provide an optimized version.' },
+  { id: 'query', icon: '\u{1F50D}', label: 'Query', prompt: 'Help me write a GlideRecord query for this table. Show me how to query {table} with common filters.' },
+  { id: 'instance', icon: '\u{1F4CA}', label: 'Health', prompt: 'Show me the current instance health metrics and any issues.' },
+];
+
+// ─── Sidebar UI ─────────────────────────────────────────────────
+
+var aiIsFloating = false;
+
+function initAISidebar() {
+  // Create the sidebar element but don't show it yet
+  if (document.getElementById('nowaikit-ai-sidebar')) return;
+
+  aiSidebarEl = document.createElement('div');
+  aiSidebarEl.id = 'nowaikit-ai-sidebar';
+  aiSidebarEl.className = 'nowaikit-ai-sidebar';
+  aiSidebarEl.innerHTML = buildSidebarHTML();
+
+  // Add resize handle on left edge
+  var resizeHandle = document.createElement('div');
+  resizeHandle.className = 'nowaikit-ai-resize-handle';
+  aiSidebarEl.appendChild(resizeHandle);
+  initResizeHandle(resizeHandle);
+
+  document.body.appendChild(aiSidebarEl);
+
+  // Create the toggle button (floating)
+  var toggleBtn = document.createElement('button');
+  toggleBtn.id = 'nowaikit-ai-toggle';
+  toggleBtn.className = 'nowaikit-ai-toggle';
+  toggleBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
+  var _mod = (window.nowaikitState || {}).isMac ? 'Cmd' : 'Ctrl';
+  toggleBtn.title = 'NowAIKit Utils — AI Assistant (' + _mod + '+Shift+A)';
+  toggleBtn.addEventListener('click', toggleAISidebar);
+  document.body.appendChild(toggleBtn);
+
+  // Init floating mode drag
+  initFloatingDrag();
+
+  // Bind events
+  bindSidebarEvents();
+}
+
+function initResizeHandle(handle) {
+  var isResizing = false;
+  var startX = 0;
+  var startWidth = 0;
+
+  handle.addEventListener('mousedown', function(e) {
+    if (aiIsFloating) return;
+    isResizing = true;
+    startX = e.clientX;
+    startWidth = aiSidebarEl.offsetWidth;
+    handle.classList.add('active');
+    e.preventDefault();
+  });
+
+  document.addEventListener('mousemove', function(e) {
+    if (!isResizing) return;
+    var diff = startX - e.clientX;
+    var newWidth = Math.max(360, Math.min(startWidth + diff, window.innerWidth * 0.8));
+    aiSidebarEl.style.width = newWidth + 'px';
+  });
+
+  document.addEventListener('mouseup', function() {
+    if (isResizing) {
+      isResizing = false;
+      handle.classList.remove('active');
+    }
+  });
+}
+
+function initFloatingDrag() {
+  var isDragging = false;
+  var dragOffsetX = 0;
+  var dragOffsetY = 0;
+
+  document.addEventListener('mousedown', function(e) {
+    if (!aiIsFloating || !aiSidebarEl) return;
+    var header = aiSidebarEl.querySelector('.nowaikit-ai-header');
+    if (!header || !header.contains(e.target)) return;
+    // Don't drag if clicking buttons
+    if (e.target.closest('.nowaikit-ai-btn-icon')) return;
+    isDragging = true;
+    var rect = aiSidebarEl.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));
+    aiSidebarEl.style.left = x + 'px';
+    aiSidebarEl.style.top = y + 'px';
+    aiSidebarEl.style.right = 'auto';
+  });
+
+  document.addEventListener('mouseup', function() {
+    isDragging = false;
+  });
+}
+
+function toggleFloatingMode() {
+  if (!aiSidebarEl) return;
+  aiIsFloating = !aiIsFloating;
+  aiSidebarEl.classList.toggle('floating', aiIsFloating);
+
+  var floatBtn = document.getElementById('nowaikit-ai-float');
+  if (floatBtn) {
+    floatBtn.title = aiIsFloating ? 'Dock to side' : 'Float window';
+    floatBtn.innerHTML = aiIsFloating
+      ? '<svg width="16" height="16" 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="16" height="16" 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 (!aiIsFloating) {
+    // Reset to docked position
+    aiSidebarEl.style.left = '';
+    aiSidebarEl.style.top = '';
+    aiSidebarEl.style.right = '';
+    aiSidebarEl.style.width = '';
+    aiSidebarEl.style.height = '';
+  }
+}
+
+function buildBridgeStatusHTML() {
+  var connected = isBridgeConnected();
+  var info = connected ? getBridgeInfo() : null;
+  var instanceName = (info && info.instanceName) ? info.instanceName : '';
+  var dotColor = connected ? '#00C853' : '#9e9e9e';
+  var label = connected ? ('Connected to ' + instanceName) : 'Standalone';
+  return '<div class="nowaikit-ai-bridge-status" id="nowaikit-ai-bridge-status">' +
+    '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + dotColor + ';margin-right:6px;"></span>' +
+    '<span style="font-size:11px;opacity:.75;">' + label + '</span>' +
+  '</div>';
+}
+
+function buildSidebarHTML() {
+  return '' +
+    '<div class="nowaikit-ai-header">' +
+      '<div class="nowaikit-ai-header-left">' +
+        '<svg width="22" height="22" viewBox="0 0 512 512" style="flex-shrink:0"><defs><linearGradient id="nkAiHdrGrad" 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(#nkAiHdrGrad)"/><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="nowaikit-ai-title"><span class="nk-ai-logo-now">Now</span><span class="nk-ai-logo-ai">AI</span><span class="nk-ai-logo-kit">Kit</span><span class="nk-ai-logo-suffix"> Assistant</span></span>' +
+      '</div>' +
+      '<div class="nowaikit-ai-header-actions">' +
+        '<button class="nowaikit-ai-btn-icon" id="nowaikit-ai-theme" title="Toggle light/dark mode">' +
+          '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/></svg>' +
+        '</button>' +
+        '<button class="nowaikit-ai-btn-icon" id="nowaikit-ai-popout" title="Open in new window">' +
+          '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>' +
+        '</button>' +
+        '<button class="nowaikit-ai-btn-icon" id="nowaikit-ai-float" title="Float window">' +
+          '<svg width="16" height="16" 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="nowaikit-ai-btn-icon" id="nowaikit-ai-clear" title="Clear conversation">' +
+          '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>' +
+        '</button>' +
+        '<button class="nowaikit-ai-btn-icon" id="nowaikit-ai-settings" title="AI Settings">' +
+          '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>' +
+        '</button>' +
+        '<button class="nowaikit-ai-btn-icon" id="nowaikit-ai-close" title="Close (Esc)">' +
+          '<svg width="16" height="16" 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>' +
+    buildBridgeStatusHTML() +
+    // Settings panel (hidden by default)
+    '<div class="nowaikit-ai-settings-panel" id="nowaikit-ai-settings-panel" style="display:none;">' +
+      '<div class="nowaikit-ai-setting-group">' +
+        '<label class="nowaikit-ai-label">AI Provider</label>' +
+        '<select id="nowaikit-ai-provider" class="nowaikit-ai-select">' +
+          '<option value="openai">OpenAI (GPT)</option>' +
+          '<option value="anthropic">Anthropic (Claude)</option>' +
+          '<option value="google">Google (Gemini)</option>' +
+          '<option value="openrouter">OpenRouter</option>' +
+          '<option value="ollama">Ollama (Local)</option>' +
+        '</select>' +
+      '</div>' +
+      '<div class="nowaikit-ai-setting-group">' +
+        '<label class="nowaikit-ai-label">API Key</label>' +
+        '<input type="password" id="nowaikit-ai-apikey" class="nowaikit-ai-input" placeholder="sk-... or paste your API key">' +
+        '<button id="nowaikit-ai-key-link" class="nowaikit-ai-key-link" style="background:none;border:none;color:#00D4AA;font-size:11px;cursor:pointer;padding:4px 0;text-decoration:underline;display:block;margin-top:4px;">Get your API key &rarr;</button>' +
+      '</div>' +
+      '<div class="nowaikit-ai-setting-group">' +
+        '<label class="nowaikit-ai-label">Model</label>' +
+        '<select id="nowaikit-ai-model" class="nowaikit-ai-select">' +
+          '<option value="gpt-5.4">GPT-5.4</option>' +
+          '<option value="gpt-5.4-mini">GPT-5.4 Mini</option>' +
+          '<option value="claude-sonnet-4-6">Claude Sonnet 4.6</option>' +
+          '<option value="claude-opus-4-6">Claude Opus 4.6</option>' +
+          '<option value="gemini-3.1-pro-preview">Gemini 3.1 Pro</option>' +
+          '<option value="gemini-2.5-flash">Gemini 2.5 Flash</option>' +
+        '</select>' +
+      '</div>' +
+      '<div class="nowaikit-ai-setting-group">' +
+        '<label class="nowaikit-ai-label">Ollama URL <span style="font-size:10px;opacity:.6;">(only for Ollama)</span></label>' +
+        '<input type="text" id="nowaikit-ai-ollama-url" class="nowaikit-ai-input" placeholder="http://localhost:11434" value="http://localhost:11434">' +
+      '</div>' +
+      '<button class="nowaikit-ai-save-btn" id="nowaikit-ai-save-settings">Save Settings</button>' +
+    '</div>' +
+    // Chat messages area
+    '<div class="nowaikit-ai-messages" id="nowaikit-ai-messages">' +
+      '<div class="nowaikit-ai-welcome">' +
+        '<div class="nowaikit-ai-welcome-icon">' +
+          '<svg width="32" height="32" viewBox="0 0 512 512"><defs><linearGradient id="naikGrad" 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><linearGradient id="naikShim" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="white" stop-opacity="0"/><stop offset="50%" stop-color="white" stop-opacity="0.08"/><stop offset="100%" stop-color="white" stop-opacity="0"/></linearGradient><clipPath id="naikClip"><rect width="512" height="512" rx="128"/></clipPath></defs><rect width="512" height="512" rx="128" fill="url(#naikGrad)"/><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"/><animateTransform attributeName="transform" type="scale" values="1;1.15;1" dur="2s" repeatCount="indefinite" additive="sum"/></path><line x1="34" y1="19" x2="34" y2="28.5" stroke="#fff" stroke-width="1.8" opacity="0.5"><animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" repeatCount="indefinite"/></line><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"/><animate attributeName="r" values="4.5;5.5;4.5" dur="2s" repeatCount="indefinite" begin="0.3s"/></circle></g><rect x="-512" y="0" width="512" height="512" fill="url(#naikShim)" clip-path="url(#naikClip)"><animateTransform attributeName="transform" type="translate" values="0,0;1024,0" dur="4s" repeatCount="indefinite"/></rect></svg>' +
+        '</div>' +
+        '<div class="nowaikit-ai-welcome-title"><span class="nk-ai-logo-now">Now</span><span class="nk-ai-logo-ai">AI</span><span class="nk-ai-logo-kit">Kit</span><span class="nk-ai-logo-suffix"> Assistant</span></div>' +
+        '<div class="nowaikit-ai-welcome-sub">ServiceNow AI Assistant — Ask anything about this page, generate scripts, review code, or get best practices.</div>' +
+        '<div class="nowaikit-ai-welcome-hint">Tip: Configure your API key in Settings (gear icon) to get started.</div>' +
+      '</div>' +
+    '</div>' +
+    // Quick actions
+    '<div class="nowaikit-ai-quick-actions" id="nowaikit-ai-quick-actions">' +
+      QUICK_ACTIONS.map(function(a) {
+        return '<button class="nowaikit-ai-quick-btn" data-action-id="' + a.id + '" title="' + a.label + '">' +
+          '<span class="nowaikit-ai-quick-icon">' + a.icon + '</span>' +
+          '<span>' + a.label + '</span>' +
+        '</button>';
+      }).join('') +
+    '</div>' +
+    // Input area
+    '<div class="nowaikit-ai-input-area">' +
+      '<div class="nowaikit-ai-input-wrapper">' +
+        '<textarea id="nowaikit-ai-input" class="nowaikit-ai-chat-input" placeholder="Ask about this record, script, or table..." rows="1"></textarea>' +
+        '<button class="nowaikit-ai-send-btn" id="nowaikit-ai-send" title="Send (Enter)">' +
+          '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>' +
+        '</button>' +
+      '</div>' +
+      '<div class="nowaikit-ai-input-hint">Enter to send &middot; Shift+Enter for new line &middot; ' + ((window.nowaikitState || {}).isMac ? 'Cmd' : 'Ctrl') + '+Shift+A to toggle</div>' +
+    '</div>';
+}
+
+function bindSidebarEvents() {
+  // Close button
+  document.getElementById('nowaikit-ai-close').addEventListener('click', function() {
+    toggleAISidebar();
+  });
+
+  // Theme toggle (dark/light)
+  document.getElementById('nowaikit-ai-theme').addEventListener('click', function() {
+    toggleAiTheme();
+  });
+
+  // Apply saved theme on load (uses shared theme key)
+  chrome.storage.local.get({ nowaikitTheme: 'dark' }, function(result) {
+    applyAiTheme(result.nowaikitTheme || 'dark');
+  });
+
+  // Float / Dock toggle
+  document.getElementById('nowaikit-ai-float').addEventListener('click', function() {
+    toggleFloatingMode();
+  });
+
+  // Pop-out: open AI sidebar in a standalone browser window
+  document.getElementById('nowaikit-ai-popout').addEventListener('click', function() {
+    var w = 520, h = Math.round(window.innerHeight * 0.75);
+    var left = window.screenX + window.innerWidth - w - 40;
+    var top = window.screenY + 60;
+    window.open(
+      chrome.runtime.getURL('ai-window.html'),
+      'nowaikit-ai-window',
+      'width=' + w + ',height=' + h + ',left=' + left + ',top=' + top + ',resizable=yes,scrollbars=no'
+    );
+  });
+
+  // Clear conversation
+  document.getElementById('nowaikit-ai-clear').addEventListener('click', function() {
+    aiConversation = [];
+    var msgsEl = document.getElementById('nowaikit-ai-messages');
+    msgsEl.innerHTML = buildWelcomeHTML();
+  });
+
+  // Settings toggle
+  document.getElementById('nowaikit-ai-settings').addEventListener('click', function() {
+    var panel = document.getElementById('nowaikit-ai-settings-panel');
+    panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+  });
+
+  // Save settings (encrypt API key before storage)
+  document.getElementById('nowaikit-ai-save-settings').addEventListener('click', async function() {
+    var provider = document.getElementById('nowaikit-ai-provider').value;
+    var apiKey = document.getElementById('nowaikit-ai-apikey').value;
+    var model = document.getElementById('nowaikit-ai-model').value;
+    var ollamaUrl = document.getElementById('nowaikit-ai-ollama-url').value;
+
+    // Encrypt the API key before storing
+    var encryptedKey = await encryptApiKey(apiKey);
+
+    chrome.storage.local.set({
+      aiProvider: provider,
+      aiApiKey: encryptedKey,
+      aiModel: model,
+      aiOllamaUrl: ollamaUrl,
+    }, function() {
+      _showToast('AI settings saved securely', 'success');
+      document.getElementById('nowaikit-ai-settings-panel').style.display = 'none';
+    });
+  });
+
+  // Load saved settings (decrypt API key from storage)
+  chrome.storage.local.get({
+    aiProvider: 'openai',
+    aiApiKey: '',
+    aiModel: 'gpt-5.4',
+    aiOllamaUrl: 'http://localhost:11434',
+  }, async function(settings) {
+    document.getElementById('nowaikit-ai-provider').value = settings.aiProvider;
+    // Decrypt the API key for display
+    var decryptedKey = await decryptApiKey(settings.aiApiKey);
+    document.getElementById('nowaikit-ai-apikey').value = decryptedKey;
+    document.getElementById('nowaikit-ai-model').value = settings.aiModel;
+    document.getElementById('nowaikit-ai-ollama-url').value = settings.aiOllamaUrl;
+    updateModelOptions(settings.aiProvider);
+    updateApiKeyLink(settings.aiProvider);
+  });
+
+  // Provider change updates model options and API key link
+  document.getElementById('nowaikit-ai-provider').addEventListener('change', function() {
+    updateModelOptions(this.value);
+    updateApiKeyLink(this.value);
+  });
+
+  // Send message
+  document.getElementById('nowaikit-ai-send').addEventListener('click', sendMessage);
+
+  // Input: Enter to send, Shift+Enter for newline, auto-resize
+  var inputEl = document.getElementById('nowaikit-ai-input');
+  inputEl.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  });
+  inputEl.addEventListener('input', function() {
+    this.style.height = 'auto';
+    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+  });
+
+  // Quick actions
+  document.querySelectorAll('.nowaikit-ai-quick-btn').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      var actionId = this.dataset.actionId;
+      var action = QUICK_ACTIONS.find(function(a) { return a.id === actionId; });
+      if (!action) return;
+
+      if (action.id === 'generate') {
+        // Focus input with a prompt prefix
+        var inputEl = document.getElementById('nowaikit-ai-input');
+        inputEl.value = 'Generate a ';
+        inputEl.focus();
+        inputEl.style.height = 'auto';
+        return;
+      }
+
+      // Handle "Health" quick action — fetch live data from bridge if connected
+      if (action.id === 'instance') {
+        handleHealthQuickAction();
+        return;
+      }
+
+      if (action.prompt) {
+        // Replace {table} placeholder with the current table name
+        var _ns = window.nowaikitState || {};
+        var prompt = action.prompt.replace(/\{table\}/g, _ns.currentTable || 'the current table');
+        sendMessageWithText(prompt);
+      }
+    });
+  });
+
+  // Escape to close
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && aiSidebarOpen) {
+      toggleAISidebar();
+    }
+  });
+}
+
+function buildWelcomeHTML() {
+  return '' +
+    '<div class="nowaikit-ai-welcome">' +
+      '<div class="nowaikit-ai-welcome-icon">' +
+        '<svg width="32" height="32" viewBox="0 0 512 512"><defs><linearGradient id="naikGrad2" 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><linearGradient id="naikShim2" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="white" stop-opacity="0"/><stop offset="50%" stop-color="white" stop-opacity="0.08"/><stop offset="100%" stop-color="white" stop-opacity="0"/></linearGradient><clipPath id="naikClip2"><rect width="512" height="512" rx="128"/></clipPath></defs><rect width="512" height="512" rx="128" fill="url(#naikGrad2)"/><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"/><animateTransform attributeName="transform" type="scale" values="1;1.15;1" dur="2s" repeatCount="indefinite" additive="sum"/></path><line x1="34" y1="19" x2="34" y2="28.5" stroke="#fff" stroke-width="1.8" opacity="0.5"><animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" repeatCount="indefinite"/></line><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"/><animate attributeName="r" values="4.5;5.5;4.5" dur="2s" repeatCount="indefinite" begin="0.3s"/></circle></g><rect x="-512" y="0" width="512" height="512" fill="url(#naikShim2)" clip-path="url(#naikClip2)"><animateTransform attributeName="transform" type="translate" values="0,0;1024,0" dur="4s" repeatCount="indefinite"/></rect></svg>' +
+      '</div>' +
+      '<div class="nowaikit-ai-welcome-title"><span class="nk-ai-logo-now">Now</span><span class="nk-ai-logo-ai">AI</span><span class="nk-ai-logo-kit">Kit</span><span class="nk-ai-logo-suffix"> Assistant</span></div>' +
+      '<div class="nowaikit-ai-welcome-sub">ServiceNow AI Assistant — Ask anything about this page, generate scripts, review code, or get best practices.</div>' +
+    '</div>';
+}
+
+// ─── Model Options ──────────────────────────────────────────────
+
+// API key generation links per provider
+var AI_KEY_LINKS = {
+  openai: 'https://platform.openai.com/api-keys',
+  anthropic: 'https://console.anthropic.com/settings/keys',
+  google: 'https://aistudio.google.com/apikey',
+  openrouter: 'https://openrouter.ai/keys',
+  ollama: '',
+};
+
+function updateModelOptions(provider) {
+  var modelSelect = document.getElementById('nowaikit-ai-model');
+  var models = {
+    openai: [
+      { value: 'gpt-5.4', label: 'GPT-5.4' },
+      { value: 'gpt-5.4-mini', label: 'GPT-5.4 Mini' },
+      { value: 'gpt-5.4-nano', label: 'GPT-5.4 Nano' },
+    ],
+    anthropic: [
+      { value: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6' },
+      { value: 'claude-opus-4-6', label: 'Claude Opus 4.6' },
+      { value: 'claude-haiku-4-5-20251001', label: 'Claude Haiku 4.5' },
+    ],
+    google: [
+      { value: 'gemini-3.1-pro-preview', label: 'Gemini 3.1 Pro' },
+      { value: 'gemini-3-flash-preview', label: 'Gemini 3 Flash' },
+      { value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
+      { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
+    ],
+    openrouter: [
+      { value: 'openai/gpt-5.4', label: 'GPT-5.4' },
+      { value: 'anthropic/claude-sonnet-4-6', label: 'Claude Sonnet 4.6' },
+      { value: 'anthropic/claude-opus-4-6', label: 'Claude Opus 4.6' },
+      { value: 'google/gemini-3.1-pro-preview', label: 'Gemini 3.1 Pro' },
+      { value: 'deepseek/deepseek-v3.2', label: 'DeepSeek V3.2' },
+    ],
+    ollama: [
+      { value: 'qwen3', label: 'Qwen 3' },
+      { value: 'qwen3.5', label: 'Qwen 3.5' },
+      { value: 'deepseek-r1', label: 'DeepSeek R1' },
+      { value: 'llama3.3', label: 'Llama 3.3' },
+    ],
+  };
+
+  var opts = models[provider] || models.openai;
+  modelSelect.innerHTML = opts.map(function(m) {
+    return '<option value="' + m.value + '">' + m.label + '</option>';
+  }).join('');
+
+  // Show/hide Ollama URL field
+  var ollamaGroup = document.getElementById('nowaikit-ai-ollama-url').closest('.nowaikit-ai-setting-group');
+  if (ollamaGroup) {
+    ollamaGroup.style.display = provider === 'ollama' ? 'block' : 'none';
+  }
+
+  // Update API key link
+  updateApiKeyLink(provider);
+}
+
+function updateApiKeyLink(provider) {
+  var linkEl = document.getElementById('nowaikit-ai-key-link');
+  if (!linkEl) return;
+  var url = AI_KEY_LINKS[provider] || '';
+  if (url) {
+    linkEl.style.display = 'block';
+    linkEl.onclick = function(e) {
+      e.preventDefault();
+      window.open(url, '_blank');
+    };
+  } else {
+    linkEl.style.display = 'none';
+  }
+}
+
+// ─── Theme Toggle ───────────────────────────────────────────
+
+var aiCurrentTheme = 'dark';
+
+function toggleAiTheme() {
+  // Use global theme API if available (syncs all extension UI)
+  if (typeof window.nowaikitToggleTheme === 'function') {
+    var newTheme = window.nowaikitToggleTheme();
+    applyAiTheme(newTheme);
+  } else {
+    var newTheme = aiCurrentTheme === 'dark' ? 'light' : 'dark';
+    applyAiTheme(newTheme);
+    chrome.storage.local.set({ nowaikitTheme: newTheme });
+  }
+}
+
+function applyAiTheme(theme) {
+  aiCurrentTheme = theme;
+  if (!aiSidebarEl) return;
+
+  aiSidebarEl.classList.remove('nowaikit-ai-dark', 'nowaikit-ai-light');
+  aiSidebarEl.classList.add('nowaikit-ai-' + theme);
+
+  // Also toggle body class for CSS overrides
+  document.body.classList.remove('nowaikit-light', 'nowaikit-dark');
+  document.body.classList.add(theme === 'light' ? 'nowaikit-light' : 'nowaikit-dark');
+
+  // Update button icon
+  var themeBtn = document.getElementById('nowaikit-ai-theme');
+  if (themeBtn) {
+    themeBtn.title = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+    themeBtn.innerHTML = theme === 'dark'
+      ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/></svg>'
+      : '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+  }
+}
+
+// ─── Toggle Sidebar ─────────────────────────────────────────────
+
+function closeAISidebar() {
+  if (!aiSidebarOpen) return;
+  aiSidebarOpen = false;
+  if (aiSidebarEl) aiSidebarEl.classList.remove('open');
+  var toggleBtn = document.getElementById('nowaikit-ai-toggle');
+  if (toggleBtn) toggleBtn.classList.remove('active');
+}
+
+function toggleAISidebar() {
+  aiSidebarOpen = !aiSidebarOpen;
+  if (aiSidebarEl) {
+    aiSidebarEl.classList.toggle('open', aiSidebarOpen);
+  }
+  var toggleBtn = document.getElementById('nowaikit-ai-toggle');
+  if (toggleBtn) {
+    toggleBtn.classList.toggle('active', aiSidebarOpen);
+  }
+  if (aiSidebarOpen) {
+    // Close other panels
+    if (typeof window.closeMainPanel === 'function') window.closeMainPanel();
+    if (typeof window.closeCodeTemplates === 'function') window.closeCodeTemplates();
+    var inputEl = document.getElementById('nowaikit-ai-input');
+    if (inputEl) setTimeout(function() { inputEl.focus(); }, 100);
+  }
+}
+
+window.closeAISidebar = closeAISidebar;
+
+// ─── Bridge Status Refresh ───────────────────────────────────────
+
+function refreshBridgeStatus() {
+  var statusEl = document.getElementById('nowaikit-ai-bridge-status');
+  if (!statusEl || !statusEl.parentNode) return;
+  // Use DOM replacement instead of outerHTML to avoid HTML injection risks
+  var wrapper = document.createElement('div');
+  wrapper.innerHTML = buildBridgeStatusHTML();
+  var newEl = wrapper.firstChild;
+  if (newEl) {
+    statusEl.parentNode.replaceChild(newEl, statusEl);
+  }
+}
+
+// Periodically refresh bridge status (every 10 seconds when sidebar is open)
+setInterval(function() {
+  if (aiSidebarOpen) refreshBridgeStatus();
+}, 10000);
+
+// ─── Health Quick Action ─────────────────────────────────────────
+
+async function handleHealthQuickAction() {
+  // If bridge is connected, get real health data without needing an LLM call
+  if (isBridgeConnected() && typeof bridgeGetInstanceHealth === 'function') {
+    addMessageToUI('user', 'Show instance health metrics');
+    aiConversation.push({ role: 'user', content: 'Show instance health metrics' });
+
+    try {
+      var health = await bridgeGetInstanceHealth();
+      var msg = formatHealthData(health);
+      addMessageToUI('assistant', msg);
+      aiConversation.push({ role: 'assistant', content: msg });
+    } catch (e) {
+      addMessageToUI('assistant', 'Unable to fetch instance health data: ' + (e.message || 'Unknown error. Please check the bridge connection.'));
+      aiConversation.push({ role: 'assistant', content: 'Unable to fetch instance health data.' });
+    }
+    return;
+  }
+
+  // Fallback: send prompt to the LLM
+  sendMessageWithText('Show me the current instance health metrics and any issues.');
+}
+
+function formatHealthData(health) {
+  if (!health) return 'No health data available.';
+
+  var lines = ['**Instance Health Report**', ''];
+
+  if (health.instanceName) lines.push('**Instance:** ' + health.instanceName);
+  if (health.version) lines.push('**Version:** ' + health.version);
+  if (health.buildTag) lines.push('**Build:** ' + health.buildTag);
+
+  // Node counts / status
+  if (health.nodes && Array.isArray(health.nodes)) {
+    lines.push('', '**Nodes:**');
+    health.nodes.forEach(function(node) {
+      var status = node.status || 'unknown';
+      var statusIcon = status === 'online' ? '(OK)' : '(!)';
+      lines.push('- ' + (node.name || 'Node') + ': ' + status + ' ' + statusIcon);
+    });
+  }
+
+  // Performance stats
+  if (health.stats) {
+    lines.push('', '**Performance:**');
+    if (health.stats.transactionCount !== undefined) lines.push('- Transactions: ' + health.stats.transactionCount);
+    if (health.stats.avgResponseTime !== undefined) lines.push('- Avg Response Time: ' + health.stats.avgResponseTime + 'ms');
+    if (health.stats.slowQueries !== undefined) lines.push('- Slow Queries: ' + health.stats.slowQueries);
+    if (health.stats.semaphoreWaits !== undefined) lines.push('- Semaphore Waits: ' + health.stats.semaphoreWaits);
+  }
+
+  // Active users
+  if (health.activeUsers !== undefined) {
+    lines.push('', '**Active Users:** ' + health.activeUsers);
+  }
+
+  // Issues / warnings
+  if (health.issues && Array.isArray(health.issues) && health.issues.length > 0) {
+    lines.push('', '**Issues:**');
+    health.issues.forEach(function(issue) {
+      lines.push('- ' + (issue.severity || 'info').toUpperCase() + ': ' + (issue.message || issue));
+    });
+  } else if (!health.issues || (Array.isArray(health.issues) && health.issues.length === 0)) {
+    lines.push('', '**Issues:** None detected');
+  }
+
+  // If the health object has other top-level keys we haven't handled, show them
+  var handledKeys = ['instanceName', 'version', 'buildTag', 'nodes', 'stats', 'activeUsers', 'issues'];
+  Object.keys(health).forEach(function(key) {
+    if (handledKeys.indexOf(key) === -1 && health[key] !== null && health[key] !== undefined) {
+      var val = typeof health[key] === 'object' ? JSON.stringify(health[key]) : String(health[key]);
+      lines.push('- **' + key + ':** ' + val);
+    }
+  });
+
+  return lines.join('\n');
+}
+
+// ─── Send Message ───────────────────────────────────────────────
+
+function sendMessage() {
+  var inputEl = document.getElementById('nowaikit-ai-input');
+  var text = (inputEl.value || '').trim();
+  if (!text || aiStreaming) return;
+  sendMessageWithText(text);
+  inputEl.value = '';
+  inputEl.style.height = 'auto';
+}
+
+function sendMessageWithText(text) {
+  // Check for API key (decrypt from storage)
+  chrome.storage.local.get({
+    aiProvider: 'openai',
+    aiApiKey: '',
+    aiModel: 'gpt-5.4',
+    aiOllamaUrl: 'http://localhost:11434',
+  }, async function(settings) {
+    // Decrypt the API key
+    var decryptedKey = await decryptApiKey(settings.aiApiKey);
+    if (!decryptedKey && settings.aiProvider !== 'ollama') {
+      _showToast('Please configure your API key in AI Settings', 'warn');
+      document.getElementById('nowaikit-ai-settings-panel').style.display = 'block';
+      return;
+    }
+
+    // Add user message to UI
+    addMessageToUI('user', text);
+    aiConversation.push({ role: 'user', content: text });
+
+    // Gather context (async — may fetch bridge data)
+    var ctx = await gatherPageContext();
+    var contextMsg = buildContextMessage(ctx);
+
+    // Build system prompt — enhance when bridge is connected
+    var systemPrompt = SN_SYSTEM_PROMPT;
+    if (isBridgeConnected()) {
+      var bridgeInfo = getBridgeInfo();
+      var instName = (bridgeInfo && bridgeInfo.instanceName) ? bridgeInfo.instanceName : 'unknown';
+      var instUrl = (bridgeInfo && bridgeInfo.instanceUrl) ? bridgeInfo.instanceUrl : '';
+      systemPrompt += '\n\nYou have access to a live ServiceNow instance (' + instName + ' at ' + instUrl + '). The user\'s current page context includes real-time data from the instance.';
+    }
+
+    // Build messages array for the LLM
+    var messages = [{ role: 'system', content: systemPrompt }];
+
+    // Add context as first user message if available
+    if (contextMsg) {
+      messages.push({ role: 'user', content: contextMsg });
+      messages.push({ role: 'assistant', content: 'I can see the current page context. How can I help?' });
+    }
+
+    // Add conversation history (last 20 messages to stay within limits)
+    var historySlice = aiConversation.slice(-20);
+    historySlice.forEach(function(msg) {
+      messages.push({ role: msg.role, content: msg.content });
+    });
+
+    // Create streaming response UI
+    var assistantMsgId = 'ai-msg-' + Date.now();
+    addStreamingMessage(assistantMsgId);
+    aiStreaming = true;
+    updateSendButton(true);
+
+    // Connect to background for streaming
+    aiPort = chrome.runtime.connect({ name: 'nowaikit-ai-stream' });
+
+    var fullResponse = '';
+
+    // Handle unexpected port disconnection
+    aiPort.onDisconnect.addListener(function() {
+      if (aiStreaming) {
+        aiStreaming = false;
+        updateSendButton(false);
+        if (fullResponse) {
+          finalizeMessage(assistantMsgId, fullResponse);
+          aiConversation.push({ role: 'assistant', content: fullResponse });
+        } else {
+          updateStreamingMessage(assistantMsgId, 'Connection lost. Please try again.');
+          var el = document.getElementById(assistantMsgId);
+          if (el) el.classList.add('nowaikit-ai-error');
+        }
+      }
+      aiPort = null;
+    });
+
+    aiPort.onMessage.addListener(function(msg) {
+      if (msg.type === 'token') {
+        fullResponse += msg.content;
+        updateStreamingMessage(assistantMsgId, fullResponse);
+      } else if (msg.type === 'done') {
+        aiStreaming = false;
+        updateSendButton(false);
+        finalizeMessage(assistantMsgId, fullResponse);
+        aiConversation.push({ role: 'assistant', content: fullResponse });
+        aiPort.disconnect();
+        aiPort = null;
+      } else if (msg.type === 'error') {
+        aiStreaming = false;
+        updateSendButton(false);
+        updateStreamingMessage(assistantMsgId, 'Error: ' + msg.content);
+        var el = document.getElementById(assistantMsgId);
+        if (el) el.classList.add('nowaikit-ai-error');
+        aiPort.disconnect();
+        aiPort = null;
+      }
+    });
+
+    // Send the request (using decrypted key)
+    aiPort.postMessage({
+      action: 'nowaikit-ai-chat',
+      provider: settings.aiProvider,
+      apiKey: decryptedKey,
+      model: settings.aiModel,
+      ollamaUrl: settings.aiOllamaUrl,
+      messages: messages,
+    });
+  });
+}
+
+// ─── UI Helpers ─────────────────────────────────────────────────
+
+function addMessageToUI(role, content) {
+  var msgsEl = document.getElementById('nowaikit-ai-messages');
+  // Remove welcome message if present
+  var welcome = msgsEl.querySelector('.nowaikit-ai-welcome');
+  if (welcome) welcome.remove();
+
+  var msgEl = document.createElement('div');
+  msgEl.className = 'nowaikit-ai-message nowaikit-ai-message-' + role;
+
+  var avatarHTML = role === 'user'
+    ? '<div class="nowaikit-ai-avatar nowaikit-ai-avatar-user">U</div>'
+    : '<div class="nowaikit-ai-avatar nowaikit-ai-avatar-ai">N</div>';
+
+  msgEl.innerHTML = avatarHTML +
+    '<div class="nowaikit-ai-message-content">' + renderMarkdown(_escapeHtml(content)) + '</div>';
+
+  msgsEl.appendChild(msgEl);
+  msgsEl.scrollTop = msgsEl.scrollHeight;
+}
+
+function addStreamingMessage(id) {
+  var msgsEl = document.getElementById('nowaikit-ai-messages');
+  var welcome = msgsEl.querySelector('.nowaikit-ai-welcome');
+  if (welcome) welcome.remove();
+
+  var msgEl = document.createElement('div');
+  msgEl.id = id;
+  msgEl.className = 'nowaikit-ai-message nowaikit-ai-message-assistant';
+  msgEl.innerHTML =
+    '<div class="nowaikit-ai-avatar nowaikit-ai-avatar-ai">N</div>' +
+    '<div class="nowaikit-ai-message-content"><span class="nowaikit-ai-typing">Thinking...</span></div>';
+
+  msgsEl.appendChild(msgEl);
+  msgsEl.scrollTop = msgsEl.scrollHeight;
+}
+
+var _streamThrottleTimer = null;
+var _streamPendingContent = null;
+var _streamPendingId = null;
+
+function updateStreamingMessage(id, content) {
+  _streamPendingContent = content;
+  _streamPendingId = id;
+  // Throttle DOM updates to max ~15fps during streaming for performance
+  if (_streamThrottleTimer) return;
+  _streamThrottleTimer = setTimeout(function() {
+    _streamThrottleTimer = null;
+    _flushStreamingMessage();
+  }, 66);
+}
+
+function _flushStreamingMessage() {
+  if (!_streamPendingId || _streamPendingContent === null) return;
+  var msgEl = document.getElementById(_streamPendingId);
+  if (!msgEl) return;
+  var contentEl = msgEl.querySelector('.nowaikit-ai-message-content');
+  if (contentEl) {
+    contentEl.innerHTML = renderMarkdown(_escapeHtml(_streamPendingContent)) + '<span class="nowaikit-ai-cursor">|</span>';
+  }
+  var msgsEl = document.getElementById('nowaikit-ai-messages');
+  if (msgsEl) msgsEl.scrollTop = msgsEl.scrollHeight;
+}
+
+function finalizeMessage(id, content) {
+  var msgEl = document.getElementById(id);
+  if (!msgEl) return;
+  var contentEl = msgEl.querySelector('.nowaikit-ai-message-content');
+  if (contentEl) {
+    contentEl.innerHTML = renderMarkdown(_escapeHtml(content));
+
+    // Add "Insert into editor" buttons for code blocks
+    contentEl.querySelectorAll('pre code').forEach(function(codeEl) {
+      var insertBtn = document.createElement('button');
+      insertBtn.className = 'nowaikit-ai-insert-btn';
+      insertBtn.textContent = 'Insert into Editor';
+      insertBtn.addEventListener('click', function() {
+        insertCodeIntoEditor(codeEl.textContent);
+      });
+      var copyBtn = document.createElement('button');
+      copyBtn.className = 'nowaikit-ai-copy-code-btn';
+      copyBtn.textContent = 'Copy';
+      copyBtn.addEventListener('click', function() {
+        navigator.clipboard.writeText(codeEl.textContent).then(function() {
+          copyBtn.textContent = 'Copied!';
+          setTimeout(function() { copyBtn.textContent = 'Copy'; }, 1500);
+        }).catch(function() {
+          copyBtn.textContent = 'Failed';
+          setTimeout(function() { copyBtn.textContent = 'Copy'; }, 1500);
+        });
+      });
+      var actionsDiv = document.createElement('div');
+      actionsDiv.className = 'nowaikit-ai-code-actions';
+      actionsDiv.appendChild(copyBtn);
+      actionsDiv.appendChild(insertBtn);
+      codeEl.parentElement.insertBefore(actionsDiv, codeEl.parentElement.firstChild);
+    });
+  }
+  var msgsEl = document.getElementById('nowaikit-ai-messages');
+  msgsEl.scrollTop = msgsEl.scrollHeight;
+}
+
+function updateSendButton(streaming) {
+  var sendBtn = document.getElementById('nowaikit-ai-send');
+  if (sendBtn) {
+    sendBtn.disabled = streaming;
+    sendBtn.style.opacity = streaming ? '0.5' : '1';
+  }
+}
+
+// ─── Markdown Rendering ─────────────────────────────────────────
+// Minimal markdown renderer for chat messages
+
+function renderMarkdown(text) {
+  // Code blocks: ```lang\n...\n```
+  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, function(m, lang, code) {
+    // Sanitize lang to alphanumeric only (prevent class injection)
+    var safeLang = (lang || 'text').replace(/[^a-zA-Z0-9]/g, '');
+    return '<pre><code class="lang-' + safeLang + '">' + code.trim() + '</code></pre>';
+  });
+  // Inline code: `...`
+  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+  // Bold: **...**
+  text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+  // Italic: *...*
+  text = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+  // Bullet lists: - item or * item
+  text = text.replace(/^[\-\*] (.+)$/gm, '<li>$1</li>');
+  text = text.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
+  // Numbered lists: 1. item
+  text = text.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+  // Headers: ## ... or ### ...
+  text = text.replace(/^### (.+)$/gm, '<h4>$1</h4>');
+  text = text.replace(/^## (.+)$/gm, '<h3>$1</h3>');
+  // Line breaks
+  text = text.replace(/\n/g, '<br>');
+  // Clean up multiple <br> tags
+  text = text.replace(/(<br>){3,}/g, '<br><br>');
+
+  return text;
+}
+
+// ─── Write-Back: Insert Code into Editor ────────────────────────
+
+function insertCodeIntoEditor(code) {
+  // Try CodeMirror first
+  var cmEl = document.querySelector('.CodeMirror');
+  if (cmEl && cmEl.CodeMirror) {
+    var cm = cmEl.CodeMirror;
+    var cursor = cm.getCursor();
+    cm.replaceRange(code, cursor);
+    _showToast('Code inserted into editor', 'success');
+    return;
+  }
+
+  // Try textarea script fields
+  var textareas = document.querySelectorAll('textarea[id*="script"], textarea[name="script"], textarea[name="condition"]');
+  if (textareas.length > 0) {
+    var ta = textareas[0];
+    var start = ta.selectionStart;
+    var end = ta.selectionEnd;
+    ta.value = ta.value.substring(0, start) + code + ta.value.substring(end);
+    ta.selectionStart = ta.selectionEnd = start + code.length;
+    ta.dispatchEvent(new Event('input', { bubbles: true }));
+    _showToast('Code inserted into editor', 'success');
+    return;
+  }
+
+  // Fallback: copy to clipboard
+  navigator.clipboard.writeText(code).then(function() {
+    _showToast('No editor found. Code copied to clipboard.', 'warn');
+  }).catch(function() {
+    _showToast('No editor found and clipboard access denied.', 'warn');
+  });
+}