@involvex/youtube-music-cli 0.0.17 → 0.0.19

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [0.0.19](https://github.com/involvex/youtube-music-cli/compare/v0.0.18...v0.0.19) (2026-02-20)
+
+## [0.0.18](https://github.com/involvex/youtube-music-cli/compare/v0.0.17...v0.0.18) (2026-02-18)
+
+### Bug Fixes
+
+- start playback on shuffle, reset, and next actions ([d57452b](https://github.com/involvex/youtube-music-cli/commit/d57452bc6cf49ba7cdc62910ebadf7a2dea66007))
+
 ## [0.0.17](https://github.com/involvex/youtube-music-cli/compare/v0.0.16...v0.0.17) (2026-02-18)
 
 ### Features

package/dist/source/cli.js

@@ -6,6 +6,9 @@ import meow from 'meow';
 import { getPluginInstallerService } from "./services/plugin/plugin-installer.service.js";
 import { getPluginUpdaterService } from "./services/plugin/plugin-updater.service.js";
 import { getPluginRegistryService } from "./services/plugin/plugin-registry.service.js";
+import { getImportService } from "./services/import/import.service.js";
+import { getWebServerManager } from "./services/web/web-server-manager.js";
+import { getWebStreamingService } from "./services/web/web-streaming.service.js";
 const cli = meow(`
 	Usage
 	  $ youtube-music-cli
@@ -26,13 +29,23 @@ const cli = meow(`
 	  $ youtube-music-cli plugins enable <name>
 	  $ youtube-music-cli plugins disable <name>
 
+	Import Commands
+	  $ youtube-music-cli import spotify <url-or-id>
+	  $ youtube-music-cli import youtube <url-or-id>
+
 	Options
-	  --theme, -t    Theme to use (dark, light, midnight, matrix)
-	  --volume, -v   Initial volume (0-100)
-	  --shuffle, -s   Enable shuffle mode
-	  --repeat, -r   Repeat mode (off, all, one)
-	  --headless     Run without TUI (just play)
-	  --help, -h     Show this help
+	  --theme, -t          Theme to use (dark, light, midnight, matrix)
+	  --volume, -v         Initial volume (0-100)
+	  --shuffle, -s        Enable shuffle mode
+	  --repeat, -r         Repeat mode (off, all, one)
+	  --headless           Run without TUI (just play)
+	  --web                Enable web UI server
+	  --web-host           Web server host (default: localhost)
+	  --web-port           Web server port (default: 8080)
+	  --web-only           Run web server without CLI UI
+	  --web-auth           Authentication token for web server
+	  --name               Custom name for imported playlist
+	  --help, -h           Show this help
 
 	Examples
 	  $ youtube-music-cli
@@ -40,6 +53,8 @@ const cli = meow(`
 	  $ youtube-music-cli search "Rick Astley"
 	  $ youtube-music-cli play dQw4w9WgXcQ --headless
 	  $ youtube-music-cli plugins install adblock
+	  $ youtube-music-cli import spotify "https://open.spotify.com/playlist/..."
+	  $ youtube-music-cli --web --web-port 3000
 `, {
     importMeta: import.meta,
     flags: {
@@ -64,6 +79,26 @@ const cli = meow(`
             type: 'boolean',
             default: false,
         },
+        web: {
+            type: 'boolean',
+            default: false,
+        },
+        webHost: {
+            type: 'string',
+        },
+        webPort: {
+            type: 'number',
+        },
+        webOnly: {
+            type: 'boolean',
+            default: false,
+        },
+        webAuth: {
+            type: 'string',
+        },
+        name: {
+            type: 'string',
+        },
         help: {
             type: 'boolean',
             shortFlag: 'h',
@@ -236,6 +271,86 @@ else {
     else if (command === 'back') {
         cli.flags.action = 'previous';
     }
-    // Render the app
-    render(_jsx(App, { flags: cli.flags }));
+    else if (command === 'import') {
+        // Handle import commands
+        void (async () => {
+            const source = args[0];
+            const url = args[1];
+            if (!source || !url) {
+                console.error('Usage: youtube-music-cli import <spotify|youtube> <url-or-id>');
+                process.exit(1);
+            }
+            if (source !== 'spotify' && source !== 'youtube') {
+                console.error('Invalid source. Use "spotify" or "youtube".');
+                process.exit(1);
+            }
+            const importService = getImportService();
+            const customName = cli.flags.name;
+            try {
+                console.log(`Importing ${source} playlist...`);
+                const result = await importService.importPlaylist(source, url, customName);
+                console.log(`\n✓ Import completed!`);
+                console.log(`  Playlist: ${result.playlistName}`);
+                console.log(`  Matched: ${result.matched}/${result.total} tracks`);
+                if (result.errors.length > 0) {
+                    console.log(`\nErrors:`);
+                    for (const error of result.errors.slice(0, 10)) {
+                        console.log(`  - ${error}`);
+                    }
+                    if (result.errors.length > 10) {
+                        console.log(`  ... and ${result.errors.length - 10} more`);
+                    }
+                }
+                process.exit(0);
+            }
+            catch (error) {
+                console.error(`✗ Import failed: ${error instanceof Error ? error.message : String(error)}`);
+                process.exit(1);
+            }
+        })();
+    }
+    else if (cli.flags.web || cli.flags.webOnly) {
+        // Handle web server flags
+        void (async () => {
+            const webManager = getWebServerManager();
+            try {
+                await webManager.start({
+                    enabled: true,
+                    host: cli.flags.webHost ?? 'localhost',
+                    port: cli.flags.webPort ?? 8080,
+                    webOnly: cli.flags.webOnly,
+                    auth: cli.flags.webAuth,
+                });
+                const serverUrl = webManager.getServerUrl();
+                console.log(`Web UI server running at: ${serverUrl}`);
+                // Set up import progress streaming
+                const streamingService = getWebStreamingService();
+                const importService = getImportService();
+                importService.onProgress(progress => {
+                    streamingService.onImportProgress(progress);
+                });
+                // If web-only mode, just keep the server running
+                if (cli.flags.webOnly) {
+                    console.log('Running in web-only mode. Press Ctrl+C to exit.');
+                    // Keep process alive
+                    process.on('SIGINT', () => {
+                        console.log('\nShutting down web server...');
+                        void webManager.stop().then(() => process.exit(0));
+                    });
+                }
+                else {
+                    // Also render the CLI UI
+                    render(_jsx(App, { flags: cli.flags }));
+                }
+            }
+            catch (error) {
+                console.error(`Failed to start web server: ${error instanceof Error ? error.message : String(error)}`);
+                process.exit(1);
+            }
+        })();
+    }
+    else {
+        // Render the app
+        render(_jsx(App, { flags: cli.flags }));
+    }
 }

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

@@ -27,7 +27,7 @@ export default function ShortcutsBar() {
     useKeyBinding(KEYBINDINGS.SHUFFLE, toggleShuffle);
     useKeyBinding(KEYBINDINGS.REPEAT, toggleRepeat);
     // Note: SETTINGS keybinding handled by MainLayout to avoid double-dispatch
-    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: "\u2192" }), " Next |", ' ', _jsx(Text, { color: theme.colors.text, children: "\u2190" }), " Prev |", ' ', _jsx(Text, { color: theme.colors.text, children: "Shift+S" }), " \uD83D\uDD00 |", ' ', _jsx(Text, { color: theme.colors.text, children: "r" }), " \uD83D\uDD04 |", ' ', _jsx(Text, { color: theme.colors.text, children: "Shift+P" }), " Playlists |", ' ', _jsx(Text, { color: theme.colors.text, children: "Shift+D" }), " Download |", ' ', _jsx(Text, { color: theme.colors.text, children: "m" }), " Mix |", ' ', _jsx(Text, { color: theme.colors.text, children: "/" }), " Search |", ' ', _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: playerState.shuffle ? theme.colors.primary : theme.colors.dim, children: "\uD83D\uDD00" }), ' ', _jsx(Text, { color: playerState.repeat === 'off'
+    return (_jsxs(Box, { borderStyle: "single", borderColor: theme.colors.dim, paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: theme.colors.dim, children: [_jsx(Text, { color: theme.colors.text, children: "\u2420" }), playerState.isPlaying ? '⏸️' : '▶️', " |", ' ', _jsx(Text, { color: theme.colors.text, children: "\u2190" }), "\u23EA\uFE0F |", ' ', _jsx(Text, { color: theme.colors.text, children: "\u2192" }), "\u23ED\uFE0F |", ' ', _jsx(Text, { color: theme.colors.text, children: "\u21E7S" }), "\uD83D\uDD00 |", ' ', _jsx(Text, { color: theme.colors.text, children: "R" }), "\uD83D\uDD04 |", ' ', _jsx(Text, { color: theme.colors.text, children: "\u21E7P" }), "\uD83D\uDCDA |", ' ', _jsx(Text, { color: theme.colors.text, children: "\u21E7D" }), "\u2B07 |", ' ', _jsx(Text, { color: theme.colors.text, children: "m" }), "\uD83C\uDFB6 |", ' ', _jsx(Text, { color: theme.colors.text, children: "/" }), "\uD83D\uDD0E |", ' ', _jsx(Text, { color: theme.colors.text, children: "?" }), "\u2753 |", ' ', _jsx(Text, { color: theme.colors.text, children: "Q" }), "\u23FB"] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: playerState.shuffle ? theme.colors.primary : theme.colors.dim, children: "\uD83D\uDD00" }), ' ', _jsx(Text, { color: playerState.repeat === 'off'
                             ? theme.colors.dim
-                            : theme.colors.secondary, children: playerState.repeat === 'one' ? '🔂' : '🔄' }), ' ', _jsx(Text, { color: theme.colors.dim, children: "[=/" }), "-", _jsx(Text, { color: theme.colors.dim, children: "]" }), " Vol:", ' ', _jsxs(Text, { color: theme.colors.primary, children: [playerState.volume, "%"] })] })] }));
+                            : theme.colors.secondary, children: playerState.repeat === 'one' ? '🔂' : '🔄' }), ' ', _jsx(Text, { color: theme.colors.dim, children: "\uD83D\uDD0A [=/" }), "-", _jsx(Text, { color: theme.colors.dim, children: "]" }), ' ', _jsxs(Text, { color: theme.colors.primary, children: [playerState.volume, "%"] })] })] }));
 }

package/dist/source/components/import/ImportLayout.d.ts

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

package/dist/source/components/import/ImportLayout.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Import layout component for playlist import
+import { useState, useCallback, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { useTheme } from "../../hooks/useTheme.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+import { getImportService } from "../../services/import/import.service.js";
+import ImportProgressComponent from "./ImportProgress.js";
+const SOURCES = [
+    { key: 'spotify', label: 'Spotify' },
+    { key: 'youtube', label: 'YouTube' },
+];
+export default function ImportLayout() {
+    const { theme } = useTheme();
+    const { dispatch } = useNavigation();
+    const importService = getImportService();
+    const [step, setStep] = useState('source');
+    const [selectedSource, setSelectedSource] = useState(0);
+    const [url, setUrl] = useState('');
+    const [customName, setCustomName] = useState('');
+    const [progress, setProgress] = useState(null);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    const goBack = useCallback(() => {
+        if (step === 'source') {
+            dispatch({ category: 'GO_BACK' });
+        }
+        else if (step === 'url') {
+            setStep('source');
+        }
+        else if (step === 'name') {
+            setStep('url');
+        }
+        else if (step === 'result') {
+            setStep('source');
+            setResult(null);
+        }
+    }, [step, dispatch]);
+    const selectSource = useCallback(() => {
+        setStep('url');
+    }, []);
+    const submitUrl = useCallback(() => {
+        if (url.trim()) {
+            setStep('name');
+        }
+    }, [url]);
+    const startImport = useCallback(async () => {
+        setStep('importing');
+        setError(null);
+        try {
+            const unsubscribe = importService.onProgress(prog => {
+                setProgress(prog);
+            });
+            const source = SOURCES[selectedSource].key;
+            const importResult = await importService.importPlaylist(source, url, customName || undefined);
+            unsubscribe();
+            setResult({
+                playlistName: importResult.playlistName,
+                matched: importResult.matched,
+                total: importResult.total,
+                errors: importResult.errors,
+            });
+            setStep('result');
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setStep('source');
+        }
+    }, [selectedSource, url, customName, importService]);
+    const submitName = useCallback(() => {
+        startImport();
+    }, [startImport]);
+    // Keyboard bindings
+    useKeyBinding(KEYBINDINGS.UP, () => {
+        if (step === 'source') {
+            setSelectedSource(prev => Math.max(0, prev - 1));
+        }
+    });
+    useKeyBinding(KEYBINDINGS.DOWN, () => {
+        if (step === 'source') {
+            setSelectedSource(prev => Math.min(SOURCES.length - 1, prev + 1));
+        }
+    });
+    useKeyBinding(KEYBINDINGS.SELECT, () => {
+        if (step === 'source')
+            selectSource();
+        else if (step === 'url')
+            submitUrl();
+        else if (step === 'name')
+            submitName();
+        else if (step === 'result')
+            goBack();
+    });
+    useKeyBinding(KEYBINDINGS.BACK, goBack);
+    // Escape key for skip name
+    useEffect(() => {
+        if (step === 'name') {
+            const handleEscape = () => {
+                startImport();
+            };
+            const stdin = process.stdin;
+            stdin.on('keypress', handleEscape);
+            return () => {
+                stdin.off('keypress', handleEscape);
+            };
+        }
+        return undefined;
+    }, [step, startImport]);
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 1, children: [_jsx(Box, { borderStyle: "double", borderColor: theme.colors.secondary, paddingX: 1, marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.colors.primary, children: "Import Playlist" }) }), error && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: theme.colors.error, children: ["Error: ", error] }) })), step === 'source' && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { color: theme.colors.dim, children: "Select playlist source:" }), SOURCES.map((source, index) => (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { backgroundColor: index === selectedSource ? theme.colors.primary : undefined, color: index === selectedSource
+                                ? theme.colors.background
+                                : theme.colors.text, bold: index === selectedSource, children: [index === selectedSource ? '► ' : '  ', source.label] }) }, source.key)))] })), step === 'url' && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Text, { color: theme.colors.dim, children: ["Enter ", SOURCES[selectedSource].label, " playlist URL or ID:"] }), _jsx(Box, { paddingX: 1, children: _jsx(TextInput, { value: url, onChange: setUrl, onSubmit: submitUrl, placeholder: "Paste URL or ID here...", focus: true }) }), _jsxs(Text, { color: theme.colors.dim, children: ["Examples:", ' ', SOURCES[selectedSource].key === 'spotify'
+                                ? 'https://open.spotify.com/playlist/...'
+                                : 'https://www.youtube.com/playlist?list=...'] })] })), step === 'name' && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { color: theme.colors.dim, children: "Custom playlist name (optional, Esc to skip):" }), _jsx(Box, { paddingX: 1, children: _jsx(TextInput, { value: customName, onChange: setCustomName, onSubmit: submitName, placeholder: "Leave empty to use original name", focus: true }) }), _jsx(Text, { color: theme.colors.dim, children: "Press Enter to import or Esc to skip" })] })), step === 'importing' && progress && (_jsx(ImportProgressComponent, { progress: progress })), step === 'result' && result && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.success, bold: true, children: "\u2713 Import completed!" }) }), _jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: ["Playlist: ", result.playlistName] }) }), _jsx(Box, { paddingX: 1, children: _jsxs(Text, { children: ["Matched:", ' ', _jsx(Text, { color: theme.colors.primary, children: result.matched }), "/", result.total, " tracks"] }) }), result.errors.length > 0 && (_jsxs(Box, { flexDirection: "column", gap: 1, marginTop: 1, children: [_jsxs(Text, { color: theme.colors.dim, bold: true, children: ["Errors (", result.errors.length, "):"] }), result.errors.slice(0, 5).map((err, i) => (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { color: theme.colors.error, children: ["\u2022 ", err] }) }, i))), result.errors.length > 5 && (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { color: theme.colors.dim, children: ["... and ", result.errors.length - 5, " more"] }) }))] })), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: theme.colors.dim, children: "Press Enter to continue" }) })] })), step !== 'importing' && step !== 'result' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.dim, children: step === 'source'
+                        ? '↑↓ to select, Enter to continue, Esc/q to go back'
+                        : 'Enter to continue, Esc to go back' }) }))] }));
+}

package/dist/source/components/import/ImportProgress.d.ts

@@ -0,0 +1,6 @@
+import type { ImportProgress } from '../../types/import.types.ts';
+interface Props {
+    progress: ImportProgress;
+}
+export default function ImportProgress({ progress }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/source/components/import/ImportProgress.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Import progress display component
+import { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+const PROGRESS_BLOCKS = 20;
+export default function ImportProgress({ progress }) {
+    const { theme } = useTheme();
+    const [animatedBlocks, setAnimatedBlocks] = useState(0);
+    // Animate progress blocks
+    useEffect(() => {
+        if (progress.total > 0) {
+            const targetBlocks = Math.floor((progress.current / progress.total) * PROGRESS_BLOCKS);
+            const delay = Math.max(50, 500 / PROGRESS_BLOCKS); // Max 500ms total animation
+            const interval = setInterval(() => {
+                setAnimatedBlocks(prev => {
+                    if (prev >= targetBlocks) {
+                        clearInterval(interval);
+                        return prev;
+                    }
+                    return prev + 1;
+                });
+            }, delay);
+            return () => clearInterval(interval);
+        }
+        return undefined;
+    }, [progress]);
+    // Calculate completed blocks
+    const completedBlocks = Math.min(animatedBlocks, PROGRESS_BLOCKS);
+    const progressPercent = progress.total > 0
+        ? Math.round((progress.current / progress.total) * 100)
+        : 0;
+    // Get status color
+    const getStatusColor = () => {
+        switch (progress.status) {
+            case 'fetching':
+                return theme.colors.accent;
+            case 'matching':
+                return theme.colors.primary;
+            case 'creating':
+                return theme.colors.success;
+            case 'completed':
+                return theme.colors.success;
+            case 'failed':
+            case 'cancelled':
+                return theme.colors.error;
+            default:
+                return theme.colors.dim;
+        }
+    };
+    // Get status label
+    const getStatusLabel = () => {
+        switch (progress.status) {
+            case 'fetching':
+                return 'Fetching playlist...';
+            case 'matching':
+                return 'Matching tracks...';
+            case 'creating':
+                return 'Creating playlist...';
+            case 'completed':
+                return 'Completed!';
+            case 'failed':
+                return 'Failed';
+            case 'cancelled':
+                return 'Cancelled';
+            default:
+                return 'Starting...';
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { paddingX: 1, children: _jsx(Text, { bold: true, color: getStatusColor(), children: getStatusLabel() }) }), progress.total > 0 && (_jsx(Box, { paddingX: 1, children: _jsxs(Box, { children: [Array.from({ length: completedBlocks }).map((_, i) => (_jsx(Text, { backgroundColor: theme.colors.primary, children: ' ' }, i))), Array.from({ length: PROGRESS_BLOCKS - completedBlocks }).map((_, i) => (_jsx(Text, { backgroundColor: theme.colors.dim, dimColor: true, children: ' ' }, i + completedBlocks)))] }) })), _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: theme.colors.dim, children: [progress.total > 0 ? `${progressPercent}%` : '...', " -", ' ', progress.current, "/", progress.total || '?', ' ', progress.total === 1 ? 'track' : 'tracks'] }) }), progress.currentTrack && progress.status === 'matching' && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.text, dimColor: true, children: progress.currentTrack.length > 50
+                        ? `...${progress.currentTrack.slice(-47)}`
+                        : progress.currentTrack }) })), progress.message && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.dim, children: progress.message }) }))] }));
+}

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

@@ -20,6 +20,7 @@ import SearchHistory from "../search/SearchHistory.js";
 import KeybindingsLayout from "../config/KeybindingsLayout.js";
 import TrendingLayout from "./TrendingLayout.js";
 import ExploreLayout from "./ExploreLayout.js";
+import ImportLayout from "../import/ImportLayout.js";
 import { KEYBINDINGS, VIEW } from "../../utils/constants.js";
 import { Box } from 'ink';
 import { useTerminalSize } from "../../hooks/useTerminalSize.js";
@@ -65,6 +66,9 @@ function MainLayout() {
     const goToExplore = useCallback(() => {
         dispatch({ category: 'NAVIGATE', view: VIEW.EXPLORE });
     }, [dispatch]);
+    const goToImport = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.IMPORT });
+    }, [dispatch]);
     const togglePlayerMode = useCallback(() => {
         dispatch({ category: 'TOGGLE_PLAYER_MODE' });
     }, [dispatch]);
@@ -80,6 +84,7 @@ function MainLayout() {
     useKeyBinding(['l'], goToLyrics);
     useKeyBinding(['T'], goToTrending);
     useKeyBinding(['e'], goToExplore);
+    useKeyBinding(['i'], goToImport);
     // Memoize the view component to prevent unnecessary remounts
     // Only recreate when currentView actually changes
     const currentView = useMemo(() => {
@@ -114,6 +119,8 @@ function MainLayout() {
                 return _jsx(TrendingLayout, {}, "trending");
             case 'explore':
                 return _jsx(ExploreLayout, {}, "explore");
+            case 'import':
+                return _jsx(ImportLayout, {}, "import");
             case 'help':
                 return _jsx(Help, {}, "help");
             default:

package/dist/source/components/settings/Settings.js

@@ -22,6 +22,7 @@ const SETTINGS_ITEMS = [
     'Download Folder',
     'Download Format',
     'Sleep Timer',
+    'Import Playlists',
     'Custom Keybindings',
     'Manage Plugins',
 ];
@@ -116,9 +117,12 @@ export default function Settings() {
             cycleSleepTimer();
         }
         else if (selectedIndex === 8) {
-            dispatch({ category: 'NAVIGATE', view: VIEW.KEYBINDINGS });
+            dispatch({ category: 'NAVIGATE', view: VIEW.IMPORT });
         }
         else if (selectedIndex === 9) {
+            dispatch({ category: 'NAVIGATE', view: VIEW.KEYBINDINGS });
+        }
+        else if (selectedIndex === 10) {
             dispatch({ category: 'NAVIGATE', view: VIEW.PLUGINS });
         }
     };
@@ -142,5 +146,5 @@ export default function Settings() {
                         ? theme.colors.background
                         : isActive
                             ? theme.colors.accent
-                            : theme.colors.text, bold: selectedIndex === 7, children: sleepTimerLabel }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: selectedIndex === 8 ? theme.colors.primary : undefined, color: selectedIndex === 8 ? theme.colors.background : theme.colors.text, bold: selectedIndex === 8, children: "Custom Keybindings \u2192" }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: selectedIndex === 9 ? theme.colors.primary : undefined, color: selectedIndex === 9 ? theme.colors.background : theme.colors.text, bold: selectedIndex === 9, children: "Manage Plugins" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.dim, children: "Arrows to navigate, Enter to select, Esc/q to go back" }) })] }));
+                            : theme.colors.text, bold: selectedIndex === 7, children: sleepTimerLabel }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: selectedIndex === 8 ? theme.colors.primary : undefined, color: selectedIndex === 8 ? theme.colors.background : theme.colors.text, bold: selectedIndex === 8, children: "Import Playlists \u2192" }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: selectedIndex === 9 ? theme.colors.primary : undefined, color: selectedIndex === 9 ? theme.colors.background : theme.colors.text, bold: selectedIndex === 9, children: "Custom Keybindings \u2192" }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: selectedIndex === 10 ? theme.colors.primary : undefined, color: selectedIndex === 10 ? theme.colors.background : theme.colors.text, bold: selectedIndex === 10, children: "Manage Plugins" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.dim, children: "Arrows to navigate, Enter to select, Esc/q to go back" }) })] }));
 }

package/dist/source/services/config/config.service.js

@@ -31,6 +31,16 @@ class ConfigService {
             downloadsEnabled: false,
             downloadDirectory: path.join(CONFIG_DIR, 'downloads'),
             downloadFormat: 'mp3',
+            webServer: {
+                enabled: false,
+                host: 'localhost',
+                port: 8080,
+                enableCors: true,
+                allowedOrigins: ['*'],
+                auth: {
+                    enabled: false,
+                },
+            },
         };
     }
     load() {

package/dist/source/services/import/import.service.d.ts

@@ -0,0 +1,44 @@
+import type { ImportSource, ImportProgress, ImportResult } from '../../types/import.types.ts';
+type ProgressCallback = (progress: ImportProgress) => void;
+declare class ImportService {
+    private progressCallbacks;
+    private currentImport;
+    /**
+     * Subscribe to import progress updates
+     */
+    onProgress(callback: ProgressCallback): () => void;
+    /**
+     * Emit progress to all subscribers
+     */
+    private emitProgress;
+    /**
+     * Create a unique playlist ID
+     */
+    private generatePlaylistId;
+    /**
+     * Save imported playlist to config
+     */
+    private savePlaylist;
+    /**
+     * Import a playlist from Spotify or YouTube
+     */
+    importPlaylist(source: ImportSource, urlOrId: string, customName?: string, signal?: AbortSignal): Promise<ImportResult>;
+    /**
+     * Validate a playlist URL/ID before importing
+     */
+    validatePlaylist(source: ImportSource, urlOrId: string): Promise<boolean>;
+    /**
+     * Get current import status
+     */
+    getCurrentImport(): {
+        source: ImportSource;
+        url: string;
+        elapsed: number;
+    } | null;
+    /**
+     * Cancel the current import
+     */
+    cancelImport(): void;
+}
+export declare function getImportService(): ImportService;
+export {};