From 475cb3e75c0a63c93c8ecbb565069b6bb3cac4b2 Mon Sep 17 00:00:00 2001
From: Gmer4Lfe <gmer4lfe@gmail.com>
Date: Sun, 24 May 2026 11:21:43 -0400
Subject: [PATCH] =?UTF-8?q?varaverk:=20memory=20card=20=E2=80=94=20top=203?=
 =?UTF-8?q?=20usages=20by=20size=20in=20top-right=20corner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../emhttp/plugins/varaverk/pages/monitor.php | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php b/Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php
index a5585fd..119b905 100644
--- a/Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php
+++ b/Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php
@@ -259,8 +259,25 @@ function vvRenderMemory(mem) {
   const usedKb = total - (mem.free_kb ?? 0);
   const usedPct = Math.round(usedKb / total * 100);
   const totalColor = usedPct >= 85 ? '#f44336' : usedPct >= 65 ? '#ff9800' : '#ccc';
-  let html = `<div style="font-size:14px;font-weight:600;color:${totalColor};margin-bottom:10px;">
-    ${vvFmtGib(usedKb)} <span style="font-size:11px;color:#555;font-weight:400;">/ ${vvFmtGib(total)}</span>
+
+  const buckets = [
+    { label: 'System', kb: mem.system_kb ?? 0, color: VV_MEM_COLORS.system },
+    { label: 'VM',     kb: mem.vm_kb     ?? 0, color: VV_MEM_COLORS.vm     },
+    { label: 'ZFS',    kb: mem.zfs_kb    ?? 0, color: VV_MEM_COLORS.zfs    },
+    { label: 'Docker', kb: mem.docker_kb ?? 0, color: VV_MEM_COLORS.docker },
+  ];
+  const top3 = [...buckets].sort((a, b) => b.kb - a.kb).slice(0, 3);
+  const top3Html = top3.map(b =>
+    `<div><span style="color:${b.color};font-size:9px;margin-right:3px;">●</span>`+
+    `<span style="color:#888;font-size:9px;">${b.label}&nbsp;</span>`+
+    `<span style="color:#aaa;font-size:10px;font-weight:600;">${vvFmtGib(b.kb)}</span></div>`
+  ).join('');
+
+  let html = `<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;">
+    <div style="font-size:14px;font-weight:600;color:${totalColor};">
+      ${vvFmtGib(usedKb)} <span style="font-size:11px;color:#555;font-weight:400;">/ ${vvFmtGib(total)}</span>
+    </div>
+    <div style="text-align:right;line-height:1.7;">${top3Html}</div>
   </div>`;
   html += vvMemRow('System', mem.system_kb ?? 0, total, VV_MEM_COLORS.system)
         + vvMemRow('VM',     mem.vm_kb     ?? 0, total, VV_MEM_COLORS.vm)