@ciphore/radiocli 0.1.5 → 0.1.7

package/dist/ui/page-footer.js

@@ -10,7 +10,7 @@ export function pageFooterText({ capturingTransportAction, commandMode, commandT
         return '↑/↓ move · Enter open · number jump · : command';
     }
     if (screen === 'search' && editingSearch) {
-        return 'Type query · Backspace edit · Enter search/tune · Esc finish';
+        return 'Type query · ↑/↓ move results · Ctrl+↑/↓ history · Enter search/tune · Esc finish';
     }
     if (screen === 'search') {
         return '/ edit query · ↑/↓ or n/p move · Enter tune · f favorite · b home';
@@ -55,5 +55,8 @@ export function pageFooterText({ capturingTransportAction, commandMode, commandT
     if (screen === 'stats') {
         return 'b home';
     }
+    if (screen === 'help') {
+        return '? or b close · : command';
+    }
     return ': command';
 }

package/dist/ui/screen-items.js

@@ -19,6 +19,10 @@ export const settingsItems = [
     'Volume down',
     'Mute or unmute',
     'Toggle skip broken streams',
+    'Resume last station on launch',
+    'Transparent background',
+    'ASCII-safe display',
+    'Reduce motion',
     'Refresh provider health',
     'Learn previous media key',
     'Learn play/pause media key',

package/dist/ui/screens/ExploreScreen.js

@@ -5,14 +5,18 @@ 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, panelBackground, panelBorder, themeAccent } from '../theme.js';
+import { exploreMapLand, mapMarker, panelBorder, 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 }) {
+    const { panel: panelBackground, ascii } = useDisplay();
     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: "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: "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 ? '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: "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] })] })] }));
 }
 function CosmoMapLine({ row, theme }) {
+    const { ascii } = useDisplay();
     const chunks = [];
     for (const cell of row.cells) {
         const previous = chunks.at(-1);
@@ -27,7 +31,7 @@ function CosmoMapLine({ row, theme }) {
     return (_jsx(Box, { children: chunks.map(chunk => {
             const key = `${offset}-${chunk.kind}`;
             offset += chunk.text.length;
-            return (_jsx(Text, { color: cosmoMapColor(chunk.kind, theme), children: chunk.text }, key));
+            return (_jsx(Text, { color: cosmoMapColor(chunk.kind, theme), children: ascii ? toAsciiSafe(chunk.text) : chunk.text }, key));
         }) }));
 }
 function cosmoMapColor(kind, theme) {

package/dist/ui/screens/HelpScreen.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { themeAccent } from '../theme.js';
+import { ScreenHeader } from '../components/ScreenHeader.js';
+import { commandHelp, keyHelpSections } from '../help-content.js';
+import { truncate } from '../format.js';
+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))) })] })] }));
+}

package/dist/ui/screens/MapScreen.js

@@ -1,12 +1,16 @@
 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 { useDisplay } from '../display-context.js';
