@ciphore/radiocli 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.8] - 2026-07-02
+
+### Changed
+
+- Replaced the classic equalizer receiver style with Ultracode, a centered
+  color-ripple display that follows the active display color; saved `equalizer`
+  preferences migrate to `ultracode`.
+- The listening stats activity graph now renders as a calendar-year grid with
+  larger contribution cells and clearer month labels when the terminal has room.
+- Muted UI text now uses truecolor neutrals instead of terminal `gray`, making
+  secondary labels more readable across dark terminal palettes.
+
+### Fixed
+
+- Stale continuous listening sessions are capped before splitting them across
+  days so one long-unclosed playback session cannot dominate listening totals.
+- Receiver visualizer pulses now reset when an active Ultracode view opens but
+  keep advancing smoothly during normal playback.
+
 ## [0.1.7] - 2026-06-29
 
 ### Changed
@@ -158,6 +177,7 @@ Initial public release.
 [0.1.5]: https://github.com/Ciphore/RadioCLI/releases/tag/v0.1.5
 [0.1.6]: https://github.com/Ciphore/RadioCLI/releases/tag/v0.1.6
 [0.1.7]: https://github.com/Ciphore/RadioCLI/releases/tag/v0.1.7
+[0.1.8]: https://github.com/Ciphore/RadioCLI/releases/tag/v0.1.8
 [0.1.4]: https://github.com/Ciphore/RadioCLI/releases/tag/v0.1.4
 [0.1.3]: https://github.com/Ciphore/RadioCLI/releases/tag/v0.1.3
 [0.1.2]: https://github.com/Ciphore/RadioCLI/releases/tag/v0.1.2

package/README.md

@@ -82,7 +82,7 @@ Live public radio from around the world
 
 The Now Playing screen is a framed receiver panel with **50 selectable receiver styles**. The sample below shows the default pulse-grid display; press `v` to cycle through the catalog, which spans several families:
 
-- **Classic receiver** — equalizer, LEDs, and goniometer.
+- **Classic receiver** — ultracode ripple, LEDs, and goniometer.
 - **High-resolution braille** — smooth waveform, radial EQ, spectrogram, nebula, silk, ripple tank, phyllotaxis, harmonograph, bloom bars, moiré, galaxy, caustics.
 - **Generative & motion** — matrix, hologram, spinning ASCII cube, generated fire, fireworks, plasma, spinning donut, starfield, Lorenz attractor, Barnsley fern, Chladni plate, rotating tesseract, torus knot, fractal tree, Julia sets, and lava-lamp motion.
 

package/dist/activity/stats.js

@@ -1,6 +1,7 @@
 import { stationKey } from '../storage/store.js';
 const trackedDays = 371;
 const listenedStationThresholdSeconds = 120;
+const maxContinuousListeningSeconds = 12 * 60 * 60;
 export function computeListeningStats(sessions, now = new Date()) {
     const today = startOfLocalDay(now);
     const firstDay = addLocalDays(today, -(trackedDays - 1));
@@ -49,9 +50,9 @@ function sessionSeconds(session, now = new Date()) {
     const started = Date.parse(session.startedAt);
     const ended = session.endedAt ? Date.parse(session.endedAt) : now.getTime();
     if (!Number.isFinite(started) || !Number.isFinite(ended) || ended <= started) {
-        return Math.max(0, Math.round(session.listenedSeconds));
+        return Math.min(maxContinuousListeningSeconds, Math.max(0, Math.round(session.listenedSeconds)));
     }
-    return Math.max(Math.round(session.listenedSeconds), Math.round((ended - started) / 1000));
+    return Math.min(maxContinuousListeningSeconds, Math.max(Math.round(session.listenedSeconds), Math.round((ended - started) / 1000)));
 }
 function localDay(date) {
     const year = date.getFullYear();
@@ -68,7 +69,7 @@ function splitSessionByDay(session, seconds, firstDay, lastDayEnd, now) {
     const rawEnd = Number.isFinite(recordedEnd) && recordedEnd > started
         ? recordedEnd
         : started + seconds * 1000;
-    const end = Math.max(started, rawEnd);
+    const end = Math.max(started, Math.min(rawEnd, started + seconds * 1000));
     const boundedStart = Math.max(started, firstDay.getTime());
     const boundedEnd = Math.min(end, lastDayEnd.getTime());
     if (boundedEnd <= boundedStart) {

package/dist/storage/store.js

@@ -127,6 +127,9 @@ const removedReceiverStyles = new Set([
     'voronoi'
 ]);
 function normalizeReceiverStyle(value) {
+    if (value === 'equalizer') {
+        return 'ultracode';
+    }
     return typeof value === 'string' && removedReceiverStyles.has(value) ? defaultReceiverStyle : value;
 }
 const settingsSchema = z.object({

package/dist/types.js

@@ -1,7 +1,7 @@
 const providerIds = ['radio-browser', 'radio-garden', 'playlist'];
 export const themeNames = ['green', 'amber', 'blue', 'ruby', 'ice', 'teal', 'violet', 'copper', 'cyan', 'lime', 'coral', 'rose', 'slate', 'mono'];
 export const receiverStyleNames = [
-    'equalizer',
+    'ultracode',
     'motion-blob',
     'motion-area',
     'motion-contour',

package/dist/ui/App.js

@@ -6,7 +6,7 @@ import { PlayerController } from '../player/player-controller.js';
 import { playbackBackendInstallHint, playbackBackendLabel } from '../player/backend-install.js';
 import { JsonLibraryStore, stationKey } from '../storage/store.js';
 import { receiverStyleNames } from '../types.js';
-import { nextReceiverStyle, nextTheme, textDim, themeAccent } from './theme.js';
+import { nextReceiverStyle, nextTheme, textDim, textMuted, themeAccent } from './theme.js';
 import { DisplayContext, resolveDisplayMode } from './display-context.js';
 import { homeItems, settingsItems } from './screen-items.js';
 import { AppContent } from './AppContent.js';
@@ -22,11 +22,12 @@ 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 { activeTabForScreen, addMediaKeyBinding, applyStationFilters, clamp, clampVolume, defaultExploreCursor, formatExploreCursor, formatFilterLabel, formatTimeLeft, initialStationContexts, mediaActionLabel, moveExploreCursor as shiftExploreCursor, nextSleepTimerMinutes, normalizeMediaKeyBindings, shouldAnimateReceiver, shouldSkipAfterTuneError, stationApproximateTime, stationContextKeyForScreen, topTabs } from './app-state.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 settingToggleLabel = {
     resumeOnLaunch: 'Resume on launch',
     transparentBackground: 'Transparent background',
@@ -86,6 +87,8 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const exploreCursorRef = useRef(exploreCursor);
     const exploreRequestRef = useRef(0);
     const exploreMoveTimerRef = useRef(null);
+    const transientMessageTimerRef = 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]);
     const favoriteKeys = useMemo(() => new Set(library.favorites.map(stationKey)), [library.favorites]);
@@ -187,6 +190,18 @@ export function App({ store: providedStore, providers: providedProviders }) {
             lastStationContextKeyRef.current = renderedStationContextKey;
         }
     }, [renderedStationContextKey, screen, selected]);
+    useEffect(() => {
+        const current = {
+            screen,
+            receiverStyle: library.settings.receiverStyle,
+            playbackState: playback.state,
+            playbackReady: playback.ready
+        };
+        if (shouldResetReceiverPulse(receiverPulseSnapshotRef.current, current)) {
+            setPulse(0);
+        }
+        receiverPulseSnapshotRef.current = current;
+    }, [library.settings.receiverStyle, playback.ready, playback.state, screen]);
     useEffect(() => {
         if (!shouldAnimateReceiver(screen, playback) ||
             library.settings.reduceMotion ||
@@ -195,7 +210,7 @@ export function App({ store: providedStore, providers: providedProviders }) {
             return;
         }
         const intervalMs = LIVE_RECEIVER_STYLES.has(library.settings.receiverStyle) ? LIVE_RECEIVER_PULSE_MS : AMBIENT_RECEIVER_PULSE_MS;
-        const timer = setInterval(() => setPulse(value => (value + 1) % 240), intervalMs);
+        const timer = setInterval(() => setPulse(nextReceiverPulse), intervalMs);
         return () => clearInterval(timer);
     }, [library.settings.receiverStyle, library.settings.reduceMotion, playback.ready, playback.state, screen]);
     useEffect(() => {
@@ -223,6 +238,9 @@ export function App({ store: providedStore, providers: providedProviders }) {
         if (exploreMoveTimerRef.current) {
             clearTimeout(exploreMoveTimerRef.current);
         }
+        if (transientMessageTimerRef.current) {
+            clearTimeout(transientMessageTimerRef.current);
+        }
     }, []);
     useEffect(() => {
         setSelected(value => clamp(value, currentItemCount(screen) - 1));
@@ -669,16 +687,27 @@ export function App({ store: providedStore, providers: providedProviders }) {
     const togglePause = useCallback(() => {
         void player.togglePause().then(showControlResult);
     }, [player, showControlResult]);
+    const showTransientMessage = useCallback((nextMessage) => {
+        if (transientMessageTimerRef.current) {
+            clearTimeout(transientMessageTimerRef.current);
+        }
+        setMessage(nextMessage);
+        transientMessageTimerRef.current = setTimeout(() => {
+            setMessage(currentMessage => currentMessage === nextMessage ? null : currentMessage);
+            transientMessageTimerRef.current = null;
+        }, VISUALIZER_MESSAGE_MS);
+    }, []);
     const cycleDisplayColor = useCallback(() => {
         const theme = nextTheme(settingsRef.current.theme);
         updateSettings({ theme });
-        setMessage(`Display color: ${theme}`);
-    }, [updateSettings]);
+        showTransientMessage(`Display color: ${theme}`);
+    }, [showTransientMessage, updateSettings]);
     const cycleReceiverStyle = useCallback(() => {
         const receiverStyle = nextReceiverStyle(settingsRef.current.receiverStyle);
+        setPulse(0);
         updateSettings({ receiverStyle });
-        setMessage(`Receiver style: ${receiverStyle}`);
-    }, [updateSettings]);
+        showTransientMessage(`Receiver style: ${receiverStyle}`);
+    }, [showTransientMessage, updateSettings]);
     const toggleRadioGarden = useCallback(() => {
         const enableRadioGarden = !settingsRef.current.enableRadioGarden;
         updateSettings({ enableRadioGarden });
@@ -987,7 +1016,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 }), message ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: themeAccent(theme), children: message }) })) : 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) : 'gray', 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, 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) })] })] }) }));
 }
 function buildLibraryStations(library) {
     const stations = [];

package/dist/ui/AppContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { themeAccent } from './theme.js';
+import { textMuted, themeAccent } from './theme.js';
 import { HomeScreen } from './screens/HomeScreen.js';
 import { CountriesScreen } from './screens/CountriesScreen.js';
 import { MapScreen } from './screens/MapScreen.js';
@@ -17,7 +17,7 @@ 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 }) {
     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: "gray", children: "Resize to at least 64x18 for the full receiver UI." }), _jsxs(Text, { color: "gray", children: ["Playback: ", playback.state, " \u00B7 ", playbackBackendLabel(playback.backend)] }), _jsx(Text, { color: "gray", children: "q quit \u00B7 Ctrl+C always exits" })] }));
