@flame0510/project-aether 1.6.2 → 1.8.0

package/app/api/metrics/route.ts

@@ -1,34 +1,137 @@
+import os from 'os';
 import { NextResponse, type NextRequest } from 'next/server';
-import { openDb } from '@/lib/db';
+import { openMetricsDb } from '@/lib/metrics-db';
 import { requireAuthJWT } from '@/lib/rev4a-auth';
 
 export const dynamic = 'force-dynamic';
 
+/** How often daemon.js samples the machine; the page calls a sample older than 3× this stale. */
+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.
+ */
+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 {
+  ts: number;
+  cpu: number | null;
+  ram_used_mb: number | null;
+  ram_total_mb: number | null;
+  swap_used_mb: number | null;
+  swap_total_mb: number | null;
+  load_avg_1m: number | null;
+  load_avg_5m: number | null;
+  load_avg_15m: number | null;
+}
+
+interface DiskRow {
+  mount: string;
+  roles: string | null;
+  used_mb: number;
+  avail_mb: number;
+  total_mb: number;
+}
+
+/** Share of a filesystem in use, as `df` computes it: used / (used + avail). */
+function diskPercent(used: number, avail: number): number {
+  return used + avail > 0 ? Math.round((used / (used + avail)) * 100) : 0;
+}
+
+/**
+ * Machine metrics of the host Rev4a runs on: the latest sample, live host facts, and a
+ * bucketed history for one range (average and peak per bucket).
+ */
 export async function GET(request: NextRequest): Promise<NextResponse> {
   const denied = await requireAuthJWT(request); if (denied) return denied as any;
-  const { searchParams } = new URL(request.url);
-  const limit = Math.min(Number.parseInt(searchParams.get('limit') ?? '60', 10), 1000);
+  const param = new URL(request.url).searchParams.get('range') ?? '1h';
+  if (!Object.hasOwn(RANGES, param)) {
+    return NextResponse.json({ error: `range must be one of ${Object.keys(RANGES).join(', ')}` }, { status: 400 });
+  }
+  const range = param as Range;
+  const span = RANGES[range];
+  const bucket = Math.max(2 * SAMPLE_INTERVAL_S, Math.round(span / POINTS));
+  const now = Math.floor(Date.now() / 1000);
+  const since = now - span;
+
+  const host = {
+    hostname: os.hostname(),
+    platform: os.platform(),
+    cores: os.cpus().length,
+    uptime_s: Math.round(os.uptime()),
+  };
+  const base = { host, interval_s: SAMPLE_INTERVAL_S, range, bucket_s: bucket };
+
   try {
-    const db = openDb();
-    const latest = db
-      .prepare(
-        `SELECT cpu_percent as cpu, ram_used_mb, ram_total_mb, disk_used_gb, disk_total_gb,
-         load_avg_1m as load_avg, ts FROM system_metrics ORDER BY ts DESC LIMIT 1`,
-      )
-      .get();
-    const history = db
-      .prepare(
-        'SELECT cpu_percent as cpu, ram_used_mb, ram_total_mb, ts FROM system_metrics ORDER BY ts DESC LIMIT ?',
-      )
-      .all(limit)
-      .reverse();
-    const stats_24h = db
-      .prepare(
-        'SELECT ROUND(AVG(cpu_percent)) as cpu_avg, MAX(cpu_percent) as cpu_max FROM system_metrics WHERE ts > ?',
-      )
-      .get(Math.floor(Date.now() / 1000) - 86400);
-    db.close();
-    return NextResponse.json({ latest, history, stats_24h });
+    const db = openMetricsDb();
+    // No metrics database yet: the daemon has not sampled once.
+    if (!db) return NextResponse.json({ ...base, latest: null, history: [], disk_history: [] });
+    try {
+      const latest = db
+        .prepare(
+          `SELECT ts, cpu_percent AS cpu, ram_used_mb, ram_total_mb, swap_used_mb, swap_total_mb,
+             load_avg_1m, load_avg_5m, load_avg_15m
+           FROM system_metrics ORDER BY ts DESC LIMIT 1`,
+        )
+        .get() as LatestRow | undefined;
+
+      const disks = latest
+        ? (db
+            // One row per mount even if two samples share this ts (a second daemon, a clock step).
+            .prepare('SELECT mount, roles, used_mb, avail_mb, total_mb FROM system_disks WHERE ts = ? GROUP BY mount ORDER BY mount')
+            .all(latest.ts) as DiskRow[])
+        : [];
+
+      const history = db
+        .prepare(
+          `SELECT (ts / CAST(@bucket AS INTEGER)) * CAST(@bucket AS INTEGER) AS ts,
+             ROUND(AVG(cpu_percent), 1) AS cpu_avg,
+             ROUND(MAX(cpu_percent), 1) AS cpu_max,
+             ROUND(AVG(ram_used_mb * 100.0 / NULLIF(ram_total_mb, 0)), 1) AS ram_avg,
+             ROUND(MAX(ram_used_mb * 100.0 / NULLIF(ram_total_mb, 0)), 1) AS ram_max
+           FROM system_metrics WHERE ts > @since
+           GROUP BY ts / CAST(@bucket AS INTEGER) ORDER BY ts`,
+        )
+        .all({ bucket, since });
+
+      const diskRows = db
+        .prepare(
+          `SELECT mount, (ts / CAST(@bucket AS INTEGER)) * CAST(@bucket AS INTEGER) AS ts,
+             ROUND(AVG(used_mb * 100.0 / NULLIF(used_mb + avail_mb, 0)), 1) AS percent
+           FROM system_disks WHERE ts > @since
+           GROUP BY mount, ts / CAST(@bucket AS INTEGER) ORDER BY mount, ts`,
+        )
+        .all({ bucket, since }) as { mount: string; ts: number; percent: number | null }[];
+      const diskHistory = new Map<string, { ts: number; percent: number | null }[]>();
+      for (const r of diskRows) {
+        const points = diskHistory.get(r.mount) ?? [];
+        points.push({ ts: r.ts, percent: r.percent });
+        diskHistory.set(r.mount, points);
+      }
+
+      return NextResponse.json({
+        latest: latest
+          ? {
+              ...latest,
+              age_s: Math.max(0, now - latest.ts),
+              disks: disks.map((d) => ({
+                ...d,
+                roles: d.roles ? d.roles.split(',') : [],
+                percent: diskPercent(d.used_mb, d.avail_mb),
+              })),
+            }
+          : null,
+        ...base,
+        history,
+        disk_history: [...diskHistory].map(([mount, points]) => ({ mount, points })),
+      });
+    } finally {
+      db.close();
+    }
   } catch (e: unknown) {
     return NextResponse.json({ error: (e as Error).message }, { status: 500 });
   }

package/app/api/setup/agent-image/route.ts

@@ -45,6 +45,8 @@ export async function POST(request: NextRequest): Promise<Response> {
   }
 
   const encoder = new TextEncoder();
+  // Aborted when the client goes away (the stream's cancel()), which stops docker.
+  const abort = new AbortController();
 
   const stream = new ReadableStream({
     async start(controller) {
@@ -54,10 +56,8 @@ export async function POST(request: NextRequest): Promise<Response> {
         } catch { /* stream closed */ }
       };
 
-      const ctrl = controller as ReadableStreamDefaultController & { signal?: AbortSignal };
-
       try {
-        await downloadAgentImage({ onEvent: send, signal: ctrl.signal });
+        await downloadAgentImage({ onEvent: send, signal: abort.signal });
       } catch (e: unknown) {
         send(JSON.stringify({
           type: 'error',
@@ -66,7 +66,9 @@ export async function POST(request: NextRequest): Promise<Response> {
       }
       controller.close();
     },
-    cancel() { /* downloadAgentImage stops the docker process through the signal */ },
+    // A ReadableStreamDefaultController has no signal of its own; this is the hook the
+    // runtime calls when the client disconnects.
+    cancel() { abort.abort(); },
   });
 
   return new Response(stream, {

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

@@ -1,5 +1,6 @@
 import { NextResponse, type NextRequest } from 'next/server';
 import { openDb } from '@/lib/db';
+import { latestMetricSample } from '@/lib/metrics-db';
 import { maybeSendAlert } from '@/lib/alerts';
 import { summarizeBilling } from '@/lib/billing';
 import { listOpenClawCronJobs } from '@/lib/openclaw-cron';
@@ -83,11 +84,12 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
       source: 'runtime',
     });
 
-    const hasSystemMetrics = tableExists(db, 'system_metrics');
-    const latestMetricRow = hasSystemMetrics
-      ? (db.prepare('SELECT MAX(ts) AS latest FROM system_metrics').get() as { latest: number | null })
-      : null;
-    const latestMetricTs = getSeconds(latestMetricRow?.latest);
+    // The daemon's heartbeat: the age of its newest machine metrics sample (metrics.db, every
+    // 30 s on a timer of its own). It proves the daemon is alive — not that the OpenClaw session
+    // poll is ingesting, which runs separately and may have nothing to poll on this host.
+    const metricSample = latestMetricSample();
+    const hasSystemMetrics = metricSample.available;
+    const latestMetricTs = getSeconds(metricSample.ts);
     const latestMetricAgeSeconds = latestMetricTs ? Math.floor(Date.now() / 1000) - latestMetricTs : null;
     const runtimeFreshnessHealth: Health = !hasSystemMetrics
       ? 'ok'
@@ -98,15 +100,17 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
           : 'ok';
 
     checks.push({
-      id: 'runtime.ingestion',
-      label: 'Runtime ingestion',
+      id: 'runtime.heartbeat',
+      label: 'Daemon heartbeat',
       health: runtimeFreshnessHealth,
       value: hasSystemMetrics ? (latestMetricTs ? 'fresh' : 'missing') : 'n/d',
-      details: !hasSystemMetrics
-        ? 'Heartbeat metrics unavailable in this DB'
-        : latestMetricAgeSeconds === null
-          ? 'No heartbeat metrics detected'
-          : `last heartbeat metrics ${latestMetricAgeSeconds}s ago`,
+      details: metricSample.error
+        ? `metrics.db unreadable: ${metricSample.error}`
+        : !hasSystemMetrics
+          ? 'No machine metrics database yet'
+          : latestMetricAgeSeconds === null
+            ? 'No machine metrics sample yet'
+            : `last machine metrics sample ${latestMetricAgeSeconds}s ago`,
       source: 'runtime',
     });
 
@@ -115,11 +119,11 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
         id: 'runtime.check-freshness',
         severity: 'warning',
         source: 'runtime',
-        title: 'Check Rev4a runtime heartbeat',
+        title: 'Check that the Rev4a daemon is running',
         details: latestMetricAgeSeconds === null
-          ? 'No heartbeat metrics available from runtime.'
-          : `Heartbeat metrics stuck for ${latestMetricAgeSeconds}s (soglia ${staleThresholdSeconds}s).`,
-        actionHref: '/lineage',
+          ? 'No machine metrics sample yet.'
+          : `No machine metrics sample for ${latestMetricAgeSeconds}s (threshold ${staleThresholdSeconds}s).`,
+        actionHref: '/system',
         dismissible: false,
         createdAt,
       });
@@ -130,11 +134,11 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
       kind: 'db-freshness',
       title: 'Rev4a DB freshness',
       message: !hasSystemMetrics
-        ? 'system_metrics table unavailable: freshness runtime not verifiable.'
+        ? 'No machine metrics database: the daemon heartbeat cannot be verified.'
         : latestMetricAgeSeconds === null
-          ? 'No heartbeat metrics detected.'
-          : `Last heartbeat metrics ${latestMetricAgeSeconds}s fa (soglia ${staleThresholdSeconds}s).`,
-      resolvedMessage: 'DB Rev4a fresh again.',
+          ? 'No machine metrics sample yet.'
+          : `Last machine metrics sample ${latestMetricAgeSeconds}s ago (threshold ${staleThresholdSeconds}s).`,
+      resolvedMessage: 'Rev4a daemon sampling again.',
       stale: hasSystemMetrics ? (latestMetricAgeSeconds === null ? true : latestMetricAgeSeconds > staleThresholdSeconds) : false,
     });
 
