hn-bits 0.2.0

package/dist/ui/SummaryPanel.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+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';
+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 [status, setStatus] = useState(config ? 'preparing' : 'setup-hint');
+    const [content, setContent] = useState('');
+    const [notice, setNotice] = useState('');
+    const [error, setError] = useState('');
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const token = useRef(0);
+    const controllerRef = useRef(null);
+    useEffect(() => {
+        if (config)
+            void generate();
+        return () => controllerRef.current?.abort();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    async function generate() {
+        if (!config)
+            return;
+        controllerRef.current?.abort();
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        const myToken = ++token.current;
+        setStatus('preparing');
+        setContent('');
+        setNotice('');
+        setError('');
+        setScrollOffset(0);
+        let prompt;
+        try {
+            const result = await buildPrompt(controller.signal);
+            if (myToken !== token.current)
+                return;
+            prompt = result.prompt;
+            if (result.notice)
+                setNotice(result.notice);
+        }
+        catch (err) {
+            if (myToken !== token.current)
+                return;
+            setStatus('error');
+            setError(describeError(err));
+            return;
+        }
+        setStatus('thinking');
+        const messages = [
+            { role: 'system', content: SYSTEM_PROMPT },
+            { role: 'user', content: prompt },
+        ];
+        try {
+            for await (const delta of chatStream(config.ollama, messages, controller.signal)) {
+                if (myToken !== token.current)
+                    return;
+                setStatus('streaming');
+                setContent((prev) => prev + delta);
+            }
+            if (myToken === token.current)
+                setStatus('done');
+        }
+        catch (err) {
+            if (myToken !== token.current)
+                return;
+            setStatus('error');
+            setError(describeError(err));
+        }
+    }
+    useInput((input, key) => {
+        if (key.escape) {
+            controllerRef.current?.abort();
+            return onClose();
+        }
+        if (input === 's')
+            return void generate();
+        if (input === 'j')
+            return setScrollOffset((s) => s + 1);
+        if (input === 'k')
+            return setScrollOffset((s) => Math.max(0, s - 1));
+    });
+    const innerWidth = Math.max(1, width - 4);
+    const innerHeight = Math.max(1, height - 2);
+    const live = status === 'preparing' || status === 'thinking' || status === 'streaming';
+    const chromeRows = 2 + (notice ? 1 : 0);
+    const contentRows = Math.max(1, innerHeight - chromeRows);
+    const wrapped = wrapPlainText(content, innerWidth);
+    const maxScroll = Math.max(0, wrapped.length - contentRows);
+    const effectiveScroll = live ? maxScroll : Math.min(scrollOffset, maxScroll);
+    const visibleLines = wrapped.slice(effectiveScroll, effectiveScroll + contentRows);
+    const thinkingSuffix = status === 'preparing' || status === 'thinking' ? ' · thinking…' : '';
+    const headerLabel = config ? `summary · ${config.ollama.model}${thinkingSuffix}` : 'summary';
+    const footerHint = status === 'setup-hint' ? 'esc close' : 'esc close · s regenerate · j/k scroll';
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.accent, height: height, width: width, paddingX: 1, children: [_jsx(Text, { color: theme.colors.title, children: headerLabel }), status === 'setup-hint' &&
+                AI_SETUP_HINT_LINES.map((line) => (_jsx(Text, { dimColor: true, children: line }, line))), status === 'error' && _jsx(Text, { color: theme.colors.error, children: error }), status !== 'setup-hint' &&
+                status !== 'error' &&
+                visibleLines.map((line, i) => (_jsxs(Text, { children: [line, live && i === visibleLines.length - 1 ? '▍' : ''] }, i))), notice && status !== 'setup-hint' && _jsx(Text, { dimColor: true, children: notice }), _jsx(Text, { dimColor: true, children: footerHint })] }));
+}

