bdtui 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [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.3.2",
   "description": "Terminal UI for the bd beads issue tracker",
   "type": "module",
   "bin": {

package/src/state.js

@@ -9,6 +9,7 @@ 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
   cwd: process.cwd(),
 };
 
@@ -76,7 +77,11 @@ function buildTreeOrder(beads, parentOf) {
 }
 
 export async function loadList() {
-  const beads = await bdList(state.filter, state.cwd);
+  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 ────────────────────────────────────────────────────────────