+        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" })] }));
     }
     if (screen === 'home') {
         return _jsx(HomeScreen, { selected: selected, theme: theme, library: library, playback: playback });

package/dist/ui/app-state.js

@@ -173,6 +173,24 @@ export function stationContextKeyForScreen(screen) {
 export function shouldAnimateReceiver(screen, playback) {
     return screen === 'now-playing' && playback.state === 'playing' && playback.ready;
 }
+export function nextReceiverPulse(pulse) {
+    return pulse + 1;
+}
+export function shouldResetReceiverPulse(previous, current) {
+    if (current.receiverStyle !== 'ultracode') {
+        return false;
+    }
+    const currentActive = current.screen === 'now-playing' &&
+        current.playbackState === 'playing' &&
+        current.playbackReady;
+    if (!currentActive) {
+        return false;
+    }
+    return !(previous?.screen === 'now-playing' &&
+        previous.receiverStyle === 'ultracode' &&
+        previous.playbackState === 'playing' &&
+        previous.playbackReady);
+}
 export function isEditableInput(input, key) {
     return Boolean(key.backspace || key.delete || input);
 }

package/dist/ui/components/Logo.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { textMuted } from '../theme.js';
 const logoSpectrumColors = ['#ff4b5c', '#ff9f43', '#ffd166', '#a3e635', '#22c55e', '#2dd4bf', '#38bdf8', '#818cf8', '#c084fc'];
 function LogoSpectrum() {
     return (_jsx(_Fragment, { children: logoSpectrumColors.map(color => (_jsx(Text, { color: color, children: "\u2588\u2588" }, color))) }));
 }
 export function Logo() {
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "RADIOCLI" }), _jsx(Text, { children: "  " }), _jsx(LogoSpectrum, {})] }), _jsx(Text, { color: "gray", children: "Live public radio from around the world" })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "RADIOCLI" }), _jsx(Text, { children: "  " }), _jsx(LogoSpectrum, {})] }), _jsx(Text, { color: textMuted, children: "Live public radio from around the world" })] }));
 }

package/dist/ui/components/ScreenHeader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { textDim, themeAccent } from '../theme.js';
+import { textDim, textMuted, themeAccent } from '../theme.js';
 import { useDisplay } from '../display-context.js';
 import { toAsciiSafe } from '../ascii.js';
 import { truncate } from '../format.js';
@@ -15,5 +15,5 @@ export function ScreenHeader({ title, width, theme, subtitle, right }) {
     const rightText = right ? ` ${right}` : '';
     const ruleWidth = Math.max(1, width - safeTitle.length - rightText.length - 2);
     const rule = (ascii ? '-' : '─').repeat(ruleWidth);
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: accent, bold: true, children: a(safeTitle) }), _jsxs(Text, { color: textDim, children: [" ", rule] }), rightText ? _jsx(Text, { color: "gray", children: a(rightText) }) : null] }), subtitle ? _jsx(Text, { color: "gray", children: a(truncate(subtitle, width)) }) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: accent, bold: true, children: a(safeTitle) }), _jsxs(Text, { color: textDim, children: [" ", rule] }), rightText ? _jsx(Text, { color: textMuted, children: a(rightText) }) : null] }), subtitle ? _jsx(Text, { color: textMuted, children: a(truncate(subtitle, width)) }) : null] }));
 }

package/dist/ui/components/StationList.js

@@ -1,23 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { stationLocation, stationTags, stationTech, truncate } from '../format.js';
-import { themeAccent } from '../theme.js';
+import { textMuted, themeAccent } from '../theme.js';
 import { Menu, Pointer } from './Menu.js';
 import { visibleWindow } from '../list-window.js';
 export function StationList({ stations, selected, theme, favorites, pageSize, width }) {
     if (stations.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "No stations here yet." }), _jsx(Text, { color: "gray", children: "Try a different search or country, or clear active filters with :clear." })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: "No stations here yet." }), _jsx(Text, { color: textMuted, children: "Try a different search or country, or clear active filters with :clear." })] }));
     }
     const window = visibleWindow(stations, selected, pageSize);
     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: "gray", 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: "gray", children: truncate(`${stationLocation(station)} · ${stationTech(station)}`, metaWidth) })] }), active ? (_jsx(Box, { marginLeft: 4, children: _jsxs(Text, { color: "gray", 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: _jsxs(Text, { color: textMuted, children: ["#", window.start + index + 1, " \u00B7 ", truncate(stationTags(station), rowWidth - 8)] }) })) : null] }));
                 } })] }));
 }

