@involvex/youtube-music-cli 0.0.1 → 0.0.3

package/dist/source/components/common/ShortcutsBar.js

@@ -10,7 +10,7 @@ import { KEYBINDINGS } from "../../utils/constants.js";
 export default function ShortcutsBar() {
     const { theme } = useTheme();
     const { dispatch: navDispatch } = useNavigation();
-    const { state: playerState, pause, resume, next, previous, volumeUp, volumeDown, } = usePlayer();
+    const { state: playerState, pause, resume, next, previous, volumeUp, volumeDown, volumeFineUp, volumeFineDown, } = usePlayer();
     // Register key bindings globally
     const handlePlayPause = () => {
         if (playerState.isPlaying) {
@@ -28,6 +28,8 @@ export default function ShortcutsBar() {
     useKeyBinding(KEYBINDINGS.PREVIOUS, previous);
     useKeyBinding(KEYBINDINGS.VOLUME_UP, volumeUp);
     useKeyBinding(KEYBINDINGS.VOLUME_DOWN, volumeDown);
+    useKeyBinding(KEYBINDINGS.VOLUME_FINE_UP, volumeFineUp);
+    useKeyBinding(KEYBINDINGS.VOLUME_FINE_DOWN, volumeFineDown);
     useKeyBinding(KEYBINDINGS.SETTINGS, goConfig);
     return (_jsxs(Box, { borderStyle: "single", borderColor: theme.colors.dim, paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: theme.colors.dim, children: ["Shortcuts: ", _jsx(Text, { color: theme.colors.text, children: "Space" }), " Play/Pause |", ' ', _jsx(Text, { color: theme.colors.text, children: "n" }), " Next |", ' ', _jsx(Text, { color: theme.colors.text, children: "p" }), " Previous |", ' ', _jsx(Text, { color: theme.colors.text, children: "/" }), " Search |", ' ', _jsx(Text, { color: theme.colors.text, children: "," }), " Settings |", ' ', _jsx(Text, { color: theme.colors.text, children: "?" }), " Help |", ' ', _jsx(Text, { color: theme.colors.text, children: "q" }), " Quit"] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.dim, children: "[=/" }), "-", _jsx(Text, { color: theme.colors.dim, children: "]" }), " Vol:", ' ', _jsxs(Text, { color: theme.colors.primary, children: [playerState.volume, "%"] })] })] }));
 }

package/dist/source/components/config/KeybindingsLayout.d.ts

