diff --git a/webui/src/routes/stats/-route.test.tsx b/webui/src/routes/stats/-route.test.tsx
index 604e8493..189ca154 100644
--- a/webui/src/routes/stats/-route.test.tsx
+++ b/webui/src/routes/stats/-route.test.tsx
@@ -114,6 +114,17 @@ describe('stats route', () => {
     await waitFor(() => expect(history.location.search).toContain('range=30d'));
   });
 
+  it('hands artist detail navigation directly to the shell bridge', async () => {
+    renderStatsRoute();
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Artist A' }));
+
+    expect(window.SoulSyncWebShellBridge?.navigateToArtistDetail).toHaveBeenCalledWith(
+      7,
+      'Artist A',
+    );
+  });
+
   it('redirects back home when the page is not allowed', async () => {
     window.SoulSyncWebShellBridge = createShellBridge({
       isPageAllowed: vi.fn((pageId) => pageId !== 'stats'),
diff --git a/webui/src/routes/stats/-ui/stats-page.tsx b/webui/src/routes/stats/-ui/stats-page.tsx
index a16c48de..5a9f4c94 100644
--- a/webui/src/routes/stats/-ui/stats-page.tsx
+++ b/webui/src/routes/stats/-ui/stats-page.tsx
@@ -135,6 +135,10 @@ export function StatsPage() {
     });
   };
 
+  const openArtistDetail = (artistId: string | number, artistName: string) => {
+    bridge.navigateToArtistDetail(artistId, artistName);
+  };
+
   return (
     <div id="stats-container" className={styles.statsContainer} data-testid="stats-page">
       <header className={styles.statsHeader}>
@@ -214,31 +218,23 @@ export function StatsPage() {
               <StatsSectionCard title="Top Artists">
                 <TopArtistsVisual
                   artists={cachedStats?.top_artists ?? []}
-                  onArtistSelect={(artistId, artistName) =>
-                    void openArtistDetail(bridge, artistId, artistName)
-                  }
+                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
                 />
                 <StatsRankedArtists
                   artists={cachedStats?.top_artists ?? []}
-                  onArtistSelect={(artistId, artistName) =>
-                    void openArtistDetail(bridge, artistId, artistName)
-                  }
+                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
                 />
               </StatsSectionCard>
               <StatsSectionCard title="Top Albums">
                 <StatsRankedAlbums
                   albums={cachedStats?.top_albums ?? []}
-                  onArtistSelect={(artistId, artistName) =>
-                    void openArtistDetail(bridge, artistId, artistName)
-                  }
+                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
                 />
               </StatsSectionCard>
               <StatsSectionCard title="Top Tracks">
                 <StatsRankedTracks
                   tracks={cachedStats?.top_tracks ?? []}
-                  onArtistSelect={(artistId, artistName) =>
-                    void openArtistDetail(bridge, artistId, artistName)
-                  }
+                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
                   onPlay={(track) => playStatsTrack(bridge, track)}
                 />
               </StatsSectionCard>
@@ -877,17 +873,6 @@ function EmptyListState({ message }: { message: string }) {
   return <div className={styles.emptyListState}>{message}</div>;
 }
 
-async function openArtistDetail(
-  bridge: ShellBridge,
-  artistId: string | number,
-  artistName: string,
-) {
-  await window.SoulSyncWebRouter?.navigateToPage('library');
-  window.setTimeout(() => {
-    bridge.navigateToArtistDetail(artistId, artistName);
-  }, 300);
-}
-
 async function playStatsTrack(
   bridge: ShellBridge,
   track: { title: string; artist: string; album: string },