feat: multi-percentage monitors render as grid, no big counter

web/src/components/MonitorCard.tsx

@@ -1,11 +1,13 @@
 import type { Monitor } from "../gen/homelab/v1/homelab_pb";
 
-/** Карточка монитора: percentages → radial-progress'ы (первый большой, остальные — по ядрам), иначе текст. */
+/** Карточка монитора: 1 процент → большой radial, несколько → грид маленьких (по ядрам, без общего). */
 export function MonitorCard({ s }: { s: Monitor }) {
   const pcts =
     s.percentages.length > 0 ? s.percentages : s.percentage >= 0 ? [s.percentage] : [];
-  const main = pcts[0];
-  const extra = pcts.slice(1);
+  const multi = pcts.length > 1;
+  const bars = multi ? pcts.slice(1) : pcts; // при нескольких процентах общий не показываем
+  const main = bars[0];
+  const extra = bars.slice(1);
   return (
     <div class="card bg-base-200 shadow">
       <div class="card-body p-4 flex flex-row justify-between align-center">
@@ -13,7 +15,26 @@ export function MonitorCard({ s }: { s: Monitor }) {
           <h2 class="card-title text-sm font-medium text-base-content/60">
             {s.name}
           </h2>
-          {main !== undefined && main >= 0 ? (
+          {multi ? (
+            <div class="grid w-fit grid-cols-2 gap-2">
+              {bars.map((v, i) => (
+                <div
+                  class="radial-progress text-secondary"
+                  style={
+                    {
+                      "--value": v,
+                      "--size": "2.6rem",
+                      "--thickness": "3px",
+                    } as preact.JSX.CSSProperties
+                  }
+                  role="progressbar"
+                  title={`cpu${i}`}
+                >
+                  <span class="text-[0.6rem]">{v}</span>
+                </div>
+              ))}
+            </div>
+          ) : main !== undefined && main >= 0 ? (
             <div class="flex flex-wrap items-center gap-2">
               <div
                 class="radial-progress text-primary"