feat(mobile): show subscription expiry + let premium users extend

The gateway already returns paid_until in /v1/status but the app discarded
it. Now:

- useVpn captures paid_until (from both the connected and disconnected
  polls) and exposes it as `paidUntil`.
- Upgrade screen shows "Active until <date> · N days left" for premium, and
  no longer hides the pay flow from premium users — it becomes an "Add more
  time" flow (pay again → stacks 30 days on top of the current expiry).
- Settings gains a "Plan" row (tier pill + expiry) that taps through to the
  plan screen.
- The tier pill on Connect is now tappable (premium or free) and opens the
  plan screen, so "tap the Premium button" shows plan details + extend.

Entitlement is chain-derived and identical on every gateway, so the expiry
is read straight from status — no new endpoint.

Author: TheTrunk

clients/mobile/App.tsx

@@ -95,12 +95,17 @@ function App(): React.JSX.Element {
           ) : route === 'upgrade' ? (
             <UpgradeScreen
               tier={vpn.tier}
+              paidUntil={vpn.paidUntil}
               payment={vpn.payment}
               inAppUpgrade={flags.inAppUpgrade}
               onClose={() => setRoute('connect')}
             />
           ) : route === 'settings' ? (
-            <SettingsScreen vpn={vpn} onClose={() => setRoute('connect')} />
+            <SettingsScreen
+              vpn={vpn}
+              onClose={() => setRoute('connect')}
+              onOpenUpgrade={() => setRoute('upgrade')}
+            />
           ) : (
             <ConnectScreen
               vpn={vpn}

clients/mobile/src/screens/ConnectScreen.tsx

@@ -87,7 +87,14 @@ export function ConnectScreen({
       <View style={styles.top}>
         <Text style={styles.brand}>CumulusVPN</Text>
         <View style={styles.topRight}>
-          <TierPill tier={vpn.tier} />
+          <Pressable
+            onPress={onOpenUpgrade}
+            accessibilityRole="button"
+            accessibilityLabel={vpn.tier === 'premium' ? 'View your plan' : 'Upgrade to Premium'}
+            hitSlop={8}
+          >
+            <TierPill tier={vpn.tier} />
+          </Pressable>
           <Pressable onPress={onOpenSettings} accessibilityRole="button" hitSlop={10}>
             <Text style={styles.gear}>⚙</Text>
           </Pressable>

clients/mobile/src/screens/SettingsScreen.tsx

@@ -6,7 +6,9 @@ import { Linking, Pressable, ScrollView, StyleSheet, Text, View } from 'react-na
 import type { VpnActions, VpnModel } from '../state/useVpn';
 import { CVPN_DIRECTORY_PUBKEY } from '../lib/directory';
 import { PoweredByFlux } from '../components/PoweredByFlux';
+import { TierPill } from '../components/TierPill';
 import { Toggle } from '../components/Toggle';
+import { formatExpiry } from './UpgradeScreen';
 import { color, font, radius, space } from '../theme/tokens';
 
 /** App version — matches the release tag; single source is package.json. */
@@ -16,9 +18,12 @@ const SITE_URL = 'https://cumulusvpn.com';
 interface Props {
   readonly vpn: VpnModel & VpnActions;
   readonly onClose: () => void;
+  readonly onOpenUpgrade: () => void;
 }
 
-export function SettingsScreen({ vpn, onClose }: Props): React.JSX.Element {
+export function SettingsScreen({ vpn, onClose, onOpenUpgrade }: Props): React.JSX.Element {
+  const premium = vpn.tier === 'premium';
+  const expiry = formatExpiry(vpn.paidUntil);
   return (
     <View style={styles.root}>
       <View style={styles.header}>
@@ -29,6 +34,30 @@ export function SettingsScreen({ vpn, onClose }: Props): React.JSX.Element {
       </View>
 
       <ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
+        <Text style={styles.section}>Plan</Text>
+        <Pressable
+          style={styles.planRow}
+          onPress={onOpenUpgrade}
+          accessibilityRole="button"
+          accessibilityLabel={premium ? 'Manage your Premium plan' : 'Upgrade to Premium'}
+        >
+          <View style={styles.rowMeta}>
+            <View style={styles.planTop}>
+              <TierPill tier={vpn.tier} />
+            </View>
+            <Text style={styles.rowSub}>
+              {premium
+                ? expiry
+                  ? `Active until ${expiry.date} · ${expiry.daysLeft} ${
+                      expiry.daysLeft === 1 ? 'day' : 'days'
+                    } left`
+                  : 'Full speed on every gateway'
+                : 'Limited to 100 KB/s — tap to upgrade'}
+            </Text>
+          </View>
+          <Text style={styles.chev}>›</Text>
+        </Pressable>
+
         <Text style={styles.section}>Connection</Text>
         <ToggleRow
           title="Auto-connect on launch"
@@ -143,6 +172,20 @@ const styles = StyleSheet.create({
     marginBottom: space.sm,
     gap: space.md,
   },
+  planRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: color.glass,
+    borderColor: color.hairline,
+    borderWidth: 1,
+    borderRadius: radius.sm,
+    paddingHorizontal: space.md,
+    paddingVertical: 12,
+    marginBottom: space.sm,
+    gap: space.md,
+  },
+  planTop: { flexDirection: 'row', alignItems: 'center', marginBottom: 4 },
   rowMeta: { flex: 1 },
   rowTitle: { color: color.ink, fontSize: 15, fontWeight: '600' },
   rowSub: { color: color.inkDim, fontSize: 12, marginTop: 2 },

clients/mobile/src/screens/UpgradeScreen.tsx

@@ -25,6 +25,8 @@ import { color, font, radius, space } from '../theme/tokens';
 
 interface Props {
   readonly tier: Tier;
+  /** RFC3339 timestamp premium is paid through, or null when free/unknown. */
+  readonly paidUntil: string | null;
   readonly payment: PaymentIdentity | null;
   /** Remote flag: when true, show the in-app pay flow; else "manage on web". */
   readonly inAppUpgrade: boolean;
@@ -34,8 +36,34 @@ interface Props {
 /** Where the prefilled pay-to-address upgrade flow lives on the web. */
 const UPGRADE_URL = 'vpn.cumulusvpn.com';
 
-export function UpgradeScreen({ tier, payment, inAppUpgrade, onClose }: Props): React.JSX.Element {
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+/**
+ * Format an RFC3339 expiry into a short date + whole days remaining. Hand-rolled
+ * (no `Intl`/`toLocaleDateString`) so it's identical across Hermes/JSC.
+ */
+export function formatExpiry(iso: string | null): { date: string; daysLeft: number } | null {
+  if (!iso) {
+    return null;
+  }
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) {
+    return null;
+  }
+  const d = new Date(t);
+  const daysLeft = Math.max(0, Math.ceil((t - Date.now()) / 86_400_000));
+  return { date: `${d.getDate()} ${MONTHS[d.getMonth()]} ${d.getFullYear()}`, daysLeft };
+}
+
+export function UpgradeScreen({
+  tier,
+  paidUntil,
+  payment,
+  inAppUpgrade,
+  onClose,
+}: Props): React.JSX.Element {
   const premium = tier === 'premium';
+  const expiry = formatExpiry(paidUntil);
   return (
     <ScrollView
       style={styles.root}
@@ -55,9 +83,23 @@ export function UpgradeScreen({ tier, payment, inAppUpgrade, onClose }: Props):
           <TierPill tier={tier} />
         </View>
         {premium ? (
-          <Text style={styles.copy}>
-            You’re on Premium — full speed on every gateway. Nothing to do here.
-          </Text>
+          <>
+            <Text style={styles.copy}>
+              You’re on Premium — full speed on every gateway. Pay again any time to add more time;
+              it stacks on top of your current expiry.
+            </Text>
+            {expiry ? (
+              <View style={styles.priceRow}>
+                <Text style={styles.priceLabel}>Active until</Text>
+                <Text style={styles.price}>
+                  {expiry.date}{' '}
+                  <Text style={styles.priceUnit}>
+                    · {expiry.daysLeft} {expiry.daysLeft === 1 ? 'day' : 'days'} left
+                  </Text>
+                </Text>
+              </View>
+            ) : null}
+          </>
         ) : (
           <>
             <Text style={styles.copy}>
@@ -76,17 +118,23 @@ export function UpgradeScreen({ tier, payment, inAppUpgrade, onClose }: Props):
         )}
       </View>
 
-      {premium || !payment ? null : inAppUpgrade ? (
-        <InAppPay payment={payment} />
+      {!payment ? null : inAppUpgrade ? (
+        <InAppPay payment={payment} premium={premium} />
       ) : (
-        <ManageOnWeb payment={payment} />
+        <ManageOnWeb payment={payment} premium={premium} />
       )}
     </ScrollView>
   );
 }
 
 /** Full in-app pay flow: QR + wallet hand-off + prefilled details. */
-function InAppPay({ payment }: { readonly payment: PaymentIdentity }): React.JSX.Element {
+function InAppPay({
+  payment,
+  premium,
+}: {
+  readonly payment: PaymentIdentity;
+  readonly premium: boolean;
+}): React.JSX.Element {
   const [walletError, setWalletError] = useState<string | null>(null);
   // The QR carries the BIP21 `flux:` payload — that's what a wallet's in-app
   // scanner (Zelcore / SSP) parses to a prefilled send.
@@ -113,6 +161,7 @@ function InAppPay({ payment }: { readonly payment: PaymentIdentity }): React.JSX
 
   return (
     <>
+      <Text style={styles.section}>{premium ? 'Add more time' : 'Pay with FLUX'}</Text>
       <View style={styles.qrWrap}>
         <Qr value={qrLink} size={196} />
         <Text style={styles.qrCap}>Scan with Zelcore / SSP Wallet</Text>
@@ -143,7 +192,11 @@ function InAppPay({ payment }: { readonly payment: PaymentIdentity }): React.JSX
         />
         <Step
           n={3}
-          text="This device unlocks automatically within ~1 minute, on every gateway at once."
+          text={
+            premium
+              ? 'Another 30 days is added on top of your current expiry within ~1 minute, on every gateway at once.'
+              : 'This device unlocks automatically within ~1 minute, on every gateway at once.'
+          }
         />
       </View>
 
@@ -165,10 +218,16 @@ function InAppPay({ payment }: { readonly payment: PaymentIdentity }): React.JSX
 }
 
 /** Store-compliant "manage on the web" copy: no QR / address / purchase link. */
-function ManageOnWeb({ payment }: { readonly payment: PaymentIdentity }): React.JSX.Element {
+function ManageOnWeb({
+  payment,
+  premium,
+}: {
+  readonly payment: PaymentIdentity;
+  readonly premium: boolean;
+}): React.JSX.Element {
   return (
     <>
-      <Text style={styles.section}>How to upgrade</Text>
+      <Text style={styles.section}>{premium ? 'How to add more time' : 'How to upgrade'}</Text>
       <View style={styles.steps}>
         <Step n={1} text={`Open ${UPGRADE_URL} in any browser — on this phone or a computer.`} />
         <Step

clients/mobile/src/state/useVpn.ts

@@ -76,6 +76,8 @@ export interface VpnModel {
   readonly state: TunnelState;
   readonly status: TunnelStatus | null;
   readonly tier: Tier;
+  /** RFC3339 timestamp premium is paid through, or null when free/unknown. */
+  readonly paidUntil: string | null;
   /** True while the initial discovery/enroll bootstrap is running. */
   readonly booting: boolean;
   /** True while a fleet discovery is in flight (initial or pull-to-refresh). */
@@ -167,6 +169,8 @@ export function useVpn(): VpnModel & VpnActions {
   const [state, setState] = useState<TunnelState>('disconnected');
   const [status, setStatus] = useState<TunnelStatus | null>(null);
   const [tier, setTier] = useState<Tier>('free');
+  // RFC3339 timestamp premium is paid through (null when free / unknown).
+  const [paidUntil, setPaidUntil] = useState<string | null>(null);
   const [booting, setBooting] = useState(true);
   // True while a fleet discovery is in flight (initial + pull-to-refresh). Lets
   // the UI show a lightweight "finding servers" hint instead of pinning the
@@ -525,6 +529,7 @@ export function useVpn(): VpnModel & VpnActions {
           const st = await fetchStatus(activeIp, pubkey);
           if (alive) {
             setTier(st.tier);
+            setPaidUntil(st.tier === 'premium' ? st.paid_until : null);
           }
         } catch {
           // Non-fatal: keep the last known tier.
@@ -538,20 +543,19 @@ export function useVpn(): VpnModel & VpnActions {
       if (sample.length === 0) {
         return;
       }
-      const tiers = await Promise.all(
-        sample.map((g) =>
-          fetchStatus(g.ip, pubkey)
-            .then((s) => s.tier)
-            .catch(() => null),
-        ),
+      const results = await Promise.all(
+        sample.map((g) => fetchStatus(g.ip, pubkey).catch(() => null)),
       );
       if (!alive) {
         return;
       }
-      if (tiers.some((t) => t === 'premium')) {
+      const premiumResult = results.find((r) => r?.tier === 'premium');
+      if (premiumResult) {
         setTier('premium');
-      } else if (tiers.some((t) => t === 'free')) {
+        setPaidUntil(premiumResult.paid_until);
+      } else if (results.some((r) => r)) {
         setTier('free');
+        setPaidUntil(null);
       }
     };
     const id = setInterval(poll, STATUS_POLL_MS);
@@ -762,6 +766,7 @@ export function useVpn(): VpnModel & VpnActions {
     state,
     status,
     tier,
+    paidUntil,
     booting,
     discovering,
     error,