diff --git a/src/components/deviceSync/DeviceSyncBrowserPanel.tsx b/src/components/deviceSync/DeviceSyncBrowserPanel.tsx
new file mode 100644
index 00000000..38000ce5
--- /dev/null
+++ b/src/components/deviceSync/DeviceSyncBrowserPanel.tsx
@@ -0,0 +1,128 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ChevronDown, ChevronRight, Disc3, ListMusic,
+  Loader2, Shuffle, Users, Zap,
+} from 'lucide-react';
+import type {
+  SubsonicAlbum, SubsonicArtist, SubsonicPlaylist,
+} from '../../api/subsonicTypes';
+import type { DeviceSyncSource } from '../../store/deviceSyncStore';
+import type { SourceTab } from '../../utils/deviceSyncHelpers';
+import BrowserRow from './BrowserRow';
+
+interface Props {
+  activeTab: SourceTab;
+  setActiveTab: (t: SourceTab) => void;
+  search: string;
+  setSearch: (v: string) => void;
+  playlists: SubsonicPlaylist[];
+  randomAlbums: SubsonicAlbum[];
+  albumSearchResults: SubsonicAlbum[];
+  albumSearchLoading: boolean;
+  artists: SubsonicArtist[];
+  loadingBrowser: boolean;
+  expandedArtistIds: Set<string>;
+  artistAlbumsMap: Map<string, SubsonicAlbum[]>;
+  loadingArtistIds: Set<string>;
+  toggleArtistExpand: (artistId: string) => Promise<void>;
+  sources: DeviceSyncSource[];
+  pendingDeletion: string[];
+  handleToggleSource: (source: DeviceSyncSource) => void;
+}
+
+export default function DeviceSyncBrowserPanel({
+  activeTab, setActiveTab, search, setSearch,
+  playlists, randomAlbums, albumSearchResults, albumSearchLoading,
+  artists, loadingBrowser,
+  expandedArtistIds, artistAlbumsMap, loadingArtistIds, toggleArtistExpand,
+  sources, pendingDeletion, handleToggleSource,
+}: Props) {
+  const { t } = useTranslation();
+
+  const tabs: { key: SourceTab; icon: React.ReactNode; label: string }[] = [
+    { key: 'playlists', icon: <ListMusic size={14} />, label: t('deviceSync.tabPlaylists') },
+    { key: 'albums',    icon: <Disc3 size={14} />,     label: t('deviceSync.tabAlbums') },
+    { key: 'artists',   icon: <Users size={14} />,     label: t('deviceSync.tabArtists') },
+  ];
+
+  const q = search.toLowerCase();
+  const filteredPlaylists = useMemo(() => playlists.filter(p => p.name.toLowerCase().includes(q)), [playlists, q]);
+  const filteredArtists   = useMemo(() => artists.filter(a => a.name.toLowerCase().includes(q)), [artists, q]);
+
+  return (
+    <div className="device-sync-browser">
+      <div className="device-sync-tabs">
+        {tabs.map(tab => (
+          <button
+            key={tab.key}
+            className={`device-sync-tab${activeTab === tab.key ? ' active' : ''}`}
+            onClick={() => setActiveTab(tab.key)}
+          >
+            {tab.icon}{tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="device-sync-search-wrap">
+        <input
+          className="input"
+          placeholder={t('deviceSync.searchPlaceholder')}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+        {activeTab === 'albums' && (
+          <span className="device-sync-live-badge">
+            <Zap size={10} />{t('deviceSync.liveSearch')}
+          </span>
+        )}
+      </div>
+      <div className="device-sync-list">
+        {(loadingBrowser || albumSearchLoading) && (
+          <div className="device-sync-loading"><Loader2 size={16} className="spin" /></div>
+        )}
+        {activeTab === 'albums' && !search.trim() && !loadingBrowser && randomAlbums.length > 0 && (
+          <div className="device-sync-section-label">
+            <Shuffle size={11} />{t('deviceSync.randomAlbumsLabel')}
+          </div>
+        )}
+        {activeTab === 'playlists' && filteredPlaylists.map(pl => (
+          <BrowserRow key={pl.id} name={pl.name} meta={`${pl.songCount} tracks`}
+            selected={sources.some(s => s.id === pl.id) && !pendingDeletion.includes(pl.id)}
+            onToggle={() => handleToggleSource({ type: 'playlist', id: pl.id, name: pl.name })} />
+        ))}
+        {activeTab === 'albums' && (search.trim() ? albumSearchResults : randomAlbums).map(al => (
+          <BrowserRow key={al.id} name={al.name} meta={al.artist}
+            selected={sources.some(s => s.id === al.id) && !pendingDeletion.includes(al.id)}
+            onToggle={() => handleToggleSource({ type: 'album', id: al.id, name: al.name, artist: al.artist })} />
+        ))}
+        {activeTab === 'artists' && filteredArtists.map(ar => (
+          <React.Fragment key={ar.id}>
+            <div className="device-sync-artist-row">
+              <button
+                className="device-sync-expand-btn"
+                onClick={() => toggleArtistExpand(ar.id)}
+              >
+                {loadingArtistIds.has(ar.id)
+                  ? <Loader2 size={13} className="spin" />
+                  : expandedArtistIds.has(ar.id)
+                    ? <ChevronDown size={13} />
+                    : <ChevronRight size={13} />}
+              </button>
+              <span className="device-sync-row-name">{ar.name}</span>
+              {ar.albumCount != null &&
+                <span className="device-sync-row-meta">{ar.albumCount} Albums</span>}
+            </div>
+            {expandedArtistIds.has(ar.id) && artistAlbumsMap.has(ar.id) &&
+              artistAlbumsMap.get(ar.id)!.map(al => (
+                <BrowserRow key={al.id} name={al.name} meta={al.year?.toString()}
+                  selected={sources.some(s => s.id === al.id) && !pendingDeletion.includes(al.id)}
+                  indent
+                  onToggle={() => handleToggleSource({ type: 'album', id: al.id, name: al.name, artist: al.artist || ar.name })} />
+              ))
+            }
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/deviceSync/DeviceSyncDevicePanel.tsx b/src/components/deviceSync/DeviceSyncDevicePanel.tsx
new file mode 100644
index 00000000..bb9d4476
--- /dev/null
+++ b/src/components/deviceSync/DeviceSyncDevicePanel.tsx
@@ -0,0 +1,237 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { invoke } from '@tauri-apps/api/core';
+import {
+  AlertCircle, CheckCircle2, Clock, HardDriveUpload, Loader2,
+  Trash2, Undo2,
+} from 'lucide-react';
+import { useDeviceSyncJobStore } from '../../store/deviceSyncJobStore';
+import type { DeviceSyncSource } from '../../store/deviceSyncStore';
+import type { SyncStatus } from '../../utils/deviceSyncHelpers';
+
+interface Props {
+  sources: DeviceSyncSource[];
+  sourceStatuses: Map<string, SyncStatus>;
+  driveDetected: boolean;
+  scanning: boolean;
+  checkedIds: string[];
+  toggleChecked: (id: string) => void;
+  allChecked: boolean;
+  toggleAll: () => void;
+  syncedCount: number;
+  pendingCount: number;
+  deletionCount: number;
+  isRunning: boolean;
+  actionButtonLabel: string;
+  actionButtonDisabled: boolean;
+  promptSyncSummary: () => Promise<void>;
+  handleMarkCheckedForDeletion: () => void;
+  handleToggleSource: (source: DeviceSyncSource) => void;
+  markForDeletion: (ids: string[]) => void;
+  unmarkDeletion: (id: string) => void;
+  jobStatus: string;
+  jobDone: number;
+  jobSkip: number;
+  jobFail: number;
+  jobTotal: number;
+}
+
+export default function DeviceSyncDevicePanel({
+  sources, sourceStatuses, driveDetected, scanning,
+  checkedIds, toggleChecked, allChecked, toggleAll,
+  syncedCount, pendingCount, deletionCount,
+  isRunning, actionButtonLabel, actionButtonDisabled,
+  promptSyncSummary, handleMarkCheckedForDeletion, handleToggleSource,
+  markForDeletion, unmarkDeletion,
+  jobStatus, jobDone, jobSkip, jobFail, jobTotal,
+}: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="device-sync-device-panel">
+      <div className="device-sync-panel-header">
+        <span className="device-sync-panel-title">
+          {t('deviceSync.onDevice')}
+          {scanning && <Loader2 size={12} className="spin" style={{ marginLeft: 6 }} />}
+        </span>
+        <div className="device-sync-panel-actions">
+          {/* Sync button */}
+          <button
+            className="btn btn-surface"
+            onClick={promptSyncSummary}
+            disabled={actionButtonDisabled}
+          >
+            {isRunning
+              ? <><Loader2 size={13} className="spin" /> {jobDone + jobSkip + jobFail}/{jobTotal}</>
+              : <>
+                  {deletionCount > 0 && pendingCount === 0
+                    ? <Trash2 size={13} />
+                    : <HardDriveUpload size={13} />}
+                  {actionButtonLabel}
+                </>
+            }
+          </button>
+
+          {/* Mark for deletion */}
+          {checkedIds.length > 0 && !isRunning && (
+            <button
+              className="btn btn-danger"
+              onClick={handleMarkCheckedForDeletion}
+            >
+              <Trash2 size={13} />
+              {t('deviceSync.deleteFromDevice', { count: checkedIds.length })}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Status summary badges */}
+      {sources.length > 0 && driveDetected && (
+        <div className="device-sync-status-summary">
+          {syncedCount > 0 && (
+            <span className="device-sync-badge synced">
+              <CheckCircle2 size={11} /> {syncedCount} {t('deviceSync.statusSynced')}
+            </span>
+          )}
+          {pendingCount > 0 && (
+            <span className="device-sync-badge pending">
+              <Clock size={11} /> {pendingCount} {t('deviceSync.statusPending')}
+            </span>
+          )}
+          {deletionCount > 0 && (
+            <span className="device-sync-badge deletion">
+              <Trash2 size={11} /> {deletionCount} {t('deviceSync.statusDeletion')}
+            </span>
+          )}
+        </div>
+      )}
+
+      {sources.length === 0 || !driveDetected ? (
+        <p className="device-sync-empty">{t('deviceSync.noSourcesSelected')}</p>
+      ) : (
+        <>
+          <div className="device-sync-list-header">
+            <label className="device-sync-check-label">
+              <input type="checkbox" checked={allChecked} onChange={toggleAll} />
+            </label>
+            <span className="device-sync-list-col-name">{t('deviceSync.colName')}</span>
+            <span className="device-sync-list-col-type">{t('deviceSync.colType')}</span>
+            <span className="device-sync-list-col-status">{t('deviceSync.colStatus')}</span>
+            <span className="device-sync-list-col-actions" />
+          </div>
+          <div className="device-sync-device-list">
+            {sources.map(s => {
+              const status = sourceStatuses.get(s.id) ?? 'pending';
+              return (
+                <label
+                  key={s.id}
+                  className={`device-sync-device-row ${status}${checkedIds.includes(s.id) ? ' checked' : ''}`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={checkedIds.includes(s.id)}
+                    onChange={() => toggleChecked(s.id)}
+                    disabled={status === 'deletion'}
+                  />
+                  <span className="device-sync-row-name">
+                    {s.name}
+                    {s.artist && <span className="device-sync-row-artist"> · {s.artist}</span>}
+                  </span>
+                  <span className="device-sync-source-type">{s.type}</span>
+                  <span className={`device-sync-status-icon ${status}`}>
+                    {status === 'synced'   && <CheckCircle2 size={13} />}
+                    {status === 'pending'  && <Clock size={13} />}
+                    {status === 'deletion' && <Trash2 size={13} />}
+                  </span>
+                  <span className="device-sync-row-actions">
+                    {status === 'synced' && (
+                      <button
+                        className="device-sync-action-btn danger"
+                        onClick={e => { e.preventDefault(); markForDeletion([s.id]); }}
+                        data-tooltip={t('deviceSync.markForDeletion')}
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                    )}
+                    {status === 'pending' && (
+                      <button
+                        className="device-sync-action-btn muted"
+                        onClick={e => { e.preventDefault(); handleToggleSource(s); }}
+                        data-tooltip={t('deviceSync.removeSource')}
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                    )}
+                    {status === 'deletion' && (
+                      <button
+                        className="device-sync-action-btn undo"
+                        onClick={e => { e.preventDefault(); unmarkDeletion(s.id); }}
+                        data-tooltip={t('deviceSync.undoDeletion')}
+                      >
+                        <Undo2 size={12} />
+                      </button>
+                    )}
+                  </span>
+                </label>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {/* Background sync progress (non-blocking) */}
+      {jobStatus === 'running' && (
+        <div className="device-sync-bg-progress">
+          <div className="device-sync-bg-progress-bar-wrap">
+            <div
+              className="device-sync-bg-progress-bar"
+              style={{ width: jobTotal > 0
+                ? `${((jobDone + jobSkip + jobFail) / jobTotal) * 100}%`
+                : '0%' }}
+            />
+          </div>
+          <span className="device-sync-bg-progress-text">
+            <Loader2 size={12} className="spin" />
+            {t('deviceSync.syncInProgress', { done: jobDone + jobSkip, total: jobTotal })}
+            {jobFail > 0 && <span className="device-sync-stat-error"><AlertCircle size={11} /> {jobFail}</span>}
+          </span>
+          <button
+            className="btn btn-ghost"
+            style={{ fontSize: 12, padding: '2px 10px' }}
+            onClick={() => {
+              const jobId = useDeviceSyncJobStore.getState().jobId;
+              if (jobId) invoke('cancel_device_sync', { jobId });
+              useDeviceSyncJobStore.getState().cancel();
+            }}
+          >
+            {t('deviceSync.cancelSync')}
+          </button>
+        </div>
+      )}
+
+      {jobStatus === 'cancelled' && (
+        <div className="device-sync-bg-progress done">
+          <span className="device-sync-bg-progress-text">
+            <AlertCircle size={12} style={{ color: 'var(--text-muted)' }} />
+            {t('deviceSync.syncCancelled', { done: jobDone, total: jobTotal })}
+          </span>
+          <button className="btn btn-ghost" onClick={() => useDeviceSyncJobStore.getState().reset()}>
+            {t('deviceSync.dismiss')}
+          </button>
+        </div>
+      )}
+
+      {jobStatus === 'done' && (
+        <div className="device-sync-bg-progress done">
+          <span className="device-sync-bg-progress-text">
+            <CheckCircle2 size={12} className="color-success" />
+            {t('deviceSync.syncResult', { done: jobDone, skipped: jobSkip, total: jobTotal })}
+          </span>
+          <button className="btn btn-ghost" onClick={() => useDeviceSyncJobStore.getState().reset()}>
+            {t('deviceSync.dismiss')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/DeviceSync.tsx b/src/pages/DeviceSync.tsx
index 2b5aa12d..07efca09 100644
--- a/src/pages/DeviceSync.tsx
+++ b/src/pages/DeviceSync.tsx
@@ -1,7 +1,6 @@
 import { buildDownloadUrl } from '../api/subsonicStreamUrl';
 import type { SubsonicSong } from '../api/subsonicTypes';
 import React, { useState, useCallback, useMemo } from 'react';
-import { invoke } from '@tauri-apps/api/core';
 import {
   HardDriveUpload, Loader2,
   ListMusic, Disc3, Users, CheckCircle2, AlertCircle, Clock,
@@ -18,7 +17,6 @@ import {
   formatBytes,
   type SourceTab,
 } from '../utils/deviceSyncHelpers';
-import BrowserRow from '../components/deviceSync/BrowserRow';
 import { useDeviceSyncDrives } from '../hooks/useDeviceSyncDrives';
 import { useDeviceSyncSourceStatuses } from '../hooks/useDeviceSyncSourceStatuses';
 import { useDeviceSyncBrowser } from '../hooks/useDeviceSyncBrowser';
@@ -38,6 +36,8 @@ import { runDeviceSyncChooseFolder } from '../utils/runDeviceSyncChooseFolder';
 import DeviceSyncHeader from '../components/deviceSync/DeviceSyncHeader';
 import DeviceSyncPreSyncModal from '../components/deviceSync/DeviceSyncPreSyncModal';
 import DeviceSyncMigrationModal from '../components/deviceSync/DeviceSyncMigrationModal';
+import DeviceSyncBrowserPanel from '../components/deviceSync/DeviceSyncBrowserPanel';
+import DeviceSyncDevicePanel from '../components/deviceSync/DeviceSyncDevicePanel';
 
 // ─── component ───────────────────────────────────────────────────────────────
 
@@ -130,10 +130,6 @@ export default function DeviceSync() {
     toggleArtistExpand,
   } = useDeviceSyncBrowser(activeTab, search, () => setSearch(''));
 
-  const q                 = search.toLowerCase();
-  const filteredPlaylists = useMemo(() => playlists.filter(p => p.name.toLowerCase().includes(q)), [playlists, q]);
-  const filteredArtists   = useMemo(() => artists.filter(a => a.name.toLowerCase().includes(q)), [artists, q]);
-
   // ─── Migration handlers ─────────────────────────────────────────────────
 
   const startMigrationPreview = () => runDeviceSyncMigrationPreview({
@@ -223,268 +219,52 @@ export default function DeviceSync() {
       {/* ── Main ── */}
       <div className="device-sync-main">
 
-        {/* ── Browser (left) ── */}
-        <div className="device-sync-browser">
-            <div className="device-sync-tabs">
-              {tabs.map(tab => (
-                <button
-                  key={tab.key}
-                  className={`device-sync-tab${activeTab === tab.key ? ' active' : ''}`}
-                  onClick={() => setActiveTab(tab.key)}
-                >
-                  {tab.icon}{tab.label}
-                </button>
-              ))}
-            </div>
-            <div className="device-sync-search-wrap">
-              <input
-                className="input"
-                placeholder={t('deviceSync.searchPlaceholder')}
-                value={search}
-                onChange={e => setSearch(e.target.value)}
-              />
-              {activeTab === 'albums' && (
-                <span className="device-sync-live-badge">
-                  <Zap size={10} />{t('deviceSync.liveSearch')}
-                </span>
-              )}
-            </div>
-            <div className="device-sync-list">
-              {(loadingBrowser || albumSearchLoading) && (
-                <div className="device-sync-loading"><Loader2 size={16} className="spin" /></div>
-              )}
-              {activeTab === 'albums' && !search.trim() && !loadingBrowser && randomAlbums.length > 0 && (
-                <div className="device-sync-section-label">
-                  <Shuffle size={11} />{t('deviceSync.randomAlbumsLabel')}
-                </div>
-              )}
-              {activeTab === 'playlists' && filteredPlaylists.map(pl => (
-                <BrowserRow key={pl.id} name={pl.name} meta={`${pl.songCount} tracks`}
-                  selected={sources.some(s => s.id === pl.id) && !pendingDeletion.includes(pl.id)}
-                  onToggle={() => handleToggleSource({ type: 'playlist', id: pl.id, name: pl.name })} />
-              ))}
-              {activeTab === 'albums' && (search.trim() ? albumSearchResults : randomAlbums).map(al => (
-                <BrowserRow key={al.id} name={al.name} meta={al.artist}
-                  selected={sources.some(s => s.id === al.id) && !pendingDeletion.includes(al.id)}
-                  onToggle={() => handleToggleSource({ type: 'album', id: al.id, name: al.name, artist: al.artist })} />
-              ))}
-              {activeTab === 'artists' && filteredArtists.map(ar => (
-                <React.Fragment key={ar.id}>
-                  <div className="device-sync-artist-row">
-                    <button
-                      className="device-sync-expand-btn"
-                      onClick={() => toggleArtistExpand(ar.id)}
-                    >
-                      {loadingArtistIds.has(ar.id)
-                        ? <Loader2 size={13} className="spin" />
-                        : expandedArtistIds.has(ar.id)
-                          ? <ChevronDown size={13} />
-                          : <ChevronRight size={13} />}
-                    </button>
-                    <span className="device-sync-row-name">{ar.name}</span>
-                    {ar.albumCount != null &&
-                      <span className="device-sync-row-meta">{ar.albumCount} Albums</span>}
-                  </div>
-                  {expandedArtistIds.has(ar.id) && artistAlbumsMap.has(ar.id) &&
-                    artistAlbumsMap.get(ar.id)!.map(al => (
-                      <BrowserRow key={al.id} name={al.name} meta={al.year?.toString()}
-                        selected={sources.some(s => s.id === al.id) && !pendingDeletion.includes(al.id)}
-                        indent
-                        onToggle={() => handleToggleSource({ type: 'album', id: al.id, name: al.name, artist: al.artist || ar.name })} />
-                    ))
-                  }
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
+        <DeviceSyncBrowserPanel
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          search={search}
+          setSearch={setSearch}
+          playlists={playlists}
+          randomAlbums={randomAlbums}
+          albumSearchResults={albumSearchResults}
+          albumSearchLoading={albumSearchLoading}
+          artists={artists}
+          loadingBrowser={loadingBrowser}
+          expandedArtistIds={expandedArtistIds}
+          artistAlbumsMap={artistAlbumsMap}
+          loadingArtistIds={loadingArtistIds}
+          toggleArtistExpand={toggleArtistExpand}
+          sources={sources}
+          pendingDeletion={pendingDeletion}
+          handleToggleSource={handleToggleSource}
+        />
 
-        {/* ── Device Manager (right) ── */}
-        <div className="device-sync-device-panel">
-          <div className="device-sync-panel-header">
-            <span className="device-sync-panel-title">
-              {t('deviceSync.onDevice')}
-              {scanning && <Loader2 size={12} className="spin" style={{ marginLeft: 6 }} />}
-            </span>
-            <div className="device-sync-panel-actions">
-              {/* Sync button */}
-              <button
-                className="btn btn-surface"
-                onClick={promptSyncSummary}
-                disabled={actionButtonDisabled}
-              >
-                {isRunning
-                  ? <><Loader2 size={13} className="spin" /> {jobDone + jobSkip + jobFail}/{jobTotal}</>
-                  : <>
-                      {deletionCount > 0 && pendingCount === 0
-                        ? <Trash2 size={13} />
-                        : <HardDriveUpload size={13} />}
-                      {actionButtonLabel}
-                    </>
-                }
-              </button>
-
-              {/* Mark for deletion */}
-              {checkedIds.length > 0 && !isRunning && (
-                <button
-                  className="btn btn-danger"
-                  onClick={handleMarkCheckedForDeletion}
-                >
-                  <Trash2 size={13} />
-                  {t('deviceSync.deleteFromDevice', { count: checkedIds.length })}
-                </button>
-              )}
-            </div>
-          </div>
-
-          {/* Status summary badges */}
-          {sources.length > 0 && driveDetected && (
-            <div className="device-sync-status-summary">
-              {syncedCount > 0 && (
-                <span className="device-sync-badge synced">
-                  <CheckCircle2 size={11} /> {syncedCount} {t('deviceSync.statusSynced')}
-                </span>
-              )}
-              {pendingCount > 0 && (
-                <span className="device-sync-badge pending">
-                  <Clock size={11} /> {pendingCount} {t('deviceSync.statusPending')}
-                </span>
-              )}
-              {deletionCount > 0 && (
-                <span className="device-sync-badge deletion">
-                  <Trash2 size={11} /> {deletionCount} {t('deviceSync.statusDeletion')}
-                </span>
-              )}
-            </div>
-          )}
-
-          {sources.length === 0 || !driveDetected ? (
-            <p className="device-sync-empty">{t('deviceSync.noSourcesSelected')}</p>
-          ) : (
-            <>
-              <div className="device-sync-list-header">
-                <label className="device-sync-check-label">
-                  <input type="checkbox" checked={allChecked} onChange={toggleAll} />
-                </label>
-                <span className="device-sync-list-col-name">{t('deviceSync.colName')}</span>
-                <span className="device-sync-list-col-type">{t('deviceSync.colType')}</span>
-                <span className="device-sync-list-col-status">{t('deviceSync.colStatus')}</span>
-                <span className="device-sync-list-col-actions" />
-              </div>
-              <div className="device-sync-device-list">
-                {sources.map(s => {
-                  const status = sourceStatuses.get(s.id) ?? 'pending';
-                  return (
-                    <label
-                      key={s.id}
-                      className={`device-sync-device-row ${status}${checkedIds.includes(s.id) ? ' checked' : ''}`}
-                    >
-                      <input
-                        type="checkbox"
-                        checked={checkedIds.includes(s.id)}
-                        onChange={() => toggleChecked(s.id)}
-                        disabled={status === 'deletion'}
-                      />
-                      <span className="device-sync-row-name">
-                        {s.name}
-                        {s.artist && <span className="device-sync-row-artist"> · {s.artist}</span>}
-                      </span>
-                      <span className="device-sync-source-type">{s.type}</span>
-                      <span className={`device-sync-status-icon ${status}`}>
-                        {status === 'synced'   && <CheckCircle2 size={13} />}
-                        {status === 'pending'  && <Clock size={13} />}
-                        {status === 'deletion' && <Trash2 size={13} />}
-                      </span>
-                      <span className="device-sync-row-actions">
-                        {status === 'synced' && (
-                          <button
-                            className="device-sync-action-btn danger"
-                            onClick={e => { e.preventDefault(); markForDeletion([s.id]); }}
-                            data-tooltip={t('deviceSync.markForDeletion')}
-                          >
-                            <Trash2 size={12} />
-                          </button>
-                        )}
-                        {status === 'pending' && (
-                          <button
-                            className="device-sync-action-btn muted"
-                            onClick={e => { e.preventDefault(); handleToggleSource(s); }}
-                            data-tooltip={t('deviceSync.removeSource')}
-                          >
-                            <Trash2 size={12} />
-                          </button>
-                        )}
-                        {status === 'deletion' && (
-                          <button
-                            className="device-sync-action-btn undo"
-                            onClick={e => { e.preventDefault(); unmarkDeletion(s.id); }}
-                            data-tooltip={t('deviceSync.undoDeletion')}
-                          >
-                            <Undo2 size={12} />
-                          </button>
-                        )}
-                      </span>
-                    </label>
-                  );
-                })}
-              </div>
-            </>
-          )}
-
-          {/* Background sync progress (non-blocking) */}
-          {jobStatus === 'running' && (
-            <div className="device-sync-bg-progress">
-              <div className="device-sync-bg-progress-bar-wrap">
-                <div
-                  className="device-sync-bg-progress-bar"
-                  style={{ width: jobTotal > 0
-                    ? `${((jobDone + jobSkip + jobFail) / jobTotal) * 100}%`
-                    : '0%' }}
-                />
-              </div>
-              <span className="device-sync-bg-progress-text">
-                <Loader2 size={12} className="spin" />
-                {t('deviceSync.syncInProgress', { done: jobDone + jobSkip, total: jobTotal })}
-                {jobFail > 0 && <span className="device-sync-stat-error"><AlertCircle size={11} /> {jobFail}</span>}
-              </span>
-              <button
-                className="btn btn-ghost"
-                style={{ fontSize: 12, padding: '2px 10px' }}
-                onClick={() => {
-                  const jobId = useDeviceSyncJobStore.getState().jobId;
-                  if (jobId) invoke('cancel_device_sync', { jobId });
-                  useDeviceSyncJobStore.getState().cancel();
-                }}
-              >
-                {t('deviceSync.cancelSync')}
-              </button>
-            </div>
-          )}
-
-          {jobStatus === 'cancelled' && (
-            <div className="device-sync-bg-progress done">
-              <span className="device-sync-bg-progress-text">
-                <AlertCircle size={12} style={{ color: 'var(--text-muted)' }} />
-                {t('deviceSync.syncCancelled', { done: jobDone, total: jobTotal })}
-              </span>
-              <button className="btn btn-ghost" onClick={() => useDeviceSyncJobStore.getState().reset()}>
-                {t('deviceSync.dismiss')}
-              </button>
-            </div>
-          )}
-
-          {jobStatus === 'done' && (
-            <div className="device-sync-bg-progress done">
-              <span className="device-sync-bg-progress-text">
-                <CheckCircle2 size={12} className="color-success" />
-                {t('deviceSync.syncResult', { done: jobDone, skipped: jobSkip, total: jobTotal })}
-              </span>
-              <button className="btn btn-ghost" onClick={() => useDeviceSyncJobStore.getState().reset()}>
-                {t('deviceSync.dismiss')}
-              </button>
-            </div>
-          )}
-
-        </div>
+        <DeviceSyncDevicePanel
+          sources={sources}
+          sourceStatuses={sourceStatuses}
+          driveDetected={driveDetected}
+          scanning={scanning}
+          checkedIds={checkedIds}
+          toggleChecked={toggleChecked}
+          allChecked={allChecked}
+          toggleAll={toggleAll}
+          syncedCount={syncedCount}
+          pendingCount={pendingCount}
+          deletionCount={deletionCount}
+          isRunning={isRunning}
+          actionButtonLabel={actionButtonLabel}
+          actionButtonDisabled={actionButtonDisabled}
+          promptSyncSummary={promptSyncSummary}
+          handleMarkCheckedForDeletion={handleMarkCheckedForDeletion}
+          handleToggleSource={handleToggleSource}
+          markForDeletion={markForDeletion}
+          unmarkDeletion={unmarkDeletion}
+          jobStatus={jobStatus}
+          jobDone={jobDone}
+          jobSkip={jobSkip}
+          jobFail={jobFail}
+          jobTotal={jobTotal}
+        />
 
       </div>