@@ -0,0 +1 @@
+export default function KeybindingsLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/source/components/config/KeybindingsLayout.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Custom keybindings editor — shows all actions and their bound keys
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { useTheme } from "../../hooks/useTheme.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { getConfigService } from "../../services/config/config.service.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+function buildEntries() {
+    const config = getConfigService();
+    return Object.entries(KEYBINDINGS).map(([action, defaultKeys]) => {
+        const custom = config.getKeybinding(action);
+        return {
+            action,
+            label: action
+                .toLowerCase()
+                .replace(/_/g, ' ')
+                .replace(/\b\w/g, c => c.toUpperCase()),
+            keys: custom ?? [...defaultKeys],
+        };
+    });
+}
+export default function KeybindingsLayout() {
+    const { theme } = useTheme();
+    const { dispatch } = useNavigation();
+    const [entries, setEntries] = useState(buildEntries);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isCapturing, setIsCapturing] = useState(false);
+    const [statusMessage, setStatusMessage] = useState('');
+    useInput((input, key) => {
+        if (isCapturing) {
+            // Build key string from the pressed key
+            const parts = [];
+            if (key.ctrl)
+                parts.push('ctrl');
+            if (key.meta)
+                parts.push('meta');
+            if (key.shift)
+                parts.push('shift');
+            let keyName = input;
+            if (key.upArrow)
+                keyName = 'up';
+            else if (key.downArrow)
+                keyName = 'down';
+            else if (key.leftArrow)
+                keyName = 'left';
+            else if (key.rightArrow)
+                keyName = 'right';
+            else if (key.return)
+                keyName = 'enter';
+            else if (key.tab)
+                keyName = 'tab';
+            else if (key.backspace || key.delete)
+                keyName = 'backspace';
+            else if (key.escape) {
+                setIsCapturing(false);
+                setStatusMessage('Cancelled');
+                return;
+            }
+            if (!keyName || keyName.length === 0)
+                return;
+            parts.push(keyName);
+            const newKey = parts.join('+');
+            // Persist new binding
+            const entry = entries[selectedIndex];
+            if (!entry)
+                return;
+            getConfigService().setKeybinding(entry.action, [newKey]);
+            setEntries(buildEntries());
+            setIsCapturing(false);
+            setStatusMessage(`Bound ${entry.action} to "${newKey}"`);
+            return;
+        }
+        if (key.escape) {
+            dispatch({ category: 'GO_BACK' });
+            return;
+        }
+        if (key.upArrow || input === 'k') {
+            setSelectedIndex(i => Math.max(0, i - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            setSelectedIndex(i => Math.min(entries.length - 1, i + 1));
+        }
+        else if (key.return) {
+            setIsCapturing(true);
+            setStatusMessage('Press any key to bind...');
+        }
+        else if (input === 'r') {
+            // Reset selected binding to default
+            const entry = entries[selectedIndex];
+            if (!entry)
+                return;
+            const defaultKeys = KEYBINDINGS[entry.action];
+            if (defaultKeys) {
+                getConfigService().setKeybinding(entry.action, [
+                    ...defaultKeys,
+                ]);
+                setEntries(buildEntries());
+                setStatusMessage(`Reset ${entry.action} to default`);
+            }
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.primary, bold: true, children: "Custom Keybindings" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.dim, children: "\u2191/\u2193 Navigate | Enter Edit | r Reset | Esc Back" }) }), statusMessage ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.secondary, children: statusMessage }) })) : null, entries.map((entry, index) => {
+                const isSelected = index === selectedIndex;
+                return (_jsxs(Box, { marginBottom: 0, children: [_jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.text, bold: isSelected, children: isSelected ? '▶ ' : '  ' }), _jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.text, bold: isSelected, children: entry.label.padEnd(25) }), _jsx(Text, { color: theme.colors.secondary, children: entry.keys.join(', ') })] }, entry.action));
+            }), isCapturing ? (_jsxs(Box, { marginTop: 1, borderStyle: "single", borderColor: theme.colors.secondary, padding: 1, children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: ["Press any key combination...", ' '] }), _jsx(Text, { color: theme.colors.dim, children: "(Esc to cancel)" })] })) : null] }));
+}

package/dist/source/components/layouts/ExploreLayout.d.ts

@@ -0,0 +1 @@
+export default function ExploreLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/source/components/layouts/ExploreLayout.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Explore / Genre browsing view — shows curated sections from YouTube Music
+import { Box, Text, useInput } from 'ink';
+import { useState, useEffect } from 'react';
+import { useTheme } from "../../hooks/useTheme.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { getMusicService } from "../../services/youtube-music/api.js";
+export default function ExploreLayout() {
+    const { theme } = useTheme();
+    const { dispatch } = useNavigation();
+    const { play } = usePlayer();
+    const [sections, setSections] = useState([]);
+    const [sectionIndex, setSectionIndex] = useState(0);
+    const [trackIndex, setTrackIndex] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        getMusicService()
+            .getExploreSections()
+            .then(results => {
+            if (!cancelled) {
+                setSections(results);
+                setIsLoading(false);
+            }
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setError(err instanceof Error ? err.message : 'Failed to load explore');
+                setIsLoading(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const currentSection = sections[sectionIndex];
+    const tracks = currentSection?.tracks ?? [];
+    useInput((input, key) => {
+        if (key.escape) {
+            dispatch({ category: 'GO_BACK' });
+            return;
+        }
+        if (key.leftArrow || input === 'h') {
+            setSectionIndex(i => Math.max(0, i - 1));
+            setTrackIndex(0);
+        }
+        else if (key.rightArrow || input === 'l') {
+            setSectionIndex(i => Math.min(sections.length - 1, i + 1));
+            setTrackIndex(0);
+        }
+        else if (key.upArrow || input === 'k') {
+            setTrackIndex(i => Math.max(0, i - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            setTrackIndex(i => Math.min(tracks.length - 1, i + 1));
+        }
+        else if (key.return) {
+            const track = tracks[trackIndex];
+            if (track)
+                play(track);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.primary, bold: true, children: "\uD83C\uDFB5 Explore" }) }), isLoading ? (_jsx(Text, { color: theme.colors.dim, children: "Loading explore sections..." })) : error ? (_jsx(Text, { color: theme.colors.error, children: error })) : sections.length === 0 ? (_jsx(Text, { color: theme.colors.dim, children: "No sections found" })) : (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, gap: 2, children: sections.map((section, index) => (_jsx(Text, { color: index === sectionIndex
+                                ? theme.colors.primary
+                                : theme.colors.dim, bold: index === sectionIndex, underline: index === sectionIndex, children: section.title }, section.title))) }), tracks.map((track, index) => {
+                        const isSelected = index === trackIndex;
+                        const artist = track.artists?.[0]?.name ?? 'Unknown';
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.dim, children: isSelected ? '▶ ' : `${String(index + 1).padStart(2)}. ` }), _jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.text, bold: isSelected, children: track.title }), _jsxs(Text, { color: theme.colors.dim, children: [" \u2014 ", artist] })] }, track.videoId));
+                    })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.dim, children: "\u2190/\u2192 Sections | \u2191/\u2193 Tracks | Enter Play | Esc Back" }) })] }));
+}

