feat(web/m7-user-mgmt): /settings expansion + /forgot-password (U3-T5a)

Lands four of the U3 frontend surfaces. Splits T5 because the
dispatch covering everything in one shot crashed the runtime
mid-execution; this is the salvageable half.

- /settings gains three cards alongside Appearance: Profile
  (display name + email), Password (current + new + confirm with
  client-side mismatch check), API Token (display + copy +
  regenerate-with-double-click-confirm). Server error codes map
  to clear toasts.
- /forgot-password — public; takes an email and always shows the
  success message regardless of whether the email is on file
  (mirrors the server's no-enumeration posture).
- Login page gets a "Forgot password?" link below the existing
  register link.
- API client functions for the four /me endpoints (changePassword,
  updateProfile, getAPIToken, regenerateAPIToken), the SMTP admin
  trio (getSMTPConfig, updateSMTPConfig, testSMTPConfig), and the
  forgot/reset auth pair (forgotPassword, resetPassword).

Tests for these surfaces + /reset-password page + admin SMTP card
land in T5b (next follow-up).

web/src/lib/api/admin.ts

@@ -459,3 +459,36 @@ export function createAdminInvitesQuery() {
     queryFn: listInvites
   });
 }
+
+// SMTP config (U3) ----------------------------------------------------------
+
+export type SMTPConfig = {
+  enabled: boolean;
+  host: string;
+  port: number;
+  username: string;
+  password: string; // "***" when set, "" when unset
+  from_address: string;
+  from_name: string;
+  use_tls: boolean;
+};
+
+export async function getSMTPConfig(): Promise<SMTPConfig> {
+  return api.get<SMTPConfig>('/api/admin/smtp-config');
+}
+
+export async function updateSMTPConfig(input: SMTPConfig): Promise<void> {
+  await api.put('/api/admin/smtp-config', input);
+}
+
+export async function testSMTPConfig(): Promise<void> {
+  await api.post('/api/admin/smtp-config/test', {});
+}
+
+export function createSMTPConfigQuery() {
+  return createQuery({
+    queryKey: qk.smtpConfig(),
+    queryFn: getSMTPConfig,
+    staleTime: 60_000
+  });
+}

web/src/lib/api/me.ts

@@ -22,3 +22,34 @@ export function createSystemPlaylistsStatusQuery() {
     staleTime: 10_000
   });
 }
+
+// Self-service profile / password / API-token endpoints (U3) ---------------
+
+export type MyProfile = {
+  id: string;
+  username: string;
+  display_name: string | null;
+  email: string | null;
+  is_admin: boolean;
+};
+
+export type APITokenResponse = { api_token: string };
+
+export async function changePassword(currentPassword: string, newPassword: string): Promise<void> {
+  await api.put('/api/me/password', {
+    current_password: currentPassword,
+    new_password: newPassword,
+  });
+}
+
+export async function updateProfile(input: { display_name?: string; email?: string }): Promise<MyProfile> {
+  return api.put<MyProfile>('/api/me/profile', input);
+}
+
+export async function getAPIToken(): Promise<APITokenResponse> {
+  return api.get<APITokenResponse>('/api/me/api-token');
+}
+
+export async function regenerateAPIToken(): Promise<APITokenResponse> {
+  return api.post<APITokenResponse>('/api/me/api-token', {});
+}

web/src/lib/api/queries.ts

