v0.36.7

src/admin/web/cache-panel.js

@@ -69,7 +69,9 @@
     const reason = value => { const key = `cacheReason_${value}`, text = t(key); return text === key ? value : text; };
 
     // Decision counters: label + count + share bar; top three visible, the rest folded into a details toggle.
-    function reasonsCell(reasons) {
+    // Folded counters keep their open/closed state across auto-refresh re-renders.
+    const openReasonRows = new Set();
+    function reasonsCell(reasons, rowKey = "") {
         const td = el("td", undefined, "cache-reasons"), entries = Object.entries(reasons || {}).sort((a, b) => b[1] - a[1]);
         if (!entries.length) { td.append(el("span", "-", "cache-reason-none")); return td; }
         const max = entries[0][1] || 1, line = ([key, count]) => {
@@ -78,7 +80,7 @@
             item.append(el("span", reason(key), "cache-reason-name"), el("b", number(count), "cache-reason-count"), track); item.title = key; return item;
         };
         entries.slice(0, 3).forEach(entry => td.append(line(entry)));
-        if (entries.length > 3) { const more = el("details", undefined, "cache-reason-more"); more.append(el("summary", `+${entries.length - 3}`)); entries.slice(3).forEach(entry => more.append(line(entry))); td.append(more); }
+        if (entries.length > 3) { const more = el("details", undefined, "cache-reason-more"); more.open = openReasonRows.has(rowKey); more.addEventListener("toggle", () => { if (more.open) openReasonRows.add(rowKey); else openReasonRows.delete(rowKey); }); more.append(el("summary", `+${entries.length - 3}`)); entries.slice(3).forEach(entry => more.append(line(entry))); td.append(more); }
         return td;
     }
     function resetLiveChart(selected = scope()) {
@@ -182,7 +184,7 @@
             [[row.hits, "cache-outcome-hit"], [row.misses, "cache-outcome-miss"], [row.bypasses, "cache-outcome-bypass"]].forEach(([count, cls], index) => { if (index) outcomes.append(el("span", "/", "cache-outcome-sep")); outcomes.append(el("span", number(count), cls)); });
             const ratioPercent = Math.max(0, Math.min(100, (row.hit_ratio || 0) * 100)), ratio = el("td", undefined, "cache-ratio-cell"), meter = el("span", undefined, "cache-ratio-meter"), fill = el("i"); fill.style.width = `${ratioPercent}%`; meter.append(fill); ratio.append(el("span", `${fmt(ratioPercent, 1)}%`, "cache-ratio-value"), meter);
             tr.append(outcomes, ratio);
-            tr.append(reasonsCell(row.reasons)); return tr;
+            tr.append(reasonsCell(row.reasons, `${row.vhost || ""}\u0000${row.domain || ""}`)); return tr;
         }));
         const domainEmpty = $("cache-domains-empty");
         domainEmpty.textContent = groups.length ? t("cacheNoDomainsFiltered") : t("cacheNoDomains");
@@ -191,7 +193,12 @@
             const tr = el("tr"), resident = Number(row.resident_bytes) || 0, disk = Number(row.storage_bytes) || 0, body = Number(row.body_bytes) || 0, storage = resident || disk;
             tr.append(el("td", row.vhost || t("cacheLegacy")), el("td", row.domain));
             const targetValue = row.target || row.path || "-", target = makeCopyCell(targetValue);
-            if (row.transformed) target.append(el("span", t("transformBadge"), "cache-transform-badge"));
+            if (row.transformed) {
+                // Keep the badge outside the ellipsised text so a long URL never clips it.
+                const wrap = el("div", undefined, "cache-target-wrap");
+                wrap.append(el("span", targetValue, "cache-target-text"), el("span", t("transformBadge"), "cache-transform-badge"));
+                target.replaceChildren(wrap);
+            }
             tr.append(target);
             const keyTags = `${row.cache_key || "-"}${row.tags?.length ? ` · ${row.tags.join(", ")}` : ""}`;
             tr.append(makeCopyCell(keyTags));