package/dist/source/components/layouts/LyricsLayout.d.ts

@@ -0,0 +1 @@
+export default function LyricsLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/source/components/layouts/LyricsLayout.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Lyrics view layout - displays synced or plain lyrics
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { getLyricsService, } from "../../services/lyrics/lyrics.service.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+const CONTEXT_LINES = 3; // Lines shown before/after current line
+export default function LyricsLayout() {
+    const { theme } = useTheme();
+    const { state } = usePlayer();
+    const { rows } = useTerminalSize();
+    const [lyrics, setLyrics] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const lyricsService = getLyricsService();
+    // Fetch lyrics when track changes
+    useEffect(() => {
+        const track = state.currentTrack;
+        let cancelled = false;
+        if (!track) {
+            queueMicrotask(() => {
+                if (!cancelled) {
+                    setLyrics(null);
+                    setLoading(false);
+                    setError(null);
+                }
+            });
+            return;
+        }
+        const artist = track.artists?.[0]?.name ?? '';
+        queueMicrotask(() => {
+            if (!cancelled) {
+                setLoading(true);
+                setError(null);
+            }
+        });
+        void lyricsService
+            .getLyrics(track.title, artist, state.duration || undefined)
+            .then(result => {
+            if (cancelled) {
+                return;
+            }
+            setLyrics(result);
+            setLoading(false);
+            if (!result) {
+                setError('No lyrics found');
+            }
+        })
+            .catch(() => {
+            if (cancelled) {
+                return;
+            }
+            setLoading(false);
+            setError('Failed to load lyrics');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [lyricsService, state.currentTrack, state.duration]);
+    const track = state.currentTrack;
+    const title = track?.title ?? 'No track playing';
+    const artist = track?.artists?.map(a => a.name).join(', ') ?? '';
+    // Determine current line
+    const currentLineIndex = lyrics?.synced
+        ? lyricsService.getCurrentLineIndex(lyrics.synced, state.progress)
+        : -1;
+    // Calculate visible lines window
+    const visibleLines = (() => {
+        if (!lyrics?.synced)
+            return null;
+        const start = Math.max(0, currentLineIndex - CONTEXT_LINES);
+        const maxLines = Math.max(5, rows - 8);
+        const end = Math.min(lyrics.synced.length, start + maxLines);
+        return lyrics.synced.slice(start, end).map((line, i) => ({
+            line,
+            globalIndex: start + i,
+        }));
+    })();
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { borderStyle: "double", borderColor: theme.colors.secondary, paddingX: 1, children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: title }), artist && _jsxs(Text, { color: theme.colors.secondary, children: [" \u2014 ", artist] })] }), loading && _jsx(Text, { color: theme.colors.accent, children: "Loading lyrics..." }), error && !loading && _jsx(Text, { color: theme.colors.dim, children: error }), !loading && visibleLines && (_jsx(Box, { flexDirection: "column", paddingX: 1, children: visibleLines.map(({ line, globalIndex }) => (_jsxs(Text, { bold: globalIndex === currentLineIndex, color: globalIndex === currentLineIndex
+                        ? theme.colors.primary
+                        : globalIndex < currentLineIndex
+                            ? theme.colors.dim
+                            : theme.colors.text, children: [globalIndex === currentLineIndex ? '▶ ' : '  ', line.text || '♪'] }, globalIndex))) })), !loading && !lyrics?.synced && lyrics?.plain && (_jsx(Box, { flexDirection: "column", paddingX: 1, children: lyrics.plain
+                    .split('\n')
+                    .slice(0, Math.max(5, rows - 8))
+                    .map((line, i) => (_jsx(Text, { color: theme.colors.text, children: line || ' ' }, i))) })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.colors.dim, children: ["Press ", _jsx(Text, { color: theme.colors.text, children: "l" }), " or", ' ', _jsx(Text, { color: theme.colors.text, children: "Esc" }), " to go back"] }) })] }));
+}

