@slyxup/ui 0.2.9 → 0.2.11

package/src/components/UserProfile/UserProfile.tsx

@@ -1,6 +1,13 @@
 import type { SlyxupSessionInfo } from '@slyxup/core';
 import { useAuth, useUser } from '@slyxup/react';
-import { type FormEvent, useCallback, useEffect, useState } from 'react';
+import {
+  type FormEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { initPaddle, openPaddleCheckout } from '../../lib/paddle';
 import { injectStyles } from '../../styles';
 
 export interface UserProfileProps {
@@ -44,20 +51,33 @@ function deviceLabel(ua: string | null): string {
       ? 'macOS'
       : /Android/i.test(ua)
         ? 'Android'
-        : /iPhone|iPad|iOS/i.test(ua)
+        : /iPhone|iPad|iPod/i.test(ua)
           ? 'iOS'
-          : /Linux/i.test(ua)
-            ? 'Linux'
-            : 'Unknown OS';
+          : /CrOS/i.test(ua)
+            ? 'Chrome OS'
+            : /Linux/i.test(ua)
+              ? 'Linux'
+              : 'Unknown OS';
+  // Order matters: check Edge before Chrome (Edg/ appears in Chrome UA)
   const browser = /Edg\//i.test(ua)
     ? 'Edge'
-    : /Chrome\//i.test(ua)
-      ? 'Chrome'
-      : /Safari\//i.test(ua)
-        ? 'Safari'
-        : /Firefox\//i.test(ua)
-          ? 'Firefox'
-          : 'Browser';
+    : /OPR|Opera/i.test(ua)
+      ? 'Opera'
+      : /Vivaldi/i.test(ua)
+        ? 'Vivaldi'
+        : /Brave/i.test(ua)
+          ? 'Brave'
+          : /Chrome\//i.test(ua) && !/CriOS/i.test(ua)
+            ? 'Chrome'
+            : /Safari\//i.test(ua) && !/Chrome\//i.test(ua)
+              ? 'Safari'
+              : /Firefox\//i.test(ua) || /FxiOS/i.test(ua)
+                ? 'Firefox'
+                : /SamsungBrowser/i.test(ua)
+                  ? 'Samsung Browser'
+                  : /Mobile/i.test(ua) || /Android/i.test(ua)
+                    ? 'Mobile Browser'
+                    : 'Browser';
   return `${browser} · ${os}`;
 }
 
@@ -86,6 +106,7 @@ function formatCurrency(amount: number, currency: string): string {
 interface Plan {
   id: string;
   name: string;
+  paddlePriceId: string;
   amount: number;
   currency: string;
   interval: string;
@@ -108,6 +129,7 @@ export function UserProfile({
   // ── Profile form state ──
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
+  const [username, setUsername] = useState('');
   const [avatarUrl, setAvatarUrl] = useState('');
   const [busy, setBusy] = useState(false);
   const [saved, setSaved] = useState(false);
@@ -127,6 +149,9 @@ export function UserProfile({
   const [sessionsLoading, setSessionsLoading] = useState(true);
   const [revokingId, setRevokingId] = useState<string | null>(null);
   const [othersRevoking, setOthersRevoking] = useState(false);
+  const [sessionsTotal, setSessionsTotal] = useState(0);
+  const [sessionsPage, setSessionsPage] = useState(0);
+  const SESSIONS_PER_PAGE = 10;
 
   // ── Billing state ──
   const [billingLoading, setBillingLoading] = useState(true);
@@ -149,22 +174,62 @@ export function UserProfile({
   >([]);
   const [plans, setPlans] = useState<Plan[]>([]);
   const [plansLoading, setPlansLoading] = useState(false);
+  // Project whose plans/subscription are shown — used to attribute checkout customData.
+  const [projectId, setProjectId] = useState<string | null>(null);
   const [checkoutId, setCheckoutId] = useState<string | null>(null);
+  const [checkoutDone, setCheckoutDone] = useState(false);
+  const [checkoutSuccess, setCheckoutSuccess] = useState(false);
+  // Keep the latest subscription available to the async polling loop (avoids
+  // stale-closure reads of state inside setTimeout callbacks).
+  const subscriptionRef = useRef(subscription);
+  useEffect(() => {
+    subscriptionRef.current = subscription;
+  }, [subscription]);
 
   // ── Danger zone state ──
   const [confirmText, setConfirmText] = useState('');
   const [deleteBusy, setDeleteBusy] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);
 
-  // Sync form fields when user loads/updates (ensures firstName/lastName show correctly
-  // after SlyxUpProvider fetches client.users.me()). Guard against stale overwrites.
+  // ── Two-factor (TOTP) state ──
+  const [tfaStage, setTfaStage] = useState<'idle' | 'setup' | 'codes'>('idle');
+  const [tfaSetup, setTfaSetup] = useState<{
+    secret: string;
+    provisioningUri: string;
+    accountName: string;
+  } | null>(null);
+  const [tfaCode, setTfaCode] = useState('');
+  const [tfaRecoveryCodes, setTfaRecoveryCodes] = useState<string[]>([]);
+  const [tfaBusy, setTfaBusy] = useState(false);
+  const [tfaError, setTfaError] = useState<string | null>(null);
+  const [tfaVerifyCode, setTfaVerifyCode] = useState('');
+
+  // ── Connected accounts state ──
+  const [accounts, setAccounts] = useState<
+    { id: string; provider: 'google' | 'github'; createdAt: string }[]
+  >([]);
+  const [accountsLoading, setAccountsLoading] = useState(false);
+  const [accountsError, setAccountsError] = useState<string | null>(null);
+  const [unlinkingId, setUnlinkingId] = useState<string | null>(null);
+
+  // Sync form fields when user loads/updates. Use individual primitives as
+  // deps so the effect fires even when the user object reference stays the
+  // same (e.g. after a silent reload that returns identical data).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional — see comment above
   useEffect(() => {
     if (user) {
       setFirstName(user.firstName ?? '');
       setLastName(user.lastName ?? '');
+      setUsername(user.username ?? '');
       setAvatarUrl(user.avatarUrl ?? '');
     }
-  }, [user?.firstName, user?.lastName, user?.avatarUrl]);
+  }, [
+    user?.firstName,
+    user?.lastName,
+    user?.username,
+    user?.avatarUrl,
+    user?.id,
+  ]);
 
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
@@ -174,37 +239,65 @@ export function UserProfile({
     return () => document.removeEventListener('keydown', onKey);
   }, [modal, onClose]);
 
-  const loadSessions = useCallback(async () => {
-    setSessionsLoading(true);
-    try {
-      const res = await client.sessions.list();
-      setSessions(res.sessions);
-    } catch {
-      setSessions([]);
-    } finally {
-      setSessionsLoading(false);
-    }
-  }, [client]);
+  const loadSessions = useCallback(
+    async (page = 0) => {
+      setSessionsLoading(true);
+      try {
+        const res = await client.sessions.list({
+          limit: SESSIONS_PER_PAGE,
+          offset: page * SESSIONS_PER_PAGE,
+        });
+        setSessions(res.sessions);
+        setSessionsTotal(res.total);
+        setSessionsPage(page);
+      } catch {
+        setSessions([]);
+        setSessionsTotal(0);
+      } finally {
+        setSessionsLoading(false);
+      }
+    },
+    [client]
+  );
 
   const loadBilling = useCallback(async () => {
     setBillingLoading(true);
     setPlansLoading(true);
     try {
       const rawApiUrl =
-        (client as unknown as { apiUrl: string }).apiUrl ?? 'https://auth.slyxup.online';
-      const billingUrl = rawApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
-      const token = (client as unknown as { _token?: string; getToken?: () => string | undefined })?._token
-        ?? (client as unknown as { getToken?: () => string | undefined })?.getToken?.();
+        (client as unknown as { apiUrl: string }).apiUrl ??
+        'https://auth.slyxup.online';
+      const billingUrl = (() => {
+        // Localhost: swap port 8787 → 8788 (auth → billing)
+        if (/^https?:\/\/localhost(:\d+)?$/.test(rawApiUrl)) {
+          return rawApiUrl.replace(/:(\d+)$/, ':8788');
+        }
+        return rawApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
+      })();
+      const token =
+        (
+          client as unknown as { getToken?: () => string | undefined }
+        ).getToken?.() ??
+        (
+          client as unknown as {
+            _token?: string;
+          }
+        )?._token;
       const headers: Record<string, string> = {
         'Content-Type': 'application/json',
       };
       if (token) headers.Authorization = `Bearer ${token}`;
       // Also forward publishable key if available (helps billing resolve project)
-      const pubKey = (client as unknown as { publishableKey?: string })?.publishableKey;
-      if (pubKey && pubKey !== 'pk_test_missing') headers['X-Publishable-Key'] = pubKey;
+      const pubKey = (client as unknown as { publishableKey?: string })
+        ?.publishableKey;
+      if (pubKey && pubKey !== 'pk_test_missing')
+        headers['X-Publishable-Key'] = pubKey;
 
-      // Derive projectId for plans: prefer user.projectId, then try subscription's projectId, fallback none
-      const projectId = (user as unknown as { projectId?: string | null })?.projectId ?? null;
+      // Derive projectId for plans: prefer user.projectId, then try to resolve from publishableKey's project (for examples)
+      // For the example apps, the publishableKey is for the example project, not the user's projectId
+      const projectId: string | null =
+        (user as unknown as { projectId?: string | null })?.projectId ?? null;
+      setProjectId(projectId);
 
       // Fetch subscription + invoices (new /v1/billing/* with fallback to legacy /v1/*)
       async function fetchJson(url: string) {
@@ -220,7 +313,7 @@ export function UserProfile({
         `${billingUrl}/v1/subscription`,
       ]) {
         try {
-          const j = await fetchJson(path) as Record<string, unknown>;
+          const j = (await fetchJson(path)) as Record<string, unknown>;
           if (j && (j as { ok?: boolean }).ok !== false) {
             subData = j;
             break;
@@ -236,17 +329,32 @@ export function UserProfile({
           subscriptions?: Record<string, unknown>[];
         };
         let sub: Record<string, unknown> | null = null;
-        if (sd.subscription !== undefined) sub = sd.subscription as Record<string, unknown> | null;
-        else if (Array.isArray(sd.subscriptions) && sd.subscriptions.length > 0) sub = sd.subscriptions[0] as Record<string, unknown>;
+        if (sd.subscription !== undefined)
+          sub = sd.subscription as Record<string, unknown> | null;
+        else if (Array.isArray(sd.subscriptions) && sd.subscriptions.length > 0)
+          sub = sd.subscriptions[0] as Record<string, unknown>;
 
         if (sub) {
           setSubscription({
             id: String(sub.id ?? ''),
             status: String(sub.status ?? 'active'),
-            planId: (sub.planId as string | null) ?? (sub.plan_id as string | null) ?? null,
-            planName: (sub.planName as string | null) ?? (sub.plan_name as string | null) ?? (sub.name as string | null) ?? null,
-            currentPeriodEnd: (sub.currentPeriodEnd as string | null) ?? (sub.current_period_end as string | null) ?? (sub.currentPeriod_end as string | null) ?? null,
-            cancelAtPeriodEnd: Boolean(sub.cancelAtPeriodEnd ?? sub.cancel_at_period_end ?? false),
+            planId:
+              (sub.planId as string | null) ??
+              (sub.plan_id as string | null) ??
+              null,
+            planName:
+              (sub.planName as string | null) ??
+              (sub.plan_name as string | null) ??
+              (sub.name as string | null) ??
+              null,
+            currentPeriodEnd:
+              (sub.currentPeriodEnd as string | null) ??
+              (sub.current_period_end as string | null) ??
+              (sub.currentPeriod_end as string | null) ??
+              null,
+            cancelAtPeriodEnd: Boolean(
+              sub.cancelAtPeriodEnd ?? sub.cancel_at_period_end ?? false
+            ),
           });
         } else {
           setSubscription(null);
@@ -256,9 +364,15 @@ export function UserProfile({
       }
 
       // Invoices
-      for (const path of [`${billingUrl}/v1/billing/invoices`, `${billingUrl}/v1/invoices`]) {
+      for (const path of [
+        `${billingUrl}/v1/billing/invoices`,
+        `${billingUrl}/v1/invoices`,
+      ]) {
         try {
-          const invJ = (await fetchJson(path)) as { ok?: boolean; invoices?: unknown[] };
+          const invJ = (await fetchJson(path)) as {
+            ok?: boolean;
+            invoices?: unknown[];
+          };
           if (invJ?.ok !== false && Array.isArray(invJ.invoices)) {
             setInvoices(
               (invJ.invoices as Record<string, unknown>[]).map((inv) => ({
@@ -266,7 +380,10 @@ export function UserProfile({
                 amount: Number(inv.amount ?? 0),
                 currency: String(inv.currency ?? 'USD'),
                 status: String(inv.status ?? 'pending'),
-                billedAt: (inv.billedAt as string | null) ?? (inv.billed_at as string | null) ?? null,
+                billedAt:
+                  (inv.billedAt as string | null) ??
+                  (inv.billed_at as string | null) ??
+                  null,
               }))
             );
             break;
@@ -276,14 +393,20 @@ export function UserProfile({
         }
       }
 
-      // Plans (needs projectId — if missing, try without and degrade gracefully)
-      const planPaths: string[] = [];
-      if (projectId) planPaths.push(`${billingUrl}/v1/billing/plans?projectId=${projectId}`);
-      // Also try without projectId as last resort (will 400 but we catch)
-      planPaths.push(`${billingUrl}/v1/billing/plans?projectId=${projectId ?? ''}`);
-      planPaths.push(`${billingUrl}/v1/plans`);
-
+      // Plans (needs projectId — if missing, try with publishableKey header instead of empty projectId)
       let gotPlans = false;
+      const planPaths: string[] = [];
+      if (projectId) {
+        planPaths.push(`${billingUrl}/v1/billing/plans?projectId=${projectId}`);
+      } else if (pubKey && pubKey !== 'pk_test_missing') {
+        // No projectId but have publishableKey — let billing resolve project via X-Publishable-Key header.
+        // Billing plans route returns [] in test/localhost when projectId is missing, which is fine.
+        planPaths.push(`${billingUrl}/v1/billing/plans`);
+      } else {
+        // No projectId and no publishableKey — don't make the request, just show empty
+        setPlans([]);
+        gotPlans = true;
+      }
       for (const p of planPaths) {
         try {
           const pj = (await fetchJson(p)) as { ok?: boolean; plans?: Plan[] };
@@ -307,16 +430,32 @@ export function UserProfile({
   }, [client, user]);
 
   useEffect(() => {
-    if (tab === 'security') void loadSessions();
+    if (tab === 'security') void loadSessions(0);
     if (tab === 'billing') void loadBilling();
   }, [tab, loadSessions, loadBilling]);
 
+  // React to a completed Paddle checkout: reload billing immediately and show
+  // a success confirmation (fallback for when the webhook is fast / polling lags).
+  useEffect(() => {
+    function onCheckoutCompleted() {
+      setCheckoutSuccess(true);
+      void loadBilling();
+      setTimeout(() => setCheckoutSuccess(false), 6000);
+    }
+    window.addEventListener('slyxup:checkout-completed', onCheckoutCompleted);
+    return () =>
+      window.removeEventListener(
+        'slyxup:checkout-completed',
+        onCheckoutCompleted
+      );
+  }, [loadBilling]);
+
   async function onProfileSubmit(e: FormEvent) {
     e.preventDefault();
     setBusy(true);
     setSaved(false);
     try {
-      await client.users.update({ firstName, lastName, avatarUrl });
+      await client.users.update({ firstName, lastName, username, avatarUrl });
       await reload();
       setSaved(true);
       setTimeout(() => setSaved(false), 2500);
@@ -337,6 +476,98 @@ export function UserProfile({
     }
   }
 
+  const loadAccounts = useCallback(async () => {
+    setAccountsLoading(true);
+    setAccountsError(null);
+    try {
+      const res = await client.accounts.list();
+      setAccounts(res.accounts);
+    } catch {
+      setAccounts([]);
+      setAccountsError('Could not load connected accounts.');
+    } finally {
+      setAccountsLoading(false);
+    }
+  }, [client]);
+
+  useEffect(() => {
+    if (tab === 'security') void loadAccounts();
+  }, [tab, loadAccounts]);
+
+  async function startTfaSetup() {
+    setTfaError(null);
+    setTfaBusy(true);
+    try {
+      const res = await client.twoFactor.setup();
+      setTfaSetup(res);
+      setTfaStage('setup');
+      setTfaCode('');
+    } catch (err) {
+      setTfaError(err instanceof Error ? err.message : 'Failed to start setup');
+    } finally {
+      setTfaBusy(false);
+    }
+  }
+
+  async function submitTfa(e: FormEvent) {
+    e.preventDefault();
+    if (!tfaSetup) return;
+    setTfaError(null);
+    setTfaBusy(true);
+    try {
+      const res = await client.twoFactor.enable(
+        tfaSetup.secret,
+        tfaCode.trim()
+      );
+      setTfaRecoveryCodes(res.recoveryCodes);
+      setTfaStage('codes');
+      await reload();
+    } catch (err) {
+      setTfaError(
+        err instanceof Error ? err.message : 'Invalid code — try again.'
+      );
+    } finally {
+      setTfaBusy(false);
+    }
+  }
+
+  async function submitTfaDisable(e: FormEvent) {
+    e.preventDefault();
+    setTfaError(null);
+    setTfaBusy(true);
+    try {
+      await client.twoFactor.disable(tfaVerifyCode.trim());
+      setTfaVerifyCode('');
+      setTfaStage('idle');
+      setTfaSetup(null);
+      setTfaRecoveryCodes([]);
+      await reload();
+    } catch (err) {
+      setTfaError(
+        err instanceof Error
+          ? err.message
+          : 'Invalid code — could not disable 2FA.'
+      );
+    } finally {
+      setTfaBusy(false);
+    }
+  }
+
+  async function onUnlink(accountId: string, provider: 'google' | 'github') {
+    setUnlinkingId(accountId);
+    setAccountsError(null);
+    try {
+      await client.accounts.unlink(accountId, provider);
+      setAccounts((prev) => prev.filter((a) => a.id !== accountId));
+    } catch (err) {
+      setAccountsError(
+        err instanceof Error ? err.message : 'Could not unlink account.'
+      );
+    } finally {
+      setUnlinkingId(null);
+    }
+  }
+
   async function onPasswordSubmit(e: FormEvent) {
     e.preventDefault();
     setPwError(null);
@@ -358,7 +589,9 @@ export function UserProfile({
       setConfirmPassword('');
       setTimeout(() => setPwSaved(false), 3000);
     } catch (err) {
-      setPwError(err instanceof Error ? err.message : 'Failed to change password');
+      setPwError(
+        err instanceof Error ? err.message : 'Failed to change password'
+      );
     } finally {
       setPwBusy(false);
     }
@@ -368,7 +601,7 @@ export function UserProfile({
     setRevokingId(id);
     try {
       await client.sessions.revoke(id);
-      await loadSessions();
+      await loadSessions(sessionsPage);
     } finally {
       setRevokingId(null);
     }
@@ -378,7 +611,7 @@ export function UserProfile({
     setOthersRevoking(true);
     try {
       await client.sessions.revokeOthers();
-      await loadSessions();
+      await loadSessions(0);
     } finally {
       setOthersRevoking(false);
     }
@@ -392,39 +625,58 @@ export function UserProfile({
       await client.auth.signOut().catch(() => undefined);
       onDeleted?.();
     } catch (err) {
-      setDeleteError(err instanceof Error ? err.message : 'Failed to delete account');
+      setDeleteError(
+        err instanceof Error ? err.message : 'Failed to delete account'
+      );
     } finally {
       setDeleteBusy(false);
     }
   }
 
-  async function handleCheckout(planId: string) {
-    setCheckoutId(planId);
+  async function handleCheckout(plan: Plan) {
+    setCheckoutId(plan.id);
+    setCheckoutDone(false);
     try {
+      // Always use Paddle.js overlay checkout
+      // authApiUrl is available via client apiUrl
       const rawApiUrl =
-        (client as unknown as { apiUrl: string }).apiUrl ?? 'https://auth.slyxup.online';
-      const billingUrl = rawApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
-      const token = (client as unknown as { _token?: string; getToken?: () => string | undefined })?._token
-        ?? (client as unknown as { getToken?: () => string | undefined })?.getToken?.();
-      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-      if (token) headers.Authorization = `Bearer ${token}`;
-      const pubKey = (client as unknown as { publishableKey?: string })?.publishableKey;
-      if (pubKey && pubKey !== 'pk_test_missing') headers['X-Publishable-Key'] = pubKey;
-
-      const res = await fetch(`${billingUrl}/v1/billing/checkout`, {
-        method: 'POST',
-        headers,
-        credentials: 'include',
-        body: JSON.stringify({ planId }),
-      });
-      const data = (await res.json().catch(() => ({}))) as Record<string, unknown>;
-      if (res.ok && typeof data.checkoutUrl === 'string' && data.checkoutUrl) {
-        window.location.href = data.checkoutUrl as string;
-        return;
-      }
-      if (!res.ok) throw new Error(typeof data.error === 'string' ? data.error : `Checkout failed (${res.status})`);
+        (client as unknown as { apiUrl: string }).apiUrl ??
+        'https://auth.slyxup.online';
+      await initPaddle(rawApiUrl);
+      // Pass custom data so the billing webhook can attribute the created
+      // subscription to this user + project + plan (Paddle copies custom_data
+      // from the transaction to the subscription for recurring items).
+      const customData: Record<string, string> = {
+        userId: user?.id ?? '',
+        planId: plan.id,
+      };
+      if (projectId) customData.projectId = projectId;
+      openPaddleCheckout(plan.paddlePriceId, user?.email, customData);
+      setCheckoutDone(true);
+
+      // Poll for subscription updates after checkout (webhook may take a few seconds)
+      let attempts = 0;
+      const maxAttempts = 10;
+      const pollInterval = 3000; // 3 seconds
+      const poll = async () => {
+        attempts++;
+        try {
+          await loadBilling();
+          if (subscriptionRef.current && attempts < maxAttempts) {
+            // Found subscription, stop polling
+            return;
+          }
+        } catch {
+          // Ignore polling errors
+        }
+        if (attempts < maxAttempts) {
+          setTimeout(poll, pollInterval);
+        }
+      };
+      // Start polling after a short delay to allow webhook to process
+      setTimeout(poll, 2000);
+      return;
     } catch (err) {
-      // Fallback: if billing checkout isn't configured, just log. Parent can handle via window redirect.
       console.error('[SlyxUp] checkout failed', err);
     } finally {
       setCheckoutId(null);
@@ -435,11 +687,13 @@ export function UserProfile({
   if (!user) return null;
 
   const emailVerified = user.emailVerified;
-  const name = displayName(user as { firstName: string | null; lastName: string | null; email: string });
+  const name = displayName(
+    user as { firstName: string | null; lastName: string | null; email: string }
+  );
 
   // Resolve current plan name via plans lookup if subscription has planId but no planName
   const currentPlan = subscription
-    ? plans.find((p) => p.id === subscription.planId) ?? null
+    ? (plans.find((p) => p.id === subscription.planId) ?? null)
     : null;
   const resolvedPlanName = subscription?.planName ?? currentPlan?.name ?? null;
 
@@ -497,20 +751,39 @@ export function UserProfile({
               <section className="slx-profile-sec">
                 <div className="slx-avatar-row">
                   <div className="slx-avatar-lg" aria-hidden="true">
-                    {user.avatarUrl ? <img src={user.avatarUrl} alt="" /> : initials(user as { firstName: string | null; lastName: string | null; email: string })}
+                    {user.avatarUrl ? (
+                      <img src={user.avatarUrl} alt="" />
+                    ) : (
+                      initials(
+                        user as {
+                          firstName: string | null;
+                          lastName: string | null;
+                          email: string;
+                        }
+                      )
+                    )}
                   </div>
                   <div style={{ minWidth: 0 }}>
-                    <p className="slx-row-value" style={{ margin: 0, wordBreak: 'break-word' }}>
+                    <p
+                      className="slx-row-value"
+                      style={{ margin: 0, wordBreak: 'break-word' }}
+                    >
                       {name}
                     </p>
-                    <p className="slx-row-label" style={{ wordBreak: 'break-all' }}>
+                    <p
+                      className="slx-row-label"
+                      style={{ wordBreak: 'break-all' }}
+                    >
                       {user.email}
                     </p>
                   </div>
                 </div>
 
                 {saved && (
-                  <p className="slx-error-text" style={{ color: 'var(--slx-success)' }}>
+                  <p
+                    className="slx-error-text"
+                    style={{ color: 'var(--slx-success)' }}
+                  >
                     Profile saved.
                   </p>
                 )}
@@ -554,7 +827,27 @@ export function UserProfile({
                       value={avatarUrl}
                       onChange={(e) => setAvatarUrl(e.target.value)}
                     />
-                    <p className="slx-hint">Paste a public image URL for your avatar.</p>
+                    <p className="slx-hint">
+                      Paste a public image URL for your avatar.
+                    </p>
+                  </div>
+                  <div className="slx-field">
+                    <label className="slx-label" htmlFor="slx-up-username">
+                      Username
+                    </label>
+                    <input
+                      id="slx-up-username"
+                      className="slx-input"
+                      type="text"
+                      autoComplete="username"
+                      placeholder="yourname"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                    />
+                    <p className="slx-hint">
+                      Used for password sign-in as an alternative to email. Must
+                      be unique within your project.
+                    </p>
                   </div>
                   <button className="slx-btn" type="submit" disabled={busy}>
                     {busy ? 'Saving…' : 'Save changes'}
@@ -566,7 +859,10 @@ export function UserProfile({
                 <h3 className="slx-sec-title">Email</h3>
                 <div className="slx-row" style={{ flexWrap: 'wrap', gap: 8 }}>
                   <div style={{ minWidth: 0 }}>
-                    <p className="slx-row-value" style={{ wordBreak: 'break-all' }}>
+                    <p
+                      className="slx-row-value"
+                      style={{ wordBreak: 'break-all' }}
+                    >
                       {user.email}
                     </p>
                     <p className="slx-row-label">Primary email</p>
@@ -582,7 +878,9 @@ export function UserProfile({
                         flexWrap: 'wrap',
                       }}
                     >
-                      <span className="slx-badge slx-badge-warn">Unverified</span>
+                      <span className="slx-badge slx-badge-warn">
+                        Unverified
+                      </span>
                       <button
                         type="button"
                         className="slx-link"
@@ -604,7 +902,10 @@ export function UserProfile({
               <section className="slx-profile-sec">
                 <h3 className="slx-sec-title">Change password</h3>
                 {pwSaved && (
-                  <p className="slx-error-text" style={{ color: 'var(--slx-success)' }}>
+                  <p
+                    className="slx-error-text"
+                    style={{ color: 'var(--slx-success)' }}
+                  >
                     Password updated.
                   </p>
                 )}
@@ -673,10 +974,18 @@ export function UserProfile({
                         <div className="slx-session-meta">
                           <p className="slx-session-device">
                             {deviceLabel(s.userAgent)}
-                            {s.isCurrent && <span className="slx-badge slx-badge-accent">This device</span>}
+                            {s.isCurrent && (
+                              <span className="slx-badge slx-badge-accent">
+                                This device
+                              </span>
+                            )}
                           </p>
                           <p className="slx-session-sub">
-                            {[s.ipAddress, `created ${formatDate(s.createdAt)}`, `expires ${formatDate(s.expiresAt)}`]
+                            {[
+                              s.ipAddress,
+                              `created ${formatDate(s.createdAt)}`,
+                              `expires ${formatDate(s.expiresAt)}`,
+                            ]
                               .filter(Boolean)
                               .join(' · ')}
                           </p>
@@ -701,9 +1010,289 @@ export function UserProfile({
                         onClick={onRevokeOthers}
                         disabled={othersRevoking}
                       >
-                        {othersRevoking ? 'Signing out…' : 'Sign out other devices'}
+                        {othersRevoking
+                          ? 'Signing out…'
+                          : 'Sign out other devices'}
                       </button>
                     )}
+                    {sessionsTotal > SESSIONS_PER_PAGE && (
+                      <div className="slx-pagination">
+                        <button
+                          type="button"
+                          className="slx-btn-secondary"
+                          disabled={sessionsPage === 0 || sessionsLoading}
+                          onClick={() => void loadSessions(sessionsPage - 1)}
+                        >
+                          Previous
+                        </button>
+                        <span className="slx-pagination-info">
+                          {sessionsPage * SESSIONS_PER_PAGE + 1}–
+                          {Math.min(
+                            (sessionsPage + 1) * SESSIONS_PER_PAGE,
+                            sessionsTotal
+                          )}{' '}
+                          of {sessionsTotal}
+                        </span>
+                        <button
+                          type="button"
+                          className="slx-btn-secondary"
+                          disabled={
+                            (sessionsPage + 1) * SESSIONS_PER_PAGE >=
+                              sessionsTotal || sessionsLoading
+                          }
+                          onClick={() => void loadSessions(sessionsPage + 1)}
+                        >
+                          Next
+                        </button>
+                      </div>
+                    )}
+                  </>
+                )}
+              </section>
+
+              {/* ── Two-factor authentication ── */}
+              <section className="slx-profile-sec">
+                <h3 className="slx-sec-title">Two-factor authentication</h3>
+                {tfaError && <p className="slx-error-text">{tfaError}</p>}
+
+                {!user.twoFactorEnabled && tfaStage === 'idle' && (
+                  <>
+                    <p className="slx-hint">
+                      Add an authenticator app (Google Authenticator, Authy,
+                      1Password, etc.) to protect your account with a time-based
+                      one-time password.
+                    </p>
+                    <button
+                      type="button"
+                      className="slx-btn"
+                      onClick={() => void startTfaSetup()}
+                      disabled={tfaBusy}
+                    >
+                      {tfaBusy ? 'Starting…' : 'Set up 2FA'}
+                    </button>
+                  </>
+                )}
+
+                {!user.twoFactorEnabled && tfaStage === 'setup' && (
+                  <form onSubmit={submitTfa}>
+                    {tfaSetup && (
+                      <>
+                        <p className="slx-hint">
+                          Scan this QR code with your authenticator app:
+                        </p>
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 14,
+                            margin: '8px 0',
+                            flexWrap: 'wrap',
+                          }}
+                        >
+                          <img
+                            src={`https://api.qrserver.com/v1/create-qr-code/?size=132x132&data=${encodeURIComponent(tfaSetup.provisioningUri)}`}
+                            alt="QR code to scan with your authenticator app"
+                            width={132}
+                            height={132}
+                            style={{ borderRadius: 6 }}
+                          />
+                          <div style={{ minWidth: 0 }}>
+                            <p className="slx-row-label">
+                              Or enter this code manually:
+                            </p>
+                            <p
+                              className="slx-row-value"
+                              style={{
+                                userSelect: 'all',
+                                letterSpacing: 2,
+                                fontFamily: 'monospace',
+                              }}
+                            >
+                              {tfaSetup.secret.replace(/(.{4})/g, '$1 ').trim()}
+                            </p>
+                            <p className="slx-hint">
+                              Account: {tfaSetup.accountName}
+                            </p>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                    <div className="slx-field">
+                      <label className="slx-label" htmlFor="slx-tfa-code">
+                        Enter the 6-digit code
+                      </label>
+                      <input
+                        id="slx-tfa-code"
+                        className="slx-input"
+                        type="text"
+                        inputMode="numeric"
+                        autoComplete="one-time-code"
+                        maxLength={6}
+                        pattern="[0-9]*"
+                        placeholder="000000"
+                        value={tfaCode}
+                        onChange={(e) =>
+                          setTfaCode(e.target.value.replace(/\D/g, ''))
+                        }
+                        required
+                      />
+                    </div>
+                    <button
+                      className="slx-btn"
+                      type="submit"
+                      disabled={tfaBusy}
+                    >
+                      {tfaBusy ? 'Verifying…' : 'Enable 2FA'}
+                    </button>
+                  </form>
+                )}
+
+                {!user.twoFactorEnabled && tfaStage === 'codes' && (
+                  <>
+                    <div
+                      className="slx-billing-card"
+                      style={{ margin: '4px 0 8px' }}
+                    >
+                      <p className="slx-billing-plan">
+                        2FA enabled — save recovery codes
+                      </p>
+                      <p className="slx-billing-detail">
+                        Each code can be used once to sign in if you lose access
+                        to your authenticator. Store them somewhere safe.
+                      </p>
+                      <ul
+                        style={{
+                          display: 'grid',
+                          gridTemplateColumns: 'repeat(2, auto)',
+                          gap: '4px 24px',
+                          justifyContent: 'start',
+                          margin: '10px 0',
+                          paddingLeft: 0,
+                          listStyle: 'none',
+                          fontFamily: 'monospace',
+                        }}
+                      >
+                        {tfaRecoveryCodes.map((c) => (
+                          <li key={c}>{c}</li>
+                        ))}
+                      </ul>
+                      <button
+                        type="button"
+                        className="slx-btn-secondary"
+                        onClick={() =>
+                          void navigator.clipboard
+                            ?.writeText(tfaRecoveryCodes.join('\n'))
+                            .catch(() => undefined)
+                        }
+                      >
+                        Copy codes
+                      </button>
+                    </div>
+                    <button
+                      type="button"
+                      className="slx-btn-secondary"
+                      onClick={() => void reload()}
+                    >
+                      Done
+                    </button>
+                  </>
+                )}
+
+                {user.twoFactorEnabled && (
+                  <>
+                    <p className="slx-hint">2FA is enabled for this account.</p>
+                    <form
+                      onSubmit={submitTfaDisable}
+                      style={{
+                        display: 'flex',
+                        gap: 10,
+                        alignItems: 'flex-end',
+                        flexWrap: 'wrap',
+                        marginTop: 8,
+                      }}
+                    >
+                      <div className="slx-field" style={{ flex: '1 1 160px' }}>
+                        <label className="slx-label" htmlFor="slx-tfa-disable">
+                          Authenticator code
+                        </label>
+                        <input
+                          id="slx-tfa-disable"
+                          className="slx-input"
+                          type="text"
+                          inputMode="numeric"
+                          autoComplete="one-time-code"
+                          maxLength={6}
+                          pattern="[0-9]*"
+                          placeholder="000000"
+                          value={tfaVerifyCode}
+                          onChange={(e) =>
+                            setTfaVerifyCode(e.target.value.replace(/\D/g, ''))
+                          }
+                          required
+                        />
+                      </div>
+                      <button
+                        type="submit"
+                        className="slx-btn-danger-outline"
+                        disabled={tfaBusy}
+                      >
+                        {tfaBusy ? 'Disabling…' : 'Disable 2FA'}
+                      </button>
+                    </form>
+                  </>
+                )}
+              </section>
+
+              {/* ── Connected accounts ── */}
+              <section className="slx-profile-sec">
+                <h3 className="slx-sec-title">Connected accounts</h3>
+                {accountsError && (
+                  <p className="slx-error-text">{accountsError}</p>
+                )}
+                {accountsLoading ? (
+                  <p className="slx-hint">Loading…</p>
+                ) : accounts.length === 0 ? (
+                  <>
+                    <p className="slx-hint">
+                      No social accounts connected. You can sign in with Google
+                      or GitHub and link them here later.
+                    </p>
+                    <button
+                      type="button"
+                      className="slx-btn-secondary"
+                      onClick={() => void loadAccounts()}
+                    >
+                      Refresh
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+                      {accounts.map((acc) => (
+                        <li
+                          key={acc.id}
+                          className="slx-session"
+                          style={{ alignItems: 'center' }}
+                        >
+                          <div className="slx-session-meta">
+                            <p className="slx-session-device">
+                              {acc.provider === 'google' ? 'Google' : 'GitHub'}
+                            </p>
+                            <p className="slx-session-sub">
+                              Connected {formatDate(acc.createdAt)}
+                            </p>
+                          </div>
+                          <button
+                            type="button"
+                            className="slx-btn-danger-outline"
+                            onClick={() => void onUnlink(acc.id, acc.provider)}
+                            disabled={unlinkingId === acc.id}
+                          >
+                            {unlinkingId === acc.id ? '…' : 'Unlink'}
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
                   </>
                 )}
               </section>
@@ -711,8 +1300,9 @@ export function UserProfile({
               <section className="slx-danger-zone">
                 <p className="slx-danger-title">Danger zone</p>
                 <p className="slx-danger-desc">
-                  Permanently deletes your account and all associated data. Active sessions are revoked immediately. This
-                  cannot be undone.
+                  Permanently deletes your account and all associated data.
+                  Active sessions are revoked immediately. This cannot be
+                  undone.
                 </p>
                 {deleteError && <p className="slx-error-text">{deleteError}</p>}
                 <div className="slx-field">
@@ -754,9 +1344,28 @@ export function UserProfile({
               <>
                 <section className="slx-profile-sec">
                   <h3 className="slx-sec-title">Subscription</h3>
+                  {checkoutDone && (
+                    <p
+                      className="slx-error-text"
+                      style={{ color: 'var(--slx-success)', marginBottom: 8 }}
+                    >
+                      Checkout opened — complete your payment in the overlay.
+                    </p>
+                  )}
+                  {checkoutSuccess && (
+                    <p
+                      className="slx-error-text"
+                      style={{ color: 'var(--slx-success)', marginBottom: 8 }}
+                    >
+                      Payment successful — your subscription is being set up.
+                    </p>
+                  )}
                   <div className="slx-billing-card">
                     <p className="slx-billing-plan">No active subscription</p>
-                    <p className="slx-billing-detail">You don&apos;t have a subscription yet. Choose a plan to get started.</p>
+                    <p className="slx-billing-detail">
+                      You don&apos;t have a subscription yet. Choose a plan to
+                      get started.
+                    </p>
                   </div>
                 </section>
 
@@ -765,8 +1374,13 @@ export function UserProfile({
                   {plansLoading ? (
                     <p className="slx-hint">Loading plans…</p>
                   ) : plans.length === 0 ? (
-                    <div className="slx-billing-card" style={{ textAlign: 'center' }}>
-                      <p className="slx-billing-detail">No plans configured for this project yet.</p>
+                    <div
+                      className="slx-billing-card"
+                      style={{ textAlign: 'center' }}
+                    >
+                      <p className="slx-billing-detail">
+                        No plans configured for this project yet.
+                      </p>
                       <p className="slx-hint" style={{ marginTop: 6 }}>
                         Ask your admin to create a plan in billing.
                       </p>
@@ -774,19 +1388,37 @@ export function UserProfile({
                   ) : (
                     <div className="slx-billing-plans">
                       {plans.map((plan) => (
-                        <div key={plan.id} className={`slx-plan-card${plan.isPopular ? ' popular' : ''}`}>
-                          {plan.isPopular && <span className="slx-plan-badge">POPULAR</span>}
+                        <div
+                          key={plan.id}
+                          className={`slx-plan-card${plan.isPopular ? ' popular' : ''}`}
+                        >
+                          {plan.isPopular && (
+                            <span className="slx-plan-badge">POPULAR</span>
+                          )}
                           <p className="slx-plan-name">{plan.name}</p>
                           <p style={{ margin: '2px 0 0' }}>
-                            <span className="slx-plan-price">{formatCurrency(plan.amount, plan.currency)}</span>
-                            <span className="slx-plan-interval">/{plan.interval}</span>
+                            <span className="slx-plan-price">
+                              {formatCurrency(plan.amount, plan.currency)}
+                            </span>
+                            <span className="slx-plan-interval">
+                              /{plan.interval}
+                            </span>
                           </p>
                           {plan.trialDays ? (
-                            <p className="slx-billing-detail" style={{ color: 'var(--slx-accent)', marginTop: 4 }}>
+                            <p
+                              className="slx-billing-detail"
+                              style={{
+                                color: 'var(--slx-accent)',
+                                marginTop: 4,
+                              }}
+                            >
                               {plan.trialDays} day free trial
                             </p>
                           ) : (
-                            <p className="slx-billing-detail" style={{ visibility: 'hidden', marginTop: 4 }}>
+                            <p
+                              className="slx-billing-detail"
+                              style={{ visibility: 'hidden', marginTop: 4 }}
+                            >
                               &nbsp;
                             </p>
                           )}
@@ -798,10 +1430,12 @@ export function UserProfile({
                           <button
                             type="button"
                             className="slx-btn slx-plan-cta"
-                            onClick={() => handleCheckout(plan.id)}
+                            onClick={() => handleCheckout(plan)}
                             disabled={checkoutId === plan.id}
                           >
-                            {checkoutId === plan.id ? 'Redirecting…' : 'Choose plan'}
+                            {checkoutId === plan.id
+                              ? 'Redirecting…'
+                              : 'Choose plan'}
                           </button>
                         </div>
                       ))}
@@ -814,11 +1448,19 @@ export function UserProfile({
                     <h3 className="slx-sec-title">Invoices</h3>
                     {invoices.map((inv) => (
                       <div key={inv.id} className="slx-invoice-row">
-                        <span className="slx-invoice-date">{inv.billedAt ? formatDate(inv.billedAt) : '—'}</span>
-                        <span className="slx-invoice-amount">{formatCurrency(inv.amount, inv.currency)}</span>
+                        <span className="slx-invoice-date">
+                          {inv.billedAt ? formatDate(inv.billedAt) : '—'}
+                        </span>
+                        <span className="slx-invoice-amount">
+                          {formatCurrency(inv.amount, inv.currency)}
+                        </span>
                         <span
                           className={`slx-badge ${
-                            inv.status === 'paid' ? 'slx-badge-ok' : inv.status === 'overdue' ? 'slx-badge-warn' : 'slx-badge-accent'
+                            inv.status === 'paid'
+                              ? 'slx-badge-ok'
+                              : inv.status === 'overdue'
+                                ? 'slx-badge-warn'
+                                : 'slx-badge-accent'
                           }`}
                         >
                           {inv.status}
@@ -843,10 +1485,14 @@ export function UserProfile({
                       }}
                     >
                       <div style={{ minWidth: 0 }}>
-                        <p className="slx-billing-plan">{resolvedPlanName ?? 'Subscription'}</p>
+                        <p className="slx-billing-plan">
+                          {resolvedPlanName ?? 'Subscription'}
+                        </p>
                         <p className="slx-billing-detail">
                           Status:{' '}
-                          <span className={`slx-billing-status slx-billing-status-${subscription.status}`}>
+                          <span
+                            className={`slx-billing-status slx-billing-status-${subscription.status}`}
+                          >
                             {subscription.status}
                           </span>
                         </p>
@@ -858,26 +1504,47 @@ export function UserProfile({
                           </p>
                         )}
                         {subscription.cancelAtPeriodEnd && (
-                          <p className="slx-billing-detail" style={{ color: 'var(--slx-danger)', fontWeight: 600 }}>
+                          <p
+                            className="slx-billing-detail"
+                            style={{
+                              color: 'var(--slx-danger)',
+                              fontWeight: 600,
+                            }}
+                          >
                             Scheduled to cancel at period end
                           </p>
                         )}
                       </div>
                       {currentPlan && (
-                        <span className="slx-badge slx-badge-accent" style={{ flexShrink: 0 }}>
-                          {formatCurrency(currentPlan.amount, currentPlan.currency)}/{currentPlan.interval}
+                        <span
+                          className="slx-badge slx-badge-accent"
+                          style={{ flexShrink: 0 }}
+                        >
+                          {formatCurrency(
+                            currentPlan.amount,
+                            currentPlan.currency
+                          )}
+                          /{currentPlan.interval}
                         </span>
                       )}
                     </div>
-                    {currentPlan?.features && currentPlan.features.length > 0 && (
-                      <ul className="slx-plan-features" style={{ margin: '12px 0 0' }}>
-                        {currentPlan.features.map((f) => (
-                          <li key={f}>{f}</li>
-                        ))}
-                      </ul>
-                    )}
+                    {currentPlan?.features &&
+                      currentPlan.features.length > 0 && (
+                        <ul
+                          className="slx-plan-features"
+                          style={{ margin: '12px 0 0' }}
+                        >
+                          {currentPlan.features.map((f) => (
+                            <li key={f}>{f}</li>
+                          ))}
+                        </ul>
+                      )}
                     <div className="slx-billing-actions">
-                      <button type="button" className="slx-btn-secondary" onClick={() => void loadBilling()}>
+                      <button
+                        type="button"
+                        className="slx-btn-secondary"
+                        onClick={() => void loadBilling()}
+                      >
                         Refresh
                       </button>
                     </div>
@@ -893,7 +1560,8 @@ export function UserProfile({
                   <section className="slx-profile-sec">
                     <h3 className="slx-sec-title">Available plans</h3>
                     <p className="slx-hint" style={{ marginBottom: 8 }}>
-                      Switch plans anytime. Changes apply at the next billing cycle.
+                      Switch plans anytime. Changes apply at the next billing
+                      cycle.
                     </p>
                     <div className="slx-billing-plans">
                       {plans.map((plan) => {
@@ -902,26 +1570,49 @@ export function UserProfile({
                           : resolvedPlanName === plan.name;
                         const currentAmount = currentPlan?.amount ?? 0;
                         const isUpgrade = plan.amount > currentAmount;
-                        const isDowngrade = plan.amount < currentAmount && !isCurrent;
+                        const isDowngrade =
+                          plan.amount < currentAmount && !isCurrent;
                         return (
                           <div
                             key={plan.id}
                             className={`slx-plan-card${plan.isPopular ? ' popular' : ''}`}
                             style={isCurrent ? { opacity: 0.92 } : undefined}
                           >
-                            {plan.isPopular && !isCurrent && <span className="slx-plan-badge">POPULAR</span>}
-                            {isCurrent && <span className="slx-plan-badge" style={{ background: 'var(--slx-success)' }}>CURRENT</span>}
+                            {plan.isPopular && !isCurrent && (
+                              <span className="slx-plan-badge">POPULAR</span>
+                            )}
+                            {isCurrent && (
+                              <span
+                                className="slx-plan-badge"
+                                style={{ background: 'var(--slx-success)' }}
+                              >
+                                CURRENT
+                              </span>
+                            )}
                             <p className="slx-plan-name">{plan.name}</p>
                             <p style={{ margin: '2px 0 0' }}>
-                              <span className="slx-plan-price">{formatCurrency(plan.amount, plan.currency)}</span>
-                              <span className="slx-plan-interval">/{plan.interval}</span>
+                              <span className="slx-plan-price">
+                                {formatCurrency(plan.amount, plan.currency)}
+                              </span>
+                              <span className="slx-plan-interval">
+                                /{plan.interval}
+                              </span>
                             </p>
                             {plan.trialDays ? (
-                              <p className="slx-billing-detail" style={{ color: 'var(--slx-accent)', marginTop: 4 }}>
+                              <p
+                                className="slx-billing-detail"
+                                style={{
+                                  color: 'var(--slx-accent)',
+                                  marginTop: 4,
+                                }}
+                              >
                                 {plan.trialDays} day trial
                               </p>
                             ) : (
-                              <p className="slx-billing-detail" style={{ visibility: 'hidden', marginTop: 4 }}>
+                              <p
+                                className="slx-billing-detail"
+                                style={{ visibility: 'hidden', marginTop: 4 }}
+                              >
                                 &nbsp;
                               </p>
                             )}
@@ -932,9 +1623,13 @@ export function UserProfile({
                             </ul>
                             <button
                               type="button"
-                              className={isCurrent ? 'slx-btn-secondary slx-plan-cta' : 'slx-btn slx-plan-cta'}
+                              className={
+                                isCurrent
+                                  ? 'slx-btn-secondary slx-plan-cta'
+                                  : 'slx-btn slx-plan-cta'
+                              }
                               disabled={isCurrent || checkoutId === plan.id}
-                              onClick={() => handleCheckout(plan.id)}
+                              onClick={() => handleCheckout(plan)}
                             >
                               {isCurrent
                                 ? 'Current plan'
@@ -958,11 +1653,19 @@ export function UserProfile({
                     <h3 className="slx-sec-title">Invoices</h3>
                     {invoices.map((inv) => (
                       <div key={inv.id} className="slx-invoice-row">
-                        <span className="slx-invoice-date">{inv.billedAt ? formatDate(inv.billedAt) : '—'}</span>
-                        <span className="slx-invoice-amount">{formatCurrency(inv.amount, inv.currency)}</span>
+                        <span className="slx-invoice-date">
+                          {inv.billedAt ? formatDate(inv.billedAt) : '—'}
+                        </span>
+                        <span className="slx-invoice-amount">
+                          {formatCurrency(inv.amount, inv.currency)}
+                        </span>
                         <span
                           className={`slx-badge ${
-                            inv.status === 'paid' ? 'slx-badge-ok' : inv.status === 'overdue' ? 'slx-badge-warn' : 'slx-badge-accent'
+                            inv.status === 'paid'
+                              ? 'slx-badge-ok'
+                              : inv.status === 'overdue'
+                                ? 'slx-badge-warn'
+                                : 'slx-badge-accent'
                           }`}
                         >
                           {inv.status}
@@ -989,6 +1692,7 @@ export function UserProfile({
   // Modal overlay — click on backdrop closes, click inside modal does not.
   // Use onMouseDown + onClick for desktop + mobile reliability; close button also works via stopPropagation.
   return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: overlay click is for mouse; keyboard Escape handled in effect
     <div
       className="slx-overlay"
       onMouseDown={(e) => {
@@ -999,6 +1703,8 @@ export function UserProfile({
       }}
       role="presentation"
     >
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: stopPropagation only, no keyboard action needed */}
+      {/* biome-ignore lint/a11y/useSemanticElements: dialog is correct for modal */}
       <div
         role="dialog"
         aria-modal="true"