+import { toAsciiSafe } from '../ascii.js';
 import { visibleWindow } from '../list-window.js';
 import { Menu, Pointer } from '../components/Menu.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
 import { buildWorldMap } from '../world-map.js';
 export function MapScreen({ countries, selected, loading, filter, editingFilter, theme, pageSize, mode, width }) {
+    const { ascii } = useDisplay();
+    const asciify = (value) => (ascii ? toAsciiSafe(value) : value);
     const contentWidth = Math.max(52, width - 2);
     const topCountries = Array.from(countries).sort((a, b) => b.stationCount - a.stationCount).slice(0, mode === 'full' ? 10 : 6);
     const selectedCountry = countries[selected];
@@ -14,9 +18,10 @@ 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: "Loading country density\u2026" }) : 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('')))) }), _jsxs(Text, { color: "gray", children: [graph.plotted, " plotted \u00B7 ", graph.unplotted, " unplaced \u00B7 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 ? `${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 }), _jsxs(Text, { color: "gray", children: [" \u00B7 ", 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: "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))}`) })] })) })] })] })] }));
 }
 function MapLine({ row, theme }) {
+    const { ascii } = useDisplay();
     const chunks = [];
     for (const cell of row.cells) {
         const previous = chunks[chunks.length - 1];
@@ -33,7 +38,7 @@ function MapLine({ row, theme }) {
         keyedChunks.push({ key: `${offset}-${chunk.kind}`, ...chunk });
         offset += chunk.text.length;
     }
-    return (_jsx(Box, { children: keyedChunks.map(chunk => (_jsx(Text, { color: mapColor(chunk.kind, theme), children: chunk.text }, chunk.key))) }));
+    return (_jsx(Box, { children: keyedChunks.map(chunk => (_jsx(Text, { color: mapColor(chunk.kind, theme), children: ascii ? toAsciiSafe(chunk.text) : chunk.text }, chunk.key))) }));
 }
 function mapColor(kind, theme) {
     const colors = themeContributionColors(theme);

package/dist/ui/screens/NowPlayingScreen.js

@@ -1,10 +1,17 @@
 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 { panelBackground, themeAccent } from '../theme.js';
+import { themeAccent } from '../theme.js';
+import { panelBorderStyle, useDisplay } from '../display-context.js';
+import { toAsciiSafe } from '../ascii.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { buildVisualizer, visualizerHeight } from '../visualizers/receiver-visualizers.js';
-export function NowPlayingScreen({ station, playback, metadata, theme, favorite, pulse, diagnostics, sleepLabel, showDiagnostics, stationTime, receiverStyle, width, height }) {
+export function NowPlayingScreen({ station, playback, metadata, theme, favorite, pulse, diagnostics, sleepLabel, showDiagnostics, stationTime, receiverStyle, trackHistory, width, height }) {
+    const { panel: panelBackground, ascii } = useDisplay();
+    // In ASCII mode route every rendered string through the glyph mapper so no
+    // braille, block, box-drawing, or punctuation (·, ★) leaks to the terminal.
+    const a = (value) => (ascii ? toAsciiSafe(value) : value);
+    const stationTracks = recentTracksForStation(trackHistory, station, 3);
     const accent = themeAccent(theme);
     const panelWidth = Math.max(62, width);
     const panelHeight = Math.max(10, height);
@@ -27,9 +34,25 @@ export function NowPlayingScreen({ station, playback, metadata, theme, favorite,
         ? truncate(metadata.title, Math.max(8, innerWidth - 12))
         : 'Waiting for ICY track metadata';
     const dialLabel = receiverDialLabel(station);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Now playing", width: panelWidth, theme: theme }), _jsxs(Box, { borderStyle: "round", 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: 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: stationName }) }), _jsx(Text, { color: "gray", children: truncate(stationPlace, innerWidth) }), _jsx(Box, { flexDirection: "column", children: visualRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
+    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
                                 ? 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: metadataLine }), _jsx(Text, { color: favorite ? 'yellow' : 'gray', children: favorite ? '★ Favorite' : '☆ Favorite' })] }), _jsx(Text, { color: "gray", children: infoLine }), showDiagnostics ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "Diagnostics" }), _jsxs(Text, { color: "gray", children: ["Stream: ", diagnostics.streamUrl ? truncate(diagnostics.streamUrl, innerWidth - 8) : 'none'] }), _jsxs(Text, { color: "gray", children: ["Station time: ", stationTime] }), _jsxs(Text, { color: "gray", children: ["Started: ", diagnostics.startedAt ? new Date(diagnostics.startedAt).toLocaleTimeString() : 'not playing', " \u00B7 available ", diagnostics.availableBackends.join(', ') || 'none'] })] })) : null] })] }));
+                                : 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] })] }));
+}
+function asciifyVisualRow(row) {
+    return {
+        ...row,
+        text: toAsciiSafe(row.text),
+        segments: row.segments?.map(segment => ({ ...segment, text: toAsciiSafe(segment.text) }))
+    };
+}
+export function recentTracksForStation(history, station, limit) {
+    if (!station) {
+        return [];
+    }
+    const key = `${station.provider}:${station.id}`;
+    return history.filter(track => track.stationKey === key).slice(0, limit);
 }
 export function receiverDialLabel(station) {
     if (!station) {

package/dist/ui/screens/SearchScreen.js

@@ -2,11 +2,13 @@ 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 { panelBackground, panelBorder, themeAccent } from '../theme.js';
+import { panelBorder, 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 }) {
+    const { panel: panelBackground, ascii } = useDisplay();
     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: "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) : '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] }));
 }

package/dist/ui/screens/SettingsScreen.js

@@ -38,6 +38,14 @@ function settingValue(item, settings, diagnostics, backends, airPlayDevices) {
             return diagnostics.muted ? 'muted' : `vol ${diagnostics.volume}`;
         case 'Toggle skip broken streams':
             return settings.skipBrokenStreams ? 'on' : 'off';
+        case 'Resume last station on launch':
+            return settings.resumeOnLaunch ? 'on' : 'off';
+        case 'Transparent background':
+            return settings.transparentBackground ? 'on' : 'off';
+        case 'ASCII-safe display':
+            return settings.asciiMode ? 'on' : 'off';
+        case 'Reduce motion':
+            return settings.reduceMotion ? 'on' : 'off';
         case 'Reset learned media keys':
             return `prev ${settings.mediaKeys.previous.length} · play ${settings.mediaKeys.playPause.length} · next ${settings.mediaKeys.next.length}`;
         default:

package/dist/ui/screens/StatsScreen.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { computeListeningStats } from '../../activity/stats.js';
-import { panelBackground, panelBorder, textHighlight, themeAccent, themeContributionColors } from '../theme.js';
+import { panelBorder, textHighlight, 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 = '■';
 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);
@@ -15,7 +18,7 @@ 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: "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: "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
+    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
                                 ? `Your total listening time is ${formatHours(totalHours)} across public radio streams.`
                                 : 'Start a station to begin filling the listening graph.' }) })) : null] })] }));
 }
@@ -25,34 +28,45 @@ function metricPair(leftLabel, leftValue, rightLabel, rightValue, metricWidth, t
     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 })] }) })] }));
 }
 function buildContributionGraph(days, width) {
-    const cellWidth = width >= 168 ? 3 : width >= 120 ? 2 : 1;
+    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 maxSeconds = Math.max(1, ...days.map(day => day.seconds));
+    const scaleSeconds = contributionScaleSeconds(days);
     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)} ` : '█';
