valamp mp3 player

\n \n \n",[],[198,204],{"_103":213,"_95":214,"_157":215,"_159":199,"_160":139,"_161":138,"_162":163,"_105":216,"_100":119,"_165":217,"_167":218,"_168":22,"_169":-5,"_170":219,"_98":220},"3e7bb558-4303-11f0-b5ac-76b3cceeab13","index.tsx","e9541664-5efa-45cd-8eda-4e5f96847bd0",["D",1749234166062],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Howl } from \"https://esm.sh/howler@2.2.4\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { CommandResult, PlayerState, Playlist, TerminalLine, Track, UIMode } from \"../shared/types.ts\";\n\n// Configuration\nconst CONFIG = {\n ALLOW_PLAYLIST_DELETION: false, // Set to false to prevent playlist deletion\n ALLOW_TRACK_DELETION: false, // Set to false to prevent track deletion\n};\n\ninterface AudioPlayer {\n howl: Howl | null;\n currentTrack: Track | null;\n playlist: Playlist | null;\n volume: number;\n}\n\ninterface NotificationState {\n show: boolean;\n message: string;\n type: \"success\" | \"error\" | \"info\";\n}\n\nconst Notification: React.FC<{\n notification: NotificationState;\n onClose: () => void;\n}> = ({ notification, onClose }) => {\n useEffect(() => {\n if (notification.show) {\n const timer = setTimeout(onClose, 3000);\n return () => clearTimeout(timer);\n }\n }, [notification.show, onClose]);\n\n if (!notification.show) return null;\n\n const bgColor = {\n success: \"bg-green-900 border-green-500\",\n error: \"bg-red-900 border-red-500\",\n info: \"bg-blue-900 border-blue-500\",\n }[notification.type];\n\n return (\n

\n {notification.message}\n \n ×\n \n

\n );\n};\n\nconst PlayerControls: React.FC<{\n playerState: PlayerState;\n playlists: Record;\n currentPlaylist: string | null;\n onCommand: (command: string) => void;\n handleProgressBarClick: (e: React.MouseEvent) => void;\n formatTime: (seconds: number) => string;\n onRefreshPlaylists: () => void;\n}> = (\n { playerState, playlists, currentPlaylist, onCommand, handleProgressBarClick, formatTime, onRefreshPlaylists },\n) => {\n const progressPercentage = playerState.duration > 0\n ? (playerState.position / playerState.duration) * 100\n : 0;\n\n return (\n

\n {/* Playlist Pills at the top */}\n

\n {Object.keys(playlists).map(name => (\n {\n onRefreshPlaylists();\n onCommand(`playlist load ${name}`);\n }}\n >\n {name}\n \n ))}\n

\n\n {/* Divider line between playlists and player */}\n

\n\n {/* Playback Status and Progress Bar */}\n {playerState.currentTrack && (\n

\n \n {playerState.currentTrack.title}\n \n \n {formatTime(playerState.position)} / {formatTime(playerState.duration)}\n \n

\n \n

\n Volume: {playerState.volume}%\n {currentPlaylist && ` | Playlist: ${currentPlaylist}`}\n

\n )}\n\n

\n onCommand(\"play\")}\n disabled={!playerState.currentTrack}\n >\n PLAY\n \n onCommand(\"pause\")}\n disabled={!playerState.isPlaying}\n >\n PAUSE\n \n onCommand(\"stop\")}\n disabled={!playerState.currentTrack}\n >\n STOP\n \n onCommand(\"prev\")}\n disabled={!currentPlaylist}\n >\n PREV\n \n onCommand(\"next\")}\n disabled={!currentPlaylist}\n >\n NEXT\n \n

\n );\n};\n\n// Simple playlist track display (just clickable, no reordering)\nconst SimplePlaylistTracks: React.FC<{\n playlists: Record;\n currentPlaylist: string | null;\n playerState: PlayerState;\n onCommand: (command: string) => void;\n formatTime: (seconds: number) => string;\n}> = ({ playlists, currentPlaylist, playerState, onCommand, formatTime }) => {\n const [isExpanded, setIsExpanded] = useState(true);\n\n if (!currentPlaylist || !playlists[currentPlaylist] || playlists[currentPlaylist].tracks.length === 0) {\n return null;\n }\n\n const playlist = playlists[currentPlaylist];\n\n const playTrack = (index: number) => {\n onCommand(`playlist goto ${currentPlaylist} ${index}`);\n };\n\n // Generate estimated duration based on track name or default\n const getEstimatedDuration = (track: any, index: number): number => {\n // For demo purposes, generate varied durations\n // In real implementation, this would fetch actual file metadata\n const base = 180; // 3 minutes base\n const variation = (track.title.length + index) % 120; // 0-2 minutes variation\n return base + variation;\n };\n\n // Calculate total playlist duration\n const calculatePlaylistDuration = (): number => {\n return playlist.tracks.reduce((total, track, index) => {\n return total + getEstimatedDuration(track, index);\n }, 0);\n };\n\n return (\n

