feat(stake): amplification ladder and roadmap on /stake

The subnet milestone ladder said what a staker EARNS (featured wall /
community drop / IRL event) while the stake dialog's own disclaimer said
"rewards accrue to the subnet, not to individual stakers". It also did not
match the campaign brief. Replace it with the axis the campaign actually
commits to: what Gnars delivers to amplify Morpheus as the subnet grows.

Only the 10k anchor is locked in, so milestones now carry a firmness label
(committed / proposed) rather than reading as six firm promises. The two
ungated milestones (subnet live, first 10 backers) are dropped.

Adds the four-phase roadmap as its own card. Phase 4 ships with an explicit
"planned / not guaranteed / subject to change" hedge in both locales — that
hedge is what makes an airdrop tease publishable.

- stake-milestones.ts: 6 amount-gated tiers + MilestoneFirmness
- stake-roadmap.ts + RoadmapSection.tsx: new
- progressToEvent no longer names the IRL event; interpolates the goal
- copy in EN and PT-BR, pt-BR following the repo's "a subnet" / "MOR em
  stake" conventions

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: sktbrd

messages/en/stake.json

@@ -276,24 +276,56 @@
       }
     },
     "subnet": {
-      "title": "Stake MOR behind the Gnars subnet",
+      "title": "Co-sponsor the Gnars Builder subnet",
       "desc": "This one pays you nothing. Staked MOR powers the Gnars Builder subnet, which funds what the DAO ships. Your MOR stays yours and unlocks 7 days after you stake.",
       "morStaked": "MOR staked",
       "goal": "goal {n, number}",
       "cta": "Back the subnet",
+      "milestonesTitle": "Amplification milestones",
+      "milestonesNote": "As staked MOR grows, Gnars amplifies Morpheus — Gnars's own commitment, building on Morpheus's open protocol.",
+      "firmness": {
+        "committed": "committed",
+        "proposed": "proposed"
+      },
       "milestones": {
-        "live": "Subnet live: Gnars is a Morpheus Builder",
-        "backers10": "First 10 backers on board",
-        "10k": "{n, number} MOR staked: featured stakers wall",
-        "50k": "{n, number} MOR staked: community drop",
-        "100k": "{n, number} MOR staked: IRL Gnars event"
+        "10k": "{n, number} MOR staked: Morpheus ad on Gnars TV",
+        "15k": "{n, number} MOR staked: Morpheus on the Gnars banner + a pinned post",
+        "25k": "{n, number} MOR staked: Morpheus featured in a Gnars edit",
+        "30k": "{n, number} MOR staked: Morpheus swag in the Skater Vaults",
+        "50k": "{n, number} MOR staked: Morpheus at an IRL Gnars activation",
+        "100k": "{n, number} MOR staked: Morpheus flagship spotlight"
+      },
+      "roadmap": {
+        "title": "What comes next",
+        "status": {
+          "live": "live",
+          "upcoming": "upcoming"
+        },
+        "phases": {
+          "staking": {
+            "title": "Staking frontend",
+            "desc": "Stake MOR behind the Gnars Builder subnet. Live now."
+          },
+          "agent": {
+            "title": "BobGnarly on Morpheus",
+            "desc": "Gnars's AI agent moves onto Morpheus; the DAO becomes a real user of the network."
+          },
+          "inference": {
+            "title": "Gnarly inference",
+            "desc": "A private, uncensored inference platform built on Morpheus rails."
+          },
+          "airdrop": {
+            "title": "$gnars airdrop",
+            "desc": "Planned: a $gnars airdrop for subnet stakers. Not guaranteed and subject to change; if it happens, early stakers are first in line."
+          }
+        }
       },
       "dialog": {
         "title": "Back Gnars on Morpheus",
         "badge": "MOR · Base",
         "desc": "Lock MOR into the Gnars Builder subnet to back the crew with real capital. Your principal stays yours — withdrawable after a 7-day lock. Self-custody on Base.",
-        "milestonesLabel": "Staking milestones",
-        "progressToEvent": "{pct}% of the way to the IRL event",
+        "milestonesLabel": "Amplification milestones",
+        "progressToEvent": "{pct}% of the way to {n, number} MOR staked",
         "totalStaked": "Total staked",
         "yourStake": "Your stake",
         "balance": "Balance:",

messages/pt-br/stake.json

@@ -276,24 +276,56 @@
       }
     },
     "subnet": {
-      "title": "Faça stake de MOR pra bancar a subnet Gnars",
+      "title": "Co-patrocine a subnet Gnars Builder",
       "desc": "Esse aqui não te paga nada. O MOR em stake sustenta a subnet Gnars Builder, que financia o que a DAO entrega. Seu MOR continua seu e libera 7 dias depois do stake.",
       "morStaked": "MOR em stake",
       "goal": "meta {n, number}",
       "cta": "Apoiar a subnet",
+      "milestonesTitle": "Metas de amplificação",
+      "milestonesNote": "Conforme o MOR em stake cresce, a Gnars amplifica a Morpheus — compromisso unilateral da Gnars, construindo sobre o protocolo aberto da Morpheus.",
+      "firmness": {
+        "committed": "confirmado",
+        "proposed": "proposto"
+      },
       "milestones": {
-        "live": "Subnet no ar: a Gnars virou Builder na Morpheus",
-        "backers10": "Primeiros 10 apoiadores a bordo",
-        "10k": "{n, number} MOR em stake: mural dos apoiadores",
-        "50k": "{n, number} MOR em stake: drop pra comunidade",
-        "100k": "{n, number} MOR em stake: evento Gnars presencial"
+        "10k": "{n, number} MOR em stake: anúncio da Morpheus na Gnars TV",
+        "15k": "{n, number} MOR em stake: Morpheus no banner da Gnars + post fixado",
+        "25k": "{n, number} MOR em stake: Morpheus em destaque num edit da Gnars",
+        "30k": "{n, number} MOR em stake: swag da Morpheus nos Skater Vaults",
+        "50k": "{n, number} MOR em stake: Morpheus numa ativação IRL da Gnars",
+        "100k": "{n, number} MOR em stake: spotlight principal da Morpheus"
+      },
+      "roadmap": {
+        "title": "O que vem depois",
+        "status": {
+          "live": "no ar",
+          "upcoming": "a seguir"
+        },
+        "phases": {
+          "staking": {
+            "title": "Frontend de staking",
+            "desc": "Faça stake de MOR na subnet Gnars Builder. No ar agora."
+          },
+          "agent": {
+            "title": "BobGnarly na Morpheus",
+            "desc": "O agente de IA da Gnars migra pra Morpheus; a DAO vira usuária de verdade da rede."
+          },
+          "inference": {
+            "title": "Inference Gnarly",
+            "desc": "Uma plataforma de inference privada e sem censura sobre os trilhos da Morpheus."
+          },
+          "airdrop": {
+            "title": "Airdrop de $gnars",
+            "desc": "Planejado: um airdrop de $gnars pros stakers da subnet. Não garantido e sujeito a mudança; se acontecer, quem stakou cedo tem prioridade."
+          }
+        }
       },
       "dialog": {
         "title": "Apoie os Gnars na Morpheus",
         "badge": "MOR · Base",
         "desc": "Trave MOR na subnet Gnars Builder para apoiar a crew com capital de verdade. Seu principal continua seu — pode ser sacado depois de um bloqueio de 7 dias. Autocustódia na Base.",
-        "milestonesLabel": "Metas de stake",
-        "progressToEvent": "{pct}% do caminho até o evento IRL",
+        "milestonesLabel": "Metas de amplificação",
+        "progressToEvent": "{pct}% do caminho até {n, number} MOR em stake",
         "totalStaked": "Total em stake",
         "yourStake": "Seu stake",
         "balance": "Saldo:",

src/components/stake/GnarsStakeDialog.tsx

@@ -26,12 +26,7 @@ import { useGnarsSubnetStake } from "@/hooks/use-gnars-subnet-stake";
 import { useUserAddress } from "@/hooks/use-user-address";
 import { toIntlLocale } from "@/lib/i18n/format";
 import { SUBNET_MIN_DEPOSIT_MOR } from "@/lib/morpheus-builder";
-import {
-  isMilestoneDone,
-  SUBNET_GOAL_MOR,
-  SUBNET_MILESTONES,
-  type StakeMilestone,
-} from "@/lib/stake-milestones";
+import { isMilestoneDone, SUBNET_GOAL_MOR, SUBNET_MILESTONES } from "@/lib/stake-milestones";
 import { cn } from "@/lib/utils";
 
 // Locale-aware on purpose: these MOR figures sit next to a CountUp and a section
@@ -41,11 +36,10 @@ const fmt = (n: number, locale: string, d = 4) =>
   n.toLocaleString(locale, { maximumFractionDigits: d });
 const shortMor = (n: number) => (n >= 1000 ? `${n / 1000}k` : String(n));
 
-// MOR-denominated milestones become tick marks on the progress bar.
-const MOR_TICKS = SUBNET_MILESTONES.filter(
-  (m): m is StakeMilestone & { amountMor: number } =>
-    typeof m.amountMor === "number" && m.amountMor > 0,
-);
+// Milestones become tick marks on the progress bar. Every milestone is
+// MOR-denominated since the ladder became the amplification ladder — the two
+// ungated entries this used to filter out (subnet live, first 10 backers) are gone.
+const MOR_TICKS = SUBNET_MILESTONES.filter((m) => m.amountMor > 0);
 
 type Props = { open: boolean; onOpenChange: (open: boolean) => void };
 
@@ -162,7 +156,7 @@ export function GnarsStakeDialog({ open, onOpenChange }: Props) {
                 </div>
               </div>
               <span className="rounded-full bg-emerald-500/15 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300">
-                {t("dialog.progressToEvent", { pct: pctLabel })}
+                {t("dialog.progressToEvent", { pct: pctLabel, n: SUBNET_GOAL_MOR })}
               </span>
             </div>
 
@@ -227,7 +221,13 @@ export function GnarsStakeDialog({ open, onOpenChange }: Props) {
                         done ? "font-semibold text-foreground" : "text-muted-foreground",
                       )}
                     >
-                      {t("milestones." + m.id, { n: m.amountMor ?? 0 })}
+                      {t("milestones." + m.id, { n: m.amountMor })}{" "}
+                      {/* Same committed/proposed label the page ladder carries.
+                          Dropping it here would make the dialog read as six firm
+                          promises while the section behind it says five are not. */}
+                      <span className="text-[10px] font-semibold tracking-wide whitespace-nowrap text-muted-foreground uppercase">
+                        · {t("firmness." + m.firmness)}
+                      </span>
                     </span>
                   </li>
                 );

src/components/stake/RoadmapSection.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+// The four-phase roadmap, sitting directly under SubnetSection because it is the
+// same story continued: the ladder above says what Gnars ships as the subnet
+// grows, this says where the subnet itself is going.
+//
+// Its own card rather than a block inside SubnetSection — that card already
+// carries a progress bar, a six-item ladder and the page's stake CTA, and a
+// roadmap appended below the CTA would read as fine print under the button.
+//
+// No dates. A roadmap that prints quarters ages into a liability the first time
+// one slips, so `status` (live / upcoming) is the only state a phase carries.
+// Status and copy both live in messages/{en,pt-br}/stake.json; STAKE_ROADMAP is
+// data only, the same split SUBNET_MILESTONES uses.
+import { useTranslations } from "next-intl";
+import { RevealItem, RevealSection } from "@/components/stake/Reveal";
+import { SectionHeader } from "@/components/stake/SectionHeader";
+import { CARD, CARD_PAD, MICRO, MUTED } from "@/components/stake/stake-ui";
+import { STAKE_ROADMAP } from "@/lib/stake-roadmap";
+import { cn } from "@/lib/utils";
+
+export function RoadmapSection() {
+  const t = useTranslations("stake.page.subnet.roadmap");
+
+  return (
+    <RevealSection className={cn(CARD, CARD_PAD, "space-y-4")}>
+      <RevealItem>
+        <SectionHeader title={t("title")} />
+      </RevealItem>
+
+      <RevealItem delay={50}>
+        <ol className="space-y-4">
+          {STAKE_ROADMAP.map((p) => {
+            const live = p.status === "live";
+            return (
+              <li key={p.id} className="flex items-start gap-2.5">
+                {/* Same dot language as the milestone ladder above: filled = real
+                    now, hollow = not yet. Colourless for the same reason — green
+                    belongs to the progress fill and the MOR total, nowhere else. */}
+                <span
+                  aria-hidden
+                  className={cn(
+                    "mt-1.5 size-1.5 shrink-0 rounded-full",
+                    live ? "bg-foreground/70" : "border border-foreground/30",
+                  )}
+                />
+                <div className="min-w-0">
+                  <p className="text-sm font-semibold">
+                    {t(`phases.${p.id}.title`)}{" "}
+                    <span
+                      className={cn(
+                        "text-[10px] font-medium tracking-wide whitespace-nowrap uppercase",
+                        MICRO,
+                      )}
+                    >
+                      · {t(`status.${p.status}`)}
+                    </span>
+                  </p>
+                  {/* Phase 4 carries an explicit "planned / not guaranteed"
+                      hedge in both locales. It is what makes an airdrop tease
+                      publishable — see src/lib/stake-roadmap.ts. */}
+                  <p className={cn("mt-0.5 max-w-prose text-sm", MUTED)}>
+                    {t(`phases.${p.id}.desc`)}
+                  </p>
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+      </RevealItem>
+    </RevealSection>
+  );
+}

src/components/stake/StakePageContent.tsx

@@ -27,6 +27,7 @@ import { CharacterSelector } from "@/components/stake/CharacterSelector";
 import { MorLootbox } from "@/components/stake/MorLootbox";
 import { PositionsHub } from "@/components/stake/PositionsHub";
 import { RevealItem, RevealSection } from "@/components/stake/Reveal";
+import { RoadmapSection } from "@/components/stake/RoadmapSection";
 import { SectionHeader } from "@/components/stake/SectionHeader";
 import {
   CARD,
@@ -311,6 +312,8 @@ export function StakePageContent({ initialRider }: { initialRider?: RiderId }) {
         </RevealSection>
 
         <SubnetSection />
+
+        <RoadmapSection />
       </div>
 
       {/* One floater, and only when the wallet actually has something to

src/components/stake/SubnetSection.tsx

@@ -15,7 +15,11 @@
 // dots" rule because they encode real state — done vs pending — rather than
 // decorating a value that already carries its own unit.
 //
-// SUBNET_MILESTONES is campaign DATA only (id + threshold). The copy lives in
+// The milestone ladder is what Gnars DELIVERS to amplify Morpheus as the subnet
+// grows — not what a staker earns. See src/lib/stake-milestones.ts for why the
+// distinction matters and why only the 10k anchor reads as `committed`.
+//
+// SUBNET_MILESTONES is campaign DATA only (id + threshold + firmness). The copy lives in
 // `stake.page.subnet.milestones.<id>` so the checklist speaks the page's language
 // — it used to print English in the middle of a Portuguese section — and the
 // thresholds inside those labels are interpolated as `{n, number}`, so pt-BR gets
@@ -99,7 +103,13 @@ export function SubnetSection() {
           />
         </div>
 
-        <ul className="mt-5 space-y-2">
+        {/* The ladder needs naming and framing before it is read: without these
+            two lines it looks like a reward schedule, which is the other axis
+            entirely and the one the stake dialog's disclaimer contradicts. */}
+        <h3 className="mt-6 text-sm font-semibold">{t("milestonesTitle")}</h3>
+        <p className={cn("mt-1 max-w-prose text-xs", MUTED)}>{t("milestonesNote")}</p>
+
+        <ul className="mt-3 space-y-2">
           {SUBNET_MILESTONES.map((m) => {
             const done = isMilestoneDone(m, totalStaked);
             return (
@@ -115,7 +125,19 @@ export function SubnetSection() {
                   )}
                 />
                 <span className={done ? "" : MUTED}>
-                  {t(`milestones.${m.id}`, { n: m.amountMor ?? 0 })}
+                  {t(`milestones.${m.id}`, { n: m.amountMor })}{" "}
+                  {/* Inline rather than a right-aligned column: these labels are
+                      long enough to wrap on a phone, and a pinned column would
+                      squeeze them to two words a line. Not a PILL either — a pill
+                      is a badge about the page, never the state a row is in. */}
+                  <span
+                    className={cn(
+                      "whitespace-nowrap text-[10px] font-semibold tracking-wide uppercase",
+                      MICRO,
+                    )}
+                  >
+                    · {t(`firmness.${m.firmness}`)}
+                  </span>
                 </span>
               </li>
             );

src/lib/stake-milestones.ts

@@ -1,32 +1,48 @@
 // Staking milestones for the Gnars Builder subnet campaign. `amountMor` is the
-// MOR-staked threshold that unlocks the milestone; `null` means the milestone is
-// not amount-gated (tracked manually via `done`). Targets are the current
+// MOR-staked threshold that unlocks the milestone. Targets are the current
 // program — swap here if the campaign changes.
 //
+// WHAT THIS LADDER MEANS. It is what Gnars DELIVERS to amplify Morpheus as the
+// subnet grows, not what a staker earns. The two are easy to confuse and the page
+// used to carry the other axis (featured wall / community drop / IRL event), which
+// contradicted the stake dialog's own disclaimer that "rewards accrue to the
+// subnet, not to individual stakers". This ladder is a unilateral Gnars
+// commitment, built on Morpheus's open protocol — it is not a partnership and
+// implies nothing agreed or returned by the Morpheus side.
+//
+// `firmness` is why the ladder can be published before it is fully locked in: only
+// the 10k anchor is a real commitment, so the other five ship labelled `proposed`
+// rather than silently reading as promises.
+//
 // This file carries NO copy. Milestone labels live in
 // `stake.page.subnet.milestones.<id>` in messages/{en,pt-br}/stake.json and are
 // resolved by whoever renders the list, so the checklist follows the page locale
 // instead of printing English inside a Portuguese section. The thresholds that
 // appear inside those labels are interpolated as `{n, number}`, which is also
-// what makes "10,000" read as "10.000" in pt-BR.
+// what makes "10,000" read as "10.000" in pt-BR. Firmness labels live alongside
+// them under `stake.page.subnet.firmness.<firmness>`.
 
 export const SUBNET_GOAL_MOR = 100_000;
 
+/** Committed = Gnars has locked this in. Proposed = direction, not a promise. */
+export type MilestoneFirmness = "committed" | "proposed";
+
 export type StakeMilestone = {
   /** Also the message key under `stake.page.subnet.milestones`. */
   id: string;
-  amountMor: number | null;
-  done?: boolean;
+  amountMor: number;
+  firmness: MilestoneFirmness;
 };
 
 export const SUBNET_MILESTONES: StakeMilestone[] = [
-  { id: "live", amountMor: 0 },
-  { id: "backers10", amountMor: null, done: false },
-  { id: "10k", amountMor: 10_000 },
-  { id: "50k", amountMor: 50_000 },
-  { id: "100k", amountMor: 100_000 },
+  { id: "10k", amountMor: 10_000, firmness: "committed" },
+  { id: "15k", amountMor: 15_000, firmness: "proposed" },
+  { id: "25k", amountMor: 25_000, firmness: "proposed" },
+  { id: "30k", amountMor: 30_000, firmness: "proposed" },
+  { id: "50k", amountMor: 50_000, firmness: "proposed" },
+  { id: "100k", amountMor: 100_000, firmness: "proposed" },
 ];
 
 export function isMilestoneDone(m: StakeMilestone, totalStaked: number) {
-  return m.amountMor === null ? Boolean(m.done) : totalStaked >= m.amountMor;
+  return totalStaked >= m.amountMor;
 }