hn-bits 0.2.0 → 0.3.0

package/dist/ui/App.js

@@ -2,37 +2,79 @@ 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 { 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, SEARCH_RESULTS_KEYS, footerHint } from './keymap.js';
+import { COMMENTS_KEYS, LIST_KEYS, SAVED_KEYS, SEARCH_RESULTS_KEYS, SUB_MATCHES_KEYS, SUBS_KEYS, footerHint, } from './keymap.js';
 import { Body, Footer, Header, Screen } from './Layout.js';
+import { SavedList } from './SavedList.js';
 import { SearchInput } from './SearchInput.js';
 import { SearchResults } from './SearchResults.js';
 import { StoryList } from './StoryList.js';
+import { SubscriptionForm } from './SubscriptionForm.js';
+import { SubscriptionMatches } from './SubscriptionMatches.js';
+import { SubscriptionsView } from './SubscriptionsView.js';
 import { TabBar } from './TabBar.js';
-export function App({ initialQuery }) {
+export function App({ initialQuery, initialView }) {
     const [feed, setFeed] = useState('top');
-    const [view, setView] = useState(initialQuery ? { name: 'search', query: initialQuery, from: 'cli' } : { name: 'list' });
+    const [view, setView] = useState(initialQuery
+        ? { name: 'search', query: initialQuery, from: 'cli' }
+        : initialView === 'saved'
+            ? { name: 'saved' }
+            : initialView === 'subs'
+                ? { name: 'subs' }
+                : { name: 'list' });
     const [helpOpen, setHelpOpen] = useState(false);
     const [config] = useState(loadConfig);
     const { exit } = useApp();
     useInput((input) => {
         if (helpOpen)
             return setHelpOpen(false);
-        if (view.name === 'search-input' || view.name === 'ask')
+        if (view.name === 'search-input' || view.name === 'ask' || view.name === 'sub-form')
             return;
         if (input === 'q')
             return exit();
         if (input === '?')
             return setHelpOpen(true);
     });
-    const ctx = { feed, config, setFeed, setView, exit };
-    return (_jsxs(Screen, { children: [_jsx(Header, { children: _jsx(TabBar, { active: feed }) }), _jsx(Body, { children: helpOpen ? _jsx(HelpOverlay, { ...helpFor(view) }) : renderBody(view, ctx) }), _jsx(Footer, { children: renderFooter(view, ctx) })] }));
+    function changeFeed(target) {
+        setFeed(target);
+        setView({ name: 'list' });
+    }
+    function changeTab(direction) {
+        const next = direction === 1 ? nextTab(activeTab) : previousTab(activeTab);
+        if (next === 'saved')
+            return setView({ name: 'saved' });
+        if (next === 'subs')
+            return setView({ name: 'subs' });
+        changeFeed(next);
+    }
+    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) })] }));
+}
+/** Traces returnTo chains back to the tab a nested view (comments/ask/sub-form) was opened from. */
+function tabForView(view) {
+    if (view.name === 'saved' || view.name === 'subs')
+        return view.name;
+    if (view.name === 'sub-matches')
+        return 'subs';
+    if (view.name === 'comments' || view.name === 'ask' || view.name === 'sub-form')
+        return tabForView(view.returnTo);
+    return null;
 }
 function renderBody(view, ctx) {
     if (view.name === 'list')
         return renderList(ctx);
+    if (view.name === 'saved')
+        return renderSaved(ctx);
+    if (view.name === 'subs')
+        return renderSubs(ctx);
+    if (view.name === 'sub-matches')
+        return renderSubMatches(view, ctx);
+    if (view.name === 'sub-form')
+        return renderSubForm(view, ctx);
     if (view.name === 'search')
         return renderSearch(view, ctx);
     if (view.name === 'search-input')
@@ -45,10 +87,16 @@ function renderFooter(view, ctx) {
     if (view.name === 'search-input') {
         return (_jsx(SearchInput, { onSubmit: (query) => ctx.setView({ name: 'search', query, from: view.from }), onCancel: () => ctx.setView({ name: 'list' }) }));
     }
-    if (view.name === 'ask')
+    if (view.name === 'ask' || view.name === 'sub-form')
         return null;
     if (view.name === 'list')
         return footerHint(LIST_KEYS);
+    if (view.name === 'saved')
+        return footerHint(SAVED_KEYS);
+    if (view.name === 'subs')
+        return footerHint(SUBS_KEYS);
+    if (view.name === 'sub-matches')
+        return footerHint(SUB_MATCHES_KEYS);
     if (view.name === 'comments')
         return footerHint(COMMENTS_KEYS);
     return footerHint(SEARCH_RESULTS_KEYS);
@@ -58,14 +106,33 @@ function helpFor(view) {
         return { title: 'comments', keys: COMMENTS_KEYS };
     if (view.name === 'search')
         return { title: 'search results', keys: SEARCH_RESULTS_KEYS };
+    if (view.name === 'saved')
+        return { title: 'saved', keys: SAVED_KEYS };
+    if (view.name === 'subs')
+        return { title: 'subs', keys: SUBS_KEYS };
+    if (view.name === 'sub-matches')
+        return { title: 'sub matches', keys: SUB_MATCHES_KEYS };
     return { title: 'story list', keys: LIST_KEYS };
 }
-function renderList({ feed, config, setFeed, setView }) {
-    return (_jsx(StoryList, { feed: feed, config: config, onFeedChange: setFeed, onSelectStory: (story) => setView({ name: 'comments', story, returnTo: { name: 'list' } }), onSearchRequested: () => setView({ name: 'search-input', from: 'tui' }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo: { name: 'list' } }) }));
+function renderList({ feed, config, setFeed, setTab, setView }) {
+    return (_jsx(StoryList, { feed: feed, config: config, onFeedChange: setFeed, onTabChange: setTab, onSelectStory: (story) => setView({ name: 'comments', story, returnTo: { name: 'list' } }), onSearchRequested: () => setView({ name: 'search-input', from: 'tui' }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo: { name: 'list' } }) }));
+}
+function renderSaved({ config, setFeed, setTab, setView }) {
+    return (_jsx(SavedList, { config: config, onFeedChange: setFeed, onTabChange: setTab, onSelectStory: (story) => setView({ name: 'comments', story, returnTo: { name: 'saved' } }), onSearchRequested: () => setView({ name: 'search-input', from: 'tui' }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo: { name: 'saved' } }) }));
+}
+function renderSubs({ setFeed, setTab, setView }) {
+    return (_jsx(SubscriptionsView, { onSelectMatches: (subscription) => setView({ name: 'sub-matches', subscription }), onAdd: () => setView({ name: 'sub-form', mode: 'add', returnTo: { name: 'subs' } }), onEdit: (subscription) => setView({ name: 'sub-form', mode: 'edit', subscription, returnTo: { name: 'subs' } }), onFeedChange: setFeed, onTabChange: setTab }));
+}
+function renderSubMatches(view, { config, setView }) {
+    const returnTo = { name: 'sub-matches', subscription: view.subscription };
+    return (_jsx(SubscriptionMatches, { subscription: view.subscription, config: config, onSelectStory: (story) => setView({ name: 'comments', story, returnTo }), onBack: () => setView({ name: 'subs' }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo }) }));
+}
+function renderSubForm(view, { setView }) {
+    return (_jsx(SubscriptionForm, { mode: view.mode, subscription: view.subscription, prefillQuery: view.prefillQuery, onSave: () => setView(view.returnTo), onCancel: () => setView(view.returnTo) }));
 }
 function renderSearch(view, { config, setView, exit }) {
     const returnTo = { name: 'search', query: view.query, from: view.from };
-    return (_jsx(SearchResults, { query: view.query, config: config, onSelectStory: (story) => setView({ name: 'comments', story, returnTo }), onExit: () => (view.from === 'tui' ? setView({ name: 'list' }) : exit()), onSearchAgain: () => setView({ name: 'search-input', from: view.from }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo }) }));
+    return (_jsx(SearchResults, { query: view.query, config: config, onSelectStory: (story) => setView({ name: 'comments', story, returnTo }), onExit: () => (view.from === 'tui' ? setView({ name: 'list' }) : exit()), onSearchAgain: () => setView({ name: 'search-input', from: view.from }), onAskAI: (story) => setView({ name: 'ask', story, comments: null, returnTo }), onSubscribe: () => setView({ name: 'sub-form', mode: 'add', prefillQuery: view.query, returnTo }) }));
 }
 function renderComments(view, { config, setView }) {
     return (_jsx(Comments, { story: view.story, config: config, onBack: () => setView(view.returnTo), onAskAI: (comments) => setView({ name: 'ask', story: view.story, comments, returnTo: view }) }));

package/dist/ui/Comments.js

@@ -5,6 +5,7 @@ import open from 'open';
 import { buildCommentsSummaryPrompt } from '../ai/summaryPrompts.js';
 import { fetchComments } from '../api/algolia.js';
 import { hnItemUrl } from '../api/firebase.js';
+import { toggleBookmark } from '../db/bookmarks.js';
 import { collapseAll, flattenTree, headerOnlyAll, rehideRevealed, revealHeaderOnly, toggleFold, } from '../lib/commentTree.js';
 import { tokenizeContacts } from '../lib/contactHighlight.js';
 import { formatAge } from '../lib/format.js';
@@ -16,6 +17,7 @@ import { HEADER_ROWS } from './Layout.js';
 import { LoadingIndicator } from './LoadingIndicator.js';
 import { SummaryPanel } from './SummaryPanel.js';
 import { theme } 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.
 const HEADER_FRAME_WIDTH = 4;
@@ -43,6 +45,7 @@ export function Comments({ story, config, onBack, onAskAI }) {
     });
     const [selected, setSelected] = useState(0);
     const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
     const pendingTopJump = useRef(false);
     const topLineRef = useRef(0);
     const { folded, headerOnly, revealed } = fold;
