From 30cf6f14b33187ba7ee8135922185ab54c6bec45 Mon Sep 17 00:00:00 2001
From: rschumann <sebastian.schkudlara@gmail.com>
Date: Sun, 26 Jul 2026 10:07:59 +0200
Subject: [PATCH 1/3] Render get.traylinx.com pricing from the live API, not
 literals

The landing page hardcoded a price ladder that had been retired: Explorer
$39, Creator $79, Operator $149 -- three plans that no longer exist -- plus
"Save 2 months", "All prices in USD", and a "7-day money-back guarantee"
that the terms of sale directly contradict (annual is explicitly
non-refundable). None of it had been touched since the storefront moved to
Starter / Starter-Managed / Builder / Power, so the page had been selling a
product we do not offer at prices we do not charge.

The pricing section now renders from
https://tytus.traylinx.com/public/pricing -- the same source of truth the
main storefront and the OpenClaw landing already use. A price change is now
Stripe + catalog only, with zero edits to this file. The Monthly/Yearly
toggle passes `interval`, so the annual ladder arrives from the API too.

Annual terms are shown ONLY on the annual view and ONLY when the API says
annual is sellable, using the API's own consent text -- the same words
Stripe Checkout puts above the pay button, so the promise cannot drift
between the page and the payment.

The toggle badge names no number. The saving is not uniform (0.79 to 1.91
months across the ladder), and a badge above ALL cards may only claim what
the WEAKEST card actually delivers.

The free tier is not sold through the pricing API, so it stays static.

Degradation: an unreachable, non-200 or malformed API falls back to a
bundled snapshot of the current live values rather than blanking the page
or rendering a partial payload. API-supplied text is escaped.

Adds web/pricing.test.mjs (14 assertions, network-free -- it stubs fetch, so
CI never depends on the pricing API being up) and a "Landing pricing
contract" job in pr.yml. Mutation-checked: reintroducing the money-back
promise or a numbered toggle badge each turn the suite red.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .github/workflows/pr.yml |  14 +++
 web/index.html           | 216 ++++++++++++++++++++++-----------------
 web/pricing.test.mjs     | 179 ++++++++++++++++++++++++++++++++
 3 files changed, 313 insertions(+), 96 deletions(-)
 create mode 100644 web/pricing.test.mjs

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index b864446..28b6f4c 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -177,6 +177,20 @@ jobs:
           }
           $global:LASTEXITCODE = 0
 
+  landing-pricing:
+    name: Landing pricing contract
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v5
+
+      # Network-free by design: the test stubs fetch, so a red run means the
+      # PAGE changed, never that the pricing API wobbled. Guards against the
+      # 2026-07-26 drift where get.traylinx.com advertised three retired plans
+      # and a money-back guarantee the terms of sale contradict.
+      - name: Landing page must render prices from the live API, not literals
+        run: node web/pricing.test.mjs
+
   rust:
     name: Rust ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
diff --git a/web/index.html b/web/index.html
index 5de29d8..a2b7c25 100644
--- a/web/index.html
+++ b/web/index.html
@@ -252,73 +252,33 @@ <h2 class="section-title">What happens next</h2>
       </section>
 
 
+      <!-- PRICING. Rendered from the LIVE pricing API, never hardcoded.
+           https://tytus.traylinx.com/public/pricing is the single source of
+           truth (payments -> Provider proxy); a price change is Stripe +
+           catalog only, with zero edits here. This section used to hardcode
+           Explorer/Creator/Operator at $39/$79/$149 -- plans that no longer
+           exist -- which is exactly the drift this removes. -->
       <section id="pricing">
         <div class="pricing-intro">
           <h2>Private pod pricing.</h2>
-          <p id="pricing-subtitle">Start free, then reserve a dedicated Tytus pod when you need private infrastructure, stable keys, and bundled model credits.</p>
+          <p id="pricing-subtitle">A dedicated EU-hosted server, optionally with a managed AI plan. Checkout confirms the exact recurring total from your billing address.</p>
           <div class="billing-toggle" aria-label="Billing cadence">
-            <button type="button" class="active" data-billing="monthly">Monthly</button>
-            <button type="button" data-billing="yearly">Yearly</button>
-            <span class="save">Save 2 months</span>
+            <button type="button" class="active" data-billing="month">Monthly</button>
+            <button type="button" data-billing="year">Yearly</button>
+            <!-- No number here. The saving is not uniform across plans (it runs
+                 from 0.79 to 1.91 months), so a badge above ALL cards may only
+                 claim what the WEAKEST card actually delivers. -->
+            <span class="save">Save with annual</span>
           </div>
         </div>
