@flame0510/project-aether 1.9.1 → 1.11.0

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/api/stats/route.ts

@@ -9,9 +9,8 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
   try {
     const db = openDb();
     const now = new Date();
-    const startOfMonth = Math.floor(
-      new Date(now.getFullYear(), now.getMonth(), 1).getTime() / 1000,
-    );
+    // sessions.started_at is in milliseconds (daemon.js).
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).getTime();
     const total = db
       .prepare(
         `SELECT COALESCE(SUM(cost_usd),0) as total, COALESCE(SUM(tokens_in),0) as total_in,

package/app/api/stats-since/route.ts

@@ -11,7 +11,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
     const db = openDb();
     const row = db
       .prepare('SELECT COALESCE(SUM(cost_usd),0) as total FROM sessions WHERE started_at >= ?')
-      .get(Math.floor(ts / 1000)) as { total: number } | undefined;
+      .get(ts) as { total: number } | undefined; // both in milliseconds
     db.close();
     return NextResponse.json({ total: row?.total ?? 0 });
   } catch (e: unknown) {

package/app/api/stream/route.ts

@@ -2,6 +2,7 @@ import { type NextRequest } from 'next/server';
 import { DB_PATH } from '@/lib/db';
 import Database from 'better-sqlite3';
 import { requireAuthJWT } from '@/lib/rev4a-auth';
+import { dashboardCosts } from '@/lib/agent-costs';
 
 export const dynamic = 'force-dynamic';
 
@@ -32,12 +33,9 @@ export async function GET(request: NextRequest): Promise<Response> {
                       LEFT JOIN lineage l ON s.session_id = l.child_id
                       ORDER BY s.started_at DESC LIMIT 100`)
             .all();
-          const costs = db
-            .prepare('SELECT SUM(cost_usd) AS today FROM sessions WHERE started_at >= ?')
-            .get(Math.floor(new Date().setHours(0, 0, 0, 0) / 1000)) as
-            | { today: number | null }
-            | undefined;
           db.close();
+          // What the agents' OpenClaw priced today (UTC day), like GET /api/costs.
+          const costs = dashboardCosts();
 
           if (newEvents.length > 0) {
             lastEventId = newEvents[newEvents.length - 1].id;

package/app/api/system-health/route.ts

@@ -2,13 +2,15 @@ import { NextResponse, type NextRequest } from 'next/server';
 import { openDb } from '@/lib/db';
 import { latestMetricSample } from '@/lib/metrics-db';
 import { maybeSendAlert } from '@/lib/alerts';
-import { summarizeBilling } from '@/lib/billing';
+import { dashboardCosts } from '@/lib/agent-costs';
 import { listOpenClawCronJobs } from '@/lib/openclaw-cron';
-import type { ModelCost } from '@/lib/types';
 import { requireAuthJWT } from '@/lib/rev4a-auth';
 
 export const dynamic = 'force-dynamic';
 
+/** A day above this (US dollars, UTC day) raises the cost check to a warning. */
+const HIGH_DAILY_SPEND_USD = 10;
+
 type Health = 'ok' | 'warning' | 'error';
 type Severity = 'info' | 'warning' | 'critical';
 
@@ -146,7 +148,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
       ? [columnExists(db, 'events', 'type') ? 'type' : null, columnExists(db, 'events', 'event') ? 'event' : null].filter(Boolean).join(", ''), COALESCE(")
       : '';
     const eventErrorCount = eventExpr
-      ? (db.prepare(`SELECT COUNT(*) AS total FROM events WHERE LOWER(COALESCE(${eventExpr}, '')) LIKE '%error%' AND ts >= ?`).get(Math.floor(Date.now() / 1000) - 86400) as { total: number }).total
+      ? (db.prepare(`SELECT COUNT(*) AS total FROM events WHERE LOWER(COALESCE(${eventExpr}, '')) LIKE '%error%' AND ts >= ?`).get(Date.now() - 86_400_000) as { total: number }).total // events.ts is in milliseconds
       : 0;
     checks.push({
       id: 'runtime.errors24h',
@@ -168,54 +170,53 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
       });
     }
 
