@flame0510/project-aether 1.9.1 → 1.11.0

package/app/costs/CostsSkeleton.tsx

@@ -0,0 +1,88 @@
+import { Skeleton } from '../components/Skeleton';
+import { Surface } from '../components/ui';
+
+/**
+ * Placeholders for the Costs page, used by `loading.tsx` while the route loads and by the
+ * page before its first answer. Each shimmer sits in the class of the text it stands in
+ * for (`ui-kicker`, `ui-metric-value`, `ui-key-value`, `ui-meter`), so the boxes have the
+ * real heights and nothing jumps when the data lands.
+ */
+
+function KeyValueRow({ label, value }: { label: number; value: number }) {
+  return (
+    <div className="ui-key-value">
+      <span><Skeleton as="span" inline width={label} height={11} /></span>
+      <span><Skeleton as="span" inline width={value} height={11} /></span>
+    </div>
+  );
+}
+
+function FigureCard({ title, rows }: { title: number; rows: number }) {
+  return (
+    <Surface as="article">
+      <div className="ui-kicker"><Skeleton as="span" inline width={title} height={10} /></div>
+      <div className="ui-metric-value"><Skeleton as="span" inline width={88} height={26} accent /></div>
+      <div className="ui-key-values" style={{ marginTop: 12 }}>
+        {Array.from({ length: rows }).map((_, i) => <KeyValueRow key={i} label={70 + (i % 2) * 30} value={48} />)}
+      </div>
+    </Surface>
+  );
+}
+
+export function CostsCardsSkeleton() {
+  return (
+    <div className="costs-cards" aria-busy="true" aria-label="Loading costs">
+      <FigureCard title={40} rows={2} />
+      <FigureCard title={64} rows={4} />
+      <FigureCard title={48} rows={4} />
+    </div>
+  );
+}
+
+/** One breakdown list: a title, then rows of name and figure over a share meter. */
+function ListSkeleton({ rows }: { rows: number }) {
+  return (
+    <Surface as="section">
+      <div className="ui-kicker"><Skeleton as="span" inline width={90} height={10} /></div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} style={{ marginTop: 14 }}>
+          <KeyValueRow label={140 - (i % 3) * 20} value={56} />
+          <div className="ui-meter"><Skeleton height={6} style={{ flex: 1 }} /></div>
+        </div>
+      ))}
+    </Surface>
+  );
+}
+
+export function CostsBodySkeleton() {
+  return (
+    <div aria-hidden="true" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Surface as="section">
+        <div className="ui-kicker"><Skeleton as="span" inline width={120} height={10} /></div>
+        <Skeleton height={160} />
+      </Surface>
+      <div className="costs-lists">
+        <ListSkeleton rows={3} />
+        <ListSkeleton rows={3} />
+      </div>
+    </div>
+  );
+}
+
+/** The range switch (Today · 7 days · 30 days) for the route's loading state. */
+export function CostsRangeSkeleton() {
+  return (
+    <div
+      aria-hidden="true"
+      style={{ display: 'flex', borderBottom: '1px solid var(--border)', marginBottom: 20, height: 44, alignItems: 'center' }}
+    >
+      {[36, 44, 50].map((w, i) => (
+        <div key={i} style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+          <Skeleton width={w} height={11} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const COSTS_DESCRIPTION = 'What each agent spent, as its own OpenClaw priced it with the rates Rev4a syncs. Days are UTC.';

package/app/costs/PageClient.tsx

@@ -0,0 +1,366 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { apiFetch } from '@/lib/apiFetch';
+import { formatCost } from '@/lib/utils/format';
+import { useRev4aTimezone } from '@/lib/hooks/useRev4aTimezone';
+import { Meter, Page, PageHeader, Pill, Surface, Tabs, TimeSeriesChart } from '../components/ui';
+import { COSTS_DESCRIPTION, CostsBodySkeleton, CostsCardsSkeleton } from './CostsSkeleton';
+
+type Range = 'today' | '7d' | '30d';
+const RANGES: { id: Range; label: string }[] = [
+  { id: 'today', label: 'Today' },
+  { id: '7d', label: '7 days' },
+  { id: '30d', label: '30 days' },
+];
+/** The daemon reads the agents every 5 min; a minute keeps the page close behind it. */
+const POLL_MS = 60_000;
+const DAY_S = 86_400;
+
+interface Totals {
+  cost: number; tokens: number; input: number; output: number; cacheRead: number; cacheWrite: number;
+  inputCost: number; outputCost: number; cacheReadCost: number; cacheWriteCost: number; missing: number;
+}
+interface AgentRow {
+  container: string; agentId: string | null; name: string | null; cost: number; tokens: number; missing: number;
+  collectedAt: number | null; attemptedAt: number | null; error: string | null;
+}
+interface ModelRow { provider: string; model: string; cost: number; tokens: number; calls: number }
+interface SessionRow {
+  container: string; sessionId: string; sessionKey: string | null; label: string | null; agentName: string | null;
+  model: string | null; cost: number; tokens: number; missing: number; lastActivity: number | null;
+}
+interface CostsPayload {
+  available: boolean;
+  range: Range;
+  startDate: string;
+  endDate: string;
+  intervalS: number;
+  pricing: { vendor: string; band: 'peak' | 'off-peak' | null; nextChange: number | null; source: string } | null;
+  totals: Totals;
+  daily: { date: string; cost: number; tokens: number; missing: number }[];
+  byAgent: AgentRow[];
+  byModel: ModelRow[];
+  sessions: SessionRow[];
+  unpriced: { model: string; calls: number; agents: string[] }[];
+  reconciliation: Reconciliation[];
+}
+interface Reconciliation {
+  vendor: string; currency: string | null; from: number | null; to: number | null;
+  billed: number | null; priced: number | null; topUps: number; readings: number; comparable: boolean;
+}
+
+const VENDOR_LABEL: Record<string, string> = { deepseek: 'DeepSeek', openrouter: 'OpenRouter' };
+
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return String(n);
+}
+
+function formatAge(ms: number): string {
+  const min = Math.round(ms / 60_000);
+  if (min < 1) return 'just now';
+  if (min < 60) return `${min} min ago`;
+  const h = Math.round(min / 60);
+  return h < 48 ? `${h} h ago` : `${Math.round(h / 24)} d ago`;
+}
+
+const dayStart = (date: string) => Date.parse(`${date}T00:00:00Z`) / 1000;
+const utcDay = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' });
+const utcTime = new Intl.DateTimeFormat('en-GB', { weekday: 'short', hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'UTC' });
+
+function share(part: number, whole: number): number {
+  return whole > 0 ? (part / whole) * 100 : 0;
+}
+
+/** A breakdown row: name and figure, a share meter, and a muted detail line. */
+function BreakdownRow({ name, figure, detail, percent, label }: { name: string; figure: string; detail: string; percent: number; label: string }) {
+  return (
+    <div style={{ marginTop: 14 }}>
+      <div className="ui-key-value" style={{ fontSize: 12 }}>
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</span>
+        <span>{figure}</span>
+      </div>
+      <Meter percent={percent} level="ok" label={label} />
+      <div className="ui-muted" style={{ fontSize: 11, marginTop: 4 }}>{detail}</div>
+    </div>
+  );
+}
+
+export default function CostsPageClient() {
+  const [range, setRange] = useState<Range>('7d');
+  const [data, setData] = useState<CostsPayload | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+  const timeZone = useRev4aTimezone();
+
+  const load = useCallback(async (r: Range) => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    try {
+      const res = await apiFetch(`/api/costs/usage?range=${r}`, { signal: controller.signal });
+      const body = await res.json();
+      if (!res.ok) throw new Error(body?.error || `Error ${res.status}`);
+      setData(body as CostsPayload);
+      setError('');
+    } catch (e: any) {
+      if (e?.name === 'AbortError') return;
+      setError(e?.message || 'Could not load the costs');
+    } finally {
+      if (abortRef.current === controller) setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load(range);
+    const timer = setInterval(() => load(range), POLL_MS);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, [range, load]);
+
+  const firstLoad = data === null && !error;
+  const stale = loading && data !== null && data.range !== range;
+  const now = Date.now();
+  const t = data?.totals;
+  const sessionTime = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12: false, timeZone });
+
+  // Agents the daemon is still trying to read (a recent attempt) whose figures are not
+  // current. A stopped or deleted agent is no longer attempted and keeps its last figures
+  // on purpose: it is not flagged.
+  const interval = (data?.intervalS ?? 300) * 1000;
+  const lagging = (data?.byAgent ?? []).filter(
+    (a) => a.attemptedAt !== null && now - a.attemptedAt <= interval * 3
+      && (a.error !== null || !a.collectedAt || now - a.collectedAt > interval * 3),
+  );
+  const maxDaily = Math.max(0, ...(data?.daily ?? []).map((d) => d.cost));
+  // OpenClaw names an unpriced model `provider/model`, like the rows below.
+  const unpricedModels = new Set((data?.unpriced ?? []).map((u) => u.model));
+
+  const band = data?.pricing;
+  const bandPill = band?.band ? (
+    <Pill tone={band.band === 'off-peak' ? 'success' : 'neutral'}>
+      {band.vendor} {band.band}{band.nextChange ? ` · until ${utcTime.format(new Date(band.nextChange))} UTC` : ''}
+    </Pill>
+  ) : undefined;
+
+  return (
+    <Page>
+      <PageHeader eyebrow="Spend" title="Costs" description={COSTS_DESCRIPTION} action={bandPill} />
+
+      <Tabs items={RANGES.map((r) => ({ label: r.label, active: range === r.id, onClick: () => setRange(r.id) }))} />
+
+      {error && <Surface tone="danger"><span style={{ color: 'var(--red)', fontSize: 12 }}>{error}</span></Surface>}
+
+      {data && !data.available && (
+        <Surface tone="warning">
+          <div className="ui-kicker">No figures yet</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+            The Rev4a daemon reads every running agent each {Math.round(data.intervalS / 60)} min. If this stays empty, check that rev4a serve is running.
+          </p>
+        </Surface>
+      )}
+
+      {lagging.length > 0 && (
+        <Surface tone="warning">
+          <div className="ui-kicker">Not current</div>
+          <div className="ui-key-values" style={{ marginTop: 8 }}>
+            {lagging.map((a) => (
+              <div className="ui-key-value" key={a.container}>
+                <span>{a.name ?? a.container}</span>
+                <span className="ui-muted">
+                  {a.error ?? 'not read recently'}
+                  {a.collectedAt ? ` · last read ${formatAge(now - a.collectedAt)}` : ' · never read'}
+                </span>
+              </div>
+            ))}
+          </div>
+        </Surface>
+      )}
+
+      {data && data.unpriced.length > 0 && (
+        <Surface tone="warning">
+          <div className="ui-kicker">Calls without a price · last 30 days</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+            OpenClaw counted these calls but could not price them, so they are not in the figures: the model is no longer in the catalogue, or has no price in model-pricing.json.
+          </p>
+          <div className="ui-key-values" style={{ marginTop: 8 }}>
+            {data.unpriced.map((u) => (
+              <div className="ui-key-value" key={u.model}>
+                <span>{u.model}</span>
+                <span>{u.calls} call{u.calls === 1 ? '' : 's'} · {u.agents.join(', ')}</span>
+              </div>
+            ))}
+          </div>
+        </Surface>
+      )}
+
+      {firstLoad ? <CostsCardsSkeleton /> : (
+        <div className="costs-cards" style={{ opacity: stale ? 0.5 : 1 }}>
+          <Surface as="article">
+            <div className="ui-kicker">Spent</div>
+            <div className="ui-metric-value">{formatCost(t?.cost ?? 0)}</div>
+            <div className="ui-key-values" style={{ marginTop: 12 }}>
+              <div className="ui-key-value"><span className="ui-muted">Tokens</span><span>{formatTokens(t?.tokens ?? 0)}</span></div>
+              <div className="ui-key-value">
+                <span className="ui-muted">Days</span>
+                <span>{data ? (data.startDate === data.endDate ? utcDay.format(new Date(data.endDate)) : `${utcDay.format(new Date(data.startDate))} – ${utcDay.format(new Date(data.endDate))}`) : '—'}</span>
+              </div>
+            </div>
+          </Surface>
+
+          <Surface as="article">
+            <div className="ui-kicker">Where the money went</div>
+            <div className="ui-key-values" style={{ marginTop: 12 }}>
+              <div className="ui-key-value"><span className="ui-muted">Input</span><span>{formatCost(t?.inputCost ?? 0)}</span></div>
+              <div className="ui-key-value"><span className="ui-muted">Output</span><span>{formatCost(t?.outputCost ?? 0)}</span></div>
+              <div className="ui-key-value"><span className="ui-muted">Cache read</span><span>{formatCost(t?.cacheReadCost ?? 0)}</span></div>
+              <div className="ui-key-value"><span className="ui-muted">Cache write</span><span>{formatCost(t?.cacheWriteCost ?? 0)}</span></div>
+            </div>
+          </Surface>
+
+          <Surface as="article">
+            <div className="ui-kicker">Tokens</div>
+            <div className="ui-key-values" style={{ marginTop: 12 }}>
+              <div className="ui-key-value"><span className="ui-muted">Input</span><span>{formatTokens(t?.input ?? 0)}</span></div>
+              <div className="ui-key-value"><span className="ui-muted">Output</span><span>{formatTokens(t?.output ?? 0)}</span></div>
+              <div className="ui-key-value"><span className="ui-muted">Cache read</span><span>{formatTokens(t?.cacheRead ?? 0)}</span></div>
+              <div className="ui-key-value">
+                <span className="ui-muted">Input served from cache</span>
+                <span>{Math.round(share(t?.cacheRead ?? 0, (t?.input ?? 0) + (t?.cacheRead ?? 0) + (t?.cacheWrite ?? 0)))}%</span>
+              </div>
+            </div>
+          </Surface>
+        </div>
+      )}
+
+      {firstLoad ? <CostsBodySkeleton /> : data && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, opacity: stale ? 0.5 : 1 }}>
+          {data.range !== 'today' && (
+            <Surface as="section">
+              <div className="ui-kicker">Spent per day · UTC</div>
+              <TimeSeriesChart
+                label="Spent per day"
+                points={data.daily.map((d) => ({ ts: dayStart(d.date), value: d.cost }))}
+                from={dayStart(data.startDate)}
+                to={dayStart(data.endDate)}
+                bucket={DAY_S}
+                yMax={maxDaily > 0 ? maxDaily * 1.2 : 1}
+                formatValue={formatCost}
+                formatTime={(ts) => utcDay.format(new Date(ts * 1000))}
+              />
+            </Surface>
+          )}
+
+          <div className="costs-lists">
+            <Surface as="section">
+              <div className="ui-kicker">By agent</div>
+              {data.byAgent.length === 0 && <p className="ui-muted" style={{ fontSize: 12, marginTop: 12 }}>No agent has spent anything in this range.</p>}
+              {data.byAgent.map((a) => (
+                <BreakdownRow
+                  key={a.container}
+                  name={a.name ?? a.container}
+                  figure={formatCost(a.cost)}
+                  percent={share(a.cost, t?.cost ?? 0)}
+                  label={`Share of the spend for ${a.name ?? a.container}`}
+                  detail={`${a.container} · ${formatTokens(a.tokens)} tokens${a.missing ? ` · ${a.missing} unpriced` : ''}`}
+                />
+              ))}
+            </Surface>
+
+            <Surface as="section">
+              <div className="ui-kicker">By model</div>
+              {data.byModel.length === 0 && <p className="ui-muted" style={{ fontSize: 12, marginTop: 12 }}>No model calls in this range.</p>}
+              {data.byModel.map((m) => (
+                <BreakdownRow
+                  key={`${m.provider}/${m.model}`}
+                  name={m.model}
+                  figure={formatCost(m.cost)}
+                  percent={share(m.cost, t?.cost ?? 0)}
+                  label={`Share of the spend for ${m.model}`}
+                  detail={`${m.provider} · ${m.calls} call${m.calls === 1 ? '' : 's'} · ${formatTokens(m.tokens)} tokens${unpricedModels.has(`${m.provider}/${m.model}`) ? ' · no price, not counted' : ''}`}
+                />
+              ))}
+            </Surface>
+          </div>
+
+          {data.reconciliation.length > 0 && (
+            <Surface as="section">
+              <div className="ui-kicker">Against the bill</div>
+              <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+                What each vendor charged (its balance or usage, read every hour) next to what the agents priced, over the same readings.
+                The same key also pays for the assistant and any client outside Rev4a, and DeepSeek gives its balance to the cent: a small gap is normal.
+              </p>
+              <div className="ui-key-values" style={{ marginTop: 8 }}>
+                {data.reconciliation.map((r) => {
+                  const name = VENDOR_LABEL[r.vendor] ?? r.vendor;
+                  if (r.billed === null || r.priced === null || !r.from || !r.to) {
+                    return (
+                      <div className="ui-key-value" key={r.vendor}>
+                        <span>{name}</span>
+                        <span className="ui-muted">{r.readings ? 'one reading so far — the comparison starts with the next, within the hour' : 'no reading in this range'}</span>
+                      </div>
+                    );
+                  }
+                  if (!r.comparable) {
+                    return (
+                      <div className="ui-key-value" key={r.vendor}>
+                        <span>{name}</span>
+                        <span className="ui-muted">billed in {r.currency}, not comparable with dollars</span>
+                      </div>
+                    );
+                  }
+                  const gap = r.billed - r.priced;
+                  return (
+                    <div key={r.vendor} style={{ marginTop: 6 }}>
+                      <div className="ui-key-value" style={{ fontSize: 12 }}>
+                        <span>{name}</span>
+                        <span>billed {formatCost(r.billed)} · priced {formatCost(r.priced)} · gap {gap < 0 ? '−' : '+'}{formatCost(Math.abs(gap))}</span>
+                      </div>
+                      <div className="ui-muted" style={{ fontSize: 11, marginTop: 4 }}>
+                        {sessionTime.format(new Date(r.from))} → {sessionTime.format(new Date(r.to))} · {r.readings} readings
+                        {r.topUps > 0 ? ` · ${formatCost(r.topUps)} added to the balance (not counted as spend)` : ''}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </Surface>
+          )}
+
+          <Surface as="section">
+            <div className="ui-kicker">Most expensive sessions</div>
+            {data.sessions.length === 0 && <p className="ui-muted" style={{ fontSize: 12, marginTop: 12 }}>No session was active in this range.</p>}
+            {data.sessions.map((s) => (
+              <BreakdownRow
+                key={`${s.container}/${s.sessionId}`}
+                name={s.label || s.sessionKey || s.sessionId}
+                figure={formatCost(s.cost)}
+                percent={share(s.cost, data.sessions[0]?.cost ?? 0)}
+                label={`Cost of ${s.label || s.sessionId} relative to the most expensive session`}
+                detail={[
+                  s.agentName ?? s.container,
+                  s.model,
+                  `${formatTokens(s.tokens)} tokens`,
+                  s.missing ? `${s.missing} unpriced` : null,
+                  s.lastActivity ? `last active ${sessionTime.format(new Date(s.lastActivity))}` : null,
+                ].filter(Boolean).join(' · ')}
+              />
+            ))}
+            {data.sessions.length > 0 && (
+              <p className="ui-muted" style={{ fontSize: 11, marginTop: 14 }}>
+                A session&apos;s figure is its total over the last 30 days, not only this range.
+              </p>
+            )}
+          </Surface>
+        </div>
+      )}
+    </Page>
+  );
+}

package/app/costs/loading.tsx

@@ -0,0 +1,13 @@
+import { Page, PageHeader } from '../components/ui';
+import { COSTS_DESCRIPTION, CostsBodySkeleton, CostsCardsSkeleton, CostsRangeSkeleton } from './CostsSkeleton';
+
+export default function CostsLoading() {
+  return (
+    <Page>
+      <PageHeader eyebrow="Spend" title="Costs" description={COSTS_DESCRIPTION} />
+      <CostsRangeSkeleton />
+      <CostsCardsSkeleton />
+      <CostsBodySkeleton />
+    </Page>
+  );
+}

package/app/costs/page.tsx

@@ -0,0 +1,5 @@
+import CostsPageClient from './PageClient';
+
+export default function CostsPage() {
+  return <CostsPageClient />;
+}

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; }
@@ -684,6 +720,12 @@ html, body { height: 100%; height: 100dvh; background: var(--bg); color: var(--t
   .system-cards, .system-charts { grid-template-columns: minmax(0, 1fr); }
 }
 
+.costs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.costs-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+@media (max-width: 991px) {
+  .costs-cards, .costs-lists { grid-template-columns: minmax(0, 1fr); }
+}
+
 .cockpit { overflow: auto; height: 100%; padding: 20px; }
 .cockpit__metrics { display: grid; grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
 .cockpit__machine-item { white-space: nowrap; color: var(--text); }

package/app/system/AgentCharts.tsx

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