Rankwall and paywall the tools

src/lib/components/HasToolAccess.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import {
+    formatToolRequirementSummary,
+    meetsToolRequirement,
+    type BeatLeaderPlayerProfile,
+    type ToolRequirement
+  } from '$lib/utils/plebsaber-utils';
+
+  const BL_PATREON_URL = 'https://www.patreon.com/BeatLeader';
+
+  export let player: BeatLeaderPlayerProfile | null = null;
+  export let requirement: ToolRequirement | null = null;
+  export let customLockedMessage: string | null = null;
+  export let showCurrentRank = true;
+
+  $: hasAccess = meetsToolRequirement(player, requirement);
+  $: summary = formatToolRequirementSummary(requirement);
+  $: lockedMessage = customLockedMessage ?? requirement?.lockedMessage ?? null;
+  $: showLockedMessage = lockedMessage && lockedMessage !== summary ? lockedMessage : null;
+  $: 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">
+      Tools are restricted to <a class="underline hover:text-white" href={BL_PATREON_URL} target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> (and the top 3k ranked players).
+    </p>
+    {#if summary}
+      <p class="mt-1">{summary}</p>
+    {/if}
+    {#if showLockedMessage}
+      <p class="mt-1">{showLockedMessage}</p>
+    {/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. Refresh after your profile updates.
+        {/if}
+      </p>
+    {/if}
+  </div>
+{/if}
+

src/lib/components/NavBar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { dev } from '$app/environment';
   import beatleaderLogo from '$lib/assets/beatleader-logo.png';
 
   const links = [
@@ -20,17 +21,22 @@
     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;
 
   const getProfileUrl = (id?: string) => (id ? `https://beatleader.com/u/${encodeURIComponent(id)}` : 'https://beatleader.com');
 
@@ -44,13 +50,17 @@
     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
+      avatar: typeof avatar === 'string' ? avatar : undefined,
+      rank: typeof rank === 'number' ? rank : null,
+      countryRank: typeof countryRank === 'number' ? countryRank : null
     };
   }
 
@@ -85,6 +95,14 @@
       }
     })();
   });
+
+  function toggleMenu() {
+    menuOpen = !menuOpen;
+  }
+
+  function closeMenu() {
+    menuOpen = false;
+  }
 </script>
 
 <header class="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-surface/50 border-b border-white/10">