@@ -119,6 +122,8 @@ export function Comments({ story, config, onBack, onAskAI }) {
             return setSummaryOpen(true);
         if (input === 'a')
             return onAskAI(comments);
+        if (input === 'B')
+            return flash(toggleBookmark(story) ? 'bookmarked ✓' : 'bookmark removed');
     }
     useInput(handleInput, { isActive: !summaryOpen });
     if (status === 'loading')
@@ -126,12 +131,13 @@ export function Comments({ story, config, onBack, onAskAI }) {
     if (status === 'error')
         return _jsxs(Text, { color: theme.colors.error, children: [error, " (r to retry)"] });
     const panelHeight = summaryOpen ? Math.max(6, Math.floor(viewportLines / 2)) : 0;
-    const listViewportLines = Math.max(1, viewportLines - panelHeight);
+    const flashLineHeight = flashMessage ? 1 : 0;
+    const listViewportLines = Math.max(1, viewportLines - panelHeight - flashLineHeight);
     const heights = rowsData.map((row) => row.lines.length);
     const topLine = ensureVisibleLines(heights, clampedSelected, topLineRef.current, listViewportLines);
     topLineRef.current = topLine;
     const { first, last, clipTop, clipBottom } = sliceByLines(heights, topLine, listViewportLines);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(CommentsHeader, { story: story }), flat.length === 0 && _jsx(Text, { dimColor: true, children: "no comments yet" }), rowsData.slice(first, last + 1).map((row, i) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(CommentsHeader, { story: story }), flashMessage && _jsx(Text, { dimColor: true, children: flashMessage }), flat.length === 0 && _jsx(Text, { dimColor: true, children: "no comments yet" }), rowsData.slice(first, last + 1).map((row, i) => {
                 const rowIndex = first + i;
                 const start = rowIndex === first ? clipTop : 0;
                 const end = rowIndex === last ? row.lines.length - clipBottom : row.lines.length;

package/dist/ui/SavedList.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import open from 'open';
+import { buildListSummaryPrompt } from '../ai/summaryPrompts.js';
+import { hnItemUrl } from '../api/firebase.js';
+import { listBookmarks, toggleBookmark } from '../db/bookmarks.js';
+import { clampSelection, mapFeedKey } from '../lib/listNavigation.js';
+import { ensureVisibleLines } from '../lib/viewport.js';
+import { footerRows, SAVED_KEYS } from './keymap.js';
+import { HEADER_ROWS } from './Layout.js';
+import { STORY_ROW_HEIGHT } from './StoryRow.js';
+import { StoryListView } from './StoryListView.js';
+import { SummaryPanel } from './SummaryPanel.js';
+import { useFlash } from './useFlash.js';
+export function SavedList({ config, onSelectStory, onFeedChange, onTabChange, onSearchRequested, onAskAI, }) {
+    const { columns, rows } = useWindowSize();
+    const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SAVED_KEYS, columns));
+    const [stories, setStories] = useState(() => listBookmarks());
+    const [selected, setSelected] = useState(0);
+    const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
+    const pendingTopJump = useRef(false);
+    const topLineRef = useRef(0);
+    function reload() {
+        const next = listBookmarks();
+        setStories(next);
+        setSelected((s) => clampSelection(s, 0, next.length));
+    }
+    function openSelectedStory() {
+        const story = stories[selected];
+        if (story)
+            void open(story.url ?? hnItemUrl(story.id));
+    }
+    function removeSelectedBookmark() {
+        const story = stories[selected];
+        if (!story)
+            return;
+        toggleBookmark(story);
+        flash('bookmark removed');
+        reload();
+    }
+    function handleInput(input, key) {
+        const isG = input === 'g';
+        if (isG && pendingTopJump.current) {
+            pendingTopJump.current = false;
+            return setSelected(0);
+        }
+        pendingTopJump.current = isG;
+        const targetFeed = mapFeedKey(input);
+        if (targetFeed)
+            return onFeedChange(targetFeed);
+        if (key.leftArrow)
+            return onTabChange(-1);
+        if (key.rightArrow)
+            return onTabChange(1);
+        if (input === '/')
+            return onSearchRequested();
+        if (input === 'j' || key.downArrow)
+            return setSelected((s) => clampSelection(s, 1, stories.length));
+        if (input === 'k' || key.upArrow)
+            return setSelected((s) => clampSelection(s, -1, stories.length));
+        if (input === 'G')
+            return setSelected(Math.max(0, stories.length - 1));
+        if (input === 'o')
+            return openSelectedStory();
+        if (input === 'r')
+            return reload();
+        if (input === 'B' && stories[selected])
+            return removeSelectedBookmark();
+        if (input === 's' && stories[selected])
+            return setSummaryOpen(true);
+        if (input === 'a' && stories[selected])
+            return onAskAI(stories[selected]);
+        if (key.return && stories[selected])
+            return onSelectStory(stories[selected]);
+    }
+    useInput(handleInput, { isActive: !summaryOpen });
+    const panelHeight = summaryOpen ? Math.max(6, Math.floor(bodyHeight / 2)) : 0;
+    const statusLineHeight = flashMessage ? 1 : 0;
+    const listHeight = Math.max(1, bodyHeight - statusLineHeight - panelHeight);
+    const selectedStory = stories[selected];
+    if (stories.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "no bookmarks yet \u2014 press B on a story" }), flashMessage && _jsx(Text, { dimColor: true, children: flashMessage })] }));
+    }
+    const heights = stories.map(() => STORY_ROW_HEIGHT);
+    const topLine = ensureVisibleLines(heights, selected, topLineRef.current, listHeight);
+    topLineRef.current = topLine;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), flashMessage && _jsx(Text, { dimColor: true, children: flashMessage }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
+}

