fix(wave-d): repair dead routes, tier-rank inversion, invoice + limit drift (#96)

Wave-D frontend findings from BUGHUNT-REPORT-2026-05-18.

D1 (P1-W5-18, L-02): the nav "Get token →" CTA pointed at /get-token, a
route that doesn't exist — the SPA catch-all silently redirected the
conversion funnel's headline button to /. Repointed at /login, the same
route MarketingPage's "Get a token" CTA already uses.

D2 (P2-W5-02): the footer "Security" link pointed at /security (no such
route → 404 → catch-all to /). Repointed at /docs/public/security.md, the
real security doc, matching how ChangelogPage links /docs/public/dpa.md.

D3 (P1-W4-10): ChangePlanModal and TierChangeModal each carried a private
TIER_RANK with the inverted order growth:4, pro:5 — the admin console
showed "DEMOTE" for a pro→growth upgrade. Added one canonical TIER_RANK
table (pro:4, growth:5) to src/api/index.ts, aligned with the backend's
common/plans/rank.go; both modals now import it. Added a unit test pinning
the ladder ordering.

D4 (P1-W4-09): listInvoices did a blind cast of the API response. The
invoices endpoint emits the Razorpay wire shape {id,amount,currency,
status,date,pdf_url} but the Invoice type expected Stripe-style
{period_start,period_end,plan,amount_cents}, so every row rendered
"Invalid Date"/"$NaN"/blank tier. Added an explicit mapInvoice mapper:
amount→amount_cents (direct copy — already smallest-unit, no ×100),
date→issued_at. period_start/period_end/plan are not on the wire and stay
optional; BillingPage renders only what is present.

D5 (P1-W2-06): BillingPage LIMITS had no growth row, so a growth-tier team
fell through to LIMITS.hobby and saw red over-quota bars on a plan they
were within. Added the growth row with api/plans.yaml values.

D6 (P2-W2-17/18): OverviewPage's hardcoded TIER_LIMIT_GB table drifted
from plans.yaml, and the storage tile mixed a decimal-MB numerator with a
binary-MiB denominator. Dropped TIER_LIMIT_GB in favour of summing the
server-supplied per-resource storage_limit_bytes; all storage math now
uses one binary base. MetricsPanel's formatBytes relabelled KB/MB/GB →
KiB/MiB/GiB to match its /1024 divisors.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mastermanas805

src/api/index.test.ts

@@ -38,6 +38,7 @@ import {
   createStack,
   fetchStackStatus,
   registerLogoutHook,
+  TIER_RANK,
 } from './index'
 // §10.21: FIXTURE_BILLING / FIXTURE_INVOICES imports retired. The 503
 // fallback paths in fetchBilling() and listInvoices() were removed —
@@ -330,16 +331,36 @@ describe('fetchBilling()', () => {
 
 // ─── listInvoices() ──────────────────────────────────────────────────────
 describe('listInvoices()', () => {
-  it('returns the API invoices on a successful response', async () => {
-    const m = installFetch()
-    const sample = [
-      { id: 'inv_a', period_start: '2026-04-01', period_end: '2026-05-01', plan: 'pro', amount_cents: 4900, currency: 'USD', status: 'paid' },
-      { id: 'inv_b', period_start: '2026-03-01', period_end: '2026-04-01', plan: 'pro', amount_cents: 4900, currency: 'USD', status: 'paid' },
+  // D4 (P1-W4-09): the agent API emits each invoice as the Razorpay wire
+  // shape { id, amount, currency, status, date, pdf_url } — `amount` is
+  // already in the smallest currency unit (paise/cents) and there is no
+  // billing period or plan tier. listInvoices() now maps that into the
+  // dashboard's normalized Invoice type instead of a blind cast.
+  it('maps the Razorpay wire shape into the normalized Invoice type', async () => {
+    const m = installFetch()
+    const wire = [
+      { id: 'inv_a', amount: 4900, currency: 'USD', status: 'paid', date: '2026-05-01T00:00:00Z', pdf_url: 'https://x/a.pdf' },
+      { id: 'inv_b', amount: 4900, currency: 'USD', status: 'paid', date: '2026-04-01T00:00:00Z' },
     ]
-    m.mockResolvedValueOnce(jsonResponse({ ok: true, invoices: sample }))
+    m.mockResolvedValueOnce(jsonResponse({ ok: true, invoices: wire }))
     const r = await listInvoices()
     expect(r.ok).toBe(true)
-    expect(r.invoices).toEqual(sample)
+    // `amount` → `amount_cents` is a direct copy (NOT ×100); `date` →
+    // `issued_at`; period/plan are absent and stay undefined.
+    expect(r.invoices).toEqual([
+      { id: 'inv_a', issued_at: '2026-05-01T00:00:00Z', amount_cents: 4900, currency: 'USD', status: 'paid', pdf_url: 'https://x/a.pdf' },
+      { id: 'inv_b', issued_at: '2026-04-01T00:00:00Z', amount_cents: 4900, currency: 'USD', status: 'paid', pdf_url: undefined },
+    ])
+  })
+
+  it('collapses an unknown invoice status to "pending"', async () => {
+    const m = installFetch()
+    m.mockResolvedValueOnce(jsonResponse({
+      ok: true,
+      invoices: [{ id: 'inv_c', amount: 900, currency: 'INR', status: 'issued', date: '2026-05-10T00:00:00Z' }],
+    }))
+    const r = await listInvoices()
+    expect(r.invoices[0].status).toBe('pending')
   })
 
   it('hits GET /api/v1/billing/invoices', async () => {
@@ -378,6 +399,38 @@ describe('listInvoices()', () => {
   })
 })
 
+// ─── TIER_RANK ordering (D3 / P1-W4-10) ──────────────────────────────────
+// Pins the canonical tier ladder. The bug this guards against: an inverted
+// copy with growth:4, pro:5 lived independently in ChangePlanModal and
+// TierChangeModal, so the admin console showed "DEMOTE" for a pro→growth
+// upgrade. growth ($99) must rank strictly ABOVE pro ($49). This table is
+// the single source both modals import — kept aligned with the backend's
+// common/plans/rank.go.
+describe('TIER_RANK — canonical tier ladder (D3)', () => {
+  it('orders tiers low → high by price', () => {
+    expect(TIER_RANK).toEqual({
+      anonymous: 0,
+      free: 1,
+      hobby: 2,
+      hobby_plus: 3,
+      pro: 4,
+      growth: 5,
+      team: 6,
+    })
+  })
+
+  it('ranks growth strictly above pro (the inversion the bug had backwards)', () => {
+    expect(TIER_RANK.growth).toBeGreaterThan(TIER_RANK.pro)
+  })
+
+  it('is strictly monotonic across the full ladder', () => {
+    const ladder = ['anonymous', 'free', 'hobby', 'hobby_plus', 'pro', 'growth', 'team']
+    for (let i = 1; i < ladder.length; i++) {
+      expect(TIER_RANK[ladder[i]]).toBeGreaterThan(TIER_RANK[ladder[i - 1]])
+    }
+  })
+})
+
 // ─── createCheckout() ────────────────────────────────────────────────────
 describe('createCheckout()', () => {
   it('returns {ok, short_url, subscription_id} on success', async () => {

src/api/index.ts

@@ -1599,14 +1599,52 @@ export async function fetchBilling(): Promise<{ ok: true; plan: string; billing:
   return { ok: true as const, plan: r.tier, billing: mapBillingState(r) }
 }
 
-type InvoicesResp = { ok: boolean; invoices?: Invoice[] }
+// Wire shape of one invoice row from GET /api/v1/billing/invoices. Mirrors
+// api/internal/handlers/billing.go::ListInvoicesAPI exactly: a Razorpay
+// invoice has a single `amount` (in the currency's smallest unit — paise
+// for INR) and a single `date`, with no billing period or plan tier.
+type InvoiceWire = {
+  id: string
+  amount: number
+  currency: string
+  status: string
+  date: string
+  pdf_url?: string
+}
+type InvoicesResp = { ok: boolean; invoices?: InvoiceWire[] }
+
+// VALID_INVOICE_STATUSES — the three states the dashboard's Invoice type
+// models. Razorpay can also emit 'issued' / 'expired' / 'cancelled'; any
+// status outside this set collapses to 'pending' so the UI renders a
+// neutral pill instead of an unstyled raw string.
+const VALID_INVOICE_STATUSES: ReadonlySet<string> = new Set(['paid', 'pending', 'failed'])
+
+// mapInvoice — converts the agent API's wire shape into the dashboard's
+// normalized Invoice type. The previous `r.invoices ?? []` blind cast let
+// the wire's {amount,date} reach a UI expecting {amount_cents,period_*},
+// rendering "Invalid Date" / "$NaN" on every row. `amount` is already in
+// the smallest currency unit (paise/cents) — it maps to `amount_cents`
+// directly, NO ×100. `period_start` / `period_end` / `plan` are not on
+// the wire and stay undefined; the BillingPage renders around them.
+function mapInvoice(w: InvoiceWire): Invoice {
+  return {
+    id: w.id,
+    issued_at: w.date,
+    amount_cents: w.amount,
+    currency: w.currency,
+    status: VALID_INVOICE_STATUSES.has(w.status)
+      ? (w.status as Invoice['status'])
+      : 'pending',
+    pdf_url: w.pdf_url,
+  }
+}
 
 export async function listInvoices(): Promise<{ ok: true; invoices: Invoice[] }> {
   // §10.21: errors propagate. The previous 503 fallback returned three
   // mock "paid" invoices that didn't correspond to any real payment;
   // BillingPage now surfaces the failure honestly.
   const r = await call<InvoicesResp>('/api/v1/billing/invoices')
-  return { ok: true, invoices: r.invoices ?? [] }
+  return { ok: true, invoices: (r.invoices ?? []).map(mapInvoice) }
 }
 
 // PlanFrequency selects between the monthly and yearly Razorpay plan_id at
@@ -1752,6 +1790,26 @@ export async function updatePaymentMethod(): Promise<{ ok: true; short_url: stri
 // the grid's four columns for an unrelated UI reason).
 export type ChangePlanTier = 'hobby' | 'hobby_plus' | 'pro' | 'team' | 'growth'
 
+// TIER_RANK — the single canonical totally-ordered rank of plan tiers for
+// the dashboard. Higher rank = more capacity. Anchored to api/plans.yaml
+// pricing (hobby $9 < hobby_plus $19 < pro $49 < growth $99 < team $199)
+// and kept byte-for-byte aligned with the backend's common/plans/rank.go.
+//
+// IMPORTANT: pro sits strictly BELOW growth. An earlier inverted copy
+// (growth:4, pro:5) lived independently in ChangePlanModal and
+// TierChangeModal — the admin console then showed "DEMOTE" for a
+// pro→growth upgrade. Both modals now import this one table so they can't
+// re-diverge. If the tier ladder changes, edit here AND rank.go together.
+export const TIER_RANK: Record<string, number> = {
+  anonymous: 0,
+  free: 1,
+  hobby: 2,
+  hobby_plus: 3,
+  pro: 4,
+  growth: 5,
+  team: 6,
+}
+
 // changePlan — LIVE. POST /api/v1/billing/change-plan upgrades an *existing*
 // Razorpay subscription to a different plan tier in-place, rather than
 // creating a fresh subscription via the checkout flow. Used by the

src/api/types.ts

@@ -247,11 +247,31 @@ export interface BillingDetails {
   cancel_at_period_end?: boolean
 }
 
+// Invoice — a normalized subscription invoice row for the Billing page.
+//
+// The agent API's GET /api/v1/billing/invoices emits each Razorpay invoice
+// as { id, amount, currency, status, date, pdf_url } — a single charge with
+// one timestamp, an amount in the currency's smallest unit (paise/cents),
+// and NO billing period or plan tier. The dashboard previously expected a
+// Stripe-style { period_start, period_end, plan, amount_cents } shape, so
+// every row rendered "Invalid Date" / "$NaN" / blank tier.
+//
+// `listInvoices` in api/index.ts maps the wire shape into this type:
+//   amount → amount_cents   (already smallest-unit; a direct copy, no ×100)
+//   date   → issued_at      (the single charge timestamp)
+// `period_start` / `period_end` / `plan` are NOT on the wire — they stay
+// optional and the BillingPage renders only what is actually present
+// rather than fabricating a billing window.
 export interface Invoice {
   id: string
-  period_start: string
-  period_end: string
-  plan: Tier
+  /** Single charge timestamp from Razorpay (the wire `date` field). */
+  issued_at: string
+  /** Billing window — only present if a future API revision sends it. */
+  period_start?: string
+  period_end?: string
+  /** Plan tier — not emitted by the current invoices endpoint. */
+  plan?: Tier
+  /** Amount in the currency's smallest unit (paise for INR, cents for USD). */
   amount_cents: number
   currency: string
   status: 'paid' | 'pending' | 'failed'

src/components/ChangePlanModal.tsx

@@ -27,22 +27,15 @@
 
 import { useEffect, useRef, useState } from 'react'
 import * as api from '../api'
+import { TIER_RANK } from '../api'
 import type { ChangePlanTier, PlanFrequency, Tier } from '../api'
 
-// Ranks for "is this an upgrade?" math. Source of truth: api/plans.yaml.
-// `hobby_plus` sits between hobby and pro at $19/mo (W11 mid-tier insertion,
-// 2026-05-13). The api enum on /billing/checkout + /billing/change-plan now
-// accepts it — see FIX-A6/R8/R9 — so the dashboard exposes it as a real
-// upgrade target alongside the legacy tiers.
-const TIER_RANK: Record<string, number> = {
-  anonymous: 0,
-  free: 1,
-  hobby: 2,
-  hobby_plus: 3,
-  growth: 4,
-  pro: 5,
-  team: 6,
-}
+// Ranks for "is this an upgrade?" math come from the single canonical
+// TIER_RANK table in src/api/index.ts (kept aligned with the backend's
+// common/plans/rank.go). `hobby_plus` sits between hobby and pro at $19/mo,
+// and growth ($99) sits strictly ABOVE pro ($49) — see the table's comment.
+// Importing the shared table keeps this modal from re-diverging into the
+// old inverted growth/pro ordering.
 
 // Human-readable label for the modal title + selector. Derived once so
 // translations / brand renames live in one place.

src/components/MetricsPanel.tsx

@@ -296,11 +296,15 @@ function StorageTile({ values }: { values: number[] }) {
   )
 }
 
+// formatBytes — renders a byte count with binary-prefix units. The divisors
+// are powers of 1024, so the suffixes must be the binary KiB/MiB/GiB, not
+// the decimal-SI KB/MB/GB (D6: the old labels said "MB" for a /1048576
+// conversion, which is a MiB).
 function formatBytes(n: number): string {
   if (n < 1024) return `${n.toFixed(0)} B`
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
-  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`
-  return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KiB`
+  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MiB`
+  return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GiB`
 }
 
 function fmt(n: number): string {

src/components/TierChangeModal.tsx

@@ -15,6 +15,7 @@
 
 import { useEffect, useRef, useState } from 'react'
 import * as api from '../api'
+import { TIER_RANK } from '../api'
 import type { AdminSetTierInput, Tier } from '../api/types'
 
 export const ADMIN_TIER_CHOICES: Tier[] = [
@@ -26,20 +27,13 @@ export const ADMIN_TIER_CHOICES: Tier[] = [
   'growth',
 ]
 
-// Ranked low → high so we can compute "is this a promotion or demotion?"
-// and pick the correct confirmation word.
-const TIER_RANK: Record<Tier, number> = {
-  anonymous: 0,
-  free: 1,
-  hobby: 2,
-  hobby_plus: 3,
-  growth: 4,
-  pro: 5,
-  team: 6,
-}
-
+// Promotion/demotion math reads the single canonical TIER_RANK table from
+// src/api/index.ts (kept aligned with the backend's common/plans/rank.go).
+// growth ($99) ranks strictly ABOVE pro ($49) — a pro→growth change is a
+// PROMOTE. An earlier private copy here had the inverted order, which made
+// the admin console show "DEMOTE" for that upgrade.
 export function confirmationWord(currentTier: Tier, nextTier: Tier): 'PROMOTE' | 'DEMOTE' {
-  return TIER_RANK[nextTier] >= TIER_RANK[currentTier] ? 'PROMOTE' : 'DEMOTE'
+  return (TIER_RANK[nextTier] ?? -1) >= (TIER_RANK[currentTier] ?? -1) ? 'PROMOTE' : 'DEMOTE'
 }
 
 interface Props {

src/layout/PublicShell.tsx

@@ -46,7 +46,7 @@ function PublicNav() {
           <a href="/login" className="public-nav-link public-nav-link--muted">
             Sign in
           </a>
-          <a href="/get-token" className="public-cta-pill">
+          <a href="/login" className="public-cta-pill">
             Get token <span aria-hidden="true">→</span>
           </a>
         </div>
@@ -79,7 +79,7 @@ function PublicFooter() {
             <div className="public-footer-h">Legal</div>
             <a href="/terms">Terms</a>
             <a href="/privacy">Privacy</a>
-            <a href="/security">Security</a>
+            <a href="/docs/public/security.md">Security</a>
             <a href="mailto:hello@instanode.dev">Contact</a>
           </div>
         </div>

src/pages/BillingPage.test.tsx

@@ -57,10 +57,12 @@ const FIXTURE_BILLING: BillingDetails = {
   cancel_at_period_end: false,
 }
 
+// D4: post-mapper Invoice shape — `issued_at` is the single Razorpay charge
+// date; the invoices endpoint emits no billing period or plan tier.
 const FIXTURE_INVOICES: Invoice[] = [
-  { id: 'inv_QzN8bD', period_start: '2026-04-22', period_end: '2026-05-22', plan: 'pro',   amount_cents: 4900, currency: 'USD', status: 'paid' },
-  { id: 'inv_Pp7K2c', period_start: '2026-03-22', period_end: '2026-04-22', plan: 'pro',   amount_cents: 4900, currency: 'USD', status: 'paid' },
-  { id: 'inv_Lm4F9a', period_start: '2026-02-20', period_end: '2026-03-22', plan: 'hobby', amount_cents:  900, currency: 'USD', status: 'paid' },
+  { id: 'inv_QzN8bD', issued_at: '2026-05-22T00:00:00Z', amount_cents: 4900, currency: 'USD', status: 'paid' },
+  { id: 'inv_Pp7K2c', issued_at: '2026-04-22T00:00:00Z', amount_cents: 4900, currency: 'USD', status: 'paid' },
+  { id: 'inv_Lm4F9a', issued_at: '2026-03-22T00:00:00Z', amount_cents:  900, currency: 'USD', status: 'paid' },
 ]
 
 // ─── Module-level mocks ──────────────────────────────────────────────────

src/pages/BillingPage.tsx

@@ -115,6 +115,19 @@ const LIMITS: Record<string, { label: string; limits: PlanLimits; nextTier?: Tie
     // FIX-K (2026-05-16): 2026-05-15 storage bump. Was: postgres_mb: 5120, redis_mb: 256, mongodb_mb: 2048.
     limits: { postgres_mb: 10240, redis_mb: 512, mongodb_mb: 5120, deployments: 10, webhooks: 10000, team_seats: 5 },
   },
+  // D5 (2026-05-18): growth row was missing — a growth-tier team fell
+  // through to `LIMITS.hobby`, painting red over-quota bars on a plan they
+  // were well within. Numbers mirror api/plans.yaml growth: postgres 20480
+  // MB, redis 1024 MB, mongodb / webhooks unlimited (-1 in plans.yaml →
+  // Infinity here), 5 deployments, 10 team_members.
+  growth: {
+    label: 'Growth',
+    nextTier: 'team',
+    limits: {
+      postgres_mb: 20480, redis_mb: 1024, mongodb_mb: Infinity,
+      deployments: 5, webhooks: Infinity, team_seats: 10,
+    },
+  },
   team: {
     label: 'Team',
     limits: {
@@ -549,7 +562,9 @@ export function BillingPage() {
         <div className="card" style={{ padding: 0 }}>
           <div className="invoice-row head">
             <span>id</span>
-            <span>period</span>
+            {/* "date" not "period": the Razorpay invoices endpoint emits a
+                single charge timestamp, not a billing window. */}
+            <span>date</span>
             <span>plan</span>
             <span>status</span>
             <span>amount</span>
@@ -558,9 +573,15 @@ export function BillingPage() {
             <div key={i.id} className="invoice-row">
               <span className="id">{i.id}</span>
               <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-dim)' }}>
-                {new Date(i.period_start).toLocaleDateString()} → {new Date(i.period_end).toLocaleDateString()}
+                {/* Prefer a real billing window if a future API revision
+                    sends one; otherwise show the single charge date. */}
+                {i.period_start && i.period_end
+                  ? `${new Date(i.period_start).toLocaleDateString()} → ${new Date(i.period_end).toLocaleDateString()}`
+                  : new Date(i.issued_at).toLocaleDateString()}
               </span>
-              <TierPill tier={i.plan} />
+              {/* The invoices endpoint doesn't carry a plan tier — render the
+                  pill only when one is actually present, never fabricate. */}
+              {i.plan ? <TierPill tier={i.plan} /> : <span className="dim">—</span>}
               {/* Show the real invoice status (paid/pending/failed), not a
                   hardcoded "running" pill. StatusPill doesn't style these
                   three, so render a plain mono span. (§10.8.) */}