npm - nowaikit-utils - Versions diffs - 1.1.0 - Mend

nowaikit-utils 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/LICENSE +21 -0
package/README.md +152 -0
package/ai-window.html +598 -0
package/background/service-worker.js +398 -0
package/cli.mjs +65 -0
package/content/ai-sidebar.js +1198 -0
package/content/code-templates.js +843 -0
package/content/content.js +2527 -0
package/content/integration-bridge.js +627 -0
package/content/main-panel.js +592 -0
package/content/styles.css +1609 -0
package/icons/README.txt +1 -0
package/icons/icon-128.png +0 -0
package/icons/icon-16.png +0 -0
package/icons/icon-48.png +0 -0
package/icons/icon.svg +16 -0
package/manifest.json +63 -0
package/options/options.html +434 -0
package/package.json +49 -0
package/popup/popup.html +663 -0
package/popup/popup.js +414 -0

package/ai-window.html ADDED Viewed

@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NowAIKit Utils — AI Assistant</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --bg-primary: #0B1020;
+      --bg-secondary: #111828;
+      --bg-input: #0B1020;
+      --border: #1e2a3e;
+      --text-primary: #e0e5ec;
+      --text-secondary: #6b7a90;
+      --text-muted: #4a5568;
+      --accent: #00D4AA;
+      --accent-dark: #0F4C81;
+      --msg-user-bg: rgba(0, 212, 170, 0.08);
+      --msg-user-border: rgba(0, 212, 170, 0.15);
+      --code-bg: #0B1020;
+      --code-inline: #00D4AA;
+      --strong-color: #fff;
+    }
+    body.light {
+      --bg-primary: #ffffff;
+      --bg-secondary: #f8fafc;
+      --bg-input: #f8fafc;
+      --border: #e2e8f0;
+      --text-primary: #1a202c;
+      --text-secondary: #64748b;
+      --text-muted: #94a3b8;
+      --accent: #0D9488;
+      --accent-dark: #0F4C81;
+      --msg-user-bg: rgba(0, 212, 170, 0.06);
+      --msg-user-border: rgba(0, 212, 170, 0.12);
+      --code-bg: #f1f5f9;
+      --code-inline: #0D9488;
+      --strong-color: #1a202c;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 13px;
+      color: var(--text-primary);
+      background: var(--bg-primary);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    /* Header */
+    .header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 10px 16px; background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border); flex-shrink: 0;
+    }
+    .header-left { display: flex; align-items: center; gap: 8px; }
+    .header-title {
+      font-weight: 700; font-size: 14px;
+      background: linear-gradient(135deg, #00D4AA, #0F4C81);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    }
+    .header-actions { display: flex; gap: 4px; }
+    .btn-icon {
+      width: 30px; height: 30px; border: none; background: transparent;
+      color: var(--text-secondary); cursor: pointer; border-radius: 6px;
+      display: flex; align-items: center; justify-content: center;
+      transition: background 0.2s, color 0.2s;
+    }
+    .btn-icon:hover { background: var(--border); color: var(--text-primary); }
+    /* Settings panel */
+    .settings-panel {
+      padding: 14px 16px; background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border); flex-shrink: 0; display: none;
+    }
+    .setting-group { margin-bottom: 10px; }
+    .setting-label {
+      display: block; font-size: 11px; font-weight: 600;
+      color: var(--text-secondary); text-transform: uppercase;
+      letter-spacing: 0.5px; margin-bottom: 4px;
+    }
+    .setting-select, .setting-input {
+      width: 100%; padding: 7px 10px; background: var(--bg-input);
+      border: 1px solid var(--border); border-radius: 6px;
+      color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;
+    }
+    .setting-select:focus, .setting-input:focus { border-color: var(--accent); }
+    .save-btn {
+      width: 100%; padding: 8px; border: none; border-radius: 6px;
+      background: linear-gradient(135deg, #00D4AA, #0F4C81);
+      color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
+    }
+    .save-btn:hover { opacity: 0.9; }
+    .key-link {
+      background: none; border: none; color: var(--accent);
+      font-size: 11px; cursor: pointer; padding: 4px 0;
+      text-decoration: underline; display: block; margin-top: 4px;
+    }
+    /* Messages */
+    .messages {
+      flex: 1; overflow-y: auto; padding: 16px;
+      display: flex; flex-direction: column; gap: 12px;
+    }
+    .messages::-webkit-scrollbar { width: 6px; }
+    .messages::-webkit-scrollbar-track { background: transparent; }
+    .messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    .welcome {
+      display: flex; flex-direction: column; align-items: center;
+      justify-content: center; text-align: center; padding: 40px 20px; flex: 1;
+    }
+    .welcome-icon { margin-bottom: 16px; }
+    .welcome-title {
+      font-size: 18px; font-weight: 700;
+      background: linear-gradient(135deg, #00D4AA, #0F4C81);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      margin-bottom: 8px;
+    }
+    .welcome-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; max-width: 280px; }
+    .message { display: flex; gap: 10px; align-items: flex-start; }
+    .avatar {
+      width: 28px; height: 28px; border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 12px; font-weight: 700; flex-shrink: 0;
+    }
+    .avatar-user { background: var(--border); color: var(--text-primary); }
+    .avatar-ai { background: linear-gradient(135deg, #00D4AA, #0F4C81); color: #fff; }
+    .msg-content {
+      flex: 1; background: var(--bg-secondary); border: 1px solid var(--border);
+      border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.6;
+      color: var(--text-primary); overflow-wrap: break-word; word-break: break-word;
+    }
+    .message-user .msg-content { background: var(--msg-user-bg); border-color: var(--msg-user-border); }
+    .msg-content code {
+      font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px;
+      background: var(--code-bg); padding: 1px 5px; border-radius: 3px; color: var(--code-inline);
+    }
+    .msg-content pre {
+      background: var(--code-bg); border: 1px solid var(--border);
+      border-radius: 6px; padding: 12px; margin: 8px 0; overflow-x: auto; position: relative;
+    }
+    .msg-content pre code { background: none; padding: 0; color: var(--text-primary); line-height: 1.5; }
+    .msg-content strong { color: var(--strong-color); }
+    .msg-content h3, .msg-content h4 { color: var(--strong-color); margin: 8px 0 4px; }
+    .msg-content ul, .msg-content ol { padding-left: 20px; margin: 4px 0; }
+    .msg-content li { margin-bottom: 2px; }
+    .msg-error .msg-content { border-color: #ff6b6b; color: #ff8787; }
+    .code-actions { display: flex; gap: 6px; margin-bottom: 8px; }
+    .copy-btn, .insert-btn {
+      padding: 4px 10px; font-size: 11px; font-weight: 500;
+      border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
+      font-family: inherit; transition: all 0.2s;
+    }
+    .copy-btn { background: transparent; color: var(--text-secondary); }
+    .copy-btn:hover { background: var(--border); color: var(--text-primary); }
+    .typing { color: var(--text-secondary); font-style: italic; }
+    .cursor { animation: blink 1s step-end infinite; color: var(--accent); }
+    @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
+    /* Quick actions */
+    .quick-actions {
+      display: flex; gap: 6px; padding: 10px 16px;
+      border-top: 1px solid var(--border); overflow-x: auto; flex-shrink: 0;
+    }
+    .quick-actions::-webkit-scrollbar { height: 0; }
+    .quick-btn {
+      display: flex; align-items: center; gap: 4px;
+      padding: 6px 10px; background: var(--bg-secondary);
+      border: 1px solid var(--border); border-radius: 16px;
+      color: var(--text-secondary); font-size: 11px;
+      font-family: inherit; cursor: pointer; white-space: nowrap; transition: all 0.2s;
+    }
+    .quick-btn:hover {
+      background: rgba(0, 212, 170, 0.08);
+      border-color: rgba(0, 212, 170, 0.2); color: var(--accent);
+    }
+    /* Input area */
+    .input-area {
+      padding: 12px 16px; border-top: 1px solid var(--border);
+      background: var(--bg-secondary); flex-shrink: 0;
+    }
+    .input-wrapper {
+      display: flex; align-items: flex-end; gap: 8px;
+      background: var(--bg-input); border: 1px solid var(--border);
+      border-radius: 10px; padding: 8px 12px; transition: border-color 0.2s;
+    }
+    .input-wrapper:focus-within { border-color: var(--accent); }
+    .chat-input {
+      flex: 1; background: transparent; border: none;
+      color: var(--text-primary); font-size: 13px; font-family: inherit;
+      line-height: 1.4; resize: none; outline: none; max-height: 120px;
+    }
+    .chat-input::placeholder { color: var(--text-muted); }
+    .send-btn {
+      width: 32px; height: 32px; border: none;
+      background: linear-gradient(135deg, #00D4AA, #0F4C81);
+      border-radius: 8px; color: #fff; cursor: pointer;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+    }
+    .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .input-hint { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 6px; }
+  </style>
+</head>
+<body>
+  <!-- Header -->
+  <div class="header">
+    <div class="header-left">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00D4AA" 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>
+      <span class="header-title">NowAIKit Utils</span>
+    </div>
+    <div class="header-actions">
+      <button class="btn-icon" id="theme-btn" 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="btn-icon" id="clear-btn" 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="btn-icon" id="settings-btn" 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-2.83 2.83l-.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-4 0v-.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-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 0-4h.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 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.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 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 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+      </button>
+    </div>
+  </div>
+  <!-- Settings panel (hidden) -->
+  <div class="settings-panel" id="settings-panel">
+    <div class="setting-group">
+      <label class="setting-label">AI Provider</label>
+      <select id="provider" class="setting-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="setting-group">
+      <label class="setting-label">API Key</label>
+      <input type="password" id="apikey" class="setting-input" placeholder="sk-... or paste your API key">
+      <button id="key-link" class="key-link">Get your API key &rarr;</button>
+    </div>
+    <div class="setting-group">
+      <label class="setting-label">Model</label>
+      <select id="model" class="setting-select">
+        <option value="gpt-5.4">GPT-5.4</option>
+        <option value="gpt-5.4-mini">GPT-5.4 Mini</option>
+      </select>
+    </div>
+    <div class="setting-group" id="ollama-group" style="display:none;">
+      <label class="setting-label">Ollama URL</label>
+      <input type="text" id="ollama-url" class="setting-input" placeholder="http://localhost:11434" value="http://localhost:11434">
+    </div>
+    <button class="save-btn" id="save-settings">Save Settings</button>
+  </div>
+  <!-- Messages -->
+  <div class="messages" id="messages">
+    <div class="welcome">
+      <div class="welcome-icon">
+        <svg width="32" height="32" viewBox="0 0 512 512"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#00F0C0"/><stop offset="100%" stop-color="#0F4C81"/></linearGradient></defs><rect width="512" height="512" rx="128" fill="url(#g)"/><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"/></g></svg>
+      </div>
+      <div class="welcome-title">NowAIKit Utils</div>
+      <div class="welcome-sub">ServiceNow AI Assistant — Ask anything about ServiceNow, generate scripts, review code, or get best practices.</div>
+    </div>
+  </div>
+  <!-- Quick actions -->
+  <div class="quick-actions" id="quick-actions">
+    <button class="quick-btn" data-prompt="Explain this script in detail.">&#x1F4A1; Explain</button>
+    <button class="quick-btn" data-prompt="Review this code for issues and best practice violations.">&#x1F50D; Review</button>
+    <button class="quick-btn" data-prompt="Optimize this script for performance.">&#x1F680; Optimize</button>
+    <button class="quick-btn" data-prompt="Fix all issues in this script.">&#x1F527; Fix</button>
+    <button class="quick-btn" data-prompt="Help me write a GlideRecord query.">&#x1F50D; Query</button>
+  </div>
+  <!-- Input area -->
+  <div class="input-area">
+    <div class="input-wrapper">
+      <textarea id="chat-input" class="chat-input" placeholder="Ask about ServiceNow..." rows="1"></textarea>
+      <button class="send-btn" id="send-btn" 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="input-hint">Enter to send &middot; Shift+Enter for new line</div>
+  </div>
+  <script>
+    // ─── State ──────────────────────────────────────────────
+    var conversation = [];
+    var streaming = false;
+    var port = null;
+    var currentTheme = 'dark';
+    var SN_SYSTEM_PROMPT = 'You are NowAIKit Utils AI Assistant, an expert ServiceNow platform assistant. ' +
+      'You have deep expertise in GlideRecord, GlideAjax, Business Rules, Client Scripts, Script Includes, ' +
+      'Flow Designer, ACLs, REST APIs, Service Portal, and all ServiceNow modules. ' +
+      'Always provide code examples following ServiceNow best practices.';
+    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' },
+      ],
+      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' },
+      ],
+      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 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: '',
+    };
+    // ─── Theme ──────────────────────────────────────────────
+    function toggleTheme() {
+      currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      applyTheme(currentTheme);
+      chrome.storage.local.set({ aiTheme: currentTheme });
+    }
+    function applyTheme(theme) {
+      currentTheme = theme;
+      document.body.classList.remove('light');
+      if (theme === 'light') document.body.classList.add('light');
+      var btn = document.getElementById('theme-btn');
+      btn.title = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+      btn.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>';
+    }
+    // ─── Settings ───────────────────────────────────────────
+    function updateModels(provider) {
+      var sel = document.getElementById('model');
+      var opts = MODELS[provider] || MODELS.openai;
+      sel.innerHTML = opts.map(function(m) { return '<option value="' + m.value + '">' + m.label + '</option>'; }).join('');
+      document.getElementById('ollama-group').style.display = provider === 'ollama' ? 'block' : 'none';
+      updateKeyLink(provider);
+    }
+    function updateKeyLink(provider) {
+      var el = document.getElementById('key-link');
+      var url = KEY_LINKS[provider] || '';
+      el.style.display = url ? 'block' : 'none';
+      el.onclick = function(e) { e.preventDefault(); if (url) window.open(url, '_blank'); };
+    }
+    // ─── Markdown ───────────────────────────────────────────
+    function escapeHtml(str) {
+      var div = document.createElement('div');
+      div.textContent = str;
+      return div.innerHTML;
+    }
+    function renderMarkdown(text) {
+      text = text.replace(/```(\w*)\n([\s\S]*?)```/g, function(m, lang, code) {
+        return '<pre><code class="lang-' + (lang || 'text') + '">' + code.trim() + '</code></pre>';
+      });
+      text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+      text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+      text = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+      text = text.replace(/^[\-\*] (.+)$/gm, '<li>$1</li>');
+      text = text.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
+      text = text.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+      text = text.replace(/^### (.+)$/gm, '<h4>$1</h4>');
+      text = text.replace(/^## (.+)$/gm, '<h3>$1</h3>');
+      text = text.replace(/\n/g, '<br>');
+      text = text.replace(/(<br>){3,}/g, '<br><br>');
+      return text;
+    }
+    // ─── UI Helpers ─────────────────────────────────────────
+    function addMessage(role, content) {
+      var el = document.getElementById('messages');
+      var w = el.querySelector('.welcome');
+      if (w) w.remove();
+      var msg = document.createElement('div');
+      msg.className = 'message message-' + role;
+      var avatarCls = role === 'user' ? 'avatar avatar-user' : 'avatar avatar-ai';
+      var avatarText = role === 'user' ? 'U' : 'N';
+      msg.innerHTML = '<div class="' + avatarCls + '">' + avatarText + '</div>' +
+        '<div class="msg-content">' + renderMarkdown(escapeHtml(content)) + '</div>';
+      el.appendChild(msg);
+      el.scrollTop = el.scrollHeight;
+    }
+    function addStreamMsg(id) {
+      var el = document.getElementById('messages');
+      var w = el.querySelector('.welcome');
+      if (w) w.remove();
+      var msg = document.createElement('div');
+      msg.id = id;
+      msg.className = 'message message-assistant';
+      msg.innerHTML = '<div class="avatar avatar-ai">N</div>' +
+        '<div class="msg-content"><span class="typing">Thinking...</span></div>';
+      el.appendChild(msg);
+      el.scrollTop = el.scrollHeight;
+    }
+    function updateStreamMsg(id, content) {
+      var msg = document.getElementById(id);
+      if (!msg) return;
+      var c = msg.querySelector('.msg-content');
+      if (c) c.innerHTML = renderMarkdown(escapeHtml(content)) + '<span class="cursor">|</span>';
+      document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
+    }
+    function finalizeMsg(id, content) {
+      var msg = document.getElementById(id);
+      if (!msg) return;
+      var c = msg.querySelector('.msg-content');
+      if (c) {
+        c.innerHTML = renderMarkdown(escapeHtml(content));
+        c.querySelectorAll('pre code').forEach(function(codeEl) {
+          var copyBtn = document.createElement('button');
+          copyBtn.className = 'copy-btn';
+          copyBtn.textContent = 'Copy';
+          copyBtn.addEventListener('click', function() {
+            navigator.clipboard.writeText(codeEl.textContent);
+            copyBtn.textContent = 'Copied!';
+            setTimeout(function() { copyBtn.textContent = 'Copy'; }, 1500);
+          });
+          var actions = document.createElement('div');
+          actions.className = 'code-actions';
+          actions.appendChild(copyBtn);
+          codeEl.parentElement.insertBefore(actions, codeEl.parentElement.firstChild);
+        });
+      }
+      document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
+    }
+    // ─── Send ───────────────────────────────────────────────
+    function sendMsg(text) {
+      if (!text || streaming) return;
+      chrome.storage.local.get({
+        aiProvider: 'openai', aiApiKey: '', aiModel: 'gpt-5.4', aiOllamaUrl: 'http://localhost:11434',
+      }, function(settings) {
+        if (!settings.aiApiKey && settings.aiProvider !== 'ollama') {
+          alert('Please configure your API key in Settings.');
+          document.getElementById('settings-panel').style.display = 'block';
+          return;
+        }
+        addMessage('user', text);
+        conversation.push({ role: 'user', content: text });
+        var messages = [{ role: 'system', content: SN_SYSTEM_PROMPT }];
+        conversation.slice(-20).forEach(function(m) { messages.push({ role: m.role, content: m.content }); });
+        var msgId = 'msg-' + Date.now();
+        addStreamMsg(msgId);
+        streaming = true;
+        document.getElementById('send-btn').disabled = true;
+        port = chrome.runtime.connect({ name: 'nowaikit-ai-stream' });
+        var fullResp = '';
+        port.onMessage.addListener(function(msg) {
+          if (msg.type === 'token') {
+            fullResp += msg.content;
+            updateStreamMsg(msgId, fullResp);
+          } else if (msg.type === 'done') {
+            streaming = false;
+            document.getElementById('send-btn').disabled = false;
+            finalizeMsg(msgId, fullResp);
+            conversation.push({ role: 'assistant', content: fullResp });
+            port.disconnect();
+            port = null;
+          } else if (msg.type === 'error') {
+            streaming = false;
+            document.getElementById('send-btn').disabled = false;
+            updateStreamMsg(msgId, 'Error: ' + msg.content);
+            var el = document.getElementById(msgId);
+            if (el) el.classList.add('msg-error');
+            port.disconnect();
+            port = null;
+          }
+        });
+        port.postMessage({
+          action: 'nowaikit-ai-chat',
+          provider: settings.aiProvider,
+          apiKey: settings.aiApiKey,
+          model: settings.aiModel,
+          ollamaUrl: settings.aiOllamaUrl,
+          messages: messages,
+        });
+      });
+    }
+    // ─── Event Binding ──────────────────────────────────────
+    document.getElementById('theme-btn').addEventListener('click', toggleTheme);
+    document.getElementById('clear-btn').addEventListener('click', function() {
+      conversation = [];
+      document.getElementById('messages').innerHTML =
+        '<div class="welcome"><div class="welcome-icon"><svg width="32" height="32" viewBox="0 0 512 512"><defs><linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#00F0C0"/><stop offset="100%" stop-color="#0F4C81"/></linearGradient></defs><rect width="512" height="512" rx="128" fill="url(#g2)"/><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"/></g></svg></div><div class="welcome-title">NowAIKit Utils</div><div class="welcome-sub">Conversation cleared. Ask anything about ServiceNow.</div></div>';
+    });
+    document.getElementById('settings-btn').addEventListener('click', function() {
+      var p = document.getElementById('settings-panel');
+      p.style.display = p.style.display === 'none' ? 'block' : 'none';
+    });
+    document.getElementById('save-settings').addEventListener('click', function() {
+      chrome.storage.local.set({
+        aiProvider: document.getElementById('provider').value,
+        aiApiKey: document.getElementById('apikey').value,
+        aiModel: document.getElementById('model').value,
+        aiOllamaUrl: document.getElementById('ollama-url').value,
+      }, function() {
+        document.getElementById('settings-panel').style.display = 'none';
+      });
+    });
+    document.getElementById('provider').addEventListener('change', function() {
+      updateModels(this.value);
+    });
+    document.getElementById('send-btn').addEventListener('click', function() {
+      var input = document.getElementById('chat-input');
+      var text = (input.value || '').trim();
+      if (text) { sendMsg(text); input.value = ''; input.style.height = 'auto'; }
+    });
+    document.getElementById('chat-input').addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        var text = (this.value || '').trim();
+        if (text) { sendMsg(text); this.value = ''; this.style.height = 'auto'; }
+      }
+    });
+    document.getElementById('chat-input').addEventListener('input', function() {
+      this.style.height = 'auto';
+      this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+    });
+    document.querySelectorAll('.quick-btn').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        var prompt = this.dataset.prompt;
+        if (prompt) sendMsg(prompt);
+      });
+    });
+    // ─── Init ───────────────────────────────────────────────
+    chrome.storage.local.get({
+      aiProvider: 'openai', aiApiKey: '', aiModel: 'gpt-5.4',
+      aiOllamaUrl: 'http://localhost:11434', aiTheme: 'dark',
+    }, function(s) {
+      document.getElementById('provider').value = s.aiProvider;
+      document.getElementById('apikey').value = s.aiApiKey;
+      document.getElementById('model').value = s.aiModel;
+      document.getElementById('ollama-url').value = s.aiOllamaUrl;
+      updateModels(s.aiProvider);
+      applyTheme(s.aiTheme);
+    });
+    document.getElementById('chat-input').focus();
+  </script>
+</body>
+</html>