\n setIsExpanded(!isExpanded)}\n >\n {currentPlaylist}\n \n {playlist.tracks.length} tracks • {formatTime(calculatePlaylistDuration())}\n \n {isExpanded ? \"−\" : \"+\"}\n \n\n {isExpanded && (\n

\n {playlist.tracks.map((track, index) => {\n const estimatedDuration = getEstimatedDuration(track, index);\n return (\n playTrack(index)}\n >\n

{index + 1}

\n {track.title}\n {formatTime(estimatedDuration)}\n

\n {index === playlist.currentIndex && playerState.isPlaying && \"▶\"}\n {index === playlist.currentIndex && !playerState.isPlaying && \"⏸\"}\n

\n );\n })}\n

\n )}\n \n );\n};\n\nconst PlaylistManager: React.FC<{\n playlists: Record;\n onCommand: (command: string) => void;\n onNotification: (message: string, type: \"success\" | \"error\" | \"info\") => void;\n onShowPlaylist: (playlistName: string) => void;\n onRefreshPlaylists: () => void;\n}> = ({ playlists, onCommand, onNotification, onShowPlaylist, onRefreshPlaylists }) => {\n const [selectedPlaylist, setSelectedPlaylist] = useState(\"\");\n const [newPlaylistName, setNewPlaylistName] = useState(\"\");\n const [editingPlaylist, setEditingPlaylist] = useState(null);\n const [editPlaylistName, setEditPlaylistName] = useState(\"\");\n\n const handleCreatePlaylist = async () => {\n if (newPlaylistName.trim()) {\n try {\n const response = await fetch(\"/api/playlists\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: newPlaylistName.trim() }),\n });\n\n if (response.ok) {\n setNewPlaylistName(\"\");\n onNotification(\"Playlist created successfully\", \"success\");\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || \"Failed to create playlist\", \"error\");\n }\n } catch (error) {\n onNotification(\"Error creating playlist\", \"error\");\n }\n } else {\n onNotification(\"Please enter a playlist name\", \"error\");\n }\n };\n\n const handleShowPlaylist = () => {\n if (selectedPlaylist) {\n onShowPlaylist(selectedPlaylist);\n onNotification(`Showing tracks from ${selectedPlaylist}`, \"info\");\n }\n };\n\n const startEditingPlaylist = (playlistName: string) => {\n setEditingPlaylist(playlistName);\n setEditPlaylistName(playlistName);\n };\n\n const savePlaylistEdit = async () => {\n if (editingPlaylist && editPlaylistName.trim() && editPlaylistName !== editingPlaylist) {\n try {\n const response = await fetch(`/api/playlists/${encodeURIComponent(editingPlaylist)}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ newName: editPlaylistName.trim() }),\n });\n\n if (response.ok) {\n onNotification(\"Playlist renamed successfully\", \"success\");\n setEditingPlaylist(null);\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || \"Failed to rename playlist\", \"error\");\n }\n } catch (error) {\n onNotification(\"Error renaming playlist\", \"error\");\n }\n } else {\n setEditingPlaylist(null);\n }\n };\n\n const handleDeletePlaylist = async () => {\n if (!CONFIG.ALLOW_PLAYLIST_DELETION) {\n onNotification(\"Playlist deletion is disabled\", \"error\");\n return;\n }\n\n if (selectedPlaylist) {\n try {\n const response = await fetch(`/api/playlists/${encodeURIComponent(selectedPlaylist)}`, {\n method: \"DELETE\",\n });\n\n if (response.ok) {\n onNotification(\"Playlist deleted successfully\", \"success\");\n setSelectedPlaylist(\"\");\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || \"Failed to delete playlist\", \"error\");\n }\n } catch (error) {\n onNotification(\"Error deleting playlist\", \"error\");\n }\n }\n };\n\n return (\n

CREATE PLAYLIST

\n setNewPlaylistName(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && handleCreatePlaylist()}\n className=\"compact-input\"\n />\n \n CREATE\n \n

\n\n

MANAGE PLAYLISTS

\n setSelectedPlaylist(e.target.value)}\n className=\"compact-select\"\n >\n \n {Object.keys(playlists).map(name => )}\n \n \n SHOW\n \n startEditingPlaylist(selectedPlaylist)}\n disabled={!selectedPlaylist}\n >\n EDIT\n \n \n DELETE\n \n

\n\n {editingPlaylist && (\n

RENAME PLAYLIST

\n setEditPlaylistName(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && savePlaylistEdit()}\n className=\"compact-input\"\n />\n \n SAVE\n \n setEditingPlaylist(null)}\n >\n CANCEL\n \n

\n )}\n

\n );\n};\n\nconst TrackEditor: React.FC<{\n playlists: Record;\n currentPlaylist: string | null;\n playerState: PlayerState;\n onCommand: (command: string) => void;\n onNotification: (message: string, type: \"success\" | \"error\" | \"info\") => void;\n showPlaylistTracks: string | null;\n onRefreshPlaylists: () => void;\n}> = (\n { playlists, currentPlaylist, playerState, onCommand, onNotification, showPlaylistTracks, onRefreshPlaylists },\n) => {\n const [quickUrl, setQuickUrl] = useState(\"\");\n const [quickTitle, setQuickTitle] = useState(\"\");\n const [selectedPlaylist, setSelectedPlaylist] = useState(\"\");\n const [trackManagementExpanded, setTrackManagementExpanded] = useState(false);\n const [editingTrack, setEditingTrack] = useState<{ playlist: string; index: number } | null>(null);\n const [editTrackTitle, setEditTrackTitle] = useState(\"\");\n const [editTrackUrl, setEditTrackUrl] = useState(\"\");\n\n // Generate estimated duration based on track name or default\n const getEstimatedDuration = (track: any, index: number): number => {\n // For demo purposes, generate varied durations\n // In real implementation, this would fetch actual file metadata\n const base = 180; // 3 minutes base\n const variation = (track.title.length + index) % 120; // 0-2 minutes variation\n return base + variation;\n };\n\n // Calculate total playlist duration\n const calculatePlaylistDuration = (playlistName: string): number => {\n if (!playlists[playlistName]) return 0;\n return playlists[playlistName].tracks.reduce((total, track, index) => {\n return total + getEstimatedDuration(track, index);\n }, 0);\n };\n\n // Format time helper\n const formatTime = (seconds: number): string => {\n if (seconds < 3600) {\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = Math.floor(seconds % 60);\n return `${minutes}:${remainingSeconds.toString().padStart(2, \"0\")}`;\n } else {\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor((seconds % 3600) / 60);\n const remainingSeconds = Math.floor(seconds % 60);\n return `${hours}:${minutes.toString().padStart(2, \"0\")}:${remainingSeconds.toString().padStart(2, \"0\")}`;\n }\n };\n\n const handleAddToPlaylist = async () => {\n if (selectedPlaylist && quickUrl.trim()) {\n try {\n new URL(quickUrl.trim());\n const title = quickTitle.trim() || quickUrl.split(\"/\").pop() || quickUrl;\n\n const response = await fetch(`/api/playlists/${encodeURIComponent(selectedPlaylist)}/tracks`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url: quickUrl.trim(), title }),\n });\n\n if (response.ok) {\n setQuickUrl(\"\");\n setQuickTitle(\"\");\n onNotification(`Track added to ${selectedPlaylist}`, \"success\");\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || \"Failed to add track\", \"error\");\n }\n } catch (error) {\n onNotification(\"Invalid URL format\", \"error\");\n }\n } else {\n onNotification(\"Please select a playlist and enter a valid URL\", \"error\");\n }\n };\n\n const startEditingTrack = (playlist: string, index: number, track: any) => {\n setEditingTrack({ playlist, index });\n setEditTrackTitle(track.title);\n setEditTrackUrl(track.url);\n };\n\n const saveTrackEdit = async () => {\n if (editingTrack && editTrackTitle.trim() && editTrackUrl.trim()) {\n try {\n new URL(editTrackUrl.trim());\n\n const response = await fetch(\n `/api/playlists/${encodeURIComponent(editingTrack.playlist)}/tracks/${editingTrack.index}`,\n {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url: editTrackUrl.trim(), title: editTrackTitle.trim() }),\n },\n );\n\n if (response.ok) {\n onNotification(\"Track updated\", \"success\");\n setEditingTrack(null);\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || \"Failed to update track\", \"error\");\n }\n } catch (error) {\n onNotification(\"Invalid URL format\", \"error\");\n }\n }\n };\n\n // Track management functions (moved from CurrentPlaylistTracks)\n const moveTrack = async (fromIndex: number, toIndex: number, targetPlaylist?: string) => {\n const playlist = targetPlaylist || currentPlaylist;\n if (!playlist || fromIndex === toIndex) return;\n\n try {\n const response = await fetch(\n `/api/playlists/${encodeURIComponent(playlist)}/tracks/${fromIndex}/move/${toIndex}`,\n {\n method: \"PUT\",\n },\n );\n\n if (response.ok) {\n onNotification(\"Track order updated\", \"success\");\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || \"Failed to reorder track\", \"error\");\n }\n } catch (error) {\n onNotification(\"Error reordering track\", \"error\");\n }\n };\n\n const removeTrack = async (index: number, targetPlaylist?: string) => {\n if (!CONFIG.ALLOW_TRACK_DELETION) {\n onNotification(\"Track deletion is disabled\", \"error\");\n return;\n }\n\n const playlist = targetPlaylist || currentPlaylist;\n if (!playlist) return;\n\n try {\n const response = await fetch(`/api/playlists/${encodeURIComponent(playlist)}/tracks/${index}`, {\n method: \"DELETE\",\n });\n\n if (response.ok) {\n onNotification(\"Track removed from playlist\", \"success\");\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || \"Failed to remove track\", \"error\");\n }\n } catch (error) {\n onNotification(\"Error removing track\", \"error\");\n }\n };\n\n const playTrack = (index: number, targetPlaylist?: string) => {\n const playlist = targetPlaylist || currentPlaylist;\n if (!playlist) return;\n onCommand(`playlist goto ${playlist} ${index}`);\n };\n\n return (\n

ADD TRACK

\n setQuickUrl(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && handleAddToPlaylist()}\n className=\"compact-input\"\n style={{ flex: 2 }}\n />\n setQuickTitle(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && handleAddToPlaylist()}\n className=\"compact-input\"\n style={{ flex: 1 }}\n />\n

\n setSelectedPlaylist(e.target.value)}\n className=\"compact-select\"\n >\n \n {Object.keys(playlists).map(name => )}\n \n \n ADD\n \n

\n\n {editingTrack && (\n

EDIT TRACK

\n setEditTrackUrl(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && saveTrackEdit()}\n className=\"compact-input\"\n style={{ flex: 2 }}\n />\n setEditTrackTitle(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && saveTrackEdit()}\n className=\"compact-input\"\n style={{ flex: 1 }}\n />\n

\n \n SAVE\n \n setEditingTrack(null)}\n >\n CANCEL\n \n

\n )}\n\n {/* Show tracks from selected playlist in Playlist Manager */}\n {showPlaylistTracks && playlists[showPlaylistTracks] && (\n

\n TRACKS IN \"{showPlaylistTracks}\"\n

\n {playlists[showPlaylistTracks].tracks.map((track, index) => (\n \n

{index + 1}

{track.title}

{track.url}

\n startEditingTrack(showPlaylistTracks, index, track)}\n title=\"Edit track\"\n >\n EDIT\n \n moveTrack(index, Math.max(0, index - 1), showPlaylistTracks)}\n disabled={index === 0}\n title=\"Move up\"\n >\n ↑\n \n \n moveTrack(\n index,\n Math.min(playlists[showPlaylistTracks].tracks.length - 1, index + 1),\n showPlaylistTracks,\n )}\n disabled={index === playlists[showPlaylistTracks].tracks.length - 1}\n title=\"Move down\"\n >\n ↓\n \n removeTrack(index, showPlaylistTracks)}\n disabled={!CONFIG.ALLOW_TRACK_DELETION}\n title=\"Remove from playlist\"\n >\n X\n \n

\n ))}\n

\n {playlists[showPlaylistTracks].tracks.length > 0 && (\n

\n Total Duration: {formatTime(calculatePlaylistDuration(showPlaylistTracks))}\n

\n )}\n

\n )}\n\n {/* Advanced Track Management */}\n {currentPlaylist && playlists[currentPlaylist] && playlists[currentPlaylist].tracks.length > 0 && (\n

\n setTrackManagementExpanded(!trackManagementExpanded)}\n >\n MANAGE TRACKS IN \"{currentPlaylist}\" {trackManagementExpanded ? \"[-]\" : \"[+]\"}\n \n {trackManagementExpanded && (\n

\n {playlists[currentPlaylist].tracks.map((track, index) => (\n \n

{index + 1}

{track.title}

{track.url}

\n startEditingTrack(currentPlaylist, index, track)}\n title=\"Edit track\"\n >\n EDIT\n \n moveTrack(index, Math.max(0, index - 1))}\n disabled={index === 0}\n title=\"Move up\"\n >\n ↑\n \n \n moveTrack(index, Math.min(playlists[currentPlaylist].tracks.length - 1, index + 1))}\n disabled={index === playlists[currentPlaylist].tracks.length - 1}\n title=\"Move down\"\n >\n ↓\n \n removeTrack(index)}\n disabled={!CONFIG.ALLOW_TRACK_DELETION}\n title=\"Remove from playlist\"\n >\n X\n \n

\n ))}\n

\n )}\n \n )}\n \n );\n};\n\n// CurrentPlaylistTracks component removed - functionality moved to TrackEditor\n\nconst ASCIIInterface: React.FC<{\n playerState: PlayerState;\n playlists: Record;\n currentPlaylist: string | null;\n onCommand: (command: string) => void;\n onNotification: (message: string, type: \"success\" | \"error\" | \"info\") => void;\n handleProgressBarClick: (e: React.MouseEvent) => void;\n formatTime: (seconds: number) => string;\n showPlaylistManager: boolean;\n onRefreshPlaylists: () => void;\n}> = (\n {\n playerState,\n playlists,\n currentPlaylist,\n onCommand,\n onNotification,\n handleProgressBarClick,\n formatTime,\n showPlaylistManager,\n onRefreshPlaylists,\n },\n) => {\n const [playlistExpanded, setPlaylistExpanded] = useState(false);\n const [trackExpanded, setTrackExpanded] = useState(false);\n const [showPlaylistTracks, setShowPlaylistTracks] = useState(null);\n\n const handleShowPlaylist = (playlistName: string) => {\n setShowPlaylistTracks(playlistName);\n setTrackExpanded(true); // Expand track editor when showing playlist tracks\n };\n\n return (\n

\n \n\n {/* Simple track list below playlist pills */}\n \n\n {showPlaylistManager && (\n <>\n

\n setPlaylistExpanded(!playlistExpanded)}\n >\n PLAYLIST MANAGER {playlistExpanded ? \"[-]\" : \"[+]\"}\n \n

\n \n

\n\n

\n setTrackExpanded(!trackExpanded)}\n >\n TRACK EDITOR {trackExpanded ? \"[-]\" : \"[+]\"}\n \n

\n \n

\n \n )}\n