@@ -104,21 +122,45 @@
         {#if checkingSession}
           <span class="text-sm text-muted">Connecting…</span>
         {:else if user}
-          <a
+          <div class="relative">
-            href={getProfileUrl(user.id)}
+            <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"
+              class="flex items-center gap-3 rounded-md border border-white/10 px-3 py-1.5 text-sm transition hover:bg-white/10"
-            target="_blank"
+              on:click={toggleMenu}
-            rel="noreferrer noopener"
+              aria-haspopup="true"
-            title="View your BeatLeader profile"
+              aria-expanded={menuOpen}
-          >
+            >
-            <img
+              <img
-              src={user.avatar ?? beatleaderLogo}
+                src={user.avatar ?? beatleaderLogo}
-              alt="BeatLeader avatar"
+                alt="BeatLeader avatar"
-              class="h-8 w-8 rounded-full object-cover shadow-sm"
+                class="h-8 w-8 rounded-full object-cover shadow-sm"
-              loading="lazy"
+                loading="lazy"
-            />
+              />
-            <span class="font-medium text-white">{user.name ?? 'BeatLeader user'}</span>
+              <span class="font-medium text-white">{user.name ?? 'BeatLeader user'}</span>
-          </a>
+              <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 typeof user.rank === 'number' && user.rank > 3000}
+                  <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 in the global top 3k.</span>
+                  </div>
+                {/if}
+                {#if dev}
+                  <a href="/testing" class="dropdown-item" on:click={closeMenu}>Testing</a>
+                {/if}
+                <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" />
@@ -142,21 +184,24 @@
         {#if checkingSession}
           <span class="text-sm text-muted">Connecting…</span>
         {:else if user}
-          <a
+          <div class="border border-white/10 rounded-md overflow-hidden">
-            href={getProfileUrl(user.id)}
+            {#if typeof user.rank === 'number' && user.rank > 3000}
-            target="_blank"
+              <div class="dropdown-warning mobile">
-            rel="noreferrer noopener"
+                <strong>Heads up:</strong>
-            on:click={close}
+                <span>Tools are limited to <a class="underline" href="https://www.patreon.com/BeatLeader" target="_blank" rel="noreferrer noopener">BeatLeader supporters</a> or players inside the global top 3k.</span>
-            class="flex items-center gap-3 rounded-md border border-white/10 px-3 py-2 text-sm transition hover:bg-white/10"
+              </div>
-          >
+            {/if}
-            <img
+            {#if dev}
-              src={user.avatar ?? beatleaderLogo}
+              <a href="/testing" class="dropdown-item" on:click={close}>Testing</a>
-              alt="BeatLeader avatar"
+            {/if}
-              class="h-10 w-10 rounded-full object-cover shadow-sm"
+            <a href={getProfileUrl(user.id)} class="dropdown-item dropdown-item--with-icon" target="_blank" rel="noreferrer noopener" on:click={close}>
-              loading="lazy"
+              <span>Profile</span>
-            />
+              <img src={beatleaderLogo} alt="BeatLeader" class="dropdown-icon" />
-            <span class="font-medium text-white">{user.name ?? 'BeatLeader user'}</span>
+            </a>
-          </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" />
@@ -168,4 +213,113 @@
   {/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/server/sessionStore.ts

@@ -0,0 +1,125 @@
+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);
+  }
+}
+
+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

@@ -39,6 +39,21 @@ export type BeatLeaderScoresResponse = {
   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;
+};
+
+export type ToolRequirement = {
+  minGlobalRank?: number;
+  summary: string;
+  lockedMessage?: string;
+};
+
 export type Difficulty = {
   name: string;
   characteristic: string;
@@ -54,6 +69,46 @@ export const DIFFICULTIES = ['Easy', 'Normal', 'Hard', 'Expert', 'ExpertPlus'] a
 
 export const MODES = ['Standard', 'Lawless', 'OneSaber', 'NoArrows', 'Lightshow'] as const;
 
+const DEFAULT_PRIVATE_TOOL_REQUIREMENT: ToolRequirement = {
+  minGlobalRank: 3000,
+  summary: 'BeatLeader global rank within the top 3000',
+  lockedMessage: 'You must be a BL Patreon supporter or remain ranked in the global top 3k to use this tool.'
+};
+
+export const TOOL_REQUIREMENTS = {
+  'beatleader-compare': DEFAULT_PRIVATE_TOOL_REQUIREMENT,
+  'beatleader-headtohead': DEFAULT_PRIVATE_TOOL_REQUIREMENT,
+  'beatleader-playlist-gap': 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
+): boolean {
+  if (!requirement) return true;
+  if (requirement.minGlobalRank !== undefined) {
+    const rank = profile?.rank ?? null;
+    if (typeof rank !== 'number' || !Number.isFinite(rank) || rank <= 0) return false;
+    return rank <= requirement.minGlobalRank;
+  }
+  return true;
+}
+
+export function formatToolRequirementSummary(requirement: ToolRequirement | null | undefined): string {
+  if (!requirement) return '';
+  if (requirement.summary) return requirement.summary;
+  if (requirement.minGlobalRank !== undefined) {
+    return `BeatLeader global rank ≤ ${requirement.minGlobalRank}`;
+  }
+  return '';
+}
+
 // ============================================================================
 // 3. BeatSaver & BeatLeader API Functions
 // ============================================================================

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

@@ -1,64 +1,82 @@
 import type { RequestHandler } from '@sveltejs/kit';
-import { createBeatLeaderAPI } from '$lib/server/beatleader';
+import { getSession } from '../../../../lib/server/sessionStore';
-import { clearTokens, getValidAccessToken } from '$lib/server/beatleaderAuth';
 
-type BeatLeaderIdentity = { id?: string; name?: string };
+const PLAYER_ENDPOINT = 'https://api.beatleader.com/player/';
-type BeatLeaderPlayer = { id?: string; name?: string; avatar?: string | null };
 
-const IDENTITY_ENDPOINT = 'https://api.beatleader.com/oauth2/identity';
+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;
+};
 
 export const GET: RequestHandler = async ({ cookies, fetch }) => {
-  const token = await getValidAccessToken(cookies);
+  const session = getSession(cookies);
-  if (!token) {
+  if (!session) {
     return new Response(
       JSON.stringify({ error: 'Unauthorized', login: '/auth/beatleader/login' }),
       { status: 401, headers: { 'content-type': 'application/json' } }
     );
   }
 
-  const identityRes = await fetch(IDENTITY_ENDPOINT, {
-    headers: { Authorization: `Bearer ${token}` }
-  });
-
-  if (identityRes.status === 401) {
-    clearTokens(cookies);
-    return new Response(
-      JSON.stringify({ error: 'Unauthorized', login: '/auth/beatleader/login' }),
-      { status: 401, headers: { 'content-type': 'application/json' } }
-    );
-  }
-
-  if (!identityRes.ok) {
-    return new Response(
-      JSON.stringify({ error: `Identity lookup failed: ${identityRes.status}` }),
-      { status: 502, headers: { 'content-type': 'application/json' } }
-    );
-  }
-
-  const identityJson = (await identityRes.json()) as BeatLeaderIdentity;
   const identity: BeatLeaderIdentity = {
-    id: typeof identityJson.id === 'string' ? identityJson.id : undefined,
+    id: session.beatleaderId,
-    name: typeof identityJson.name === 'string' ? identityJson.name : undefined
+    name: session.name
   };
-  const playerId = identity.id ?? null;
 
   let player: BeatLeaderPlayer | null = null;
-  if (playerId) {
+  let rawPlayer: Record<string, unknown> | null = null;
-    try {
+
-      const api = createBeatLeaderAPI(fetch, token, undefined);
+  try {
-      const raw = (await api.getPlayer(playerId)) as Record<string, unknown>;
+    const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
-      const candidate: BeatLeaderPlayer = {
+    if (res.ok) {
-        id: typeof raw?.id === 'string' ? (raw.id as string) : playerId,
+      rawPlayer = (await res.json()) as Record<string, unknown>;
-        name: typeof raw?.name === 'string' ? (raw.name as string) : identity.name,
+      player = {
-        avatar: typeof raw?.avatar === 'string' ? (raw.avatar as string) : null
+        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
       };
-      player = candidate;
-    } catch (err) {
-      console.error('Failed to fetch BeatLeader player profile', err);
     }
+  } catch (err) {
+    console.error('Failed to refresh BeatLeader public profile', err);
   }
 
-  return new Response(JSON.stringify({ identity, player }), {
+  const payload: ResponsePayload = { identity, player, rawPlayer };
+  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/testing/+page.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+  import { onMount } from '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">BeatLeader Testing</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}
+    <div class="mt-6 grid gap-6 lg:grid-cols-2">
+      <div class="card">
+        <h2 class="card-title">Identity</h2>
+        {#if identity}
+          <dl class="info-grid">
+            <div>
+              <dt>ID</dt>
+              <dd>{identity.id ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>Name</dt>
+              <dd>{identity.name ?? '—'}</dd>
+            </div>
+          </dl>
+        {:else}
+          <p class="empty">No identity data returned.</p>
+        {/if}
+      </div>
+
+      <div class="card">
+        <h2 class="card-title">Player</h2>
+        {#if player}
+          <div class="player-header">
+            <img src={player.avatar ?? ''} alt="Avatar" class:placeholder={!player.avatar} />
+            <div>
+              <div class="player-name">{player.name ?? 'Unknown'}</div>
+              <div class="player-meta">
+                {#if player.country}
+                  <span>{player.country}</span>
+                  {#if player.countryRank !== null}
+                    <span>Rank: {player.countryRank}</span>
+                  {/if}
+                {/if}
+                {#if player.rank !== null}
+                  <span>• Global Rank: {player.rank}</span>
+                {/if}
+              </div>
+            </div>
+          </div>
+          <dl class="info-grid">
+            <div>
+              <dt>ID</dt>
+              <dd>{player.id ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>Role</dt>
+              <dd>{player.role ?? '—'}</dd>
+            </div>
+            <div>
+              <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>
+              <dt>Level</dt>
+              <dd>{player.level ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>PP (Global)</dt>
+              <dd>{player.pp ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>Tech PP</dt>
+              <dd>{player.techPp ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>Acc PP</dt>
+              <dd>{player.accPp ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>Pass PP</dt>
+              <dd>{player.passPp ?? '—'}</dd>
+            </div>
+            <div>
+              <dt>Banned</dt>
+              <dd>{player.banned ? 'Yes' : 'No'}</dd>
+            </div>
+            <div>
+              <dt>Show All Ratings</dt>
+              <dd>{player.profileSettings?.showAllRatings ? 'Enabled' : 'Disabled'}</dd>
+            </div>
+          </dl>
+        {:else}
+          <p class="empty">No player profile found for this identity.</p>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</section>
+
+<style>
+  .card {
+    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);
+  }
+
+  .card-title {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: rgba(226, 232, 240, 0.95);
+    margin-bottom: 1rem;
+  }
+
+  .info-grid {
+    display: grid;
+    gap: 0.75rem;
+    font-size: 0.9rem;
+  }
+
+  dt {
+    color: rgba(148, 163, 184, 0.75);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 0.25rem;
+  }
+
+  dd {
+    color: rgba(226, 232, 240, 0.92);
+    margin: 0;
+  }
+
+  .link {
+    color: rgba(34, 211, 238, 0.85);
+    text-decoration: underline;
+  }
+
+  .player-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .player-header img {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid rgba(34, 211, 238, 0.35);
+    box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
+  }
+
+  .player-header img.placeholder {
+    opacity: 0.3;
+    border-style: dashed;
+  }
+
+  .player-name {
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.95);
+  }
+
+  .player-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.8rem;
+    color: rgba(148, 163, 184, 0.75);
+  }
+
+  .empty {
+    font-size: 0.85rem;
+    color: rgba(148, 163, 184, 0.7);
+  }
+</style>
+

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

@@ -1,16 +1,37 @@
 import { redirect } from '@sveltejs/kit';
-import { getValidAccessToken } from '$lib/server/beatleaderAuth';
+import { getSession } from '../../lib/server/sessionStore';
+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, url }) => {
+export const load: LayoutServerLoad = async ({ cookies, fetch, url }) => {
-  const token = await getValidAccessToken(cookies);
+  const session = getSession(cookies);
-  if (!token) {
+  if (!session) {
     const pathWithQuery = `${url.pathname}${url.search}` || '/tools';
     throw redirect(302, `/auth/beatleader/login?redirect_uri=${encodeURIComponent(pathWithQuery)}`);
   }
 
-  return { hasBeatLeaderOAuth: true };
+  let player: BeatLeaderPlayerProfile | null = null;
+  try {
+    const res = await fetch(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
+    if (res.ok) {
+      const data = (await res.json()) as Record<string, unknown>;
+      player = {
+        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
+      };
+    }
+  } catch (err) {
+    console.error('Failed to fetch BeatLeader profile for tools layout', err);
+  }
+
+  return { hasBeatLeaderOAuth: true, player };
 };
 

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

@@ -1,12 +1,14 @@
 <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 BeatLeaderScoresResponse,
     type Difficulty,
+    type BeatLeaderPlayerProfile,
     loadMetaForHashes,
     loadStarsForHashes,
     normalizeDifficultyName,
@@ -14,7 +16,8 @@
     getCutoffEpochFromMonths,
     toPlaylistJson,
     downloadPlaylist,
-    ONE_YEAR_SECONDS
+    ONE_YEAR_SECONDS,
+    TOOL_REQUIREMENTS
   } from '$lib/utils/plebsaber-utils';
 
   type SongItem = {
@@ -24,6 +27,12 @@
     leaderboardId?: string;
   };
 
+  export let data: { player: BeatLeaderPlayerProfile | null };
+
+  const requirement = TOOL_REQUIREMENTS['beatleader-compare'];
+
+  $: playerProfile = data?.player ?? null;
+
   let playerA = '';
   let playerB = '';
   let loading = false;
@@ -188,87 +197,89 @@
 <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>
-  
+ 
-  <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={results.length > 0} oncompare={onCompare}>
+  <HasToolAccess player={playerProfile} requirement={requirement}>
-    <svelte:fragment slot="extra-buttons">
+    <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={results.length > 0} oncompare={onCompare}>
-      {#if results.length > 0}
+      <svelte:fragment slot="extra-buttons">
-        <button type="button" class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={handleDownloadPlaylist}>Download .bplist</button>
+        {#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-3">
+            <span class="filter-label">Options:</span>
+            <select class="neon-select" 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="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}
-    </svelte:fragment>
-  </PlayerCompareForm>
 
-  {#if errorMsg}
+      <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-    <div class="mt-4 text-danger">{errorMsg}</div>
+        {#each pageItems as item}
-  {/if}
+          <article class="card-surface overflow-hidden">
-
+            <MapCard
-  {#if results.length > 0}
+              hash={item.hash}
-    <div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              coverURL={metaByHash[item.hash]?.coverURL}
-      <div class="text-sm text-muted">
+              songName={metaByHash[item.hash]?.songName}
-        {results.length} songs
+              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>
-      <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">Options:</span>
-          <select class="neon-select" 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="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}
+      {#if totalPages > 1}
-      <div class="mt-2 text-xs text-muted">Loading covers…</div>
+        <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}
-    {#if loadingStars}
+  </HasToolAccess>
-      <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}
 </section>
 
 <style>

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

@@ -2,6 +2,7 @@
   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,
@@ -21,7 +22,9 @@
     percentile,
     DIFFICULTIES,
     MODES,
-    ONE_YEAR_SECONDS
+    ONE_YEAR_SECONDS,
+    TOOL_REQUIREMENTS,
+    type BeatLeaderPlayerProfile
   } from '$lib/utils/plebsaber-utils';
 
   type H2HItem = {
@@ -36,6 +39,12 @@
     leaderboardId?: string;
   };
 
+  export let data: { player: BeatLeaderPlayerProfile | null };
+
+  const requirement = TOOL_REQUIREMENTS['beatleader-headtohead'];
+
+  $: playerProfile = data?.player ?? null;
+
   let playerA = '';
   let playerB = '';
   const months = 24;
@@ -284,230 +293,232 @@
   <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>
 
-  <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={items.length > 0} oncompare={onCompare} />
+  <HasToolAccess player={playerProfile} requirement={requirement}>
+    <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={items.length > 0} oncompare={onCompare} />
 
-  {#if errorMsg}
+    {#if errorMsg}
-    <div class="mt-4 text-danger">{errorMsg}</div>
+      <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}
-    {#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">
+    {#if items.length > 0}
-      {#each pageItems as item}
+      <!-- KPI Tiles -->
-        <article class="card-surface overflow-hidden">
+      <div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-          <MapCard
+        <div class="kpi-tile">
-            hash={item.hash}
+          <div class="kpi-label">Shared Maps</div>
-            coverURL={metaByHash[item.hash]?.coverURL}
+          <div class="kpi-value">{totalComparable}</div>
-            songName={metaByHash[item.hash]?.songName}
+        </div>
-            mapper={metaByHash[item.hash]?.mapper}
+        <div class="kpi-tile a">
-            stars={starsByKey[`${item.hash}|${item.diffName}|${item.modeName}`]?.stars}
+          <div class="kpi-label">Wins {idShortA}</div>
-            timeset={item.timeset}
+          <div class="kpi-value">{winsA}</div>
-            diffName={item.diffName}
+        </div>
-            modeName={item.modeName}
+        <div class="kpi-tile b">
-            leaderboardId={item.leaderboardId}
+          <div class="kpi-label">Wins {idShortB}</div>
-            beatsaverKey={metaByHash[item.hash]?.key}
+          <div class="kpi-value">{winsB}</div>
-          >
+        </div>
-            <div slot="content">
+        <div class="kpi-tile">
-              <div class="mt-3 grid grid-cols-2 gap-3 neon-surface">
+          <div class="kpi-label">Ties</div>
-                <div class="player-card playerA {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner' : ''}">
+          <div class="kpi-value">{ties}</div>
-                  <div class="label {item.accA != null && item.accB != null && item.accA > item.accB ? 'winner-label' : ''}">{idShortA}</div>
+        </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>
-                  <div class="sub">{item.rankA ? `Rank #${item.rankA}` : ''}</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}
+      {#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="player-card playerB {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner' : ''}">
+                <div class="mt-2 text-center text-sm">
-                  <div class="label {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-label' : ''}">{idShortB}</div>
+                  {#if item.accA != null && item.accB != null}
-                  <div class="value {item.accA != null && item.accB != null && item.accB > item.accA ? 'winner-value' : ''}">{item.accB != null ? item.accB.toFixed(2) + '%' : '—'}</div>
+                    {#if item.accA === item.accB}
-                  <div class="sub">{item.rankB ? `Rank #${item.rankB}` : ''}</div>
+                      <span class="chip chip-draw">TIE?!</span>
-                </div>
+                    {:else if item.accA > item.accB}
-              </div>
+                      <span class="chip chip-win-a">Winner: {idShortA}</span>
-              <div class="mt-2 text-center text-sm">
+                      <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>
-                {#if item.accA != null && item.accB != null}
+                    {:else}
-                  {#if item.accA === item.accB}
+                      <span class="chip chip-win-b">Winner: {idShortB}</span>
-                    <span class="chip chip-draw">TIE?!</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>
-                  {:else if item.accA > item.accB}
+                    {/if}
-                    <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="chip">Incomplete</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}
+                </div>
-                  <span class="chip">Incomplete</span>
-                {/if}
               </div>
-            </div>
+            </MapCard>
-          </MapCard>
+          </article>
-        </article>
+        {/each}
-      {/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 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}
-  {/if}
+  </HasToolAccess>
 </section>
 
 <style>

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

@@ -1,6 +1,11 @@
 <script lang="ts">
   import SongPlayer from '$lib/components/SongPlayer.svelte';
+  import HasToolAccess from '$lib/components/HasToolAccess.svelte';
   import { onMount } from 'svelte';
+  import {
+    TOOL_REQUIREMENTS,
+    type BeatLeaderPlayerProfile
+  } from '$lib/utils/plebsaber-utils';
 
   type Difficulty = {
     name: string;
@@ -45,6 +50,12 @@
     mapper?: string;
   };
 
+  export let data: { player: BeatLeaderPlayerProfile | null };
+
+  const requirement = TOOL_REQUIREMENTS['beatleader-playlist-gap'];
+
+  $: playerProfile = data?.player ?? null;
+
   let playerId = '';
   let selectedFileName: string | null = null;
   let parsedTitle: string | null = null;
@@ -344,103 +355,105 @@
   <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}>
+  <HasToolAccess player={playerProfile} requirement={requirement}>
-    <div class="sm:col-span-2 lg:col-span-2">
+    <form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 items-end" on:submit|preventDefault={onAnalyze}>
-      <label class="block text-sm text-muted">Playlist file (.bplist)
+      <div class="sm:col-span-2 lg:col-span-2">
-        <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 class="block text-sm text-muted">Playlist file (.bplist)
-      </label>
+          <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} />
-      {#if selectedFileName}
+        </label>
-        <div class="mt-1 text-xs text-muted">{selectedFileName}{#if parsedTitle} · title: {parsedTitle}{/if} · {playlistSongs.length} songs</div>
+        {#if selectedFileName}
-      {/if}
+          <div class="mt-1 text-xs text-muted">{selectedFileName}{#if parsedTitle} · title: {parsedTitle}{/if} · {playlistSongs.length} songs</div>
-    </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">
+      <div>
-        <button class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
+        <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>
+      <div>
+        <button class="btn-neon" disabled={loading}>
+          {#if loading}
+            Loading...
+          {:else}
+            Analyze
+          {/if}
+        </button>
+      </div>
+    </form>
 
-    {#if loadingMeta}
+    {#if errorMsg}
-      <div class="mt-2 text-xs text-muted">Loading covers…</div>
+      <div class="mt-4 text-danger">{errorMsg}</div>
     {/if}
 
-    <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    {#if results.length > 0}
-      {#each results as item}
+      <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <article class="card-surface overflow-hidden">
+        <div class="flex items-center gap-3 text-sm text-muted">
-          <div class="aspect-square bg-black/30">
+          <span>{results.length} songs not played</span>
-            {#if metaByHash[item.hash?.toLowerCase?.() || '']?.coverURL}
+        </div>
-              <img
+        <div class="flex items-center gap-3">
-                src={metaByHash[item.hash.toLowerCase()].coverURL}
+          <button class="rounded-md border border-white/10 px-3 py-2 text-sm" on:click={downloadPlaylist}>Download .bplist</button>
-                alt={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
+        </div>
-                loading="lazy"
+      </div>
-                class="h-full w-full object-cover"
+
-              />
+      {#if loadingMeta}
-            {:else}
+        <div class="mt-2 text-xs text-muted">Loading covers…</div>
-              <div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
+      {/if}
-            {/if}
+
-          </div>
+      <div class="mt-4 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-          <div class="p-3">
+        {#each results as item}
-            <div class="font-semibold truncate" title={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}>
+          <article class="card-surface overflow-hidden">
-              {metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
+            <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>
-            {#if metaByHash[item.hash.toLowerCase()]?.mapper}
+            <div class="p-3">
-              <div class="mt-0.5 text-xs text-muted truncate">{metaByHash[item.hash.toLowerCase()]?.mapper}</div>
+              <div class="font-semibold truncate" title={metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}>
-            {/if}
+                {metaByHash[item.hash.toLowerCase()]?.songName ?? item.hash}
-            <div class="mt-3">
+              </div>
-              <SongPlayer hash={item.hash} preferBeatLeader={true} />
+              {#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>
-            <div class="mt-3 flex flex-wrap gap-2">
+          </article>
-              <a
+        {/each}
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
+      </div>
-                href={blUrlByHash[item.hash.toLowerCase()] ?? undefined}
+    {/if}
-                on:click|preventDefault={() => openBeatLeader(item.hash)}
+  </HasToolAccess>
-                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>