-    const startOfDay = new Date();
-    startOfDay.setHours(0, 0, 0, 0);
-    const todayModels = db.prepare(
-      `SELECT model,
-        COALESCE(SUM(cost_usd), 0) AS cost_usd,
-        COALESCE(SUM(tokens_in), 0) AS tokens_in,
-        COALESCE(SUM(tokens_out), 0) AS tokens_out,
-        COUNT(*) AS sessions
-       FROM sessions WHERE started_at >= ?
-       GROUP BY model ORDER BY cost_usd DESC`,
-    ).all(Math.floor(startOfDay.getTime() / 1000)) as ModelCost[];
-    const billing = summarizeBilling(todayModels);
+    db.close();
+  } catch (error) {
+    checks.push({ id: 'runtime.db', label: 'Rev4a DB', health: 'error', value: 'error', details: (error as Error).message, source: 'runtime' });
+    recommendations.push({ id: 'runtime.db-error', severity: 'critical', source: 'runtime', title: 'Rev4a DB unreadable', details: (error as Error).message, dismissible: false, createdAt });
+  }
+
+  // What the agents spent today (UTC day), as their own OpenClaw priced it (costs.db).
+  const spend = dashboardCosts();
+  if (spend?.error) {
+    checks.push({ id: 'cost.usageBasedToday', label: 'Spent today', health: 'warning', value: 'error', details: `costs.db unreadable: ${spend.error}`, source: 'cost' });
+  } else {
+    const today = spend?.today ?? 0;
+    const missing = spend?.missingToday ?? 0;
     checks.push({
       id: 'cost.usageBasedToday',
-      label: 'Usage-based cost today',
-      health: billing.usageBasedCost > 10 ? 'warning' : 'ok',
-      value: `$${billing.usageBasedCost.toFixed(2)}`,
-      details: `DB estimate $${billing.dbEstimatedCost.toFixed(2)}; fixed ${billing.buckets.fixed.sessions} sessions; credits ${billing.buckets.credits.sessions} sessions`,
+      label: 'Spent today',
+      health: today > HIGH_DAILY_SPEND_USD || missing > 0 ? 'warning' : 'ok',
+      value: `$${today.toFixed(2)}`,
+      details: spend
+        ? `Priced by the agents' OpenClaw, UTC day${missing ? `; ${missing} call(s) without a price` : ''}`
+        : 'No figures yet: the daemon reads the agents every 5 min',
       source: 'cost',
     });
-    if (billing.usageBasedCost > 10) {
+    if (today > HIGH_DAILY_SPEND_USD) {
       recommendations.push({
         id: 'cost.review-usage-based',
         severity: 'warning',
         source: 'cost',
-        title: 'High usage-based cost',
-        details: `Provider usage-based today: $${billing.usageBasedCost.toFixed(2)}. Counts OpenRouter and the other pay-per-use providers, not the fixed plans.`,
-        actionHref: '/gateway',
+        title: 'High spend today',
+        details: `The agents have spent $${today.toFixed(2)} today (UTC).`,
+        actionHref: '/costs',
         dismissible: true,
         createdAt,
       });
     }
-    if (billing.unknownModels.length > 0 && billing.buckets.unknown.cost_usd > 1) {
+    if (missing > 0) {
       recommendations.push({
-        id: 'cost.classify-unknown-models',
+        id: 'cost.unpriced-calls',
         severity: 'warning',
         source: 'cost',
-        title: 'Unclassified models in billing',
-        details: `${billing.unknownModels.length} unclassified models have DB estimate $${billing.buckets.unknown.cost_usd.toFixed(2)}.`,
-        actionHref: '/gateway',
+        title: 'Calls without a price',
+        details: `${missing} model call(s) today could not be priced: their model has no price in Rev4a, or a dynamic one (OpenRouter Auto).`,
+        actionHref: '/costs',
         dismissible: true,
         createdAt,
       });
     }
-    db.close();
-  } catch (error) {
-    checks.push({ id: 'runtime.db', label: 'Rev4a DB', health: 'error', value: 'error', details: (error as Error).message, source: 'runtime' });
-    recommendations.push({ id: 'runtime.db-error', severity: 'critical', source: 'runtime', title: 'Rev4a DB unreadable', details: (error as Error).message, dismissible: false, createdAt });
   }
 
   try {

package/app/components/CostBreakdown.tsx

@@ -12,7 +12,7 @@ interface CostBreakdownProps {
 export default function CostBreakdown({ byModel, loading = false }: CostBreakdownProps) {
   return (
     <article className="panel cost-panel">
-      <h2>Costs by Model (Today)</h2>
+      <h2>Spent by Model (Today, UTC)</h2>
       <div>
         {loading ? (
           <div style={{ padding: 12 }}>

package/app/components/Sidebar.tsx

@@ -59,6 +59,16 @@ const NAV: NavItem[] = [
       </svg>
     ),
   },
+  {
+    href: '/costs',
+    label: 'Costs',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.3" />
+        <path d="M10 5.8C9.6 5.3 8.9 5 8 5c-1.2 0-2 .6-2 1.5S6.8 7.8 8 8s2 .6 2 1.5S9.2 11 8 11c-.9 0-1.6-.3-2-.8M8 3.8V5M8 11v1.2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+      </svg>
+    ),
+  },
   {
     href: '/system',
     label: 'System',

package/app/components/SystemCockpit.tsx

@@ -201,7 +201,7 @@ export default function SystemCockpit({
             <Link href="/system" className="ui-link">Open System →</Link>
           </div>
         </Surface>
-        <Metric title="Usage cost" value={String(costCheck?.value ?? fmtMoney(0))} subtitle={costCheck?.details ?? `DB estimate ${fmtMoney(costs.today)}`} tone="accent" loading={systemLoading} />
+        <Metric title="Spent today" value={String(costCheck?.value ?? fmtMoney(costs.today))} subtitle={costCheck?.details ?? 'Priced by the agents\' OpenClaw, UTC day'} tone="accent" loading={systemLoading} />
       </div>
 
       <div className="cockpit__main">

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,15 +20,35 @@ 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;
   height?: number;
   /** While a new range loads the previous render stays, dimmed. */
   stale?: boolean;
   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;
 
 /**
  * One series over time: a 2px line for the value, a 10% wash up to the peak, a hairline
@@ -42,8 +62,9 @@ export function TimeSeriesChart({
   from,
   to,
   bucket,
-  yMax = 100,
+  yMax: yMaxProp = 100,
   unit = '%',
+  formatValue,
   height = 160,
   stale = false,
   formatTime,
@@ -61,10 +82,24 @@ export function TimeSeriesChart({
     return () => ro.disconnect();
   }, []);
 
-  const plotW = Math.max(0, width - PAD.left - PAD.right);
+  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}`);
+  const tickText = (v: number) => (formatValue ? formatValue(v) : `${Math.round(v)}${unit}`);
+  const tickValues = [0, 50, 100].map((v) => (v / 100) * yMax);
+  const lastValue = [...points].reverse().find((p) => p.value !== null)?.value ?? null;
+  const padLeft = formatValue
+    ? Math.max(PAD.left, Math.ceil(Math.max(...tickValues.map((v) => tickText(v).length)) * CHAR_W) + 8)
+    : PAD.left;
+  const padRight = formatValue && lastValue !== null
+    ? Math.max(PAD.right, Math.ceil(valueText(lastValue).length * CHAR_W) + 14)
+    : PAD.right;
+  const plotW = Math.max(0, width - padLeft - padRight);
   const plotH = height - PAD.top - PAD.bottom;
   const span = Math.max(1, to - from);
-  const x = (ts: number) => PAD.left + ((ts - from) / span) * plotW;
+  const x = (ts: number) => padLeft + ((ts - from) / span) * plotW;
   const y = (v: number) => PAD.top + plotH - (Math.max(0, Math.min(yMax, v)) / yMax) * plotH;
 
   const valid = useMemo(() => points.filter((p) => p.value !== null), [points]);
@@ -95,7 +130,8 @@ export function TimeSeriesChart({
 
   const last = valid[valid.length - 1];
   const shown = active !== null ? valid[active] : null;
-  const fmt = (v: number | null | undefined) => (v === null || v === undefined ? '—' : `${Math.round(v * 10) / 10}${unit}`);
+  const fmt = (v: number | null | undefined) =>
+    v === null || v === undefined ? '—' : valueText(v);
 
   function onPointerMove(e: PointerEvent<SVGRectElement>) {
     if (!valid.length || plotW <= 0) return;
@@ -137,9 +173,9 @@ export function TimeSeriesChart({
           <svg width={width} height={height} aria-hidden="true">
             {[0, 50, 100].map((v) => (
               <g key={v}>
-                <line x1={PAD.left} x2={PAD.left + plotW} y1={y((v / 100) * yMax)} y2={y((v / 100) * yMax)} className="ui-chart__grid" />
-                <text x={PAD.left - 6} y={y((v / 100) * yMax) + 3} textAnchor="end" className="ui-chart__tick">
-                  {Math.round((v / 100) * yMax)}{unit}
+                <line x1={padLeft} x2={padLeft + plotW} y1={y((v / 100) * yMax)} y2={y((v / 100) * yMax)} className="ui-chart__grid" />
+                <text x={padLeft - 6} y={y((v / 100) * yMax) + 3} textAnchor="end" className="ui-chart__tick">
+                  {tickText((v / 100) * yMax)}
                 </text>
               </g>
             ))}
@@ -157,7 +193,7 @@ export function TimeSeriesChart({
             <defs>
               {/* Marks stay inside the plot, never over the axis labels. */}
               <clipPath id={clipId}>
-                <rect x={PAD.left} y={0} width={plotW} height={PAD.top + plotH} />
+                <rect x={padLeft} y={0} width={plotW} height={PAD.top + plotH} />
               </clipPath>
             </defs>
             <g clipPath={`url(#${clipId})`}>
@@ -182,10 +218,10 @@ export function TimeSeriesChart({
               </g>
             )}
             {!valid.length && (
-              <text x={PAD.left + plotW / 2} y={PAD.top + plotH / 2} textAnchor="middle" className="ui-chart__tick">No samples in this range</text>
+              <text x={padLeft + plotW / 2} y={PAD.top + plotH / 2} textAnchor="middle" className="ui-chart__tick">No samples in this range</text>
             )}
             <rect
-              x={PAD.left}
+              x={padLeft}
               y={PAD.top}
               width={plotW}
               height={plotH}

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' }}>