package/dist/ui/SearchResults.js

@@ -5,6 +5,7 @@ import open from 'open';
 import { buildListSummaryPrompt } from '../ai/summaryPrompts.js';
 import { searchStories } from '../api/algolia.js';
 import { hnItemUrl } from '../api/firebase.js';
+import { toggleBookmark } from '../db/bookmarks.js';
 import { clampSelection } from '../lib/listNavigation.js';
 import { ensureVisibleLines, shouldFetchMore } from '../lib/viewport.js';
 import { footerRows, SEARCH_RESULTS_KEYS } from './keymap.js';
@@ -14,9 +15,10 @@ import { STORY_ROW_HEIGHT } from './StoryRow.js';
 import { StoryListView } from './StoryListView.js';
 import { SummaryPanel } from './SummaryPanel.js';
 import { theme } 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, }) {
+export function SearchResults({ query, config, onSelectStory, onExit, onSearchAgain, onAskAI, onSubscribe, }) {
     const { columns, rows } = useWindowSize();
     const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SEARCH_RESULTS_KEYS, columns) - HEADER_LINES);
     const [stories, setStories] = useState([]);
@@ -27,6 +29,7 @@ export function SearchResults({ query, config, onSelectStory, onExit, onSearchAg
     const [loadingMore, setLoadingMore] = useState(false);
     const [error, setError] = useState('');
     const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
     const token = useRef(0);
     const nextPage = useRef(0);
     const topLineRef = useRef(0);
@@ -110,6 +113,10 @@ export function SearchResults({ query, config, onSelectStory, onExit, onSearchAg
             return setSummaryOpen(true);
         if (input === 'a' && stories[selected])
             return onAskAI(stories[selected]);
+        if (input === 'B' && stories[selected])
+            return flash(toggleBookmark(stories[selected]) ? 'bookmarked ✓' : 'bookmark removed');
+        if (input === 'S')
+            return onSubscribe();
         if (key.return && stories[selected])
             return onSelectStory(stories[selected]);
     }
@@ -119,10 +126,11 @@ export function SearchResults({ query, config, onSelectStory, onExit, onSearchAg
     if (status === 'error')
         return _jsxs(Text, { color: theme.colors.error, children: [error, " (r to retry)"] });
     const panelHeight = summaryOpen ? Math.max(6, Math.floor(bodyHeight / 2)) : 0;
-    const listHeight = Math.max(1, (loadingMore ? bodyHeight - 1 : bodyHeight) - panelHeight);
+    const statusLineHeight = loadingMore || flashMessage ? 1 : 0;
+    const listHeight = Math.max(1, bodyHeight - statusLineHeight - panelHeight);
     const heights = stories.map(() => STORY_ROW_HEIGHT);
     const topLine = ensureVisibleLines(heights, selected, topLineRef.current, listHeight);
     topLineRef.current = topLine;
     const selectedStory = stories[selected];
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["search: ", query, totalHits !== null ? `    ${totalHits} results` : ''] }), _jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), loadingMore && _jsx(Text, { dimColor: true, children: "loading more\u2026" }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["search: ", query, totalHits !== null ? `    ${totalHits} results` : ''] }), _jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), flashMessage ? _jsx(Text, { dimColor: true, children: flashMessage }) : loadingMore && _jsx(Text, { dimColor: true, children: "loading more\u2026" }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
 }