@@ -40,6 +40,7 @@ export const qk = {
   coverProviders:         ()              => ['coverProviders'] as const,
   adminUsers:             ()              => ['adminUsers'] as const,
   adminInvites:           ()              => ['adminInvites'] as const,
+  smtpConfig:             ()              => ['smtpConfig'] as const,
   suggestions:            (limit?: number) =>
     ['suggestions', { limit: limit ?? 12 }] as const,
   home:         ()                 => ['home'] as const,

web/src/lib/auth/store.svelte.ts

@@ -41,6 +41,14 @@ export async function register(opts: {
   await bootstrap();
 }
 
+export async function forgotPassword(email: string): Promise<void> {
+  await api.post('/api/auth/forgot-password', { email });
+}
+
+export async function resetPassword(token: string, newPassword: string): Promise<void> {
+  await api.post('/api/auth/reset-password', { token, new_password: newPassword });
+}
+
 export async function logout(opts: { silent?: boolean } = {}): Promise<void> {
   const userId = _user?.id;
   if (!opts.silent) {

web/src/routes/forgot-password/+page.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { pageTitle } from '$lib/branding';
+  import { forgotPassword } from '$lib/auth/store.svelte';
+
+  let email = $state('');
+  let submitted = $state(false);
+  let submitting = $state(false);
+
+  async function onSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    submitting = true;
+    try {
+      await forgotPassword(email);
+    } finally {
+      submitted = true;
+      submitting = false;
+    }
+  }
+</script>
+
+<svelte:head><title>{pageTitle('Forgot password')}</title></svelte:head>
+
+<main class="flex min-h-screen items-center justify-center bg-background text-text-primary">
+  <div class="w-full max-w-sm rounded-lg border border-border bg-surface p-6 shadow">
+    <h1 class="mb-6 text-center text-2xl font-semibold">Forgot password</h1>
+
+    {#if !submitted}
+      <p class="mb-4 text-sm text-text-secondary">
+        Enter your email. If an account uses it, you'll receive a reset link shortly.
+      </p>
+      <form class="space-y-4" onsubmit={onSubmit}>
+        <label class="block">
+          <span class="mb-1 block text-sm text-text-secondary">Email</span>
+          <input
+            id="email"
+            type="email"
+            required
+            autocomplete="email"
+            bind:value={email}
+            class="w-full rounded border border-border bg-background px-3 py-2 outline-none focus:border-accent"
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={submitting}
+          aria-busy={submitting ? 'true' : undefined}
+          class="w-full rounded bg-accent px-3 py-2 font-medium text-background disabled:opacity-60"
+        >
+          {submitting ? 'Sending…' : 'Send reset link'}
+        </button>
+      </form>
+    {:else}
+      <p class="text-sm text-text-primary">
+        If your email is on file, you'll receive a reset link shortly.
+        Check your inbox (and spam folder).
+      </p>
+    {/if}
+
+    <p class="mt-4 text-center text-sm text-text-secondary">
+      Remembered? <a href="/login" class="text-accent hover:underline">Log in</a>
+    </p>
+  </div>
+</main>

web/src/routes/login/+page.svelte

@@ -82,6 +82,9 @@
     </form>
 
     <p class="mt-4 text-center text-sm text-text-secondary">
+      <a href="/forgot-password" class="text-accent hover:underline">Forgot password?</a>
+    </p>
+    <p class="mt-2 text-center text-sm text-text-secondary">
       Don't have an account?
       <a href="/register" class="text-accent hover:underline">Register</a>
     </p>

web/src/routes/settings/+page.svelte

@@ -9,6 +9,12 @@
     type LBStatus
   } from '$lib/api/listenbrainz';
   import { theme, setTheme, type ThemePreference } from '$lib/stores/theme.svelte';
+  import {
+    updateProfile,
+    changePassword,
+    getAPIToken,
+    regenerateAPIToken
+  } from '$lib/api/me';
 
   const queryClient = useQueryClient();
 
@@ -32,10 +38,124 @@
     if (!$status.data) return;
     $enabledMutation.mutate(!$status.data.enabled);
   }
+
+  // Toast -------------------------------------------------------------------
+
+  let toast = $state<string | null>(null);
+  let toastTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function showToast(msg: string) {
+    toast = msg;
+    if (toastTimer) clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => { toast = null; }, 4000);
+  }
+
+  // Profile card ------------------------------------------------------------
+
+  let profileForm = $state<{ displayName: string; email: string }>({
+    displayName: '',
+    email: '',
+  });
+  let profileSaving = $state(false);
+
+  async function onSaveProfile() {
+    profileSaving = true;
+    try {
+      await updateProfile({
+        display_name: profileForm.displayName,
+        email: profileForm.email,
+      });
+      showToast('Profile saved.');
+    } catch (e: unknown) {
+      const code = (e as { code?: string })?.code;
+      if (code === 'email_taken') showToast('That email is already in use.');
+      else if (code === 'email_invalid') showToast('Email format is invalid.');
+      else showToast(`Save failed: ${code ?? 'unknown'}`);
+    } finally {
+      profileSaving = false;
+    }
+  }
+
+  // Password card -----------------------------------------------------------
+
+  let passwordForm = $state<{ current: string; new: string; confirm: string }>({
+    current: '', new: '', confirm: '',
+  });
+  let passwordSaving = $state(false);
+
+  async function onSavePassword(e: SubmitEvent) {
+    e.preventDefault();
+    if (passwordForm.new !== passwordForm.confirm) {
+      showToast('New passwords do not match.');
+      return;
+    }
+    passwordSaving = true;
+    try {
+      await changePassword(passwordForm.current, passwordForm.new);
+      showToast('Password changed.');
+      passwordForm = { current: '', new: '', confirm: '' };
+    } catch (e: unknown) {
+      const code = (e as { code?: string })?.code;
+      if (code === 'wrong_password') showToast('Current password is incorrect.');
+      else if (code === 'password_too_short') showToast('Password must be at least 8 characters.');
+      else showToast(`Change failed: ${code ?? 'unknown'}`);
+    } finally {
+      passwordSaving = false;
+    }
+  }
+
+  // API Token card ----------------------------------------------------------
+
+  let apiToken = $state<string | null>(null);
+  let tokenSaving = $state(false);
+  let confirmRegen = $state(false);
+  let regenTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    getAPIToken().then(r => { apiToken = r.api_token; }).catch(() => {});
+  });
+
+  async function copyToken() {
+    if (!apiToken) return;
+    try {
+      await navigator.clipboard.writeText(apiToken);
+      showToast('Token copied to clipboard.');
+    } catch {
+      showToast('Copy failed.');
+    }
+  }
+
+  async function onRegenerateToken() {
+    if (!confirmRegen) {
+      confirmRegen = true;
+      if (regenTimer) clearTimeout(regenTimer);
+      regenTimer = setTimeout(() => { confirmRegen = false; }, 5000);
+      return;
+    }
+    if (regenTimer) clearTimeout(regenTimer);
+    confirmRegen = false;
+    tokenSaving = true;
+    try {
+      const r = await regenerateAPIToken();
+      apiToken = r.api_token;
+      showToast('API token regenerated.');
+    } catch (e: unknown) {
+      showToast(`Regenerate failed: ${(e as { code?: string })?.code ?? 'unknown'}`);
+    } finally {
+      tokenSaving = false;
+    }
+  }
 </script>
 
 <svelte:head><title>{pageTitle('Settings')}</title></svelte:head>
 
