@flame0510/project-aether 1.10.0 → 1.11.1

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
 
@@ -39,6 +39,10 @@ rev4a serve
 
 Rev4a auto-builds on first run, generates `.env` with credentials,
 and starts all services. Open `http://localhost:3740` and follow the setup wizard.
+An npm install also builds the dashboard during installation; it fails if the
+production build cannot complete. Startup checks for `.next/BUILD_ID` and retries an
+incomplete build before starting the server. The published package includes a dependency
+lock and the TypeScript packages needed to build from a global installation.
 
 ```bash
 # Custom port:
@@ -84,7 +88,7 @@ already filled in — you normally never set these by hand. See
 | `REV4A_DB` | `<data dir>/data/events.db` | No | SQLite database path |
 | `REV4A_WORKSPACE_ROOT` | — | No | Root exposed by the local file explorer |
 | `REV4A_DEV_ORIGINS` | — | No | Extra comma-separated hostnames or IPs allowed to reach `next dev` (e.g. a LAN address, without scheme or port); no effect on a production build |
-| `REV4A_SKIP_POSTINSTALL_BUILD` | — | No | `1` in CI so `npm ci` skips the post-install `next build`; the workflows build as a separate step. Any non-empty value skips it, `0` included |
+| `REV4A_SKIP_POSTINSTALL_BUILD` | — | No | `1` in CI so `npm ci` skips the post-install `next build`; the workflows build as a separate step. Outside CI, a failed post-install build fails the installation. Any non-empty value skips it, `0` included |
 | `REV4A_AGENT_IMAGE_REGISTRY` | `ghcr.io/flame0510/rev4a/openclaw-agent-base` | No | Registry repository agent images are pulled from, as `<repository>:<OpenClaw version>`. A `localhost` registry is reached over plain HTTP |
 | `REV4A_DOCKER_WAIT_SECONDS` | `90` | No | How long `rev4a serve` waits for the Docker daemon at start-up before starting without it. Capped at 600; `0` checks once; a negative or non-numeric value means 90. Read from the process environment, not from the `.env` file |
 

package/app/agents/CostSection.tsx

@@ -8,10 +8,13 @@ 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;
   intervalS: number;
+  /** The vendor band billed right now (DeepSeek peak / off-peak), when one of its models is on offer. */
+  pricing?: { vendor: string; band: 'peak' | 'off-peak'; nextChange: number | null; source: string } | null;
   today?: number;
   week?: number;
   month?: number;
@@ -31,8 +34,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('');
@@ -70,23 +71,24 @@ export default function CostSection({ container }: { container: string }) {
   }
 
   const stale = !data.collectedAt || Date.now() - data.collectedAt > data.intervalS * 3 * 1000;
-  const rows: [string, string][] = [
+  const utcTime = new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'UTC' });
+  // What the gateway charges right now: the band the agent's calls are billed at until the
+  // next change (the rows below are history, priced as each call happened).
+  const rows: [string, string][] = data.pricing ? [
+    ['Rates now', `${data.pricing.vendor} ${data.pricing.band}${data.pricing.nextChange ? ` · until ${utcTime.format(new Date(data.pricing.nextChange))} UTC` : ''}`],
+  ] : [];
+  rows.push(
     ['Today (UTC)', formatCost(data.today)],
     ['Last 7 days', formatCost(data.week)],
     ['Last 30 days', `${formatCost(data.month)} · ${Math.round((data.tokensMonth ?? 0) / 1000)}k tokens`],
     ['Top model (30 days)', data.topModel ? `${data.topModel.model} · ${formatCost(data.topModel.cost)}` : '-'],
-  ];
+  );
   if (data.unpricedMonth) rows.push(['Calls without a price (30 days)', String(data.unpricedMonth)]);
   rows.push(['Last read', data.collectedAt ? formatAge(Date.now() - data.collectedAt) : 'never']);
 
   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,11 +1,25 @@
 import { NextResponse, type NextRequest } from 'next/server';
 import { openCostsDb } from '@/lib/costs-db';
 import { COLLECT_INTERVAL_S, lastDays, readCostSummary } from '@/lib/agent-costs';
+import { loadOfferedModels } from '@/lib/model-catalogue';
+import { nextPriceChange, priceBandAt, priceScheduleFor } from '@/lib/model-pricing';
+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}$/;
+/** The band DeepSeek bills at right now, when one of its models is on offer — the same object the Costs page header shows. Never throws: the panel's poll must not 500 over a broken key or catalogue file. */
+function currentPricing() {
+  try {
+    const scheduled = loadOfferedModels().map((m) => m.id).filter((id) => priceScheduleFor(id));
+    if (!scheduled.length) return null;
+    const pricingAt = new Date();
+    const next = nextPriceChange(scheduled, pricingAt);
+    return { vendor: 'DeepSeek', band: priceBandAt(scheduled[0], pricingAt), nextChange: next ? next.getTime() : null, source: priceScheduleFor(scheduled[0])!.source };
+  } catch {
+    return null;
+  }
+}
 
 /**
  * GET /api/costs/agent?container=<name> — one agent's spend for its panel: today, the
@@ -17,7 +31,9 @@ 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 });
+
+  const pricing = currentPricing();
 
   let db;
   try {
@@ -25,7 +41,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
   } catch (e) {
     return NextResponse.json({ error: `costs.db could not be read: ${(e as Error).message}` }, { status: 500 });
   }
-  if (!db) return NextResponse.json({ available: false, intervalS: COLLECT_INTERVAL_S });
+  if (!db) return NextResponse.json({ available: false, intervalS: COLLECT_INTERVAL_S, pricing });
 
   try {
     const dates = lastDays(30);
@@ -39,6 +55,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
     return NextResponse.json({
       available: true,
       intervalS: COLLECT_INTERVAL_S,
+      pricing,
       today: sum(1),
       week: sum(7),
       month: s.totals.cost,

package/app/api/gateway/provider/route.ts

@@ -10,7 +10,7 @@ import { execSync } from 'child_process';
 import { readProviderKeys, writeProviderKeys } from './keys';
 import { dockerUnreachableReason, syncAllAgents, type SyncOutcome } from '../sync';
 import { detectProviderGatewayUrl } from '@/lib/docker-utils';
-import { getPricing } from '@/lib/model-pricing';
+import { getPricing, nextPriceChange, priceAt, priceBandAt } from '@/lib/model-pricing';
 import { getModelParams } from '@/lib/model-details';
 import { PROVIDER_LABELS } from '@/lib/provider-labels';
 import { loadModelsConfig, toggleModelOverride, type ModelConfigEntry } from '@/lib/model-catalogue';
@@ -172,6 +172,7 @@ export async function GET(request: NextRequest) {
   // Sizes for the row's "next to the price" hint: open-weight models only (see
   // docs/dev/GATEWAY.md), absent for a model whose vendor does not publish one.
   const paramsByModel = getModelParams();
+  const pricingAt = new Date();
 
   const providers = Object.entries(PROVIDER_CONFIGS).map(([key, cfg]) => {
     const providerModels = allModels.filter((m) => m.provider === key);
@@ -190,12 +191,29 @@ export async function GET(request: NextRequest) {
         }
         if (m.modality) entry.modality = m.modality;
         if (paramsByModel[m.id]) entry.params = paramsByModel[m.id];
+        // The band billed right now for a time-of-day vendor (DeepSeek peak / off-peak):
+        // null for every model priced the same all day. The synced agent prices follow it
+        // (lib/price-schedule-sync.ts); the row shows the same thing — including the price,
+        // which is the rate in force now, not the peak list price.
+        const band = priceBandAt(m.id, pricingAt);
+        if (band) {
+          entry.band = band;
+          // The live OpenRouter overlay outranks the static band arithmetic (disjoint
+          // today — only `deepseek` is scheduled, only `openrouter/*` is live-priced —
+          // but keep it explicit so a future schedule never silent-replaces live prices).
+          if (!entry.pricingLive) {
+            const now = priceAt(m.id, pricingAt);
+            if (now) entry.pricing = now;
+          }
+        }
         return entry;
       }),
       ...(providerKeys[key] ? { apiKey: providerKeys[key] } : {}),
     };
   });
-  return NextResponse.json({ providers });
+  // When the band flips next, so an open page can refresh the chips right after it.
+  const nextChange = nextPriceChange(allModels.map((m) => m.id), pricingAt);
+  return NextResponse.json({ providers, nextPriceChangeMs: nextChange ? nextChange.getTime() : null });
 }
 
 /**

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/update-check/route.ts

@@ -1,8 +1,9 @@
 import { NextResponse } from 'next/server';
-import { execSync } from 'child_process';
-import { readFileSync } from 'fs';
+import { execSync, spawn } from 'child_process';
+import { appendFileSync, closeSync, mkdirSync, openSync, readFileSync } from 'fs';
 import { join } from 'path';
 import { requireAuthJWT } from '@/lib/rev4a-auth';
+import { REV4A_DATA } from '@/lib/rev4a-paths';
 
 // Fallback used only when package.json cannot be read — the published npm
 // package name is the single source of truth, so never hardcode it elsewhere.
@@ -103,14 +104,15 @@ export async function POST(request: Request): Promise<NextResponse> {
   const denied = await requireAuthJWT(request);
   if (denied) return denied;
 
-  const { spawn } = require('child_process');
-  const { join } = require('path');
-  const { openSync, closeSync, appendFileSync } = require('fs');
-
-  const dataDir = process.env.REV4A_DATA_DIR ||
-    join(process.env.HOME || '/root', '.config', 'rev4a', 'data');
+  const dataDir = join(REV4A_DATA, 'data');
   const logPath = join(dataDir, 'update.log');
 
+  try {
+    mkdirSync(dataDir, { recursive: true });
+  } catch {
+    return NextResponse.json({ success: false, error: 'Could not prepare the update directory.' }, { status: 500 });
+  }
+
   let log: number | null = null;
   try {
     log = openSync(logPath, 'a');
@@ -126,9 +128,16 @@ export async function POST(request: Request): Promise<NextResponse> {
   });
   if (log !== null) closeSync(log);
 
-  child.on('error', (e: Error) => {
-    try { appendFileSync(logPath, `[dashboard] could not start the update: ${e.message}\n`); } catch {}
-  });
+  try {
+    await new Promise<void>((resolve, reject) => {
+      child.once('spawn', resolve);
+      child.once('error', reject);
+    });
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e);
+    try { appendFileSync(logPath, `[dashboard] could not start the update: ${message}\n`); } catch {}
+    return NextResponse.json({ success: false, error: 'Could not start the update.' }, { status: 500 });
+  }
   child.unref();
 
   return NextResponse.json({

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>
+  );
+}