hn-bits 0.2.0

package/dist/ui/Comments.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import open from 'open';
+import { buildCommentsSummaryPrompt } from '../ai/summaryPrompts.js';
+import { fetchComments } from '../api/algolia.js';
+import { hnItemUrl } from '../api/firebase.js';
+import { collapseAll, flattenTree, headerOnlyAll, rehideRevealed, revealHeaderOnly, toggleFold, } from '../lib/commentTree.js';
+import { tokenizeContacts } from '../lib/contactHighlight.js';
+import { formatAge } from '../lib/format.js';
+import { htmlToText } from '../lib/html.js';
+import { clampSelection } from '../lib/listNavigation.js';
+import { ensureVisibleLines, sliceByLines, wrapPlainText } from '../lib/viewport.js';
+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';
+const HEADER_BORDER_LINES = 2;
+// borderStyle (2 cols) + paddingX (2 cols) eaten from the card's interior width.
+const HEADER_FRAME_WIDTH = 4;
+const ROW_BORDER_WIDTH = 2;
+const SELECTION_BAR = '│';
+// Long titles/URLs word-wrap inside the bordered card; undercounting that height
+// shrinks the comment viewport too little and overflows the terminal (corrupts the frame).
+export function commentsHeaderLines(story, columns) {
+    const width = Math.max(1, columns - HEADER_FRAME_WIDTH);
+    const titleLines = wrapPlainText(story.title, width).length;
+    const urlLines = story.url ? wrapPlainText(story.url, width).length : 0;
+    return HEADER_BORDER_LINES + titleLines + 1 + urlLines;
+}
+export function Comments({ story, config, onBack, onAskAI }) {
+    const { columns, rows } = useWindowSize();
+    const headerLines = commentsHeaderLines(story, columns);
+    const viewportLines = Math.max(1, rows - HEADER_ROWS - footerRows(COMMENTS_KEYS, columns) - headerLines);
+    const [status, setStatus] = useState('loading');
+    const [error, setError] = useState('');
+    const [comments, setComments] = useState([]);
+    const [fold, setFold] = useState({
+        folded: new Set(),
+        headerOnly: new Set(),
+        revealed: new Set(),
+    });
+    const [selected, setSelected] = useState(0);
+    const [summaryOpen, setSummaryOpen] = useState(false);
+    const pendingTopJump = useRef(false);
+    const topLineRef = useRef(0);
+    const { folded, headerOnly, revealed } = fold;
+    useEffect(() => {
+        void load();
+    }, []);
+    async function load() {
+        setStatus('loading');
+        try {
+            const tree = await fetchComments(story.id);
+            setComments(tree);
+            setFold({ folded: collapseAll(tree), headerOnly: new Set(), revealed: new Set() });
+            setSelected(0);
+            setStatus('ready');
+        }
+        catch (err) {
+            setStatus('error');
+            setError(err.message);
+        }
+    }
+    const flat = useMemo(() => flattenTree(comments, folded, headerOnly), [comments, folded, headerOnly]);
+    const rowsData = useMemo(() => flat.map((entry) => buildRow(entry, columns)), [flat, columns]);
+    const clampedSelected = clampSelection(selected, 0, flat.length);
+    function openStory() {
+        void open(story.url ?? hnItemUrl(story.id));
+    }
+    function toggleSelected() {
+        const row = flat[clampedSelected];
+        if (!row)
+            return;
+        const id = row.node.id;
+        if (row.headerOnly) {
+            return setFold((f) => ({ ...f, ...revealHeaderOnly(f, id) }));
+        }
+        if (row.node.children.length === 0) {
+            if (revealed.has(id))
+                setFold((f) => ({ ...f, ...rehideRevealed(f, id) }));
+            return;
+        }
+        setFold((f) => ({ ...f, folded: toggleFold(f.folded, id) }));
+    }
+    function collapseEverything() {
+        setFold((f) => ({ ...f, headerOnly: headerOnlyAll(comments), revealed: new Set() }));
+    }
+    function resetFold() {
+        setFold({ folded: collapseAll(comments), headerOnly: new Set(), revealed: new Set() });
+    }
+    function handleInput(input, key) {
+        const isG = input === 'g';
+        if (isG && pendingTopJump.current) {
+            pendingTopJump.current = false;
+            return setSelected(0);
+        }
+        pendingTopJump.current = isG;
+        if (key.escape || input === 'b')
+            return onBack();
+        if (input === 'j' || key.downArrow)
+            return setSelected(clampSelection(clampedSelected, 1, flat.length));
+        if (input === 'k' || key.upArrow)
+            return setSelected(clampSelection(clampedSelected, -1, flat.length));
+        if (input === 'G')
+            return setSelected(Math.max(0, flat.length - 1));
+        if (input === ' ' || key.return)
+            return toggleSelected();
+        if (input === 'C')
+            return collapseEverything();
+        if (input === 'E')
+            return resetFold();
+        if (input === 'o')
+            return openStory();
+        if (input === 'r')
+            return void load();
+        if (input === 's')
+            return setSummaryOpen(true);
+        if (input === 'a')
+            return onAskAI(comments);
+    }
+    useInput(handleInput, { isActive: !summaryOpen });
+    if (status === 'loading')
+        return _jsx(LoadingIndicator, { label: "Loading comments..." });
+    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 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) => {
+                const rowIndex = first + i;
+                const start = rowIndex === first ? clipTop : 0;
+                const end = rowIndex === last ? row.lines.length - clipBottom : row.lines.length;
+                return (_jsx(CommentRowView, { depth: row.depth, width: row.width, lines: row.lines.slice(start, end), isSelected: rowIndex === clampedSelected }, row.id));
+            }), summaryOpen && (_jsx(SummaryPanel, { config: config, buildPrompt: () => Promise.resolve(buildCommentsSummaryPrompt(story, comments)), height: panelHeight, width: columns, onClose: () => setSummaryOpen(false) }))] }));
+}
+function CommentsHeader({ story }) {
+    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) {
+    if (entry.descendantCount === 0)
+        return '';
+    if (entry.headerOnly)
+        return `[${entry.descendantCount} more]`;
+    return entry.descendantCount === 1 ? '1 reply' : `${entry.descendantCount} replies`;
+}
+function buildHeaderSpans(entry) {
+    const glyph = entry.headerOnly ? theme.glyphs.foldClosed : theme.glyphs.foldOpen;
+    const badge = replyBadge(entry);
+    const spans = [
+        { text: `${glyph} `, color: theme.colors.accent },
+        { text: entry.node.author, color: theme.colors.accent, bold: true },
+        { text: ` · ${formatAge(entry.node.time)}`, color: theme.colors.muted },
+    ];
+    if (badge)
+        spans.push({ text: ` | ${badge}`, color: theme.colors.muted });
+    return spans;
+}
+function tokenToSpan(token) {
+    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) {
+    // 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 body = entry.headerOnly
+        ? []
+        : wrapPlainText(htmlToText(entry.node.text), width).map((line) => ({
+            kind: 'body',
+            spans: tokenizeContacts(line).map(tokenToSpan),
+        }));
+    return { id: entry.node.id, depth: entry.depth, width, lines: [header, ...body] };
+}
+function spanLength(spans) {
+    return spans.reduce((sum, span) => sum + span.text.length, 0);
+}
+function CommentRowView({ depth, width, lines, isSelected }) {
+    const background = isSelected ? theme.colors.selectionBackground : undefined;
+    const prefix = isSelected ? `${SELECTION_BAR} ` : '  ';
+    const rowWidth = width + ROW_BORDER_WIDTH;
+    return (_jsx(Box, { marginLeft: depth * 2, flexDirection: "column", children: lines.map((line, i) => {
+            const spans = [
+                { text: prefix, color: isSelected ? theme.colors.accent : undefined },
+                ...line.spans,
+            ];
+            if (isSelected)
+                spans.push({ text: ' '.repeat(Math.max(0, rowWidth - spanLength(spans))) });
+            return (_jsx(Text, { backgroundColor: background, wrap: "truncate-end", children: spans.map((span, j) => (_jsx(Text, { color: span.color, bold: span.bold, underline: span.underline, children: span.text }, j))) }, i));
+        }) }));
+}

