npm - @aimeloic/monkey-tester - Versions diffs - 2.0.1 → 2.0.3 - Mend

@aimeloic/monkey-tester 2.0.1 → 2.0.3

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

package/htmlTemplate.js CHANGED Viewed

@@ -1,1172 +1,404 @@
 export function getHtmlTemplate(endpoints) {
-  const safeJsonString = Buffer
-    .from(JSON.stringify(endpoints))
-    .toString('base64');
+  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"
-/>
+<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"
-/>
+<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;
-  --text:#f0e8d8;
-  --text-dim:#9a8c78;
-  --red:#d45c3c;
-  --green:#6ba05a;
-  --blue:#5a86c0;
-  --radius:8px;
-}
-*{
-  box-sizing:border-box;
-  margin:0;
-  padding:0;
-  min-width:0;
-}
-html,
-body{
-  width:100%;
-  overflow-x:hidden;
-}
-body{
-  background:var(--bg);
-  color:var(--text);
-  font-family:'DM Sans',sans-serif;
-  font-size:14px;
-  min-height:100vh;
-  overflow-x:hidden;
-  background-image:
-    radial-gradient(
-      ellipse 80% 60% at 50% -20%,
-      #3a2a0a22 0%,
-      transparent 70%
-    );
-}
-header{
-  width:100%;
-  border-bottom:1px solid var(--border);
-  padding:20px 24px;
-  display:flex;
-  align-items:center;
-  gap:20px;
-  background:#0e0c09ee;
-  backdrop-filter:blur(8px);
-  position:sticky;
-  top:0;
-  z-index:100;
-  overflow:hidden;
-}
-.logo{
-  font-family:'Playfair Display',serif;
-  font-size:22px;
-  color:var(--accent);
-  letter-spacing:.02em;
-  flex-shrink:0;
-}
-.logo span{
-  color:var(--text-dim);
-  font-size:13px;
-  font-family:'DM Mono',monospace;
-  display:block;
-}
-.header-right{
-  margin-left:auto;
-  display:flex;
-  align-items:center;
-  gap:12px;
-  flex-wrap:wrap;
-  justify-content:flex-end;
-  max-width:100%;
-}
-.jwt-wrap,
-.base-url-wrap{
-  display:flex;
-  align-items:center;
-  gap:8px;
-  min-width:0;
-}
-.jwt-wrap label,
-.base-url-wrap label{
-  color:var(--text-dim);
-  font-size:12px;
-  font-family:'DM Mono',monospace;
-  white-space:nowrap;
-}
-#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;
-  max-width:100%;
-  outline:none;
-}
-.layout{
-  width:100%;
-  max-width:100vw;
-  display:grid;
-  grid-template-columns:
-    minmax(220px,260px)
-    minmax(0,1fr)
-    minmax(300px,400px);
-  height:calc(100vh - 78px);
-  overflow:hidden;
-}
-aside{
-  border-right:1px solid var(--border);
-  overflow-y:auto;
-  overflow-x:hidden;
-  padding:16px 0;
-}
-.section-label{
-  font-size:10px;
-  font-family:'DM Mono',monospace;
-  color:var(--text-dim);
-  letter-spacing:.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);
-  overflow:hidden;
-}
-.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;
-  flex-shrink:0;
-}
-.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;
-  overflow-x:hidden;
-  padding:24px;
-}
-.endpoint-title{
-  font-family:'Playfair Display',serif;
-  font-size:20px;
-  color:var(--accent);
-  margin-bottom:6px;
-  overflow-wrap:anywhere;
-}
-.endpoint-path{
-  font-family:'DM Mono',monospace;
-  font-size:12px;
-  color:var(--text-dim);
-  margin-bottom:20px;
-  display:flex;
-  align-items:center;
-  gap:8px;
-  flex-wrap:wrap;
-  overflow-wrap:anywhere;
-}
-.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;
-  overflow:hidden;
-}
-.form-section-title{
-  font-size:11px;
-  font-family:'DM Mono',monospace;
-  color:var(--text-dim);
-  letter-spacing:.1em;
-  text-transform:uppercase;
-  margin-bottom:14px;
-}
-.field-row{
-  display:grid;
-  grid-template-columns:
-    minmax(90px,140px)
-    minmax(0,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;
-  overflow-wrap:anywhere;
-}
-input,
-select,
-textarea{
-  max-width:100%;
-}
-input[type=text],
-input[type=number],
-input[type=password],
-input[type=email],
-input[type=date],
-input[type=tel],
-input[type=url],
-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-row{
-  margin-top:20px;
-  display:flex;
-  gap:10px;
-  flex-wrap:wrap;
-}
-.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);
-}
-.response-panel{
-  border-left:1px solid var(--border);
-  display:flex;
-  flex-direction:column;
-  overflow:hidden;
-  min-width:0;
-}
-.response-header{
-  padding:14px 18px;
-  border-bottom:1px solid var(--border);
-  display:flex;
-  align-items:center;
-  gap:10px;
-  background:var(--surface);
-  overflow:hidden;
-}
-.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;
-  flex-shrink:0;
-}
-.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:auto;
-  padding:16px;
-  font-family:'DM Mono',monospace;
-  font-size:12px;
-  white-space:pre-wrap;
-  overflow-wrap:anywhere;
-  word-break:break-word;
-}
-.response-body.empty{
-  color:var(--text-dim);
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  text-align: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;
-  max-width:90vw;
-  overflow-wrap:anywhere;
-}
-#toast.show{
-  opacity:1;
-}
-@media (max-width:1200px){
-  .layout{
-    grid-template-columns:
-      220px
-      1fr;
+  :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;
   }
-  .response-panel{
-    display:none;
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    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%);
   }
