@ciphore/radiocli 0.1.8 → 0.2.0

package/dist/ui/App.js

@@ -22,12 +22,18 @@ import { isAirPlayCodePromptActive } from './screens/AirPlayCodeScreen.js';
 import { isAirPlayBackendAvailable } from './airplay-settings.js';
 import { audioOutputLabel, resolvedAudioOutput } from './audio-output.js';
 import { copyToClipboard, openExternal } from './system-actions.js';
+import { appVersion } from '../version.js';
+import { checkForUpdate, installUpdate, shouldCheckForUpdate, updateCommandForInstall } from '../update-check.js';
 import { activeTabForScreen, addMediaKeyBinding, applyStationFilters, clamp, clampVolume, defaultExploreCursor, formatExploreCursor, formatFilterLabel, formatTimeLeft, initialStationContexts, mediaActionLabel, moveExploreCursor as shiftExploreCursor, nextReceiverPulse, nextSleepTimerMinutes, normalizeMediaKeyBindings, shouldAnimateReceiver, shouldResetReceiverPulse, shouldSkipAfterTuneError, stationApproximateTime, stationContextKeyForScreen, topTabs } from './app-state.js';
 const LIVE_RECEIVER_STYLES = new Set(receiverStyleNames);
 const LIVE_RECEIVER_PULSE_MS = 80;
 const AMBIENT_RECEIVER_PULSE_MS = 140;
 const LOADING_SPINNER_MS = 120;
 const VISUALIZER_MESSAGE_MS = 4500;
+const COUNTRY_STATIONS_PAGE_SIZE = 120;
+const COUNTRY_STATIONS_LOAD_AHEAD = 12;
+const SEARCH_RESULTS_PAGE_SIZE = 90;
+const SEARCH_RESULTS_LOAD_AHEAD = 12;
 const settingToggleLabel = {
     resumeOnLaunch: 'Resume on launch',
     transparentBackground: 'Transparent background',
@@ -41,6 +47,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const { columns, rows } = useWindowSize();
     const store = useMemo(() => providedStore ?? new JsonLibraryStore(), [providedStore]);
     const providers = useMemo(() => providedProviders ?? new ProviderManager(), [providedProviders]);
+    const installedVersion = useMemo(() => appVersion(), []);
     const [library, setLibrary] = useState(() => store.snapshot());
     const settingsRef = useRef(library.settings);
     settingsRef.current = library.settings;
@@ -51,6 +58,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const [screen, setScreen] = useState('home');
     const [selected, setSelected] = useState(0);
     const [message, setMessage] = useState(null);
+    const [footerMessage, setFooterMessage] = useState(null);
     const [countries, setCountries] = useState([]);
     const [countryFilter, setCountryFilter] = useState('');
     const [editingCountryFilter, setEditingCountryFilter] = useState(false);
@@ -73,9 +81,14 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const [sleepUntil, setSleepUntil] = useState(null);
     const [showDiagnostics, setShowDiagnostics] = useState(false);
     const [capturingTransportAction, setCapturingTransportAction] = useState(null);
+    const announcedUpdateRef = useRef(false);
+    const installingUpdateRef = useRef(false);
     const displayStationsRef = useRef([]);
     const playbackQueueRef = useRef(null);
     const lastRawTransportAtRef = useRef(0);
+    const loadingStationsRef = useRef(false);
+    const countryPageRequestRef = useRef(null);
+    const searchPageRequestRef = useRef(null);
     const playStationRef = useRef(() => undefined);
     const screenRef = useRef(screen);
     const selectedRef = useRef(selected);
@@ -88,6 +101,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const exploreRequestRef = useRef(0);
     const exploreMoveTimerRef = useRef(null);
     const transientMessageTimerRef = useRef(null);
+    const transientFooterMessageTimerRef = useRef(null);
     const receiverPulseSnapshotRef = useRef(null);
     const theme = library.settings.theme;
     const displayMode = useMemo(() => resolveDisplayMode(library.settings), [library.settings.transparentBackground, library.settings.asciiMode, library.settings.reduceMotion]);
@@ -112,6 +126,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
     }), [library, libraryStations, stationContexts]);
     screenRef.current = screen;
     selectedRef.current = selected;
+    loadingStationsRef.current = loadingStations;
     stationContextsRef.current = activeStationContexts;
     exploreCursorRef.current = exploreCursor;
     const renderedStationContextKey = stationContextKeyForScreen(screen);
