nowaikit-utils 1.1.0

package/content/code-templates.js

@@ -0,0 +1,843 @@
+/**
+ * NowAIKit Utils — Code Templates Library
+ * Ctrl+Shift+T to open. Floating, resizable, syntax-highlighted.
+ * Supports custom user templates stored in chrome.storage.local.
+ */
+(function() {
+  'use strict';
+
+  // ─── Syntax Highlighting Token Sets ─────────────────────────────────────────
+
+  var JS_KEYWORDS = new Set([
+    'var','let','const','function','return','if','else','for','while','do',
+    'switch','case','break','continue','new','this','typeof','instanceof',
+    'try','catch','finally','throw','class','extends','import','export',
+    'default','async','await','yield','null','undefined','true','false','in','of',
+  ]);
+
+  var SN_APIS = new Set([
+    'GlideRecord','GlideQuery','GlideAjax','GlideSystem','GlideAggregate',
+    'GlideDateTime','GlideElement','GlideUser','AbstractAjaxProcessor',
+    'g_form','g_list','g_user','g_navigation','gs','current','previous',
+    'sn_ws','RESTMessageV2','GlideHTTPRequest','GlideSysAttachment',
+    'Class','Object',
+  ]);
+
+  // ─── Built-in Templates ────────────────────────────────────────────────────
+
+  var BUILT_IN_TEMPLATES = [
+    { title: 'GlideRecord Query', category: 'GlideRecord', description: 'Basic GlideRecord query with encoded query',
+      code: "var gr = new GlideRecord('table_name');\ngr.addEncodedQuery('active=true');\ngr.query();\nwhile (gr.next()) {\n    gs.info(gr.getValue('number'));\n}" },
+    { title: 'GlideRecord Insert', category: 'GlideRecord', description: 'Create a new record',
+      code: "var gr = new GlideRecord('table_name');\ngr.initialize();\ngr.setValue('field', 'value');\ngr.insert();" },
+    { title: 'GlideRecord Update', category: 'GlideRecord', description: 'Find and update a record',
+      code: "var gr = new GlideRecord('table_name');\ngr.addQuery('number', 'INC0010001');\ngr.query();\nif (gr.next()) {\n    gr.setValue('state', 2);\n    gr.update();\n}" },
+    { title: 'GlideRecord Delete', category: 'GlideRecord', description: 'Find and delete records',
+      code: "var gr = new GlideRecord('table_name');\ngr.addQuery('active', false);\ngr.query();\ngr.deleteMultiple();" },
+    { title: 'GlideRecord Get', category: 'GlideRecord', description: 'Get a single record by sys_id',
+      code: "var gr = new GlideRecord('table_name');\nif (gr.get('sys_id_here')) {\n    gs.info(gr.getValue('number'));\n}" },
+    { title: 'GlideQuery Select', category: 'GlideQuery', description: 'Modern query with GlideQuery (Orlando+)',
+      code: "new global.GlideQuery('incident')\n    .where('active', true)\n    .where('priority', 1)\n    .select('number', 'short_description', 'state')\n    .forEach(function(inc) {\n        gs.info(inc.number + ': ' + inc.short_description);\n    });" },
+    { title: 'GlideQuery Aggregate', category: 'GlideQuery', description: 'Count, sum, avg with GlideQuery',
+      code: "var count = new global.GlideQuery('incident')\n    .where('active', true)\n    .aggregate('COUNT')\n    .get()\n    .getOrElse(0);\ngs.info('Active incidents: ' + count);" },
+    { title: 'GlideQuery Insert', category: 'GlideQuery', description: 'Insert record with GlideQuery',
+      code: "var sysId = new global.GlideQuery('incident')\n    .insert({\n        short_description: 'New incident',\n        urgency: 2,\n        impact: 2\n    })\n    .get()\n    .getValue('sys_id');" },
+    { title: 'GlideQuery Update', category: 'GlideQuery', description: 'Update records with GlideQuery',
+      code: "new global.GlideQuery('incident')\n    .where('number', 'INC0010001')\n    .update({\n        state: 2,\n        assigned_to: gs.getUserID()\n    });" },
+    { title: 'onChange Client Script', category: 'Client Script', description: 'React to field value changes',
+      code: "function onChange(control, oldValue, newValue, isLoading) {\n    if (isLoading || newValue === '') return;\n\n    g_form.setValue('field_name', 'value');\n    g_form.setMandatory('field_name', true);\n}" },
+    { title: 'onLoad Client Script', category: 'Client Script', description: 'Run when form loads',
+      code: "function onLoad() {\n    g_form.setVisible('field_name', false);\n    g_form.setReadOnly('field_name', true);\n    g_form.addInfoMessage('Record loaded');\n}" },
+    { title: 'onSubmit Client Script', category: 'Client Script', description: 'Validate before form submission',
+      code: "function onSubmit() {\n    var desc = g_form.getValue('short_description');\n    if (!desc || desc.length < 10) {\n        g_form.addErrorMessage('Short description must be at least 10 characters');\n        return false;\n    }\n    return true;\n}" },
+    { title: 'Before Business Rule', category: 'Business Rule', description: 'Modify record before DB operation',
+      code: "(function executeRule(current, previous) {\n    current.setValue('assignment_group', 'sys_id_here');\n\n    if (current.priority > 3) {\n        current.setAbortAction(true);\n        gs.addErrorMessage('Priority must be 3 or higher');\n    }\n})(current, previous);" },
+    { title: 'After Business Rule', category: 'Business Rule', description: 'Execute logic after DB operation',
+      code: "(function executeRule(current, previous) {\n    var task = new GlideRecord('task');\n    task.initialize();\n    task.short_description = 'Follow-up for ' + current.number;\n    task.parent = current.sys_id;\n    task.insert();\n\n    gs.eventQueue('custom.event', current, current.getValue('assigned_to'), current.getValue('number'));\n})(current, previous);" },
+    { title: 'Async Business Rule', category: 'Business Rule', description: 'Background processing after commit',
+      code: "(function executeRule(current, previous) {\n    var restMessage = new sn_ws.RESTMessageV2('OutboundService', 'POST');\n    restMessage.setStringParameterNoEscape('body', JSON.stringify({\n        number: current.getValue('number'),\n        state: current.getValue('state')\n    }));\n    var response = restMessage.execute();\n    gs.info('External call response: ' + response.getStatusCode());\n})(current, previous);" },
+    { title: 'GlideAjax (Client + Server)', category: 'Patterns', description: 'Client-to-server AJAX pattern',
+      code: "// === CLIENT SCRIPT ===\nvar ga = new GlideAjax('MyScriptInclude');\nga.addParam('sysparm_name', 'myMethod');\nga.addParam('sysparm_param1', g_form.getValue('field'));\nga.getXMLAnswer(function(answer) {\n    var result = JSON.parse(answer);\n    g_form.setValue('target_field', result.value);\n});\n\n// === SCRIPT INCLUDE (client-callable) ===\nvar MyScriptInclude = Class.create();\nMyScriptInclude.prototype = Object.extendsObject(AbstractAjaxProcessor, {\n    myMethod: function() {\n        var param = this.getParameter('sysparm_param1');\n        return JSON.stringify({ value: 'processed: ' + param });\n    },\n    type: 'MyScriptInclude'\n});" },
+    { title: 'REST Message (Outbound)', category: 'REST', description: 'Make outbound REST call from server',
+      code: "try {\n    var restMessage = new sn_ws.RESTMessageV2('ServiceName', 'POST');\n    restMessage.setRequestHeader('Content-Type', 'application/json');\n    restMessage.setRequestBody(JSON.stringify({\n        key: 'value'\n    }));\n\n    var response = restMessage.execute();\n    var statusCode = response.getStatusCode();\n    var body = JSON.parse(response.getBody());\n    gs.info('Response: ' + statusCode);\n} catch (e) {\n    gs.error('REST call failed: ' + e.message);\n}" },
+    { title: 'Scripted REST Resource', category: 'REST', description: 'Handle inbound REST API requests',
+      code: "(function process(request, response) {\n    var body = request.body.data;\n\n    if (!body.number) {\n        response.setStatus(400);\n        response.setBody({ error: 'number is required' });\n        return;\n    }\n\n    var gr = new GlideRecord('incident');\n    if (gr.get('number', body.number)) {\n        response.setStatus(200);\n        response.setBody({\n            sys_id: gr.getUniqueValue(),\n            state: gr.getValue('state')\n        });\n    } else {\n        response.setStatus(404);\n        response.setBody({ error: 'Not found' });\n    }\n})(request, response);" },
+    { title: 'Fix Script Template', category: 'Patterns', description: 'One-time data fix script with logging',
+      code: "// Fix Script: Description of what this fixes\n// Author: Your Name | Date: YYYY-MM-DD\n\nvar count = 0;\nvar gr = new GlideRecord('table_name');\ngr.addEncodedQuery('your_query_here');\ngr.query();\ngs.info('Fix Script: Found ' + gr.getRowCount() + ' records to process');\n\nwhile (gr.next()) {\n    gr.setValue('field', 'new_value');\n    gr.setWorkflow(false);\n    gr.autoSysFields(false);\n    gr.update();\n    count++;\n}\ngs.info('Fix Script: Updated ' + count + ' records');" },
+    { title: 'Scheduled Job Template', category: 'Patterns', description: 'Scheduled script execution pattern',
+      code: "var batchSize = 1000;\nvar processed = 0;\n\nvar gr = new GlideRecord('table_name');\ngr.addEncodedQuery('active=true^sys_updated_onRELATIVELE@dayofweek@ago@7');\ngr.setLimit(batchSize);\ngr.query();\n\nwhile (gr.next()) {\n    try {\n        // Process each record\n        processed++;\n    } catch (e) {\n        gs.error('Scheduled Job error on ' + gr.getUniqueValue() + ': ' + e.message);\n    }\n}\n\ngs.info('Scheduled Job: Processed ' + processed + '/' + gr.getRowCount() + ' records');" },
+    { title: 'ACL Script', category: 'Patterns', description: 'Access control list script template',
+      code: "answer = false;\n\nif (gs.hasRole('admin') || gs.hasRole('itil')) {\n    answer = true;\n}\nelse if (current.assigned_to == gs.getUserID()) {\n    answer = true;\n}\nelse if (gs.getUser().isMemberOf(current.assignment_group)) {\n    answer = true;\n}" },
+  ];
+
+  // ─── State ─────────────────────────────────────────────────────────────────
+
+  var customTemplates = [];
+  var panel = null;
+  var isOpen = false;
+  var isFloating = false;
+  var editingIdx = -1; // -1 = new, >= 0 = editing custom template index
+  var showingForm = false;
+
+  // Load custom templates from storage
+  chrome.storage.local.get({ customTemplates: [] }, function(data) {
+    customTemplates = data.customTemplates || [];
+  });
+
+  // ─── Utilities ─────────────────────────────────────────────────────────────
+
+  function esc(str) {
+    var d = document.createElement('div');
+    d.textContent = str;
+    return d.innerHTML;
+  }
+
+  function escAttr(str) {
+    return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function getAllTemplates() {
+    return BUILT_IN_TEMPLATES.concat(customTemplates.map(function(t) {
+      return Object.assign({}, t, { isCustom: true });
+    }));
+  }
+
+  function getCategories() {
+    var cats = [];
+    getAllTemplates().forEach(function(t) {
+      if (cats.indexOf(t.category) === -1) cats.push(t.category);
+    });
+    return cats;
+  }
+
+  // ─── Syntax Highlighter ────────────────────────────────────────────────────
+
+  function highlightCode(code) {
+    var tokens = [];
+    var i = 0;
+    while (i < code.length) {
+      // Single-line comment
+      if (code[i] === '/' && code[i + 1] === '/') {
+        var end = code.indexOf('\n', i);
+        if (end === -1) end = code.length;
+        tokens.push({ t: 'c', s: code.substring(i, end) }); i = end; continue;
+      }
+      // Multi-line comment
+      if (code[i] === '/' && code[i + 1] === '*') {
+        var end = code.indexOf('*/', i + 2);
+        if (end === -1) end = code.length; else end += 2;
+        tokens.push({ t: 'c', s: code.substring(i, end) }); i = end; continue;
+      }
+      // String
+      if (code[i] === "'" || code[i] === '"') {
+        var q = code[i], end = i + 1;
+        while (end < code.length && code[end] !== q) { if (code[end] === '\\') end++; end++; }
+        tokens.push({ t: 's', s: code.substring(i, end + 1) }); i = end + 1; continue;
+      }
+      // Word
+      if (/[a-zA-Z_$]/.test(code[i])) {
+        var end = i + 1;
+        while (end < code.length && /[a-zA-Z0-9_$]/.test(code[end])) end++;
+        var word = code.substring(i, end);
+        if (SN_APIS.has(word)) tokens.push({ t: 'a', s: word });
+        else if (JS_KEYWORDS.has(word)) tokens.push({ t: 'k', s: word });
+        else tokens.push({ t: 'p', s: word });
+        i = end; continue;
+      }
+      // Number
+      if (/[0-9]/.test(code[i])) {
+        var end = i + 1;
+        while (end < code.length && /[0-9.]/.test(code[end])) end++;
+        tokens.push({ t: 'n', s: code.substring(i, end) }); i = end; continue;
+      }
+      tokens.push({ t: 'p', s: code[i] }); i++;
+    }
+    var cls = { c: 'nk-hl-comment', s: 'nk-hl-string', k: 'nk-hl-keyword', a: 'nk-hl-api', n: 'nk-hl-number' };
+    return tokens.map(function(tk) {
+      var e = esc(tk.s);
+      return cls[tk.t] ? '<span class="' + cls[tk.t] + '">' + e + '</span>' : e;
+    }).join('');
+  }
+
+  // ─── Theme ─────────────────────────────────────────────────────────────────
+
+  function toggleTheme() {
+    if (typeof window.nowaikitToggleTheme === 'function') {
+      var t = window.nowaikitToggleTheme();
+      updateThemeBtn(t);
+    }
+  }
+
+  function updateThemeBtn(theme) {
+    var btn = panel && panel.querySelector('#nk-tpl-theme');
+    if (!btn) return;
+    btn.title = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+    btn.innerHTML = theme === 'dark'
+      ? '<svg width="14" height="14" 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="14" height="14" 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>';
+  }
+
+  // ─── Panel Creation ────────────────────────────────────────────────────────
+
+  function createPanel() {
+    if (panel) return panel;
+    injectStyles();
+
+    panel = document.createElement('div');
+    panel.id = 'nk-tpl-panel';
+    panel.innerHTML = buildPanelHTML();
+    document.body.appendChild(panel);
+
+    // Resize handle
+    var resizeHandle = document.createElement('div');
+    resizeHandle.className = 'nk-tpl-resize';
+    panel.appendChild(resizeHandle);
+    initResize(resizeHandle);
+    initDrag();
+
+    bindEvents();
+    renderTemplates(getAllTemplates());
+
+    // Set theme button state
+    var theme = (typeof window.nowaikitGetTheme === 'function') ? window.nowaikitGetTheme() : 'dark';
+    updateThemeBtn(theme);
+
+    return panel;
+  }
+
+  function buildPanelHTML() {
+    var cats = getCategories();
+    var chipsHTML = '<button class="nk-tpl-chip active" data-cat="all">All</button>';
+    cats.forEach(function(cat) {
+      chipsHTML += '<button class="nk-tpl-chip" data-cat="' + escAttr(cat) + '">' + esc(cat) + '</button>';
+    });
+
+    return '' +
+      '<div class="nk-tpl-header">' +
+        '<div class="nk-tpl-header-left">' +
+          '<svg width="22" height="22" viewBox="0 0 512 512" style="flex-shrink:0"><defs><linearGradient id="nkTplGrad" 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(#nkTplGrad)"/><g transform="translate(256,256) scale(9.13) translate(-22,-23)"><path d="M5 39V7l15 27V7" stroke="#fff" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M34 4l2 7 6 2-6 2-2 7-2-7-6-2 6-2z" fill="#fff" opacity="0.9"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="2s" repeatCount="indefinite"/></path><circle cx="34" cy="34" r="4.5" fill="#fff" opacity="0.8"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="2s" repeatCount="indefinite" begin="0.3s"/></circle></g></svg>' +
+          '<span class="nk-tpl-title"><span class="nk-tpl-logo-now">Now</span><span class="nk-tpl-logo-ai">AI</span><span class="nk-tpl-logo-kit">Kit</span><span class="nk-tpl-logo-suffix"> Templates</span></span>' +
+        '</div>' +
+        '<div class="nk-tpl-header-actions">' +
+          '<button class="nk-tpl-hbtn" id="nk-tpl-add" title="Create template"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>' +
+          '<button class="nk-tpl-hbtn" id="nk-tpl-theme" title="Toggle theme"></button>' +
+          '<button class="nk-tpl-hbtn" id="nk-tpl-float" title="Float window"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="7" y="7" width="10" height="10" rx="1" fill="currentColor" opacity="0.15"/></svg></button>' +
+          '<button class="nk-tpl-hbtn" id="nk-tpl-close" title="Close (Esc)"><svg width="15" height="15" 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>' +
+      '<div class="nk-tpl-search-bar">' +
+        '<input type="text" id="nk-tpl-search" placeholder="Search templates..." autocomplete="off" />' +
+      '</div>' +
+      '<div class="nk-tpl-chips">' + chipsHTML + '</div>' +
+      '<div class="nk-tpl-list" id="nk-tpl-list"></div>' +
+      buildFormHTML();
+  }
+
+  // ─── Create/Edit Form ─────────────────────────────────────────────────────
+
+  function buildFormHTML() {
+    var catOpts = '<option value="Custom">Custom</option>';
+    ['GlideRecord','GlideQuery','Client Script','Business Rule','Patterns','REST'].forEach(function(c) {
+      catOpts += '<option value="' + escAttr(c) + '">' + esc(c) + '</option>';
+    });
+    return '' +
+      '<div class="nk-tpl-form" id="nk-tpl-form" style="display:none">' +
+        '<div class="nk-tpl-form-title" id="nk-tpl-form-heading">Create Template</div>' +
+        '<div class="nk-tpl-fg">' +
+          '<label>Title</label>' +
+          '<input type="text" id="nk-tpl-f-title" placeholder="Template title">' +
+        '</div>' +
+        '<div class="nk-tpl-fg">' +
+          '<label>Category</label>' +
+          '<select id="nk-tpl-f-cat">' + catOpts + '</select>' +
+        '</div>' +
+        '<div class="nk-tpl-fg">' +
+          '<label>Description</label>' +
+          '<input type="text" id="nk-tpl-f-desc" placeholder="Brief description">' +
+        '</div>' +
+        '<div class="nk-tpl-fg">' +
+          '<label>Code</label>' +
+          '<textarea id="nk-tpl-f-code" placeholder="Paste your code here..." rows="8"></textarea>' +
+        '</div>' +
+        '<div class="nk-tpl-form-btns">' +
+          '<button class="nk-tpl-fbtn nk-tpl-fbtn-save" id="nk-tpl-f-save">Save</button>' +
+          '<button class="nk-tpl-fbtn nk-tpl-fbtn-cancel" id="nk-tpl-f-cancel">Cancel</button>' +
+        '</div>' +
+      '</div>';
+  }
+
+  function showForm(tpl) {
+    showingForm = true;
+    var form = panel.querySelector('#nk-tpl-form');
+    var list = panel.querySelector('#nk-tpl-list');
+    var chips = panel.querySelector('.nk-tpl-chips');
+    var search = panel.querySelector('.nk-tpl-search-bar');
+    form.style.display = 'flex';
+    list.style.display = 'none';
+    chips.style.display = 'none';
+    search.style.display = 'none';
+
+    panel.querySelector('#nk-tpl-form-heading').textContent = tpl ? 'Edit Template' : 'Create Template';
+    panel.querySelector('#nk-tpl-f-title').value = tpl ? tpl.title : '';
+    panel.querySelector('#nk-tpl-f-cat').value = tpl ? tpl.category : 'Custom';
+    panel.querySelector('#nk-tpl-f-desc').value = tpl ? tpl.description : '';
+    panel.querySelector('#nk-tpl-f-code').value = tpl ? tpl.code : '';
+  }
+
+  function hideForm() {
+    showingForm = false;
+    editingIdx = -1;
+    var form = panel.querySelector('#nk-tpl-form');
+    var list = panel.querySelector('#nk-tpl-list');
+    var chips = panel.querySelector('.nk-tpl-chips');
+    var search = panel.querySelector('.nk-tpl-search-bar');
+    form.style.display = 'none';
+    list.style.display = 'flex';
+    chips.style.display = 'flex';
+    search.style.display = 'block';
+  }
+
+  function saveTemplate() {
+    var title = (panel.querySelector('#nk-tpl-f-title').value || '').trim();
+    var cat = panel.querySelector('#nk-tpl-f-cat').value;
+    var desc = (panel.querySelector('#nk-tpl-f-desc').value || '').trim();
+    var code = (panel.querySelector('#nk-tpl-f-code').value || '').trim();
+    if (!title || !code) { showToast('Title and code are required', 'warn'); return; }
+
+    var tpl = { title: title, category: cat, description: desc, code: code };
+    if (editingIdx >= 0 && editingIdx < customTemplates.length) {
+      customTemplates[editingIdx] = tpl;
+    } else {
+      customTemplates.push(tpl);
+    }
+    chrome.storage.local.set({ customTemplates: customTemplates });
+    hideForm();
+    rebuildChips();
+    filterTemplates(panel.querySelector('#nk-tpl-search').value);
+    showToast('Template saved');
+  }
+
+  function deleteTemplate(customIdx) {
+    customTemplates.splice(customIdx, 1);
+    chrome.storage.local.set({ customTemplates: customTemplates });
+    rebuildChips();
+    filterTemplates(panel.querySelector('#nk-tpl-search').value);
+    showToast('Template deleted');
+  }
+
+  function rebuildChips() {
+    var container = panel.querySelector('.nk-tpl-chips');
+    var cats = getCategories();
+    var html = '<button class="nk-tpl-chip active" data-cat="all">All</button>';
+    cats.forEach(function(cat) {
+      html += '<button class="nk-tpl-chip" data-cat="' + escAttr(cat) + '">' + esc(cat) + '</button>';
+    });
+    container.innerHTML = html;
+    // Re-bind chip clicks
+    container.querySelectorAll('.nk-tpl-chip').forEach(function(chip) {
+      chip.addEventListener('click', function() {
+        var wasActive = chip.classList.contains('active');
+        container.querySelectorAll('.nk-tpl-chip').forEach(function(c) { c.classList.remove('active'); });
+        if (!wasActive) chip.classList.add('active');
+        else container.querySelector('[data-cat="all"]').classList.add('active');
+        filterTemplates(panel.querySelector('#nk-tpl-search').value);
+      });
+    });
+  }
+
+  // ─── Template Rendering ────────────────────────────────────────────────────
+
+  function renderTemplates(list) {
+    var container = panel.querySelector('#nk-tpl-list');
+    if (!container) return;
+    if (list.length === 0) {
+      container.innerHTML = '<div class="nk-tpl-empty">No templates match your search.</div>';
+      return;
+    }
+    var html = '';
+    list.forEach(function(tpl, i) {
+      var isCustom = !!tpl.isCustom;
+      var customIdx = isCustom ? customTemplates.indexOf(tpl.isCustom ? tpl : null) : -1;
+      // For custom templates, find original index
+      if (isCustom) {
+        for (var ci = 0; ci < customTemplates.length; ci++) {
+          if (customTemplates[ci].title === tpl.title && customTemplates[ci].code === tpl.code) {
+            customIdx = ci; break;
+          }
+        }
+      }
+
+      html +=
+        '<div class="nk-tpl-card nk-tpl-collapsed">' +
+          '<div class="nk-tpl-card-top">' +
+            '<div class="nk-tpl-card-info">' +
+              '<span class="nk-tpl-card-chevron">&#9654;</span>' +
+              '<span class="nk-tpl-card-title">' + esc(tpl.title) + '</span>' +
+              '<span class="nk-tpl-badge">' + esc(tpl.category) + '</span>' +
+              (isCustom ? '<span class="nk-tpl-badge nk-tpl-badge-custom">Custom</span>' : '') +
+            '</div>' +
+            '<div class="nk-tpl-card-btns">' +
+              '<button class="nk-tpl-btn nk-tpl-btn-copy" data-code-idx="' + i + '" title="Copy to clipboard">Copy</button>' +
+              '<button class="nk-tpl-btn nk-tpl-btn-run" data-code-idx="' + i + '" title="Copy &amp; open Background Scripts">Run</button>' +
+              (isCustom ? '<button class="nk-tpl-btn nk-tpl-btn-edit" data-custom-idx="' + customIdx + '" title="Edit">Edit</button>' : '') +
+              (isCustom ? '<button class="nk-tpl-btn nk-tpl-btn-del" data-custom-idx="' + customIdx + '" title="Delete">Del</button>' : '') +
+            '</div>' +
+          '</div>' +
+          '<div class="nk-tpl-card-body">' +
+            (tpl.description ? '<div class="nk-tpl-card-desc">' + esc(tpl.description) + '</div>' : '') +
+            '<pre class="nk-tpl-code"><code>' + highlightCode(tpl.code) + '</code></pre>' +
+          '</div>' +
+        '</div>';
+    });
+    container.innerHTML = html;
+    // Store template refs for button handlers
+    container._templates = list;
+  }
+
+  function filterTemplates(query) {
+    var activeChip = panel.querySelector('.nk-tpl-chip.active');
+    var activeCat = activeChip ? activeChip.dataset.cat : 'all';
+    var q = (query || '').toLowerCase().trim();
+    var all = getAllTemplates();
+
+    var filtered = all.filter(function(tpl) {
+      if (activeCat !== 'all' && tpl.category !== activeCat) return false;
+      if (q) {
+        var searchable = (tpl.title + ' ' + tpl.category + ' ' + tpl.description).toLowerCase();
+        return searchable.indexOf(q) !== -1;
+      }
+      return true;
+    });
+    renderTemplates(filtered);
+  }
+
+  // ─── Actions ───────────────────────────────────────────────────────────────
+
+  function copyCode(code, btn) {
+    navigator.clipboard.writeText(code).then(function() {
+      if (btn) {
+        var orig = btn.textContent;
+        btn.textContent = 'Copied!';
+        btn.classList.add('nk-tpl-btn-ok');
+        setTimeout(function() { btn.textContent = orig; btn.classList.remove('nk-tpl-btn-ok'); }, 1500);
+      }
+    }).catch(function() {
+      if (btn) {
+        btn.textContent = 'Failed';
+        setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
+      }
+    });
+  }
+
+  function openInBgScript(code) {
+    var url = (window.nowaikitState || {}).instanceUrl;
+    // Always copy to clipboard first (reliable, like SNUtils)
+    navigator.clipboard.writeText(code).then(function() {
+      if (!url) {
+        showToast('Script copied! Open Background Scripts and paste.', 'warn');
+        return;
+      }
+      // Also store for auto-inject attempt (best effort)
+      chrome.storage.local.set({ nowaikitPendingScript: code }, function() {
+        window.open(url + '/sys.scripts.do', '_blank');
+        showToast('Script copied & page opening — paste with Ctrl+V');
+      });
+    }).catch(function() {
+      if (!url) {
+        showToast('Could not copy script', 'warn');
+        return;
+      }
+      chrome.storage.local.set({ nowaikitPendingScript: code }, function() {
+        window.open(url + '/sys.scripts.do', '_blank');
+        showToast('Opening Background Scripts');
+      });
+    });
+  }
+
+  function showToast(msg, type) {
+    if (typeof window.showToast === 'function') { window.showToast(msg, type); return; }
+    var t = document.createElement('div');
+    t.className = 'nowaikit-toast' + (type === 'warn' ? ' nowaikit-toast-warn' : '');
+    t.textContent = msg;
+    document.body.appendChild(t);
+    requestAnimationFrame(function() { t.classList.add('nowaikit-toast-show'); });
+    setTimeout(function() {
+      t.classList.remove('nowaikit-toast-show');
+      setTimeout(function() { t.remove(); }, 300);
+    }, 2500);
+  }
+
+  // ─── Open / Close / Toggle ─────────────────────────────────────────────────
+
+  function openPanel() {
+    if (isOpen) return;
+    // Close other panels
+    if (typeof window.closeAISidebar === 'function') window.closeAISidebar();
+    if (typeof window.closeMainPanel === 'function') window.closeMainPanel();
+    createPanel();
+    isOpen = true;
+    panel.classList.add('nk-tpl-open');
+    var s = panel.querySelector('#nk-tpl-search');
+    if (s) setTimeout(function() { s.focus(); }, 150);
+  }
+
+  function closePanel() {
+    if (!isOpen || !panel) return;
+    isOpen = false;
+    panel.classList.remove('nk-tpl-open');
+    if (showingForm) hideForm();
+  }
+
+  function togglePanel() {
+    if (isOpen) closePanel(); else openPanel();
+  }
+
+  // ─── Floating Mode ─────────────────────────────────────────────────────────
+
+  function toggleFloat() {
+    if (!panel) return;
+    isFloating = !isFloating;
+    panel.classList.toggle('nk-tpl-floating', isFloating);
+    var btn = panel.querySelector('#nk-tpl-float');
+    if (btn) {
+      btn.title = isFloating ? 'Dock to side' : 'Float window';
+      btn.innerHTML = isFloating
+        ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>'
+        : '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="7" y="7" width="10" height="10" rx="1" fill="currentColor" opacity="0.15"/></svg>';
+    }
+    if (!isFloating) {
+      panel.style.left = '';
+      panel.style.top = '';
+      panel.style.right = '';
+      panel.style.width = '';
+      panel.style.height = '';
+    }
+  }
+
+  function initDrag() {
+    var isDragging = false, ox = 0, oy = 0;
+    document.addEventListener('mousedown', function(e) {
+      if (!isFloating || !panel) return;
+      var header = panel.querySelector('.nk-tpl-header');
+      if (!header || !header.contains(e.target)) return;
+      if (e.target.closest('.nk-tpl-hbtn')) return;
+      isDragging = true;
+      var r = panel.getBoundingClientRect();
+      ox = e.clientX - r.left; oy = e.clientY - r.top;
+      e.preventDefault();
+    });
+    document.addEventListener('mousemove', function(e) {
+      if (!isDragging) return;
+      panel.style.left = Math.max(0, e.clientX - ox) + 'px';
+      panel.style.top = Math.max(0, e.clientY - oy) + 'px';
+      panel.style.right = 'auto';
+    });
+    document.addEventListener('mouseup', function() { isDragging = false; });
+  }
+
+  function initResize(handle) {
+    var isResizing = false, startX = 0, startW = 0;
+    handle.addEventListener('mousedown', function(e) {
+      if (isFloating) return;
+      isResizing = true; startX = e.clientX; startW = panel.offsetWidth;
+      handle.classList.add('active');
+      e.preventDefault();
+    });
+    document.addEventListener('mousemove', function(e) {
+      if (!isResizing) return;
+      var nw = Math.max(340, Math.min(startW + (startX - e.clientX), window.innerWidth * 0.8));
+      panel.style.width = nw + 'px';
+    });
+    document.addEventListener('mouseup', function() {
+      if (isResizing) { isResizing = false; handle.classList.remove('active'); }
+    });
+  }
+
+  // ─── Event Binding ─────────────────────────────────────────────────────────
+
+  function bindEvents() {
+    panel.querySelector('#nk-tpl-close').addEventListener('click', closePanel);
+    panel.querySelector('#nk-tpl-theme').addEventListener('click', toggleTheme);
+    panel.querySelector('#nk-tpl-float').addEventListener('click', toggleFloat);
+    panel.querySelector('#nk-tpl-add').addEventListener('click', function() {
+      editingIdx = -1; showForm(null);
+    });
+
+    // Search
+    var searchInput = panel.querySelector('#nk-tpl-search');
+    searchInput.addEventListener('input', function() { filterTemplates(this.value); });
+
+    // Chips
+    panel.querySelector('.nk-tpl-chips').addEventListener('click', function(e) {
+      var chip = e.target.closest('.nk-tpl-chip');
+      if (!chip) return;
+      var wasActive = chip.classList.contains('active');
+      panel.querySelectorAll('.nk-tpl-chip').forEach(function(c) { c.classList.remove('active'); });
+      if (!wasActive) chip.classList.add('active');
+      else panel.querySelector('[data-cat="all"]').classList.add('active');
+      filterTemplates(searchInput.value);
+    });
+
+    // Template list actions (delegated)
+    panel.querySelector('#nk-tpl-list').addEventListener('click', function(e) {
+      var templates = this._templates || getAllTemplates();
+      var copyBtn = e.target.closest('.nk-tpl-btn-copy');
+      if (copyBtn) {
+        var idx = parseInt(copyBtn.dataset.codeIdx, 10);
+        if (templates[idx]) copyCode(templates[idx].code, copyBtn);
+        return;
+      }
+      var runBtn = e.target.closest('.nk-tpl-btn-run');
+      if (runBtn) {
+        var idx = parseInt(runBtn.dataset.codeIdx, 10);
+        if (templates[idx]) openInBgScript(templates[idx].code);
+        return;
+      }
+      var editBtn = e.target.closest('.nk-tpl-btn-edit');
+      if (editBtn) {
+        var ci = parseInt(editBtn.dataset.customIdx, 10);
+        if (customTemplates[ci]) { editingIdx = ci; showForm(customTemplates[ci]); }
+        return;
+      }
+      var delBtn = e.target.closest('.nk-tpl-btn-del');
+      if (delBtn) {
+        var ci = parseInt(delBtn.dataset.customIdx, 10);
+        if (ci >= 0) deleteTemplate(ci);
+        return;
+      }
+      // Expand/collapse card on click (not on button clicks which returned above)
+      var card = e.target.closest('.nk-tpl-card');
+      if (card) {
+        card.classList.toggle('nk-tpl-collapsed');
+      }
+    });
+
+    // Form save/cancel
+    panel.querySelector('#nk-tpl-f-save').addEventListener('click', saveTemplate);
+    panel.querySelector('#nk-tpl-f-cancel').addEventListener('click', hideForm);
+
+    // Escape to close
+    panel.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') { e.preventDefault(); if (showingForm) hideForm(); else closePanel(); }
+    });
+  }
+
+  // ─── Keyboard Shortcut ─────────────────────────────────────────────────────
+
+  document.addEventListener('keydown', function(e) {
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'T') {
+      e.preventDefault(); togglePanel();
+    }
+  });
+
+  // Message from popup
+  chrome.runtime.onMessage.addListener(function(message) {
+    if (message.action === 'nowaikit-open-code-templates') togglePanel();
+  });
+
+  // ─── Styles ────────────────────────────────────────────────────────────────
+
+  function injectStyles() {
+    if (document.getElementById('nk-tpl-styles')) return;
+    var s = document.createElement('style');
+    s.id = 'nk-tpl-styles';
+    s.textContent =
+      /* Reset — prevent ServiceNow styles from leaking in */
+      '#nk-tpl-panel,#nk-tpl-panel *{box-sizing:border-box;margin:0;padding:0;line-height:normal;}' +
+
+      /* Panel — sidebar mode */
+      '#nk-tpl-panel{position:fixed;top:0;right:-480px;width:480px;max-width:100vw;height:100vh;' +
+        'background:#0B1020;border-left:1px solid #1e2a3e;z-index:2147483646;' +
+        'display:flex;flex-direction:column;overflow:hidden;' +
+        'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;' +
+        'font-size:13px;color:#e0e5ec;box-shadow:-4px 0 20px rgba(0,0,0,.4);' +
+        'transition:right .3s cubic-bezier(.4,0,.2,1);}' +
+      '#nk-tpl-panel.nk-tpl-open{right:0;}' +
+
+      /* Floating mode */
+      '#nk-tpl-panel.nk-tpl-floating{top:40px;right:40px;width:540px;height:75vh;' +
+        'border-radius:12px;border:1px solid #1e2a3e;box-shadow:0 12px 40px rgba(0,0,0,.6);' +
+        'resize:both;overflow:hidden;min-width:340px;min-height:280px;}' +
+      '#nk-tpl-panel.nk-tpl-floating .nk-tpl-header{cursor:grab;border-radius:12px 12px 0 0;}' +
+      '#nk-tpl-panel.nk-tpl-floating .nk-tpl-header:active{cursor:grabbing;}' +
+      '#nk-tpl-panel.nk-tpl-floating .nk-tpl-resize{display:none;}' +
+
+      /* Resize handle (sidebar mode only) */
+      '.nk-tpl-resize{position:absolute;top:0;left:-3px;width:6px;height:100%;cursor:ew-resize;z-index:10;}' +
+      '.nk-tpl-resize:hover,.nk-tpl-resize.active{background:rgba(0,212,170,.3);}' +
+
+      /* Header */
+      '.nk-tpl-header{display:flex;align-items:center;justify-content:space-between;' +
+        'padding:16px 20px 16px 24px;background:linear-gradient(135deg,#0a2e5c 0%,#065f50 100%);flex-shrink:0;min-height:54px;}' +
+      '.nk-tpl-header-left{display:flex;align-items:center;gap:12px;color:#fff;min-width:0;}' +
+      '.nk-tpl-title{font-size:16px;font-weight:800;color:#fff;white-space:nowrap;letter-spacing:-0.02em;}' +
+      '.nk-tpl-logo-now{background:linear-gradient(135deg,#fff 0%,#B8C4D4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}' +
+      '.nk-tpl-logo-ai{background:linear-gradient(90deg,#00F0C0,#00D4AA,#0F4C81,#00D4AA,#00F0C0);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:nkTplShimmer 4s ease-in-out infinite;}' +
+      '.nk-tpl-logo-kit{background:linear-gradient(135deg,#A0AEBE 0%,#6B7A8E 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}' +
+      '.nk-tpl-logo-suffix{font-weight:400;font-size:0.75em;-webkit-text-fill-color:rgba(255,255,255,0.5);letter-spacing:0.04em;}' +
+      '@keyframes nkTplShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}' +
+      '.nk-tpl-header-actions{display:flex;gap:6px;flex-shrink:0;}' +
+      '.nk-tpl-hbtn{width:32px;height:32px;border:none;background:rgba(255,255,255,.12);' +
+        'color:#fff;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;' +
+        'justify-content:center;transition:background .2s;flex-shrink:0;}' +
+      '.nk-tpl-hbtn:hover{background:rgba(255,255,255,.25);}' +
+
+      /* Search */
+      '.nk-tpl-search-bar{padding:12px 20px 12px 24px;flex-shrink:0;border-bottom:1px solid #1e2a3e;}' +
+      '#nk-tpl-search{width:100%;background:#111828;border:1px solid #1e2a3e;border-radius:6px;' +
+        'padding:10px 12px;color:#e0e5ec;font-size:13px;outline:none;box-sizing:border-box;}' +
+      '#nk-tpl-search:focus{border-color:#00D4AA;box-shadow:0 0 0 2px rgba(0,212,170,.12);}' +
+      '#nk-tpl-search::placeholder{color:#5a6a80;}' +
+
+      /* Category chips */
+      '.nk-tpl-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 20px 10px 24px;flex-shrink:0;border-bottom:1px solid #1e2a3e;}' +
+      '.nk-tpl-chip{background:#111828;border:1px solid #1e2a3e;border-radius:12px;' +
+        'padding:4px 12px;font-size:11px;color:#6b7a90;cursor:pointer;transition:all .15s;white-space:nowrap;}' +
+      '.nk-tpl-chip:hover{border-color:#00D4AA;color:#00D4AA;}' +
+      '.nk-tpl-chip.active{background:rgba(0,212,170,.1);border-color:#00D4AA;color:#00D4AA;font-weight:600;}' +
+
+      /* Template list — scrollable container */
+      '.nk-tpl-list{display:none;}' +
+      '#nk-tpl-panel.nk-tpl-open .nk-tpl-list{display:flex;}' +
+      '#nk-tpl-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;flex-direction:column;gap:14px;min-height:0;}' +
+      '#nk-tpl-list::-webkit-scrollbar{width:5px;}' +
+      '#nk-tpl-list::-webkit-scrollbar-track{background:transparent;}' +
+      '#nk-tpl-list::-webkit-scrollbar-thumb{background:#1e2a3e;border-radius:3px;}' +
+
+      /* Template card — flex column, collapsible */
+      '.nk-tpl-card{background:#111828;border:1px solid #1e2a3e;border-radius:8px;' +
+        'overflow:hidden;transition:border-color .15s;display:flex;flex-direction:column;}' +
+      '.nk-tpl-card:hover{border-color:#2a3a52;}' +
+
+      /* Collapsed state */
+      '.nk-tpl-card.nk-tpl-collapsed .nk-tpl-card-body{display:none;}' +
+      '.nk-tpl-card.nk-tpl-collapsed .nk-tpl-card-top{border-bottom:none;}' +
+
+      /* Chevron indicator */
+      '.nk-tpl-card-chevron{font-size:9px;color:#6b7a90;transition:transform .2s;display:inline-block;flex-shrink:0;width:12px;text-align:center;}' +
+      '.nk-tpl-card:not(.nk-tpl-collapsed) .nk-tpl-card-chevron{transform:rotate(90deg);color:#00D4AA;}' +
+
+      /* Card body (description + code) */
+      '.nk-tpl-card-body{display:flex;flex-direction:column;padding-bottom:4px;}' +
+
+      /* Card header — wraps on narrow widths */
+      '.nk-tpl-card-top{display:flex;align-items:flex-start;justify-content:space-between;' +
+        'padding:12px 14px;border-bottom:1px solid #1e2a3e;gap:10px;flex-wrap:wrap;cursor:pointer;user-select:none;}' +
+      '.nk-tpl-card-info{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;flex-wrap:wrap;}' +
+      '.nk-tpl-card-title{font-size:13px;font-weight:600;color:#e0e5ec;word-break:break-word;line-height:1.4;}' +
+      '.nk-tpl-badge{background:rgba(0,212,170,.08);color:#00D4AA;font-size:10px;font-weight:600;' +
+        'padding:2px 7px;border-radius:8px;white-space:nowrap;line-height:1.3;}' +
+      '.nk-tpl-badge-custom{background:rgba(240,160,48,.1);color:#f0a030;}' +
+      '.nk-tpl-card-btns{display:flex;gap:4px;flex-shrink:0;flex-wrap:wrap;}' +
+
+      /* Action buttons */
+      '.nk-tpl-btn{font-size:11px;font-weight:600;padding:4px 10px;border-radius:4px;cursor:pointer;' +
+        'border:1px solid transparent;transition:all .15s;font-family:inherit;white-space:nowrap;line-height:1.4;}' +
+      '.nk-tpl-btn-copy{background:rgba(0,212,170,.08);color:#00D4AA;border-color:rgba(0,212,170,.15);}' +
+      '.nk-tpl-btn-copy:hover{background:rgba(0,212,170,.18);}' +
+      '.nk-tpl-btn-run{background:rgba(15,76,129,.15);color:#5ba3d9;border-color:rgba(15,76,129,.25);}' +
+      '.nk-tpl-btn-run:hover{background:rgba(15,76,129,.28);}' +
+      '.nk-tpl-btn-edit{background:rgba(240,160,48,.08);color:#f0a030;border-color:rgba(240,160,48,.15);}' +
+      '.nk-tpl-btn-edit:hover{background:rgba(240,160,48,.18);}' +
+      '.nk-tpl-btn-del{background:rgba(255,100,100,.06);color:#ff6464;border-color:rgba(255,100,100,.12);}' +
+      '.nk-tpl-btn-del:hover{background:rgba(255,100,100,.15);}' +
+      '.nk-tpl-btn-ok{background:#00D4AA!important;color:#0B1020!important;border-color:#00D4AA!important;}' +
+
+      /* Card description — full text, no truncation */
+      '.nk-tpl-card-desc{padding:12px 16px 8px;font-size:12px;color:#6b7a90;line-height:1.6;word-break:break-word;}' +
+
+      /* Code block — scrollable, respects panel width */
+      '.nk-tpl-code{margin:6px 12px 12px;padding:16px 18px;background:#080e1a;border-radius:6px;' +
+        'font-family:"JetBrains Mono","Fira Code","Cascadia Code",Consolas,monospace;' +
+        'font-size:12px;line-height:1.8;overflow:auto;white-space:pre;' +
+        'max-height:320px;border:1px solid #1e2a3e;-webkit-overflow-scrolling:touch;}' +
+      '.nk-tpl-code code{font-family:inherit;font-size:inherit;color:#c8d0dc;display:block;word-break:normal;}' +
+      '.nk-tpl-code::-webkit-scrollbar{height:5px;width:5px;}' +
+      '.nk-tpl-code::-webkit-scrollbar-thumb{background:#1e2a3e;border-radius:3px;}' +
+      '.nk-tpl-code::-webkit-scrollbar-corner{background:transparent;}' +
+
+      /* Syntax highlighting */
+      '.nk-hl-keyword{color:#c678dd;font-weight:500;}' +
+      '.nk-hl-api{color:#00D4AA;font-weight:600;}' +
+      '.nk-hl-string{color:#98c379;}' +
+      '.nk-hl-comment{color:#5c6370;font-style:italic;}' +
+      '.nk-hl-number{color:#d19a66;}' +
+
+      /* Empty state */
+      '.nk-tpl-empty{text-align:center;padding:40px 16px;color:#5a6a80;font-size:13px;}' +
+
+      /* Create/Edit form */
+      '.nk-tpl-form{display:none;flex-direction:column;flex:1;overflow-y:auto;padding:14px;gap:10px;}' +
+      '.nk-tpl-form-title{font-size:15px;font-weight:700;color:#e0e5ec;padding-bottom:4px;}' +
+      '.nk-tpl-fg{display:flex;flex-direction:column;gap:3px;}' +
+      '.nk-tpl-fg label{font-size:10px;font-weight:600;color:#6b7a90;text-transform:uppercase;letter-spacing:.4px;}' +
+      '.nk-tpl-fg input,.nk-tpl-fg select,.nk-tpl-fg textarea{width:100%;padding:8px 10px;background:#111828;' +
+        'border:1px solid #1e2a3e;border-radius:5px;color:#e0e5ec;font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .2s;}' +
+      '.nk-tpl-fg input:focus,.nk-tpl-fg select:focus,.nk-tpl-fg textarea:focus{border-color:#00D4AA;}' +
+      '.nk-tpl-fg textarea{font-family:"JetBrains Mono","Fira Code",Consolas,monospace;font-size:12px;line-height:1.5;resize:vertical;min-height:140px;}' +
+      '.nk-tpl-form-btns{display:flex;gap:8px;margin-top:4px;}' +
+      '.nk-tpl-fbtn{flex:1;padding:9px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .2s;}' +
+      '.nk-tpl-fbtn-save{background:linear-gradient(135deg,#00D4AA,#0F4C81);color:#fff;}' +
+      '.nk-tpl-fbtn-save:hover{opacity:.9;}' +
+      '.nk-tpl-fbtn-cancel{background:#1e2a3e;color:#6b7a90;}' +
+      '.nk-tpl-fbtn-cancel:hover{color:#e0e5ec;}' +
+
+      /* ─── Light Theme ─── */
+      'body.nowaikit-light #nk-tpl-panel{background:#ffffff;border-left-color:#e2e8f0;color:#1a202c;box-shadow:-4px 0 20px rgba(0,0,0,.08);}' +
+      'body.nowaikit-light .nk-tpl-search-bar{border-bottom-color:#e2e8f0;}' +
+      'body.nowaikit-light #nk-tpl-search{background:#f8fafc;border-color:#e2e8f0;color:#1a202c;}' +
+      'body.nowaikit-light #nk-tpl-search::placeholder{color:#94a3b8;}' +
+      'body.nowaikit-light .nk-tpl-chips{border-bottom-color:#e2e8f0;}' +
+      'body.nowaikit-light .nk-tpl-chip{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}' +
+      'body.nowaikit-light .nk-tpl-chip:hover{border-color:#0D9488;color:#0D9488;}' +
+      'body.nowaikit-light .nk-tpl-chip.active{background:rgba(13,148,136,.08);border-color:#0D9488;color:#0D9488;}' +
+      'body.nowaikit-light .nk-tpl-card{background:#f8fafc;border-color:#e2e8f0;}' +
+      'body.nowaikit-light .nk-tpl-card:hover{border-color:#cbd5e1;}' +
+      'body.nowaikit-light .nk-tpl-card-top{border-bottom-color:#e2e8f0;}' +
+      'body.nowaikit-light .nk-tpl-card-title{color:#1a202c;}' +
+      'body.nowaikit-light .nk-tpl-badge{background:rgba(13,148,136,.06);color:#0D9488;}' +
+      'body.nowaikit-light .nk-tpl-badge-custom{background:rgba(194,120,3,.08);color:#92620a;}' +
+      'body.nowaikit-light .nk-tpl-card-desc{color:#64748b;}' +
+      'body.nowaikit-light .nk-tpl-code{background:#f1f5f9;border-color:#e2e8f0;}' +
+      'body.nowaikit-light .nk-tpl-code code{color:#334155;}' +
+      'body.nowaikit-light .nk-hl-keyword{color:#a626a4;}' +
+      'body.nowaikit-light .nk-hl-api{color:#0D9488;}' +
+      'body.nowaikit-light .nk-hl-string{color:#50a14f;}' +
+      'body.nowaikit-light .nk-hl-comment{color:#a0a1a7;}' +
+      'body.nowaikit-light .nk-hl-number{color:#986801;}' +
+      'body.nowaikit-light .nk-tpl-btn-copy{background:rgba(13,148,136,.06);color:#0D9488;border-color:rgba(13,148,136,.12);}' +
+      'body.nowaikit-light .nk-tpl-btn-run{background:rgba(59,130,246,.06);color:#3b82f6;border-color:rgba(59,130,246,.12);}' +
+      'body.nowaikit-light .nk-tpl-btn-edit{background:rgba(194,120,3,.06);color:#92620a;border-color:rgba(194,120,3,.1);}' +
+      'body.nowaikit-light .nk-tpl-btn-del{background:rgba(239,68,68,.04);color:#dc2626;border-color:rgba(239,68,68,.08);}' +
+      'body.nowaikit-light .nk-tpl-empty{color:#94a3b8;}' +
+      'body.nowaikit-light .nk-tpl-form-title{color:#1a202c;}' +
+      'body.nowaikit-light .nk-tpl-fg label{color:#64748b;}' +
+      'body.nowaikit-light .nk-tpl-fg input,body.nowaikit-light .nk-tpl-fg select,body.nowaikit-light .nk-tpl-fg textarea{background:#fff;border-color:#e2e8f0;color:#1a202c;}' +
+      'body.nowaikit-light .nk-tpl-fbtn-cancel{background:#e2e8f0;color:#64748b;}' +
+      'body.nowaikit-light #nk-tpl-list::-webkit-scrollbar-thumb{background:#cbd5e1;}' +
+      'body.nowaikit-light .nk-tpl-resize:hover,body.nowaikit-light .nk-tpl-resize.active{background:rgba(13,148,136,.2);}' +
+      'body.nowaikit-light .nk-tpl-card-top{flex-wrap:wrap;}' +
+      'body.nowaikit-light .nk-tpl-card-chevron{color:#94a3b8;}' +
+      'body.nowaikit-light .nk-tpl-card:not(.nk-tpl-collapsed) .nk-tpl-card-chevron{color:#0D9488;}' +
+
+      /* Responsive — small screens */
+      '@media(max-width:520px){' +
+        '#nk-tpl-panel{width:100vw;right:-100vw;}' +
+        '#nk-tpl-panel.nk-tpl-open{right:0;}' +
+        '#nk-tpl-panel.nk-tpl-floating{top:0;right:0;width:100vw;height:100vh;border-radius:0;}' +
+        '.nk-tpl-card-top{flex-direction:column;align-items:stretch;}' +
+        '.nk-tpl-card-btns{justify-content:flex-end;}' +
+      '}' +
+      /* Medium screens — slightly narrower panel */
+      '@media(min-width:521px) and (max-width:768px){' +
+        '#nk-tpl-panel{width:400px;right:-400px;}' +
+      '}';
+
+    document.head.appendChild(s);
+  }
+
+  // Expose for main-panel.js and other scripts
+  window.toggleCodeTemplates = togglePanel;
+  window.closeCodeTemplates = closePanel;
+
+})();