+            const level = contributionLevel(day?.seconds ?? 0, scaleSeconds);
+            const text = cellWidth > 1 ? `${heatmapSquare} ` : heatmapSquare;
             return { key: day?.date ?? `${week[0]?.date ?? 'empty'}-${dayIndex}`, level, text };
         })
     }));
     return { months: monthLine(weeks, cellWidth), rows };
 }
-function contributionLevel(seconds, maxSeconds) {
+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);
+}
+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;

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

@@ -0,0 +1,152 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink-testing-library';
+import { describe, expect, it } from 'vitest';
+import { DisplayContext, resolveDisplayMode } from '../display-context.js';
+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 { settingsItems } from '../screen-items.js';
+import { defaultExploreCursor } from '../app-state.js';
+const station = {
+    id: 'station-1',
+    provider: 'radio-browser',
+    name: 'KEXP 90.3 FM',
+    country: 'United States',
+    tags: ['indie'],
+    codec: 'MP3',
+    bitrate: 128
+};
+const playback = {
+    backend: 'mpv',
+    state: 'idle',
+    volume: 70,
+    muted: false,
+    ready: false
+};
+const diagnostics = {
+    backend: 'mpv',
+    availableBackends: ['mpv'],
+    preferredBackend: 'auto',
+    active: false,
+    volume: 70,
+    muted: false,
+    ready: false
+};
+const trackHistory = [
+    { title: 'Bjork - Joga', stationKey: 'radio-browser:station-1', stationName: 'KEXP 90.3 FM', at: '2' },
+    { title: 'Aphex Twin - Avril 14th', stationKey: 'radio-browser:station-1', stationName: 'KEXP 90.3 FM', at: '1' }
+];
+function renderNowPlaying(asciiMode, showDiagnostics) {
+    const mode = resolveDisplayMode({ asciiMode }, {});
+    return render(_jsx(DisplayContext.Provider, { value: mode, children: _jsx(NowPlayingScreen, { station: station, playback: playback, metadata: null, theme: "green", favorite: true, pulse: 0, diagnostics: diagnostics, sleepLabel: "Sleep off", showDiagnostics: showDiagnostics, stationTime: "12:00", receiverStyle: "pulse-grid", trackHistory: trackHistory, width: 72, height: 30 }) }));
+}
+const settings = {
+    theme: 'green',
+    receiverStyle: 'pulse-grid',
+    volume: 70,
+    enableRadioGarden: false,
+    enableNearbyLocation: false,
+    preferredBackend: 'auto',
+    tuneTimeoutSeconds: 12,
+    skipBrokenStreams: true,
+    mediaKeys: { previous: [], playPause: [], next: [] },
+    resumeOnLaunch: true,
+    asciiMode: true,
+    reduceMotion: false,
+    transparentBackground: false
+};
+describe('SettingsScreen rendering', () => {
+    it('renders the new display and playback toggles with their values', () => {
+        const settingsIndex = Math.max(0, settingsItems.indexOf('Resume last station on launch'));
+        const { lastFrame } = render(_jsx(SettingsScreen, { selected: settingsIndex, settings: settings, storePath: "/tmp/radiocli.json", playback: playback, backends: ['mpv'], airPlayDevices: [], providerHealth: {}, theme: "green", diagnostics: diagnostics, width: 80 }));
+        const frame = lastFrame() ?? '';
+        expect(frame).toContain('Resume last station on launch');
+        expect(frame).toContain('ASCII-safe display');
+        expect(frame).toContain('Reduce motion');
+        expect(frame).toContain('Transparent background');
+    });
+});
+function renderExplore(asciiMode) {
+    const mode = resolveDisplayMode({ asciiMode }, {});
+    return render(_jsx(DisplayContext.Provider, { value: mode, children: _jsx(ExploreScreen, { title: "Explore", subtitle: "Move a map cursor through geotagged stations", stations: [station], selected: 0, loading: false, theme: "green", favorites: new Set(), filterLabel: "", cursor: defaultExploreCursor, pageSize: 8, width: 100, height: 24 }) }));
+}
+describe('Explore world map rendering', () => {
+    it('rasterizes land with braille glyphs by default', () => {
+        const frame = renderExplore(false).lastFrame() ?? '';
+        expect(/[⠀-⣿]/.test(frame)).toBe(true);
+    });
+    it('replaces braille with ASCII in ASCII-safe mode', () => {
+        const frame = renderExplore(true).lastFrame() ?? '';
+        expect(/[⠀-⣿]/.test(frame)).toBe(false);
+    });
+});
+describe('StatsScreen rendering', () => {
+    it('renders activity heatmap days as square markers instead of stretched blocks', () => {
+        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('■');
+        expect(frame).not.toContain('██');
+    });
+    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 }));
+        const frame = lastFrame() ?? '';
+        expect(frame).toContain('Navigation');
+        expect(frame).toContain('Playback');
+        expect(frame).toContain(':search');
+        expect(frame).toContain(':doctor');
+        expect(frame).toContain('Toggle this help');
+    });
+});
+describe('NowPlayingScreen rendering', () => {
+    it('shows recent tracks for the tuned station when diagnostics are open', () => {
+        const { lastFrame } = renderNowPlaying(false, true);
+        const frame = lastFrame() ?? '';
+        expect(frame).toContain('Bjork - Joga');
+        expect(frame).toContain('UNITED STATES');
+    });
+    it('uses Unicode box borders by default', () => {
+        const { lastFrame } = renderNowPlaying(false, false);
+        const frame = lastFrame() ?? '';
+        expect(/[\u2500-\u257f]/.test(frame)).toBe(true);
+    });
+    it('emits only ASCII characters in ASCII-safe mode', () => {
+        const { lastFrame } = renderNowPlaying(true, true);
+        const frame = lastFrame() ?? '';
+        expect(frame).toContain('Bjork - Joga');
+        // No braille, block, box-drawing, or punctuation glyphs survive ASCII mode.
+        expect(/[^\x00-\x7f]/.test(frame)).toBe(false);
+    });
+});