-}
-@media (max-width:768px){
-  header{
-    flex-direction:column;
-    align-items:flex-start;
+  header {
+    border-bottom: 1px solid var(--border);
+    padding: 16px 32px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    background: #0e0c09ee;
+    backdrop-filter: blur(8px);
+    height: 65px;
   }
-  .header-right{
-    width:100%;
+  .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: 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: 12px; padding: 6px 12px; border-radius: var(--radius); width: 220px; outline: none;
   }
-  .layout{
-    grid-template-columns:1fr;
+  /* Fixed view height viewport matrix layout grid rules */
+  .layout {
+    display: grid;
+    grid-template-columns: 280px 1fr 450px;
+    height: calc(100vh - 65px);
+    overflow: hidden;
   }
-  aside{
-    display:none;
+  aside {
+    border-right: 1px solid var(--border);
+    overflow-y: auto;
+    padding: 16px 0;
+    background: #0b0907;
   }
-  .field-row{
-    grid-template-columns:1fr;
+  .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: 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: 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: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  main {
+    overflow-y: auto;
+    padding: 32px;
+    background: #0e0c09;
   }
-  .field-label{
-    text-align:left;
+  .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: 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); }
+  .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); }
+  /* 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>
 <body>
-<div
-  id="endtester-data-vault"
-  data-payload="${safeJsonString}"
-  style="display:none;"
-></div>
+<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="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=""
-      />
+      <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..."
-      />
+      <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>
+    <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
+      <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));
+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');
+document.getElementById('base-url').value = window.location.origin;
-  const keys =
-    Object.keys(ENDPOINTS);
-  if(keys.length === 0){
-    sidebar.innerHTML +=
-      '<div style="padding:15px;color:var(--text-dim)">No endpoints discovered.</div>';
+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)=>{
+  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'));
+    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]);
-  }
+  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 makeInputString(type, id, placeholder) {
+  const pAttr = placeholder ? ' placeholder="' + placeholder + '"' : '';
+  return '<input type="' + type + '" id="' + id + '"' + pAttr + ' />';
 }
-function renderPanel(epKey){
+function renderPanel(epKey) {
   currentEp = epKey;
   const ep = ENDPOINTS[epKey];
-  const main =
-    document.getElementById('main-panel');
-  if(!ep) return;
+  const main = document.getElementById('main-panel');
+  if (!ep) return;
   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>
-    </div>
-    <div class="endpoint-desc">
-      \${ep.desc}
+      <span class="method-badge \${ep.method}">\${ep.method}</span>
+      <span>\${ep.path}</span>
     </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((p)=>{
+  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>
-          \${makeInputString(
-            'text',
-            'param-' + p.name,
-            p.placeholder,
-            ''
-          )}
+          <label class="field-label">\${p.label}</label>
+          \${inputHtml}
         </div>
       \`;
     });
-    html += '</div>';
+    html += \`</div>\`;
   }
-  if(ep.fields && ep.fields.length){
-    html += \`
-      <div class="form-section">
-        <div class="form-section-title">
-          Request Body
-        </div>
-    \`;
-    ep.fields.forEach((f)=>{
+  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>
-          \${makeInputString(
-            f.type || 'text',
-            'field-' + f.name,
-            f.placeholder || '',
-            ''
-          )}
+          <label class="field-label">\${f.label}</label>
+          \${inputHtml}
         </div>
       \`;
     });
-    html += '</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>
+      <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];
+async function sendRequest() {
+  const ep = ENDPOINTS[currentEp];
   let path = ep.path;
-  if(ep.params){
-    for(const p of ep.params){
-      const val =
-        document
-          .getElementById('param-' + p.name)
-          ?.value
-          .trim();
-      if(!val){
-        showToast(
-          'Parameter required: ' + p.label
-        );
-        return;
-      }
-      path =
-        path.replace(
-          ':' + p.name,
-          encodeURIComponent(val)
-        );
+  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 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;
-  if(
-    ep.fields &&
-    ep.fields.length &&
-    ['POST','PUT','PATCH']
-      .includes(ep.method)
-  ){
-    const payloadObject = {};
-    ep.fields.forEach((f)=>{
-      const input =
-        document.getElementById(
-          'field-' + f.name
-        );
-      if(!input) return;
-      let value = input.value;
-      if(f.type === 'number'){
-        value =
-          value === ''
-            ? null
-            : Number(value);
+  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)) {
+    const jsonPayload = {};
+    for (const f of ep.fields) {
+      const targetEl = document.getElementById('field-' + f.name);
+      if (targetEl) {
+        let entryVal = targetEl.value.trim();
+        if (f.type === 'number' && entryVal !== '') {
+          entryVal = Number(entryVal);
+        }
+        jsonPayload[f.name] = entryVal;
       }
-      payloadObject[f.name] = value;
-    });
-    body = JSON.stringify(payloadObject);
+    }
+    body = JSON.stringify(jsonPayload);
   }
-  setResponse(null,'loading');
+  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();
+  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
-    );
+    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';
+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...';
+    body.className = 'response-body empty';
+    body.innerHTML = 'Executing transmission...';
     return;
   }
-  badge.className =
-    'status-badge ' +
-    (
-      state === 'ok'
-        ? 'status-ok'
-        : 'status-err'
-    );
-  badge.textContent =
-    status + ' · ' + ms + '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(){
-  const badge =
-    document.getElementById(
-      'status-badge'
-    );
-  const body =
-    document.getElementById(
-      'response-body'
-    );
-  badge.className =
-    'status-badge status-idle';
+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';
+  body.className = 'response-body empty';
+  body.textContent = 'Execute a request row to generate feedback data';
 }
-function highlightJson(str){
+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>';
+    .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');
+function showToast(msg) {
+  const t = document.getElementById('toast');
   t.textContent = msg;
   t.classList.add('show');
-  setTimeout(()=>{
-    t.classList.remove('show');
-  },2500);
+  setTimeout(() => t.classList.remove('show'), 2500);
 }
 buildSidebar();
 </script>
 </body>
 </html>
 `;