package/dist/source/components/layouts/MainLayout.js

@@ -9,11 +9,17 @@ import { useTheme } from "../../hooks/useTheme.js";
 import { useKeyBinding } from "../../hooks/useKeyboard.js";
 import SearchLayout from "./SearchLayout.js";
 import PlayerLayout from "./PlayerLayout.js";
+import MiniPlayerLayout from "./MiniPlayerLayout.js";
 import PluginsLayout from "./PluginsLayout.js";
 import Suggestions from "../player/Suggestions.js";
 import Settings from "../settings/Settings.js";
 import ConfigLayout from "../config/ConfigLayout.js";
 import ShortcutsBar from "../common/ShortcutsBar.js";
+import LyricsLayout from "./LyricsLayout.js";
+import SearchHistory from "../search/SearchHistory.js";
+import KeybindingsLayout from "../config/KeybindingsLayout.js";
+import TrendingLayout from "./TrendingLayout.js";
+import ExploreLayout from "./ExploreLayout.js";
 import { KEYBINDINGS, VIEW } from "../../utils/constants.js";
 import { Box } from 'ink';
 import { useTerminalSize } from "../../hooks/useTerminalSize.js";
@@ -47,6 +53,18 @@ function MainLayout() {
         // From other views, go back
         dispatch({ category: 'GO_BACK' });
     }, [navState.currentView, dispatch]);
+    const goToLyrics = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.LYRICS });
+    }, [dispatch]);
+    const goToTrending = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.TRENDING });
+    }, [dispatch]);
+    const goToExplore = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.EXPLORE });
+    }, [dispatch]);
+    const togglePlayerMode = useCallback(() => {
+        dispatch({ category: 'TOGGLE_PLAYER_MODE' });
+    }, [dispatch]);
     // Global keyboard bindings
     useKeyBinding(KEYBINDINGS.QUIT, handleQuit);
     useKeyBinding(KEYBINDINGS.SEARCH, goToSearch);
@@ -54,14 +72,26 @@ function MainLayout() {
     useKeyBinding(KEYBINDINGS.SUGGESTIONS, goToSuggestions);
     useKeyBinding(KEYBINDINGS.SETTINGS, goToSettings);
     useKeyBinding(KEYBINDINGS.HELP, goToHelp);
+    useKeyBinding(['m'], togglePlayerMode);
+    useKeyBinding(['l'], goToLyrics);
+    useKeyBinding(['T'], goToTrending);
+    useKeyBinding(['e'], goToExplore);
     // Memoize the view component to prevent unnecessary remounts
     // Only recreate when currentView actually changes
     const currentView = useMemo(() => {
+        // In mini mode, only show the mini player bar
+        if (navState.playerMode === 'mini') {
+            return _jsx(MiniPlayerLayout, {}, "mini-player");
+        }
         switch (navState.currentView) {
             case 'player':
                 return _jsx(PlayerLayout, {}, "player");
             case 'search':
                 return _jsx(SearchLayout, {}, "search");
+            case 'search_history':
+                return (_jsx(SearchHistory, { onSelect: query => {
+                        dispatch({ category: 'SET_SEARCH_QUERY', query });
+                    } }, "search_history"));
             case 'playlists':
                 return _jsx(PlaylistList, {}, "playlists");
             case 'suggestions':
@@ -72,12 +102,20 @@ function MainLayout() {
                 return _jsx(PluginsLayout, {}, "plugins");
             case 'config':
                 return _jsx(ConfigLayout, {}, "config");
+            case 'lyrics':
+                return _jsx(LyricsLayout, {}, "lyrics");
+            case 'keybindings':
+                return _jsx(KeybindingsLayout, {}, "keybindings");
+            case 'trending':
+                return _jsx(TrendingLayout, {}, "trending");
+            case 'explore':
+                return _jsx(ExploreLayout, {}, "explore");
             case 'help':
                 return _jsx(Help, {}, "help");
             default:
                 return _jsx(PlayerLayout, {}, "player-default");
         }
-    }, [navState.currentView]);
+    }, [navState.currentView, navState.playerMode, dispatch]);
     return (_jsxs(Box, { flexDirection: "column", paddingX: getPadding(), borderStyle: "single", borderColor: theme.colors.primary, children: [currentView, _jsx(ShortcutsBar, {})] }));
 }
 export default React.memo(MainLayout);