package/dist/ui/HelpOverlay.js

@@ -0,0 +1,10 @@
+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';
+export function HelpOverlay({ title, keys }) {
+    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 }) {
+    return (_jsxs(Text, { children: ['  ', binding.key.padEnd(8), " ", binding.label] }));
+}

package/dist/ui/Layout.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useWindowSize } from 'ink';
+import { theme } from './theme.js';
+const MIN_ROWS = 8;
+export const HEADER_ROWS = 3;
+export function Screen({ children }) {
+    const { columns, rows } = useWindowSize();
+    if (rows < MIN_ROWS) {
+        return _jsx(Text, { children: "Terminal too small \u2014 resize to continue." });
+    }
+    return (_jsx(Box, { flexDirection: "column", width: columns, height: rows, children: children }));
+}
+export function Header({ children }) {
+    return _jsx(Box, { flexShrink: 0, children: children });
+}
+export function Body({ children }) {
+    return (_jsx(Box, { flexGrow: 1, overflowY: "hidden", flexDirection: "column", children: children }));
+}
+export function Footer({ children }) {
+    return (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: theme.colors.muted, children: children }) }));
+}

package/dist/ui/LoadingIndicator.js

@@ -0,0 +1,14 @@
+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';
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const FRAME_INTERVAL_MS = 80;
+export function LoadingIndicator({ label }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), FRAME_INTERVAL_MS);
+        return () => clearInterval(id);
+    }, []);
+    return (_jsxs(Text, { children: [_jsx(Text, { color: theme.colors.accent, children: FRAMES[frame] }), " ", _jsx(Text, { color: theme.colors.title, children: label })] }));
+}

