@vnphu/nestjs-api-explorer 0.1.0 → 0.2.0

package/dist/api-explorer.html.js

@@ -106,9 +106,53 @@ function getExplorerHtml(options) {
       width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
       border-radius: var(--radius); border: 1.5px solid var(--border);
       background: var(--bg-white); color: var(--text-muted);
-      cursor: pointer; transition: all .15s; flex-shrink: 0;
+      cursor: pointer; transition: all .15s; flex-shrink: 0; position: relative;
     }
     .icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+    .icon-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+    .icon-btn .dot {
+      position: absolute; top: -3px; right: -3px;
+      width: 8px; height: 8px; border-radius: 50%;
+      background: var(--get-fg); border: 2px solid var(--bg-white);
+    }
+
+    /* ── Global Auth Dropdown ── */
+    #global-auth-dropdown {
+      position: absolute; top: 56px; right: 16px; z-index: 100;
+      width: 340px; background: var(--bg-white);
+      border: 1.5px solid var(--border); border-radius: var(--radius);
+      box-shadow: var(--shadow); padding: 16px;
+    }
+    #global-auth-dropdown.hidden { display: none; }
+    .gauth-title {
+      font-size: 12px; font-weight: 700; color: var(--text);
+      margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
+    }
+    .gauth-title svg { color: var(--accent); }
+    .gauth-active-badge {
+      font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
+      background: var(--get-bg); border: 1px solid var(--get-bdr); color: var(--get-fg);
+    }
+    .gauth-type-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
+    .gauth-type-btn {
+      padding: 4px 11px; border-radius: 20px; border: 1.5px solid var(--border);
+      background: var(--bg-input); color: var(--text-muted);
+      font-size: 11px; font-weight: 500; cursor: pointer; transition: all .12s;
+    }
+    .gauth-type-btn:hover { border-color: var(--accent); color: var(--accent); }
+    .gauth-type-btn.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 600; }
+    .gauth-footer { margin-top: 14px; display: flex; gap: 8px; }
+    .gauth-save-btn {
+      flex: 1; height: 32px; background: var(--accent); color: #fff; border: none;
+      border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s;
+    }
+    .gauth-save-btn:hover { background: #2563eb; }
+    .gauth-clear-btn {
+      height: 32px; padding: 0 12px; background: var(--bg-input); color: var(--text-muted);
+      border: 1.5px solid var(--border); border-radius: var(--radius-sm);
+      font-size: 12px; cursor: pointer; transition: all .15s;
+    }
+    .gauth-clear-btn:hover { border-color: var(--del-fg); color: var(--del-fg); }
 
     /* ── Main ── */
     #main { display: flex; flex: 1; overflow: hidden; }
@@ -137,9 +181,33 @@ function getExplorerHtml(options) {
     #search::placeholder { color: var(--text-dim); }
     .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
 
-    #route-list { flex: 1; overflow-y: auto; padding: 6px 8px 16px; min-height: 0; }
+    #route-list { flex: 1; overflow-y: auto; padding: 4px 8px 16px; min-height: 0; }
     .route-count { font-size: 10px; color: var(--text-dim); padding: 8px 6px 4px; font-weight: 500; }
 
+    .route-group { margin-bottom: 4px; }
+    .route-group-header {
+      display: flex; align-items: center; gap: 6px;
+      padding: 6px 8px 4px; cursor: pointer; user-select: none;
+      border-radius: var(--radius-sm);
+      transition: background .12s;
+    }
+    .route-group-header:hover { background: var(--bg-hover); }
+    .route-group-name {
+      font-size: 11px; font-weight: 700; color: var(--text);
+      text-transform: uppercase; letter-spacing: 0.5px; flex: 1;
+    }
+    .route-group-count {
+      font-size: 10px; font-weight: 600; color: var(--text-dim);
+      background: var(--bg-hover); border: 1px solid var(--border);
+      padding: 1px 6px; border-radius: 10px;
+    }
+    .route-group-chevron {
+      color: var(--text-dim); transition: transform .2s; flex-shrink: 0;
+    }
+    .route-group-chevron.collapsed { transform: rotate(-90deg); }
+    .route-group-body { padding-left: 4px; }
+    .route-group-body.collapsed { display: none; }
+
     .route-item {
       display: flex; align-items: center; gap: 8px;
       padding: 7px 9px; border-radius: var(--radius-sm);
@@ -166,6 +234,10 @@ function getExplorerHtml(options) {
     .method-HEAD   { background: var(--head-bg);  border-color: var(--head-bdr);  color: var(--head-fg);  }
     .method-OPTIONS{ background: var(--opt-bg);   border-color: var(--opt-bdr);   color: var(--opt-fg);   }
 
+    .route-desc {
+      display: block; font-size: 10px; color: var(--text-dim); margin-top: 1px;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
+    }
     .route-path {
       font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
@@ -177,7 +249,74 @@ function getExplorerHtml(options) {
     #sidebar-resize:hover, #sidebar-resize.dragging { background: var(--accent); opacity: .4; }
 
     /* ── Content ── */
-    #content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+    #content { flex: 1; display: flex; flex-direction: row; overflow: hidden; min-width: 0; }
+    #content-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+
+    /* ── Summary Panel ── */
+    #summary-panel {
+      width: 240px; flex-shrink: 0; border-left: 1px solid var(--border);
+      background: var(--bg-white); display: flex; flex-direction: column; overflow: hidden;
+    }
+    #summary-panel.hidden { display: none; }
+    .summary-header {
+      padding: 10px 14px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0;
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .summary-header-title { font-size: 11px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; }
+    #summary-body { flex: 1; overflow-y: auto; padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 14px; }
+    .summary-section { display: flex; flex-direction: column; gap: 6px; }
+    .summary-section-label {
+      font-size: 10px; font-weight: 700; color: var(--text-dim);
+      text-transform: uppercase; letter-spacing: 0.7px;
+    }
+    .summary-url {
+      font-family: var(--font-mono); font-size: 11px; color: var(--text);
+      word-break: break-all; line-height: 1.6; background: var(--bg-input);
+      border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px;
+    }
+    .summary-url .url-path-param { color: var(--put-fg); font-weight: 600; }
+    .summary-row {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
+      font-size: 11px; padding: 3px 0; border-bottom: 1px dashed var(--border);
+    }
+    .summary-row:last-child { border-bottom: none; }
+    .summary-key { font-family: var(--font-mono); color: var(--accent); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .summary-val { font-family: var(--font-mono); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .summary-none { font-size: 11px; color: var(--text-dim); font-style: italic; }
+    .summary-method-pill {
+      display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
+      padding: 2px 7px; border-radius: 4px; margin-right: 6px; vertical-align: middle;
+      border-width: 1px; border-style: solid;
+    }
+    .summary-auth-row {
+      display: flex; align-items: center; gap: 6px; font-size: 11px;
+      padding: 4px 8px; background: var(--bg-input); border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+    }
+    .summary-auth-icon { color: var(--accent); flex-shrink: 0; }
+    .summary-auth-label { color: var(--text-muted); }
+    .summary-auth-val { font-family: var(--font-mono); color: var(--text); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .summary-body-preview {
+      font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
+      background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
+      padding: 6px 8px; max-height: 100px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.5;
+    }
+    .summary-empty {
+      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 8px; padding: 20px; color: var(--text-dim); text-align: center;
+    }
+    .summary-empty p { font-size: 11px; line-height: 1.6; }
+    /* ── DocField rows (body/query/headers/response from docs file) ── */
+    .df-row { padding: 5px 0; border-bottom: 1px dashed var(--border); }
+    .df-row:last-child { border-bottom: none; }
+    .df-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
+    .df-bottom { margin-top: 2px; }
+    .df-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); }
+    .df-type { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); }
+    .df-req  { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: #fef2f2; border: 1px solid #fecaca; color: var(--del-fg); }
+    .df-opt  { font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim); }
+    .df-rules { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); }
+    .df-desc { font-size: 10px; color: var(--text-muted); font-style: italic; }
 
     /* ── URL bar ── */
     #url-bar {
@@ -462,7 +601,13 @@ function getExplorerHtml(options) {
       <span class="base-url-label">Base URL</span>
       <input id="base-url" type="url" spellcheck="false" />
     </div>
-    <button class="icon-btn" id="reload-btn" title="Reload routes (r)">
+    <button class="icon-btn" id="global-auth-btn" title="Global Authentication">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+      </svg>
+    </button>
+    <button class="icon-btn" id="reload-btn" title="Reload routes">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
         <polyline points="23 4 23 10 17 10"/>
         <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
@@ -470,6 +615,48 @@ function getExplorerHtml(options) {
     </button>
   </header>
 
+  <!-- Global Auth Dropdown -->
+  <div id="global-auth-dropdown" class="hidden">
+    <div class="gauth-title">
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+      Global Authentication
+      <span class="gauth-active-badge hidden" id="gauth-active-badge">Active</span>
+    </div>
+    <div class="gauth-type-row">
+      <button class="gauth-type-btn active" data-gauth="none">None</button>
+      <button class="gauth-type-btn" data-gauth="bearer">Bearer Token</button>
+      <button class="gauth-type-btn" data-gauth="apikey">API Key</button>
+    </div>
+    <div id="gauth-none-panel" class="text-muted" style="font-size:12px">No global auth. Per-request auth (Auth tab) still applies.</div>
+    <div id="gauth-bearer-panel" class="hidden flex-col gap-6">
+      <div class="field-group">
+        <label class="field-label">Bearer Token</label>
+        <input class="kv-input" id="gauth-bearer-token" type="text" style="width:100%" placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9…" spellcheck="false" autocomplete="off" />
+      </div>
+    </div>
+    <div id="gauth-apikey-panel" class="hidden flex-col gap-6">
+      <div class="field-group">
+        <label class="field-label">Key Name</label>
+        <input class="kv-input" id="gauth-apikey-name" type="text" style="width:100%" placeholder="X-API-Key" value="X-API-Key" spellcheck="false" />
+      </div>
+      <div class="field-group">
+        <label class="field-label">Key Value</label>
+        <input class="kv-input" id="gauth-apikey-value" type="text" style="width:100%" placeholder="your-secret-key" autocomplete="off" spellcheck="false" />
+      </div>
+      <div class="field-group">
+        <label class="field-label">Add To</label>
+        <select class="styled-select" id="gauth-apikey-in" style="width:160px">
+          <option value="header">Header</option>
+          <option value="query">Query String</option>
+        </select>
+      </div>
+    </div>
+    <div class="gauth-footer">
+      <button class="gauth-save-btn" id="gauth-save-btn">Apply Globally</button>
+      <button class="gauth-clear-btn" id="gauth-clear-btn">Clear</button>
+    </div>
+  </div>
+
   <!-- Main -->
   <div id="main">
 
@@ -491,6 +678,7 @@ function getExplorerHtml(options) {
 
     <!-- Content -->
     <div id="content">
+    <div id="content-main">
 
       <!-- URL bar -->
       <div id="url-bar">
@@ -635,9 +823,25 @@ function getExplorerHtml(options) {
         </div>
 
       </div>
+    </div><!-- content-main -->
+
+    <!-- Summary Panel -->
+    <div id="summary-panel" class="hidden">
+      <div class="summary-header">
+        <span class="summary-header-title">Request Summary</span>
+      </div>
+      <div id="summary-body">
+        <div class="summary-empty" id="summary-empty">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--text-dim)" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+          <p>Select a route to see the request summary</p>
+        </div>
+        <div id="summary-content" class="hidden" style="display:flex;flex-direction:column;gap:14px"></div>
+      </div>
     </div>
-  </div>
-</div>
+
+  </div><!-- content -->
+  </div><!-- main -->
+</div><!-- app -->
 
 <script>
 const CONFIG = ${config};
@@ -648,7 +852,8 @@ const S = {
   pathParams: {}, queryParams: [], reqHeaders: [],
   auth: { type: 'none', bearerToken: '', basicUsername: '', basicPassword: '', apiKeyName: 'X-API-Key', apiKeyValue: '', apiKeyIn: 'header' },
   body: { type: 'none', content: '' },
-  response: null, reqTab: 'params', resTab: 'body', loading: false, _uid: 0,
+  response: null, reqTab: 'params', resTab: 'body', loading: false, _uid: 0, collapsedGroups: new Set(),
+  globalAuth: { type: 'none', bearerToken: '', apiKeyName: 'X-API-Key', apiKeyValue: '', apiKeyIn: 'header' },
 };
 function uid() { return ++S._uid; }
 
@@ -685,6 +890,7 @@ function init() {
   if (isLocal) el.envTag.classList.add('dev');
   bindEvents();
   loadRoutes();
+  renderSummary();
 }
 
 // ── Routes ─────────────────────────────────────────────────────────
@@ -709,25 +915,85 @@ function applyFilter() {
   S.filtered = q ? base.filter(r => r.path.toLowerCase().includes(q) || r.method.toLowerCase().includes(q)) : base;
 }
 
+function groupRoutes(routes) {
+  const groups = {};
+  routes.forEach(r => {
+    // Use group from docs file if available, otherwise fall back to first path segment
+    const key = r.group || (r.path.split('/').filter(Boolean)[0] || 'general');
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(r);
+  });
+  return groups;
+}
+
+function renderRouteItem(r) {
+  const active = S.selected?.method === r.method && S.selected?.path === r.path ? ' active' : '';
+  const desc = r.description ? \`<span class="route-desc">\${esc(r.description.split('\\n')[0])}</span>\` : '';
+  return \`<div class="route-item\${active}" data-method="\${r.method}" data-path="\${esc(r.path)}">
+    <span class="method-badge method-\${r.method}">\${r.method}</span>
+    <span class="route-path" title="\${esc(r.path)}">\${esc(r.path)}</span>
+    \${desc}
+  </div>\`;
+}
+
 function renderRouteList() {
   if (!S.filtered.length) {
     el.routeList.innerHTML = \`<div class="empty-routes">\${S.routes.length ? 'No routes match your search.' : 'No routes found.'}</div>\`;
     return;
   }
-  el.routeList.innerHTML = \`<div class="route-count">\${S.filtered.length} route\${S.filtered.length !== 1 ? 's' : ''}</div>\` +
-    S.filtered.map(r => {
-      const active = S.selected?.method === r.method && S.selected?.path === r.path ? ' active' : '';
-      return \`<div class="route-item\${active}" data-method="\${r.method}" data-path="\${esc(r.path)}">
-        <span class="method-badge method-\${r.method}">\${r.method}</span>
-        <span class="route-path" title="\${esc(r.path)}">\${esc(r.path)}</span>
-      </div>\`;
-    }).join('');
+
+  const searching = el.search.value.trim().length > 0;
+  const total = S.filtered.length;
+
+  // When searching, show flat list; otherwise group by prefix
+  if (searching) {
+    el.routeList.innerHTML =
+      \`<div class="route-count">\${total} result\${total !== 1 ? 's' : ''}</div>\` +
+      S.filtered.map(renderRouteItem).join('');
+  } else {
+    const groups = groupRoutes(S.filtered);
+    el.routeList.innerHTML =
+      \`<div class="route-count">\${total} route\${total !== 1 ? 's' : ''}</div>\` +
+      Object.entries(groups).map(([name, routes]) => {
+        const isCollapsed = S.collapsedGroups && S.collapsedGroups.has(name) ? 'collapsed' : '';
+        return \`<div class="route-group" data-group="\${esc(name)}">
+          <div class="route-group-header" data-toggle="\${esc(name)}">
+            <svg class="route-group-chevron \${isCollapsed}" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+            <span class="route-group-name">/\${esc(name)}</span>
+            <span class="route-group-count">\${routes.length}</span>
+          </div>
+          <div class="route-group-body \${isCollapsed}">\${routes.map(renderRouteItem).join('')}</div>
+        </div>\`;
+      }).join('');
+  }
+
+  // Click handlers for route items
   el.routeList.querySelectorAll('.route-item').forEach(item => {
     item.addEventListener('click', () => {
       const route = S.routes.find(r => r.method === item.dataset.method && r.path === item.dataset.path);
       if (route) selectRoute(route);
     });
   });
+
+  // Collapse/expand group headers
+  el.routeList.querySelectorAll('[data-toggle]').forEach(header => {
+    header.addEventListener('click', () => {
+      const name = header.dataset.toggle;
+      if (!S.collapsedGroups) S.collapsedGroups = new Set();
+      const group = header.closest('.route-group');
+      const body = group.querySelector('.route-group-body');
+      const chevron = group.querySelector('.route-group-chevron');
+      if (S.collapsedGroups.has(name)) {
+        S.collapsedGroups.delete(name);
+        body.classList.remove('collapsed');
+        chevron.classList.remove('collapsed');
+      } else {
+        S.collapsedGroups.add(name);
+        body.classList.add('collapsed');
+        chevron.classList.add('collapsed');
+      }
+    });
+  });
 }
 
 function selectRoute(route) {
@@ -735,7 +1001,7 @@ function selectRoute(route) {
   S.pathParams = {};
   (route.params || []).forEach(p => { S.pathParams[p] = ''; });
   S.response = null;
-  renderResponse(); renderUrlBar(); renderPathParams(); renderRouteList();
+  renderResponse(); renderUrlBar(); renderPathParams(); renderRouteList(); renderSummary();
   el.sendBtn.disabled = false;
   el.methodPill.style.visibility = 'visible';
 
@@ -764,8 +1030,13 @@ function buildUrl() {
   Object.entries(S.pathParams).forEach(([k, v]) => {
     path = path.replace(':' + k, encodeURIComponent(v || (':' + k)));
   });
-  const qp = [...S.queryParams.filter(p => p.enabled && p.key).map(p => [p.key, p.value]),
-    ...(S.auth.type === 'apikey' && S.auth.apiKeyIn === 'query' && S.auth.apiKeyValue ? [[S.auth.apiKeyName, S.auth.apiKeyValue]] : [])];
+  // Per-route apikey in query (overrides global if set)
+  const perRouteQpAuth = S.auth.type === 'apikey' && S.auth.apiKeyIn === 'query' && S.auth.apiKeyValue
+    ? [[S.auth.apiKeyName, S.auth.apiKeyValue]] : [];
+  // Global apikey in query (only if per-route auth is 'none')
+  const globalQpAuth = S.auth.type === 'none' && S.globalAuth.type === 'apikey' && S.globalAuth.apiKeyIn === 'query' && S.globalAuth.apiKeyValue
+    ? [[S.globalAuth.apiKeyName, S.globalAuth.apiKeyValue]] : [];
+  const qp = [...S.queryParams.filter(p => p.enabled && p.key).map(p => [p.key, p.value]), ...perRouteQpAuth, ...globalQpAuth];
   const qs = qp.map(([k, v]) => encodeURIComponent(k) + '=' + encodeURIComponent(v)).join('&');
   return base + path + (qs ? '?' + qs : '');
 }
@@ -788,7 +1059,7 @@ function renderPathParams() {
       <input class="kv-input" data-path-param="\${esc(p)}" placeholder="value" value="\${esc(S.pathParams[p] || '')}" spellcheck="false" />
     </div>\`).join('');
   el.pathParamsRows.querySelectorAll('[data-path-param]').forEach(input => {
-    input.addEventListener('input', () => { S.pathParams[input.dataset.pathParam] = input.value; renderUrlBar(); });
+    input.addEventListener('input', () => { S.pathParams[input.dataset.pathParam] = input.value; renderUrlBar(); renderSummary(); });
   });
 }
 
@@ -840,6 +1111,14 @@ async function sendRequest() {
 
   const headers = {};
   S.reqHeaders.filter(h => h.enabled && h.key).forEach(h => { headers[h.key] = h.value; });
+
+  // Apply global auth first (lower priority)
+  if (S.globalAuth.type === 'bearer' && S.globalAuth.bearerToken)
+    headers['Authorization'] = 'Bearer ' + S.globalAuth.bearerToken;
+  else if (S.globalAuth.type === 'apikey' && S.globalAuth.apiKeyIn === 'header' && S.globalAuth.apiKeyValue)
+    headers[S.globalAuth.apiKeyName || 'X-API-Key'] = S.globalAuth.apiKeyValue;
+
+  // Per-route auth overrides global (higher priority)
   if (S.auth.type === 'bearer' && S.auth.bearerToken) headers['Authorization'] = 'Bearer ' + S.auth.bearerToken;
   else if (S.auth.type === 'basic') headers['Authorization'] = 'Basic ' + btoa(S.auth.basicUsername + ':' + S.auth.basicPassword);
   else if (S.auth.type === 'apikey' && S.auth.apiKeyIn === 'header' && S.auth.apiKeyValue) headers[S.auth.apiKeyName || 'X-API-Key'] = S.auth.apiKeyValue;
@@ -913,6 +1192,155 @@ function renderResponse() {
   ).join('');
 }
 
+// ── Summary Panel ──────────────────────────────────────────────────
+function renderSummary() {
+  const panel = $('summary-panel');
+  const empty = $('summary-empty');
+  const content = $('summary-content');
+
+  if (!S.selected) {
+    panel.classList.remove('hidden');
+    empty.style.display = 'flex';
+    content.style.display = 'none';
+    return;
+  }
+
+  panel.classList.remove('hidden');
+  empty.style.display = 'none';
+  content.style.display = 'flex';
+
+  const method = S.selected.method;
+  const fullUrl = buildUrl();
+
+  // Highlight path params in URL
+  let urlHtml = esc(fullUrl);
+  (S.selected.params || []).forEach(p => {
+    const val = S.pathParams[p];
+    if (val) urlHtml = urlHtml.replace(esc(encodeURIComponent(val)), \`<span class="url-path-param">\${esc(val)}</span>\`);
+  });
+
+  // Active query params
+  const activeQuery = S.queryParams.filter(p => p.enabled && p.key);
+
+  // Active headers (custom + auth)
+  const activeHeaders = S.reqHeaders.filter(h => h.enabled && h.key);
+
+  // Auth being used
+  const effectiveAuth = S.auth.type !== 'none' ? S.auth : S.globalAuth;
+  let authHtml = '';
+  if (effectiveAuth.type === 'bearer') {
+    const tok = effectiveAuth.bearerToken;
+    authHtml = \`<div class="summary-auth-row">
+      <svg class="summary-auth-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+      <span class="summary-auth-label">Bearer</span>
+      <span class="summary-auth-val">\${tok ? tok.slice(0,24) + (tok.length > 24 ? '…' : '') : '<em>no token</em>'}</span>
+      \${S.auth.type === 'none' ? '<span style="font-size:9px;color:var(--text-dim);margin-left:auto">global</span>' : ''}
+    </div>\`;
+  } else if (effectiveAuth.type === 'basic') {
+    authHtml = \`<div class="summary-auth-row">
+      <svg class="summary-auth-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+      <span class="summary-auth-label">Basic</span>
+      <span class="summary-auth-val">\${esc(effectiveAuth.basicUsername || '—')}</span>
+    </div>\`;
+  } else if (effectiveAuth.type === 'apikey') {
+    authHtml = \`<div class="summary-auth-row">
+      <svg class="summary-auth-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
+      <span class="summary-auth-label">\${esc(effectiveAuth.apiKeyName)}</span>
+      <span class="summary-auth-val">\${effectiveAuth.apiKeyIn === 'query' ? '(query)' : '(header)'}</span>
+      \${S.auth.type === 'none' && S.globalAuth.type !== 'none' ? '<span style="font-size:9px;color:var(--text-dim);margin-left:auto">global</span>' : ''}
+    </div>\`;
+  } else {
+    authHtml = '<span class="summary-none">No auth</span>';
+  }
+
+  // Body
+  let bodyHtml = '';
+  if (['POST','PUT','PATCH'].includes(method) && S.body.type !== 'none' && S.body.content) {
+    const preview = S.body.content.slice(0, 200) + (S.body.content.length > 200 ? '…' : '');
+    bodyHtml = \`<div class="summary-section">
+      <div class="summary-section-label">Body <span style="font-weight:400;text-transform:none;color:var(--text-dim)">\${S.body.type}</span></div>
+      <div class="summary-body-preview">\${esc(preview)}</div>
+    </div>\`;
+  }
+
+  content.innerHTML = \`
+    <!-- URL -->
+    <div class="summary-section">
+      <div class="summary-section-label">
+        <span class="summary-method-pill method-\${method}" style="border-color:inherit">\${method}</span>
+        Endpoint
+      </div>
+      <div class="summary-url">\${urlHtml}</div>
+      \${S.selected.description ? \`<div style="font-size:11px;color:var(--text-muted);margin-top:5px;line-height:1.5">\${esc(S.selected.description)}</div>\` : ''}
+    </div>
+
+    <!-- Path params -->
+    \${(S.selected.params || []).length ? \`<div class="summary-section">
+      <div class="summary-section-label">Path Params</div>
+      \${S.selected.params.map(p => \`<div class="summary-row">
+        <span class="summary-key">:\${esc(p)}</span>
+        <span class="summary-val">\${S.pathParams[p] ? esc(S.pathParams[p]) : '<em style="color:var(--del-fg)">empty</em>'}</span>
+      </div>\`).join('')}
+    </div>\` : ''}
+
+    <!-- Query params -->
+    <div class="summary-section">
+      <div class="summary-section-label">Query Params</div>
+      \${activeQuery.length
+        ? activeQuery.map(p => \`<div class="summary-row">
+            <span class="summary-key">\${esc(p.key)}</span>
+            <span class="summary-val">\${esc(p.value)}</span>
+          </div>\`).join('')
+        : '<span class="summary-none">None</span>'}
+    </div>
+
+    <!-- Headers -->
+    <div class="summary-section">
+      <div class="summary-section-label">Headers</div>
+      \${activeHeaders.length
+        ? activeHeaders.map(h => \`<div class="summary-row">
+            <span class="summary-key">\${esc(h.key)}</span>
+            <span class="summary-val">\${esc(h.value)}</span>
+          </div>\`).join('')
+        : '<span class="summary-none">None</span>'}
+    </div>
+
+    <!-- Auth -->
+    <div class="summary-section">
+      <div class="summary-section-label">Auth</div>
+      \${authHtml}
+    </div>
+
+    \${bodyHtml}
+
+    \${renderDocFields('Body Schema', S.selected.body)}
+    \${renderDocFields('Query Params', S.selected.query)}
+    \${renderDocFields('Required Headers', S.selected.headers)}
+    \${renderDocFields('Response', S.selected.response)}
+  \`;
+}
+
+// Render a list of DocField items (body/query/headers/response) in the summary panel
+function renderDocFields(label, fields) {
+  if (!fields || fields.length === 0) return '';
+  return \`<div class="summary-section">
+    <div class="summary-section-label">\${label}</div>
+    \${fields.map(f => {
+      const typeTag  = f.type    ? \`<span class="df-type">\${esc(f.type)}</span>\` : '';
+      const reqTag   = f.required ? '<span class="df-req">required</span>' : '<span class="df-opt">optional</span>';
+      const rulesTxt = f.rules?.length ? \`<span class="df-rules">\${esc(f.rules.join(' · '))}</span>\` : '';
+      const descTxt  = f.description ? \`<span class="df-desc">\${esc(f.description)}</span>\` : '';
+      return \`<div class="df-row">
+        <div class="df-top">
+          <span class="df-name">\${esc(f.name)}</span>
+          \${typeTag}\${reqTag}\${rulesTxt}
+        </div>
+        \${descTxt ? \`<div class="df-bottom">\${descTxt}</div>\` : ''}
+      </div>\`;
+    }).join('')}
+  </div>\`;
+}
+
 function syntaxHighlight(json) {
   return json.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
     .replace(/("(?:\\\\u[\\da-fA-F]{4}|\\\\[^u]|[^\\\\\\"])*"(?:\\s*:)?|\\b(?:true|false|null)\\b|-?\\d+(?:\\.\\d+)?(?:[eE][+\\-]?\\d+)?)/g, m => {
@@ -991,7 +1419,72 @@ function initSidebarResize() {
 function bindEvents() {
   el.reloadBtn.addEventListener('click', loadRoutes);
   el.search.addEventListener('input', () => { applyFilter(); renderRouteList(); });
-  el.baseUrl.addEventListener('input', renderUrlBar);
+
+  // ── Global Auth ──
+  const gauthBtn    = $('global-auth-btn');
+  const gauthDrop   = $('global-auth-dropdown');
+  const gauthBadge  = $('gauth-active-badge');
+  const gauthBearer = $('gauth-bearer-token');
+  const gauthKeyName= $('gauth-apikey-name');
+  const gauthKeyVal = $('gauth-apikey-value');
+  const gauthKeyIn  = $('gauth-apikey-in');
+
+  gauthBtn.addEventListener('click', e => {
+    e.stopPropagation();
+    gauthDrop.classList.toggle('hidden');
+    gauthBtn.classList.toggle('active', !gauthDrop.classList.contains('hidden'));
+  });
+  document.addEventListener('click', e => {
+    if (!gauthDrop.contains(e.target) && e.target !== gauthBtn) {
+      gauthDrop.classList.add('hidden');
+      gauthBtn.classList.remove('active');
+    }
+  });
+
+  document.querySelectorAll('.gauth-type-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.gauth-type-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      const t = btn.dataset.gauth;
+      ['none','bearer','apikey'].forEach(x => $('gauth-'+x+'-panel').classList.toggle('hidden', x !== t));
+    });
+  });
+
+  $('gauth-save-btn').addEventListener('click', () => {
+    const activeBtn = document.querySelector('.gauth-type-btn.active');
+    const type = activeBtn ? activeBtn.dataset.gauth : 'none';
+    S.globalAuth = {
+      type,
+      bearerToken: gauthBearer.value,
+      apiKeyName: gauthKeyName.value || 'X-API-Key',
+      apiKeyValue: gauthKeyVal.value,
+      apiKeyIn: gauthKeyIn.value,
+    };
+    const isActive = type !== 'none' && (S.globalAuth.bearerToken || S.globalAuth.apiKeyValue);
+    gauthBadge.classList.toggle('hidden', !isActive);
+    gauthBtn.classList.toggle('active', isActive);
+    // Show dot indicator
+    const dot = gauthBtn.querySelector('.dot');
+    if (isActive && !dot) {
+      const d = document.createElement('span'); d.className = 'dot';
+      gauthBtn.appendChild(d);
+    } else if (!isActive && dot) dot.remove();
+    gauthDrop.classList.add('hidden');
+    renderUrlBar(); renderSummary();
+  });
+
+  $('gauth-clear-btn').addEventListener('click', () => {
+    S.globalAuth = { type: 'none', bearerToken: '', apiKeyName: 'X-API-Key', apiKeyValue: '', apiKeyIn: 'header' };
+    document.querySelectorAll('.gauth-type-btn').forEach(b => b.classList.remove('active'));
+    document.querySelector('[data-gauth="none"]').classList.add('active');
+    ['none','bearer','apikey'].forEach(x => $('gauth-'+x+'-panel').classList.toggle('hidden', x !== 'none'));
+    gauthBearer.value = ''; gauthKeyVal.value = '';
+    gauthBadge.classList.add('hidden');
+    gauthBtn.classList.remove('active');
+    gauthBtn.querySelector('.dot')?.remove();
+    renderUrlBar();
+  });
+  el.baseUrl.addEventListener('input', () => { renderUrlBar(); renderSummary(); });
   el.sendBtn.addEventListener('click', sendRequest);
 
   el.addQueryBtn.addEventListener('click', () => {
@@ -1029,7 +1522,7 @@ function bindEvents() {
       el.formatBtn.style.display = S.body.type === 'json' ? '' : 'none';
     });
   });
-  el.bodyEditor.addEventListener('input', () => { S.body.content = el.bodyEditor.value; });
+  el.bodyEditor.addEventListener('input', () => { S.body.content = el.bodyEditor.value; renderSummary(); });
   el.formatBtn.addEventListener('click', () => {
     try {
       el.bodyEditor.value = JSON.stringify(JSON.parse(el.bodyEditor.value), null, 2);