package/dist/source/components/layouts/MiniPlayerLayout.d.ts

@@ -0,0 +1 @@
+export default function MiniPlayerLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/source/components/layouts/MiniPlayerLayout.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Mini player layout - compact single-line player
+import { Box, Text } from 'ink';
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { formatTime } from "../../utils/format.js";
+export default function MiniPlayerLayout() {
+    const { theme } = useTheme();
+    const { state } = usePlayer();
+    const track = state.currentTrack;
+    const artist = track?.artists?.map(a => a.name).join(', ') ?? 'Unknown';
+    const title = track?.title ?? 'No track playing';
+    const progress = formatTime(state.progress);
+    const duration = formatTime(state.duration);
+    const playIcon = state.isPlaying ? '▶' : '⏸';
+    const vol = `${state.volume}%`;
+    const speed = (state.speed ?? 1.0) !== 1.0 ? ` ${(state.speed ?? 1.0).toFixed(2)}x` : '';
+    return (_jsxs(Box, { flexDirection: "row", paddingX: 1, gap: 1, children: [_jsx(Text, { color: state.isPlaying ? theme.colors.success : theme.colors.dim, children: playIcon }), _jsx(Text, { bold: true, color: theme.colors.primary, children: title }), _jsx(Text, { color: theme.colors.dim, children: "\u2014" }), _jsx(Text, { color: theme.colors.secondary, children: artist }), _jsx(Text, { color: theme.colors.dim, children: "|" }), _jsxs(Text, { color: theme.colors.text, children: [progress, "/", duration] }), _jsx(Text, { color: theme.colors.dim, children: "|" }), _jsxs(Text, { color: theme.colors.text, children: ["vol:", vol] }), speed && _jsx(Text, { color: theme.colors.accent, children: speed }), state.isLoading && _jsx(Text, { color: theme.colors.accent, children: "Loading..." })] }));
+}

package/dist/source/components/layouts/PlayerLayout.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePlayer } from "../../hooks/usePlayer.js";
 import NowPlaying from "../player/NowPlaying.js";
-import ProgressBar from "../player/ProgressBar.js";
 import QueueList from "../player/QueueList.js";
 import { Box } from 'ink';
 export default function PlayerLayout() {
     const { state: playerState } = usePlayer();
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(NowPlaying, {}), _jsx(ProgressBar, {}), playerState.queue.length > 0 && _jsx(QueueList, {})] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(NowPlaying, {}), playerState.queue.length > 0 && _jsx(QueueList, {})] }));
 }

package/dist/source/components/layouts/SearchLayout.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { useTheme } from "../../hooks/useTheme.js";
 import SearchBar from "../search/SearchBar.js";
 import { useKeyBinding } from "../../hooks/useKeyboard.js";
-import { KEYBINDINGS } from "../../utils/constants.js";
+import { KEYBINDINGS, VIEW } from "../../utils/constants.js";
 import { Box, Text } from 'ink';
 function SearchLayout() {
     const { theme } = useTheme();
@@ -45,6 +45,13 @@ function SearchLayout() {
     }, [navState.searchLimit, dispatch]);
     useKeyBinding(KEYBINDINGS.INCREASE_RESULTS, increaseLimit);
     useKeyBinding(KEYBINDINGS.DECREASE_RESULTS, decreaseLimit);