package/dist/ui/StoryList.js

@@ -4,7 +4,8 @@ import { Box, Text, useInput, useWindowSize } from 'ink';
 import open from 'open';
 import { buildListSummaryPrompt } from '../ai/summaryPrompts.js';
 import { fetchStories, fetchStoryIds, hnItemUrl } from '../api/firebase.js';
-import { clampSelection, mapFeedKey, nextFeed, previousFeed } from '../lib/listNavigation.js';
+import { toggleBookmark } from '../db/bookmarks.js';
+import { clampSelection, mapFeedKey } from '../lib/listNavigation.js';
 import { ensureVisibleLines, shouldFetchMore } from '../lib/viewport.js';
 import { footerRows, LIST_KEYS } from './keymap.js';
 import { HEADER_ROWS } from './Layout.js';
@@ -13,9 +14,10 @@ import { STORY_ROW_HEIGHT } from './StoryRow.js';
 import { StoryListView } from './StoryListView.js';
 import { SummaryPanel } from './SummaryPanel.js';
 import { theme } from './theme.js';
+import { useFlash } from './useFlash.js';
 const BATCH_SIZE = 30;
 const FETCH_THRESHOLD = 10;
-export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchRequested, onAskAI, }) {
+export function StoryList({ feed, config, onFeedChange, onTabChange, onSelectStory, onSearchRequested, onAskAI, }) {
     const { columns, rows } = useWindowSize();
     const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(LIST_KEYS, columns));
     const [storyIds, setStoryIds] = useState([]);
@@ -25,6 +27,7 @@ export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchR
     const [loadingMore, setLoadingMore] = useState(false);
     const [error, setError] = useState('');
     const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
     const token = useRef(0);
     const pendingTopJump = useRef(false);
     const topLineRef = useRef(0);
@@ -97,9 +100,9 @@ export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchR
         if (targetFeed)
             return onFeedChange(targetFeed);
         if (key.leftArrow)
-            return onFeedChange(previousFeed(feed));
+            return onTabChange(-1);
         if (key.rightArrow)
-            return onFeedChange(nextFeed(feed));
+            return onTabChange(1);
         if (input === '/')
             return onSearchRequested();
         if (input === 'j' || key.downArrow)
@@ -116,6 +119,8 @@ export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchR
             return setSummaryOpen(true);
         if (input === 'a' && stories[selected])
             return onAskAI(stories[selected]);
+        if (input === 'B' && stories[selected])
+            return flash(toggleBookmark(stories[selected]) ? 'bookmarked ✓' : 'bookmark removed');
         if (key.return && stories[selected])
             return onSelectStory(stories[selected]);
     }