package/dist/ui/system-actions.js

@@ -0,0 +1,58 @@
+import { spawn } from 'node:child_process';
+import { resolveCommand } from '../player/command.js';
+// The command used to open a URL in the platform's default handler.
+export function openExternalCommand(platform = process.platform) {
+    if (platform === 'darwin') {
+        return { command: 'open', args: [] };
+    }
+    if (platform === 'win32') {
+        // The empty "" is the window title argument `start` expects before the URL.
+        return { command: 'cmd', args: ['/c', 'start', ''] };
+    }
+    return { command: 'xdg-open', args: [] };
+}
+// Candidate clipboard tools per platform, in priority order. pbcopy/clip ship
+// with macOS/Windows; Linux/BSD rely on whichever of these is installed.
+export function clipboardCommands(platform = process.platform) {
+    if (platform === 'darwin') {
+        return [{ command: 'pbcopy', args: [] }];
+    }
+    if (platform === 'win32') {
+        return [{ command: 'clip', args: [] }];
+    }
+    return [
+        { command: 'wl-copy', args: [] },
+        { command: 'xclip', args: ['-selection', 'clipboard'] },
+        { command: 'xsel', args: ['--clipboard', '--input'] }
+    ];
+}
+export function openExternal(url, platform = process.platform) {
+    const { command, args } = openExternalCommand(platform);
+    try {
+        const child = spawn(resolveCommand(command) ?? command, [...args, url], { stdio: 'ignore', detached: true });
+        child.on('error', () => undefined);
+        child.unref();
+    }
+    catch {
+        // Opening a browser is best-effort; never crash the TUI over it.
+    }
+}
+export function copyToClipboard(text, platform = process.platform) {
+    for (const { command, args } of clipboardCommands(platform)) {
+        const resolved = resolveCommand(command);
+        if (!resolved) {
+            continue;
+        }
+        try {
+            const child = spawn(resolved, args, { stdio: ['pipe', 'ignore', 'ignore'] });
+            child.on('error', () => undefined);
+            child.stdin.write(text);
+            child.stdin.end();
+            return true;
+        }
+        catch {
+            continue;
+        }
+    }
+    return false;
+}

