@ciphore/radiocli 0.1.7 → 0.1.9

package/dist/ui/screens/CountriesScreen.js

@@ -2,9 +2,15 @@ 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';
+import { truncate } from '../format.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] }));
+    const rowWidth = Math.max(24, width - 2);
+    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) => {
+                            const meta = ` · ${country.code} · ${country.stationCount.toLocaleString()} stations`;
+                            const nameWidth = Math.max(4, rowWidth - 2 - meta.length);
+                            return (_jsxs(Box, { height: 1, width: rowWidth, children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: truncate(country.name, nameWidth) }), _jsx(Text, { color: textMuted, children: truncate(meta, Math.max(0, rowWidth - 2 - nameWidth)) })] }));
+                        } })] })) : 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,48 +1,108 @@
-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: '' }
+];
+const compactHeatmapCell = ' ';
+const compactHeatmapGap = '';
+const tallHeatmapMinHeight = 26;
 export function StatsScreen({ library, theme, width, height }) {
     const { panel: panelBackground, ascii } = useDisplay();
     const stats = computeListeningStats(library.activity.sessions);
     const contentWidth = Math.max(20, width - 4);
-    const graph = buildContributionGraph(stats.days, contentWidth);
+    const graph = buildContributionGraph(stats.days, contentWidth, height);
     const graphColors = themeContributionColors(theme);
     const favorite = stats.favoriteStation?.name ?? 'none yet';
     const totalHours = stats.totalSeconds / 3600;
     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
+    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: graph.tileHeight }, (_, tileLine) => (_jsxs(Box, { children: [_jsx(Text, { color: textMuted, children: tileLine === 0 ? row.label.padEnd(dayLabelWidth) : ' '.repeat(dayLabelWidth) }), renderContributionCells(row.cells, 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 renderContributionCells(cells, graphColors, cellGap) {
+    const runs = [];
+    for (const cell of cells) {
+        const text = cellGap ? `${cell.text}${cell.visible ? cellGap : ''}` : cell.text;
+        const previous = runs[runs.length - 1];
+        if (previous && previous.visible === cell.visible && previous.level === cell.level) {
+            previous.text += text;
+        }
+        else {
+            runs.push({
+                key: `${runs.length}-${cell.key}`,
+                level: cell.level,
+                text,
+                visible: cell.visible
+            });
+        }
+    }
+    return runs.map(run => {
+        if (!run.visible) {
+            return _jsx(Text, { children: run.text }, run.key);
+        }
+        const color = graphColors[run.level] ?? graphColors[0] ?? textMuted;
+        if (run.text.trim().length === 0) {
+            return _jsx(Text, { backgroundColor: color, children: run.text }, run.key);
+        }
+        return _jsx(Text, { color: color, children: run.text }, run.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, height = tallHeatmapMinHeight) {
+    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 tileHeight = cellText.trim().length === 0 && height >= tallHeatmapMinHeight ? 2 : 1;
+    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, tileHeight, rows };
 }
 export function contributionScaleSeconds(days) {
     const activeSeconds = days
@@ -71,29 +131,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,8 @@ 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 { CountriesScreen } from './CountriesScreen.js';
+import { buildContributionGraph, contributionLevel, contributionScaleSeconds, StatsScreen } from './StatsScreen.js';
 import { settingsItems } from '../screen-items.js';
 import { defaultExploreCursor } from '../app-state.js';
 const station = {
@@ -82,8 +83,22 @@ describe('Explore world map rendering', () => {
         expect(/[⠀-⣿]/.test(frame)).toBe(false);
     });
 });
+describe('CountriesScreen rendering', () => {
+    it('keeps long country rows to one terminal line', () => {
+        const frame = render(_jsx(CountriesScreen, { countries: [
+                {
+                    name: 'The Extremely Long Democratic Republic Of The Country With A Very Long Name',
+                    code: 'TL',
+                    stationCount: 123456789
+                }
+            ], selected: 0, loading: false, filter: "", editingFilter: false, theme: "green", pageSize: 1, width: 48 })).lastFrame() ?? '';
+        expect(frame).toContain('>');
+        expect(frame).toContain('…');
+        expect(frame).not.toContain('Very Long Name');
+    });
+});
 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 +119,56 @@ 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.tileHeight).toBe(2);
+        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('');
+        const compactWidthGraph = buildContributionGraph([
+            { date: '2026-01-01', seconds: 3600 },
+            { date: '2026-12-31', seconds: 0 }
+        ], 80);
+        expect(compactWidthGraph.cellText).toBe(' ');
+        expect(compactWidthGraph.cellGap).toBe('');
+    });
+    it('uses one-line heatmap cells when the stats panel is height constrained', () => {
+        const graph = buildContributionGraph([
+            { date: '2026-01-01', seconds: 3600 },
+            { date: '2026-12-31', seconds: 0 }
+        ], 170, 20);
+        expect(graph.cellText).toBe('  ');
+        expect(graph.cellGap).toBe('');
+        expect(graph.tileHeight).toBe(1);
+    });
     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/use-app-input.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useInput } from 'ink';
 import { homeItems, settingsItems } from './screen-items.js';
-import { applyTextInput, clamp, favoriteTarget, isEditableInput, isPlainPrintableInput, mediaTransportActionForInput, searchEditingArrowAction, shouldHandleKeyboardEvent } from './app-state.js';
+import { applyTextInput, clamp, favoriteTarget, isEditableInput, isPlainPrintableInput, mediaTransportActionForInput, searchEditingArrowAction, shouldHandleKeyboardEvent, shouldToggleNearbyLocationShortcut } from './app-state.js';
 import { parseSgrMouseEvents, primaryMousePress } from './terminal-mouse.js';
 import { completeCommand } from './help-content.js';
 export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, beginLearningTransportKey, capturingTransportAction, commandMode, commandText, copyStationUrl, openStationHomepage, currentItemCount, cycleDisplayColor, cycleAudioOutput, cycleReceiverStyle, cycleSleepTimer, editingCountryFilter, editingSearch, executeCommand, filteredCountries, go, lastRawTransportAtRef, lastSubmittedSearchRef, loadCountry, openAdjacentTab, openAirPlayCode, openAirPlaySettings, openScreen, playAdjacent, playStation, player, playingStation, recallSearchHistory, moveExploreCursor, moveExploreCursorToCell, refreshAirPlayTargets, refreshProviderHealth, resetLearnedTransportKeys, runSearch, saveLearnedTransportKey, screen, searchQuery, selected, selectedStation, selectAirPlayDeviceAt, setCapturingTransportAction, setAirPlayCode, setCommandMode, setCommandText, setCountryFilter, setEditingCountryFilter, setEditingSearch, setMessage, setSearchQuery, setSelected, setShowDiagnostics, submitAirPlayCode, settingsRef, shutdown, stdin, toggleFavorite, toggleMute, togglePause, toggleSetting, toggleNearbyLocation, toggleRadioGarden, toggleSkipBrokenStreams }) {
@@ -256,7 +256,7 @@ export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, be
             toggleRadioGarden();
             return;
         }
-        if (input === 'l') {
+        if (shouldToggleNearbyLocationShortcut(input, screen)) {
             toggleNearbyLocation();
             return;
         }
@@ -303,6 +303,10 @@ export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, be
             return;
         }
         if (input === 'b' || key.escape) {
+            if (screen === 'stations') {
+                go('countries');
+                return;
+            }
             go('home');
             return;
         }