@ciphore/radiocli 0.1.9 → 0.2.1

package/dist/ui/App.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, Text, useApp, useStdin, useStdout, useWindowSize } from 'ink';
 import { ProviderManager } from '../providers/provider-manager.js';
@@ -13,26 +13,37 @@ import { AppContent } from './AppContent.js';
 import { TopTabs } from './components/TopTabs.js';
 import { computeTerminalLayout } from './layout.js';
 import { truncate } from './format.js';
-import { playbackFooterText, shouldShowPlaybackFooter } from './playback-footer.js';
-import { pageFooterText } from './page-footer.js';
-import { disableMouseReporting, enableMouseReporting, exploreCursorForMouseCell } from './terminal-mouse.js';
+import { playbackFooterText, playbackStateForPendingStation } from './playback-footer.js';
+import { fullFooterRowCount, fullStatusFooterRows, microPlaybackControlsText, pageFooterText } from './page-footer.js';
+import { disableMouseReporting, enableMouseReporting, exploreCursorForMouseCell, shouldEnableMouseReporting } from './terminal-mouse.js';
 import { useAppInput } from './use-app-input.js';
 import { useCommandExecutor } from './use-command-executor.js';
 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 { helpItemCount } from './help-content.js';
+import { EXIT_CONFIRMATION_MS, ctrlCExitDecision } from './exit-confirmation.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 SKYLINE_RECEIVER_PULSE_MS = 120;
 const AMBIENT_RECEIVER_PULSE_MS = 140;
 const LOADING_SPINNER_MS = 120;
 const VISUALIZER_MESSAGE_MS = 4500;
+const LISTENING_HEARTBEAT_MS = 30_000;
+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',
     asciiMode: 'ASCII-safe display',
-    reduceMotion: 'Reduce motion'
+    reduceMotion: 'Reduce motion',
+    mouseSupport: 'Mouse and trackpad scrolling'
 };
 export function App({ store: providedStore, providers: providedProviders }) {
     const { exit } = useApp();
@@ -41,6 +52,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;
@@ -61,6 +73,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const [searchQuery, setSearchQuery] = useState('');
     const [editingSearch, setEditingSearch] = useState(true);
     const [playingStation, setPlayingStation] = useState(null);
+    const [tuningStation, setTuningStation] = useState(null);
     const [nowPlaying, setNowPlaying] = useState(null);
     const [location, setLocation] = useState(null);
     const [exploreCursor, setExploreCursor] = useState(defaultExploreCursor);
@@ -74,9 +87,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);
@@ -90,7 +108,16 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const exploreMoveTimerRef = useRef(null);
     const transientMessageTimerRef = useRef(null);
     const transientFooterMessageTimerRef = useRef(null);
+    const exitConfirmationUntilRef = useRef(0);
     const receiverPulseSnapshotRef = useRef(null);
+    const helpReturnScreenRef = useRef('home');
+    const countriesLoadAttemptedRef = useRef(false);
+    const tuneRequestRef = useRef(0);
+    const searchRequestRef = useRef(0);
+    const countryRequestRef = useRef(0);
+    const nearbyRequestRef = useRef(0);
+    const skipBrokenTimerRef = useRef(null);
+    const volumeRequestRef = useRef(0);
     const theme = library.settings.theme;
     const displayMode = useMemo(() => resolveDisplayMode(library.settings), [library.settings.transparentBackground, library.settings.asciiMode, library.settings.reduceMotion]);
     const favoriteKeys = useMemo(() => new Set(library.favorites.map(stationKey)), [library.favorites]);
@@ -114,6 +141,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);
@@ -140,7 +168,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
         'airplay-settings': 0,
         'airplay-code': 1,
         settings: settingsItems.length,
-        help: 0
+        help: helpItemCount
     });
     itemCountsRef.current = {
         home: homeItems.length,
@@ -156,37 +184,75 @@ export function App({ store: providedStore, providers: providedProviders }) {
         'airplay-settings': availableAirPlayDevices.length,
         'airplay-code': 1,
         settings: settingsItems.length,
-        help: 0
+        help: helpItemCount
     };
     const displayStations = useMemo(() => applyStationFilters(stationContext.stations, filters), [filters, stationContext.stations]);
     displayStationsRef.current = displayStations;
     const sleepLabel = sleepUntil ? `Sleep ${formatTimeLeft(sleepUntil - Date.now())}` : 'Sleep off';
-    const showPlaybackFooter = shouldShowPlaybackFooter(playingStation, playback);
-    const footerRows = showPlaybackFooter ? 4 : 3;
+    const footerStation = tuningStation ?? playingStation;
+    const footerPlayback = playbackStateForPendingStation(playback, tuningStation);
+    // Now Playing already owns the station identity, so its transient notice can
+    // reuse the playback-status row that other full-size screens need.
+    const footerRows = fullFooterRowCount(screen);
     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, footerRows);
