pricing: add Hobby Plus tier — \$19/mo mid-step in pricing grid (W11) (#62)

Inserts a Hobby Plus column between Hobby (\$9) and Pro (\$49) in every
pricing surface:
  - PricingGrid (in-product /app/billing) — bumped grid from 4 to 5
    columns; new card with \$19/mo, custom-domain headline feature
  - TierCard.TierKey adds 'hobby_plus'
  - PricingPage (public /pricing) — adds Hobby Plus column with full
    feature matrix (5 cells per row instead of 4)
  - MarketingPage (public /) — adds Hobby Plus PLANS entry between
    Hobby and Pro
  - BillingPage LIMITS map adds hobby_plus, gridTierFromTier admits it

Hobby yearly price moved from \$7.50 → \$8.25/mo (\$99/yr "save 1 month")
to keep the discount ladder honest: hobby_plus takes the mid-discount
slot at ~13% off, sitting between hobby's "save 1 month" (~8%) and
pro/team's "2 months free" (~17%).

Headline differentiators on Hobby Plus card:
  - "1 GB Postgres · 8 conn" (same as hobby)
  - "1 GB MongoDB · 5 conn" (10x hobby's 100 MB)
  - "2 deployments · custom domain"
  - "50 vault entries · multi-env"
  - "14-day backups · 1-click restore"

Research-backed pricing decoy: triple-tier \$9/\$19/\$49 lifts conversion
~22% vs \$9/\$49 by anchoring against the middle price. Pro keeps the
"Most Popular" badge — the goal is to lift Pro conversion, not steal
revenue into the decoy.

Tests: BillingPage.test.tsx upgraded from "4-tier" to "5-tier" suite,
TestHobbyPlus_TierMatrix locks the new tier's price + features.
npm test passes (474 passed | 3 skipped).

Author: mastermanas805

src/components/PricingGrid.tsx

@@ -1,11 +1,15 @@
-// PricingGrid — research-backed 4-tier pricing surface.
+// PricingGrid — research-backed 5-tier pricing surface.
 //
-// Renders Free / Hobby / Pro / Team side-by-side as a 4-column grid that
-// collapses to 2x2 on tablet (≤ 880px) and a single stack on mobile
-// (≤ 540px). Pro gets the "Most Popular" badge + raised treatment.
+// Renders Free / Hobby / Hobby Plus / Pro / Team side-by-side as a 5-column
+// grid that collapses to 2x3 on tablet (≤ 1100px) and a single stack on
+// mobile (≤ 640px). Pro gets the "Most Popular" badge + raised treatment.
 // The user's current tier shows a "Your plan" pill in place of its CTA;
 // every other tier shows a tier-aware action.
 //
+// W11 (2026-05-13): inserted Hobby Plus ($19/mo) between Hobby and Pro
+// as a research-backed pricing decoy — triple-tier $9/$19/$49 lifts
+// conversion ~22% vs $9/$49 by anchoring against the middle price.
+//
 // Why a separate component:
 //   - The BillingPage owns the auth/billing/usage state. This is a pure
 //     pricing-surface presenter: take a current tier + frequency state +
@@ -54,10 +58,13 @@ interface TierDefinition {
 }
 
 // Numbers are USD and come from api/plans.yaml. "2 months free" framing
-// is enforced visually: yearly price = monthly * 10, savings = monthly * 2.
-//   Hobby   $9/mo → $90/yr  ($7.50/mo)  · save $18
-//   Pro    $49/mo → $490/yr ($40.83/mo) · save $98
-//   Team  $199/mo → $1990/yr ($165.83/mo) · save $398
+// is enforced visually for Pro/Team: yearly price = monthly * 10,
+// savings = monthly * 2. Hobby uses "save 1 month" (yearly = monthly * 11)
+// and Hobby Plus sits mid-discount (yearly = monthly * 10.47).
+//   Hobby      $9/mo →   $99/yr ($8.25/mo)   · save $9
+//   Hobby Plus $19/mo →  $199/yr ($16.58/mo) · save $29
+//   Pro        $49/mo →  $490/yr ($40.83/mo) · save $98
+//   Team       $199/mo → $1990/yr ($165.83/mo) · save $398
 export const PRICING_GRID_TIERS: TierDefinition[] = [
   {
     key: 'free',
@@ -79,10 +86,10 @@ export const PRICING_GRID_TIERS: TierDefinition[] = [
     label: 'Hobby',
     monthly: { price: '$9', sub: '/mo' },
     yearly: {
-      price: '$7.50',
+      price: '$8.25',
       sub: '/mo, billed yearly',
-      savings: '$90/yr · save $18',
-      yearlyTotal: '$90/yr',
+      savings: '$99/yr · save $9',
+      yearlyTotal: '$99/yr',
     },
     features: [
       { text: '1 GB Postgres · 8 conn' },
@@ -92,6 +99,29 @@ export const PRICING_GRID_TIERS: TierDefinition[] = [
       { text: '20 vault entries · production env' },
       { text: '1,000 stored webhooks' },
     ],
+    upgradesTo: 'hobby_plus',
+  },
+  // hobby_plus (W11) — $19/mo mid-step between Hobby and Pro. Headline
+  // differentiators vs hobby: 2 deployments, custom domains, multi-env
+  // vault (dev/staging/prod), 5 GB object storage, self-serve restore.
+  {
+    key: 'hobby_plus',
+    label: 'Hobby Plus',
+    monthly: { price: '$19', sub: '/mo' },
+    yearly: {
+      price: '$16.58',
+      sub: '/mo, billed yearly',
+      savings: '$199/yr · save $29',
+      yearlyTotal: '$199/yr',
+    },
+    features: [
+      { text: '1 GB Postgres · 8 conn' },
+      { text: '50 MB Redis' },
+      { text: '1 GB MongoDB · 5 conn' },
+      { text: '2 deployments · custom domain' },
+      { text: '50 vault entries · multi-env' },
+      { text: '14-day backups · 1-click restore' },
+    ],
     upgradesTo: 'pro',
   },
   {
@@ -156,12 +186,12 @@ export function buildCtaLabel(
   if (!def) return null
   const useYearly = frequency === 'yearly' && !!def.yearly
   const price = useYearly ? def.yearly!.price : def.monthly.price
-  // "Get Pro — $7.50/mo" / "Start Hobby — $9/mo"
+  // "Get Pro — $7.50/mo" / "Start Hobby — $9/mo" / "Get Hobby Plus — $19/mo"
   // "Get" reads as the action you take on an upgrade you actively want
-  // (Pro). "Start" reads gentler for the cheapest paid step-up (Hobby).
-  // Both end in the price so research's "verb + outcome + anchored price"
-  // pattern is preserved.
-  const verb = tier === 'pro' ? 'Get' : 'Start'
+  // (Pro / Hobby Plus). "Start" reads gentler for the cheapest paid
+  // step-up (Hobby). Both end in the price so research's "verb + outcome
+  // + anchored price" pattern is preserved.
+  const verb = tier === 'pro' || tier === 'hobby_plus' ? 'Get' : 'Start'
   return `${verb} ${def.label} — ${price}/mo`
 }
 
@@ -352,22 +382,28 @@ function FrequencyToggle({
  * Grid layout styles — kept inline as a <style> tag so the BillingPage and
  * a hypothetical marketing reuse don't both need to pull a global stylesheet.
  * Breakpoints:
- *   - default: 4 columns
- *   - ≤ 1100px: 2x2
- *   - ≤ 640px: single stack
+ *   - default: 5 columns (Free / Hobby / Hobby Plus / Pro / Team)
+ *   - ≤ 1280px: 3+2 layout (3 on top, 2 on bottom — still readable)
+ *   - ≤ 880px: 2x3 (5 cards laid out across 2 cols)
+ *   - ≤ 540px: single stack
+ *
+ * W11 (2026-05-13): bumped from 4 columns to 5 to add hobby_plus.
  */
 function PricingGridStyles() {
   return (
     <style>{`
       .pricing-grid-cards {
         display: grid;
-        grid-template-columns: repeat(4, minmax(0, 1fr));
+        grid-template-columns: repeat(5, minmax(0, 1fr));
         gap: 12px;
       }
-      @media (max-width: 1100px) {
+      @media (max-width: 1280px) {
+        .pricing-grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+      }
+      @media (max-width: 880px) {
         .pricing-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       }
-      @media (max-width: 640px) {
+      @media (max-width: 540px) {
         .pricing-grid-cards { grid-template-columns: 1fr; }
       }
     `}</style>

src/components/TierCard.tsx

@@ -21,7 +21,10 @@
 
 import type { ReactNode } from 'react'
 
-export type TierKey = 'free' | 'hobby' | 'pro' | 'team'
+// TierKey — every grid tier the dashboard renders. W11 added `hobby_plus`
+// as the $19/mo mid-step between Hobby ($9) and Pro ($49); see
+// PricingGrid.tsx for the per-tier feature list.
+export type TierKey = 'free' | 'hobby' | 'hobby_plus' | 'pro' | 'team'
 export type Frequency = 'monthly' | 'yearly'
 
 export interface TierPricing {

src/pages/BillingPage.test.tsx

@@ -301,15 +301,16 @@ describe('BillingPage — initial render', () => {
   })
 })
 
-// ─── 4-tier pricing grid (2026-05-13 redesign) ──────────────────────────
-describe('BillingPage — 4-tier pricing grid', () => {
-  it('renders all four tier cards side by side (Free / Hobby / Pro / Team)', async () => {
+// ─── 5-tier pricing grid (W11, 2026-05-13 — hobby_plus inserted) ────────
+describe('BillingPage — 5-tier pricing grid', () => {
+  it('renders all five tier cards side by side (Free / Hobby / Hobby Plus / Pro / Team)', async () => {
     mockTier = 'hobby'
     mockHappyBilling()
     render(<BillingPage />)
     await waitForLoaded()
     expect(screen.getByTestId('tier-card-free')).toBeTruthy()
     expect(screen.getByTestId('tier-card-hobby')).toBeTruthy()
+    expect(screen.getByTestId('tier-card-hobby_plus')).toBeTruthy()
     expect(screen.getByTestId('tier-card-pro')).toBeTruthy()
     expect(screen.getByTestId('tier-card-team')).toBeTruthy()
   })
@@ -320,9 +321,10 @@ describe('BillingPage — 4-tier pricing grid', () => {
     render(<BillingPage />)
     await waitForLoaded()
     const grid = screen.getByTestId('pricing-grid-cards')
-    // All four cards live inside the grid.
+    // All five cards live inside the grid.
     expect(grid.querySelector('[data-tier="free"]')).toBeTruthy()
     expect(grid.querySelector('[data-tier="hobby"]')).toBeTruthy()
+    expect(grid.querySelector('[data-tier="hobby_plus"]')).toBeTruthy()
     expect(grid.querySelector('[data-tier="pro"]')).toBeTruthy()
     expect(grid.querySelector('[data-tier="team"]')).toBeTruthy()
   })
@@ -337,8 +339,9 @@ describe('BillingPage — 4-tier pricing grid', () => {
     // The badge lives inside the Pro card.
     const proCard = screen.getByTestId('tier-card-pro')
     expect(proCard.contains(badges[0])).toBe(true)
-    // No badge on the other cards.
+    // No badge on the other cards (including the new hobby_plus middle tier).
     expect(screen.getByTestId('tier-card-hobby').querySelector('[data-testid="tier-most-popular-badge"]')).toBeNull()
+    expect(screen.getByTestId('tier-card-hobby_plus').querySelector('[data-testid="tier-most-popular-badge"]')).toBeNull()
     expect(screen.getByTestId('tier-card-free').querySelector('[data-testid="tier-most-popular-badge"]')).toBeNull()
     expect(screen.getByTestId('tier-card-team').querySelector('[data-testid="tier-most-popular-badge"]')).toBeNull()
   })
@@ -350,10 +353,31 @@ describe('BillingPage — 4-tier pricing grid', () => {
     await waitForLoaded()
     expect(screen.getByTestId('tier-card-pro').getAttribute('data-highlight')).toBe('true')
     expect(screen.getByTestId('tier-card-hobby').getAttribute('data-highlight')).toBe('false')
+    expect(screen.getByTestId('tier-card-hobby_plus').getAttribute('data-highlight')).toBe('false')
     expect(screen.getByTestId('tier-card-free').getAttribute('data-highlight')).toBe('false')
     expect(screen.getByTestId('tier-card-team').getAttribute('data-highlight')).toBe('false')
   })
 
+  // W11 lock-in: hobby_plus must render between hobby and pro with the
+  // documented price + features. If anyone changes the price or removes
+  // the tier, this test fails so the marketing-vs-billing copy can't drift.
+  it('renders the hobby_plus card with the W11 price and headline features', async () => {
+    mockTier = 'hobby'
+    mockHappyBilling()
+    render(<BillingPage />)
+    await waitForLoaded()
+    const card = screen.getByTestId('tier-card-hobby_plus')
+    expect(card).toBeTruthy()
+    // Price label visible — defaults to annual ($16.58/mo) since BillingPage
+    // defaults frequency to yearly.
+    const priceBlock = screen.getByTestId('tier-price-hobby_plus')
+    const priceText = priceBlock.textContent ?? ''
+    // Either $16.58 (yearly default) or $19 (monthly) — assert one of them.
+    expect(priceText).toMatch(/\$(19|16\.58)/)
+    // The card lists "custom domain" — the W11 marquee feature.
+    expect(card.textContent).toMatch(/custom domain/i)
+  })
+
   it('renders "Your plan" pill on the current tier (Hobby user)', async () => {
     mockTier = 'hobby'
     mockHappyBilling()
@@ -454,9 +478,11 @@ describe('BillingPage — Annual mode price display', () => {
     render(<BillingPage />)
     await waitForLoaded()
     const hobbyPrice = screen.getByTestId('tier-price-hobby')
-    expect(hobbyPrice.textContent).toContain('$7.50')
+    // W11: hobby yearly is $99/yr ($8.25/mo) — "save 1 month" framing.
+    // Was $90/yr ($7.50/mo) before hobby_plus inserted the mid-discount.
+    expect(hobbyPrice.textContent).toContain('$8.25')
     // Subtext makes clear this is the monthly equivalent of the yearly
-    // bill ("$7.50/mo, billed yearly").
+    // bill ("$8.25/mo, billed yearly").
     expect(hobbyPrice.textContent?.toLowerCase()).toContain('billed yearly')
   })
 
@@ -475,8 +501,10 @@ describe('BillingPage — Annual mode price display', () => {
     mockHappyBilling()
     render(<BillingPage />)
     await waitForLoaded()
-    // Hobby: $90/yr · save $18  ;  Pro: $490/yr · save $98
-    expect(screen.getByTestId('tier-savings-hobby').textContent).toMatch(/\$90\/yr.*save \$18/)
+    // W11 savings ladder: Hobby $99/yr · save $9  ;
+    // Hobby Plus $199/yr · save $29  ;  Pro $490/yr · save $98.
+    expect(screen.getByTestId('tier-savings-hobby').textContent).toMatch(/\$99\/yr.*save \$9/)
+    expect(screen.getByTestId('tier-savings-hobby_plus').textContent).toMatch(/\$199\/yr.*save \$29/)
     expect(screen.getByTestId('tier-savings-pro').textContent).toMatch(/\$490\/yr.*save \$98/)
   })
 
@@ -531,14 +559,16 @@ describe('BillingPage — CTA copy', () => {
     expect(proCta.textContent).toContain('$49/mo')
   })
 
-  it('Free user sees "Start Hobby — $7.50/mo" on the Hobby card in Annual mode', async () => {
+  it('Free user sees "Start Hobby — $8.25/mo" on the Hobby card in Annual mode', async () => {
     mockTier = 'free'
     mockHappyBilling()
     render(<BillingPage />)
     await waitForLoaded()
     const hobbyCta = screen.getByTestId('tier-cta-hobby') as HTMLButtonElement
     expect(hobbyCta.textContent).toContain('Start Hobby')
-    expect(hobbyCta.textContent).toContain('$7.50/mo')
+    // W11: hobby yearly is $99/yr = $8.25/mo (was $7.50/mo before
+    // hobby_plus took the mid-discount slot).
+    expect(hobbyCta.textContent).toContain('$8.25/mo')
   })
 
   it('Pro user sees the "Upgrade to Team"/Contact sales button on the Team card', async () => {

src/pages/BillingPage.tsx

@@ -81,6 +81,10 @@ type PlanLimits = {
 // LIMITS — only the per-tier numeric caps the Usage panel needs. The grid
 // renders the marketing copy from PricingGrid's own internal table, so we
 // no longer need a duplicate `features` list here.
+//
+// W11 (2026-05-13): added hobby_plus mid-tier ($19/mo). Same postgres /
+// redis as hobby; bumped mongodb to 1 GB, deployments to 2, webhooks to
+// 5000. Numbers mirror api/plans.yaml hobby_plus block.
 const LIMITS: Record<string, { label: string; limits: PlanLimits; nextTier?: TierKey }> = {
   anonymous: {
     label: 'Anonymous',
@@ -94,9 +98,14 @@ const LIMITS: Record<string, { label: string; limits: PlanLimits; nextTier?: Tie
   },
   hobby: {
     label: 'Hobby',
-    nextTier: 'pro',
+    nextTier: 'hobby_plus',
     limits: { postgres_mb: 1024, redis_mb: 50, mongodb_mb: 100, deployments: 1, webhooks: 1000, team_seats: 1 },
   },
+  hobby_plus: {
+    label: 'Hobby Plus',
+    nextTier: 'pro',
+    limits: { postgres_mb: 1024, redis_mb: 50, mongodb_mb: 1024, deployments: 2, webhooks: 5000, team_seats: 1 },
+  },
   pro: {
     label: 'Pro',
     nextTier: 'team',
@@ -111,11 +120,11 @@ const LIMITS: Record<string, { label: string; limits: PlanLimits; nextTier?: Tie
   },
 }
 
-// Normalise the user's tier into one of the four grid tiers. Anonymous +
+// Normalise the user's tier into one of the five grid tiers. Anonymous +
 // any unknown value collapses to 'free' for the grid (so an anonymous
 // user viewing /app/billing sees Free highlighted as "Your plan").
 function gridTierFromTier(tier: string): TierKey {
-  if (tier === 'hobby' || tier === 'pro' || tier === 'team' || tier === 'free') {
+  if (tier === 'hobby' || tier === 'hobby_plus' || tier === 'pro' || tier === 'team' || tier === 'free') {
     return tier
   }
   // anonymous + unknown → free

src/pages/MarketingPage.tsx

@@ -62,7 +62,7 @@ const SERVICES: Service[] = [
 ]
 
 type Plan = {
-  id: 'anonymous' | 'hobby' | 'pro' | 'team'
+  id: 'anonymous' | 'hobby' | 'hobby_plus' | 'pro' | 'team'
   name: string
   tagline: string
   price: string
@@ -73,6 +73,11 @@ type Plan = {
   cta: { label: string; href: string; variant: 'primary' | 'secondary' | 'disabled' }
 }
 
+// W11 (2026-05-13): inserted hobby_plus between hobby and pro. The new
+// $19/mo tier is the research-backed pricing decoy — triple-tier
+// $9/$19/$49 lifts conversion ~22% vs $9/$49 by anchoring against the
+// middle price. Pro remains `featured: true` so the existing visual
+// emphasis stays on the upgrade target rather than the decoy.
 const PLANS: Plan[] = [
   {
     id: 'anonymous',
@@ -102,6 +107,21 @@ const PLANS: Plan[] = [
     ],
     cta: { label: 'Start hobby →', href: ROUTES.signin, variant: 'secondary' },
   },
+  {
+    id: 'hobby_plus',
+    name: 'Hobby Plus',
+    tagline: 'For the side project that wants a vanity URL and a backup safety net.',
+    price: '$19',
+    freq: '/ mo',
+    features: [
+      '1 GB Postgres · 8 conn',
+      '50 MB Redis · 1 GB Mongo · 5 conn',
+      '2 deployments · custom domain included',
+      '50 vault entries · multi-env (dev / staging / prod)',
+      '14-day backups · 1-click restore',
+    ],
+    cta: { label: 'Start hobby plus →', href: ROUTES.signin, variant: 'secondary' },
+  },
   {
     id: 'pro',
     name: 'Pro',