package/dist/ui/SearchInput.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Text, useInput } from 'ink';
+export function SearchInput({ onSubmit, onCancel }) {
+    const [query, setQuery] = useState('');
+    useInput((input, key) => {
+        if (key.escape)
+            return onCancel();
+        if (key.return)
+            return submit();
+        if (key.backspace || key.delete)
+            return setQuery((q) => q.slice(0, -1));
+        if (input && !key.ctrl && !key.meta)
+            setQuery((q) => q + input);
+    });
+    function submit() {
+        if (query.trim())
+            onSubmit(query.trim());
+    }
+    return _jsxs(Text, { children: ["/ ", query, "\u258A"] });
+}

package/dist/ui/SearchResults.js

@@ -0,0 +1,128 @@
+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 { searchStories } from '../api/algolia.js';
+import { hnItemUrl } from '../api/firebase.js';
+import { clampSelection } from '../lib/listNavigation.js';
+import { ensureVisibleLines, shouldFetchMore } from '../lib/viewport.js';
+import { footerRows, SEARCH_RESULTS_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';
+const FETCH_THRESHOLD = 10;
+const HEADER_LINES = 1;
+export function SearchResults({ query, config, onSelectStory, onExit, onSearchAgain, onAskAI, }) {
+    const { columns, rows } = useWindowSize();
+    const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(SEARCH_RESULTS_KEYS, columns) - HEADER_LINES);
+    const [stories, setStories] = useState([]);
+    const [hasMore, setHasMore] = useState(false);
+    const [totalHits, setTotalHits] = useState(null);
+    const [selected, setSelected] = useState(0);
+    const [status, setStatus] = useState('loading');
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [error, setError] = useState('');
+    const [summaryOpen, setSummaryOpen] = useState(false);
+    const token = useRef(0);
+    const nextPage = useRef(0);
+    const topLineRef = useRef(0);
+    useEffect(() => {
+        void loadFirstPage();
+    }, [query]);
+    useEffect(() => {
+        const totalCount = hasMore ? Infinity : stories.length;
+        if (status === 'ready' && !loadingMore && shouldFetchMore(selected, stories.length, totalCount, FETCH_THRESHOLD)) {
+            void loadMore();
+        }
+    }, [selected, stories.length, hasMore, status, loadingMore]);
+    async function loadFirstPage() {
+        const myToken = ++token.current;
+        nextPage.current = 0;
+        setStatus('loading');
+        setSelected(0);
+        setStories([]);
+        setTotalHits(null);
+        try {
+            const result = await searchStories(query, 0);
+            if (myToken !== token.current)
+                return;
+            nextPage.current = 1;
+            setStories(result.stories);
+            setHasMore(result.hasMore);
+            setTotalHits(result.totalHits);
+            setStatus('ready');
+        }
+        catch (err) {
+            if (myToken === token.current)
+                failWith(err);
+        }
+    }
+    async function loadMore() {
+        const myToken = token.current;
+        const page = nextPage.current;
+        setLoadingMore(true);
+        try {
+            const result = await searchStories(query, page);
+            if (myToken !== token.current)
+                return;
+            nextPage.current = page + 1;
+            setStories((prev) => [...prev, ...result.stories]);
+            setHasMore(result.hasMore);
+        }
+        catch (err) {
+            if (myToken === token.current)
+                failWith(err);
+        }
+        finally {
+            if (myToken === token.current)
+                setLoadingMore(false);
+        }
+    }
+    function failWith(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) {
+        if (input === '/')
+            return onSearchAgain();
+        if (key.escape)
+            return onExit();
+        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' && status === 'error')
+            return void loadFirstPage();
+        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 });
+    if (status === 'loading')
+        return _jsx(LoadingIndicator, { label: "Searching..." });
+    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 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) }))] }));
+}

package/dist/ui/StoryList.js

