Polish inputs and make re-usable components

.cursorignore

@@ -0,0 +1,2 @@
+.env
+archive

.gitignore

@@ -22,3 +22,6 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .data
+
+.env
+archive

AGENTS.md

@@ -0,0 +1,19 @@
+# AGENT NOTES
+
+- SvelteKit app under `src/`; tools require BeatLeader auth and rank gating.
+- Shared logic lives in `src/lib/utils/plebsaber-utils.ts` (requirements, playlist helpers, etc.).
+- Tool routes (`/tools/*`) use a layout that fetches the BeatLeader profile once (`+layout.server.ts`).
+- UI components for gating (e.g., `HasToolAccess.svelte`) handle supporter/top-3k restrictions.
+- BeatLeader session info exposed via `/api/beatleader/me`; navbar warns if outside allowed rank.
+- OAuth callback stores identity in a long-lived session (`plebsaber_session` via `.data/plebsaber_sessions.json`).
+- Tools expect BeatLeader supporter or global rank better than pleb's current rank; navbar dropdown warns when outside that threshold.
+- Global navigation lives in `src/lib/components/NavBar.svelte`; it houses the BeatLeader login dropdown with profile, testing (dev) and logout actions.
+- Core BeatLeader tool pages reuse shared components such as `PlayerCompareForm.svelte`, `MapCard.svelte`, `PlayerCard.svelte`, and `SongPlayer.svelte` for consistent UI/UX.
+- `/player-info` route consumes `/api/beatleader/me` to display and log raw BeatLeader session data for debugging.
+- `/tools/stats` (admin-only, BL id `76561199407393962`) lists every stored BeatLeader session with full player profiles, skill triangles, and last-seen timestamps; navigation link only appears for that account.
+- `/tools/compare-histories` compares two players' play histories and displays their profiles with skill triangles when comparing.
+
+## Shell command guidance
+
+- Whitelisted commands: `grep`
+- DO NOT USE: `cd` (prefer `pwd`)

plebsaber.stream.code-workspace

@@ -4,14 +4,11 @@
 			"path": "."
 		},
 		{
-			"path": "../../../src/beatleader-website"
+			"path": "../../../src/beatleader/beatleader-website"
 		},
 		{
-			"path": "../../../src/beatleader-server"
+			"path": "../../../src/beatleader/beatleader-server"
-		},
-		{
-			"path": "../../../src/beatleader-mod"
 		}
 	],
 	"settings": {}
-}
+}

src/lib/components/DifficultyLabel.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let diffName: string;
+  export let modeName: string = 'Standard';
+
+  function difficultyToColor(name: string | undefined): string {
+    const n = (name ?? 'ExpertPlus').toLowerCase();
+    if (n === 'easy') return 'MediumSeaGreen';
+    if (n === 'normal') return '#59b0f4';
+    if (n === 'hard') return 'tomato';
+    if (n === 'expert') return '#bf2a42';
+    if (n === 'expertplus' || n === 'expert+' || n === 'ex+' ) return '#8f48db';
+    return '#8f48db';
+  }
+</script>
+
+<span class="rounded bg-white/10 px-2 py-0.5 text-[11px]">
+  {modeName} ·
+  <span class="rounded px-1 ml-1" style="background-color: {difficultyToColor(diffName)}; color: #fff;">
+    {diffName}
+  </span>
+</span>
+