package/dist/ui/components/TopTabs.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { panelBorder, themeAccent } from '../theme.js';
+import { panelBorder, textMuted, themeAccent } from '../theme.js';
 import { useDisplay } from '../display-context.js';
 import { truncate } from '../format.js';
 export function TopTabs({ tabs, active, theme, width, rightLabel }) {
@@ -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: "gray", children: "\u2026" })) : (_jsx(Text, { color: item.tab.screen === active ? accent : 'gray', bold: item.tab.screen === active, children: item.tab.label })), index < visibleTabs.length - 1 ? _jsxs(Text, { color: "gray", children: [" ", box.v, " "] }) : null] }, item.type === 'overflow' ? `${item.side}-overflow` : item.tab.screen))), _jsx(Text, { children: ' '.repeat(tabPaddingWidth) }), canShowRight ? _jsx(Text, { color: "gray", 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: 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] })] }));
 }
 function fitTabs(tabs, active, maxWidth) {
     const all = tabs.map(tab => ({ type: 'tab', tab }));

package/dist/ui/screens/AirPlayCodeScreen.js

@@ -2,16 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
-import { textDim, themeAccent } from '../theme.js';
+import { textDim, textMuted, themeAccent } from '../theme.js';
 export function AirPlayCodeScreen({ code, playback, selectedDevice, theme, width }) {
     const accent = themeAccent(theme);
     const lineWidth = Math.max(24, width - 4);
     const promptActive = isAirPlayCodePromptActive(playback);
     const receiverName = playback.airPlayDeviceName ?? selectedDevice?.name ?? 'selected receiver';
     const masked = code.length > 0 ? '*'.repeat(code.length) : '';
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "AirPlay Code", subtitle: "Enter the code shown on the receiver", right: promptActive ? 'Waiting for code' : 'Not requested', width: width, theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: ["Receiver: ", _jsx(Text, { color: accent, children: truncate(receiverName, Math.max(8, lineWidth - 10)) })] }), _jsxs(Text, { color: "gray", children: ["Playback: ", _jsx(Text, { color: accent, children: playback.backend }), " / ", playback.state] }), _jsx(Text, { color: promptActive ? accent : 'yellow', children: promptActive
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "AirPlay Code", subtitle: "Enter the code shown on the receiver", right: promptActive ? 'Waiting for code' : 'Not requested', width: width, theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Receiver: ", _jsx(Text, { color: accent, children: truncate(receiverName, Math.max(8, lineWidth - 10)) })] }), _jsxs(Text, { color: textMuted, children: ["Playback: ", _jsx(Text, { color: accent, children: playback.backend }), " / ", playback.state] }), _jsx(Text, { color: promptActive ? accent : 'yellow', children: promptActive
                             ? 'The receiver is asking for a code now.'
-                            : 'Tune a station with AirPlay first; this screen is used once the receiver asks for a code.' })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", bold: true, children: "Code" }), _jsx(Text, { color: code ? accent : textDim, children: code ? masked : 'type the code from the receiver' }), _jsx(Text, { color: textDim, children: "Enter submits \u00B7 Backspace edits \u00B7 Esc returns to AirPlay" })] })] }));
+                            : 'Tune a station with AirPlay first; this screen is used once the receiver asks for a code.' })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Code" }), _jsx(Text, { color: code ? accent : textDim, children: code ? masked : 'type the code from the receiver' }), _jsx(Text, { color: textDim, children: "Enter submits \u00B7 Backspace edits \u00B7 Esc returns to AirPlay" })] })] }));
 }
 export function isAirPlayCodePromptActive(playback) {
     return playback.backend === 'airplay' && playback.message === 'AirPlay code required. Use :airplay-code 1234.';

package/dist/ui/screens/AirPlaySettingsScreen.js

@@ -5,7 +5,7 @@ import { audioOutputLabel } from '../audio-output.js';
 import { Menu, Pointer } from '../components/Menu.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
-import { textDim, themeAccent } from '../theme.js';
+import { textDim, textMuted, themeAccent } from '../theme.js';
 export function AirPlaySettingsScreen({ selected, settings, backends, devices, theme, width }) {
     const accent = themeAccent(theme);
     const availability = airPlayAvailability(backends, devices);
@@ -14,11 +14,11 @@ export function AirPlaySettingsScreen({ selected, settings, backends, devices, t
     const canEnterCode = availability.ready && selectedDevice?.requiresPassword && !selectedDevice.local;
     const lineWidth = Math.max(24, width - 4);
     const preferredOutput = audioOutputLabel(settings.preferredBackend);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "AirPlay", subtitle: "Choose where AirPlay playback should go", right: availability.label, width: width, theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: ["Audio output: ", _jsx(Text, { color: accent, children: preferredOutput }), " \u00B7 Streaming:", ' ', _jsx(Text, { color: availability.ready ? accent : 'yellow', children: availability.ready ? 'ready' : 'unavailable' }), " \u00B7 Receivers:", ' ', _jsx(Text, { color: accent, children: devices.length })] }), _jsx(Text, { color: availability.ready ? 'gray' : 'yellow', children: truncate(availability.detail, lineWidth) }), _jsxs(Text, { color: "gray", children: ["Selected: ", _jsx(Text, { color: selectedDevice ? accent : textDim, children: truncate(selectedDevice?.name ?? 'none', Math.max(4, lineWidth - 10)) })] }), availability.ready && selectedDevice?.requiresPassword && !selectedDevice.local ? (_jsxs(Text, { color: "gray", children: ["Code: ", _jsx(Text, { color: accent, children: "if the receiver shows a code while tuning, RadioCLI will ask for it" })] })) : null, selectedMissing ? (_jsxs(Text, { color: "yellow", children: ["Saved receiver is not visible: ", truncate(settings.preferredAirPlayDevice ?? '', Math.max(8, lineWidth - 31))] })) : null] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", bold: true, children: "Receivers" }), devices.length > 0 ? (_jsx(Menu, { items: devices, selected: selected, keyFor: device => device.id, render: (device, _index, active) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "AirPlay", subtitle: "Choose where AirPlay playback should go", right: availability.label, width: width, theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Audio output: ", _jsx(Text, { color: accent, children: preferredOutput }), " \u00B7 Streaming:", ' ', _jsx(Text, { color: availability.ready ? accent : 'yellow', children: availability.ready ? 'ready' : 'unavailable' }), " \u00B7 Receivers:", ' ', _jsx(Text, { color: accent, children: devices.length })] }), _jsx(Text, { color: availability.ready ? textMuted : 'yellow', children: truncate(availability.detail, lineWidth) }), _jsxs(Text, { color: textMuted, children: ["Selected: ", _jsx(Text, { color: selectedDevice ? accent : textDim, children: truncate(selectedDevice?.name ?? 'none', Math.max(4, lineWidth - 10)) })] }), availability.ready && selectedDevice?.requiresPassword && !selectedDevice.local ? (_jsxs(Text, { color: textMuted, children: ["Code: ", _jsx(Text, { color: accent, children: "if the receiver shows a code while tuning, RadioCLI will ask for it" })] })) : null, selectedMissing ? (_jsxs(Text, { color: "yellow", children: ["Saved receiver is not visible: ", truncate(settings.preferredAirPlayDevice ?? '', Math.max(8, lineWidth - 31))] })) : null] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Receivers" }), devices.length > 0 ? (_jsx(Menu, { items: devices, selected: selected, keyFor: device => device.id, render: (device, _index, active) => {
                             const isSelected = device.id === settings.preferredAirPlayDevice;
                             const name = truncate(device.name, Math.max(8, Math.floor(lineWidth * 0.35)));
                             const selectedLabel = isSelected ? ' selected' : '';
                             const detail = truncate(airPlayDeviceDetail(device), Math.max(12, lineWidth - name.length - selectedLabel.length - 5));
-                            return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? accent : undefined, bold: active, children: name }), isSelected ? _jsx(Text, { color: accent, children: selectedLabel }) : null, _jsxs(Text, { color: "gray", children: [" \u00B7 ", detail] })] }));
-                        } })) : (_jsx(Text, { color: "gray", children: "No receivers discovered." })), _jsx(Text, { color: textDim, children: canEnterCode ? 'Enter selects · c opens code entry · r refreshes receivers' : 'Enter selects · r refreshes receivers' })] })] }));
+                            return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? accent : undefined, bold: active, children: name }), isSelected ? _jsx(Text, { color: accent, children: selectedLabel }) : null, _jsxs(Text, { color: textMuted, children: [" \u00B7 ", detail] })] }));
+                        } })) : (_jsx(Text, { color: textMuted, children: "No receivers discovered." })), _jsx(Text, { color: textDim, children: canEnterCode ? 'Enter selects · c opens code entry · r refreshes receivers' : 'Enter selects · r refreshes receivers' })] })] }));
 }

package/dist/ui/screens/CountriesScreen.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { Menu, Pointer } from '../components/Menu.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
-import { themeAccent } from '../theme.js';
+import { textMuted, themeAccent } from '../theme.js';
 import { visibleWindow } from '../list-window.js';
 export function CountriesScreen({ countries, selected, loading, filter, editingFilter, theme, pageSize, width }) {
     const window = visibleWindow(countries, selected, pageSize);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Countries", subtitle: editingFilter ? 'Filtering countries — type to narrow the list' : 'Browse the worldwide country directory', width: width, theme: theme, right: `filter: ${filter || 'all'}` }), loading ? _jsx(Text, { color: "gray", children: "Loading countries from Radio Browser\u2026" }) : null, !loading ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: ["Showing ", countries.length ? window.start + 1 : 0, "-", window.end, " of ", countries.length] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: country => country.code, render: (country, _index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: country.name }), _jsxs(Text, { color: "gray", children: [" \u00B7 ", country.code, " \u00B7 ", country.stationCount.toLocaleString(), " stations"] })] })) })] })) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Countries", subtitle: editingFilter ? 'Filtering countries — type to narrow the list' : 'Browse the worldwide country directory', width: width, theme: theme, right: `filter: ${filter || 'all'}` }), loading ? _jsx(Text, { color: textMuted, children: "Loading countries from Radio Browser\u2026" }) : null, !loading ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Showing ", countries.length ? window.start + 1 : 0, "-", window.end, " of ", countries.length] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: country => country.code, render: (country, _index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: country.name }), _jsxs(Text, { color: textMuted, children: [" \u00B7 ", country.code, " \u00B7 ", country.stationCount.toLocaleString(), " stations"] })] })) })] })) : null] }));
 }

package/dist/ui/screens/ExploreScreen.js

@@ -5,7 +5,7 @@ import { StationList } from '../components/StationList.js';
 import { buildCosmoWorldMap } from '../cosmo-world-map.js';
 import { computeExploreMapLayout } from '../explore-map-layout.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