\n );\n};\n\n// QuickAddDropdown component removed - functionality available in TrackEditor\n\nconst TerminalPlayer: React.FC = () => {\n // Random quotes system\n const quotes = [\n \"the sound of tokens\",\n \"from val town to your town\",\n \"where code meets melody\",\n \"ai-powered beats\",\n \"streaming dreams in val.town\",\n \"synthesizing tomorrow's sound\",\n \"musical algorithms in motion\",\n \"your terminal, your tunes\",\n \"decentralized harmony\",\n \"coding rhythms since 2024\",\n \"serverless symphonies\",\n ];\n\n const [currentQuote, setCurrentQuote] = useState(() => quotes[Math.floor(Math.random() * quotes.length)]);\n\n const [lines, setLines] = useState([\n {\n type: \"output\",\n content: \"VALAMP v3.33 - music by maso\",\n timestamp: new Date(),\n },\n ]);\n\n const [input, setInput] = useState(\"\");\n const [uiMode, setUIMode] = useState({ showASCII: true, showControls: true });\n const [notification, setNotification] = useState({\n show: false,\n message: \"\",\n type: \"info\",\n });\n // quickAddExpanded removed - QuickAddDropdown not used\n const [showConsole, setShowConsole] = useState(false);\n const [showPlaylistManager, setShowPlaylistManager] = useState(false);\n const [showPanelsButton, setShowPanelsButton] = useState(false);\n const [playerState, setPlayerState] = useState({\n isPlaying: false,\n isPaused: false,\n currentTrack: null,\n volume: 69,\n position: 0,\n duration: 0,\n });\n\n const [playlists, setPlaylists] = useState>({});\n const [currentPlaylist, setCurrentPlaylist] = useState(null);\n\n const audioPlayer = useRef({\n howl: null,\n currentTrack: null,\n playlist: null,\n volume: 69,\n });\n\n // Refs to store current values for access in Howler callbacks\n const playlistsRef = useRef(playlists);\n const currentPlaylistRef = useRef(currentPlaylist);\n\n // Update refs when state changes\n useEffect(() => {\n playlistsRef.current = playlists;\n }, [playlists]);\n\n useEffect(() => {\n currentPlaylistRef.current = currentPlaylist;\n }, [currentPlaylist]);\n\n const inputRef = useRef(null);\n const outputRef = useRef(null);\n\n // Load playlists from backend API on mount\n useEffect(() => {\n loadPlaylistsFromAPI();\n }, []);\n\n const loadPlaylistsFromAPI = async () => {\n try {\n const response = await fetch(\"/api/playlists\");\n if (response.ok) {\n const playlistsData = await response.json();\n setPlaylists(playlistsData);\n console.log(\"Loaded playlists from API:\", Object.keys(playlistsData));\n } else {\n const errorData = await response.json().catch(() => ({ error: \"Unknown error\" }));\n console.error(\"Failed to load playlists from API:\", response.status, errorData);\n addLine(\"error\", `Failed to load playlists: ${errorData.error || \"Server error\"}`);\n }\n } catch (error) {\n console.error(\"Error loading playlists:\", error);\n addLine(\"error\", \"Error connecting to server - check backend is running\");\n }\n };\n\n const createDefaultPlaylists = () => {\n // This is no longer needed as the backend creates defaults\n loadPlaylistsFromAPI();\n };\n\n // Helper function to save playlist state to API\n const syncPlaylistsToAPI = async () => {\n // For now, we'll rely on the backend managing the data\n // and reload from API when needed\n await loadPlaylistsFromAPI();\n };\n\n // Auto-scroll to bottom when new lines are added\n useEffect(() => {\n if (outputRef.current) {\n outputRef.current.scrollTop = outputRef.current.scrollHeight;\n }\n }, [lines]);\n\n // Focus input on mount and when clicked\n useEffect(() => {\n if (inputRef.current && uiMode.showControls) {\n inputRef.current.focus();\n }\n }, [uiMode.showControls]);\n\n // Update player state periodically (smooth progress bar)\n useEffect(() => {\n const interval = setInterval(() => {\n if (audioPlayer.current.howl && playerState.isPlaying) {\n const position = audioPlayer.current.howl.seek() as number;\n const duration = audioPlayer.current.howl.duration() as number;\n\n setPlayerState(prev => ({\n ...prev,\n position: position || 0,\n duration: duration || 0,\n }));\n }\n }, 100); // Update every 100ms for smoother progress bar\n\n return () => clearInterval(interval);\n }, [playerState.isPlaying]);\n\n const showNotification = useCallback((message: string, type: \"success\" | \"error\" | \"info\" = \"info\") => {\n setNotification({ show: true, message, type });\n }, []);\n\n const hideNotification = useCallback(() => {\n setNotification(prev => ({ ...prev, show: false }));\n }, []);\n const addLine = useCallback((type: TerminalLine[\"type\"], content: string) => {\n setLines(prev => [...prev, {\n type,\n content,\n timestamp: new Date(),\n }]);\n }, []);\n\n const stopCurrentTrack = useCallback(() => {\n if (audioPlayer.current.howl) {\n audioPlayer.current.howl.stop();\n audioPlayer.current.howl.unload();\n audioPlayer.current.howl = null;\n }\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: false,\n position: 0,\n duration: 0,\n }));\n }, []);\n\n const seekToPosition = useCallback((percentage: number) => {\n if (audioPlayer.current.howl && playerState.currentTrack && playerState.duration > 0) {\n const seekTime = (percentage / 100) * playerState.duration;\n audioPlayer.current.howl.seek(seekTime);\n\n setPlayerState(prev => ({\n ...prev,\n position: seekTime,\n }));\n\n addLine(\n \"output\",\n `Seeking to ${Math.floor(seekTime / 60)}:${Math.floor(seekTime % 60).toString().padStart(2, \"0\")}`,\n );\n }\n }, [playerState.currentTrack, playerState.duration, addLine]);\n\n const playTrack = useCallback((track: Track) => {\n stopCurrentTrack();\n\n addLine(\"output\", `Loading: ${track.title || track.url}`);\n showNotification(`Loading: ${track.title}`, \"info\");\n\n const howl = new Howl({\n src: [track.url],\n html5: true,\n volume: audioPlayer.current.volume / 100,\n onload: () => {\n addLine(\"output\", `✓ Loaded: ${track.title || track.url}`);\n showNotification(`✓ Loaded: ${track.title}`, \"success\");\n setPlayerState(prev => ({\n ...prev,\n currentTrack: track,\n duration: howl.duration() as number,\n }));\n },\n onplay: () => {\n setPlayerState(prev => ({\n ...prev,\n isPlaying: true,\n isPaused: false,\n }));\n addLine(\"output\", `▶️ Playing: ${track.title || track.url}`);\n },\n onpause: () => {\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: true,\n }));\n addLine(\"output\", `⏸️ Paused`);\n },\n onstop: () => {\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: false,\n position: 0,\n }));\n addLine(\"output\", `⏹️ Stopped`);\n },\n onend: () => {\n addLine(\"output\", `🏁 Track ended: ${track.title}`);\n\n // Use current state values by getting them from the React state\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: false,\n position: 0,\n }));\n\n // Auto-play next track if in playlist\n setTimeout(() => {\n const currentPlaylistName = currentPlaylistRef.current;\n const currentPlaylists = playlistsRef.current;\n\n if (currentPlaylistName && currentPlaylists[currentPlaylistName]) {\n const playlist = currentPlaylists[currentPlaylistName];\n const nextIndex = playlist.currentIndex + 1;\n\n if (nextIndex < playlist.tracks.length) {\n // Update playlist index\n setPlaylists(prev => ({\n ...prev,\n [currentPlaylistName]: {\n ...playlist,\n currentIndex: nextIndex,\n },\n }));\n\n // Play next track\n const nextTrack = playlist.tracks[nextIndex];\n addLine(\"output\", `⏭️ Auto-playing next track: ${nextTrack.title}`);\n showNotification(`⏭️ Next: ${nextTrack.title}`, \"info\");\n\n // Small delay to let state update\n setTimeout(() => playTrack(nextTrack), 200);\n } else {\n // End of playlist\n addLine(\"output\", `🏁 Playlist \"${currentPlaylistName}\" finished`);\n showNotification(`Playlist \"${currentPlaylistName}\" finished`, \"info\");\n }\n } else {\n // No playlist loaded - just single track ended\n addLine(\"output\", `🏁 Track playback completed`);\n showNotification(\"Track finished\", \"info\");\n }\n }, 100);\n },\n onloaderror: (id, error) => {\n const errorMsg = `❌ Error loading track: ${error}`;\n addLine(\"error\", errorMsg);\n showNotification(errorMsg, \"error\");\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: false,\n }));\n },\n });\n\n audioPlayer.current.howl = howl;\n audioPlayer.current.currentTrack = track;\n howl.play();\n }, [stopCurrentTrack, addLine, showNotification]);\n\n const executeCommand = useCallback((command: string): CommandResult => {\n const parts = command.trim().split(\" \");\n const cmd = parts[0].toLowerCase();\n const args = parts.slice(1);\n\n switch (cmd) {\n case \"help\":\n return {\n success: true,\n message:\n `Available commands:\\n\\n• play - Play MP3 from URL\\n\\n• pause - Pause current track\\n\\n• stop - Stop current track\\n\\n• volume <0-100> - Set volume\\n\\n• playlist add [title] - Add track to playlist\\n\\n• playlist load - Load and play playlist\\n\\n• playlist list - Show all playlists\\n\\n• playlist show - Show tracks in playlist\\n\\n• next - Play next track in playlist\\n\\n• prev - Play previous track in playlist\\n\\n• ui toggle - Toggle ASCII interface\\n\\n• clear - Clear terminal\\n\\n• help - Show this help`,\n };\n\n case \"ui\":\n if (args.length === 0) {\n return {\n success: true,\n message: `UI mode: ASCII=${uiMode.showASCII ? \"ON\" : \"OFF\"}, Console=${\n showConsole ? \"ON\" : \"OFF\"\n }, Panels=${showPlaylistManager ? \"ON\" : \"OFF\"}, Panels Button=${showPanelsButton ? \"VISIBLE\" : \"HIDDEN\"}`,\n };\n }\n const uiCmd = args[0].toLowerCase();\n switch (uiCmd) {\n case \"toggle\":\n setUIMode(prev => ({ ...prev, showASCII: !prev.showASCII }));\n return { success: true, message: `ASCII interface ${uiMode.showASCII ? \"hidden\" : \"shown\"}` };\n case \"console\":\n setShowConsole(!showConsole);\n return { success: true, message: `Console ${!showConsole ? \"enabled\" : \"disabled\"}` };\n case \"panels\":\n setShowPlaylistManager(!showPlaylistManager);\n return {\n success: true,\n message: `Playlist manager and track editor ${!showPlaylistManager ? \"enabled\" : \"disabled\"}`,\n };\n case \"dev\":\n setShowPanelsButton(!showPanelsButton);\n return {\n success: true,\n message: `Developer mode ${!showPanelsButton ? \"enabled\" : \"disabled\"}. Panels button is now ${\n !showPanelsButton ? \"visible\" : \"hidden\"\n }.`,\n };\n case \"reset\":\n setUIMode({ showASCII: true, showControls: true });\n setShowConsole(false);\n setShowPlaylistManager(false);\n setShowPanelsButton(false);\n return { success: true, message: \"UI reset to defaults\" };\n default:\n return { success: false, message: \"Usage: ui [toggle|console|panels|dev|reset]\" };\n }\n\n case \"clear\":\n setLines([]);\n return { success: true, message: \"\" };\n\n case \"play\":\n if (args.length === 0) {\n // Resume if paused\n if (audioPlayer.current.howl && playerState.isPaused) {\n audioPlayer.current.howl.play();\n return { success: true, message: \"\" };\n }\n return { success: false, message: \"Usage: play \" };\n }\n const url = args[0];\n const title = args.slice(1).join(\" \") || url.split(\"/\").pop() || url;\n playTrack({ url, title });\n return { success: true, message: \"\" };\n\n case \"pause\":\n if (audioPlayer.current.howl && playerState.isPlaying) {\n audioPlayer.current.howl.pause();\n return { success: true, message: \"\" };\n }\n return { success: false, message: \"No track is currently playing\" };\n\n case \"stop\":\n if (audioPlayer.current.howl) {\n stopCurrentTrack();\n return { success: true, message: \"\" };\n }\n return { success: false, message: \"No track is currently playing\" };\n\n case \"volume\":\n if (args.length === 0) {\n return { success: true, message: `Current volume: ${audioPlayer.current.volume}%` };\n }\n const volume = parseInt(args[0]);\n if (isNaN(volume) || volume < 0 || volume > 100) {\n return { success: false, message: \"Volume must be between 0 and 100\" };\n }\n audioPlayer.current.volume = volume;\n if (audioPlayer.current.howl) {\n audioPlayer.current.howl.volume(volume / 100);\n }\n setPlayerState(prev => ({ ...prev, volume }));\n return { success: true, message: `Volume set to ${volume}%` };\n\n case \"playlist\":\n if (args.length === 0) {\n return { success: false, message: \"Usage: playlist ...\" };\n }\n\n const subCmd = args[0].toLowerCase();\n const subArgs = args.slice(1);\n\n // Helper function to strip quotes from playlist names\n const stripQuotes = (name: string): string => {\n return name.replace(/^[\"']|[\"']$/g, \"\");\n };\n\n switch (subCmd) {\n case \"create\":\n if (subArgs.length === 0) {\n return { success: false, message: \"Usage: playlist create \" };\n }\n const playlistName = stripQuotes(subArgs.join(\" \"));\n if (playlists[playlistName]) {\n return { success: false, message: `Playlist \"${playlistName}\" already exists` };\n }\n setPlaylists(prev => ({\n ...prev,\n [playlistName]: {\n name: playlistName,\n tracks: [],\n currentIndex: 0,\n },\n }));\n return { success: true, message: `Created playlist \"${playlistName}\"` };\n\n case \"add\":\n if (subArgs.length < 2) {\n return { success: false, message: \"Usage: playlist add [title]\" };\n }\n const [targetPlaylistRaw, trackUrl, ...titleParts] = subArgs;\n const targetPlaylist = stripQuotes(targetPlaylistRaw);\n if (!playlists[targetPlaylist]) {\n return { success: false, message: `Playlist \"${targetPlaylist}\" does not exist` };\n }\n const trackTitle = titleParts.join(\" \") || trackUrl.split(\"/\").pop() || trackUrl;\n setPlaylists(prev => ({\n ...prev,\n [targetPlaylist]: {\n ...prev[targetPlaylist],\n tracks: [...prev[targetPlaylist].tracks, { url: trackUrl, title: trackTitle }],\n },\n }));\n return { success: true, message: `Added \"${trackTitle}\" to playlist \"${targetPlaylist}\"` };\n\n case \"load\":\n if (subArgs.length === 0) {\n return { success: false, message: \"Usage: playlist load \" };\n }\n const loadPlaylistName = stripQuotes(subArgs.join(\" \"));\n if (!playlists[loadPlaylistName]) {\n return { success: false, message: `Playlist \"${loadPlaylistName}\" does not exist` };\n }\n const loadPlaylist = playlists[loadPlaylistName];\n if (loadPlaylist.tracks.length === 0) {\n return { success: false, message: `Playlist \"${loadPlaylistName}\" is empty` };\n }\n\n // Update current index in database (fire-and-forget) and local state\n fetch(`/api/playlists/${encodeURIComponent(loadPlaylistName)}/index`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ currentIndex: 0 }),\n }).catch(error => {\n console.error(\"Failed to update playlist index in database:\", error);\n // Continue with local state update even if API fails\n });\n\n // Update local state immediately\n setPlaylists(prev => ({\n ...prev,\n [loadPlaylistName]: {\n ...loadPlaylist,\n currentIndex: 0,\n },\n }));\n setCurrentPlaylist(loadPlaylistName);\n playTrack(loadPlaylist.tracks[0]);\n return { success: true, message: `Loaded playlist \"${loadPlaylistName}\"` };\n\n case \"list\":\n const playlistNames = Object.keys(playlists);\n if (playlistNames.length === 0) {\n return { success: true, message: \"No playlists created\" };\n }\n const listMessage = playlistNames.map(name =>\n `• ${name} (${playlists[name].tracks.length} tracks)${currentPlaylist === name ? \" [CURRENT]\" : \"\"}`\n ).join(\"\\n\");\n return { success: true, message: `Playlists:\\n${listMessage}` };\n\n case \"show\":\n if (subArgs.length === 0) {\n return { success: false, message: \"Usage: playlist show \" };\n }\n const showPlaylistName = stripQuotes(subArgs.join(\" \"));\n if (!playlists[showPlaylistName]) {\n return { success: false, message: `Playlist \"${showPlaylistName}\" does not exist` };\n }\n const showPlaylist = playlists[showPlaylistName];\n if (showPlaylist.tracks.length === 0) {\n return { success: true, message: `Playlist \"${showPlaylistName}\" is empty` };\n }\n const tracksMessage = showPlaylist.tracks.map((track, index) =>\n `${index + 1}. ${track.title}${index === showPlaylist.currentIndex ? \" [CURRENT]\" : \"\"}`\n ).join(\"\\n\");\n return { success: true, message: `Playlist \"${showPlaylistName}\":\\n${tracksMessage}` };\n\n case \"delete\":\n if (!CONFIG.ALLOW_PLAYLIST_DELETION) {\n return { success: false, message: \"Playlist deletion is disabled\" };\n }\n if (subArgs.length === 0) {\n return { success: false, message: \"Usage: playlist delete \" };\n }\n const deletePlaylistName = stripQuotes(subArgs.join(\" \"));\n if (!playlists[deletePlaylistName]) {\n return { success: false, message: `Playlist \"${deletePlaylistName}\" does not exist` };\n }\n setPlaylists(prev => {\n const newPlaylists = { ...prev };\n delete newPlaylists[deletePlaylistName];\n return newPlaylists;\n });\n if (currentPlaylist === deletePlaylistName) {\n setCurrentPlaylist(null);\n }\n return { success: true, message: `Deleted playlist \"${deletePlaylistName}\"` };\n\n case \"reorder\":\n if (subArgs.length < 3) {\n return { success: false, message: \"Usage: playlist reorder \" };\n }\n const reorderPlaylistName = stripQuotes(subArgs[0]);\n const fromIndex = parseInt(subArgs[1]);\n const toIndex = parseInt(subArgs[2]);\n\n if (!playlists[reorderPlaylistName]) {\n return { success: false, message: `Playlist \"${reorderPlaylistName}\" does not exist` };\n }\n\n const reorderPlaylist = playlists[reorderPlaylistName];\n if (\n isNaN(fromIndex) || isNaN(toIndex)\n || fromIndex < 0 || toIndex < 0\n || fromIndex >= reorderPlaylist.tracks.length\n || toIndex >= reorderPlaylist.tracks.length\n ) {\n return { success: false, message: \"Invalid track indices\" };\n }\n\n const tracks = [...reorderPlaylist.tracks];\n const [movedTrack] = tracks.splice(fromIndex, 1);\n tracks.splice(toIndex, 0, movedTrack);\n\n let newCurrentIndex = reorderPlaylist.currentIndex;\n if (fromIndex === reorderPlaylist.currentIndex) {\n newCurrentIndex = toIndex;\n } else if (fromIndex < reorderPlaylist.currentIndex && toIndex >= reorderPlaylist.currentIndex) {\n newCurrentIndex = reorderPlaylist.currentIndex - 1;\n } else if (fromIndex > reorderPlaylist.currentIndex && toIndex <= reorderPlaylist.currentIndex) {\n newCurrentIndex = reorderPlaylist.currentIndex + 1;\n }\n\n setPlaylists(prev => ({\n ...prev,\n [reorderPlaylistName]: {\n ...reorderPlaylist,\n tracks,\n currentIndex: newCurrentIndex,\n },\n }));\n\n return { success: true, message: `Reordered track in playlist \"${reorderPlaylistName}\"` };\n\n case \"remove\":\n if (!CONFIG.ALLOW_TRACK_DELETION) {\n return { success: false, message: \"Track deletion is disabled\" };\n }\n if (subArgs.length < 2) {\n return { success: false, message: \"Usage: playlist remove \" };\n }\n const removeFromPlaylistName = stripQuotes(subArgs[0]);\n const removeIndex = parseInt(subArgs[1]);\n\n if (!playlists[removeFromPlaylistName]) {\n return { success: false, message: `Playlist \"${removeFromPlaylistName}\" does not exist` };\n }\n\n const removeFromPlaylist = playlists[removeFromPlaylistName];\n if (isNaN(removeIndex) || removeIndex < 0 || removeIndex >= removeFromPlaylist.tracks.length) {\n return { success: false, message: \"Invalid track index\" };\n }\n\n const removeTracks = [...removeFromPlaylist.tracks];\n const removedTrack = removeTracks[removeIndex];\n removeTracks.splice(removeIndex, 1);\n\n let newRemoveCurrentIndex = removeFromPlaylist.currentIndex;\n if (removeIndex === removeFromPlaylist.currentIndex) {\n // If removing current track, stop playing and reset to start\n stopCurrentTrack();\n newRemoveCurrentIndex = Math.min(removeIndex, removeTracks.length - 1);\n if (newRemoveCurrentIndex < 0) newRemoveCurrentIndex = 0;\n } else if (removeIndex < removeFromPlaylist.currentIndex) {\n newRemoveCurrentIndex = removeFromPlaylist.currentIndex - 1;\n }\n\n setPlaylists(prev => ({\n ...prev,\n [removeFromPlaylistName]: {\n ...removeFromPlaylist,\n tracks: removeTracks,\n currentIndex: newRemoveCurrentIndex,\n },\n }));\n\n return {\n success: true,\n message: `Removed \"${removedTrack.title}\" from playlist \"${removeFromPlaylistName}\"`,\n };\n\n case \"goto\":\n if (subArgs.length < 2) {\n return { success: false, message: \"Usage: playlist goto \" };\n }\n const gotoPlaylistName = stripQuotes(subArgs[0]);\n const gotoIndex = parseInt(subArgs[1]);\n\n if (!playlists[gotoPlaylistName]) {\n return { success: false, message: `Playlist \"${gotoPlaylistName}\" does not exist` };\n }\n\n const gotoPlaylist = playlists[gotoPlaylistName];\n if (isNaN(gotoIndex) || gotoIndex < 0 || gotoIndex >= gotoPlaylist.tracks.length) {\n return { success: false, message: \"Invalid track index\" };\n }\n\n setPlaylists(prev => ({\n ...prev,\n [gotoPlaylistName]: {\n ...gotoPlaylist,\n currentIndex: gotoIndex,\n },\n }));\n\n setCurrentPlaylist(gotoPlaylistName);\n playTrack(gotoPlaylist.tracks[gotoIndex]);\n\n return {\n success: true,\n message: `Playing track ${gotoIndex + 1}: ${gotoPlaylist.tracks[gotoIndex].title}`,\n };\n\n case \"rename\":\n if (subArgs.length < 2) {\n return { success: false, message: \"Usage: playlist rename \" };\n }\n const oldName = stripQuotes(subArgs[0]);\n const newName = stripQuotes(subArgs[1]);\n\n if (!playlists[oldName]) {\n return { success: false, message: `Playlist \"${oldName}\" does not exist` };\n }\n if (playlists[newName]) {\n return { success: false, message: `Playlist \"${newName}\" already exists` };\n }\n\n setPlaylists(prev => {\n const newPlaylists = { ...prev };\n newPlaylists[newName] = { ...prev[oldName], name: newName };\n delete newPlaylists[oldName];\n return newPlaylists;\n });\n\n if (currentPlaylist === oldName) {\n setCurrentPlaylist(newName);\n }\n\n return { success: true, message: `Renamed playlist \"${oldName}\" to \"${newName}\"` };\n\n case \"edit\":\n if (subArgs.length < 4) {\n return { success: false, message: \"Usage: playlist edit \" };\n }\n const editPlaylistName = stripQuotes(subArgs[0]);\n const editIndex = parseInt(subArgs[1]);\n const newUrl = stripQuotes(subArgs[2]);\n const newTitle = stripQuotes(subArgs[3]);\n\n if (!playlists[editPlaylistName]) {\n return { success: false, message: `Playlist \"${editPlaylistName}\" does not exist` };\n }\n\n const editPlaylist = playlists[editPlaylistName];\n if (isNaN(editIndex) || editIndex < 0 || editIndex >= editPlaylist.tracks.length) {\n return { success: false, message: \"Invalid track index\" };\n }\n\n const updatedTracks = [...editPlaylist.tracks];\n updatedTracks[editIndex] = { url: newUrl, title: newTitle };\n\n setPlaylists(prev => ({\n ...prev,\n [editPlaylistName]: {\n ...editPlaylist,\n tracks: updatedTracks,\n },\n }));\n\n return { success: true, message: `Updated track in playlist \"${editPlaylistName}\"` };\n\n default:\n return {\n success: false,\n message:\n \"Unknown playlist command. Use: create, add, load, list, show, delete, reorder, remove, goto, rename, edit\",\n };\n }\n\n case \"next\":\n if (!currentPlaylist || !playlists[currentPlaylist]) {\n return { success: false, message: \"No playlist is currently loaded\" };\n }\n const nextPlaylist = playlists[currentPlaylist];\n const nextIndex = nextPlaylist.currentIndex + 1;\n if (nextIndex >= nextPlaylist.tracks.length) {\n return { success: false, message: \"Already at the last track\" };\n }\n setPlaylists(prev => ({\n ...prev,\n [currentPlaylist]: {\n ...nextPlaylist,\n currentIndex: nextIndex,\n },\n }));\n playTrack(nextPlaylist.tracks[nextIndex]);\n return { success: true, message: \"\" };\n\n case \"prev\":\n if (!currentPlaylist || !playlists[currentPlaylist]) {\n return { success: false, message: \"No playlist is currently loaded\" };\n }\n const prevPlaylist = playlists[currentPlaylist];\n const prevIndex = prevPlaylist.currentIndex - 1;\n if (prevIndex < 0) {\n return { success: false, message: \"Already at the first track\" };\n }\n setPlaylists(prev => ({\n ...prev,\n [currentPlaylist]: {\n ...prevPlaylist,\n currentIndex: prevIndex,\n },\n }));\n playTrack(prevPlaylist.tracks[prevIndex]);\n return { success: true, message: \"\" };\n\n case \"asdf\":\n setShowPanelsButton(true);\n return { success: true, message: \"Developer mode activated. Panels button now visible.\" };\n\n default:\n return { success: false, message: `Unknown command: ${cmd}. Type \"help\" for available commands.` };\n }\n }, [playTrack, stopCurrentTrack, playerState, playlists, currentPlaylist, uiMode.showASCII]);\n\n const handleCommand = useCallback((command: string) => {\n // Clean the command - remove $ prefix if present\n const cleanCommand = command.startsWith(\"$ \") ? command.slice(2) : command;\n\n // Add command to terminal with proper formatting\n addLine(\"command\", `$ ${cleanCommand}`);\n\n // Execute the clean command\n const result = executeCommand(cleanCommand);\n\n // Add result to terminal\n if (result.message) {\n addLine(result.success ? \"output\" : \"error\", result.message);\n }\n }, [addLine, executeCommand]);\n\n const handleSubmit = useCallback((e: React.FormEvent) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n handleCommand(input.trim());\n setInput(\"\");\n }, [input, handleCommand]);\n\n const formatTime = (seconds: number): string => {\n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, \"0\")}`;\n };\n\n const handleProgressBarClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n if (playerState.currentTrack && playerState.duration > 0) {\n const rect = e.currentTarget.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const percentage = (clickX / rect.width) * 100;\n seekToPosition(Math.max(0, Math.min(100, percentage)));\n }\n }, [playerState.currentTrack, playerState.duration, seekToPosition]);\n\n const progressPercentage = playerState.duration > 0\n ? (playerState.position / playerState.duration) * 100\n : 0;\n\n return (\n <div className=\"terminal\">\n <button\n className=\"mode-toggle\"\n onClick={() => setUIMode(prev => ({ ...prev, showASCII: !prev.showASCII }))}\n >\n {uiMode.showASCII ? \"HIDE ASCII\" : \"SHOW ASCII\"}\n </button>\n\n <div className=\"terminal-header\">\n <div className=\"title-section\">\n <h1>VALAMP</h1>\n <span className=\"subtitle\">{currentQuote}</span>\n </div>\n <div className=\"header-controls\">\n {showPanelsButton && (\n <button\n className=\"header-toggle-btn\"\n onClick={() => setShowPlaylistManager(!showPlaylistManager)}\n >\n {showPlaylistManager ? \"HIDE PANELS\" : \"SHOW PANELS\"}\n </button>\n )}\n <button\n className=\"header-toggle-btn\"\n onClick={() => setShowConsole(!showConsole)}\n >\n X\n </button>\n </div>\n </div>\n\n {uiMode.showASCII && (\n <ASCIIInterface\n playerState={playerState}\n playlists={playlists}\n currentPlaylist={currentPlaylist}\n onCommand={handleCommand}\n onNotification={showNotification}\n handleProgressBarClick={handleProgressBarClick}\n formatTime={formatTime}\n showPlaylistManager={showPlaylistManager}\n onRefreshPlaylists={loadPlaylistsFromAPI}\n />\n )}\n\n <Notification\n notification={notification}\n onClose={hideNotification}\n />\n\n {showConsole && (\n <>\n <div className=\"terminal-output\" ref={outputRef}>\n {lines.map((line, index) => (\n <div key={index} className={`terminal-line ${line.type}`}>\n {line.content}\n </div>\n ))}\n </div>\n\n <form onSubmit={handleSubmit} className=\"terminal-input-container\">\n <span className=\"terminal-prompt\">$</span>\n <input\n ref={inputRef}\n type=\"text\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n className=\"terminal-input\"\n placeholder=\"Enter command...\"\n autoComplete=\"off\"\n spellCheck={false}\n />\n <span className=\"cursor\">_</span>\n </form>\n </>\n )}\n </div>\n );\n};\n\n// Mount the app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(<TerminalPlayer />);",[],[198,214],{"_103":222,"_95":223,"_157":224,"_159":199,"_160":139,"_161":119,"_162":163,"_105":225,"_100":32,"_165":208,"_167":226,"_168":22,"_169":-5,"_170":227,"_98":228},"012d3a5c-4301-11f0-aa52-76b3cceeab13","style.css","f2a34bf6-0927-4625-8561-81ba4ea861ab",["D",1749233204187],"@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;\n background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);\n color: #e0e0e0;\n overflow: hidden;\n font-feature-settings: \"liga\" 1, \"calt\" 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.terminal {\n height: 100vh;\n display: flex;\n flex-direction: column;\n padding: 8px;\n background: linear-gradient(135deg, #0f0f0f 0%, #1e1e1e 100%);\n border: 1px solid #333;\n box-shadow: 0 0 50px rgba(0, 255, 136, 0.1), inset 0 0 0 1px #222;\n overflow-y: auto;\n max-width: 600px;\n margin: 0 auto;\n}\n\n@media (max-width: 768px) {\n .terminal {\n height: 100vh;\n padding: 8px;\n margin: 0;\n max-width: 100%;\n border: none;\n }\n}\n\n.terminal-header {\n border-bottom: 1px solid #333;\n padding: 10px;\n margin-bottom: 12px;\n background: linear-gradient(90deg, #1a1a1a, #2a2a2a);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.title-section {\n display: flex;\n align-items: baseline;\n gap: 12px;\n}\n\n.terminal-header h1 {\n color: #00ff88;\n font-weight: 600;\n font-size: 1.2rem;\n text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);\n margin: 0;\n line-height: 1;\n}\n\n.subtitle {\n color: #666;\n font-size: 0.7rem;\n font-weight: 300;\n font-family: 'Courier New', monospace;\n opacity: 0.8;\n font-style: italic;\n text-shadow: none;\n line-height: 1;\n}\n\n.header-controls {\n display: flex;\n gap: 8px;\n}\n\n.header-toggle-btn {\n background: #2a2a2a;\n color: #e0e0e0;\n border: 1px solid #444;\n padding: 6px 10px;\n font-family: inherit;\n font-size: 0.75rem;\n cursor: pointer;\n transition: all 0.1s ease;\n text-transform: uppercase;\n font-weight: 500;\n}\n\n.header-toggle-btn:hover {\n background: #00ff88;\n color: #000;\n border-color: #00ff88;\n}\n\n@media (max-width: 768px) {\n .terminal-header {\n padding: 6px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n gap: 8px;\n }\n \n .title-section {\n gap: 8px;\n flex: 1;\n min-width: 0;\n flex-wrap: wrap;\n }\n \n .terminal-header h1 {\n font-size: 1rem;\n }\n \n .subtitle {\n font-size: 0.6rem;\n }\n \n .header-controls {\n gap: 4px;\n flex-shrink: 0;\n }\n \n .header-toggle-btn {\n padding: 6px 8px;\n font-size: 0.7rem;\n min-height: 32px;\n }\n}\n\n.terminal-output {\n flex: 1;\n overflow-y: auto;\n margin-bottom: 12px;\n padding: 12px;\n background: rgba(0, 0, 0, 0.4);\n border: 1px solid #2a2a2a;\n backdrop-filter: blur(10px);\n min-height: 200px;\n max-height: 300px;\n}\n\n.terminal-output::-webkit-scrollbar {\n width: 12px;\n}\n\n.terminal-output::-webkit-scrollbar-track {\n background: #1a1a1a;\n}\n\n.terminal-output::-webkit-scrollbar-thumb {\n background: linear-gradient(180deg, #00ff88, #00cc6a);\n border: 2px solid #1a1a1a;\n}\n\n.terminal-output::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(180deg, #00ff88, #00aa55);\n}\n\n/* Scrollbar styling for track lists - matching console theme */\n.simple-track-list::-webkit-scrollbar,\n.compact-track-list::-webkit-scrollbar {\n width: 16px;\n}\n\n.simple-track-list::-webkit-scrollbar-track,\n.compact-track-list::-webkit-scrollbar-track {\n background: #1a1a1a;\n}\n\n.simple-track-list::-webkit-scrollbar-thumb,\n.compact-track-list::-webkit-scrollbar-thumb {\n background: linear-gradient(180deg, #00ff88, #00cc6a);\n border: 2px solid #1a1a1a;\n}\n\n.simple-track-list::-webkit-scrollbar-thumb:hover,\n.compact-track-list::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(180deg, #00ff88, #00aa55);\n}\n\n.simple-track-list::-webkit-scrollbar-button,\n.compact-track-list::-webkit-scrollbar-button {\n background: #1a1a1a;\n border: 1px solid #00ff88;\n height: 16px;\n display: block;\n}\n\n.simple-track-list::-webkit-scrollbar-button:hover,\n.compact-track-list::-webkit-scrollbar-button:hover {\n background: linear-gradient(180deg, #00ff88, #00cc6a);\n}\n\n.simple-track-list::-webkit-scrollbar-button:vertical:start:decrement,\n.compact-track-list::-webkit-scrollbar-button:vertical:start:decrement {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2300ff88' d='M5 2L8 6H2z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.simple-track-list::-webkit-scrollbar-button:vertical:end:increment,\n.compact-track-list::-webkit-scrollbar-button:vertical:end:increment {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2300ff88' d='M5 8L2 4h6z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.simple-track-list::-webkit-scrollbar-button:hover:vertical:start:decrement,\n.compact-track-list::-webkit-scrollbar-button:hover:vertical:start:decrement {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23000000' d='M5 2L8 6H2z'/%3E%3C/svg%3E\");\n}\n\n.simple-track-list::-webkit-scrollbar-button:hover:vertical:end:increment,\n.compact-track-list::-webkit-scrollbar-button:hover:vertical:end:increment {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23000000' d='M5 8L2 4h6z'/%3E%3C/svg%3E\");\n}\n\n.simple-track-list::-webkit-scrollbar-corner,\n.compact-track-list::-webkit-scrollbar-corner {\n background: #1a1a1a;\n}\n\n.terminal-line {\n margin-bottom: 8px;\n word-wrap: break-word;\n line-height: 1.5;\n font-weight: 400;\n}\n\n.terminal-line.command {\n color: #00ff88;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.terminal-line.output {\n color: #e0e0e0;\n}\n\n.terminal-line.error {\n color: #ff6b6b;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(255, 107, 107, 0.3);\n}\n\n.terminal-line.info {\n color: #74c0fc;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(116, 192, 252, 0.3);\n}\n\n.terminal-input-container {\n display: flex;\n align-items: center;\n border-top: 2px solid #2a2a2a;\n padding-top: 12px;\n background: linear-gradient(90deg, #1a1a1a, #2a2a2a);\n padding: 12px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.terminal-prompt {\n color: #00ff88;\n margin-right: 12px;\n font-weight: 600;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.terminal-input {\n flex: 1;\n background: transparent;\n border: none;\n color: #e0e0e0;\n font-family: inherit;\n font-size: inherit;\n outline: none;\n font-weight: 400;\n}\n\n.terminal-input::placeholder {\n color: #666;\n font-style: italic;\n}\n\n.player-status {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 2px solid #333;\n padding: 16px;\n margin-bottom: 16px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n}\n\n.progress-bar {\n width: 100%;\n height: 18px;\n background: #333;\n margin: 12px 0;\n overflow: hidden;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.progress-bar:hover {\n background: #444;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 255, 136, 0.4);\n}\n\n.progress-bar:active {\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 136, 0.6);\n}\n\n@media (max-width: 768px) {\n .progress-bar {\n height: 20px;\n margin: 8px 0;\n }\n \n .progress-bar:hover {\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 18px rgba(0, 255, 136, 0.5);\n }\n \n .progress-bar:active {\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 255, 136, 0.7);\n }\n}\n\n.progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #00ff88, #00cc6a);\n transition: width 0.1s ease;\n box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);\n}\n\n.cursor {\n animation: blink 1s infinite;\n}\n\n@keyframes blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n.ascii-interface {\n border: 1px solid #00ff88;\n padding: 12px;\n margin: 8px 0;\n background: linear-gradient(135deg, #0a1a0a, #1a2a1a);\n font-family: 'Fira Code', monospace;\n line-height: 1.4;\n box-shadow: 0 0 30px rgba(0, 255, 136, 0.2), inset 0 1px 3px rgba(0, 255, 136, 0.1);\n backdrop-filter: blur(10px);\n}\n\n@media (max-width: 768px) {\n .ascii-interface {\n padding: 10px;\n margin: 6px 0;\n border-width: 1px;\n }\n}\n\n.ascii-player {\n text-align: center;\n margin-bottom: 20px;\n}\n\n.ascii-controls {\n display: flex;\n justify-content: space-between;\n gap: 6px;\n margin: 12px 0;\n flex-wrap: wrap;\n}\n\n.ascii-button {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #00ff88;\n color: #00ff88;\n padding: 8px 12px;\n font-family: 'Fira Code', monospace;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.1s ease;\n flex: 1;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}\n\n.ascii-button:hover {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);\n text-shadow: none;\n}\n\n.ascii-button:active {\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);\n}\n\n.ascii-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n background: #2a2a2a;\n border-color: #555;\n color: #666;\n text-shadow: none;\n}\n\n.ascii-button:disabled:hover {\n background: #2a2a2a;\n color: #666;\n box-shadow: none;\n transform: none;\n}\n\n@media (max-width: 768px) {\n .ascii-controls {\n gap: 8px;\n margin: 12px 0;\n }\n \n .ascii-button {\n padding: 12px 16px;\n font-size: 12px;\n border-width: 1px;\n flex: 1;\n min-height: 44px;\n min-width: 60px;\n }\n}\n\n.ascii-display {\n border: 2px solid #444;\n padding: 16px;\n margin: 16px 0;\n background: linear-gradient(135deg, #0a0a0a, #1a1a1a);\n min-height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(5px);\n}\n\n.ascii-volume {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n margin: 20px 0;\n padding: 16px;\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #333;\n}\n\n.ascii-volume input[type=\"range\"] {\n background: #000;\n border: 2px solid #00ff88;\n color: #00ff88;\n padding: 8px;\n width: 120px;\n appearance: none;\n height: 8px;\n}\n\n.ascii-volume input[type=\"range\"]::-webkit-slider-thumb {\n appearance: none;\n width: 20px;\n height: 20px;\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n cursor: pointer;\n box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);\n}\n\n.ascii-volume input[type=\"range\"]::-webkit-slider-track {\n background: #333;\n height: 8px;\n}\n\n.ascii-playlist-controls {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin: 20px 0;\n}\n\n.mode-toggle {\n display: none;\n}\n\n.mode-toggle:hover {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n text-shadow: none;\n}\n\n.ascii-art {\n font-size: 12px;\n line-height: 1.2;\n white-space: pre;\n color: #00ff88;\n text-align: center;\n margin: 16px 0;\n text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);\n font-weight: 500;\n}\n\n.playlist-selector {\n margin: 16px 0;\n text-align: center;\n padding: 16px;\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #333;\n}\n\nselect {\n background: #2a2a2a;\n border: 2px solid #00ff88;\n color: #ffffff;\n padding: 8px 16px;\n font-family: 'Fira Code', monospace;\n min-width: 220px;\n font-weight: 500;\n text-shadow: none;\n}\n\nselect option {\n background: #2a2a2a;\n color: #ffffff;\n padding: 8px;\n}\n\n@media (max-width: 768px) {\n select {\n padding: 12px 8px;\n margin: 4px 0;\n font-size: 16px;\n border-width: 1px;\n width: 100%;\n box-sizing: border-box;\n min-height: 44px;\n min-width: auto;\n }\n}\n\n.playlist-selector select {\n background: #2a2a2a;\n border: 2px solid #00ff88;\n color: #ffffff;\n padding: 8px 16px;\n font-family: 'Fira Code', monospace;\n min-width: 220px;\n font-weight: 500;\n text-shadow: none;\n}\n\n.playlist-selector select:focus {\n outline: none;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n}\n\n.playlist-pills {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n margin-bottom: 16px;\n}\n\n.playlist-pill {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #00ff88;\n color: #00ff88;\n padding: 6px 12px;\n font-family: 'Fira Code', monospace;\n font-size: 11px;\n cursor: pointer;\n transition: all 0.1s ease;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.playlist-pill:hover,\n.playlist-pill.active {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n text-shadow: none;\n}\n\n@media (max-width: 768px) {\n .playlist-pills {\n gap: 6px;\n margin-bottom: 12px;\n }\n \n .playlist-pill {\n padding: 10px 12px;\n font-size: 11px;\n border-width: 1px;\n flex: 1;\n min-width: 80px;\n text-align: center;\n min-height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n\n.quick-add-dropdown {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(135deg, #0a1a0a, #1a2a1a);\n border-top: 2px solid #00ff88;\n z-index: 1000;\n transition: transform 0.3s ease;\n}\n\n.quick-add-dropdown.collapsed {\n transform: translateY(calc(100% - 40px));\n}\n\n.quick-add-dropdown.expanded {\n transform: translateY(0);\n}\n\n.quick-add-toggle {\n background: transparent;\n border: none;\n color: #00ff88;\n padding: 12px;\n cursor: pointer;\n width: 100%;\n text-align: center;\n font-family: 'Fira Code', monospace;\n font-weight: 500;\n}\n\n.quick-add {\n padding: 20px;\n border-top: 1px solid #444;\n}\n\ninput[type=\"text\"], input[type=\"url\"] {\n background: #2a2a2a;\n border: 2px solid #00ff88;\n color: #ffffff;\n padding: 8px 12px;\n margin: 6px;\n font-family: 'Fira Code', monospace;\n font-weight: 400;\n transition: all 0.3s ease;\n text-shadow: none;\n}\n\ninput[type=\"text\"]:focus, input[type=\"url\"]:focus {\n outline: none;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n border-color: #00cc6a;\n}\n\ninput[type=\"text\"]::placeholder, input[type=\"url\"]::placeholder {\n color: #888;\n font-style: italic;\n}\n\n@media (max-width: 768px) {\n input[type=\"text\"], input[type=\"url\"] {\n padding: 12px 8px;\n margin: 4px 0;\n font-size: 16px;\n border-width: 1px;\n width: 100%;\n box-sizing: border-box;\n min-height: 44px;\n }\n}\n\n.quick-add input {\n background: #2a2a2a;\n border: 2px solid #00ff88;\n color: #ffffff;\n padding: 8px 12px;\n margin: 6px;\n font-family: 'Fira Code', monospace;\n width: calc(50% - 12px);\n font-weight: 400;\n transition: all 0.3s ease;\n text-shadow: none;\n}\n\n.quick-add input:focus {\n outline: none;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n border-color: #00cc6a;\n}\n\n.quick-add input::placeholder {\n color: #888;\n font-style: italic;\n}\n\n.quick-add button {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 2px solid #00ff88;\n color: #00ff88;\n padding: 8px 16px;\n font-family: 'Fira Code', monospace;\n cursor: pointer;\n margin: 6px;\n font-weight: 500;\n transition: all 0.3s ease;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.quick-add button:hover {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n text-shadow: none;\n}\n\n@media (max-width: 768px) {\n .quick-add button, button {\n padding: 12px 16px;\n margin: 4px 0;\n font-size: 14px;\n border-width: 1px;\n min-height: 44px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n \n /* Make all form elements stack vertically on mobile */\n .quick-add,\n .collapsible-content > div {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n \n .quick-add .flex,\n .collapsible-content .flex {\n flex-direction: column;\n }\n}\n\n.collapsible-section {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #00ff88;\n box-shadow: inset 0 0 0 1px #222;\n margin: 6px 0;\n}\n\n.collapsible-header {\n background: transparent;\n border: none;\n color: #00ff88;\n padding: 10px;\n cursor: pointer;\n width: 100%;\n text-align: left;\n font-family: 'Fira Code', monospace;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n font-size: 0.85rem;\n transition: all 0.1s ease;\n}\n\n.collapsible-header:hover {\n background: rgba(0, 255, 136, 0.1);\n}\n\n.collapsible-content {\n padding: 16px;\n border-top: 1px solid #444;\n}\n\n.collapsible-content.collapsed {\n display: none;\n}\n\n@media (max-width: 768px) {\n .collapsible-section {\n border-width: 1px;\n margin: 6px 0;\n }\n \n .collapsible-header {\n padding: 12px 8px;\n font-size: 0.9rem;\n min-height: 44px;\n display: flex;\n align-items: center;\n }\n \n .collapsible-content {\n padding: 12px 8px;\n }\n}\n\n.player-controls {\n background: linear-gradient(135deg, #0a1a0a, #1a2a1a);\n border: 1px solid #00ff88;\n padding: 12px;\n margin: 6px 0;\n}\n\n@media (max-width: 768px) {\n .player-controls {\n padding: 10px;\n margin: 4px 0;\n border-width: 1px;\n }\n}\n\n.current-playlist-tracks {\n background: linear-gradient(135deg, #0a1a0a, #1a2a1a);\n border: 1px solid #00ff88;\n margin: 6px 0;\n padding: 12px;\n}\n\n.playlist-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: #00ff88;\n font-weight: 500;\n margin-bottom: 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid #444;\n}\n\n.playlist-header h3 {\n margin: 0;\n font-size: 14px;\n}\n\n.playlist-header span {\n color: #888;\n font-size: 12px;\n}\n\n.track-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.track-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px;\n background: rgba(42, 42, 42, 0.3);\n border: 1px solid #444;\n transition: all 0.3s ease;\n}\n\n.track-item:hover {\n background: rgba(0, 255, 136, 0.1);\n border-color: #00ff88;\n}\n\n.track-item.current {\n background: rgba(0, 255, 136, 0.2);\n border-color: #00ff88;\n}\n\n.track-item.playing {\n background: rgba(0, 255, 136, 0.3);\n border-color: #00cc6a;\n box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);\n}\n\n.track-number {\n color: #00ff88;\n font-weight: 500;\n min-width: 24px;\n text-align: center;\n font-size: 12px;\n}\n\n.track-info {\n flex: 1;\n min-width: 0;\n}\n\n.track-title {\n color: #ffffff;\n font-weight: 500;\n font-size: 13px;\n margin-bottom: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.track-url {\n color: #888;\n font-size: 11px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.track-controls {\n display: flex;\n gap: 4px;\n}\n\n.track-button {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #00ff88;\n color: #00ff88;\n padding: 4px 8px;\n font-family: 'Fira Code', monospace;\n font-size: 10px;\n cursor: pointer;\n transition: all 0.3s ease;\n text-shadow: 0 0 3px rgba(0, 255, 136, 0.3);\n}\n\n.track-button:hover {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n text-shadow: none;\n}\n\n.track-button:disabled {\n background: #333;\n border-color: #555;\n color: #666;\n cursor: not-allowed;\n text-shadow: none;\n}\n\n.track-button.remove {\n border-color: #ff6b6b;\n color: #ff6b6b;\n}\n\n.track-button.remove:hover {\n background: linear-gradient(135deg, #ff6b6b, #ff5252);\n color: #000;\n}\n\n/* Player status at top */\n.player-status-top {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #333;\n padding: 12px;\n margin-bottom: 16px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}\n\n/* Simple playlist tracks - clickable only */\n.simple-playlist-tracks {\n margin-bottom: 12px;\n border: 1px solid #333;\n background: linear-gradient(135deg, #1a1a1a, #222);\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #222;\n width: 100%;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n.playlist-header-toggle {\n width: 100%;\n background: linear-gradient(90deg, #2a2a2a, #333);\n border: none;\n color: #00ff88;\n padding: 10px 14px;\n font-family: inherit;\n font-size: 0.85rem;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all 0.1s ease;\n border-bottom: 1px solid #333;\n}\n\n.playlist-header-toggle:hover {\n background: linear-gradient(90deg, #333, #3a3a3a);\n}\n\n.playlist-name {\n font-weight: 600;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.playlist-info {\n color: #888;\n font-size: 0.8rem;\n font-weight: 400;\n}\n\n.toggle-icon {\n font-size: 1.2rem;\n font-weight: bold;\n color: #00ff88;\n}\n\n.simple-track-list {\n /* Remove max-height on desktop - show all tracks */\n width: 100%;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n}\n\n.simple-track-item {\n display: flex;\n align-items: center;\n padding: 8px 14px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n cursor: pointer;\n transition: all 0.1s ease;\n background: transparent;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.simple-track-item:last-child {\n border-bottom: none;\n}\n\n.simple-track-item:hover {\n background: rgba(0, 255, 136, 0.08);\n}\n\n.simple-track-item.current {\n background: rgba(0, 255, 136, 0.12);\n border-left: 2px solid #00ff88;\n}\n\n.simple-track-item.playing {\n background: rgba(0, 255, 136, 0.15);\n border-left: 2px solid #00ff88;\n box-shadow: inset 0 0 8px rgba(0, 255, 136, 0.2);\n}\n\n.simple-track-item .track-number {\n width: 30px;\n text-align: center;\n font-weight: 600;\n color: #999;\n}\n\n.simple-track-item .track-info {\n flex: 1;\n margin-left: 12px;\n}\n\n.simple-track-item .track-title {\n font-weight: 500;\n color: #e0e0e0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n}\n\n.track-name {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.track-duration {\n font-size: 0.75rem;\n color: #666;\n font-weight: 400;\n flex-shrink: 0;\n}\n\n.simple-track-item .track-status {\n width: 20px;\n text-align: center;\n font-size: 0.8rem;\n}\n\n@media (max-width: 768px) {\n .simple-playlist-tracks {\n margin-bottom: 10px;\n }\n \n .playlist-header-toggle {\n padding: 12px 14px;\n font-size: 0.9rem;\n }\n \n .playlist-info {\n font-size: 0.75rem;\n }\n \n .simple-track-list {\n max-height: 280px; /* Scrollable on mobile */\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n -webkit-overflow-scrolling: touch;\n touch-action: pan-y;\n }\n \n .simple-track-item {\n padding: 12px 10px;\n min-height: 48px;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n \n .simple-track-item.current,\n .simple-track-item.playing {\n border-left: 3px solid #00ff88;\n }\n \n .simple-track-item .track-number {\n width: 28px;\n font-size: 0.85rem;\n font-weight: 600;\n }\n \n .simple-track-item .track-info {\n margin-left: 10px;\n }\n \n .simple-track-item .track-title {\n font-size: 0.9rem;\n /* Keep duration inline on mobile */\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n }\n \n .track-name {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n \n .track-duration {\n font-size: 0.75rem;\n margin-left: 0;\n flex-shrink: 0;\n color: #888;\n }\n \n .simple-track-item .track-status {\n width: 18px;\n font-size: 0.9rem;\n }\n}\n\n/* Hide mode toggle button */\n.mode-toggle {\n display: none;\n}\n\n/* Compact section styling */\n.compact-section {\n margin-bottom: 12px;\n}\n\n.compact-row {\n margin-bottom: 12px;\n}\n\n.compact-label {\n font-size: 0.85rem;\n font-weight: 500;\n color: #00ff88;\n margin-bottom: 4px;\n display: block;\n}\n\n.compact-controls {\n display: flex;\n gap: 6px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.compact-input {\n background: #2a2a2a;\n border: 1px solid #444;\n color: #e0e0e0;\n padding: 4px 8px;\n font-family: inherit;\n font-size: 0.8rem;\n min-width: 100px;\n}\n\n.compact-input:focus {\n outline: none;\n border-color: #00ff88;\n box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.compact-select {\n background: #2a2a2a;\n border: 1px solid #444;\n color: #e0e0e0;\n padding: 4px 8px;\n font-family: inherit;\n font-size: 0.8rem;\n min-width: 120px;\n}\n\n.compact-select:focus {\n outline: none;\n border-color: #00ff88;\n box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.header-toggle-btn.compact {\n padding: 3px 6px;\n font-size: 0.7rem;\n min-width: 30px;\n}\n\n.header-toggle-btn.compact.remove:hover {\n background: #ff4444;\n border-color: #ff4444;\n color: #fff;\n}\n\n/* Compact track styling */\n.compact-track-section {\n margin-bottom: 12px;\n border: 1px solid #333;\n background: #1a1a1a;\n}\n\n.compact-track-header {\n background: #2a2a2a;\n color: #00ff88;\n padding: 6px 12px;\n font-size: 0.85rem;\n font-weight: 500;\n border-bottom: 1px solid #333;\n}\n\n.compact-track-header.clickable {\n cursor: pointer;\n border: none;\n width: 100%;\n text-align: left;\n}\n\n.compact-track-header.clickable:hover {\n background: #333;\n}\n\n.compact-track-list {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.compact-track-item {\n display: flex;\n align-items: center;\n padding: 4px 8px;\n border-bottom: 1px solid #2a2a2a;\n font-size: 0.8rem;\n}\n\n.compact-track-item:hover {\n background: #2a2a2a;\n}\n\n.compact-track-item.current {\n background: #0a3a0a;\n border-left: 3px solid #00ff88;\n}\n\n.compact-track-number {\n min-width: 30px;\n color: #888;\n font-weight: 500;\n}\n\n.compact-track-info {\n flex: 1;\n margin: 0 8px;\n min-width: 0;\n}\n\n.compact-track-title {\n color: #e0e0e0;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.compact-track-url {\n color: #888;\n font-size: 0.7rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: 2px;\n}\n\n.compact-track-controls {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n .compact-row {\n margin-bottom: 10px;\n }\n \n .compact-label {\n font-size: 0.8rem;\n margin-bottom: 3px;\n }\n \n .compact-controls {\n gap: 4px;\n }\n \n .compact-input, .compact-select {\n min-width: 80px;\n flex: 1;\n }\n \n .compact-track-item {\n flex-direction: column;\n align-items: stretch;\n gap: 4px;\n }\n \n .compact-track-info {\n margin: 0;\n }\n \n .compact-track-controls {\n align-self: flex-end;\n }\n}\n\n/* Playlist divider line */\n.playlist-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, #00ff88, transparent);\n margin: 12px 0;\n opacity: 0.6;\n}\n\n/* Playlist total duration styling */\n.compact-track-total {\n text-align: center;\n font-size: 12px;\n color: #0f0;\n background: rgba(0, 255, 0, 0.1);\n border: 1px solid rgba(0, 255, 0, 0.3);\n padding: 8px;\n margin-top: 8px;\n font-family: 'Fira Code', 'Courier New', monospace;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);\n}\n\n/* Simple playlist total duration - grey text aligned with tracks */\n.simple-playlist-total {\n font-size: 0.75rem;\n color: #666;\n margin-top: 8px;\n padding: 8px 12px;\n text-align: left;\n border-top: 1px solid #333;\n background: rgba(0, 0, 0, 0.1);\n}",[],[198,223],[198],{"_103":231,"_95":232,"_157":233,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":234,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":235,"_98":244},"012d802a-4301-11f0-aa52-76b3cceeab13","shared","56a189b2-0511-4f59-b683-389f51c1e5ee",["D",1749233204187],[236],{"_103":237,"_95":238,"_157":239,"_159":233,"_160":139,"_161":119,"_162":163,"_105":240,"_100":32,"_165":217,"_167":241,"_168":22,"_169":-5,"_170":242,"_98":243},"012d7e86-4301-11f0-aa52-76b3cceeab13","types.ts","f7d2f9da-3f00-4d0e-8ebd-c42a550fc66e",["D",1749233204187],"export interface Track {\n url: string;\n title: string;\n duration?: number;\n}\n\nexport interface Playlist {\n name: string;\n tracks: Track[];\n currentIndex: number;\n}\n\nexport interface PlayerState {\n isPlaying: boolean;\n isPaused: boolean;\n currentTrack: Track | null;\n volume: number;\n position: number;\n duration: number;\n}\n\nexport interface TerminalLine {\n type: 'command' | 'output' | 'error';\n content: string;\n timestamp: Date;\n}\n\nexport interface CommandResult {\n success: boolean;\n message: string;\n data?: any;\n}\n\nexport interface UIMode {\n showASCII: boolean;\n showControls: boolean;\n}",[],[232,238],[232],{"_103":246,"_95":247,"_157":248,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":249,"_100":32,"_165":208,"_167":250,"_168":22,"_169":-5,"_170":251,"_98":252},"012d81c4-4301-11f0-aa52-76b3cceeab13",".vtignore","9e6111f9-8439-413f-bf98-470b66411454",["D",1749233204187],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[247],{"_103":254,"_95":255,"_157":256,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":257,"_100":32,"_165":208,"_167":258,"_168":22,"_169":-5,"_170":259,"_98":260},"012d834a-4301-11f0-aa52-76b3cceeab13","README.md","0c7b6629-4383-4964-9bf3-19f97e5370cd",["D",1749233204187],"# valtown mp3 Player\n\nAn interface for playing MP3s and managing playlists.\n## Features\n\n- Terminal-style command interface\n- Play MP3s from URLs\n- Create and manage multiple playlists\n- Basic playback controls (play, pause, stop, volume)\n- Playlist navigation (next, previous)\n\n## Commands\n\n- `play <url>` - Play an MP3 from URL\n- `pause` - Pause current track\n- `stop` - Stop current track\n- `volume <0-100>` - Set volume\n- `playlist create <name>` - Create new playlist\n- `playlist add <name> <url> [title]` - Add track to playlist\n- `playlist load <name>` - Load and play playlist\n- `playlist list` - Show all playlists\n- `playlist show <name>` - Show tracks in playlist\n- `playlist delete <name>` - Delete playlist\n- `next` - Play next track in playlist\n- `prev` - Play previous track in playlist\n- `help` - Show all commands\n- `clear` - Clear terminal\n\n## Auth\nIn terminal enter `asdf` to show editor panels.\n\nin frontend/index.tsx\n```\n// Configuration\nconst CONFIG = {\n ALLOW_PLAYLIST_DELETION: true, // Set to false to prevent playlist deletion\n ALLOW_TRACK_DELETION: true // Set to false to prevent track deletion\n};\n```\n\n## Example Usage\n\n```bash\n# Create a new playlist\n$ playlist create \"My Favorites\"\n\n# Add tracks to the playlist (you'll need real MP3 URLs)\n$ playlist add \"My Favorites\" https://example.com/song1.mp3 \"Song Title 1\"\n$ playlist add \"My Favorites\" https://example.com/song2.mp3 \"Song Title 2\"\n\n# Load and play the playlist\n$ playlist load \"My Favorites\"\n\n# Control playback\n$ pause\n$ volume 75\n$ next\n$ prev\n\n# View playlists\n$ playlist list\n$ playlist show \"My Favorites\"\n```\n\n## Project Structure\n\n```\n├── frontend/\n│ ├── index.html # Main HTML with terminal interface\n│ ├── index.tsx # React terminal component\n│ └── style.css # Terminal styling\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── backend/\n └── index.ts # Static file server\n```",[],[255],{"_103":262,"_95":263,"_157":264,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":265,"_100":32,"_165":208,"_167":266,"_168":22,"_169":-5,"_170":267,"_98":268},"012d8606-4301-11f0-aa52-76b3cceeab13","deno.json","ebbf8757-28dc-4643-a13c-61447cde77ac",["D",1749233204187],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[263],"files",[155,173,180,186,196,202,212,221,230,236,245,253,261],"counts",{"_273":32,"_274":119,"_275":32,"_276":32},"pulls","branches","forks","envVars","contents",[],{"_103":156,"_95":99,"_157":158,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":280,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":281},["D",1749233204187],[99],"upstreamProject","upstreamBranch",{"_103":142,"_105":285,"_286":287,"_95":43,"_140":148,"_100":288,"_141":-5,"_143":-5,"_289":290,"_107":-5,"_152":22,"_109":146,"_151":94,"_16":120,"_150":291},["D",1748394877840],"updatedAt",["D",1750792173977],98,"lockfileKey","1753206285011-esm.town_v_all_howler@98-main","howler","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":296,"_153":301,"_269":341,"_208":342,"_277":344,"_345":346,"_349":163,"_350":-5,"_351":206,"_352":138,"_353":354},{"_103":104,"_95":96,"_105":297,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":113,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":298,"_133":299,"_136":300,"_152":22},["D",1749233204187],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_103":139,"_140":104,"_141":142,"_143":144,"_145":146,"_147":148,"_149":120,"_150":96,"_151":94},[302,305,308,314,326,332,335,338],{"_103":156,"_95":99,"_157":158,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":164,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":303,"_98":304},[],[99],{"_103":174,"_95":175,"_157":176,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":177,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":306,"_98":307},[],[175],{"_103":181,"_95":182,"_157":183,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":184,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":309,"_98":313},[310],{"_103":187,"_95":188,"_157":189,"_159":183,"_160":139,"_161":119,"_162":163,"_105":190,"_100":32,"_165":191,"_167":192,"_168":22,"_169":96,"_170":311,"_98":312},[],[182,188],[182],{"_103":197,"_95":198,"_157":199,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":200,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":315,"_98":325},[316,319,322],{"_103":203,"_95":204,"_157":205,"_159":199,"_160":139,"_161":206,"_162":163,"_105":207,"_100":119,"_165":208,"_167":209,"_168":22,"_169":-5,"_170":317,"_98":318},[],[198,204],{"_103":213,"_95":214,"_157":215,"_159":199,"_160":139,"_161":138,"_162":163,"_105":216,"_100":119,"_165":217,"_167":218,"_168":22,"_169":-5,"_170":320,"_98":321},[],[198,214],{"_103":222,"_95":223,"_157":224,"_159":199,"_160":139,"_161":119,"_162":163,"_105":225,"_100":32,"_165":208,"_167":226,"_168":22,"_169":-5,"_170":323,"_98":324},[],[198,223],[198],{"_103":231,"_95":232,"_157":233,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":234,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":327,"_98":331},[328],{"_103":237,"_95":238,"_157":239,"_159":233,"_160":139,"_161":119,"_162":163,"_105":240,"_100":32,"_165":217,"_167":241,"_168":22,"_169":-5,"_170":329,"_98":330},[],[232,238],[232],{"_103":246,"_95":247,"_157":248,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":249,"_100":32,"_165":208,"_167":250,"_168":22,"_169":-5,"_170":333,"_98":334},[],[247],{"_103":254,"_95":255,"_157":256,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":257,"_100":32,"_165":208,"_167":258,"_168":22,"_169":-5,"_170":336,"_98":337},[],[255],{"_103":262,"_95":263,"_157":264,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":265,"_100":32,"_165":208,"_167":266,"_168":22,"_169":-5,"_170":339,"_98":340},[],[263],[302,305,308,310,314,316,319,322,326,328,332,335,338],{"_103":156,"_95":99,"_157":158,"_159":-5,"_160":139,"_161":119,"_162":163,"_105":280,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":343},[99],[],"upstream",{"_103":142,"_105":347,"_286":348,"_95":43,"_140":148,"_100":288,"_141":-5,"_143":-5,"_289":290,"_107":-5,"_152":22,"_109":146,"_151":94,"_16":120,"_150":291},["D",1748394877840],["D",1750792173977],"showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"] </article></body></html>