Dashboard: per-host Docker volumes total (0.21.1)

The per-host resource bar gained a "Volumes" stat showing the total size of
that host's Docker volumes. It reuses the existing cached /volumes/sizes lookup
(docker system df, ~60s TTL) summed client-side, polled every 60s per host so
the slow df walk never blocks the fast system-info poll.

Frontend-only. Fixed sumSizes to reduce<number> so the value is number|undefined.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/Dashboard.tsx

@@ -12,6 +12,7 @@ import {
   Square,
   RotateCw,
   Server,
+  Database,
 } from "lucide-react";
 import { toast } from "sonner";
 import { Card, Spinner, StatusDot, Badge } from "@/components/ui";
@@ -20,12 +21,16 @@ import { stacksApi } from "@/api/stacks";
 import { systemApi } from "@/api/system";
 import { imagesApi } from "@/api/images";
 import { agentsApi } from "@/api/agents";
+import { volumesApi } from "@/api/volumes";
 import { apiErrorMessage } from "@/api/client";
 import { formatBytes, relativeTime } from "@/lib/utils";
 import { useAuthStore } from "@/store/auth";
 import { useStackActions } from "@/hooks/useStackActions";
 import type { Agent, StackStats, StackSummary } from "@/types";
 
+const sumSizes = (m: Record<string, number | null>) =>
+  Object.values(m).reduce<number>((a, b) => a + (b ?? 0), 0);
+
 export function Dashboard() {
   const isAdmin = useAuthStore((s) => s.user?.role === "admin");
   const { busyId, start, stop, restart } = useStackActions();
@@ -36,6 +41,12 @@ export function Dashboard() {
   const audit = useQuery({ queryKey: ["audit"], queryFn: () => systemApi.audit(10), refetchInterval: 10000 });
   const updates = useQuery({ queryKey: ["image-updates"], queryFn: () => imagesApi.updates(), refetchInterval: 60000 });
   const agents = useQuery({ queryKey: ["agents"], queryFn: () => agentsApi.list(), refetchInterval: 15000 });
+  // Volumes total is from `docker system df` (slow, cached ~60s server-side).
+  const volSize = useQuery({
+    queryKey: ["volumes-size", "local"],
+    queryFn: () => volumesApi.sizes().then(sumSizes),
+    refetchInterval: 60000,
+  });
 
   const updateCount = Object.values(updates.data ?? {}).filter((u) => u.update_available).length;
   const hasAgents = (agents.data?.length ?? 0) > 0;
@@ -65,6 +76,7 @@ export function Dashboard() {
           memTotal={info.data?.ram.total ?? 0}
           diskUsed={info.data?.disk.used ?? 0}
           diskTotal={info.data?.disk.total ?? 0}
+          volumesSize={volSize.data}
           containersRunning={info.data?.containers_running ?? 0}
           containersTotal={info.data?.containers_total ?? 0}
           dockerVersion={info.data?.docker_version ?? ""}
@@ -140,6 +152,12 @@ function AgentDashboardSection({ agent, isAdmin }: { agent: Agent; isAdmin: bool
     enabled: online,
     refetchInterval: 30000,
   });
+  const volSize = useQuery({
+    queryKey: ["volumes-size", agent.id],
+    queryFn: () => volumesApi.sizes(false, agent.id).then(sumSizes),
+    enabled: online,
+    refetchInterval: 60000,
+  });
 
   const run = async (action: string, label: string, id: string) => {
     setBusyId(id);
@@ -173,6 +191,7 @@ function AgentDashboardSection({ agent, isAdmin }: { agent: Agent; isAdmin: bool
           memTotal={sys.data?.mem_total ?? 0}
           diskUsed={sys.data?.disk_used ?? 0}
           diskTotal={sys.data?.disk_total ?? 0}
+          volumesSize={volSize.data}
           containersRunning={sys.data?.containers_running ?? 0}
           containersTotal={sys.data?.containers_total ?? 0}
           dockerVersion={sys.data?.docker_version ?? ""}
@@ -427,6 +446,7 @@ function ResourceBar({
   memTotal,
   diskUsed,
   diskTotal,
+  volumesSize,
   containersRunning,
   containersTotal,
   dockerVersion,
@@ -436,12 +456,13 @@ function ResourceBar({
   memTotal: number;
   diskUsed: number;
   diskTotal: number;
+  volumesSize?: number;
   containersRunning: number;
   containersTotal: number;
   dockerVersion: string;
 }) {
   return (
-    <div className="mb-4 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
+    <div className="mb-4 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
       <Stat icon={<Cpu className="h-5 w-5" />} label="CPU cores" value={cpuCores || "—"} />
       <Stat
         icon={<MemoryStick className="h-5 w-5" />}
@@ -453,6 +474,11 @@ function ResourceBar({
         label="Disk"
         value={diskTotal ? `${formatBytes(diskUsed)} / ${formatBytes(diskTotal)}` : "—"}
       />
+      <Stat
+        icon={<Database className="h-5 w-5" />}
+        label="Volumes"
+        value={volumesSize === undefined ? "…" : formatBytes(volumesSize)}
+      />
       <Stat
         icon={<Container className="h-5 w-5" />}
         label="Containers"