+    // Open search history
+    const goToHistory = useCallback(() => {
+        if (isTyping) {
+            dispatch({ category: 'NAVIGATE', view: VIEW.SEARCH_HISTORY });
+        }
+    }, [isTyping, dispatch]);
+    useKeyBinding(['h'], goToHistory);
     // Initial search if query is in state (usually from CLI flags)
     useEffect(() => {
         if (navState.searchQuery && !navState.hasSearched) {
@@ -75,7 +82,7 @@ function SearchLayout() {
     return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { borderStyle: "single", borderColor: theme.colors.secondary, paddingX: 1, children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: "Search" }), _jsxs(Text, { color: theme.colors.dim, children: [' ', "| Limit: ", navState.searchLimit, " (Use [ or ] to adjust)"] })] }), _jsx(SearchBar, { isActive: isTyping && !isSearching, onInput: input => {
                     void performSearch(input);
                 } }), (isLoading || isSearching) && (_jsx(Text, { color: theme.colors.accent, children: "Searching..." })), error && _jsx(Text, { color: theme.colors.error, children: error }), !isLoading && navState.hasSearched && (_jsx(SearchResults, { results: results, selectedIndex: navState.selectedResult, isActive: !isTyping })), !isLoading && navState.hasSearched && results.length === 0 && !error && (_jsx(Text, { color: theme.colors.dim, children: "No results found" })), _jsx(Text, { color: theme.colors.dim, children: isTyping
-                    ? 'Type to search, Enter to start'
-                    : 'Arrows to navigate, Enter to play, Esc to type again' })] }));
+                    ? 'Type to search, Enter to start, H for history'
+                    : `Arrows to navigate, Enter to play, ]/[ more/fewer results (${navState.searchLimit}), Esc to type` })] }));
 }
 export default React.memo(SearchLayout);

package/dist/source/components/layouts/TrendingLayout.d.ts

@@ -0,0 +1 @@
+export default function TrendingLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/source/components/layouts/TrendingLayout.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Trending tracks view — shows YouTube trending music
+import { Box, Text, useInput } from 'ink';
+import { useState, useEffect } from 'react';
+import { useTheme } from "../../hooks/useTheme.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { getMusicService } from "../../services/youtube-music/api.js";
+export default function TrendingLayout() {
+    const { theme } = useTheme();
+    const { dispatch } = useNavigation();
+    const { play } = usePlayer();
+    const [tracks, setTracks] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        getMusicService()
+            .getTrending()
+            .then(results => {
+            if (!cancelled) {
+                setTracks(results);
+                setIsLoading(false);
+            }
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setError(err instanceof Error ? err.message : 'Failed to load trending');
+                setIsLoading(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useInput((input, key) => {
+        if (key.escape) {
+            dispatch({ category: 'GO_BACK' });
+            return;
+        }
+        if (key.upArrow || input === 'k') {
+            setSelectedIndex(i => Math.max(0, i - 1));
+        }
+        else if (key.downArrow || input === 'j') {
+            setSelectedIndex(i => Math.min(tracks.length - 1, i + 1));
+        }
+        else if (key.return) {
+            const track = tracks[selectedIndex];
+            if (track)
+                play(track);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.primary, bold: true, children: "\uD83D\uDD25 Trending Music" }) }), isLoading ? (_jsx(Text, { color: theme.colors.dim, children: "Loading trending tracks..." })) : error ? (_jsx(Text, { color: theme.colors.error, children: error })) : tracks.length === 0 ? (_jsx(Text, { color: theme.colors.dim, children: "No trending tracks found" })) : (tracks.map((track, index) => {
+                const isSelected = index === selectedIndex;
+                const artist = track.artists?.[0]?.name ?? 'Unknown';
+                return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.dim, children: isSelected ? '▶ ' : `${String(index + 1).padStart(2)}. ` }), _jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.text, bold: isSelected, children: track.title }), _jsxs(Text, { color: theme.colors.dim, children: [" \u2014 ", artist] })] }, track.videoId));
+            })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.dim, children: "\u2191/\u2193 Navigate | Enter Play | Esc Back" }) })] }));
+}

package/dist/source/components/player/NowPlaying.js

@@ -5,17 +5,40 @@ import { usePlayer } from "../../hooks/usePlayer.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { formatTime } from "../../utils/format.js";
 import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import { getSleepTimerService } from "../../services/sleep-timer/sleep-timer.service.js";
