reqwise-core 1.1.4 → 1.2.0

package/dist/index.js

@@ -68,6 +68,18 @@ function initStorage(cfg3) {
 }
 function saveEntry(entry) {
   memory.push(entry);
+  if (config.historyTTL && config.historyTTL > 0) {
+    const now = Date.now();
+    const ttlMs = config.historyTTL * 24 * 60 * 60 * 1e3;
+    memory = memory.filter((e) => {
+      try {
+        const entryTime = new Date(e.timestamp).getTime();
+        return now - entryTime < ttlMs;
+      } catch (e2) {
+        return true;
+      }
+    });
+  }
   if (config.maxItems && memory.length > config.maxItems) {
     memory = memory.slice(-config.maxItems);
   }
@@ -131,6 +143,7 @@ __export(index_exports, {
   i18n: () => i18n_default,
   panel: () => panel_default,
   renderer: () => renderer_default,
+  rendererSetConfig: () => setConfig2,
   storage: () => storage_default
 });
 module.exports = __toCommonJS(index_exports);
@@ -265,13 +278,15 @@ var catalog = {
     form_url: "URL",
     form_headers: "Headers (JSON)",
     form_body: "Body (JSON)",
-    send_request: "\u2192 Send Request",
+    send_request: "Send Request",
     clear_form: "Clear",
     enter_url_warning: "Please enter a URL",
     response_label: "Response",
     error_label: "Error",
     manual_badge: "Manual",
-    time: "Time"
+    time: "Time",
+    all_methods: "All Methods",
+    all_statuses: "All Statuses"
   },
   tr: {
     requests: "\u0130stekler",
@@ -322,7 +337,9 @@ var catalog = {
     response_label: "Yan\u0131t",
     error_label: "Hata",
     manual_badge: "Manuel",
-    time: "Saat"
+    time: "Saat",
+    all_methods: "T\xFCm Metotlar",
+    all_statuses: "T\xFCm Durumlar"
   },
   az: {
     requests: "Sor\u011Fular",
@@ -373,7 +390,9 @@ var catalog = {
     response_label: "Cavab",
     error_label: "X\u0259ta",
     manual_badge: "Manuel",
-    time: "Vaxt"
+    time: "Vaxt",
+    all_methods: "B\xFCt\xFCn Metodlar",
+    all_statuses: "B\xFCt\xFCn Statuslar"
   },
   ru: {
     requests: "\u0417\u0430\u043F\u0440\u043E\u0441\u044B",
@@ -424,7 +443,9 @@ var catalog = {
     response_label: "\u041E\u0442\u0432\u0435\u0442",
     error_label: "\u041E\u0448\u0438\u0431\u043A\u0430",
     manual_badge: "\u0412\u0440\u0443\u0447\u043D\u0443\u044E",
-    time: "\u0412\u0440\u0435\u043C\u044F"
+    time: "\u0412\u0440\u0435\u043C\u044F",
+    all_methods: "\u0412\u0441\u0435 \u043C\u0435\u0442\u043E\u0434\u044B",
+    all_statuses: "\u0412\u0441\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u044B"
   },
   de: {
     requests: "Anfragen",
@@ -475,7 +496,9 @@ var catalog = {
     response_label: "Antwort",
     error_label: "Fehler",
     manual_badge: "Manuell",
-    time: "Zeit"
+    time: "Zeit",
+    all_methods: "Alle Methoden",
+    all_statuses: "Alle Status"
   },
   fr: {
     requests: "Requ\xEAtes",
@@ -526,7 +549,9 @@ var catalog = {
     response_label: "R\xE9ponse",
     error_label: "Erreur",
     manual_badge: "Manuel",
-    time: "Heure"
+    time: "Heure",
+    all_methods: "Toutes les m\xE9thodes",
+    all_statuses: "Tous les statuts"
   },
   es: {
     requests: "Solicitudes",
@@ -577,7 +602,9 @@ var catalog = {
     response_label: "Respuesta",
     error_label: "Error",
     manual_badge: "Manual",
-    time: "Hora"
+    time: "Hora",
+    all_methods: "Todos los m\xE9todos",
+    all_statuses: "Todos los estados"
   },
   pt: {
     requests: "Requisi\xE7\xF5es",
@@ -628,7 +655,9 @@ var catalog = {
     response_label: "Resposta",
     error_label: "Erro",
     manual_badge: "Manual",
-    time: "Hora"
+    time: "Hora",
+    all_methods: "Todos os m\xE9todos",
+    all_statuses: "Todos os estados"
   },
   zh: {
     requests: "\u8BF7\u6C42",
@@ -679,7 +708,9 @@ var catalog = {
     response_label: "\u54CD\u5E94",
     error_label: "\u9519\u8BEF",
     manual_badge: "\u624B\u52A8",
-    time: "\u65F6\u95F4"
+    time: "\u65F6\u95F4",
+    all_methods: "\u6240\u6709\u65B9\u6CD5",
+    all_statuses: "\u6240\u6709\u72B6\u6001"
   },
   ja: {
     requests: "\u30EA\u30AF\u30A8\u30B9\u30C8",
@@ -730,7 +761,9 @@ var catalog = {
     response_label: "\u30EC\u30B9\u30DD\u30F3\u30B9",
     error_label: "\u30A8\u30E9\u30FC",
     manual_badge: "\u624B\u52D5",
-    time: "\u6642\u523B"
+    time: "\u6642\u523B",
+    all_methods: "\u3059\u3079\u3066\u306E\u30E1\u30BD\u30C3\u30C9",
+    all_statuses: "\u3059\u3079\u3066\u306E\u30B9\u30C6\u30FC\u30BF\u30B9"
   },
   ar: {
     requests: "\u0627\u0644\u0637\u0644\u0628\u0627\u062A",
@@ -781,7 +814,9 @@ var catalog = {
     response_label: "\u0627\u0644\u0627\u0633\u062A\u062C\u0627\u0628\u0629",
     error_label: "\u062E\u0637\u0623",
     manual_badge: "\u064A\u062F\u0648\u064A",
-    time: "\u0627\u0644\u0648\u0642\u062A"
+    time: "\u0627\u0644\u0648\u0642\u062A",
+    all_methods: "\u062C\u0645\u064A\u0639 \u0627\u0644\u0623\u0633\u0627\u0644\u064A\u0628",
+    all_statuses: "\u062C\u0645\u064A\u0639 \u0627\u0644\u062D\u0627\u0644\u0627\u062A"
   },
   ko: {
     requests: "\uC694\uCCAD",
@@ -832,7 +867,9 @@ var catalog = {
     response_label: "\uC751\uB2F5",
     error_label: "\uC624\uB958",
     manual_badge: "\uC218\uB3D9",
-    time: "\uC2DC\uAC04"
+    time: "\uC2DC\uAC04",
+    all_methods: "\uBAA8\uB4E0 \uBA54\uC11C\uB4DC",
+    all_statuses: "\uBAA8\uB4E0 \uC0C1\uD0DC"
   },
   it: {
     requests: "Richieste",
@@ -883,7 +920,9 @@ var catalog = {
     response_label: "Risposta",
     error_label: "Errore",
     manual_badge: "Manuale",
-    time: "Ora"
+    time: "Ora",
+    all_methods: "Tutti i metodi",
+    all_statuses: "Tutti gli stati"
   },
   pl: {
     requests: "\u017B\u0105dania",
@@ -934,7 +973,9 @@ var catalog = {
     response_label: "Odpowied\u017A",
     error_label: "B\u0142\u0105d",
     manual_badge: "R\u0119cznie",
-    time: "Czas"
+    time: "Czas",
+    all_methods: "Wszystkie metody",
+    all_statuses: "Wszystkie statusy"
   },
   nl: {
     requests: "Verzoeken",
@@ -985,7 +1026,9 @@ var catalog = {
     response_label: "Antwoord",
     error_label: "Fout",
     manual_badge: "Handmatig",
-    time: "Tijd"
+    time: "Tijd",
+    all_methods: "Alle methoden",
+    all_statuses: "Alle statussen"
   }
 };
 try {
@@ -1051,13 +1094,19 @@ var i18n_default = {
 init_storage();
 var START_TS = /* @__PURE__ */ Symbol("reqwise_start_ts");
 var cfg2 = {
-  theme: "dark",
+  theme: "system",
   placement: "right",
+  show: "general",
   defaultOpen: false,
   enabled: true,
-  maxItems: 200,
+  hotkey: "ctrl+shift+e",
+  maxItems: 500,
   persistHistory: true,
-  defaultLang: "en"
+  defaultLang: "en",
+  langs: ["en"],
+  ignore: [],
+  maskHeaders: [],
+  maskFields: []
 };
 function initClient(c) {
   if (c) cfg2 = { ...cfg2 || {}, ...c };
@@ -1089,7 +1138,21 @@ function buildEntry(base) {
 }
 function recordPartial(entry) {
   const e = buildEntry(entry);
+  try {
+    if (cfg2.onRequest) cfg2.onRequest(entry);
+  } catch (err) {
+    console.error("[reqwise] onRequest callback error", err);
+  }
   storage_default.saveEntry(e);
+  try {
+    if (e.error && cfg2.onError) {
+      cfg2.onError(e);
+    } else if (!e.error && cfg2.onResponse) {
+      cfg2.onResponse(e);
+    }
+  } catch (err) {
+    console.error("[reqwise] onResponse/onError callback error", err);
+  }
 }
 function wrapAxios(instance) {
   if (!instance || typeof instance.interceptors !== "object") return;
@@ -1106,9 +1169,10 @@ function wrapAxios(instance) {
         const req = res.config || {};
         const start = req[START_TS] || Date.now();
         const duration = Date.now() - start;
+        const fullUrl = (req.baseURL || "") + (req.url || "");
         const entry = buildEntry({
           method: (req.method || "GET").toUpperCase(),
-          url: req.url || req.baseURL || "",
+          url: fullUrl || "",
           requestHeaders: filter_default.maskHeaders(req.headers),
           requestBody: filter_default.maskFields(req.data),
           status: res.status,
@@ -1128,9 +1192,10 @@ function wrapAxios(instance) {
         const start = req[START_TS] || Date.now();
         const duration = Date.now() - start;
         const response = err?.response || {};
+        const fullUrl = (req.baseURL || "") + (req.url || "");
         const entry = buildEntry({
           method: (req.method || "GET").toUpperCase(),
-          url: req.url || req.baseURL || "",
+          url: fullUrl || "",
           requestHeaders: filter_default.maskHeaders(req.headers),
           requestBody: filter_default.maskFields(req.data),
           status: response.status,
@@ -1190,50 +1255,50 @@ async function fetchWithRecord(input, init) {
     throw err;
   }
 }
-async function get(url, config2) {
+async function get(url, config3) {
   if (cfg2.axiosInstance && typeof cfg2.axiosInstance.get === "function") {
-    return cfg2.axiosInstance.get(url, config2);
+    return cfg2.axiosInstance.get(url, config3);
   }
-  return fetchWithRecord(url, { method: "GET", headers: config2?.headers });
+  return fetchWithRecord(url, { method: "GET", headers: config3?.headers });
 }
-async function post(url, data, config2) {
+async function post(url, data, config3) {
   if (cfg2.axiosInstance && typeof cfg2.axiosInstance.post === "function") {
-    return cfg2.axiosInstance.post(url, data, config2);
+    return cfg2.axiosInstance.post(url, data, config3);
   }
   const body = typeof data === "string" ? data : JSON.stringify(data);
   return fetchWithRecord(url, {
     method: "POST",
     body,
-    headers: { "Content-Type": "application/json", ...config2?.headers }
+    headers: { "Content-Type": "application/json", ...config3?.headers }
   });
 }
-async function put(url, data, config2) {
+async function put(url, data, config3) {
   if (cfg2.axiosInstance && typeof cfg2.axiosInstance.put === "function") {
-    return cfg2.axiosInstance.put(url, data, config2);
+    return cfg2.axiosInstance.put(url, data, config3);
   }
   const body = typeof data === "string" ? data : JSON.stringify(data);
   return fetchWithRecord(url, {
     method: "PUT",
     body,
-    headers: { "Content-Type": "application/json", ...config2?.headers }
+    headers: { "Content-Type": "application/json", ...config3?.headers }
   });
 }
-async function patch(url, data, config2) {
+async function patch(url, data, config3) {
   if (cfg2.axiosInstance && typeof cfg2.axiosInstance.patch === "function") {
-    return cfg2.axiosInstance.patch(url, data, config2);
+    return cfg2.axiosInstance.patch(url, data, config3);
   }
   const body = typeof data === "string" ? data : JSON.stringify(data);
   return fetchWithRecord(url, {
     method: "PATCH",
     body,
-    headers: { "Content-Type": "application/json", ...config2?.headers }
+    headers: { "Content-Type": "application/json", ...config3?.headers }
   });
 }
-async function del(url, config2) {
+async function del(url, config3) {
   if (cfg2.axiosInstance && typeof cfg2.axiosInstance.delete === "function") {
-    return cfg2.axiosInstance.delete(url, config2);
+    return cfg2.axiosInstance.delete(url, config3);
   }
-  return fetchWithRecord(url, { method: "DELETE", headers: config2?.headers });
+  return fetchWithRecord(url, { method: "DELETE", headers: config3?.headers });
 }
 var ReqwiseClient = {
   init: initClient,
@@ -1274,7 +1339,8 @@ var styles = `
   position: fixed;
   right: 0;
   top: 0;
-  height: auto;
+  bottom: 0;
+  height: 100vh;
   width: var(--rq-width);
   min-width: var(--rq-min-width);
   max-width: 800px;
@@ -1287,7 +1353,6 @@ var styles = `
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
   font-size: 14px;
   line-height: 1.5;
-  overflow: visible;
   transition: transform var(--rq-duration) ease;
 }
 
@@ -1396,6 +1461,7 @@ var styles = `
   display: flex;
   gap: 32px;
   padding: 0 24px;
+  margin-bottom: 16px;
   border-bottom: 1px solid var(--rq-border);
   flex-shrink: 0;
   background: var(--rq-bg);
@@ -1425,11 +1491,12 @@ var styles = `
 
 /* Body/Content */
 #reqwise-panel .rq-body {
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
   flex: 1 1 auto;
-  scroll-behavior: smooth;
+  min-height: 0;
 }
 
 #reqwise-panel .rq-body::-webkit-scrollbar {
@@ -1608,6 +1675,37 @@ var styles = `
   color: var(--rq-fg);
 }
 
+/* Expandable JSON - collapsed by default */
+.rq-json-expandable {
+  transition: max-height var(--rq-duration) ease;
+  overflow: hidden;
+}
+
+.rq-json-expandable.rq-json-collapsed {
+  max-height: 140px;
+  position: relative;
+  overflow-y: hidden;
+}
+
+.rq-json-expandable.rq-json-collapsed::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: linear-gradient(transparent, var(--rq-bg-secondary));
+  pointer-events: none;
+}
+
+.rq-json-expandable:not(.rq-json-collapsed) {
+  max-height: none;
+}
+
+.rq-json-expandable:not(.rq-json-collapsed)::after {
+  display: none;
+}
+
 .rq-json-key {
   color: #0ea5e9;
 }
@@ -1770,6 +1868,25 @@ var styles = `
   opacity: 0.9;
 }
 
+/* Expand/collapse toggle */
+.rq-expand-toggle {
+  padding: 4px 8px;
+  font-size: 11px;
+  background: var(--rq-bg-secondary);
+  border: 1px solid var(--rq-border);
+  border-radius: 3px;
+  color: var(--rq-fg);
+  cursor: pointer;
+  font-weight: 500;
+  transition: all var(--rq-duration) ease;
+  white-space: nowrap;
+}
+
+.rq-expand-toggle:hover {
+  border-color: var(--rq-fg-secondary);
+  background: rgba(255, 255, 255, 0.08);
+}
+
 /* Placements */
 #reqwise-panel.placement-left {
   left: 0;
@@ -1842,63 +1959,84 @@ var styles = `
   display: inline-flex !important;
 }
 
-.rq-toggle:hover { transform: scale(1.03); }
-
 .rq-toggle img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); }
 
-/* Placement-specific toggle positioning (relative to panel so it moves with it) */
-#reqwise-panel.placement-right .rq-toggle {
+/* Toggle button positioning (inside panel, at the edge) */
+.rq-toggle {
   position: absolute;
-  left: -40px; /* adjacent to panel, to the left */
   top: 50%;
   transform: translateY(-50%);
+  z-index: calc(var(--rq-z) + 1);
+}
+
+#reqwise-panel.placement-right .rq-toggle {
+  left: -40px;
   border-radius: 6px 0 0 6px;
-  writing-mode: vertical-rl; /* vertical text, reading from right side */
+  writing-mode: vertical-rl;
   width: 40px;
 }
 
 #reqwise-panel.placement-left .rq-toggle {
-  position: absolute;
-  right: -40px; /* adjacent to panel, to the right (panel on left) */
-  top: 50%;
-  transform: translateY(-50%);
+  right: -40px;
   border-radius: 0 6px 6px 0;
-  writing-mode: vertical-rl; /* match right placement so text faces inward */
+  writing-mode: vertical-rl;
   width: 40px;
 }
 
-/* Rotate logo when toggle is vertical so it faces toward the page (opposite of panel) */
 #reqwise-panel.placement-right .rq-toggle img { transform: rotate(90deg); }
 #reqwise-panel.placement-left .rq-toggle img { transform: rotate(-90deg); }
 
 #reqwise-panel.placement-top .rq-toggle {
-  position: absolute;
-  bottom: -40px; /* place toggle below the top panel (under it) */
+  top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  writing-mode: horizontal-tb;
   border-radius: 0 0 6px 6px;
+  writing-mode: horizontal-tb;
   width: auto;
   min-width: 140px;
-  padding: 8px 16px;
+  padding: 8px 12px;
+}
+
+#reqwise-panel.placement-top[data-size="full"] .rq-toggle {
+  top: auto;
+  bottom: 0;
+}
+
+#reqwise-panel.placement-top.rq-closed[data-size="full"] .rq-toggle {
+  top: 100%;
+  bottom: auto;
 }
 
 #reqwise-panel.placement-bottom .rq-toggle {
-  position: absolute;
-  top: -40px; /* place toggle above the bottom panel (on top of it) */
+  bottom: 100%;
+  top: auto;
   left: 50%;
   transform: translateX(-50%);
-  writing-mode: horizontal-tb;
   border-radius: 6px 6px 0 0;
+  writing-mode: horizontal-tb;
   width: auto;
   min-width: 140px;
-  padding: 8px 16px;
+  padding: 8px 12px;
+}
+
+#reqwise-panel.placement-bottom[data-size="full"] .rq-toggle {
+  bottom: auto;
+  top: 0;
+}
+
+#reqwise-panel.placement-bottom.rq-closed[data-size="full"] .rq-toggle {
+  bottom: 100%;
+  top: auto;
 }
 
 .rq-toggle span { white-space: nowrap; }
 
 /* Scale wrapper: transforms content inside aside without affecting panel slide transform */
 .rq-scale-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
   transform-origin: center center;
   transition: transform var(--rq-duration) ease;
 }
@@ -1908,12 +2046,27 @@ var styles = `
 .rq-zoom-btn { background: transparent; border: 1px solid var(--rq-border); color: var(--rq-fg); padding: 6px 8px; border-radius: 6px; cursor: pointer; font-weight: 700 }
 .rq-zoom-btn:hover { background: rgba(255,255,255,0.02) }
 
-/* Panel closed states: slide fully off-screen toward its placement */
+/* Panel closed states: button stays at screen edge */
 #reqwise-panel.placement-right.rq-closed { transform: translateX(100%); }
 #reqwise-panel.placement-left.rq-closed { transform: translateX(-100%); }
 #reqwise-panel.placement-top.rq-closed { transform: translateY(-100%); }
 #reqwise-panel.placement-bottom.rq-closed { transform: translateY(100%); }
 
+/* Size variants: sm, md, lg, full */
+#reqwise-panel[data-size="sm"] { width: 320px; }
+#reqwise-panel[data-size="md"] { width: 420px; }
+#reqwise-panel[data-size="lg"] { width: 560px; }
+#reqwise-panel[data-size="full"] { width: 100vw; max-width: 100vw; }
+
+#reqwise-panel.placement-top[data-size="sm"],
+#reqwise-panel.placement-bottom[data-size="sm"] { width: 100vw; height: 30vh; }
+#reqwise-panel.placement-top[data-size="md"],
+#reqwise-panel.placement-bottom[data-size="md"] { width: 100vw; height: 40vh; }
+#reqwise-panel.placement-top[data-size="lg"],
+#reqwise-panel.placement-bottom[data-size="lg"] { width: 100vw; height: 55vh; }
+#reqwise-panel.placement-top[data-size="full"],
+#reqwise-panel.placement-bottom[data-size="full"] { width: 100vw; height: 100vh; }
+
 /* Corner handles for resize cursor (invisible) */
 .rq-corner-handle {
   position: absolute;
@@ -1927,6 +2080,17 @@ var styles = `
 .rq-corner-bottom-left { left: -8px; bottom: -8px; cursor: nesw-resize; }
 .rq-corner-bottom-right { right: -8px; bottom: -8px; cursor: nwse-resize; }
 
+/* Highlight variants: error and slow */
+.rq-card.rq-highlight-error {
+  border-left: 4px solid #ef4444;
+  background: rgba(239, 68, 68, 0.04);
+}
+
+.rq-card.rq-highlight-slow {
+  border-left: 4px solid #f97316;
+  background: rgba(249, 115, 22, 0.04);
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   :root {
@@ -1974,6 +2138,175 @@ var styles = `
     scroll-behavior: auto !important;
   }
 }
+
+/* Highlight styles for error and slow requests */
+#reqwise-panel .rq-card.rq-error {
+  border: 2px solid var(--rq-error) !important;
+  background: rgba(239, 68, 68, 0.03);
+}
+
+#reqwise-panel .rq-card.rq-slow {
+  border: 2px solid var(--rq-warning) !important;
+  background: rgba(249, 115, 22, 0.03);
+}
+
+/* Font sizing consistency */
+#reqwise-panel {
+  font-size: 14px;
+}
+
+#reqwise-panel .rq-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#reqwise-panel .rq-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+#reqwise-panel .rq-meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+}
+
+#reqwise-panel .rq-meta-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--rq-fg-secondary);
+}
+
+#reqwise-panel .rq-meta-code {
+  font-size: 12px;
+  font-family: 'Monaco', 'Courier New', monospace;
+  word-break: break-all;
+}
+
+/* Main content container */
+#reqwise-panel .rq-main {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
+  scroll-behavior: smooth;
+}
+
+#reqwise-panel .rq-main::-webkit-scrollbar {
+  width: 8px;
+}
+
+#reqwise-panel .rq-main::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#reqwise-panel .rq-main::-webkit-scrollbar-thumb {
+  background: var(--rq-border);
+  border-radius: 4px;
+}
+
+#reqwise-panel .rq-main::-webkit-scrollbar-thumb:hover {
+  background: var(--rq-fg-secondary);
+}
+
+/* Scroll in lists */
+#reqwise-panel .rq-list {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#reqwise-panel .rq-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+#reqwise-panel .rq-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#reqwise-panel .rq-list::-webkit-scrollbar-thumb {
+  background: var(--rq-border);
+  border-radius: 4px;
+}
+
+#reqwise-panel .rq-list::-webkit-scrollbar-thumb:hover {
+  background: var(--rq-fg-secondary);
+}
+
+/* Zoom buttons fix */
+#reqwise-panel .rq-zoom-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--rq-bg-secondary);
+  border: 1px solid var(--rq-border);
+  color: var(--rq-fg);
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 14px;
+  transition: background 150ms ease;
+}
+
+#reqwise-panel .rq-zoom-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+#reqwise-panel .rq-zoom-btn:active {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+/* Group styles */
+#reqwise-panel .rq-group {
+  margin-bottom: 16px;
+}
+
+#reqwise-panel .rq-group-header {
+  padding: 12px 24px;
+  background: var(--rq-bg-secondary);
+  border: 1px solid var(--rq-border);
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+#reqwise-panel .rq-group-header:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+#reqwise-panel .rq-group-items {
+  margin-top: 8px;
+  padding-left: 12px;
+}
+
+#reqwise-panel .rq-group-items.collapsed {
+  display: none;
+}
+
+#reqwise-panel .rq-group-toggle {
+  display: inline-block;
+  transition: transform var(--rq-duration) ease;
+}
+
+#reqwise-panel .rq-group-toggle.collapsed {
+  transform: rotate(-90deg);
+}
 `;
 var styles_default = styles;
 
@@ -2294,15 +2627,30 @@ var panel = /* @__PURE__ */ (() => {
     else if (cfg3.theme === "dark") p.setAttribute("data-theme", "dark");
     else p.removeAttribute("data-theme");
   }
-  function mount(config2) {
+  function applySize() {
+    if (!isBrowser()) return;
+    const p = document.getElementById(PANEL_ID);
+    if (!p) return;
+    p.setAttribute("data-size", cfg3.size || "md");
+  }
+  function applyOpacity() {
+    if (!isBrowser()) return;
+    const p = document.getElementById(PANEL_ID);
+    if (!p) return;
+    const opacity = cfg3.opacity ?? 1;
+    p.style.opacity = String(Math.max(0, Math.min(1, opacity)));
+  }
+  function mount(config3) {
     try {
       if (!isBrowser()) return;
       if (mounted) return;
-      cfg3 = { defaultOpen: false, placement: "right", hotkey: "ctrl+shift+e", theme: "system", ...config2 || {} };
+      cfg3 = { defaultOpen: false, placement: "right", hotkey: "ctrl+shift+e", theme: "system", size: "md", opacity: 1, ...config3 || {} };
       hotkeyParts = parseHotkey(cfg3.hotkey);
       injectStyles();
       createPanelElement();
       applyTheme();
+      applySize();
+      applyOpacity();
       createToggle();
       try {
         const p = document.getElementById(PANEL_ID);
@@ -2339,22 +2687,11 @@ var panel = /* @__PURE__ */ (() => {
   function setOpenState(next) {
     try {
       const p = document.getElementById(PANEL_ID);
-      const t2 = document.getElementById(TOGGLE_ID);
       open = !!next;
       if (p) {
         p.classList.toggle("rq-closed", !open);
         p.setAttribute("aria-hidden", String(!open));
       }
-      if (open && renderer2 && p) {
-        const body = p.querySelector(".rq-body");
-        if (body) {
-          try {
-            renderer2(body);
-          } catch (e) {
-            console.error("[reqwise] renderer error", e);
-          }
-        }
-      }
     } catch (e) {
       console.error("[reqwise] setOpenState error", e);
     }
@@ -2416,6 +2753,10 @@ var panel_default = panel;
 // src/renderer.ts
 init_storage();
 var ENDPOINTS_KEY = "reqwise_endpoints_v1";
+var config2 = { show: "general" };
+function setConfig2(cfg3) {
+  config2 = { ...config2, ...cfg3 };
+}
 function safeParseJSON(s) {
   try {
     return s ? JSON.parse(s) : null;
@@ -2448,10 +2789,10 @@ function inferType(val) {
 function updateEndpointsFromEntry(entry) {
   try {
     if (!entry || !entry.url) return;
-    const { pathname, search } = normalizePath(entry.url);
+    const { pathname, search, origin } = normalizePath(entry.url);
     const endpoints = loadEndpoints();
     const key = pathname;
-    if (!endpoints[key]) endpoints[key] = { path: key, methods: {}, params: {}, examples: [], count: 0, lastSeen: 0 };
+    if (!endpoints[key]) endpoints[key] = { path: pathname, fullPath: entry.url.split("?")[0], origin, methods: {}, params: {}, examples: [], count: 0, lastSeen: 0 };
     const meta = endpoints[key];
     meta.count = (meta.count || 0) + 1;
     meta.lastSeen = Date.now();
@@ -2523,6 +2864,63 @@ function renderCurrent(container) {
   }
   const html = entries.map((e) => formatCard(e)).join("");
   main.innerHTML = html;
+  const sendBtns = main.querySelectorAll(".rq-send-btn");
+  sendBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const method = btn.getAttribute("data-method") || "GET";
+      const url = btn.getAttribute("data-url") || "";
+      const bodyStr = btn.getAttribute("data-body") || "{}";
+      let body = {};
+      try {
+        body = JSON.parse(bodyStr);
+      } catch (e) {
+      }
+      const panel2 = document.getElementById("reqwise-panel");
+      if (!panel2) return;
+      const sendTab = panel2.querySelector('[data-tabname="send"]');
+      if (sendTab) sendTab.click();
+      setTimeout(() => {
+        const form = main.querySelector(".rq-form");
+        if (!form) return;
+        const methodSelect = form.querySelector('[name="method"]');
+        const urlInput = form.querySelector('[name="url"]');
+        const bodyInput = form.querySelector('[name="body"]');
+        if (methodSelect) methodSelect.value = method;
+        if (urlInput) {
+          urlInput.value = url;
+          urlInput.focus();
+        }
+        if (bodyInput && Object.keys(body).length > 0) {
+          bodyInput.value = JSON.stringify(body, null, 2);
+        }
+      }, 50);
+    });
+  });
+  const expandToggles = main.querySelectorAll(".rq-expand-toggle");
+  expandToggles.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const entryId = btn.getAttribute("data-entry-id");
+      if (!entryId) return;
+      const expandables = main.querySelectorAll(`.rq-json-expandable[data-entry-id="${entryId}"]`);
+      const allExpanded = Array.from(expandables).every((el) => !el.classList.contains("rq-json-collapsed"));
+      expandables.forEach((el) => {
+        if (allExpanded) {
+          el.classList.add("rq-json-collapsed");
+        } else {
+          el.classList.remove("rq-json-collapsed");
+        }
+      });
+      btn.textContent = allExpanded ? "Show more \u25BC" : "Show less \u25B2";
+    });
+  });
+}
+function countJSONLines(obj) {
+  try {
+    const json = typeof obj === "string" ? obj : JSON.stringify(obj, null, 2);
+    return json.split("\n").length;
+  } catch (e) {
+    return 0;
+  }
 }
 function formatCard(e) {
   const statusBadge = getStatusBadge(e.status);
@@ -2530,6 +2928,34 @@ function formatCard(e) {
   const errorClass = e.error ? "error" : "";
   const duration = e.duration ? `${e.duration}ms` : "\u2014";
   const statusText = e.statusText ? e.statusText : "";
+  const entryId = e.id || "";
+  const requestLines = e.requestBody ? countJSONLines(e.requestBody) : 0;
+  const responseLines = e.responseBody ? countJSONLines(e.responseBody) : 0;
+  const hasLargeContent = requestLines > 10 || responseLines > 10;
+  if (config2.show === "general") {
+    return `
+      <div class="rq-card">
+        <div class="rq-card-header">
+          <h3 class="rq-card-title">${e.method || "GET"} ${extractPath(e.url)}</h3>
+          ${e.source === "manual" ? '<span class="rq-badge">' + i18n_default.t("manual_badge") + "</span>" : ""}
+          ${statusBadge}
+        </div>
+        <div class="rq-meta">
+          <div class="rq-meta-item">
+            <span class="rq-meta-label">${i18n_default.t("duration")}:</span>
+            <code class="rq-meta-code">${duration}</code>
+          </div>
+          <div class="rq-meta-item">
+            <span class="rq-meta-label">${i18n_default.t("time")}:</span>
+            <code class="rq-meta-code">${new Date(e.timestamp).toLocaleTimeString()}</code>
+          </div>
+        </div>
+        <div style="margin-top: 12px; display: flex; gap: 8px;">
+          <button class="rq-btn primary rq-send-btn" data-entry-id="${entryId}" data-method="${escapeHtml(e.method || "GET")}" data-url="${escapeHtml(e.url)}" data-body="${escapeHtml(JSON.stringify(e.requestBody || {}))}" style="font-size: 12px; padding: 6px 12px; flex: 1;">\u2192 ${i18n_default.t("send_request")}</button>
+        </div>
+      </div>
+    `;
+  }
   return `
     <div class="rq-card">
       <div class="rq-card-header">
@@ -2537,7 +2963,7 @@ function formatCard(e) {
         ${e.source === "manual" ? '<span class="rq-badge">' + i18n_default.t("manual_badge") + "</span>" : ""}
         ${statusBadge}
       </div>
-      
+
       <div class="rq-meta">
         <div class="rq-meta-item">
           <span class="rq-meta-label">${i18n_default.t("form_url")}:</span>
@@ -2561,8 +2987,11 @@ function formatCard(e) {
 
       ${e.requestBody && ["POST", "PUT", "PATCH"].includes(e.method || "") ? `
         <div class="rq-section">
-          <div class="rq-section-label">${i18n_default.t("request")} ${i18n_default.t("body")}</div>
-          <div class="rq-json">${highlightJSON(e.requestBody)}</div>
+          <div class="rq-section-label">
+            ${i18n_default.t("request")} ${i18n_default.t("body")}
+            ${requestLines > 10 ? `<button class="rq-expand-toggle" data-entry-id="${entryId}" style="margin-left: 8px;">Show more \u25BC</button>` : ""}
+          </div>
+          <div class="rq-json ${requestLines > 10 ? "rq-json-expandable rq-json-collapsed" : ""}" data-entry-id="${entryId}" data-section="request">${highlightJSON(e.requestBody)}</div>
         </div>
       ` : ""}
 
@@ -2578,10 +3007,17 @@ function formatCard(e) {
 
       ${e.responseBody !== void 0 ? `
         <div class="rq-section">
-          <div class="rq-section-label">${i18n_default.t("response_label")}</div>
-          <div class="rq-json">${highlightJSON(e.responseBody)}</div>
+          <div class="rq-section-label">
+            ${i18n_default.t("response_label")}
+            ${responseLines > 10 ? `<button class="rq-expand-toggle" data-entry-id="${entryId}" style="margin-left: 8px;">Show more \u25BC</button>` : ""}
+          </div>
+          <div class="rq-json ${responseLines > 10 ? "rq-json-expandable rq-json-collapsed" : ""}" data-entry-id="${entryId}" data-section="response">${highlightJSON(e.responseBody)}</div>
         </div>
       ` : ""}
+
+      <div style="margin-top: 12px; display: flex; gap: 8px;">
+        <button class="rq-btn primary rq-send-btn" data-entry-id="${entryId}" data-method="${escapeHtml(e.method || "GET")}" data-url="${escapeHtml(e.url)}" data-body="${escapeHtml(JSON.stringify(e.requestBody || {}))}" style="font-size: 12px; padding: 6px 12px; flex: 1;">\u2192 ${i18n_default.t("send_request")}</button>
+      </div>
     </div>
   `;
 }
@@ -2663,8 +3099,24 @@ function renderHistory(container) {
     return;
   }
   main.innerHTML = `
-    <div class="rq-section" style="margin-bottom: 16px;">
-      <input type="text" class="rq-filter rq-form-input" placeholder="${i18n_default.t("filter_placeholder")}" style="width: 100%;" />
+    <div class="rq-section" style="margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+      <input type="text" class="rq-filter-text rq-form-input" placeholder="${i18n_default.t("filter_placeholder")}" style="flex: 1; min-width: 150px;" />
+      <select class="rq-filter-method rq-form-select" style="min-width: 100px;">
+        <option value="">${i18n_default.t("all_methods")}</option>
+        <option value="GET">GET</option>
+        <option value="POST">POST</option>
+        <option value="PUT">PUT</option>
+        <option value="PATCH">PATCH</option>
+        <option value="DELETE">DELETE</option>
+      </select>
+      <select class="rq-filter-status rq-form-select" style="min-width: 100px;">
+        <option value="">${i18n_default.t("all_statuses")}</option>
+        <option value="2xx">2xx ${i18n_default.t("status_success")}</option>
+        <option value="4xx">4xx ${i18n_default.t("status_client_error")}</option>
+        <option value="5xx">5xx ${i18n_default.t("status_server_error")}</option>
+        <option value="error">${i18n_default.t("error_label")}</option>
+      </select>
+      <button class="rq-filter-clear rq-btn" style="padding: 8px 12px; font-size: 12px;">${i18n_default.t("clear_form")}</button>
     </div>
     <div class="rq-list"></div>
   `;
@@ -2674,15 +3126,111 @@ function renderHistory(container) {
       list.innerHTML = `<div class="rq-empty" style="min-height: 200px;"><p>${i18n_default.t("no_matching_requests")}</p></div>`;
       return;
     }
-    list.innerHTML = items.map((e) => formatHistoryCard(e)).join("");
-  }
-  const filter = main.querySelector(".rq-filter");
-  filter.addEventListener("input", () => {
-    const q = filter.value.toLowerCase();
-    const filtered = entries.filter(
-      (e) => (e.method || "").toLowerCase().includes(q) || (e.status || "").toString().includes(q) || (e.url || "").toLowerCase().includes(q) || (e.page || "").toLowerCase().includes(q)
-    );
+    let html = "";
+    if (config2.groupBy && (config2.groupBy === "url" || config2.groupBy === "method" || config2.groupBy === "status" || config2.groupBy === "page")) {
+      const groups = {};
+      for (const item of items) {
+        let key = "";
+        if (config2.groupBy === "url") key = item.url || "unknown";
+        else if (config2.groupBy === "method") key = item.method || "GET";
+        else if (config2.groupBy === "status") key = item.status ? item.status >= 400 ? "Error" : "Success" : "Pending";
+        else if (config2.groupBy === "page") key = item.page || "unknown";
+        if (!groups[key]) groups[key] = [];
+        groups[key].push(item);
+      }
+      for (const [key, groupItems] of Object.entries(groups)) {
+        const count = groupItems.length;
+        const groupId = `group-${key.replace(/[^a-z0-9]/gi, "-")}`;
+        html += `
+          <div class="rq-group">
+            <div class="rq-group-header" data-group-id="${groupId}">
+              <span class="rq-group-toggle">\u25BC</span>
+              <span style="flex: 1; text-align: left;">${escapeHtml(key)} (${count})</span>
+            </div>
+            <div class="rq-group-items" data-group-id="${groupId}">
+              ${groupItems.map((e) => formatHistoryCard(e)).join("")}
+            </div>
+          </div>
+        `;
+      }
+    } else {
+      html = items.map((e) => formatHistoryCard(e)).join("");
+    }
+    list.innerHTML = html;
+    if (config2.groupBy) {
+      const headers = list.querySelectorAll(".rq-group-header");
+      headers.forEach((header) => {
+        header.addEventListener("click", () => {
+          const groupId = header.getAttribute("data-group-id");
+          const items2 = list.querySelector(`.rq-group-items[data-group-id="${groupId}"]`);
+          const toggle = header.querySelector(".rq-group-toggle");
+          if (items2 && toggle) {
+            items2.classList.toggle("collapsed");
+            toggle.classList.toggle("collapsed");
+          }
+        });
+      });
+    }
+    const sendBtns = list.querySelectorAll(".rq-send-btn");
+    sendBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const method = btn.getAttribute("data-method") || "GET";
+        const url = btn.getAttribute("data-url") || "";
+        const bodyStr = btn.getAttribute("data-body") || "{}";
+        let body = {};
+        try {
+          body = JSON.parse(bodyStr);
+        } catch (e) {
+        }
+        const panel2 = document.getElementById("reqwise-panel");
+        if (!panel2) return;
+        const sendTab = panel2.querySelector('[data-tabname="send"]');
+        if (sendTab) sendTab.click();
+        setTimeout(() => {
+          const form = main.querySelector(".rq-form");
+          if (!form) return;
+          const methodSelect = form.querySelector('[name="method"]');
+          const urlInput = form.querySelector('[name="url"]');
+          const bodyInput = form.querySelector('[name="body"]');
+          if (methodSelect) methodSelect.value = method;
+          if (urlInput) {
+            urlInput.value = url;
+            urlInput.focus();
+          }
+          if (bodyInput && Object.keys(body).length > 0) {
+            bodyInput.value = JSON.stringify(body, null, 2);
+          }
+        }, 50);
+      });
+    });
+  }
+  function applyFilters() {
+    const searchQ = main.querySelector(".rq-filter-text").value.toLowerCase();
+    const methodF = main.querySelector(".rq-filter-method").value;
+    const statusF = main.querySelector(".rq-filter-status").value;
+    const filtered = entries.filter((e) => {
+      if (searchQ && !((e.method || "").toLowerCase().includes(searchQ) || (e.status || "").toString().includes(searchQ) || (e.url || "").toLowerCase().includes(searchQ) || (e.page || "").toLowerCase().includes(searchQ))) return false;
+      if (methodF && (e.method || "GET").toUpperCase() !== methodF.toUpperCase()) return false;
+      if (statusF === "error" && !e.error) return false;
+      if (statusF === "2xx" && (!e.status || e.status < 200 || e.status >= 300)) return false;
+      if (statusF === "4xx" && (!e.status || e.status < 400 || e.status >= 500)) return false;
+      if (statusF === "5xx" && (!e.status || e.status < 500)) return false;
+      return true;
+    });
     renderList(filtered);
+  }
+  const filterText = main.querySelector(".rq-filter-text");
+  const filterMethod = main.querySelector(".rq-filter-method");
+  const filterStatus = main.querySelector(".rq-filter-status");
+  const filterClear = main.querySelector(".rq-filter-clear");
+  filterText.addEventListener("input", applyFilters);
+  filterMethod.addEventListener("change", applyFilters);
+  filterStatus.addEventListener("change", applyFilters);
+  filterClear.addEventListener("click", () => {
+    filterText.value = "";
+    filterMethod.value = "";
+    filterStatus.value = "";
+    applyFilters();
   });
   renderList(entries);
 }
@@ -2690,14 +3238,21 @@ function formatHistoryCard(e) {
   const statusBadge = getStatusBadge(e.status);
   const duration = e.duration ? `${e.duration}ms` : "\u2014";
   const statusText = e.statusText ? e.statusText : "";
+  const entryId = e.id || "";
+  let highlightClass = "";
+  if (config2.highlight === "error" && e.status && (e.status >= 400 || e.error)) {
+    highlightClass = "rq-error";
+  } else if (config2.highlight === "slow" && e.duration && e.duration > 500) {
+    highlightClass = "rq-slow";
+  }
   return `
-    <div class="rq-card" style="border: 1px solid var(--rq-border); border-radius: 8px; padding: 16px; margin-bottom: 12px;">
+    <div class="rq-card ${highlightClass}" style="border: 1px solid var(--rq-border); border-radius: 8px; padding: 16px; margin-bottom: 12px;">
       <div class="rq-card-header">
         <h4 class="rq-card-title">${e.method || "GET"} ${extractPath(e.url)}</h4>
         ${statusBadge}
         ${e.source === "manual" ? '<span class="rq-badge">' + i18n_default.t("manual_badge") + "</span>" : ""}
       </div>
-      
+
       <div class="rq-meta" style="gap: 12px; margin-top: 8px;">
         <div class="rq-meta-item">
           <span class="rq-meta-label">${i18n_default.t("endpoint_label")}:</span>
@@ -2714,6 +3269,10 @@ function formatHistoryCard(e) {
           <code class="rq-meta-code">${new Date(e.timestamp).toLocaleTimeString()}</code>
         </div>
       </div>
+
+      <div style="margin-top: 12px; display: flex; gap: 8px;">
+        <button class="rq-btn primary rq-send-btn" data-entry-id="${entryId}" data-method="${escapeHtml(e.method || "GET")}" data-url="${escapeHtml(e.url)}" data-body="${escapeHtml(JSON.stringify(e.requestBody || {}))}" style="font-size: 12px; padding: 6px 12px; flex: 1;">\u2192 ${i18n_default.t("send_request")}</button>
+      </div>
     </div>
   `;
 }
@@ -2856,10 +3415,13 @@ function renderEndpoints(container) {
         `;
     }).join("");
     const examples = (e.examples || []).slice(0, 3).map((ex) => `<code class="rq-meta-code">${escapeHtml(ex)}</code>`).join("<br/>");
+    const methodsArray = Object.keys(e.methods || {});
+    const primaryMethod = methodsArray.length > 0 ? methodsArray[0] : "GET";
+    const fullUrl = e.fullPath || (e.origin ? e.origin + e.path : e.path);
     return `
       <div class="rq-card" style="border: 1px solid var(--rq-border); border-radius: 8px; padding: 16px; margin-bottom: 12px;">
         <div class="rq-card-header">
-          <h4 class="rq-card-title">${escapeHtml(e.path)}</h4>
+          <h4 class="rq-card-title" style="word-break: break-all;">${escapeHtml(fullUrl)}</h4>
             <span style="background: var(--rq-bg-secondary); padding: 4px 12px; border-radius: 4px; font-size: 12px; color: var(--rq-fg-secondary);">${e.count || 0} ${i18n_default.t("hits")}</span>
         </div>
 
@@ -2883,10 +3445,36 @@ function renderEndpoints(container) {
         <div style="margin-top: 12px; font-size: 12px; color: var(--rq-fg-secondary);">
           ${i18n_default.t("last_seen")}: ${new Date(e.lastSeen).toLocaleTimeString()}
         </div>
+
+        <div style="margin-top: 12px; display: flex; gap: 8px;">
+          <button class="rq-btn primary rq-endpoint-send-btn" data-method="${escapeHtml(primaryMethod)}" data-url="${escapeHtml(fullUrl)}" style="font-size: 12px; padding: 6px 12px; flex: 1;">\u2192 ${i18n_default.t("send_request")}</button>
+        </div>
       </div>
     `;
   }).join("");
   main.innerHTML = html;
+  const endpointSendBtns = main.querySelectorAll(".rq-endpoint-send-btn");
+  endpointSendBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const method = btn.getAttribute("data-method") || "GET";
+      const url = btn.getAttribute("data-url") || "/";
+      const panel2 = document.getElementById("reqwise-panel");
+      if (!panel2) return;
+      const sendTab = panel2.querySelector('[data-tabname="send"]');
+      if (sendTab) sendTab.click();
+      setTimeout(() => {
+        const form = main.querySelector(".rq-form");
+        if (!form) return;
+        const methodSelect = form.querySelector('[name="method"]');
+        const urlInput = form.querySelector('[name="url"]');
+        if (methodSelect) methodSelect.value = method;
+        if (urlInput) {
+          urlInput.value = url;
+          urlInput.focus();
+        }
+      }, 50);
+    });
+  });
 }
 function renderer(container) {
   try {
@@ -2933,6 +3521,7 @@ var index_default = _default;
   i18n,
   panel,
   renderer,
+  rendererSetConfig,
   storage
 });
 //# sourceMappingURL=index.js.map