@@ -125,10 +130,11 @@ export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchR
     if (status === 'error')
         return _jsxs(Text, { color: theme.colors.error, children: [error, " (r to retry)"] });
     const panelHeight = summaryOpen ? Math.max(6, Math.floor(bodyHeight / 2)) : 0;
-    const listHeight = Math.max(1, (loadingMore ? bodyHeight - 1 : bodyHeight) - panelHeight);
+    const statusLineHeight = loadingMore || flashMessage ? 1 : 0;
+    const listHeight = Math.max(1, bodyHeight - statusLineHeight - panelHeight);
     const heights = stories.map(() => STORY_ROW_HEIGHT);
     const topLine = ensureVisibleLines(heights, selected, topLineRef.current, listHeight);
     topLineRef.current = topLine;
     const selectedStory = stories[selected];
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), loadingMore && _jsx(Text, { dimColor: true, children: "loading more\u2026" }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns }), flashMessage ? _jsx(Text, { dimColor: true, children: flashMessage }) : loadingMore && _jsx(Text, { dimColor: true, children: "loading more\u2026" }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
 }

package/dist/ui/StoryRow.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
@@ -22,6 +23,8 @@ export function StoryRow({ story, rank, rankWidth, isSelected, width, showMeta =
     const titleWidth = Math.max(1, safeWidth - prefix.length - hostnameSuffix.length);
     const title = truncateTitle(story.title, titleWidth);
     const background = isSelected ? theme.colors.selectionBackground : undefined;
-    const meta = metaText(story);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { backgroundColor: background, children: [prefix, _jsx(Text, { bold: true, color: theme.colors.title, children: title }), hostname && _jsx(Text, { color: theme.colors.muted, children: hostnameSuffix }), fillPad(isSelected, safeWidth, prefix.length + title.length + hostnameSuffix.length)] }), showMeta && (_jsxs(Text, { backgroundColor: background, children: [' '.repeat(prefix.length), _jsxs(Text, { color: theme.colors.score, children: [story.score, " points"] }), _jsxs(Text, { color: theme.colors.muted, children: [' ', "by ", story.by, " ", formatAge(story.time), " ago | ", story.descendants, " comments"] }), fillPad(isSelected, safeWidth, prefix.length + meta.length)] })), showSeparator && _jsx(Text, { children: " " })] }));
+    const bookmarked = isBookmarked(story.id);
+    const starPrefix = bookmarked ? `${theme.glyphs.bookmark} ` : '';
+    const meta = `${starPrefix}${metaText(story)}`;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { backgroundColor: background, children: [prefix, _jsx(Text, { bold: true, color: theme.colors.title, children: title }), hostname && _jsx(Text, { color: theme.colors.muted, children: hostnameSuffix }), fillPad(isSelected, safeWidth, prefix.length + title.length + hostnameSuffix.length)] }), showMeta && (_jsxs(Text, { backgroundColor: background, children: [' '.repeat(prefix.length), bookmarked && _jsx(Text, { color: theme.colors.accent, children: starPrefix }), _jsxs(Text, { color: theme.colors.score, children: [story.score, " points"] }), _jsxs(Text, { color: theme.colors.muted, children: [' ', "by ", story.by, " ", formatAge(story.time), " ago | ", story.descendants, " comments"] }), fillPad(isSelected, safeWidth, prefix.length + meta.length)] })), showSeparator && _jsx(Text, { children: " " })] }));
 }

