{
+ setSelectedSong(s);
+ setShowRightSidebar(true);
+ }}
+ onNavigateToProfile={handleNavigateToProfile}
+ />
+ );
+
+ case 'song':
+ if (!viewingSongId) return null;
+ return (
+
+ );
+
+ case 'search':
+ return (
+
+ );
+
+ case 'training':
+ case 'stem-splitting':
+ case 'voice-cloning':
+ case 'midi':
+ return (
+
+
+ {currentView === 'training' && }
+ {currentView === 'stem-splitting' && }
+ {currentView === 'voice-cloning' && }
+ {currentView === 'midi' && }
+
+
+ {
+ setSelectedSong(s);
+ setShowRightSidebar(true);
+ }}
+ onToggleLike={toggleLike}
+ onAddToPlaylist={openAddToPlaylistModal}
+ onOpenVideo={openVideoGenerator}
+ onShowDetails={handleShowDetails}
+ onNavigateToProfile={handleNavigateToProfile}
+ onReusePrompt={handleReuse}
+ onDelete={handleDeleteSong}
+ />
+
+ {showRightSidebar && (
+
+ setShowRightSidebar(false)}
+ onOpenVideo={() => selectedSong && openVideoGenerator(selectedSong)}
+ onReuse={handleReuse}
+ onSongUpdate={handleSongUpdate}
+ onNavigateToProfile={handleNavigateToProfile}
+ onNavigateToSong={handleNavigateToSong}
+ isLiked={selectedSong ? likedSongIds.has(selectedSong.id) : false}
+ onToggleLike={toggleLike}
+ onPlay={playSong}
+ isPlaying={isPlaying}
+ currentSong={currentSong}
+ onDelete={handleDeleteSong}
+ />
+
+ )}
+
+
+
+
+ {/* Create Panel */}
+
+
+
+
+ {/* Song List */}
+
+ {
+ setSelectedSong(s);
+ setShowRightSidebar(true);
+ }}
+ onToggleLike={toggleLike}
+ onAddToPlaylist={openAddToPlaylistModal}
+ onOpenVideo={openVideoGenerator}
+ onShowDetails={handleShowDetails}
+ onNavigateToProfile={handleNavigateToProfile}
+ onReusePrompt={handleReuse}
+ onDelete={handleDeleteSong}
+ />
+
+
+ {/* Right Sidebar */}
+ {showRightSidebar && (
+
+ setShowRightSidebar(false)}
+ onOpenVideo={() => selectedSong && openVideoGenerator(selectedSong)}
+ onReuse={handleReuse}
+ onSongUpdate={handleSongUpdate}
+ onNavigateToProfile={handleNavigateToProfile}
+ onNavigateToSong={handleNavigateToSong}
+ isLiked={selectedSong ? likedSongIds.has(selectedSong.id) : false}
+ onToggleLike={toggleLike}
+ onPlay={playSong}
+ isPlaying={isPlaying}
+ currentSong={currentSong}
+ onDelete={handleDeleteSong}
+ />
+
+ )}
+
+ {/* Mobile Toggle Button */}
+
+
+
+
+
+ {
+ setCurrentView(v);
+ if (v === 'create') {
+ setMobileShowList(false);
+ window.history.pushState({}, '', '/');
+ } else if (v === 'library') {
+ window.history.pushState({}, '', '/library');
+ } else if (v === 'search') {
+ window.history.pushState({}, '', '/search');
+ } else if (v === 'training') {
+ window.history.pushState({}, '', '/training');
+ } else if (v === 'stem-splitting') {
+ window.history.pushState({}, '', '/stem-splitting');
+ } else if (v === 'voice-cloning') {
+ window.history.pushState({}, '', '/voice-cloning');
+ } else if (v === 'midi') {
+ window.history.pushState({}, '', '/midi');
+ }
+ }}
+ theme={theme}
+ onToggleTheme={toggleTheme}
+ user={user}
+ onOpenConsole={() => setShowConsole(true)}
+ onOpenSettings={() => setShowSettingsModal(true)}
+ />
+
+
+ {renderContent()}
+
+
+
+
setIsShuffle(!isShuffle)}
+ repeatMode={repeatMode}
+ onToggleRepeat={() => setRepeatMode(prev => prev === 'none' ? 'all' : prev === 'all' ? 'one' : 'none')}
+ isLiked={currentSong ? likedSongIds.has(currentSong.id) : false}
+ onToggleLike={() => currentSong && toggleLike(currentSong.id)}
+ onNavigateToSong={handleNavigateToSong}
+ onOpenVideo={() => currentSong && openVideoGenerator(currentSong)}
+ onReusePrompt={() => currentSong && handleReuse(currentSong)}
+ onAddToPlaylist={() => currentSong && openAddToPlaylistModal(currentSong)}
+ onDelete={() => currentSong && handleDeleteSong(currentSong)}
+ />
+
+ setIsCreatePlaylistModalOpen(false)}
+ onCreate={createPlaylist}
+ />
+ setIsAddToPlaylistModalOpen(false)}
+ playlists={playlists}
+ onSelect={addSongToPlaylist}
+ onCreateNew={() => {
+ setIsAddToPlaylistModalOpen(false);
+ setIsCreatePlaylistModalOpen(true);
+ }}
+ />
+
+ setIsVideoModalOpen(false)}
+ song={songForVideo}
+ />
+ setShowConsole(false)}
+ />
+ setShowSettingsModal(false)}
+ theme={theme}
+ onToggleTheme={toggleTheme}
+ onNavigateToProfile={handleNavigateToProfile}
+ />
+
+ {/* Mobile Details Modal */}
+ {showMobileDetails && selectedSong && (
+
+
setShowMobileDetails(false)}
+ />
+
+ setShowMobileDetails(false)}
+ onOpenVideo={() => selectedSong && openVideoGenerator(selectedSong)}
+ onReuse={handleReuse}
+ onSongUpdate={handleSongUpdate}
+ onNavigateToProfile={handleNavigateToProfile}
+ onNavigateToSong={handleNavigateToSong}
+ isLiked={selectedSong ? likedSongIds.has(selectedSong.id) : false}
+ onToggleLike={toggleLike}
+ onPlay={playSong}
+ isPlaying={isPlaying}
+ currentSong={currentSong}
+ onDelete={handleDeleteSong}
+ />
+
+
+ )}
+
+ {children}
+
+ );
+};
+
+export default AlbumCover;
diff --git a/ui/components/ConsolePanel.tsx b/ui/components/ConsolePanel.tsx
new file mode 100644
index 0000000..76a6eea
--- /dev/null
+++ b/ui/components/ConsolePanel.tsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { X, Copy } from 'lucide-react';
+
+interface ConsolePanelProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+const LOG_STREAM_URL = '/logs/stream';
+
+export const ConsolePanel: React.FC = ({ isOpen, onClose }) => {
+ const [lines, setLines] = useState([]);
+ const [status, setStatus] = useState<'connecting' | 'connected' | 'closed' | 'error'>('closed');
+ const [errorMessage, setErrorMessage] = useState(null);
+ const bottomRef = useRef(null);
+ const eventSourceRef = useRef(null);
+
+ useEffect(() => {
+ if (!isOpen) return;
+
+ setLines(prev => [...prev, `[Console] Connecting to ${LOG_STREAM_URL}...`]);
+ setStatus('connecting');
+ setErrorMessage(null);
+
+ const base = window.location.origin;
+ const url = `${base}${LOG_STREAM_URL}`;
+ const es = new EventSource(url);
+ eventSourceRef.current = es;
+
+ es.onopen = () => {
+ setStatus('connected');
+ setLines(prev => [...prev, '[System] Log stream connected.']);
+ };
+
+ es.onmessage = (event: MessageEvent) => {
+ const msg = event.data;
+ if (msg != null && typeof msg === 'string') {
+ setLines(prev => {
+ const next = [...prev, msg];
+ if (next.length > 2000) return next.slice(-1500);
+ return next;
+ });
+ }
+ };
+
+ es.onerror = () => {
+ if (es.readyState === EventSource.CLOSED) {
+ setStatus('closed');
+ } else {
+ setStatus('error');
+ setErrorMessage('Connection lost. Reconnecting...');
+ }
+ };
+
+ return () => {
+ es.close();
+ eventSourceRef.current = null;
+ };
+ }, [isOpen]);
+
+ useEffect(() => {
+ bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+ }, [lines]);
+
+ const copyToClipboard = () => {
+ const text = lines.join('\n');
+ if (!text) return;
+ navigator.clipboard.writeText(text).then(
+ () => setErrorMessage(null),
+ () => setErrorMessage('Copy failed')
+ );
+ };
+
+ if (!isOpen) return null;
+
+ return (
+
+
+
+
+ Console
+
+ {status}
+
+ {errorMessage && (
+ {errorMessage}
+ )}
+
+
+
+
+
+
+
+ {lines.map((line, i) => (
+
+ {line}
+
+ ))}
+
+
+
+
+
+
handleFileSelect(e, 'reference')}
+ className="hidden"
+ />
+
handleFileSelect(e, 'source')}
+ className="hidden"
+ />
+