Some drag and drop and other UI enhancements

App.tsx

@@ -66,6 +66,7 @@ export default function App() {
   // UI State
   const [isGenerating, setIsGenerating] = useState(false);
   const [showRightSidebar, setShowRightSidebar] = useState(true);
+  const [pendingAudioSelection, setPendingAudioSelection] = useState<{ target: 'reference' | 'source'; url: string; title?: string } | null>(null);
 
   // Mobile UI Toggle
   const [mobileShowList, setMobileShowList] = useState(false);
@@ -1066,6 +1067,20 @@ export default function App() {
     window.history.pushState({}, '', `/playlist/${playlistId}`);
   };
 
+  const handleUseAsReference = (song: Song) => {
+    if (!song.audioUrl) return;
+    setPendingAudioSelection({ target: 'reference', url: song.audioUrl, title: song.title });
+    setCurrentView('create');
+    setMobileShowList(false);
+  };
+
+  const handleCoverSong = (song: Song) => {
+    if (!song.audioUrl) return;
+    setPendingAudioSelection({ target: 'source', url: song.audioUrl, title: song.title });
+    setCurrentView('create');
+    setMobileShowList(false);
+  };
+
   const handleBackFromPlaylist = () => {
     setViewingPlaylistId(null);
     setCurrentView('library');
@@ -1184,6 +1199,9 @@ export default function App() {
                 onGenerate={handleGenerate}
                 isGenerating={isGenerating}
                 initialData={reuseData}
+                createdSongs={songs}
+                pendingAudioSelection={pendingAudioSelection}
+                onAudioSelectionApplied={() => setPendingAudioSelection(null)}
               />
             </div>
 
@@ -1198,6 +1216,7 @@ export default function App() {
                 selectedSong={selectedSong}
                 likedSongIds={likedSongIds}
                 isPlaying={isPlaying}
+                referenceTracks={referenceTracks}
                 onPlay={playSong}
                 onSelect={(s) => {
                   setSelectedSong(s);
@@ -1211,6 +1230,8 @@ export default function App() {
                 onReusePrompt={handleReuse}
                 onDelete={handleDeleteSong}
                 onDeleteMany={handleDeleteSongs}
+                onUseAsReference={handleUseAsReference}
+                onCoverSong={handleCoverSong}
               />
             </div>
 

components/CreatePanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Sparkles, ChevronDown, Settings2, Trash2, Music2, Sliders, Dices, Hash, RefreshCw, Plus, Upload, Play, Pause, Loader2 } from 'lucide-react';
 import { GenerationParams, Song } from '../types';
 import { useAuth } from '../context/AuthContext';
@@ -19,6 +19,9 @@ interface CreatePanelProps {
   onGenerate: (params: GenerationParams) => void;
   isGenerating: boolean;
   initialData?: { song: Song, timestamp: number } | null;
+  createdSongs?: Song[];
+  pendingAudioSelection?: { target: 'reference' | 'source'; url: string; title?: string } | null;
+  onAudioSelectionApplied?: () => void;
 }
 
 const KEY_SIGNATURES = [
@@ -98,8 +101,15 @@ const VOCAL_LANGUAGES = [
   { value: 'zh', label: 'Chinese (Mandarin)' },
 ];
 
-export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerating, initialData }) => {
+export const CreatePanel: React.FC<CreatePanelProps> = ({
-  const { isAuthenticated, token } = useAuth();
+  onGenerate,
+  isGenerating,
+  initialData,
+  createdSongs = [],
+  pendingAudioSelection,
+  onAudioSelectionApplied,
+}) => {
+  const { isAuthenticated, token, user } = useAuth();
 
   // Mode
   const [customMode, setCustomMode] = useState(true);
@@ -177,10 +187,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
 
   const [isUploadingReference, setIsUploadingReference] = useState(false);
   const [isUploadingSource, setIsUploadingSource] = useState(false);
+  const [isTranscribingReference, setIsTranscribingReference] = useState(false);
+  const transcribeAbortRef = useRef<AbortController | null>(null);
   const [uploadError, setUploadError] = useState<string | null>(null);
   const [isFormattingStyle, setIsFormattingStyle] = useState(false);
   const [isFormattingLyrics, setIsFormattingLyrics] = useState(false);
   const [isDraggingFile, setIsDraggingFile] = useState(false);
+  const [dragKind, setDragKind] = useState<'file' | 'audio' | null>(null);
   const referenceInputRef = useRef<HTMLInputElement>(null);
   const sourceInputRef = useRef<HTMLInputElement>(null);
   const dragDepthRef = useRef(0);
@@ -201,9 +214,24 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
   const [referenceTracks, setReferenceTracks] = useState<ReferenceTrack[]>([]);
   const [isLoadingTracks, setIsLoadingTracks] = useState(false);
   const [playingTrackId, setPlayingTrackId] = useState<string | null>(null);
+  const [playingTrackSource, setPlayingTrackSource] = useState<'uploads' | 'created' | null>(null);
   const modalAudioRef = useRef<HTMLAudioElement>(null);
   const [modalTrackTime, setModalTrackTime] = useState(0);
   const [modalTrackDuration, setModalTrackDuration] = useState(0);
+  const [libraryTab, setLibraryTab] = useState<'uploads' | 'created'>('uploads');
+
+  const createdTrackOptions = useMemo(() => {
+    return createdSongs
+      .filter(song => !song.isGenerating)
+      .filter(song => (user ? song.userId === user.id : true))
+      .filter(song => Boolean(song.audioUrl))
+      .map(song => ({
+        id: song.id,
+        title: song.title || 'Untitled',
+        audio_url: song.audioUrl!,
+        duration: song.duration,
+      }));
+  }, [createdSongs, user]);
 
   const getAudioLabel = (url: string) => {
     try {
@@ -236,6 +264,16 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     }
   }, [initialData]);
 
+  useEffect(() => {
+    if (!pendingAudioSelection) return;
+    applyAudioTargetUrl(
+      pendingAudioSelection.target,
+      pendingAudioSelection.url,
+      pendingAudioSelection.title
+    );
+    onAudioSelectionApplied?.();
+  }, [pendingAudioSelection, onAudioSelectionApplied]);
+
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       if (!isResizing) return;
@@ -312,34 +350,47 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
   }, [duration, activeMaxDuration]);
 
   useEffect(() => {
-    const isFileDrag = (e: DragEvent) =>
+    const getDragKind = (e: DragEvent): 'file' | 'audio' | null => {
-      !!(e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files'));
+      if (!e.dataTransfer) return null;
+      const types = Array.from(e.dataTransfer.types);
+      if (types.includes('Files')) return 'file';
+      if (types.includes('application/x-ace-audio')) return 'audio';
+      return null;
+    };
 
     const handleDragEnter = (e: DragEvent) => {
-      if (!isFileDrag(e)) return;
+      const kind = getDragKind(e);
+      if (!kind) return;
       dragDepthRef.current += 1;
       setIsDraggingFile(true);
+      setDragKind(kind);
       e.preventDefault();
     };
 
     const handleDragOver = (e: DragEvent) => {
-      if (!isFileDrag(e)) return;
+      const kind = getDragKind(e);
+      if (!kind) return;
+      setDragKind(kind);
       e.preventDefault();
     };
 
     const handleDragLeave = (e: DragEvent) => {
-      if (!isFileDrag(e)) return;
+      const kind = getDragKind(e);
+      if (!kind) return;
       dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
       if (dragDepthRef.current === 0) {
         setIsDraggingFile(false);
+        setDragKind(null);
       }
     };
 
     const handleDrop = (e: DragEvent) => {
-      if (!isFileDrag(e)) return;
+      const kind = getDragKind(e);
+      if (!kind) return;
       e.preventDefault();
       dragDepthRef.current = 0;
       setIsDraggingFile(false);
+      setDragKind(null);
     };
 
     window.addEventListener('dragenter', handleDragEnter);
@@ -437,9 +488,10 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     }
   };
 
-  const openAudioModal = (target: 'reference' | 'source') => {
+  const openAudioModal = (target: 'reference' | 'source', tab: 'uploads' | 'created' = 'uploads') => {
     setAudioModalTarget(target);
     setTempAudioUrl('');
+    setLibraryTab(tab);
     setShowAudioModal(true);
     void fetchReferenceTracks();
   };
@@ -490,7 +542,11 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
       // Also set as current reference/source
       const selectedTarget = target ?? audioModalTarget;
       applyAudioTargetUrl(selectedTarget, data.track.audio_url, data.track.filename);
+      if (data.whisper_available && data.track?.id) {
+        void transcribeReferenceTrack(data.track.id).then(() => undefined);
+      } else {
         setShowAudioModal(false);
+      }
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Upload failed';
       setUploadError(message);
@@ -499,6 +555,43 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     }
   };
 
+  const transcribeReferenceTrack = async (trackId: string) => {
+    if (!token) return;
+    setIsTranscribingReference(true);
+    const controller = new AbortController();
+    transcribeAbortRef.current = controller;
+    try {
+      const response = await fetch(`/api/reference-tracks/${trackId}/transcribe`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}` },
+        signal: controller.signal,
+      });
+      if (!response.ok) {
+        throw new Error('Failed to transcribe');
+      }
+      const data = await response.json();
+      if (data.lyrics) {
+        setLyrics(prev => prev || data.lyrics);
+      }
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      console.error('Transcription failed:', err);
+    } finally {
+      if (transcribeAbortRef.current === controller) {
+        transcribeAbortRef.current = null;
+      }
+      setIsTranscribingReference(false);
+    }
+  };
+
+  const cancelTranscription = () => {
+    if (transcribeAbortRef.current) {
+      transcribeAbortRef.current.abort();
+      transcribeAbortRef.current = null;
+    }
+    setIsTranscribingReference(false);
+  };
+
   const deleteReferenceTrack = async (trackId: string) => {
     if (!token) return;
     try {
@@ -508,8 +601,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
       });
       if (response.ok) {
         setReferenceTracks(prev => prev.filter(t => t.id !== trackId));
-        if (playingTrackId === trackId) {
+        if (playingTrackId === trackId && playingTrackSource === 'uploads') {
           setPlayingTrackId(null);
+          setPlayingTrackSource(null);
           if (modalAudioRef.current) {
             modalAudioRef.current.pause();
           }
@@ -520,20 +614,23 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     }
   };
 
-  const useReferenceTrack = (track: ReferenceTrack) => {
+  const useReferenceTrack = (track: { audio_url: string; title?: string }) => {
-    applyAudioTargetUrl(audioModalTarget, track.audio_url, track.filename);
+    applyAudioTargetUrl(audioModalTarget, track.audio_url, track.title);
     setShowAudioModal(false);
     setPlayingTrackId(null);
+    setPlayingTrackSource(null);
   };
 
-  const toggleModalTrack = (track: ReferenceTrack) => {
+  const toggleModalTrack = (track: { id: string; audio_url: string; source: 'uploads' | 'created' }) => {
     if (playingTrackId === track.id) {
       if (modalAudioRef.current) {
         modalAudioRef.current.pause();
       }
       setPlayingTrackId(null);
+      setPlayingTrackSource(null);
     } else {
       setPlayingTrackId(track.id);
+      setPlayingTrackSource(track.source);
       if (modalAudioRef.current) {
         modalAudioRef.current.src = track.audio_url;
         modalAudioRef.current.play().catch(() => undefined);
@@ -588,6 +685,18 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
     const file = e.dataTransfer.files?.[0];
     if (file) {
       void uploadReferenceTrack(file, target);
+      return;
+    }
+    const payload = e.dataTransfer.getData('application/x-ace-audio');
+    if (payload) {
+      try {
+        const data = JSON.parse(payload);
+        if (data?.url) {
+          applyAudioTargetUrl(target, data.url, data.title);
+        }
+      } catch {
+        // ignore
+      }
     }
   };
 
@@ -602,7 +711,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
   };
 
   const handleWorkspaceDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    if (e.dataTransfer.types.includes('Files')) {
+    if (e.dataTransfer.types.includes('Files') || e.dataTransfer.types.includes('application/x-ace-audio')) {
       e.preventDefault();
     }
   };
@@ -706,12 +815,16 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
           <div className="absolute inset-0 bg-white/70 dark:bg-black/50 backdrop-blur-sm" />
           <div className="absolute inset-0 flex items-center justify-center">
             <div className="flex flex-col items-center gap-2 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/90 dark:bg-zinc-900/90 px-6 py-5 shadow-xl">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 text-white flex items-center justify-center shadow-lg">
+              <div className={`w-12 h-12 rounded-full ${dragKind === 'audio' ? 'bg-green-500/90' : 'bg-gradient-to-br from-pink-500 to-purple-600'} text-white flex items-center justify-center shadow-lg`}>
-                <Upload size={22} />
+                {dragKind === 'audio' ? <Plus size={22} /> : <Upload size={22} />}
+              </div>
+              <div className="text-sm font-semibold text-zinc-900 dark:text-white">
+                {dragKind === 'audio' ? 'Drop to use audio' : 'Drop to upload'}
               </div>
-              <div className="text-sm font-semibold text-zinc-900 dark:text-white">Drop to upload</div>
               <div className="text-[11px] text-zinc-500 dark:text-zinc-400">
-                Uploading as {audioTab === 'reference' ? 'Reference' : 'Cover'}
+                {dragKind === 'audio'
+                  ? `Using as ${audioTab === 'reference' ? 'Reference' : 'Cover'}`
+                  : `Uploading as ${audioTab === 'reference' ? 'Reference' : 'Cover'}`}
               </div>
             </div>
           </div>
@@ -1072,13 +1185,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                 <div className="flex gap-2">
                   <button
                     type="button"
-                    onClick={() => openAudioModal(audioTab)}
+                    onClick={() => openAudioModal(audioTab, 'uploads')}
                     className="flex-1 flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[11px] font-medium bg-zinc-100 dark:bg-white/5 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
                   >
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                     </svg>
-                    {audioTab === 'reference' ? 'From library' : 'From library'}
+                    Library
                   </button>
                   <button
                     type="button"
@@ -1854,7 +1967,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
         <div className="fixed inset-0 z-[120] flex items-center justify-center">
           <div
             className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-            onClick={() => { setShowAudioModal(false); setPlayingTrackId(null); }}
+            onClick={() => { setShowAudioModal(false); setPlayingTrackId(null); setPlayingTrackSource(null); }}
           />
           <div className="relative w-[92%] max-w-lg rounded-2xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-2xl overflow-hidden">
             {/* Header */}
@@ -1871,7 +1984,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                   </p>
                 </div>
                 <button
-                  onClick={() => { setShowAudioModal(false); setPlayingTrackId(null); }}
+                  onClick={() => { setShowAudioModal(false); setPlayingTrackId(null); setPlayingTrackSource(null); }}
                   className="p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors"
                 >
                   <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1893,7 +2006,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                   };
                   input.click();
                 }}
-                disabled={isUploadingReference}
+                disabled={isUploadingReference || isTranscribingReference}
                 className="mt-4 w-full flex items-center justify-center gap-2 rounded-xl border border-dashed border-zinc-300 dark:border-white/20 bg-zinc-50 dark:bg-white/5 px-4 py-3 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-white/10 hover:border-zinc-400 dark:hover:border-white/30 transition-all"
               >
                 {isUploadingReference ? (
@@ -1901,6 +2014,11 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                     <RefreshCw size={16} className="animate-spin" />
                     Uploading...
                   </>
+                ) : isTranscribingReference ? (
+                  <>
+                    <RefreshCw size={16} className="animate-spin" />
+                    Transcribing...
+                  </>
                 ) : (
                   <>
                     <Upload size={16} />
@@ -1913,19 +2031,53 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
               {uploadError && (
                 <div className="mt-2 text-xs text-rose-500">{uploadError}</div>
               )}
+              {isTranscribingReference && (
+                <div className="mt-2 flex items-center justify-between text-xs text-zinc-400">
+                  <span>Transcribing with Whisper…</span>
+                  <button
+                    type="button"
+                    onClick={cancelTranscription}
+                    className="text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              )}
             </div>
 
-            {/* Mine Section */}
+            {/* Library Section */}
             <div className="border-t border-zinc-100 dark:border-white/5">
               <div className="px-5 py-3 flex items-center gap-2">
-                <span className="px-3 py-1 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-xs font-semibold">
+                <div className="flex items-center gap-1 bg-zinc-200/60 dark:bg-white/10 rounded-full p-0.5">
-                  Mine
+                  <button
-                </span>
+                    type="button"
+                    onClick={() => setLibraryTab('uploads')}
+                    className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${
+                      libraryTab === 'uploads'
+                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                        : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
+                    }`}
+                  >
+                    Uploaded
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setLibraryTab('created')}
+                    className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${
+                      libraryTab === 'created'
+                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                        : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
+                    }`}
+                  >
+                    Created
+                  </button>
+                </div>
               </div>
 
               {/* Track List */}
               <div className="max-h-[280px] overflow-y-auto">
-                {isLoadingTracks ? (
+                {libraryTab === 'uploads' ? (
+                  isLoadingTracks ? (
                     <div className="px-5 py-8 text-center">
                       <RefreshCw size={20} className="animate-spin mx-auto text-zinc-400" />
                       <p className="text-xs text-zinc-400 mt-2">Loading tracks...</p>
@@ -1933,7 +2085,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                   ) : referenceTracks.length === 0 ? (
                     <div className="px-5 py-8 text-center">
                       <Music2 size={24} className="mx-auto text-zinc-300 dark:text-zinc-600" />
-                    <p className="text-sm text-zinc-400 mt-2">No tracks yet</p>
+                      <p className="text-sm text-zinc-400 mt-2">No uploads yet</p>
                       <p className="text-xs text-zinc-400 mt-1">Upload audio files to use them as references</p>
                     </div>
                   ) : (
@@ -1946,10 +2098,10 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                           {/* Play Button */}
                           <button
                             type="button"
-                          onClick={() => toggleModalTrack(track)}
+                            onClick={() => toggleModalTrack({ id: track.id, audio_url: track.audio_url, source: 'uploads' })}
                             className="flex-shrink-0 w-9 h-9 rounded-full bg-zinc-100 dark:bg-white/10 text-zinc-600 dark:text-zinc-300 flex items-center justify-center hover:bg-zinc-200 dark:hover:bg-white/20 transition-colors"
                           >
-                          {playingTrackId === track.id ? (
+                            {playingTrackId === track.id && playingTrackSource === 'uploads' ? (
                               <Pause size={14} fill="currentColor" />
                             ) : (
                               <Play size={14} fill="currentColor" className="ml-0.5" />
@@ -1973,7 +2125,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                               )}
                             </div>
                             {/* Progress bar with seek - show when this track is playing */}
-                          {playingTrackId === track.id ? (
+                            {playingTrackId === track.id && playingTrackSource === 'uploads' ? (
                               <div className="flex items-center gap-2 mt-1.5">
                                 <span className="text-[10px] text-zinc-400 tabular-nums w-8">
                                   {formatTime(modalTrackTime)}
@@ -2010,7 +2162,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                           <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                             <button
                               type="button"
-                            onClick={() => useReferenceTrack(track)}
+                              onClick={() => useReferenceTrack({ audio_url: track.audio_url, title: track.filename })}
                               className="px-3 py-1.5 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-xs font-semibold hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors"
                             >
                               Use
@@ -2026,6 +2178,81 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                         </div>
                       ))}
                     </div>
+                  )
+                ) : createdTrackOptions.length === 0 ? (
+                  <div className="px-5 py-8 text-center">
+                    <Music2 size={24} className="mx-auto text-zinc-300 dark:text-zinc-600" />
+                    <p className="text-sm text-zinc-400 mt-2">No created songs yet</p>
+                    <p className="text-xs text-zinc-400 mt-1">Generate songs to reuse them as cover or reference</p>
+                  </div>
+                ) : (
+                  <div className="divide-y divide-zinc-100 dark:divide-white/5">
+                    {createdTrackOptions.map((track) => (
+                      <div
+                        key={track.id}
+                        className="px-5 py-3 flex items-center gap-3 hover:bg-zinc-50 dark:hover:bg-white/[0.02] transition-colors group"
+                      >
+                        <button
+                          type="button"
+                          onClick={() => toggleModalTrack({ id: track.id, audio_url: track.audio_url, source: 'created' })}
+                          className="flex-shrink-0 w-9 h-9 rounded-full bg-zinc-100 dark:bg-white/10 text-zinc-600 dark:text-zinc-300 flex items-center justify-center hover:bg-zinc-200 dark:hover:bg-white/20 transition-colors"
+                        >
+                          {playingTrackId === track.id && playingTrackSource === 'created' ? (
+                            <Pause size={14} fill="currentColor" />
+                          ) : (
+                            <Play size={14} fill="currentColor" className="ml-0.5" />
+                          )}
+                        </button>
+
+                        <div className="flex-1 min-w-0">
+                          <div className="text-sm font-medium text-zinc-800 dark:text-zinc-200 truncate">
+                            {track.title}
+                          </div>
+                          {playingTrackId === track.id && playingTrackSource === 'created' ? (
+                            <div className="flex items-center gap-2 mt-1.5">
+                              <span className="text-[10px] text-zinc-400 tabular-nums w-8">
+                                {formatTime(modalTrackTime)}
+                              </span>
+                              <div
+                                className="flex-1 h-1.5 rounded-full bg-zinc-200 dark:bg-white/10 cursor-pointer group/seek"
+                                onClick={(e) => {
+                                  if (modalAudioRef.current && modalTrackDuration > 0) {
+                                    const rect = e.currentTarget.getBoundingClientRect();
+                                    const percent = (e.clientX - rect.left) / rect.width;
+                                    modalAudioRef.current.currentTime = percent * modalTrackDuration;
+                                  }
+                                }}
+                              >
+                                <div
+                                  className="h-full bg-gradient-to-r from-pink-500 to-purple-500 rounded-full relative"
+                                  style={{ width: modalTrackDuration > 0 ? `${(modalTrackTime / modalTrackDuration) * 100}%` : '0%' }}
+                                >
+                                  <div className="absolute right-0 top-1/2 -translate-y-1/2 w-2.5 h-2.5 rounded-full bg-white shadow-md opacity-0 group-hover/seek:opacity-100 transition-opacity" />
+                                </div>
+                              </div>
+                              <span className="text-[10px] text-zinc-400 tabular-nums w-8 text-right">
+                                {formatTime(modalTrackDuration)}
+                              </span>
+                            </div>
+                          ) : (
+                            <div className="text-xs text-zinc-400 mt-0.5">
+                              {track.duration || '--:--'}
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <button
+                            type="button"
+                            onClick={() => useReferenceTrack({ audio_url: track.audio_url, title: track.title })}
+                            className="px-3 py-1.5 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-xs font-semibold hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors"
+                          >
+                            Use
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
                 )}
               </div>
             </div>
@@ -2043,7 +2270,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({ onGenerate, isGenerati
                   setModalTrackDuration(modalAudioRef.current.duration);
                   // Update track duration in database if not set
                   const track = referenceTracks.find(t => t.id === playingTrackId);
-                  if (track && !track.duration && token) {
+                  if (playingTrackSource === 'uploads' && track && !track.duration && token) {
                     fetch(`/api/reference-tracks/${track.id}`, {
                       method: 'PATCH',
                       headers: {

components/SongDropdownMenu.tsx

@@ -26,6 +26,8 @@ interface SongDropdownMenuProps {
     onDownload?: () => void;
     onShare?: () => void;
     onDelete?: () => void;
+    onUseAsReference?: () => void;
+    onCoverSong?: () => void;
 }
 
 interface MenuItemProps {
@@ -70,7 +72,9 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
     onAddToPlaylist,
     onDownload,
     onShare,
-    onDelete
+    onDelete,
+    onUseAsReference,
+    onCoverSong
 }) => {
     const menuRef = useRef<HTMLDivElement>(null);
 
@@ -190,6 +194,18 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
                 label="Reuse Prompt"
                 onClick={() => handleAction(onReusePrompt)}
             />
+            <MenuItem
+                icon={<Layers size={14} />}
+                label="Use as Reference"
+                onClick={() => handleAction(onUseAsReference)}
+                disabled={!song.audioUrl}
+            />
+            <MenuItem
+                icon={<Layers size={14} />}
+                label="Cover Song"
+                onClick={() => handleAction(onCoverSong)}
+                disabled={!song.audioUrl}
+            />
 
             <MenuDivider />
 

components/SongList.tsx

@@ -12,6 +12,7 @@ interface SongListProps {
     selectedSong: Song | null;
     likedSongIds: Set<string>;
     isPlaying: boolean;
+    referenceTracks?: { id: string; filename: string; audio_url: string; duration?: number | null; created_at?: string }[];
     onPlay: (song: Song) => void;
     onSelect: (song: Song) => void;
     onToggleLike: (songId: string) => void;
@@ -22,6 +23,8 @@ interface SongListProps {
     onReusePrompt?: (song: Song) => void;
     onDelete?: (song: Song) => void;
     onDeleteMany?: (songs: Song[]) => void;
+    onUseAsReference?: (song: Song) => void;
+    onCoverSong?: (song: Song) => void;
 }
 
 // ... existing code ...
@@ -44,6 +47,7 @@ export const SongList: React.FC<SongListProps> = ({
     selectedSong,
     likedSongIds,
     isPlaying,
+    referenceTracks = [],
     onPlay,
     onSelect,
     onToggleLike,
@@ -53,7 +57,9 @@ export const SongList: React.FC<SongListProps> = ({
     onNavigateToProfile,
     onReusePrompt,
     onDelete,
-    onDeleteMany
+    onDeleteMany,
+    onUseAsReference,
+    onCoverSong
 }) => {
     const { user } = useAuth();
     const [searchQuery, setSearchQuery] = useState('');
@@ -120,6 +126,31 @@ export const SongList: React.FC<SongListProps> = ({
         });
     }, [songs, searchQuery, activeFilters, likedSongIds]);
 
+    const filteredUploads = useMemo(() => {
+        if (activeFilters.size > 0) return [];
+        if (!referenceTracks.length) return [];
+        return referenceTracks.filter(track => {
+            const title = track.filename.replace(/\.[^/.]+$/, '');
+            return title.toLowerCase().includes(searchQuery.toLowerCase());
+        });
+    }, [referenceTracks, searchQuery, activeFilters]);
+
+    const listItems = useMemo(() => {
+        const songItems = filteredSongs.map(song => ({
+            type: 'song' as const,
+            id: song.id,
+            createdAt: song.createdAt,
+            song
+        }));
+        const uploadItems = filteredUploads.map(track => ({
+            type: 'upload' as const,
+            id: track.id,
+            createdAt: new Date(track.created_at || Date.now()),
+            track
+        }));
+        return [...songItems, ...uploadItems].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }, [filteredSongs, filteredUploads]);
+
     const selectableSongs = useMemo(
         () => filteredSongs.filter(song => !song.isGenerating),
         [filteredSongs]
@@ -254,7 +285,7 @@ export const SongList: React.FC<SongListProps> = ({
 
                 {/* List */}
                 <div className="space-y-2"> {/* Reduced vertical spacing */}
-                    {filteredSongs.length === 0 ? (
+                    {listItems.length === 0 ? (
                         <div className="flex flex-col items-center justify-center h-64 text-zinc-500 space-y-4 border border-dashed border-zinc-200 dark:border-white/5 rounded-2xl bg-zinc-50 dark:bg-white/[0.02]">
                             <div className="w-16 h-16 rounded-full bg-zinc-100 dark:bg-white/5 flex items-center justify-center">
                                 <Filter size={32} />
@@ -268,36 +299,59 @@ export const SongList: React.FC<SongListProps> = ({
                             </button>
                         </div>
                     ) : (
-                        filteredSongs.map((song) => (
+                        listItems.map((item) => (
+                            item.type === 'song' ? (
                                 <SongItem
-                                key={song.id}
+                                    key={item.id}
-                                song={song}
+                                    song={item.song}
-                                isCurrent={currentSong?.id === song.id}
+                                    isCurrent={currentSong?.id === item.song.id}
-                                isSelected={selectedSong?.id === song.id}
+                                    isSelected={selectedSong?.id === item.song.id}
                                     isSelectionMode={isSelecting}
-                                isChecked={selectedIds.has(song.id)}
+                                    isChecked={selectedIds.has(item.song.id)}
-                                isLiked={likedSongIds.has(song.id)}
+                                    isLiked={likedSongIds.has(item.song.id)}
                                     isPlaying={isPlaying}
-                                isOwner={user?.id === song.userId}
+                                    isOwner={user?.id === item.song.userId}
-                                onPlay={() => onPlay(song)}
+                                    onPlay={() => onPlay(item.song)}
-                                onSelect={() => onSelect(song)}
+                                    onSelect={() => onSelect(item.song)}
                                     onToggleSelect={() => {
-                                    if (song.isGenerating) return;
+                                        if (item.song.isGenerating) return;
                                         setSelectedIds(prev => {
                                             const next = new Set(prev);
-                                        if (next.has(song.id)) next.delete(song.id);
+                                            if (next.has(item.song.id)) next.delete(item.song.id);
-                                        else next.add(song.id);
+                                            else next.add(item.song.id);
                                             return next;
                                         });
                                     }}
-                                onToggleLike={() => onToggleLike(song.id)}
+                                    onToggleLike={() => onToggleLike(item.song.id)}
-                                onAddToPlaylist={() => onAddToPlaylist(song)}
+                                    onAddToPlaylist={() => onAddToPlaylist(item.song)}
-                                onOpenVideo={() => onOpenVideo && onOpenVideo(song)}
+                                    onOpenVideo={() => onOpenVideo && onOpenVideo(item.song)}
-                                onShowDetails={() => onShowDetails && onShowDetails(song)}
+                                    onShowDetails={() => onShowDetails && onShowDetails(item.song)}
                                     onNavigateToProfile={onNavigateToProfile}
-                                onReusePrompt={() => onReusePrompt?.(song)}
+                                    onReusePrompt={() => onReusePrompt?.(item.song)}
-                                onDelete={() => onDelete?.(song)}
+                                    onDelete={() => onDelete?.(item.song)}
+                                    onUseAsReference={() => onUseAsReference?.(item.song)}
+                                    onCoverSong={() => onCoverSong?.(item.song)}
                                 />
+                            ) : (
+                                <UploadItem
+                                    key={`upload_${item.id}`}
+                                    track={item.track}
+                                    onPlay={(audioUrl, title) => {
+                                        onPlay({
+                                            id: `upload_${item.id}`,
+                                            title,
+                                            lyrics: '',
+                                            style: 'Upload',
+                                            coverUrl: '',
+                                            duration: '0:00',
+                                            createdAt: item.createdAt,
+                                            tags: [],
+                                            audioUrl,
+                                            isPublic: false,
+                                        } as Song);
+                                    }}
+                                />
+                            )
                         ))
                     )}
                 </div>
@@ -325,6 +379,8 @@ interface SongItemProps {
     onNavigateToProfile?: (username: string) => void;
     onReusePrompt?: () => void;
     onDelete?: () => void;
+    onUseAsReference?: () => void;
+    onCoverSong?: () => void;
 }
 
 const SongItem: React.FC<SongItemProps> = ({
@@ -345,7 +401,9 @@ const SongItem: React.FC<SongItemProps> = ({
     onShowDetails,
     onNavigateToProfile,
     onReusePrompt,
-    onDelete
+    onDelete,
+    onUseAsReference,
+    onCoverSong
 }) => {
     const [showDropdown, setShowDropdown] = useState(false);
     const [shareModalOpen, setShareModalOpen] = useState(false);
@@ -355,7 +413,17 @@ const SongItem: React.FC<SongItemProps> = ({
         <>
         <div
             onClick={onSelect}
-            className={`group flex items-center gap-4 p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-[#18181b] transition-all cursor-pointer border ${isSelected ? 'bg-zinc-100 dark:bg-[#18181b] border-zinc-200 dark:border-white/10' : 'border-transparent bg-transparent'}`}
+            draggable={Boolean(song.audioUrl) && !song.isGenerating}
+            onDragStart={(e) => {
+                if (!song.audioUrl || song.isGenerating) return;
+                e.dataTransfer.effectAllowed = 'copy';
+                e.dataTransfer.setData('application/x-ace-audio', JSON.stringify({
+                    url: song.audioUrl,
+                    title: song.title || 'Untitled',
+                    source: 'song',
+                }));
+            }}
+            className={`group flex items-center gap-4 p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-[#18181b] transition-all cursor-pointer border ${isSelected ? 'bg-zinc-100 dark:bg-[#18181b] border-zinc-200 dark:border-white/10' : 'border-transparent bg-transparent'} ${song.audioUrl && !song.isGenerating ? 'cursor-grab active:cursor-grabbing' : ''}`}
         >
             {isSelectionMode && (
                 <button
@@ -553,6 +621,8 @@ const SongItem: React.FC<SongItemProps> = ({
                                 onAddToPlaylist={() => onAddToPlaylist?.(song)}
                                 onDelete={() => onDelete?.(song)}
                                 onShare={() => setShareModalOpen(true)}
+                                onUseAsReference={() => onUseAsReference?.()}
+                                onCoverSong={() => onCoverSong?.()}
                             />
                         </div>
                     </div>
@@ -577,3 +647,54 @@ const SongItem: React.FC<SongItemProps> = ({
         </>
     );
 };
+
+const UploadItem: React.FC<{
+    track: { id: string; filename: string; audio_url: string; duration?: number | null };
+    onPlay: (audioUrl: string, title: string) => void;
+}> = ({ track, onPlay }) => {
+    const title = track.filename.replace(/\.[^/.]+$/, '');
+    const duration = track.duration
+        ? `${Math.floor(track.duration / 60)}:${String(Math.floor(track.duration % 60)).padStart(2, '0')}`
+        : '--:--';
+
+    return (
+        <div
+            className="group flex items-center gap-4 p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-[#18181b] transition-all cursor-grab active:cursor-grabbing border border-transparent"
+            draggable
+            onDragStart={(e) => {
+                e.dataTransfer.effectAllowed = 'copy';
+                e.dataTransfer.setData('application/x-ace-audio', JSON.stringify({
+                    url: track.audio_url,
+                    title,
+                    source: 'upload',
+                }));
+            }}
+        >
+            <div className="relative w-16 h-16 flex-shrink-0 rounded-md bg-zinc-200 dark:bg-zinc-800 overflow-hidden shadow-sm">
+                <AlbumCover seed={track.id || title} size="full" className="w-full h-full opacity-40" />
+                <div
+                    className="absolute inset-0 bg-black/40 flex items-center justify-center cursor-pointer transition-opacity"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onPlay(track.audio_url, title);
+                    }}
+                >
+                    <div className="w-9 h-9 rounded-full bg-white flex items-center justify-center shadow-lg">
+                        <Play fill="black" className="text-black ml-0.5 w-4 h-4" />
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex-1 min-w-0">
+                <div className="text-sm font-bold text-zinc-900 dark:text-white truncate">
+                    {title}
+                </div>
+                <div className="text-[11px] text-zinc-400 mt-1">Upload</div>
+            </div>
+
+            <div className="text-xs font-mono text-zinc-500 dark:text-zinc-600 self-start pt-1">
+                {duration}
+            </div>
+        </div>
+    );
+};

server/src/routes/referenceTrack.ts

@@ -1,11 +1,18 @@
 import { Router, Response } from 'express';
 import multer from 'multer';
 import path from 'path';
+import os from 'os';
+import { promises as fs } from 'fs';
+import { fileURLToPath } from 'url';
 import { pool } from '../db/pool.js';
 import { authMiddleware, AuthenticatedRequest } from '../middleware/auth.js';
 import { getStorageProvider } from '../services/storage/factory.js';
+import { spawn } from 'child_process';
 
 const router = Router();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const AUDIO_DIR = path.join(__dirname, '../../public/audio');
 
 const upload = multer({
   storage: multer.memoryStorage(),
@@ -31,6 +38,93 @@ const upload = multer({
   }
 });
 
+const findWhisperExecutable = async (): Promise<string | null> => {
+  if (process.env.WHISPER_CMD) return process.env.WHISPER_CMD;
+  const customPath = process.env.WHISPER_PATH;
+  if (customPath) {
+    const candidate = path.join(customPath, 'whisper');
+    try {
+      await fs.access(candidate);
+      return candidate;
+    } catch {
+      // ignore
+    }
+  }
+
+  const pathEntries = (process.env.PATH || '').split(path.delimiter);
+  for (const entry of pathEntries) {
+    const candidate = path.join(entry, 'whisper');
+    try {
+      await fs.access(candidate);
+      return candidate;
+    } catch {
+      // ignore
+    }
+  }
+  return null;
+};
+
+const transcribeWithWhisper = async (buffer: Buffer, originalFilename: string, signal?: AbortSignal): Promise<string | null> => {
+  const whisperCmd = await findWhisperExecutable();
+  if (!whisperCmd) return null;
+
+  const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'whisper-'));
+  const ext = path.extname(originalFilename) || '.mp3';
+  const inputPath = path.join(tempDir, `input${ext}`);
+  const outputDir = path.join(tempDir, 'out');
+
+  try {
+    await fs.mkdir(outputDir, { recursive: true });
+    await fs.writeFile(inputPath, buffer);
+
+    const args = [
+      inputPath,
+      '--model', 'base',
+      '--output_format', 'txt',
+      '--output_dir', outputDir,
+      '--fp16', 'False'
+    ];
+
+    await new Promise<void>((resolve, reject) => {
+      const proc = spawn(whisperCmd, args, { stdio: 'ignore' });
+      const handleAbort = () => {
+        proc.kill('SIGTERM');
+        reject(new Error('Transcription cancelled'));
+      };
+      if (signal) {
+        if (signal.aborted) {
+          handleAbort();
+          return;
+        }
+        signal.addEventListener('abort', handleAbort, { once: true });
+      }
+      proc.on('error', reject);
+      proc.on('close', (code) => {
+        if (signal) {
+          signal.removeEventListener('abort', handleAbort);
+        }
+        if (code === 0) resolve();
+        else reject(new Error(`Whisper exited with code ${code}`));
+      });
+    });
+
+    const files = await fs.readdir(outputDir);
+    const txtFile = files.find((file) => file.endsWith('.txt'));
+    if (!txtFile) return null;
+    const text = await fs.readFile(path.join(outputDir, txtFile), 'utf8');
+    return text.trim() || null;
+  } catch (error) {
+    console.warn('Whisper transcription failed:', error);
+    return null;
+  } finally {
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch {
+      // ignore
+    }
+  }
+};
+
 // Get user's reference tracks
 router.get('/', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
   try {
@@ -72,6 +166,7 @@ router.post('/', authMiddleware, upload.single('audio'), async (req: Authenticat
     const storage = getStorageProvider();
     await storage.upload(key, req.file.buffer, req.file.mimetype);
     const audioUrl = storage.getPublicUrl(key);
+    const whisperAvailable = Boolean(await findWhisperExecutable());
 
     // Parse tags from request body if provided
     const tags = req.body.tags ? JSON.parse(req.body.tags) : null;
@@ -87,7 +182,8 @@ router.post('/', authMiddleware, upload.single('audio'), async (req: Authenticat
       track: {
         ...result.rows[0],
         audio_url: audioUrl
-      }
+      },
+      whisper_available: whisperAvailable
     });
   } catch (error) {
     console.error('Upload reference track error:', error);
@@ -153,6 +249,44 @@ router.patch('/:id', authMiddleware, async (req: AuthenticatedRequest, res: Resp
   }
 });
 
+// Transcribe a reference track with whisper (if available)
+router.post('/:id/transcribe', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const whisperCmd = await findWhisperExecutable();
+    if (!whisperCmd) {
+      res.status(404).json({ error: 'Whisper not available' });
+      return;
+    }
+
+    const result = await pool.query(
+      'SELECT user_id, filename, storage_key FROM reference_tracks WHERE id = $1',
+      [req.params.id]
+    );
+    if (result.rows.length === 0) {
+      res.status(404).json({ error: 'Track not found' });
+      return;
+    }
+    if (result.rows[0].user_id !== req.user!.id) {
+      res.status(403).json({ error: 'Access denied' });
+      return;
+    }
+
+    const audioPath = path.join(AUDIO_DIR, result.rows[0].storage_key);
+    const buffer = await fs.readFile(audioPath);
+    const controller = new AbortController();
+
+    req.on('close', () => controller.abort());
+
+    const lyrics = await transcribeWithWhisper(buffer, result.rows[0].filename, controller.signal);
+    if (controller.signal.aborted) return;
+
+    res.json({ lyrics: lyrics || '' });
+  } catch (error) {
+    console.error('Transcribe reference track error:', error);
+    res.status(500).json({ error: 'Failed to transcribe' });
+  }
+});
+
 // Delete a reference track
 router.delete('/:id', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
   try {