@flame0510/project-aether 1.5.1 → 1.6.0

package/app/agents/ChannelManager.tsx

@@ -52,6 +52,7 @@ export default function ChannelManager({ agentId, displayName, open, onClose }:
 
   const [pending, setPending] = useState<PendingPairing[]>([]);
   const [approved, setApproved] = useState<ApprovedPairing[]>([]);
+  const [pairingError, setPairingError] = useState<string | null>(null);
   const pollRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pairingsAbortRef = useRef<AbortController | null>(null);
   const channelsAbortRef = useRef<AbortController | null>(null);
@@ -85,6 +86,7 @@ export default function ChannelManager({ agentId, displayName, open, onClose }:
         const data = await res.json();
         setPending(data.pending ?? []);
         setApproved(data.approved ?? []);
+        setPairingError(data.error ?? null);
       }
     } catch (e: any) {
       if (e?.name !== 'AbortError') { /* ignore aborted */ }
@@ -288,6 +290,7 @@ export default function ChannelManager({ agentId, displayName, open, onClose }:
           restarting={restarting}
           pending={pending}
           approved={approved}
+          pairingError={pairingError}
           approvingCode={approvingCode}
           revokingId={revokingId}
           onConnect={handleTelegramConnect}
@@ -305,7 +308,7 @@ export default function ChannelManager({ agentId, displayName, open, onClose }:
 
 function TelegramTab({
   tg, tgToken, setTgToken, loading, disconnecting, pairingsLoading, restarting,
-  pending, approved, approvingCode, revokingId,
+  pending, approved, pairingError, approvingCode, revokingId,
   onConnect, onDisconnect, onRestart, onApprove, onRevoke,
 }: {
   tg: TelegramChannel | null;
@@ -317,6 +320,7 @@ function TelegramTab({
   restarting: boolean;
   pending: PendingPairing[];
   approved: ApprovedPairing[];
+  pairingError: string | null;
   approvingCode: string | null;
   revokingId: string | null;
   onConnect: () => void;
@@ -343,6 +347,7 @@ function TelegramTab({
         <PairingSection
           pending={pending}
           approved={approved}
+          pairingError={pairingError}
           pairingsLoading={pairingsLoading}
           approvingCode={approvingCode}
           revokingId={revokingId}
@@ -389,11 +394,12 @@ function TelegramTab({
 // ── Pairing Section ──────────────────────────
 
 function PairingSection({
-  pending, approved, pairingsLoading, approvingCode, revokingId,
+  pending, approved, pairingError, pairingsLoading, approvingCode, revokingId,
   onApprove, onRevoke,
 }: {
   pending: PendingPairing[];
   approved: ApprovedPairing[];
+  pairingError: string | null;
   pairingsLoading: boolean;
   approvingCode: string | null;
   revokingId: string | null;
@@ -462,9 +468,15 @@ function PairingSection({
           )}
 
           {approved.length === 0 && (
-            <div style={{ fontSize: 10, color: 'var(--text-dim)' }}>
-              No approved senders
-            </div>
+            pairingError ? (
+              <div style={{ fontSize: 10, color: 'var(--red, #ef4444)' }}>
+                {pairingError}
+              </div>
+            ) : (
+              <div style={{ fontSize: 10, color: 'var(--text-dim)' }}>
+                No approved senders
+              </div>
+            )
           )}
         </>
       )}

package/app/agents/PageClient.tsx

@@ -343,9 +343,19 @@ export default function AgentsPageClient() {
       const res = await fetch('/api/agents/devices-summary');
       if (!res.ok || seq !== dvSummarySeq.current) return;
       const payload = await res.json();
-      const byId: Record<string, { pending: number }> = {};
-      for (const row of payload.agents ?? []) byId[row.agentId] = { pending: row.pending ?? 0 };
-      setDvSummary(byId);
+      // A row whose read failed carries `error: true` and no count: keep the previous
+      // value instead of writing zero, which would hide a request that is really waiting.
+      setDvSummary((prev) => {
+        const next: Record<string, { pending: number }> = {};
+        for (const row of payload.agents ?? []) {
+          if (row.error === true) {
+            if (prev[row.agentId]) next[row.agentId] = prev[row.agentId];
+            continue;
+          }
+          next[row.agentId] = { pending: row.pending ?? 0 };
+        }
+        return next;
+      });
     } catch { /* badges are optional */ }
   }, []);
 

package/app/api/agents/download-image/route.ts

@@ -32,6 +32,14 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
   }
   const version = (body?.version as string | undefined) ?? (await defaultDownloadVersion());
 
+  // Checked again here, next to the start: the first check and this one are separated by
+  // awaits, so two requests can pass it together. The loser of the race is refused inside
+  // downloadAgentImage, and that rejection would be swallowed by the catch below — the
+  // route would answer 202 for a download it never started.
+  if (getIsDownloading()) {
+    return NextResponse.json({ error: 'A download is already in progress' }, { status: 409 });
+  }
+
   // Start download in background — fire and forget
   downloadAgentImage({ version }).catch((e: unknown) => {
     console.error(`[download-image] OpenClaw ${version}:`, (e as Error).message);

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

@@ -11,6 +11,8 @@ import { readProviderKeys, writeProviderKeys } from './keys';
 import { dockerUnreachableReason, syncAllAgents, type SyncOutcome } from '../sync';
 import { detectProviderGatewayUrl } from '@/lib/docker-utils';
 import { getPricing } from '@/lib/model-pricing';
+import { getModelParams } from '@/lib/model-details';
+import { PROVIDER_LABELS } from '@/lib/provider-labels';
 import { loadModelsConfig, toggleModelOverride, type ModelConfigEntry } from '@/lib/model-catalogue';
 import { getLivePricing } from '@/lib/openrouter-pricing';
 import { requireAuthJWT } from '@/lib/rev4a-auth';
@@ -33,70 +35,70 @@ interface ProviderEnvConfig {
 const PROVIDER_CONFIGS: Record<string, ProviderEnvConfig> = {
   google: {
     envKey: 'PROVIDER_GOOGLE_API_KEY',
-    label: 'Google Gemini',
+    label: PROVIDER_LABELS.google,
     baseUrl: 'https://generativelanguage.googleapis.com/v1beta/openai',
     authHeader: 'x-goog-api-key',
     docsUrl: 'https://aistudio.google.com/app/apikey',
   },
   deepseek: {
     envKey: 'PROVIDER_DEEPSEEK_API_KEY',
-    label: 'DeepSeek',
+    label: PROVIDER_LABELS.deepseek,
     baseUrl: 'https://api.deepseek.com',
     authHeader: 'Authorization',
     docsUrl: 'https://platform.deepseek.com/api_keys',
   },
   openrouter: {
     envKey: 'PROVIDER_OPENROUTER_API_KEY',
-    label: 'OpenRouter',
+    label: PROVIDER_LABELS.openrouter,
     baseUrl: 'https://openrouter.ai/api',
     authHeader: 'Authorization',
     docsUrl: 'https://openrouter.ai/keys',
   },
   openai: {
     envKey: 'PROVIDER_OPENAI_API_KEY',
-    label: 'OpenAI',
+    label: PROVIDER_LABELS.openai,
     baseUrl: 'https://api.openai.com',
     authHeader: 'Authorization',
     docsUrl: 'https://platform.openai.com/api-keys',
   },
   anthropic: {
     envKey: 'PROVIDER_ANTHROPIC_API_KEY',
-    label: 'Anthropic',
+    label: PROVIDER_LABELS.anthropic,
     baseUrl: 'https://api.anthropic.com',
     authHeader: 'x-api-key',
     docsUrl: 'https://console.anthropic.com/settings/keys',
   },
   groq: {
     envKey: 'PROVIDER_GROQ_API_KEY',
-    label: 'Groq',
+    label: PROVIDER_LABELS.groq,
     baseUrl: 'https://api.groq.com/openai',
     authHeader: 'Authorization',
     docsUrl: 'https://console.groq.com/keys',
   },
   kimi: {
     envKey: 'PROVIDER_KIMI_API_KEY',
-    label: 'Kimi',
+    label: PROVIDER_LABELS.kimi,
     baseUrl: 'https://api.moonshot.cn',
     authHeader: 'Authorization',
     docsUrl: 'https://platform.kimi.com/console/api-keys',
   },
   glm: {
     envKey: 'PROVIDER_GLM_API_KEY',
-    label: 'GLM (Z.AI)',
+    label: PROVIDER_LABELS.glm,
     baseUrl: 'https://api.z.ai',
     authHeader: 'Authorization',
     docsUrl: 'https://z.ai/manage-apikey/apikey-list',
   },
   qwen: {
     envKey: 'PROVIDER_QWEN_API_KEY',
-    label: 'Qwen',
+    label: PROVIDER_LABELS.qwen,
     baseUrl: 'https://dashscope.aliyuncs.com',
     authHeader: 'Authorization',
     docsUrl: 'https://bailian.console.aliyun.com/cn-beijing?tab=model#/api-key',
   },
   rev4a: {
     envKey: 'REV4A_API_KEY',
-    label: 'REV4A API KEY',
+    label: PROVIDER_LABELS.rev4a,
     baseUrl: detectProviderGatewayUrl(),
     authHeader: 'Authorization',
     docsUrl: '',
@@ -167,6 +169,9 @@ export async function GET(request: NextRequest) {
   // containers from it, so taking a different one upstream would advertise
   // inputs the agent was never configured to accept.
   const livePricing = await getLivePricing(allModels.map((m) => m.id));
+  // Sizes for the row's "next to the price" hint: open-weight models only (see
+  // docs/dev/GATEWAY.md), absent for a model whose vendor does not publish one.
+  const paramsByModel = getModelParams();
 
   const providers = Object.entries(PROVIDER_CONFIGS).map(([key, cfg]) => {
     const providerModels = allModels.filter((m) => m.provider === key);
@@ -184,6 +189,7 @@ export async function GET(request: NextRequest) {
           if (staticPrice) entry.pricing = staticPrice;
         }
         if (m.modality) entry.modality = m.modality;
+        if (paramsByModel[m.id]) entry.params = paramsByModel[m.id];
         return entry;
       }),
       ...(providerKeys[key] ? { apiKey: providerKeys[key] } : {}),

package/app/api/models/details/route.ts

@@ -0,0 +1,30 @@
+/**
+ * GET /api/models/details?id=<model id>
+ *
+ * Everything the details modal shows for one model: the curated catalogue entry, the
+ * price (and where it is from) and the generated specs, description and benchmarks
+ * (`model-details.json`). Fetched when the modal opens rather than inlined in
+ * `/api/models`, which pages poll: descriptions are long and only one model is looked at
+ * at a time.
+ *
+ * Absent fields are simply absent — the modal hides those blocks instead of printing
+ * "n/a" — and a model the catalogue does not carry is a plain 404.
+ */
+import { NextResponse, type NextRequest } from 'next/server';
+import { requireAuthJWT } from '@/lib/rev4a-auth';
+import { getModelDetails } from '@/lib/model-details';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  const denied = await requireAuthJWT(request);
+  if (denied) return denied;
+
+  const id = request.nextUrl.searchParams.get('id');
+  if (!id) return NextResponse.json({ error: 'id query param required' }, { status: 400 });
+
+  const details = getModelDetails(id);
+  if (!details) return NextResponse.json({ error: `No model '${id}' in the catalogue` }, { status: 404 });
+
+  return NextResponse.json(details, { headers: { 'Cache-Control': 'no-store' } });
+}

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

@@ -106,7 +106,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
         ? 'Heartbeat metrics unavailable in this DB'
         : latestMetricAgeSeconds === null
           ? 'No heartbeat metrics detected'
-          : `ultimo heartbeat metrics ${latestMetricAgeSeconds}s fa`,
+          : `last heartbeat metrics ${latestMetricAgeSeconds}s ago`,
       source: 'runtime',
     });
 
@@ -157,7 +157,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
         severity: 'warning',
         source: 'runtime',
         title: 'Review recent errors',
-        details: `${eventErrorCount} error events nelle ultime 24h.`,
+        details: `${eventErrorCount} error events in the last 24h.`,
         actionHref: '/lineage',
         dismissible: true,
         createdAt,
@@ -181,7 +181,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
       label: 'Usage-based cost today',
       health: billing.usageBasedCost > 10 ? 'warning' : 'ok',
       value: `$${billing.usageBasedCost.toFixed(2)}`,
-      details: `DB estimate $${billing.dbEstimatedCost.toFixed(2)}; fixed ${billing.buckets.fixed.sessions} sessioni; credits ${billing.buckets.credits.sessions} sessioni`,
+      details: `DB estimate $${billing.dbEstimatedCost.toFixed(2)}; fixed ${billing.buckets.fixed.sessions} sessions; credits ${billing.buckets.credits.sessions} sessions`,
       source: 'cost',
     });
     if (billing.usageBasedCost > 10) {

package/app/api/update-check/route.ts

@@ -8,15 +8,26 @@ import { requireAuthJWT } from '@/lib/rev4a-auth';
 // package name is the single source of truth, so never hardcode it elsewhere.
 const FALLBACK_PKG_NAME = '@flame0510/project-aether';
 
-function getPackageInfo() {
-  try {
-    // Resolve relative to the project root (two levels above .next)
-    const pkgPath = join(process.cwd(), 'package.json');
-    const raw = readFileSync(pkgPath, 'utf-8');
-    return JSON.parse(raw);
-  } catch {
-    return { version: '0.0.0', name: FALLBACK_PKG_NAME };
+/**
+ * The installed package's name and version. `version` is **null when it cannot be read**
+ * — never a placeholder like `0.0.0`: during `rev4a update` npm rewrites this very file,
+ * and a transient read failure must not look like a version that changed.
+ */
+function getPackageInfo(): { version: string | null; name: string } {
+  // cwd first (systemd sets WorkingDirectory), then relative to this module: a global
+  // install started from elsewhere still finds its own package.json.
+  const candidates = [join(process.cwd(), 'package.json'), join(__dirname, '..', '..', '..', 'package.json')];
+  for (const pkgPath of candidates) {
+    try {
+      const parsed = JSON.parse(readFileSync(pkgPath, 'utf-8')) as { version?: unknown; name?: unknown };
+      const version = typeof parsed.version === 'string' && parsed.version ? parsed.version : null;
+      const name = typeof parsed.name === 'string' && parsed.name ? parsed.name : FALLBACK_PKG_NAME;
+      if (version) return { version, name };
+    } catch {
+      // try the next candidate
+    }
   }
+  return { version: null, name: FALLBACK_PKG_NAME };
 }
 
 interface CachedResult {
@@ -38,11 +49,13 @@ export async function GET(request: Request): Promise<NextResponse> {
   const check = url.searchParams.get('check') === '1';
 
   const pkg = getPackageInfo();
-  const installed = pkg.version || '0.0.0';
+  const installed = pkg.version;
   let latest: string | null = null;
   let updateAvailable = false;
 
-  if (check) {
+  // Nothing to compare when the installed version is unknown: answer that, rather than
+  // offering an update against a placeholder.
+  if (check && installed) {
     const now = Date.now();
     if (cache && now - cache.checkedAt < CACHE_TTL_MS) {
       latest = cache.latest;

package/app/components/SessionDrawer.tsx

@@ -146,7 +146,7 @@ export default function SessionDrawer({ sessionId, onClose }: SessionDrawerProps
       <button
         type="button"
         onClick={onClose}
-        aria-label="Chiudi"
+        aria-label="Close"
         style={{
           position: 'absolute',
           top: isMobile ? 16 : 14,
@@ -185,9 +185,9 @@ export default function SessionDrawer({ sessionId, onClose }: SessionDrawerProps
                 {session.status ?? 'idle'}
               </Row>
               <Row label="TIPO">
-                {session.session_id.includes(':cron:') ? 'cron' : 'sessione'}
+                {session.session_id.includes(':cron:') ? 'cron' : 'session'}
               </Row>
-              <Row label="MODELLO">{session.model ?? '-'}</Row>
+              <Row label="MODEL">{session.model ?? '-'}</Row>
               <Row label="COSTO">{formatUsdOrDash(session.cost_usd)}</Row>
               <Row label="TOKEN">
                 in: {formatTokens(session.tokens_in)} out: {formatTokens(session.tokens_out)}
@@ -215,7 +215,7 @@ export default function SessionDrawer({ sessionId, onClose }: SessionDrawerProps
             ))}
           </Section>
 
-          <Section title="SESSIONI FIGLIE">
+          <Section title="CHILD SESSIONS">
             {children.length === 0 && <Muted>No child sessions</Muted>}
             {children.map((child) => (
               <div key={child.session_id} style={{ fontSize: 12 }}>

package/app/components/VersionBanner.tsx

@@ -5,14 +5,22 @@
  *
  * The update is spawned by `POST /api/update-check` and restarts the server, so this
  * component cannot be told the outcome by the response. It records what it asked for,
- * waits for the server to answer again, and on the next mount compares: if the
- * installed version moved it was updated, and if the same update is still offered it
- * did not complete (the log file says why).
+ * waits for the server to answer again, and on the next mount compares.
+ *
+ * Two rules learned the hard way (2026-09-23):
+ *  - a **success** is only a version that is *readable* and different. During the update
+ *    npm rewrites `package.json`, and a read that fails used to answer `0.0.0`, which read
+ *    as "the version moved" — the banner then said "Updated to v0.0.0" and reloaded in the
+ *    middle of the install.
+ *  - the banner never reloads **blindly**: if the version has not moved by the time the
+ *    wait is over, it says the update has not finished (it may still be running, or it
+ *    failed) and offers a Reload, instead of pretending.
  */
 import { useEffect, useState } from 'react';
+import { Button } from '../components/ui';
 
 interface VersionInfo {
-  installed: string;
+  installed: string | null;
   latest: string | null;
   updateAvailable: boolean;
   log?: string;
@@ -22,7 +30,7 @@ const DISMISS_KEY = 'rev4a-update-dismissed';
 /** What we asked for and from which version, so the next mount can judge the outcome. */
 const PENDING_KEY = 'rev4a-update-pending';
 
-/** How long to poll for the restart before reloading anyway. */
+/** How long to wait for the restart before saying the update has not finished. */
 const WAIT_MS = 120_000;
 
 interface Pending { target: string; from: string }
@@ -38,6 +46,11 @@ function readPending(): Pending | null {
   }
 }
 
+/** A version we can believe: present and not a placeholder. */
+function usableVersion(v: string | null | undefined): v is string {
+  return typeof v === 'string' && v.length > 0 && v !== '0.0.0';
+}
+
 export default function VersionBanner() {
   const [info, setInfo] = useState<VersionInfo | null>(null);
   const [dismissed, setDismissed] = useState(true);
@@ -52,27 +65,26 @@ export default function VersionBanner() {
       .then((d: VersionInfo) => {
         if (!active) return;
         const pending = readPending();
-        // Back from an update: did the installed version actually move?
-        if (pending && d.installed !== pending.from) {
+        // Back from an update: did a *readable* version actually replace the old one?
+        if (pending && usableVersion(d.installed) && d.installed !== pending.from) {
           sessionStorage.removeItem(PENDING_KEY);
           setUpdateOk(`Updated to v${d.installed}`);
-          setTimeout(() => { if (active) window.location.reload(); }, 2000);
+          setTimeout(() => { if (active) window.location.reload(); }, 2500);
           return;
         }
         if (pending) {
-          sessionStorage.removeItem(PENDING_KEY);
+          // Keep the record: a reload asks again. Say what we know, claim nothing.
           setInfo(d);
           setDismissed(false);
           setUpdateError(
-            `The update to v${pending.target} did not complete: Rev4a is still on v${d.installed}.`
-            + ` See ${d.log ?? 'update.log'} in the Rev4a data directory.`,
+            `The update to v${pending.target} has not finished: ${usableVersion(d.installed) ? `Rev4a is still on v${d.installed}` : 'Rev4a is not answering with a version'}.`
+            + ` It may still be running, or it failed — see ${d.log ?? 'update.log'} in the Rev4a data directory, then reload.`,
           );
           return;
         }
-        if (d.updateAvailable) {
+        if (d.updateAvailable && usableVersion(d.latest)) {
           setInfo(d);
-          const saved = localStorage.getItem(DISMISS_KEY);
-          setDismissed(saved === d.latest);
+          setDismissed(localStorage.getItem(DISMISS_KEY) === d.latest);
         }
       })
       .catch(() => {});
@@ -80,14 +92,12 @@ export default function VersionBanner() {
   }, []);
 
   function handleDismiss() {
-    if (info?.latest) {
-      localStorage.setItem(DISMISS_KEY, info.latest);
-    }
+    if (info?.latest) localStorage.setItem(DISMISS_KEY, info.latest);
     setDismissed(true);
   }
 
   async function handleUpdate() {
-    if (!info) return;
+    if (!info || !usableVersion(info.installed)) return;
     setUpdating(true);
     setUpdateError(null);
     setUpdateOk(null);
@@ -106,16 +116,22 @@ export default function VersionBanner() {
       sessionStorage.setItem(PENDING_KEY, JSON.stringify({ target: info.latest ?? '', from: info.installed }));
       localStorage.removeItem(DISMISS_KEY);
       setUpdateOk('Update started. Rev4a is restarting…');
-      // The server goes down and comes back on the new version: wait for its answer,
-      // then reload. A timeout reloads too — the next mount reports the outcome.
+      // The server goes down and comes back on the new version: reload once it answers
+      // with a different, readable version. If it never does, say so rather than reloading
+      // into a state the operator cannot interpret.
       const deadline = Date.now() + WAIT_MS;
       const poll = async () => {
-        if (Date.now() > deadline) { window.location.reload(); return; }
         try {
           const r = await fetch('/api/update-check', { cache: 'no-store' });
           const d = (await r.json()) as VersionInfo;
-          if (d.installed !== info.installed) { window.location.reload(); return; }
+          if (usableVersion(d.installed) && d.installed !== info.installed) { window.location.reload(); return; }
         } catch { /* the server is down for the update: expected */ }
+        if (Date.now() > deadline) {
+          setUpdating(false);
+          setUpdateOk(null);
+          setUpdateError('The update has not finished after two minutes. It may still be running — reload in a moment, or check update.log.');
+          return;
+        }
         setTimeout(poll, 3000);
       };
       setTimeout(poll, 3000);
@@ -138,30 +154,31 @@ export default function VersionBanner() {
             <span className="update-banner__ok">{updateOk}</span>
           ) : updateError ? (
             <span className="update-banner__err">{updateError}</span>
-          ) : info ? (
+          ) : (
             <>
               <span className="update-banner__label">Update available</span>
               <span className="update-banner__sep">&mdash;</span>
-              <span className="update-banner__version">v{info.latest}</span>
-              <span className="update-banner__sep">(installed: v{info.installed})</span>
+              <span className="update-banner__version">v{info?.latest}</span>
+              <span className="update-banner__sep">(installed: v{info?.installed})</span>
             </>
-          ) : null}
+          )}
         </span>
 
         {!updateOk && (
           <div className="update-banner__actions">
             {updateError ? (
-              <button className="ui-btn ui-btn--primary ui-btn--sm" onClick={handleUpdate} disabled={updating}>
+              <Button variant="primary" size="sm" onClick={handleUpdate} disabled={updating}>
                 {updating ? 'Updating…' : 'Retry'}
-              </button>
+              </Button>
             ) : (
-              <button className="ui-btn ui-btn--primary ui-btn--sm" onClick={handleUpdate} disabled={updating}>
+              <Button variant="primary" size="sm" onClick={handleUpdate} disabled={updating}>
                 {updating ? 'Updating…' : 'Update now'}
-              </button>
+              </Button>
+            )}
+            {updateError && (
+              <Button variant="secondary" size="sm" onClick={() => window.location.reload()}>Reload</Button>
             )}
-            <button className="ui-btn ui-btn--ghost ui-btn--sm" onClick={handleDismiss}>
-              Dismiss
-            </button>
+            <Button variant="ghost" size="sm" onClick={handleDismiss}>Dismiss</Button>
           </div>
         )}
       </div>

package/app/components/ui/Metric.tsx

@@ -9,11 +9,16 @@ interface MetricProps {
   subtitle?: ReactNode;
   tone?: Tone;
   loading?: boolean;
+  /**
+   * `sm` is the compact form for grids inside a dialog or a dense panel: same anatomy,
+   * smaller value and tighter spacing, so four of them fit on one line.
+   */
+  size?: 'md' | 'sm';
 }
 
-export function Metric({ title, value, subtitle, tone = 'neutral', loading = false }: MetricProps) {
+export function Metric({ title, value, subtitle, tone = 'neutral', loading = false, size = 'md' }: MetricProps) {
   return (
-    <Surface as="article" tone={tone}>
+    <Surface as="article" tone={tone} className={size === 'sm' ? 'ui-metric--sm' : undefined}>
       <div className="ui-kicker">{title}</div>
       <div className="ui-metric-value">{loading ? <SkeletonMetric /> : value}</div>
       {subtitle !== undefined && <div className="ui-muted ui-metric-subtitle">{loading ? <SkeletonLines count={1} /> : subtitle}</div>}