@flame0510/project-aether 1.9.1 → 1.10.0

package/app/components/ui/TimeSeriesChart.tsx

@@ -22,6 +22,8 @@ interface TimeSeriesChartProps {
   bucket: number;
   yMax?: number;
   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;
@@ -29,6 +31,8 @@ interface TimeSeriesChartProps {
 }
 
 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
@@ -44,6 +48,7 @@ export function TimeSeriesChart({
   bucket,
   yMax = 100,
   unit = '%',
+  formatValue,
   height = 160,
   stale = false,
   formatTime,
@@ -61,10 +66,22 @@ export function TimeSeriesChart({
     return () => ro.disconnect();
   }, []);
 
-  const plotW = Math.max(0, width - PAD.left - PAD.right);
+  // 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 +112,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 +155,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 +175,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 +200,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/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

@@ -684,6 +684,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); }