-        <div class="pricing-grid">
-          <article class="pricing-card primary-plan">
-            <span class="pricing-badge">Most popular</span>
-            <div class="plan-name">Explorer</div>
-            <div class="price-line"><strong data-price-monthly="39" data-price-yearly="390">$39</strong><span data-period>/mo</span></div>
-            <div class="tax-line" data-tax-line>+ applicable taxes; checkout confirms final billing address tax.</div>
-            <p class="plan-copy">Your own private Tytus pod. Run OpenClaw inside an isolated WireGuard tunnel.</p>
-            <ul class="feature-list">
-              <li>1 Dedicated Tytus AI Pod</li>
-              <li>Runs OpenClaw (1 pod unit)</li>
-              <li>WireGuard-encrypted tunnel</li>
-              <li>Dedicated OpenAI-compatible gateway per pod</li>
-              <li>Stable URL + stable per-user API key</li>
-              <li>Bundled token plan: text, vision, audio, image, embeddings</li>
-              <li>Sentinel Pass credentials</li>
-              <li>BYOK on top of bundled tokens</li>
-              <li>7-day money-back guarantee</li>
-            </ul>
-            <a class="small-btn primaryish" href="https://traylinx.com/admin/tytus">Deploy my pod</a>
-          </article>
-          <article class="pricing-card">
-            <div class="plan-name">Creator</div>
-            <div class="price-line"><strong data-price-monthly="79" data-price-yearly="790">$79</strong><span data-period>/mo</span></div>
-            <div class="tax-line" data-tax-line>+ applicable taxes; checkout confirms final billing address tax.</div>
-            <p class="plan-copy">Run OpenClaw and Hermes side by side. The most popular plan for builders.</p>
-            <ul class="feature-list">
-              <li>Up to 2 Dedicated Tytus AI Pods</li>
-              <li>Run OpenClaw and/or Hermes Agent (Hermes = 2 units)</li>
-              <li>Everything in Explorer</li>
-              <li>Team access for Sentinel Passes</li>
-              <li>Custom model preferences in your gateway</li>
-              <li>Advanced routing across providers</li>
-              <li>Bundled token plan, doubled</li>
-            </ul>
-            <a class="small-btn" href="https://traylinx.com/admin/tytus">Get started</a>
-          </article>
-          <article class="pricing-card">
-            <div class="plan-name">Operator</div>
-            <div class="price-line"><strong data-price-monthly="149" data-price-yearly="1490">$149</strong><span data-period>/mo</span></div>
-            <div class="tax-line" data-tax-line>+ applicable taxes; checkout confirms final billing address tax.</div>
-            <p class="plan-copy">For teams and agencies. Up to 4 pods running OpenClaw and Hermes in parallel.</p>
-            <ul class="feature-list">
-              <li>Up to 4 Dedicated Tytus AI Pods</li>
-              <li>Run OpenClaw and Hermes in parallel</li>
-              <li>Everything in Creator</li>
-              <li>Dev / Staging / Prod pod split</li>
-              <li>Hierarchical Sentinel policies</li>
-              <li>Central organization management</li>
-              <li>Bundled token plan, quadrupled</li>
-            </ul>
-            <a class="small-btn" href="https://traylinx.com/admin/tytus">Get started</a>
-          </article>
-        </div>
+        <div class="pricing-grid" id="pricing-grid" aria-live="polite"></div>
+        <!-- The free tier is not a priced card and is not sold through the
+             pricing API, so it stays static. EUR-only products mean €0 is
+             correct in every region. -->
         <div class="free-plan">
           <div>
             <div class="plan-name">Free</div>
-            <div class="price-line"><strong data-price-free>$0</strong><span data-period>/mo</span></div>
+            <div class="price-line"><strong>€0</strong><span>/mo</span></div>
             <p class="caption">Forever. No card. Try Tytus on shared infrastructure.</p>
           </div>
           <div class="free-features">
@@ -331,7 +291,8 @@ <h2>Private pod pricing.</h2>
           </div>
           <a class="small-btn" href="https://traylinx.com/admin/tytus">Start free</a>
         </div>
-        <p id="pricing-footnote" class="pricing-footnote">All prices in USD. Taxes calculated at checkout from your billing address. Annual billing saves 2 months. 7-day money-back on first paid month.</p>
+        <p id="annual-terms" class="pricing-footnote" hidden></p>
+        <p id="pricing-footnote" class="pricing-footnote"></p>
       </section>
 
       <section>
@@ -381,15 +342,48 @@ <h2 class="section-title">Built for your agents</h2>
   </div>
   <script>
 