+{#if toast}
+  <div data-testid="toast" role="status"
+       class="fixed bottom-4 right-4 z-50 rounded-md border border-border bg-surface px-4 py-2 text-sm text-text-primary shadow">
+    {toast}
+  </div>
+{/if}
+
 <div class="space-y-6">
   <h1 class="text-2xl font-semibold">Settings</h1>
 
@@ -132,6 +252,84 @@
     {/if}
   </section>
 
+  <!-- Profile card -->
+  <section class="space-y-3 rounded border border-border bg-surface p-4">
+    <h2 class="text-lg font-semibold">Profile</h2>
+    <p class="text-sm text-text-secondary">
+      Your display name and recovery email.
+    </p>
+    <div class="grid gap-3 sm:grid-cols-[auto_1fr] items-center">
+      <label class="text-sm text-text-secondary" for="profile-displayname">Display name</label>
+      <input id="profile-displayname" type="text" maxlength="64"
+             bind:value={profileForm.displayName}
+             class="w-full rounded border border-border bg-background px-3 py-2 outline-none focus:border-accent" />
+
+      <label class="text-sm text-text-secondary" for="profile-email">Email</label>
+      <input id="profile-email" type="email" autocomplete="email"
+             bind:value={profileForm.email}
+             class="w-full rounded border border-border bg-background px-3 py-2 outline-none focus:border-accent" />
+    </div>
+    <button type="button" disabled={profileSaving}
+            onclick={onSaveProfile}
+            class="rounded bg-accent px-3 py-2 text-sm font-medium text-background disabled:opacity-60">
+      {profileSaving ? 'Saving…' : 'Save profile'}
+    </button>
+  </section>
+
+  <!-- Password card -->
+  <section class="space-y-3 rounded border border-border bg-surface p-4">
+    <h2 class="text-lg font-semibold">Password</h2>
+    <form onsubmit={onSavePassword} class="space-y-3">
+      <div class="grid gap-3 sm:grid-cols-[auto_1fr] items-center">
+        <label class="text-sm text-text-secondary" for="password-current">Current password</label>
+        <input id="password-current" type="password" required minlength="8"
+               autocomplete="current-password"
+               bind:value={passwordForm.current}
+               class="w-full rounded border border-border bg-background px-3 py-2 outline-none focus:border-accent" />
+
+        <label class="text-sm text-text-secondary" for="password-new">New password</label>
+        <input id="password-new" type="password" required minlength="8"
+               autocomplete="new-password"
+               bind:value={passwordForm.new}
+               class="w-full rounded border border-border bg-background px-3 py-2 outline-none focus:border-accent" />
+
+        <label class="text-sm text-text-secondary" for="password-confirm">Confirm</label>
+        <input id="password-confirm" type="password" required minlength="8"
+               bind:value={passwordForm.confirm}
+               class="w-full rounded border border-border bg-background px-3 py-2 outline-none focus:border-accent" />
+      </div>
+      <button type="submit" disabled={passwordSaving}
+              class="rounded bg-accent px-3 py-2 text-sm font-medium text-background disabled:opacity-60">
+        {passwordSaving ? 'Saving…' : 'Change password'}
+      </button>
+    </form>
+  </section>
+
+  <!-- API Token card -->
+  <section class="space-y-3 rounded border border-border bg-surface p-4">
+    <h2 class="text-lg font-semibold">API Token</h2>
+    <p class="text-sm text-text-secondary">
+      Used by Subsonic clients (DSub, Symfonium, etc.) to authenticate to your library.
+      Regenerating invalidates clients that have the old token cached.
+    </p>
+    {#if apiToken}
+      <code class="block break-all rounded bg-background p-2 text-xs">
+        {apiToken}
+      </code>
+    {/if}
+    <div class="flex gap-2">
+      <button type="button" onclick={copyToken}
+              class="inline-flex items-center rounded-md border border-border bg-transparent px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary disabled:opacity-50">
+        Copy
+      </button>
+      <button type="button" disabled={tokenSaving}
+              onclick={onRegenerateToken}
+              class="inline-flex items-center rounded-md border border-border bg-transparent px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary disabled:opacity-50">
+        {confirmRegen ? 'Click again to confirm' : (tokenSaving ? 'Regenerating…' : 'Regenerate')}
+      </button>
+    </div>
+  </section>
+
   <section class="space-y-3 rounded border border-border bg-surface p-4">
     <h2 class="text-lg font-semibold">Library</h2>
     <ul class="space-y-2 text-sm">