feat(treasury): accented KPI header with synced badge, subnet earnings (#275)

* docs(spec): treasury KPI header redesign

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

* docs(plan): treasury KPI header implementation plan

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

* feat(treasury): snapshot metadata, auction count, subnet earnings data

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

* 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>

* fix(treasury): honest subnet and auction figures for the KPI cards

Runtime verification caught both: splits pay through the warehouse, so
the split-address filter summed zero — subnet earnings now walk
warehouse→treasury USDC transfers and keep the ones the final split
emitted in, the ledger's own attribution rule. And the settled-auction
count saturated at one subgraph page (Gnars is past 2000 auctions) —
now cursor-paged by id.

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

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: sktbrd

docs/INDEX.md

@@ -44,6 +44,7 @@ This is the canonical entry point for project documentation. Everything below sh
 - `docs/superpowers/specs/2026-03-16-vote-card-delegation-breakdown-design.md` — vote card own vs delegated breakdown
 - `docs/superpowers/specs/2026-04-24-proposal-template-fields-design.md` — structured input fields per proposal template (replaces markdown skeleton)
 - `docs/superpowers/specs/2026-05-11-i18n-en-ptbr-design.md` — i18n EN + PT-BR design
+- `docs/superpowers/specs/2026-08-18-treasury-kpi-header-design.md` — treasury KPI header: 4 accented cards + synced badge + subnet earnings
 
 ## Research
 

docs/superpowers/plans/2026-08-18-treasury-kpi-header.md

@@ -0,0 +1,66 @@
+# Treasury KPI header redesign
+
+Apply the evolved top section from the Claude Design mock
+(`Treasury.dc.html`, project `8b9a918a-e570-4c4f-ac96-32db36a3ebf6`) to
+`/treasury`. Scope is the header row and the KPI cards only — everything below
+(Allocation, Inflows, Sponsorship, charts, Token Holdings, NFT grid) stays as
+shipped in #273/#274. User approved this scope and the design below.
+
+## Header
+
+Title + description unchanged on the left. On the right, a "Synced Xm ago"
+pill: green dot, muted border/background, bound to the timestamp the treasury
+snapshot was generated (the page ISR-revalidates every 300s, so the badge honestly
+reads minutes, not hours). Server-rendered relative time; no client ticking.
+i18n: EN "Synced {time} ago" / PT "Sincronizado há {time}" via next-intl's
+relative formatting, both locales in the same change.
+
+## KPI row: one component, four cards
+
+Replace the three inline `<Card>` blocks in `page.tsx` with a single server
+component `TreasuryKpiRow` under one `Suspense`. It loads
+`loadTreasurySnapshot` once (today's three cards already share that load via
+React `cache`) plus the new `loadSubnetEarnings`, and renders four cards:
+
+| Card | Value | Note | Accent | Corner mark |
+| --- | --- | --- | --- | --- |
+| Total Treasury Value | usdTotal (fiat — BRL on PT, existing rule + fallback note) | "across {n} assets" (priced snapshot assets incl. ETH) | red | `public/red_noggles.png`, opacity .2 |
+| ETH Balance | ethBalance ETH | ETH in USD (fiat — converts on PT) | blue | ETH diamond SVG from mock |
+| Total Auction Sales | totalAuctionSales ETH | "{n} auctions settled" (real settled count from subgraph, not the mock's 12) | yellow | ETH diamond SVG |
+| Subnet Earnings | total USDC (token quantity — never converts to BRL, same rule as "6.8003 ETH") | "Morpheus · {n} claims" | green | USDC circle SVG from mock, value text green |
+
+Card chrome, per the mock: border `color-mix(in oklab, <accent> 26%, <default border>)`,
+radial tint `color-mix(in oklab, <accent> 16%, transparent)` from the bottom-right
+corner, mono tabular values (CountUp animation kept), 12px muted unit and note.
+Accents come from theme tokens/`color-mix`, not hardcoded dark-only colors, so
+light mode degrades gracefully. Grid: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`.
+
+## New data: subnet earnings
+
+The inflows feed is windowed (Alchemy pages of 50), so it cannot honestly sum
+all-time earnings. New service function `loadSubnetEarnings()` in
+`src/services/treasury-inflows.ts`: Alchemy `getAssetTransfers` filtered
+`fromAddress = SUBNET_FINAL_SPLIT`, `toAddress = treasury`, category erc20
+(USDC), paginated to exhaustion (the claim history is small). Returns
+`{ totalUsdc, claimCount } | null`; `null` (fetch failure or no ALCHEMY_KEY)
+renders the card with an em dash value and no claim note — never $0. React
+`cache` for per-request dedup; page ISR (300s) is the refresh cadence.
+
+Auctions settled count: total count of settled auctions from the existing
+subgraph query path (aggregate count, not the mock's placeholder 12).
+
+## Error handling
+
+- Snapshot load failure: em-dash values in the affected cards (the page's
+  "unavailable, not zero" convention), notes omitted.
+- Subnet earnings `null`: dash, no fabricated zero.
+- BRL rate outage: existing `FiatFallbackNote` appears in the Total card (the
+  only KPI card showing converted fiat as its main value).
+
+## Testing
+
+- Unit: none new beyond existing fiat tests (presentation component + a fetch
+  aggregator; the aggregation math is a two-line reduce).
+- Runtime: dev captures EN + PT, desktop + mobile, light + dark chrome checked
+  in desktop capture; gates (tsc/eslint/prettier) clean; i18n parity for the
+  new strings in both locales.

docs/superpowers/specs/2026-08-18-treasury-kpi-header-design.md

@@ -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/en/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",

messages/pt-br/treasury.json

@@ -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/app/[locale]/treasury/page.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/KpiValue.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/SyncedBadge.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>;
+}