-    const EU_VAT_COUNTRIES = new Set(['AT','BE','BG','HR','CY','CZ','DK','EE','FI','FR','DE','GR','HU','IE','IT','LV','LT','LU','MT','NL','PL','PT','RO','SK','SI','ES','SE']);
+    // ── LIVE PRICING ────────────────────────────────────────────────────
+    // Single source of truth: payments -> Provider proxy. Nothing about the
+    // price ladder is hardcoded here, so changing a price is Stripe + catalog
+    // only. Before 2026-07-26 this page hardcoded Explorer/Creator/Operator at
+    // $39/$79/$149 with a "7-day money-back guarantee" -- three retired plans,
+    // prices we do not charge, and a refund promise the terms contradict.
+    const PRICING_ENDPOINT = 'https://tytus.traylinx.com/public/pricing';
+
+    // Bundled snapshot of the live values (2026-07-26). Used ONLY when the API
+    // is unreachable, so the page degrades to a stale-but-real ladder instead
+    // of blanking. It must never be the thing that decides a price.
+    const FALLBACK = {
+      month: {
+        region: { tax_copy: 'VAT included where applicable' },
+        cards: [
+          { id: 'starter', name: 'Starter', self_serve: true, popular: false, tagline: 'One private server, your own AI keys.', price: { label: '€24' }, highlights: ['1× Server L (6 vCPU · 8 GB · 240 GB), EU-hosted', 'BYOK or SwitchAI Cloud — no managed AI bill', 'Pay-on-delivery: €0 today'] },
+          { id: 'starter_managed', name: 'Starter · Managed', self_serve: true, popular: false, tagline: 'A private server with managed AI included.', price: { label: '€49' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Lite) — no key to manage', 'One AI plan feeds your server'] },
+          { id: 'builder', name: 'Builder', self_serve: true, popular: true, tagline: 'The everyday build box: private server + more AI.', price: { label: '€89' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Pro) — more headroom', 'The most popular way to run Tytus'] },
+          { id: 'power', name: 'Power', self_serve: true, popular: false, tagline: 'One private box with the most managed AI.', price: { label: '€179' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Max) — top quota', 'Most AI throughput on a single private server'] }
+        ]
+      },
+      year: {
+        region: { tax_copy: 'VAT included where applicable' },
+        annual: { enabled: true, refundable: false, consent_text: '' },
+        cards: [
+          { id: 'starter', name: 'Starter', self_serve: true, popular: false, tagline: 'One private server, your own AI keys.', price: { label: '€269/yr' }, highlights: ['1× Server L (6 vCPU · 8 GB · 240 GB), EU-hosted', 'BYOK or SwitchAI Cloud — no managed AI bill', 'Pay-on-delivery: €0 today'] },
+          { id: 'starter_managed', name: 'Starter · Managed', self_serve: true, popular: false, tagline: 'A private server with managed AI included.', price: { label: '€538/yr' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Lite) — no key to manage', 'One AI plan feeds your server'] },
+          { id: 'builder', name: 'Builder', self_serve: true, popular: true, tagline: 'The everyday build box: private server + more AI.', price: { label: '€968/yr' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Pro) — more headroom', 'The most popular way to run Tytus'] },
+          { id: 'power', name: 'Power', self_serve: true, popular: false, tagline: 'One private box with the most managed AI.', price: { label: '€1968/yr' }, highlights: ['1× Server L, EU-hosted', 'Managed Tytus AI (Max) — top quota', 'Most AI throughput on a single private server'] }
+        ]
+      }
+    };
+
     const GEO_ENDPOINTS = [
       { url: 'https://api.country.is/', pick: d => d.country },
       { url: 'https://get.geojs.io/v1/ip/country.json', pick: d => d.country },
       { url: 'https://ipwho.is/', pick: d => d.country_code },
       { url: 'https://ipapi.co/json/', pick: d => d.country_code },
     ];
-    let billingMode = 'monthly';
-    let pricingCurrency = 'usd';
+
+    let billingMode = 'month';
+    let billingCountry = null;
 
     function countryFromLocale() {
       const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
@@ -399,51 +393,81 @@ <h2 class="section-title">Built for your agents</h2>
       return m ? m[1].toUpperCase() : null;
     }
 
-    function pricingRegion(countryCode) {
-      const code = (countryCode || '').toUpperCase();
-      if (EU_VAT_COUNTRIES.has(code)) {
-        return {
-          currency: 'eur',
-          symbol: '€',
-          taxLine: 'VAT included where applicable',
-          subtitle: 'EU consumer prices are shown in EUR with VAT included where applicable. Checkout confirms the exact recurring total from your billing address.',
-          footnote: 'EU consumer prices shown in EUR include VAT where applicable. Stripe Checkout confirms the exact recurring total from your billing address. Annual billing saves 2 months. 7-day money-back on first paid month.'
-        };
-      }
-      return {
-        currency: 'usd',
-        symbol: '$',
-        taxLine: '+ applicable taxes; checkout confirms final billing address tax.',
-        subtitle: 'Global prices are shown in USD. Checkout confirms taxes from your billing address before payment.',
-        footnote: 'All prices in USD. Taxes calculated at checkout from your billing address. Annual billing saves 2 months. 7-day money-back on first paid month.'
-      };
+    function esc(s) {
+      return String(s == null ? '' : s).replace(/[&<>"']/g, ch => (
+        { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]
+      ));
     }
 
-    function applyPricing(countryCode) {
-      const region = pricingRegion(countryCode);
-      pricingCurrency = region.currency;
-      document.querySelectorAll('[data-price-monthly]').forEach(el => {
-        const amount = el.getAttribute(billingMode === 'yearly' ? 'data-price-yearly' : 'data-price-monthly');
-        el.textContent = region.symbol + amount;
-      });
-      document.querySelectorAll('[data-price-free]').forEach(el => { el.textContent = region.symbol + '0'; });
-      document.querySelectorAll('[data-period]').forEach(el => { el.textContent = billingMode === 'yearly' ? '/year' : '/mo'; });
-      document.querySelectorAll('[data-tax-line]').forEach(el => { el.textContent = region.taxLine; });
-      const subtitle = document.getElementById('pricing-subtitle');
+    // Structural only. A card may legitimately carry a null amount, so we check
+    // the SHAPE and let render skip anything unpriceable -- rejecting the whole
+    // live payload over one odd card would pin the page to the snapshot forever.
+    function isValidPricing(body) {
+      return !!(body && body.success === true && body.data &&
+        Array.isArray(body.data.cards) && body.data.cards.length &&
+        body.data.cards.every(c => c && typeof c.id === 'string' && c.price && Array.isArray(c.highlights)));
+    }
+
+    function render(data) {
+      const grid = document.getElementById('pricing-grid');
+      if (!grid) return;
+
+      const cards = (data.cards || []).filter(c => c.self_serve && c.price && c.price.label);
+      grid.innerHTML = cards.map(c => `
+          <article class="pricing-card${c.popular ? ' primary-plan' : ''}">
+            ${c.popular ? '<span class="pricing-badge">Most popular</span>' : ''}
+            <div class="plan-name">${esc(c.name)}</div>
+            <div class="price-line"><strong>${esc(c.price.label)}</strong></div>
+            <div class="tax-line">${esc((data.region && data.region.tax_copy) || '')}</div>
+            <p class="plan-copy">${esc(c.tagline)}</p>
+            <ul class="feature-list">${(c.highlights || []).map(h => `<li>${esc(h)}</li>`).join('')}</ul>
+            <a class="small-btn${c.popular ? ' primaryish' : ''}" href="https://traylinx.com/admin/tytus">${esc((c.cta && c.cta.label) || 'Deploy my pod')}</a>
+          </article>`).join('');
+
+      // Annual terms are shown ONLY on the annual view and ONLY when the API
+      // says annual is sellable -- the same words Stripe Checkout puts above
+      // the pay button, so the promise cannot drift between the two.
+      const terms = document.getElementById('annual-terms');
+      const annual = data.annual;
+      const showTerms = billingMode === 'year' && annual && annual.enabled && annual.consent_text;
+      if (terms) {
+        terms.textContent = showTerms ? annual.consent_text : '';
+        terms.hidden = !showTerms;
+      }
+
       const footnote = document.getElementById('pricing-footnote');
-      if (subtitle) subtitle.textContent = region.subtitle;
-      if (footnote) footnote.textContent = region.footnote;
+      if (footnote) {
+        const tax = (data.region && data.region.tax_copy) || '';
+        footnote.textContent = tax
+          ? `${tax}. Checkout confirms the exact recurring total from your billing address.`
+          : 'Checkout confirms the exact recurring total from your billing address.';
+      }
+    }
+
+    async function loadPricing() {
+      const params = new URLSearchParams({ interval: billingMode });
+      if (billingCountry) params.set('country', billingCountry);
+      try {
+        const res = await fetch(`${PRICING_ENDPOINT}?${params}`, { headers: { Accept: 'application/json' } });
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        const body = await res.json();
+        render(isValidPricing(body) ? body.data : FALLBACK[billingMode]);
+      } catch (_) {
+        render(FALLBACK[billingMode]);
+      }
     }
 
     async function detectPricingCountry() {
-      applyPricing(countryFromLocale());
+      billingCountry = countryFromLocale();
+      await loadPricing();
       for (const endpoint of GEO_ENDPOINTS) {
         try {
           const res = await fetch(endpoint.url, { cache: 'no-store' });
           if (!res.ok) continue;
           const data = await res.json();
           const country = endpoint.pick(data);
-          if (country) { applyPricing(country); return; }
+          if (country && country !== billingCountry) { billingCountry = country; await loadPricing(); }
+          if (country) return;
         } catch (_) {}
       }
     }
@@ -452,7 +476,7 @@ <h2 class="section-title">Built for your agents</h2>
       btn.addEventListener('click', () => {
         billingMode = btn.getAttribute('data-billing');
         document.querySelectorAll('[data-billing]').forEach(b => b.classList.toggle('active', b === btn));
-        applyPricing(pricingCurrency === 'eur' ? 'DE' : 'US');
+        loadPricing();
       });
     });
 
diff --git a/web/pricing.test.mjs b/web/pricing.test.mjs
new file mode 100644
index 0000000..148402d
--- /dev/null
+++ b/web/pricing.test.mjs
@@ -0,0 +1,179 @@
+// Landing-page pricing contract. Network-free on purpose: it stubs `fetch`, so
+// CI never depends on the pricing API being up, and a red run always means the
+// PAGE changed rather than production wobbling.
+//
+// Why this exists. Until 2026-07-26 this page hardcoded three plans that had
+// been retired (Explorer/Creator/Operator at $39/$79/$149), advertised "Save 2
+// months", and promised a "7-day money-back guarantee" that the terms of sale
+// directly contradict. Nothing caught it because nothing was watching. These
+// checks watch.
+//
+// Run: node web/pricing.test.mjs
+
+import fs from 'node:fs';
+import vm from 'node:vm';
+import assert from 'node:assert/strict';
+
+const HTML = fs.readFileSync(new URL('./index.html', import.meta.url), 'utf8');
+const SCRIPT = HTML.match(/<script>([\s\S]*?)<\/script>/)[1];
+
+let failures = 0;
+const test = (name, fn) => {
+  try {
+    const r = fn();
+    return r instanceof Promise
+      ? r.then(() => console.log(`  ok  ${name}`), e => { failures++; console.error(`  FAIL ${name}\n       ${e.message}`); })
+      : console.log(`  ok  ${name}`);
+  } catch (e) {
+    failures++;
+    console.error(`  FAIL ${name}\n       ${e.message}`);
+  }
+};
+
+// ── sandbox ────────────────────────────────────────────────────────────────
+function boot(fetchImpl) {
+  const mk = () => ({ innerHTML: '', textContent: '', hidden: false, classList: { toggle() {} } });
+  const els = { 'pricing-grid': mk(), 'annual-terms': mk(), 'pricing-footnote': mk() };
+  const ctx = {
+    document: { getElementById: id => els[id] || null, querySelectorAll: () => [] },
+    navigator: { language: 'de-DE', languages: ['de-DE'] },
+    Intl: { DateTimeFormat: () => ({ resolvedOptions: () => ({ timeZone: 'Europe/Berlin' }) }) },
+    fetch: fetchImpl, URLSearchParams, console, setTimeout, clearTimeout
+  };
+  vm.createContext(ctx);
+  vm.runInContext(SCRIPT, ctx);
+  return { ctx, els };
+}
+
+async function renderAt(ctx, els, mode) {
+  vm.runInContext(`billingMode = ${JSON.stringify(mode)};`, ctx);
+  await vm.runInContext('loadPricing()', ctx);
+  const html = els['pricing-grid'].innerHTML;
+  return {
+    html,
+    prices: [...html.matchAll(/<strong>([^<]+)<\/strong>/g)].map(m => m[1]),
+    names: [...html.matchAll(/class="plan-name">([^<]+)</g)].map(m => m[1]),
+    terms: els['annual-terms'],
+    footnote: els['pricing-footnote'].textContent
+  };
+}
+
+const jsonOk = payload => async () => ({ ok: true, json: async () => payload });
+const dead = async () => { throw new Error('network down'); };
+
+const livePayload = (interval, label) => ({
+  success: true,
+  data: {
+    interval,
+    region: { currency: 'eur', tax_copy: 'VAT included where applicable' },
+    annual: interval === 'year'
+      ? { enabled: true, refundable: false, consent_text: 'Billed once for 12 months, up front.' }
+      : undefined,
+    cards: [
+      { id: 'starter', name: 'Starter', self_serve: true, popular: false, tagline: 'One private server.', price: { label }, highlights: ['EU-hosted'], cta: { label: 'Deploy My Pod' } },
+      { id: 'custom', name: 'Custom', self_serve: false, tagline: 'Talk to us.', price: {}, highlights: [] }
+    ]
+  }
+});
+
+console.log('landing pricing contract');
+
+// ── 1. the page must never carry a price of its own ───────────────────────
+await test('no retired plan names survive in the markup', () => {
+  const body = HTML.split('<script>')[0];
+  for (const dead of ['Explorer', 'Creator', 'Operator']) {
+    assert.ok(!body.includes(`>${dead}<`), `retired plan "${dead}" is still rendered`);
+  }
+});
+
+await test('no refund promise anywhere (the terms say no refunds)', () => {
+  assert.ok(!/money-back|money back/i.test(HTML.replace(/\/\/[^\n]*/g, '')), 'a money-back promise is still on the page');
+});
+
+await test('the annual toggle badge names no number of months', () => {
+  const badge = HTML.match(/class="save"[^>]*>([^<]+)</)[1];
+  assert.ok(!/\d/.test(badge), `toggle badge "${badge}" names a number`);
+  assert.ok(!/month/i.test(badge), `toggle badge "${badge}" promises months`);
+});
+
+// ── 2. live payload wins ──────────────────────────────────────────────────
+await test('renders the amount the API returns, monthly', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('month', '€24')));
+  const r = await renderAt(ctx, els, 'month');
+  assert.deepEqual(r.prices, ['€24']);
+  assert.deepEqual(r.names, ['Starter']);
+});
+
+await test('renders the amount the API returns, annual', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('year', '€269/yr')));
+  const r = await renderAt(ctx, els, 'year');
+  assert.deepEqual(r.prices, ['€269/yr']);
+});
+
+await test('a changed API amount changes the page with no code edit', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('month', '€31')));
+  const r = await renderAt(ctx, els, 'month');
+  assert.deepEqual(r.prices, ['€31'], 'page did not follow the API');
+});
+
+await test('skips cards that are not self-serve', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('month', '€24')));
+  const r = await renderAt(ctx, els, 'month');
+  assert.ok(!r.names.includes('Custom'), 'a non-self-serve card was rendered as buyable');
+});
+
+// ── 3. annual terms show only where they are true ─────────────────────────
+await test('shows the annual terms on the annual view', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('year', '€269/yr')));
+  const r = await renderAt(ctx, els, 'year');
+  assert.equal(r.terms.hidden, false);
+  assert.match(r.terms.textContent, /12 months/);
+});
+
+await test('hides the annual terms on the monthly view', async () => {
+  const { ctx, els } = boot(jsonOk(livePayload('month', '€24')));
+  const r = await renderAt(ctx, els, 'month');
+  assert.equal(r.terms.hidden, true, '"not refundable" must not sit next to a plan you can cancel monthly');
+});
+
+await test('hides the annual terms when the API says annual is dark', async () => {
+  const p = livePayload('year', '€269/yr');
+  p.data.annual = { enabled: false };
+  const { ctx, els } = boot(jsonOk(p));
+  const r = await renderAt(ctx, els, 'year');
+  assert.equal(r.terms.hidden, true);
+});
+
+// ── 4. degradation, not blanking ──────────────────────────────────────────
+await test('falls back to the bundled snapshot when the API is down', async () => {
+  const { ctx, els } = boot(dead);
+  for (const mode of ['month', 'year']) {
+    const r = await renderAt(ctx, els, mode);
+    assert.ok(r.prices.length >= 4, `${mode} blanked instead of degrading`);
+    assert.ok(!/\$/.test(r.html), `${mode} fallback shows a USD price`);
+  }
+});
+
+await test('rejects a malformed payload rather than rendering it', async () => {
+  const { ctx, els } = boot(jsonOk({ success: true, data: { cards: [{ id: 'x' }] } }));
+  const r = await renderAt(ctx, els, 'month');
+  assert.ok(r.prices.length >= 4, 'a malformed payload was rendered instead of the snapshot');
+});
+
+await test('rejects a non-200 rather than rendering it', async () => {
+  const { ctx, els } = boot(async () => ({ ok: false, status: 500, json: async () => ({}) }));
+  const r = await renderAt(ctx, els, 'month');
+  assert.ok(r.prices.length >= 4);
+});
+
+// ── 5. injection ──────────────────────────────────────────────────────────
+await test('escapes API-supplied text', async () => {
+  const p = livePayload('month', '<img src=x onerror=alert(1)>');
+  const { ctx, els } = boot(jsonOk(p));
+  const r = await renderAt(ctx, els, 'month');
+  assert.ok(!r.html.includes('<img'), 'API text was injected as raw HTML');
+  assert.ok(r.html.includes('&lt;img'), 'API text was not escaped');
+});
+
+console.log(failures ? `\n${failures} failing` : '\nall passing');
+process.exit(failures ? 1 : 0);