+import { useState, useEffect } from 'react';
 export default function NowPlaying() {
     const { theme } = useTheme();
     const { state: playerState } = usePlayer();
     const { columns } = useTerminalSize();
+    const sleepTimer = getSleepTimerService();
+    const [sleepRemaining, setSleepRemaining] = useState(null);
+    // Poll sleep timer remaining every second
+    useEffect(() => {
+        if (!sleepTimer.isActive()) {
+            return;
+        }
+        const interval = setInterval(() => {
+            const remaining = sleepTimer.getRemainingSeconds();
+            setSleepRemaining(remaining);
+            if (remaining === null || remaining === 0) {
+                clearInterval(interval);
+            }
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [sleepTimer]);
     if (!playerState.currentTrack) {
-        return (_jsx(Box, { borderStyle: "round", borderColor: theme.colors.dim, padding: 1, marginY: 1, children: _jsx(Text, { color: theme.colors.dim, children: "No track playing" }) }));
+        return (_jsx(Box, { borderStyle: "round", borderColor: theme.colors.dim, paddingX: 1, children: _jsx(Text, { color: theme.colors.dim, children: "No track playing" }) }));
     }
     const track = playerState.currentTrack;
     const artists = track.artists?.map(a => a.name).join(', ') || 'Unknown Artist';
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.primary, padding: 1, marginY: 1, children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: track.title }), _jsx(Text, { color: theme.colors.secondary, children: artists }), track.album && _jsx(Text, { color: theme.colors.dim, children: track.album.name }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.text, children: formatTime(playerState.progress) }), _jsx(Text, { children: " " }), _jsxs(Text, { color: theme.colors.dim, children: ["[", Math.round((playerState.progress / (playerState.duration || 1)) * 100), "%]"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.text, children: formatTime(playerState.duration) })] }), playerState.duration > 0 && (_jsxs(Box, { children: [_jsx(Text, { color: theme.colors.primary, children: '■'.repeat(Math.floor((playerState.progress / playerState.duration) * (columns - 10))) }), _jsx(Text, { color: theme.colors.dim, children: '-'.repeat(Math.max(0, columns -
-                            10 -
-                            Math.floor((playerState.progress / playerState.duration) *
-                                (columns - 10)))) })] })), playerState.isLoading && (_jsx(Text, { color: theme.colors.accent, children: "Loading..." })), playerState.error && (_jsx(Text, { color: theme.colors.error, children: playerState.error }))] }));
+    // Clamp progress to valid range
+    const progress = Math.max(0, Math.min(playerState.progress, playerState.duration || 0));
+    const duration = playerState.duration || 0;
+    const percentage = duration > 0 ? Math.min(100, Math.floor((progress / duration) * 100)) : 0;
+    const barWidth = Math.max(10, columns - 8);
+    const filledWidth = duration > 0 ? Math.floor((progress / duration) * barWidth) : 0;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.primary, paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: track.title }), _jsx(Text, { color: theme.colors.dim, children: " \u2022 " }), _jsx(Text, { color: theme.colors.secondary, children: artists })] }), track.album && _jsx(Text, { color: theme.colors.dim, children: track.album.name }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.primary, children: '█'.repeat(Math.min(filledWidth, barWidth)) }), _jsx(Text, { color: theme.colors.dim, children: '░'.repeat(Math.max(0, barWidth - filledWidth)) })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.text, children: formatTime(progress) }), _jsxs(Text, { color: theme.colors.dim, children: [" / ", formatTime(duration), " "] }), _jsxs(Text, { color: theme.colors.dim, children: ["[", percentage, "%]"] }), playerState.isLoading && (_jsx(Text, { color: theme.colors.accent, children: " Loading..." })), !playerState.isPlaying && progress > 0 && (_jsx(Text, { color: theme.colors.dim, children: " \u23F8" })), sleepRemaining !== null && (_jsxs(Text, { color: theme.colors.warning, children: [' ', "\u23FE ", formatTime(sleepRemaining)] }))] }), playerState.error && (_jsx(Text, { color: theme.colors.error, children: playerState.error }))] }));
 }

package/dist/source/components/player/PlayerControls.js

@@ -17,7 +17,7 @@ export default function PlayerControls() {
         };
     }, [instanceId]);
     const { theme } = useTheme();
