@flame0510/project-aether 1.10.0 → 1.11.0

package/README.md

@@ -19,7 +19,7 @@
 - **Workspace browser** — Browse and edit agent files live from the dashboard
 - **Provider proxy** — OpenAI-compatible chat completions proxy that routes through a shared key vault
 - **System health** — runtime sessions, daemon heartbeat and errors, cron jobs and what the agents spent today, with recommendations
-- **System** — the host machine's CPU, memory, swap and storage, now and over 1h / 24h / 7d / 30d (sampled every 30 s, kept 30 days)
+- **System** — the host machine's CPU, memory, swap and storage, now and over 1h / 24h / 7d / 30d (sampled every 30 s, kept 30 days); what each agent and container consumes (CPU, memory, storage, processes — charts per container) and what Docker holds on disk; the machine's recent alerts
 - **Costs** — what each agent spent, priced by its own OpenClaw with the prices Rev4a syncs (cache rates included, DeepSeek off-peak applied): by day, agent, model and session, with the calls that could not be priced
 - **PWA-ready** — Install on phone for mobile monitoring
 

package/app/agents/CostSection.tsx

@@ -8,6 +8,7 @@ import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
 import { apiFetch } from '@/lib/apiFetch';
 import { formatCost } from '@/lib/utils/format';
