feat(treasury): accented KPI header with synced badge and subnet earnings

Four cards per the design mock — accent-mixed borders, radial corner
tints, faded asset marks (noggles/ETH/USDC) — replacing the three plain
KPI cards. New Subnet Earnings card (all-time Morpheus USDC + claim
count, dash when unknowable). Synced badge binds to the ISR snapshot
timestamp, relative time computed client-side against the viewer's
clock. TreasuryBalance/TreasuryBalanceClient deleted (superseded).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: sktbrd

messages/en/treasury.json

@@ -2,10 +2,15 @@
   "page": {
     "title": "Treasury",
     "description": "Overview of the Gnars DAO treasury holdings and financial position",
+    "synced": "Synced {time}",
     "kpis": {
       "totalValue": "Total Treasury Value",
       "ethBalance": "ETH Balance",
-      "totalAuctions": "Total Auction Sales"
+      "totalAuctions": "Total Auction Sales",
+      "subnetEarnings": "Subnet Earnings",
+      "acrossAssets": "across {count} assets",
+      "auctionsSettled": "{count} auctions settled",
+      "morpheusClaims": "Morpheus · {count} claims"
     },
     "nftSection": {
       "title": "NFT Holdings",

messages/pt-br/treasury.json

@@ -2,10 +2,15 @@
   "page": {
     "title": "Tesouro",
     "description": "Visão geral dos holdings do tesouro da Gnars DAO e da posição financeira",
+    "synced": "Sincronizado {time}",
     "kpis": {
       "totalValue": "Valor Total do Tesouro",
       "ethBalance": "Saldo de ETH",
-      "totalAuctions": "Total de Vendas em Leilão"
+      "totalAuctions": "Total de Vendas em Leilão",
+      "subnetEarnings": "Ganhos da Subnet",
+      "acrossAssets": "em {count} ativos",
+      "auctionsSettled": "{count} leilões concluídos",
+      "morpheusClaims": "Morpheus · {count} resgates"
     },
     "nftSection": {
       "title": "Holdings de NFT",

src/app/[locale]/treasury/page.tsx

@@ -9,11 +9,11 @@ import {
 } from "@/components/skeletons/treasury-skeletons";
 import { NftHoldings } from "@/components/treasury/NftHoldings";
 import { SponsorshipYield } from "@/components/treasury/SponsorshipYield";
+import { SyncedBadge } from "@/components/treasury/SyncedBadge";
 import { TokenHoldings } from "@/components/treasury/TokenHoldings";
 import { TreasuryAllocation } from "@/components/treasury/TreasuryAllocation";
-import { TreasuryBalance } from "@/components/treasury/TreasuryBalance";
 import { TreasuryInflows } from "@/components/treasury/TreasuryInflows";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { TreasuryKpiRow } from "@/components/treasury/TreasuryKpiRow";
 import { DAO_ADDRESSES } from "@/lib/config";
 import { getBrlRateForRequest } from "@/services/exchange-rate";
 
@@ -79,47 +79,31 @@ export default async function TreasuryPage({ params }: { params: Promise<{ local
   return (
     <div className="py-8">
       <div className="space-y-8">
-        {/* Page Header */}
-        <div className="space-y-2">
-          <h1 className="text-3xl font-bold tracking-tight">{t("page.title")}</h1>
-          <p className="text-muted-foreground">{t("page.description")}</p>
+        {/* Page Header — synced badge binds to the ISR snapshot's timestamp */}
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold tracking-tight">{t("page.title")}</h1>
+            <p className="text-muted-foreground">{t("page.description")}</p>
+          </div>
+          <Suspense fallback={null}>
+            <SyncedBadge />
+          </Suspense>
         </div>
 
-        {/* KPIs */}
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-          <Card className="gap-2">
-            <CardHeader>
-              <CardTitle className="text-sm font-medium">{t("page.kpis.totalValue")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Suspense fallback={<MetricSkeleton />}>
-                <TreasuryBalance treasuryAddress={DAO_ADDRESSES.treasury} />
-              </Suspense>
-            </CardContent>
-          </Card>
-
-          <Card className="gap-2">
-            <CardHeader>
-              <CardTitle className="text-sm font-medium">{t("page.kpis.ethBalance")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Suspense fallback={<MetricSkeleton />}>
-                <TreasuryBalance treasuryAddress={DAO_ADDRESSES.treasury} metric="eth" />
-              </Suspense>
-            </CardContent>
-          </Card>
-
-          <Card className="gap-2">
-            <CardHeader>
-              <CardTitle className="text-sm font-medium">{t("page.kpis.totalAuctions")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Suspense fallback={<MetricSkeleton />}>
-                <TreasuryBalance treasuryAddress={DAO_ADDRESSES.treasury} metric="auctions" />
-              </Suspense>
-            </CardContent>
-          </Card>
-        </div>
+        {/* KPIs — one component, one snapshot load, four accented cards */}
+        <Suspense
+          fallback={
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className="rounded-xl border bg-card p-6">
+                  <MetricSkeleton />
+                </div>
+              ))}
+            </div>
+          }
+        >
+          <TreasuryKpiRow />
+        </Suspense>
 
         {/* What the treasury is MADE OF, before the income breakdown below.
             Every figure is already on this page — the point is the share, which

src/components/treasury/KpiValue.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import { CountUp } from "@/components/ui/count-up";
+import { localizeFiat } from "@/lib/i18n/fiat";
+
+interface KpiValueProps {
+  /** `null` = value unavailable — renders an em dash, never 0. */
+  value: number | null;
+  decimals: number;
+  /** Token unit ("ETH", "USDC") rendered after the number. Omit for fiat. */
+  unit?: string;
+  /** Convert to BRL on pt-br (Total Treasury Value only). */
+  fiat?: boolean;
+  brlRate?: number | null;
+  className?: string;
+}
+
+export function KpiValue({
+  value,
+  decimals,
+  unit,
+  fiat,
+  brlRate = null,
+  className,
+}: KpiValueProps) {
+  const locale = useLocale();
+  if (value == null) {
+    return <span className="font-mono text-2xl font-bold text-muted-foreground">—</span>;
+  }
+  const { value: displayValue, currency } = fiat
+    ? localizeFiat(value, locale, brlRate)
+    : { value, currency: null };
+  const prefix =
+    currency === "BRL" ? "R$ " : currency === "USD" ? (locale === "pt-br" ? "US$ " : "$") : "";
+  return (
+    <span className="flex items-baseline gap-1.5 whitespace-nowrap">
+      <span
+        className={`font-mono text-2xl font-bold tabular-nums tracking-tight ${className ?? ""}`}
+      >
+        {prefix}
+        <CountUp value={displayValue} decimals={decimals} className="tabular-nums" />
+      </span>
+      {unit && <span className="text-xs font-medium text-muted-foreground">{unit}</span>}
+    </span>
+  );
+}

src/components/treasury/SyncedBadge.tsx

@@ -0,0 +1,19 @@
+import { DAO_ADDRESSES } from "@/lib/config";
+import { loadTreasurySnapshot } from "@/services/treasury";
+import { SyncedBadgeLabel } from "./SyncedBadgeLabel";
+
+/** "Synced Xm ago" pill — bound to when the ISR treasury snapshot was computed. */
+export async function SyncedBadge() {
+  let generatedAt: number;
+  try {
+    generatedAt = (await loadTreasurySnapshot(DAO_ADDRESSES.treasury)).generatedAt;
+  } catch {
+    return null;
+  }
+  return (
+    <div className="flex items-center gap-2 rounded-lg border bg-card px-3 py-1.5 text-xs font-medium text-muted-foreground">
+      <span aria-hidden className="size-1.5 rounded-full bg-[var(--chart-2)]" />
+      <SyncedBadgeLabel generatedAt={generatedAt} />
+    </div>
+  );
+}

src/components/treasury/SyncedBadgeLabel.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useFormatter, useTranslations } from "next-intl";
+
+/**
+ * Relative time must be computed against the viewer's clock — an ISR page's
+ * server render can itself be minutes old, so the server HTML carries no time
+ * and the label fills in on mount.
+ */
+export function SyncedBadgeLabel({ generatedAt }: { generatedAt: number }) {
+  const t = useTranslations("treasury.page");
+  const format = useFormatter();
+  const [time, setTime] = useState<string | null>(null);
+  useEffect(() => {
+    setTime(format.relativeTime(generatedAt, Date.now()));
+  }, [format, generatedAt]);
+  if (time == null) return null;
+  return <span>{t("synced", { time })}</span>;
+}