-import { exploreMapLand, mapMarker, panelBorder, themeAccent } from '../theme.js';
+import { exploreMapLand, mapMarker, panelBorder, textMuted, themeAccent } from '../theme.js';
 import { panelBorderStyle, useDisplay } from '../display-context.js';
 import { toAsciiSafe } from '../ascii.js';
 export function ExploreScreen({ title, subtitle, stations, selected, loading, theme, favorites, filterLabel, cursor, pageSize, width, height }) {
@@ -13,7 +13,7 @@ export function ExploreScreen({ title, subtitle, stations, selected, loading, th
     const { contentWidth, headerRows, bodyRows, split, listPanelWidth, mapPanelWidth, mapRows, mapColumns, listRows, listPageSize } = computeExploreMapLayout(width, height, pageSize);
     const cursorMarker = React.useMemo(() => [{ lat: cursor.latitude, lon: cursor.longitude, selected: true }], [cursor.latitude, cursor.longitude]);
     const map = React.useMemo(() => buildCosmoWorldMap(mapColumns, mapRows, cursorMarker), [mapColumns, mapRows, cursorMarker]);
-    return (_jsxs(Box, { flexDirection: "column", height: height, width: contentWidth, overflow: "hidden", flexShrink: 0, children: [_jsx(Box, { height: headerRows, flexDirection: "column", flexShrink: 0, children: _jsx(ScreenHeader, { title: title, subtitle: subtitle, width: contentWidth, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }) }), _jsxs(Box, { marginTop: 1, height: bodyRows, width: contentWidth, flexDirection: split ? 'row' : 'column', flexShrink: 0, children: [_jsx(Box, { borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: mapPanelWidth, height: split ? bodyRows : mapRows + 2, flexDirection: "column", children: map.map((row, index) => (_jsx(CosmoMapLine, { row: row, theme: theme }, `map-${index}`))) }), _jsxs(Box, { marginLeft: split ? 1 : 0, marginTop: split ? 0 : 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: listPanelWidth, height: split ? bodyRows : Math.max(5, listRows + 2), flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", width: Math.max(20, listPanelWidth - 2), children: [_jsx(Text, { color: themeAccent(theme), bold: true, children: "Stations" }), _jsx(Text, { color: "gray", children: stations.length.toLocaleString() })] }), _jsx(Box, { height: 1, flexShrink: 0, children: _jsx(Text, { color: "gray", children: loading ? (ascii ? toAsciiSafe('Loading stations…') : 'Loading stations…') : ' ' }) }), !loading ? (_jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: listPageSize, width: Math.max(42, listPanelWidth - 2) })) : null] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: contentWidth, overflow: "hidden", flexShrink: 0, children: [_jsx(Box, { height: headerRows, flexDirection: "column", flexShrink: 0, children: _jsx(ScreenHeader, { title: title, subtitle: subtitle, width: contentWidth, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }) }), _jsxs(Box, { marginTop: 1, height: bodyRows, width: contentWidth, flexDirection: split ? 'row' : 'column', flexShrink: 0, children: [_jsx(Box, { borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: mapPanelWidth, height: split ? bodyRows : mapRows + 2, flexDirection: "column", children: map.map((row, index) => (_jsx(CosmoMapLine, { row: row, theme: theme }, `map-${index}`))) }), _jsxs(Box, { marginLeft: split ? 1 : 0, marginTop: split ? 0 : 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: listPanelWidth, height: split ? bodyRows : Math.max(5, listRows + 2), flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", width: Math.max(20, listPanelWidth - 2), children: [_jsx(Text, { color: themeAccent(theme), bold: true, children: "Stations" }), _jsx(Text, { color: textMuted, children: stations.length.toLocaleString() })] }), _jsx(Box, { height: 1, flexShrink: 0, children: _jsx(Text, { color: textMuted, children: loading ? (ascii ? toAsciiSafe('Loading stations…') : 'Loading stations…') : ' ' }) }), !loading ? (_jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: listPageSize, width: Math.max(42, listPanelWidth - 2) })) : null] })] })] }));
 }
 function CosmoMapLine({ row, theme }) {
     const { ascii } = useDisplay();

package/dist/ui/screens/HelpScreen.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { themeAccent } from '../theme.js';
+import { textMuted, themeAccent } from '../theme.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { commandHelp, keyHelpSections } from '../help-content.js';
 import { truncate } from '../format.js';
@@ -8,5 +8,5 @@ export function HelpScreen({ theme, width }) {
     const accent = themeAccent(theme);
     const keyColumnWidth = 16;
     const lineWidth = Math.max(28, width - 2);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Help", subtitle: "Keyboard shortcuts and : commands \u00B7 b or Esc to close", width: width, theme: theme }), _jsx(Box, { marginTop: 1, flexDirection: "row", gap: 4, flexWrap: "wrap", children: keyHelpSections.map(section => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: accent, bold: true, children: section.title }), section.entries.map(entry => (_jsxs(Text, { children: [_jsx(Text, { color: accent, children: entry.keys.padEnd(keyColumnWidth) }), _jsx(Text, { color: "gray", children: entry.description })] }, entry.keys)))] }, section.title))) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: accent, bold: true, children: "Commands (press : then type)" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 3, children: commandHelp.map(command => (_jsx(Text, { color: "gray", children: truncate(`:${command.name}${command.args ? ` ${command.args}` : ''}`, lineWidth) }, command.name))) })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Help", subtitle: "Keyboard shortcuts and : commands \u00B7 b or Esc to close", width: width, theme: theme }), _jsx(Box, { marginTop: 1, flexDirection: "row", gap: 4, flexWrap: "wrap", children: keyHelpSections.map(section => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: accent, bold: true, children: section.title }), section.entries.map(entry => (_jsxs(Text, { children: [_jsx(Text, { color: accent, children: entry.keys.padEnd(keyColumnWidth) }), _jsx(Text, { color: textMuted, children: entry.description })] }, entry.keys)))] }, section.title))) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: accent, bold: true, children: "Commands (press : then type)" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 3, children: commandHelp.map(command => (_jsx(Text, { color: textMuted, children: truncate(`:${command.name}${command.args ? ` ${command.args}` : ''}`, lineWidth) }, command.name))) })] })] }));
 }

package/dist/ui/screens/HomeScreen.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { Logo } from '../components/Logo.js';
 import { Menu, Pointer } from '../components/Menu.js';
-import { themeAccent } from '../theme.js';
+import { textMuted, themeAccent } from '../theme.js';
 import { homeItems } from '../screen-items.js';
 import { playbackBackendLabel } from '../../player/backend-install.js';
 export function HomeScreen({ selected, theme, library, playback }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Logo, {}), _jsxs(Text, { children: ["Receiver:", ' ', _jsx(Text, { color: themeAccent(theme), children: playback.state === 'playing' ? playback.message ?? 'playing' : playback.state }), _jsxs(Text, { color: "gray", children: [" \u00B7 ", playbackBackendLabel(playback.backend)] })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Menu, { items: homeItems, selected: selected, keyFor: item => item.screen, render: (item, index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsxs(Text, { color: "gray", children: [index + 1, " "] }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: item.label }), _jsxs(Text, { color: "gray", children: [" \u00B7 ", item.detail] })] })) }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: [library.recent.length, " recent \u00B7 ", library.favorites.length, " favorites \u00B7 ", library.imported.length, " imported"] }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Logo, {}), _jsxs(Text, { children: ["Receiver:", ' ', _jsx(Text, { color: themeAccent(theme), children: playback.state === 'playing' ? playback.message ?? 'playing' : playback.state }), _jsxs(Text, { color: textMuted, children: [" \u00B7 ", playbackBackendLabel(playback.backend)] })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Menu, { items: homeItems, selected: selected, keyFor: item => item.screen, render: (item, index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsxs(Text, { color: textMuted, children: [index + 1, " "] }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: item.label }), _jsxs(Text, { color: textMuted, children: [" \u00B7 ", item.detail] })] })) }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: textMuted, children: [library.recent.length, " recent \u00B7 ", library.favorites.length, " favorites \u00B7 ", library.imported.length, " imported"] }) })] }));
 }

package/dist/ui/screens/MapScreen.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { mapLand, mapWater, themeAccent, themeContributionColors } from '../theme.js';
+import { mapLand, mapWater, textMuted, themeAccent, themeContributionColors } from '../theme.js';
 import { useDisplay } from '../display-context.js';
 import { toAsciiSafe } from '../ascii.js';
 import { visibleWindow } from '../list-window.js';