package/dist/ui/SubscriptionForm.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+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';
+const PREVIEW_DEBOUNCE_MS = 300;
+const PREVIEW_WINDOW_DAYS = 7;
+const PREVIEW_LIMIT = 5;
+const FIELD_ORDER = ['name', 'query', 'minPoints'];
+function windowStart() {
+    return Math.floor(Date.now() / 1000) - PREVIEW_WINDOW_DAYS * 24 * 60 * 60;
+}
+export function SubscriptionForm({ mode, subscription, prefillQuery, onSave, onCancel, }) {
+    const { columns } = useWindowSize();
+    const [name, setName] = useState(subscription?.name ?? '');
+    const [query, setQuery] = useState(subscription?.query ?? prefillQuery ?? '');
+    const [minPoints, setMinPoints] = useState(String(subscription?.minPoints ?? 0));
+    const [field, setField] = useState('name');
+    const [error, setError] = useState('');
+    const [preview, setPreview] = useState([]);
+    const debounceRef = useRef(null);
+    const previewToken = useRef(0);
+    useEffect(() => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        if (!query.trim()) {
+            setPreview([]);
+            return;
+        }
+        debounceRef.current = setTimeout(() => void loadPreview(), PREVIEW_DEBOUNCE_MS);
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query, minPoints]);
+    async function loadPreview() {
+        const myToken = ++previewToken.current;
+        const points = Number(minPoints) || 0;
+        try {
+            const results = await searchRecent(query, { createdAfter: windowStart(), minPoints: points, hitsPerPage: PREVIEW_LIMIT });
+            if (myToken === previewToken.current)
+                setPreview(results);
+        }
+        catch {
+            if (myToken === previewToken.current)
+                setPreview([]);
+        }
+    }
+    function save() {
+        const trimmedName = name.trim();
+        const trimmedQuery = query.trim();
+        if (!trimmedName)
+            return setError('name is required');
+        if (!trimmedQuery)
+            return setError('query is required');
+        const points = Number(minPoints) || 0;
+        try {
+            if (mode === 'add')
+                addSubscription(trimmedName, trimmedQuery, points);
+            else
+                updateSubscription(subscription.id, { name: trimmedName, query: trimmedQuery, minPoints: points });
+            onSave();
+        }
+        catch (err) {
+            setError(err.message);
+        }
+    }
+    function handleInput(input, key) {
+        if (key.escape)
+            return onCancel();
+        if (key.tab) {
+            const index = FIELD_ORDER.indexOf(field);
+            return setField(FIELD_ORDER[(index + 1) % FIELD_ORDER.length]);
+        }
+        if (key.return)
+            return save();
+        if (key.backspace || key.delete) {
+            if (field === 'name')
+                setName((v) => v.slice(0, -1));
+            if (field === 'query')
+                setQuery((v) => v.slice(0, -1));
+            if (field === 'minPoints')
+                setMinPoints((v) => v.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            if (field === 'name')
+                setName((v) => v + input);
+            if (field === 'query')
+                setQuery((v) => v + input);
+            if (field === 'minPoints' && /^\d+$/.test(input)) {
+                setMinPoints((v) => (v === '0' ? input : v + input));
+            }
+        }
+    }
+    useInput(handleInput);
+    const cursor = (f) => (field === f ? '▏' : '');
+    const previewLabel = Number(minPoints) > 0 ? `≥${minPoints} pts` : 'any points';
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.colors.title, children: mode === 'add' ? 'New subscription' : 'Edit subscription' }), _jsx(Text, { children: " " }), _jsxs(Text, { children: ["name:        ", name, cursor('name')] }), _jsxs(Text, { children: ["query:       ", query, cursor('query')] }), _jsxs(Text, { children: ["min points:  ", minPoints, cursor('minPoints')] }), _jsx(Text, { children: " " }), query.trim() && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["preview (last 7 days, ", previewLabel, "):"] }), preview.length === 0 && _jsx(Text, { dimColor: true, children: " no matches" }), preview.map((story, i) => (_jsxs(Text, { children: [' ', i + 1, ". ", truncateTitle(story.title, Math.max(1, columns - 24)), "  ", story.score, " pts"] }, story.id)))] })), error && _jsx(Text, { color: theme.colors.error, children: error }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "tab next field \u00B7 enter save \u00B7 esc cancel" })] }));
+}

