.cleanup

frontend/src/App.tsx

@@ -36,13 +36,14 @@ import { useDownloadQueueDialog } from "@/hooks/useDownloadQueueDialog";
 import { useDownloadProgress } from "@/hooks/useDownloadProgress";
 const HISTORY_KEY = "spotiflac_fetch_history";
 const MAX_HISTORY = 5;
-
-function extractSpotifyEntityFromURL(url: string): { type: string; id: string; } | null {
+function extractSpotifyEntityFromURL(url: string): {
+    type: string;
+    id: string;
+} | null {
     const trimmed = url.trim();
     if (!trimmed) {
         return null;
     }
-
     const spotifyUriMatch = trimmed.match(/^spotify:(track|album|playlist|artist):([A-Za-z0-9]+)$/i);
     if (spotifyUriMatch) {
         return {
@@ -50,7 +51,6 @@ function extractSpotifyEntityFromURL(url: string): { type: string; id: string; }
             id: spotifyUriMatch[2],
         };
     }
-
     try {
         const parsed = new URL(trimmed);
         const segments = parsed.pathname.split("/").filter(Boolean);
@@ -60,7 +60,6 @@ function extractSpotifyEntityFromURL(url: string): { type: string; id: string; }
             if (!supportedTypes.has(segment)) {
                 continue;
             }
-
             const id = segments[i + 1];
             if (id) {
                 return { type: segment, id };
@@ -69,15 +68,12 @@ function extractSpotifyEntityFromURL(url: string): { type: string; id: string; }
     }
     catch {
     }
-
     return null;
 }
-
 function normalizeHistoryURL(url: string): string {
     const trimmed = url.trim();
     if (!trimmed)
         return trimmed;
-
     const withoutQuery = trimmed.split("?")[0].replace(/\/+$/, "");
     const spotifyEntity = extractSpotifyEntityFromURL(withoutQuery);
     if (spotifyEntity) {
@@ -85,17 +81,14 @@ function normalizeHistoryURL(url: string): string {
     }
     return withoutQuery.replace(/(\/artist\/[A-Za-z0-9]+)\/discography\/all$/i, "$1");
 }
-
 function getHistoryIdentityKey(type: HistoryItem["type"], url: string): string {
     const normalizedUrl = normalizeHistoryURL(url);
     const spotifyEntity = extractSpotifyEntityFromURL(normalizedUrl);
     if (spotifyEntity) {
         return `${type}:${spotifyEntity.id}`;
     }
-
     return `${type}:${normalizedUrl}`;
 }
-
 function dedupeHistoryItems(items: HistoryItem[]): HistoryItem[] {
     const seen = new Set<string>();
     const deduped: HistoryItem[] = [];
@@ -109,7 +102,6 @@ function dedupeHistoryItems(items: HistoryItem[]): HistoryItem[] {
     }
     return deduped;
 }
-
 function App() {
     const [currentPage, setCurrentPage] = useState<PageType>("main");
     const [spotifyUrl, setSpotifyUrl] = useState("");
@@ -623,17 +615,13 @@ function App() {
                             FFmpeg Required
                         </DialogTitle>
                         <DialogDescription className="text-sm text-foreground/70 leading-relaxed font-normal">
-                            {brewPath ? (
-                                <>
+                            {brewPath ? (<>
                                     FFmpeg is essential for SpotiFLAC to function properly.
                                     Homebrew detected. Recommended: <span className="text-foreground font-semibold">brew install ffmpeg</span>
-                                </>
-                            ) : (
-                                <>
+                                </>) : (<>
                                     FFmpeg is essential for SpotiFLAC to function properly.
                                     This setup will download about <span className="text-foreground font-semibold">100-200MB</span> of data.
-                                </>
-                            )}
+                                </>)}
                         </DialogDescription>
                     </DialogHeader>
 
@@ -665,16 +653,11 @@ function App() {
                         {!isInstallingFFmpeg && (<Button variant="outline" className="flex-1 h-11 text-sm font-bold transition-colors" onClick={() => Quit()}>
                                 Exit
                             </Button>)}
-                        {brewPath ? (
-                                <Button className="flex-1 h-11 text-sm font-bold shadow-lg shadow-primary/10" onClick={() => handleInstallFFmpeg(true)} disabled={isInstallingFFmpeg}>
+                        {brewPath ? (<Button className="flex-1 h-11 text-sm font-bold shadow-lg shadow-primary/10" onClick={() => handleInstallFFmpeg(true)} disabled={isInstallingFFmpeg}>
                                     {isInstallingFFmpeg ? "Installing..." : "Install via Homebrew"}
-                                </Button>
-                            
-                        ) : (
-                            <Button className={`${isInstallingFFmpeg ? 'w-full' : 'flex-1'} h-11 text-sm font-bold shadow-lg shadow-primary/10`} onClick={() => handleInstallFFmpeg(false)} disabled={isInstallingFFmpeg}>
+                                </Button>) : (<Button className={`${isInstallingFFmpeg ? 'w-full' : 'flex-1'} h-11 text-sm font-bold shadow-lg shadow-primary/10`} onClick={() => handleInstallFFmpeg(false)} disabled={isInstallingFFmpeg}>
                                 {isInstallingFFmpeg ? "Installing..." : "Install now"}
-                            </Button>
-                        )}
+                            </Button>)}
                     </DialogFooter>
                 </DialogContent>
             </Dialog>

frontend/src/components/AboutPage.tsx

@@ -15,7 +15,6 @@ import KofiLogo from "@/assets/ko-fi.gif";
 import KofiSvg from "@/assets/kofi_symbol.svg";
 import UsdtBarcode from "@/assets/usdt.jpg";
 import { langColors } from "@/assets/github-lang-colors";
-
 export function AboutPage() {
     const [activeTab, setActiveTab] = useState<"projects" | "support">("projects");
     const [repoStats, setRepoStats] = useState<Record<string, any>>({});
@@ -248,9 +247,9 @@ export function AboutPage() {
                 {repoStats["SpotiFLAC-Next"] && (<CardContent className="space-y-2">
                     {repoStats["SpotiFLAC-Next"].languages?.length > 0 && (<div className="flex flex-wrap gap-2 text-xs">
                         {repoStats["SpotiFLAC-Next"].languages.map((lang: string) => (<span key={lang} className="px-2 py-0.5 rounded-full font-medium" style={{
-                        backgroundColor: getLangColor(lang) + "20",
-                        color: getLangColor(lang),
-                    }}>
+                            backgroundColor: getLangColor(lang) + "20",
+                            color: getLangColor(lang),
+                        }}>
                             {lang}
                           </span>))}
                       </div>)}

frontend/src/components/AudioAnalysis.tsx

@@ -3,7 +3,6 @@ import { Spinner } from "@/components/ui/spinner";
 import { Button } from "@/components/ui/button";
 import { Activity } from "lucide-react";
 import type { AnalysisResult } from "@/types/api";
-
 interface AudioAnalysisProps {
     result: AnalysisResult | null;
     analyzing: boolean;
@@ -11,83 +10,65 @@ interface AudioAnalysisProps {
     showAnalyzeButton?: boolean;
     filePath?: string;
 }
-
 export function AudioAnalysis({ result, analyzing, onAnalyze, showAnalyzeButton = true, filePath }: AudioAnalysisProps) {
     if (analyzing) {
-        return (
-            <Card>
+        return (<Card>
                 <CardContent className="px-6">
                     <div className="flex items-center justify-center py-8 gap-3">
                         <Spinner />
                         <span className="text-muted-foreground">Analyzing audio quality...</span>
                     </div>
                 </CardContent>
-            </Card>
-        );
+            </Card>);
     }
-
     if (!result && showAnalyzeButton) {
-        return (
-            <Card>
+        return (<Card>
                 <CardContent className="px-6">
                     <div className="flex flex-col items-center justify-center py-8 gap-4">
-                        <Activity className="h-12 w-12 text-primary" />
+                        <Activity className="h-12 w-12 text-primary"/>
                         <div className="text-center space-y-2">
                             <p className="font-medium">Audio Quality Analysis</p>
                             <p className="text-sm text-muted-foreground">
                                 Inspect spectral content and effective quality of FLAC, MP3, M4A, and AAC files
                             </p>
                         </div>
-                        {onAnalyze && (
-                            <Button onClick={onAnalyze}>
-                                <Activity className="h-4 w-4" />
+                        {onAnalyze && (<Button onClick={onAnalyze}>
+                                <Activity className="h-4 w-4"/>
                                 Analyze Audio
-                            </Button>
-                        )}
+                            </Button>)}
                     </div>
                 </CardContent>
-            </Card>
-        );
+            </Card>);
     }
-
     if (!result) {
         return null;
     }
-
     const formatDuration = (seconds: number) => {
         const mins = Math.floor(seconds / 60);
         const secs = Math.floor(seconds % 60);
         return `${mins}:${secs.toString().padStart(2, "0")}`;
     };
-
     const formatNumber = (num: number) => {
         return num.toFixed(2);
     };
-
     const formatFileSize = (bytes: number): string => {
-        if (bytes === 0) return "0 B";
+        if (bytes === 0)
+            return "0 B";
         const k = 1024;
         const sizes = ["B", "KB", "MB", "GB"];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
     };
-
     const nyquistFreq = result.sample_rate / 2;
     const totalSamplesText = result.total_samples > 0 ? result.total_samples.toLocaleString() : "N/A";
     const freqResolutionLabel = result.file_type === "MP3" ? "Freq Res.:" : "Freq Resolution:";
-    const hasCodecMeta = result.file_type === "MP3" && (
-        Boolean(result.codec_mode) ||
+    const hasCodecMeta = result.file_type === "MP3" && (Boolean(result.codec_mode) ||
         typeof result.bitrate_kbps === "number" ||
         typeof result.total_frames === "number" ||
-        Boolean(result.codec_version)
-    );
-
-    return (
-        <Card className="gap-2">
+        Boolean(result.codec_version));
+    return (<Card className="gap-2">
             <CardHeader className="pb-2">
-                {filePath && (
-                    <p className="text-sm font-mono break-all text-muted-foreground">{filePath}</p>
-                )}
+                {filePath && (<p className="text-sm font-mono break-all text-muted-foreground">{filePath}</p>)}
             </CardHeader>
 
             <CardContent>
@@ -95,12 +76,10 @@ export function AudioAnalysis({ result, analyzing, onAnalyze, showAnalyzeButton
                     <div className="space-y-2">
                         <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Format</p>
                         <ul className="text-sm space-y-1">
-                            {result.file_type && (
-                                <li className="flex justify-between">
+                            {result.file_type && (<li className="flex justify-between">
                                     <span className="text-muted-foreground">Type:</span>
                                     <span className="font-medium font-mono">{result.file_type}</span>
-                                </li>
-                            )}
+                                </li>)}
                             <li className="flex justify-between">
                                 <span className="text-muted-foreground">Sample Rate:</span>
                                 <span className="font-medium font-mono">{(result.sample_rate / 1000).toFixed(1)} kHz</span>
@@ -117,12 +96,10 @@ export function AudioAnalysis({ result, analyzing, onAnalyze, showAnalyzeButton
                                 <span className="text-muted-foreground">Duration:</span>
                                 <span className="font-medium font-mono">{formatDuration(result.duration)}</span>
                             </li>
-                            {result.file_size > 0 && (
-                                <li className="flex justify-between">
+                            {result.file_size > 0 && (<li className="flex justify-between">
                                     <span className="text-muted-foreground">Size:</span>
                                     <span className="font-medium font-mono">{formatFileSize(result.file_size)}</span>
-                                </li>
-                            )}
+                                </li>)}
                         </ul>
                     </div>
 
@@ -152,45 +129,33 @@ export function AudioAnalysis({ result, analyzing, onAnalyze, showAnalyzeButton
                         </ul>
                     </div>
 
-                    {hasCodecMeta && (
-                        <div className="space-y-2">
+                    {hasCodecMeta && (<div className="space-y-2">
                             <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">MP3 Meta</p>
                             <ul className="text-sm space-y-1">
-                                {result.codec_mode && (
-                                    <li className="flex justify-between">
+                                {result.codec_mode && (<li className="flex justify-between">
                                         <span className="text-muted-foreground">Mode:</span>
                                         <span className="font-medium font-mono">{result.codec_mode}</span>
-                                    </li>
-                                )}
-                                {typeof result.bitrate_kbps === "number" && (
-                                    <li className="flex justify-between">
+                                    </li>)}
+                                {typeof result.bitrate_kbps === "number" && (<li className="flex justify-between">
                                         <span className="text-muted-foreground">Bitrate:</span>
                                         <span className="font-medium font-mono">{result.bitrate_kbps} kbps</span>
-                                    </li>
-                                )}
-                                {typeof result.total_frames === "number" && result.total_frames > 0 && (
-                                    <li className="flex justify-between">
+                                    </li>)}
+                                {typeof result.total_frames === "number" && result.total_frames > 0 && (<li className="flex justify-between">
                                         <span className="text-muted-foreground">Frames:</span>
                                         <span className="font-medium font-mono">{result.total_frames.toLocaleString()}</span>
-                                    </li>
-                                )}
-                                {result.codec_version && (
-                                    <li className="flex justify-between">
+                                    </li>)}
+                                {result.codec_version && (<li className="flex justify-between">
                                         <span className="text-muted-foreground">Version:</span>
                                         <span className="font-medium font-mono">{result.codec_version}</span>
-                                    </li>
-                                )}
+                                    </li>)}
                             </ul>
-                        </div>
-                    )}
+                        </div>)}
 
                     {result.spectrum && (() => {
-                        const frames = result.spectrum.time_slices.length;
-                        const fftSize = (result.spectrum.freq_bins - 1) * 2;
-                        const freqRes = result.sample_rate / fftSize;
-
-                        return (
-                            <div className="space-y-2">
+            const frames = result.spectrum.time_slices.length;
+            const fftSize = (result.spectrum.freq_bins - 1) * 2;
+            const freqRes = result.sample_rate / fftSize;
+            return (<div className="space-y-2">
                                 <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Spectrum Meta</p>
                                 <ul className="text-sm space-y-1">
                                     <li className="flex justify-between">
@@ -206,11 +171,9 @@ export function AudioAnalysis({ result, analyzing, onAnalyze, showAnalyzeButton
                                         <span className="font-medium font-mono">{freqRes.toFixed(2)} Hz/bin</span>
                                     </li>
                                 </ul>
-                            </div>
-                        );
-                    })()}
+                            </div>);
+        })()}
                 </div>
             </CardContent>
-        </Card>
-    );
+        </Card>);
 }

frontend/src/components/AudioAnalysisPage.tsx

@@ -8,11 +8,9 @@ import { useAudioAnalysis } from "@/hooks/useAudioAnalysis";
 import { toastWithSound as toast } from "@/lib/toast-with-sound";
 import { SelectFile, SaveSpectrumImage } from "../../wailsjs/go/main/App";
 import { OnFileDrop, OnFileDropOff } from "../../wailsjs/runtime/runtime";
-
 interface AudioAnalysisPageProps {
     onBack?: () => void;
 }
-
 const SUPPORTED_AUDIO_EXTENSIONS = [".flac", ".mp3", ".m4a", ".aac"];
 const SUPPORTED_AUDIO_ACCEPT = [
     ".flac",
@@ -29,17 +27,14 @@ const SUPPORTED_AUDIO_ACCEPT = [
     "audio/aacp",
 ].join(",");
 const SUPPORTED_AUDIO_LABEL = "FLAC, MP3, M4A, or AAC";
-
 function isSupportedAudioPath(filePath: string): boolean {
     const normalized = filePath.toLowerCase();
     return SUPPORTED_AUDIO_EXTENSIONS.some((ext) => normalized.endsWith(ext));
 }
-
 function isSupportedAudioFile(file: File): boolean {
     const normalizedName = file.name.toLowerCase();
     const normalizedType = file.type.toLowerCase();
-    return (
-        SUPPORTED_AUDIO_EXTENSIONS.some((ext) => normalizedName.endsWith(ext)) ||
+    return (SUPPORTED_AUDIO_EXTENSIONS.some((ext) => normalizedName.endsWith(ext)) ||
         normalizedType === "audio/flac" ||
         normalizedType === "audio/x-flac" ||
         normalizedType === "audio/mpeg" ||
@@ -47,38 +42,23 @@ function isSupportedAudioFile(file: File): boolean {
         normalizedType === "audio/mp4" ||
         normalizedType === "audio/x-m4a" ||
         normalizedType === "audio/aac" ||
-        normalizedType === "audio/aacp"
-    );
+        normalizedType === "audio/aacp");
 }
-
 function isAbsolutePath(filePath: string): boolean {
     return /^(?:[a-zA-Z]:[\\/]|\\\\|\/)/.test(filePath);
 }
-
 function fileNameFromPath(filePath: string): string {
     const parts = filePath.split(/[/\\]/);
     return parts[parts.length - 1] || filePath;
 }
-
 export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
-    const {
-        analyzing,
-        analysisProgress,
-        result,
-        analyzeFile,
-        analyzeFilePath,
-        clearResult,
-        selectedFilePath,
-        spectrumLoading,
-        spectrumProgress,
-        reAnalyzeSpectrum,
-    } = useAudioAnalysis();
-
+    const { analyzing, analysisProgress, result, analyzeFile, analyzeFilePath, clearResult, selectedFilePath, spectrumLoading, spectrumProgress, reAnalyzeSpectrum, } = useAudioAnalysis();
     const [isDragging, setIsDragging] = useState(false);
     const [isExporting, setIsExporting] = useState(false);
     const fileInputRef = useRef<HTMLInputElement>(null);
-    const spectrumRef = useRef<{ getCanvasDataURL: () => string | null; }>(null);
-
+    const spectrumRef = useRef<{
+        getCanvasDataURL: () => string | null;
+    }>(null);
     const analyzeSelectedPath = useCallback(async (filePath: string) => {
         if (!isSupportedAudioPath(filePath)) {
             toast.error("Invalid File Type", {
@@ -88,7 +68,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
         }
         await analyzeFilePath(filePath);
     }, [analyzeFilePath]);
-
     const analyzeSelectedFile = useCallback(async (file: File) => {
         if (!isSupportedAudioFile(file)) {
             toast.error("Invalid File Type", {
@@ -98,7 +77,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
         }
         await analyzeFile(file);
     }, [analyzeFile]);
-
     const handleSelectFile = useCallback(async () => {
         try {
             const filePath = await SelectFile();
@@ -106,48 +84,46 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
                 return;
             }
             await analyzeSelectedPath(filePath);
-        } catch {
+        }
+        catch {
             fileInputRef.current?.click();
         }
     }, [analyzeSelectedPath]);
-
     const handleInputChange = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
-        if (!file) return;
+        if (!file)
+            return;
         await analyzeSelectedFile(file);
         e.target.value = "";
     }, [analyzeSelectedFile]);
-
     const handleHtmlDrop = useCallback(async (e: DragEvent<HTMLDivElement>) => {
         e.preventDefault();
         setIsDragging(false);
         const file = e.dataTransfer.files?.[0];
-        if (!file) return;
+        if (!file)
+            return;
         await analyzeSelectedFile(file);
     }, [analyzeSelectedFile]);
-
     useEffect(() => {
         OnFileDrop((_x, _y, paths) => {
             setIsDragging(false);
             const droppedPath = paths?.[0];
-            if (!droppedPath) return;
+            if (!droppedPath)
+                return;
             void analyzeSelectedPath(droppedPath);
         }, true);
-
         return () => {
             OnFileDropOff();
         };
     }, [analyzeSelectedPath]);
-
     const handleExport = useCallback(async () => {
-        if (!spectrumRef.current) return;
-
+        if (!spectrumRef.current)
+            return;
         const dataUrl = spectrumRef.current.getCanvasDataURL();
         if (!dataUrl) {
             toast.error("Export Failed", { description: "Cannot get canvas data" });
             return;
         }
-
         setIsExporting(true);
         try {
             if (selectedFilePath && isAbsolutePath(selectedFilePath)) {
@@ -157,7 +133,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
                 });
                 return;
             }
-
             const base = selectedFilePath
                 ? fileNameFromPath(selectedFilePath).replace(/\.[^/.]+$/, "")
                 : "spectrogram";
@@ -170,128 +145,82 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
             toast.success("Exported Successfully", {
                 description: "Spectrogram image downloaded",
             });
-        } catch (err) {
+        }
+        catch (err) {
             toast.error("Export Failed", {
                 description: err instanceof Error ? err.message : "Failed to export image",
             });
-        } finally {
+        }
+        finally {
             setIsExporting(false);
         }
     }, [selectedFilePath]);
-
     const handleAnalyzeAnother = () => {
         clearResult();
     };
-
     const fileName = selectedFilePath ? fileNameFromPath(selectedFilePath) : undefined;
-
-    return (
-        <div className="space-y-6">
-            <input
-                ref={fileInputRef}
-                type="file"
-                accept={SUPPORTED_AUDIO_ACCEPT}
-                className="hidden"
-                onChange={handleInputChange}
-            />
+    return (<div className="space-y-6">
+            <input ref={fileInputRef} type="file" accept={SUPPORTED_AUDIO_ACCEPT} className="hidden" onChange={handleInputChange}/>
 
             <div className="flex items-center justify-between">
                 <div className="flex items-center gap-4">
-                    {onBack && (
-                        <Button variant="ghost" size="icon" onClick={onBack}>
-                            <ArrowLeft className="h-5 w-5" />
-                        </Button>
-                    )}
+                    {onBack && (<Button variant="ghost" size="icon" onClick={onBack}>
+                            <ArrowLeft className="h-5 w-5"/>
+                        </Button>)}
                     <h1 className="text-2xl font-bold">Audio Quality Analyzer</h1>
                 </div>
-                {result && (
-                    <div className="flex gap-2">
-                        <Button
-                            onClick={handleExport}
-                            variant="outline"
-                            size="sm"
-                            disabled={isExporting || spectrumLoading}
-                        >
-                            <Download className="h-4 w-4 mr-1" />
+                {result && (<div className="flex gap-2">
+                        <Button onClick={handleExport} variant="outline" size="sm" disabled={isExporting || spectrumLoading}>
+                            <Download className="h-4 w-4 mr-1"/>
                             {isExporting ? "Exporting..." : "Export PNG"}
                         </Button>
                         <Button onClick={handleAnalyzeAnother} variant="outline" size="sm">
-                            <Trash2 className="h-4 w-4 mr-1" />
+                            <Trash2 className="h-4 w-4 mr-1"/>
                             Clear
                         </Button>
-                    </div>
-                )}
+                    </div>)}
             </div>
 
-            {!result && !analyzing && (
-                <div
-                    className={`flex flex-col items-center justify-center h-[400px] border-2 border-dashed rounded-lg transition-colors ${
-                        isDragging
-                            ? "border-primary bg-primary/10"
-                            : "border-muted-foreground/30"
-                    }`}
-                    onDragOver={(e) => {
-                        e.preventDefault();
-                        setIsDragging(true);
-                    }}
-                    onDragLeave={(e) => {
-                        e.preventDefault();
-                        setIsDragging(false);
-                    }}
-                    onDrop={handleHtmlDrop}
-                    style={{ "--wails-drop-target": "drop" } as CSSProperties}
-                >
+            {!result && !analyzing && (<div className={`flex flex-col items-center justify-center h-[400px] border-2 border-dashed rounded-lg transition-colors ${isDragging
+                ? "border-primary bg-primary/10"
+                : "border-muted-foreground/30"}`} onDragOver={(e) => {
+                e.preventDefault();
+                setIsDragging(true);
+            }} onDragLeave={(e) => {
+                e.preventDefault();
+                setIsDragging(false);
+            }} onDrop={handleHtmlDrop} style={{ "--wails-drop-target": "drop" } as CSSProperties}>
                     <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
-                        <Upload className="h-8 w-8 text-primary" />
+                        <Upload className="h-8 w-8 text-primary"/>
                     </div>
                     <p className="text-sm text-muted-foreground mb-4 text-center">
                         {isDragging
-                            ? "Drop your audio file here"
-                            : "Drag and drop an audio file here, or click the button below to select"}
+                ? "Drop your audio file here"
+                : "Drag and drop an audio file here, or click the button below to select"}
                     </p>
                     <Button onClick={handleSelectFile} size="lg">
-                        <Upload className="h-5 w-5" />
+                        <Upload className="h-5 w-5"/>
                         Select Audio File
                     </Button>
                     <p className="text-xs text-muted-foreground mt-4 text-center">
                         Supported formats: FLAC, MP3, M4A, AAC
                     </p>
-                </div>
-            )}
+                </div>)}
 
-            {analyzing && !result && (
-                <div className="flex h-[400px] items-center justify-center">
+            {analyzing && !result && (<div className="flex h-[400px] items-center justify-center">
                     <div className="w-full max-w-md space-y-2">
                         <div className="flex items-center justify-between text-sm text-muted-foreground">
                             <span>Processing...</span>
                             <span className="tabular-nums">{analysisProgress.percent}%</span>
                         </div>
-                        <Progress value={analysisProgress.percent} className="h-2 w-full" />
+                        <Progress value={analysisProgress.percent} className="h-2 w-full"/>
                     </div>
-                </div>
-            )}
+                </div>)}
 
-            {result && (
-                <div className="space-y-4">
-                    <AudioAnalysis
-                        result={result}
-                        analyzing={analyzing}
-                        showAnalyzeButton={false}
-                        filePath={selectedFilePath}
-                    />
+            {result && (<div className="space-y-4">
+                    <AudioAnalysis result={result} analyzing={analyzing} showAnalyzeButton={false} filePath={selectedFilePath}/>
 
-                    <SpectrumVisualization
-                        ref={spectrumRef}
-                        sampleRate={result.sample_rate}
-                        duration={result.duration}
-                        spectrumData={result.spectrum}
-                        fileName={fileName}
-                        onReAnalyze={reAnalyzeSpectrum}
-                        isAnalyzingSpectrum={spectrumLoading}
-                        spectrumProgress={spectrumProgress}
-                    />
-                </div>
-            )}
-        </div>
-    );
+                    <SpectrumVisualization ref={spectrumRef} sampleRate={result.sample_rate} duration={result.duration} spectrumData={result.spectrum} fileName={fileName} onReAnalyze={reAnalyzeSpectrum} isAnalyzingSpectrum={spectrumLoading} spectrumProgress={spectrumProgress}/>
+                </div>)}
+        </div>);
 }

frontend/src/components/AudioResamplerPage.tsx

@@ -8,7 +8,6 @@ import { SelectAudioFiles, SelectFolder, ListAudioFilesInDir, ResampleAudio } fr
 import { toastWithSound as toast } from "@/lib/toast-with-sound";
 import { OnFileDrop, OnFileDropOff } from "../../wailsjs/runtime/runtime";
 import { AudioLinesIcon } from "@/components/ui/audio-lines";
-
 interface AudioFile {
     path: string;
     name: string;
@@ -20,7 +19,6 @@ interface AudioFile {
     srcSampleRate?: number;
     srcBitDepth?: number;
 }
-
 function formatFileSize(bytes: number): string {
     if (bytes === 0)
         return "0 B";
@@ -29,7 +27,6 @@ function formatFileSize(bytes: number): string {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
 }
-
 function formatSampleRate(sr: number): string {
     if (!sr)
         return "";
@@ -39,21 +36,17 @@ function formatSampleRate(sr: number): string {
         return `${sr / 1000}kHz`;
     return `${sr}Hz`;
 }
-
 const SAMPLE_RATE_OPTIONS = [
     { value: "44100", label: "44.1kHz" },
     { value: "48000", label: "48kHz" },
     { value: "96000", label: "96kHz" },
     { value: "192000", label: "192kHz" },
 ];
-
 const BIT_DEPTH_OPTIONS = [
     { value: "16", label: "16-bit" },
     { value: "24", label: "24-bit" },
 ];
-
 const STORAGE_KEY = "spotiflac_audio_resampler_state";
-
 export function AudioResamplerPage() {
     const [files, setFiles] = useState<AudioFile[]>(() => {
         try {
@@ -132,8 +125,11 @@ export function AudioResamplerPage() {
             return;
         try {
             const GetFlacInfoBatch = (window as any)["go"]["main"]["App"]["GetFlacInfoBatch"];
-            const infos: Array<{ path: string; sample_rate: number; bits_per_sample: number; }> =
-                await GetFlacInfoBatch(paths);
+            const infos: Array<{
+                path: string;
+                sample_rate: number;
+                bits_per_sample: number;
+            }> = await GetFlacInfoBatch(paths);
             setFiles((prev) => prev.map((f) => {
                 const info = infos.find((i) => i.path === f.path || i.path.toLowerCase() === f.path.toLowerCase());
                 if (info) {
@@ -389,9 +385,9 @@ export function AudioResamplerPage() {
                         <div className="flex items-center gap-2">
                             <Label className="whitespace-nowrap">Bit Depth:</Label>
                             <ToggleGroup type="single" variant="outline" value={bitDepth} onValueChange={(value) => {
-                    if (value)
-                        setBitDepth(value);
-                }}>
+                if (value)
+                    setBitDepth(value);
+            }}>
                                 {BIT_DEPTH_OPTIONS.map((option) => (<ToggleGroupItem key={option.value} value={option.value} aria-label={option.label}>
                                         {option.label}
                                     </ToggleGroupItem>))}
@@ -401,9 +397,9 @@ export function AudioResamplerPage() {
                         <div className="flex items-center gap-2">
                             <Label className="whitespace-nowrap">Sample Rate:</Label>
                             <ToggleGroup type="single" variant="outline" value={sampleRate} onValueChange={(value) => {
-                    if (value)
-                        setSampleRate(value);
-                }}>
+                if (value)
+                    setSampleRate(value);
+            }}>
                                 {SAMPLE_RATE_OPTIONS.map((option) => (<ToggleGroupItem key={option.value} value={option.value} aria-label={option.label}>
                                         {option.label}
                                     </ToggleGroupItem>))}
@@ -420,13 +416,13 @@ export function AudioResamplerPage() {
 
                 <div className="flex-1 space-y-2 overflow-y-auto min-h-0">
                     {files.map((file) => {
-            const srcParts: string[] = [];
-            if (file.srcBitDepth)
-                srcParts.push(`${file.srcBitDepth}-bit`);
-            if (file.srcSampleRate)
-                srcParts.push(formatSampleRate(file.srcSampleRate));
-            const srcSpec = srcParts.join(" / ");
-            return (<div key={file.path} className="flex items-center gap-3 rounded-lg border p-3">
+                const srcParts: string[] = [];
+                if (file.srcBitDepth)
+                    srcParts.push(`${file.srcBitDepth}-bit`);
+                if (file.srcSampleRate)
+                    srcParts.push(formatSampleRate(file.srcSampleRate));
+                const srcSpec = srcParts.join(" / ");
+                return (<div key={file.path} className="flex items-center gap-3 rounded-lg border p-3">
                                     {getStatusIcon(file.status)}
                                     <div className="flex-1 min-w-0">
                                         <p className="truncate text-sm font-medium">{file.name}</p>
@@ -451,7 +447,7 @@ export function AudioResamplerPage() {
                                             <X className="h-4 w-4"/>
                                         </Button>)}
                                 </div>);
-        })}
+            })}
                 </div>
 
                 <div className="flex justify-center pt-4 border-t shrink-0">

frontend/src/components/SettingsPage.tsx

@@ -130,12 +130,14 @@ export function SettingsPage({ onUnsavedChangesChange, onResetRequest, }: Settin
       <div className="flex items-center justify-between shrink-0">
         <h1 className="text-2xl font-bold">Settings</h1>
         <div className="flex gap-2">
-          <Button variant="outline" onClick={async () => { try {
-        await OpenConfigFolder();
-    }
-    catch (e) {
-        toast.error(`Failed to open config folder: ${e}`);
-    } }} className="gap-1.5">
+          <Button variant="outline" onClick={async () => {
+            try {
+                await OpenConfigFolder();
+            }
+            catch (e) {
+                toast.error(`Failed to open config folder: ${e}`);
+            }
+        }} className="gap-1.5">
             <FolderLock className="h-4 w-4"/>
             Open Config Folder
           </Button>

frontend/src/components/Sidebar.tsx

@@ -17,18 +17,15 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 import { openExternal } from "@/lib/utils";
-
 export type PageType = "main" | "settings" | "debug" | "audio-analysis" | "audio-converter" | "audio-resampler" | "file-manager" | "about" | "history";
 interface SidebarProps {
     currentPage: PageType;
     onPageChange: (page: PageType) => void;
 }
-
 interface AnimatedIconHandle {
     startAnimation: () => void;
     stopAnimation: () => void;
 }
-
 export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
     const [isIssuesDialogOpen, setIsIssuesDialogOpen] = useState(false);
     const [hasIssueAgreement, setHasIssueAgreement] = useState(false);

frontend/src/components/SpectrumVisualization.tsx

@@ -2,25 +2,11 @@ import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from "re
 import type { SpectrumData } from "@/types/api";
 import { Label } from "@/components/ui/label";
 import { Progress } from "@/components/ui/progress";
-import {
-    loadAudioAnalysisPreferences,
-    saveAudioAnalysisPreferences,
-    type AnalyzerColorScheme,
-    type AnalyzerFreqScale,
-    type AnalyzerWindowFunction,
-} from "@/lib/audio-analysis-preferences";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select";
-
+import { loadAudioAnalysisPreferences, saveAudioAnalysisPreferences, type AnalyzerColorScheme, type AnalyzerFreqScale, type AnalyzerWindowFunction, } from "@/lib/audio-analysis-preferences";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
 export interface SpectrumVisualizationHandle {
     getCanvasDataURL: () => string | null;
 }
-
 interface SpectrumVisualizationProps {
     sampleRate: number;
     duration: number;
@@ -33,22 +19,26 @@ interface SpectrumVisualizationProps {
         message: string;
     };
 }
-
 type ColorScheme = AnalyzerColorScheme;
 type FreqScale = AnalyzerFreqScale;
 type WindowFunction = AnalyzerWindowFunction;
-
 const MARGIN = { top: 50, right: 120, bottom: 70, left: 90 };
 const CANVAS_W = 1100;
 const CANVAS_H = 600;
 const MAX_RENDER_HEIGHT = 1080;
-
 function clamp01(value: number): number {
     return Math.max(0, Math.min(1, value));
 }
-
-function spekColorMap(t: number): [number, number, number] {
-    const colors: Array<[number, number, number]> = [
+function spekColorMap(t: number): [
+    number,
+    number,
+    number
+] {
+    const colors: Array<[
+        number,
+        number,
+        number
+    ]> = [
         [0, 0, 0],
         [0, 0, 25],
         [0, 0, 50],
@@ -73,15 +63,12 @@ function spekColorMap(t: number): [number, number, number] {
         [255, 255, 200],
         [255, 255, 255],
     ];
-
     const scaled = t * (colors.length - 1);
     const idx = Math.floor(scaled);
     const fraction = scaled - idx;
-
     if (idx >= colors.length - 1) {
         return colors[colors.length - 1];
     }
-
     const c1 = colors[idx];
     const c2 = colors[idx + 1];
     return [
@@ -90,9 +77,16 @@ function spekColorMap(t: number): [number, number, number] {
         Math.round(c1[2] + (c2[2] - c1[2]) * fraction),
     ];
 }
-
-function viridisColorMap(t: number): [number, number, number] {
-    const colors: Array<[number, number, number]> = [
+function viridisColorMap(t: number): [
+    number,
+    number,
+    number
+] {
+    const colors: Array<[
+        number,
+        number,
+        number
+    ]> = [
         [68, 1, 84],
         [70, 20, 100],
         [72, 40, 120],
@@ -113,15 +107,12 @@ function viridisColorMap(t: number): [number, number, number] {
         [216, 227, 41],
         [253, 231, 37],
     ];
-
     const scaled = t * (colors.length - 1);
     const idx = Math.floor(scaled);
     const fraction = scaled - idx;
-
     if (idx >= colors.length - 1) {
         return colors[colors.length - 1];
     }
-
     const c1 = colors[idx];
     const c2 = colors[idx + 1];
     return [
@@ -130,8 +121,11 @@ function viridisColorMap(t: number): [number, number, number] {
         Math.floor(c1[2] + (c2[2] - c1[2]) * fraction),
     ];
 }
-
-function hotColorMap(t: number): [number, number, number] {
+function hotColorMap(t: number): [
+    number,
+    number,
+    number
+] {
     if (t < 0.33) {
         return [Math.floor(t * 3 * 255), 0, 0];
     }
@@ -140,12 +134,18 @@ function hotColorMap(t: number): [number, number, number] {
     }
     return [255, 255, Math.floor((t - 0.66) * 3 * 255)];
 }
-
-function coolColorMap(t: number): [number, number, number] {
+function coolColorMap(t: number): [
+    number,
+    number,
+    number
+] {
     return [Math.floor(t * 255), Math.floor((1 - t) * 255), 255];
 }
-
-function getColorValues(norm: number, scheme: ColorScheme): [number, number, number] {
+function getColorValues(norm: number, scheme: ColorScheme): [
+    number,
+    number,
+    number
+] {
     const value = clamp01(norm);
     switch (scheme) {
         case "spek":
@@ -163,74 +163,61 @@ function getColorValues(norm: number, scheme: ColorScheme): [number, number, num
         }
     }
 }
-
 function getColorString(norm: number, scheme: ColorScheme): string {
     const [r, g, b] = getColorValues(norm, scheme);
     return `rgb(${r},${g},${b})`;
 }
-
-function addAxisLabels(
-    ctx: CanvasRenderingContext2D,
-    plotWidth: number,
-    plotHeight: number,
-    sampleRate: number,
-    duration: number,
-    freqScale: FreqScale,
-    fileName?: string,
-) {
+function addAxisLabels(ctx: CanvasRenderingContext2D, plotWidth: number, plotHeight: number, sampleRate: number, duration: number, freqScale: FreqScale, fileName?: string) {
     ctx.fillStyle = "#ffffff";
     ctx.font = "12px Segoe UI";
-
     ctx.textAlign = "center";
     const widthFactor = plotWidth / 1000;
     let timeStep: number;
-
     if (duration <= 10) {
         timeStep = widthFactor >= 1.8 ? 0.25 : (widthFactor >= 1.3 ? 0.5 : 0.5);
-    } else if (duration <= 30) {
+    }
+    else if (duration <= 30) {
         timeStep = widthFactor >= 1.8 ? 0.5 : (widthFactor >= 1.3 ? 1 : 1);
-    } else if (duration <= 120) {
+    }
+    else if (duration <= 120) {
         timeStep = widthFactor >= 1.8 ? 3 : (widthFactor >= 1.3 ? 4 : 5);
-    } else if (duration <= 600) {
+    }
+    else if (duration <= 600) {
         timeStep = widthFactor >= 1.8 ? 10 : (widthFactor >= 1.3 ? 15 : 20);
-    } else {
+    }
+    else {
         timeStep = widthFactor >= 1.8 ? 20 : (widthFactor >= 1.3 ? 30 : 40);
     }
-
     if (duration > 0) {
         for (let time = 0; time <= duration + 1e-9; time += timeStep) {
             const timeProgress = time / duration;
             const x = MARGIN.left + timeProgress * (plotWidth - 1);
             const y = CANVAS_H - MARGIN.bottom + 20;
-
             ctx.strokeStyle = "#ffffff";
             ctx.lineWidth = 1;
             ctx.beginPath();
             ctx.moveTo(x, MARGIN.top + plotHeight);
             ctx.lineTo(x, MARGIN.top + plotHeight + 5);
             ctx.stroke();
-
             let label: string;
             if (timeStep >= 60) {
                 const minutes = Math.floor(time / 60);
                 const seconds = time % 60;
                 label = seconds === 0 ? `${minutes}m` : `${minutes}m${seconds}s`;
-            } else {
+            }
+            else {
                 label = `${time}s`;
             }
             ctx.fillText(label, x, y);
         }
     }
-
     ctx.textAlign = "right";
     const maxFreq = sampleRate / 2;
-
     if (freqScale === "log2") {
         const heightFactor = plotHeight / 500;
         const minFreq = 20;
         const frequencies: number[] = [];
         const octaveStep = heightFactor >= 1.5 ? 1 : (heightFactor >= 1.0 ? 1 : 2);
-
         let octaveCount = 0;
         for (let freq = minFreq; freq <= maxFreq; freq *= 2) {
             if (octaveCount % octaveStep === 0) {
@@ -238,134 +225,106 @@ function addAxisLabels(
             }
             octaveCount++;
         }
-
         for (const freq of frequencies) {
             const freqNormalized = Math.log2(freq / minFreq) / Math.log2(maxFreq / minFreq);
             const y = MARGIN.top + plotHeight * (1 - freqNormalized);
-
             ctx.strokeStyle = "#ffffff";
             ctx.lineWidth = 1;
             ctx.beginPath();
             ctx.moveTo(MARGIN.left - 5, y);
             ctx.lineTo(MARGIN.left, y);
             ctx.stroke();
-
             const label = freq >= 1000 ? `${(freq / 1000).toFixed(1)}k` : `${freq}`;
             ctx.fillText(label, MARGIN.left - 10, y + 4);
         }
-    } else {
+    }
+    else {
         const heightFactor = plotHeight / 500;
         let freqStep: number;
-
         if (maxFreq <= 8000) {
             freqStep = heightFactor >= 1.8 ? 250 : (heightFactor >= 1.3 ? 400 : 500);
-        } else if (maxFreq <= 16000) {
+        }
+        else if (maxFreq <= 16000) {
             freqStep = heightFactor >= 1.8 ? 500 : (heightFactor >= 1.3 ? 800 : 1000);
-        } else if (maxFreq <= 24000) {
+        }
+        else if (maxFreq <= 24000) {
             freqStep = heightFactor >= 1.8 ? 1000 : (heightFactor >= 1.3 ? 1500 : 2000);
-        } else {
+        }
+        else {
             freqStep = heightFactor >= 1.8 ? 2000 : (heightFactor >= 1.3 ? 2500 : 4000);
         }
-
         for (let freq = 0; freq <= maxFreq; freq += freqStep) {
             const y = MARGIN.top + plotHeight - (freq / maxFreq) * plotHeight + 4;
             const x = MARGIN.left - 15;
-
             ctx.strokeStyle = "#ffffff";
             ctx.lineWidth = 1;
             ctx.beginPath();
             ctx.moveTo(MARGIN.left - 5, y - 4);
             ctx.lineTo(MARGIN.left, y - 4);
             ctx.stroke();
-
             let label: string;
             if (freq === 0) {
                 label = "0";
-            } else if (freq >= 1000) {
+            }
+            else if (freq >= 1000) {
                 label = freq % 1000 === 0 ? `${freq / 1000}k` : `${(freq / 1000).toFixed(1)}k`;
-            } else {
+            }
+            else {
                 label = `${freq}`;
             }
             ctx.fillText(label, x, y);
         }
     }
-
     ctx.textAlign = "center";
     ctx.font = "14px Segoe UI";
     ctx.fillText("Time (seconds)", CANVAS_W / 2, CANVAS_H - 15);
-
     ctx.save();
     ctx.translate(25, CANVAS_H / 2);
     ctx.rotate(-Math.PI / 2);
     ctx.fillText("Frequency (Hz)", 0, 0);
     ctx.restore();
-
     ctx.font = "12px Segoe UI";
     if (fileName) {
         ctx.textAlign = "left";
         ctx.fillText(fileName, MARGIN.left + 15, 25);
     }
-
     ctx.textAlign = "right";
     ctx.fillText(`Sample Rate: ${sampleRate} Hz`, CANVAS_W - 20, 25);
 }
-
-function drawColorBar(
-    ctx: CanvasRenderingContext2D,
-    plotHeight: number,
-    colorScheme: ColorScheme,
-) {
+function drawColorBar(ctx: CanvasRenderingContext2D, plotHeight: number, colorScheme: ColorScheme) {
     const colorBarWidth = 20;
     const colorBarX = CANVAS_W - MARGIN.right + 30;
     const colorBarY = MARGIN.top;
     const gradient = ctx.createLinearGradient(0, colorBarY + plotHeight, 0, colorBarY);
-
     for (let i = 0; i <= 100; i++) {
         const value = i / 100;
         gradient.addColorStop(value, getColorString(value, colorScheme));
     }
-
     ctx.fillStyle = gradient;
     ctx.fillRect(colorBarX, colorBarY, colorBarWidth, plotHeight);
-
     ctx.strokeStyle = "#ffffff";
     ctx.lineWidth = 1;
     ctx.strokeRect(colorBarX, colorBarY, colorBarWidth, plotHeight);
-
     ctx.fillStyle = "#ffffff";
     ctx.font = "10px Segoe UI";
     ctx.textAlign = "left";
     ctx.fillText("High", colorBarX + colorBarWidth + 5, colorBarY + 12);
     ctx.fillText("Low", colorBarX + colorBarWidth + 5, colorBarY + plotHeight - 5);
 }
-
-async function renderSpectrogram(
-    ctx: CanvasRenderingContext2D,
-    spectrum: SpectrumData,
-    sampleRate: number,
-    duration: number,
-    freqScale: FreqScale,
-    colorScheme: ColorScheme,
-    fileName: string | undefined,
-    shouldCancel: () => boolean,
-) {
+async function renderSpectrogram(ctx: CanvasRenderingContext2D, spectrum: SpectrumData, sampleRate: number, duration: number, freqScale: FreqScale, colorScheme: ColorScheme, fileName: string | undefined, shouldCancel: () => boolean) {
     const plotWidth = CANVAS_W - MARGIN.left - MARGIN.right;
     const plotHeight = CANVAS_H - MARGIN.top - MARGIN.bottom;
-
     ctx.fillStyle = "#000000";
     ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
-
     const spectrogramData = spectrum.time_slices;
     const numTimeFrames = spectrogramData.length;
     const numFreqBins = spectrogramData[0]?.magnitudes.length ?? 0;
     if (numTimeFrames === 0 || numFreqBins === 0) {
         return;
     }
-
     let minMag = Number.POSITIVE_INFINITY;
     let maxMag = Number.NEGATIVE_INFINITY;
     const sampleStep = numTimeFrames > 10000 ? Math.floor(numTimeFrames / 5000) : 1;
-
     for (let i = 0; i < numTimeFrames; i += sampleStep) {
         const frame = spectrogramData[i].magnitudes;
         for (const mag of frame) {
@@ -377,24 +336,19 @@ async function renderSpectrogram(
             }
         }
     }
-
     if (!Number.isFinite(minMag) || !Number.isFinite(maxMag)) {
         minMag = -120;
         maxMag = 0;
     }
-
     const magRange = maxMag - minMag;
     const safeMagRange = magRange > 0 ? magRange : 1;
-
     const highResImageData = ctx.createImageData(plotWidth, MAX_RENDER_HEIGHT);
     const highResData = highResImageData.data;
     const CHUNK_SIZE = 50;
-
     for (let xStart = 0; xStart < plotWidth; xStart += CHUNK_SIZE) {
         if (shouldCancel()) {
             return;
         }
-
         const xEnd = Math.min(xStart + CHUNK_SIZE, plotWidth);
         for (let x = xStart; x < xEnd; x++) {
             const timeProgress = x / (plotWidth - 1);
@@ -402,13 +356,10 @@ async function renderSpectrogram(
             const timeIdx = Math.floor(exactTimePos);
             const timeIdx2 = Math.min(timeIdx + 1, numTimeFrames - 1);
             const timeFrac = exactTimePos - timeIdx;
-
             const frame1 = spectrogramData[timeIdx]?.magnitudes ?? spectrogramData[0].magnitudes;
             const frame2 = spectrogramData[timeIdx2]?.magnitudes ?? frame1;
-
             for (let y = 0; y < MAX_RENDER_HEIGHT; y++) {
                 let freqProgress = (MAX_RENDER_HEIGHT - 1 - y) / (MAX_RENDER_HEIGHT - 1);
-
                 if (freqScale === "log2") {
                     const minFreq = 20;
                     const maxFreq = sampleRate / 2;
@@ -417,26 +368,23 @@ async function renderSpectrogram(
                     const freq = minFreq * Math.pow(2, octave);
                     freqProgress = freq / maxFreq;
                 }
-
                 const exactFreqPos = freqProgress * (numFreqBins - 1);
                 const freqIdx = Math.floor(exactFreqPos);
                 const freqIdx2 = Math.min(freqIdx + 1, numFreqBins - 1);
                 const freqFrac = exactFreqPos - freqIdx;
-
                 let magnitude: number;
                 if (timeFrac === 0 && freqFrac === 0) {
                     magnitude = frame1[freqIdx] ?? 0;
-                } else {
+                }
+                else {
                     const mag11 = frame1[freqIdx] ?? 0;
                     const mag12 = frame1[freqIdx2] ?? 0;
                     const mag21 = frame2[freqIdx] ?? 0;
                     const mag22 = frame2[freqIdx2] ?? 0;
-
                     const magT1 = mag11 * (1 - freqFrac) + mag12 * freqFrac;
                     const magT2 = mag21 * (1 - freqFrac) + mag22 * freqFrac;
                     magnitude = magT1 * (1 - timeFrac) + magT2 * timeFrac;
                 }
-
                 const normalizedMag = clamp01((magnitude - minMag) / safeMagRange);
                 const [r, g, b] = getColorValues(normalizedMag, colorScheme);
                 const pixelIdx = (y * plotWidth + x) * 4;
@@ -446,25 +394,20 @@ async function renderSpectrogram(
                 highResData[pixelIdx + 3] = 255;
             }
         }
-
         if (xStart + CHUNK_SIZE < plotWidth) {
             await new Promise((resolve) => setTimeout(resolve, 1));
         }
     }
-
     if (shouldCancel()) {
         return;
     }
-
     const finalImageData = ctx.createImageData(plotWidth, plotHeight);
     const finalData = finalImageData.data;
-
     for (let y = 0; y < plotHeight; y++) {
         for (let x = 0; x < plotWidth; x++) {
             const highResY = Math.round((y / plotHeight) * MAX_RENDER_HEIGHT);
             const highResIdx = (highResY * plotWidth + x) * 4;
             const finalIdx = (y * plotWidth + x) * 4;
-
             if (highResIdx < highResData.length) {
                 finalData[finalIdx] = highResData[highResIdx];
                 finalData[finalIdx + 1] = highResData[highResIdx + 1];
@@ -473,32 +416,24 @@ async function renderSpectrogram(
             }
         }
     }
-
     ctx.putImageData(finalImageData, MARGIN.left, MARGIN.top);
     addAxisLabels(ctx, plotWidth, plotHeight, sampleRate, duration, freqScale, fileName);
     drawColorBar(ctx, plotHeight, colorScheme);
 }
-
-const COLOR_SCHEMES: { value: ColorScheme; label: string; gradient: string; }[] = [
+const COLOR_SCHEMES: {
+    value: ColorScheme;
+    label: string;
+    gradient: string;
+}[] = [
     { value: "spek", label: "Spek", gradient: "linear-gradient(to right, #0f0040, #1e0080, #4000ff, #8000ff, #ff0080, #ff4000, #ff8000, #ffff00)" },
     { value: "viridis", label: "Viridis", gradient: "linear-gradient(to right, #440154, #31688e, #35b779, #fde725)" },
     { value: "hot", label: "Hot", gradient: "linear-gradient(to right, #000000, #ff0000, #ffff00, #ffffff)" },
     { value: "cool", label: "Cool", gradient: "linear-gradient(to right, #000080, #0000ff, #00ffff, #ffffff)" },
     { value: "grayscale", label: "Grayscale", gradient: "linear-gradient(to right, #000000, #ffffff)" },
 ];
-
-export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, SpectrumVisualizationProps>(({
-    sampleRate,
-    duration,
-    spectrumData,
-    fileName,
-    onReAnalyze,
-    isAnalyzingSpectrum,
-    spectrumProgress,
-}, ref) => {
+export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, SpectrumVisualizationProps>(({ sampleRate, duration, spectrumData, fileName, onReAnalyze, isAnalyzingSpectrum, spectrumProgress, }, ref) => {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const preferencesRef = useRef(loadAudioAnalysisPreferences());
-
     useImperativeHandle(ref, () => ({
         getCanvasDataURL: () => {
             if (!canvasRef.current)
@@ -506,18 +441,15 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
             return canvasRef.current.toDataURL("image/png");
         },
     }));
-
     const [freqScale, setFreqScale] = useState<FreqScale>(preferencesRef.current.freqScale);
     const [colorScheme, setColorScheme] = useState<ColorScheme>(preferencesRef.current.colorScheme);
     const [fftSize, setFftSize] = useState<string>(() => String(preferencesRef.current.fftSize));
     const [windowFunction, setWindowFunction] = useState<WindowFunction>(preferencesRef.current.windowFunction);
-
     useEffect(() => {
         if (spectrumData?.freq_bins) {
             setFftSize(String((spectrumData.freq_bins - 1) * 2));
         }
     }, [spectrumData]);
-
     useEffect(() => {
         saveAudioAnalysisPreferences({
             colorScheme,
@@ -526,7 +458,6 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
             windowFunction,
         });
     }, [colorScheme, freqScale, fftSize, windowFunction]);
-
     useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -534,22 +465,12 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
         const ctx = canvas.getContext("2d");
         if (!ctx)
             return;
-
         let canceled = false;
         const shouldCancel = () => canceled;
-
         if (spectrumData) {
-            void renderSpectrogram(
-                ctx,
-                spectrumData,
-                sampleRate,
-                duration,
-                freqScale,
-                colorScheme,
-                fileName,
-                shouldCancel,
-            );
-        } else {
+            void renderSpectrogram(ctx, spectrumData, sampleRate, duration, freqScale, colorScheme, fileName, shouldCancel);
+        }
+        else {
             ctx.fillStyle = "#000000";
             ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
             ctx.fillStyle = "#444444";
@@ -557,12 +478,10 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
             ctx.textAlign = "center";
             ctx.fillText("No spectrum data", CANVAS_W / 2, CANVAS_H / 2);
         }
-
         return () => {
             canceled = true;
         };
     }, [spectrumData, sampleRate, duration, freqScale, colorScheme, fileName]);
-
     const handleReAnalyze = (newFftSize: string, newWindowFunc: string) => {
         setFftSize(newFftSize);
         setWindowFunction(newWindowFunc as WindowFunction);
@@ -570,11 +489,8 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
             onReAnalyze(parseInt(newFftSize, 10), newWindowFunc);
         }
     };
-
     const spectrumPercent = Math.round(Math.max(0, Math.min(100, spectrumProgress?.percent ?? 0)));
-
-    return (
-        <div className="space-y-4">
+    return (<div className="space-y-4">
             <div className="flex flex-wrap items-center gap-3 sm:gap-4 p-1">
                 <div className="flex items-center gap-2">
                     <Label className="whitespace-nowrap text-sm font-medium">Color Scheme:</Label>
@@ -583,17 +499,12 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
                             <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
-                            {COLOR_SCHEMES.map((scheme) => (
-                                <SelectItem key={scheme.value} value={scheme.value}>
+                            {COLOR_SCHEMES.map((scheme) => (<SelectItem key={scheme.value} value={scheme.value}>
                                     <div className="flex items-center gap-2">
-                                        <div
-                                            className="h-4 w-4 rounded-sm border opacity-90"
-                                            style={{ backgroundImage: scheme.gradient }}
-                                        />
+                                        <div className="h-4 w-4 rounded-sm border opacity-90" style={{ backgroundImage: scheme.gradient }}/>
                                         <span>{scheme.label}</span>
                                     </div>
-                                </SelectItem>
-                            ))}
+                                </SelectItem>))}
                         </SelectContent>
                     </Select>
                 </div>
@@ -645,25 +556,16 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
             </div>
 
             <div className="relative border border-white/10 rounded-lg overflow-hidden bg-black shadow-xl">
-                {isAnalyzingSpectrum && (
-                    <div className="absolute inset-0 z-10 grid place-items-center bg-black/60 backdrop-blur-sm">
+                {isAnalyzingSpectrum && (<div className="absolute inset-0 z-10 grid place-items-center bg-black/60 backdrop-blur-sm">
                         <div className="w-full max-w-xs space-y-2 px-4">
                             <div className="flex items-center justify-between text-sm text-foreground/90">
                                 <span>Processing...</span>
                                 <span className="tabular-nums">{spectrumPercent}%</span>
                             </div>
-                            <Progress value={spectrumPercent} className="h-2 w-full" />
+                            <Progress value={spectrumPercent} className="h-2 w-full"/>
                         </div>
-                    </div>
-                )}
-                <canvas
-                    ref={canvasRef}
-                    width={CANVAS_W}
-                    height={CANVAS_H}
-                    className="w-full h-auto"
-                    style={{ imageRendering: "auto" }}
-                />
+                    </div>)}
+                <canvas ref={canvasRef} width={CANVAS_W} height={CANVAS_H} className="w-full h-auto" style={{ imageRendering: "auto" }}/>
             </div>
-        </div>
-    );
+        </div>);
 });

frontend/src/components/ui/audio-lines.tsx

@@ -1,138 +1,87 @@
 "use client";
-
 import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-
 import { cn } from "@/lib/utils";
-
 export interface AudioLinesIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
+    startAnimation: () => void;
+    stopAnimation: () => void;
 }
-
 interface AudioLinesIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
+    size?: number;
 }
-
-const AudioLinesIcon = forwardRef<AudioLinesIconHandle, AudioLinesIconProps>(
-  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+const AudioLinesIcon = forwardRef<AudioLinesIconHandle, AudioLinesIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
     const controls = useAnimation();
     const isControlledRef = useRef(false);
-
     useImperativeHandle(ref, () => {
-      isControlledRef.current = true;
-
-      return {
-        startAnimation: () => controls.start("animate"),
-        stopAnimation: () => controls.start("normal"),
-      };
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
     });
-
-    const handleMouseEnter = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (isControlledRef.current) {
-          onMouseEnter?.(e);
-        } else {
-          controls.start("animate");
+            onMouseEnter?.(e);
         }
-      },
-      [controls, onMouseEnter]
-    );
-
-    const handleMouseLeave = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (isControlledRef.current) {
-          onMouseLeave?.(e);
-        } else {
-          controls.start("normal");
+            onMouseLeave?.(e);
         }
-      },
-      [controls, onMouseLeave]
-    );
-
-    return (
-      <div
-        className={cn(className)}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        {...props}
-      >
-        <svg
-          fill="none"
-          height={size}
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          viewBox="0 0 24 24"
-          width={size}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M2 10v3" />
-          <motion.path
-            animate={controls}
-            d="M6 6v11"
-            variants={{
-              normal: { d: "M6 6v11" },
-              animate: {
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg fill="none" height={size} stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width={size} xmlns="http://www.w3.org/2000/svg">
+          <path d="M2 10v3"/>
+          <motion.path animate={controls} d="M6 6v11" variants={{
+            normal: { d: "M6 6v11" },
+            animate: {
                 d: ["M6 6v11", "M6 10v3", "M6 6v11"],
                 transition: {
-                  duration: 1.5,
-                  repeat: Number.POSITIVE_INFINITY,
+                    duration: 1.5,
+                    repeat: Number.POSITIVE_INFINITY,
                 },
-              },
-            }}
-          />
-          <motion.path
-            animate={controls}
-            d="M10 3v18"
-            variants={{
-              normal: { d: "M10 3v18" },
-              animate: {
+            },
+        }}/>
+          <motion.path animate={controls} d="M10 3v18" variants={{
+            normal: { d: "M10 3v18" },
+            animate: {
                 d: ["M10 3v18", "M10 9v5", "M10 3v18"],
                 transition: {
-                  duration: 1,
-                  repeat: Number.POSITIVE_INFINITY,
+                    duration: 1,
+                    repeat: Number.POSITIVE_INFINITY,
                 },
-              },
-            }}
-          />
-          <motion.path
-            animate={controls}
-            d="M14 8v7"
-            variants={{
-              normal: { d: "M14 8v7" },
-              animate: {
+            },
+        }}/>
+          <motion.path animate={controls} d="M14 8v7" variants={{
+            normal: { d: "M14 8v7" },
+            animate: {
                 d: ["M14 8v7", "M14 6v11", "M14 8v7"],
                 transition: {
-                  duration: 0.8,
-                  repeat: Number.POSITIVE_INFINITY,
+                    duration: 0.8,
+                    repeat: Number.POSITIVE_INFINITY,
                 },
-              },
-            }}
-          />
-          <motion.path
-            animate={controls}
-            d="M18 5v13"
-            variants={{
-              normal: { d: "M18 5v13" },
-              animate: {
+            },
+        }}/>
+          <motion.path animate={controls} d="M18 5v13" variants={{
+            normal: { d: "M18 5v13" },
+            animate: {
                 d: ["M18 5v13", "M18 7v9", "M18 5v13"],
                 transition: {
-                  duration: 1.5,
-                  repeat: Number.POSITIVE_INFINITY,
+                    duration: 1.5,
+                    repeat: Number.POSITIVE_INFINITY,
                 },
-              },
-            }}
-          />
-          <path d="M22 10v3" />
+            },
+        }}/>
+          <path d="M22 10v3"/>
         </svg>
-      </div>
-    );
-  }
-);
-
+      </div>);
+});
 AudioLinesIcon.displayName = "AudioLinesIcon";
-
 export { AudioLinesIcon };

frontend/src/hooks/useAudioAnalysis.ts

@@ -2,16 +2,9 @@ import { useState, useCallback, useRef, useEffect, type MutableRefObject } from
 import type { AnalysisResult } from "@/types/api";
 import { logger } from "@/lib/logger";
 import { toastWithSound as toast } from "@/lib/toast-with-sound";
-import {
-    analyzeAudioArrayBuffer,
-    analyzeAudioFile,
-    analyzeSpectrumFromSamples,
-    type AnalysisProgress,
-} from "@/lib/flac-analysis";
+import { analyzeAudioArrayBuffer, analyzeAudioFile, analyzeSpectrumFromSamples, type AnalysisProgress, } from "@/lib/flac-analysis";
 import { loadAudioAnalysisPreferences } from "@/lib/audio-analysis-preferences";
-
 type WindowFunction = "hann" | "hamming" | "blackman" | "rectangular";
-
 function toWindowFunction(value: string): WindowFunction {
     switch (value) {
         case "hamming":
@@ -23,87 +16,71 @@ function toWindowFunction(value: string): WindowFunction {
             return "hann";
     }
 }
-
 function fileNameFromPath(filePath: string): string {
     const parts = filePath.split(/[/\\]/);
     return parts[parts.length - 1] || filePath;
 }
-
 function nextUiTick(): Promise<void> {
     return new Promise((resolve) => setTimeout(resolve, 0));
 }
-
 async function base64ToArrayBuffer(base64: string, shouldCancel?: () => boolean): Promise<ArrayBuffer> {
     const clean = base64.includes(",") ? base64.split(",")[1] : base64;
     const padding = clean.endsWith("==") ? 2 : clean.endsWith("=") ? 1 : 0;
     const outputLength = Math.floor((clean.length * 3) / 4) - padding;
     const bytes = new Uint8Array(outputLength);
     const chunkSize = 4 * 16384;
-
     let writeOffset = 0;
     for (let offset = 0; offset < clean.length; offset += chunkSize) {
         if (shouldCancel?.()) {
             throw new Error("Analysis cancelled");
         }
-
         const chunk = clean.slice(offset, Math.min(clean.length, offset + chunkSize));
         const binary = atob(chunk);
         for (let i = 0; i < binary.length; i++) {
             bytes[writeOffset++] = binary.charCodeAt(i);
         }
-
         if ((offset / chunkSize) % 4 === 0) {
             await nextUiTick();
         }
     }
-
     return bytes.buffer;
 }
-
 let sessionResult: AnalysisResult | null = null;
 let sessionSelectedFilePath = "";
 let sessionError: string | null = null;
 let sessionSamples: Float32Array | null = null;
-
 interface ProgressState {
     percent: number;
     message: string;
 }
-
 const DEFAULT_PROGRESS_STATE: ProgressState = {
     percent: 0,
     message: "Preparing analysis...",
 };
-
 interface CancelToken {
     cancelled: boolean;
 }
-
 function cancelToken(tokenRef: MutableRefObject<CancelToken | null>): void {
     if (tokenRef.current) {
         tokenRef.current.cancelled = true;
         tokenRef.current = null;
     }
 }
-
 function createToken(tokenRef: MutableRefObject<CancelToken | null>): CancelToken {
     cancelToken(tokenRef);
     const token: CancelToken = { cancelled: false };
     tokenRef.current = token;
     return token;
 }
-
 function isCancelledError(error: unknown): boolean {
     return error instanceof Error && error.message === "Analysis cancelled";
 }
-
 function toProgressState(progress: AnalysisProgress): ProgressState {
     return {
         percent: Math.round(Math.max(0, Math.min(100, progress.percent))),
         message: progress.message,
     };
 }
-
 export function useAudioAnalysis() {
     const [analyzing, setAnalyzing] = useState(false);
     const [analysisProgress, setAnalysisProgress] = useState<ProgressState>(DEFAULT_PROGRESS_STATE);
@@ -115,35 +92,29 @@ export function useAudioAnalysis() {
     const samplesRef = useRef<Float32Array | null>(sessionSamples);
     const analysisTokenRef = useRef<CancelToken | null>(null);
     const spectrumTokenRef = useRef<CancelToken | null>(null);
-
     useEffect(() => {
         return () => {
             cancelToken(analysisTokenRef);
             cancelToken(spectrumTokenRef);
         };
     }, []);
-
     const setResultWithSession = useCallback((next: AnalysisResult | null) => {
         sessionResult = next;
         setResult(next);
     }, []);
-
     const setSelectedFilePathWithSession = useCallback((next: string) => {
         sessionSelectedFilePath = next;
         setSelectedFilePath(next);
     }, []);
-
     const setErrorWithSession = useCallback((next: string | null) => {
         sessionError = next;
         setError(next);
     }, []);
-
     const analyzeFile = useCallback(async (file: File) => {
         if (!file) {
             setErrorWithSession("No file provided");
             return null;
         }
-
         const token = createToken(analysisTokenRef);
         cancelToken(spectrumTokenRef);
         setAnalyzing(true);
@@ -154,7 +125,6 @@ export function useAudioAnalysis() {
         setErrorWithSession(null);
         setResultWithSession(null);
         setSelectedFilePathWithSession(file.name);
-
         try {
             logger.info(`Analyzing audio file (frontend): ${file.name}`);
             const start = Date.now();
@@ -163,22 +133,21 @@ export function useAudioAnalysis() {
                 fftSize: prefs.fftSize,
                 windowFunction: prefs.windowFunction,
             }, (progress) => {
-                if (token.cancelled) return;
+                if (token.cancelled)
+                    return;
                 setAnalysisProgress(toProgressState(progress));
             }, () => token.cancelled);
-
             if (token.cancelled) {
                 return null;
             }
-
             samplesRef.current = payload.samples;
             sessionSamples = payload.samples;
             setResultWithSession(payload.result);
-
             const elapsed = ((Date.now() - start) / 1000).toFixed(2);
             logger.success(`Audio analysis completed in ${elapsed}s`);
             return payload.result;
-        } catch (err) {
+        }
+        catch (err) {
             if (isCancelledError(err)) {
                 return null;
             }
@@ -193,20 +162,19 @@ export function useAudioAnalysis() {
                 description: errorMessage,
             });
             return null;
-        } finally {
+        }
+        finally {
             if (analysisTokenRef.current === token) {
                 analysisTokenRef.current = null;
                 setAnalyzing(false);
             }
         }
     }, [setErrorWithSession, setResultWithSession, setSelectedFilePathWithSession]);
-
     const analyzeFilePath = useCallback(async (filePath: string) => {
         if (!filePath) {
             setErrorWithSession("No file path provided");
             return null;
         }
-
         const token = createToken(analysisTokenRef);
         cancelToken(spectrumTokenRef);
         setAnalyzing(true);
@@ -217,19 +185,14 @@ export function useAudioAnalysis() {
         setErrorWithSession(null);
         setResultWithSession(null);
         setSelectedFilePathWithSession(filePath);
-
         try {
             logger.info(`Analyzing audio file (frontend from path): ${filePath}`);
             const start = Date.now();
             const prefs = loadAudioAnalysisPreferences();
-
-            const readFileAsBase64 = (window as any)?.go?.main?.App?.ReadFileAsBase64 as
-                | ((path: string) => Promise<string>)
-                | undefined;
+            const readFileAsBase64 = (window as any)?.go?.main?.App?.ReadFileAsBase64 as ((path: string) => Promise<string>) | undefined;
             if (!readFileAsBase64) {
                 throw new Error("ReadFileAsBase64 backend method is unavailable");
             }
-
             let base64Data = await readFileAsBase64(filePath);
             if (token.cancelled) {
                 return null;
@@ -248,39 +211,33 @@ export function useAudioAnalysis() {
                 message: "Preparing audio buffer...",
             });
             const fileName = fileNameFromPath(filePath);
-            const payload = await analyzeAudioArrayBuffer(
-                {
-                    fileName,
-                    fileSize: arrayBuffer.byteLength,
-                    arrayBuffer,
-                },
-                {
-                    fftSize: prefs.fftSize,
-                    windowFunction: prefs.windowFunction,
-                },
-                (progress) => {
-                    if (token.cancelled) return;
-                    const mappedPercent = 10 + (progress.percent * 0.9);
-                    setAnalysisProgress({
-                        percent: Math.round(Math.max(0, Math.min(100, mappedPercent))),
-                        message: progress.message,
-                    });
-                },
-                () => token.cancelled,
-            );
-
+            const payload = await analyzeAudioArrayBuffer({
+                fileName,
+                fileSize: arrayBuffer.byteLength,
+                arrayBuffer,
+            }, {
+                fftSize: prefs.fftSize,
+                windowFunction: prefs.windowFunction,
+            }, (progress) => {
+                if (token.cancelled)
+                    return;
+                const mappedPercent = 10 + (progress.percent * 0.9);
+                setAnalysisProgress({
+                    percent: Math.round(Math.max(0, Math.min(100, mappedPercent))),
+                    message: progress.message,
+                });
+            }, () => token.cancelled);
             if (token.cancelled) {
                 return null;
             }
-
             samplesRef.current = payload.samples;
             sessionSamples = payload.samples;
             setResultWithSession(payload.result);
-
             const elapsed = ((Date.now() - start) / 1000).toFixed(2);
             logger.success(`Audio analysis completed in ${elapsed}s`);
             return payload.result;
-        } catch (err) {
+        }
+        catch (err) {
             if (isCancelledError(err)) {
                 return null;
             }
@@ -295,17 +252,17 @@ export function useAudioAnalysis() {
                 description: errorMessage,
             });
             return null;
-        } finally {
+        }
+        finally {
             if (analysisTokenRef.current === token) {
                 analysisTokenRef.current = null;
                 setAnalyzing(false);
             }
         }
     }, [setErrorWithSession, setResultWithSession, setSelectedFilePathWithSession]);
-
     const reAnalyzeSpectrum = useCallback(async (fftSize: number, windowFunction: string) => {
-        if (!result || !samplesRef.current) return;
-
+        if (!result || !samplesRef.current)
+            return;
         const token = createToken(spectrumTokenRef);
         setSpectrumLoading(true);
         setSpectrumProgress({
@@ -318,10 +275,10 @@ export function useAudioAnalysis() {
                 fftSize,
                 windowFunction: toWindowFunction(windowFunction),
             }, (progress) => {
-                if (token.cancelled) return;
+                if (token.cancelled)
+                    return;
                 setSpectrumProgress(toProgressState(progress));
             }, () => token.cancelled);
-
             if (token.cancelled) {
                 return;
             }
@@ -330,7 +287,8 @@ export function useAudioAnalysis() {
                 sessionResult = next;
                 return next;
             });
-        } catch (err) {
+        }
+        catch (err) {
             if (isCancelledError(err)) {
                 return;
             }
@@ -343,14 +301,14 @@ export function useAudioAnalysis() {
             toast.error("Spectrum Analysis Failed", {
                 description: errorMessage,
             });
-        } finally {
+        }
+        finally {
             if (spectrumTokenRef.current === token) {
                 spectrumTokenRef.current = null;
                 setSpectrumLoading(false);
             }
         }
     }, [result]);
-
     const clearResult = useCallback(() => {
         cancelToken(analysisTokenRef);
         cancelToken(spectrumTokenRef);
@@ -364,7 +322,6 @@ export function useAudioAnalysis() {
         samplesRef.current = null;
         sessionSamples = null;
     }, [setErrorWithSession, setResultWithSession, setSelectedFilePathWithSession]);
-
     return {
         analyzing,
         analysisProgress,

frontend/src/lib/audio-analysis-preferences.ts

@@ -1,52 +1,42 @@
 export type AnalyzerColorScheme = "spek" | "viridis" | "hot" | "cool" | "grayscale";
 export type AnalyzerFreqScale = "linear" | "log2";
 export type AnalyzerWindowFunction = "hann" | "hamming" | "blackman" | "rectangular";
-
 export interface AudioAnalysisPreferences {
     colorScheme: AnalyzerColorScheme;
     freqScale: AnalyzerFreqScale;
     fftSize: number;
     windowFunction: AnalyzerWindowFunction;
 }
-
 const STORAGE_KEY = "spotiflac_audio_analysis_preferences";
-
 const DEFAULT_PREFERENCES: AudioAnalysisPreferences = {
     colorScheme: "spek",
     freqScale: "linear",
     fftSize: 4096,
     windowFunction: "hann",
 };
-
 const FFT_SIZE_SET = new Set([512, 1024, 2048, 4096]);
-
 function toColorScheme(value: unknown): AnalyzerColorScheme {
     return value === "viridis" || value === "hot" || value === "cool" || value === "grayscale"
         ? value
         : "spek";
 }
-
 function toFreqScale(value: unknown): AnalyzerFreqScale {
     return value === "log2" ? "log2" : "linear";
 }
-
 function toFFTSize(value: unknown): number {
     const num = typeof value === "number" ? value : Number(value);
     return FFT_SIZE_SET.has(num) ? num : 4096;
 }
-
 function toWindowFunction(value: unknown): AnalyzerWindowFunction {
     return value === "hamming" || value === "blackman" || value === "rectangular"
         ? value
         : "hann";
 }
-
 export function loadAudioAnalysisPreferences(): AudioAnalysisPreferences {
     try {
         const raw = localStorage.getItem(STORAGE_KEY);
         if (!raw)
             return DEFAULT_PREFERENCES;
-
         const parsed = JSON.parse(raw) as Partial<AudioAnalysisPreferences>;
         return {
             colorScheme: toColorScheme(parsed.colorScheme),
@@ -59,7 +49,6 @@ export function loadAudioAnalysisPreferences(): AudioAnalysisPreferences {
         return DEFAULT_PREFERENCES;
     }
 }
-
 export function saveAudioAnalysisPreferences(preferences: AudioAnalysisPreferences): void {
     try {
         localStorage.setItem(STORAGE_KEY, JSON.stringify({
@@ -70,6 +59,5 @@ export function saveAudioAnalysisPreferences(preferences: AudioAnalysisPreferenc
         }));
     }
     catch {
-        // Ignore persistence errors.
     }
 }

frontend/src/lib/flac-analysis.ts

@@ -1,29 +1,23 @@
 import type { AnalysisResult, SpectrumData, TimeSlice } from "@/types/api";
-
 export interface SpectrumParams {
     fftSize: number;
     windowFunction: "hann" | "hamming" | "blackman" | "rectangular";
 }
-
 const DEFAULT_PARAMS: SpectrumParams = {
     fftSize: 4096,
     windowFunction: "hann",
 };
-
 const MAX_SPECTRUM_FRAMES = 2200;
 const METRICS_CHUNK_SIZE = 262144;
 const AAC_SAMPLE_RATES = [
     96000, 88200, 64000, 48000, 44100, 32000, 24000,
     22050, 16000, 12000, 11025, 8000, 7350,
 ] as const;
-
 const MP4_CONTAINER_TYPES = new Set([
     "moov", "trak", "mdia", "minf", "stbl", "edts", "dinf",
     "udta", "ilst", "meta", "stsd", "wave",
 ]);
-
 type SupportedAudioFileType = "FLAC" | "MP3" | "M4A" | "AAC";
-
 interface ParsedAudioMetadata {
     fileType: SupportedAudioFileType;
     sampleRate: number;
@@ -36,104 +30,77 @@ interface ParsedAudioMetadata {
     totalFrames?: number;
     codecVersion?: string;
 }
-
 interface Mp4BoxInfo {
     offset: number;
     size: number;
     headerSize: number;
     type: string;
 }
-
 export interface FrontendAnalysisPayload {
     result: AnalysisResult;
     samples: Float32Array;
 }
-
 export interface AudioArrayBufferInput {
     fileName: string;
     fileSize: number;
     arrayBuffer: ArrayBuffer;
 }
-
 export type AnalysisPhase = "read" | "parse" | "decode" | "metrics" | "spectrum" | "finalize";
-
 export interface AnalysisProgress {
     phase: AnalysisPhase;
     percent: number;
     message: string;
 }
-
 export type AnalysisProgressCallback = (progress: AnalysisProgress) => void;
 export type AnalysisCancelCheck = () => boolean;
-
-function reportProgress(
-    callback: AnalysisProgressCallback | undefined,
-    phase: AnalysisPhase,
-    percent: number,
-    message: string,
-): void {
-    if (!callback) return;
+function reportProgress(callback: AnalysisProgressCallback | undefined, phase: AnalysisPhase, percent: number, message: string): void {
+    if (!callback)
+        return;
     callback({
         phase,
         percent: Math.max(0, Math.min(100, percent)),
         message,
     });
 }
-
 function throwIfCancelled(cancelCheck?: AnalysisCancelCheck): void {
     if (cancelCheck?.()) {
         throw new Error("Analysis cancelled");
     }
 }
-
 function nowMs(): number {
     return typeof performance !== "undefined" ? performance.now() : Date.now();
 }
-
 function nextTick(): Promise<void> {
     if (typeof requestAnimationFrame === "function") {
         return new Promise((resolve) => requestAnimationFrame(() => resolve()));
     }
     return new Promise((resolve) => setTimeout(resolve, 0));
 }
-
 function readFourCC(view: DataView, offset: number): string {
-    return String.fromCharCode(
-        view.getUint8(offset),
-        view.getUint8(offset + 1),
-        view.getUint8(offset + 2),
-        view.getUint8(offset + 3),
-    );
+    return String.fromCharCode(view.getUint8(offset), view.getUint8(offset + 1), view.getUint8(offset + 2), view.getUint8(offset + 3));
 }
-
 function fileExtension(fileName: string): string {
     const normalized = fileName.toLowerCase();
     const dotIndex = normalized.lastIndexOf(".");
     return dotIndex >= 0 ? normalized.slice(dotIndex) : "";
 }
-
 function detectAudioFileType(buffer: ArrayBuffer, fileName = ""): SupportedAudioFileType {
     const view = new DataView(buffer);
-
     if (view.byteLength >= 4 && view.getUint32(0, false) === 0x664c6143) {
         return "FLAC";
     }
-
     if (view.byteLength >= 3 &&
         view.getUint8(0) === 0x49 &&
         view.getUint8(1) === 0x44 &&
         view.getUint8(2) === 0x33) {
         return "MP3";
     }
-
     if (view.byteLength >= 8 && readFourCC(view, 4) === "ftyp") {
         return "M4A";
     }
-
     if (view.byteLength >= 2 && view.getUint8(0) === 0xff && (view.getUint8(1) & 0xf6) === 0xf0) {
         return "AAC";
     }
-
     for (let offset = 0; offset < Math.min(4096, view.byteLength - 4); offset++) {
         const header = view.getUint32(offset, false);
         if ((header >>> 21) === 0x7ff) {
@@ -145,7 +112,6 @@ function detectAudioFileType(buffer: ArrayBuffer, fileName = ""): SupportedAudio
             }
         }
     }
-
     switch (fileExtension(fileName)) {
         case ".flac": return "FLAC";
         case ".mp3": return "MP3";
@@ -155,36 +121,31 @@ function detectAudioFileType(buffer: ArrayBuffer, fileName = ""): SupportedAudio
         default: throw new Error(`Unsupported audio format: ${fileName || "unknown"}`);
     }
 }
-
 function parseFlacMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
     const data = new Uint8Array(buffer);
     if (data.length < 4 || data[0] !== 0x66 || data[1] !== 0x4c || data[2] !== 0x61 || data[3] !== 0x43) {
         throw new Error("Invalid FLAC file");
     }
-
     let offset = 4;
     while (offset + 4 <= data.length) {
         const blockHeader = data[offset];
         const blockType = blockHeader & 0x7f;
         const blockLength = (data[offset + 1] << 16) | (data[offset + 2] << 8) | data[offset + 3];
         offset += 4;
-
-        if (offset + blockLength > data.length) break;
-
+        if (offset + blockLength > data.length)
+            break;
         if (blockType === 0 && blockLength >= 18) {
             const streamInfo = data.subarray(offset, offset + blockLength);
             const sampleRate = (streamInfo[10] << 12) | (streamInfo[11] << 4) | (streamInfo[12] >> 4);
             const channels = ((streamInfo[12] >> 1) & 0x07) + 1;
             const bitsPerSample = (((streamInfo[12] & 0x01) << 4) | (streamInfo[13] >> 4)) + 1;
-            const totalSamplesBig =
-                (BigInt(streamInfo[13] & 0x0f) << 32n) |
+            const totalSamplesBig = (BigInt(streamInfo[13] & 0x0f) << 32n) |
                 (BigInt(streamInfo[14]) << 24n) |
                 (BigInt(streamInfo[15]) << 16n) |
                 (BigInt(streamInfo[16]) << 8n) |
                 BigInt(streamInfo[17]);
             const totalSamples = Number(totalSamplesBig);
             const duration = sampleRate > 0 && totalSamples > 0 ? totalSamples / sampleRate : 0;
-
             return {
                 fileType: "FLAC",
                 sampleRate,
@@ -194,13 +155,10 @@ function parseFlacMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
                 duration,
             };
         }
-
         offset += blockLength;
     }
-
     throw new Error("FLAC STREAMINFO metadata not found");
 }
-
 function skipId3v2Tag(view: DataView): number {
     if (view.byteLength < 10 ||
         view.getUint8(0) !== 0x49 ||
@@ -208,20 +166,16 @@ function skipId3v2Tag(view: DataView): number {
         view.getUint8(2) !== 0x33) {
         return 0;
     }
-
-    const size =
-        ((view.getUint8(6) & 0x7f) << 21) |
+    const size = ((view.getUint8(6) & 0x7f) << 21) |
         ((view.getUint8(7) & 0x7f) << 14) |
         ((view.getUint8(8) & 0x7f) << 7) |
         (view.getUint8(9) & 0x7f);
-
     let offset = 10 + size;
     if ((view.getUint8(5) & 0x10) !== 0) {
         offset += 10;
     }
     return offset < view.byteLength ? offset : 0;
 }
-
 function getMp3Bitrate(version: number, layer: number, bitrateIndex: number): number {
     const tables: Record<number, Record<number, number[]>> = {
         1: {
@@ -235,17 +189,16 @@ function getMp3Bitrate(version: number, layer: number, bitrateIndex: number): nu
             3: [0, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 144, 160, 0],
         },
     };
-
     const normalizedVersion = version === 2.5 ? 2 : version;
     return tables[normalizedVersion]?.[layer]?.[bitrateIndex] ?? 0;
 }
-
 function getMp3SamplesPerFrame(version: number, layer: number): number {
-    if (layer === 1) return 384;
-    if (version === 1) return 1152;
+    if (layer === 1)
+        return 384;
+    if (version === 1)
+        return 1152;
     return 576;
 }
-
 interface Mp3FrameInfo {
     version: number;
     versionName: string;
@@ -256,24 +209,26 @@ interface Mp3FrameInfo {
     frameSize: number;
     samplesPerFrame: number;
 }
-
 function parseMp3FrameHeader(header: number): Mp3FrameInfo | null {
-    if (((header >>> 21) & 0x7ff) !== 0x7ff) return null;
-
+    if (((header >>> 21) & 0x7ff) !== 0x7ff)
+        return null;
     const versionBits = (header >>> 19) & 0x03;
     const layerBits = (header >>> 17) & 0x03;
     const bitrateIndex = (header >>> 12) & 0x0f;
     const sampleRateIndex = (header >>> 10) & 0x03;
     const padding = (header >>> 9) & 0x01;
     const channelMode = (header >>> 6) & 0x03;
-
     const versions = [2.5, null, 2, 1] as const;
     const layers = [null, 3, 2, 1] as const;
     const version = versions[versionBits];
     const layer = layers[layerBits];
-    if (version === null || layer === null || sampleRateIndex === 3) return null;
-
-    const sampleRateTables: Record<1 | 2 | 25, [number, number, number]> = {
+    if (version === null || layer === null || sampleRateIndex === 3)
+        return null;
+    const sampleRateTables: Record<1 | 2 | 25, [
+        number,
+        number,
+        number
+    ]> = {
         1: [44100, 48000, 32000],
         2: [22050, 24000, 16000],
         25: [11025, 12000, 8000],
@@ -282,8 +237,8 @@ function parseMp3FrameHeader(header: number): Mp3FrameInfo | null {
     const sampleRate = sampleRateTables[sampleRateKey][sampleRateIndex];
     const bitrate = getMp3Bitrate(version, layer, bitrateIndex);
     const samplesPerFrame = getMp3SamplesPerFrame(version, layer);
-    if (!sampleRate || !bitrate || !samplesPerFrame) return null;
-
+    if (!sampleRate || !bitrate || !samplesPerFrame)
+        return null;
     return {
         version,
         versionName: `MPEG-${version === 1 ? "1" : version === 2 ? "2" : "2.5"}`,
@@ -295,21 +250,19 @@ function parseMp3FrameHeader(header: number): Mp3FrameInfo | null {
         samplesPerFrame,
     };
 }
-
 function getMp3SideInfoSize(frameInfo: Mp3FrameInfo): number {
     if (frameInfo.version === 1) {
         return frameInfo.channels === 1 ? 17 : 32;
     }
     return frameInfo.channels === 1 ? 9 : 17;
 }
-
 function parseMp3XingHeader(view: DataView, offset: number, frameInfo: Mp3FrameInfo) {
-    if (offset + 16 > view.byteLength) return null;
+    if (offset + 16 > view.byteLength)
+        return null;
     const flags = view.getUint32(offset + 4, false);
     let pos = offset + 8;
     let totalFrames = 0;
     let totalBytes = 0;
-
     if ((flags & 0x01) !== 0 && pos + 4 <= view.byteLength) {
         totalFrames = view.getUint32(pos, false);
         pos += 4;
@@ -317,10 +270,8 @@ function parseMp3XingHeader(view: DataView, offset: number, frameInfo: Mp3FrameI
     if ((flags & 0x02) !== 0 && pos + 4 <= view.byteLength) {
         totalBytes = view.getUint32(pos, false);
     }
-
     const duration = totalFrames > 0 ? (totalFrames * frameInfo.samplesPerFrame) / frameInfo.sampleRate : 0;
     const avgBitrate = duration > 0 && totalBytes > 0 ? Math.round((totalBytes * 8) / duration / 1000) : frameInfo.bitrate;
-
     return {
         codecMode: "VBR (Xing)",
         totalFrames,
@@ -328,9 +279,9 @@ function parseMp3XingHeader(view: DataView, offset: number, frameInfo: Mp3FrameI
         bitrateKbps: avgBitrate,
     };
 }
-
 function parseMp3VbriHeader(view: DataView, offset: number, frameInfo: Mp3FrameInfo) {
-    if (offset + 18 > view.byteLength) return null;
+    if (offset + 18 > view.byteLength)
+        return null;
     const totalBytes = view.getUint32(offset + 10, false);
     const totalFrames = view.getUint32(offset + 14, false);
     const duration = totalFrames > 0 ? (totalFrames * frameInfo.samplesPerFrame) / frameInfo.sampleRate : 0;
@@ -342,43 +293,27 @@ function parseMp3VbriHeader(view: DataView, offset: number, frameInfo: Mp3FrameI
         bitrateKbps,
     };
 }
-
 function parseMp3VbrInfo(view: DataView, frameOffset: number, frameInfo: Mp3FrameInfo) {
     const sideInfoSize = getMp3SideInfoSize(frameInfo);
     const xingOffset = frameOffset + 4 + sideInfoSize;
-
     if (xingOffset + 4 <= view.byteLength) {
-        const xingTag = String.fromCharCode(
-            view.getUint8(xingOffset),
-            view.getUint8(xingOffset + 1),
-            view.getUint8(xingOffset + 2),
-            view.getUint8(xingOffset + 3),
-        );
+        const xingTag = String.fromCharCode(view.getUint8(xingOffset), view.getUint8(xingOffset + 1), view.getUint8(xingOffset + 2), view.getUint8(xingOffset + 3));
         if (xingTag === "Xing" || xingTag === "Info") {
             return parseMp3XingHeader(view, xingOffset, frameInfo);
         }
     }
-
     const vbriOffset = frameOffset + 36;
     if (vbriOffset + 4 <= view.byteLength) {
-        const vbriTag = String.fromCharCode(
-            view.getUint8(vbriOffset),
-            view.getUint8(vbriOffset + 1),
-            view.getUint8(vbriOffset + 2),
-            view.getUint8(vbriOffset + 3),
-        );
+        const vbriTag = String.fromCharCode(view.getUint8(vbriOffset), view.getUint8(vbriOffset + 1), view.getUint8(vbriOffset + 2), view.getUint8(vbriOffset + 3));
         if (vbriTag === "VBRI") {
             return parseMp3VbriHeader(view, vbriOffset, frameInfo);
         }
     }
-
     return null;
 }
-
 function parseMp3Metadata(buffer: ArrayBuffer): ParsedAudioMetadata {
     const view = new DataView(buffer);
     const startOffset = skipId3v2Tag(view);
-
     for (let offset = startOffset; offset <= view.byteLength - 4; offset++) {
         const header = view.getUint32(offset, false);
         const frameInfo = parseMp3FrameHeader(header);
@@ -389,7 +324,6 @@ function parseMp3Metadata(buffer: ArrayBuffer): ParsedAudioMetadata {
             const totalFrames = vbrInfo?.totalFrames ?? Math.floor(estimatedAudioDataSize / estimatedFrameSize);
             const duration = vbrInfo?.duration ?? ((totalFrames * frameInfo.samplesPerFrame) / frameInfo.sampleRate);
             const bitrateKbps = vbrInfo?.bitrateKbps ?? frameInfo.bitrate;
-
             return {
                 fileType: "MP3",
                 sampleRate: frameInfo.sampleRate,
@@ -404,21 +338,18 @@ function parseMp3Metadata(buffer: ArrayBuffer): ParsedAudioMetadata {
             };
         }
     }
-
     throw new Error("No valid MP3 frame found");
 }
-
 function parseAacMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
     const data = new Uint8Array(buffer);
-
     for (let offset = 0; offset <= data.length - 7; offset++) {
-        if (data[offset] !== 0xff || (data[offset + 1] & 0xf6) !== 0xf0) continue;
-
+        if (data[offset] !== 0xff || (data[offset + 1] & 0xf6) !== 0xf0)
+            continue;
         const sampleRateIndex = (data[offset + 2] >> 2) & 0x0f;
         const sampleRate = AAC_SAMPLE_RATES[sampleRateIndex];
         const channels = ((data[offset + 2] & 0x01) << 2) | ((data[offset + 3] >> 6) & 0x03);
-        if (!sampleRate) continue;
-
+        if (!sampleRate)
+            continue;
         return {
             fileType: "AAC",
             sampleRate,
@@ -428,48 +359,43 @@ function parseAacMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
             duration: 0,
         };
     }
-
     throw new Error("No valid AAC ADTS header found");
 }
-
 function readMp4Box(view: DataView, offset: number, limit: number): Mp4BoxInfo | null {
-    if (offset + 8 > limit) return null;
-
+    if (offset + 8 > limit)
+        return null;
     let size = view.getUint32(offset, false);
     const type = readFourCC(view, offset + 4);
     let headerSize = 8;
-
     if (size === 1) {
-        if (offset + 16 > limit) return null;
+        if (offset + 16 > limit)
+            return null;
         const high = view.getUint32(offset + 8, false);
         const low = view.getUint32(offset + 12, false);
         size = high * 4294967296 + low;
         headerSize = 16;
-    } else if (size === 0) {
+    }
+    else if (size === 0) {
         size = limit - offset;
     }
-
-    if (size < headerSize || offset + size > limit) return null;
-
+    if (size < headerSize || offset + size > limit)
+        return null;
     return { offset, size, headerSize, type };
 }
-
 function parseM4aMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
     const view = new DataView(buffer);
     let sampleRate = 0;
     let channels = 0;
     let bitsPerSample = 0;
     let duration = 0;
-
     const scanBoxes = (start: number, end: number): void => {
         let offset = start;
         while (offset + 8 <= end) {
             const box = readMp4Box(view, offset, end);
-            if (!box) break;
-
+            if (!box)
+                break;
             const boxEnd = box.offset + box.size;
             const contentStart = box.offset + box.headerSize;
-
             if (box.type === "mdhd" && contentStart + 24 <= boxEnd) {
                 const version = view.getUint8(contentStart);
                 if (version === 0 && contentStart + 24 <= boxEnd) {
@@ -479,7 +405,8 @@ function parseM4aMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
                         sampleRate = timeScale;
                         duration = durationValue / timeScale;
                     }
-                } else if (version === 1 && contentStart + 36 <= boxEnd) {
+                }
+                else if (version === 1 && contentStart + 36 <= boxEnd) {
                     const timeScale = view.getUint32(contentStart + 20, false);
                     const durationHigh = view.getUint32(contentStart + 24, false);
                     const durationLow = view.getUint32(contentStart + 28, false);
@@ -489,7 +416,8 @@ function parseM4aMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
                         duration = durationValue / timeScale;
                     }
                 }
-            } else if ((box.type === "mp4a" || box.type === "aac ") && box.offset + 36 <= boxEnd) {
+            }
+            else if ((box.type === "mp4a" || box.type === "aac ") && box.offset + 36 <= boxEnd) {
                 channels = view.getUint16(box.offset + 24, false) || channels;
                 bitsPerSample = view.getUint16(box.offset + 26, false) || bitsPerSample;
                 if (!sampleRate) {
@@ -499,24 +427,25 @@ function parseM4aMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
                     }
                 }
             }
-
             if (MP4_CONTAINER_TYPES.has(box.type)) {
                 let childStart = contentStart;
-                if (box.type === "meta") childStart = Math.min(boxEnd, contentStart + 4);
-                else if (box.type === "stsd") childStart = Math.min(boxEnd, contentStart + 8);
-                if (childStart < boxEnd) scanBoxes(childStart, boxEnd);
+                if (box.type === "meta")
+                    childStart = Math.min(boxEnd, contentStart + 4);
+                else if (box.type === "stsd")
+                    childStart = Math.min(boxEnd, contentStart + 8);
+                if (childStart < boxEnd)
+                    scanBoxes(childStart, boxEnd);
             }
-
             offset = boxEnd;
         }
     };
-
     scanBoxes(0, view.byteLength);
-
-    if (sampleRate <= 0) sampleRate = 44100;
-    if (channels <= 0) channels = 2;
-    if (bitsPerSample <= 0) bitsPerSample = 16;
-
+    if (sampleRate <= 0)
+        sampleRate = 44100;
+    if (channels <= 0)
+        channels = 2;
+    if (bitsPerSample <= 0)
+        bitsPerSample = 16;
     return {
         fileType: "M4A",
         sampleRate,
@@ -526,10 +455,8 @@ function parseM4aMetadata(buffer: ArrayBuffer): ParsedAudioMetadata {
         duration,
     };
 }
-
 function parseAudioMetadata(input: AudioArrayBufferInput): ParsedAudioMetadata {
     const fileType = detectAudioFileType(input.arrayBuffer, input.fileName);
-
     switch (fileType) {
         case "FLAC": return parseFlacMetadata(input.arrayBuffer);
         case "MP3": return parseMp3Metadata(input.arrayBuffer);
@@ -538,14 +465,12 @@ function parseAudioMetadata(input: AudioArrayBufferInput): ParsedAudioMetadata {
         default: throw new Error(`Unsupported audio format: ${input.fileName || "unknown"}`);
     }
 }
-
 function buildWindowCoefficients(size: number, windowFunction: SpectrumParams["windowFunction"]): Float32Array {
     const coeffs = new Float32Array(size);
     if (size <= 1) {
         coeffs.fill(1);
         return coeffs;
     }
-
     for (let i = 0; i < size; i++) {
         switch (windowFunction) {
             case "hamming":
@@ -554,8 +479,8 @@ function buildWindowCoefficients(size: number, windowFunction: SpectrumParams["w
             case "blackman":
                 coeffs[i] =
                     0.42 -
-                    0.5 * Math.cos((2 * Math.PI * i) / (size - 1)) +
-                    0.08 * Math.cos((4 * Math.PI * i) / (size - 1));
+                        0.5 * Math.cos((2 * Math.PI * i) / (size - 1)) +
+                        0.08 * Math.cos((4 * Math.PI * i) / (size - 1));
                 break;
             case "rectangular":
                 coeffs[i] = 1;
@@ -566,14 +491,12 @@ function buildWindowCoefficients(size: number, windowFunction: SpectrumParams["w
                 break;
         }
     }
-
     return coeffs;
 }
-
 function buildBitReversal(size: number): Uint32Array {
     let bits = 0;
-    while ((1 << bits) < size) bits++;
-
+    while ((1 << bits) < size)
+        bits++;
     const out = new Uint32Array(size);
     for (let i = 0; i < size; i++) {
         let x = i;
@@ -586,44 +509,36 @@ function buildBitReversal(size: number): Uint32Array {
     }
     return out;
 }
-
 function fftInPlace(real: Float32Array, imag: Float32Array, bitReversal: Uint32Array): void {
     const size = real.length;
-
     for (let i = 1; i < size; i++) {
         const j = bitReversal[i];
         if (i < j) {
             const tr = real[i];
             real[i] = real[j];
             real[j] = tr;
-
             const ti = imag[i];
             imag[i] = imag[j];
             imag[j] = ti;
         }
     }
-
     for (let len = 2; len <= size; len <<= 1) {
         const wLen = (-2 * Math.PI) / len;
         const wLenReal = Math.cos(wLen);
         const wLenImag = Math.sin(wLen);
-
         for (let i = 0; i < size; i += len) {
             let wReal = 1;
             let wImag = 0;
             const half = len >> 1;
-
             for (let j = 0; j < half; j++) {
                 const uReal = real[i + j];
                 const uImag = imag[i + j];
                 const vReal = real[i + j + half] * wReal - imag[i + j + half] * wImag;
                 const vImag = real[i + j + half] * wImag + imag[i + j + half] * wReal;
-
                 real[i + j] = uReal + vReal;
                 imag[i + j] = uImag + vImag;
                 real[i + j + half] = uReal - vReal;
                 imag[i + j + half] = uImag - vImag;
-
                 const tempReal = wReal * wLenReal - wImag * wLenImag;
                 wImag = wReal * wLenImag + wImag * wLenReal;
                 wReal = tempReal;
@@ -631,14 +546,7 @@ function fftInPlace(real: Float32Array, imag: Float32Array, bitReversal: Uint32A
         }
     }
 }
-
-export async function analyzeSpectrumFromSamples(
-    samples: Float32Array,
-    sampleRate: number,
-    params: SpectrumParams,
-    onProgress?: AnalysisProgressCallback,
-    shouldCancel?: AnalysisCancelCheck,
-): Promise<SpectrumData> {
+export async function analyzeSpectrumFromSamples(samples: Float32Array, sampleRate: number, params: SpectrumParams, onProgress?: AnalysisProgressCallback, shouldCancel?: AnalysisCancelCheck): Promise<SpectrumData> {
     throwIfCancelled(shouldCancel);
     const fftSize = params.fftSize;
     const hopSize = Math.max(1, Math.floor(fftSize / 4));
@@ -648,13 +556,11 @@ export async function analyzeSpectrumFromSamples(
     const freqBins = Math.floor(fftSize / 2) + 1;
     const duration = sampleRate > 0 ? samples.length / sampleRate : 0;
     const maxFreq = sampleRate / 2;
-
     const windowCoeffs = buildWindowCoefficients(fftSize, params.windowFunction);
     const bitReversal = buildBitReversal(fftSize);
     const real = new Float32Array(fftSize);
     const imag = new Float32Array(fftSize);
     const invFFTSizeSquared = 1 / (fftSize * fftSize);
-
     reportProgress(onProgress, "spectrum", 0, "Preparing FFT...");
     const windowIndices: number[] = [];
     for (let windowIndex = 0; windowIndex < numWindows; windowIndex += frameStride) {
@@ -663,19 +569,16 @@ export async function analyzeSpectrumFromSamples(
     if (windowIndices[windowIndices.length - 1] !== numWindows - 1) {
         windowIndices.push(numWindows - 1);
     }
-
     const totalSlices = windowIndices.length;
     const timeSlices: TimeSlice[] = new Array(totalSlices);
     let lastReportedPercent = -1;
     let lastYieldAt = nowMs();
-
     for (let i = 0; i < totalSlices; i++) {
         throwIfCancelled(shouldCancel);
         const windowIndex = windowIndices[i];
         const start = windowIndex * hopSize;
         const remaining = samples.length - start;
         const copyLen = Math.max(0, Math.min(fftSize, remaining));
-
         for (let j = 0; j < copyLen; j++) {
             real[j] = samples[start + j] * windowCoeffs[j];
             imag[j] = 0;
@@ -684,26 +587,21 @@ export async function analyzeSpectrumFromSamples(
             real[j] = 0;
             imag[j] = 0;
         }
-
         fftInPlace(real, imag, bitReversal);
-
         const magnitudes = new Float32Array(freqBins);
         for (let j = 0; j < freqBins; j++) {
             const power = (real[j] * real[j] + imag[j] * imag[j]) * invFFTSizeSquared;
             magnitudes[j] = power > 1e-12 ? 10 * Math.log10(power) : -120;
         }
-
         timeSlices[i] = {
             time: sampleRate > 0 ? start / sampleRate : 0,
             magnitudes,
         };
-
         const currentPercent = Math.floor(((i + 1) / totalSlices) * 100);
         if (currentPercent > lastReportedPercent) {
             lastReportedPercent = currentPercent;
             reportProgress(onProgress, "spectrum", currentPercent, "Analyzing spectrum...");
         }
-
         if ((i + 1) % 8 === 0) {
             const now = nowMs();
             if (now - lastYieldAt >= 16) {
@@ -713,7 +611,6 @@ export async function analyzeSpectrumFromSamples(
             }
         }
     }
-
     reportProgress(onProgress, "spectrum", 100, "Spectrum analysis complete");
     return {
         time_slices: timeSlices,
@@ -723,63 +620,44 @@ export async function analyzeSpectrumFromSamples(
         max_freq: maxFreq,
     };
 }
-
 function createAnalysisAudioContext(sampleRate: number): AudioContext {
     if (sampleRate > 0) {
         try {
             return new AudioContext({ sampleRate });
-        } catch {
+        }
+        catch {
             return new AudioContext();
         }
     }
     return new AudioContext();
 }
-
-export async function analyzeAudioFile(
-    file: File,
-    params: SpectrumParams = DEFAULT_PARAMS,
-    onProgress?: AnalysisProgressCallback,
-    shouldCancel?: AnalysisCancelCheck,
-): Promise<FrontendAnalysisPayload> {
+export async function analyzeAudioFile(file: File, params: SpectrumParams = DEFAULT_PARAMS, onProgress?: AnalysisProgressCallback, shouldCancel?: AnalysisCancelCheck): Promise<FrontendAnalysisPayload> {
     throwIfCancelled(shouldCancel);
     reportProgress(onProgress, "read", 2, "Reading file...");
     const arrayBuffer = await file.arrayBuffer();
     throwIfCancelled(shouldCancel);
     reportProgress(onProgress, "read", 10, "File loaded");
-    return analyzeAudioArrayBuffer(
-        {
-            fileName: file.name,
-            fileSize: file.size,
-            arrayBuffer,
-        },
-        params,
-        (progress) => {
-            const mappedPercent = 10 + (progress.percent * 0.9);
-            reportProgress(onProgress, progress.phase, mappedPercent, progress.message);
-        },
-        shouldCancel,
-    );
+    return analyzeAudioArrayBuffer({
+        fileName: file.name,
+        fileSize: file.size,
+        arrayBuffer,
+    }, params, (progress) => {
+        const mappedPercent = 10 + (progress.percent * 0.9);
+        reportProgress(onProgress, progress.phase, mappedPercent, progress.message);
+    }, shouldCancel);
 }
-
-export async function analyzeAudioArrayBuffer(
-    input: AudioArrayBufferInput,
-    params: SpectrumParams = DEFAULT_PARAMS,
-    onProgress?: AnalysisProgressCallback,
-    shouldCancel?: AnalysisCancelCheck,
-): Promise<FrontendAnalysisPayload> {
+export async function analyzeAudioArrayBuffer(input: AudioArrayBufferInput, params: SpectrumParams = DEFAULT_PARAMS, onProgress?: AnalysisProgressCallback, shouldCancel?: AnalysisCancelCheck): Promise<FrontendAnalysisPayload> {
     throwIfCancelled(shouldCancel);
     reportProgress(onProgress, "parse", 5, "Parsing audio metadata...");
     const metadata = parseAudioMetadata(input);
     throwIfCancelled(shouldCancel);
     reportProgress(onProgress, "decode", 15, "Decoding audio stream...");
     const audioContext = createAnalysisAudioContext(metadata.sampleRate);
-
     try {
         const audioBuffer = await audioContext.decodeAudioData(input.arrayBuffer.slice(0));
         throwIfCancelled(shouldCancel);
         reportProgress(onProgress, "decode", 35, "Audio decoded");
         const samples = audioBuffer.getChannelData(0);
-
         reportProgress(onProgress, "metrics", 40, "Calculating peak/RMS...");
         let peak = 0;
         let sumSquares = 0;
@@ -788,13 +666,12 @@ export async function analyzeAudioArrayBuffer(
             throwIfCancelled(shouldCancel);
             const sample = samples[i];
             const absSample = Math.abs(sample);
-            if (absSample > peak) peak = absSample;
+            if (absSample > peak)
+                peak = absSample;
             sumSquares += sample * sample;
-
             if ((i + 1) % METRICS_CHUNK_SIZE === 0 || i === samples.length - 1) {
                 const metricsProgress = 40 + (((i + 1) / samples.length) * 10);
                 reportProgress(onProgress, "metrics", metricsProgress, "Calculating peak/RMS...");
-
                 const now = nowMs();
                 if (now - lastMetricsYieldAt >= 16) {
                     await nextTick();
@@ -803,7 +680,6 @@ export async function analyzeAudioArrayBuffer(
                 }
             }
         }
-
         const peakDB = peak > 0 ? 20 * Math.log10(peak) : -120;
         const rms = samples.length > 0 ? Math.sqrt(sumSquares / samples.length) : 0;
         const rmsDB = rms > 0 ? 20 * Math.log10(rms) : -120;
@@ -812,21 +688,12 @@ export async function analyzeAudioArrayBuffer(
         const totalSamples = metadata.totalSamples > 0
             ? metadata.totalSamples
             : Math.floor(duration * metadata.sampleRate);
-
         reportProgress(onProgress, "metrics", 50, "Signal metrics complete");
-        const spectrum = await analyzeSpectrumFromSamples(
-            samples,
-            metadata.sampleRate,
-            params,
-            (progress) => {
-                const mappedPercent = 50 + (progress.percent * 0.45);
-                reportProgress(onProgress, "spectrum", mappedPercent, progress.message);
-            },
-            shouldCancel,
-        );
-
+        const spectrum = await analyzeSpectrumFromSamples(samples, metadata.sampleRate, params, (progress) => {
+            const mappedPercent = 50 + (progress.percent * 0.45);
+            reportProgress(onProgress, "spectrum", mappedPercent, progress.message);
+        }, shouldCancel);
         reportProgress(onProgress, "finalize", 97, "Finalizing result...");
-
         const payload: FrontendAnalysisPayload = {
             result: {
                 file_path: input.fileName,
@@ -849,13 +716,12 @@ export async function analyzeAudioArrayBuffer(
             },
             samples,
         };
-
         reportProgress(onProgress, "finalize", 100, "Analysis complete");
         return payload;
-    } finally {
+    }
+    finally {
         await audioContext.close();
     }
 }
-
 export const analyzeFlacFile = analyzeAudioFile;
 export const analyzeFlacArrayBuffer = analyzeAudioArrayBuffer;