Subscription card + resize dispatch + WS plumbing (closes #20)

[ClaydeCode]

Summary

• New <b-card title="Subscription"> in Settings with five render states (Trial / Interstitial / Active / Active+pending / Grace), driven by a single subscriptionState computed.
• resizeShard() now redirects to the PayPal approval_url when present, otherwise falls through to the existing /restart navigation. Size buttons disable while a pending_vm_size is in flight.
• Subscribe / Reactivate button POSTs the subscribe endpoint and redirects on the returned approval_url.
• Vuex handle_websocket_message dispatches force_query_profile_data on the subscription_updated WS event so the UI converges without a reload. Component-local 3s/60s polling fallback covers WS-missed deliveries during the post-PayPal interstitial.
• New pure helper src/lib/pricing.js mirrors the landing-page formula for the Subscribe-button label only. Active / Grace render price_cents from the controller directly so existing subscribers stay grandfathered.

Depends on

• fix(profile): expose volume_size_gb on Profile model freeshard#84 (merged) — exposes Profile.volume_size_gb, which the pricing helper uses for the Subscribe-button label. Defensive null fallback (€—) remains in place for legacy shards where volume_size_gb is unset upstream.

Recommended reading order

1. src/lib/pricing.js — pure helper.
2. src/store.js — WS dispatch.
3. src/views/Settings.vue — UI states + polling + subscribe / resize dispatch.
4. tests/unit/pricing.spec.js, tests/unit/store.spec.js — unit tests.
5. package.json — Jest devDeps + test:unit script + Jest preset.
6. babel.config.js — unchanged (@vue/cli-plugin-babel/preset already covers Jest's babel-jest transform).

Manual QA checklist

• Trial state: subscription=null, delete_after set → banner shows date + Subscribe button with €X/month
• Trial + ?sub=cancel → warning banner, dismissible, URL cleared on dismiss
• Interstitial: navigate to /settings?sub=return with null subscription → spinner + "Activating…"
• Interstitial timeout: wait 60s (or stub) → Refresh button visible
• Active: subscription with status=active → plan/amount/next-charge/payer + "Manage on PayPal" opens new tab
• Active+pending: set pending_vm_size → upgrade-pending alert + Size buttons disabled
• Grace: status=grace + delete_after → "Subscription ended" + Reactivate button
• Subscribe click → POSTs subscribe endpoint → window.location set to approval URL
• Resize subscribed (response has approval_url) → redirects to PayPal
• Resize unsubscribed (no approval_url) → navigates to /restart
• WS event injected (via shard-core /core/management/notify) → profile refetches
• PayPal return: status converges to active → query param cleared without manual reload

Verification run locally

• npm install — OK (Jest 26 + @vue/cli-plugin-unit-jest@~4.5.0 added).
• npm run lint — clean.
• npm run test:unit — 13/13 pass (10 pricing + 3 store).
• npm run build — production build OK (pre-existing bundle-size warnings only).
• npm run serve — dev server boots, GET / returns 200 with the SPA shell.

Notes

• Component-level render tests for the five UI states are intentionally skipped (per scope decision). Manual QA above covers them.

Closes #20

🤖 Generated with Claude Code