npm - @aimeloic/monkey-tester - Versions diffs - 2.0.0 → 2.0.2 - Mend

@aimeloic/monkey-tester 2.0.0 → 2.0.2

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 (4) hide show

package/html.backup.js ADDED Viewed

@@ -0,0 +1,317 @@
+export function getHtmlTemplate(endpoints) {
+  const safeJsonString = Buffer.from(JSON.stringify(endpoints)).toString('base64');
+  return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Endtester — API Environment</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #0e0c09;
+    --surface: #181510;
+    --surface2: #221d14;
+    --border: #3a3020;
+    --accent: #e8a838;
+    --accent2: #c47a1e;
+    --text: #f0e8d8;
+    --text-dim: #9a8c78;
+    --red: #d45c3c;
+    --green: #6ba05a;
+    --blue: #5a86c0;
+    --radius: 8px;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; min-height: 100vh;
+    background-image: radial-gradient(ellipse 80% 60% at 50% -20%, #3a2a0a22 0%, transparent 70%);
+  }
+  header {
+    border-bottom: 1px solid var(--border); padding: 20px 32px; display: flex; align-items: center; gap: 20px;
+    background: #0e0c09ee; backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100;
+  }
+  .logo { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--accent); letter-spacing: 0.02em; }
+  .logo span { color: var(--text-dim); font-size: 13px; font-family: 'DM Mono', monospace; display: block; font-weight: 400; }
+  .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
+  .jwt-wrap, .base-url-wrap { display: flex; align-items: center; gap: 8px; }
+  .jwt-wrap label, .base-url-wrap label { color: var(--text-dim); font-size: 12px; font-family: 'DM Mono', monospace; }
+  #jwt-input, #base-url {
+    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
+    font-family: 'DM Mono', monospace; font-size: 11px; padding: 6px 10px; border-radius: var(--radius); width: 220px; outline: none;
+  }
+  .layout { display: grid; grid-template-columns: 260px 1fr 400px; height: calc(100vh - 65px); }
+  aside { border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 0; }
+  .section-label { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 18px 6px; }
+  .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 18px; cursor: pointer; border-left: 2px solid transparent; color: var(--text-dim); }
+  .nav-item:hover { background: var(--surface); color: var(--text); }
+  .nav-item.active { border-left-color: var(--accent); background: var(--surface); color: var(--accent); }
+  .method-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; padding: 2px 5px; border-radius: 3px; min-width: 45px; text-align: center; }
+  .GET { background: #1a3a22; color: #6ba05a; }
+  .POST { background: #1a2e3a; color: #5a86c0; }
+  .PUT, .PATCH { background: #3a2e10; color: #e8a838; }
+  .DELETE { background: #3a1a14; color: #d45c3c; }
+  .nav-label { font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  main { overflow-y: auto; padding: 24px; }
+  .endpoint-title { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--accent); margin-bottom: 6px; }
+  .endpoint-path { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-dim); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+  .endpoint-desc { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin-bottom: 24px; border-left: 2px solid var(--border); padding-left: 12px; }
+  .form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
+  .form-section-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
+  .field-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
+  .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-row { margin-top: 20px; display: flex; gap: 10px; }
+  .btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
+  .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; }
+  .status-badge { font-family: 'DM Mono', monospace; font-size: 12px; margin-left: auto; padding: 2px 8px; border-radius: 4px; }
+  .status-ok { background: #1a3a22; color: #6ba05a; }
+  .status-err { background: #3a1a14; color: #d45c3c; }
+  .status-idle { background: var(--surface2); color: var(--text-dim); }
+  .response-body { flex: 1; overflow-y: auto; padding: 16px; font-family: 'DM Mono', monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
+  .response-body.empty { color: var(--text-dim); display: flex; align-items: center; justify-content: center; }
+  .json-key { color: #e8a838; } .json-str { color: #9ab878; } .json-num { color: #5a86c0; }
+  #toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface2); border: 1px solid var(--border); padding: 10px 18px; border-radius: var(--radius); opacity: 0; transition: all .25s; }
+  #toast.show { opacity: 1; }
+</style>
+</head>
+<body>
+<div id="endtester-data-vault" data-payload="${safeJsonString}" style="display: none;"></div>
+<header>
+  <div class="logo">Endtester <span>Application Runtime Sandbox</span></div>
+  <div class="header-right">
+    <div class="base-url-wrap">
+      <label>TARGET HOST</label>
+      <input id="base-url" type="text" value="">
+    </div>
+    <div class="jwt-wrap">
+      <label>BEARER AUTH</label>
+      <input id="jwt-input" type="text" placeholder="Token value...">
+    </div>
+  </div>
+</header>
+<div class="layout">
+  <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>
+      <span id="status-badge" class="status-badge status-idle">—</span>
+    </div>
+    <div class="response-body empty" id="response-body">Execute a request row to generate feedback data</div>
+  </div>
+</div>
+<div id="toast"></div>
+<script>
+const rawPayload = document.getElementById('endtester-data-vault').getAttribute('data-payload');
+const ENDPOINTS = JSON.parse(atob(rawPayload));
+let currentEp = '';
+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) {
+    sidebar.innerHTML += '<div style="padding:15px; color:var(--text-dim)">No active application endpoints discovered.</div>';
+    return;
+  }
+  keys.forEach((key, index) => {
+    const ep = ENDPOINTS[key];
+    const div = document.createElement('div');
+    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]);
+}
+function makeInputString(type, id, placeholder, defaultValue) {
+  const pAttr = placeholder ? ' placeholder="' + placeholder + '"' : '';
+  const vAttr = defaultValue !== undefined ? ' value="' + defaultValue + '"' : '';
+  return '<input type="' + type + '" id="' + id + '"' + pAttr + vAttr + ' />';
+}
+function renderPanel(epKey) {
+  currentEp = epKey;
+  const ep = ENDPOINTS[epKey];
+  const main = document.getElementById('main-panel');
+  if (!ep) return;
+  let html = \`
+    <div class="endpoint-title">\${ep.title}</div>
+    <div class="endpoint-path">
+      <span class="method-badge \${ep.method}">\${ep.method}</span>
+      <span>\${ep.path}</span>
+    </div>
+    <div class="endpoint-desc">\${ep.desc}</div>
+  \`;
+  // Path Parameters
+  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 inputHtml = makeInputString('text', 'param-' + p.name, p.placeholder, '');
+      html += \`
+        <div class="field-row">
+          <label class="field-label">\${p.label}</label>
+          \${inputHtml}
+        </div>
+      \`;
+    });
+    html += \`</div>\`;
+  }
+  // FIXED: Renders native, individual form fields instead of a single text payload editor block
+  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 inputHtml = makeInputString(f.type || 'text', 'field-' + f.name, f.placeholder || '', '');
+      html += \`
+        <div class="field-row">
+          <label class="field-label">\--\${f.label}</label>
+          \${inputHtml}
+        </div>
+      \`;
+    });
+    html += \`</div>\`;
+  }
+  html += \`
+    <div class="btn-row">
+      <button class="btn" onclick="sendRequest()">Execute Route</button>
+      <button class="btn btn-secondary" onclick="clearResponse()">Clear Context</button>
+    </div>
+  \`;
+  main.innerHTML = html;
+}
+async function sendRequest() {
+  const ep = ENDPOINTS[currentEp];
+  let path = ep.path;
+  // Compile URL path parameter tags
+  if (ep.params) {
+    for (const p of ep.params) {
+      const val = document.getElementById('param-' + p.name)?.value.trim();
+      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 url = baseUrl + path;
+  const headers = { 'Content-Type': 'application/json' };
+  const jwt = document.getElementById('jwt-input').value.trim();
+  if (jwt) headers['Authorization'] = 'Bearer ' + jwt;
+  // FIXED: Dynamically bundles inputs into a background payload object structure seamlessly
+  let body = undefined;
+  if (ep.fields && ep.fields.length && ['POST', 'PUT', 'PATCH'].includes(ep.method)) {
+    const payloadObject = {};
+    for (const f of ep.fields) {
+      const inputEl = document.getElementById('field-' + f.name);
+      if (inputEl) {
+        let value = inputEl.value.trim();
+        // Cast numerical parameters to prevent type validation parsing failures
+        if (f.type === 'number' && value !== '') {
+          value = Number(value);
+        }
+        payloadObject[f.name] = value;
+      }
+    }
+    body = JSON.stringify(payloadObject);
+  }
+  setResponse(null, 'loading');
+  const start = Date.now();
+  try {
+    const res = await fetch(url, { method: ep.method, headers, body });
+    const ms = Date.now() - start;
+    const text = await res.text();
+    let json;
+    try { json = JSON.parse(text); } catch { json = text; }
+    setResponse(json, res.ok ? 'ok' : 'err', res.status, ms);
+  } catch (err) {
+    setResponse({ error: err.message }, 'err', 'FAIL', 0);
+  }
+}
+function setResponse(data, state, status, ms) {
+  const badge = document.getElementById('status-badge');
+  const body  = document.getElementById('response-body');
+  if (state === 'loading') {
+    badge.className = 'status-badge status-idle';
+    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));
+}
+function clearResponse() {
+  const badge = document.getElementById('status-badge');
+  const body  = document.getElementById('response-body');
+  badge.className = 'status-badge status-idle';
+  badge.textContent = '—';
+  body.className = 'response-body empty';
+  body.textContent = 'Execute a request row to generate feedback data';
+}
+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) {
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) return '<span class="json-key">' + match + '</span>';
+        return '<span class="json-str">' + match + '</span>';
+      }
+      return '<span class="json-num">' + match + '</span>';
+    });
+}
+function showToast(msg) {
+  const t = document.getElementById('toast');
+  t.textContent = msg;
+  t.classList.add('show');
+  setTimeout(() => t.classList.remove('show'), 2500);
+}
+buildSidebar();
+</script>
+</body>
+</html>
+`;
+}

package/htmlTemplate.js CHANGED Viewed

@@ -24,59 +24,150 @@ export function getHtmlTemplate(endpoints) {
     --blue: #5a86c0;
     --radius: 8px;
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body {
-    background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; min-height: 100vh;
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'DM Sans', sans-serif;
+    font-size: 14px;
+    height: 100vh;
+    overflow: hidden; /* Prevents whole-page scrolling */
     background-image: radial-gradient(ellipse 80% 60% at 50% -20%, #3a2a0a22 0%, transparent 70%);
   }
   header {
-    border-bottom: 1px solid var(--border); padding: 20px 32px; display: flex; align-items: center; gap: 20px;
-    background: #0e0c09ee; backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100;
+    border-bottom: 1px solid var(--border);
+    padding: 16px 32px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    background: #0e0c09ee;
+    backdrop-filter: blur(8px);
+    height: 65px;
   }
-  .logo { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--accent); letter-spacing: 0.02em; }
-  .logo span { color: var(--text-dim); font-size: 13px; font-family: 'DM Mono', monospace; display: block; font-weight: 400; }
-  .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
+  .logo { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--accent); letter-spacing: 0.02em; }
+  .logo span { color: var(--text-dim); font-size: 11px; font-family: 'DM Mono', monospace; display: inline-block; margin-left: 8px; font-weight: 400; }
+  .header-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
   .jwt-wrap, .base-url-wrap { display: flex; align-items: center; gap: 8px; }
-  .jwt-wrap label, .base-url-wrap label { color: var(--text-dim); font-size: 12px; font-family: 'DM Mono', monospace; }
+  .jwt-wrap label, .base-url-wrap label { color: var(--text-dim); font-size: 11px; font-family: 'DM Mono', monospace; letter-spacing: 0.05em; }
   #jwt-input, #base-url {
     background: var(--surface2); border: 1px solid var(--border); color: var(--text);
-    font-family: 'DM Mono', monospace; font-size: 11px; padding: 6px 10px; border-radius: var(--radius); width: 220px; outline: none;
+    font-family: 'DM Mono', monospace; font-size: 12px; padding: 6px 12px; border-radius: var(--radius); width: 220px; outline: none;
   }
-  .layout { display: grid; grid-template-columns: 260px 1fr 400px; height: calc(100vh - 65px); }
-  aside { border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 0; }
+  /* Fixed view height viewport matrix layout grid rules */
+  .layout {
+    display: grid;
+    grid-template-columns: 280px 1fr 450px;
+    height: calc(100vh - 65px);
+    overflow: hidden;
+  }
+  aside {
+    border-right: 1px solid var(--border);
+    overflow-y: auto;
+    padding: 16px 0;
+    background: #0b0907;
+  }
   .section-label { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 18px 6px; }
-  .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 18px; cursor: pointer; border-left: 2px solid transparent; color: var(--text-dim); }
+  .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; cursor: pointer; border-left: 2px solid transparent; color: var(--text-dim); transition: all 0.2s; }
   .nav-item:hover { background: var(--surface); color: var(--text); }
   .nav-item.active { border-left-color: var(--accent); background: var(--surface); color: var(--accent); }
-  .method-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; padding: 2px 5px; border-radius: 3px; min-width: 45px; text-align: center; }
+  .method-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; min-width: 52px; text-align: center; text-transform: uppercase; }
   .GET { background: #1a3a22; color: #6ba05a; }
   .POST { background: #1a2e3a; color: #5a86c0; }
   .PUT, .PATCH { background: #3a2e10; color: #e8a838; }
   .DELETE { background: #3a1a14; color: #d45c3c; }
-  .nav-label { font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  main { overflow-y: auto; padding: 24px; }
-  .endpoint-title { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--accent); margin-bottom: 6px; }
-  .endpoint-path { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-dim); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+  .nav-label { font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  main {
+    overflow-y: auto;
+    padding: 32px;
+    background: #0e0c09;
+  }
+  .endpoint-title { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--accent); margin-bottom: 8px; }
+  .endpoint-path { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text-dim); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
   .endpoint-desc { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin-bottom: 24px; border-left: 2px solid var(--border); padding-left: 12px; }
-  .form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
-  .form-section-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
-  .field-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
-  .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-row { margin-top: 20px; display: flex; gap: 10px; }
+  .form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
+  .form-section-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
+  .field-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 16px; margin-bottom: 14px; }
+  .field-row:last-child { margin-bottom: 0; }
+  .field-label { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-dim); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  input[type=text], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=url], select {
+    background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 8px 12px; border-radius: var(--radius); width: 100%; outline: none; transition: border-color 0.2s;
+  }
+  input:focus { border-color: var(--accent); }
+  .btn-row { margin-top: 24px; display: flex; gap: 12px; }
+  .btn { background: var(--accent); color: #0e0c09; border: none; padding: 10px 24px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
+  .btn:hover { background: #f0b850; }
   .btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
-  .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; }
-  .status-badge { font-family: 'DM Mono', monospace; font-size: 12px; margin-left: auto; padding: 2px 8px; border-radius: 4px; }
+  .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;
+    flex-direction: column;
+    overflow: hidden;
+    background: #110e0a;
+  }
+  .response-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface); height: 50px; }
+  .response-header-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
+  .status-badge { font-family: 'DM Mono', monospace; font-size: 12px; margin-left: auto; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
   .status-ok { background: #1a3a22; color: #6ba05a; }
   .status-err { background: #3a1a14; color: #d45c3c; }
   .status-idle { background: var(--surface2); color: var(--text-dim); }
-  .response-body { flex: 1; overflow-y: auto; padding: 16px; font-family: 'DM Mono', monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
-  .response-body.empty { color: var(--text-dim); display: flex; align-items: center; justify-content: center; }
-  .json-key { color: #e8a838; } .json-str { color: #9ab878; } .json-num { color: #5a86c0; }
-  #toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface2); border: 1px solid var(--border); padding: 10px 18px; border-radius: var(--radius); opacity: 0; transition: all .25s; }
+  /* FIXED: Body panel scrolls y natively, inner token element handles x scrolling */
+  .response-body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0;
+    background: #0d0b08;
+  }
+  .response-body.empty {
+    color: var(--text-dim);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    text-align: center;
+    font-size: 13px;
+  }
+  /* FIXED: Token code output container handles micro horizontal data flows elegantly */
+  .json-render-block {
+    display: block;
+    padding: 20px;
+    margin: 0;
+    font-family: 'DM Mono', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    white-space: pre;
+    overflow-x: auto;
+    word-break: normal;
+    word-wrap: normal;
+  }
+  .json-key { color: #e8a838; }
+  .json-str { color: #9ab878; }
+  .json-num { color: #5a86c0; }
+  #toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface2); border: 1px solid var(--border); padding: 10px 18px; border-radius: var(--radius); opacity: 0; transition: all .25s; z-index: 1000; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--accent); }
   #toast.show { opacity: 1; }
 </style>
 </head>
@@ -149,10 +240,9 @@ function buildSidebar() {
   if (keys.length > 0) renderPanel(keys[0]);
 }
-function makeInputString(type, id, placeholder, defaultValue) {
+function makeInputString(type, id, placeholder) {
   const pAttr = placeholder ? ' placeholder="' + placeholder + '"' : '';
-  const vAttr = defaultValue !== undefined ? ' value="' + defaultValue + '"' : '';
-  return '<input type="' + type + '" id="' + id + '"' + pAttr + vAttr + ' />';
+  return '<input type="' + type + '" id="' + id + '"' + pAttr + ' />';
 }
 function renderPanel(epKey) {
@@ -170,11 +260,10 @@ function renderPanel(epKey) {
     <div class="endpoint-desc">\${ep.desc}</div>
   \`;
-  // Path Parameters
   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 inputHtml = makeInputString('text', 'param-' + p.name, p.placeholder, '');
+      const inputHtml = makeInputString('text', 'param-' + p.name, p.placeholder);
       html += \`
         <div class="field-row">
           <label class="field-label">\${p.label}</label>
@@ -185,14 +274,13 @@ function renderPanel(epKey) {
     html += \`</div>\`;
   }
-  // FIXED: Renders native, individual form fields instead of a single text payload editor block
   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 inputHtml = makeInputString(f.type || 'text', 'field-' + f.name, 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>
+          <label class="field-label">\${f.label}</label>
           \${inputHtml}
         </div>
       \`;
@@ -214,7 +302,6 @@ async function sendRequest() {
   const ep = ENDPOINTS[currentEp];
   let path = ep.path;
-  // Compile URL path parameter tags
   if (ep.params) {
     for (const p of ep.params) {
       const val = document.getElementById('param-' + p.name)?.value.trim();
@@ -230,23 +317,20 @@ async function sendRequest() {
   const jwt = document.getElementById('jwt-input').value.trim();
   if (jwt) headers['Authorization'] = 'Bearer ' + jwt;
-  // FIXED: Dynamically bundles inputs into a background payload object structure seamlessly
   let body = undefined;
   if (ep.fields && ep.fields.length && ['POST', 'PUT', 'PATCH'].includes(ep.method)) {
-    const payloadObject = {};
+    const jsonPayload = {};
     for (const f of ep.fields) {
-      const inputEl = document.getElementById('field-' + f.name);
-      if (inputEl) {
-        let value = inputEl.value.trim();
-        // Cast numerical parameters to prevent type validation parsing failures
-        if (f.type === 'number' && value !== '') {
-          value = Number(value);
+      const targetEl = document.getElementById('field-' + f.name);
+      if (targetEl) {
+        let entryVal = targetEl.value.trim();
+        if (f.type === 'number' && entryVal !== '') {
+          entryVal = Number(entryVal);
         }
-        payloadObject[f.name] = value;
+        jsonPayload[f.name] = entryVal;
       }
     }
-    body = JSON.stringify(payloadObject);
+    body = JSON.stringify(jsonPayload);
   }
   setResponse(null, 'loading');
@@ -271,6 +355,7 @@ function setResponse(data, state, status, ms) {
   if (state === 'loading') {
     badge.className = 'status-badge status-idle';
     badge.textContent = '...';
+    body.className = 'response-body empty';
     body.innerHTML = 'Executing transmission...';
     return;
   }
@@ -278,7 +363,10 @@ function setResponse(data, state, status, ms) {
   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));
+  // 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>';
 }
 function clearResponse() {

package/index.js CHANGED Viewed

@@ -2,83 +2,259 @@ import { getHtmlTemplate } from './htmlTemplate.js';
 export function endtesterExpress() {
   return (req, res, next) => {
-    if (req.path !== '/api/tester' && req.path !== '/api/tester/') {
+    if (
+      req.path !== '/api/tester' &&
+      req.path !== '/api/tester/'
+    ) {
       return next();
     }
     const expressApp = req.app;
     const detectedEndpoints = {};
+    // =========================
+    // Detect Input Types
+    // =========================
+    function detectInputType(field) {
+      const lower = field.toLowerCase();
+      if (lower.includes('email')) return 'email';
+      if (lower.includes('password')) return 'password';
+      if (lower.includes('date')) return 'date';
+      if (
+        lower.includes('age') ||
+        lower.includes('price') ||
+        lower.includes('salary') ||
+        lower.includes('stock') ||
+        lower.includes('quantity') ||
+        lower.includes('count') ||
+        lower.includes('total') ||
+        lower.includes('amount') ||
+        lower.includes('id')
+      ) {
+        return 'number';
+      }
+      if (
+        lower.includes('phone') ||
+        lower.includes('tel')
+      ) {
+        return 'tel';
+      }
+      if (
+        lower.includes('url') ||
+        lower.includes('website')
+      ) {
+        return 'url';
+      }
+      return 'text';
+    }
+    // =========================
+    // Extract req.body fields (FIXED MULTI-LINE)
+    // =========================
+    function extractBodyFields(handler) {
+      try {
+        const source = handler.toString();
+        // FIXED: The 's' flag allows matching across multiple lines (\n)
+        const regex = /(const|let|var)\s*\{\s*([^}]+)\s*\}\s*=\s*req\.body/gs;
+        const matches = [...source.matchAll(regex)];
+        const fields = [];
+        matches.forEach((match) => {
+          // Clean out formatting line-breaks, tabs, or rogue inner code comments
+          const cleanedVariablesBlock = match[2]
+            .replace(/\/\/.*$/gm, '') // strip inline comments
+            .replace(/\/\*[\s\S]*?\*\//g, '') // strip block comments
+            .replace(/[\r\n\t]/g, ' '); // normalize lines to spaces
+          const variables = cleanedVariablesBlock
+            .split(',')
+            .map(v => v.trim())
+            .filter(Boolean);
+          variables.forEach((field) => {
+            let realField = field;
+            // Support aliases (e.g., name: username)
+            if (field.includes(':')) {
+              realField = field.split(':')[0].trim();
+            }
+            // Remove defaults values (e.g., age = 0)
+            if (realField.includes('=')) {
+              realField = realField.split('=')[0].trim();
+            }
+            // Clean any trailing whitespace variations
+            realField = realField.trim();
+            const alreadyExists = fields.find(
+              f => f.name === realField
+            );
+            if (!alreadyExists && realField) {
+              fields.push({
+                name: realField,
+                label:
+                  realField.charAt(0).toUpperCase() +
+                  realField.slice(1),
+                type: detectInputType(realField),
+                placeholder: `Enter ${realField}`
+              });
+            }
+          });
+        });
+        return fields;
+      } catch (err) {
+        console.error('Field extraction error:', err);
+        return [];
+      }
+    }
+    // =========================
+    // Parse Express Stack
+    // =========================
     function parseStack(stack, prefix = '') {
       if (!stack) return;
       stack.forEach((layer) => {
+        // =========================
+        // ROUTES
+        // =========================
         if (layer.route) {
-          const methods = Object.keys(layer.route.methods);
-          const path = (prefix + layer.route.path).replace(/\/+/g, '/');
-          if (path.includes('/api/tester')) return;
+          const methods = Object.keys(
+            layer.route.methods
+          );
+          const path = (
+            prefix + layer.route.path
+          ).replace(/\/+/g, '/');
+          if (path.includes('/api/tester')) {
+            return;
+          }
           methods.forEach((method) => {
             const httpMethod = method.toUpperCase();
-            const key = `${httpMethod.toLowerCase()}-${path.replace(/[^a-zA-Z0-9]/g, '-')}`;
-            const pathParams = layer.route.keys ? layer.route.keys.map(k => ({
-              name: k.name,
-              label: k.name.toUpperCase(),
-              placeholder: 'value'
-            })) : [];
-            // Context-aware field mapping for common endpoints
+            const key =
+              `${httpMethod.toLowerCase()}-` +
+              path.replace(/[^a-zA-Z0-9]/g, '-');
+            // =========================
+            // PATH PARAMS
+            // =========================
+            const pathParams = layer.route.keys
+              ? layer.route.keys.map((k) => ({
+                  name: k.name,
+                  label: k.name.toUpperCase(),
+                  placeholder: 'value'
+                }))
+              : [];
+            // =========================
+            // BODY FIELDS
+            // =========================
             let bodyFields = [];
-            if (['POST', 'PUT', 'PATCH'].includes(httpMethod)) {
-              if (path.toLowerCase().includes('login') || path.toLowerCase().includes('auth')) {
-                bodyFields = [
-                  { name: 'email', label: 'Email Address', type: 'text', placeholder: 'user@example.com' },
-                  { name: 'password', label: 'Password', type: 'text', placeholder: '••••••••' }
-                ];
-              } else if (path.toLowerCase().includes('product')) {
-                bodyFields = [
-                  { name: 'name', label: 'Product Name', type: 'text', placeholder: 'Sourdough Loaf' },
-                  { name: 'price', label: 'Unit Price', type: 'number', placeholder: '5.50' },
-                  { name: 'stock', label: 'Initial Inventory', type: 'number', placeholder: '10' }
-                ];
-              } else {
-                // Fallback default structure
-                bodyFields = [
-                  { name: 'key', label: 'Property Key', type: 'text', placeholder: 'value' }
-                ];
-              }
+            if (
+              ['POST', 'PUT', 'PATCH'].includes(
+                httpMethod
+              )
+            ) {
+              layer.route.stack.forEach((stackLayer) => {
+                if (
+                  stackLayer.handle &&
+                  typeof stackLayer.handle === 'function'
+                ) {
+                  const extractedFields =
+                    extractBodyFields(
+                      stackLayer.handle
+                    );
+                  bodyFields.push(...extractedFields);
+                }
+              });
+              // Remove duplicates
+              bodyFields = bodyFields.filter(
+                (field, index, self) =>
+                  index ===
+                  self.findIndex(
+                    f => f.name === field.name
+                  )
+              );
             }
             detectedEndpoints[key] = {
               method: httpMethod,
-              path: path,
+              path,
               title: `${httpMethod} ${path}`,
               desc: `Auto-discovered endpoint: ${path}`,
               params: pathParams,
               fields: bodyFields
             };
           });
-        } else if (layer.name === 'router' && layer.handle && layer.handle.stack) {
+        }
+        // =========================
+        // NESTED ROUTERS
+        // =========================
+        else if (
+          layer.name === 'router' &&
+          layer.handle &&
+          layer.handle.stack
+        ) {
           let routerPath = '';
           if (layer.regexp) {
-            const match = layer.regexp.toString().match(/^\/\^\\(.*?)\\\/\?/);
+            const match = layer.regexp
+              .toString()
+              .match(/^\/\^\\(.*?)\\\/\?/);
             if (match && match[1]) {
-              routerPath = match[1].replace(/\\/g, '');
+              routerPath = match[1].replace(
+                /\\/g,
+                ''
+              );
             }
           }
-          parseStack(layer.handle.stack, prefix + '/' + routerPath);
+          parseStack(
+            layer.handle.stack,
+            prefix + '/' + routerPath
+          );
         }
       });
     }
-    if (expressApp._router && expressApp._router.stack) {
+    // =========================
+    // START PARSING
+    // =========================
+    if (
+      expressApp._router &&
+      expressApp._router.stack
+    ) {
       parseStack(expressApp._router.stack);
     }
-    const fullHtml = getHtmlTemplate(detectedEndpoints);
-    res.setHeader('Content-Type', 'text/html');
+    // =========================
+    // RENDER HTML
+    // =========================
+    const fullHtml =
+      getHtmlTemplate(detectedEndpoints);
+    res.setHeader(
+      'Content-Type',
+      'text/html'
+    );
     return res.send(fullHtml);
   };
 }

package/package.json CHANGED Viewed

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