feat: user menu + profile page + in-app subscription management

User-facing identity:
- UserMenu component in dashboard header: avatar (deterministic colour from
  email hash), email + name, current plan badge, dropdown to Profile /
  Billing / Support / Your data / (Admin panel if isAdmin) / Sign out
- /settings/profile: editable display name; email + phone shown read-only
  (changing them requires support ticket — magic-link flow assumed)
- GET + PATCH /v1/account/profile

In-app subscription management (no more Stripe Portal redirect for the
common flows — cancellation, plan switch, invoice viewing all in-app):
- Billing status now combines DB state with a live Stripe lookup of the
  subscription details + last 5 invoices. Single roundtrip.
- POST /v1/billing/cancel       → schedules cancel_at_period_end
- POST /v1/billing/reactivate   → undo scheduled cancel
- POST /v1/billing/change-plan  → prorated swap between any tier+cycle
- /settings/billing rewritten: current plan card with renew/cancel date,
  big cancel button + reactivate flow, plan-switcher grid, invoice list with
  PDF + hosted-invoice links
- Stripe portal still linked at the bottom as the escape hatch for rare
  actions (payment-method update, address change). New-subscription Checkout
  still uses Stripe-hosted Checkout (industry standard for PCI).

Stripe SDK v22 / API 2024-09 fix: current_period_end moved to subscription
items; updated read paths accordingly.

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

apps/web/app/(dashboard)/settings/profile/page.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { Input, Label } from '@/components/input';
+import { Button } from '@/components/ui/button';
+import { apiFetch } from '@/lib/api';
+import { Loader2 } from 'lucide-react';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+interface Profile {
+  id: string;
+  email: string;
+  name: string | null;
+  phone: string | null;
+  isAdmin: boolean;
+  createdAt: string;
+}
+
+export default function ProfilePage() {
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [name, setName] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  function load() {
+    apiFetch<{ profile: Profile }>('/v1/account/profile')
+      .then((r) => {
+        setProfile(r.profile);
+        setName(r.profile.name ?? '');
+      })
+      .catch((e) => setError((e as Error).message));
+  }
+
+  useEffect(load, []);
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    if (!profile) return;
+    setBusy(true);
+    setError(null);
+    setSaved(false);
+    try {
+      await apiFetch('/v1/account/profile', {
+        method: 'PATCH',
+        body: JSON.stringify({ name: name.trim() }),
+      });
+      setSaved(true);
+      load();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (!profile && !error) {
+    return (
+      <div className="mx-auto max-w-2xl px-6 py-12 text-center">
+        <Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={20} />
+      </div>
+    );
+  }
+  if (!profile) {
+    return (
+      <div className="mx-auto max-w-2xl px-6 py-12">
+        <p className="text-[13px] text-[--color-danger]">{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-10">
+      <h1 className="text-[22px] font-semibold tracking-tight">Profile</h1>
+      <p className="mt-1 text-[13px] text-[--color-fg-muted]">
+        Personal details. Email and phone can&apos;t be changed self-service yet — open a{' '}
+        <Link href="/settings/support" className="text-[--color-accent] hover:underline">
+          support ticket
+        </Link>
+        {' '}
+        if you need it changed.
+      </p>
+
+      <form onSubmit={save} className="panel mt-6 space-y-4 p-5">
+        <div className="space-y-1.5">
+          <Label htmlFor="name">Display name</Label>
+          <Input
+            id="name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            maxLength={128}
+            placeholder="How should we address you?"
+          />
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-2">
+          <ReadField label="Email" value={profile.email} mono />
+          <ReadField label="Phone" value={profile.phone ?? '—'} mono />
+          <ReadField label="Account created" value={new Date(profile.createdAt).toLocaleString()} />
+          <ReadField label="Role" value={profile.isAdmin ? 'Admin' : 'Member'} />
+        </div>
+
+        {error && <p className="text-[12.5px] text-[--color-danger]">{error}</p>}
+        {saved && <p className="text-[12.5px] text-emerald-300">Saved.</p>}
+
+        <div className="flex justify-end">
+          <Button
+            variant="primary"
+            size="md"
+            type="submit"
+            disabled={busy || name.trim() === (profile.name ?? '')}
+          >
+            {busy ? 'Saving…' : 'Save changes'}
+          </Button>
+        </div>
+      </form>
+
+      <div className="mt-8 grid gap-3 sm:grid-cols-3 text-[12px]">
+        <Link href="/settings/billing" className="panel p-3 text-[--color-fg-muted] transition-colors hover:text-[--color-fg]">
+          Billing →
+        </Link>
+        <Link href="/settings/support" className="panel p-3 text-[--color-fg-muted] transition-colors hover:text-[--color-fg]">
+          Support →
+        </Link>
+        <Link href="/settings/account" className="panel p-3 text-[--color-fg-muted] transition-colors hover:text-[--color-fg]">
+          Your data →
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+function ReadField({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div>
+      <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">{label}</div>
+      <div className={`mt-1 text-[13px] text-[--color-fg] ${mono ? 'mono' : ''}`}>{value}</div>
+    </div>
+  );
+}