diff --git a/pytorrent/static/js/app.js b/pytorrent/static/js/app.js
index 1d263a0..52e52e9 100644
--- a/pytorrent/static/js/app.js
+++ b/pytorrent/static/js/app.js
@@ -1,13 +1,33 @@
-import { stateSource } from './state.js';
-import { torrentsSource } from './torrents.js';
+import { stateCoreSource } from './stateCore.js';
+import { columnStateSource } from './columnState.js';
+import { runtimeStateSource } from './runtimeState.js';
+import { sharedUiSource } from './sharedUi.js';
+import { torrentFilterHelpersSource } from './torrentFilterHelpers.js';
+import { torrentFilterUiSource } from './torrentFilterUi.js';
+import { torrentTrackerFiltersSource } from './torrentTrackerFilters.js';
+import { torrentTableStateSource } from './torrentTableState.js';
+import { torrentActionStateSource } from './torrentActionState.js';
+import { torrentRowRendererSource } from './torrentRowRenderer.js';
+import { torrentTableRendererSource } from './torrentTableRenderer.js';
 import { mobileSource } from './mobile.js';
 import { messagesSource } from './messages.js';
 import { torrentAddSource } from './torrentAdd.js';
 import { apiSource } from './api.js';
 import { createTorrentSource } from './createTorrent.js';
-import { torrentDetailsSource } from './torrentDetails.js';
-import { modalsSource } from './modals.js';
-import { rssSource } from './rss.js';
+import { torrentGeneralDetailsSource } from './torrentGeneralDetails.js';
+import { torrentFileDetailsSource } from './torrentFileDetails.js';
+import { torrentChunkDetailsSource } from './torrentChunkDetails.js';
+import { torrentPeerDetailsSource } from './torrentPeerDetails.js';
+import { torrentTrackerDetailsSource } from './torrentTrackerDetails.js';
+import { mobileTorrentDetailsSource } from './mobileTorrentDetails.js';
+import { torrentDetailsLoaderSource } from './torrentDetailsLoader.js';
+import { pathPickerToolsSource } from './pathPickerTools.js';
+import { columnManagerSource } from './columnManager.js';
+import { jobToolsSource } from './jobTools.js';
+import { labelToolsSource } from './labelTools.js';
+import { ratioToolsSource } from './ratioTools.js';
+import { rssToolsSource } from './rssTools.js';
+import { backupToolsSource } from './backupTools.js';
 import { smartQueueSource } from './smartQueue.js';
 import { rtorrentConfigSource } from './rtorrentConfig.js';
 import { appearancePreferencesSource } from './appearancePreferences.js';
@@ -25,25 +45,75 @@ import { appStatusSource } from './appStatus.js';
 import { torrentStatsSource } from './torrentStats.js';
 import { toolUiHelpersSource } from './toolUiHelpers.js';
 import { authUsersSource } from './authUsers.js';
-import { plannerSource } from './planner.js';
-import { pollerSource } from './poller.js';
-import { profilesSource } from './profiles.js';
-import { dashboardSource } from './dashboard.js';
-import { chartsSource } from './charts.js';
+import { plannerToolsUiSource } from './plannerToolsUi.js';
+import { plannerSpeedControlsSource } from './plannerSpeedControls.js';
+import { plannerSettingsSource } from './plannerSettings.js';
+import { plannerPreviewHistorySource } from './plannerPreviewHistory.js';
+import { plannerActionsSource } from './plannerActions.js';
+import { smartViewsSource } from './smartViews.js';
+import { notificationCenterSource } from './notificationCenter.js';
+import { diagnosticsDashboardSource } from './diagnosticsDashboard.js';
+import { dashboardToolsSource } from './dashboardTools.js';
 import { operationLogsSource } from './operationLogs.js';
-import { bootstrapSource } from './bootstrap.js';
+import { pollerSettingsSource } from './pollerSettings.js';
+import { toolsModalSource } from './toolsModal.js';
+import { toolPaneEventsSource } from './toolPaneEvents.js';
+import { rssEventsSource } from './rssEvents.js';
+import { smartQueueEventsSource } from './smartQueueEvents.js';
+import { backupCleanupRtconfigEventsSource } from './backupCleanupRtconfigEvents.js';
+import { automationEventsSource } from './automationEvents.js';
+import { labelSmartEventsSource } from './labelSmartEvents.js';
+import { torrentSelectionEventsSource } from './torrentSelectionEvents.js';
+import { torrentTableEventsSource } from './torrentTableEvents.js';
+import { preferenceEventsSource } from './preferenceEvents.js';
+import { keyboardEventsSource } from './keyboardEvents.js';
+import { speedLimitControlsSource } from './speedLimitControls.js';
+import { themeMobileControlsSource } from './themeMobileControls.js';
+import { jobSettingsSource } from './jobSettings.js';
+import { profileListSource } from './profileList.js';
+import { profileFormSource } from './profileForm.js';
+import { profileActionsSource } from './profileActions.js';
+import { profileSelectionSource } from './profileSelection.js';
+import { realtimeChartsSource } from './realtimeCharts.js';
+import { trafficHistoryDataSource } from './trafficHistoryData.js';
+import { trafficChartRendererSource } from './trafficChartRenderer.js';
+import { initialSnapshotSource } from './initialSnapshot.js';
+import { footerStatusRefreshSource } from './footerStatusRefresh.js';
+import { systemStatsSocketSource } from './systemStatsSocket.js';
+import { mobileSelectEventsSource } from './mobileSelectEvents.js';
+import { bootstrapRuntimeSource } from './bootstrapRuntime.js';
 
 export const moduleSources = [
-  stateSource,
-  torrentsSource,
+  stateCoreSource,
+  columnStateSource,
+  runtimeStateSource,
+  sharedUiSource,
+  torrentFilterHelpersSource,
+  torrentFilterUiSource,
+  torrentTrackerFiltersSource,
+  torrentTableStateSource,
+  torrentActionStateSource,
+  torrentRowRendererSource,
+  torrentTableRendererSource,
   mobileSource,
   messagesSource,
   torrentAddSource,
   apiSource,
   createTorrentSource,
-  torrentDetailsSource,
-  modalsSource,
-  rssSource,
+  torrentGeneralDetailsSource,
+  torrentFileDetailsSource,
+  torrentChunkDetailsSource,
+  torrentPeerDetailsSource,
+  torrentTrackerDetailsSource,
+  mobileTorrentDetailsSource,
+  torrentDetailsLoaderSource,
+  pathPickerToolsSource,
+  columnManagerSource,
+  jobToolsSource,
+  labelToolsSource,
+  ratioToolsSource,
+  rssToolsSource,
+  backupToolsSource,
   smartQueueSource,
   rtorrentConfigSource,
   appearancePreferencesSource,
@@ -61,13 +131,43 @@ export const moduleSources = [
   torrentStatsSource,
   toolUiHelpersSource,
   authUsersSource,
-  plannerSource,
-  dashboardSource,
+  plannerToolsUiSource,
+  plannerSpeedControlsSource,
+  plannerSettingsSource,
+  plannerPreviewHistorySource,
+  plannerActionsSource,
+  smartViewsSource,
+  notificationCenterSource,
+  diagnosticsDashboardSource,
+  dashboardToolsSource,
   operationLogsSource,
-  pollerSource,
-  profilesSource,
-  chartsSource,
-  bootstrapSource,
+  pollerSettingsSource,
+  toolsModalSource,
+  toolPaneEventsSource,
+  rssEventsSource,
+  smartQueueEventsSource,
+  backupCleanupRtconfigEventsSource,
+  automationEventsSource,
+  labelSmartEventsSource,
+  torrentSelectionEventsSource,
+  torrentTableEventsSource,
+  preferenceEventsSource,
+  keyboardEventsSource,
+  speedLimitControlsSource,
+  themeMobileControlsSource,
+  jobSettingsSource,
+  profileListSource,
+  profileFormSource,
+  profileActionsSource,
+  profileSelectionSource,
+  realtimeChartsSource,
+  trafficHistoryDataSource,
+  trafficChartRendererSource,
+  initialSnapshotSource,
+  footerStatusRefreshSource,
+  systemStatsSocketSource,
+  mobileSelectEventsSource,
+  bootstrapRuntimeSource,
 ];
 
 export function buildRuntimeSource(){
diff --git a/pytorrent/static/js/automationEvents.js b/pytorrent/static/js/automationEvents.js
new file mode 100644
index 0000000..fd25a81
--- /dev/null
+++ b/pytorrent/static/js/automationEvents.js
@@ -0,0 +1 @@
+export const automationEventsSource = "$('statusPlannerOpen')?.addEventListener('click',()=>{ ensurePlannerToolsUI(); activateToolTab('planner'); new bootstrap.Modal($('toolsModal')).show(); }); $('peersRefreshSelect')?.addEventListener('change',async e=>{peersRefreshSeconds=Number(e.target.value||0); await post('/api/preferences',{peers_refresh_seconds:peersRefreshSeconds}).catch(()=>{}); setupPeersRefresh(activeTab()); toast('Peers refresh preference saved','success');});\n  $('autoConditionType')?.addEventListener('change',updateAutomationForm); $('autoEffectType')?.addEventListener('change',updateAutomationForm); $('automationAddConditionBtn')?.addEventListener('click',()=>{automationConditions.push(automationCondition()); renderAutomationBuilder();}); $('automationAddEffectBtn')?.addEventListener('click',()=>{automationEffects.push(automationEffect()); renderAutomationBuilder();}); $('automationConditionList')?.addEventListener('click',e=>{const b=e.target.closest('.automation-remove-condition'); if(!b)return; automationConditions.splice(Number(b.dataset.index||0),1); renderAutomationBuilder();}); $('automationEffectList')?.addEventListener('click',e=>{const b=e.target.closest('.automation-remove-effect'); if(!b)return; automationEffects.splice(Number(b.dataset.index||0),1); renderAutomationBuilder();}); $('automationCancelEditBtn')?.addEventListener('click',resetAutomationForm); $('automationSaveBtn')?.addEventListener('click',saveAutomation); $('automationExportBtn')?.addEventListener('click',exportAutomations); $('automationImportBtn')?.addEventListener('click',()=>$('automationImportFile')?.click()); $('automationImportFile')?.addEventListener('change',e=>importAutomations(e.target.files?.[0])); $('automationCheckBtn')?.addEventListener('click',async()=>{setBusy(true);try{const j=await post('/api/automations/check',{}); const torrents=j.result?.applied?.length||0; const batches=j.result?.batches?.length||0; toastMessage('toast.automationsApplied','success',{count:torrents,batches}); await loadAutomations();}catch(e){toast(e.message,'danger');}finally{setBusy(false);}}); $('automationManager')?.addEventListener('click',async e=>{const run=e.target.closest('.automation-run'); if(run){ setBusy(true); try{ const j=await post(`/api/automations/${run.dataset.id}/run`,{}); toastMessage('toast.automationForceRunDone','success',{count:j.result?.applied?.length}); await loadAutomations(); }catch(err){ toast(err.message,'danger'); } finally{ setBusy(false); } return; } const toggle=e.target.closest('.automation-toggle'); if(toggle){ await toggleAutomationRule(automationRulesCache.find(r=>String(r.id)===String(toggle.dataset.id))); return; } const edit=e.target.closest('.automation-edit'); if(edit){ editAutomationRule(automationRulesCache.find(r=>String(r.id)===String(edit.dataset.id))); return; } const id=e.target.closest('.automation-delete')?.dataset.id;if(!id)return;if(!confirm('Delete this automation rule?'))return;const r=await fetch('/api/automations/'+id,{method:'DELETE'});const j=await r.json();if(!j.ok)toast(j.error||'Delete failed','danger');await loadAutomations();}); $('automationHistory')?.addEventListener('click',e=>{ if(e.target.closest('#automationClearHistoryBtn')) clearAutomationHistory(); });\n  ";
diff --git a/pytorrent/static/js/backupCleanupRtconfigEvents.js b/pytorrent/static/js/backupCleanupRtconfigEvents.js
new file mode 100644
index 0000000..e7af131
--- /dev/null
+++ b/pytorrent/static/js/backupCleanupRtconfigEvents.js
@@ -0,0 +1 @@
+export const backupCleanupRtconfigEventsSource = "$('profileBackupCreateBtn')?.addEventListener('click',async()=>{await post('/api/backup/profile',{name:$('profileBackupName')?.value||'Profile backup'}); toast('Profile backup created','success'); loadBackup();}); $('appBackupCreateBtn')?.addEventListener('click',async()=>{await post('/api/backup/app',{name:$('appBackupName')?.value||'Application backup'}); toast('Application backup created','success'); loadBackup();}); $('profileBackupSettingsSaveBtn')?.addEventListener('click',async()=>{await post('/api/backup/profile/settings',{enabled:$('profileBackupAutoEnabled')?.checked,interval_hours:Number($('profileBackupAutoInterval')?.value||24),retention_days:Number($('profileBackupRetentionDays')?.value||30)}); toast('Profile backup schedule saved','success'); loadBackup();}); $('backupSettingsSaveBtn')?.addEventListener('click',async()=>{await post('/api/backup/settings',{enabled:$('backupAutoEnabled')?.checked,interval_hours:Number($('backupAutoInterval')?.value||24),retention_days:Number($('backupRetentionDays')?.value||30)}); toast('Application backup schedule saved','success'); loadBackup();}); document.querySelectorAll('[data-backup-pane]').forEach(tab=>tab.addEventListener('click',()=>{ if(tab.classList.contains('disabled')) return; switchBackupPane(tab.dataset.backupPane||'profile'); })); const backupClickHandler=async e=>{const preview=e.target.closest('.backup-preview-btn'); const restore=e.target.closest('.backup-restore'); const del=e.target.closest('.backup-delete'); if(preview){ const j=await (await fetch(`/api/backup/${preview.dataset.id}/preview`)).json(); if(!j.ok) throw new Error(j.error||'Backup preview failed'); const box=$('backupPreview'); if(box){ box.classList.remove('d-none'); box.innerHTML=backupPreviewTable(j.preview||{}); box.scrollIntoView({block:'nearest'}); } return; } if(restore){ const type=restore.dataset.type==='app'?'application':'profile'; const msg=type==='application'?'Restore this application backup and replace users, profiles and global settings?':'Restore this profile backup into the current active profile?'; if(!confirm(msg)) return; await post(`/api/backup/${restore.dataset.id}/restore`,{}); toast('Backup restored','success'); loadBackup(); return; } if(del){ if(!confirm('Delete this backup permanently?')) return; await post(`/api/backup/${del.dataset.id}`,{},'DELETE'); toast('Backup deleted','success'); loadBackup(); }}; $('profileBackupManager')?.addEventListener('click',backupClickHandler); $('appBackupManager')?.addEventListener('click',backupClickHandler); $('cleanupManager')?.addEventListener('click',async e=>{ if(e.target.closest('#cleanupRefreshBtn')) return loadCleanup(); if(e.target.closest('#cleanupProfileCacheBtn')) return runCleanupAction('/api/cleanup/cache','Clear active profile cache'); if(e.target.closest('#cleanupPollerDiagnosticsBtn')) return runCleanupAction('/api/cleanup/poller-diagnostics','Reset poller diagnostics'); if(e.target.closest('#cleanupJobsBtn')) return runCleanupAction('/api/cleanup/jobs','Clear finished job logs'); if(e.target.closest('#cleanupSmartQueueBtn')) return runCleanupAction('/api/cleanup/smart-queue','Clear Smart Queue logs'); if(e.target.closest('#cleanupOperationLogsBtn')) return runCleanupAction('/api/cleanup/operation-logs','Clear operation logs'); if(e.target.closest('#cleanupPlannerBtn')) return runCleanupAction('/api/cleanup/planner','Clear Planner logs'); if(e.target.closest('#cleanupAutomationsBtn')) return runCleanupAction('/api/cleanup/automations','Clear automation logs'); if(e.target.closest('#cleanupAllBtn')) return runCleanupAction('/api/cleanup/all','Clear job, Smart Queue, operation, Planner and automation logs'); }); $('rtConfigReloadBtn')?.addEventListener('click',loadRtConfig); $('rtConfigResetBtn')?.addEventListener('click',resetRtConfig); $('rtConfigSaveBtn')?.addEventListener('click',saveRtConfig); $('rtConfigGenerateBtn')?.addEventListener('click',generateRtConfig); $('rtConfigManager')?.addEventListener('input',e=>{ if(e.target.classList.contains('rt-config-input')) updateRtConfigDirty(); }); $('rtConfigManager')?.addEventListener('change',e=>{ if(e.target.classList.contains('rt-config-input')){ const label=e.target.closest('.rt-config-switch')?.querySelector('.form-check-label'); if(label) label.textContent=e.target.checked?'On':'Off'; updateRtConfigDirty(); } }); $('rtConfigApplyOnStart')?.addEventListener('change',updateRtConfigDirty); ";
diff --git a/pytorrent/static/js/backupTools.js b/pytorrent/static/js/backupTools.js
new file mode 100644
index 0000000..50e5b96
--- /dev/null
+++ b/pytorrent/static/js/backupTools.js
@@ -0,0 +1 @@
+export const backupToolsSource = "  function fillBackupSettings(settings={}, prefix='app'){\n    const cap=prefix==='profile'?'Profile':'App';\n    const enabled=$(prefix==='profile'?'profileBackupAutoEnabled':'backupAutoEnabled');\n    const interval=$(prefix==='profile'?'profileBackupAutoInterval':'backupAutoInterval');\n    const retention=$(prefix==='profile'?'profileBackupRetentionDays':'backupRetentionDays');\n    if(enabled) enabled.checked=!!settings.enabled;\n    if(interval) interval.value=settings.interval_hours||24;\n    if(retention) retention.value=settings.retention_days||30;\n  }\n  function backupPreviewDetails(table={}){\n    const sample=table.sample||[];\n    if(!sample.length) return '<div class=\"backup-preview-empty\">No saved rows in this table.</div>';\n    const keys=[...new Set(sample.flatMap(row=>Object.keys(row||{})))].slice(0,8);\n    return responsiveTable(keys.map(esc), sample.map(row=>keys.map(key=>esc(row?.[key] ?? ''))), 'backup-preview-sample-table');\n  }\n  function backupPreviewTable(preview={}){\n    const tables=preview.tables||[];\n    const rows=tables.map(t=>`<details class=\"backup-preview-table-details\"><summary><span><b>${esc(t.name)}</b><small>${esc(t.rows)} row(s) · ${(t.columns||[]).length} column(s)</small></span></summary>${backupPreviewDetails(t)}</details>`).join('');\n    const type=preview.backup_type==='app'?'application':'profile';\n    return `<div class=\"surface-section backup-preview-card\"><div class=\"section-title\"><i class=\"fa-solid fa-eye\"></i> Backup preview</div><div class=\"small text-muted mb-2\">${esc(type)} backup · Created: ${esc(preview.created_at||'-')} · ${preview.automatic?'automatic':'manual'} · sensitive values hidden</div>${rows || '<div class=\"empty-mini\">Backup has no previewable settings.</div>'}</div>`;\n  }\n  function backupRows(rows=[]){\n    return responsiveTable(['Name','Created','Type','Actions'],rows.map(b=>[esc(b.name),humanDateCell(b.created_at),b.automatic?'Auto':'Manual',`<div class=\"table-action-group backup-actions\"><button class=\"btn btn-xs btn-outline-info backup-preview-btn\" data-id=\"${esc(b.id)}\"><i class=\"fa-solid fa-eye\"></i> Preview</button><a class=\"btn btn-xs btn-outline-secondary\" href=\"/api/backup/${esc(b.id)}/download\"><i class=\"fa-solid fa-download\"></i> Download</a><button class=\"btn btn-xs btn-outline-warning backup-restore\" data-id=\"${esc(b.id)}\" data-type=\"${esc(b.backup_type||'profile')}\"><i class=\"fa-solid fa-rotate-left\"></i> Restore</button><button class=\"btn btn-xs btn-outline-danger backup-delete\" data-id=\"${esc(b.id)}\"><i class=\"fa-solid fa-trash-can\"></i> Delete</button></div>`]),'backup-table');\n  }\n  function switchBackupPane(pane){\n    document.querySelectorAll('[data-backup-pane]').forEach(x=>x.classList.toggle('active',x.dataset.backupPane===pane));\n    document.querySelectorAll('[data-backup-panel]').forEach(x=>x.classList.toggle('d-none',x.dataset.backupPanel!==pane));\n  }\n  async function loadBackup(){\n    const j=await (await fetch('/api/backup')).json();\n    fillBackupSettings(j.profile_auto||{}, 'profile');\n    fillBackupSettings(j.app_auto||j.auto||{}, 'app');\n    if($('profileBackupManager')) $('profileBackupManager').innerHTML=backupRows(j.profile_backups||[]);\n    if($('appBackupManager')) $('appBackupManager').innerHTML=j.can_app_backup ? backupRows(j.app_backups||[]) : '<div class=\"empty-mini\">Application backups are admin-only.</div>';\n    if(!j.can_app_backup) document.querySelector('[data-backup-pane=\"app\"]')?.classList.add('disabled');\n  }\n";
diff --git a/pytorrent/static/js/bootstrapRuntime.js b/pytorrent/static/js/bootstrapRuntime.js
new file mode 100644
index 0000000..57c142d
--- /dev/null
+++ b/pytorrent/static/js/bootstrapRuntime.js
@@ -0,0 +1 @@
+export const bootstrapRuntimeSource = "  updateSortHeaders(); setupColumnResizers(); applyColumnVisibility(); renderColumnManager(); restoreFooterStatusCache(); refreshFooterStatusNow(); renderFooterPreferences(); applyFooterPreferences(); updateFooterClock(); updateBrowserSpeedTitle(); setupTorrentDropZone(); setInterval(updateFooterClock,1000); scheduleRender(true); if(!hasActiveProfile) renderNoProfileState(); loadLabels().catch(()=>{}); loadRatios().catch(()=>{}); loadSmartQueue().catch(()=>{}); loadAutomations().catch(()=>{}); ensureDashboardToolsUI(); if(portCheckEnabled) loadPortCheck(false); else renderPortCheck({status:'disabled',enabled:false}); if(hasActiveProfile) applyDefaultDownloadPath(false).catch(()=>{}); if(hasActiveProfile) refreshUserDiskUsage(true).catch(()=>{}); scheduleTrackerSummary(true);\n";
diff --git a/pytorrent/static/js/columnManager.js b/pytorrent/static/js/columnManager.js
new file mode 100644
index 0000000..42428f8
--- /dev/null
+++ b/pytorrent/static/js/columnManager.js
@@ -0,0 +1 @@
+export const columnManagerSource = "  function columnPrefsPayload(){\n    return JSON.stringify({hidden:cleanColumnPrefsHidden(hiddenColumns), shown:cleanColumnPrefsHidden(DEFAULT_HIDDEN_COLUMNS).filter(key => !hiddenColumns.has(key)), mobile:mobileColumns, mobileSortFilters, mobileSmartFiltersEnabled, widths:columnWidths});\n  }\n  function parseTableColumnsPreference(value){\n    if(!value) return {};\n    if(typeof value === 'object') return value;\n    try{ return JSON.parse(value); }catch(e){ return {}; }\n  }\n  function applyTableColumnsPreference(value){\n    const prefs = parseTableColumnsPreference(value);\n    const explicitlyShown = new Set(prefs.shown || []);\n    hiddenColumns = new Set([...(prefs.hidden || []), ...[...DEFAULT_HIDDEN_COLUMNS].filter(key => !explicitlyShown.has(key))]);\n    mobileColumns = normalizeMobileColumns(prefs.mobile || {});\n    mobileSortFilters = normalizeMobileSortFilters(prefs.mobileSortFilters || {});\n    mobileSmartFiltersEnabled = prefs.mobileSmartFiltersEnabled ?? true;\n    columnWidths = normalizeColumnWidths(prefs.widths || {});\n    saveBrowserViewPrefs({mobileColumns, mobileSortFilters, mobileSmartFiltersEnabled, columnWidths});\n  }\n  function renderColumnCards(defs, values, inputClass, dataAttr, icon){\n    return defs.map(([key,label,hiddenByDefault])=>{\n      const active = !!values[key];\n      return `<label class=\"column-card form-check form-switch ${active?'active':''}\"><input class=\"form-check-input ${inputClass}\" type=\"checkbox\" ${dataAttr}=\"${esc(key)}\" ${active?'checked':''}><span class=\"form-check-label\"><i class=\"fa-solid ${icon}\"></i> ${esc(label)}</span></label>`;\n    }).join('');\n  }\n  function renderMobileSortFilterCards(){\n    return MOBILE_SORT_STEPS.map(step => {\n      const id = mobileSortStepId(step);\n      const active = !!mobileSortFilters[id];\n      const direction = step.dir > 0 ? 'ascending' : 'descending';\n      return `<label class=\"column-card form-check form-switch ${active?'active':''}\"><input class=\"form-check-input mobile-sort-filter-toggle\" type=\"checkbox\" data-mobile-sort-filter=\"${esc(id)}\" ${active?'checked':''}><span class=\"form-check-label\"><i class=\"fa-solid ${step.dir > 0 ? 'fa-arrow-up-wide-short' : 'fa-arrow-down-wide-short'}\"></i> ${esc(step.label)} ${esc(direction)}</span></label>`;\n    }).join('');\n  }\n  function renderColumnManager(){\n    const box=$('columnManager');\n    if(!box) return;\n    const desktopValues = Object.fromEntries(COLUMN_DEFS.map(([key])=>[key, !hiddenColumns.has(key)]));\n    const desktop = renderColumnCards(COLUMN_DEFS, desktopValues, 'column-toggle', 'data-col-key', 'fa-table-columns');\n    const mobile = renderColumnCards(MOBILE_COLUMN_DEFS, mobileColumns, 'mobile-column-toggle', 'data-mobile-col-key', 'fa-mobile-screen');\n    const mobileSort = renderMobileSortFilterCards();\n    const smart = `<label class=\"column-card form-check form-switch ${mobileSmartFiltersEnabled?'active':''}\"><input id=\"mobileSmartFiltersToggle\" class=\"form-check-input\" type=\"checkbox\" ${mobileSmartFiltersEnabled?'checked':''}><span class=\"form-check-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"></i> Smart filters</span></label>`;\n    box.innerHTML=`<div class=\"column-manager-tabs nav nav-pills\" role=\"tablist\"><button class=\"nav-link active\" data-bs-toggle=\"pill\" data-bs-target=\"#desktopColumnPane\" type=\"button\" role=\"tab\"><i class=\"fa-solid fa-desktop\"></i> Desktop</button><button class=\"nav-link\" data-bs-toggle=\"pill\" data-bs-target=\"#mobileColumnPane\" type=\"button\" role=\"tab\"><i class=\"fa-solid fa-mobile-screen\"></i> Mobile</button></div><div class=\"column-manager-pane tab-content\"><div id=\"desktopColumnPane\" class=\"tab-pane fade show active\" role=\"tabpanel\"><div class=\"column-grid\">${desktop}</div></div><div id=\"mobileColumnPane\" class=\"tab-pane fade\" role=\"tabpanel\"><section class=\"column-config-section\"><h6>Mobile columns</h6><div class=\"column-grid\">${mobile}</div></section><section class=\"column-config-section\"><h6>Mobile sort filters</h6><small class=\"text-muted\">Only enabled sort choices appear in the mobile Sort button. Defaults keep seeds, upload, download and progress descending.</small><div class=\"column-grid mt-2\">${mobileSort}</div></section><section class=\"column-config-section\"><h6>Mobile filter groups</h6><div class=\"column-grid\">${smart}</div></section></div></div>`;\n  }\n  $('saveColumnsBtn')?.addEventListener('click',async()=>{ document.querySelectorAll('.column-toggle').forEach(cb=>cb.checked?hiddenColumns.delete(cb.dataset.colKey):hiddenColumns.add(cb.dataset.colKey)); document.querySelectorAll('.mobile-column-toggle').forEach(cb=>mobileColumns[cb.dataset.mobileColKey]=cb.checked); document.querySelectorAll('.mobile-sort-filter-toggle').forEach(cb=>mobileSortFilters[cb.dataset.mobileSortFilter]=cb.checked); mobileSmartFiltersEnabled = $('mobileSmartFiltersToggle')?.checked ?? true; saveBrowserViewPrefs({mobileColumns, mobileSortFilters, mobileSmartFiltersEnabled, columnWidths}); applyColumnVisibility(); scheduleRender(true); await post('/api/preferences',{table_columns_json:columnPrefsPayload()}).catch(e=>toast(e.message,'danger')); toastMessage('toast.columnsSaved','success'); });\n  $('resetColumnsBtn')?.addEventListener('click',async()=>{ hiddenColumns = new Set(DEFAULT_HIDDEN_COLUMNS); mobileColumns = normalizeMobileColumns(); mobileSortFilters = normalizeMobileSortFilters(); mobileSmartFiltersEnabled = true; columnWidths = normalizeColumnWidths(); saveBrowserViewPrefs({mobileColumns, mobileSortFilters, mobileSmartFiltersEnabled, columnWidths}); renderColumnManager(); applyColumnVisibility(); scheduleRender(true); await post('/api/preferences',{table_columns_json:columnPrefsPayload()}).catch(()=>{}); });\n  $('recommendedColumnsBtn')?.addEventListener('click',async()=>{\n    try{\n      // Note: The recommended layout is applied by the backend and includes desktop, mobile and widths.\n      const j = await post('/api/preferences/table-columns/recommended', {});\n      applyTableColumnsPreference(j.preferences?.table_columns_json);\n      renderColumnManager();\n      applyColumnVisibility();\n      scheduleRender(true);\n      toastMessage('toast.recommendedColumnsApplied','success');\n    }catch(e){\n      toast(e.message,'danger');\n    }\n  });\n\n";
diff --git a/pytorrent/static/js/columnState.js b/pytorrent/static/js/columnState.js
new file mode 100644
index 0000000..c18550f
--- /dev/null
+++ b/pytorrent/static/js/columnState.js
@@ -0,0 +1 @@
+export const columnStateSource = "  const COLUMN_DEFS = [[\"status\",\"Status\",false],[\"size\",\"Size\",false],[\"progress\",\"Progressbar\",false],[\"down_rate\",\"DL\",false],[\"up_rate\",\"UL\",false],[\"eta\",\"ETA\",false],[\"seeds\",\"Seeds\",false],[\"peers\",\"Peers\",false],[\"ratio\",\"Ratio\",false],[\"path\",\"Path\",false],[\"label\",\"Label\",false],[\"ratio_group\",\"Ratio group\",false],[\"down_total\",\"Downloaded\",true],[\"to_download\",\"To download\",true],[\"up_total\",\"Uploaded\",true],[\"created\",\"Created\",true],[\"last_activity\",\"Last activity\",true],[\"priority\",\"Priority\",true],[\"state\",\"State\",true],[\"active\",\"Active\",true],[\"complete\",\"Complete\",true],[\"hashing\",\"Hashing\",true],[\"message\",\"Message\",true],[\"hash\",\"Hash\",true]];\n  const DEFAULT_HIDDEN_COLUMNS = new Set(COLUMN_DEFS.filter(([, , hiddenByDefault]) => hiddenByDefault).map(([key]) => key));\n  const savedColumns = window.PYTORRENT?.tableColumns || {};\n  const DEFAULT_COLUMN_WIDTHS = {\n    select: 34, name: 360, status: 110, size: 90, progress: 120,\n    down_rate: 86, up_rate: 86, eta: 92, seeds: 70, peers: 70,\n    ratio: 72, path: 300, label: 140, ratio_group: 130,\n    down_total: 120, to_download: 120, up_total: 120, created: 150,\n    last_activity: 150, priority: 80, state: 70, active: 70, complete: 82, hashing: 82,\n    message: 220, hash: 280\n  };\n  const COLUMN_WIDTH_MIN = 44;\n  const COLUMN_WIDTH_MAX = 720;\n  const explicitlyShownColumns = new Set(savedColumns.shown || []);\n  let hiddenColumns = new Set([...(savedColumns.hidden || []), ...[...DEFAULT_HIDDEN_COLUMNS].filter(key => !explicitlyShownColumns.has(key))]);\n  // Note: Column widths are persisted with the existing column preferences payload, so no database migration is needed.\n  function normalizeColumnWidths(value={}){\n    const allowed = new Set(['select', ...COLUMN_DEFS.map(([key]) => key)]);\n    const normalized = {...DEFAULT_COLUMN_WIDTHS};\n    Object.entries(value || {}).forEach(([key, width])=>{\n      if(allowed.has(key)) normalized[key] = clampNumber(width, COLUMN_WIDTH_MIN, COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTHS[key] || 120);\n    });\n    return normalized;\n  }\n  let columnWidths = normalizeColumnWidths(savedColumns.widths || {});\n  if(browserViewPrefs.columnWidths) columnWidths = normalizeColumnWidths({...columnWidths, ...browserViewPrefs.columnWidths});\n  function mobileSortStepId(step){ return `${step.key}:${step.dir}`; }\n  function normalizeMobileSortFilters(value={}){\n    const normalized = Object.fromEntries(MOBILE_SORT_STEPS.map(step => {\n      const id = mobileSortStepId(step);\n      return [id, DEFAULT_MOBILE_SORT_FILTER_IDS.has(id)];\n    }));\n    Object.entries(value || {}).forEach(([id, enabled]) => { if(id in normalized) normalized[id] = !!enabled; });\n    return normalized;\n  }\n  let mobileSortFilters = normalizeMobileSortFilters(savedColumns.mobileSortFilters || {});\n  if(browserViewPrefs.mobileSortFilters) mobileSortFilters = normalizeMobileSortFilters({...mobileSortFilters, ...browserViewPrefs.mobileSortFilters});\n  const DEFAULT_MOBILE_COLUMNS = new Set([\"status\",\"progress\",\"down_rate\",\"up_rate\",\"eta\",\"seeds\",\"peers\",\"ratio\",\"path\"]);\n  const MOBILE_COLUMN_DEFS = COLUMN_DEFS.map(([key,label]) => [key, label, DEFAULT_MOBILE_COLUMNS.has(key)]);\n  function normalizeMobileColumns(value={}){\n    const normalized = {...Object.fromEntries(MOBILE_COLUMN_DEFS.map(([key,,shown])=>[key, shown]))};\n    Object.entries(value || {}).forEach(([key, shown])=>{\n      if(key === \"speed\"){ normalized.down_rate = !!shown; normalized.up_rate = !!shown; }\n      else if(key === \"seed_peer\"){ normalized.seeds = !!shown; normalized.peers = !!shown; }\n      else if(key in normalized) normalized[key] = !!shown;\n    });\n    return normalized;\n  }\n  let mobileColumns = normalizeMobileColumns(savedColumns.mobile || {});\n  if(browserViewPrefs.mobileColumns) mobileColumns = normalizeMobileColumns({...mobileColumns, ...browserViewPrefs.mobileColumns});\n  let mobileSmartFiltersEnabled = browserViewPrefs.mobileSmartFiltersEnabled ?? savedColumns.mobileSmartFiltersEnabled ?? true;\n";
diff --git a/pytorrent/static/js/dashboardTools.js b/pytorrent/static/js/dashboardTools.js
new file mode 100644
index 0000000..d3abb88
--- /dev/null
+++ b/pytorrent/static/js/dashboardTools.js
@@ -0,0 +1 @@
+export const dashboardToolsSource = "function ensureDashboardToolsUI(){\n  const host=$('toolRss')?.parentElement || document.querySelector('#toolsModal .modal-body');\n  if(!host) return;\n  addToolTab('smartviews','fa-layer-group','Smart Views','torrentstats');\n  addToolTab('notifications','fa-bell','Notifications','appstatus');\n  const stats=$('toolTorrentStats');\n  if(stats && !$('healthDashboardManager')){\n    const section=document.createElement('div');\n    section.className='surface-section mt-3';\n    section.innerHTML='<div class=\"section-title\"><i class=\"fa-solid fa-heart-pulse\"></i> Torrent health</div><div class=\"tool-note mb-3\">Live health buckets calculated from the current torrent snapshot.</div><div id=\"healthDashboardManager\"></div>';\n    stats.appendChild(section);\n    section.addEventListener('click',e=>{ const tab=e.target.closest('[data-health-pane]'); if(tab){ const pane=tab.dataset.healthPane; section.querySelectorAll('[data-health-pane]').forEach(x=>x.classList.toggle('active',x.dataset.healthPane===pane)); section.querySelectorAll('[data-health-panel]').forEach(x=>x.classList.toggle('d-none',x.dataset.healthPanel!==pane)); return; } const row=e.target.closest('[data-hash]'); if(!row) return; selectedHash=row.dataset.hash; selected.clear(); selected.add(selectedHash); scheduleRender(true); });\n  }\n  if(!$('toolSmartviews')){\n    const p=document.createElement('div');\n    p.id='toolSmartviews';\n    p.className='d-none';\n    p.innerHTML='<div class=\"surface-section\"><div class=\"section-title\"><i class=\"fa-solid fa-layer-group\"></i> Smart Views</div><div class=\"tool-note mb-3\">One-click filters for common torrent maintenance tasks.</div><div id=\"smartViewsManager\"></div></div>';\n    host.appendChild(p);\n    p.addEventListener('click',e=>{ const card=e.target.closest('.smart-view-card'); if(!card) return; activeTrackerFilter=''; activeFilter=card.dataset.filter||'all'; mobileActiveFilterKey=activeFilter; saveActiveFilterPreference(); syncFilterButtons(); scheduleRender(true); renderSmartViewsManager(); });\n  }\n  if(!$('toolNotifications')){\n    const p=document.createElement('div');\n    p.id='toolNotifications';\n    p.className='d-none';\n    p.innerHTML='<div class=\"surface-section\"><div class=\"section-title\"><i class=\"fa-solid fa-bell\"></i> Notification center</div><div class=\"tool-note mb-3\">Persistent local history for rTorrent, RSS, automation, disk, queue, planner and port events.</div><div id=\"notificationCenterManager\"></div></div>';\n    host.appendChild(p);\n  }\n  renderHealthDashboard();\n  renderSmartViewsManager();\n  renderNotificationCenter();\n  updateNotificationBadge();\n}\n";
diff --git a/pytorrent/static/js/diagnosticsDashboard.js b/pytorrent/static/js/diagnosticsDashboard.js
new file mode 100644
index 0000000..4cd41c2
--- /dev/null
+++ b/pytorrent/static/js/diagnosticsDashboard.js
@@ -0,0 +1 @@
+export const diagnosticsDashboardSource = "function diagnosticsSection(title, cards){\n  return `<section class=\"diagnostics-section\"><div class=\"section-title\"><i class=\"fa-solid fa-stethoscope\"></i> ${esc(title)}</div><div class=\"diag-grid\">${cards.join('')}</div></section>`;\n}\nasync function loadDiagnosticsPage(){\n  const box=$('diagnosticsPageManager');\n  if(!box) return;\n  box.innerHTML='<span class=\"spinner-border spinner-border-sm\"></span> Loading diagnostics...';\n  try{\n    const [status,poller,planner,smart]=await Promise.all([\n      fetch('/api/app/status').then(r=>r.json()),\n      fetch('/api/poller/settings').then(r=>r.json()).catch(()=>({})),\n      fetch('/api/download-planner/preview').then(r=>r.json()).catch(()=>({})),\n      fetch('/api/smart-queue?history_limit=100').then(r=>r.json()).catch(()=>({ok:false})),\n    ]);\n    if(status && status.ok===false) throw new Error(status.error||'Failed to load diagnostics');\n    const st=status.status||{}, profile=st.profile||{}, py=st.pytorrent||{}, scgi=st.scgi||{}, cleanup=st.cleanup||{}, db=cleanup.database||{}, pc=st.port_check||{};\n    const rt=poller.runtime||{}, ps=poller.settings||{}, pv=planner.preview||{}, smartStats=smart?.ok?buildSmartQueueNerdStats(smart.history||[], Number(smart.history_total||0)):null;\n    const profileCards=[diagCard('Active profile', profile.name||profile.id||'-'), diagCard('API response time', `${st.api_ms ?? '-'} ms`), diagCard('Incoming port', pc.port||'-'), diagCard('Port status', portStatusLabel(pc.status), pc.status==='closed'?'diag-error':'')];\n    const rtCards=[diagCard('SCGI status', scgi.ok?'OK':'ERROR', scgi.ok?'':'diag-error'), diagCard('SCGI URL', scgi.url||'-'), diagCard('Connect', scgi.connect_ms!=null?`${scgi.connect_ms} ms`:'-'), diagCard('First byte', scgi.first_byte_ms!=null?`${scgi.first_byte_ms} ms`:'-'), diagCard('Total', scgi.total_ms!=null?`${scgi.total_ms} ms`:'-'), diagCard('Request bytes', scgi.request_bytes), diagCard('Response bytes', scgi.response_bytes), diagCard('XML bytes', scgi.xml_bytes), diagCard('rTorrent version', scgi.client_version||'-')];\n    const pollerCards=[diagCard('Adaptive', ps.adaptive_enabled===false?'off':'on'), diagCard('Mode', rt.adaptive_mode||'-'), diagCard('Effective interval', `${rt.effective_interval_seconds??'-'}s`), diagCard('Minimum interval', `${rt.configured_min_interval_seconds??'-'}s`), diagCard('Tick duration', `${rt.duration_ms||rt.last_tick_ms||0} ms`), diagCard('Tick gap', `${rt.last_tick_gap_ms||0} ms`), diagCard('Payload', fmtBytes(rt.emitted_payload_size||0)), diagCard('rTorrent calls', rt.rtorrent_call_count||0), diagCard('Skipped emissions', rt.skipped_emissions||0), diagCard('Ticks', rt.tick_count||0)];\n    const plannerCards=[diagCard('Matched rule', pv.matched_rule||'-'), diagCard('Next change', pv.next_change_at||'-'), diagCard('Planner state', pv.enabled===false?'disabled':'enabled')];\n    const databaseCards=[diagCard('DB size', db.size_h||'-'), diagCard('Job logs', cleanup.jobs_clearable ?? '-'), diagCard('Smart Queue logs', cleanup.smart_queue_history_total ?? '-'), diagCard('Automation logs', cleanup.automation_history_total ?? '-')];\n    const workerCards=[diagCard('Worker threads', py.worker_threads ?? '-'), diagCard('Jobs total', py.jobs_total ?? '-'), diagCard('Threads', py.threads ?? '-'), diagCard('CPU', `${py.cpu_percent ?? '-'}%`)];\n    const smartBlock=`<section class=\"diagnostics-section\"><div class=\"section-title\"><i class=\"fa-solid fa-list-check\"></i> Smart Queue decisions</div>${renderSmartQueueNerdStats(smartStats)}</section>`;\n    box.innerHTML=[diagnosticsSection('Profile and port',profileCards), diagnosticsSection('rTorrent connection',rtCards), diagnosticsSection('Adaptive poller',pollerCards), diagnosticsSection('Planner',plannerCards), diagnosticsSection('Database and cleanup',databaseCards), diagnosticsSection('Worker state',workerCards), smartBlock, scgi.error?`<div class=\"alert alert-danger mt-3 mb-0\">${esc(scgi.error)}</div>`:''].join('');\n  }catch(e){ box.innerHTML=`<div class=\"alert alert-danger mb-0\">${esc(e.message)}</div>`; }\n}\n";
diff --git a/pytorrent/static/js/footerStatusRefresh.js b/pytorrent/static/js/footerStatusRefresh.js
new file mode 100644
index 0000000..b858321
--- /dev/null
+++ b/pytorrent/static/js/footerStatusRefresh.js
@@ -0,0 +1 @@
+export const footerStatusRefreshSource = "  function rtorrentPairText(current, max){\n    if(current == null) return '-';\n    return max == null ? String(current) : `${current}/${max}`;\n  }\n  function footerStatusUpdatedText(s={}){\n    const value=s.footer_updated_at || s.updated_at;\n    if(!value) return '';\n    const date=new Date(value);\n    return Number.isNaN(date.getTime()) ? '' : ` · last known ${date.toLocaleString()}`;\n  }\n  function updateRtorrentFooterStats(s={}, cached=false){\n    const suffix=cached ? footerStatusUpdatedText(s) : '';\n    const sockets=rtorrentPairText(s.open_sockets, s.max_open_sockets);\n    if($('statSockets')) $('statSockets').textContent=sockets;\n    if($('statusSockets')) $('statusSockets').title=s.open_sockets == null ? `Open sockets unavailable${suffix}` : `Open rTorrent sockets${s.max_open_sockets == null ? '' : ' / max'}: ${sockets}${suffix}`;\n    if($('statRtDownloads')) $('statRtDownloads').textContent=rtorrentPairText(s.active_downloads, s.max_downloads_global);\n    if($('statusRtDownloads')) $('statusRtDownloads').title=`Active rTorrent downloads / max global downloads${suffix}`;\n    if($('statRtUploads')) $('statRtUploads').textContent=rtorrentPairText(s.active_uploads, s.max_uploads_global);\n    if($('statusRtUploads')) $('statusRtUploads').title=`Active rTorrent uploads / max global uploads${suffix}`;\n    if($('statRtHttp')) $('statRtHttp').textContent=rtorrentPairText(s.open_http, s.max_open_http);\n    if($('statusRtHttp')) $('statusRtHttp').title=`Open rTorrent HTTP connections / max HTTP connections${suffix}`;\n    if($('statRtFiles')) $('statRtFiles').textContent=rtorrentPairText(s.open_files, s.max_open_files);\n    if($('statusRtFiles')) $('statusRtFiles').title=`Open rTorrent files / max open files${suffix}`;\n    if($('statRtPort')) $('statRtPort').textContent=(s.listen_port ?? '-') || '-';\n    if($('statusRtPort')) $('statusRtPort').title=`rTorrent incoming port${suffix}`;\n    if(cached){\n      if(s.cpu!==undefined && $('statCpu')) $('statCpu').textContent=s.cpu;\n      if(s.ram!==undefined && $('statRam')) $('statRam').textContent=s.ram;\n      if(s.version!==undefined && $('statVersion')) $('statVersion').textContent=s.version || '-';\n      if(s.down_rate_h!==undefined && $('statDl')) $('statDl').textContent=s.down_rate_h || '0 B/s';\n      if(s.up_rate_h!==undefined && $('statUl')) $('statUl').textContent=s.up_rate_h || '0 B/s';\n      if(s.down_rate_h!==undefined && $('mobileSpeedDl')) $('mobileSpeedDl').textContent=s.down_rate_h || '0 B/s';\n      if(s.up_rate_h!==undefined && $('mobileSpeedUl')) $('mobileSpeedUl').textContent=s.up_rate_h || '0 B/s';\n      updateBrowserSpeedTitle(s.down_rate_h, s.up_rate_h);\n    }\n  }\n  function saveFooterStatusCache(s={}){\n    const payload={\n      open_sockets:s.open_sockets, max_open_sockets:s.max_open_sockets,\n      active_downloads:s.active_downloads, max_downloads_global:s.max_downloads_global,\n      active_uploads:s.active_uploads, max_uploads_global:s.max_uploads_global,\n      open_http:s.open_http, max_open_http:s.max_open_http,\n      open_files:s.open_files, max_open_files:s.max_open_files,\n      listen_port:s.listen_port,\n      cpu:s.cpu, ram:s.ram, version:s.version,\n      down_rate_h:s.down_rate_h, up_rate_h:s.up_rate_h,\n      footer_updated_at:new Date().toISOString()\n    };\n    try{ localStorage.setItem(FOOTER_STATUS_STORAGE_KEY, JSON.stringify(payload)); }catch(_){}\n  }\n  function restoreFooterStatusCache(){\n    try{\n      const cached=JSON.parse(localStorage.getItem(FOOTER_STATUS_STORAGE_KEY)||'null');\n      if(cached && typeof cached==='object') updateRtorrentFooterStats(cached, true);\n    }catch(_){}\n  }\n  async function refreshFooterStatusNow(){\n    try{\n      const res=await fetch('/api/system/status', {cache:'no-store'});\n      const j=await res.json();\n      const s=j.status||{};\n      if(j.ok && s){\n        updateRtorrentFooterStats(s, false);\n        saveFooterStatusCache(s);\n        applyFooterPreferences();\n      }\n    }catch(_){}\n  }\n";
diff --git a/pytorrent/static/js/initialSnapshot.js b/pytorrent/static/js/initialSnapshot.js
new file mode 100644
index 0000000..e08881f
--- /dev/null
+++ b/pytorrent/static/js/initialSnapshot.js
@@ -0,0 +1 @@
+export const initialSnapshotSource = "  async function loadInitialSnapshotFallback(reason=''){\n    if(initialLoaderDone) return;\n    try{\n      const profilesResp = await fetch('/api/profiles', {cache:'no-store'});\n      const profilesJson = await profilesResp.json().catch(()=>({ok:false}));\n      const active = profilesJson.active || null;\n      if(!active){ showFirstRunSetup(); return; }\n      const torrentsResp = await fetch('/api/torrents', {cache:'no-store'});\n      const j = await torrentsResp.json().catch(()=>({ok:false,error:'Invalid /api/torrents response'}));\n      if(j.ok === false) throw new Error(j.error || 'Torrent API failed');\n      const rows = j.torrents || [];\n      if(j.error && !rows.length){ renderRtorrentStartingState(j.error, true); hideInitialLoader(); return; }\n      clearRtorrentStartingState();\n      hasTorrentSnapshot = true;\n      torrentSummary = j.summary || null;\n      torrents.clear();\n      rows.forEach(t=>torrents.set(t.hash,t));\n      if(j.speed_status) applyLiveSpeedStats(j.speed_status); else updateBrowserSpeedTitle();\n      scheduleRender(true);\n      scheduleTrackerSummary(true);\n      hideInitialLoader();\n    }catch(e){\n      setInitialLoader('Waiting for rTorrent...', (reason ? reason + ': ' : '') + (e.message || 'Unable to load torrent data.'));\n      renderRtorrentStartingState(e.message || reason || 'Unable to load torrent data.', true);\n      hideInitialLoader();\n    }\n  }\n  async function refreshTorrentSnapshot(reason='') {\n    if(!hasActiveProfile) return;\n    try {\n      const response = await fetch('/api/torrents', {cache:'no-store'});\n      const data = await response.json().catch(() => ({ok:false,error:'Invalid /api/torrents response'}));\n      if(data.ok === false) throw new Error(data.error || 'Torrent API failed');\n      const rows = data.torrents || [];\n      if(data.error && !rows.length) {\n        renderRtorrentStartingState(data.error, true);\n        return;\n      }\n      clearRtorrentStartingState();\n      hasTorrentSnapshot = true;\n      torrentSummary = data.summary || null;\n      torrents.clear();\n      selected.clear();\n      rows.forEach(t => torrents.set(t.hash, t));\n      if(data.speed_status) applyLiveSpeedStats(data.speed_status);\n      else updateBrowserSpeedTitle();\n      scheduleRender(true);\n      scheduleTrackerSummary(false);\n    } catch (error) {\n      if(reason) recordNotification('error', 'Torrent refresh failed', error.message || reason);\n    }\n  }\n  setTimeout(()=>loadInitialSnapshotFallback('Socket fallback'), 4000);\n  if(!socket || !socket.io || typeof socket.on !== 'function') setTimeout(()=>loadInitialSnapshotFallback('Socket.IO unavailable'), 200);\n  socket.on('connect',()=>{ if(!hasActiveProfile){ showFirstRunSetup(); return; } $('connBadge').className='badge text-bg-success'; $('connBadge').textContent='online'; setInitialLoader('Loading torrents...','Connection is ready. Waiting for the first torrent snapshot.'); socket.emit('select_profile',{profile_id:window.PYTORRENT.activeProfile}); }); socket.on('disconnect',()=>{ $('connBadge').className='badge text-bg-danger'; $('connBadge').textContent='offline'; setInitialLoader('Waiting for connection...','pyTorrent is not connected yet. The application will open after data is received.'); }); socket.io.on('reconnect_attempt',()=>{ $('connBadge').className='badge text-bg-warning'; $('connBadge').textContent='reconnecting'; setInitialLoader('Reconnecting...','Trying to restore the live connection and load torrent data.'); }); socket.io.on('reconnect',()=>{ if(!hasActiveProfile){ showFirstRunSetup(); return; } $('connBadge').className='badge text-bg-success'; $('connBadge').textContent='online'; setInitialLoader('Loading torrents...','Connection restored. Waiting for the first torrent snapshot.'); socket.emit('select_profile',{profile_id:window.PYTORRENT.activeProfile}); }); socket.on('profile_required',()=>showFirstRunSetup()); socket.on('torrent_snapshot',msg=>{const rows=msg.torrents||[]; if(msg.error && !rows.length){ renderRtorrentStartingState(msg.error, true); return; } clearRtorrentStartingState(); hasTorrentSnapshot=true;torrentSummary=msg.summary||null;torrents.clear();rows.forEach(t=>torrents.set(t.hash,t));if(msg.speed_status) applyLiveSpeedStats(msg.speed_status); else updateBrowserSpeedTitle();scheduleRender(true);scheduleTrackerSummary(true);hideInitialLoader();}); socket.on('torrent_patch',msg=>{patchRows(msg);scheduleTrackerSummary(false);}); socket.on('torrent_live_patch',msg=>{applyLiveTorrentStats(msg);}); socket.on('job_update',msg=>{ if(document.body.classList.contains('modal-open')) loadJobs().catch(()=>{}); if(['done','failed','cancelled'].includes(String(msg?.status||''))) setTimeout(()=>refreshTorrentSnapshot('job_update'), 350); }); socket.on('operation_started',msg=>{setBusy(true);markTorrentOperation(msg.hashes||[],msg.action,msg.job_id,'running');if(shouldShowOperationToast(msg)) toastMessage('toast.operationStarted','secondary',{action:msg.action});}); socket.on('operation_finished',msg=>{setBusy(false);clearJobOperation(msg.job_id,msg.hashes||[]);applyActionCompletionState(msg.action,msg.hashes||[]);refreshTorrentSnapshot('operation_finished');if(shouldShowOperationToast(msg)) toastMessage('toast.operationDone','success',{action:msg.action});}); socket.on('operation_failed',msg=>{setBusy(false);clearJobOperation(msg.job_id,msg.hashes||[]);if(shouldShowOperationToast(msg)) toastMessage('toast.operationFailed','danger',{action:msg.action,error:msg.error});}); socket.on('rtorrent_error',msg=>{ if(msg.error){ recordNotification('error','rTorrent error',msg.error);$('connBadge').className='badge badge-degraded';$('connBadge').textContent='degraded'; setInitialLoader('Waiting for rTorrent...','rTorrent is not ready yet. Data will appear automatically after it responds.'); scheduleRtorrentStartingState(msg.error);} }); socket.on('heartbeat',msg=>{ if(msg.error){$('connBadge').className='badge badge-degraded';$('connBadge').textContent='degraded'; setInitialLoader('Waiting for rTorrent...','rTorrent is not ready yet. Data will appear automatically after it responds.'); scheduleRtorrentStartingState(msg.error);} else if(socket.connected){clearRtorrentStartingState();$('connBadge').className='badge text-bg-success';$('connBadge').textContent='online';} }); socket.on('smart_queue_update',msg=>{ if(msg?.enabled && !msg.cooldown_skipped) recordNotification('queue','Smart Queue decision',smartQueueToastMessage(msg)); if(msg?.cooldown_remaining_seconds!==undefined) updateCooldownBadge('smartCooldownBadge', Number(msg.cooldown_remaining_seconds||0)); if(msg && msg.enabled && !msg.cooldown_skipped && smartQueueToastsEnabled){ toast(smartQueueToastMessage(msg),'secondary'); } }); socket.on('automation_update',msg=>{ if(msg?.error) recordNotification('error','Automation error',msg.error); if(msg?.applied?.length) recordNotification('info','Automation applied',`${msg.applied.length} item(s)`); if(msg?.applied?.length && automationToastsEnabled) toastMessage('toast.automationsApplied','secondary',{count:msg.applied.length}); }); socket.on('torrent_stats_update',msg=>{ if(msg?.stats){ renderTorrentStats(msg.stats); } else if(msg?.error && $('toolTorrentStats') && !$('toolTorrentStats').classList.contains('d-none')){ toastMessage('toast.torrentStatsError','danger',{error:msg.error}); } }); socket.on('rtorrent_config_applied',msg=>{ if(msg?.result?.updated?.length) toastMessage('toast.startupConfigApplied','success',{count:msg.result.updated.length}); if(msg?.error) toastMessage('toast.startupConfigFailed','danger',{error:msg.error}); }); socket.on('download_plan_update',msg=>{ if(msg?.enabled && (msg.paused||msg.resumed||msg.limits_changed||msg.pause_reason)) recordNotification('planner','Planner action',`paused ${msg.paused||0}, resumed ${msg.resumed||0}${msg.pause_reason?`, ${msg.pause_reason}`:''}`); if(msg?.settings) fillPlanner(msg.settings); if(msg?.preview) renderPlannerPreview(msg.preview); else if(msg?.matched_rule) renderPlannerPreview(msg); if(msg?.history) renderPlannerHistory(msg.history); if(msg?.enabled && (msg.paused||msg.resumed||msg.limits_changed)) toastMessage('toast.plannerSocketResult','secondary',{paused:msg.paused,resumed:msg.resumed,dryRun:msg.dry_run}); }); socket.on('poller_settings',msg=>fillPoller(msg?.settings||{},msg?.runtime||{}));\n";
diff --git a/pytorrent/static/js/jobSettings.js b/pytorrent/static/js/jobSettings.js
new file mode 100644
index 0000000..7974dad
--- /dev/null
+++ b/pytorrent/static/js/jobSettings.js
@@ -0,0 +1 @@
+export const jobSettingsSource = "  async function activeProfileForSettings(){\n    const j=await (await fetch('/api/profiles')).json();\n    return j.active || (j.profiles||[])[0] || null;\n  }\n  function fillJobSettings(profile){\n    if(!profile) return;\n    if($('jobHeavyParallel')) $('jobHeavyParallel').value=profile.max_parallel_jobs||5;\n    if($('jobLightParallel')) $('jobLightParallel').value=profile.light_parallel_jobs||4;\n    if($('jobLightTimeout')) $('jobLightTimeout').value=profile.light_job_timeout_seconds||300;\n    if($('jobHeavyTimeout')) $('jobHeavyTimeout').value=profile.heavy_job_timeout_seconds||7200;\n    if($('jobPendingTimeout')) $('jobPendingTimeout').value=profile.pending_job_timeout_seconds||900;\n    if($('jobSettingsProfileName')) $('jobSettingsProfileName').textContent=profile.name?`Active profile: ${profile.name}`:'';\n  }\n  async function loadJobSettings(){\n    try{\n      const profile=await activeProfileForSettings();\n      if(!profile){ if($('jobSettingsProfileName')) $('jobSettingsProfileName').textContent='No active profile.'; return; }\n      fillJobSettings(profile);\n    }catch(e){ if($('jobSettingsProfileName')) $('jobSettingsProfileName').textContent=e.message; }\n  }\n  function jobSettingsPayload(profile){\n    return {\n      name:profile.name,\n      scgi_url:profile.scgi_url,\n      timeout_seconds:profile.timeout_seconds||5,\n      max_parallel_jobs:$('jobHeavyParallel')?.value||5,\n      light_parallel_jobs:$('jobLightParallel')?.value||4,\n      light_job_timeout_seconds:$('jobLightTimeout')?.value||300,\n      heavy_job_timeout_seconds:$('jobHeavyTimeout')?.value||7200,\n      pending_job_timeout_seconds:$('jobPendingTimeout')?.value||900,\n      is_remote:!!profile.is_remote,\n      is_default:!!profile.is_default\n    };\n  }\n  async function saveJobSettings(){\n    const btn=$('saveJobSettingsBtn');\n    buttonBusy(btn,true);\n    try{\n      const profile=await activeProfileForSettings();\n      if(!profile) throw new Error('No active profile');\n      const j=await post(`/api/profiles/${profile.id}`,jobSettingsPayload(profile),'PUT');\n      fillJobSettings(j.profile||profile);\n      await refreshProfiles();\n      toast('Job settings saved','success');\n    }catch(e){ toast(e.message,'danger'); }\n    finally{ buttonBusy(btn,false); }\n  }\n";
diff --git a/pytorrent/static/js/jobTools.js b/pytorrent/static/js/jobTools.js
new file mode 100644
index 0000000..afdb8fe
--- /dev/null
+++ b/pytorrent/static/js/jobTools.js
@@ -0,0 +1 @@
+export const jobToolsSource = "  function jobActions(r){ const id=esc(r.id); const status=String(r.status||''); const actions=[]; if(status==='failed'||status==='cancelled') actions.push(`<button class=\"btn btn-xs btn-outline-primary job-retry\" data-id=\"${id}\"><i class=\"fa-solid fa-rotate-left\"></i> retry</button>`); if(status==='pending') actions.push(`<button class=\"btn btn-xs btn-outline-warning job-force\" data-id=\"${id}\" title=\"Run now in a separate worker\"><i class=\"fa-solid fa-bolt\"></i> force</button>`); if(status==='pending'||status==='running') actions.push(`<button class=\"btn btn-xs btn-outline-danger job-cancel\" data-id=\"${id}\" data-status=\"${esc(status)}\"><i class=\"fa-solid fa-triangle-exclamation\"></i> emergency cancel</button>`); return actions.join(' ') || '<span class=\"text-muted\">-</span>'; }\n  function jobStatusBadgeClass(status){\n    // Note: Running means active work, so it uses primary instead of danger; danger stays reserved for failed.\n    const classes={done:'success',failed:'danger',running:'primary',cancelled:'secondary',pending:'warning'};\n    return classes[String(status||'')] || 'warning';\n  }\n  async function loadJobs(page=jobsPage){\n    const box=$('jobsTable');\n    // Note: Finished shows only a real finished_at value; running/pending do not receive a date from updated_at.\n    if(!box) return;\n    jobsPage=Math.max(0,page|0);\n    box.innerHTML='<span class=\"spinner-border spinner-border-sm\"></span> Loading jobs...';\n    const offset=jobsPage*jobsLimit;\n    const j=await (await fetch(`/api/jobs?limit=${jobsLimit}&offset=${offset}`)).json();\n    const rows=j.jobs||[];\n    jobsTotal=Number(j.total||rows.length);\n    const details=r=>{\n      const count=Number(r.hash_count||0);\n      if(r.is_bulk || count>1) return `<span class=\"badge text-bg-info\">bulk</span><br><span class=\"text-muted\">${esc(count)} torrent(s), details hidden</span>`;\n      const bits=[];\n      if(count) bits.push(`${esc(count)} torrent`);\n      if(r.summary) bits.push(esc(r.summary));\n      return bits.join('<br>') || '-';\n    };\n    box.innerHTML=responsiveTable(\n      ['Status','Source','Action','Profile','Count','Details','Attempts','Started','Finished','Error','Actions'],\n      rows.map(r=>[\n        `<span class=\"badge text-bg-${jobStatusBadgeClass(r.status)}\">${esc(r.status)}</span>`,\n        r.source==='automation'?`<span class=\"badge text-bg-info\" title=\"${esc(r.source_label||'automation')}\"><i class=\"fa-solid fa-wand-magic-sparkles\"></i> automation</span>`:(r.is_forced?'<span class=\"badge text-bg-warning\"><i class=\"fa-solid fa-bolt\"></i> forced</span>':'<span class=\"badge text-bg-secondary\">user</span>'),\n        esc(r.action),\n        esc(r.profile_id),\n        esc(r.hash_count||0),\n        details(r),\n        esc(r.attempts||0),\n        humanDateCell(r.started_at||r.created_at),\n        humanDateCell(r.finished_at),\n        compactCell(r.error||'',140),\n        jobActions(r),\n      ]),\n      'jobs-table'\n    );\n    renderJobsPager();\n  }\n  function renderJobsPager(){ const p=$('jobsPager'); if(!p)return; const pages=Math.max(1,Math.ceil(jobsTotal/jobsLimit)); p.innerHTML=`<div class=\"d-flex align-items-center gap-2 flex-wrap\"><button class=\"btn btn-sm btn-outline-secondary\" id=\"jobsPrev\" ${jobsPage<=0?'disabled':''}><i class=\"fa-solid fa-chevron-left\"></i> Prev</button><span class=\"small text-muted\">Page ${jobsPage+1} / ${pages} <i class=\"fa-solid fa-circle fa-2xs modal-meta-separator\" aria-hidden=\"true\"></i> ${jobsTotal} jobs</span><button class=\"btn btn-sm btn-outline-secondary\" id=\"jobsNext\" ${jobsPage>=pages-1?'disabled':''}>Next <i class=\"fa-solid fa-chevron-right\"></i></button></div>`; $('jobsPrev')?.addEventListener('click',()=>loadJobs(jobsPage-1)); $('jobsNext')?.addEventListener('click',()=>loadJobs(jobsPage+1)); }\n  // Note: Job log buttons are separated so normal cleanup cannot accidentally trigger emergency cleanup.\n  $('jobsModal')?.addEventListener('show.bs.modal',loadJobs); $('refreshJobsBtn')?.addEventListener('click',loadJobs); $('jobsTable')?.addEventListener('click',async e=>{ const btn=e.target.closest('.job-retry,.job-cancel,.job-force'); if(!btn)return; const id=btn.dataset.id; if(!id)return; if(btn.classList.contains('job-retry')) await post(`/api/jobs/${id}/retry`,{}).catch(x=>toast(x.message,'danger')); if(btn.classList.contains('job-force')){ if(!confirm('Force this pending job now in a separate worker? This can break normal queue ordering.')) return; await post(`/api/jobs/${id}/force`,{}).catch(x=>toast(x.message,'danger')); } if(btn.classList.contains('job-cancel')){ const st=btn.dataset.status||''; if((st==='pending'||st==='running') && !confirm('Emergency cancel this unfinished job?')) return; await post(`/api/jobs/${id}/cancel`,{}).catch(x=>toast(x.message,'danger')); } loadJobs(); });\n  $('clearJobsBtn')?.addEventListener('click',async()=>{ if(!confirm('Clear finished job logs? Pending and running jobs will stay.')) return; try{ const j=await post('/api/jobs/clear',{}); toastMessage('toast.jobLogsCleared','success',{deleted:j.deleted}); jobsPage=0; loadJobs(0); }catch(e){ toast(e.message,'danger'); } });\n  $('emergencyClearJobsBtn')?.addEventListener('click',async()=>{ if(!confirm('Emergency clean ALL job logs, including unfinished jobs?')) return; try{ const j=await post('/api/jobs/clear?force=1',{}); toastMessage('toast.emergencyJobLogsCleared','success',{deleted:j.deleted}); jobsPage=0; loadJobs(0); }catch(e){ toast(e.message,'danger'); } });\n\n";
diff --git a/pytorrent/static/js/keyboardEvents.js b/pytorrent/static/js/keyboardEvents.js
new file mode 100644
index 0000000..cc67b8e
--- /dev/null
+++ b/pytorrent/static/js/keyboardEvents.js
@@ -0,0 +1 @@
+export const keyboardEventsSource = "document.addEventListener('keydown',e=>{ const tag=(e.target?.tagName||'').toLowerCase(); const editable=tag==='input'||tag==='textarea'||tag==='select'||e.target?.isContentEditable; if(editable){ if(e.key==='Enter' && e.target?.id==='labelInput'){ e.preventDefault(); $('addLabelToSelectionBtn')?.click(); } return; } if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='a'){e.preventDefault();selected.clear();visibleRows.forEach(t=>selected.add(t.hash));scheduleRender(true);} if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='i'){e.preventDefault();visibleRows.forEach(t=>selected.has(t.hash)?selected.delete(t.hash):selected.add(t.hash));scheduleRender(true);} if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='o'){e.preventDefault();new bootstrap.Modal($('addModal')).show();} if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='s'){e.preventDefault();downloadTorrentFiles();return;} if(e.key==='Escape'){selected.clear();scheduleRender(true);} if(e.key==='Delete') new bootstrap.Modal($('removeModal')).show(); if(e.key===' ') {e.preventDefault();runAction('start');} if(e.key.toLowerCase()==='p')runAction('pause'); if(e.key.toLowerCase()==='s' && !(e.ctrlKey||e.metaKey))runAction('stop'); if(e.key.toLowerCase()==='r')runAction('resume'); if(e.key.toLowerCase()==='m')runAction('move'); });\n  $('removeModal')?.addEventListener('show.bs.modal',()=>{$('removeCount').textContent=selected.size;$('removeData').checked=true;}); $('confirmRemoveBtn')?.addEventListener('click',async()=>{await runAction('remove',{remove_data:$('removeData').checked});bootstrap.Modal.getInstance($('removeModal'))?.hide();});\n  $('addModal')?.addEventListener('show.bs.modal',()=>applyDefaultDownloadPath(true));\n\n  $('toolsModal')?.addEventListener('show.bs.modal',()=>applyDefaultDownloadPath(false));\n  // Note: Torrent add modal and drag/drop upload handling moved to torrentAdd.js.\n  ";
diff --git a/pytorrent/static/js/labelSmartEvents.js b/pytorrent/static/js/labelSmartEvents.js
new file mode 100644
index 0000000..d4700d3
--- /dev/null
+++ b/pytorrent/static/js/labelSmartEvents.js
@@ -0,0 +1 @@
+export const labelSmartEventsSource = "document.addEventListener('click',async e=>{ const btn=e.target.closest('.delete-label'); if(!btn)return; if(!confirm('Delete this label?')) return; setBusy(true); try{ const r=await fetch('/api/labels/'+btn.dataset.id,{method:'DELETE'}); const j=await r.json(); if(!j.ok) throw new Error(j.error||'Delete failed'); await loadLabels(); toast('Label deleted','success'); }catch(err){toast(err.message,'danger');} finally{setBusy(false);} });\n  $('bulkClearBtn')?.addEventListener('click',()=>{selected.clear(); selectedHash=null; lastSelectedHash=null; updateBulkBar(); if($('selectAll')) $('selectAll').checked=false; if($('detailPane')) $('detailPane').innerHTML='Select a torrent.'; setupPeersRefresh('general'); scheduleRender(true);});\n  $('smartExcludeSelectedBtn')?.addEventListener('click',openSmartQueueExclusionModal);\n  $('smartExclusionSearch')?.addEventListener('input',filterSmartQueueExclusionChoices);\n  $('smartExclusionOnlySelected')?.addEventListener('change',filterSmartQueueExclusionChoices);\n  $('smartExclusionSelectVisibleBtn')?.addEventListener('click',()=>setSmartQueueVisibleExceptions(true));\n  $('smartExclusionClearVisibleBtn')?.addEventListener('click',()=>setSmartQueueVisibleExceptions(false));\n  $('smartExclusionSaveBtn')?.addEventListener('click',saveSmartQueueExclusionChoices);\n  $('smartHistory')?.addEventListener('click',async e=>{\n    const clear=e.target.closest('#smartHistoryClear');\n    if(clear){\n      // Note: Clear history removes only Smart Queue audit rows for the active profile.\n      if(!confirm('Clear Smart Queue history?')) return;\n      try{ await post('/api/smart-queue/history',{},'DELETE'); smartHistoryExpanded=false; toast('Smart Queue history cleared','success'); await loadSmartQueue(); }catch(err){ toast(err.message,'danger'); }\n      return;\n    }\n    const btn=e.target.closest('#smartHistoryToggle'); if(!btn) return; smartHistoryExpanded=!smartHistoryExpanded; loadSmartQueue();\n  });\n\n  // Note: Mobile filter changes are handled by setMobileFilterValue in bootstrap.js to avoid duplicate preference writes.\n  ";
diff --git a/pytorrent/static/js/labelTools.js b/pytorrent/static/js/labelTools.js
new file mode 100644
index 0000000..07c8787
--- /dev/null
+++ b/pytorrent/static/js/labelTools.js
@@ -0,0 +1 @@
+export const labelToolsSource = "  async function loadLabels(){ const j=await (await fetch('/api/labels')).json(); const labels=j.labels||[]; knownLabels=labels; renderLabelFilters(); renderLabelChooser(); if($('labelsManager')) $('labelsManager').innerHTML=labels.length?labels.map(l=>`<div class=\"label-manager-row\"><span class=\"chip\"><i class=\"fa-solid fa-tag\"></i> ${esc(l.name)}</span><button class=\"btn btn-xs btn-outline-danger delete-label\" data-id=\"${esc(l.id)}\" title=\"Delete label\"><i class=\"fa-solid fa-trash-can\"></i> Remove</button></div>`).join(''):'<div class=\"empty-state\"><i class=\"fa-solid fa-tags\"></i><b>No labels.</b><span>Add first label above.</span></div>'; }\n  function renderLabelChooser(){ if($('selectedLabelList')) $('selectedLabelList').innerHTML=[...modalLabels].map(l=>`<button class=\"chip label-selected\" data-label=\"${esc(l)}\" title=\"Remove\"><i class=\"fa-solid fa-tag\"></i> ${esc(l)} <i class=\"fa-solid fa-xmark ms-1\"></i></button>`).join('') || '<span class=\"text-muted small\">No labels selected.</span>'; if($('labelList')) $('labelList').innerHTML=knownLabels.map(l=>`<button class=\"chip label-chip ${modalLabels.has(l.name)?'active':''}\" data-label=\"${esc(l.name)}\"><i class=\"fa-solid fa-tag\"></i> ${esc(l.name)}</button>`).join('') || '<span class=\"text-muted small\">No saved labels.</span>'; }\n  async function saveKnownLabel(name){ name=String(name||'').trim(); if(!name) return; await post('/api/labels',{name}); await loadLabels(); }\n";
diff --git a/pytorrent/static/js/mobileSelectEvents.js b/pytorrent/static/js/mobileSelectEvents.js
new file mode 100644
index 0000000..6683f4e
--- /dev/null
+++ b/pytorrent/static/js/mobileSelectEvents.js
@@ -0,0 +1 @@
+export const mobileSelectEventsSource = "  document.addEventListener('change',e=>{ const sort=e.target.closest('#mobileSortSelect'); if(sort){ setMobileSortValue(sort.value); return; } const sel=e.target.closest('#mobileFilterSelect'); if(!sel) return; setMobileFilterValue(sel.value); });\n  ";
diff --git a/pytorrent/static/js/mobileTorrentDetails.js b/pytorrent/static/js/mobileTorrentDetails.js
new file mode 100644
index 0000000..87410a1
--- /dev/null
+++ b/pytorrent/static/js/mobileTorrentDetails.js
@@ -0,0 +1 @@
+export const mobileTorrentDetailsSource = "  function mobileDetailValue(value, fallback='-'){\n    const text = value === null || value === undefined || value === '' ? fallback : String(value);\n    return esc(text);\n  }\n  function mobileDetailsStatCards(t){\n    const stats = [\n      ['Status', t.status || '-'],\n      ['Progress', `${Number(t.progress || 0)}%`],\n      ['Size', t.size_h || '-'],\n      ['Downloaded', t.down_total_h || '-'],\n      ['Uploaded', t.up_total_h || '-'],\n      ['DL / UL', `${t.down_rate_h || '-'} / ${t.up_rate_h || '-'}`],\n      ['Seeds / Peers', `${t.seeds ?? 0} / ${t.peers ?? 0}`],\n      ['Ratio', t.ratio ?? '-'],\n      ['ETA', t.eta_h || '-'],\n      ['Added', formatDateTime(t.created)],\n    ];\n    return stats.map(([label,value]) => `<div class=\"mobile-details-stat\"><b>${esc(label)}</b><span>${mobileDetailValue(value)}</span></div>`).join('');\n  }\n  function mobileDetailsPeerRows(peers){\n    // Note: Mobile peers use the same responsive table wrapper as desktop details for consistent spacing and scrolling.\n    return (peers || []).slice(0, 40).map(p => {\n      const location = [p.country, p.city].filter(Boolean).join(', ') || '-';\n      const ip = `<span class=\"peer-ip\">${esc(p.ip || '-')}<a class=\"peer-ip-link\" href=\"https://ipinfo.io/${encodeURIComponent(p.ip || '')}\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"Open IP info\"><i class=\"fa-solid fa-link\"></i></a></span>`;\n      const row = [flag(p.country_iso), ip];\n      if(reverseDnsEnabled) row.push(peerHostCell(p));\n      row.push(esc(location), esc(p.client || '-'), progressBar(p.completed || 0, 'peer-progress peer-progress-wide'), esc(p.down_rate_h || '-'), esc(p.up_rate_h || '-'), esc(p.port || '-'), peerBadges(p));\n      return row;\n    });\n  }\n  function scheduleMobileReverseDnsRefresh(hash, torrent, payload){\n    // Note: Mobile details refresh only the peers payload while preserving already-loaded files and trackers.\n    clearTimeout(mobileReverseDnsRefreshTimer);\n    if(!hasPendingReverseDns(payload.peers?.value?.peers || [])){ mobileReverseDnsRefreshAttempts=0; return; }\n    if(!hash || mobileReverseDnsRefreshAttempts>=REVERSE_DNS_REFRESH_MAX_ATTEMPTS) return;\n    mobileReverseDnsRefreshAttempts+=1;\n    mobileReverseDnsRefreshTimer=setTimeout(async()=>{\n      if(selectedHash!==hash || !$('mobileDetailsModal')?.classList.contains('show')) return;\n      try{\n        const peersJson=await fetchMobileDetailsJson(hash, 'peers');\n        const nextPayload={...payload, peers:{status:'fulfilled', value:peersJson}};\n        const body=$('mobileDetailsBody');\n        if(body && selectedHash===hash){\n          body.innerHTML=renderMobileDetailsContent(torrent, nextPayload);\n          scheduleMobileReverseDnsRefresh(hash, torrent, nextPayload);\n        }\n      }catch(_){ }\n    }, REVERSE_DNS_REFRESH_SECONDS*1000);\n  }\n  function mobileDetailsPeerTable(peers){\n    const headers = ['Flag', 'IP'];\n    if(reverseDnsEnabled) headers.push('Host');\n    headers.push('Location', 'Client', '%', 'DL', 'UL', 'Port', 'Flags');\n    const rows = mobileDetailsPeerRows(peers);\n    if(!rows.length) return '<div class=\"mobile-details-empty\">No peers returned by rTorrent.</div>';\n    return responsiveTable(headers, rows, reverseDnsEnabled ? 'peers-table mobile-details-peers-table peers-table-hosts' : 'peers-table mobile-details-peers-table');\n  }\n  function mobileDetailsFileTable(files){\n    const rows = (files || []).map(file => {\n      const priority = FILE_PRIORITY_LABELS[Number(file.priority || 0)] || file.priority || '-';\n      const actions = `<div class=\"file-row-actions\">${renderFileInfoButton(file)}<button class=\"btn btn-xs btn-outline-secondary file-download-one\" type=\"button\" data-index=\"${esc(file.index)}\" title=\"Download\"><i class=\"fa-solid fa-download\"></i></button></div>`;\n      return [\n        `<span class=\"mobile-details-file-path\" title=\"${esc(file.path || file.name || '-')}\">${esc(file.path || file.name || '-')}</span>`,\n        esc(file.size_h || '-'),\n        progressBar(file.progress ?? 0, 'file-progress'),\n        `<span class=\"badge ${priorityClass(file.priority)}\">${esc(priority)}</span>`,\n        renderFilePrioritySelect(file),\n        actions,\n      ];\n    });\n    // Note: Mobile files now reuse the same compact table pattern as peers, with per-file priority, state, info and download actions.\n    if(!rows.length) return '<div class=\"mobile-details-empty\">No files returned by rTorrent.</div>';\n    return responsiveTable(['Path', 'Size', 'Done', 'Priority', 'Set priority', 'Actions'], rows, 'file-priority-table mobile-details-files-table');\n  }\n  function mobileDetailsTrackerItem(t){\n    return `<li class=\"mobile-details-tracker\"><b>${esc(t.url || '-')}</b><span>Seeds / Peers: ${esc(trackerSeedsPeers(t))}</span></li>`;\n  }\n  function mobileDetailsSection(title, icon, body, meta='', options={}){\n    const collapsed = !!options.collapsed;\n    const titleMarkup = `<h6><i class=\"fa-solid ${esc(icon)}\"></i> ${esc(title)}${meta ? `<small>${esc(meta)}</small>` : ''}</h6>`;\n    if(collapsed){\n      // Note: Heavy mobile sections start collapsed to keep torrent details quick to scan on phones.\n      return `<details class=\"mobile-details-section mobile-details-collapsible\"><summary>${titleMarkup}</summary>${body}</details>`;\n    }\n    return `<section class=\"mobile-details-section\">${titleMarkup}${body}</section>`;\n  }\n  function ensureMobileDetailsModal(){\n    let modal = $('mobileDetailsModal');\n    if(modal) return modal;\n    // Note: Mobile torrent details are lazy-created so the desktop details pane and existing tabs stay unchanged.\n    modal = document.createElement('div');\n    modal.id = 'mobileDetailsModal';\n    modal.className = 'modal fade mobile-details-modal';\n    modal.tabIndex = -1;\n    modal.innerHTML = `<div class=\"modal-dialog modal-fullscreen-sm-down modal-xl modal-dialog-scrollable app-modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><div><h5 id=\"mobileDetailsTitle\" class=\"modal-title\"><i class=\"fa-solid fa-circle-info\"></i> Torrent details</h5><div id=\"mobileDetailsSubtitle\" class=\"mobile-details-subtitle\"></div></div><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div id=\"mobileDetailsBody\" class=\"modal-body\"><div class=\"loading-line\"><span class=\"spinner-border spinner-border-sm\"></span> Loading torrent details...</div></div></div></div>`;\n    document.body.appendChild(modal);\n    return modal;\n  }\n  function renderMobileDetailsContent(t, payload){\n    const peers = payload.peers?.status === 'fulfilled' ? (payload.peers.value.peers || []) : [];\n    const files = payload.files?.status === 'fulfilled' ? (payload.files.value.files || []) : [];\n    const trackers = payload.trackers?.status === 'fulfilled' ? (payload.trackers.value.trackers || []) : [];\n    const failures = ['peers','files','trackers'].filter(key => payload[key]?.status === 'rejected').map(key => `${key}: ${payload[key].reason?.message || 'failed'}`);\n    const fullPath = joinRemotePath(t.path, t.name);\n    const peerTable = mobileDetailsPeerTable(peers);\n    const fileTable = mobileDetailsFileTable(files);\n    const trackerList = trackers.slice(0, 12).map(mobileDetailsTrackerItem).join('') || '<li class=\"mobile-details-empty\">No trackers returned by rTorrent.</li>';\n    const generalBody = `<section class=\"mobile-details-summary\"><div class=\"mobile-details-name\">${esc(t.name || '-')}</div><div class=\"mobile-details-path\"><b>Path</b><span>${esc(fullPath)}</span></div><div class=\"mobile-details-hash\"><b>Hash</b><code>${esc(t.hash || '-')}</code></div></section><div class=\"mobile-details-stats\">${mobileDetailsStatCards(t)}</div>`;\n    const messageBody = `<div class=\"mobile-details-message\">${esc(t.message || 'No message.')}</div>`;\n    const errorBox = failures.length ? `<div class=\"alert alert-warning mobile-details-warning\"><b>Partial details loaded</b><div>${esc(failures.join(' | '))}</div></div>` : '';\n    // Note: General and heavy lists start collapsed on mobile so the modal opens cleanly and the user expands only the section needed.\n    return `${errorBox}${mobileDetailsSection('General', 'fa-circle-info', generalBody, '', {collapsed:true})}${mobileDetailsSection('Peers', 'fa-users', peerTable, peers.length > 40 ? `showing 40 of ${peers.length}` : `${peers.length} total`, {collapsed:true})}${mobileDetailsSection('Files', 'fa-folder-tree', fileTable, files.length ? `${files.length} total` : '', {collapsed:true})}${mobileDetailsSection('Trackers', 'fa-bullhorn', `<ul class=\"mobile-details-list\">${trackerList}</ul>`, trackers.length > 12 ? `showing 12 of ${trackers.length}` : `${trackers.length} total`, {collapsed:true})}${mobileDetailsSection('Message', 'fa-message', messageBody, '', {collapsed:true})}`;\n  }\n  async function fetchMobileDetailsJson(hash, tab){\n    const res = await fetch(`/api/torrents/${encodeURIComponent(hash)}/${tab}`, {headers:{'Accept':'application/json'}});\n    const json = await res.json().catch(() => ({}));\n    if(!res.ok || !json.ok) throw new Error(json.error || `HTTP ${res.status}`);\n    return json;\n  }\n  async function openMobileDetails(hash){\n    const t = torrents.get(hash);\n    if(!t) return toast('Torrent is no longer available.','warning');\n    selectedHash = hash;\n    lastSelectedHash = hash;\n    const modal = ensureMobileDetailsModal();\n    const title = $('mobileDetailsTitle');\n    const subtitle = $('mobileDetailsSubtitle');\n    const body = $('mobileDetailsBody');\n    if(title) title.innerHTML = '<i class=\"fa-solid fa-circle-info\"></i> Torrent details';\n    if(subtitle) subtitle.textContent = t.name || hash;\n    if(body) body.innerHTML = '<div class=\"loading-line\"><span class=\"spinner-border spinner-border-sm\"></span> Loading peers, files and trackers...</div>';\n    new bootstrap.Modal(modal).show();\n    try{\n      // Note: The mobile modal reads existing lightweight detail endpoints without changing the desktop details tabs.\n      const [peers, files, trackers] = await Promise.allSettled([\n        fetchMobileDetailsJson(hash, 'peers'),\n        fetchMobileDetailsJson(hash, 'files'),\n        fetchMobileDetailsJson(hash, 'trackers'),\n      ]);\n      if(body) body.innerHTML = renderMobileDetailsContent(t, {peers, files, trackers});\n      mobileReverseDnsRefreshAttempts=0;\n      scheduleMobileReverseDnsRefresh(hash, t, {peers, files, trackers});\n    }catch(e){\n      if(body) body.innerHTML = `<div class=\"alert alert-danger mb-0\"><b>Details failed</b><div>${esc(e.message)}</div></div>`;\n    }\n  }\n\n";
diff --git a/pytorrent/static/js/notificationCenter.js b/pytorrent/static/js/notificationCenter.js
new file mode 100644
index 0000000..4e4c711
--- /dev/null
+++ b/pytorrent/static/js/notificationCenter.js
@@ -0,0 +1 @@
+export const notificationCenterSource = "function notificationItems(){\n  try{ return JSON.parse(localStorage.getItem(NOTIFICATION_STORAGE_KEY)||'[]'); }catch(e){ return []; }\n}\nfunction saveNotificationItems(items){ localStorage.setItem(NOTIFICATION_STORAGE_KEY, JSON.stringify(items.slice(0,120))); }\nfunction recordNotification(type, title, message){\n  const item={at:new Date().toISOString(), type:String(type||'info'), title:String(title||type||'Notification'), message:String(message||'')};\n  const items=[item,...notificationItems()].slice(0,120);\n  saveNotificationItems(items);\n  renderNotificationCenter();\n  updateNotificationBadge();\n}\nfunction notificationIcon(type){\n  if(type==='error') return 'fa-triangle-exclamation';\n  if(type==='warning') return 'fa-circle-exclamation';\n  if(type==='planner') return 'fa-calendar-days';\n  if(type==='queue') return 'fa-shuffle';\n  return 'fa-circle-info';\n}\nfunction updateNotificationBadge(){\n  const btn=document.querySelector('.tool-tab[data-tool=\"notifications\"]');\n  if(!btn) return;\n  const count=notificationItems().length;\n  btn.innerHTML=`<i class=\"fa-solid fa-bell\"></i> Notifications${count?` <span class=\"badge text-bg-danger\">${count}</span>`:''}`;\n}\nfunction renderNotificationCenter(){\n  const box=$('notificationCenterManager');\n  if(!box) return;\n  const items=notificationItems();\n  box.innerHTML=`<div class=\"notification-toolbar\"><button id=\"clearNotificationsBtn\" class=\"btn btn-sm btn-outline-danger\" type=\"button\"><i class=\"fa-solid fa-trash\"></i> Clear</button><span>${esc(items.length)} saved event(s)</span></div><div class=\"notification-list\">${items.map(x=>`<article class=\"notification-item notification-${esc(x.type)}\"><i class=\"fa-solid ${notificationIcon(x.type)}\"></i><div><b>${esc(x.title)}</b><span>${esc(x.message)}</span><small>${esc(new Date(x.at).toLocaleString())}</small></div></article>`).join('')||'<span class=\"empty-mini\">No notifications yet.</span>'}</div>`;\n  $('clearNotificationsBtn')?.addEventListener('click',()=>{ saveNotificationItems([]); renderNotificationCenter(); updateNotificationBadge(); });\n}\n";
diff --git a/pytorrent/static/js/pathPickerTools.js b/pytorrent/static/js/pathPickerTools.js
new file mode 100644
index 0000000..9136e47
--- /dev/null
+++ b/pytorrent/static/js/pathPickerTools.js
@@ -0,0 +1 @@
+export const pathPickerToolsSource = "  function copyText(text){\n    text=String(text ?? '');\n    if(navigator.clipboard && window.isSecureContext){\n      return navigator.clipboard.writeText(text);\n    }\n    return new Promise((resolve,reject)=>{\n      const ta=document.createElement('textarea');\n      ta.value=text; ta.setAttribute('readonly','');\n      ta.style.position='fixed'; ta.style.left='-9999px'; ta.style.top='0';\n      document.body.appendChild(ta); ta.focus(); ta.select();\n      try{ document.execCommand('copy') ? resolve() : reject(new Error('copy command failed')); }\n      catch(e){ reject(e); }\n      finally{ ta.remove(); }\n    });\n  }\n  function copySelected(field){\n    const t=torrents.get(selectedHash);\n    if(!t) return toast('No torrent selected','warning');\n    const value=String(t[field] ?? '');\n    if(!value) return toast(`No ${field} to copy`,'warning');\n    copyText(value).then(()=>toast(`Copied ${field}`,'success')).catch(()=>toast('Copy failed','danger'));\n  }\n\n  async function getDefaultDownloadPath(){ if(defaultDownloadPath) return defaultDownloadPath; try{ const j=await (await fetch('/api/path/default')).json(); if(j.ok && j.path) defaultDownloadPath=j.path; }catch(e){} return defaultDownloadPath || '/'; }\n  async function applyDefaultDownloadPath(force=false){ const p=await getDefaultDownloadPath(); ['addPath','rssPath','autoEffectPath'].forEach(id=>{ const el=$(id); if(el && (force || !el.value)) el.value=p; }); return p; }\n  async function openPathPicker(target){\n    pathTarget=target;\n    const modal=$('pathModal');\n    if(!modal) return toastMessage('toast.pathPickerUnavailable','danger');\n    const def=await getDefaultDownloadPath();\n    const initial=def || ($(target)?.value||'/');\n    // Note: The same modal is used for Move and simple path selection; only Move shows extra options.\n    $('moveOptions')?.classList.toggle('d-none', target!=='move');\n    if($('moveDataPhysical')) $('moveDataPhysical').checked=true;\n    if($('moveRecheck')) $('moveRecheck').checked=true;\n    // Note: The path picker can be opened from Add/Create modals, so it must sit above the parent modal.\n    modal.classList.toggle('path-picker-stacked', document.querySelectorAll('.modal.show').length > 0);\n    new bootstrap.Modal(modal).show();\n    browsePath(initial);\n  }\n  function pathInfoHtml(j){\n    // Note: Move modal shows remote-side capacity and entry counts before queuing a move.\n    const meta=[];\n    if(j.free_h) meta.push(`<span><i class=\"fa-solid fa-hard-drive\"></i> Free ${esc(j.free_h)}</span>`);\n    if(j.used_percent!==undefined) meta.push(`<span>${esc(j.used_percent)}% used</span>`);\n    if(j.dir_count!==undefined) meta.push(`<span>${esc(j.dir_count)} dirs</span>`);\n    if(j.file_count!==undefined) meta.push(`<span>${esc(j.file_count)} files</span>`);\n    return meta.length ? `<div class=\"path-info-strip\">${meta.join('')}</div>` : '';\n  }\n  async function browsePath(path){\n    const list=$('pathList');\n    const current=$('pathCurrent');\n    if(!list || !current) return;\n    list.innerHTML='<span class=\"spinner-border spinner-border-sm\"></span> Loading...';\n    try{\n      const res=await fetch(`/api/path/browse?path=${encodeURIComponent(path||'/')}`);\n      const j=await res.json();\n      if(!j.ok) throw new Error(j.error);\n      current.value=j.path;\n      lastPathParent=j.parent;\n      const rows=j.dirs.map(d=>`<div class=\"path-row\" data-path=\"${esc(d.path)}\"><i class=\"fa-solid fa-folder\"></i><span>${esc(d.name)}</span></div>`).join('')||'<div class=\"p-3 text-muted\">No directories.</div>';\n      list.innerHTML=pathInfoHtml(j)+rows;\n    }catch(e){\n      list.innerHTML=`<div class=\"text-danger p-2\">${esc(e.message)}</div>`;\n    }\n  }\n  $('pathList')?.addEventListener('click',e=>{const r=e.target.closest('.path-row'); if(r) browsePath(r.dataset.path);});\n  $('pathGoBtn')?.addEventListener('click',()=>browsePath($('pathCurrent')?.value));\n  $('pathUpBtn')?.addEventListener('click',()=>browsePath(lastPathParent));\n  $('pathReloadBtn')?.addEventListener('click',()=>browsePath($('pathCurrent')?.value));\n  $('pathSelectBtn')?.addEventListener('click',async()=>{\n    const p=($('pathCurrent')?.value||'').trim();\n    if(!p) return toastMessage('toast.pathEmpty','warning');\n    if(pathTarget==='move'){\n      const hashes=selectedHashes();\n      if(!hashes.length) return toastMessage('toast.noTorrentsSelected','warning');\n      const j=await post('/api/torrents/move',{hashes,path:p,move_data:!!($('moveDataPhysical')?.checked),recheck:!!($('moveRecheck')?.checked)});\n      markQueuedJobs(j,hashes,'move');\n      const parts=Number(j.bulk_parts||1);\n      toastMessage('toast.moveQueued','success',{parts,physical:$('moveDataPhysical')?.checked});\n    } else if($(pathTarget)) {\n      $(pathTarget).value=p;\n    }\n    bootstrap.Modal.getInstance($('pathModal'))?.hide();\n  });\n  document.querySelectorAll('.browse-path').forEach(b=>b.addEventListener('click',()=>openPathPicker(b.dataset.target)));\n\n";
diff --git a/pytorrent/static/js/plannerActions.js b/pytorrent/static/js/plannerActions.js
new file mode 100644
index 0000000..e21f8b1
--- /dev/null
+++ b/pytorrent/static/js/plannerActions.js
@@ -0,0 +1 @@
+export const plannerActionsSource = "  function fillPlannerHours(mbps){ const bytes=plannerMbpsToBytes(mbps); for(let hour=0;hour<24;hour++){ const d=$(`plannerHour${hour}Down`), u=$(`plannerHour${hour}Up`); if(d)d.value=bytes; if(u)u.value=bytes; updatePlannerHourSummary(hour); } }\n  function copyPlannerSpeedToHours(prefix){ const down=Number($(`${prefix}Down`)?.value||0), up=Number($(`${prefix}Up`)?.value||0); for(let hour=0;hour<24;hour++){ const d=$(`plannerHour${hour}Down`), u=$(`plannerHour${hour}Up`); if(d)d.value=down; if(u)u.value=up; updatePlannerHourSummary(hour); } }\n  function plannerHourlyPayload(){ return Array.from({length:24},(_,hour)=>({hour,down:Number($(`plannerHour${hour}Down`)?.value||0),up:Number($(`plannerHour${hour}Up`)?.value||0)})); }\n  function setPlannerSpeed(prefix,mbps){\n    const bytes=plannerMbpsToBytes(mbps);\n    ['Down','Up'].forEach(dir=>{ const input=$(`${prefix}${dir}`); if(input) input.value=bytes; });\n    updatePlannerSpeedControls(prefix);\n  }\n  function updatePlannerSpeedControls(prefix){\n    const down=Number($(`${prefix}Down`)?.value||0), up=Number($(`${prefix}Up`)?.value||0);\n    [['Down',down],['Up',up]].forEach(([dir,value])=>{ const slider=$(`${prefix}${dir}Slider`), out=$(`${prefix}${dir}Mbps`); const mbps=plannerBytesToMbps(value); if(slider){ if(mbps>Number(slider.max||0)) slider.max=String(mbps); slider.value=String(mbps); } if(out) out.textContent=plannerLimitText(value); });\n    const sum=$(`${prefix}Summary`); if(sum) sum.textContent=`DL ${plannerLimitText(down)} / UL ${plannerLimitText(up)}`;\n  }\n  function setupPlannerSpeedControls(){\n    document.querySelectorAll('.planner-speed-preset').forEach(btn=>btn.addEventListener('click',()=>setPlannerSpeed(btn.dataset.prefix,Number(btn.dataset.mbps||0))));\n    document.querySelectorAll('.planner-mbps-slider').forEach(slider=>slider.addEventListener('input',()=>{ const target=$(slider.dataset.target); if(target) target.value=plannerMbpsToBytes(Number(slider.value||0)); const prefix=(slider.dataset.target||'').replace(/(Down|Up)$/,''); updatePlannerSpeedControls(prefix); }));\n    document.querySelectorAll('.planner-byte-input').forEach(input=>input.addEventListener('input',()=>updatePlannerSpeedControls(input.id.replace(/(Down|Up)$/,''))));\n  }\n  function plannerPayload(){ return {enabled:$('plannerEnabled')?.checked,profile_name:$('plannerProfileName')?.value||'night mode',dry_run:$('plannerDryRun')?.checked,night_only_enabled:$('plannerNightOnly')?.checked,night_start:$('plannerNightStart')?.value||'23:00',night_end:$('plannerNightEnd')?.value||'07:00',quiet_hours_enabled:$('plannerQuietEnabled')?.checked,quiet_start:$('plannerQuietStart')?.value||'22:00',quiet_end:$('plannerQuietEnd')?.value||'06:00',weekday_down:Number($('plannerWeekdayDown')?.value||0),weekday_up:Number($('plannerWeekdayUp')?.value||0),weekend_down:Number($('plannerWeekendDown')?.value||0),weekend_up:Number($('plannerWeekendUp')?.value||0),hourly_schedule_enabled:$('plannerHourlyEnabled')?.checked,hourly_schedule:plannerHourlyPayload(),auto_pause_cpu_enabled:$('plannerCpuEnabled')?.checked,auto_pause_cpu_percent:Number($('plannerCpuPercent')?.value||90),auto_pause_disk_enabled:$('plannerDiskEnabled')?.checked,auto_pause_disk_percent:Number($('plannerDiskPercent')?.value||95),network_protection_enabled:$('plannerNetworkEnabled')?.checked,network_max_down:Number($('plannerNetworkDown')?.value||0),network_max_up:Number($('plannerNetworkUp')?.value||0),load_protection_enabled:$('plannerLoadEnabled')?.checked,load_cpu_percent:Number($('plannerLoadCpu')?.value||95),auto_resume:$('plannerAutoResume')?.checked,auto_resume_grace_seconds:Number($('plannerResumeGrace')?.value||0)}; }\n  function plannerOnOff(value){ return value ? 'on' : 'off'; }\n  function plannerSummaryValue(label, value){\n    return `<span class=\"planner-diagnostic-item\"><b>${esc(label)}:</b> ${esc(value)}</span>`;\n  }\n\n  // Note: Current Settings intentionally reuses the Poller Diagnostics row structure for matching radius, spacing and typography.\n  function updatePlannerCurrentSummary(state={}){\n    const box=$('plannerCurrentSummary');\n    if(!box) return;\n    const enabled=$('plannerEnabled')?.checked ?? !!state.enabled;\n    const dryRun=$('plannerDryRun')?.checked;\n    const nightStart=$('plannerNightStart')?.value || state.night_start || '--:--';\n    const nightEnd=$('plannerNightEnd')?.value || state.night_end || '--:--';\n    const quietStart=$('plannerQuietStart')?.value || state.quiet_start || '--:--';\n    const quietEnd=$('plannerQuietEnd')?.value || state.quiet_end || '--:--';\n    const items=[\n      plannerSummaryValue('Status', `${enabled ? 'on' : 'off'}${dryRun ? ' / dry-run' : ''}`),\n      plannerSummaryValue('Profile', $('plannerProfileName')?.value || state.profile_name || '-'),\n      plannerSummaryValue('Hourly', plannerOnOff($('plannerHourlyEnabled')?.checked)),\n      plannerSummaryValue('Night', `${plannerOnOff($('plannerNightOnly')?.checked)} ${nightStart}-${nightEnd}`),\n      plannerSummaryValue('Quiet', `${plannerOnOff($('plannerQuietEnabled')?.checked)} ${quietStart}-${quietEnd}`),\n      plannerSummaryValue('Protection', `CPU ${plannerOnOff($('plannerCpuEnabled')?.checked)}, disk ${plannerOnOff($('plannerDiskEnabled')?.checked)}, network ${plannerOnOff($('plannerNetworkEnabled')?.checked)}, load ${plannerOnOff($('plannerLoadEnabled')?.checked)}`),\n    ];\n    box.innerHTML=`<div><b><i class=\"fa-solid fa-sliders\"></i> Current settings</b><small class=\"planner-diagnostic-line\">${items.join('<i class=\"fa-solid fa-circle fa-2xs diagnostic-separator\" aria-hidden=\"true\"></i>')}</small></div>`;\n  }\n\n  function updatePlannerFooter(enabled,preview={}){ updatePlannerCurrentSummary(preview); const btn=$('statusPlannerOpen'); if(btn){ btn.classList.toggle('d-none',!enabled); btn.classList.toggle('text-warning',!!preview.manual_override_until); btn.title=enabled?`Planner ${preview.matched_rule||'enabled'}${preview.dry_run?' · dry-run':''}`:'Download planner is disabled.'; const span=btn.querySelector('span'); if(span) span.textContent=preview.dry_run?'Planner dry-run':preview.manual_override_until?'Planner paused':'Planner'; } const badge=$('plannerStatusBadge'); if(badge){ badge.className=`badge ${enabled?'text-bg-success':'text-bg-secondary'}`; badge.textContent=enabled?(preview.dry_run?'dry-run':preview.manual_override_until?'override':'enabled'):'off'; } }\n  function plannerDateText(value){ if(!value) return '-'; if(typeof value==='number') return formatDateTime(value); const d=new Date(value); return isNaN(d.getTime())?'-':d.toLocaleString(); }\n  function renderPlannerPreview(preview={}){ updatePlannerCurrentSummary(preview); const box=$('plannerPreview'); if(!box)return; const down=plannerLimitText(preview.down||0), up=plannerLimitText(preview.up||0); box.innerHTML=`Matched <b>${esc(preview.matched_rule||'-')}</b> · next change ${esc(plannerDateText(preview.next_change_at))} · DL ${esc(down)} / UL ${esc(up)}${preview.pause_downloads?' · pauses downloads':''}${preview.manual_override_until?' · override active':''}`; updatePlannerFooter(!!$('plannerEnabled')?.checked,preview); const ov=$('plannerOverrideStatus'); if(ov) ov.textContent=preview.manual_override_until?`Active until ${plannerDateText(preview.manual_override_until)}`:'No active override.'; }\n  function plannerHistoryDetails(row={}){ return row && typeof row==='object' ? row : {}; }\n  function plannerHistoryLimitText(value){ return plannerLimitText(Number(value||0)); }\n  function renderPlannerHistory(items=[], total=items.length){\n    const box=$('plannerHistory'); if(!box)return;\n    const body=items.length\n      ? responsiveTable(['Time','Event','Rule','DL','UL','Paused','Resumed','Dry run','Reason'],items.map(x=>{\n        // Note: Planner history uses the same table pattern as Smart Queue, with compact decision columns first.\n        const d=plannerHistoryDetails(x);\n        const event=d.event||'-';\n        const rule=d.rule||d.matched_rule||d.profile_name||'-';\n        const down=d.down!==undefined?plannerHistoryLimitText(d.down):'-';\n        const up=d.up!==undefined?plannerHistoryLimitText(d.up):'-';\n        const paused=d.paused ?? d.count ?? 0;\n        const resumed=d.resumed ?? 0;\n        const dry=d.dry_run?'yes':'-';\n        const reason=d.pause_reason||d.reason||d.manual_override_reason||'-';\n        return [dateCell(d.at),esc(event),esc(rule),esc(down),esc(up),esc(paused),esc(resumed),esc(dry),esc(reason)];\n      }),'planner-history-table')\n      : '<div class=\"empty-mini\">No Planner actions yet.</div>';\n    const canToggle=Number(total||0)>10;\n    const toggle=canToggle?`<button id=\"plannerHistoryToggle\" class=\"btn btn-xs btn-outline-secondary mt-2\"><i class=\"fa-solid fa-list\"></i> ${plannerHistoryExpanded?'Show last 10':'Show more'} (${esc(total)})</button>`:'';\n    const clear=Number(total||0)?`<button id=\"plannerHistoryClear\" class=\"btn btn-xs btn-outline-danger mt-2 ms-2\"><i class=\"fa-solid fa-trash-can\"></i> Clear history</button>`:'';\n    box.innerHTML=`${body}${toggle}${clear}`;\n  }\n  function fillPlanner(st){ if(!st)return; $('plannerEnabled')&&($('plannerEnabled').checked=!!st.enabled); $('plannerProfileName')&&($('plannerProfileName').value=st.profile_name||'night mode'); $('plannerDryRun')&&($('plannerDryRun').checked=!!st.dry_run); updatePlannerFooter(!!st.enabled,st); $('plannerHourlyEnabled')&&($('plannerHourlyEnabled').checked=!!st.hourly_schedule_enabled); const hourly=Array.isArray(st.hourly_schedule)?st.hourly_schedule:[]; for(let hour=0;hour<24;hour++){ const item=hourly.find(x=>Number(x.hour)===hour)||{}; const d=$(`plannerHour${hour}Down`), u=$(`plannerHour${hour}Up`); if(d)d.value=Number(item.down||0); if(u)u.value=Number(item.up||0); updatePlannerHourSummary(hour); } $('plannerNightOnly')&&($('plannerNightOnly').checked=!!st.night_only_enabled); $('plannerNightStart')&&($('plannerNightStart').value=st.night_start||'23:00'); $('plannerNightEnd')&&($('plannerNightEnd').value=st.night_end||'07:00'); $('plannerQuietEnabled')&&($('plannerQuietEnabled').checked=!!st.quiet_hours_enabled); $('plannerQuietStart')&&($('plannerQuietStart').value=st.quiet_start||'22:00'); $('plannerQuietEnd')&&($('plannerQuietEnd').value=st.quiet_end||'06:00'); $('plannerWeekdayDown')&&($('plannerWeekdayDown').value=st.weekday_down||0); $('plannerWeekdayUp')&&($('plannerWeekdayUp').value=st.weekday_up||0); $('plannerWeekendDown')&&($('plannerWeekendDown').value=st.weekend_down||0); $('plannerWeekendUp')&&($('plannerWeekendUp').value=st.weekend_up||0); updatePlannerSpeedControls('plannerWeekday'); updatePlannerSpeedControls('plannerWeekend'); $('plannerCpuEnabled')&&($('plannerCpuEnabled').checked=!!st.auto_pause_cpu_enabled); $('plannerCpuPercent')&&($('plannerCpuPercent').value=st.auto_pause_cpu_percent||90); $('plannerDiskEnabled')&&($('plannerDiskEnabled').checked=!!st.auto_pause_disk_enabled); $('plannerDiskPercent')&&($('plannerDiskPercent').value=st.auto_pause_disk_percent||95); $('plannerNetworkEnabled')&&($('plannerNetworkEnabled').checked=!!st.network_protection_enabled); $('plannerNetworkDown')&&($('plannerNetworkDown').value=st.network_max_down||0); $('plannerNetworkUp')&&($('plannerNetworkUp').value=st.network_max_up||0); $('plannerLoadEnabled')&&($('plannerLoadEnabled').checked=!!st.load_protection_enabled); $('plannerLoadCpu')&&($('plannerLoadCpu').value=st.load_cpu_percent||95); $('plannerAutoResume')&&($('plannerAutoResume').checked=st.auto_resume!==false); $('plannerResumeGrace')&&($('plannerResumeGrace').value=st.auto_resume_grace_seconds||0); if(st.manual_override_until) renderPlannerPreview(st); updatePlannerCurrentSummary(st); }\n  function applyPlannerPreset(){ const name=$('plannerProfileName')?.value||''; if(name==='night mode'){ $('plannerNightOnly').checked=true; $('plannerQuietEnabled').checked=false; setPlannerSpeed('plannerWeekday',100); setPlannerSpeed('plannerWeekend',250); } if(name==='weekend mode'){ $('plannerNightOnly').checked=false; setPlannerSpeed('plannerWeekday',50); setPlannerSpeed('plannerWeekend',0); } if(name==='low power mode'){ $('plannerLoadEnabled').checked=true; $('plannerCpuEnabled').checked=true; $('plannerCpuPercent').value=70; setPlannerSpeed('plannerWeekday',50); setPlannerSpeed('plannerWeekend',50); } if(name==='unlimited mode'){ $('plannerNightOnly').checked=false; $('plannerQuietEnabled').checked=false; setPlannerSpeed('plannerWeekday',0); setPlannerSpeed('plannerWeekend',0); } }\n  async function loadPlannerPreview(){ try{const limit=plannerHistoryExpanded?100:10; const j=await fetch(`/api/download-planner/preview?history_limit=${limit}`).then(r=>r.json()); renderPlannerPreview(j.preview||{}); renderPlannerHistory(j.history||[], Number(j.history_total ?? (j.history||[]).length));}catch(e){} }\n  async function loadDownloadPlanner(){ ensurePlannerToolsUI(); try{const j=await fetch('/api/download-planner').then(r=>r.json()); fillPlanner(j.settings||{}); await loadPlannerPreview();}catch(e){} }\n  async function saveDownloadPlanner(){ try{const j=await post('/api/download-planner',plannerPayload()); fillPlanner(j.settings||plannerPayload()); await loadPlannerPreview(); toast('Download planner saved','success');}catch(e){toast(e.message,'danger');} }\n  async function applyDownloadPlannerNow(dryRun=false){ try{const j=await post('/api/download-planner/check',{dry_run:!!dryRun}); const r=j.result||{}; if(r.settings) fillPlanner(r.settings); renderPlannerPreview(r.preview||r); if(r.history) renderPlannerHistory(r.history, r.history_total ?? r.history.length); else await loadPlannerPreview(); toastMessage('toast.plannerApplied','success',{dryRun,paused:r.paused,resumed:r.resumed,limitsChanged:r.limits_changed});}catch(e){toast(e.message,'danger');} }\n  async function setPlannerOverride(){ try{const seconds=Number($('plannerOverrideSeconds')?.value||0); await post('/api/download-planner/override',{seconds}); toast(seconds?'Planner override set':'Planner override cleared','success'); await loadDownloadPlanner();}catch(e){toast(e.message,'danger');} }\n";
diff --git a/pytorrent/static/js/plannerPreviewHistory.js b/pytorrent/static/js/plannerPreviewHistory.js
new file mode 100644
index 0000000..f868bd4
--- /dev/null
+++ b/pytorrent/static/js/plannerPreviewHistory.js
@@ -0,0 +1 @@
+export const plannerPreviewHistorySource = "";
diff --git a/pytorrent/static/js/plannerSettings.js b/pytorrent/static/js/plannerSettings.js
new file mode 100644
index 0000000..1284358
--- /dev/null
+++ b/pytorrent/static/js/plannerSettings.js
@@ -0,0 +1 @@
+export const plannerSettingsSource = "  function plannerPayload(){ return {enabled:$('plannerEnabled')?.checked,profile_name:$('plannerProfileName')?.value||'night mode',dry_run:$('plannerDryRun')?.checked,night_only_enabled:$('plannerNightOnly')?.checked,night_start:$('plannerNightStart')?.value||'23:00',night_end:$('plannerNightEnd')?.value||'07:00',quiet_hours_enabled:$('plannerQuietEnabled')?.checked,quiet_start:$('plannerQuietStart')?.value||'22:00',quiet_end:$('plannerQuietEnd')?.value||'06:00',weekday_down:Number($('plannerWeekdayDown')?.value||0),weekday_up:Number($('plannerWeekdayUp')?.value||0),weekend_down:Number($('plannerWeekendDown')?.value||0),weekend_up:Number($('plannerWeekendUp')?.value||0),hourly_schedule_enabled:$('plannerHourlyEnabled')?.checked,hourly_schedule:plannerHourlyPayload(),auto_pause_cpu_enabled:$('plannerCpuEnabled')?.checked,auto_pause_cpu_percent:Number($('plannerCpuPercent')?.value||90),auto_pause_disk_enabled:$('plannerDiskEnabled')?.checked,auto_pause_disk_percent:Number($('plannerDiskPercent')?.value||95),network_protection_enabled:$('plannerNetworkEnabled')?.checked,network_max_down:Number($('plannerNetworkDown')?.value||0),network_max_up:Number($('plannerNetworkUp')?.value||0),load_protection_enabled:$('plannerLoadEnabled')?.checked,load_cpu_percent:Number($('plannerLoadCpu')?.value||95),auto_resume:$('plannerAutoResume')?.checked,auto_resume_grace_seconds:Number($('plannerResumeGrace')?.value||0)}; }\n  function plannerOnOff(value){ return value ? 'on' : 'off'; }\n  function plannerSummaryValue(label, value){\n    return `<span class=\"planner-diagnostic-item\"><b>${esc(label)}:</b> ${esc(value)}</span>`;\n  }\n\n  // Note: Current Settings intentionally reuses the Poller Diagnostics row structure for matching radius, spacing and typography.\n  function updatePlannerCurrentSummary(state={}){\n    const box=$('plannerCurrentSummary');\n    if(!box) return;\n    const enabled=$('plannerEnabled')?.checked ?? !!state.enabled;\n    const dryRun=$('plannerDryRun')?.checked;\n    const nightStart=$('plannerNightStart')?.value || state.night_start || '--:--';\n    const nightEnd=$('plannerNightEnd')?.value || state.night_end || '--:--';\n    const quietStart=$('plannerQuietStart')?.value || state.quiet_start || '--:--';\n    const quietEnd=$('plannerQuietEnd')?.value || state.quiet_end || '--:--';\n    const items=[\n      plannerSummaryValue('Status', `${enabled ? 'on' : 'off'}${dryRun ? ' / dry-run' : ''}`),\n      plannerSummaryValue('Profile', $('plannerProfileName')?.value || state.profile_name || '-'),\n      plannerSummaryValue('Hourly', plannerOnOff($('plannerHourlyEnabled')?.checked)),\n      plannerSummaryValue('Night', `${plannerOnOff($('plannerNightOnly')?.checked)} ${nightStart}-${nightEnd}`),\n      plannerSummaryValue('Quiet', `${plannerOnOff($('plannerQuietEnabled')?.checked)} ${quietStart}-${quietEnd}`),\n      plannerSummaryValue('Protection', `CPU ${plannerOnOff($('plannerCpuEnabled')?.checked)}, disk ${plannerOnOff($('plannerDiskEnabled')?.checked)}, network ${plannerOnOff($('plannerNetworkEnabled')?.checked)}, load ${plannerOnOff($('plannerLoadEnabled')?.checked)}`),\n    ];\n    box.innerHTML=`<div><b><i class=\"fa-solid fa-sliders\"></i> Current settings</b><small class=\"planner-diagnostic-line\">${items.join('<i class=\"fa-solid fa-circle fa-2xs diagnostic-separator\" aria-hidden=\"true\"></i>')}</small></div>`;\n  }\n\n  function updatePlannerFooter(enabled,preview={}){ updatePlannerCurrentSummary(preview); const btn=$('statusPlannerOpen'); if(btn){ btn.classList.toggle('d-none',!enabled); btn.classList.toggle('text-warning',!!preview.manual_override_until); btn.title=enabled?`Planner ${preview.matched_rule||'enabled'}${preview.dry_run?' · dry-run':''}`:'Download planner is disabled.'; const span=btn.querySelector('span'); if(span) span.textContent=preview.dry_run?'Planner dry-run':preview.manual_override_until?'Planner paused':'Planner'; } const badge=$('plannerStatusBadge'); if(badge){ badge.className=`badge ${enabled?'text-bg-success':'text-bg-secondary'}`; badge.textContent=enabled?(preview.dry_run?'dry-run':preview.manual_override_until?'override':'enabled'):'off'; } }\n  function plannerDateText(value){ if(!value) return '-'; if(typeof value==='number') return formatDateTime(value); const d=new Date(value); return isNaN(d.getTime())?'-':d.toLocaleString(); }\n";
diff --git a/pytorrent/static/js/plannerSpeedControls.js b/pytorrent/static/js/plannerSpeedControls.js
new file mode 100644
index 0000000..88b63c2
--- /dev/null
+++ b/pytorrent/static/js/plannerSpeedControls.js
@@ -0,0 +1 @@
+export const plannerSpeedControlsSource = "  const plannerMbpsToBytes=mbps=>mbps?Math.round(Number(mbps)*1000000/8):0;\n  const plannerBytesToMbps=bytes=>bytes?Math.round(Number(bytes)*8/1000000):0;\n  function plannerLimitText(bytes){ const mbps=plannerBytesToMbps(Number(bytes||0)); return mbps?`${mbps} Mbit/s`:'Unlimited'; }\n  function plannerHourLabel(hour){ return `${String(hour).padStart(2,'0')}:00-${String((hour+1)%24).padStart(2,'0')}:00`; }\n  function renderPlannerHourlyGrid(){\n    const box=$('plannerHourlyGrid'); if(!box) return;\n    box.innerHTML=Array.from({length:24},(_,hour)=>`<div class=\"planner-hour-row\" data-hour=\"${hour}\"><span>${plannerHourLabel(hour)}</span><input id=\"plannerHour${hour}Down\" class=\"form-control form-control-sm planner-hour-input\" type=\"number\" min=\"0\" step=\"1024\" placeholder=\"DL B/s\"><input id=\"plannerHour${hour}Up\" class=\"form-control form-control-sm planner-hour-input\" type=\"number\" min=\"0\" step=\"1024\" placeholder=\"UL B/s\"><small id=\"plannerHour${hour}Summary\">Unlimited</small></div>`).join('');\n    document.querySelectorAll('.planner-hour-input').forEach(input=>input.addEventListener('input',()=>updatePlannerHourSummary(Number(input.closest('.planner-hour-row')?.dataset.hour||0))));\n  }\n  function updatePlannerHourSummary(hour){ const down=Number($(`plannerHour${hour}Down`)?.value||0), up=Number($(`plannerHour${hour}Up`)?.value||0); const out=$(`plannerHour${hour}Summary`); if(out) out.textContent=`DL ${plannerLimitText(down)} / UL ${plannerLimitText(up)}`; }\n  function fillPlannerHours(mbps){ const bytes=plannerMbpsToBytes(mbps); for(let hour=0;hour<24;hour++){ const d=$(`plannerHour${hour}Down`), u=$(`plannerHour${hour}Up`); if(d)d.value=bytes; if(u)u.value=bytes; updatePlannerHourSummary(hour); } }\n  function copyPlannerSpeedToHours(prefix){ const down=Number($(`${prefix}Down`)?.value||0), up=Number($(`${prefix}Up`)?.value||0); for(let hour=0;hour<24;hour++){ const d=$(`plannerHour${hour}Down`), u=$(`plannerHour${hour}Up`); if(d)d.value=down; if(u)u.value=up; updatePlannerHourSummary(hour); } }\n  function plannerHourlyPayload(){ return Array.from({length:24},(_,hour)=>({hour,down:Number($(`plannerHour${hour}Down`)?.value||0),up:Number($(`plannerHour${hour}Up`)?.value||0)})); }\n  function setPlannerSpeed(prefix,mbps){\n    const bytes=plannerMbpsToBytes(mbps);\n    ['Down','Up'].forEach(dir=>{ const input=$(`${prefix}${dir}`); if(input) input.value=bytes; });\n    updatePlannerSpeedControls(prefix);\n  }\n  function updatePlannerSpeedControls(prefix){\n    const down=Number($(`${prefix}Down`)?.value||0), up=Number($(`${prefix}Up`)?.value||0);\n    [['Down',down],['Up',up]].forEach(([dir,value])=>{ const slider=$(`${prefix}${dir}Slider`), out=$(`${prefix}${dir}Mbps`); const mbps=plannerBytesToMbps(value); if(slider){ if(mbps>Number(slider.max||0)) slider.max=String(mbps); slider.value=String(mbps); } if(out) out.textContent=plannerLimitText(value); });\n    const sum=$(`${prefix}Summary`); if(sum) sum.textContent=`DL ${plannerLimitText(down)} / UL ${plannerLimitText(up)}`;\n  }\n  function setupPlannerSpeedControls(){\n    document.querySelectorAll('.planner-speed-preset').forEach(btn=>btn.addEventListener('click',()=>setPlannerSpeed(btn.dataset.prefix,Number(btn.dataset.mbps||0))));\n    document.querySelectorAll('.planner-mbps-slider').forEach(slider=>slider.addEventListener('input',()=>{ const target=$(slider.dataset.target); if(target) target.value=plannerMbpsToBytes(Number(slider.value||0)); const prefix=(slider.dataset.target||'').replace(/(Down|Up)$/,''); updatePlannerSpeedControls(prefix); }));\n    document.querySelectorAll('.planner-byte-input').forEach(input=>input.addEventListener('input',()=>updatePlannerSpeedControls(input.id.replace(/(Down|Up)$/,''))));\n  }\n";
diff --git a/pytorrent/static/js/plannerToolsUi.js b/pytorrent/static/js/plannerToolsUi.js
new file mode 100644
index 0000000..048d3c8
--- /dev/null
+++ b/pytorrent/static/js/plannerToolsUi.js
@@ -0,0 +1 @@
+export const plannerToolsUiSource = "  function ensurePlannerToolsUI(){\n    addToolTab('planner','fa-calendar-days','Planner','appstatus');\n    addToolTab('poller','fa-satellite-dish','Poller','appstatus');\n    const host=$('toolRss')?.parentElement || document.querySelector('#toolsModal .modal-body');\n    if(!host) return;\n    if(!$('toolPlanner')){\n      const panel=document.createElement('div');\n      panel.id='toolPlanner'; panel.className='d-none';\n      panel.innerHTML=`<div class=\"column-manager-tabs mb-3\">\n        <ul class=\"nav nav-pills\" role=\"tablist\">\n          <li class=\"nav-item\"><button class=\"nav-link active\" data-bs-toggle=\"pill\" data-bs-target=\"#plannerPane-settings\" type=\"button\" role=\"tab\"><i class=\"fa-solid fa-sliders\"></i> Settings</button></li>\n          <li class=\"nav-item\"><button class=\"nav-link\" data-bs-toggle=\"pill\" data-bs-target=\"#plannerPane-history\" type=\"button\" role=\"tab\"><i class=\"fa-solid fa-clock-rotate-left\"></i> Action history</button></li>\n        </ul>\n      </div>\n      <div class=\"tab-content\">\n        <div id=\"plannerPane-settings\" class=\"tab-pane fade show active\" role=\"tabpanel\">\n          <div class=\"surface-section smart-panel planner-panel\">\n            <div class=\"smart-header planner-hero\">\n              <div class=\"section-title\"><i class=\"fa-solid fa-calendar-days\"></i> Download planner <span id=\"plannerStatusBadge\" class=\"badge text-bg-secondary\">off</span></div>\n              <div class=\"smart-header-actions\">${inlineSwitch('plannerEnabled')}</div>\n            </div>\n            <div id=\"plannerCurrentSummary\" class=\"smart-setting-row planner-current-summary mb-3\"><div><b><i class=\"fa-solid fa-sliders\"></i> Current settings</b><small class=\"planner-diagnostic-line\">Loading planner settings...</small></div></div>\n            <div class=\"planner-layout\">\n              <details class=\"planner-card planner-card-primary planner-disclosure\" open>\n                <summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-sliders\"></i> Basics</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary>\n                <div class=\"smart-input-grid planner-profile-grid\">\n                  <label class=\"smart-input-field\"><span>Planner profile</span><select id=\"plannerProfileName\" class=\"form-select form-select-sm\"><option value=\"night mode\">night mode</option><option value=\"weekend mode\">weekend mode</option><option value=\"low power mode\">low power mode</option><option value=\"unlimited mode\">unlimited mode</option></select><small>Saved per active rTorrent profile.</small></label>\n                  <label class=\"smart-input-field\"><span>Auto-resume grace s</span><input id=\"plannerResumeGrace\" class=\"form-control form-control-sm\" type=\"number\" min=\"0\" step=\"30\"><small>Wait before resuming planner-paused torrents.</small></label>\n                  <label class=\"smart-input-field\"><span>Manual override</span><select id=\"plannerOverrideSeconds\" class=\"form-select form-select-sm\"><option value=\"0\">clear override</option><option value=\"1800\">disable for 30 min</option><option value=\"3600\">disable for 1 hour</option><option value=\"7200\">disable for 2 hours</option></select><small id=\"plannerOverrideStatus\">No active override.</small></label>\n                  <label class=\"smart-input-field\"><span>Mode</span>${inlineSwitch('plannerDryRun')}<small>Dry-run previews actions without changing rTorrent.</small></label>\n                </div>\n              </details>\n              <details class=\"planner-card planner-disclosure\">\n                <summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-clock\"></i> Hourly speed planner</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary>\n                ${plannerToggleRow('plannerHourlyEnabled','Use hourly speed limits','When enabled, the current hour overrides weekday and weekend speed limits.')}\n                <div class=\"planner-hour-tools\"><button class=\"btn btn-xs btn-outline-secondary planner-hour-fill\" data-mbps=\"0\">Unlimited all day</button><button class=\"btn btn-xs btn-outline-secondary planner-hour-fill\" data-mbps=\"50\">50 Mbit/s all day</button><button class=\"btn btn-xs btn-outline-secondary planner-hour-fill\" data-mbps=\"100\">100 Mbit/s all day</button><button class=\"btn btn-xs btn-outline-primary\" id=\"plannerHourCopyWeekday\" type=\"button\">Copy weekday limit</button></div>\n                <div id=\"plannerHourlyGrid\" class=\"planner-hour-grid\"></div>\n              </details>\n              <details class=\"planner-card planner-disclosure\">\n                <summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-calendar-week\"></i> Fallback speed limits</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary>\n                <div class=\"smart-input-grid planner-speed-grid\">${plannerSpeedCard('plannerWeekday','Weekday limits','Used when hourly planner is disabled')}${plannerSpeedCard('plannerWeekend','Weekend limits','Saturday and Sunday fallback')}</div>\n              </details>\n              <details class=\"planner-card planner-card-time planner-disclosure\">\n                <summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-moon\"></i> Time windows</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary>\n                <div class=\"planner-toggle-stack planner-toggle-stack-compact\">\n                  ${plannerToggleRow('plannerNightOnly','Download only at night','Pause downloads outside the selected window.')}\n                  ${plannerToggleRow('plannerQuietEnabled','Quiet hours','Pause active downloads during the selected quiet window.')}\n                </div>\n                <div class=\"smart-input-grid planner-time-grid\">\n                  <label class=\"smart-input-field\"><span>Night start</span><input id=\"plannerNightStart\" class=\"form-control form-control-sm\" type=\"time\"></label>\n                  <label class=\"smart-input-field\"><span>Night end</span><input id=\"plannerNightEnd\" class=\"form-control form-control-sm\" type=\"time\"></label>\n                  <label class=\"smart-input-field\"><span>Quiet start</span><input id=\"plannerQuietStart\" class=\"form-control form-control-sm\" type=\"time\"><small>Used only when quiet hours are enabled.</small></label>\n                  <label class=\"smart-input-field\"><span>Quiet end</span><input id=\"plannerQuietEnd\" class=\"form-control form-control-sm\" type=\"time\"><small>Downloads pause and DL limit is set to 0.</small></label>\n                </div>\n              </details>\n              <details class=\"planner-card planner-card-protection planner-disclosure\">\n                <summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-shield-halved\"></i> Protection</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary>\n                <div class=\"planner-toggle-stack planner-protection-toggles\">\n                  ${plannerToggleRow('plannerCpuEnabled','CPU protection','Pause downloads when CPU usage stays above the threshold for about 10 seconds.')}\n                  ${plannerToggleRow('plannerDiskEnabled','Disk protection','Pause downloads and block new download starts when disk usage is high.')}\n                  ${plannerToggleRow('plannerNetworkEnabled','Network protection','Clamp Planner speed limits to configured network caps.')}\n                  ${plannerToggleRow('plannerLoadEnabled','Load protection','Pause downloads when system load is above threshold.')}\n                  ${plannerToggleRow('plannerAutoResume','Auto resume planner-paused torrents','Resume only torrents paused by the planner when all protection rules become clear.')}\n                </div>\n                <div class=\"smart-input-grid planner-protection-grid\">\n                  <label class=\"smart-input-field\"><span>CPU threshold %</span><input id=\"plannerCpuPercent\" class=\"form-control form-control-sm\" type=\"number\" min=\"1\" max=\"100\"></label>\n                  <label class=\"smart-input-field\"><span>Disk threshold %</span><input id=\"plannerDiskPercent\" class=\"form-control form-control-sm\" type=\"number\" min=\"1\" max=\"100\"><small>Uses the disk source configured in Preferences.</small></label>\n                  <label class=\"smart-input-field\"><span>Network max DL B/s</span><input id=\"plannerNetworkDown\" class=\"form-control form-control-sm\" type=\"number\" min=\"0\"><small>0 keeps scheduled limit.</small></label>\n                  <label class=\"smart-input-field\"><span>Network max UL B/s</span><input id=\"plannerNetworkUp\" class=\"form-control form-control-sm\" type=\"number\" min=\"0\"><small>Optional load/network cap.</small></label>\n                  <label class=\"smart-input-field\"><span>Load CPU %</span><input id=\"plannerLoadCpu\" class=\"form-control form-control-sm\" type=\"number\" min=\"1\" max=\"100\"><small>Network/load protection trigger.</small></label>\n                </div>\n              </details>\n              <details class=\"planner-card planner-card-result planner-disclosure\" open><summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-eye\"></i> Preview</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary><small id=\"plannerPreview\">No preview loaded.</small></details>\n            </div>\n            <div class=\"tool-action-row planner-actions\"><button id=\"plannerSaveBtn\" class=\"btn btn-primary btn-sm\"><i class=\"fa-solid fa-floppy-disk\"></i> Save planner</button><button id=\"plannerCheckBtn\" class=\"btn btn-success btn-sm\"><i class=\"fa-solid fa-play\"></i> Apply now</button><button id=\"plannerDryRunBtn\" class=\"btn btn-outline-secondary btn-sm\"><i class=\"fa-solid fa-vial\"></i> Dry-run now</button><button id=\"plannerOverrideBtn\" class=\"btn btn-outline-warning btn-sm\"><i class=\"fa-solid fa-pause\"></i> Set override</button><button id=\"plannerPreviewBtn\" class=\"btn btn-outline-secondary btn-sm\"><i class=\"fa-solid fa-eye\"></i> Refresh preview</button></div>\n          </div>\n        </div>\n        <div id=\"plannerPane-history\" class=\"tab-pane fade\" role=\"tabpanel\">\n          <div class=\"surface-section smart-panel planner-panel\">\n            <div class=\"section-title\"><i class=\"fa-solid fa-clock-rotate-left\"></i> Action history</div><div id=\"plannerHistory\" class=\"mt-2\">No actions yet.</div>\n          </div>\n        </div>\n      </div>`\n      host.appendChild(panel);\n      renderPlannerHourlyGrid();\n      // Note: Planner cards are collapsed by default; the summary bar keeps the active state visible.\n      panel.addEventListener('change', e=>{ if(e.target.closest('#toolPlanner')) updatePlannerCurrentSummary(); });\n      $('plannerSaveBtn')?.addEventListener('click',saveDownloadPlanner);\n      $('plannerCheckBtn')?.addEventListener('click',()=>applyDownloadPlannerNow(false));\n      $('plannerDryRunBtn')?.addEventListener('click',()=>applyDownloadPlannerNow(true));\n      $('plannerOverrideBtn')?.addEventListener('click',setPlannerOverride);\n      $('plannerPreviewBtn')?.addEventListener('click',loadPlannerPreview);\n      $('plannerHistory')?.addEventListener('click',async e=>{\n        const toggle=e.target.closest('#plannerHistoryToggle');\n        const clear=e.target.closest('#plannerHistoryClear');\n        if(toggle){ plannerHistoryExpanded=!plannerHistoryExpanded; await loadPlannerPreview(); return; }\n        if(clear && confirm('Clear Planner action history?')){\n          try{ await post('/api/download-planner/history',{},'DELETE'); plannerHistoryExpanded=false; await loadPlannerPreview(); toast('Planner history cleared','success'); }\n          catch(err){ toast(err.message,'danger'); }\n        }\n      });\n      $('plannerProfileName')?.addEventListener('change',applyPlannerPreset);\n      $('plannerHourCopyWeekday')?.addEventListener('click',()=>copyPlannerSpeedToHours('plannerWeekday'));\n      document.querySelectorAll('.planner-hour-fill').forEach(btn=>btn.addEventListener('click',()=>fillPlannerHours(Number(btn.dataset.mbps||0))));\n      setupPlannerSpeedControls();\n    }\n    if(!$('toolPoller')){\n      const panel=document.createElement('div');\n      panel.id='toolPoller'; panel.className='d-none';\n      panel.innerHTML=`<div class=\"surface-section smart-panel poller-panel\">\n        <div class=\"smart-header\">\n          <div><div class=\"section-title\"><i class=\"fa-solid fa-satellite-dish\"></i> Smart poller <span id=\"pollerStatusBadge\" class=\"badge text-bg-secondary\">normal</span></div><div class=\"tool-note\">Controls separate lightweight live polling and slower full torrent-list polling per active rTorrent profile.</div></div>\n          <div class=\"smart-header-actions\">${inlineSwitch('pollerAdaptive')}</div>\n        </div>\n        <div class=\"smart-settings-list poller-layout\">\n          <details class=\"planner-card poller-card poller-disclosure\" open>\n            <summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-gauge-high\"></i> Adaptive behavior</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary>\n            <div class=\"tool-note mb-2\">These values decide when the poller slows down, recovers after errors, or switches between active and idle refreshes.</div>\n            <div class=\"smart-input-grid poller-input-grid\">\n              <label class=\"smart-input-field\"><span>Active interval s</span><input id=\"pollerActive\" class=\"form-control form-control-sm\" type=\"number\" min=\"0.5\" step=\"0.5\"><small>Base interval while torrents are active. Safe fallback keeps this at least 3s.</small></label>\n              <label class=\"smart-input-field\"><span>Idle interval s</span><input id=\"pollerIdle\" class=\"form-control form-control-sm\" type=\"number\" min=\"1\" step=\"1\"><small>Base interval when there is no active torrent activity. Safe fallback keeps this at least 15s.</small></label>\n              <label class=\"smart-input-field\"><span>Error interval s</span><input id=\"pollerError\" class=\"form-control form-control-sm\" type=\"number\" min=\"2\" step=\"1\"><small>Delay after rTorrent errors before trying again.</small></label>\n              <label class=\"smart-input-field\"><span>Slow threshold ms</span><input id=\"pollerSlowThreshold\" class=\"form-control form-control-sm\" type=\"number\" min=\"100\" step=\"100\"><small>Response time that triggers adaptive slowdown.</small></label>\n              <label class=\"smart-input-field\"><span>Slowdown multiplier</span><input id=\"pollerSlowdown\" class=\"form-control form-control-sm\" type=\"number\" min=\"1\" step=\"0.5\"><small>Backoff factor used when rTorrent is slow.</small></label>\n              <label class=\"smart-input-field\"><span>Recovery errors</span><input id=\"pollerRecoveryErrors\" class=\"form-control form-control-sm\" type=\"number\" min=\"1\" step=\"1\"><small>Repeated errors required before recovery mode.</small></label>\n            </div>\n          </details>\n          <details class=\"planner-card poller-card poller-disclosure\" open>\n            <summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-bolt\"></i> Live poller</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary>\n            <div class=\"tool-note mb-2\">Fast lightweight loop for volatile data: speeds, torrent status changes and UI heartbeat. It should stay responsive, but not below the safe baseline on busy rTorrent instances.</div>\n            <div class=\"smart-input-grid poller-input-grid\">\n              <label class=\"smart-input-field\"><span>Live stats s</span><input id=\"pollerLiveStats\" class=\"form-control form-control-sm\" type=\"number\" min=\"0.5\" step=\"0.5\"><small>Lightweight speed/status refresh. Safe fallback keeps this at least 3s.</small></label>\n              <label class=\"smart-input-field\"><span>System stats s</span><input id=\"pollerSystem\" class=\"form-control form-control-sm\" type=\"number\" min=\"1\" step=\"1\"><small>CPU, RAM and live status telemetry. Safe fallback keeps this at least 5s.</small></label>\n              <label class=\"smart-input-field\"><span>Heartbeat s</span><input id=\"pollerHeartbeat\" class=\"form-control form-control-sm\" type=\"number\" min=\"2\" step=\"1\"><small>Minimum heartbeat spacing when no visible data changed.</small></label>\n            </div>\n          </details>\n          <details class=\"planner-card poller-card poller-disclosure\" open>\n            <summary class=\"planner-card-title\"><span><i class=\"fa-solid fa-list-check\"></i> Full poller</span><i class=\"fa-solid fa-chevron-down planner-card-chevron\"></i></summary>\n            <div class=\"tool-note mb-2\">Slower loop for heavier work: full torrent snapshot/diff, tracker summary, disk state, queue, jobs and planner checks.</div>\n            <div class=\"smart-input-grid poller-input-grid\">\n              <label class=\"smart-input-field\"><span>Torrent list s</span><input id=\"pollerTorrentList\" class=\"form-control form-control-sm\" type=\"number\" min=\"5\" step=\"5\"><small>Full torrent snapshot and diff loop. Safe fallback keeps this at least 30s.</small></label>\n              <label class=\"smart-input-field\"><span>Tracker stats s</span><input id=\"pollerTracker\" class=\"form-control form-control-sm\" type=\"number\" min=\"10\" step=\"5\"><small>Tracker summary refresh. Safe fallback keeps this at least 300s.</small></label>\n              <label class=\"smart-input-field\"><span>Disk stats s</span><input id=\"pollerDisk\" class=\"form-control form-control-sm\" type=\"number\" min=\"5\" step=\"5\"><small>Disk usage refresh. Safe fallback keeps this at least 60s.</small></label>\n              <label class=\"smart-input-field\"><span>Queue/job stats s</span><input id=\"pollerQueue\" class=\"form-control form-control-sm\" type=\"number\" min=\"5\" step=\"5\"><small>Smart Queue, jobs and planner checks. Safe fallback keeps this at least 15s.</small></label>\n            </div>\n          </details>\n          ${plannerToggleRow('pollerSafeFallback','Safe fallback mode','When enabled, unsafe intervals are raised before saving. It protects rTorrent and the browser from too-aggressive refresh loops while keeping values that are already safe unchanged.')}\n          <div id=\"pollerSafeFallbackPreview\" class=\"poller-safe-preview\">Enable Safe fallback mode to protect the app from too-aggressive poller intervals.</div>\n          <div class=\"smart-setting-row poller-diagnostics-row\"><div><b><i class=\"fa-solid fa-stethoscope\"></i> Diagnostics</b><small id=\"pollerRuntime\" class=\"poller-diagnostic-line\">Not loaded.</small></div></div>\n        </div>\n        <div class=\"tool-action-row planner-actions\"><button id=\"pollerSaveBtn\" class=\"btn btn-primary btn-sm\"><i class=\"fa-solid fa-floppy-disk\"></i> Save poller</button><button id=\"pollerReloadBtn\" class=\"btn btn-outline-secondary btn-sm\"><i class=\"fa-solid fa-rotate\"></i> Reload</button></div>\n      </div>`;\n      host.appendChild(panel);\n      $('pollerSaveBtn')?.addEventListener('click',savePollerSettings);\n      $('pollerReloadBtn')?.addEventListener('click',loadPollerSettings);\n      document.querySelectorAll('#toolPoller input').forEach(input=>input.addEventListener('input',()=>{ if(typeof updatePollerSafeFallbackPreview==='function') updatePollerSafeFallbackPreview(); }));\n      document.querySelectorAll('#toolPoller input').forEach(input=>input.addEventListener('change',()=>{ if(typeof updatePollerSafeFallbackPreview==='function') updatePollerSafeFallbackPreview(); }));\n      if(typeof updatePollerSafeFallbackPreview==='function') updatePollerSafeFallbackPreview();\n    }\n  }\n";
diff --git a/pytorrent/static/js/pollerSettings.js b/pytorrent/static/js/pollerSettings.js
new file mode 100644
index 0000000..8fbe08d
--- /dev/null
+++ b/pytorrent/static/js/pollerSettings.js
@@ -0,0 +1 @@
+export const pollerSettingsSource = "  function pollerPayload(){return {adaptive_enabled:$('pollerAdaptive')?.checked,safe_fallback_enabled:$('pollerSafeFallback')?.checked,active_interval_seconds:Number($('pollerActive')?.value||3),idle_interval_seconds:Number($('pollerIdle')?.value||15),error_interval_seconds:Number($('pollerError')?.value||30),live_stats_interval_seconds:Number($('pollerLiveStats')?.value||3),torrent_list_interval_seconds:Number($('pollerTorrentList')?.value||30),system_stats_interval_seconds:Number($('pollerSystem')?.value||1),tracker_stats_interval_seconds:Number($('pollerTracker')?.value||30),disk_stats_interval_seconds:Number($('pollerDisk')?.value||30),queue_stats_interval_seconds:Number($('pollerQueue')?.value||5),slow_stats_interval_seconds:Number($('pollerQueue')?.value||5),heartbeat_interval_seconds:Number($('pollerHeartbeat')?.value||5),slow_response_threshold_ms:Number($('pollerSlowThreshold')?.value||10000),slowdown_multiplier:Number($('pollerSlowdown')?.value||1),recovery_after_errors:Number($('pollerRecoveryErrors')?.value||3),emit_heartbeat_on_change:true};}\n  function updatePollerBadge(rt={}){ const badge=$('pollerStatusBadge'); if(!badge)return; const adaptive=rt.adaptive_enabled!==false; const mode=adaptive?(rt.adaptive_mode||'normal'):'fixed'; badge.className=`badge ${mode==='recovery'?'text-bg-danger':mode==='slowdown'?'text-bg-warning':mode==='idle'||mode==='fixed'?'text-bg-secondary':'text-bg-success'}`; badge.textContent=mode==='fixed'?'fixed interval':mode; }\n  const POLLER_SAFE_BASELINE={pollerActive:3,pollerIdle:15,pollerError:30,pollerLiveStats:3,pollerTorrentList:30,pollerSystem:5,pollerTracker:300,pollerDisk:60,pollerQueue:15,pollerHeartbeat:15};\n  const POLLER_SAFE_LABELS={pollerActive:'Active interval',pollerIdle:'Idle interval',pollerError:'Error interval',pollerLiveStats:'Live stats',pollerTorrentList:'Torrent list',pollerSystem:'System stats',pollerTracker:'Tracker stats',pollerDisk:'Disk stats',pollerQueue:'Queue/job stats',pollerHeartbeat:'Heartbeat'};\n  function pollerInputNumber(id){ return Number($(id)?.value||0); }\n  function updatePollerSafeFallbackPreview(){ const box=$('pollerSafeFallbackPreview'); if(!box) return; const enabled=$('pollerSafeFallback')?.checked!==false; const changes=Object.entries(POLLER_SAFE_BASELINE).filter(([id,min])=>pollerInputNumber(id)>0 && pollerInputNumber(id)<min).map(([id,min])=>`${POLLER_SAFE_LABELS[id]} ${esc(pollerInputNumber(id))}s → ${esc(min)}s`); if(!enabled){ box.innerHTML='Safe fallback mode is off. Saved values can use the normal backend limits, including more aggressive intervals.'; return; } box.innerHTML=changes.length?`Safe fallback will change: <b>${changes.join('</b>, <b>')}</b>. Other values stay unchanged.`:'Safe fallback is on. Current values are already within the safe baseline, so saving will keep them unchanged.'; }\n  function fillPoller(st,rt){ if(!st){ const merged={...(rt||{})}; if($('pollerAdaptive') && merged.adaptive_enabled===undefined) merged.adaptive_enabled=$('pollerAdaptive').checked; if(rt && $('pollerRuntime')) $('pollerRuntime').innerHTML=pollerDiagnostics(merged); updatePollerBadge(merged); updatePollerSafeFallbackPreview(); return; } $('pollerAdaptive')&&($('pollerAdaptive').checked=!!st.adaptive_enabled); $('pollerSafeFallback')&&($('pollerSafeFallback').checked=st.safe_fallback_enabled!==false); $('pollerActive')&&($('pollerActive').value=st.active_interval_seconds??3); $('pollerIdle')&&($('pollerIdle').value=st.idle_interval_seconds??15); $('pollerError')&&($('pollerError').value=st.error_interval_seconds??30); $('pollerLiveStats')&&($('pollerLiveStats').value=st.live_stats_interval_seconds??3); $('pollerTorrentList')&&($('pollerTorrentList').value=st.torrent_list_interval_seconds??30); $('pollerSystem')&&($('pollerSystem').value=st.system_stats_interval_seconds??5); $('pollerTracker')&&($('pollerTracker').value=st.tracker_stats_interval_seconds??300); $('pollerDisk')&&($('pollerDisk').value=st.disk_stats_interval_seconds||60); $('pollerQueue')&&($('pollerQueue').value=st.queue_stats_interval_seconds??15); $('pollerHeartbeat')&&($('pollerHeartbeat').value=st.heartbeat_interval_seconds??15); $('pollerSlowThreshold')&&($('pollerSlowThreshold').value=st.slow_response_threshold_ms??8000); $('pollerSlowdown')&&($('pollerSlowdown').value=st.slowdown_multiplier??2); $('pollerRecoveryErrors')&&($('pollerRecoveryErrors').value=st.recovery_after_errors||3); if($('pollerRuntime')) $('pollerRuntime').innerHTML=rt?pollerDiagnostics({...rt,adaptive_enabled:st.adaptive_enabled}):''; updatePollerBadge(rt?{...rt,adaptive_enabled:st.adaptive_enabled}:{adaptive_enabled:st.adaptive_enabled}); updatePollerSafeFallbackPreview(); }\n  function pollerDiagnosticItem(label,value){ return `<span class=\"poller-diagnostic-item\"><b>${esc(label)}:</b> <span>${value}</span></span>`; }\n  function pollerDiagnosticGroup(title,items){ return `<span class=\"poller-diagnostic-group\"><b class=\"poller-diagnostic-group-title\">${esc(title)}</b><span class=\"poller-diagnostic-values\">${items.join('')}</span></span>`; }\n  function pollerDiagnostics(rt={}){ const adaptive=rt.adaptive_enabled!==false; const mode=adaptive?(rt.adaptive_mode||'normal'):'fixed interval'; const live=[pollerDiagnosticItem('Polls',esc(rt.live_poll_count||0)),pollerDiagnosticItem('Last',`${esc(rt.last_live_duration_ms||0)} ms`),pollerDiagnosticItem('Updated',esc(rt.last_live_updated_count||0)),pollerDiagnosticItem('Full refresh',rt.last_live_requires_full_refresh?'yes':'no'),pollerDiagnosticItem('Interval',`${esc(rt.live_stats_interval_seconds||rt.effective_interval_seconds||0)}s`)]; const full=[pollerDiagnosticItem('Polls',esc(rt.list_poll_count||0)),pollerDiagnosticItem('Last',`${esc(rt.last_list_duration_ms||0)} ms`),pollerDiagnosticItem('Added/updated/removed',`${esc(rt.last_list_added_count||0)}/${esc(rt.last_list_updated_count||0)}/${esc(rt.last_list_removed_count||0)}`),pollerDiagnosticItem('Interval',`${esc(rt.torrent_list_interval_seconds||0)}s`)]; const runtime=[pollerDiagnosticItem('Duration',`${esc(rt.duration_ms||rt.last_tick_ms||0)} ms`),pollerDiagnosticItem('Gap',`${esc(rt.last_tick_gap_ms||0)} ms`),pollerDiagnosticItem('Payload',esc(fmtBytes(rt.emitted_payload_size||0))),pollerDiagnosticItem('rTorrent calls',esc(rt.rtorrent_call_count||0)),pollerDiagnosticItem('Skipped',esc(rt.skipped_emissions||0)),pollerDiagnosticItem('Ticks',esc(rt.tick_count||0))]; const state=[pollerDiagnosticItem('Mode',esc(mode)),pollerDiagnosticItem('Adaptive',adaptive?'on':'off'),pollerDiagnosticItem('OK',rt.last_ok?'yes':'no'),pollerDiagnosticItem('Minimum',`${esc(rt.configured_min_interval_seconds||0)}s`)]; return [pollerDiagnosticGroup('Live poller',live),pollerDiagnosticGroup('Full poller',full),pollerDiagnosticGroup('Runtime',runtime),pollerDiagnosticGroup('State',state)].join(''); }\n  async function loadPollerSettings(){ ";
diff --git a/pytorrent/static/js/preferenceEvents.js b/pytorrent/static/js/preferenceEvents.js
new file mode 100644
index 0000000..b07cc7f
--- /dev/null
+++ b/pytorrent/static/js/preferenceEvents.js
@@ -0,0 +1 @@
+export const preferenceEventsSource = "$('appStatusRefreshBtn')?.addEventListener('click',loadAppStatus); $('portCheckEnabled')?.addEventListener('change',savePortCheckPref); $('portCheckNowBtn')?.addEventListener('click',()=>loadPortCheck(true)); $('bootstrapThemeSelect')?.addEventListener('change',saveAppearancePreferences); $('fontFamilySelect')?.addEventListener('change',saveAppearancePreferences); $('interfaceScaleRange')?.addEventListener('input',e=>applyInterfaceScale(e.target.value)); $('interfaceScaleRange')?.addEventListener('change',saveAppearancePreferences); $('compactTorrentListEnabled')?.addEventListener('change',saveAppearancePreferences); $('resetViewPreferencesBtn')?.addEventListener('click',resetViewPreferences); $('titleSpeedEnabled')?.addEventListener('change',saveTitleSpeedPreference); $('trackerFaviconsEnabled')?.addEventListener('change',saveTrackerFaviconsPreference); $('reverseDnsEnabled')?.addEventListener('change',saveReverseDnsPreference); $('automationToastsEnabled')?.addEventListener('change',saveNotificationPrefs); $('smartQueueToastsEnabled')?.addEventListener('change',saveNotificationPrefs); $('saveEasterEggPrefsBtn')?.addEventListener('click',saveEasterEggPrefs); $('easterEggEnabled')?.addEventListener('change',saveEasterEggPrefs); document.querySelectorAll('.disk-monitor-mode').forEach(input=>input.addEventListener('change',async e=>{ diskMonitorMode=e.target.value||'default'; if(diskMonitorMode==='selected' && !diskMonitorSelectedPath && diskMonitorPaths.length) diskMonitorSelectedPath=diskMonitorPaths[0]; renderDiskMonitorPaths(); await saveDiskMonitorPrefs(); })); $('diskMonitorSelectedPath')?.addEventListener('change',async e=>{ diskMonitorSelectedPath=e.target.value||''; if(diskMonitorSelectedPath) diskMonitorMode='selected'; renderDiskMonitorPaths(); await saveDiskMonitorPrefs(); }); $('addDiskPathBtn')?.addEventListener('click',async()=>{ const p=($('diskMonitorPathInput')?.value||'').trim(); if(!p) return; if(!diskMonitorPaths.includes(p)) diskMonitorPaths.push(p); if(!diskMonitorSelectedPath) diskMonitorSelectedPath=p; if(diskMonitorMode==='default') diskMonitorMode='selected'; if($('diskMonitorPathInput')) $('diskMonitorPathInput').value=''; renderDiskMonitorPaths(); await saveDiskMonitorPrefs(); }); $('diskMonitorPaths')?.addEventListener('click',async e=>{ const use=e.target.closest('.disk-path-select'); if(use){ diskMonitorSelectedPath=use.dataset.path||''; diskMonitorMode='selected'; renderDiskMonitorPaths(); await saveDiskMonitorPrefs(); return; } const btn=e.target.closest('.disk-path-remove'); if(!btn) return; diskMonitorPaths=diskMonitorPaths.filter(p=>p!==btn.dataset.path); if(diskMonitorSelectedPath===btn.dataset.path) diskMonitorSelectedPath=diskMonitorPaths[0]||''; if(diskMonitorMode==='selected' && !diskMonitorSelectedPath) diskMonitorMode='default'; renderDiskMonitorPaths(); await saveDiskMonitorPrefs(); }); $('saveFooterPrefsBtn')?.addEventListener('click',saveFooterPreferences);\n  ";
diff --git a/pytorrent/static/js/profileActions.js b/pytorrent/static/js/profileActions.js
new file mode 100644
index 0000000..8226baa
--- /dev/null
+++ b/pytorrent/static/js/profileActions.js
@@ -0,0 +1 @@
+export const profileActionsSource = "  async function activateProfileAndRefresh(id, label=''){\n    // Note: Profile activation now refreshes all profile-scoped client state without requiring a browser reload.\n    if(!id) return;\n    setBusy(true, 'Switching profile...');\n    try{\n      await post(`/api/profiles/${id}/activate`,{});\n      activeProfileId=id;\n      hasActiveProfile=true;\n      window.PYTORRENT.activeProfile=Number(id);\n      markActiveProfileRow(id);\n      if($('activeProfileName') && label) $('activeProfileName').textContent=label;\n      bootstrap.Modal.getInstance($('profilePickerModal'))?.hide();\n      defaultDownloadPath=null;\n      lastUserDiskFetchAt=0;\n      userDiskFetchSeq += 1;\n      userDiskFetchInFlight=false;\n      clearRtorrentStartingState();\n      hasTorrentSnapshot=false;\n      torrentSummary=null;\n      trackerSummary={hashes:{}, trackers:[], scanned:0, errors:[]};\n      trackerSummaryStatus='idle';\n      trackerSummarySignature='';\n      torrents.clear();\n      selected.clear();\n      selectedHash=null;\n      scheduleRender(true);\n      await loadPreferences().catch(()=>{});\n      await Promise.allSettled([\n        refreshProfiles(),\n        applyDefaultDownloadPath(true),\n        refreshUserDiskUsage(true),\n        loadSmartQueue(),\n        loadDownloadPlanner(),\n        loadPollerSettings(),\n      ]);\n      socket.emit('select_profile',{profile_id:Number(id)});\n      toast('Profile switched','success');\n    }catch(e){\n      toast(e.message||'Profile switch failed','danger');\n    }finally{\n      setBusy(false);\n    }\n  }\n\n  // Note: The rTorrent list lives in Tools modal; refresh it when that modal is shown instead of referencing a missing modal id.\n  $('profilePickerModal')?.addEventListener('show.bs.modal',async()=>{\n    try{\n      const j=await (await fetch('/api/profiles')).json();\n      const select=$('profileSelect');\n      if(select) select.innerHTML=(j.profiles||[]).map(p=>`<option value=\"${esc(p.id)}\" ${j.active?.id===p.id?'selected':''}>${esc(p.name)}</option>`).join('') || '<option value=\"\">No profiles configured</option>';\n    }catch(e){}\n  }); $('profileList')?.addEventListener('click',async e=>{const btn=e.target.closest('[data-del-profile],[data-use-profile],[data-edit-profile],[data-test-saved-profile]'); const del=btn?.dataset.delProfile,use=btn?.dataset.useProfile,edit=btn?.dataset.editProfile,test=btn?.dataset.testSavedProfile;if(test){ const oldHtml=btn.innerHTML; btn.disabled=true; btn.innerHTML='<span class=\"spinner-border spinner-border-sm me-1\" aria-hidden=\"true\"></span> testing'; const box=$('profileDiagnosticsResult'); if(box) box.innerHTML='<div class=\"alert alert-info py-2 mb-0\"><span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>Testing saved profile...</div>'; try{ const r=await (await fetch(`/api/profiles/${test}/diagnostics`)).json(); renderProfileDiagnostics(r.diagnostics||{}); }catch(e){ if(box) box.innerHTML=`<div class=\"alert alert-danger py-2 mb-0\"><i class=\"fa-solid fa-triangle-exclamation\"></i> ${esc(e.message)}</div>`; toast(e.message,'danger'); } finally{ btn.disabled=false; btn.innerHTML=oldHtml; } return; } if(edit){editProfileForm(profileCache.get(String(edit)));return;} if(del){setBusy(true);await fetch(`/api/profiles/${del}`,{method:'DELETE'});setBusy(false);refreshProfiles();location.reload();} if(use){await activateProfileAndRefresh(use, profileCache.get(String(use))?.name || 'rTorrent');}}); $('cancelProfileEditBtn')?.addEventListener('click',resetProfileForm); $('testProfileBtn')?.addEventListener('click',async()=>{ const btn=$('testProfileBtn'); const oldHtml=btn?.innerHTML; if(btn){ btn.disabled=true; btn.innerHTML='<span class=\"spinner-border spinner-border-sm me-1\" aria-hidden=\"true\"></span> Testing SCGI...'; } const box=$('profileDiagnosticsResult'); if(box) box.innerHTML='<div class=\"alert alert-info py-2 mb-0\"><span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>Testing SCGI connection...</div>'; setBusy(true); try{ const d=await testProfilePayload(); toast(d.ok?'SCGI test OK':'SCGI test failed', d.ok?'success':'danger'); }catch(e){ toast(e.message,'danger'); if(box) box.innerHTML=`<div class=\"alert alert-danger py-2 mb-0\"><i class=\"fa-solid fa-triangle-exclamation\"></i> ${esc(e.message)}</div>`; } finally{setBusy(false); if(btn){ btn.disabled=false; btn.innerHTML=oldHtml||'<i class=\"fa-solid fa-plug-circle-check\"></i> Test SCGI'; }} }); $('profileExportBtn')?.addEventListener('click',async()=>{ const j=await (await fetch('/api/profiles/export')).json(); const blob=new Blob([JSON.stringify(j,null,2)],{type:'application/json'}); const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='pytorrent-profiles.json'; a.click(); setTimeout(()=>URL.revokeObjectURL(a.href),1000); }); $('profileImportBtn')?.addEventListener('click',()=>$('profileImportFile')?.click()); $('profileImportFile')?.addEventListener('change',async e=>{ const file=e.target.files?.[0]; if(!file) return; try{ const payload=JSON.parse(await file.text()); await post('/api/profiles/import',payload); toast('Profiles imported','success'); refreshProfiles(); }catch(err){ toast(err.message,'danger'); } e.target.value=''; }); $('saveProfileBtn')?.addEventListener('click',async()=>{setBusy(true);const id=$('profileId')?.value;const payload=profileFormPayload();const j=await post(id?`/api/profiles/${id}`:'/api/profiles',payload,id?'PUT':'POST').catch(e=>toast(e.message,'danger'));setBusy(false);if(j?.profile)location.reload();}); $('saveJobSettingsBtn')?.addEventListener('click',saveJobSettings); $('reloadJobSettingsBtn')?.addEventListener('click',loadJobSettings); $('profileSelect')?.addEventListener('change',async e=>{const id=e.target.value;if(!id)return;const opt=e.target.selectedOptions?.[0];await activateProfileAndRefresh(id, opt?.textContent || 'rTorrent');}); $('profilePickerUseBtn')?.addEventListener('click',async()=>{const select=$('profileSelect');const id=select?.value;if(!id)return;const opt=select.selectedOptions?.[0];await activateProfileAndRefresh(id, opt?.textContent || 'rTorrent');});\n  // Note: Opens the existing rTorrent form directly from the empty first-run state.\n  document.addEventListener('click',e=>{ if(e.target.closest('#setupProfileBtn')){ activateToolTab('rtorrents'); new bootstrap.Modal($('toolsModal')).show(); setTimeout(()=>$('profileName')?.focus(),150); return; } if(e.target.closest('#chooseProfileBtn')){ openProfilePicker(); } });\n";
diff --git a/pytorrent/static/js/profileForm.js b/pytorrent/static/js/profileForm.js
new file mode 100644
index 0000000..8262cd4
--- /dev/null
+++ b/pytorrent/static/js/profileForm.js
@@ -0,0 +1 @@
+export const profileFormSource = "  function profileFormPayload(){ return {id:$('profileId')?.value||null,name:$('profileName')?.value||'',scgi_url:$('profileUrl')?.value||'',timeout_seconds:$('profileTimeout')?.value||5,max_parallel_jobs:$('profileParallel')?.value||5,light_parallel_jobs:$('jobLightParallel')?.value||4,light_job_timeout_seconds:$('jobLightTimeout')?.value||300,heavy_job_timeout_seconds:$('jobHeavyTimeout')?.value||7200,pending_job_timeout_seconds:$('jobPendingTimeout')?.value||900,is_remote:$('profileRemote')?.checked}; }\n  function renderProfileDiagnostics(d={}){ const box=$('profileDiagnosticsResult'); if(!box) return; const status=profileDiagnosticStatusLabel(d.status || (d.ok?'normal':'error')); const cls=profileDiagnosticStatusClass(status); const paths=d.base_paths||{}; const wp=d.write_permissions||{}; const disk=d.free_disk||{}; const firstDisk=Object.values(disk)[0]||{}; const cards=[['Status',`<span class=\"badge text-bg-${cls}\">${esc(status)}</span>`],['rTorrent',esc(d.version||'-')],['Library',esc(d.library_version||'-')],['Response',d.response_time_ms!=null?`${esc(d.response_time_ms)} ms`:'-'],['Slow threshold',d.slow_threshold_ms!=null?`${esc(d.slow_threshold_ms)} ms`:'-'],['Default path',esc(paths.default_directory||'-')],['CWD',esc(paths.cwd||'-')],['Write',esc(Object.values(wp)[0]||'-')],['Free disk',esc(firstDisk.free_h||firstDisk.error||'-')]]; box.classList.remove('text-muted'); box.innerHTML=`<div class=\"profile-diagnostics-grid\">${cards.map(([k,v])=>`<div class=\"profile-diagnostics-card\"><small>${esc(k)}</small><b>${v}</b></div>`).join('')}</div>${d.error?`<div class=\"alert alert-danger mt-2 mb-0\">${esc(d.error)}</div>`:''}`; }\n  async function testProfilePayload(payload=null){ const p=payload||profileFormPayload(); const res=await post('/api/profiles/test', p); renderProfileDiagnostics(res.diagnostics||{}); return res.diagnostics||{}; }\n\n  function resetProfileForm(){ if($('profileId')) $('profileId').value=''; if($('profileName')) $('profileName').value=''; if($('profileUrl')) $('profileUrl').value=''; if($('profileTimeout')) $('profileTimeout').value='5'; if($('profileParallel')) $('profileParallel').value='5'; if($('profileRemote')) $('profileRemote').checked=false; if($('profileFormTitle')) $('profileFormTitle').textContent='Add profile'; if($('saveProfileBtn')) $('saveProfileBtn').innerHTML='<i class=\"fa-solid fa-plus\"></i> Add profile'; $('cancelProfileEditBtn')?.classList.add('d-none'); }\n  function editProfileForm(profile){ if(!profile) return; if($('profileId')) $('profileId').value=profile.id; if($('profileName')) $('profileName').value=profile.name||''; if($('profileUrl')) $('profileUrl').value=profile.scgi_url||''; if($('profileTimeout')) $('profileTimeout').value=profile.timeout_seconds||5; if($('profileParallel')) $('profileParallel').value=profile.max_parallel_jobs||5; if($('profileRemote')) $('profileRemote').checked=!!profile.is_remote; fillJobSettings(profile); if($('profileFormTitle')) $('profileFormTitle').textContent='Edit rTorrent profile'; if($('saveProfileBtn')) $('saveProfileBtn').innerHTML='<i class=\"fa-solid fa-floppy-disk\"></i> Save profile'; $('cancelProfileEditBtn')?.classList.remove('d-none'); $('profileName')?.focus(); }\n";
diff --git a/pytorrent/static/js/profileList.js b/pytorrent/static/js/profileList.js
new file mode 100644
index 0000000..5b192ee
--- /dev/null
+++ b/pytorrent/static/js/profileList.js
@@ -0,0 +1 @@
+export const profileListSource = "  function markActiveProfileRow(id){\n    // Note: Keeps the active rTorrent profile frame in sync immediately after switching, before diagnostics refresh finishes.\n    const activeId=String(id||'');\n    document.querySelectorAll('#profileList .profile-row').forEach(row=>{\n      const isActive=String(row.dataset.profileId||'')===activeId;\n      row.classList.toggle('active', isActive);\n      row.setAttribute('aria-current', isActive ? 'true' : 'false');\n      const badge=row.querySelector('[data-active-profile-badge]');\n      if(badge) badge.classList.toggle('d-none', !isActive);\n    });\n  }\n  function profileDiagnosticStatusClass(status){\n    // Note: rTorrent profile badges reuse Bootstrap colors and the same normal/slow/error idea as the poller panel.\n    const value=String(status||'unknown').toLowerCase();\n    if(value==='normal' || value==='online') return 'success';\n    if(value==='slow' || value==='slowdown') return 'warning';\n    if(value==='error' || value==='recovery') return 'danger';\n    return 'secondary';\n  }\n  function profileDiagnosticStatusLabel(status){\n    const value=String(status||'unknown').toLowerCase();\n    return value==='online' ? 'normal' : value;\n  }\n  async function refreshProfiles(){ const j=await (await fetch('/api/profiles')).json(); profileCache=new Map((j.profiles||[]).map(p=>[String(p.id),p])); const active=String(j.active?.id ?? activeProfileId ?? ''); const rows=j.profiles||[]; const statusMap=new Map(); try{ const d=await (await fetch('/api/profiles/diagnostics')).json(); (d.diagnostics||[]).forEach(x=>statusMap.set(String(x.profile_id), x)); }catch(e){} $('profileList').innerHTML=rows.map(p=>{ const d=statusMap.get(String(p.id))||{}; const st=profileDiagnosticStatusLabel(d.status || 'unknown'); const cls=profileDiagnosticStatusClass(st); const response=d.response_time_ms?` · ${esc(d.response_time_ms)} ms`:''; const threshold=d.slow_threshold_ms?` · slow > ${esc(d.slow_threshold_ms)} ms`:''; const isActive=String(p.id)===active; return `<div class=\"profile-row ${isActive?'active':''}\" data-profile-id=\"${esc(p.id)}\" aria-current=\"${isActive?'true':'false'}\"><b>${esc(p.name)} <span data-active-profile-badge class='badge text-bg-primary ms-1 ${isActive?'':'d-none'}'>active</span> ${p.is_remote?\"<span class='badge text-bg-secondary ms-1'>remote</span>\":''} <span class=\"badge text-bg-${cls}\">${esc(st)}</span></b><span>${esc(p.scgi_url)} · heavy ${esc(p.max_parallel_jobs||5)} · light ${esc(p.light_parallel_jobs||4)} · poll ${esc(p.polling_min_interval_seconds||'-')}s${response}${threshold}</span><div class=\"profile-actions\"><button class=\"btn btn-xs btn-outline-primary\" data-use-profile=\"${p.id}\"><i class=\"fa-solid fa-plug-circle-check\"></i> use</button><button class=\"btn btn-xs btn-outline-info\" data-test-saved-profile=\"${p.id}\" title=\"Diagnostics\"><i class=\"fa-solid fa-stethoscope\"></i></button><button class=\"btn btn-xs btn-outline-secondary\" data-edit-profile=\"${p.id}\" title=\"Edit\"><i class=\"fa-solid fa-pen-to-square\"></i></button><button class=\"btn btn-xs btn-outline-danger\" data-del-profile=\"${p.id}\" title=\"Delete\"><i class=\"fa-solid fa-trash-can\"></i> Remove</button></div></div>`; }).join('')||'No profiles.'; }\n";
diff --git a/pytorrent/static/js/profileSelection.js b/pytorrent/static/js/profileSelection.js
new file mode 100644
index 0000000..47d338c
--- /dev/null
+++ b/pytorrent/static/js/profileSelection.js
@@ -0,0 +1 @@
+export const profileSelectionSource = "  function renderProfileSelectionState(count=0){\n    hasTorrentSnapshot = false;\n    torrentSummary = {filters:{all:{count:0},downloading:{count:0},seeding:{count:0},paused:{count:0},checking:{count:0},error:{count:0},stopped:{count:0}}};\n    torrents.clear();\n    selected.clear();\n    renderCounts();\n    const body = $('torrentBody');\n    if(body){\n      body.innerHTML = `<tr><td colspan=\"${torrentColumnSpan()}\" class=\"empty\"><div class=\"empty-state\"><b>Select an rTorrent profile.</b><span>${esc(count)} profile(s) are configured for this trusted bypass session. Choose which one to open.</span><button id=\"chooseProfileBtn\" class=\"btn btn-sm btn-primary\" type=\"button\"><i class=\"fa-solid fa-server\"></i> Choose profile</button></div></td></tr>`;\n    }\n    const list = $('mobileList');\n    if(list) list.innerHTML = `<div class=\"empty\"><div class=\"empty-state\"><b>Select an rTorrent profile.</b><span>Choose a profile to load torrents.</span></div></div>`;\n    if($('detailPane')) $('detailPane').innerHTML = 'Choose an rTorrent profile to load details.';\n  }\n\n  async function openProfilePicker(){\n    try{\n      const j=await (await fetch('/api/profiles',{cache:'no-store'})).json();\n      const select=$('profileSelect');\n      if(select) select.innerHTML=(j.profiles||[]).map(p=>`<option value=\"${esc(p.id)}\" ${j.active?.id===p.id?'selected':''}>${esc(p.name)}</option>`).join('') || '<option value=\"\">No profiles configured</option>';\n    }catch(e){}\n    new bootstrap.Modal($('profilePickerModal')).show();\n  }\n\n  // Note: On trusted auth-bypass entry, existing profiles are not auto-selected; the visitor must choose the target profile.\n  async function showFirstRunSetup(){\n    if(hasActiveProfile || firstRunSetupShown) return;\n    firstRunSetupShown = true;\n    let profiles=[];\n    try{\n      const j=await (await fetch('/api/profiles',{cache:'no-store'})).json();\n      if(j.active?.id){\n        activeProfileId=j.active.id;\n        hasActiveProfile=true;\n        window.PYTORRENT.activeProfile=Number(j.active.id);\n        return;\n      }\n      profiles=j.profiles||[];\n    }catch(e){}\n    $('connBadge').className='badge text-bg-warning';\n    if(profiles.length){\n      $('connBadge').textContent='select profile';\n      setInitialLoader('Select rTorrent profile','Choose which configured rTorrent profile to open.');\n      renderProfileSelectionState(profiles.length);\n      hideInitialLoader();\n      setTimeout(()=>openProfilePicker(), 120);\n      return;\n    }\n    $('connBadge').textContent='setup required';\n    setInitialLoader('Configure rTorrent','Add the first rTorrent profile to start loading torrents.');\n    renderNoProfileState();\n    hideInitialLoader();\n    setTimeout(()=>{ activateToolTab('rtorrents'); new bootstrap.Modal($('toolsModal')).show(); }, 120);\n  }\n";
diff --git a/pytorrent/static/js/ratioTools.js b/pytorrent/static/js/ratioTools.js
new file mode 100644
index 0000000..a4832ab
--- /dev/null
+++ b/pytorrent/static/js/ratioTools.js
@@ -0,0 +1 @@
+export const ratioToolsSource = "  async function loadRatios(){ const j=await (await fetch('/api/ratio-groups')).json(); const groups=j.groups||[], history=j.history||[]; if($('ratioAssignSelect')) $('ratioAssignSelect').innerHTML=groups.map(g=>`<option value=\"${esc(g.name)}\">${esc(g.name)} (${esc(g.min_ratio)}-${esc(g.max_ratio)})</option>`).join(''); if($('ratioManager')) $('ratioManager').innerHTML=`<h6>Groups</h6>${table(['Name','Min','Max','Seed min','Action','Move path','Set label','Enabled'],groups.map(g=>[esc(g.name),esc(g.min_ratio),esc(g.max_ratio),esc(g.seed_time_minutes||g.min_seed_time_minutes||0),esc(g.action),esc(g.move_path||''),esc(g.set_label||''),g.enabled?'yes':'no']))}<h6 class=\"mt-3\">Applied history</h6>${table(['Time','Torrent','Group','Action','Status','Reason'],history.map(h=>[humanDateCell(h.created_at),esc(h.torrent_name||h.torrent_hash),esc(h.group_name||''),esc(h.action),esc(h.status),esc(h.reason||'')]))}`; }\n  $('labelModal')?.addEventListener('show.bs.modal',async()=>{ modalLabels=new Set(selectedHashes().flatMap(h=>labelNames(torrents.get(h)?.label))); if($('labelInput')) $('labelInput').value=''; await loadLabels(); renderLabelChooser(); });\n  $('saveLabelBtn')?.addEventListener('click',async()=>{ const typed=($('labelInput')?.value||'').split(/[,;|]+/).map(x=>x.trim()).filter(Boolean); for(const l of typed){ modalLabels.add(l); await saveKnownLabel(l); } await runAction('set_label',{label:labelValue([...modalLabels])}); bootstrap.Modal.getInstance($('labelModal'))?.hide(); });\n  $('addLabelToSelectionBtn')?.addEventListener('click',async()=>{ const typed=($('labelInput')?.value||'').split(/[,;|]+/).map(x=>x.trim()).filter(Boolean); for(const l of typed){ modalLabels.add(l); await saveKnownLabel(l); } if($('labelInput')) $('labelInput').value=''; renderLabelChooser(); });\n  $('clearLabelsBtn')?.addEventListener('click',()=>{ modalLabels.clear(); renderLabelChooser(); });\n  $('labelList')?.addEventListener('click',e=>{ const chip=e.target.closest('.label-chip'); if(!chip) return; const v=chip.dataset.label||''; modalLabels.has(v)?modalLabels.delete(v):modalLabels.add(v); renderLabelChooser(); });\n  $('selectedLabelList')?.addEventListener('click',e=>{ const chip=e.target.closest('.label-selected'); if(!chip) return; modalLabels.delete(chip.dataset.label||''); renderLabelChooser(); });\n  $('newLabelBtn')?.addEventListener('click',async()=>{ await saveKnownLabel($('newLabelName')?.value||''); if($('newLabelName')) $('newLabelName').value=''; });\n  $('ratioAssignModal')?.addEventListener('show.bs.modal',loadRatios); $('applyRatioBtn')?.addEventListener('click',async()=>{ await runAction('set_ratio_group',{ratio_group:$('ratioAssignSelect').value}); bootstrap.Modal.getInstance($('ratioAssignModal'))?.hide(); }); $('ratioSaveBtn')?.addEventListener('click',async()=>{ await post('/api/ratio-groups',{name:$('ratioName').value,min_ratio:$('ratioMin').value,max_ratio:$('ratioMax').value,seed_time_minutes:$('ratioSeed').value,action:$('ratioAction').value,move_path:$('ratioMovePath')?.value||'',set_label:$('ratioSetLabel')?.value||'',ignore_private:$('ratioIgnorePrivate')?.checked!==false,ignore_active_upload:$('ratioIgnoreUpload')?.checked!==false}); loadRatios(); }); $('ratioCheckBtn')?.addEventListener('click',async()=>{ const j=await post('/api/ratio-groups/check',{}); toast(`Ratio applied ${j.result?.applied||0} torrent(s)`,'success'); loadRatios(); });\n";
diff --git a/pytorrent/static/js/realtimeCharts.js b/pytorrent/static/js/realtimeCharts.js
new file mode 100644
index 0000000..3d1ca4d
--- /dev/null
+++ b/pytorrent/static/js/realtimeCharts.js
@@ -0,0 +1 @@
+export const realtimeChartsSource = "  function drawTraffic(down, up){\n    // Note: Live traffic rendering is throttled to animation frames to keep frequent socket updates smooth.\n    traffic.push({down:Number(down||0), up:Number(up||0)});\n    if(traffic.length>90) traffic.shift();\n    if(drawTraffic.raf) return;\n    drawTraffic.raf=requestAnimationFrame(()=>{\n      drawTraffic.raf=0;\n      const c=$('trafficChart');\n      if(!c) return;\n      const rect=c.getBoundingClientRect();\n      const dpr=window.devicePixelRatio||1;\n      const cssW=Math.max(120, Math.floor(rect.width||c.width||300));\n      const cssH=Math.max(32, Math.floor(rect.height||c.height||80));\n      if(c.width!==Math.floor(cssW*dpr) || c.height!==Math.floor(cssH*dpr)){\n        c.width=Math.floor(cssW*dpr);\n        c.height=Math.floor(cssH*dpr);\n      }\n      const ctx=c.getContext('2d');\n      ctx.setTransform(dpr,0,0,dpr,0,0);\n      ctx.clearRect(0,0,cssW,cssH);\n      const max=Math.max(1,...traffic.map(p=>Math.max(p.down,p.up)));\n      const pad=3;\n      const drawSeries=(key,color)=>{\n        ctx.beginPath();\n        traffic.forEach((p,i)=>{\n          const x=pad+i*((cssW-pad*2)/Math.max(1,traffic.length-1));\n          const y=cssH-pad-(Number(p[key]||0)/max)*(cssH-pad*2);\n          i?ctx.lineTo(x,y):ctx.moveTo(x,y);\n        });\n        ctx.lineWidth=1.75;\n        ctx.lineJoin='round';\n        ctx.lineCap='round';\n        ctx.strokeStyle=color;\n        ctx.stroke();\n      };\n      ctx.fillStyle='rgba(148,163,184,.12)';\n      ctx.fillRect(0,0,cssW,cssH);\n      drawSeries('down','#38bdf8');\n      drawSeries('up','#f59e0b');\n    });\n  }\n  function drawSystemUsage(cpu,ram){\n    const c=$('systemChart'); if(!c) return;\n    const cpuVal=Math.max(0,Math.min(100,Number(cpu||0)));\n    const ramVal=Math.max(0,Math.min(100,Number(ram||0)));\n    systemUsage.push({cpu:cpuVal,ram:ramVal}); if(systemUsage.length>60) systemUsage.shift();\n    const ctx=c.getContext('2d'), w=c.width, h=c.height; ctx.clearRect(0,0,w,h);\n    ctx.fillStyle='rgba(148,163,184,.18)'; ctx.fillRect(0,0,w,h);\n    ctx.beginPath(); systemUsage.forEach((p,i)=>{const x=i*(w/Math.max(1,systemUsage.length-1)), y=h-(p.cpu/100)*h; i?ctx.lineTo(x,y):ctx.moveTo(x,y);}); ctx.strokeStyle='#a78bfa'; ctx.stroke();\n    ctx.beginPath(); systemUsage.forEach((p,i)=>{const x=i*(w/Math.max(1,systemUsage.length-1)), y=h-(p.ram/100)*h; i?ctx.lineTo(x,y):ctx.moveTo(x,y);}); ctx.strokeStyle='#22c55e'; ctx.stroke();\n    c.title=`CPU ${cpuVal.toFixed(1)}% / RAM ${ramVal.toFixed(1)}%`;\n  }\n  async function refreshUserDiskUsage(force=false){\n    // Note: Profile switches force a fresh no-store disk read and ignore older in-flight responses.\n    const now=Date.now();\n    if(userDiskFetchInFlight && !force) return;\n    if(!force && now-lastUserDiskFetchAt<15000) return;\n    const seq=++userDiskFetchSeq;\n    userDiskFetchInFlight=true;\n    try{\n      const res=await fetch(`/api/system/disk?_=${Date.now()}`, {cache:'no-store'});\n      const json=await res.json();\n      if(seq!==userDiskFetchSeq) return;\n      if(json.ok && json.disk){\n        lastUserDiskFetchAt=Date.now();\n        drawDiskUsage(json.disk);\n      }\n    }catch(_){\n    }finally{\n      if(seq===userDiskFetchSeq) userDiskFetchInFlight=false;\n    }\n  }\n\n  function diskUsageTooltip(disk){\n    // Note: The footer tooltip explains the active disk source and every monitored path.\n    const mode=disk.mode==='aggregate'?'Aggregate':disk.mode==='selected'?'Selected path':'Default rTorrent path';\n    const lines=[mode, `Used: ${disk.used_h||'-'} / ${disk.total_h||'-'}`, `Free: ${disk.free_h||'-'}`];\n    if(disk.path && disk.path!=='aggregate') lines.unshift(`Path: ${disk.path}`);\n    if(disk.fallback) lines.push(`Measured on: ${disk.source_path||'-'}`);\n    const paths=Array.isArray(disk.paths)?disk.paths:[];\n    if(paths.length){\n      lines.push('', 'Monitored paths:');\n      paths.forEach(p=>{\n        const marker=(disk.mode==='selected' && p.path===disk.path) ? '*' : '+';\n        const measured=p.fallback && p.source_path ? `, measured on ${p.source_path}` : '';\n        const pct=Number(p.percent||0);\n        const shownPct=Number.isFinite(pct)?pct.toFixed(pct%1?1:0):'0';\n        const status=p.ok ? `${shownPct}% used, ${p.free_h||'-'} free${measured}` : `unavailable${p.error?`: ${p.error}`:''}`;\n        lines.push(`${marker} ${p.path}: ${status}`);\n      });\n    }\n    return lines.join('\\n');\n  }\n\n  function drawDiskUsage(disk){\n    const box=$('diskStatus'), label=$('statDisk'), c=$('diskChart');\n    if(!box||!label||!c)return;\n    const ctx=c.getContext('2d'), w=c.width, h=c.height;\n    ctx.clearRect(0,0,w,h);\n    const ok=disk&&disk.ok;\n    const pct=ok?Math.max(0,Math.min(100,Number(disk.percent||0))):0;\n    label.textContent=ok?`${pct.toFixed(pct%1?1:0)}%`:'-';\n    box.classList.toggle('disk-warn', !ok || pct>=90);\n    box.title=ok?diskUsageTooltip(disk):`Disk usage unavailable${disk?.error?`\n${disk.error}`:''}`;\n    ctx.fillStyle='rgba(148,163,184,.22)'; ctx.fillRect(0,5,w,14);\n    ctx.fillStyle=pct>=90?'#ef4444':pct>=75?'#f59e0b':'#22c55e'; ctx.fillRect(0,5,Math.round(w*pct/100),14);\n    ctx.strokeStyle='rgba(148,163,184,.55)'; ctx.strokeRect(.5,5.5,w-1,13);\n  }\n";
diff --git a/pytorrent/static/js/rssEvents.js b/pytorrent/static/js/rssEvents.js
new file mode 100644
index 0000000..043b17f
--- /dev/null
+++ b/pytorrent/static/js/rssEvents.js
@@ -0,0 +1 @@
+export const rssEventsSource = "$('rssFeedBtn')?.addEventListener('click',async()=>{await post('/api/rss/feeds',{id:$('rssFeedId')?.value||null,name:$('rssName').value,url:$('rssUrl').value,interval_minutes:$('rssInterval')?.value||30,enabled:true}); if($('rssFeedId')) $('rssFeedId').value=''; loadRss();}); $('rssRuleBtn')?.addEventListener('click',async()=>{await post('/api/rss/rules',{id:$('rssRuleId')?.value||null,name:$('rssRuleName').value,pattern:$('rssPattern').value,exclude_pattern:$('rssExclude')?.value||'',min_size_mb:$('rssMinSize')?.value||0,max_size_mb:$('rssMaxSize')?.value||0,category:$('rssCategory')?.value||'',quality:$('rssQuality')?.value||'',season:$('rssSeason')?.value||null,episode:$('rssEpisode')?.value||null,save_path:$('rssPath').value,label:$('rssLabel').value}); if($('rssRuleId')) $('rssRuleId').value=''; loadRss();}); $('rssTestBtn')?.addEventListener('click',async()=>{try{const j=await post('/api/rss/rules/test',{feed_url:$('rssUrl').value,rule:{pattern:$('rssPattern').value,exclude_pattern:$('rssExclude')?.value||'',min_size_mb:$('rssMinSize')?.value||0,max_size_mb:$('rssMaxSize')?.value||0,category:$('rssCategory')?.value||'',quality:$('rssQuality')?.value||'',season:$('rssSeason')?.value||null,episode:$('rssEpisode')?.value||null}}); $('rssTestResult').innerHTML=table(['Title','Reason'],(j.result?.matches||[]).map(x=>[esc(x.title),esc(x.reason)]));}catch(e){toast(e.message,'danger');}}); $('rssCheckBtn')?.addEventListener('click',async()=>{setBusy(true); try{const j=await post('/api/rss/check',{}); toastMessage('toast.rssQueued','success',{queued:j.queued}); loadRss();}catch(e){toast(e.message,'danger');} finally{setBusy(false);}}); $('rssManager')?.addEventListener('click',async e=>{const ef=e.target.closest('.rss-edit-feed'); const er=e.target.closest('.rss-edit-rule'); const df=e.target.closest('.rss-delete-feed'); const dr=e.target.closest('.rss-delete-rule'); if(ef){const f=JSON.parse(ef.dataset.feed||'{}'); $('rssFeedId').value=f.id||''; $('rssName').value=f.name||''; $('rssUrl').value=f.url||''; $('rssInterval').value=f.interval_minutes||30;} if(er){const r=JSON.parse(er.dataset.rule||'{}'); $('rssRuleId').value=r.id||''; $('rssRuleName').value=r.name||''; $('rssPattern').value=r.pattern||''; $('rssExclude').value=r.exclude_pattern||''; $('rssMinSize').value=r.min_size_mb||''; $('rssMaxSize').value=r.max_size_mb||''; $('rssCategory').value=r.category||''; $('rssQuality').value=r.quality||''; $('rssSeason').value=r.season||''; $('rssEpisode').value=r.episode||''; $('rssPath').value=r.save_path||''; $('rssLabel').value=r.label||'';} if(df&&confirm('Delete RSS feed?')){await fetch(`/api/rss/feeds/${df.dataset.id}`,{method:'DELETE'}); loadRss();} if(dr&&confirm('Delete RSS rule?')){await fetch(`/api/rss/rules/${dr.dataset.id}`,{method:'DELETE'}); loadRss();}}); ";
diff --git a/pytorrent/static/js/rssTools.js b/pytorrent/static/js/rssTools.js
new file mode 100644
index 0000000..6d38134
--- /dev/null
+++ b/pytorrent/static/js/rssTools.js
@@ -0,0 +1 @@
+export const rssToolsSource = "\n  async function loadRss(){\n    const j=await (await fetch('/api/rss')).json();\n    const feeds=j.feeds||[], rules=j.rules||[], history=j.history||[];\n    if($('rssManager')) $('rssManager').innerHTML=`<h6>Feeds</h6>${table(['Name','URL','Interval','Last check','Last error','Actions'],feeds.map(f=>[esc(f.name),esc(f.url),esc(f.interval_minutes||30)+' min',humanDateCell(f.last_checked_at),esc(f.last_error||''),`<button class=\"btn btn-xs btn-outline-primary rss-edit-feed\" data-feed='${esc(JSON.stringify(f))}'><i class=\"fa-solid fa-pen-to-square\"></i> Edit</button> <button class=\"btn btn-xs btn-outline-danger rss-delete-feed\" data-id=\"${esc(f.id)}\"><i class=\"fa-solid fa-trash-can\"></i> Delete</button>`]))}<h6 class=\"mt-3\">Rules</h6>${table(['Name','Include','Exclude','Filters','Path','Label','Actions'],rules.map(r=>[esc(r.name),esc(r.pattern),esc(r.exclude_pattern||''),esc([r.min_size_mb?`min ${r.min_size_mb}MB`:'',r.max_size_mb?`max ${r.max_size_mb}MB`:'',r.category,r.quality,r.season?`S${r.season}`:'',r.episode?`E${r.episode}`:''].filter(Boolean).join(', ')),esc(r.save_path),esc(r.label),`<button class=\"btn btn-xs btn-outline-primary rss-edit-rule\" data-rule='${esc(JSON.stringify(r))}'><i class=\"fa-solid fa-pen-to-square\"></i> Edit</button> <button class=\"btn btn-xs btn-outline-danger rss-delete-rule\" data-id=\"${esc(r.id)}\"><i class=\"fa-solid fa-trash-can\"></i> Delete</button>`]))}<h6 class=\"mt-3\">RSS log</h6>${table(['Time','Title','Status','Message'],history.map(h=>[humanDateCell(h.created_at),esc(h.title||h.link||''),esc(h.status),esc(h.message||'')]))}`;\n  }\n\n";
diff --git a/pytorrent/static/js/runtimeState.js b/pytorrent/static/js/runtimeState.js
new file mode 100644
index 0000000..45fef0c
--- /dev/null
+++ b/pytorrent/static/js/runtimeState.js
@@ -0,0 +1 @@
+export const runtimeStateSource = "  let knownLabels = [];\n  let jobsPage = 0, jobsLimit = 25, jobsTotal = 0, smartHistoryExpanded = false, plannerHistoryExpanded = false;\n  let automationSmartQueueStats = null;\n  let peersRefreshTimer = null;\n  let peersRefreshSeconds = Number(window.PYTORRENT?.peersRefreshSeconds || 0);\n  // Note: Reverse DNS follow-up refreshes are independent from the user-selected peers auto-refresh interval.\n  const REVERSE_DNS_REFRESH_SECONDS = 2;\n  const REVERSE_DNS_REFRESH_MAX_ATTEMPTS = 8;\n  let reverseDnsRefreshTimer = null;\n  let reverseDnsRefreshInFlight = false;\n  let reverseDnsRefreshAttempts = 0;\n  let reverseDnsRefreshHash = null;\n  let mobileReverseDnsRefreshTimer = null;\n  let mobileReverseDnsRefreshAttempts = 0;\n  // Note: Files tab auto-refresh is independent from the peers refresh setting and stops when files are complete.\n  const FILES_AUTO_REFRESH_SECONDS = 5;\n  let filesRefreshTimer = null;\n  let filesRefreshInFlight = false;\n  let filesAutoRefreshHash = null;\n  let portCheckEnabled = !!Number(window.PYTORRENT?.portCheckEnabled || 0);\n  let bootstrapTheme = window.PYTORRENT?.bootstrapTheme || \"default\";\n  let fontFamily = window.PYTORRENT?.fontFamily || \"default\";\n  let interfaceScale = Number(window.PYTORRENT?.interfaceScale || 100);\n  let titleSpeedEnabled = !!Number(window.PYTORRENT?.titleSpeedEnabled || 0);\n  let trackerFaviconsEnabled = !!Number(window.PYTORRENT?.trackerFaviconsEnabled || 0);\n  // Note: Reverse DNS is opt-in because PTR lookups can be slower than normal peer refreshes.\n  let reverseDnsEnabled = !!Number(window.PYTORRENT?.reverseDnsEnabled || 0);\n  let automationToastsEnabled = window.PYTORRENT?.automationToastsEnabled !== false && Number(window.PYTORRENT?.automationToastsEnabled ?? 1) !== 0;\n  let smartQueueToastsEnabled = window.PYTORRENT?.smartQueueToastsEnabled !== false && Number(window.PYTORRENT?.smartQueueToastsEnabled ?? 1) !== 0;\n  let easterEggEnabled = Number(window.PYTORRENT?.easterEggEnabled || 0) !== 0;\n  let easterEggLoadingImageUrl = String(window.PYTORRENT?.easterEggLoadingImageUrl || \"\").trim();\n  let easterEggClickImageUrl = String(window.PYTORRENT?.easterEggClickImageUrl || \"\").trim();\n  let diskMonitorPaths = Array.isArray(window.PYTORRENT?.diskMonitorPaths) ? [...window.PYTORRENT.diskMonitorPaths] : [];\n  let diskMonitorMode = window.PYTORRENT?.diskMonitorMode || \"default\";\n  let diskMonitorSelectedPath = window.PYTORRENT?.diskMonitorSelectedPath || \"\";\n  let lastUserDiskFetchAt = 0;\n  let userDiskFetchInFlight = false;\n  let userDiskFetchSeq = 0;\n  let activeProfileId = window.PYTORRENT?.activeProfile || null;\n  let trackerSummary = {hashes:{}, trackers:[], scanned:0, errors:[]};\n  let trackerSummaryStatus = 'idle';\n  let trackerSummarySignature = \"\";\n  let trackerSummaryTimer = null;\n  let lastLabelFiltersSignature = \"\";\n  let lastTrackerFiltersSignature = \"\";\n  let lastMobileFiltersSignature = \"\";\n  const BASE_TITLE = document.title || \"pyTorrent\";\n  const lastBrowserSpeed = {down: \"0 B/s\", up: \"0 B/s\"};\n  const FOOTER_STATUS_STORAGE_KEY = \"pytorrent.footerStatus.v1\";\n  const FOOTER_RT_METRIC_KEYS = new Set([\"sockets\", \"rt_downloads\", \"rt_uploads\", \"rt_http\", \"rt_files\", \"rt_port\"]);\n  const FOOTER_ITEM_DEFS = [\n    [\"cpu\", \"CPU\"], [\"ram\", \"RAM\"], [\"usage_chart\", \"CPU/RAM chart\"], [\"disk\", \"Disk\"],\n    [\"version\", \"rTorrent version\"], [\"speed_down\", \"Download speed\"], [\"speed_up\", \"Upload speed\"],\n    [\"speed_peaks\", \"Peak speeds\"], [\"limits\", \"Speed limits\"], [\"totals\", \"Total transfer\"], [\"port_check\", \"Port check\"],\n    [\"clock\", \"Clock\"], [\"sockets\", \"Open sockets\"], [\"rt_downloads\", \"Downloads (D)\"], [\"rt_uploads\", \"Uploads (U)\"], [\"rt_http\", \"HTTP (H)\"], [\"rt_files\", \"Files (F)\"], [\"rt_port\", \"Incoming port\"], [\"shown\", \"Shown torrents\"], [\"selected\", \"Selected torrents\"], [\"docs\", \"API docs\"]\n  ];\n  const DEFAULT_FOOTER_ITEMS = Object.fromEntries(FOOTER_ITEM_DEFS.map(([key]) => [key, !FOOTER_RT_METRIC_KEYS.has(key)]));\n  let footerItems = {...DEFAULT_FOOTER_ITEMS, ...(window.PYTORRENT?.footerItems || {})};\n  let modalLabels = new Set(), defaultDownloadPath = null;\n  let hasTorrentSnapshot = false, initialLoaderDone = false, rtConfigOriginal = new Map(), rtConfigFieldTypes = new Map(), rtConfigOriginalApplyOnStart = false;\n  let rtorrentStartingMessage = '';\n  let rtorrentStartingTimer = null, rtorrentStartingSince = 0;\n  const RTORRENT_STALE_GRACE_MS = 30000;\n  let torrentSummary = null;\n  let profileCache = new Map();\n  let hasActiveProfile = !!window.PYTORRENT?.activeProfile;\n  let firstRunSetupShown = false;\n  const activeOperations = new Map();\n  // Note: Keeps live filter tooltips stable while the pointer is over a filter button.\n  const filterTooltipState = new WeakMap();\n\n  const toastGroups = new Map();\n  const preferenceSaveTimers = new Map();\n";
diff --git a/pytorrent/static/js/sharedUi.js b/pytorrent/static/js/sharedUi.js
new file mode 100644
index 0000000..6cdf348
--- /dev/null
+++ b/pytorrent/static/js/sharedUi.js
@@ -0,0 +1 @@
+export const sharedUiSource = "  function clampNumber(value, min, max, fallback){\n    const num = Number(value);\n    if(!Number.isFinite(num)) return fallback;\n    return Math.max(min, Math.min(max, Math.round(num)));\n  }\n  function debounce(fn, delay=250){\n    let timer = null;\n    return (...args) => {\n      clearTimeout(timer);\n      timer = setTimeout(() => fn(...args), delay);\n    };\n  }\n  function savePreferencePatch(payload, delay=350){\n    const key = Object.keys(payload).sort().join('|');\n    clearTimeout(preferenceSaveTimers.get(key));\n    preferenceSaveTimers.set(key, setTimeout(async()=>{\n      try{ await post('/api/preferences', payload); }catch(e){ console.warn('Preference save failed', e); }\n      finally{ preferenceSaveTimers.delete(key); }\n    }, delay));\n  }\n  function currentActiveFilterPreference(){\n    return activeTrackerFilter ? `tracker:${activeTrackerFilter}` : activeFilter;\n  }\n  function saveTorrentSortPreference(){\n    // Note: Sorting is persisted together with the current filter so mobile tracker scope cannot fall back to All trackers after a quick sort change.\n    saveBrowserViewPrefs();\n    savePreferencePatch({torrent_sort_json:{key:sortState.key, dir:sortState.dir}, active_filter:currentActiveFilterPreference()}, 200);\n  }\n  function saveBrowserViewPrefs(extra={}){\n    try{\n      const prev=JSON.parse(localStorage.getItem('pyTorrent.mobileViewPrefs')||'{}')||{};\n      localStorage.setItem('pyTorrent.mobileViewPrefs', JSON.stringify({...prev, activeFilter:currentActiveFilterPreference(), mobileFilterKey:mobileActiveFilterKey, sortState, mobileColumns, columnWidths, ...extra}));\n    }catch(e){}\n  }\n  function saveActiveFilterPreference(){\n    saveBrowserViewPrefs();\n    savePreferencePatch({active_filter:currentActiveFilterPreference()}, 250);\n  }\n  function cleanColumnPrefsHidden(values){ return [...values].filter(key => key !== \"progressbar\"); }\n  async function resetViewPreferences(){\n    activeFilter = \"all\";\n    activeTrackerFilter = \"\";\n    mobileActiveFilterKey = \"all\";\n    sortState = {key:\"name\", dir:1};\n    mobileColumns = normalizeMobileColumns();\n    hiddenColumns = new Set(DEFAULT_HIDDEN_COLUMNS);\n    columnWidths = normalizeColumnWidths();\n    const height = applyDetailPanelHeight(255);\n    renderColumnManager();\n    document.querySelectorAll('.filter').forEach(x=>x.classList.toggle('active', x.dataset.filter === 'all'));\n    if($('tableWrap')) $('tableWrap').scrollTop = 0;\n    if($('mobileList')) $('mobileList').scrollTop = 0;\n    try{\n      await post('/api/preferences', {active_filter:\"all\", torrent_sort_json:{key:\"name\", dir:1}, detail_panel_height:height, table_columns_json:JSON.stringify({hidden:cleanColumnPrefsHidden(DEFAULT_HIDDEN_COLUMNS), shown:[], mobile:mobileColumns, mobileSmartFiltersEnabled:true, widths:columnWidths})});\n      toast('View preferences reset','success');\n    }catch(e){ toast(e.message,'danger'); }\n    scheduleRender(true);\n  }\n  function applyDetailPanelHeight(height){\n    const safeHeight = clampNumber(height, 160, 720, 255);\n    document.documentElement.style.setProperty('--detail-panel-height', `${safeHeight}px`);\n    const handle = $('detailResizeHandle');\n    if(handle) handle.setAttribute('aria-valuenow', String(safeHeight));\n    return safeHeight;\n  }\n  function saveDetailPanelHeight(height){\n    const safeHeight = applyDetailPanelHeight(height);\n    savePreferencePatch({detail_panel_height:safeHeight}, 250);\n  }\n  function setupDetailResizer(){\n    const handle = $('detailResizeHandle');\n    const content = document.querySelector('.content');\n    if(!handle || !content) return;\n    applyDetailPanelHeight(window.PYTORRENT?.detailPanelHeight || 255);\n    let startY = 0, startHeight = 0;\n    const onMove = (event) => {\n      const pointerY = event.clientY ?? event.touches?.[0]?.clientY ?? startY;\n      applyDetailPanelHeight(startHeight - (pointerY - startY));\n      scheduleRender(false);\n    };\n    const onUp = () => {\n      document.body.classList.remove('resizing-details');\n      document.removeEventListener('pointermove', onMove);\n      document.removeEventListener('pointerup', onUp);\n      const value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--detail-panel-height'), 10);\n      saveDetailPanelHeight(value);\n    };\n    handle.addEventListener('pointerdown', (event) => {\n      event.preventDefault();\n      startY = event.clientY;\n      startHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--detail-panel-height'), 10) || 255;\n      document.body.classList.add('resizing-details');\n      document.addEventListener('pointermove', onMove);\n      document.addEventListener('pointerup', onUp);\n    });\n  }\n  function toastKey(msg, type){ return `${type}::${String(msg ?? '')}`; }\n  function isAutomationEvent(msg){ return msg?.automation === true || msg?.source === 'automation'; }\n  function shouldShowOperationToast(msg){\n    // Note: Automation-created operation toasts follow the Automation toasts preference.\n    return !isAutomationEvent(msg) || automationToastsEnabled;\n  }\n  function toast(msg, type=\"secondary\") {\n    // Note: Groups identical toasts fired together, so repeated automation/action events do not flood the UI.\n    const h=$('toastHost');\n    if(!h) return;\n    const text=String(msg ?? '');\n    const key=toastKey(text,type);\n    const existing=toastGroups.get(key);\n    if(existing){\n      existing.count += 1;\n      const badge=existing.el.querySelector('.toast-count');\n      if(badge){ badge.innerHTML=`<i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>${esc(existing.count)}`; badge.classList.remove('d-none'); }\n      clearTimeout(existing.timer);\n      existing.timer=setTimeout(()=>{ existing.el.remove(); toastGroups.delete(key); },3500);\n      return;\n    }\n    const el=document.createElement('div');\n    el.className=`toast-item text-bg-${type}`;\n    el.innerHTML=`<span class=\"toast-message\">${esc(text)}</span><span class=\"toast-count d-none\"><i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>1</span>`;\n    h.appendChild(el);\n    const entry={el,count:1,timer:null};\n    entry.timer=setTimeout(()=>{ el.remove(); toastGroups.delete(key); },3500);\n    toastGroups.set(key,entry);\n  }\n  function setBusy(on, label='Working...'){ pendingBusy += on ? 1 : -1; if(pendingBusy<0) pendingBusy=0; const loader=$('globalLoader'); if(loader){ loader.classList.toggle('d-none', pendingBusy===0); const span=loader.querySelector('span:last-child'); if(span) span.textContent=label; } $('busyBadge')?.classList.toggle('d-none', pendingBusy===0); }\n  function isEasterEggReady(kind='click'){\n    if(!easterEggEnabled) return false;\n    return kind === 'loading' ? !!easterEggLoadingImageUrl : !!easterEggClickImageUrl;\n  }\n  function applyInitialLoaderEasterEgg(){\n    const box = $('initialLoaderSpinner');\n    if(!box) return;\n    if(!isEasterEggReady('loading')){\n      box.classList.remove('initial-loader-prank');\n      if(!box.querySelector('.spinner-border')) box.innerHTML = '<span class=\"spinner-border\" aria-hidden=\"true\"></span>';\n      return;\n    }\n    box.classList.add('initial-loader-prank');\n    box.innerHTML = `<img class=\"initial-loader-easter-egg-image\" src=\"${esc(easterEggLoadingImageUrl)}\" alt=\"Loading\" loading=\"eager\">`;\n  }\n  function showPrankClickImage(event){\n    const target = event.target?.closest?.('button, .btn, [role=button]');\n    if(!target || target.disabled || event.defaultPrevented || event.button !== 0) return;\n    if(!isEasterEggReady('click')) return;\n    if(Math.random() > 0.14) return;\n    const img = document.createElement('img');\n    img.className = 'prank-click-image';\n    img.src = easterEggClickImageUrl;\n    img.alt = '';\n    img.setAttribute('aria-hidden', 'true');\n    const rect = target.getBoundingClientRect();\n    const x = event.clientX || (rect.left + rect.width / 2);\n    const y = event.clientY || (rect.top + rect.height / 2);\n    img.style.left = `${Math.max(90, Math.min(window.innerWidth - 90, x))}px`;\n    img.style.top = `${Math.max(90, Math.min(window.innerHeight - 90, y))}px`;\n    document.body.appendChild(img);\n    setTimeout(() => img.remove(), 1300);\n  }\n  document.addEventListener('click', showPrankClickImage, true);\n  applyInitialLoaderEasterEgg();\n  function setInitialLoader(title, text){ if(initialLoaderDone) return; if($('initialLoaderTitle') && title) $('initialLoaderTitle').textContent=title; if($('initialLoaderText') && text) $('initialLoaderText').textContent=text; }\n  function hideInitialLoader(){ if(initialLoaderDone) return; initialLoaderDone=true; $('initialLoader')?.classList.add('is-hidden'); }\n  function buttonBusy(btn,on){ if(!btn)return; btn.disabled=on; const label=btn.querySelector('.btn-label'); if(label){ if(!label.dataset.orig) label.dataset.orig=label.innerHTML; label.innerHTML=on?`<span class=\"spinner-border spinner-border-sm me-1\"></span>Working...`:label.dataset.orig; }}\n  function activeTab(){ return document.querySelector('#detailTabs .nav-link.active')?.dataset.tab || 'general'; }\n  function loadingMarkup(label='Loading data...'){ if(isEasterEggReady('loading')) return `<div class=\"loading-line loading-center loading-easter-egg\"><img src=\"${esc(easterEggLoadingImageUrl)}\" alt=\"\" aria-hidden=\"true\"><span>${esc(label)}</span></div>`; return `<div class=\"loading-line loading-center\"><span class=\"spinner-border spinner-border-sm\" aria-hidden=\"true\"></span><span>${esc(label)}</span></div>`; }\n  // Note: Keeps empty-state colspans aligned with the desktop torrent table column count.\n  function torrentColumnSpan(){ return 26; }\n  function loadingTableRow(label='Loading torrents...'){ return `<tr><td colspan=\"${torrentColumnSpan()}\" class=\"empty loading-cell\">${loadingMarkup(label)}</td></tr>`; }\n  // Note: Handles fresh installations with no configured rTorrent profile, so the UI does not wait forever for a snapshot.\n  function renderNoProfileState(){\n    hasTorrentSnapshot = false;\n    torrentSummary = {filters:{all:{count:0},downloading:{count:0},seeding:{count:0},paused:{count:0},checking:{count:0},error:{count:0},stopped:{count:0}}};\n    torrents.clear();\n    selected.clear();\n    renderCounts();\n    const body = $('torrentBody');\n    if(body){\n      body.innerHTML = `<tr><td colspan=\"${torrentColumnSpan()}\" class=\"empty\"><div class=\"empty-state\"><b>No rTorrent profile configured.</b><span>Add the first rTorrent profile to start loading torrents.</span><button id=\"setupProfileBtn\" class=\"btn btn-sm btn-primary\" type=\"button\"><i class=\"fa-solid fa-server\"></i> Add rTorrent profile</button></div></td></tr>`;\n    }\n    if($('detailPane')) $('detailPane').innerHTML = 'Add rTorrent profile first.';\n  }\n  function clearRtorrentStartingState(){\n    rtorrentStartingMessage='';\n    rtorrentStartingSince=0;\n    if(rtorrentStartingTimer){ clearTimeout(rtorrentStartingTimer); rtorrentStartingTimer=null; }\n  }\n  function rtorrentStartingHtml(error=''){\n    const details=error ? `<small>${esc(error)}</small>` : '<small>Port can already be open while XML-RPC/SCGI is still warming up. The list will load automatically after rTorrent answers.</small>';\n    return `<div class=\"empty-state\"><b>rTorrent is starting or not responding yet.</b><span>Waiting for torrent data from the active profile.</span>${details}</div>`;\n  }\n  function scheduleRtorrentStartingState(error=''){\n    rtorrentStartingMessage = String(error || 'rTorrent is starting or not responding yet.');\n    if(!(hasTorrentSnapshot && torrents.size)){\n      renderRtorrentStartingState(rtorrentStartingMessage, true);\n      return;\n    }\n    if(!rtorrentStartingSince) rtorrentStartingSince = Date.now();\n    if(rtorrentStartingTimer) return;\n    rtorrentStartingTimer = setTimeout(() => {\n      rtorrentStartingTimer = null;\n      if(rtorrentStartingMessage) renderRtorrentStartingState(rtorrentStartingMessage, true);\n    }, RTORRENT_STALE_GRACE_MS);\n  }\n  function renderRtorrentStartingState(error='', force=false){\n    rtorrentStartingMessage = String(error || 'rTorrent is starting or not responding yet.');\n    if(hasTorrentSnapshot && torrents.size && !force) return;\n    hasTorrentSnapshot = false;\n    torrentSummary = {filters:{all:{count:0},downloading:{count:0},seeding:{count:0},paused:{count:0},checking:{count:0},error:{count:0},stopped:{count:0}}};\n    torrents.clear();\n    selected.clear();\n    renderCounts();\n    const body=$('torrentBody');\n    if(body) body.innerHTML = `<tr><td colspan=\"${torrentColumnSpan()}\" class=\"empty\">${rtorrentStartingHtml(rtorrentStartingMessage)}</td></tr>`;\n    const list=$('mobileList');\n    if(list) list.innerHTML = `<div class=\"empty\">${rtorrentStartingHtml(rtorrentStartingMessage)}</div>`;\n    if($('detailPane')) $('detailPane').innerHTML = 'rTorrent is starting. Details will appear after the first successful response.';\n  }\n  function parseDate(value){ const raw=String(value||'').trim(); if(!raw) return null; const d=new Date(raw); return Number.isNaN(d.getTime()) ? null : {raw,d}; }\n  function formatDate(value, mode='short'){\n    const parsed=parseDate(value);\n    if(!parsed) return String(value||'');\n    const opts=mode==='full'\n      ? {year:'numeric',month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit',second:'2-digit'}\n      : {month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit'};\n    return new Intl.DateTimeFormat('pl-PL', opts).format(parsed.d).replace(',', '');\n  }\n  function dateCell(value){ const parsed=parseDate(value); if(!parsed) return esc(value||''); return `<span class=\"date-compact\" title=\"${esc(formatDate(value,'full'))}\">${esc(formatDate(value))}</span>`; }\n  // Note: Human-readable date cells keep full timestamps visible without squeezing table columns.\n  function humanDateCell(value){ const parsed=parseDate(value); if(!parsed) return esc(value||''); const full=formatDate(value,'full'); return `<span class=\"date-readable\" title=\"${esc(parsed.raw)}\">${esc(full)}</span>`; }\n  function compactCell(value, max=120){ const text=String(value||\"\"); if(!text) return \"\"; const short=text.length>max ? `${text.slice(0, Math.floor(max*0.62))}...${text.slice(-Math.floor(max*0.28))}` : text; return `<span class=\"text-compact\" title=\"${esc(text)}\">${esc(short)}</span>`; }\n  function progressBar(value, extraClass=''){ const pct=Math.max(0,Math.min(100,Number(value||0))); const hue=Math.round((pct/100)*120); const light=30+Math.round((pct/100)*5); const bg=pct<=0?'transparent':pct>=100?'var(--torrent-progress-complete)':`hsl(${hue} 52% ${light}%)`; const done=pct>=100?' is-complete':''; const cls=extraClass?` ${extraClass}`:''; return `<div class=\"progress torrent-progress${done}${cls}\" title=\"${esc(pct)}%\"><div class=\"progress-bar\" style=\"width:${pct}%;background:${bg}\"></div><span>${esc(pct)}%</span></div>`; }\n  function progress(t){ return progressBar(t.progress); }\n";
diff --git a/pytorrent/static/js/smartQueueEvents.js b/pytorrent/static/js/smartQueueEvents.js
new file mode 100644
index 0000000..bf130da
--- /dev/null
+++ b/pytorrent/static/js/smartQueueEvents.js
@@ -0,0 +1 @@
+export const smartQueueEventsSource = "$('smartRefillMode')?.addEventListener('change',updateSmartRefillControls); $('smartSaveBtn')?.addEventListener('click',saveSmartQueue); $('smartCheckBtn')?.addEventListener('click',async()=>{setBusy(true); try{const j=await post('/api/smart-queue/check',{}); if(j.queued){toastMessage('toast.smartQueueCheckQueued','success'); await loadJobs().catch(()=>{}); await loadSmartQueue(); return;} const r=j.result||{}; if(j.torrent_patch) patchRows(j.torrent_patch); toast(smartQueueToastMessage(r),'success'); await loadSmartQueue();}catch(e){toast(e.message,'danger');}finally{setBusy(false);}}); $('smartManager')?.addEventListener('click',async e=>{const h=e.target.closest('.smart-unexclude')?.dataset.hash; if(!h)return; await post('/api/smart-queue/exclusion',{hash:h,excluded:false}); await loadSmartQueue();}); ";
diff --git a/pytorrent/static/js/smartViews.js b/pytorrent/static/js/smartViews.js
new file mode 100644
index 0000000..0c4175c
--- /dev/null
+++ b/pytorrent/static/js/smartViews.js
@@ -0,0 +1 @@
+export const smartViewsSource = "const NOTIFICATION_STORAGE_KEY = 'pytorrent.notifications.v1';\nconst HEALTH_PANE_STORAGE_KEY = 'pytorrent.healthPane.v1';\nconst SMART_VIEW_DEFS = [\n  ['smart:needs_attention', 'Needs attention', 'Errors, dead torrents, inactive downloads or stalled seeding.'],\n  ['smart:large_slow', 'Large and slow', 'Large active downloads below the slow speed threshold.'],\n  ['smart:seeding_too_long', 'Seeding too long', 'Completed torrents seeding longer than 14 days or above ratio 2.0.'],\n  ['smart:new_rss', 'New from RSS', 'RSS-labeled torrents added during the last 7 days.'],\n  ['smart:no_label', 'No label', 'Torrents without any label.'],\n  ['smart:private_trackers', 'Private trackers', 'Torrents matched by known private tracker domains.'],\n];\nfunction torrentTrackers(t){\n  return trackerRowsForHash(t.hash).map(x=>String(x.domain||'')).filter(Boolean);\n}\nfunction torrentSearchText(t){\n  return [\n    t.name, t.hash, t.label, t.path, t.ratio_group, t.status, t.message,\n    t.size_h, t.progress, torrentWarning(t), ...torrentTrackers(t),\n  ].filter(v=>v!==undefined&&v!==null).join(' ').toLowerCase();\n}\nfunction torrentAgeSeconds(t){\n  const created=Number(t.created||0);\n  return created ? Math.max(0, Date.now()/1000-created) : 0;\n}\nfunction torrentCompletedAgeSeconds(t){\n  const completedAt=Number(t.completed_at||t.finished_at||t.done_at||0);\n  if(completedAt > 0) return Math.max(0, Date.now()/1000-completedAt);\n  if(t.complete) return 0;\n  return torrentAgeSeconds(t);\n}\nfunction torrentRatio(t){ return Number(t.ratio||0); }\nfunction torrentSize(t){ return Number(t.size||0); }\nfunction torrentDownRate(t){ return Number(t.down_rate||0); }\nfunction isIncompleteTorrent(t){ return !t.complete; }\nfunction isRunningTorrent(t){ return !!t.state && !t.paused; }\nfunction isSlowTorrent(t){ return torrentDownRate(t) > 0 && torrentDownRate(t) < 64*1024; }\nfunction isLargeTorrent(t){ return torrentSize(t) >= 20*1024*1024*1024; }\nfunction isDeadTorrent(t){ return isIncompleteTorrent(t) && Number(t.seeds||0) <= 0 && Number(t.peers||0) <= 0; }\nfunction isPostCheckTorrent(t){ return t.status === 'Post-check' || !!t.post_check; }\nfunction shouldBeActiveTorrent(t){ return isIncompleteTorrent(t) && !isChecking(t) && !isPostCheckTorrent(t) && !t.paused && !isRunningTorrent(t); }\nfunction isPrivateTrackerDomain(domain){\n  return /(iptorrents|torrentleech|beyond-hd|passthepopcorn|btn|redacted|empornium|gazelle|private|hd-torrents|filelist|alpharatio|avistaz|cinemaz|animetorrents)/i.test(domain||'');\n}\nfunction smartViewVisible(t, view){\n  const warning=torrentWarning(t);\n  if(view==='smart:needs_attention') return !!warning || isDeadTorrent(t) || shouldBeActiveTorrent(t) || (t.complete && Number(t.seeds||0) <= 0);\n  if(view==='smart:large_slow') return isIncompleteTorrent(t) && isRunningTorrent(t) && isLargeTorrent(t) && isSlowTorrent(t);\n  if(view==='smart:seeding_too_long') return !!t.complete && (torrentRatio(t) >= 2 || torrentCompletedAgeSeconds(t) >= 14*86400);\n  if(view==='smart:new_rss') return /rss/i.test(String(t.label||'') + ' ' + String(t.path||'')) && torrentAgeSeconds(t) <= 7*86400;\n  if(view==='smart:no_label') return !labelNames(t.label).length;\n  if(view==='smart:private_trackers') return torrentTrackers(t).some(isPrivateTrackerDomain);\n  return true;\n}\nfunction duplicateTorrentRows(rows){\n  const groups=new Map();\n  rows.forEach(t=>{\n    const name=String(t.name||'').trim().toLowerCase();\n    if(!name) return;\n    const key=`${name}|${torrentSize(t)||''}`;\n    if(!groups.has(key)) groups.set(key,[]);\n    groups.get(key).push(t);\n  });\n  return [...groups.values()].filter(g=>g.length>1).flat();\n}\nfunction healthRows(){\n  const rows=trackerScopedRows();\n  return {\n    noSeeders: rows.filter(t=>isIncompleteTorrent(t) && Number(t.seeds||0)<=0),\n    stoppedActive: rows.filter(shouldBeActiveTorrent),\n    trackerErrors: rows.filter(t=>torrentWarning(t)),\n    duplicates: duplicateTorrentRows(rows),\n    slowest: rows.filter(t=>isIncompleteTorrent(t) && isRunningTorrent(t)).sort((a,b)=>torrentDownRate(a)-torrentDownRate(b)).slice(0,12),\n    dead: rows.filter(isDeadTorrent),\n    largest: rows.slice().sort((a,b)=>torrentSize(b)-torrentSize(a)).slice(0,12),\n    belowRatio: rows.filter(t=>t.complete && torrentRatio(t)<1).sort((a,b)=>torrentRatio(a)-torrentRatio(b)).slice(0,12),\n  };\n}\nfunction healthSection(title, rows, note){\n  const sample=rows.slice(0,8).map(t=>`<button class=\"health-row\" type=\"button\" data-hash=\"${esc(t.hash)}\"><span>${esc(t.name||'-')}</span><small>${esc(t.status||'-')} · ${esc(t.size_h||'-')} · DL ${esc(t.down_rate_h||'0 B/s')} · Ratio ${esc(t.ratio??'-')}</small></button>`).join('');\n  return `<section class=\"health-card\"><div class=\"health-card-head\"><b>${esc(title)}</b><span class=\"badge text-bg-secondary\">${esc(rows.length)}</span></div><small>${esc(note)}</small><div class=\"health-list\">${sample||'<span class=\"empty-mini\">No items.</span>'}</div></section>`;\n}\nfunction activeHealthPane(){\n  const value=localStorage.getItem(HEALTH_PANE_STORAGE_KEY)||'availability';\n  return ['availability','quality','size'].includes(value) ? value : 'availability';\n}\nfunction setHealthPane(pane){\n  const box=$('healthDashboardManager');\n  if(!box) return;\n  localStorage.setItem(HEALTH_PANE_STORAGE_KEY, pane);\n  box.querySelectorAll('[data-health-pane]').forEach(x=>x.classList.toggle('active',x.dataset.healthPane===pane));\n  box.querySelectorAll('[data-health-panel]').forEach(x=>x.classList.toggle('d-none',x.dataset.healthPanel!==pane));\n}\nfunction renderHealthDashboard(){\n  const box=$('healthDashboardManager');\n  if(!box) return;\n  const h=healthRows();\n  const active=activeHealthPane();\n  const panes=[\n    ['availability','Availability', `${healthSection('Torrents without seeders',h.noSeeders,'Incomplete torrents with zero reported seeders.')}${healthSection('Stopped torrents that should be active',h.stoppedActive,'Incomplete torrents stopped outside explicit pause state.')}${healthSection('Dead torrents',h.dead,'No seeders and no peers.')}`],\n    ['quality','Quality', `${healthSection('Tracker errors',h.trackerErrors,'Rows with tracker or torrent warning state.')}${healthSection('Duplicate torrents',h.duplicates,'Same normalized name and size appear more than once.')}${healthSection('Slowest torrents',h.slowest,'Running incomplete torrents sorted by current download speed.')}`],\n    ['size','Size / ratio', `${healthSection('Largest torrents',h.largest,'Largest torrents in the current profile.')}${healthSection('Below target ratio',h.belowRatio,'Completed torrents below the default ratio target 1.0.')}`]\n  ];\n  box.innerHTML=`<div class=\"column-manager-tabs\"><ul class=\"nav nav-pills\">${panes.map(p=>`<li class=\"nav-item\"><button class=\"nav-link ${p[0]===active?'active':''}\" type=\"button\" data-health-pane=\"${p[0]}\">${p[1]}</button></li>`).join('')}</ul></div>${panes.map(p=>`<div class=\"health-pane ${p[0]===active?'':'d-none'}\" data-health-panel=\"${p[0]}\"><div class=\"health-dashboard-grid\">${p[2]}</div></div>`).join('')}`;\n}\nfunction renderSmartViewsManager(){\n  const box=$('smartViewsManager');\n  if(!box) return;\n  const rows=trackerScopedRows();\n  // Note: The hint makes the card action explicit without changing existing filter behavior.\n  box.innerHTML=`<div class=\"tool-note mb-2\"><i class=\"fa-solid fa-circle-info\"></i> Click any block to open the torrent list view filtered by that Smart View.</div><div class=\"smart-view-grid\">${SMART_VIEW_DEFS.map(([key,label,note])=>`<button class=\"smart-view-card ${activeFilter===key?'active':''}\" data-filter=\"${esc(key)}\" type=\"button\"><b>${esc(label)}</b><small>${esc(note)}</small><span>${esc(rows.filter(t=>smartViewVisible(t,key)).length)} torrents</span></button>`).join('')}</div>`;\n}\n";
diff --git a/pytorrent/static/js/speedLimitControls.js b/pytorrent/static/js/speedLimitControls.js
new file mode 100644
index 0000000..f943845
--- /dev/null
+++ b/pytorrent/static/js/speedLimitControls.js
@@ -0,0 +1 @@
+export const speedLimitControlsSource = "const mbpsToKib=mbps=>mbps?Math.round((Number(mbps)*1000000/8)/1024):0;\n  const kibToMbps=kib=>kib?Math.round((Number(kib)*1024*8)/1000000):0;\n  function setLimitSliderMax(slider,mbps){ if(slider && mbps>Number(slider.max||0)) slider.max=String(mbps); }\n  function setLimitValue(targetId,kib){ const input=$(targetId); if(input) input.value=Math.max(0,Math.round(Number(kib)||0)); }\n  function updateLimitSlider(slider){ if(!slider) return; const input=$(slider.dataset.target); const out=$(slider.dataset.output); const mbps=kibToMbps(Number(input?.value||0)); setLimitSliderMax(slider,mbps); slider.value=String(mbps); if(out) out.textContent=mbps?`${mbps} Mbit/s`:'Unlimited'; }\n  function updateLimitSliders(){ document.querySelectorAll('.limit-slider').forEach(updateLimitSlider); }\n  function syncLimitInputFromSlider(slider){ const mbps=Number(slider.value||0); setLimitValue(slider.dataset.target,mbpsToKib(mbps)); updateLimitSlider(slider); }\n  document.querySelectorAll('.limit-preset').forEach(b=>b.addEventListener('click',()=>{const kib=mbpsToKib(Number(b.dataset.mbps||0));setLimitValue('limitDown',kib);setLimitValue('limitUp',kib);updateLimitSliders();}));\n  document.querySelectorAll('.limit-slider').forEach(slider=>slider.addEventListener('input',()=>syncLimitInputFromSlider(slider)));\n  ['limitDown','limitUp'].forEach(id=>$(id)?.addEventListener('input',updateLimitSliders));\n  $('saveSpeedBtn')?.addEventListener('click',async()=>{const btn=$('saveSpeedBtn');buttonBusy(btn,true);setBusy(true);try{await post('/api/speed/limits',{down:Math.round(Number($('limitDown').value||0)*1024),up:Math.round(Number($('limitUp').value||0)*1024)});toast('Speed limits queued','success');bootstrap.Modal.getInstance($('speedModal'))?.hide();}catch(e){toast(e.message,'danger');}finally{buttonBusy(btn,false);setBusy(false);}}); $('speedModal')?.addEventListener('show.bs.modal',()=>{setLimitValue('limitDown',lastLimits.down?Math.round(lastLimits.down/1024):0);setLimitValue('limitUp',lastLimits.up?Math.round(lastLimits.up/1024):0);updateLimitSliders();});\n  // Note: rTorrent profile management was moved to profiles.js so poller.js only keeps polling and tools wiring.\n  ";
diff --git a/pytorrent/static/js/stateCore.js b/pytorrent/static/js/stateCore.js
new file mode 100644
index 0000000..a62bc34
--- /dev/null
+++ b/pytorrent/static/js/stateCore.js
@@ -0,0 +1 @@
+export const stateCoreSource = "  const $ = (id) => document.getElementById(id);\n  const esc = (s) => String(s ?? \"\").replace(/[&<>'\"]/g, c => ({\"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",\"'\":\"&#39;\",'\"':\"&quot;\"}[c]));\n  // Note: Footer transfer totals can arrive as already formatted strings, so keep this helper tolerant and side-effect free.\n  function compactTransferText(value){\n    const text = String(value ?? \"\").trim();\n    if(!text) return \"-\";\n    return text.replace(/\\\\s+/g, \" \");\n  }\n  const ROW_HEIGHT = 32, COMPACT_ROW_HEIGHT = 24, OVERSCAN = 14;\n  const torrents = new Map();\n  const browserViewPrefs = (()=>{ try{return JSON.parse(localStorage.getItem('pyTorrent.mobileViewPrefs')||'{}')||{};}catch(e){return {};} })();\n  const savedFilter = String(browserViewPrefs.activeFilter || window.PYTORRENT?.activeFilter || \"all\");\n  // Note: Mobile has both \"All\" and \"All trackers\" options, so keep the exact selected option separate from the shared filter state.\n  let mobileActiveFilterKey = String(browserViewPrefs.mobileFilterKey || savedFilter || \"all\");\n  let visibleRows = [], selected = new Set(), selectedHash = null, lastSelectedHash = null, activeFilter = savedFilter.startsWith(\"tracker:\") ? \"all\" : (savedFilter || \"all\");\n  let activeTrackerFilter = savedFilter.startsWith(\"tracker:\") ? savedFilter.slice(8) : \"\";\n  const SORT_KEYS = new Set([\"name\", \"status\", \"size\", \"progress\", \"down_rate\", \"up_rate\", \"eta\", \"seeds\", \"peers\", \"ratio\", \"path\", \"label\", \"ratio_group\", \"down_total\", \"to_download\", \"up_total\", \"created\", \"last_activity\", \"priority\", \"state\", \"active\", \"complete\", \"hashing\", \"message\", \"hash\"]);\n  const savedSort = browserViewPrefs.sortState || window.PYTORRENT?.torrentSort || {};\n  let sortState = {key: SORT_KEYS.has(savedSort.key) ? savedSort.key : \"name\", dir: Number(savedSort.dir) < 0 ? -1 : 1}, renderPending = false, renderVersion = 0, lastRenderSignature = \"\";\n  let compactTorrentListEnabled = Number(window.PYTORRENT?.compactTorrentListEnabled || 0) !== 0;\n  // Note: Mobile sort filters are configurable because the full sortable list is too large for quick phone use.\n  const DEFAULT_MOBILE_SORT_FILTER_IDS = new Set([\"seeds:-1\", \"up_rate:-1\", \"down_rate:-1\", \"progress:-1\"]);\n  const MOBILE_SORT_STEPS = [\n    {key:\"down_rate\", dir:-1, label:\"DL\"},\n    {key:\"down_rate\", dir:1, label:\"DL\"},\n    {key:\"up_rate\", dir:-1, label:\"UL\"},\n    {key:\"up_rate\", dir:1, label:\"UL\"},\n    {key:\"progress\", dir:-1, label:\"Progress\"},\n    {key:\"progress\", dir:1, label:\"Progress\"},\n    {key:\"eta\", dir:-1, label:\"ETA\"},\n    {key:\"eta\", dir:1, label:\"ETA\"},\n    {key:\"ratio\", dir:-1, label:\"Ratio\"},\n    {key:\"ratio\", dir:1, label:\"Ratio\"},\n    {key:\"size\", dir:-1, label:\"Size\"},\n    {key:\"size\", dir:1, label:\"Size\"},\n    {key:\"seeds\", dir:-1, label:\"Seeds\"},\n    {key:\"seeds\", dir:1, label:\"Seeds\"},\n    {key:\"peers\", dir:-1, label:\"Peers\"},\n    {key:\"peers\", dir:1, label:\"Peers\"},\n    {key:\"status\", dir:1, label:\"Status\"},\n    {key:\"status\", dir:-1, label:\"Status\"},\n    {key:\"label\", dir:1, label:\"Label\"},\n    {key:\"label\", dir:-1, label:\"Label\"},\n    {key:\"ratio_group\", dir:1, label:\"Ratio group\"},\n    {key:\"ratio_group\", dir:-1, label:\"Ratio group\"},\n    {key:\"down_total\", dir:-1, label:\"Downloaded\"},\n    {key:\"down_total\", dir:1, label:\"Downloaded\"},\n    {key:\"to_download\", dir:-1, label:\"To download\"},\n    {key:\"to_download\", dir:1, label:\"To download\"},\n    {key:\"up_total\", dir:-1, label:\"Uploaded\"},\n    {key:\"up_total\", dir:1, label:\"Uploaded\"},\n    {key:\"created\", dir:-1, label:\"Created\"},\n    {key:\"created\", dir:1, label:\"Created\"},\n    {key:\"last_activity\", dir:-1, label:\"Last activity\"},\n    {key:\"last_activity\", dir:1, label:\"Last activity\"},\n    {key:\"priority\", dir:-1, label:\"Priority\"},\n    {key:\"priority\", dir:1, label:\"Priority\"},\n    {key:\"state\", dir:-1, label:\"State\"},\n    {key:\"state\", dir:1, label:\"State\"},\n    {key:\"active\", dir:-1, label:\"Active\"},\n    {key:\"active\", dir:1, label:\"Active\"},\n    {key:\"complete\", dir:-1, label:\"Complete\"},\n    {key:\"complete\", dir:1, label:\"Complete\"},\n    {key:\"hashing\", dir:-1, label:\"Hashing\"},\n    {key:\"hashing\", dir:1, label:\"Hashing\"},\n    {key:\"message\", dir:1, label:\"Message\"},\n    {key:\"message\", dir:-1, label:\"Message\"},\n    {key:\"path\", dir:1, label:\"Path\"},\n    {key:\"path\", dir:-1, label:\"Path\"},\n    {key:\"hash\", dir:1, label:\"Hash\"},\n    {key:\"hash\", dir:-1, label:\"Hash\"},\n    {key:\"name\", dir:1, label:\"Name\"},\n    {key:\"name\", dir:-1, label:\"Name\"}\n  ];\n  let lastLimits = {down: 0, up: 0}, pendingBusy = 0, pathTarget = null, lastPathParent = \"/\";\n  const traffic = [], systemUsage = [];\n  const socket = (typeof io === \"function\") ? io({transports:[\"polling\"], reconnection:true, reconnectionAttempts:Infinity, reconnectionDelay:700, reconnectionDelayMax:5000, timeout:8000}) : {connected:false,on(){},emit(){},io:{on(){}}};\n";
diff --git a/pytorrent/static/js/systemStatsSocket.js b/pytorrent/static/js/systemStatsSocket.js
new file mode 100644
index 0000000..318c3dd
--- /dev/null
+++ b/pytorrent/static/js/systemStatsSocket.js
@@ -0,0 +1 @@
+export const systemStatsSocketSource = "  socket.on('system_stats',s=>{\n    const usageAvailable=s.usage_available!==false && s.cpu!==undefined && s.ram!==undefined;\n    $('statCpuBox')?.classList.toggle('d-none',!usageAvailable);\n    $('statRamBox')?.classList.toggle('d-none',!usageAvailable);\n    $('systemChart')?.classList.toggle('d-none',!usageAvailable);\n    if(usageAvailable){\n      $('statCpu').textContent=s.cpu??'-';\n      $('statRam').textContent=s.ram??'-';\n      drawSystemUsage(s.cpu,s.ram);\n    }\n    $('statVersion').textContent=s.version||'-';\n    applyLiveSpeedStats(s);\n    lastLimits={down:Number(s.down_limit||0),up:Number(s.up_limit||0)};\n    $('statDlLimit').textContent=s.down_limit_h||'∞';\n    $('statUlLimit').textContent=s.up_limit_h||'∞';\n    $('statTotalDl').textContent=compactTransferText(s.total_down_h);\n    $('statTotalUl').textContent=compactTransferText(s.total_up_h);\n    updateSpeedPeaks(s.speed_peaks||{});\n    drawTraffic(s.down_rate,s.up_rate);\n    if(diskMonitorMode==='default'){\n      drawDiskUsage(s.disk);\n    }else{\n      refreshUserDiskUsage(false);\n    }\n    updateRtorrentFooterStats(s, false);\n    saveFooterStatusCache(s);\n    if(s.poller) fillPoller(null,s.poller);\n    applyFooterPreferences();\n  });\n";
diff --git a/pytorrent/static/js/themeMobileControls.js b/pytorrent/static/js/themeMobileControls.js
new file mode 100644
index 0000000..e0f974f
--- /dev/null
+++ b/pytorrent/static/js/themeMobileControls.js
@@ -0,0 +1 @@
+export const themeMobileControlsSource = "$('themeToggle')?.addEventListener('click',async()=>{const cur=document.documentElement.dataset.bsTheme==='dark'?'light':'dark';document.documentElement.dataset.bsTheme=cur;await post('/api/preferences',{theme:cur}).catch(()=>{});}); $('mobileToggle')?.addEventListener('click',()=>{document.body.classList.toggle('mobile-mode-manual');syncMobileMode();}); window.addEventListener('resize',()=>syncMobileMode(),{passive:true}); syncMobileMode();\n";
diff --git a/pytorrent/static/js/toolPaneEvents.js b/pytorrent/static/js/toolPaneEvents.js
new file mode 100644
index 0000000..b662085
--- /dev/null
+++ b/pytorrent/static/js/toolPaneEvents.js
@@ -0,0 +1 @@
+export const toolPaneEventsSource = "function switchAppStatusPane(pane){ document.querySelectorAll('#appStatusTabs [data-appstatus-pane], #appStatusManager [data-appstatus-pane]').forEach(x=>x.classList.toggle('active',x.dataset.appstatusPane===pane)); $('appStatusManager')?.querySelectorAll('[data-appstatus-panel]').forEach(x=>x.classList.toggle('d-none',x.dataset.appstatusPanel!==pane)); } $('appStatusTabs')?.addEventListener('click',e=>{ const tab=e.target.closest('[data-appstatus-pane]'); if(tab) switchAppStatusPane(tab.dataset.appstatusPane); }); $('appStatusManager')?.addEventListener('click',e=>{ const tab=e.target.closest('[data-appstatus-pane]'); if(tab) switchAppStatusPane(tab.dataset.appstatusPane); }); $('healthDashboardManager')?.addEventListener('click',e=>{ const tab=e.target.closest('[data-health-pane]'); if(tab && typeof setHealthPane==='function') setHealthPane(tab.dataset.healthPane); }); $('torrentStatsManager')?.addEventListener('click',e=>{ const tab=e.target.closest('[data-torrentstats-pane]'); if(tab && typeof setTorrentStatsPane==='function') setTorrentStatsPane(tab.dataset.torrentstatsPane); }); $('torrentStatsRefreshBtn')?.addEventListener('click',()=>loadTorrentStats(true)); $('authUserSaveBtn')?.addEventListener('click',saveAuthUser); $('authUserCancelBtn')?.addEventListener('click',resetAuthUserForm); $('authUsersManager')?.addEventListener('click',async e=>{ const edit=e.target.closest('.auth-edit'); const token=e.target.closest('.auth-token:not(.auth-token-list)'); const tokenList=e.target.closest('.auth-token-list'); const del=e.target.closest('.auth-delete'); if(edit){ editAuthUser(JSON.parse(edit.dataset.user||'{}')); return; } if(token){ await generateAuthToken(token.dataset.id); return; } if(tokenList){ await showAuthTokens(tokenList.dataset.id); return; } if(del && confirm('Delete user?')){ try{ const j=await post(`/api/auth/users/${del.dataset.id}`,{},'DELETE'); if(!j.ok) throw new Error(j.error||'Delete failed'); toast('User deleted','success'); await loadAuthUsers(); }catch(e){ toast(e.message,'danger'); } } }); ";
diff --git a/pytorrent/static/js/toolsModal.js b/pytorrent/static/js/toolsModal.js
new file mode 100644
index 0000000..26a84db
--- /dev/null
+++ b/pytorrent/static/js/toolsModal.js
@@ -0,0 +1 @@
+export const toolsModalSource = "ensurePlannerToolsUI(); try{const j=await fetch('/api/poller/settings').then(r=>r.json()); fillPoller(j.settings||{},j.runtime||{});}catch(e){} }\n  async function savePollerSettings(){ try{const j=await post('/api/poller/settings',pollerPayload()); fillPoller(j.settings||pollerPayload(),null); toast('Poller settings saved','success');}catch(e){toast(e.message,'danger');} }\n  ensurePlannerToolsUI(); ensureDashboardToolsUI(); loadDownloadPlanner(); $('toolsModal')?.addEventListener('show.bs.modal',()=>{ensurePlannerToolsUI();ensureDashboardToolsUI();refreshProfiles();loadLabels();loadRatios();loadRss();loadSmartQueue();loadRtConfig();loadAutomations();loadCleanup();loadBackup();loadAppStatus();loadOperationLogs();renderHealthDashboard();renderSmartViewsManager();renderNotificationCenter();loadPreferences();loadJobSettings();if(document.querySelector('.tool-tab[data-tool=\"users\"]')?.classList.contains('active')) loadAuthUsers();loadDownloadPlanner();loadPollerSettings();renderColumnManager();applyColumnVisibility();updateAutomationForm();}); const toolPanelIds={rtorrents:'toolRtorrents',settings:'toolRtorrents',torrentstats:'toolTorrentStats',preferences:'toolPreferences',jobs:'toolJobs',users:'toolUsers',labels:'toolLabels',ratio:'toolRatio',rss:'toolRss',columns:'toolColumns',smart:'toolSmart',automations:'toolAutomations',rtconfig:'toolRtconfig',cleanup:'toolCleanup',backup:'toolBackup',logs:'toolLogs',appstatus:'toolAppstatus',planner:'toolPlanner',poller:'toolPoller',smartviews:'toolSmartviews',notifications:'toolNotifications'}; const hideToolPanels=()=>Object.values(toolPanelIds).filter((v,i,a)=>a.indexOf(v)===i).forEach(id=>$(id)?.classList.add('d-none')); const showToolPanel=tool=>{hideToolPanels(); $(toolPanelIds[tool]||'toolRtorrents')?.classList.remove('d-none');}; const activateToolTab=tool=>{document.querySelectorAll('.tool-tab').forEach(x=>x.classList.toggle('active',(x.dataset.tool||'rtorrents')===tool)); showToolPanel(tool); if(tool==='torrentstats') loadTorrentStats(false); if(tool==='appstatus') loadAppStatus(); if(tool==='cleanup') loadCleanup(); if(tool==='backup') loadBackup(); if(tool==='preferences') loadPreferences(); if(tool==='jobs') loadJobSettings(); if(tool==='logs') loadOperationLogs(true); if(tool==='users') loadAuthUsers(); if(tool==='planner') loadDownloadPlanner(); if(tool==='poller') loadPollerSettings(); if(tool==='smartviews') renderSmartViewsManager(); if(tool==='notifications') renderNotificationCenter(); if(tool==='diagnostics') loadAppStatus(); }; document.querySelectorAll('.tool-tab').forEach(b=>b.addEventListener('click',()=>activateToolTab(b.dataset.tool||'rtorrents'))); bindOperationLogEvents(); ";
diff --git a/pytorrent/static/js/torrentActionState.js b/pytorrent/static/js/torrentActionState.js
new file mode 100644
index 0000000..e2c60a5
--- /dev/null
+++ b/pytorrent/static/js/torrentActionState.js
@@ -0,0 +1 @@
+export const torrentActionStateSource = "  function actionLabel(action){\n    // Note: These labels are shown inside a torrent row, so they stay short and do not repeat the word torrent.\n    const labels={start:'Start',pause:'Pause',stop:'Stop',resume:'Resume',recheck:'Check',reannounce:'Reannounce',remove:'Remove',move:'Move',set_label:'Set label',set_ratio_group:'Set ratio'};\n    return labels[action] || `Working: ${action}`;\n  }\n  function actionIcon(action){\n    return ({start:'fa-play',pause:'fa-pause',stop:'fa-stop',resume:'fa-play',recheck:'fa-rotate',reannounce:'fa-bullhorn',remove:'fa-trash',move:'fa-folder-open',set_label:'fa-tag',set_ratio_group:'fa-scale-balanced'}[action]) || 'fa-gears';\n  }\n  function markTorrentOperation(hashes, action, jobId, state='queued'){\n    const label=actionLabel(action);\n    [...new Set(hashes||[])].filter(Boolean).forEach(hash=>activeOperations.set(hash,{action,jobId,state,label,updatedAt:Date.now()}));\n    scheduleRender(true);\n  }\n  function markQueuedJobs(response, fallbackHashes, action){\n    // Note: Supports API responses that split one large user action into multiple queued bulk parts.\n    const jobs=Array.isArray(response?.jobs)?response.jobs:[];\n    if(jobs.length){ jobs.forEach(job=>markTorrentOperation(job.hashes||[],action,job.job_id,'queued')); return; }\n    markTorrentOperation(fallbackHashes,action,response?.job_id,'queued');\n  }\n  function clearJobOperation(jobId, hashes=[]){\n    if(jobId){ [...activeOperations].forEach(([hash,op])=>{ if(op.jobId===jobId) activeOperations.delete(hash); }); }\n    (hashes||[]).forEach(hash=>activeOperations.delete(hash));\n    scheduleRender(true);\n  }\n  function actionCompletionPatch(action, torrent){\n    // Note: rTorrent can acknowledge light state actions before the next list read exposes the new status.\n    const complete=Number(torrent?.complete||0) !== 0;\n    if(['start','resume','unpause'].includes(action)) return {state:1, active:1, paused:false, post_check:false, status:complete?'Seeding':'Downloading'};\n    if(action==='pause') return {state:1, active:0, paused:true, status:'Paused'};\n    if(action==='stop') return {state:0, active:0, paused:false, post_check:false, status:'Stopped'};\n    return null;\n  }\n  function applyActionCompletionState(action, hashes=[]){\n    // Note: This optimistic patch keeps completed light actions visible while delayed cache refreshes settle.\n    const unique=[...new Set(hashes||[])].filter(Boolean);\n    let changed=false;\n    unique.forEach(hash=>{\n      const current=torrents.get(hash);\n      const patch=actionCompletionPatch(action,current);\n      if(!current || !patch) return;\n      torrents.set(hash,{...current,...patch});\n      changed=true;\n    });\n    if(changed) scheduleRender(true);\n  }\n  function activeOperationFor(t){ return activeOperations.get(t.hash) || null; }\n";
diff --git a/pytorrent/static/js/torrentChunkDetails.js b/pytorrent/static/js/torrentChunkDetails.js
new file mode 100644
index 0000000..cba6a8c
--- /dev/null
+++ b/pytorrent/static/js/torrentChunkDetails.js
@@ -0,0 +1 @@
+export const torrentChunkDetailsSource = "  const CHUNK_DENSITY_OPTIONS = {\n    compact: {label: 'Compact', maxCells: 2400},\n    normal: {label: 'Normal', maxCells: 1400},\n    detailed: {label: 'Detailed', maxCells: 700},\n  };\n  const CHUNK_FILTER_OPTIONS = [\n    ['all', 'All'],\n    ['problem', 'Missing + partial'],\n    ['missing', 'Missing'],\n    ['partial', 'Partial'],\n    ['seen', 'Seen by peers'],\n    ['complete', 'Complete'],\n  ];\n  let chunkFilterMode = localStorage.getItem('chunkFilterMode') || 'all';\n  let chunkDensityMode = localStorage.getItem('chunkDensityMode') || 'normal';\n  let lastChunkData = null;\n\n  function chunkMaxCellsForDensity(){\n    // Note: Density changes the API grouping level and the CSS cell size together.\n    return CHUNK_DENSITY_OPTIONS[chunkDensityMode]?.maxCells || CHUNK_DENSITY_OPTIONS.normal.maxCells;\n  }\n  function chunkCellsForFilter(cells){\n    const list = Array.isArray(cells) ? cells : [];\n    if(chunkFilterMode === 'all') return list;\n    if(chunkFilterMode === 'problem') return list.filter(cell => ['missing','partial'].includes(cell.status));\n    return list.filter(cell => cell.status === chunkFilterMode);\n  }\n  function chunkStatusLabel(status){\n    return ({complete:'Complete', partial:'Partial', missing:'Missing', seen:'Seen by peers'}[status] || 'Unknown');\n  }\n  function chunkCellTitle(cell){\n    const first = cell.first_chunk ?? '-';\n    const last = cell.last_chunk ?? first;\n    const pct = Number(cell.percent||0).toFixed(1).replace(/\\.0$/,'');\n    const completed = Number(cell.completed ?? 0);\n    const total = Number(cell.total ?? cell.unit_count ?? 1);\n    const grouped = cell.grouped ? `Grouped visual cell: ${cell.unit_count || 1} piece(s)` : 'Single piece';\n    return [\n      `Pieces: ${first}-${last}`,\n      `Status: ${chunkStatusLabel(cell.status)}`,\n      `Progress: ${pct}%`,\n      `Complete pieces: ${completed}/${total}`,\n      grouped,\n    ].join(' | ');\n  }\n  function chunkCellMarkup(cell){\n    const pct = Math.max(0, Math.min(100, Number(cell.percent || 0)));\n    const cls = `chunk-cell chunk-${esc(cell.status || 'missing')}${cell.grouped ? ' is-grouped' : ''}`;\n    return `<button class=\"${cls}\" type=\"button\" data-first-chunk=\"${esc(cell.first_chunk)}\" data-last-chunk=\"${esc(cell.last_chunk)}\" title=\"${esc(chunkCellTitle(cell))}\" aria-label=\"${esc(chunkCellTitle(cell))}\"><span style=\"height:${pct}%\"></span></button>`;\n  }\n  function renderChunkLegend(summary){\n    const items=[['complete','Complete'],['partial','Partial'],['missing','Missing'],['seen','Seen by peers']];\n    return items.map(([key,label])=>`<span class=\"chunk-legend-item\"><i class=\"chunk-dot chunk-${key}\"></i>${label} <b>${esc(summary?.[key]??0)}</b></span>`).join('');\n  }\n  function renderChunkControls(){\n    const filters = CHUNK_FILTER_OPTIONS.map(([value,label]) => `<option value=\"${esc(value)}\" ${chunkFilterMode === value ? 'selected' : ''}>${esc(label)}</option>`).join('');\n    const densities = Object.entries(CHUNK_DENSITY_OPTIONS).map(([value,cfg]) => `<option value=\"${esc(value)}\" ${chunkDensityMode === value ? 'selected' : ''}>${esc(cfg.label)}</option>`).join('');\n    return `<div class=\"chunk-controls\"><label><span>Filter</span><select id=\"chunkFilterMode\" class=\"form-select form-select-sm\">${filters}</select></label><label><span>Density</span><select id=\"chunkDensityMode\" class=\"form-select form-select-sm\">${densities}</select></label></div>`;\n  }\n  function selectedChunkRange(){\n    const selected=[...document.querySelectorAll('#detailPane .chunk-cell.is-selected')].map(el=>({first:Number(el.dataset.firstChunk||0),last:Number(el.dataset.lastChunk||0)}));\n    if(!selected.length) return null;\n    return {first_chunk:Math.min(...selected.map(x=>x.first)),last_chunk:Math.max(...selected.map(x=>x.last)),count:selected.length};\n  }\n  function updateChunkSelectionInfo(){\n    const info=$('chunkSelectionInfo');\n    if(!info) return;\n    const range=selectedChunkRange();\n    const filteredCount=document.querySelectorAll('#detailPane .chunk-cell').length;\n    const totalCount=lastChunkData?.cells?.length || 0;\n    if(range){\n      info.textContent=`Selected ${range.count} cell(s), pieces ${range.first_chunk}-${range.last_chunk}.`;\n      return;\n    }\n    const filterText=chunkFilterMode === 'all' ? '' : ` Showing ${filteredCount}/${totalCount} cell(s).`;\n    info.textContent=`Select one or more visual cells to prioritize files that overlap that range.${filterText}`;\n  }\n  function renderChunks(data){\n    const pane=$('detailPane');\n    const chunks=data||{};\n    lastChunkData=chunks;\n    const allCells=chunks.cells||[];\n    const cells=chunkCellsForFilter(allCells);\n    const grouped=chunks.grouped?'<span class=\"badge text-bg-warning\">grouped for performance</span>':'';\n    const meta=[\n      ['Piece size', chunks.chunk_size_h || '-'],\n      ['Pieces', chunks.size_chunks ?? 0],\n      ['Complete pieces', chunks.completed_chunks ?? 0],\n      ['Hashed pieces', chunks.chunks_hashed ?? 0],\n      ['Visual cells', chunks.visual_cells ?? allCells.length],\n    ].map(([label,value])=>`<div class=\"chunk-stat\"><b>${esc(label)}</b><span>${esc(value)}</span></div>`).join('');\n    pane.innerHTML=`\n      <div class=\"chunks-panel\">\n        <div class=\"chunks-toolbar\">\n          <div class=\"chunks-title\"><i class=\"fa-solid fa-grip\"></i> Chunks ${grouped}</div>\n          <div class=\"chunks-actions\">\n            <button class=\"btn btn-sm btn-outline-primary chunk-action-recheck\" type=\"button\"><i class=\"fa-solid fa-shield-halved\"></i> Recheck torrent</button>\n            <button class=\"btn btn-sm btn-outline-success chunk-action-prioritize\" type=\"button\"><i class=\"fa-solid fa-arrow-up\"></i> High priority files for selection</button>\n            <button class=\"btn btn-sm btn-outline-secondary chunk-refresh\" type=\"button\"><i class=\"fa-solid fa-rotate\"></i> Refresh</button>\n          </div>\n        </div>\n        <div class=\"chunk-stats\">${meta}</div>\n        <div class=\"chunk-tools-row\">\n          <div class=\"chunk-legend\">${renderChunkLegend(chunks.summary||{})}</div>\n          ${renderChunkControls()}\n        </div>\n        <div id=\"chunkSelectionInfo\" class=\"chunk-selection-info\"></div>\n        <div class=\"chunk-grid\" data-density=\"${esc(chunkDensityMode)}\" style=\"--chunk-count:${Math.max(1, Math.min(96, cells.length || 1))}\">${cells.map(chunkCellMarkup).join('') || '<div class=\"empty\">No chunk cells for this filter.</div>'}</div>\n      </div>`;\n    updateChunkSelectionInfo();\n  }\n  async function runChunkAction(action,payload={}){\n    if(!selectedHash) return toastMessage('toast.noTorrentSelected','warning');\n    setBusy(true);\n    try{\n      const j=await post(`/api/torrents/${encodeURIComponent(selectedHash)}/chunks/${action}`,payload);\n      toast(j.message || appMessage('toast.chunkActionDone',{action}),'success');\n      await loadDetails('chunks');\n    }catch(e){ toast(e.message,'danger'); }\n    finally{ setBusy(false); }\n  }\n  document.addEventListener('change', e=>{\n    const filter=e.target.closest('#chunkFilterMode');\n    if(filter){\n      chunkFilterMode=filter.value || 'all';\n      localStorage.setItem('chunkFilterMode', chunkFilterMode);\n      if(lastChunkData && activeTab()==='chunks') renderChunks(lastChunkData);\n      return;\n    }\n    const density=e.target.closest('#chunkDensityMode');\n    if(density){\n      chunkDensityMode=density.value || 'normal';\n      localStorage.setItem('chunkDensityMode', chunkDensityMode);\n      if(activeTab()==='chunks') loadDetails('chunks');\n    }\n  });\n";
diff --git a/pytorrent/static/js/torrentDetailsLoader.js b/pytorrent/static/js/torrentDetailsLoader.js
new file mode 100644
index 0000000..1106fc5
--- /dev/null
+++ b/pytorrent/static/js/torrentDetailsLoader.js
@@ -0,0 +1 @@
+export const torrentDetailsLoaderSource = "  async function loadDetails(tab, options={}){\n    const t=torrents.get(selectedHash);\n    const silent = !!options.silent;\n    if(tab !== 'files') clearFilesAutoRefresh();\n    if(tab !== 'peers') clearReverseDnsPeerRefresh();\n    if($('peersRefreshBox')) $('peersRefreshBox').classList.toggle('d-none', tab!=='peers');\n    setupPeersRefresh(tab);\n    if(!t) return;\n    if(tab==='general') return renderGeneral();\n    if(tab==='log'){\n      $('detailPane').innerHTML=`<pre class=\"torrent-log-message\">${esc(t.message||'No logs')}</pre>`;\n      return;\n    }\n    const pane=$('detailPane');\n    if(!silent) pane.innerHTML=`<div class=\"loading-line\"><span class=\"spinner-border spinner-border-sm\"></span> Loading ${esc(tab)}...</div>`;\n    try{\n      const detailUrl = tab==='chunks' ? `/api/torrents/${encodeURIComponent(selectedHash)}/chunks?max_cells=${chunkMaxCellsForDensity()}` : `/api/torrents/${encodeURIComponent(selectedHash)}/${tab}`;\n      const res=await fetch(detailUrl,{headers:{'Accept':'application/json'}});\n      const text=await res.text();\n      let json;\n      try{\n        json=JSON.parse(text);\n      }catch(parseErr){\n        throw new Error(`Invalid API response for ${tab}. HTTP ${res.status}`);\n      }\n      if(!res.ok || !json.ok) throw new Error(json.error||`HTTP ${res.status}`);\n      if(tab!==activeTab()) return;\n      if(tab==='files') renderFiles(json.files||[]);\n      if(tab==='chunks') renderChunks(json.chunks||{});\n      if(tab==='peers') renderPeers(json.peers||[]);\n      if(tab==='trackers') renderTrackers(json.trackers||[]);\n    }catch(e){\n      if(!silent) pane.innerHTML=`<div class=\"text-danger\">${esc(e.message)}</div>`;\n    }\n  }\n";
diff --git a/pytorrent/static/js/torrentFileDetails.js b/pytorrent/static/js/torrentFileDetails.js
new file mode 100644
index 0000000..3a8b5c5
--- /dev/null
+++ b/pytorrent/static/js/torrentFileDetails.js
@@ -0,0 +1 @@
+export const torrentFileDetailsSource = "  const FILE_PRIORITY_LABELS = {0: \"Skip\", 1: \"Normal\", 2: \"High\"};\n  function priorityClass(priority){ priority=Number(priority||0); return priority===2?\"text-bg-success\":priority===0?\"text-bg-secondary\":\"text-bg-primary\"; }\n  function renderFilePrioritySelect(f){ const p=Number(f.priority||0); return `<select class=\"form-select form-select-sm file-priority\" data-index=\"${esc(f.index)}\"><option value=\"0\" ${p===0?\"selected\":\"\"}>Skip</option><option value=\"1\" ${p===1?\"selected\":\"\"}>Normal</option><option value=\"2\" ${p===2?\"selected\":\"\"}>High</option></select>`; }\n  function selectedFileIndexes(){ return [...document.querySelectorAll('#detailPane .file-check:checked')].map(cb=>Number(cb.dataset.index)); }\n  function downloadSelectedFiles(){\n    if(!selectedHash) return;\n    const indexes=selectedFileIndexes();\n    if(!indexes.length) return toastMessage('toast.noFilesSelected','warning');\n    if(indexes.length===1){ openTemporaryDownload(`/api/torrents/${encodeURIComponent(selectedHash)}/files/${indexes[0]}/download-link`).catch(e=>toast(e.message,'danger')); return; }\n    downloadZip(indexes);\n  }\n  async function downloadZip(indexes=null){\n    if(!selectedHash) return;\n    try{\n      await openTemporaryDownload(`/api/torrents/${encodeURIComponent(selectedHash)}/files/download.zip/link`, {indexes});\n    }catch(e){ toast(e.message,'danger'); }\n  }\n\n  function mediaInfoValue(value){\n    const text = value === null || value === undefined || value === '' ? '-' : String(value);\n    return esc(text);\n  }\n  function mediaInfoSummaryCards(info){\n    // Note: Summary cards show the most useful hachoir fields while keeping the full raw list below.\n    const summary = info.summary || {};\n    const cards = [\n      ['Duration', summary.duration],\n      ['Bit rate', summary.bit_rate],\n      ['Resolution', summary.width && summary.height ? `${summary.width} x ${summary.height}` : null],\n      ['Frame rate', summary.frame_rate],\n      ['Audio', [summary.channels, summary.sample_rate].filter(Boolean).join(' · ')],\n      ['Codec / compression', summary.compression],\n      ['Producer', summary.producer],\n      ['Created', summary.creation_date],\n    ];\n    return cards.map(([label,value]) => `<div class=\"media-info-card\"><b>${esc(label)}</b><span>${mediaInfoValue(value)}</span></div>`).join('');\n  }\n  function mediaInfoFieldsTable(info){\n    const rows = (info.fields || []).slice(0, 160).map(field => `<tr><th>${esc(field.key)}</th><td>${esc(field.value)}</td></tr>`).join('');\n    if(rows) return `<div class=\"media-info-section\"><h6>Detected metadata</h6><div class=\"responsive-table-wrap\"><table class=\"table table-sm detail-table media-info-table\"><tbody>${rows}</tbody></table></div></div>`;\n    const raw = (info.raw || []).slice(0, 80).map(line => `<li>${esc(line)}</li>`).join('');\n    return `<div class=\"media-info-section\"><h6>Raw parser output</h6><ul class=\"media-info-raw\">${raw || '<li>No metadata was returned for the sampled part of this file.</li>'}</ul></div>`;\n  }\n  function ensureMediaInfoModal(){\n    let modal = $('mediaInfoModal');\n    if(modal) return modal;\n    // Note: The modal is created lazily so existing templates and old modals stay untouched.\n    modal = document.createElement('div');\n    modal.id = 'mediaInfoModal';\n    modal.className = 'modal fade media-info-modal';\n    modal.tabIndex = -1;\n    modal.innerHTML = `<div class=\"modal-dialog modal-xl modal-dialog-scrollable\"><div class=\"modal-content\"><div class=\"modal-header\"><div><h5 class=\"modal-title\"><i class=\"fa-solid fa-circle-info\"></i> File info</h5><div id=\"mediaInfoSubtitle\" class=\"media-info-subtitle\"></div></div><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div id=\"mediaInfoBody\" class=\"modal-body\"><div class=\"loading-line\"><span class=\"spinner-border spinner-border-sm\"></span> Loading file info...</div></div></div></div>`;\n    document.body.appendChild(modal);\n    return modal;\n  }\n  function mediaInfoSubtitle(info){\n    if(info.kind === 'pdf'){\n      const sizeText = info.size_h || (info.size ? fmtBytes(info.size) : 'unknown size');\n      return `${info.path || 'File'} · ${sizeText} · inline PDF preview`;\n    }\n    const sampleText = `${fmtBytes(info.sample_bytes || 0)} / ${fmtBytes(info.sample_limit || 0)} sample${info.partial ? ' · partial preview' : ''}`;\n    return `${info.path || 'File'} · ${sampleText}`;\n  }\n  function renderTextPreview(info){\n    const text = esc(info.text || '');\n    const note = info.partial ? `<div class=\"media-info-note\"><i class=\"fa-solid fa-scissors\"></i> Preview truncated to ${esc(fmtBytes(info.sample_limit || 0))}. Download the file to read the full content.</div>` : '';\n    return `${note}<pre class=\"media-info-text-preview\">${text || 'No text content was returned.'}</pre>`;\n  }\n  function renderImagePreview(info){\n    if(info.error){\n      return `<div class=\"media-info-image-empty\"><i class=\"fa-regular fa-image\"></i><div><b>Image preview unavailable</b><span>${esc(info.error)}</span></div><button class=\"btn btn-sm btn-outline-secondary file-download-one\" type=\"button\" data-index=\"${esc(info.index)}\"><i class=\"fa-solid fa-download\"></i> Download image</button></div>`;\n    }\n    return `<figure class=\"media-info-image-preview\"><img src=\"${esc(info.data_url || '')}\" alt=\"${esc(info.path || 'Image preview')}\" loading=\"lazy\"><figcaption>${esc(info.mime_type || 'image')} · ${esc(fmtBytes(info.sample_bytes || 0))}</figcaption></figure>`;\n  }\n  function mediaInfoPdfUrl(info){\n    // Note: PDF preview links are created by the backend as short-lived app URLs, so the new-tab button does not expose /api/.\n    return String(info.preview_url || '');\n  }\n  function renderPdfPreview(info){\n    // Note: PDF preview uses the browser renderer, preserving images and page layout instead of flattening books to extracted text.\n    const src = mediaInfoPdfUrl(info);\n    const downloadButton = `<button class=\"btn btn-sm btn-outline-secondary file-download-one\" type=\"button\" data-index=\"${esc(info.index)}\"><i class=\"fa-solid fa-download\"></i> Download PDF</button>`;\n    const openButton = src ? `<a class=\"btn btn-sm btn-outline-primary\" href=\"${esc(src)}\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa-solid fa-up-right-from-square\"></i> Open in new tab</a>` : '';\n    if(!src){\n      return `<div class=\"media-info-pdf-empty\"><i class=\"fa-regular fa-file-pdf\"></i><div><b>PDF preview unavailable</b><span>Missing temporary app link for inline preview.</span></div>${downloadButton}</div>`;\n    }\n    const title = esc(info.path || 'PDF preview');\n    const size = info.size_h || (info.size ? fmtBytes(info.size) : 'unknown size');\n    const expires = info.preview_expires_in ? ` · temporary link: ${Math.round(Number(info.preview_expires_in) / 60)} min` : '';\n    return `<div class=\"media-info-pdf-toolbar\"><div><b>PDF preview</b><span>${esc(size)} · rendered by your browser${esc(expires)}</span></div><div class=\"media-info-pdf-actions\">${openButton}${downloadButton}</div></div><div class=\"media-info-pdf-viewer\"><object data=\"${esc(src)}\" type=\"application/pdf\" aria-label=\"${title}\"><div class=\"media-info-pdf-empty\"><i class=\"fa-regular fa-file-pdf\"></i><div><b>Inline PDF preview is not available</b><span>Your browser blocked the embedded viewer. Open it in a new tab or download the file.</span></div>${openButton}${downloadButton}</div></object></div>`;\n  }\n  function renderMediaInfoModal(info){\n    const body = $('mediaInfoBody');\n    const subtitle = $('mediaInfoSubtitle');\n    if(!body) return;\n    if(subtitle) subtitle.textContent = mediaInfoSubtitle(info);\n    if(info.kind === 'text'){\n      body.innerHTML = `<div class=\"media-info-overview\">${mediaInfoSummaryCards({...info, summary:{duration:null, bit_rate:null, compression:info.encoding, producer:`${info.line_count || 0} line(s)`, creation_date:null}})}</div>${renderTextPreview(info)}${mediaInfoFieldsTable(info)}`;\n      return;\n    }\n    if(info.kind === 'image'){\n      body.innerHTML = `${renderImagePreview(info)}${mediaInfoFieldsTable(info)}`;\n      return;\n    }\n    if(info.kind === 'pdf'){\n      body.innerHTML = `<div class=\"media-info-overview\">${mediaInfoSummaryCards(info)}</div>${renderPdfPreview(info)}${mediaInfoFieldsTable(info)}`;\n      return;\n    }\n    if(info.error){\n      body.innerHTML = `<div class=\"alert alert-warning mb-0\"><b>File info unavailable</b><div>${esc(info.error)}</div></div>`;\n      return;\n    }\n    body.innerHTML = `<div class=\"media-info-overview\">${mediaInfoSummaryCards(info)}</div>${mediaInfoFieldsTable(info)}`;\n  }\n  async function openMediaInfo(index){\n    if(!selectedHash) return;\n    const button = document.querySelector(`#detailPane .file-media-info[data-index=\"${CSS.escape(String(index))}\"]`);\n    if(button?.disabled){\n      return toast('File info is available after this file is fully downloaded.','warning');\n    }\n    const modal = ensureMediaInfoModal();\n    $('mediaInfoSubtitle').textContent = 'Reading a bounded file sample...';\n    $('mediaInfoBody').innerHTML = '<div class=\"loading-line\"><span class=\"spinner-border spinner-border-sm\"></span> Loading file info...</div>';\n    new bootstrap.Modal(modal).show();\n    try{\n      const res = await fetch(`/api/torrents/${encodeURIComponent(selectedHash)}/files/${encodeURIComponent(index)}/mediainfo`, {headers:{'Accept':'application/json'}});\n      const json = await res.json().catch(() => ({}));\n      if(!res.ok || !json.ok) throw new Error(json.error || `HTTP ${res.status}`);\n      renderMediaInfoModal(json.media_info || {});\n    }catch(e){\n      $('mediaInfoBody').innerHTML = `<div class=\"alert alert-danger mb-0\"><b>File info failed</b><div>${esc(e.message)}</div></div>`;\n    }\n  }\n\n  function fileInfoAvailable(f){\n    // Note: File info is intentionally locked until rTorrent reports the selected file as fully downloaded.\n    const size = Number(f?.size || 0);\n    const progress = Number(f?.progress || 0);\n    const completedChunks = Number(f?.completed_chunks || 0);\n    const sizeChunks = Number(f?.size_chunks || 0);\n    return size <= 0 || progress >= 100 || (sizeChunks > 0 && completedChunks >= sizeChunks);\n  }\n  function renderFileInfoButton(f){\n    const available = fileInfoAvailable(f);\n    const title = available ? 'File info / preview' : 'File info is available after this file is fully downloaded.';\n    const disabled = available ? '' : ' disabled aria-disabled=\"true\"';\n    const stateClass = available ? 'btn-outline-info' : 'btn-outline-secondary file-media-info-blocked';\n    return `<button class=\"btn btn-xs ${stateClass} file-media-info\" type=\"button\" data-index=\"${esc(f.index)}\" title=\"${esc(title)}\"${disabled}><i class=\"fa-solid fa-circle-info\"></i></button>`;\n  }\n  function filesNeedAutoRefresh(files){\n    // Note: The files list keeps refreshing only while at least one visible file is not fully downloaded.\n    return (files || []).some(file => !fileInfoAvailable(file));\n  }\n  function clearFilesAutoRefresh(){\n    // Note: Clearing the timer prevents hidden Files tabs and completed torrents from polling rTorrent.\n    if(filesRefreshTimer) clearInterval(filesRefreshTimer);\n    filesRefreshTimer = null;\n    filesAutoRefreshHash = null;\n  }\n  function setupFilesAutoRefresh(files){\n    // Note: Auto-refresh belongs to the open Files tab and is disabled as soon as all files reach 100%.\n    const hash = selectedHash;\n    if(activeTab() !== 'files' || !hash || !filesNeedAutoRefresh(files)){\n      clearFilesAutoRefresh();\n      return;\n    }\n    if(filesRefreshTimer && filesAutoRefreshHash === hash) return;\n    clearFilesAutoRefresh();\n    filesAutoRefreshHash = hash;\n    filesRefreshTimer = setInterval(async () => {\n      if(activeTab() !== 'files' || !selectedHash || filesAutoRefreshHash !== selectedHash){\n        clearFilesAutoRefresh();\n        return;\n      }\n      if(filesRefreshInFlight) return;\n      filesRefreshInFlight = true;\n      try{\n        await loadDetails('files', {silent: true});\n      }finally{\n        filesRefreshInFlight = false;\n      }\n    }, FILES_AUTO_REFRESH_SECONDS * 1000);\n  }\n  function renderFiles(files){\n    const pane=$('detailPane');\n    const rows=(files||[]).map(f=>`<tr data-file-index=\"${esc(f.index)}\"><td class=\"sel\"><input class=\"file-check\" type=\"checkbox\" data-index=\"${esc(f.index)}\"></td><td class=\"path\" title=\"${esc(f.path)}\">${esc(f.path)}</td><td>${esc(f.size_h)}</td><td>${progressBar(f.progress ?? 0, 'file-progress')}</td><td><span class=\"badge ${priorityClass(f.priority)}\">${esc(FILE_PRIORITY_LABELS[Number(f.priority||0)]||f.priority)}</span></td><td>${renderFilePrioritySelect(f)}</td><td><div class=\"file-row-actions\">${renderFileInfoButton(f)}<button class=\"btn btn-xs btn-outline-secondary file-download-one\" type=\"button\" data-index=\"${esc(f.index)}\" title=\"Download\"><i class=\"fa-solid fa-download\"></i></button></div></td></tr>`).join('');\n    // Note: Files use the same responsive table wrapper as peers to keep wide paths usable on small screens.\n    pane.innerHTML=`<div class=\"files-toolbar\"><div class=\"files-action-strip\" role=\"group\" aria-label=\"File actions\"><div class=\"files-action-section\"><span class=\"files-action-label\">Priority</span><button class=\"btn btn-sm btn-outline-secondary file-priority-bulk\" type=\"button\" data-priority=\"0\"><i class=\"fa-solid fa-ban\"></i> Skip selected</button><button class=\"btn btn-sm btn-outline-primary file-priority-bulk\" type=\"button\" data-priority=\"1\"><i class=\"fa-solid fa-bars\"></i> Normal selected</button><button class=\"btn btn-sm btn-outline-success file-priority-bulk\" type=\"button\" data-priority=\"2\"><i class=\"fa-solid fa-arrow-up\"></i> High selected</button></div><span class=\"files-action-separator\" aria-hidden=\"true\"></span><div class=\"files-action-section\"><span class=\"files-action-label\">Download</span><button class=\"btn btn-sm btn-outline-secondary file-download-selected\" type=\"button\"><i class=\"fa-solid fa-download\"></i> Download selected</button><button class=\"btn btn-sm btn-outline-secondary file-download-zip\" type=\"button\"><i class=\"fa-solid fa-file-zipper\"></i> Download all ZIP</button><button class=\"btn btn-sm btn-outline-secondary file-tree-refresh\" type=\"button\"><i class=\"fa-solid fa-folder-tree\"></i> Tree</button></div></div><span class=\"small text-muted\">Changes are applied immediately in rTorrent. File info becomes available only after a file reaches 100%.</span></div><div id=\"fileTreePanel\" class=\"file-tree-panel d-none\"></div><div class=\"responsive-table-wrap\"><table class=\"table table-sm detail-table file-priority-table\"><thead><tr><th><input id=\"fileSelectAll\" type=\"checkbox\"></th><th>Path</th><th>Size</th><th>Done</th><th>Priority</th><th>Set priority</th><th>Actions</th></tr></thead><tbody>${rows || '<tr><td colspan=\"7\" class=\"empty\">No files.</td></tr>'}</tbody></table></div>`;\n    setupFilesAutoRefresh(files);\n  }\n  function fileTreeNode(node){\n    const children=(node.children||[]).map(fileTreeNode).join('');\n    if(node.type==='file') return `<li><span class=\"file-tree-file\" data-index=\"${esc(node.index)}\"><i class=\"fa-regular fa-file\"></i> ${esc(node.name||node.path)} <small>${esc(node.size_h||'')}</small></span></li>`;\n    return `<li><details open><summary><i class=\"fa-regular fa-folder-open\"></i> ${esc(node.name||'Files')} <small>${esc(node.size_h||'')}</small> <span class=\"file-tree-actions\"><button class=\"btn btn-xs btn-outline-secondary folder-priority\" data-path=\"${esc(node.path||'')}\" data-priority=\"0\"><i class=\"fa-solid fa-ban\"></i> Skip</button><button class=\"btn btn-xs btn-outline-primary folder-priority\" data-path=\"${esc(node.path||'')}\" data-priority=\"1\"><i class=\"fa-solid fa-bars\"></i> Normal</button><button class=\"btn btn-xs btn-outline-success folder-priority\" data-path=\"${esc(node.path||'')}\" data-priority=\"2\"><i class=\"fa-solid fa-arrow-up\"></i> High</button></span></summary><ul>${children}</ul></details></li>`;\n  }\n  async function loadFileTree(){\n    if(!selectedHash) return;\n    const box=$('fileTreePanel');\n    if(!box) return;\n    box.classList.toggle('d-none');\n    if(box.classList.contains('d-none')) return;\n    box.innerHTML='<span class=\"spinner-border spinner-border-sm\"></span> Loading tree...';\n    try{ const j=await (await fetch(`/api/torrents/${encodeURIComponent(selectedHash)}/files/tree`)).json(); if(!j.ok) throw new Error(j.error||'Tree failed'); box.innerHTML=`<ul class=\"file-tree-root\">${fileTreeNode(j.tree||{})}</ul>`; }\n    catch(e){ box.innerHTML=`<div class=\"text-danger\">${esc(e.message)}</div>`; }\n  }\n  async function setFilePriorities(items){\n    if(!selectedHash || !items.length) return;\n    setBusy(true);\n    try{\n      const res=await fetch(`/api/torrents/${encodeURIComponent(selectedHash)}/files/priority`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({files:items})});\n      const j=await res.json();\n      if(!j.ok || (j.errors&&j.errors.length)) throw new Error(j.errors?.[0]?.error || j.error || 'Priority update failed');\n      toast(`Updated ${j.updated?.length||items.length} file priority item(s)`,'success');\n      await loadDetails('files');\n    }catch(e){ toast(e.message,'danger'); } finally{ setBusy(false); }\n  }\n\n";
diff --git a/pytorrent/static/js/torrentFilterHelpers.js b/pytorrent/static/js/torrentFilterHelpers.js
new file mode 100644
index 0000000..8d9bf7c
--- /dev/null
+++ b/pytorrent/static/js/torrentFilterHelpers.js
@@ -0,0 +1 @@
+export const torrentFilterHelpersSource = "  // Note: Displays status filter summaries calculated and cached by the backend API.\n  const FILTER_COUNT_IDS = {all:'countAll', downloading:'countDownloading', seeding:'countSeeding', paused:'countPaused', checking:'countChecking', error:'countError', post_check:'countPostCheck', stopped:'countStopped', moving:'countMoving'};\n  function formatFilterBytes(value){ return fmtBytes(value).replace(/\\.0 (?=GiB|TiB)/, ' '); }\n  function filterMetaLine(bucket){\n    if(!bucket || !Number(bucket.count||0)) return '';\n    const disk=Number(bucket.disk_bytes ?? bucket.completed_bytes ?? 0);\n    return `Data ${formatFilterBytes(disk)}`;\n  }\n  function filterNeedsDownloadDetails(type, bucket){\n    if(!bucket || !Number(bucket.count||0)) return false;\n    if(type==='downloading' || type==='post_check') return true;\n    if(type!=='paused' && type!=='stopped') return false;\n    const size=Number(bucket.size||0);\n    const completed=Number(bucket.completed_bytes ?? bucket.disk_bytes ?? 0);\n    const remaining=Number(bucket.remaining_bytes ?? Math.max(0, size-completed));\n    const progress=Number(bucket.progress_percent ?? (size ? (completed / size) * 100 : 0));\n    return size > 0 && remaining > 0 && progress < 100;\n  }\n  function filterTooltipLine(bucket, type){\n    if(!bucket || !Number(bucket.count||0)) return '';\n    const size=Number(bucket.size||0);\n    const disk=Number(bucket.disk_bytes ?? bucket.completed_bytes ?? 0);\n    const completed=Number(bucket.completed_bytes ?? disk);\n    const remaining=Number(bucket.remaining_bytes ?? Math.max(0, size-completed));\n    const progress=Number(bucket.progress_percent ?? (size ? (completed / size) * 100 : 0));\n    const left=Number(bucket.remaining_percent ?? Math.max(0, 100-progress));\n    const lines=[`Data: ${formatFilterBytes(disk)}`];\n    if(filterNeedsDownloadDetails(type, bucket)){\n      lines.push(`Total to download: ${formatFilterBytes(size)}`);\n      lines.push(`Downloaded: ${formatFilterBytes(completed)} (${progress.toFixed(1)}%)`);\n      lines.push(`Left: ${formatFilterBytes(remaining)} (${left.toFixed(1)}%)`);\n    }\n    return lines.join('\\n');\n  }\n  function applyFilterTooltip(button, tooltip, ariaLabel){\n    if(tooltip){\n      button.title = tooltip;\n      button.setAttribute('aria-label', ariaLabel);\n    } else {\n      button.removeAttribute('title');\n      button.removeAttribute('aria-label');\n    }\n  }\n  function ensureStableFilterTooltip(button){\n    if(filterTooltipState.has(button)) return filterTooltipState.get(button);\n    const state = {hovering:false, pending:null};\n    filterTooltipState.set(button, state);\n    button.addEventListener('mouseenter', () => {\n      state.hovering = true;\n      state.pending = null;\n    });\n    button.addEventListener('mouseleave', () => {\n      state.hovering = false;\n      if(state.pending){\n        applyFilterTooltip(button, state.pending.tooltip, state.pending.ariaLabel);\n        state.pending = null;\n      }\n    });\n    return state;\n  }\n  // Note: Freezes tooltip content during hover; the next hover receives the newest live summary.\n  function setStableFilterTooltip(button, tooltip, ariaLabel){\n    const state = ensureStableFilterTooltip(button);\n    if(state.hovering){\n      state.pending = {tooltip, ariaLabel};\n      return;\n    }\n    applyFilterTooltip(button, tooltip, ariaLabel);\n  }\n";
diff --git a/pytorrent/static/js/torrentFilterUi.js b/pytorrent/static/js/torrentFilterUi.js
new file mode 100644
index 0000000..dad1b86
--- /dev/null
+++ b/pytorrent/static/js/torrentFilterUi.js
@@ -0,0 +1 @@
+export const torrentFilterUiSource = "  function movingOperationRows(){\n    // Note: The Moving filter is based only on active move operations, not queued jobs.\n    return [...torrents.values()].filter(t=>{\n      const op=activeOperationFor(t);\n      return op?.action==='move' && op?.state==='running';\n    });\n  }\n  function movingFilterCount(){ return movingOperationRows().length; }\n  function torrentMatchesFilterType(t, type){\n    if(type==='all') return true;\n    if(type==='downloading') return !isChecking(t) && !t.complete && t.state && !t.paused;\n    if(type==='seeding') return !isChecking(t) && t.complete && t.state && !t.paused;\n    if(type==='paused') return !!t.paused || t.status==='Paused';\n    if(type==='checking') return isChecking(t);\n    if(type==='error') return torrentHasError(t);\n    if(type==='post_check') return t.status==='Post-check' || !!t.post_check;\n    if(type==='stopped') return !t.state && !isChecking(t) && t.status!=='Post-check' && !t.post_check;\n    if(type==='moving'){\n      const op=activeOperationFor(t);\n      return op?.action==='move' && op?.state==='running';\n    }\n    return true;\n  }\n  function trackerScopedRows(){\n    const rows=[...torrents.values()];\n    return activeTrackerFilter ? rows.filter(t=>rowHasTracker(t, activeTrackerFilter)) : rows;\n  }\n  function summarizeFilterRows(rows, type){\n    const matched=rows.filter(t=>torrentMatchesFilterType(t, type));\n    const bucket={count:matched.length,size:0,disk_bytes:0,completed_bytes:0,remaining_bytes:0};\n    matched.forEach(t=>{\n      const size=Number(t.size||0);\n      const progress=Number(t.progress||0);\n      const completed=Number(t.completed_bytes ?? t.completed ?? t.down_total ?? (size && Number.isFinite(progress) ? size * Math.max(0, Math.min(100, progress)) / 100 : 0));\n      bucket.size += size;\n      bucket.completed_bytes += completed;\n      bucket.disk_bytes += completed;\n      bucket.remaining_bytes += Math.max(0, size-completed);\n    });\n    bucket.progress_percent = bucket.size ? (bucket.completed_bytes / bucket.size) * 100 : 0;\n    bucket.remaining_percent = Math.max(0, 100-bucket.progress_percent);\n    return bucket;\n  }\n  function filterSummaryBucket(type){\n    if(type==='moving') return {count:movingFilterCount()};\n    if(activeTrackerFilter) return summarizeFilterRows(trackerScopedRows(), type);\n    return torrentSummary?.filters?.[type] || {count:0};\n  }\n  function setFilterSummary(type){\n    const el=$(FILTER_COUNT_IDS[type]);\n    if(!el) return;\n    const bucket=filterSummaryBucket(type);\n    const meta=type==='moving' ? '' : filterMetaLine(bucket, type);\n    const tooltip=type==='moving' && bucket.count ? 'Active moving operations' : filterTooltipLine(bucket, type);\n    el.innerHTML=`<span class=\"filter-count\">${esc(bucket.count||0)}</span>${meta?`<span class=\"filter-meta\">${esc(meta)}</span>`:''}`;\n    const button=el.closest('.filter');\n    if(button){\n      const ariaLabel = tooltip ? `${button.dataset.filter || type}: ${tooltip.replace(/\\n/g, ', ')}` : '';\n      button.classList.toggle('d-none', type==='moving' && !Number(bucket.count||0));\n      setStableFilterTooltip(button, tooltip, ariaLabel);\n    }\n  }\n  function labelNames(value){ return String(value||'').split(/[,;|]+/).map(x=>x.trim()).filter(Boolean).filter((x,i,a)=>a.indexOf(x)===i); }\n  function labelValue(labels){ return [...new Set((labels||[]).map(x=>String(x||'').trim()).filter(Boolean))].join(', '); }\n  function rowHasLabel(t,label){ return labelNames(t.label).includes(label); }\n  function trackerRowsForHash(hash){ return trackerSummary.hashes?.[hash] || []; }\n  function rowHasTracker(t, domain){ return trackerRowsForHash(t.hash).some(x=>x.domain===domain); }\n  function torrentHasError(t){ return !!torrentWarning(t); }\n  function isChecking(t){ return t?.status==='Checking' || Number(t?.hashing||0)>0; }\n  function rowVisible(t){ const q=($('searchBox')?.value||'').toLowerCase(); if(q && !torrentSearchText(t).includes(q)) return false; if(activeTrackerFilter && !rowHasTracker(t, activeTrackerFilter)) return false; if(FILTER_COUNT_IDS[activeFilter]) return torrentMatchesFilterType(t, activeFilter); if(activeFilter.startsWith('label:')) return rowHasLabel(t,activeFilter.slice(6)); if(activeFilter.startsWith('smart:')) return smartViewVisible(t,activeFilter); return true; }\n  function compareRows(a,b){\n    const k=sortState.key;\n    if(k==='eta'){\n      // Note: ETA is displayed as text but sorted by eta_seconds; unavailable ETA stays last in both directions.\n      const av=Number(a.eta_seconds||0), bv=Number(b.eta_seconds||0);\n      const aMissing=!Number.isFinite(av)||av<=0, bMissing=!Number.isFinite(bv)||bv<=0;\n      if(aMissing&&bMissing) return String(a.name||'').localeCompare(String(b.name||''));\n      if(aMissing) return 1;\n      if(bMissing) return -1;\n      return (av>bv?1:av<bv?-1:0)*sortState.dir;\n    }\n    let av=a[k], bv=b[k];\n    if(typeof av==='string'||typeof bv==='string') return String(av||'').localeCompare(String(bv||''))*sortState.dir;\n    return ((Number(av||0)>Number(bv||0))?1:(Number(av||0)<Number(bv||0)?-1:0))*sortState.dir;\n  }\n  function sortIcon(key){ if(sortState.key!==key) return ''; return sortState.dir>0?\" <i class='fa-solid fa-caret-up'></i>\":\" <i class='fa-solid fa-caret-down'></i>\"; }\n\n\n\n\n  function updateSortHeaders(){\n    document.querySelectorAll('.torrent-table thead th[data-sort]').forEach(th=>{\n      const title = th.querySelector('.column-title');\n      const base = th.dataset.baseText || (title ? title.textContent.trim() : th.textContent.trim());\n      th.dataset.baseText = base;\n      if(title) title.innerHTML = `${esc(base)}${sortIcon(th.dataset.sort)}`;\n      else th.innerHTML = `<span class=\"column-title\">${esc(base)}${sortIcon(th.dataset.sort)}</span>`;\n      th.classList.toggle('sorted', sortState.key === th.dataset.sort);\n    });\n  }\n  // Note: Refreshes sidebar counters from the cached API summary, not from browser-side aggregation.\n  function syncFilterButtons(){\n    // Note: Tracker is a parent scope; regular filters stay active inside the selected tracker.\n    document.querySelectorAll('.filter').forEach(x=>{\n      const key=x.dataset.filter||'';\n      if(key.startsWith('tracker:')) x.classList.toggle('active', activeTrackerFilter===key.slice(8));\n      else if(x.dataset.trackerScope==='all') x.classList.toggle('active', !activeTrackerFilter);\n      else x.classList.toggle('active', key===activeFilter);\n    });\n  }\n  function renderCounts(){\n    // Note: When the last move operation finishes, the hidden filter does not leave an empty list active.\n    if(activeFilter==='moving' && !movingFilterCount()){ activeFilter='all'; mobileActiveFilterKey='all'; }\n    syncFilterButtons();\n    Object.keys(FILTER_COUNT_IDS).forEach(setFilterSummary);\n    $('statSelected').textContent=selected.size;\n  }\n  function bindSidebarFilterClicks(root){\n    root?.querySelectorAll('.filter').forEach(b=>b.addEventListener('click',()=>{\n      const key=b.dataset.filter||'all';\n      if(key.startsWith('tracker:')){ activeTrackerFilter=key.slice(8); mobileActiveFilterKey=key; }\n      else if(b.dataset.trackerScope==='all'){ activeTrackerFilter=''; mobileActiveFilterKey='tracker:'; }\n      else { activeTrackerFilter=''; activeFilter=key; mobileActiveFilterKey=key; }\n      syncFilterButtons();\n      saveActiveFilterPreference();\n      if($('tableWrap')) $('tableWrap').scrollTop=0;\n      if($('mobileList')) $('mobileList').scrollTop=0;\n      scheduleRender(true);\n    }));\n  }\n  function renderLabelFilters(force=false){\n    const box=$('labelFilters');\n    if(!box) return;\n    const counts=new Map();\n    trackerScopedRows().forEach(t=>labelNames(t.label).forEach(l=>counts.set(l,(counts.get(l)||0)+1)));\n    const labels=[...counts.keys()].filter(l=>counts.get(l)>0).sort((a,b)=>a.localeCompare(b));\n    if(activeFilter.startsWith('label:') && !counts.has(activeFilter.slice(6))){ activeFilter='all'; mobileActiveFilterKey='all'; }\n    const sig=labels.map(l=>`${l}:${counts.get(l)}`).join('|');\n    if(!force && sig===lastLabelFiltersSignature){ syncFilterButtons(); return; }\n    lastLabelFiltersSignature=sig;\n    box.innerHTML=labels.length?`<div class=\"small text-muted px-2 mb-1\">Labels</div>${labels.map(l=>`<button class=\"filter label-filter ${activeFilter==='label:'+l?'active':''}\" data-filter=\"label:${esc(l)}\"><span><i class=\"fa-solid fa-tag\"></i> ${esc(l)}</span><span>${counts.get(l)}</span></button>`).join('')}`:'';\n    bindSidebarFilterClicks(box);\n  }\n";
diff --git a/pytorrent/static/js/torrentGeneralDetails.js b/pytorrent/static/js/torrentGeneralDetails.js
new file mode 100644
index 0000000..9ddd5a4
--- /dev/null
+++ b/pytorrent/static/js/torrentGeneralDetails.js
@@ -0,0 +1 @@
+export const torrentGeneralDetailsSource = "  function formatDateTime(seconds){ const n=Number(seconds||0); if(!n) return '-'; try{ return new Date(n*1000).toLocaleString(); }catch(e){ return '-'; } }\n  function joinRemotePath(base,name){\n    const b=String(base||'').trim();\n    const n=String(name||'').trim();\n    if(!b && !n) return '-';\n    if(!n) return b || '-';\n    if(!b) return n;\n    return `${b.replace(/\\/+$/,'')}/${n.replace(/^\\/+/,'')}`;\n  }\n  function renderGeneral(){\n    const t=torrents.get(selectedHash);\n    if(!t){ $('detailPane').innerHTML='Select a torrent.'; return; }\n    const labels=labelNames(t.label).map(l=>`<span class=\"chip label-mini\"><i class=\"fa-solid fa-tag\"></i> ${esc(l)}</span>`).join(' ') || '<span class=\"text-muted\">-</span>';\n    const ratioGroup=t.ratio_group ? `<span class=\"badge text-bg-info\">${esc(t.ratio_group)}</span>` : '<span class=\"text-muted\">Not assigned</span>';\n    const statusClass=t.status==='Seeding'?'success':t.status==='Downloading'?'primary':t.status==='Checking'?'warning':t.status==='Paused'?'secondary':t.status==='Stopped'?'dark':'secondary';\n    const fullPath=joinRemotePath(t.path,t.name);\n    const cards=[\n      ['Size', esc(t.size_h||'-')],\n      ['Downloaded', esc(t.down_total_h||'-')],\n      ['Uploaded', esc(t.up_total_h||'-')],\n      ['Ratio', esc(t.ratio??'-')],\n      ['Download speed', esc(t.down_rate_h||'-')],\n      ['Upload speed', esc(t.up_rate_h||'-')],\n      ['Seeds / Peers', `${esc(t.seeds??0)} / ${esc(t.peers??0)}`],\n      ['ETA', esc(t.eta_h||'-')],\n      ['Created', esc(formatDateTime(t.created))],\n      ['Last activity', esc(formatDateTime(t.last_activity))],\n      ['Priority', esc(t.priority??'-')],\n    ].map(([label,value])=>`<div class=\"general-stat\"><b>${label}</b><span>${value}</span></div>`).join('');\n    $('detailPane').innerHTML=`\n      <section class=\"general-summary\">\n        <div class=\"general-summary-main\">\n          <div class=\"general-title-row\"><h6>${esc(t.name||'-')}</h6><span class=\"badge text-bg-${statusClass}\">${esc(t.status||'-')}</span></div>\n          <div class=\"general-path\"><b>Directory</b><span>${esc(t.path||'-')}</span></div>\n          <div class=\"general-path\"><b>Full data path</b><span>${esc(fullPath)}</span></div>\n        </div>\n        <div class=\"general-summary-side\"><b>Hash</b><code>${esc(t.hash||'-')}</code></div>\n      </section>\n      <div class=\"general-grid\">${cards}</div>\n      <div class=\"general-meta\"><div><b>Labels</b><span>${labels}</span></div><div><b>Ratio rule</b><span>${ratioGroup}</span></div><div><b>Message</b><span>${esc(t.message||'-')}</span></div></div>`;\n  }\n";
diff --git a/pytorrent/static/js/torrentPeerDetails.js b/pytorrent/static/js/torrentPeerDetails.js
new file mode 100644
index 0000000..04d485c
--- /dev/null
+++ b/pytorrent/static/js/torrentPeerDetails.js
@@ -0,0 +1 @@
+export const torrentPeerDetailsSource = "  function peerBadges(p){\n    const badges=[];\n    if(p.encrypted) badges.push('<span class=\"badge text-bg-success\">enc</span>');\n    if(p.incoming) badges.push('<span class=\"badge text-bg-info\">in</span>');\n    if(p.snubbed) badges.push('<span class=\"badge text-bg-warning\">snub</span>');\n    if(p.banned) badges.push('<span class=\"badge text-bg-danger\">ban</span>');\n    return badges.join(' ') || '<span class=\"text-muted\">-</span>';\n  }\n  function peerHostCell(p){\n    const host=String(p.host||'').trim();\n    // Note: Hostnames use the available peer-table space instead of a fixed character-style cap.\n    if(host) return `<span class=\"peer-host\" title=\"${esc(host)}\">${esc(host)}</span>`;\n    if(p.host_pending) return '<span class=\"text-muted\">resolving</span>';\n    return '<span class=\"text-muted\">-</span>';\n  }\n  function hasPendingReverseDns(peers){\n    return reverseDnsEnabled && (peers||[]).some(p=>p && p.host_pending);\n  }\n  function clearReverseDnsPeerRefresh(){\n    clearTimeout(reverseDnsRefreshTimer);\n    reverseDnsRefreshTimer=null;\n    reverseDnsRefreshInFlight=false;\n    reverseDnsRefreshAttempts=0;\n    reverseDnsRefreshHash=null;\n  }\n  function scheduleReverseDnsPeerRefresh(peers){\n    // Note: PTR results are checked on a short independent loop, not on the manual/auto peers refresh interval.\n    if(!hasPendingReverseDns(peers)){ clearReverseDnsPeerRefresh(); return; }\n    if(activeTab()!=='peers' || !selectedHash) return;\n    const hash=selectedHash;\n    if(reverseDnsRefreshHash!==hash){ reverseDnsRefreshHash=hash; reverseDnsRefreshAttempts=0; }\n    if(reverseDnsRefreshTimer || reverseDnsRefreshAttempts>=REVERSE_DNS_REFRESH_MAX_ATTEMPTS) return;\n    reverseDnsRefreshAttempts+=1;\n    reverseDnsRefreshTimer=setTimeout(async()=>{\n      reverseDnsRefreshTimer=null;\n      if(activeTab()!=='peers' || selectedHash!==hash) return;\n      reverseDnsRefreshInFlight=true;\n      try{ await loadDetails('peers',{silent:true}); }\n      finally{ reverseDnsRefreshInFlight=false; }\n    }, REVERSE_DNS_REFRESH_SECONDS*1000);\n  }\n  function renderPeers(peers){\n    const headers=['Flag','IP'];\n    if(reverseDnsEnabled) headers.push('Host');\n    headers.push('Country','City','Client','%','DL','UL','Port','Flags');\n    const rows=(peers||[]).map(p=>{\n      const row=[flag(p.country_iso),`<span class=\"peer-ip\">${esc(p.ip)}<a class=\"peer-ip-link\" href=\"https://ipinfo.io/${encodeURIComponent(p.ip||'')}\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"Open IP info\"><i class=\"fa-solid fa-link\"></i></a></span>`];\n      if(reverseDnsEnabled) row.push(peerHostCell(p));\n      row.push(esc(p.country),esc(p.city),esc(p.client),progressBar(p.completed,'peer-progress peer-progress-wide'),esc(p.down_rate_h),esc(p.up_rate_h),esc(p.port),peerBadges(p));\n      return row;\n    });\n    $('detailPane').innerHTML=responsiveTable(headers,rows,reverseDnsEnabled ? 'peers-table peers-table-hosts' : 'peers-table');\n    scheduleReverseDnsPeerRefresh(peers);\n  }\n";
diff --git a/pytorrent/static/js/torrentRowRenderer.js b/pytorrent/static/js/torrentRowRenderer.js
new file mode 100644
index 0000000..6eba085
--- /dev/null
+++ b/pytorrent/static/js/torrentRowRenderer.js
@@ -0,0 +1 @@
+export const torrentRowRendererSource = "  function statusMeta(t){\n    const op=activeOperationFor(t);\n    if(op) return {cls:'text-bg-info operation-status-badge', icon:actionIcon(op.action), color:'text-info', label:op.label};\n    const status=String(t.status||'').toLowerCase();\n    if(t.paused || status==='paused') return {cls:'text-bg-warning', icon:'fa-pause', color:'text-warning'};\n    if(status==='checking' || Number(t.hashing||0)>0) return {cls:'text-bg-info', icon:'fa-rotate', color:'text-info'};\n    if(status==='post-check' || t.post_check) return {cls:'text-bg-dark', icon:'fa-clipboard-check', color:'text-secondary', label:'Post-check'};\n    if(status==='seeding') return {cls:'text-bg-success', icon:'fa-seedling', color:'text-success'};\n    if(status==='downloading') return {cls:'text-bg-primary', icon:'fa-download', color:'text-primary'};\n    if(status==='stopped') return {cls:'text-bg-secondary', icon:'fa-stop', color:'text-secondary'};\n    return t.state ? {cls:'text-bg-success', icon:'fa-play', color:'text-success'} : {cls:'text-bg-secondary', icon:'fa-circle', color:'text-secondary'};\n  }\n  function statusBadge(t){ const m=statusMeta(t); return `<span class=\"badge status-badge ${m.cls}\"><i class=\"fa-solid ${m.icon} me-1\"></i>${esc(m.label || t.status)}</span>`; }\n  function torrentWarning(t){ const msg=String(t.message||'').trim(); if(!msg) return null; const l=msg.toLowerCase(); const patterns=['error','failed','failure','timeout','timed out','tracker','could not','cannot','refused','unreachable','denied']; return patterns.some(p=>l.includes(p)) ? msg : null; }\n  function torrentNameIcon(t){ const m=statusMeta(t); return `<i class=\"fa-solid ${m.icon} ${m.color}\"></i>`; }\n  function boolCell(value){ return Number(value||0) ? '<span class=\"badge text-bg-success\">yes</span>' : '<span class=\"badge text-bg-secondary\">no</span>'; }\n  function renderRow(t){\n    const labels=labelNames(t.label).map(l=>`<span class=\"chip label-mini\"><i class=\"fa-solid fa-tag\"></i> ${esc(l)}</span>`).join(' ');\n    const warn=torrentWarning(t);\n    const op=activeOperationFor(t);\n    const classes=[selected.has(t.hash)?'selected':'', t.paused?'torrent-paused':'', op?'torrent-operating':'', warn?'torrent-warning':''].filter(Boolean).join(' ');\n    const title=[t.name,warn,op?op.label:''].filter(Boolean).join('\\n');\n    return `<tr data-hash=\"${esc(t.hash)}\" class=\"${classes}\">`+\n      `<td data-col=\"select\" class=\"sel\"><input class=\"row-check\" type=\"checkbox\" ${selected.has(t.hash)?'checked':''}></td>`+\n      `<td data-col=\"name\" class=\"name\" title=\"${esc(title)}\">${warn?'<i class=\"fa-solid fa-triangle-exclamation torrent-warning-icon\"></i> ':''}${torrentNameIcon(t)} ${esc(t.name)}</td>`+\n      `<td data-col=\"status\">${statusBadge(t)}</td>`+\n      `<td data-col=\"size\">${esc(t.size_h)}</td>`+\n      `<td data-col=\"progress\">${progress(t)}</td>`+\n      `<td data-col=\"down_rate\">${esc(t.down_rate_h)}</td>`+\n      `<td data-col=\"up_rate\">${esc(t.up_rate_h)}</td>`+\n      `<td data-col=\"eta\">${esc(t.eta_h||\"-\")}</td>`+\n      `<td data-col=\"seeds\">${esc(t.seeds)}</td>`+\n      `<td data-col=\"peers\">${esc(t.peers)}</td>`+\n      `<td data-col=\"ratio\">${esc(t.ratio)}</td>`+\n      `<td data-col=\"path\" class=\"path\" title=\"${esc(t.path)}\">${esc(t.path)}</td>`+\n      `<td data-col=\"label\">${labels||'<span class=\"text-muted\">-</span>'}</td>`+\n      `<td data-col=\"ratio_group\">${esc(t.ratio_group||'')}</td>`+\n      `<td data-col=\"down_total\">${esc(t.down_total_h||'-')}</td>`+\n      `<td data-col=\"to_download\">${esc(t.to_download_h||'-')}</td>`+\n      `<td data-col=\"up_total\">${esc(t.up_total_h||'-')}</td>`+\n      `<td data-col=\"created\">${esc(formatDateTime(t.created))}</td>`+\n      `<td data-col=\"last_activity\">${esc(formatDateTime(t.last_activity))}</td>`+\n      `<td data-col=\"priority\">${esc(t.priority ?? '-')}</td>`+\n      `<td data-col=\"state\">${boolCell(t.state)}</td>`+\n      `<td data-col=\"active\">${boolCell(t.active)}</td>`+\n      `<td data-col=\"complete\">${boolCell(t.complete)}</td>`+\n      `<td data-col=\"hashing\">${esc(t.hashing ?? 0)}</td>`+\n      `<td data-col=\"message\" class=\"message\" title=\"${esc(t.message||'')}\">${compactCell(t.message||'', 80)}</td>`+\n      `<td data-col=\"hash\"><code>${esc(t.hash||'')}</code></td>`+\n      `</tr>`;\n  }\n\n\n\n\n";
diff --git a/pytorrent/static/js/torrentSelectionEvents.js b/pytorrent/static/js/torrentSelectionEvents.js
new file mode 100644
index 0000000..6f555ea
--- /dev/null
+++ b/pytorrent/static/js/torrentSelectionEvents.js
@@ -0,0 +1 @@
+export const torrentSelectionEventsSource = "function awaitMaybeRun(action){ runAction(action).catch?.(()=>{}); }\n  function openRemoveModalForCurrentSelection(){\n    // Note: Mobile remove uses the same Bootstrap modal as desktop, including the Remove with data switch.\n    const modal=$('removeModal');\n    if(!modal) return toast('Remove dialog is unavailable','danger');\n    new bootstrap.Modal(modal).show();\n  }\n  document.addEventListener('click',e=>{ const ctx=$('ctxMenu'); if(!e.target.closest('#ctxMenu')) ctx.style.display='none'; const mobileFilter=e.target.closest('#mobileFilterBar .mobile-filter'); if(mobileFilter){ const key=mobileFilter.dataset.filter||'all'; if(key.startsWith('tracker:')){ activeTrackerFilter=key.slice(8); activeFilter='all'; mobileActiveFilterKey=key; } else { activeTrackerFilter=''; activeFilter=key; mobileActiveFilterKey=key; } syncFilterButtons(); saveActiveFilterPreference(); if($('tableWrap'))$('tableWrap').scrollTop=0; if($('mobileList'))$('mobileList').scrollTop=0; scheduleRender(true); return; } const mobileSort=e.target.closest('#mobileSortCycle'); if(mobileSort){ cycleMobileSort(); return; } const mobileSelectAll=e.target.closest('#mobileSelectAll'); if(mobileSelectAll){ toggleMobileVisibleSelection(); scheduleRender(true); return; } const mobileClear=e.target.closest('#mobileClearSelection'); if(mobileClear){ selected.clear(); selectedHash=null; lastSelectedHash=null; scheduleRender(true); return; } const mobileTorrentDownload=e.target.closest('#mobileBulkTorrentDownload'); if(mobileTorrentDownload){ downloadTorrentFiles(); return; } const mobileDetails=e.target.closest('.mobile-details-btn'); if(mobileDetails){ const card0=mobileDetails.closest('.mobile-card'); if(card0?.dataset.hash) openMobileDetails(card0.dataset.hash); return; } const mobileAct=e.target.closest('.mobile-card [data-action]'); if(mobileAct){ const card0=mobileAct.closest('.mobile-card'); selected.clear(); selected.add(card0.dataset.hash); selectedHash=card0.dataset.hash; lastSelectedHash=selectedHash; if(mobileAct.dataset.action==='remove') openRemoveModalForCurrentSelection(); else awaitMaybeRun(mobileAct.dataset.action); scheduleRender(true); return; } const mobileModal=e.target.closest('.mobile-card [data-mobile-modal]'); if(mobileModal){ const card0=mobileModal.closest('.mobile-card'); selected.clear(); selected.add(card0.dataset.hash); selectedHash=card0.dataset.hash; lastSelectedHash=selectedHash; scheduleRender(true); if(mobileModal.dataset.mobileModal==='label') new bootstrap.Modal($('labelModal')).show(); return; } const card=e.target.closest('.mobile-card'); const tr=e.target.closest('tr[data-hash]'); const row=tr||card; if(row){ const h=row.dataset.hash; const additive=e.ctrlKey||e.metaKey; if(e.shiftKey){ setSelectionRange(h, additive); } else if(e.target.classList.contains('row-check')){ e.target.checked?selected.add(h):selected.delete(h); lastSelectedHash=h; selectedHash=selected.size?h:null; } else { selectedHash=h; if(!additive)selected.clear(); selected.add(h); lastSelectedHash=h; loadDetails(activeTab()); } updateBulkBar(); scheduleRender(true); } const copy=e.target.closest('[data-copy]'); if(copy) copySelected(copy.dataset.copy); const torrentExport=e.target.closest('[data-download-torrent]'); if(torrentExport){ downloadTorrentFiles(); return; } const smartEx=e.target.closest('#smartExcludeCtx'); if(smartEx){ selectedHashes().forEach(h=>post('/api/smart-queue/exclusion',{hash:h,excluded:true,reason:'manual'}).catch(()=>{})); toast('Smart Queue exception saved','success'); loadSmartQueue().catch(()=>{}); } const act=e.target.closest('.torrent-action,[data-action]'); if(act&&act.dataset.action&&!act.closest('#detailTabs')&&!act.closest('.mobile-card')) runAction(act.dataset.action); });\n  ";
diff --git a/pytorrent/static/js/torrentTableEvents.js b/pytorrent/static/js/torrentTableEvents.js
new file mode 100644
index 0000000..a78d3e6
--- /dev/null
+++ b/pytorrent/static/js/torrentTableEvents.js
@@ -0,0 +1 @@
+export const torrentTableEventsSource = "document.addEventListener('contextmenu',e=>{ const tr=e.target.closest('tr[data-hash],.mobile-card'); if(!tr)return; e.preventDefault(); selectedHash=tr.dataset.hash; if(!selected.has(selectedHash)){selected.clear();selected.add(selectedHash);scheduleRender(true);} const m=$('ctxMenu'); m.style.left=`${e.pageX}px`; m.style.top=`${e.pageY}px`; m.style.display='block'; });\n  setupDetailResizer();\n  document.querySelectorAll('.torrent-table thead th[data-sort]').forEach(th=>th.addEventListener('click',()=>{ const key=th.dataset.sort; if(sortState.key===key) sortState.dir*=-1; else sortState={key,dir:1}; saveTorrentSortPreference(); scheduleRender(true); })); $('tableWrap')?.addEventListener('scroll',()=>scheduleRender(false),{passive:true}); $('selectAll')?.addEventListener('change',e=>{selected.clear(); if(e.target.checked)visibleRows.forEach(t=>selected.add(t.hash)); updateBulkBar(); scheduleRender(true);}); $('searchBox')?.addEventListener('input',()=>{if($('tableWrap'))$('tableWrap').scrollTop=0;scheduleRender(true);}); document.querySelectorAll('.filter').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('.filter').forEach(x=>x.classList.remove('active')); b.classList.add('active'); activeTrackerFilter=''; activeFilter=b.dataset.filter; mobileActiveFilterKey=activeFilter; saveActiveFilterPreference(); if($('tableWrap'))$('tableWrap').scrollTop=0; scheduleRender(true);})); document.querySelectorAll('#detailTabs .nav-link').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('#detailTabs .nav-link').forEach(x=>x.classList.remove('active')); b.classList.add('active'); loadDetails(b.dataset.tab);})); document.addEventListener('change',e=>{ const sel=e.target.closest('.file-priority'); if(sel){ setFilePriorities([{index:Number(sel.dataset.index),priority:Number(sel.value)}]); return; } if(e.target && e.target.id==='fileSelectAll'){ document.querySelectorAll('#detailPane .file-check').forEach(cb=>cb.checked=e.target.checked); } }); document.addEventListener('click',e=>{ const bulk=e.target.closest('.file-priority-bulk'); if(!bulk) return; const priority=Number(bulk.dataset.priority); const checked=[...document.querySelectorAll('#detailPane .file-check:checked')].map(cb=>({index:Number(cb.dataset.index),priority})); if(!checked.length) return toast('No files selected','warning'); setFilePriorities(checked); }); document.addEventListener('click',e=>{ const tree=e.target.closest('.file-tree-refresh'); if(tree){ loadFileTree(); return; } const mediaInfo=e.target.closest('.file-media-info'); if(mediaInfo){ openMediaInfo(mediaInfo.dataset.index); return; } const oneDownload=e.target.closest('.file-download-one'); if(oneDownload){ openTemporaryDownload(`/api/torrents/${encodeURIComponent(selectedHash)}/files/${oneDownload.dataset.index}/download-link`).catch(err=>toast(err.message,'danger')); return; } const selectedDownload=e.target.closest('.file-download-selected'); if(selectedDownload){ downloadSelectedFiles(); return; } const allZip=e.target.closest('.file-download-zip'); if(allZip){ downloadZip(null); return; } const folder=e.target.closest('.folder-priority'); if(folder){ post(`/api/torrents/${encodeURIComponent(selectedHash)}/files/folder-priority`,{path:folder.dataset.path||'',priority:Number(folder.dataset.priority||0)}).then(()=>{toast('Folder priority updated','success');loadDetails('files');}).catch(err=>toast(err.message,'danger')); } }); document.addEventListener('click',e=>{ const cell=e.target.closest('.chunk-cell'); if(cell){ cell.classList.toggle('is-selected'); if(typeof updateChunkSelectionInfo==='function') updateChunkSelectionInfo(); return; } const refresh=e.target.closest('.chunk-refresh'); if(refresh){ loadDetails('chunks'); return; } const recheck=e.target.closest('.chunk-action-recheck'); if(recheck){ runChunkAction('recheck',{}); return; } const prio=e.target.closest('.chunk-action-prioritize'); if(prio){ const range=selectedChunkRange(); if(!range) return toast('No chunks selected','warning'); runChunkAction('prioritize_files',{...range,priority:2}); } }); document.addEventListener('click',e=>{ const add=e.target.closest('#trackerAddBtn'); if(add){ const url=$('trackerAddUrl')?.value||''; trackerAction('add',{url}); return; } const del=e.target.closest('.tracker-delete'); if(del && !del.disabled){ trackerAction('delete',{index:Number(del.dataset.index)}); return; } const rea=e.target.closest('#trackerReannounceBtn'); if(rea) trackerAction('reannounce',{}); }); ";
diff --git a/pytorrent/static/js/torrentTableRenderer.js b/pytorrent/static/js/torrentTableRenderer.js
new file mode 100644
index 0000000..a98712a
--- /dev/null
+++ b/pytorrent/static/js/torrentTableRenderer.js
@@ -0,0 +1 @@
+export const torrentTableRendererSource = "  function renderMobile(){\n    const list=$('mobileList');\n    if(!list) return;\n    const src=mobileVisibleRows();\n    const rows=src.slice(0,250);\n    renderMobileFilters(src);\n    list.innerHTML=rows.map(t=>{\n      const warn=torrentWarning(t);\n      const op=activeOperationFor(t);\n      const classes=[selected.has(t.hash)?'selected':'', op?'torrent-operating':'', warn?'torrent-warning':''].filter(Boolean).join(' ');\n      const lines=mobileInfoLines(t);\n      // Note: Mobile details use a separate corner button so user-configurable action buttons keep their current order.\n      return `<div class=\"mobile-card ${classes}\" data-hash=\"${esc(t.hash)}\" title=\"${esc(warn||op?.label||'')}\"><div class=\"mobile-card-header\"><div class=\"name\">${warn?'<i class=\"fa-solid fa-triangle-exclamation torrent-warning-icon\"></i> ':''}${torrentNameIcon(t)} ${esc(t.name)}</div><button class=\"btn btn-xs btn-outline-info mobile-details-btn\" type=\"button\" title=\"Torrent details\" aria-label=\"Open torrent details\"><i class=\"fa-solid fa-circle-info\"></i></button></div>${lines.primary?`<div class=\"small text-muted\">${lines.primary}</div>`:''}${lines.secondary?`<div class=\"small\">${lines.secondary}</div>`:''}${mobileColumns.path?`<div class=\"small text-truncate\">${esc(t.path)}</div>`:''}<div class=\"mobile-actions\"><button class=\"btn btn-xs btn-outline-success\" data-action=\"start\" title=\"Start\"><i class=\"fa-solid fa-play\"></i></button><button class=\"btn btn-xs btn-outline-warning\" data-action=\"pause\" title=\"Pause\"><i class=\"fa-solid fa-pause\"></i></button><button class=\"btn btn-xs btn-outline-secondary\" data-action=\"stop\" title=\"Stop\"><i class=\"fa-solid fa-stop\"></i></button><button class=\"btn btn-xs btn-outline-primary\" data-action=\"move\" title=\"Move\"><i class=\"fa-solid fa-folder-open\"></i></button><button class=\"btn btn-xs btn-outline-primary\" data-mobile-modal=\"label\" title=\"Set label\"><i class=\"fa-solid fa-tag\"></i></button><button class=\"btn btn-xs btn-outline-info\" data-action=\"recheck\" title=\"Force recheck\"><i class=\"fa-solid fa-rotate\"></i></button><button class=\"btn btn-xs btn-outline-primary\" data-action=\"reannounce\" title=\"Reannounce\"><i class=\"fa-solid fa-bullhorn\"></i></button><button class=\"btn btn-xs btn-outline-danger\" data-action=\"remove\" title=\"Remove\"><i class=\"fa-solid fa-trash-can\"></i></button></div>${mobileColumns.progress?`<div class=\"mobile-progress\">${progress(t)}</div>`:''}</div>`;\n    }).join('') || (hasTorrentSnapshot ? `<div class=\"empty\">No torrents.</div>` : loadingMarkup('Loading torrents...'));\n  }\n  function renderTable(){ updateBulkBar(); syncActiveFilterSelection(); renderCounts(); renderLabelFilters(); if(typeof renderHealthDashboard==='function') renderHealthDashboard(); if(typeof renderSmartViewsManager==='function') renderSmartViewsManager(); updateSortHeaders(); buildVisibleRows(); renderMobile(); const body=$('torrentBody'); if(!visibleRows.length){ body.innerHTML=hasTorrentSnapshot?`<tr><td colspan=\"${torrentColumnSpan()}\" class=\"empty\">No torrents for this filter.</td></tr>`:loadingTableRow('Loading torrents...'); return; } const wrap=$('tableWrap'); const rowHeight=torrentRowHeight(); const start=Math.max(0,Math.floor((wrap?.scrollTop||0)/rowHeight)-OVERSCAN); const count=Math.ceil((wrap?.clientHeight||500)/rowHeight)+OVERSCAN*2; const end=Math.min(visibleRows.length,start+count); const sig=`${renderVersion}:${start}:${end}:${visibleRows.length}:${sortState.key}:${sortState.dir}:${selected.size}:${activeFilter}:${activeTrackerFilter}:${compactTorrentListEnabled?1:0}:${$('searchBox')?.value||''}:${[...selected].slice(0,30).join(',')}`; if(sig===lastRenderSignature) return; lastRenderSignature=sig; const top=start*rowHeight,bottom=Math.max(0,(visibleRows.length-end)*rowHeight); body.innerHTML=(top?`<tr class=\"virtual-spacer\"><td colspan=\"${torrentColumnSpan()}\" style=\"height:${top}px\"></td></tr>`:'')+visibleRows.slice(start,end).map(renderRow).join('')+(bottom?`<tr class=\"virtual-spacer\"><td colspan=\"${torrentColumnSpan()}\" style=\"height:${bottom}px\"></td></tr>`:''); applyColumnVisibility(); }\n  function scheduleRender(force=false){ if(force){lastRenderSignature='';renderVersion++;} if(renderPending)return; renderPending=true; requestAnimationFrame(()=>{renderPending=false;renderTable();}); }\n  function patchRows(msg){ if(msg.summary) torrentSummary=msg.summary; (msg.removed||[]).forEach(h=>{torrents.delete(h);selected.delete(h);activeOperations.delete(h);if(selectedHash===h)selectedHash=null;}); (msg.added||[]).forEach(t=>torrents.set(t.hash,t)); (msg.updated||[]).forEach(p=>torrents.set(p.hash,{...(torrents.get(p.hash)||{}),...p})); if(msg.speed_status) applyLiveSpeedStats(msg.speed_status); else updateBrowserSpeedTitle(); scheduleRender(true); if(selectedHash&&torrents.has(selectedHash)&&activeTab()==='general') renderGeneral(); }\n  function applyLiveTorrentStats(msg){ (msg.updated||[]).forEach(p=>{ if(torrents.has(p.hash)) torrents.set(p.hash,{...(torrents.get(p.hash)||{}),...p}); }); if(msg.speed_status) applyLiveSpeedStats(msg.speed_status); else updateBrowserSpeedTitle(); scheduleRender(true); if(selectedHash&&torrents.has(selectedHash)&&activeTab()==='general') renderGeneral(); }\n  function selectedHashes(){ return [...selected]; }\n  function updateBulkBar(){\n    const bar=$(\"bulkBar\");\n    if(!bar) return;\n    // Note: The desktop bulk toolbar is hidden in mobile mode; mobile has its own compact actions in the filter bar.\n    const isMobileMode = document.body.classList.contains('mobile-mode');\n    const show = selected.size > 1 && !isMobileMode;\n    bar.classList.toggle(\"d-none\", !show);\n    bar.setAttribute('aria-hidden', show ? 'false' : 'true');\n    const c=$(\"bulkSelectedCount\");\n    if(c) c.textContent=selected.size;\n  }\n  function setSelectionRange(hash, keepExisting=false){ const current=visibleRows.findIndex(t=>t.hash===hash); const last=visibleRows.findIndex(t=>t.hash===lastSelectedHash); if(current<0 || last<0){ selected.add(hash); lastSelectedHash=hash; return; } if(!keepExisting) selected.clear(); const a=Math.min(current,last), b=Math.max(current,last); visibleRows.slice(a,b+1).forEach(t=>selected.add(t.hash)); selectedHash=hash; }\n";
diff --git a/pytorrent/static/js/torrentTableState.js b/pytorrent/static/js/torrentTableState.js
new file mode 100644
index 0000000..c95e35d
--- /dev/null
+++ b/pytorrent/static/js/torrentTableState.js
@@ -0,0 +1 @@
+export const torrentTableStateSource = "  function buildVisibleRows(){ visibleRows=[...torrents.values()].filter(rowVisible).sort(compareRows); $('statShown').textContent=visibleRows.length; }\n  function visibleColumnKeys(){ return ['select', ...COLUMN_DEFS.map(([key])=>key)].filter(key => key === 'select' || !hiddenColumns.has(key)); }\n  function applyColumnWidths(){\n    // Note: Widths are applied to headers and virtualized body rows, keeping all cells aligned after live renders.\n    const table = document.querySelector('.torrent-table');\n    if(!table) return;\n    let total = 0;\n    visibleColumnKeys().forEach(key => { total += columnWidths[key] || DEFAULT_COLUMN_WIDTHS[key] || 120; });\n    table.style.width = `${total}px`;\n    table.style.minWidth = `${total}px`;\n    document.querySelectorAll('.torrent-table [data-col]').forEach(el=>{\n      const key = el.dataset.col;\n      const width = columnWidths[key] || DEFAULT_COLUMN_WIDTHS[key] || 120;\n      el.style.width = `${width}px`;\n      el.style.minWidth = `${width}px`;\n      el.style.maxWidth = `${width}px`;\n    });\n  }\n  function applyColumnVisibility(){\n    document.querySelectorAll('[data-col]').forEach(el=>el.classList.toggle('hidden-col', hiddenColumns.has(el.dataset.col)));\n    applyColumnWidths();\n  }\n  function saveColumnWidthsPreference(){\n    saveBrowserViewPrefs({columnWidths});\n    savePreferencePatch({table_columns_json:columnPrefsPayload()}, 300);\n  }\n  function setupColumnResizers(){\n    document.querySelectorAll('.torrent-table thead th[data-col]').forEach(th=>{\n      const key = th.dataset.col;\n      if(!key || key === 'select' || th.querySelector('.column-resize-handle')) return;\n      const handle = document.createElement('span');\n      handle.className = 'column-resize-handle';\n      handle.title = 'Drag to resize column';\n      handle.setAttribute('aria-hidden', 'true');\n      th.appendChild(handle);\n      let startX = 0, startWidth = 0, dragged = false;\n      const onMove = (event) => {\n        dragged = true;\n        columnWidths[key] = clampNumber(startWidth + event.clientX - startX, COLUMN_WIDTH_MIN, COLUMN_WIDTH_MAX, startWidth);\n        applyColumnWidths();\n      };\n      const onUp = () => {\n        document.body.classList.remove('resizing-columns');\n        document.removeEventListener('pointermove', onMove);\n        document.removeEventListener('pointerup', onUp);\n        if(dragged) saveColumnWidthsPreference();\n      };\n      handle.addEventListener('pointerdown', event=>{\n        event.preventDefault();\n        event.stopPropagation();\n        dragged = false;\n        startX = event.clientX;\n        startWidth = columnWidths[key] || th.getBoundingClientRect().width || DEFAULT_COLUMN_WIDTHS[key] || 120;\n        document.body.classList.add('resizing-columns');\n        document.addEventListener('pointermove', onMove);\n        document.addEventListener('pointerup', onUp);\n      });\n      handle.addEventListener('click', event=>event.stopPropagation());\n    });\n  }\n  function syncActiveFilterSelection(){ syncFilterButtons(); }\n";
diff --git a/pytorrent/static/js/torrentTrackerDetails.js b/pytorrent/static/js/torrentTrackerDetails.js
new file mode 100644
index 0000000..f93ca1c
--- /dev/null
+++ b/pytorrent/static/js/torrentTrackerDetails.js
@@ -0,0 +1 @@
+export const torrentTrackerDetailsSource = "  function fmtTs(value){ const n=Number(value||0); if(!n) return '-'; try{return new Date(n*1000).toLocaleString();}catch(e){return String(n);} }\n  function trackerSeedsPeers(t){ const hasScrape = t.seeds !== null || t.peers !== null; return hasScrape ? `${t.seeds ?? \"-\"} / ${t.peers ?? \"-\"}` : \"-\"; }\n  function renderTrackers(trackers){\n    // Note: Tracker URL editing is intentionally replaced by safe deletion; adding trackers remains unchanged.\n    const pane=$('detailPane');\n    const list=trackers||[];\n    const canDelete=list.length>1;\n    const rows=list.map(t=>{\n      const idx=esc(t.index), url=esc(t.url);\n      const deleteDisabled=canDelete ? '' : ' disabled title=\"At least one tracker must remain\"';\n      return [`<span class=\"text-muted\">#${idx}</span>`, `<span class=\"tracker-url-text\">${url || '<span class=\"text-muted\">-</span>'}</span>`, t.enabled?'yes':'no', esc(trackerSeedsPeers(t)), esc(t.downloaded ?? '-'), fmtTs(t.last_announce), `<div class=\"tracker-actions\"><button class=\"btn btn-xs btn-outline-danger tracker-delete\" data-index=\"${idx}\"${deleteDisabled}><i class=\"fa-solid fa-trash\"></i> Delete</button></div>`];\n    });\n    // Note: Trackers share the responsive wrapper so long URLs do not break the details pane.\n    pane.innerHTML=`<div class=\"tracker-toolbar\"><div class=\"input-group input-group-sm\"><input id=\"trackerAddUrl\" class=\"form-control tracker-add-input\" placeholder=\"https://tracker.example/announce\"><button id=\"trackerAddBtn\" class=\"btn btn-outline-primary\"><i class=\"fa-solid fa-plus\"></i> Add tracker</button></div><button id=\"trackerReannounceBtn\" class=\"btn btn-sm btn-outline-primary\"><i class=\"fa-solid fa-bullhorn\"></i> Reannounce</button></div>${responsiveTable(['#','URL','On','Seeds / Peers','Done','Last announce','Actions'], rows.length?rows:[[ '<span class=\"text-muted\">-</span>','<span class=\"text-muted\">No trackers.</span>','','','','','' ]], 'tracker-table')}`;\n  }\n  async function trackerAction(action,payload={}){\n    if(!selectedHash) return toastMessage('toast.noTorrentSelected','warning');\n    setBusy(true);\n    try{\n      const j=await post(`/api/torrents/${encodeURIComponent(selectedHash)}/trackers/${action}`,payload);\n      toast(j.message || appMessage('toast.trackerActionDone',{action}),'success');\n      await loadDetails('trackers');\n    }catch(e){toast(e.message,'danger');}\n    finally{setBusy(false);}\n  }\n\n";
diff --git a/pytorrent/static/js/torrentTrackerFilters.js b/pytorrent/static/js/torrentTrackerFilters.js
new file mode 100644
index 0000000..dc33673
--- /dev/null
+++ b/pytorrent/static/js/torrentTrackerFilters.js
@@ -0,0 +1 @@
+export const torrentTrackerFiltersSource = "  function trackerFavicon(tracker){\n    const domain=typeof tracker==='string'?tracker:(tracker?.domain||'');\n    if(!trackerFaviconsEnabled || !domain) return '<i class=\"fa-solid fa-bullseye\"></i>';\n    // Note: Normal rendering must use cached/static URLs only. Avoid refresh=1 here, otherwise scroll-triggered paints can re-warm icons repeatedly.\n    const fallback=`/api/trackers/favicon/${encodeURIComponent(domain)}`;\n    const src=(typeof tracker==='object' && tracker?.favicon_url) ? tracker.favicon_url : fallback;\n    return `<img class=\"tracker-favicon\" src=\"${esc(src)}\" alt=\"\" loading=\"lazy\" data-fallback-src=\"${esc(fallback)}\" onerror=\"if(this.dataset.retry!=='1'){this.dataset.retry='1';this.src=this.dataset.fallbackSrc;}else{this.classList.add('d-none')}\"><i class=\"fa-solid fa-bullseye tracker-fallback-icon\"></i>`;\n  }\n  function trackerFilterPlaceholder(){\n    if(trackerSummaryStatus==='loading') return '<div class=\"tracker-filter-empty\"><span class=\"spinner-border spinner-border-xs\"></span> Loading cached trackers...</div>';\n    if(trackerSummaryStatus==='error') return '<div class=\"tracker-filter-empty text-warning\"><i class=\"fa-solid fa-triangle-exclamation\"></i> Tracker list unavailable</div>';\n    if(Number(trackerSummary.pending||0)) return `<div class=\"tracker-filter-empty\"><span class=\"spinner-border spinner-border-xs\"></span> Tracker cache: ${esc(trackerSummary.cached||0)}/${esc(trackerSummary.scanned||0)}</div>`;\n    if(hasTorrentSnapshot && torrents.size) return '<div class=\"tracker-filter-empty\">No trackers found</div>';\n    return '<div class=\"tracker-filter-empty\">Waiting for torrents...</div>';\n  }\n  function renderTrackerFilters(force=false){\n    const box=$('trackerFilters');\n    if(!box) return;\n    const trackers=trackerSummary.trackers || [];\n    // Note: Keep the selected tracker while the async summary is loading or temporarily incomplete; otherwise sorting can reset mobile scope to All trackers.\n    if(activeTrackerFilter && trackerSummaryStatus==='ready' && trackers.length && !trackers.some(t=>t.domain===activeTrackerFilter)) activeTrackerFilter='';\n    const sig=[\n      trackerSummaryStatus,\n      trackerFaviconsEnabled ? 1 : 0,\n      trackerSummary.pending || 0,\n      trackerSummary.cached || 0,\n      trackerSummary.scanned || 0,\n      trackers.map(t=>`${t.domain}:${t.count||0}:${t.favicon_url||''}`).join('|')\n    ].join('::');\n    if(!force && sig===lastTrackerFiltersSignature){ syncFilterButtons(); return; }\n    lastTrackerFiltersSignature=sig;\n    // Note: Tracker filter section is always visible, so an empty or failed tracker scan does not look like a missing feature.\n    const rows=trackers.length\n      ? `<button class=\"filter tracker-filter tracker-filter-all ${!activeTrackerFilter?'active':''}\" data-filter=\"all\" data-tracker-scope=\"all\"><span><i class=\"fa-solid fa-globe\"></i> All trackers</span><span>${esc(torrents.size)}</span></button>` + trackers.map(t=>`<button class=\"filter tracker-filter ${activeTrackerFilter===t.domain?'active':''}\" data-filter=\"tracker:${esc(t.domain)}\"><span>${trackerFavicon(t)} ${esc(t.domain)}</span><span>${esc(t.count||0)}</span></button>`).join('')\n      : trackerFilterPlaceholder();\n    box.innerHTML=`<div class=\"small text-muted px-2 mb-1\">Trackers</div>${rows}`;\n    bindSidebarFilterClicks(box);\n  }\n  async function refreshTrackerSummary(force=false){\n    const hashes=[...torrents.keys()].sort();\n    const sig=`${hashes.length}:${hashes[0]||''}:${hashes[hashes.length-1]||''}:${trackerFaviconsEnabled?1:0}`;\n    if(!force && sig===trackerSummarySignature && !Number(trackerSummary.pending||0)) return;\n    trackerSummarySignature=sig;\n    if(!hashes.length){ trackerSummary={hashes:{},trackers:[],scanned:0,errors:[],pending:0,cached:0}; trackerSummaryStatus='empty'; renderTrackerFilters(); return; }\n    trackerSummaryStatus=(trackerSummary.trackers||[]).length?'ready':'loading';\n    renderTrackerFilters();\n    try{\n      // Note: Do not send 13k hashes in the URL; the backend uses a local snapshot and reads the cache in small chunks.\n      const j=await (await fetch('/api/trackers/summary?scan_limit=0&warm=1&bg_limit=80')).json();\n      if(!j.ok && !j.summary) throw new Error(j.error||'Tracker summary failed');\n      trackerSummary=j.summary||{hashes:{},trackers:[],scanned:0,errors:[],pending:0,cached:0};\n      trackerSummaryStatus=(trackerSummary.trackers||[]).length?'ready':Number(trackerSummary.pending||0)?'empty':'empty';\n      renderTrackerFilters();\n      scheduleRender(true);\n      if(Number(trackerSummary.pending||0)>0){\n        clearTimeout(trackerSummaryTimer);\n        trackerSummaryTimer=setTimeout(()=>refreshTrackerSummary(true).catch(()=>{}), 5000);\n      }\n    }catch(e){ trackerSummaryStatus='error'; renderTrackerFilters(); console.warn('Tracker summary failed', e); }\n  }\n  function scheduleTrackerSummary(force=false){\n    clearTimeout(trackerSummaryTimer);\n    trackerSummaryTimer=setTimeout(()=>refreshTrackerSummary(force).catch(()=>{}), force?50:600);\n  }\n";
diff --git a/pytorrent/static/js/trafficChartRenderer.js b/pytorrent/static/js/trafficChartRenderer.js
new file mode 100644
index 0000000..e4b4190
--- /dev/null
+++ b/pytorrent/static/js/trafficChartRenderer.js
@@ -0,0 +1 @@
+export const trafficChartRendererSource = "  function setupChartCanvas(canvas){\n    const rect=canvas.getBoundingClientRect();\n    const dpr=window.devicePixelRatio||1;\n    const cssW=Math.max(320, Math.floor(rect.width || canvas.parentElement?.clientWidth || 900));\n    const cssH=Math.max(340, Math.floor(rect.height || 420));\n    const pxW=Math.floor(cssW*dpr), pxH=Math.floor(cssH*dpr);\n    if(canvas.width!==pxW || canvas.height!==pxH){\n      canvas.width=pxW;\n      canvas.height=pxH;\n    }\n    const ctx=canvas.getContext('2d');\n    ctx.setTransform(dpr,0,0,dpr,0,0);\n    return {ctx,w:cssW,h:cssH,dpr};\n  }\n  function fmtBytes(v){\n    v=Number(v||0);\n    const u=['B','KiB','MiB','GiB','TiB'];\n    let i=0;\n    while(v>=1024&&i<u.length-1){v/=1024;i++;}\n    return `${v.toFixed(i?1:0)} ${u[i]}`;\n  }\n  function formatBucketLabel(value, range){\n    const text=String(value||'');\n    if(!text) return '';\n    if(range==='15m'||range==='1h'||range==='3h') return text.slice(11,16);\n    if(range==='6h'||range==='24h') return text.slice(11,16);\n    return text.slice(5,10);\n  }\n  function tooltipBucketLabel(value, range){\n    const text=String(value||'');\n    if(!text) return '-';\n    if(range==='15m'||range==='1h'||range==='3h') return text.replace('T',' ').slice(0,16);\n    if(range==='6h'||range==='24h') return text.replace('T',' ').slice(0,13)+':00';\n    return text.slice(0,10);\n  }\n  function downsampleRows(rows, limit=360){\n    if(rows.length<=limit) return rows.map(r=>({...r}));\n    const step=Math.ceil(rows.length/limit);\n    const output=[];\n    for(let i=0;i<rows.length;i+=step){\n      const chunk=rows.slice(i,i+step);\n      const sums=chunk.reduce((acc,r)=>{\n        acc.downloaded+=Number(r.downloaded||0);\n        acc.uploaded+=Number(r.uploaded||0);\n        acc.downRate+=Number(r.avg_down_rate||0);\n        acc.upRate+=Number(r.avg_up_rate||0);\n        return acc;\n      },{downloaded:0,uploaded:0,downRate:0,upRate:0});\n      output.push({\n        bucket: chunk[0]?.bucket || '',\n        bucket_end: chunk[chunk.length-1]?.bucket || chunk[0]?.bucket || '',\n        downloaded: sums.downloaded,\n        uploaded: sums.uploaded,\n        avg_down_rate: sums.downRate/chunk.length,\n        avg_up_rate: sums.upRate/chunk.length,\n      });\n    }\n    return output;\n  }\n  function cssColor(name, fallback){\n    const value=getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n    return value || fallback;\n  }\n  function chartTheme(){\n    const body=getComputedStyle(document.body);\n    return {\n      body: body.color || '#d7d7d7',\n      muted: cssColor('--bs-secondary-color', 'rgba(160,160,160,.85)'),\n      grid: 'rgba(var(--bs-border-color-rgb, 128,128,128), .45)',\n      panel: cssColor('--bs-body-bg', '#202020'),\n      surface: cssColor('--bs-secondary-bg', '#2b2b2b'),\n      border: cssColor('--bs-border-color', 'rgba(128,128,128,.6)'),\n      down: '#2f63c7',\n      up: '#209638',\n      downFill: 'rgba(47,99,199,.36)',\n      upFill: 'rgba(32,150,56,.32)',\n    };\n  }\n  function drawChartPanel(ctx,w,h,theme){\n    ctx.clearRect(0,0,w,h);\n    ctx.fillStyle=theme.surface;\n    ctx.fillRect(0,0,w,h);\n    ctx.strokeStyle=theme.border;\n    ctx.lineWidth=1;\n    ctx.strokeRect(.5,.5,w-1,h-1);\n  }\n  function chartLayout(w,h){ return {left:72,right:22,top:34,bottom:42,width:w-94,height:h-76}; }\n  function drawGrid(ctx,layout,maxValue,theme,suffix=''){\n    ctx.strokeStyle=theme.grid;\n    ctx.fillStyle=theme.muted;\n    ctx.font='11px system-ui';\n    ctx.lineWidth=1;\n    for(let i=0;i<=4;i++){\n      const y=layout.top+(layout.height*i/4);\n      const value=maxValue*(1-i/4);\n      ctx.beginPath();\n      ctx.moveTo(layout.left,y);\n      ctx.lineTo(layout.left+layout.width,y);\n      ctx.stroke();\n      ctx.fillText(`${fmtBytes(value)}${suffix}`,8,y+4);\n    }\n  }\n  function drawLegend(ctx,title,theme,labels){\n    ctx.fillStyle=theme.body;\n    ctx.font='600 12px system-ui';\n    ctx.fillText(title,14,21);\n    ctx.font='11px system-ui';\n    const width=ctx.canvas.width/(window.devicePixelRatio||1);\n    const x=Math.max(120,width-154);\n    ctx.fillStyle=theme.down; ctx.fillRect(x,10,12,10);\n    ctx.fillStyle=theme.body; ctx.fillText(labels.down,x+18,19);\n    ctx.fillStyle=theme.up; ctx.fillRect(x,28,12,10);\n    ctx.fillStyle=theme.body; ctx.fillText(labels.up,x+18,37);\n  }\n  function pickXAxisIndexes(rows, maxTicks=9){\n    if(rows.length<=1) return rows.length?[0]:[];\n    const count=Math.min(maxTicks, rows.length);\n    const seen=new Set();\n    for(let i=0;i<count;i++) seen.add(Math.round(i*(rows.length-1)/(count-1)));\n    return [...seen].sort((a,b)=>a-b);\n  }\n  function drawXAxis(ctx,layout,rows,theme,range){\n    if(!rows.length) return;\n    const y=layout.top+layout.height+20;\n    ctx.fillStyle=theme.muted;\n    ctx.font='11px system-ui';\n    ctx.strokeStyle=theme.grid;\n    pickXAxisIndexes(rows).forEach((idx)=>{\n      const x=layout.left+idx*(layout.width/Math.max(1,rows.length-1));\n      const label=formatBucketLabel(rows[idx].bucket, range);\n      const width=ctx.measureText(label).width;\n      ctx.beginPath();\n      ctx.moveTo(x,layout.top+layout.height);\n      ctx.lineTo(x,layout.top+layout.height+4);\n      ctx.stroke();\n      ctx.fillText(label,Math.max(2,Math.min(x-width/2,layout.left+layout.width-width)),y);\n    });\n  }\n  function drawRuTorrentLine(ctx,rows,layout,maxValue,key,color,fillColor){\n    const points=rows.map((r,i)=>({\n      x: layout.left+i*(layout.width/Math.max(1,rows.length-1)),\n      y: layout.top+layout.height-(Number(r[key]||0)/maxValue)*layout.height,\n    }));\n    if(!points.length) return;\n    ctx.save();\n    ctx.beginPath();\n    points.forEach((p,i)=>{ i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y); });\n    ctx.lineTo(points[points.length-1].x, layout.top+layout.height);\n    ctx.lineTo(points[0].x, layout.top+layout.height);\n    ctx.closePath();\n    ctx.fillStyle=fillColor||color;\n    ctx.fill();\n    ctx.beginPath();\n    points.forEach((p,i)=>{ i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y); });\n    ctx.lineWidth=2.4;\n    ctx.lineJoin='round';\n    ctx.lineCap='round';\n    ctx.strokeStyle=color;\n    ctx.stroke();\n    ctx.restore();\n  }\n  function drawHoverMarker(ctx,rows,layout,idx,theme){\n    if(idx<0||idx>=rows.length) return;\n    const x=layout.left+idx*(layout.width/Math.max(1,rows.length-1));\n    ctx.save();\n    ctx.strokeStyle=theme.body;\n    ctx.globalAlpha=.55;\n    ctx.beginPath();\n    ctx.moveTo(x,layout.top);\n    ctx.lineTo(x,layout.top+layout.height);\n    ctx.stroke();\n    ctx.restore();\n  }\n  function drawEmptyChart(canvas,message){\n    const {ctx,w,h}=setupChartCanvas(canvas);\n    const theme=chartTheme();\n    drawChartPanel(ctx,w,h,theme);\n    ctx.fillStyle=theme.muted;\n    ctx.font='13px system-ui';\n    ctx.fillText(message,18,34);\n  }\n  function tooltipNode(){\n    let node=document.querySelector('.traffic-chart-tooltip');\n    if(node) return node;\n    node=document.createElement('div');\n    node.className='traffic-chart-tooltip d-none';\n    document.body.appendChild(node);\n    return node;\n  }\n  function hideTrafficTooltip(){ tooltipNode().classList.add('d-none'); }\n  function showTrafficTooltip(canvas,event,row,kind,range){\n    const node=tooltipNode();\n    const title=tooltipBucketLabel(row.bucket, range);\n    const end=row.bucket_end && row.bucket_end!==row.bucket ? ` - ${tooltipBucketLabel(row.bucket_end, range)}` : '';\n    const body=kind==='speed'\n      ? `<div>Download: <b>${fmtBytes(row.avg_down_rate)}/s</b></div><div>Upload: <b>${fmtBytes(row.avg_up_rate)}/s</b></div>`\n      : `<div>Downloaded: <b>${fmtBytes(row.downloaded)}</b></div><div>Uploaded: <b>${fmtBytes(row.uploaded)}</b></div>`;\n    node.innerHTML=`<div class=\"traffic-tooltip-title\">${esc(title+end)}</div>${body}`;\n    node.classList.remove('d-none');\n    const box=node.getBoundingClientRect();\n    let left=event.clientX+14;\n    let top=event.clientY+14;\n    if(left+box.width>window.innerWidth-8) left=event.clientX-box.width-14;\n    if(top+box.height>window.innerHeight-8) top=event.clientY-box.height-14;\n    node.style.left=`${Math.max(8,left)}px`;\n    node.style.top=`${Math.max(8,top)}px`;\n  }\n  function attachTrafficTooltip(canvas,rows,layout,kind,range){\n    canvas._trafficTooltip={rows,layout,kind,range};\n    if(canvas._trafficTooltipReady) return;\n    canvas._trafficTooltipReady=true;\n    canvas.addEventListener('mousemove',event=>{\n      const data=canvas._trafficTooltip;\n      if(!data||!data.rows.length) return;\n      const rect=canvas.getBoundingClientRect();\n      const x=event.clientX-rect.left;\n      const inside=x>=data.layout.left && x<=data.layout.left+data.layout.width;\n      if(!inside){ hideTrafficTooltip(); return; }\n      const idx=Math.max(0,Math.min(data.rows.length-1,Math.round((x-data.layout.left)/data.layout.width*(data.rows.length-1))));\n      canvas._trafficHoverIndex=idx;\n      drawTrafficHistory(lastTrafficHistory);\n      showTrafficTooltip(canvas,event,data.rows[idx],data.kind,data.range);\n    });\n    canvas.addEventListener('mouseleave',()=>{ canvas._trafficHoverIndex=-1; hideTrafficTooltip(); if(lastTrafficHistory) drawTrafficHistory(lastTrafficHistory); });\n  }\n  function drawTrafficHistory(hist){\n    const sourceRows=Array.isArray(hist.rows)?hist.rows:[];\n    const rows=downsampleRows(sourceRows);\n    const range=hist.range||lastTrafficHistoryRange||'7d';\n    const volume=$('trafficHistoryChart'), speed=$('trafficSpeedChart');\n    if(!volume||!speed) return;\n    if(!sourceRows.length){\n      drawEmptyChart(volume,'No history yet. Samples appear after pyTorrent records traffic.');\n      drawEmptyChart(speed,'No speed samples yet.');\n      return;\n    }\n    const theme=chartTheme();\n\n    let canvas=setupChartCanvas(volume);\n    let {ctx,w,h}=canvas;\n    let layout=chartLayout(w,h);\n    let maxVol=Math.max(1,...rows.map(r=>Math.max(Number(r.downloaded||0),Number(r.uploaded||0))));\n    drawChartPanel(ctx,w,h,theme);\n    drawGrid(ctx,layout,maxVol,theme,'');\n    drawRuTorrentLine(ctx,rows,layout,maxVol,'downloaded',theme.down,theme.downFill);\n    drawRuTorrentLine(ctx,rows,layout,maxVol,'uploaded',theme.up,theme.upFill);\n    drawHoverMarker(ctx,rows,layout,volume._trafficHoverIndex ?? -1,theme);\n    drawLegend(ctx,'Transferred data',theme,{down:'Downloaded',up:'Uploaded'});\n    drawXAxis(ctx,layout,rows,theme,range);\n    attachTrafficTooltip(volume,rows,layout,'transfer',range);\n\n    canvas=setupChartCanvas(speed);\n    ({ctx,w,h}=canvas);\n    layout=chartLayout(w,h);\n    const maxSpeed=Math.max(1,...rows.map(r=>Math.max(Number(r.avg_down_rate||0),Number(r.avg_up_rate||0))));\n    drawChartPanel(ctx,w,h,theme);\n    drawGrid(ctx,layout,maxSpeed,theme,'/s');\n    drawRuTorrentLine(ctx,rows,layout,maxSpeed,'avg_down_rate',theme.down,theme.downFill);\n    drawRuTorrentLine(ctx,rows,layout,maxSpeed,'avg_up_rate',theme.up,theme.upFill);\n    drawHoverMarker(ctx,rows,layout,speed._trafficHoverIndex ?? -1,theme);\n    drawLegend(ctx,'Speed trend',theme,{down:'Download',up:'Upload'});\n    drawXAxis(ctx,layout,rows,theme,range);\n    attachTrafficTooltip(speed,rows,layout,'speed',range);\n  }\n  $('trafficModal')?.addEventListener(\"show.bs.modal\",()=>loadTrafficHistory(lastTrafficHistoryRange||\"7d\"));\n  document.querySelectorAll('.traffic-history-tab').forEach(tab=>tab.addEventListener('shown.bs.tab',()=>{ if(lastTrafficHistory) requestAnimationFrame(()=>drawTrafficHistory(lastTrafficHistory)); }));\n  document.querySelectorAll(\".traffic-range\").forEach(b=>b.addEventListener(\"click\",()=>{\n    document.querySelectorAll(\".traffic-range\").forEach(x=>{x.classList.remove(\"btn-primary\");x.classList.add(\"btn-outline-secondary\");});\n    b.classList.add(\"btn-primary\"); b.classList.remove(\"btn-outline-secondary\");\n    loadTrafficHistory(b.dataset.range||\"7d\");\n  }));\n  window.addEventListener('resize',()=>{ if(document.body.classList.contains('modal-open') && lastTrafficHistory) requestAnimationFrame(()=>drawTrafficHistory(lastTrafficHistory)); });\n";
diff --git a/pytorrent/static/js/trafficHistoryData.js b/pytorrent/static/js/trafficHistoryData.js
new file mode 100644
index 0000000..c2228db
--- /dev/null
+++ b/pytorrent/static/js/trafficHistoryData.js
@@ -0,0 +1 @@
+export const trafficHistoryDataSource = "  let lastTrafficHistory = null;\n  let lastTrafficHistoryRange = '7d';\n  let trafficHistoryAbort = null;\n  const trafficHistoryCache = new Map();\n\n  async function loadTrafficHistory(range=\"7d\", force=false){\n    const info=$('trafficHistoryInfo');\n    const volume=$('trafficHistoryChart');\n    const speed=$('trafficSpeedChart');\n    if(!volume||!speed) return;\n    lastTrafficHistoryRange=range;\n    const cached=trafficHistoryCache.get(range);\n    if(cached && !force){\n      lastTrafficHistory=cached;\n      drawTrafficHistory(cached);\n      updateTrafficHistoryInfo(cached);\n      refreshTrafficHistoryInBackground(range);\n      return;\n    }\n    if(info) info.textContent='Loading...';\n    await fetchTrafficHistory(range, true);\n  }\n\n  async function refreshTrafficHistoryInBackground(range){\n    try{ await fetchTrafficHistory(range, false); }catch(_){ }\n  }\n\n  async function fetchTrafficHistory(range, showErrors){\n    if(trafficHistoryAbort) trafficHistoryAbort.abort();\n    trafficHistoryAbort = new AbortController();\n    try{\n      const res=await fetch(`/api/traffic/history?range=${encodeURIComponent(range)}`,{signal:trafficHistoryAbort.signal,cache:'no-store'});\n      const j=await res.json();\n      if(!j.ok) throw new Error(j.error||'Failed to load history');\n      const history=j.history || {rows:[],range};\n      trafficHistoryCache.set(range, history);\n      if(range===lastTrafficHistoryRange){\n        lastTrafficHistory=history;\n        drawTrafficHistory(history);\n        updateTrafficHistoryInfo(history);\n      }\n    }catch(e){\n      if(e.name==='AbortError') return;\n      if(showErrors){\n        const info=$('trafficHistoryInfo');\n        if(info) info.textContent=e.message;\n        [$('trafficHistoryChart'),$('trafficSpeedChart')].forEach(c=>{ if(c) c.getContext('2d').clearRect(0,0,c.width,c.height); });\n      }\n    }finally{\n      trafficHistoryAbort=null;\n    }\n  }\n\n  function updateTrafficHistoryInfo(hist){\n    const info=$('trafficHistoryInfo');\n    if(!info) return;\n    const rows=Array.isArray(hist.rows)?hist.rows:[];\n    const bucket=hist.bucket||'bucket';\n    info.textContent=rows.length ? `${rows.length} ${bucket} bucket(s), retention ${hist.retention_days||90} days.` : 'No retained samples yet. Data is stored every minute while pyTorrent is running.';\n  }\n\n";