resize too-large cover images

discover.go

@@ -22,14 +22,19 @@ type mbArtistCredit struct {
 }
 
 type mbMedia struct {
-	Format string `json:"format"`
+	Format     string `json:"format"`
+	TrackCount int    `json:"track-count"`
 }
 
 type mbRelease struct {
-	ID           string           `json:"id"`
+	ID             string           `json:"id"`
-	Title        string           `json:"title"`
+	Title          string           `json:"title"`
-	Date         string           `json:"date"`
+	Date           string           `json:"date"`
-	Country      string           `json:"country"`
+	Country        string           `json:"country"`
+	Disambiguation string           `json:"disambiguation"`
+	TextRepresentation struct {
+		Language string `json:"language"`
+	} `json:"text-representation"`
 	Media        []mbMedia        `json:"media"`
 	ArtistCredit []mbArtistCredit `json:"artist-credit"`
 	ReleaseGroup struct {
@@ -51,6 +56,22 @@ type mbReleaseGroup struct {
 	FirstReleaseDate string `json:"first-release-date"`
 }
 
+// releaseTrackCount returns the total number of tracks across all media in a release.
+func releaseTrackCount(r mbRelease) int {
+	total := 0
+	for _, m := range r.Media {
+		total += m.TrackCount
+	}
+	return total
+}
+
+// getMBRelease fetches a single release by MBID (with media/track-count included).
+func getMBRelease(mbid string) (*mbRelease, error) {
+	var r mbRelease
+	err := mbGet(fmt.Sprintf("/ws/2/release/%s?fmt=json&inc=media", url.QueryEscape(mbid)), &r)
+	return &r, err
+}
+
 func mbGet(path string, out interface{}) error {
 	req, err := http.NewRequest("GET", "https://musicbrainz.org"+path, nil)
 	if err != nil {
@@ -91,9 +112,9 @@ func searchMBArtists(query string) ([]mbArtist, error) {
 func releaseFormatScore(r mbRelease) int {
 	for _, m := range r.Media {
 		switch m.Format {
-		case "CD":
-			return 2
 		case "Digital Media":
+			return 2
+		case "CD":
 			return 1
 		}
 	}
@@ -104,19 +125,31 @@ func releaseFormatScore(r mbRelease) int {
 // Higher is better. KR=3, JP=2, XW=1, anything else=0.
 func releaseCountryScore(r mbRelease) int {
 	switch r.Country {
-	case "KR":
-		return 3
-	case "JP":
-		return 2
 	case "XW":
+		return 2
+	case "KR":
 		return 1
 	}
 	return 0
 }
 
+// returns true if strings formatted 'YYYY-MM-DD" ts1 is before ts2
+func timeStringIsBefore(ts1, ts2 string) (bool, error) {
+	datefmt := "2006-02-01"
+	t1, err := time.Parse(datefmt, ts1)
+	if err != nil {
+		return false, err
+	}
+	t2, err := time.Parse(datefmt, ts2)
+	if err != nil {
+		return false, err
+	}
+	return t1.Unix() <= t2.Unix(), nil
+}
+
 // pickBestRelease selects the preferred release from a list.
-// Format (CD > Digital Media > *) is the primary sort key;
+// No disambiguation (canonical release) is the primary sort key;
-// country (KR > JP > XW > *) breaks ties.
+// format (CD > Digital Media > *) is secondary; country (KR > XW > *) breaks ties.
 func pickBestRelease(releases []mbRelease) *mbRelease {
 	if len(releases) == 0 {
 		return nil
@@ -124,9 +157,25 @@ func pickBestRelease(releases []mbRelease) *mbRelease {
 	best := &releases[0]
 	for i := 1; i < len(releases); i++ {
 		r := &releases[i]
-		rf, bf := releaseFormatScore(*r), releaseFormatScore(*best)
+
-		if rf > bf || (rf == bf && releaseCountryScore(*r) > releaseCountryScore(*best)) {
+		rNoDisamb := r.Disambiguation == ""
+		bestNoDisamb := best.Disambiguation == ""
+
+		// Prefer releases with no disambiguation — they are the canonical default.
+		if rNoDisamb && !bestNoDisamb {
 			best = r
+			continue
+		}
+		if !rNoDisamb && bestNoDisamb {
+			continue
+		}
+
+		// Both have the same disambiguation status; use date/format/country.
+		if before, err := timeStringIsBefore(r.Date, best.Date); before && err == nil {
+			rf, bf := releaseFormatScore(*r), releaseFormatScore(*best)
+			if rf > bf || (rf == bf && releaseCountryScore(*r) > releaseCountryScore(*best)) {
+				best = r
+			}
 		}
 	}
 	return best
@@ -207,18 +256,20 @@ func fetchArtist(artistMBID, artistName string, logf func(string)) error {
 		time.Sleep(time.Second) // MusicBrainz rate limit
 		rel := pickBestReleaseForGroup(rg.ID)
 		releaseMBID := ""
+		trackCount := 0
 		if rel == nil {
 			logf(fmt.Sprintf("  ↳ warning: could not resolve release for group %s, beets will search by name", rg.ID))
 		} else {
 			releaseMBID = rel.ID
+			trackCount = releaseTrackCount(*rel)
 			format := ""
 			if len(rel.Media) > 0 {
 				format = rel.Media[0].Format
 			}
-			logf(fmt.Sprintf("  ↳ selected release: %s [%s / %s]", releaseMBID, format, rel.Country))
+			logf(fmt.Sprintf("  ↳ selected release: %s [%s / %s / %d tracks]", releaseMBID, format, rel.Country, trackCount))
 		}
 
-		folder, err := fetchRelease(artistName, rg.Title, releaseMBID, logf)
+		folder, err := fetchRelease(artistName, rg.Title, releaseMBID, trackCount, logf)
 		if err != nil {
 			log.Printf("[discover] fetch failed for %q by %s: %v", rg.Title, artistName, err)
 			logf(fmt.Sprintf("  ↳ failed: %v", err))
@@ -226,7 +277,7 @@ func fetchArtist(artistMBID, artistName string, logf func(string)) error {
 			continue
 		}
 		// Key the pending download by release group ID for dedup; beets uses releaseMBID.
-		registerDownload(rg.ID, releaseMBID, artistName, rg.Title, folder, nil)
+		registerDownload(rg.ID, releaseMBID, artistName, rg.Title, trackCount, folder, nil)
 		logf(fmt.Sprintf("  ↳ registered for import (release mbid: %s)", releaseMBID))
 	}
 
@@ -365,15 +416,26 @@ func handleDiscoverFetch(w http.ResponseWriter, r *http.Request) {
 
 	log.Printf("[discover] starting fetch: %q by %s (mbid: %s)", body.Album, body.Artist, body.ID)
 	entry := newFetchEntry(body.ID, body.Artist, body.Album)
+
+	// Look up the expected track count from MusicBrainz so the folder-selection
+	// logic can prefer results that match the release we intend to import.
+	trackCount := 0
+	if rel, err := getMBRelease(body.ID); err == nil {
+		trackCount = releaseTrackCount(*rel)
+		log.Printf("[discover] release %s has %d tracks", body.ID, trackCount)
+	} else {
+		log.Printf("[discover] could not fetch release track count for %s: %v", body.ID, err)
+	}
+
 	go func() {
-		folder, err := fetchRelease(body.Artist, body.Album, body.ID, entry.appendLog)
+		folder, err := fetchRelease(body.Artist, body.Album, body.ID, trackCount, entry.appendLog)
 		if err != nil {
 			log.Printf("[discover] fetch failed for %q by %s: %v", body.Album, body.Artist, err)
 			entry.finish(err)
 			return
 		}
 		log.Printf("[discover] fetch complete for %q by %s, registering for import", body.Album, body.Artist)
-		registerDownload(body.ID, body.ID, body.Artist, body.Album, folder, entry)
+		registerDownload(body.ID, body.ID, body.Artist, body.Album, trackCount, folder, entry)
 		// entry.finish is called by the monitor when import completes
 	}()
 

importer.go

@@ -218,6 +218,10 @@ func RunImporter() {
 			}
 		}
 
+		if err := NormalizeCoverArt(albumPath); err != nil {
+			fmt.Println("Cover art normalization warning:", err)
+		}
+
 		fmt.Println("→ Embedding cover art for album:", albumPath)
 		result.CoverArt.Err = EmbedAlbumArtIntoFolder(albumPath)
 		if coverImg, err := FindCoverImage(albumPath); err == nil {

media.go

@@ -157,6 +157,58 @@ func fetchCoverArtArchiveFront(mbid string) ([]byte, string, error) {
 	return data, ext, nil
 }
 
+const coverMaxBytes = 5 * 1024 * 1024 // 5 MB
+
+// NormalizeCoverArt checks whether the cover image in albumDir is a large
+// non-JPEG (>5 MB). If so, it converts it to JPEG and resizes it to at most
+// 2000×2000 pixels using ffmpeg, replacing the original file with cover.jpg.
+// The function is a no-op when no cover is found, the cover is already JPEG,
+// or the file is ≤5 MB.
+func NormalizeCoverArt(albumDir string) error {
+	cover, err := FindCoverImage(albumDir)
+	if err != nil {
+		return nil // no cover present, nothing to do
+	}
+
+	// Already JPEG — no conversion needed regardless of size.
+	ext := strings.ToLower(filepath.Ext(cover))
+	if ext == ".jpg" || ext == ".jpeg" {
+		return nil
+	}
+
+	info, err := os.Stat(cover)
+	if err != nil {
+		return fmt.Errorf("stat cover: %w", err)
+	}
+	if info.Size() <= coverMaxBytes {
+		return nil // small enough, leave as-is
+	}
+
+	dest := filepath.Join(albumDir, "cover.jpg")
+	fmt.Printf("→ Cover art is %.1f MB %s; converting to JPEG (max 2000×2000)…\n",
+		float64(info.Size())/(1024*1024), strings.ToUpper(strings.TrimPrefix(ext, ".")))
+
+	// scale=2000:2000:force_original_aspect_ratio=decrease fits the image within
+	// 2000×2000 while preserving aspect ratio, and never upscales smaller images.
+	cmd := exec.Command("ffmpeg", "-y", "-i", cover,
+		"-vf", "scale=2000:2000:force_original_aspect_ratio=decrease",
+		"-q:v", "2",
+		dest,
+	)
+	if out, err := cmd.CombinedOutput(); err != nil {
+		return fmt.Errorf("ffmpeg cover conversion failed: %w\n%s", err, out)
+	}
+
+	if cover != dest {
+		if err := os.Remove(cover); err != nil {
+			fmt.Println("Warning: could not remove original cover:", err)
+		}
+	}
+
+	fmt.Println("→ Converted cover art to JPEG:", filepath.Base(dest))
+	return nil
+}
+
 // -------------------------
 // Find cover image
 // -------------------------

monitor.go

@@ -13,14 +13,15 @@ import (
 // pendingDownload tracks a queued slskd download that should be auto-imported
 // once all files have transferred successfully.
 type pendingDownload struct {
-	ID       string      // dedup key (release MBID for single fetches; release group MBID for artist fetches)
+	ID        string      // dedup key (release MBID for single fetches; release group MBID for artist fetches)
-	BeetsMBID string     // release MBID passed to beets --search-id (may differ from ID)
+	BeetsMBID string      // release MBID passed to beets --search-id (may differ from ID)
-	Artist   string
+	Artist    string
-	Album    string
+	Album     string
-	Username string      // slskd peer username
+	Username  string      // slskd peer username
-	Dir      string      // remote directory path on the peer
+	Dir       string      // remote directory path on the peer
-	Files    []slskdFile // files that were queued for download
+	Files     []slskdFile // files that were queued for download
-	Entry    *fetchEntry // fetch card to update with import progress
+	Entry     *fetchEntry // fetch card to update with import progress
+	TrackCount int        // expected number of audio tracks (0 = unknown, skip check)
 }
 
 var (
@@ -31,18 +32,21 @@ var (
 // registerDownload records a queued slskd download for monitoring and eventual
 // auto-import. id is used as the dedup key; beetsMBID is the release MBID
 // forwarded to beets --search-id (may be empty or differ from id).
+// trackCount is the expected number of audio tracks from MusicBrainz; 0 means
+// unknown and the sanity check will be skipped at import time.
 // If entry is nil a new fetchEntry is created so the frontend can discover it
 // via /discover/fetch/list.
-func registerDownload(id, beetsMBID, artist, album string, folder *albumFolder, entry *fetchEntry) {
+func registerDownload(id, beetsMBID, artist, album string, trackCount int, folder *albumFolder, entry *fetchEntry) {
 	pd := &pendingDownload{
-		ID:        id,
+		ID:         id,
-		BeetsMBID: beetsMBID,
+		BeetsMBID:  beetsMBID,
-		Artist:    artist,
+		Artist:     artist,
-		Album:     album,
+		Album:      album,
-		Username:  folder.Username,
+		Username:   folder.Username,
-		Dir:       folder.Dir,
+		Dir:        folder.Dir,
-		Files:     folder.Files,
+		Files:      folder.Files,
-		Entry:     entry,
+		Entry:      entry,
+		TrackCount: trackCount,
 	}
 
 	if entry == nil {
@@ -56,8 +60,8 @@ func registerDownload(id, beetsMBID, artist, album string, folder *albumFolder,
 	pendingDownloads[id] = pd
 	pendingMu.Unlock()
 
-	log.Printf("[monitor] registered: %q by %s (id: %s, beets mbid: %s, peer: %s, %d files)",
+	log.Printf("[monitor] registered: %q by %s (id: %s, beets mbid: %s, peer: %s, %d files, expected tracks: %d)",
-		album, artist, id, beetsMBID, folder.Username, len(folder.Files))
+		album, artist, id, beetsMBID, folder.Username, len(folder.Files), trackCount)
 }
 
 // startMonitor launches a background goroutine that periodically checks whether
@@ -215,6 +219,14 @@ func importPendingRelease(pd *pendingDownload, localDir string) {
 	}
 	logf(fmt.Sprintf("Found %d tracks", len(tracks)))
 
+	if pd.TrackCount > 0 && len(tracks) != pd.TrackCount {
+		entry.finish(fmt.Errorf(
+			"track count mismatch: downloaded %d tracks but release expects %d — aborting to avoid importing wrong edition",
+			len(tracks), pd.TrackCount,
+		))
+		return
+	}
+
 	if err := cleanAlbumTags(localDir); err != nil {
 		logf(fmt.Sprintf("Clean tags warning: %v", err))
 	}
@@ -242,6 +254,10 @@ func importPendingRelease(pd *pendingDownload, localDir string) {
 		}
 	}
 
+	if err := NormalizeCoverArt(localDir); err != nil {
+		logf(fmt.Sprintf("Cover art normalization warning: %v", err))
+	}
+
 	if err := EmbedAlbumArtIntoFolder(localDir); err != nil {
 		entry.finish(fmt.Errorf("cover embed failed: %w", err))
 		return

slskd.go

@@ -384,9 +384,12 @@ func getSlskdTransfers(username string) ([]slskdTransferDir, error) {
 // fetchRelease searches slskd for an album, queues the best-quality match for
 // download, and returns the chosen folder so the caller can monitor completion.
 // mbid, if non-empty, will be stored for use during import (beets --search-id).
-func fetchRelease(artist, album, mbid string, logf func(string)) (*albumFolder, error) {
+// trackCount, if > 0, filters candidate folders to those whose audio file count
+// matches the expected number of tracks on the release, so alternate editions
+// with different track counts are not accidentally selected.
+func fetchRelease(artist, album, mbid string, trackCount int, logf func(string)) (*albumFolder, error) {
 	query := artist + " " + album
-	log.Printf("[discover] fetch started: %q by %s", album, artist)
+	log.Printf("[discover] fetch started: %q by %s (expected tracks: %d)", album, artist, trackCount)
 	logf("Starting fetch for: " + query)
 
 	logf("Creating slskd search…")
@@ -418,7 +421,29 @@ func fetchRelease(artist, album, mbid string, logf func(string)) (*albumFolder,
 		return nil, fmt.Errorf("no audio files found for %q by %s", album, artist)
 	}
 
-	best := bestAlbumFolder(folders)
+	// When we know the expected track count, prefer folders that match exactly
+	// so we don't accidentally grab a bonus-track edition or a different version
+	// that won't align with the release MBID we pass to beets.
+	candidates := folders
+	if trackCount > 0 {
+		var matched []albumFolder
+		for _, f := range folders {
+			if len(f.Files) == trackCount {
+				matched = append(matched, f)
+			}
+		}
+		if len(matched) > 0 {
+			log.Printf("[discover] %d/%d folders match expected track count (%d)", len(matched), len(folders), trackCount)
+			logf(fmt.Sprintf("Filtered to %d/%d folders matching expected track count (%d)",
+				len(matched), len(folders), trackCount))
+			candidates = matched
+		} else {
+			log.Printf("[discover] no folders matched expected track count (%d); using best available", trackCount)
+			logf(fmt.Sprintf("Warning: no folders matched expected track count (%d); using best available", trackCount))
+		}
+	}
+
+	best := bestAlbumFolder(candidates)
 	log.Printf("[discover] selected folder: %s from %s (%s, %d files)",
 		best.Dir, best.Username, qualityLabel(best.Quality), len(best.Files))
 	logf(fmt.Sprintf("Selected folder: %s", best.Dir))

static/app.js

@@ -1,9 +1,9 @@
-'use strict';
+"use strict";
 
 // IDs of fetch cards we've already created, so we don't duplicate them.
 const knownFetchIds = new Set();
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
   initTabs();
   initSearch();
   initFetchList();
@@ -12,105 +12,124 @@ document.addEventListener('DOMContentLoaded', () => {
 // ── Tabs ───────────────────────────────────────────────────────────────────────
 
 function initTabs() {
-  document.querySelector('.tabs').addEventListener('click', e => {
+  document.querySelector(".tabs").addEventListener("click", (e) => {
-    const btn = e.target.closest('.tab-btn');
+    const btn = e.target.closest(".tab-btn");
     if (!btn) return;
     showTab(btn.dataset.tab);
   });
 }
 
 function showTab(name) {
-  document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
+  document
-  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    .querySelectorAll(".tab-pane")
-  document.getElementById('tab-' + name).classList.add('active');
+    .forEach((p) => p.classList.remove("active"));
-  document.querySelector(`.tab-btn[data-tab="${name}"]`).classList.add('active');
+  document
+    .querySelectorAll(".tab-btn")
+    .forEach((b) => b.classList.remove("active"));
+  document.getElementById("tab-" + name).classList.add("active");
+  document
+    .querySelector(`.tab-btn[data-tab="${name}"]`)
+    .classList.add("active");
 }
 
 // ── Search ─────────────────────────────────────────────────────────────────────
 
-let searchType = 'release';
+let searchType = "release";
 
 function initSearch() {
-  document.querySelector('.type-toggle').addEventListener('click', e => {
+  document.querySelector(".type-toggle").addEventListener("click", (e) => {
-    const btn = e.target.closest('.type-btn');
+    const btn = e.target.closest(".type-btn");
     if (btn) setSearchType(btn.dataset.type);
   });
 
-  const searchBtn = document.getElementById('search-btn');
+  const searchBtn = document.getElementById("search-btn");
-  const searchInput = document.getElementById('search-q');
+  const searchInput = document.getElementById("search-q");
-  searchBtn.addEventListener('click', doSearch);
+  searchBtn.addEventListener("click", doSearch);
-  searchInput.addEventListener('keydown', e => { if (e.key === 'Enter') doSearch(); });
+  searchInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") doSearch();
+  });
 
   // Event delegation for dynamically rendered result buttons
-  document.getElementById('search-results').addEventListener('click', e => {
+  document.getElementById("search-results").addEventListener("click", (e) => {
-    const btn = e.target.closest('.fetch-btn');
+    const btn = e.target.closest(".fetch-btn");
     if (!btn || btn.disabled) return;
-    if (btn.dataset.fetchType === 'artist') startArtistFetch(btn);
+    if (btn.dataset.fetchType === "artist") startArtistFetch(btn);
     else startReleaseFetch(btn);
   });
 }
 
 function setSearchType(type) {
   searchType = type;
-  document.querySelectorAll('.type-btn').forEach(b => {
+  document.querySelectorAll(".type-btn").forEach((b) => {
-    b.classList.toggle('active', b.dataset.type === type);
+    b.classList.toggle("active", b.dataset.type === type);
   });
 }
 
 function doSearch() {
-  const q = document.getElementById('search-q').value.trim();
+  const q = document.getElementById("search-q").value.trim();
   if (!q) return;
 
-  const btn = document.getElementById('search-btn');
+  const btn = document.getElementById("search-btn");
-  const resultsEl = document.getElementById('search-results');
+  const resultsEl = document.getElementById("search-results");
 
   btn.disabled = true;
-  btn.textContent = 'Searching\u2026';
+  btn.textContent = "Searching\u2026";
   resultsEl.innerHTML = '<p class="search-msg">Searching MusicBrainz\u2026</p>';
 
   fetch(`/discover/search?q=${encodeURIComponent(q)}&type=${searchType}`)
-    .then(r => {
+    .then((r) => {
-      if (!r.ok) return r.text().then(t => { throw new Error(t || r.statusText); });
+      if (!r.ok)
+        return r.text().then((t) => {
+          throw new Error(t || r.statusText);
+        });
       return r.json();
     })
-    .then(data => renderResults(data))
+    .then((data) => renderResults(data))
-    .catch(err => {
+    .catch((err) => {
       resultsEl.innerHTML = `<p class="search-msg error">Error: ${esc(err.message)}</p>`;
     })
     .finally(() => {
       btn.disabled = false;
-      btn.textContent = 'Search';
+      btn.textContent = "Search";
     });
 }
 
 // ── Results rendering ──────────────────────────────────────────────────────────
 
 function renderResults(data) {
-  const el = document.getElementById('search-results');
+  const el = document.getElementById("search-results");
   if (!data || data.length === 0) {
     el.innerHTML = '<p class="search-msg">No results found.</p>';
     return;
   }
-  const renderer = searchType === 'artist' ? renderArtist : renderRelease;
+  const renderer = searchType === "artist" ? renderArtist : renderRelease;
-  el.innerHTML = data.map(renderer).join('');
+  el.innerHTML = data.map(renderer).join("");
 }
 
 function renderRelease(r) {
-  const credits = r['artist-credit'] ?? [];
+  const credits = r["artist-credit"] ?? [];
-  const artist = credits.map(c => c.name || c.artist?.name || '').join('') || 'Unknown Artist';
+  const artist =
-  const year = r.date?.substring(0, 4) ?? '';
+    credits.map((c) => c.name || c.artist?.name || "").join("") ||
-  const type = r['release-group']?.['primary-type'] ?? '';
+    "Unknown Artist";
-  const country = r.country ?? '';
+  const year = r.date?.substring(0, 4) ?? "";
-  const formats = [...new Set((r.media ?? []).map(m => m.format).filter(Boolean))].join('+');
+  const type = r["release-group"]?.["primary-type"] ?? "";
-  const meta = [year, type, formats, country].filter(Boolean).join(' \u00b7 ');
+  const country = r.country ?? "";
+  const formats = [
+    ...new Set((r.media ?? []).map((m) => m.format).filter(Boolean)),
+  ].join("+");
+  const lang = r["text-representation"]?.language ?? "";
+  const meta = [year, type, formats, country, lang]
+    .filter(Boolean)
+    .join(" \u00b7 ");
+  const dis = r.disambiguation ? ` (${esc(r.disambiguation)})` : "";
   const coverUrl = `https://coverartarchive.org/release/${r.id}/front-250`;
 
   return `
     <div class="result-row">
       <img class="result-cover" src="${coverUrl}" onerror="this.style.display='none'" loading="lazy" alt="">
       <div class="result-info">
-        <span class="result-title">${esc(artist)} \u2014 ${esc(r.title)}</span>
+        <span class="result-title">${esc(artist)} \u2014 ${esc(r.title)}<span class="result-dis">${dis}</span></span>
-        ${meta ? `<span class="result-meta">${esc(meta)}</span>` : ''}
+        ${meta ? `<span class="result-meta">${esc(meta)}</span>` : ""}
       </div>
       <button class="fetch-btn"
         data-fetch-type="release"
@@ -121,12 +140,12 @@ function renderRelease(r) {
 }
 
 function renderArtist(a) {
-  const dis = a.disambiguation ? ` (${esc(a.disambiguation)})` : '';
+  const dis = a.disambiguation ? ` (${esc(a.disambiguation)})` : "";
   return `
     <div class="result-row">
       <div class="result-info">
         <span class="result-title">${esc(a.name)}${dis}</span>
-        ${a.country ? `<span class="result-meta">${esc(a.country)}</span>` : ''}
+        ${a.country ? `<span class="result-meta">${esc(a.country)}</span>` : ""}
       </div>
       <button class="fetch-btn"
         data-fetch-type="artist"
@@ -140,24 +159,27 @@ function renderArtist(a) {
 function startReleaseFetch(btn) {
   const { id, artist, album } = btn.dataset;
   btn.disabled = true;
-  btn.textContent = 'Fetching\u2026';
+  btn.textContent = "Fetching\u2026";
 
-  fetch('/discover/fetch', {
+  fetch("/discover/fetch", {
-    method: 'POST',
+    method: "POST",
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ id, artist, album }),
   })
-    .then(r => {
+    .then((r) => {
-      if (!r.ok) return r.text().then(t => { throw new Error(t || r.statusText); });
+      if (!r.ok)
+        return r.text().then((t) => {
+          throw new Error(t || r.statusText);
+        });
       return r.json();
     })
     .then(() => {
       addFetchCard(id, `${artist} \u2014 ${album}`);
       pollFetch(id);
     })
-    .catch(err => {
+    .catch((err) => {
       btn.disabled = false;
-      btn.textContent = 'Fetch';
+      btn.textContent = "Fetch";
       showFetchError(err.message);
     });
 }
@@ -165,24 +187,27 @@ function startReleaseFetch(btn) {
 function startArtistFetch(btn) {
   const { id, name } = btn.dataset;
   btn.disabled = true;
-  btn.textContent = 'Fetching\u2026';
+  btn.textContent = "Fetching\u2026";
 
-  fetch('/discover/fetch/artist', {
+  fetch("/discover/fetch/artist", {
-    method: 'POST',
+    method: "POST",
-    headers: { 'Content-Type': 'application/json' },
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ id, name }),
   })
-    .then(r => {
+    .then((r) => {
-      if (!r.ok) return r.text().then(t => { throw new Error(t || r.statusText); });
+      if (!r.ok)
+        return r.text().then((t) => {
+          throw new Error(t || r.statusText);
+        });
       return r.json();
     })
     .then(() => {
       addFetchCard(id, `${name} \u2014 full discography`);
       pollFetch(id);
     })
-    .catch(err => {
+    .catch((err) => {
       btn.disabled = false;
-      btn.textContent = 'Fetch All';
+      btn.textContent = "Fetch All";
       showFetchError(err.message);
     });
 }
@@ -191,9 +216,9 @@ function startArtistFetch(btn) {
 
 function addFetchCard(id, title) {
   knownFetchIds.add(id);
-  const list = document.getElementById('fetch-list');
+  const list = document.getElementById("fetch-list");
-  const card = document.createElement('div');
+  const card = document.createElement("div");
-  card.className = 'fetch-card';
+  card.className = "fetch-card";
   card.id = `fetch-${id}`;
   card.innerHTML = `
     <div class="fetch-header">
@@ -206,28 +231,28 @@ function addFetchCard(id, title) {
 
 function pollFetch(id) {
   fetch(`/discover/fetch/status?id=${encodeURIComponent(id)}`)
-    .then(r => r.json())
+    .then((r) => r.json())
-    .then(data => {
+    .then((data) => {
-      const logEl    = document.getElementById(`flog-${id}`);
+      const logEl = document.getElementById(`flog-${id}`);
       const statusEl = document.getElementById(`fstatus-${id}`);
-      const card     = document.getElementById(`fetch-${id}`);
+      const card = document.getElementById(`fetch-${id}`);
 
       if (logEl && data.log) {
         logEl.innerHTML = data.log
-          .map(l => `<div class="log-line">${esc(l)}</div>`)
+          .map((l) => `<div class="log-line">${esc(l)}</div>`)
-          .join('');
+          .join("");
         logEl.scrollTop = logEl.scrollHeight;
       }
 
       if (data.done) {
         if (data.success) {
-          statusEl?.setAttribute('class', 'fetch-status fetch-status-ok');
+          statusEl?.setAttribute("class", "fetch-status fetch-status-ok");
-          if (statusEl) statusEl.textContent = '\u2713 done';
+          if (statusEl) statusEl.textContent = "\u2713 done";
-          card?.classList.add('fetch-card-ok');
+          card?.classList.add("fetch-card-ok");
         } else {
-          statusEl?.setAttribute('class', 'fetch-status fetch-status-err');
+          statusEl?.setAttribute("class", "fetch-status fetch-status-err");
-          if (statusEl) statusEl.textContent = '\u2717 failed';
+          if (statusEl) statusEl.textContent = "\u2717 failed";
-          card?.classList.add('fetch-card-err');
+          card?.classList.add("fetch-card-err");
           if (data.error && logEl) {
             logEl.innerHTML += `<div class="log-line log-line-err">${esc(data.error)}</div>`;
             logEl.scrollTop = logEl.scrollHeight;
@@ -249,9 +274,9 @@ function initFetchList() {
 }
 
 function pollFetchList() {
-  fetch('/discover/fetch/list')
+  fetch("/discover/fetch/list")
-    .then(r => r.ok ? r.json() : null)
+    .then((r) => (r.ok ? r.json() : null))
-    .then(items => {
+    .then((items) => {
       if (!items) return;
       for (const item of items) {
         if (!knownFetchIds.has(item.id)) {
@@ -268,9 +293,9 @@ function pollFetchList() {
 // ── Utilities ──────────────────────────────────────────────────────────────────
 
 function showFetchError(msg) {
-  const list = document.getElementById('fetch-list');
+  const list = document.getElementById("fetch-list");
-  const el = document.createElement('div');
+  const el = document.createElement("div");
-  el.className = 'fetch-card fetch-card-err';
+  el.className = "fetch-card fetch-card-err";
   el.innerHTML = `<div class="fetch-header">
     <span class="fetch-title">Fetch failed</span>
     <span class="fetch-status fetch-status-err">\u2717 error</span>
@@ -280,9 +305,9 @@ function showFetchError(msg) {
 }
 
 function esc(s) {
-  return String(s ?? '')
+  return String(s ?? "")
-    .replace(/&/g, '&amp;')
+    .replace(/&/g, "&amp;")
-    .replace(/</g, '&lt;')
+    .replace(/</g, "&lt;")
-    .replace(/>/g, '&gt;')
+    .replace(/>/g, "&gt;")
-    .replace(/"/g, '&quot;');
+    .replace(/"/g, "&quot;");
 }

static/style.css

@@ -1,453 +1,585 @@
 /* ── Custom properties ────────────────────────────────────────────────────── */
 
 :root {
-  --bg:              #111;
+    --bg: #111;
-  --surface:         #1a1a1a;
+    --surface: #1a1a1a;
-  --surface-hi:      #222;
+    --surface-hi: #222;
-  --border:          #2a2a2a;
+    --border: #2a2a2a;
-  --border-focus:    #555;
+    --border-focus: #555;
 
-  --text:            #eee;
+    --text: #eee;
-  --text-secondary:  #aaa;
+    --text-secondary: #aaa;
-  --text-muted:      #777;
+    --text-muted: #777;
-  --text-dim:        #555;
+    --text-dim: #555;
 
-  --green:           #4caf50;
+    --green: #4caf50;
-  --green-bg:        #1e4d2b;
+    --green-bg: #1e4d2b;
-  --green-hover:     #1e3d1e;
+    --green-hover: #1e3d1e;
-  --green-border:    #3a7a3a;
+    --green-border: #3a7a3a;
-  --amber:           #f0a500;
+    --amber: #f0a500;
-  --amber-bg:        #4d3a00;
+    --amber-bg: #4d3a00;
-  --red:             #e05050;
+    --red: #e05050;
-  --red-bg:          #4d1a1a;
+    --red-bg: #4d1a1a;
-  --red-text:        #c0392b;
+    --red-text: #c0392b;
 
-  --pill-beets:      #7ec8e3;
+    --pill-beets: #7ec8e3;
-  --pill-mb:         #c084fc;
+    --pill-mb: #c084fc;
-  --pill-tags:       #f0a500;
+    --pill-tags: #f0a500;
 
-  --radius-lg:       8px;
+    --radius-lg: 8px;
-  --radius:          6px;
+    --radius: 6px;
-  --radius-sm:       5px;
+    --radius-sm: 5px;
-  --radius-xs:       4px;
+    --radius-xs: 4px;
 
-  --max-w:           860px;
+    --max-w: 860px;
-  --pad-x:           24px;
+    --pad-x: 24px;
 }
 
 /* ── Reset & base ─────────────────────────────────────────────────────────── */
 
-*, *::before, *::after { box-sizing: border-box; }
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
 
 body {
-  font-family: system-ui, -apple-system, sans-serif;
+    font-family:
-  background: var(--bg);
+        system-ui,
-  color: var(--text);
+        -apple-system,
-  margin: 0;
+        sans-serif;
-  padding: 48px var(--pad-x) 80px;
+    background: var(--bg);
-  text-align: center;
+    color: var(--text);
+    margin: 0;
+    padding: 48px var(--pad-x) 80px;
+    text-align: center;
 }
 
 h1 {
-  margin: 0 0 24px;
+    margin: 0 0 24px;
-  font-size: clamp(20px, 4vw, 28px);
+    font-size: clamp(20px, 4vw, 28px);
 }
 
 /* ── Tabs ─────────────────────────────────────────────────────────────────── */
 
 .tabs {
-  display: inline-flex;
+    display: inline-flex;
-  gap: 4px;
+    gap: 4px;
-  background: var(--surface);
+    background: var(--surface);
-  border: 1px solid var(--border);
+    border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
+    border-radius: var(--radius-lg);
-  padding: 4px;
+    padding: 4px;
-  margin-bottom: 36px;
+    margin-bottom: 36px;
 }
 
 .tab-btn {
-  font-size: 14px;
+    font-size: 14px;
-  min-height: 36px;
+    min-height: 36px;
-  padding: 0 24px;
+    padding: 0 24px;
-  border-radius: var(--radius);
+    border-radius: var(--radius);
-  border: none;
+    border: none;
-  cursor: pointer;
+    cursor: pointer;
-  background: transparent;
+    background: transparent;
-  color: var(--text-muted);
+    color: var(--text-muted);
-  transition: background 0.15s, color 0.15s;
+    transition:
+        background 0.15s,
+        color 0.15s;
 }
 .tab-btn.active {
-  background: var(--surface-hi);
+    background: var(--surface-hi);
-  color: var(--text);
+    color: var(--text);
 }
 
-.tab-pane         { display: none; }
+.tab-pane {
-.tab-pane.active  { display: block; }
+    display: none;
+}
+.tab-pane.active {
+    display: block;
+}
 
 /* ── Shared card / content container ─────────────────────────────────────── */
 
 .content-box {
-  max-width: var(--max-w);
+    max-width: var(--max-w);
-  margin: 0 auto;
+    margin: 0 auto;
-  text-align: left;
+    text-align: left;
 }
 
 /* ── Import tab — run button ─────────────────────────────────────────────── */
 
 .run-btn {
-  font-size: clamp(18px, 4vw, 28px);
+    font-size: clamp(18px, 4vw, 28px);
-  padding: 18px 40px;
+    padding: 18px 40px;
-  border-radius: 10px;
+    border-radius: 10px;
-  border: none;
+    border: none;
-  cursor: pointer;
+    cursor: pointer;
-  background: var(--green);
+    background: var(--green);
-  color: #fff;
+    color: #fff;
-  transition: opacity 0.15s;
+    transition: opacity 0.15s;
+}
+.run-btn:hover:not(:disabled) {
+    opacity: 0.88;
 }
-.run-btn:hover:not(:disabled) { opacity: 0.88; }
 .run-btn:disabled {
-  background: #555;
+    background: #555;
-  cursor: not-allowed;
+    cursor: not-allowed;
 }
 
 /* ── Import tab — session summary ────────────────────────────────────────── */
 
-.session { margin-top: 48px; }
+.session {
+    margin-top: 48px;
+}
 
 .session-header {
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  align-items: baseline;
+    align-items: baseline;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  gap: 4px;
+    gap: 4px;
-  border-bottom: 1px solid #333;
+    border-bottom: 1px solid #333;
-  padding-bottom: 8px;
+    padding-bottom: 8px;
-  margin-bottom: 20px;
+    margin-bottom: 20px;
+}
+.session-header h2 {
+    margin: 0;
+    font-size: 16px;
+    color: var(--text-secondary);
+}
+.session-header .duration {
+    font-size: 13px;
+    color: var(--text-dim);
 }
-.session-header h2 { margin: 0; font-size: 16px; color: var(--text-secondary); }
-.session-header .duration { font-size: 13px; color: var(--text-dim); }
 
 /* ── Album card ───────────────────────────────────────────────────────────── */
 
 .album {
-  background: var(--surface);
+    background: var(--surface);
-  border: 1px solid var(--border);
+    border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
+    border-radius: var(--radius-lg);
-  padding: 16px 20px;
+    padding: 16px 20px;
-  margin-bottom: 12px;
+    margin-bottom: 12px;
 }
 
 .album-header {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  gap: 10px;
+    gap: 10px;
-  margin-bottom: 10px;
+    margin-bottom: 10px;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 .album-name {
-  font-weight: 600;
+    font-weight: 600;
-  font-size: 15px;
+    font-size: 15px;
-  flex: 1;
+    flex: 1;
-  min-width: 0;
+    min-width: 0;
-  white-space: nowrap;
+    white-space: nowrap;
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
 }
 
 .badge {
-  font-size: 11px;
+    font-size: 11px;
-  font-weight: 700;
+    font-weight: 700;
-  padding: 2px 8px;
+    padding: 2px 8px;
-  border-radius: var(--radius-xs);
+    border-radius: var(--radius-xs);
-  white-space: nowrap;
+    white-space: nowrap;
-  flex-shrink: 0;
+    flex-shrink: 0;
+}
+.badge-ok {
+    background: var(--green-bg);
+    color: var(--green);
+}
+.badge-warn {
+    background: var(--amber-bg);
+    color: var(--amber);
+}
+.badge-fatal {
+    background: var(--red-bg);
+    color: var(--red);
 }
-.badge-ok    { background: var(--green-bg);  color: var(--green); }
-.badge-warn  { background: var(--amber-bg);  color: var(--amber); }
-.badge-fatal { background: var(--red-bg);    color: var(--red); }
 
 /* ── Metadata row ─────────────────────────────────────────────────────────── */
 
 .metadata {
-  display: flex;
+    display: flex;
-  align-items: baseline;
+    align-items: baseline;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  gap: 10px;
+    gap: 10px;
-  font-size: 12px;
+    font-size: 12px;
-  color: var(--text-muted);
+    color: var(--text-muted);
-  margin-bottom: 12px;
+    margin-bottom: 12px;
+}
+.metadata-title {
+    color: var(--text-secondary);
+    font-size: 13px;
 }
-.metadata-title { color: var(--text-secondary); font-size: 13px; }
 
 .metadata-pill {
-  display: inline-flex;
+    display: inline-flex;
-  align-items: center;
+    align-items: center;
-  gap: 4px;
+    gap: 4px;
-  background: var(--surface-hi);
+    background: var(--surface-hi);
-  border-radius: var(--radius-xs);
+    border-radius: var(--radius-xs);
-  padding: 2px 7px;
+    padding: 2px 7px;
-  font-size: 11px;
+    font-size: 11px;
+}
+.pill-label {
+    color: var(--text-dim);
+}
+.pill-beets {
+    color: var(--pill-beets);
+}
+.pill-musicbrainz {
+    color: var(--pill-mb);
+}
+.pill-file_tags {
+    color: var(--pill-tags);
+}
+.pill-unknown {
+    color: #888;
 }
-.pill-label        { color: var(--text-dim); }
-.pill-beets        { color: var(--pill-beets); }
-.pill-musicbrainz  { color: var(--pill-mb); }
-.pill-file_tags    { color: var(--pill-tags); }
-.pill-unknown      { color: #888; }
 
 /* ── Info grid ────────────────────────────────────────────────────────────── */
 
 .info-grid {
-  display: grid;
+    display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 6px;
+    gap: 6px;
-  margin-bottom: 12px;
+    margin-bottom: 12px;
 }
 .info-card {
-  background: var(--surface-hi);
+    background: var(--surface-hi);
-  border-radius: var(--radius);
+    border-radius: var(--radius);
-  padding: 8px 12px;
+    padding: 8px 12px;
-  font-size: 12px;
+    font-size: 12px;
 }
 .info-card-label {
-  font-size: 10px;
+    font-size: 10px;
-  text-transform: uppercase;
+    text-transform: uppercase;
-  letter-spacing: 0.06em;
+    letter-spacing: 0.06em;
-  color: var(--text-dim);
+    color: var(--text-dim);
-  margin-bottom: 4px;
+    margin-bottom: 4px;
+}
+.info-card-value {
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 600;
+}
+.info-card-sub {
+    margin-top: 3px;
+    color: var(--text-dim);
+    font-size: 11px;
+    line-height: 1.4;
 }
-.info-card-value { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
-.info-card-sub   { margin-top: 3px; color: var(--text-dim); font-size: 11px; line-height: 1.4; }
 
-.info-ok   { color: var(--green); }
+.info-ok {
-.info-warn { color: var(--amber); }
+    color: var(--green);
-.info-dim  { color: var(--text-dim); }
+}
+.info-warn {
+    color: var(--amber);
+}
+.info-dim {
+    color: var(--text-dim);
+}
 
 /* ── Pipeline steps ───────────────────────────────────────────────────────── */
 
 .steps-label {
-  font-size: 10px;
+    font-size: 10px;
-  text-transform: uppercase;
+    text-transform: uppercase;
-  letter-spacing: 0.06em;
+    letter-spacing: 0.06em;
-  color: #444;
+    color: #444;
-  margin-bottom: 6px;
+    margin-bottom: 6px;
 }
 .steps {
-  display: grid;
+    display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 6px;
+    gap: 6px;
 }
 .step {
-  font-size: 12px;
+    font-size: 12px;
-  padding: 5px 10px;
+    padding: 5px 10px;
-  border-radius: var(--radius-sm);
+    border-radius: var(--radius-sm);
-  background: var(--surface-hi);
+    background: var(--surface-hi);
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  gap: 2px;
+    gap: 2px;
+}
+.step-label {
+    color: #888;
+}
+.step-ok {
+    color: var(--green);
+}
+.step-warn {
+    color: var(--amber);
+}
+.step-fatal {
+    color: var(--red);
+}
+.step-err {
+    font-size: 11px;
+    color: var(--red-text);
+    margin-top: 2px;
+    word-break: break-word;
 }
-.step-label { color: #888; }
-.step-ok    { color: var(--green); }
-.step-warn  { color: var(--amber); }
-.step-fatal { color: var(--red); }
-.step-err   { font-size: 11px; color: var(--red-text); margin-top: 2px; word-break: break-word; }
 
 /* ── Discover tab — search form ───────────────────────────────────────────── */
 
 .search-form {
-  display: flex;
+    display: flex;
-  gap: 8px;
+    gap: 8px;
-  align-items: stretch;
+    align-items: stretch;
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 .type-toggle {
-  display: flex;
+    display: flex;
-  border: 1px solid #333;
+    border: 1px solid #333;
-  border-radius: var(--radius);
+    border-radius: var(--radius);
-  overflow: hidden;
+    overflow: hidden;
-  flex-shrink: 0;
+    flex-shrink: 0;
 }
 .type-btn {
-  font-size: 13px;
+    font-size: 13px;
-  padding: 0 16px;
+    padding: 0 16px;
-  border: none;
+    border: none;
-  background: var(--surface);
+    background: var(--surface);
-  color: var(--text-muted);
+    color: var(--text-muted);
-  cursor: pointer;
+    cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+    transition:
-  white-space: nowrap;
+        background 0.15s,
+        color 0.15s;
+    white-space: nowrap;
 }
 .type-btn.active {
-  background: var(--surface-hi);
+    background: var(--surface-hi);
-  color: var(--text);
+    color: var(--text);
 }
 
 .search-input {
-  flex: 1;
+    flex: 1;
-  min-width: 0;
+    min-width: 0;
-  font-size: 14px;
+    font-size: 14px;
-  padding: 0 12px;
+    padding: 0 12px;
-  height: 38px;
+    height: 38px;
-  background: var(--surface);
+    background: var(--surface);
-  border: 1px solid #333;
+    border: 1px solid #333;
-  border-radius: var(--radius);
+    border-radius: var(--radius);
-  color: var(--text);
+    color: var(--text);
-  outline: none;
+    outline: none;
-  transition: border-color 0.15s;
+    transition: border-color 0.15s;
+}
+.search-input:focus {
+    border-color: var(--border-focus);
 }
-.search-input:focus { border-color: var(--border-focus); }
 
 .search-btn {
-  font-size: 14px;
+    font-size: 14px;
-  padding: 0 20px;
+    padding: 0 20px;
-  height: 38px;
+    height: 38px;
-  border-radius: var(--radius);
+    border-radius: var(--radius);
-  border: none;
+    border: none;
-  background: var(--green);
+    background: var(--green);
-  color: #fff;
+    color: #fff;
-  cursor: pointer;
+    cursor: pointer;
-  flex-shrink: 0;
+    flex-shrink: 0;
-  transition: opacity 0.15s;
+    transition: opacity 0.15s;
+}
+.search-btn:hover:not(:disabled) {
+    opacity: 0.88;
+}
+.search-btn:disabled {
+    background: #555;
+    cursor: not-allowed;
 }
-.search-btn:hover:not(:disabled) { opacity: 0.88; }
-.search-btn:disabled { background: #555; cursor: not-allowed; }
 
 /* ── Discover tab — search results ───────────────────────────────────────── */
 
 .search-msg {
-  text-align: center;
+    text-align: center;
-  color: var(--text-dim);
+    color: var(--text-dim);
-  font-size: 14px;
+    font-size: 14px;
-  padding: 32px 0;
+    padding: 32px 0;
+}
+.search-msg.error {
+    color: var(--red);
 }
-.search-msg.error { color: var(--red); }
 
 .result-row {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  gap: 12px;
+    gap: 12px;
-  background: var(--surface);
+    background: var(--surface);
-  border: 1px solid var(--border);
+    border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
+    border-radius: var(--radius-lg);
-  padding: 12px 16px;
+    padding: 12px 16px;
-  margin-bottom: 8px;
+    margin-bottom: 8px;
 }
 .result-cover {
-  width: 48px;
+    width: 48px;
-  height: 48px;
+    height: 48px;
-  object-fit: cover;
+    object-fit: cover;
-  border-radius: var(--radius-sm);
+    border-radius: var(--radius-sm);
-  flex-shrink: 0;
+    flex-shrink: 0;
-  background: var(--surface-hi);
+    background: var(--surface-hi);
+}
+.result-info {
+    flex: 1;
+    min-width: 0;
 }
-.result-info { flex: 1; min-width: 0; }
 .result-title {
-  display: block;
+    display: block;
-  font-size: 14px;
+    font-size: 14px;
-  color: #ddd;
+    color: #ddd;
-  white-space: nowrap;
+    white-space: nowrap;
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
+}
+.result-dis {
+    color: var(--text-dim);
 }
 .result-meta {
-  display: block;
+    display: block;
-  font-size: 12px;
+    font-size: 12px;
-  color: var(--text-dim);
+    color: var(--text-dim);
-  margin-top: 2px;
+    margin-top: 2px;
 }
 
 .fetch-btn {
-  font-size: 12px;
+    font-size: 12px;
-  padding: 5px 14px;
+    padding: 5px 14px;
-  border-radius: var(--radius-sm);
+    border-radius: var(--radius-sm);
-  border: 1px solid var(--green-border);
+    border: 1px solid var(--green-border);
-  background: transparent;
+    background: transparent;
-  color: var(--green);
+    color: var(--green);
-  cursor: pointer;
+    cursor: pointer;
-  flex-shrink: 0;
+    flex-shrink: 0;
-  white-space: nowrap;
+    white-space: nowrap;
-  transition: background 0.15s;
+    transition: background 0.15s;
+}
+.fetch-btn:hover:not(:disabled) {
+    background: var(--green-hover);
+}
+.fetch-btn:disabled {
+    border-color: #333;
+    color: var(--text-dim);
+    cursor: not-allowed;
 }
-.fetch-btn:hover:not(:disabled) { background: var(--green-hover); }
-.fetch-btn:disabled { border-color: #333; color: var(--text-dim); cursor: not-allowed; }
 
 /* ── Discover tab — fetch log cards ───────────────────────────────────────── */
 
-.fetch-list { margin-top: 32px; }
+.fetch-list {
+    margin-top: 32px;
+}
 
 .fetch-card {
-  background: var(--surface);
+    background: var(--surface);
-  border: 1px solid var(--border);
+    border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
+    border-radius: var(--radius-lg);
-  padding: 14px 16px;
+    padding: 14px 16px;
-  margin-bottom: 10px;
+    margin-bottom: 10px;
-  transition: border-color 0.3s;
+    transition: border-color 0.3s;
+}
+.fetch-card-ok {
+    border-color: var(--green-bg);
+}
+.fetch-card-err {
+    border-color: var(--red-bg);
 }
-.fetch-card-ok  { border-color: var(--green-bg); }
-.fetch-card-err { border-color: var(--red-bg); }
 
 .fetch-header {
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  align-items: center;
+    align-items: center;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  gap: 6px;
+    gap: 6px;
-  margin-bottom: 8px;
+    margin-bottom: 8px;
 }
 .fetch-title {
-  font-size: 14px;
+    font-size: 14px;
-  font-weight: 600;
+    font-weight: 600;
-  color: var(--text-secondary);
+    color: var(--text-secondary);
-  min-width: 0;
+    min-width: 0;
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
-  white-space: nowrap;
+    white-space: nowrap;
 }
 .fetch-status {
-  font-size: 12px;
+    font-size: 12px;
-  color: var(--text-dim);
+    color: var(--text-dim);
-  flex-shrink: 0;
+    flex-shrink: 0;
+}
+.fetch-status-ok {
+    color: var(--green);
+}
+.fetch-status-err {
+    color: var(--red);
 }
-.fetch-status-ok  { color: var(--green); }
-.fetch-status-err { color: var(--red); }
 
 .fetch-log {
-  font-size: 12px;
+    font-size: 12px;
-  font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
+    font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
-  color: var(--text-muted);
+    color: var(--text-muted);
-  max-height: 260px;
+    max-height: 260px;
-  overflow-y: auto;
+    overflow-y: auto;
-  scrollbar-width: thin;
+    scrollbar-width: thin;
-  scrollbar-color: #333 transparent;
+    scrollbar-color: #333 transparent;
+}
+.log-line {
+    padding: 1px 0;
+    line-height: 1.5;
+}
+.log-line-err {
+    color: var(--red-text);
 }
-.log-line     { padding: 1px 0; line-height: 1.5; }
-.log-line-err { color: var(--red-text); }
 
 /* ── Footer ───────────────────────────────────────────────────────────────── */
 
 footer {
-  position: fixed;
+    position: fixed;
-  bottom: 14px;
+    bottom: 14px;
-  left: 0;
+    left: 0;
-  width: 100%;
+    width: 100%;
-  font-size: 12px;
+    font-size: 12px;
-  color: #444;
+    color: #444;
-  text-align: center;
+    text-align: center;
-  pointer-events: none;
+    pointer-events: none;
 }
 
 /* ── Responsive ───────────────────────────────────────────────────────────── */
 
 @media (max-width: 600px) {
-  body { padding: 32px 16px 72px; }
+    body {
+        padding: 32px 16px 72px;
+    }
 
-  .tabs { display: flex; width: 100%; }
+    .tabs {
-  .tab-btn { flex: 1; padding: 0; min-height: 40px; }
+        display: flex;
+        width: 100%;
+    }
+    .tab-btn {
+        flex: 1;
+        padding: 0;
+        min-height: 40px;
+    }
 
-  .search-form { flex-wrap: wrap; }
+    .search-form {
-  .type-toggle { width: 100%; }
+        flex-wrap: wrap;
-  .type-btn    { flex: 1; min-height: 38px; }
+    }
-  .search-btn  { width: 100%; }
+    .type-toggle {
+        width: 100%;
+    }
+    .type-btn {
+        flex: 1;
+        min-height: 38px;
+    }
+    .search-btn {
+        width: 100%;
+    }
 
-  .result-title { white-space: normal; }
+    .result-title {
+        white-space: normal;
+    }
 }