@flame0510/project-aether 1.10.0 → 1.11.0

package/app/system/AgentCharts.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { apiFetch } from '@/lib/apiFetch';
+import { formatMb } from '@/lib/utils/format';
+import { Skeleton } from '../components/Skeleton';
+import { Surface, TimeSeriesChart } from '../components/ui';
+
+const POLL_MS = 30_000;
+
+export interface ContainerHistoryPayload {
+  available: boolean;
+  range: string;
+  bucket_s: number;
+  history: { ts: number; cpu_avg: number | null; cpu_max: number | null; mem_avg: number | null; mem_max: number | null }[];
+  storage_bucket_s: number;
+  storage_history: { ts: number; total_mb: number | null }[];
+}
+
+/** A CPU share axis label: an agent sits between 0.01 % and a few percent, so the decimals move with the scale. */
+function cpuLabel(v: number): string {
+  if (v >= 10) return `${Math.round(v)}%`;
+  if (v >= 1) return `${Math.round(v * 10) / 10}%`;
+  return `${Math.round(v * 100) / 100}%`;
+}
+
+/**
+ * The same three charts as the machine's — CPU, Memory, Storage — for one container, under
+ * the page's range tabs. Mounted only while its accordion is open: it fetches on mount, polls
+ * every 30 s with an `AbortController` ref, and the fetch is aborted when it closes or the
+ * range changes. Each series is a small fraction of Docker's cores, so the y axis follows its
+ * own peak (`yMax="auto"`) and memory and storage are absolute sizes, not percents.
+ */
+export function AgentCharts({
+  container, range, span, formatTime,
+}: { container: string; range: string; span: number; formatTime: (ts: number) => string }) {
+  const [data, setData] = useState<ContainerHistoryPayload | null>(null);
+  const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    const load = async () => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const res = await apiFetch(
+          `/api/metrics/containers?container=${encodeURIComponent(container)}&range=${range}`,
+          { signal: controller.signal },
+        );
+        const body = await res.json();
+        if (!res.ok) throw new Error(body?.error || `Error ${res.status}`);
+        setData(body as ContainerHistoryPayload);
+        setError('');
+      } catch (e: any) {
+        if (e?.name !== 'AbortError') setError(e?.message || 'Could not load the history');
+      }
+    };
+    load();
+    const timer = setInterval(load, POLL_MS);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, [container, range]);
+
+  const to = Math.floor(Date.now() / 1000);
+  const from = to - span;
+  // While another range loads the previous render stays, dimmed.
+  const stale = data !== null && data.range !== range;
+
+  if (error && !data) return <span style={{ color: 'var(--red)', fontSize: 12 }}>{error}</span>;
+  if (!data) {
+    return (
+      <div className="system-agent-charts" aria-hidden="true">
+        {[0, 1, 2].map((i) => (
+          <Surface as="section" variant="subtle" key={i}>
+            <div className="ui-kicker"><Skeleton as="span" inline width={110} height={10} /></div>
+            <Skeleton height={160} />
+            <div className="ui-chart__table"><div style={{ fontSize: 10 }}><Skeleton as="span" inline width={48} height={9} /></div></div>
+          </Surface>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="system-agent-charts">
+      {error && (
+        <p className="ui-muted" style={{ fontSize: 11, margin: 0, gridColumn: '1 / -1' }}>
+          Could not refresh ({error}) — showing the last answer; it is tried again every {POLL_MS / 1000} s.
+        </p>
+      )}
+      <Surface as="section" variant="subtle">
+        <div className="ui-kicker">CPU · share of Docker's cores</div>
+        <TimeSeriesChart
+          label={`CPU share of ${container}`}
+          points={data.history.map((p) => ({ ts: p.ts, value: p.cpu_avg, peak: p.cpu_max }))}
+          from={from}
+          to={to}
+          bucket={data.bucket_s}
+          yMax="auto"
+          formatValue={cpuLabel}
+          stale={stale}
+          formatTime={formatTime}
+        />
+      </Surface>
+      <Surface as="section" variant="subtle">
+        <div className="ui-kicker">Memory · average and peak</div>
+        <TimeSeriesChart
+          label={`Memory of ${container}`}
+          points={data.history.map((p) => ({ ts: p.ts, value: p.mem_avg, peak: p.mem_max }))}
+          from={from}
+          to={to}
+          bucket={data.bucket_s}
+          yMax="auto"
+          formatValue={formatMb}
+          stale={stale}
+          formatTime={formatTime}
+        />
+      </Surface>
+      <Surface as="section" variant="subtle">
+        <div className="ui-kicker">Storage · volumes and writable layer</div>
+        <TimeSeriesChart
+          label={`Storage of ${container}`}
+          points={data.storage_history.map((p) => ({ ts: p.ts, value: p.total_mb }))}
+          from={from}
+          to={to}
+          bucket={data.storage_bucket_s}
+          yMax="auto"
+          formatValue={formatMb}
+          stale={stale}
+          formatTime={formatTime}
+        />
+      </Surface>
+    </div>
+  );
+}

package/app/system/AgentsSection.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { apiFetch } from '@/lib/apiFetch';
+import { formatMb, formatRate, formatSharePercent } from '@/lib/utils/format';
+import { Accordion, Pill, Surface } from '../components/ui';
+import { AgentCharts } from './AgentCharts';
+import { SystemAgentsHeading, SystemAgentsSkeleton } from './SystemSkeleton';
+
+const POLL_MS = 30_000;
+const CONTAINER_RE = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/;
+/** Three sampling intervals: fresher than this, the daemon has just seen the container. */
+const RECENT_S = 180;
+
+interface ContainerRow {
+  container: string;
+  name: string;
+  agent_id: string | null;
+  is_agent: boolean;
+  running: boolean;
+  last_seen: number;
+  now: {
+    cpu_cores: number | null; cpu_percent: number | null; mem_mb: number | null; mem_percent: number | null; pids: number | null;
+    net_rx_bps: number | null; net_tx_bps: number | null; blk_read_bps: number | null; blk_write_bps: number | null;
+  } | null;
+  range: { cpu_avg_percent: number | null; cpu_max_percent: number | null; mem_avg_mb: number | null; mem_max_mb: number | null };
+  storage: { volume_mb: number | null; layer_mb: number | null; total_mb: number | null; ts: number | null };
+}
+
+interface DockerStorage {
+  ts: number;
+  images_mb: number | null; images_reclaimable_mb: number | null;
+  build_cache_mb: number | null; build_cache_reclaimable_mb: number | null;
+  volumes_mb: number; unused_volumes_mb: number; layers_mb: number;
+  unused_volumes: { name: string; size_mb: number }[];
+}
+
+interface OverviewPayload {
+  available: boolean;
+  range: string;
+  interval_s: number;
+  host?: { ncpu: number; mem_total_mb: number } | null;
+  sampled_at?: number | null;
+  age_s?: number | null;
+  containers?: ContainerRow[];
+  rest?: { cpu_percent: number | null; mem_mb: number | null } | null;
+  docker_storage?: DockerStorage | null;
+}
+
+function ago(ts: number): string {
+  const min = Math.round((Date.now() / 1000 - ts) / 60);
+  if (min < 1) return 'just now';
+  if (min < 60) return `${min} min ago`;
+  const h = Math.round(min / 60);
+  return h < 48 ? `${h} h ago` : `${Math.round(h / 24)} d ago`;
+}
+
+function Figure({ label, value }: { label: string; value: ReactNode }) {
+  return <span><span className="ui-muted">{label}</span> {value}</span>;
+}
+
+/** One cell of the Docker storage block: what it is, how much, and what of it no container uses. */
+function StorageCell({ label, value, note, title }: { label: string; value: string; note?: string; title?: string }) {
+  return (
+    <div title={title}>
+      <div className="ui-kicker">{label}</div>
+      <div style={{ fontSize: 16, marginTop: 6 }}>{value}</div>
+      {note && <div className="ui-muted" style={{ fontSize: 11, marginTop: 4 }}>{note}</div>}
+    </div>
+  );
+}
+
+/**
+ * The System page's *Agents* section: one accordion per container — closed it carries the
+ * numbers (CPU, memory, storage, processes), open it carries the same three charts as the
+ * machine, for that container, under the page's range tabs. Above them what Docker holds on
+ * disk; below them everything that is not a container, so the figures add up to the cards.
+ *
+ * `/system?agent=<container>` opens one accordion and scrolls to it.
+ */
+export function AgentsSection({
+  range, span, formatTime,
+}: { range: string; span: number; formatTime: (ts: number) => string }) {
+  const [data, setData] = useState<OverviewPayload | null>(null);
+  const [error, setError] = useState('');
+  const [open, setOpen] = useState<string[]>([]);
+  const [nowS, setNowS] = useState(() => Math.floor(Date.now() / 1000));
+  const abortRef = useRef<AbortController | null>(null);
+  const scrollTo = useRef<string | null>(null);
+
+  // A link from the agent panel: open that accordion, scroll to it once the list has loaded.
+  useEffect(() => {
+    const agent = new URLSearchParams(window.location.search).get('agent');
+    if (agent && CONTAINER_RE.test(agent)) {
+      setOpen([agent]);
+      scrollTo.current = agent;
+    }
+  }, []);
+
+  useEffect(() => {
+    const load = async () => {
+      // Advance the displayed age even when another failed request has the same error text.
+      setNowS(Math.floor(Date.now() / 1000));
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const res = await apiFetch(`/api/metrics/containers?range=${range}`, { signal: controller.signal });
+        const body = await res.json();
+        if (!res.ok) throw new Error(body?.error || `Error ${res.status}`);
+        setData(body as OverviewPayload);
+        setError('');
+      } catch (e: any) {
+        if (e?.name !== 'AbortError') setError(e?.message || 'Could not load the containers');
+      }
+    };
+    load();
+    const timer = setInterval(load, POLL_MS);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, [range]);
+
+  // One attempt, on the first answer: a container that is not in the list then must not pull
+  // the page down later, on a poll that happens to include it.
+  useEffect(() => {
+    const target = scrollTo.current;
+    if (!data || !target) return;
+    scrollTo.current = null;
+    document.getElementById(`agent-${target}`)?.scrollIntoView({ block: 'start' });
+  }, [data]);
+
+  const toggle = (container: string) =>
+    setOpen((prev) => (prev.includes(container) ? prev.filter((c) => c !== container) : [...prev, container]));
+
+  const stale = data !== null && data.range !== range;
+  const containers = data?.containers ?? [];
+  const storage = data?.docker_storage ?? null;
+  // Recompute age from the sample timestamp: a failed refresh must not freeze an old answer's
+  // age_s at the value it had when it was fetched.
+  const sampleAgeS = data?.sampled_at == null ? null : Math.max(0, nowS - data.sampled_at);
+  const notCurrent = data?.available && sampleAgeS !== null && sampleAgeS > data.interval_s * 3;
+
+  return (
+    <section style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <SystemAgentsHeading />
+
+      {error && !data && <Surface tone="danger"><span style={{ color: 'var(--red)', fontSize: 12 }}>{error}</span></Surface>}
+
+      {error && data && (
+        <Surface tone="warning">
+          <div className="ui-kicker">Could not refresh</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>{error}. Showing the last answer; it is tried again every {POLL_MS / 1000} s.</p>
+        </Surface>
+      )}
+
+      {!data && !error && <SystemAgentsSkeleton />}
+
+      {data && !data.available && (
+        <Surface tone="warning">
+          <div className="ui-kicker">No container samples yet</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+            The Rev4a daemon records them every {data.interval_s} s once Docker answers. If this stays empty, check that rev4a serve is running and that Docker is up.
+          </p>
+        </Surface>
+      )}
+
+      {notCurrent && sampleAgeS !== null && (
+        <Surface tone="warning">
+          <div className="ui-kicker">Not collecting</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+            The latest container sample is {Math.round(sampleAgeS / 60)} min old: the values below are not current. Check that the Rev4a daemon is running and that Docker is up.
+          </p>
+        </Surface>
+      )}
+
+      {data?.available && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, opacity: stale ? 0.5 : 1 }}>
+          {storage && (
+            <Surface as="section">
+              <div className="ui-kicker">Docker storage</div>
+              <div className="system-docker-storage" style={{ marginTop: 10 }}>
+                <StorageCell
+                  label="Images"
+                  value={formatMb(storage.images_mb)}
+                  note={storage.images_reclaimable_mb ? `${formatMb(storage.images_reclaimable_mb)} not used by a container` : undefined}
+                  title="Images no container is running from — older agent versions you may still roll back to count here"
+                />
+                <StorageCell
+                  label="Volumes"
+                  value={formatMb(storage.volumes_mb)}
+                  note={storage.unused_volumes_mb ? `${formatMb(storage.unused_volumes_mb)} not attached to a container` : undefined}
+                  title={storage.unused_volumes.map((v) => `${v.name}: ${formatMb(v.size_mb)}`).join('\n') || undefined}
+                />
+                <StorageCell label="Writable layers" value={formatMb(storage.layers_mb)} />
+                <StorageCell
+                  label="Build cache"
+                  value={formatMb(storage.build_cache_mb)}
+                  note={storage.build_cache_reclaimable_mb ? `${formatMb(storage.build_cache_reclaimable_mb)} not in use` : undefined}
+                />
+              </div>
+              <p className="ui-muted" style={{ fontSize: 11, marginTop: 10 }}>
+                Read {ago(storage.ts)}, every 10 min.
+                {storage.unused_volumes.length > 0 && ` Not attached: ${storage.unused_volumes.map((v) => `${v.name} (${formatMb(v.size_mb)})`).join(', ')}.`}
+              </p>
+            </Surface>
+          )}
+
+          {containers.length === 0 && (
+            <Surface><p className="ui-muted" style={{ fontSize: 12 }}>No container was seen in this range.</p></Surface>
+          )}
+
+          {containers.map((c) => {
+            const r = c.range;
+            // Docker's list can stay fresh even when every stats call fails. Decide whether
+            // the container was recently seen from its own timestamp, not the newest metrics row.
+            const observed = Math.max(0, nowS - c.last_seen) <= RECENT_S;
+            const current = !notCurrent && c.running ? c.now : null;
+            const status = current ? null : observed ? 'no data' : notCurrent ? 'not current' : 'stopped';
+            const parts = current
+              ? [
+                  current.cpu_cores !== null ? `${current.cpu_cores.toFixed(3)} cores` : null,
+                  r.cpu_avg_percent !== null ? `CPU avg ${formatSharePercent(r.cpu_avg_percent)} · peak ${formatSharePercent(r.cpu_max_percent)}` : null,
+                  r.mem_avg_mb !== null ? `Memory avg ${formatMb(r.mem_avg_mb)} · peak ${formatMb(r.mem_max_mb)}` : null,
+                  current.mem_percent !== null ? `${current.mem_percent}% of Docker's memory` : null,
+                  current.net_rx_bps !== null || current.net_tx_bps !== null ? `↓ ${formatRate(current.net_rx_bps)} ↑ ${formatRate(current.net_tx_bps)}` : null,
+                ]
+              : [`Last seen ${ago(c.last_seen)}`, r.cpu_avg_percent !== null ? `CPU avg ${formatSharePercent(r.cpu_avg_percent)} · peak ${formatSharePercent(r.cpu_max_percent)} while running` : null];
+            return (
+              <Accordion
+                key={c.container}
+                id={`agent-${c.container}`}
+                open={open.includes(c.container)}
+                onToggle={() => toggle(c.container)}
+                title={
+                  <>
+                    <span style={{ fontWeight: 600 }}>{c.name}</span>
+                    <Pill tone={c.is_agent ? 'accent' : 'neutral'}>{c.is_agent ? 'agent' : 'container'}</Pill>
+                    {status && <Pill tone="warning">{status}</Pill>}
+                    {c.name !== c.container && (
+                      <span className="ui-muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono-stack)' }}>{c.container}</span>
+                    )}
+                  </>
+                }
+                summary={
+                  current ? (
+                    <>
+                      <Figure label="CPU" value={formatSharePercent(current.cpu_percent)} />
+                      <Figure label="Memory" value={formatMb(current.mem_mb)} />
+                      <Figure label="Storage" value={formatMb(c.storage.total_mb)} />
+                      <Figure label="PIDs" value={current.pids ?? '—'} />
+                    </>
+                  ) : (
+                    <Figure label="Storage" value={formatMb(c.storage.total_mb)} />
+                  )
+                }
+                detail={parts.filter(Boolean).join(' · ')}
+              >
+                <AgentCharts container={c.container} range={range} span={span} formatTime={formatTime} />
+              </Accordion>
+            );
+          })}
+
+          {data.rest && containers.length > 0 && (
+            <Surface>
+              <div className="ui-key-value" style={{ fontSize: 12 }}>
+                <span>Everything else <span className="ui-muted">· the host, Rev4a and other software</span></span>
+                <span>
+                  <Figure label="CPU" value={formatSharePercent(data.rest.cpu_percent)} />
+                  {'  '}
+                  <Figure label="Memory" value={formatMb(data.rest.mem_mb)} />
+                </span>
+              </div>
+            </Surface>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

package/app/system/PageClient.tsx

@@ -3,7 +3,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { apiFetch } from '@/lib/apiFetch';
 import { useRev4aTimezone } from '@/lib/hooks/useRev4aTimezone';
+import { formatMb } from '@/lib/utils/format';
 import { Meter, meterLevel, Page, PageHeader, Pill, Surface, Tabs, TimeSeriesChart } from '../components/ui';
+import { AgentsSection } from './AgentsSection';
+import { RecentAlerts } from './RecentAlerts';
 import { SystemCardsSkeleton, SystemChartsSkeleton, SystemDescription } from './SystemSkeleton';
 
 type Range = '1h' | '24h' | '7d' | '30d';
@@ -52,13 +55,6 @@ interface MetricsPayload {
 
 const ROLE_LABEL: Record<string, string> = { root: 'system', docker: 'Docker data', data: 'Rev4a data' };
 
-function formatMb(mb: number | null | undefined): string {
-  if (mb === null || mb === undefined) return '—';
-  if (mb >= 1024 * 1024) return `${(mb / 1024 / 1024).toFixed(2)} TB`;
-  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`;
-  return `${mb} MB`;
-}
-
 function formatUptime(s: number): string {
   const d = Math.floor(s / 86_400);
   const h = Math.floor((s % 86_400) / 3600);
@@ -258,6 +254,10 @@ export default function SystemPageClient() {
         ))}
       </div>
       )}
+
+      <AgentsSection range={range} span={span} formatTime={formatTime} />
+
+      <RecentAlerts timeZone={timeZone} />
     </Page>
   );
 }

package/app/system/RecentAlerts.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { apiFetch } from '@/lib/apiFetch';
+import { Pill, Surface } from '../components/ui';
+import type { Tone } from '../components/ui/tokens';
+
+const POLL_MS = 60_000;
+const LIMIT = 10;
+
+interface Alert { ts: number; metric: string | null; message: string }
+
+/** A disk at its limit is the one that does not clear by itself. Only its own keys, never the prototype's. */
+const TONE: Record<string, Tone> = { disk: 'danger', cpu: 'warning', ram: 'warning' };
+const toneOf = (metric: string): Tone => (Object.hasOwn(TONE, metric) ? TONE[metric] : 'neutral');
+
+/**
+ * The machine's latest alarms — CPU or memory over their threshold on two samples in a row,
+ * a disk at 90 % — which the daemon has always recorded and no page showed, so the red bar
+ * on a card never said *what* had crossed or *when*. From `GET /api/metrics/alerts`.
+ */
+export function RecentAlerts({ timeZone }: { timeZone: string }) {
+  const [alerts, setAlerts] = useState<Alert[] | null>(null);
+  const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    const load = async () => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const res = await apiFetch(`/api/metrics/alerts?limit=${LIMIT}`, { signal: controller.signal });
+        const body = await res.json();
+        if (!res.ok) throw new Error(body?.error || `Error ${res.status}`);
+        setAlerts(body.alerts as Alert[]);
+        setError('');
+      } catch (e: any) {
+        if (e?.name !== 'AbortError') setError(e?.message || 'Could not load the alerts');
+      }
+    };
+    load();
+    const timer = setInterval(load, POLL_MS);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, []);
+
+  const format = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12: false, timeZone });
+
+  return (
+    <Surface as="section">
+      <div className="ui-kicker">Recent alerts</div>
+      <p className="ui-muted" style={{ fontSize: 11, marginTop: 6 }}>
+        CPU above 85 % or memory above 90 % on two samples in a row; a disk at 90 %. The latest {LIMIT}.
+      </p>
+      <div style={{ marginTop: 10 }}>
+        {error && <span style={{ color: 'var(--red)', fontSize: 12 }}>{error}</span>}
+        {!error && alerts === null && <span className="ui-muted" style={{ fontSize: 12 }}>Loading…</span>}
+        {alerts !== null && alerts.length === 0 && <span className="ui-muted" style={{ fontSize: 12 }}>No alert recorded.</span>}
+        {alerts?.map((a) => (
+          <div className="system-alert" key={`${a.ts}-${a.message}`}>
+            <span className="ui-muted">{format.format(new Date(a.ts))}</span>
+            <span>{a.metric ? <Pill tone={toneOf(a.metric)}>{a.metric}</Pill> : null}</span>
+            <span>{a.message}</span>
+          </div>
+        ))}
+      </div>
+    </Surface>
+  );
+}

package/app/system/SystemSkeleton.tsx

@@ -16,7 +16,7 @@ import { Surface } from '../components/ui';
 export function SystemDescription({ host }: { host: string | null }) {
   return (
     <>
-      CPU, memory and storage of the machine Rev4a runs on.
+      CPU, memory and storage of the machine Rev4a runs on, and of each container.
       {/* width 0 + min-width 100%: the line takes the header's width without adding its own
           (unwrapped) width to the header's minimum — else a long hostname widens the page. */}
       <span style={{ display: 'block', width: 0, minWidth: '100%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
@@ -113,3 +113,55 @@ export function SystemRangeSkeleton() {
     </div>
   );
 }
+
+/** The section heading, shared by the real Agents section and its placeholder, so nothing moves when it loads. */
+export function SystemAgentsHeading() {
+  return (
+    <div className="system-section-heading">
+      <div className="ui-eyebrow">Agents and containers</div>
+      <p className="ui-muted" style={{ fontSize: 12 }}>
+        Sorted by CPU now. Averages and peaks follow the range above; open one for its charts.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * The Agents section before its first answer: the Docker storage block and three closed
+ * accordions, each shimmer inside the class of the text it stands in for (the real header
+ * classes, a `div` where the real one is a button), so the boxes have the real heights.
+ */
+export function SystemAgentsSkeleton() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }} aria-busy="true" aria-label="Loading containers">
+      <Surface as="section">
+        <div className="ui-kicker"><Skeleton as="span" inline width={96} height={10} /></div>
+        <div className="system-docker-storage" style={{ marginTop: 10 }}>
+          {[0, 1, 2, 3].map((i) => (
+            <div key={i}>
+              <div className="ui-kicker"><Skeleton as="span" inline width={64} height={10} /></div>
+              <div style={{ fontSize: 16, marginTop: 6 }}><Skeleton as="span" inline width={72} height={16} /></div>
+              <div className="ui-muted" style={{ fontSize: 11, marginTop: 4 }}><Skeleton as="span" inline width={120} height={10} /></div>
+            </div>
+          ))}
+        </div>
+        <p className="ui-muted" style={{ fontSize: 11, marginTop: 10 }}><Skeleton as="span" inline width={150} height={10} /></p>
+      </Surface>
+      {[0, 1, 2].map((i) => (
+        <section className="ui-accordion" key={i}>
+          <div className="ui-accordion__header" style={{ cursor: 'default' }}>
+            <span className="ui-accordion__caret" aria-hidden="true">▶</span>
+            <span className="ui-accordion__title"><Skeleton as="span" inline width={110 + i * 20} height={13} /></span>
+            <span className="ui-accordion__summary">
+              <Skeleton as="span" inline width={62} height={12} />
+              <Skeleton as="span" inline width={88} height={12} />
+              <Skeleton as="span" inline width={80} height={12} />
+              <Skeleton as="span" inline width={52} height={12} />
+            </span>
+            <span className="ui-accordion__detail"><Skeleton as="span" inline width={300} height={11} /></span>
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

package/app/system/loading.tsx

@@ -1,5 +1,5 @@
 import { Page, PageHeader } from '../components/ui';
-import { SystemCardsSkeleton, SystemChartsSkeleton, SystemDescription, SystemRangeSkeleton } from './SystemSkeleton';
+import { SystemAgentsHeading, SystemAgentsSkeleton, SystemCardsSkeleton, SystemChartsSkeleton, SystemDescription, SystemRangeSkeleton } from './SystemSkeleton';
 
 export default function SystemLoading() {
   return (
@@ -8,6 +8,10 @@ export default function SystemLoading() {
       <SystemCardsSkeleton />
       <SystemRangeSkeleton />
       <SystemChartsSkeleton />
+      <section style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <SystemAgentsHeading />
+        <SystemAgentsSkeleton />
+      </section>
     </Page>
   );
 }