package/dist/ui/use-app-input.js

@@ -1,9 +1,10 @@
 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';
-export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, beginLearningTransportKey, capturingTransportAction, commandMode, commandText, currentItemCount, cycleDisplayColor, cycleAudioOutput, cycleReceiverStyle, cycleSleepTimer, editingCountryFilter, editingSearch, executeCommand, filteredCountries, go, lastRawTransportAtRef, lastSubmittedSearchRef, loadCountry, openAdjacentTab, openAirPlayCode, openAirPlaySettings, openScreen, playAdjacent, playStation, player, playingStation, 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, toggleNearbyLocation, toggleRadioGarden, toggleSkipBrokenStreams }) {
+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 }) {
     useEffect(() => {
         const onData = (data) => {
             const rawInput = String(data);
@@ -93,6 +94,11 @@ export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, be
                 setCommandMode(false);
                 return;
             }
+            if (key.tab) {
+                // Complete the command name only while still typing it (no args yet).
+                setCommandText(value => (/\s/.test(value) ? value : completeCommand(value)));
+                return;
+            }
             if (isEditableInput(input, key)) {
                 setCommandText(value => applyTextInput(value, input, key));
             }
@@ -132,6 +138,22 @@ export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, be
                 setEditingSearch(false);
                 return;
             }
+            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)) {
                 setSearchQuery(value => applyTextInput(value, input, key));
                 setEditingSearch(true);
@@ -175,6 +197,10 @@ export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, be
             shutdown();
             return;
         }
+        if (input === '?') {
+            go(screen === 'help' ? 'home' : 'help');
+            return;
+        }
         if (input.startsWith(':')) {
             const seed = input.slice(1).replace(/[\r\n]+$/g, '');
             if (/[\r\n]/.test(input)) {
@@ -301,6 +327,14 @@ export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, be
             toggleFavorite(favoriteTarget(screen, selectedStation, playingStation));
             return;
         }
+        if (input === 'O') {
+            openStationHomepage(favoriteTarget(screen, selectedStation, playingStation));
+            return;
+        }
+        if (input === 'y') {
+            void copyStationUrl(favoriteTarget(screen, selectedStation, playingStation));
+            return;
+        }
         if (input === ' ') {
             togglePause();
             return;
@@ -376,6 +410,18 @@ export function useAppInput({ adjustVolume, airPlayCode, canEnterAirPlayCode, be
                 else if (item === 'Toggle skip broken streams') {
                     toggleSkipBrokenStreams();
                 }
+                else if (item === 'Resume last station on launch') {
+                    toggleSetting('resumeOnLaunch');
+                }
+                else if (item === 'Transparent background') {
+                    toggleSetting('transparentBackground');
+                }
+                else if (item === 'ASCII-safe display') {
+                    toggleSetting('asciiMode');
+                }
+                else if (item === 'Reduce motion') {
+                    toggleSetting('reduceMotion');
+                }
                 else if (item === 'Refresh provider health') {
                     refreshProviderHealth();
                     setMessage('Provider health refreshed.');