hn-bits 0.3.0 → 0.4.0

package/README.md

@@ -19,7 +19,7 @@ A fullscreen terminal client for Hacker News, built with TypeScript + Ink. Optio
 - Fullscreen TUI: top/new/best/ask/show/saved/subs tabs, vim-style navigation
 - Threaded comments view with fold/collapse
 - Search across stories
-- 6 built-in themes (`hn`, `mocha`, `dracula`, `tokyo`, `nord`, `gruvbox`)
+- 7 built-in themes (`hn`, `mocha`, `dracula`, `tokyo`, `nord`, `gruvbox`, `concord`)
 - Local AI article/thread summaries via Ollama, no cloud calls
 - Ask AI: multi-turn Q&A grounded in the current story
 - Subscriptions + `hn watch --once` radar with Telegram notifications
@@ -53,7 +53,7 @@ hn                    # fullscreen shell: top/new/best/ask/show/saved/subs tabs
 hn search <query...>  # search results
 hn bookmarks          # opens straight into the saved tab
 hn subs               # opens straight into the subs tab
-hn --theme dracula    # themes: hn (default), mocha, dracula, tokyo, nord, gruvbox
+hn --theme dracula    # themes: hn (default), mocha, dracula, tokyo, nord, gruvbox, concord
 ```
 
 Press `?` from any view for the full keybinding help overlay.
@@ -128,7 +128,7 @@ Sensitive values (e.g. `telegram.botToken`) print masked in `list` but raw from
 
 ### Themes
 
-`hn`, `mocha`, `dracula`, `tokyo`, `nord`, `gruvbox` (default: `hn`, HN-orange). Pick with `--theme <name>` or the `HN_THEME` env var; not persisted (no config file yet).
+`hn`, `mocha`, `dracula`, `tokyo`, `nord`, `gruvbox`, `concord` (default: `hn`, HN-orange). Pick with `--theme <name>`, the `HN_THEME` env var, `hn config set ui.theme <name>`, or press `T` in the TUI to switch live and persist the choice. Precedence: flag > env > config > default. `hn theme` shows the active theme and where it came from.
 
 ### Keybindings
 

package/dist/index.js

@@ -46,11 +46,16 @@ program
     .command('theme')
     .description('Show the active color theme and available palettes')
     .action(async () => {
-    const { paletteNames, resolvePaletteName } = await import('./ui/theme.js');
-    const activeName = resolvePaletteName(program.opts().theme);
-    console.log(`Active theme: ${activeName}`);
-    console.log(`Available: ${paletteNames().join(', ')}`);
-    console.log('Set with `hn --theme <name>` or the HN_THEME environment variable.');
+    const { paletteNames, resolvePaletteName, resolvePaletteSource } = await import('./ui/theme.js');
+    const flag = program.opts().theme;
+    const activeName = resolvePaletteName(flag);
+    const source = resolvePaletteSource(flag);
+    const sourceLabel = source === 'default' ? '(default)' : `(from ${source})`;
+    console.log(`Active theme: ${activeName} ${sourceLabel}`);
+    console.log(`Available: ${paletteNames()
+        .map((n) => (n === 'hn' ? `${n} (default)` : n))
+        .join(', ')}`);
+    console.log('Set with `hn --theme <name>`, the HN_THEME environment variable, or `hn config set ui.theme <name>`.');
 });
 const config = program.command('config').description('Get or set hn-bits config values');
 config

package/dist/lib/config.js

@@ -43,6 +43,7 @@ export function loadConfig() {
                 enabled: parsed.desktopNotifications.enabled,
                 timeoutSeconds: parsed.desktopNotifications.timeoutSeconds ?? 10,
             },
+            ui: parsed.ui,
         };
     }
     catch (err) {

package/dist/lib/configKeys.js

@@ -1,3 +1,10 @@
+import { paletteNames } from '../ui/theme.js';
+function validateTheme(raw) {
+    const names = paletteNames();
+    if (!names.includes(raw)) {
+        throw new Error(`unknown theme '${raw}' (valid: ${names.join(', ')})`);
+    }
+}
 export const CONFIG_KEYS = {
     'ollama.host': { path: ['ollama', 'host'], type: 'string' },
     'ollama.model': { path: ['ollama', 'model'], type: 'string' },
@@ -6,9 +13,11 @@ export const CONFIG_KEYS = {
     'telegram.chatId': { path: ['telegram', 'chatId'], type: 'string' },
     'desktopNotifications.enabled': { path: ['desktopNotifications', 'enabled'], type: 'boolean' },
     'desktopNotifications.timeoutSeconds': { path: ['desktopNotifications', 'timeoutSeconds'], type: 'number' },
+    'ui.theme': { path: ['ui', 'theme'], type: 'string', validate: validateTheme },
 };
 /** Coerces a CLI string argument to the key's declared type. Throws on invalid input. */
 export function parseValue(def, raw) {
+    def.validate?.(raw);
     if (def.type === 'boolean') {
         if (raw !== 'true' && raw !== 'false')
             throw new Error(`expected 'true' or 'false', got '${raw}'`);

package/dist/ui/App.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useApp, useInput } from 'ink';
 import { loadConfig } from '../lib/config.js';
+import { setConfigValue } from '../lib/configStore.js';
 import { nextTab, previousTab } from '../lib/listNavigation.js';
 import { AskAI } from './AskAI.js';
 import { Comments } from './Comments.js';
 import { HelpOverlay } from './HelpOverlay.js';
-import { COMMENTS_KEYS, LIST_KEYS, SAVED_KEYS, SEARCH_RESULTS_KEYS, SUB_MATCHES_KEYS, SUBS_KEYS, footerHint, } from './keymap.js';
+import { COMMENTS_KEYS, LIST_KEYS, SAVED_KEYS, SEARCH_RESULTS_KEYS, SUB_MATCHES_KEYS, SUBS_KEYS, THEME_PICKER_KEYS, footerHint, } from './keymap.js';
 import { Body, Footer, Header, Screen } from './Layout.js';
 import { SavedList } from './SavedList.js';
 import { SearchInput } from './SearchInput.js';
@@ -16,6 +17,8 @@ import { SubscriptionForm } from './SubscriptionForm.js';
 import { SubscriptionMatches } from './SubscriptionMatches.js';
 import { SubscriptionsView } from './SubscriptionsView.js';
 import { TabBar } from './TabBar.js';
+import { ThemePicker } from './ThemePicker.js';
+import { resolvePaletteName, resolveTheme, ThemeContext } from './theme.js';
 export function App({ initialQuery, initialView }) {
     const [feed, setFeed] = useState('top');
     const [view, setView] = useState(initialQuery
@@ -27,8 +30,13 @@ export function App({ initialQuery, initialView }) {
                 : { name: 'list' });
     const [helpOpen, setHelpOpen] = useState(false);
     const [config] = useState(loadConfig);
+    const [paletteName, setPaletteName] = useState(() => resolvePaletteName());
+    const [themePickerOpen, setThemePickerOpen] = useState(false);
+    const activeTheme = resolveTheme(paletteName);
     const { exit } = useApp();
     useInput((input) => {
+        if (themePickerOpen)
+            return;
         if (helpOpen)
             return setHelpOpen(false);
         if (view.name === 'search-input' || view.name === 'ask' || view.name === 'sub-form')
@@ -37,7 +45,14 @@ export function App({ initialQuery, initialView }) {
             return exit();
         if (input === '?')
             return setHelpOpen(true);
+        if (input === 'T')
+            return setThemePickerOpen(true);
     });
+    function handleThemeSelected(name) {
+        setConfigValue('ui.theme', name);
+        setPaletteName(name);
+        setThemePickerOpen(false);
+    }
     function changeFeed(target) {
         setFeed(target);
         setView({ name: 'list' });
@@ -52,7 +67,7 @@ export function App({ initialQuery, initialView }) {
     }
     const activeTab = tabForView(view) ?? feed;
     const ctx = { feed, config, setFeed: changeFeed, setTab: changeTab, setView, exit };
-    return (_jsxs(Screen, { children: [_jsx(Header, { children: _jsx(TabBar, { active: activeTab }) }), _jsx(Body, { children: helpOpen ? _jsx(HelpOverlay, { ...helpFor(view) }) : renderBody(view, ctx) }), _jsx(Footer, { children: renderFooter(view, ctx) })] }));
+    return (_jsx(ThemeContext.Provider, { value: activeTheme, children: _jsxs(Screen, { children: [_jsx(Header, { children: _jsx(TabBar, { active: activeTab }) }), _jsx(Body, { children: themePickerOpen ? (_jsx(ThemePicker, { current: paletteName, onSelect: handleThemeSelected, onCancel: () => setThemePickerOpen(false) })) : helpOpen ? (_jsx(HelpOverlay, { ...helpFor(view) })) : (renderBody(view, ctx)) }), _jsx(Footer, { children: themePickerOpen ? footerHint(THEME_PICKER_KEYS) : renderFooter(view, ctx) })] }) }));
 }
 /** Traces returnTo chains back to the tab a nested view (comments/ask/sub-form) was opened from. */
 function tabForView(view) {

package/dist/ui/AskAI.js

@@ -10,7 +10,7 @@ import { truncateTitle } from '../lib/format.js';
 import { htmlToText } from '../lib/html.js';
 import { wrapPlainText } from '../lib/viewport.js';
 import { HEADER_ROWS } from './Layout.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 async function resolveArticle(story) {
     if (story.url) {
         try {
@@ -25,6 +25,7 @@ async function resolveArticle(story) {
     return { article: null, reason: 'text post' };
 }
 export function AskAI({ story, comments, config, onBack }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const [status, setStatus] = useState(config ? 'preparing' : 'hint');
     const [unavailableDetail, setUnavailableDetail] = useState('');

package/dist/ui/Comments.js

@@ -16,7 +16,7 @@ import { COMMENTS_KEYS, footerRows } from './keymap.js';
 import { HEADER_ROWS } from './Layout.js';
 import { LoadingIndicator } from './LoadingIndicator.js';
 import { SummaryPanel } from './SummaryPanel.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 import { useFlash } from './useFlash.js';
 const HEADER_BORDER_LINES = 2;
 // borderStyle (2 cols) + paddingX (2 cols) eaten from the card's interior width.
@@ -32,6 +32,7 @@ export function commentsHeaderLines(story, columns) {
     return HEADER_BORDER_LINES + titleLines + 1 + urlLines;
 }
 export function Comments({ story, config, onBack, onAskAI }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const headerLines = commentsHeaderLines(story, columns);
     const viewportLines = Math.max(1, rows - HEADER_ROWS - footerRows(COMMENTS_KEYS, columns) - headerLines);
@@ -67,7 +68,7 @@ export function Comments({ story, config, onBack, onAskAI }) {
         }
     }
     const flat = useMemo(() => flattenTree(comments, folded, headerOnly), [comments, folded, headerOnly]);
-    const rowsData = useMemo(() => flat.map((entry) => buildRow(entry, columns)), [flat, columns]);
+    const rowsData = useMemo(() => flat.map((entry) => buildRow(entry, columns, theme)), [flat, columns, theme]);
     const clampedSelected = clampSelection(selected, 0, flat.length);
     function openStory() {
         void open(story.url ?? hnItemUrl(story.id));
@@ -145,6 +146,7 @@ export function Comments({ story, config, onBack, onAskAI }) {
             }), summaryOpen && (_jsx(SummaryPanel, { config: config, buildPrompt: () => Promise.resolve(buildCommentsSummaryPrompt(story, comments)), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
 }
 function CommentsHeader({ story }) {
+    const theme = useTheme();
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.accent, paddingX: 1, children: [_jsx(Text, { bold: true, color: theme.colors.title, children: story.title }), _jsxs(Text, { dimColor: true, children: [theme.glyphs.upvote, " ", story.score, " points by ", story.by, " ", formatAge(story.time), " | ", story.descendants, ' ', "comments"] }), story.url && _jsx(Text, { color: theme.colors.accent, children: story.url })] }));
 }
 function replyBadge(entry) {
@@ -154,7 +156,7 @@ function replyBadge(entry) {
         return `[${entry.descendantCount} more]`;
     return entry.descendantCount === 1 ? '1 reply' : `${entry.descendantCount} replies`;
 }
-function buildHeaderSpans(entry) {
+function buildHeaderSpans(entry, theme) {
     const glyph = entry.headerOnly ? theme.glyphs.foldClosed : theme.glyphs.foldOpen;
     const badge = replyBadge(entry);
     const spans = [
@@ -166,24 +168,24 @@ function buildHeaderSpans(entry) {
         spans.push({ text: ` | ${badge}`, color: theme.colors.muted });
     return spans;
 }
-function tokenToSpan(token) {
+function tokenToSpan(token, theme) {
     if (token.kind === 'link')
         return { text: token.text, color: theme.colors.link, underline: true };
     if (token.kind === 'email')
         return { text: token.text, color: theme.colors.email, bold: true };
     return { text: token.text };
 }
-function buildRow(entry, columns) {
+function buildRow(entry, columns, theme) {
     // Reserve 2 columns for the selection bar so wrapping doesn't shift when selection moves,
     // plus 1 trailing column: a line that exactly fills the terminal width triggers a VT100
     // delayed-wrap that drops the selection bar/stripe from the following line.
     const width = Math.max(1, columns - 1 - entry.depth * 2 - ROW_BORDER_WIDTH);
-    const header = { kind: 'header', spans: buildHeaderSpans(entry) };
+    const header = { kind: 'header', spans: buildHeaderSpans(entry, theme) };
     const body = entry.headerOnly
         ? []
         : wrapPlainText(htmlToText(entry.node.text), width).map((line) => ({
             kind: 'body',
-            spans: tokenizeContacts(line).map(tokenToSpan),
+            spans: tokenizeContacts(line).map((token) => tokenToSpan(token, theme)),
         }));
     return { id: entry.node.id, depth: entry.depth, width, lines: [header, ...body] };
 }
@@ -191,6 +193,7 @@ function spanLength(spans) {
     return spans.reduce((sum, span) => sum + span.text.length, 0);
 }
 function CommentRowView({ depth, width, lines, isSelected }) {
+    const theme = useTheme();
     const background = isSelected ? theme.colors.selectionBackground : undefined;
     const prefix = isSelected ? `${SELECTION_BAR} ` : '  ';
     const rowWidth = width + ROW_BORDER_WIDTH;

package/dist/ui/HelpOverlay.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { GLOBAL_KEYS } from './keymap.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 export function HelpOverlay({ title, keys }) {
+    const theme = useTheme();
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.colors.title, children: title }), keys.map((binding) => (_jsx(KeyRow, { binding: binding }, binding.key))), _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.title, children: "global" }), GLOBAL_KEYS.map((binding) => (_jsx(KeyRow, { binding: binding }, binding.key))), _jsx(Text, { dimColor: true, children: "any key closes" })] }));
 }
 function KeyRow({ binding }) {

package/dist/ui/Layout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text, useWindowSize } from 'ink';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 const MIN_ROWS = 8;
 export const HEADER_ROWS = 3;
 export function Screen({ children }) {
@@ -17,5 +17,6 @@ export function Body({ children }) {
     return (_jsx(Box, { flexGrow: 1, overflowY: "hidden", flexDirection: "column", children: children }));
 }
 export function Footer({ children }) {
+    const theme = useTheme();
     return (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: theme.colors.muted, children: children }) }));
 }

package/dist/ui/LoadingIndicator.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text } from 'ink';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const FRAME_INTERVAL_MS = 80;
 export function LoadingIndicator({ label }) {
+    const theme = useTheme();
     const [frame, setFrame] = useState(0);
     useEffect(() => {
         const id = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), FRAME_INTERVAL_MS);

package/dist/ui/SearchResults.js

@@ -14,11 +14,12 @@ import { LoadingIndicator } from './LoadingIndicator.js';
 import { STORY_ROW_HEIGHT } from './StoryRow.js';
 import { StoryListView } from './StoryListView.js';
 import { SummaryPanel } from './SummaryPanel.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 import { useFlash } from './useFlash.js';
 const FETCH_THRESHOLD = 10;
 const HEADER_LINES = 1;
 export function SearchResults({ query, config, onSelectStory, onExit, onSearchAgain, onAskAI, onSubscribe, }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SEARCH_RESULTS_KEYS, columns) - HEADER_LINES);
     const [stories, setStories] = useState([]);

package/dist/ui/StoryList.js

@@ -13,11 +13,12 @@ import { LoadingIndicator } from './LoadingIndicator.js';
 import { STORY_ROW_HEIGHT } from './StoryRow.js';
 import { StoryListView } from './StoryListView.js';
 import { SummaryPanel } from './SummaryPanel.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 import { useFlash } from './useFlash.js';
 const BATCH_SIZE = 30;
 const FETCH_THRESHOLD = 10;
 export function StoryList({ feed, config, onFeedChange, onTabChange, onSelectStory, onSearchRequested, onAskAI, }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(LIST_KEYS, columns));
     const [storyIds, setStoryIds] = useState([]);

package/dist/ui/StoryRow.js

@@ -3,7 +3,7 @@ import { Box, Text } from 'ink';
 import { isBookmarked } from '../db/bookmarks.js';
 import { formatAge, truncateTitle } from '../lib/format.js';
 import { getHostname } from '../lib/url.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 export const STORY_ROW_HEIGHT = 3;
 function fillPad(isSelected, safeWidth, usedLength) {
     return isSelected ? ' '.repeat(Math.max(0, safeWidth - usedLength)) : '';
@@ -12,6 +12,7 @@ function metaText(story) {
     return `${story.score} points by ${story.by} ${formatAge(story.time)} ago | ${story.descendants} comments`;
 }
 export function StoryRow({ story, rank, rankWidth, isSelected, width, showMeta = true, showSeparator = true, }) {
+    const theme = useTheme();
     // Never let a line's content reach the literal terminal edge: a line that exactly
     // fills the width triggers a VT100 delayed-wrap that corrupts Ink's cursor position
     // for the row below it.

package/dist/ui/SubscriptionForm.js

@@ -4,7 +4,7 @@ import { Box, Text, useInput, useWindowSize } from 'ink';
 import { searchRecent } from '../api/algolia.js';
 import { addSubscription, updateSubscription } from '../db/subscriptions.js';
 import { truncateTitle } from '../lib/format.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 const PREVIEW_DEBOUNCE_MS = 300;
 const PREVIEW_WINDOW_DAYS = 7;
 const PREVIEW_LIMIT = 5;
@@ -13,6 +13,7 @@ function windowStart() {
     return Math.floor(Date.now() / 1000) - PREVIEW_WINDOW_DAYS * 24 * 60 * 60;
 }
 export function SubscriptionForm({ mode, subscription, prefillQuery, onSave, onCancel, }) {
+    const theme = useTheme();
     const { columns } = useWindowSize();
     const [name, setName] = useState(subscription?.name ?? '');
     const [query, setQuery] = useState(subscription?.query ?? prefillQuery ?? '');

package/dist/ui/SubscriptionMatches.js

@@ -14,7 +14,7 @@ import { LoadingIndicator } from './LoadingIndicator.js';
 import { STORY_ROW_HEIGHT } from './StoryRow.js';
 import { StoryListView } from './StoryListView.js';
 import { SummaryPanel } from './SummaryPanel.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 import { useFlash } from './useFlash.js';
 const WINDOW_DAYS = 7;
 const HEADER_LINES = 1;
@@ -22,6 +22,7 @@ function windowStart() {
     return Math.floor(Date.now() / 1000) - WINDOW_DAYS * 24 * 60 * 60;
 }
 export function SubscriptionMatches({ subscription, config, onSelectStory, onBack, onAskAI, }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SUB_MATCHES_KEYS, columns) - HEADER_LINES);
     const [stories, setStories] = useState([]);

package/dist/ui/SubscriptionsView.js

@@ -7,11 +7,12 @@ import { clampSelection, mapFeedKey } from '../lib/listNavigation.js';
 import { ensureVisibleLines, sliceByLines } from '../lib/viewport.js';
 import { footerRows, SUBS_KEYS } from './keymap.js';
 import { HEADER_ROWS } from './Layout.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 function pointsLabel(minPoints) {
     return minPoints === 0 ? 'any' : `≥${minPoints} pts`;
 }
 export function SubscriptionsView({ onSelectMatches, onAdd, onEdit, onFeedChange, onTabChange, }) {
+    const theme = useTheme();
     const { columns, rows } = useWindowSize();
     const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SUBS_KEYS, columns));
     const [subs, setSubs] = useState(() => listSubscriptions());

package/dist/ui/SummaryPanel.js

@@ -4,9 +4,10 @@ import { Box, Text, useInput } from 'ink';
 import { chatStream, describeError } from '../ai/ollama.js';
 import { AI_SETUP_HINT_LINES } from '../lib/config.js';
 import { wrapPlainText } from '../lib/viewport.js';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 const SYSTEM_PROMPT = 'You are a concise assistant summarizing Hacker News content. Plain text only, no markdown headers. Max ~150 words.';
 export function SummaryPanel({ config, buildPrompt, height, width, onClose }) {
+    const theme = useTheme();
     const [status, setStatus] = useState(config ? 'preparing' : 'setup-hint');
     const [content, setContent] = useState('');
     const [notice, setNotice] = useState('');

package/dist/ui/TabBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useWindowSize } from 'ink';
-import { theme } from './theme.js';
+import { useTheme } from './theme.js';
 const TABS = [
     { id: 'top', label: 'Top' },
     { id: 'new', label: 'New' },
@@ -71,11 +71,12 @@ function buildBottomRuleSegments(columns, wallColumn, innerWidth) {
     const line = base.slice(0, wallColumn) + notch + base.slice(wallColumn + notch.length);
     return [{ text: line, color: 'accent' }];
 }
-function segmentColor(color) {
+function segmentColor(color, theme) {
     return color === 'accent' ? theme.colors.accent : theme.colors.muted;
 }
 function SegmentRow({ segments }) {
-    return (_jsx(Box, { children: segments.map((segment, index) => (_jsx(Text, { bold: segment.bold, color: segmentColor(segment.color), children: segment.text }, index))) }));
+    const theme = useTheme();
+    return (_jsx(Box, { children: segments.map((segment, index) => (_jsx(Text, { bold: segment.bold, color: segmentColor(segment.color, theme), children: segment.text }, index))) }));
 }
 export function TabBar({ active }) {
     const { columns } = useWindowSize();

package/dist/ui/ThemePicker.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { clampSelection } from '../lib/listNavigation.js';
+import { paletteNames, useTheme } from './theme.js';
+export function ThemePicker({ current, onSelect, onCancel }) {
+    const theme = useTheme();
+    const names = paletteNames();
+    const [selected, setSelected] = useState(() => Math.max(0, names.indexOf(current)));
+    function handleInput(input, key) {
+        if (key.escape)
+            return onCancel();
+        if (input === 'j' || key.downArrow)
+            return setSelected((s) => clampSelection(s, 1, names.length));
+        if (input === 'k' || key.upArrow)
+            return setSelected((s) => clampSelection(s, -1, names.length));
+        if (key.return)
+            return onSelect(names[selected]);
+    }
+    useInput(handleInput);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.colors.title, children: "theme" }), names.map((name, index) => {
+                const isSelected = index === selected;
+                const marker = isSelected ? theme.glyphs.selection : ' ';
+                const background = isSelected ? theme.colors.selectionBackground : undefined;
+                const suffix = name === current ? ' (current)' : '';
+                return (_jsxs(Text, { backgroundColor: background, children: [marker, " ", name, suffix] }, name));
+            })] }));
+}

package/dist/ui/keymap.js

@@ -2,6 +2,7 @@ import { wrapPlainText } from '../lib/viewport.js';
 export const GLOBAL_KEYS = [
     { key: 'q', label: 'quit' },
     { key: '?', label: 'help' },
+    { key: 'T', label: 'theme' },
 ];
 export const LIST_KEYS = [
     { key: 'j/k', label: 'move' },
@@ -65,6 +66,11 @@ export const SUB_FORM_KEYS = [
     { key: 'enter', label: 'save' },
     { key: 'esc', label: 'cancel' },
 ];
+export const THEME_PICKER_KEYS = [
+    { key: 'j/k', label: 'move' },
+    { key: 'enter', label: 'apply' },
+    { key: 'esc', label: 'cancel' },
+];
 export const SAVED_KEYS = [
     { key: 'j/k', label: 'move' },
     { key: '←/→', label: 'tab' },

package/dist/ui/theme.js

@@ -1,3 +1,5 @@
+import { createContext, useContext } from 'react';
+import { loadConfig } from '../lib/config.js';
 const glyphs = {
     selection: '❯',
     foldOpen: '▾',
@@ -81,6 +83,18 @@ const palettes = {
         link: LINK,
         email: EMAIL,
     },
+    // Ported from chojs23/concord's ratatui color constants (src/tui/ui/types.rs, message/format.rs).
+    concord: {
+        accent: ansi256(44),
+        title: ansi256(255),
+        muted: ansi256(243),
+        error: ansi256(196),
+        score: ansi256(208),
+        comment: ansi256(80),
+        selectionBackground: SELECTION_BACKGROUND,
+        link: LINK,
+        email: EMAIL,
+    },
 };
 const DEFAULT_PALETTE = 'hn';
 export function paletteNames() {
@@ -89,11 +103,32 @@ export function paletteNames() {
 function isPaletteName(name) {
     return name in palettes;
 }
+/** First defined candidate across flag > HN_THEME env > ui.theme config, with where it came from. */
+function candidatePaletteName(name) {
+    if (name !== undefined)
+        return { raw: name, source: 'flag' };
+    const env = process.env['HN_THEME'];
+    if (env !== undefined)
+        return { raw: env, source: 'env' };
+    const configured = loadConfig()?.ui?.theme;
+    if (configured !== undefined)
+        return { raw: configured, source: 'config' };
+    return { source: 'default' };
+}
 export function resolvePaletteName(name) {
-    const candidate = name ?? process.env['HN_THEME'] ?? DEFAULT_PALETTE;
-    return isPaletteName(candidate) ? candidate : DEFAULT_PALETTE;
+    const { raw } = candidatePaletteName(name);
+    return raw !== undefined && isPaletteName(raw) ? raw : DEFAULT_PALETTE;
+}
+/** Where the active theme choice came from, for `hn theme`'s status line. */
+export function resolvePaletteSource(name) {
+    const { raw, source } = candidatePaletteName(name);
+    return raw !== undefined && isPaletteName(raw) ? source : 'default';
 }
 export function resolveTheme(name) {
     return { colors: palettes[resolvePaletteName(name)], glyphs };
 }
 export const theme = resolveTheme();
+export const ThemeContext = createContext(theme);
+export function useTheme() {
+    return useContext(ThemeContext);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hn-bits",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Terminal-first Hacker News client",
   "type": "module",
   "repository": {