src/lib/components/HasToolAccess.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import {
+    meetsToolRequirement,
+    DEFAULT_ADMIN_RANK_FALLBACK,
+    PLEB_BEATLEADER_ID,
+    type BeatLeaderPlayerProfile,
+    type ToolRequirement
+  } from '$lib/utils/plebsaber-utils';
+  import PlayerCard from '$lib/components/PlayerCard.svelte';
+
+  const BL_PATREON_URL = 'https://www.patreon.com/BeatLeader';
+
+  export let player: BeatLeaderPlayerProfile | null = null;
+  export let requirement: ToolRequirement | null = null;
+  export let showCurrentRank = true;
+  export let adminRank: number | null = null;
+  export let adminPlayer: BeatLeaderPlayerProfile | null = null;
+
+  $: requirementContext = { adminRank };
+  $: hasAccess = meetsToolRequirement(player, requirement, requirementContext);
+  $: fallbackBaseline = DEFAULT_ADMIN_RANK_FALLBACK;
+  $: resolvedBaseline =
+    typeof adminRank === 'number' && Number.isFinite(adminRank) && adminRank > 0 ? adminRank : fallbackBaseline;
+  $: plebProfile = adminPlayer;
+  $: plebName = plebProfile?.name;
+  $: baselineCopy = resolvedBaseline
+    ? `players ranked better than ${plebName} (#${resolvedBaseline.toLocaleString()})`
+    : `players ranked better than ${plebName}`;
+  $: playerRank = typeof player?.rank === 'number' ? player?.rank ?? null : null;
+  $: playerRankDisplay = playerRank !== null ? `#${playerRank.toLocaleString()}` : null;
+</script>
+
+{#if hasAccess}
+  <slot />
+{:else}
+  <div class="mt-6 rounded-md border border-amber-500/40 bg-amber-500/10 p-4 text-sm text-amber-100 leading-relaxed">
+    <p class="font-semibold text-amber-200">
+      Auth Required: Tools are restricted to <a class="underline hover:text-white" href={BL_PATREON_URL} target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> (and {baselineCopy}).
+    </p>
+    {#if plebProfile}
+      <div class="pleb-card">
+        <PlayerCard
+          name={plebProfile.name ?? plebName}
+          country={plebProfile.country ?? null}
+          rank={plebProfile.rank ?? resolvedBaseline}
+          showRank={Boolean(plebProfile.rank ?? resolvedBaseline)}
+          avatar={plebProfile.avatar ?? null}
+          avatarSize={48}
+          techPp={plebProfile?.techPp}
+          accPp={plebProfile?.accPp}
+          passPp={plebProfile?.passPp}
+          playerId={plebProfile?.id ?? PLEB_BEATLEADER_ID}
+          gradientId="pleb-baseline"
+        />
+      </div>
+    {/if}
+    {#if showCurrentRank}
+      <p class="mt-2 text-xs text-amber-200/80">
+        {#if playerRankDisplay}
+          Current global rank: {playerRankDisplay}
+        {:else}
+          We couldn't determine your current BeatLeader rank. Try logging in.
+        {/if}
+      </p>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .pleb-card {
+    margin-top: 1rem;
+    display: flex;
+  }
+
+  .pleb-card :global(.summary-header) {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+</style>
+

src/lib/components/MapActionButtons.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  export let hash: string;
+  export let leaderboardId: string | undefined = undefined;
+  export let diffName: string = 'ExpertPlus';
+  export let modeName: string = 'Standard';
+  export let beatsaverKey: string | undefined = undefined;
+
+  // Toast notification state
+  let toastMessage = '';
+  let showToast = false;
+  let toastTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  // Button feedback state
+  let isLitUp = false;
+
+  function showToastMessage(message: string) {
+    // Clear any existing toast
+    if (toastTimeout) {
+      clearTimeout(toastTimeout);
+    }
+    
+    toastMessage = message;
+    showToast = true;
+    
+    // Auto-hide toast after 3 seconds
+    toastTimeout = setTimeout(() => {
+      showToast = false;
+      toastMessage = '';
+    }, 3000);
+  }
+
+  function lightUpButton() {
+    isLitUp = true;
+    // Remove the lighting effect after 1 second
+    setTimeout(() => {
+      isLitUp = false;
+    }, 1000);
+  }
+
+  async function copyBsrCommand() {
+    if (!beatsaverKey) return;
+    
+    try {
+      const bsrCommand = `!bsr ${beatsaverKey}`;
+      await navigator.clipboard.writeText(bsrCommand);
+      
+      // Show success feedback with the actual command
+      showToastMessage(`Copied "${bsrCommand}" to clipboard`);
+      lightUpButton();
+    } catch (err) {
+      console.error('Failed to copy to clipboard:', err);
+      showToastMessage('Failed to copy to clipboard');
+    }
+  }
+
+  $: beatLeaderUrl = leaderboardId
+    ? `https://beatleader.com/leaderboard/global/${leaderboardId}`
+    : `https://beatleader.com/leaderboard/global/${hash}?diff=${encodeURIComponent(diffName)}&mode=${encodeURIComponent(modeName)}`;
+  
+  $: beatSaverUrl = beatsaverKey
+    ? `https://beatsaver.com/maps/${beatsaverKey}`
+    : `https://beatsaver.com/search/hash/${hash}`;
+</script>
+
+<div class="flex flex-wrap gap-2">
+  <a
+    class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
+    href={beatLeaderUrl}
+    target="_blank"
+    rel="noopener"
+    title="Open in BeatLeader"
+    >BL</a
+  >
+  <a
+    class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
+    href={beatSaverUrl}
+    target="_blank"
+    rel="noopener"
+    title="Open in BeatSaver"
+    >BS</a
+  >
+  <button
+    class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
+    class:lit-up={isLitUp}
+    on:click={copyBsrCommand}
+    disabled={!beatsaverKey}
+    title="!bsr"
+  >!bsr</button>
+</div>
+
+<!-- Toast Notification -->
+{#if showToast}
+  <div class="toast-notification" role="status" aria-live="polite">
+    {toastMessage}
+  </div>
+{/if}
+
+<style>
+  /* Toast notification styles */
+  .toast-notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: #10b981;
+    color: white;
+    padding: 12px 16px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    font-size: 14px;
+    font-weight: 500;
+    animation: slideIn 0.3s ease-out;
+  }
+  
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  
+  /* Button lighting effect */
+  .lit-up {
+    background: linear-gradient(45deg, #10b981, #059669);
+    border-color: #10b981 !important;
+    color: white !important;
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+    animation: pulse 0.6s ease-out;
+  }
+  
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+    }
+    70% {
+      box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
+    }
+    100% {
+      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    }
+  }
+</style>
+

src/lib/components/MapCard.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import DifficultyLabel from './DifficultyLabel.svelte';
+  import MapActionButtons from './MapActionButtons.svelte';
+  import SongPlayer from './SongPlayer.svelte';
+
+  // Song metadata
+  export let hash: string;
+  export let coverURL: string | undefined = undefined;
+  export let songName: string | undefined = undefined;
+  export let mapper: string | undefined = undefined;
+  export let stars: number | undefined = undefined;
+  export let timeset: number | undefined = undefined;
+
+  // Difficulty info
+  export let diffName: string;
+  export let modeName: string = 'Standard';
+
+  // BeatLeader/BeatSaver links
+  export let leaderboardId: string | undefined = undefined;
+  export let beatsaverKey: string | undefined = undefined;
+</script>
+
+<div class="aspect-square bg-black/30">
+  {#if coverURL}
+    <img
+      src={coverURL}
+      alt={songName ?? hash}
+      loading="lazy"
+      class="h-full w-full object-cover"
+    />
+  {:else}
+    <div class="h-full w-full flex items-center justify-center text-2xl">☁️</div>
+  {/if}
+</div>
+<div class="p-3">
+  <div class="font-semibold truncate" title={songName ?? hash}>
+    {songName ?? hash}
+  </div>
+  {#if mapper}
+    <div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
+      <span>
+        {mapper}
+        {#if stars !== undefined}
+          <span class="ml-3" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
+        {/if}
+      </span>
+      {#if timeset !== undefined}
+        <span class="text-[11px] ml-2">{new Date(timeset * 1000).toLocaleDateString()}</span>
+      {/if}
+    </div>
+  {/if}
+  
+  <div class="mt-2 flex items-center gap-2">
+    <DifficultyLabel {diffName} {modeName} />
+    <div class="flex-1">
+      <SongPlayer {hash} preferBeatLeader={true} />
+    </div>
+  </div>
+
+  <slot name="content" />
+
+  <div class="mt-3">
+    <MapActionButtons
+      {hash}
+      {leaderboardId}
+      {diffName}
+      {modeName}
+      {beatsaverKey}
+    />
+  </div>
+</div>
+

src/lib/components/NavBar.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+  import beatleaderLogo from '$lib/assets/beatleader-logo.png';
+  import { DEFAULT_ADMIN_RANK_FALLBACK, PLEB_BEATLEADER_ID } from '$lib/utils/plebsaber-utils';
   const links = [
     { href: '/', label: 'Home' },
     { href: '/tools', label: 'Tools' },
@@ -7,24 +10,189 @@
   let open = false;
   const toggle = () => (open = !open);
   const close = () => (open = false);
-  const year = new Date().getFullYear();
+
+  type BeatLeaderIdentity = {
+    id?: string;
+    name?: string;
+  };
+
+  type BeatLeaderPlayer = {
+    id?: string;
+    name?: string;
+    avatar?: string | null;
+    rank?: number | null;
+    countryRank?: number | null;
+  };
+
+  type BeatLeaderProfile = {
+    id?: string;
+    name?: string;
+    avatar?: string;
+    rank?: number | null;
+    countryRank?: number | null;
+  };
+
+  let user: BeatLeaderProfile | null = null;
+  let loginHref = '/auth/beatleader/login';
+  let checkingSession = true;
+  let menuOpen = false;
+  let adminRank: number | null = null;
+  let adminFallbackRank = DEFAULT_ADMIN_RANK_FALLBACK;
+
+  const getProfileUrl = (id?: string) => (id ? `https://beatleader.com/u/${encodeURIComponent(id)}` : 'https://beatleader.com');
+
+  function extractPlayer(payload: unknown): BeatLeaderProfile | null {
+    if (!payload || typeof payload !== 'object') return null;
+    const { identity, player } = payload as { identity?: BeatLeaderIdentity | null; player?: BeatLeaderPlayer | null };
+
+    const sourcePlayer = player ?? null;
+    const sourceIdentity = identity ?? null;
+
+    const id = sourcePlayer?.id ?? sourceIdentity?.id;
+    const name = sourcePlayer?.name ?? sourceIdentity?.name;
+    const avatar = sourcePlayer?.avatar ?? null;
+    const rank = sourcePlayer?.rank ?? null;
+    const countryRank = sourcePlayer?.countryRank ?? null;
+
+    if (!id && !name) return null;
+
+    return {
+      id: typeof id === 'string' ? id : undefined,
+      name: typeof name === 'string' ? name : undefined,
+      avatar: typeof avatar === 'string' ? avatar : undefined,
+      rank: typeof rank === 'number' ? rank : null,
+      countryRank: typeof countryRank === 'number' ? countryRank : null
+    };
+  }
+
+  function extractAdminBaseline(payload: unknown): { rank: number | null; fallback: number } | null {
+    if (!payload || typeof payload !== 'object') return null;
+    const baseline = (payload as { adminBaseline?: { rank?: unknown; fallback?: unknown } }).adminBaseline;
+    if (!baseline || typeof baseline !== 'object') return null;
+    const rank = (baseline as { rank?: unknown }).rank;
+    const fallback = (baseline as { fallback?: unknown }).fallback;
+    return {
+      rank: typeof rank === 'number' && Number.isFinite(rank) && rank > 0 ? rank : null,
+      fallback: typeof fallback === 'number' && Number.isFinite(fallback) && fallback > 0 ? fallback : DEFAULT_ADMIN_RANK_FALLBACK
+    };
+  }
+
+  onMount(() => {
+    const redirectTarget = `${window.location.pathname}${window.location.search}${window.location.hash}` || '/';
+    loginHref = `/auth/beatleader/login?redirect_uri=${encodeURIComponent(redirectTarget)}`;
+
+    (async () => {
+      try {
+        const res = await fetch('/api/beatleader/me');
+        if (res.ok) {
+          const json = (await res.json()) as unknown;
+          const profile = extractPlayer(json);
+          if (profile) {
+            user = profile;
+          }
+          const baseline = extractAdminBaseline(json);
+          if (baseline) {
+            adminRank = baseline.rank;
+            adminFallbackRank = baseline.fallback;
+          }
+        } else if (res.status === 401) {
+          try {
+            const body = (await res.json()) as Record<string, unknown>;
+            const suggested = body?.login;
+            if (typeof suggested === 'string') {
+              loginHref = suggested;
+            }
+          } catch {
+            // ignore JSON parsing errors for 401 responses
+          }
+        }
+      } catch (err) {
+        console.error('Failed to determine BeatLeader session state', err);
+      } finally {
+        checkingSession = false;
+      }
+    })();
+  });
+
+  function toggleMenu() {
+    menuOpen = !menuOpen;
+  }
+
+  function closeMenu() {
+    menuOpen = false;
+  }
+
+  $: baselineRank = (adminRank ?? adminFallbackRank ?? DEFAULT_ADMIN_RANK_FALLBACK);
+  $: requiresWarning = typeof user?.rank === 'number' && Number.isFinite(user.rank)
+    ? (user.rank as number) > baselineRank
+    : false;
+  $: baselineCopy = baselineRank ? `pleb (#${baselineRank.toLocaleString()})` : 'pleb';
 </script>
 
 <header class="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-surface/50 border-b border-white/10">
   <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
     <div class="flex h-14 items-center justify-between">
       <a href="/" class="flex items-center gap-2">
-        <span class="h-2 w-2 rounded-full bg-neon" style="box-shadow: 0 0 12px rgba(34,211,238,0.60);"></span>
         <span class="font-display text-lg tracking-widest">
-          <span class="neon-text">PLEBSABER</span><span class="text-muted">.stream</span>
+          <span class="neon-text">plebsaber</span><span class="text-muted">.stream</span>
         </span>
+        <span class="h-2 w-2 rounded-full bg-neon-fuchsia" style="box-shadow: 0 0 12px rgba(255,0,229,0.60);"></span>
+        <span class="h-2 w-2 rounded-full bg-neon" style="box-shadow: 0 0 12px rgba(34,211,238,0.60);"></span>
       </a>
 
       <nav class="hidden md:flex items-center gap-6">
         {#each links as link}
           <a href={link.href} class="text-muted hover:text-white transition">{link.label}</a>
         {/each}
-        <a href="/tools/beatleader-compare" class="btn-neon">Compare Players</a>
+        {#if checkingSession}
+          <span class="text-sm text-muted">Connecting…</span>
+        {:else if user}
+          <div class="relative">
+            <button
+              class="flex items-center gap-3 rounded-md border border-white/10 px-3 py-1.5 text-sm transition hover:bg-white/10"
+              on:click={toggleMenu}
+              aria-haspopup="true"
+              aria-expanded={menuOpen}
+            >
+              <img
+                src={user.avatar ?? beatleaderLogo}
+                alt="BeatLeader avatar"
+                class="h-8 w-8 rounded-full object-cover shadow-sm"
+                loading="lazy"
+              />
+              <span class="font-medium text-white">{user.name ?? 'BeatLeader user'}</span>
+              <svg class={`h-4 w-4 transition-transform ${menuOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.292l3.71-4.06a.75.75 0 111.08 1.04l-4.25 4.65a.75.75 0 01-1.08 0l-4.25-4.65a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            {#if menuOpen}
+              <div class="dropdown" role="menu">
+                {#if requiresWarning}
+                  <div class="dropdown-warning">
+                    <strong>Heads up:</strong>
+                    <span>Tools are limited to <a class="underline" href="https://www.patreon.com/BeatLeader" target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> or players ranked better than {baselineCopy}.</span>
+                  </div>
+                {/if}
+                {#if user?.id === PLEB_BEATLEADER_ID}
+                  <a href="/tools/stats" class="dropdown-item" on:click={closeMenu}>Stats</a>
+                {/if}
+                <a href="/player-info" class="dropdown-item" on:click={closeMenu}>Player Info</a>
+                <a href={getProfileUrl(user.id)} class="dropdown-item dropdown-item--with-icon" target="_blank" rel="noreferrer noopener" on:click={closeMenu}>
+                  <span>Profile</span>
+                  <img src={beatleaderLogo} alt="BeatLeader" class="dropdown-icon" />
+                </a>
+                <form action="/auth/beatleader/logout?redirect_uri=%2F" method="POST" class="dropdown-item-form">
+                  <button type="submit" class="dropdown-item-button">Logout</button>
+                </form>
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <a href={loginHref} class="btn-neon inline-flex items-center gap-2 px-3 py-1.5">
+            <img src={beatleaderLogo} alt="BeatLeader" class="h-6 w-6" />
+            <span>Login</span>
+          </a>
+        {/if}
       </nav>
 
       <button class="md:hidden btn-neon px-3 py-1.5" on:click={toggle} aria-expanded={open} aria-controls="mobile-nav">
@@ -39,10 +207,146 @@
         {#each links as link}
           <a href={link.href} on:click={close} class="text-muted hover:text-white transition">{link.label}</a>
         {/each}
-        <a href="/tools/beatleader-compare" on:click={close} class="btn-neon w-max">Compare Players</a>
+        {#if checkingSession}
+          <span class="text-sm text-muted">Connecting…</span>
+        {:else if user}
+          <div class="border border-white/10 rounded-md overflow-hidden">
+            {#if requiresWarning}
+              <div class="dropdown-warning mobile">
+                <strong>Heads up:</strong>
+                <span>Tools are limited to <a class="underline" href="https://www.patreon.com/BeatLeader" target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> or players ranked better than {baselineCopy}.</span>
+              </div>
+            {/if}
+            {#if user?.id === PLEB_BEATLEADER_ID}
+              <a href="/tools/stats" class="dropdown-item" on:click={close}>Stats</a>
+            {/if}
+            <a href="/player-info" class="dropdown-item" on:click={close}>Player Info</a>
+            <a href={getProfileUrl(user.id)} class="dropdown-item dropdown-item--with-icon" target="_blank" rel="noreferrer noopener" on:click={close}>
+              <span>Profile</span>
+              <img src={beatleaderLogo} alt="BeatLeader" class="dropdown-icon" />
+            </a>
+            <form action="/auth/beatleader/logout?redirect_uri=%2F" method="POST">
+              <button type="submit" class="dropdown-item-button w-full text-left">Logout</button>
+            </form>
+          </div>
+        {:else}
+          <a href={loginHref} on:click={close} class="btn-neon inline-flex items-center gap-2 w-max px-3 py-2">
+            <img src={beatleaderLogo} alt="BeatLeader" class="h-6 w-6" />
+            <span>Login</span>
+          </a>
+        {/if}
       </div>
     </div>
   {/if}
 </header>
 
+<style>
+  .dropdown {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 0.5rem);
+    min-width: 14rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(8, 12, 24, 0.98));
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 20px rgba(34, 211, 238, 0.35);
+    border-radius: 0.6rem;
+    padding: 0.35rem;
+    display: grid;
+    gap: 0.25rem;
+    z-index: 50;
+    backdrop-filter: blur(12px);
+  }
+
+  .dropdown::before {
+    content: '';
+    position: absolute;
+    top: -0.5rem;
+    right: 1.2rem;
+    width: 0.75rem;
+    height: 0.75rem;
+    background: inherit;
+    transform: rotate(45deg);
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    z-index: -1;
+  }
+
+  .dropdown-item,
+  .dropdown-item-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 0.75rem;
+    border-radius: 0.45rem;
+    font-size: 0.85rem;
+    color: rgba(226, 232, 240, 0.8);
+    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
+    text-decoration: none;
+  }
+
+  .dropdown-item--with-icon {
+    justify-content: flex-start;
+  }
+
+  .dropdown-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item-button:hover {
+    background: rgba(34, 211, 238, 0.15);
+    color: rgba(255, 255, 255, 0.95);
+    transform: translateX(2px);
+  }
+
+  .dropdown-item-button {
+    width: 100%;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  .dropdown-item-form {
+    margin: 0;
+  }
+
+  .dropdown-warning {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    padding: 0.6rem 0.75rem;
+    border-radius: 0.45rem;
+    background: rgba(255, 152, 0, 0.18);
+    color: rgba(255, 220, 186, 0.95);
+    font-size: 0.8rem;
+    box-shadow: inset 0 0 15px rgba(255, 152, 0, 0.15);
+  }
+
+  .dropdown-warning strong {
+    font-weight: 700;
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .dropdown-warning.mobile {
+    border-radius: 0;
+  }
+
+  @media (max-width: 768px) {
+    .dropdown {
+      position: static;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    .dropdown::before {
+      display: none;
+    }
+  }
+</style>
+
 

src/lib/components/PlayerCard.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+  import { calculateSkillTriangle } from '$lib/utils/plebsaber-utils';
+
+  export let name: string = 'Unknown';
+  export let country: string | null = null;
+  export let avatar: string | null = null;
+  export let rank: number | null = null;
+  export let showRank: boolean = true;
+  export let width: string = '12em';
+  export let avatarSize: number = 48;
+  export let techPp: number | null | undefined = null;
+  export let accPp: number | null | undefined = null;
+  export let passPp: number | null | undefined = null;
+  // gradientId must be unique per instance to avoid SVG gradient conflicts when multiple cards render on the same page
+  export let gradientId: string = 'summary-triangle';
+  export let playerId: string | null = null;
+
+  $: triangle = calculateSkillTriangle(techPp, accPp, passPp);
+  $: triangleCorners = triangle?.corners;
+  $: normalized = triangle?.normalized;
+  $: hasTriangle = triangle !== null;
+  $: profileUrl = playerId ? `https://beatleader.com/u/${encodeURIComponent(playerId)}` : null;
+
+  const gradientTechId = `${gradientId}-tech`;
+  const gradientAccId = `${gradientId}-acc`;
+  const gradientPassId = `${gradientId}-pass`;
+</script>
+
+{#if profileUrl}
+  <a href={profileUrl} target="_blank" rel="noreferrer noopener" class="summary-header clickable" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
+    <img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
+    <div class="summary-body">
+      <div class="summary-name">{name}</div>
+      <div class="summary-meta">
+        {#if country}
+          <span>{country}</span>
+        {/if}
+        {#if showRank && typeof rank === 'number'}
+          <span>Rank: {rank}</span>
+        {/if}
+      </div>
+    </div>
+    {#if hasTriangle}
+      <div class="summary-triangle">
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
+          <g transform="matrix(1 0 0 -1 0 86.6)">
+            <defs>
+              <linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
+                <stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
+                <stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
+              </linearGradient>
+              <linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
+                <stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
+                <stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
+              </linearGradient>
+              <linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
+                <stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
+                <stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
+              </linearGradient>
+            </defs>
+            <g stroke="#fff" stroke-width="0.5">
+              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
+              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
+              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
+            </g>
+            <g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
+              <path d="M 50,0 L 0,86.6 100,86.6 Z" />
+            </g>
+          </g>
+        </svg>
+      </div>
+    {/if}
+  </a>
+{:else}
+  <div class="summary-header" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
+    <img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
+    <div class="summary-body">
+      <div class="summary-name">{name}</div>
+      <div class="summary-meta">
+        {#if country}
+          <span>{country}</span>
+        {/if}
+        {#if showRank && typeof rank === 'number'}
+          <span>Rank: {rank}</span>
+        {/if}
+      </div>
+    </div>
+    {#if hasTriangle}
+      <div class="summary-triangle">
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
+          <g transform="matrix(1 0 0 -1 0 86.6)">
+            <defs>
+              <linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
+                <stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
+                <stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
+              </linearGradient>
+              <linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
+                <stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
+                <stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
+              </linearGradient>
+              <linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
+                <stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
+                <stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
+              </linearGradient>
+            </defs>
+            <g stroke="#fff" stroke-width="0.5">
+              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
+              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
+              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
+            </g>
+            <g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
+              <path d="M 50,0 L 0,86.6 100,86.6 Z" />
+            </g>
+          </g>
+        </svg>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .summary-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: var(--header-width, 50%);
+    max-width: var(--header-width, 50%);
+    min-width: 200px;
+    flex: 0 0 var(--header-width, 50%);
+    text-decoration: none;
+    color: inherit;
+  }
+
+  img {
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid rgba(34, 211, 238, 0.35);
+    box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
+  }
+
+  img.placeholder {
+    opacity: 0.3;
+    border-style: dashed;
+  }
+
+  .summary-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .summary-name {
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.95);
+    line-height: 1.1;
+  }
+
+  .summary-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: rgba(148, 163, 184, 0.75);
+  }
+
+  .summary-triangle {
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .summary-triangle svg {
+    width: 100%;
+    height: 100%;
+    filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.25));
+  }
+
+  .summary-header.clickable {
+    cursor: pointer;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+  }
+
+  .summary-header.clickable:hover {
+    transform: translateY(-2px);
+    opacity: 0.9;
+  }
+
+  .summary-header.clickable:active {
+    transform: translateY(0);
+  }
+</style>
+

src/lib/components/PlayerCompareForm.svelte

@@ -0,0 +1,356 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import PlayerCard from '$lib/components/PlayerCard.svelte';
+  import type { BeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
+
+  export let playerA = '';
+  export let playerB = '';
+  export let loading = false;
+  export let hasResults = false;
+  export let oncompare: (() => void) | undefined = undefined;
+  export let currentPlayer: BeatLeaderPlayerProfile | null = null;
+
+  let initialized = false;
+
+  // Local state for default player cards
+  let hasCompared = false;
+  let playerAProfile: BeatLeaderPlayerProfile | null = null;
+  let playerBProfile: BeatLeaderPlayerProfile | null = null;
+
+  // Preview profiles (loaded as user types)
+  let previewAProfile: BeatLeaderPlayerProfile | null = null;
+  let previewBProfile: BeatLeaderPlayerProfile | null = null;
+  let loadingPreviewA = false;
+  let loadingPreviewB = false;
+
+  // Load from URL params on mount
+  onMount(() => {
+    if (browser) {
+      const sp = new URLSearchParams(location.search);
+      const urlA = sp.get('a');
+      const urlB = sp.get('b');
+      
+      // Prefill playerA with current player if not in URL
+      if (!urlA && !playerA && currentPlayer?.id) {
+        playerA = currentPlayer.id;
+      } else {
+        playerA = urlA ?? playerA;
+      }
+      
+      playerB = urlB ?? playerB;
+      initialized = true;
+
+      // Load initial previews if IDs are already present
+      if (playerA.trim()) {
+        void loadPreviewProfile('A', playerA.trim());
+      }
+      if (playerB.trim()) {
+        void loadPreviewProfile('B', playerB.trim());
+      }
+    }
+  });
+
+  // Sync to URL params when values change
+  $: if (browser && initialized) {
+    const sp = new URLSearchParams(location.search);
+    if (playerA.trim()) {
+      sp.set('a', playerA.trim());
+    } else {
+      sp.delete('a');
+    }
+    if (playerB.trim()) {
+      sp.set('b', playerB.trim());
+    } else {
+      sp.delete('b');
+    }
+    const qs = sp.toString();
+    const url = location.pathname + (qs ? `?${qs}` : '');
+    history.replaceState(null, '', url);
+  }
+
+  async function fetchPlayerProfile(playerId: string): Promise<BeatLeaderPlayerProfile | null> {
+    try {
+      const res = await fetch(`https://api.beatleader.xyz/player/${encodeURIComponent(playerId)}`);
+      if (!res.ok) return null;
+      return (await res.json()) as BeatLeaderPlayerProfile;
+    } catch {
+      return null;
+    }
+  }
+
+  async function loadDefaultPlayerCards(a: string, b: string): Promise<void> {
+    playerAProfile = null;
+    playerBProfile = null;
+    if (!a || !b) return;
+    const [pa, pb] = await Promise.all([
+      fetchPlayerProfile(a),
+      fetchPlayerProfile(b)
+    ]);
+    playerAProfile = pa;
+    playerBProfile = pb;
+  }
+
+  // Debounced preview loading
+  let previewDebounceTimerA: ReturnType<typeof setTimeout> | null = null;
+  let previewDebounceTimerB: ReturnType<typeof setTimeout> | null = null;
+
+  async function loadPreviewProfile(player: 'A' | 'B', id: string): Promise<void> {
+    if (!id || id.trim().length < 3) {
+      if (player === 'A') previewAProfile = null;
+      else previewBProfile = null;
+      return;
+    }
+
+    const trimmed = id.trim();
+    if (player === 'A') {
+      loadingPreviewA = true;
+    } else {
+      loadingPreviewB = true;
+    }
+
+    try {
+      const profile = await fetchPlayerProfile(trimmed);
+      // Only update if this is still the current player ID
+      const currentId = player === 'A' ? playerA.trim() : playerB.trim();
+      if (currentId === trimmed) {
+        if (player === 'A') {
+          previewAProfile = profile;
+        } else {
+          previewBProfile = profile;
+        }
+      }
+    } catch {
+      // Silently fail - don't show errors for preview loading
+      const currentId = player === 'A' ? playerA.trim() : playerB.trim();
+      if (currentId === trimmed) {
+        if (player === 'A') {
+          previewAProfile = null;
+        } else {
+          previewBProfile = null;
+        }
+      }
+    } finally {
+      if (player === 'A') {
+        loadingPreviewA = false;
+      } else {
+        loadingPreviewB = false;
+      }
+    }
+  }
+
+  // Watch for changes to playerA and debounce preview loading
+  $: if (initialized && browser) {
+    const trimmed = playerA.trim();
+    if (previewDebounceTimerA) clearTimeout(previewDebounceTimerA);
+    
+    if (trimmed && trimmed.length >= 3) {
+      previewDebounceTimerA = setTimeout(() => {
+        void loadPreviewProfile('A', trimmed);
+      }, 800);
+    } else {
+      previewAProfile = null;
+    }
+  }
+
+  // Watch for changes to playerB and debounce preview loading
+  $: if (initialized && browser) {
+    const trimmed = playerB.trim();
+    if (previewDebounceTimerB) clearTimeout(previewDebounceTimerB);
+    
+    if (trimmed && trimmed.length >= 3) {
+      previewDebounceTimerB = setTimeout(() => {
+        void loadPreviewProfile('B', trimmed);
+      }, 800);
+    } else {
+      previewBProfile = null;
+    }
+  }
+
+  // Computed: which profile to display (post-compare takes priority over preview)
+  $: displayProfileA = hasCompared ? playerAProfile : previewAProfile;
+  $: displayProfileB = hasCompared ? playerBProfile : previewBProfile;
+  $: showCardA = !!(displayProfileA || (loadingPreviewA && playerA.trim().length >= 3));
+  $: showCardB = !!(displayProfileB || (loadingPreviewB && playerB.trim().length >= 3));
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    hasCompared = true;
+    const a = playerA.trim();
+    const b = playerB.trim();
+    // Fire and forget: show default cards irrespective of parent page implementation
+    void loadDefaultPlayerCards(a, b);
+    oncompare?.();
+  }
+</script>
+
+<form class="mt-6" on:submit={handleSubmit}>
+  <div class="form-grid">
+    <div class="player-column">
+      <div class="input-tile">
+        <label class="block text-sm text-muted">Player A ID
+          <input 
+            class="mt-1 w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none {hasResults ? 'border-white/10' : 'neon-input'}" 
+            bind:value={playerA} 
+            placeholder="7656119... or BL ID" 
+            required 
+          />
+        </label>
+        {#if $$slots['player-a-card']}
+          <slot name="player-a-card" />
+        {:else if showCardA}
+          <div class="player-card-wrapper">
+            {#if displayProfileA}
+              <PlayerCard
+                name={displayProfileA.name ?? 'Player A'}
+                avatar={displayProfileA.avatar ?? null}
+                country={displayProfileA.country ?? null}
+                rank={displayProfileA.rank ?? null}
+                showRank={typeof displayProfileA.rank === 'number'}
+                width="100%"
+                avatarSize={56}
+                techPp={displayProfileA.techPp}
+                accPp={displayProfileA.accPp}
+                passPp={displayProfileA.passPp}
+                playerId={displayProfileA.id ?? null}
+                gradientId="compare-player-a"
+              />
+            {:else if loadingPreviewA}
+              <div class="loading-profile">Loading player...</div>
+            {:else if hasCompared}
+              <div class="empty-profile">Player A profile not found</div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <div class="player-column">
+      <div class="input-tile">
+        <label class="block text-sm text-muted">Player B ID
+          <input 
+            class="mt-1 w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none {hasResults ? 'border-white/10' : 'neon-input'}" 
+            bind:value={playerB} 
+            placeholder="7656119... or BL ID" 
+            required 
+          />
+        </label>
+        {#if $$slots['player-b-card']}
+          <slot name="player-b-card" />
+        {:else if showCardB}
+          <div class="player-card-wrapper">
+            {#if displayProfileB}
+              <PlayerCard
+                name={displayProfileB.name ?? 'Player B'}
+                avatar={displayProfileB.avatar ?? null}
+                country={displayProfileB.country ?? null}
+                rank={displayProfileB.rank ?? null}
+                showRank={typeof displayProfileB.rank === 'number'}
+                width="100%"
+                avatarSize={56}
+                techPp={displayProfileB.techPp}
+                accPp={displayProfileB.accPp}
+                passPp={displayProfileB.passPp}
+                playerId={displayProfileB.id ?? null}
+                gradientId="compare-player-b"
+              />
+            {:else if loadingPreviewB}
+              <div class="loading-profile">Loading player...</div>
+            {:else if hasCompared}
+              <div class="empty-profile">Player B profile not found</div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+
+  <div class="button-row">
+    <button class="btn-neon" type="submit" disabled={loading}>
+      {#if loading}
+        Loading...
+      {:else}
+        Compare
+      {/if}
+    </button>
+    <slot name="extra-buttons" />
+  </div>
+</form>
+
+<style>
+  .form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  @media (max-width: 768px) {
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .player-column {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .input-tile {
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    border-radius: 0.75rem;
+    padding: 1.25rem;
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(8, 12, 24, 0.85));
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: border-color 0.2s ease;
+  }
+
+  .input-tile:hover {
+    border-color: rgba(148, 163, 184, 0.3);
+  }
+
+  .button-row {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .neon-input {
+    border: 1px solid rgba(34, 211, 238, 0.3);
+    background: linear-gradient(180deg, rgba(15,23,42,0.9), rgba(11,15,23,0.95));
+    color: rgba(148, 163, 184, 1);
+    transition: all 0.2s ease;
+    box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
+  }
+  .neon-input:hover {
+    border-color: rgba(34, 211, 238, 0.5);
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 16px rgba(34, 211, 238, 0.25);
+  }
+  .neon-input:focus {
+    outline: none;
+    border-color: rgba(34, 211, 238, 0.7);
+    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35), 0 0 0 2px rgba(34, 211, 238, 0.1);
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .player-card-wrapper {
+    margin-top: 1rem;
+  }
+
+  .empty-profile {
+    padding: 2rem;
+    text-align: center;
+    color: rgba(148, 163, 184, 0.7);
+    font-size: 0.9rem;
+  }
+
+  .loading-profile {
+    padding: 2rem;
+    text-align: center;
+    color: rgba(148, 163, 184, 0.7);
+    font-size: 0.9rem;
+  }
+</style>
+

src/lib/components/PlayerSummaryHeader.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  export let name: string = 'Unknown';
+  export let country: string | null = null;
+  export let avatar: string | null = null;
+  export let rank: number | null = null;
+  export let showRank: boolean = true;
+  export let width: string = '12em';
+  export let avatarSize: number = 48;
+  export let triangleCorners:
+    | {
+        tech: { x: number; y: number };
+        acc: { x: number; y: number };
+        pass: { x: number; y: number };
+      }
+    | null = null;
+  export let normalized:
+    | {
+        tech: number;
+        acc: number;
+        pass: number;
+      }
+    | null = null;
+  export let gradientId: string = 'summary-triangle';
+
+  const hasTriangle = triangleCorners && normalized;
+
+  const gradientTechId = `${gradientId}-tech`;
+  const gradientAccId = `${gradientId}-acc`;
+  const gradientPassId = `${gradientId}-pass`;
+</script>
+
+<div class="summary-header" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
+  <img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
+  <div class="summary-body">
+    <div class="summary-name">{name}</div>
+    <div class="summary-meta">
+      {#if country}
+        <span>{country}</span>
+      {/if}
+      {#if showRank && typeof rank === 'number'}
+        <span>Rank: {rank}</span>
+      {/if}
+    </div>
+  </div>
+  {#if hasTriangle}
+    <div class="summary-triangle">
+      <svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
+        <g transform="matrix(1 0 0 -1 0 86.6)">
+          <defs>
+            <linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
+              <stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
+              <stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
+            </linearGradient>
+            <linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
+              <stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
+              <stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
+            </linearGradient>
+            <linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
+              <stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
+              <stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
+            </linearGradient>
+          </defs>
+          <g stroke="#fff" stroke-width="0.5">
+            <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
+            <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
+            <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
+          </g>
+          <g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
+            <path d="M 50,0 L 0,86.6 100,86.6 Z" />
+          </g>
+        </g>
+      </svg>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .summary-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: var(--header-width, 50%);
+    max-width: var(--header-width, 50%);
+    min-width: 200px;
+  }
+
+  img {
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid rgba(34, 211, 238, 0.35);
+    box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
+  }
+
+  img.placeholder {
+    opacity: 0.3;
+    border-style: dashed;
+  }
+
+  .summary-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .summary-name {
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.95);
+    line-height: 1.1;
+  }
+
+  .summary-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: rgba(148, 163, 184, 0.75);
+  }
+
+  .summary-triangle {
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .summary-triangle svg {
+    width: 100%;
+    height: 100%;
+    filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.25));
+  }
+</style>
+

src/lib/components/SongCard.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  export let hash: string;
+  export let coverURL: string | undefined = undefined;
+  export let songName: string | undefined = undefined;
+  export let mapper: string | undefined = undefined;
+  export let stars: number | undefined = undefined;
+  export let timeset: number | undefined = undefined;
+</script>
+
+<div class="aspect-square bg-black/30">
+  {#if coverURL}
+    <img
+      src={coverURL}
+      alt={songName ?? hash}
+      loading="lazy"
+      class="h-full w-full object-cover"
+    />
+  {:else}
+    <div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
+  {/if}
+</div>
+<div class="p-3">
+  <div class="font-semibold truncate" title={songName ?? hash}>
+    {songName ?? hash}
+  </div>
+  {#if mapper}
+    <div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
+      <span>
+        {mapper}
+        {#if stars !== undefined}
+          <span class="ml-3" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
+        {/if}
+      </span>
+      {#if timeset !== undefined}
+        <span class="text-[11px] ml-2">{new Date(timeset * 1000).toLocaleDateString()}</span>
+      {/if}
+    </div>
+  {/if}
+  <slot name="difficulty" />
+  <slot name="content" />
+  <slot name="actions" />
+</div>
+

src/lib/server/beatleaderAuth.ts

@@ -2,6 +2,7 @@ import type { Cookies } from '@sveltejs/kit';
 import { dev } from '$app/environment';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
+import { env } from '$env/dynamic/private';
 
 const TOKEN_URL = 'https://api.beatleader.com/oauth2/token';
 
@@ -206,10 +207,21 @@ export async function getValidAccessToken(cookies: Cookies): Promise<string | nu
   return null;
 }
 
-export function buildAuthorizeUrl(origin: string, scopes: string[]): URL {
+function getClientCredentials(): { client_id: string; client_secret: string } {
+  const envClientId = env.BL_CLIENT_ID;
+  const envClientSecret = env.BL_CLIENT_SECRET;
+  if (envClientId && envClientSecret) {
+    return { client_id: envClientId, client_secret: envClientSecret };
+  }
   const creds = readJsonPersistent<{ client_id?: string; client_secret?: string }>(CREDS_FILE);
-  const clientId = creds?.client_id;
+  if (creds?.client_id && creds?.client_secret) {
-  if (!clientId) throw new Error('BeatLeader OAuth is not configured. Visit /tools/beatleader-oauth to set it up.');
+    return { client_id: creds.client_id, client_secret: creds.client_secret };
+  }
+  throw new Error('BeatLeader OAuth is not configured. Set BL_CLIENT_ID and BL_CLIENT_SECRET.');
+}
+
+export function buildAuthorizeUrl(origin: string, scopes: string[]): URL {
+  const { client_id: clientId } = getClientCredentials();
   const redirectUri = `${origin}/auth/beatleader/callback`;
   const url = new URL('https://api.beatleader.com/oauth2/authorize');
   url.searchParams.set('client_id', clientId);
@@ -222,10 +234,7 @@ export function buildAuthorizeUrl(origin: string, scopes: string[]): URL {
 }
 
 export async function exchangeCodeForTokens(origin: string, code: string): Promise<{ access_token: string; refresh_token?: string; expires_in?: number } | null> {
-  const creds = readJsonPersistent<{ client_id?: string; client_secret?: string }>(CREDS_FILE);
+  const { client_id: clientId, client_secret: clientSecret } = getClientCredentials();
-  const clientId = creds?.client_id;
-  const clientSecret = creds?.client_secret;
-  if (!clientId || !clientSecret) return null;
   const redirectUri = `${origin}/auth/beatleader/callback`;
 
   const res = await fetch(TOKEN_URL, {
@@ -287,7 +296,12 @@ export function storeOAuthCredentials(input: { client_id: string; client_secret:
 }
 
 export function readOAuthCredentials(): { client_id: string; client_secret: string; scopes?: string[]; redirect_urls?: string[] } | null {
-  return readJsonPersistent(CREDS_FILE);
+  try {
+    const { client_id: clientId, client_secret: clientSecret } = getClientCredentials();
+    return { client_id: clientId, client_secret: clientSecret };
+  } catch {
+    return null;
+  }
 }
 
 

src/lib/server/sessionStore.ts

@@ -0,0 +1,130 @@
+import type { Cookies } from '@sveltejs/kit';
+import { dev } from '$app/environment';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+const SESSION_COOKIE = 'plebsaber_session';
+const DATA_DIR = '.data';
+const SESSION_FILE = 'plebsaber_sessions.json';
+
+export type StoredSession = {
+  sessionId: string;
+  beatleaderId: string;
+  name: string | null;
+  avatar: string | null;
+  createdAt: number;
+  lastSeenAt: number;
+};
+
+function ensureDataDir(): void {
+  if (!fs.existsSync(DATA_DIR)) {
+    fs.mkdirSync(DATA_DIR, { recursive: true });
+  }
+}
+
+function sessionFilePath(): string {
+  return path.join(process.cwd(), DATA_DIR, SESSION_FILE);
+}
+
+function readSessions(): Record<string, StoredSession> {
+  try {
+    const file = sessionFilePath();
+    if (!fs.existsSync(file)) return {};
+    const raw = fs.readFileSync(file, 'utf-8');
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === 'object') {
+      return parsed as Record<string, StoredSession>;
+    }
+  } catch (err) {
+    console.error('Failed to read session store', err);
+  }
+  return {};
+}
+
+function writeSessions(sessions: Record<string, StoredSession>): void {
+  try {
+    ensureDataDir();
+    fs.writeFileSync(sessionFilePath(), JSON.stringify(sessions, null, 2), 'utf-8');
+  } catch (err) {
+    console.error('Failed to persist session store', err);
+  }
+}
+
+export function getAllSessions(): StoredSession[] {
+  const sessions = readSessions();
+  return Object.values(sessions);
+}
+
+function baseCookieOptions() {
+  return {
+    path: '/',
+    httpOnly: true as const,
+    sameSite: 'lax' as const,
+    secure: !dev
+  };
+}
+
+export function upsertSession(
+  cookies: Cookies,
+  input: { beatleaderId: string; name: string | null; avatar: string | null }
+): StoredSession {
+  const sessions = readSessions();
+  const existingSessionId = cookies.get(SESSION_COOKIE);
+  const now = Date.now();
+
+  if (existingSessionId && sessions[existingSessionId]?.beatleaderId === input.beatleaderId) {
+    const current = sessions[existingSessionId];
+    const updated: StoredSession = {
+      ...current,
+      name: input.name,
+      avatar: input.avatar,
+      lastSeenAt: now
+    };
+    sessions[existingSessionId] = updated;
+    writeSessions(sessions);
+    cookies.set(SESSION_COOKIE, existingSessionId, { ...baseCookieOptions(), maxAge: 10 * 365 * 24 * 3600 });
+    return updated;
+  }
+
+  const sessionId = crypto.randomUUID();
+  const session: StoredSession = {
+    sessionId,
+    beatleaderId: input.beatleaderId,
+    name: input.name,
+    avatar: input.avatar,
+    createdAt: now,
+    lastSeenAt: now
+  };
+
+  sessions[sessionId] = session;
+  writeSessions(sessions);
+
+  cookies.set(SESSION_COOKIE, sessionId, { ...baseCookieOptions(), maxAge: 10 * 365 * 24 * 3600 });
+  return session;
+}
+
+export function getSession(cookies: Cookies): StoredSession | null {
+  const sessionId = cookies.get(SESSION_COOKIE);
+  if (!sessionId) return null;
+  const sessions = readSessions();
+  const session = sessions[sessionId];
+  if (!session) return null;
+
+  session.lastSeenAt = Date.now();
+  sessions[sessionId] = session;
+  writeSessions(sessions);
+  return session;
+}
+
+export function clearSession(cookies: Cookies): void {
+  const sessionId = cookies.get(SESSION_COOKIE);
+  if (!sessionId) return;
+
+  const sessions = readSessions();
+  if (sessions[sessionId]) {
+    delete sessions[sessionId];
+    writeSessions(sessions);
+  }
+
+  cookies.delete(SESSION_COOKIE, baseCookieOptions());
+}

src/lib/utils/plebsaber-utils.ts

@@ -0,0 +1,689 @@
+/**
+ * Shared utilities for PlebSaber tools
+ */
+
+// ============================================================================
+// 1. Type Definitions
+// ============================================================================
+
+export type MapMeta = {
+  songName?: string;
+  key?: string;
+  coverURL?: string;
+  mapper?: string;
+};
+
+export type StarInfo = {
+  stars?: number;
+  accRating?: number;
+  passRating?: number;
+  techRating?: number;
+  status?: number;
+};
+
+export type BeatLeaderScore = {
+  timeset?: string | number;
+  accuracy?: number;
+  acc?: number;
+  rank?: number;
+  leaderboard?: {
+    id?: string | number | null;
+    leaderboardId?: string | number | null;
+    song?: { hash?: string | null };
+    difficulty?: { value?: number | string | null; modeName?: string | null };
+  };
+};
+
+export type BeatLeaderScoresResponse = {
+  data?: BeatLeaderScore[];
+  metadata?: { page?: number; itemsPerPage?: number; total?: number };
+};
+
+export type BeatLeaderPlayerProfile = {
+  id?: string;
+  name?: string;
+  avatar?: string | null;
+  country?: string | null;
+  rank?: number | null;
+  countryRank?: number | null;
+  techPp?: number | null;
+  accPp?: number | null;
+  passPp?: number | null;
+};
+
+export type RequirementContext = {
+  adminRank?: number | null;
+};
+
+export type ToolRequirement = {
+  minGlobalRank?: number;
+  requiresBetterRankThanAdmin?: boolean;
+  summary: string;
+  lockedMessage?: string;
+};
+
+export type Difficulty = {
+  name: string;
+  characteristic: string;
+};
+
+export type TriangleCorners = {
+  tech: { x: number; y: number };
+  acc: { x: number; y: number };
+  pass: { x: number; y: number };
+};
+
+export type TriangleNormalized = {
+  tech: number;
+  acc: number;
+  pass: number;
+};
+
+export type TriangleData = {
+  corners: TriangleCorners;
+  normalized: TriangleNormalized;
+} | null;
+
+// ============================================================================
+// 2. Constants
+// ============================================================================
+
+export const ONE_YEAR_SECONDS = 365 * 24 * 60 * 60;
+export const PLEB_BEATLEADER_ID = '76561199407393962';
+export const DEFAULT_ADMIN_RANK_FALLBACK = 3000;
+
+export const DIFFICULTIES = ['Easy', 'Normal', 'Hard', 'Expert', 'ExpertPlus'] as const;
+
+export const MODES = ['Standard', 'Lawless', 'OneSaber', 'NoArrows', 'Lightshow'] as const;
+
+const DEFAULT_PRIVATE_TOOL_REQUIREMENT: ToolRequirement = {
+  requiresBetterRankThanAdmin: true,
+  summary: 'Ranked higher than pleb on BeatLeader',
+  lockedMessage: 'You must either contribute to BL Patreon (or be ranked higher than pleb) to use this tool'
+};
+
+export const TOOL_REQUIREMENTS = {
+  'compare-histories': DEFAULT_PRIVATE_TOOL_REQUIREMENT,
+  'player-headtohead': DEFAULT_PRIVATE_TOOL_REQUIREMENT,
+  'player-playlist-gaps': DEFAULT_PRIVATE_TOOL_REQUIREMENT
+} as const satisfies Record<string, ToolRequirement>;
+
+export type ToolKey = keyof typeof TOOL_REQUIREMENTS;
+
+export function getToolRequirement(key: string): ToolRequirement | null {
+  return TOOL_REQUIREMENTS[key as ToolKey] ?? null;
+}
+
+export function meetsToolRequirement(
+  profile: BeatLeaderPlayerProfile | null | undefined,
+  requirement: ToolRequirement | null | undefined,
+  context?: RequirementContext
+): boolean {
+  if (!requirement) return true;
+  const rank = profile?.rank ?? null;
+
+  if (requirement.requiresBetterRankThanAdmin) {
+    const baseline = resolveAdminBaseline(context);
+    if (typeof rank !== 'number' || !Number.isFinite(rank) || rank <= 0) return false;
+    return rank <= (baseline ?? DEFAULT_ADMIN_RANK_FALLBACK);
+  }
+
+  if (requirement.minGlobalRank !== undefined) {
+    if (typeof rank !== 'number' || !Number.isFinite(rank) || rank <= 0) return false;
+    return rank <= requirement.minGlobalRank;
+  }
+  return true;
+}
+
+function resolveAdminBaseline(context?: RequirementContext): number | null {
+  const val = context?.adminRank;
+  if (typeof val === 'number' && Number.isFinite(val) && val > 0) {
+    return val;
+  }
+  return null;
+}
+
+export function formatToolRequirementSummary(
+  requirement: ToolRequirement | null | undefined,
+  context?: RequirementContext
+): string {
+  if (!requirement) return '';
+  if (requirement.requiresBetterRankThanAdmin) {
+    const baseline = resolveAdminBaseline(context);
+    if (baseline) {
+      return `BeatLeader global rank ≤ ${baseline.toLocaleString()} (pleb's current rank)`;
+    }
+    return requirement.summary || `BeatLeader global rank ≤ ${DEFAULT_ADMIN_RANK_FALLBACK.toLocaleString()}`;
+  }
+  if (requirement.summary) return requirement.summary;
+  if (requirement.minGlobalRank !== undefined) {
+    return `BeatLeader global rank ≤ ${requirement.minGlobalRank}`;
+  }
+  return '';
+}
+
+// ============================================================================
+// 3. BeatSaver & BeatLeader API Functions
+// ============================================================================
+
+/**
+ * Fetch BeatSaver metadata for a given song hash
+ */
+export async function fetchBeatSaverMeta(hash: string): Promise<MapMeta | null> {
+  try {
+    const res = await fetch(`https://api.beatsaver.com/maps/hash/${encodeURIComponent(hash)}`);
+    if (!res.ok) throw new Error(String(res.status));
+    const data: any = await res.json();
+    const cover = data?.versions?.[0]?.coverURL ?? `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg`;
+    return {
+      songName: data?.metadata?.songName ?? data?.name ?? undefined,
+      key: data?.id ?? undefined,
+      coverURL: cover,
+      mapper: data?.uploader?.name ?? undefined
+    };
+  } catch {
+    // Fallback to CDN cover only
+    return { coverURL: `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg` };
+  }
+}
+
+/**
+ * Fetch BeatLeader star ratings for a given song hash
+ * Returns a map keyed by `${hash}|${difficultyName}|${modeName}`
+ */
+export async function fetchBeatLeaderStarsByHash(
+  hash: string,
+  normalizeDifficultyName: (value: number | string | null | undefined) => string
+): Promise<Record<string, StarInfo>> {
+  try {
+    const res = await fetch(`/api/beatleader?path=/leaderboards/hash/${encodeURIComponent(hash)}`);
+    if (!res.ok) return {};
+    const data: any = await res.json();
+    const leaderboards: any[] = Array.isArray(data?.leaderboards) ? data.leaderboards : Array.isArray(data) ? data : [];
+    const result: Record<string, StarInfo> = {};
+    for (const lb of leaderboards) {
+      const diffName: string | undefined = lb?.difficulty?.difficultyName ?? lb?.difficulty?.name ?? undefined;
+      const modeName: string | undefined = lb?.difficulty?.modeName ?? lb?.modeName ?? 'Standard';
+      if (!diffName || !modeName) continue;
+      const normalized = normalizeDifficultyName(diffName);
+      const key = `${hash}|${normalized}|${modeName}`;
+      const info: StarInfo = {
+        stars: lb?.difficulty?.stars ?? lb?.stars,
+        accRating: lb?.difficulty?.accRating,
+        passRating: lb?.difficulty?.passRating,
+        techRating: lb?.difficulty?.techRating,
+        status: lb?.difficulty?.status
+      };
+      result[key] = info;
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Load metadata for a list of items with unique hashes
+ * Only loads metadata that isn't already in the cache
+ */
+export async function loadMetaForHashes(
+  hashes: string[],
+  existingCache: Record<string, MapMeta>,
+  onProgress?: (loaded: number, total: number) => void
+): Promise<Record<string, MapMeta>> {
+  const uniqueHashes = Array.from(new Set(hashes));
+  const needed = uniqueHashes.filter((h) => !existingCache[h]);
+  if (needed.length === 0) return existingCache;
+  
+  const newCache = { ...existingCache };
+  for (let i = 0; i < needed.length; i++) {
+    const h = needed[i];
+    const meta = await fetchBeatSaverMeta(h);
+    if (meta) newCache[h] = meta;
+    if (onProgress) onProgress(i + 1, needed.length);
+  }
+  return newCache;
+}
+
+/**
+ * Load star ratings for a list of hashes
+ * Only loads ratings that aren't already in the cache
+ */
+export async function loadStarsForHashes(
+  hashes: string[],
+  existingCache: Record<string, StarInfo>,
+  normalizeFn: (value: number | string | null | undefined) => string,
+  onProgress?: (loaded: number, total: number) => void
+): Promise<Record<string, StarInfo>> {
+  const uniqueHashes = Array.from(new Set(hashes));
+  // Check if we need to load stars for these hashes
+  const needed = uniqueHashes.filter((h) => {
+    // Check if we have any star data for this hash
+    return !Object.keys(existingCache).some(key => key.startsWith(`${h}|`));
+  });
+  
+  if (needed.length === 0) return existingCache;
+  
+  const newCache = { ...existingCache };
+  for (let i = 0; i < needed.length; i++) {
+    const h = needed[i];
+    const stars = await fetchBeatLeaderStarsByHash(h, normalizeFn);
+    Object.assign(newCache, stars);
+    if (onProgress) onProgress(i + 1, needed.length);
+  }
+  return newCache;
+}
+
+/**
+ * Fetch recent scores for a player filtered by difficulty
+ */
+export async function fetchAllRecentScoresForDiff(
+  playerId: string,
+  cutoffEpoch: number,
+  reqDiff: string,
+  maxPages = 100
+): Promise<BeatLeaderScore[]> {
+  const qs = new URLSearchParams({ diff: reqDiff, cutoffEpoch: String(cutoffEpoch), maxPages: String(maxPages) });
+  const url = `/api/beatleader-cache/player/${encodeURIComponent(playerId)}?${qs.toString()}`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch scores for ${playerId}: ${res.status}`);
+  const data = (await res.json()) as BeatLeaderScoresResponse;
+  return data.data ?? [];
+}
+
+/**
+ * Fetch recent scores for a player across all difficulties
+ */
+export async function fetchAllRecentScoresAllDiffs(
+  playerId: string,
+  cutoffEpoch: number,
+  normalizeFn: (value: number | string | null | undefined) => string,
+  parseFn: (ts: string | number | undefined) => number
+): Promise<BeatLeaderScore[]> {
+  const arrays = await Promise.all(
+    DIFFICULTIES.map((d) => fetchAllRecentScoresForDiff(playerId, cutoffEpoch, d))
+  );
+  // Merge and dedupe by leaderboard key (hash|diff|mode) and timeset
+  const merged = new Map<string, BeatLeaderScore>();
+  for (const arr of arrays) {
+    for (const s of arr) {
+      const rawHash = s.leaderboard?.song?.hash ?? undefined;
+      const modeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
+      if (!rawHash) continue;
+      const hashLower = String(rawHash).toLowerCase();
+      const diffName = normalizeFn(s.leaderboard?.difficulty?.value ?? undefined);
+      const key = `${hashLower}|${diffName}|${modeName}`;
+      const prev = merged.get(key);
+      if (!prev || parseFn(prev.timeset) < parseFn(s.timeset)) merged.set(key, s);
+    }
+  }
+  return Array.from(merged.values());
+}
+
+/**
+ * Fetch all scores for a player (no time limit) by paginating through the BeatLeader API
+ * Useful for playlist gap analysis where we need to check all historical plays
+ */
+export async function fetchAllPlayerScores(playerId: string, maxPages = 200): Promise<BeatLeaderScore[]> {
+  const pageSize = 100;
+  let page = 1;
+  const all: BeatLeaderScore[] = [];
+  while (page <= maxPages) {
+    const url = `/api/beatleader/player/${encodeURIComponent(playerId)}?scores=1&count=${pageSize}&page=${page}&sortBy=date&order=desc`;
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`Failed to fetch scores for ${playerId}: ${res.status}`);
+    const data = (await res.json()) as BeatLeaderScoresResponse;
+    const batch = data.data ?? [];
+    if (batch.length === 0) break;
+    all.push(...batch);
+    page += 1;
+  }
+  return all;
+}
+
+// ============================================================================
+// 4. Data Processing Helpers
+// ============================================================================
+
+/**
+ * Normalize difficulty names to standard format
+ */
+export function normalizeDifficultyName(value: number | string | null | undefined): string {
+  if (value === null || value === undefined) return 'ExpertPlus';
+  if (typeof value === 'string') {
+    const v = value.toLowerCase();
+    if (v.includes('expertplus') || v === 'expertplus' || v === 'ex+' || v.includes('ex+')) return 'ExpertPlus';
+    if (v.includes('expert')) return 'Expert';
+    if (v.includes('hard')) return 'Hard';
+    if (v.includes('normal')) return 'Normal';
+    if (v.includes('easy')) return 'Easy';
+    return value;
+  }
+  switch (value) {
+    case 1: return 'Easy';
+    case 3: return 'Normal';
+    case 5: return 'Hard';
+    case 7: return 'Expert';
+    case 9: return 'ExpertPlus';
+    default: return 'ExpertPlus';
+  }
+}
+
+/**
+ * Parse a timeset value to a number
+ */
+export function parseTimeset(ts: string | number | undefined): number {
+  if (ts === undefined) return 0;
+  if (typeof ts === 'number') return ts;
+  const n = Number(ts);
+  return Number.isFinite(n) ? n : 0;
+}
+
+/**
+ * Get cutoff epoch timestamp from months ago
+ */
+export function getCutoffEpochFromMonths(months: number | string): number {
+  const m = Number(months) || 0;
+  const seconds = Math.max(0, m) * 30 * 24 * 60 * 60; // approx 30 days per month
+  return Math.floor(Date.now() / 1000) - seconds;
+}
+
+/**
+ * Normalize accuracy value to percentage (0-100)
+ */
+export function normalizeAccuracy(value: number | undefined): number | null {
+  if (value === undefined || value === null) return null;
+  return value <= 1 ? value * 100 : value;
+}
+
+/**
+ * Build a map of latest scores by key (hash|diff|mode)
+ */
+export function buildLatestByKey(
+  scores: BeatLeaderScore[],
+  cutoffEpoch: number,
+  normalizeFn: (value: number | string | null | undefined) => string,
+  parseFn: (ts: string | number | undefined) => number
+): Map<string, BeatLeaderScore> {
+  const byKey = new Map<string, BeatLeaderScore>();
+  for (const s of scores) {
+    const t = parseFn(s.timeset);
+    if (!t || t < cutoffEpoch - ONE_YEAR_SECONDS) continue; // sanity guard
+    const rawHash = s.leaderboard?.song?.hash ?? undefined;
+    const modeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
+    if (!rawHash) continue;
+    const hashLower = String(rawHash).toLowerCase();
+    const diffName = normalizeFn(s.leaderboard?.difficulty?.value ?? undefined);
+    const key = `${hashLower}|${diffName}|${modeName}`;
+    const prev = byKey.get(key);
+    if (!prev || parseFn(prev.timeset) < t) byKey.set(key, s);
+  }
+  return byKey;
+}
+
+// ============================================================================
+// 5. Statistical Functions
+// ============================================================================
+
+/**
+ * Calculate the mean (average) of an array of numbers
+ */
+export function mean(values: number[]): number {
+  if (!values.length) return 0;
+  return values.reduce((a, b) => a + b, 0) / values.length;
+}
+
+/**
+ * Calculate the median of an array of numbers
+ */
+export function median(values: number[]): number {
+  if (!values.length) return 0;
+  const v = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(v.length / 2);
+  return v.length % 2 ? v[mid] : (v[mid - 1] + v[mid]) / 2;
+}
+
+/**
+ * Calculate a percentile of an array of numbers
+ */
+export function percentile(values: number[], p: number): number {
+  if (!values.length) return 0;
+  const v = [...values].sort((a, b) => a - b);
+  const idx = Math.min(v.length - 1, Math.max(0, Math.floor((p / 100) * (v.length - 1))));
+  return v[idx];
+}
+
+// ============================================================================
+// 6. Skill Triangle Calculations
+// ============================================================================
+
+const DEFAULT_MAX_TECH_PP = 1300;
+const DEFAULT_MAX_ACC_PP = 15000;
+const DEFAULT_MAX_PASS_PP = 6000;
+const GYRON_LENGTH = 57.74;
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+/**
+ * Calculate skill triangle data from player's PP values
+ * Returns corner coordinates and normalized values for rendering the skill triangle
+ */
+export function calculateSkillTriangle(
+  techPp: number | null | undefined,
+  accPp: number | null | undefined,
+  passPp: number | null | undefined
+): TriangleData {
+  const tech = typeof techPp === 'number' ? techPp : 0;
+  const acc = typeof accPp === 'number' ? accPp : 0;
+  const pass = typeof passPp === 'number' ? passPp : 0;
+
+  // If all values are zero, return null
+  if (tech === 0 && acc === 0 && pass === 0) {
+    return null;
+  }
+
+  // Calculate triangle scale
+  const triangleScale = Math.max(
+    1,
+    tech > 0 ? tech / DEFAULT_MAX_TECH_PP : 0,
+    acc > 0 ? acc / DEFAULT_MAX_ACC_PP : 0,
+    pass > 0 ? pass / DEFAULT_MAX_PASS_PP : 0
+  );
+
+  const maxTechPp = DEFAULT_MAX_TECH_PP * triangleScale;
+  const maxAccPp = DEFAULT_MAX_ACC_PP * triangleScale;
+  const maxPassPp = DEFAULT_MAX_PASS_PP * triangleScale;
+
+  // Normalize PP values
+  const normalizedTechPp = maxTechPp ? clamp(tech / maxTechPp, 0, 1) : 0;
+  const normalizedAccPp = maxAccPp ? clamp(acc / maxAccPp, 0, 1) : 0;
+  const normalizedPassPp = maxPassPp ? clamp(pass / maxPassPp, 0, 1) : 0;
+
+  // Calculate corner positions
+  const cornerTech = {
+    x: (GYRON_LENGTH - normalizedTechPp * GYRON_LENGTH) * 0.866,
+    y: 86.6 - (GYRON_LENGTH - normalizedTechPp * GYRON_LENGTH) / 2
+  };
+  const cornerAcc = {
+    x: 100 - (GYRON_LENGTH - normalizedAccPp * GYRON_LENGTH) * 0.866,
+    y: 86.6 - (GYRON_LENGTH - normalizedAccPp * GYRON_LENGTH) / 2
+  };
+  const cornerPass = {
+    x: 50,
+    y: (86.6 - GYRON_LENGTH / 2) * (1 - normalizedPassPp)
+  };
+
+  return {
+    corners: {
+      tech: cornerTech,
+      acc: cornerAcc,
+      pass: cornerPass
+    },
+    normalized: {
+      tech: normalizedTechPp,
+      acc: normalizedAccPp,
+      pass: normalizedPassPp
+    }
+  };
+}
+
+// ============================================================================
+// 7. Playlist Generation
+// ============================================================================
+
+/**
+ * Increment and return the playlist count for a given key
+ */
+export function incrementPlaylistCount(key: string): number {
+  try {
+    const raw = localStorage.getItem('playlist_counts');
+    const obj = raw ? (JSON.parse(raw) as Record<string, number>) : {};
+    const next = (obj[key] ?? 0) + 1;
+    obj[key] = next;
+    localStorage.setItem('playlist_counts', JSON.stringify(obj));
+    return next;
+  } catch {
+    return 1;
+  }
+}
+
+/**
+ * Convert a list of songs to Beat Saber playlist JSON format
+ */
+export function toPlaylistJson(
+  songs: Array<{ hash: string; difficulties: Difficulty[] }>,
+  playlistKey: string,
+  description: string
+): unknown {
+  const count = incrementPlaylistCount(playlistKey);
+  const playlistTitle = `${playlistKey}-${String(count).padStart(2, '0')}`;
+  return {
+    playlistTitle,
+    playlistAuthor: 'SaberList Tool',
+    songs: songs.map((s) => ({
+      hash: s.hash,
+      difficulties: s.difficulties,
+    })),
+    description,
+    allowDuplicates: false,
+    customData: {}
+  };
+}
+
+/**
+ * Download a playlist as a .bplist file
+ */
+export function downloadPlaylist(playlistData: unknown): void {
+  const title = (playlistData as any).playlistTitle ?? 'playlist';
+  const blob = new Blob([JSON.stringify(playlistData, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${title}.bplist`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+// ============================================================================
+// 8. Pagination Utilities
+// ============================================================================
+
+export type PaginationResult<T> = {
+  pageItems: T[];
+  totalPages: number;
+  validPage: number;
+};
+
+/**
+ * Calculate pagination for a list of items
+ */
+export function calculatePagination<T>(
+  items: T[],
+  page: number,
+  pageSize: number
+): PaginationResult<T> {
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  const validPage = Math.min(Math.max(1, page), totalPages);
+  const startIdx = (validPage - 1) * pageSize;
+  const endIdx = startIdx + pageSize;
+  const pageItems = items.slice(startIdx, endIdx);
+  
+  return {
+    pageItems,
+    totalPages,
+    validPage
+  };
+}
+
+// ============================================================================
+// 9. URL Parameter Utilities
+// ============================================================================
+
+/**
+ * Parse URL search parameters with type safety
+ */
+export function getUrlParam(
+  searchParams: URLSearchParams,
+  key: string,
+  defaultValue?: string
+): string | undefined {
+  return searchParams.get(key) ?? defaultValue;
+}
+
+/**
+ * Parse a URL parameter as a number
+ */
+export function getUrlParamAsNumber(
+  searchParams: URLSearchParams,
+  key: string,
+  defaultValue: number
+): number {
+  const value = searchParams.get(key);
+  if (!value) return defaultValue;
+  const num = Number(value);
+  return Number.isFinite(num) ? num : defaultValue;
+}
+
+/**
+ * Parse a URL parameter as one of a set of allowed values
+ */
+export function getUrlParamAsEnum<T extends string>(
+  searchParams: URLSearchParams,
+  key: string,
+  allowedValues: readonly T[],
+  defaultValue: T
+): T {
+  const value = searchParams.get(key);
+  if (!value) return defaultValue;
+  return (allowedValues as readonly string[]).includes(value) ? (value as T) : defaultValue;
+}
+
+/**
+ * Update URL without triggering navigation
+ */
+export function updateUrlParams(
+  params: Record<string, string | number | boolean | undefined | null>,
+  replace = true
+): void {
+  const sp = new URLSearchParams(window.location.search);
+  
+  for (const [key, value] of Object.entries(params)) {
+    if (value === undefined || value === null || value === '' || value === false) {
+      sp.delete(key);
+    } else {
+      sp.set(key, String(value));
+    }
+  }
+  
+  const qs = sp.toString();
+  const url = window.location.pathname + (qs ? `?${qs}` : '');
+  
+  if (replace) {
+    window.history.replaceState(null, '', url);
+  } else {
+    window.history.pushState(null, '', url);
+  }
+}
+

src/routes/api/beatleader/me/+server.ts

@@ -0,0 +1,116 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { getSession } from '../../../../lib/server/sessionStore';
+import { PLEB_BEATLEADER_ID, DEFAULT_ADMIN_RANK_FALLBACK } from '../../../../lib/utils/plebsaber-utils';
+
+const PLAYER_ENDPOINT = 'https://api.beatleader.com/player/';
+
+type BeatLeaderIdentity = { id: string; name: string | null };
+type BeatLeaderPlayer = {
+  id: string;
+  name: string | null;
+  avatar: string | null;
+  country: string | null;
+  role: string | null;
+  rank: number | null;
+  countryRank: number | null;
+  techPp: number | null;
+  accPp: number | null;
+  passPp: number | null;
+  pp: number | null;
+  mapperId: number | null;
+  level: number | null;
+  banned: boolean;
+  profileSettings: { showAllRatings: boolean } | null;
+};
+
+type ResponsePayload = {
+  identity: BeatLeaderIdentity;
+  player: BeatLeaderPlayer | null;
+  rawPlayer: Record<string, unknown> | null;
+  adminBaseline: {
+    rank: number | null;
+    fallback: number;
+  };
+};
+
+export const GET: RequestHandler = async ({ cookies, fetch }) => {
+  const session = getSession(cookies);
+  if (!session) {
+    return new Response(
+      JSON.stringify({ error: 'Unauthorized', login: '/auth/beatleader/login' }),
+      { status: 401, headers: { 'content-type': 'application/json' } }
+    );
+  }
+
+  const identity: BeatLeaderIdentity = {
+    id: session.beatleaderId,
+    name: session.name
+  };
+
+  let player: BeatLeaderPlayer | null = null;
+  let rawPlayer: Record<string, unknown> | null = null;
+
+  let adminRank: number | null = null;
+
+  try {
+    const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
+    if (res.ok) {
+      rawPlayer = (await res.json()) as Record<string, unknown>;
+      player = {
+        id: typeof rawPlayer.id === 'string' ? (rawPlayer.id as string) : session.beatleaderId,
+        name: typeof rawPlayer.name === 'string' ? (rawPlayer.name as string) : session.name,
+        avatar: typeof rawPlayer.avatar === 'string' ? (rawPlayer.avatar as string) : session.avatar,
+        country: typeof rawPlayer.country === 'string' ? (rawPlayer.country as string) : null,
+        role: typeof rawPlayer.role === 'string' ? (rawPlayer.role as string) : null,
+        rank: typeof rawPlayer.rank === 'number' ? (rawPlayer.rank as number) : null,
+        countryRank: typeof rawPlayer.countryRank === 'number' ? (rawPlayer.countryRank as number) : null,
+        techPp: typeof rawPlayer.techPp === 'number' ? (rawPlayer.techPp as number) : null,
+        accPp: typeof rawPlayer.accPp === 'number' ? (rawPlayer.accPp as number) : null,
+        passPp: typeof rawPlayer.passPp === 'number' ? (rawPlayer.passPp as number) : null,
+        pp: typeof rawPlayer.pp === 'number' ? (rawPlayer.pp as number) : null,
+        mapperId: typeof rawPlayer.mapperId === 'number' ? (rawPlayer.mapperId as number) : null,
+        level: typeof rawPlayer.level === 'number' ? (rawPlayer.level as number) : null,
+        banned: Boolean(rawPlayer.banned),
+        profileSettings: typeof rawPlayer.profileSettings === 'object' && rawPlayer.profileSettings !== null
+          ? {
+              showAllRatings: Boolean((rawPlayer.profileSettings as Record<string, unknown>).showAllRatings)
+            }
+          : null
+      };
+      if (session.beatleaderId === PLEB_BEATLEADER_ID) {
+        adminRank = typeof rawPlayer.rank === 'number' ? (rawPlayer.rank as number) : adminRank;
+      }
+    }
+  } catch (err) {
+    console.error('Failed to refresh BeatLeader public profile', err);
+  }
+
+  if (adminRank === null) {
+    try {
+      const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(PLEB_BEATLEADER_ID)}?stats=true`);
+      if (res.ok) {
+        const admin = (await res.json()) as Record<string, unknown>;
+        const rankValue = admin?.rank;
+        if (typeof rankValue === 'number') {
+          adminRank = rankValue;
+        }
+      }
+    } catch (err) {
+      console.error('Failed to refresh BeatLeader admin profile', err);
+    }
+  }
+
+  const payload: ResponsePayload = {
+    identity,
+    player,
+    rawPlayer,
+    adminBaseline: {
+      rank: adminRank,
+      fallback: DEFAULT_ADMIN_RANK_FALLBACK
+    }
+  };
+  return new Response(JSON.stringify(payload), {
+    headers: { 'content-type': 'application/json' }
+  });
+};
+

src/routes/auth/beatleader/callback/+server.ts

@@ -1,7 +1,8 @@
 import type { RequestHandler } from '@sveltejs/kit';
-import { consumeAndValidateState, exchangeCodeForTokens, setTokens, clearTokens, consumeRedirectCookie, getValidAccessToken } from '$lib/server/beatleaderAuth';
+import { consumeAndValidateState, exchangeCodeForTokens, clearTokens, consumeRedirectCookie } from '$lib/server/beatleaderAuth';
+import { upsertSession } from '../../../../lib/server/sessionStore';
 
-export const GET: RequestHandler = async ({ url, cookies }) => {
+export const GET: RequestHandler = async ({ url, cookies, fetch }) => {
   const code = url.searchParams.get('code');
   const state = url.searchParams.get('state');
 
@@ -19,19 +20,47 @@ export const GET: RequestHandler = async ({ url, cookies }) => {
     return new Response('Token exchange failed', { status: 400 });
   }
 
-  setTokens(cookies, tokenData);
-
-  // Best-effort: enable ShowAllRatings so unranked star ratings are visible for supporters
   try {
-    const tok = await getValidAccessToken(cookies);
+    const identityRes = await fetch('https://api.beatleader.com/oauth2/identity', {
-    if (tok) {
+      headers: { Authorization: `Bearer ${tokenData.access_token}` }
-      const enableUrl = new URL('https://api.beatleader.com/user/profile');
+    });
-      enableUrl.searchParams.set('showAllRatings', 'true');
+
-      await fetch(enableUrl.toString(), { method: 'PATCH', headers: { Authorization: `Bearer ${tok}` } });
+    if (!identityRes.ok) {
-    }
+      clearTokens(cookies);
-  } catch {}
+      return new Response('Failed to retrieve identity', { status: 502 });
+    }
+
+    const identity = (await identityRes.json()) as { id?: string; name?: string };
+    if (!identity?.id) {
+      clearTokens(cookies);
+      return new Response('BeatLeader identity missing id', { status: 502 });
+    }
+
+    let avatar: string | undefined;
+    try {
+      const profileRes = await fetch(`https://api.beatleader.com/player/${identity.id}`);
+      if (profileRes.ok) {
+        const profileJson = (await profileRes.json()) as { avatar?: string };
+        if (typeof profileJson.avatar === 'string') {
+          avatar = profileJson.avatar;
+        }
+      }
+    } catch (err) {
+      console.error('Failed to prefetch BeatLeader avatar', err);
+    }
+
+    upsertSession(cookies, {
+      beatleaderId: identity.id,
+      name: identity.name ?? null,
+      avatar: avatar ?? null
+    });
+    clearTokens(cookies);
+  } catch (err) {
+    console.error('BeatLeader OAuth callback failed', err);
+    clearTokens(cookies);
+    return new Response('Internal error establishing session', { status: 500 });
+  }
 
-  // Redirect back to original target stored before login
   const redirectTo = consumeRedirectCookie(cookies) ?? url.searchParams.get('redirect_uri') ?? '/';
   return new Response(null, { status: 302, headers: { Location: redirectTo } });
 };

src/routes/auth/beatleader/logout-all/+server.ts

@@ -1,9 +1,11 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { clearTokens, clearBeatLeaderSession } from '$lib/server/beatleaderAuth';
+import { clearSession } from '../../../../lib/server/sessionStore';
 
 export const POST: RequestHandler = async ({ url, cookies }) => {
   clearTokens(cookies);
   clearBeatLeaderSession(cookies);
+  clearSession(cookies);
   const redirectTo = url.searchParams.get('redirect_uri') ?? '/';
   return new Response(null, { status: 302, headers: { Location: redirectTo } });
 };

src/routes/auth/beatleader/logout/+server.ts

@@ -1,14 +1,15 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { clearTokens } from '$lib/server/beatleaderAuth';
+import { clearSession } from '../../../../lib/server/sessionStore';
 
 export const GET: RequestHandler = async ({ url }) => {
-  // For prerendering, redirect to home page
   const redirectTo = url.searchParams.get('redirect_uri') ?? '/';
   return new Response(null, { status: 302, headers: { Location: redirectTo } });
 };
 
 export const POST: RequestHandler = async ({ url, cookies }) => {
   clearTokens(cookies);
+  clearSession(cookies);
   const redirectTo = url.searchParams.get('redirect_uri') ?? '/';
   return new Response(null, { status: 302, headers: { Location: redirectTo } });
 };

src/routes/guides/+page.svelte

@@ -1,12 +1,18 @@
+<script lang="ts">
+  import { dev } from '$app/environment';
+</script>
+
 <section class="py-8 prose prose-invert max-w-none">
   <h1 class="font-display tracking-widest">Guides</h1>
   <p>Community-written tips and guides for improving your Beat Saber game. Contributions welcome.</p>
 
   <div class="not-prose grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-6">
-    <a href="/guides/beatleader-auth" class="card-surface p-5 block">
+    {#if dev}
-      <h3 class="font-semibold">BeatLeader Authentication</h3>
+      <a href="/guides/beatleader-auth" class="card-surface p-5 block">
-      <p class="mt-1 text-sm text-muted">Connect BeatLeader to enhance tools like Compare Players.</p>
+        <h3 class="font-semibold">BeatLeader Authentication</h3>
-    </a>
+        <p class="mt-1 text-sm text-muted">Connect BeatLeader to enhance tools like Compare Players.</p>
+      </a>
+    {/if}
     <a href="/guides/finding-new-songs" class="card-surface p-5 block">
       <h3 class="font-semibold">Finding New Songs (BeatLeader)</h3>
       <p class="mt-1 text-sm text-muted">Month-by-month search using unranked stars, tech rating, and friend filters.</p>

src/routes/guides/beatleader-auth/+page.server.ts

@@ -0,0 +1,12 @@
+import { dev } from '$app/environment';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+  if (!dev) {
+    throw error(404, 'Not found');
+  }
+
+  return {};
+};
+

src/routes/guides/beatleader-auth/+page.svelte

@@ -27,8 +27,12 @@
     Educational use only: The information and resources on this page are for learning purposes. Do not use them for real authentication or accessing accounts.
   </div>
   <p>
-    This app supports three ways to access your BeatLeader data: Steam, OAuth, and a website‑style session.
+    For this app, I explored three ways to access your BeatLeader data: Steam, OAuth, or a website‑style session.
   </p>
+  <p>
+    I wanted tools like <a href="/tools/beatleader-compare">Compare Players</a> to show unranked star ratings when your BeatLeader account is a supporter and <code>ShowAllRatings</code> is enabled. That turns out to not be possible without implementing Steam ticket handling using the Steamworks SDK. <strong>The rest of the notes here were written before I realized that.</strong>
+  </p>
+
 
   <!-- Top navigation -->
   <nav class="not-prose mt-4 flex flex-wrap gap-2">
@@ -82,11 +86,6 @@
     Default API auth is <strong>Steam</strong>. You can override per request using <code>?auth=steam|oauth|session|auto|none</code>.
   </p>
 
-  <p>
-    Tools like <a href="/tools/beatleader-compare">Compare Players</a>
-    can show unranked star ratings when your BeatLeader account is a supporter and <code>ShowAllRatings</code> is enabled.
-  </p>
-
   <h2 id="steam">Steam Login</h2>
   <p>
     Authenticate via Steam OpenID to link your Steam account. Then use the <a href="/tools/beatleader-auth">BeatLeader Auth Tool</a> with your Steam session ticket to capture a website session.

src/routes/player-info/+page.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import PlayerCard from '$lib/components/PlayerCard.svelte';
+
+  type Identity = {
+    id?: string;
+    name?: string;
+  };
+
+  type Player = {
+    id?: string;
+    name?: string;
+    avatar?: string | null;
+    country?: string | null;
+    role?: string | null;
+    rank?: number | null;
+    countryRank?: number | null;
+    techPp?: number | null;
+    accPp?: number | null;
+    passPp?: number | null;
+    pp?: number | null;
+    mapperId?: number | null;
+    level?: number | null;
+    banned?: boolean;
+    profileSettings?: { showAllRatings: boolean } | null;
+    patreon?: unknown;
+  };
+
+  let identity: Identity | null = null;
+  let player: Player | null = null;
+  let rawPlayer: unknown = null;
+  let error: string | null = null;
+  let loading = true;
+
+  onMount(async () => {
+    try {
+      const res = await fetch('/api/beatleader/me');
+      if (!res.ok) {
+        const body = await res.text();
+        throw new Error(body || `Request failed: ${res.status}`);
+      }
+      const data = (await res.json()) as { identity?: Identity; player?: Player | null; rawPlayer?: unknown };
+      identity = data.identity ?? null;
+      player = data.player ?? null;
+      rawPlayer = data.rawPlayer ?? null;
+      console.log('BeatLeader /me raw player:', rawPlayer ?? player ?? data);
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Unknown error';
+    } finally {
+      loading = false;
+    }
+  });
+</script>
+
+<section class="py-8">
+  <h1 class="font-display text-3xl sm:text-4xl">Player Info</h1>
+  <p class="mt-2 text-muted text-sm">Debug view for the current BeatLeader OAuth session.</p>
+
+  {#if loading}
+    <div class="mt-6 text-sm text-muted">Loading player info…</div>
+  {:else if error}
+    <div class="mt-6 rounded border border-rose-500/40 bg-rose-500/10 px-4 py-3 text-rose-200 text-sm">
+      {error}
+    </div>
+  {:else}
+    {#if player}
+      <div class="mt-6">
+        <div class="player-tile">
+          <PlayerCard
+            name={player.name ?? identity?.name ?? 'Unknown'}
+            country={player.country ?? null}
+            rank={player.rank ?? null}
+            showRank={typeof player.rank === 'number'}
+            avatar={player.avatar ?? null}
+            width="100%"
+            avatarSize={64}
+            techPp={player.techPp}
+            accPp={player.accPp}
+            passPp={player.passPp}
+            playerId={player.id ?? null}
+            gradientId="player-header"
+          />
+        </div>
+
+        <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <div class="stat-tile">
+            <dt>Country Rank</dt>
+            <dd>{typeof player.countryRank === 'number' ? `#${player.countryRank.toLocaleString()}` : '—'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Global Rank</dt>
+            <dd>{typeof player.rank === 'number' ? `#${player.rank.toLocaleString()}` : '—'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>PP (Global)</dt>
+            <dd>{typeof player.pp === 'number' ? player.pp.toFixed(2) : '—'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Tech PP</dt>
+            <dd>{typeof player.techPp === 'number' ? player.techPp.toFixed(2) : '—'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Acc PP</dt>
+            <dd>{typeof player.accPp === 'number' ? player.accPp.toFixed(2) : '—'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Pass PP</dt>
+            <dd>{typeof player.passPp === 'number' ? player.passPp.toFixed(2) : '—'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Level</dt>
+            <dd>{player.level ?? '—'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Role</dt>
+            <dd>{player.role ?? '—'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Mapper</dt>
+            <dd>
+              {#if player.mapperId}
+                <a class="link" href={`https://beatsaver.com/profile/${player.mapperId}`} target="_blank" rel="noreferrer">
+                  {player.mapperId}
+                </a>
+              {:else}
+                —
+              {/if}
+            </dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Banned</dt>
+            <dd>{player.banned ? 'Yes' : 'No'}</dd>
+          </div>
+          <div class="stat-tile">
+            <dt>Show All Ratings</dt>
+            <dd>{player.profileSettings?.showAllRatings ? 'Enabled' : 'Disabled'}</dd>
+          </div>
+        </div>
+      </div>
+    {:else}
+      <div class="mt-6 player-tile">
+        <p class="empty">No player profile found for this identity.</p>
+      </div>
+    {/if}
+  {/if}
+</section>
+
+<style>
+  .player-tile {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(5, 9, 20, 0.92));
+    box-shadow: 0 20px 40px rgba(8, 14, 35, 0.35);
+  }
+
+  .stat-tile {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.8), rgba(5, 9, 20, 0.85));
+    transition: border-color 0.2s ease;
+  }
+
+  .stat-tile:hover {
+    border-color: rgba(34, 211, 238, 0.25);
+  }
+
+  dt {
+    color: rgba(148, 163, 184, 0.75);
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 0.35rem;
+    font-weight: 600;
+  }
+
+  dd {
+    color: rgba(226, 232, 240, 0.95);
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 500;
+  }
+
+  .link {
+    color: rgba(34, 211, 238, 0.85);
+    text-decoration: underline;
+  }
+
+  .link:hover {
+    color: rgba(34, 211, 238, 1);
+  }
+
+  .empty {
+    font-size: 0.85rem;
+    color: rgba(148, 163, 184, 0.7);
+  }
+</style>
+
+

src/routes/tools/+layout.server.ts

@@ -0,0 +1,72 @@
+import { getSession } from '../../lib/server/sessionStore';
+import { PLEB_BEATLEADER_ID } from '../../lib/utils/plebsaber-utils';
+import type { BeatLeaderPlayerProfile } from '../../lib/utils/plebsaber-utils';
+import type { LayoutServerLoad } from './$types';
+
+const PLAYER_ENDPOINT = 'https://api.beatleader.com/player/';
+
+export const prerender = false;
+
+export const load: LayoutServerLoad = async ({ cookies, fetch }) => {
+  const session = getSession(cookies);
+
+  let player: BeatLeaderPlayerProfile | null = null;
+  let adminRank: number | null = null;
+  let adminPlayer: BeatLeaderPlayerProfile | null = null;
+
+  if (session) {
+    try {
+      const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
+      if (res.ok) {
+        const data = (await res.json()) as Record<string, unknown>;
+        const profile: BeatLeaderPlayerProfile = {
+          id: typeof data.id === 'string' ? (data.id as string) : session.beatleaderId,
+          name: typeof data.name === 'string' ? (data.name as string) : session.name ?? undefined,
+          avatar: typeof data.avatar === 'string' ? (data.avatar as string) : session.avatar ?? null,
+          country: typeof data.country === 'string' ? (data.country as string) : null,
+          rank: typeof data.rank === 'number' ? (data.rank as number) : null,
+          countryRank: typeof data.countryRank === 'number' ? (data.countryRank as number) : null,
+          techPp: typeof data.techPp === 'number' ? (data.techPp as number) : null,
+          accPp: typeof data.accPp === 'number' ? (data.accPp as number) : null,
+          passPp: typeof data.passPp === 'number' ? (data.passPp as number) : null
+        };
+        player = profile;
+        if (session.beatleaderId === PLEB_BEATLEADER_ID) {
+          adminRank = typeof data.rank === 'number' ? (data.rank as number) : null;
+          adminPlayer = profile;
+        }
+      }
+    } catch (err) {
+      console.error('Failed to fetch BeatLeader profile for tools layout', err);
+    }
+  }
+
+  if (!adminPlayer || adminRank === null) {
+    try {
+      const adminRes = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(PLEB_BEATLEADER_ID)}?stats=true`);
+      if (adminRes.ok) {
+        const adminData = (await adminRes.json()) as Record<string, unknown>;
+        const rankValue = adminData?.rank;
+        if (typeof rankValue === 'number') {
+          adminRank = rankValue;
+        }
+        adminPlayer = {
+          id: typeof adminData.id === 'string' ? (adminData.id as string) : PLEB_BEATLEADER_ID,
+          name: typeof adminData.name === 'string' ? (adminData.name as string) : undefined,
+          avatar: typeof adminData.avatar === 'string' ? (adminData.avatar as string) : null,
+          country: typeof adminData.country === 'string' ? (adminData.country as string) : null,
+          rank: typeof adminData.rank === 'number' ? (adminData.rank as number) : null,
+          countryRank: typeof adminData.countryRank === 'number' ? (adminData.countryRank as number) : null,
+          techPp: typeof adminData.techPp === 'number' ? (adminData.techPp as number) : null,
+          accPp: typeof adminData.accPp === 'number' ? (adminData.accPp as number) : null,
+          passPp: typeof adminData.passPp === 'number' ? (adminData.passPp as number) : null
+        };
+      }
+    } catch (err) {
+      console.error('Failed to fetch BeatLeader admin baseline', err);
+    }
+  }
+
+  return { hasBeatLeaderOAuth: Boolean(session), player, adminRank, adminPlayer };
+};
+

src/routes/tools/+page.svelte

@@ -4,9 +4,9 @@
 
   <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
     {#each [
-      { name: 'BeatLeader Compare Players', href: '/tools/beatleader-compare', desc: 'Find songs A played that B has not' },
+      { name: 'Compare Play Histories', href: '/tools/compare-histories', desc: 'Find songs A played that B has not' },
-      { name: 'BeatLeader Playlist Gap', href: '/tools/beatleader-playlist-gap', desc: 'Upload a playlist and find songs a player has not played' },
+      { name: 'Player Playlist Gaps', href: '/tools/player-playlist-gaps', desc: 'Upload a playlist and find songs a player has not played' },
-      { name: 'BeatLeader Head-to-Head', href: '/tools/beatleader-headtohead', desc: 'Compare two players on the same map/difficulty' }
+      { name: 'Player Head-to-Head', href: '/tools/player-headtohead', desc: 'Compare two players on the same map/difficulty' }
     ] as tool}
       <a href={tool.href} class="card-surface p-5 block">
         <div class="font-semibold">{tool.name}</div>

src/routes/tools/beatleader-compare/+page.svelte

@@ -1,634 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import SongPlayer from '$lib/components/SongPlayer.svelte';
-
-  type BeatLeaderScore = {
-    timeset?: string | number;
-    leaderboard?: {
-      // BeatLeader tends to expose a short id for the leaderboard route
-      id?: string | number | null;
-      leaderboardId?: string | number | null;
-      song?: { hash?: string | null };
-      difficulty?: { value?: number | string | null; modeName?: string | null };
-    };
-  };
-
-  type BeatLeaderScoresResponse = {
-    data?: BeatLeaderScore[];
-    metadata?: { page?: number; itemsPerPage?: number; total?: number };
-  };
-
-  type Difficulty = {
-    name: string;
-    characteristic: string;
-  };
-
-  type SongItem = {
-    hash: string;
-    difficulties: Difficulty[];
-    timeset: number;
-    leaderboardId?: string;
-  };
-
-  const ONE_YEAR_SECONDS = 365 * 24 * 60 * 60;
-
-  let playerA = '';
-  let playerB = '';
-  let loading = false;
-  let errorMsg: string | null = null;
-  let results: SongItem[] = [];
-  let loadingMeta = false;
-
-  // Sorting and pagination state
-  let sortBy: 'date' | 'difficulty' = 'date';
-  let sortDir: 'asc' | 'desc' = 'desc';
-  let page = 1;
-  let pageSize: number | string = 24;
-  $: pageSizeNum = Number(pageSize) || 24;
-
-  // Configurable lookback windows (months)
-  let monthsA: number | string = 6; // default 6 months
-  let monthsB: number | string = 24; // default 24 months
-
-  // Derived lists
-  $: sortedResults = [...results].sort((a, b) => {
-    let cmp = 0;
-    if (sortBy === 'date') {
-      cmp = a.timeset - b.timeset;
-    } else {
-      const an = a.difficulties[0]?.name ?? '';
-      const bn = b.difficulties[0]?.name ?? '';
-      cmp = an.localeCompare(bn);
-    }
-    return sortDir === 'asc' ? cmp : -cmp;
-  });
-  $: totalPages = Math.max(1, Math.ceil(sortedResults.length / pageSizeNum));
-  $: page = Math.min(page, totalPages);
-  $: pageItems = sortedResults.slice((page - 1) * pageSizeNum, (page - 1) * pageSizeNum + pageSizeNum);
-
-  type MapMeta = {
-    songName?: string;
-    key?: string;
-    coverURL?: string;
-    mapper?: string;
-  };
-  let metaByHash: Record<string, MapMeta> = {};
-  
-  type StarInfo = {
-    stars?: number;
-    accRating?: number;
-    passRating?: number;
-    techRating?: number;
-    status?: number;
-  };
-  // Keyed by `${hash}|${difficultyName}|${modeName}` for precise lookup
-  let starsByKey: Record<string, StarInfo> = {};
-  let loadingStars = false;
-
-  // Toast notification state
-  let toastMessage = '';
-  let showToast = false;
-  let toastTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  // Button feedback state - track which buttons are currently "lit up"
-  let litButtons = new Set<string>();
-
-  function showToastMessage(message: string) {
-    // Clear any existing toast
-    if (toastTimeout) {
-      clearTimeout(toastTimeout);
-    }
-    
-    toastMessage = message;
-    showToast = true;
-    
-    // Auto-hide toast after 3 seconds
-    toastTimeout = setTimeout(() => {
-      showToast = false;
-      toastMessage = '';
-    }, 3000);
-  }
-
-  function lightUpButton(buttonId: string) {
-    litButtons.add(buttonId);
-    // Reassign here too to trigger reactivity immediately
-    litButtons = litButtons;
-    // Remove the lighting effect after 1 second
-    setTimeout(() => {
-      litButtons.delete(buttonId);
-      litButtons = litButtons; // Trigger reactivity
-    }, 1000);
-  }
-
-  async function copyBsrCommand(key: string, hash: string) {
-    try {
-      const bsrCommand = `!bsr ${key}`;
-      await navigator.clipboard.writeText(bsrCommand);
-      
-      // Show success feedback with the actual command
-      showToastMessage(`Copied "${bsrCommand}" to clipboard`);
-      lightUpButton(`bsr-${hash}`);
-    } catch (err) {
-      console.error('Failed to copy to clipboard:', err);
-      showToastMessage('Failed to copy to clipboard');
-    }
-  }
-
-  async function fetchBeatSaverMeta(hash: string): Promise<MapMeta | null> {
-    try {
-      const res = await fetch(`https://api.beatsaver.com/maps/hash/${encodeURIComponent(hash)}`);
-      if (!res.ok) throw new Error(String(res.status));
-      const data: any = await res.json();
-      const cover = data?.versions?.[0]?.coverURL ?? `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg`;
-      return {
-        songName: data?.metadata?.songName ?? data?.name ?? undefined,
-        key: data?.id ?? undefined,
-        coverURL: cover,
-        mapper: data?.uploader?.name ?? undefined
-      };
-    } catch {
-      // Fallback to CDN cover only
-      return { coverURL: `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg` };
-    }
-  }
-
-  async function loadMetaForResults(items: SongItem[]): Promise<void> {
-    const needed = Array.from(new Set(items.map((i) => i.hash))).filter((h) => !metaByHash[h]);
-    if (needed.length === 0) return;
-    loadingMeta = true;
-    for (const h of needed) {
-      const meta = await fetchBeatSaverMeta(h);
-      if (meta) metaByHash = { ...metaByHash, [h]: meta };
-    }
-    loadingMeta = false;
-  }
-  
-  async function fetchBeatLeaderStarsByHash(hash: string): Promise<void> {
-    try {
-      const res = await fetch(`/api/beatleader?path=/leaderboards/hash/${encodeURIComponent(hash)}`);
-      if (!res.ok) return;
-      const data: any = await res.json();
-      const leaderboards: any[] = Array.isArray(data?.leaderboards) ? data.leaderboards : Array.isArray(data) ? data : [];
-      for (const lb of leaderboards) {
-        const diffName: string | undefined = lb?.difficulty?.difficultyName ?? lb?.difficulty?.name ?? undefined;
-        const modeName: string | undefined = lb?.difficulty?.modeName ?? lb?.modeName ?? 'Standard';
-        if (!diffName || !modeName) continue;
-        const normalized = normalizeDifficultyName(diffName);
-        const key = `${hash}|${normalized}|${modeName}`;
-        const info: StarInfo = {
-          stars: lb?.difficulty?.stars ?? lb?.stars,
-          accRating: lb?.difficulty?.accRating,
-          passRating: lb?.difficulty?.passRating,
-          techRating: lb?.difficulty?.techRating,
-          status: lb?.difficulty?.status
-        };
-        starsByKey = { ...starsByKey, [key]: info };
-      }
-    } catch {
-      // ignore
-    }
-  }
-
-  async function loadStarsForResults(items: SongItem[]): Promise<void> {
-    const neededHashes = Array.from(new Set(items.map((i) => i.hash)));
-    if (neededHashes.length === 0) return;
-    loadingStars = true;
-    for (const h of neededHashes) {
-      await fetchBeatLeaderStarsByHash(h);
-    }
-    loadingStars = false;
-  }
-
-  
-
-  function difficultyToColor(name: string | undefined): string {
-    const n = (name ?? 'ExpertPlus').toLowerCase();
-    if (n === 'easy') return 'MediumSeaGreen';
-    if (n === 'normal') return '#59b0f4';
-    if (n === 'hard') return 'tomato';
-    if (n === 'expert') return '#bf2a42';
-    if (n === 'expertplus' || n === 'expert+' || n === 'ex+' ) return '#8f48db';
-    return '#8f48db';
-  }
-
-  
-
-  
-
-  function normalizeDifficultyName(value: number | string | null | undefined): string {
-    if (value === null || value === undefined) return 'ExpertPlus';
-    if (typeof value === 'string') {
-      const v = value.toLowerCase();
-      if (v.includes('expertplus') || v === 'expertplus' || v === 'ex+' || v.includes('ex+')) return 'ExpertPlus';
-      if (v.includes('expert')) return 'Expert';
-      if (v.includes('hard')) return 'Hard';
-      if (v.includes('normal')) return 'Normal';
-      if (v.includes('easy')) return 'Easy';
-      return value;
-    }
-    switch (value) {
-      case 1:
-        return 'Easy';
-      case 3:
-        return 'Normal';
-      case 5:
-        return 'Hard';
-      case 7:
-        return 'Expert';
-      case 9:
-        return 'ExpertPlus';
-      default:
-        return 'ExpertPlus';
-    }
-  }
-
-  function parseTimeset(ts: string | number | undefined): number {
-    if (ts === undefined) return 0;
-    if (typeof ts === 'number') return ts;
-    const n = Number(ts);
-    return Number.isFinite(n) ? n : 0;
-  }
-
-  function getCutoffEpochFromMonths(months: number | string): number {
-    const m = Number(months) || 0;
-    const seconds = Math.max(0, m) * 30 * 24 * 60 * 60; // approx 30 days per month
-    return Math.floor(Date.now() / 1000) - seconds;
-  }
-
-  async function fetchAllRecentScores(playerId: string, cutoffEpoch: number, maxPages = 15): Promise<BeatLeaderScore[]> {
-    const qs = new URLSearchParams({ diff: 'ExpertPlus', cutoffEpoch: String(cutoffEpoch), maxPages: String(maxPages) });
-    const url = `/api/beatleader-cache/player/${encodeURIComponent(playerId)}?${qs.toString()}`;
-    const res = await fetch(url);
-    if (!res.ok) throw new Error(`Failed to fetch scores for ${playerId}: ${res.status}`);
-    const data = (await res.json()) as BeatLeaderScoresResponse;
-    return data.data ?? [];
-  }
-
-
-  
-
-  function incrementPlaylistCount(): number {
-    try {
-      const raw = localStorage.getItem('playlist_counts');
-      const obj = raw ? (JSON.parse(raw) as Record<string, number>) : {};
-      const key = 'beatleader_compare_players';
-      const next = (obj[key] ?? 0) + 1;
-      obj[key] = next;
-      localStorage.setItem('playlist_counts', JSON.stringify(obj));
-      return next;
-    } catch {
-      return 1;
-    }
-  }
-
-  function toPlaylistJson(songs: SongItem[]): unknown {
-    const count = incrementPlaylistCount();
-    const playlistTitle = `beatleader_compare_players-${String(count).padStart(2, '0')}`;
-    return {
-      playlistTitle,
-      playlistAuthor: 'SaberList Tool',
-      songs: songs.map((s) => ({
-        hash: s.hash,
-        difficulties: s.difficulties,
-      })),
-      description: `A's recent songs not played by B. Generated ${new Date().toISOString()}`,
-      allowDuplicates: false,
-      customData: {}
-    };
-  }
-
-  function downloadPlaylist(): void {
-    const payload = toPlaylistJson(results);
-    const title = (payload as any).playlistTitle ?? 'playlist';
-    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${title}.bplist`;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
-  }
-
-  async function onCompare(ev: SubmitEvent) {
-    ev.preventDefault();
-    errorMsg = null;
-    results = [];
-    const a = playerA.trim();
-    const b = playerB.trim();
-    if (!a || !b) {
-      errorMsg = 'Please enter both Player A and Player B IDs.';
-      return;
-    }
-
-    loading = true;
-    try {
-      const cutoff = getCutoffEpochFromMonths(monthsA);
-      const cutoffB = getCutoffEpochFromMonths(monthsB);
-      const [aScores, bScores] = await Promise.all([
-        fetchAllRecentScores(a, cutoff),
-        fetchAllRecentScores(b, cutoffB, 100)
-      ]);
-
-      const bLeaderboardIds = new Set<string>();
-      const bExpertPlusKeys = new Set<string>(); // `${hashLower}|ExpertPlus|${modeName}`
-      for (const s of bScores) {
-        const rawHash = s.leaderboard?.song?.hash ?? undefined;
-        const hashLower = rawHash ? String(rawHash).toLowerCase() : undefined;
-        const lbIdRaw = (s.leaderboard as any)?.id ?? (s.leaderboard as any)?.leaderboardId;
-        const lbId = lbIdRaw != null ? String(lbIdRaw) : undefined;
-        const bDiffValue = s.leaderboard?.difficulty?.value ?? undefined;
-        const bModeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
-        const bDiffName = normalizeDifficultyName(bDiffValue);
-        if (bDiffName !== 'ExpertPlus') continue; // ignore non-ExpertPlus for B
-        if (lbId) bLeaderboardIds.add(lbId);
-        if (hashLower) bExpertPlusKeys.add(`${hashLower}|ExpertPlus|${bModeName}`);
-      }
-
-      
-      const runSeen = new Set<string>(); // avoid duplicates within this run
-
-      const candidates: SongItem[] = [];
-      for (const entry of aScores) {
-        const t = parseTimeset(entry.timeset);
-        if (!t || t < cutoff) continue;
-
-        const rawHash = entry.leaderboard?.song?.hash ?? undefined;
-        const diffValue = entry.leaderboard?.difficulty?.value ?? undefined;
-        const modeName = entry.leaderboard?.difficulty?.modeName ?? 'Standard';
-        const leaderboardIdRaw = (entry.leaderboard as any)?.id ?? (entry.leaderboard as any)?.leaderboardId;
-        const leaderboardId = leaderboardIdRaw != null ? String(leaderboardIdRaw) : undefined;
-        if (!rawHash) continue;
-        const hashLower = String(rawHash).toLowerCase();
-        const diffName = normalizeDifficultyName(diffValue);
-        if (diffName !== 'ExpertPlus') continue; // Only compare ExpertPlus for A
-        // B has played ExpertPlus of same map+mode if matching leaderboard or key exists
-        if ((leaderboardId && bLeaderboardIds.has(leaderboardId)) || bExpertPlusKeys.has(`${hashLower}|${diffName}|${modeName}`)) continue;
-        
-
-        const key = `${rawHash}|${diffName}|${modeName}`;
-        if (runSeen.has(key)) continue;
-        runSeen.add(key);
-
-        candidates.push({
-          hash: rawHash,
-          difficulties: [{ name: diffName, characteristic: modeName ?? 'Standard' }],
-          timeset: t,
-          leaderboardId
-        });
-      }
-
-      candidates.sort((x, y) => y.timeset - x.timeset);
-      const limited = candidates; // return all; pagination handled client-side
-
-      
-
-      results = limited;
-      page = 1;
-      // Load BeatSaver metadata (covers, titles) for tiles
-      loadMetaForResults(limited);
-      // Load BeatLeader star ratings per hash/diff
-      loadStarsForResults(limited);
-    } catch (err) {
-      errorMsg = err instanceof Error ? err.message : 'Unknown error';
-    } finally {
-      loading = false;
-    }
-  }
-
-  onMount(() => {
-    // Try prefill from URL params if present
-    const sp = new URLSearchParams(location.search);
-    playerA = sp.get('a') ?? '';
-    playerB = sp.get('b') ?? '';
-  });
-</script>
-
-<section class="py-8">
-  <h1 class="font-display text-3xl sm:text-4xl">BeatLeader: Compare Players</h1>
-  <p class="mt-2 text-muted">Maps Player A has played that Player B hasn't — configurable lookback.</p>
-  
-
-  <form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 items-end" on:submit|preventDefault={onCompare}>
-    <div>
-      <label class="block text-sm text-muted">Player A ID (source)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerA} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player B ID (target)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerB} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player A lookback (months)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" type="number" min="0" max="120" bind:value={monthsA} />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player B lookback (months)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" type="number" min="0" max="120" bind:value={monthsB} />
-      </label>
-    </div>
-    <div>
-      <button class="btn-neon" disabled={loading}>
-        {#if loading}
-          Loading...
-        {:else}
-          Compare
-        {/if}
-      </button>
-    </div>
-  </form>
-
-  {#if errorMsg}
-    <div class="mt-4 text-danger">{errorMsg}</div>
-  {/if}
-
-  {#if results.length > 0}
-    <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-      <div class="flex items-center gap-3 text-sm text-muted">
-        <span>{results.length} songs</span>
-        <span>·</span>
-        <label class="flex items-center gap-2">Sort
-          <select class="rounded-md border border-white/10 bg-transparent px-2 py-1 text-sm" bind:value={sortBy}>
-            <option value="date">Date</option>
-            <option value="difficulty">Difficulty</option>
-          </select>
-        </label>
-        <label class="flex items-center gap-2">Dir
-          <select class="rounded-md border border-white/10 bg-transparent px-2 py-1 text-sm" bind:value={sortDir}>
-            <option value="desc">Desc</option>
-            <option value="asc">Asc</option>
-          </select>
-        </label>
-        <label class="flex items-center gap-2">Page size
-          <select class="rounded-md border border-white/10 bg-transparent px-2 py-1 text-sm" bind:value={pageSize}>
-            <option value={12}>12</option>
-            <option value={24}>24</option>
-            <option value={36}>36</option>
-            <option value={48}>48</option>
-          </select>
-        </label>
-        
-      </div>
-      <div class="flex items-center gap-3">
-        <button class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
-      </div>
-    </div>
-
-    {#if loadingMeta}
-      <div class="mt-2 text-xs text-muted">Loading covers…</div>
-    {/if}
-    {#if loadingStars}
-      <div class="mt-2 text-xs text-muted">Loading star ratings…</div>
-    {/if}
-
-    <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-      {#each pageItems as item}
-        <article class="card-surface overflow-hidden">
-          <div class="aspect-square bg-black/30">
-            {#if metaByHash[item.hash]?.coverURL}
-              <img
-                src={metaByHash[item.hash].coverURL}
-                alt={metaByHash[item.hash]?.songName ?? item.hash}
-                loading="lazy"
-                class="h-full w-full object-cover"
-              />
-            {:else}
-              <div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
-            {/if}
-          </div>
-          <div class="p-3">
-            <div class="font-semibold truncate" title={metaByHash[item.hash]?.songName ?? item.hash}>
-              {metaByHash[item.hash]?.songName ?? item.hash}
-            </div>
-            {#if metaByHash[item.hash]?.mapper}
-              <div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
-                <span>
-                  {metaByHash[item.hash]?.mapper}
-                  {#if starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars}
-                    <span class="ml-3" title="BeatLeader star rating">★ {starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars?.toFixed(2)}</span>
-                  {/if}
-                </span>
-                <span class="text-[11px] ml-2">{new Date(item.timeset * 1000).toLocaleDateString()}</span>
-              </div>
-            {/if}
-            <div class="mt-2 flex items-center gap-2">
-              <span class="rounded bg-white/10 px-2 py-0.5 text-[11px]">
-                {item.difficulties[0]?.characteristic ?? 'Standard'} ·
-                <span class="rounded px-1 ml-1" style="background-color: {difficultyToColor(item.difficulties[0]?.name)}; color: #fff;">
-                  {item.difficulties[0]?.name}
-                </span>
-              </span>
-              <div class="flex-1">
-                <SongPlayer hash={item.hash} preferBeatLeader={true} />
-              </div>
-            </div>
-            <div class="mt-3 flex flex-wrap gap-2">
-              <a
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
-                href={item.leaderboardId
-                  ? `https://beatleader.com/leaderboard/global/${item.leaderboardId}`
-                  : `https://beatleader.com/leaderboard/global/${item.hash}?diff=${encodeURIComponent(item.difficulties[0]?.name ?? 'ExpertPlus')}&mode=${encodeURIComponent(item.difficulties[0]?.characteristic ?? 'Standard')}`}
-                target="_blank"
-                rel="noopener"
-                title="Open in BeatLeader"
-                >BL</a
-              >
-              <a
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
-                href={metaByHash[item.hash]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
-                target="_blank"
-                rel="noopener"
-                title="Open in BeatSaver"
-                >BS</a
-              >
-              <button
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
-                class:lit-up={litButtons.has(`bsr-${item.hash}`)}
-                on:click={() => { const key = metaByHash[item.hash]?.key; if (key) copyBsrCommand(key, item.hash); }}
-                disabled={!metaByHash[item.hash]?.key}
-                title="!bsr"
-              >!bsr</button>
-            </div>
-          </div>
-        </article>
-      {/each}
-    </div>
-
-    {#if totalPages > 1}
-      <div class="mt-6 flex items-center justify-center gap-2">
-        <button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.max(1, page - 1))} disabled={page === 1}>
-          Prev
-        </button>
-        <span class="text-sm text-muted">Page {page} / {totalPages}</span>
-        <button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.min(totalPages, page + 1))} disabled={page === totalPages}>
-          Next
-        </button>
-      </div>
-    {/if}
-  {/if}
-</section>
-
-<!-- Toast Notification -->
-{#if showToast}
-  <div class="toast-notification" role="status" aria-live="polite">
-    {toastMessage}
-  </div>
-{/if}
-
-<style>
-  .text-danger { color: #dc2626; }
-  
-  /* Toast notification styles */
-  .toast-notification {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    background: #10b981;
-    color: white;
-    padding: 12px 16px;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    font-size: 14px;
-    font-weight: 500;
-    animation: slideIn 0.3s ease-out;
-  }
-  
-  @keyframes slideIn {
-    from {
-      transform: translateX(100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-  
-  /* Button lighting effect */
-  .lit-up {
-    background: linear-gradient(45deg, #10b981, #059669);
-    border-color: #10b981;
-    color: white;
-    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
-    animation: pulse 0.6s ease-out;
-  }
-  
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
-    }
-    70% {
-      box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
-    }
-    100% {
-      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
-    }
-  }
-</style>
-
-

src/routes/tools/beatleader-headtohead/+page.svelte

@@ -1,945 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import SongPlayer from '$lib/components/SongPlayer.svelte';
-
-  type BeatLeaderScore = {
-    timeset?: string | number;
-    accuracy?: number;
-    acc?: number;
-    rank?: number;
-    leaderboard?: {
-      id?: string | number | null;
-      leaderboardId?: string | number | null;
-      song?: { hash?: string | null };
-      difficulty?: { value?: number | string | null; modeName?: string | null };
-    };
-  };
-
-  type BeatLeaderScoresResponse = { data?: BeatLeaderScore[] };
-
-  type MapMeta = {
-    songName?: string;
-    key?: string;
-    coverURL?: string;
-    mapper?: string;
-  };
-
-  type H2HItem = {
-    hash: string;
-    diffName: string;
-    modeName: string;
-    timeset: number; // most recent between the two
-    accA: number | null;
-    accB: number | null;
-    rankA?: number;
-    rankB?: number;
-    leaderboardId?: string;
-  };
-
-  const difficulties = ['Easy', 'Normal', 'Hard', 'Expert', 'ExpertPlus'];
-  const modes = ['Standard', 'Lawless', 'OneSaber', 'NoArrows', 'Lightshow'];
-  const ONE_YEAR_SECONDS = 365 * 24 * 60 * 60;
-
-  let playerA = '';
-  let playerB = '';
-  let months: number | string = 6;
-
-  // UI state
-  let loading = false;
-  let errorMsg: string | null = null;
-
-  // Results state
-  let items: H2HItem[] = [];
-  let sortDir: 'asc' | 'desc' = 'desc';
-  let page = 1;
-  let pageSize: number | string = 24;
-  let filterWinMargin: string = 'all'; // 'all', '1', '2'
-  $: pageSizeNum = Number(pageSize) || 24;
-  $: filtered = (() => {
-    if (filterWinMargin === 'all') return items;
-    const margin = Number(filterWinMargin);
-    return items.filter(i => {
-      if (i.accA == null || i.accB == null) return false;
-      return i.accA > i.accB && (i.accA - i.accB) > margin;
-    });
-  })();
-  $: sorted = [...filtered].sort((a, b) => (sortDir === 'asc' ? a.timeset - b.timeset : b.timeset - a.timeset));
-  $: totalPages = Math.max(1, Math.ceil(sorted.length / pageSizeNum));
-  $: page = Math.min(page, totalPages);
-  $: pageItems = sorted.slice((page - 1) * pageSizeNum, (page - 1) * pageSizeNum + pageSizeNum);
-
-  // Meta cache
-  let metaByHash: Record<string, MapMeta> = {};
-  let loadingMeta = false;
-
-  // Toast notification state
-  let toastMessage = '';
-  let showToast = false;
-  let toastTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  // Button feedback state - track which buttons are currently "lit up"
-  let litButtons = new Set<string>();
-
-  function showToastMessage(message: string) {
-    // Clear any existing toast
-    if (toastTimeout) {
-      clearTimeout(toastTimeout);
-    }
-    
-    toastMessage = message;
-    showToast = true;
-    
-    // Auto-hide toast after 3 seconds
-    toastTimeout = setTimeout(() => {
-      showToast = false;
-      toastMessage = '';
-    }, 3000);
-  }
-
-  function lightUpButton(buttonId: string) {
-    litButtons.add(buttonId);
-    // Reassign here too to trigger reactivity immediately
-    litButtons = litButtons;
-    // Remove the lighting effect after 1 second
-    setTimeout(() => {
-      litButtons.delete(buttonId);
-      litButtons = litButtons; // Trigger reactivity
-    }, 1000);
-  }
-
-  async function copyBsrCommand(key: string, hash: string) {
-    try {
-      const bsrCommand = `!bsr ${key}`;
-      await navigator.clipboard.writeText(bsrCommand);
-      
-      // Show success feedback with the actual command
-      showToastMessage(`Copied "${bsrCommand}" to clipboard`);
-      lightUpButton(`bsr-${hash}`);
-    } catch (err) {
-      console.error('Failed to copy to clipboard:', err);
-      showToastMessage('Failed to copy to clipboard');
-    }
-  }
-
-  function normalizeAccuracy(value: number | undefined): number | null {
-    if (value === undefined || value === null) return null;
-    return value <= 1 ? value * 100 : value;
-  }
-
-  function normalizeDifficultyName(value: number | string | null | undefined): string {
-    if (value === null || value === undefined) return 'ExpertPlus';
-    if (typeof value === 'string') {
-      const v = value.toLowerCase();
-      if (v.includes('expertplus') || v === 'expertplus' || v === 'ex+' || v.includes('ex+')) return 'ExpertPlus';
-      if (v.includes('expert')) return 'Expert';
-      if (v.includes('hard')) return 'Hard';
-      if (v.includes('normal')) return 'Normal';
-      if (v.includes('easy')) return 'Easy';
-      return value;
-    }
-    switch (value) {
-      case 1: return 'Easy';
-      case 3: return 'Normal';
-      case 5: return 'Hard';
-      case 7: return 'Expert';
-      case 9: return 'ExpertPlus';
-      default: return 'ExpertPlus';
-    }
-  }
-
-  function parseTimeset(ts: string | number | undefined): number {
-    if (ts === undefined) return 0;
-    if (typeof ts === 'number') return ts;
-    const n = Number(ts);
-    return Number.isFinite(n) ? n : 0;
-  }
-
-  function getCutoffEpochFromMonths(m: number | string): number {
-    const monthsNum = Number(m) || 0;
-    const seconds = Math.max(0, monthsNum) * 30 * 24 * 60 * 60;
-    return Math.floor(Date.now() / 1000) - seconds;
-  }
-
-  async function fetchBeatSaverMeta(inHash: string): Promise<MapMeta | null> {
-    try {
-      const res = await fetch(`https://api.beatsaver.com/maps/hash/${encodeURIComponent(inHash)}`);
-      if (!res.ok) throw new Error(String(res.status));
-      const data: any = await res.json();
-      const cover = data?.versions?.[0]?.coverURL ?? `https://cdn.beatsaver.com/${inHash.toLowerCase()}.jpg`;
-      return {
-        songName: data?.metadata?.songName ?? data?.name ?? undefined,
-        key: data?.id ?? undefined,
-        coverURL: cover,
-        mapper: data?.uploader?.name ?? undefined
-      };
-    } catch {
-      return { coverURL: `https://cdn.beatsaver.com/${inHash.toLowerCase()}.jpg` };
-    }
-  }
-
-  async function loadMetaForResults(list: H2HItem[]): Promise<void> {
-    const needed = Array.from(new Set(list.map((i) => i.hash))).filter((h) => !metaByHash[h]);
-    if (needed.length === 0) return;
-    loadingMeta = true;
-    for (const h of needed) {
-      const m = await fetchBeatSaverMeta(h);
-      if (m) metaByHash = { ...metaByHash, [h]: m };
-    }
-    loadingMeta = false;
-  }
-
-  async function fetchAllRecentScoresForDiff(playerId: string, cutoffEpoch: number, reqDiff: string, maxPages = 100): Promise<BeatLeaderScore[]> {
-    const qs = new URLSearchParams({ diff: reqDiff, cutoffEpoch: String(cutoffEpoch), maxPages: String(maxPages) });
-    const url = `/api/beatleader-cache/player/${encodeURIComponent(playerId)}?${qs.toString()}`;
-    const res = await fetch(url);
-    if (!res.ok) throw new Error(`Failed to fetch scores for ${playerId}: ${res.status}`);
-    const data = (await res.json()) as BeatLeaderScoresResponse;
-    return data.data ?? [];
-  }
-
-  async function fetchAllRecentScoresAllDiffs(playerId: string, cutoffEpoch: number): Promise<BeatLeaderScore[]> {
-    const arrays = await Promise.all(
-      difficulties.map((d) => fetchAllRecentScoresForDiff(playerId, cutoffEpoch, d))
-    );
-    // Merge and dedupe by leaderboard key (hash|diff|mode) and timeset
-    const merged = new Map<string, BeatLeaderScore>();
-    for (const arr of arrays) {
-      for (const s of arr) {
-        const rawHash = s.leaderboard?.song?.hash ?? undefined;
-        const modeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
-        if (!rawHash) continue;
-        const hashLower = String(rawHash).toLowerCase();
-        const diffName = normalizeDifficultyName(s.leaderboard?.difficulty?.value ?? undefined);
-        const key = `${hashLower}|${diffName}|${modeName}`;
-        const prev = merged.get(key);
-        if (!prev || parseTimeset(prev.timeset) < parseTimeset(s.timeset)) merged.set(key, s);
-      }
-    }
-    return Array.from(merged.values());
-  }
-
-  function buildLatestByKey(scores: BeatLeaderScore[], cutoffEpoch: number): Map<string, BeatLeaderScore> {
-    const byKey = new Map<string, BeatLeaderScore>();
-    for (const s of scores) {
-      const t = parseTimeset(s.timeset);
-      if (!t || t < cutoffEpoch - ONE_YEAR_SECONDS) continue; // sanity guard
-      const rawHash = s.leaderboard?.song?.hash ?? undefined;
-      const modeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
-      if (!rawHash) continue;
-      const hashLower = String(rawHash).toLowerCase();
-      const diffName = normalizeDifficultyName(s.leaderboard?.difficulty?.value ?? undefined);
-      const key = `${hashLower}|${diffName}|${modeName}`;
-      const prev = byKey.get(key);
-      if (!prev || parseTimeset(prev.timeset) < t) byKey.set(key, s);
-    }
-    return byKey;
-  }
-
-  function toH2HItems(aMap: Map<string, BeatLeaderScore>, bMap: Map<string, BeatLeaderScore>): H2HItem[] {
-    const out: H2HItem[] = [];
-    for (const [key, aScore] of aMap) {
-      if (!bMap.has(key)) continue;
-      const bScore = bMap.get(key)!;
-      const [hashLower, diffName, modeName] = key.split('|');
-      const rawHash = (aScore.leaderboard?.song?.hash ?? bScore.leaderboard?.song?.hash ?? hashLower);
-      const hash = String(rawHash).toLowerCase();
-      const tA = parseTimeset(aScore.timeset);
-      const tB = parseTimeset(bScore.timeset);
-      const accA = normalizeAccuracy((aScore.accuracy ?? aScore.acc) as number | undefined);
-      const accB = normalizeAccuracy((bScore.accuracy ?? bScore.acc) as number | undefined);
-      const lbIdRaw = (aScore.leaderboard as any)?.id ?? (aScore.leaderboard as any)?.leaderboardId ?? (bScore.leaderboard as any)?.id ?? (bScore.leaderboard as any)?.leaderboardId;
-      const leaderboardId = lbIdRaw != null ? String(lbIdRaw) : undefined;
-      out.push({
-        hash,
-        diffName,
-        modeName,
-        timeset: Math.max(tA, tB),
-        accA,
-        accB,
-        rankA: aScore.rank,
-        rankB: bScore.rank,
-        leaderboardId
-      });
-    }
-    return out;
-  }
-
-  async function onCompare(ev: SubmitEvent) {
-    ev.preventDefault();
-    // Push current params into URL on user action
-    updateUrl(false);
-    errorMsg = null; items = []; metaByHash = {};
-    const a = playerA.trim();
-    const b = playerB.trim();
-    if (!a || !b) { errorMsg = 'Please enter both Player A and Player B IDs.'; return; }
-    loading = true;
-    try {
-      const cutoff = getCutoffEpochFromMonths(months);
-      const [aScores, bScores] = await Promise.all([
-        fetchAllRecentScoresAllDiffs(a, cutoff),
-        fetchAllRecentScoresAllDiffs(b, cutoff)
-      ]);
-      const aLatest = buildLatestByKey(aScores, cutoff - ONE_YEAR_SECONDS);
-      const bLatest = buildLatestByKey(bScores, cutoff - ONE_YEAR_SECONDS);
-      const combined = toH2HItems(aLatest, bLatest);
-      combined.sort((x, y) => y.timeset - x.timeset);
-      items = combined;
-      page = 1;
-      loadMetaForResults(combined);
-    } catch (err) {
-      errorMsg = err instanceof Error ? err.message : 'Unknown error';
-    } finally {
-      loading = false;
-    }
-  }
-
-  onMount(() => {
-    const sp = new URLSearchParams(location.search);
-    playerA = sp.get('a') ?? '';
-    playerB = sp.get('b') ?? '';
-    const m = sp.get('m') ?? sp.get('months');
-    if (m) months = Number(m);
-    const p = sp.get('page');
-    if (p) page = Math.max(1, Number(p) || 1);
-    const dir = sp.get('dir');
-    if (dir === 'asc' || dir === 'desc') sortDir = dir;
-    const size = sp.get('size') ?? sp.get('ps');
-    if (size) pageSize = Number(size) || pageSize;
-    const filter = sp.get('filter');
-    if (filter && ['all', '1', '2'].includes(filter)) filterWinMargin = filter;
-    initialized = true;
-  });
-
-  // Short labels for players
-  $: playerAId = playerA.trim();
-  $: playerBId = playerB.trim();
-  $: idShortA = playerAId ? playerAId.slice(0, 6) : 'A';
-  $: idShortB = playerBId ? playerBId.slice(0, 6) : 'B';
-
-  // URL param sync
-  let initialized = false;
-  let urlSyncInProgress = false;
-  function updateUrl(replace = true) {
-    if (!initialized || urlSyncInProgress) return;
-    try {
-      urlSyncInProgress = true;
-      const sp = new URLSearchParams(location.search);
-      if (playerAId) sp.set('a', playerAId); else sp.delete('a');
-      if (playerBId) sp.set('b', playerBId); else sp.delete('b');
-      sp.delete('diff');
-      sp.delete('mode');
-      const monthsVal = Number(months) || 0;
-      if (monthsVal) sp.set('months', String(monthsVal)); else sp.delete('months');
-      if (page > 1) sp.set('page', String(page)); else sp.delete('page');
-      if (sortDir !== 'desc') sp.set('dir', sortDir); else sp.delete('dir');
-      if (pageSizeNum !== 24) sp.set('size', String(pageSizeNum)); else sp.delete('size');
-      if (filterWinMargin !== 'all') sp.set('filter', filterWinMargin); else sp.delete('filter');
-      const qs = sp.toString();
-      const url = location.pathname + (qs ? `?${qs}` : '');
-      if (replace) history.replaceState(null, '', url); else history.pushState(null, '', url);
-    } finally {
-      urlSyncInProgress = false;
-    }
-  }
-
-  // Sync URL on state changes
-  $: updateUrl(true);
-
-  // ===== Derived Stats for Visualizations =====
-  function mean(values: number[]): number {
-    if (!values.length) return 0;
-    return values.reduce((a, b) => a + b, 0) / values.length;
-  }
-  function median(values: number[]): number {
-    if (!values.length) return 0;
-    const v = [...values].sort((a, b) => a - b);
-    const mid = Math.floor(v.length / 2);
-    return v.length % 2 ? v[mid] : (v[mid - 1] + v[mid]) / 2;
-  }
-  function percentile(values: number[], p: number): number {
-    if (!values.length) return 0;
-    const v = [...values].sort((a, b) => a - b);
-    const idx = Math.min(v.length - 1, Math.max(0, Math.floor((p / 100) * (v.length - 1))));
-    return v[idx];
-  }
-
-  $: comparable = items.filter((i) => i.accA != null && i.accB != null) as Array<{
-    hash: string; diffName: string; modeName: string; timeset: number; accA: number; accB: number; rankA?: number; rankB?: number; leaderboardId?: string;
-  }>;
-  $: totalComparable = comparable.length;
-  $: winsA = comparable.filter((i) => i.accA > i.accB).length;
-  $: winsB = comparable.filter((i) => i.accB > i.accA).length;
-  $: ties = comparable.filter((i) => i.accA === i.accB).length;
-
-  $: accAList = comparable.map((i) => i.accA);
-  $: accBList = comparable.map((i) => i.accB);
-  $: avgAccA = mean(accAList);
-  $: avgAccB = mean(accBList);
-  $: medAccA = median(accAList);
-  $: medAccB = median(accBList);
-
-  $: deltas = comparable.map((i) => i.accA - i.accB);
-  $: absMargins = deltas.map((x) => Math.abs(x));
-  $: avgMargin = mean(absMargins);
-  $: p95Margin = percentile(absMargins, 95);
-
-  $: chronological = [...comparable].sort((a, b) => a.timeset - b.timeset);
-  $: longestA = (() => {
-    let cur = 0, best = 0;
-    for (const i of chronological) {
-      if (i.accA > i.accB) { cur += 1; best = Math.max(best, cur); } else if (i.accA === i.accB) { cur = 0; } else { cur = 0; }
-    }
-    return best;
-  })();
-  $: longestB = (() => {
-    let cur = 0, best = 0;
-    for (const i of chronological) {
-      if (i.accB > i.accA) { cur += 1; best = Math.max(best, cur); } else if (i.accA === i.accB) { cur = 0; } else { cur = 0; }
-    }
-    return best;
-  })();
-
-  // Win share (bar + donut)
-  $: shareA = totalComparable ? winsA / totalComparable : 0;
-  $: shareT = totalComparable ? ties / totalComparable : 0;
-  $: shareB = totalComparable ? winsB / totalComparable : 0;
-  // Donut chart calculations
-  const donutR = 44;
-  $: donutCircumference = 2 * Math.PI * donutR;
-  $: donutALen = donutCircumference * shareA;
-  $: donutTLen = donutCircumference * shareT;
-  $: donutBLen = donutCircumference * shareB;
-
-  // Histogram of signed margins (A - B)
-  $: maxAbsDelta = Math.max(0, ...deltas.map((x) => Math.abs(x)));
-  $: histBins = 14;
-  $: histRangeMin = -maxAbsDelta;
-  $: histRangeMax = maxAbsDelta;
-  $: histBinWidth = histBins ? (histRangeMax - histRangeMin) / histBins : 1;
-  $: histogram = (() => {
-    const bins = Array.from({ length: histBins }, () => 0);
-    for (const x of deltas) {
-      if (!Number.isFinite(x)) continue;
-      let idx = Math.floor((x - histRangeMin) / histBinWidth);
-      if (idx < 0) idx = 0; if (idx >= histBins) idx = histBins - 1;
-      bins[idx] += 1;
-    }
-    return bins;
-  })();
-  $: histMaxCount = Math.max(1, ...histogram);
-
-  // Cumulative wins over time sparkline
-  $: cumSeries = (() => {
-    const pts: { t: number; a: number; b: number }[] = [];
-    let a = 0, b = 0;
-    for (const i of chronological) {
-      if (i.accA > i.accB) a += 1; else if (i.accB > i.accA) b += 1;
-      pts.push({ t: i.timeset, a, b });
-    }
-    return pts;
-  })();
-  $: tMin = cumSeries.length ? cumSeries[0].t : 0;
-  $: tMax = cumSeries.length ? cumSeries[cumSeries.length - 1].t : 1;
-  function mapX(t: number, w: number): number {
-    if (tMax === tMin) return 0;
-    return ((t - tMin) / (tMax - tMin)) * w;
-  }
-  function mapY(v: number, h: number, vMax?: number): number {
-    const maxV = vMax ?? Math.max(1, cumSeries.length ? Math.max(cumSeries[cumSeries.length - 1].a, cumSeries[cumSeries.length - 1].b) : 1);
-    return h - (v / maxV) * h;
-  }
-</script>
-
-<section class="py-8">
-  <h1 class="font-display text-3xl sm:text-4xl">BeatLeader: Head-to-Head</h1>
-  <p class="mt-2 text-muted">Paginated head-to-head results on the same map and difficulty.</p>
-
-  <form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4 items-end" on:submit|preventDefault={onCompare}>
-    <div>
-      <label class="block text-sm text-muted">Player A ID
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerA} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player B ID
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerB} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Lookback (months)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" type="number" min="0" max="120" bind:value={months} />
-      </label>
-    </div>
-    <div>
-      <button class="btn-neon" disabled={loading}>
-        {#if loading}Loading...{:else}Compare{/if}
-      </button>
-    </div>
-  </form>
-
-  {#if errorMsg}
-    <div class="mt-4 text-danger">{errorMsg}</div>
-  {/if}
-
-  {#if items.length > 0}
-    <!-- KPI Tiles -->
-    <div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-      <div class="kpi-tile">
-        <div class="kpi-label">Shared Maps</div>
-        <div class="kpi-value">{totalComparable}</div>
-      </div>
-      <div class="kpi-tile a">
-        <div class="kpi-label">Wins {idShortA}</div>
-        <div class="kpi-value">{winsA}</div>
-      </div>
-      <div class="kpi-tile b">
-        <div class="kpi-label">Wins {idShortB}</div>
-        <div class="kpi-value">{winsB}</div>
-      </div>
-      <div class="kpi-tile">
-        <div class="kpi-label">Ties</div>
-        <div class="kpi-value">{ties}</div>
-      </div>
-    </div>
-    <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-      <div class="kpi-tile a">
-        <div class="kpi-sublabel">Avg Acc {idShortA}</div>
-        <div class="kpi-subvalue">{avgAccA.toFixed(2)}%</div>
-      </div>
-      <div class="kpi-tile b">
-        <div class="kpi-sublabel">Avg Acc {idShortB}</div>
-        <div class="kpi-subvalue">{avgAccB.toFixed(2)}%</div>
-      </div>
-      <div class="kpi-tile a">
-        <div class="kpi-sublabel">Median {idShortA}</div>
-        <div class="kpi-subvalue">{medAccA.toFixed(2)}%</div>
-      </div>
-      <div class="kpi-tile b">
-        <div class="kpi-sublabel">Median {idShortB}</div>
-        <div class="kpi-subvalue">{medAccB.toFixed(2)}%</div>
-      </div>
-    </div>
-    <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-      <div class="kpi-tile">
-        <div class="kpi-sublabel">Avg Win Margin</div>
-        <div class="kpi-subvalue">{avgMargin.toFixed(2)}%</div>
-      </div>
-      <div class="kpi-tile">
-        <div class="kpi-sublabel">95th %ile Margin</div>
-        <div class="kpi-subvalue">{p95Margin.toFixed(2)}%</div>
-      </div>
-      <div class="kpi-tile a">
-        <div class="kpi-sublabel">Longest Streak {idShortA}</div>
-        <div class="kpi-subvalue">{longestA}</div>
-      </div>
-      <div class="kpi-tile b">
-        <div class="kpi-sublabel">Longest Streak {idShortB}</div>
-        <div class="kpi-subvalue">{longestB}</div>
-      </div>
-    </div>
-
-    <!-- Win Share: Bar + Donut -->
-    <div class="mt-6 grid gap-4 lg:grid-cols-2">
-      <div class="card-surface p-4">
-        <div class="text-sm text-muted mb-2">Win Share</div>
-        <div class="winshare-bar">
-          <div class="seg a" style={`width: ${(shareA * 100).toFixed(2)}%`}></div>
-          <div class="seg t" style={`width: ${(shareT * 100).toFixed(2)}%`}></div>
-          <div class="seg b" style={`width: ${(shareB * 100).toFixed(2)}%`}></div>
-        </div>
-        <div class="mt-2 text-xs text-muted flex gap-3">
-          <span class="badge a"></span> {idShortA} {(shareA * 100).toFixed(1)}%
-          <span class="badge t"></span> Ties {(shareT * 100).toFixed(1)}%
-          <span class="badge b"></span> {idShortB} {(shareB * 100).toFixed(1)}%
-        </div>
-      </div>
-      <div class="card-surface p-4 flex items-center justify-center">
-        <svg viewBox="0 0 120 120" width="160" height="160">
-          <!-- Donut background -->
-          <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="16" />
-          {#if totalComparable > 0}
-            <!-- A -->
-            <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(0,255,204,0.9)" stroke-width="16" stroke-dasharray={`${donutALen} ${donutCircumference - donutALen}`} stroke-dashoffset={0} />
-            <!-- Ties -->
-            <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(200,200,200,0.7)" stroke-width="16" stroke-dasharray={`${donutTLen} ${donutCircumference - donutTLen}`} stroke-dashoffset={-donutALen} />
-            <!-- B -->
-            <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,0,170,0.9)" stroke-width="16" stroke-dasharray={`${donutBLen} ${donutCircumference - donutBLen}`} stroke-dashoffset={-(donutALen + donutTLen)} />
-          {/if}
-          <text x="60" y="64" text-anchor="middle" font-size="14" fill="#9ca3af">{totalComparable} maps</text>
-        </svg>
-      </div>
-    </div>
-
-    <!-- Win Margin Histogram & Cumulative Wins -->
-    <div class="mt-6 grid gap-4 lg:grid-cols-2">
-      <div class="card-surface p-4">
-        <div class="text-sm text-muted mb-2">Win Margin Histogram (A − B, %)</div>
-        <div class="hist">
-          {#each histogram as count, i}
-            <div
-              class="bar"
-              title={`${(histRangeMin + (i + 0.5) * histBinWidth).toFixed(2)}%`}
-              style={`left:${(i / histogram.length) * 100}%; width:${(1 / histogram.length) * 100}%; height:${((count / histMaxCount) * 100).toFixed(1)}%; background:${(histRangeMin + (i + 0.5) * histBinWidth) >= 0 ? 'rgba(0,255,204,0.8)' : 'rgba(255,0,170,0.8)'};`}
-            ></div>
-          {/each}
-          <div class="zero-line"></div>
-        </div>
-        <div class="mt-2 text-xs text-muted">Left (magenta) favors {idShortB}, Right (cyan) favors {idShortA}</div>
-      </div>
-      <div class="card-surface p-4">
-        <div class="text-sm text-muted mb-2">Cumulative Wins Over Time</div>
-        <svg viewBox="0 0 600 140" class="spark">
-          <!-- Axes bg -->
-          <rect x="0" y="0" width="600" height="140" fill="transparent" />
-          {#if cumSeries.length > 1}
-            {#key cumSeries.length}
-              <!-- A line -->
-              <polyline fill="none" stroke="rgba(0,255,204,0.9)" stroke-width="2" points={cumSeries.map(p => `${mapX(p.t, 600)},${mapY(p.a, 120)}`).join(' ')} />
-              <!-- B line -->
-              <polyline fill="none" stroke="rgba(255,0,170,0.9)" stroke-width="2" points={cumSeries.map(p => `${mapX(p.t, 600)},${mapY(p.b, 120)}`).join(' ')} />
-            {/key}
-          {/if}
-        </svg>
-      </div>
-    </div>
-  {/if}
-
-  {#if items.length > 0}
-    <div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-      <div class="text-sm text-muted">
-        {filtered.length} / {items.length} songs
-      </div>
-      <div class="flex items-center gap-4 text-sm text-muted flex-wrap justify-end">
-        <label class="flex items-center gap-3">
-          <span class="filter-label {filterWinMargin !== 'all' ? 'active' : ''}">Options:</span>
-          <select class="neon-select {filterWinMargin !== 'all' ? 'active' : ''}" bind:value={filterWinMargin}>
-            <option value="all">All Songs</option>
-            <option value="1">{idShortA} wins by &gt;1%</option>
-            <option value="2">{idShortA} wins by &gt;2%</option>
-          </select>
-        </label>
-        <label class="flex items-center gap-2">Dir
-          <select class="neon-select" bind:value={sortDir}>
-            <option value="desc">Desc</option>
-            <option value="asc">Asc</option>
-          </select>
-        </label>
-        <label class="flex items-center gap-2">Page size
-          <select class="neon-select" bind:value={pageSize}>
-            <option value={12}>12</option>
-            <option value={24}>24</option>
-            <option value={36}>36</option>
-            <option value={48}>48</option>
-          </select>
-        </label>
-      </div>
-    </div>
-
-    {#if loadingMeta}
-      <div class="mt-2 text-xs text-muted">Loading covers…</div>
-    {/if}
-
-    <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-      {#each pageItems as item}
-        <article class="card-surface overflow-hidden">
-          <div class="aspect-square bg-black/30">
-            {#if metaByHash[item.hash]?.coverURL}
-              <img src={metaByHash[item.hash].coverURL} alt={metaByHash[item.hash]?.songName ?? item.hash} loading="lazy" class="h-full w-full object-cover" />
-            {:else}
-              <div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
-            {/if}
-          </div>
-          <div class="p-3">
-            <div class="font-semibold truncate" title={metaByHash[item.hash]?.songName ?? item.hash}>{metaByHash[item.hash]?.songName ?? item.hash}</div>
-            {#if metaByHash[item.hash]?.mapper}
-              <div class="mt-0.5 text-xs text-muted truncate">{metaByHash[item.hash]?.mapper}</div>
-            {/if}
-            <div class="mt-2 flex items-center justify-between text-[11px]">
-              <span class="rounded bg-white/10 px-2 py-0.5">
-                {item.modeName} · <span class="rounded px-1 ml-1" style="background-color: var(--neon-diff)">{item.diffName}</span>
-              </span>
-              <span class="text-muted">{new Date(item.timeset * 1000).toLocaleDateString()}</span>
-            </div>
-            <div class="mt-3 grid grid-cols-2 gap-3 neon-surface">
-              <div class="player-card playerA {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner' : ''}">
-                <div class="label {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-label' : ''}">{idShortA}</div>
-                <div class="value {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-value' : ''}">{item.accA != null ? item.accA.toFixed(2) + '%' : '—'}</div>
-                <div class="sub">{item.rankA ? `Rank #${item.rankA}` : ''}</div>
-              </div>
-              <div class="player-card playerB {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner' : ''}">
-                <div class="label {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-label' : ''}">{idShortB}</div>
-                <div class="value {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-value' : ''}">{item.accB != null ? item.accB.toFixed(2) + '%' : '—'}</div>
-                <div class="sub">{item.rankB ? `Rank #${item.rankB}` : ''}</div>
-              </div>
-            </div>
-            <div class="mt-2 text-center text-sm">
-              {#if item.accA != null && item.accB != null}
-                {#if item.accA === item.accB}
-                  <span class="chip chip-draw">Tie</span>
-                {:else if item.accA > item.accB}
-                  <span class="chip chip-win-a">Winner: {idShortA}</span>
-                  <span class="ml-2 text-muted margin-text {(item.accA - item.accB) > 1 ? 'margin-bold' : ''} {(item.accA - item.accB) > 2 ? 'margin-bright' : ''}">by {(item.accA - item.accB).toFixed(2)}%</span>
-                {:else}
-                  <span class="chip chip-win-b">Winner: {idShortB}</span>
-                  <span class="ml-2 text-muted margin-text {(item.accB - item.accA) > 1 ? 'margin-bold' : ''} {(item.accB - item.accA) > 2 ? 'margin-bright' : ''}">by {(item.accB - item.accA).toFixed(2)}%</span>
-                {/if}
-              {:else}
-                <span class="chip">Incomplete</span>
-              {/if}
-            </div>
-            <div class="mt-3 flex items-center gap-2">
-              <div class="w-1/2 flex flex-wrap gap-2">
-                <a
-                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
-                  href={item.leaderboardId
-                    ? `https://beatleader.com/leaderboard/global/${item.leaderboardId}`
-                    : `https://beatleader.com/leaderboard/global/${item.hash}?diff=${encodeURIComponent(item.diffName)}&mode=${encodeURIComponent(item.modeName)}`}
-                  target="_blank"
-                  rel="noopener"
-                  title="Open in BeatLeader"
-                  >BL</a
-                >
-                <a
-                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
-                  href={metaByHash[item.hash]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
-                  target="_blank"
-                  rel="noopener"
-                  title="Open in BeatSaver"
-                  >BS</a
-                >
-                <button
-                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
-                  class:lit-up={litButtons.has(`bsr-${item.hash}`)}
-                  on:click={() => { const key = metaByHash[item.hash]?.key; if (key) copyBsrCommand(key, item.hash); }}
-                  disabled={!metaByHash[item.hash]?.key}
-                  title="!bsr"
-                >!bsr</button>
-              </div>
-              <div class="w-1/2">
-                <SongPlayer hash={item.hash} preferBeatLeader={true} />
-              </div>
-            </div>
-          </div>
-        </article>
-      {/each}
-    </div>
-
-    {#if totalPages > 1}
-      <div class="mt-6 flex items-center justify-center gap-2">
-        <button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.max(1, page - 1))} disabled={page === 1}>Prev</button>
-        <span class="text-sm text-muted">Page {page} / {totalPages}</span>
-        <button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.min(totalPages, page + 1))} disabled={page === totalPages}>Next</button>
-      </div>
-    {/if}
-  {/if}
-</section>
-
-<!-- Toast Notification -->
-{#if showToast}
-  <div class="toast-notification" role="status" aria-live="polite">
-    {toastMessage}
-  </div>
-{/if}
-
-<style>
-  .text-danger { color: #dc2626; }
-
-  /* Cyberpunk neon aesthetics */
-  .neon-surface {
-    padding: 16px;
-    border-radius: 12px;
-    background: radial-gradient(1200px 400px at -10% -10%, rgba(0, 255, 204, 0.08), transparent),
-                radial-gradient(1200px 400px at 110% 110%, rgba(255, 0, 170, 0.08), transparent),
-                rgba(12,12,18,0.6);
-    border: 1px solid rgba(255,255,255,0.06);
-    box-shadow: 0 0 20px rgba(0, 255, 204, 0.08), 0 0 30px rgba(255, 0, 170, 0.06) inset;
-  }
-  .player-card {
-    padding: 16px;
-    border-radius: 10px;
-    background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(10,10,18,0.6));
-    border: 1px solid rgba(255,255,255,0.06);
-    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-  }
-  .player-card.playerA { border-color: rgba(0, 255, 204, 0.25); box-shadow: 0 0 12px rgba(0, 255, 204, 0.08) inset; }
-  .player-card.playerB { border-color: rgba(255, 0, 170, 0.5); box-shadow: 0 0 12px rgba(255, 0, 170, 0.15) inset; }
-  .player-card:hover {
-    transform: translateY(-2px);
-  }
-  .player-card .label { color: #9ca3af; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.2s ease; }
-  .player-card .label.winner-label { color: #ff8800; font-weight: 700; text-shadow: 0 0 8px rgba(255, 136, 0, 0.5); }
-  .player-card .value { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; margin-top: 4px; white-space: nowrap; color: #9ca3af; transition: all 0.2s ease; }
-  .player-card .value.winner-value { color: #ffffff; }
-  .player-card .sub { margin-top: 6px; font-size: 12px; color: #9ca3af; }
-  .player-card.playerA.winner {
-    box-shadow: 0 0 0 1px rgba(0, 255, 204, 0.2) inset, 0 0 18px rgba(0, 255, 204, 0.14);
-    border-color: rgba(0, 255, 204, 0.35);
-  }
-  .player-card.playerB.winner {
-    box-shadow: 0 0 0 1px rgba(255, 0, 170, 0.3) inset, 0 0 18px rgba(255, 0, 170, 0.25);
-    border-color: rgba(255, 0, 170, 0.7);
-  }
-  .chip {
-    display: inline-block;
-    border-radius: 9999px;
-    border: 1px solid rgba(255,255,255,0.12);
-    padding: 4px 10px;
-    font-size: 12px;
-    background: rgba(255,255,255,0.04);
-  }
-  .chip-win-a {
-    border-color: rgba(0, 255, 204, 0.5);
-    background: linear-gradient(90deg, rgba(0, 255, 204, 0.18), rgba(0, 255, 170, 0.10));
-  }
-  .chip-win-b {
-    border-color: rgba(255, 0, 170, 0.5);
-    background: linear-gradient(90deg, rgba(255, 0, 170, 0.18), rgba(255, 102, 204, 0.10));
-  }
-  .chip-draw {
-    border-color: rgba(255, 255, 0, 0.5);
-    background: linear-gradient(90deg, rgba(255, 255, 0, 0.14), rgba(255, 215, 0, 0.08));
-  }
-
-  /* Margin text styling */
-  .margin-text.margin-bold { font-weight: 700; }
-  .margin-text.margin-bright { color: #ffffff; }
-
-  /* KPI tiles */
-  .kpi-tile {
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 12px;
-    padding: 12px 14px;
-    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(15,15,25,0.6));
-  }
-  .kpi-tile.a { box-shadow: 0 0 0 1px rgba(0,255,204,0.14) inset; }
-  .kpi-tile.b { box-shadow: 0 0 0 1px rgba(255,0,170,0.14) inset; }
-  .kpi-label { font-size: 12px; color: #9ca3af; letter-spacing: 0.06em; text-transform: uppercase; }
-  .kpi-value { font-size: 28px; font-weight: 800; margin-top: 2px; }
-  .kpi-sublabel { font-size: 11px; color: #9ca3af; }
-  .kpi-subvalue { font-size: 20px; font-weight: 700; margin-top: 2px; }
-
-  /* Win share bar */
-  .winshare-bar {
-    height: 16px;
-    border-radius: 9999px;
-    overflow: hidden;
-    display: flex;
-    background: rgba(255,255,255,0.08);
-  }
-  .winshare-bar .seg { height: 100%; }
-  .winshare-bar .seg.a { background: rgba(0,255,204,0.9); }
-  .winshare-bar .seg.t { background: rgba(200,200,200,0.7); }
-  .winshare-bar .seg.b { background: rgba(255,0,170,0.9); }
-  .badge { display: inline-block; width: 10px; height: 10px; border-radius: 9999px; margin-right: 6px; }
-  .badge.a { background: rgba(0,255,204,0.9); }
-  .badge.t { background: rgba(200,200,200,0.7); }
-  .badge.b { background: rgba(255,0,170,0.9); }
-
-  /* Histogram */
-  .hist { position: relative; height: 120px; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
-  .hist .bar { position: absolute; bottom: 0; }
-  .hist .zero-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.15); }
-
-  /* Sparkline */
-  .spark { width: 100%; height: 140px; }
-
-  /* Filter label styling */
-  .filter-label {
-    font-size: 1em;
-    letter-spacing: 0.05em;
-    font-weight: 700;
-    color: rgba(255, 0, 170, 0.95);
-    text-shadow: 0 0 8px rgba(255, 0, 170, 0.3);
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--font-display);
-    line-height: 1;
-  }
-  .filter-label.active {
-    color: rgba(255, 0, 170, 1);
-    text-shadow: 0 0 12px rgba(255, 0, 170, 0.5);
-  }
-
-  /* Neon select dropdown */
-  .neon-select {
-    border-radius: 0.375rem;
-    border: 1px solid rgba(34, 211, 238, 0.3);
-    background: linear-gradient(180deg, rgba(15,23,42,0.9), rgba(11,15,23,0.95));
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-    color: rgba(148, 163, 184, 1);
-    transition: all 0.2s ease;
-    box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
-    cursor: pointer;
-  }
-  .neon-select.active {
-    border-color: rgba(34, 211, 238, 0.6);
-    color: rgba(255, 255, 255, 1);
-    box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
-  }
-  .neon-select:hover {
-    border-color: rgba(34, 211, 238, 0.5);
-    color: rgba(255, 255, 255, 0.9);
-    box-shadow: 0 0 16px rgba(34, 211, 238, 0.25);
-  }
-  .neon-select:focus {
-    outline: none;
-    border-color: rgba(34, 211, 238, 0.7);
-    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35), 0 0 0 2px rgba(34, 211, 238, 0.1);
-  }
-  .neon-select option {
-    background: #0f172a;
-    color: #fff;
-  }
-
-  /* Toast notification styles */
-  .toast-notification {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    background: #10b981;
-    color: white;
-    padding: 12px 16px;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    font-size: 14px;
-    font-weight: 500;
-    animation: slideIn 0.3s ease-out;
-  }
-  
-  @keyframes slideIn {
-    from {
-      transform: translateX(100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-  
-  /* Button lighting effect */
-  .lit-up {
-    background: linear-gradient(45deg, #10b981, #059669);
-    border-color: #10b981;
-    color: white;
-    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
-    animation: pulse 0.6s ease-out;
-  }
-  
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
-    }
-    70% {
-      box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
-    }
-    100% {
-      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
-    }
-  }
-</style>
-
-

src/routes/tools/beatleader-oauth/+page.svelte

@@ -1,283 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { browser } from '$app/environment';
-
-  let name = '';
-  let clientId = '';
-  let origin = '';
-  let redirectUrls = '';
-  let scopes: string[] = ['scp:profile', 'scp:offline_access'];
-  let iconFile: File | null = null;
-  let message: string | null = null;
-  let created: any = null;
-  let existing: { client_id: string; client_secret: string } | null = null;
-  let manualClientId = '';
-  let manualClientSecret = '';
-  let recommendedClientId = generateDefaultClientId();
-  let copying: string | null = null;
-  let returnTo: string | null = null;
-  let blCredsStatus: 'unknown' | 'configured' | 'missing' = 'unknown';
-  let blManageUrl: string | null = null;
-
-  onMount(async () => {
-    if (browser) {
-      try { origin = location.origin; } catch {}
-      try { redirectUrls = origin + '/auth/beatleader/callback'; } catch {}
-    }
-    try {
-      const sp = new URLSearchParams(location.search);
-      const ret = sp.get('return');
-      if (ret) returnTo = ret;
-    } catch {}
-    try {
-      const redirect = location.pathname + (location.search || '');
-      blManageUrl = `/tools/beatleader-oauth?return=${encodeURIComponent(redirect)}`;
-      const statusRes = await fetch('/api/beatleader/oauth/status');
-      if (statusRes.ok) {
-        const st: any = await statusRes.json();
-        blCredsStatus = st?.hasCreds ? 'configured' : 'missing';
-      } else {
-        blCredsStatus = 'unknown';
-      }
-    } catch {
-      blCredsStatus = 'unknown';
-    }
-    try {
-      const res = await fetch('/api/beatleader/oauth/creds');
-      if (res.ok) {
-        const data: any = await res.json();
-        const hasId = typeof data?.client_id === 'string' && data.client_id.length > 0;
-        const hasSecret = typeof data?.client_secret === 'string' && data.client_secret.length > 0;
-        existing = hasId && hasSecret ? { client_id: data.client_id, client_secret: data.client_secret } : null;
-      } else {
-        existing = null;
-      }
-    } catch {}
-  });
-
-  function onIconChange(ev: Event) {
-    const input = ev.target as HTMLInputElement;
-    const f = input.files?.[0] ?? null;
-    if (!f) {
-      iconFile = null;
-      return;
-    }
-    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
-    if (!validTypes.includes(f.type)) {
-      message = 'Icon must be JPG, PNG, or GIF';
-      iconFile = null;
-      return;
-    }
-    if (f.size > 5 * 1024 * 1024) {
-      message = 'Icon must be under 5MB';
-      iconFile = null;
-      return;
-    }
-    message = null;
-    iconFile = f;
-  }
-
-  async function saveManual(ev: SubmitEvent) {
-    ev.preventDefault();
-    message = null;
-    try {
-      const res = await fetch('/api/beatleader/oauth/creds', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ client_id: manualClientId, client_secret: manualClientSecret })
-      });
-      if (!res.ok) throw new Error(await res.text());
-      existing = { client_id: manualClientId, client_secret: manualClientSecret };
-      manualClientId = '';
-      manualClientSecret = '';
-      message = 'Saved credentials.';
-    } catch (err) {
-      message = err instanceof Error ? err.message : 'Failed to save credentials';
-    }
-  }
-
-  async function register(ev: SubmitEvent) {
-    ev.preventDefault();
-    message = null;
-    created = null;
-    try {
-      // Perform registration directly against BeatLeader using browser cookies (must be logged in on beatleader.com)
-      const url = new URL('https://api.beatleader.com/developer/app');
-      url.searchParams.set('name', name);
-      url.searchParams.set('clientId', clientId || generateClientId());
-      url.searchParams.set('scopes', scopes.join(','));
-      url.searchParams.set('redirectUrls', redirectUrls);
-
-      let blRes: Response;
-      if (iconFile) {
-        const buf = await iconFile.arrayBuffer();
-        blRes = await fetch(url.toString(), {
-          method: 'POST',
-          body: buf,
-          credentials: 'include'
-        });
-      } else {
-        blRes = await fetch(url.toString(), {
-          method: 'POST',
-          credentials: 'include'
-        });
-      }
-
-      if (!blRes.ok) throw new Error(await blRes.text());
-      const data = await blRes.json();
-      created = data;
-
-      const savedClientId = data?.clientId ?? data?.client_id;
-      const savedClientSecret = data?.clientSecret ?? data?.client_secret;
-      if (!savedClientId || !savedClientSecret) throw new Error('BeatLeader response missing credentials');
-
-      // Persist credentials locally
-      const saveRes = await fetch('/api/beatleader/oauth/creds', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ client_id: savedClientId, client_secret: savedClientSecret })
-      });
-      if (!saveRes.ok) throw new Error(await saveRes.text());
-
-      existing = { client_id: savedClientId, client_secret: savedClientSecret };
-      message = 'Registered successfully. Credentials saved.';
-    } catch (err) {
-      const base = err instanceof Error ? err.message : 'Registration failed';
-      message = base || 'Registration failed. Ensure you are logged into BeatLeader in this browser.';
-    }
-  }
-
-  function generateClientId(): string {
-    return 'bl_' + Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
-  }
-
-  function generateDefaultClientId(): string {
-    try {
-      // Prefer uuid for readability; strip dashes
-      const uuid = (crypto?.randomUUID?.() ?? '') as string;
-      if (uuid) return 'bl_' + uuid.replace(/-/g, '');
-    } catch {}
-    return generateClientId();
-  }
-
-  async function copy(text: string, kind: string) {
-    try {
-      copying = kind;
-      await navigator.clipboard.writeText(text);
-    } catch {
-      // ignore
-    } finally {
-      setTimeout(() => (copying = null), 800);
-    }
-  }
-</script>
-
-<section class="py-8">
-  <h1 class="font-display text-3xl sm:text-4xl">BeatLeader OAuth Setup</h1>
-  <p class="mt-2 text-muted">Register an OAuth application and store credentials for this site.</p>
-
-  <div class="mt-2 text-xs text-muted flex flex-wrap items-center gap-2">
-    {#if blCredsStatus === 'unknown'}
-      <span class="rounded bg-white/10 px-2 py-1">Checking BeatLeader access…</span>
-    {:else if blCredsStatus === 'configured'}
-      <span class="rounded bg-emerald-500/20 text-emerald-300 px-2 py-1">BeatLeader access: Connected</span>
-      {#if blManageUrl}
-        <a class="underline hover:text-white" href={blManageUrl}>Manage</a>
-      {/if}
-    {:else}
-      <span class="rounded bg-rose-500/20 text-rose-300 px-2 py-1">BeatLeader access: Not connected</span>
-      {#if blManageUrl}
-        <a class="underline hover:text-white" href={blManageUrl}>Configure</a>
-      {/if}
-    {/if}
-  </div>
-
-  {#if returnTo}
-    <div class="mt-4">
-      <a class="rounded-md border border-white/10 px-3 py-1.5 text-sm hover:border-white/20" href={returnTo}>Return to previous page</a>
-    </div>
-  {/if}
-
-  <div class="mt-6 grid gap-3 max-w-xl text-sm">
-    <div class="text-muted">Manual setup (recommended):</div>
-    <ol class="list-decimal pl-5 grid gap-2">
-      <li>
-        Open the BeatLeader developer portal: 
-        <a class="underline" href="https://beatleader.com/developer" target="_blank" rel="noreferrer">beatleader.com/developer</a>
-      </li>
-      <li>
-        Create a new application using the following values:
-        <div class="mt-2 grid gap-2">
-          <div>
-            <div class="text-muted">Suggested Client ID</div>
-            <div class="flex items-center gap-2">
-              <code>{recommendedClientId}</code>
-              <button type="button" class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20" on:click={() => copy(recommendedClientId, 'clientId')}>
-                {copying === 'clientId' ? 'Copied' : 'Copy'}
-              </button>
-            </div>
-          </div>
-          <div>
-            <div class="text-muted">Redirect URL</div>
-            <div class="flex items-center gap-2">
-              <code>{origin}/auth/beatleader/callback</code>
-              <button type="button" class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20" on:click={() => copy(`${origin}/auth/beatleader/callback`, 'redirect')}>
-                {copying === 'redirect' ? 'Copied' : 'Copy'}
-              </button>
-            </div>
-          </div>
-          <div>
-            <div class="text-muted">Scopes</div>
-            <code>scp:profile{scopes.includes('scp:offline_access') ? ',scp:offline_access' : ''}</code>
-          </div>
-        </div>
-      </li>
-      <li>
-        After creation, copy the shown client secret and paste both values below to save locally.
-      </li>
-    </ol>
-  </div>
-
-  {#if existing}
-    <div class="mt-4 text-sm">
-      <div class="text-muted">Existing credentials found.</div>
-      <div class="mt-1">Client ID: <code>{existing.client_id}</code></div>
-      <div>Client Secret: <code>{existing.client_secret}</code></div>
-    </div>
-  {/if}
-
-  <details class="mt-4">
-    <summary class="cursor-pointer text-sm text-muted">Enter credentials manually</summary>
-    <form class="mt-3 grid gap-3 max-w-xl" on:submit|preventDefault={saveManual}>
-      <div>
-        <label class="block text-sm text-muted" for="mClientId">Client ID</label>
-        <input id="mClientId" class="w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={manualClientId} required />
-      </div>
-      <div>
-        <label class="block text-sm text-muted" for="mClientSecret">Client Secret</label>
-        <input id="mClientSecret" class="w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={manualClientSecret} required />
-      </div>
-      <div>
-        <button class="btn-neon">Save</button>
-      </div>
-    </form>
-  </details>
-
-  
-
-  {#if message}
-    <div class="mt-4 text-sm">{message}</div>
-  {/if}
-
-  {#if created}
-    <div class="mt-6 text-sm">
-      <div><strong>Client ID:</strong> <code>{created.clientId}</code></div>
-      <div><strong>Client Secret:</strong> <code>{created.clientSecret}</code></div>
-      <div class="mt-2">
-          <a class="rounded-md border border-white/10 px-3 py-1.5 text-sm hover:border-white/20" href="/auth/beatleader/login">Proceed to Login</a>
-      </div>
-    </div>
-  {/if}
-</section>
-
-

src/routes/tools/beatleader-playlist-gap/+page.svelte

@@ -1,453 +0,0 @@
-<script lang="ts">
-  import SongPlayer from '$lib/components/SongPlayer.svelte';
-  import { onMount } from 'svelte';
-
-  type Difficulty = {
-    name: string;
-    characteristic: string;
-  };
-
-  type PlaylistSong = {
-    hash: string;
-    difficulties?: Difficulty[];
-    key?: string;
-    levelId?: string;
-    songName?: string;
-  };
-
-  type Playlist = {
-    playlistTitle?: string;
-    songs?: PlaylistSong[];
-    playlistAuthor?: string;
-    image?: string | null;
-    coverImage?: string | null;
-    description?: string;
-    allowDuplicates?: boolean;
-    customData?: Record<string, unknown> | null;
-  };
-
-  type BeatLeaderScore = {
-    leaderboard?: {
-      id?: string | number | null;
-      leaderboardId?: string | number | null;
-      song?: { hash?: string | null };
-    };
-  };
-
-  type BeatLeaderScoresResponse = {
-    data?: BeatLeaderScore[];
-  };
-
-  type MapMeta = {
-    songName?: string;
-    key?: string;
-    coverURL?: string;
-    mapper?: string;
-  };
-
-  let playerId = '';
-  let selectedFileName: string | null = null;
-  let parsedTitle: string | null = null;
-  let playlistSongs: PlaylistSong[] = [];
-
-  let loading = false;
-  let errorMsg: string | null = null;
-
-  let results: PlaylistSong[] = [];
-  let metaByHash: Record<string, MapMeta> = {};
-  let loadingMeta = false;
-  let blUrlByHash: Record<string, string> = {};
-
-  // Persist playerId across refreshes (client-side only)
-  let hasMounted = false;
-  const PLAYER_ID_KEY = 'ps_bl_gap_playerId';
-  const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
-
-  type PersistedPlayerId = {
-    value: string;
-    expiresAt: number;
-  };
-
-  function loadPlayerIdFromStorage(): void {
-    if (typeof localStorage === 'undefined') return;
-    const raw = localStorage.getItem(PLAYER_ID_KEY);
-    if (!raw) return;
-    try {
-      const parsed = JSON.parse(raw) as Partial<PersistedPlayerId> | string;
-      if (typeof parsed === 'string') {
-        playerId = parsed;
-        return;
-      }
-      const expiresAt = typeof parsed?.expiresAt === 'number' ? parsed.expiresAt : 0;
-      if (expiresAt && Date.now() > expiresAt) {
-        localStorage.removeItem(PLAYER_ID_KEY);
-        return;
-      }
-      const value = typeof parsed?.value === 'string' ? parsed.value : '';
-      if (value) playerId = value;
-    } catch {
-      // Backward-compat for plain string values
-      playerId = raw;
-    }
-  }
-  onMount(() => {
-    try {
-      loadPlayerIdFromStorage();
-    } finally {
-      hasMounted = true;
-    }
-  });
-  $: if (hasMounted && typeof localStorage !== 'undefined') {
-    if (playerId && playerId.trim().length > 0) {
-      const record: PersistedPlayerId = { value: playerId, expiresAt: Date.now() + WEEK_MS };
-      localStorage.setItem(PLAYER_ID_KEY, JSON.stringify(record));
-    } else {
-      localStorage.removeItem(PLAYER_ID_KEY);
-    }
-  }
-
-  async function onFileChange(ev: Event) {
-    const input = ev.target as HTMLInputElement;
-    const file = input.files?.[0];
-    if (!file) return;
-    selectedFileName = file.name;
-    errorMsg = null;
-    results = [];
-    playlistSongs = [];
-    parsedTitle = null;
-    try {
-      const text = await file.text();
-      const data = JSON.parse(text) as Playlist;
-      const songs = Array.isArray(data?.songs) ? data.songs : [];
-      const cleaned = songs
-        .filter((s) => s && typeof s.hash === 'string' && s.hash.trim().length > 0)
-        .map((s) => ({
-          hash: s.hash.trim(),
-          difficulties: Array.isArray(s.difficulties) ? s.difficulties : [],
-          key: s.key,
-          levelId: s.levelId,
-          songName: s.songName
-        }));
-      if (cleaned.length === 0) {
-        throw new Error('No valid songs found in playlist.');
-      }
-      playlistSongs = cleaned;
-      parsedTitle = data?.playlistTitle ?? null;
-    } catch (err) {
-      errorMsg = err instanceof Error ? err.message : 'Failed to parse playlist file.';
-    }
-  }
-
-  async function fetchAllScoresAnyTime(player: string, maxPages = 200): Promise<BeatLeaderScore[]> {
-    const pageSize = 100;
-    let page = 1;
-    const all: BeatLeaderScore[] = [];
-    while (page <= maxPages) {
-      const url = `/api/beatleader/player/${encodeURIComponent(player)}?scores=1&count=${pageSize}&page=${page}&sortBy=date&order=desc`;
-      const res = await fetch(url);
-      if (!res.ok) throw new Error(`Failed to fetch scores for ${player}: ${res.status}`);
-      const data = (await res.json()) as BeatLeaderScoresResponse;
-      const batch = data.data ?? [];
-      if (batch.length === 0) break;
-      all.push(...batch);
-      page += 1;
-    }
-    return all;
-  }
-
-  async function fetchBeatSaverMeta(hash: string): Promise<MapMeta | null> {
-    try {
-      const res = await fetch(`https://api.beatsaver.com/maps/hash/${encodeURIComponent(hash)}`);
-      if (!res.ok) throw new Error(String(res.status));
-      const data: any = await res.json();
-      const cover = data?.versions?.[0]?.coverURL ?? `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg`;
-      return {
-        songName: data?.metadata?.songName ?? data?.name ?? undefined,
-        key: data?.id ?? undefined,
-        coverURL: cover,
-        mapper: data?.uploader?.name ?? undefined
-      };
-    } catch {
-      return { coverURL: `https://cdn.beatsaver.com/${hash.toLowerCase()}.jpg` };
-    }
-  }
-
-  async function loadMetaForResults(items: PlaylistSong[]): Promise<void> {
-    const needed = Array.from(new Set(items.map((i) => i.hash.toLowerCase()))).filter((h) => !metaByHash[h]);
-    if (needed.length === 0) return;
-    loadingMeta = true;
-    for (const h of needed) {
-      const meta = await fetchBeatSaverMeta(h);
-      if (meta) metaByHash = { ...metaByHash, [h]: meta };
-    }
-    loadingMeta = false;
-  }
-
-  type BLDifficulty = {
-    modeName?: string;
-    difficultyName?: string;
-    value?: number;
-    ModeName?: string;
-    DifficultyName?: string;
-    Value?: number;
-  };
-  type BLLeaderboardInfo = {
-    id?: string | number | null;
-    Id?: string | number | null;
-    leaderboardId?: string | number | null;
-    LeaderboardId?: string | number | null;
-    difficulty?: BLDifficulty;
-    Difficulty?: BLDifficulty;
-  };
-  type BLLeaderboardsByHashResponse = {
-    leaderboards?: BLLeaderboardInfo[];
-    Leaderboards?: BLLeaderboardInfo[];
-  };
-
-  function normalizeName(name?: string | null): string {
-    return (name ?? '').toString().toLowerCase().replace(/\s+/g, '');
-  }
-  function difficultyRankIndex(diffName?: string | null): number {
-    const order = ['easy', 'normal', 'hard', 'expert', 'expert+', 'expertplus'];
-    const n = normalizeName(diffName).replace('expertplus', 'expert+');
-    const idx = order.indexOf(n);
-    return idx === -1 ? -1 : idx;
-  }
-  function getDifficulty(obj?: BLDifficulty | null): BLDifficulty {
-    const o = obj ?? {} as BLDifficulty;
-    return {
-      modeName: (o.modeName ?? (o as any).ModeName) as string | undefined,
-      difficultyName: (o.difficultyName ?? (o as any).DifficultyName) as string | undefined,
-      value: (o.value ?? (o as any).Value) as number | undefined
-    };
-  }
-  function pickPreferredLeaderboard(lbs: BLLeaderboardInfo[] | null | undefined): BLLeaderboardInfo | null {
-    if (!Array.isArray(lbs) || lbs.length === 0) return null;
-    const getDiff = (lb: BLLeaderboardInfo) => getDifficulty(lb.difficulty ?? (lb as any).Difficulty);
-    const isStandard = (lb: BLLeaderboardInfo) => normalizeName(getDiff(lb)?.modeName) === 'standard';
-    const inStandard = lbs.filter(isStandard);
-    const pool = inStandard.length > 0 ? inStandard : lbs;
-    const expertPlus = pool.find((lb) => {
-      const n = normalizeName(getDiff(lb)?.difficultyName);
-      return n === 'expertplus' || n === 'expert+';
-    });
-    if (expertPlus) return expertPlus;
-    // Fallback to highest difficulty by known order, then by numeric value if available
-    const byKnownOrder = [...pool].sort((a, b) => difficultyRankIndex(getDiff(a)?.difficultyName) - difficultyRankIndex(getDiff(b)?.difficultyName));
-    const bestByOrder = byKnownOrder[byKnownOrder.length - 1];
-    if (bestByOrder && difficultyRankIndex(getDiff(bestByOrder)?.difficultyName) >= 0) return bestByOrder;
-    const byValue = [...pool].sort((a, b) => (getDiff(a)?.value ?? 0) - (getDiff(b)?.value ?? 0));
-    return byValue[byValue.length - 1] ?? pool[0] ?? null;
-  }
-  async function fetchBLLeaderboardsByHash(hash: string): Promise<BLLeaderboardInfo[] | null> {
-    try {
-      const res = await fetch(`/api/beatleader?path=${encodeURIComponent('/leaderboards/hash/' + hash)}`);
-      if (!res.ok) return null;
-      const data = (await res.json()) as BLLeaderboardsByHashResponse | unknown;
-      const leaderboards = (data as any)?.leaderboards ?? (data as any)?.Leaderboards;
-      return Array.isArray(leaderboards) ? (leaderboards as BLLeaderboardInfo[]) : null;
-    } catch {
-      return null;
-    }
-  }
-  function extractLeaderboardId(lb: BLLeaderboardInfo | null): string | null {
-    if (!lb) return null;
-    const anyLb: any = lb as any;
-    const id = anyLb.id ?? anyLb.leaderboardId ?? anyLb.Id ?? anyLb.LeaderboardId;
-    return id != null ? String(id) : null;
-  }
-  function buildBLUrlFromLeaderboard(lb: BLLeaderboardInfo | null, hash: string): string {
-    const id = extractLeaderboardId(lb);
-    if (id && id.length > 0) {
-      return `https://beatleader.com/leaderboard/global/${id}`;
-    }
-    // Fallback: search by hash on the site
-    return `https://beatleader.com/leaderboards?search=${encodeURIComponent(hash)}`;
-  }
-
-  async function openBeatLeader(hash: string): Promise<void> {
-    const key = (hash ?? '').toLowerCase();
-    let url = blUrlByHash[key];
-    if (!url) {
-      const lbs = await fetchBLLeaderboardsByHash(key);
-      const picked = pickPreferredLeaderboard(lbs ?? undefined);
-      url = buildBLUrlFromLeaderboard(picked, hash);
-      blUrlByHash = { ...blUrlByHash, [key]: url };
-    }
-    if (typeof window !== 'undefined' && url) {
-      window.open(url, '_blank', 'noopener');
-    }
-  }
-
-  function downloadPlaylist(): void {
-    const title = `playlist_gap_${playerId || 'player'}`;
-    const payload = {
-      playlistTitle: title,
-      playlistAuthor: 'SaberList Tool',
-      songs: results.map((s) => ({ hash: s.hash, difficulties: s.difficulties ?? [] })),
-      description: `Subset of ${(parsedTitle ?? 'playlist')} that ${playerId} has not played. Generated ${new Date().toISOString()}`,
-      allowDuplicates: false,
-      customData: {}
-    };
-    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${title}.bplist`;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
-  }
-
-  async function onAnalyze(ev: SubmitEvent) {
-    ev.preventDefault();
-    errorMsg = null;
-    results = [];
-    metaByHash = {};
-    if (!playerId.trim()) {
-      errorMsg = 'Please enter a BeatLeader player ID or SteamID64.';
-      return;
-    }
-    if (playlistSongs.length === 0) {
-      errorMsg = 'Please select a valid .bplist file first.';
-      return;
-    }
-    loading = true;
-    try {
-      const scores = await fetchAllScoresAnyTime(playerId.trim(), 150);
-      const playedHashes = new Set<string>();
-      for (const s of scores) {
-        const raw = s.leaderboard?.song?.hash ?? undefined;
-        if (!raw) continue;
-        playedHashes.add(String(raw).toLowerCase());
-      }
-      const unplayed: PlaylistSong[] = [];
-      for (const song of playlistSongs) {
-        const h = song.hash?.toLowerCase?.() ?? '';
-        if (!h) continue;
-        if (!playedHashes.has(h)) {
-          unplayed.push(song);
-        }
-      }
-      results = unplayed;
-      loadMetaForResults(unplayed);
-    } catch (err) {
-      errorMsg = err instanceof Error ? err.message : 'Unknown error';
-    } finally {
-      loading = false;
-    }
-  }
-</script>
-
-<section class="py-8">
-  <h1 class="font-display text-3xl sm:text-4xl">BeatLeader: Playlist Gap</h1>
-  <p class="mt-2 text-muted">Upload a .bplist and enter a player ID to find songs they have not played.</p>
-
-  <form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 items-end" on:submit|preventDefault={onAnalyze}>
-    <div class="sm:col-span-2 lg:col-span-2">
-      <label class="block text-sm text-muted">Playlist file (.bplist)
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" type="file" accept=".bplist,application/json" on:change={onFileChange} />
-      </label>
-      {#if selectedFileName}
-        <div class="mt-1 text-xs text-muted">{selectedFileName}{#if parsedTitle} · title: {parsedTitle}{/if} · {playlistSongs.length} songs</div>
-      {/if}
-    </div>
-    <div>
-      <label class="block text-sm text-muted">Player ID
-        <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerId} placeholder="7656119... or BL ID" required />
-      </label>
-    </div>
-    <div>
-      <button class="btn-neon" disabled={loading}>
-        {#if loading}
-          Loading...
-        {:else}
-          Analyze
-        {/if}
-      </button>
-    </div>
-  </form>
-
-  {#if errorMsg}
-    <div class="mt-4 text-danger">{errorMsg}</div>
-  {/if}
-
-  {#if results.length > 0}
-    <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-      <div class="flex items-center gap-3 text-sm text-muted">
-        <span>{results.length} songs not played</span>
-      </div>
-      <div class="flex items-center gap-3">
-        <button class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
-      </div>
-    </div>
-
-    {#if loadingMeta}
-      <div class="mt-2 text-xs text-muted">Loading covers…</div>
-    {/if}
-
-    <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-      {#each results as item}
-        <article class="card-surface overflow-hidden">
-          <div class="aspect-square bg-black/30">
-            {#if metaByHash[item.hash?.toLowerCase?.() || '']?.coverURL}
-              <img
-                src={metaByHash[item.hash.toLowerCase()].coverURL}
-                alt={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
-                loading="lazy"
-                class="h-full w-full object-cover"
-              />
-            {:else}
-              <div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
-            {/if}
-          </div>
-          <div class="p-3">
-            <div class="font-semibold truncate" title={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}>
-              {metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
-            </div>
-            {#if metaByHash[item.hash.toLowerCase()]?.mapper}
-              <div class="mt-0.5 text-xs text-muted truncate">{metaByHash[item.hash.toLowerCase()]?.mapper}</div>
-            {/if}
-            <div class="mt-3">
-              <SongPlayer hash={item.hash} preferBeatLeader={true} />
-            </div>
-            <div class="mt-3 flex flex-wrap gap-2">
-              <a
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
-                href={blUrlByHash[item.hash.toLowerCase()] ?? undefined}
-                on:click|preventDefault={() => openBeatLeader(item.hash)}
-                on:auxclick|preventDefault={() => openBeatLeader(item.hash)}
-                target="_blank"
-                rel="noopener"
-                title="Open in BeatLeader"
-              >BL</a>
-              <a
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
-                href={metaByHash[item.hash.toLowerCase()]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash.toLowerCase()]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
-                target="_blank"
-                rel="noopener"
-                title="Open in BeatSaver"
-              >BSR</a>
-              <button
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
-                on:click={() => { const key = metaByHash[item.hash.toLowerCase()]?.key; if (key) navigator.clipboard.writeText(`!bsr ${key}`); }}
-                disabled={!metaByHash[item.hash.toLowerCase()]?.key}
-                title="Copy !bsr"
-              >Copy !bsr</button>
-            </div>
-          </div>
-        </article>
-      {/each}
-    </div>
-  {/if}
-</section>
-
-<style>
-  .text-danger { color: #dc2626; }
-  .btn-neon { cursor: pointer; }
-  .card-surface { border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
-  .text-muted { color: rgba(255,255,255,0.7); }
-</style>
-
-

src/routes/tools/compare-histories/+page.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+  import MapCard from '$lib/components/MapCard.svelte';
+  import PlayerCompareForm from '$lib/components/PlayerCompareForm.svelte';
+  import HasToolAccess from '$lib/components/HasToolAccess.svelte';
+  import {
+    type MapMeta,
+    type StarInfo,
+    type BeatLeaderScore,
+    type Difficulty,
+    type BeatLeaderPlayerProfile,
+    loadMetaForHashes,
+    loadStarsForHashes,
+    normalizeDifficultyName,
+    parseTimeset,
+    getCutoffEpochFromMonths,
+    toPlaylistJson,
+    downloadPlaylist,
+    fetchAllRecentScoresForDiff,
+    TOOL_REQUIREMENTS
+  } from '$lib/utils/plebsaber-utils';
+
+  type SongItem = {
+    hash: string;
+    difficulties: Difficulty[];
+    timeset: number;
+    leaderboardId?: string;
+  };
+
+  export let data: { player: BeatLeaderPlayerProfile | null; adminRank: number | null; adminPlayer: BeatLeaderPlayerProfile | null };
+
+  const requirement = TOOL_REQUIREMENTS['compare-histories'];
+
+  $: playerProfile = data?.player ?? null;
+  $: adminRank = data?.adminRank ?? null;
+  $: adminPlayer = data?.adminPlayer ?? null;
+
+  let playerA = '';
+  let playerB = '';
+  let loading = false;
+  let errorMsg: string | null = null;
+  let results: SongItem[] = [];
+  let loadingMeta = false;
+
+  // Sorting and pagination state
+  let sortDir: 'asc' | 'desc' = 'desc';
+  let page = 1;
+  let pageSize: number | string = 24;
+  $: pageSizeNum = Number(pageSize) || 24;
+
+  // Configurable lookback windows (months)
+  const monthsA = 24; // default 24 months
+  const monthsB = 24; // default 24 months
+
+  // Derived lists - always sort by date
+  $: sortedResults = [...results].sort((a, b) => {
+    const cmp = a.timeset - b.timeset;
+    return sortDir === 'asc' ? cmp : -cmp;
+  });
+  $: totalPages = Math.max(1, Math.ceil(sortedResults.length / pageSizeNum));
+  $: page = Math.min(page, totalPages);
+  $: pageItems = sortedResults.slice((page - 1) * pageSizeNum, (page - 1) * pageSizeNum + pageSizeNum);
+
+  // Metadata caches
+  let metaByHash: Record<string, MapMeta> = {};
+  let starsByKey: Record<string, StarInfo> = {};
+  let loadingStars = false;
+
+  // Lazy load metadata when pageItems changes
+  $: if (pageItems.length > 0) {
+    loadPageMetadata(pageItems);
+  }
+
+  async function loadPageMetadata(items: SongItem[]): Promise<void> {
+    const hashes = items.map(i => i.hash);
+    
+    // Load BeatSaver metadata
+    loadingMeta = true;
+    metaByHash = await loadMetaForHashes(hashes, metaByHash);
+    loadingMeta = false;
+    
+    // Load star ratings
+    loadingStars = true;
+    starsByKey = await loadStarsForHashes(hashes, starsByKey, normalizeDifficultyName);
+    loadingStars = false;
+  }
+
+  
+
+  function handleDownloadPlaylist(): void {
+    const payload = toPlaylistJson(
+      results,
+      'beatleader_compare_players',
+      `A's recent songs not played by B. Generated ${new Date().toISOString()}`
+    );
+    downloadPlaylist(payload);
+  }
+
+  async function onCompare() {
+    errorMsg = null;
+    results = [];
+    const a = playerA.trim();
+    const b = playerB.trim();
+    if (!a || !b) {
+      errorMsg = 'Please enter both Player A and Player B IDs.';
+      return;
+    }
+
+    loading = true;
+    try {
+      const cutoff = getCutoffEpochFromMonths(monthsA);
+      const cutoffB = getCutoffEpochFromMonths(monthsB);
+      const [aScores, bScores] = await Promise.all([
+        fetchAllRecentScoresForDiff(a, cutoff, 'ExpertPlus', 15),
+        fetchAllRecentScoresForDiff(b, cutoffB, 'ExpertPlus', 100)
+      ]);
+
+      const bLeaderboardIds = new Set<string>();
+      const bExpertPlusKeys = new Set<string>(); // `${hashLower}|ExpertPlus|${modeName}`
+      for (const s of bScores) {
+        const rawHash = s.leaderboard?.song?.hash ?? undefined;
+        const hashLower = rawHash ? String(rawHash).toLowerCase() : undefined;
+        const lbIdRaw = (s.leaderboard as any)?.id ?? (s.leaderboard as any)?.leaderboardId;
+        const lbId = lbIdRaw != null ? String(lbIdRaw) : undefined;
+        const bDiffValue = s.leaderboard?.difficulty?.value ?? undefined;
+        const bModeName = s.leaderboard?.difficulty?.modeName ?? 'Standard';
+        const bDiffName = normalizeDifficultyName(bDiffValue);
+        if (bDiffName !== 'ExpertPlus') continue; // ignore non-ExpertPlus for B
+        if (lbId) bLeaderboardIds.add(lbId);
+        if (hashLower) bExpertPlusKeys.add(`${hashLower}|ExpertPlus|${bModeName}`);
+      }
+
+      
+      const runSeen = new Set<string>(); // avoid duplicates within this run
+
+      const candidates: SongItem[] = [];
+      for (const entry of aScores) {
+        const t = parseTimeset(entry.timeset);
+        if (!t || t < cutoff) continue;
+
+        const rawHash = entry.leaderboard?.song?.hash ?? undefined;
+        const diffValue = entry.leaderboard?.difficulty?.value ?? undefined;
+        const modeName = entry.leaderboard?.difficulty?.modeName ?? 'Standard';
+        const leaderboardIdRaw = (entry.leaderboard as any)?.id ?? (entry.leaderboard as any)?.leaderboardId;
+        const leaderboardId = leaderboardIdRaw != null ? String(leaderboardIdRaw) : undefined;
+        if (!rawHash) continue;
+        const hashLower = String(rawHash).toLowerCase();
+        const diffName = normalizeDifficultyName(diffValue);
+        if (diffName !== 'ExpertPlus') continue; // Only compare ExpertPlus for A
+        // B has played ExpertPlus of same map+mode if matching leaderboard or key exists
+        if ((leaderboardId && bLeaderboardIds.has(leaderboardId)) || bExpertPlusKeys.has(`${hashLower}|${diffName}|${modeName}`)) continue;
+        
+
+        const key = `${rawHash}|${diffName}|${modeName}`;
+        if (runSeen.has(key)) continue;
+        runSeen.add(key);
+
+        candidates.push({
+          hash: rawHash,
+          difficulties: [{ name: diffName, characteristic: modeName ?? 'Standard' }],
+          timeset: t,
+          leaderboardId
+        });
+      }
+
+      candidates.sort((x, y) => y.timeset - x.timeset);
+      const limited = candidates; // return all; pagination handled client-side
+
+      results = limited;
+      page = 1;
+      // Metadata will be loaded lazily via reactive statement when pageItems changes
+    } catch (err) {
+      errorMsg = err instanceof Error ? err.message : 'Unknown error';
+    } finally {
+      loading = false;
+    }
+  }
+
+</script>
+
+<section class="py-8">
+  <h1 class="font-display text-3xl sm:text-4xl">Compare Play Histories</h1>
+  <p class="mt-2 text-muted">Maps Player A has played that Player B hasn't — configurable lookback.</p>
+ 
+  <HasToolAccess player={playerProfile} requirement={requirement} {adminRank} adminPlayer={adminPlayer}>
+    <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={results.length > 0} oncompare={onCompare} currentPlayer={playerProfile}>
+      <svelte:fragment slot="extra-buttons">
+        {#if results.length > 0}
+          <button type="button" class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={handleDownloadPlaylist}>Download .bplist</button>
+        {/if}
+      </svelte:fragment>
+    </PlayerCompareForm>
+
+    {#if errorMsg}
+      <div class="mt-4 text-danger">{errorMsg}</div>
+    {/if}
+
+    {#if results.length > 0}
+      <div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div class="text-sm text-muted">
+          {results.length} songs
+        </div>
+        <div class="flex items-center gap-4 text-sm text-muted flex-wrap justify-end">
+          <label class="flex items-center gap-2">
+            <select class="neon-select" bind:value={sortDir}>
+              <option value="desc">Newest First</option>
+              <option value="asc">Oldest First</option>
+            </select>
+          </label>
+          <label class="flex items-center gap-2">Page size
+            <select class="neon-select" bind:value={pageSize}>
+              <option value={12}>12</option>
+              <option value={24}>24</option>
+              <option value={36}>36</option>
+              <option value={48}>48</option>
+            </select>
+          </label>
+        </div>
+      </div>
+
+      {#if loadingMeta}
+        <div class="mt-2 text-xs text-muted">Loading covers…</div>
+      {/if}
+      {#if loadingStars}
+        <div class="mt-2 text-xs text-muted">Loading star ratings…</div>
+      {/if}
+
+      <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {#each pageItems as item}
+          <article class="card-surface overflow-hidden">
+            <MapCard
+              hash={item.hash}
+              coverURL={metaByHash[item.hash]?.coverURL}
+              songName={metaByHash[item.hash]?.songName}
+              mapper={metaByHash[item.hash]?.mapper}
+              stars={starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars}
+              timeset={item.timeset}
+              diffName={item.difficulties[0]?.name ?? 'ExpertPlus'}
+              modeName={item.difficulties[0]?.characteristic ?? 'Standard'}
+              leaderboardId={item.leaderboardId}
+              beatsaverKey={metaByHash[item.hash]?.key}
+            />
+          </article>
+        {/each}
+      </div>
+
+      {#if totalPages > 1}
+        <div class="mt-6 flex items-center justify-center gap-2">
+          <button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.max(1, page - 1))} disabled={page === 1}>
+            Prev
+          </button>
+          <span class="text-sm text-muted">Page {page} / {totalPages}</span>
+          <button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.min(totalPages, page + 1))} disabled={page === totalPages}>
+            Next
+          </button>
+        </div>
+      {/if}
+    {/if}
+  </HasToolAccess>
+</section>
+
+<style>
+  .text-danger { color: #dc2626; }
+
+  /* Neon select dropdown */
+  .neon-select {
+    border-radius: 0.375rem;
+    border: 1px solid rgba(34, 211, 238, 0.3);
+    background: linear-gradient(180deg, rgba(15,23,42,0.9), rgba(11,15,23,0.95));
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    color: rgba(148, 163, 184, 1);
+    transition: all 0.2s ease;
+    box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
+    cursor: pointer;
+  }
+  .neon-select:hover {
+    border-color: rgba(34, 211, 238, 0.5);
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 16px rgba(34, 211, 238, 0.25);
+  }
+  .neon-select:focus {
+    outline: none;
+    border-color: rgba(34, 211, 238, 0.7);
+    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35), 0 0 0 2px rgba(34, 211, 238, 0.1);
+  }
+  .neon-select option {
+    background: #0f172a;
+    color: #fff;
+  }
+
+</style>
+
+

src/routes/tools/player-headtohead/+page.svelte

@@ -0,0 +1,701 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import MapCard from '$lib/components/MapCard.svelte';
+  import PlayerCompareForm from '$lib/components/PlayerCompareForm.svelte';
+  import HasToolAccess from '$lib/components/HasToolAccess.svelte';
+  import {
+    type MapMeta,
+    type StarInfo,
+    type BeatLeaderScore,
+    type BeatLeaderScoresResponse,
+    loadMetaForHashes,
+    loadStarsForHashes,
+    normalizeDifficultyName,
+    parseTimeset,
+    getCutoffEpochFromMonths,
+    normalizeAccuracy,
+    buildLatestByKey,
+    fetchAllRecentScoresForDiff,
+    fetchAllRecentScoresAllDiffs,
+    mean,
+    median,
+    percentile,
+    DIFFICULTIES,
+    MODES,
+    ONE_YEAR_SECONDS,
+    TOOL_REQUIREMENTS,
+    type BeatLeaderPlayerProfile
+  } from '$lib/utils/plebsaber-utils';
+
+  type H2HItem = {
+    hash: string;
+    diffName: string;
+    modeName: string;
+    timeset: number; // most recent between the two
+    accA: number | null;
+    accB: number | null;
+    rankA?: number;
+    rankB?: number;
+    leaderboardId?: string;
+  };
+
+  export let data: { player: BeatLeaderPlayerProfile | null; adminRank: number | null; adminPlayer: BeatLeaderPlayerProfile | null };
+
+  const requirement = TOOL_REQUIREMENTS['player-headtohead'];
+
+  $: playerProfile = data?.player ?? null;
+  $: adminRank = data?.adminRank ?? null;
+  $: adminPlayer = data?.adminPlayer ?? null;
+
+  let playerA = '';
+  let playerB = '';
+  const months = 24;
+
+  // UI state
+  let loading = false;
+  let errorMsg: string | null = null;
+
+  // Results state
+  let items: H2HItem[] = [];
+  let sortDir: 'asc' | 'desc' = 'desc';
+  let page = 1;
+  let pageSize: number | string = 24;
+  let filterWinMargin: string = 'all'; // 'all', 'a1', 'a2', 'b1', 'b2'
+  $: pageSizeNum = Number(pageSize) || 24;
+  $: filtered = (() => {
+    if (filterWinMargin === 'all') return items;
+    if (filterWinMargin === 'a1') {
+      return items.filter(i => {
+        if (i.accA == null || i.accB == null) return false;
+        return i.accA > i.accB && (i.accA - i.accB) > 1;
+      });
+    }
+    if (filterWinMargin === 'a2') {
+      return items.filter(i => {
+        if (i.accA == null || i.accB == null) return false;
+        return i.accA > i.accB && (i.accA - i.accB) > 2;
+      });
+    }
+    if (filterWinMargin === 'b1') {
+      return items.filter(i => {
+        if (i.accA == null || i.accB == null) return false;
+        return i.accB > i.accA && (i.accB - i.accA) > 1;
+      });
+    }
+    if (filterWinMargin === 'b2') {
+      return items.filter(i => {
+        if (i.accA == null || i.accB == null) return false;
+        return i.accB > i.accA && (i.accB - i.accA) > 2;
+      });
+    }
+    return items;
+  })();
+  $: sorted = [...filtered].sort((a, b) => (sortDir === 'asc' ? a.timeset - b.timeset : b.timeset - a.timeset));
+  $: totalPages = Math.max(1, Math.ceil(sorted.length / pageSizeNum));
+  $: page = Math.min(page, totalPages);
+  $: pageItems = sorted.slice((page - 1) * pageSizeNum, (page - 1) * pageSizeNum + pageSizeNum);
+
+  // Metadata caches
+  let metaByHash: Record<string, MapMeta> = {};
+  let starsByKey: Record<string, StarInfo> = {};
+  let loadingMeta = false;
+  let loadingStars = false;
+
+  // Lazy load metadata when pageItems changes
+  $: if (pageItems.length > 0) {
+    loadPageMetadata(pageItems);
+  }
+
+  async function loadPageMetadata(list: H2HItem[]): Promise<void> {
+    const hashes = list.map(i => i.hash);
+    
+    // Load BeatSaver metadata
+    loadingMeta = true;
+    metaByHash = await loadMetaForHashes(hashes, metaByHash);
+    loadingMeta = false;
+    
+    // Load star ratings
+    loadingStars = true;
+    starsByKey = await loadStarsForHashes(hashes, starsByKey, normalizeDifficultyName);
+    loadingStars = false;
+  }
+
+  function toH2HItems(aMap: Map<string, BeatLeaderScore>, bMap: Map<string, BeatLeaderScore>): H2HItem[] {
+    const out: H2HItem[] = [];
+    for (const [key, aScore] of aMap) {
+      if (!bMap.has(key)) continue;
+      const bScore = bMap.get(key)!;
+      const [hashLower, diffName, modeName] = key.split('|');
+      const rawHash = (aScore.leaderboard?.song?.hash ?? bScore.leaderboard?.song?.hash ?? hashLower);
+      const hash = String(rawHash).toLowerCase();
+      const tA = parseTimeset(aScore.timeset);
+      const tB = parseTimeset(bScore.timeset);
+      const accA = normalizeAccuracy((aScore.accuracy ?? aScore.acc) as number | undefined);
+      const accB = normalizeAccuracy((bScore.accuracy ?? bScore.acc) as number | undefined);
+      const lbIdRaw = (aScore.leaderboard as any)?.id ?? (aScore.leaderboard as any)?.leaderboardId ?? (bScore.leaderboard as any)?.id ?? (bScore.leaderboard as any)?.leaderboardId;
+      const leaderboardId = lbIdRaw != null ? String(lbIdRaw) : undefined;
+      out.push({
+        hash,
+        diffName,
+        modeName,
+        timeset: Math.max(tA, tB),
+        accA,
+        accB,
+        rankA: aScore.rank,
+        rankB: bScore.rank,
+        leaderboardId
+      });
+    }
+    return out;
+  }
+
+  async function onCompare() {
+    // Push current params into URL on user action
+    updateUrl(false);
+    errorMsg = null; items = []; metaByHash = {};
+    const a = playerA.trim();
+    const b = playerB.trim();
+    if (!a || !b) { errorMsg = 'Please enter both Player A and Player B IDs.'; return; }
+    loading = true;
+    try {
+      const cutoff = getCutoffEpochFromMonths(months);
+      const [aScores, bScores] = await Promise.all([
+        fetchAllRecentScoresAllDiffs(a, cutoff, normalizeDifficultyName, parseTimeset),
+        fetchAllRecentScoresAllDiffs(b, cutoff, normalizeDifficultyName, parseTimeset)
+      ]);
+      const aLatest = buildLatestByKey(aScores, cutoff - ONE_YEAR_SECONDS, normalizeDifficultyName, parseTimeset);
+      const bLatest = buildLatestByKey(bScores, cutoff - ONE_YEAR_SECONDS, normalizeDifficultyName, parseTimeset);
+      const combined = toH2HItems(aLatest, bLatest);
+      combined.sort((x, y) => y.timeset - x.timeset);
+      items = combined;
+      page = 1;
+      // Metadata will be loaded lazily via reactive statement when pageItems changes
+    } catch (err) {
+      errorMsg = err instanceof Error ? err.message : 'Unknown error';
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(() => {
+    const sp = new URLSearchParams(location.search);
+    const p = sp.get('page');
+    if (p) page = Math.max(1, Number(p) || 1);
+    const dir = sp.get('dir');
+    if (dir === 'asc' || dir === 'desc') sortDir = dir;
+    const size = sp.get('size') ?? sp.get('ps');
+    if (size) pageSize = Number(size) || pageSize;
+    const filter = sp.get('filter');
+    if (filter && ['all', 'a1', 'a2', 'b1', 'b2'].includes(filter)) filterWinMargin = filter;
+    initialized = true;
+  });
+
+  // Short labels for players
+  $: playerAId = playerA.trim();
+  $: playerBId = playerB.trim();
+  $: idShortA = playerAId ? playerAId.slice(0, 6) : 'A';
+  $: idShortB = playerBId ? playerBId.slice(0, 6) : 'B';
+
+  // URL param sync
+  let initialized = false;
+  let urlSyncInProgress = false;
+  function updateUrl(replace = true) {
+    if (!initialized || urlSyncInProgress) return;
+    try {
+      urlSyncInProgress = true;
+      const sp = new URLSearchParams(location.search);
+      // playerA and playerB are now handled by PlayerCompareForm component
+      sp.delete('diff');
+      sp.delete('mode');
+      sp.delete('months');
+      if (page > 1) sp.set('page', String(page)); else sp.delete('page');
+      if (sortDir !== 'desc') sp.set('dir', sortDir); else sp.delete('dir');
+      if (pageSizeNum !== 24) sp.set('size', String(pageSizeNum)); else sp.delete('size');
+      if (filterWinMargin !== 'all') sp.set('filter', filterWinMargin); else sp.delete('filter');
+      const qs = sp.toString();
+      const url = location.pathname + (qs ? `?${qs}` : '');
+      if (replace) history.replaceState(null, '', url); else history.pushState(null, '', url);
+    } finally {
+      urlSyncInProgress = false;
+    }
+  }
+
+  // Sync URL on state changes
+  $: updateUrl(true);
+
+  // ===== Derived Stats for Visualizations =====
+  $: comparable = items.filter((i) => i.accA != null && i.accB != null) as Array<{
+    hash: string; diffName: string; modeName: string; timeset: number; accA: number; accB: number; rankA?: number; rankB?: number; leaderboardId?: string;
+  }>;
+  $: totalComparable = comparable.length;
+  $: winsA = comparable.filter((i) => i.accA > i.accB).length;
+  $: winsB = comparable.filter((i) => i.accB > i.accA).length;
+  $: ties = comparable.filter((i) => i.accA === i.accB).length;
+
+  $: accAList = comparable.map((i) => i.accA);
+  $: accBList = comparable.map((i) => i.accB);
+  $: avgAccA = mean(accAList);
+  $: avgAccB = mean(accBList);
+  $: medAccA = median(accAList);
+  $: medAccB = median(accBList);
+
+  $: deltas = comparable.map((i) => i.accA - i.accB);
+  $: absMargins = deltas.map((x) => Math.abs(x));
+  $: avgMargin = mean(absMargins);
+  $: p95Margin = percentile(absMargins, 95);
+
+  $: chronological = [...comparable].sort((a, b) => a.timeset - b.timeset);
+  $: longestA = (() => {
+    let cur = 0, best = 0;
+    for (const i of chronological) {
+      if (i.accA > i.accB) { cur += 1; best = Math.max(best, cur); } else if (i.accA === i.accB) { cur = 0; } else { cur = 0; }
+    }
+    return best;
+  })();
+  $: longestB = (() => {
+    let cur = 0, best = 0;
+    for (const i of chronological) {
+      if (i.accB > i.accA) { cur += 1; best = Math.max(best, cur); } else if (i.accA === i.accB) { cur = 0; } else { cur = 0; }
+    }
+    return best;
+  })();
+
+  // Win share (bar + donut)
+  $: shareA = totalComparable ? winsA / totalComparable : 0;
+  $: shareT = totalComparable ? ties / totalComparable : 0;
+  $: shareB = totalComparable ? winsB / totalComparable : 0;
+  // Donut chart calculations
+  const donutR = 44;
+  $: donutCircumference = 2 * Math.PI * donutR;
+  $: donutALen = donutCircumference * shareA;
+  $: donutTLen = donutCircumference * shareT;
+  $: donutBLen = donutCircumference * shareB;
+
+  // Histogram of signed margins (A - B)
+  $: maxAbsDelta = Math.max(0, ...deltas.map((x) => Math.abs(x)));
+  $: histBins = 14;
+  $: histRangeMin = -maxAbsDelta;
+  $: histRangeMax = maxAbsDelta;
+  $: histBinWidth = histBins ? (histRangeMax - histRangeMin) / histBins : 1;
+  $: histogram = (() => {
+    const bins = Array.from({ length: histBins }, () => 0);
+    for (const x of deltas) {
+      if (!Number.isFinite(x)) continue;
+      let idx = Math.floor((x - histRangeMin) / histBinWidth);
+      if (idx < 0) idx = 0; if (idx >= histBins) idx = histBins - 1;
+      bins[idx] += 1;
+    }
+    return bins;
+  })();
+  $: histMaxCount = Math.max(1, ...histogram);
+
+  // Cumulative wins over time sparkline
+  $: cumSeries = (() => {
+    const pts: { t: number; a: number; b: number }[] = [];
+    let a = 0, b = 0;
+    for (const i of chronological) {
+      if (i.accA > i.accB) a += 1; else if (i.accB > i.accA) b += 1;
+      pts.push({ t: i.timeset, a, b });
+    }
+    return pts;
+  })();
+  $: tMin = cumSeries.length ? cumSeries[0].t : 0;
+  $: tMax = cumSeries.length ? cumSeries[cumSeries.length - 1].t : 1;
+  function mapX(t: number, w: number): number {
+    if (tMax === tMin) return 0;
+    return ((t - tMin) / (tMax - tMin)) * w;
+  }
+  function mapY(v: number, h: number, vMax?: number): number {
+    const maxV = vMax ?? Math.max(1, cumSeries.length ? Math.max(cumSeries[cumSeries.length - 1].a, cumSeries[cumSeries.length - 1].b) : 1);
+    return h - (v / maxV) * h;
+  }
+</script>
+
+<section class="py-8">
+  <h1 class="font-display text-3xl sm:text-4xl">Player Head-to-Head</h1>
+  <p class="mt-2 text-muted">Paginated head-to-head results on the same map and difficulty.</p>
+
+  <HasToolAccess player={playerProfile} requirement={requirement} {adminRank} adminPlayer={adminPlayer}>
+    <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={items.length > 0} oncompare={onCompare} currentPlayer={playerProfile} />
+
+    {#if errorMsg}
+      <div class="mt-4 text-danger">{errorMsg}</div>
+    {/if}
+
+    {#if items.length > 0}
+      <!-- KPI Tiles -->
+      <div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <div class="kpi-tile">
+          <div class="kpi-label">Shared Maps</div>
+          <div class="kpi-value">{totalComparable}</div>
+        </div>
+        <div class="kpi-tile a">
+          <div class="kpi-label">Wins {idShortA}</div>
+          <div class="kpi-value">{winsA}</div>
+        </div>
+        <div class="kpi-tile b">
+          <div class="kpi-label">Wins {idShortB}</div>
+          <div class="kpi-value">{winsB}</div>
+        </div>
+        <div class="kpi-tile">
+          <div class="kpi-label">Ties</div>
+          <div class="kpi-value">{ties}</div>
+        </div>
+      </div>
+      <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <div class="kpi-tile a">
+          <div class="kpi-sublabel">Avg Acc {idShortA}</div>
+          <div class="kpi-subvalue">{avgAccA.toFixed(2)}%</div>
+        </div>
+        <div class="kpi-tile b">
+          <div class="kpi-sublabel">Avg Acc {idShortB}</div>
+          <div class="kpi-subvalue">{avgAccB.toFixed(2)}%</div>
+        </div>
+        <div class="kpi-tile a">
+          <div class="kpi-sublabel">Median {idShortA}</div>
+          <div class="kpi-subvalue">{medAccA.toFixed(2)}%</div>
+        </div>
+        <div class="kpi-tile b">
+          <div class="kpi-sublabel">Median {idShortB}</div>
+          <div class="kpi-subvalue">{medAccB.toFixed(2)}%</div>
+        </div>
+      </div>
+      <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <div class="kpi-tile">
+          <div class="kpi-sublabel">Avg Win Margin</div>
+          <div class="kpi-subvalue">{avgMargin.toFixed(2)}%</div>
+        </div>
+        <div class="kpi-tile">
+          <div class="kpi-sublabel">95th %ile Margin</div>
+          <div class="kpi-subvalue">{p95Margin.toFixed(2)}%</div>
+        </div>
+        <div class="kpi-tile a">
+          <div class="kpi-sublabel">Longest Streak {idShortA}</div>
+          <div class="kpi-subvalue">{longestA}</div>
+        </div>
+        <div class="kpi-tile b">
+          <div class="kpi-sublabel">Longest Streak {idShortB}</div>
+          <div class="kpi-subvalue">{longestB}</div>
+        </div>
+      </div>
+
+      <!-- Win Share: Bar + Donut -->
+      <div class="mt-6 grid gap-4 lg:grid-cols-2">
+        <div class="card-surface p-4">
+          <div class="text-sm text-muted mb-2">Win Share</div>
+          <div class="winshare-bar">
+            <div class="seg a" style={`width: ${(shareA * 100).toFixed(2)}%`}></div>
+            <div class="seg t" style={`width: ${(shareT * 100).toFixed(2)}%`}></div>
+            <div class="seg b" style={`width: ${(shareB * 100).toFixed(2)}%`}></div>
+          </div>
+          <div class="mt-2 text-xs text-muted flex gap-3">
+            <span class="badge a"></span> {idShortA} {(shareA * 100).toFixed(1)}%
+            <span class="badge t"></span> Ties {(shareT * 100).toFixed(1)}%
+            <span class="badge b"></span> {idShortB} {(shareB * 100).toFixed(1)}%
+          </div>
+        </div>
+        <div class="card-surface p-4 flex items-center justify-center">
+          <svg viewBox="0 0 120 120" width="160" height="160">
+            <!-- Donut background -->
+            <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="16" />
+            {#if totalComparable > 0}
+              <!-- A -->
+              <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(0,255,204,0.9)" stroke-width="16" stroke-dasharray={`${donutALen} ${donutCircumference - donutALen}`} stroke-dashoffset={0} />
+              <!-- Ties -->
+              <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(200,200,200,0.7)" stroke-width="16" stroke-dasharray={`${donutTLen} ${donutCircumference - donutTLen}`} stroke-dashoffset={-donutALen} />
+              <!-- B -->
+              <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,0,170,0.9)" stroke-width="16" stroke-dasharray={`${donutBLen} ${donutCircumference - donutBLen}`} stroke-dashoffset={-(donutALen + donutTLen)} />
+            {/if}
+            <text x="60" y="64" text-anchor="middle" font-size="14" fill="#9ca3af">{totalComparable} maps</text>
+          </svg>
+        </div>
+      </div>
+
+      <!-- Win Margin Histogram & Cumulative Wins -->
+      <div class="mt-6 grid gap-4 lg:grid-cols-2">
+        <div class="card-surface p-4">
+          <div class="text-sm text-muted mb-2">Win Margin Histogram (A − B, %)</div>
+          <div class="hist">
+            {#each histogram as count, i}
+              <div
+                class="bar"
+                title={`${(histRangeMin + (i + 0.5) * histBinWidth).toFixed(2)}%`}
+                style={`left:${(i / histogram.length) * 100}%; width:${(1 / histogram.length) * 100}%; height:${((count / histMaxCount) * 100).toFixed(1)}%; background:${(histRangeMin + (i + 0.5) * histBinWidth) >= 0 ? 'rgba(0,255,204,0.8)' : 'rgba(255,0,170,0.8)'};`}
+              ></div>
+            {/each}
+            <div class="zero-line"></div>
+          </div>
+          <div class="mt-2 text-xs text-muted">Left (magenta) favors {idShortB}, Right (cyan) favors {idShortA}</div>
+        </div>
+        <div class="card-surface p-4">
+          <div class="text-sm text-muted mb-2">Cumulative Wins Over Time</div>
+          <svg viewBox="0 0 600 140" class="spark">
+            <!-- Axes bg -->
+            <rect x="0" y="0" width="600" height="140" fill="transparent" />
+            {#if cumSeries.length > 1}
+              {#key cumSeries.length}
+                <!-- A line -->
+                <polyline fill="none" stroke="rgba(0,255,204,0.9)" stroke-width="2" points={cumSeries.map(p => `${mapX(p.t, 600)},${mapY(p.a, 120)}`).join(' ')} />
+                <!-- B line -->
+                <polyline fill="none" stroke="rgba(255,0,170,0.9)" stroke-width="2" points={cumSeries.map(p => `${mapX(p.t, 600)},${mapY(p.b, 120)}`).join(' ')} />
+              {/key}
+            {/if}
+          </svg>
+        </div>
+      </div>
+    {/if}
+
+    {#if items.length > 0}
+      <div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div class="text-sm text-muted">
+          {filtered.length} / {items.length} songs
+        </div>
+        <div class="flex items-center gap-4 text-sm text-muted flex-wrap justify-end">
+          <label class="flex items-center gap-3">
+            <span class="filter-label {filterWinMargin !== 'all' ? 'active' : ''}">Options:</span>
+            <select class="neon-select {filterWinMargin !== 'all' ? 'active' : ''}" bind:value={filterWinMargin}>
+              <option value="all">All Songs</option>
+              <option value="a1">{idShortA} wins by &gt;1%</option>
+              <option value="a2">{idShortA} wins by &gt;2%</option>
+              <option value="b1">{idShortB} wins by &gt;1%</option>
+              <option value="b2">{idShortB} wins by &gt;2%</option>
+            </select>
+          </label>
+          <label class="flex items-center gap-2">Dir
+            <select class="neon-select" bind:value={sortDir}>
+              <option value="desc">Desc</option>
+              <option value="asc">Asc</option>
+            </select>
+          </label>
+          <label class="flex items-center gap-2">Page size
+            <select class="neon-select" bind:value={pageSize}>
+              <option value={12}>12</option>
+              <option value={24}>24</option>
+              <option value={36}>36</option>
+              <option value={48}>48</option>
+            </select>
+          </label>
+        </div>
+      </div>
+
+      {#if loadingMeta}
+        <div class="mt-2 text-xs text-muted">Loading covers…</div>
+      {/if}
+      {#if loadingStars}
+        <div class="mt-2 text-xs text-muted">Loading star ratings…</div>
+      {/if}
+
+      <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {#each pageItems as item}
+          <article class="card-surface overflow-hidden">
+            <MapCard
+              hash={item.hash}
+              coverURL={metaByHash[item.hash]?.coverURL}
+              songName={metaByHash[item.hash]?.songName}
+              mapper={metaByHash[item.hash]?.mapper}
+              stars={starsByKey[`${item.hash}|${item.diffName}|${item.modeName}`]?.stars}
+              timeset={item.timeset}
+              diffName={item.diffName}
+              modeName={item.modeName}
+              leaderboardId={item.leaderboardId}
+              beatsaverKey={metaByHash[item.hash]?.key}
+            >
+              <div slot="content">
+                <div class="mt-3 grid grid-cols-2 gap-3 neon-surface">
+                  <div class="player-card playerA {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner' : ''}">
+                    <div class="label {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-label' : ''}">{idShortA}</div>
+                    <div class="value {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-value' : ''}">{item.accA != null ? item.accA.toFixed(2) + '%' : '—'}</div>
+                    <div class="sub">{item.rankA ? `Rank #${item.rankA}` : ''}</div>
+                  </div>
+                  <div class="player-card playerB {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner' : ''}">
+                    <div class="label {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-label' : ''}">{idShortB}</div>
+                    <div class="value {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-value' : ''}">{item.accB != null ? item.accB.toFixed(2) + '%' : '—'}</div>
+                    <div class="sub">{item.rankB ? `Rank #${item.rankB}` : ''}</div>
+                  </div>
+                </div>
+                <div class="mt-2 text-center text-sm">
+                  {#if item.accA != null && item.accB != null}
+                    {#if item.accA === item.accB}
+                      <span class="chip chip-draw">TIE?!</span>
+                    {:else if item.accA > item.accB}
+                      <span class="chip chip-win-a">Winner: {idShortA}</span>
+                      <span class="ml-2 text-muted margin-text {(item.accA - item.accB) > 1 ? 'margin-bold' : ''} {(item.accA - item.accB) > 2 ? 'margin-bright' : ''}">by {(item.accA - item.accB).toFixed(2)}%</span>
+                    {:else}
+                      <span class="chip chip-win-b">Winner: {idShortB}</span>
+                      <span class="ml-2 text-muted margin-text {(item.accB - item.accA) > 1 ? 'margin-bold' : ''} {(item.accB - item.accA) > 2 ? 'margin-bright' : ''}">by {(item.accB - item.accA).toFixed(2)}%</span>
+                    {/if}
+                  {:else}
+                    <span class="chip">Incomplete</span>
+                  {/if}
+                </div>
+              </div>
+            </MapCard>
+          </article>
+        {/each}
+      </div>
+
+      {#if totalPages > 1}
+        <div class="mt-6 flex items-center justify-center gap-2">
+          <button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.max(1, page - 1))} disabled={page === 1}>Prev</button>
+          <span class="text-sm text-muted">Page {page} / {totalPages}</span>
+          <button class="rounded-md border border-white/10 px-3 py-1 text-sm disabled:opacity-50" on:click={() => (page = Math.min(totalPages, page + 1))} disabled={page === totalPages}>Next</button>
+        </div>
+      {/if}
+    {/if}
+  </HasToolAccess>
+</section>
+
+<style>
+  .text-danger { color: #dc2626; }
+
+  /* Cyberpunk neon aesthetics */
+  .neon-surface {
+    padding: 16px;
+    border-radius: 12px;
+    background: radial-gradient(1200px 400px at -10% -10%, rgba(0, 255, 204, 0.08), transparent),
+                radial-gradient(1200px 400px at 110% 110%, rgba(255, 0, 170, 0.08), transparent),
+                rgba(12,12,18,0.6);
+    border: 1px solid rgba(255,255,255,0.06);
+    box-shadow: 0 0 20px rgba(0, 255, 204, 0.08), 0 0 30px rgba(255, 0, 170, 0.06) inset;
+  }
+  .player-card {
+    padding: 16px;
+    border-radius: 10px;
+    background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(10,10,18,0.6));
+    border: 1px solid rgba(255,255,255,0.06);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  }
+  .player-card.playerA { border-color: rgba(0, 255, 204, 0.25); box-shadow: 0 0 12px rgba(0, 255, 204, 0.08) inset; }
+  .player-card.playerB { border-color: rgba(255, 0, 170, 0.5); box-shadow: 0 0 12px rgba(255, 0, 170, 0.15) inset; }
+  .player-card:hover {
+    transform: translateY(-2px);
+  }
+  .player-card .label { color: #9ca3af; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.2s ease; }
+  .player-card .label.winner-label { color: #ff8800; font-weight: 700; text-shadow: 0 0 8px rgba(255, 136, 0, 0.5); }
+  .player-card .value { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; margin-top: 4px; white-space: nowrap; color: #9ca3af; transition: all 0.2s ease; }
+  .player-card .value.winner-value { color: #ffffff; }
+  .player-card .sub { margin-top: 6px; font-size: 12px; color: #9ca3af; }
+  .player-card.playerA.winner {
+    box-shadow: 0 0 0 1px rgba(0, 255, 204, 0.2) inset, 0 0 18px rgba(0, 255, 204, 0.14);
+    border-color: rgba(0, 255, 204, 0.35);
+  }
+  .player-card.playerB.winner {
+    box-shadow: 0 0 0 1px rgba(255, 0, 170, 0.3) inset, 0 0 18px rgba(255, 0, 170, 0.25);
+    border-color: rgba(255, 0, 170, 0.7);
+  }
+  .chip {
+    display: inline-block;
+    border-radius: 9999px;
+    border: 1px solid rgba(255,255,255,0.12);
+    padding: 4px 10px;
+    font-size: 12px;
+    background: rgba(255,255,255,0.04);
+  }
+  .chip-win-a {
+    border-color: rgba(0, 255, 204, 0.5);
+    background: linear-gradient(90deg, rgba(0, 255, 204, 0.18), rgba(0, 255, 170, 0.10));
+  }
+  .chip-win-b {
+    border-color: rgba(255, 0, 170, 0.5);
+    background: linear-gradient(90deg, rgba(255, 0, 170, 0.18), rgba(255, 102, 204, 0.10));
+  }
+  .chip-draw {
+    border-color: rgba(255, 255, 0, 0.5);
+    background: linear-gradient(90deg, rgba(255, 255, 0, 0.14), rgba(255, 215, 0, 0.08));
+  }
+
+  /* Margin text styling */
+  .margin-text.margin-bold { font-weight: 700; }
+  .margin-text.margin-bright { color: #ffffff; }
+
+  /* KPI tiles */
+  .kpi-tile {
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 12px;
+    padding: 12px 14px;
+    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(15,15,25,0.6));
+  }
+  .kpi-tile.a { box-shadow: 0 0 0 1px rgba(0,255,204,0.14) inset; }
+  .kpi-tile.b { box-shadow: 0 0 0 1px rgba(255,0,170,0.14) inset; }
+  .kpi-label { font-size: 12px; color: #9ca3af; letter-spacing: 0.06em; text-transform: uppercase; }
+  .kpi-value { font-size: 28px; font-weight: 800; margin-top: 2px; }
+  .kpi-sublabel { font-size: 11px; color: #9ca3af; }
+  .kpi-subvalue { font-size: 20px; font-weight: 700; margin-top: 2px; }
+
+  /* Win share bar */
+  .winshare-bar {
+    height: 16px;
+    border-radius: 9999px;
+    overflow: hidden;
+    display: flex;
+    background: rgba(255,255,255,0.08);
+  }
+  .winshare-bar .seg { height: 100%; }
+  .winshare-bar .seg.a { background: rgba(0,255,204,0.9); }
+  .winshare-bar .seg.t { background: rgba(200,200,200,0.7); }
+  .winshare-bar .seg.b { background: rgba(255,0,170,0.9); }
+  .badge { display: inline-block; width: 10px; height: 10px; border-radius: 9999px; margin-right: 6px; }
+  .badge.a { background: rgba(0,255,204,0.9); }
+  .badge.t { background: rgba(200,200,200,0.7); }
+  .badge.b { background: rgba(255,0,170,0.9); }
+
+  /* Histogram */
+  .hist { position: relative; height: 120px; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
+  .hist .bar { position: absolute; bottom: 0; }
+  .hist .zero-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.15); }
+
+  /* Sparkline */
+  .spark { width: 100%; height: 140px; }
+
+  /* Filter label styling */
+  .filter-label {
+    font-size: 1em;
+    letter-spacing: 0.05em;
+    font-weight: 700;
+    color: rgba(255, 0, 170, 0.95);
+    text-shadow: 0 0 8px rgba(255, 0, 170, 0.3);
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--font-display);
+    line-height: 1;
+  }
+  .filter-label.active {
+    color: rgba(255, 0, 170, 1);
+    text-shadow: 0 0 12px rgba(255, 0, 170, 0.5);
+  }
+
+  /* Neon select dropdown */
+  .neon-select {
+    border-radius: 0.375rem;
+    border: 1px solid rgba(34, 211, 238, 0.3);
+    background: linear-gradient(180deg, rgba(15,23,42,0.9), rgba(11,15,23,0.95));
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    color: rgba(148, 163, 184, 1);
+    transition: all 0.2s ease;
+    box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
+    cursor: pointer;
+  }
+  .neon-select.active {
+    border-color: rgba(34, 211, 238, 0.6);
+    color: rgba(255, 255, 255, 1);
+    box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
+  }
+  .neon-select:hover {
+    border-color: rgba(34, 211, 238, 0.5);
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 16px rgba(34, 211, 238, 0.25);
+  }
+  .neon-select:focus {
+    outline: none;
+    border-color: rgba(34, 211, 238, 0.7);
+    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35), 0 0 0 2px rgba(34, 211, 238, 0.1);
+  }
+  .neon-select option {
+    background: #0f172a;
+    color: #fff;
+  }
+</style>
+
+

src/routes/tools/player-playlist-gaps/+page.svelte

@@ -0,0 +1,611 @@
+<script lang="ts">
+  import SongPlayer from '$lib/components/SongPlayer.svelte';
+  import HasToolAccess from '$lib/components/HasToolAccess.svelte';
+  import PlayerCard from '$lib/components/PlayerCard.svelte';
+  import { onMount } from 'svelte';
+  import {
+    TOOL_REQUIREMENTS,
+    type BeatLeaderPlayerProfile,
+    fetchAllPlayerScores,
+    fetchBeatSaverMeta,
+    type MapMeta
+  } from '$lib/utils/plebsaber-utils';
+
+  type Difficulty = {
+    name: string;
+    characteristic: string;
+  };
+
+  type PlaylistSong = {
+    hash: string;
+    difficulties?: Difficulty[];
+    key?: string;
+    levelId?: string;
+    songName?: string;
+  };
+
+  type Playlist = {
+    playlistTitle?: string;
+    songs?: PlaylistSong[];
+    playlistAuthor?: string;
+    image?: string | null;
+    coverImage?: string | null;
+    description?: string;
+    allowDuplicates?: boolean;
+    customData?: Record<string, unknown> | null;
+  };
+
+  type BeatLeaderScore = {
+    leaderboard?: {
+      id?: string | number | null;
+      leaderboardId?: string | number | null;
+      song?: { hash?: string | null };
+    };
+  };
+
+  export let data: { player: BeatLeaderPlayerProfile | null; adminRank: number | null; adminPlayer: BeatLeaderPlayerProfile | null };
+
+  const requirement = TOOL_REQUIREMENTS['player-playlist-gaps'];
+
+  $: playerProfile = data?.player ?? null;
+  $: adminRank = data?.adminRank ?? null;
+  $: adminPlayer = data?.adminPlayer ?? null;
+
+  let playerId = '';
+  let selectedFileName: string | null = null;
+  let parsedTitle: string | null = null;
+  let playlistSongs: PlaylistSong[] = [];
+
+  let loading = false;
+  let errorMsg: string | null = null;
+
+  let results: PlaylistSong[] = [];
+  let metaByHash: Record<string, MapMeta> = {};
+  let loadingMeta = false;
+  let blUrlByHash: Record<string, string> = {};
+  
+  let hasAnalyzed = false;
+  let analyzedPlayerProfile: BeatLeaderPlayerProfile | null = null;
+  let previewPlayerProfile: BeatLeaderPlayerProfile | null = null;
+  let loadingPreview = false;
+
+  // Persist playerId across refreshes (client-side only)
+  let hasMounted = false;
+  const PLAYER_ID_KEY = 'ps_bl_gap_playerId';
+  const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
+
+  type PersistedPlayerId = {
+    value: string;
+    expiresAt: number;
+  };
+
+  function loadPlayerIdFromStorage(): void {
+    if (typeof localStorage === 'undefined') return;
+    const raw = localStorage.getItem(PLAYER_ID_KEY);
+    if (!raw) return;
+    try {
+      const parsed = JSON.parse(raw) as Partial<PersistedPlayerId> | string;
+      if (typeof parsed === 'string') {
+        playerId = parsed;
+        return;
+      }
+      const expiresAt = typeof parsed?.expiresAt === 'number' ? parsed.expiresAt : 0;
+      if (expiresAt && Date.now() > expiresAt) {
+        localStorage.removeItem(PLAYER_ID_KEY);
+        return;
+      }
+      const value = typeof parsed?.value === 'string' ? parsed.value : '';
+      if (value) playerId = value;
+    } catch {
+      // Backward-compat for plain string values
+      playerId = raw;
+    }
+  }
+  onMount(() => {
+    try {
+      // Prefill with logged-in player ID if available
+      if (!playerId && playerProfile?.id) {
+        playerId = playerProfile.id;
+        // Load preview immediately for prefilled user
+        void loadPreviewProfile(playerProfile.id);
+      } else {
+        loadPlayerIdFromStorage();
+        // Load preview for stored player ID
+        if (playerId && playerId.trim()) {
+          void loadPreviewProfile(playerId.trim());
+        }
+      }
+    } finally {
+      hasMounted = true;
+    }
+  });
+  $: if (hasMounted && typeof localStorage !== 'undefined') {
+    if (playerId && playerId.trim().length > 0) {
+      const record: PersistedPlayerId = { value: playerId, expiresAt: Date.now() + WEEK_MS };
+      localStorage.setItem(PLAYER_ID_KEY, JSON.stringify(record));
+    } else {
+      localStorage.removeItem(PLAYER_ID_KEY);
+    }
+  }
+
+  // Debounced preview loading
+  let previewDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+  $: {
+    if (hasMounted && playerId) {
+      const trimmed = playerId.trim();
+      if (previewDebounceTimer) clearTimeout(previewDebounceTimer);
+      
+      if (trimmed) {
+        // Debounce for 800ms to avoid excessive requests
+        previewDebounceTimer = setTimeout(() => {
+          void loadPreviewProfile(trimmed);
+        }, 800);
+      } else {
+        previewPlayerProfile = null;
+      }
+    }
+  }
+
+  async function loadPreviewProfile(id: string): Promise<void> {
+    if (!id || id.trim().length < 3) {
+      previewPlayerProfile = null;
+      return;
+    }
+    
+    loadingPreview = true;
+    try {
+      const profile = await fetchPlayerProfile(id);
+      // Only update if this is still the current player ID
+      if (playerId.trim() === id) {
+        previewPlayerProfile = profile;
+      }
+    } catch {
+      // Silently fail - don't show errors for preview loading
+      if (playerId.trim() === id) {
+        previewPlayerProfile = null;
+      }
+    } finally {
+      loadingPreview = false;
+    }
+  }
+
+  async function onFileChange(ev: Event) {
+    const input = ev.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file) return;
+    selectedFileName = file.name;
+    errorMsg = null;
+    results = [];
+    playlistSongs = [];
+    parsedTitle = null;
+    try {
+      const text = await file.text();
+      const data = JSON.parse(text) as Playlist;
+      const songs = Array.isArray(data?.songs) ? data.songs : [];
+      const cleaned = songs
+        .filter((s) => s && typeof s.hash === 'string' && s.hash.trim().length > 0)
+        .map((s) => ({
+          hash: s.hash.trim(),
+          difficulties: Array.isArray(s.difficulties) ? s.difficulties : [],
+          key: s.key,
+          levelId: s.levelId,
+          songName: s.songName
+        }));
+      if (cleaned.length === 0) {
+        throw new Error('No valid songs found in playlist.');
+      }
+      playlistSongs = cleaned;
+      parsedTitle = data?.playlistTitle ?? null;
+    } catch (err) {
+      errorMsg = err instanceof Error ? err.message : 'Failed to parse playlist file.';
+    }
+  }
+
+
+  async function loadMetaForResults(items: PlaylistSong[]): Promise<void> {
+    const needed = Array.from(new Set(items.map((i) => i.hash.toLowerCase()))).filter((h) => !metaByHash[h]);
+    if (needed.length === 0) return;
+    loadingMeta = true;
+    for (const h of needed) {
+      const meta = await fetchBeatSaverMeta(h);
+      if (meta) metaByHash = { ...metaByHash, [h]: meta };
+    }
+    loadingMeta = false;
+  }
+
+  type BLDifficulty = {
+    modeName?: string;
+    difficultyName?: string;
+    value?: number;
+    ModeName?: string;
+    DifficultyName?: string;
+    Value?: number;
+  };
+  type BLLeaderboardInfo = {
+    id?: string | number | null;
+    Id?: string | number | null;
+    leaderboardId?: string | number | null;
+    LeaderboardId?: string | number | null;
+    difficulty?: BLDifficulty;
+    Difficulty?: BLDifficulty;
+  };
+  type BLLeaderboardsByHashResponse = {
+    leaderboards?: BLLeaderboardInfo[];
+    Leaderboards?: BLLeaderboardInfo[];
+  };
+
+  function normalizeName(name?: string | null): string {
+    return (name ?? '').toString().toLowerCase().replace(/\s+/g, '');
+  }
+  function difficultyRankIndex(diffName?: string | null): number {
+    const order = ['easy', 'normal', 'hard', 'expert', 'expert+', 'expertplus'];
+    const n = normalizeName(diffName).replace('expertplus', 'expert+');
+    const idx = order.indexOf(n);
+    return idx === -1 ? -1 : idx;
+  }
+  function getDifficulty(obj?: BLDifficulty | null): BLDifficulty {
+    const o = obj ?? {} as BLDifficulty;
+    return {
+      modeName: (o.modeName ?? (o as any).ModeName) as string | undefined,
+      difficultyName: (o.difficultyName ?? (o as any).DifficultyName) as string | undefined,
+      value: (o.value ?? (o as any).Value) as number | undefined
+    };
+  }
+  function pickPreferredLeaderboard(lbs: BLLeaderboardInfo[] | null | undefined): BLLeaderboardInfo | null {
+    if (!Array.isArray(lbs) || lbs.length === 0) return null;
+    const getDiff = (lb: BLLeaderboardInfo) => getDifficulty(lb.difficulty ?? (lb as any).Difficulty);
+    const isStandard = (lb: BLLeaderboardInfo) => normalizeName(getDiff(lb)?.modeName) === 'standard';
+    const inStandard = lbs.filter(isStandard);
+    const pool = inStandard.length > 0 ? inStandard : lbs;
+    const expertPlus = pool.find((lb) => {
+      const n = normalizeName(getDiff(lb)?.difficultyName);
+      return n === 'expertplus' || n === 'expert+';
+    });
+    if (expertPlus) return expertPlus;
+    // Fallback to highest difficulty by known order, then by numeric value if available
+    const byKnownOrder = [...pool].sort((a, b) => difficultyRankIndex(getDiff(a)?.difficultyName) - difficultyRankIndex(getDiff(b)?.difficultyName));
+    const bestByOrder = byKnownOrder[byKnownOrder.length - 1];
+    if (bestByOrder && difficultyRankIndex(getDiff(bestByOrder)?.difficultyName) >= 0) return bestByOrder;
+    const byValue = [...pool].sort((a, b) => (getDiff(a)?.value ?? 0) - (getDiff(b)?.value ?? 0));
+    return byValue[byValue.length - 1] ?? pool[0] ?? null;
+  }
+  async function fetchBLLeaderboardsByHash(hash: string): Promise<BLLeaderboardInfo[] | null> {
+    try {
+      const res = await fetch(`/api/beatleader?path=${encodeURIComponent('/leaderboards/hash/' + hash)}`);
+      if (!res.ok) return null;
+      const data = (await res.json()) as BLLeaderboardsByHashResponse | unknown;
+      const leaderboards = (data as any)?.leaderboards ?? (data as any)?.Leaderboards;
+      return Array.isArray(leaderboards) ? (leaderboards as BLLeaderboardInfo[]) : null;
+    } catch {
+      return null;
+    }
+  }
+  function extractLeaderboardId(lb: BLLeaderboardInfo | null): string | null {
+    if (!lb) return null;
+    const anyLb: any = lb as any;
+    const id = anyLb.id ?? anyLb.leaderboardId ?? anyLb.Id ?? anyLb.LeaderboardId;
+    return id != null ? String(id) : null;
+  }
+  function buildBLUrlFromLeaderboard(lb: BLLeaderboardInfo | null, hash: string): string {
+    const id = extractLeaderboardId(lb);
+    if (id && id.length > 0) {
+      return `https://beatleader.com/leaderboard/global/${id}`;
+    }
+    // Fallback: search by hash on the site
+    return `https://beatleader.com/leaderboards?search=${encodeURIComponent(hash)}`;
+  }
+
+  async function openBeatLeader(hash: string): Promise<void> {
+    const key = (hash ?? '').toLowerCase();
+    let url = blUrlByHash[key];
+    if (!url) {
+      const lbs = await fetchBLLeaderboardsByHash(key);
+      const picked = pickPreferredLeaderboard(lbs ?? undefined);
+      url = buildBLUrlFromLeaderboard(picked, hash);
+      blUrlByHash = { ...blUrlByHash, [key]: url };
+    }
+    if (typeof window !== 'undefined' && url) {
+      window.open(url, '_blank', 'noopener');
+    }
+  }
+
+  function downloadPlaylist(): void {
+    const title = `playlist_gap_${playerId || 'player'}`;
+    const payload = {
+      playlistTitle: title,
+      playlistAuthor: 'SaberList Tool',
+      songs: results.map((s) => ({ hash: s.hash, difficulties: s.difficulties ?? [] })),
+      description: `Subset of ${(parsedTitle ?? 'playlist')} that ${playerId} has not played. Generated ${new Date().toISOString()}`,
+      allowDuplicates: false,
+      customData: {}
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${title}.bplist`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  async function fetchPlayerProfile(id: string): Promise<BeatLeaderPlayerProfile | null> {
+    try {
+      const res = await fetch(`https://api.beatleader.xyz/player/${encodeURIComponent(id)}`);
+      if (!res.ok) return null;
+      return (await res.json()) as BeatLeaderPlayerProfile;
+    } catch {
+      return null;
+    }
+  }
+
+  async function onAnalyze(ev: SubmitEvent) {
+    ev.preventDefault();
+    errorMsg = null;
+    results = [];
+    metaByHash = {};
+    analyzedPlayerProfile = null;
+    hasAnalyzed = false;
+    if (!playerId.trim()) {
+      errorMsg = 'Please enter a BeatLeader player ID or SteamID64.';
+      return;
+    }
+    if (playlistSongs.length === 0) {
+      errorMsg = 'Please select a valid .bplist file first.';
+      return;
+    }
+    loading = true;
+    try {
+      const [scores, profile] = await Promise.all([
+        fetchAllPlayerScores(playerId.trim(), 150),
+        fetchPlayerProfile(playerId.trim())
+      ]);
+      analyzedPlayerProfile = profile;
+      hasAnalyzed = true;
+      
+      const playedHashes = new Set<string>();
+      for (const s of scores) {
+        const raw = s.leaderboard?.song?.hash ?? undefined;
+        if (!raw) continue;
+        playedHashes.add(String(raw).toLowerCase());
+      }
+      const unplayed: PlaylistSong[] = [];
+      for (const song of playlistSongs) {
+        const h = song.hash?.toLowerCase?.() ?? '';
+        if (!h) continue;
+        if (!playedHashes.has(h)) {
+          unplayed.push(song);
+        }
+      }
+      results = unplayed;
+      loadMetaForResults(unplayed);
+    } catch (err) {
+      errorMsg = err instanceof Error ? err.message : 'Unknown error';
+    } finally {
+      loading = false;
+    }
+  }
+
+  function resetForm(): void {
+    hasAnalyzed = false;
+    analyzedPlayerProfile = null;
+    results = [];
+    metaByHash = {};
+    blUrlByHash = {};
+    errorMsg = null;
+    selectedFileName = null;
+    parsedTitle = null;
+    playlistSongs = [];
+    // Don't reset playerId - let user keep it for next analysis
+  }
+
+  // Computed: which profile to display (analyzed takes priority over preview)
+  $: displayProfile = hasAnalyzed ? analyzedPlayerProfile : previewPlayerProfile;
+  $: showPlayerCard = !!(displayProfile || (loadingPreview && playerId.trim().length >= 3));
+</script>
+
+<section class="py-8">
+  <h1 class="font-display text-3xl sm:text-4xl">Player Playlist Gaps</h1>
+  <p class="mt-2 text-muted">Upload a .bplist and enter a player ID to find songs they have not played.</p>
+
+  <HasToolAccess player={playerProfile} requirement={requirement} {adminRank} adminPlayer={adminPlayer}>
+    {#if !hasAnalyzed}
+      <form class="mt-6" on:submit|preventDefault={onAnalyze}>
+        <div class="grid gap-4 sm:grid-cols-2 items-end">
+          <div>
+            <label class="block text-sm text-muted">Playlist file (.bplist)
+              <input class="mt-1 rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none file-input" type="file" accept=".bplist,application/json" on:change={onFileChange} />
+            </label>
+            {#if selectedFileName}
+              <div class="mt-1 text-xs text-muted">{selectedFileName}{#if parsedTitle} · title: {parsedTitle}{/if} · {playlistSongs.length} songs</div>
+            {/if}
+          </div>
+          <div class="input-tile">
+            <label class="block text-sm text-muted">Player ID
+              <input class="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-sm outline-none" bind:value={playerId} placeholder="7656119... or BL ID" required />
+            </label>
+            {#if showPlayerCard}
+              <div class="player-card-wrapper">
+                {#if displayProfile}
+                  <PlayerCard
+                    name={displayProfile.name ?? 'Player'}
+                    avatar={displayProfile.avatar ?? null}
+                    country={displayProfile.country ?? null}
+                    rank={displayProfile.rank ?? null}
+                    showRank={typeof displayProfile.rank === 'number'}
+                    width="100%"
+                    avatarSize={56}
+                    techPp={displayProfile.techPp}
+                    accPp={displayProfile.accPp}
+                    passPp={displayProfile.passPp}
+                    playerId={displayProfile.id ?? null}
+                    gradientId="playlist-gap-player-preview"
+                  />
+                {:else}
+                  <div class="loading-placeholder">Loading player...</div>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        </div>
+        <div class="mt-4">
+          <button class="btn-neon" disabled={loading}>
+            {#if loading}
+              Loading...
+            {:else}
+              Analyze
+            {/if}
+          </button>
+        </div>
+      </form>
+    {:else}
+      <div class="mt-6 flex items-start gap-4">
+        {#if displayProfile}
+          <div class="analyzed-player-summary">
+            <PlayerCard
+              name={displayProfile.name ?? 'Player'}
+              avatar={displayProfile.avatar ?? null}
+              country={displayProfile.country ?? null}
+              rank={displayProfile.rank ?? null}
+              showRank={typeof displayProfile.rank === 'number'}
+              width="100%"
+              avatarSize={56}
+              techPp={displayProfile.techPp}
+              accPp={displayProfile.accPp}
+              passPp={displayProfile.passPp}
+              playerId={displayProfile.id ?? null}
+              gradientId="playlist-gap-player"
+            />
+          </div>
+        {/if}
+        <button 
+          class="rounded-md border border-white/10 px-3 py-2 text-sm hover:bg-white/10 transition-colors" 
+          on:click={resetForm}
+          title="Reset and analyze another playlist"
+        >
+          Reset
+        </button>
+      </div>
+    {/if}
+
+    {#if errorMsg}
+      <div class="mt-4 text-danger">{errorMsg}</div>
+    {/if}
+
+    {#if results.length > 0}
+      <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex items-center gap-3 text-sm text-muted">
+          <span>{results.length} songs not played</span>
+        </div>
+        <div class="flex items-center gap-3">
+          <button class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
+        </div>
+      </div>
+
+      {#if loadingMeta}
+        <div class="mt-2 text-xs text-muted">Loading covers…</div>
+      {/if}
+
+      <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {#each results as item}
+          <article class="card-surface overflow-hidden">
+            <div class="aspect-square bg-black/30">
+              {#if metaByHash[item.hash?.toLowerCase?.() || '']?.coverURL}
+                <img
+                  src={metaByHash[item.hash.toLowerCase()].coverURL}
+                  alt={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
+                  loading="lazy"
+                  class="h-full w-full object-cover"
+                />
+              {:else}
+                <div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
+              {/if}
+            </div>
+            <div class="p-3">
+              <div class="font-semibold truncate" title={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}>
+                {metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
+              </div>
+              {#if metaByHash[item.hash.toLowerCase()]?.mapper}
+                <div class="mt-0.5 text-xs text-muted truncate">{metaByHash[item.hash.toLowerCase()]?.mapper}</div>
+              {/if}
+              <div class="mt-3">
+                <SongPlayer hash={item.hash} preferBeatLeader={true} />
+              </div>
+              <div class="mt-3 flex flex-wrap gap-2">
+                <a
+                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
+                  href={blUrlByHash[item.hash.toLowerCase()] ?? undefined}
+                  on:click|preventDefault={() => openBeatLeader(item.hash)}
+                  on:auxclick|preventDefault={() => openBeatLeader(item.hash)}
+                  target="_blank"
+                  rel="noopener"
+                  title="Open in BeatLeader"
+                >BL</a>
+                <a
+                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
+                  href={metaByHash[item.hash.toLowerCase()]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash.toLowerCase()]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
+                  target="_blank"
+                  rel="noopener"
+                  title="Open in BeatSaver"
+                >BS</a>
+                <button
+                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
+                  on:click={() => { const key = metaByHash[item.hash.toLowerCase()]?.key; if (key) navigator.clipboard.writeText(`!bsr ${key}`); }}
+                  disabled={!metaByHash[item.hash.toLowerCase()]?.key}
+                  title="Copy !bsr"
+                >Copy !bsr</button>
+              </div>
+            </div>
+          </article>
+        {/each}
+      </div>
+    {/if}
+  </HasToolAccess>
+</section>
+
+<style>
+  .text-danger { color: #dc2626; }
+  .btn-neon { cursor: pointer; }
+  .card-surface { border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
+  .text-muted { color: rgba(255,255,255,0.7); }
+  
+  .file-input {
+    width: 15em;
+  }
+  
+  .input-tile {
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    border-radius: 0.75rem;
+    padding: 1.25rem;
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(8, 12, 24, 0.85));
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: border-color 0.2s ease;
+  }
+
+  .input-tile:hover {
+    border-color: rgba(148, 163, 184, 0.3);
+  }
+
+  .player-card-wrapper {
+    margin-top: 1rem;
+  }
+
+  .loading-placeholder {
+    padding: 2rem;
+    text-align: center;
+    color: rgba(148, 163, 184, 0.7);
+    font-size: 0.9rem;
+  }
+
+  .analyzed-player-summary {
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    border-radius: 0.75rem;
+    padding: 1.25rem;
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(8, 12, 24, 0.85));
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    max-width: 600px;
+  }
+</style>
+
+

src/routes/tools/stats/+page.server.ts

@@ -0,0 +1,83 @@
+import { error, redirect } from '@sveltejs/kit';
+import { getAllSessions, getSession } from '$lib/server/sessionStore';
+import { PLEB_BEATLEADER_ID } from '$lib/utils/plebsaber-utils';
+import type { PageServerLoad } from './$types';
+
+type StatsUser = {
+  beatleaderId: string;
+  name: string | null;
+  avatar: string | null;
+  country: string | null;
+  rank: number | null;
+  techPp: number | null;
+  accPp: number | null;
+  passPp: number | null;
+  lastSeenAt: number;
+  lastSeenIso: string;
+};
+
+type BeatLeaderPlayer = {
+  id: string;
+  name: string;
+  avatar?: string;
+  country?: string;
+  rank?: number;
+  techPp?: number;
+  accPp?: number;
+  passPp?: number;
+};
+
+async function fetchBeatLeaderProfile(playerId: string): Promise<BeatLeaderPlayer | null> {
+  try {
+    const response = await fetch(`https://api.beatleader.xyz/player/${playerId}`);
+    if (!response.ok) return null;
+    return (await response.json()) as BeatLeaderPlayer;
+  } catch {
+    return null;
+  }
+}
+
+export const load: PageServerLoad = async ({ cookies }) => {
+  const currentSession = getSession(cookies);
+  if (!currentSession) {
+    throw redirect(302, '/auth/beatleader/login?redirect_uri=%2Ftools%2Fstats');
+  }
+
+  if (currentSession.beatleaderId !== PLEB_BEATLEADER_ID) {
+    throw error(403, 'Forbidden');
+  }
+
+  const sessions = getAllSessions();
+  const aggregated = new Map<string, { session: typeof sessions[0] }>();
+
+  for (const stored of sessions) {
+    const existing = aggregated.get(stored.beatleaderId);
+    if (!existing || stored.lastSeenAt > existing.session.lastSeenAt) {
+      aggregated.set(stored.beatleaderId, { session: stored });
+    }
+  }
+
+  // Fetch all player profiles in parallel
+  const userPromises = Array.from(aggregated.values()).map(async ({ session }) => {
+    const profile = await fetchBeatLeaderProfile(session.beatleaderId);
+    return {
+      beatleaderId: session.beatleaderId,
+      name: profile?.name ?? session.name,
+      avatar: profile?.avatar ?? session.avatar,
+      country: profile?.country ?? null,
+      rank: profile?.rank ?? null,
+      techPp: profile?.techPp ?? null,
+      accPp: profile?.accPp ?? null,
+      passPp: profile?.passPp ?? null,
+      lastSeenAt: session.lastSeenAt,
+      lastSeenIso: new Date(session.lastSeenAt).toISOString()
+    } satisfies StatsUser;
+  });
+
+  const users = (await Promise.all(userPromises)).sort((a, b) => b.lastSeenAt - a.lastSeenAt);
+
+  return {
+    users
+  };
+};
+

src/routes/tools/stats/+page.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import PlayerCard from '$lib/components/PlayerCard.svelte';
+  import type { PageData } from './$types';
+
+  export let data: PageData;
+
+  const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+  const ranges: Array<{ unit: Intl.RelativeTimeFormatUnit; ms: number }> = [
+    { unit: 'year', ms: 1000 * 60 * 60 * 24 * 365 },
+    { unit: 'month', ms: 1000 * 60 * 60 * 24 * 30 },
+    { unit: 'week', ms: 1000 * 60 * 60 * 24 * 7 },
+    { unit: 'day', ms: 1000 * 60 * 60 * 24 },
+    { unit: 'hour', ms: 1000 * 60 * 60 },
+    { unit: 'minute', ms: 1000 * 60 },
+    { unit: 'second', ms: 1000 }
+  ];
+
+  let now = Date.now();
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  const formatTimeSince = (timestamp: number): string => {
+    const diff = timestamp - now;
+    for (const { unit, ms } of ranges) {
+      const value = diff / ms;
+      if (Math.abs(value) >= 1 || unit === 'second') {
+        return formatter.format(Math.round(value), unit);
+      }
+    }
+    return formatter.format(0, 'second');
+  };
+
+  onMount(() => {
+    timer = setInterval(() => {
+      now = Date.now();
+    }, 60_000);
+  });
+
+  onDestroy(() => {
+    if (timer) {
+      clearInterval(timer);
+    }
+  });
+</script>
+
+<svelte:head>
+  <title>plebsaber · Stats</title>
+</svelte:head>
+
+<section class="page-wrapper">
+  <header class="page-header">
+    <h1>Historical BeatLeader Logins</h1>
+    <p class="page-subtitle">Tracking everyone who has authenticated with plebsaber tools.</p>
+    <p class="page-meta">Total users: {data.users.length}</p>
+  </header>
+
+  {#if data.users.length === 0}
+    <div class="empty-state">
+      <p>No BeatLeader sessions have been recorded yet.</p>
+    </div>
+  {:else}
+    <ul class="user-grid" aria-live="polite">
+      {#each data.users as user, index}
+        <li class="user-card">
+          <div class="card-header">
+            <PlayerCard
+              name={user.name ?? 'Unknown BeatLeader user'}
+              avatar={user.avatar ?? null}
+              country={user.country ?? null}
+              rank={user.rank ?? null}
+              showRank={typeof user.rank === 'number'}
+              width="100%"
+              avatarSize={64}
+              techPp={user.techPp}
+              accPp={user.accPp}
+              passPp={user.passPp}
+              playerId={user.beatleaderId}
+              gradientId={`stats-player-${index}`}
+            />
+          </div>
+          <div class="user-meta">
+            <div class="meta-item">
+              <span class="meta-label">ID</span>
+              <span class="meta-value">{user.beatleaderId}</span>
+            </div>
+            <div class="meta-item">
+              <span class="meta-label">Last Session</span>
+              <time class="meta-value" datetime={user.lastSeenIso}>
+                {formatTimeSince(user.lastSeenAt)}
+              </time>
+            </div>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
+
+<style>
+  .page-wrapper {
+    display: grid;
+    gap: 2rem;
+    padding: 2.5rem 0;
+  }
+
+  .page-header {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .page-header h1 {
+    font-size: clamp(1.75rem, 3vw, 2.5rem);
+    font-weight: 700;
+    letter-spacing: 0.05em;
+  }
+
+  .page-subtitle {
+    color: rgba(226, 232, 240, 0.7);
+  }
+
+  .page-meta {
+    font-size: 0.9rem;
+    color: rgba(226, 232, 240, 0.55);
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+  }
+
+  .empty-state {
+    padding: 3rem;
+    border: 1px dashed rgba(148, 163, 184, 0.35);
+    border-radius: 0.75rem;
+    text-align: center;
+    color: rgba(148, 163, 184, 0.85);
+    background: rgba(15, 23, 42, 0.35);
+  }
+
+  .user-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    gap: 1.5rem;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .user-card {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.25rem;
+    border-radius: 0.85rem;
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(8, 12, 24, 0.85));
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(34, 211, 238, 0.05);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .user-card:hover,
+  .user-card:focus-within {
+    border-color: rgba(34, 211, 238, 0.35);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(34, 211, 238, 0.15);
+  }
+
+  .card-header {
+    display: flex;
+    width: 100%;
+  }
+
+  .user-meta {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid rgba(148, 163, 184, 0.15);
+  }
+
+  .meta-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .meta-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(148, 163, 184, 0.6);
+    font-weight: 600;
+  }
+
+  .meta-value {
+    font-size: 0.85rem;
+    color: rgba(226, 232, 240, 0.9);
+    word-break: break-all;
+  }
+
+  @media (max-width: 640px) {
+    .user-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .user-meta {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
+