perf(linux): WebKit probe, throttled progress IPC, snapshot playback UI (#452)

* feat(linux): optional native GDK for Nix gdk-session

Introduce PSYSONIC_ALLOW_NATIVE_GDK so main skips the default GDK_BACKEND=x11
pin when the Nix gdk-session wrapper sets the flag. Remove GDK_BACKEND from
the npm tauri:dev script so it does not override nix develop defaults.

* fix(ui): portal server switch menu above sidebar

Main column stacks below the sidebar (layout z-index), so an in-tree dropdown
could never win over the left nav. Render the menu via createPortal to
document.body with fixed coordinates, matching the library scope picker.

* feat(perf): add mainstage probe controls and cut WebKit repaint load

Add a dedicated performance probe surface for mainstage/home toggles and wire Linux CPU diagnostics to isolate expensive UI paths. Tune waveform drawing and Home artwork clipping/windowing so visible content loads immediately while reducing WebKit compositor pressure during playback.

* fix(perf): stop hero rotation when section is off-screen

Gate hero auto-rotation and backdrop crossfade by real viewport visibility using the actual scrolling ancestor. This prevents periodic 10-second CPU spikes from hidden hero updates while preserving normal behavior when the hero is visible.

* fix(perf): isolate player progress updates from mainstage diagnostics

Add probe toggles for PlayerBar waveform and live progress UI updates to confirm playback progress churn as the main CPU driver.
Restore Home artwork quality defaults and keep visual-degradation modes opt-in via debug flags only.

* fix(hero): resume background and autoplay after viewport return

Re-check hero visibility on focus/visibility changes and add a short recovery poll while off-screen so missed scroll/RAF events cannot leave hero animation paused.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(perf): decouple playback progress from mainstage compositing pressure

Throttle audio progress delivery and route live seekbar timing through a lightweight progress channel to cut focus-time WebKit CPU spikes.
Add focused diagnostics in Performance Probe and restore hero/waveform behavior so visuals remain stable while profiling.

* fix(debug): open performance probe with Ctrl+Shift+D

Replace logo-triggered opening with a keyboard shortcut and keep logo purely decorative to avoid accidental probe activation.

* docs(changelog): document experiment/performance probe and playback work

Add an [Unreleased] section for the performance probe, throttled audio
progress IPC, snapshot-based live UI updates, WaveformSeek scheduling
over the same canvas bar renderer, Hero/Home rail fixes, and Linux/Nix
GDK dev ergonomics.

* perf(linux): add WebKit probe, throttle progress IPC, snapshot playback UI

Ship Performance Probe (Ctrl+Shift+D), Rust-throttled audio:progress, a
playback progress snapshot channel with coarse Zustand timeline commits,
Linux /proc CPU readout for the probe, Hero and Home rail artwork fixes,
Tracks SongRail windowing parity, MPRIS cleanup, gated perf counters, and
WaveformSeek paused-seek correctness. Documented in CHANGELOG for PR #452.

* docs(changelog): fold perf work into 1.45.0 and refresh date

Drop the separate 1.45.1 heading; keep PR #452 notes under 1.45.0 Added and
set the section date to 2026-05-04. Restore the safety preface before the
versioned sections.

* docs(changelog): order 1.45.0 Added entries by PR number

Sort the 1.45.0 release notes so subsections follow ascending PR id (390
through 452), with PR #452 last.

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

src/App.tsx

@@ -90,6 +90,7 @@ import i18n from './i18n';
 import { switchActiveServer } from './utils/switchActiveServer';
 import {
   usePlayerStore,
+  getPlaybackProgressSnapshot,
   initAudioListeners,
   songToTrack,
   shuffleArray,
@@ -107,6 +108,7 @@ import { DEFAULT_IN_APP_BINDINGS, canRunShortcutActionInMiniWindow, executeCliPl
 import { matchInAppShortcutAction } from './shortcuts/runtime';
 import ZipDownloadOverlay from './components/ZipDownloadOverlay';
 import PasteClipboardHandler from './components/PasteClipboardHandler';
+import { usePerfProbeFlags } from './utils/perfFlags';
 
 const SIDEBAR_COLLAPSED_STORAGE_KEY = 'psysonic_sidebar_collapsed';
 
@@ -233,6 +235,7 @@ function AppShell() {
   const offlineAlbums = useOfflineStore(s => s.albums);
   const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
   const floatingPlayerBar = useThemeStore(s => s.floatingPlayerBar);
+  const perfFlags = usePerfProbeFlags();
 
   // Mini player → main: route requests dispatched as `psy:navigate`
   // CustomEvents from the bridge land here so React Router can take over.
@@ -657,37 +660,41 @@ function AppShell() {
             railInset="panel"
           >
             <Suspense fallback={null}>
-              <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/albums" element={<Albums />} />
-                <Route path="/tracks" element={<Tracks />} />
-                <Route path="/random" element={<RandomLanding />} />
-                <Route path="/random/albums" element={<RandomAlbums />} />
-                <Route path="/album/:id" element={<AlbumDetail />} />
-                <Route path="/artists" element={<Artists />} />
-                <Route path="/artist/:id" element={<ArtistDetail />} />
-                <Route path="/new-releases" element={<NewReleases />} />
-                <Route path="/favorites" element={<Favorites />} />
-                <Route path="/random/mix" element={<RandomMix />} />
-                <Route path="/lucky-mix" element={<LuckyMixPage />} />
-                <Route path="/label/:name" element={<LabelAlbums />} />
-                <Route path="/search" element={<SearchResults />} />
-                <Route path="/search/advanced" element={<AdvancedSearch />} />
-                <Route path="/statistics" element={<Statistics />} />
-                <Route path="/most-played" element={<MostPlayed />} />
-                <Route path="/now-playing" element={isMobile ? <MobilePlayerView /> : <NowPlayingPage />} />
-                <Route path="/settings" element={<Settings />} />
-                <Route path="/whats-new" element={<WhatsNew />} />
-                <Route path="/help" element={<Help />} />
-                <Route path="/offline" element={<OfflineLibrary />} />
-                <Route path="/genres" element={<Genres />} />
-                <Route path="/genres/:name" element={<GenreDetail />} />
-                <Route path="/playlists" element={<Playlists />} />
-                <Route path="/playlists/:id" element={<PlaylistDetail />} />
-                <Route path="/radio" element={<InternetRadio />} />
-                <Route path="/folders" element={<FolderBrowser />} />
-                <Route path="/device-sync" element={<DeviceSync />} />
-              </Routes>
+              {perfFlags.disableMainRouteContentMount ? (
+                <div style={{ minHeight: '60vh' }} />
+              ) : (
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/albums" element={<Albums />} />
+                  <Route path="/tracks" element={<Tracks />} />
+                  <Route path="/random" element={<RandomLanding />} />
+                  <Route path="/random/albums" element={<RandomAlbums />} />
+                  <Route path="/album/:id" element={<AlbumDetail />} />
+                  <Route path="/artists" element={<Artists />} />
+                  <Route path="/artist/:id" element={<ArtistDetail />} />
+                  <Route path="/new-releases" element={<NewReleases />} />
+                  <Route path="/favorites" element={<Favorites />} />
+                  <Route path="/random/mix" element={<RandomMix />} />
+                  <Route path="/lucky-mix" element={<LuckyMixPage />} />
+                  <Route path="/label/:name" element={<LabelAlbums />} />
+                  <Route path="/search" element={<SearchResults />} />
+                  <Route path="/search/advanced" element={<AdvancedSearch />} />
+                  <Route path="/statistics" element={<Statistics />} />
+                  <Route path="/most-played" element={<MostPlayed />} />
+                  <Route path="/now-playing" element={isMobile ? <MobilePlayerView /> : <NowPlayingPage />} />
+                  <Route path="/settings" element={<Settings />} />
+                  <Route path="/whats-new" element={<WhatsNew />} />
+                  <Route path="/help" element={<Help />} />
+                  <Route path="/offline" element={<OfflineLibrary />} />
+                  <Route path="/genres" element={<Genres />} />
+                  <Route path="/genres/:name" element={<GenreDetail />} />
+                  <Route path="/playlists" element={<Playlists />} />
+                  <Route path="/playlists/:id" element={<PlaylistDetail />} />
+                  <Route path="/radio" element={<InternetRadio />} />
+                  <Route path="/folders" element={<FolderBrowser />} />
+                  <Route path="/device-sync" element={<DeviceSync />} />
+                </Routes>
+              )}
             </Suspense>
           </OverlayScrollArea>
         </div>
@@ -738,7 +745,7 @@ function AppShell() {
           {isQueueVisible ? <PanelRightClose size={14} /> : <PanelRight size={14} />}
         </button>
       )}
-      {!isMobile && <QueuePanel />}
+      {!isMobile && !perfFlags.disableQueuePanelMount && <QueuePanel />}
       {isMobile && !isMobilePlayer && <BottomNav />}
       {!isMobilePlayer && <PlayerBar />}
       {isFullscreenOpen && (
@@ -750,7 +757,7 @@ function AppShell() {
       <GlobalConfirmModal />
       <OrbitAccountPicker />
       <OrbitHelpModal />
-      <TooltipPortal />
+      {!perfFlags.disableTooltipPortal && <TooltipPortal />}
       <AppUpdater />
     </div>
   );
@@ -1075,9 +1082,10 @@ function TauriEventBridge() {
       {
         const u = await listen<number>('media:seek-relative', e => {
           const s = usePlayerStore.getState();
+          const p = getPlaybackProgressSnapshot();
           const dur = s.currentTrack?.duration;
           if (!dur) return;
-          s.seek(Math.max(0, s.currentTime + e.payload) / dur);
+          s.seek(Math.max(0, p.currentTime + e.payload) / dur);
         });
         if (cancelled) { u(); return; }
         unlisten.push(u);
@@ -1152,6 +1160,11 @@ function TauriEventBridge() {
   // `psysonic --info`: JSON snapshot under XDG_RUNTIME_DIR (Rust writes atomically).
   useEffect(() => {
     let tid: ReturnType<typeof setTimeout> | undefined;
+    let lastPublishAt = 0;
+    let lastStableKey = '';
+    let lastPlaying = false;
+    const SNAPSHOT_PLAYING_HEARTBEAT_MS = 4000;
+    const SNAPSHOT_IDLE_HEARTBEAT_MS = 15000;
     const publish = () => {
       const s = usePlayerStore.getState();
       const auth = useAuthStore.getState();
@@ -1171,7 +1184,7 @@ function TauriEventBridge() {
         queue_index: s.queueIndex,
         queue_length: s.queue.length,
         is_playing: s.isPlaying,
-        current_time: s.currentTime,
+        current_time: getPlaybackProgressSnapshot().currentTime,
         volume: s.volume,
         repeat_mode: s.repeatMode,
         current_track_user_rating: currentTrackUserRating,
@@ -1183,11 +1196,32 @@ function TauriEventBridge() {
           folders: auth.musicFolders.map(f => ({ id: f.id, name: f.name })),
         },
       };
+      const stableKey = JSON.stringify({
+        trackId: s.currentTrack?.id ?? null,
+        radioId: s.currentRadio?.id ?? null,
+        queueIndex: s.queueIndex,
+        queueLength: s.queue.length,
+        isPlaying: s.isPlaying,
+        volume: Math.round(s.volume * 100),
+        repeatMode: s.repeatMode,
+        serverId: sid ?? null,
+        selected,
+        currentTrackUserRating,
+        currentTrackStarred,
+      });
+      const now = Date.now();
+      const heartbeatMs = s.isPlaying ? SNAPSHOT_PLAYING_HEARTBEAT_MS : SNAPSHOT_IDLE_HEARTBEAT_MS;
+      const stableChanged = stableKey !== lastStableKey;
+      const playingEdge = s.isPlaying !== lastPlaying;
+      if (!stableChanged && !playingEdge && now - lastPublishAt < heartbeatMs) return;
+      lastStableKey = stableKey;
+      lastPlaying = s.isPlaying;
+      lastPublishAt = now;
       invoke('cli_publish_player_snapshot', { snapshot }).catch(() => {});
     };
     publish();
     const schedule = () => {
-      if (tid !== undefined) clearTimeout(tid);
+      if (tid !== undefined) return;
       tid = setTimeout(() => {
         tid = undefined;
         publish();
@@ -1210,6 +1244,7 @@ export default function App() {
   const effectiveTheme = useThemeScheduler();
   const font = useFontStore(s => s.font);
   const [exportPickerOpen, setExportPickerOpen] = useState(false);
+  const perfFlags = usePerfProbeFlags();
 
   // Mini Player window: detected via Tauri window label. Rendered without
   // router / sidebar / full audio listeners — it just listens for state + sends
@@ -1293,7 +1328,7 @@ export default function App() {
       <DragDropProvider>
         <MiniPlayer />
         <GlobalConfirmModal />
-        <TooltipPortal />
+        {!perfFlags.disableTooltipPortal && <TooltipPortal />}
       </DragDropProvider>
     );
   }