package/dist/ui/SubscriptionMatches.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import open from 'open';
+import { buildListSummaryPrompt } from '../ai/summaryPrompts.js';
+import { searchRecent } from '../api/algolia.js';
+import { hnItemUrl } from '../api/firebase.js';
+import { toggleBookmark } from '../db/bookmarks.js';
+import { clampSelection } from '../lib/listNavigation.js';
+import { ensureVisibleLines } from '../lib/viewport.js';
+import { footerRows, SUB_MATCHES_KEYS } from './keymap.js';
+import { HEADER_ROWS } from './Layout.js';
+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 { useFlash } from './useFlash.js';
+const WINDOW_DAYS = 7;
+const HEADER_LINES = 1;
+function windowStart() {
+    return Math.floor(Date.now() / 1000) - WINDOW_DAYS * 24 * 60 * 60;
+}
+export function SubscriptionMatches({ subscription, config, onSelectStory, onBack, onAskAI, }) {
+    const { columns, rows } = useWindowSize();
+    const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SUB_MATCHES_KEYS, columns) - HEADER_LINES);
+    const [stories, setStories] = useState([]);
+    const [selected, setSelected] = useState(0);
+    const [status, setStatus] = useState('loading');
+    const [error, setError] = useState('');
+    const [summaryOpen, setSummaryOpen] = useState(false);
+    const [flashMessage, flash] = useFlash();
+    const pendingTopJump = useRef(false);
+    const topLineRef = useRef(0);
+    useEffect(() => {
+        void load();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [subscription.id]);
+    async function load() {
+        setStatus('loading');
+        setSelected(0);
+        try {
+            const results = await searchRecent(subscription.query, {
+                createdAfter: windowStart(),
+                minPoints: subscription.minPoints,
+            });
+            setStories(results);
+            setStatus('ready');
+        }
+        catch (err) {
+            setStatus('error');
+            setError(err.message);
+        }
+    }
+    function openSelectedStory() {
+        const story = stories[selected];
+        if (story)
+            void open(story.url ?? hnItemUrl(story.id));
+    }
+    function handleInput(input, key) {
+        const isG = input === 'g';
+        if (isG && pendingTopJump.current) {
+            pendingTopJump.current = false;
+            return setSelected(0);
+        }
+        pendingTopJump.current = isG;
+        if (key.escape)
+            return onBack();
+        if (input === 'j' || key.downArrow)
+            return setSelected((s) => clampSelection(s, 1, stories.length));
+        if (input === 'k' || key.upArrow)
+            return setSelected((s) => clampSelection(s, -1, stories.length));
+        if (input === 'G')
+            return setSelected(Math.max(0, stories.length - 1));
+        if (input === 'o')
+            return openSelectedStory();
+        if (input === 'r')
+            return void load();
+        if (input === 's' && stories[selected])
+            return setSummaryOpen(true);
+        if (input === 'a' && stories[selected])
+            return onAskAI(stories[selected]);
+        if (input === 'B' && stories[selected]) {
+            return flash(toggleBookmark(stories[selected]) ? 'bookmarked ✓' : 'bookmark removed');
+        }
+        if (key.return && stories[selected])
+            return onSelectStory(stories[selected]);
+    }
+    useInput(handleInput, { isActive: !summaryOpen });
+    if (status === 'loading')
+        return _jsx(LoadingIndicator, { label: "Loading matches..." });
+    if (status === 'error')
+        return _jsxs(Text, { color: theme.colors.error, children: [error, " (r to retry)"] });
+    const panelHeight = summaryOpen ? Math.max(6, Math.floor(bodyHeight / 2)) : 0;
+    const statusLineHeight = flashMessage ? 1 : 0;
+    const listHeight = Math.max(1, bodyHeight - statusLineHeight - panelHeight);
+    const heights = stories.map(() => STORY_ROW_HEIGHT);
+    const topLine = ensureVisibleLines(heights, selected, topLineRef.current, listHeight);
+    topLineRef.current = topLine;
+    const selectedStory = stories[selected];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["sub: ", subscription.name, " \"", subscription.query, "\""] }), stories.length === 0 ? (_jsx(Text, { dimColor: true, children: "no matches in the last 7 days" })) : (_jsx(StoryListView, { stories: stories, selected: selected, topLine: topLine, height: listHeight, width: columns })), flashMessage && _jsx(Text, { dimColor: true, children: flashMessage }), summaryOpen && selectedStory && (_jsx(SummaryPanel, { config: config, buildPrompt: (signal) => buildListSummaryPrompt(selectedStory, signal), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
+}