bdtui 0.7.2 → 0.8.1

package/src/views/detail.js

@@ -1,218 +1,231 @@
-import blessed from 'blessed';
-import { state } from '../state.js';
-
-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'];
-
-// Single pass: a two-step .replace(/\{/).replace(/\}/) would re-process the "}"
-// it just inserted into "{open}", corrupting any text containing a literal "}"
-// (e.g. a JSON/code snippet in a description) into a stray "{open}" token.
-function esc(s)          { return String(s ?? '').replace(/[{}]/g, (c) => (c === '{' ? '{open}' : '{close}')); }
-function t(color, text)  { return `{${color}-fg}${text}{/}`; }
-function bold(text)      { return `{bold}${text}{/bold}`; }
-function fmtDate(iso)    { return iso ? iso.slice(0, 10) : '—'; }
-
-function field(label, value, labelWidth = 10) {
-  return `${t('gray', (label + ':').padEnd(labelWidth))} ${value}`;
-}
-
-function visLen(s)        { return s.replace(/\{[^}]+\}/g, '').length; }
-function padRight(s, n)   { const p = n - visLen(s); return p > 0 ? s + ' '.repeat(p) : s; }
-
-function fieldRow(lLabel, lVal, rLabel, rVal, lValWidth = 14) {
-  const left  = t('gray', (lLabel + ':').padEnd(10)) + ' ' + padRight(lVal, lValWidth);
-  const right = '  ' + t('gray', (rLabel + ':').padEnd(10)) + ' ' + rVal;
-  return left + ' ' + t('gray', '│') + right;
-}
-
-function sectionHeader(title) {
-  return `\n${bold(t('cyan', title))}\n${t('gray', '─'.repeat(44))}`;
-}
-
-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:
-// inline code is captured first to placeholders so its content is not
-// mangled by bold/italic/link regexes.
-function applyInline(s) {
-  const codes = [];
-  let out = s.replace(/`([^`]+)`/g, (_, c) => {
-    codes.push(c);
-    return `\x00C${codes.length - 1}\x00`;
-  });
-  out = out.replace(/\*\*([^*]+)\*\*/g, '{bold}{white-fg}$1{/white-fg}{/bold}');
-  out = out.replace(/(^|[\s(])\*([^*\s][^*]*?)\*(?=[\s.,;:!?)]|$)/g, '$1{italic}$2{/italic}');
-  out = out.replace(/~~([^~]+)~~/g, '{strikethrough}$1{/strikethrough}');
-  out = out.replace(
-    /\[([^\]]+)\]\(([^)]+)\)/g,
-    '{underline}{cyan-fg}$1{/cyan-fg}{/underline} {gray-fg}($2){/gray-fg}',
-  );
-  out = out.replace(/\x00C(\d+)\x00/g, (_, i) => t('yellow', '`' + codes[+i] + '`'));
-  return out;
-}
-
-function renderDescription(lines, text) {
-  const src = text.split('\n');
-  let inCode = false;
-  for (const raw of src) {
-    const l = raw;
-
-    if (l.trim().startsWith('```')) {
-      inCode = !inCode;
-      lines.push(`  ${t('gray', '────')}`);
-      continue;
-    }
-    if (inCode) {
-      lines.push(`  ${t('green', esc(l))}`);
-      continue;
-    }
-
-    if (l.startsWith('### '))     lines.push(`  ${bold(t('blue', applyInline(esc(l.slice(4)))))}`);
-    else if (l.startsWith('## ')) lines.push(`  ${bold(t('cyan', applyInline(esc(l.slice(3)))))}`);
-    else if (l.startsWith('# '))  lines.push(`  ${bold(t('white', applyInline(esc(l.slice(2)))))}`);
-    else if (l.match(/^[-*] /))   lines.push(`  ${t('gray', '•')} ${applyInline(esc(l.slice(2)))}`);
-    else if (l.match(/^\s*\d+\.\s+/)) {
-      const m = l.match(/^(\s*)(\d+)\.\s+(.*)$/);
-      lines.push(`  ${m[1]}${t('gray', m[2] + '.')} ${applyInline(esc(m[3]))}`);
-    }
-    else if (l.startsWith('> '))  lines.push(`  ${t('gray', '│')} ${t('gray', applyInline(esc(l.slice(2))))}`);
-    else                          lines.push(`  ${applyInline(esc(l))}`);
-  }
-}
-
-let lastId = null;
-
-export function createDetail(screen) {
-  return blessed.box({
-    parent: screen,
-    top: 1,
-    left: '40%',
-    width: '60%',
-    bottom: 1,
-    border: { type: 'line' },
-    label: ' Detail ',
-    tags: true,
-    scrollable: true,
-    alwaysScroll: true,
-    keys: true,
-    mouse: true,
-    scrollbar: { ch: ' ', track: { bg: 'black' }, style: { bg: 'cyan' } },
-    style: {
-      border: { fg: 'gray' },
-      label: { fg: 'white', bold: true },
-    },
-  });
-}
-
-export function renderDetail(box) {
-  const id = state.selectedId;
-  if (!id) { box.setContent(t('gray', 'No bead selected.')); return; }
-
-  const b = state.beadsById.get(id);
-  if (!b) { box.setContent(t('gray', `Loading ${id}…`)); return; }
-
-  const resetScroll = id !== lastId;
-  lastId = id;
-
-  const prio       = b.priority ?? 2;
-  const prioColor  = PRIORITY_COLOR[prio] || 'white';
-  const prioLabel  = PRIORITY_LABEL[prio] || String(prio);
-  const statColor  = STATUS_COLOR[b.status] || 'white';
-
-  const lines = [];
-
-  // ── Header ─────────────────────────────────────────────────────────────────
-  lines.push(`{bold}{white-fg}${esc(b.id)}{/} {gray-fg}—{/} ${esc(b.title || '')}`);
-  lines.push(t('gray', '═'.repeat(50)));
-  lines.push('');
-
-  // ── Fields ─────────────────────────────────────────────────────────────────
-  lines.push(fieldRow(
-    'Status',   `{${statColor}-fg}{bold}${esc(b.status || '—')}{/bold}{/}`,
-    'Priority', `{${prioColor}-fg}{bold}P${prio} ${prioLabel}{/bold}{/}`,
-  ));
-  lines.push(fieldRow(
-    'Type',  t('white', esc(b.issue_type || '—')),
-    'Owner', t('white', esc(b.owner || '—')),
-  ));
-  lines.push(fieldRow(
-    'Created', t('gray', fmtDate(b.created_at)),
-    'Updated', t('gray', fmtDate(b.updated_at)),
-  ));
-
-  if (b.labels?.length > 0) {
-    lines.push(field('Labels', b.labels.map((l) => t('blue', esc(l))).join('  ')));
-  }
-
-  // ── Dependencies ───────────────────────────────────────────────────────────
-  if (b.depsDown?.length > 0) {
-    lines.push(sectionHeader(`Depends on (${b.depsDown.length})`));
-    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));
-  }
-
-  // ── Description ────────────────────────────────────────────────────────────
-  if (b.description) {
-    lines.push(sectionHeader('Description'));
-    lines.push('');
-    renderDescription(lines, b.description);
-  }
-
-  if (b.acceptance) {
-    lines.push(sectionHeader('Acceptance'));
-    lines.push('');
-    renderDescription(lines, b.acceptance);
-  }
-
-  if (b.notes) {
-    lines.push(sectionHeader('Notes'));
-    lines.push('');
-    renderDescription(lines, b.notes);
-  }
-
-  box.setContent(lines.join('\n'));
-  if (resetScroll) box.scrollTo(0);
-}
+import blessed from 'blessed';
+import { state } from '../state.js';
+
+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'];
+
+// Single pass: a two-step .replace(/\{/).replace(/\}/) would re-process the "}"
+// it just inserted into "{open}", corrupting any text containing a literal "}"
+// (e.g. a JSON/code snippet in a description) into a stray "{open}" token.
+function esc(s)          { return String(s ?? '').replace(/[{}]/g, (c) => (c === '{' ? '{open}' : '{close}')); }
+function t(color, text)  { return `{${color}-fg}${text}{/}`; }
+function bold(text)      { return `{bold}${text}{/bold}`; }
+function fmtDate(iso)    { return iso ? iso.slice(0, 10) : '—'; }
+
+function field(label, value, labelWidth = 10) {
+  return `${t('gray', (label + ':').padEnd(labelWidth))} ${value}`;
+}
+
+function visLen(s)        { return s.replace(/\{[^}]+\}/g, '').length; }
+function padRight(s, n)   { const p = n - visLen(s); return p > 0 ? s + ' '.repeat(p) : s; }
+
+function fieldRow(lLabel, lVal, rLabel, rVal, lValWidth = 14) {
+  const left  = t('gray', (lLabel + ':').padEnd(10)) + ' ' + padRight(lVal, lValWidth);
+  const right = '  ' + t('gray', (rLabel + ':').padEnd(10)) + ' ' + rVal;
+  return left + ' ' + t('gray', '│') + right;
+}
+
+function sectionHeader(title) {
+  return `\n${bold(t('cyan', title))}\n${t('gray', '─'.repeat(44))}`;
+}
+
+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:
+// inline code is captured first to placeholders so its content is not
+// mangled by bold/italic/link regexes.
+function applyInline(s) {
+  const codes = [];
+  let out = s.replace(/`([^`]+)`/g, (_, c) => {
+    codes.push(c);
+    return `\x00C${codes.length - 1}\x00`;
+  });
+  out = out.replace(/\*\*([^*]+)\*\*/g, '{bold}{white-fg}$1{/white-fg}{/bold}');
+  out = out.replace(/(^|[\s(])\*([^*\s][^*]*?)\*(?=[\s.,;:!?)]|$)/g, '$1{italic}$2{/italic}');
+  out = out.replace(/~~([^~]+)~~/g, '{strikethrough}$1{/strikethrough}');
+  out = out.replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '{underline}{cyan-fg}$1{/cyan-fg}{/underline} {gray-fg}($2){/gray-fg}',
+  );
+  out = out.replace(/\x00C(\d+)\x00/g, (_, i) => t('yellow', '`' + codes[+i] + '`'));
+  return out;
+}
+
+function renderDescription(lines, text) {
+  const src = text.split('\n');
+  let inCode = false;
+  for (const raw of src) {
+    const l = raw;
+
+    if (l.trim().startsWith('```')) {
+      inCode = !inCode;
+      lines.push(`  ${t('gray', '────')}`);
+      continue;
+    }
+    if (inCode) {
+      lines.push(`  ${t('green', esc(l))}`);
+      continue;
+    }
+
+    if (l.startsWith('### '))     lines.push(`  ${bold(t('blue', applyInline(esc(l.slice(4)))))}`);
+    else if (l.startsWith('## ')) lines.push(`  ${bold(t('cyan', applyInline(esc(l.slice(3)))))}`);
+    else if (l.startsWith('# '))  lines.push(`  ${bold(t('white', applyInline(esc(l.slice(2)))))}`);
+    else if (l.match(/^[-*] /))   lines.push(`  ${t('gray', '•')} ${applyInline(esc(l.slice(2)))}`);
+    else if (l.match(/^\s*\d+\.\s+/)) {
+      const m = l.match(/^(\s*)(\d+)\.\s+(.*)$/);
+      lines.push(`  ${m[1]}${t('gray', m[2] + '.')} ${applyInline(esc(m[3]))}`);
+    }
+    else if (l.startsWith('> '))  lines.push(`  ${t('gray', '│')} ${t('gray', applyInline(esc(l.slice(2))))}`);
+    else                          lines.push(`  ${applyInline(esc(l))}`);
+  }
+}
+
+let lastId = null;
+
+export function createDetail(screen) {
+  return blessed.box({
+    parent: screen,
+    top: 1,
+    left: '40%',
+    width: '60%',
+    bottom: 1,
+    border: { type: 'line' },
+    label: ' Detail ',
+    tags: true,
+    scrollable: true,
+    alwaysScroll: true,
+    keys: true,
+    vi: true,
+    mouse: true,
+    scrollbar: { ch: ' ', track: { bg: 'black' }, style: { bg: 'cyan' } },
+    style: {
+      border: { fg: 'gray' },
+      label: { fg: 'white', bold: true },
+    },
+  });
+}
+
+export function renderDetail(box) {
+  const id = state.selectedId;
+  if (!id) { box.setContent(t('gray', 'No bead selected.')); return; }
+
+  const b = state.beadsById.get(id);
+  if (!b) { box.setContent(t('gray', `Loading ${id}…`)); return; }
+
+  const resetScroll = id !== lastId;
+  lastId = id;
+
+  const prio       = b.priority ?? 2;
+  const prioColor  = PRIORITY_COLOR[prio] || 'white';
+  const prioLabel  = PRIORITY_LABEL[prio] || String(prio);
+  const statColor  = STATUS_COLOR[b.status] || 'white';
+
+  const lines = [];
+
+  // ── Header ─────────────────────────────────────────────────────────────────
+  lines.push(`{bold}{white-fg}${esc(b.id)}{/} {gray-fg}—{/} ${esc(b.title || '')}`);
+  lines.push(t('gray', '═'.repeat(50)));
+  lines.push('');
+
+  // ── Fields ─────────────────────────────────────────────────────────────────
+  lines.push(fieldRow(
+    'Status',   `{${statColor}-fg}{bold}${esc(b.status || '—')}{/bold}{/}`,
+    'Priority', `{${prioColor}-fg}{bold}P${prio} ${prioLabel}{/bold}{/}`,
+  ));
+  lines.push(fieldRow(
+    'Type',  t('white', esc(b.issue_type || '—')),
+    'Owner', t('white', esc(b.owner || '—')),
+  ));
+  lines.push(fieldRow(
+    'Created', t('gray', fmtDate(b.created_at)),
+    'Updated', t('gray', fmtDate(b.updated_at)),
+  ));
+
+  if (b.labels?.length > 0) {
+    lines.push(field('Labels', b.labels.map((l) => t('blue', esc(l))).join('  ')));
+  }
+
+  // ── Close reason (closed beads) ─────────────────────────────────────────────
+  // bd stores the text from `bd close --reason` in `close_reason`; loadDetail
+  // already spreads the full `bd show` object onto the bead, so it's available
+  // here. Rendered high in the pane (before deps) so a closed bead's resolution
+  // is visible without scrolling. Truthy guard → open beads show nothing.
+  if (b.close_reason) {
+    const when = b.closed_at ? ` · ${fmtDate(b.closed_at)}` : '';
+    lines.push(sectionHeader(`Close Reason${when}`));
+    lines.push('');
+    renderDescription(lines, b.close_reason);
+  }
+
+  // ── Dependencies ───────────────────────────────────────────────────────────
+  if (b.depsDown?.length > 0) {
+    lines.push(sectionHeader(`Depends on (${b.depsDown.length})`));
+    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));
+  }
+
+  // ── Description ────────────────────────────────────────────────────────────
+  if (b.description) {
+    lines.push(sectionHeader('Description'));
+    lines.push('');
+    renderDescription(lines, b.description);
+  }
+
+  if (b.acceptance) {
+    lines.push(sectionHeader('Acceptance'));
+    lines.push('');
+    renderDescription(lines, b.acceptance);
+  }
+
+  if (b.notes) {
+    lines.push(sectionHeader('Notes'));
+    lines.push('');
+    renderDescription(lines, b.notes);
+  }
+
+  box.setContent(lines.join('\n'));
+  if (resetScroll) box.scrollTo(0);
+}

