@flame0510/project-aether 1.10.0 → 1.11.1

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/gateway/ModelDetailsModal.tsx

@@ -24,7 +24,7 @@ interface DetailsView {
   modality?: string;
   enabled: boolean;
   deprecated: boolean;
-  price: { input: number; output: number; source: 'openrouter' | 'vendor' } | null;
+  price: { input: number; output: number; source: 'openrouter' | 'vendor'; scheduled: boolean } | null;
   details: {
     description?: string;
     created?: string;
@@ -182,7 +182,9 @@ export default function ModelDetailsModal({ modelId, onClose }: { modelId: strin
           <div style={{ fontSize: 10, color: 'var(--violet)', textTransform: 'uppercase', letterSpacing: '0.08em', margin: '12px 0 4px' }}>Price</div>
           <PropertyList rows={[
             { label: 'Input / output', value: formatPrice(view.price) },
-            ...(view.price ? [{ label: 'Per 1M tokens, from', value: view.providerLabel, dim: true }] : []),
+            // The static file holds the list (peak) rate for a time-of-day vendor; the row
+            // behind this modal shows the rate in force. Name the difference, not the vendor twice.
+            ...(view.price ? [{ label: 'Per 1M tokens, from', value: view.price.scheduled ? `${view.providerLabel} · list price` : view.providerLabel, dim: true }] : []),
           ]} />
 
           {/* Architecture: the factory facts from the model card, open weights only */}

package/app/gateway/PageClient.tsx

@@ -23,6 +23,8 @@ interface ModelInfo {
   modality?: string;
   /** Total parameters, when the model's card publishes them (open weights only). */
   params?: number;
+  /** The vendor band billed right now (DeepSeek peak / off-peak); absent for fixed-rate models. */
+  band?: 'peak' | 'off-peak';
 }
 
 interface GatewayProvider {
@@ -37,6 +39,8 @@ interface GatewayProvider {
 
 interface ProviderApiResponse {
   providers: GatewayProvider[];
+  /** When the band flips next, so an open page refreshes the chips just after it. */
+  nextPriceChangeMs?: number | null;
 }
 
 /* ------------------------------------------------------------------ */
@@ -100,15 +104,25 @@ export default function GatewayPageClient() {
   // Accordion state — which provider cards are expanded
   const [expandedProviders, setExpandedProviders] = useState<Set<string>>(new Set());
   const expandedInitRef = useRef(false);
+  const loadAbortRef = useRef<AbortController | null>(null);
+  const [bandChangeAt, setBandChangeAt] = useState<number | null>(null);
+  const [retryAt, setRetryAt] = useState<number | null>(null);
 
   /* ---- Data loading ---- */
-  const loadAll = useCallback(async () => {
-    setLoading(true);
+  const loadAll = useCallback(async (silent = false) => {
+    loadAbortRef.current?.abort();
+    const controller = new AbortController();
+    loadAbortRef.current = controller;
+    if (!silent) setLoading(true);
     try {
-      const provRes = await fetch('/api/gateway/provider');
-      if (provRes.ok) {
+      const provRes = await fetch('/api/gateway/provider', { signal: controller.signal });
+      if (!provRes.ok) throw new Error(`Could not load providers (HTTP ${provRes.status})`);
+      setError(null);
+      setRetryAt(null);
+      {
         const provJson: ProviderApiResponse = await provRes.json();
         setProviders(provJson.providers);
+        setBandChangeAt(provJson.nextPriceChangeMs ?? null);
 
         // Auto-expand configured providers on first load
         if (!expandedInitRef.current) {
@@ -119,51 +133,79 @@ export default function GatewayPageClient() {
           });
           if (configured.size > 0) setExpandedProviders(configured);
         }
-        // Load keys from provider response (all configured providers now return apiKey)
-        const keyEntries: Record<string, string> = {};
-        const origEntries: Record<string, string> = {};
-        provJson.providers.forEach((p: any) => {
-          if (p.configured && p.apiKey) {
-            keyEntries[p.provider] = p.apiKey;
-            origEntries[p.provider] = p.apiKey;
-          }
-        });
-        setApiKeyInputs((prev) => ({ ...prev, ...keyEntries }));
-        setOriginalKeys((prev) => ({ ...prev, ...origEntries }));
-
-        // Auto-fetch balances for supported providers that have keys configured
-        const balanceProvs = provJson.providers
-          .filter((p: any) => p.configured && ['deepseek','openrouter','glm'].includes(p.provider))
-          .map((p: any) => p.provider);
-        for (const bp of balanceProvs) {
-          try {
-            const bRes = await fetch(`/api/gateway/provider/balance?provider=${bp}`);
-            const bJson = await bRes.json();
-            if (bRes.ok && bJson.balance) {
-              setBalances((prev) => ({ ...prev, [bp]: { balance: bJson.balance, label: bJson.label } }));
-            } else if (bJson.reason === 'no-balance-api') {
-              // Permanent: this provider has no balance API for the account — hide the badge.
-              setBalances((prev) => ({ ...prev, [bp]: { balance: '', unsupported: true } }));
-            } else {
-              setBalances((prev) => ({ ...prev, [bp]: { balance: '—', error: bJson.error || 'Failed' } }));
+        // A scheduled band refresh only updates model rows. It must not overwrite a key
+        // the operator is editing or re-run the slower balance requests.
+        if (!silent) {
+          // Load keys from provider response (all configured providers now return apiKey)
+          const keyEntries: Record<string, string> = {};
+          const origEntries: Record<string, string> = {};
+          provJson.providers.forEach((p: any) => {
+            if (p.configured && p.apiKey) {
+              keyEntries[p.provider] = p.apiKey;
+              origEntries[p.provider] = p.apiKey;
+            }
+          });
+          setApiKeyInputs((prev) => ({ ...prev, ...keyEntries }));
+          setOriginalKeys((prev) => ({ ...prev, ...origEntries }));
+
+          // Auto-fetch balances for supported providers that have keys configured
+          const balanceProvs = provJson.providers
+            .filter((p: any) => p.configured && ['deepseek','openrouter','glm'].includes(p.provider))
+            .map((p: any) => p.provider);
+          for (const bp of balanceProvs) {
+            try {
+              const bRes = await fetch(`/api/gateway/provider/balance?provider=${bp}`, { signal: controller.signal });
+              const bJson = await bRes.json();
+              if (bRes.ok && bJson.balance) {
+                setBalances((prev) => ({ ...prev, [bp]: { balance: bJson.balance, label: bJson.label } }));
+              } else if (bJson.reason === 'no-balance-api') {
+                // Permanent: this provider has no balance API for the account — hide the badge.
+                setBalances((prev) => ({ ...prev, [bp]: { balance: '', unsupported: true } }));
+              } else {
+                setBalances((prev) => ({ ...prev, [bp]: { balance: '—', error: bJson.error || 'Failed' } }));
+              }
+            } catch (e: unknown) {
+              if ((e as Error)?.name === 'AbortError') throw e;
+              setBalances((prev) => ({ ...prev, [bp]: { balance: '—', error: e instanceof Error ? e.message : String(e) } }));
             }
-          } catch (e: unknown) {
-            setBalances((prev) => ({ ...prev, [bp]: { balance: '—', error: e instanceof Error ? e.message : String(e) } }));
           }
         }
       }
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      if ((e as Error)?.name !== 'AbortError') {
+        setError(e instanceof Error ? e.message : String(e));
+        if (silent) setRetryAt(Date.now() + 60_000);
+      }
     } finally {
-      setLoading(false);
+      if (loadAbortRef.current === controller) {
+        loadAbortRef.current = null;
+        setLoading(false);
+      }
     }
   }, []);
 
-  useEffect(() => { void loadAll(); }, [loadAll]);
+  useEffect(() => {
+    void loadAll();
+    return () => { loadAbortRef.current?.abort(); };
+  }, [loadAll]);
+
+  // Band chips: when a rate change is due, reload just past it — silently, so an open page
+  // flips PEAK / OFF-PEAK with the prices the agents actually get, without flickering skeletons.
+  useEffect(() => {
+    const next = retryAt ?? bandChangeAt;
+    if (!next) return;
+    const t = setTimeout(() => { void loadAll(true); }, Math.max(5_000, next - Date.now() + (retryAt ? 0 : 2_000)));
+    return () => { clearTimeout(t); };
+  }, [bandChangeAt, retryAt, loadAll]);
 
   /** Format pricing for display — shared with the details modal (app/lib/model-format.ts). */
   const fmtPrice = formatPrice;
 
+  /** The band chips' tooltip: when the band in force now ends, in UTC. */
+  const bandUntilLabel = bandChangeAt
+    ? new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'UTC' }).format(new Date(bandChangeAt))
+    : null;
+
   /**
    * Local model filter. Matches against both the display name and the id,
    * because the upstream vendor often only appears in one of them — e.g.
@@ -658,6 +700,14 @@ export default function GatewayPageClient() {
                                   <span style={{ marginLeft: 8, color: 'var(--violet)', fontWeight: 500 }}>
                                     {fmtPrice(pricing)}
                                   </span>
+                                  {m.band && (
+                                    <span
+                                      title={`Time-of-day rates: ${m.band} until ${bandUntilLabel ? `${bandUntilLabel} UTC` : 'the next change'} — the agents' synced prices follow the band.`}
+                                      style={{ marginLeft: 6, display: 'inline-block', verticalAlign: 'middle' }}
+                                    >
+                                      <Pill tone={m.band === 'peak' ? 'warning' : 'success'}>{m.band === 'peak' ? 'PEAK' : 'OFF-PEAK'}</Pill>
+                                    </span>
+                                  )}
                                   {typeof m.params === 'number' && (
                                     <span
                                       style={{ marginLeft: 8, color: 'var(--text-dim)' }}

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

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