From e334cd51c2ce3ca5332105c5b9c8ae5d82b3f9e2 Mon Sep 17 00:00:00 2001
From: KeelrLeek <156356974+KeelrLeek@users.noreply.github.com>
Date: Tue, 28 Jul 2026 19:15:15 -0500
Subject: [PATCH] now playing: collapse to a rail, and rebuild the panel around
 the record

The right-hand panel disappeared when you closed it. It collapses to a rail
now, exactly as the left nav does -- same 0.28s curve, same crossfade clock
for its contents -- so the record, its progress and its transfer stay on
screen at 64px instead of sliding off.

THE RAIL carries the album as a full-height bleed behind a real glass bar
(the app's own recipe: rgba(20,20,24,.28), blur(12px) saturate(1.7), 46px),
with the expand chevron in that bar, a left-edge progress line, the cover,
an equaliser while playing, stacked icons badged with what is behind them
-- tracks left, releases -- and the title set vertically.

THE PANEL stops saying "Now playing", which was the only permanently
visible line it had and told you nothing. It names what you are playing
FROM, and carries the transfer as a hairline along the glass bar's bottom
edge -- the same object in both states, so a download reads identically
whether the panel is open or collapsed. The hairline fills linearly (it
tracks progress rather than easing past it), sweeps indeterminately while
there is no byte count to be honest about, and fades out when cached rather
than sitting full forever. Hovering the header drops the whole detail:
peer, transferred, rate, and saving what you are streaming. A library track
has no peer, so none of it appears -- zeroes would read as a stalled
transfer.

Below the record, one long undifferentiated scroll becomes four shallow
panes -- Queue, Lyrics, Artist, About -- behind a sticky segmented control.
Sticky because keeping your scroll position across a switch is worthless if
the control you just used has scrolled out of reach. Queue gains an up-next
card, library ticks, and per-track Last.fm listeners past 396px; Artist has
the artist as one full-width pill whose figures spread once there is room,
the same branded social circles the artist page draws, releases with Show
all, and fans-also-like; About carries the record's description and the
album page's RELEASED block verbatim, so a record reads the same in both
places. Lyrics is a placeholder -- there is no source in the app and
pretending otherwise would be worse than saying so.

The panel is drag-resizable from its left edge, 272-560, with a 10px magnet
at the default and a width tag while dragging; the width is remembered,
because one you set by hand and lost every launch is worse than not being
able to set it.

Five things this fixed on the way, four of them mine:

- `playerArtSource` resolved a "better" cover by ARTIST + TITLE. A name
  cannot identify a record: every self-titled Weezer album is "Weezer", the
  resolver returned whichever one the provider answered with, and all of
  them played back showing the Green Album's art. The substitution is gone;
  the record's own asset is rewritten to its 1000x1000 variant instead --
  a real quality win, no identity risk, and more than the panel needs even
  at its widest. Verified: Blue and Green now resolve to their own hashes.
- The panel body was torn down 300ms after closing, an optimisation from
  when it slid off-screen. The rail shows that artwork, so it blanked the
  rail's cover and its bleed.
- An inline --nowplaying-width would have outranked the collapse rule and
  made the panel un-collapsible; the dragged width goes through a
  --np-open-width indirection instead.
- The segmented control was an opaque strip painted straight over the album
  bleed, reading as a grey band across the artwork. It is glass now.
- The waveform was a picture of a scrubber with no way to seek, while the
  player bar carried the only one. It seeks now, on the same semantics
  (75ms throttle dragging, exact seek on release), and the second time
  reads remaining rather than total -- the total is already implied by the
  bar's length.

`soulseek:stream` reports {received, total, done} and no rate, unlike the
download path's speed_bps, so the speed behind the hairline is measured
here: a rolling 1.5s window, because a per-event delta reads as a number
flickering between 0 and several MB/s rather than a speed. There is
deliberately no "queued at peer" state -- the streaming path reports no
queue place, and the panel will not claim to know one.

`discovery` keeps the artist page's socials rather than discarding them;
they were already being fetched. 29 CSS rules for the removed sections are
gone with them.

Verified in the running app over CDP: collapse to exactly 64px and back,
rail contents and bleed at blur(17px), all four panes, sticky segments,
social chips carrying the artist page's own brand tints, the release grid
going to three columns past 430px and the pill's stats spreading past
372px, and About reading "Released May 9, 1994 - 10 tracks - 41 min / DGC -
Alternative Rock". 85 JS tests pass, production build clean with no unused
selectors. The drag gesture itself is not CDP-drivable and wants a
hands-on check.
---
 src/App.svelte                   |   14 +-
 src/components/NowPlaying.svelte | 1716 ++++++++++++++++++++++++------
 src/lib/state.svelte.js          |  124 ++-
 src/styles/global.css            |    3 +
 4 files changed, 1528 insertions(+), 329 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 08b4b2b..9df72e4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -64,6 +64,7 @@
     class:np-open={ui.nowPlaying}
     class:sidebar-collapsed={ui.sidebarCollapsed}
     class:preview-open={previewUi.open}
+    style="--np-open-width: {ui.nowPlayingWidth}px"
 >
     <TitleBar />
     <!-- While the preview modal is open the page is inert and the flanking
@@ -118,6 +119,11 @@
         background: var(--bg-sidebar);
         overflow: hidden;
         transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        /* Indirection so the dragged width can be an INLINE style without
+           outranking the collapse rule below: an inline --nowplaying-width
+           would beat `.app:not(.np-open)` and the panel could never collapse.
+           Both rules here are class-level, so the more specific one wins. */
+        --nowplaying-width: var(--np-open-width, 340px);
     }
 
     /* Collapsed left nav: narrow the sidebar column to an icon rail. The
@@ -126,10 +132,12 @@
         --sidebar-width: 64px;
     }
 
-    /* Now Playing panel slides away: the column collapses to zero (the panel
-       itself keeps its width and slides off-screen — see NowPlaying.svelte). */
+    /* Now Playing collapses to its RAIL, not to nothing — the same gesture the
+       left nav makes. The column animates between the user's dragged width and
+       the rail on the shared 0.28s curve above; the panel keeps a presence at
+       every point, so there is no off-screen slide any more. */
     .app:not(.np-open) {
-        --nowplaying-width: 0px;
+        --nowplaying-width: var(--nowplaying-rail);
     }
 
     .content {
diff --git a/src/components/NowPlaying.svelte b/src/components/NowPlaying.svelte
index ee8c6e7..852dee7 100644
--- a/src/components/NowPlaying.svelte
+++ b/src/components/NowPlaying.svelte
@@ -18,9 +18,14 @@
         artBroken,
         markArtBroken,
         playerArtSource,
+        setNowPlayingWidth,
+        NP_WIDTH_DEFAULT,
+        NP_WIDTH_MIN,
+        NP_WIDTH_MAX,
     } from "../lib/state.svelte.js";
     import Icon from "./Icon.svelte";
     import SaveMenu from "./SaveMenu.svelte";
+    import * as api from "../lib/api.js";
     import { floatScroll } from "../lib/scrollbar.js";
 
     const currentItem = $derived(player.queue[player.queueIndex] ?? null);
@@ -101,18 +106,12 @@
         bioExpanded = false;
     });
 
-    // Keep the panel body mounted just long enough to finish the close slide,
-    // then release its reactive waveform work and filtered layers entirely.
-    // Reopening cancels the pending teardown and restores content immediately.
-    let panelContentVisible = $state(ui.nowPlaying);
-    $effect(() => {
-        if (ui.nowPlaying) {
-            panelContentVisible = true;
-            return;
-        }
-        const timer = setTimeout(() => (panelContentVisible = false), 300);
-        return () => clearTimeout(timer);
-    });
+    // The panel used to slide off-screen when closed, so its body was torn down
+    // after the slide to release the waveform work and the large art data URL.
+    // It no longer leaves — closing collapses it to the rail, which shows the
+    // artwork and the progress line — so the art must stay loaded either way.
+    // Only the expanded body is conditional now.
+    const panelContentVisible = $derived(ui.nowPlaying);
 
     const norm = (s) => (s || "").toLowerCase().replace(/[^a-z0-9]/g, "");
 
