bdtui 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.4.0] - 2026-06-07
+
+### Added
+
+- Lazy pagination for the `all` and `closed` tabs: every bead loads in a single `bd` call (flat, no per-bead dependency fetch) and rows are revealed in batches as you scroll to the bottom, with a "showing X of Y" count. This lifts the previous silent 50-row cap so the full history is reachable. `G` jumps to the true bottom; `/` searches the whole list.
+
+### Changed
+
+- Epic filter picker now lists the most recently created epics first.
+
+### Fixed
+
+- `stdout maxBuffer length exceeded` error when a `bd list` payload exceeded 1 MB (e.g. the `all` tab on a large repo) — the output buffer is now 64 MB.
+- Epic filter picker could miss epics beyond the first 50 results; it now enumerates all epics.
+
+## [0.3.2] - 2026-05-24
+
+### Changed
+
+- Detail-pane dependency rows redesigned: status-colored icons (○ open, ◐ in_progress, ● blocked, ✓ closed, ❄ deferred) with the whole row tinted by effective status. Open beads whose blockers aren't all closed now render as blocked, mirroring how `bd blocked` derives the Blocked tab.
+
 ## [0.3.1] - 2026-05-16
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bdtui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Terminal UI for the bd beads issue tracker",
   "type": "module",
   "bin": {

package/src/app.js

@@ -1,6 +1,6 @@
 import blessed from 'blessed';
 import { execFile } from 'child_process';
-import { state, loadList, loadDetail, applyMutation, applyTypeFilter } from './state.js';
+import { state, loadList, loadDetail, applyMutation, applyTypeFilter, isPaged, ensureSelectedVisible } from './state.js';
 import { createList, renderList } from './views/list.js';
 import { createDetail, renderDetail } from './views/detail.js';
 import { statusPicker, priorityPicker, textPrompt, depMenu, skillPicker, epicPicker } from './views/modals.js';
@@ -88,9 +88,23 @@ export async function run(cwd) {
     screen.render();
   }
 
+  // Lazy "load more": the paged tabs (all / closed) load every bead but render
+  // them pageSize at a time; reveal the next batch once selection reaches the
+  // last visible row (infinite-scroll style).
+  function maybeLoadMore() {
+    if (!isPaged()) return;
+    if (state.visibleCount >= state.listOrder.length) return;
+    if (list.selected < state.visibleCount - 1) return;
+    state.visibleCount = Math.min(state.visibleCount + state.pageSize, state.listOrder.length);
+    renderList(list);
+    setStatus(`Showing ${state.visibleCount} of ${state.listOrder.length}`, false, true);
+    screen.render();
+  }
+
   // When list selection changes, update selectedId and debounce detail fetch
   function onNav() {
     setImmediate(() => {
+      maybeLoadMore();
       const idx = list.selected;
       const id = state.listOrder[idx];
       if (!id || id === state.selectedId) return;
@@ -125,6 +139,7 @@ export async function run(cwd) {
       if (state.selectedId && !state.listOrder.includes(state.selectedId)) {
         state.selectedId = state.listOrder[0] || null;
       }
+      ensureSelectedVisible();
       if (state.selectedId) await loadDetail(state.selectedId);
       render();
       setStatus('Ready');
@@ -158,6 +173,7 @@ export async function run(cwd) {
     } else if (!state.selectedId) {
       state.selectedId = state.listOrder[0] || null;
     }
+    ensureSelectedVisible();
     render();
     if (state.selectedId) {
       try {
@@ -259,6 +275,11 @@ export async function run(cwd) {
 
   key(['G'], () => {
     if (screen.focused !== list) return;
+    // Jump to the true bottom — in paged mode reveal every remaining batch first.
+    if (isPaged() && state.visibleCount < state.listOrder.length) {
+      state.visibleCount = state.listOrder.length;
+      renderList(list);
+    }
     list.select(state.listOrder.length - 1);
     onNav();
     screen.render();
@@ -275,6 +296,9 @@ export async function run(cwd) {
         const b = state.beadsById.get(id);
         return b?.title?.toLowerCase().includes(q);
       });
+      state.visibleCount = isPaged()
+        ? Math.min(state.pageSize, state.listOrder.length)
+        : state.listOrder.length;
       state.selectedId = state.listOrder[0] || null;
       renderList(list);
       renderDetail(detail);
@@ -315,6 +339,10 @@ export async function run(cwd) {
       setStatus(`Closing ${id}…`);
       await applyMutation(id, () => bdClose(id, reason, state.cwd));
       await loadList();
+      if (state.selectedId && !state.listOrder.includes(state.selectedId)) {
+        state.selectedId = state.listOrder[0] || null;
+      }
+      ensureSelectedVisible();
       render();
       setStatus(`Closed ${id}`, false, true);
     } catch (err) {
@@ -345,6 +373,10 @@ export async function run(cwd) {
     try {
       await applyMutation(id, () => bdReopen(id, state.cwd));
       await loadList();
+      if (state.selectedId && !state.listOrder.includes(state.selectedId)) {
+        state.selectedId = state.listOrder[0] || null;
+      }
+      ensureSelectedVisible();
       render();
       setStatus(`Reopened ${id}`, false, true);
     } catch (err) {

package/src/bd.js

@@ -3,24 +3,33 @@ import { promisify } from 'util';
 
 const execFileP = promisify(execFile);
 
+// Default execFile maxBuffer is 1MB; bd JSON output (esp. `list --all` with many
+// closed beads) can exceed that and throw "stdout maxBuffer length exceeded".
+const MAX_BUFFER = 64 * 1024 * 1024; // 64MB
+
 async function runBd(args, cwd) {
   try {
-    const { stdout } = await execFileP('bd', args, { cwd });
+    const { stdout } = await execFileP('bd', args, { cwd, maxBuffer: MAX_BUFFER });
     return JSON.parse(stdout);
   } catch (err) {
     throw new Error(err.stderr?.trim() || err.message);
   }
 }
 
-export const bdList = (filter, cwd) => {
+export const bdList = (filter, cwd, { unlimited = false } = {}) => {
   if (filter === 'ready') return runBd(['ready', '--json'], cwd);
   if (filter === 'blocked') return runBd(['blocked', '--json'], cwd);
   const args = ['list', '--json'];
   if (filter === 'all') args.push('--all');
   else if (filter) args.push('--status', filter);
+  // `--limit 0` lifts bd's default 50-row cap for the paginated flat views.
+  if (unlimited) args.push('--limit', '0');
   return runBd(args, cwd);
 };
 
+// bdList('all') with the 50-row cap lifted — used for enumerating every epic.
+export const bdListAll = (cwd) => bdList('all', cwd, { unlimited: true });
+
 export const bdShow = async (id, cwd) => {
   const res = await runBd(['show', id, '--json'], cwd);
   return Array.isArray(res) ? res[0] : res;
@@ -69,6 +78,6 @@ export const bdDepRemove = (child, parent, cwd) =>
 export const bdChildren = (id, cwd) => runBd(['children', id, '--json'], cwd);
 
 export const bdEpics = async (cwd) => {
-  const all = await runBd(['list', '--all', '--json'], cwd);
+  const all = await bdListAll(cwd);
   return Array.isArray(all) ? all.filter((b) => b.issue_type === 'epic') : [];
 };

package/src/keys.js

@@ -19,6 +19,7 @@ export const HELP_TEXT = [
   '  e           Filter by epic (modal picker; switches status to all)',
   '  r           Reload current filter from bd',
   '  /           In-memory title filter',
+  '  (all & closed tabs load more rows as you scroll to the bottom)',
   '',
   '  Mutations',
   '  ──────────────────────────────────────',

package/src/state.js

@@ -9,9 +9,33 @@ export const state = {
   filter: 'ready',
   typeFilter: 'all',   // 'all' | 'epic' | 'task'
   epicFilter: null,    // null or epic bead id — when set, list is scoped to that epic + its children
+  blockedIds: new Set(), // ids that appear in `bd blocked` — derived state, not raw status
+  pageSize: 100,        // lazy "load more" batch size for the flat all view
+  visibleCount: 0,     // how many of listOrder are currently rendered (paged mode)
   cwd: process.cwd(),
 };
 
+// The "all" and "closed" tabs (no epic filter) can hold huge numbers of beads,
+// so they use a flat, lazily-revealed list; every other view loads fully and
+// renders the epic→children tree.
+export function isPaged() {
+  return (state.filter === 'all' || state.filter === 'closed') && !state.epicFilter;
+}
+
+// Paged mode only renders the first visibleCount rows. After a reload that keeps
+// a deep selection, grow the window (to its batch boundary) so the selected bead
+// stays rendered — otherwise the cursor and state.selectedId desync and mutation
+// keys would act on an off-screen bead. Call AFTER selectedId is finalized.
+export function ensureSelectedVisible() {
+  if (!isPaged() || !state.selectedId) return;
+  const idx = state.listOrder.indexOf(state.selectedId);
+  if (idx < state.visibleCount) return;
+  state.visibleCount = Math.min(
+    state.listOrder.length,
+    Math.ceil((idx + 1) / state.pageSize) * state.pageSize,
+  );
+}
+
 function scopeToEpic(items, epicId) {
   const out = [];
   let inside = false;
@@ -42,6 +66,9 @@ export function applyTypeFilter() {
   }
   state.listOrder = items.map((t) => t.id);
   state.treeMeta = new Map(items.map((t) => [t.id, { depth: t.depth, isLast: t.isLast }]));
+  state.visibleCount = isPaged()
+    ? Math.min(state.pageSize, state.listOrder.length)
+    : state.listOrder.length;
 }
 
 function buildTreeOrder(beads, parentOf) {
@@ -75,8 +102,31 @@ function buildTreeOrder(beads, parentOf) {
   return ordered;
 }
 
+// Flat load for the paged tabs ("all" / "closed"). Skips the per-bead
+// parent-child dep fetch (which spawns one bd subprocess per bead) and the tree
+// build, so even very large repos load in a single bd call; the UI reveals rows
+// in pageSize batches.
+async function loadListFlat() {
+  const [beads, blocked] = await Promise.all([
+    bdList(state.filter, state.cwd, { unlimited: true }),
+    bdList('blocked', state.cwd).catch(() => []),
+  ]);
+  state.blockedIds = new Set((blocked || []).map((b) => b.id));
+  for (const b of beads) {
+    state.beadsById.set(b.id, { ...state.beadsById.get(b.id), ...b });
+  }
+  state.fullTreeItems = beads.map((b) => ({ id: b.id, depth: 0, isLast: false }));
+  applyTypeFilter();
+  return beads;
+}
+
 export async function loadList() {
-  const beads = await bdList(state.filter, state.cwd);
+  if (isPaged()) return loadListFlat();
+  const [beads, blocked] = await Promise.all([
+    bdList(state.filter, state.cwd),
+    bdList('blocked', state.cwd).catch(() => []),
+  ]);
+  state.blockedIds = new Set((blocked || []).map((b) => b.id));
   const byId = new Map(beads.map((b) => [b.id, b]));
 
   // Build parent-child map from real bd deps (dependency_type === 'parent-child').

package/src/views/detail.js

@@ -5,6 +5,22 @@ const STATUS_COLOR = {
   open: 'white', in_progress: 'cyan', blocked: 'red',
   deferred: 'yellow', closed: 'gray',
 };
+
+// Dep-row palette: tuned for at-a-glance scanning in the dependency list.
+//   open / ready → green   (go)
+//   in_progress  → yellow  (active)
+//   blocked      → red     (stop)
+//   deferred     → gray    (parked)
+//   closed       → gray    (done, recede)
+const DEP_STATUS_COLOR = {
+  open: 'green', in_progress: 'yellow', blocked: 'red',
+  deferred: 'gray', closed: 'gray',
+};
+
+const STATUS_ICON = {
+  open: '○', in_progress: '◐', blocked: '●',
+  closed: '✓', deferred: '❄',
+};
 const PRIORITY_COLOR  = ['red', 'yellow', 'green', 'cyan', 'gray'];
 const PRIORITY_LABEL  = ['Critical', 'High', 'Normal', 'Low', 'Trivial'];
 
@@ -30,11 +46,26 @@ function sectionHeader(title) {
   return `\n${bold(t('cyan', title))}\n${t('gray', '─'.repeat(44))}`;
 }
 
-function depLine(dep, arrow, color) {
-  const id    = esc(dep.id || String(dep));
-  const type  = esc(dep.dep_type || dep.type || 'blocks');
-  const title = dep.title ? ` ${t('gray', '— ' + esc(dep.title))}` : '';
-  return `  ${t(color, arrow)} {bold}${id}{/bold} ${t('gray', `[${type}]`)}${title}`;
+function depLine(dep) {
+  const rawId    = esc(dep.id || String(dep));
+  const rawTitle = dep.title ? esc(dep.title) : '';
+  const issueType = dep.issue_type ? esc(dep.issue_type) : null;
+
+  // Effective status mirrors how `bd blocked` derives the Blocked tab:
+  // an open bead whose blockers aren't all closed reads as "blocked",
+  // not "open". `bd dep list` only returns the raw stored status.
+  const effectiveStatus = (dep.status === 'open' && state.blockedIds.has(dep.id))
+    ? 'blocked'
+    : dep.status;
+
+  const statusColor = DEP_STATUS_COLOR[effectiveStatus] || 'white';
+  const icon      = STATUS_ICON[effectiveStatus] || ' ';
+  const idText    = `{bold}${rawId}{/bold}`;
+  const typeTag   = issueType ? ` [${issueType}]` : '';
+  const titleText = rawTitle ? ` — ${rawTitle}` : '';
+
+  const row = `${icon} ${idText}${typeTag}${titleText}`;
+  return `  {${statusColor}-fg}${row}{/${statusColor}-fg}`;
 }
 
 // Apply inline markdown styling to already-escaped text. Order matters:
@@ -153,11 +184,11 @@ export function renderDetail(box) {
   // ── Dependencies ───────────────────────────────────────────────────────────
   if (b.depsDown?.length > 0) {
     lines.push(sectionHeader(`Depends on (${b.depsDown.length})`));
-    for (const d of b.depsDown) lines.push(depLine(d, '→', 'yellow'));
+    for (const d of b.depsDown) lines.push(depLine(d));
   }
   if (b.depsUp?.length > 0) {
     lines.push(sectionHeader(`Needed by (${b.depsUp.length})`));
-    for (const d of b.depsUp) lines.push(depLine(d, '←', 'green'));
+    for (const d of b.depsUp) lines.push(depLine(d));
   }
 
   // ── Description ────────────────────────────────────────────────────────────

package/src/views/list.js

@@ -67,17 +67,28 @@ export function createList(screen) {
 }
 
 export function renderList(list) {
-  const items = state.listOrder.map((id) => {
+  const total = state.listOrder.length;
+  // In paged ("load more") mode only the first visibleCount rows are rendered;
+  // everything else renders the full list.
+  const shown = state.visibleCount > 0 && state.visibleCount < total
+    ? state.visibleCount
+    : total;
+  const ids = state.listOrder.slice(0, shown);
+
+  const items = ids.map((id) => {
     const b = state.beadsById.get(id);
     const { depth = 0, isLast = false } = state.treeMeta.get(id) ?? {};
     return b ? formatRow(b, depth, isLast) : t('gray', id);
   });
 
   const selIdx = state.selectedId
-    ? Math.max(0, state.listOrder.indexOf(state.selectedId))
+    ? Math.max(0, ids.indexOf(state.selectedId))
     : 0;
 
-  list.setLabel(` Beads ${t('gray', `(${state.listOrder.length})`)} `);
+  const label = shown < total
+    ? ` Beads ${t('gray', `(showing ${shown} of ${total})`)} `
+    : ` Beads ${t('gray', `(${total})`)} `;
+  list.setLabel(label);
   list.setItems(items);
-  if (state.listOrder.length > 0) list.select(selIdx);
+  if (ids.length > 0) list.select(Math.min(selIdx, ids.length - 1));
 }

package/src/views/modals.js

@@ -91,7 +91,15 @@ const CLEAR_FILTER_TAG = '__clear__';
 
 export function epicPicker(screen, epics, currentEpicId = null) {
   return new Promise((resolve, reject) => {
-    const sorted = [...epics].sort((a, b) => a.id.localeCompare(b.id));
+    // Newest epics on top: sort by created_at descending (ISO-8601 UTC strings
+    // sort lexicographically in chronological order). Fall back to id for ties
+    // or missing timestamps.
+    const sorted = [...epics].sort((a, b) => {
+      const ta = a.created_at || '';
+      const tb = b.created_at || '';
+      if (ta !== tb) return tb.localeCompare(ta);
+      return b.id.localeCompare(a.id);
+    });
     const rows = [];
     const ids = [];