@@ -0,0 +1,134 @@
+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 { fetchStories, fetchStoryIds, hnItemUrl } from '../api/firebase.js';
+import { clampSelection, mapFeedKey, nextFeed, previousFeed } from '../lib/listNavigation.js';
+import { ensureVisibleLines, shouldFetchMore } from '../lib/viewport.js';
+import { footerRows, LIST_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';
+const BATCH_SIZE = 30;
+const FETCH_THRESHOLD = 10;
+export function StoryList({ feed, config, onFeedChange, onSelectStory, onSearchRequested, onAskAI, }) {
+    const { columns, rows } = useWindowSize();
+    const bodyHeight = Math.max(1, rows - HEADER_ROWS - footerRows(LIST_KEYS, columns));
+    const [storyIds, setStoryIds] = useState([]);
+    const [stories, setStories] = useState([]);
+    const [selected, setSelected] = useState(0);
+    const [status, setStatus] = useState('loading');
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [error, setError] = useState('');
+    const [summaryOpen, setSummaryOpen] = useState(false);
+    const token = useRef(0);
+    const pendingTopJump = useRef(false);
+    const topLineRef = useRef(0);
+    useEffect(() => {
+        void loadFeed();
+    }, [feed]);
+    useEffect(() => {
+        if (status === 'ready' && !loadingMore && shouldFetchMore(selected, stories.length, storyIds.length, FETCH_THRESHOLD)) {
+            void loadMore();
+        }
+    }, [selected, stories.length, storyIds.length, status, loadingMore]);
+    async function loadFeed() {
+        const myToken = ++token.current;
+        setStatus('loading');
+        setSelected(0);
+        setStories([]);
+        try {
+            const ids = await fetchStoryIds(feed);
+            if (myToken !== token.current)
+                return;
+            setStoryIds(ids);
+            const firstBatch = await fetchStories(ids.slice(0, BATCH_SIZE));
+            if (myToken !== token.current)
+                return;
+            setStories(firstBatch);
+            setStatus('ready');
+        }
+        catch (err) {
+            if (myToken === token.current)
+                failWith(err);
+        }
+    }
+    async function loadMore() {
+        const myToken = token.current;
+        const alreadyFetched = stories.length;
+        setLoadingMore(true);
+        try {
+            const nextIds = storyIds.slice(alreadyFetched, alreadyFetched + BATCH_SIZE);
+            const more = await fetchStories(nextIds);
+            if (myToken !== token.current)
+                return;
+            setStories((prev) => [...prev, ...more]);
+        }
+        catch (err) {
+            if (myToken === token.current)
+                failWith(err);
+        }
+        finally {
+            if (myToken === token.current)
+                setLoadingMore(false);
+        }
+    }
+    function failWith(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;
+        const targetFeed = mapFeedKey(input);
+        if (targetFeed)
+            return onFeedChange(targetFeed);
+        if (key.leftArrow)
+            return onFeedChange(previousFeed(feed));
+        if (key.rightArrow)
+            return onFeedChange(nextFeed(feed));
+        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 void loadFeed();
+        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 });
+    if (status === 'loading')
+        return _jsx(LoadingIndicator, { label: "Loading stories..." });
+    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 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) }))] }));
+}

package/dist/ui/StoryListView.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { sliceByLines } from '../lib/viewport.js';
+import { STORY_ROW_HEIGHT, StoryRow } from './StoryRow.js';
+export function StoryListView({ stories, selected, topLine, height, width }) {
+    const heights = stories.map(() => STORY_ROW_HEIGHT);
+    const { first, last, clipTop, clipBottom } = sliceByLines(heights, topLine, height);
+    const rankWidth = String(stories.length).length;
+    return (_jsx(Box, { flexDirection: "column", children: stories.slice(first, last + 1).map((story, i) => {
+            const index = first + i;
+            const clip = (index === first ? clipTop : 0) + (index === last ? clipBottom : 0);
+            // Edge clipping order: separator drops first, then meta, then title — title is always last standing.
+            const visibleLines = STORY_ROW_HEIGHT - clip;
+            return (_jsx(StoryRow, { story: story, rank: index + 1, rankWidth: rankWidth, isSelected: index === selected, width: width, showMeta: visibleLines >= 2, showSeparator: visibleLines >= 3 }, story.id));
+        }) }));
+}

package/dist/ui/StoryRow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { formatAge, truncateTitle } from '../lib/format.js';
+import { getHostname } from '../lib/url.js';
+import { theme } from './theme.js';
+export const STORY_ROW_HEIGHT = 3;
+function fillPad(isSelected, safeWidth, usedLength) {
+    return isSelected ? ' '.repeat(Math.max(0, safeWidth - usedLength)) : '';
+}
+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, }) {
+    // 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.
+    const safeWidth = Math.max(1, width - 1);
+    const marker = isSelected ? theme.glyphs.selection : ' ';
+    const prefix = `${marker} ${String(rank).padStart(rankWidth)}. `;
+    const hostname = getHostname(story.url);
+    const hostnameSuffix = hostname ? ` (${hostname})` : '';
+    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: " " })] }));
+}