From 81bdf4355fd9e751b5b2f8a20032fa2f3c31613d Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 17:02:46 +0300
Subject: [PATCH 01/42] refactor(webui): link stats artist chips

- replace manual artist-detail navigation with declarative anchors
- reuse the shared artist-detail helper for bubble and ranked views
- keep the no-id bubble fallback non-interactive
---
 webui/src/routes/stats/-route.test.tsx        |  27 +++-
 .../routes/stats/-ui/stats-page.module.css    |   9 +-
 webui/src/routes/stats/-ui/stats-page.tsx     | 153 +++++++-----------
 3 files changed, 91 insertions(+), 98 deletions(-)

diff --git a/webui/src/routes/stats/-route.test.tsx b/webui/src/routes/stats/-route.test.tsx
index ec251ae9..20867072 100644
--- a/webui/src/routes/stats/-route.test.tsx
+++ b/webui/src/routes/stats/-route.test.tsx
@@ -117,14 +117,29 @@ describe('stats route', () => {
     await waitFor(() => expect(history.location.search).toContain('range=30d'));
   });
 
-  it('hands artist detail navigation directly to the shell bridge', async () => {
-    renderStatsRoute();
+  it('links artist names to the artist-detail route', async () => {
+    const { history } = renderStatsRoute();
 
-    fireEvent.click(await screen.findByRole('button', { name: 'Artist A' }));
+    const bubbleLink = await screen.findByRole('link', {
+      name: 'Open artist detail for Artist A',
+    });
+    expect(bubbleLink).toHaveAttribute('href', '/artist-detail/library/7');
 
-    expect(window.SoulSyncWebShellBridge?.navigateToArtistDetail).toHaveBeenCalledWith(
-      7,
-      'Artist A',
+    const rankedLink = screen.getByRole('link', { name: 'Artist A' });
+    expect(rankedLink).toHaveAttribute('href', '/artist-detail/library/7');
+
+    fireEvent.click(bubbleLink);
+
+    await waitFor(() => expect(history.location.pathname).toBe('/artist-detail/library/7'));
+    await waitFor(() =>
+      expect(window.SoulSyncWebShellBridge?.navigateToArtistDetail).toHaveBeenCalledWith(
+        '7',
+        '',
+        null,
+        {
+          skipRouteChange: true,
+        },
+      ),
     );
   });
 
diff --git a/webui/src/routes/stats/-ui/stats-page.module.css b/webui/src/routes/stats/-ui/stats-page.module.css
index 17be6814..a6260111 100644
--- a/webui/src/routes/stats/-ui/stats-page.module.css
+++ b/webui/src/routes/stats/-ui/stats-page.module.css
@@ -364,10 +364,13 @@
   border: none;
   padding: 0;
   cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  font: inherit;
   transition: transform 0.2s ease;
 }
 
-.statsArtistBubble:disabled {
+.statsArtistBubbleDisabled {
   cursor: default;
 }
 
@@ -375,6 +378,10 @@
   transform: translateY(-3px);
 }
 
+.statsArtistBubbleDisabled:hover {
+  transform: none;
+}
+
 .statsBubbleImage {
   border-radius: 50%;
   background-size: cover;
diff --git a/webui/src/routes/stats/-ui/stats-page.tsx b/webui/src/routes/stats/-ui/stats-page.tsx
index 63259a7d..1c93b461 100644
--- a/webui/src/routes/stats/-ui/stats-page.tsx
+++ b/webui/src/routes/stats/-ui/stats-page.tsx
@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
-import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { type ComponentPropsWithoutRef, type ReactNode, useEffect, useRef, useState } from 'react';
 import {
   Bar,
   BarChart,
@@ -72,6 +72,8 @@ const STATS_CHART_CURSOR = {
   fill: 'rgba(var(--accent-rgb), 0.12)',
 } as const;
 
+const ARTIST_DETAIL_SOURCE = 'library' as const;
+
 export function StatsPage() {
   const bridge = useReactPageShell('stats');
 
@@ -136,10 +138,6 @@ 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}>
@@ -229,25 +227,15 @@ export function StatsPage() {
             </div>
             <div className={styles.statsRightCol}>
               <StatsSectionCard title="Top Artists">
-                <TopArtistsVisual
-                  artists={cachedStats?.top_artists ?? []}
-                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
-                />
-                <StatsRankedArtists
-                  artists={cachedStats?.top_artists ?? []}
-                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
-                />
+                <TopArtistsVisual artists={cachedStats?.top_artists ?? []} />
+                <StatsRankedArtists artists={cachedStats?.top_artists ?? []} />
               </StatsSectionCard>
               <StatsSectionCard title="Top Albums">
-                <StatsRankedAlbums
-                  albums={cachedStats?.top_albums ?? []}
-                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
-                />
+                <StatsRankedAlbums albums={cachedStats?.top_albums ?? []} />
               </StatsSectionCard>
               <StatsSectionCard title="Top Tracks">
                 <StatsRankedTracks
                   tracks={cachedStats?.top_tracks ?? []}
-                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
                   onPlay={(track) => playStatsTrack(bridge, track)}
                 />
               </StatsSectionCard>
@@ -405,13 +393,7 @@ function StatsGenreLegend({
   );
 }
 
-function TopArtistsVisual({
-  artists,
-  onArtistSelect,
-}: {
-  artists: StatsArtistRow[];
-  onArtistSelect: (artistId: string | number, artistName: string) => void;
-}) {
+function TopArtistsVisual({ artists }: { artists: StatsArtistRow[] }) {
   const topArtists = getTopArtistBubbles(artists);
   if (topArtists.length === 0) return null;
 
@@ -420,18 +402,8 @@ function TopArtistsVisual({
       <div className={styles.statsArtistBubbles}>
         {topArtists.map(({ artist, percent, size }) => {
           const isClickable = artist.id !== null && artist.id !== undefined;
-          return (
-            <button
-              key={`${artist.name}-${artist.id ?? 'unknown'}`}
-              type="button"
-              className={styles.statsArtistBubble}
-              onClick={() => {
-                if (isClickable) {
-                  onArtistSelect(artist.id as string | number, artist.name);
-                }
-              }}
-              disabled={!isClickable}
-            >
+          const bubbleContent = (
+            <>
               <div
                 className={styles.statsBubbleImage}
                 style={{
@@ -451,7 +423,25 @@ function TopArtistsVisual({
               <div className={styles.statsBubbleCount}>
                 {formatCompactNumber(artist.play_count)}
               </div>
-            </button>
+            </>
+          );
+          return isClickable ? (
+            <ArtistDetailLink
+              key={`${artist.name}-${artist.id ?? 'unknown'}`}
+              artistId={artist.id}
+              className={styles.statsArtistBubble}
+              aria-label={`Open artist detail for ${artist.name}`}
+            >
+              {bubbleContent}
+            </ArtistDetailLink>
+          ) : (
+            <div
+              key={`${artist.name}-${artist.id ?? 'unknown'}`}
+              className={`${styles.statsArtistBubble} ${styles.statsArtistBubbleDisabled}`}
+              aria-disabled="true"
+            >
+              {bubbleContent}
+            </div>
           );
         })}
       </div>
@@ -459,13 +449,30 @@ function TopArtistsVisual({
   );
 }
 
-function StatsRankedArtists({
-  artists,
-  onArtistSelect,
+function ArtistDetailLink({
+  artistId,
+  children,
+  ...linkProps
 }: {
-  artists: StatsArtistRow[];
-  onArtistSelect: (artistId: string | number, artistName: string) => void;
-}) {
+  artistId: string | number | null | undefined;
+  children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'href'>) {
+  if (artistId == null) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Link
+      to="/artist-detail/$source/$id"
+      params={{ source: ARTIST_DETAIL_SOURCE, id: String(artistId) }}
+      {...linkProps}
+    >
+      {children}
+    </Link>
+  );
+}
+
+function StatsRankedArtists({ artists }: { artists: StatsArtistRow[] }) {
   return (
     <div id="stats-top-artists" className={styles.statsRankedList}>
       {artists.length === 0 ? <EmptyListState message="No data yet" /> : null}
@@ -479,17 +486,9 @@ function StatsRankedArtists({
           )}
           <div className={styles.statsRankedInfo}>
             <div className={styles.statsRankedName}>
-              {artist.id ? (
-                <button
-                  type="button"
-                  className={styles.statsArtistLink}
-                  onClick={() => onArtistSelect(artist.id as string | number, artist.name)}
-                >
-                  {artist.name}
-                </button>
-              ) : (
-                artist.name
-              )}
+              <ArtistDetailLink artistId={artist.id} className={styles.statsArtistLink}>
+                {artist.name}
+              </ArtistDetailLink>
               {artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_') ? (
                 <img src="/static/trans2.png" className={styles.statsSoulIdBadge} alt="SoulID" />
               ) : null}
@@ -509,13 +508,7 @@ function StatsRankedArtists({
   );
 }
 
-function StatsRankedAlbums({
-  albums,
-  onArtistSelect,
-}: {
-  albums: StatsAlbumRow[];
-  onArtistSelect: (artistId: string | number, artistName: string) => void;
-}) {
+function StatsRankedAlbums({ albums }: { albums: StatsAlbumRow[] }) {
   return (
     <div id="stats-top-albums" className={styles.statsRankedList}>
       {albums.length === 0 ? <EmptyListState message="No data yet" /> : null}
@@ -530,19 +523,9 @@ function StatsRankedAlbums({
           <div className={styles.statsRankedInfo}>
             <div className={styles.statsRankedName}>{album.name}</div>
             <div className={styles.statsRankedMeta}>
-              {album.artist_id ? (
-                <button
-                  type="button"
-                  className={styles.statsArtistLink}
-                  onClick={() =>
-                    onArtistSelect(album.artist_id as string | number, album.artist || '')
-                  }
-                >
-                  {album.artist || ''}
-                </button>
-              ) : (
-                album.artist || ''
-              )}
+              <ArtistDetailLink artistId={album.artist_id} className={styles.statsArtistLink}>
+                {album.artist || ''}
+              </ArtistDetailLink>
             </div>
           </div>
           <span className={styles.statsRankedCount}>
@@ -556,11 +539,9 @@ function StatsRankedAlbums({
 
 function StatsRankedTracks({
   tracks,
-  onArtistSelect,
   onPlay,
 }: {
   tracks: StatsTrackRow[];
-  onArtistSelect: (artistId: string | number, artistName: string) => void;
   onPlay: (track: { title: string; artist: string; album: string }) => Promise<void>;
 }) {
   return (
@@ -577,19 +558,9 @@ function StatsRankedTracks({
           <div className={styles.statsRankedInfo}>
             <div className={styles.statsRankedName}>{track.name}</div>
             <div className={styles.statsRankedMeta}>
-              {track.artist_id ? (
-                <button
-                  type="button"
-                  className={styles.statsArtistLink}
-                  onClick={() =>
-                    onArtistSelect(track.artist_id as string | number, track.artist || '')
-                  }
-                >
-                  {track.artist || ''}
-                </button>
-              ) : (
-                track.artist || ''
-              )}
+              <ArtistDetailLink artistId={track.artist_id} className={styles.statsArtistLink}>
+                {track.artist || ''}
+              </ArtistDetailLink>
               {track.album ? ` · ${track.album}` : ''}
             </div>
           </div>

From c9ac9aeb1a07461e49ca48224c7f71a2e91ab8d8 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 18:16:18 +0300
Subject: [PATCH 02/42] refactor(issues): use Link to open/close issues

---
 webui/src/routes/issues/-route.test.tsx       | 21 ++++++++---
 .../issues/-ui/issue-detail-modal.module.css  | 37 +++++++++++++++++++
 .../routes/issues/-ui/issue-detail-modal.tsx  | 11 +++++-
 .../routes/issues/-ui/issues-page.module.css  |  1 +
 webui/src/routes/issues/-ui/issues-page.tsx   | 23 +++---------
 5 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/webui/src/routes/issues/-route.test.tsx b/webui/src/routes/issues/-route.test.tsx
index 7a0abdcd..55492773 100644
--- a/webui/src/routes/issues/-route.test.tsx
+++ b/webui/src/routes/issues/-route.test.tsx
@@ -136,7 +136,11 @@ describe('issues route', () => {
   it('renders stats and list items through the app router', async () => {
     renderIssuesRoute();
     await waitFor(() => expect(screen.getByTestId('issue-counts')).toHaveTextContent('2'));
-    expect(await screen.findByTestId('issue-card-7')).toHaveTextContent('Bad tags');
+    const issueCard = await screen.findByRole('link', { name: /Bad tags/i });
+    expect(issueCard).toHaveAttribute('href', expect.stringContaining('/issues?'));
+    expect(issueCard).toHaveAttribute('href', expect.stringContaining('status=open'));
+    expect(issueCard).toHaveAttribute('href', expect.stringContaining('category=all'));
+    expect(issueCard).toHaveAttribute('href', expect.stringContaining('issueId=7'));
   });
 
   it('loads the detail modal from the route search state', async () => {
@@ -157,17 +161,22 @@ describe('issues route', () => {
 
   it('opens and closes the detail modal', async () => {
     const { history } = renderIssuesRoute();
-    fireEvent.click(await screen.findByTestId('issue-card-7'));
+    fireEvent.click(await screen.findByRole('link', { name: /Bad tags/i }));
     await waitFor(() => expect(screen.getByRole('dialog')).toHaveTextContent('Issue #7'));
     await waitFor(() => expect(history.location.search).toContain('issueId=7'));
-    fireEvent.click(screen.getByRole('button', { name: /close issue detail/i }));
+    const closeLink = screen.getByRole('link', { name: /^close$/i });
+    expect(closeLink).toHaveAttribute(
+      'href',
+      expect.stringContaining('/issues?status=open&category=all'),
+    );
+    fireEvent.click(closeLink);
     await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
     await waitFor(() => expect(history.location.search).toBe('?status=open&category=all'));
   });
 
   it('closes the detail modal with Escape', async () => {
     const { history } = renderIssuesRoute();
-    fireEvent.click(await screen.findByTestId('issue-card-7'));
+    fireEvent.click(await screen.findByRole('link', { name: /Bad tags/i }));
     await waitFor(() => expect(screen.getByRole('dialog')).toHaveTextContent('Issue #7'));
     await waitFor(() => expect(history.location.search).toContain('issueId=7'));
 
@@ -179,7 +188,7 @@ describe('issues route', () => {
 
   it('focuses the detail modal close button on open', async () => {
     renderIssuesRoute();
-    fireEvent.click(await screen.findByTestId('issue-card-7'));
+    fireEvent.click(await screen.findByRole('link', { name: /Bad tags/i }));
 
     const closeButton = await screen.findByRole('button', {
       name: /close issue detail/i,
@@ -190,7 +199,7 @@ describe('issues route', () => {
 
   it('invokes the shared workflow adapter for admin downloads', async () => {
     renderIssuesRoute();
-    fireEvent.click(await screen.findByTestId('issue-card-7'));
+    fireEvent.click(await screen.findByRole('link', { name: /Bad tags/i }));
     fireEvent.click(await screen.findByRole('button', { name: /download album/i }));
     await waitFor(() => expect(workflowActions.openDownloadMissingAlbum).toHaveBeenCalled());
     expect(workflowActions.openDownloadMissingAlbum).toHaveBeenCalledWith(
diff --git a/webui/src/routes/issues/-ui/issue-detail-modal.module.css b/webui/src/routes/issues/-ui/issue-detail-modal.module.css
index 7348fa43..48a25c54 100644
--- a/webui/src/routes/issues/-ui/issue-detail-modal.module.css
+++ b/webui/src/routes/issues/-ui/issue-detail-modal.module.css
@@ -878,6 +878,43 @@
   font-size: 13px;
 }
 
+.modalLinkButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+  min-height: 36px;
+  padding: 8px 12px;
+  text-decoration: none;
+  transition:
+    transform 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background 0.18s ease,
+    color 0.18s ease;
+}
+
+.modalLinkButton:hover {
+  transform: translateY(-1px);
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.modalLinkButton:focus-visible {
+  outline: none;
+  border-color: rgba(var(--accent-light-rgb), 0.55);
+  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
+}
+
 .modalButtonSecondary {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.8);
diff --git a/webui/src/routes/issues/-ui/issue-detail-modal.tsx b/webui/src/routes/issues/-ui/issue-detail-modal.tsx
index 1cbb21d7..c773e8e4 100644
--- a/webui/src/routes/issues/-ui/issue-detail-modal.tsx
+++ b/webui/src/routes/issues/-ui/issue-detail-modal.tsx
@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
 import { useEffect, useMemo, useState, type ReactNode } from 'react';
 
 import { DialogBody, DialogFooter, DialogFrame, DialogHeader } from '@/components/dialog';
@@ -22,6 +23,7 @@ import {
   ISSUE_CATEGORY_META,
   parseSnapshot,
 } from '../-issues.helpers';
+import { Route } from '../route';
 import styles from './issue-detail-modal.module.css';
 
 export function IssueDetailModal({
@@ -213,9 +215,14 @@ export function IssueDetailModal({
       />
       <DialogBody>{renderIssueDetailContent()}</DialogBody>
       <DialogFooter>
-        <Button className={styles.modalButtonSecondary} type="button" onClick={onClose}>
+        <Link
+          className={`${styles.modalLinkButton} ${styles.modalButtonSecondary}`}
+          replace
+          search={(prev) => ({ ...prev, issueId: undefined })}
+          to={Route.fullPath}
+        >
           Close
-        </Button>
+        </Link>
         {issue && (
           <>
             {statusButtons}
diff --git a/webui/src/routes/issues/-ui/issues-page.module.css b/webui/src/routes/issues/-ui/issues-page.module.css
index 9fc1d269..95ab7faa 100644
--- a/webui/src/routes/issues/-ui/issues-page.module.css
+++ b/webui/src/routes/issues/-ui/issues-page.module.css
@@ -159,6 +159,7 @@
   width: 100%;
   padding: 14px 16px;
   text-align: left;
+  text-decoration: none;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(255, 255, 255, 0.03);
diff --git a/webui/src/routes/issues/-ui/issues-page.tsx b/webui/src/routes/issues/-ui/issues-page.tsx
index 52e86f83..2354cde6 100644
--- a/webui/src/routes/issues/-ui/issues-page.tsx
+++ b/webui/src/routes/issues/-ui/issues-page.tsx
@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
 
 import { Select } from '@/components/form';
 import { Show } from '@/components/primitives';
@@ -73,13 +73,6 @@ function IssueBoard() {
     ...issueListQueryOptions(profileId, params),
   });
 
-  const openIssue = (issueId: number) => {
-    void navigate({
-      to: Route.fullPath,
-      search: (prev) => ({ ...prev, issueId }),
-    });
-  };
-
   const onCategoryChange = (category: IssuesSearch['category']) => {
     void navigate({
       to: Route.fullPath,
@@ -112,7 +105,6 @@ function IssueBoard() {
         issuesError={issuesQuery.error}
         issuesLoading={issuesQuery.isLoading}
         showReporterName={isAdmin}
-        onIssueSelect={openIssue}
         statusFilter={params.status}
       />
     </div>
@@ -225,7 +217,6 @@ function IssueBoardList({
   issues,
   issuesError,
   issuesLoading,
-  onIssueSelect,
   showReporterName,
   statusFilter,
 }: {
@@ -233,7 +224,6 @@ function IssueBoardList({
   issues: IssueRecord[];
   issuesError: unknown;
   issuesLoading: boolean;
-  onIssueSelect: (issueId: number) => void;
   showReporterName: boolean;
   statusFilter: IssuesSearch['status'];
 }) {
@@ -285,7 +275,6 @@ function IssueBoardList({
         key={issue.id}
         issue={issue}
         showReporterName={showReporterName}
-        onIssueSelect={onIssueSelect}
       />
     ));
   }
@@ -294,11 +283,9 @@ function IssueBoardList({
 function IssueBoardCard({
   issue,
   showReporterName,
-  onIssueSelect,
 }: {
   issue: IssueRecord;
   showReporterName: boolean;
-  onIssueSelect: (issueId: number) => void;
 }) {
   const snapshot = parseSnapshot(issue.snapshot_data);
   const artwork = getIssueArtwork(snapshot);
@@ -311,11 +298,11 @@ function IssueBoardCard({
   const createdDate = formatIssueDate(issue.created_at);
 
   return (
-    <button
+    <Link
       className={styles.issueCard}
-      type="button"
       data-testid={`issue-card-${issue.id}`}
-      onClick={() => onIssueSelect(issue.id)}
+      to={Route.fullPath}
+      search={(prev) => ({ ...prev, issueId: issue.id })}
     >
       <div className={styles.issueCardLeft}>
         {artwork ? (
@@ -360,7 +347,7 @@ function IssueBoardCard({
           title={`${issue.priority} priority`}
         />
       </div>
-    </button>
+    </Link>
   );
 }
 

From 7bee42468686b50e1d7fd3ec31db20ac1fd070bf Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 24 May 2026 08:54:47 -0700
Subject: [PATCH 03/42] Escape dash-leading YouTube search queries

Fix manual YouTube searches for video IDs that begin with a dash by escaping leading '-' before building yt-dlp ytsearch expressions. This preserves normal search terms and already escaped user input while preventing yt-dlp from treating the ID as search syntax.

Add regression coverage for both YouTube download search and video search paths. Fixes #684.
---
 core/youtube_client.py                  | 24 ++++++-
 tests/test_youtube_search_dash_query.py | 87 +++++++++++++++++++++++++
 2 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 tests/test_youtube_search_dash_query.py

diff --git a/core/youtube_client.py b/core/youtube_client.py
index df910e59..bd72e674 100644
--- a/core/youtube_client.py
+++ b/core/youtube_client.py
@@ -154,6 +154,7 @@ class YouTubeClient(DownloadSourcePlugin):
 
         # Initialize production matching engine for parity with Soulseek
         self.matching_engine = MusicMatchingEngine()
+
         logger.info("Initialized production MusicMatchingEngine")
 
         # NOTE: deliberately don't call `_check_ffmpeg()` here. That call
@@ -216,6 +217,23 @@ class YouTubeClient(DownloadSourcePlugin):
         # Optional progress callback for UI updates
         self.progress_callback = None
 
+    @staticmethod
+    def _escape_ytsearch_query(query: str) -> str:
+        """Escape yt-dlp search terms that begin with a dash.
+
+        YouTube video IDs may start with ``-``. When passed through
+        ``ytsearchN:<query>``, yt-dlp treats that leading dash as search
+        syntax unless it is escaped. Preserve already-escaped input so
+        users who worked around the issue manually keep the same result.
+        """
+        if not isinstance(query, str):
+            return query
+        stripped = query.lstrip()
+        leading_ws_len = len(query) - len(stripped)
+        if stripped.startswith('-'):
+            return f"{query[:leading_ws_len]}\\{stripped}"
+        return query
+
     def is_available(self) -> bool:
         """
         Check if YouTube client is available (yt-dlp installed and ffmpeg available).
@@ -698,8 +716,9 @@ class YouTubeClient(DownloadSourcePlugin):
                 if cookies_browser:
                     ydl_opts['cookiesfrombrowser'] = (cookies_browser,)
 
+                search_query = self._escape_ytsearch_query(query)
                 with yt_dlp.YoutubeDL(ydl_opts) as ydl:
-                    data = ydl.extract_info(f"ytsearch{max_results}:{query}", download=False)
+                    data = ydl.extract_info(f"ytsearch{max_results}:{search_query}", download=False)
                     if not data or 'entries' not in data:
                         return []
 
@@ -777,9 +796,10 @@ class YouTubeClient(DownloadSourcePlugin):
                 if cookies_browser:
                     ydl_opts['cookiesfrombrowser'] = (cookies_browser,)
 
+                search_query = self._escape_ytsearch_query(query)
                 with yt_dlp.YoutubeDL(ydl_opts) as ydl:
                     # Search YouTube (max 50 results)
-                    search_results = ydl.extract_info(f"ytsearch50:{query}", download=False)
+                    search_results = ydl.extract_info(f"ytsearch50:{search_query}", download=False)
 
                     if not search_results or 'entries' not in search_results:
                         return []
diff --git a/tests/test_youtube_search_dash_query.py b/tests/test_youtube_search_dash_query.py
new file mode 100644
index 00000000..a2e0318d
--- /dev/null
+++ b/tests/test_youtube_search_dash_query.py
@@ -0,0 +1,87 @@
+"""Regression tests for YouTube searches whose query starts with ``-``.
+
+YouTube video IDs can start with a dash. yt-dlp's ``ytsearchN:`` parser
+interprets a leading dash as search syntax unless escaped, so manual
+searches for those IDs used to fan out into unrelated results.
+"""
+
+from __future__ import annotations
+
+import asyncio
+from types import SimpleNamespace
+
+from core import youtube_client
+from core.youtube_client import YouTubeClient
+
+
+def test_escape_ytsearch_query_handles_leading_dash():
+    assert YouTubeClient._escape_ytsearch_query("-4WUHJRhvrM") == r"\-4WUHJRhvrM"
+    assert YouTubeClient._escape_ytsearch_query(r"\-4WUHJRhvrM") == r"\-4WUHJRhvrM"
+    assert YouTubeClient._escape_ytsearch_query("Yo-Yo Ma") == "Yo-Yo Ma"
+
+
+def test_search_escapes_leading_dash_before_yt_dlp(monkeypatch):
+    captured = []
+
+    class _FakeYoutubeDL:
+        def __init__(self, opts):
+            self.opts = opts
+
+        def __enter__(self):
+            return self
+
+        def __exit__(self, exc_type, exc, tb):
+            return False
+
+        def extract_info(self, search_query, download=False):
+            captured.append(search_query)
+            return {"entries": [{"id": "-4WUHJRhvrM", "title": "Unaccompanied Cello"}]}
+
+    monkeypatch.setattr(youtube_client.yt_dlp, "YoutubeDL", _FakeYoutubeDL)
+
+    client = YouTubeClient.__new__(YouTubeClient)
+    monkeypatch.setattr(client, "_get_best_audio_format", lambda formats: None)
+    monkeypatch.setattr(
+        client,
+        "_youtube_to_track_result",
+        lambda entry, best_audio: SimpleNamespace(filename=entry["title"]),
+    )
+
+    tracks, albums = asyncio.run(client.search("-4WUHJRhvrM"))
+
+    assert captured == [r"ytsearch50:\-4WUHJRhvrM"]
+    assert len(tracks) == 1
+    assert albums == []
+
+
+def test_search_videos_escapes_leading_dash_before_yt_dlp(monkeypatch):
+    captured = []
+
+    class _FakeYoutubeDL:
+        def __init__(self, opts):
+            self.opts = opts
+
+        def __enter__(self):
+            return self
+
+        def __exit__(self, exc_type, exc, tb):
+            return False
+
+        def extract_info(self, search_query, download=False):
+            captured.append(search_query)
+            return {
+                "entries": [{
+                    "id": "-4WUHJRhvrM",
+                    "title": "Unaccompanied Cello",
+                    "duration": 152,
+                    "uploader": "Yo-Yo Ma",
+                }]
+            }
+
+    monkeypatch.setattr(youtube_client.yt_dlp, "YoutubeDL", _FakeYoutubeDL)
+    client = YouTubeClient.__new__(YouTubeClient)
+
+    results = asyncio.run(client.search_videos("-4WUHJRhvrM", max_results=8))
+
+    assert captured == [r"ytsearch8:\-4WUHJRhvrM"]
+    assert [r.video_id for r in results] == ["-4WUHJRhvrM"]

From 4ca3f70bf39341f89fbb13d5c6b3e77a9af51a1f Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 24 May 2026 09:33:19 -0700
Subject: [PATCH 04/42] Show MusicBrainz release variants in import

Expand matched MusicBrainz release groups into concrete releases for specific album searches so import users can choose the correct edition by track count, format, country, and disambiguation. Preserve distinct MusicBrainz release IDs instead of deduping same-title variants, carry release metadata through import matching, and surface those details on album result cards. Add coverage for variant preservation and release-group expansion.
---
 core/imports/album.py                     |   4 +
 core/imports/staging.py                   |  26 ++-
 core/metadata/album_tracks.py             |  12 +-
 core/musicbrainz_client.py                |  35 ++++
 core/musicbrainz_search.py                | 184 +++++++++++++++-------
 tests/imports/test_import_staging.py      |  49 ++++++
 tests/metadata/test_musicbrainz_search.py |  52 ++++++
 webui/static/stats-automations.js         |  23 ++-
 webui/static/style.css                    |  12 ++
 9 files changed, 337 insertions(+), 60 deletions(-)

diff --git a/core/imports/album.py b/core/imports/album.py
index db6c7d01..3da27119 100644
--- a/core/imports/album.py
+++ b/core/imports/album.py
@@ -354,6 +354,10 @@ def build_album_import_context(
         "images": album.get("images") or ([] if not track_album_image else [{"url": track_album_image}]),
         "source": source,
     }
+    for key in ("format", "country", "status", "label", "disambiguation", "release_group_id"):
+        value = str(album.get(key) or "").strip()
+        if value:
+            normalized_album[key] = value
 
     original_search = {
         "title": normalized_track["name"],
diff --git a/core/imports/staging.py b/core/imports/staging.py
index 5843d144..748cbb11 100644
--- a/core/imports/staging.py
+++ b/core/imports/staging.py
@@ -198,6 +198,12 @@ def _normalize_album_result(album: Any, source: str) -> Dict[str, Any]:
     ).strip()
     release_date = str(_extract_value(album, "release_date", "releaseDate", default="") or "").strip()
     album_type = str(_extract_value(album, "album_type", "type", default="album") or "album").strip() or "album"
+    release_format = str(_extract_value(album, "format", "release_format", default="") or "").strip()
+    country = str(_extract_value(album, "country", default="") or "").strip()
+    status = str(_extract_value(album, "status", default="") or "").strip()
+    label = str(_extract_value(album, "label", default="") or "").strip()
+    disambiguation = str(_extract_value(album, "disambiguation", default="") or "").strip()
+    release_group_id = str(_extract_value(album, "release_group_id", "releaseGroupId", default="") or "").strip()
 
     total_tracks = _extract_value(album, "total_tracks", "track_count", default=0)
     if isinstance(total_tracks, (list, tuple, set)):
@@ -225,7 +231,7 @@ def _normalize_album_result(album: Any, source: str) -> Dict[str, Any]:
             else:
                 image_url = _extract_value(first_image, "url", "image_url", "src", default="")
 
-    return {
+    suggestion = {
         "id": album_id or album_name or "unknown-album",
         "name": album_name or album_id or "Unknown Album",
         "artist": artist_name or "Unknown Artist",
@@ -235,14 +241,30 @@ def _normalize_album_result(album: Any, source: str) -> Dict[str, Any]:
         "album_type": album_type,
         "source": source,
     }
+    if release_format:
+        suggestion["format"] = release_format
+    if country:
+        suggestion["country"] = country
+    if status:
+        suggestion["status"] = status
+    if label:
+        suggestion["label"] = label
+    if disambiguation:
+        suggestion["disambiguation"] = disambiguation
+    if release_group_id:
+        suggestion["release_group_id"] = release_group_id
+    return suggestion
 
 
-def _album_fingerprint(album: Dict[str, Any]) -> Tuple[str, str, str, str]:
+def _album_fingerprint(album: Dict[str, Any]) -> Tuple[str, ...]:
+    if album.get("source") == "musicbrainz" and album.get("id"):
+        return ("musicbrainz", str(album.get("id", "") or "").strip().casefold())
     return (
         str(album.get("name", "") or "").strip().casefold(),
         str(album.get("artist", "") or "").strip().casefold(),
         str(album.get("release_date", "") or "").strip()[:10].casefold(),
         str(album.get("album_type", "") or "").strip().casefold(),
+        str(album.get("total_tracks", "") or "").strip(),
     )
 
 
diff --git a/core/metadata/album_tracks.py b/core/metadata/album_tracks.py
index 266134a8..e66be412 100644
--- a/core/metadata/album_tracks.py
+++ b/core/metadata/album_tracks.py
@@ -264,6 +264,11 @@ def _build_album_info_typed(album_data: Dict[str, Any], album_id: str,
             if isinstance(first, dict):
                 ctx['image_url'] = first.get('url') or ctx.get('image_url')
 
+    for key in ('format', 'country', 'status', 'label', 'disambiguation', 'release_group_id'):
+        value = album_data.get(key)
+        if value:
+            ctx[key] = value
+
     return ctx
 
 
@@ -327,7 +332,7 @@ def _build_album_info_legacy(album_data: Any, album_id: str,
     if not image_url:
         image_url = _extract_lookup_value(album_data, 'image_url', 'thumb_url')
 
-    return {
+    album_info = {
         'id': _extract_lookup_value(album_data, 'id', 'album_id', 'collectionId', 'release_id', default=album_id) or album_id,
         'name': _extract_lookup_value(album_data, 'name', 'title', default=album_name or album_id) or album_name or album_id,
         'artist': resolved_artist_name or '',
@@ -345,6 +350,11 @@ def _build_album_info_legacy(album_data: Any, album_id: str,
         ),
         'total_tracks': _extract_lookup_value(album_data, 'total_tracks', 'track_count', default=0) or 0,
     }
+    for key in ('format', 'country', 'status', 'label', 'disambiguation', 'release_group_id'):
+        value = _extract_lookup_value(album_data, key, default='')
+        if value:
+            album_info[key] = value
+    return album_info
 
 
 def _build_album_track_entry(track_item: Any, album_info: Dict[str, Any], source: str) -> Dict[str, Any]:
diff --git a/core/musicbrainz_client.py b/core/musicbrainz_client.py
index f1d59491..a802373d 100644
--- a/core/musicbrainz_client.py
+++ b/core/musicbrainz_client.py
@@ -298,6 +298,41 @@ class MusicBrainzClient:
             logger.error(f"Error browsing release-groups for artist {artist_mbid}: {e}")
             return []
 
+    @rate_limited
+    def browse_release_group_releases(self, release_group_mbid: str,
+                                      limit: int = 100,
+                                      offset: int = 0) -> List[Dict[str, Any]]:
+        """Browse concrete releases that belong to a release-group.
+
+        Release-groups identify the logical album; releases identify the
+        actual edition the user may own (country, format, explicit/clean
+        disambiguation, bonus tracks, track count). Manual import needs the
+        latter so users can choose the matching tracklist.
+        """
+        try:
+            params = {
+                'release-group': release_group_mbid,
+                'fmt': 'json',
+                'limit': min(limit, 100),
+                'offset': offset,
+                'inc': 'artist-credits+media+labels+release-groups',
+            }
+
+            response = self.session.get(
+                f"{self.BASE_URL}/release",
+                params=params,
+                timeout=10
+            )
+            response.raise_for_status()
+
+            data = response.json()
+            releases = data.get('releases', [])
+            logger.debug(f"Browsed {len(releases)} releases for release-group {release_group_mbid}")
+            return releases
+        except Exception as e:
+            logger.error(f"Error browsing releases for release-group {release_group_mbid}: {e}")
+            return []
+
     @rate_limited
     def search_recordings_by_artist_mbid(self, artist_mbid: str,
                                          limit: int = 100) -> List[Dict[str, Any]]:
diff --git a/core/musicbrainz_search.py b/core/musicbrainz_search.py
index f01292d4..47e95a84 100644
--- a/core/musicbrainz_search.py
+++ b/core/musicbrainz_search.py
@@ -57,6 +57,12 @@ class Album:
     album_type: str
     image_url: Optional[str] = None
     external_urls: Optional[Dict[str, str]] = None
+    format: Optional[str] = None
+    country: Optional[str] = None
+    status: Optional[str] = None
+    label: Optional[str] = None
+    disambiguation: Optional[str] = None
+    release_group_id: Optional[str] = None
 
 
 def _cover_art_url(mbid: str, scope: str = 'release') -> Optional[str]:
@@ -316,8 +322,102 @@ class MusicBrainzSearchClient:
             album_type=album_type,
             image_url=image_url,
             external_urls={'musicbrainz': f'https://musicbrainz.org/release-group/{rg_mbid}'} if rg_mbid else {},
+            disambiguation=rg.get('disambiguation') or None,
+            release_group_id=rg_mbid or None,
         )
 
+    def _release_total_tracks(self, release: Dict[str, Any]) -> int:
+        total_tracks = 0
+        for medium in release.get('media', []) or []:
+            try:
+                total_tracks += int(medium.get('track-count') or 0)
+            except (TypeError, ValueError):
+                pass
+        return total_tracks
+
+    def _release_formats(self, release: Dict[str, Any]) -> str:
+        formats = []
+        for medium in release.get('media', []) or []:
+            fmt = (medium.get('format') or '').strip()
+            if fmt and fmt not in formats:
+                formats.append(fmt)
+        return ', '.join(formats)
+
+    def _release_label(self, release: Dict[str, Any]) -> str:
+        for info in release.get('label-info', []) or []:
+            label = (info.get('label') or {}) if isinstance(info, dict) else {}
+            name = (label.get('name') or '').strip()
+            if name:
+                return name
+        return ''
+
+    def _release_to_album(self, release: Dict[str, Any],
+                          fallback_artist_name: Optional[str] = None) -> Optional[Album]:
+        """Project a concrete MusicBrainz release into our Album dataclass."""
+        mbid = release.get('id', '')
+        title = release.get('title', '') or ''
+        if not title:
+            return None
+
+        artists = _extract_artist_credit(release.get('artist-credit', []))
+        if not artists and fallback_artist_name:
+            artists = [fallback_artist_name]
+
+        rg = release.get('release-group', {}) or {}
+        primary_type = rg.get('primary-type', '') or ''
+        secondary_types = rg.get('secondary-types', []) or []
+        album_type = _map_release_type(primary_type, secondary_types)
+        rg_mbid = rg.get('id', '') or release.get('release-group-id', '')
+        image_url = self._cached_art(mbid, rg_mbid)
+
+        return Album(
+            id=mbid,
+            name=title,
+            artists=artists if artists else ['Unknown Artist'],
+            release_date=release.get('date', '') or '',
+            total_tracks=self._release_total_tracks(release),
+            album_type=album_type,
+            image_url=image_url,
+            external_urls={'musicbrainz': f'https://musicbrainz.org/release/{mbid}'} if mbid else {},
+            format=self._release_formats(release) or None,
+            country=(release.get('country') or '').strip() or None,
+            status=(release.get('status') or '').strip() or None,
+            label=self._release_label(release) or None,
+            disambiguation=(release.get('disambiguation') or '').strip() or None,
+            release_group_id=rg_mbid or None,
+        )
+
+    def _release_variant_key(self, album: Album):
+        status_rank = 0 if (album.status or '').lower() == 'official' else 1
+        date = (album.release_date or '9999-99-99')[:10] or '9999-99-99'
+        track_rank = album.total_tracks or 9999
+        country_rank = 0 if (album.country or '') in ('XW', 'US', 'GB') else 1
+        return (
+            status_rank,
+            date,
+            country_rank,
+            track_rank,
+            album.format or '',
+            album.disambiguation or '',
+            album.id,
+        )
+
+    def _release_group_releases_to_albums(self, rg: Dict[str, Any], artist_name: str,
+                                          limit: int) -> List[Album]:
+        rg_mbid = rg.get('id', '')
+        if not rg_mbid:
+            return []
+
+        releases = self._client.browse_release_group_releases(rg_mbid, limit=max(limit, 25))
+        albums = []
+        for release in releases:
+            release.setdefault('release-group', rg)
+            album = self._release_to_album(release, fallback_artist_name=artist_name)
+            if album:
+                albums.append(album)
+        albums.sort(key=self._release_variant_key)
+        return albums[:limit]
+
     def search_albums(self, query: str, limit: int = 10) -> List[Album]:
         """Search MusicBrainz for releases (albums).
 
@@ -400,6 +500,13 @@ class MusicBrainzSearchClient:
                     matched = [rg for rg in rgs if hint_lower in (rg.get('title') or '').lower()]
                     if matched:
                         rgs = matched
+                        expanded = []
+                        for rg in rgs:
+                            expanded.extend(self._release_group_releases_to_albums(rg, tname, limit))
+                            if len(expanded) >= limit:
+                                break
+                        if expanded:
+                            return expanded[:limit]
                     else:
                         fallback = self._search_albums_text(title_hint, tname, limit)
                         if fallback:
@@ -436,63 +543,24 @@ class MusicBrainzSearchClient:
 
             albums = []
             for r in results:
-                mbid = r.get('id', '')
-                title = r.get('title', '')
-                if not title:
-                    continue
+                album = self._release_to_album(r)
+                if album:
+                    albums.append(album)
 
-                artists = _extract_artist_credit(r.get('artist-credit', []))
-                release_date = r.get('date', '') or ''
-
-                # Track count from media
-                total_tracks = 0
-                media = r.get('media', [])
-                for m in media:
-                    total_tracks += m.get('track-count', 0)
-
-                # Release type
-                rg = r.get('release-group', {})
-                primary_type = rg.get('primary-type', '') or ''
-                secondary_types = rg.get('secondary-types', []) or []
-                album_type = _map_release_type(primary_type, secondary_types)
-
-                # Cover art (non-blocking — skip if slow)
-                rg_mbid = rg.get('id', '')
-                image_url = self._cached_art(mbid, rg_mbid)
-
-                external_urls = {'musicbrainz': f'https://musicbrainz.org/release/{mbid}'} if mbid else {}
-
-                albums.append(Album(
-                    id=mbid,
-                    name=title,
-                    artists=artists if artists else ['Unknown Artist'],
-                    release_date=release_date,
-                    total_tracks=total_tracks,
-                    album_type=album_type,
-                    image_url=image_url,
-                    external_urls=external_urls,
-                ))
-            # Deduplicate: keep best version of each title+artist combo
-            # (prefer ones with release dates and cover art)
-            seen = {}
-            deduped = []
+            # Keep distinct MusicBrainz releases. The same title/artist/date
+            # can represent explicit, clean, regional, format, or bonus-track
+            # variants with different tracklists, which manual import must let
+            # the user choose.
+            seen_ids = set()
+            unique = []
             for album in albums:
-                key = (album.name.lower().strip(), ', '.join(album.artists).lower().strip())
-                if key not in seen:
-                    seen[key] = album
-                    deduped.append(album)
-                else:
-                    existing = seen[key]
-                    # Prefer: has date > no date, has art > no art
-                    better = False
-                    if not existing.release_date and album.release_date:
-                        better = True
-                    elif not existing.image_url and album.image_url:
-                        better = True
-                    if better:
-                        deduped[deduped.index(existing)] = album
-                        seen[key] = album
-            return deduped
+                if album.id and album.id in seen_ids:
+                    continue
+                if album.id:
+                    seen_ids.add(album.id)
+                unique.append(album)
+            unique.sort(key=self._release_variant_key)
+            return unique[:limit]
         except Exception as e:
             logger.warning(f"MusicBrainz album search failed: {e}")
             return []
@@ -1030,6 +1098,12 @@ class MusicBrainzSearchClient:
             'images': images,
             'tracks': tracks,
             'external_urls': {'musicbrainz': f'https://musicbrainz.org/release/{release_mbid}'},
+            'format': self._release_formats(release),
+            'country': release.get('country') or '',
+            'status': release.get('status') or '',
+            'label': self._release_label(release),
+            'disambiguation': release.get('disambiguation') or '',
+            'release_group_id': rg_mbid,
         }
 
     def get_artist_albums(self, artist_mbid: str, album_type: str = 'album,single', limit: int = 200) -> List:
diff --git a/tests/imports/test_import_staging.py b/tests/imports/test_import_staging.py
index 56571ede..2405a1f3 100644
--- a/tests/imports/test_import_staging.py
+++ b/tests/imports/test_import_staging.py
@@ -105,6 +105,55 @@ def test_search_import_albums_falls_back_when_primary_has_no_results(monkeypatch
     assert spotify_client.calls == [("Album Two", {"limit": 2, "allow_fallback": False})]
 
 
+def test_search_import_albums_preserves_musicbrainz_release_variants(monkeypatch):
+    musicbrainz_client = FakeClient([
+        SimpleNamespace(
+            id="rel-clean",
+            name="Shock Value",
+            artists=["Timbaland"],
+            release_date="2007-04-03",
+            total_tracks=17,
+            image_url="",
+            album_type="album",
+            format="CD",
+            country="US",
+            status="Official",
+            disambiguation="clean",
+            release_group_id="rg-shock",
+        ),
+        SimpleNamespace(
+            id="rel-explicit",
+            name="Shock Value",
+            artists=["Timbaland"],
+            release_date="2007-04-03",
+            total_tracks=18,
+            image_url="",
+            album_type="album",
+            format="CD",
+            country="US",
+            status="Official",
+            disambiguation="explicit",
+            release_group_id="rg-shock",
+        ),
+    ])
+
+    monkeypatch.setattr(import_staging, "get_primary_source", lambda: "musicbrainz")
+    monkeypatch.setattr(import_staging, "get_source_priority", lambda primary: [primary])
+    monkeypatch.setattr(import_staging, "get_client_for_source", lambda source: musicbrainz_client)
+    monkeypatch.setattr(
+        import_staging,
+        "_search_albums_for_source",
+        lambda source, client, query, limit=5: client.search_albums(query, limit=limit),
+    )
+
+    results = import_staging.search_import_albums("Timbaland Shock Value", limit=12)
+
+    assert [result["id"] for result in results] == ["rel-clean", "rel-explicit"]
+    assert [result["total_tracks"] for result in results] == [17, 18]
+    assert results[1]["disambiguation"] == "explicit"
+    assert results[1]["release_group_id"] == "rg-shock"
+
+
 def test_search_import_tracks_prefers_primary_source(monkeypatch):
     deezer_client = FakeClient([
         SimpleNamespace(
diff --git a/tests/metadata/test_musicbrainz_search.py b/tests/metadata/test_musicbrainz_search.py
index cec77648..e5859707 100644
--- a/tests/metadata/test_musicbrainz_search.py
+++ b/tests/metadata/test_musicbrainz_search.py
@@ -429,6 +429,58 @@ def test_search_albums_text_path_filters_by_score():
     assert 'Bad' not in titles
 
 
+def test_search_albums_text_path_keeps_release_variants():
+    client = MusicBrainzSearchClient()
+    client._client = MagicMock()
+    client._client.search_release.return_value = [
+        {'id': 'rel-clean', 'title': 'Shock Value', 'score': 100,
+         'date': '2007-04-03', 'country': 'US', 'status': 'Official',
+         'disambiguation': 'clean',
+         'media': [{'format': 'CD', 'track-count': 17}],
+         'release-group': {'id': 'rg-shock', 'primary-type': 'Album'},
+         'artist-credit': [{'name': 'Timbaland'}]},
+        {'id': 'rel-explicit', 'title': 'Shock Value', 'score': 100,
+         'date': '2007-04-03', 'country': 'US', 'status': 'Official',
+         'disambiguation': 'explicit',
+         'media': [{'format': 'CD', 'track-count': 18}],
+         'release-group': {'id': 'rg-shock', 'primary-type': 'Album'},
+         'artist-credit': [{'name': 'Timbaland'}]},
+    ]
+
+    albums = client.search_albums('Timbaland - Shock Value', limit=10)
+
+    assert [a.id for a in albums] == ['rel-clean', 'rel-explicit']
+    assert [a.total_tracks for a in albums] == [17, 18]
+    assert albums[1].disambiguation == 'explicit'
+
+
+def test_search_albums_title_hint_expands_release_group_to_releases():
+    client = MusicBrainzSearchClient()
+    client._client = MagicMock()
+    client._client.search_artist.return_value = [_mk_artist('Spiderbait', 'artist-spiderbait', score=100)]
+    client._client.browse_artist_release_groups.return_value = [
+        {'id': 'rg-tonight', 'title': 'Tonight Alright', 'primary-type': 'Album',
+         'first-release-date': '2004-03-29', 'secondary-types': []},
+    ]
+    client._client.browse_release_group_releases.return_value = [
+        {'id': 'rel-cd', 'title': 'Tonight Alright', 'date': '2004-03-29',
+         'country': 'AU', 'status': 'Official',
+         'media': [{'format': 'CD', 'track-count': 12}],
+         'artist-credit': [{'name': 'Spiderbait'}]},
+        {'id': 'rel-vinyl', 'title': 'Tonight Alright', 'date': '2024-07-26',
+         'country': 'AU', 'status': 'Official',
+         'media': [{'format': '12\" Vinyl', 'track-count': 13}],
+         'artist-credit': [{'name': 'Spiderbait'}]},
+    ]
+
+    albums = client.search_albums('Spiderbait Tonight Alright', limit=10)
+
+    client._client.browse_release_group_releases.assert_called_once_with('rg-tonight', limit=25)
+    assert [a.id for a in albums] == ['rel-cd', 'rel-vinyl']
+    assert [a.total_tracks for a in albums] == [12, 13]
+    assert albums[0].format == 'CD'
+
+
 # ---------------------------------------------------------------------------
 # Track search — routing
 # ---------------------------------------------------------------------------
diff --git a/webui/static/stats-automations.js b/webui/static/stats-automations.js
index 74872897..89b8d028 100644
--- a/webui/static/stats-automations.js
+++ b/webui/static/stats-automations.js
@@ -650,11 +650,23 @@ function _renderSuggestionCard(a, primarySource) {
     const sourceBadge = (a.source && primarySource && a.source !== primarySource)
         ? `<div class="import-page-album-card-source">via ${_esc((SOURCE_LABELS[a.source] || {}).text || a.source)}</div>`
         : '';
+    const metaParts = [
+        `${a.total_tracks || 0} tracks`,
+        a.release_date ? a.release_date.substring(0, 4) : '',
+        a.format || '',
+        a.country || '',
+        a.disambiguation || '',
+    ].filter(Boolean);
+    const details = [a.status || '', a.label || ''].filter(Boolean);
+    const detailsLine = details.length
+        ? `<div class="import-page-album-card-detail">${_esc(details.join(' · '))}</div>`
+        : '';
     return `<div class="import-page-album-card" onclick="importPageSelectAlbum('${_escAttr(a.id)}')">
         <img src="${a.image_url || '/static/placeholder-album.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
         <div class="import-page-album-card-title" title="${_escAttr(a.name)}">${_esc(a.name)}</div>
         <div class="import-page-album-card-artist" title="${_escAttr(a.artist)}">${_esc(a.artist)}</div>
-        <div class="import-page-album-card-meta">${a.total_tracks} tracks · ${a.release_date ? a.release_date.substring(0, 4) : ''}</div>
+        <div class="import-page-album-card-meta">${_esc(metaParts.join(' · '))}</div>
+        ${detailsLine}
         ${sourceBadge}
     </div>`;
 }
@@ -744,12 +756,19 @@ async function importPageSelectAlbum(albumId) {
 
         // Render hero
         const album = data.album;
+        const heroMetaParts = [
+            `${album.total_tracks || 0} tracks`,
+            album.release_date ? album.release_date.substring(0, 4) : '',
+            album.format || '',
+            album.country || '',
+            album.disambiguation || '',
+        ].filter(Boolean);
         document.getElementById('import-page-album-hero').innerHTML = `
             <img src="${album.image_url || '/static/placeholder-album.png'}" alt="${_escAttr(album.name)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
             <div class="import-page-album-hero-info">
                 <div class="import-page-album-hero-title">${_esc(album.name)}</div>
                 <div class="import-page-album-hero-artist">${_esc(album.artist)}</div>
-                <div class="import-page-album-hero-meta">${album.total_tracks} tracks · ${album.release_date ? album.release_date.substring(0, 4) : ''}</div>
+                <div class="import-page-album-hero-meta">${_esc(heroMetaParts.join(' · '))}</div>
             </div>
         `;
 
diff --git a/webui/static/style.css b/webui/static/style.css
index 728d3e95..061fbbae 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -40322,6 +40322,18 @@ div.artist-hero-badge {
     font-size: 10px;
     color: rgba(255, 255, 255, 0.3);
     margin-top: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.import-page-album-card-detail {
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.36);
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .import-page-album-card-source {

From 9a0e3b4011cbc1ad88208976a2c37b50baaa9638 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 24 May 2026 10:02:00 -0700
Subject: [PATCH 05/42] Persist completed downloads in downloads view

Include a capped recent tail of database-backed download history in the unified Downloads page so completed Deezer and other streaming downloads remain visible after runtime tasks are cleaned up or the container restarts. Use persistent download history for the dashboard finished count, keep live tasks authoritative for active rows, avoid showing the local clear-completed action for persisted history rows, and cover history hydration/deduping/capping in status tests.
---
 core/downloads/status.py                 | 84 +++++++++++++++++++++++
 tests/downloads/test_downloads_status.py | 87 ++++++++++++++++++++++++
 web_server.py                            | 18 ++++-
 webui/static/api-monitor.js              |  2 +-
 webui/static/core.js                     |  2 +-
 webui/static/pages-extra.js              |  4 +-
 6 files changed, 191 insertions(+), 6 deletions(-)

diff --git a/core/downloads/status.py b/core/downloads/status.py
index 6e11a763..37ae441d 100644
--- a/core/downloads/status.py
+++ b/core/downloads/status.py
@@ -24,6 +24,7 @@ import logging
 import threading
 import time
 from dataclasses import dataclass
+from datetime import datetime
 from typing import Any, Callable, Optional
 
 from core.runtime_state import (
@@ -82,6 +83,7 @@ class StatusDeps:
     download_orchestrator: Any = None
     run_async: Optional[Callable] = None
     on_download_completed: Optional[Callable[[str, str, bool], None]] = None
+    get_persistent_download_history: Optional[Callable[[int], list[dict]]] = None
 
 
 # Streaming sources the engine fallback applies to. Soulseek goes through
@@ -536,6 +538,69 @@ _STATUS_PRIORITY = {
     'not_found': 6, 'failed': 7, 'cancelled': 8,
 }
 
+_PERSISTENT_HISTORY_TAIL_LIMIT = 50
+
+
+def _normalize_identity_part(value: Any) -> str:
+    return str(value or '').strip().casefold()
+
+
+def _download_identity(title: Any, artist: Any, album: Any) -> tuple[str, str, str]:
+    return (
+        _normalize_identity_part(title),
+        _normalize_identity_part(artist),
+        _normalize_identity_part(album),
+    )
+
+
+def _history_timestamp(value: Any) -> float:
+    if not value:
+        return 0.0
+    if isinstance(value, (int, float)):
+        return float(value)
+    text = str(value).strip()
+    if not text:
+        return 0.0
+    try:
+        # SQLite CURRENT_TIMESTAMP uses "YYYY-MM-DD HH:MM:SS".
+        return datetime.fromisoformat(text.replace('Z', '+00:00')).timestamp()
+    except ValueError:
+        try:
+            return datetime.strptime(text[:19], '%Y-%m-%d %H:%M:%S').timestamp()
+        except ValueError:
+            return 0.0
+
+
+def _build_history_download_item(entry: dict) -> dict:
+    history_id = entry.get('id') or entry.get('history_id') or ''
+    title = entry.get('title') or entry.get('source_track_title') or ''
+    artist = entry.get('artist_name') or entry.get('source_artist') or ''
+    album = entry.get('album_name') or ''
+    created_at = entry.get('created_at') or entry.get('completed_at') or ''
+    source = entry.get('download_source') or ''
+    return {
+        'task_id': f'history-{history_id}' if history_id else f'history-{title}-{created_at}',
+        'title': title,
+        'artist': artist,
+        'album': album,
+        'artwork': entry.get('thumb_url') or '',
+        'status': 'completed',
+        'progress': 100,
+        'error': None,
+        'batch_id': '',
+        'batch_name': source,
+        'batch_source': source,
+        'playlist_id': '',
+        'track_index': 0,
+        'batch_total': 1,
+        'timestamp': _history_timestamp(created_at),
+        'created_at': created_at,
+        'priority': _STATUS_PRIORITY['completed'],
+        'quality': entry.get('quality') or '',
+        'file_path': entry.get('file_path') or '',
+        'is_persistent_history': True,
+    }
+
 
 def build_unified_downloads_response(limit: int, deps: StatusDeps) -> dict:
     """Flat list of every task across batches, sorted active-first then by recency.
@@ -543,6 +608,7 @@ def build_unified_downloads_response(limit: int, deps: StatusDeps) -> dict:
     Powers /api/downloads/all for the centralized Downloads page.
     """
     items = []
+    live_identities = set()
     with tasks_lock:
         for task_id, task in download_tasks.items():
             track_info = task.get('track_info') or {}
@@ -589,6 +655,7 @@ def build_unified_downloads_response(limit: int, deps: StatusDeps) -> dict:
                             artwork = images[0].get('url', '') if isinstance(images[0], dict) else str(images[0])
 
             status = task.get('status', 'queued')
+            live_identities.add(_download_identity(title, artist, album))
             # Determine download progress percentage
             progress = 0
             if status == 'completed':
@@ -625,8 +692,25 @@ def build_unified_downloads_response(limit: int, deps: StatusDeps) -> dict:
                 'batch_total': len(batch.get('queue', [])),
                 'timestamp': task.get('status_change_time', 0),
                 'priority': _STATUS_PRIORITY.get(status, 9),
+                'is_persistent_history': False,
             })
 
+    if deps.get_persistent_download_history is not None and len(items) < limit:
+        history_limit = min(limit - len(items), _PERSISTENT_HISTORY_TAIL_LIMIT)
+        try:
+            history_entries = deps.get_persistent_download_history(history_limit) or []
+        except Exception as exc:
+            logger.debug("[Downloads] persistent history lookup failed: %s", exc)
+            history_entries = []
+
+        for entry in history_entries:
+            item = _build_history_download_item(entry)
+            identity = _download_identity(item.get('title'), item.get('artist'), item.get('album'))
+            if identity in live_identities:
+                continue
+            items.append(item)
+            live_identities.add(identity)
+
     # Sort: active first (by priority), then by timestamp desc within each group
     items.sort(key=lambda x: (x['priority'], -x['timestamp']))
 
diff --git a/tests/downloads/test_downloads_status.py b/tests/downloads/test_downloads_status.py
index 706f9131..64d41b3d 100644
--- a/tests/downloads/test_downloads_status.py
+++ b/tests/downloads/test_downloads_status.py
@@ -42,6 +42,7 @@ def _build_deps(
     cached_transfers=None,
     download_orchestrator=None,
     run_async=None,
+    persistent_history=None,
 ):
     submitted = []
 
@@ -57,6 +58,7 @@ def _build_deps(
         get_cached_transfer_data=cached_transfers or (lambda: {}),
         download_orchestrator=download_orchestrator,
         run_async=run_async,
+        get_persistent_download_history=persistent_history,
     )
     return deps, submitted
 
@@ -655,3 +657,88 @@ def test_unified_response_respects_limit():
     out = st.build_unified_downloads_response(5, deps)
     assert len(out['downloads']) == 5
     assert out['total'] == 20  # total still reflects all
+
+
+def test_unified_response_includes_persistent_download_history():
+    deps, _ = _build_deps(
+        persistent_history=lambda limit: [
+            {
+                'id': 42,
+                'title': 'Persisted Track',
+                'artist_name': 'Deezer Artist',
+                'album_name': 'Persistent Album',
+                'thumb_url': 'http://cover.jpg',
+                'download_source': 'Deezer',
+                'quality': 'FLAC',
+                'created_at': '2026-05-24 12:34:56',
+            }
+        ]
+    )
+
+    out = st.build_unified_downloads_response(100, deps)
+
+    assert out['total'] == 1
+    item = out['downloads'][0]
+    assert item['task_id'] == 'history-42'
+    assert item['title'] == 'Persisted Track'
+    assert item['artist'] == 'Deezer Artist'
+    assert item['album'] == 'Persistent Album'
+    assert item['artwork'] == 'http://cover.jpg'
+    assert item['status'] == 'completed'
+    assert item['progress'] == 100
+    assert item['batch_name'] == 'Deezer'
+    assert item['is_persistent_history'] is True
+
+
+def test_unified_response_dedupes_history_against_live_task():
+    download_tasks['live'] = {
+        'track_index': 0,
+        'status': 'completed',
+        'track_info': {
+            'name': 'Same Track',
+            'artist': 'Same Artist',
+            'album': 'Same Album',
+        },
+    }
+    deps, _ = _build_deps(
+        persistent_history=lambda limit: [
+            {
+                'id': 7,
+                'title': 'Same Track',
+                'artist_name': 'Same Artist',
+                'album_name': 'Same Album',
+                'created_at': '2026-05-24 12:34:56',
+            }
+        ]
+    )
+
+    out = st.build_unified_downloads_response(100, deps)
+
+    assert len(out['downloads']) == 1
+    assert out['downloads'][0]['task_id'] == 'live'
+    assert out['downloads'][0]['is_persistent_history'] is False
+
+
+def test_unified_response_caps_persistent_history_tail():
+    requested_limits = []
+
+    def _history(limit):
+        requested_limits.append(limit)
+        return [
+            {
+                'id': i,
+                'title': f'Track {i}',
+                'artist_name': 'Artist',
+                'album_name': 'Album',
+                'created_at': '2026-05-24 12:34:56',
+            }
+            for i in range(limit + 10)
+        ]
+
+    deps, _ = _build_deps(persistent_history=_history)
+
+    out = st.build_unified_downloads_response(300, deps)
+
+    assert requested_limits == [50]
+    assert len(out['downloads']) == 50
+    assert out['total'] == 50
diff --git a/web_server.py b/web_server.py
index f3cad76f..993cda4a 100644
--- a/web_server.py
+++ b/web_server.py
@@ -2557,9 +2557,16 @@ def _build_system_stats():
     active_downloads = len([batch_id for batch_id, batch_data in download_batches.items()
                            if batch_data.get('phase') == 'downloading'])
 
-    # Count finished downloads (completed this session) - use session counter like dashboard.py
-    with session_stats_lock:
-        finished_downloads = session_completed_downloads
+    # Count finished downloads from persistent history so the dashboard
+    # survives Docker/container restarts and streaming downloads that leave
+    # the in-memory task tracker after post-processing.
+    try:
+        persistent_finished = int(get_database().get_library_history_stats().get('downloads', 0) or 0)
+        with session_stats_lock:
+            finished_downloads = max(persistent_finished, session_completed_downloads)
+    except Exception:
+        with session_stats_lock:
+            finished_downloads = session_completed_downloads
 
     # Calculate total download speed from active soulseek transfers
     # Skip the slskd API call entirely when Soulseek is not the active download
@@ -16928,6 +16935,11 @@ def _build_status_deps():
         download_orchestrator=download_orchestrator,
         run_async=run_async,
         on_download_completed=_on_download_completed,
+        get_persistent_download_history=lambda limit: get_database().get_library_history(
+            event_type='download',
+            page=1,
+            limit=limit,
+        )[0],
     )
 
 
diff --git a/webui/static/api-monitor.js b/webui/static/api-monitor.js
index d53d0667..75c3f491 100644
--- a/webui/static/api-monitor.js
+++ b/webui/static/api-monitor.js
@@ -568,7 +568,7 @@ async function fetchAndUpdateSystemStats() {
 
         // Update all stat cards
         updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
-        updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
+        updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed downloads');
         updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
         updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
         updateStatCard('uptime-card', data.uptime, 'Application runtime');
diff --git a/webui/static/core.js b/webui/static/core.js
index 9a1bd1e4..2ba0d6b2 100644
--- a/webui/static/core.js
+++ b/webui/static/core.js
@@ -628,7 +628,7 @@ function unsubscribeFromDownloadBatch(batchId) {
 function handleDashboardStats(data) {
     // Same logic as fetchAndUpdateSystemStats response handler
     updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
-    updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
+    updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed downloads');
     updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
     updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
     updateStatCard('uptime-card', data.uptime, 'Application runtime');
diff --git a/webui/static/pages-extra.js b/webui/static/pages-extra.js
index 47a65710..a10a7df5 100644
--- a/webui/static/pages-extra.js
+++ b/webui/static/pages-extra.js
@@ -2278,7 +2278,9 @@ function _adlRender() {
     else if (_adlFilter === 'completed') filtered = filtered.filter(d => completedStatuses.includes(d.status));
     else if (_adlFilter === 'failed') filtered = filtered.filter(d => failedStatuses.includes(d.status));
 
-    const completedN = _adlData.filter(d => [...completedStatuses, ...failedStatuses].includes(d.status)).length;
+    const completedN = _adlData.filter(d =>
+        [...completedStatuses, ...failedStatuses].includes(d.status) && !d.is_persistent_history
+    ).length;
 
     if (countEl) {
         const activeN = _adlData.filter(d => activeStatuses.includes(d.status)).length;

From ccbe91880870a42d1fdced2d80688b0506da2fff Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 24 May 2026 10:46:21 -0700
Subject: [PATCH 06/42] Unify artist detail action buttons

Move the artist watchlist and discography actions into the main artist hero action row so they sit with Artist Radio and Enhance Quality. Apply a shared compact pill treatment for the hero actions while preserving the existing button IDs and click behavior.
---
 webui/index.html       |  22 ++++-----
 webui/static/style.css | 110 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+), 11 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index d590d158..2486ed4b 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -2435,10 +2435,6 @@
                         <span>← Back</span>
                     </button>
 
-                    <button class="library-artist-watchlist-btn" id="library-artist-watchlist-btn">
-                        <span class="watchlist-icon">👁️</span>
-                        <span class="watchlist-text">Add to Watchlist</span>
-                    </button>
                 </div>
 
                 <!-- Artist Hero Section -->
@@ -2466,6 +2462,17 @@
                                     <span class="radio-icon">📻</span>
                                     <span class="radio-text">Artist Radio</span>
                                 </button>
+                                <button class="library-artist-watchlist-btn" id="library-artist-watchlist-btn">
+                                    <span class="watchlist-icon">👁️</span>
+                                    <span class="watchlist-text">Add to Watchlist</span>
+                                </button>
+                                <div class="discog-download-wrap" id="discog-download-wrap" style="display:none;">
+                                    <button class="discog-download-btn discog-btn-compact" id="discog-download-btn" onclick="openDiscographyModal()">
+                                        <span class="discog-btn-icon">⬇</span>
+                                        <span class="discog-btn-text">Download Discography</span>
+                                        <span class="discog-btn-shimmer"></span>
+                                    </button>
+                                </div>
                                 <button class="library-artist-enhance-btn hidden" id="library-artist-enhance-btn"
                                     onclick="openEnhanceQualityModal()">
                                     <span class="enhance-icon">⚡</span>
@@ -2485,13 +2492,6 @@
                                 </div>
                             </div>
 
-                            <div class="discog-download-wrap" id="discog-download-wrap" style="display:none;">
-                                <button class="discog-download-btn discog-btn-compact" id="discog-download-btn" onclick="openDiscographyModal()">
-                                    <span class="discog-btn-icon">⬇</span>
-                                    <span class="discog-btn-text">Download Discography</span>
-                                    <span class="discog-btn-shimmer"></span>
-                                </button>
-                            </div>
 
                             <div class="collection-overview">
                                 <div class="collection-category">
diff --git a/webui/static/style.css b/webui/static/style.css
index 061fbbae..7d7a71a4 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -45706,6 +45706,10 @@ textarea.enhanced-meta-field-input {
 
 .discog-download-wrap { margin: 12px 0 4px; }
 
+.artist-hero-actions .discog-download-wrap { margin: 0; }
+
+.artist-hero-actions .discog-btn-compact { margin-top: 0; }
+
 .discog-download-btn {
     position: relative;
     display: flex;
@@ -45753,6 +45757,112 @@ textarea.enhanced-meta-field-input {
     animation: discogShimmer 3s ease-in-out infinite;
 }
 
+.artist-hero-actions {
+    gap: 10px;
+    align-items: center;
+}
+
+.artist-hero-actions .library-artist-radio-btn,
+.artist-hero-actions .library-artist-watchlist-btn,
+.artist-hero-actions .discog-download-btn,
+.artist-hero-actions .library-artist-enhance-btn {
+    --artist-action-rgb: var(--accent-rgb);
+    min-height: 38px;
+    width: auto;
+    max-width: none;
+    padding: 8px 14px 8px 12px;
+    gap: 8px;
+    border-radius: 999px;
+    color: rgba(255, 255, 255, 0.82);
+    background:
+        linear-gradient(135deg, rgba(var(--artist-action-rgb), 0.13), rgba(var(--artist-action-rgb), 0.03)),
+        rgba(255, 255, 255, 0.035);
+    border: 1px solid rgba(var(--artist-action-rgb), 0.26);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.08),
+        0 8px 22px rgba(0, 0, 0, 0.22);
+    font-size: 12px;
+    font-weight: 650;
+    letter-spacing: 0;
+    line-height: 1;
+    backdrop-filter: blur(14px) saturate(1.25);
+    transform: none;
+}
+
+.artist-hero-actions .library-artist-radio-btn { --artist-action-rgb: 79, 195, 247; }
+.artist-hero-actions .library-artist-watchlist-btn { --artist-action-rgb: 255, 193, 7; }
+.artist-hero-actions .discog-download-btn { --artist-action-rgb: var(--accent-rgb); }
+.artist-hero-actions .library-artist-enhance-btn { --artist-action-rgb: 180, 132, 255; }
+
+.artist-hero-actions .library-artist-radio-btn::before,
+.artist-hero-actions .library-artist-watchlist-btn::before,
+.artist-hero-actions .library-artist-enhance-btn::before,
+.artist-hero-actions .discog-download-btn::before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    position: relative;
+    inset: auto;
+    flex: 0 0 auto;
+    opacity: 1;
+    background: rgb(var(--artist-action-rgb));
+    box-shadow: 0 0 14px rgba(var(--artist-action-rgb), 0.85);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.artist-hero-actions .library-artist-radio-btn:hover,
+.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled),
+.artist-hero-actions .discog-download-btn:hover,
+.artist-hero-actions .library-artist-enhance-btn:hover {
+    color: #ffffff;
+    border-color: rgba(var(--artist-action-rgb), 0.5);
+    background:
+        linear-gradient(135deg, rgba(var(--artist-action-rgb), 0.22), rgba(var(--artist-action-rgb), 0.06)),
+        rgba(255, 255, 255, 0.055);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.12),
+        0 12px 28px rgba(0, 0, 0, 0.28),
+        0 0 0 1px rgba(var(--artist-action-rgb), 0.12);
+    transform: translateY(-1px);
+}
+
+.artist-hero-actions .library-artist-radio-btn:hover::before,
+.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled)::before,
+.artist-hero-actions .discog-download-btn:hover::before,
+.artist-hero-actions .library-artist-enhance-btn:hover::before {
+    transform: scale(1.25);
+    box-shadow: 0 0 18px rgba(var(--artist-action-rgb), 1);
+}
+
+.artist-hero-actions .library-artist-watchlist-btn.watching {
+    color: #ffd761;
+    border-color: rgba(255, 193, 7, 0.52);
+    background:
+        linear-gradient(135deg, rgba(255, 193, 7, 0.24), rgba(255, 193, 7, 0.06)),
+        rgba(255, 255, 255, 0.04);
+}
+
+.artist-hero-actions .library-artist-radio-btn .radio-icon,
+.artist-hero-actions .library-artist-watchlist-btn .watchlist-icon,
+.artist-hero-actions .discog-download-btn .discog-btn-icon,
+.artist-hero-actions .library-artist-enhance-btn .enhance-icon {
+    font-size: 13px;
+    position: relative;
+    z-index: 1;
+    transform: none;
+}
+
+.artist-hero-actions .library-artist-radio-btn:hover .radio-icon,
+.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled) .watchlist-icon,
+.artist-hero-actions .library-artist-enhance-btn:hover .enhance-icon {
+    transform: none;
+}
+
+.artist-hero-actions .discog-btn-shimmer {
+    display: none;
+}
+
 @keyframes discogShimmer {
     0%, 100% { left: -100%; }
     50% { left: 150%; }

From a3ba79a9ce245974f25410a22ff0c7bded8ae6f4 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 24 May 2026 11:02:19 -0700
Subject: [PATCH 07/42] Improve radio mode UI and behavior

Refactor and enhance the player radio feature: add npSetRadioMode, npQueueHasNext, and npEnsureCurrentTrackInQueue helpers to centralize radio-state changes and conditional radio fetch logic; replace direct npRadioMode toggles with npSetRadioMode in the expanded player and artist-radio flow (now awaits playLibraryTrack and triggers fetchIfNeeded). Add accessibility (aria-pressed) and label/pulse elements to the radio button, and update CSS for improved visuals and active-state animation. Also adjust toasts/messages and ensure the current library track is seeded into the queue when needed.
---
 webui/index.html                  |  4 +-
 webui/static/media-player.js      | 81 +++++++++++++++++++------------
 webui/static/stats-automations.js | 16 ++----
 webui/static/style.css            | 54 ++++++++++++++++-----
 4 files changed, 99 insertions(+), 56 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 2486ed4b..43b1e265 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -7174,8 +7174,10 @@
                         <span class="np-queue-count" id="np-queue-count"></span>
                     </button>
                     <div class="np-queue-header-actions">
-                        <button class="np-radio-btn" id="np-radio-btn" title="Radio mode - auto-add similar tracks">
+                        <button class="np-radio-btn" id="np-radio-btn" title="Radio mode - auto-add similar tracks" aria-pressed="false">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h.01"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M1.5 9.289a15 15 0 0 1 21 0"/></svg>
+                            <span class="np-radio-label">Radio</span>
+                            <span class="np-radio-pulse"></span>
                         </button>
                         <button class="np-queue-clear-btn" id="np-queue-clear" title="Clear queue">Clear</button>
                     </div>
diff --git a/webui/static/media-player.js b/webui/static/media-player.js
index fd7eb526..cec97aba 100644
--- a/webui/static/media-player.js
+++ b/webui/static/media-player.js
@@ -1383,6 +1383,54 @@ let npMediaSource = null;
 let npVizAnimFrame = null;
 let npVizInitialized = false;
 
+function npQueueHasNext() {
+    if (npQueue.length === 0) return false;
+    return npShuffleOn
+        ? npQueue.length > 1
+        : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all');
+}
+
+function npEnsureCurrentTrackInQueue() {
+    if (!currentTrack || !currentTrack.is_library || npQueue.length > 0) return;
+    npQueue.push({
+        title: currentTrack.title,
+        artist: currentTrack.artist,
+        album: currentTrack.album,
+        file_path: currentTrack.filename || currentTrack.file_path,
+        filename: currentTrack.filename || currentTrack.file_path,
+        is_library: true,
+        image_url: currentTrack.image_url,
+        id: currentTrack.id,
+        artist_id: currentTrack.artist_id,
+        album_id: currentTrack.album_id,
+        bitrate: currentTrack.bitrate,
+        sample_rate: currentTrack.sample_rate
+    });
+    npQueueIndex = 0;
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function npSetRadioMode(enabled, options = {}) {
+    const { toast = true, fetchIfNeeded = false } = options;
+    npRadioMode = Boolean(enabled);
+    const radioBtn = document.getElementById('np-radio-btn');
+    if (radioBtn) {
+        radioBtn.classList.toggle('active', npRadioMode);
+        radioBtn.setAttribute('aria-pressed', npRadioMode ? 'true' : 'false');
+        radioBtn.title = npRadioMode
+            ? 'Radio mode on - similar tracks will auto-queue'
+            : 'Radio mode - auto-add similar tracks';
+    }
+    if (toast) {
+        showToast(npRadioMode ? 'Radio mode on - similar tracks will auto-queue' : 'Radio mode off', 'success');
+    }
+    if (npRadioMode && fetchIfNeeded && currentTrack && currentTrack.id && !npLoadingQueueItem && !npQueueHasNext()) {
+        npEnsureCurrentTrackInQueue();
+        npFetchRadioTracks();
+    }
+}
+
 function initExpandedPlayer() {
     const closeBtn = document.getElementById('np-close-btn');
     const overlay = document.getElementById('np-modal-overlay');
@@ -1462,40 +1510,9 @@ function initExpandedPlayer() {
     const radioBtn = document.getElementById('np-radio-btn');
     if (radioBtn) {
         radioBtn.addEventListener('click', () => {
-            npRadioMode = !npRadioMode;
-            radioBtn.classList.toggle('active', npRadioMode);
-            showToast(npRadioMode ? 'Radio mode on — similar tracks will auto-queue' : 'Radio mode off', 'success');
-            // Immediately fetch radio tracks if turned on while playing with empty/exhausted queue
-            if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
-                const hasNext = npQueue.length > 0 && (npShuffleOn
-                    ? npQueue.length > 1
-                    : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
-                if (!hasNext) {
-                    // Add current track to queue first so it appears as "now playing" in context
-                    if (npQueue.length === 0 && currentTrack.is_library) {
-                        npQueue.push({
-                            title: currentTrack.title,
-                            artist: currentTrack.artist,
-                            album: currentTrack.album,
-                            file_path: currentTrack.filename || currentTrack.file_path,
-                            filename: currentTrack.filename || currentTrack.file_path,
-                            is_library: true,
-                            image_url: currentTrack.image_url,
-                            id: currentTrack.id,
-                            artist_id: currentTrack.artist_id,
-                            album_id: currentTrack.album_id,
-                            bitrate: currentTrack.bitrate
-                        });
-                        npQueueIndex = 0;
-                        renderNpQueue();
-                        updateNpPrevNextButtons();
-                    }
-                    npFetchRadioTracks();
-                }
-            }
+            npSetRadioMode(!npRadioMode, { fetchIfNeeded: true });
         });
     }
-
     // Action link (Go to Artist)
     const gotoArtistBtn = document.getElementById('np-goto-artist');
     if (gotoArtistBtn) {
diff --git a/webui/static/stats-automations.js b/webui/static/stats-automations.js
index 89b8d028..68772b35 100644
--- a/webui/static/stats-automations.js
+++ b/webui/static/stats-automations.js
@@ -6056,15 +6056,14 @@ async function playArtistRadio() {
         const albumArt = random.album.thumb_url || data.artist?.thumb_url || null;
 
         // Clear existing queue and disable radio before starting fresh
-        npRadioMode = false;
+        npSetRadioMode(false, { toast: false });
         clearQueue();
         if (audioPlayer && !audioPlayer.paused) {
             audioPlayer.pause();
         }
 
-        // Play the track first, then enable radio mode after a short delay
-        // so currentTrack is set and the radio queue fill triggers
-        playLibraryTrack({
+        // Play the track first so currentTrack is populated before radio seeds the queue.
+        await playLibraryTrack({
             id: random.track.id,
             title: random.track.title,
             file_path: random.track.file_path,
@@ -6073,14 +6072,9 @@ async function playArtistRadio() {
             album_id: random.album.id,
         }, random.album.title || '', artistName);
 
-        // Enable radio mode after track starts loading
-        setTimeout(() => {
-            npRadioMode = true;
-            const radioBtn = document.querySelector('.np-radio-btn');
-            if (radioBtn) radioBtn.classList.add('active');
-        }, 1000);
+        npSetRadioMode(true, { toast: false, fetchIfNeeded: true });
 
-        showToast(`Playing ${artistName} radio — similar tracks will auto-queue`, 'success');
+        showToast(`Playing ${artistName} radio - similar tracks will auto-queue`, 'success');
     } catch (e) {
         showToast(`Failed to start artist radio: ${e.message}`, 'error');
     }
diff --git a/webui/static/style.css b/webui/static/style.css
index 7d7a71a4..ea65ca7f 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -47281,26 +47281,56 @@ textarea.enhanced-meta-field-input {
 
 /* Radio mode button */
 .np-radio-btn {
-    background: none;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.35);
+    --np-radio-rgb: 79, 195, 247;
+    position: relative;
+    overflow: hidden;
+    background:
+        linear-gradient(135deg, rgba(var(--np-radio-rgb), 0.1), rgba(var(--np-radio-rgb), 0.025)),
+        rgba(255, 255, 255, 0.035);
+    border: 1px solid rgba(var(--np-radio-rgb), 0.22);
+    color: rgba(255, 255, 255, 0.62);
     font-size: 11px;
-    padding: 3px 8px;
-    border-radius: 6px;
+    font-weight: 650;
+    line-height: 1;
+    padding: 7px 10px;
+    border-radius: 999px;
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 4px;
-    transition: all 0.15s ease;
+    gap: 6px;
+    min-height: 30px;
+    transition: all 0.18s ease;
 }
 .np-radio-btn:hover {
-    color: rgba(255, 255, 255, 0.7);
-    border-color: rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.9);
+    border-color: rgba(var(--np-radio-rgb), 0.42);
+    background:
+        linear-gradient(135deg, rgba(var(--np-radio-rgb), 0.16), rgba(var(--np-radio-rgb), 0.04)),
+        rgba(255, 255, 255, 0.055);
 }
 .np-radio-btn.active {
-    color: rgb(var(--accent-rgb));
-    border-color: rgba(var(--accent-rgb), 0.3);
-    background: rgba(var(--accent-rgb), 0.08);
+    color: #ffffff;
+    border-color: rgba(var(--np-radio-rgb), 0.55);
+    background:
+        linear-gradient(135deg, rgba(var(--np-radio-rgb), 0.28), rgba(var(--np-radio-rgb), 0.07)),
+        rgba(255, 255, 255, 0.06);
+    box-shadow: 0 0 0 1px rgba(var(--np-radio-rgb), 0.08), 0 0 18px rgba(var(--np-radio-rgb), 0.12);
+}
+.np-radio-label {
+    position: relative;
+    z-index: 1;
+}
+.np-radio-pulse {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.24);
+    box-shadow: none;
+    transition: all 0.18s ease;
+}
+.np-radio-btn.active .np-radio-pulse {
+    background: rgb(var(--np-radio-rgb));
+    box-shadow: 0 0 12px rgba(var(--np-radio-rgb), 0.95);
 }
 .np-queue-header-actions {
     display: flex;

From ff4c5562572b3a7ce801ce86d69d10c3e9fbd5b2 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Thu, 14 May 2026 16:45:19 +0300
Subject: [PATCH 08/42] feat(webui): migrate stats page to react

- move the stats route onto the React shell with Recharts-based visualizations
- remove the global Chart.js include and add a local stats seed script for easier testing
- keep parity coverage with route, API, and helper tests while preserving the legacy page layout
---
 webui/src/platform/shell/globals.d.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/webui/src/platform/shell/globals.d.ts b/webui/src/platform/shell/globals.d.ts
index 8b043665..954686b8 100644
--- a/webui/src/platform/shell/globals.d.ts
+++ b/webui/src/platform/shell/globals.d.ts
@@ -62,6 +62,28 @@ declare global {
       showLoadingOverlay: (message?: string) => void;
       hideLoadingOverlay: () => void;
     };
+    navigateToArtistDetail?: (
+      artistId: string | number,
+      artistName: string,
+      sourceOverride?: string | null,
+      options?: Record<string, unknown>,
+    ) => void;
+    playLibraryTrack?: (
+      track: {
+        id: string | number;
+        title: string;
+        file_path: string;
+        bitrate?: string | number | null;
+        artist_id?: string | number | null;
+        album_id?: string | number | null;
+        _stats_image?: string | null;
+      },
+      albumTitle: string,
+      artistName: string,
+    ) => void | Promise<void>;
+    startStream?: (searchResult: Record<string, unknown>) => void | Promise<void>;
+    showLoadingOverlay?: (message?: string) => void;
+    hideLoadingOverlay?: () => void;
   }
 }
 

From 5680e52ceb929f9cb31c149adcd69ddebeb9de20 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Thu, 14 May 2026 17:15:25 +0300
Subject: [PATCH 09/42] refactor(webui): route stats interop through shell
 bridge

- move stats route legacy handoffs onto explicit SoulSyncWebShellBridge methods\n- stop relying on ad hoc window globals from React code for artist navigation and playback\n- update shell bridge tests and route test doubles to enforce the expanded bridge contract
---
 webui/src/platform/shell/globals.d.ts | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/webui/src/platform/shell/globals.d.ts b/webui/src/platform/shell/globals.d.ts
index 954686b8..8b043665 100644
--- a/webui/src/platform/shell/globals.d.ts
+++ b/webui/src/platform/shell/globals.d.ts
@@ -62,28 +62,6 @@ declare global {
       showLoadingOverlay: (message?: string) => void;
       hideLoadingOverlay: () => void;
     };
-    navigateToArtistDetail?: (
-      artistId: string | number,
-      artistName: string,
-      sourceOverride?: string | null,
-      options?: Record<string, unknown>,
-    ) => void;
-    playLibraryTrack?: (
-      track: {
-        id: string | number;
-        title: string;
-        file_path: string;
-        bitrate?: string | number | null;
-        artist_id?: string | number | null;
-        album_id?: string | number | null;
-        _stats_image?: string | null;
-      },
-      albumTitle: string,
-      artistName: string,
-    ) => void | Promise<void>;
-    startStream?: (searchResult: Record<string, unknown>) => void | Promise<void>;
-    showLoadingOverlay?: (message?: string) => void;
-    hideLoadingOverlay?: () => void;
   }
 }
 

From 27fbc80e7a703db9bed52254d23dab803064232d Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 11:13:12 +0300
Subject: [PATCH 10/42] feat(webui): migrate import route to React

- Move import page, tabs, workflow state, and route tests into React-owned route slices
- Preserve shell gating, staging queries, album matching, singles matching, auto-import, and queue behavior
- Add migration plan snapshot so cleanup/refinement can build on a stable baseline
---
 webui/docs/migration/README.md                |    3 +
 webui/docs/migration/import-migration-plan.md |  315 ++++
 .../docs/migration/page-migration-overview.md |   20 +-
 webui/index.html                              |  153 --
 webui/package-lock.json                       |   32 +-
 webui/package.json                            |    3 +-
 webui/src/platform/shell/globals.d.ts         |    7 +
 .../src/platform/shell/route-manifest.test.ts |   10 +-
 webui/src/platform/shell/route-manifest.ts    |    8 +-
 webui/src/routeTree.gen.ts                    |  131 +-
 webui/src/routes/import/-import.api.ts        |  293 +++
 webui/src/routes/import/-import.helpers.ts    |  286 +++
 webui/src/routes/import/-import.store.ts      |  236 +++
 webui/src/routes/import/-import.types.ts      |  226 +++
 webui/src/routes/import/-route.test.tsx       |  272 +++
 .../routes/import/-ui/album-import-tab.tsx    |  581 ++++++
 .../src/routes/import/-ui/auto-import-tab.tsx |  580 ++++++
 .../routes/import/-ui/import-page.module.css  | 1645 +++++++++++++++++
 webui/src/routes/import/-ui/import-page.tsx   |  184 ++
 webui/src/routes/import/-ui/import-shared.tsx |  106 ++
 .../routes/import/-ui/singles-import-tab.tsx  |  330 ++++
 webui/src/routes/import/album.tsx             |   15 +
 webui/src/routes/import/auto.tsx              |   27 +
 webui/src/routes/import/index.tsx             |    7 +
 webui/src/routes/import/route.tsx             |   20 +
 webui/src/routes/import/singles.tsx           |    7 +
 26 files changed, 5326 insertions(+), 171 deletions(-)
 create mode 100644 webui/docs/migration/import-migration-plan.md
 create mode 100644 webui/src/routes/import/-import.api.ts
 create mode 100644 webui/src/routes/import/-import.helpers.ts
 create mode 100644 webui/src/routes/import/-import.store.ts
 create mode 100644 webui/src/routes/import/-import.types.ts
 create mode 100644 webui/src/routes/import/-route.test.tsx
 create mode 100644 webui/src/routes/import/-ui/album-import-tab.tsx
 create mode 100644 webui/src/routes/import/-ui/auto-import-tab.tsx
 create mode 100644 webui/src/routes/import/-ui/import-page.module.css
 create mode 100644 webui/src/routes/import/-ui/import-page.tsx
 create mode 100644 webui/src/routes/import/-ui/import-shared.tsx
 create mode 100644 webui/src/routes/import/-ui/singles-import-tab.tsx
 create mode 100644 webui/src/routes/import/album.tsx
 create mode 100644 webui/src/routes/import/auto.tsx
 create mode 100644 webui/src/routes/import/index.tsx
 create mode 100644 webui/src/routes/import/route.tsx
 create mode 100644 webui/src/routes/import/singles.tsx

diff --git a/webui/docs/migration/README.md b/webui/docs/migration/README.md
index a7a9d5e3..f54442a1 100644
--- a/webui/docs/migration/README.md
+++ b/webui/docs/migration/README.md
@@ -16,6 +16,9 @@ This folder is the home for React migration planning work inside `webui`.
   - cross-route risk assessment
 - [stats-migration-plan.md](./stats-migration-plan.md)
   - route-specific migration plan for `stats`
+- [import-migration-plan.md](./import-migration-plan.md)
+  - route-specific migration plan for `import`
+  - implementation status and follow-up cleanup notes
 
 ## Naming Guidance
 
diff --git a/webui/docs/migration/import-migration-plan.md b/webui/docs/migration/import-migration-plan.md
new file mode 100644
index 00000000..9a5e4013
--- /dev/null
+++ b/webui/docs/migration/import-migration-plan.md
@@ -0,0 +1,315 @@
+# WebUI Import Migration Plan
+
+Snapshot date: 2026-05-15
+
+## Status
+
+- Initial implementation completed on 2026-05-15.
+- `import` is now React-owned in the shell route manifest.
+- The legacy import page DOM has been removed from `webui/index.html`.
+- Legacy import activation has been removed from `webui/static/init.js`.
+- A React route slice now owns import rendering, tab state, album matching, singles matching, auto-import controls, and the client-side processing queue.
+- The old import-specific functions still exist at the top of `webui/static/stats-automations.js` as dead code and can be removed in a focused cleanup pass.
+- Backend routes are already grouped around `/api/import/*` and `/api/auto-import/*`.
+
+## Goal
+
+- Migrate `import` into a React-owned route without changing the user workflow.
+- Preserve manual album matching, singles matching, auto-import review, and the processing queue.
+- Keep staging-folder and import-processing behavior backed by the existing API routes.
+- Use the completed `issues` and `stats` routes as the structural reference for route slices, API helpers, shell gating, and tests.
+
+## Why `import` Was The Right Next Route
+
+- It is the safest remaining route after excluding `help` and `hydrabase`.
+- It has real workflows, so it gives the migration program more signal than another mostly-static page.
+- The backend API boundary is already clearer than the broad dashboard, library, discover, sync, or settings surfaces.
+- The page is important enough to validate mutation, polling, and route-local reducer patterns before larger operational pages.
+- It does not need a visual redesign or a new shell abstraction to migrate cleanly.
+
+## Current Legacy Shape
+
+Page surface in `webui/index.html`:
+
+- Header
+  - import folder path
+  - file count and total size
+  - refresh action
+- Processing queue
+  - per-job progress
+  - partial error display
+  - clear-finished action
+- Tabs
+  - auto-import
+  - albums
+  - singles
+- Auto-import tab
+  - enable toggle
+  - status text
+  - confidence and interval settings
+  - scan-now action
+  - live scan progress
+  - result filters
+  - approve, reject, approve-all, and clear-completed actions
+- Albums tab
+  - auto-group suggestions from staging
+  - album search
+  - album result cards
+  - track matching view
+  - drag/drop and tap-to-assign overrides
+  - unmatched file pool
+  - process album action
+- Singles tab
+  - staging file list
+  - select all / per-file selection
+  - per-file track search
+  - manual match selection
+  - process selected action
+
+Legacy JS responsibilities in `webui/static/stats-automations.js`:
+
+- `initializeImportPage`
+- staging fetch and refresh
+- tab switching
+- auto-import polling
+- auto-import mutations
+- staging group and suggestion rendering
+- album search and match POSTs
+- drag/drop assignment state
+- singles search and selection state
+- client-side processing queue
+- sequential album/singles processing requests
+
+Backend endpoints already available:
+
+- `GET /api/import/staging/files`
+- `GET /api/import/staging/groups`
+- `GET /api/import/staging/hints`
+- `GET /api/import/staging/suggestions`
+- `GET /api/import/search/albums`
+- `POST /api/import/album/match`
+- `POST /api/import/album/process`
+- `GET /api/import/search/tracks`
+- `POST /api/import/singles/process`
+- `GET /api/auto-import/status`
+- `POST /api/auto-import/toggle`
+- `GET /api/auto-import/settings`
+- `POST /api/auto-import/settings`
+- `GET /api/auto-import/results`
+- `POST /api/auto-import/approve/:id`
+- `POST /api/auto-import/reject/:id`
+- `POST /api/auto-import/scan-now`
+- `POST /api/auto-import/approve-all`
+- `POST /api/auto-import/clear-completed`
+
+## Proposed Route Slice
+
+```text
+webui/src/routes/import/
+  route.tsx
+  -import.types.ts
+  -import.api.ts
+  -import.helpers.ts
+  -route.test.tsx
+  -ui/
+    import-page.tsx
+```
+
+## Proposed Route Responsibilities
+
+`route.tsx`
+
+- declare `/import`
+- validate search params
+- gate route through `bridge.isPageAllowed('import')`
+- preload shell context
+- ensure the staging-files query
+- prefetch album staging groups and suggestions
+- leave auto-import status/results as tab-specific client queries
+
+`-import.types.ts`
+
+- search param schema
+- API response types
+- staging file, staging group, album result, track result, match, auto-import result, and queue item types
+
+`-import.api.ts`
+
+- query options for staging, groups, suggestions, auto-import status, auto-import settings, auto-import results, album search, and track search
+- mutation helpers for album match, album process, singles process, auto-import actions, and settings writes
+- a single `invalidateImportQueries(queryClient)` helper for broad route refreshes after processing
+
+`-import.helpers.ts`
+
+- byte-size formatting
+- default query param coercion
+- album and track display labels
+- confidence class/label mapping
+- staging match normalization
+- auto-import result filtering and counters
+
+`-ui/import-page.tsx`
+
+- route-local match state
+- tap-selected file chip state
+- singles selection and manual matches
+- auto-import polling UI
+- client-side processing queue state
+
+## Search Params
+
+Use URL state only for durable, shareable route state:
+
+- `tab`
+  - values: `album`, `singles`, `auto`
+  - default: `album`
+- `autoFilter`
+  - values: `all`, `pending`, `imported`, `failed`
+  - default: `all`
+
+Keep these local to React state:
+
+- album search text
+- track search text
+- selected album
+- match overrides
+- selected singles
+- processing queue jobs
+
+Reasoning:
+
+- The tab and auto-import filter are useful after reloads.
+- The matching workflow is ephemeral and should not create fragile URLs with file indexes or local staging paths.
+
+## Query Model
+
+Critical route-loader data:
+
+- `importStagingFilesQueryOptions()`
+
+Useful prefetch data:
+
+- `importStagingGroupsQueryOptions()`
+- `importStagingSuggestionsQueryOptions()`
+
+Tab-specific data:
+
+- `autoImportStatusQueryOptions()`
+- `autoImportSettingsQueryOptions()`
+- `autoImportResultsQueryOptions(autoFilter)`
+
+Lazy search data:
+
+- `importAlbumSearchQueryOptions(query)`
+- `importTrackSearchQueryOptions(query)`
+
+Mutation-style actions:
+
+- album match draft
+- process one album track
+- process one single file
+- toggle auto-import
+- save auto-import settings
+- scan now
+- approve/reject auto-import result
+- approve all
+- clear completed
+
+Invalidation rules:
+
+- Processing album or singles files invalidates staging files, staging groups, staging suggestions, auto-import results, and any route-local queue completion summary.
+- Auto-import actions invalidate auto-import status and results.
+- Auto-import settings writes invalidate settings and status.
+- Refresh invalidates staging files, groups, and suggestions.
+
+## Incremental Migration Order
+
+Recommended order:
+
+1. Add route slice, types, API helpers, reducer, and helper tests.
+2. Build the React route shell with header, tabs, and staging summary.
+3. Port the Albums tab search and suggestions, but keep processing disabled until match rendering is covered.
+4. Port the album matching view, including drag/drop and tap assignment.
+5. Port the processing queue and album/singles process mutations.
+6. Port the Singles tab.
+7. Port the Auto tab and polling behavior.
+8. Flip `import` from `legacy` to `react` in the shell route manifest.
+9. Remove the legacy `import-page` DOM from `webui/index.html`.
+10. Remove import-specific legacy functions from `webui/static/stats-automations.js`.
+
+This order gives us a visible React page early while delaying the highest-risk file-processing actions until the state model is tested.
+
+## Testing Sketch
+
+Unit tests:
+
+- tab and filter search-param defaults
+- staging summary formatting
+- auto-import counters
+- confidence labels
+- reducer assignment behavior
+- reducer queue transitions
+
+API tests:
+
+- staging files success and error
+- staging groups success and error
+- album search success and empty result
+- track search success and empty result
+- album match success and failure
+- album process success and partial error
+- singles process success and partial error
+- auto-import status/results/settings/actions
+
+Route / component tests:
+
+- unauthorized users redirect to profile home
+- default route renders the Albums tab
+- `?tab=singles` renders the Singles tab
+- `?tab=auto&autoFilter=pending` renders pending auto-import results
+- refresh invalidates staging queries
+- album selection opens the match view
+- drag/drop and tap assignment update track matches
+- processing queue advances and refreshes staging on completion
+
+Playwright can wait until after route ownership flips.
+
+## Risks
+
+- The processing queue is client-side and long-running.
+- Auto-import polling must stop when leaving the tab or route.
+- File indexes can become stale after staging refreshes.
+- Album matching depends on preserving source, album name, and album artist from search results.
+- The page currently shares a large legacy module with stats and automations code, so cleanup should be careful and incremental.
+
+## Decisions To Keep Simple
+
+- Keep the current visual language.
+- Keep the existing backend endpoints.
+- Keep the processing queue client-side for the first migration.
+- Keep file matching state local to the route.
+- Do not extract shared workflow primitives until a second migrated route needs them.
+
+## Outcome
+
+- The route now serves as the first React-owned workflow migration.
+- The implementation uses validated search params for `tab` and `autoFilter`.
+- The route uses TanStack Query for staging data, suggestions, auto-import polling, mutations, and invalidation.
+- Tests cover shell ownership, URL tab state, album match payload preservation, and auto-import rendering.
+
+## Recommendation
+
+Treat remaining work as cleanup and hardening rather than route selection.
+
+Follow-up work should optimize for:
+
+- shrinking `stats-automations.js` after cutover
+- adding E2E coverage around full album and singles processing
+- considering route-level code splitting once more large React routes land
+
+It should not optimize for:
+
+- redesign
+- backend reshaping
+- shared queue abstractions
+- migrating `automations` at the same time
diff --git a/webui/docs/migration/page-migration-overview.md b/webui/docs/migration/page-migration-overview.md
index 01c96a57..6016df4b 100644
--- a/webui/docs/migration/page-migration-overview.md
+++ b/webui/docs/migration/page-migration-overview.md
@@ -1,10 +1,10 @@
 # WebUI Page Migration Overview
 
-Snapshot date: 2026-05-14
+Snapshot date: 2026-05-15
 
 ## Summary
 - The shell route manifest now has 18 page ids.
-- `issues` and `stats` are now React-owned routes.
+- `issues`, `stats`, and `import` are now React-owned routes.
 - Since the last snapshot, the biggest changes are:
   - `downloads` was renamed into `search`.
   - The live queue became `active-downloads`.
@@ -78,9 +78,9 @@ Rollups:
 | --- | --- | --- | --- | --- | --- |
 | `issues` | React | 2 / 2 / 2 / 2 / 2 | Low | Low | Completed |
 | `stats` | React | 2 / 2 / 2 / 2 / 2 | Low | Low | Completed |
+| `import` | React | 3 / 3 / 3 / 2 / 3 | Medium | Medium | Completed |
 | `help` | Legacy | 3 / 2 / 1 / 1 / 2 | Low | Low | Wave 1 |
 | `hydrabase` | Legacy | 2 / 2 / 2 / 2 / 2 | Low | Low | Wave 1 |
-| `import` | Legacy | 3 / 3 / 3 / 2 / 3 | Medium | Medium | Wave 1 |
 | `search` | Legacy | 4 / 4 / 4 / 3 / 4 | High | High | Wave 2 |
 | `watchlist` | Legacy | 4 / 4 / 4 / 3 / 4 | High | High | Wave 3 |
 | `wishlist` | Legacy | 4 / 4 / 4 / 3 / 4 | High | High | Wave 3 |
@@ -130,11 +130,12 @@ Rollups:
 - Recommendation: low-risk route with a narrow surface.
 
 #### `import`
-- Current owner: Legacy.
-- Primary files: `webui/index.html`, `webui/static/stats-automations.js`, `webui/static/helper.js`.
+- Current owner: React.
+- Primary files: `webui/src/routes/import/*`, `webui/src/platform/shell/route-manifest.ts`.
 - Main surface: staging files, album and singles matching, suggestion cards, processing queue.
 - Key coupling: settings-derived staging path assumptions and downstream library state.
-- Recommendation: still bounded enough for an early wave, though more workflow-heavy than `help` or `hydrabase`.
+- Recommendation: completed as the next migration after `stats`. Follow-up cleanup should remove the dead legacy import functions from `webui/static/stats-automations.js`.
+- Route plan: `webui/docs/migration/import-migration-plan.md`.
 
 ### Wave 2: Search split
 
@@ -264,9 +265,10 @@ Rollups:
 - Waves 6-10 defer the broadest, most coupled, or most orchestration-heavy surfaces until the team has the most leverage.
 
 ## Final Recommendation
-- Keep `issues` and `stats` as the current React reference implementations, and preserve the explicit bridge contract between React routes and legacy shell behavior.
+- Keep `issues`, `stats`, and `import` as the current React reference implementations, and preserve the explicit bridge contract between React routes and legacy shell behavior.
 - Treat `search`, `watchlist`, `wishlist`, `active-downloads`, and `tools` as the current route ids, and keep `downloads` and `artists` only as compatibility history.
-- Migrate the remaining safe legacy routes first: `help`, `hydrabase`, and `import`.
+- Migrate the remaining safe legacy routes first: `help` and `hydrabase`.
+- `import` has already been migrated and should be treated as the first React-owned workflow route.
 - During each migration, actively look for small reuse opportunities across route slices and shared UI primitives, but only extract once the overlap is clearly real.
-- Use `search` as the next meaningful proving ground now that the download queue has been split out.
+- Use `search` as the next larger proving ground after `import`, now that the download queue has been split out.
 - Avoid pulling `settings`, `sync`, `library`, `artist-detail`, or `automations` forward unless there is a separate product priority strong enough to justify the added regression risk.
diff --git a/webui/index.html b/webui/index.html
index 43b1e265..709c9b9e 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -6199,159 +6199,6 @@
                 </div>
             </div>
 
-            <!-- Import Page -->
-            <div class="page" id="import-page">
-                <div class="import-page-container">
-            <!-- Header with staging info -->
-            <div class="import-page-header">
-                <div class="import-page-title-row">
-                    <h1 class="import-page-title"><img src="/static/import.png" class="page-header-icon" alt=""><span>Import Music</span></h1>
-                    <button class="import-page-refresh-btn" onclick="importPageRefreshStaging()" title="Re-scan import folder">
-                        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M13.65 2.35A8 8 0 1 0 16 8h-2a6 6 0 1 1-1.76-4.24L10 6h6V0l-2.35 2.35z"/></svg>
-                        Refresh
-                    </button>
-                </div>
-                <div class="import-page-staging-bar" id="import-staging-bar">
-                    <span class="import-staging-path" id="import-page-staging-path">Import folder: loading...</span>
-                    <span class="import-staging-stats" id="import-page-staging-stats"></span>
-                </div>
-            </div>
-
-            <!-- Processing Queue -->
-            <div class="import-page-queue hidden" id="import-page-queue">
-                <div class="import-page-queue-header">
-                    <span class="import-page-queue-title">Processing</span>
-                    <button class="import-page-queue-clear" id="import-page-queue-clear" onclick="importPageClearFinishedJobs()">Clear finished</button>
-                </div>
-                <div class="import-page-queue-list" id="import-page-queue-list"></div>
-            </div>
-
-            <!-- Tab Bar -->
-            <div class="import-page-tab-bar">
-                <button class="import-page-tab" id="import-page-tab-auto" onclick="importPageSwitchTab('auto')">Auto</button>
-                <button class="import-page-tab active" id="import-page-tab-album" onclick="importPageSwitchTab('album')">Albums</button>
-                <button class="import-page-tab" id="import-page-tab-singles" onclick="importPageSwitchTab('singles')">Singles</button>
-            </div>
-
-            <!-- Auto Import Tab -->
-            <div class="import-page-tab-content" id="import-page-auto-content">
-                <div class="auto-import-controls">
-                    <div class="auto-import-toggle-row">
-                        <label class="auto-import-toggle-label">
-                            <input type="checkbox" id="auto-import-enabled" onchange="_autoImportToggle(this.checked)">
-                            <span class="repair-toggle-slider"></span>
-                            <span>Auto-Import</span>
-                        </label>
-                        <span class="auto-import-status" id="auto-import-status-text">Disabled</span>
-                        <button class="auto-import-scan-now-btn" id="auto-import-scan-now" onclick="_autoImportScanNow()" title="Scan import folder now" style="display:none">
-                            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M13.65 2.35A8 8 0 1 0 16 8h-2a6 6 0 1 1-1.76-4.24L10 6h6V0l-2.35 2.35z"/></svg>
-                            Scan Now
-                        </button>
-                    </div>
-                    <div class="auto-import-settings-row" id="auto-import-settings-row" style="display:none;">
-                        <label>Confidence: <input type="range" id="auto-import-confidence" min="50" max="100" value="90" oninput="document.getElementById('auto-import-conf-val').textContent=this.value+'%'"> <span id="auto-import-conf-val">90%</span></label>
-                        <label>Interval: <select id="auto-import-interval" onchange="_autoImportSaveSettings()">
-                            <option value="30">30s</option>
-                            <option value="60" selected>60s</option>
-                            <option value="120">2m</option>
-                            <option value="300">5m</option>
-                        </select></label>
-                        <button class="watchlist-action-btn watchlist-action-secondary" onclick="_autoImportSaveSettings()">Save</button>
-                    </div>
-                    <!-- Live scan progress -->
-                    <div class="auto-import-progress" id="auto-import-progress" style="display:none">
-                        <div class="auto-import-progress-text" id="auto-import-progress-text">Scanning...</div>
-                        <div class="auto-import-progress-bar"><div class="auto-import-progress-fill" id="auto-import-progress-fill"></div></div>
-                    </div>
-                </div>
-                <!-- Stats summary -->
-                <div class="auto-import-stats" id="auto-import-stats" style="display:none">
-                    <span class="auto-import-stat" id="auto-import-stat-imported">0 imported</span>
-                    <span class="auto-import-stat auto-import-stat-review" id="auto-import-stat-review">0 review</span>
-                    <span class="auto-import-stat auto-import-stat-failed" id="auto-import-stat-failed">0 failed</span>
-                </div>
-                <!-- Filter pills -->
-                <div class="auto-import-filters" id="auto-import-filters" style="display:none">
-                    <button class="adl-pill active" data-filter="all" onclick="_autoImportSetFilter('all')">All</button>
-                    <button class="adl-pill" data-filter="pending" onclick="_autoImportSetFilter('pending')">Needs Review</button>
-                    <button class="adl-pill" data-filter="imported" onclick="_autoImportSetFilter('imported')">Imported</button>
-                    <button class="adl-pill" data-filter="failed" onclick="_autoImportSetFilter('failed')">Failed</button>
-                    <div style="flex:1"></div>
-                    <button class="auto-import-batch-btn" id="auto-import-approve-all" onclick="_autoImportApproveAll()" style="display:none">Approve All</button>
-                    <button class="auto-import-batch-btn auto-import-clear-btn" id="auto-import-clear-completed" onclick="_autoImportClearCompleted()" style="display:none">Clear History</button>
-                </div>
-                <div class="auto-import-results" id="auto-import-results">
-                    <div class="auto-import-empty">
-                        <p>Enable auto-import to watch your import folder for new music.</p>
-                        <p style="opacity:0.5;font-size:12px;">Drop album folders or single tracks into your import folder and SoulSync will identify, match, and import them automatically.</p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Album Tab -->
-            <div class="import-page-tab-content active" id="import-page-album-content">
-                <!-- Search state -->
-                <div id="import-page-album-search-section">
-                    <div class="import-page-suggestions" id="import-page-suggestions">
-                        <div class="import-page-section-label">Suggested from your import folder</div>
-                        <div class="import-page-album-grid" id="import-page-suggestions-grid"></div>
-                    </div>
-                    <div class="import-page-search-bar">
-                        <input type="text" id="import-page-album-search-input" class="import-page-search-input"
-                            placeholder="Search for an album..." onkeydown="if(event.key==='Enter')importPageSearchAlbum()">
-                        <button class="import-page-search-btn" onclick="importPageSearchAlbum()">Search</button>
-                        <button class="import-page-clear-btn hidden" id="import-page-album-clear-btn"
-                            onclick="importPageResetAlbumSearch()" title="Clear search">✕</button>
-                    </div>
-                    <div class="import-page-album-grid" id="import-page-album-results"></div>
-                </div>
-
-                <!-- Match state (hidden initially) -->
-                <div id="import-page-album-match-section" class="hidden">
-                    <div class="import-page-album-hero" id="import-page-album-hero"></div>
-                    <div class="import-page-match-header">
-                        <h3>Track Matching</h3>
-                        <div class="import-page-match-actions">
-                            <button class="import-page-secondary-btn" onclick="importPageAutoRematch()">Re-match Automatically</button>
-                            <button class="import-page-back-btn" onclick="importPageResetAlbumSearch()">Back to Search</button>
-                        </div>
-                    </div>
-                    <div class="import-page-match-list" id="import-page-match-list"></div>
-
-                    <!-- Unmatched file pool for drag-drop -->
-                    <div class="import-page-unmatched-pool" id="import-page-unmatched-pool">
-                        <div class="import-page-pool-label">Unmatched Files (<span id="import-page-unmatched-count">0</span>)</div>
-                        <div class="import-page-pool-chips" id="import-page-pool-chips"></div>
-                    </div>
-
-                    <div class="import-page-match-footer">
-                        <div class="import-page-match-stats" id="import-page-match-stats"></div>
-                        <button class="import-page-process-btn" id="import-page-album-process-btn"
-                            onclick="importPageProcessAlbum()">Process Album</button>
-                    </div>
-                </div>
-
-            </div>
-
-            <!-- Singles Tab -->
-            <div class="import-page-tab-content" id="import-page-singles-content">
-                <div class="import-page-singles-header">
-                    <div class="import-page-singles-actions">
-                        <button class="import-page-secondary-btn" onclick="importPageSelectAllSingles()">
-                            <span id="import-page-select-all-text">Select All</span>
-                        </button>
-                        <button class="import-page-process-btn" id="import-page-singles-process-btn"
-                            onclick="importPageProcessSingles()" disabled>Process Selected (0)</button>
-                    </div>
-                </div>
-                <div class="import-page-singles-list" id="import-page-singles-list">
-                    <div class="import-page-empty-state">Navigate to this page to scan your import folder for audio files.</div>
-                </div>
-
-            </div>
-        </div>
-            </div>
-
             <!-- Help & Docs Page -->
             <div class="page" id="help-page">
                 <div class="docs-layout">
diff --git a/webui/package-lock.json b/webui/package-lock.json
index 23b81ab1..3e6bf5a6 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -15,7 +15,8 @@
         "react": "^19.2.5",
         "react-dom": "^19.2.5",
         "recharts": "^3.8.1",
-        "zod": "^4.4.2"
+        "zod": "^4.4.2",
+        "zustand": "^5.0.13"
       },
       "devDependencies": {
         "@playwright/test": "^1.59.1",
@@ -5391,6 +5392,35 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.13.tgz",
+      "integrity": "sha512-efI2tVaVQPqtOh114loML/Z80Y4NP3yc+Ff0fYiZJPauNeWZeIp/bRFD7I9bfmCOYBh/PHxlglQ9+wvlwnPikQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/webui/package.json b/webui/package.json
index 56123f51..ad4cb775 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -21,7 +21,8 @@
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "recharts": "^3.8.1",
-    "zod": "^4.4.2"
+    "zod": "^4.4.2",
+    "zustand": "^5.0.13"
   },
   "devDependencies": {
     "@playwright/test": "^1.59.1",
diff --git a/webui/src/platform/shell/globals.d.ts b/webui/src/platform/shell/globals.d.ts
index 8b043665..dbc51571 100644
--- a/webui/src/platform/shell/globals.d.ts
+++ b/webui/src/platform/shell/globals.d.ts
@@ -9,6 +9,13 @@ import type { ShellProfileContext, ShellRouteDefinition, ShellPageId } from './b
 declare global {
   interface Window {
     showToast?: (message: string, type?: string, durationOrContext?: number | string) => void;
+    showConfirmDialog?: (options?: {
+      title?: string;
+      message?: string;
+      confirmText?: string;
+      cancelText?: string;
+      destructive?: boolean;
+    }) => Promise<boolean>;
     SoulSyncIssueDomain?: IssueDomainBridge;
     SoulSyncWorkflowActions?: {
       openDownloadMissingAlbum: (input: DownloadMissingAlbumWorkflowInput) => void | Promise<void>;
diff --git a/webui/src/platform/shell/route-manifest.test.ts b/webui/src/platform/shell/route-manifest.test.ts
index 2727c255..e4f8c978 100644
--- a/webui/src/platform/shell/route-manifest.test.ts
+++ b/webui/src/platform/shell/route-manifest.test.ts
@@ -31,6 +31,13 @@ describe('shellRouteManifest', () => {
     expect(resolveShellPageFromPath('/issues/')).toBe('issues');
   });
 
+  it('resolves nested React route paths to their shell page', () => {
+    expect(resolveShellPageFromPath('/import/album')).toBe('import');
+    expect(resolveShellPageFromPath('/import/auto')).toBe('import');
+    expect(resolveShellPageFromPath('/import/singles')).toBe('import');
+    expect(resolveLegacyShellPageFromPath('/import/album')).toBeNull();
+  });
+
   it('keeps a route entry for every manifest page id', () => {
     expect(shellRouteManifest).not.toHaveLength(0);
     expect(getShellRouteByPageId('dashboard')?.path).toBe('/dashboard');
@@ -43,8 +50,9 @@ describe('shellRouteManifest', () => {
   it('tracks whether a route is rendered by React or the legacy shell', () => {
     expect(getShellRouteByPageId('issues')?.kind).toBe('react');
     expect(getShellRouteByPageId('stats')?.kind).toBe('react');
+    expect(getShellRouteByPageId('import')?.kind).toBe('react');
     expect(getShellRouteByPageId('discover')?.kind).toBe('legacy');
-    expect(reactShellRoutes.map((route) => route.pageId)).toEqual(['stats', 'issues']);
+    expect(reactShellRoutes.map((route) => route.pageId)).toEqual(['import', 'stats', 'issues']);
     expect(legacyShellRoutes.some((route) => route.pageId === 'dashboard')).toBe(true);
   });
 
diff --git a/webui/src/platform/shell/route-manifest.ts b/webui/src/platform/shell/route-manifest.ts
index bbcd7d09..c09a18b6 100644
--- a/webui/src/platform/shell/route-manifest.ts
+++ b/webui/src/platform/shell/route-manifest.ts
@@ -38,7 +38,7 @@ export const shellRouteManifest: readonly ShellRouteDefinition[] = [
   { pageId: 'wishlist', path: '/wishlist', kind: 'legacy' },
   { pageId: 'automations', path: '/automations', kind: 'legacy' },
   { pageId: 'active-downloads', path: '/active-downloads', kind: 'legacy' },
-  { pageId: 'import', path: '/import', kind: 'legacy' },
+  { pageId: 'import', path: '/import', kind: 'react' },
   { pageId: 'library', path: '/library', kind: 'legacy' },
   { pageId: 'tools', path: '/tools', kind: 'legacy' },
   { pageId: 'artist-detail', path: '/artist-detail', kind: 'legacy' },
@@ -67,7 +67,11 @@ export function getShellRouteByPageId(pageId: ShellPageId): ShellRouteDefinition
 }
 
 export function getShellRouteByPath(pathname: string): ShellRouteDefinition | undefined {
-  return routeByPath.get(normalizeShellPath(pathname) as `/${string}`);
+  const normalized = normalizeShellPath(pathname);
+  const exactRoute = routeByPath.get(normalized as `/${string}`);
+  if (exactRoute) return exactRoute;
+
+  return reactShellRoutes.find((route) => normalized.startsWith(`${route.path}/`));
 }
 
 export function resolveShellPageFromPath(pathname: string): ShellPageId | null {
diff --git a/webui/src/routeTree.gen.ts b/webui/src/routeTree.gen.ts
index addc76fb..7f935df1 100644
--- a/webui/src/routeTree.gen.ts
+++ b/webui/src/routeTree.gen.ts
@@ -12,7 +12,12 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as SplatRouteImport } from './routes/$'
 import { Route as StatsRouteRouteImport } from './routes/stats/route'
 import { Route as IssuesRouteRouteImport } from './routes/issues/route'
+import { Route as ImportRouteRouteImport } from './routes/import/route'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ImportIndexRouteImport } from './routes/import/index'
+import { Route as ImportSinglesRouteImport } from './routes/import/singles'
+import { Route as ImportAutoRouteImport } from './routes/import/auto'
+import { Route as ImportAlbumRouteImport } from './routes/import/album'
 import { Route as ArtistDetailSourceIdRouteImport } from './routes/artist-detail/$source/$id'
 
 const SplatRoute = SplatRouteImport.update({
@@ -30,11 +35,36 @@ const IssuesRouteRoute = IssuesRouteRouteImport.update({
   path: '/issues',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ImportRouteRoute = ImportRouteRouteImport.update({
+  id: '/import',
+  path: '/import',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ImportIndexRoute = ImportIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ImportRouteRoute,
+} as any)
+const ImportSinglesRoute = ImportSinglesRouteImport.update({
+  id: '/singles',
+  path: '/singles',
+  getParentRoute: () => ImportRouteRoute,
+} as any)
+const ImportAutoRoute = ImportAutoRouteImport.update({
+  id: '/auto',
+  path: '/auto',
+  getParentRoute: () => ImportRouteRoute,
+} as any)
+const ImportAlbumRoute = ImportAlbumRouteImport.update({
+  id: '/album',
+  path: '/album',
+  getParentRoute: () => ImportRouteRoute,
+} as any)
 const ArtistDetailSourceIdRoute = ArtistDetailSourceIdRouteImport.update({
   id: '/artist-detail/$source/$id',
   path: '/artist-detail/$source/$id',
@@ -43,9 +73,14 @@ const ArtistDetailSourceIdRoute = ArtistDetailSourceIdRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/import': typeof ImportRouteRouteWithChildren
   '/issues': typeof IssuesRouteRoute
   '/stats': typeof StatsRouteRoute
   '/$': typeof SplatRoute
+  '/import/album': typeof ImportAlbumRoute
+  '/import/auto': typeof ImportAutoRoute
+  '/import/singles': typeof ImportSinglesRoute
+  '/import/': typeof ImportIndexRoute
   '/artist-detail/$source/$id': typeof ArtistDetailSourceIdRoute
 }
 export interface FileRoutesByTo {
@@ -53,32 +88,66 @@ export interface FileRoutesByTo {
   '/issues': typeof IssuesRouteRoute
   '/stats': typeof StatsRouteRoute
   '/$': typeof SplatRoute
+  '/import/album': typeof ImportAlbumRoute
+  '/import/auto': typeof ImportAutoRoute
+  '/import/singles': typeof ImportSinglesRoute
+  '/import': typeof ImportIndexRoute
   '/artist-detail/$source/$id': typeof ArtistDetailSourceIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/import': typeof ImportRouteRouteWithChildren
   '/issues': typeof IssuesRouteRoute
   '/stats': typeof StatsRouteRoute
   '/$': typeof SplatRoute
+  '/import/album': typeof ImportAlbumRoute
+  '/import/auto': typeof ImportAutoRoute
+  '/import/singles': typeof ImportSinglesRoute
+  '/import/': typeof ImportIndexRoute
   '/artist-detail/$source/$id': typeof ArtistDetailSourceIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/issues' | '/stats' | '/$' | '/artist-detail/$source/$id'
+  fullPaths:
+    | '/'
+    | '/import'
+    | '/issues'
+    | '/stats'
+    | '/$'
+    | '/import/album'
+    | '/import/auto'
+    | '/import/singles'
+    | '/import/'
+    | '/artist-detail/$source/$id'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/issues' | '/stats' | '/$' | '/artist-detail/$source/$id'
-  id:
-    | '__root__'
+  to:
     | '/'
     | '/issues'
     | '/stats'
     | '/$'
+    | '/import/album'
+    | '/import/auto'
+    | '/import/singles'
+    | '/import'
+    | '/artist-detail/$source/$id'
+  id:
+    | '__root__'
+    | '/'
+    | '/import'
+    | '/issues'
+    | '/stats'
+    | '/$'
+    | '/import/album'
+    | '/import/auto'
+    | '/import/singles'
+    | '/import/'
     | '/artist-detail/$source/$id'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  ImportRouteRoute: typeof ImportRouteRouteWithChildren
   IssuesRouteRoute: typeof IssuesRouteRoute
   StatsRouteRoute: typeof StatsRouteRoute
   SplatRoute: typeof SplatRoute
@@ -108,6 +177,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IssuesRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/import': {
+      id: '/import'
+      path: '/import'
+      fullPath: '/import'
+      preLoaderRoute: typeof ImportRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -115,6 +191,34 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/import/': {
+      id: '/import/'
+      path: '/'
+      fullPath: '/import/'
+      preLoaderRoute: typeof ImportIndexRouteImport
+      parentRoute: typeof ImportRouteRoute
+    }
+    '/import/singles': {
+      id: '/import/singles'
+      path: '/singles'
+      fullPath: '/import/singles'
+      preLoaderRoute: typeof ImportSinglesRouteImport
+      parentRoute: typeof ImportRouteRoute
+    }
+    '/import/auto': {
+      id: '/import/auto'
+      path: '/auto'
+      fullPath: '/import/auto'
+      preLoaderRoute: typeof ImportAutoRouteImport
+      parentRoute: typeof ImportRouteRoute
+    }
+    '/import/album': {
+      id: '/import/album'
+      path: '/album'
+      fullPath: '/import/album'
+      preLoaderRoute: typeof ImportAlbumRouteImport
+      parentRoute: typeof ImportRouteRoute
+    }
     '/artist-detail/$source/$id': {
       id: '/artist-detail/$source/$id'
       path: '/artist-detail/$source/$id'
@@ -125,8 +229,27 @@ declare module '@tanstack/react-router' {
   }
 }
 
+interface ImportRouteRouteChildren {
+  ImportAlbumRoute: typeof ImportAlbumRoute
+  ImportAutoRoute: typeof ImportAutoRoute
+  ImportSinglesRoute: typeof ImportSinglesRoute
+  ImportIndexRoute: typeof ImportIndexRoute
+}
+
+const ImportRouteRouteChildren: ImportRouteRouteChildren = {
+  ImportAlbumRoute: ImportAlbumRoute,
+  ImportAutoRoute: ImportAutoRoute,
+  ImportSinglesRoute: ImportSinglesRoute,
+  ImportIndexRoute: ImportIndexRoute,
+}
+
+const ImportRouteRouteWithChildren = ImportRouteRoute._addFileChildren(
+  ImportRouteRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  ImportRouteRoute: ImportRouteRouteWithChildren,
   IssuesRouteRoute: IssuesRouteRoute,
   StatsRouteRoute: StatsRouteRoute,
   SplatRoute: SplatRoute,
diff --git a/webui/src/routes/import/-import.api.ts b/webui/src/routes/import/-import.api.ts
new file mode 100644
index 00000000..624d8a36
--- /dev/null
+++ b/webui/src/routes/import/-import.api.ts
@@ -0,0 +1,293 @@
+import { queryOptions, type QueryClient } from '@tanstack/react-query';
+
+import { apiClient, readJson } from '@/app/api-client';
+
+import type {
+  ImportAlbum,
+  ImportAlbumMatch,
+  ImportAlbumMatchPayload,
+  ImportAlbumSearchPayload,
+  ImportAutoImportResultsPayload,
+  ImportAutoImportSettingsPayload,
+  ImportAutoImportStatusPayload,
+  ImportProcessPayload,
+  ImportStagingFilesPayload,
+  ImportStagingGroupsPayload,
+  ImportTrackSearchPayload,
+} from './-import.types';
+
+export const IMPORT_QUERY_KEY = ['import'] as const;
+
+function assertSuccess<T extends { success: boolean; error?: string }>(
+  payload: T,
+  fallback: string,
+): T {
+  if (!payload.success) {
+    throw new Error(payload.error || fallback);
+  }
+  return payload;
+}
+
+export async function fetchImportStagingFiles(): Promise<ImportStagingFilesPayload> {
+  return assertSuccess(
+    await readJson<ImportStagingFilesPayload>(apiClient.get('import/staging/files')),
+    'Failed to load import folder',
+  );
+}
+
+export async function fetchImportStagingGroups(): Promise<ImportStagingGroupsPayload> {
+  return assertSuccess(
+    await readJson<ImportStagingGroupsPayload>(apiClient.get('import/staging/groups')),
+    'Failed to load auto-detected albums',
+  );
+}
+
+export async function fetchImportStagingSuggestions(): Promise<ImportAlbumSearchPayload> {
+  return assertSuccess(
+    await readJson<ImportAlbumSearchPayload>(apiClient.get('import/staging/suggestions')),
+    'Failed to load import suggestions',
+  );
+}
+
+export async function searchImportAlbums(query: string): Promise<ImportAlbumSearchPayload> {
+  return assertSuccess(
+    await readJson<ImportAlbumSearchPayload>(
+      apiClient.get('import/search/albums', {
+        searchParams: {
+          q: query,
+          limit: '12',
+        },
+      }),
+    ),
+    'Album search failed',
+  );
+}
+
+export async function matchImportAlbum(input: {
+  albumId: string;
+  source?: string | null;
+  albumName?: string | null;
+  albumArtist?: string | null;
+  filePaths?: string[] | null;
+}): Promise<ImportAlbumMatchPayload> {
+  return assertSuccess(
+    await readJson<ImportAlbumMatchPayload>(
+      apiClient.post('import/album/match', {
+        json: {
+          album_id: input.albumId,
+          source: input.source || '',
+          album_name: input.albumName || '',
+          album_artist: input.albumArtist || '',
+          ...(input.filePaths?.length ? { file_paths: input.filePaths } : {}),
+        },
+      }),
+    ),
+    'Failed to match album',
+  );
+}
+
+export async function processImportAlbumTrack(input: {
+  album: ImportAlbum;
+  match: ImportAlbumMatch;
+}): Promise<ImportProcessPayload> {
+  return assertSuccess(
+    await readJson<ImportProcessPayload>(
+      apiClient.post('import/album/process', {
+        json: {
+          album: input.album,
+          matches: [input.match],
+        },
+      }),
+    ),
+    'Failed to process album track',
+  );
+}
+
+export async function searchImportTracks(query: string): Promise<ImportTrackSearchPayload> {
+  return assertSuccess(
+    await readJson<ImportTrackSearchPayload>(
+      apiClient.get('import/search/tracks', {
+        searchParams: {
+          q: query,
+          limit: '6',
+        },
+      }),
+    ),
+    'Track search failed',
+  );
+}
+
+export async function processImportSingleFile(file: unknown): Promise<ImportProcessPayload> {
+  return assertSuccess(
+    await readJson<ImportProcessPayload>(
+      apiClient.post('import/singles/process', {
+        json: {
+          files: [file],
+        },
+      }),
+    ),
+    'Failed to process single',
+  );
+}
+
+export async function fetchAutoImportStatus(): Promise<ImportAutoImportStatusPayload> {
+  return assertSuccess(
+    await readJson<ImportAutoImportStatusPayload>(apiClient.get('auto-import/status')),
+    'Failed to load auto-import status',
+  );
+}
+
+export async function fetchAutoImportSettings(): Promise<ImportAutoImportSettingsPayload> {
+  return assertSuccess(
+    await readJson<ImportAutoImportSettingsPayload>(apiClient.get('auto-import/settings')),
+    'Failed to load auto-import settings',
+  );
+}
+
+export async function saveAutoImportSettings(input: {
+  confidenceThreshold: number;
+  scanInterval: number;
+}): Promise<void> {
+  assertSuccess(
+    await readJson<{ success: boolean; error?: string }>(
+      apiClient.post('auto-import/settings', {
+        json: {
+          confidence_threshold: input.confidenceThreshold,
+          scan_interval: input.scanInterval,
+        },
+      }),
+    ),
+    'Failed to save auto-import settings',
+  );
+}
+
+export async function fetchAutoImportResults(): Promise<ImportAutoImportResultsPayload> {
+  return assertSuccess(
+    await readJson<ImportAutoImportResultsPayload>(
+      apiClient.get('auto-import/results', {
+        searchParams: {
+          limit: '100',
+        },
+      }),
+    ),
+    'Failed to load auto-import results',
+  );
+}
+
+export async function toggleAutoImport(enabled: boolean): Promise<void> {
+  assertSuccess(
+    await readJson<{ success: boolean; error?: string }>(
+      apiClient.post('auto-import/toggle', {
+        json: { enabled },
+      }),
+    ),
+    'Failed to toggle auto-import',
+  );
+}
+
+export async function triggerAutoImportScan(): Promise<void> {
+  assertSuccess(
+    await readJson<{ success: boolean; error?: string }>(apiClient.post('auto-import/scan-now')),
+    'Failed to trigger scan',
+  );
+}
+
+export async function approveAutoImportResult(id: number): Promise<void> {
+  assertSuccess(
+    await readJson<{ success: boolean; error?: string }>(
+      apiClient.post(`auto-import/approve/${id}`),
+    ),
+    'Failed to approve import',
+  );
+}
+
+export async function rejectAutoImportResult(id: number): Promise<void> {
+  assertSuccess(
+    await readJson<{ success: boolean; error?: string }>(
+      apiClient.post(`auto-import/reject/${id}`),
+    ),
+    'Failed to dismiss import',
+  );
+}
+
+export async function approveAllAutoImportResults(): Promise<number> {
+  const payload = assertSuccess(
+    await readJson<{ success: boolean; count?: number; error?: string }>(
+      apiClient.post('auto-import/approve-all'),
+    ),
+    'Failed to approve imports',
+  );
+  return payload.count ?? 0;
+}
+
+export async function clearCompletedAutoImportResults(): Promise<number> {
+  const payload = assertSuccess(
+    await readJson<{ success: boolean; count?: number; error?: string }>(
+      apiClient.post('auto-import/clear-completed'),
+    ),
+    'Failed to clear import history',
+  );
+  return payload.count ?? 0;
+}
+
+export function importStagingFilesQueryOptions() {
+  return queryOptions({
+    queryKey: [...IMPORT_QUERY_KEY, 'staging-files'],
+    queryFn: fetchImportStagingFiles,
+  });
+}
+
+export function importStagingGroupsQueryOptions() {
+  return queryOptions({
+    queryKey: [...IMPORT_QUERY_KEY, 'staging-groups'],
+    queryFn: fetchImportStagingGroups,
+  });
+}
+
+export function importStagingSuggestionsQueryOptions() {
+  return queryOptions({
+    queryKey: [...IMPORT_QUERY_KEY, 'staging-suggestions'],
+    queryFn: fetchImportStagingSuggestions,
+  });
+}
+
+export function autoImportStatusQueryOptions() {
+  return queryOptions({
+    queryKey: [...IMPORT_QUERY_KEY, 'auto-import-status'],
+    queryFn: fetchAutoImportStatus,
+  });
+}
+
+export function autoImportSettingsQueryOptions() {
+  return queryOptions({
+    queryKey: [...IMPORT_QUERY_KEY, 'auto-import-settings'],
+    queryFn: fetchAutoImportSettings,
+  });
+}
+
+export function autoImportResultsQueryOptions() {
+  return queryOptions({
+    queryKey: [...IMPORT_QUERY_KEY, 'auto-import-results'],
+    queryFn: fetchAutoImportResults,
+  });
+}
+
+export function invalidateImportQueries(queryClient: QueryClient) {
+  return queryClient.invalidateQueries({ queryKey: IMPORT_QUERY_KEY });
+}
+
+export function invalidateImportStagingQueries(queryClient: QueryClient) {
+  return Promise.all([
+    queryClient.invalidateQueries({ queryKey: [...IMPORT_QUERY_KEY, 'staging-files'] }),
+    queryClient.invalidateQueries({ queryKey: [...IMPORT_QUERY_KEY, 'staging-groups'] }),
+    queryClient.invalidateQueries({ queryKey: [...IMPORT_QUERY_KEY, 'staging-suggestions'] }),
+  ]);
+}
+
+export function invalidateAutoImportQueries(queryClient: QueryClient) {
+  return Promise.all([
+    queryClient.invalidateQueries({ queryKey: [...IMPORT_QUERY_KEY, 'auto-import-status'] }),
+    queryClient.invalidateQueries({ queryKey: [...IMPORT_QUERY_KEY, 'auto-import-settings'] }),
+    queryClient.invalidateQueries({ queryKey: [...IMPORT_QUERY_KEY, 'auto-import-results'] }),
+  ]);
+}
diff --git a/webui/src/routes/import/-import.helpers.ts b/webui/src/routes/import/-import.helpers.ts
new file mode 100644
index 00000000..0805b5d9
--- /dev/null
+++ b/webui/src/routes/import/-import.helpers.ts
@@ -0,0 +1,286 @@
+import type {
+  ImportAlbumMatch,
+  ImportAutoFilter,
+  ImportAutoImportActiveItem,
+  ImportAutoImportMatchData,
+  ImportAutoImportResult,
+  ImportAutoImportStatusPayload,
+  ImportQueueEntry,
+  ImportStagingFile,
+} from './-import.types';
+
+export const IMPORT_PLACEHOLDER_IMAGE = '/static/placeholder.png';
+
+export function formatImportBytes(bytes: number): string {
+  if (bytes > 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`;
+  if (bytes > 1_048_576) return `${(bytes / 1_048_576).toFixed(0)} MB`;
+  return `${(bytes / 1024).toFixed(0)} KB`;
+}
+
+export function getStagingStatsText(files: ImportStagingFile[]): string {
+  const totalSize = files.reduce((sum, file) => sum + (file.size || 0), 0);
+  const fileLabel = `${files.length} file${files.length === 1 ? '' : 's'}`;
+  return totalSize ? `${fileLabel} - ${formatImportBytes(totalSize)}` : fileLabel;
+}
+
+export function getTrackDisplayInfo(match: ImportAlbumMatch, index: number) {
+  const track = match.track || match.spotify_track || {};
+  const rawTrackNumber = track.track_number ?? track.trackNumber ?? null;
+  const trackNumber =
+    rawTrackNumber === null || rawTrackNumber === undefined || rawTrackNumber === ''
+      ? null
+      : String(rawTrackNumber).split('/')[0]?.trim() || null;
+
+  return {
+    track,
+    name: track.name || track.title || `Track ${index + 1}`,
+    trackNumber,
+    displayTrackNumber: trackNumber || String(index + 1),
+  };
+}
+
+export function getEffectiveAlbumMatches(
+  matches: ImportAlbumMatch[],
+  stagingFiles: ImportStagingFile[],
+  overrides: Record<number, number>,
+): ImportAlbumMatch[] {
+  return matches.flatMap((match, index) => {
+    if (Object.hasOwn(overrides, index)) {
+      const override = overrides[index];
+      if (override === -1) return [];
+      const stagingFile = stagingFiles[override];
+      return stagingFile ? [{ ...match, staging_file: stagingFile, confidence: 1 }] : [];
+    }
+    return match.staging_file ? [match] : [];
+  });
+}
+
+export function getDisplayedMatchFile(
+  match: ImportAlbumMatch,
+  index: number,
+  stagingFiles: ImportStagingFile[],
+  overrides: Record<number, number>,
+): { file: ImportStagingFile | null; confidence: number; isOverride: boolean } {
+  if (Object.hasOwn(overrides, index)) {
+    const override = overrides[index];
+    if (override === -1) return { file: null, confidence: match.confidence, isOverride: false };
+    return {
+      file: stagingFiles[override] ?? null,
+      confidence: 1,
+      isOverride: true,
+    };
+  }
+
+  if (!match.staging_file) {
+    return { file: null, confidence: match.confidence, isOverride: false };
+  }
+
+  const autoFileName = match.staging_file.filename;
+  const reassigned = Object.entries(overrides).some(([trackIndex, stagingFileIndex]) => {
+    const file = stagingFiles[stagingFileIndex];
+    return file && file.filename === autoFileName && Number(trackIndex) !== index;
+  });
+
+  return {
+    file: reassigned ? null : match.staging_file,
+    confidence: match.confidence,
+    isOverride: false,
+  };
+}
+
+export function getUnmatchedStagingFiles(
+  matches: ImportAlbumMatch[],
+  stagingFiles: ImportStagingFile[],
+  overrides: Record<number, number>,
+): Array<{ file: ImportStagingFile; index: number }> {
+  return stagingFiles.flatMap((file, index) => {
+    if (Object.values(overrides).includes(index)) return [];
+
+    const autoUsed = matches.some((match, matchIndex) => {
+      if (Object.hasOwn(overrides, matchIndex)) return false;
+      return match.staging_file?.filename === file.filename;
+    });
+
+    return autoUsed ? [] : [{ file, index }];
+  });
+}
+
+export function getAutoImportCounts(results: ImportAutoImportResult[]) {
+  return {
+    imported: results.filter(
+      (result) => result.status === 'completed' || result.status === 'approved',
+    ).length,
+    review: results.filter((result) => result.status === 'pending_review').length,
+    failed: results.filter(
+      (result) => result.status === 'failed' || result.status === 'needs_identification',
+    ).length,
+  };
+}
+
+export function filterAutoImportResults(
+  results: ImportAutoImportResult[],
+  filter: ImportAutoFilter,
+): ImportAutoImportResult[] {
+  if (filter === 'pending') return results.filter((result) => result.status === 'pending_review');
+  if (filter === 'imported') {
+    return results.filter(
+      (result) => result.status === 'completed' || result.status === 'approved',
+    );
+  }
+  if (filter === 'failed') {
+    return results.filter(
+      (result) => result.status === 'failed' || result.status === 'needs_identification',
+    );
+  }
+  return results;
+}
+
+export function getAutoImportStatusText(status: ImportAutoImportStatusPayload | undefined): string {
+  if (!status) return 'Loading...';
+  if (status.paused) return 'Paused';
+  if (status.current_status === 'processing') return 'Processing...';
+  if (status.current_status === 'scanning') return 'Scanning...';
+  if (!status.running) return 'Disabled';
+
+  if (status.last_scan_time) {
+    const lastScan = new Date(status.last_scan_time);
+    const diffSeconds = Math.floor((Date.now() - lastScan.getTime()) / 1000);
+    if (Number.isFinite(diffSeconds) && diffSeconds >= 0 && diffSeconds < 60) {
+      return `Watching (scanned ${diffSeconds}s ago)`;
+    }
+    if (Number.isFinite(diffSeconds) && diffSeconds < 3600) {
+      return `Watching (scanned ${Math.floor(diffSeconds / 60)}m ago)`;
+    }
+  }
+
+  return 'Watching';
+}
+
+export function getAutoImportStatusClass(
+  status: ImportAutoImportStatusPayload | undefined,
+): string {
+  if (!status?.running) return 'disabled';
+  if (status.current_status === 'scanning') return 'scanning';
+  if (status.current_status === 'processing') return 'processing';
+  return 'active';
+}
+
+export function getActiveImportLines(status: ImportAutoImportStatusPayload | undefined): string[] {
+  const active = Array.isArray(status?.active_imports) ? status.active_imports : [];
+  if (active.length > 0) return active.map(getActiveImportLine);
+  if (status?.current_status === 'scanning') {
+    return [`Scanning... (${status.stats?.scanned || 0} processed)`];
+  }
+  return [];
+}
+
+function getActiveImportLine(item: ImportAutoImportActiveItem): string {
+  const folder = item.folder_name || '...';
+  const trackIndex = item.track_index || 0;
+  const trackTotal = item.track_total || 0;
+  const trackName = item.track_name || '';
+  if (item.status === 'processing' && trackTotal > 0) {
+    return `${folder} - track ${trackIndex}/${trackTotal}: ${trackName}`;
+  }
+  if (item.status === 'matching') return `${folder} - matching tracks...`;
+  if (item.status === 'identifying') return `${folder} - identifying...`;
+  return `${folder} - queued`;
+}
+
+export function parseAutoImportMatchData(
+  matchData: ImportAutoImportResult['match_data'],
+): ImportAutoImportMatchData {
+  if (!matchData) return {};
+  if (typeof matchData === 'object') return matchData;
+  try {
+    const parsed = JSON.parse(matchData) as ImportAutoImportMatchData;
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+export function getAutoImportTimeAgo(createdAt: string | null | undefined): string {
+  if (!createdAt) return '';
+  const created = new Date(createdAt);
+  const diffMinutes = Math.floor((Date.now() - created.getTime()) / 60_000);
+  if (!Number.isFinite(diffMinutes) || diffMinutes < 0) return '';
+  if (diffMinutes < 1) return 'just now';
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  if (diffMinutes < 1440) return `${Math.floor(diffMinutes / 60)}h ago`;
+  return `${Math.floor(diffMinutes / 1440)}d ago`;
+}
+
+export function getConfidenceClass(confidencePercent: number): 'high' | 'medium' | 'low' {
+  if (confidencePercent >= 90) return 'high';
+  if (confidencePercent >= 70) return 'medium';
+  return 'low';
+}
+
+export function getAutoImportStatusMeta(status: string): {
+  label: string;
+  icon: string;
+  className: 'completed' | 'review' | 'failed' | 'processing' | 'neutral';
+} {
+  const labels: Record<string, string> = {
+    completed: 'Imported',
+    pending_review: 'Needs Review',
+    needs_identification: 'Unidentified',
+    failed: 'Failed',
+    scanning: 'Scanning...',
+    matched: 'Matched',
+    rejected: 'Dismissed',
+    approved: 'Approved',
+    processing: 'Processing',
+  };
+
+  const icons: Record<string, string> = {
+    completed: 'OK',
+    pending_review: '!',
+    needs_identification: 'x',
+    failed: 'x',
+    scanning: '~',
+    matched: 'OK',
+    rejected: 'x',
+    approved: 'OK',
+    processing: '~',
+  };
+
+  return {
+    label: labels[status] || status,
+    icon: icons[status] || '',
+    className:
+      status === 'completed'
+        ? 'completed'
+        : status === 'pending_review'
+          ? 'review'
+          : status === 'failed' || status === 'needs_identification'
+            ? 'failed'
+            : status === 'processing'
+              ? 'processing'
+              : 'neutral',
+  };
+}
+
+export function getQueueProgressPercent(entry: ImportQueueEntry): number {
+  if (entry.status === 'done' || entry.status === 'error') return 100;
+  if (entry.total <= 0) return 0;
+  return Math.round((entry.processed / entry.total) * 100);
+}
+
+export function getQueueStatusText(entry: ImportQueueEntry): string {
+  if (entry.status === 'running') return `${entry.processed}/${entry.total}`;
+  if (entry.status === 'done') {
+    return entry.errors.length > 0
+      ? `${entry.processed}/${entry.total} (${entry.errors.length} err)`
+      : 'Done';
+  }
+  return 'Failed';
+}
+
+export function formatDuration(durationMs: number | null | undefined): string {
+  if (!durationMs) return '';
+  const minutes = Math.floor(durationMs / 60_000);
+  const seconds = String(Math.floor((durationMs % 60_000) / 1000)).padStart(2, '0');
+  return `${minutes}:${seconds}`;
+}
diff --git a/webui/src/routes/import/-import.store.ts b/webui/src/routes/import/-import.store.ts
new file mode 100644
index 00000000..88a09e2f
--- /dev/null
+++ b/webui/src/routes/import/-import.store.ts
@@ -0,0 +1,236 @@
+import { create } from 'zustand';
+import { combine } from 'zustand/middleware';
+import { useShallow } from 'zustand/react/shallow';
+
+import type {
+  ImportAlbumMatchPayload,
+  ImportAlbumResult,
+  ImportQueueEntry,
+  ImportQueueJob,
+  ImportTrackResult,
+} from './-import.types';
+
+export type SingleSearchState = {
+  query: string;
+  loading: boolean;
+  error: string | null;
+  results: ImportTrackResult[];
+};
+
+type StateUpdater<T> = T | ((current: T) => T);
+
+function resolveState<T>(current: T, updater: StateUpdater<T>) {
+  return typeof updater === 'function' ? (updater as (value: T) => T)(current) : updater;
+}
+
+function createInitialWorkflowState() {
+  return {
+    queue: [] as ImportQueueEntry[],
+    nextQueueId: 0,
+    albumQuery: '',
+    albumResults: null as ImportAlbumResult[] | null,
+    albumSearchError: null as string | null,
+    albumSearchLoading: false,
+    autoGroupFilePaths: null as string[] | null,
+    selectedAlbum: null as ImportAlbumResult | null,
+    albumMatch: null as ImportAlbumMatchPayload | null,
+    albumMatchError: null as string | null,
+    albumMatchLoading: false,
+    matchOverrides: {} as Record<number, number>,
+    selectedSingles: new Set<number>(),
+    singlesManualMatches: {} as Record<number, ImportTrackResult>,
+    openSingleSearch: null as number | null,
+    singleSearches: {} as Record<number, SingleSearchState>,
+  };
+}
+
+export const useImportWorkflowStore = create(
+  combine(createInitialWorkflowState(), (set, get) => ({
+    clearFinishedJobs: () => {
+      set((state) => ({ queue: state.queue.filter((entry) => entry.status === 'running') }));
+    },
+    enqueueQueueJob: (job: ImportQueueJob) => {
+      const id = get().nextQueueId + 1;
+      const entry: ImportQueueEntry = {
+        id,
+        type: job.type,
+        label: job.label,
+        sublabel: job.sublabel,
+        imageUrl: job.imageUrl,
+        status: 'running',
+        processed: 0,
+        total: job.items.length,
+        errors: [],
+      };
+
+      set((state) => ({
+        nextQueueId: id,
+        queue: [...state.queue, entry],
+      }));
+      return id;
+    },
+    updateQueueEntry: (entryId: number, patch: Partial<ImportQueueEntry>) => {
+      set((state) => ({
+        queue: state.queue.map((entry) => (entry.id === entryId ? { ...entry, ...patch } : entry)),
+      }));
+    },
+    resetAlbumSearch: () => {
+      set({
+        albumQuery: '',
+        albumResults: null,
+        albumSearchError: null,
+        albumSearchLoading: false,
+        autoGroupFilePaths: null,
+        selectedAlbum: null,
+        albumMatch: null,
+        albumMatchError: null,
+        albumMatchLoading: false,
+        matchOverrides: {},
+      });
+    },
+    setAlbumQuery: (albumQuery: string) => set({ albumQuery }),
+    setAlbumResults: (albumResults: ImportAlbumResult[] | null) => set({ albumResults }),
+    setAlbumSearchError: (albumSearchError: string | null) => set({ albumSearchError }),
+    setAlbumSearchLoading: (albumSearchLoading: boolean) => set({ albumSearchLoading }),
+    setAlbumSearchContext: (albumQuery: string, autoGroupFilePaths: string[] | null) => {
+      set({
+        albumQuery,
+        albumSearchLoading: true,
+        albumSearchError: null,
+        albumResults: null,
+        selectedAlbum: null,
+        albumMatch: null,
+        autoGroupFilePaths,
+      });
+    },
+    setSelectedAlbum: (selectedAlbum: ImportAlbumResult | null) => set({ selectedAlbum }),
+    setAlbumMatch: (albumMatch: ImportAlbumMatchPayload | null) => set({ albumMatch }),
+    setAlbumMatchError: (albumMatchError: string | null) => set({ albumMatchError }),
+    setAlbumMatchLoading: (albumMatchLoading: boolean) => set({ albumMatchLoading }),
+    clearAutoGroupFilePaths: () => set({ autoGroupFilePaths: null }),
+    setMatchOverrides: (updater: StateUpdater<Record<number, number>>) => {
+      set((state) => ({ matchOverrides: resolveState(state.matchOverrides, updater) }));
+    },
+    toggleSingle: (index: number) => {
+      set((state) => {
+        const selectedSingles = new Set(state.selectedSingles);
+        if (selectedSingles.has(index)) selectedSingles.delete(index);
+        else selectedSingles.add(index);
+        return { selectedSingles };
+      });
+    },
+    toggleAllSingles: (fileCount: number) => {
+      set((state) => ({
+        selectedSingles:
+          state.selectedSingles.size === fileCount
+            ? new Set<number>()
+            : new Set(Array.from({ length: fileCount }, (_, index) => index)),
+      }));
+    },
+    clearSinglesSelection: () => {
+      set({
+        selectedSingles: new Set<number>(),
+        singlesManualMatches: {},
+      });
+    },
+    setOpenSingleSearch: (openSingleSearch: number | null) => set({ openSingleSearch }),
+    ensureSingleSearch: (index: number, query: string) => {
+      set((state) => ({
+        singleSearches: {
+          ...state.singleSearches,
+          [index]: state.singleSearches[index] ?? {
+            query,
+            loading: false,
+            error: null,
+            results: [],
+          },
+        },
+      }));
+    },
+    setSingleSearch: (index: number, updater: StateUpdater<SingleSearchState>) => {
+      set((state) => {
+        const current = state.singleSearches[index] ?? {
+          query: '',
+          loading: false,
+          error: null,
+          results: [],
+        };
+        return {
+          singleSearches: {
+            ...state.singleSearches,
+            [index]: resolveState(current, updater),
+          },
+        };
+      });
+    },
+    selectSingleMatch: (fileIndex: number, track: ImportTrackResult) => {
+      set((state) => ({
+        singlesManualMatches: { ...state.singlesManualMatches, [fileIndex]: track },
+        selectedSingles: new Set(state.selectedSingles).add(fileIndex),
+        openSingleSearch: null,
+      }));
+    },
+  })),
+);
+
+export function resetImportWorkflowStore() {
+  useImportWorkflowStore.setState(createInitialWorkflowState());
+}
+
+export function useImportQueueWorkflow() {
+  return useImportWorkflowStore(
+    useShallow((state) => ({
+      clearFinishedJobs: state.clearFinishedJobs,
+      enqueueQueueJob: state.enqueueQueueJob,
+      queue: state.queue,
+      updateQueueEntry: state.updateQueueEntry,
+    })),
+  );
+}
+
+export function useAlbumImportWorkflow() {
+  return useImportWorkflowStore(
+    useShallow((state) => ({
+      albumMatch: state.albumMatch,
+      albumMatchError: state.albumMatchError,
+      albumMatchLoading: state.albumMatchLoading,
+      albumQuery: state.albumQuery,
+      albumResults: state.albumResults,
+      albumSearchError: state.albumSearchError,
+      albumSearchLoading: state.albumSearchLoading,
+      autoGroupFilePaths: state.autoGroupFilePaths,
+      clearAutoGroupFilePaths: state.clearAutoGroupFilePaths,
+      matchOverrides: state.matchOverrides,
+      resetAlbumWorkflow: state.resetAlbumSearch,
+      selectedAlbum: state.selectedAlbum,
+      setAlbumMatch: state.setAlbumMatch,
+      setAlbumMatchError: state.setAlbumMatchError,
+      setAlbumMatchLoading: state.setAlbumMatchLoading,
+      setAlbumQuery: state.setAlbumQuery,
+      setAlbumResults: state.setAlbumResults,
+      setAlbumSearchContext: state.setAlbumSearchContext,
+      setAlbumSearchError: state.setAlbumSearchError,
+      setAlbumSearchLoading: state.setAlbumSearchLoading,
+      setMatchOverrides: state.setMatchOverrides,
+      setSelectedAlbum: state.setSelectedAlbum,
+    })),
+  );
+}
+
+export function useSinglesImportWorkflow() {
+  return useImportWorkflowStore(
+    useShallow((state) => ({
+      clearSinglesSelection: state.clearSinglesSelection,
+      ensureSingleSearch: state.ensureSingleSearch,
+      openSingleSearch: state.openSingleSearch,
+      selectedSingles: state.selectedSingles,
+      selectSingleMatchInStore: state.selectSingleMatch,
+      setOpenSingleSearch: state.setOpenSingleSearch,
+      setSingleSearch: state.setSingleSearch,
+      singleSearches: state.singleSearches,
+      singlesManualMatches: state.singlesManualMatches,
+      toggleAllSingles: state.toggleAllSingles,
+      toggleSingleInStore: state.toggleSingle,
+    })),
+  );
+}
diff --git a/webui/src/routes/import/-import.types.ts b/webui/src/routes/import/-import.types.ts
new file mode 100644
index 00000000..9767ff24
--- /dev/null
+++ b/webui/src/routes/import/-import.types.ts
@@ -0,0 +1,226 @@
+import { z } from 'zod';
+
+export const IMPORT_AUTO_FILTER_VALUES = ['all', 'pending', 'imported', 'failed'] as const;
+export type ImportAutoFilter = (typeof IMPORT_AUTO_FILTER_VALUES)[number];
+
+export const importAutoSearchSchema = z.object({
+  autoFilter: z.enum(IMPORT_AUTO_FILTER_VALUES).default('all').catch('all'),
+});
+
+export type ImportAutoSearch = z.infer<typeof importAutoSearchSchema>;
+
+export interface ImportStagingFile {
+  filename: string;
+  rel_path?: string;
+  full_path: string;
+  title?: string | null;
+  artist?: string | null;
+  album?: string | null;
+  track_number?: string | number | null;
+  disc_number?: string | number | null;
+  extension?: string | null;
+  size?: number | null;
+  manual_match?: ImportTrackResult;
+}
+
+export interface ImportStagingFilesPayload {
+  success: boolean;
+  files?: ImportStagingFile[];
+  staging_path?: string;
+  error?: string;
+}
+
+export interface ImportStagingGroup {
+  album: string;
+  artist: string;
+  file_count: number;
+  files?: Array<{
+    filename: string;
+    full_path: string;
+    title?: string | null;
+    track_number?: string | number | null;
+  }>;
+  file_paths: string[];
+}
+
+export interface ImportStagingGroupsPayload {
+  success: boolean;
+  groups?: ImportStagingGroup[];
+  error?: string;
+}
+
+export interface ImportAlbumResult {
+  id: string;
+  name: string;
+  artist: string;
+  source?: string | null;
+  image_url?: string | null;
+  total_tracks?: number | null;
+  release_date?: string | null;
+}
+
+export interface ImportAlbumSearchPayload {
+  success: boolean;
+  albums?: ImportAlbumResult[];
+  suggestions?: ImportAlbumResult[];
+  ready?: boolean;
+  error?: string;
+}
+
+export interface ImportTrackResult {
+  id: string;
+  name: string;
+  artist: string;
+  album?: string | null;
+  source?: string | null;
+  image_url?: string | null;
+  duration_ms?: number | null;
+}
+
+export interface ImportTrackSearchPayload {
+  success: boolean;
+  tracks?: ImportTrackResult[];
+  error?: string;
+}
+
+export interface ImportAlbum {
+  id?: string | number | null;
+  name: string;
+  artist: string;
+  source?: string | null;
+  image_url?: string | null;
+  total_tracks?: number | null;
+  release_date?: string | null;
+}
+
+export interface ImportAlbumTrack {
+  id?: string | number | null;
+  name?: string | null;
+  title?: string | null;
+  track_number?: string | number | null;
+  trackNumber?: string | number | null;
+  disc_number?: number | null;
+}
+
+export interface ImportAlbumMatch {
+  track?: ImportAlbumTrack | null;
+  spotify_track?: ImportAlbumTrack | null;
+  staging_file?: ImportStagingFile | null;
+  confidence: number;
+}
+
+export interface ImportAlbumMatchPayload {
+  success: boolean;
+  album?: ImportAlbum;
+  matches?: ImportAlbumMatch[];
+  error?: string;
+}
+
+export interface ImportProcessPayload {
+  success: boolean;
+  processed?: number;
+  total?: number;
+  errors?: string[];
+  error?: string;
+}
+
+export interface ImportAutoImportActiveItem {
+  folder_hash?: string | null;
+  folder_name?: string | null;
+  status?: string | null;
+  track_index?: number | null;
+  track_total?: number | null;
+  track_name?: string | null;
+}
+
+export interface ImportAutoImportStatusPayload {
+  success: boolean;
+  running?: boolean;
+  paused?: boolean;
+  current_status?: string | null;
+  last_scan_time?: string | null;
+  active_imports?: ImportAutoImportActiveItem[];
+  stats?: {
+    scanned?: number;
+    auto_processed?: number;
+    pending_review?: number;
+    failed?: number;
+  };
+  error?: string;
+}
+
+export interface ImportAutoImportSettingsPayload {
+  success: boolean;
+  enabled?: boolean;
+  scan_interval?: number;
+  confidence_threshold?: number;
+  auto_process?: boolean;
+  error?: string;
+}
+
+export interface ImportAutoImportMatchData {
+  matched_count?: number;
+  total_tracks?: number;
+  matches?: Array<{
+    track_name?: string | null;
+    track?: { name?: string | null };
+    file?: string | null;
+    confidence?: number | null;
+  }>;
+}
+
+export interface ImportAutoImportResult {
+  id: number;
+  status: string;
+  folder_hash?: string | null;
+  folder_name: string;
+  album_name?: string | null;
+  artist_name?: string | null;
+  image_url?: string | null;
+  confidence?: number | null;
+  total_files?: number | null;
+  identification_method?: string | null;
+  match_data?: string | ImportAutoImportMatchData | null;
+  error_message?: string | null;
+  created_at?: string | null;
+}
+
+export interface ImportAutoImportResultsPayload {
+  success: boolean;
+  results?: ImportAutoImportResult[];
+  error?: string;
+}
+
+export type ImportQueueStatus = 'running' | 'done' | 'error';
+export type ImportQueueJobType = 'album' | 'singles';
+
+export interface ImportQueueEntry {
+  id: number;
+  type: ImportQueueJobType;
+  label: string;
+  sublabel: string;
+  imageUrl?: string | null;
+  status: ImportQueueStatus;
+  processed: number;
+  total: number;
+  errors: string[];
+}
+
+export interface ImportAlbumQueueJob {
+  type: 'album';
+  label: string;
+  sublabel: string;
+  imageUrl?: string | null;
+  items: ImportAlbumMatch[];
+  albumData: ImportAlbum;
+}
+
+export interface ImportSinglesQueueJob {
+  type: 'singles';
+  label: string;
+  sublabel: string;
+  imageUrl?: string | null;
+  items: ImportStagingFile[];
+}
+
+export type ImportQueueJob = ImportAlbumQueueJob | ImportSinglesQueueJob;
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
new file mode 100644
index 00000000..2750a08b
--- /dev/null
+++ b/webui/src/routes/import/-route.test.tsx
@@ -0,0 +1,272 @@
+import { createMemoryHistory } from '@tanstack/react-router';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { ShellBridge, ShellPageId } from '@/platform/shell/bridge';
+
+import { createAppQueryClient } from '@/app/query-client';
+import { AppRouterProvider, createAppRouter } from '@/app/router';
+
+import { resetImportWorkflowStore } from './-import.store';
+
+function createResponse(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+function createShellBridge(overrides: Partial<ShellBridge> = {}): ShellBridge {
+  return {
+    getCurrentProfileContext: vi.fn(() => ({ profileId: 2, isAdmin: true })),
+    isPageAllowed: vi.fn(() => true),
+    getProfileHomePage: vi.fn<() => ShellPageId>(() => 'discover'),
+    resolveLegacyPath: vi.fn<(pathname: string) => ShellPageId | null>(() => 'search'),
+    setActivePageChrome: vi.fn(),
+    activateLegacyPath: vi.fn(),
+    showReactHost: vi.fn(),
+    navigateToArtistDetail: vi.fn(),
+    playLibraryTrack: vi.fn(),
+    startStream: vi.fn(),
+    showLoadingOverlay: vi.fn(),
+    hideLoadingOverlay: vi.fn(),
+    ...overrides,
+  };
+}
+
+function renderImportRoute(initialEntries = ['/import']) {
+  const queryClient = createAppQueryClient();
+  const history = createMemoryHistory({ initialEntries });
+  const router = createAppRouter({ history, queryClient });
+
+  return {
+    history,
+    router,
+    ...render(<AppRouterProvider router={router} queryClient={queryClient} />),
+  };
+}
+
+function getFetchUrls() {
+  return vi
+    .mocked(fetch)
+    .mock.calls.map(([input]) => (input instanceof Request ? input.url : String(input)));
+}
+
+describe('import route', () => {
+  let albumMatchBodies: Record<string, unknown>[];
+
+  beforeEach(() => {
+    albumMatchBodies = [];
+    resetImportWorkflowStore();
+    window.SoulSyncWebShellBridge = createShellBridge();
+    window.showToast = vi.fn();
+    window.showConfirmDialog = vi.fn(async () => true);
+
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = input instanceof Request ? input.url : String(input);
+
+        if (url.includes('/api/import/staging/files')) {
+          return createResponse({
+            success: true,
+            staging_path: '/music/Staging',
+            files: [
+              {
+                filename: '01-track.flac',
+                rel_path: 'Album/01-track.flac',
+                full_path: '/music/Staging/Album/01-track.flac',
+                title: 'Track One',
+                artist: 'Artist A',
+                album: 'Album A',
+                extension: '.flac',
+              },
+            ],
+          });
+        }
+
+        if (url.includes('/api/import/staging/groups')) {
+          return createResponse({
+            success: true,
+            groups: [
+              {
+                album: 'Album A',
+                artist: 'Artist A',
+                file_count: 2,
+                file_paths: ['/music/Staging/Album/01-track.flac'],
+              },
+            ],
+          });
+        }
+
+        if (url.includes('/api/import/staging/suggestions')) {
+          return createResponse({
+            success: true,
+            ready: true,
+            suggestions: [
+              {
+                id: 'album-1',
+                name: 'Album A',
+                artist: 'Artist A',
+                source: 'deezer',
+                total_tracks: 1,
+                release_date: '2026-01-01',
+              },
+            ],
+          });
+        }
+
+        if (url.includes('/api/import/search/albums')) {
+          return createResponse({
+            success: true,
+            albums: [
+              {
+                id: 'album-1',
+                name: 'Album A',
+                artist: 'Artist A',
+                source: 'deezer',
+                total_tracks: 1,
+                release_date: '2026-01-01',
+              },
+            ],
+          });
+        }
+
+        if (url.includes('/api/import/album/match')) {
+          const body =
+            input instanceof Request
+              ? ((await input.clone().json()) as Record<string, unknown>)
+              : (JSON.parse(typeof init?.body === 'string' ? init.body : '{}') as Record<
+                  string,
+                  unknown
+                >);
+          albumMatchBodies.push(body);
+          return createResponse({
+            success: true,
+            received: body,
+            album: {
+              id: 'album-1',
+              name: 'Album A',
+              artist: 'Artist A',
+              source: 'deezer',
+              total_tracks: 1,
+              release_date: '2026-01-01',
+            },
+            matches: [
+              {
+                track: { name: 'Track One', track_number: 1 },
+                staging_file: {
+                  filename: '01-track.flac',
+                  full_path: '/music/Staging/Album/01-track.flac',
+                },
+                confidence: 0.95,
+              },
+            ],
+          });
+        }
+
+        if (url.includes('/api/auto-import/status')) {
+          return createResponse({
+            success: true,
+            running: true,
+            current_status: 'idle',
+            active_imports: [],
+          });
+        }
+
+        if (url.includes('/api/auto-import/settings')) {
+          return createResponse({
+            success: true,
+            scan_interval: 60,
+            confidence_threshold: 0.9,
+          });
+        }
+
+        if (url.includes('/api/auto-import/results')) {
+          return createResponse({
+            success: true,
+            results: [
+              {
+                id: 4,
+                status: 'pending_review',
+                folder_hash: 'hash-1',
+                folder_name: 'Album A',
+                album_name: 'Album A',
+                artist_name: 'Artist A',
+                confidence: 0.82,
+                total_files: 2,
+              },
+            ],
+          });
+        }
+
+        return createResponse({ success: true });
+      }) as unknown as typeof fetch,
+    );
+  });
+
+  it('renders the import page through the app router', async () => {
+    const { history } = renderImportRoute();
+
+    await waitFor(() => expect(screen.getByTestId('import-page')).toBeInTheDocument());
+    expect(await screen.findByText('Import Music')).toBeInTheDocument();
+    expect(screen.getByText('Import: /music/Staging')).toBeInTheDocument();
+    await waitFor(() => expect(history.location.pathname).toBe('/import/album'));
+    await waitFor(() =>
+      expect(getFetchUrls().some((url) => url.includes('/api/import/staging/groups'))).toBe(true),
+    );
+    expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(
+      true,
+    );
+    expect(window.SoulSyncWebShellBridge?.showReactHost).toHaveBeenCalledWith('import');
+    expect(window.SoulSyncWebShellBridge?.setActivePageChrome).toHaveBeenCalledWith('import');
+  });
+
+  it('stores the active tab in nested route paths', async () => {
+    const { history } = renderImportRoute();
+
+    fireEvent.click(await screen.findByRole('link', { name: 'Singles' }));
+
+    await waitFor(() => expect(history.location.pathname).toBe('/import/singles'));
+    expect(screen.getByText('Process Selected (0)')).toBeInTheDocument();
+  });
+
+  it('keeps client workflow drafts across page remounts', async () => {
+    const view = renderImportRoute();
+
+    const searchInput = await screen.findByPlaceholderText('Search for an album...');
+    fireEvent.change(searchInput, { target: { value: 'half matched album' } });
+    view.unmount();
+
+    renderImportRoute();
+
+    expect(await screen.findByDisplayValue('half matched album')).toBeInTheDocument();
+  });
+
+  it('preserves album source details when matching an album', async () => {
+    renderImportRoute();
+
+    const albumButtons = await screen.findAllByRole('button', { name: /Album A/ });
+    fireEvent.click(albumButtons[albumButtons.length - 1]);
+
+    await waitFor(() => expect(screen.getByText('Track Matching')).toBeInTheDocument());
+
+    expect(albumMatchBodies.at(-1)).toMatchObject({
+      source: 'deezer',
+      album_name: 'Album A',
+      album_artist: 'Artist A',
+    });
+  });
+
+  it('renders auto-import results from route search state', async () => {
+    renderImportRoute(['/import/auto?autoFilter=pending']);
+
+    expect(await screen.findByText('1 review')).toBeInTheDocument();
+    expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
+    expect(screen.getByText('Needs Review')).toBeInTheDocument();
+    expect(getFetchUrls().some((url) => url.includes('/api/import/staging/groups'))).toBe(false);
+    expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(
+      false,
+    );
+  });
+});
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
new file mode 100644
index 00000000..aa07185b
--- /dev/null
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -0,0 +1,581 @@
+import { useQuery } from '@tanstack/react-query';
+import { type DragEvent, type KeyboardEvent, useState } from 'react';
+
+import type { ImportAlbumResult } from '../-import.types';
+import styles from './import-page.module.css';
+
+import {
+  importStagingGroupsQueryOptions,
+  importStagingSuggestionsQueryOptions,
+  matchImportAlbum,
+  searchImportAlbums,
+} from '../-import.api';
+import {
+  getDisplayedMatchFile,
+  getEffectiveAlbumMatches,
+  getTrackDisplayInfo,
+  getUnmatchedStagingFiles,
+  IMPORT_PLACEHOLDER_IMAGE,
+} from '../-import.helpers';
+import { useAlbumImportWorkflow } from '../-import.store';
+import {
+  fallbackImage,
+  getErrorMessage,
+  useImportQueueActions,
+  useImportStaging,
+} from './import-shared';
+
+function useAlbumImportViewModel() {
+  const { refreshStaging, stagingFiles } = useImportStaging();
+  const [dragOverTrack, setDragOverTrack] = useState<number | null>(null);
+  const [tapSelectedChip, setTapSelectedChip] = useState<number | null>(null);
+  const groupsQuery = useQuery({
+    ...importStagingGroupsQueryOptions(),
+  });
+  const suggestionsQuery = useQuery({
+    ...importStagingSuggestionsQueryOptions(),
+  });
+  const { addQueueJob } = useImportQueueActions();
+  const {
+    albumMatch,
+    albumMatchError,
+    albumMatchLoading,
+    albumQuery,
+    albumResults,
+    albumSearchError,
+    albumSearchLoading,
+    autoGroupFilePaths,
+    clearAutoGroupFilePaths,
+    matchOverrides,
+    resetAlbumWorkflow,
+    selectedAlbum,
+    setAlbumMatch,
+    setAlbumMatchError,
+    setAlbumMatchLoading,
+    setAlbumQuery,
+    setAlbumResults,
+    setAlbumSearchContext,
+    setAlbumSearchError,
+    setAlbumSearchLoading,
+    setMatchOverrides,
+    setSelectedAlbum,
+  } = useAlbumImportWorkflow();
+
+  const resetAlbumSearch = () => {
+    setDragOverTrack(null);
+    setTapSelectedChip(null);
+    resetAlbumWorkflow();
+    refreshStaging();
+  };
+
+  const runAlbumSearch = async (query: string, filePaths: string[] | null = null) => {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+
+    setAlbumSearchContext(trimmed, filePaths);
+
+    try {
+      const payload = await searchImportAlbums(trimmed);
+      setAlbumResults(payload.albums ?? []);
+    } catch (error) {
+      setAlbumSearchError(getErrorMessage(error));
+    } finally {
+      setAlbumSearchLoading(false);
+    }
+  };
+
+  const selectAlbum = async (album: ImportAlbumResult) => {
+    setSelectedAlbum(album);
+    setAlbumMatch(null);
+    setAlbumMatchError(null);
+    setAlbumMatchLoading(true);
+
+    try {
+      const payload = await matchImportAlbum({
+        albumId: album.id,
+        source: album.source,
+        albumName: album.name,
+        albumArtist: album.artist,
+        filePaths: autoGroupFilePaths,
+      });
+      setAlbumMatch(payload);
+      setMatchOverrides({});
+      setTapSelectedChip(null);
+      setDragOverTrack(null);
+    } catch (error) {
+      setAlbumMatchError(getErrorMessage(error));
+    } finally {
+      clearAutoGroupFilePaths();
+      setAlbumMatchLoading(false);
+    }
+  };
+
+  const assignMatchFile = (trackIndex: number, stagingFileIndex: number) => {
+    setMatchOverrides((current) => {
+      const next = { ...current };
+      for (const [key, value] of Object.entries(next)) {
+        if (value === stagingFileIndex) {
+          delete next[Number(key)];
+        }
+      }
+      next[trackIndex] = stagingFileIndex;
+      return next;
+    });
+    setTapSelectedChip(null);
+  };
+
+  const unmatchTrack = (trackIndex: number) => {
+    setMatchOverrides((current) => {
+      const next = { ...current };
+      delete next[trackIndex];
+      if (albumMatch?.matches?.[trackIndex]?.staging_file) {
+        next[trackIndex] = -1;
+      }
+      return next;
+    });
+  };
+
+  const processAlbum = () => {
+    const album = albumMatch?.album;
+    const matches = albumMatch?.matches ?? [];
+    if (!album || matches.length === 0) return;
+
+    const effectiveMatches = getEffectiveAlbumMatches(matches, stagingFiles, matchOverrides);
+    if (effectiveMatches.length === 0) return;
+
+    addQueueJob({
+      type: 'album',
+      label: album.name,
+      sublabel: `${album.artist} - ${effectiveMatches.length} tracks`,
+      imageUrl: album.image_url,
+      items: effectiveMatches,
+      albumData: album,
+    });
+    resetAlbumSearch();
+  };
+
+  return {
+    albumMatch,
+    albumMatchError,
+    albumMatchLoading,
+    albumQuery,
+    albumResults,
+    albumSearchError,
+    albumSearchLoading,
+    dragOverTrack,
+    groups: groupsQuery.data?.groups ?? [],
+    matchOverrides,
+    onAlbumQueryChange: setAlbumQuery,
+    onAutoRematch: () => {
+      setMatchOverrides({});
+      setTapSelectedChip(null);
+      setDragOverTrack(null);
+    },
+    onBackToSearch: resetAlbumSearch,
+    onDragOverTrack: setDragOverTrack,
+    onProcessAlbum: processAlbum,
+    onRunGroupSearch: (group: {
+      album: string;
+      artist: string;
+      file_count: number;
+      file_paths: string[];
+    }) => {
+      void runAlbumSearch(`${group.artist} ${group.album}`, group.file_paths);
+    },
+    onRunSearch: () => {
+      void runAlbumSearch(albumQuery);
+    },
+    onSelectAlbum: (album: ImportAlbumResult) => {
+      void selectAlbum(album);
+    },
+    onTapAssign: assignMatchFile,
+    onTapSelectChip: (index: number) => {
+      setTapSelectedChip((current) => (current === index ? null : index));
+    },
+    onUnmatchTrack: unmatchTrack,
+    selectedAlbum,
+    stagingFiles,
+    suggestions: suggestionsQuery.data?.suggestions ?? [],
+    suggestionsReady: suggestionsQuery.data?.ready ?? true,
+    tapSelectedChip,
+  };
+}
+
+type AlbumImportViewModel = ReturnType<typeof useAlbumImportViewModel>;
+
+export function AlbumImportTab() {
+  const viewModel = useAlbumImportViewModel();
+
+  return <AlbumImportPanelContent viewModel={viewModel} />;
+}
+
+function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewModel }) {
+  const {
+    albumMatch,
+    albumMatchError,
+    albumMatchLoading,
+    albumQuery,
+    albumResults,
+    albumSearchError,
+    albumSearchLoading,
+    groups,
+    onAlbumQueryChange,
+    onBackToSearch,
+    onRunGroupSearch,
+    onRunSearch,
+    onSelectAlbum,
+    selectedAlbum,
+    suggestions,
+    suggestionsReady,
+  } = viewModel;
+
+  const showingMatch = selectedAlbum || albumMatchLoading || albumMatchError || albumMatch;
+
+  return (
+    <>
+      <div
+        id="import-page-album-search-section"
+        className={showingMatch ? styles.hidden : ''}
+      >
+        {albumResults === null && (
+          <>
+            {groups.length > 0 && (
+              <div id="import-page-auto-groups" className={styles.importPageAutoGroups}>
+                <div className={styles.importPageSectionLabel}>Auto-Detected Albums</div>
+                <div className={styles.importPageAlbumGrid}>
+                  {groups.map((group, index) => (
+                  <button
+                      key={`${group.artist}-${group.album}-${index}`}
+                      type="button"
+                      className={`${styles.importPageAlbumCard} ${styles.importPageAutoGroupCard}`}
+                      onClick={() => onRunGroupSearch(group)}
+                    >
+                      <div className={styles.importPageAutoGroupCount}>{group.file_count}</div>
+                      <div className={styles.importPageAutoGroupInfo}>
+                        <div className={styles.importPageAlbumCardTitle} title={group.album}>
+                          {group.album}
+                        </div>
+                        <div className={styles.importPageAlbumCardArtist} title={group.artist}>
+                          {group.artist} - {group.file_count} tracks
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className={styles.importPageSuggestions} id="import-page-suggestions">
+              <div className={styles.importPageSectionLabel}>Suggested from your import folder</div>
+              <div className={styles.importPageAlbumGrid} id="import-page-suggestions-grid">
+                {suggestions.length > 0 ? (
+                  suggestions.map((album) => (
+                    <AlbumCard
+                      key={`${album.source || 'source'}-${album.id}`}
+                      album={album}
+                      onSelect={onSelectAlbum}
+                    />
+                  ))
+                ) : suggestionsReady ? null : (
+                  <div className={styles.importPageEmptyState}>Loading suggestions...</div>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+
+        <div className={styles.importPageSearchBar}>
+          <input
+            type="text"
+            id="import-page-album-search-input"
+            className={styles.importPageSearchInput}
+            placeholder="Search for an album..."
+            value={albumQuery}
+            onChange={(event) => onAlbumQueryChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') onRunSearch();
+            }}
+          />
+          <button type="button" className={styles.importPageSearchBtn} onClick={onRunSearch}>
+            Search
+          </button>
+          <button
+            type="button"
+            className={`${styles.importPageClearBtn} ${albumResults === null ? styles.hidden : ''}`}
+            id="import-page-album-clear-btn"
+            title="Clear search"
+            onClick={onBackToSearch}
+          >
+            x
+          </button>
+        </div>
+
+        <div className={styles.importPageAlbumGrid} id="import-page-album-results">
+          {albumSearchLoading ? (
+            <div className={styles.importPageEmptyState}>Searching...</div>
+          ) : albumSearchError ? (
+            <div className={styles.importPageEmptyState}>Error: {albumSearchError}</div>
+          ) : albumResults?.length === 0 ? (
+            <div className={styles.importPageEmptyState}>No albums found</div>
+          ) : (
+            albumResults?.map((album) => (
+              <AlbumCard
+                key={`${album.source || 'source'}-${album.id}`}
+                album={album}
+                onSelect={onSelectAlbum}
+              />
+            ))
+          )}
+        </div>
+      </div>
+
+      <div
+        id="import-page-album-match-section"
+        className={showingMatch ? '' : styles.hidden}
+      >
+        {albumMatchLoading ? (
+          <div className={styles.importPageEmptyState}>Matching files to tracklist...</div>
+        ) : albumMatchError ? (
+          <div className={styles.importPageEmptyState}>Error: {albumMatchError}</div>
+        ) : albumMatch?.album ? (
+          <AlbumMatchPanel viewModel={viewModel} />
+        ) : (
+          <div className={styles.importPageEmptyState}>Select an album to start matching files.</div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function AlbumCard({
+  album,
+  onSelect,
+}: {
+  album: ImportAlbumResult;
+  onSelect: (album: ImportAlbumResult) => void;
+}) {
+  return (
+    <button type="button" className={styles.importPageAlbumCard} onClick={() => onSelect(album)}>
+      <img
+        src={album.image_url || IMPORT_PLACEHOLDER_IMAGE}
+        alt={album.name}
+        loading="lazy"
+        onError={fallbackImage}
+      />
+      <div className={styles.importPageAlbumCardTitle} title={album.name}>
+        {album.name}
+      </div>
+      <div className={styles.importPageAlbumCardArtist} title={album.artist}>
+        {album.artist}
+      </div>
+      <div className={styles.importPageAlbumCardMeta}>
+        {album.total_tracks || 0} tracks - {album.release_date?.substring(0, 4) || ''}
+      </div>
+    </button>
+  );
+}
+
+function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
+  const {
+    albumMatch,
+    albumMatchError,
+    albumMatchLoading,
+    dragOverTrack,
+    matchOverrides,
+    onAutoRematch,
+    onBackToSearch,
+    onDragOverTrack,
+    onProcessAlbum,
+    onTapAssign,
+    onTapSelectChip,
+    onUnmatchTrack,
+    stagingFiles,
+    tapSelectedChip,
+  } = viewModel;
+
+  const effectiveMatches = getEffectiveAlbumMatches(
+    albumMatch?.matches ?? [],
+    stagingFiles,
+    matchOverrides,
+  );
+  const unmatchedFiles = getUnmatchedStagingFiles(
+    albumMatch?.matches ?? [],
+    stagingFiles,
+    matchOverrides,
+  );
+  const matchedCount = effectiveMatches.length;
+
+  return albumMatchLoading ? (
+    <div className={styles.importPageEmptyState}>Matching files to tracklist...</div>
+  ) : albumMatchError ? (
+    <div className={styles.importPageEmptyState}>Error: {albumMatchError}</div>
+  ) : albumMatch?.album ? (
+    <>
+      <div className={styles.importPageAlbumHero} id="import-page-album-hero">
+        <img
+          src={albumMatch.album.image_url || IMPORT_PLACEHOLDER_IMAGE}
+          alt={albumMatch.album.name}
+          loading="lazy"
+          onError={fallbackImage}
+        />
+        <div className={styles.importPageAlbumHeroInfo}>
+          <div className={styles.importPageAlbumHeroTitle}>{albumMatch.album.name}</div>
+          <div className={styles.importPageAlbumHeroArtist}>{albumMatch.album.artist}</div>
+          <div className={styles.importPageAlbumHeroMeta}>
+            {albumMatch.album.total_tracks || albumMatch.matches?.length || 0} tracks -{' '}
+            {albumMatch.album.release_date?.substring(0, 4) || ''}
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.importPageMatchHeader}>
+        <h3>Track Matching</h3>
+        <div className={styles.importPageMatchActions}>
+          <button
+            type="button"
+            className={styles.importPageSecondaryBtn}
+            onClick={onAutoRematch}
+          >
+            Re-match Automatically
+          </button>
+          <button
+            type="button"
+            className={styles.importPageBackBtn}
+            onClick={onBackToSearch}
+          >
+            Back to Search
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.importPageMatchList} id="import-page-match-list">
+        {(albumMatch.matches ?? []).map((match, index) => {
+          const trackInfo = getTrackDisplayInfo(match, index);
+          const { confidence, file } = getDisplayedMatchFile(
+            match,
+            index,
+            stagingFiles,
+            matchOverrides,
+          );
+          const confidencePercent = Math.round(confidence * 100);
+          return (
+            <div
+              key={`${trackInfo.displayTrackNumber}-${trackInfo.name}-${index}`}
+              className={`${styles.importPageMatchRow} ${
+                file ? styles.matched : ''
+              } ${dragOverTrack === index ? styles.dragOver : ''}`}
+              onClick={() => {
+                if (tapSelectedChip !== null) onTapAssign(index, tapSelectedChip);
+              }}
+              onDragOver={(event) => {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'move';
+                onDragOverTrack(index);
+              }}
+              onDragLeave={() => onDragOverTrack(null)}
+              onDrop={(event) => {
+                event.preventDefault();
+                onDragOverTrack(null);
+                const stagingFileIndex = Number(event.dataTransfer.getData('text/plain'));
+                if (Number.isFinite(stagingFileIndex)) onTapAssign(index, stagingFileIndex);
+              }}
+            >
+              <span className={styles.importPageMatchNum}>{trackInfo.displayTrackNumber}</span>
+              <span className={styles.importPageMatchTrack}>{trackInfo.name}</span>
+              <span
+                className={`${styles.importPageMatchFile} ${
+                  file ? styles.hasFile : ''
+                }`}
+              >
+                {file ? (
+                  <>
+                    <span className={styles.importPageMatchFileName}>{file.filename}</span>
+                    <span
+                      className={`${styles.importPageMatchConfidence} ${
+                        confidence >= 0.7 ? '' : styles.low
+                      }`}
+                    >
+                      {confidencePercent}%
+                    </span>
+                  </>
+                ) : (
+                  <span className={styles.importPageMatchDropZone}>Drop a file here</span>
+                )}
+              </span>
+              <span>
+                {file ? (
+                  <button
+                    type="button"
+                    className={styles.importPageMatchUnmatch}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onUnmatchTrack(index);
+                    }}
+                  >
+                    x
+                  </button>
+                ) : null}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={styles.importPageUnmatchedPool} id="import-page-unmatched-pool">
+        <div className={styles.importPagePoolLabel}>
+          Unmatched Files (<span id="import-page-unmatched-count">{unmatchedFiles.length}</span>)
+        </div>
+        <div className={styles.importPagePoolChips} id="import-page-pool-chips">
+          {unmatchedFiles.length === 0 ? (
+            <span className={styles.importPagePoolEmpty}>All files matched</span>
+          ) : (
+            unmatchedFiles.map(({ file, index }) => (
+              <span
+                key={`${file.full_path}-${index}`}
+                role="button"
+                tabIndex={0}
+                className={`${styles.importPageFileChip} ${
+                  tapSelectedChip === index ? styles.selected : ''
+                }`}
+                draggable
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onTapSelectChip(index);
+                }}
+                onDragStart={(event: DragEvent<HTMLSpanElement>) => {
+                  event.dataTransfer.setData('text/plain', String(index));
+                  event.dataTransfer.effectAllowed = 'move';
+                }}
+                onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    onTapSelectChip(index);
+                  }
+                }}
+              >
+                {file.filename}
+              </span>
+            ))
+          )}
+        </div>
+      </div>
+
+      <div className={styles.importPageMatchFooter}>
+        <div className={styles.importPageMatchStats} id="import-page-match-stats">
+          {matchedCount} of {albumMatch.matches?.length ?? 0} tracks matched
+        </div>
+        <button
+          type="button"
+          className={styles.importPageProcessBtn}
+          id="import-page-album-process-btn"
+          disabled={matchedCount === 0}
+          onClick={onProcessAlbum}
+        >
+          Process {matchedCount} Track{matchedCount === 1 ? '' : 's'}
+        </button>
+      </div>
+    </>
+  ) : (
+    <div className={styles.importPageEmptyState}>Select an album to start matching files.</div>
+  );
+}
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
new file mode 100644
index 00000000..c8ac1075
--- /dev/null
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -0,0 +1,580 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+import type {
+  ImportAutoFilter,
+  ImportAutoImportResult,
+  ImportAutoImportStatusPayload,
+} from '../-import.types';
+
+import {
+  approveAllAutoImportResults,
+  approveAutoImportResult,
+  autoImportResultsQueryOptions,
+  autoImportSettingsQueryOptions,
+  autoImportStatusQueryOptions,
+  clearCompletedAutoImportResults,
+  invalidateAutoImportQueries,
+  rejectAutoImportResult,
+  saveAutoImportSettings,
+  toggleAutoImport,
+  triggerAutoImportScan,
+} from '../-import.api';
+import {
+  filterAutoImportResults,
+  getActiveImportLines,
+  getAutoImportCounts,
+  getAutoImportStatusClass,
+  getAutoImportStatusMeta,
+  getAutoImportStatusText,
+  getAutoImportTimeAgo,
+  getConfidenceClass,
+  parseAutoImportMatchData,
+} from '../-import.helpers';
+import styles from './import-page.module.css';
+import { fallbackImage, getErrorMessage, RefreshIcon } from './import-shared';
+
+export function AutoImportPanel({
+  autoFilter,
+  onFilterChange,
+}: {
+  autoFilter: ImportAutoFilter;
+  onFilterChange: (filter: ImportAutoFilter) => void;
+}) {
+  const queryClient = useQueryClient();
+  const [confidence, setConfidence] = useState(90);
+  const [interval, setInterval] = useState(60);
+  const [expandedRows, setExpandedRows] = useState<Set<number>>(() => new Set());
+
+  const statusQuery = useQuery({
+    ...autoImportStatusQueryOptions(),
+    refetchInterval: 5000,
+  });
+  const settingsQuery = useQuery({
+    ...autoImportSettingsQueryOptions(),
+  });
+  const resultsQuery = useQuery({
+    ...autoImportResultsQueryOptions(),
+    refetchInterval: 5000,
+  });
+
+  useEffect(() => {
+    const settings = settingsQuery.data;
+    if (!settings) return;
+    setConfidence(Math.round((settings.confidence_threshold ?? 0.9) * 100));
+    setInterval(settings.scan_interval ?? 60);
+  }, [settingsQuery.data]);
+
+  const invalidateAutoImport = () => {
+    void invalidateAutoImportQueries(queryClient);
+  };
+
+  const toggleMutation = useMutation({
+    mutationFn: toggleAutoImport,
+    onSuccess: (_, enabled) => {
+      window.showToast?.(enabled ? 'Auto-import enabled' : 'Auto-import disabled', 'success');
+      invalidateAutoImport();
+    },
+    onError: showMutationError,
+  });
+  const saveSettingsMutation = useMutation({
+    mutationFn: saveAutoImportSettings,
+    onSuccess: () => {
+      window.showToast?.('Settings saved', 'success');
+      invalidateAutoImport();
+    },
+    onError: showMutationError,
+  });
+  const scanMutation = useMutation({
+    mutationFn: triggerAutoImportScan,
+    onSuccess: () => {
+      window.showToast?.('Scan triggered', 'success');
+      invalidateAutoImport();
+    },
+    onError: showMutationError,
+  });
+  const approveMutation = useMutation({
+    mutationFn: approveAutoImportResult,
+    onSuccess: () => {
+      window.showToast?.('Approved', 'success');
+      invalidateAutoImport();
+    },
+    onError: showMutationError,
+  });
+  const rejectMutation = useMutation({
+    mutationFn: rejectAutoImportResult,
+    onSuccess: () => {
+      window.showToast?.('Dismissed', 'success');
+      invalidateAutoImport();
+    },
+    onError: showMutationError,
+  });
+  const approveAllMutation = useMutation({
+    mutationFn: async () => {
+      const confirmed = await confirmAction({
+        title: 'Approve All',
+        message: 'Approve and import all pending review items?',
+        confirmText: 'Approve All',
+      });
+      if (!confirmed) return null;
+      return await approveAllAutoImportResults();
+    },
+    onSuccess: (count) => {
+      if (count === null) return;
+      window.showToast?.(`Approved ${count} items`, 'success');
+      invalidateAutoImport();
+    },
+    onError: showMutationError,
+  });
+  const clearMutation = useMutation({
+    mutationFn: clearCompletedAutoImportResults,
+    onSuccess: (count) => {
+      window.showToast?.(`Cleared ${count} imported items`, 'success');
+      invalidateAutoImport();
+    },
+    onError: showMutationError,
+  });
+
+  const allResults = resultsQuery.data?.results ?? [];
+  const results = filterAutoImportResults(allResults, autoFilter);
+  const counts = getAutoImportCounts(allResults);
+  const activeLines = getActiveImportLines(statusQuery.data);
+  const statusClassName = getAutoImportStatusClass(statusQuery.data);
+
+  if (statusQuery.error) {
+    return (
+      <div className={styles.autoImportEmpty}>
+        Auto-import is unavailable: {getErrorMessage(statusQuery.error)}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.autoImportControls}>
+        <div className={styles.autoImportToggleRow}>
+          <label className={styles.autoImportToggleLabel}>
+            <input
+              type="checkbox"
+              id="auto-import-enabled"
+              checked={Boolean(statusQuery.data?.running)}
+              disabled={toggleMutation.isPending}
+              onChange={(event) => toggleMutation.mutate(event.target.checked)}
+            />
+            <span className={styles.autoImportToggleSlider} />
+            <span>Auto-Import</span>
+          </label>
+          <span
+            className={`${styles.autoImportStatus} ${styles[statusClassName]}`}
+            id="auto-import-status-text"
+          >
+            {getAutoImportStatusText(statusQuery.data)}
+          </span>
+          {statusQuery.data?.running ? (
+            <button
+              type="button"
+              className={styles.autoImportScanNowBtn}
+              id="auto-import-scan-now"
+              title="Scan import folder now"
+              disabled={scanMutation.isPending}
+              onClick={() => scanMutation.mutate()}
+            >
+              <RefreshIcon />
+              Scan Now
+            </button>
+          ) : null}
+        </div>
+        {statusQuery.data?.running ? (
+          <div className={styles.autoImportSettingsRow} id="auto-import-settings-row">
+            <label>
+              Confidence:{' '}
+              <input
+                type="range"
+                id="auto-import-confidence"
+                min="50"
+                max="100"
+                value={confidence}
+                onChange={(event) => setConfidence(Number(event.target.value))}
+              />{' '}
+              <span id="auto-import-conf-val">{confidence}%</span>
+            </label>
+            <label>
+              Interval:{' '}
+              <select
+                id="auto-import-interval"
+                value={interval}
+                onChange={(event) => setInterval(Number(event.target.value))}
+              >
+                <option value="30">30s</option>
+                <option value="60">60s</option>
+                <option value="120">2m</option>
+                <option value="300">5m</option>
+              </select>
+            </label>
+            <button
+              type="button"
+              className={`${styles.autoImportActionBtn} ${styles.autoImportActionSecondary}`}
+              disabled={saveSettingsMutation.isPending}
+              onClick={() =>
+                saveSettingsMutation.mutate({
+                  confidenceThreshold: confidence / 100,
+                  scanInterval: interval,
+                })
+              }
+            >
+              Save
+            </button>
+          </div>
+        ) : null}
+        {activeLines.length > 0 ? (
+          <div className={styles.autoImportProgress} id="auto-import-progress">
+            <div className={styles.autoImportProgressText} id="auto-import-progress-text">
+              {activeLines.length === 1
+                ? `Processing ${activeLines[0]}`
+                : `Processing ${activeLines.length} imports:`}
+              {activeLines.length > 1
+                ? activeLines.map((line) => <div key={line}>{line}</div>)
+                : null}
+            </div>
+            <div className={styles.autoImportProgressBar}>
+              <div className={styles.autoImportProgressFill} />
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      {allResults.length > 0 ? (
+        <>
+          <div className={styles.autoImportStats} id="auto-import-stats">
+            <span className={styles.autoImportStat} id="auto-import-stat-imported">
+              {counts.imported} imported
+            </span>
+            <span
+              className={`${styles.autoImportStat} ${styles.autoImportStatReview}`}
+              id="auto-import-stat-review"
+            >
+              {counts.review} review
+            </span>
+            <span
+              className={`${styles.autoImportStat} ${styles.autoImportStatFailed}`}
+              id="auto-import-stat-failed"
+            >
+              {counts.failed} failed
+            </span>
+          </div>
+          <div className={styles.autoImportFilters} id="auto-import-filters">
+            {(['all', 'pending', 'imported', 'failed'] as const).map((filter) => (
+              <button
+                key={filter}
+                type="button"
+                className={`${styles.autoImportFilterPill} ${
+                  autoFilter === filter ? styles.active : ''
+                }`}
+                data-filter={filter}
+                onClick={() => onFilterChange(filter)}
+              >
+                {filter === 'pending' ? 'Needs Review' : titleCase(filter)}
+              </button>
+            ))}
+            <div className={styles.importPageFlexSpacer} />
+            {counts.review > 0 ? (
+              <button
+                type="button"
+                className={styles.autoImportBatchBtn}
+                id="auto-import-approve-all"
+                disabled={approveAllMutation.isPending}
+                onClick={() => approveAllMutation.mutate()}
+              >
+                Approve All
+              </button>
+            ) : null}
+            {counts.imported + counts.failed > 0 ? (
+              <button
+                type="button"
+                className={`${styles.autoImportBatchBtn} ${styles.autoImportClearBtn}`}
+                id="auto-import-clear-completed"
+                disabled={clearMutation.isPending}
+                onClick={() => clearMutation.mutate()}
+              >
+                Clear History
+              </button>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+
+      <div className={styles.autoImportResults} id="auto-import-results">
+        {resultsQuery.error ? (
+          <div className={styles.autoImportEmpty}>
+            Failed to load imports: {getErrorMessage(resultsQuery.error)}
+          </div>
+        ) : allResults.length === 0 ? (
+          <div className={styles.autoImportEmpty}>
+            <p>No imports yet. Drop album folders or single tracks into your import folder.</p>
+          </div>
+        ) : results.length === 0 ? (
+          <div className={styles.autoImportEmpty}>
+            <p>No {autoFilter === 'pending' ? 'pending review' : autoFilter} items.</p>
+          </div>
+        ) : (
+          results.map((result, index) => (
+            <AutoImportResultCard
+              key={result.id}
+              expanded={expandedRows.has(result.id)}
+              index={index}
+              approvePending={approveMutation.isPending}
+              rejectPending={rejectMutation.isPending}
+              result={result}
+              status={statusQuery.data}
+              onApprove={() => approveMutation.mutate(result.id)}
+              onReject={() => rejectMutation.mutate(result.id)}
+              onToggle={() => {
+                setExpandedRows((current) => {
+                  const next = new Set(current);
+                  if (next.has(result.id)) next.delete(result.id);
+                  else next.add(result.id);
+                  return next;
+                });
+              }}
+            />
+          ))
+        )}
+      </div>
+    </>
+  );
+}
+
+function AutoImportResultCard({
+  approvePending,
+  expanded,
+  index,
+  rejectPending,
+  result,
+  status,
+  onApprove,
+  onReject,
+  onToggle,
+}: {
+  approvePending: boolean;
+  expanded: boolean;
+  index: number;
+  rejectPending: boolean;
+  result: ImportAutoImportResult;
+  status: ImportAutoImportStatusPayload | undefined;
+  onApprove: () => void;
+  onReject: () => void;
+    onToggle: () => void;
+  }) {
+  const confidencePercent = Math.round((result.confidence || 0) * 100);
+  const confidenceClass = getConfidenceClass(confidencePercent);
+  const statusMeta = getAutoImportStatusMeta(result.status);
+  const liveActive = status?.active_imports?.find(
+    (item) => item.folder_hash === result.folder_hash,
+  );
+  const isLiveProcessing = result.status === 'processing' && liveActive?.status === 'processing';
+  const liveTrackIndex = isLiveProcessing ? liveActive?.track_index || 0 : 0;
+  const liveTrackTotal = isLiveProcessing ? liveActive?.track_total || 0 : 0;
+  const liveTrackName = isLiveProcessing ? liveActive?.track_name || '' : '';
+  const matchData = parseAutoImportMatchData(result.match_data);
+  const trackDetails =
+    matchData.matches?.map((match) => ({
+      name: match.track_name || match.track?.name || 'Unknown',
+      file: match.file ? match.file.split(/[/\\]/).pop() || '?' : '?',
+      confidence: Math.round((match.confidence || 0) * 100),
+    })) ?? [];
+  const matchSummary =
+    isLiveProcessing && liveTrackTotal > 0
+      ? `track ${liveTrackIndex}/${liveTrackTotal}: ${liveTrackName}`
+      : matchData.total_tracks && matchData.total_tracks > 0
+        ? `${matchData.matched_count || 0}/${matchData.total_tracks} tracks`
+        : `${result.total_files || 0} files`;
+  const methodLabel = getMethodLabel(result.identification_method);
+  const timeAgo = getAutoImportTimeAgo(result.created_at);
+  const statusCardClass = getAutoImportCardClass(statusMeta.className);
+  const statusBadgeClass = getAutoImportBadgeClass(statusMeta.className);
+  const confidenceFillClass = getAutoImportConfidenceClass(confidenceClass);
+
+  return (
+    <div
+      className={`${styles.autoImportCard} ${statusCardClass}`}
+      role="button"
+      tabIndex={0}
+      onClick={onToggle}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onToggle();
+        }
+      }}
+    >
+      <div className={styles.autoImportCardTop}>
+        <div className={styles.autoImportCardLeft}>
+          {result.image_url ? (
+            <img
+              className={styles.autoImportCardArt}
+              src={result.image_url}
+              alt=""
+              onError={fallbackImage}
+            />
+          ) : (
+            <div className={styles.autoImportCardArtFallback}>Album</div>
+          )}
+        </div>
+        <div className={styles.autoImportCardCenter}>
+          <div className={styles.autoImportCardAlbum}>{result.album_name || result.folder_name}</div>
+          <div className={styles.autoImportCardArtist}>{result.artist_name || 'Unknown Artist'}</div>
+          <div className={styles.autoImportCardMeta}>
+            <span>{matchSummary}</span>
+            {methodLabel ? <span className={styles.autoImportMethodBadge}>{methodLabel}</span> : null}
+            {timeAgo ? <span>{timeAgo}</span> : null}
+          </div>
+          {result.error_message ? (
+            <div className={styles.autoImportCardError}>{result.error_message}</div>
+          ) : null}
+        </div>
+        <div className={styles.autoImportCardRight}>
+          <div className={`${styles.autoImportStatusBadge} ${statusBadgeClass}`}>
+            {statusMeta.icon} {statusMeta.label}
+          </div>
+          <div className={styles.autoImportConfidenceBar}>
+            <div
+              className={`${styles.autoImportConfidenceFill} ${confidenceFillClass}`}
+              style={{ width: `${confidencePercent}%` }}
+            />
+          </div>
+          <div className={styles.autoImportConfidenceText}>{confidencePercent}% confidence</div>
+          {result.status === 'pending_review' ? (
+            <div className={styles.autoImportActions}>
+              <button
+                type="button"
+                className={`${styles.autoImportActionBtn} ${styles.autoImportActionPrimary}`}
+                disabled={approvePending}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onApprove();
+                }}
+              >
+                Approve & Import
+              </button>
+              <button
+                type="button"
+                className={`${styles.autoImportActionBtn} ${styles.autoImportActionSecondary}`}
+                disabled={rejectPending}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onReject();
+                }}
+              >
+                Dismiss
+              </button>
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <div className={styles.autoImportCardFolderPath}>{result.folder_name}</div>
+      {trackDetails.length > 0 ? (
+        <div
+          className={`${styles.autoImportTrackList} ${expanded ? styles.expanded : ''}`}
+          id={`auto-import-tracks-${index}`}
+        >
+          <div className={styles.autoImportTrackListHeader}>
+            <span>Track</span>
+            <span>Matched File</span>
+            <span>Conf</span>
+          </div>
+          {trackDetails.map((track, trackIndex) => {
+            const rowClassName = [
+              styles.autoImportTrackRow,
+              isLiveProcessing && liveTrackIndex > 0 && trackIndex + 1 === liveTrackIndex
+                ? styles.autoImportTrackRowActive
+                : '',
+              isLiveProcessing && liveTrackIndex > 0 && trackIndex + 1 < liveTrackIndex
+                ? styles.autoImportTrackRowDone
+                : '',
+            ]
+              .filter(Boolean)
+              .join(' ');
+            return (
+              <div
+                key={`${track.name}-${track.file}-${trackIndex}`}
+                className={rowClassName}
+              >
+                <span className={styles.autoImportTrackName}>{track.name}</span>
+                <span className={styles.autoImportTrackFile}>{track.file}</span>
+                <span className={`${styles.autoImportTrackConf} ${getAutoImportConfidenceClass(getConfidenceClass(track.confidence))}`}>
+                  {track.confidence}%
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function showMutationError(error: unknown) {
+  window.showToast?.(getErrorMessage(error), 'error');
+}
+
+function getAutoImportCardClass(status: string): string {
+  const classes: Record<string, string> = {
+    completed: styles.autoImportCompleted,
+    review: styles.autoImportReview,
+    failed: styles.autoImportFailed,
+    processing: styles.autoImportProcessing,
+  };
+
+  return classes[status] ?? '';
+}
+
+function getAutoImportBadgeClass(status: string): string {
+  const classes: Record<string, string> = {
+    completed: styles.autoImportBadgeCompleted,
+    review: styles.autoImportBadgeReview,
+    failed: styles.autoImportBadgeFailed,
+    neutral: styles.autoImportBadgeNeutral,
+    processing: styles.autoImportBadgeProcessing,
+  };
+
+  return classes[status] ?? '';
+}
+
+function getAutoImportConfidenceClass(status: string): string {
+  const classes: Record<string, string> = {
+    high: styles.autoImportConfHigh,
+    medium: styles.autoImportConfMedium,
+    low: styles.autoImportConfLow,
+  };
+
+  return classes[status] ?? '';
+}
+
+function getMethodLabel(method: string | null | undefined): string {
+  const labels: Record<string, string> = {
+    tags: 'Tags',
+    folder_name: 'Folder Name',
+    acoustid: 'AcoustID',
+    filename: 'Filename',
+  };
+  return method ? labels[method] || method : '';
+}
+
+function titleCase(value: string): string {
+  return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+}
+
+async function confirmAction({
+  title,
+  message,
+  confirmText,
+}: {
+  title: string;
+  message: string;
+  confirmText: string;
+}): Promise<boolean> {
+  if (window.showConfirmDialog) {
+    return await window.showConfirmDialog({ title, message, confirmText });
+  }
+  return window.confirm(message);
+}
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
new file mode 100644
index 00000000..2f7e71b9
--- /dev/null
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -0,0 +1,1645 @@
+.importPageContainer {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 32px;
+}
+
+.importPageHeader {
+  margin-bottom: 20px;
+}
+
+.importPageTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.importPageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.3px;
+  font-family:
+    'SF Pro Display',
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.importPageTitle > span {
+  background: linear-gradient(
+    90deg,
+    #ffffff 0%,
+    rgb(var(--accent-light-rgb)) 50%,
+    rgb(var(--accent-rgb)) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: page-title-shimmer 6s ease-in-out infinite;
+}
+
+.importPageRefreshBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  color: #ccc;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.importPageRefreshBtn:hover {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+}
+
+.importPageStagingBar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.importStagingPath {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.importStagingStats {
+  color: rgb(var(--accent-light-rgb));
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* Tab Bar */
+.importPageTabBar {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding-bottom: 0;
+}
+
+.importPageTab {
+  padding: 10px 24px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-bottom: -1px;
+}
+
+.importPageTab:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.importPageTab.active {
+  color: rgb(var(--accent-light-rgb));
+  border-bottom-color: rgb(var(--accent-light-rgb));
+}
+
+.importPageTabContent {
+  display: none;
+}
+
+.importPageTabContent.active {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Section labels */
+.importPageSectionLabel {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 500;
+}
+
+/* Search bar */
+.importPageSearchBar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.importPageSearchInput {
+  flex: 1;
+  padding: 10px 16px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  color: #fff;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.importPageSearchInput:focus {
+  border-color: rgba(var(--accent-light-rgb), 0.5);
+}
+
+.importPageSearchBtn {
+  padding: 10px 20px;
+  background: rgb(var(--accent-light-rgb));
+  border: none;
+  border-radius: 10px;
+  color: #000;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+}
+
+.importPageSearchBtn:hover {
+  background: #1fdf64;
+}
+
+.importPageClearBtn {
+  position: absolute;
+  right: 100px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+
+.importPageClearBtn:hover {
+  color: #fff;
+}
+
+/* Album grid */
+.importPageAlbumGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.importPageAlbumCard {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+  color: inherit;
+  font: inherit;
+}
+
+.importPageAutoGroups .importPageAlbumGrid {
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 10px;
+}
+
+.importPageAutoGroupCard {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-align: left;
+}
+
+.importPageAutoGroupCount {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  background: rgba(var(--accent-rgb, 29, 185, 84), 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 1.2em;
+}
+
+.importPageAutoGroupInfo {
+  min-width: 0;
+}
+
+.importPageAlbumCard:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(var(--accent-light-rgb), 0.3);
+  transform: translateY(-2px);
+}
+
+.importPageAlbumCard img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.importPageAlbumCardTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 2px;
+}
+
+.importPageAlbumCardArtist {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.importPageAlbumCardMeta {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.3);
+  margin-top: 4px;
+}
+
+/* Album hero (selected album) */
+.importPageAlbumHero {
+  display: flex;
+  gap: 20px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.importPageAlbumHero img {
+  width: 120px;
+  height: 120px;
+  border-radius: 10px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.importPageAlbumHeroInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.importPageAlbumHeroTitle {
+  font-size: 22px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 4px;
+}
+
+.importPageAlbumHeroArtist {
+  font-size: 15px;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 4px;
+}
+
+.importPageAlbumHeroMeta {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+/* Match header */
+.importPageMatchHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.importPageMatchHeader h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0;
+}
+
+.importPageMatchActions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Match list */
+.importPageMatchList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.importPageMatchRow {
+  display: grid;
+  grid-template-columns: 36px 1fr 1fr 36px;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  min-height: 44px;
+  transition: all 0.2s;
+}
+
+.importPageMatchRow.dragOver {
+  background: rgba(var(--accent-light-rgb), 0.08);
+  border-color: rgba(var(--accent-light-rgb), 0.4);
+  box-shadow: 0 0 12px rgba(var(--accent-light-rgb), 0.15);
+}
+
+.importPageMatchRow.matched {
+  border-color: rgba(var(--accent-light-rgb), 0.2);
+}
+
+.importPageMatchNum {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.3);
+  text-align: center;
+  font-weight: 500;
+}
+
+.importPageMatchTrack {
+  font-size: 13px;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.importPageMatchFile {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+}
+
+.importPageMatchFile.hasFile {
+  color: rgb(var(--accent-light-rgb));
+}
+
+.importPageMatchFileName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.importPageMatchConfidence {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(var(--accent-light-rgb), 0.15);
+  color: rgb(var(--accent-light-rgb));
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.importPageMatchConfidence.low {
+  background: rgba(255, 165, 0, 0.15);
+  color: #ffa500;
+}
+
+.importPageMatchDropZone {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.25);
+  font-style: italic;
+}
+
+.importPageMatchUnmatch {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.importPageMatchUnmatch:hover {
+  color: #ff4444;
+  background: rgba(255, 68, 68, 0.1);
+}
+
+/* Unmatched file pool */
+.importPageUnmatchedPool {
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px dashed rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  margin-bottom: 16px;
+}
+
+.importPagePoolLabel {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 10px;
+  font-weight: 500;
+}
+
+.importPagePoolChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.importPageFileChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 20px;
+  font-size: 12px;
+  color: #ccc;
+  cursor: grab;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+.importPageFileChip:active {
+  cursor: grabbing;
+}
+
+.importPageFileChip:hover {
+  background: rgba(255, 255, 255, 0.14);
+  border-color: rgba(var(--accent-light-rgb), 0.3);
+  color: #fff;
+}
+
+.importPageFileChip.selected {
+  background: rgba(var(--accent-light-rgb), 0.15);
+  border-color: rgba(var(--accent-light-rgb), 0.4);
+  color: rgb(var(--accent-light-rgb));
+}
+
+.importPagePoolEmpty {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.2);
+  font-style: italic;
+}
+
+/* Match footer */
+.importPageMatchFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.importPageMatchStats {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Buttons */
+.importPageProcessBtn {
+  padding: 10px 24px;
+  background: rgb(var(--accent-light-rgb));
+  border: none;
+  border-radius: 10px;
+  color: #000;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.importPageProcessBtn:hover {
+  background: #1fdf64;
+}
+
+.importPageProcessBtn:disabled {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.3);
+  cursor: not-allowed;
+}
+
+.importPageSecondaryBtn {
+  padding: 8px 16px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  color: #ccc;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.importPageSecondaryBtn:hover {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+}
+
+.importPageBackBtn {
+  padding: 8px 16px;
+  background: none;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.importPageBackBtn:hover {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Singles */
+.importPageSinglesHeader {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+}
+
+.importPageSinglesActions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.importPageSinglesList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.importPageSingleItem {
+  display: grid;
+  grid-template-columns: 32px 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  transition: all 0.2s;
+}
+
+.importPageSingleItem.matched {
+  border-color: rgba(var(--accent-light-rgb), 0.2);
+}
+
+.importPageSingleCheckbox {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  background: transparent;
+  padding: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.importPageSingleCheckbox.checked {
+  background: rgb(var(--accent-light-rgb));
+  border-color: rgb(var(--accent-light-rgb));
+}
+
+.importPageSingleCheckbox.checked::after {
+  content: '✓';
+  color: #000;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.importPageSingleInfo {
+  min-width: 0;
+}
+
+.importPageSingleFilename {
+  font-size: 13px;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.importPageSingleMeta {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+  margin-top: 2px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.importPageSingleMatchedInfo {
+  font-size: 12px;
+  color: rgb(var(--accent-light-rgb));
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.importPageSingleMatchedChange {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  font-size: 11px;
+  text-decoration: underline;
+}
+
+.importPageSingleMatchedChange:hover {
+  color: #fff;
+}
+
+.importPageSingleActions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.importPageIdentifyBtn {
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  color: #ccc;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.importPageIdentifyBtn:hover {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+}
+
+/* Inline search panel for singles */
+.importPageSingleSearchPanel {
+  grid-column: 1 / -1;
+  padding: 12px 0 4px 44px;
+}
+
+.importPageSingleSearchBar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.importPageSingleSearchInput {
+  flex: 1;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  color: #fff;
+  font-size: 13px;
+  outline: none;
+}
+
+.importPageSingleSearchInput:focus {
+  border-color: rgba(var(--accent-light-rgb), 0.4);
+}
+
+.importPageSingleSearchGo {
+  padding: 8px 14px;
+  background: rgb(var(--accent-light-rgb));
+  border: none;
+  border-radius: 8px;
+  color: #000;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.importPageSingleSearchResults {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.importPageSingleResultItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.importPageSingleResultItem:hover {
+  background: rgba(var(--accent-light-rgb), 0.08);
+  border-color: rgba(var(--accent-light-rgb), 0.25);
+}
+
+.importPageSingleResultImg {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.importPageSingleResultInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.importPageSingleResultName {
+  font-size: 13px;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.importPageSingleResultDetail {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.importPageSingleResultSelect {
+  padding: 4px 12px;
+  background: rgba(var(--accent-light-rgb), 0.15);
+  border: 1px solid rgba(var(--accent-light-rgb), 0.3);
+  border-radius: 6px;
+  color: rgb(var(--accent-light-rgb));
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.importPageSingleResultSelect:hover {
+  background: rgba(var(--accent-light-rgb), 0.25);
+}
+
+/* Empty state */
+.importPageEmptyState {
+  text-align: center;
+  padding: 60px 20px;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 14px;
+}
+
+/* Suggestions */
+.importPageSuggestions {
+  margin-bottom: 24px;
+}
+
+/* Processing Queue */
+.importPageQueue {
+  margin-bottom: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
+  overflow: hidden;
+}
+
+.importPageQueueHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.importPageQueueTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.importPageQueueClear {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 2px 8px;
+}
+
+.importPageQueueClear:hover {
+  color: #fff;
+}
+
+.importPageQueueList {
+  display: flex;
+  flex-direction: column;
+}
+
+.importPageQueueItem {
+  display: grid;
+  grid-template-columns: 44px 1fr auto;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.importPageQueueItem:last-child {
+  border-bottom: none;
+}
+
+.importPageQueueArt {
+  width: 44px;
+  height: 44px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.importPageQueueArtEmpty {
+  background: rgba(255, 255, 255, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.importPageFlexSpacer {
+  flex: 1;
+}
+
+.importPageQueueInfo {
+  min-width: 0;
+}
+
+.importPageQueueName {
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.importPageQueueDetail {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  margin-top: 2px;
+}
+
+.importPageQueueProgress {
+  width: 120px;
+  flex-shrink: 0;
+}
+
+.importPageQueueBar {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+
+.importPageQueueFill {
+  height: 100%;
+  background: rgb(var(--accent-light-rgb));
+  border-radius: 2px;
+  width: 0%;
+  transition: width 0.3s ease;
+}
+
+.importPageQueueFill.error {
+  background: #ef4444;
+}
+
+.importPageQueueStatus {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.4);
+  text-align: right;
+}
+
+.importPageQueueStatus.done {
+  color: rgb(var(--accent-light-rgb));
+}
+
+.importPageQueueStatus.error {
+  color: #ef4444;
+}
+
+/* ========================================
+   END IMPORT PAGE
+    .importPageFileChip {
+        cursor: pointer;
+    }
+
+    .importPageMatchRow {
+        cursor: pointer;
+    }
+}
+
+/* Import Page — small screen */
+@media (max-width: 768px) {
+  .importPageContainer {
+    padding: 16px;
+  }
+
+  .importPageTitle {
+    font-size: 22px;
+  }
+
+  .importPageAlbumGrid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 10px;
+  }
+
+  .importPageAlbumHero {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .importPageAlbumHero img {
+    width: 100px;
+    height: 100px;
+  }
+
+  .importPageMatchRow {
+    grid-template-columns: 28px 1fr;
+    gap: 8px;
+  }
+
+  .importPageMatchFile {
+    grid-column: 1 / -1;
+    padding-left: 28px;
+  }
+
+  .importPageMatchUnmatch {
+    grid-column: 1 / -1;
+    justify-self: end;
+  }
+
+  .importPageSinglesHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .importPageSinglesActions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .importPageSingleItem {
+    grid-template-columns: 28px 1fr;
+  }
+
+  .importPageSingleActions {
+    grid-column: 1 / -1;
+    justify-self: end;
+  }
+
+  .importPageSingleSearchPanel {
+    padding-left: 0;
+  }
+
+  .importPageStagingBar {
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+  }
+}
+.autoImportControls {
+  padding: 12px 0 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  margin-bottom: 16px;
+}
+
+.autoImportToggleRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.autoImportToggleLabel {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.autoImportToggleLabel input {
+  display: none;
+}
+
+.autoImportToggleSlider {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  transition: background 0.2s ease;
+  display: inline-block;
+}
+
+.autoImportToggleSlider::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.autoImportToggleLabel input:checked + .autoImportToggleSlider {
+  background: var(--accent-color, #6366f1);
+}
+
+.autoImportToggleLabel input:checked + .autoImportToggleSlider::after {
+  transform: translateX(20px);
+}
+
+.autoImportStatus {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 10px;
+  border-radius: 6px;
+}
+.autoImportStatus.active {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.1);
+}
+.autoImportStatus.scanning {
+  color: rgb(var(--accent-light-rgb));
+  background: rgba(var(--accent-rgb), 0.1);
+}
+.autoImportStatus.disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.autoImportSettingsRow {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.autoImportSettingsRow label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.autoImportSettingsRow input[type='range'] {
+  width: 100px;
+}
+.autoImportSettingsRow select {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #fff;
+  border-radius: 6px;
+  padding: 3px 8px;
+  font-size: 12px;
+}
+
+.autoImportEmpty {
+  text-align: center;
+  padding: 40px 20px;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 13px;
+}
+
+/* Result cards */
+.autoImportCard {
+  display: flex;
+  flex-direction: column;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+  margin-bottom: 8px;
+  transition: all 0.2s;
+}
+
+.autoImportCardTop {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+.autoImportCard:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.autoImportCompleted {
+  border-left: 3px solid #4ade80;
+}
+.autoImportReview {
+  border-left: 3px solid #fbbf24;
+}
+.autoImportFailed {
+  border-left: 3px solid #f87171;
+}
+.autoImportProcessing {
+  border-left: 3px solid #60a5fa;
+}
+
+.autoImportCardArt {
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.autoImportCardArtFallback {
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  opacity: 0.3;
+  flex-shrink: 0;
+}
+
+.autoImportCardCenter {
+  flex: 1;
+  min-width: 0;
+}
+
+.autoImportCardAlbum {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.autoImportCardArtist {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.45);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.autoImportCardFolder {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.25);
+  margin-top: 2px;
+}
+
+.autoImportMatchInfo {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.35);
+  margin-top: 2px;
+}
+
+.autoImportCardError {
+  font-size: 10px;
+  color: #f87171;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.autoImportCardRight {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+  min-width: 80px;
+}
+
+.autoImportConfidenceBar {
+  width: 60px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.autoImportConfidenceFill {
+  height: 100%;
+  border-radius: 2px;
+}
+.autoImportConfHigh {
+  background: #4ade80;
+}
+.autoImportConfMedium {
+  background: #fbbf24;
+}
+.autoImportConfLow {
+  background: #f87171;
+}
+
+.autoImportConfidenceText {
+  font-size: 10px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Scan Now button */
+.autoImportScanNowBtn {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 11px;
+  padding: 4px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.15s;
+  margin-left: auto;
+}
+
+.autoImportScanNowBtn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Live progress */
+.autoImportProgress {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: rgba(var(--accent-rgb), 0.04);
+  border: 1px solid rgba(var(--accent-rgb), 0.1);
+  border-radius: 8px;
+}
+
+.autoImportProgressText {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 4px;
+}
+
+.autoImportProgressBar {
+  height: 3px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.autoImportProgressFill {
+  height: 100%;
+  background: rgba(var(--accent-rgb), 0.6);
+  border-radius: 2px;
+  width: 100%;
+  animation: adlPulse 1.5s ease-in-out infinite;
+}
+
+/* Stats summary */
+.autoImportStats {
+  display: flex;
+  gap: 16px;
+  padding: 8px 0;
+  margin-bottom: 4px;
+}
+
+.autoImportStat {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: 500;
+}
+
+.autoImportStatReview {
+  color: #fbbf24;
+}
+.autoImportStatFailed {
+  color: #f87171;
+}
+
+/* Filter pills */
+.autoImportFilters {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 0;
+  margin-bottom: 8px;
+}
+
+.autoImportFilterPill {
+  padding: 6px 16px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 0.78rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.autoImportFilterPill:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.autoImportFilterPill.active {
+  background: rgba(var(--accent-rgb), 0.15);
+  color: rgb(var(--accent-light-rgb));
+  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
+}
+
+.autoImportActionBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 9px 18px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  letter-spacing: 0.1px;
+}
+
+.autoImportActionPrimary {
+  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.85));
+  color: #fff;
+  border-color: rgba(var(--accent-rgb), 0.3);
+  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2);
+}
+
+.autoImportActionPrimary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
+  filter: brightness(1.1);
+}
+
+.autoImportActionPrimary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.autoImportActionSecondary {
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.7);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.autoImportActionSecondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.15);
+  transform: translateY(-1px);
+}
+
+/* Batch action buttons */
+.autoImportBatchBtn {
+  font-size: 11px;
+  padding: 4px 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: rgba(var(--accent-rgb), 1);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.autoImportBatchBtn:hover {
+  background: rgba(var(--accent-rgb), 0.15);
+}
+
+.autoImportClearBtn {
+  border-color: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.autoImportClearBtn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.autoImportCardMeta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.3);
+  margin-top: 3px;
+}
+
+.autoImportMethodBadge {
+  background: rgba(255, 255, 255, 0.06);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 9px;
+  color: rgba(255, 255, 255, 0.45);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.autoImportCardFolderPath {
+  font-size: 9px;
+  color: rgba(255, 255, 255, 0.15);
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid rgba(255, 255, 255, 0.03);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Expandable track list */
+.autoImportTrackList {
+  display: none;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.autoImportTrackList.expanded {
+  display: block;
+}
+
+.autoImportTrackListHeader {
+  display: grid;
+  grid-template-columns: 1fr 1fr 50px;
+  gap: 8px;
+  font-size: 9px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.autoImportTrackRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr 50px;
+  gap: 8px;
+  padding: 3px 0;
+  font-size: 11px;
+}
+
+.autoImportTrackName {
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.autoImportTrackFile {
+  color: rgba(255, 255, 255, 0.3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.autoImportTrackConf {
+  text-align: right;
+  font-weight: 600;
+  font-size: 10px;
+}
+
+.autoImportTrackConf.autoImportConfHigh {
+  color: #4ade80;
+}
+.autoImportTrackConf.autoImportConfMedium {
+  color: #fbbf24;
+}
+.autoImportTrackConf.autoImportConfLow {
+  color: #f87171;
+}
+
+.autoImportStatusBadge {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 6px;
+  white-space: nowrap;
+}
+.autoImportBadgeCompleted {
+  background: rgba(74, 222, 128, 0.1);
+  color: #4ade80;
+}
+.autoImportBadgeReview {
+  background: rgba(251, 191, 36, 0.1);
+  color: #fbbf24;
+}
+.autoImportBadgeFailed {
+  background: rgba(248, 113, 113, 0.1);
+  color: #f87171;
+}
+.autoImportBadgeNeutral {
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.4);
+}
+.autoImportBadgeProcessing {
+  background: rgba(96, 165, 250, 0.12);
+  color: #60a5fa;
+  animation: auto-import-badge-pulse 1.6s ease-in-out infinite;
+}
+@keyframes auto-import-badge-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+.autoImportTrackRowActive {
+  background: rgba(96, 165, 250, 0.08);
+  border-left: 2px solid #60a5fa;
+  padding-left: 6px;
+  margin-left: -8px;
+  border-radius: 3px;
+}
+.autoImportTrackRowActive .autoImportTrackName {
+  color: #60a5fa;
+  font-weight: 600;
+}
+.autoImportTrackRowDone .autoImportTrackName,
+.autoImportTrackRowDone .autoImportTrackFile {
+  opacity: 0.4;
+}
+
+.autoImportActions {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.autoImportActions button {
+  font-size: 10px;
+  padding: 3px 10px;
+}
+
+@media (max-width: 768px) {
+  .autoImportCard {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .autoImportCardRight {
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
new file mode 100644
index 00000000..b92bb8a8
--- /dev/null
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -0,0 +1,184 @@
+import { Link, Outlet } from '@tanstack/react-router';
+
+import { useReactPageShell } from '@/platform/shell/route-controllers';
+
+import type { ImportQueueEntry } from '../-import.types';
+import styles from './import-page.module.css';
+
+import {
+  getQueueProgressPercent,
+  getQueueStatusText,
+  getStagingStatsText,
+} from '../-import.helpers';
+import { useImportQueueWorkflow } from '../-import.store';
+import { fallbackImage, RefreshIcon, useImportStaging } from './import-shared';
+
+export function ImportPage() {
+  useReactPageShell('import');
+
+  const { refreshStaging, stagingFiles, stagingPath, stagingQuery } = useImportStaging();
+
+  return (
+    <div id="import-page" data-testid="import-page">
+      <div className={styles.importPageContainer}>
+        <ImportHeader
+          error={stagingQuery.error}
+          fileCountText={getStagingStatsText(stagingFiles)}
+          loading={stagingQuery.isLoading}
+          stagingPath={stagingPath}
+          onRefresh={refreshStaging}
+        />
+        <ImportProcessingQueue />
+        <ImportTabNav />
+        <section className={`${styles.importPageTabContent} ${styles.active}`}>
+          <Outlet />
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function ImportHeader({
+  error,
+  fileCountText,
+  loading,
+  stagingPath,
+  onRefresh,
+}: {
+  error: unknown;
+  fileCountText: string;
+  loading: boolean;
+  stagingPath: string;
+  onRefresh: () => void;
+}) {
+  return (
+    <header className={styles.importPageHeader}>
+      <div className={styles.importPageTitleRow}>
+        <h1 className={styles.importPageTitle}>
+          <img src="/static/import.png" className="page-header-icon" alt="" />
+          <span>Import Music</span>
+        </h1>
+        <button
+          type="button"
+          className={styles.importPageRefreshBtn}
+          title="Re-scan import folder"
+          onClick={onRefresh}
+        >
+          <RefreshIcon />
+          Refresh
+        </button>
+      </div>
+      <div className={styles.importPageStagingBar} id="import-staging-bar">
+        <span className={styles.importStagingPath} id="import-page-staging-path">
+          {error ? 'Import folder: error' : `Import: ${stagingPath}`}
+        </span>
+        <span className={styles.importStagingStats} id="import-page-staging-stats">
+          {loading ? 'loading...' : fileCountText}
+        </span>
+      </div>
+    </header>
+  );
+}
+
+function ImportProcessingQueue() {
+  const { clearFinishedJobs, queue } = useImportQueueWorkflow();
+  const hasFinished = queue.some((entry) => entry.status !== 'running');
+
+  return (
+    <section
+      className={`${styles.importPageQueue} ${queue.length === 0 ? styles.hidden : ''}`}
+      id="import-page-queue"
+    >
+      <div className={styles.importPageQueueHeader}>
+        <span className={styles.importPageQueueTitle}>Processing</span>
+        <button
+          type="button"
+          className={styles.importPageQueueClear}
+          id="import-page-queue-clear"
+          style={{ display: hasFinished ? undefined : 'none' }}
+          onClick={clearFinishedJobs}
+        >
+          Clear finished
+        </button>
+      </div>
+      <div className={styles.importPageQueueList} id="import-page-queue-list">
+        {queue.map((entry) => (
+          <ImportQueueItem key={entry.id} entry={entry} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
+  const statusText = getQueueStatusText(entry);
+  const statusClass =
+    entry.status === 'error' || (entry.status === 'done' && entry.errors.length > 0)
+      ? styles.error
+      : entry.status === 'done'
+        ? styles.done
+        : '';
+
+  return (
+    <div className={styles.importPageQueueItem}>
+      {entry.imageUrl ? (
+        <img
+          className={styles.importPageQueueArt}
+          src={entry.imageUrl}
+          alt=""
+          onError={fallbackImage}
+        />
+      ) : (
+        <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>
+          A
+        </div>
+      )}
+      <div className={styles.importPageQueueInfo}>
+        <div className={styles.importPageQueueName}>{entry.label}</div>
+        <div className={styles.importPageQueueDetail}>{entry.sublabel}</div>
+      </div>
+      <div className={styles.importPageQueueProgress}>
+        <div className={styles.importPageQueueBar}>
+          <div
+            className={`${styles.importPageQueueFill} ${
+              entry.status === 'error' ? styles.error : ''
+            }`}
+            style={{ width: `${getQueueProgressPercent(entry)}%` }}
+          />
+        </div>
+        <div className={`${styles.importPageQueueStatus} ${statusClass}`}>{statusText}</div>
+      </div>
+    </div>
+  );
+}
+
+function ImportTabNav() {
+  return (
+    <nav className={styles.importPageTabBar} aria-label="Import modes">
+      <Link
+        to="/import/auto"
+        className={styles.importPageTab}
+        activeProps={{ className: `${styles.importPageTab} ${styles.active}` }}
+        id="import-page-tab-auto"
+      >
+        Auto
+      </Link>
+      <Link
+        to="/import/album"
+        className={styles.importPageTab}
+        activeProps={{ className: `${styles.importPageTab} ${styles.active}` }}
+        id="import-page-tab-album"
+      >
+        Albums
+      </Link>
+      <Link
+        to="/import/singles"
+        className={styles.importPageTab}
+        activeProps={{ className: `${styles.importPageTab} ${styles.active}` }}
+        id="import-page-tab-singles"
+      >
+        Singles
+      </Link>
+    </nav>
+  );
+}
diff --git a/webui/src/routes/import/-ui/import-shared.tsx b/webui/src/routes/import/-ui/import-shared.tsx
new file mode 100644
index 00000000..b025f2a4
--- /dev/null
+++ b/webui/src/routes/import/-ui/import-shared.tsx
@@ -0,0 +1,106 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+import type { ImportQueueJob } from '../-import.types';
+
+import {
+  importStagingFilesQueryOptions,
+  invalidateImportStagingQueries,
+  processImportAlbumTrack,
+  processImportSingleFile,
+} from '../-import.api';
+import { getTrackDisplayInfo, IMPORT_PLACEHOLDER_IMAGE } from '../-import.helpers';
+import { useImportQueueWorkflow, useImportWorkflowStore } from '../-import.store';
+
+export function useImportStaging() {
+  const queryClient = useQueryClient();
+  const clearFinishedJobs = useImportWorkflowStore((state) => state.clearFinishedJobs);
+  const stagingQuery = useQuery({
+    ...importStagingFilesQueryOptions(),
+  });
+
+  return {
+    refreshStaging: () => {
+      clearFinishedJobs();
+      void invalidateImportStagingQueries(queryClient);
+    },
+    stagingFiles: stagingQuery.data?.files ?? [],
+    stagingPath: stagingQuery.data?.staging_path || 'Not configured',
+    stagingQuery,
+  };
+}
+
+export function useImportQueueActions() {
+  const queryClient = useQueryClient();
+  const { enqueueQueueJob, updateQueueEntry } = useImportQueueWorkflow();
+
+  const runQueueJob = async (entryId: number, job: ImportQueueJob) => {
+    let processed = 0;
+    const errors: string[] = [];
+
+    for (let index = 0; index < job.items.length; index += 1) {
+      const itemName =
+        job.type === 'album'
+          ? getTrackDisplayInfo(job.items[index], index).name
+          : job.items[index].title || job.items[index].filename || `File ${index + 1}`;
+
+      updateQueueEntry(entryId, {
+        sublabel: `Processing ${index + 1}/${job.items.length}: ${itemName}`,
+        processed,
+        errors: [...errors],
+      });
+
+      try {
+        const payload =
+          job.type === 'album'
+            ? await processImportAlbumTrack({
+                album: job.albumData,
+                match: job.items[index],
+              })
+            : await processImportSingleFile(job.items[index]);
+
+        processed += payload.processed || 0;
+        if (payload.errors?.length) {
+          errors.push(...payload.errors);
+        }
+      } catch (error) {
+        errors.push(`${itemName}: ${getErrorMessage(error)}`);
+      }
+
+      updateQueueEntry(entryId, {
+        processed,
+        errors: [...errors],
+      });
+    }
+
+    updateQueueEntry(entryId, {
+      status: errors.length > 0 && processed === 0 ? 'error' : 'done',
+      processed,
+      errors,
+    });
+    void invalidateImportStagingQueries(queryClient);
+  };
+
+  return {
+    addQueueJob: (job: ImportQueueJob) => {
+      const id = enqueueQueueJob(job);
+      void runQueueJob(id, job);
+    },
+  };
+}
+
+export function RefreshIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M13.65 2.35A8 8 0 1 0 16 8h-2a6 6 0 1 1-1.76-4.24L10 6h6V0l-2.35 2.35z" />
+    </svg>
+  );
+}
+
+export function fallbackImage(event: { currentTarget: HTMLImageElement }) {
+  if (event.currentTarget.src.endsWith(IMPORT_PLACEHOLDER_IMAGE)) return;
+  event.currentTarget.src = IMPORT_PLACEHOLDER_IMAGE;
+}
+
+export function getErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : 'Unknown error';
+}
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
new file mode 100644
index 00000000..2c3f5a53
--- /dev/null
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -0,0 +1,330 @@
+import type { SingleSearchState } from '../-import.store';
+import type { ImportTrackResult } from '../-import.types';
+import type { ImportStagingFile } from '../-import.types';
+
+import styles from './import-page.module.css';
+import { searchImportTracks } from '../-import.api';
+import { formatDuration } from '../-import.helpers';
+import { useSinglesImportWorkflow } from '../-import.store';
+import {
+  fallbackImage,
+  getErrorMessage,
+  useImportQueueActions,
+  useImportStaging,
+} from './import-shared';
+
+export function SinglesImportTab() {
+  const { refreshStaging, stagingFiles } = useImportStaging();
+  const { addQueueJob } = useImportQueueActions();
+  const {
+    clearSinglesSelection,
+    ensureSingleSearch,
+    openSingleSearch,
+    selectedSingles,
+    selectSingleMatchInStore,
+    setOpenSingleSearch,
+    setSingleSearch,
+    singleSearches,
+    singlesManualMatches,
+    toggleAllSingles,
+    toggleSingleInStore,
+  } = useSinglesImportWorkflow();
+
+  const openSingleSearchPanel = (index: number) => {
+    if (openSingleSearch === index) {
+      setOpenSingleSearch(null);
+      return;
+    }
+
+    setOpenSingleSearch(index);
+    const file = stagingFiles[index];
+    const defaultQuery =
+      [file?.artist, file?.title].filter(Boolean).join(' ') ||
+      (file?.filename || '').replace(/\.[^.]+$/, '');
+    ensureSingleSearch(index, defaultQuery);
+    if (defaultQuery && !singleSearches[index]?.results.length) {
+      void runSingleSearch(index, defaultQuery);
+    }
+  };
+
+  const runSingleSearch = async (index: number, query: string) => {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+
+    setSingleSearch(index, (current) => ({
+      query: trimmed,
+      loading: true,
+      error: null,
+      results: current.results,
+    }));
+
+    try {
+      const payload = await searchImportTracks(trimmed);
+      setSingleSearch(index, {
+        query: trimmed,
+        loading: false,
+        error: null,
+        results: payload.tracks ?? [],
+      });
+    } catch (error) {
+      setSingleSearch(index, {
+        query: trimmed,
+        loading: false,
+        error: getErrorMessage(error),
+        results: [],
+      });
+    }
+  };
+
+  const selectSingleMatch = (fileIndex: number, track: ImportTrackResult) => {
+    selectSingleMatchInStore(fileIndex, track);
+  };
+
+  const processSingles = () => {
+    if (selectedSingles.size === 0) return;
+    const filesToProcess = Array.from(selectedSingles).flatMap((index) => {
+      const file = stagingFiles[index];
+      if (!file) return [];
+      const manualMatch = singlesManualMatches[index];
+      return manualMatch ? [{ ...file, manual_match: manualMatch }] : [file];
+    });
+
+    if (filesToProcess.length === 0) return;
+
+    addQueueJob({
+      type: 'singles',
+      label: `${filesToProcess.length} Single${filesToProcess.length === 1 ? '' : 's'}`,
+      sublabel:
+        filesToProcess
+          .map((file) => file.title || file.filename)
+          .slice(0, 3)
+          .join(', ') + (filesToProcess.length > 3 ? '...' : ''),
+      imageUrl: null,
+      items: filesToProcess,
+    });
+
+    clearSinglesSelection();
+    refreshStaging();
+  };
+
+  return (
+    <SinglesImportPanel
+      files={stagingFiles}
+      manualMatches={singlesManualMatches}
+      openSearchIndex={openSingleSearch}
+      searchStates={singleSearches}
+      selected={selectedSingles}
+      onOpenSearch={openSingleSearchPanel}
+      onProcessSingles={processSingles}
+      onRunSearch={runSingleSearch}
+      onSearchQueryChange={(index, query) => {
+        setSingleSearch(index, (current) => ({
+          query,
+          loading: current.loading,
+          error: current.error,
+          results: current.results,
+        }));
+      }}
+      onSelectAll={() => toggleAllSingles(stagingFiles.length)}
+      onSelectMatch={selectSingleMatch}
+      onToggleSingle={toggleSingleInStore}
+    />
+  );
+}
+
+export function SinglesImportPanel({
+  files,
+  manualMatches,
+  openSearchIndex,
+  searchStates,
+  selected,
+  onOpenSearch,
+  onProcessSingles,
+  onRunSearch,
+  onSearchQueryChange,
+  onSelectAll,
+  onSelectMatch,
+  onToggleSingle,
+}: {
+  files: ImportStagingFile[];
+  manualMatches: Record<number, ImportTrackResult>;
+  openSearchIndex: number | null;
+  searchStates: Record<number, SingleSearchState>;
+  selected: Set<number>;
+  onOpenSearch: (index: number) => void;
+  onProcessSingles: () => void;
+  onRunSearch: (index: number, query: string) => void;
+  onSearchQueryChange: (index: number, query: string) => void;
+  onSelectAll: () => void;
+  onSelectMatch: (fileIndex: number, track: ImportTrackResult) => void;
+  onToggleSingle: (index: number) => void;
+}) {
+  const allSelected = files.length > 0 && selected.size === files.length;
+
+  return (
+    <>
+      <div className={styles.importPageSinglesHeader}>
+        <div className={styles.importPageSinglesActions}>
+          <button type="button" className={styles.importPageSecondaryBtn} onClick={onSelectAll}>
+            <span id="import-page-select-all-text">
+              {allSelected ? 'Deselect All' : 'Select All'}
+            </span>
+          </button>
+          <button
+            type="button"
+            className={styles.importPageProcessBtn}
+            id="import-page-singles-process-btn"
+            disabled={selected.size === 0}
+            onClick={onProcessSingles}
+          >
+            Process Selected ({selected.size})
+          </button>
+        </div>
+      </div>
+              <div className={styles.importPageSinglesList} id="import-page-singles-list">
+        {files.length === 0 ? (
+          <div className={styles.importPageEmptyState}>No audio files found in import folder</div>
+        ) : (
+          files.map((file, index) => {
+            const manualMatch = manualMatches[index];
+            const isSelected = selected.has(index);
+            const searchState = searchStates[index];
+            return (
+              <div
+                key={`${file.full_path}-${index}`}
+                className={`${styles.importPageSingleItem} ${
+                  manualMatch ? styles.matched : ''
+                }`}
+                data-single-idx={index}
+              >
+                <button
+                  type="button"
+                  aria-label={`Select ${file.filename}`}
+                  className={`${styles.importPageSingleCheckbox} ${
+                    isSelected ? styles.checked : ''
+                  }`}
+                  onClick={() => onToggleSingle(index)}
+                />
+                <div className={styles.importPageSingleInfo}>
+                  <div className={styles.importPageSingleFilename}>{file.filename}</div>
+                  <div className={styles.importPageSingleMeta}>
+                    {file.title ? <span>{file.title}</span> : null}
+                    {file.artist ? <span>{file.artist}</span> : null}
+                    {file.extension ? <span>{file.extension}</span> : null}
+                  </div>
+                  {manualMatch ? (
+                    <div className={styles.importPageSingleMatchedInfo}>
+                      OK {manualMatch.name} - {manualMatch.artist}
+                      <button
+                        type="button"
+                        className={styles.importPageSingleMatchedChange}
+                        onClick={() => onOpenSearch(index)}
+                      >
+                        change
+                      </button>
+                    </div>
+                  ) : null}
+                </div>
+                <div className={styles.importPageSingleActions}>
+                  <button
+                    type="button"
+                    className={styles.importPageIdentifyBtn}
+                    onClick={() => onOpenSearch(index)}
+                  >
+                    Search Identify
+                  </button>
+                </div>
+                {openSearchIndex === index ? (
+                  <SingleSearchPanel
+                    fileIndex={index}
+                    searchState={searchState}
+                    onQueryChange={onSearchQueryChange}
+                    onRunSearch={onRunSearch}
+                    onSelectMatch={onSelectMatch}
+                  />
+                ) : null}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </>
+  );
+}
+
+function SingleSearchPanel({
+  fileIndex,
+  searchState,
+  onQueryChange,
+  onRunSearch,
+  onSelectMatch,
+}: {
+  fileIndex: number;
+  searchState: SingleSearchState | undefined;
+  onQueryChange: (index: number, query: string) => void;
+  onRunSearch: (index: number, query: string) => void;
+  onSelectMatch: (fileIndex: number, track: ImportTrackResult) => void;
+}) {
+  const query = searchState?.query ?? '';
+
+  return (
+    <div className={styles.importPageSingleSearchPanel}>
+      <div className={styles.importPageSingleSearchBar}>
+        <input
+          type="text"
+          className={styles.importPageSingleSearchInput}
+          value={query}
+          placeholder="Search artist - title..."
+          onChange={(event) => onQueryChange(fileIndex, event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') onRunSearch(fileIndex, query);
+          }}
+        />
+        <button
+          type="button"
+          className={styles.importPageSingleSearchGo}
+          onClick={() => onRunSearch(fileIndex, query)}
+        >
+          Search
+        </button>
+      </div>
+      <div className={styles.importPageSingleSearchResults} id={`import-single-results-${fileIndex}`}>
+        {searchState?.loading ? (
+          <div className={styles.importPageEmptyState}>Searching...</div>
+        ) : searchState?.error ? (
+          <div className={styles.importPageEmptyState}>Error: {searchState.error}</div>
+        ) : searchState?.results.length === 0 ? (
+          <div className={styles.importPageEmptyState}>No results found</div>
+        ) : (
+          searchState?.results.map((track, index) => (
+            <button
+              key={`${track.source || 'source'}-${track.id}-${index}`}
+              type="button"
+              className={styles.importPageSingleResultItem}
+              onClick={() => onSelectMatch(fileIndex, track)}
+            >
+              {track.image_url ? (
+                <img
+                  className={styles.importPageSingleResultImg}
+                  src={track.image_url}
+                  alt=""
+                  onError={fallbackImage}
+                />
+              ) : null}
+              <div className={styles.importPageSingleResultInfo}>
+                <div className={styles.importPageSingleResultName}>
+                  {track.name} - {track.artist}
+                </div>
+                <div className={styles.importPageSingleResultDetail}>
+                  {track.album}
+                  {track.duration_ms ? ` - ${formatDuration(track.duration_ms)}` : ''}
+                </div>
+              </div>
+              <span className={styles.importPageSingleResultSelect}>Select</span>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/webui/src/routes/import/album.tsx b/webui/src/routes/import/album.tsx
new file mode 100644
index 00000000..6c4a598a
--- /dev/null
+++ b/webui/src/routes/import/album.tsx
@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import {
+  importStagingGroupsQueryOptions,
+  importStagingSuggestionsQueryOptions,
+} from './-import.api';
+import { AlbumImportTab } from './-ui/album-import-tab';
+
+export const Route = createFileRoute('/import/album')({
+  loader: async ({ context }) => {
+    void context.queryClient.prefetchQuery(importStagingGroupsQueryOptions());
+    void context.queryClient.prefetchQuery(importStagingSuggestionsQueryOptions());
+  },
+  component: AlbumImportTab,
+});
diff --git a/webui/src/routes/import/auto.tsx b/webui/src/routes/import/auto.tsx
new file mode 100644
index 00000000..f2b3a1c6
--- /dev/null
+++ b/webui/src/routes/import/auto.tsx
@@ -0,0 +1,27 @@
+import { useNavigate } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+
+import type { ImportAutoFilter } from './-import.types';
+
+import { importAutoSearchSchema } from './-import.types';
+import { AutoImportPanel } from './-ui/auto-import-tab';
+
+export const Route = createFileRoute('/import/auto')({
+  validateSearch: importAutoSearchSchema,
+  component: AutoImportRoute,
+});
+
+function AutoImportRoute() {
+  const navigate = useNavigate({ from: Route.fullPath });
+  const { autoFilter } = Route.useSearch();
+
+  const setAutoFilter = (nextFilter: ImportAutoFilter) => {
+    void navigate({
+      to: Route.fullPath,
+      search: (prev) => ({ ...prev, autoFilter: nextFilter }),
+      replace: true,
+    });
+  };
+
+  return <AutoImportPanel autoFilter={autoFilter} onFilterChange={setAutoFilter} />;
+}
diff --git a/webui/src/routes/import/index.tsx b/webui/src/routes/import/index.tsx
new file mode 100644
index 00000000..72f25616
--- /dev/null
+++ b/webui/src/routes/import/index.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/import/')({
+  beforeLoad: () => {
+    throw redirect({ to: '/import/album', replace: true });
+  },
+});
diff --git a/webui/src/routes/import/route.tsx b/webui/src/routes/import/route.tsx
new file mode 100644
index 00000000..5cb5e60d
--- /dev/null
+++ b/webui/src/routes/import/route.tsx
@@ -0,0 +1,20 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+import { getProfileHomePath } from '@/platform/shell/bridge';
+
+import { importStagingFilesQueryOptions } from './-import.api';
+import { ImportPage } from './-ui/import-page';
+
+export const Route = createFileRoute('/import')({
+  beforeLoad: ({ context }) => {
+    const { bridge } = context.shell;
+
+    if (!bridge.isPageAllowed('import')) {
+      throw redirect({ href: getProfileHomePath(bridge), replace: true });
+    }
+  },
+  loader: async ({ context }) => {
+    await context.queryClient.ensureQueryData(importStagingFilesQueryOptions());
+  },
+  component: ImportPage,
+});
diff --git a/webui/src/routes/import/singles.tsx b/webui/src/routes/import/singles.tsx
new file mode 100644
index 00000000..89a4621b
--- /dev/null
+++ b/webui/src/routes/import/singles.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import { SinglesImportTab } from './-ui/singles-import-tab';
+
+export const Route = createFileRoute('/import/singles')({
+  component: SinglesImportTab,
+});

From 7853d0cfb86baab032010af4416dfcdea384e415 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 11:42:21 +0300
Subject: [PATCH 11/42] chore(webui): remove legacy import feature js / css
 code

---
 .../routes/import/-ui/import-page.module.css  |   17 +-
 webui/static/init.js                          |    3 -
 webui/static/mobile.css                       |   77 -
 webui/static/stats-automations.js             | 1390 +--------------
 webui/static/style.css                        | 1508 +----------------
 5 files changed, 32 insertions(+), 2963 deletions(-)

diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 2f7e71b9..db15a907 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -969,19 +969,12 @@
   color: #ef4444;
 }
 
-/* ========================================
-   END IMPORT PAGE
-    .importPageFileChip {
-        cursor: pointer;
-    }
-
-    .importPageMatchRow {
-        cursor: pointer;
-    }
-}
-
-/* Import Page — small screen */
 @media (max-width: 768px) {
+  .importPageFileChip,
+  .importPageMatchRow {
+    cursor: pointer;
+  }
+
   .importPageContainer {
     padding: 16px;
   }
diff --git a/webui/static/init.js b/webui/static/init.js
index 6b760b0c..10a047b4 100644
--- a/webui/static/init.js
+++ b/webui/static/init.js
@@ -2420,9 +2420,6 @@ async function loadPageData(pageId) {
                 loadApiKeys();
                 loadBlacklistCount();
                 break;
-            case 'import':
-                initializeImportPage();
-                break;
             case 'hydrabase':
                 // Check connection status and pre-fill saved credentials
                 try {
diff --git a/webui/static/mobile.css b/webui/static/mobile.css
index 043ea773..bd81ae64 100644
--- a/webui/static/mobile.css
+++ b/webui/static/mobile.css
@@ -2312,86 +2312,9 @@
         opacity: 0.7;
         transition: opacity 0.1s ease;
     }
-
-    /* Import Page - Touch fallback */
-    .import-page-file-chip {
-        cursor: pointer;
-    }
-
-    .import-page-match-row {
-        cursor: pointer;
-    }
 }
 
-/* Import Page — small screen */
 @media (max-width: 768px) {
-    .import-page-container {
-        padding: 16px;
-    }
-
-    .import-page-title {
-        font-size: 22px;
-    }
-
-    .import-page-album-grid {
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-        gap: 10px;
-    }
-
-    .import-page-album-hero {
-        flex-direction: column;
-        text-align: center;
-    }
-
-    .import-page-album-hero img {
-        width: 100px;
-        height: 100px;
-    }
-
-    .import-page-match-row {
-        grid-template-columns: 28px 1fr;
-        gap: 8px;
-    }
-
-    .import-page-match-file {
-        grid-column: 1 / -1;
-        padding-left: 28px;
-    }
-
-    .import-page-match-unmatch {
-        grid-column: 1 / -1;
-        justify-self: end;
-    }
-
-    .import-page-singles-header {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .import-page-singles-actions {
-        width: 100%;
-        flex-wrap: wrap;
-    }
-
-    .import-page-single-item {
-        grid-template-columns: 28px 1fr;
-    }
-
-    .import-page-single-actions {
-        grid-column: 1 / -1;
-        justify-self: end;
-    }
-
-    .import-page-single-search-panel {
-        padding-left: 0;
-    }
-
-    .import-page-staging-bar {
-        flex-direction: column;
-        gap: 4px;
-        align-items: flex-start;
-    }
-
     /* Profile Picker - Mobile */
     .profile-picker-grid {
         gap: 20px;
diff --git a/webui/static/stats-automations.js b/webui/static/stats-automations.js
index 68772b35..9723c549 100644
--- a/webui/static/stats-automations.js
+++ b/webui/static/stats-automations.js
@@ -1,1377 +1,3 @@
-// IMPORT PAGE (full page, replaces old modal)
-// ===================================================================
-
-let importJobIdCounter = 0;
-
-const importPageState = {
-    stagingFiles: [],
-    selectedSingles: new Set(),
-    albumData: null,          // response from /api/import/album/match
-    matchOverrides: {},       // { trackIndex: stagingFileIndex }  — manual drag-drop overrides
-    singlesManualMatches: {}, // { stagingFileIndex: { id, name, artist, album, ... } }
-    initialized: false,
-    activeTab: 'album',
-    tapSelectedChip: null,    // for mobile tap-to-assign fallback
-    // Album lookup cache for click handlers. Populated by suggestions /
-    // search renderers; read by importPageSelectAlbum so the match POST
-    // can include `source` + `name` + `artist` (without these, backend
-    // can't look up cross-source IDs and falls back to a broken
-    // "Unknown Artist / album_id as title / 0 tracks" placeholder —
-    // github issue #524).
-    _albumLookup: {},         // { albumId: { id, name, artist, source } }
-};
-
-// --- Initialization ---
-
-function initializeImportPage() {
-    if (!importPageState.initialized) {
-        importPageState.initialized = true;
-        importPageRefreshStaging();
-        importPageLoadAutoGroups();
-        importPageLoadSuggestions();
-    }
-}
-
-async function importPageRefreshStaging() {
-    // Clear finished jobs from the queue
-    importPageClearFinishedJobs();
-
-    try {
-        const resp = await fetch('/api/import/staging/files');
-        const data = await resp.json();
-        if (!data.success) {
-            document.getElementById('import-page-staging-path').textContent = `Import folder: error`;
-            return;
-        }
-
-        importPageState.stagingFiles = data.files || [];
-        document.getElementById('import-page-staging-path').textContent = `Import: ${data.staging_path || 'Not configured'}`;
-
-        const totalSize = importPageState.stagingFiles.reduce((s, f) => s + (f.size || 0), 0);
-        const sizeStr = totalSize > 1073741824 ? `${(totalSize / 1073741824).toFixed(1)} GB`
-            : totalSize > 1048576 ? `${(totalSize / 1048576).toFixed(0)} MB`
-                : `${(totalSize / 1024).toFixed(0)} KB`;
-        document.getElementById('import-page-staging-stats').textContent =
-            `${importPageState.stagingFiles.length} file${importPageState.stagingFiles.length !== 1 ? 's' : ''}${totalSize ? ' · ' + sizeStr : ''}`;
-
-        // Refresh the current tab view after data is loaded
-        if (importPageState.activeTab === 'singles') {
-            importPageRenderSinglesList();
-        } else if (importPageState.activeTab === 'album') {
-            importPageLoadAutoGroups();
-        }
-        // Always refresh suggestions and groups in background
-        importPageLoadSuggestions();
-    } catch (err) {
-        console.error('Failed to refresh staging:', err);
-    }
-}
-
-function importPageSwitchTab(tab) {
-    importPageState.activeTab = tab;
-    document.getElementById('import-page-tab-album').classList.toggle('active', tab === 'album');
-    document.getElementById('import-page-tab-singles').classList.toggle('active', tab === 'singles');
-    document.getElementById('import-page-tab-auto')?.classList.toggle('active', tab === 'auto');
-    document.getElementById('import-page-album-content').classList.toggle('active', tab === 'album');
-    document.getElementById('import-page-singles-content')?.classList.toggle('active', tab === 'singles');
-    document.getElementById('import-page-auto-content')?.classList.toggle('active', tab === 'auto');
-
-    if (tab === 'singles' && importPageState.stagingFiles.length > 0) {
-        importPageRenderSinglesList();
-    }
-    if (tab === 'auto') {
-        _autoImportLoadStatus();
-        _autoImportLoadResults();
-        _autoImportStartPolling();
-    } else {
-        _autoImportStopPolling();
-    }
-}
-
-// ── Auto-Import Tab ──
-let _autoImportPollInterval = null;
-let _autoImportFilter = 'all';
-let _autoImportLastStatus = null;
-
-function _autoImportStartPolling() {
-    _autoImportStopPolling();
-    _autoImportPollInterval = setInterval(async () => {
-        if (importPageState.activeTab === 'auto') {
-            await _autoImportLoadStatus();
-            _autoImportLoadResults();
-        }
-    }, 5000);
-}
-
-function _autoImportStopPolling() {
-    if (_autoImportPollInterval) { clearInterval(_autoImportPollInterval); _autoImportPollInterval = null; }
-}
-
-async function _autoImportToggle(enabled) {
-    // Optimistically update toggle state so it doesn't flicker
-    const toggle = document.getElementById('auto-import-enabled');
-    if (toggle) toggle.checked = enabled;
-    const statusText = document.getElementById('auto-import-status-text');
-    if (statusText) statusText.textContent = enabled ? 'Starting...' : 'Stopping...';
-
-    try {
-        const res = await fetch('/api/auto-import/toggle', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ enabled })
-        });
-        const data = await res.json();
-        if (data.success) {
-            showToast(enabled ? 'Auto-import enabled' : 'Auto-import disabled', 'success');
-            _autoImportLoadStatus();
-        } else {
-            // Revert on failure
-            if (toggle) toggle.checked = !enabled;
-        }
-    } catch (e) {
-        showToast('Error: ' + e.message, 'error');
-        if (toggle) toggle.checked = !enabled;
-    }
-}
-
-async function _autoImportLoadStatus() {
-    try {
-        const res = await fetch('/api/auto-import/status');
-        const data = await res.json();
-        if (!data.success) return;
-        _autoImportLastStatus = data;
-
-        const toggle = document.getElementById('auto-import-enabled');
-        const statusText = document.getElementById('auto-import-status-text');
-        const settingsRow = document.getElementById('auto-import-settings-row');
-        const scanNowBtn = document.getElementById('auto-import-scan-now');
-        const progressEl = document.getElementById('auto-import-progress');
-        const progressText = document.getElementById('auto-import-progress-text');
-
-        if (toggle) toggle.checked = data.running;
-        if (settingsRow) settingsRow.style.display = data.running ? '' : 'none';
-        if (scanNowBtn) scanNowBtn.style.display = data.running ? '' : 'none';
-
-        // Live scan + per-track processing progress.
-        // `active_imports` (added when the worker switched to a bounded
-        // executor pool) is the source of truth; multiple albums can be
-        // in flight at once. Render each one on its own line; fall back
-        // to the legacy single-line summary for older backend payloads.
-        if (progressEl) {
-            const active = Array.isArray(data.active_imports) ? data.active_imports : [];
-            if (active.length > 0) {
-                progressEl.style.display = '';
-                if (progressText) {
-                    const lines = active.map(a => {
-                        const folder = a.folder_name || '...';
-                        const idx = a.track_index || 0;
-                        const total = a.track_total || 0;
-                        const trackName = a.track_name || '';
-                        if (a.status === 'processing' && total > 0) {
-                            return `${folder} — track ${idx}/${total}: ${trackName}`;
-                        }
-                        if (a.status === 'matching') return `${folder} — matching tracks…`;
-                        if (a.status === 'identifying') return `${folder} — identifying…`;
-                        return `${folder} — queued`;
-                    });
-                    progressText.textContent = lines.length === 1
-                        ? `Processing ${lines[0]}`
-                        : `Processing ${lines.length} imports:\n${lines.join('\n')}`;
-                }
-            } else if (data.current_status === 'scanning') {
-                progressEl.style.display = '';
-                if (progressText) {
-                    const stats = data.stats || {};
-                    progressText.textContent = `Scanning… (${stats.scanned || 0} processed)`;
-                }
-            } else {
-                progressEl.style.display = 'none';
-            }
-        }
-
-        if (statusText) {
-            if (data.paused) statusText.textContent = 'Paused';
-            else if (data.current_status === 'processing') statusText.textContent = 'Processing...';
-            else if (data.current_status === 'scanning') statusText.textContent = 'Scanning...';
-            else if (data.running) {
-                // Show last scan time
-                let watchText = 'Watching';
-                if (data.last_scan_time) {
-                    try {
-                        const lastScan = new Date(data.last_scan_time);
-                        const diffS = Math.floor((Date.now() - lastScan) / 1000);
-                        if (diffS < 60) watchText = `Watching (scanned ${diffS}s ago)`;
-                        else if (diffS < 3600) watchText = `Watching (scanned ${Math.floor(diffS / 60)}m ago)`;
-                    } catch (e) {}
-                }
-                statusText.textContent = watchText;
-            } else statusText.textContent = 'Disabled';
-            const _runningClass = data.current_status === 'scanning'
-                ? 'scanning'
-                : data.current_status === 'processing'
-                    ? 'processing'
-                    : 'active';
-            statusText.className = 'auto-import-status ' + (data.running ? _runningClass : 'disabled');
-        }
-    } catch (e) {}
-}
-
-async function _autoImportLoadResults() {
-    const container = document.getElementById('auto-import-results');
-    if (!container) return;
-    try {
-        const res = await fetch('/api/auto-import/results?limit=100');
-        const data = await res.json();
-        if (!data.success || !data.results || data.results.length === 0) {
-            if (!container.querySelector('.auto-import-card')) {
-                container.innerHTML = `<div class="auto-import-empty">
-                    <p>No imports yet. Drop album folders or single tracks into your import folder.</p>
-                </div>`;
-            }
-            // Hide stats and filters
-            const statsEl = document.getElementById('auto-import-stats');
-            const filtersEl = document.getElementById('auto-import-filters');
-            if (statsEl) statsEl.style.display = 'none';
-            if (filtersEl) filtersEl.style.display = 'none';
-            return;
-        }
-
-        // Compute stats
-        const allResults = data.results;
-        const importedCount = allResults.filter(r => r.status === 'completed' || r.status === 'approved').length;
-        const reviewCount = allResults.filter(r => r.status === 'pending_review').length;
-        const failedCount = allResults.filter(r => r.status === 'failed' || r.status === 'needs_identification').length;
-
-        // Update stats
-        const statsEl = document.getElementById('auto-import-stats');
-        if (statsEl) {
-            statsEl.style.display = '';
-            document.getElementById('auto-import-stat-imported').textContent = `${importedCount} imported`;
-            document.getElementById('auto-import-stat-review').textContent = `${reviewCount} review`;
-            document.getElementById('auto-import-stat-failed').textContent = `${failedCount} failed`;
-        }
-
-        // Show filters
-        const filtersEl = document.getElementById('auto-import-filters');
-        if (filtersEl) {
-            filtersEl.style.display = '';
-            // Show batch action buttons when applicable
-            const approveAllBtn = document.getElementById('auto-import-approve-all');
-            const clearBtn = document.getElementById('auto-import-clear-completed');
-            if (approveAllBtn) approveAllBtn.style.display = reviewCount > 0 ? '' : 'none';
-            if (clearBtn) clearBtn.style.display = (importedCount + failedCount) > 0 ? '' : 'none';
-        }
-
-        // Apply filter
-        let filtered = allResults;
-        if (_autoImportFilter === 'pending') filtered = allResults.filter(r => r.status === 'pending_review');
-        else if (_autoImportFilter === 'imported') filtered = allResults.filter(r => r.status === 'completed' || r.status === 'approved');
-        else if (_autoImportFilter === 'failed') filtered = allResults.filter(r => r.status === 'failed' || r.status === 'needs_identification');
-
-        if (filtered.length === 0) {
-            const filterName = _autoImportFilter === 'pending' ? 'pending review' : _autoImportFilter;
-            container.innerHTML = `<div class="auto-import-empty"><p>No ${filterName} items.</p></div>`;
-            return;
-        }
-
-        container.innerHTML = filtered.map((r, idx) => {
-            const confPct = Math.round((r.confidence || 0) * 100);
-            const confClass = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
-            const statusLabels = {
-                'completed': 'Imported', 'pending_review': 'Needs Review',
-                'needs_identification': 'Unidentified', 'failed': 'Failed',
-                'scanning': 'Scanning...', 'matched': 'Matched',
-                'rejected': 'Dismissed', 'approved': 'Approved',
-                'processing': 'Processing',
-            };
-            const statusIcons = {
-                'completed': '\u2713', 'pending_review': '\u26A0',
-                'needs_identification': '\u2717', 'failed': '\u2717',
-                'scanning': '\u231B', 'matched': '\u2713',
-                'rejected': '\u2715', 'approved': '\u2713',
-                'processing': '\u29D7',
-            };
-            const statusLabel = statusLabels[r.status] || r.status;
-            const statusIcon = statusIcons[r.status] || '';
-            const statusClass = r.status === 'completed' ? 'completed' : r.status === 'pending_review' ? 'review' :
-                r.status === 'failed' || r.status === 'needs_identification' ? 'failed' :
-                r.status === 'processing' ? 'processing' : 'neutral';
-
-            // Live per-track progress for the row currently being processed.
-            // Match by folder_hash through the `active_imports` array
-            // — the worker now runs multiple imports in parallel via a
-            // bounded executor pool, so `current_folder` alone can't
-            // identify a row's live state.
-            const liveStatus = _autoImportLastStatus;
-            const liveActive = (liveStatus && Array.isArray(liveStatus.active_imports))
-                ? liveStatus.active_imports.find(a => a.folder_hash === r.folder_hash)
-                : null;
-            const isLiveProcessing = r.status === 'processing'
-                && liveActive && liveActive.status === 'processing';
-            const liveTrackIdx = isLiveProcessing ? (liveActive.track_index || 0) : 0;
-            const liveTrackTotal = isLiveProcessing ? (liveActive.track_total || 0) : 0;
-            const liveTrackName = isLiveProcessing ? (liveActive.track_name || '') : '';
-
-            // Parse match data for track details
-            let matchCount = 0, totalTracks = 0, trackDetails = [];
-            if (r.match_data) {
-                try {
-                    const md = typeof r.match_data === 'string' ? JSON.parse(r.match_data) : r.match_data;
-                    matchCount = md.matched_count || 0;
-                    totalTracks = md.total_tracks || 0;
-                    if (md.matches) {
-                        trackDetails = md.matches.map(m => ({
-                            name: m.track_name || m.track?.name || 'Unknown',
-                            file: m.file ? m.file.split(/[/\\]/).pop() : '?',
-                            confidence: Math.round((m.confidence || 0) * 100),
-                        }));
-                    }
-                } catch (e) {}
-            }
-
-            let matchSummary = totalTracks > 0 ? `${matchCount}/${totalTracks} tracks` : `${r.total_files} files`;
-            if (isLiveProcessing && liveTrackTotal > 0) {
-                matchSummary = `track ${liveTrackIdx}/${liveTrackTotal}: ${liveTrackName}`;
-            }
-            const methodLabels = { tags: 'Tags', folder_name: 'Folder Name', acoustid: 'AcoustID', filename: 'Filename' };
-            const methodLabel = methodLabels[r.identification_method] || r.identification_method || '';
-
-            // Time ago
-            let timeAgo = '';
-            if (r.created_at) {
-                try {
-                    const d = new Date(r.created_at);
-                    const diffM = Math.floor((Date.now() - d) / 60000);
-                    if (diffM < 1) timeAgo = 'just now';
-                    else if (diffM < 60) timeAgo = `${diffM}m ago`;
-                    else if (diffM < 1440) timeAgo = `${Math.floor(diffM / 60)}h ago`;
-                    else timeAgo = `${Math.floor(diffM / 1440)}d ago`;
-                } catch (e) {}
-            }
-
-            let actions = '';
-            if (r.status === 'pending_review') {
-                actions = `<div class="auto-import-actions">
-                    <button class="watchlist-action-btn watchlist-action-primary" onclick="event.stopPropagation(); _autoImportApprove(${r.id})">Approve & Import</button>
-                    <button class="watchlist-action-btn watchlist-action-secondary" onclick="event.stopPropagation(); _autoImportReject(${r.id})">Dismiss</button>
-                </div>`;
-            }
-
-            // Expanded track list (hidden by default)
-            let trackListHtml = '';
-            if (trackDetails.length > 0) {
-                trackListHtml = `<div class="auto-import-track-list" id="auto-import-tracks-${idx}">
-                    <div class="auto-import-track-list-header">
-                        <span>Track</span><span>Matched File</span><span>Conf</span>
-                    </div>
-                    ${trackDetails.map((t, tIdx) => {
-                        const tConfClass = t.confidence >= 90 ? 'high' : t.confidence >= 70 ? 'medium' : 'low';
-                        // 1-based liveTrackIdx — current row glows, prior rows dim as "done".
-                        let rowState = '';
-                        if (isLiveProcessing && liveTrackIdx > 0) {
-                            if (tIdx + 1 === liveTrackIdx) rowState = ' auto-import-track-row-active';
-                            else if (tIdx + 1 < liveTrackIdx) rowState = ' auto-import-track-row-done';
-                        }
-                        return `<div class="auto-import-track-row${rowState}">
-                            <span class="auto-import-track-name">${escapeHtml(t.name)}</span>
-                            <span class="auto-import-track-file">${escapeHtml(t.file)}</span>
-                            <span class="auto-import-track-conf auto-import-conf-${tConfClass}">${t.confidence}%</span>
-                        </div>`;
-                    }).join('')}
-                </div>`;
-            }
-
-            return `<div class="auto-import-card auto-import-${statusClass}" onclick="_autoImportToggleDetail(${idx})" style="cursor:pointer">
-                <div class="auto-import-card-top">
-                    <div class="auto-import-card-left">
-                        ${r.image_url ? `<img class="auto-import-card-art" src="${r.image_url}" alt="" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"><div class="auto-import-card-art-fallback" style="display:none">\uD83D\uDCBF</div>` : `<div class="auto-import-card-art-fallback">\uD83D\uDCBF</div>`}
-                    </div>
-                    <div class="auto-import-card-center">
-                        <div class="auto-import-card-album">${escapeHtml(r.album_name || r.folder_name)}</div>
-                        <div class="auto-import-card-artist">${escapeHtml(r.artist_name || 'Unknown Artist')}</div>
-                        <div class="auto-import-card-meta">
-                            <span>${matchSummary}</span>
-                            ${methodLabel ? `<span class="auto-import-method-badge">${methodLabel}</span>` : ''}
-                            ${timeAgo ? `<span>${timeAgo}</span>` : ''}
-                        </div>
-                        ${r.error_message ? `<div class="auto-import-card-error">${escapeHtml(r.error_message)}</div>` : ''}
-                    </div>
-                    <div class="auto-import-card-right">
-                        <div class="auto-import-status-badge auto-import-badge-${statusClass}">${statusIcon} ${statusLabel}</div>
-                        <div class="auto-import-confidence-bar">
-                            <div class="auto-import-confidence-fill auto-import-conf-${confClass}" style="width:${confPct}%"></div>
-                        </div>
-                        <div class="auto-import-confidence-text">${confPct}% confidence</div>
-                        ${actions}
-                    </div>
-                </div>
-                <div class="auto-import-card-folder-path">${escapeHtml(r.folder_name)}</div>
-                ${trackListHtml}
-            </div>`;
-        }).join('');
-
-    } catch (e) {}
-}
-
-async function _autoImportSaveSettings() {
-    const confidence = (document.getElementById('auto-import-confidence')?.value || 90) / 100;
-    const interval = parseInt(document.getElementById('auto-import-interval')?.value || 60);
-    try {
-        await fetch('/api/auto-import/settings', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ confidence_threshold: confidence, scan_interval: interval })
-        });
-        showToast('Settings saved', 'success');
-    } catch (e) { showToast('Error', 'error'); }
-}
-
-function _autoImportSetFilter(filter) {
-    _autoImportFilter = filter;
-    document.querySelectorAll('#auto-import-filters .adl-pill').forEach(p =>
-        p.classList.toggle('active', p.dataset.filter === filter));
-    _autoImportLoadResults();
-}
-
-async function _autoImportScanNow() {
-    try {
-        const res = await fetch('/api/auto-import/scan-now', { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast('Scan triggered', 'success');
-            _autoImportLoadStatus();
-        } else {
-            showToast(data.error || 'Failed to trigger scan', 'error');
-        }
-    } catch (e) { showToast('Error: ' + e.message, 'error'); }
-}
-
-async function _autoImportApproveAll() {
-    const confirmed = await showConfirmDialog({
-        title: 'Approve All',
-        message: 'Approve and import all pending review items?',
-        confirmText: 'Approve All',
-    });
-    if (!confirmed) return;
-    try {
-        const res = await fetch('/api/auto-import/approve-all', { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Approved ${data.count || 0} items`, 'success');
-            _autoImportLoadResults();
-        } else {
-            showToast(data.error || 'Failed', 'error');
-        }
-    } catch (e) { showToast('Error: ' + e.message, 'error'); }
-}
-
-async function _autoImportClearCompleted() {
-    try {
-        const res = await fetch('/api/auto-import/clear-completed', { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Cleared ${data.count || 0} imported items`, 'success');
-            _autoImportLoadResults();
-        } else {
-            showToast(data.error || 'Failed', 'error');
-        }
-    } catch (e) { showToast('Error: ' + e.message, 'error'); }
-}
-
-function _autoImportToggleDetail(idx) {
-    const trackList = document.getElementById(`auto-import-tracks-${idx}`);
-    if (trackList) {
-        trackList.classList.toggle('expanded');
-    }
-}
-window._autoImportToggleDetail = _autoImportToggleDetail;
-window._autoImportSetFilter = _autoImportSetFilter;
-window._autoImportScanNow = _autoImportScanNow;
-window._autoImportApproveAll = _autoImportApproveAll;
-window._autoImportClearCompleted = _autoImportClearCompleted;
-
-async function _autoImportApprove(id) {
-    try {
-        const res = await fetch(`/api/auto-import/approve/${id}`, { method: 'POST' });
-        const data = await res.json();
-        if (data.success) { showToast('Approved', 'success'); _autoImportLoadResults(); }
-        else showToast(data.error || 'Failed', 'error');
-    } catch (e) { showToast('Error', 'error'); }
-}
-
-async function _autoImportReject(id) {
-    try {
-        const res = await fetch(`/api/auto-import/reject/${id}`, { method: 'POST' });
-        const data = await res.json();
-        if (data.success) { showToast('Dismissed', 'success'); _autoImportLoadResults(); }
-        else showToast(data.error || 'Failed', 'error');
-    } catch (e) { showToast('Error', 'error'); }
-}
-
-// --- Album Tab: Auto-Detected Groups (from file tags) ---
-
-async function importPageLoadAutoGroups() {
-    const grid = document.getElementById('import-page-suggestions-grid');
-    if (!grid) return;
-
-    try {
-        const resp = await fetch('/api/import/staging/groups');
-        if (!resp.ok) return;
-        const data = await resp.json();
-
-        if (!data.success || !data.groups || data.groups.length === 0) return;
-
-        // Build auto-groups section above suggestions
-        let groupsContainer = document.getElementById('import-page-auto-groups');
-        if (!groupsContainer) {
-            groupsContainer = document.createElement('div');
-            groupsContainer.id = 'import-page-auto-groups';
-            groupsContainer.style.marginBottom = '16px';
-            const suggestionsSection = document.getElementById('import-page-suggestions');
-            if (suggestionsSection) {
-                suggestionsSection.parentNode.insertBefore(groupsContainer, suggestionsSection);
-            } else {
-                grid.parentNode.insertBefore(groupsContainer, grid);
-            }
-        }
-
-        groupsContainer.innerHTML = `
-            <div style="font-size:0.82em;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:10px;">
-                Auto-Detected Albums
-            </div>
-            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;">
-                ${data.groups.map((g, idx) => `
-                    <div class="import-page-album-card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);transition:all 0.2s;"
-                         onmouseenter="this.style.borderColor='rgba(255,255,255,0.12)';this.style.background='rgba(255,255,255,0.05)'"
-                         onmouseleave="this.style.borderColor='rgba(255,255,255,0.06)';this.style.background='rgba(255,255,255,0.03)'"
-                         onclick="importPageMatchAutoGroup(${idx})">
-                        <div style="width:48px;height:48px;border-radius:8px;background:rgba(var(--accent-rgb,29,185,84),0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2em;">
-                            ${g.file_count}
-                        </div>
-                        <div style="min-width:0;">
-                            <div style="font-size:0.92em;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${_escAttr(g.album)}">${_esc(g.album)}</div>
-                            <div style="font-size:0.8em;color:rgba(255,255,255,0.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${_escAttr(g.artist)}">${_esc(g.artist)} · ${g.file_count} tracks</div>
-                        </div>
-                    </div>
-                `).join('')}
-            </div>
-        `;
-
-        // Store groups for click handler
-        importPageState._autoGroups = data.groups;
-    } catch (err) {
-        console.warn('Failed to load auto-groups:', err);
-    }
-}
-
-async function importPageMatchAutoGroup(groupIdx) {
-    const group = importPageState._autoGroups?.[groupIdx];
-    if (!group) return;
-
-    // Search for the album by name + artist
-    const query = `${group.artist} ${group.album}`;
-    const searchInput = document.getElementById('import-page-album-search-input');
-    if (searchInput) searchInput.value = query;
-
-    // Hide suggestions/groups, show search results
-    const suggestionsEl = document.getElementById('import-page-suggestions');
-    const groupsEl = document.getElementById('import-page-auto-groups');
-    if (suggestionsEl) suggestionsEl.style.display = 'none';
-    if (groupsEl) groupsEl.style.display = 'none';
-
-    const grid = document.getElementById('import-page-album-results');
-    if (grid) grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Searching...</div>';
-
-    try {
-        const resp = await fetch(`/api/import/search/albums?q=${encodeURIComponent(query)}&limit=12`);
-        const data = await resp.json();
-
-        if (data.success && data.albums && data.albums.length > 0) {
-            // Store file_paths filter so match only includes this group's files
-            importPageState._autoGroupFilePaths = group.file_paths;
-
-            // Render results — user picks the right album
-            const banner = _renderImportFallbackBanner(data.albums, data.primary_source);
-            grid.innerHTML = banner + data.albums.map(a => _renderSuggestionCard(a, data.primary_source)).join('');
-        } else {
-            grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">No albums found — try searching manually</div>';
-        }
-    } catch (err) {
-        console.error('Auto-group search failed:', err);
-        if (grid) grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Search failed</div>';
-    }
-}
-
-// --- Album Tab: Suggestions (server-side cache, just fetch and render) ---
-
-async function importPageLoadSuggestions() {
-    const section = document.getElementById('import-page-suggestions');
-    const grid = document.getElementById('import-page-suggestions-grid');
-    if (!section || !grid) return;
-
-    try {
-        const resp = await fetch('/api/import/staging/suggestions');
-        if (!resp.ok) return;
-        const data = await resp.json();
-
-        if (!data.success || !data.suggestions || data.suggestions.length === 0) {
-            if (!data.ready) {
-                // Server is still building cache — show placeholder, retry shortly
-                section.style.display = '';
-                grid.innerHTML = '<div style="color:#888;font-size:13px;padding:8px;">Loading suggestions...</div>';
-                setTimeout(() => importPageLoadSuggestions(), 3000);
-            } else {
-                section.style.display = 'none';
-                grid.innerHTML = '';
-            }
-            return;
-        }
-
-        section.style.display = '';
-        const banner = _renderImportFallbackBanner(data.suggestions, data.primary_source);
-        grid.innerHTML = banner + data.suggestions.map(a => _renderSuggestionCard(a, data.primary_source)).join('');
-    } catch (err) {
-        // Network error or server not ready — fail silently
-        console.warn('Failed to load import suggestions:', err);
-    }
-}
-
-function _renderSuggestionCard(a, primarySource) {
-    // Cache the album lookup so importPageSelectAlbum can pull source +
-    // name + artist on click (the onclick can only carry the ID string
-    // — see github issue #524 root cause).
-    importPageState._albumLookup[a.id] = {
-        id: a.id, name: a.name || '', artist: a.artist || '', source: a.source || '',
-    };
-    // Surface the served source when it differs from the user's configured
-    // primary — the search route silently falls through to the next source
-    // in METADATA_SOURCE_PRIORITY when the primary returns nothing
-    // (intentional design, see core/auto_import_worker.py:1316). Without
-    // this badge the user has no idea their MusicBrainz / Discogs choice
-    // got bypassed (github issue #681).
-    const sourceBadge = (a.source && primarySource && a.source !== primarySource)
-        ? `<div class="import-page-album-card-source">via ${_esc((SOURCE_LABELS[a.source] || {}).text || a.source)}</div>`
-        : '';
-    const metaParts = [
-        `${a.total_tracks || 0} tracks`,
-        a.release_date ? a.release_date.substring(0, 4) : '',
-        a.format || '',
-        a.country || '',
-        a.disambiguation || '',
-    ].filter(Boolean);
-    const details = [a.status || '', a.label || ''].filter(Boolean);
-    const detailsLine = details.length
-        ? `<div class="import-page-album-card-detail">${_esc(details.join(' · '))}</div>`
-        : '';
-    return `<div class="import-page-album-card" onclick="importPageSelectAlbum('${_escAttr(a.id)}')">
-        <img src="${a.image_url || '/static/placeholder-album.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
-        <div class="import-page-album-card-title" title="${_escAttr(a.name)}">${_esc(a.name)}</div>
-        <div class="import-page-album-card-artist" title="${_escAttr(a.artist)}">${_esc(a.artist)}</div>
-        <div class="import-page-album-card-meta">${_esc(metaParts.join(' · '))}</div>
-        ${detailsLine}
-        ${sourceBadge}
-    </div>`;
-}
-
-function _renderImportFallbackBanner(albums, primarySource) {
-    if (!primarySource || !albums || !albums.length) return '';
-    const allFallback = albums.every(a => a.source && a.source !== primarySource);
-    if (!allFallback) return '';
-    const servedSource = albums[0].source;
-    const primaryLabel = (SOURCE_LABELS[primarySource] || {}).text || primarySource;
-    const servedLabel = (SOURCE_LABELS[servedSource] || {}).text || servedSource;
-    // Neutral wording — covers both live-search fallback (primary returned 0)
-    // and cache-stale suggestions (primary changed since cache was built).
-    return `<div class="import-page-fallback-banner">Showing ${_esc(servedLabel)} results — not from your primary source (${_esc(primaryLabel)}).</div>`;
-}
-
-// --- Album Tab: Search ---
-
-async function importPageSearchAlbum() {
-    const query = document.getElementById('import-page-album-search-input').value.trim();
-    if (!query) return;
-
-    document.getElementById('import-page-suggestions').style.display = 'none';
-    const groupsEl = document.getElementById('import-page-auto-groups');
-    if (groupsEl) groupsEl.style.display = 'none';
-    const grid = document.getElementById('import-page-album-results');
-    grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Searching...</div>';
-
-    try {
-        const resp = await fetch(`/api/import/search/albums?q=${encodeURIComponent(query)}&limit=12`);
-        const data = await resp.json();
-        if (!data.success || !data.albums.length) {
-            grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">No albums found</div>';
-            return;
-        }
-        const banner = _renderImportFallbackBanner(data.albums, data.primary_source);
-        grid.innerHTML = banner + data.albums.map(a => _renderSuggestionCard(a, data.primary_source)).join('');
-        document.getElementById('import-page-album-clear-btn').classList.remove('hidden');
-    } catch (err) {
-        grid.innerHTML = `<div style="color:#ef4444;text-align:center;padding:20px;">Error: ${err.message}</div>`;
-    }
-}
-
-// --- Album Tab: Select Album & Match ---
-
-async function importPageSelectAlbum(albumId) {
-    document.getElementById('import-page-album-search-section').classList.add('hidden');
-    document.getElementById('import-page-album-match-section').classList.remove('hidden');
-
-    const matchList = document.getElementById('import-page-match-list');
-    matchList.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Matching files to tracklist...</div>';
-
-    try {
-        // Include file_paths filter if matching from an auto-group.
-        // CRITICAL: include source + album_name + album_artist from the
-        // search/suggestion result. Without `source`, the backend can't
-        // route the lookup to the metadata source the album_id came
-        // from — for example a Deezer album_id needs Deezer's get_album
-        // call. Cross-source lookup fails silently, returns the
-        // failure-fallback dict with album_id-as-name + Unknown Artist
-        // + 0 tracks, then the import flow writes that broken metadata
-        // to the library DB (github issue #524).
-        const cached = importPageState._albumLookup[albumId] || {};
-        const matchBody = {
-            album_id: albumId,
-            source: cached.source || '',
-            album_name: cached.name || '',
-            album_artist: cached.artist || '',
-        };
-        if (importPageState._autoGroupFilePaths) {
-            matchBody.file_paths = importPageState._autoGroupFilePaths;
-            importPageState._autoGroupFilePaths = null; // clear after use
-        }
-        const resp = await fetch('/api/import/album/match', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(matchBody)
-        });
-        const data = await resp.json();
-        if (!data.success) {
-            matchList.innerHTML = `<div style="color:#ef4444;padding:20px;">Error: ${data.error}</div>`;
-            return;
-        }
-
-        importPageState.albumData = data;
-        importPageState.matchOverrides = {};
-
-        // Render hero
-        const album = data.album;
-        const heroMetaParts = [
-            `${album.total_tracks || 0} tracks`,
-            album.release_date ? album.release_date.substring(0, 4) : '',
-            album.format || '',
-            album.country || '',
-            album.disambiguation || '',
-        ].filter(Boolean);
-        document.getElementById('import-page-album-hero').innerHTML = `
-            <img src="${album.image_url || '/static/placeholder-album.png'}" alt="${_escAttr(album.name)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
-            <div class="import-page-album-hero-info">
-                <div class="import-page-album-hero-title">${_esc(album.name)}</div>
-                <div class="import-page-album-hero-artist">${_esc(album.artist)}</div>
-                <div class="import-page-album-hero-meta">${_esc(heroMetaParts.join(' · '))}</div>
-            </div>
-        `;
-
-        importPageRenderMatchList();
-    } catch (err) {
-        matchList.innerHTML = `<div style="color:#ef4444;padding:20px;">Error: ${err.message}</div>`;
-    }
-}
-
-function importPageRenderMatchList() {
-    const data = importPageState.albumData;
-    if (!data) return;
-
-    const matchList = document.getElementById('import-page-match-list');
-    const overrides = importPageState.matchOverrides;
-
-    // Build effective matches: auto-match overridden by manual overrides
-    // Also track which staging files are used (auto or override)
-    const usedStagingFiles = new Set();
-
-    // First pass: collect overridden indices
-    Object.values(overrides).forEach(sfIdx => usedStagingFiles.add(sfIdx));
-
-    // Build rows
-    let matchedCount = 0;
-    const rows = data.matches.map((m, idx) => {
-        const trackInfo = _importPageGetTrackDisplayInfo(m, idx);
-        let file = null;
-        let confidence = m.confidence;
-        let isOverride = false;
-
-        if (overrides.hasOwnProperty(idx)) {
-            const sfIdx = overrides[idx];
-            if (sfIdx === -1) {
-                // Forcibly unmatched — no file
-                file = null;
-            } else {
-                // Manual override
-                file = importPageState.stagingFiles[sfIdx] || null;
-                confidence = 1.0;
-                isOverride = true;
-                usedStagingFiles.add(sfIdx);
-            }
-        } else if (m.staging_file) {
-            file = m.staging_file;
-            // Check if this file was reassigned to another track via override
-            const autoFileName = m.staging_file.filename;
-            const reassigned = Object.entries(overrides).some(([tIdx, sfIdx]) => {
-                const sf = importPageState.stagingFiles[sfIdx];
-                return sf && sf.filename === autoFileName && parseInt(tIdx) !== idx;
-            });
-            if (!reassigned) {
-                usedStagingFiles.add(-1); // placeholder — auto-matched file
-            } else {
-                file = null; // file was reassigned elsewhere
-            }
-        }
-
-        if (file) matchedCount++;
-        const confPercent = Math.round(confidence * 100);
-        const confClass = confidence >= 0.7 ? '' : 'low';
-
-        return `
-            <div class="import-page-match-row ${file ? 'matched' : ''}"
-                 ondragover="importPageHandleDragOver(event)" ondragleave="this.classList.remove('drag-over')" ondrop="importPageHandleDrop(event, ${idx})"
-                 onclick="importPageTapAssign(${idx})">
-                <span class="import-page-match-num">${trackInfo.displayTrackNumber}</span>
-                <span class="import-page-match-track">${_esc(trackInfo.name)}</span>
-                <span class="import-page-match-file ${file ? 'has-file' : ''}">
-                    ${file
-                ? `<span class="import-page-match-file-name">${_esc(file.filename)}</span>
-                           <span class="import-page-match-confidence ${confClass}">${confPercent}%</span>`
-                : `<span class="import-page-match-drop-zone">Drop a file here</span>`}
-                </span>
-                <span>${file ? `<button class="import-page-match-unmatch" onclick="event.stopPropagation(); importPageUnmatchTrack(${idx})">✕</button>` : ''}</span>
-            </div>
-        `;
-    });
-
-    matchList.innerHTML = rows.join('');
-
-    // Unmatched file pool
-    const unmatchedFiles = [];
-    importPageState.stagingFiles.forEach((f, i) => {
-        // Check if used by override
-        if (Object.values(overrides).includes(i)) return;
-        // Check if used by auto-match (not overridden away)
-        const autoUsed = data.matches.some((m, mIdx) => {
-            if (overrides.hasOwnProperty(mIdx)) return false;
-            return m.staging_file && m.staging_file.filename === f.filename;
-        });
-        if (autoUsed) return;
-        unmatchedFiles.push({ file: f, index: i });
-    });
-
-    const poolChips = document.getElementById('import-page-pool-chips');
-    document.getElementById('import-page-unmatched-count').textContent = unmatchedFiles.length;
-
-    if (unmatchedFiles.length === 0) {
-        poolChips.innerHTML = '<span class="import-page-pool-empty">All files matched</span>';
-    } else {
-        poolChips.innerHTML = unmatchedFiles.map(({ file, index }) => `
-            <span class="import-page-file-chip ${importPageState.tapSelectedChip === index ? 'selected' : ''}"
-                  draggable="true" ondragstart="importPageStartDrag(event, ${index})"
-                  onclick="event.stopPropagation(); importPageTapSelectChip(${index})">
-                ${_esc(file.filename)}
-            </span>
-        `).join('');
-    }
-
-    // Stats & button
-    document.getElementById('import-page-match-stats').textContent = `${matchedCount} of ${data.matches.length} tracks matched`;
-    const processBtn = document.getElementById('import-page-album-process-btn');
-    processBtn.disabled = matchedCount === 0;
-    processBtn.textContent = `Process ${matchedCount} Track${matchedCount !== 1 ? 's' : ''}`;
-}
-
-function _importPageGetTrackDisplayInfo(item, index) {
-    const track = item?.track || item?.spotify_track || {};
-    const rawTrackNumber = track.track_number ?? track.trackNumber ?? null;
-    const trackNumber = rawTrackNumber === null || rawTrackNumber === undefined || rawTrackNumber === ''
-        ? null
-        : String(rawTrackNumber).split('/')[0].trim();
-
-    return {
-        track,
-        name: track.name || track.title || `Track ${index + 1}`,
-        trackNumber,
-        displayTrackNumber: trackNumber || String(index + 1),
-    };
-}
-
-// --- Album Tab: Drag and Drop ---
-
-function importPageStartDrag(event, stagingFileIndex) {
-    event.dataTransfer.setData('text/plain', stagingFileIndex.toString());
-    event.dataTransfer.effectAllowed = 'move';
-}
-
-function importPageHandleDragOver(event) {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
-    event.currentTarget.classList.add('drag-over');
-    // Remove drag-over from others
-    document.querySelectorAll('.import-page-match-row.drag-over').forEach(el => {
-        if (el !== event.currentTarget) el.classList.remove('drag-over');
-    });
-}
-
-function importPageHandleDrop(event, trackIndex) {
-    event.preventDefault();
-    event.currentTarget.classList.remove('drag-over');
-    const stagingFileIndex = parseInt(event.dataTransfer.getData('text/plain'));
-    if (isNaN(stagingFileIndex)) return;
-
-    // Remove this staging file from any other track it was assigned to
-    Object.keys(importPageState.matchOverrides).forEach(k => {
-        if (importPageState.matchOverrides[k] === stagingFileIndex) {
-            delete importPageState.matchOverrides[k];
-        }
-    });
-
-    importPageState.matchOverrides[trackIndex] = stagingFileIndex;
-    importPageState.tapSelectedChip = null;
-    importPageRenderMatchList();
-}
-
-// Mobile tap-to-assign fallback
-function importPageTapSelectChip(stagingFileIndex) {
-    if (importPageState.tapSelectedChip === stagingFileIndex) {
-        importPageState.tapSelectedChip = null;
-    } else {
-        importPageState.tapSelectedChip = stagingFileIndex;
-    }
-    importPageRenderMatchList();
-}
-
-function importPageTapAssign(trackIndex) {
-    if (importPageState.tapSelectedChip === null) return;
-    const stagingFileIndex = importPageState.tapSelectedChip;
-
-    // Remove from any other track
-    Object.keys(importPageState.matchOverrides).forEach(k => {
-        if (importPageState.matchOverrides[k] === stagingFileIndex) {
-            delete importPageState.matchOverrides[k];
-        }
-    });
-
-    importPageState.matchOverrides[trackIndex] = stagingFileIndex;
-    importPageState.tapSelectedChip = null;
-    importPageRenderMatchList();
-}
-
-function importPageUnmatchTrack(trackIndex) {
-    delete importPageState.matchOverrides[trackIndex];
-    // Also remove auto-match by setting override to -1 special value? No — just delete override and let auto-match stay.
-    // Actually, to truly unmatch: we need to suppress the auto-match too.
-    // We'll use a sentinel: override = -1 means "forcibly unmatched"
-    const m = importPageState.albumData?.matches[trackIndex];
-    if (m && m.staging_file) {
-        importPageState.matchOverrides[trackIndex] = -1; // sentinel: force no match
-    }
-    importPageRenderMatchList();
-}
-
-function importPageAutoRematch() {
-    importPageState.matchOverrides = {};
-    importPageState.tapSelectedChip = null;
-    importPageRenderMatchList();
-}
-
-// --- Album Tab: Process ---
-
-function importPageProcessAlbum() {
-    const data = importPageState.albumData;
-    if (!data) return;
-
-    // Build effective matches with overrides applied
-    const overrides = importPageState.matchOverrides;
-    const effectiveMatches = [];
-    data.matches.forEach((m, idx) => {
-        if (overrides.hasOwnProperty(idx)) {
-            if (overrides[idx] === -1) return; // forcibly unmatched — skip
-            const sf = importPageState.stagingFiles[overrides[idx]];
-            effectiveMatches.push({ ...m, staging_file: sf, confidence: 1.0 });
-        } else if (m.staging_file !== null) {
-            effectiveMatches.push(m);
-        }
-    });
-
-    if (effectiveMatches.length === 0) return;
-
-    // Add to queue and reset search immediately so user can queue more
-    const album = data.album;
-    _importQueueAdd({
-        type: 'album',
-        label: album.name,
-        sublabel: `${album.artist} · ${effectiveMatches.length} tracks`,
-        imageUrl: album.image_url,
-        items: effectiveMatches,
-        albumData: album,
-    });
-
-    importPageResetAlbumSearch();
-}
-
-function importPageResetAlbumSearch() {
-    importPageState.albumData = null;
-    importPageState.matchOverrides = {};
-    importPageState.tapSelectedChip = null;
-    importPageState._autoGroupFilePaths = null;
-
-    document.getElementById('import-page-album-search-section').classList.remove('hidden');
-    document.getElementById('import-page-album-match-section').classList.add('hidden');
-
-    // Clear search
-    document.getElementById('import-page-album-results').innerHTML = '';
-    document.getElementById('import-page-album-search-input').value = '';
-    document.getElementById('import-page-album-clear-btn').classList.add('hidden');
-
-    // Re-show auto-groups
-    const groupsEl = document.getElementById('import-page-auto-groups');
-    if (groupsEl) groupsEl.style.display = '';
-
-    // Refresh suggestions & staging
-    importPageLoadAutoGroups();
-    importPageLoadSuggestions();
-    importPageRefreshStaging();
-}
-
-// --- Singles Tab ---
-
-function importPageRenderSinglesList() {
-    const list = document.getElementById('import-page-singles-list');
-    const files = importPageState.stagingFiles;
-
-    if (files.length === 0) {
-        list.innerHTML = '<div class="import-page-empty-state">No audio files found in import folder</div>';
-        return;
-    }
-
-    list.innerHTML = files.map((f, i) => {
-        const isSelected = importPageState.selectedSingles.has(i);
-        const manualMatch = importPageState.singlesManualMatches[i];
-        const searchOpen = document.querySelector(`[data-singles-search="${i}"]`);
-
-        let html = `
-            <div class="import-page-single-item ${manualMatch ? 'matched' : ''}" data-single-idx="${i}">
-                <div class="import-page-single-checkbox ${isSelected ? 'checked' : ''}"
-                     onclick="importPageToggleSingle(${i})"></div>
-                <div class="import-page-single-info">
-                    <div class="import-page-single-filename">${_esc(f.filename)}</div>
-                    <div class="import-page-single-meta">
-                        ${f.title ? `<span>${_esc(f.title)}</span>` : ''}
-                        ${f.artist ? `<span>${_esc(f.artist)}</span>` : ''}
-                        ${f.extension ? `<span>${f.extension}</span>` : ''}
-                    </div>
-                    ${manualMatch ? `
-                        <div class="import-page-single-matched-info">
-                            &#10003; ${_esc(manualMatch.name)} - ${_esc(manualMatch.artist)}
-                            <span class="import-page-single-matched-change" onclick="event.stopPropagation(); importPageOpenSingleSearch(${i})">change</span>
-                        </div>
-                    ` : ''}
-                </div>
-                <div class="import-page-single-actions">
-                    <button class="import-page-identify-btn" onclick="event.stopPropagation(); importPageOpenSingleSearch(${i})">
-                        &#128269; Identify
-                    </button>
-                </div>
-            </div>
-        `;
-        return html;
-    }).join('');
-
-    importPageUpdateSinglesProcessButton();
-}
-
-function importPageToggleSingle(idx) {
-    if (importPageState.selectedSingles.has(idx)) {
-        importPageState.selectedSingles.delete(idx);
-    } else {
-        importPageState.selectedSingles.add(idx);
-    }
-    // Update checkbox UI without full re-render
-    const item = document.querySelector(`[data-single-idx="${idx}"]`);
-    if (item) {
-        const cb = item.querySelector('.import-page-single-checkbox');
-        if (cb) cb.classList.toggle('checked', importPageState.selectedSingles.has(idx));
-    }
-    importPageUpdateSinglesProcessButton();
-}
-
-function importPageSelectAllSingles() {
-    const allSelected = importPageState.selectedSingles.size === importPageState.stagingFiles.length;
-    if (allSelected) {
-        importPageState.selectedSingles.clear();
-    } else {
-        importPageState.stagingFiles.forEach((_, i) => importPageState.selectedSingles.add(i));
-    }
-    document.getElementById('import-page-select-all-text').textContent = allSelected ? 'Select All' : 'Deselect All';
-    // Update all checkboxes
-    document.querySelectorAll('.import-page-single-checkbox').forEach((cb, i) => {
-        cb.classList.toggle('checked', importPageState.selectedSingles.has(i));
-    });
-    importPageUpdateSinglesProcessButton();
-}
-
-function importPageUpdateSinglesProcessButton() {
-    const btn = document.getElementById('import-page-singles-process-btn');
-    const count = importPageState.selectedSingles.size;
-    btn.textContent = `Process Selected (${count})`;
-    btn.disabled = count === 0;
-}
-
-function importPageOpenSingleSearch(fileIdx) {
-    const item = document.querySelector(`[data-single-idx="${fileIdx}"]`);
-    if (!item) return;
-
-    // Remove any existing search panel
-    const existing = item.querySelector('.import-page-single-search-panel');
-    if (existing) {
-        existing.remove();
-        return;
-    }
-
-    // Close other open panels
-    document.querySelectorAll('.import-page-single-search-panel').forEach(p => p.remove());
-
-    const f = importPageState.stagingFiles[fileIdx];
-    const defaultQuery = [f.artist, f.title].filter(Boolean).join(' ') || f.filename.replace(/\.[^.]+$/, '');
-
-    const panel = document.createElement('div');
-    panel.className = 'import-page-single-search-panel';
-    panel.innerHTML = `
-        <div class="import-page-single-search-bar">
-            <input type="text" class="import-page-single-search-input"
-                   value="${_escAttr(defaultQuery)}" placeholder="Search artist - title..."
-                   onkeydown="if(event.key==='Enter')importPageSearchSingleTrack(${fileIdx}, this.value)">
-            <button class="import-page-single-search-go"
-                    onclick="importPageSearchSingleTrack(${fileIdx}, this.previousElementSibling.value)">Search</button>
-        </div>
-        <div class="import-page-single-search-results" id="import-single-results-${fileIdx}"></div>
-    `;
-    item.appendChild(panel);
-
-    // Auto-search
-    const input = panel.querySelector('input');
-    input.focus();
-    if (defaultQuery) {
-        importPageSearchSingleTrack(fileIdx, defaultQuery);
-    }
-}
-
-async function importPageSearchSingleTrack(fileIdx, query) {
-    if (!query || !query.trim()) return;
-
-    const resultsDiv = document.getElementById(`import-single-results-${fileIdx}`);
-    if (!resultsDiv) return;
-    resultsDiv.innerHTML = '<div style="color:#888;padding:8px;font-size:12px;">Searching...</div>';
-
-    try {
-        const resp = await fetch(`/api/import/search/tracks?q=${encodeURIComponent(query.trim())}&limit=6`);
-        const data = await resp.json();
-        if (!data.success || !data.tracks.length) {
-            resultsDiv.innerHTML = '<div style="color:#888;padding:8px;font-size:12px;">No results found</div>';
-            return;
-        }
-        // Store results in a temp cache so we can reference by index
-        window._importSingleSearchResults = window._importSingleSearchResults || {};
-        window._importSingleSearchResults[fileIdx] = data.tracks;
-
-        resultsDiv.innerHTML = data.tracks.map((t, tIdx) => {
-            const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
-            return `
-                <div class="import-page-single-result-item" onclick="importPageSelectSingleMatch(${fileIdx}, ${tIdx})">
-                    ${t.image_url ? `<img class="import-page-single-result-img" src="${t.image_url}" onerror="this.src='/static/placeholder-album.png'">` : ''}
-                    <div class="import-page-single-result-info">
-                        <div class="import-page-single-result-name">${_esc(t.name)} - ${_esc(t.artist)}</div>
-                        <div class="import-page-single-result-detail">${_esc(t.album)}${dur ? ' · ' + dur : ''}</div>
-                    </div>
-                    <button class="import-page-single-result-select">Select</button>
-                </div>
-            `;
-        }).join('');
-    } catch (err) {
-        resultsDiv.innerHTML = `<div style="color:#ef4444;padding:8px;font-size:12px;">Error: ${err.message}</div>`;
-    }
-}
-
-function importPageSelectSingleMatch(fileIdx, trackIdx) {
-    const trackData = window._importSingleSearchResults?.[fileIdx]?.[trackIdx];
-    if (!trackData) return;
-    importPageState.singlesManualMatches[fileIdx] = trackData;
-
-    // Auto-select this file
-    importPageState.selectedSingles.add(fileIdx);
-
-    // Close search panel and re-render this item
-    importPageRenderSinglesList();
-}
-
-// --- Singles Tab: Process ---
-
-function importPageProcessSingles() {
-    if (importPageState.selectedSingles.size === 0) return;
-
-    const filesToProcess = Array.from(importPageState.selectedSingles).map(i => {
-        const f = importPageState.stagingFiles[i];
-        const manualMatch = importPageState.singlesManualMatches[i];
-        if (manualMatch) {
-            return { ...f, manual_match: manualMatch };
-        }
-        return f;
-    });
-
-    // Add to queue and reset immediately
-    _importQueueAdd({
-        type: 'singles',
-        label: `${filesToProcess.length} Single${filesToProcess.length !== 1 ? 's' : ''}`,
-        sublabel: filesToProcess.map(f => f.title || f.filename).slice(0, 3).join(', ') + (filesToProcess.length > 3 ? '...' : ''),
-        imageUrl: null,
-        items: filesToProcess,
-    });
-
-    importPageState.selectedSingles.clear();
-    importPageState.singlesManualMatches = {};
-    importPageUpdateSinglesProcessButton();
-    importPageRefreshStaging();
-}
-
-// --- Processing Queue ---
-
-const _importQueue = []; // { id, type, label, sublabel, imageUrl, status, processed, total, errors }
-
-function _importQueueAdd(job) {
-    const id = ++importJobIdCounter;
-    const entry = {
-        id,
-        type: job.type,
-        label: job.label,
-        sublabel: job.sublabel,
-        imageUrl: job.imageUrl,
-        status: 'running',   // running | done | error
-        processed: 0,
-        total: job.items.length,
-        errors: [],
-    };
-    _importQueue.push(entry);
-    _importQueueRender();
-
-    // Fire and forget — runs in background
-    _importQueueRunJob(entry, job);
-}
-
-async function _importQueueRunJob(entry, job) {
-    for (let i = 0; i < job.items.length; i++) {
-        const itemName = job.type === 'album'
-            ? _importPageGetTrackDisplayInfo(job.items[i], i).name
-            : (job.items[i].title || job.items[i].filename || `File ${i + 1}`);
-
-        // Update status with current track info
-        entry.sublabel = `Processing ${i + 1}/${job.items.length}: ${itemName}`;
-        _importQueueRender();
-
-        try {
-            let resp;
-            if (job.type === 'album') {
-                resp = await fetch('/api/import/album/process', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        album: job.albumData,
-                        matches: [job.items[i]]
-                    })
-                });
-            } else {
-                resp = await fetch('/api/import/singles/process', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ files: [job.items[i]] })
-                });
-            }
-
-            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-            const data = await resp.json();
-            if (data.success) entry.processed += (data.processed || 0);
-            if (data.errors && data.errors.length > 0) entry.errors.push(...data.errors);
-        } catch (err) {
-            entry.errors.push(`${itemName}: ${err.message}`);
-        }
-
-        _importQueueRender();
-    }
-
-    entry.status = entry.errors.length > 0 && entry.processed === 0 ? 'error' : 'done';
-    _importQueueRender();
-
-    // Refresh staging and suggestions since files moved
-    importPageRefreshStaging();
-    importPageLoadSuggestions();
-}
-
-function _importQueueRender() {
-    const container = document.getElementById('import-page-queue');
-    const list = document.getElementById('import-page-queue-list');
-    const clearBtn = document.getElementById('import-page-queue-clear');
-    if (!container || !list) return;
-
-    if (_importQueue.length === 0) {
-        container.classList.add('hidden');
-        return;
-    }
-
-    container.classList.remove('hidden');
-
-    // Show clear button only if there are finished jobs
-    const hasFinished = _importQueue.some(j => j.status !== 'running');
-    clearBtn.style.display = hasFinished ? '' : 'none';
-
-    list.innerHTML = _importQueue.map(j => {
-        const pct = j.total > 0 ? Math.round((j.processed / j.total) * 100) : 0;
-        const fillClass = j.status === 'error' ? 'error' : '';
-        let statusText, statusClass;
-        if (j.status === 'running') {
-            statusText = `${j.processed}/${j.total}`;
-            statusClass = '';
-        } else if (j.status === 'done') {
-            statusText = j.errors.length > 0 ? `${j.processed}/${j.total} (${j.errors.length} err)` : 'Done';
-            statusClass = j.errors.length > 0 ? 'error' : 'done';
-        } else {
-            statusText = 'Failed';
-            statusClass = 'error';
-        }
-
-        return `
-            <div class="import-page-queue-item">
-                ${j.imageUrl
-                ? `<img class="import-page-queue-art" src="${j.imageUrl}" onerror="this.src='/static/placeholder-album.png'">`
-                : `<div class="import-page-queue-art" style="background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,0.3);">&#9834;</div>`}
-                <div class="import-page-queue-info">
-                    <div class="import-page-queue-name">${_esc(j.label)}</div>
-                    <div class="import-page-queue-detail">${_esc(j.sublabel)}</div>
-                </div>
-                <div class="import-page-queue-progress">
-                    <div class="import-page-queue-bar">
-                        <div class="import-page-queue-fill ${fillClass}" style="width:${j.status === 'done' || j.status === 'error' ? 100 : pct}%"></div>
-                    </div>
-                    <div class="import-page-queue-status ${statusClass}">${statusText}</div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-function importPageClearFinishedJobs() {
-    for (let i = _importQueue.length - 1; i >= 0; i--) {
-        if (_importQueue[i].status !== 'running') {
-            _importQueue.splice(i, 1);
-        }
-    }
-    _importQueueRender();
-}
-
 // ── Import File Tab ──────────────────────────────────────────────────
 
 let _importFileState = {
@@ -6056,14 +4682,15 @@ async function playArtistRadio() {
         const albumArt = random.album.thumb_url || data.artist?.thumb_url || null;
 
         // Clear existing queue and disable radio before starting fresh
-        npSetRadioMode(false, { toast: false });
+        npRadioMode = false;
         clearQueue();
         if (audioPlayer && !audioPlayer.paused) {
             audioPlayer.pause();
         }
 
-        // Play the track first so currentTrack is populated before radio seeds the queue.
-        await playLibraryTrack({
+        // Play the track first, then enable radio mode after a short delay
+        // so currentTrack is set and the radio queue fill triggers
+        playLibraryTrack({
             id: random.track.id,
             title: random.track.title,
             file_path: random.track.file_path,
@@ -6072,9 +4699,14 @@ async function playArtistRadio() {
             album_id: random.album.id,
         }, random.album.title || '', artistName);
 
-        npSetRadioMode(true, { toast: false, fetchIfNeeded: true });
+        // Enable radio mode after track starts loading
+        setTimeout(() => {
+            npRadioMode = true;
+            const radioBtn = document.querySelector('.np-radio-btn');
+            if (radioBtn) radioBtn.classList.add('active');
+        }, 1000);
 
-        showToast(`Playing ${artistName} radio - similar tracks will auto-queue`, 'success');
+        showToast(`Playing ${artistName} radio — similar tracks will auto-queue`, 'success');
     } catch (e) {
         showToast(`Failed to start artist radio: ${e.message}`, 'error');
     }
diff --git a/webui/static/style.css b/webui/static/style.css
index ea65ca7f..7706efc0 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -10376,8 +10376,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     border-color: rgba(167, 139, 250, 0.25);
 }
 
-.library-history-badge.download.source-staging,
-.library-history-badge.download.source-auto-import {
+.library-history-badge.download.source-staging {
     color: rgba(255, 255, 255, 0.55);
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 255, 255, 0.12);
@@ -40072,956 +40071,6 @@ div.artist-hero-badge {
     opacity: 1;
 }
 
-/* ========================================
-   IMPORT PAGE (full page, replaces modal)
-   ======================================== */
-
-/* ============================================================================
-   IMPORT PAGE
-   ============================================================================ */
-
-.import-page-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 24px 32px;
-}
-
-.import-page-header {
-    margin-bottom: 20px;
-}
-
-.import-page-title-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-}
-
-.import-page-title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    letter-spacing: -0.3px;
-    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-    display: flex;
-    align-items: center;
-    gap: 14px;
-}
-
-.import-page-title > span {
-    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
-    background-size: 200% 100%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    animation: page-title-shimmer 6s ease-in-out infinite;
-}
-
-.import-page-refresh-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 16px;
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 8px;
-    color: #ccc;
-    font-size: 13px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.import-page-refresh-btn:hover {
-    background: rgba(255, 255, 255, 0.14);
-    color: #fff;
-}
-
-.import-page-staging-bar {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 10px 16px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 10px;
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.import-staging-path {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.import-staging-stats {
-    color: rgb(var(--accent-light-rgb));
-    font-weight: 500;
-    white-space: nowrap;
-}
-
-/* Tab Bar */
-.import-page-tab-bar {
-    display: flex;
-    gap: 4px;
-    margin-bottom: 24px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    padding-bottom: 0;
-}
-
-.import-page-tab {
-    padding: 10px 24px;
-    background: none;
-    border: none;
-    border-bottom: 2px solid transparent;
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    margin-bottom: -1px;
-}
-
-.import-page-tab:hover {
-    color: rgba(255, 255, 255, 0.8);
-}
-
-.import-page-tab.active {
-    color: rgb(var(--accent-light-rgb));
-    border-bottom-color: rgb(var(--accent-light-rgb));
-}
-
-.import-page-tab-content {
-    display: none;
-}
-
-.import-page-tab-content.active {
-    display: block;
-}
-
-/* Section labels */
-.import-page-section-label {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.4);
-    margin-bottom: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-weight: 500;
-}
-
-/* Search bar */
-.import-page-search-bar {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 20px;
-    position: relative;
-}
-
-.import-page-search-input {
-    flex: 1;
-    padding: 10px 16px;
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 10px;
-    color: #fff;
-    font-size: 14px;
-    outline: none;
-    transition: border-color 0.2s;
-}
-
-.import-page-search-input:focus {
-    border-color: rgba(var(--accent-light-rgb), 0.5);
-}
-
-.import-page-search-btn {
-    padding: 10px 20px;
-    background: rgb(var(--accent-light-rgb));
-    border: none;
-    border-radius: 10px;
-    color: #000;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.2s;
-    white-space: nowrap;
-}
-
-.import-page-search-btn:hover {
-    background: #1fdf64;
-}
-
-.import-page-clear-btn {
-    position: absolute;
-    right: 100px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    color: rgba(255, 255, 255, 0.4);
-    font-size: 16px;
-    cursor: pointer;
-    padding: 4px 8px;
-}
-
-.import-page-clear-btn:hover {
-    color: #fff;
-}
-
-/* Album grid */
-.import-page-album-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 16px;
-    margin-bottom: 24px;
-}
-
-.import-page-album-card {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    padding: 12px;
-    cursor: pointer;
-    transition: all 0.2s;
-    text-align: center;
-}
-
-.import-page-album-card:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(var(--accent-light-rgb), 0.3);
-    transform: translateY(-2px);
-}
-
-.import-page-album-card img {
-    width: 100%;
-    aspect-ratio: 1;
-    object-fit: cover;
-    border-radius: 8px;
-    margin-bottom: 8px;
-}
-
-.import-page-album-card-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: #fff;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 2px;
-}
-
-.import-page-album-card-artist {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.import-page-album-card-meta {
-    font-size: 10px;
-    color: rgba(255, 255, 255, 0.3);
-    margin-top: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.import-page-album-card-detail {
-    font-size: 10px;
-    color: rgba(255, 255, 255, 0.36);
-    margin-top: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.import-page-album-card-source {
-    font-size: 10px;
-    color: rgba(255, 200, 100, 0.75);
-    margin-top: 2px;
-    font-style: italic;
-}
-
-.import-page-fallback-banner {
-    grid-column: 1 / -1;
-    padding: 10px 14px;
-    margin-bottom: 12px;
-    background: rgba(255, 200, 100, 0.08);
-    border: 1px solid rgba(255, 200, 100, 0.25);
-    border-radius: 8px;
-    color: rgba(255, 220, 170, 0.9);
-    font-size: 12px;
-    line-height: 1.4;
-}
-
-/* Album hero (selected album) */
-.import-page-album-hero {
-    display: flex;
-    gap: 20px;
-    padding: 20px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 14px;
-    margin-bottom: 20px;
-    align-items: center;
-}
-
-.import-page-album-hero img {
-    width: 120px;
-    height: 120px;
-    border-radius: 10px;
-    object-fit: cover;
-    flex-shrink: 0;
-}
-
-.import-page-album-hero-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.import-page-album-hero-title {
-    font-size: 22px;
-    font-weight: 700;
-    color: #fff;
-    margin-bottom: 4px;
-}
-
-.import-page-album-hero-artist {
-    font-size: 15px;
-    color: rgba(255, 255, 255, 0.6);
-    margin-bottom: 4px;
-}
-
-.import-page-album-hero-meta {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.35);
-}
-
-/* Match header */
-.import-page-match-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
-}
-
-.import-page-match-header h3 {
-    font-size: 16px;
-    font-weight: 600;
-    color: #fff;
-    margin: 0;
-}
-
-.import-page-match-actions {
-    display: flex;
-    gap: 8px;
-}
-
-/* Match list */
-.import-page-match-list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    margin-bottom: 16px;
-}
-
-.import-page-match-row {
-    display: grid;
-    grid-template-columns: 36px 1fr 1fr 36px;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 14px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 10px;
-    min-height: 44px;
-    transition: all 0.2s;
-}
-
-.import-page-match-row.drag-over {
-    background: rgba(var(--accent-light-rgb), 0.08);
-    border-color: rgba(var(--accent-light-rgb), 0.4);
-    box-shadow: 0 0 12px rgba(var(--accent-light-rgb), 0.15);
-}
-
-.import-page-match-row.matched {
-    border-color: rgba(var(--accent-light-rgb), 0.2);
-}
-
-.import-page-match-num {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.3);
-    text-align: center;
-    font-weight: 500;
-}
-
-.import-page-match-track {
-    font-size: 13px;
-    color: #fff;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.import-page-match-file {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.4);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    overflow: hidden;
-}
-
-.import-page-match-file.has-file {
-    color: rgb(var(--accent-light-rgb));
-}
-
-.import-page-match-file-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.import-page-match-confidence {
-    font-size: 10px;
-    padding: 2px 6px;
-    border-radius: 4px;
-    background: rgba(var(--accent-light-rgb), 0.15);
-    color: rgb(var(--accent-light-rgb));
-    font-weight: 500;
-    white-space: nowrap;
-}
-
-.import-page-match-confidence.low {
-    background: rgba(255, 165, 0, 0.15);
-    color: #ffa500;
-}
-
-.import-page-match-drop-zone {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.25);
-    font-style: italic;
-}
-
-.import-page-match-unmatch {
-    background: none;
-    border: none;
-    color: rgba(255, 255, 255, 0.3);
-    font-size: 14px;
-    cursor: pointer;
-    padding: 4px;
-    border-radius: 4px;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.import-page-match-unmatch:hover {
-    color: #ff4444;
-    background: rgba(255, 68, 68, 0.1);
-}
-
-/* Unmatched file pool */
-.import-page-unmatched-pool {
-    padding: 16px;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px dashed rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    margin-bottom: 16px;
-}
-
-.import-page-pool-label {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.4);
-    margin-bottom: 10px;
-    font-weight: 500;
-}
-
-.import-page-pool-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.import-page-file-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 20px;
-    font-size: 12px;
-    color: #ccc;
-    cursor: grab;
-    transition: all 0.2s;
-    user-select: none;
-}
-
-.import-page-file-chip:active {
-    cursor: grabbing;
-}
-
-.import-page-file-chip:hover {
-    background: rgba(255, 255, 255, 0.14);
-    border-color: rgba(var(--accent-light-rgb), 0.3);
-    color: #fff;
-}
-
-.import-page-file-chip.selected {
-    background: rgba(var(--accent-light-rgb), 0.15);
-    border-color: rgba(var(--accent-light-rgb), 0.4);
-    color: rgb(var(--accent-light-rgb));
-}
-
-.import-page-pool-empty {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.2);
-    font-style: italic;
-}
-
-/* Match footer */
-.import-page-match-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.import-page-match-stats {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-/* Buttons */
-.import-page-process-btn {
-    padding: 10px 24px;
-    background: rgb(var(--accent-light-rgb));
-    border: none;
-    border-radius: 10px;
-    color: #000;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.import-page-process-btn:hover {
-    background: #1fdf64;
-}
-
-.import-page-process-btn:disabled {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.3);
-    cursor: not-allowed;
-}
-
-.import-page-secondary-btn {
-    padding: 8px 16px;
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 8px;
-    color: #ccc;
-    font-size: 13px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.import-page-secondary-btn:hover {
-    background: rgba(255, 255, 255, 0.14);
-    color: #fff;
-}
-
-.import-page-back-btn {
-    padding: 8px 16px;
-    background: none;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 13px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.import-page-back-btn:hover {
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.2);
-}
-
-/* Singles */
-.import-page-singles-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-bottom: 16px;
-}
-
-.import-page-singles-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-.import-page-singles-list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.import-page-single-item {
-    display: grid;
-    grid-template-columns: 32px 1fr auto;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 14px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 10px;
-    transition: all 0.2s;
-}
-
-.import-page-single-item.matched {
-    border-color: rgba(var(--accent-light-rgb), 0.2);
-}
-
-.import-page-single-checkbox {
-    width: 18px;
-    height: 18px;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    flex-shrink: 0;
-}
-
-.import-page-single-checkbox.checked {
-    background: rgb(var(--accent-light-rgb));
-    border-color: rgb(var(--accent-light-rgb));
-}
-
-.import-page-single-checkbox.checked::after {
-    content: '✓';
-    color: #000;
-    font-size: 12px;
-    font-weight: 700;
-}
-
-.import-page-single-info {
-    min-width: 0;
-}
-
-.import-page-single-filename {
-    font-size: 13px;
-    color: #fff;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.import-page-single-meta {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.35);
-    margin-top: 2px;
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-
-.import-page-single-matched-info {
-    font-size: 12px;
-    color: rgb(var(--accent-light-rgb));
-    margin-top: 4px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.import-page-single-matched-change {
-    color: rgba(255, 255, 255, 0.4);
-    cursor: pointer;
-    font-size: 11px;
-    text-decoration: underline;
-}
-
-.import-page-single-matched-change:hover {
-    color: #fff;
-}
-
-.import-page-single-actions {
-    display: flex;
-    gap: 6px;
-    align-items: center;
-    flex-shrink: 0;
-}
-
-.import-page-identify-btn {
-    padding: 6px 12px;
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 6px;
-    color: #ccc;
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.import-page-identify-btn:hover {
-    background: rgba(255, 255, 255, 0.14);
-    color: #fff;
-}
-
-/* Inline search panel for singles */
-.import-page-single-search-panel {
-    grid-column: 1 / -1;
-    padding: 12px 0 4px 44px;
-}
-
-.import-page-single-search-bar {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 10px;
-}
-
-.import-page-single-search-input {
-    flex: 1;
-    padding: 8px 12px;
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 8px;
-    color: #fff;
-    font-size: 13px;
-    outline: none;
-}
-
-.import-page-single-search-input:focus {
-    border-color: rgba(var(--accent-light-rgb), 0.4);
-}
-
-.import-page-single-search-go {
-    padding: 8px 14px;
-    background: rgb(var(--accent-light-rgb));
-    border: none;
-    border-radius: 8px;
-    color: #000;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-}
-
-.import-page-single-search-results {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.import-page-single-result-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 10px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.15s;
-}
-
-.import-page-single-result-item:hover {
-    background: rgba(var(--accent-light-rgb), 0.08);
-    border-color: rgba(var(--accent-light-rgb), 0.25);
-}
-
-.import-page-single-result-img {
-    width: 36px;
-    height: 36px;
-    border-radius: 4px;
-    object-fit: cover;
-    flex-shrink: 0;
-}
-
-.import-page-single-result-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.import-page-single-result-name {
-    font-size: 13px;
-    color: #fff;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.import-page-single-result-detail {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.4);
-}
-
-.import-page-single-result-select {
-    padding: 4px 12px;
-    background: rgba(var(--accent-light-rgb), 0.15);
-    border: 1px solid rgba(var(--accent-light-rgb), 0.3);
-    border-radius: 6px;
-    color: rgb(var(--accent-light-rgb));
-    font-size: 11px;
-    font-weight: 600;
-    cursor: pointer;
-    flex-shrink: 0;
-}
-
-.import-page-single-result-select:hover {
-    background: rgba(var(--accent-light-rgb), 0.25);
-}
-
-/* Empty state */
-.import-page-empty-state {
-    text-align: center;
-    padding: 60px 20px;
-    color: rgba(255, 255, 255, 0.3);
-    font-size: 14px;
-}
-
-/* Suggestions */
-.import-page-suggestions {
-    margin-bottom: 24px;
-}
-
-/* Processing Queue */
-.import-page-queue {
-    margin-bottom: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.02);
-    overflow: hidden;
-}
-
-.import-page-queue-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 16px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.import-page-queue-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.6);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.import-page-queue-clear {
-    background: none;
-    border: none;
-    color: rgba(255, 255, 255, 0.3);
-    font-size: 12px;
-    cursor: pointer;
-    padding: 2px 8px;
-}
-
-.import-page-queue-clear:hover {
-    color: #fff;
-}
-
-.import-page-queue-list {
-    display: flex;
-    flex-direction: column;
-}
-
-.import-page-queue-item {
-    display: grid;
-    grid-template-columns: 44px 1fr auto;
-    gap: 12px;
-    align-items: center;
-    padding: 10px 16px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-}
-
-.import-page-queue-item:last-child {
-    border-bottom: none;
-}
-
-.import-page-queue-art {
-    width: 44px;
-    height: 44px;
-    border-radius: 6px;
-    object-fit: cover;
-}
-
-.import-page-queue-info {
-    min-width: 0;
-}
-
-.import-page-queue-name {
-    font-size: 13px;
-    font-weight: 600;
-    color: #fff;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.import-page-queue-detail {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.4);
-    margin-top: 2px;
-}
-
-.import-page-queue-progress {
-    width: 120px;
-    flex-shrink: 0;
-}
-
-.import-page-queue-bar {
-    height: 4px;
-    background: rgba(255, 255, 255, 0.08);
-    border-radius: 2px;
-    overflow: hidden;
-    margin-bottom: 4px;
-}
-
-.import-page-queue-fill {
-    height: 100%;
-    background: rgb(var(--accent-light-rgb));
-    border-radius: 2px;
-    width: 0%;
-    transition: width 0.3s ease;
-}
-
-.import-page-queue-fill.error {
-    background: #ef4444;
-}
-
-.import-page-queue-status {
-    font-size: 10px;
-    color: rgba(255, 255, 255, 0.4);
-    text-align: right;
-}
-
-.import-page-queue-status.done {
-    color: rgb(var(--accent-light-rgb));
-}
-
-.import-page-queue-status.error {
-    color: #ef4444;
-}
-
-/* ========================================
-   END IMPORT PAGE
-   ======================================== */
-
 /* ========================================
    FAILED DOWNLOAD ERROR TOOLTIP
    ======================================== */
@@ -45706,10 +44755,6 @@ textarea.enhanced-meta-field-input {
 
 .discog-download-wrap { margin: 12px 0 4px; }
 
-.artist-hero-actions .discog-download-wrap { margin: 0; }
-
-.artist-hero-actions .discog-btn-compact { margin-top: 0; }
-
 .discog-download-btn {
     position: relative;
     display: flex;
@@ -45757,112 +44802,6 @@ textarea.enhanced-meta-field-input {
     animation: discogShimmer 3s ease-in-out infinite;
 }
 
-.artist-hero-actions {
-    gap: 10px;
-    align-items: center;
-}
-
-.artist-hero-actions .library-artist-radio-btn,
-.artist-hero-actions .library-artist-watchlist-btn,
-.artist-hero-actions .discog-download-btn,
-.artist-hero-actions .library-artist-enhance-btn {
-    --artist-action-rgb: var(--accent-rgb);
-    min-height: 38px;
-    width: auto;
-    max-width: none;
-    padding: 8px 14px 8px 12px;
-    gap: 8px;
-    border-radius: 999px;
-    color: rgba(255, 255, 255, 0.82);
-    background:
-        linear-gradient(135deg, rgba(var(--artist-action-rgb), 0.13), rgba(var(--artist-action-rgb), 0.03)),
-        rgba(255, 255, 255, 0.035);
-    border: 1px solid rgba(var(--artist-action-rgb), 0.26);
-    box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.08),
-        0 8px 22px rgba(0, 0, 0, 0.22);
-    font-size: 12px;
-    font-weight: 650;
-    letter-spacing: 0;
-    line-height: 1;
-    backdrop-filter: blur(14px) saturate(1.25);
-    transform: none;
-}
-
-.artist-hero-actions .library-artist-radio-btn { --artist-action-rgb: 79, 195, 247; }
-.artist-hero-actions .library-artist-watchlist-btn { --artist-action-rgb: 255, 193, 7; }
-.artist-hero-actions .discog-download-btn { --artist-action-rgb: var(--accent-rgb); }
-.artist-hero-actions .library-artist-enhance-btn { --artist-action-rgb: 180, 132, 255; }
-
-.artist-hero-actions .library-artist-radio-btn::before,
-.artist-hero-actions .library-artist-watchlist-btn::before,
-.artist-hero-actions .library-artist-enhance-btn::before,
-.artist-hero-actions .discog-download-btn::before {
-    content: '';
-    width: 7px;
-    height: 7px;
-    border-radius: 999px;
-    position: relative;
-    inset: auto;
-    flex: 0 0 auto;
-    opacity: 1;
-    background: rgb(var(--artist-action-rgb));
-    box-shadow: 0 0 14px rgba(var(--artist-action-rgb), 0.85);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.artist-hero-actions .library-artist-radio-btn:hover,
-.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled),
-.artist-hero-actions .discog-download-btn:hover,
-.artist-hero-actions .library-artist-enhance-btn:hover {
-    color: #ffffff;
-    border-color: rgba(var(--artist-action-rgb), 0.5);
-    background:
-        linear-gradient(135deg, rgba(var(--artist-action-rgb), 0.22), rgba(var(--artist-action-rgb), 0.06)),
-        rgba(255, 255, 255, 0.055);
-    box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.12),
-        0 12px 28px rgba(0, 0, 0, 0.28),
-        0 0 0 1px rgba(var(--artist-action-rgb), 0.12);
-    transform: translateY(-1px);
-}
-
-.artist-hero-actions .library-artist-radio-btn:hover::before,
-.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled)::before,
-.artist-hero-actions .discog-download-btn:hover::before,
-.artist-hero-actions .library-artist-enhance-btn:hover::before {
-    transform: scale(1.25);
-    box-shadow: 0 0 18px rgba(var(--artist-action-rgb), 1);
-}
-
-.artist-hero-actions .library-artist-watchlist-btn.watching {
-    color: #ffd761;
-    border-color: rgba(255, 193, 7, 0.52);
-    background:
-        linear-gradient(135deg, rgba(255, 193, 7, 0.24), rgba(255, 193, 7, 0.06)),
-        rgba(255, 255, 255, 0.04);
-}
-
-.artist-hero-actions .library-artist-radio-btn .radio-icon,
-.artist-hero-actions .library-artist-watchlist-btn .watchlist-icon,
-.artist-hero-actions .discog-download-btn .discog-btn-icon,
-.artist-hero-actions .library-artist-enhance-btn .enhance-icon {
-    font-size: 13px;
-    position: relative;
-    z-index: 1;
-    transform: none;
-}
-
-.artist-hero-actions .library-artist-radio-btn:hover .radio-icon,
-.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled) .watchlist-icon,
-.artist-hero-actions .library-artist-enhance-btn:hover .enhance-icon {
-    transform: none;
-}
-
-.artist-hero-actions .discog-btn-shimmer {
-    display: none;
-}
-
 @keyframes discogShimmer {
     0%, 100% { left: -100%; }
     50% { left: 150%; }
@@ -47281,56 +46220,26 @@ textarea.enhanced-meta-field-input {
 
 /* Radio mode button */
 .np-radio-btn {
-    --np-radio-rgb: 79, 195, 247;
-    position: relative;
-    overflow: hidden;
-    background:
-        linear-gradient(135deg, rgba(var(--np-radio-rgb), 0.1), rgba(var(--np-radio-rgb), 0.025)),
-        rgba(255, 255, 255, 0.035);
-    border: 1px solid rgba(var(--np-radio-rgb), 0.22);
-    color: rgba(255, 255, 255, 0.62);
+    background: none;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.35);
     font-size: 11px;
-    font-weight: 650;
-    line-height: 1;
-    padding: 7px 10px;
-    border-radius: 999px;
+    padding: 3px 8px;
+    border-radius: 6px;
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 6px;
-    min-height: 30px;
-    transition: all 0.18s ease;
+    gap: 4px;
+    transition: all 0.15s ease;
 }
 .np-radio-btn:hover {
-    color: rgba(255, 255, 255, 0.9);
-    border-color: rgba(var(--np-radio-rgb), 0.42);
-    background:
-        linear-gradient(135deg, rgba(var(--np-radio-rgb), 0.16), rgba(var(--np-radio-rgb), 0.04)),
-        rgba(255, 255, 255, 0.055);
+    color: rgba(255, 255, 255, 0.7);
+    border-color: rgba(255, 255, 255, 0.2);
 }
 .np-radio-btn.active {
-    color: #ffffff;
-    border-color: rgba(var(--np-radio-rgb), 0.55);
-    background:
-        linear-gradient(135deg, rgba(var(--np-radio-rgb), 0.28), rgba(var(--np-radio-rgb), 0.07)),
-        rgba(255, 255, 255, 0.06);
-    box-shadow: 0 0 0 1px rgba(var(--np-radio-rgb), 0.08), 0 0 18px rgba(var(--np-radio-rgb), 0.12);
-}
-.np-radio-label {
-    position: relative;
-    z-index: 1;
-}
-.np-radio-pulse {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.24);
-    box-shadow: none;
-    transition: all 0.18s ease;
-}
-.np-radio-btn.active .np-radio-pulse {
-    background: rgb(var(--np-radio-rgb));
-    box-shadow: 0 0 12px rgba(var(--np-radio-rgb), 0.95);
+    color: rgb(var(--accent-rgb));
+    border-color: rgba(var(--accent-rgb), 0.3);
+    background: rgba(var(--accent-rgb), 0.08);
 }
 .np-queue-header-actions {
     display: flex;
@@ -50453,18 +49362,15 @@ tr.tag-diff-same {
     transition: transform 0.2s ease;
 }
 
-.repair-master-toggle input,
-.auto-import-toggle-label input {
+.repair-master-toggle input {
     display: none;
 }
 
-.repair-master-toggle input:checked + .repair-toggle-slider,
-.auto-import-toggle-label input:checked + .repair-toggle-slider {
+.repair-master-toggle input:checked + .repair-toggle-slider {
     background: var(--accent-color, #6366f1);
 }
 
-.repair-master-toggle input:checked + .repair-toggle-slider::after,
-.auto-import-toggle-label input:checked + .repair-toggle-slider::after {
+.repair-master-toggle input:checked + .repair-toggle-slider::after {
     transform: translateX(20px);
 }
 
@@ -59601,388 +58507,6 @@ body.reduce-effects *::after {
     .wl-orb-group.expanded { max-width: 100%; }
 }
 
-/* ═══════════════════════════════════════════════════════════════════
-   AUTO-IMPORT TAB
-   ═══════════════════════════════════════════════════════════════════ */
-
-.auto-import-controls {
-    padding: 12px 0 16px;
-    border-bottom: 1px solid rgba(255,255,255,0.05);
-    margin-bottom: 16px;
-}
-
-.auto-import-toggle-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.auto-import-toggle-label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    font-size: 13px;
-    font-weight: 600;
-    color: rgba(255,255,255,0.7);
-}
-
-.auto-import-toggle-label input { display: none; }
-
-.auto-import-status {
-    font-size: 12px;
-    font-weight: 500;
-    padding: 2px 10px;
-    border-radius: 6px;
-}
-.auto-import-status.active { color: #4ade80; background: rgba(74,222,128,0.1); }
-.auto-import-status.scanning { color: rgb(var(--accent-light-rgb)); background: rgba(var(--accent-rgb),0.1); }
-.auto-import-status.disabled { color: rgba(255,255,255,0.3); }
-
-.auto-import-settings-row {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-top: 10px;
-    flex-wrap: wrap;
-    font-size: 12px;
-    color: rgba(255,255,255,0.5);
-}
-
-.auto-import-settings-row label { display: flex; align-items: center; gap: 6px; }
-.auto-import-settings-row input[type="range"] { width: 100px; }
-.auto-import-settings-row select {
-    background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.1);
-    color: #fff;
-    border-radius: 6px;
-    padding: 3px 8px;
-    font-size: 12px;
-}
-
-.auto-import-empty {
-    text-align: center;
-    padding: 40px 20px;
-    color: rgba(255,255,255,0.3);
-    font-size: 13px;
-}
-
-/* Result cards */
-.auto-import-card {
-    display: flex;
-    flex-direction: column;
-    padding: 14px 16px;
-    background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.06);
-    border-radius: 12px;
-    margin-bottom: 8px;
-    transition: all 0.2s;
-}
-
-.auto-import-card-top {
-    display: flex;
-    gap: 14px;
-    align-items: center;
-}
-
-.auto-import-card:hover {
-    background: rgba(255,255,255,0.04);
-    border-color: rgba(255,255,255,0.1);
-}
-
-.auto-import-completed { border-left: 3px solid #4ade80; }
-.auto-import-review { border-left: 3px solid #fbbf24; }
-.auto-import-failed { border-left: 3px solid #f87171; }
-.auto-import-processing { border-left: 3px solid #60a5fa; }
-
-.auto-import-card-art {
-    width: 56px; height: 56px;
-    border-radius: 8px;
-    object-fit: cover;
-    flex-shrink: 0;
-}
-
-.auto-import-card-art-fallback {
-    width: 56px; height: 56px;
-    border-radius: 8px;
-    background: rgba(255,255,255,0.05);
-    display: flex; align-items: center; justify-content: center;
-    font-size: 22px; opacity: 0.3; flex-shrink: 0;
-}
-
-.auto-import-card-center { flex: 1; min-width: 0; }
-
-.auto-import-card-album {
-    font-size: 14px; font-weight: 600; color: #fff;
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-
-.auto-import-card-artist {
-    font-size: 12px; color: rgba(255,255,255,0.45);
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-
-.auto-import-card-folder {
-    font-size: 10px; color: rgba(255,255,255,0.25); margin-top: 2px;
-}
-
-.auto-import-match-info {
-    font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px;
-}
-
-.auto-import-card-error {
-    font-size: 10px; color: #f87171; margin-top: 2px;
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-
-.auto-import-card-right {
-    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
-    flex-shrink: 0; min-width: 80px;
-}
-
-.auto-import-confidence-bar {
-    width: 60px; height: 4px;
-    background: rgba(255,255,255,0.06);
-    border-radius: 2px; overflow: hidden;
-}
-
-.auto-import-confidence-fill { height: 100%; border-radius: 2px; }
-.auto-import-conf-high { background: #4ade80; }
-.auto-import-conf-medium { background: #fbbf24; }
-.auto-import-conf-low { background: #f87171; }
-
-.auto-import-confidence-text {
-    font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.5);
-}
-
-/* Scan Now button */
-.auto-import-scan-now-btn {
-    background: rgba(255,255,255,0.06);
-    border: 1px solid rgba(255,255,255,0.1);
-    color: rgba(255,255,255,0.6);
-    font-size: 11px;
-    padding: 4px 12px;
-    border-radius: 6px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    transition: all 0.15s;
-    margin-left: auto;
-}
-
-.auto-import-scan-now-btn:hover {
-    background: rgba(255,255,255,0.1);
-    color: rgba(255,255,255,0.9);
-}
-
-/* Live progress */
-.auto-import-progress {
-    margin-top: 8px;
-    padding: 8px 12px;
-    background: rgba(var(--accent-rgb), 0.04);
-    border: 1px solid rgba(var(--accent-rgb), 0.1);
-    border-radius: 8px;
-}
-
-.auto-import-progress-text {
-    font-size: 11px;
-    color: rgba(255,255,255,0.6);
-    margin-bottom: 4px;
-}
-
-.auto-import-progress-bar {
-    height: 3px;
-    background: rgba(255,255,255,0.06);
-    border-radius: 2px;
-    overflow: hidden;
-}
-
-.auto-import-progress-fill {
-    height: 100%;
-    background: rgba(var(--accent-rgb), 0.6);
-    border-radius: 2px;
-    width: 100%;
-    animation: adlPulse 1.5s ease-in-out infinite;
-}
-
-/* Stats summary */
-.auto-import-stats {
-    display: flex;
-    gap: 16px;
-    padding: 8px 0;
-    margin-bottom: 4px;
-}
-
-.auto-import-stat {
-    font-size: 12px;
-    color: rgba(255,255,255,0.5);
-    font-weight: 500;
-}
-
-.auto-import-stat-review { color: #fbbf24; }
-.auto-import-stat-failed { color: #f87171; }
-
-/* Filter pills */
-.auto-import-filters {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 0;
-    margin-bottom: 8px;
-}
-
-/* Batch action buttons */
-.auto-import-batch-btn {
-    font-size: 11px;
-    padding: 4px 12px;
-    border-radius: 6px;
-    border: 1px solid rgba(var(--accent-rgb), 0.3);
-    background: rgba(var(--accent-rgb), 0.08);
-    color: rgba(var(--accent-rgb), 1);
-    cursor: pointer;
-    transition: all 0.15s;
-}
-
-.auto-import-batch-btn:hover {
-    background: rgba(var(--accent-rgb), 0.15);
-}
-
-.auto-import-clear-btn {
-    border-color: rgba(255,255,255,0.1);
-    background: rgba(255,255,255,0.04);
-    color: rgba(255,255,255,0.5);
-}
-
-.auto-import-clear-btn:hover {
-    background: rgba(255,255,255,0.08);
-    color: rgba(255,255,255,0.8);
-}
-
-.auto-import-card-meta {
-    display: flex; gap: 8px; align-items: center;
-    font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 3px;
-}
-
-.auto-import-method-badge {
-    background: rgba(255,255,255,0.06);
-    padding: 1px 6px;
-    border-radius: 4px;
-    font-size: 9px;
-    color: rgba(255,255,255,0.45);
-    text-transform: uppercase;
-    letter-spacing: 0.3px;
-}
-
-.auto-import-card-folder-path {
-    font-size: 9px;
-    color: rgba(255,255,255,0.15);
-    margin-top: 6px;
-    padding-top: 6px;
-    border-top: 1px solid rgba(255,255,255,0.03);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-/* Expandable track list */
-.auto-import-track-list {
-    display: none;
-    margin-top: 8px;
-    padding-top: 8px;
-    border-top: 1px solid rgba(255,255,255,0.04);
-}
-
-.auto-import-track-list.expanded {
-    display: block;
-}
-
-.auto-import-track-list-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr 50px;
-    gap: 8px;
-    font-size: 9px;
-    font-weight: 600;
-    color: rgba(255,255,255,0.3);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    padding-bottom: 4px;
-    margin-bottom: 4px;
-    border-bottom: 1px solid rgba(255,255,255,0.03);
-}
-
-.auto-import-track-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr 50px;
-    gap: 8px;
-    padding: 3px 0;
-    font-size: 11px;
-}
-
-.auto-import-track-name {
-    color: rgba(255,255,255,0.7);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.auto-import-track-file {
-    color: rgba(255,255,255,0.3);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.auto-import-track-conf {
-    text-align: right;
-    font-weight: 600;
-    font-size: 10px;
-}
-
-.auto-import-track-conf.auto-import-conf-high { color: #4ade80; }
-.auto-import-track-conf.auto-import-conf-medium { color: #fbbf24; }
-.auto-import-track-conf.auto-import-conf-low { color: #f87171; }
-
-.auto-import-status-badge {
-    font-size: 9px; font-weight: 600; padding: 2px 8px;
-    border-radius: 6px; white-space: nowrap;
-}
-.auto-import-badge-completed { background: rgba(74,222,128,0.1); color: #4ade80; }
-.auto-import-badge-review { background: rgba(251,191,36,0.1); color: #fbbf24; }
-.auto-import-badge-failed { background: rgba(248,113,113,0.1); color: #f87171; }
-.auto-import-badge-neutral { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); }
-.auto-import-badge-processing {
-    background: rgba(96,165,250,0.12);
-    color: #60a5fa;
-    animation: auto-import-badge-pulse 1.6s ease-in-out infinite;
-}
-@keyframes auto-import-badge-pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.55; }
-}
-
-.auto-import-track-row-active {
-    background: rgba(96,165,250,0.08);
-    border-left: 2px solid #60a5fa;
-    padding-left: 6px;
-    margin-left: -8px;
-    border-radius: 3px;
-}
-.auto-import-track-row-active .auto-import-track-name { color: #60a5fa; font-weight: 600; }
-.auto-import-track-row-done .auto-import-track-name,
-.auto-import-track-row-done .auto-import-track-file { opacity: 0.4; }
-
-.auto-import-actions {
-    display: flex; gap: 4px; margin-top: 4px;
-}
-
-.auto-import-actions button { font-size: 10px; padding: 3px 10px; }
-
-@media (max-width: 768px) {
-    .auto-import-card { flex-direction: column; align-items: flex-start; }
-    .auto-import-card-right { flex-direction: row; width: 100%; justify-content: space-between; }
-}
-
 /* ── Legacy (hidden) ── */
 #wishlist-page-categories { display: none;
     margin-bottom: 24px;

From 3fdc81579439fbac1972f55690bcc2be3627bbdc Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 18:08:05 +0300
Subject: [PATCH 12/42] fix(webui): show import refresh timestamp

---
 .../routes/import/-ui/import-page.module.css  | 10 +++++
 webui/src/routes/import/-ui/import-page.tsx   | 37 ++++++++++++++++---
 webui/src/routes/import/-ui/import-shared.tsx |  4 +-
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index db15a907..209d6d52 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -63,6 +63,11 @@
   color: #fff;
 }
 
+.importPageRefreshBtnRefreshing {
+  opacity: 0.72;
+  cursor: progress;
+}
+
 .importPageStagingBar {
   display: flex;
   align-items: center;
@@ -88,6 +93,11 @@
   white-space: nowrap;
 }
 
+.importStagingRefreshAt {
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 0.4);
+}
+
 /* Tab Bar */
 .importPageTabBar {
   display: flex;
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
index b92bb8a8..9180903e 100644
--- a/webui/src/routes/import/-ui/import-page.tsx
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -1,9 +1,9 @@
 import { Link, Outlet } from '@tanstack/react-router';
 
+import { Show } from '@/components/primitives';
 import { useReactPageShell } from '@/platform/shell/route-controllers';
 
 import type { ImportQueueEntry } from '../-import.types';
-import styles from './import-page.module.css';
 
 import {
   getQueueProgressPercent,
@@ -11,12 +11,16 @@ import {
   getStagingStatsText,
 } from '../-import.helpers';
 import { useImportQueueWorkflow } from '../-import.store';
+import styles from './import-page.module.css';
 import { fallbackImage, RefreshIcon, useImportStaging } from './import-shared';
 
 export function ImportPage() {
   useReactPageShell('import');
 
   const { refreshStaging, stagingFiles, stagingPath, stagingQuery } = useImportStaging();
+  const isRefreshing = stagingQuery.isRefetching;
+  const lastRefreshedAt =
+    stagingQuery.dataUpdatedAt > 0 ? formatShortTime(stagingQuery.dataUpdatedAt) : null;
 
   return (
     <div id="import-page" data-testid="import-page">
@@ -26,6 +30,8 @@ export function ImportPage() {
           fileCountText={getStagingStatsText(stagingFiles)}
           loading={stagingQuery.isLoading}
           stagingPath={stagingPath}
+          refreshing={isRefreshing}
+          lastRefreshedAt={lastRefreshedAt}
           onRefresh={refreshStaging}
         />
         <ImportProcessingQueue />
@@ -38,17 +44,29 @@ export function ImportPage() {
   );
 }
 
+function formatShortTime(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
 function ImportHeader({
   error,
   fileCountText,
   loading,
   stagingPath,
+  refreshing,
+  lastRefreshedAt,
   onRefresh,
 }: {
   error: unknown;
   fileCountText: string;
   loading: boolean;
   stagingPath: string;
+  refreshing: boolean;
+  lastRefreshedAt: string | null;
   onRefresh: () => void;
 }) {
   return (
@@ -60,18 +78,27 @@ function ImportHeader({
         </h1>
         <button
           type="button"
-          className={styles.importPageRefreshBtn}
+          className={`${styles.importPageRefreshBtn} ${
+            refreshing ? styles.importPageRefreshBtnRefreshing : ''
+          }`}
           title="Re-scan import folder"
+          aria-busy={refreshing}
+          disabled={refreshing}
           onClick={onRefresh}
         >
           <RefreshIcon />
-          Refresh
+          {refreshing ? 'Refreshing...' : 'Refresh'}
         </button>
       </div>
       <div className={styles.importPageStagingBar} id="import-staging-bar">
         <span className={styles.importStagingPath} id="import-page-staging-path">
           {error ? 'Import folder: error' : `Import: ${stagingPath}`}
         </span>
+        <Show when={lastRefreshedAt != null}>
+          <span className={styles.importStagingRefreshAt}>
+            {lastRefreshedAt ? `Last refreshed: ${lastRefreshedAt}` : null}
+          </span>
+        </Show>
         <span className={styles.importStagingStats} id="import-page-staging-stats">
           {loading ? 'loading...' : fileCountText}
         </span>
@@ -129,9 +156,7 @@ function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
           onError={fallbackImage}
         />
       ) : (
-        <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>
-          A
-        </div>
+        <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>A</div>
       )}
       <div className={styles.importPageQueueInfo}>
         <div className={styles.importPageQueueName}>{entry.label}</div>
diff --git a/webui/src/routes/import/-ui/import-shared.tsx b/webui/src/routes/import/-ui/import-shared.tsx
index b025f2a4..dfa5bdda 100644
--- a/webui/src/routes/import/-ui/import-shared.tsx
+++ b/webui/src/routes/import/-ui/import-shared.tsx
@@ -19,9 +19,9 @@ export function useImportStaging() {
   });
 
   return {
-    refreshStaging: () => {
+    refreshStaging: async () => {
       clearFinishedJobs();
-      void invalidateImportStagingQueries(queryClient);
+      await invalidateImportStagingQueries(queryClient);
     },
     stagingFiles: stagingQuery.data?.files ?? [],
     stagingPath: stagingQuery.data?.staging_path || 'Not configured',

From fe8ae8f2900f8b212f715ae9621f1b9fd8638568 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 18:32:04 +0300
Subject: [PATCH 13/42] fix(webui): restore import glyphs

- bring the React import page back in line with the legacy emoji/glyph treatment\n- restore album, singles, auto-import, and queue fallback icons\n- keep the visual refresh aligned with the old page while preserving the React port
---
 webui/src/routes/import/-import.helpers.ts     | 18 +++++++++---------
 .../src/routes/import/-ui/album-import-tab.tsx |  6 +++---
 .../src/routes/import/-ui/auto-import-tab.tsx  |  2 +-
 .../routes/import/-ui/import-page.module.css   |  1 +
 webui/src/routes/import/-ui/import-page.tsx    |  2 +-
 .../routes/import/-ui/singles-import-tab.tsx   |  4 ++--
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/webui/src/routes/import/-import.helpers.ts b/webui/src/routes/import/-import.helpers.ts
index 0805b5d9..d6f8d288 100644
--- a/webui/src/routes/import/-import.helpers.ts
+++ b/webui/src/routes/import/-import.helpers.ts
@@ -235,15 +235,15 @@ export function getAutoImportStatusMeta(status: string): {
   };
 
   const icons: Record<string, string> = {
-    completed: 'OK',
-    pending_review: '!',
-    needs_identification: 'x',
-    failed: 'x',
-    scanning: '~',
-    matched: 'OK',
-    rejected: 'x',
-    approved: 'OK',
-    processing: '~',
+    completed: '✓',
+    pending_review: '⚠',
+    needs_identification: '✗',
+    failed: '✗',
+    scanning: '⌛',
+    matched: '✓',
+    rejected: '✕',
+    approved: '✓',
+    processing: '⧗',
   };
 
   return {
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
index aa07185b..530fb59c 100644
--- a/webui/src/routes/import/-ui/album-import-tab.tsx
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -256,7 +256,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
                           {group.album}
                         </div>
                         <div className={styles.importPageAlbumCardArtist} title={group.artist}>
-                          {group.artist} - {group.file_count} tracks
+                          {group.artist} · {group.file_count} tracks
                         </div>
                       </div>
                     </button>
@@ -369,7 +369,7 @@ function AlbumCard({
         {album.artist}
       </div>
       <div className={styles.importPageAlbumCardMeta}>
-        {album.total_tracks || 0} tracks - {album.release_date?.substring(0, 4) || ''}
+        {album.total_tracks || 0} tracks · {album.release_date?.substring(0, 4) || ''}
       </div>
     </button>
   );
@@ -422,7 +422,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
           <div className={styles.importPageAlbumHeroTitle}>{albumMatch.album.name}</div>
           <div className={styles.importPageAlbumHeroArtist}>{albumMatch.album.artist}</div>
           <div className={styles.importPageAlbumHeroMeta}>
-            {albumMatch.album.total_tracks || albumMatch.matches?.length || 0} tracks -{' '}
+            {albumMatch.album.total_tracks || albumMatch.matches?.length || 0} tracks ·{' '}
             {albumMatch.album.release_date?.substring(0, 4) || ''}
           </div>
         </div>
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index c8ac1075..62b94c84 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -417,7 +417,7 @@ function AutoImportResultCard({
               onError={fallbackImage}
             />
           ) : (
-            <div className={styles.autoImportCardArtFallback}>Album</div>
+            <div className={styles.autoImportCardArtFallback}>💿</div>
           )}
         </div>
         <div className={styles.autoImportCardCenter}>
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 209d6d52..eb49b5ae 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -115,6 +115,7 @@
   color: rgba(255, 255, 255, 0.5);
   font-size: 14px;
   font-weight: 500;
+  text-decoration: none;
   cursor: pointer;
   transition: all 0.2s;
   margin-bottom: -1px;
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
index 9180903e..05a22599 100644
--- a/webui/src/routes/import/-ui/import-page.tsx
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -156,7 +156,7 @@ function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
           onError={fallbackImage}
         />
       ) : (
-        <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>A</div>
+        <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>♪</div>
       )}
       <div className={styles.importPageQueueInfo}>
         <div className={styles.importPageQueueName}>{entry.label}</div>
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index 2c3f5a53..b6c3c40d 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -214,7 +214,7 @@ export function SinglesImportPanel({
                   </div>
                   {manualMatch ? (
                     <div className={styles.importPageSingleMatchedInfo}>
-                      OK {manualMatch.name} - {manualMatch.artist}
+                      ✓ {manualMatch.name} - {manualMatch.artist}
                       <button
                         type="button"
                         className={styles.importPageSingleMatchedChange}
@@ -231,7 +231,7 @@ export function SinglesImportPanel({
                     className={styles.importPageIdentifyBtn}
                     onClick={() => onOpenSearch(index)}
                   >
-                    Search Identify
+                    🔍 Identify
                   </button>
                 </div>
                 {openSearchIndex === index ? (

From 89252cf6e4c28c6f6af94d484ee650cf733bb642 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 18:54:08 +0300
Subject: [PATCH 14/42] fix(webui): refine import singles checkbox

- switch the singles selector to a real checkbox input for cleaner semantics\n- keep the mobile import page layout aligned while avoiding legacy button sizing\n- tune the checkbox tick so it stays visually centered and readable
---
 .../routes/import/-ui/import-page.module.css  | 81 ++++++++++++++++---
 .../routes/import/-ui/singles-import-tab.tsx  | 18 +++--
 2 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index eb49b5ae..b53652d5 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -628,9 +628,26 @@
   border-color: rgba(var(--accent-light-rgb), 0.2);
 }
 
+.importPageSingleCheckboxWrap {
+  grid-area: checkbox;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.importPageSingleCheckboxInput {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+}
+
 .importPageSingleCheckbox {
   width: 18px;
   height: 18px;
+  box-sizing: border-box;
   border: 2px solid rgba(255, 255, 255, 0.2);
   background: transparent;
   padding: 0;
@@ -643,16 +660,28 @@
   flex-shrink: 0;
 }
 
-.importPageSingleCheckbox.checked {
-  background: rgb(var(--accent-light-rgb));
-  border-color: rgb(var(--accent-light-rgb));
-}
-
-.importPageSingleCheckbox.checked::after {
+.importPageSingleCheckbox::after {
   content: '✓';
   color: #000;
   font-size: 12px;
   font-weight: 700;
+  line-height: 1;
+  opacity: 0;
+  transform: translateY(-0.5px) scaleX(1.18);
+}
+
+.importPageSingleCheckboxInput:focus-visible + .importPageSingleCheckbox {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.14);
+}
+
+.importPageSingleCheckboxInput:checked + .importPageSingleCheckbox {
+  background: rgb(var(--accent-light-rgb));
+  border-color: rgb(var(--accent-light-rgb));
+}
+
+.importPageSingleCheckboxInput:checked + .importPageSingleCheckbox::after {
+  opacity: 1;
 }
 
 .importPageSingleInfo {
@@ -1010,17 +1039,29 @@
   }
 
   .importPageMatchRow {
-    grid-template-columns: 28px 1fr;
-    gap: 8px;
+    grid-template-columns: 28px minmax(0, 1fr) auto;
+    grid-template-areas:
+      "num track track"
+      "num file unmatch";
+    gap: 6px 8px;
+    align-items: center;
+  }
+
+  .importPageMatchNum {
+    grid-area: num;
+  }
+
+  .importPageMatchTrack {
+    grid-area: track;
   }
 
   .importPageMatchFile {
-    grid-column: 1 / -1;
-    padding-left: 28px;
+    grid-area: file;
+    min-width: 0;
   }
 
   .importPageMatchUnmatch {
-    grid-column: 1 / -1;
+    grid-area: unmatch;
     justify-self: end;
   }
 
@@ -1035,12 +1076,26 @@
   }
 
   .importPageSingleItem {
-    grid-template-columns: 28px 1fr;
+    grid-template-columns: 28px minmax(0, 1fr) auto;
+    grid-template-areas:
+      "checkbox info actions"
+      "search search search";
+    align-items: start;
+    gap: 8px;
+  }
+
+  .importPageSingleInfo {
+    grid-area: info;
   }
 
   .importPageSingleActions {
-    grid-column: 1 / -1;
+    grid-area: actions;
     justify-self: end;
+    align-self: start;
+  }
+
+  .importPageSingleSearchPanel {
+    grid-area: search;
   }
 
   .importPageSingleSearchPanel {
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index b6c3c40d..2b7133b9 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -197,14 +197,16 @@ export function SinglesImportPanel({
                 }`}
                 data-single-idx={index}
               >
-                <button
-                  type="button"
-                  aria-label={`Select ${file.filename}`}
-                  className={`${styles.importPageSingleCheckbox} ${
-                    isSelected ? styles.checked : ''
-                  }`}
-                  onClick={() => onToggleSingle(index)}
-                />
+                <label className={styles.importPageSingleCheckboxWrap}>
+                  <input
+                    type="checkbox"
+                    aria-label={`Select ${file.filename}`}
+                    className={styles.importPageSingleCheckboxInput}
+                    checked={isSelected}
+                    onChange={() => onToggleSingle(index)}
+                  />
+                  <span className={styles.importPageSingleCheckbox} aria-hidden="true" />
+                </label>
                 <div className={styles.importPageSingleInfo}>
                   <div className={styles.importPageSingleFilename}>{file.filename}</div>
                   <div className={styles.importPageSingleMeta}>

From aa86bedc6ea229445b8f1a3f4656bc86e986bb0c Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 19:01:43 +0300
Subject: [PATCH 15/42] refactor(webui): key singles import state by file

- replace index-based singles selection and search state with stable staging file keys\n- keep refreshes from shifting selected rows or open search panels when files are inserted or reordered\n- add a regression test that proves selection stays attached to the intended file across refreshes
---
 webui/src/routes/import/-import.helpers.ts    |   4 +
 webui/src/routes/import/-import.store.ts      |  66 ++++++----
 webui/src/routes/import/-route.test.tsx       |  66 ++++++++--
 .../routes/import/-ui/import-page.module.css  |   9 +-
 .../routes/import/-ui/singles-import-tab.tsx  | 124 ++++++++++--------
 5 files changed, 177 insertions(+), 92 deletions(-)

diff --git a/webui/src/routes/import/-import.helpers.ts b/webui/src/routes/import/-import.helpers.ts
index d6f8d288..54a88f78 100644
--- a/webui/src/routes/import/-import.helpers.ts
+++ b/webui/src/routes/import/-import.helpers.ts
@@ -11,6 +11,10 @@ import type {
 
 export const IMPORT_PLACEHOLDER_IMAGE = '/static/placeholder.png';
 
+export function getStagingFileKey(file: ImportStagingFile): string {
+  return file.full_path;
+}
+
 export function formatImportBytes(bytes: number): string {
   if (bytes > 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`;
   if (bytes > 1_048_576) return `${(bytes / 1_048_576).toFixed(0)} MB`;
diff --git a/webui/src/routes/import/-import.store.ts b/webui/src/routes/import/-import.store.ts
index 88a09e2f..fe7ea66f 100644
--- a/webui/src/routes/import/-import.store.ts
+++ b/webui/src/routes/import/-import.store.ts
@@ -7,8 +7,10 @@ import type {
   ImportAlbumResult,
   ImportQueueEntry,
   ImportQueueJob,
+  ImportStagingFile,
   ImportTrackResult,
 } from './-import.types';
+import { getStagingFileKey } from './-import.helpers';
 
 export type SingleSearchState = {
   query: string;
@@ -37,10 +39,10 @@ function createInitialWorkflowState() {
     albumMatchError: null as string | null,
     albumMatchLoading: false,
     matchOverrides: {} as Record<number, number>,
-    selectedSingles: new Set<number>(),
-    singlesManualMatches: {} as Record<number, ImportTrackResult>,
-    openSingleSearch: null as number | null,
-    singleSearches: {} as Record<number, SingleSearchState>,
+    selectedSingles: new Set<string>(),
+    singlesManualMatches: {} as Record<string, ImportTrackResult>,
+    openSingleSearch: null as string | null,
+    singleSearches: {} as Record<string, SingleSearchState>,
   };
 }
 
@@ -111,34 +113,53 @@ export const useImportWorkflowStore = create(
     setMatchOverrides: (updater: StateUpdater<Record<number, number>>) => {
       set((state) => ({ matchOverrides: resolveState(state.matchOverrides, updater) }));
     },
-    toggleSingle: (index: number) => {
+    toggleSingle: (fileKey: string) => {
       set((state) => {
         const selectedSingles = new Set(state.selectedSingles);
-        if (selectedSingles.has(index)) selectedSingles.delete(index);
-        else selectedSingles.add(index);
+        if (selectedSingles.has(fileKey)) selectedSingles.delete(fileKey);
+        else selectedSingles.add(fileKey);
         return { selectedSingles };
       });
     },
-    toggleAllSingles: (fileCount: number) => {
+    toggleAllSingles: (stagingFiles: ImportStagingFile[]) => {
       set((state) => ({
-        selectedSingles:
-          state.selectedSingles.size === fileCount
-            ? new Set<number>()
-            : new Set(Array.from({ length: fileCount }, (_, index) => index)),
+        selectedSingles: (() => {
+          const fileKeys = stagingFiles.map(getStagingFileKey);
+          return state.selectedSingles.size === fileKeys.length &&
+            fileKeys.every((key) => state.selectedSingles.has(key))
+            ? new Set<string>()
+            : new Set(fileKeys);
+        })(),
       }));
     },
     clearSinglesSelection: () => {
       set({
-        selectedSingles: new Set<number>(),
+        selectedSingles: new Set<string>(),
         singlesManualMatches: {},
       });
     },
-    setOpenSingleSearch: (openSingleSearch: number | null) => set({ openSingleSearch }),
-    ensureSingleSearch: (index: number, query: string) => {
+    syncSinglesWorkflow: (stagingFiles: ImportStagingFile[]) => {
+      const validKeys = new Set(stagingFiles.map(getStagingFileKey));
+      set((state) => ({
+        selectedSingles: new Set([...state.selectedSingles].filter((key) => validKeys.has(key))),
+        singlesManualMatches: Object.fromEntries(
+          Object.entries(state.singlesManualMatches).filter(([key]) => validKeys.has(key)),
+        ),
+        openSingleSearch:
+          state.openSingleSearch && validKeys.has(state.openSingleSearch)
+            ? state.openSingleSearch
+            : null,
+        singleSearches: Object.fromEntries(
+          Object.entries(state.singleSearches).filter(([key]) => validKeys.has(key)),
+        ),
+      }));
+    },
+    setOpenSingleSearch: (openSingleSearch: string | null) => set({ openSingleSearch }),
+    ensureSingleSearch: (fileKey: string, query: string) => {
       set((state) => ({
         singleSearches: {
           ...state.singleSearches,
-          [index]: state.singleSearches[index] ?? {
+          [fileKey]: state.singleSearches[fileKey] ?? {
             query,
             loading: false,
             error: null,
@@ -147,9 +168,9 @@ export const useImportWorkflowStore = create(
         },
       }));
     },
-    setSingleSearch: (index: number, updater: StateUpdater<SingleSearchState>) => {
+    setSingleSearch: (fileKey: string, updater: StateUpdater<SingleSearchState>) => {
       set((state) => {
-        const current = state.singleSearches[index] ?? {
+        const current = state.singleSearches[fileKey] ?? {
           query: '',
           loading: false,
           error: null,
@@ -158,15 +179,15 @@ export const useImportWorkflowStore = create(
         return {
           singleSearches: {
             ...state.singleSearches,
-            [index]: resolveState(current, updater),
+            [fileKey]: resolveState(current, updater),
           },
         };
       });
     },
-    selectSingleMatch: (fileIndex: number, track: ImportTrackResult) => {
+    selectSingleMatch: (fileKey: string, track: ImportTrackResult) => {
       set((state) => ({
-        singlesManualMatches: { ...state.singlesManualMatches, [fileIndex]: track },
-        selectedSingles: new Set(state.selectedSingles).add(fileIndex),
+        singlesManualMatches: { ...state.singlesManualMatches, [fileKey]: track },
+        selectedSingles: new Set(state.selectedSingles).add(fileKey),
         openSingleSearch: null,
       }));
     },
@@ -229,6 +250,7 @@ export function useSinglesImportWorkflow() {
       setSingleSearch: state.setSingleSearch,
       singleSearches: state.singleSearches,
       singlesManualMatches: state.singlesManualMatches,
+      syncSinglesWorkflow: state.syncSinglesWorkflow,
       toggleAllSingles: state.toggleAllSingles,
       toggleSingleInStore: state.toggleSingle,
     })),
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 2750a08b..322eeef4 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -7,6 +7,7 @@ import type { ShellBridge, ShellPageId } from '@/platform/shell/bridge';
 import { createAppQueryClient } from '@/app/query-client';
 import { AppRouterProvider, createAppRouter } from '@/app/router';
 
+import type { ImportStagingFile } from './-import.types';
 import { resetImportWorkflowStore } from './-import.store';
 
 function createResponse(body: unknown, status = 200) {
@@ -54,9 +55,30 @@ function getFetchUrls() {
 
 describe('import route', () => {
   let albumMatchBodies: Record<string, unknown>[];
+  let stagingFilesPayload: ImportStagingFile[];
 
   beforeEach(() => {
     albumMatchBodies = [];
+    stagingFilesPayload = [
+      {
+        filename: '01-track.flac',
+        rel_path: 'Album/01-track.flac',
+        full_path: '/music/Staging/Album/01-track.flac',
+        title: 'Track One',
+        artist: 'Artist A',
+        album: 'Album A',
+        extension: '.flac',
+      },
+      {
+        filename: '02-track.flac',
+        rel_path: 'Album/02-track.flac',
+        full_path: '/music/Staging/Album/02-track.flac',
+        title: 'Track Two',
+        artist: 'Artist A',
+        album: 'Album A',
+        extension: '.flac',
+      },
+    ];
     resetImportWorkflowStore();
     window.SoulSyncWebShellBridge = createShellBridge();
     window.showToast = vi.fn();
@@ -71,17 +93,7 @@ describe('import route', () => {
           return createResponse({
             success: true,
             staging_path: '/music/Staging',
-            files: [
-              {
-                filename: '01-track.flac',
-                rel_path: 'Album/01-track.flac',
-                full_path: '/music/Staging/Album/01-track.flac',
-                title: 'Track One',
-                artist: 'Artist A',
-                album: 'Album A',
-                extension: '.flac',
-              },
-            ],
+            files: stagingFilesPayload,
           });
         }
 
@@ -243,6 +255,38 @@ describe('import route', () => {
     expect(await screen.findByDisplayValue('half matched album')).toBeInTheDocument();
   });
 
+  it('keeps singles selection tied to file identity across refreshes', async () => {
+    renderImportRoute(['/import/singles']);
+
+    const secondTrack = await screen.findByLabelText('Select 02-track.flac');
+    fireEvent.click(secondTrack);
+
+    stagingFilesPayload = [
+      {
+        filename: '00-intro.flac',
+        rel_path: 'Album/00-intro.flac',
+        full_path: '/music/Staging/Album/00-intro.flac',
+        title: 'Intro',
+        artist: 'Artist A',
+        album: 'Album A',
+        extension: '.flac',
+      },
+      ...stagingFilesPayload,
+    ];
+
+    fireEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+
+    await waitFor(() =>
+      expect((screen.getByLabelText('Select 02-track.flac') as HTMLInputElement).checked).toBe(
+        true,
+      ),
+    );
+    expect((screen.getByLabelText('Select 01-track.flac') as HTMLInputElement).checked).toBe(
+      false,
+    );
+    expect(screen.getByText('Process Selected (1)')).toBeInTheDocument();
+  });
+
   it('preserves album source details when matching an album', async () => {
     renderImportRoute();
 
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index b53652d5..1ac434ef 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -629,7 +629,7 @@
 }
 
 .importPageSingleCheckboxWrap {
-  grid-area: checkbox;
+  grid-column: 1;
   position: relative;
   width: 18px;
   height: 18px;
@@ -685,6 +685,7 @@
 }
 
 .importPageSingleInfo {
+  grid-column: 2;
   min-width: 0;
 }
 
@@ -729,6 +730,8 @@
 }
 
 .importPageSingleActions {
+  grid-column: 3;
+  justify-self: end;
   display: flex;
   gap: 6px;
   align-items: center;
@@ -1084,6 +1087,10 @@
     gap: 8px;
   }
 
+  .importPageSingleCheckboxWrap {
+    grid-area: checkbox;
+  }
+
   .importPageSingleInfo {
     grid-area: info;
   }
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index 2b7133b9..63885b36 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -1,10 +1,12 @@
+import { useEffect } from 'react';
+
 import type { SingleSearchState } from '../-import.store';
 import type { ImportTrackResult } from '../-import.types';
 import type { ImportStagingFile } from '../-import.types';
 
 import styles from './import-page.module.css';
 import { searchImportTracks } from '../-import.api';
-import { formatDuration } from '../-import.helpers';
+import { formatDuration, getStagingFileKey } from '../-import.helpers';
 import { useSinglesImportWorkflow } from '../-import.store';
 import {
   fallbackImage,
@@ -26,32 +28,37 @@ export function SinglesImportTab() {
     setSingleSearch,
     singleSearches,
     singlesManualMatches,
+    syncSinglesWorkflow,
     toggleAllSingles,
     toggleSingleInStore,
   } = useSinglesImportWorkflow();
 
-  const openSingleSearchPanel = (index: number) => {
-    if (openSingleSearch === index) {
+  useEffect(() => {
+    syncSinglesWorkflow(stagingFiles);
+  }, [stagingFiles, syncSinglesWorkflow]);
+
+  const openSingleSearchPanel = (file: ImportStagingFile) => {
+    const fileKey = getStagingFileKey(file);
+    if (openSingleSearch === fileKey) {
       setOpenSingleSearch(null);
       return;
     }
 
-    setOpenSingleSearch(index);
-    const file = stagingFiles[index];
+    setOpenSingleSearch(fileKey);
     const defaultQuery =
       [file?.artist, file?.title].filter(Boolean).join(' ') ||
       (file?.filename || '').replace(/\.[^.]+$/, '');
-    ensureSingleSearch(index, defaultQuery);
-    if (defaultQuery && !singleSearches[index]?.results.length) {
-      void runSingleSearch(index, defaultQuery);
+    ensureSingleSearch(fileKey, defaultQuery);
+    if (defaultQuery && !singleSearches[fileKey]?.results.length) {
+      void runSingleSearch(fileKey, defaultQuery);
     }
   };
 
-  const runSingleSearch = async (index: number, query: string) => {
+  const runSingleSearch = async (fileKey: string, query: string) => {
     const trimmed = query.trim();
     if (!trimmed) return;
 
-    setSingleSearch(index, (current) => ({
+    setSingleSearch(fileKey, (current) => ({
       query: trimmed,
       loading: true,
       error: null,
@@ -60,14 +67,14 @@ export function SinglesImportTab() {
 
     try {
       const payload = await searchImportTracks(trimmed);
-      setSingleSearch(index, {
+      setSingleSearch(fileKey, {
         query: trimmed,
         loading: false,
         error: null,
         results: payload.tracks ?? [],
       });
     } catch (error) {
-      setSingleSearch(index, {
+      setSingleSearch(fileKey, {
         query: trimmed,
         loading: false,
         error: getErrorMessage(error),
@@ -76,16 +83,15 @@ export function SinglesImportTab() {
     }
   };
 
-  const selectSingleMatch = (fileIndex: number, track: ImportTrackResult) => {
-    selectSingleMatchInStore(fileIndex, track);
+  const selectSingleMatch = (fileKey: string, track: ImportTrackResult) => {
+    selectSingleMatchInStore(fileKey, track);
   };
 
   const processSingles = () => {
-    if (selectedSingles.size === 0) return;
-    const filesToProcess = Array.from(selectedSingles).flatMap((index) => {
-      const file = stagingFiles[index];
-      if (!file) return [];
-      const manualMatch = singlesManualMatches[index];
+    const filesToProcess = stagingFiles.flatMap((file) => {
+      const fileKey = getStagingFileKey(file);
+      if (!selectedSingles.has(fileKey)) return [];
+      const manualMatch = singlesManualMatches[fileKey];
       return manualMatch ? [{ ...file, manual_match: manualMatch }] : [file];
     });
 
@@ -111,21 +117,21 @@ export function SinglesImportTab() {
     <SinglesImportPanel
       files={stagingFiles}
       manualMatches={singlesManualMatches}
-      openSearchIndex={openSingleSearch}
+      openSearchKey={openSingleSearch}
       searchStates={singleSearches}
       selected={selectedSingles}
       onOpenSearch={openSingleSearchPanel}
       onProcessSingles={processSingles}
       onRunSearch={runSingleSearch}
-      onSearchQueryChange={(index, query) => {
-        setSingleSearch(index, (current) => ({
+      onSearchQueryChange={(fileKey, query) => {
+        setSingleSearch(fileKey, (current) => ({
           query,
           loading: current.loading,
           error: current.error,
           results: current.results,
         }));
       }}
-      onSelectAll={() => toggleAllSingles(stagingFiles.length)}
+      onSelectAll={() => toggleAllSingles(stagingFiles)}
       onSelectMatch={selectSingleMatch}
       onToggleSingle={toggleSingleInStore}
     />
@@ -135,7 +141,7 @@ export function SinglesImportTab() {
 export function SinglesImportPanel({
   files,
   manualMatches,
-  openSearchIndex,
+  openSearchKey,
   searchStates,
   selected,
   onOpenSearch,
@@ -147,19 +153,20 @@ export function SinglesImportPanel({
   onToggleSingle,
 }: {
   files: ImportStagingFile[];
-  manualMatches: Record<number, ImportTrackResult>;
-  openSearchIndex: number | null;
-  searchStates: Record<number, SingleSearchState>;
-  selected: Set<number>;
-  onOpenSearch: (index: number) => void;
+  manualMatches: Record<string, ImportTrackResult>;
+  openSearchKey: string | null;
+  searchStates: Record<string, SingleSearchState>;
+  selected: Set<string>;
+  onOpenSearch: (file: ImportStagingFile) => void;
   onProcessSingles: () => void;
-  onRunSearch: (index: number, query: string) => void;
-  onSearchQueryChange: (index: number, query: string) => void;
+  onRunSearch: (fileKey: string, query: string) => void;
+  onSearchQueryChange: (fileKey: string, query: string) => void;
   onSelectAll: () => void;
-  onSelectMatch: (fileIndex: number, track: ImportTrackResult) => void;
-  onToggleSingle: (index: number) => void;
+  onSelectMatch: (fileKey: string, track: ImportTrackResult) => void;
+  onToggleSingle: (fileKey: string) => void;
 }) {
-  const allSelected = files.length > 0 && selected.size === files.length;
+  const selectedCount = files.filter((file) => selected.has(getStagingFileKey(file))).length;
+  const allSelected = files.length > 0 && selectedCount === files.length;
 
   return (
     <>
@@ -174,28 +181,29 @@ export function SinglesImportPanel({
             type="button"
             className={styles.importPageProcessBtn}
             id="import-page-singles-process-btn"
-            disabled={selected.size === 0}
+            disabled={selectedCount === 0}
             onClick={onProcessSingles}
           >
-            Process Selected ({selected.size})
+            Process Selected ({selectedCount})
           </button>
         </div>
       </div>
-              <div className={styles.importPageSinglesList} id="import-page-singles-list">
+      <div className={styles.importPageSinglesList} id="import-page-singles-list">
         {files.length === 0 ? (
           <div className={styles.importPageEmptyState}>No audio files found in import folder</div>
         ) : (
-          files.map((file, index) => {
-            const manualMatch = manualMatches[index];
-            const isSelected = selected.has(index);
-            const searchState = searchStates[index];
+          files.map((file) => {
+            const fileKey = getStagingFileKey(file);
+            const manualMatch = manualMatches[fileKey];
+            const isSelected = selected.has(fileKey);
+            const searchState = searchStates[fileKey];
             return (
               <div
-                key={`${file.full_path}-${index}`}
+                key={fileKey}
                 className={`${styles.importPageSingleItem} ${
                   manualMatch ? styles.matched : ''
                 }`}
-                data-single-idx={index}
+                data-single-key={fileKey}
               >
                 <label className={styles.importPageSingleCheckboxWrap}>
                   <input
@@ -203,7 +211,7 @@ export function SinglesImportPanel({
                     aria-label={`Select ${file.filename}`}
                     className={styles.importPageSingleCheckboxInput}
                     checked={isSelected}
-                    onChange={() => onToggleSingle(index)}
+                    onChange={() => onToggleSingle(fileKey)}
                   />
                   <span className={styles.importPageSingleCheckbox} aria-hidden="true" />
                 </label>
@@ -220,7 +228,7 @@ export function SinglesImportPanel({
                       <button
                         type="button"
                         className={styles.importPageSingleMatchedChange}
-                        onClick={() => onOpenSearch(index)}
+                        onClick={() => onOpenSearch(file)}
                       >
                         change
                       </button>
@@ -231,14 +239,14 @@ export function SinglesImportPanel({
                   <button
                     type="button"
                     className={styles.importPageIdentifyBtn}
-                    onClick={() => onOpenSearch(index)}
+                    onClick={() => onOpenSearch(file)}
                   >
                     🔍 Identify
                   </button>
                 </div>
-                {openSearchIndex === index ? (
+                {openSearchKey === fileKey ? (
                   <SingleSearchPanel
-                    fileIndex={index}
+                    fileKey={fileKey}
                     searchState={searchState}
                     onQueryChange={onSearchQueryChange}
                     onRunSearch={onRunSearch}
@@ -255,17 +263,17 @@ export function SinglesImportPanel({
 }
 
 function SingleSearchPanel({
-  fileIndex,
+  fileKey,
   searchState,
   onQueryChange,
   onRunSearch,
   onSelectMatch,
 }: {
-  fileIndex: number;
+  fileKey: string;
   searchState: SingleSearchState | undefined;
-  onQueryChange: (index: number, query: string) => void;
-  onRunSearch: (index: number, query: string) => void;
-  onSelectMatch: (fileIndex: number, track: ImportTrackResult) => void;
+  onQueryChange: (fileKey: string, query: string) => void;
+  onRunSearch: (fileKey: string, query: string) => void;
+  onSelectMatch: (fileKey: string, track: ImportTrackResult) => void;
 }) {
   const query = searchState?.query ?? '';
 
@@ -277,20 +285,20 @@ function SingleSearchPanel({
           className={styles.importPageSingleSearchInput}
           value={query}
           placeholder="Search artist - title..."
-          onChange={(event) => onQueryChange(fileIndex, event.target.value)}
+          onChange={(event) => onQueryChange(fileKey, event.target.value)}
           onKeyDown={(event) => {
-            if (event.key === 'Enter') onRunSearch(fileIndex, query);
+            if (event.key === 'Enter') onRunSearch(fileKey, query);
           }}
         />
         <button
           type="button"
           className={styles.importPageSingleSearchGo}
-          onClick={() => onRunSearch(fileIndex, query)}
+          onClick={() => onRunSearch(fileKey, query)}
         >
           Search
         </button>
       </div>
-      <div className={styles.importPageSingleSearchResults} id={`import-single-results-${fileIndex}`}>
+      <div className={styles.importPageSingleSearchResults}>
         {searchState?.loading ? (
           <div className={styles.importPageEmptyState}>Searching...</div>
         ) : searchState?.error ? (
@@ -303,7 +311,7 @@ function SingleSearchPanel({
               key={`${track.source || 'source'}-${track.id}-${index}`}
               type="button"
               className={styles.importPageSingleResultItem}
-              onClick={() => onSelectMatch(fileIndex, track)}
+              onClick={() => onSelectMatch(fileKey, track)}
             >
               {track.image_url ? (
                 <img

From 0d7fb91d98c951f7eb293b311794dd88413c8165 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 19:58:36 +0300
Subject: [PATCH 16/42] refactor(webui): share import form primitives

- add shared Base UI-backed checkbox and slider primitives under the form component layer
- move the singles import checkbox and auto-import confidence slider to the shared controls
- keep the import route tests aligned with the new accessible component roles
---
 webui/src/components/form/form.module.css     | 114 ++++++++++++++++++
 webui/src/components/form/form.test.tsx       |  28 +++++
 webui/src/components/form/form.tsx            |  81 +++++++++++++
 webui/src/routes/import/-route.test.tsx       |   8 +-
 .../routes/import/-ui/album-import-tab.tsx    |  28 +++--
 .../src/routes/import/-ui/auto-import-tab.tsx |  63 +++++-----
 .../routes/import/-ui/import-page.module.css  |  73 ++---------
 webui/src/routes/import/-ui/import-page.tsx   |   9 +-
 .../routes/import/-ui/singles-import-tab.tsx  |  25 ++--
 9 files changed, 298 insertions(+), 131 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index bf673cac..54638847 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -129,6 +129,120 @@
   color: #fff;
 }
 
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  background: transparent;
+  color: #000;
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    background 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+  color-scheme: dark;
+}
+
+.checkbox[data-checked] {
+  border-color: rgb(var(--accent-light-rgb));
+  background: rgb(var(--accent-light-rgb));
+}
+
+.checkbox[data-focused] {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.14);
+}
+
+.checkboxIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+
+.checkbox[data-checked] .checkboxIndicator {
+  opacity: 1;
+}
+
+.checkboxIcon {
+  color: #000;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  transform: translateY(-0.5px) scaleX(1.18);
+}
+
+.rangeRoot {
+  display: inline-flex;
+  flex: 0 0 160px;
+  width: 160px;
+  min-width: 160px;
+  color-scheme: dark;
+}
+
+.rangeControl {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 28px;
+  cursor: pointer;
+}
+
+.rangeTrack {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04);
+}
+
+.rangeIndicator {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    rgba(var(--accent-rgb), 0.95),
+    rgba(var(--accent-light-rgb), 0.95)
+  );
+}
+
+.rangeThumb {
+  width: 16px;
+  height: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.3), transparent 46%),
+    rgb(var(--accent-light-rgb));
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.rangeThumb:hover {
+  transform: scale(1.04);
+}
+
+.rangeThumb:focus-visible {
+  box-shadow:
+    0 0 0 4px rgba(var(--accent-light-rgb), 0.14),
+    0 2px 8px rgba(0, 0, 0, 0.28);
+}
+
 .optionCardGroup {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx
index 3488a2f6..2feb7a2e 100644
--- a/webui/src/components/form/form.test.tsx
+++ b/webui/src/components/form/form.test.tsx
@@ -4,6 +4,7 @@ import { describe, expect, it } from 'vitest';
 
 import {
   Button,
+  Checkbox,
   FormActions,
   FormError,
   FormField,
@@ -11,6 +12,7 @@ import {
   OptionButtonGroup,
   OptionCard,
   OptionCardGroup,
+  RangeInput,
   Select,
   TextArea,
   TextInput,
@@ -22,6 +24,8 @@ function FormDemo() {
   const [category, setCategory] = useState<'wrong_cover' | 'wrong_metadata'>('wrong_cover');
   const [priority, setPriority] = useState<'low' | 'normal' | 'high'>('normal');
   const [status, setStatus] = useState('open');
+  const [archive, setArchive] = useState(false);
+  const [confidence, setConfidence] = useState(90);
 
   return (
     <form>
@@ -90,6 +94,20 @@ function FormDemo() {
         </Select>
       </FormField>
 
+      <FormField label="Archive" helperText="Shared checkbox primitive">
+        <Checkbox checked={archive} onCheckedChange={setArchive} />
+      </FormField>
+
+      <FormField label="Confidence" helperText="Shared range primitive">
+        <RangeInput
+          label="Confidence"
+          min={50}
+          max={100}
+          value={confidence}
+          onValueChange={setConfidence}
+        />
+      </FormField>
+
       <FormError message="Validation failed" />
 
       <FormActions>
@@ -112,6 +130,16 @@ describe('form primitives', () => {
     fireEvent.change(screen.getByLabelText('Status'), { target: { value: 'resolved' } });
     expect(screen.getByLabelText('Status')).toHaveValue('resolved');
 
+    const archiveCheckbox = screen.getByRole('checkbox', { name: 'Archive' });
+    expect(archiveCheckbox).not.toBeChecked();
+    fireEvent.click(archiveCheckbox);
+    expect(archiveCheckbox).toBeChecked();
+
+    const confidenceSlider = screen.getByLabelText('Confidence', { selector: 'input' });
+    expect(confidenceSlider).toHaveValue('90');
+    fireEvent.change(confidenceSlider, { target: { value: '75' } });
+    expect(confidenceSlider).toHaveValue('75');
+
     const wrongCover = screen.getByRole('button', { name: /wrong cover/i });
     const wrongMetadata = screen.getByRole('button', { name: /wrong metadata/i });
     expect(wrongCover).toHaveAttribute('aria-pressed', 'true');
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 15938435..1a26870e 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -1,10 +1,13 @@
 import { Button as BaseButton } from '@base-ui/react/button';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { Field } from '@base-ui/react/field';
 import { Input as BaseInput } from '@base-ui/react/input';
+import { Slider } from '@base-ui/react/slider';
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 import clsx from 'clsx';
 import {
   forwardRef,
+  type CSSProperties,
   type ComponentPropsWithoutRef,
   type ButtonHTMLAttributes,
   type SelectHTMLAttributes,
@@ -82,6 +85,84 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
   return <select ref={ref} className={clsx(styles.select, className)} {...props} />;
 });
 
+type BaseCheckboxProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Root>;
+
+export type CheckboxProps = Omit<BaseCheckboxProps, 'className' | 'children'> & {
+  className?: string;
+};
+
+export const Checkbox = forwardRef<HTMLElement, CheckboxProps>(function Checkbox(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <BaseCheckbox.Root ref={ref} className={clsx(styles.checkbox, className)} {...props}>
+      <BaseCheckbox.Indicator className={styles.checkboxIndicator}>
+        <span className={styles.checkboxIcon} aria-hidden="true">
+          ✓
+        </span>
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  );
+});
+
+export interface RangeInputProps {
+  className?: string;
+  disabled?: boolean;
+  defaultValue?: number;
+  label?: ReactNode;
+  max?: number;
+  min?: number;
+  name?: string;
+  step?: number;
+  style?: CSSProperties;
+  value?: number;
+  onValueChange?: (value: number) => void;
+}
+
+export const RangeInput = forwardRef<HTMLDivElement, RangeInputProps>(function RangeInput(
+  {
+    className,
+    defaultValue,
+    disabled,
+    label,
+    max = 100,
+    min = 0,
+    name,
+    onValueChange,
+    step = 1,
+    style,
+    value,
+  },
+  ref,
+) {
+  return (
+    <Slider.Root
+      ref={ref}
+      className={clsx(styles.rangeRoot, className)}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      style={style}
+      disabled={disabled}
+      name={name}
+      step={step}
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={(nextValue) => {
+        onValueChange?.(Array.isArray(nextValue) ? nextValue[0] : nextValue);
+      }}
+    >
+      <Slider.Control className={styles.rangeControl}>
+        <Slider.Track className={styles.rangeTrack}>
+          <Slider.Indicator className={styles.rangeIndicator} />
+          <Slider.Thumb aria-label={typeof label === 'string' ? label : undefined} className={styles.rangeThumb} />
+        </Slider.Track>
+      </Slider.Control>
+    </Slider.Root>
+  );
+});
+
 export function OptionCardGroup({
   className,
   children,
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 322eeef4..9020992e 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -277,13 +277,9 @@ describe('import route', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Refresh' }));
 
     await waitFor(() =>
-      expect((screen.getByLabelText('Select 02-track.flac') as HTMLInputElement).checked).toBe(
-        true,
-      ),
-    );
-    expect((screen.getByLabelText('Select 01-track.flac') as HTMLInputElement).checked).toBe(
-      false,
+      expect(screen.getByRole('checkbox', { name: 'Select 02-track.flac' })).toBeChecked(),
     );
+    expect(screen.getByRole('checkbox', { name: 'Select 01-track.flac' })).not.toBeChecked();
     expect(screen.getByText('Process Selected (1)')).toBeInTheDocument();
   });
 
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
index 530fb59c..82d3fed3 100644
--- a/webui/src/routes/import/-ui/album-import-tab.tsx
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -1,6 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import { type DragEvent, type KeyboardEvent, useState } from 'react';
 
+import { Button, TextInput } from '@/components/form/form';
+
 import type { ImportAlbumResult } from '../-import.types';
 import styles from './import-page.module.css';
 
@@ -285,7 +287,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
         )}
 
         <div className={styles.importPageSearchBar}>
-          <input
+          <TextInput
             type="text"
             id="import-page-album-search-input"
             className={styles.importPageSearchInput}
@@ -296,10 +298,10 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
               if (event.key === 'Enter') onRunSearch();
             }}
           />
-          <button type="button" className={styles.importPageSearchBtn} onClick={onRunSearch}>
+          <Button type="button" className={styles.importPageSearchBtn} onClick={onRunSearch}>
             Search
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             className={`${styles.importPageClearBtn} ${albumResults === null ? styles.hidden : ''}`}
             id="import-page-album-clear-btn"
@@ -307,7 +309,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
             onClick={onBackToSearch}
           >
             x
-          </button>
+          </Button>
         </div>
 
         <div className={styles.importPageAlbumGrid} id="import-page-album-results">
@@ -431,20 +433,20 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
       <div className={styles.importPageMatchHeader}>
         <h3>Track Matching</h3>
         <div className={styles.importPageMatchActions}>
-          <button
+          <Button
             type="button"
             className={styles.importPageSecondaryBtn}
             onClick={onAutoRematch}
           >
             Re-match Automatically
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             className={styles.importPageBackBtn}
             onClick={onBackToSearch}
           >
             Back to Search
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -504,7 +506,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
               </span>
               <span>
                 {file ? (
-                  <button
+                  <Button
                     type="button"
                     className={styles.importPageMatchUnmatch}
                     onClick={(event) => {
@@ -513,7 +515,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
                     }}
                   >
                     x
-                  </button>
+                  </Button>
                 ) : null}
               </span>
             </div>
@@ -564,7 +566,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
         <div className={styles.importPageMatchStats} id="import-page-match-stats">
           {matchedCount} of {albumMatch.matches?.length ?? 0} tracks matched
         </div>
-        <button
+        <Button
           type="button"
           className={styles.importPageProcessBtn}
           id="import-page-album-process-btn"
@@ -572,7 +574,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
           onClick={onProcessAlbum}
         >
           Process {matchedCount} Track{matchedCount === 1 ? '' : 's'}
-        </button>
+        </Button>
       </div>
     </>
   ) : (
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 62b94c84..471c10f3 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -1,6 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
+import { Button, RangeInput, Select } from '@/components/form/form';
+
 import type {
   ImportAutoFilter,
   ImportAutoImportResult,
@@ -171,7 +173,7 @@ export function AutoImportPanel({
             {getAutoImportStatusText(statusQuery.data)}
           </span>
           {statusQuery.data?.running ? (
-            <button
+            <Button
               type="button"
               className={styles.autoImportScanNowBtn}
               id="auto-import-scan-now"
@@ -181,26 +183,27 @@ export function AutoImportPanel({
             >
               <RefreshIcon />
               Scan Now
-            </button>
+            </Button>
           ) : null}
         </div>
         {statusQuery.data?.running ? (
           <div className={styles.autoImportSettingsRow} id="auto-import-settings-row">
-            <label>
-              Confidence:{' '}
-              <input
-                type="range"
-                id="auto-import-confidence"
-                min="50"
-                max="100"
+            <div className={styles.autoImportSetting}>
+              <span>Confidence:</span>
+              <RangeInput
+                label="Confidence"
+                min={50}
+                max={100}
                 value={confidence}
-                onChange={(event) => setConfidence(Number(event.target.value))}
-              />{' '}
-              <span id="auto-import-conf-val">{confidence}%</span>
-            </label>
-            <label>
-              Interval:{' '}
-              <select
+                onValueChange={setConfidence}
+              />
+              <span className={styles.autoImportConfidenceValue} id="auto-import-conf-val">
+                {confidence}%
+              </span>
+            </div>
+            <div className={styles.autoImportSetting}>
+              <span>Interval:</span>
+              <Select
                 id="auto-import-interval"
                 value={interval}
                 onChange={(event) => setInterval(Number(event.target.value))}
@@ -209,9 +212,9 @@ export function AutoImportPanel({
                 <option value="60">60s</option>
                 <option value="120">2m</option>
                 <option value="300">5m</option>
-              </select>
-            </label>
-            <button
+              </Select>
+            </div>
+            <Button
               type="button"
               className={`${styles.autoImportActionBtn} ${styles.autoImportActionSecondary}`}
               disabled={saveSettingsMutation.isPending}
@@ -223,7 +226,7 @@ export function AutoImportPanel({
               }
             >
               Save
-            </button>
+            </Button>
           </div>
         ) : null}
         {activeLines.length > 0 ? (
@@ -264,7 +267,7 @@ export function AutoImportPanel({
           </div>
           <div className={styles.autoImportFilters} id="auto-import-filters">
             {(['all', 'pending', 'imported', 'failed'] as const).map((filter) => (
-              <button
+              <Button
                 key={filter}
                 type="button"
                 className={`${styles.autoImportFilterPill} ${
@@ -274,11 +277,11 @@ export function AutoImportPanel({
                 onClick={() => onFilterChange(filter)}
               >
                 {filter === 'pending' ? 'Needs Review' : titleCase(filter)}
-              </button>
+              </Button>
             ))}
             <div className={styles.importPageFlexSpacer} />
             {counts.review > 0 ? (
-              <button
+              <Button
                 type="button"
                 className={styles.autoImportBatchBtn}
                 id="auto-import-approve-all"
@@ -286,10 +289,10 @@ export function AutoImportPanel({
                 onClick={() => approveAllMutation.mutate()}
               >
                 Approve All
-              </button>
+              </Button>
             ) : null}
             {counts.imported + counts.failed > 0 ? (
-              <button
+              <Button
                 type="button"
                 className={`${styles.autoImportBatchBtn} ${styles.autoImportClearBtn}`}
                 id="auto-import-clear-completed"
@@ -297,7 +300,7 @@ export function AutoImportPanel({
                 onClick={() => clearMutation.mutate()}
               >
                 Clear History
-              </button>
+              </Button>
             ) : null}
           </div>
         </>
@@ -445,7 +448,7 @@ function AutoImportResultCard({
           <div className={styles.autoImportConfidenceText}>{confidencePercent}% confidence</div>
           {result.status === 'pending_review' ? (
             <div className={styles.autoImportActions}>
-              <button
+              <Button
                 type="button"
                 className={`${styles.autoImportActionBtn} ${styles.autoImportActionPrimary}`}
                 disabled={approvePending}
@@ -455,8 +458,8 @@ function AutoImportResultCard({
                 }}
               >
                 Approve & Import
-              </button>
-              <button
+              </Button>
+              <Button
                 type="button"
                 className={`${styles.autoImportActionBtn} ${styles.autoImportActionSecondary}`}
                 disabled={rejectPending}
@@ -466,7 +469,7 @@ function AutoImportResultCard({
                 }}
               >
                 Dismiss
-              </button>
+              </Button>
             </div>
           ) : null}
         </div>
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 1ac434ef..cf99b973 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -637,53 +637,6 @@
   margin-top: 2px;
 }
 
-.importPageSingleCheckboxInput {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  margin: 0;
-}
-
-.importPageSingleCheckbox {
-  width: 18px;
-  height: 18px;
-  box-sizing: border-box;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  background: transparent;
-  padding: 0;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-  flex-shrink: 0;
-}
-
-.importPageSingleCheckbox::after {
-  content: '✓';
-  color: #000;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  opacity: 0;
-  transform: translateY(-0.5px) scaleX(1.18);
-}
-
-.importPageSingleCheckboxInput:focus-visible + .importPageSingleCheckbox {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.14);
-}
-
-.importPageSingleCheckboxInput:checked + .importPageSingleCheckbox {
-  background: rgb(var(--accent-light-rgb));
-  border-color: rgb(var(--accent-light-rgb));
-}
-
-.importPageSingleCheckboxInput:checked + .importPageSingleCheckbox::after {
-  opacity: 1;
-}
-
 .importPageSingleInfo {
   grid-column: 2;
   min-width: 0;
@@ -1199,23 +1152,19 @@
   color: rgba(255, 255, 255, 0.5);
 }
 
-.autoImportSettingsRow label {
+.autoImportSetting {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.autoImportSettingsRow input[type='range'] {
-  width: 100px;
-}
-.autoImportSettingsRow select {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #fff;
-  border-radius: 6px;
-  padding: 3px 8px;
-  font-size: 12px;
-}
 
+.autoImportConfidenceValue {
+  display: inline-block;
+  flex: 0 0 5ch;
+  width: 5ch;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
 .autoImportEmpty {
   text-align: center;
   padding: 40px 20px;
@@ -1468,12 +1417,6 @@
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  padding: 9px 18px;
-  border-radius: 10px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   letter-spacing: 0.1px;
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
index 05a22599..932d4922 100644
--- a/webui/src/routes/import/-ui/import-page.tsx
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -1,6 +1,7 @@
 import { Link, Outlet } from '@tanstack/react-router';
 
 import { Show } from '@/components/primitives';
+import { Button } from '@/components/form/form';
 import { useReactPageShell } from '@/platform/shell/route-controllers';
 
 import type { ImportQueueEntry } from '../-import.types';
@@ -76,7 +77,7 @@ function ImportHeader({
           <img src="/static/import.png" className="page-header-icon" alt="" />
           <span>Import Music</span>
         </h1>
-        <button
+        <Button
           type="button"
           className={`${styles.importPageRefreshBtn} ${
             refreshing ? styles.importPageRefreshBtnRefreshing : ''
@@ -88,7 +89,7 @@ function ImportHeader({
         >
           <RefreshIcon />
           {refreshing ? 'Refreshing...' : 'Refresh'}
-        </button>
+        </Button>
       </div>
       <div className={styles.importPageStagingBar} id="import-staging-bar">
         <span className={styles.importStagingPath} id="import-page-staging-path">
@@ -118,7 +119,7 @@ function ImportProcessingQueue() {
     >
       <div className={styles.importPageQueueHeader}>
         <span className={styles.importPageQueueTitle}>Processing</span>
-        <button
+        <Button
           type="button"
           className={styles.importPageQueueClear}
           id="import-page-queue-clear"
@@ -126,7 +127,7 @@ function ImportProcessingQueue() {
           onClick={clearFinishedJobs}
         >
           Clear finished
-        </button>
+        </Button>
       </div>
       <div className={styles.importPageQueueList} id="import-page-queue-list">
         {queue.map((entry) => (
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index 63885b36..a9c05a8b 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
 
+import { Button, Checkbox, TextInput } from '@/components/form/form';
+
 import type { SingleSearchState } from '../-import.store';
 import type { ImportTrackResult } from '../-import.types';
 import type { ImportStagingFile } from '../-import.types';
@@ -172,12 +174,12 @@ export function SinglesImportPanel({
     <>
       <div className={styles.importPageSinglesHeader}>
         <div className={styles.importPageSinglesActions}>
-          <button type="button" className={styles.importPageSecondaryBtn} onClick={onSelectAll}>
+          <Button type="button" className={styles.importPageSecondaryBtn} onClick={onSelectAll}>
             <span id="import-page-select-all-text">
               {allSelected ? 'Deselect All' : 'Select All'}
             </span>
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             className={styles.importPageProcessBtn}
             id="import-page-singles-process-btn"
@@ -185,7 +187,7 @@ export function SinglesImportPanel({
             onClick={onProcessSingles}
           >
             Process Selected ({selectedCount})
-          </button>
+          </Button>
         </div>
       </div>
       <div className={styles.importPageSinglesList} id="import-page-singles-list">
@@ -206,14 +208,11 @@ export function SinglesImportPanel({
                 data-single-key={fileKey}
               >
                 <label className={styles.importPageSingleCheckboxWrap}>
-                  <input
-                    type="checkbox"
-                    aria-label={`Select ${file.filename}`}
-                    className={styles.importPageSingleCheckboxInput}
+                  <Checkbox
                     checked={isSelected}
-                    onChange={() => onToggleSingle(fileKey)}
+                    aria-label={`Select ${file.filename}`}
+                    onCheckedChange={() => onToggleSingle(fileKey)}
                   />
-                  <span className={styles.importPageSingleCheckbox} aria-hidden="true" />
                 </label>
                 <div className={styles.importPageSingleInfo}>
                   <div className={styles.importPageSingleFilename}>{file.filename}</div>
@@ -280,7 +279,7 @@ function SingleSearchPanel({
   return (
     <div className={styles.importPageSingleSearchPanel}>
       <div className={styles.importPageSingleSearchBar}>
-        <input
+        <TextInput
           type="text"
           className={styles.importPageSingleSearchInput}
           value={query}
@@ -290,13 +289,13 @@ function SingleSearchPanel({
             if (event.key === 'Enter') onRunSearch(fileKey, query);
           }}
         />
-        <button
+        <Button
           type="button"
           className={styles.importPageSingleSearchGo}
           onClick={() => onRunSearch(fileKey, query)}
         >
           Search
-        </button>
+        </Button>
       </div>
       <div className={styles.importPageSingleSearchResults}>
         {searchState?.loading ? (

From af3d51c2ed110ab874c052b34452d413f07f8e8a Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 20:42:05 +0300
Subject: [PATCH 17/42] refactor(webui): theme import buttons

- add shared button variants and size controls backed by theme-aware styles
- move album import search controls onto shared button styling
- keep the import route layout-specific CSS limited to positioning
---
 webui/src/components/form/form.module.css     | 76 ++++++++++++++++++-
 webui/src/components/form/form.test.tsx       |  9 ++-
 webui/src/components/form/form.tsx            | 26 ++++++-
 .../routes/import/-ui/album-import-tab.tsx    | 11 +--
 .../routes/import/-ui/import-page.module.css  | 68 +----------------
 .../routes/import/-ui/singles-import-tab.tsx  |  2 +-
 6 files changed, 115 insertions(+), 77 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index 54638847..2da07111 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -363,11 +363,8 @@
   color: #fff;
   cursor: pointer;
   font: inherit;
-  font-size: 13px;
   font-weight: 600;
   line-height: 1.2;
-  min-height: 36px;
-  padding: 8px 12px;
   transition:
     transform 0.18s ease,
     border-color 0.18s ease,
@@ -376,6 +373,34 @@
     color 0.18s ease;
 }
 
+.buttonSizeSm {
+  min-height: 32px;
+  padding: 6px 10px;
+  font-size: 13px;
+}
+
+.buttonSizeMd {
+  min-height: 36px;
+  padding: 8px 12px;
+  font-size: 13px;
+}
+
+.buttonSizeLg {
+  min-height: 40px;
+  padding: 10px 20px;
+  font-size: 14px;
+}
+
+.buttonIcon {
+  width: var(--button-icon-size, 36px);
+  height: var(--button-icon-size, 36px);
+  min-height: var(--button-icon-size, 36px);
+  min-width: var(--button-icon-size, 36px);
+  padding: 0;
+  font-size: var(--button-icon-font-size, 15px);
+  line-height: 1;
+}
+
 .button:hover:not(:disabled) {
   transform: translateY(-1px);
   border-color: rgba(255, 255, 255, 0.18);
@@ -394,6 +419,51 @@
   transform: none;
 }
 
+.buttonPrimary {
+  border-color: rgba(var(--accent-light-rgb), 0.45);
+  background: rgb(var(--accent-light-rgb));
+  color: #000;
+}
+
+.buttonPrimary:hover:not(:disabled) {
+  border-color: rgba(var(--accent-light-rgb), 0.55);
+  background: rgba(var(--accent-light-rgb), 0.95);
+  color: #000;
+}
+
+.buttonPrimary:focus-visible {
+  border-color: rgba(var(--accent-light-rgb), 0.8);
+  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.16);
+}
+
+.buttonPrimary:disabled {
+  opacity: 0.62;
+  background: rgba(var(--accent-light-rgb), 0.45);
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.buttonGhost {
+  border-color: transparent;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.buttonGhost:hover:not(:disabled) {
+  transform: none;
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.07);
+  color: #fff;
+}
+
+.buttonGhost:focus-visible {
+  border-color: rgba(var(--accent-light-rgb), 0.42);
+  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
+}
+
+.buttonGhost:disabled {
+  opacity: 0.5;
+}
+
 .formError {
   color: #ff8d8d;
   font-size: 12px;
diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx
index 2feb7a2e..21a2cfa3 100644
--- a/webui/src/components/form/form.test.tsx
+++ b/webui/src/components/form/form.test.tsx
@@ -112,7 +112,9 @@ function FormDemo() {
 
       <FormActions>
         <Button type="button">Cancel</Button>
-        <Button type="submit">Save</Button>
+        <Button type="submit" variant="primary">
+          Save
+        </Button>
       </FormActions>
     </form>
   );
@@ -154,6 +156,9 @@ describe('form primitives', () => {
     expect(highPriority).toHaveAttribute('aria-pressed', 'true');
 
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute(
+      'data-variant',
+      'primary',
+    );
   });
 });
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 1a26870e..6d6b04fa 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -247,13 +247,35 @@ type BaseButtonProps = ComponentPropsWithoutRef<typeof BaseButton>;
 
 export type ButtonProps = Omit<BaseButtonProps, 'className'> & {
   className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'icon';
+  variant?: 'default' | 'primary' | 'ghost';
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { className, type = 'button', ...props },
+  { className, size = 'md', type = 'button', variant = 'default', ...props },
   ref,
 ) {
-  return <BaseButton ref={ref} className={clsx(styles.button, className)} type={type} {...props} />;
+  return (
+    <BaseButton
+      ref={ref}
+      className={clsx(
+        styles.button,
+        {
+          [styles.buttonSizeSm]: size === 'sm',
+          [styles.buttonSizeMd]: size === 'md',
+          [styles.buttonSizeLg]: size === 'lg',
+          [styles.buttonIcon]: size === 'icon',
+          [styles.buttonPrimary]: variant === 'primary',
+          [styles.buttonGhost]: variant === 'ghost',
+        },
+        className,
+      )}
+      data-variant={variant}
+      data-size={size}
+      type={type}
+      {...props}
+    />
+  );
 });
 
 export function FormError({ className, message }: { className?: string; message?: ReactNode }) {
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
index 82d3fed3..aae1089d 100644
--- a/webui/src/routes/import/-ui/album-import-tab.tsx
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -298,18 +298,19 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
               if (event.key === 'Enter') onRunSearch();
             }}
           />
-          <Button type="button" className={styles.importPageSearchBtn} onClick={onRunSearch}>
-            Search
-          </Button>
           <Button
             type="button"
-            className={`${styles.importPageClearBtn} ${albumResults === null ? styles.hidden : ''}`}
+            variant="ghost"
+            className={albumResults === null ? styles.hidden : ''}
             id="import-page-album-clear-btn"
             title="Clear search"
             onClick={onBackToSearch}
           >
             x
           </Button>
+          <Button type="button" variant="primary" onClick={onRunSearch}>
+            Search
+          </Button>
         </div>
 
         <div className={styles.importPageAlbumGrid} id="import-page-album-results">
@@ -568,7 +569,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
         </div>
         <Button
           type="button"
-          className={styles.importPageProcessBtn}
+          variant="primary"
           id="import-page-album-process-btn"
           disabled={matchedCount === 0}
           onClick={onProcessAlbum}
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index cf99b973..7d5fa81d 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -157,7 +157,6 @@
   display: flex;
   gap: 8px;
   margin-bottom: 20px;
-  position: relative;
 }
 
 .importPageSearchInput {
@@ -176,38 +175,10 @@
   border-color: rgba(var(--accent-light-rgb), 0.5);
 }
 
-.importPageSearchBtn {
-  padding: 10px 20px;
-  background: rgb(var(--accent-light-rgb));
-  border: none;
-  border-radius: 10px;
-  color: #000;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s;
-  white-space: nowrap;
-}
-
-.importPageSearchBtn:hover {
-  background: #1fdf64;
-}
-
-.importPageClearBtn {
-  position: absolute;
-  right: 100px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: rgba(255, 255, 255, 0.4);
-  font-size: 16px;
-  cursor: pointer;
-  padding: 4px 8px;
-}
-
-.importPageClearBtn:hover {
-  color: #fff;
+.importPageSearchBar > button {
+  align-self: stretch;
+  min-width: 40px;
+  padding: 0 12px;
 }
 
 /* Album grid */
@@ -537,37 +508,10 @@
   color: rgba(255, 255, 255, 0.5);
 }
 
-/* Buttons */
-.importPageProcessBtn {
-  padding: 10px 24px;
-  background: rgb(var(--accent-light-rgb));
-  border: none;
-  border-radius: 10px;
-  color: #000;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.importPageProcessBtn:hover {
-  background: #1fdf64;
-}
-
-.importPageProcessBtn:disabled {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.3);
-  cursor: not-allowed;
-}
-
 .importPageSecondaryBtn {
-  padding: 8px 16px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 8px;
   color: #ccc;
-  font-size: 13px;
-  cursor: pointer;
   transition: all 0.2s;
 }
 
@@ -577,13 +521,9 @@
 }
 
 .importPageBackBtn {
-  padding: 8px 16px;
   background: none;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
   color: rgba(255, 255, 255, 0.5);
-  font-size: 13px;
-  cursor: pointer;
   transition: all 0.2s;
 }
 
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index a9c05a8b..41fc25f2 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -181,7 +181,7 @@ export function SinglesImportPanel({
           </Button>
           <Button
             type="button"
-            className={styles.importPageProcessBtn}
+            variant="primary"
             id="import-page-singles-process-btn"
             disabled={selectedCount === 0}
             onClick={onProcessSingles}

From ae0711f4641747468f696764641dfb8cee90383a Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 21:01:07 +0300
Subject: [PATCH 18/42] refactor(webui): theme shared import controls

- add a shared switch primitive for theme-aware toggle styling\n- keep import-page buttons leaning on shared variants instead of local color rules\n- simplify the singles and auto-import controls around the shared form layer
---
 webui/src/components/form/form.module.css     | 56 +++++++++++++++++++
 webui/src/components/form/form.test.tsx       | 11 ++++
 webui/src/components/form/form.tsx            | 18 ++++++
 .../src/routes/import/-ui/auto-import-tab.tsx | 17 +++---
 .../routes/import/-ui/import-page.module.css  | 37 +-----------
 .../routes/import/-ui/singles-import-tab.tsx  |  3 +-
 6 files changed, 96 insertions(+), 46 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index 2da07111..1222e247 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -183,6 +183,62 @@
   transform: translateY(-0.5px) scaleX(1.18);
 }
 
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 3px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 999px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
+    rgba(255, 255, 255, 0.06);
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    background 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+  color-scheme: dark;
+}
+
+.switch[data-checked] {
+  border-color: rgba(var(--accent-light-rgb), 0.55);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-light-rgb), 0.55), rgba(var(--accent-rgb), 0.8)),
+    rgba(var(--accent-rgb), 0.45);
+}
+
+.switch[data-focused] {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.14);
+}
+
+.switch[data-disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.switchThumb {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  transform: translateX(0);
+  transition: transform 0.18s ease;
+}
+
+.switch[data-checked] .switchThumb {
+  transform: translateX(20px);
+}
+
 .rangeRoot {
   display: inline-flex;
   flex: 0 0 160px;
diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx
index 21a2cfa3..cadef869 100644
--- a/webui/src/components/form/form.test.tsx
+++ b/webui/src/components/form/form.test.tsx
@@ -14,6 +14,7 @@ import {
   OptionCardGroup,
   RangeInput,
   Select,
+  Switch,
   TextArea,
   TextInput,
 } from './form';
@@ -25,6 +26,7 @@ function FormDemo() {
   const [priority, setPriority] = useState<'low' | 'normal' | 'high'>('normal');
   const [status, setStatus] = useState('open');
   const [archive, setArchive] = useState(false);
+  const [enabled, setEnabled] = useState(true);
   const [confidence, setConfidence] = useState(90);
 
   return (
@@ -98,6 +100,10 @@ function FormDemo() {
         <Checkbox checked={archive} onCheckedChange={setArchive} />
       </FormField>
 
+      <FormField label="Enabled" helperText="Shared switch primitive">
+        <Switch checked={enabled} onCheckedChange={setEnabled} />
+      </FormField>
+
       <FormField label="Confidence" helperText="Shared range primitive">
         <RangeInput
           label="Confidence"
@@ -137,6 +143,11 @@ describe('form primitives', () => {
     fireEvent.click(archiveCheckbox);
     expect(archiveCheckbox).toBeChecked();
 
+    const enabledSwitch = screen.getByRole('switch', { name: 'Enabled' });
+    expect(enabledSwitch).toBeChecked();
+    fireEvent.click(enabledSwitch);
+    expect(enabledSwitch).not.toBeChecked();
+
     const confidenceSlider = screen.getByLabelText('Confidence', { selector: 'input' });
     expect(confidenceSlider).toHaveValue('90');
     fireEvent.change(confidenceSlider, { target: { value: '75' } });
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 6d6b04fa..ea6a2785 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -3,6 +3,7 @@ import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { Field } from '@base-ui/react/field';
 import { Input as BaseInput } from '@base-ui/react/input';
 import { Slider } from '@base-ui/react/slider';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 import clsx from 'clsx';
 import {
@@ -106,6 +107,23 @@ export const Checkbox = forwardRef<HTMLElement, CheckboxProps>(function Checkbox
   );
 });
 
+type BaseSwitchProps = ComponentPropsWithoutRef<typeof BaseSwitch.Root>;
+
+export type SwitchProps = Omit<BaseSwitchProps, 'className' | 'children'> & {
+  className?: string;
+};
+
+export const Switch = forwardRef<HTMLElement, SwitchProps>(function Switch(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <BaseSwitch.Root ref={ref} className={clsx(styles.switch, className)} {...props}>
+      <BaseSwitch.Thumb className={styles.switchThumb} />
+    </BaseSwitch.Root>
+  );
+});
+
 export interface RangeInputProps {
   className?: string;
   disabled?: boolean;
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 471c10f3..062173c8 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
-import { Button, RangeInput, Select } from '@/components/form/form';
+import { Button, RangeInput, Select, Switch } from '@/components/form/form';
 
 import type {
   ImportAutoFilter,
@@ -155,17 +155,16 @@ export function AutoImportPanel({
     <>
       <div className={styles.autoImportControls}>
         <div className={styles.autoImportToggleRow}>
-          <label className={styles.autoImportToggleLabel}>
-            <input
-              type="checkbox"
-              id="auto-import-enabled"
+          <div className={styles.autoImportToggleLabel}>
+            <Switch
               checked={Boolean(statusQuery.data?.running)}
               disabled={toggleMutation.isPending}
-              onChange={(event) => toggleMutation.mutate(event.target.checked)}
+              aria-labelledby="auto-import-toggle-label"
+              id="auto-import-enabled"
+              onCheckedChange={(checked) => toggleMutation.mutate(checked)}
             />
-            <span className={styles.autoImportToggleSlider} />
-            <span>Auto-Import</span>
-          </label>
+            <span id="auto-import-toggle-label">Auto-Import</span>
+          </div>
           <span
             className={`${styles.autoImportStatus} ${styles[statusClassName]}`}
             id="auto-import-status-text"
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 7d5fa81d..f77160f4 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -1024,46 +1024,11 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.7);
 }
 
-.autoImportToggleLabel input {
-  display: none;
-}
-
-.autoImportToggleSlider {
-  position: relative;
-  width: 44px;
-  height: 24px;
-  background: rgba(255, 255, 255, 0.12);
-  border-radius: 12px;
-  transition: background 0.2s ease;
-  display: inline-block;
-}
-
-.autoImportToggleSlider::after {
-  content: '';
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 18px;
-  height: 18px;
-  background: #fff;
-  border-radius: 50%;
-  transition: transform 0.2s ease;
-}
-
-.autoImportToggleLabel input:checked + .autoImportToggleSlider {
-  background: var(--accent-color, #6366f1);
-}
-
-.autoImportToggleLabel input:checked + .autoImportToggleSlider::after {
-  transform: translateX(20px);
-}
-
 .autoImportStatus {
   font-size: 12px;
   font-weight: 500;
@@ -1102,7 +1067,7 @@
   display: inline-block;
   flex: 0 0 5ch;
   width: 5ch;
-  text-align: right;
+  text-align: center;
   font-variant-numeric: tabular-nums;
 }
 .autoImportEmpty {
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index 41fc25f2..d387724f 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -169,6 +169,7 @@ export function SinglesImportPanel({
 }) {
   const selectedCount = files.filter((file) => selected.has(getStagingFileKey(file))).length;
   const allSelected = files.length > 0 && selectedCount === files.length;
+  const processVariant = selectedCount > 0 ? 'primary' : 'default';
 
   return (
     <>
@@ -181,7 +182,7 @@ export function SinglesImportPanel({
           </Button>
           <Button
             type="button"
-            variant="primary"
+            variant={processVariant}
             id="import-page-singles-process-btn"
             disabled={selectedCount === 0}
             onClick={onProcessSingles}

From b78350a3e2e263aac8d8fdd46050e47885b1d334 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 21:13:40 +0300
Subject: [PATCH 19/42] fix(webui): preserve import tab refresh URLs

- stop the legacy shell bootstrap from collapsing /import/auto and /import/singles back to the import root on reload\n- update the shell route smoke test to expect the canonical /import/album redirect for the bare import page
---
 webui/static/search.js                 | 4 +---
 webui/tests/shell-routes.smoke.spec.ts | 4 ++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/webui/static/search.js b/webui/static/search.js
index 7a2214fc..cd27d34e 100644
--- a/webui/static/search.js
+++ b/webui/static/search.js
@@ -1190,9 +1190,7 @@ async function loadInitialData() {
         if (route?.kind === 'react') {
             showReactHost(targetPage);
             setActivePageChrome(targetPage);
-            if (window.location.pathname !== route.path) {
-                history.replaceState({ page: targetPage }, '', route.path);
-            }
+            // Keep nested react-tab URLs like /import/auto or /import/singles intact.
             return;
         }
 
diff --git a/webui/tests/shell-routes.smoke.spec.ts b/webui/tests/shell-routes.smoke.spec.ts
index f2854c0c..818dd925 100644
--- a/webui/tests/shell-routes.smoke.spec.ts
+++ b/webui/tests/shell-routes.smoke.spec.ts
@@ -60,6 +60,10 @@ function expectedUrlPattern(path: string, pageId: ShellPageId): RegExp {
     return /\/stats(?:\?range=7d)?$/;
   }
 
+  if (pageId === 'import') {
+    return /\/import\/album$/;
+  }
+
   return new RegExp(`${path.replace('/', '\\/')}$`);
 }
 

From d066aba03d387c89623b4c639828efdf755b3411 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 21:38:11 +0300
Subject: [PATCH 20/42] refactor(webui): lean import buttons on shared styles

- move the import page over to shared button variants and option buttons
- strip route-local button chrome back to layout-only helpers
- keep the import route styling focused on layout, cards, and state indicators
---
 webui/src/components/form/form.module.css     |  31 +++
 webui/src/components/form/form.tsx            |   3 +-
 .../routes/import/-ui/album-import-tab.tsx    |  10 +-
 .../src/routes/import/-ui/auto-import-tab.tsx |  35 +--
 .../routes/import/-ui/import-page.module.css  | 243 ------------------
 webui/src/routes/import/-ui/import-page.tsx   |   7 +-
 .../routes/import/-ui/singles-import-tab.tsx  |  14 +-
 7 files changed, 70 insertions(+), 273 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index 1222e247..4e440e9f 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -408,6 +408,14 @@
   box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb), 0.08);
 }
 
+.optionButtonSelected:hover {
+  border-color: rgba(var(--accent-light-rgb), 0.62);
+  background: rgba(var(--accent-rgb), 0.26);
+  box-shadow:
+    0 0 0 1px rgba(var(--accent-light-rgb), 0.12),
+    0 10px 24px rgba(0, 0, 0, 0.14);
+}
+
 .button {
   display: inline-flex;
   align-items: center;
@@ -498,6 +506,29 @@
   color: rgba(0, 0, 0, 0.55);
 }
 
+.buttonSecondary {
+  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.08);
+  color: #ccc;
+}
+
+.buttonSecondary:hover:not(:disabled) {
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+}
+
+.buttonSecondary:focus-visible {
+  border-color: rgba(var(--accent-light-rgb), 0.45);
+  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
+}
+
+.buttonSecondary:disabled {
+  opacity: 0.55;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.45);
+}
+
 .buttonGhost {
   border-color: transparent;
   background: transparent;
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index ea6a2785..789fa55e 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -266,7 +266,7 @@ type BaseButtonProps = ComponentPropsWithoutRef<typeof BaseButton>;
 export type ButtonProps = Omit<BaseButtonProps, 'className'> & {
   className?: string;
   size?: 'sm' | 'md' | 'lg' | 'icon';
-  variant?: 'default' | 'primary' | 'ghost';
+  variant?: 'default' | 'primary' | 'secondary' | 'ghost';
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
@@ -284,6 +284,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
           [styles.buttonSizeLg]: size === 'lg',
           [styles.buttonIcon]: size === 'icon',
           [styles.buttonPrimary]: variant === 'primary',
+          [styles.buttonSecondary]: variant === 'secondary',
           [styles.buttonGhost]: variant === 'ghost',
         },
         className,
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
index aae1089d..d5ba7511 100644
--- a/webui/src/routes/import/-ui/album-import-tab.tsx
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -301,6 +301,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
           <Button
             type="button"
             variant="ghost"
+            size="icon"
             className={albumResults === null ? styles.hidden : ''}
             id="import-page-album-clear-btn"
             title="Clear search"
@@ -436,14 +437,16 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
         <div className={styles.importPageMatchActions}>
           <Button
             type="button"
-            className={styles.importPageSecondaryBtn}
+            variant="secondary"
+            size="sm"
             onClick={onAutoRematch}
           >
             Re-match Automatically
           </Button>
           <Button
             type="button"
-            className={styles.importPageBackBtn}
+            variant="ghost"
+            size="sm"
             onClick={onBackToSearch}
           >
             Back to Search
@@ -509,7 +512,8 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
                 {file ? (
                   <Button
                     type="button"
-                    className={styles.importPageMatchUnmatch}
+                    variant="ghost"
+                    size="icon"
                     onClick={(event) => {
                       event.stopPropagation();
                       onUnmatchTrack(index);
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 062173c8..13025853 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
-import { Button, RangeInput, Select, Switch } from '@/components/form/form';
+import { Button, OptionButton, OptionButtonGroup, RangeInput, Select, Switch } from '@/components/form/form';
 
 import type {
   ImportAutoFilter,
@@ -171,10 +171,12 @@ export function AutoImportPanel({
           >
             {getAutoImportStatusText(statusQuery.data)}
           </span>
+          <div className={styles.importPageFlexSpacer} />
           {statusQuery.data?.running ? (
             <Button
               type="button"
-              className={styles.autoImportScanNowBtn}
+              variant="secondary"
+              size="sm"
               id="auto-import-scan-now"
               title="Scan import folder now"
               disabled={scanMutation.isPending}
@@ -215,7 +217,8 @@ export function AutoImportPanel({
             </div>
             <Button
               type="button"
-              className={`${styles.autoImportActionBtn} ${styles.autoImportActionSecondary}`}
+              variant="primary"
+              size="sm"
               disabled={saveSettingsMutation.isPending}
               onClick={() =>
                 saveSettingsMutation.mutate({
@@ -264,25 +267,22 @@ export function AutoImportPanel({
               {counts.failed} failed
             </span>
           </div>
-          <div className={styles.autoImportFilters} id="auto-import-filters">
+          <OptionButtonGroup className={styles.autoImportFilters}>
             {(['all', 'pending', 'imported', 'failed'] as const).map((filter) => (
-              <Button
+              <OptionButton
                 key={filter}
-                type="button"
-                className={`${styles.autoImportFilterPill} ${
-                  autoFilter === filter ? styles.active : ''
-                }`}
-                data-filter={filter}
+                selected={autoFilter === filter}
                 onClick={() => onFilterChange(filter)}
               >
                 {filter === 'pending' ? 'Needs Review' : titleCase(filter)}
-              </Button>
+              </OptionButton>
             ))}
             <div className={styles.importPageFlexSpacer} />
             {counts.review > 0 ? (
               <Button
                 type="button"
-                className={styles.autoImportBatchBtn}
+                variant="secondary"
+                size="sm"
                 id="auto-import-approve-all"
                 disabled={approveAllMutation.isPending}
                 onClick={() => approveAllMutation.mutate()}
@@ -293,7 +293,8 @@ export function AutoImportPanel({
             {counts.imported + counts.failed > 0 ? (
               <Button
                 type="button"
-                className={`${styles.autoImportBatchBtn} ${styles.autoImportClearBtn}`}
+                variant="ghost"
+                size="sm"
                 id="auto-import-clear-completed"
                 disabled={clearMutation.isPending}
                 onClick={() => clearMutation.mutate()}
@@ -301,7 +302,7 @@ export function AutoImportPanel({
                 Clear History
               </Button>
             ) : null}
-          </div>
+          </OptionButtonGroup>
         </>
       ) : null}
 
@@ -449,7 +450,8 @@ function AutoImportResultCard({
             <div className={styles.autoImportActions}>
               <Button
                 type="button"
-                className={`${styles.autoImportActionBtn} ${styles.autoImportActionPrimary}`}
+                variant="primary"
+                size="sm"
                 disabled={approvePending}
                 onClick={(event) => {
                   event.stopPropagation();
@@ -460,7 +462,8 @@ function AutoImportResultCard({
               </Button>
               <Button
                 type="button"
-                className={`${styles.autoImportActionBtn} ${styles.autoImportActionSecondary}`}
+                variant="secondary"
+                size="sm"
                 disabled={rejectPending}
                 onClick={(event) => {
                   event.stopPropagation();
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index f77160f4..5470d25d 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -44,30 +44,6 @@
   animation: page-title-shimmer 6s ease-in-out infinite;
 }
 
-.importPageRefreshBtn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 8px;
-  color: #ccc;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.importPageRefreshBtn:hover {
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
-}
-
-.importPageRefreshBtnRefreshing {
-  opacity: 0.72;
-  cursor: progress;
-}
-
 .importPageStagingBar {
   display: flex;
   align-items: center;
@@ -175,12 +151,6 @@
   border-color: rgba(var(--accent-light-rgb), 0.5);
 }
 
-.importPageSearchBar > button {
-  align-self: stretch;
-  min-width: 40px;
-  padding: 0 12px;
-}
-
 /* Album grid */
 .importPageAlbumGrid {
   display: grid;
@@ -416,25 +386,6 @@
   font-style: italic;
 }
 
-.importPageMatchUnmatch {
-  background: none;
-  border: none;
-  color: rgba(255, 255, 255, 0.3);
-  font-size: 14px;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.importPageMatchUnmatch:hover {
-  color: #ff4444;
-  background: rgba(255, 68, 68, 0.1);
-}
-
 /* Unmatched file pool */
 .importPageUnmatchedPool {
   padding: 16px;
@@ -508,30 +459,6 @@
   color: rgba(255, 255, 255, 0.5);
 }
 
-.importPageSecondaryBtn {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: #ccc;
-  transition: all 0.2s;
-}
-
-.importPageSecondaryBtn:hover {
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
-}
-
-.importPageBackBtn {
-  background: none;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.5);
-  transition: all 0.2s;
-}
-
-.importPageBackBtn:hover {
-  color: #fff;
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
 /* Singles */
 .importPageSinglesHeader {
   display: flex;
@@ -631,25 +558,6 @@
   flex-shrink: 0;
 }
 
-.importPageIdentifyBtn {
-  padding: 6px 12px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 6px;
-  color: #ccc;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.importPageIdentifyBtn:hover {
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
-}
-
 /* Inline search panel for singles */
 .importPageSingleSearchPanel {
   grid-column: 1 / -1;
@@ -677,17 +585,6 @@
   border-color: rgba(var(--accent-light-rgb), 0.4);
 }
 
-.importPageSingleSearchGo {
-  padding: 8px 14px;
-  background: rgb(var(--accent-light-rgb));
-  border: none;
-  border-radius: 8px;
-  color: #000;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
 .importPageSingleSearchResults {
   display: flex;
   flex-direction: column;
@@ -796,19 +693,6 @@
   letter-spacing: 0.5px;
 }
 
-.importPageQueueClear {
-  background: none;
-  border: none;
-  color: rgba(255, 255, 255, 0.3);
-  font-size: 12px;
-  cursor: pointer;
-  padding: 2px 8px;
-}
-
-.importPageQueueClear:hover {
-  color: #fff;
-}
-
 .importPageQueueList {
   display: flex;
   flex-direction: column;
@@ -956,11 +840,6 @@
     min-width: 0;
   }
 
-  .importPageMatchUnmatch {
-    grid-area: unmatch;
-    justify-self: end;
-  }
-
   .importPageSinglesHeader {
     flex-direction: column;
     align-items: flex-start;
@@ -1097,7 +976,6 @@
 
 .autoImportCard:hover {
   background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.1);
 }
 
 .autoImportCompleted {
@@ -1214,27 +1092,6 @@
   color: rgba(255, 255, 255, 0.5);
 }
 
-/* Scan Now button */
-.autoImportScanNowBtn {
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 11px;
-  padding: 4px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  transition: all 0.15s;
-  margin-left: auto;
-}
-
-.autoImportScanNowBtn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.9);
-}
-
 /* Live progress */
 .autoImportProgress {
   margin-top: 8px;
@@ -1288,105 +1145,10 @@
 
 /* Filter pills */
 .autoImportFilters {
-  display: flex;
-  align-items: center;
-  gap: 6px;
   padding: 6px 0;
   margin-bottom: 8px;
 }
 
-.autoImportFilterPill {
-  padding: 6px 16px;
-  border-radius: 8px;
-  border: none;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.45);
-  font-size: 0.78rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.autoImportFilterPill:hover {
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.autoImportFilterPill.active {
-  background: rgba(var(--accent-rgb), 0.15);
-  color: rgb(var(--accent-light-rgb));
-  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
-}
-
-.autoImportActionBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  white-space: nowrap;
-  letter-spacing: 0.1px;
-}
-
-.autoImportActionPrimary {
-  background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.85));
-  color: #fff;
-  border-color: rgba(var(--accent-rgb), 0.3);
-  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2);
-}
-
-.autoImportActionPrimary:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
-  filter: brightness(1.1);
-}
-
-.autoImportActionPrimary:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-}
-
-.autoImportActionSecondary {
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.7);
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.autoImportActionSecondary:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-  border-color: rgba(255, 255, 255, 0.15);
-  transform: translateY(-1px);
-}
-
-/* Batch action buttons */
-.autoImportBatchBtn {
-  font-size: 11px;
-  padding: 4px 12px;
-  border-radius: 6px;
-  border: 1px solid rgba(var(--accent-rgb), 0.3);
-  background: rgba(var(--accent-rgb), 0.08);
-  color: rgba(var(--accent-rgb), 1);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.autoImportBatchBtn:hover {
-  background: rgba(var(--accent-rgb), 0.15);
-}
-
-.autoImportClearBtn {
-  border-color: rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.autoImportClearBtn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.8);
-}
-
 .autoImportCardMeta {
   display: flex;
   gap: 8px;
@@ -1541,11 +1303,6 @@
   margin-top: 4px;
 }
 
-.autoImportActions button {
-  font-size: 10px;
-  padding: 3px 10px;
-}
-
 @media (max-width: 768px) {
   .autoImportCard {
     flex-direction: column;
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
index 932d4922..cc12988c 100644
--- a/webui/src/routes/import/-ui/import-page.tsx
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -79,9 +79,7 @@ function ImportHeader({
         </h1>
         <Button
           type="button"
-          className={`${styles.importPageRefreshBtn} ${
-            refreshing ? styles.importPageRefreshBtnRefreshing : ''
-          }`}
+          variant="secondary"
           title="Re-scan import folder"
           aria-busy={refreshing}
           disabled={refreshing}
@@ -121,7 +119,8 @@ function ImportProcessingQueue() {
         <span className={styles.importPageQueueTitle}>Processing</span>
         <Button
           type="button"
-          className={styles.importPageQueueClear}
+          variant="ghost"
+          size="sm"
           id="import-page-queue-clear"
           style={{ display: hasFinished ? undefined : 'none' }}
           onClick={clearFinishedJobs}
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index d387724f..d474dff8 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -169,13 +169,13 @@ export function SinglesImportPanel({
 }) {
   const selectedCount = files.filter((file) => selected.has(getStagingFileKey(file))).length;
   const allSelected = files.length > 0 && selectedCount === files.length;
-  const processVariant = selectedCount > 0 ? 'primary' : 'default';
+  const processVariant = selectedCount > 0 ? 'primary' : 'secondary';
 
   return (
     <>
       <div className={styles.importPageSinglesHeader}>
         <div className={styles.importPageSinglesActions}>
-          <Button type="button" className={styles.importPageSecondaryBtn} onClick={onSelectAll}>
+          <Button type="button" variant="secondary" size="sm" onClick={onSelectAll}>
             <span id="import-page-select-all-text">
               {allSelected ? 'Deselect All' : 'Select All'}
             </span>
@@ -236,13 +236,14 @@ export function SinglesImportPanel({
                   ) : null}
                 </div>
                 <div className={styles.importPageSingleActions}>
-                  <button
+                  <Button
                     type="button"
-                    className={styles.importPageIdentifyBtn}
+                    variant="secondary"
+                    size="sm"
                     onClick={() => onOpenSearch(file)}
                   >
                     🔍 Identify
-                  </button>
+                  </Button>
                 </div>
                 {openSearchKey === fileKey ? (
                   <SingleSearchPanel
@@ -292,7 +293,8 @@ function SingleSearchPanel({
         />
         <Button
           type="button"
-          className={styles.importPageSingleSearchGo}
+          variant="primary"
+          size="sm"
           onClick={() => onRunSearch(fileKey, query)}
         >
           Search

From d32d88ea0edcb7bb5fcc27ca2bb4ae390c1b38f6 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 21:55:14 +0300
Subject: [PATCH 21/42] refactor(webui): add shared badges to form kit

- add a reusable shared Badge primitive alongside the existing form controls\n- use it for the import auto-filter count pills and remove the route-local badge styles\n- tighten option button spacing so embedded badges read cleanly
---
 webui/src/components/form/form.module.css     | 50 ++++++++++-
 webui/src/components/form/form.test.tsx       |  4 +
 webui/src/components/form/form.tsx            | 33 +++++++
 webui/src/components/form/index.ts            |  1 +
 webui/src/routes/import/-route.test.tsx       |  3 +-
 .../src/routes/import/-ui/auto-import-tab.tsx | 85 +++++++++++++------
 .../routes/import/-ui/import-page.module.css  | 21 -----
 7 files changed, 145 insertions(+), 52 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index 4e440e9f..30e6a60c 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -379,6 +379,9 @@
 }
 
 .optionButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
@@ -388,7 +391,7 @@
   font-size: 13px;
   font-weight: 600;
   min-width: 80px;
-  padding: 10px 14px;
+  padding: 8px 16px;
   transition:
     transform 0.18s ease,
     border-color 0.18s ease,
@@ -416,6 +419,51 @@
     0 10px 24px rgba(0, 0, 0, 0.14);
 }
 
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2ch;
+  padding: 1px 7px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 0.74rem;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badgeNeutral {
+  color: rgba(255, 255, 255, 0.45);
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.badgeInfo {
+  color: rgb(var(--accent-light-rgb));
+  background: rgba(var(--accent-rgb), 0.12);
+  border-color: rgba(var(--accent-light-rgb), 0.12);
+}
+
+.badgeSuccess {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.12);
+  border-color: rgba(74, 222, 128, 0.12);
+}
+
+.badgeWarning {
+  color: #fbbf24;
+  background: rgba(251, 191, 36, 0.12);
+  border-color: rgba(251, 191, 36, 0.12);
+}
+
+.badgeDanger {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.12);
+  border-color: rgba(248, 113, 113, 0.12);
+}
+
 .button {
   display: inline-flex;
   align-items: center;
diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx
index cadef869..7a060555 100644
--- a/webui/src/components/form/form.test.tsx
+++ b/webui/src/components/form/form.test.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { describe, expect, it } from 'vitest';
 
 import {
+  Badge,
   Button,
   Checkbox,
   FormActions,
@@ -114,6 +115,8 @@ function FormDemo() {
         />
       </FormField>
 
+      <Badge tone="warning">12</Badge>
+
       <FormError message="Validation failed" />
 
       <FormActions>
@@ -166,6 +169,7 @@ describe('form primitives', () => {
     fireEvent.click(highPriority);
     expect(highPriority).toHaveAttribute('aria-pressed', 'true');
 
+    expect(screen.getByText('12')).toHaveAttribute('data-tone', 'warning');
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute(
       'data-variant',
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 789fa55e..11e46227 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -261,6 +261,39 @@ export const OptionButton = forwardRef<HTMLButtonElement, OptionButtonProps>(fun
   );
 });
 
+type BaseBadgeProps = ComponentPropsWithoutRef<'span'>;
+
+export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+export type BadgeProps = Omit<BaseBadgeProps, 'className'> & {
+  className?: string;
+  tone?: BadgeTone;
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  { className, tone = 'neutral', ...props },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      className={clsx(
+        styles.badge,
+        {
+          [styles.badgeNeutral]: tone === 'neutral',
+          [styles.badgeInfo]: tone === 'info',
+          [styles.badgeSuccess]: tone === 'success',
+          [styles.badgeWarning]: tone === 'warning',
+          [styles.badgeDanger]: tone === 'danger',
+        },
+        className,
+      )}
+      data-tone={tone}
+      {...props}
+    />
+  );
+});
+
 type BaseButtonProps = ComponentPropsWithoutRef<typeof BaseButton>;
 
 export type ButtonProps = Omit<BaseButtonProps, 'className'> & {
diff --git a/webui/src/components/form/index.ts b/webui/src/components/form/index.ts
index f9a268a6..0f6ffb0d 100644
--- a/webui/src/components/form/index.ts
+++ b/webui/src/components/form/index.ts
@@ -1,5 +1,6 @@
 export {
   Button,
+  Badge,
   FormActions,
   FormError,
   FormField,
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 9020992e..79d686c9 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -301,9 +301,8 @@ describe('import route', () => {
   it('renders auto-import results from route search state', async () => {
     renderImportRoute(['/import/auto?autoFilter=pending']);
 
-    expect(await screen.findByText('1 review')).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: /^Needs Review\s*1$/ })).toBeInTheDocument();
     expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
-    expect(screen.getByText('Needs Review')).toBeInTheDocument();
     expect(getFetchUrls().some((url) => url.includes('/api/import/staging/groups'))).toBe(false);
     expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(
       false,
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 13025853..63ee5f57 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -1,7 +1,15 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
-import { Button, OptionButton, OptionButtonGroup, RangeInput, Select, Switch } from '@/components/form/form';
+import {
+  Badge,
+  Button,
+  OptionButton,
+  OptionButtonGroup,
+  RangeInput,
+  Select,
+  Switch,
+} from '@/components/form/form';
 
 import type {
   ImportAutoFilter,
@@ -250,31 +258,13 @@ export function AutoImportPanel({
 
       {allResults.length > 0 ? (
         <>
-          <div className={styles.autoImportStats} id="auto-import-stats">
-            <span className={styles.autoImportStat} id="auto-import-stat-imported">
-              {counts.imported} imported
-            </span>
-            <span
-              className={`${styles.autoImportStat} ${styles.autoImportStatReview}`}
-              id="auto-import-stat-review"
-            >
-              {counts.review} review
-            </span>
-            <span
-              className={`${styles.autoImportStat} ${styles.autoImportStatFailed}`}
-              id="auto-import-stat-failed"
-            >
-              {counts.failed} failed
-            </span>
-          </div>
           <OptionButtonGroup className={styles.autoImportFilters}>
             {(['all', 'pending', 'imported', 'failed'] as const).map((filter) => (
-              <OptionButton
-                key={filter}
-                selected={autoFilter === filter}
-                onClick={() => onFilterChange(filter)}
-              >
-                {filter === 'pending' ? 'Needs Review' : titleCase(filter)}
+              <OptionButton key={filter} selected={autoFilter === filter} onClick={() => onFilterChange(filter)}>
+                <span>{getAutoImportFilterLabel(filter)}</span>
+                <Badge tone={getAutoImportFilterTone(filter)}>
+                  {getAutoImportFilterCount(filter, counts, allResults.length)}
+                </Badge>
               </OptionButton>
             ))}
             <div className={styles.importPageFlexSpacer} />
@@ -555,6 +545,49 @@ function getAutoImportConfidenceClass(status: string): string {
   return classes[status] ?? '';
 }
 
+function getAutoImportFilterLabel(filter: ImportAutoFilter): string {
+  switch (filter) {
+    case 'all':
+      return 'All';
+    case 'pending':
+      return 'Needs Review';
+    case 'imported':
+      return 'Imported';
+    case 'failed':
+      return 'Failed';
+  }
+}
+
+function getAutoImportFilterCount(
+  filter: ImportAutoFilter,
+  counts: ReturnType<typeof getAutoImportCounts>,
+  totalCount: number,
+): number {
+  switch (filter) {
+    case 'all':
+      return totalCount;
+    case 'pending':
+      return counts.review;
+    case 'imported':
+      return counts.imported;
+    case 'failed':
+      return counts.failed;
+  }
+}
+
+function getAutoImportFilterTone(filter: ImportAutoFilter): 'neutral' | 'warning' | 'success' | 'danger' {
+  switch (filter) {
+    case 'pending':
+      return 'warning';
+    case 'imported':
+      return 'success';
+    case 'failed':
+      return 'danger';
+    case 'all':
+      return 'neutral';
+  }
+}
+
 function getMethodLabel(method: string | null | undefined): string {
   const labels: Record<string, string> = {
     tags: 'Tags',
@@ -565,10 +598,6 @@ function getMethodLabel(method: string | null | undefined): string {
   return method ? labels[method] || method : '';
 }
 
-function titleCase(value: string): string {
-  return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
-}
-
 async function confirmAction({
   title,
   message,
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 5470d25d..f30e8e7a 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -1122,27 +1122,6 @@
   animation: adlPulse 1.5s ease-in-out infinite;
 }
 
-/* Stats summary */
-.autoImportStats {
-  display: flex;
-  gap: 16px;
-  padding: 8px 0;
-  margin-bottom: 4px;
-}
-
-.autoImportStat {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.5);
-  font-weight: 500;
-}
-
-.autoImportStatReview {
-  color: #fbbf24;
-}
-.autoImportStatFailed {
-  color: #f87171;
-}
-
 /* Filter pills */
 .autoImportFilters {
   padding: 6px 0;

From 9f2c5c685bc9b70a7e0d295e1c72666499d9020b Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 17 May 2026 19:39:11 +0300
Subject: [PATCH 22/42] refactor(import): simplify API failure handling

- rely on ky for transport errors across import/staging calls
- keep explicit soft-failure checks for auto-import approval endpoints
- add regression test for approval/rejection soft failures
---
 webui/src/routes/import/-import.api.test.ts |  29 +++
 webui/src/routes/import/-import.api.ts      | 206 +++++++-------------
 2 files changed, 103 insertions(+), 132 deletions(-)
 create mode 100644 webui/src/routes/import/-import.api.test.ts

diff --git a/webui/src/routes/import/-import.api.test.ts b/webui/src/routes/import/-import.api.test.ts
new file mode 100644
index 00000000..1963b1f7
--- /dev/null
+++ b/webui/src/routes/import/-import.api.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+
+import { HttpResponse, http, server } from '@/test/msw';
+
+import { approveAutoImportResult, rejectAutoImportResult } from './-import.api';
+
+const softFailureMessage = 'Item not found or not pending review';
+
+describe('import api', () => {
+  it('surfaces soft failures from auto-import approval endpoints', async () => {
+    server.use(
+      http.post('/api/auto-import/approve/17', () =>
+        HttpResponse.json({
+          success: false,
+          error: softFailureMessage,
+        }),
+      ),
+      http.post('/api/auto-import/reject/18', () =>
+        HttpResponse.json({
+          success: false,
+          error: softFailureMessage,
+        }),
+      ),
+    );
+
+    await expect(approveAutoImportResult(17)).rejects.toThrow(softFailureMessage);
+    await expect(rejectAutoImportResult(18)).rejects.toThrow(softFailureMessage);
+  });
+});
diff --git a/webui/src/routes/import/-import.api.ts b/webui/src/routes/import/-import.api.ts
index 624d8a36..8de7234d 100644
--- a/webui/src/routes/import/-import.api.ts
+++ b/webui/src/routes/import/-import.api.ts
@@ -18,48 +18,26 @@ import type {
 
 export const IMPORT_QUERY_KEY = ['import'] as const;
 
-function assertSuccess<T extends { success: boolean; error?: string }>(
-  payload: T,
-  fallback: string,
-): T {
-  if (!payload.success) {
-    throw new Error(payload.error || fallback);
-  }
-  return payload;
-}
-
 export async function fetchImportStagingFiles(): Promise<ImportStagingFilesPayload> {
-  return assertSuccess(
-    await readJson<ImportStagingFilesPayload>(apiClient.get('import/staging/files')),
-    'Failed to load import folder',
-  );
+  return readJson<ImportStagingFilesPayload>(apiClient.get('import/staging/files'));
 }
 
 export async function fetchImportStagingGroups(): Promise<ImportStagingGroupsPayload> {
-  return assertSuccess(
-    await readJson<ImportStagingGroupsPayload>(apiClient.get('import/staging/groups')),
-    'Failed to load auto-detected albums',
-  );
+  return readJson<ImportStagingGroupsPayload>(apiClient.get('import/staging/groups'));
 }
 
 export async function fetchImportStagingSuggestions(): Promise<ImportAlbumSearchPayload> {
-  return assertSuccess(
-    await readJson<ImportAlbumSearchPayload>(apiClient.get('import/staging/suggestions')),
-    'Failed to load import suggestions',
-  );
+  return readJson<ImportAlbumSearchPayload>(apiClient.get('import/staging/suggestions'));
 }
 
 export async function searchImportAlbums(query: string): Promise<ImportAlbumSearchPayload> {
-  return assertSuccess(
-    await readJson<ImportAlbumSearchPayload>(
-      apiClient.get('import/search/albums', {
-        searchParams: {
-          q: query,
-          limit: '12',
-        },
-      }),
-    ),
-    'Album search failed',
+  return readJson<ImportAlbumSearchPayload>(
+    apiClient.get('import/search/albums', {
+      searchParams: {
+        q: query,
+        limit: '12',
+      },
+    }),
   );
 }
 
@@ -70,19 +48,16 @@ export async function matchImportAlbum(input: {
   albumArtist?: string | null;
   filePaths?: string[] | null;
 }): Promise<ImportAlbumMatchPayload> {
-  return assertSuccess(
-    await readJson<ImportAlbumMatchPayload>(
-      apiClient.post('import/album/match', {
-        json: {
-          album_id: input.albumId,
-          source: input.source || '',
-          album_name: input.albumName || '',
-          album_artist: input.albumArtist || '',
-          ...(input.filePaths?.length ? { file_paths: input.filePaths } : {}),
-        },
-      }),
-    ),
-    'Failed to match album',
+  return readJson<ImportAlbumMatchPayload>(
+    apiClient.post('import/album/match', {
+      json: {
+        album_id: input.albumId,
+        source: input.source || '',
+        album_name: input.albumName || '',
+        album_artist: input.albumArtist || '',
+        ...(input.filePaths?.length ? { file_paths: input.filePaths } : {}),
+      },
+    }),
   );
 }
 
@@ -90,142 +65,109 @@ export async function processImportAlbumTrack(input: {
   album: ImportAlbum;
   match: ImportAlbumMatch;
 }): Promise<ImportProcessPayload> {
-  return assertSuccess(
-    await readJson<ImportProcessPayload>(
-      apiClient.post('import/album/process', {
-        json: {
-          album: input.album,
-          matches: [input.match],
-        },
-      }),
-    ),
-    'Failed to process album track',
+  return readJson<ImportProcessPayload>(
+    apiClient.post('import/album/process', {
+      json: {
+        album: input.album,
+        matches: [input.match],
+      },
+    }),
   );
 }
 
 export async function searchImportTracks(query: string): Promise<ImportTrackSearchPayload> {
-  return assertSuccess(
-    await readJson<ImportTrackSearchPayload>(
-      apiClient.get('import/search/tracks', {
-        searchParams: {
-          q: query,
-          limit: '6',
-        },
-      }),
-    ),
-    'Track search failed',
+  return readJson<ImportTrackSearchPayload>(
+    apiClient.get('import/search/tracks', {
+      searchParams: {
+        q: query,
+        limit: '6',
+      },
+    }),
   );
 }
 
 export async function processImportSingleFile(file: unknown): Promise<ImportProcessPayload> {
-  return assertSuccess(
-    await readJson<ImportProcessPayload>(
-      apiClient.post('import/singles/process', {
-        json: {
-          files: [file],
-        },
-      }),
-    ),
-    'Failed to process single',
+  return readJson<ImportProcessPayload>(
+    apiClient.post('import/singles/process', {
+      json: {
+        files: [file],
+      },
+    }),
   );
 }
 
 export async function fetchAutoImportStatus(): Promise<ImportAutoImportStatusPayload> {
-  return assertSuccess(
-    await readJson<ImportAutoImportStatusPayload>(apiClient.get('auto-import/status')),
-    'Failed to load auto-import status',
-  );
+  return readJson<ImportAutoImportStatusPayload>(apiClient.get('auto-import/status'));
 }
 
 export async function fetchAutoImportSettings(): Promise<ImportAutoImportSettingsPayload> {
-  return assertSuccess(
-    await readJson<ImportAutoImportSettingsPayload>(apiClient.get('auto-import/settings')),
-    'Failed to load auto-import settings',
-  );
+  return readJson<ImportAutoImportSettingsPayload>(apiClient.get('auto-import/settings'));
 }
 
 export async function saveAutoImportSettings(input: {
   confidenceThreshold: number;
   scanInterval: number;
 }): Promise<void> {
-  assertSuccess(
-    await readJson<{ success: boolean; error?: string }>(
-      apiClient.post('auto-import/settings', {
-        json: {
-          confidence_threshold: input.confidenceThreshold,
-          scan_interval: input.scanInterval,
-        },
-      }),
-    ),
-    'Failed to save auto-import settings',
+  await readJson<{ success: boolean; error?: string }>(
+    apiClient.post('auto-import/settings', {
+      json: {
+        confidence_threshold: input.confidenceThreshold,
+        scan_interval: input.scanInterval,
+      },
+    }),
   );
 }
 
 export async function fetchAutoImportResults(): Promise<ImportAutoImportResultsPayload> {
-  return assertSuccess(
-    await readJson<ImportAutoImportResultsPayload>(
-      apiClient.get('auto-import/results', {
-        searchParams: {
-          limit: '100',
-        },
-      }),
-    ),
-    'Failed to load auto-import results',
+  return readJson<ImportAutoImportResultsPayload>(
+    apiClient.get('auto-import/results', {
+      searchParams: {
+        limit: '100',
+      },
+    }),
   );
 }
 
 export async function toggleAutoImport(enabled: boolean): Promise<void> {
-  assertSuccess(
-    await readJson<{ success: boolean; error?: string }>(
-      apiClient.post('auto-import/toggle', {
-        json: { enabled },
-      }),
-    ),
-    'Failed to toggle auto-import',
+  await readJson<{ success: boolean; error?: string }>(
+    apiClient.post('auto-import/toggle', {
+      json: { enabled },
+    }),
   );
 }
 
 export async function triggerAutoImportScan(): Promise<void> {
-  assertSuccess(
-    await readJson<{ success: boolean; error?: string }>(apiClient.post('auto-import/scan-now')),
-    'Failed to trigger scan',
-  );
+  await readJson<{ success: boolean; error?: string }>(apiClient.post('auto-import/scan-now'));
 }
 
 export async function approveAutoImportResult(id: number): Promise<void> {
-  assertSuccess(
-    await readJson<{ success: boolean; error?: string }>(
-      apiClient.post(`auto-import/approve/${id}`),
-    ),
-    'Failed to approve import',
+  const payload = await readJson<{ success: boolean; error?: string }>(
+    apiClient.post(`auto-import/approve/${id}`),
   );
+  if (!payload.success) {
+    throw new Error(payload.error || 'Failed to approve import');
+  }
 }
 
 export async function rejectAutoImportResult(id: number): Promise<void> {
-  assertSuccess(
-    await readJson<{ success: boolean; error?: string }>(
-      apiClient.post(`auto-import/reject/${id}`),
-    ),
-    'Failed to dismiss import',
+  const payload = await readJson<{ success: boolean; error?: string }>(
+    apiClient.post(`auto-import/reject/${id}`),
   );
+  if (!payload.success) {
+    throw new Error(payload.error || 'Failed to dismiss import');
+  }
 }
 
 export async function approveAllAutoImportResults(): Promise<number> {
-  const payload = assertSuccess(
-    await readJson<{ success: boolean; count?: number; error?: string }>(
-      apiClient.post('auto-import/approve-all'),
-    ),
-    'Failed to approve imports',
+  const payload = await readJson<{ success: boolean; count?: number; error?: string }>(
+    apiClient.post('auto-import/approve-all'),
   );
   return payload.count ?? 0;
 }
 
 export async function clearCompletedAutoImportResults(): Promise<number> {
-  const payload = assertSuccess(
-    await readJson<{ success: boolean; count?: number; error?: string }>(
-      apiClient.post('auto-import/clear-completed'),
-    ),
-    'Failed to clear import history',
+  const payload = await readJson<{ success: boolean; count?: number; error?: string }>(
+    apiClient.post('auto-import/clear-completed'),
   );
   return payload.count ?? 0;
 }

From 0721a859a9154c9c515f4332a00256a9860c323f Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 20:27:52 +0300
Subject: [PATCH 23/42] fix(import): keep count badge visible

- add a contrast override for badges inside primary buttons
- keep the singles process action aligned with the select/deselect row
- update import route tests for the new button label shape
---
 webui/src/components/form/form.module.css          |  6 ++++++
 webui/src/routes/import/-route.test.tsx            |  4 ++--
 webui/src/routes/import/-ui/singles-import-tab.tsx | 12 ++++++------
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index 30e6a60c..8f340d35 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -554,6 +554,12 @@
   color: rgba(0, 0, 0, 0.55);
 }
 
+.buttonPrimary .badge {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.18);
+  border-color: rgba(0, 0, 0, 0.22);
+}
+
 .buttonSecondary {
   border-color: rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.08);
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 79d686c9..e9e01466 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -240,7 +240,7 @@ describe('import route', () => {
     fireEvent.click(await screen.findByRole('link', { name: 'Singles' }));
 
     await waitFor(() => expect(history.location.pathname).toBe('/import/singles'));
-    expect(screen.getByText('Process Selected (0)')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Process Selected\s*0/ })).toBeInTheDocument();
   });
 
   it('keeps client workflow drafts across page remounts', async () => {
@@ -280,7 +280,7 @@ describe('import route', () => {
       expect(screen.getByRole('checkbox', { name: 'Select 02-track.flac' })).toBeChecked(),
     );
     expect(screen.getByRole('checkbox', { name: 'Select 01-track.flac' })).not.toBeChecked();
-    expect(screen.getByText('Process Selected (1)')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Process Selected\s*1/ })).toBeInTheDocument();
   });
 
   it('preserves album source details when matching an album', async () => {
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index d474dff8..e6d2014b 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -1,15 +1,15 @@
 import { useEffect } from 'react';
 
-import { Button, Checkbox, TextInput } from '@/components/form/form';
+import { Badge, Button, Checkbox, TextInput } from '@/components/form/form';
 
 import type { SingleSearchState } from '../-import.store';
 import type { ImportTrackResult } from '../-import.types';
 import type { ImportStagingFile } from '../-import.types';
 
-import styles from './import-page.module.css';
 import { searchImportTracks } from '../-import.api';
 import { formatDuration, getStagingFileKey } from '../-import.helpers';
 import { useSinglesImportWorkflow } from '../-import.store';
+import styles from './import-page.module.css';
 import {
   fallbackImage,
   getErrorMessage,
@@ -185,9 +185,11 @@ export function SinglesImportPanel({
             variant={processVariant}
             id="import-page-singles-process-btn"
             disabled={selectedCount === 0}
+            size="sm"
             onClick={onProcessSingles}
           >
-            Process Selected ({selectedCount})
+            <span>Process Selected</span>
+            <Badge>{selectedCount}</Badge>
           </Button>
         </div>
       </div>
@@ -203,9 +205,7 @@ export function SinglesImportPanel({
             return (
               <div
                 key={fileKey}
-                className={`${styles.importPageSingleItem} ${
-                  manualMatch ? styles.matched : ''
-                }`}
+                className={`${styles.importPageSingleItem} ${manualMatch ? styles.matched : ''}`}
                 data-single-key={fileKey}
               >
                 <label className={styles.importPageSingleCheckboxWrap}>

From 56f642aaddddb29d35bfe6fa6998e13f7ac798ba Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 20:37:32 +0300
Subject: [PATCH 24/42] test(import): remove stale frontend pytest

- delete the source-text guard for the old album lookup cache pattern\n- keep the import-page source-routing contract covered by Vitest route tests\n- avoid duplicating frontend behavior checks across pytest and the webui test suite
---
 .../test_import_page_album_lookup_pattern.py  | 132 ------------------
 1 file changed, 132 deletions(-)
 delete mode 100644 tests/test_import_page_album_lookup_pattern.py

diff --git a/tests/test_import_page_album_lookup_pattern.py b/tests/test_import_page_album_lookup_pattern.py
deleted file mode 100644
index 5bf4ab9d..00000000
--- a/tests/test_import_page_album_lookup_pattern.py
+++ /dev/null
@@ -1,132 +0,0 @@
-"""Pin the import-page album-lookup cache pattern in
-``webui/static/stats-automations.js`` — github issue #524 regression
-guard at the source-text level.
-
-Why a structural test instead of a behavioral JS test:
-
-``stats-automations.js`` is a ~7k-line file with a lot of global state
-+ inline DOM rendering. Loading it into a sandboxed Node `vm` context
-(the pattern used in `tests/static/test_discover_section_controller.mjs`)
-would require stubbing dozens of unrelated dependencies. The file
-needs to be modularized before behavioral tests are practical for
-arbitrary functions in it.
-
-Until then, this test fails the suite if the critical pattern from
-the #524 fix gets removed:
-
-1. The album cache (``_albumLookup`` field on ``importPageState``)
-2. Card renderers populating the cache before emitting the onclick
-3. The match-POST builder reading source/name/artist from the cache
-
-If anyone deletes the cache, the click handler, or the cache writes,
-this test catches it before the regression ships.
-"""
-
-from __future__ import annotations
-
-import re
-from pathlib import Path
-
-import pytest
-
-
-_REPO_ROOT = Path(__file__).resolve().parents[1]
-_SOURCE = _REPO_ROOT / "webui" / "static" / "stats-automations.js"
-
-
-@pytest.fixture(scope="module")
-def js_source() -> str:
-    return _SOURCE.read_text(encoding="utf-8")
-
-
-def test_album_lookup_cache_field_exists_on_state(js_source: str):
-    """importPageState must have an `_albumLookup` field. Without it,
-    card renderers have nowhere to stash source/name/artist for the
-    click handler to read."""
-    assert "_albumLookup:" in js_source, (
-        "importPageState._albumLookup field missing — the album cache "
-        "that backs the source-routing fix for issue #524 has been "
-        "removed. The click handler will fall back to passing only "
-        "album_id and the backend will silently misroute lookups again."
-    )
-
-
-def test_select_album_handler_reads_cache(js_source: str):
-    """importPageSelectAlbum must read source / name / artist from
-    the cache and include them in the match POST body. The whole
-    point of the fix."""
-    # Find the function body
-    match = re.search(
-        r"async function importPageSelectAlbum\([^)]*\) \{(.*?)^\}",
-        js_source, re.DOTALL | re.MULTILINE,
-    )
-    assert match, "importPageSelectAlbum function not found"
-    body = match.group(1)
-
-    # Must read from the lookup cache
-    assert "_albumLookup[" in body, (
-        "importPageSelectAlbum no longer reads from "
-        "importPageState._albumLookup — match POST will drop source "
-        "again, see issue #524."
-    )
-
-    # Must build a matchBody that includes source + album_name + album_artist
-    for required_field in ("source:", "album_name:", "album_artist:"):
-        assert required_field in body, (
-            f"matchBody missing required field {required_field!r}. "
-            "Backend's get_artist_album_tracks needs source to route "
-            "the lookup to the correct metadata client. Without it, "
-            "cross-source album_ids fall through to the failure-fallback "
-            "dict (Unknown Artist / album_id-as-title / 0 tracks). "
-            "See issue #524 for the original symptom."
-        )
-
-
-def test_card_renderer_populates_cache_before_onclick(js_source: str):
-    """The shared card-renderer ``_renderSuggestionCard`` must write to
-    ``_albumLookup`` before emitting the onclick — otherwise the click
-    handler reads an empty cache for newly-displayed albums.
-
-    Originally this test required >=2 cache writes (one per inline
-    renderer), but the search-results inline render was consolidated
-    into a single ``_renderSuggestionCard`` call as part of the #681
-    fix. The invariant now is: the shared renderer populates the cache,
-    and every render call site goes through it (no inline duplicates)."""
-    # 1. The shared renderer must contain the cache write.
-    match = re.search(
-        r"function _renderSuggestionCard\([^)]*\) \{(.*?)^\}",
-        js_source, re.DOTALL | re.MULTILINE,
-    )
-    assert match, "_renderSuggestionCard function not found"
-    body = match.group(1)
-    assert re.search(r"_albumLookup\[a\.id\]\s*=\s*\{", body), (
-        "_renderSuggestionCard no longer writes to _albumLookup before "
-        "emitting the onclick — every card rendered through this helper "
-        "would have an empty cache on click, regressing issue #524."
-    )
-
-    # 2. No inline card render allowed outside the shared helper.
-    #    A second `_albumLookup[a.id] = {` write means a caller is
-    #    re-implementing the renderer instead of calling the helper —
-    #    that's exactly the duplication the #524 fix consolidated away.
-    cache_writes = re.findall(r"_albumLookup\[a\.id\]\s*=\s*\{", js_source)
-    assert len(cache_writes) == 1, (
-        f"Expected exactly 1 _albumLookup write (inside _renderSuggestionCard), "
-        f"found {len(cache_writes)}. A new inline card-render site has "
-        "duplicated the cache-write logic — route the new caller through "
-        "_renderSuggestionCard(a, primarySource) instead."
-    )
-
-
-def test_cache_entry_carries_source_field(js_source: str):
-    """The cache must store `source:` per entry — not just id/name/artist."""
-    write_blocks = re.findall(
-        r"_albumLookup\[a\.id\]\s*=\s*\{[^}]*\}",
-        js_source,
-    )
-    assert write_blocks, "no _albumLookup writes found"
-    assert any("source:" in block for block in write_blocks), (
-        "_albumLookup cache entries must include `source` — that's the "
-        "field the click handler forwards to /api/import/album/match "
-        "to route the lookup to the correct provider."
-    )

From 934a612df32e68d67ac2aa9a5221e7493202e0c7 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 20:41:12 +0300
Subject: [PATCH 25/42] feat(form): add select size variants

---
 webui/src/components/form/form.module.css     | 20 ++++++++++++++-
 webui/src/components/form/form.test.tsx       | 12 +++++++++
 webui/src/components/form/form.tsx            | 25 ++++++++++++++++---
 webui/src/routes/import/-route.test.tsx       |  5 ++++
 .../src/routes/import/-ui/auto-import-tab.tsx |  1 +
 5 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index 8f340d35..31120695 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -73,6 +73,7 @@
 .select {
   width: auto;
   min-width: 130px;
+  box-sizing: border-box;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   background:
@@ -95,7 +96,6 @@
   font: inherit;
   font-size: 13px;
   line-height: 1.5;
-  padding: 8px 32px 8px 12px;
   transition:
     border-color 0.18s ease,
     background 0.18s ease,
@@ -107,6 +107,24 @@
   cursor: pointer;
 }
 
+.selectSizeSm {
+  min-height: 32px;
+  padding: 6px 30px 6px 10px;
+  background-position:
+    0 0,
+    0 0,
+    right 10px center;
+}
+
+.selectSizeMd {
+  min-height: 36px;
+  padding: 8px 32px 8px 12px;
+  background-position:
+    0 0,
+    0 0,
+    right 12px center;
+}
+
 .select:hover {
   border-color: rgba(255, 255, 255, 0.16);
   background:
diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx
index 7a060555..9c4923cb 100644
--- a/webui/src/components/form/form.test.tsx
+++ b/webui/src/components/form/form.test.tsx
@@ -138,6 +138,7 @@ describe('form primitives', () => {
     expect(screen.getByText('Short summary')).toBeInTheDocument();
     expect(screen.getByRole('alert')).toHaveTextContent('Validation failed');
     expect(screen.getByLabelText('Status')).toHaveValue('open');
+    expect(screen.getByLabelText('Status')).toHaveAttribute('data-size', 'md');
     fireEvent.change(screen.getByLabelText('Status'), { target: { value: 'resolved' } });
     expect(screen.getByLabelText('Status')).toHaveValue('resolved');
 
@@ -176,4 +177,15 @@ describe('form primitives', () => {
       'primary',
     );
   });
+
+  it('supports compact select sizing', () => {
+    render(
+      <Select aria-label="Compact" defaultValue="one" size="sm">
+        <option value="one">One</option>
+        <option value="two">Two</option>
+      </Select>,
+    );
+
+    expect(screen.getByLabelText('Compact')).toHaveAttribute('data-size', 'sm');
+  });
 });
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 11e46227..02958daa 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -77,13 +77,32 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
   return <textarea ref={ref} className={clsx(styles.textArea, className)} {...props} />;
 });
 
-export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+export type SelectSize = 'sm' | 'md';
+
+export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className' | 'size'> & {
+  className?: string;
+  size?: SelectSize;
+};
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { className, ...props },
+  { className, size = 'md', ...props },
   ref,
 ) {
-  return <select ref={ref} className={clsx(styles.select, className)} {...props} />;
+  return (
+    <select
+      ref={ref}
+      className={clsx(
+        styles.select,
+        {
+          [styles.selectSizeSm]: size === 'sm',
+          [styles.selectSizeMd]: size === 'md',
+        },
+        className,
+      )}
+      data-size={size}
+      {...props}
+    />
+  );
 });
 
 type BaseCheckboxProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Root>;
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index e9e01466..f4871df7 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -303,6 +303,11 @@ describe('import route', () => {
 
     expect(await screen.findByRole('button', { name: /^Needs Review\s*1$/ })).toBeInTheDocument();
     expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
+    const intervalSelect = document.getElementById('auto-import-interval');
+    if (!(intervalSelect instanceof HTMLElement)) {
+      throw new Error('auto-import interval select missing');
+    }
+    expect(intervalSelect).toHaveAttribute('data-size', 'sm');
     expect(getFetchUrls().some((url) => url.includes('/api/import/staging/groups'))).toBe(false);
     expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(
       false,
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 63ee5f57..c3f1d0ec 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -214,6 +214,7 @@ export function AutoImportPanel({
               <span>Interval:</span>
               <Select
                 id="auto-import-interval"
+                size="sm"
                 value={interval}
                 onChange={(event) => setInterval(Number(event.target.value))}
               >

From fccc03efefdef3d9139ef384c1e5c588684152c7 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 20:45:53 +0300
Subject: [PATCH 26/42] feat(import): badge auto-import status

---
 webui/src/routes/import/-import.helpers.ts     | 13 +++++++------
 webui/src/routes/import/-route.test.tsx        |  1 +
 .../src/routes/import/-ui/auto-import-tab.tsx  | 11 ++++-------
 .../routes/import/-ui/import-page.module.css   | 18 ------------------
 4 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/webui/src/routes/import/-import.helpers.ts b/webui/src/routes/import/-import.helpers.ts
index 54a88f78..9a1bd6e4 100644
--- a/webui/src/routes/import/-import.helpers.ts
+++ b/webui/src/routes/import/-import.helpers.ts
@@ -160,13 +160,14 @@ export function getAutoImportStatusText(status: ImportAutoImportStatusPayload |
   return 'Watching';
 }
 
-export function getAutoImportStatusClass(
+export type AutoImportStatusTone = 'neutral' | 'info' | 'success';
+
+export function getAutoImportStatusTone(
   status: ImportAutoImportStatusPayload | undefined,
-): string {
-  if (!status?.running) return 'disabled';
-  if (status.current_status === 'scanning') return 'scanning';
-  if (status.current_status === 'processing') return 'processing';
-  return 'active';
+): AutoImportStatusTone {
+  if (!status?.running || status.paused) return 'neutral';
+  if (status.current_status === 'scanning' || status.current_status === 'processing') return 'info';
+  return 'success';
 }
 
 export function getActiveImportLines(status: ImportAutoImportStatusPayload | undefined): string[] {
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index f4871df7..dcaf917b 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -303,6 +303,7 @@ describe('import route', () => {
 
     expect(await screen.findByRole('button', { name: /^Needs Review\s*1$/ })).toBeInTheDocument();
     expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
+    expect(screen.getByText('Watching')).toHaveAttribute('data-tone', 'success');
     const intervalSelect = document.getElementById('auto-import-interval');
     if (!(intervalSelect instanceof HTMLElement)) {
       throw new Error('auto-import interval select missing');
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index c3f1d0ec..1c190cce 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -34,9 +34,9 @@ import {
   filterAutoImportResults,
   getActiveImportLines,
   getAutoImportCounts,
-  getAutoImportStatusClass,
   getAutoImportStatusMeta,
   getAutoImportStatusText,
+  getAutoImportStatusTone,
   getAutoImportTimeAgo,
   getConfidenceClass,
   parseAutoImportMatchData,
@@ -149,7 +149,7 @@ export function AutoImportPanel({
   const results = filterAutoImportResults(allResults, autoFilter);
   const counts = getAutoImportCounts(allResults);
   const activeLines = getActiveImportLines(statusQuery.data);
-  const statusClassName = getAutoImportStatusClass(statusQuery.data);
+  const statusTone = getAutoImportStatusTone(statusQuery.data);
 
   if (statusQuery.error) {
     return (
@@ -173,12 +173,9 @@ export function AutoImportPanel({
             />
             <span id="auto-import-toggle-label">Auto-Import</span>
           </div>
-          <span
-            className={`${styles.autoImportStatus} ${styles[statusClassName]}`}
-            id="auto-import-status-text"
-          >
+          <Badge id="auto-import-status-text" tone={statusTone}>
             {getAutoImportStatusText(statusQuery.data)}
-          </span>
+          </Badge>
           <div className={styles.importPageFlexSpacer} />
           {statusQuery.data?.running ? (
             <Button
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index f30e8e7a..52fc0608 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -908,24 +908,6 @@
   color: rgba(255, 255, 255, 0.7);
 }
 
-.autoImportStatus {
-  font-size: 12px;
-  font-weight: 500;
-  padding: 2px 10px;
-  border-radius: 6px;
-}
-.autoImportStatus.active {
-  color: #4ade80;
-  background: rgba(74, 222, 128, 0.1);
-}
-.autoImportStatus.scanning {
-  color: rgb(var(--accent-light-rgb));
-  background: rgba(var(--accent-rgb), 0.1);
-}
-.autoImportStatus.disabled {
-  color: rgba(255, 255, 255, 0.3);
-}
-
 .autoImportSettingsRow {
   display: flex;
   align-items: center;

From 9ba54bd82dff6e72e3689f9de7727900d2977dc2 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 20:50:28 +0300
Subject: [PATCH 27/42] feat(form): add compact option groups

- add a size prop to OptionButtonGroup with a denser sm layout\n- use the compact filter group on the auto-import panel\n- keep the new size variants covered in form and route tests
---
 webui/src/components/form/form.module.css     |  11 ++
 webui/src/components/form/form.test.tsx       |  11 ++
 webui/src/components/form/form.tsx            |  29 ++++-
 webui/src/routes/import/-route.test.tsx       |   2 +
 .../src/routes/import/-ui/auto-import-tab.tsx | 105 ++++++++++--------
 5 files changed, 105 insertions(+), 53 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index 31120695..bb2654f7 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -396,6 +396,17 @@
   gap: 8px;
 }
 
+.optionButtonGroupSizeSm {
+  gap: 6px;
+}
+
+.optionButtonGroupSizeSm .optionButton {
+  min-width: 0;
+  padding: 6px 12px;
+  font-size: 12px;
+  gap: 6px;
+}
+
 .optionButton {
   display: inline-flex;
   align-items: center;
diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx
index 9c4923cb..41e2d363 100644
--- a/webui/src/components/form/form.test.tsx
+++ b/webui/src/components/form/form.test.tsx
@@ -178,6 +178,17 @@ describe('form primitives', () => {
     );
   });
 
+  it('supports compact option button groups', () => {
+    const { container } = render(
+      <OptionButtonGroup size="sm">
+        <OptionButton selected>All</OptionButton>
+        <OptionButton>Pending</OptionButton>
+      </OptionButtonGroup>,
+    );
+
+    expect(container.querySelector('[data-size="sm"]')).toBeInTheDocument();
+  });
+
   it('supports compact select sizing', () => {
     render(
       <Select aria-label="Compact" defaultValue="one" size="sm">
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 02958daa..4ee1baf3 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -247,14 +247,33 @@ export const OptionCard = forwardRef<HTMLButtonElement, OptionCardProps>(functio
   );
 });
 
+export type OptionButtonGroupSize = 'sm' | 'md';
+
+export interface OptionButtonGroupProps {
+  children: ReactNode;
+  className?: string;
+  size?: OptionButtonGroupSize;
+}
+
 export function OptionButtonGroup({
   className,
   children,
-}: {
-  children: ReactNode;
-  className?: string;
-}) {
-  return <div className={clsx(styles.optionButtonGroup, className)}>{children}</div>;
+  size = 'md',
+}: OptionButtonGroupProps) {
+  return (
+    <div
+      className={clsx(
+        styles.optionButtonGroup,
+        {
+          [styles.optionButtonGroupSizeSm]: size === 'sm',
+        },
+        className,
+      )}
+      data-size={size}
+    >
+      {children}
+    </div>
+  );
 }
 
 export interface OptionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index dcaf917b..7f9634fc 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -304,6 +304,8 @@ describe('import route', () => {
     expect(await screen.findByRole('button', { name: /^Needs Review\s*1$/ })).toBeInTheDocument();
     expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
     expect(screen.getByText('Watching')).toHaveAttribute('data-tone', 'success');
+    const compactFilterGroup = document.querySelector('#auto-import-results [data-size="sm"]');
+    expect(compactFilterGroup).toBeInTheDocument();
     const intervalSelect = document.getElementById('auto-import-interval');
     if (!(intervalSelect instanceof HTMLElement)) {
       throw new Error('auto-import interval select missing');
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 1c190cce..0df970d6 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -255,43 +255,45 @@ export function AutoImportPanel({
       </div>
 
       {allResults.length > 0 ? (
-        <>
-          <OptionButtonGroup className={styles.autoImportFilters}>
-            {(['all', 'pending', 'imported', 'failed'] as const).map((filter) => (
-              <OptionButton key={filter} selected={autoFilter === filter} onClick={() => onFilterChange(filter)}>
-                <span>{getAutoImportFilterLabel(filter)}</span>
-                <Badge tone={getAutoImportFilterTone(filter)}>
-                  {getAutoImportFilterCount(filter, counts, allResults.length)}
-                </Badge>
-              </OptionButton>
-            ))}
-            <div className={styles.importPageFlexSpacer} />
-            {counts.review > 0 ? (
-              <Button
-                type="button"
-                variant="secondary"
-                size="sm"
-                id="auto-import-approve-all"
-                disabled={approveAllMutation.isPending}
-                onClick={() => approveAllMutation.mutate()}
-              >
-                Approve All
-              </Button>
-            ) : null}
-            {counts.imported + counts.failed > 0 ? (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                id="auto-import-clear-completed"
-                disabled={clearMutation.isPending}
-                onClick={() => clearMutation.mutate()}
-              >
-                Clear History
-              </Button>
-            ) : null}
-          </OptionButtonGroup>
-        </>
+        <OptionButtonGroup size="sm" className={styles.autoImportFilters}>
+          {(['all', 'pending', 'imported', 'failed'] as const).map((filter) => (
+            <OptionButton
+              key={filter}
+              selected={autoFilter === filter}
+              onClick={() => onFilterChange(filter)}
+            >
+              <span>{getAutoImportFilterLabel(filter)}</span>
+              <Badge tone={getAutoImportFilterTone(filter)}>
+                {getAutoImportFilterCount(filter, counts, allResults.length)}
+              </Badge>
+            </OptionButton>
+          ))}
+          <div className={styles.importPageFlexSpacer} />
+          {counts.review > 0 ? (
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              id="auto-import-approve-all"
+              disabled={approveAllMutation.isPending}
+              onClick={() => approveAllMutation.mutate()}
+            >
+              Approve All
+            </Button>
+          ) : null}
+          {counts.imported + counts.failed > 0 ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              id="auto-import-clear-completed"
+              disabled={clearMutation.isPending}
+              onClick={() => clearMutation.mutate()}
+            >
+              Clear History
+            </Button>
+          ) : null}
+        </OptionButtonGroup>
       ) : null}
 
       <div className={styles.autoImportResults} id="auto-import-results">
@@ -354,8 +356,8 @@ function AutoImportResultCard({
   status: ImportAutoImportStatusPayload | undefined;
   onApprove: () => void;
   onReject: () => void;
-    onToggle: () => void;
-  }) {
+  onToggle: () => void;
+}) {
   const confidencePercent = Math.round((result.confidence || 0) * 100);
   const confidenceClass = getConfidenceClass(confidencePercent);
   const statusMeta = getAutoImportStatusMeta(result.status);
@@ -412,11 +414,17 @@ function AutoImportResultCard({
           )}
         </div>
         <div className={styles.autoImportCardCenter}>
-          <div className={styles.autoImportCardAlbum}>{result.album_name || result.folder_name}</div>
-          <div className={styles.autoImportCardArtist}>{result.artist_name || 'Unknown Artist'}</div>
+          <div className={styles.autoImportCardAlbum}>
+            {result.album_name || result.folder_name}
+          </div>
+          <div className={styles.autoImportCardArtist}>
+            {result.artist_name || 'Unknown Artist'}
+          </div>
           <div className={styles.autoImportCardMeta}>
             <span>{matchSummary}</span>
-            {methodLabel ? <span className={styles.autoImportMethodBadge}>{methodLabel}</span> : null}
+            {methodLabel ? (
+              <span className={styles.autoImportMethodBadge}>{methodLabel}</span>
+            ) : null}
             {timeAgo ? <span>{timeAgo}</span> : null}
           </div>
           {result.error_message ? (
@@ -488,13 +496,12 @@ function AutoImportResultCard({
               .filter(Boolean)
               .join(' ');
             return (
-              <div
-                key={`${track.name}-${track.file}-${trackIndex}`}
-                className={rowClassName}
-              >
+              <div key={`${track.name}-${track.file}-${trackIndex}`} className={rowClassName}>
                 <span className={styles.autoImportTrackName}>{track.name}</span>
                 <span className={styles.autoImportTrackFile}>{track.file}</span>
-                <span className={`${styles.autoImportTrackConf} ${getAutoImportConfidenceClass(getConfidenceClass(track.confidence))}`}>
+                <span
+                  className={`${styles.autoImportTrackConf} ${getAutoImportConfidenceClass(getConfidenceClass(track.confidence))}`}
+                >
                   {track.confidence}%
                 </span>
               </div>
@@ -573,7 +580,9 @@ function getAutoImportFilterCount(
   }
 }
 
-function getAutoImportFilterTone(filter: ImportAutoFilter): 'neutral' | 'warning' | 'success' | 'danger' {
+function getAutoImportFilterTone(
+  filter: ImportAutoFilter,
+): 'neutral' | 'warning' | 'success' | 'danger' {
   switch (filter) {
     case 'pending':
       return 'warning';

From 7a0548ac94c4998f5b1fcb2f17e798d3407b96c0 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 21:11:45 +0300
Subject: [PATCH 28/42] refactor(import): normalize controls and classes

- let the singles action buttons use the default size again
- remove redundant type="button" props from import controls
- switch import page conditional classes to clsx object notation
- drop route-test assertions that pinned compact auto-import sizes
---
 webui/src/routes/import/-route.test.tsx       |  7 --
 .../routes/import/-ui/album-import-tab.tsx    | 72 +++++++------------
 .../src/routes/import/-ui/auto-import-tab.tsx | 45 +++++-------
 webui/src/routes/import/-ui/import-page.tsx   | 38 +++++-----
 .../routes/import/-ui/singles-import-tab.tsx  | 25 ++-----
 5 files changed, 70 insertions(+), 117 deletions(-)

diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 7f9634fc..989aaacb 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -304,13 +304,6 @@ describe('import route', () => {
     expect(await screen.findByRole('button', { name: /^Needs Review\s*1$/ })).toBeInTheDocument();
     expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
     expect(screen.getByText('Watching')).toHaveAttribute('data-tone', 'success');
-    const compactFilterGroup = document.querySelector('#auto-import-results [data-size="sm"]');
-    expect(compactFilterGroup).toBeInTheDocument();
-    const intervalSelect = document.getElementById('auto-import-interval');
-    if (!(intervalSelect instanceof HTMLElement)) {
-      throw new Error('auto-import interval select missing');
-    }
-    expect(intervalSelect).toHaveAttribute('data-size', 'sm');
     expect(getFetchUrls().some((url) => url.includes('/api/import/staging/groups'))).toBe(false);
     expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(
       false,
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
index d5ba7511..f74b79ae 100644
--- a/webui/src/routes/import/-ui/album-import-tab.tsx
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -1,10 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { type DragEvent, type KeyboardEvent, useState } from 'react';
+import clsx from 'clsx';
 
 import { Button, TextInput } from '@/components/form/form';
 
 import type { ImportAlbumResult } from '../-import.types';
-import styles from './import-page.module.css';
 
 import {
   importStagingGroupsQueryOptions,
@@ -20,6 +20,7 @@ import {
   IMPORT_PLACEHOLDER_IMAGE,
 } from '../-import.helpers';
 import { useAlbumImportWorkflow } from '../-import.store';
+import styles from './import-page.module.css';
 import {
   fallbackImage,
   getErrorMessage,
@@ -235,10 +236,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
 
   return (
     <>
-      <div
-        id="import-page-album-search-section"
-        className={showingMatch ? styles.hidden : ''}
-      >
+      <div id="import-page-album-search-section" className={clsx({ [styles.hidden]: showingMatch })}>
         {albumResults === null && (
           <>
             {groups.length > 0 && (
@@ -246,10 +244,9 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
                 <div className={styles.importPageSectionLabel}>Auto-Detected Albums</div>
                 <div className={styles.importPageAlbumGrid}>
                   {groups.map((group, index) => (
-                  <button
+                    <button
                       key={`${group.artist}-${group.album}-${index}`}
-                      type="button"
-                      className={`${styles.importPageAlbumCard} ${styles.importPageAutoGroupCard}`}
+                      className={clsx(styles.importPageAlbumCard, styles.importPageAutoGroupCard)}
                       onClick={() => onRunGroupSearch(group)}
                     >
                       <div className={styles.importPageAutoGroupCount}>{group.file_count}</div>
@@ -299,17 +296,16 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
             }}
           />
           <Button
-            type="button"
             variant="ghost"
             size="icon"
-            className={albumResults === null ? styles.hidden : ''}
+            className={clsx({ [styles.hidden]: albumResults === null })}
             id="import-page-album-clear-btn"
             title="Clear search"
             onClick={onBackToSearch}
           >
             x
           </Button>
-          <Button type="button" variant="primary" onClick={onRunSearch}>
+          <Button variant="primary" onClick={onRunSearch}>
             Search
           </Button>
         </div>
@@ -333,10 +329,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
         </div>
       </div>
 
-      <div
-        id="import-page-album-match-section"
-        className={showingMatch ? '' : styles.hidden}
-      >
+      <div id="import-page-album-match-section" className={clsx({ [styles.hidden]: !showingMatch })}>
         {albumMatchLoading ? (
           <div className={styles.importPageEmptyState}>Matching files to tracklist...</div>
         ) : albumMatchError ? (
@@ -344,7 +337,9 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
         ) : albumMatch?.album ? (
           <AlbumMatchPanel viewModel={viewModel} />
         ) : (
-          <div className={styles.importPageEmptyState}>Select an album to start matching files.</div>
+          <div className={styles.importPageEmptyState}>
+            Select an album to start matching files.
+          </div>
         )}
       </div>
     </>
@@ -359,7 +354,7 @@ function AlbumCard({
   onSelect: (album: ImportAlbumResult) => void;
 }) {
   return (
-    <button type="button" className={styles.importPageAlbumCard} onClick={() => onSelect(album)}>
+    <button className={styles.importPageAlbumCard} onClick={() => onSelect(album)}>
       <img
         src={album.image_url || IMPORT_PLACEHOLDER_IMAGE}
         alt={album.name}
@@ -435,20 +430,10 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
       <div className={styles.importPageMatchHeader}>
         <h3>Track Matching</h3>
         <div className={styles.importPageMatchActions}>
-          <Button
-            type="button"
-            variant="secondary"
-            size="sm"
-            onClick={onAutoRematch}
-          >
+          <Button variant="secondary" onClick={onAutoRematch}>
             Re-match Automatically
           </Button>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={onBackToSearch}
-          >
+          <Button variant="ghost" onClick={onBackToSearch}>
             Back to Search
           </Button>
         </div>
@@ -467,9 +452,10 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
           return (
             <div
               key={`${trackInfo.displayTrackNumber}-${trackInfo.name}-${index}`}
-              className={`${styles.importPageMatchRow} ${
-                file ? styles.matched : ''
-              } ${dragOverTrack === index ? styles.dragOver : ''}`}
+              className={clsx(styles.importPageMatchRow, {
+                [styles.matched]: file,
+                [styles.dragOver]: dragOverTrack === index,
+              })}
               onClick={() => {
                 if (tapSelectedChip !== null) onTapAssign(index, tapSelectedChip);
               }}
@@ -488,18 +474,16 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
             >
               <span className={styles.importPageMatchNum}>{trackInfo.displayTrackNumber}</span>
               <span className={styles.importPageMatchTrack}>{trackInfo.name}</span>
-              <span
-                className={`${styles.importPageMatchFile} ${
-                  file ? styles.hasFile : ''
-                }`}
-              >
+              <span className={clsx(styles.importPageMatchFile, {
+                [styles.hasFile]: file,
+              })}>
                 {file ? (
                   <>
                     <span className={styles.importPageMatchFileName}>{file.filename}</span>
                     <span
-                      className={`${styles.importPageMatchConfidence} ${
-                        confidence >= 0.7 ? '' : styles.low
-                      }`}
+                      className={clsx(styles.importPageMatchConfidence, {
+                        [styles.low]: confidence < 0.7,
+                      })}
                     >
                       {confidencePercent}%
                     </span>
@@ -511,7 +495,6 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
               <span>
                 {file ? (
                   <Button
-                    type="button"
                     variant="ghost"
                     size="icon"
                     onClick={(event) => {
@@ -541,9 +524,9 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
                 key={`${file.full_path}-${index}`}
                 role="button"
                 tabIndex={0}
-                className={`${styles.importPageFileChip} ${
-                  tapSelectedChip === index ? styles.selected : ''
-                }`}
+                className={clsx(styles.importPageFileChip, {
+                  [styles.selected]: tapSelectedChip === index,
+                })}
                 draggable
                 onClick={(event) => {
                   event.stopPropagation();
@@ -572,7 +555,6 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
           {matchedCount} of {albumMatch.matches?.length ?? 0} tracks matched
         </div>
         <Button
-          type="button"
           variant="primary"
           id="import-page-album-process-btn"
           disabled={matchedCount === 0}
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 0df970d6..0b874f21 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
 import {
@@ -179,9 +180,7 @@ export function AutoImportPanel({
           <div className={styles.importPageFlexSpacer} />
           {statusQuery.data?.running ? (
             <Button
-              type="button"
               variant="secondary"
-              size="sm"
               id="auto-import-scan-now"
               title="Scan import folder now"
               disabled={scanMutation.isPending}
@@ -222,7 +221,6 @@ export function AutoImportPanel({
               </Select>
             </div>
             <Button
-              type="button"
               variant="primary"
               size="sm"
               disabled={saveSettingsMutation.isPending}
@@ -271,9 +269,7 @@ export function AutoImportPanel({
           <div className={styles.importPageFlexSpacer} />
           {counts.review > 0 ? (
             <Button
-              type="button"
               variant="secondary"
-              size="sm"
               id="auto-import-approve-all"
               disabled={approveAllMutation.isPending}
               onClick={() => approveAllMutation.mutate()}
@@ -283,11 +279,10 @@ export function AutoImportPanel({
           ) : null}
           {counts.imported + counts.failed > 0 ? (
             <Button
-              type="button"
               variant="ghost"
-              size="sm"
               id="auto-import-clear-completed"
               disabled={clearMutation.isPending}
+              size="sm"
               onClick={() => clearMutation.mutate()}
             >
               Clear History
@@ -389,7 +384,7 @@ function AutoImportResultCard({
 
   return (
     <div
-      className={`${styles.autoImportCard} ${statusCardClass}`}
+      className={clsx(styles.autoImportCard, statusCardClass)}
       role="button"
       tabIndex={0}
       onClick={onToggle}
@@ -432,12 +427,12 @@ function AutoImportResultCard({
           ) : null}
         </div>
         <div className={styles.autoImportCardRight}>
-          <div className={`${styles.autoImportStatusBadge} ${statusBadgeClass}`}>
+          <div className={clsx(styles.autoImportStatusBadge, statusBadgeClass)}>
             {statusMeta.icon} {statusMeta.label}
           </div>
           <div className={styles.autoImportConfidenceBar}>
             <div
-              className={`${styles.autoImportConfidenceFill} ${confidenceFillClass}`}
+              className={clsx(styles.autoImportConfidenceFill, confidenceFillClass)}
               style={{ width: `${confidencePercent}%` }}
             />
           </div>
@@ -445,9 +440,7 @@ function AutoImportResultCard({
           {result.status === 'pending_review' ? (
             <div className={styles.autoImportActions}>
               <Button
-                type="button"
                 variant="primary"
-                size="sm"
                 disabled={approvePending}
                 onClick={(event) => {
                   event.stopPropagation();
@@ -457,9 +450,7 @@ function AutoImportResultCard({
                 Approve & Import
               </Button>
               <Button
-                type="button"
                 variant="secondary"
-                size="sm"
                 disabled={rejectPending}
                 onClick={(event) => {
                   event.stopPropagation();
@@ -475,7 +466,9 @@ function AutoImportResultCard({
       <div className={styles.autoImportCardFolderPath}>{result.folder_name}</div>
       {trackDetails.length > 0 ? (
         <div
-          className={`${styles.autoImportTrackList} ${expanded ? styles.expanded : ''}`}
+          className={clsx(styles.autoImportTrackList, {
+            [styles.expanded]: expanded,
+          })}
           id={`auto-import-tracks-${index}`}
         >
           <div className={styles.autoImportTrackListHeader}>
@@ -484,23 +477,21 @@ function AutoImportResultCard({
             <span>Conf</span>
           </div>
           {trackDetails.map((track, trackIndex) => {
-            const rowClassName = [
-              styles.autoImportTrackRow,
-              isLiveProcessing && liveTrackIndex > 0 && trackIndex + 1 === liveTrackIndex
-                ? styles.autoImportTrackRowActive
-                : '',
-              isLiveProcessing && liveTrackIndex > 0 && trackIndex + 1 < liveTrackIndex
-                ? styles.autoImportTrackRowDone
-                : '',
-            ]
-              .filter(Boolean)
-              .join(' ');
+            const rowClassName = clsx(styles.autoImportTrackRow, {
+              [styles.autoImportTrackRowActive]:
+                isLiveProcessing && liveTrackIndex > 0 && trackIndex + 1 === liveTrackIndex,
+              [styles.autoImportTrackRowDone]:
+                isLiveProcessing && liveTrackIndex > 0 && trackIndex + 1 < liveTrackIndex,
+            });
             return (
               <div key={`${track.name}-${track.file}-${trackIndex}`} className={rowClassName}>
                 <span className={styles.autoImportTrackName}>{track.name}</span>
                 <span className={styles.autoImportTrackFile}>{track.file}</span>
                 <span
-                  className={`${styles.autoImportTrackConf} ${getAutoImportConfidenceClass(getConfidenceClass(track.confidence))}`}
+                  className={clsx(
+                    styles.autoImportTrackConf,
+                    getAutoImportConfidenceClass(getConfidenceClass(track.confidence)),
+                  )}
                 >
                   {track.confidence}%
                 </span>
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
index cc12988c..32501f51 100644
--- a/webui/src/routes/import/-ui/import-page.tsx
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -1,7 +1,8 @@
 import { Link, Outlet } from '@tanstack/react-router';
+import clsx from 'clsx';
 
-import { Show } from '@/components/primitives';
 import { Button } from '@/components/form/form';
+import { Show } from '@/components/primitives';
 import { useReactPageShell } from '@/platform/shell/route-controllers';
 
 import type { ImportQueueEntry } from '../-import.types';
@@ -37,7 +38,7 @@ export function ImportPage() {
         />
         <ImportProcessingQueue />
         <ImportTabNav />
-        <section className={`${styles.importPageTabContent} ${styles.active}`}>
+        <section className={clsx(styles.importPageTabContent, styles.active)}>
           <Outlet />
         </section>
       </div>
@@ -78,7 +79,6 @@ function ImportHeader({
           <span>Import Music</span>
         </h1>
         <Button
-          type="button"
           variant="secondary"
           title="Re-scan import folder"
           aria-busy={refreshing}
@@ -112,15 +112,15 @@ function ImportProcessingQueue() {
 
   return (
     <section
-      className={`${styles.importPageQueue} ${queue.length === 0 ? styles.hidden : ''}`}
+      className={clsx(styles.importPageQueue, {
+        [styles.hidden]: queue.length === 0,
+      })}
       id="import-page-queue"
     >
       <div className={styles.importPageQueueHeader}>
         <span className={styles.importPageQueueTitle}>Processing</span>
         <Button
-          type="button"
           variant="ghost"
-          size="sm"
           id="import-page-queue-clear"
           style={{ display: hasFinished ? undefined : 'none' }}
           onClick={clearFinishedJobs}
@@ -139,12 +139,10 @@ function ImportProcessingQueue() {
 
 function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
   const statusText = getQueueStatusText(entry);
-  const statusClass =
-    entry.status === 'error' || (entry.status === 'done' && entry.errors.length > 0)
-      ? styles.error
-      : entry.status === 'done'
-        ? styles.done
-        : '';
+  const statusClass = clsx({
+    [styles.error]: entry.status === 'error' || (entry.status === 'done' && entry.errors.length > 0),
+    [styles.done]: entry.status === 'done',
+  });
 
   return (
     <div className={styles.importPageQueueItem}>
@@ -156,7 +154,7 @@ function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
           onError={fallbackImage}
         />
       ) : (
-        <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>♪</div>
+        <div className={clsx(styles.importPageQueueArt, styles.importPageQueueArtEmpty)}>♪</div>
       )}
       <div className={styles.importPageQueueInfo}>
         <div className={styles.importPageQueueName}>{entry.label}</div>
@@ -165,13 +163,13 @@ function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
       <div className={styles.importPageQueueProgress}>
         <div className={styles.importPageQueueBar}>
           <div
-            className={`${styles.importPageQueueFill} ${
-              entry.status === 'error' ? styles.error : ''
-            }`}
+            className={clsx(styles.importPageQueueFill, {
+              [styles.error]: entry.status === 'error',
+            })}
             style={{ width: `${getQueueProgressPercent(entry)}%` }}
           />
         </div>
-        <div className={`${styles.importPageQueueStatus} ${statusClass}`}>{statusText}</div>
+        <div className={clsx(styles.importPageQueueStatus, statusClass)}>{statusText}</div>
       </div>
     </div>
   );
@@ -183,7 +181,7 @@ function ImportTabNav() {
       <Link
         to="/import/auto"
         className={styles.importPageTab}
-        activeProps={{ className: `${styles.importPageTab} ${styles.active}` }}
+        activeProps={{ className: clsx(styles.importPageTab, styles.active) }}
         id="import-page-tab-auto"
       >
         Auto
@@ -191,7 +189,7 @@ function ImportTabNav() {
       <Link
         to="/import/album"
         className={styles.importPageTab}
-        activeProps={{ className: `${styles.importPageTab} ${styles.active}` }}
+        activeProps={{ className: clsx(styles.importPageTab, styles.active) }}
         id="import-page-tab-album"
       >
         Albums
@@ -199,7 +197,7 @@ function ImportTabNav() {
       <Link
         to="/import/singles"
         className={styles.importPageTab}
-        activeProps={{ className: `${styles.importPageTab} ${styles.active}` }}
+        activeProps={{ className: clsx(styles.importPageTab, styles.active) }}
         id="import-page-tab-singles"
       >
         Singles
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index e6d2014b..ae6701e4 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useEffect } from 'react';
 
 import { Badge, Button, Checkbox, TextInput } from '@/components/form/form';
@@ -175,17 +176,15 @@ export function SinglesImportPanel({
     <>
       <div className={styles.importPageSinglesHeader}>
         <div className={styles.importPageSinglesActions}>
-          <Button type="button" variant="secondary" size="sm" onClick={onSelectAll}>
+          <Button variant="secondary" onClick={onSelectAll}>
             <span id="import-page-select-all-text">
               {allSelected ? 'Deselect All' : 'Select All'}
             </span>
           </Button>
           <Button
-            type="button"
             variant={processVariant}
             id="import-page-singles-process-btn"
             disabled={selectedCount === 0}
-            size="sm"
             onClick={onProcessSingles}
           >
             <span>Process Selected</span>
@@ -205,7 +204,9 @@ export function SinglesImportPanel({
             return (
               <div
                 key={fileKey}
-                className={`${styles.importPageSingleItem} ${manualMatch ? styles.matched : ''}`}
+                className={clsx(styles.importPageSingleItem, {
+                  [styles.matched]: manualMatch,
+                })}
                 data-single-key={fileKey}
               >
                 <label className={styles.importPageSingleCheckboxWrap}>
@@ -226,7 +227,6 @@ export function SinglesImportPanel({
                     <div className={styles.importPageSingleMatchedInfo}>
                       ✓ {manualMatch.name} - {manualMatch.artist}
                       <button
-                        type="button"
                         className={styles.importPageSingleMatchedChange}
                         onClick={() => onOpenSearch(file)}
                       >
@@ -236,12 +236,7 @@ export function SinglesImportPanel({
                   ) : null}
                 </div>
                 <div className={styles.importPageSingleActions}>
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => onOpenSearch(file)}
-                  >
+                  <Button variant="secondary" size="sm" onClick={() => onOpenSearch(file)}>
                     🔍 Identify
                   </Button>
                 </div>
@@ -291,12 +286,7 @@ function SingleSearchPanel({
             if (event.key === 'Enter') onRunSearch(fileKey, query);
           }}
         />
-        <Button
-          type="button"
-          variant="primary"
-          size="sm"
-          onClick={() => onRunSearch(fileKey, query)}
-        >
+        <Button variant="primary" onClick={() => onRunSearch(fileKey, query)}>
           Search
         </Button>
       </div>
@@ -311,7 +301,6 @@ function SingleSearchPanel({
           searchState?.results.map((track, index) => (
             <button
               key={`${track.source || 'source'}-${track.id}-${index}`}
-              type="button"
               className={styles.importPageSingleResultItem}
               onClick={() => onSelectMatch(fileKey, track)}
             >

From e65ec37c9e4b10feb4b0204cfdeff1f7dfb76d7b Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 21:30:35 +0300
Subject: [PATCH 29/42] test(import): use MSW route handlers

- replace direct fetch stubs with shared MSW handlers
- keep fetch spying only for request assertions
- cover the shell prefetch with an issues counts handler
---
 webui/src/routes/import/-route.test.tsx | 249 +++++++++++-------------
 1 file changed, 117 insertions(+), 132 deletions(-)

diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 989aaacb..22341c6b 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -3,6 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { ShellBridge, ShellPageId } from '@/platform/shell/bridge';
+import { HttpResponse, http, server } from '@/test/msw';
 
 import { createAppQueryClient } from '@/app/query-client';
 import { AppRouterProvider, createAppRouter } from '@/app/router';
@@ -10,13 +11,6 @@ import { AppRouterProvider, createAppRouter } from '@/app/router';
 import type { ImportStagingFile } from './-import.types';
 import { resetImportWorkflowStore } from './-import.store';
 
-function createResponse(body: unknown, status = 200) {
-  return new Response(JSON.stringify(body), {
-    status,
-    headers: { 'Content-Type': 'application/json' },
-  });
-}
-
 function createShellBridge(overrides: Partial<ShellBridge> = {}): ShellBridge {
   return {
     getCurrentProfileContext: vi.fn(() => ({ profileId: 2, isAdmin: true })),
@@ -83,80 +77,35 @@ describe('import route', () => {
     window.SoulSyncWebShellBridge = createShellBridge();
     window.showToast = vi.fn();
     window.showConfirmDialog = vi.fn(async () => true);
+    vi.spyOn(globalThis, 'fetch');
 
-    vi.stubGlobal(
-      'fetch',
-      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
-        const url = input instanceof Request ? input.url : String(input);
-
-        if (url.includes('/api/import/staging/files')) {
-          return createResponse({
-            success: true,
-            staging_path: '/music/Staging',
-            files: stagingFilesPayload,
-          });
-        }
-
-        if (url.includes('/api/import/staging/groups')) {
-          return createResponse({
-            success: true,
-            groups: [
-              {
-                album: 'Album A',
-                artist: 'Artist A',
-                file_count: 2,
-                file_paths: ['/music/Staging/Album/01-track.flac'],
-              },
-            ],
-          });
-        }
-
-        if (url.includes('/api/import/staging/suggestions')) {
-          return createResponse({
-            success: true,
-            ready: true,
-            suggestions: [
-              {
-                id: 'album-1',
-                name: 'Album A',
-                artist: 'Artist A',
-                source: 'deezer',
-                total_tracks: 1,
-                release_date: '2026-01-01',
-              },
-            ],
-          });
-        }
-
-        if (url.includes('/api/import/search/albums')) {
-          return createResponse({
-            success: true,
-            albums: [
-              {
-                id: 'album-1',
-                name: 'Album A',
-                artist: 'Artist A',
-                source: 'deezer',
-                total_tracks: 1,
-                release_date: '2026-01-01',
-              },
-            ],
-          });
-        }
-
-        if (url.includes('/api/import/album/match')) {
-          const body =
-            input instanceof Request
-              ? ((await input.clone().json()) as Record<string, unknown>)
-              : (JSON.parse(typeof init?.body === 'string' ? init.body : '{}') as Record<
-                  string,
-                  unknown
-                >);
-          albumMatchBodies.push(body);
-          return createResponse({
-            success: true,
-            received: body,
-            album: {
+    server.use(
+      http.get('/api/import/staging/files', () => {
+        return HttpResponse.json({
+          success: true,
+          staging_path: '/music/Staging',
+          files: stagingFilesPayload,
+        });
+      }),
+      http.get('/api/import/staging/groups', () => {
+        return HttpResponse.json({
+          success: true,
+          groups: [
+            {
+              album: 'Album A',
+              artist: 'Artist A',
+              file_count: 2,
+              file_paths: ['/music/Staging/Album/01-track.flac'],
+            },
+          ],
+        });
+      }),
+      http.get('/api/import/staging/suggestions', () => {
+        return HttpResponse.json({
+          success: true,
+          ready: true,
+          suggestions: [
+            {
               id: 'album-1',
               name: 'Album A',
               artist: 'Artist A',
@@ -164,56 +113,94 @@ describe('import route', () => {
               total_tracks: 1,
               release_date: '2026-01-01',
             },
-            matches: [
-              {
-                track: { name: 'Track One', track_number: 1 },
-                staging_file: {
-                  filename: '01-track.flac',
-                  full_path: '/music/Staging/Album/01-track.flac',
-                },
-                confidence: 0.95,
+          ],
+        });
+      }),
+      http.get('/api/import/search/albums', () => {
+        return HttpResponse.json({
+          success: true,
+          albums: [
+            {
+              id: 'album-1',
+              name: 'Album A',
+              artist: 'Artist A',
+              source: 'deezer',
+              total_tracks: 1,
+              release_date: '2026-01-01',
+            },
+          ],
+        });
+      }),
+      http.post('/api/import/album/match', async ({ request }) => {
+        const body = (await request.json()) as Record<string, unknown>;
+        albumMatchBodies.push(body);
+        return HttpResponse.json({
+          success: true,
+          received: body,
+          album: {
+            id: 'album-1',
+            name: 'Album A',
+            artist: 'Artist A',
+            source: 'deezer',
+            total_tracks: 1,
+            release_date: '2026-01-01',
+          },
+          matches: [
+            {
+              track: { name: 'Track One', track_number: 1 },
+              staging_file: {
+                filename: '01-track.flac',
+                full_path: '/music/Staging/Album/01-track.flac',
               },
-            ],
-          });
-        }
-
-        if (url.includes('/api/auto-import/status')) {
-          return createResponse({
-            success: true,
-            running: true,
-            current_status: 'idle',
-            active_imports: [],
-          });
-        }
-
-        if (url.includes('/api/auto-import/settings')) {
-          return createResponse({
-            success: true,
-            scan_interval: 60,
-            confidence_threshold: 0.9,
-          });
-        }
-
-        if (url.includes('/api/auto-import/results')) {
-          return createResponse({
-            success: true,
-            results: [
-              {
-                id: 4,
-                status: 'pending_review',
-                folder_hash: 'hash-1',
-                folder_name: 'Album A',
-                album_name: 'Album A',
-                artist_name: 'Artist A',
-                confidence: 0.82,
-                total_files: 2,
-              },
-            ],
-          });
-        }
-
-        return createResponse({ success: true });
-      }) as unknown as typeof fetch,
+              confidence: 0.95,
+            },
+          ],
+        });
+      }),
+      http.get('/api/auto-import/status', () => {
+        return HttpResponse.json({
+          success: true,
+          running: true,
+          current_status: 'idle',
+          active_imports: [],
+        });
+      }),
+      http.get('/api/auto-import/settings', () => {
+        return HttpResponse.json({
+          success: true,
+          scan_interval: 60,
+          confidence_threshold: 0.9,
+        });
+      }),
+      http.get('/api/auto-import/results', () => {
+        return HttpResponse.json({
+          success: true,
+          results: [
+            {
+              id: 4,
+              status: 'pending_review',
+              folder_hash: 'hash-1',
+              folder_name: 'Album A',
+              album_name: 'Album A',
+              artist_name: 'Artist A',
+              confidence: 0.82,
+              total_files: 2,
+            },
+          ],
+        });
+      }),
+      http.get('/api/issues/counts', () => {
+        return HttpResponse.json({
+          success: true,
+          counts: {
+            open: 0,
+            in_progress: 0,
+            resolved: 0,
+            dismissed: 0,
+            total: 0,
+          },
+        });
+      }),
     );
   });
 
@@ -227,9 +214,7 @@ describe('import route', () => {
     await waitFor(() =>
       expect(getFetchUrls().some((url) => url.includes('/api/import/staging/groups'))).toBe(true),
     );
-    expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(
-      true,
-    );
+    expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(true);
     expect(window.SoulSyncWebShellBridge?.showReactHost).toHaveBeenCalledWith('import');
     expect(window.SoulSyncWebShellBridge?.setActivePageChrome).toHaveBeenCalledWith('import');
   });

From b4ca5efe39e69c8d58cf0399261e8c117d7c9da7 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Mon, 18 May 2026 22:01:01 +0300
Subject: [PATCH 30/42] refactor(form): use nested data selectors

- keep only semantic data attributes on the form primitives
- move variant styling into nested CSS module selectors
- preserve the existing visual treatment while simplifying the component layer
---
 webui/src/components/form/form.module.css | 456 +++++++++++-----------
 webui/src/components/form/form.tsx        |  52 +--
 2 files changed, 226 insertions(+), 282 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index bb2654f7..df80eab7 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -96,6 +96,8 @@
   font: inherit;
   font-size: 13px;
   line-height: 1.5;
+  min-height: 36px;
+  padding: 8px 32px 8px 12px;
   transition:
     border-color 0.18s ease,
     background 0.18s ease,
@@ -105,46 +107,36 @@
   -webkit-appearance: none;
   color-scheme: dark;
   cursor: pointer;
-}
+  &:hover {
+    border-color: rgba(255, 255, 255, 0.16);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
+      rgba(255, 255, 255, 0.06);
+  }
 
-.selectSizeSm {
-  min-height: 32px;
-  padding: 6px 30px 6px 10px;
-  background-position:
-    0 0,
-    0 0,
-    right 10px center;
-}
+  &:focus {
+    outline: none;
+    border-color: rgba(var(--accent-light-rgb), 0.55);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05)),
+      rgba(255, 255, 255, 0.07);
+    box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
+  }
 
-.selectSizeMd {
-  min-height: 36px;
-  padding: 8px 32px 8px 12px;
-  background-position:
-    0 0,
-    0 0,
-    right 12px center;
-}
+  &[data-size='sm'] {
+    min-height: 32px;
+    padding: 6px 30px 6px 10px;
+    background-position:
+      0 0,
+      0 0,
+      right 10px center;
+  }
 
-.select:hover {
-  border-color: rgba(255, 255, 255, 0.16);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
-    rgba(255, 255, 255, 0.06);
-}
-
-.select:focus {
-  outline: none;
-  border-color: rgba(var(--accent-light-rgb), 0.55);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05)),
-    rgba(255, 255, 255, 0.07);
-  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
-}
-
-.select option,
-.select optgroup {
-  background: #1a1a2e;
-  color: #fff;
+  & option,
+  & optgroup {
+    background: #1a1a2e;
+    color: #fff;
+  }
 }
 
 .checkbox {
@@ -167,16 +159,19 @@
     box-shadow 0.18s ease,
     transform 0.18s ease;
   color-scheme: dark;
-}
+  &[data-checked] {
+    border-color: rgb(var(--accent-light-rgb));
+    background: rgb(var(--accent-light-rgb));
+  }
 
-.checkbox[data-checked] {
-  border-color: rgb(var(--accent-light-rgb));
-  background: rgb(var(--accent-light-rgb));
-}
+  &[data-focused] {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.14);
+  }
 
-.checkbox[data-focused] {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.14);
+  &[data-checked] .checkboxIndicator {
+    opacity: 1;
+  }
 }
 
 .checkboxIndicator {
@@ -189,10 +184,6 @@
   transition: opacity 0.18s ease;
 }
 
-.checkbox[data-checked] .checkboxIndicator {
-  opacity: 1;
-}
-
 .checkboxIcon {
   color: #000;
   font-size: 12px;
@@ -223,23 +214,26 @@
     box-shadow 0.18s ease,
     transform 0.18s ease;
   color-scheme: dark;
-}
+  &[data-checked] {
+    border-color: rgba(var(--accent-light-rgb), 0.55);
+    background:
+      linear-gradient(180deg, rgba(var(--accent-light-rgb), 0.55), rgba(var(--accent-rgb), 0.8)),
+      rgba(var(--accent-rgb), 0.45);
+  }
 
-.switch[data-checked] {
-  border-color: rgba(var(--accent-light-rgb), 0.55);
-  background:
-    linear-gradient(180deg, rgba(var(--accent-light-rgb), 0.55), rgba(var(--accent-rgb), 0.8)),
-    rgba(var(--accent-rgb), 0.45);
-}
+  &[data-focused] {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.14);
+  }
 
-.switch[data-focused] {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.14);
-}
+  &[data-disabled] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
 
-.switch[data-disabled] {
-  opacity: 0.55;
-  cursor: not-allowed;
+  &[data-checked] .switchThumb {
+    transform: translateX(20px);
+  }
 }
 
 .switchThumb {
@@ -253,10 +247,6 @@
   transition: transform 0.18s ease;
 }
 
-.switch[data-checked] .switchThumb {
-  transform: translateX(20px);
-}
-
 .rangeRoot {
   display: inline-flex;
   flex: 0 0 160px;
@@ -342,25 +332,24 @@
     border-color 0.18s ease,
     box-shadow 0.18s ease,
     background 0.18s ease;
-}
+  &:hover {
+    transform: translateY(-1px);
+    border-color: rgba(255, 255, 255, 0.14);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04)),
+      rgba(255, 255, 255, 0.04);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+  }
 
-.optionCard:hover {
-  transform: translateY(-1px);
-  border-color: rgba(255, 255, 255, 0.14);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04)),
-    rgba(255, 255, 255, 0.04);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
-}
-
-.optionCardSelected {
-  border-color: rgba(var(--accent-light-rgb), 0.45);
-  background:
-    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(255, 255, 255, 0.04)),
-    rgba(255, 255, 255, 0.05);
-  box-shadow:
-    0 0 0 1px rgba(var(--accent-light-rgb), 0.1),
-    0 14px 32px rgba(0, 0, 0, 0.26);
+  &[data-selected='true'] {
+    border-color: rgba(var(--accent-light-rgb), 0.45);
+    background:
+      linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(255, 255, 255, 0.04)),
+      rgba(255, 255, 255, 0.05);
+    box-shadow:
+      0 0 0 1px rgba(var(--accent-light-rgb), 0.1),
+      0 14px 32px rgba(0, 0, 0, 0.26);
+  }
 }
 
 .optionCardIcon {
@@ -394,17 +383,16 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-}
+  &[data-size='sm'] {
+    gap: 6px;
+  }
 
-.optionButtonGroupSizeSm {
-  gap: 6px;
-}
-
-.optionButtonGroupSizeSm .optionButton {
-  min-width: 0;
-  padding: 6px 12px;
-  font-size: 12px;
-  gap: 6px;
+  &[data-size='sm'] .optionButton {
+    min-width: 0;
+    padding: 6px 12px;
+    font-size: 12px;
+    gap: 6px;
+  }
 }
 
 .optionButton {
@@ -426,26 +414,25 @@
     border-color 0.18s ease,
     box-shadow 0.18s ease,
     background 0.18s ease;
-}
+  &:hover {
+    transform: translateY(-1px);
+    border-color: rgba(255, 255, 255, 0.18);
+    background: rgba(255, 255, 255, 0.08);
+  }
 
-.optionButton:hover {
-  transform: translateY(-1px);
-  border-color: rgba(255, 255, 255, 0.18);
-  background: rgba(255, 255, 255, 0.08);
-}
+  &[data-selected='true'] {
+    border-color: rgba(var(--accent-light-rgb), 0.5);
+    background: rgba(var(--accent-rgb), 0.18);
+    box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb), 0.08);
+  }
 
-.optionButtonSelected {
-  border-color: rgba(var(--accent-light-rgb), 0.5);
-  background: rgba(var(--accent-rgb), 0.18);
-  box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb), 0.08);
-}
-
-.optionButtonSelected:hover {
-  border-color: rgba(var(--accent-light-rgb), 0.62);
-  background: rgba(var(--accent-rgb), 0.26);
-  box-shadow:
-    0 0 0 1px rgba(var(--accent-light-rgb), 0.12),
-    0 10px 24px rgba(0, 0, 0, 0.14);
+  &[data-selected='true']:hover {
+    border-color: rgba(var(--accent-light-rgb), 0.62);
+    background: rgba(var(--accent-rgb), 0.26);
+    box-shadow:
+      0 0 0 1px rgba(var(--accent-light-rgb), 0.12),
+      0 10px 24px rgba(0, 0, 0, 0.14);
+  }
 }
 
 .badge {
@@ -461,36 +448,33 @@
   line-height: 1.2;
   white-space: nowrap;
   vertical-align: middle;
-}
-
-.badgeNeutral {
   color: rgba(255, 255, 255, 0.45);
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 255, 255, 0.08);
-}
 
-.badgeInfo {
-  color: rgb(var(--accent-light-rgb));
-  background: rgba(var(--accent-rgb), 0.12);
-  border-color: rgba(var(--accent-light-rgb), 0.12);
-}
+  &[data-tone='info'] {
+    color: rgb(var(--accent-light-rgb));
+    background: rgba(var(--accent-rgb), 0.12);
+    border-color: rgba(var(--accent-light-rgb), 0.12);
+  }
 
-.badgeSuccess {
-  color: #4ade80;
-  background: rgba(74, 222, 128, 0.12);
-  border-color: rgba(74, 222, 128, 0.12);
-}
+  &[data-tone='success'] {
+    color: #4ade80;
+    background: rgba(74, 222, 128, 0.12);
+    border-color: rgba(74, 222, 128, 0.12);
+  }
 
-.badgeWarning {
-  color: #fbbf24;
-  background: rgba(251, 191, 36, 0.12);
-  border-color: rgba(251, 191, 36, 0.12);
-}
+  &[data-tone='warning'] {
+    color: #fbbf24;
+    background: rgba(251, 191, 36, 0.12);
+    border-color: rgba(251, 191, 36, 0.12);
+  }
 
-.badgeDanger {
-  color: #f87171;
-  background: rgba(248, 113, 113, 0.12);
-  border-color: rgba(248, 113, 113, 0.12);
+  &[data-tone='danger'] {
+    color: #f87171;
+    background: rgba(248, 113, 113, 0.12);
+    border-color: rgba(248, 113, 113, 0.12);
+  }
 }
 
 .button {
@@ -504,134 +488,130 @@
   color: #fff;
   cursor: pointer;
   font: inherit;
+  font-size: 13px;
   font-weight: 600;
   line-height: 1.2;
+  min-height: 36px;
+  padding: 8px 12px;
   transition:
     transform 0.18s ease,
     border-color 0.18s ease,
     box-shadow 0.18s ease,
     background 0.18s ease,
     color 0.18s ease;
-}
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    border-color: rgba(255, 255, 255, 0.18);
+    background: rgba(255, 255, 255, 0.08);
+  }
 
-.buttonSizeSm {
-  min-height: 32px;
-  padding: 6px 10px;
-  font-size: 13px;
-}
+  &:focus-visible {
+    outline: none;
+    border-color: rgba(var(--accent-light-rgb), 0.55);
+    box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
+  }
 
-.buttonSizeMd {
-  min-height: 36px;
-  padding: 8px 12px;
-  font-size: 13px;
-}
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    transform: none;
+  }
 
-.buttonSizeLg {
-  min-height: 40px;
-  padding: 10px 20px;
-  font-size: 14px;
-}
+  &[data-size='sm'] {
+    min-height: 32px;
+    padding: 6px 10px;
+    font-size: 13px;
+  }
 
-.buttonIcon {
-  width: var(--button-icon-size, 36px);
-  height: var(--button-icon-size, 36px);
-  min-height: var(--button-icon-size, 36px);
-  min-width: var(--button-icon-size, 36px);
-  padding: 0;
-  font-size: var(--button-icon-font-size, 15px);
-  line-height: 1;
-}
+  &[data-size='lg'] {
+    min-height: 40px;
+    padding: 10px 20px;
+    font-size: 14px;
+  }
 
-.button:hover:not(:disabled) {
-  transform: translateY(-1px);
-  border-color: rgba(255, 255, 255, 0.18);
-  background: rgba(255, 255, 255, 0.08);
-}
+  &[data-size='icon'] {
+    width: var(--button-icon-size, 36px);
+    height: var(--button-icon-size, 36px);
+    min-height: var(--button-icon-size, 36px);
+    min-width: var(--button-icon-size, 36px);
+    padding: 0;
+    font-size: var(--button-icon-font-size, 15px);
+    line-height: 1;
+  }
 
-.button:focus-visible {
-  outline: none;
-  border-color: rgba(var(--accent-light-rgb), 0.55);
-  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
-}
+  &[data-variant='primary'] {
+    border-color: rgba(var(--accent-light-rgb), 0.45);
+    background: rgb(var(--accent-light-rgb));
+    color: #000;
+  }
 
-.button:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  transform: none;
-}
+  &[data-variant='primary']:hover:not(:disabled) {
+    border-color: rgba(var(--accent-light-rgb), 0.55);
+    background: rgba(var(--accent-light-rgb), 0.95);
+    color: #000;
+  }
 
-.buttonPrimary {
-  border-color: rgba(var(--accent-light-rgb), 0.45);
-  background: rgb(var(--accent-light-rgb));
-  color: #000;
-}
+  &[data-variant='primary']:focus-visible {
+    border-color: rgba(var(--accent-light-rgb), 0.8);
+    box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.16);
+  }
 
-.buttonPrimary:hover:not(:disabled) {
-  border-color: rgba(var(--accent-light-rgb), 0.55);
-  background: rgba(var(--accent-light-rgb), 0.95);
-  color: #000;
-}
+  &[data-variant='primary']:disabled {
+    opacity: 0.62;
+    background: rgba(var(--accent-light-rgb), 0.45);
+    color: rgba(0, 0, 0, 0.55);
+  }
 
-.buttonPrimary:focus-visible {
-  border-color: rgba(var(--accent-light-rgb), 0.8);
-  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.16);
-}
+  &[data-variant='primary'] .badge {
+    color: #fff;
+    background: rgba(0, 0, 0, 0.18);
+    border-color: rgba(0, 0, 0, 0.22);
+  }
 
-.buttonPrimary:disabled {
-  opacity: 0.62;
-  background: rgba(var(--accent-light-rgb), 0.45);
-  color: rgba(0, 0, 0, 0.55);
-}
+  &[data-variant='secondary'] {
+    border-color: rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.08);
+    color: #ccc;
+  }
 
-.buttonPrimary .badge {
-  color: #fff;
-  background: rgba(0, 0, 0, 0.18);
-  border-color: rgba(0, 0, 0, 0.22);
-}
+  &[data-variant='secondary']:hover:not(:disabled) {
+    border-color: rgba(255, 255, 255, 0.18);
+    background: rgba(255, 255, 255, 0.14);
+    color: #fff;
+  }
 
-.buttonSecondary {
-  border-color: rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.08);
-  color: #ccc;
-}
+  &[data-variant='secondary']:focus-visible {
+    border-color: rgba(var(--accent-light-rgb), 0.45);
+    box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
+  }
 
-.buttonSecondary:hover:not(:disabled) {
-  border-color: rgba(255, 255, 255, 0.18);
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
-}
+  &[data-variant='secondary']:disabled {
+    opacity: 0.55;
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.45);
+  }
 
-.buttonSecondary:focus-visible {
-  border-color: rgba(var(--accent-light-rgb), 0.45);
-  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
-}
+  &[data-variant='ghost'] {
+    border-color: transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.55);
+  }
 
-.buttonSecondary:disabled {
-  opacity: 0.55;
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.45);
-}
+  &[data-variant='ghost']:hover:not(:disabled) {
+    transform: none;
+    border-color: rgba(255, 255, 255, 0.14);
+    background: rgba(255, 255, 255, 0.07);
+    color: #fff;
+  }
 
-.buttonGhost {
-  border-color: transparent;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.55);
-}
+  &[data-variant='ghost']:focus-visible {
+    border-color: rgba(var(--accent-light-rgb), 0.42);
+    box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
+  }
 
-.buttonGhost:hover:not(:disabled) {
-  transform: none;
-  border-color: rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.07);
-  color: #fff;
-}
-
-.buttonGhost:focus-visible {
-  border-color: rgba(var(--accent-light-rgb), 0.42);
-  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
-}
-
-.buttonGhost:disabled {
-  opacity: 0.5;
+  &[data-variant='ghost']:disabled {
+    opacity: 0.5;
+  }
 }
 
 .formError {
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 4ee1baf3..065a123e 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -91,14 +91,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
   return (
     <select
       ref={ref}
-      className={clsx(
-        styles.select,
-        {
-          [styles.selectSizeSm]: size === 'sm',
-          [styles.selectSizeMd]: size === 'md',
-        },
-        className,
-      )}
+      className={clsx(styles.select, className)}
       data-size={size}
       {...props}
     />
@@ -230,7 +223,8 @@ export const OptionCard = forwardRef<HTMLButtonElement, OptionCardProps>(functio
     <BaseToggle
       ref={ref}
       pressed={selected}
-      className={clsx(styles.optionCard, selected && styles.optionCardSelected, className)}
+      className={clsx(styles.optionCard, className)}
+      data-selected={selected ? 'true' : undefined}
       type={type}
       {...props}
     >
@@ -261,16 +255,7 @@ export function OptionButtonGroup({
   size = 'md',
 }: OptionButtonGroupProps) {
   return (
-    <div
-      className={clsx(
-        styles.optionButtonGroup,
-        {
-          [styles.optionButtonGroupSizeSm]: size === 'sm',
-        },
-        className,
-      )}
-      data-size={size}
-    >
+    <div className={clsx(styles.optionButtonGroup, className)} data-size={size}>
       {children}
     </div>
   );
@@ -290,7 +275,8 @@ export const OptionButton = forwardRef<HTMLButtonElement, OptionButtonProps>(fun
     <BaseToggle
       ref={ref}
       pressed={selected}
-      className={clsx(styles.optionButton, selected && styles.optionButtonSelected, className)}
+      className={clsx(styles.optionButton, className)}
+      data-selected={selected ? 'true' : undefined}
       type={type}
       {...props}
     >
@@ -315,17 +301,7 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   return (
     <span
       ref={ref}
-      className={clsx(
-        styles.badge,
-        {
-          [styles.badgeNeutral]: tone === 'neutral',
-          [styles.badgeInfo]: tone === 'info',
-          [styles.badgeSuccess]: tone === 'success',
-          [styles.badgeWarning]: tone === 'warning',
-          [styles.badgeDanger]: tone === 'danger',
-        },
-        className,
-      )}
+      className={clsx(styles.badge, className)}
       data-tone={tone}
       {...props}
     />
@@ -347,19 +323,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   return (
     <BaseButton
       ref={ref}
-      className={clsx(
-        styles.button,
-        {
-          [styles.buttonSizeSm]: size === 'sm',
-          [styles.buttonSizeMd]: size === 'md',
-          [styles.buttonSizeLg]: size === 'lg',
-          [styles.buttonIcon]: size === 'icon',
-          [styles.buttonPrimary]: variant === 'primary',
-          [styles.buttonSecondary]: variant === 'secondary',
-          [styles.buttonGhost]: variant === 'ghost',
-        },
-        className,
-      )}
+      className={clsx(styles.button, className)}
       data-variant={variant}
       data-size={size}
       type={type}

From 5a227e3acec063a6062206026ff17445842ae979 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Wed, 20 May 2026 21:26:34 +0300
Subject: [PATCH 31/42] test(import): use shared shell helper

---
 webui/src/routes/import/-route.test.tsx | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 22341c6b..5825e38c 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -2,8 +2,8 @@ import { createMemoryHistory } from '@tanstack/react-router';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import type { ShellBridge, ShellPageId } from '@/platform/shell/bridge';
 import { HttpResponse, http, server } from '@/test/msw';
+import { createShellBridge } from '@/test/shell-bridge';
 
 import { createAppQueryClient } from '@/app/query-client';
 import { AppRouterProvider, createAppRouter } from '@/app/router';
@@ -11,24 +11,6 @@ import { AppRouterProvider, createAppRouter } from '@/app/router';
 import type { ImportStagingFile } from './-import.types';
 import { resetImportWorkflowStore } from './-import.store';
 
-function createShellBridge(overrides: Partial<ShellBridge> = {}): ShellBridge {
-  return {
-    getCurrentProfileContext: vi.fn(() => ({ profileId: 2, isAdmin: true })),
-    isPageAllowed: vi.fn(() => true),
-    getProfileHomePage: vi.fn<() => ShellPageId>(() => 'discover'),
-    resolveLegacyPath: vi.fn<(pathname: string) => ShellPageId | null>(() => 'search'),
-    setActivePageChrome: vi.fn(),
-    activateLegacyPath: vi.fn(),
-    showReactHost: vi.fn(),
-    navigateToArtistDetail: vi.fn(),
-    playLibraryTrack: vi.fn(),
-    startStream: vi.fn(),
-    showLoadingOverlay: vi.fn(),
-    hideLoadingOverlay: vi.fn(),
-    ...overrides,
-  };
-}
-
 function renderImportRoute(initialEntries = ['/import']) {
   const queryClient = createAppQueryClient();
   const history = createMemoryHistory({ initialEntries });

From 7bd6e0ba09e94f3dad6f598a0636550693843e8d Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 23 May 2026 22:06:37 +0300
Subject: [PATCH 32/42] feat(form): add ghost option variant

- Keep option buttons transparent by default and subtle on hover
- Use the ghost style for inactive auto-import filters so the active one stands out
- Keep OptionButton aligned with the existing button variant API
---
 webui/src/components/form/form.module.css     | 17 ++++++++--
 webui/src/components/form/form.test.tsx       | 11 ++++---
 webui/src/components/form/form.tsx            | 33 +++++++------------
 .../src/routes/import/-ui/auto-import-tab.tsx |  1 +
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index df80eab7..ae8998b0 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -420,7 +420,21 @@
     background: rgba(255, 255, 255, 0.08);
   }
 
+  &[data-variant='ghost'] {
+    border-color: transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.58);
+  }
+
+  &[data-variant='ghost']:hover:not(:disabled) {
+    transform: none;
+    border-color: rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.06);
+    color: rgba(255, 255, 255, 0.85);
+  }
+
   &[data-selected='true'] {
+    color: #fff;
     border-color: rgba(var(--accent-light-rgb), 0.5);
     background: rgba(var(--accent-rgb), 0.18);
     box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb), 0.08);
@@ -598,7 +612,6 @@
   }
 
   &[data-variant='ghost']:hover:not(:disabled) {
-    transform: none;
     border-color: rgba(255, 255, 255, 0.14);
     background: rgba(255, 255, 255, 0.07);
     color: #fff;
@@ -610,7 +623,7 @@
   }
 
   &[data-variant='ghost']:disabled {
-    opacity: 0.5;
+    opacity: 0.55;
   }
 }
 
diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx
index 41e2d363..21e6abb3 100644
--- a/webui/src/components/form/form.test.tsx
+++ b/webui/src/components/form/form.test.tsx
@@ -172,21 +172,22 @@ describe('form primitives', () => {
 
     expect(screen.getByText('12')).toHaveAttribute('data-tone', 'warning');
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute(
-      'data-variant',
-      'primary',
-    );
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('data-variant', 'primary');
   });
 
   it('supports compact option button groups', () => {
     const { container } = render(
       <OptionButtonGroup size="sm">
         <OptionButton selected>All</OptionButton>
-        <OptionButton>Pending</OptionButton>
+        <OptionButton variant="ghost">Pending</OptionButton>
       </OptionButtonGroup>,
     );
 
     expect(container.querySelector('[data-size="sm"]')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Pending' })).toHaveAttribute(
+      'data-variant',
+      'ghost',
+    );
   });
 
   it('supports compact select sizing', () => {
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 065a123e..06cf217d 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -89,12 +89,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
   ref,
 ) {
   return (
-    <select
-      ref={ref}
-      className={clsx(styles.select, className)}
-      data-size={size}
-      {...props}
-    />
+    <select ref={ref} className={clsx(styles.select, className)} data-size={size} {...props} />
   );
 });
 
@@ -186,7 +181,10 @@ export const RangeInput = forwardRef<HTMLDivElement, RangeInputProps>(function R
       <Slider.Control className={styles.rangeControl}>
         <Slider.Track className={styles.rangeTrack}>
           <Slider.Indicator className={styles.rangeIndicator} />
-          <Slider.Thumb aria-label={typeof label === 'string' ? label : undefined} className={styles.rangeThumb} />
+          <Slider.Thumb
+            aria-label={typeof label === 'string' ? label : undefined}
+            className={styles.rangeThumb}
+          />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
@@ -249,11 +247,7 @@ export interface OptionButtonGroupProps {
   size?: OptionButtonGroupSize;
 }
 
-export function OptionButtonGroup({
-  className,
-  children,
-  size = 'md',
-}: OptionButtonGroupProps) {
+export function OptionButtonGroup({ className, children, size = 'md' }: OptionButtonGroupProps) {
   return (
     <div className={clsx(styles.optionButtonGroup, className)} data-size={size}>
       {children}
@@ -261,14 +255,17 @@ export function OptionButtonGroup({
   );
 }
 
+export type OptionButtonVariant = 'default' | 'ghost';
+
 export interface OptionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
   className?: string;
   selected?: boolean;
+  variant?: OptionButtonVariant;
   value?: string;
 }
 
 export const OptionButton = forwardRef<HTMLButtonElement, OptionButtonProps>(function OptionButton(
-  { className, children, selected = false, type = 'button', ...props },
+  { className, children, selected = false, type = 'button', variant = 'default', ...props },
   ref,
 ) {
   return (
@@ -277,6 +274,7 @@ export const OptionButton = forwardRef<HTMLButtonElement, OptionButtonProps>(fun
       pressed={selected}
       className={clsx(styles.optionButton, className)}
       data-selected={selected ? 'true' : undefined}
+      data-variant={variant}
       type={type}
       {...props}
     >
@@ -298,14 +296,7 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   { className, tone = 'neutral', ...props },
   ref,
 ) {
-  return (
-    <span
-      ref={ref}
-      className={clsx(styles.badge, className)}
-      data-tone={tone}
-      {...props}
-    />
-  );
+  return <span ref={ref} className={clsx(styles.badge, className)} data-tone={tone} {...props} />;
 });
 
 type BaseButtonProps = ComponentPropsWithoutRef<typeof BaseButton>;
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 0b874f21..c1576442 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -258,6 +258,7 @@ export function AutoImportPanel({
             <OptionButton
               key={filter}
               selected={autoFilter === filter}
+              variant={autoFilter === filter ? 'default' : 'ghost'}
               onClick={() => onFilterChange(filter)}
             >
               <span>{getAutoImportFilterLabel(filter)}</span>

From 01a0333d7a504541ff7b59ba9156e12f98410362 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 23 May 2026 23:57:55 +0300
Subject: [PATCH 33/42] style(import): add separate styles for mobile

---
 .../routes/import/-ui/import-page.module.css  | 553 +++++++++++++++++-
 .../routes/import/-ui/singles-import-tab.tsx  |   2 +
 webui/static/mobile.css                       |   2 +-
 3 files changed, 544 insertions(+), 13 deletions(-)

diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 52fc0608..39023257 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -639,11 +639,11 @@
   color: rgba(255, 255, 255, 0.4);
 }
 
-.importPageSingleResultSelect {
-  padding: 4px 12px;
-  background: rgba(var(--accent-light-rgb), 0.15);
-  border: 1px solid rgba(var(--accent-light-rgb), 0.3);
-  border-radius: 6px;
+  .importPageSingleResultSelect {
+    padding: 4px 12px;
+    background: rgba(var(--accent-light-rgb), 0.15);
+    border: 1px solid rgba(var(--accent-light-rgb), 0.3);
+    border-radius: 6px;
   color: rgb(var(--accent-light-rgb));
   font-size: 11px;
   font-weight: 600;
@@ -651,14 +651,14 @@
   flex-shrink: 0;
 }
 
-.importPageSingleResultSelect:hover {
-  background: rgba(var(--accent-light-rgb), 0.25);
-}
+  .importPageSingleResultSelect:hover {
+    background: rgba(var(--accent-light-rgb), 0.25);
+  }
 
-/* Empty state */
-.importPageEmptyState {
-  text-align: center;
-  padding: 60px 20px;
+  /* Empty state */
+  .importPageEmptyState {
+    text-align: center;
+    padding: 60px 20px;
   color: rgba(255, 255, 255, 0.3);
   font-size: 14px;
 }
@@ -1275,3 +1275,532 @@
     justify-content: space-between;
   }
 }
+
+/* Mobile import layout:
+   keep the page feeling like the legacy shell on phones by stacking
+   high-friction controls and letting cards breathe vertically. */
+@media (max-width: 768px) {
+  .importPageContainer {
+    padding: 16px 16px 20px;
+  }
+
+  .importPageHeader {
+    margin-bottom: 16px;
+  }
+
+  .importPageTitleRow {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .importPageTitle {
+    gap: 10px;
+    font-size: 22px;
+  }
+
+  .importPageTitle > img {
+    width: 24px;
+    height: 24px;
+  }
+
+  .importPageTitleRow > button,
+  .importPageSearchBar > button,
+  .importPageMatchActions > button,
+  .importPageMatchFooter > button,
+  .importPageQueueHeader > button,
+  .importPageSinglesActions > button,
+  .autoImportToggleRow > button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .importPageStagingBar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 10px 12px;
+  }
+
+  .importStagingPath {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    word-break: break-word;
+  }
+
+  .importStagingStats,
+  .importStagingRefreshAt {
+    white-space: normal;
+  }
+
+  .importPageTabBar {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .importPageTabBar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .importPageTab {
+    padding: 8px 14px;
+    white-space: nowrap;
+  }
+
+  .importPageSearchBar {
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  #import-page-album-search-input {
+    width: auto;
+    min-width: 0;
+    flex: 1 1 0;
+  }
+
+  #import-page-album-clear-btn {
+    flex: 0 0 auto;
+    min-height: 36px;
+  }
+
+  #import-page-album-clear-btn + button {
+    flex: 1 0 100%;
+    width: 100%;
+  }
+
+  .importPageAlbumGrid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 10px;
+    margin-bottom: 18px;
+  }
+
+  .importPageAutoGroups .importPageAlbumGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .importPageAlbumCard {
+    padding: 10px;
+  }
+
+  .importPageAlbumCard img {
+    margin-bottom: 6px;
+  }
+
+  .importPageAlbumCardTitle {
+    font-size: 12px;
+  }
+
+  .importPageAlbumCardArtist {
+    font-size: 10px;
+  }
+
+  .importPageAutoGroupCard {
+    gap: 10px;
+  }
+
+  .importPageAlbumHero {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 14px;
+    padding: 16px;
+  }
+
+  .importPageAlbumHero img {
+    width: 96px;
+    height: 96px;
+  }
+
+  .importPageAlbumHeroTitle {
+    font-size: 20px;
+  }
+
+  .importPageAlbumHeroArtist {
+    font-size: 14px;
+  }
+
+  .importPageAlbumHeroInfo {
+    width: 100%;
+  }
+
+  .importPageMatchHeader {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .importPageMatchHeader h3 {
+    font-size: 15px;
+  }
+
+  .importPageMatchActions {
+    flex-direction: column;
+  }
+
+  .importPageMatchRow {
+    grid-template-columns: 28px minmax(0, 1fr) auto;
+    grid-template-areas:
+      'num track track'
+      'num file unmatch';
+    gap: 6px 8px;
+    align-items: center;
+    padding: 10px 12px;
+  }
+
+  .importPageMatchNum {
+    grid-area: num;
+  }
+
+  .importPageMatchTrack {
+    grid-area: track;
+    white-space: normal;
+  }
+
+  .importPageMatchFile {
+    grid-area: file;
+    min-width: 0;
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+
+  .importPageMatchRow > :last-child {
+    grid-area: unmatch;
+    justify-self: end;
+  }
+
+  .importPageUnmatchedPool {
+    padding: 12px;
+  }
+
+  .importPagePoolChips {
+    gap: 6px;
+  }
+
+  .importPageMatchFooter {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .importPageMatchStats {
+    text-align: center;
+  }
+
+  .importPageSinglesHeader {
+    align-items: stretch;
+  }
+
+  .importPageSinglesActions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .importPageSingleItem {
+    grid-template-columns: 28px minmax(0, 1fr) auto;
+    grid-template-areas:
+      'checkbox info actions'
+      'search search search';
+    align-items: start;
+    gap: 8px;
+    padding: 10px 12px;
+  }
+
+  .importPageSingleCheckboxWrap {
+    margin-top: 0;
+  }
+
+  .importPageSingleActions {
+    grid-area: actions;
+    justify-self: end;
+    align-self: start;
+  }
+
+  .importPageSingleSearchPanel {
+    grid-area: search;
+    padding-left: 0;
+  }
+
+  .importPageSingleSearchBar {
+    flex-direction: column;
+  }
+
+  .importPageSingleSearchResults {
+    max-height: 260px;
+  }
+
+  .importPageSingleResultItem {
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .importPageQueueHeader {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .importPageQueueItem {
+    grid-template-columns: 40px minmax(0, 1fr);
+    grid-template-areas:
+      'art info'
+      'art progress';
+    gap: 8px 10px;
+    align-items: start;
+    padding: 10px 12px;
+  }
+
+  .importPageQueueArt {
+    grid-area: art;
+  }
+
+  .importPageQueueInfo {
+    grid-area: info;
+  }
+
+  .importPageQueueProgress {
+    grid-area: progress;
+    width: 100%;
+  }
+
+  .importPageQueueStatus {
+    text-align: left;
+  }
+
+  .autoImportControls {
+    padding: 8px 0 12px;
+  }
+
+  .autoImportToggleRow {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .autoImportSettingsRow {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .autoImportSetting {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .autoImportConfidenceValue {
+    flex: 0 0 auto;
+  }
+
+  .autoImportFilters {
+    gap: 6px;
+    margin-bottom: 10px;
+  }
+
+  .autoImportFilters .importPageFlexSpacer {
+    display: none;
+  }
+
+  .autoImportFilters > button {
+    flex: 1 1 calc(50% - 6px);
+    min-width: 0;
+  }
+
+  .autoImportCard {
+    padding: 12px;
+  }
+
+  .autoImportCardTop {
+    display: grid;
+    grid-template-columns: 56px minmax(0, 1fr);
+    grid-template-areas:
+      'art body'
+      'right right';
+    align-items: start;
+    gap: 10px 12px;
+  }
+
+  .autoImportCardLeft {
+    grid-area: art;
+  }
+
+  .autoImportCardCenter {
+    grid-area: body;
+    width: auto;
+  }
+
+  .autoImportCardAlbum,
+  .autoImportCardArtist,
+  .autoImportCardError,
+  .autoImportCardFolderPath {
+    white-space: normal;
+  }
+
+  .autoImportCardRight {
+    grid-area: right;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
+  .autoImportStatusBadge {
+    align-self: flex-start;
+  }
+
+  .autoImportConfidenceBar {
+    width: 100%;
+  }
+
+  .autoImportConfidenceText {
+    align-self: flex-start;
+  }
+
+  .autoImportActions {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .autoImportActions > button {
+    width: 100%;
+  }
+
+  .autoImportCardMeta {
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+
+  .autoImportCardFolderPath {
+    line-height: 1.35;
+  }
+
+  .autoImportTrackListHeader {
+    display: none;
+  }
+
+  .autoImportTrackList.expanded {
+    padding-top: 6px;
+  }
+
+  .autoImportTrackRow {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'name conf'
+      'file conf';
+    gap: 2px 8px;
+    padding: 6px 0;
+  }
+
+  .autoImportTrackName {
+    grid-area: name;
+    white-space: normal;
+  }
+
+  .autoImportTrackFile {
+    grid-area: file;
+    white-space: normal;
+  }
+
+  .autoImportTrackConf {
+    grid-area: conf;
+    align-self: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .importPageContainer {
+    padding: 12px 12px 16px;
+  }
+
+  .importPageTitle {
+    font-size: 20px;
+  }
+
+  .importPageTitleRow > button,
+  .importPageMatchActions > button,
+  .importPageMatchFooter > button,
+  .importPageQueueHeader > button,
+  .importPageSinglesActions > button,
+  .autoImportToggleRow > button,
+  .autoImportFilters > button {
+    width: 100%;
+  }
+
+  #import-page-album-clear-btn + button {
+    width: 100%;
+  }
+
+  .autoImportFilters > button {
+    flex: 1 1 100%;
+  }
+
+  .importPageAlbumGrid {
+    gap: 8px;
+  }
+
+  .importPageAlbumHero {
+    padding: 14px;
+  }
+
+  .importPageAlbumHero img {
+    width: 88px;
+    height: 88px;
+  }
+
+  .importPageMatchRow,
+  .importPageSingleItem,
+  .importPageQueueItem {
+    padding: 10px;
+  }
+
+  .importPageSingleSearchResults {
+    max-height: 220px;
+  }
+
+  .importPageSingleResultItem {
+    gap: 10px;
+    padding: 10px;
+  }
+
+  .importPageSingleResultImg {
+    width: 40px;
+    height: 40px;
+  }
+
+  .importPageSingleResultName {
+    font-size: 13px;
+    white-space: normal;
+  }
+
+  .importPageSingleResultDetail {
+    font-size: 11px;
+    white-space: normal;
+  }
+
+  .importPageSingleResultSelect {
+    padding: 4px 10px;
+    font-size: 11px;
+  }
+
+  .autoImportCard {
+    padding: 10px;
+  }
+
+  .autoImportCardTop {
+    grid-template-columns: 48px minmax(0, 1fr);
+    gap: 8px 10px;
+  }
+
+  .autoImportCardArt,
+  .autoImportCardArtFallback {
+    width: 48px;
+    height: 48px;
+  }
+
+  .autoImportConfidenceBar {
+    width: 100%;
+  }
+}
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index ae6701e4..30256221 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -228,6 +228,7 @@ export function SinglesImportPanel({
                       ✓ {manualMatch.name} - {manualMatch.artist}
                       <button
                         className={styles.importPageSingleMatchedChange}
+                        data-import-page-inline-action
                         onClick={() => onOpenSearch(file)}
                       >
                         change
@@ -302,6 +303,7 @@ function SingleSearchPanel({
             <button
               key={`${track.source || 'source'}-${track.id}-${index}`}
               className={styles.importPageSingleResultItem}
+              data-import-page-result-row
               onClick={() => onSelectMatch(fileKey, track)}
             >
               {track.image_url ? (
diff --git a/webui/static/mobile.css b/webui/static/mobile.css
index bd81ae64..b920708f 100644
--- a/webui/static/mobile.css
+++ b/webui/static/mobile.css
@@ -1834,7 +1834,7 @@
     /* --- Phase 9: Touch & Hover Adaptations --- */
 
     /* Global touch targets - only standalone/action buttons, not inline */
-    button:not(.watchlist-card-remove):not(.wishlist-delete-btn):not(.wishlist-delete-album-btn):not(.wishlist-delete-btn-small):not(.wishlist-back-btn):not(.alphabet-btn):not(.filter-btn):not(.playlist-modal-close) {
+    button:not(.watchlist-card-remove):not(.wishlist-delete-btn):not(.wishlist-delete-album-btn):not(.wishlist-delete-btn-small):not(.wishlist-back-btn):not(.alphabet-btn):not(.filter-btn):not(.playlist-modal-close):not([data-import-page-result-row]):not([data-import-page-inline-action]) {
         min-height: 38px;
     }
 

From 2a7c03f398d2fff5aa4861521e0c7f3f311039d9 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 15:39:57 +0300
Subject: [PATCH 34/42] refactor(webui): merge primitives into one module

- fold Show and Notice into a single primitives module with one shared stylesheet
- keep the primitives barrel export intact while shrinking the folder footprint
- consolidate the primitive tests into one combined suite
---
 webui/src/components/primitives/index.ts      |  2 +-
 .../primitives/primitives.module.css          | 45 ++++++++++++++++++
 .../{show.test.tsx => primitives.test.tsx}    | 21 ++++++++-
 .../src/components/primitives/primitives.tsx  | 46 +++++++++++++++++++
 webui/src/components/primitives/show.tsx      | 23 ----------
 5 files changed, 112 insertions(+), 25 deletions(-)
 create mode 100644 webui/src/components/primitives/primitives.module.css
 rename webui/src/components/primitives/{show.test.tsx => primitives.test.tsx} (59%)
 create mode 100644 webui/src/components/primitives/primitives.tsx
 delete mode 100644 webui/src/components/primitives/show.tsx

diff --git a/webui/src/components/primitives/index.ts b/webui/src/components/primitives/index.ts
index 849c5bcc..6b63ff8a 100644
--- a/webui/src/components/primitives/index.ts
+++ b/webui/src/components/primitives/index.ts
@@ -1 +1 @@
-export { Show } from './show';
+export * from './primitives';
diff --git a/webui/src/components/primitives/primitives.module.css b/webui/src/components/primitives/primitives.module.css
new file mode 100644
index 00000000..23914559
--- /dev/null
+++ b/webui/src/components/primitives/primitives.module.css
@@ -0,0 +1,45 @@
+.notice {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  margin: 0 0 12px;
+  padding: 10px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.notice[data-tone='neutral'] {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.82);
+}
+
+.notice[data-tone='info'] {
+  border-color: rgba(var(--accent-light-rgb), 0.24);
+  background: rgba(var(--accent-light-rgb), 0.08);
+  color: rgba(255, 232, 188, 0.94);
+}
+
+.notice[data-tone='success'] {
+  border-color: rgba(110, 220, 150, 0.26);
+  background: rgba(110, 220, 150, 0.08);
+  color: rgba(210, 255, 228, 0.94);
+}
+
+.notice[data-tone='warning'] {
+  border-color: rgba(255, 200, 100, 0.26);
+  background: rgba(255, 200, 100, 0.08);
+  color: rgba(255, 232, 188, 0.94);
+}
+
+.notice[data-tone='danger'] {
+  border-color: rgba(255, 120, 120, 0.26);
+  background: rgba(255, 120, 120, 0.08);
+  color: rgba(255, 214, 214, 0.94);
+}
diff --git a/webui/src/components/primitives/show.test.tsx b/webui/src/components/primitives/primitives.test.tsx
similarity index 59%
rename from webui/src/components/primitives/show.test.tsx
rename to webui/src/components/primitives/primitives.test.tsx
index ec090d2c..add08aeb 100644
--- a/webui/src/components/primitives/show.test.tsx
+++ b/webui/src/components/primitives/primitives.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { Show } from './show';
+import { Notice, Show } from './primitives';
 
 describe('Show', () => {
   it('renders children when the condition is true', () => {
@@ -31,3 +31,22 @@ describe('Show', () => {
     expect(screen.getByText('Ada')).toBeInTheDocument();
   });
 });
+
+describe('Notice', () => {
+  it('renders as a note by default', () => {
+    render(<Notice>Fallback message</Notice>);
+
+    expect(screen.getByText('Fallback message')).toHaveAttribute('role', 'note');
+    expect(screen.getByText('Fallback message')).toHaveAttribute('data-tone', 'info');
+  });
+
+  it('supports tone overrides', () => {
+    render(
+      <Notice tone="warning">
+        <span>Provider fallback</span>
+      </Notice>,
+    );
+
+    expect(screen.getByRole('note')).toHaveAttribute('data-tone', 'warning');
+  });
+});
diff --git a/webui/src/components/primitives/primitives.tsx b/webui/src/components/primitives/primitives.tsx
new file mode 100644
index 00000000..1fec52b9
--- /dev/null
+++ b/webui/src/components/primitives/primitives.tsx
@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+
+import styles from './primitives.module.css';
+
+type ShowChildren<T> = ReactNode | ((value: NonNullable<T>) => ReactNode);
+
+export interface ShowProps<T> {
+  children: ShowChildren<T>;
+  fallback?: ReactNode;
+  when: T;
+}
+
+export function Show<T>({ fallback = null, children, when }: ShowProps<T>) {
+  if (!when) {
+    return <>{fallback}</>;
+  }
+
+  if (typeof children === 'function') {
+    return <>{(children as (value: NonNullable<T>) => ReactNode)(when as NonNullable<T>)}</>;
+  }
+
+  return <>{children}</>;
+}
+
+export type NoticeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+export type NoticeProps = Omit<ComponentPropsWithoutRef<'div'>, 'className'> & {
+  className?: string;
+  tone?: NoticeTone;
+};
+
+export const Notice = forwardRef<HTMLDivElement, NoticeProps>(function Notice(
+  { className, tone = 'info', role = 'note', ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={clsx(styles.notice, className)}
+      data-tone={tone}
+      role={role}
+      {...props}
+    />
+  );
+});
diff --git a/webui/src/components/primitives/show.tsx b/webui/src/components/primitives/show.tsx
deleted file mode 100644
index 2265131a..00000000
--- a/webui/src/components/primitives/show.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ReactNode } from 'react';
-
-type ShowChildren<T> = ReactNode | ((value: NonNullable<T>) => ReactNode);
-
-export function Show<T>({
-  fallback = null,
-  children,
-  when,
-}: {
-  children: ShowChildren<T>;
-  fallback?: ReactNode;
-  when: T;
-}) {
-  if (!when) {
-    return <>{fallback}</>;
-  }
-
-  if (typeof children === 'function') {
-    return <>{(children as (value: NonNullable<T>) => ReactNode)(when as NonNullable<T>)}</>;
-  }
-
-  return <>{children}</>;
-}

From 9da8251e43e089fe0d18171fa6a19ecd276278ce Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 15:40:13 +0300
Subject: [PATCH 35/42] feat(webui): clarify import source metadata

- thread primary_source through album and track search payloads while keeping per-result source on the returned rows
- reuse the shared Notice primitive for fallback and error messaging in the import pages
- update the import route tests and shell route smoke coverage for the new behavior
---
 .../src/platform/shell/route-manifest.test.ts |  4 +-
 webui/src/routes/import/-import.helpers.ts    | 53 ++++++++++++++
 webui/src/routes/import/-import.store.ts      |  9 +++
 webui/src/routes/import/-import.types.ts      | 13 +++-
 webui/src/routes/import/-route.test.tsx       | 50 +++++++++++--
 .../routes/import/-ui/album-import-tab.tsx    | 71 ++++++++++++++++---
 .../routes/import/-ui/import-page.module.css  | 39 +++++-----
 webui/src/routes/import/-ui/import-page.tsx   |  3 +-
 .../routes/import/-ui/singles-import-tab.tsx  |  7 +-
 9 files changed, 211 insertions(+), 38 deletions(-)

diff --git a/webui/src/platform/shell/route-manifest.test.ts b/webui/src/platform/shell/route-manifest.test.ts
index e4f8c978..f3a77d45 100644
--- a/webui/src/platform/shell/route-manifest.test.ts
+++ b/webui/src/platform/shell/route-manifest.test.ts
@@ -18,7 +18,9 @@ describe('shellRouteManifest', () => {
     expect(resolveShellPageFromPath('/watchlist')).toBe('watchlist');
     expect(resolveShellPageFromPath('/active-downloads')).toBe('active-downloads');
     expect(resolveShellPageFromPath('/artist-detail')).toBeNull();
-    expect(resolveShellPageFromPath('/artist-detail/spotify/2YZyLoL8N0Wb9xBt1NhZWg')).toBe('artist-detail');
+    expect(resolveShellPageFromPath('/artist-detail/spotify/2YZyLoL8N0Wb9xBt1NhZWg')).toBe(
+      'artist-detail',
+    );
     expect(resolveShellPageFromPath('/artists')).toBeNull();
   });
 
diff --git a/webui/src/routes/import/-import.helpers.ts b/webui/src/routes/import/-import.helpers.ts
index 9a1bd6e4..6f4f8003 100644
--- a/webui/src/routes/import/-import.helpers.ts
+++ b/webui/src/routes/import/-import.helpers.ts
@@ -11,6 +11,19 @@ import type {
 
 export const IMPORT_PLACEHOLDER_IMAGE = '/static/placeholder.png';
 
+const IMPORT_SOURCE_LABELS: Record<string, string> = {
+  amazon: 'Amazon Music',
+  deezer: 'Deezer',
+  discogs: 'Discogs',
+  hydrabase: 'Hydrabase',
+  itunes: 'Apple Music',
+  musicbrainz: 'MusicBrainz',
+  playlist: 'Playlist',
+  soulseek: 'Basic Search',
+  spotify: 'Spotify',
+  youtube_videos: 'Music Videos',
+};
+
 export function getStagingFileKey(file: ImportStagingFile): string {
   return file.full_path;
 }
@@ -27,6 +40,46 @@ export function getStagingStatsText(files: ImportStagingFile[]): string {
   return totalSize ? `${fileLabel} - ${formatImportBytes(totalSize)}` : fileLabel;
 }
 
+export function getImportSourceLabel(source: string | null | undefined): string {
+  if (!source) return '';
+  return IMPORT_SOURCE_LABELS[source.toLowerCase()] || source;
+}
+
+/**
+ * Label a fallback result row so it is obvious which provider actually returned it.
+ */
+export function getImportSourceBadgeText(
+  resultSource: string | null | undefined,
+  lookupSource: string | null | undefined,
+): string {
+  if (!resultSource || !lookupSource) return '';
+  if (resultSource.toLowerCase() === lookupSource.toLowerCase()) return '';
+  return `via ${getImportSourceLabel(resultSource)}`;
+}
+
+/**
+ * Banner for a whole result set that came from a fallback provider rather than the lookup source.
+ */
+export function getImportSourceFallbackBanner(
+  results: Array<{ source: string }> | null | undefined,
+  lookupSource: string | null | undefined,
+): string {
+  if (!lookupSource || !results?.length) return '';
+  const normalizedLookupSource = lookupSource.toLowerCase();
+  if (
+    !results.every(
+      (result) => result.source && result.source.toLowerCase() !== normalizedLookupSource,
+    )
+  ) {
+    return '';
+  }
+
+  const resultSource = results[0]?.source;
+  if (!resultSource) return '';
+
+  return `Showing ${getImportSourceLabel(resultSource)} results - not from your primary source (${getImportSourceLabel(lookupSource)}).`;
+}
+
 export function getTrackDisplayInfo(match: ImportAlbumMatch, index: number) {
   const track = match.track || match.spotify_track || {};
   const rawTrackNumber = track.track_number ?? track.trackNumber ?? null;
diff --git a/webui/src/routes/import/-import.store.ts b/webui/src/routes/import/-import.store.ts
index fe7ea66f..f6bb892b 100644
--- a/webui/src/routes/import/-import.store.ts
+++ b/webui/src/routes/import/-import.store.ts
@@ -10,6 +10,7 @@ import type {
   ImportStagingFile,
   ImportTrackResult,
 } from './-import.types';
+
 import { getStagingFileKey } from './-import.helpers';
 
 export type SingleSearchState = {
@@ -33,6 +34,8 @@ function createInitialWorkflowState() {
     albumResults: null as ImportAlbumResult[] | null,
     albumSearchError: null as string | null,
     albumSearchLoading: false,
+    // Lookup source used to seed the album search. Result rows still carry their own `source`.
+    albumSearchLookupSource: null as string | null,
     autoGroupFilePaths: null as string[] | null,
     selectedAlbum: null as ImportAlbumResult | null,
     albumMatch: null as ImportAlbumMatchPayload | null,
@@ -82,6 +85,7 @@ export const useImportWorkflowStore = create(
         albumResults: null,
         albumSearchError: null,
         albumSearchLoading: false,
+        albumSearchLookupSource: null,
         autoGroupFilePaths: null,
         selectedAlbum: null,
         albumMatch: null,
@@ -94,12 +98,15 @@ export const useImportWorkflowStore = create(
     setAlbumResults: (albumResults: ImportAlbumResult[] | null) => set({ albumResults }),
     setAlbumSearchError: (albumSearchError: string | null) => set({ albumSearchError }),
     setAlbumSearchLoading: (albumSearchLoading: boolean) => set({ albumSearchLoading }),
+    setAlbumSearchLookupSource: (albumSearchLookupSource: string | null) =>
+      set({ albumSearchLookupSource }),
     setAlbumSearchContext: (albumQuery: string, autoGroupFilePaths: string[] | null) => {
       set({
         albumQuery,
         albumSearchLoading: true,
         albumSearchError: null,
         albumResults: null,
+        albumSearchLookupSource: null,
         selectedAlbum: null,
         albumMatch: null,
         autoGroupFilePaths,
@@ -219,6 +226,7 @@ export function useAlbumImportWorkflow() {
       albumResults: state.albumResults,
       albumSearchError: state.albumSearchError,
       albumSearchLoading: state.albumSearchLoading,
+      albumSearchLookupSource: state.albumSearchLookupSource,
       autoGroupFilePaths: state.autoGroupFilePaths,
       clearAutoGroupFilePaths: state.clearAutoGroupFilePaths,
       matchOverrides: state.matchOverrides,
@@ -232,6 +240,7 @@ export function useAlbumImportWorkflow() {
       setAlbumSearchContext: state.setAlbumSearchContext,
       setAlbumSearchError: state.setAlbumSearchError,
       setAlbumSearchLoading: state.setAlbumSearchLoading,
+      setAlbumSearchLookupSource: state.setAlbumSearchLookupSource,
       setMatchOverrides: state.setMatchOverrides,
       setSelectedAlbum: state.setSelectedAlbum,
     })),
diff --git a/webui/src/routes/import/-import.types.ts b/webui/src/routes/import/-import.types.ts
index 9767ff24..7192336c 100644
--- a/webui/src/routes/import/-import.types.ts
+++ b/webui/src/routes/import/-import.types.ts
@@ -53,7 +53,8 @@ export interface ImportAlbumResult {
   id: string;
   name: string;
   artist: string;
-  source?: string | null;
+  /** Provider that returned this result row. */
+  source: string;
   image_url?: string | null;
   total_tracks?: number | null;
   release_date?: string | null;
@@ -63,6 +64,8 @@ export interface ImportAlbumSearchPayload {
   success: boolean;
   albums?: ImportAlbumResult[];
   suggestions?: ImportAlbumResult[];
+  /** Provider used to seed the lookup chain for this response. */
+  primary_source?: string | null;
   ready?: boolean;
   error?: string;
 }
@@ -72,7 +75,8 @@ export interface ImportTrackResult {
   name: string;
   artist: string;
   album?: string | null;
-  source?: string | null;
+  /** Provider that returned this result row. */
+  source: string;
   image_url?: string | null;
   duration_ms?: number | null;
 }
@@ -80,6 +84,8 @@ export interface ImportTrackResult {
 export interface ImportTrackSearchPayload {
   success: boolean;
   tracks?: ImportTrackResult[];
+  /** Provider used to seed the lookup chain for this response. */
+  primary_source?: string | null;
   error?: string;
 }
 
@@ -87,7 +93,8 @@ export interface ImportAlbum {
   id?: string | number | null;
   name: string;
   artist: string;
-  source?: string | null;
+  /** Provider used to resolve this selected album. */
+  source: string;
   image_url?: string | null;
   total_tracks?: number | null;
   release_date?: string | null;
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 5825e38c..35566c14 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -2,13 +2,13 @@ import { createMemoryHistory } from '@tanstack/react-router';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { createAppQueryClient } from '@/app/query-client';
+import { AppRouterProvider, createAppRouter } from '@/app/router';
 import { HttpResponse, http, server } from '@/test/msw';
 import { createShellBridge } from '@/test/shell-bridge';
 
-import { createAppQueryClient } from '@/app/query-client';
-import { AppRouterProvider, createAppRouter } from '@/app/router';
-
 import type { ImportStagingFile } from './-import.types';
+
 import { resetImportWorkflowStore } from './-import.store';
 
 function renderImportRoute(initialEntries = ['/import']) {
@@ -86,6 +86,7 @@ describe('import route', () => {
         return HttpResponse.json({
           success: true,
           ready: true,
+          primary_source: 'spotify',
           suggestions: [
             {
               id: 'album-1',
@@ -101,6 +102,7 @@ describe('import route', () => {
       http.get('/api/import/search/albums', () => {
         return HttpResponse.json({
           success: true,
+          primary_source: 'spotify',
           albums: [
             {
               id: 'album-1',
@@ -192,11 +194,17 @@ describe('import route', () => {
     await waitFor(() => expect(screen.getByTestId('import-page')).toBeInTheDocument());
     expect(await screen.findByText('Import Music')).toBeInTheDocument();
     expect(screen.getByText('Import: /music/Staging')).toBeInTheDocument();
+    expect(
+      await screen.findByText('Showing Deezer results - not from your primary source (Spotify).'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('via Deezer')).toBeInTheDocument();
     await waitFor(() => expect(history.location.pathname).toBe('/import/album'));
     await waitFor(() =>
       expect(getFetchUrls().some((url) => url.includes('/api/import/staging/groups'))).toBe(true),
     );
-    expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(true);
+    expect(getFetchUrls().some((url) => url.includes('/api/import/staging/suggestions'))).toBe(
+      true,
+    );
     expect(window.SoulSyncWebShellBridge?.showReactHost).toHaveBeenCalledWith('import');
     expect(window.SoulSyncWebShellBridge?.setActivePageChrome).toHaveBeenCalledWith('import');
   });
@@ -265,6 +273,40 @@ describe('import route', () => {
     });
   });
 
+  it('surfaces the served source when album search falls back', async () => {
+    server.use(
+      http.get('/api/import/search/albums', () => {
+        return HttpResponse.json({
+          success: true,
+          primary_source: 'spotify',
+          albums: [
+            {
+              id: 'album-2',
+              name: 'Album A',
+              artist: 'Artist A',
+              source: 'musicbrainz',
+              total_tracks: 1,
+              release_date: '2026-01-01',
+            },
+          ],
+        });
+      }),
+    );
+
+    renderImportRoute();
+
+    const searchInput = await screen.findByPlaceholderText('Search for an album...');
+    fireEvent.change(searchInput, { target: { value: 'Album A' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Search' }));
+
+    expect(
+      await screen.findByText(
+        'Showing MusicBrainz results - not from your primary source (Spotify).',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText('via MusicBrainz')).toBeInTheDocument();
+  });
+
   it('renders auto-import results from route search state', async () => {
     renderImportRoute(['/import/auto?autoFilter=pending']);
 
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
index f74b79ae..28602a3c 100644
--- a/webui/src/routes/import/-ui/album-import-tab.tsx
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
-import { type DragEvent, type KeyboardEvent, useState } from 'react';
 import clsx from 'clsx';
+import { type DragEvent, type KeyboardEvent, useState } from 'react';
 
 import { Button, TextInput } from '@/components/form/form';
+import { Notice } from '@/components/primitives';
 
 import type { ImportAlbumResult } from '../-import.types';
 
@@ -15,6 +16,8 @@ import {
 import {
   getDisplayedMatchFile,
   getEffectiveAlbumMatches,
+  getImportSourceBadgeText,
+  getImportSourceFallbackBanner,
   getTrackDisplayInfo,
   getUnmatchedStagingFiles,
   IMPORT_PLACEHOLDER_IMAGE,
@@ -47,6 +50,7 @@ function useAlbumImportViewModel() {
     albumResults,
     albumSearchError,
     albumSearchLoading,
+    albumSearchLookupSource,
     autoGroupFilePaths,
     clearAutoGroupFilePaths,
     matchOverrides,
@@ -60,6 +64,7 @@ function useAlbumImportViewModel() {
     setAlbumSearchContext,
     setAlbumSearchError,
     setAlbumSearchLoading,
+    setAlbumSearchLookupSource,
     setMatchOverrides,
     setSelectedAlbum,
   } = useAlbumImportWorkflow();
@@ -68,7 +73,7 @@ function useAlbumImportViewModel() {
     setDragOverTrack(null);
     setTapSelectedChip(null);
     resetAlbumWorkflow();
-    refreshStaging();
+    void refreshStaging();
   };
 
   const runAlbumSearch = async (query: string, filePaths: string[] | null = null) => {
@@ -80,6 +85,7 @@ function useAlbumImportViewModel() {
     try {
       const payload = await searchImportAlbums(trimmed);
       setAlbumResults(payload.albums ?? []);
+      setAlbumSearchLookupSource(payload.primary_source ?? null);
     } catch (error) {
       setAlbumSearchError(getErrorMessage(error));
     } finally {
@@ -94,6 +100,8 @@ function useAlbumImportViewModel() {
     setAlbumMatchLoading(true);
 
     try {
+      // Pass the source that returned this result row so matching keeps using the
+      // same provider even if the search fell back from the lookup source.
       const payload = await matchImportAlbum({
         albumId: album.id,
         source: album.source,
@@ -165,6 +173,7 @@ function useAlbumImportViewModel() {
     albumResults,
     albumSearchError,
     albumSearchLoading,
+    albumSearchLookupSource,
     dragOverTrack,
     groups: groupsQuery.data?.groups ?? [],
     matchOverrides,
@@ -200,6 +209,7 @@ function useAlbumImportViewModel() {
     stagingFiles,
     suggestions: suggestionsQuery.data?.suggestions ?? [],
     suggestionsReady: suggestionsQuery.data?.ready ?? true,
+    suggestionsLookupSource: suggestionsQuery.data?.primary_source ?? null,
     tapSelectedChip,
   };
 }
@@ -221,6 +231,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
     albumResults,
     albumSearchError,
     albumSearchLoading,
+    albumSearchLookupSource,
     groups,
     onAlbumQueryChange,
     onBackToSearch,
@@ -230,13 +241,25 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
     selectedAlbum,
     suggestions,
     suggestionsReady,
+    suggestionsLookupSource,
   } = viewModel;
 
   const showingMatch = selectedAlbum || albumMatchLoading || albumMatchError || albumMatch;
+  const suggestionsFallbackBanner = getImportSourceFallbackBanner(
+    suggestions,
+    suggestionsLookupSource,
+  );
+  const albumResultsFallbackBanner = getImportSourceFallbackBanner(
+    albumResults,
+    albumSearchLookupSource,
+  );
 
   return (
     <>
-      <div id="import-page-album-search-section" className={clsx({ [styles.hidden]: showingMatch })}>
+      <div
+        id="import-page-album-search-section"
+        className={clsx({ [styles.hidden]: showingMatch })}
+      >
         {albumResults === null && (
           <>
             {groups.length > 0 && (
@@ -266,12 +289,16 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
 
             <div className={styles.importPageSuggestions} id="import-page-suggestions">
               <div className={styles.importPageSectionLabel}>Suggested from your import folder</div>
+              {suggestionsFallbackBanner ? (
+                <Notice tone="warning">{suggestionsFallbackBanner}</Notice>
+              ) : null}
               <div className={styles.importPageAlbumGrid} id="import-page-suggestions-grid">
                 {suggestions.length > 0 ? (
                   suggestions.map((album) => (
                     <AlbumCard
                       key={`${album.source || 'source'}-${album.id}`}
                       album={album}
+                      lookupSource={suggestionsLookupSource}
                       onSelect={onSelectAlbum}
                     />
                   ))
@@ -310,11 +337,16 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
           </Button>
         </div>
 
+        {albumResultsFallbackBanner ? (
+          <Notice tone="warning">{albumResultsFallbackBanner}</Notice>
+        ) : null}
         <div className={styles.importPageAlbumGrid} id="import-page-album-results">
           {albumSearchLoading ? (
             <div className={styles.importPageEmptyState}>Searching...</div>
           ) : albumSearchError ? (
-            <div className={styles.importPageEmptyState}>Error: {albumSearchError}</div>
+            <Notice tone="danger" role="alert">
+              Error: {albumSearchError}
+            </Notice>
           ) : albumResults?.length === 0 ? (
             <div className={styles.importPageEmptyState}>No albums found</div>
           ) : (
@@ -322,6 +354,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
               <AlbumCard
                 key={`${album.source || 'source'}-${album.id}`}
                 album={album}
+                lookupSource={albumSearchLookupSource}
                 onSelect={onSelectAlbum}
               />
             ))
@@ -329,11 +362,16 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
         </div>
       </div>
 
-      <div id="import-page-album-match-section" className={clsx({ [styles.hidden]: !showingMatch })}>
+      <div
+        id="import-page-album-match-section"
+        className={clsx({ [styles.hidden]: !showingMatch })}
+      >
         {albumMatchLoading ? (
           <div className={styles.importPageEmptyState}>Matching files to tracklist...</div>
         ) : albumMatchError ? (
-          <div className={styles.importPageEmptyState}>Error: {albumMatchError}</div>
+          <Notice tone="danger" role="alert">
+            Error: {albumMatchError}
+          </Notice>
         ) : albumMatch?.album ? (
           <AlbumMatchPanel viewModel={viewModel} />
         ) : (
@@ -348,13 +386,17 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
 
 function AlbumCard({
   album,
+  lookupSource,
   onSelect,
 }: {
   album: ImportAlbumResult;
+  lookupSource: string | null;
   onSelect: (album: ImportAlbumResult) => void;
 }) {
+  const resultSourceBadge = getImportSourceBadgeText(album.source, lookupSource);
+
   return (
-    <button className={styles.importPageAlbumCard} onClick={() => onSelect(album)}>
+    <button type="button" className={styles.importPageAlbumCard} onClick={() => onSelect(album)}>
       <img
         src={album.image_url || IMPORT_PLACEHOLDER_IMAGE}
         alt={album.name}
@@ -370,6 +412,9 @@ function AlbumCard({
       <div className={styles.importPageAlbumCardMeta}>
         {album.total_tracks || 0} tracks · {album.release_date?.substring(0, 4) || ''}
       </div>
+      {resultSourceBadge ? (
+        <div className={styles.importPageAlbumCardSource}>{resultSourceBadge}</div>
+      ) : null}
     </button>
   );
 }
@@ -407,7 +452,9 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
   return albumMatchLoading ? (
     <div className={styles.importPageEmptyState}>Matching files to tracklist...</div>
   ) : albumMatchError ? (
-    <div className={styles.importPageEmptyState}>Error: {albumMatchError}</div>
+    <Notice tone="danger" role="alert">
+      Error: {albumMatchError}
+    </Notice>
   ) : albumMatch?.album ? (
     <>
       <div className={styles.importPageAlbumHero} id="import-page-album-hero">
@@ -474,9 +521,11 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
             >
               <span className={styles.importPageMatchNum}>{trackInfo.displayTrackNumber}</span>
               <span className={styles.importPageMatchTrack}>{trackInfo.name}</span>
-              <span className={clsx(styles.importPageMatchFile, {
-                [styles.hasFile]: file,
-              })}>
+              <span
+                className={clsx(styles.importPageMatchFile, {
+                  [styles.hasFile]: file,
+                })}
+              >
                 {file ? (
                   <>
                     <span className={styles.importPageMatchFileName}>{file.filename}</span>
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 39023257..88cc6ff4 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -237,6 +237,13 @@
   margin-top: 4px;
 }
 
+.importPageAlbumCardSource {
+  font-size: 10px;
+  color: rgba(255, 200, 100, 0.75);
+  margin-top: 2px;
+  font-style: italic;
+}
+
 /* Album hero (selected album) */
 .importPageAlbumHero {
   display: flex;
@@ -639,11 +646,11 @@
   color: rgba(255, 255, 255, 0.4);
 }
 
-  .importPageSingleResultSelect {
-    padding: 4px 12px;
-    background: rgba(var(--accent-light-rgb), 0.15);
-    border: 1px solid rgba(var(--accent-light-rgb), 0.3);
-    border-radius: 6px;
+.importPageSingleResultSelect {
+  padding: 4px 12px;
+  background: rgba(var(--accent-light-rgb), 0.15);
+  border: 1px solid rgba(var(--accent-light-rgb), 0.3);
+  border-radius: 6px;
   color: rgb(var(--accent-light-rgb));
   font-size: 11px;
   font-weight: 600;
@@ -651,14 +658,14 @@
   flex-shrink: 0;
 }
 
-  .importPageSingleResultSelect:hover {
-    background: rgba(var(--accent-light-rgb), 0.25);
-  }
+.importPageSingleResultSelect:hover {
+  background: rgba(var(--accent-light-rgb), 0.25);
+}
 
-  /* Empty state */
-  .importPageEmptyState {
-    text-align: center;
-    padding: 60px 20px;
+/* Empty state */
+.importPageEmptyState {
+  text-align: center;
+  padding: 60px 20px;
   color: rgba(255, 255, 255, 0.3);
   font-size: 14px;
 }
@@ -821,8 +828,8 @@
   .importPageMatchRow {
     grid-template-columns: 28px minmax(0, 1fr) auto;
     grid-template-areas:
-      "num track track"
-      "num file unmatch";
+      'num track track'
+      'num file unmatch';
     gap: 6px 8px;
     align-items: center;
   }
@@ -853,8 +860,8 @@
   .importPageSingleItem {
     grid-template-columns: 28px minmax(0, 1fr) auto;
     grid-template-areas:
-      "checkbox info actions"
-      "search search search";
+      'checkbox info actions'
+      'search search search';
     align-items: start;
     gap: 8px;
   }
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
index 32501f51..a9483c3e 100644
--- a/webui/src/routes/import/-ui/import-page.tsx
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -140,7 +140,8 @@ function ImportProcessingQueue() {
 function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
   const statusText = getQueueStatusText(entry);
   const statusClass = clsx({
-    [styles.error]: entry.status === 'error' || (entry.status === 'done' && entry.errors.length > 0),
+    [styles.error]:
+      entry.status === 'error' || (entry.status === 'done' && entry.errors.length > 0),
     [styles.done]: entry.status === 'done',
   });
 
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index 30256221..a636bdee 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { useEffect } from 'react';
 
 import { Badge, Button, Checkbox, TextInput } from '@/components/form/form';
+import { Notice } from '@/components/primitives';
 
 import type { SingleSearchState } from '../-import.store';
 import type { ImportTrackResult } from '../-import.types';
@@ -113,7 +114,7 @@ export function SinglesImportTab() {
     });
 
     clearSinglesSelection();
-    refreshStaging();
+    void refreshStaging();
   };
 
   return (
@@ -295,7 +296,9 @@ function SingleSearchPanel({
         {searchState?.loading ? (
           <div className={styles.importPageEmptyState}>Searching...</div>
         ) : searchState?.error ? (
-          <div className={styles.importPageEmptyState}>Error: {searchState.error}</div>
+          <Notice tone="danger" role="alert">
+            Error: {searchState.error}
+          </Notice>
         ) : searchState?.results.length === 0 ? (
           <div className={styles.importPageEmptyState}>No results found</div>
         ) : (

From a65fbfd53203213fb0ae475b6397cb197067834f Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 15:43:41 +0300
Subject: [PATCH 36/42] refactor(webui): move badge into primitives

- move the shared badge primitive and styling out of the form component module
- keep primary-button badge styling working via a data-slot hook instead of a form-local class
- update the import pages and primitive tests to consume the new home for Badge
---
 webui/src/components/form/form.module.css     | 44 +------------------
 webui/src/components/form/form.test.tsx       |  4 --
 webui/src/components/form/form.tsx            | 16 -------
 webui/src/components/form/index.ts            |  1 -
 .../primitives/primitives.module.css          | 42 ++++++++++++++++++
 .../components/primitives/primitives.test.tsx | 17 ++++++-
 .../src/components/primitives/primitives.tsx  | 24 ++++++++++
 .../src/routes/import/-ui/auto-import-tab.tsx |  2 +-
 .../routes/import/-ui/singles-import-tab.tsx  |  4 +-
 9 files changed, 86 insertions(+), 68 deletions(-)

diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css
index ae8998b0..31eff1a8 100644
--- a/webui/src/components/form/form.module.css
+++ b/webui/src/components/form/form.module.css
@@ -449,48 +449,6 @@
   }
 }
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2ch;
-  padding: 1px 7px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  font-size: 0.74rem;
-  font-weight: 700;
-  line-height: 1.2;
-  white-space: nowrap;
-  vertical-align: middle;
-  color: rgba(255, 255, 255, 0.45);
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.08);
-
-  &[data-tone='info'] {
-    color: rgb(var(--accent-light-rgb));
-    background: rgba(var(--accent-rgb), 0.12);
-    border-color: rgba(var(--accent-light-rgb), 0.12);
-  }
-
-  &[data-tone='success'] {
-    color: #4ade80;
-    background: rgba(74, 222, 128, 0.12);
-    border-color: rgba(74, 222, 128, 0.12);
-  }
-
-  &[data-tone='warning'] {
-    color: #fbbf24;
-    background: rgba(251, 191, 36, 0.12);
-    border-color: rgba(251, 191, 36, 0.12);
-  }
-
-  &[data-tone='danger'] {
-    color: #f87171;
-    background: rgba(248, 113, 113, 0.12);
-    border-color: rgba(248, 113, 113, 0.12);
-  }
-}
-
 .button {
   display: inline-flex;
   align-items: center;
@@ -576,7 +534,7 @@
     color: rgba(0, 0, 0, 0.55);
   }
 
-  &[data-variant='primary'] .badge {
+  &[data-variant='primary'] [data-slot='badge'] {
     color: #fff;
     background: rgba(0, 0, 0, 0.18);
     border-color: rgba(0, 0, 0, 0.22);
diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx
index 21e6abb3..77b7677b 100644
--- a/webui/src/components/form/form.test.tsx
+++ b/webui/src/components/form/form.test.tsx
@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { describe, expect, it } from 'vitest';
 
 import {
-  Badge,
   Button,
   Checkbox,
   FormActions,
@@ -115,8 +114,6 @@ function FormDemo() {
         />
       </FormField>
 
-      <Badge tone="warning">12</Badge>
-
       <FormError message="Validation failed" />
 
       <FormActions>
@@ -170,7 +167,6 @@ describe('form primitives', () => {
     fireEvent.click(highPriority);
     expect(highPriority).toHaveAttribute('aria-pressed', 'true');
 
-    expect(screen.getByText('12')).toHaveAttribute('data-tone', 'warning');
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('data-variant', 'primary');
   });
diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx
index 06cf217d..9e894d43 100644
--- a/webui/src/components/form/form.tsx
+++ b/webui/src/components/form/form.tsx
@@ -283,22 +283,6 @@ export const OptionButton = forwardRef<HTMLButtonElement, OptionButtonProps>(fun
   );
 });
 
-type BaseBadgeProps = ComponentPropsWithoutRef<'span'>;
-
-export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
-
-export type BadgeProps = Omit<BaseBadgeProps, 'className'> & {
-  className?: string;
-  tone?: BadgeTone;
-};
-
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
-  { className, tone = 'neutral', ...props },
-  ref,
-) {
-  return <span ref={ref} className={clsx(styles.badge, className)} data-tone={tone} {...props} />;
-});
-
 type BaseButtonProps = ComponentPropsWithoutRef<typeof BaseButton>;
 
 export type ButtonProps = Omit<BaseButtonProps, 'className'> & {
diff --git a/webui/src/components/form/index.ts b/webui/src/components/form/index.ts
index 0f6ffb0d..f9a268a6 100644
--- a/webui/src/components/form/index.ts
+++ b/webui/src/components/form/index.ts
@@ -1,6 +1,5 @@
 export {
   Button,
-  Badge,
   FormActions,
   FormError,
   FormField,
diff --git a/webui/src/components/primitives/primitives.module.css b/webui/src/components/primitives/primitives.module.css
index 23914559..f585d5e8 100644
--- a/webui/src/components/primitives/primitives.module.css
+++ b/webui/src/components/primitives/primitives.module.css
@@ -43,3 +43,45 @@
   background: rgba(255, 120, 120, 0.08);
   color: rgba(255, 214, 214, 0.94);
 }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2ch;
+  padding: 1px 7px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 0.74rem;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: rgba(255, 255, 255, 0.45);
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.badge[data-tone='info'] {
+  color: rgb(var(--accent-light-rgb));
+  background: rgba(var(--accent-rgb), 0.12);
+  border-color: rgba(var(--accent-light-rgb), 0.12);
+}
+
+.badge[data-tone='success'] {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.12);
+  border-color: rgba(74, 222, 128, 0.12);
+}
+
+.badge[data-tone='warning'] {
+  color: #fbbf24;
+  background: rgba(251, 191, 36, 0.12);
+  border-color: rgba(251, 191, 36, 0.12);
+}
+
+.badge[data-tone='danger'] {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.12);
+  border-color: rgba(248, 113, 113, 0.12);
+}
diff --git a/webui/src/components/primitives/primitives.test.tsx b/webui/src/components/primitives/primitives.test.tsx
index add08aeb..9f5d6e2c 100644
--- a/webui/src/components/primitives/primitives.test.tsx
+++ b/webui/src/components/primitives/primitives.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { Notice, Show } from './primitives';
+import { Badge, Notice, Show } from './primitives';
 
 describe('Show', () => {
   it('renders children when the condition is true', () => {
@@ -50,3 +50,18 @@ describe('Notice', () => {
     expect(screen.getByRole('note')).toHaveAttribute('data-tone', 'warning');
   });
 });
+
+describe('Badge', () => {
+  it('renders with neutral styling by default', () => {
+    render(<Badge>12</Badge>);
+
+    expect(screen.getByText('12')).toHaveAttribute('data-slot', 'badge');
+    expect(screen.getByText('12')).toHaveAttribute('data-tone', 'neutral');
+  });
+
+  it('supports tone overrides', () => {
+    render(<Badge tone="warning">12</Badge>);
+
+    expect(screen.getByText('12')).toHaveAttribute('data-tone', 'warning');
+  });
+});
diff --git a/webui/src/components/primitives/primitives.tsx b/webui/src/components/primitives/primitives.tsx
index 1fec52b9..8972632e 100644
--- a/webui/src/components/primitives/primitives.tsx
+++ b/webui/src/components/primitives/primitives.tsx
@@ -23,6 +23,30 @@ export function Show<T>({ fallback = null, children, when }: ShowProps<T>) {
   return <>{children}</>;
 }
 
+type BaseBadgeProps = ComponentPropsWithoutRef<'span'>;
+
+export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+export type BadgeProps = Omit<BaseBadgeProps, 'className'> & {
+  className?: string;
+  tone?: BadgeTone;
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  { className, tone = 'neutral', ...props },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      className={clsx(styles.badge, className)}
+      data-slot="badge"
+      data-tone={tone}
+      {...props}
+    />
+  );
+});
+
 export type NoticeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 
 export type NoticeProps = Omit<ComponentPropsWithoutRef<'div'>, 'className'> & {
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index c1576442..761a08df 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
 import {
-  Badge,
   Button,
   OptionButton,
   OptionButtonGroup,
@@ -11,6 +10,7 @@ import {
   Select,
   Switch,
 } from '@/components/form/form';
+import { Badge } from '@/components/primitives';
 
 import type {
   ImportAutoFilter,
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index a636bdee..7aac6728 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { useEffect } from 'react';
 
-import { Badge, Button, Checkbox, TextInput } from '@/components/form/form';
-import { Notice } from '@/components/primitives';
+import { Button, Checkbox, TextInput } from '@/components/form/form';
+import { Badge, Notice } from '@/components/primitives';
 
 import type { SingleSearchState } from '../-import.store';
 import type { ImportTrackResult } from '../-import.types';

From e2a760bd682a1fa91ecca94371a612732531a98c Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 15:57:42 +0300
Subject: [PATCH 37/42] fix(webui): keep import pages cache-aware

- keep the /import loader from turning transient staging fetch failures into route errors
- keep cached auto-import status and results visible during refetch failures
- show inline notices only when there is no stale data to fall back to
- add regression coverage for staging, status, and results failure paths
---
 webui/src/routes/import/-route.test.tsx       | 74 +++++++++++++++++++
 .../src/routes/import/-ui/auto-import-tab.tsx | 27 +++----
 webui/src/routes/import/-ui/import-shared.tsx |  7 +-
 webui/src/routes/import/route.tsx             |  6 +-
 4 files changed, 97 insertions(+), 17 deletions(-)

diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 35566c14..679341c5 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -9,6 +9,7 @@ import { createShellBridge } from '@/test/shell-bridge';
 
 import type { ImportStagingFile } from './-import.types';
 
+import { autoImportResultsQueryOptions, autoImportStatusQueryOptions } from './-import.api';
 import { resetImportWorkflowStore } from './-import.store';
 
 function renderImportRoute(initialEntries = ['/import']) {
@@ -19,6 +20,7 @@ function renderImportRoute(initialEntries = ['/import']) {
   return {
     history,
     router,
+    queryClient,
     ...render(<AppRouterProvider router={router} queryClient={queryClient} />),
   };
 }
@@ -209,6 +211,26 @@ describe('import route', () => {
     expect(window.SoulSyncWebShellBridge?.setActivePageChrome).toHaveBeenCalledWith('import');
   });
 
+  it('keeps the import page rendering when staging files fail to load', async () => {
+    server.use(
+      http.get('/api/import/staging/files', () =>
+        HttpResponse.json(
+          {
+            success: false,
+            error: 'Import folder unavailable',
+          },
+          { status: 500 },
+        ),
+      ),
+    );
+
+    renderImportRoute();
+
+    expect(await screen.findByTestId('import-page')).toBeInTheDocument();
+    expect(await screen.findByText('Import Music')).toBeInTheDocument();
+    expect(await screen.findByText('Import folder: error')).toBeInTheDocument();
+  });
+
   it('stores the active tab in nested route paths', async () => {
     const { history } = renderImportRoute();
 
@@ -318,4 +340,56 @@ describe('import route', () => {
       false,
     );
   });
+
+  it('keeps cached auto-import status visible when a refetch fails', async () => {
+    const { queryClient } = renderImportRoute(['/import/auto']);
+
+    expect(await screen.findByText('Watching')).toBeInTheDocument();
+
+    server.use(
+      http.get('/api/auto-import/status', () =>
+        HttpResponse.json(
+          {
+            success: false,
+            error: 'Auto-import unavailable',
+          },
+          { status: 500 },
+        ),
+      ),
+    );
+
+    await queryClient.refetchQueries({
+      queryKey: autoImportStatusQueryOptions().queryKey,
+    });
+
+    expect(screen.getByText('Watching')).toBeInTheDocument();
+    expect(screen.queryByText(/Auto-import is unavailable:/)).not.toBeInTheDocument();
+  });
+
+  it('keeps cached auto-import results visible when a refetch fails', async () => {
+    const { queryClient } = renderImportRoute(['/import/auto?autoFilter=pending']);
+
+    expect(await screen.findByRole('button', { name: /^Needs Review\s*1$/ })).toBeInTheDocument();
+    expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
+
+    server.use(
+      http.get('/api/auto-import/results', () =>
+        HttpResponse.json(
+          {
+            success: false,
+            error: 'Auto-import results unavailable',
+          },
+          { status: 500 },
+        ),
+      ),
+    );
+
+    await queryClient.refetchQueries({
+      queryKey: autoImportResultsQueryOptions().queryKey,
+    });
+
+    expect(screen.getByRole('button', { name: /^Needs Review\s*1$/ })).toBeInTheDocument();
+    expect(screen.getAllByText('Album A').length).toBeGreaterThan(0);
+    expect(screen.queryByText(/Failed to load imports:/)).not.toBeInTheDocument();
+  });
 });
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index 761a08df..245861e3 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -10,7 +10,7 @@ import {
   Select,
   Switch,
 } from '@/components/form/form';
-import { Badge } from '@/components/primitives';
+import { Badge, Notice } from '@/components/primitives';
 
 import type {
   ImportAutoFilter,
@@ -151,17 +151,18 @@ export function AutoImportPanel({
   const counts = getAutoImportCounts(allResults);
   const activeLines = getActiveImportLines(statusQuery.data);
   const statusTone = getAutoImportStatusTone(statusQuery.data);
-
-  if (statusQuery.error) {
-    return (
-      <div className={styles.autoImportEmpty}>
-        Auto-import is unavailable: {getErrorMessage(statusQuery.error)}
-      </div>
-    );
-  }
+  const statusError =
+    statusQuery.error && !statusQuery.data ? getErrorMessage(statusQuery.error) : '';
+  const resultsError =
+    resultsQuery.error && !resultsQuery.data ? getErrorMessage(resultsQuery.error) : '';
 
   return (
     <>
+      {statusError ? (
+        <Notice tone="danger" role="alert">
+          Auto-import is unavailable: {statusError}
+        </Notice>
+      ) : null}
       <div className={styles.autoImportControls}>
         <div className={styles.autoImportToggleRow}>
           <div className={styles.autoImportToggleLabel}>
@@ -293,10 +294,10 @@ export function AutoImportPanel({
       ) : null}
 
       <div className={styles.autoImportResults} id="auto-import-results">
-        {resultsQuery.error ? (
-          <div className={styles.autoImportEmpty}>
-            Failed to load imports: {getErrorMessage(resultsQuery.error)}
-          </div>
+        {resultsError ? (
+          <Notice tone="danger" role="alert">
+            Failed to load imports: {resultsError}
+          </Notice>
         ) : allResults.length === 0 ? (
           <div className={styles.autoImportEmpty}>
             <p>No imports yet. Drop album folders or single tracks into your import folder.</p>
diff --git a/webui/src/routes/import/-ui/import-shared.tsx b/webui/src/routes/import/-ui/import-shared.tsx
index dfa5bdda..61b3b93e 100644
--- a/webui/src/routes/import/-ui/import-shared.tsx
+++ b/webui/src/routes/import/-ui/import-shared.tsx
@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 
-import type { ImportQueueJob } from '../-import.types';
+import type { ImportQueueJob, ImportStagingFile } from '../-import.types';
 
 import {
   importStagingFilesQueryOptions,
@@ -11,6 +11,8 @@ import {
 import { getTrackDisplayInfo, IMPORT_PLACEHOLDER_IMAGE } from '../-import.helpers';
 import { useImportQueueWorkflow, useImportWorkflowStore } from '../-import.store';
 
+const EMPTY_STAGING_FILES: ImportStagingFile[] = [];
+
 export function useImportStaging() {
   const queryClient = useQueryClient();
   const clearFinishedJobs = useImportWorkflowStore((state) => state.clearFinishedJobs);
@@ -23,7 +25,8 @@ export function useImportStaging() {
       clearFinishedJobs();
       await invalidateImportStagingQueries(queryClient);
     },
-    stagingFiles: stagingQuery.data?.files ?? [],
+    // Keep the empty fallback stable so staging-driven effects do not loop while loading.
+    stagingFiles: stagingQuery.data?.files ?? EMPTY_STAGING_FILES,
     stagingPath: stagingQuery.data?.staging_path || 'Not configured',
     stagingQuery,
   };
diff --git a/webui/src/routes/import/route.tsx b/webui/src/routes/import/route.tsx
index 5cb5e60d..e91f9658 100644
--- a/webui/src/routes/import/route.tsx
+++ b/webui/src/routes/import/route.tsx
@@ -13,8 +13,10 @@ export const Route = createFileRoute('/import')({
       throw redirect({ href: getProfileHomePath(bridge), replace: true });
     }
   },
-  loader: async ({ context }) => {
-    await context.queryClient.ensureQueryData(importStagingFilesQueryOptions());
+  loader: ({ context }) => {
+    // Warm the staging query if possible, but never block the route on a transient fetch
+    // failure. The page owns the in-place error state for that case.
+    void context.queryClient.prefetchQuery(importStagingFilesQueryOptions());
   },
   component: ImportPage,
 });

From 400d0dd48acc1389747f4a5bed4722b2d126f0db Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 16:11:25 +0300
Subject: [PATCH 38/42] docs(import): align migration docs

- describe the implemented nested /import route structure
- document the route-local workflow store and stable draft state
- update testing, risk, and cleanup notes to match the current code
---
 webui/docs/migration/import-migration-plan.md | 91 +++++++++++++------
 .../docs/migration/page-migration-overview.md |  3 +-
 2 files changed, 65 insertions(+), 29 deletions(-)

diff --git a/webui/docs/migration/import-migration-plan.md b/webui/docs/migration/import-migration-plan.md
index 9a5e4013..1ef64f72 100644
--- a/webui/docs/migration/import-migration-plan.md
+++ b/webui/docs/migration/import-migration-plan.md
@@ -1,6 +1,6 @@
 # WebUI Import Migration Plan
 
-Snapshot date: 2026-05-15
+Snapshot date: 2026-05-24
 
 ## Status
 
@@ -8,8 +8,10 @@ Snapshot date: 2026-05-15
 - `import` is now React-owned in the shell route manifest.
 - The legacy import page DOM has been removed from `webui/index.html`.
 - Legacy import activation has been removed from `webui/static/init.js`.
-- A React route slice now owns import rendering, tab state, album matching, singles matching, auto-import controls, and the client-side processing queue.
-- The old import-specific functions still exist at the top of `webui/static/stats-automations.js` as dead code and can be removed in a focused cleanup pass.
+- A React route subtree now owns import rendering, nested route state, album matching, singles matching, auto-import controls, and the client-side processing queue.
+- The old `tab=` URL contract has been replaced by `/import/album`, `/import/singles`, and `/import/auto`, with `/import` redirecting to `/import/album`.
+- Route-local workflow state lives in `webui/src/routes/import/-import.store.ts`, which keeps draft matching, selection, and queue state alive while navigating within the import route.
+- The old import-page-specific functions have already been removed from `webui/static/stats-automations.js`; any remaining `import` references there belong to the broader automation feature set, not this page migration.
 - Backend routes are already grouped around `/api/import/*` and `/api/auto-import/*`.
 
 ## Goal
@@ -102,30 +104,53 @@ Backend endpoints already available:
 - `POST /api/auto-import/approve-all`
 - `POST /api/auto-import/clear-completed`
 
-## Proposed Route Slice
+## Implemented Route Slice
 
 ```text
 webui/src/routes/import/
   route.tsx
+  index.tsx
+  album.tsx
+  auto.tsx
+  singles.tsx
   -import.types.ts
   -import.api.ts
   -import.helpers.ts
+  -import.store.ts
   -route.test.tsx
   -ui/
     import-page.tsx
+    album-import-tab.tsx
+    auto-import-tab.tsx
+    singles-import-tab.tsx
+    import-shared.tsx
 ```
 
-## Proposed Route Responsibilities
+## Implemented Route Responsibilities
 
 `route.tsx`
 
 - declare `/import`
-- validate search params
 - gate route through `bridge.isPageAllowed('import')`
 - preload shell context
-- ensure the staging-files query
+- prefetch the staging-files query without blocking on transient fetch failure
+
+`index.tsx`
+
+- redirect `/import` to `/import/album`
+
+`album.tsx`
+
 - prefetch album staging groups and suggestions
-- leave auto-import status/results as tab-specific client queries
+
+`auto.tsx`
+
+- validate the `autoFilter` search param
+- keep route-driven filter changes in the URL while leaving the rest of the workflow state local
+
+`singles.tsx`
+
+- mount the singles import tab without extra route-level loader work
 
 `-import.types.ts`
 
@@ -137,32 +162,38 @@ webui/src/routes/import/
 
 - query options for staging, groups, suggestions, auto-import status, auto-import settings, auto-import results, album search, and track search
 - mutation helpers for album match, album process, singles process, auto-import actions, and settings writes
-- a single `invalidateImportQueries(queryClient)` helper for broad route refreshes after processing
+- invalidation helpers for broad route refreshes, staging-only refreshes, and auto-import-only refreshes
 
 `-import.helpers.ts`
 
 - byte-size formatting
-- default query param coercion
 - album and track display labels
 - confidence class/label mapping
 - staging match normalization
 - auto-import result filtering and counters
 
+`-import.store.ts`
+
+- album search state, selected album, auto-group file paths, and match overrides
+- selected single-file state and manual matches
+- queue job state and queue entry updates
+- single-search draft state
+- draft state survival across nested route remounts
+
 `-ui/import-page.tsx`
 
-- route-local match state
-- tap-selected file chip state
-- singles selection and manual matches
-- auto-import polling UI
-- client-side processing queue state
+- page chrome and nested route navigation
+- queue summary and queue-item rendering
+- nested route outlet for album, singles, and auto views
 
 ## Search Params
 
-Use URL state only for durable, shareable route state:
+Use nested route paths for durable, shareable tab state:
 
-- `tab`
-  - values: `album`, `singles`, `auto`
-  - default: `album`
+- `/import/album`
+  - default landing route
+- `/import/singles`
+- `/import/auto`
 - `autoFilter`
   - values: `all`, `pending`, `imported`, `failed`
   - default: `all`
@@ -178,7 +209,8 @@ Keep these local to React state:
 
 Reasoning:
 
-- The tab and auto-import filter are useful after reloads.
+- The tab choice belongs in the path, which keeps deep links simple and avoids an extra `tab=` query param.
+- The auto-import filter is still useful after reloads.
 - The matching workflow is ephemeral and should not create fragile URLs with file indexes or local staging paths.
 
 ## Query Model
@@ -192,7 +224,7 @@ Useful prefetch data:
 - `importStagingGroupsQueryOptions()`
 - `importStagingSuggestionsQueryOptions()`
 
-Tab-specific data:
+Nested-route data:
 
 - `autoImportStatusQueryOptions()`
 - `autoImportSettingsQueryOptions()`
@@ -239,11 +271,13 @@ Recommended order:
 
 This order gives us a visible React page early while delaying the highest-risk file-processing actions until the state model is tested.
 
+The implemented route keeps the same overall migration shape, but the final URL contract uses nested route paths instead of a `tab=` search param.
+
 ## Testing Sketch
 
 Unit tests:
 
-- tab and filter search-param defaults
+- route path and filter defaults
 - staging summary formatting
 - auto-import counters
 - confidence labels
@@ -264,20 +298,21 @@ API tests:
 Route / component tests:
 
 - unauthorized users redirect to profile home
-- default route renders the Albums tab
-- `?tab=singles` renders the Singles tab
-- `?tab=auto&autoFilter=pending` renders pending auto-import results
+- default route redirects to `/import/album`
+- `/import/singles` renders the Singles tab
+- `/import/auto?autoFilter=pending` renders pending auto-import results
 - refresh invalidates staging queries
 - album selection opens the match view
 - drag/drop and tap assignment update track matches
 - processing queue advances and refreshes staging on completion
+- client workflow drafts survive page remounts
 
 Playwright can wait until after route ownership flips.
 
 ## Risks
 
 - The processing queue is client-side and long-running.
-- Auto-import polling must stop when leaving the tab or route.
+- Auto-import polling must stop when leaving the auto subroute or route.
 - File indexes can become stale after staging refreshes.
 - Album matching depends on preserving source, album name, and album artist from search results.
 - The page currently shares a large legacy module with stats and automations code, so cleanup should be careful and incremental.
@@ -293,9 +328,9 @@ Playwright can wait until after route ownership flips.
 ## Outcome
 
 - The route now serves as the first React-owned workflow migration.
-- The implementation uses validated search params for `tab` and `autoFilter`.
+- The implementation uses nested route paths plus a validated `autoFilter` search param.
 - The route uses TanStack Query for staging data, suggestions, auto-import polling, mutations, and invalidation.
-- Tests cover shell ownership, URL tab state, album match payload preservation, and auto-import rendering.
+- Tests cover shell ownership, nested route state, album match payload preservation, and auto-import rendering.
 
 ## Recommendation
 
diff --git a/webui/docs/migration/page-migration-overview.md b/webui/docs/migration/page-migration-overview.md
index 6016df4b..16808c62 100644
--- a/webui/docs/migration/page-migration-overview.md
+++ b/webui/docs/migration/page-migration-overview.md
@@ -134,7 +134,8 @@ Rollups:
 - Primary files: `webui/src/routes/import/*`, `webui/src/platform/shell/route-manifest.ts`.
 - Main surface: staging files, album and singles matching, suggestion cards, processing queue.
 - Key coupling: settings-derived staging path assumptions and downstream library state.
-- Recommendation: completed as the next migration after `stats`. Follow-up cleanup should remove the dead legacy import functions from `webui/static/stats-automations.js`.
+- Recommendation: completed as the next migration after `stats`. The import subtree now uses nested route paths, with `/import` redirecting to `/import/album` and `autoFilter` remaining in the search string; any remaining `import` references in `webui/static/stats-automations.js` belong to the broader automation feature set, not this page migration.
+- Route-local workflow state lives in `webui/src/routes/import/-import.store.ts`, which keeps drafts and queue state alive while moving between album, singles, and auto views.
 - Route plan: `webui/docs/migration/import-migration-plan.md`.
 
 ### Wave 2: Search split

From caa6534ee8b3b0537940c228af91188caab85ea2 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 24 May 2026 21:29:22 +0300
Subject: [PATCH 39/42] feat(import): show MusicBrainz variants

- pass release metadata through album search normalization
- surface release format, country, label, and disambiguation in React import cards
- add coverage for search normalization and import route rendering
---
 core/search/sources.py                        |  6 +++
 tests/search/test_search_sources.py           | 31 ++++++++++++++-
 webui/src/routes/import/-import.types.ts      | 10 +++++
 webui/src/routes/import/-route.test.tsx       | 19 +++++++++
 .../routes/import/-ui/album-import-tab.tsx    | 39 +++++++++++++++----
 .../routes/import/-ui/import-page.module.css  | 12 ++++++
 6 files changed, 109 insertions(+), 8 deletions(-)

diff --git a/core/search/sources.py b/core/search/sources.py
index e66b9eda..006bf8f0 100644
--- a/core/search/sources.py
+++ b/core/search/sources.py
@@ -56,6 +56,12 @@ def search_kind(client, query: str, kind: str, source_name: Optional[str] = None
                     "release_date": album.release_date,
                     "total_tracks": album.total_tracks,
                     "album_type": album.album_type,
+                    "format": getattr(album, "format", None),
+                    "country": getattr(album, "country", None),
+                    "status": getattr(album, "status", None),
+                    "label": getattr(album, "label", None),
+                    "disambiguation": getattr(album, "disambiguation", None),
+                    "release_group_id": getattr(album, "release_group_id", None),
                     "external_urls": album.external_urls or {},
                 })
         except Exception as e:
diff --git a/tests/search/test_search_sources.py b/tests/search/test_search_sources.py
index 48a93620..f6949027 100644
--- a/tests/search/test_search_sources.py
+++ b/tests/search/test_search_sources.py
@@ -19,7 +19,9 @@ class _Artist:
 
 class _Album:
     def __init__(self, id_, name, artists=None, image_url=None, release_date=None,
-                 total_tracks=10, album_type='album', external_urls=None):
+                 total_tracks=10, album_type='album', external_urls=None, format=None,
+                 country=None, status=None, label=None, disambiguation=None,
+                 release_group_id=None):
         self.id = id_
         self.name = name
         self.artists = artists or []
@@ -28,6 +30,12 @@ class _Album:
         self.total_tracks = total_tracks
         self.album_type = album_type
         self.external_urls = external_urls
+        self.format = format
+        self.country = country
+        self.status = status
+        self.label = label
+        self.disambiguation = disambiguation
+        self.release_group_id = release_group_id
 
 
 class _Track:
@@ -99,6 +107,27 @@ def test_search_kind_albums_handles_no_artists():
     assert result[0]['artist'] == 'Unknown Artist'
 
 
+def test_search_kind_albums_passthrough_release_metadata():
+    client = _Client(albums=[_Album(
+        'a1',
+        'Variant',
+        artists=['Artist'],
+        format='CD',
+        country='US',
+        status='Official',
+        label='Fixture Records',
+        disambiguation='clean',
+        release_group_id='rg-1',
+    )])
+    result = sources.search_kind(client, 'v', 'albums')
+    assert result[0]['format'] == 'CD'
+    assert result[0]['country'] == 'US'
+    assert result[0]['status'] == 'Official'
+    assert result[0]['label'] == 'Fixture Records'
+    assert result[0]['disambiguation'] == 'clean'
+    assert result[0]['release_group_id'] == 'rg-1'
+
+
 def test_search_kind_tracks_returns_full_shape():
     client = _Client(tracks=[_Track('t1', 'Money', artists=['Pink Floyd'], album='DSOTM',
                                     duration_ms=383000, image_url='m.jpg',
diff --git a/webui/src/routes/import/-import.types.ts b/webui/src/routes/import/-import.types.ts
index 7192336c..a6298593 100644
--- a/webui/src/routes/import/-import.types.ts
+++ b/webui/src/routes/import/-import.types.ts
@@ -58,6 +58,11 @@ export interface ImportAlbumResult {
   image_url?: string | null;
   total_tracks?: number | null;
   release_date?: string | null;
+  format?: string | null;
+  country?: string | null;
+  disambiguation?: string | null;
+  status?: string | null;
+  label?: string | null;
 }
 
 export interface ImportAlbumSearchPayload {
@@ -98,6 +103,11 @@ export interface ImportAlbum {
   image_url?: string | null;
   total_tracks?: number | null;
   release_date?: string | null;
+  format?: string | null;
+  country?: string | null;
+  disambiguation?: string | null;
+  status?: string | null;
+  label?: string | null;
 }
 
 export interface ImportAlbumTrack {
diff --git a/webui/src/routes/import/-route.test.tsx b/webui/src/routes/import/-route.test.tsx
index 679341c5..b8572b95 100644
--- a/webui/src/routes/import/-route.test.tsx
+++ b/webui/src/routes/import/-route.test.tsx
@@ -97,6 +97,11 @@ describe('import route', () => {
               source: 'deezer',
               total_tracks: 1,
               release_date: '2026-01-01',
+              format: 'CD',
+              country: 'US',
+              disambiguation: '25th Anniversary Edition',
+              status: 'official',
+              label: 'MusicBrainz',
             },
           ],
         });
@@ -113,6 +118,11 @@ describe('import route', () => {
               source: 'deezer',
               total_tracks: 1,
               release_date: '2026-01-01',
+              format: 'CD',
+              country: 'US',
+              disambiguation: '25th Anniversary Edition',
+              status: 'official',
+              label: 'MusicBrainz',
             },
           ],
         });
@@ -130,6 +140,11 @@ describe('import route', () => {
             source: 'deezer',
             total_tracks: 1,
             release_date: '2026-01-01',
+            format: 'CD',
+            country: 'US',
+            disambiguation: '25th Anniversary Edition',
+            status: 'official',
+            label: 'MusicBrainz',
           },
           matches: [
             {
@@ -196,6 +211,10 @@ describe('import route', () => {
     await waitFor(() => expect(screen.getByTestId('import-page')).toBeInTheDocument());
     expect(await screen.findByText('Import Music')).toBeInTheDocument();
     expect(screen.getByText('Import: /music/Staging')).toBeInTheDocument();
+    expect(
+      await screen.findByText('1 tracks · 2026 · CD · US · 25th Anniversary Edition'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('official · MusicBrainz')).toBeInTheDocument();
     expect(
       await screen.findByText('Showing Deezer results - not from your primary source (Spotify).'),
     ).toBeInTheDocument();
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
index 28602a3c..631907e6 100644
--- a/webui/src/routes/import/-ui/album-import-tab.tsx
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -216,6 +216,16 @@ function useAlbumImportViewModel() {
 
 type AlbumImportViewModel = ReturnType<typeof useAlbumImportViewModel>;
 
+type AlbumMetaFields = {
+  total_tracks?: number | null;
+  release_date?: string | null;
+  format?: string | null;
+  country?: string | null;
+  disambiguation?: string | null;
+  status?: string | null;
+  label?: string | null;
+};
+
 export function AlbumImportTab() {
   const viewModel = useAlbumImportViewModel();
 
@@ -394,6 +404,8 @@ function AlbumCard({
   onSelect: (album: ImportAlbumResult) => void;
 }) {
   const resultSourceBadge = getImportSourceBadgeText(album.source, lookupSource);
+  const metaParts = getAlbumMetaParts(album);
+  const detailParts = getAlbumDetailParts(album);
 
   return (
     <button type="button" className={styles.importPageAlbumCard} onClick={() => onSelect(album)}>
@@ -409,9 +421,10 @@ function AlbumCard({
       <div className={styles.importPageAlbumCardArtist} title={album.artist}>
         {album.artist}
       </div>
-      <div className={styles.importPageAlbumCardMeta}>
-        {album.total_tracks || 0} tracks · {album.release_date?.substring(0, 4) || ''}
-      </div>
+      <div className={styles.importPageAlbumCardMeta}>{metaParts.join(' · ')}</div>
+      {detailParts.length > 0 ? (
+        <div className={styles.importPageAlbumCardDetail}>{detailParts.join(' · ')}</div>
+      ) : null}
       {resultSourceBadge ? (
         <div className={styles.importPageAlbumCardSource}>{resultSourceBadge}</div>
       ) : null}
@@ -448,6 +461,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
     matchOverrides,
   );
   const matchedCount = effectiveMatches.length;
+  const heroMetaParts = albumMatch?.album ? getAlbumMetaParts(albumMatch.album) : [];
 
   return albumMatchLoading ? (
     <div className={styles.importPageEmptyState}>Matching files to tracklist...</div>
@@ -467,10 +481,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
         <div className={styles.importPageAlbumHeroInfo}>
           <div className={styles.importPageAlbumHeroTitle}>{albumMatch.album.name}</div>
           <div className={styles.importPageAlbumHeroArtist}>{albumMatch.album.artist}</div>
-          <div className={styles.importPageAlbumHeroMeta}>
-            {albumMatch.album.total_tracks || albumMatch.matches?.length || 0} tracks ·{' '}
-            {albumMatch.album.release_date?.substring(0, 4) || ''}
-          </div>
+          <div className={styles.importPageAlbumHeroMeta}>{heroMetaParts.join(' · ')}</div>
         </div>
       </div>
 
@@ -617,3 +628,17 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
     <div className={styles.importPageEmptyState}>Select an album to start matching files.</div>
   );
 }
+
+function getAlbumMetaParts(album: AlbumMetaFields) {
+  return [
+    `${album.total_tracks || 0} tracks`,
+    album.release_date?.substring(0, 4) || '',
+    album.format || '',
+    album.country || '',
+    album.disambiguation || '',
+  ].filter(Boolean);
+}
+
+function getAlbumDetailParts(album: AlbumMetaFields) {
+  return [album.status || '', album.label || ''].filter(Boolean);
+}
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 88cc6ff4..d7fd667d 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -235,6 +235,18 @@
   font-size: 10px;
   color: rgba(255, 255, 255, 0.3);
   margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.importPageAlbumCardDetail {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.36);
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .importPageAlbumCardSource {

From 0bea332aed379b03f64cec8b8f8eed683cfc3211 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 24 May 2026 13:59:44 -0700
Subject: [PATCH 40/42] Preserve album bundle track numbers

Keep album-bundle staging from replacing known per-track album numbers with the filename parser's default when staged files do not expose a real track number. Carry staging tag numbers through the cache, fall back to task metadata for private release staging, and cap hybrid album batches to one worker when Soulseek is first in the source order.
---
 core/downloads/staging.py                 | 44 +++++++++++++++++++----
 tests/downloads/test_downloads_staging.py | 43 ++++++++++++++++++++++
 web_server.py                             |  9 +++++
 3 files changed, 89 insertions(+), 7 deletions(-)

diff --git a/core/downloads/staging.py b/core/downloads/staging.py
index f7ca8906..d1d4e3c3 100644
--- a/core/downloads/staging.py
+++ b/core/downloads/staging.py
@@ -38,8 +38,6 @@ import re
 from dataclasses import dataclass
 from typing import Any, Callable
 
-from core.imports.filename import extract_track_number_from_filename
-
 # `shutil` and `SequenceMatcher` are imported inline inside try_staging_match()
 # to keep the lift byte-identical with the original web_server.py function body.
 
@@ -61,6 +59,25 @@ def _coerce_positive_int(value: Any, default: int = 0) -> int:
     return coerced if coerced > 0 else default
 
 
+def _extract_explicit_track_number(filename: str) -> int:
+    """Extract a track number only when the filename visibly carries one."""
+    basename = os.path.splitext(os.path.basename(str(filename or '')))[0].strip()
+    if not basename:
+        return 0
+
+    match = re.match(r"^\d[\-\.](\d{1,2})\s*[\-\.]\s*", basename)
+    if match:
+        num = int(match.group(1))
+        return num if 1 <= num <= 99 else 0
+
+    match = re.match(r"^\(?(\d{1,3})\)?\s*[\-\.)\]]\s*", basename)
+    if match:
+        num = int(match.group(1))
+        return num if 1 <= num <= 999 else 0
+
+    return 0
+
+
 def _staging_title_variants(title: Any, normalize: Callable[[str], str]) -> list[str]:
     """Return conservative title variants for release-file matching.
 
@@ -320,12 +337,24 @@ def try_staging_match(task_id, batch_id, track, deps: StagingDeps):
 
         file_track_number = (
             _coerce_positive_int(best_match.get('track_number'), 0) or
-            extract_track_number_from_filename(best_match.get('full_path', ''))
+            _extract_explicit_track_number(best_match.get('full_path', ''))
         )
-        file_disc_number = _coerce_positive_int(best_match.get('disc_number'), 1)
+        file_disc_number = _coerce_positive_int(best_match.get('disc_number'), 0)
         if _private_album_bundle_staging:
-            track_number = file_track_number
-            disc_number = file_disc_number
+            track_number = (
+                file_track_number or
+                _coerce_positive_int(track_info.get('track_number'), 0) or
+                _coerce_positive_int(track_info.get('trackNumber'), 0) or
+                _coerce_positive_int(getattr(track, 'track_number', 0), 0) or
+                1
+            )
+            disc_number = (
+                file_disc_number or
+                _coerce_positive_int(track_info.get('disc_number'), 0) or
+                _coerce_positive_int(track_info.get('discNumber'), 0) or
+                _coerce_positive_int(getattr(track, 'disc_number', 0), 0) or
+                1
+            )
         else:
             track_number = (
                 _coerce_positive_int(track_info.get('track_number'), 0) or
@@ -337,7 +366,8 @@ def try_staging_match(task_id, batch_id, track, deps: StagingDeps):
                 _coerce_positive_int(track_info.get('disc_number'), 0) or
                 _coerce_positive_int(track_info.get('discNumber'), 0) or
                 _coerce_positive_int(getattr(track, 'disc_number', 0), 0) or
-                file_disc_number
+                file_disc_number or
+                1
             )
         track_info['track_number'] = track_number
         track_info['disc_number'] = disc_number
diff --git a/tests/downloads/test_downloads_staging.py b/tests/downloads/test_downloads_staging.py
index 70e86b6b..097c3323 100644
--- a/tests/downloads/test_downloads_staging.py
+++ b/tests/downloads/test_downloads_staging.py
@@ -357,6 +357,49 @@ def test_private_album_bundle_staging_overrides_default_track_info_number(tmp_pa
     assert ctx['original_search_result']['filename'] == str(src_file)
 
 
+def test_private_album_bundle_staging_keeps_task_number_when_file_has_no_number(tmp_path):
+    """Private release staging must not turn every unnumbered release file into track 1."""
+    src_file = tmp_path / 'staging' / 'Katy Perry - Firework.flac'
+    src_file.parent.mkdir()
+    src_file.touch()
+
+    def get_batch_field(_batch_id, field):
+        if field == 'album_bundle_source':
+            return 'soulseek'
+        if field == 'album_bundle_private_staging':
+            return True
+        return None
+
+    deps = _build_deps(
+        transfer_path=str(tmp_path / 'transfer'),
+        staging_files=[
+            {
+                'full_path': str(src_file),
+                'title': 'Firework',
+                'artist': 'Katy Perry',
+            },
+        ],
+        get_batch_field=get_batch_field,
+    )
+    _seed_task('t6d', track_info={
+        '_is_explicit_album_download': True,
+        '_explicit_album_context': {'id': 'alb', 'name': 'Teenage Dream: The Complete Confection'},
+        '_explicit_artist_context': {'id': 'art', 'name': 'Katy Perry'},
+        'track_number': 4,
+        'disc_number': 1,
+    })
+
+    ds.try_staging_match(
+        't6d', 'b1',
+        _Track(name='Firework', artists=['Katy Perry']),
+        deps,
+    )
+
+    ctx = matched_downloads_context['staging_t6d']
+    assert ctx['track_info']['track_number'] == 4
+    assert ctx['original_search_result']['track_number'] == 4
+
+
 def test_staging_title_match_accepts_feature_suffix_from_release_file(tmp_path):
     """Album releases can include featured artists in filenames."""
     src_file = tmp_path / 'staging' / '05-kendrick_lamar-money_trees_(feat._jay_rock).flac'
diff --git a/web_server.py b/web_server.py
index 993cda4a..de2344c9 100644
--- a/web_server.py
+++ b/web_server.py
@@ -1068,6 +1068,13 @@ def _get_batch_max_concurrent(is_album=False, source=None):
         mode = config_manager.get('download_source.mode', 'soulseek')
         if mode == 'soulseek':
             return 1
+        if mode == 'hybrid':
+            hybrid_order = config_manager.get('download_source.hybrid_order', []) or []
+            if isinstance(hybrid_order, str):
+                hybrid_order = [hybrid_order]
+            first_source = next((str(s).strip().lower() for s in hybrid_order if str(s).strip()), '')
+            if first_source == 'soulseek':
+                return 1
     return _get_max_concurrent()
 
 # --- Session Download Statistics ---
@@ -16531,6 +16538,8 @@ def _get_staging_file_cache(batch_id):
                 'title': meta['title'] or '',
                 'artist': meta['albumartist'] or meta['artist'] or '',
                 'album': meta['album'] or '',
+                'track_number': meta.get('track_number'),
+                'disc_number': meta.get('disc_number'),
                 'extension': ext,
             })
 

From 28641403d97e20e322eef08261b3fe2d55387987 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 24 May 2026 14:47:29 -0700
Subject: [PATCH 41/42] Fix Zustand shallow import

Use Zustand's public shallow selector export so the import page resolves correctly under the installed Zustand 5 package. This fixes the Vite boot overlay without changing import workflow behavior.
---
 webui/src/routes/import/-import.store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webui/src/routes/import/-import.store.ts b/webui/src/routes/import/-import.store.ts
index f6bb892b..4724889b 100644
--- a/webui/src/routes/import/-import.store.ts
+++ b/webui/src/routes/import/-import.store.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { combine } from 'zustand/middleware';
-import { useShallow } from 'zustand/react/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import type {
   ImportAlbumMatchPayload,

From 28922ad2c1768910920e4a6ddf290bb08db775a9 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 24 May 2026 14:56:34 -0700
Subject: [PATCH 42/42] Cap persistent download history response

Stop appending persistent download history once the unified downloads payload reaches the requested limit. This keeps the Downloads tab history tail bounded even if the history provider returns more rows than requested, while preserving existing live-task total behavior.
---
 core/downloads/status.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/core/downloads/status.py b/core/downloads/status.py
index 37ae441d..7f2230bd 100644
--- a/core/downloads/status.py
+++ b/core/downloads/status.py
@@ -703,13 +703,17 @@ def build_unified_downloads_response(limit: int, deps: StatusDeps) -> dict:
             logger.debug("[Downloads] persistent history lookup failed: %s", exc)
             history_entries = []
 
+        appended_history = 0
         for entry in history_entries:
+            if len(items) >= limit or appended_history >= history_limit:
+                break
             item = _build_history_download_item(entry)
             identity = _download_identity(item.get('title'), item.get('artist'), item.get('album'))
             if identity in live_identities:
                 continue
             items.append(item)
             live_identities.add(identity)
+            appended_history += 1
 
     # Sort: active first (by priority), then by timestamp desc within each group
     items.sort(key=lambda x: (x['priority'], -x['timestamp']))