@@ -18,7 +18,7 @@ export function MapScreen({ countries, selected, loading, filter, editingFilter,
     const graph = buildWorldMap(countries, selectedCountry, mode, contentWidth);
     const topWidth = mode === 'full' ? 50 : contentWidth;
     const listWidth = Math.max(28, Math.min(contentWidth - topWidth - 4, 56));
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "World map", subtitle: editingFilter ? 'Filtering country list — type to narrow' : 'Station density by country', width: contentWidth, theme: theme, right: `filter: ${filter || 'all'}` }), loading ? _jsx(Text, { color: "gray", children: asciify('Loading country density…') }) : null, _jsx(Box, { marginTop: 1, flexDirection: "column", children: graph.rows.map(row => (_jsx(MapLine, { row: row, theme: theme }, row.cells.map(cell => cell.char).join('')))) }), _jsx(Text, { color: "gray", children: asciify(`${graph.plotted} plotted · ${graph.unplotted} unplaced · labels show highest station counts`) }), _jsxs(Box, { marginTop: 1, flexDirection: mode === 'full' ? 'row' : 'column', children: [_jsxs(Box, { width: topWidth, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "Highest station counts" }), topCountries.map(country => (_jsxs(Text, { children: [_jsx(Text, { color: themeAccent(theme), children: country.code.padEnd(3) }), _jsx(Text, { children: truncate(country.name, 30).padEnd(31) }), _jsx(Text, { color: "gray", children: country.stationCount.toLocaleString().padStart(7) })] }, country.code)))] }), _jsxs(Box, { marginLeft: mode === 'full' ? 3 : 0, marginTop: mode === 'full' ? 0 : 1, width: listWidth, flexDirection: "column", children: [_jsxs(Text, { children: ["Selected:", ' ', _jsx(Text, { color: themeAccent(theme), children: selectedCountry ? asciify(`${selectedCountry.name} · ${selectedCountry.stationCount.toLocaleString()}`) : 'none' })] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: country => country.code, render: (country, _index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: country.code }), _jsx(Text, { color: "gray", children: asciify(` · ${truncate(country.name, Math.max(8, listWidth - 8))}`) })] })) })] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "World map", subtitle: editingFilter ? 'Filtering country list — type to narrow' : 'Station density by country', width: contentWidth, theme: theme, right: `filter: ${filter || 'all'}` }), loading ? _jsx(Text, { color: textMuted, children: asciify('Loading country density…') }) : null, _jsx(Box, { marginTop: 1, flexDirection: "column", children: graph.rows.map(row => (_jsx(MapLine, { row: row, theme: theme }, row.cells.map(cell => cell.char).join('')))) }), _jsx(Text, { color: textMuted, children: asciify(`${graph.plotted} plotted · ${graph.unplotted} unplaced · labels show highest station counts`) }), _jsxs(Box, { marginTop: 1, flexDirection: mode === 'full' ? 'row' : 'column', children: [_jsxs(Box, { width: topWidth, flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: "Highest station counts" }), topCountries.map(country => (_jsxs(Text, { children: [_jsx(Text, { color: themeAccent(theme), children: country.code.padEnd(3) }), _jsx(Text, { children: truncate(country.name, 30).padEnd(31) }), _jsx(Text, { color: textMuted, children: country.stationCount.toLocaleString().padStart(7) })] }, country.code)))] }), _jsxs(Box, { marginLeft: mode === 'full' ? 3 : 0, marginTop: mode === 'full' ? 0 : 1, width: listWidth, flexDirection: "column", children: [_jsxs(Text, { children: ["Selected:", ' ', _jsx(Text, { color: themeAccent(theme), children: selectedCountry ? asciify(`${selectedCountry.name} · ${selectedCountry.stationCount.toLocaleString()}`) : 'none' })] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: country => country.code, render: (country, _index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: country.code }), _jsx(Text, { color: textMuted, children: asciify(` · ${truncate(country.name, Math.max(8, listWidth - 8))}`) })] })) })] })] })] }));
 }
 function MapLine({ row, theme }) {
     const { ascii } = useDisplay();
@@ -55,7 +55,7 @@ function mapColor(kind, theme) {
         return colors[2] ?? themeAccent(theme);
     }
     if (kind === 'level1') {
-        return colors[1] ?? 'gray';
+        return colors[1] ?? textMuted;
     }
     if (kind === 'land') {
         return mapLand;

package/dist/ui/screens/NowPlayingScreen.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { stationLocation, stationTags, stationTech, truncate } from '../format.js';
-import { themeAccent } from '../theme.js';
+import { textMuted, themeAccent } from '../theme.js';
 import { panelBorderStyle, useDisplay } from '../display-context.js';
 import { toAsciiSafe } from '../ascii.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
@@ -36,9 +36,9 @@ export function NowPlayingScreen({ station, playback, metadata, theme, favorite,
     const dialLabel = receiverDialLabel(station);
     const renderRows = ascii ? visualRows.map(asciifyVisualRow) : visualRows;
     const favoriteText = favorite ? '★ Favorite' : '☆ Favorite';
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Now playing", width: panelWidth, theme: theme }), _jsxs(Box, { borderStyle: panelBorderStyle(ascii), borderColor: accent, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, flexDirection: "column", paddingX: 2, paddingY: 1, width: panelWidth, height: panelHeight, children: [_jsxs(Box, { justifyContent: "space-between", width: innerWidth, children: [_jsx(Text, { color: accent, bold: true, children: a(dialLabel) }), _jsx(Text, { color: accent, children: "RADIOCLI" }), _jsx(Text, { color: accent, children: playback.state.toUpperCase() })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: accent, bold: true, children: a(stationName) }) }), _jsx(Text, { color: "gray", children: a(truncate(stationPlace, innerWidth)) }), _jsx(Box, { flexDirection: "column", children: renderRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Now playing", width: panelWidth, theme: theme }), _jsxs(Box, { borderStyle: panelBorderStyle(ascii), borderColor: accent, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, flexDirection: "column", paddingX: 2, paddingY: 1, width: panelWidth, height: panelHeight, children: [_jsxs(Box, { justifyContent: "space-between", width: innerWidth, children: [_jsx(Text, { color: accent, bold: true, children: a(dialLabel) }), _jsx(Text, { color: accent, children: "RADIOCLI" }), _jsx(Text, { color: accent, children: playback.state.toUpperCase() })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: accent, bold: true, children: a(stationName) }) }), _jsx(Text, { color: textMuted, children: a(truncate(stationPlace, innerWidth)) }), _jsx(Box, { flexDirection: "column", children: renderRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
                                 ? renderSegments(row.segments)
-                                : row.text }, `${index}-${row.color}-${row.text}`))) }), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", width: innerWidth, children: [_jsx(Text, { color: metadata?.title ? accent : 'gray', children: a(metadataLine) }), _jsx(Text, { color: favorite ? 'yellow' : 'gray', children: a(favoriteText) })] }), _jsx(Text, { color: "gray", children: a(infoLine) }), showDiagnostics ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "Diagnostics" }), _jsx(Text, { color: "gray", children: a(`Stream: ${diagnostics.streamUrl ? truncate(diagnostics.streamUrl, innerWidth - 8) : 'none'}`) }), _jsx(Text, { color: "gray", children: a(`Station time: ${stationTime}`) }), _jsx(Text, { color: "gray", children: a(`Started: ${diagnostics.startedAt ? new Date(diagnostics.startedAt).toLocaleTimeString() : 'not playing'} · available ${diagnostics.availableBackends.join(', ') || 'none'}`) }), stationTracks.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Recent tracks" }), stationTracks.map(track => (_jsx(Text, { color: "gray", children: a(`· ${truncate(track.title, innerWidth - 2)}`) }, `${track.at}-${track.title}`)))] })) : null] })) : null] })] }));
+                                : row.text }, `${index}-${row.color}-${row.text}`))) }), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", width: innerWidth, children: [_jsx(Text, { color: metadata?.title ? accent : textMuted, children: a(metadataLine) }), _jsx(Text, { color: favorite ? 'yellow' : textMuted, children: a(favoriteText) })] }), _jsx(Text, { color: textMuted, children: a(infoLine) }), showDiagnostics ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: "Diagnostics" }), _jsx(Text, { color: textMuted, children: a(`Stream: ${diagnostics.streamUrl ? truncate(diagnostics.streamUrl, innerWidth - 8) : 'none'}`) }), _jsx(Text, { color: textMuted, children: a(`Station time: ${stationTime}`) }), _jsx(Text, { color: textMuted, children: a(`Started: ${diagnostics.startedAt ? new Date(diagnostics.startedAt).toLocaleTimeString() : 'not playing'} · available ${diagnostics.availableBackends.join(', ') || 'none'}`) }), stationTracks.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: textMuted, children: "Recent tracks" }), stationTracks.map(track => (_jsx(Text, { color: textMuted, children: a(`· ${truncate(track.title, innerWidth - 2)}`) }, `${track.at}-${track.title}`)))] })) : null] })) : null] })] }));
 }
 function asciifyVisualRow(row) {
     return {
@@ -95,8 +95,8 @@ function stationFrequency(name) {
 function renderSegments(segments) {
     let offset = 0;
     return segments.map(segment => {
-        const key = `${offset}-${segment.color}`;
+        const key = `${offset}-${segment.color}-${segment.backgroundColor ?? ''}-${segment.bold ? 'bold' : ''}`;
         offset += segment.text.length;
-        return (_jsx(Text, { color: segment.color, children: segment.text }, key));
+        return (_jsx(Text, { color: segment.color, backgroundColor: segment.backgroundColor, bold: segment.bold, children: segment.text }, key));
     });
 }

package/dist/ui/screens/SearchScreen.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { StationList } from '../components/StationList.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
-import { panelBorder, themeAccent } from '../theme.js';
+import { panelBorder, textMuted, themeAccent } from '../theme.js';
 import { panelBorderStyle, useDisplay } from '../display-context.js';
 import { truncate } from '../format.js';
 export function SearchScreen({ query, editing, loading, stations, selected, theme, favorites, experimentalOn, filterLabel, pageSize, width }) {
@@ -10,5 +10,5 @@ export function SearchScreen({ query, editing, loading, stations, selected, them
     const contentWidth = Math.max(40, width);
     const inputWidth = Math.max(34, Math.min(contentWidth, 96));
     const inputTextWidth = Math.max(8, inputWidth - 8);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Search", subtitle: `Radio Browser${experimentalOn ? ' + Radio Garden experimental' : ''}`, width: width, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }), _jsxs(Box, { marginTop: 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: editing ? themeAccent(theme) : panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: inputWidth, height: 3, marginBottom: 1, flexShrink: 0, children: [_jsx(Text, { color: editing ? themeAccent(theme) : 'gray', children: editing ? '› ' : '  ' }), _jsx(Text, { color: query ? themeAccent(theme) : 'gray', children: truncate(query || 'Search stations, genres, languages, places…', inputTextWidth) })] }), loading ? _jsx(Text, { color: "gray", children: "Searching public station directories\u2026" }) : null, !loading ? _jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: pageSize, width: width }) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Search", subtitle: `Radio Browser${experimentalOn ? ' + Radio Garden experimental' : ''}`, width: width, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }), _jsxs(Box, { marginTop: 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: editing ? themeAccent(theme) : panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: inputWidth, height: 3, marginBottom: 1, flexShrink: 0, children: [_jsx(Text, { color: editing ? themeAccent(theme) : textMuted, children: editing ? '› ' : '  ' }), _jsx(Text, { color: query ? themeAccent(theme) : textMuted, children: truncate(query || 'Search stations, genres, languages, places…', inputTextWidth) })] }), loading ? _jsx(Text, { color: textMuted, children: "Searching public station directories\u2026" }) : null, !loading ? _jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: pageSize, width: width }) : null] }));
 }

package/dist/ui/screens/SettingsScreen.js

@@ -4,7 +4,7 @@ import { Menu, Pointer } from '../components/Menu.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
 import { settingsItems } from '../screen-items.js';
-import { themeAccent } from '../theme.js';
+import { textMuted, themeAccent } from '../theme.js';
 import { playbackBackendCapabilities } from '../../player/backend-install.js';
 import { airPlayReceiverSettingValue } from '../airplay-settings.js';
 import { audioOutputLabel, audioOutputSettingValue } from '../audio-output.js';