-    const { state: playerState, pause, resume, next, previous, volumeUp, volumeDown, } = usePlayer();
+    const { state: playerState, pause, resume, next, previous, volumeUp, volumeDown, speedUp, speedDown, } = usePlayer();
     // DEBUG: Log when callbacks change (detect instability)
     useEffect(() => {
         // Temporarily output to stderr to debug without triggering Ink re-render
@@ -37,5 +37,7 @@ export default function PlayerControls() {
     useKeyBinding(KEYBINDINGS.PREVIOUS, previous);
     useKeyBinding(KEYBINDINGS.VOLUME_UP, volumeUp);
     useKeyBinding(KEYBINDINGS.VOLUME_DOWN, volumeDown);
-    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", paddingX: 2, borderStyle: "classic", borderColor: theme.colors.dim, children: [_jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "b" }), "] Prev"] }), _jsx(Text, { color: theme.colors.primary, children: playerState.isPlaying ? (_jsxs(Text, { children: ["[", _jsx(Text, { color: theme.colors.dim, children: "Space" }), "] Pause"] })) : (_jsxs(Text, { children: ["[", _jsx(Text, { color: theme.colors.dim, children: "Space" }), "] Play"] })) }), _jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "n" }), "] Next"] }), _jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "+/-" }), "] Vol: ", playerState.volume, "%"] })] }));
+    useKeyBinding(KEYBINDINGS.SPEED_UP, speedUp);
+    useKeyBinding(KEYBINDINGS.SPEED_DOWN, speedDown);
+    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", paddingX: 2, borderStyle: "classic", borderColor: theme.colors.dim, children: [_jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "b" }), "] Prev"] }), _jsx(Text, { color: theme.colors.primary, children: playerState.isPlaying ? (_jsxs(Text, { children: ["[", _jsx(Text, { color: theme.colors.dim, children: "Space" }), "] Pause"] })) : (_jsxs(Text, { children: ["[", _jsx(Text, { color: theme.colors.dim, children: "Space" }), "] Play"] })) }), _jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "n" }), "] Next"] }), _jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "+/-" }), "] Vol: ", playerState.volume, "%"] }), (playerState.speed ?? 1.0) !== 1.0 && (_jsxs(Text, { color: theme.colors.accent, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "<>" }), "]", ' ', (playerState.speed ?? 1.0).toFixed(2), "x"] }))] }));
 }

package/dist/source/components/player/ProgressBar.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Progress bar component
 import { Box, Text } from 'ink';
 import { useTheme } from "../../hooks/useTheme.js";
@@ -10,9 +10,10 @@ export default function ProgressBar() {
     if (!playerState.currentTrack || !playerState.duration) {
         return null;
     }
-    const progress = playerState.progress;
+    // Clamp values to valid range
+    const progress = Math.max(0, Math.min(playerState.progress, playerState.duration));
     const duration = playerState.duration;
-    const percentage = duration > 0 ? Math.floor((progress / duration) * 100) : 0;
-    const barWidth = Math.max(0, Math.min(20, Math.floor(percentage / 5))); // 20 chars max, bounds checked
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: theme.colors.text, children: [formatTime(progress), " / ", formatTime(duration)] }), _jsxs(Text, { color: theme.colors.dim, children: [" ", percentage, "%"] })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.primary, children: '■'.repeat(barWidth) }), _jsx(Text, { color: theme.colors.dim, children: '-'.repeat(20 - barWidth) })] })] }));
+    const percentage = duration > 0 ? Math.min(100, Math.floor((progress / duration) * 100)) : 0;
+    const barWidth = Math.min(20, Math.floor(percentage / 5));
+    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.colors.text, children: formatTime(progress) }), _jsx(Text, { color: theme.colors.dim, children: "/" }), _jsx(Text, { color: theme.colors.text, children: formatTime(duration) }), _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.primary, children: '█'.repeat(barWidth) }), _jsx(Text, { color: theme.colors.dim, children: '░'.repeat(20 - barWidth) }), _jsxs(Text, { color: theme.colors.dim, children: [" ", percentage, "%"] })] }));
 }

package/dist/source/components/player/QueueList.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-declare function QueueList(): import("react/jsx-runtime").JSX.Element;
+declare function QueueList(): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: React.MemoExoticComponent<typeof QueueList>;
 export default _default;