@@ -153,9 +152,10 @@
     // Album art (local path or catalog CDN) → data URL, reused for the glow.
     let artUrl = $state(null);
     $effect(() => {
-        // A closed panel should not duplicate PlayerBar's cold cover-art IPC or
-        // retain a large data URL that has no visible consumer.
-        const item = panelContentVisible ? currentItem : null;
+        // Loaded whenever something is playing, collapsed or not: the rail
+        // shows this same artwork as its cover and as the bleed behind its
+        // glass bar, so gating it on the panel being open blanked both.
+        const item = currentItem;
         artUrl = null;
         if (!item) return;
         let active = true;
@@ -227,18 +227,460 @@
         const khz = (q.sampleRate / 1000).toFixed(1).replace(/\.0$/, "");
         return q.bitDepth ? `${khz} kHz · ${q.bitDepth}-bit` : `${khz} kHz`;
     }
+
+    // ---- transfer status ---------------------------------------------------
+    // One line for the glass header, in both the expanded panel and the rail's
+    // bar. Deliberately absent for a library track: a local file has no peer
+    // and no transfer, and showing zeroes for it would read as a stalled one.
+    //
+    // There is no "queued at peer" state here. The download path reports a
+    // queue place; the streaming path does not, so the panel cannot honestly
+    // claim to know one.
+    const transferring = $derived(
+        isStream && player.streamTotal > 0 && player.streamReceived < player.streamTotal,
+    );
+    const cached = $derived(
+        isStream && player.streamTotal > 0 && player.streamReceived >= player.streamTotal,
+    );
+    /** Bytes/sec, only once measured — see player.streamSpeed. */
+    const rateText = $derived(
+        player.streamSpeed > 0 ? `${(player.streamSpeed / 1048576).toFixed(1)} MB/s` : null,
+    );
+    const etaText = $derived.by(() => {
+        if (!transferring || player.streamSpeed <= 0) return null;
+        const secs = (player.streamTotal - player.streamReceived) / player.streamSpeed;
+        if (!isFinite(secs) || secs < 1) return null;
+        return secs >= 60
+            ? `${Math.floor(secs / 60)}m ${Math.round(secs % 60)}s left`
+            : `${Math.round(secs)}s left`;
+    });
+    const peerName = $derived(currentItem?.stream?.username ?? null);
+    const statusLine = $derived.by(() => {
+        if (!isStream) return null;
+        if (cached) return `Cached · ${fmtSize(player.streamTotal) ?? ""}`.trim();
+        if (transferring) {
+            return [peerName, `${Math.round(bufferPct)}%`, rateText, etaText]
+                .filter(Boolean)
+                .join(" · ");
+        }
+        return peerName ? `Streaming from ${peerName}` : null;
+    });
+    /** The hairline has no percentage to show until bytes start arriving. */
+    const hairlineSeeking = $derived(isStream && player.streamTotal === 0);
+
+    // ---- drag to resize ----------------------------------------------------
+    // Pointer capture, like the player bar's scrubber: the pointer keeps
+    // delivering moves after it leaves the 9px grip, which a mousemove
+    // listener on the element alone would not.
+    let gripEl = $state(null);
+    let dragging = $state(false);
+    let dragRaf = 0;
+    let dragStartX = 0;
+    let dragStartW = 0;
+    let pendingWidth = 0;
+    /** Shown while dragging so the number being chosen is visible. */
+    const atDefault = $derived(ui.nowPlayingWidth === NP_WIDTH_DEFAULT);
+
+    function onGripDown(e) {
+        dragging = true;
+        dragStartX = e.clientX;
+        dragStartW = ui.nowPlayingWidth;
+        gripEl?.setPointerCapture?.(e.pointerId);
+        e.preventDefault();
+    }
+    function onGripMove(e) {
+        if (!dragging) return;
+        // The panel's left edge moves left to widen, so the delta is inverted.
+        let w = dragStartW - (e.clientX - dragStartX);
+        w = Math.max(NP_WIDTH_MIN, Math.min(NP_WIDTH_MAX, w));
+        // A 10px magnet at the default, so getting back to stock is easy
+        // without the drag feeling sticky anywhere else.
+        if (Math.abs(w - NP_WIDTH_DEFAULT) < 10) w = NP_WIDTH_DEFAULT;
+        pendingWidth = w;
+        if (dragRaf) return;
+        dragRaf = requestAnimationFrame(() => {
+            dragRaf = 0;
+            setNowPlayingWidth(pendingWidth);
+        });
+    }
+    function onGripUp(e) {
+        if (!dragging) return;
+        dragging = false;
+        if (dragRaf) {
+            cancelAnimationFrame(dragRaf);
+            dragRaf = 0;
+            setNowPlayingWidth(pendingWidth);
+        }
+        gripEl?.releasePointerCapture?.(e.pointerId);
+    }
+    function resetWidth() {
+        setNowPlayingWidth(NP_WIDTH_DEFAULT);
+    }
+
+    // ---- rail ---------------------------------------------------------------
+    const queueLeft = $derived(Math.max(0, player.queue.length - player.queueIndex - 1));
+
+    // ---- the record this queue belongs to -----------------------------------
+    const albumTitle = $derived(metaParts[1] || currentItem?.album || "");
+
+    // Editorial description / label / genre for the About pane — the same
+    // `catalog_album_info` the album page credits, so the two never disagree
+    // about a record. Keyed on artist+album, and only fetched while expanded:
+    // the rail has nowhere to show it.
+    let albumInfo = $state(null);
+    let albumInfoKey = null;
+    $effect(() => {
+        const artist = artistName;
+        const title = albumTitle;
+        const id = discovery.artistId;
+        const key = artist && title ? `${artist}::${title}` : null;
+        if (!ui.nowPlaying || !key) return;
+        if (key === albumInfoKey) return;
+        albumInfoKey = key;
+        albumInfo = null;
+        let stale = false;
+        api.catalogAlbumInfo(id ?? null, artist, title)
+            .then((info) => {
+                if (!stale && albumInfoKey === key) albumInfo = info ?? null;
+            })
+            .catch(() => {});
+        return () => {
+            stale = true;
+        };
+    });
+
+    /** This record's row in the local library, when it is owned. */
+    const localAlbum = $derived.by(() => {
+        const a = norm(artistName);
+        const t = norm(albumTitle);
+        if (!a || !t) return null;
+        return libraryStore.albums.find((x) => norm(x.artist) === a && norm(x.title) === t) ?? null;
+    });
+
+    // Which of this record's songs are already saved locally, ticked in the
+    // queue. The library keeps albums rather than songs, so the owned tracklist
+    // has to be read from the matching local album — the album page does the
+    // same thing for the same reason.
+    let libraryTicks = $state(new Set());
+    let ticksFor = null;
+    $effect(() => {
+        const id = localAlbum?.id ?? null;
+        if (id === ticksFor) return;
+        ticksFor = id;
+        libraryTicks = new Set();
+        if (id == null) return;
+        let stale = false;
+        api.albumTracks(id)
+            .then((rows) => {
+                if (!stale && ticksFor === id) {
+                    libraryTicks = new Set(rows.map((r) => norm(r.title || "")));
+                }
+            })
+            .catch(() => {});
+        return () => {
+            stale = true;
+        };
+    });
+
+    // The record's catalog payload, when the queue came from one. It supplies
+    // two things nothing else here has: per-track Last.fm listeners (queue
+    // items carry only a provider `trackId`) and the release date / track count
+    // / runtime the About pane's credits block needs. A local album has no
+    // catalog id, so both simply do not appear.
+    let catalogPage = $state(null);
+    let catalogFor = null;
+    $effect(() => {
+        const albumId = player.catalogRef.albumId ?? null;
+        if (albumId === catalogFor) return;
+        catalogFor = albumId;
+        catalogPage = null;
+        if (albumId == null || !ui.nowPlaying) return;
+        let stale = false;
+        api.catalogAlbum(albumId)
+            .then((page) => {
+                if (!stale && catalogFor === albumId) catalogPage = page ?? null;
+            })
+            .catch(() => {});
+        return () => {
+            stale = true;
+        };
+    });
+    const listenersById = $derived.by(() => {
+        const map = new Map();
+        for (const t of catalogPage?.tracks ?? []) {
+            if (t.listeners != null) map.set(String(t.id), t.listeners);
+        }
+        return map;
+    });
+    const showListeners = $derived(listenersById.size > 0 && ui.nowPlayingWidth >= 396);
+    const listenersOf = (item) =>
+        item?.trackId != null ? (listenersById.get(String(item.trackId)) ?? null) : null;
+
+    /** "7 October 2014 · 13 tracks · 42 min", from whichever parts are known. */
+    const creditsLine = $derived.by(() => {
+        const parts = [];
+        const date = catalogPage?.album?.release_date ?? null;
+        if (date) {
+            const d = new Date(date);
+            parts.push(
+                isNaN(d)
+                    ? date
+                    : d.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" }),
+            );
+        }
+        const n = catalogPage?.tracks?.length ?? player.queue.length;
+        if (n) parts.push(`${n} track${n === 1 ? "" : "s"}`);
+        const secs = (catalogPage?.tracks ?? player.queue).reduce(
+            (sum, t) => sum + (t.duration_secs ?? t.duration ?? 0),
+            0,
+        );
+        if (secs) {
+            const mins = Math.round(secs / 60);
+            parts.push(mins >= 60 ? `${Math.floor(mins / 60)} hr ${mins % 60} min` : `${mins} min`);
+        }
+        return parts.join(" · ");
+    });
+
+    // Width-responsive: the pill's stats spread rather than bunch, and the
+    // release grid gains a column, once there is room for them.
+    const statsSpread = $derived(ui.nowPlayingWidth >= 372);
+    const releaseCols = $derived(ui.nowPlayingWidth >= 430 ? 3 : 2);
+
+    /** The artist page's own social tints, so the chips match it exactly. */
+    const SOCIAL_META = {
+        website: { icon: "globe", label: "Official site", rgb: "160,168,177" },
+        instagram: { icon: "brand-instagram", label: "Instagram", rgb: "213,154,171" },
+        x: { icon: "brand-x", label: "X", rgb: "213,217,221", solid: true },
+        facebook: { icon: "brand-facebook", label: "Facebook", rgb: "143,168,205" },
+        tiktok: { icon: "brand-tiktok", label: "TikTok", rgb: "159,196,204" },
+        youtube: { icon: "brand-youtube", label: "YouTube", rgb: "201,143,143" },
+        bandcamp: { icon: "brand-bandcamp", label: "Bandcamp", rgb: "127,173,189", solid: true },
+        soundcloud: { icon: "brand-soundcloud", label: "SoundCloud", rgb: "208,162,132" },
+    };
+
+    let showAllReleases = $state(false);
+    let descExpanded = $state(false);
+    $effect(() => {
+        // A new record collapses both long texts and the release grid again.
+        void albumInfoKey;
+        showAllReleases = false;
+        descExpanded = false;
+    });
+    const releaseList = $derived(showAllReleases ? discovery.albums : moreAlbums);
+
+    const upNext = $derived(player.queue[player.queueIndex + 1] ?? null);
+
+    const fmtListeners = (n) => (n == null ? null : n.toLocaleString());
+
+    // ---- the waveform, as a scrubber ---------------------------------------
+    // It was decorative — a picture of the song with no way to move through it,
+    // while the player bar carried the only scrubber. Same seek semantics as
+    // that one (75ms throttle while dragging, exact seek on release) so the two
+    // cannot disagree about where a click lands.
+    let waveEl = $state(null);
+    let waveDragging = false;
+    let lastWaveSeekAt = 0;
+    function waveTarget(e) {
+        if (!player.duration || !waveEl) return null;
+        const rect = waveEl.getBoundingClientRect();
+        const f = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+        return f * player.duration;
+    }
+    function waveDown(e) {
+        const target = waveTarget(e);
+        if (target == null) return;
+        waveDragging = true;
+        player.scrubbing = true;
+        waveEl.setPointerCapture(e.pointerId);
+        player.position = target;
+        e.preventDefault();
+    }
+    function waveMove(e) {
+        if (!waveDragging) return;
+        const target = waveTarget(e);
+        if (target == null) return;
+        player.position = target; // instant feedback; the seek is throttled
+        const now = performance.now();
+        if (now - lastWaveSeekAt >= 75) {
+            lastWaveSeekAt = now;
+            api.playerControl("seek", target);
+        }
+    }
+    function waveUp(e) {
+        if (!waveDragging) return;
+        waveDragging = false;
+        player.scrubbing = false;
+        const target = waveTarget(e);
+        if (target != null) api.playerControl("seek", target);
+        try {
+            waveEl.releasePointerCapture(e.pointerId);
+        } catch {
+            // The pointer may already be gone; the seek above still stands.
+        }
+    }
+
+    // ---- panes --------------------------------------------------------------
+    // The context below the record is three shallow panes rather than one long
+    // scroll. Lyrics sits between Queue and Artist when enabled — it has no
+    // source yet and shows a placeholder.
+    const PANE_LABEL = { queue: "Queue", lyrics: "Lyrics", artist: "Artist", about: "About" };
+    const panes = ["queue", "lyrics", "artist", "about"];
+    let pane = $state("queue");
+    /** Which way the incoming pane slides in from, so a switch reads as travel
+     *  rather than a flicker — forward comes from the right, back from the
+     *  left, the same rule the glass bar's breadcrumb uses. */
+    let paneDir = $state(10);
+    function selectPane(next) {
+        if (next === pane) return;
+        paneDir = panes.indexOf(next) >= panes.indexOf(pane) ? 10 : -10;
+        pane = next;
+        // The scroll position is deliberately NOT reset: `.np-scroll` survives
+        // the pane swap, so the browser keeps its offset and only clamps it if
+        // the arriving pane is shorter. The sticky control above means you can
+        // always switch back from wherever that leaves you.
+    }
+    /** A rail dot both expands the panel and lands on the pane it names. */
+    function openPane(name) {
+        selectPane(name);
+        if (!ui.nowPlaying) toggleNowPlaying();
+    }
 </script>
 
-<aside class="nowplaying" class:closed={!ui.nowPlaying}>
+<!-- The artist as one pill: portrait, name, and the three figures the album
+     hero already states this way. It is a block-level button so it tracks the
+     panel's width, and the stats spread across it once there is room rather
+     than bunching at the left. Shown in both the Artist and About panes. -->
+{#snippet artistChip()}
+    <button class="achip" onclick={openDiscoveryArtist} title="Open {artistName}">
+        {#if discovery.picture}
+            <img src={discovery.picture} alt="" loading="lazy" draggable="false" />
+        {:else}
+            <span class="achip-ph"><Icon name="music" size={24} /></span>
+        {/if}
+        <span class="achip-body">
+            <span class="achip-name">{artistName || "Unknown artist"}</span>
+            <span class="achip-stats" class:spread={statsSpread}>
+                <span class="st"><b>{discovery.albumCount ?? "—"}</b><i>releases</i></span>
+                <span class="st"><b>{fmtFans(discovery.fans)}</b><i>fans</i></span>
+                <span class="st"><b>{inLibraryCount}</b><i>in library</i></span>
+            </span>
+        </span>
+    </button>
+{/snippet}
+
+<aside class="nowplaying" class:collapsed={!ui.nowPlaying} class:dragging>
+    <!-- The record washes the whole panel, expanded or collapsed, and the glass
+         bars below sit on it exactly as the app's glass bar sits on a page hero.
+         Blurred hard, because it is a backdrop for text and icons — not a
+         second showing of the artwork. -->
+    {#if artUrl}
+        <div class="bleed" aria-hidden="true">
+            <img src={artUrl} alt="" draggable="false" />
+            <span class="bleed-fade"></span>
+        </div>
+    {/if}
+
+    <!-- ================================ COLLAPSED: the rail ============ -->
+    <div class="rail-view" inert={ui.nowPlaying || undefined}>
+        <header class="glass rail-bar">
+            <button class="np-icon" title="Expand panel" aria-label="Expand Now Playing" onclick={toggleNowPlaying}>
+                <Icon name="chevron-left" size={16} />
+            </button>
+            {#if isStream}
+                <span class="hairline" class:seek={hairlineSeeking} class:done={cached} style="--buf:{bufferPct}%"><i></i></span>
+            {/if}
+        </header>
+
+        <!-- Playback down the rail's own edge: the one value worth a whole
+             dimension, and it costs no content width. -->
+        <span class="rail-edge" style="--p:{playedPct}%" aria-hidden="true"><i></i></span>
+
+        <div class="rail-body">
+            {#if artUrl}
+                <button class="rail-cover" title="View artwork" aria-label="View album artwork" onclick={() => openArtwork()}>
+                    <img src={artUrl} alt="" draggable="false" />
+                </button>
+            {/if}
+            {#if player.status === "playing" && ui.windowActive}
+                <span class="eq active" aria-hidden="true"><b></b><b></b><b></b></span>
+            {/if}
+            <div class="rail-dots">
+                <button class="rail-dot" title="Queue" onclick={() => openPane("queue")}>
+                    <Icon name="layers" size={15} />
+                    {#if queueLeft > 0}<span class="rail-badge">{queueLeft}</span>{/if}
+                </button>
+                <button class="rail-dot" title="More from {artistName}" onclick={() => openPane("artist")}>
+                    <Icon name="disc" size={15} />
+                    {#if discovery.albumCount}<span class="rail-badge">{discovery.albumCount}</span>{/if}
+                </button>
+                <button class="rail-dot" title="About" onclick={() => openPane("about")}>
+                    <Icon name="users" size={15} />
+                </button>
+            </div>
+            <span class="rail-spacer"></span>
+            {#if player.track?.title}
+                <div class="rail-title" title={player.track.title}>
+                    <b>{player.track.title}</b>{metaParts[0] ? ` — ${metaParts[0]}` : ""}
+                </div>
+            {/if}
+        </div>
+    </div>
+
+    <!-- ================================ EXPANDED ======================= -->
+    <div class="full-view" inert={!ui.nowPlaying || undefined}>
     <!-- Frosted-glass header: it overlays the scrolling content and blurs
          whatever sits beneath it, so the album art's colors seep through and
-         shift as you scroll the art up under the glass. -->
-    <header class="np-head" data-scrollhead>
-        <span class="np-title">Now playing</span>
-        <button class="np-icon" title="Hide panel" onclick={toggleNowPlaying}>
-            <Icon name="chevron-left" size={16} />
-        </button>
-    </header>
+         shift as you scroll the art up under the glass. It names what you are
+         playing FROM and carries the transfer as a hairline along its bottom
+         edge — the panel is self-evidently "now playing", so saying so was a
+         waste of the only permanently visible line it has. -->
+    <div class="headzone">
+        <header class="np-head glass" data-scrollhead>
+            <button class="np-icon" title="Collapse panel" aria-label="Collapse Now Playing" onclick={toggleNowPlaying}>
+                <Icon name="chevron-right" size={16} />
+            </button>
+            <div class="np-headmid">
+                {#if statusLine}
+                    {#key statusLine}
+                        <span class="np-status">{statusLine}</span>
+                    {/key}
+                {/if}
+                <span class="np-from" title={metaParts[1] || player.track?.title}>
+                    {metaParts[1] || player.track?.title || "Nothing playing"}
+                </span>
+            </div>
+            {#if isStream}
+                <span class="hairline" class:seek={hairlineSeeking} class:done={cached} style="--buf:{bufferPct}%"><i></i></span>
+            {/if}
+        </header>
+
+        <!-- The whole transfer, one hover away: everything the old source card
+             showed permanently, without spending a permanent line on it. This
+             is also where saving what you are streaming lives now. -->
+        {#if isStream && currentItem?.stream}
+            <div class="xpop">
+                <div class="xrow">
+                    <div class="xav">{currentItem.stream.username.slice(0, 1).toUpperCase()}</div>
+                    <div class="xwho">
+                        <span title={currentItem.stream.username}>{currentItem.stream.username}</span>
+                        <small>
+                            {#if cached}
+                                complete · {fmtSize(player.streamTotal)}
+                            {:else if player.streamTotal > 0}
+                                {fmtSize(player.streamReceived)} / {fmtSize(player.streamTotal)}{rateText ? ` · ${rateText}` : ""}
+                            {:else}
+                                connecting…
+                            {/if}
+                        </small>
+                    </div>
+                    <SaveMenu align="down" />
+                </div>
+                {#if player.streamTotal > 0}
+                    <div class="xbar"><i style="width:{bufferPct}%"></i></div>
+                {/if}
+            </div>
+        {/if}
+    </div>
 
     <div class="np-scroll" use:floatScroll>
         {#if panelContentVisible}
@@ -282,7 +724,21 @@
 
             <!-- mini waveform + times -->
             {#if bars.length}
-                <div class="wave" aria-hidden="true">
+                <div
+                    class="wave"
+                    class:scrubbing={waveDragging}
+                    role="slider"
+                    tabindex="0"
+                    aria-label="Seek"
+                    aria-valuemin="0"
+                    aria-valuemax={Math.round(player.duration ?? 0)}
+                    aria-valuenow={Math.round(player.position ?? 0)}
+                    bind:this={waveEl}
+                    onpointerdown={waveDown}
+                    onpointermove={waveMove}
+                    onpointerup={waveUp}
+                    onpointercancel={waveUp}
+                >
                     {#each bars as v, i}
                         <i
                             style="height:{barHeight(v, i)}%; --fill:{barFill(i)}"
@@ -292,7 +748,10 @@
             {/if}
             <div class="times">
                 <span>{fmtTime(player.position)}</span>
-                <span>{fmtTime(player.duration)}</span>
+                <!-- Remaining, not total: the total is already implied by the
+                     bar's own length, and what a listener wants from a second
+                     number is how much is left. -->
+                <span>-{fmtTime(Math.max(0, (player.duration ?? 0) - (player.position ?? 0)))}</span>
             </div>
 
             <!-- quality chips -->
@@ -314,120 +773,176 @@
                 </div>
             {/if}
 
-            <!-- source card (streaming only) -->
-            {#if isStream && currentItem.stream}
-                <div class="src">
-                    <div class="src-lab">Streaming from</div>
-                    <div class="peer">
-                        <div class="av">{currentItem.stream.username.slice(0, 1).toUpperCase()}</div>
-                        <div class="who" title={currentItem.stream.username}>{currentItem.stream.username}</div>
-                    </div>
-                    {#if player.streamTotal > 0}
-                        <div class="buf">
-                            <div class="bar"><i style="width:{bufferPct}%"></i></div>
-                            <div class="meta">
-                                <span>Buffered {(player.streamReceived / 1048576).toFixed(1)} / {(player.streamTotal / 1048576).toFixed(1)} MB</span>
-                                <span>{Math.round(bufferPct)}%</span>
+            <!-- Context below the record: shallow panes instead of one long
+                 scroll, so the queue is never four sections away. The control
+                 is sticky under the glass, because keeping your scroll position
+                 across a switch is worthless if the switch itself scrolls out
+                 of reach. -->
+            <div class="segwrap">
+                <div class="seg" role="tablist">
+                    <span
+                        class="seg-thumb"
+                        style="width: calc((100% - 6px) / {panes.length}); transform: translateX({panes.indexOf(pane) * 100}%)"
+                        aria-hidden="true"
+                    ></span>
+                    {#each panes as p (p)}
+                        <button
+                            class="seg-btn"
+                            class:on={pane === p}
+                            role="tab"
+                            aria-selected={pane === p}
+                            onclick={() => selectPane(p)}
+                        >{PANE_LABEL[p]}</button>
+                    {/each}
+                </div>
+            </div>
+
+            {#key pane}
+                <div class="pane" style="--dir: {paneDir}px">
+                    {#if pane === "queue"}
+                        {#if upNext}
+                            <button class="upnext" onclick={() => jumpToQueueIndex(player.queueIndex + 1)}>
+                                {#if artUrl}<img src={artUrl} alt="" draggable="false" />{/if}
+                                <span class="un-body">
+                                    <span class="un-lab">Up next</span>
+                                    <span class="un-title" title={upNext.title}>{upNext.title}</span>
+                                </span>
+                                <span class="un-dur">{fmtTime(upNext.duration)}</span>
+                            </button>
+                        {/if}
+                        {#if player.queue.length > 1}
+                            <div class="lab">
+                                <span>{albumMode ? "From the album" : "Queue"}</span>
+                                <span class="cnt">{player.queue.length} tracks</span>
                             </div>
-                        </div>
+                            <div class="list">
+                                {#each player.queue as item, i}
+                                    {@const lis = listenersOf(item)}
+                                    <button
+                                        class="row"
+                                        class:now={i === player.queueIndex}
+                                        class:wide={showListeners}
+                                        onclick={() => jumpToQueueIndex(i)}
+                                    >
+                                        <span class="n">
+                                            {#if i === player.queueIndex}
+                                                <span
+                                                    class="eq"
+                                                    class:active={player.status === "playing" && ui.windowActive}
+                                                ><b></b><b></b><b></b></span>
+                                            {:else}{i + 1}{/if}
+                                        </span>
+                                        <span class="nm" title={item.title}>
+                                            {item.title}
+                                            {#if libraryTicks.has(norm(item.title))}
+                                                <span class="own" title="Saved in your library"><Icon name="check" size={11} /></span>
+                                            {/if}
+                                        </span>
+                                        {#if showListeners}
+                                            <span class="lis">{fmtListeners(lis) ?? "—"}</span>
+                                        {/if}
+                                        <span class="du">{fmtTime(item.duration)}</span>
+                                    </button>
+                                {/each}
+                            </div>
+                        {:else}
+                            <p class="pane-empty">Nothing queued after this one.</p>
+                        {/if}
+
+                    {:else if pane === "lyrics"}
+                        <p class="pane-empty">
+                            Lyrics aren't wired up yet — this pane is a placeholder.
+                        </p>
+
+                    {:else if pane === "artist"}
+                        {@render artistChip()}
+                        {#if discovery.socials.length}
+                            <div class="socials">
+                                {#each discovery.socials as link (link.kind)}
+                                    {@const meta = SOCIAL_META[link.kind] ?? SOCIAL_META.website}
+                                    <a
+                                        class="soc"
+                                        href={link.url}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        title={meta.label}
+                                        style="--soc: {meta.rgb}"
+                                        onclick={(e) => { e.preventDefault(); api.openExternal(link.url); }}
+                                    ><Icon name={meta.icon} size={15} fill={meta.solid ?? false} /></a>
+                                {/each}
+                            </div>
+                        {/if}
+                        {#if releaseList.length}
+                            <div class="lab">
+                                <span>Releases</span>
+                                {#if discovery.albumCount}<span class="cnt">{discovery.albumCount} total</span>{/if}
+                            </div>
+                            <div class="grid2" style="--cols: {releaseCols}">
+                                {#each releaseList as al (al.id)}
+                                    <button class="mini" title="Play {al.title}" onclick={() => streamCatalogAlbum(al)}>
+                                        <div class="art">
+                                            {#if al.cover && !artBroken[al.cover]}
+                                                <img src={al.cover} alt="" loading="lazy" draggable="false" onerror={() => markArtBroken(al.cover)} />
+                                            {/if}
+                                        </div>
+                                        <div class="mt">{al.title}</div>
+                                        <div class="my">{albumYear(al)}{al.record_type && al.record_type !== "album" ? " · " + al.record_type : ""}</div>
+                                    </button>
+                                {/each}
+                            </div>
+                            {#if discovery.albums.length > moreAlbums.length}
+                                <button class="showall" onclick={() => (showAllReleases = !showAllReleases)}>
+                                    {showAllReleases ? "Show fewer" : "Show all " + discovery.albums.length + " releases"}
+                                </button>
+                            {/if}
+                        {/if}
+                        {#if relatedArtists.length}
+                            <div class="lab"><span>Fans also like</span></div>
+                            <div class="fans">
+                                {#each relatedArtists as ar}
+                                    <button class="fan" title={ar.name} onclick={() => openCatalogArtist(ar.id, ar)}>
+                                        <div class="av2">
+                                            {#if ar.picture}<img src={ar.picture} alt="" loading="lazy" draggable="false" />{/if}
+                                        </div>
+                                        <div class="fn">{ar.name}</div>
+                                    </button>
+                                {/each}
+                            </div>
+                        {/if}
+
+                    {:else}
+                        {#if albumInfo?.description}
+                            <div class="lab"><span>About this record</span></div>
+                            <p class="bio" class:clamped={!descExpanded}>{albumInfo.description}</p>
+                            <button class="more" class:open={descExpanded} onclick={() => (descExpanded = !descExpanded)}>
+                                {descExpanded ? "Show less" : "Show more"}
+                                <Icon name="chevron-down" size={13} />
+                            </button>
+                        {/if}
+                        {#if creditsLine || albumInfo?.label || albumInfo?.genre}
+                            <div class="credits">
+                                <span class="clab">Released</span>
+                                {creditsLine}
+                                {#if albumInfo?.label || albumInfo?.genre}
+                                    <br />{albumInfo.label ?? ""}{albumInfo.label && albumInfo.genre ? " · " : ""}{albumInfo.genre ?? ""}
+                                {/if}
+                            </div>
+                        {/if}
+                        <div class="lab"><span>About the artist</span></div>
+                        {@render artistChip()}
+                        {#if discovery.bio}
+                            <p class="bio" class:clamped={!bioExpanded}>{discovery.bio}</p>
+                            <button class="more" class:open={bioExpanded} onclick={() => (bioExpanded = !bioExpanded)}>
+                                {bioExpanded ? "Show less" : "Read more"}
+                                <Icon name="chevron-down" size={13} />
+                            </button>
+                        {/if}
+                        {#if !albumInfo?.description && !discovery.bio}
+                            <p class="pane-empty">Nothing written about this record yet.</p>
+                        {/if}
                     {/if}
                 </div>
-
-                <!-- save the file(s) you're already streaming (no re-search) -->
-                <div class="actions-row">
-                    <SaveMenu align="down" />
-                </div>
-            {/if}
-
-            <!-- queue / album tracklist -->
-            {#if player.queue.length > 1}
-                <div class="section">
-                    <div class="lab">{albumMode ? "From the album" : "Queue"}</div>
-                    <div class="list">
-                        {#each player.queue as item, i}
-                            <button class="row" class:now={i === player.queueIndex} onclick={() => jumpToQueueIndex(i)}>
-                                <span class="n">
-                                    {#if i === player.queueIndex}
-                                        <span
-                                            class="eq"
-                                            class:active={ui.nowPlaying && player.status === "playing" && ui.windowActive}
-                                        ><b></b><b></b><b></b></span>
-                                    {:else}{i + 1}{/if}
-                                </span>
-                                <span class="nm" title={item.title}>{item.title}</span>
-                                <span class="du">{fmtTime(item.duration)}</span>
-                            </button>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
-
-            <!-- Discovery: more from the artist -->
-            {#if moreAlbums.length}
-                <div class="section">
-                    <div class="lab divlab">More from {artistName}</div>
-                    <div class="grid2">
-                        {#each moreAlbums as al}
-                            <button class="mini" title="Play {al.title}" onclick={() => streamCatalogAlbum(al)}>
-                                <div class="art">
-                                    {#if al.cover && !artBroken[al.cover]}<img src={al.cover} alt="" loading="lazy" draggable="false" onerror={() => markArtBroken(al.cover)} />{/if}
-                                </div>
-                                <div class="mt">{al.title}</div>
-                                <div class="my">{albumYear(al)}{al.record_type && al.record_type !== "album" ? ` · ${al.record_type}` : ""}</div>
-                            </button>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
-
-            <!-- Discovery: fans also like -->
-            {#if relatedArtists.length}
-                <div class="section">
-                    <div class="lab divlab">Fans also like</div>
-                    <div class="fans">
-                        {#each relatedArtists as ar}
-                            <button class="fan" title={ar.name} onclick={() => openCatalogArtist(ar.id, ar)}>
-                                <div class="av">
-                                    {#if ar.picture}<img src={ar.picture} alt="" loading="lazy" draggable="false" />{/if}
-                                </div>
-                                <div class="fn">{ar.name}</div>
-                            </button>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
-
-            <!-- Discovery: about the artist -->
-            {#if discovery.artistId && (discovery.picture || discovery.albumCount)}
-                <div class="section">
-                    <div class="lab divlab">About the artist</div>
-                    <div class="aboutcard">
-                        <button class="bandphoto" title="Open {artistName}" onclick={openDiscoveryArtist}>
-                            {#if discovery.picture}
-                                <img src={discovery.picture} alt="" loading="lazy" draggable="false" />
-                            {:else}
-                                <span class="ph"><Icon name="music" size={28} /></span>
-                            {/if}
-                        </button>
-                        <div class="about-text">
-                            <button class="nm" onclick={openDiscoveryArtist}>{artistName}</button>
-                            {#if discovery.bio}
-                                <div class="bio">
-                                    <p class:clamped={!bioExpanded}>{discovery.bio}</p>
-                                    <button class="more" onclick={() => (bioExpanded = !bioExpanded)}>
-                                        {bioExpanded ? "Show less" : "Read more"}
-                                    </button>
-                                </div>
-                            {/if}
-                        </div>
-                        <div class="about-body">
-                            <div class="st"><b>{discovery.albumCount ?? "—"}</b>releases</div>
-                            <div class="st"><b>{fmtFans(discovery.fans)}</b>fans</div>
-                            <div class="st"><b>{inLibraryCount}</b>in library</div>
-                        </div>
-                    </div>
-                </div>
-            {/if}
+            {/key}
         {:else}
             <div class="empty">
                 <Icon name="music" size={30} />
@@ -436,6 +951,31 @@
         {/if}
         {/if}
     </div>
+    </div>
+
+    <!-- Drag the panel's left edge to widen it. Only while expanded: the rail
+         is a fixed size, and a resize handle on it would promise otherwise. -->
+    {#if ui.nowPlaying}
+        <div
+            class="grip"
+            class:on={dragging}
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize Now Playing panel"
+            title="Drag to resize · double-click to reset"
+            bind:this={gripEl}
+            onpointerdown={onGripDown}
+            onpointermove={onGripMove}
+            onpointerup={onGripUp}
+            onpointercancel={onGripUp}
+            ondblclick={resetWidth}
+        ></div>
+        {#if dragging}
+            <span class="wtag" class:snap={atDefault}>
+                {ui.nowPlayingWidth}{atDefault ? " · default" : ""}
+            </span>
+        {/if}
+    {/if}
 </aside>
 
 <style>
@@ -448,26 +988,278 @@
         overflow: hidden;
         min-height: 0;
         position: relative;
-        /* Fixed width so the panel keeps its shape and slides off-screen when
-           the grid column collapses to 0, rather than squishing its content.
-           (The grid column uses --nowplaying-width, which animates 340→0.) */
-        width: 340px;
+        /* The panel now COLLAPSES to a rail rather than sliding off-screen, so
+           its width tracks the grid column at every point instead of staying
+           fixed while the column animates to zero underneath it. The column and
+           this share one clock (App.svelte, 0.28s) so nothing lags. */
+        width: var(--nowplaying-width);
         justify-self: start;
-        visibility: visible;
-        transition:
-            transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
-            opacity 0.24s ease,
-            visibility 0s linear;
+        transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    .nowplaying.closed {
-        transform: translateX(calc(100% + 8px));
-        opacity: 0;
-        visibility: hidden;
+    /* A drag must track the pointer exactly, not trail an easing curve. */
+    .nowplaying.dragging {
+        transition: none;
+    }
+
+    /* The record, washing the whole panel behind the glass. Blurred hard: this
+       is a backdrop for text, not a second showing of the artwork. */
+    .bleed {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        overflow: hidden;
         pointer-events: none;
-        transition:
-            transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
-            opacity 0.24s ease,
-            visibility 0s linear 0.28s;
+    }
+    .bleed img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        filter: blur(17px) saturate(1.25);
+        opacity: 0.85;
+        transform: scale(1.08);
+    }
+    .bleed-fade {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            rgba(24, 24, 24, 0.15) 0,
+            rgba(24, 24, 24, 0.75) 38%,
+            var(--bg-player) 78%
+        );
+    }
+
+    /* Both views stack in the same box and cross-fade, on the left sidebar's
+       own label clock — the collapse itself is the width animation above. */
+    .rail-view,
+    .full-view {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        transition: opacity 0.15s ease;
+    }
+    .rail-view {
+        opacity: 0;
+        pointer-events: none;
+    }
+    .nowplaying.collapsed .full-view {
+        opacity: 0;
+        pointer-events: none;
+    }
+    .nowplaying.collapsed .rail-view {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    /* ---- the shared glass recipe, same numbers as GlassBar.svelte ---- */
+    .glass {
+        background: rgba(20, 20, 24, 0.28);
+        backdrop-filter: blur(12px) saturate(1.7);
+        -webkit-backdrop-filter: blur(12px) saturate(1.7);
+        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
+    }
+
+    /* The transfer, as a hairline along the glass bar's bottom edge — the same
+       object in the rail and in the expanded header, so a download reads the
+       same whichever state the panel is in. */
+    .hairline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 2px;
+        background: rgba(255, 255, 255, 0.07);
+        overflow: hidden;
+    }
+    .hairline i {
+        display: block;
+        height: 100%;
+        width: var(--buf, 0%);
+        background: linear-gradient(90deg, var(--accent), var(--accent-hover));
+        /* linear, not eased: it tracks real progress rather than overshooting
+           it and easing back. */
+        transition: width 240ms linear, opacity 400ms ease;
+    }
+    /* No byte count yet, so there is no percentage to be honest about. */
+    .hairline.seek i {
+        width: 38%;
+        animation: hairsweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    }
+    @keyframes hairsweep {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(365%); }
+    }
+    /* Done is not "full forever" — it leaves. */
+    .hairline.done i {
+        opacity: 0;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .hairline.seek i {
+            animation: none;
+        }
+    }
+
+    /* ---- the rail ---- */
+    .rail-bar {
+        position: relative;
+        height: 46px;
+        flex: none;
+        display: grid;
+        place-items: center;
+        z-index: 5;
+    }
+    .rail-edge {
+        position: absolute;
+        left: 3px;
+        top: 52px;
+        bottom: 10px;
+        width: 3px;
+        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.09);
+        overflow: hidden;
+        z-index: 4;
+    }
+    .rail-edge i {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--p, 0%);
+        border-radius: 2px;
+        background: var(--accent-hover);
+        transition: height 240ms linear;
+    }
+    .rail-body {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 0 13px;
+        position: relative;
+        z-index: 2;
+    }
+    .rail-cover {
+        width: calc(var(--nowplaying-rail) - 20px);
+        aspect-ratio: 1;
+        border-radius: 6px;
+        overflow: hidden;
+        flex: none;
+        padding: 0;
+        transition: transform var(--art-motion);
+    }
+    .rail-cover:hover,
+    .rail-cover:focus-visible {
+        transform: scale(var(--art-grow));
+    }
+    .rail-cover img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .rail-dots {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+        align-items: center;
+    }
+    .rail-dot {
+        position: relative;
+        width: 30px;
+        height: 30px;
+        border-radius: 8px;
+        display: grid;
+        place-items: center;
+        color: rgba(255, 255, 255, 0.55);
+        transition: background 120ms ease, color 120ms ease;
+    }
+    .rail-dot:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #fff;
+    }
+    .rail-badge {
+        position: absolute;
+        top: -3px;
+        right: -3px;
+        min-width: 14px;
+        height: 14px;
+        padding: 0 3px;
+        border-radius: 999px;
+        background: var(--accent);
+        color: #fff;
+        font-size: 8.5px;
+        font-weight: 700;
+        display: grid;
+        place-items: center;
+        /* Reads as a badge ON the icon rather than a dot beside it. */
+        box-shadow: 0 0 0 2px var(--bg-player);
+    }
+    .rail-spacer {
+        flex: 1;
+    }
+    .rail-title {
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+        font-size: 10.5px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        max-height: 190px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+    }
+    .rail-title b {
+        color: #fff;
+        font-weight: 700;
+    }
+
+    /* ---- drag handle ---- */
+    .grip {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 9px;
+        z-index: 30;
+        cursor: col-resize;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        touch-action: none;
+    }
+    .grip::before {
+        content: "";
+        width: 3px;
+        height: 34px;
+        border-radius: 2px;
+        background: transparent;
+        transition: background 150ms ease, height 150ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .grip:hover::before,
+    .grip.on::before {
+        background: color-mix(in srgb, var(--accent-hover) 75%, transparent);
+        height: 62px;
+    }
+    .wtag {
+        position: absolute;
+        left: 14px;
+        top: 56px;
+        z-index: 31;
+        padding: 3px 8px;
+        border-radius: 999px;
+        background: rgba(0, 0, 0, 0.72);
+        backdrop-filter: blur(8px);
+        font-size: 10.5px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        pointer-events: none;
+    }
+    .wtag.snap {
+        color: var(--accent-hover);
     }
 
     /* Frosted-glass header floating over the scrolling content: backdrop-filter
@@ -481,17 +1273,45 @@
         height: 46px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 0 14px;
+        gap: 9px;
+        padding: 0 11px;
         z-index: 5;
-        background: rgba(20, 20, 24, 0.28);
-        backdrop-filter: blur(20px) saturate(1.7);
-        -webkit-backdrop-filter: blur(20px) saturate(1.7);
-        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
     }
-    .np-title {
+    .np-headmid {
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+    }
+    /* The status swaps with the glass bar's own breadcrumb motion, so a change
+       of peer or state reads as an arrival rather than a flicker. Keyed on the
+       text, so it only replays when the line actually changes. */
+    .np-status {
+        display: block;
+        font-size: 10.5px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.55);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-variant-numeric: tabular-nums;
+        animation: statusin 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    @keyframes statusin {
+        from { opacity: 0; transform: translateX(11px); }
+        to { opacity: 1; transform: none; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .np-status {
+            animation: none;
+        }
+    }
+    .np-from {
+        display: block;
         font-size: 13px;
         font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
     }
     .np-icon {
@@ -505,6 +1325,11 @@
     .np-icon:hover { background: var(--bg-highlight); color: var(--text-primary); }
 
     .np-scroll {
+        /* Fills the absolutely-positioned .full-view rather than sizing to its
+           content, so the pane scrolls inside the panel and the glass header
+           keeps overlaying it. */
+        flex: 1;
+        min-height: 0;
         overflow-y: auto;
         overflow-anchor: none;
         overscroll-behavior: none;
@@ -665,6 +1490,17 @@
         align-items: end;
         gap: 2px;
         height: 38px;
+        /* It is a control now, not a picture of one. */
+        cursor: pointer;
+        touch-action: none;
+    }
+    .wave:focus-visible {
+        outline: 2px solid var(--accent-hover);
+        outline-offset: 3px;
+        border-radius: 2px;
+    }
+    .wave.scrubbing {
+        cursor: grabbing;
     }
     .wave i {
         flex: 0 0 2px;
@@ -699,72 +1535,416 @@
     .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
 
     /* source card */
-    .src {
-        background: var(--bg-elevated);
-        border-radius: 10px;
-        padding: 12px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-    .src-lab {
-        font-size: 11px;
-        letter-spacing: 0.1em;
-        text-transform: uppercase;
-        color: var(--text-muted);
-        font-weight: 600;
-    }
-    .peer { display: flex; align-items: center; gap: 10px; min-width: 0; }
-    .av {
-        width: 32px;
-        height: 32px;
-        border-radius: 9px;
-        flex: 0 0 auto;
-        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-        display: grid;
-        place-items: center;
-        font-weight: 700;
-        font-size: 13px;
-        color: #04222f;
-    }
-    .who {
-        font-size: 13px;
-        font-weight: 600;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .buf { display: flex; flex-direction: column; gap: 5px; }
-    .buf .bar { height: 6px; border-radius: 3px; background: var(--bg-highlight); overflow: hidden; }
-    .buf .bar i {
-        display: block;
-        height: 100%;
-        border-radius: 3px;
-        background: linear-gradient(90deg, var(--accent), var(--accent-hover));
-    }
-    .buf .meta {
-        display: flex;
-        justify-content: space-between;
-        font-size: 11px;
-        color: var(--text-muted);
-        font-variant-numeric: tabular-nums;
-    }
-
     /* save action row */
-    .actions-row {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
     /* tracklist */
-    .section { display: flex; flex-direction: column; gap: 10px; }
     .lab {
         font-size: 11px;
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: var(--text-muted);
         font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 7px;
+    }
+    .lab .cnt {
+        letter-spacing: 0;
+        color: #5c5c5c;
+    }
+    /* Section spacing belongs to the label, not to whatever happens to sit
+       above it — an artist with no social links used to leave the releases
+       heading jammed against the pill, because the gap was living on the
+       chip row that was not rendered. */
+    .pane .lab {
+        margin-top: 18px;
+    }
+    .pane > .lab:first-child {
+        margin-top: 0;
+    }
+
+    /* ---- segmented control ---- */
+    .segwrap {
+        /* Sticky under the 46px glass header: keeping the scroll offset across
+           a pane switch is worthless if the control you just used has scrolled
+           out of reach. The gradient hides rows sliding under it. */
+        position: sticky;
+        top: 46px;
+        z-index: 4;
+        margin: 0 -14px;
+        padding: 7px 14px 8px;
+        /* Glass, not a solid fill: an opaque strip here painted straight over
+           the album bleed and read as a grey band across the artwork. This
+           tints with whatever is behind it exactly as the header does, while
+           still hiding the rows that scroll under it. */
+        background: rgba(20, 20, 24, 0.55);
+        backdrop-filter: blur(12px) saturate(1.7);
+        -webkit-backdrop-filter: blur(12px) saturate(1.7);
+        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+    }
+    .seg {
+        position: relative;
+        display: flex;
+        background: rgba(0, 0, 0, 0.28);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 3px;
+    }
+    .seg-thumb {
+        position: absolute;
+        top: 3px;
+        bottom: 3px;
+        left: 3px;
+        border-radius: 6px;
+        background: color-mix(in srgb, var(--accent) 28%, var(--bg-highlight));
+        transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+            width 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .seg-btn {
+        position: relative;
+        z-index: 1;
+        flex: 1;
+        text-align: center;
+        font-size: 11.5px;
+        font-weight: 700;
+        padding: 6px 4px;
+        border-radius: 6px;
+        color: var(--text-muted);
+        transition: color 160ms ease;
+    }
+    .seg-btn:hover { color: var(--text-secondary); }
+    .seg-btn.on { color: #fff; }
+
+    .pane {
+        display: flex;
+        flex-direction: column;
+        animation: panein 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    @keyframes panein {
+        from { opacity: 0; transform: translateX(var(--dir, 10px)); }
+        to { opacity: 1; transform: none; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .pane { animation: none; }
+        .seg-thumb { transition-duration: 1ms; }
+    }
+    .pane-empty {
+        color: var(--text-muted);
+        font-size: 12px;
+        padding: 10px 2px;
+    }
+
+    /* ---- up next ---- */
+    .upnext {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        width: 100%;
+        padding: 8px;
+        margin-bottom: 12px;
+        border-radius: 7px;
+        background: rgba(0, 0, 0, 0.24);
+        border: 1px solid var(--border);
+        transition: border-color 160ms ease, background 160ms ease;
+    }
+    .upnext:hover {
+        background: rgba(0, 0, 0, 0.34);
+        border-color: color-mix(in srgb, var(--accent-hover) 45%, var(--border));
+    }
+    .upnext img { width: 34px; height: 34px; border-radius: 4px; flex: none; object-fit: cover; }
+    .un-body { min-width: 0; flex: 1; display: block; }
+    .un-lab {
+        display: block;
+        font-size: 9.5px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        font-weight: 700;
+    }
+    .un-title {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .un-dur {
+        font-size: 11px;
+        color: var(--text-muted);
+        font-variant-numeric: tabular-nums;
+        flex: none;
+    }
+
+    /* ---- queue extras ---- */
+    .row .own {
+        color: var(--accent-hover);
+        margin-left: 5px;
+        display: inline-flex;
+        vertical-align: -1px;
+    }
+    .row .lis {
+        font-size: 10.5px;
+        color: var(--text-secondary);
+        font-variant-numeric: tabular-nums;
+        padding: 1px 6px;
+        border-radius: 3px;
+        background: color-mix(in srgb, var(--accent) 16%, transparent);
+        flex: none;
+    }
+
+    /* ---- artist pill ---- */
+    .achip {
+        display: flex;
+        /* Block-level, so it tracks the panel width instead of shrinking to
+           its own content at every size. */
+        width: 100%;
+        gap: 11px;
+        align-items: center;
+        padding: 10px;
+        border-radius: var(--radius);
+        background: rgba(0, 0, 0, 0.24);
+        border: 1px solid var(--border);
+        transition: border-color 160ms ease, background 160ms ease;
+    }
+    .achip:hover {
+        background: rgba(0, 0, 0, 0.34);
+        border-color: color-mix(in srgb, var(--accent-hover) 45%, var(--border));
+    }
+    .achip img,
+    .achip-ph {
+        width: 54px;
+        height: 54px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex: none;
+        transition: transform var(--art-motion);
+    }
+    .achip-ph {
+        display: grid;
+        place-items: center;
+        background: var(--bg-highlight);
+        color: var(--text-muted);
+    }
+    .achip:hover img { transform: scale(var(--art-grow)); }
+    .achip-body { min-width: 0; flex: 1; display: block; }
+    .achip-name {
+        display: block;
+        font-weight: 700;
+        font-size: 13.5px;
+        color: var(--text-primary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .achip-stats {
+        display: flex;
+        gap: 13px;
+        margin-top: 3px;
+    }
+    /* Once the panel is wide enough the figures use the room instead of
+       huddling against the portrait. */
+    .achip-stats.spread {
+        justify-content: space-between;
+        gap: 8px;
+        padding-right: 4px;
+    }
+    .achip-stats .st { display: flex; flex-direction: column; }
+    .achip-stats .st b {
+        font-size: 13px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        line-height: 1.1;
+        color: var(--text-primary);
+    }
+    .achip-stats .st i {
+        font-size: 9.5px;
+        font-style: normal;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.07em;
+    }
+
+    /* ---- social links: the artist page's own --soc tint model ---- */
+    .socials {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+        margin-top: 10px;
+    }
+    .soc {
+        display: grid;
+        place-items: center;
+        width: 29px;
+        height: 29px;
+        border-radius: 50%;
+        color: rgb(var(--soc, 160, 168, 177));
+        transition: background 160ms ease, transform 160ms ease;
+    }
+    .soc:hover {
+        background: rgba(var(--soc, 160, 168, 177), 0.13);
+        transform: translateY(-1px);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .soc { transition-duration: 1ms; }
+    }
+
+    .showall {
+        width: 100%;
+        text-align: center;
+        font-size: 11.5px;
+        font-weight: 700;
+        padding: 8px;
+        border-radius: 7px;
+        margin-top: 10px;
+        border: 1px solid var(--border);
+        color: var(--text-secondary);
+        transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+    }
+    .showall:hover {
+        color: #fff;
+        border-color: color-mix(in srgb, var(--accent-hover) 50%, var(--border));
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    /* Fans-also-like avatars, sized for the panel rather than the artist page. */
+    .av2 {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        overflow: hidden;
+        background: var(--bg-highlight);
+        transition: transform var(--art-motion);
+    }
+    .fan:hover .av2 { transform: scale(var(--art-grow)); }
+    .av2 img { width: 100%; height: 100%; object-fit: cover; }
+    .fn {
+        font-size: 10.5px;
+        margin-top: 5px;
+        text-align: center;
+        color: var(--text-secondary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    /* The album page's credits block, verbatim, so a record reads the same in
+       both places. */
+    .credits {
+        margin-top: 18px;
+        color: var(--text-muted);
+        font-size: 11.5px;
+        line-height: 1.7;
+    }
+    .credits .clab {
+        display: block;
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: #5e5e5e;
+        margin-bottom: 4px;
+    }
+
+    p.bio {
+        margin: 8px 0 0;
+        font-size: 12.5px;
+        line-height: 1.55;
+        color: var(--text-secondary);
+    }
+    p.bio.clamped {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .pane .more {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        margin-top: 5px;
+        font-size: 11.5px;
+        font-weight: 700;
+        color: var(--accent-hover);
+    }
+    .pane .more :global(svg) {
+        transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .pane .more.open :global(svg) {
+        transform: rotate(180deg);
+    }
+
+    /* ---- transfer detail, on hovering the header ---- */
+    .headzone {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 6;
+    }
+    .xpop {
+        position: absolute;
+        top: 46px;
+        left: 0;
+        right: 0;
+        z-index: -1;
+        padding: 10px 12px 12px;
+        background: rgba(22, 22, 26, 0.94);
+        backdrop-filter: blur(16px) saturate(1.5);
+        -webkit-backdrop-filter: blur(16px) saturate(1.5);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05);
+        opacity: 0;
+        transform: translateY(-8px);
+        pointer-events: none;
+        transition: opacity 150ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .headzone:hover .xpop,
+    .headzone:focus-within .xpop {
+        opacity: 1;
+        transform: none;
+        pointer-events: auto;
+    }
+    .xrow { display: flex; align-items: center; gap: 9px; }
+    .xav {
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        flex: none;
+        display: grid;
+        place-items: center;
+        font-size: 11px;
+        font-weight: 700;
+        background: color-mix(in srgb, var(--accent) 42%, #333);
+        color: #fff;
+    }
+    .xwho { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }
+    .xwho span {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .xwho small {
+        display: block;
+        font-weight: 600;
+        font-size: 10.5px;
+        color: var(--text-muted);
+        font-variant-numeric: tabular-nums;
+    }
+    .xbar {
+        height: 4px;
+        border-radius: 2px;
+        background: #2b2b2b;
+        overflow: hidden;
+        margin-top: 9px;
+    }
+    .xbar i {
+        display: block;
+        height: 100%;
+        border-radius: 2px;
+        background: var(--accent-hover);
+        transition: width 240ms linear;
     }
     .list { display: flex; flex-direction: column; }
     .row {
@@ -804,7 +1984,13 @@
     @media (prefers-reduced-motion: reduce) { .eq.active b { animation: none; } }
 
     /* discovery: more-from-artist grid */
-    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    /* Gains a third column once the panel is dragged wide enough to carry one
+       (--cols is set per render from the panel width). */
+    .grid2 {
+        display: grid;
+        grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
+        gap: 12px;
+    }
     /* min-width:0 lets both columns stay an equal 1fr; without it a long
        (nowrap) title forces its column wider and shrinks the other. */
     .mini { text-align: left; min-width: 0; }
@@ -835,15 +2021,6 @@
        space-between fits all five within the panel with no cutoff. */
     .fans { display: flex; justify-content: space-evenly; padding: 4px 0; }
     .fan { width: 52px; text-align: center; }
-    .fan .av {
-        width: 52px;
-        height: 52px;
-        border-radius: 50%;
-        overflow: hidden;
-        background: var(--bg-highlight);
-    }
-    .fan .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
-    .fan:hover .av { outline: 2px solid var(--accent); outline-offset: 2px; }
     .fan .fn {
         font-size: 11px;
         margin-top: 7px;
@@ -854,94 +2031,11 @@
     }
 
     /* discovery: about the artist */
-    .aboutcard {
-        display: block;
-        width: 100%;
-        border-radius: 12px;
-        overflow: hidden;
-        background: var(--bg-elevated);
-    }
     /* Full square Deezer image, uncropped (square img in a square box), with a
        tall bottom fade to the card colour so the photo melts into the text. */
-    .bandphoto {
-        display: block;
-        position: relative;
-        width: 100%;
-        aspect-ratio: 1;
-        text-align: left;
-    }
-    .bandphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
-    .bandphoto .ph {
-        width: 100%;
-        aspect-ratio: 1;
-        display: grid;
-        place-items: center;
-        color: var(--text-muted);
-    }
-    .bandphoto::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        background: linear-gradient(
-            to top,
-            var(--bg-elevated) 6%,
-            color-mix(in srgb, var(--bg-elevated) 55%, transparent) 22%,
-            transparent 48%
-        );
-    }
-
     /* Name + bio ride up into the faded bottom of the photo, so the text
        reads as emerging from the image. */
-    .about-text {
-        position: relative;
-        z-index: 2;
-        margin-top: -52px;
-        padding: 0 13px;
-    }
-    .about-text .nm {
-        display: block;
-        text-align: left;
-        font-size: 19px;
-        font-weight: 700;
-        color: #fff;
-        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
-        margin-bottom: 8px;
-    }
-    .about-text .nm:hover { text-decoration: underline; }
-
     .bio { padding: 0 0 2px; }
-    .bio p {
-        margin: 0;
-        font-size: 12.5px;
-        line-height: 1.5;
-        color: var(--text-secondary);
-    }
-    .bio p.clamped {
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        line-clamp: 3;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-    .bio .more {
-        margin-top: 4px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--accent-hover);
-    }
-    .bio .more:hover { text-decoration: underline; }
-
-    .about-body { display: flex; gap: 18px; padding: 12px 13px 13px; }
-    .about-body .st { font-size: 11px; color: var(--text-muted); }
-    .about-body .st b {
-        display: block;
-        color: var(--text-primary);
-        font-size: 14px;
-        font-weight: 700;
-        font-variant-numeric: tabular-nums;
-    }
-
     .empty {
         display: flex;
         flex-direction: column;
diff --git a/src/lib/state.svelte.js b/src/lib/state.svelte.js
index 8127dea..fa4fe15 100644
--- a/src/lib/state.svelte.js
+++ b/src/lib/state.svelte.js
@@ -24,12 +24,37 @@ export const app = $state({
     showLogin: false,
 });
 
+/** Now Playing panel width: the default the magnet snaps back to, and the
+ *  bounds the drag handle clamps between. Exported so the panel and the grid
+ *  can never disagree about them. */
+export const NP_WIDTH_DEFAULT = 340;
+export const NP_WIDTH_MIN = 272;
+export const NP_WIDTH_MAX = 560;
+const NP_WIDTH_KEY = "soulstream.nowPlayingWidth";
+
+function readPanelWidth() {
+    try {
+        const raw = Number(localStorage.getItem(NP_WIDTH_KEY));
+        if (!Number.isFinite(raw) || raw <= 0) return NP_WIDTH_DEFAULT;
+        return Math.max(NP_WIDTH_MIN, Math.min(NP_WIDTH_MAX, raw));
+    } catch {
+        return NP_WIDTH_DEFAULT;
+    }
+}
+
 export const ui = $state({
     view: "home",
     albumId: null, // selected album in Library view
     playlistId: null, // selected playlist in Playlist view
-    nowPlaying: true, // right-side Now Playing panel open
+    // The Now Playing panel is EXPANDED vs COLLAPSED, never gone: collapsing it
+    // leaves the rail (see NowPlaying.svelte), the same way the left nav
+    // collapses to an icon rail rather than disappearing.
+    nowPlaying: true,
     sidebarCollapsed: false, // left nav collapsed to an icon rail
+    // User-dragged width of the expanded panel. Persisted, unlike the other ui
+    // flags: a width you set by hand and lost on every launch would be worse
+    // than not being able to set it at all.
+    nowPlayingWidth: readPanelWidth(),
     // Full-window artwork lightbox. `null` when closed; otherwise a descriptor
     // of whatever cover to show — { src, local, title, subtitle } — so any
     // surface can open it, not only the playing track.
@@ -44,6 +69,17 @@ export function toggleNowPlaying() {
     ui.nowPlaying = !ui.nowPlaying;
 }
 
+/** Set the expanded panel's width, clamped and remembered. */
+export function setNowPlayingWidth(px) {
+    const w = Math.max(NP_WIDTH_MIN, Math.min(NP_WIDTH_MAX, Math.round(px)));
+    ui.nowPlayingWidth = w;
+    try {
+        localStorage.setItem(NP_WIDTH_KEY, String(w));
+    } catch {
+        // A blocked storage quota must not break resizing for the session.
+    }
+}
+
 export function toggleSidebar() {
     ui.sidebarCollapsed = !ui.sidebarCollapsed;
 }
@@ -525,23 +561,26 @@ export function coverLoadError(
     }
 }
 
-/** Cover URL to display for a currently-playing catalog item. Kicks off an
- * idempotent high-res upgrade for its album and returns the best URL to show
- * now — the verified upgrade once resolved, else the instant Deezer cover. The
- * player surfaces proxy the returned URL through getCatalogArt; because this
- * reads the reactive coverUpgrades map, their effect re-runs and re-proxies at
- * full resolution the moment the upgrade lands. */
+/**
+ * Cover URL to display for a currently-playing catalog item — the record's OWN
+ * asset, at the largest size that asset comes in.
+ *
+ * It used to also kick off a cover "upgrade", which resolves a better image by
+ * ARTIST + TITLE. That is the identity trap: an artist can have several records
+ * under one title — every self-titled Weezer album is "Weezer" — and the
+ * resolver hands back whichever one the provider answers with, so all seven
+ * played back showing the Green Album's art. The upgrade map is keyed by the
+ * original cover URL and was innocent; the value put in it was wrong.
+ *
+ * A name cannot identify a record, so the substitution is gone. `hqCover`
+ * rewrites the same Deezer asset to its 1000x1000 variant, which is a genuine
+ * quality win with no identity risk, and is more than the panel needs even
+ * dragged to its widest.
+ */
 export function playerArtSource(item) {
     const url = item?.artUrl;
     if (!url) return null;
-    if (item.album) {
-        resolveCovers(
-            [{ cover: url, title: item.album }],
-            item.artist ?? "",
-            { sticky: true },
-        );
-    }
-    return coverUpgrades[url] ?? url;
+    return hqCover(url);
 }
 
 // Artist heroes have their own proxy because provider fallbacks may be finished
@@ -2388,6 +2427,10 @@ export const discovery = $state({
     albums: [], // discography → "More from"
     related: [], // "Fans also like"
     bio: null, // Wikipedia summary → "About the artist"
+    // Declared links for the artist ({ kind, url }), already fetched as part of
+    // the artist page below — kept rather than discarded so the Now Playing
+    // panel can show the same chips the artist page does.
+    socials: [],
 });
 
 const bioCache = new Map(); // normalized name → bio text (or null)
@@ -2512,6 +2555,7 @@ export async function loadDiscovery(artistName) {
         discovery.albumCount = null;
         discovery.albums = [];
         discovery.related = [];
+        discovery.socials = [];
         discovery.bio = bioCache.has(norm) ? touchCache(bioCache, norm) : null;
     }
 
@@ -2599,6 +2643,7 @@ export async function loadDiscovery(artistName) {
             discovery.fans = page.artist.fans ?? null;
             discovery.albumCount = page.artist.album_count ?? page.albums.length;
             discovery.albums = page.albums ?? [];
+            discovery.socials = page.socials ?? [];
             discovery.pageLoaded = true;
             discovery.pageWanted = false;
         }
@@ -3772,6 +3817,41 @@ function trimTransferHistory(store, maxTerminal, waitUntilIdle = false) {
     for (const transfer of terminal.slice(maxTerminal)) delete store[transfer.id];
 }
 
+// ---- streaming rate ------------------------------------------------------
+// `player.streamSpeed` is measured here because nothing upstream reports it.
+// Samples are [timestamp, bytesReceived] over a rolling window, so a transfer
+// that stalls decays toward zero instead of reporting its last burst forever,
+// and a bursty peer reads as one speed rather than a flickering number.
+const RATE_WINDOW_MS = 1500;
+let rateSamples = [];
+
+function resetStreamRate() {
+    rateSamples = [];
+    player.streamSpeed = 0;
+}
+
+function noteStreamRate(received) {
+    const now = performance.now();
+    // A new file restarts the measurement: without this, the first sample of
+    // the next track is compared against the last of the previous one.
+    if (rateSamples.length && received < rateSamples[rateSamples.length - 1][1]) {
+        rateSamples = [];
+    }
+    rateSamples.push([now, received]);
+    while (rateSamples.length > 2 && now - rateSamples[0][0] > RATE_WINDOW_MS) {
+        rateSamples.shift();
+    }
+}
+
+function streamRate() {
+    if (rateSamples.length < 2) return 0;
+    const [t0, b0] = rateSamples[0];
+    const [t1, b1] = rateSamples[rateSamples.length - 1];
+    const secs = (t1 - t0) / 1000;
+    if (secs <= 0) return 0;
+    return Math.max(0, (b1 - b0) / secs);
+}
+
 export const player = $state({
     status: "idle", // idle | buffering | playing | paused
     track: null, // { title, sub, source: 'stream'|'local' }
@@ -3785,6 +3865,11 @@ export const player = $state({
     // streaming buffer info
     streamReceived: 0,
     streamTotal: 0,
+    // Bytes/sec, DERIVED here rather than reported: the `soulseek:stream` event
+    // carries only {received, total, done}, and unlike the download path there
+    // is no `speed_bps` to read. 0 means "not measured yet" — the panel shows
+    // no rate rather than a zero, because a fresh stream is not a stalled one.
+    streamSpeed: 0,
     error: "",
     // album play queue (local tracks)
     queue: [],
@@ -4133,11 +4218,17 @@ export function initEvents() {
     });
 
     api.onEvent("soulseek:stream", (s) => {
+        // Rate is measured here because nothing upstream reports it. A rolling
+        // average over ~1.5s of samples, not the instantaneous delta: Soulseek
+        // transfers arrive in bursts, and a per-event figure reads as a number
+        // flickering between 0 and several MB/s rather than a speed.
+        noteStreamRate(s.received);
         latestStreamReceived = s.received;
         latestStreamTotal = s.total;
         if (ui.windowActive) {
             player.streamReceived = s.received;
             player.streamTotal = s.total;
+            player.streamSpeed = streamRate();
         }
         const cur = player.queue[player.queueIndex];
         if (s.done) {
@@ -4311,6 +4402,7 @@ export async function playLocalFile(path, title, subLabel, artPath = null) {
     player.status = "buffering";
     player.duration = null;
     player.streamTotal = 0;
+    resetStreamRate();
     loadWaveform(path);
     setAccentFromArt(artPath);
     await api.playLocal(path, null);
@@ -4356,6 +4448,7 @@ function playQueueIndex(i) {
         // Remote track streamed from a peer while it downloads to cache.
         player.streamReceived = 0;
         player.streamTotal = item.stream.size;
+        resetStreamRate();
         if ("trackId" in item) player.catalogRef.trackId = item.trackId;
         appendedNextPath = null;
         setAccentFromArtUrl(item.artUrl ?? null);
@@ -4462,6 +4555,7 @@ function advanceGaplessly() {
         player.track = { title: item.title, sub: item.sub, source: "stream", path: item.path };
         player.streamReceived = 0;
         player.streamTotal = 0;
+        resetStreamRate();
         if ("trackId" in item) player.catalogRef.trackId = item.trackId;
         setAccentFromArtUrl(item.artUrl ?? null);
         loadStreamWaveform(item);
diff --git a/src/styles/global.css b/src/styles/global.css
index 1803178..c7576cb 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -86,6 +86,9 @@
     --sidebar-width: 232px;
     --player-height: 88px;
     --nowplaying-width: 340px;
+    /* What the Now Playing panel collapses TO. It never collapses to zero —
+       see the note in App.svelte and the rail in NowPlaying.svelte. */
+    --nowplaying-rail: 64px;
 }
 
 /* Floating overlay scrollbar (see src/lib/scrollbar.js). The native bar is