@@ -14,8 +14,8 @@ export function SettingsScreen({ selected, settings, storePath, playback, backen
     const health = Object.entries(providerHealth);
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Settings", subtitle: "Enter changes the highlighted setting \u00B7 shortcuts in the footer", width: width, theme: theme }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Menu, { items: settingsItems, selected: selected, keyFor: item => item, render: (item, _index, active) => {
                         const value = settingValue(item, settings, diagnostics, backends, airPlayDevices);
-                        return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? accent : undefined, bold: active, children: item }), value ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: " \u00B7 " }), _jsx(Text, { color: accent, children: value })] })) : null] }));
-                    } }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", bold: true, children: "Status" }), _jsxs(Text, { color: "gray", children: ["Output: ", _jsx(Text, { color: accent, children: audioOutputLabel(playback.backend) }), " / ", playback.state, " \u00B7", ' ', "Selected: ", _jsx(Text, { color: accent, children: audioOutputLabel(settings.preferredBackend) }), " \u00B7", ' ', diagnostics.muted ? 'muted' : `vol ${diagnostics.volume}`, " \u00B7 tune timeout ", settings.tuneTimeoutSeconds, "s"] }), _jsxs(Text, { color: "gray", children: ["Provider health: ", health.length ? health.map(([provider, status]) => `${provider} ${status}`).join(' · ') : 'not checked yet'] }), _jsxs(Text, { color: "gray", children: ["Active stream: ", truncate(diagnostics.streamUrl ?? 'none', lineWidth - 15)] }), _jsxs(Text, { color: "gray", children: ["Library: ", truncate(storePath, lineWidth - 9)] })] })] }));
+                        return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? accent : undefined, bold: active, children: item }), value ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: textMuted, children: " \u00B7 " }), _jsx(Text, { color: accent, children: value })] })) : null] }));
+                    } }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Status" }), _jsxs(Text, { color: textMuted, children: ["Output: ", _jsx(Text, { color: accent, children: audioOutputLabel(playback.backend) }), " / ", playback.state, " \u00B7", ' ', "Selected: ", _jsx(Text, { color: accent, children: audioOutputLabel(settings.preferredBackend) }), " \u00B7", ' ', diagnostics.muted ? 'muted' : `vol ${diagnostics.volume}`, " \u00B7 tune timeout ", settings.tuneTimeoutSeconds, "s"] }), _jsxs(Text, { color: textMuted, children: ["Provider health: ", health.length ? health.map(([provider, status]) => `${provider} ${status}`).join(' · ') : 'not checked yet'] }), _jsxs(Text, { color: textMuted, children: ["Active stream: ", truncate(diagnostics.streamUrl ?? 'none', lineWidth - 15)] }), _jsxs(Text, { color: textMuted, children: ["Library: ", truncate(storePath, lineWidth - 9)] })] })] }));
 }
 function settingValue(item, settings, diagnostics, backends, airPlayDevices) {
     switch (item) {

package/dist/ui/screens/StationScreen.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { StationList } from '../components/StationList.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
+import { textMuted } from '../theme.js';
 export function StationScreen({ title, subtitle, stations, selected, loading, theme, favorites, filterLabel, pageSize, width }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: title, subtitle: subtitle, width: width, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [loading ? _jsx(Text, { color: "gray", children: "Loading stations\u2026" }) : null, !loading ? _jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: pageSize, width: width }) : null] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: title, subtitle: subtitle, width: width, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [loading ? _jsx(Text, { color: textMuted, children: "Loading stations\u2026" }) : null, !loading ? _jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: pageSize, width: width }) : null] })] }));
 }

package/dist/ui/screens/StatsScreen.js

@@ -1,12 +1,20 @@
-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 React from 'react';
 import { Box, Text } from 'ink';
 import { computeListeningStats } from '../../activity/stats.js';
-import { panelBorder, textHighlight, themeAccent, themeContributionColors } from '../theme.js';
+import { panelBorder, textHighlight, textMuted, themeAccent, themeContributionColors } from '../theme.js';
 import { panelBorderStyle, useDisplay } from '../display-context.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
 const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-const heatmapSquare = '■';
+const dayLabelWidth = 5;
+const heatmapCellOptions = [
+    { cell: '  ', gap: ' ' },
+    { cell: '  ', gap: '' },
+    { cell: '■', gap: '' }
+];
+const compactHeatmapCell = '■';
+const compactHeatmapGap = '';
 export function StatsScreen({ library, theme, width, height }) {
     const { panel: panelBackground, ascii } = useDisplay();
     const stats = computeListeningStats(library.activity.sessions);
@@ -18,31 +26,65 @@ export function StatsScreen({ library, theme, width, height }) {
     const metricWidth = Math.max(28, Math.floor((contentWidth - 2) / 2));
     const favoriteWidth = Math.max(8, metricWidth - 18);
     const compact = height < 30;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Listening stats", subtitle: "Local listening history \u00B7 never leaves this machine", width: width, theme: theme, right: `${formatHours(totalHours)} · ${stats.sessions.toLocaleString()} sessions` }), _jsxs(Box, { marginTop: 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: width, flexDirection: "column", children: [_jsx(Box, { children: _jsx(Text, { color: themeAccent(theme), bold: true, children: "Activity \u2014 last 53 weeks" }) }), _jsxs(Box, { marginTop: compact ? 0 : 1, flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: ["      ", graph.months] }), graph.rows.map(row => (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: row.label.padEnd(5) }), row.cells.map(cell => (_jsx(Text, { color: graphColors[cell.level], children: cell.text }, cell.key)))] }, row.key)))] })] }), _jsxs(Box, { marginTop: 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: width, flexDirection: "column", children: [_jsx(Text, { color: themeAccent(theme), bold: true, children: "Summary" }), _jsxs(Box, { marginTop: compact ? 0 : 1, flexDirection: "column", width: contentWidth, children: [metricPair('Favorite station', truncate(favorite, favoriteWidth), 'Total hours listened', formatHours(totalHours), metricWidth, theme), metricPair('Sessions', stats.sessions.toLocaleString(), 'Longest streak', formatDays(stats.longestStreak), metricWidth, theme), metricPair('Current streak', formatDays(stats.currentStreak), 'Stations listened', stats.listenedStationCount.toLocaleString(), metricWidth, theme), metricPair('Active days', `${stats.activeDays}/${stats.totalTrackedDays}`, 'Station threshold', '>= 120s total', metricWidth, theme)] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Less \u00B7 " }), graphColors.map(color => (_jsxs(Text, { color: color, children: [heatmapSquare, _jsx(Text, { children: " " })] }, color))), _jsx(Text, { color: "gray", children: "More" })] }), !compact ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: textHighlight, children: stats.totalSeconds > 0
+    const tileHeight = graph.cellText.trim().length === 0 ? 2 : 1;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Listening stats", subtitle: "Local listening history \u00B7 never leaves this machine", width: width, theme: theme, right: `${formatHours(totalHours)} · ${stats.sessions.toLocaleString()} sessions` }), _jsxs(Box, { marginTop: 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: width, flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { color: themeAccent(theme), bold: true, children: ["Activity \u2014 ", graph.year] }) }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: [' '.repeat(dayLabelWidth), graph.months] }), graph.rows.map(row => (_jsx(React.Fragment, { children: Array.from({ length: tileHeight }, (_, tileLine) => (_jsxs(Box, { children: [_jsx(Text, { color: textMuted, children: tileLine === 0 ? row.label.padEnd(dayLabelWidth) : ' '.repeat(dayLabelWidth) }), row.cells.map(cell => renderContributionCell(cell, graphColors, graph.cellGap))] }, `${row.key}-${tileLine}`))) }, row.key)))] })] }), _jsxs(Box, { marginTop: 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: width, flexDirection: "column", children: [_jsx(Text, { color: themeAccent(theme), bold: true, children: "Summary" }), _jsxs(Box, { marginTop: compact ? 0 : 1, flexDirection: "column", width: contentWidth, children: [metricPair('Favorite station', truncate(favorite, favoriteWidth), 'Total hours listened', formatHours(totalHours), metricWidth, theme), metricPair('Sessions', stats.sessions.toLocaleString(), 'Longest streak', formatDays(stats.longestStreak), metricWidth, theme), metricPair('Current streak', formatDays(stats.currentStreak), 'Stations listened', stats.listenedStationCount.toLocaleString(), metricWidth, theme), metricPair('Active days', `${stats.activeDays}/${stats.totalTrackedDays}`, 'Station threshold', '>= 120s total', metricWidth, theme)] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: textMuted, children: "Less \u00B7 " }), graphColors.map(color => (_jsxs(React.Fragment, { children: [renderLegendCell(color, graph.cellText, graph.cellGap), _jsx(Text, { children: " " })] }, color))), _jsx(Text, { color: textMuted, children: "More" })] }), !compact ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: textHighlight, children: stats.totalSeconds > 0
                                 ? `Your total listening time is ${formatHours(totalHours)} across public radio streams.`
                                 : 'Start a station to begin filling the listening graph.' }) })) : null] })] }));
 }
+function renderContributionCell(cell, graphColors, cellGap) {
+    if (!cell.visible) {
+        return _jsx(Text, { children: cell.text }, cell.key);
+    }
+    const color = graphColors[cell.level] ?? graphColors[0] ?? textMuted;
+    if (cell.text.trim().length === 0) {
+        return (_jsxs(React.Fragment, { children: [_jsx(Text, { backgroundColor: color, children: cell.text }), cellGap ? _jsx(Text, { children: cellGap }) : null] }, cell.key));
+    }
+    return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: color, children: cell.text }), cellGap ? _jsx(Text, { children: cellGap }) : null] }, cell.key));
+}
+function renderLegendCell(color, text, cellGap) {
+    if (text.trim().length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { backgroundColor: color, children: text }), cellGap ? _jsx(Text, { children: cellGap }) : null] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: color, children: text }), cellGap ? _jsx(Text, { children: cellGap }) : null] }));
+}
 function metricPair(leftLabel, leftValue, rightLabel, rightValue, metricWidth, theme) {
     const accent = themeAccent(theme);
     const leftPadding = Math.max(2, metricWidth - leftLabel.length - leftValue.length - 2);
-    return (_jsxs(Box, { height: 1, width: metricWidth * 2 + 2, children: [_jsx(Box, { width: metricWidth, children: _jsxs(Text, { children: [_jsxs(Text, { color: "gray", children: [leftLabel, ": "] }), _jsx(Text, { color: accent, children: leftValue })] }) }), _jsx(Text, { children: ' '.repeat(leftPadding > 2 ? 2 : leftPadding) }), _jsx(Box, { width: metricWidth, children: _jsxs(Text, { children: [_jsxs(Text, { color: "gray", children: [rightLabel, ": "] }), _jsx(Text, { color: accent, children: rightValue })] }) })] }));
+    return (_jsxs(Box, { height: 1, width: metricWidth * 2 + 2, children: [_jsx(Box, { width: metricWidth, children: _jsxs(Text, { children: [_jsxs(Text, { color: textMuted, children: [leftLabel, ": "] }), _jsx(Text, { color: accent, children: leftValue })] }) }), _jsx(Text, { children: ' '.repeat(leftPadding > 2 ? 2 : leftPadding) }), _jsx(Box, { width: metricWidth, children: _jsxs(Text, { children: [_jsxs(Text, { color: textMuted, children: [rightLabel, ": "] }), _jsx(Text, { color: accent, children: rightValue })] }) })] }));
 }
