v0.36.8

src/admin/web/app/core.js

@@ -52,6 +52,7 @@ function translate() {
     document.querySelectorAll("[data-i18n]").forEach(e => e.textContent = t(e.dataset.i18n));
     document.querySelectorAll("[data-i18n-placeholder]").forEach(e => e.placeholder = t(e.dataset.i18nPlaceholder));
     document.querySelectorAll("[data-i18n-aria]").forEach(e => e.setAttribute("aria-label", t(e.dataset.i18nAria)));
+    document.querySelectorAll("[data-i18n-title]").forEach(e => { e.title = t(e.dataset.i18nTitle); });
     window.rustProxyAclProfiles?.refreshTranslations?.();
     $("language").value = languagePreference === "auto" ? "auto" : language; setPanel(currentPanel, false); syncAuthForm(); renderSession();
     window.rustProxyDrafts?.refresh();

src/admin/web/app/dashboard-inline-layout.js

@@ -28,7 +28,8 @@ window.rustProxyInlineLayout = (() => {
     const label = id => dashboardWidgetLabel(id);
     const dirty = () => draft && original && (draft.order.some((id, i) => id !== original.order[i])
         || [...draft.hidden].some(id => !original.hidden.has(id)) || [...original.hidden].some(id => !draft.hidden.has(id))
-        || JSON.stringify(draft.sizes) !== JSON.stringify(original.sizes));
+        || JSON.stringify(draft.sizes) !== JSON.stringify(original.sizes)
+        || JSON.stringify(normalizeDashboardWidgetHeights(draft.heights)) !== JSON.stringify(normalizeDashboardWidgetHeights(original.heights)));
 
     function renderHidden() {
         if (!hiddenList || !draft) return;
@@ -52,7 +53,8 @@ window.rustProxyInlineLayout = (() => {
         if (hiddenShelf) { hiddenShelf.open = true; hiddenShelf.querySelector("summary")?.focus(); }
     }
     function paint() {
-        applyDashboardLayout(draft.order, [...draft.hidden], draft.sizes);
+        applyDashboardLayout(draft.order, [...draft.hidden], draft.sizes, draft.heights);
+        window.rustProxyOverviewRows?.flush?.();
         renderHidden();
         const visible = visibleIds();
         for (const node of nodes()) {
@@ -70,6 +72,21 @@ window.rustProxyInlineLayout = (() => {
             const widen = node.querySelector(".overview-inline-widen");
             if (narrow) narrow.disabled = at <= 0;
             if (widen) widen.disabled = at === widths.length - 1;
+            const rows = window.rustProxyOverviewRows?.rowsFor?.(node.dataset.dashboardWidget);
+            const heightControls = node.querySelector(".overview-inline-height");
+            if (heightControls) heightControls.hidden = !rows;
+            if (rows) {
+                const explicit = draft.heights?.[node.dataset.dashboardWidget] !== undefined;
+                const heightValue = node.querySelector(".overview-inline-height-value");
+                if (heightValue) {
+                    heightValue.textContent = `↕${rows.span}${explicit ? "" : " A"}`;
+                    heightValue.title = explicit ? t("overviewLayoutHeightFixed") : t("overviewLayoutHeightAuto");
+                }
+                const lower = node.querySelector(".overview-inline-lower");
+                const taller = node.querySelector(".overview-inline-taller");
+                if (lower) lower.disabled = !explicit;
+                if (taller) taller.disabled = rows.span >= DASHBOARD_MAX_ROWS;
+            }
         }
     }
     function clearDrag() { if (pointerDrag) settle(false); }
@@ -95,6 +112,19 @@ window.rustProxyInlineLayout = (() => {
         paint();
         nodeFor(id)?.querySelector(delta < 0 ? ".overview-inline-narrow" : ".overview-inline-widen")?.focus();
     }
+    function resizeHeight(id, delta) {
+        if (!draft) return;
+        const rows = window.rustProxyOverviewRows?.rowsFor?.(id);
+        if (!rows) return;
+        enterFreeLayout();
+        draft.heights = { ...(draft.heights || {}) };
+        const next = rows.span + delta;
+        // At or below the content height the card returns to automatic sizing.
+        if (next <= rows.min) delete draft.heights[id];
+        else draft.heights[id] = Math.min(DASHBOARD_MAX_ROWS, next);
+        paint();
+        nodeFor(id)?.querySelector(delta < 0 ? ".overview-inline-lower" : ".overview-inline-taller")?.focus();
+    }
     function nudge(id, delta) {
         const visible = visibleIds();
         const index = visible.indexOf(id), target = visible[index + delta];
@@ -124,7 +154,14 @@ window.rustProxyInlineLayout = (() => {
             control("−", `${t("overviewLayoutNarrow")}: ${title}`, "overview-inline-narrow", () => resize(id, -1)),
             widthValue,
             control("+", `${t("overviewLayoutWiden")}: ${title}`, "overview-inline-widen", () => resize(id, 1)));
-        bar.append(grip, dashboardWidgetTypeBadge(id), sizeControls,
+        const heightControls = el("span", undefined, "overview-inline-width overview-inline-height");
+        const heightValue = el("span", "", "overview-inline-width-value overview-inline-height-value");
+        heightValue.setAttribute("aria-label", t("overviewLayoutHeight"));
+        heightControls.append(
+            control("−", `${t("overviewLayoutLower")}: ${title}`, "overview-inline-lower", () => resizeHeight(id, -1)),
+            heightValue,
+            control("+", `${t("overviewLayoutTaller")}: ${title}`, "overview-inline-taller", () => resizeHeight(id, 1)));
+        bar.append(grip, dashboardWidgetTypeBadge(id), sizeControls, heightControls,
             control("←", `${t("moveUp")}: ${title}`, "overview-inline-up", () => nudge(id, -1)),
             control("→", `${t("moveDown")}: ${title}`, "overview-inline-down", () => nudge(id, 1)),
             control("×", `${t("overviewLayoutInlineHide")}: ${title}`, "overview-inline-hide", () => hide(id)));
@@ -158,7 +195,7 @@ window.rustProxyInlineLayout = (() => {
         if (hiddenShelf) { hiddenShelf.open = false; hiddenShelf.hidden = true; }
         if (hiddenList) hiddenList.replaceChildren();
         if (modalButton) modalButton.disabled = false;
-        if (!preserveSaved && original) applyDashboardLayout(original.order, [...original.hidden], original.sizes);
+        if (!preserveSaved && original) applyDashboardLayout(original.order, [...original.hidden], original.sizes, original.heights);
         draft = original = null;
     }
     async function begin() {
@@ -171,8 +208,9 @@ window.rustProxyInlineLayout = (() => {
             const order = normalizeDashboardWidgets(saved.dashboard_widgets);
             const hidden = new Set(normalizeHiddenDashboardWidgets(saved.dashboard_hidden_widgets, saved.dashboard_widgets));
             const sizes = normalizeDashboardWidgetSizes(saved.dashboard_widget_sizes);
-            original = { order: [...order], hidden: new Set(hidden), sizes: sizes === null ? null : { ...sizes } };
-            draft = { order: [...order], hidden: new Set(hidden), sizes: sizes === null ? null : { ...sizes } };
+            const heights = normalizeDashboardWidgetHeights(saved.dashboard_widget_heights);
+            original = { order: [...order], hidden: new Set(hidden), sizes: sizes === null ? null : { ...sizes }, heights: heights ? { ...heights } : null };
+            draft = { order: [...order], hidden: new Set(hidden), sizes: sizes === null ? null : { ...sizes }, heights: heights ? { ...heights } : null };
             showEditing();
         } catch (error) { if (error?.status !== 401) toast(error.message, true); }
         finally { opening = false; unlock.disabled = false; }
@@ -186,6 +224,7 @@ window.rustProxyInlineLayout = (() => {
             await window.rustProxyPreferences.update({
                 dashboard_widgets: [...draft.order], dashboard_hidden_widgets: [...draft.hidden],
                 dashboard_widget_sizes: draft.sizes === null ? null : { ...draft.sizes },
+                dashboard_widget_heights: normalizeDashboardWidgetHeights(draft.heights),
             });
             finish(true);
             toast(t("overviewLayoutEditorSaved"));
@@ -269,6 +308,7 @@ window.rustProxyInlineLayout = (() => {
         const rect = drag.node.getBoundingClientRect();
         const placeholder = el("div", undefined, "overview-drop-placeholder");
         placeholder.dataset.dashboardSpan = drag.node.dataset.dashboardSpan || "2";
+        if (drag.node.dataset.dashboardRows) placeholder.style.setProperty("--overview-rows", drag.node.dataset.dashboardRows);
         placeholder.style.minHeight = `${Math.round(rect.height)}px`;
         placeholder.setAttribute("aria-hidden", "true");
         drag.origin = drag.node.nextSibling;
@@ -380,6 +420,7 @@ window.rustProxyInlineLayout = (() => {
         currentDraft: () => draft ? {
             order: [...draft.order], hidden: [...draft.hidden],
             sizes: draft.sizes === null ? null : { ...draft.sizes },
+            heights: draft.heights ? { ...draft.heights } : null,
         } : null,
         cancel,
     };

src/admin/web/app/dashboard-layout-editor.js

@@ -237,7 +237,7 @@ window.rustProxyDashboardLayout = (() => {
         try {
             await window.rustProxyPreferences.update({
                 dashboard_widgets: [...defaults.order], dashboard_hidden_widgets: [...defaults.hidden],
-                dashboard_widget_sizes: null,
+                dashboard_widget_sizes: null, dashboard_widget_heights: null,
             });
             resetConfirm.close();
             dialog.close();

src/admin/web/app/dashboard-presets.js

@@ -18,6 +18,7 @@ window.rustProxyDashboardLayout = (() => {
             dashboard_widgets: [...normalizeDashboardWidgets(current.dashboard_widgets)],
             dashboard_hidden_widgets: [...normalizeHiddenDashboardWidgets(current.dashboard_hidden_widgets)],
             dashboard_widget_sizes: normalizeDashboardWidgetSizes(current.dashboard_widget_sizes),
+            dashboard_widget_heights: normalizeDashboardWidgetHeights(current.dashboard_widget_heights),
             dashboard_density: normalizeAdminDensity(current.dashboard_density, "compact"),
             overview_samples: window.rustProxyOverviewSamples.getLimit(),
         };
@@ -97,6 +98,7 @@ window.rustProxyDashboardLayout = (() => {
             dashboard_widgets: [...layout.dashboard_widgets],
             dashboard_hidden_widgets: [...layout.dashboard_hidden_widgets],
             dashboard_widget_sizes: layout.dashboard_widget_sizes === null ? null : { ...layout.dashboard_widget_sizes },
+            dashboard_widget_heights: normalizeDashboardWidgetHeights(layout.dashboard_widget_heights),
             dashboard_density: layout.dashboard_density,
         });
         window.rustProxyOverviewSamples.setLimit(layout.overview_samples, true);
@@ -130,6 +132,7 @@ window.rustProxyDashboardLayout = (() => {
             dashboard_widgets: [...ADMIN_DASHBOARD_WIDGETS],
             dashboard_hidden_widgets: [...ADMIN_DEFAULT_HIDDEN_WIDGETS],
             dashboard_widget_sizes: null,
+            dashboard_widget_heights: null,
             dashboard_density: ADMIN_DASHBOARD_DEFAULTS.dashboard_density,
             overview_samples: ADMIN_DASHBOARD_DEFAULTS.overview_samples,
         });

src/admin/web/app/memory-breakdown.js

@@ -0,0 +1,122 @@
+// Memory breakdown card (memory_breakdown): splits process RSS into cache data,
+// cache bookkeeping, cache buffers, allocator-held free memory, file-backed pages
+// and the rest of the process, and tracks the "outside cache" share over time so
+// a steady climb (a leak) is distinguishable from flat overhead.
+window.rustProxyMemoryBreakdown = (() => {
+    const $ = id => document.getElementById(id);
+    const segments = ["cache-data", "cache-meta", "transient", "alloc-free", "files", "rest"];
+    const MIN_TREND_MS = 10 * 60 * 1000;
+    let samples = [];
+    const num = value => value == null || value === "" ? null : (Number.isFinite(Number(value)) ? Number(value) : null);
+    const limit = () => window.rustProxyOverviewSamples?.getLimit?.() ?? 600;
+
+    function compute(status) {
+        const live = status.live_system || {}, system = status.system || {}, cache = status.cache || {};
+        const rss = num(live.process_rss_bytes) ?? num(system.process_rss_bytes);
+        if (rss == null || rss <= 0) return null;
+        const allocated = num(cache.hot_allocated_bytes) ?? num(cache.resident_bytes) ?? 0;
+        const logical = Math.min(num(cache.hot_logical_bytes) ?? allocated, allocated);
+        const transient = num(cache.transient_bytes) ?? 0;
+        const fileBacked = (num(system.process_rss_file_bytes) ?? 0) + (num(system.process_rss_shmem_bytes) ?? 0);
+        const allocator = status.memory_allocator || null;
+        let free = allocator ? (num(allocator.free_bytes) ?? 0) : 0;
+        const values = { "cache-data": logical, "cache-meta": allocated - logical, transient, "alloc-free": free, files: fileBacked };
+        let rest = rss - Object.values(values).reduce((sum, value) => sum + value, 0);
+        // Allocator free memory may already be released to the kernel (malloc_trim),
+        // so it is the first share to shrink when the parts exceed the measured RSS.
+        if (rest < 0) { const cut = Math.min(free, -rest); free -= cut; values["alloc-free"] = free; rest += cut; }
+        values.rest = Math.max(0, rest);
+        return {
+            rss, values, allocator, allocated, logical,
+            entries: num(cache.entries),
+            outside: Math.max(0, rss - allocated - transient)
+        };
+    }
+
+    function slopePerHour(points) {
+        if (points.length < 3) return null;
+        const t0 = points[0].t, n = points.length;
+        let sx = 0, sy = 0, sxx = 0, sxy = 0;
+        for (const p of points) { const x = (p.t - t0) / 3600000; sx += x; sy += p.v; sxx += x * x; sxy += x * p.v; }
+        const den = n * sxx - sx * sx;
+        return den > 0 ? (n * sxy - sx * sy) / den : null;
+    }
+
+    function setText(id, text) { const node = $(id); if (node) node.textContent = text; }
+
+    function render(status, appendSample = true) {
+        const card = document.querySelector('[data-dashboard-widget="memory_breakdown"]');
+        if (!card || !$("mb-bar")) return;
+        const lang = typeof locale === "function" ? locale() : undefined;
+        const fmtBytes = value => value == null || !Number.isFinite(value) ? "-" : bytes(Math.max(0, value));
+        const percent = value => Number.isFinite(value) ? `${(value * 100).toLocaleString(lang, { maximumFractionDigits: 1 })}%` : "-";
+        const tr = key => (typeof t === "function" ? t(key) : key);
+        const data = compute(status);
+        if (!data) {
+            setText("mb-rss", "-");
+            return;
+        }
+        setText("mb-rss", `RSS ${fmtBytes(data.rss)}`);
+        const bar = $("mb-bar").children;
+        segments.forEach((key, index) => {
+            const value = data.values[key], share = value / data.rss;
+            bar[index].style.width = `${Math.max(0, share * 100)}%`;
+            bar[index].title = `${tr(rowKey(key))}: ${fmtBytes(value)} (${percent(share)})`;
+            setText(`mb-${key}-value`, fmtBytes(value));
+            setText(`mb-${key}-share`, percent(share));
+            const row = card.querySelector(`[data-mb-row="${key}"]`);
+            if (row) row.hidden = key === "alloc-free" && !data.allocator;
+        });
+        setText("mb-ratio", data.allocated > 0 ? `${(data.rss / data.allocated).toFixed(2)}×` : "-");
+        setText("mb-per-object", data.entries > 0 ? fmtBytes((data.allocated - data.logical) / data.entries) : "-");
+        setText("mb-objects", data.entries == null ? "-" : data.entries.toLocaleString(lang));
+
+        const allocator = data.allocator, heap = num(allocator?.heap_bytes);
+        $("mb-allocator").hidden = !allocator;
+        $("mb-allocator-unavailable").hidden = !!allocator;
+        setText("mb-fragmentation", allocator && heap > 0 ? percent(num(allocator.free_bytes) / heap) : "-");
+        if (allocator) {
+            setText("mb-heap", fmtBytes(heap));
+            setText("mb-in-use", fmtBytes(num(allocator.in_use_bytes)));
+            setText("mb-free", `${fmtBytes(num(allocator.free_bytes))}${heap > 0 ? ` · ${percent(num(allocator.free_bytes) / heap)}` : ""}`);
+            setText("mb-mmap", `${fmtBytes(num(allocator.mmap_bytes))} · ${num(allocator.mmap_blocks) ?? 0}`);
+        }
+
+        if (appendSample) {
+            samples.push({ t: Date.now(), v: data.outside });
+            samples = samples.slice(-limit());
+        }
+        const values = samples.map(sample => sample.v);
+        const peak = Math.max(1, ...values) * 1.1;
+        const width = 300, height = 60, pad = 5;
+        const points = values.length < 2 ? "0,55 300,55" : values.map((value, index) =>
+            `${index * width / (values.length - 1)},${height - pad - value / peak * (height - pad * 2)}`).join(" ");
+        $("mb-outside-sparkline").setAttribute("points", points);
+        window.rustProxyChartScale?.axes?.("mb-outside-sparkline", peak, "bytes", values.length, { top: 5 / 60, bottom: 55 / 60 });
+        setText("mb-outside-value", fmtBytes(data.outside));
+
+        const badge = $("mb-trend-badge");
+        const span = samples.length ? samples.at(-1).t - samples[0].t : 0;
+        const slope = span >= MIN_TREND_MS ? slopePerHour(samples) : null;
+        let state = "collecting";
+        if (slope != null) {
+            // Rising faster than 2% of the current outside-cache size per hour (and at least 4 MiB/h).
+            const threshold = Math.max(4 * 1048576, data.outside * 0.02);
+            state = slope > threshold ? "rising" : slope < -threshold ? "falling" : "stable";
+        }
+        badge.dataset.state = state;
+        badge.textContent = tr({ collecting: "memoryTrendCollecting", rising: "memoryTrendRising", falling: "memoryTrendFalling", stable: "memoryTrendStable" }[state]);
+        const minutes = Math.round(span / 60000);
+        setText("mb-trend-rate", slope == null
+            ? `${minutes} / ${MIN_TREND_MS / 60000} min`
+            : `${slope >= 0 ? "+" : "−"}${fmtBytes(Math.abs(slope))}/h · ${minutes} min`);
+    }
+
+    function rowKey(key) {
+        return { "cache-data": "memoryCacheData", "cache-meta": "memoryCacheMeta", transient: "memoryTransient",
+            "alloc-free": "memoryAllocatorFree", files: "memoryFiles", rest: "memoryRest" }[key];
+    }
+
+    window.rustProxyOverviewSamples?.onChange?.(() => { samples = samples.slice(-limit()); });
+    return { render, compute };
+})();

src/admin/web/app/overview-rows.js

@@ -0,0 +1,179 @@
+// Row units for the custom Overview layout. Widths stay on the 12-column grid;
+// heights snap to a shared row unit (the tallest compact stat card), so a tall
+// panel can sit next to several rows of small cards and every edge lines up.
+// Each card gets at least the rows its content needs; an explicit height
+// (dashboard_widget_heights) can only make it taller, and charts stretch into
+// the extra space. Below the narrow breakpoint the grid falls back to content
+// height (CSS sets --overview-row-units: off).
+window.rustProxyOverviewRows = (() => {
+    const grid = document.getElementById("dashboard-overview-grid");
+    // A compact stat card spans ROW_DIVISIONS rows; finer rows keep taller cards
+    // close to their natural height instead of rounding up by a whole stat card.
+    const MAX_ROWS = 32, ROW_DIVISIONS = 2, FALLBACK_STAT = 84, MIN_INTERVAL_MS = 1500, SHRINK_CONFIRMATIONS = 3;
+    const noop = { schedule() { }, flush() { }, setHeights() { }, rowsFor() { return null; } };
+    if (!grid) return noop;
+    let heights = null, frame = 0, lastRun = 0, lastWidth = 0;
+    const state = new Map();
+    const shrinkVotes = new Map();
+    const cards = () => [...grid.children].filter(node => node.dataset.dashboardWidget);
+
+    function enabled() {
+        if (grid.dataset.overviewLayoutMode !== "custom") return false;
+        return getComputedStyle(grid).getPropertyValue("--overview-row-units").trim() !== "off";
+    }
+    function clear() {
+        grid.classList.remove("has-row-units");
+        grid.style.removeProperty("--overview-row-unit");
+        for (const node of cards()) { node.style.removeProperty("--overview-rows"); delete node.dataset.dashboardRows; }
+        state.clear(); shrinkVotes.clear();
+    }
+    function apply() {
+        frame = 0;
+        if (!grid.getClientRects().length || grid.classList.contains("is-overview-sorting")) return;
+        if (!enabled()) { if (grid.classList.contains("has-row-units")) clear(); return; }
+        lastRun = performance.now();
+        lastWidth = grid.clientWidth;
+        const items = cards().filter(node => !node.hidden && node.getClientRects().length);
+        if (!items.length) return;
+        grid.classList.add("is-measuring-rows");
+        // Bounding boxes include CSS zoom (Settings → Interface scale); grid tracks,
+        // gaps and the row unit are in CSS pixels, so divide measurements by it.
+        const zoom = zoomOf();
+        const natural = items.map(node => node.getBoundingClientRect().height / zoom);
+        grid.classList.remove("is-measuring-rows");
+        const gap = parseFloat(getComputedStyle(grid).rowGap) || 0;
+        const isStat = node => node.classList.contains("stat");
+        // The unit is half of the smallest stat card, so every card ends within a
+        // few pixels of its natural height instead of being rounded up by a whole tile.
+        const stats = natural.filter((_, index) => isStat(items[index]) && natural[index] > 0);
+        const statHeight = stats.length ? Math.min(...stats) : FALLBACK_STAT;
+        const unit = Math.max(16, (statHeight - gap * (ROW_DIVISIONS - 1)) / ROW_DIVISIONS);
+        grid.style.setProperty("--overview-row-unit", `${unit}px`);
+        const seen = new Set();
+        items.forEach((node, index) => {
+            const id = node.dataset.dashboardWidget;
+            seen.add(id);
+            // Small tolerance so sub-pixel rounding never adds a whole row.
+            let min = Math.max(1, Math.ceil((natural[index] + gap) / (unit + gap) - 0.04));
+            const previous = state.get(id);
+            // Grow at once; shrink only after the smaller size is seen repeatedly,
+            // so live data (table rows, wrapping labels) cannot make the grid jump.
+            if (previous && min < previous.min) {
+                const votes = (shrinkVotes.get(id) || 0) + 1;
+                if (votes < SHRINK_CONFIRMATIONS) { shrinkVotes.set(id, votes); min = previous.min; }
+                else shrinkVotes.delete(id);
+            } else shrinkVotes.delete(id);
+            const span = Math.max(min, Math.min(MAX_ROWS, heights?.[id] ?? 0));
+            setRows(node, span);
+            state.set(id, { span, min });
+        });
+        for (const id of [...state.keys()]) if (!seen.has(id)) state.delete(id);
+        grid.classList.add("has-row-units");
+        const geometry = gridGeometry(unit + gap, zoom);
+        if (!geometry) return;
+        equalizeStatRows(items.filter(isStat), geometry);
+        alignBottom(items, geometry);
+    }
+    function setRows(node, rows) {
+        if (node.dataset.dashboardRows === String(rows)) return;
+        node.style.setProperty("--overview-rows", String(rows));
+        node.dataset.dashboardRows = String(rows);
+    }
+    const rowsOf = node => Number(node.dataset.dashboardRows) || 1;
+    function zoomOf() {
+        const css = parseFloat(getComputedStyle(grid).width);
+        const visual = grid.getBoundingClientRect().width;
+        return css > 0 && visual > 0 ? visual / css : 1;
+    }
+    // Geometry in the grid's own CSS pixels (content box), independent of zoom.
+    function gridGeometry(step, zoom) {
+        const style = getComputedStyle(grid);
+        const tracks = style.gridTemplateColumns.split(" ").map(parseFloat).filter(Number.isFinite);
+        if (tracks.length < 2) return null;
+        const columnGap = parseFloat(style.columnGap) || 0;
+        const starts = [];
+        tracks.reduce((x, width) => { starts.push(x); return x + width + columnGap; }, 0);
+        return {
+            starts, step, zoom,
+            left: (parseFloat(style.borderLeftWidth) || 0) + (parseFloat(style.paddingLeft) || 0),
+            top: (parseFloat(style.borderTopWidth) || 0) + (parseFloat(style.paddingTop) || 0),
+        };
+    }
+    function place(node, geometry) {
+        const box = grid.getBoundingClientRect(), rect = node.getBoundingClientRect();
+        const { starts, zoom } = geometry;
+        const left = (rect.left - box.left) / zoom - geometry.left;
+        const right = (rect.right - box.left) / zoom - geometry.left;
+        const top = (rect.top - box.top) / zoom - geometry.top;
+        const first = starts.reduce((best, start, index) => Math.abs(start - left) < Math.abs(starts[best] - left) ? index : best, 0);
+        let last = first;
+        while (last + 1 < starts.length && starts[last + 1] < right - 1) last++;
+        const row = Math.max(0, Math.round(top / geometry.step));
+        return { node, first, last, row, end: row + rowsOf(node) };
+    }
+    // Stat cards that start on the same grid row get the height of the tallest of
+    // them, like a classic row of tiles. Raising a row can move later cards, so the
+    // pass repeats until nothing changes. Large cards never stretch the tiles.
+    function equalizeStatRows(stats, geometry) {
+        for (let pass = 0; pass < 6; pass++) {
+            const groups = new Map();
+            for (const node of stats) {
+                const { row } = place(node, geometry);
+                if (!groups.has(row)) groups.set(row, []);
+                groups.get(row).push(node);
+            }
+            let changed = false;
+            for (const group of groups.values()) {
+                const target = Math.max(...group.map(rowsOf));
+                for (const node of group) if (rowsOf(node) !== target) { setRows(node, target); changed = true; }
+            }
+            if (!changed) return;
+        }
+    }
+    // A card is stretched down over the empty cells beneath it, up to the next card
+    // below (or the grid's last row), so rows end on straight edges instead of
+    // jagged ones. Only empty cells are taken, which never changes where any other
+    // card is placed. The stored / edited height (state.span) is unaffected.
+    // Only small steps are closed (up to two stat tiles or half the card's own
+    // height); a large hole is left visible rather than hidden by a stretched card.
+    function alignBottom(items, geometry) {
+        const cards = items.map(node => place(node, geometry));
+        const bottom = Math.max(...cards.map(card => card.end));
+        for (const card of cards) {
+            const next = cards.reduce((limit, other) => other !== card && other.first <= card.last
+                && other.last >= card.first && other.row >= card.end ? Math.min(limit, other.row) : limit, bottom);
+            const rows = card.end - card.row, extra = next - card.end;
+            if (extra > 0 && extra <= Math.max(ROW_DIVISIONS * 2, Math.ceil(rows / 2))) setRows(card.node, rows + extra);
+        }
+    }
+    function schedule(force = false) {
+        if (frame) return;
+        const wait = force ? 0 : Math.max(0, MIN_INTERVAL_MS - (performance.now() - lastRun));
+        if (wait > 0) { frame = setTimeout(() => { frame = 0; schedule(true); }, wait); return; }
+        frame = requestAnimationFrame(apply);
+    }
+    function flush() {
+        if (frame) { cancelAnimationFrame(frame); clearTimeout(frame); frame = 0; }
+        shrinkVotes.clear();
+        state.forEach(entry => { entry.min = 1; });
+        apply();
+    }
+    function setHeights(value) {
+        heights = value && typeof value === "object" ? { ...value } : null;
+        schedule(true);
+    }
+    if (typeof ResizeObserver === "function") {
+        new ResizeObserver(() => {
+            if (grid.clientWidth && grid.clientWidth !== lastWidth) { shrinkVotes.clear(); schedule(true); }
+        }).observe(grid);
+    }
+    document.fonts?.ready?.then(() => schedule(true));
+    return {
+        schedule,
+        flush,
+        setHeights,
+        rowsFor(id) {
+            return grid.classList.contains("has-row-units") ? state.get(id) || null : null;
+        },
+    };
+})();

src/admin/web/app/preferences.js

@@ -14,7 +14,7 @@ const ADMIN_DEFAULT_HIDDEN_WIDGETS = Object.freeze([...new Set([
 const ADMIN_APPEARANCE_DEFAULTS = Object.freeze({
     theme: "dark", language: "auto", ui_scale: 100, time_format: "24h", chart_style: "default",
     chart_axes: false, interface_icons: false, logo_animation: false,
-    button_style: "normal", corner_style: "default", table_density: "normal", dashboard_density: ADMIN_DASHBOARD_DEFAULTS.dashboard_density, dashboard_widgets: [...ADMIN_DASHBOARD_WIDGETS], dashboard_hidden_widgets: [...ADMIN_DEFAULT_HIDDEN_WIDGETS], dashboard_widget_sizes: null,
+    button_style: "normal", corner_style: "default", table_density: "normal", dashboard_density: ADMIN_DASHBOARD_DEFAULTS.dashboard_density, dashboard_widgets: [...ADMIN_DASHBOARD_WIDGETS], dashboard_hidden_widgets: [...ADMIN_DEFAULT_HIDDEN_WIDGETS], dashboard_widget_sizes: null, dashboard_widget_heights: null,
 });
 const CHART_STYLE_KEYS = Object.freeze({ default: "chartStyleDefault", soft: "chartStyleSoft", technical: "chartStyleTechnical", high_contrast: "chartStyleHighContrast", neon: "chartStyleNeon", monochrome: "chartStyleMonochrome", warm: "chartStyleWarm", cool: "chartStyleCool", sunset: "chartStyleSunset", aurora: "chartStyleAurora", ocean: "chartStyleOcean", forest: "chartStyleForest", pastel: "chartStylePastel", terminal: "chartStyleTerminal", blueprint: "chartStyleBlueprint", colorblind: "chartStyleColorblind" });
 let adminPreferences = null, adminPreferencesLoading = null, adminPreferencesWrite = Promise.resolve(), adminPreferencesUnavailable = false;
@@ -69,6 +69,15 @@ function normalizeDashboardWidgetSizes(value) {
     }
     return result;
 }
+const DASHBOARD_MAX_ROWS = 32;
+function normalizeDashboardWidgetHeights(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+    const result = {};
+    for (const [id, rows] of Object.entries(value)) {
+        if (ADMIN_DASHBOARD_BY_ID.has(id) && Number.isInteger(rows) && rows >= 1 && rows <= DASHBOARD_MAX_ROWS) result[id] = rows;
+    }
+    return Object.keys(result).length ? result : null;
+}
 function dashboardWidgetWidth(id, sizes) {
     return sizes?.[id] ?? dashboardDefaultWidth(id);
 }
@@ -144,7 +153,7 @@ function applyAdminDashboardDensity(value) {
     const density = normalizeAdminDensity(value, "compact"); document.documentElement.dataset.dashboardDensity = density;
     const select = $("ui-dashboard-density"); if (select) select.value = density; return density;
 }
-function applyDashboardLayout(order, hidden, sizes = null) {
+function applyDashboardLayout(order, hidden, sizes = null, heights = undefined) {
     const normalizedOrder = normalizeDashboardWidgets(order), hiddenSet = new Set(normalizeHiddenDashboardWidgets(hidden));
     const widths = normalizeDashboardWidgetSizes(sizes);
     const grid = document.querySelector("#panel-overview .stats-grid");
@@ -161,6 +170,8 @@ function applyDashboardLayout(order, hidden, sizes = null) {
     window.rustProxyStreamDashboard?.syncVisibility?.([...hiddenSet]);
     window.rustProxyBackendDashboard?.syncVisibility?.([...hiddenSet]);
     window.rustProxyMasonry?.refresh?.();
+    if (heights !== undefined) window.rustProxyOverviewRows?.setHeights?.(normalizeDashboardWidgetHeights(heights));
+    window.rustProxyOverviewRows?.schedule?.();
     if (typeof latestStatus !== "undefined" && latestStatus && currentPanel === "overview") { window.rustProxyStreamDashboard?.render?.(latestStatus, [...hiddenSet], false); window.rustProxyBackendDashboard?.render?.(latestStatus, [...hiddenSet], false); window.rustProxyExtraOverview?.render?.(latestStatus, false); window.rustProxyWideOverview?.render?.(latestStatus, false); window.rustProxyWebOverview?.render?.(latestStatus, false); }
     return { order: normalizedOrder, hidden: [...hiddenSet], sizes: widths };
 }
@@ -283,14 +294,15 @@ function applyAdminPreferences(value, cache = true) {
     const savedOrder = normalizeDashboardWidgets(value.dashboard_widgets);
     const savedHidden = normalizeHiddenDashboardWidgets(value.dashboard_hidden_widgets, value.dashboard_widgets);
     const savedSizes = normalizeDashboardWidgetSizes(value.dashboard_widget_sizes);
-    if (editing) applyDashboardLayout(editing.order, editing.hidden, editing.sizes);
-    else applyDashboardLayout(savedOrder, savedHidden, savedSizes);
+    const savedHeights = normalizeDashboardWidgetHeights(value.dashboard_widget_heights);
+    if (editing) applyDashboardLayout(editing.order, editing.hidden, editing.sizes, editing.heights);
+    else applyDashboardLayout(savedOrder, savedHidden, savedSizes, savedHeights);
     const normalized = {
         ...value,
         refresh: normalizeRefreshPreferences(value.refresh),
         theme: applyAdminTheme(value.theme, cache), language: applyAdminLanguage(value.language, cache, false), ui_scale: applyAdminUiScale(value.ui_scale, cache),
         time_format: applyAdminTimeFormat(value.time_format), chart_style: applyAdminChartStyle(value.chart_style), chart_axes: applyAdminChartAxes(value.chart_axes), interface_icons: applyAdminInterfaceIcons(value.interface_icons), logo_animation: applyAdminLogoAnimation(value.logo_animation), button_style: applyAdminButtonStyle(value.button_style), corner_style: applyAdminCornerStyle(value.corner_style, cache), table_density: applyAdminTableDensity(value.table_density),
-        dashboard_density: applyAdminDashboardDensity(value.dashboard_density), dashboard_widgets: savedOrder, dashboard_hidden_widgets: savedHidden, dashboard_widget_sizes: savedSizes,
+        dashboard_density: applyAdminDashboardDensity(value.dashboard_density), dashboard_widgets: savedOrder, dashboard_hidden_widgets: savedHidden, dashboard_widget_sizes: savedSizes, dashboard_widget_heights: savedHeights,
     };
     adminPreferences = normalized;
     window.rustProxyRefresh?.update(normalized.refresh);
@@ -338,7 +350,7 @@ function updateAdminPreferences(patch) {
         next.refresh = normalizeRefreshPreferences(next.refresh);
         next.theme = normalizeAdminTheme(next.theme); next.language = normalizeAdminLanguage(next.language); next.ui_scale = normalizeAdminUiScale(next.ui_scale);
         next.time_format = normalizeAdminTimeFormat(next.time_format); next.chart_style = normalizeAdminChartStyle(next.chart_style); next.chart_axes = next.chart_axes === true; next.interface_icons = next.interface_icons === true; next.logo_animation = next.logo_animation === true; next.button_style = normalizeAdminButtonStyle(next.button_style); next.corner_style = normalizeAdminCornerStyle(next.corner_style); next.table_density = normalizeAdminDensity(next.table_density);
-        next.dashboard_density = normalizeAdminDensity(next.dashboard_density, "compact"); next.dashboard_widgets = normalizeDashboardWidgets(next.dashboard_widgets); next.dashboard_hidden_widgets = normalizeHiddenDashboardWidgets(next.dashboard_hidden_widgets); next.dashboard_widget_sizes = normalizeDashboardWidgetSizes(next.dashboard_widget_sizes);
+        next.dashboard_density = normalizeAdminDensity(next.dashboard_density, "compact"); next.dashboard_widgets = normalizeDashboardWidgets(next.dashboard_widgets); next.dashboard_hidden_widgets = normalizeHiddenDashboardWidgets(next.dashboard_hidden_widgets); next.dashboard_widget_sizes = normalizeDashboardWidgetSizes(next.dashboard_widget_sizes); next.dashboard_widget_heights = normalizeDashboardWidgetHeights(next.dashboard_widget_heights);
         const saved = await api("/api/preferences", { method: "PUT", body: JSON.stringify(next) });
         if (!authenticated || epoch !== authEpoch) return adminPreferences;
         return applyAdminPreferences(saved);
@@ -461,7 +473,7 @@ $("ui-dashboard-density")?.addEventListener("change", () => {
 async function resetAppearancePatch(patch, control, messageKey = "appearanceSectionResetDone") {
     if (control) control.disabled = true; let previous = null;
     try {
-        const current = await loadAdminPreferences(); previous = current ? { ...current, dashboard_widgets: [...current.dashboard_widgets], dashboard_hidden_widgets: [...current.dashboard_hidden_widgets], dashboard_widget_sizes: current.dashboard_widget_sizes === null ? null : { ...current.dashboard_widget_sizes } } : null;
+        const current = await loadAdminPreferences(); previous = current ? { ...current, dashboard_widgets: [...current.dashboard_widgets], dashboard_hidden_widgets: [...current.dashboard_hidden_widgets], dashboard_widget_sizes: current.dashboard_widget_sizes === null ? null : { ...current.dashboard_widget_sizes }, dashboard_widget_heights: current.dashboard_widget_heights ? { ...current.dashboard_widget_heights } : null } : null;
         if (current) applyAdminPreferences({ ...current, ...patch }); await updateAdminPreferences(patch); toast(t(messageKey));
     } catch (error) { if (previous) applyAdminPreferences(previous); if (error.status !== 401) toast(error.message, true); }
     finally { if (control) control.disabled = false; }
@@ -469,9 +481,9 @@ async function resetAppearancePatch(patch, control, messageKey = "appearanceSect
 document.querySelectorAll("[data-appearance-reset]").forEach(control => control.addEventListener("click", () => {
     const patches = {
         interface: { theme: "dark", language: "auto", ui_scale: 100, time_format: "24h", interface_icons: false, logo_animation: false, button_style: "normal", corner_style: "default" }, charts: { chart_style: "default", chart_axes: false }, tables: { table_density: "normal" },
-        dashboard: { dashboard_density: ADMIN_DASHBOARD_DEFAULTS.dashboard_density, dashboard_widgets: [...ADMIN_DASHBOARD_WIDGETS], dashboard_hidden_widgets: [...ADMIN_APPEARANCE_DEFAULTS.dashboard_hidden_widgets], dashboard_widget_sizes: null },
+        dashboard: { dashboard_density: ADMIN_DASHBOARD_DEFAULTS.dashboard_density, dashboard_widgets: [...ADMIN_DASHBOARD_WIDGETS], dashboard_hidden_widgets: [...ADMIN_APPEARANCE_DEFAULTS.dashboard_hidden_widgets], dashboard_widget_sizes: null, dashboard_widget_heights: null },
     };
     void resetAppearancePatch(patches[control.dataset.appearanceReset] || {}, control);
 }));
-$("appearance-reset")?.addEventListener("click", () => void resetAppearancePatch({ ...ADMIN_APPEARANCE_DEFAULTS, dashboard_widgets: [...ADMIN_DASHBOARD_WIDGETS], dashboard_hidden_widgets: [...ADMIN_APPEARANCE_DEFAULTS.dashboard_hidden_widgets], dashboard_widget_sizes: null }, $("appearance-reset"), "appearanceResetDone"));
+$("appearance-reset")?.addEventListener("click", () => void resetAppearancePatch({ ...ADMIN_APPEARANCE_DEFAULTS, dashboard_widgets: [...ADMIN_DASHBOARD_WIDGETS], dashboard_hidden_widgets: [...ADMIN_APPEARANCE_DEFAULTS.dashboard_hidden_widgets], dashboard_widget_sizes: null, dashboard_widget_heights: null }, $("appearance-reset"), "appearanceResetDone"));
 refreshAppearanceUi();

src/admin/web/app/runtime.js

@@ -665,6 +665,8 @@ function renderDiagnostics(status, appendSample = true, systemSample = appendSam
     $("process-cpu-sparkline").closest(".mini-live-chart").hidden = live.process_cpu_percent == null;
     $("process-rss-sparkline").closest(".mini-live-chart").hidden = live.process_rss_bytes == null;
     renderProcessOverview(d, status, live, systemSample);
+    window.rustProxyMemoryBreakdown?.render(status, appendSample);
+    window.rustProxyOverviewRows?.schedule();
     updateCacheMemorySizing();
     const networkRateSupported = live.network_rx_bytes_per_second != null && live.network_tx_bytes_per_second != null;
     if (systemSample) setOptionalMetric("system-network", d.network_rx_bytes_per_second != null && d.network_tx_bytes_per_second != null, `${fmtBytes(d.network_rx_bytes_per_second)} / ${fmtBytes(d.network_tx_bytes_per_second)}`);