@@ -160,10 +175,11 @@ export function App({ store: providedStore, providers: providedProviders }) {
     displayStationsRef.current = displayStations;
     const sleepLabel = sleepUntil ? `Sleep ${formatTimeLeft(sleepUntil - Date.now())}` : 'Sleep off';
     const showPlaybackFooter = shouldShowPlaybackFooter(playingStation, playback);
+    const footerRows = showPlaybackFooter ? 4 : 3;
     const selectedAirPlayDevice = useMemo(() => availableAirPlayDevices.find(device => device.id === library.settings.preferredAirPlayDevice), [availableAirPlayDevices, library.settings.preferredAirPlayDevice]);
     const canEnterAirPlayCode = isAirPlayCodePromptActive(playback) ||
         Boolean(isAirPlayBackendAvailable(availableBackends) && selectedAirPlayDevice?.requiresPassword && !selectedAirPlayDevice.local);
-    const layout = computeTerminalLayout(columns, rows, showPlaybackFooter ? 3 : 2);
+    const layout = computeTerminalLayout(columns, rows, footerRows);
     const frameWidth = Math.max(40, layout.columns - 2);
     useEffect(() => player.onChange(setPlayback), [player]);
     const playingStationRef = useRef(null);
@@ -176,14 +192,14 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
     }), [player, store]);
     useEffect(() => {
-        if (screen !== 'explore' || layout.compact || !stdout.isTTY) {
+        if (!stdout.isTTY) {
             return;
         }
         stdout.write(enableMouseReporting);
         return () => {
             stdout.write(disableMouseReporting);
         };
-    }, [layout.compact, screen, stdout]);
+    }, [stdout]);
     useEffect(() => {
         selectedByScreenRef.current[screen] = selected;
         if (renderedStationContextKey) {
@@ -241,6 +257,9 @@ export function App({ store: providedStore, providers: providedProviders }) {
         if (transientMessageTimerRef.current) {
             clearTimeout(transientMessageTimerRef.current);
         }
+        if (transientFooterMessageTimerRef.current) {
+            clearTimeout(transientFooterMessageTimerRef.current);
+        }
     }, []);
     useEffect(() => {
         setSelected(value => clamp(value, currentItemCount(screen) - 1));
@@ -277,6 +296,29 @@ export function App({ store: providedStore, providers: providedProviders }) {
     useEffect(() => {
         refreshProviderHealth();
     }, [refreshProviderHealth]);
+    const refreshUpdateCheck = useCallback(async () => {
+        const updateCheck = await checkForUpdate({ currentVersion: installedVersion });
+        setLibrary(store.updateCheckState(updateCheck));
+        return updateCheck;
+    }, [installedVersion, store]);
+    useEffect(() => {
+        if (!shouldCheckForUpdate(library.updateCheck)) {
+            return;
+        }
+        let cancelled = false;
+        void refreshUpdateCheck().then(updateCheck => {
+            if (cancelled) {
+                return;
+            }
+            if (updateCheck.updateAvailable && updateCheck.latestVersion && !announcedUpdateRef.current) {
+                announcedUpdateRef.current = true;
+                setMessage(`Update available: v${updateCheck.latestVersion} · run :update`);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [library.updateCheck, refreshUpdateCheck]);
     const setStationContextFor = useCallback((key, context) => {
         setStationContexts(current => ({ ...current, [key]: context }));
     }, []);
@@ -321,6 +363,9 @@ export function App({ store: providedStore, providers: providedProviders }) {
         selectedByScreenRef.current[screenRef.current] = selectedRef.current;
         const remembered = selectedByScreenRef.current[next] ?? 0;
         const nextSelection = options.resetSelection ? 0 : remembered;
+        if (next === 'now-playing' && screenRef.current !== 'now-playing') {
+            setPulse(0);
+        }
         setScreen(next);
         setSelected(clamp(nextSelection, (itemCountsRef.current[next] ?? 0) - 1));
         if (options.clearMessage !== false) {
@@ -424,12 +469,15 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const loadCountry = useCallback(async (country) => {
         setLoadingStations(true);
         setMessage(null);
+        countryPageRequestRef.current = null;
         try {
-            const stations = await providers.byCountry(country.code, 120);
+            const stations = await providers.byCountry(country.code, COUNTRY_STATIONS_PAGE_SIZE, 0);
             showStationContext({
                 title: country.name,
-                subtitle: `${country.code} · ${country.stationCount.toLocaleString()} listed stations`,
-                stations
+                subtitle: formatCountryStationsSubtitle(country, stations.length, stations.length < country.stationCount),
+                stations,
+                country,
+                hasMore: stations.length >= COUNTRY_STATIONS_PAGE_SIZE && stations.length < country.stationCount
             }, 'stations');
         }
         catch (error) {
@@ -439,6 +487,61 @@ export function App({ store: providedStore, providers: providedProviders }) {
             setLoadingStations(false);
         }
     }, [providers, showStationContext]);
+    const loadMoreCountryStations = useCallback(async () => {
+        const context = stationContextsRef.current.stations;
+        const country = context.country;
+        if (!country || !context.hasMore || loadingStationsRef.current) {
+            return;
+        }
+        const offset = context.stations.length;
+        const requestKey = `${country.code}:${offset}`;
+        if (countryPageRequestRef.current === requestKey) {
+            return;
+        }
+        countryPageRequestRef.current = requestKey;
+        setLoadingStations(true);
+        try {
+            const page = await providers.byCountry(country.code, COUNTRY_STATIONS_PAGE_SIZE, offset);
+            const latest = stationContextsRef.current.stations;
+            if (latest.country?.code !== country.code || latest.stations.length !== offset) {
+                return;
+            }
+            const stations = appendUniqueStations(latest.stations, page);
+            const hasMore = page.length >= COUNTRY_STATIONS_PAGE_SIZE && stations.length < country.stationCount;
+            setStationContextFor('stations', {
+                ...latest,
+                subtitle: formatCountryStationsSubtitle(country, stations.length, hasMore),
+                stations,
+                hasMore
+            });
+        }
+        catch (error) {
+            if (stationContextsRef.current.stations.country?.code === country.code) {
+                setMessage(error instanceof Error ? error.message : `Could not load more ${country.name} stations.`);
+            }
+        }
+        finally {
+            if (countryPageRequestRef.current === requestKey) {
+                countryPageRequestRef.current = null;
+                setLoadingStations(false);
+            }
+        }
+    }, [providers, setStationContextFor]);
+    useEffect(() => {
+        if (screen === 'stations' &&
+            stationContexts.stations.country &&
+            stationContexts.stations.hasMore &&
+            stationContexts.stations.stations.length - selected <= COUNTRY_STATIONS_LOAD_AHEAD) {
+            void loadMoreCountryStations();
+        }
+    }, [
+        loadMoreCountryStations,
+        screen,
+        selected,
+        stationContexts.stations.country,
+        stationContexts.stations.hasMore,
+        stationContexts.stations.stations.length
+    ]);
     const runSearch = useCallback(async (query = searchQuery) => {
         if (!query.trim()) {
             setMessage('Enter a station, genre, language, or place.');
@@ -448,15 +551,18 @@ export function App({ store: providedStore, providers: providedProviders }) {
         setMessage(null);
         try {
             const stations = await providers.search(query, settingsRef.current, {
-                limit: 90,
+                limit: SEARCH_RESULTS_PAGE_SIZE,
+                offset: 0,
                 codec: filters.codec ?? undefined,
                 language: filters.language ?? undefined,
                 minBitrate: filters.minBitrate ?? undefined
             });
             setStationContextFor('search', {
                 title: `Search: ${query}`,
-                subtitle: 'Matches across enabled public station directories',
-                stations
+                subtitle: formatSearchSubtitle(stations.length, stations.length >= SEARCH_RESULTS_PAGE_SIZE),
+                stations,
+                query: query.trim(),
+                hasMore: stations.length >= SEARCH_RESULTS_PAGE_SIZE
             });
             selectedByScreenRef.current.search = 0;
             lastSubmittedSearchRef.current = query.trim();
@@ -472,6 +578,65 @@ export function App({ store: providedStore, providers: providedProviders }) {
             setLoadingStations(false);
         }
     }, [filters, providers, searchQuery, setStationContextFor, store]);
+    const loadMoreSearchResults = useCallback(async () => {
+        const context = stationContextsRef.current.search;
+        const query = context.query;
+        if (!query || !context.hasMore || loadingStationsRef.current) {
+            return;
+        }
+        const offset = context.stations.length;
+        const requestKey = `${query}:${offset}:${filters.codec ?? ''}:${filters.language ?? ''}:${filters.minBitrate ?? ''}`;
+        if (searchPageRequestRef.current === requestKey) {
+            return;
+        }
+        searchPageRequestRef.current = requestKey;
+        setLoadingStations(true);
+        try {
+            const page = await providers.search(query, settingsRef.current, {
+                limit: SEARCH_RESULTS_PAGE_SIZE,
+                offset,
+                codec: filters.codec ?? undefined,
+                language: filters.language ?? undefined,
+                minBitrate: filters.minBitrate ?? undefined
+            });
+            const latest = stationContextsRef.current.search;
+            if (latest.query !== query || latest.stations.length !== offset) {
+                return;
+            }
+            const stations = appendUniqueStations(latest.stations, page);
+            const hasMore = page.length >= SEARCH_RESULTS_PAGE_SIZE && stations.length > latest.stations.length;
+            setStationContextFor('search', {
+                ...latest,
+                subtitle: formatSearchSubtitle(stations.length, hasMore),
+                stations,
+                hasMore
+            });
+        }
+        catch (error) {
+            if (stationContextsRef.current.search.query === query) {
+                setMessage(error instanceof Error ? error.message : 'Could not load more search results.');
+            }
+        }
+        finally {
+            if (searchPageRequestRef.current === requestKey) {
+                searchPageRequestRef.current = null;
+                setLoadingStations(false);
+            }
+        }
+    }, [filters, providers, setStationContextFor]);
+    useEffect(() => {
+        if (screen === 'search' &&
+            stationContexts.search.hasMore &&
+            stationContexts.search.stations.length - selected <= SEARCH_RESULTS_LOAD_AHEAD) {
+            void loadMoreSearchResults();
+        }
+    }, [
+        loadMoreSearchResults,
+        screen,
+        selected,
+        stationContexts.search.hasMore,
+        stationContexts.search.stations.length
+    ]);
     const recallSearchHistory = useCallback((direction) => {
         const history = store.snapshot().searchHistory;
         if (history.length === 0) {
@@ -500,6 +665,10 @@ export function App({ store: providedStore, providers: providedProviders }) {
         go('nearby', { resetSelection: stationContextsRef.current.nearby.stations.length === 0 });
         try {
             if (!settingsRef.current.enableNearbyLocation) {
+                if (stationContextsRef.current.nearby.stations.length > 0) {
+                    setMessage('Nearby location lookup is off. Showing the last nearby station list.');
+                    return;
+                }
                 setStationContextFor('nearby', {
                     title: 'Nearby',
                     subtitle: 'IP-based location is off. Enable it in Settings or use :location on.',
@@ -510,6 +679,10 @@ export function App({ store: providedStore, providers: providedProviders }) {
             const detected = location ?? (await providers.detectLocation());
             setLocation(detected);
             if (!detected) {
+                if (stationContextsRef.current.nearby.stations.length > 0) {
+                    setMessage('Location detection is unavailable. Showing the last nearby station list.');
+                    return;
+                }
                 setStationContextFor('nearby', {
                     title: 'Nearby',
                     subtitle: 'Location detection was unavailable',
@@ -563,7 +736,6 @@ export function App({ store: providedStore, providers: providedProviders }) {
     }, []);
     const playStation = useCallback(async (station, options = {}) => {
         const queue = options.queue ?? queueFromCurrentList(station);
-        setMessage(`Tuning ${station.name}...`);
         setNowPlaying(null);
         try {
             const resolved = await providers.resolve(station);
@@ -617,6 +789,16 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
     }, [playStation, store]);
     playStationRef.current = playStation;
+    const showTransientFooterMessage = useCallback((nextMessage) => {
+        if (transientFooterMessageTimerRef.current) {
+            clearTimeout(transientFooterMessageTimerRef.current);
+        }
+        setFooterMessage(nextMessage);
+        transientFooterMessageTimerRef.current = setTimeout(() => {
+            setFooterMessage(currentMessage => currentMessage === nextMessage ? null : currentMessage);
+            transientFooterMessageTimerRef.current = null;
+        }, VISUALIZER_MESSAGE_MS);
+    }, []);
     const toggleFavorite = useCallback((station) => {
         if (!station) {
             setMessage('Select or play a station before pressing f.');
@@ -624,12 +806,18 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
         const wasFavorite = store.isFavorite(station);
         setLibrary(store.toggleFavorite(station));
-        setMessage(`${wasFavorite ? 'Removed from' : 'Added to'} favorites: ${station.name}`);
+        const favoriteMessage = `${wasFavorite ? 'Removed from' : 'Added to'} favorites: ${station.name}`;
+        if (screenRef.current === 'library') {
+            showTransientFooterMessage(favoriteMessage);
+        }
+        else {
+            setMessage(favoriteMessage);
+        }
         if (!wasFavorite) {
             // Best-effort upvote back to the directory; never blocks favoriting.
             void providers.vote(station);
         }
-    }, [providers, store]);
+    }, [providers, showTransientFooterMessage, store]);
     const showControlResult = useCallback((result) => {
         if (!result.ok && result.message) {
             setMessage(result.message);
@@ -868,6 +1056,55 @@ export function App({ store: providedStore, providers: providedProviders }) {
             openScreen(next.screen);
         }
     }, [openScreen, screen]);
+    const handleUpdateCommand = useCallback(async () => {
+        const updateCheck = library.updateCheck;
+        if (!updateCheck || shouldCheckForUpdate(updateCheck)) {
+            setMessage('Checking for updates...');
+            const latest = await refreshUpdateCheck();
+            if (latest.error) {
+                setMessage(`Update check failed: ${latest.error}`);
+                return;
+            }
+        }
+        const command = updateCommandForInstall();
+        const copied = copyToClipboard(command.command);
+        const latestVersion = store.snapshot().updateCheck?.latestVersion ?? updateCheck?.latestVersion;
+        const prefix = latestVersion ? `Latest v${latestVersion}. ` : '';
+        const method = command.method === 'homebrew' ? 'Homebrew' : command.method === 'npm' ? 'npm' : 'your install method';
+        setMessage(`${prefix}${copied ? 'Copied' : 'Run'} ${method} update: ${command.command}`);
+    }, [library.updateCheck, refreshUpdateCheck, store]);
+    const updateFromSettings = useCallback(async () => {
+        if (installingUpdateRef.current) {
+            setMessage('Update install already running.');
+            return;
+        }
+        const currentUpdateCheck = store.snapshot().updateCheck ?? library.updateCheck;
+        if (!currentUpdateCheck?.updateAvailable) {
+            setMessage('Checking for updates...');
+            const latest = await refreshUpdateCheck();
+            if (latest.error) {
+                setMessage(`Update check failed: ${latest.error}`);
+                return;
+            }
+            if (latest.updateAvailable && latest.latestVersion) {
+                setMessage(`Update available: v${latest.latestVersion}. Press Enter on Install update.`);
+                return;
+            }
+            setMessage(`RadioCLI is up to date at v${installedVersion}.`);
+            return;
+        }
+        const command = updateCommandForInstall();
+        installingUpdateRef.current = true;
+        setMessage(`Installing update with ${command.method === 'homebrew' ? 'Homebrew' : 'npm'}...`);
+        const result = await installUpdate(command.command);
+        installingUpdateRef.current = false;
+        if (result.ok) {
+            setMessage(`Update installed. Restart RadioCLI to use the new version.`);
+            return;
+        }
+        const detail = result.output ? ` ${result.output.split('\n').at(-1)}` : '';
+        setMessage(`Update install failed. Run manually: ${result.command}.${detail}`);
+    }, [installedVersion, library.updateCheck, refreshUpdateCheck, store]);
     const executeCommand = useCommandExecutor({
         beginLearningTransportKey,
         countries,
@@ -893,6 +1130,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
         store,
         toggleFavorite,
         toggleMute,
+        updateCommand: handleUpdateCommand,
         updateSettings
     });
     const playAdjacent = useCallback((direction) => {
@@ -985,7 +1223,8 @@ export function App({ store: providedStore, providers: providedProviders }) {
         toggleSetting,
         toggleNearbyLocation,
         toggleRadioGarden,
-        toggleSkipBrokenStreams
+        toggleSkipBrokenStreams,
+        updateFromSettings
     });
     function currentItemCount(currentScreen) {
         return itemCountsRef.current[currentScreen] ?? 0;
@@ -1016,7 +1255,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
         playbackBackend: playback.backend,
         screen
     });
-    return (_jsx(DisplayContext.Provider, { value: displayMode, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, height: layout.rows, width: layout.columns, overflow: "hidden", backgroundColor: displayMode.app, children: [hasTopTabs ? (_jsx(Box, { height: 3, marginBottom: 1, flexShrink: 0, backgroundColor: displayMode.app, children: _jsx(TopTabs, { tabs: topTabs, active: activeTabForScreen(screen), theme: theme, width: frameWidth, rightLabel: `${playbackBackendLabel(playback.backend)} · ${playback.state}` }) })) : null, _jsxs(Box, { height: layout.contentRows, width: frameWidth, flexDirection: "column", overflowY: "hidden", flexShrink: 0, backgroundColor: displayMode.app, children: [_jsx(AppContent, { airPlayDevices: availableAirPlayDevices, airPlayCode: airPlayCode, backends: availableBackends, countryFilter: countryFilter, diagnostics: diagnostics, displayStations: displayStations, editingCountryFilter: editingCountryFilter, editingSearch: editingSearch, favoriteKeys: favoriteKeys, filterLabel: filterLabel, filteredCountries: filteredCountries, frameWidth: frameWidth, layout: layout, library: library, loadingCountries: loadingCountries, loadingStations: loadingStations, nowPlaying: nowPlaying, playback: playback, playingStation: playingStation, providerHealth: providerHealth, pulse: pulse, searchQuery: searchQuery, screen: screen, selected: selected, showDiagnostics: showDiagnostics, sleepLabel: sleepLabel, stationContext: stationContext, exploreCursor: exploreCursor, stationFavorite: store.isFavorite(playingStation), stationTime: stationApproximateTime(playingStation), storePath: store.filePath, theme: theme }), _jsx(Box, { height: 1, children: message ? _jsx(Text, { color: themeAccent(theme), children: truncate(message, frameWidth) }) : null })] }), _jsxs(Box, { height: layout.footerRows, width: frameWidth, flexDirection: "column", flexShrink: 0, backgroundColor: displayMode.panel, children: [playbackFooter ? _jsx(Text, { color: themeAccent(theme), children: playbackFooter }) : null, _jsx(Text, { color: commandMode || capturingTransportAction ? themeAccent(theme) : textMuted, children: truncate(pageFooter, frameWidth) }), _jsx(Text, { color: textDim, children: truncate(globalFooter, frameWidth) })] })] }) }));
+    return (_jsx(DisplayContext.Provider, { value: displayMode, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, height: layout.rows, width: layout.columns, overflow: "hidden", backgroundColor: displayMode.app, children: [hasTopTabs ? (_jsx(Box, { height: 3, marginBottom: 1, flexShrink: 0, backgroundColor: displayMode.app, children: _jsx(TopTabs, { tabs: topTabs, active: activeTabForScreen(screen), theme: theme, width: frameWidth, rightLabel: `${playbackBackendLabel(playback.backend)} · ${playback.state}` }) })) : null, _jsxs(Box, { height: layout.contentRows, width: frameWidth, flexDirection: "column", overflowY: "hidden", flexShrink: 0, backgroundColor: displayMode.app, children: [_jsx(AppContent, { airPlayDevices: availableAirPlayDevices, airPlayCode: airPlayCode, appVersion: installedVersion, backends: availableBackends, countryFilter: countryFilter, diagnostics: diagnostics, displayStations: displayStations, editingCountryFilter: editingCountryFilter, editingSearch: editingSearch, favoriteKeys: favoriteKeys, filterLabel: filterLabel, filteredCountries: filteredCountries, frameWidth: frameWidth, layout: layout, library: library, loadingCountries: loadingCountries, loadingStations: loadingStations, nowPlaying: nowPlaying, playback: playback, playingStation: playingStation, providerHealth: providerHealth, pulse: pulse, searchQuery: searchQuery, screen: screen, selected: selected, showDiagnostics: showDiagnostics, sleepLabel: sleepLabel, stationContext: stationContext, exploreCursor: exploreCursor, stationFavorite: store.isFavorite(playingStation), stationTime: stationApproximateTime(playingStation), storePath: store.filePath, theme: theme, updateCheck: library.updateCheck }), _jsx(Box, { height: 1, children: message ? _jsx(Text, { color: themeAccent(theme), children: truncate(message, frameWidth) }) : null })] }), _jsxs(Box, { height: layout.footerRows, width: frameWidth, flexDirection: "column", flexShrink: 0, backgroundColor: displayMode.app, children: [_jsx(Text, { color: themeAccent(theme), children: footerMessage ? truncate(footerMessage, frameWidth) : ' ' }), playbackFooter ? _jsx(Text, { color: themeAccent(theme), children: playbackFooter }) : null, _jsx(Text, { color: commandMode || capturingTransportAction ? themeAccent(theme) : textMuted, children: truncate(pageFooter, frameWidth) }), _jsxs(Box, { children: [_jsx(Text, { color: textDim, children: truncate(globalFooter, Math.max(1, frameWidth - installedVersion.length - 3)) }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { color: textDim, children: ["v", installedVersion] })] })] })] }) }));
 }
 function buildLibraryStations(library) {
     const stations = [];
@@ -1047,6 +1286,31 @@ function exploreCursorLocation(cursor) {
         source: 'explore cursor'
     };
 }
+function appendUniqueStations(current, page) {
+    const stations = [...current];
+    const seen = new Set(current.map(stationKey));
+    for (const station of page) {
+        const key = stationKey(station);
+        if (!seen.has(key)) {
+            seen.add(key);
+            stations.push(station);
+        }
+    }
+    return stations;
+}
+function formatCountryStationsSubtitle(country, loaded, hasMore) {
+    const total = country.stationCount.toLocaleString();
+    const loadedLabel = loaded.toLocaleString();
+    return hasMore
+        ? `${country.code} · ${loadedLabel} of ${total} listed stations loaded`
+        : `${country.code} · ${loadedLabel} of ${total} listed stations`;
+}
+function formatSearchSubtitle(loaded, hasMore) {
+    const count = loaded.toLocaleString();
+    return hasMore
+        ? `Matches across enabled public station directories · ${count}+ loaded`
+        : `Matches across enabled public station directories · ${count} loaded`;
+}
 function formatExploreSubtitle(cursor, stations) {
     if (stations.length === 0) {
         return `No geotagged stations near ${formatExploreCursor(cursor)}`;

package/dist/ui/AppContent.js

@@ -15,7 +15,7 @@ import { AirPlaySettingsScreen } from './screens/AirPlaySettingsScreen.js';
 import { AirPlayCodeScreen } from './screens/AirPlayCodeScreen.js';
 import { selectedAirPlayDevice } from './airplay-settings.js';
 import { playbackBackendLabel } from '../player/backend-install.js';
-export function AppContent({ airPlayDevices, airPlayCode, backends, countryFilter, diagnostics, displayStations, editingCountryFilter, editingSearch, exploreCursor, favoriteKeys, filterLabel, filteredCountries, frameWidth, layout, library, loadingCountries, loadingStations, nowPlaying, playback, playingStation, providerHealth, pulse, searchQuery, screen, selected, showDiagnostics, sleepLabel, stationContext, stationFavorite, stationTime, storePath, theme }) {
+export function AppContent({ airPlayDevices, airPlayCode, appVersion, backends, countryFilter, diagnostics, displayStations, editingCountryFilter, editingSearch, exploreCursor, favoriteKeys, filterLabel, filteredCountries, frameWidth, layout, library, loadingCountries, loadingStations, nowPlaying, playback, playingStation, providerHealth, pulse, searchQuery, screen, selected, showDiagnostics, sleepLabel, stationContext, stationFavorite, stationTime, storePath, theme, updateCheck }) {
     if (layout.compact) {
         return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "RadioCLI" }), _jsxs(Text, { color: themeAccent(theme), children: ["Terminal too small: ", layout.columns, "x", layout.rows] }), _jsx(Text, { color: textMuted, children: "Resize to at least 64x18 for the full receiver UI." }), _jsxs(Text, { color: textMuted, children: ["Playback: ", playback.state, " \u00B7 ", playbackBackendLabel(playback.backend)] }), _jsx(Text, { color: textMuted, children: "q quit \u00B7 Ctrl+C always exits" })] }));
     }
@@ -44,7 +44,7 @@ export function AppContent({ airPlayDevices, airPlayCode, backends, countryFilte
         return _jsx(StatsScreen, { library: library, theme: theme, width: frameWidth, height: layout.contentRows });
     }
     if (screen === 'settings') {
-        return (_jsx(SettingsScreen, { selected: selected, settings: library.settings, storePath: storePath, playback: playback, backends: backends, airPlayDevices: airPlayDevices, providerHealth: providerHealth, theme: theme, diagnostics: diagnostics, width: frameWidth }));
+        return (_jsx(SettingsScreen, { selected: selected, settings: library.settings, appVersion: appVersion, updateCheck: updateCheck, storePath: storePath, playback: playback, backends: backends, airPlayDevices: airPlayDevices, providerHealth: providerHealth, theme: theme, diagnostics: diagnostics, width: frameWidth, height: layout.contentRows }));
     }
     if (screen === 'airplay-settings') {
         return (_jsx(AirPlaySettingsScreen, { selected: selected, settings: library.settings, backends: backends, devices: airPlayDevices, theme: theme, width: frameWidth }));

package/dist/ui/app-state.js

@@ -173,6 +173,9 @@ export function stationContextKeyForScreen(screen) {
 export function shouldAnimateReceiver(screen, playback) {
     return screen === 'now-playing' && playback.state === 'playing' && playback.ready;
 }
+export function shouldToggleNearbyLocationShortcut(input, screen) {
+    return input === 'l' && (screen === 'home' || screen === 'nearby' || screen === 'settings');
+}
 export function nextReceiverPulse(pulse) {
     return pulse + 1;
 }

package/dist/ui/components/Menu.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 export function Menu({ items, selected, keyFor, render }) {
-    return (_jsx(Box, { flexDirection: "column", children: items.map((item, position) => (_jsx(Box, { children: render(item, position, position === selected) }, keyFor?.(item, position) ?? defaultMenuKey(item)))) }));
+    const activeIndex = items.length > 0 ? Math.min(Math.max(selected, 0), items.length - 1) : -1;
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item, position) => (_jsx(Box, { children: render(item, position, position === activeIndex) }, keyFor?.(item, position) ?? defaultMenuKey(item)))) }));
 }
 export function Pointer({ active }) {
     return _jsx(Text, { bold: active, children: active ? '> ' : '  ' });

package/dist/ui/components/StationList.js

@@ -12,12 +12,12 @@ export function StationList({ stations, selected, theme, favorites, pageSize, wi
     const rowWidth = Math.max(42, width - 4);
     const nameWidth = Math.min(48, Math.max(18, Math.floor(rowWidth * 0.42)));
     const metaWidth = Math.max(12, rowWidth - nameWidth - 6);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Showing ", window.start + 1, "-", window.end, " of ", stations.length] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: station => `${station.provider}:${station.id}`, render: (station, index, active) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Showing ", window.start + 1, "-", window.end, " of ", stations.length] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: station => `${station.provider}:${station.id}`, render: (station, _index, active) => {
                     const favorite = favorites.has(`${station.provider}:${station.id}`);
                     const stationName = truncate(station.name, favorite ? Math.max(1, nameWidth - 2) : nameWidth);
                     const titleWidth = nameWidth + 2;
                     const titleUsed = stationName.length + (favorite ? 2 : 0);
                     const titlePadding = ' '.repeat(Math.max(1, titleWidth - titleUsed));
-                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: stationName }), favorite ? _jsx(Text, { color: "yellow", children: " \u2605" }) : null, _jsx(Text, { children: titlePadding }), _jsx(Text, { color: textMuted, children: truncate(`${stationLocation(station)} · ${stationTech(station)}`, metaWidth) })] }), active ? (_jsx(Box, { marginLeft: 4, children: _jsxs(Text, { color: textMuted, children: ["#", window.start + index + 1, " \u00B7 ", truncate(stationTags(station), rowWidth - 8)] }) })) : null] }));
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: stationName }), favorite ? _jsx(Text, { color: "yellow", children: " \u2605" }) : null, _jsx(Text, { children: titlePadding }), _jsx(Text, { color: textMuted, children: truncate(`${stationLocation(station)} · ${stationTech(station)}`, metaWidth) })] }), active ? (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { color: textMuted, children: truncate(stationTags(station), rowWidth - 4) }) })) : null] }));
                 } })] }));
 }