-    const frameWidth = Math.max(40, layout.columns - 2);
+    const frameWidth = layout.frameWidth;
+    const mouseReportingActive = !commandMode &&
+        !capturingTransportAction &&
+        !editingCountryFilter &&
+        shouldEnableMouseReporting(screen, itemCountsRef.current[screen] ?? 0, mouseVisibleRows(screen, layout), library.settings.mouseSupport !== false);
     useEffect(() => player.onChange(setPlayback), [player]);
     const playingStationRef = useRef(null);
     playingStationRef.current = playingStation;
+    const activeListeningStationRef = useRef(null);
+    const lastRecordedTrackRef = useRef(null);
+    useEffect(() => {
+        const station = playingStationRef.current;
+        const isAudible = playback.state === 'playing' && playback.ready && station;
+        if (isAudible) {
+            const key = stationKey(station);
+            if (activeListeningStationRef.current !== key) {
+                activeListeningStationRef.current = key;
+                setLibrary(store.startListeningSession(station));
+            }
+            return;
+        }
+        if (activeListeningStationRef.current) {
+            activeListeningStationRef.current = null;
+            setLibrary(store.finishActiveListeningSession());
+        }
+    }, [playback.ready, playback.state, playingStation, store]);
+    useEffect(() => {
+        if (playback.state !== 'playing' || !playback.ready || !playingStation) {
+            return;
+        }
+        const timer = setInterval(() => {
+            setLibrary(store.checkpointActiveListeningSession());
+        }, LISTENING_HEARTBEAT_MS);
+        return () => clearInterval(timer);
+    }, [playback.ready, playback.state, playingStation, store]);
     useEffect(() => player.onMetadata(metadata => {
         setNowPlaying(metadata);
         const station = playingStationRef.current;
         if (station && metadata.title) {
+            const trackKey = `${stationKey(station)}:${metadata.title}`;
+            if (lastRecordedTrackRef.current === trackKey)
+                return;
+            lastRecordedTrackRef.current = trackKey;
             setLibrary(store.recordTrack(station, metadata.title));
         }
     }), [player, store]);
     useEffect(() => {
-        if (screen !== 'explore' || layout.compact || !stdout.isTTY) {
+        if (!stdout.isTTY || !mouseReportingActive) {
             return;
         }
         stdout.write(enableMouseReporting);
         return () => {
             stdout.write(disableMouseReporting);
         };
-    }, [layout.compact, screen, stdout]);
+    }, [mouseReportingActive, stdout]);
     useEffect(() => {
         selectedByScreenRef.current[screen] = selected;
         if (renderedStationContextKey) {
@@ -212,12 +278,16 @@ export function App({ store: providedStore, providers: providedProviders }) {
             process.env.RADIO_ATLAS_DISABLE_ANIMATION === '1') {
             return;
         }
-        const intervalMs = LIVE_RECEIVER_STYLES.has(library.settings.receiverStyle) ? LIVE_RECEIVER_PULSE_MS : AMBIENT_RECEIVER_PULSE_MS;
+        const intervalMs = library.settings.receiverStyle === 'skyline'
+            ? SKYLINE_RECEIVER_PULSE_MS
+            : LIVE_RECEIVER_STYLES.has(library.settings.receiverStyle)
+                ? LIVE_RECEIVER_PULSE_MS
+                : AMBIENT_RECEIVER_PULSE_MS;
         const timer = setInterval(() => setPulse(nextReceiverPulse), intervalMs);
         return () => clearInterval(timer);
     }, [library.settings.receiverStyle, library.settings.reduceMotion, playback.ready, playback.state, screen]);
     useEffect(() => {
-        if (playback.state !== 'loading' ||
+        if (footerPlayback.state !== 'loading' ||
             library.settings.reduceMotion ||
             process.env.RADIOCLI_DISABLE_ANIMATION === '1' ||
             process.env.RADIO_ATLAS_DISABLE_ANIMATION === '1') {
@@ -226,9 +296,13 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
         const timer = setInterval(() => setSpinnerFrame(value => (value + 1) % 1000), LOADING_SPINNER_MS);
         return () => clearInterval(timer);
-    }, [library.settings.reduceMotion, playback.state]);
+    }, [footerPlayback.state, library.settings.reduceMotion]);
     useEffect(() => {
-        if ((screen === 'countries' || screen === 'map') && countries.length === 0 && !loadingCountries) {
+        if ((screen === 'countries' || screen === 'map') &&
+            countries.length === 0 &&
+            !loadingCountries &&
+            !countriesLoadAttemptedRef.current) {
+            countriesLoadAttemptedRef.current = true;
             setLoadingCountries(true);
             providers
                 .countries()
@@ -247,6 +321,9 @@ export function App({ store: providedStore, providers: providedProviders }) {
         if (transientFooterMessageTimerRef.current) {
             clearTimeout(transientFooterMessageTimerRef.current);
         }
+        if (skipBrokenTimerRef.current) {
+            clearTimeout(skipBrokenTimerRef.current);
+        }
     }, []);
     useEffect(() => {
         setSelected(value => clamp(value, currentItemCount(screen) - 1));
@@ -257,12 +334,14 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
         const delayMs = sleepUntil - Date.now();
         if (delayMs <= 0) {
+            tuneRequestRef.current += 1;
             setLibrary(store.finishActiveListeningSession());
             void player.stop();
             setSleepUntil(null);
             return;
         }
         const timer = setTimeout(() => {
+            tuneRequestRef.current += 1;
             setLibrary(store.finishActiveListeningSession());
             void player.stop();
             setSleepUntil(null);
@@ -283,6 +362,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 }));
     }, []);
@@ -324,14 +426,20 @@ export function App({ store: providedStore, providers: providedProviders }) {
         setMessage(`Learned ${mediaActionLabel(action)} key.`);
     }, [updateMediaKeys]);
     const go = useCallback((next, options = {}) => {
+        if (next === 'help' && screenRef.current !== 'help') {
+            helpReturnScreenRef.current = screenRef.current;
+        }
+        const destination = screenRef.current === 'help' && next === 'home'
+            ? helpReturnScreenRef.current
+            : next;
         selectedByScreenRef.current[screenRef.current] = selectedRef.current;
-        const remembered = selectedByScreenRef.current[next] ?? 0;
+        const remembered = selectedByScreenRef.current[destination] ?? 0;
         const nextSelection = options.resetSelection ? 0 : remembered;
-        if (next === 'now-playing' && screenRef.current !== 'now-playing') {
+        if (destination === 'now-playing' && screenRef.current !== 'now-playing') {
             setPulse(0);
         }
-        setScreen(next);
-        setSelected(clamp(nextSelection, (itemCountsRef.current[next] ?? 0) - 1));
+        setScreen(destination);
+        setSelected(clamp(nextSelection, (itemCountsRef.current[destination] ?? 0) - 1));
         if (options.clearMessage !== false) {
             setMessage(null);
         }
@@ -346,9 +454,22 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
     }, [openAirPlayCode, playback.backend, playback.message]);
     const shutdown = useCallback(() => {
+        tuneRequestRef.current += 1;
         store.finishActiveListeningSession();
         player.stop().finally(exit);
     }, [exit, player, store]);
+    useEffect(() => {
+        const finishForSignal = () => {
+            store.finishActiveListeningSession();
+            void player.stop().finally(() => process.exit(0));
+        };
+        process.once('SIGTERM', finishForSignal);
+        process.once('SIGHUP', finishForSignal);
+        return () => {
+            process.off('SIGTERM', finishForSignal);
+            process.off('SIGHUP', finishForSignal);
+        };
+    }, [player, store]);
     const showStationContext = useCallback((context, next = 'stations', options = {}) => {
         setStationContextFor(stationContextKeyForScreen(next) ?? 'stations', context);
         go(next, { resetSelection: options.resetSelection ?? true, clearMessage: options.clearMessage });
@@ -431,41 +552,115 @@ export function App({ store: providedStore, providers: providedProviders }) {
         void loadExploreAt(next, { resetSelection: true, clearMessage: false });
     }, [frameWidth, layout, loadExploreAt]);
     const loadCountry = useCallback(async (country) => {
+        const requestId = countryRequestRef.current + 1;
+        countryRequestRef.current = requestId;
         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);
+            if (requestId !== countryRequestRef.current)
+                return;
             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) {
+            if (requestId !== countryRequestRef.current)
+                return;
             setMessage(error instanceof Error ? error.message : `Could not load ${country.name}.`);
         }
         finally {
-            setLoadingStations(false);
+            if (requestId === countryRequestRef.current)
+                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 > latest.stations.length &&
+                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.');
             return;
         }
+        const requestId = searchRequestRef.current + 1;
+        searchRequestRef.current = requestId;
         setLoadingStations(true);
         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
             });
+            if (requestId !== searchRequestRef.current)
+                return;
             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();
@@ -475,12 +670,74 @@ export function App({ store: providedStore, providers: providedProviders }) {
             setEditingSearch(true);
         }
         catch (error) {
+            if (requestId !== searchRequestRef.current)
+                return;
             setMessage(error instanceof Error ? error.message : 'Search failed.');
         }
         finally {
-            setLoadingStations(false);
+            if (requestId === searchRequestRef.current)
+                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) {
@@ -504,6 +761,8 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
     }, [searchQuery, store]);
     const loadNearby = useCallback(async () => {
+        const requestId = nearbyRequestRef.current + 1;
+        nearbyRequestRef.current = requestId;
         setLoadingStations(true);
         setMessage(null);
         go('nearby', { resetSelection: stationContextsRef.current.nearby.stations.length === 0 });
@@ -521,6 +780,8 @@ export function App({ store: providedStore, providers: providedProviders }) {
                 return;
             }
             const detected = location ?? (await providers.detectLocation());
+            if (requestId !== nearbyRequestRef.current)
+                return;
             setLocation(detected);
             if (!detected) {
                 if (stationContextsRef.current.nearby.stations.length > 0) {
@@ -535,6 +796,8 @@ export function App({ store: providedStore, providers: providedProviders }) {
                 return;
             }
             const stations = await providers.nearby(detected, 90);
+            if (requestId !== nearbyRequestRef.current)
+                return;
             setStationContextFor('nearby', {
                 title: 'Nearby',
                 subtitle: `${[detected.city, detected.region, detected.country].filter(Boolean).join(', ')} · ${detected.source}`,
@@ -542,10 +805,13 @@ export function App({ store: providedStore, providers: providedProviders }) {
             });
         }
         catch (error) {
+            if (requestId !== nearbyRequestRef.current)
+                return;
             setMessage(error instanceof Error ? error.message : 'Could not load nearby stations.');
         }
         finally {
-            setLoadingStations(false);
+            if (requestId === nearbyRequestRef.current)
+                setLoadingStations(false);
         }
     }, [go, location, providers, setStationContextFor]);
     const queueFromCurrentList = useCallback((station) => {
@@ -579,15 +845,31 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
     }, []);
     const playStation = useCallback(async (station, options = {}) => {
+        const requestId = tuneRequestRef.current + 1;
+        tuneRequestRef.current = requestId;
+        if (skipBrokenTimerRef.current) {
+            clearTimeout(skipBrokenTimerRef.current);
+            skipBrokenTimerRef.current = null;
+        }
         const queue = options.queue ?? queueFromCurrentList(station);
-        setMessage(`Tuning ${station.name}...`);
+        setTuningStation(station);
         setNowPlaying(null);
         try {
+            // Cancel any in-flight backend startup before resolving the next tune.
+            // This prevents a slower, older request from becoming audible after a
+            // newer station was selected.
+            await player.stop();
+            if (requestId !== tuneRequestRef.current)
+                return;
             const resolved = await providers.resolve(station);
+            if (requestId !== tuneRequestRef.current)
+                return;
             await player.play(station, resolved.url);
+            if (requestId !== tuneRequestRef.current)
+                return;
             setPlayingStation(station);
+            setTuningStation(null);
             playbackQueueRef.current = queue;
-            store.startListeningSession(station);
             const nextLibrary = store.addRecent(station);
             if (screenRef.current === 'library') {
                 const nextLibraryStations = applyStationFilters(buildLibraryStations(nextLibrary), filters);
@@ -604,16 +886,23 @@ export function App({ store: providedStore, providers: providedProviders }) {
             setMessage(null);
         }
         catch (error) {
+            if (requestId !== tuneRequestRef.current)
+                return;
             const message = error instanceof Error ? error.message : 'Could not tune station.';
             const currentList = queue.stations;
             const currentIndex = currentList.findIndex(item => stationKey(item) === stationKey(station));
             const nextStation = currentIndex >= 0 ? currentList[currentIndex + 1] : undefined;
             if (shouldSkipAfterTuneError(error, settingsRef.current.skipBrokenStreams, nextStation)) {
                 setMessage(`${message} Skipping to ${nextStation.name}.`);
+                setTuningStation(nextStation);
                 rememberQueueSelection(queue, currentIndex + 1);
-                setTimeout(() => playStationRef.current(nextStation, { ...options, queue }), 250);
+                skipBrokenTimerRef.current = setTimeout(() => {
+                    skipBrokenTimerRef.current = null;
+                    playStationRef.current(nextStation, { ...options, queue });
+                }, 250);
                 return;
             }
+            setTuningStation(null);
             setMessage(message);
         }
     }, [filters, go, player, providers, queueFromCurrentList, rememberQueueSelection, stationMatches, store]);
@@ -634,7 +923,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
         }
     }, [playStation, store]);
     playStationRef.current = playStation;
-    const showTransientFooterMessage = useCallback((nextMessage) => {
+    const showTransientFooterMessage = useCallback((nextMessage, durationMs = VISUALIZER_MESSAGE_MS) => {
         if (transientFooterMessageTimerRef.current) {
             clearTimeout(transientFooterMessageTimerRef.current);
         }
@@ -642,8 +931,17 @@ export function App({ store: providedStore, providers: providedProviders }) {
         transientFooterMessageTimerRef.current = setTimeout(() => {
             setFooterMessage(currentMessage => currentMessage === nextMessage ? null : currentMessage);
             transientFooterMessageTimerRef.current = null;
-        }, VISUALIZER_MESSAGE_MS);
+        }, durationMs);
     }, []);
+    const confirmCtrlCExit = useCallback(() => {
+        const decision = ctrlCExitDecision(exitConfirmationUntilRef.current, Date.now());
+        exitConfirmationUntilRef.current = decision.armedUntil;
+        if (decision.shouldExit) {
+            shutdown();
+            return;
+        }
+        showTransientFooterMessage('Ctrl+C again to exit', EXIT_CONFIRMATION_MS);
+    }, [showTransientFooterMessage, shutdown]);
     const toggleFavorite = useCallback((station) => {
         if (!station) {
             setMessage('Select or play a station before pressing f.');
@@ -658,7 +956,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
         else {
             setMessage(favoriteMessage);
         }
-        if (!wasFavorite) {
+        if (!wasFavorite && settingsRef.current.shareDirectoryVotes) {
             // Best-effort upvote back to the directory; never blocks favoriting.
             void providers.vote(station);
         }
@@ -673,8 +971,9 @@ export function App({ store: providedStore, providers: providedProviders }) {
             setMessage('This station has no homepage.');
             return;
         }
-        openExternal(station.homepage);
-        setMessage(`Opening homepage: ${station.name}`);
+        setMessage(openExternal(station.homepage)
+            ? `Opening homepage: ${station.name}`
+            : 'That station homepage is not a valid HTTP(S) URL.');
     }, []);
     const copyStationUrl = useCallback(async (station) => {
         if (!station) {
@@ -704,16 +1003,25 @@ export function App({ store: providedStore, providers: providedProviders }) {
     }, [go, player, showControlResult]);
     const setVolume = useCallback((volume) => {
         const clamped = clampVolume(volume);
+        const requestId = volumeRequestRef.current + 1;
+        volumeRequestRef.current = requestId;
         void player.setVolume(clamped).then(result => {
-            if (result.ok) {
-                updateSettings({ volume: clamped });
+            if (result.ok && volumeRequestRef.current === requestId) {
+                updateSettings({ volume: player.getState().volume });
             }
             showControlResult(result);
         });
     }, [player, showControlResult, updateSettings]);
     const adjustVolume = useCallback((delta) => {
-        setVolume((player.getState().volume || library.settings.volume) + delta);
-    }, [library.settings.volume, player, setVolume]);
+        const requestId = volumeRequestRef.current + 1;
+        volumeRequestRef.current = requestId;
+        void player.adjustVolume(delta).then(result => {
+            if (result.ok && volumeRequestRef.current === requestId) {
+                updateSettings({ volume: player.getState().volume });
+            }
+            showControlResult(result);
+        });
+    }, [player, showControlResult, updateSettings]);
     const toggleMute = useCallback(() => {
         void player.toggleMute().then(showControlResult);
     }, [player, showControlResult]);
@@ -751,6 +1059,21 @@ export function App({ store: providedStore, providers: providedProviders }) {
         const enableNearbyLocation = !settingsRef.current.enableNearbyLocation;
         updateSettings({ enableNearbyLocation });
         setMessage(`Nearby location lookup ${enableNearbyLocation ? 'enabled' : 'disabled'}.`);
+        if (enableNearbyLocation && screenRef.current === 'nearby') {
+            setTimeout(() => void loadNearby(), 0);
+        }
+        else if (!enableNearbyLocation && screenRef.current === 'nearby') {
+            const current = stationContextsRef.current.nearby;
+            setStationContextFor('nearby', {
+                ...current,
+                subtitle: 'Location lookup off · showing the last loaded results'
+            });
+        }
+    }, [loadNearby, setStationContextFor, updateSettings]);
+    const toggleDirectoryVoting = useCallback(() => {
+        const shareDirectoryVotes = !settingsRef.current.shareDirectoryVotes;
+        updateSettings({ shareDirectoryVotes });
+        setMessage(`Radio Browser favorite votes ${shareDirectoryVotes ? 'enabled' : 'disabled'}.`);
     }, [updateSettings]);
     const refreshAirPlayTargets = useCallback(async (announce = true) => {
         try {
@@ -848,7 +1171,10 @@ export function App({ store: providedStore, providers: providedProviders }) {
         setMessage(`Skip broken streams ${skipBrokenStreams ? 'enabled' : 'disabled'}.`);
     }, [updateSettings]);
     const toggleSetting = useCallback((key) => {
-        const next = !settingsRef.current[key];
+        const current = key === 'mouseSupport'
+            ? settingsRef.current.mouseSupport !== false
+            : Boolean(settingsRef.current[key]);
+        const next = !current;
         updateSettings({ [key]: next });
         setMessage(`${settingToggleLabel[key]} ${next ? 'on' : 'off'}.`);
     }, [updateSettings]);
@@ -901,6 +1227,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,
@@ -926,6 +1301,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
         store,
         toggleFavorite,
         toggleMute,
+        updateCommand: handleUpdateCommand,
         updateSettings
     });
     const playAdjacent = useCallback((direction) => {
@@ -961,6 +1337,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
         capturingTransportAction,
         commandMode,
         commandText,
+        confirmCtrlCExit,
         currentItemCount,
         cycleDisplayColor,
         cycleAudioOutput,
@@ -1017,24 +1394,22 @@ export function App({ store: providedStore, providers: providedProviders }) {
         togglePause,
         toggleSetting,
         toggleNearbyLocation,
+        toggleDirectoryVoting,
         toggleRadioGarden,
-        toggleSkipBrokenStreams
+        toggleSkipBrokenStreams,
+        updateFromSettings
     });
     function currentItemCount(currentScreen) {
         return itemCountsRef.current[currentScreen] ?? 0;
     }
-    const hasTopTabs = !layout.compact;
-    const globalFooter = playback.backend === 'ffplay'
-        ? '←/→ tabs · F7/F9 or ,/. station · ffplay fallback: limited controls · t/v display · ? help · q quit'
-        : playback.backend === 'airplay'
-            ? '←/→ tabs · F7/F9 or ,/. station · AirPlay: +/- volume, m mute · t/v display · ? help · q quit'
-            : '←/→ tabs · F7/F9 or ,/. station · F8 pause · t/v display · +/- volume · ? help · q quit';
-    const playbackFooter = playbackFooterText({
-        station: playingStation,
-        playback,
+    const hasTopTabs = layout.mode === 'full';
+    const globalFooter = '←/→ tabs · F7/F9 or ,/. station · t/v display · ? help · q quit';
+    const playbackFooter = screen === 'now-playing' ? null : playbackFooterText({
+        station: footerStation,
+        playback: footerPlayback,
         metadata: nowPlaying,
         queue: playbackQueueRef.current,
-        favorite: store.isFavorite(playingStation),
+        favorite: store.isFavorite(footerStation),
         sleepLabel,
         width: frameWidth,
         spinnerFrame
@@ -1049,7 +1424,23 @@ 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.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) }), _jsx(Text, { color: textDim, children: truncate(globalFooter, frameWidth) })] })] }) }));
+    const pageFooterOwnsCompactRow = Boolean(commandMode ||
+        capturingTransportAction ||
+        editingCountryFilter ||
+        (screen === 'search' && editingSearch) ||
+        screen === 'airplay-code');
+    const hasActiveMicroPlayback = Boolean(footerStation && (footerPlayback.state === 'playing' || footerPlayback.state === 'paused'));
+    const compactFooter = footerMessage ?? message ?? (pageFooterOwnsCompactRow ? pageFooter : playbackFooter ?? pageFooter);
+    const microFooter = footerMessage ?? message ?? (pageFooterOwnsCompactRow
+        ? pageFooter
+        : footerPlayback.state === 'loading' && playbackFooter
+            ? playbackFooter
+            : hasActiveMicroPlayback
+                ? microPlaybackControlsText(playback.backend)
+                : pageFooter);
+    const compactGlobalFooter = `←/→ tabs · ? help · q quit · v${installedVersion}`;
+    const fullStatusRows = fullStatusFooterRows(screen, message, footerMessage, playbackFooter);
+    return (_jsx(DisplayContext.Provider, { value: displayMode, children: _jsxs(Box, { flexDirection: "column", paddingX: layout.horizontalPadding, height: layout.rows, width: layout.columns, overflow: "hidden", backgroundColor: displayMode.app, children: [hasTopTabs ? (_jsx(Box, { height: 3, flexShrink: 0, backgroundColor: displayMode.app, children: _jsx(TopTabs, { tabs: topTabs, active: activeTabForScreen(screen), theme: theme, width: frameWidth, backendLabel: playbackBackendLabel(playback.backend) }) })) : null, _jsx(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: footerPlayback, playingStation: footerStation, providerHealth: providerHealth, pulse: pulse, searchQuery: searchQuery, screen: screen, selected: selected, showDiagnostics: showDiagnostics, sleepLabel: sleepLabel, stationContext: stationContext, exploreCursor: exploreCursor, stationFavorite: store.isFavorite(footerStation), stationTime: stationApproximateTime(footerStation), storePath: store.filePath, theme: theme, updateCheck: library.updateCheck }) }), _jsx(Box, { height: layout.footerRows, width: frameWidth, flexDirection: "column", flexShrink: 0, backgroundColor: displayMode.app, children: layout.mode === 'full' ? (_jsxs(_Fragment, { children: [fullStatusRows.map(statusRow => (_jsx(Text, { color: themeAccent(theme), children: truncate(statusRow.text, frameWidth) }, statusRow.key))), _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] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: commandMode || capturingTransportAction || footerMessage || message ? themeAccent(theme) : textMuted, children: truncate(layout.mode === 'micro' ? microFooter : compactFooter, frameWidth) }), layout.footerRows > 1 ? _jsx(Text, { color: textDim, children: truncate(compactGlobalFooter, frameWidth) }) : null] })) })] }) }));
 }
 function buildLibraryStations(library) {
     const stations = [];
@@ -1080,6 +1471,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)}`;
@@ -1138,3 +1554,22 @@ function audioOutputSwitchLabel(output, backends) {
 function librarySubtitle(library) {
     return `${library.favorites.length} favorites · ${library.recent.length} recent · ${library.imported.length} imported · favorites first`;
 }
+function mouseVisibleRows(screen, layout) {
+    if (screen === 'help')
+        return Math.max(3, layout.contentRows - 4);
+    if (layout.compact)
+        return Math.max(1, layout.contentRows - 3);
+    if (screen === 'countries')
+        return layout.countryRows;
+    if (screen === 'map')
+        return layout.mapCountryRows;
+    if (screen === 'search')
+        return Math.max(1, layout.contentRows - 8);
+    if (screen === 'settings')
+        return Math.max(5, layout.contentRows - 10);
+    if (screen === 'airplay-settings')
+        return Math.max(1, layout.contentRows - 9);
+    if (['stations', 'nearby', 'explore', 'library'].includes(screen))
+        return layout.stationRows;
+    return layout.contentRows;
+}