Route beatleader profile requests through ssr

.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
+
+- Dont' use `cd`, prefer `pwd`
+- Dont' use `rg`, prefer `grep -r`

README.md

@@ -2,18 +2,6 @@
 
 BeatLeader‑powered tools for Beat Saber.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
 ## BeatLeader OAuth setup
 
 Set these environment variables (e.g. in your process manager or `.env` when using adapter‑node):
@@ -36,14 +24,47 @@ npm run dev
 npm run dev -- --open
 ```
 
-## Building
+## Nix Deployment
 
-To create a production version of your app:
+I use Caddy for TLS.
 
-```sh
+```
-npm run build
+plebsaber.stream {
+  reverse_proxy http://127.0.0.1:8037
+}
 ```
 
-You can preview the production build with `npm run preview`.
+I use sops-nix to deploy the flake with OAuth secrets.
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+```js
+sops = {
+  defaultSopsFile = ./sops.yaml;
+  secrets = {
+    "plebsaber-stream.env" = {
+    sopsFile = ../_sops/plebsaber-stream.env;
+    format = "dotenv";
+    restartUnits = [ "plebsaber-stream.service" ];
+    };
+  }
+};
+services.plebsaber-stream = {
+  enable = true;
+  environmentFile = config.sops.secrets."plebsaber-stream.env".path;
+};
+```
+
+Then add the flake from this repository into your flake inputs.
+
+```js
+inputs.plebsaber-stream = {
+  url = "git+https://git.plebsaber.stream/pleb/plebsaber.stream.git";
+  inputs.nixpkgs.follows = "nixpkgs";
+};
+```
+
+For updates, push commits to a repository and then update your flake.
+
+```sh
+nix flake lock --update-input plebsaber-stream
+nixos-rebuild test .#webserver
+```

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1761597516,
+        "narHash": "sha256-wxX7u6D2rpkJLWkZ2E932SIvDJW8+ON/0Yy8+a5vsDU=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "daf6dc47aa4b44791372d6139ab7b25269184d55",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-25.05",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,130 @@
+{
+  description = "plebsaber.stream SvelteKit application";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-25.05";
+  };
+
+  outputs = { self, nixpkgs }: let
+    inherit (nixpkgs.lib) genAttrs;
+    systems = [ "x86_64-linux" "aarch64-linux" ];
+    forAllSystems = genAttrs systems;
+
+    mkPackage = pkgs:
+      pkgs.buildNpmPackage {
+        pname = "plebsaber-stream";
+        version = "0.0.1";
+        src = pkgs.lib.cleanSourceWith {
+          src = ./.;
+          filter = path: type:
+            !(pkgs.lib.hasInfix "/.git/" path)
+            && !(pkgs.lib.hasInfix "/node_modules/" path)
+            && !(pkgs.lib.hasInfix "/.svelte-kit/" path);
+        };
+
+        nodejs = pkgs.nodejs_22;
+        npmDepsHash = "sha256-q2C2NBxjVoxA6XFEMjGZcHAujp5OTiz7llhq3aRFiY0=";
+        npmBuildScript = "build";
+        NODE_OPTIONS = "--dns-result-order=ipv4first";
+
+        nativeBuildInputs = [ pkgs.makeWrapper ];
+
+        installPhase = ''
+          runHook preInstall
+          mkdir -p $out/app
+          cp -r build $out/app/
+          makeWrapper ${pkgs.nodejs_22}/bin/node $out/bin/plebsaber-stream \
+            --set NODE_ENV production \
+            --add-flags "$out/app/build/index.js"
+          runHook postInstall
+        '';
+
+        meta = {
+          description = "plebsaber.stream SvelteKit application";
+          mainProgram = "plebsaber-stream";
+        };
+      };
+  in rec {
+    packages = forAllSystems (system: let
+      pkgs = import nixpkgs { inherit system; };
+      pkg = mkPackage pkgs;
+    in {
+      plebsaber-stream = pkg;
+      default = pkg;
+    });
+
+    overlays.default = final: prev: {
+      plebsaber-stream = self.packages.${prev.stdenv.hostPlatform.system}.plebsaber-stream;
+    };
+
+    nixosModules.default = { config, lib, pkgs, ... }:
+      let
+        inherit (lib) mkEnableOption mkIf mkOption types;
+        cfg = config.services.plebsaber-stream;
+        system = pkgs.stdenv.hostPlatform.system;
+        defaultPackage = self.packages.${system}.plebsaber-stream;
+      in {
+        options.services.plebsaber-stream = {
+          enable = mkEnableOption "plebsaber.stream SvelteKit service";
+
+          package = mkOption {
+            type = types.package;
+            default = defaultPackage;
+            defaultText = "self.packages.${system}.plebsaber-stream";
+            description = "Derivation that provides the plebsaber.stream server.";
+          };
+
+          port = mkOption {
+            type = types.port;
+            default = 8037;
+            description = "HTTP listen port for the Node server.";
+          };
+
+          stateDirectory = mkOption {
+            type = types.str;
+            default = "plebsaber-stream";
+            description = "Name of the state directory managed by systemd.";
+          };
+
+          environment = mkOption {
+            type = types.attrsOf types.str;
+            default = {};
+            description = "Additional environment variables for the service.";
+          };
+
+          environmentFile = mkOption {
+            type = types.nullOr types.path;
+            default = null;
+            description = "Optional environment file consumed by systemd.";
+          };
+        };
+
+        config = mkIf cfg.enable {
+          systemd.services.plebsaber-stream = {
+            description = "plebsaber.stream SvelteKit service";
+            wantedBy = [ "multi-user.target" ];
+            after = [ "network-online.target" ];
+            wants = [ "network-online.target" ];
+
+            environment = {
+              NODE_ENV = "production";
+              PORT = builtins.toString cfg.port;
+            } // cfg.environment;
+
+            serviceConfig = {
+              Type = "simple";
+              ExecStart = "${cfg.package}/bin/plebsaber-stream";
+              DynamicUser = true;
+              StateDirectory = cfg.stateDirectory;
+              WorkingDirectory = "/var/lib/${cfg.stateDirectory}";
+              Restart = "on-failure";
+              RestartSec = 3;
+            } // lib.optionalAttrs (cfg.environmentFile != null) {
+              EnvironmentFile = cfg.environmentFile;
+            };
+          };
+        };
+      };
+  };
+}
+

package.json

@@ -7,7 +7,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"start": "PORT=8037 node build/index.js",
+		"start": "HOST=127.0.0.1 PORT=8037 node build/index.js",
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

plebsaber.stream.code-workspace

@@ -4,13 +4,10 @@
 			"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/app.css

@@ -29,6 +29,18 @@ body {
   @apply bg-bg text-white/90 antialiased;
 }
 
+p a {
+  color: var(--color-neon);
+  text-decoration: underline;
+  text-decoration-color: rgba(34, 211, 238, 0.4);
+  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+}
+
+p a:hover {
+  color: color-mix(in srgb, var(--color-neon) 80%, white 20%);
+  text-decoration-color: rgba(34, 211, 238, 0.85);
+}
+
 /* Utilities */
 @utility btn-neon {
   @apply inline-flex items-center gap-2 rounded-md border border-neon/60 px-4 py-2 text-neon transition hover:border-neon hover:text-white focus:outline-none focus:ring-2 focus:ring-neon/50;
@@ -46,3 +58,56 @@ body {
 @utility neon-text {
   @apply text-transparent bg-clip-text bg-gradient-to-r from-neon via-accent to-neon-fuchsia;
 }
+
+input[type='checkbox'] {
+  appearance: none;
+  width: 1.05rem;
+  height: 1.05rem;
+  border-radius: 0.35rem;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  background-color: rgba(15, 23, 42, 0.85);
+  display: grid;
+  place-content: center;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+  cursor: pointer;
+}
+
+input[type='checkbox']::after {
+  content: '';
+  width: 0.55rem;
+  height: 0.55rem;
+  clip-path: polygon(14% 44%, 0 60%, 43% 100%, 100% 16%, 86% 0, 40% 64%);
+  background-color: transparent;
+  transform: scale(0.4) rotate(6deg);
+  opacity: 0;
+  transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
+}
+
+input[type='checkbox']:hover {
+  border-color: rgba(94, 234, 212, 0.4);
+}
+
+input[type='checkbox']:focus-visible {
+  outline: none;
+  border-color: rgba(94, 234, 212, 0.6);
+  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25);
+}
+
+input[type='checkbox']:checked {
+  border-color: rgba(34, 211, 238, 0.8);
+  background-color: rgba(34, 211, 238, 0.18);
+  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
+}
+
+input[type='checkbox']:checked::after {
+  background-color: var(--color-neon);
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+}
+
+input[type='checkbox']:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  box-shadow: none;
+  border-color: rgba(148, 163, 184, 0.2);
+}

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/Guestbook.svelte

