@aimeloic/monkey-tester 1.0.5 → 1.0.6

package/htmlTemplate.js

@@ -1,5 +1,4 @@
 export function getHtmlTemplate(endpoints) {
-  // Safe stringification for HTML attribute encoding
   const safeJsonString = Buffer.from(JSON.stringify(endpoints)).toString('base64');
 
   return `
@@ -65,7 +64,7 @@ export function getHtmlTemplate(endpoints) {
   .field-label { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); text-align: right; }
   input[type=text], input[type=number], select { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: 'DM Mono', monospace; font-size: 12px; padding: 7px 10px; border-radius: var(--radius); width: 100%; outline: none; }
   .btn { background: var(--accent); color: #0e0c09; border: none; padding: 10px 22px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; }
-  .btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); margin-left: 8px;}
+  .btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); margin-left: 8px; }
   .response-panel { border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
   .response-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface); }
   .response-header-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-transform: uppercase; }
@@ -102,9 +101,7 @@ export function getHtmlTemplate(endpoints) {
   <aside id="sidebar-nav">
     <div class="section-label">Discovered Endpoints</div>
   </aside>
-
   <main id="main-panel"></main>
-
   <div class="response-panel">
     <div class="response-header">
       <span class="response-header-title">Response Output</span>
@@ -127,8 +124,8 @@ document.getElementById('base-url').value = window.location.origin;
 function buildSidebar() {
   const sidebar = document.getElementById('sidebar-nav');
   const keys = Object.keys(ENDPOINTS);
-  
-  if(keys.length === 0) {
+
+  if (keys.length === 0) {
     sidebar.innerHTML += '<div style="padding:15px; color:var(--text-dim)">No active application endpoints discovered.</div>';
     return;
   }
@@ -139,25 +136,32 @@ function buildSidebar() {
     div.className = index === 0 ? 'nav-item active' : 'nav-item';
     div.setAttribute('data-ep', key);
     div.innerHTML = '<span class="method-badge ' + ep.method + '">' + ep.method + '</span><span class="nav-label">' + ep.path + '</span>';
-    
     div.addEventListener('click', () => {
       document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
       div.classList.add('active');
       clearResponse();
       renderPanel(key);
     });
-    
     sidebar.appendChild(div);
   });
-  
-  if(keys.length > 0) renderPanel(keys[0]);
+
+  if (keys.length > 0) renderPanel(keys[0]);
+}
+
+function makeInput(type, id, placeholder, defaultValue) {
+  var el = document.createElement('input');
+  el.type = type;
+  el.id = id;
+  if (placeholder) el.placeholder = placeholder;
+  if (defaultValue !== undefined) el.value = defaultValue;
+  return el.outerHTML;
 }
 
 function renderPanel(epKey) {
   currentEp = epKey;
   const ep = ENDPOINTS[epKey];
   const main = document.getElementById('main-panel');
-  if(!ep) return;
+  if (!ep) return;
 
   let html = '<div class="endpoint-title">' + ep.title + '</div>' +
     '<div class="endpoint-path">' +
@@ -168,22 +172,22 @@ function renderPanel(epKey) {
 
   if (ep.params && ep.params.length) {
     html += '<div class="form-section"><div class="form-section-title">Path Parameters</div>';
-    ep.params.forEach(p => {
+    ep.params.forEach(function(p) {
       html += '<div class="field-row">' +
         '<label class="field-label">' + p.label + '</label>' +
-        '<input type="text" id="param-' + p.name + '" placeholder="' + p.placeholder + '" />' +
-      '</div>';
+        makeInput('text', 'param-' + p.name, p.placeholder, '') +
+        '</div>';
     });
     html += '</div>';
   }
 
   if (ep.fields && ep.fields.length) {
     html += '<div class="form-section"><div class="form-section-title">JSON Request Body Raw Payload</div>';
-    ep.fields.forEach(f => {
+    ep.fields.forEach(function(f) {
       html += '<div class="field-row">' +
         '<label class="field-label">' + f.label + '</label>' +
-        '<input type="text" id="field-' + f.name + '" value=\'{"key": "value"}\' />' +
-      '</div>';
+        makeInput('text', 'field-' + f.name, '', '{"key": "value"}') +
+        '</div>';
     });
     html += '</div>';
   }
@@ -191,7 +195,7 @@ function renderPanel(epKey) {
   html += '<div class="btn-row">' +
     '<button class="btn" onclick="sendRequest()">Execute Route</button>' +
     '<button class="btn btn-secondary" onclick="clearResponse()">Clear Context</button>' +
-  '</div>';
+    '</div>';
 
   main.innerHTML = html;
 }
@@ -203,26 +207,26 @@ async function sendRequest() {
   if (ep.params) {
     for (const p of ep.params) {
       const val = document.getElementById('param-' + p.name)?.value.trim();
-      if (!val) { showToast('⚠ Parameter ' + p.label + ' required'); return; }
+      if (!val) { showToast('Warning: Parameter ' + p.label + ' is required'); return; }
       path = path.replace(':' + p.name, encodeURIComponent(val));
     }
   }
 
-  const baseUrl = document.getElementById('base-url').value.replace(/\\/+$/, '');
+  const baseUrl = document.getElementById('base-url').value.replace(/\/+$/, '');
   const url = baseUrl + path;
   const headers = { 'Content-Type': 'application/json' };
-  
+
   const jwt = document.getElementById('jwt-input').value.trim();
   if (jwt) headers['Authorization'] = 'Bearer ' + jwt;
 
   let body = undefined;
-  if (ep.fields && ep.fields.length && ['POST','PUT','PATCH'].includes(ep.method)) {
+  if (ep.fields && ep.fields.length && ['POST', 'PUT', 'PATCH'].includes(ep.method)) {
     const rawVal = document.getElementById('field-' + ep.fields[0].name).value.trim();
     try {
       JSON.parse(rawVal);
       body = rawVal;
     } catch(e) {
-      showToast('❌ Malformed JSON Body structure provided.');
+      showToast('Malformed JSON body structure provided.');
       return;
     }
   }
@@ -248,13 +252,14 @@ function setResponse(data, state, status, ms) {
 
   if (state === 'loading') {
     badge.className = 'status-badge status-idle';
-    badge.textContent = '…';
+    badge.textContent = '...';
     body.innerHTML = 'Executing transmission...';
     return;
   }
 
   badge.className = 'status-badge ' + (state === 'ok' ? 'status-ok' : 'status-err');
   badge.textContent = status + ' · ' + ms + 'ms';
+  body.className = 'response-body';
   body.innerHTML = highlightJson(typeof data === 'string' ? data : JSON.stringify(data, null, 2));
 }
 
@@ -270,7 +275,7 @@ function clearResponse() {
 function highlightJson(str) {
   return str
     .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
+    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
       if (/^"/.test(match)) {
         if (/:$/.test(match)) return '<span class="json-key">' + match + '</span>';
         return '<span class="json-str">' + match + '</span>';
@@ -281,7 +286,8 @@ function highlightJson(str) {
 
 function showToast(msg) {
   const t = document.getElementById('toast');
-  t.textContent = msg; t.classList.add('show');
+  t.textContent = msg;
+  t.classList.add('show');
   setTimeout(() => t.classList.remove('show'), 2500);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aimeloic/monkey-tester",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Embedded interactive API testing UI for Node.js backends",
   "main": "index.js",
   "type":"module",