@@ -190,7 +194,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
         severity: 'warning',
         source: 'cost',
         title: 'High usage-based cost',
-        details: `Provider usage-based today: $${billing.usageBasedCost.toFixed(2)}. Include OpenRouter e altri provider pay-per-use, non i piani fissi.`,
+        details: `Provider usage-based today: $${billing.usageBasedCost.toFixed(2)}. Counts OpenRouter and the other pay-per-use providers, not the fixed plans.`,
         actionHref: '/gateway',
         dismissible: true,
         createdAt,

package/app/components/DashboardToolbar.tsx

@@ -12,7 +12,7 @@ interface DashboardToolbarProps {
 export default function DashboardToolbar({ filter, onChange, agents = ['all'] }: DashboardToolbarProps) {
   return (
     <section className="toolbar">
-      <span className="toolbar-label">AGENTI</span>
+      <span className="toolbar-label">AGENTS</span>
 
       {agents.map((name) => (
         <button
@@ -44,7 +44,7 @@ export default function DashboardToolbar({ filter, onChange, agents = ['all'] }:
       </button>
 
       <span className="toolbar-sep">|</span>
-      <span className="toolbar-label">PERIODO</span>
+      <span className="toolbar-label">PERIOD</span>
 
       {PERIODS.map((p) => (
         <button

package/app/components/LineageGraphPage.tsx

@@ -48,9 +48,9 @@ export default function LineageGraphPage({ initialCosts }: LineageGraphPageProps
       {isMobile && (
         <div style={{ display: 'flex', gap: 8, padding: '8px 12px', borderBottom: '1px solid var(--border)', background: 'var(--bg2)' }}>
           {[
-            { key: 'graph', label: 'GRAFO' },
+            { key: 'graph', label: 'GRAPH' },
             { key: 'feed', label: 'FEED' },
-            { key: 'costs', label: 'COSTI' },
+            { key: 'costs', label: 'COSTS' },
           ].map((t) => (
             <button
               key={t.key}
@@ -101,11 +101,11 @@ export default function LineageGraphPage({ initialCosts }: LineageGraphPageProps
               <button
                 type="button"
                 className="agent-btn"
-                aria-label="Reimposta vista grafo"
+                aria-label="Reset graph view"
                 onClick={() => topologyRef.current?.resetView()}
                 style={resetButtonStyle}
               >
-                ⊙ Reimposta vista
+                ⊙ Reset view
               </button>
             </div>
             {hasSessionsLoaded ? (

package/app/components/SessionDrawer.tsx

@@ -180,27 +180,27 @@ export default function SessionDrawer({ sessionId, onClose }: SessionDrawerProps
               {truncate(session.session_id, 60)}
             </div>
             <Grid>
-              <Row label="STATO">
+              <Row label="STATUS">
                 <span style={{ color: statusColor(session.status) }}>●</span>{' '}
                 {session.status ?? 'idle'}
               </Row>
-              <Row label="TIPO">
+              <Row label="TYPE">
                 {session.session_id.includes(':cron:') ? 'cron' : 'session'}
               </Row>
               <Row label="MODEL">{session.model ?? '-'}</Row>
-              <Row label="COSTO">{formatUsdOrDash(session.cost_usd)}</Row>
+              <Row label="COST">{formatUsdOrDash(session.cost_usd)}</Row>
               <Row label="TOKEN">
                 in: {formatTokens(session.tokens_in)} out: {formatTokens(session.tokens_out)}
               </Row>
-              <Row label="INIZIO">{formatTimeFromUnixSeconds(session.started_at)}</Row>
-              <Row label="AGGIORN.">{formatTimeFromUnixSeconds(session.updated_at)}</Row>
-              <Row label="FINE">{formatTimeFromUnixSeconds(session.ended_at)}</Row>
-              <Row label="DURATA">{formatDuration(session.started_at, endedOrUpdated)}</Row>
+              <Row label="STARTED">{formatTimeFromUnixSeconds(session.started_at)}</Row>
+              <Row label="UPDATED">{formatTimeFromUnixSeconds(session.updated_at)}</Row>
+              <Row label="ENDED">{formatTimeFromUnixSeconds(session.ended_at)}</Row>
+              <Row label="DURATION">{formatDuration(session.started_at, endedOrUpdated)}</Row>
               <Row label="TASK">{truncate(session.task_preview ?? '-', 200)}</Row>
             </Grid>
           </Section>
 
-          <Section title="AZIONI RECENTI">
+          <Section title="RECENT ACTIONS">
             {events.length === 0 && <Muted>No events</Muted>}
             {events.map((evt) => (
               <div key={evt.id ?? `${evt.ts ?? 0}-${evt.type ?? 'event'}`} style={{ fontSize: 12 }}>

package/app/components/Sidebar.tsx

@@ -59,6 +59,16 @@ const NAV: NavItem[] = [
       </svg>
     ),
   },
+  {
+    href: '/system',
+    label: 'System',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <rect x="1.5" y="2.5" width="13" height="11" stroke="currentColor" strokeWidth="1.3" />
+        <path d="M4 10.5l2.5-3 2 2 3.5-4.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
   {
     href: '/workspace',
     label: 'Workspace',

package/app/components/Skeleton.tsx

@@ -11,6 +11,8 @@ type SkeletonProps = {
   inline?: boolean;
   className?: string;
   style?: React.CSSProperties;
+  /** `span` for a placeholder inside text (a `<p>`, a `<span>`), where a `<div>` is invalid HTML and the parser would split the paragraph. */
+  as?: 'div' | 'span';
 };
 
 export function Skeleton({
@@ -21,6 +23,7 @@ export function Skeleton({
   inline = false,
   className,
   style,
+  as: Tag = 'div',
 }: SkeletonProps) {
   const base: React.CSSProperties = {
     display: inline ? 'inline-block' : 'block',
@@ -35,7 +38,7 @@ export function Skeleton({
     verticalAlign: inline ? 'middle' : undefined,
     ...style,
   };
-  return <div className={className} style={base} aria-hidden="true" />;
+  return <Tag className={className} style={base} aria-hidden="true" />;
 }
 
 /** Tree skeleton — simulates file tree structure like workspace sidebar */

package/app/components/SystemCockpit.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
 import type { Costs, FilterConfig, Session, SessionEvent } from '@/lib/types';
 import { isSessionActive } from '@/lib/patterns/sessionPresentation';
 import { SkeletonLines, SkeletonMetric } from './Skeleton';
-import { Metric, StatusCard, Surface, toneFromHealth } from './ui';
+import { Metric, StatusCard, Surface, meterLevel, toneFromHealth, type MeterLevel, type Tone } from './ui';
 import { apiFetch } from '@/lib/apiFetch';
 import LiveFeed from './LiveFeed';
 import CostBreakdown from './CostBreakdown';
@@ -38,6 +38,50 @@ interface SystemHealthPayload {
   generatedAt: string;
 }
 
+interface MachineNow {
+  cpu: number | null;
+  ram: number | null;
+  disk: number | null;
+  /** `empty`: no sample yet; `stale`: the newest is older than 3 intervals; `error`: the last refresh failed (figures are the previous ones). */
+  state: 'ok' | 'empty' | 'stale' | 'error';
+}
+
+const LEVEL_TONE: Record<MeterLevel, Tone> = { ok: 'neutral', warning: 'warning', critical: 'danger' };
+
+/** The host machine right now (CPU, RAM, fullest disk) from /api/metrics; details on /system. */
+function useMachineNow(): MachineNow | null {
+  const [now, setNow] = useState<MachineNow | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  useEffect(() => {
+    const load = () => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      apiFetch('/api/metrics?range=1h', { signal: controller.signal })
+        .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+        .then((d) => {
+          const l = d.latest;
+          if (!l) { setNow({ cpu: null, ram: null, disk: null, state: 'empty' }); return; }
+          const disks: { percent: number }[] = l.disks ?? [];
+          setNow({
+            cpu: l.cpu === null ? null : Math.round(l.cpu),
+            ram: l.ram_total_mb ? Math.round((l.ram_used_mb / l.ram_total_mb) * 100) : null,
+            disk: disks.length ? Math.max(...disks.map((x) => x.percent)) : null,
+            state: l.age_s > d.interval_s * 3 ? 'stale' : 'ok',
+          });
+        })
+        .catch((e) => {
+          if (e?.name === 'AbortError') return;
+          setNow((prev) => ({ cpu: prev?.cpu ?? null, ram: prev?.ram ?? null, disk: prev?.disk ?? null, state: 'error' }));
+        });
+    };
+    load();
+    const t = setInterval(load, 30_000);
+    return () => { clearInterval(t); abortRef.current?.abort(); };
+  }, []);
+  return now;
+}
+
 interface SystemCockpitProps {
   sessions: Session[];
   events: SessionEvent[];
@@ -75,6 +119,7 @@ export default function SystemCockpit({
   loading = false,
 }: SystemCockpitProps) {
   const [systemHealth, setSystemHealth] = useState<SystemHealthPayload | null>(null);
+  const machine = useMachineNow();
 
   useEffect(() => {
     const load = () => {
@@ -108,6 +153,19 @@ export default function SystemCockpit({
   const health = systemHealth?.health ?? 'warning';
   const recommendations = systemHealth?.recommendations ?? [];
   const runtimeFreshness = runtimeCheck?.details ?? fmtAge(metrics.latest);
+  const pct = (v: number | null | undefined) => (v === null || v === undefined ? '—' : `${v}%`);
+  // Each figure with its level, on the thresholds the System page uses (CPU/RAM 85/95, disk 80/90).
+  const machineItems: { name: string; value: number | null; level: MeterLevel }[] = machine
+    ? [
+        { name: 'CPU', value: machine.cpu, level: machine.cpu === null ? 'ok' : meterLevel(machine.cpu, 85, 95) },
+        { name: 'RAM', value: machine.ram, level: machine.ram === null ? 'ok' : meterLevel(machine.ram, 85, 95) },
+        { name: 'Disk', value: machine.disk, level: machine.disk === null ? 'ok' : meterLevel(machine.disk, 80, 90) },
+      ]
+    : [];
+  const machineIssues = machineItems.filter((i) => i.level !== 'ok');
+  const machineTone: Tone = machine && machine.state !== 'ok'
+    ? 'warning'
+    : LEVEL_TONE[machineIssues.some((i) => i.level === 'critical') ? 'critical' : machineIssues.length ? 'warning' : 'ok'];
 
   return (
     <section className="cockpit">
@@ -121,6 +179,28 @@ export default function SystemCockpit({
           <div className="ui-muted" style={{ marginTop: 10, fontSize: 11 }}>Server-side monitor from `/api/system-health`.</div>
         </Surface>
         <Metric title="Active sessions" value={metrics.active} subtitle={`${sessions.length} total`} loading={loading} />
+        {/* A Surface, not a Metric: a danger Metric paints its whole value red, and only the
+            figure past its threshold should be. */}
+        <Surface as="article" tone={machineTone}>
+          <div className="ui-kicker">Machine</div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', columnGap: 12, marginTop: 14, fontSize: 15, fontWeight: 700 }}>
+            {machineItems.length ? machineItems.map((i) => (
+              <span key={i.name} className={`cockpit__machine-item cockpit__machine-item--${i.level}`}>{i.name} {pct(i.value)}</span>
+            )) : '—'}
+          </div>
+          <div className="ui-muted ui-metric-subtitle">
+            {machine?.state === 'error'
+              ? 'Metrics unavailable. '
+              : machine?.state === 'empty'
+                ? 'No samples yet. '
+                : machine?.state === 'stale'
+                  ? 'Not collecting. '
+                  : machineIssues.length
+                    ? `${machineIssues.map((i) => `${i.name} ${i.level === 'critical' ? 'critical' : 'high'}`).join(', ')}. `
+                    : ''}
+            <Link href="/system" className="ui-link">Open System →</Link>
+          </div>
+        </Surface>
         <Metric title="Usage cost" value={String(costCheck?.value ?? fmtMoney(0))} subtitle={costCheck?.details ?? `DB estimate ${fmtMoney(costs.today)}`} tone="accent" loading={systemLoading} />
       </div>
 
@@ -144,7 +224,7 @@ export default function SystemCockpit({
                     <span>{item.severity}</span>
                   </div>
                   <div className="ui-muted" style={{ marginTop: 4 }}>{item.details}</div>
-                  {item.actionHref && <Link href={item.actionHref} className="ui-link" style={{ display: 'inline-block', marginTop: 6 }}>Apri →</Link>}
+                  {item.actionHref && <Link href={item.actionHref} className="ui-link" style={{ display: 'inline-block', marginTop: 6 }}>Open →</Link>}
                 </li>
               ))}
             </ul>

package/app/components/ui/Meter.tsx

@@ -0,0 +1,34 @@
+export type MeterLevel = 'ok' | 'warning' | 'critical';
+
+/** The level a percentage falls in, given its warning and critical thresholds. */
+export function meterLevel(percent: number, warning: number, critical: number): MeterLevel {
+  if (percent >= critical) return 'critical';
+  if (percent >= warning) return 'warning';
+  return 'ok';
+}
+
+const LEVEL_LABEL: Record<MeterLevel, string> = { ok: 'ok', warning: 'high', critical: 'critical' };
+
+/**
+ * A horizontal fill for a 0-100 % share. The fill carries the level (accent → warning →
+ * danger), the track is a dim step behind it, and the level is also written out, so it
+ * never rests on colour alone.
+ */
+export function Meter({ percent, level, label }: { percent: number; level: MeterLevel; label: string }) {
+  const clamped = Math.max(0, Math.min(100, percent));
+  return (
+    <div className="ui-meter">
+      <div
+        className="ui-meter__track"
+        role="meter"
+        aria-label={label}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(clamped)}
+      >
+        <div className={`ui-meter__fill ui-meter__fill--${level}`} style={{ width: `${clamped}%` }} />
+      </div>
+      {level !== 'ok' && <span className={`ui-meter__level ui-meter__level--${level}`}>{LEVEL_LABEL[level]}</span>}
+    </div>
+  );
+}