@@ -0,0 +1,544 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import PlayerCard from '$lib/components/PlayerCard.svelte';
+
+  type GuestbookAuthor = {
+    beatleaderId: string;
+    name: string | null;
+    avatar: string | null;
+    country: string | null;
+    rank: number | null;
+    techPp: number | null;
+    accPp: number | null;
+    passPp: number | null;
+  };
+
+  type GuestbookComment = {
+    id: string;
+    message: string;
+    author: GuestbookAuthor;
+    createdAt: number;
+    updatedAt: number | null;
+  };
+
+  type GuestbookViewer = {
+    beatleaderId: string;
+    name: string | null;
+    avatar: string | null;
+  };
+
+  type GuestbookPagination = {
+    total: number;
+    offset: number;
+    limit: number;
+    hasPrev: boolean;
+    hasNext: boolean;
+  };
+
+  type GuestbookResponse = {
+    viewer: GuestbookViewer | null;
+    comments: GuestbookComment[];
+    pagination?: GuestbookPagination | null;
+  };
+
+  let loading = false;
+  let error: string | null = null;
+  let comments: GuestbookComment[] = [];
+  let viewer: GuestbookViewer | null = null;
+  let newMessage = '';
+  let newMessageError: string | null = null;
+  let submittingNew = false;
+  let pagination: GuestbookPagination = { total: 0, offset: 0, limit: 5, hasPrev: false, hasNext: false };
+
+  const loginUrl = '/auth/beatleader/login';
+  const PAGE_SIZE = 5;
+
+  $: showingStart = pagination.total > 0 ? pagination.offset + 1 : 0;
+  $: showingEnd = pagination.total > 0 ? Math.min(pagination.offset + comments.length, pagination.total) : 0;
+
+  function normalizePagination(data: GuestbookResponse, fallbackOffset: number): GuestbookPagination {
+    const page = data.pagination ?? null;
+    const limit = typeof page?.limit === 'number' && Number.isFinite(page.limit) && page.limit > 0 ? page.limit : PAGE_SIZE;
+    const total = typeof page?.total === 'number' && page.total >= 0 ? page.total : Math.max(data.comments.length + fallbackOffset, 0);
+    const offset = typeof page?.offset === 'number' && page.offset >= 0 ? page.offset : fallbackOffset;
+    const hasPrev = page?.hasPrev ?? offset > 0;
+    const hasNext = page?.hasNext ?? offset + data.comments.length < total;
+    return { total, offset, limit, hasPrev, hasNext };
+  }
+
+  function formatTimestamp(ts: number): string {
+    const now = Date.now();
+    const diff = Math.max(0, now - ts);
+
+    const minute = 60 * 1000;
+    const hour = 60 * minute;
+    const day = 24 * hour;
+    const week = 7 * day;
+    const month = 30 * day;
+    const year = 365 * day;
+
+    if (diff < minute) {
+      const seconds = Math.floor(diff / 1000);
+      return seconds <= 1 ? 'just now' : `${seconds} seconds ago`;
+    }
+    if (diff < hour) {
+      const minutes = Math.floor(diff / minute);
+      return minutes === 1 ? 'a minute ago' : `${minutes} minutes ago`;
+    }
+    if (diff < day) {
+      const hours = Math.floor(diff / hour);
+      return hours === 1 ? 'an hour ago' : `${hours} hours ago`;
+    }
+    if (diff < week) {
+      const days = Math.floor(diff / day);
+      return days === 1 ? 'yesterday' : `${days} days ago`;
+    }
+    if (diff < month) {
+      const weeks = Math.floor(diff / week);
+      return weeks === 1 ? 'a week ago' : `${weeks} weeks ago`;
+    }
+    if (diff < year) {
+      const months = Math.floor(diff / month);
+      return months === 1 ? 'a month ago' : `${months} months ago`;
+    }
+    const years = Math.floor(diff / year);
+    return years === 1 ? 'a year ago' : `${years} years ago`;
+  }
+
+  async function fetchGuestbook(offset = 0): Promise<void> {
+    loading = true;
+    error = null;
+    try {
+      const params = new URLSearchParams({
+        limit: String(PAGE_SIZE),
+        offset: String(Math.max(0, Math.floor(offset)))
+      });
+      const res = await fetch(`/api/guestbook?${params.toString()}`);
+      if (!res.ok) {
+        const body = await res.json().catch(() => null);
+        const message = body?.error ?? `Failed to load guestbook (${res.status})`;
+        throw new Error(message);
+      }
+      const data = (await res.json()) as GuestbookResponse;
+      viewer = data.viewer ?? null;
+      comments = Array.isArray(data.comments) ? data.comments : [];
+      pagination = normalizePagination(data, Math.max(0, offset));
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to load guestbook.';
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function postComment(message: string): Promise<void> {
+    const res = await fetch('/api/guestbook', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ message })
+    });
+
+    const payload = await res.json().catch(() => null);
+    if (!res.ok) {
+      const messageText = payload?.error ?? `Request failed (${res.status})`;
+      throw new Error(messageText);
+    }
+
+    const data = payload as GuestbookResponse;
+    viewer = data.viewer ?? viewer;
+    comments = Array.isArray(data.comments) ? data.comments : comments;
+    pagination = normalizePagination(data, 0);
+  }
+
+  async function deleteComment(id: string): Promise<void> {
+    const params = new URLSearchParams({
+      id,
+      limit: String(PAGE_SIZE),
+      offset: String(pagination.offset)
+    });
+    const res = await fetch(`/api/guestbook?${params.toString()}`, {
+      method: 'DELETE'
+    });
+
+    const payload = await res.json().catch(() => null);
+    if (!res.ok) {
+      const messageText = payload?.error ?? `Failed to delete comment (${res.status})`;
+      throw new Error(messageText);
+    }
+
+    const data = payload as GuestbookResponse;
+    comments = Array.isArray(data.comments) ? data.comments : comments;
+    pagination = normalizePagination(data, pagination.offset);
+  }
+
+  async function submitNewComment(): Promise<void> {
+    if (!viewer) {
+      newMessageError = 'You must be logged in to leave a comment.';
+      return;
+    }
+    const trimmed = newMessage.trim();
+    if (!trimmed) {
+      newMessageError = 'Please enter a message before submitting.';
+      return;
+    }
+    if (trimmed.length > 2000) {
+      newMessageError = 'Message exceeds the 2000 character limit.';
+      return;
+    }
+
+    submittingNew = true;
+    newMessageError = null;
+    try {
+      await postComment(trimmed);
+      newMessage = '';
+    } catch (err) {
+      newMessageError = err instanceof Error ? err.message : 'Failed to post comment.';
+    } finally {
+      submittingNew = false;
+    }
+  }
+
+  async function loadNewer(): Promise<void> {
+    if (loading || !pagination.hasPrev) return;
+    const nextOffset = Math.max(0, pagination.offset - pagination.limit);
+    await fetchGuestbook(nextOffset);
+  }
+
+  async function loadOlder(): Promise<void> {
+    if (loading || !pagination.hasNext) return;
+    const nextOffset = pagination.offset + pagination.limit;
+    await fetchGuestbook(nextOffset);
+  }
+
+  onMount(() => {
+    void fetchGuestbook(0);
+  });
+</script>
+
+<section class="guestbook-section">
+  <div class="guestbook-header">
+    <h2 class="font-display tracking-widest">Guestbook</h2>
+  </div>
+
+  {#if viewer}
+    <form class="guestbook-form" on:submit|preventDefault={submitNewComment}>
+      <textarea
+        id="guestbook-new-message"
+        class="input"
+        bind:value={newMessage}
+        maxlength={2000}
+        rows={4}
+        placeholder="Leave your mark—drop a note in the guestbook!"
+      ></textarea>
+      {#if newMessageError}
+        <div class="form-error">{newMessageError}</div>
+      {/if}
+      <div class="form-actions">
+        <button class="btn-neon" type="submit" disabled={submittingNew}>
+          {submittingNew ? 'Posting…' : 'Post Comment'}
+        </button>
+      </div>
+    </form>
+  {:else}
+    <div class="guestbook-login">
+      <p>
+        <a class="underline" href={loginUrl}>Log in with BeatLeader</a> to leave a comment.
+      </p>
+    </div>
+  {/if}
+
+  {#if loading}
+    <div class="guestbook-status">Loading comments…</div>
+  {:else if error}
+    <div class="guestbook-error">{error}</div>
+  {:else if comments.length === 0}
+    <div class="guestbook-empty">No comments yet. Be the first to say hello!</div>
+  {:else}
+    <ul class="guestbook-threads">
+      {#each comments as comment (comment.id)}
+        <li class="guestbook-thread">
+          <article class="guestbook-comment">
+            <div class="comment-header">
+              <PlayerCard
+                name={comment.author.name ?? 'Unknown'}
+                country={comment.author.country}
+                rank={null}
+                showRank={false}
+                avatar={comment.author.avatar}
+                width="100%"
+                avatarSize={56}
+                techPp={comment.author.techPp}
+                accPp={comment.author.accPp}
+                passPp={comment.author.passPp}
+                playerId={comment.author.beatleaderId}
+                gradientId={`guestbook-${comment.id}`}
+              />
+            </div>
+            <p class="comment-body">{comment.message}</p>
+            <div class="comment-meta">
+              <div class="comment-meta-left">
+                {#if viewer?.beatleaderId === comment.author.beatleaderId}
+                  <button
+                    class="comment-delete"
+                    type="button"
+                    on:click={async () => {
+                      try {
+                        await deleteComment(comment.id);
+                      } catch (err) {
+                        console.error(err);
+                        error = err instanceof Error ? err.message : 'Failed to delete comment.';
+                      }
+                    }}
+                    disabled={loading}
+                  >
+                    Delete
+                  </button>
+                {/if}
+              </div>
+              <span class="comment-meta-right">{formatTimestamp(comment.createdAt)}</span>
+            </div>
+          </article>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  <div class="guestbook-pagination">
+    <span class="guestbook-range">
+      {#if pagination.total > 0}
+        Showing {showingStart}–{showingEnd} of {pagination.total}
+      {:else}
+        No comments yet
+      {/if}
+    </span>
+    <div class="guestbook-pagination-buttons">
+      <button
+        class="guestbook-nav-button"
+        type="button"
+        on:click={loadNewer}
+        disabled={loading || !pagination.hasPrev}
+      >
+        Newer
+      </button>
+      <button
+        class="guestbook-nav-button"
+        type="button"
+        on:click={loadOlder}
+        disabled={loading || !pagination.hasNext}
+      >
+        Older
+      </button>
+    </div>
+  </div>
+</section>
+
+<style>
+  .guestbook-section {
+    border-radius: 1rem;
+    padding: 0.625rem;
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.85), rgba(4, 7, 17, 0.9));
+    border: 1px solid rgba(148, 163, 184, 0.08);
+    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.35);
+  }
+
+  .guestbook-header {
+    margin-bottom: 1.5rem;
+  }
+
+  .guestbook-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
+    width: 100%;
+  }
+
+  .input {
+    width: 100%;
+    border-radius: 0.75rem;
+    padding: 0.85rem 1rem;
+    border: 1px solid rgba(148, 163, 184, 0.15);
+    background: rgba(15, 23, 42, 0.6);
+    color: rgba(226, 232, 240, 0.95);
+    resize: vertical;
+    min-height: 120px;
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: rgba(34, 211, 238, 0.45);
+    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
+  }
+
+  .form-error {
+    color: rgba(248, 113, 113, 0.9);
+    font-size: 0.8rem;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .guestbook-login {
+    padding: 1rem 1.25rem;
+    border-radius: 0.75rem;
+    border: 1px dashed rgba(148, 163, 184, 0.25);
+    background: rgba(15, 23, 42, 0.4);
+    color: rgba(148, 163, 184, 0.9);
+    margin-bottom: 2rem;
+  }
+
+  .guestbook-status,
+  .guestbook-error,
+  .guestbook-empty {
+    font-size: 0.95rem;
+    color: rgba(148, 163, 184, 0.85);
+    padding: 1rem 0;
+  }
+
+  .guestbook-error {
+    color: rgba(248, 113, 113, 0.9);
+  }
+
+  .guestbook-threads {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .guestbook-thread {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .guestbook-comment {
+    border: 1px solid rgba(148, 163, 184, 0.12);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    background: rgba(8, 12, 24, 0.65);
+    backdrop-filter: blur(8px);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    gap: 0.9rem;
+  }
+
+  .comment-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .comment-meta {
+    font-size: 0.75rem;
+    color: rgba(148, 163, 184, 0.7);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .comment-meta-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .comment-meta-right {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 6rem;
+    text-align: right;
+  }
+
+  .comment-delete {
+    background: none;
+    border: none;
+    color: rgba(248, 113, 113, 0.85);
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    padding: 0.25rem 0;
+  }
+
+  .comment-delete:hover:not(:disabled) {
+    color: rgba(248, 113, 113, 1);
+  }
+
+  .comment-delete:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .comment-body {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: rgba(226, 232, 240, 0.92);
+    white-space: pre-wrap;
+  }
+
+  .guestbook-pagination {
+    margin-top: 1.75rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .guestbook-range {
+    font-size: 0.8rem;
+    color: rgba(148, 163, 184, 0.75);
+    letter-spacing: 0.04em;
+  }
+
+  .guestbook-pagination-buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .guestbook-nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.95rem;
+    border-radius: 9999px;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    background: rgba(15, 23, 42, 0.55);
+    color: rgba(226, 232, 240, 0.88);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+  }
+
+  .guestbook-nav-button:hover:not(:disabled) {
+    border-color: rgba(34, 211, 238, 0.45);
+    color: rgba(34, 211, 238, 0.95);
+    background: rgba(15, 23, 42, 0.7);
+  }
+
+  .guestbook-nav-button:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+
+  @media (max-width: 640px) {
+    .guestbook-section {
+      padding: 1.75rem;
+    }
+
+    .comment-meta {
+      font-size: 0.7rem;
+    }
+  }
+</style>
+

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="map-action-buttons 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,213 @@
+<script lang="ts">
+  import DifficultyLabel from './DifficultyLabel.svelte';
+  import MapActionButtons from './MapActionButtons.svelte';
+  import SongPlayer from './SongPlayer.svelte';
+  import ScoreBar from './ScoreBar.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;
+
+// BeatSaver stats
+export let score: number | undefined = undefined;
+
+export let showActions = true;
+export let showPublished = true;
+
+$: hasScore = typeof score === 'number' && Number.isFinite(score);
+</script>
+
+<div class="card-wrapper">
+  <div class="cover">
+    {#if coverURL}
+      <img src={coverURL} alt={songName ?? hash} loading="lazy" />
+    {:else}
+      <div class="placeholder">☁️</div>
+    {/if}
+  </div>
+  <div class="body">
+    <div class="title" title={songName ?? hash}>
+      {songName ?? hash}
+    </div>
+    {#if mapper}
+      <div class="mapper-row">
+        <span class="mapper">
+          {mapper}
+          {#if stars !== undefined}
+            <span class="stars" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
+          {/if}
+        </span>
+        {#if showPublished && timeset !== undefined}
+          <span class="date">{new Date(timeset * 1000).toLocaleDateString()}</span>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="meta">
+      <div class="meta-leading">
+        <slot name="meta-leading">
+          <DifficultyLabel {diffName} {modeName} />
+        </slot>
+        {#if hasScore}
+          <ScoreBar value={score} showLabel={true} size="sm" decimals={1} className="score-meter--with-max" />
+        {/if}
+      </div>
+    </div>
+
+    <slot name="content" />
+
+    {#if showActions}
+      <div class="actions">
+        <MapActionButtons
+          {hash}
+          {leaderboardId}
+          {diffName}
+          {modeName}
+          {beatsaverKey}
+        />
+        <div class="player">
+          <SongPlayer {hash} preferBeatLeader={true} />
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .card-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .cover {
+    position: relative;
+    width: 100%;
+    padding-top: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 0.75rem;
+    overflow: hidden;
+  }
+
+  .cover img,
+  .cover .placeholder {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .cover .placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
+
+  .body {
+    padding: 0.75rem 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: 1rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .mapper-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: rgba(148, 163, 184, 0.9);
+  }
+
+  .mapper-row .mapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mapper-row .stars {
+    margin-left: 0.4rem;
+  }
+
+  .mapper-row .date {
+    font-size: 0.7rem;
+    white-space: nowrap;
+  }
+
+  .meta {
+    margin-top: 0.6rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .meta-leading {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .meta-leading :global(.score-meter) {
+    width: 100%;
+    max-width: 45%;
+    margin-left: auto;
+  }
+
+  .actions {
+    margin-top: 0.6rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .player {
+    flex: 1;
+    max-width: 45%;
+    margin-left: auto;
+  }
+
+  .actions :global(.map-action-buttons) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  @media (max-width: 959px) {
+    .player {
+      max-width: none;
+      width: 100%;
+      margin-left: 0;
+    }
+  }
+
+  :global(.difficulty-label) {
+    white-space: nowrap;
+  }
+</style>

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,346 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import PlayerCard from '$lib/components/PlayerCard.svelte';
+  import { fetchBeatLeaderPlayerProfile, 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 loadDefaultPlayerCards(a: string, b: string): Promise<void> {
+    playerAProfile = null;
+    playerBProfile = null;
+    if (!a || !b) return;
+    const [pa, pb] = await Promise.all([
+      fetchBeatLeaderPlayerProfile(a),
+      fetchBeatLeaderPlayerProfile(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 fetchBeatLeaderPlayerProfile(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/ScoreBar.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+  export let value: number | null | undefined = null;
+  export let min = 0;
+  export let max = 1;
+  export let decimals = 1;
+  export let showLabel = false;
+  export let label: string | null = null;
+  export let emptyLabel = '—';
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let className = '';
+
+  const { class: restClass = '', ...restProps } = $$restProps;
+
+  const effectiveRange = () => {
+    const span = max - min;
+    return span === 0 ? 1 : Math.abs(span);
+  };
+
+  const normaliseValue = (input: number) => min + clamp(input - min, 0, effectiveRange());
+
+  const percentFromValue = (input: number | null | undefined) => {
+    if (typeof input !== 'number' || !Number.isFinite(input)) return null;
+    const bounded = clamp((input - min) / effectiveRange(), 0, 1);
+    return bounded * 100;
+  };
+
+  $: percent = percentFromValue(value);
+  $: hasValue = percent !== null;
+  $: fill = hasValue ? `${percent!.toFixed(2)}%` : '0%';
+  $: displayLabel = label ?? (hasValue ? `${percent!.toFixed(decimals)}%` : emptyLabel);
+  $: ariaValueNow = hasValue ? normaliseValue(value as number) : undefined;
+  $: ariaValueText = hasValue ? `${percent!.toFixed(decimals)} percent` : 'Not available';
+  $: classes = [`score-meter`, `score-meter--${size}`, restClass, className].filter(Boolean).join(' ');
+</script>
+
+<div
+  {...restProps}
+  class={classes}
+  class:score-meter--empty={!hasValue}
+  data-testid="score-meter"
+>
+  <div
+    class="score-meter__track"
+    role="meter"
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={ariaValueNow}
+    aria-valuetext={ariaValueText}
+    style={`--score-meter-fill:${fill}`}
+  ></div>
+
+  {#if showLabel}
+    <span class="score-meter__label">{displayLabel}</span>
+  {/if}
+</div>
+
+<style>
+  .score-meter {
+    --score-meter-height: 0.5rem;
+    --score-meter-track: rgba(34, 211, 238, 0.15);
+    --score-meter-gradient: linear-gradient(90deg, var(--color-neon-fuchsia), var(--color-neon));
+    --score-meter-label-color: rgba(148, 163, 184, 0.92);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .score-meter--sm {
+    --score-meter-height: 0.45rem;
+  }
+
+  .score-meter--lg {
+    --score-meter-height: 0.6rem;
+  }
+
+  .score-meter__track {
+    position: relative;
+    flex: 1;
+    min-width: 60px;
+    height: var(--score-meter-height);
+    border-radius: 999px;
+    background-color: var(--score-meter-track);
+    overflow: hidden;
+  }
+
+  .score-meter__track::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--score-meter-gradient);
+    -webkit-mask-image: linear-gradient(
+      90deg,
+      #000 0 var(--score-meter-fill, 0%),
+      transparent var(--score-meter-fill, 0%) 100%
+    );
+    mask-image: linear-gradient(90deg, #000 0 var(--score-meter-fill, 0%), transparent var(--score-meter-fill, 0%) 100%);
+    clip-path: inset(0 calc(100% - var(--score-meter-fill, 0%)) 0 0 round 999px);
+    transition: -webkit-mask-image 0.3s ease, mask-image 0.3s ease, clip-path 0.3s ease;
+  }
+
+  .score-meter__label {
+    font-size: 0.85rem;
+    color: var(--score-meter-label-color);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .score-meter--empty .score-meter__label {
+    opacity: 0.6;
+  }
+</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/beatsaver.ts

@@ -1,4 +1,11 @@
+import * as nodeFs from 'node:fs';
+import * as nodePath from 'node:path';
+import * as nodeOs from 'node:os';
+
 const BASE_URL = 'https://api.beatsaver.com';
+// Many API calls are undocumented and only work on the web API, e.g. searchPlaylists
+const WEB_API_BASE_URL = 'https://beatsaver.com/api';
+const CACHE_ROOT = '.data/beatsaver-cache';
 
 type QueryParams = Record<string, string | number | boolean | undefined | null>;
 
@@ -28,6 +35,183 @@ export interface EnvironmentMapInfo extends CuratedSongInfo {
   environment?: string;
 }
 
+type DateInput = string | number | Date;
+
+export interface BeatSaverUser {
+  id: number;
+  name: string;
+  avatar: string;
+  description?: string | null;
+  hash?: string | null;
+  verifiedMapper?: boolean;
+  [key: string]: unknown;
+}
+
+export interface PlaylistStats {
+  totalMaps: number;
+  mapperCount: number;
+  totalDuration: number;
+  minNps: number;
+  maxNps: number;
+  upVotes: number;
+  downVotes: number;
+  avgScore: number;
+  [key: string]: unknown;
+}
+
+export interface PlaylistBasic {
+  playlistId: number;
+  playlistImage: string;
+  name: string;
+  type: string;
+  owner: number;
+  config?: unknown;
+  [key: string]: unknown;
+}
+
+export interface PlaylistFull {
+  playlistId: number;
+  name: string;
+  description: string;
+  playlistImage: string;
+  playlistImage512?: string | null;
+  owner: BeatSaverUser;
+  curator?: BeatSaverUser | null;
+  stats?: PlaylistStats | null;
+  createdAt?: string;
+  updatedAt?: string;
+  songsChangedAt?: string | null;
+  curatedAt?: string | null;
+  deletedAt?: string | null;
+  downloadURL: string;
+  type: string;
+  config?: unknown;
+  [key: string]: unknown;
+}
+
+export interface MapMetadata {
+  bpm: number;
+  duration: number;
+  songName: string;
+  songSubName: string;
+  songAuthorName: string;
+  levelAuthorName: string;
+  [key: string]: unknown;
+}
+
+export interface MapStats {
+  plays: number;
+  downloads: number;
+  upvotes: number;
+  downvotes: number;
+  score: number;
+  reviews?: number;
+  sentiment?: unknown;
+  [key: string]: unknown;
+}
+
+export interface MapDifficulty {
+  njs: number;
+  offset: number;
+  notes: number;
+  bombs: number;
+  obstacles: number;
+  nps: number;
+  length: number;
+  characteristic: string;
+  difficulty: string;
+  events: number;
+  chroma: boolean;
+  me: boolean;
+  ne: boolean;
+  cinema: boolean;
+  vivify?: boolean;
+  seconds: number;
+  stars?: number;
+  maxScore: number;
+  label?: string | null;
+  blStars?: number | null;
+  environment?: string | null;
+  [key: string]: unknown;
+}
+
+export interface MapVersion {
+  hash: string;
+  key?: string | null;
+  state: string;
+  createdAt: string;
+  downloadURL: string;
+  coverURL: string;
+  previewURL: string;
+  diffs?: MapDifficulty[];
+  feedback?: string | null;
+  testplayAt?: string | null;
+  testplays?: unknown;
+  scheduledAt?: string | null;
+  [key: string]: unknown;
+}
+
+export interface MapDetail {
+  id: string;
+  name: string;
+  description: string;
+  uploader: BeatSaverUser;
+  metadata: MapMetadata;
+  stats: MapStats;
+  versions: MapVersion[];
+  curator?: BeatSaverUser | null;
+  curatedAt?: string | null;
+  createdAt?: string;
+  updatedAt?: string;
+  lastPublishedAt?: string | null;
+  automapper?: boolean;
+  ranked?: boolean;
+  qualified?: boolean;
+  tags?: unknown;
+  bookmarked?: boolean | null;
+  collaborators?: BeatSaverUser[] | null;
+  declaredAi?: unknown;
+  blRanked?: boolean;
+  blQualified?: boolean;
+  nsfw?: boolean;
+  [key: string]: unknown;
+}
+
+export interface MapDetailWithOrder {
+  map: MapDetail;
+  order: number;
+}
+
+export interface PlaylistPage {
+  playlist: PlaylistFull | null;
+  maps: MapDetailWithOrder[] | null;
+}
+
+export interface PlaylistSearchResponse<T = PlaylistFull> {
+  docs: T[];
+  info?: unknown;
+}
+
+export interface PlaylistSearchParams {
+  query?: string;
+  page?: number;
+  sortOrder?: string;
+  order?: string;
+  ascending?: boolean;
+  includeEmpty?: boolean;
+  curated?: boolean;
+  verified?: boolean;
+  minNps?: number;
+  maxNps?: number;
+  from?: DateInput;
+  to?: DateInput;
+}
+
+export interface PlaylistDetailOptions {
+  page?: number | null;
+  useCache?: boolean;
+}
+
 interface BeatSaverApiOptions {
   cacheExpiryDays?: number;
   cacheDir?: string;
@@ -198,6 +382,90 @@ export class BeatSaverAPI {
     return processed;
   }
 
+  async searchPlaylists(params: PlaylistSearchParams = {}): Promise<PlaylistSearchResponse> {
+    const {
+      query = '',
+      page = 0,
+      sortOrder = 'Relevance',
+      order,
+      ascending,
+      includeEmpty,
+      curated,
+      verified,
+      minNps,
+      maxNps,
+      from,
+      to
+    } = params;
+
+    const normalizeDate = (value?: DateInput): string | undefined => {
+      if (value === undefined || value === null) return undefined;
+      if (value instanceof Date) return value.toISOString();
+      if (typeof value === 'number') return new Date(value).toISOString();
+      return value;
+    };
+
+    const url = `${WEB_API_BASE_URL}/playlists/search/${page}${buildQuery({
+      q: query,
+      sortOrder,
+      order,
+      ascending,
+      includeEmpty,
+      curated,
+      verified,
+      minNps,
+      maxNps,
+      from: normalizeDate(from),
+      to: normalizeDate(to)
+    })}`;
+
+    const res = await this.request(url);
+    if (!res.ok) throw new Error(`BeatSaver searchPlaylists failed: ${res.status}`);
+    return (await res.json()) as PlaylistSearchResponse;
+  }
+
+  async getPlaylistDetail(
+    playlistId: number | string,
+    options: PlaylistDetailOptions = {}
+  ): Promise<PlaylistPage> {
+    const { page = null, useCache = true } = options;
+    const rawId = String(playlistId);
+    const safeId = encodeURIComponent(rawId);
+    const cacheSafeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '_');
+    const pageSuffix = page === null ? 'detail' : `page_${page}`;
+    const cachePath = this.pathJoin(this.cacheDir, `playlist_${cacheSafeId}_${pageSuffix}.json`);
+
+    if (useCache && (await this.isCacheValid(cachePath))) {
+      const cached = await this.readCache<PlaylistPage>(cachePath);
+      if (cached) return cached;
+    }
+
+    const endpoint =
+      page === null
+        ? `${WEB_API_BASE_URL}/playlists/id/${safeId}`
+        : `${WEB_API_BASE_URL}/playlists/id/${safeId}/${page}`;
+
+    const res = await this.request(endpoint);
+    if (!res.ok) throw new Error(`BeatSaver getPlaylistDetail failed: ${res.status}`);
+    const payload = (await res.json()) as PlaylistPage;
+
+    if (useCache) {
+      await this.writeCache(cachePath, payload);
+    }
+
+    return payload;
+  }
+
+  async getPlaylistMaps(
+    playlistId: number | string,
+    page = 0,
+    options: { useCache?: boolean } = {}
+  ): Promise<MapDetailWithOrder[]> {
+    const { useCache = true } = options;
+    const detail = await this.getPlaylistDetail(playlistId, { page, useCache });
+    return detail.maps ?? [];
+  }
+
   async getMapByHash(mapHash: string): Promise<unknown> {
     const url = `${BASE_URL}/maps/hash/${encodeURIComponent(mapHash)}`;
     const res = await this.request(url);
@@ -263,17 +531,8 @@ export class BeatSaverAPI {
   }
 
   private determineCacheDir(): string {
-    // Prefer ~/.cache/saberlist/beatsaver, fallback to CWD .cache
-    const os = this.osModule();
     const path = this.pathModule();
-    const home = os.homedir?.();
+    return this.pathJoin(process.cwd(), CACHE_ROOT);
-    const homeCache = home ? path.join(home, '.cache') : null;
-    if (homeCache) {
-      const saberlist = path.join(homeCache, 'saberlist');
-      const beatsaver = path.join(saberlist, 'beatsaver');
-      return beatsaver;
-    }
-    return this.pathJoin(process.cwd(), '.cache');
   }
 
   private ensureCacheDir(): void {
@@ -304,26 +563,26 @@ export class BeatSaverAPI {
 
   // Lazy require Node builtins to keep SSR-friendly import graph
   private fsPromises() {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return nodeFs.promises;
-    const fs = require('fs');
-    return fs.promises as typeof import('fs').promises;
   }
   private fsModule() {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return nodeFs;
-    return require('fs') as typeof import('fs');
   }
   private pathModule() {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return nodePath;
-    return require('path') as typeof import('path');
   }
   private osModule() {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return nodeOs;
-    return require('os') as typeof import('os');
   }
 }
 
 export function createBeatSaverAPI(fetchFn: typeof fetch, options: BeatSaverApiOptions = {}): BeatSaverAPI {
-  return new BeatSaverAPI(fetchFn, options);
+  const mergedOptions: BeatSaverApiOptions = {
+    ...options,
+    cacheExpiryDays: options.cacheExpiryDays ?? 90
+  };
+
+  return new BeatSaverAPI(fetchFn, mergedOptions);
 }
 
 

src/lib/server/guestbookStore.ts

@@ -0,0 +1,130 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { randomUUID } from 'node:crypto';
+
+export type GuestbookAuthor = {
+  beatleaderId: string;
+  name: string | null;
+  avatar: string | null;
+  country: string | null;
+  rank: number | null;
+  techPp: number | null;
+  accPp: number | null;
+  passPp: number | null;
+};
+
+export type GuestbookComment = {
+  id: string;
+  message: string;
+  author: GuestbookAuthor;
+  createdAt: number;
+  updatedAt: number | null;
+};
+
+type GuestbookFileData = {
+  comments: GuestbookComment[];
+};
+
+const DATA_DIR = '.data';
+const GUESTBOOK_FILE = 'guestbook.json';
+
+const EMPTY_DATA: GuestbookFileData = { comments: [] };
+
+const CONTROL_CHARS_REGEX = /[\u0000-\u001F\u007F]/g;
+const HTML_TAG_REGEX = /<[^>]*>/g;
+const JAVASCRIPT_PROTOCOL_REGEX = /javascript:/gi;
+
+function sanitizeGuestbookMessage(value: string): string {
+  if (!value) return '';
+  const withoutTags = value.replace(HTML_TAG_REGEX, '');
+  const withoutControl = withoutTags.replace(CONTROL_CHARS_REGEX, ' ');
+  const withoutJsProtocol = withoutControl.replace(JAVASCRIPT_PROTOCOL_REGEX, '');
+  return withoutJsProtocol.trim();
+}
+
+function ensureDataDir(): void {
+  if (!fs.existsSync(DATA_DIR)) {
+    fs.mkdirSync(DATA_DIR, { recursive: true });
+  }
+}
+
+function resolveGuestbookPath(): string {
+  return path.join(process.cwd(), DATA_DIR, GUESTBOOK_FILE);
+}
+
+function loadGuestbookFile(): GuestbookFileData {
+  try {
+    const filePath = resolveGuestbookPath();
+    if (!fs.existsSync(filePath)) {
+      return { ...EMPTY_DATA, comments: [] };
+    }
+    const raw = fs.readFileSync(filePath, 'utf-8');
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object') {
+      return { ...EMPTY_DATA, comments: [] };
+    }
+    const comments = Array.isArray((parsed as GuestbookFileData).comments)
+      ? ((parsed as GuestbookFileData).comments as GuestbookComment[])
+      : [];
+    return { comments };
+  } catch (error) {
+    console.error('Failed to read guestbook store', error);
+    return { ...EMPTY_DATA, comments: [] };
+  }
+}
+
+function persistGuestbookFile(data: GuestbookFileData): void {
+  try {
+    ensureDataDir();
+    fs.writeFileSync(resolveGuestbookPath(), JSON.stringify(data, null, 2), 'utf-8');
+  } catch (error) {
+    console.error('Failed to persist guestbook store', error);
+  }
+}
+
+export function listGuestbookComments(): GuestbookComment[] {
+  const data = loadGuestbookFile();
+  return [...data.comments]
+    .map((comment) => ({ ...comment, message: sanitizeGuestbookMessage(comment.message) }))
+    .sort((a, b) => b.createdAt - a.createdAt);
+}
+
+export function addGuestbookComment(input: {
+  message: string;
+  author: GuestbookAuthor;
+}): GuestbookComment {
+  const data = loadGuestbookFile();
+
+  const sanitizedMessage = sanitizeGuestbookMessage(input.message);
+
+  const comment: GuestbookComment = {
+    id: randomUUID(),
+    message: sanitizedMessage,
+    author: input.author,
+    createdAt: Date.now(),
+    updatedAt: null
+  };
+
+  data.comments.push(comment);
+  persistGuestbookFile(data);
+  return comment;
+}
+
+export function getGuestbookComments(): GuestbookComment[] {
+  return listGuestbookComments();
+}
+
+export function deleteGuestbookComment(id: string, requesterBeatleaderId: string): boolean {
+  if (!id) return false;
+  const data = loadGuestbookFile();
+  const index = data.comments.findIndex(
+    (comment) => comment.id === id && comment.author.beatleaderId === requesterBeatleaderId
+  );
+  if (index === -1) return false;
+
+  data.comments.splice(index, 1);
+  persistGuestbookFile(data);
+  return true;
+}
+
+

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,719 @@
+/**
+ * Shared utilities for PlebSaber tools
+ */
+
+// ============================================================================
+// 1. Type Definitions
+// ============================================================================
+
+export type MapMeta = {
+  songName?: string;
+  key?: string;
+  coverURL?: string;
+  mapper?: string;
+  score?: number;
+};
+
+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,
+  'playlist-discovery': 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,
+      score: typeof data?.stats?.score === 'number' ? data.stats.score : 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 {};
+  }
+}
+
+export async function fetchBeatLeaderPlayerProfile(
+  playerId: string,
+  fetcher?: typeof fetch,
+  authMode: 'steam' | 'oauth' | 'session' | 'auto' | 'none' = 'auto'
+): Promise<BeatLeaderPlayerProfile | null> {
+  const trimmed = playerId?.trim?.();
+  if (!trimmed) return null;
+
+  const callFetch = (fetcher ?? globalThis.fetch) as typeof fetch | undefined;
+  if (!callFetch) return null;
+
+  const search = new URLSearchParams();
+  if (authMode) {
+    search.set('auth', authMode);
+  }
+
+  const url = `/api/beatleader/player/${encodeURIComponent(trimmed)}${search.size ? `?${search.toString()}` : ''}`;
+
+  try {
+    const res = await callFetch(url);
+    if (!res.ok) return null;
+    return (await res.json()) as BeatLeaderPlayerProfile;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * 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/+layout.svelte

@@ -18,9 +18,12 @@
     {@render children?.()}
   </main>
   <footer class="border-t border-white/10 text-sm text-muted/80">
-    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
+     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
-      <span>&copy; {new Date().getFullYear()} plebsaber.stream</span>
+      <a href="https://git.plebsaber.stream/pleb/plebsaber.stream" class="inline-flex items-center gap-2 text-neon hover:underline">
-      <a href="https://svelte.dev" class="hover:underline text-muted">Built with SvelteKit</a>
+        <img src="https://git.plebsaber.stream/assets/img/logo.svg" alt="Gitea" class="h-4 w-4" />
+        <span>Source code</span>
+      </a> 
+       <a href="https://svelte.dev" class="hover:underline text-muted">Built with SvelteKit, and <span class="text-neon-fuchsia" style="text-shadow: 0 0 8px rgba(255,0,229,0.6);">❤️</span></a>
     </div>
   </footer>
 </div>

src/routes/+page.svelte

@@ -1,10 +1,14 @@
+<script lang="ts">
+  import Guestbook from '$lib/components/Guestbook.svelte';
+</script>
+
 <section class="grid items-center gap-10 py-12 md:py-20 lg:grid-cols-2">
   <div class="space-y-6">
     <h1 class="font-display text-4xl sm:text-5xl lg:text-6xl leading-tight">
       helper tools  for <span class="neon-text">Beat Saber</span>
     </h1>
     <p class="max-w-prose text-lg text-muted">
-      Notes about how things work, helpers and utilities.
+      Notes about how things work and utilities for finding maps to play.
     </p>
     <div class="flex flex-wrap gap-3">
       <a href="/tools" class="btn-neon">Explore Tools</a>
@@ -16,32 +20,42 @@
     <div class="absolute -inset-6 bg-gradient-to-tr from-neon/20 via-transparent to-neon-fuchsia/20 blur-2xl rounded-3xl"></div>
   <div class="relative card-surface p-6 sm:p-8">
     <div class="grid grid-cols-2 gap-4">
-      <a href="/tools/beatleader-compare" class="rounded-lg bg-black/30 ring-1 ring-white/10 p-4 block hover:ring-white/20 transition">
+      <a href="/tools/compare-histories" class="rounded-lg bg-black/30 ring-1 ring-white/10 p-4 block hover:ring-white/20 transition">
         <div class="text-sm text-muted">Tool</div>
-        <div class="mt-1 text-2xl font-mono">BeatLeader Compare</div>
+        <div class="mt-1 text-2xl font-mono">Player History Comparison</div>
         <div class="mt-1 text-sm text-muted">A vs B: songs A played that B has not</div>
       </a>
-      
+      <a href="/tools/playlist-discovery" class="rounded-lg bg-black/30 ring-1 ring-white/10 p-4 block hover:ring-white/20 transition">
+        <div class="text-sm text-muted">Tool</div>
+        <div class="mt-1 text-2xl font-mono">Playlist Discovery</div>
+        <div class="mt-1 text-sm text-muted">Experimental UX for browsing new playlists on BeatSaver</div>
+      </a>
     </div>
   </div>
   </div>
 </section>
 
-<section class="py-10">
+<section class="py-12">
-  <div class="prose prose-invert max-w-none">
+  <div class="grid gap-10 xl:gap-14 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] items-start">
-    <h2 class="font-display tracking-widest">Latest Guides</h2>
+    <div class="space-y-6">
-  </div>
+      <div class="prose prose-invert max-w-none">
-  <div class="not-prose mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <h2 class="font-display tracking-widest">Latest Guides</h2>
-    <a href="/guides/finding-new-songs" class="card-surface p-5 block">
+      </div>
-      <div class="text-sm text-muted">Guide</div>
+      <div class="not-prose grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-      <h3 class="font-semibold mt-1">Finding New Songs (BeatLeader)</h3>
+        <a href="/guides/finding-new-songs" class="card-surface p-5 block">
-      <p class="mt-1 text-sm text-muted">Month-by-month search using unranked stars, tech rating, and friend filters.</p>
+          <div class="text-sm text-muted">Guide</div>
-    </a>
+          <h3 class="font-semibold mt-1">Finding New Songs (BeatLeader)</h3>
-    <a href="/guides/beatleader-auth" class="card-surface p-5 block">
+          <p class="mt-1 text-sm text-muted">Month-by-month search using unranked stars, tech rating, and friend filters.</p>
-      <div class="text-sm text-muted">Guide</div>
+        </a>
-      <h3 class="font-semibold mt-1">BeatLeader Authentication</h3>
+        <a href="/guides/beatleader-auth" class="card-surface p-5 block">
-      <p class="mt-1 text-sm text-muted">Connect BeatLeader and enable unranked stars in tools.</p>
+          <div class="text-sm text-muted">Guide</div>
-    </a>
+          <h3 class="font-semibold mt-1">BeatLeader Authentication</h3>
+          <p class="mt-1 text-sm text-muted">Connect BeatLeader and enable unranked stars in tools.</p>
+        </a>
+      </div>
+    </div>
+
+    <Guestbook />
   </div>
 </section>
 

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/api/guestbook/+server.ts

@@ -0,0 +1,221 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import {
+  addGuestbookComment,
+  deleteGuestbookComment,
+  getGuestbookComments,
+  type GuestbookAuthor
+} from '$lib/server/guestbookStore';
+import { getSession } from '$lib/server/sessionStore';
+
+const MAX_COMMENT_LENGTH = 2000;
+const PLAYER_ENDPOINT = 'https://api.beatleader.com/player/';
+const DEFAULT_PAGE_SIZE = 5;
+const MAX_PAGE_SIZE = 50;
+
+type GuestbookViewer = {
+  beatleaderId: string;
+  name: string | null;
+  avatar: string | null;
+};
+
+type GuestbookResponse = {
+  viewer: GuestbookViewer | null;
+  comments: ReturnType<typeof getGuestbookComments>;
+  pagination: {
+    total: number;
+    offset: number;
+    limit: number;
+    hasPrev: boolean;
+    hasNext: boolean;
+  };
+};
+
+function mapSessionToViewer(session: ReturnType<typeof getSession>): GuestbookViewer | null {
+  if (!session) return null;
+  return {
+    beatleaderId: session.beatleaderId,
+    name: session.name ?? null,
+    avatar: session.avatar ?? null
+  };
+}
+
+async function buildAuthor(session: NonNullable<ReturnType<typeof getSession>>, fetchFn: typeof fetch): Promise<GuestbookAuthor> {
+  const base: GuestbookAuthor = {
+    beatleaderId: session.beatleaderId,
+    name: session.name ?? null,
+    avatar: session.avatar ?? null,
+    country: null,
+    rank: null,
+    techPp: null,
+    accPp: null,
+    passPp: null
+  };
+
+  try {
+    const res = await fetchFn(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
+    if (!res.ok) return base;
+    const data = (await res.json()) as Record<string, unknown>;
+    return {
+      beatleaderId: session.beatleaderId,
+      name: typeof data.name === 'string' ? (data.name as string) : base.name,
+      avatar: typeof data.avatar === 'string' ? (data.avatar as string) : base.avatar,
+      country: typeof data.country === 'string' ? (data.country as string) : base.country,
+      rank: typeof data.rank === 'number' ? (data.rank as number) : base.rank,
+      techPp: typeof data.techPp === 'number' ? (data.techPp as number) : base.techPp,
+      accPp: typeof data.accPp === 'number' ? (data.accPp as number) : base.accPp,
+      passPp: typeof data.passPp === 'number' ? (data.passPp as number) : base.passPp
+    };
+  } catch (error) {
+    console.error('Failed to load BeatLeader profile for guestbook author', error);
+    return base;
+  }
+}
+
+function sanitizeMessage(value: unknown): { ok: true; message: string } | { ok: false; error: string } {
+  if (typeof value !== 'string') {
+    return { ok: false, error: 'Message must be a string' };
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return { ok: false, error: 'Message cannot be empty' };
+  }
+  if (trimmed.length > MAX_COMMENT_LENGTH) {
+    return { ok: false, error: `Message exceeds ${MAX_COMMENT_LENGTH} characters` };
+  }
+  return { ok: true, message: trimmed };
+}
+
+function parseLimit(value: string | null): number {
+  if (!value) return DEFAULT_PAGE_SIZE;
+  const parsed = Math.floor(Number(value));
+  if (!Number.isFinite(parsed) || parsed <= 0) return DEFAULT_PAGE_SIZE;
+  return Math.min(MAX_PAGE_SIZE, parsed);
+}
+
+function parseOffset(value: string | null): number {
+  if (!value) return 0;
+  const parsed = Math.floor(Number(value));
+  if (!Number.isFinite(parsed) || parsed <= 0) return 0;
+  return parsed;
+}
+
+function clampOffset(offset: number, total: number): number {
+  if (total <= 0) return 0;
+  const safeOffset = Math.max(0, Math.floor(offset));
+  const maxOffset = Math.max(0, total - 1);
+  return Math.min(safeOffset, maxOffset);
+}
+
+function buildGuestbookPayload(
+  session: ReturnType<typeof getSession>,
+  limit: number,
+  offset: number
+): GuestbookResponse {
+  const allComments = getGuestbookComments();
+  const total = allComments.length;
+  const safeLimit = Math.max(1, Math.min(MAX_PAGE_SIZE, Math.floor(limit)));
+  const safeOffset = clampOffset(offset, total);
+  const pageComments = allComments.slice(safeOffset, safeOffset + safeLimit);
+
+  return {
+    viewer: mapSessionToViewer(session),
+    comments: pageComments,
+    pagination: {
+      total,
+      offset: safeOffset,
+      limit: safeLimit,
+      hasPrev: safeOffset > 0,
+      hasNext: safeOffset + safeLimit < total
+    }
+  };
+}
+
+function jsonResponse(payload: GuestbookResponse, init?: ResponseInit): Response {
+  return new Response(JSON.stringify(payload), {
+    headers: { 'content-type': 'application/json' },
+    ...init
+  });
+}
+
+export const GET: RequestHandler = ({ cookies, url }) => {
+  const session = getSession(cookies);
+  const limit = parseLimit(url.searchParams.get('limit'));
+  const offset = parseOffset(url.searchParams.get('offset'));
+
+  return jsonResponse(buildGuestbookPayload(session, limit, offset));
+};
+
+export const POST: RequestHandler = async ({ request, 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' } }
+    );
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return new Response(JSON.stringify({ error: 'Invalid JSON body' }), {
+      status: 400,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  const sanitizedMessage = sanitizeMessage((body as Record<string, unknown>)?.message);
+  if (!sanitizedMessage.ok) {
+    return new Response(JSON.stringify({ error: sanitizedMessage.error }), {
+      status: 400,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  const { message } = sanitizedMessage;
+
+  try {
+    const author = await buildAuthor(session, fetch);
+    addGuestbookComment({ message, author });
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : 'Failed to save comment';
+    return new Response(JSON.stringify({ error: msg }), {
+      status: 400,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  return jsonResponse(buildGuestbookPayload(session, DEFAULT_PAGE_SIZE, 0), { status: 201 });
+};
+
+export const DELETE: RequestHandler = ({ url, cookies }) => {
+  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 id = url.searchParams.get('id') || null;
+  if (!id) {
+    return new Response(JSON.stringify({ error: 'Missing comment id' }), {
+      status: 400,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  const success = deleteGuestbookComment(id, session.beatleaderId);
+  if (!success) {
+    return new Response(JSON.stringify({ error: 'Comment not found or not owned by you' }), {
+      status: 404,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  const limit = parseLimit(url.searchParams.get('limit'));
+  const offset = parseOffset(url.searchParams.get('offset'));
+  return jsonResponse(buildGuestbookPayload(session, limit, offset), { status: 200 });
+};
+
+

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);
+      return new Response('Failed to retrieve identity', { status: 502 });
     }
-  } catch {}
+
+    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,16 @@
+<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>
+  <p>The best starting point for reading about Beat Saber is the <a href="https://bsmg.wiki" target="_blank" rel="noreferrer">bsmg.wiki</a>, and then <a href="https://bsaber.com" target="_blank" rel="noreferrer">Beast Saber</a>. This page has some complementary community-written advice for finding maps to play and maps to <code>!bsr</code> your favorite Twitch streamers. 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">
+      <a href="/guides/beatleader-auth" class="card-surface p-5 block">
-      <h3 class="font-semibold">BeatLeader Authentication</h3>
+        <h3 class="font-semibold">BeatLeader Authentication</h3>
-      <p class="mt-1 text-sm text-muted">Connect BeatLeader to enhance tools like Compare Players.</p>
+        <p class="mt-1 text-sm text-muted">Connect BeatLeader to enhance tools like Compare Players.</p>
-    </a>
+      </a>
     <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.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/compare-histories">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.
@@ -98,7 +97,7 @@
     <li><code>scp:offline_access</code> to refresh your session without re‑prompting (optional).</li>
   </ul>
   <p>
-    You can still login with OAuth when needed: <a class="btn-neon" href="/auth/beatleader/login?redirect_uri=%2Ftools%2Fbeatleader-compare">Login with BeatLeader (OAuth)</a>
+    You can still login with OAuth when needed: <a class="btn-neon" href="/auth/beatleader/login?redirect_uri=%2Ftools%2Fcompare-histories">Login with BeatLeader (OAuth)</a>
   </p>
   <p>
     After OAuth login, we attempt to enable <code>ShowAllRatings</code> automatically. If your BL account is not a supporter, BL will ignore it.
@@ -143,7 +142,7 @@
   <h2 id="setup">OAuth App Setup (for developers)</h2>
   <ol>
     <li>
-      Configure BeatLeader OAuth credentials here: <a href="/tools/beatleader-oauth">BL OAuth Setup</a>.
+      Configure BeatLeader OAuth credentials here: <strike>BL OAuth Setup</strike>.
       If you already have credentials, you can paste them there.
     </li>
     <li>

src/routes/guides/finding-new-songs/+page.svelte

@@ -1,7 +1,7 @@
 <section class="py-8 prose prose-invert max-w-none">
   <h1 class="font-display tracking-widest">Finding New Songs with BeatLeader</h1>
   <p>
-    A fast, repeatable workflow to discover fresh maps using BeatLeader’s powerful search. It relies on
+    A slow, but repeatable workflow to discover fresh maps using BeatLeader’s powerful search. This relies on
     supporter‑only unranked star ratings (<code>ShowAllRatings</code>) and sorts by <strong>techRating</strong> to surface interesting patterns.
   </p>
 
@@ -16,11 +16,11 @@
   <h2 id="requirements">Requirements</h2>
   <ul>
     <li><strong>BeatLeader supporter</strong> role on your BL account (Patreon/tipper/supporter/sponsor).</li>
-    <li><strong><code>ShowAllRatings</code></strong> enabled on your BL profile. See <a href="/guides/beatleader-auth">BeatLeader Authentication</a> for how to sign in and enable it.</li>
+    <li><strong><code>ShowAllRatings</code></strong> enabled on your BL profile. Navigate to  the Leaderboard section in <a href="https://beatleader.com/settings#leaderboard" target="_blank" rel="noreferrer">Beatleader settings</a> and enable "Show rating for all maps"</li>
   </ul>
 
   <h2 id="search-setup">Search setup</h2>
-  <p>Use the BeatLeader maps search with these filters:</p>
+  <p>Use the BeatLeader map search with these filters:</p>
   <ul>
     <li><strong>Date range</strong>: pick a single month (e.g., Dec 1 → Jan 1). Iterate month by month.</li>
     <li><strong>Stars</strong>: set a band to control density and overall difficulty (e.g., <strong>8–10</strong> for fun, <strong>6–8</strong> for warm‑ups).</li>

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,10 @@
 
   <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' },
+      { name: 'Playlist Discovery', href: '/tools/playlist-discovery', desc: 'Browse verified BeatSaver playlists sorted by recency' }
     ] 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,297 @@
+<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 max-w-2xl">
+    Maps Player A has played that Player B has not.
+    This tool can be useful for finding songs to <code>!bsr</code> in Twitch streams, so we can recommend songs that we've played that the streamer has not.
+  </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}
+              score={metaByHash[item.hash]?.score}
+            />
+          </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,704 @@
+<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 max-w-2xl">
+    Compare two players on maps they've both played.
+  </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}
+              score={metaByHash[item.hash]?.score}
+            >
+              <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,602 @@
+<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,
+    fetchBeatLeaderPlayerProfile,
+    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 fetchBeatLeaderPlayerProfile(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 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),
+        fetchBeatLeaderPlayerProfile(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/playlist-discovery/+page.server.ts

@@ -0,0 +1,122 @@
+import {
+  createBeatSaverAPI,
+  type PlaylistFull,
+  type PlaylistSearchParams,
+  type PlaylistSearchResponse
+} from '$lib/server/beatsaver';
+import type { PageServerLoad } from './$types';
+
+function parsePositiveInt(value: string | null, fallback: number): number {
+  if (!value) return fallback;
+  const parsed = Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
+  return parsed;
+}
+
+const SORT_ORDER_VALUES = ['Latest', 'Relevance', 'Curated'] as const;
+type SortOrderOption = (typeof SORT_ORDER_VALUES)[number];
+const SORT_ORDER_SET = new Set<string>(SORT_ORDER_VALUES);
+const DEFAULT_SORT_ORDER: SortOrderOption = 'Latest';
+
+function parseSortOrder(value: string | null): SortOrderOption {
+  if (!value) return DEFAULT_SORT_ORDER;
+  const normalized = value.trim();
+  return SORT_ORDER_SET.has(normalized) ? (normalized as SortOrderOption) : DEFAULT_SORT_ORDER;
+}
+
+type SearchInfoShape = {
+  page?: number;
+  pages?: number;
+  total?: number;
+  size?: number;
+  itemsPerPage?: number;
+};
+
+export const load: PageServerLoad = async ({ url, fetch, parent }) => {
+  const parentData = await parent();
+  const requestedPage = parsePositiveInt(url.searchParams.get('page'), 1);
+  const pageIndex = requestedPage - 1;
+
+  const api = createBeatSaverAPI(fetch);
+  const MIN_MAPS = 3;
+  const hasSubmitted = url.searchParams.has('submitted');
+  const rawQuery = url.searchParams.get('q') ?? '';
+  const query = rawQuery.trim();
+  const rawSortOrder = url.searchParams.get('order') ?? url.searchParams.get('sortOrder');
+  const sortOrder = parseSortOrder(rawSortOrder);
+  const curated = url.searchParams.has('curated');
+  const verified = url.searchParams.has('verified') ? true : hasSubmitted ? false : true;
+
+  const searchState = {
+    submitted: hasSubmitted,
+    query,
+    sortOrder,
+    curated,
+    verified
+  };
+
+  const searchParams: PlaylistSearchParams = {
+    page: pageIndex,
+    sortOrder,
+    includeEmpty: false
+  };
+
+  if (query) {
+    searchParams.query = query;
+  }
+  if (curated) {
+    searchParams.curated = true;
+  }
+  if (verified) {
+    searchParams.verified = true;
+  }
+
+  try {
+    const response = (await api.searchPlaylists({
+      ...searchParams
+    })) as PlaylistSearchResponse<PlaylistFull>;
+    const docsRaw = Array.isArray(response?.docs) ? response.docs : [];
+    const docs = docsRaw.filter((playlist) => {
+      const totalMaps = playlist?.stats?.totalMaps ?? 0;
+      return Number.isFinite(totalMaps) && totalMaps >= MIN_MAPS;
+    });
+    const info = (response?.info && typeof response.info === 'object' ? (response.info as SearchInfoShape) : null) ?? null;
+
+    const infoPage = typeof info?.page === 'number' ? info.page : pageIndex;
+    const currentPage = infoPage + 1;
+    const totalPages = typeof info?.pages === 'number' ? info.pages : null;
+    const total = typeof info?.total === 'number' ? info.total : null;
+    const pageSize = typeof info?.size === 'number'
+      ? info.size
+      : typeof info?.itemsPerPage === 'number'
+        ? info.itemsPerPage
+        : docs.length;
+
+    return {
+      ...parentData,
+      playlists: docs,
+      info,
+      page: currentPage,
+      totalPages,
+      total,
+      pageSize,
+      error: null,
+      search: searchState
+    };
+  } catch (err) {
+    console.error('Failed to load BeatSaver playlists', err);
+    return {
+      ...parentData,
+      playlists: [] as PlaylistFull[],
+      info: null,
+      page: requestedPage,
+      totalPages: null,
+      total: null,
+      pageSize: 0,
+      error: err instanceof Error ? err.message : 'Failed to load playlists',
+      search: searchState
+    };
+  }
+};
+
+

src/routes/tools/playlist-discovery/+page.svelte

@@ -0,0 +1,928 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import HasToolAccess from '$lib/components/HasToolAccess.svelte';
+  import ScoreBar from '$lib/components/ScoreBar.svelte';
+  import PlaylistSongCard from './PlaylistSongCard.svelte';
+  import type { MapDetailWithOrder, MapDetail, MapVersion, MapDifficulty, PlaylistFull } from '$lib/server/beatsaver';
+  import type { BeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
+  import { TOOL_REQUIREMENTS } from '$lib/utils/plebsaber-utils';
+
+  const SORT_OPTIONS = ['Latest', 'Relevance', 'Curated'] as const;
+  type SortOrderOption = (typeof SORT_OPTIONS)[number];
+  type SearchState = {
+    submitted: boolean;
+    query: string;
+    sortOrder: SortOrderOption;
+    curated: boolean;
+    verified: boolean;
+  };
+
+  type PlaylistWithStats = PlaylistFull & { stats?: PlaylistFull['stats'] };
+
+  type PlaylistSongCardData = {
+    id: string;
+    hash: string;
+    coverURL?: string;
+    songName: string;
+    mapper?: string;
+    timeset?: number;
+    diffName: string;
+    modeName: string;
+    beatsaverKey?: string;
+    publishedLabel: string;
+    score?: number | null;
+  };
+
+  type PlaylistState = {
+    loading: boolean;
+    maps: PlaylistSongCardData[];
+    error: string | null;
+    total: number | null;
+    offset: number;
+  };
+
+  const SONGS_PER_PAGE = 12;
+
+  export let data: {
+    playlists: PlaylistWithStats[];
+    page: number;
+    totalPages: number | null;
+    total: number | null;
+    pageSize: number;
+    error: string | null;
+    player: BeatLeaderPlayerProfile | null;
+    adminRank: number | null;
+    adminPlayer: BeatLeaderPlayerProfile | null;
+    search: SearchState;
+  };
+
+  const requirement = TOOL_REQUIREMENTS['playlist-discovery'];
+
+  const playlistBaseUrl = 'https://beatsaver.com/playlists/';
+  const profileBaseUrl = 'https://beatsaver.com/profile/';
+
+  let searchForm: HTMLFormElement | null = null;
+  let appliedSearch: SearchState = {
+    submitted: false,
+    query: '',
+    sortOrder: 'Latest',
+    curated: false,
+    verified: true
+  };
+  let searchQuery = appliedSearch.query;
+  let sortOrder: SortOrderOption = appliedSearch.sortOrder;
+  let curated = appliedSearch.curated;
+  let verified = appliedSearch.verified;
+  let lastSearchKey = '';
+
+  $: appliedSearch = {
+    submitted: data?.search?.submitted ?? false,
+    query: data?.search?.query ?? '',
+    sortOrder: (data?.search?.sortOrder ?? 'Latest') as SortOrderOption,
+    curated: Boolean(data?.search?.curated),
+    verified: data?.search?.verified ?? true
+  };
+
+  $: if (data) {
+    searchQuery = appliedSearch.query;
+    sortOrder = appliedSearch.sortOrder;
+    curated = appliedSearch.curated;
+    verified = appliedSearch.verified;
+  }
+
+  $: playlists = data?.playlists ?? [];
+  $: page = data?.page ?? 1;
+  $: totalPages = data?.totalPages ?? null;
+  $: total = data?.total ?? null;
+  $: pageSize = data?.pageSize ?? 0;
+
+  $: hasPrev = page > 1;
+  $: hasNext = totalPages != null ? page < totalPages : playlists.length > 0 && playlists.length === pageSize;
+  $: prevHref = hasPrev ? buildPageHref(page - 1) : null;
+  $: nextHref = hasNext ? buildPageHref(page + 1) : null;
+
+  let expanded: Record<number, boolean> = {};
+  let playlistState: Record<number, PlaylistState> = {};
+
+  $: {
+    const currentKey = JSON.stringify({
+      page,
+      query: appliedSearch.query,
+      sortOrder: appliedSearch.sortOrder,
+      curated: appliedSearch.curated,
+      verified: appliedSearch.verified
+    });
+    if (currentKey !== lastSearchKey) {
+      lastSearchKey = currentKey;
+      expanded = {};
+      playlistState = {};
+    }
+  }
+
+  type PresetKey = 'default' | 'picks' | 'packs';
+
+  function buildPageHref(targetPage: number): string {
+    const params = new URLSearchParams();
+    params.set('page', String(targetPage));
+    params.set('submitted', '1');
+    if (appliedSearch.query) params.set('q', appliedSearch.query);
+    if (appliedSearch.sortOrder) params.set('order', appliedSearch.sortOrder);
+    if (appliedSearch.curated) params.set('curated', 'on');
+    if (appliedSearch.verified) params.set('verified', 'on');
+    return `?${params.toString()}`;
+  }
+
+  async function submitSearch() {
+    await tick();
+    searchForm?.requestSubmit();
+  }
+
+  async function applyPreset(preset: PresetKey) {
+    switch (preset) {
+      case 'default':
+        searchQuery = '';
+        sortOrder = 'Latest';
+        curated = false;
+        verified = true;
+        break;
+      case 'picks':
+        searchQuery = 'picks';
+        sortOrder = 'Latest';
+        curated = false;
+        verified = false;
+        break;
+      case 'packs':
+        searchQuery = 'pack';
+        sortOrder = 'Latest';
+        curated = false;
+        verified = true;
+        break;
+    }
+
+    await submitSearch();
+  }
+
+function togglePlaylist(id: number) {
+  const currentlyExpanded = Boolean(expanded[id]);
+  const nextExpanded: Record<number, boolean> = {};
+  if (!currentlyExpanded) {
+    nextExpanded[id] = true;
+  }
+  expanded = nextExpanded;
+  if (!currentlyExpanded) {
+    const state = playlistState[id];
+    const currentOffset = state && typeof state.offset === 'number' ? state.offset : 0;
+    loadPlaylistMaps(id, currentOffset);
+  }
+}
+
+  async function loadPlaylistMaps(id: number, offset = 0) {
+    playlistState = {
+      ...playlistState,
+      [id]: { loading: true, maps: playlistState[id]?.maps ?? [], error: null, total: playlistState[id]?.total ?? null, offset }
+    };
+    try {
+      const res = await fetch(`/tools/playlist-discovery/playlist?id=${encodeURIComponent(String(id))}&offset=${offset}`);
+      if (!res.ok) throw new Error(`Failed to load playlist ${id}: ${res.status}`);
+      const payload = (await res.json()) as { maps?: MapDetailWithOrder[] | null; totalCount?: number | null; offset: number; pageSize?: number };
+      const maps = Array.isArray(payload?.maps) ? payload.maps : [];
+      const cards = maps
+        .map((entry) => mapEntryToCard(entry))
+        .filter((card): card is PlaylistSongCardData => card !== null);
+      playlistState = {
+        ...playlistState,
+        [id]: {
+          loading: false,
+          maps: cards,
+          error: null,
+          total:
+            typeof payload?.totalCount === 'number'
+              ? payload.totalCount
+              : playlistState[id]?.total ?? (offset + cards.length),
+          offset: payload?.offset ?? offset
+        }
+      };
+    } catch (err) {
+      playlistState = {
+        ...playlistState,
+        [id]: { loading: false, maps: [], error: err instanceof Error ? err.message : 'Failed to load playlist songs', total: null, offset }
+      };
+    }
+  }
+
+  function getPublishedVersion(map: MapDetail | undefined | null) {
+    const versions = map?.versions ?? [];
+    return versions.find((v) => v.state === 'Published') ?? versions[0];
+  }
+
+  function getPrimaryDifficulty(version: MapVersion | undefined | null): MapDifficulty | null {
+    const diffs = version?.diffs ?? [];
+    return diffs.length > 0 ? diffs[0] : null;
+  }
+
+  function toEpochSeconds(value: string | undefined | null): number | undefined {
+    if (!value) return undefined;
+    const ts = Date.parse(value);
+    if (Number.isNaN(ts)) return undefined;
+    return Math.floor(ts / 1000);
+  }
+
+  function formatDate(value: string | undefined | null): string {
+    if (!value) return '';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return '';
+    return date.toLocaleDateString();
+  }
+
+  function mapEntryToCard(entry: MapDetailWithOrder): PlaylistSongCardData | null {
+    const rawMap = (entry as unknown as { map?: MapDetail }).map ?? (entry as unknown as MapDetail);
+    if (!rawMap) return null;
+
+    const versions = rawMap.versions ?? [];
+    const version = getPublishedVersion(rawMap) ?? versions[0] ?? null;
+    const diff = version ? getPrimaryDifficulty(version) : null;
+    const published = rawMap.lastPublishedAt ?? rawMap.createdAt ?? rawMap.updatedAt ?? version?.createdAt ?? null;
+    const hash = version?.hash ?? rawMap.id ?? rawMap.hash ?? null;
+    if (!hash) return null;
+
+    const beatsaverKey = version?.key ?? rawMap.id ?? undefined;
+    const coverURL = version?.coverURL ?? rawMap.coverURL ?? undefined;
+    const diffName = diff?.difficulty ?? 'Unknown';
+    const modeName = diff?.characteristic ?? 'Standard';
+
+    return {
+      id: rawMap.id ?? hash,
+      hash,
+      coverURL,
+      songName: rawMap.name,
+      mapper: rawMap.uploader?.name ?? undefined,
+      timeset: toEpochSeconds(published),
+      diffName,
+      modeName,
+      beatsaverKey,
+      publishedLabel: formatDate(published),
+      score: typeof rawMap.stats?.score === 'number' ? rawMap.stats.score : null
+    };
+  }
+
+  function isFiniteScore(value: number | undefined | null): value is number {
+    return typeof value === 'number' && Number.isFinite(value);
+  }
+
+  function playlistLink(id: number | string | undefined): string {
+    if (id === undefined || id === null) return playlistBaseUrl;
+    return `${playlistBaseUrl}${id}`;
+  }
+
+  function profileLink(id: number | string | undefined): string {
+    if (id === undefined || id === null) return profileBaseUrl;
+    return `${profileBaseUrl}${id}#playlists`;
+  }
+
+  function sanitizeDescription(value: string | null | undefined): string {
+    if (!value) return '';
+    return value.replace(/[^a-zA-Z0-9 ]+/g, ' ').replace(/\s+/g, ' ').trim();
+  }
+
+  function truncateTitle(value: string | null | undefined, maxLength = 20): string {
+    if (!value) return '';
+    if (value.length <= maxLength) return value;
+    const sliced = value.slice(0, maxLength - 1).trimEnd();
+    return `${sliced}…`;
+  }
+</script>
+
+<section class="py-8">
+  <h1 class="font-display text-3xl sm:text-4xl">Playlist Discovery</h1>
+  <p class="mt-2 text-muted max-w-2xl">
+    This page is a UI/UX experiment that shows playlists with a reactive interface for previewing map ratings and listening to song previews.
+    See <strong><a href="https://bsaber.com/playlists" target="_blank" rel="noreferrer">Featured Packs</a> on Beast Saber</strong> for curated map packs.
+  </p>
+
+  <HasToolAccess player={data?.player ?? null} requirement={requirement} adminRank={data?.adminRank ?? null} adminPlayer={data?.adminPlayer ?? null}>
+    <form class="search-form card-surface" method="GET" bind:this={searchForm}>
+      <input type="hidden" name="submitted" value="1" />
+      <input type="hidden" name="page" value="1" />
+
+      <div class="search-grid">
+        <label class="form-field search-query">
+          <span class="form-label">Search</span>
+          <input type="search" name="q" placeholder="Search playlists" bind:value={searchQuery} />
+        </label>
+        <label class="form-field sort-field">
+          <span class="form-label">Sort order</span>
+          <select name="order" bind:value={sortOrder} on:change={submitSearch}>
+            {#each SORT_OPTIONS as option}
+              <option value={option}>{option}</option>
+            {/each}
+          </select>
+        </label>
+      </div>
+
+      <div class="search-filters">
+        <label class="filter-checkbox">
+          <input type="checkbox" name="curated" value="on" bind:checked={curated} on:change={submitSearch} />
+          <span>Curated playlists</span>
+        </label>
+        <label class="filter-checkbox">
+          <input type="checkbox" name="verified" value="on" bind:checked={verified} on:change={submitSearch} />
+          <span>Playlists from verified mappers</span>
+        </label>
+      </div>
+
+      <div class="search-actions">
+        <button class="form-btn primary" type="submit">Search</button>
+        <div class="preset-group">
+          <span class="preset-label">Presets:</span>
+          <button class="form-btn secondary" type="button" on:click={() => applyPreset('packs')}>
+            Map Packs
+          </button>
+          <button class="form-btn secondary" type="button" on:click={() => applyPreset('picks')}>
+            Picks
+          </button>
+        </div>
+      </div>
+    </form>
+
+    {#if data?.error}
+      <div class="mt-6 rounded-md border border-danger/40 bg-danger/10 px-4 py-3 text-danger text-sm">
+        {data.error}
+      </div>
+    {/if}
+
+    {#if !data?.error && playlists.length === 0}
+      <div class="mt-6 text-muted">No playlists found for this page.</div>
+    {/if}
+
+    {#if playlists.length > 0}
+      <div class="mt-6 flex flex-wrap items-center gap-3 text-sm text-muted">
+        <span>Page {page} {#if totalPages}of {totalPages}{/if}</span>
+        {#if total != null}
+          <span>({total.toLocaleString()} total playlists)</span>
+        {/if}
+      </div>
+
+      <div class="mt-6 playlists-grid">
+        {#each playlists as playlist (playlist.playlistId)}
+          {@const displayName = truncateTitle(playlist.name)}
+          {@const description = sanitizeDescription(playlist.description ?? '')}
+          <article class:expanded={Boolean(expanded[playlist.playlistId])} class="playlist-tile card-surface">
+            <button class="tile-header" type="button" on:click={() => togglePlaylist(playlist.playlistId)}>
+              <div class="tile-cover">
+                <img src={playlist.playlistImage} alt={`Playlist cover for ${playlist.name}`} loading="lazy" />
+              </div>
+              <div class="tile-main">
+                <div class="tile-title">
+                  <a
+                    href={playlistLink(playlist.playlistId)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    on:click|stopPropagation
+                    title={playlist.name}
+                  >
+                    {displayName}
+                  </a>
+                  <span class="map-count">{playlist.stats?.totalMaps ?? 0} maps</span>
+                </div>
+                {#if isFiniteScore(playlist.stats?.avgScore)}
+                  <div class="tile-score">
+                    <ScoreBar value={playlist.stats?.avgScore ?? null} size="sm" />
+                  </div>
+                {/if}
+                <div class="tile-sub">
+                  <span>
+                    by
+                    {#if playlist.owner?.name}
+                      <a href={profileLink(playlist.owner.id)} target="_blank" rel="noopener noreferrer" on:click|stopPropagation>
+                        {playlist.owner.name}
+                      </a>
+                    {:else}
+                      Unknown curator
+                    {/if}
+                  </span>
+                </div>
+              </div>
+              <div class:arrow-expanded={Boolean(expanded[playlist.playlistId])} class="tile-arrow" aria-hidden="true">
+                <svg viewBox="0 0 24 24" width="20" height="20" role="presentation">
+                  <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </div>
+            </button>
+
+            {#if expanded[playlist.playlistId]}
+              {@const state = playlistState[playlist.playlistId]}
+              {@const offset = state?.offset ?? 0}
+              {@const total = typeof state?.total === 'number' ? state.total : null}
+              {@const currentCount = state?.maps?.length ?? 0}
+              {@const atFirstPage = offset <= 0}
+              {@const atLastPage = total !== null
+                ? (offset + currentCount) >= total
+                : currentCount < SONGS_PER_PAGE}
+              <div class="tile-body">
+                {#if description}
+                  <div class="tile-description">{description}</div>
+                {/if}
+                {#if state?.loading}
+                  <div class="tile-status">Loading songs…</div>
+                {:else if state?.error}
+                  <div class="tile-status error">{state.error}</div>
+                {:else if state?.maps?.length}
+                  {#if state.total && state.total > SONGS_PER_PAGE}
+                    <div class="tile-pagination">
+                      <button
+                        class="pager-btn"
+                        on:click={() => loadPlaylistMaps(playlist.playlistId, Math.max(0, offset - SONGS_PER_PAGE))}
+                        disabled={state.loading || atFirstPage}
+                      >
+                        Prev {SONGS_PER_PAGE}
+                      </button>
+                      <span class="tile-status">
+                        {#if state.total === 0}
+                          No songs
+                        {:else}
+                          Showing {(state.offset ?? 0) + 1}
+                          -
+                          {Math.min(
+                            (state.offset ?? 0) + state.maps.length,
+                            state.total ?? 0
+                          )}
+                          of {state.total}
+                        {/if}
+                      </span>
+                      <button
+                        class="pager-btn"
+                        on:click={() => loadPlaylistMaps(playlist.playlistId, offset + SONGS_PER_PAGE)}
+                        disabled={state.loading || atLastPage}
+                      >
+                        Next {SONGS_PER_PAGE}
+                      </button>
+                    </div>
+                  {/if}
+                  <div class="songs-grid">
+                    {#each state.maps as card (card.id)}
+                      <PlaylistSongCard
+                        hash={card.hash}
+                        coverURL={card.coverURL}
+                        songName={card.songName}
+                        mapper={card.mapper}
+                        beatsaverKey={card.beatsaverKey}
+                        score={card.score ?? null}
+                      />
+                    {/each}
+                  </div>
+                {:else}
+                  <div class="tile-status">No songs found.</div>
+                {/if}
+              </div>
+            {/if}
+          </article>
+        {/each}
+      </div>
+
+      <div class="mt-8 flex items-center justify-center gap-3">
+        <a class="pager-btn" href={prevHref} aria-disabled={!hasPrev} data-disabled={!hasPrev}>
+          Prev
+        </a>
+        <span class="text-sm text-muted">Page {page}{#if totalPages} / {totalPages}{/if}</span>
+        <a class="pager-btn" href={nextHref} aria-disabled={!hasNext} data-disabled={!hasNext}>
+          Next
+        </a>
+      </div>
+    {/if}
+  </HasToolAccess>
+</section>
+
+<style>
+  .search-form {
+    margin-top: 1.75rem;
+    width: 100%;
+    max-width: 600px;
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .search-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+  }
+
+  .form-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(148, 163, 184, 0.75);
+  }
+
+  .search-query {
+    min-width: 0;
+  }
+
+  .sort-field {
+    max-width: 10em;
+  }
+
+  .form-field input,
+  .form-field select {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 0.5rem;
+    padding: 0.55rem 0.75rem;
+    color: #e2e8f0;
+    font-size: 0.95rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .form-field input::placeholder {
+    color: rgba(148, 163, 184, 0.6);
+  }
+
+  .form-field input:focus,
+  .form-field select:focus {
+    outline: none;
+    border-color: rgba(94, 234, 212, 0.5);
+    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2);
+  }
+
+  .search-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1rem;
+    align-items: stretch;
+  }
+
+  .filter-checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.9rem;
+    color: rgba(226, 232, 240, 0.9);
+    line-height: 1.45;
+    padding: 0.55rem 0.9rem 0.55rem 2.35rem;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 0.5rem;
+    background: rgba(15, 23, 42, 0.6);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    cursor: pointer;
+  }
+
+  .filter-checkbox:hover {
+    border-color: rgba(94, 234, 212, 0.35);
+    background: rgba(15, 23, 42, 0.7);
+  }
+
+  .filter-checkbox:focus-within {
+    border-color: rgba(94, 234, 212, 0.5);
+    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2);
+  }
+
+  .filter-checkbox input {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-shrink: 0;
+  }
+
+  .filter-checkbox span {
+    display: inline-block;
+  }
+
+  .search-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem 1.5rem;
+    align-items: center;
+  }
+
+  .form-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1.25rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    background: rgba(15, 23, 42, 0.5);
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+
+  .form-btn:hover {
+    border-color: rgba(94, 234, 212, 0.5);
+    box-shadow: 0 0 12px rgba(94, 234, 212, 0.2);
+  }
+
+  .form-btn.primary {
+    background: rgba(94, 234, 212, 0.85);
+    border-color: rgba(94, 234, 212, 0.85);
+    color: #0f172a;
+    font-weight: 600;
+  }
+
+  .form-btn.primary:hover {
+    box-shadow: 0 8px 20px rgba(94, 234, 212, 0.25);
+  }
+
+  .form-btn.secondary {
+    background: rgba(15, 23, 42, 0.45);
+  }
+
+  .form-btn:disabled {
+    opacity: 0.45;
+    cursor: default;
+    box-shadow: none;
+    border-color: rgba(148, 163, 184, 0.2);
+  }
+
+  .preset-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .preset-label {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(148, 163, 184, 0.75);
+  }
+
+  @media (max-width: 640px) {
+    .search-form {
+      padding: 1rem;
+    }
+
+    .search-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .sort-field {
+      max-width: none;
+    }
+
+    .search-filters {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .search-actions {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.9rem;
+    }
+
+    .preset-group {
+      justify-content: flex-start;
+    }
+  }
+
+  .playlists-grid {
+    display: grid;
+    gap: 1.25rem;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
+
+  .playlist-tile {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .playlist-tile.expanded {
+    grid-column: 1 / -1;
+  }
+
+  .tile-header {
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.25rem 0.85rem;
+    background: transparent;
+    color: inherit;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .tile-cover {
+    position: relative;
+    width: 88px;
+    height: 88px;
+    border-radius: 0.6rem;
+    overflow: hidden;
+    background: rgba(15, 23, 42, 0.6);
+  }
+
+  .tile-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .tile-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .tile-title {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+  }
+
+  .tile-title a {
+    color: white;
+    font-size: 1.05rem;
+    font-weight: 600;
+    text-decoration: none;
+  }
+
+  .tile-title a:hover {
+    text-decoration: underline;
+  }
+
+  .map-count {
+    font-size: 0.85rem;
+    color: rgba(148, 163, 184, 0.85);
+  }
+
+  .tile-score {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .tile-score :global(.score-meter) {
+    width: 100%;
+    max-width: 280px;
+  }
+
+  .tile-sub {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: rgba(148, 163, 184, 0.95);
+  }
+
+  .tile-sub a {
+    color: var(--color-neon);
+    text-decoration: none;
+  }
+
+  .tile-sub a:hover {
+    text-decoration: underline;
+    color: color-mix(in srgb, var(--color-neon) 80%, white 20%);
+  }
+
+  .tile-arrow {
+    align-self: center;
+    justify-self: center;
+    color: rgba(148, 163, 184, 0.75);
+    transition: transform 0.2s ease, color 0.2s ease;
+  }
+
+  .tile-arrow.arrow-expanded {
+    transform: rotate(180deg);
+    color: var(--color-neon);
+  }
+
+  .tile-body {
+    border-top: 1px solid rgba(148, 163, 184, 0.08);
+    padding: 1rem 1.25rem 1.25rem;
+  }
+
+  .tile-description {
+    font-size: 0.95rem;
+    line-height: 1.45;
+    color: rgba(226, 232, 240, 0.85);
+    background: rgba(15, 23, 42, 0.55);
+    padding: 0.75rem 0.9rem;
+    border-radius: 0.65rem;
+    margin-bottom: 0.9rem;
+  }
+
+  .tile-status {
+    color: rgba(148, 163, 184, 0.95);
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 640px) {
+    .tile-header {
+      grid-template-columns: minmax(64px, 1fr);
+      grid-template-rows: auto auto;
+      justify-items: stretch;
+    }
+
+    .tile-cover {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16 / 9;
+    }
+
+    .tile-arrow {
+      justify-self: end;
+    }
+  }
+
+  .tile-status.error {
+    color: #f87171;
+  }
+
+  .tile-pagination {
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .songs-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (min-width: 960px) {
+    .songs-grid {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (min-width: 1600px) {
+    .songs-grid {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+
+  .pager-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.4rem 1.1rem;
+    border-radius: 0.375rem;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    color: white;
+    font-size: 0.9rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+
+  .pager-btn:hover {
+    border-color: rgba(94, 234, 212, 0.5);
+    box-shadow: 0 0 12px rgba(94, 234, 212, 0.2);
+  }
+
+  .pager-btn[data-disabled='true'] {
+    opacity: 0.45;
+    pointer-events: none;
+  }
+
+  .pager-btn:disabled,
+  .pager-btn:disabled:hover {
+    opacity: 0.45;
+    pointer-events: none;
+    border-color: rgba(148, 163, 184, 0.2);
+    box-shadow: none;
+    cursor: default;
+  }
+
+  .card-surface {
+    background: rgba(15, 23, 42, 0.4);
+    border: 1px solid rgba(148, 163, 184, 0.08);
+    border-radius: 0.75rem;
+    overflow: hidden;
+  }
+
+  .text-danger {
+    color: #f87171;
+  }
+
+  .bg-danger\/10 {
+    background-color: rgba(248, 113, 113, 0.1);
+  }
+
+  .border-danger\/40 {
+    border-color: rgba(248, 113, 113, 0.4);
+  }
+</style>
+
+

src/routes/tools/playlist-discovery/PlaylistSongCard.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import ScoreBar from '$lib/components/ScoreBar.svelte';
+  import SongPlayer from '$lib/components/SongPlayer.svelte';
+
+  const beatsaverMapBase = 'https://beatsaver.com/maps/';
+
+  export let hash: string;
+  export let coverURL: string | undefined = undefined;
+  export let songName: string | undefined = undefined;
+  export let mapper: string | undefined = undefined;
+  export let beatsaverKey: string | undefined = undefined;
+  export let score: number | null | undefined = undefined;
+
+  $: mapTitle = songName ?? hash;
+  $: mapLink = beatsaverKey ? `${beatsaverMapBase}${beatsaverKey}` : null;
+</script>
+
+<article class="playlist-map-card card-surface">
+  <div class="cover">
+    {#if coverURL}
+      <img src={coverURL} alt={`Cover art for ${mapTitle}`} loading="lazy" />
+    {:else}
+      <div class="placeholder" aria-hidden="true">☁️</div>
+    {/if}
+  </div>
+
+  <div class="content">
+    <div class="title" title={mapTitle}>
+      {#if mapLink}
+        <a href={mapLink} target="_blank" rel="noreferrer noopener">{mapTitle}</a>
+      {:else}
+        <span>{mapTitle}</span>
+      {/if}
+    </div>
+
+    {#if mapper}
+      <div class="mapper">{mapper}</div>
+    {/if}
+
+    <div class="metrics">
+      <ScoreBar value={score ?? null} size="sm" decimals={1} showLabel={true} emptyLabel="No score" />
+    </div>
+
+    <div class="player">
+      <SongPlayer {hash} preferBeatLeader={true} />
+    </div>
+  </div>
+</article>
+
+<style>
+  .playlist-map-card {
+    display: grid;
+    grid-template-columns: 104px 1fr;
+    gap: 1rem;
+    padding: 0.85rem 1rem;
+    border-radius: 0.75rem;
+    background: rgba(15, 23, 42, 0.55);
+    border: 1px solid rgba(148, 163, 184, 0.12);
+    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.8);
+  }
+
+  .cover {
+    position: relative;
+    width: 100%;
+    padding-top: 100%;
+    border-radius: 0.65rem;
+    overflow: hidden;
+    background: rgba(15, 23, 42, 0.65);
+  }
+
+  .cover img,
+  .cover .placeholder {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .cover .placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: rgba(226, 232, 240, 0.8);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    min-width: 0;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #f8fafc;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .title a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .title a:hover {
+    text-decoration: underline;
+    color: color-mix(in srgb, var(--color-neon) 80%, white 20%);
+  }
+
+  .mapper {
+    font-size: 0.8rem;
+    color: rgba(148, 163, 184, 0.85);
+  }
+
+  .metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .metrics :global(.score-meter) {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+  }
+
+  .player {
+    margin-top: auto;
+    padding-top: 0.5rem;
+  }
+
+  .player :global(.song-player) {
+    width: 100%;
+  }
+
+  @media (max-width: 640px) {
+    .playlist-map-card {
+      grid-template-columns: minmax(0, 1fr);
+      padding: 0.75rem;
+      gap: 0.75rem;
+    }
+
+    .cover {
+      padding-top: 60%;
+      border-radius: 0.5rem;
+    }
+
+    .player {
+      margin-top: 0.25rem;
+    }
+  }
+</style>
+

src/routes/tools/playlist-discovery/playlist/+server.ts

@@ -0,0 +1,37 @@
+import { createBeatSaverAPI, type MapDetailWithOrder, type PlaylistPage } from '$lib/server/beatsaver';
+import { error, json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+const PAGE_SIZE = 12;
+
+export const GET: RequestHandler = async ({ url, fetch }) => {
+  const idParam = url.searchParams.get('id');
+  if (!idParam) {
+    throw error(400, 'Missing playlist id');
+  }
+
+  const offsetParam = Number.parseInt(url.searchParams.get('offset') ?? '0', 10);
+  const offset = Number.isFinite(offsetParam) && offsetParam >= 0 ? offsetParam : 0;
+  const api = createBeatSaverAPI(fetch);
+  try {
+    const detail = (await api.getPlaylistDetail(idParam, { page: 0 })) as PlaylistPage;
+    const maps = Array.isArray(detail?.maps) ? detail.maps : [];
+
+    const totalCount = detail?.playlist?.stats?.totalMaps ?? maps.length;
+    const slice = maps.slice(offset, offset + PAGE_SIZE) as MapDetailWithOrder[];
+
+    return json({
+      playlist: detail?.playlist ?? null,
+      maps: slice,
+      offset,
+      page: Math.floor(offset / PAGE_SIZE),
+      pageSize: PAGE_SIZE,
+      totalCount
+    });
+  } catch (err) {
+    console.error('Failed to load playlist detail', idParam, err);
+    throw error(502, 'Failed to load playlist detail');
+  }
+};
+
+

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

@@ -0,0 +1,62 @@
+import { error, redirect } from '@sveltejs/kit';
+import { getAllSessions, getSession } from '$lib/server/sessionStore';
+import { PLEB_BEATLEADER_ID, fetchBeatLeaderPlayerProfile } 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;
+};
+
+export const load: PageServerLoad = async ({ cookies, fetch }) => {
+  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 fetchBeatLeaderPlayerProfile(session.beatleaderId, fetch);
+    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>
+

svelte.config.js

@@ -6,7 +6,7 @@ const config = {
 	// Consult https://svelte.dev/docs/kit/integrations
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
-  kit: { adapter: adapter() }
+	kit: { adapter: adapter() }
 };
 
 export default config;