package/dist/ui/components/TopTabs.js

@@ -5,7 +5,7 @@ import { useDisplay } from '../display-context.js';
 import { truncate } from '../format.js';
 export function TopTabs({ tabs, active, theme, width, rightLabel }) {
     const accent = themeAccent(theme);
-    const { panel: panelBackground, ascii } = useDisplay();
+    const { app: background, ascii } = useDisplay();
     const box = ascii
         ? { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' }
         : { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' };
@@ -20,7 +20,7 @@ export function TopTabs({ tabs, active, theme, width, rightLabel }) {
     const visibleTabs = fitTabs(tabs, active, tabsAvailableWidth);
     const visibleTabsWidth = tabsWidth(visibleTabs);
     const tabPaddingWidth = Math.max(0, bodyWidth - visibleTabsWidth - (canShowRight ? rightText.length : 0));
-    return (_jsxs(Box, { flexDirection: "column", backgroundColor: panelBackground, width: width, children: [_jsxs(Text, { backgroundColor: panelBackground, children: [_jsxs(Text, { color: panelBorder, children: [box.tl, " "] }), _jsx(Text, { color: accent, bold: true, children: brand }), _jsxs(Text, { color: panelBorder, children: [" ", box.h.repeat(titleRuleWidth), box.tr] })] }), _jsxs(Text, { backgroundColor: panelBackground, children: [_jsxs(Text, { color: panelBorder, children: [box.v, " "] }), visibleTabs.map((item, index) => (_jsxs(Text, { children: [item.type === 'overflow' ? (_jsx(Text, { color: textMuted, children: "\u2026" })) : (_jsx(Text, { color: item.tab.screen === active ? accent : textMuted, bold: item.tab.screen === active, children: item.tab.label })), index < visibleTabs.length - 1 ? _jsxs(Text, { color: textMuted, children: [" ", box.v, " "] }) : null] }, item.type === 'overflow' ? `${item.side}-overflow` : item.tab.screen))), _jsx(Text, { children: ' '.repeat(tabPaddingWidth) }), canShowRight ? _jsx(Text, { color: textMuted, children: rightText }) : null, _jsxs(Text, { color: panelBorder, children: [" ", box.v] })] }), _jsxs(Text, { backgroundColor: panelBackground, color: panelBorder, children: [box.bl, box.h.repeat(Math.max(0, width - 2)), box.br] })] }));
+    return (_jsxs(Box, { flexDirection: "column", backgroundColor: background, width: width, children: [_jsxs(Text, { backgroundColor: background, children: [_jsxs(Text, { color: panelBorder, children: [box.tl, " "] }), _jsx(Text, { color: accent, bold: true, children: brand }), _jsxs(Text, { color: panelBorder, children: [" ", box.h.repeat(titleRuleWidth), box.tr] })] }), _jsxs(Text, { backgroundColor: background, children: [_jsxs(Text, { color: panelBorder, children: [box.v, " "] }), visibleTabs.map((item, index) => (_jsxs(Text, { children: [item.type === 'overflow' ? (_jsx(Text, { color: textMuted, children: "\u2026" })) : (_jsx(Text, { color: item.tab.screen === active ? accent : textMuted, bold: item.tab.screen === active, children: item.tab.label })), index < visibleTabs.length - 1 ? _jsxs(Text, { color: textMuted, children: [" ", box.v, " "] }) : null] }, item.type === 'overflow' ? `${item.side}-overflow` : item.tab.screen))), _jsx(Text, { children: ' '.repeat(tabPaddingWidth) }), canShowRight ? _jsx(Text, { color: textMuted, children: rightText }) : null, _jsxs(Text, { color: panelBorder, children: [" ", box.v] })] }), _jsxs(Text, { backgroundColor: background, color: panelBorder, children: [box.bl, box.h.repeat(Math.max(0, width - 2)), box.br] })] }));
 }
 function fitTabs(tabs, active, maxWidth) {
     const all = tabs.map(tab => ({ type: 'tab', tab }));

package/dist/ui/help-content.js

@@ -66,6 +66,7 @@ export const commandHelp = [
     { name: 'map', description: 'Open the world map' },
     { name: 'stats', description: 'Open listening stats' },
     { name: 'settings', description: 'Open settings' },
+    { name: 'update', description: 'Show the install command for the latest release' },
     { name: 'stop', description: 'Stop playback' },
     { name: 'help', description: 'Open this help' }
 ];

package/dist/ui/layout.js

@@ -7,6 +7,7 @@ export function computeTerminalLayout(columns = 100, rows = 30, footerRows = 2)
     const contentRows = Math.max(1, safeRows - reservedFooterRows - topRows);
     const mapMode = safeColumns >= 88 && contentRows >= 24 ? 'full' : 'compact';
     const stationRows = clamp(contentRows - 6, 1, 48);
+    const countryRows = clamp(contentRows - 5, 1, 64);
     return {
         columns: safeColumns,
         rows: safeRows,
@@ -14,7 +15,7 @@ export function computeTerminalLayout(columns = 100, rows = 30, footerRows = 2)
         topRows,
         contentRows,
         stationRows: compact ? 0 : stationRows,
-        countryRows: compact ? 0 : Math.max(1, contentRows - 4),
+        countryRows: compact ? 0 : countryRows,
         mapCountryRows: compact ? 0 : Math.max(1, contentRows - (mapMode === 'full' ? 25 : 14)),
         mapMode,
         receiverWidth: compact ? safeColumns : Math.max(62, safeColumns - 4),

package/dist/ui/page-footer.js

@@ -7,7 +7,7 @@ export function pageFooterText({ capturingTransportAction, commandMode, commandT
         return `COMMAND :${commandText}`;
     }
     if (screen === 'home') {
-        return '↑/↓ move · Enter open · number jump · : command';
+        return '↑/↓ move · Enter open · number jump · l location · : command';
     }
     if (screen === 'search' && editingSearch) {
         return 'Type query · ↑/↓ move results · Ctrl+↑/↓ history · Enter search/tune · Esc finish';
@@ -27,9 +27,10 @@ export function pageFooterText({ capturingTransportAction, commandMode, commandT
     if (screen === 'explore') {
         return 'Click map · WASD fine move · Shift+WASD jump · ↑/↓ station · Enter tune · f favorite · b home';
     }
-    if (screen === 'nearby' ||
-        screen === 'stations' ||
-        screen === 'library') {
+    if (screen === 'nearby') {
+        return '↑/↓ or n/p move · Enter tune · f favorite · l location · [/] page · b home';
+    }
+    if (screen === 'stations' || screen === 'library') {
         return '↑/↓ or n/p move · Enter tune · f favorite · [/] page · b home';
     }
     if (screen === 'now-playing') {

package/dist/ui/playback-footer.js

@@ -16,7 +16,9 @@ export function shouldShowPlaybackFooter(station, playback) {
     return Boolean((station || playback.stationName) && visiblePlaybackStates.has(playback.state));
 }
 export function playbackFooterText({ station, playback, metadata, sleepLabel, width, spinnerFrame }) {
-    const stationName = station?.name ?? playback.stationName;
+    const stationName = playback.state === 'loading'
+        ? playback.stationName ?? station?.name
+        : station?.name ?? playback.stationName;
     if (!stationName || !visiblePlaybackStates.has(playback.state)) {
         return null;
     }