@ciphore/radiocli 0.1.6 → 0.1.8

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,11 +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 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);
@@ -17,71 +26,142 @@ 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: ["\u2588\u2588", _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 >= 168 ? 3 : width >= 120 ? 2 : 1;
-    const weeks = Array.from({ length: 53 }, (_, weekIndex) => days.slice(weekIndex * 7, weekIndex * 7 + 7)).filter(week => week.length > 0);
-    const maxSeconds = Math.max(1, ...days.map(day => day.seconds));
+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, maxSeconds);
-            const text = cellWidth > 1 ? `${'█'.repeat(cellWidth - 1)} ` : '█';
-            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
+        .map(day => day.seconds)
+        .filter(seconds => seconds > 0)
+        .sort((left, right) => left - right);
+    if (activeSeconds.length === 0) {
+        return 1;
+    }
+    const percentileIndex = Math.min(activeSeconds.length - 1, Math.ceil(activeSeconds.length * 0.95) - 1);
+    return Math.max(1, activeSeconds[percentileIndex] ?? activeSeconds[activeSeconds.length - 1] ?? 1);
 }
-function contributionLevel(seconds, maxSeconds) {
+export function contributionLevel(seconds, scaleSeconds) {
     if (seconds <= 0) {
         return 0;
     }
-    const ratio = seconds / maxSeconds;
-    if (ratio > 0.75) {
+    const ratio = seconds / Math.max(1, scaleSeconds);
+    if (ratio >= 0.75) {
         return 4;
     }
-    if (ratio > 0.45) {
+    if (ratio >= 0.5) {
         return 3;
     }
-    if (ratio > 0.2) {
+    if (ratio >= 0.25) {
         return 2;
     }
     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,6 +6,7 @@ import { HelpScreen } from './HelpScreen.js';
 import { NowPlayingScreen } from './NowPlayingScreen.js';
 import { SettingsScreen } from './SettingsScreen.js';
 import { ExploreScreen } from './ExploreScreen.js';
+import { buildContributionGraph, contributionLevel, contributionScaleSeconds, StatsScreen } from './StatsScreen.js';
 import { settingsItems } from '../screen-items.js';
 import { defaultExploreCursor } from '../app-state.js';
 const station = {
@@ -81,6 +82,74 @@ describe('Explore world map rendering', () => {
         expect(/[⠀-⣿]/.test(frame)).toBe(false);
     });
 });
+describe('StatsScreen rendering', () => {
+    it('renders activity heatmap as large calendar-year cells with readable month labels', () => {
+        const library = {
+            recent: [],
+            favorites: [],
+            imported: [],
+            trackHistory: [],
+            searchHistory: [],
+            activity: {
+                sessions: [
+                    {
+                        id: 'listen',
+                        station,
+                        startedAt: new Date(2026, 4, 24, 12).toISOString(),
+                        endedAt: new Date(2026, 4, 24, 13).toISOString(),
+                        listenedSeconds: 3600
+                    }
+                ]
+            },
+            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('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 })),
+            { date: '2026-05-20', seconds: 36_000 }
+        ];
+        const scaleSeconds = contributionScaleSeconds(days);
+        expect(scaleSeconds).toBe(3600);
+        expect(contributionLevel(3600, scaleSeconds)).toBe(4);
+        expect(contributionLevel(900, scaleSeconds)).toBe(2);
+        expect(contributionLevel(0, scaleSeconds)).toBe(0);
+    });
+});
 describe('HelpScreen rendering', () => {
     it('lists keybinding sections and : commands', () => {
         const { lastFrame } = render(_jsx(HelpScreen, { theme: "green", width: 80 }));

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, shouldHandleKeyboardEvent } from './app-state.js';
+import { applyTextInput, clamp, favoriteTarget, isEditableInput, isPlainPrintableInput, mediaTransportActionForInput, searchEditingArrowAction, shouldHandleKeyboardEvent } 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 }) {
@@ -138,12 +138,20 @@ export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, be
                 setEditingSearch(false);
                 return;
             }
-            if (key.upArrow) {
-                recallSearchHistory('older');
-                return;
-            }
-            if (key.downArrow) {
-                recallSearchHistory('newer');
+            const arrowAction = searchEditingArrowAction(key, currentItemCount('search') > 0);
+            if (arrowAction) {
+                if (arrowAction === 'history-older') {
+                    recallSearchHistory('older');
+                }
+                else if (arrowAction === 'history-newer') {
+                    recallSearchHistory('newer');
+                }
+                else if (arrowAction === 'select-previous') {
+                    setSelected(value => clamp(value - 1, currentItemCount(screen) - 1));
+                }
+                else {
+                    setSelected(value => clamp(value + 1, currentItemCount(screen) - 1));
+                }
                 return;
             }
             if (isEditableInput(input, key)) {

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));