package/src/views/list.js

@@ -1,99 +1,99 @@
-import blessed from 'blessed';
-import { state } from '../state.js';
-
-const STATUS_SHORT = {
-  open:        'open   ',
-  in_progress: 'in_prog',
-  blocked:     'blocked',
-  deferred:    'deferrd',
-  closed:      'closed ',
-};
-
-const PRIORITY_COLOR = ['red', 'yellow', 'green', 'cyan', 'gray'];
-const STATUS_COLOR = {
-  open: 'white', in_progress: 'cyan', blocked: 'red',
-  deferred: 'yellow', closed: 'gray',
-};
-
-const TYPE_BADGE = {
-  epic:    '{magenta-fg}E{/}',
-  task:    '{blue-fg}T{/}',
-  chore:   '{gray-fg}C{/}',
-  bug:     '{red-fg}B{/}',
-  story:   '{cyan-fg}S{/}',
-  feature: '{green-fg}F{/}',
-};
-
-function t(color, text) {
-  return `{${color}-fg}${text}{/}`;
-}
-
-function formatRow(bead, depth = 0, isLast = false) {
-  const id   = bead.id.padEnd(14);
-  const p    = `P${bead.priority ?? 2}`;
-  // Effective status mirrors how `bd blocked` derives the Blocked tab:
-  // an open bead whose blockers aren't all closed reads as "blocked",
-  // not "open". The raw `bd list` rows only carry the stored status.
-  const stat = (bead.status === 'open' && state.blockedIds.has(bead.id))
-    ? 'blocked'
-    : (bead.status || 'open');
-  const s    = (STATUS_SHORT[stat] || stat.slice(0, 7)).padEnd(7);
-  const badge = TYPE_BADGE[bead.issue_type] ?? t('gray', '?');
-  const prefix = depth > 0 ? t('gray', isLast ? ' └ ' : ' ├ ') : '   ';
-  const title = bead.title || '';
-
-  const idCol = t('gray', id);
-  const pCol  = t(PRIORITY_COLOR[bead.priority ?? 2] ?? 'white', p);
-  const sCol  = t(STATUS_COLOR[stat] ?? 'white', s);
-
-  return `${idCol} ${pCol} ${sCol} ${badge}${prefix}${title}`;
-}
-
-export function createList(screen) {
-  return blessed.list({
-    parent: screen,
-    top: 1,
-    left: 0,
-    width: '40%',
-    bottom: 1,
-    border: { type: 'line' },
-    label: ' Beads ',
-    tags: true,
-    keys: true,
-    vi: true,
-    mouse: true,
-    scrollbar: { ch: ' ', track: { bg: 'black' }, style: { bg: 'cyan' } },
-    style: {
-      selected: { bg: 'blue', fg: 'white', bold: true },
-      border: { fg: 'gray' },
-      label: { fg: 'white', bold: true },
-    },
-  });
-}
-
-export function renderList(list) {
-  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, ids.indexOf(state.selectedId))
-    : 0;
-
-  const label = shown < total
-    ? ` Beads ${t('gray', `(showing ${shown} of ${total})`)} `
-    : ` Beads ${t('gray', `(${total})`)} `;
-  list.setLabel(label);
-  list.setItems(items);
-  if (ids.length > 0) list.select(Math.min(selIdx, ids.length - 1));
-}
+import blessed from 'blessed';
+import { state } from '../state.js';
+
+const STATUS_SHORT = {
+  open:        'open   ',
+  in_progress: 'in_prog',
+  blocked:     'blocked',
+  deferred:    'deferrd',
+  closed:      'closed ',
+};
+
+const PRIORITY_COLOR = ['red', 'yellow', 'green', 'cyan', 'gray'];
+const STATUS_COLOR = {
+  open: 'white', in_progress: 'cyan', blocked: 'red',
+  deferred: 'yellow', closed: 'gray',
+};
+
+const TYPE_BADGE = {
+  epic:    '{magenta-fg}E{/}',
+  task:    '{blue-fg}T{/}',
+  chore:   '{gray-fg}C{/}',
+  bug:     '{red-fg}B{/}',
+  story:   '{cyan-fg}S{/}',
+  feature: '{green-fg}F{/}',
+};
+
+function t(color, text) {
+  return `{${color}-fg}${text}{/}`;
+}
+
+function formatRow(bead, depth = 0, isLast = false) {
+  const id   = bead.id.padEnd(14);
+  const p    = `P${bead.priority ?? 2}`;
+  // Effective status mirrors how `bd blocked` derives the Blocked tab:
+  // an open bead whose blockers aren't all closed reads as "blocked",
+  // not "open". The raw `bd list` rows only carry the stored status.
+  const stat = (bead.status === 'open' && state.blockedIds.has(bead.id))
+    ? 'blocked'
+    : (bead.status || 'open');
+  const s    = (STATUS_SHORT[stat] || stat.slice(0, 7)).padEnd(7);
+  const badge = TYPE_BADGE[bead.issue_type] ?? t('gray', '?');
+  const prefix = depth > 0 ? t('gray', isLast ? ' └ ' : ' ├ ') : '   ';
+  const title = bead.title || '';
+
+  const idCol = t('gray', id);
+  const pCol  = t(PRIORITY_COLOR[bead.priority ?? 2] ?? 'white', p);
+  const sCol  = t(STATUS_COLOR[stat] ?? 'white', s);
+
+  return `${idCol} ${pCol} ${sCol} ${badge}${prefix}${title}`;
+}
+
+export function createList(screen) {
+  return blessed.list({
+    parent: screen,
+    top: 1,
+    left: 0,
+    width: '40%',
+    bottom: 1,
+    border: { type: 'line' },
+    label: ' Beads ',
+    tags: true,
+    keys: true,
+    vi: true,
+    mouse: true,
+    scrollbar: { ch: ' ', track: { bg: 'black' }, style: { bg: 'cyan' } },
+    style: {
+      selected: { bg: 'blue', fg: 'white', bold: true },
+      border: { fg: 'gray' },
+      label: { fg: 'white', bold: true },
+    },
+  });
+}
+
+export function renderList(list) {
+  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, ids.indexOf(state.selectedId))
+    : 0;
+
+  const label = shown < total
+    ? ` Beads ${t('gray', `(showing ${shown} of ${total})`)} `
+    : ` Beads ${t('gray', `(${total})`)} `;
+  list.setLabel(label);
+  list.setItems(items);
+  if (ids.length > 0) list.select(Math.min(selIdx, ids.length - 1));
+}