package/dist/ui/TabBar.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useWindowSize } from 'ink';
+import { theme } from './theme.js';
+const TABS = [
+    { feed: 'top', label: 'Top' },
+    { feed: 'new', label: 'New' },
+    { feed: 'best', label: 'Best' },
+    { feed: 'ask', label: 'Ask' },
+    { feed: 'show', label: 'Show' },
+];
+const BRAND = 'Hacker News';
+const HELP_HINT = '? help';
+const TAB_GAP = '   ';
+function tabSegment(tab, active) {
+    if (tab.feed !== active)
+        return { segment: { text: tab.label, color: 'muted' }, width: tab.label.length };
+    const inner = ` ${tab.label} `;
+    return { segment: { text: `│${inner}│`, color: 'accent', bold: true }, width: inner.length };
+}
+function buildTabSegments(active) {
+    const segments = [{ text: `  ${BRAND}${TAB_GAP}`, color: 'accent', bold: true }];
+    let column = segments[0].text.length;
+    let activeWallColumn = 0;
+    let activeInnerWidth = 0;
+    TABS.forEach((tab, index) => {
+        if (index > 0) {
+            segments.push({ text: TAB_GAP, color: 'muted' });
+            column += TAB_GAP.length;
+        }
+        const { segment, width } = tabSegment(tab, active);
+        segments.push(segment);
+        if (tab.feed === active) {
+            activeWallColumn = column;
+            activeInnerWidth = width;
+        }
+        column += segment.text.length;
+    });
+    return { segments, activeWallColumn, activeInnerWidth };
+}
+function appendHint(segments, usedColumns, columns) {
+    const padding = Math.max(1, columns - usedColumns - HELP_HINT.length);
+    segments.push({ text: ' '.repeat(padding), color: 'muted' }, { text: HELP_HINT, color: 'muted' });
+}
+function buildLine(active, columns) {
+    const line = buildTabSegments(active);
+    const usedColumns = line.segments.reduce((sum, segment) => sum + segment.text.length, 0);
+    appendHint(line.segments, usedColumns, columns);
+    return line;
+}
+/** Splits `base` into dim/accent segments, with `replacement` overlaid as accent at `start`. */
+function splitAccent(base, start, replacement) {
+    const before = base.slice(0, start);
+    const after = base.slice(start + replacement.length);
+    const segments = [];
+    if (before)
+        segments.push({ text: before, color: 'muted' });
+    segments.push({ text: replacement, color: 'accent' });
+    if (after)
+        segments.push({ text: after, color: 'muted' });
+    return segments;
+}
+function buildTopBorderSegments(columns, wallColumn, innerWidth) {
+    const box = `╭${'─'.repeat(innerWidth)}╮`;
+    return splitAccent(' '.repeat(columns), wallColumn, box);
+}
+function buildBottomRuleSegments(columns, wallColumn, innerWidth) {
+    const notch = `╯${' '.repeat(innerWidth)}╰`;
+    const base = '─'.repeat(columns);
+    const line = base.slice(0, wallColumn) + notch + base.slice(wallColumn + notch.length);
+    return [{ text: line, color: 'accent' }];
+}
+function segmentColor(color) {
+    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))) }));
+}
+export function TabBar({ active }) {
+    const { columns } = useWindowSize();
+    const line = buildLine(active, columns);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(SegmentRow, { segments: buildTopBorderSegments(columns, line.activeWallColumn, line.activeInnerWidth) }), _jsx(SegmentRow, { segments: line.segments }), _jsx(SegmentRow, { segments: buildBottomRuleSegments(columns, line.activeWallColumn, line.activeInnerWidth) })] }));
+}

package/dist/ui/keymap.js

@@ -0,0 +1,46 @@
+import { wrapPlainText } from '../lib/viewport.js';
+export const GLOBAL_KEYS = [
+    { key: 'q', label: 'quit' },
+    { key: '?', label: 'help' },
+];
+export const LIST_KEYS = [
+    { key: 'j/k', label: 'move' },
+    { key: '←/→', label: 'tab' },
+    { key: 't/n/b', label: 'feed' },
+    { key: 'gg/G', label: 'top/bottom' },
+    { key: 'enter', label: 'comments' },
+    { key: 'o', label: 'browser' },
+    { key: 'r', label: 'refresh' },
+    { key: '/', label: 'search' },
+    { key: 's', label: 'summary' },
+    { key: 'a', label: 'ask ai' },
+];
+export const COMMENTS_KEYS = [
+    { key: 'j/k', label: 'move' },
+    { key: 'space', label: 'fold' },
+    { key: 'C/E', label: 'collapse/expand' },
+    { key: 'gg/G', label: 'top/bottom' },
+    { key: 'o', label: 'browser' },
+    { key: 'r', label: 'reload' },
+    { key: 's', label: 'summary' },
+    { key: 'a', label: 'ask ai' },
+    { key: 'esc', label: 'back' },
+];
+export const SEARCH_RESULTS_KEYS = [
+    { key: 'j/k', label: 'move' },
+    { key: 'gg/G', label: 'top/bottom' },
+    { key: 'enter', label: 'comments' },
+    { key: 'o', label: 'browser' },
+    { key: '/', label: 'new search' },
+    { key: 's', label: 'summary' },
+    { key: 'a', label: 'ask ai' },
+    { key: 'esc', label: 'back/quit' },
+];
+/** Footer hint string: view keys followed by the global keys. */
+export function footerHint(viewKeys) {
+    return [...viewKeys, ...GLOBAL_KEYS].map((binding) => `${binding.key} ${binding.label}`).join(' · ');
+}
+/** How many terminal rows the footer hint wraps to at the given width. */
+export function footerRows(viewKeys, width) {
+    return wrapPlainText(footerHint(viewKeys), width).length;
+}