+import { PanelRow } from './PanelRow';
 
 interface AgentCosts {
   available: boolean;
@@ -31,8 +32,6 @@ function formatAge(ms: number): string {
   return h < 48 ? `${h} h ago` : `${Math.round(h / 24)} d ago`;
 }
 
-const ROW = { display: 'flex', justifyContent: 'space-between', padding: '7px 14px', borderBottom: '1px solid var(--border)', fontSize: 12 } as const;
-
 export default function CostSection({ container }: { container: string }) {
   const [data, setData] = useState<AgentCosts | null>(null);
   const [error, setError] = useState('');
@@ -81,12 +80,7 @@ export default function CostSection({ container }: { container: string }) {
 
   return (
     <div>
-      {rows.map(([label, value]) => (
-        <div key={label} style={ROW}>
-          <span style={{ color: '#888' }}>{label}</span>
-          <span style={{ color: 'var(--text)', textAlign: 'right', maxWidth: '60%', wordBreak: 'break-word' }}>{value}</span>
-        </div>
-      ))}
+      {rows.map(([label, value]) => <PanelRow key={label} label={label} value={value} />)}
       {(stale || data.error) && (
         <div style={{ padding: '8px 14px', fontSize: 11, color: 'var(--yellow)', borderBottom: '1px solid var(--border)' }}>
           {data.error ?? 'Not read recently: a stopped agent keeps the figures of its last read.'}

package/app/agents/PageClient.tsx

@@ -9,6 +9,7 @@ import ImageDownloadBanner from './ImageDownloadBanner';
 import ChannelManager from './ChannelManager';
 import ModelSection from './ModelSection';
 import CostSection from './CostSection';
+import ResourceSection from './ResourceSection';
 import BrowserAccessSection, { OpenControlUiButton } from './BrowserAccessSection';
 import UpdateSection from './UpdateSection';
 import { validatePortInput } from '@/lib/agent-ports';
@@ -1201,6 +1202,12 @@ function DetailPanel({ agent, busy, onDeleted, onChanged, onModelSaved, onAccess
         <CostSection container={agent.name} />
       </div>
 
+      {/* Resources - what this agent's container consumes (history on the System page) */}
+      <div style={{ border: '1px solid var(--border)', borderRadius: 0, background: 'var(--bg)', overflow: 'hidden' }}>
+        <SectionHeader icon={<BracesIcon size={12} />} label="RESOURCES" />
+        <ResourceSection container={agent.name} />
+      </div>
+
       {/* Config - View openclaw.json */}
       <div style={{ border: '1px solid var(--border)', borderRadius: 0, background: 'var(--bg)', overflow: 'hidden' }}>
         <SectionHeader icon={<BracesIcon size={12} />} label="CONFIG" />

package/app/agents/PanelRow.tsx

@@ -0,0 +1,9 @@
+/** One label/value row of an agent-panel section (COSTS and RESOURCES): the label dim on the left, the value right. */
+export function PanelRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 14px', borderBottom: '1px solid var(--border)', fontSize: 12 }}>
+      <span style={{ color: '#888' }}>{label}</span>
+      <span style={{ color: 'var(--text)', textAlign: 'right', maxWidth: '60%', wordBreak: 'break-word' }}>{value}</span>
+    </div>
+  );
+}

package/app/agents/ResourceSection.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+/**
+ * Resources section of the agent detail panel: what this agent's container consumes now and
+ * over the last 24 h (GET /api/metrics/containers, from metrics.db). The history charts are
+ * on the System page — one place, linked from here.
+ */
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { apiFetch } from '@/lib/apiFetch';
+import { formatMb, formatRate, formatSharePercent } from '@/lib/utils/format';
+import { PanelRow } from './PanelRow';
+
+interface Overview {
+  available: boolean;
+  interval_s: number;
+  age_s?: number | null;
+  containers?: {
+    container: string;
+    running: boolean;
+    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 } | 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 };
+  }[];
+}
+
+const note = (text: string) => <div style={{ padding: '12px 14px', fontSize: 12, color: '#888' }}>{text}</div>;
+
+export default function ResourceSection({ container }: { container: string }) {
+  const [data, setData] = useState<Overview | 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?range=24h', { signal: controller.signal });
+        const body = await res.json();
+        if (!res.ok) throw new Error(body?.error || `Error ${res.status}`);
+        setData(body as Overview);
+        setError('');
+      } catch (e: any) {
+        if (e?.name !== 'AbortError') setError(e?.message || 'Could not load the resources');
+      }
+    };
+    setData(null);
+    setError('');
+    load();
+    const timer = setInterval(load, 60_000);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, [container]);
+
+  if (error && !data) return <div style={{ padding: '12px 14px', fontSize: 12, color: 'var(--red)' }}>{error}</div>;
+  if (!data) return note('Loading…');
+  if (!data.available) return note(`No samples yet: the Rev4a daemon samples the containers every ${data.interval_s} s.`);
+
+  const row = data.containers?.find((c) => c.container === container);
+  if (!row) return note('Not sampled in the last 24 h: the agent was not running.');
+  // The same three-intervals rule as the System page: a daemon that stopped must not present
+  // hours-old figures as "now".
+  const stale = data.age_s != null && data.age_s > data.interval_s * 3;
+  const r = row.range;
+  const n = row.now;
+
+  return (
+    <div>
+      {error && (
+        <div style={{ padding: '8px 14px', fontSize: 11, color: 'var(--yellow)', borderBottom: '1px solid var(--border)' }}>
+          Could not refresh ({error}): showing the last answer.
+        </div>
+      )}
+      {stale ? (
+        <div style={{ padding: '8px 14px', fontSize: 11, color: 'var(--yellow)', borderBottom: '1px solid var(--border)' }}>
+          Not collecting: the latest sample is {Math.round((data.age_s ?? 0) / 60)} min old. Check that the Rev4a daemon is running; the figures below are from when it last answered.
+        </div>
+      ) : row.running && n ? (
+        <>
+          <PanelRow label="CPU now" value={`${formatSharePercent(n.cpu_percent)} of Docker's cores${n.cpu_cores !== null ? ` · ${n.cpu_cores.toFixed(3)} cores` : ''}`} />
+          <PanelRow label="Memory now" value={`${formatMb(n.mem_mb)}${n.mem_percent !== null ? ` · ${n.mem_percent}% of Docker's memory` : ''}`} />
+          <PanelRow label="Processes" value={String(n.pids ?? '—')} />
+          <PanelRow label="Network" value={`↓ ${formatRate(n.net_rx_bps)} ↑ ${formatRate(n.net_tx_bps)}`} />
+        </>
+      ) : (
+        <div style={{ padding: '8px 14px', fontSize: 11, color: 'var(--yellow)', borderBottom: '1px solid var(--border)' }}>
+          Stopped: the figures below are from when it last ran.
+        </div>
+      )}
+      <PanelRow label="CPU · last 24 h" value={`avg ${formatSharePercent(r.cpu_avg_percent)} · peak ${formatSharePercent(r.cpu_max_percent)}`} />
+      <PanelRow label="Memory · last 24 h" value={`avg ${formatMb(r.mem_avg_mb)} · peak ${formatMb(r.mem_max_mb)}`} />
+      <PanelRow
+        label="Storage"
+        value={`${formatMb(row.storage.total_mb)}${row.storage.volume_mb !== null ? ` · volume ${formatMb(row.storage.volume_mb)}` : ''}${row.storage.layer_mb !== null ? ` · layer ${formatMb(row.storage.layer_mb)}` : ''}`}
+      />
+      <div style={{ padding: '8px 14px', fontSize: 11 }}>
+        <Link href={`/system?agent=${encodeURIComponent(container)}`} className="ui-link">Charts on the System page →</Link>
+      </div>
+    </div>
+  );
+}

package/app/api/assistant/route.ts

@@ -56,12 +56,12 @@ const PAGE_CONTEXT: Record<string, PageContext> = {
     title: 'System',
     description: 'The machine Rev4a runs on: CPU (percent, cores, load average 1/5/15 min), memory (used, available, swap) and storage (each disk with used and free space, and whether it is the system disk, Docker\'s data or Rev4a\'s data), now and over 1h, 24h, 7d or 30d. Sampled by the Rev4a daemon every 30 seconds, kept 30 days.',
     actions: ['Read the current CPU, memory, swap and disk usage', 'Switch the charts between 1h, 24h, 7d and 30d', 'Hover a chart (or focus it and use the arrow keys) to read the average and peak at a point', 'Open a chart\'s Table view for the numbers'],
-    hints: 'Bars turn yellow then red past their thresholds: CPU and memory at 85% and 95%, disks at 80% and 90%. If the page says "Not collecting", the Rev4a daemon is not sampling: check that rev4a serve is running.',
+    hints: 'Below the charts, "Agents and containers" shows what Docker holds on disk and one row per container (sorted by CPU) with its CPU share, memory, storage and processes; open a row for its own CPU, Memory and Storage charts, which follow the same range. "Recent alerts" lists what crossed its limit and when. Bars turn yellow then red past their thresholds: CPU and memory at 85% and 95%, disks at 80% and 90%. If the page says "Not collecting", the Rev4a daemon is not sampling: check that rev4a serve is running.',
   },
   '/containers': {
     title: 'Containers',
     description: 'List of all Docker containers on the server, running or stopped (not just agents). Shows container ID, name, image, status, state, ports, and IP address.',
-    actions: ['View every container, running or stopped, with its details', 'Click "Terminal" on any container to open an interactive shell', 'Check each container\'s status, image, IP and ports (no CPU or memory figures are shown)'],
+    actions: ['View every container, running or stopped, with its details', 'Click "Terminal" on any container to open an interactive shell', 'Check each container\'s status, image, IP and ports, and what a running one consumes now (CPU share, memory, processes), with a link to its charts on the System page'],
     hints: 'Containers marked with an agentId belong to OpenClaw agents. Others are infrastructure containers like databases or reverse proxies.',
   },
   '/containers/terminal/[id]': {

package/app/api/containers/route.ts

@@ -2,6 +2,7 @@ import { type NextRequest } from "next/server";
 import { NextResponse } from 'next/server';
 import { requireAuthJWT } from '@/lib/rev4a-auth';
 import { dockerAvailable, dockerFetch } from '@/lib/docker-socket';
+import { primaryName } from '@/lib/docker-stats';
 
 export const dynamic = 'force-dynamic';
 
@@ -22,7 +23,9 @@ export async function GET(request: NextRequest) {
         const ip = Object.values(networks)[0]?.IPAddress || null;
         return {
           id: c.Id?.slice(0, 12),
-          name: (c.Names?.[0] || '').replace(/^\//, ''),
+          // The daemon's rule (the name with one leading slash), so the usage row and the
+          // /system?agent= link key on the same name the metrics store uses.
+          name: primaryName(c?.Names),
           image: c.Image,
           status: c.Status,
           state: c.State,
@@ -33,7 +36,20 @@ export async function GET(request: NextRequest) {
           created: c.Labels?.created || null,
         };
       } catch {
-        return { id: c.Id?.slice(0, 12), name: (c.Names?.[0] || '').replace(/^\//, ''), status: c.Status, error: 'inspect failed' };
+        // Identity comes from the list: a failed inspect must neither drop the container nor
+        // give it a name the metrics store does not key on. Only the inspect-only fields are lost.
+        return {
+          id: c.Id?.slice(0, 12),
+          name: primaryName(c?.Names),
+          image: c.Image,
+          status: c.Status,
+          state: c.State,
+          ports: c.Ports?.map((p: any) => `${p.PublicPort || '?'}:${p.PrivatePort || '?'}`).join(', ') || '',
+          ip: null,
+          agentId: c.Labels?.AGENT_ID || null,
+          displayName: null,
+          created: c.Labels?.created || null,
+        };
       }
     }));
 

package/app/api/costs/agent/route.ts

@@ -1,12 +1,11 @@
 import { NextResponse, type NextRequest } from 'next/server';
 import { openCostsDb } from '@/lib/costs-db';
 import { COLLECT_INTERVAL_S, lastDays, readCostSummary } from '@/lib/agent-costs';
+import { CONTAINER_NAME_RE } from '@/lib/docker-stats';
 import { requireAuthJWT } from '@/lib/rev4a-auth';
 
 export const dynamic = 'force-dynamic';
 
-const CONTAINER_RE = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/;
-
 /**
  * GET /api/costs/agent?container=<name> — one agent's spend for its panel: today, the
  * last 7 and 30 UTC days, its top model and unpriced calls over 30 days, and when it
@@ -17,7 +16,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
   if (denied) return denied as NextResponse;
 
   const container = request.nextUrl.searchParams.get('container') ?? '';
-  if (!CONTAINER_RE.test(container)) return NextResponse.json({ error: 'Invalid container name' }, { status: 400 });
+  if (!CONTAINER_NAME_RE.test(container)) return NextResponse.json({ error: 'Invalid container name' }, { status: 400 });
 
   let db;
   try {

package/app/api/metrics/alerts/route.ts

@@ -0,0 +1,47 @@
+import { NextResponse, type NextRequest } from 'next/server';
+import { openDb } from '@/lib/db';
+import { requireAuthJWT } from '@/lib/rev4a-auth';
+
+export const dynamic = 'force-dynamic';
+
+const DEFAULT_LIMIT = 10;
+const MAX_LIMIT = 50;
+
+interface AnomalyData { metric?: unknown; message?: unknown; threshold?: unknown; values?: unknown }
+
+/**
+ * GET /api/metrics/alerts?limit=10 — the machine's latest `system_anomaly` events (CPU, RAM
+ * or a disk over its threshold, written by daemon.js into events.db), newest first. Nothing
+ * else in `events`: the generic /api/events has no type filter.
+ */
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  const denied = await requireAuthJWT(request);
+  if (denied) return denied as NextResponse;
+
+  const parsed = Number.parseInt(request.nextUrl.searchParams.get('limit') ?? String(DEFAULT_LIMIT), 10);
+  const limit = Number.isFinite(parsed) ? Math.min(Math.max(parsed, 1), MAX_LIMIT) : DEFAULT_LIMIT;
+  try {
+    const db = openDb();
+    try {
+      const rows = db
+        .prepare("SELECT ts, data FROM events WHERE type = 'system_anomaly' ORDER BY ts DESC LIMIT ?")
+        .all(limit) as { ts: number; data: string | null }[];
+      const alerts = rows.map((row) => {
+        let data: AnomalyData = {};
+        try { data = JSON.parse(row.data ?? '{}') as AnomalyData; } catch { /* keep the bare event */ }
+        return {
+          ts: row.ts,
+          metric: typeof data.metric === 'string' ? data.metric : null,
+          message: typeof data.message === 'string' ? data.message : 'Machine anomaly',
+          threshold: typeof data.threshold === 'number' ? data.threshold : null,
+          values: Array.isArray(data.values) ? data.values.filter((v): v is number => typeof v === 'number') : [],
+        };
+      });
+      return NextResponse.json({ alerts });
+    } finally {
+      db.close();
+    }
+  } catch (e: unknown) {
+    return NextResponse.json({ error: (e as Error).message }, { status: 500 });
+  }
+}

package/app/api/metrics/containers/route.ts

@@ -0,0 +1,54 @@
+import os from 'os';
+import { NextResponse, type NextRequest } from 'next/server';
+import { METRIC_RANGES, openMetricsDb, type MetricRange } from '@/lib/metrics-db';
+import { CONTAINER_INTERVAL_S, containerTablesReady, readContainerHistory, readContainerOverview } from '@/lib/container-metrics';
+import { CONTAINER_NAME_RE } from '@/lib/docker-stats';
+import { requireAuthJWT } from '@/lib/rev4a-auth';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * GET /api/metrics/containers?range=1h|24h|7d|30d — what every container consumes (CPU,
+ * memory, processes, network, disk), now and as an average and peak over the range, plus
+ * what is not a container and the disk Docker holds.
+ *
+ * With `&container=<name>`: that container's history, bucketed like `GET /api/metrics`, for
+ * the charts of its accordion on the System page.
+ *
+ * Read from metrics.db (daemon.js samples every 60 s). `available: false` until the daemon
+ * has created the tables.
+ */
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  const denied = await requireAuthJWT(request);
+  if (denied) return denied as NextResponse;
+
+  const params = request.nextUrl.searchParams;
+  const param = params.get('range') ?? '1h';
+  if (!Object.hasOwn(METRIC_RANGES, param)) {
+    return NextResponse.json({ error: `range must be one of ${Object.keys(METRIC_RANGES).join(', ')}` }, { status: 400 });
+  }
+  const range = param as MetricRange;
+  const span = METRIC_RANGES[range];
+  const container = params.get('container');
+  if (container !== null && !CONTAINER_NAME_RE.test(container)) {
+    return NextResponse.json({ error: 'Invalid container name' }, { status: 400 });
+  }
+  const base = { interval_s: CONTAINER_INTERVAL_S, range };
+
+  try {
+    const db = openMetricsDb();
+    if (!db) return NextResponse.json({ ...base, available: false });
+    try {
+      if (!containerTablesReady(db)) return NextResponse.json({ ...base, available: false });
+      return NextResponse.json({
+        ...base,
+        available: true,
+        ...(container ? readContainerHistory(db, container, span) : readContainerOverview(db, span, undefined, os.cpus().length)),
+      });
+    } finally {
+      db.close();
+    }
+  } catch (e: unknown) {
+    return NextResponse.json({ error: (e as Error).message }, { status: 500 });
+  }
+}

package/app/api/metrics/route.ts

@@ -1,6 +1,6 @@
 import os from 'os';
 import { NextResponse, type NextRequest } from 'next/server';
-import { openMetricsDb } from '@/lib/metrics-db';
+import { METRIC_RANGES as RANGES, openMetricsDb, type MetricRange as Range } from '@/lib/metrics-db';
 import { requireAuthJWT } from '@/lib/rev4a-auth';
 
 export const dynamic = 'force-dynamic';
@@ -9,12 +9,10 @@ export const dynamic = 'force-dynamic';
 const SAMPLE_INTERVAL_S = 30;
 
 /**
- * History ranges and their span in seconds; each is cut into about POINTS buckets, never
- * shorter than two samples — a 30 s bucket on a 30 s timer that drifts a second would
- * leave empty buckets, drawn as gaps, where no sample is missing.
+ * History ranges are in lib/metrics-db.ts; each is cut into about POINTS buckets, never
+ * shorter than two samples — a 30 s bucket on a 30 s timer that drifts a second would leave
+ * empty buckets, drawn as gaps, where no sample is missing.
  */
-const RANGES = { '1h': 3600, '24h': 86_400, '7d': 7 * 86_400, '30d': 30 * 86_400 } as const;
-type Range = keyof typeof RANGES;
 const POINTS = 120;
 
 interface LatestRow {

package/app/components/ui/Accordion.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useId, type ReactNode } from 'react';
+
+interface AccordionProps {
+  /** What the header says first: a name and its pills. */
+  title: ReactNode;
+  /** The figures kept in the header whether it is open or closed. */
+  summary?: ReactNode;
+  /** A second, muted line under the header. */
+  detail?: ReactNode;
+  open: boolean;
+  onToggle: () => void;
+  /** DOM id of the whole accordion, for a link to land on it. */
+  id?: string;
+  /** The body, mounted only while open — a chart inside fetches nothing while closed. */
+  children: ReactNode;
+}
+
+/**
+ * A row that opens to show more: the header is a real `<button>` carrying the title, the
+ * summary figures and an optional detail line, so the answer to "what is this now" is on
+ * screen closed; the body holds what takes more room (charts). Controlled: the parent owns
+ * `open`, which lets a link or a fetch follow it. Square, flat, tokens only.
+ */
+export function Accordion({ title, summary, detail, open, onToggle, id, children }: AccordionProps) {
+  const bodyId = `${useId().replace(/:/g, '')}-body`;
+  return (
+    <section className={`ui-accordion${open ? ' ui-accordion--open' : ''}`} id={id}>
+      <button
+        type="button"
+        className="ui-accordion__header"
+        aria-expanded={open}
+        aria-controls={open ? bodyId : undefined}
+        onClick={onToggle}
+      >
+        <span className="ui-accordion__caret" aria-hidden="true">▶</span>
+        <span className="ui-accordion__title">{title}</span>
+        {summary !== undefined && <span className="ui-accordion__summary">{summary}</span>}
+        {detail !== undefined && <span className="ui-accordion__detail">{detail}</span>}
+      </button>
+      {open && <div className="ui-accordion__body" id={bodyId}>{children}</div>}
+    </section>
+  );
+}

package/app/components/ui/TimeSeriesChart.tsx

@@ -20,7 +20,12 @@ interface TimeSeriesChartProps {
   to: number;
   /** Seconds per point; two points further apart than 1.5 buckets are not joined. */
   bucket: number;
-  yMax?: number;
+  /**
+   * The top of the y axis. A number fixes it (100 for a percentage); `'auto'` takes a rounded
+   * ceiling just above the highest value or peak plotted — for a series that is a small
+   * fraction of its natural scale, like one agent's share of the machine.
+   */
+  yMax?: number | 'auto';
   unit?: string;
   /** Formats a value (grid labels, end label, tooltip, table) instead of `<rounded><unit>` — e.g. dollars. */
   formatValue?: (v: number) => string;
@@ -30,6 +35,17 @@ interface TimeSeriesChartProps {
   formatTime: (ts: number) => string;
 }
 
+/** A rounded ceiling (1, 2 or 5 times a power of ten) just above the highest value or peak. */
+function autoYMax(points: TimeSeriesPoint[]): number {
+  let top = 0;
+  for (const p of points) top = Math.max(top, p.value ?? 0, p.peak ?? 0);
+  if (!(top > 0)) return 1;
+  const target = top * 1.1;
+  const base = 10 ** Math.floor(Math.log10(target));
+  const m = target / base;
+  return (m <= 1 ? 1 : m <= 2 ? 2 : m <= 5 ? 5 : 10) * base;
+}
+
 const PAD = { top: 12, right: 44, bottom: 22, left: 34 };
 /** Width of one character of the 10 px monospace labels, for sizing the margins. */
 const CHAR_W = 6.2;
@@ -46,7 +62,7 @@ export function TimeSeriesChart({
   from,
   to,
   bucket,
-  yMax = 100,
+  yMax: yMaxProp = 100,
   unit = '%',
   formatValue,
   height = 160,
@@ -66,6 +82,8 @@ export function TimeSeriesChart({
     return () => ro.disconnect();
   }, []);
 
+  const yMax = yMaxProp === 'auto' ? autoYMax(points) : yMaxProp;
+
   // With a custom format (`$0.0054`) the margins grow to fit the labels instead of cutting
   // them; percentage charts keep the fixed margins.
   const valueText = (v: number) => (formatValue ? formatValue(v) : `${Math.round(v * 10) / 10}${unit}`);

package/app/components/ui/index.ts

@@ -1,3 +1,4 @@
+export * from './Accordion';
 export * from './ConfirmModal';
 export * from './Badge';
 export * from './Button';

package/app/containers/ContainersClient.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
+import { formatMb, formatSharePercent } from '@/lib/utils/format';
 import { Button, Pill } from '../components/ui';
 
 interface ContainerInfo {
@@ -16,17 +17,40 @@ interface ContainerInfo {
   displayName?: string | null;
 }
 
+/** What a running container consumes now, from GET /api/metrics/containers; absent when the daemon has not sampled it. */
+interface Usage { cpu: number | null; mem: number | null; pids: number | null }
+
 export default function ContainersClient() {
   const [containers, setContainers] = useState<ContainerInfo[]>([]);
+  const [usage, setUsage] = useState<Record<string, Usage>>({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
 
   async function load(signal?: AbortSignal) {
     try {
-      const res = await fetch('/api/containers', { signal });
+      const [res, usageRes] = await Promise.all([
+        fetch('/api/containers', { signal }),
+        // The figures are a bonus: a daemon that has not sampled yet must not break the list.
+        fetch('/api/metrics/containers?range=1h', { signal }).catch(() => null),
+      ]);
       if (!res.ok) throw new Error(`Error ${res.status}`);
       const data = await res.json();
       if (!signal?.aborted) setContainers(Array.isArray(data) ? data : []);
+      // The figures are shown only while they are current: a failed request, tables not created
+      // yet, or a daemon that stopped sampling (newest sample older than three intervals) clears
+      // them — a live container must not keep its last CPU as if it were now.
+      const u = usageRes?.ok ? await usageRes.json().catch(() => null) : null;
+      if (!signal?.aborted) {
+        const current = u?.available && typeof u.age_s === 'number' && u.age_s <= u.interval_s * 3;
+        const next: Record<string, Usage> = {};
+        if (current) {
+          for (const row of u.containers ?? []) {
+            if (row.running && row.now) next[row.container] = { cpu: row.now.cpu_percent, mem: row.now.mem_mb, pids: row.now.pids };
+          }
+        }
+        setUsage(next);
+      }
     } catch(e: any) {
       if (e?.name === 'AbortError') return;
       if (!signal?.aborted) setError(e.message);
@@ -35,11 +59,19 @@ export default function ContainersClient() {
     }
   }
 
-  useEffect(() => {
+  // One request at a time: a manual refresh or a new poll aborts the request before it, so a
+  // slow answer can never overwrite a newer one.
+  function refresh() {
+    abortRef.current?.abort();
     const controller = new AbortController();
+    abortRef.current = controller;
     load(controller.signal);
-    const i = setInterval(() => { if (!controller.signal.aborted) load(controller.signal); }, 15000);
-    return () => { controller.abort(); clearInterval(i); };
+  }
+
+  useEffect(() => {
+    refresh();
+    const i = setInterval(refresh, 15000);
+    return () => { abortRef.current?.abort(); clearInterval(i); };
   }, []);
 
   return (
@@ -51,7 +83,7 @@ export default function ContainersClient() {
           <span style={{ fontSize: 12, color: 'var(--text-dim)' }}>
             {containers.length} container · <span style={{ fontFamily: 'var(--font-mono-stack)', fontSize: 11 }}>{new Date().toLocaleTimeString('it-IT')}</span>
           </span>
-          <Button variant="ghost" size="sm" onClick={() => load()}>↻</Button>
+          <Button variant="ghost" size="sm" onClick={refresh} aria-label="Refresh containers">↻</Button>
         </div>
       </div>
 
@@ -113,6 +145,16 @@ export default function ContainersClient() {
               {c.ports && <span style={{ fontFamily: 'var(--font-mono-stack)', color: '#888' }}>{c.ports}</span>}
             </div>
 
+            {/* What it consumes now — running containers the daemon has sampled */}
+            {c.state === 'running' && usage[c.name] && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono-stack)' }}>
+                <span>CPU {formatSharePercent(usage[c.name].cpu)}</span>
+                <span>Memory {formatMb(usage[c.name].mem)}</span>
+                <span>PIDs {usage[c.name].pids ?? '—'}</span>
+                <Link href={`/system?agent=${encodeURIComponent(c.name)}`} className="ui-link">Charts →</Link>
+              </div>
+            )}
+
             {/* Agent badge — only for Rev4a-managed agents */}
             {(c.displayName || c.agentId) && (
               <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>

package/app/globals.css

@@ -677,6 +677,42 @@ html, body { height: 100%; height: 100dvh; background: var(--bg); color: var(--t
 .terminal-page__screen { flex: 1; min-height: 0; padding: 8px 0 0 12px; overflow: hidden; }
 .terminal-page__screen .xterm { height: 100%; }
 
+/* Accordion: a header button carrying title, summary figures and a detail line; the body opens under it. */
+.ui-accordion { border: 1px solid var(--border); background: var(--bg2); border-radius: 0; }
+.ui-accordion__header {
+  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center;
+  width: 100%; box-sizing: border-box; padding: 12px 16px; background: none; border: 0; border-radius: 0;
+  color: var(--text); font: inherit; text-align: left; cursor: pointer;
+}
+.ui-accordion__header:hover { background: rgba(255, 255, 255, 0.02); }
+.ui-accordion__header:focus-visible { outline: 1px solid var(--violet-dim); outline-offset: -1px; }
+.ui-accordion__caret { font-size: 10px; color: var(--text-dim); transition: transform 0.15s; }
+.ui-accordion--open .ui-accordion__caret { transform: rotate(90deg); }
+.ui-accordion__title { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
+.ui-accordion__summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; font-size: 12px; font-variant-numeric: tabular-nums; }
+.ui-accordion__detail { grid-column: 2 / -1; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
+.ui-accordion__body { border-top: 1px solid var(--border); padding: 16px; }
+@media (max-width: 640px) {
+  .ui-accordion__header { grid-template-columns: 14px minmax(0, 1fr); }
+  .ui-accordion__summary { grid-column: 2 / -1; justify-content: flex-start; }
+}
+
+/* The three machine charts (and a storage chart per extra disk) fill the grid: an odd last one spans both columns instead of leaving a hole. */
+.system-charts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
+/* A section of the page under the cards and charts: the accent eyebrow (the page header's own), set apart by a rule and room above, so it does not run into the panel before it. */
+.system-section-heading { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--border); }
+.system-section-heading .ui-eyebrow { margin-bottom: 6px; }
+.system-agent-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+@media (max-width: 1199px) {
+  .system-agent-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .system-agent-charts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
+}
+@media (max-width: 991px) { .system-agent-charts { grid-template-columns: minmax(0, 1fr); } }
+.system-docker-storage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
+@media (max-width: 640px) { .system-docker-storage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.system-alert { display: grid; grid-template-columns: 110px 64px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 12px; padding: 6px 0; border-top: 1px solid var(--border); }
+.system-alert:first-of-type { border-top: 0; }
+@media (max-width: 640px) { .system-alert { grid-template-columns: 1fr; gap: 2px; } }
 /* System page: three cards, then one chart per metric; one column below lg (992px). */
 .system-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
 .system-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }