@aimeloic/monkey-tester 2.0.4 → 2.0.5

package/htmlTemplate.js

@@ -33,7 +33,7 @@ export function getHtmlTemplate(endpoints) {
     font-family: 'DM Sans', sans-serif; 
     font-size: 14px; 
     height: 100vh;
-    overflow: hidden;
+    overflow: hidden; /* Prevents whole-page scrolling */
     background-image: radial-gradient(ellipse 80% 60% at 50% -20%, #3a2a0a22 0%, transparent 70%);
   }
   
@@ -59,6 +59,7 @@ export function getHtmlTemplate(endpoints) {
     font-family: 'DM Mono', monospace; font-size: 12px; padding: 6px 12px; border-radius: var(--radius); width: 220px; outline: none;
   }
   
+  /* Fixed view height viewport matrix layout grid rules */
   .layout { 
     display: grid; 
     grid-template-columns: 280px 1fr 450px; 
@@ -115,6 +116,7 @@ export function getHtmlTemplate(endpoints) {
   .btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
   .btn-secondary:hover { color: var(--text); background: var(--surface); }
   
+  /* FIXED: Response block scroll logic layout rules */
   .response-panel { 
     border-left: 1px solid var(--border); 
     display: flex; 
@@ -129,6 +131,7 @@ export function getHtmlTemplate(endpoints) {
   .status-err { background: #3a1a14; color: #d45c3c; }
   .status-idle { background: var(--surface2); color: var(--text-dim); }
   
+  /* FIXED: Body panel scrolls y natively, inner token element handles x scrolling */
   .response-body { 
     flex: 1; 
     overflow-y: auto; 
@@ -146,6 +149,7 @@ export function getHtmlTemplate(endpoints) {
     font-size: 13px;
   }
   
+  /* FIXED: Token code output container handles micro horizontal data flows elegantly */
   .json-render-block {
     display: block;
     padding: 20px;
@@ -236,30 +240,34 @@ function buildSidebar() {
   if (keys.length > 0) renderPanel(keys[0]);
 }
 
+function makeInputString(type, id, placeholder) {
+  const pAttr = placeholder ? ' placeholder="' + placeholder + '"' : '';
+  return '<input type="' + type + '" id="' + id + '"' + pAttr + ' />';
+}
+
 function renderPanel(epKey) {
   currentEp = epKey;
   const ep = ENDPOINTS[epKey];
   const main = document.getElementById('main-panel');
   if (!ep) return;
 
-  // Escaping using triple backslashes ensures client variables evaluate properly at runtime
   let html = \`
-    <div class="endpoint-title">\\\${ep.title}</div>
+    <div class="endpoint-title">\${ep.title}</div>
     <div class="endpoint-path">
-      <span class="method-badge \\\${ep.method}">\\\${ep.method}</span>
-      <span>\\\${ep.path}</span>
+      <span class="method-badge \${ep.method}">\${ep.method}</span>
+      <span>\${ep.path}</span>
     </div>
-    <div class="endpoint-desc">\\\${ep.desc}</div>
+    <div class="endpoint-desc">\${ep.desc}</div>
   \`;
 
   if (ep.params && ep.params.length) {
     html += \`<div class="form-section"><div class="form-section-title">Path Parameters</div>\`;
     ep.params.forEach(function(p) {
-      const ph = p.placeholder ? ' placeholder="' + p.placeholder + '"' : '';
+      const inputHtml = makeInputString('text', 'param-' + p.name, p.placeholder);
       html += \`
         <div class="field-row">
-          <label class="field-label">\\\${p.label}</label>
-          <input type="text" id="param-\\\${p.name}" \${ph} />
+          <label class="field-label">\${p.label}</label>
+          \${inputHtml}
         </div>
       \`;
     });
@@ -269,12 +277,11 @@ function renderPanel(epKey) {
   if (ep.fields && ep.fields.length) {
     html += \`<div class="form-section"><div class="form-section-title">HTTP JSON Request Payload Parameters</div>\`;
     ep.fields.forEach(function(f) {
-      const type = f.type || 'text';
-      const ph = f.placeholder ? ' placeholder="' + f.placeholder + '"' : '';
+      const inputHtml = makeInputString(f.type || 'text', 'field-' + f.name, f.placeholder || '');
       html += \`
         <div class="field-row">
-          <label class="field-label">\\\${f.label}</label>
-          <input type="\${type}" id="field-\\\${f.name}" \${ph} />
+          <label class="field-label">\${f.label}</label>
+          \${inputHtml}
         </div>
       \`;
     });
@@ -357,6 +364,7 @@ function setResponse(data, state, status, ms) {
   badge.textContent = status + ' · ' + ms + 'ms';
   body.className = 'response-body';
   
+  // FIXED: Nested rendering inside dedicated horizontal scrolling code tag block wrapper elements
   const outputString = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
   body.innerHTML = '<pre class="json-render-block">' + highlightJson(outputString) + '</pre>';
 }
@@ -370,11 +378,10 @@ function clearResponse() {
   body.textContent = 'Execute a request row to generate feedback data';
 }
 
-// Full syntax highlighting for JSON blocks
 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, function(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>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aimeloic/monkey-tester",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Auto route scanning visual runner dashboard.",
   "main": "index.js",
   "type": "module",