package/dist/ui/theme.js

@@ -0,0 +1,98 @@
+const glyphs = {
+    selection: '❯',
+    foldOpen: '▾',
+    foldClosed: '▸',
+    upvote: '▲',
+};
+function ansi256(code) {
+    return `ansi256(${code})`;
+}
+// Shared across every palette — selection is a UI affordance, not a theme accent.
+const SELECTION_BACKGROUND = ansi256(238);
+// Shared across every palette — contact highlighting is an affordance, not a theme accent.
+const LINK = ansi256(81);
+const EMAIL = ansi256(114);
+// Ported from heartleo/hn-cli's internal/cli/colors.go (subset of roles this app uses).
+const palettes = {
+    hn: {
+        accent: ansi256(208),
+        title: ansi256(255),
+        muted: ansi256(243),
+        error: ansi256(204),
+        score: ansi256(208),
+        comment: ansi256(243),
+        selectionBackground: SELECTION_BACKGROUND,
+        link: LINK,
+        email: EMAIL,
+    },
+    mocha: {
+        accent: ansi256(183),
+        title: ansi256(189),
+        muted: ansi256(243),
+        error: ansi256(204),
+        score: ansi256(208),
+        comment: ansi256(109),
+        selectionBackground: SELECTION_BACKGROUND,
+        link: LINK,
+        email: EMAIL,
+    },
+    dracula: {
+        accent: ansi256(141),
+        title: ansi256(231),
+        muted: ansi256(61),
+        error: ansi256(210),
+        score: ansi256(208),
+        comment: ansi256(117),
+        selectionBackground: SELECTION_BACKGROUND,
+        link: LINK,
+        email: EMAIL,
+    },
+    tokyo: {
+        accent: ansi256(75),
+        title: ansi256(189),
+        muted: ansi256(59),
+        error: ansi256(203),
+        score: ansi256(208),
+        comment: ansi256(73),
+        selectionBackground: SELECTION_BACKGROUND,
+        link: LINK,
+        email: EMAIL,
+    },
+    nord: {
+        accent: ansi256(110),
+        title: ansi256(253),
+        muted: ansi256(60),
+        error: ansi256(174),
+        score: ansi256(208),
+        comment: ansi256(73),
+        selectionBackground: SELECTION_BACKGROUND,
+        link: LINK,
+        email: EMAIL,
+    },
+    gruvbox: {
+        accent: ansi256(208),
+        title: ansi256(223),
+        muted: ansi256(245),
+        error: ansi256(167),
+        score: ansi256(208),
+        comment: ansi256(108),
+        selectionBackground: SELECTION_BACKGROUND,
+        link: LINK,
+        email: EMAIL,
+    },
+};
+const DEFAULT_PALETTE = 'hn';
+export function paletteNames() {
+    return Object.keys(palettes);
+}
+function isPaletteName(name) {
+    return name in palettes;
+}
+export function resolvePaletteName(name) {
+    const candidate = name ?? process.env['HN_THEME'] ?? DEFAULT_PALETTE;
+    return isPaletteName(candidate) ? candidate : DEFAULT_PALETTE;
+}
+export function resolveTheme(name) {
+    return { colors: palettes[resolvePaletteName(name)], glyphs };
+}
+export const theme = resolveTheme();

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "hn-bits",
+  "version": "0.2.0",
+  "description": "Terminal-first Hacker News client",
+  "type": "module",
+  "bin": {
+    "hn": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "tsx src/index.tsx",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@mozilla/readability": "^0.6.0",
+    "commander": "^15.0.0",
+    "ink": "^7.1.0",
+    "jsdom": "^29.1.1",
+    "open": "^11.0.0",
+    "react": "^19.2.7"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^28.0.3",
+    "@types/node": "^26.1.0",
+    "@types/react": "^19.2.17",
+    "tsx": "^4.23.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  }
+}