From d2b5a62db7aa04b299c696d168ccfac30ac3b32c Mon Sep 17 00:00:00 2001
From: rschumann <sebastian.schkudlara@gmail.com>
Date: Sun, 26 Jul 2026 10:13:48 +0200
Subject: [PATCH 2/3] Never show one term's prices under the other term's label
 (codex, PR #37)

Three real defects from the codex review, all the same shape: the page
could display a price we do not charge.

1. STALE RESPONSE. loadPricing() read the global billingMode again AFTER
   the await, so toggling month -> year while the month request was in
   flight let the late MONTHLY response paint itself under an active
   Yearly toggle. Requests now carry a monotonic id and only the newest
   one may render.

2. UNVALIDATED TERM. isValidPricing() checked the payload's shape but not
   its interval. A proxy that drops `interval` returns a structurally
   perfect MONTHLY payload for a YEARLY request -- exactly the bug that
   shipped in the pricing proxy earlier the same day, where nothing failed
   loudly because the payload was valid and only the term was wrong. The
   requested interval is now demanded back.

3. UNCONFIRMED ANNUAL LADDER. A failed annual load rendered the bundled
   annual snapshot, which cannot know whether annual is still sellable --
   so an outage would advertise a term we may have switched off. A failed
   annual load now drops to the SHORTER commitment and moves the toggle
   with it, so the label always matches the amounts. Monthly is always
   honourable; that asymmetry mirrors the pricing services, where display
   leniency falls toward the shorter term and never toward the longer one.

Three tests added for exactly these (codex point 5): a wrong-interval
payload, a superseded in-flight request landing late, and a failed annual
load moving the toggle. 17 assertions, still network-free.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/index.html       | 51 +++++++++++++++++++++++++++++-----
 web/pricing.test.mjs | 66 ++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 108 insertions(+), 9 deletions(-)

diff --git a/web/index.html b/web/index.html
index a2b7c25..c1be19c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -402,13 +402,20 @@ <h2 class="section-title">Built for your agents</h2>
     // Structural only. A card may legitimately carry a null amount, so we check
     // the SHAPE and let render skip anything unpriceable -- rejecting the whole
     // live payload over one odd card would pin the page to the snapshot forever.
-    function isValidPricing(body) {
+    //
+    // The interval check is NOT cosmetic. A proxy that drops `interval` returns a
+    // structurally perfect MONTHLY payload for a YEARLY request, and the page
+    // would print monthly amounts under the Yearly toggle. That exact bug shipped
+    // in the pricing proxy on 2026-07-26 and nothing failed loudly, because the
+    // payload was valid -- it was just the wrong term. Demand the term back.
+    function isValidPricing(body, wantInterval) {
       return !!(body && body.success === true && body.data &&
+        body.data.interval === wantInterval &&
         Array.isArray(body.data.cards) && body.data.cards.length &&
         body.data.cards.every(c => c && typeof c.id === 'string' && c.price && Array.isArray(c.highlights)));
     }
 
-    function render(data) {
+    function render(data, mode) {
       const grid = document.getElementById('pricing-grid');
       if (!grid) return;
 
@@ -429,7 +436,7 @@ <h2 class="section-title">Built for your agents</h2>
       // the pay button, so the promise cannot drift between the two.
       const terms = document.getElementById('annual-terms');
       const annual = data.annual;
-      const showTerms = billingMode === 'year' && annual && annual.enabled && annual.consent_text;
+      const showTerms = mode === 'year' && annual && annual.enabled && annual.consent_text;
       if (terms) {
         terms.textContent = showTerms ? annual.consent_text : '';
         terms.hidden = !showTerms;
@@ -444,16 +451,46 @@ <h2 class="section-title">Built for your agents</h2>
       }
     }
 
+    function setBillingButtons(mode) {
+      document.querySelectorAll('[data-billing]').forEach(b =>
+        b.classList.toggle('active', b.getAttribute('data-billing') === mode));
+    }
+
+    // An UNCONFIRMED annual ladder is the dangerous one. If annual has been
+    // switched off server-side we would be advertising a term we will not sell,
+    // and the bundled snapshot cannot know that. So a failed annual load drops
+    // to the SHORTER commitment and moves the toggle with it: the label then
+    // still matches the amounts, and monthly is always honourable. This mirrors
+    // the same asymmetry the pricing services use -- leniency falls toward the
+    // shorter term, never toward the longer one.
+    function degrade(mode) {
+      if (mode === 'year') {
+        billingMode = 'month';
+        setBillingButtons('month');
+      }
+      render(FALLBACK.month, 'month');
+    }
+
+    // Monotonic request id. Toggling month -> year while the month request is
+    // still in flight used to let the late MONTHLY response paint itself under
+    // an active Yearly toggle. Only the newest request may render.
+    let requestSeq = 0;
+
     async function loadPricing() {
-      const params = new URLSearchParams({ interval: billingMode });
+      const seq = ++requestSeq;
+      const mode = billingMode;
+      const params = new URLSearchParams({ interval: mode });
       if (billingCountry) params.set('country', billingCountry);
       try {
         const res = await fetch(`${PRICING_ENDPOINT}?${params}`, { headers: { Accept: 'application/json' } });
         if (!res.ok) throw new Error('HTTP ' + res.status);
         const body = await res.json();
-        render(isValidPricing(body) ? body.data : FALLBACK[billingMode]);
+        if (seq !== requestSeq) return;
+        if (!isValidPricing(body, mode)) throw new Error('unusable payload');
+        render(body.data, mode);
       } catch (_) {
-        render(FALLBACK[billingMode]);
+        if (seq !== requestSeq) return;
+        degrade(mode);
       }
     }
 
@@ -475,7 +512,7 @@ <h2 class="section-title">Built for your agents</h2>
     document.querySelectorAll('[data-billing]').forEach(btn => {
       btn.addEventListener('click', () => {
         billingMode = btn.getAttribute('data-billing');
-        document.querySelectorAll('[data-billing]').forEach(b => b.classList.toggle('active', b === btn));
+        setBillingButtons(billingMode);
         loadPricing();
       });
     });
diff --git a/web/pricing.test.mjs b/web/pricing.test.mjs
index 148402d..7120f19 100644
--- a/web/pricing.test.mjs
+++ b/web/pricing.test.mjs
@@ -34,15 +34,28 @@ const test = (name, fn) => {
 function boot(fetchImpl) {
   const mk = () => ({ innerHTML: '', textContent: '', hidden: false, classList: { toggle() {} } });
   const els = { 'pricing-grid': mk(), 'annual-terms': mk(), 'pricing-footnote': mk() };
+  // Real toggle stubs so setBillingButtons() is exercised: the failed-annual
+  // path MOVES the toggle, and a test that cannot see that proves nothing.
+  const buttons = ['month', 'year'].map(mode => ({
+    mode, active: mode === 'month',
+    getAttribute: () => mode,
+    addEventListener() {},
+    classList: { toggle(_cls, on) { this.owner.active = on; } }
+  }));
+  buttons.forEach(b => { b.classList.owner = b; });
   const ctx = {
-    document: { getElementById: id => els[id] || null, querySelectorAll: () => [] },
+    document: {
+      getElementById: id => els[id] || null,
+      querySelectorAll: sel => (sel === '[data-billing]' ? buttons : [])
+    },
     navigator: { language: 'de-DE', languages: ['de-DE'] },
     Intl: { DateTimeFormat: () => ({ resolvedOptions: () => ({ timeZone: 'Europe/Berlin' }) }) },
     fetch: fetchImpl, URLSearchParams, console, setTimeout, clearTimeout
   };
   vm.createContext(ctx);
   vm.runInContext(SCRIPT, ctx);
-  return { ctx, els };
+  const activeToggle = () => (buttons.find(b => b.active) || {}).mode;
+  return { ctx, els, buttons, activeToggle };
 }
 
 async function renderAt(ctx, els, mode) {
@@ -175,5 +188,54 @@ await test('escapes API-supplied text', async () => {
   assert.ok(r.html.includes('&lt;img'), 'API text was not escaped');
 });
 
+// ── 6. term integrity: never show one term's prices under the other's label ──
+// These three come from the codex review of PR #37. The first is the same bug
+// class that shipped in the pricing proxy the same day: a structurally perfect
+// payload carrying the WRONG TERM, which nothing failed loudly on.
+
+await test('rejects a payload whose interval is not the one requested', async () => {
+  // Asked for a year, proxy answered with month. Structurally valid, wrong term.
+  const wrong = livePayload('month', '€24');
+  const { ctx, els, activeToggle } = boot(jsonOk(wrong));
+  const r = await renderAt(ctx, els, 'year');
+  assert.ok(!r.prices.includes('€24') || r.prices.length >= 4,
+    'monthly amounts were rendered for a yearly request');
+  assert.equal(activeToggle(), 'month', 'toggle must follow the term actually shown');
+});
+
+await test('a late reply from a superseded request cannot repaint the page', async () => {
+  let release;
+  const slowMonth = new Promise(res => { release = res; });
+  const fetchImpl = async url => {
+    if (String(url).includes('interval=month')) {
+      await slowMonth;
+      return { ok: true, json: async () => livePayload('month', '€24') };
+    }
+    return { ok: true, json: async () => livePayload('year', '€269/yr') };
+  };
+  const { ctx, els } = boot(fetchImpl);
+
+  vm.runInContext("billingMode='month';", ctx);
+  const monthCall = vm.runInContext('loadPricing()', ctx);   // in flight
+  vm.runInContext("billingMode='year';", ctx);
+  await vm.runInContext('loadPricing()', ctx);               // supersedes it
+  release();                                                  // month lands late
+  await monthCall;
+
+  const prices = [...els['pricing-grid'].innerHTML.matchAll(/<strong>([^<]+)<\/strong>/g)].map(m => m[1]);
+  assert.deepEqual(prices, ['€269/yr'], 'a stale monthly response repainted the yearly view');
+});
+
+await test('a failed ANNUAL load drops to monthly and moves the toggle with it', async () => {
+  // The bundled snapshot cannot know whether annual is still sellable. Showing
+  // an unconfirmed annual ladder would advertise a term we may have switched
+  // off, so degrade toward the SHORTER commitment, never the longer one.
+  const { ctx, els, activeToggle } = boot(dead);
+  const r = await renderAt(ctx, els, 'year');
+  assert.equal(activeToggle(), 'month', 'toggle still said Yearly while showing fallback prices');
+  assert.equal(r.terms.hidden, true, 'annual terms shown for an unconfirmed annual ladder');
+  assert.ok(r.prices.every(p => !/\/yr/.test(p)), 'yearly labels survived a failed annual load');
+});
+
 console.log(failures ? `\n${failures} failing` : '\nall passing');
 process.exit(failures ? 1 : 0);

From 869d4edd3cc3bbabc3df1373e133925acbc6c8c9 Mon Sep 17 00:00:00 2001
From: rschumann <sebastian.schkudlara@gmail.com>
Date: Sun, 26 Jul 2026 10:20:59 +0200
Subject: [PATCH 3/3] Move the landing test out of the published asset root

web/ IS the website. Cloudflare Workers serves ./web directly
(wrangler.jsonc "assets.directory") and the Pages job does
`cp -rL web/. _site/`, so web/pricing.test.mjs would have been downloadable
at https://get.traylinx.com/pricing.test.mjs on both deploy paths -- and it
carries internal notes about retired prices and the money-back incident.
It also turned the Workers build red, which is how it surfaced: that check
is green on main and went red only on this branch.

Moved to tests/landing-pricing.test.mjs, outside the asset root, and the
pr.yml job follows it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .github/workflows/pr.yml                               | 2 +-
 web/pricing.test.mjs => tests/landing-pricing.test.mjs | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)
 rename web/pricing.test.mjs => tests/landing-pricing.test.mjs (96%)

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 28b6f4c..4a5d8ff 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -189,7 +189,7 @@ jobs:
       # 2026-07-26 drift where get.traylinx.com advertised three retired plans
       # and a money-back guarantee the terms of sale contradict.
       - name: Landing page must render prices from the live API, not literals
-        run: node web/pricing.test.mjs
+        run: node tests/landing-pricing.test.mjs
 
   rust:
     name: Rust ${{ matrix.os }}
diff --git a/web/pricing.test.mjs b/tests/landing-pricing.test.mjs
similarity index 96%
rename from web/pricing.test.mjs
rename to tests/landing-pricing.test.mjs
index 7120f19..4899361 100644
--- a/web/pricing.test.mjs
+++ b/tests/landing-pricing.test.mjs
@@ -8,13 +8,17 @@
 // directly contradict. Nothing caught it because nothing was watching. These
 // checks watch.
 //
-// Run: node web/pricing.test.mjs
+// Run: node tests/landing-pricing.test.mjs
+//
+// NOT in web/. That directory is the published asset root -- Cloudflare Workers
+// serves ./web directly and the Pages job does `cp -rL web/. _site/` -- so a
+// test file living there would be downloadable at get.traylinx.com.
 
 import fs from 'node:fs';
 import vm from 'node:vm';
 import assert from 'node:assert/strict';
 
-const HTML = fs.readFileSync(new URL('./index.html', import.meta.url), 'utf8');
+const HTML = fs.readFileSync(new URL('../web/index.html', import.meta.url), 'utf8');
 const SCRIPT = HTML.match(/<script>([\s\S]*?)<\/script>/)[1];
 
 let failures = 0;