-function buildContributionGraph(days, width) {
-    const cellWidth = width >= 112 ? 2 : 1;
-    const weeks = Array.from({ length: 53 }, (_, weekIndex) => days.slice(weekIndex * 7, weekIndex * 7 + 7)).filter(week => week.length > 0);
-    const scaleSeconds = contributionScaleSeconds(days);
+export function buildContributionGraph(days, width) {
+    const year = graphYear(days);
+    const weeks = calendarYearWeeks(year);
+    const largestCell = heatmapCellOptions.find(option => dayLabelWidth + weeks.length * (option.cell.length + option.gap.length) <= width);
+    const selectedCell = largestCell ?? { cell: compactHeatmapCell, gap: compactHeatmapGap };
+    const largeCellWidth = selectedCell.cell.length + selectedCell.gap.length;
+    const compactCellWidth = compactHeatmapCell.length + compactHeatmapGap.length;
+    const cellWidth = largeCellWidth > 0 ? largeCellWidth : compactCellWidth;
+    const cellText = selectedCell.cell;
+    const cellGap = selectedCell.gap;
+    const secondsByDate = new Map(days.map(day => [day.date, day.seconds]));
+    const yearDays = days.filter(day => parseLocalDay(day.date).getFullYear() === year);
+    const scaleSeconds = contributionScaleSeconds(yearDays);
     const labels = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
     const rows = Array.from({ length: 7 }, (_, dayIndex) => ({
         key: `day-${dayIndex}`,
         label: labels[dayIndex] ?? '',
         cells: weeks.map(week => {
             const day = week[dayIndex];
-            const level = contributionLevel(day?.seconds ?? 0, scaleSeconds);
-            const text = cellWidth > 1 ? `${heatmapSquare} ` : heatmapSquare;
-            return { key: day?.date ?? `${week[0]?.date ?? 'empty'}-${dayIndex}`, level, text };
+            if (!day) {
+                return {
+                    key: `empty-${dayIndex}`,
+                    level: 0,
+                    text: ' '.repeat(cellWidth),
+                    visible: false
+                };
+            }
+            const date = localDay(day.date);
+            const level = day.visible ? contributionLevel(secondsByDate.get(date) ?? 0, scaleSeconds) : 0;
+            return { key: date, level, text: cellText, visible: true };
         })
     }));
-    return { months: monthLine(weeks, cellWidth), rows };
+    return { year, months: monthLine(weeks, cellWidth, year), cellText, cellGap, rows };
 }
 export function contributionScaleSeconds(days) {
     const activeSeconds = days
@@ -71,29 +113,55 @@ export function contributionLevel(seconds, scaleSeconds) {
     }
     return 1;
 }
-function monthLine(weeks, cellWidth) {
-    const cells = weeks.map((week, index) => {
-        const first = week[0];
-        if (!first) {
-            return ''.padEnd(cellWidth, ' ');
+function graphYear(days) {
+    const lastDay = days[days.length - 1];
+    return lastDay ? parseLocalDay(lastDay.date).getFullYear() : new Date().getFullYear();
+}
+function calendarYearWeeks(year) {
+    const yearStart = new Date(year, 0, 1);
+    const yearEnd = new Date(year, 11, 31);
+    const gridStart = addLocalDays(yearStart, -yearStart.getDay());
+    const gridEnd = addLocalDays(yearEnd, 6 - yearEnd.getDay());
+    const weeks = [];
+    for (let cursor = gridStart; cursor.getTime() <= gridEnd.getTime(); cursor = addLocalDays(cursor, 7)) {
+        weeks.push(Array.from({ length: 7 }, (_, dayIndex) => {
+            const date = addLocalDays(cursor, dayIndex);
+            return { date, visible: date.getFullYear() === year };
+        }));
+    }
+    return weeks;
+}
+function monthLine(weeks, cellWidth, year) {
+    const cells = Array.from({ length: weeks.length * cellWidth }, () => ' ');
+    for (let month = 0; month < 12; month += 1) {
+        const label = monthLabels[month];
+        const firstOfMonth = localDay(new Date(year, month, 1));
+        const weekIndex = weeks.findIndex(week => week.some(day => localDay(day.date) === firstOfMonth));
+        if (weekIndex < 0) {
+            continue;
         }
-        const date = parseLocalDay(first.date);
-        const previous = index > 0 && weeks[index - 1]?.[0]
-            ? parseLocalDay(weeks[index - 1][0].date)
-            : null;
-        const changedMonth = !previous || date.getMonth() !== previous.getMonth();
-        if (!changedMonth) {
-            return ''.padEnd(cellWidth, ' ');
+        const start = weekIndex * cellWidth;
+        for (let index = 0; index < label.length && start + index < cells.length; index += 1) {
+            cells[start + index] = label[index];
         }
-        const label = monthLabels[date.getMonth()];
-        return cellWidth >= 3 ? label : label.slice(0, cellWidth).padEnd(cellWidth, ' ');
-    });
+    }
     return cells.join('');
 }
 function parseLocalDay(value) {
     const [year = '0', month = '1', day = '1'] = value.split('-');
     return new Date(Number(year), Number(month) - 1, Number(day));
 }
+function localDay(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+function addLocalDays(date, days) {
+    const next = new Date(date.getTime());
+    next.setDate(next.getDate() + days);
+    return new Date(next.getFullYear(), next.getMonth(), next.getDate());
+}
 function formatDays(days) {
     return `${days} ${days === 1 ? 'day' : 'days'}`;
 }

package/dist/ui/screens/screen-render.test.js

@@ -6,7 +6,7 @@ import { HelpScreen } from './HelpScreen.js';
 import { NowPlayingScreen } from './NowPlayingScreen.js';
 import { SettingsScreen } from './SettingsScreen.js';
 import { ExploreScreen } from './ExploreScreen.js';
-import { contributionLevel, contributionScaleSeconds, StatsScreen } from './StatsScreen.js';
+import { buildContributionGraph, contributionLevel, contributionScaleSeconds, StatsScreen } from './StatsScreen.js';
 import { settingsItems } from '../screen-items.js';
 import { defaultExploreCursor } from '../app-state.js';
 const station = {
@@ -83,7 +83,7 @@ describe('Explore world map rendering', () => {
     });
 });
 describe('StatsScreen rendering', () => {
-    it('renders activity heatmap days as square markers instead of stretched blocks', () => {
+    it('renders activity heatmap as large calendar-year cells with readable month labels', () => {
         const library = {
             recent: [],
             favorites: [],
@@ -104,9 +104,40 @@ describe('StatsScreen rendering', () => {
             settings
         };
         const frame = render(_jsx(DisplayContext.Provider, { value: resolveDisplayMode({ asciiMode: false }, {}), children: _jsx(StatsScreen, { library: library, theme: "green", width: 132, height: 32 }) })).lastFrame() ?? '';
-        expect(frame).toContain('■');
+        expect(frame).toContain('Jan');
         expect(frame).not.toContain('██');
     });
+    it('starts the contribution graph at January and uses large cells when space allows', () => {
+        const graph = buildContributionGraph([
+            { date: '2026-01-01', seconds: 3600 },
+            { date: '2026-12-31', seconds: 0 }
+        ], 170);
+        expect(graph.months.startsWith('Jan')).toBe(true);
+        expect(graph.months).toContain('Dec');
+        expect(graph.cellText).toBe('  ');
+        expect(graph.cellGap).toBe(' ');
+        expect(graph.rows[4]?.cells[0]).toMatchObject({
+            level: 4,
+            text: '  ',
+            visible: true
+        });
+        expect(graph.rows[0]?.cells[0]).toMatchObject({
+            level: 0,
+            text: '  ',
+            visible: true
+        });
+        expect(graph.rows[6]?.cells.at(-1)).toMatchObject({
+            level: 0,
+            text: '  ',
+            visible: true
+        });
+        const normalWidthGraph = buildContributionGraph([
+            { date: '2026-01-01', seconds: 3600 },
+            { date: '2026-12-31', seconds: 0 }
+        ], 128);
+        expect(normalWidthGraph.cellText).toBe('  ');
+        expect(normalWidthGraph.cellGap).toBe('');
+    });
     it('caps contribution color scaling so one outlier does not flatten normal active days', () => {
         const days = [
             ...Array.from({ length: 19 }, (_, index) => ({ date: `2026-05-${String(index + 1).padStart(2, '0')}`, seconds: 3600 })),

package/dist/ui/theme.js

@@ -5,7 +5,10 @@ export const panelBackground = '#090d14';
 export const panelBorder = '#28313c';
 // Shared neutral palette. Use these named tokens instead of ad-hoc hex literals
 // so secondary text, rules, and map shading stay consistent across every screen.
-export const textDim = '#5b6573';
+// Keep these as hex truecolor values rather than ANSI names like "gray";
+// named gray maps to terminal-palette "bright black" and can become unreadable.
+export const textMuted = '#aab4c2';
+export const textDim = '#8a96a8';
 export const textHighlight = '#d8c66f';
 export const mapLand = '#33414f';
 export const mapWater = '#1a2430';
@@ -28,7 +31,7 @@ export function themeAccent(theme) {
         return '#5eead4';
     }
     if (theme === 'violet') {
-        return '#a78bfa';
+        return '#8c50f0';
     }
     if (theme === 'copper') {
         return '#d08770';
@@ -71,7 +74,7 @@ export function themeContributionColors(theme) {
         return [emptyContribution, '#123f3c', '#1f766c', '#2dd4bf', '#5eead4'];
     }
     if (theme === 'violet') {
-        return [emptyContribution, '#302047', '#5b3f8f', '#7c5cff', '#a78bfa'];
+        return [emptyContribution, '#3e1676', '#542799', '#763fcd', '#8c50f0'];
     }
     if (theme === 'copper') {
         return [emptyContribution, '#44281f', '#7f4f37', '#b86f52', '#d08770'];

package/dist/ui/visualizers/receiver-visualizers.js

@@ -3,8 +3,8 @@ export function buildVisualizer(style, pulse, width, height, _station, playback,
     if (!playbackHasSignal(playback)) {
         return buildZeroSignalVisualizer(width, height, theme);
     }
-    if (style === 'equalizer') {
-        return buildEqualizer(pulse, width, height, theme);
+    if (style === 'ultracode') {
+        return buildUltracode(pulse, width, height, theme);
     }
     if (style === 'motion-blob') {
         return buildMotionBlob(pulse, width, height, theme);
@@ -153,7 +153,7 @@ export function buildVisualizer(style, pulse, width, height, _station, playback,
     if (style === 'newton') {
         return buildNewton(pulse, width, height, theme);
     }
-    return buildEqualizer(pulse, width, height, theme);
+    return buildUltracode(pulse, width, height, theme);
 }
 function playbackHasSignal(playback) {
     return playback.state === 'playing' && playback.ready;
@@ -172,71 +172,80 @@ function buildFlatZeroSignal(width, requestedHeight, theme) {
         color: rowIndex === height - 1 ? accent : '#767676'
     }));
 }
-function buildEqualizer(pulse, width, height, theme) {
+const ultracodeWavelength = 20;
+const ultracodeTravelPerPulse = 80 * 0.03;
+const ultracodeVioletRamp = ['#3e1676', '#491e87', '#542799', '#5f2faa', '#6b37bc', '#763fcd', '#8148df', '#8c50f0'];
+function buildUltracode(pulse, width, height, theme) {
+    const renderWidth = Math.max(1, width);
+    const renderHeight = Math.max(1, height);
     const accent = themeAccent(theme);
-    const bandWidth = 3;
-    const bandCount = Math.floor((width - 2) / bandWidth);
-    const levels = Array.from({ length: bandCount }, (_, i) => {
-        const low = Math.sin(i * 0.18 + pulse * 0.46);
-        const mid = Math.cos(i * 0.32 - pulse * 0.28);
-        const high = Math.sin(i * 0.45 + pulse * 0.68);
-        const normalized = (low * 0.4 + mid * 0.35 + high * 0.25 + 1) / 2;
-        const eased = Math.pow(Math.max(0, Math.min(1, normalized)), 1.4);
-        return Math.round(eased * height);
-    });
-    const peaks = Array.from({ length: bandCount }, (_, i) => {
-        let maxLvl = 0;
-        for (let k = 0; k < 8; k++) {
-            const p = (pulse - k + 240) % 240;
-            const low = Math.sin(i * 0.18 + p * 0.46);
-            const mid = Math.cos(i * 0.32 - p * 0.28);
-            const high = Math.sin(i * 0.45 + p * 0.68);
-            const normalized = (low * 0.4 + mid * 0.35 + high * 0.25 + 1) / 2;
-            const eased = Math.pow(Math.max(0, Math.min(1, normalized)), 1.4);
-            const lvl = Math.round(eased * height);
-            if (lvl > maxLvl) {
-                maxLvl = lvl;
-            }
-        }
-        return maxLvl;
-    });
-    const rows = [];
-    const colors = themeContributionColors(theme);
-    for (let rowIndex = 0; rowIndex < height; rowIndex++) {
-        const threshold = height - rowIndex;
-        let rowText = ' ';
-        for (let i = 0; i < bandCount; i++) {
-            const lvl = levels[i];
-            const peak = peaks[i];
-            let bandChar = '  ';
-            if (lvl >= threshold) {
-                bandChar = '██';
-            }
-            else if (peak === threshold) {
-                bandChar = '◆◆';
-            }
-            else {
-                bandChar = '··';
-            }
-            rowText += bandChar + ' ';
-        }
-        let color = colors[2] ?? accent;
-        if (rowIndex < Math.max(1, height * 0.3)) {
-            color = '#ff5f87';
-        }
-        else if (rowIndex < Math.max(2, height * 0.6)) {
-            color = colors[4] ?? accent;
-        }
-        else {
-            color = colors[3] ?? accent;
-        }
-        rows.push({
-            text: rowText.padEnd(width).slice(0, width),
-            color
+    const ramp = ultracodeRippleRamp(theme);
+    const selectedColor = ramp[ramp.length - 1] ?? accent;
+    const travel = pulse * ultracodeTravelPerPulse;
+    const originColumn = Math.floor(renderWidth / 2);
+    const originRow = Math.floor(renderHeight / 2);
+    const rows = Array.from({ length: renderHeight }, (_, rowIndex) => {
+        const cells = Array.from({ length: renderWidth }, (_, columnIndex) => {
+            const level = ultracodeRippleLevel(ultracodeDistance(columnIndex, rowIndex, originColumn, originRow), travel, ramp.length);
+            return {
+                text: ' ',
+                color: level === null ? accent : selectedColor,
+                backgroundColor: level === null ? undefined : ramp[level] ?? selectedColor
+            };
         });
-    }
+        return lineFromCells(cells, accent);
+    });
     return rows;
 }
+function ultracodeDistance(column, row, originColumn, originRow) {
+    const dx = column - originColumn;
+    const dy = (row - originRow) * 2;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+function ultracodeRippleLevel(distance, travel, rampLength) {
+    if (distance > travel) {
+        return null;
+    }
+    const phase = (((distance - travel) % ultracodeWavelength) + ultracodeWavelength) % ultracodeWavelength;
+    const brightness = (1 + Math.cos((2 * Math.PI * phase) / ultracodeWavelength)) / 2;
+    return Math.min(rampLength - 1, Math.round(brightness * (rampLength - 1)));
+}
+function ultracodeRippleRamp(theme) {
+    if (theme === 'violet') {
+        return ultracodeVioletRamp;
+    }
+    const colors = themeContributionColors(theme);
+    const start = colors[1] ?? '#1c1c1c';
+    const end = themeAccent(theme);
+    return Array.from({ length: 8 }, (_, index) => interpolateHex(start, end, index / 7));
+}
+function interpolateHex(startHex, endHex, amount) {
+    const start = hexToRgb(startHex);
+    const end = hexToRgb(endHex);
+    return rgbToHex([
+        Math.round(start[0] + (end[0] - start[0]) * amount),
+        Math.round(start[1] + (end[1] - start[1]) * amount),
+        Math.round(start[2] + (end[2] - start[2]) * amount)
+    ]);
+}
+function hexToRgb(hex) {
+    const normalized = hex.replace('#', '');
+    const expanded = normalized.length === 3
+        ? [...normalized].map(value => value + value).join('')
+        : normalized.padEnd(6, '0').slice(0, 6);
+    const value = Number.parseInt(expanded, 16);
+    return [
+        (value >> 16) & 255,
+        (value >> 8) & 255,
+        value & 255
+    ];
+}
+function rgbToHex([red, green, blue]) {
+    return `#${[red, green, blue].map(value => clampColor(value).toString(16).padStart(2, '0')).join('')}`;
+}
+function clampColor(value) {
+    return Math.max(0, Math.min(255, Math.round(value)));
+}
 function buildMotionBlob(pulse, width, height, theme) {
     const h = Math.max(7, height);
     const mid = (h - 1) / 2;
@@ -1876,11 +1885,19 @@ function lineFromCells(cells, fallbackColor) {
     const segments = [];
     for (const cell of cells) {
         const previous = segments[segments.length - 1];
-        if (previous && previous.color === cell.color) {
+        if (previous &&
+            previous.color === cell.color &&
+            previous.backgroundColor === cell.backgroundColor &&
+            previous.bold === cell.bold) {
             previous.text += cell.text;
         }
         else {
-            segments.push({ text: cell.text, color: cell.color });
+            segments.push({
+                text: cell.text,
+                color: cell.color,
+                backgroundColor: cell.backgroundColor,
+                bold: cell.bold
+            });
         }
     }
     return { text, color: fallbackColor, segments };
@@ -1938,7 +1955,7 @@ function dimMotionColorAt(position, theme) {
 }
 export function visualizerHeight(style, availableRows, width = 80) {
     const maxRowsByStyle = {
-        equalizer: 12,
+        ultracode: 14,
         'motion-blob': 12,
         'motion-area': 11,
         'motion-contour': 14,
@@ -1990,7 +2007,7 @@ export function visualizerHeight(style, availableRows, width = 80) {
         newton: 14
     };
     const spaciousStyles = new Set([
-        'equalizer',
+        'ultracode',
         'motion-blob',
         'motion-area',
         'motion-contour',
@@ -2041,13 +2058,15 @@ export function visualizerHeight(style, availableRows, width = 80) {
         'lava-lamp',
         'newton'
     ]);
-    const minRows = style === 'cube' || style === 'motion-contour' || style === 'spinning-donut'
-        ? 8
-        : spaciousStyles.has(style)
-            ? 7
-            : style.startsWith('motion-')
-                ? 6
-                : 3;
+    const minRows = style === 'ultracode'
+        ? 7
+        : style === 'cube' || style === 'motion-contour' || style === 'spinning-donut'
+            ? 8
+            : spaciousStyles.has(style)
+                ? 7
+                : style.startsWith('motion-')
+                    ? 6
+                    : 3;
     const baseMaxRows = maxRowsByStyle[style] ?? 8;
     const maxRows = responsiveVisualizerMaxRows(style, availableRows, width, baseMaxRows, spaciousStyles);
     return Math.max(minRows, Math.min(maxRows, availableRows));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciphore/radiocli",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A terminal-first world radio receiver built with Ink, mpv, and resilient public-radio providers.",
   "type": "module",
   "license": "MIT",