bdtui 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,39 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.2.1] - 2026-05-11
+
+### Fixed
+
+- Screenshot not rendering on npmjs.com — switched to absolute GitHub raw URL
+
+## [0.2.0] - 2026-05-11
+
+### Fixed
+
+- Clipboard action stuck at "Copying" after the first use — now resolves on stdin flush instead of waiting for daemon processes (`wl-copy`, `xclip`) to exit
+
+### Changed
+
+- `blocked` tab now uses `bd blocked` (dependency-blocked issues) instead of `bd list --status blocked`
+- Workflow skill picker renamed to "Copy workflow command" and positioned on the left side of the screen
+- Detail pane field rows use a `│` column separator with consistent alignment across all rows
+
+### Added
+
+- Screenshot in README
+
+## [0.1.0] - 2026-04-28
+
+### Added
+
+- Initial MVP: blessed two-pane TUI (list + detail) for `bd`
+- Tree view grouping tasks under their parent epic
+- Status and type filter tabs with keyboard cycling
+- Rich color scheme for status, priority, and dependency lines
+- Inline markdown rendering in description, acceptance, and notes fields
+- Mutation keys: change status, close, claim, reopen, change priority, manage deps
+- `y` to yank bead ID to clipboard, `w` to copy a workflow skill command
+- In-memory title filter (`/`)
+- Help overlay (`?`)

package/README.md

@@ -2,11 +2,18 @@
 
 Fast blessed-based terminal UI for the [`bd`](https://github.com/gastownhall/beads) beads issue tracker.
 
+![bdtui screenshot](https://raw.githubusercontent.com/jsiovn/bdtui/master/docs/images/bdtui.png)
+
 ## Requirements
 
 - Node ≥ 20
 - `bd` installed and on `$PATH`
 - A project with a `.beads/` database (created by `bd init`)
+- (Optional) A clipboard helper for the `y` yank key:
+  - Linux/Wayland: `wl-clipboard` (`sudo apt install wl-clipboard`)
+  - Linux/X11: `xclip` (`sudo apt install xclip`) or `xsel`
+  - macOS: `pbcopy` (preinstalled)
+  - Windows: `clip.exe` (preinstalled on Windows 10/11)
 
 ## Install
 
@@ -72,6 +79,7 @@ be-12  P2 ready   T  └ Another child
 | `p` | Change priority |
 | `D` | Dependency menu (add / remove) |
 | `y` | Yank bead ID to clipboard |
+| `w` | Pick a workflow skill (`/executor-task`, `/executor-task-worktree`, `/executor-epic-task`, `/executor-epic-task-worktree`) and copy it with the selected task's ID. Disabled for epics. See [workflow-template](https://github.com/jsiovn/workflow-template). |
 | `?` | Help overlay |
 | `q` / `Ctrl-C` | Quit |
 

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "bdtui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Terminal UI for the bd beads issue tracker",
   "type": "module",
-  "bin": { "bdtui": "bin/bdtui.js" },
-  "files": ["bin", "src", "README.md"],
+  "bin": {
+    "bdtui": "bin/bdtui.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "author": "JSIOVN",
   "license": "MIT",
-  "engines": { "node": ">=20" },
+  "engines": {
+    "node": ">=20"
+  },
   "dependencies": {
     "blessed": "^0.1.81"
   }

package/src/app.js

@@ -1,13 +1,14 @@
 import blessed from 'blessed';
 import { execFile } from 'child_process';
-import { state, loadList, loadDetail, applyMutation } from './state.js';
+import { state, loadList, loadDetail, applyMutation, applyTypeFilter } from './state.js';
 import { createList, renderList } from './views/list.js';
 import { createDetail, renderDetail } from './views/detail.js';
-import { statusPicker, priorityPicker, textPrompt, depMenu } from './views/modals.js';
+import { statusPicker, priorityPicker, textPrompt, depMenu, skillPicker } from './views/modals.js';
 import { showHelp } from './keys.js';
 import { bdUpdate, bdClose, bdClaim, bdReopen, bdDepAdd, bdDepRemove } from './bd.js';
 
-const FILTERS = ['ready', 'open', 'in_progress', 'all'];
+const FILTERS = ['blocked', 'ready', 'in_progress', 'closed', 'all'];
+const TYPE_FILTERS = ['all', 'epic', 'task'];
 
 export async function run(cwd) {
   state.cwd = cwd;
@@ -36,11 +37,22 @@ export async function run(cwd) {
 
   let debounceTimer = null;
 
-  function setStatus(msg, isError = false) {
+  let statusTimer = null;
+  function defaultStatus() {
+    return state.filter ? `Filter: ${state.filter}` : 'Ready';
+  }
+  function setStatus(msg, isError = false, transient = false) {
+    if (statusTimer) { clearTimeout(statusTimer); statusTimer = null; }
     const icon = isError ? '{red-fg}✗{/}' : '{green-fg}●{/}';
     const text = isError ? `{red-fg}${msg}{/}` : msg;
     statusBar.setContent(` ${icon} ${text}  {gray-fg}? help · q quit{/}`);
     screen.render();
+    if (transient) {
+      statusTimer = setTimeout(() => {
+        statusTimer = null;
+        setStatus(defaultStatus());
+      }, 3000);
+    }
   }
 
   function renderTabBar() {
@@ -50,8 +62,10 @@ export async function run(cwd) {
         : `{gray-fg} ${f} {/}`;
     });
     const count = state.listOrder.length;
+    const typeLabel = state.typeFilter === 'all' ? 'all' : `${state.typeFilter} only`;
+    const typeInfo = `  {gray-fg}│{/}  {yellow-fg}filter:{/} ${typeLabel}`;
     const info  = count > 0 ? `{gray-fg}  │  ${count} beads{/}` : '';
-    tabBar.setContent(tabs.join('{gray-fg}│{/}') + info);
+    tabBar.setContent(tabs.join('{gray-fg}│{/}') + typeInfo + info);
   }
 
   function setFocusBorder(focused) {
@@ -88,7 +102,7 @@ export async function run(cwd) {
           renderDetail(detail);
           screen.render();
         } catch (err) {
-          setStatus(err.message, true);
+          setStatus(err.message, true, true);
         }
       }, 80);
     });
@@ -112,13 +126,14 @@ export async function run(cwd) {
       render();
       setStatus('Ready');
     } catch (err) {
-      setStatus(err.message, true);
+      setStatus(err.message, true, true);
     }
   }
 
-  async function cycleFilter() {
+  async function cycleFilter(dir = 1) {
     const idx = FILTERS.indexOf(state.filter);
-    state.filter = FILTERS[(idx + 1) % FILTERS.length];
+    const next = (idx + dir + FILTERS.length) % FILTERS.length;
+    state.filter = FILTERS[next];
     setStatus(`Filter: ${state.filter} — loading…`);
     try {
       await loadList();
@@ -127,42 +142,83 @@ export async function run(cwd) {
       render();
       setStatus(`Filter: ${state.filter}`);
     } catch (err) {
-      setStatus(err.message, true);
+      setStatus(err.message, true, true);
+    }
+  }
+
+  async function cycleTypeFilter() {
+    const idx = TYPE_FILTERS.indexOf(state.typeFilter);
+    state.typeFilter = TYPE_FILTERS[(idx + 1) % TYPE_FILTERS.length];
+    applyTypeFilter();
+    if (state.selectedId && !state.listOrder.includes(state.selectedId)) {
+      state.selectedId = state.listOrder[0] || null;
+    } else if (!state.selectedId) {
+      state.selectedId = state.listOrder[0] || null;
+    }
+    render();
+    if (state.selectedId) {
+      try {
+        await loadDetail(state.selectedId);
+        renderDetail(detail);
+        screen.render();
+      } catch (err) {
+        setStatus(err.message, true, true);
+        return;
+      }
     }
+    setStatus(`Type: ${state.typeFilter}`, false, true);
   }
 
   // ── Global keys ────────────────────────────────────────────────────────────
+  // Modal open? swallow global keys so modals own their own keybindings
+  // (e.g. Esc/q close the help dialog instead of quitting the app).
+  let modalOpen = false;
+  function key(keys, handler) {
+    screen.key(keys, (...args) => {
+      if (modalOpen) return;
+      handler(...args);
+    });
+  }
 
-  screen.key(['q', 'C-c'], () => { screen.destroy(); process.exit(0); });
+  key(['q', 'C-c'], () => { screen.destroy(); process.exit(0); });
 
-  screen.key(['r'], refresh);
-  screen.key(['f'], cycleFilter);
+  key(['r'], refresh);
+  key(['tab'], () => cycleFilter(1));
+  key(['S-tab'], () => cycleFilter(-1));
+  key(['t'], cycleTypeFilter);
 
-  screen.key(['?'], () => showHelp(screen, () => { list.focus(); screen.render(); }));
+  key(['?'], () => {
+    modalOpen = true;
+    showHelp(screen, () => {
+      modalOpen = false;
+      list.focus();
+      screen.render();
+    });
+  });
 
-  screen.key(['enter', 'l'], () => {
+  key(['enter', 'l'], () => {
     if (screen.focused === list) { setFocusBorder('detail'); detail.focus(); screen.render(); }
   });
 
-  screen.key(['h', 'escape'], () => {
+  key(['h', 'escape'], () => {
     if (screen.focused !== list) { setFocusBorder('list'); list.focus(); screen.render(); }
   });
 
-  screen.key(['g'], () => {
+  key(['g'], () => {
     if (screen.focused !== list) return;
     list.select(0);
     onNav();
     screen.render();
   });
 
-  screen.key(['G'], () => {
+  key(['G'], () => {
     if (screen.focused !== list) return;
     list.select(state.listOrder.length - 1);
     onNav();
     screen.render();
   });
 
-  screen.key(['/'], async () => {
+  key(['/'], async () => {
     if (screen.focused !== list) return;
     try {
       const query = await textPrompt(screen, 'Filter by title');
@@ -185,7 +241,7 @@ export async function run(cwd) {
 
   // ── Mutation keys (list focus only) ────────────────────────────────────────
 
-  screen.key(['s'], async () => {
+  key(['s'], async () => {
     if (screen.focused !== list || !state.selectedId) return;
     const id = state.selectedId;
     try {
@@ -197,14 +253,14 @@ export async function run(cwd) {
       renderList(list);
       renderDetail(detail);
       screen.render();
-      setStatus(`${id}: ${oldStatus} → ${newStatus}`);
+      setStatus(`${id}: ${oldStatus} → ${newStatus}`, false, true);
     } catch (err) {
       list.focus();
-      if (err.message !== 'cancelled') setStatus(err.message, true);
+      if (err.message !== 'cancelled') setStatus(err.message, true, true);
     }
   });
 
-  screen.key(['c'], async () => {
+  key(['c'], async () => {
     if (screen.focused !== list || !state.selectedId) return;
     const id = state.selectedId;
     try {
@@ -214,14 +270,14 @@ export async function run(cwd) {
       await applyMutation(id, () => bdClose(id, reason, state.cwd));
       await loadList();
       render();
-      setStatus(`Closed ${id}`);
+      setStatus(`Closed ${id}`, false, true);
     } catch (err) {
       list.focus();
-      if (err.message !== 'cancelled') setStatus(err.message, true);
+      if (err.message !== 'cancelled') setStatus(err.message, true, true);
     }
   });
 
-  screen.key(['C'], async () => {
+  key(['C'], async () => {
     if (screen.focused !== list || !state.selectedId) return;
     const id = state.selectedId;
     setStatus(`Claiming ${id}…`);
@@ -230,13 +286,13 @@ export async function run(cwd) {
       renderList(list);
       renderDetail(detail);
       screen.render();
-      setStatus(`Claimed ${id}`);
+      setStatus(`Claimed ${id}`, false, true);
     } catch (err) {
-      setStatus(err.message, true);
+      setStatus(err.message, true, true);
     }
   });
 
-  screen.key(['o'], async () => {
+  key(['o'], async () => {
     if (screen.focused !== list || !state.selectedId) return;
     const id = state.selectedId;
     setStatus(`Reopening ${id}…`);
@@ -244,13 +300,13 @@ export async function run(cwd) {
       await applyMutation(id, () => bdReopen(id, state.cwd));
       await loadList();
       render();
-      setStatus(`Reopened ${id}`);
+      setStatus(`Reopened ${id}`, false, true);
     } catch (err) {
-      setStatus(err.message, true);
+      setStatus(err.message, true, true);
     }
   });
 
-  screen.key(['p'], async () => {
+  key(['p'], async () => {
     if (screen.focused !== list || !state.selectedId) return;
     const id = state.selectedId;
     try {
@@ -261,14 +317,14 @@ export async function run(cwd) {
       renderList(list);
       renderDetail(detail);
       screen.render();
-      setStatus(`${id}: priority → ${priority}`);
+      setStatus(`${id}: priority → ${priority}`, false, true);
     } catch (err) {
       list.focus();
-      if (err.message !== 'cancelled') setStatus(err.message, true);
+      if (err.message !== 'cancelled') setStatus(err.message, true, true);
     }
   });
 
-  screen.key(['D'], async () => {
+  key(['D'], async () => {
     if (screen.focused !== list || !state.selectedId) return;
     const id = state.selectedId;
     try {
@@ -277,34 +333,78 @@ export async function run(cwd) {
       if (result.action === 'add') {
         setStatus(`Adding dep: ${id} → ${result.targetId} [${result.type}]…`);
         await applyMutation(id, () => bdDepAdd(id, result.targetId, result.type, state.cwd));
-        setStatus(`Added: ${id} → ${result.targetId} [${result.type}]`);
+        setStatus(`Added: ${id} → ${result.targetId} [${result.type}]`, false, true);
       } else {
         setStatus(`Removing dep: ${id} → ${result.targetId}…`);
         await applyMutation(id, () => bdDepRemove(id, result.targetId, state.cwd));
-        setStatus(`Removed dep: ${id} → ${result.targetId}`);
+        setStatus(`Removed dep: ${id} → ${result.targetId}`, false, true);
       }
       renderDetail(detail);
       screen.render();
     } catch (err) {
       list.focus();
-      if (err.message !== 'cancelled') setStatus(err.message, true);
+      if (err.message !== 'cancelled') setStatus(err.message, true, true);
     }
   });
 
-  screen.key(['y'], () => {
+  async function copyToClipboard(text, { okMsg, busyMsg } = {}) {
+    setStatus(busyMsg || `Copying…`);
+    const write = (cmd, args) => new Promise((resolve, reject) => {
+      let settled = false;
+      const finish = (err) => { if (!settled) { settled = true; err ? reject(err) : resolve(); } };
+      const p = execFile(cmd, args, (err) => finish(err || null));
+      p.on('error', finish);
+      if (p.stdin) {
+        p.stdin.once('finish', () => setTimeout(() => finish(null), 100));
+        p.stdin.end(text);
+      }
+    });
+    const candidates = process.platform === 'win32'
+      ? [['clip', []]]
+      : [
+          ['wl-copy', []],
+          ['xclip', ['-selection', 'clipboard']],
+          ['xsel', ['--clipboard', '--input']],
+          ['pbcopy', []],
+        ];
+    for (const [cmd, args] of candidates) {
+      try {
+        await write(cmd, args);
+        setStatus(okMsg || `Copied`, false, true);
+        return;
+      } catch {}
+    }
+    const hint = process.platform === 'win32'
+      ? 'clip.exe missing'
+      : 'install wl-clipboard, xclip, or xsel';
+    setStatus(`clipboard unavailable — ${hint}`, true, true);
+  }
+
+  key(['y'], () => {
     const id = state.selectedId;
     if (!id) return;
-    const write = (cmd, args) => new Promise((res) => {
-      const p = execFile(cmd, args, res);
-      p.stdin?.end(id);
-    });
-    write('wl-copy', [])
-      .catch(() => write('xclip', ['-selection', 'clipboard']))
-      .catch(() => write('xsel', ['--clipboard', '--input']))
-      .catch(() => write('pbcopy', []))
-      .then((err) => {
-        setStatus(err ? `${id} (clipboard unavailable)` : `Copied ${id}`);
+    copyToClipboard(id, { busyMsg: `Copying ${id}…`, okMsg: `Copied ${id}` });
+  });
+
+  key(['w'], async () => {
+    if (screen.focused !== list || !state.selectedId) return;
+    const id = state.selectedId;
+    const bead = state.beadsById.get(id);
+    if (bead?.issue_type === 'epic') {
+      setStatus(`${id} is an epic — workflow skills apply to tasks only`, true, true);
+      return;
+    }
+    try {
+      const line = await skillPicker(screen, id);
+      list.focus();
+      await copyToClipboard(line, {
+        busyMsg: `Copying ${line}…`,
+        okMsg: `Copied: ${line}`,
       });
+    } catch (err) {
+      list.focus();
+      if (err.message !== 'cancelled') setStatus(err.message, true, true);
+    }
   });
 
   // ── Boot ───────────────────────────────────────────────────────────────────

package/src/bd.js

@@ -14,6 +14,7 @@ async function runBd(args, cwd) {
 
 export const bdList = (filter, cwd) => {
   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);

package/src/keys.js

@@ -13,7 +13,9 @@ export const HELP_TEXT = [
   '',
   '  Filters & refresh',
   '  ──────────────────────────────────────',
-  '  f           Cycle filter (ready/open/in_progress/all)',
+  '  Tab         Next status filter (blocked/ready/in_progress/closed/all)',
+  '  Shift+Tab   Previous status filter',
+  '  t           Cycle type filter (all/epic/task)',
   '  r           Reload current filter from bd',
   '  /           In-memory title filter',
   '',
@@ -29,6 +31,7 @@ export const HELP_TEXT = [
   '  Other',
   '  ──────────────────────────────────────',
   '  y           Yank bead ID to clipboard',
+  '  w           Copy workflow skill command for selected task',
   '  ?           Toggle this help',
   '  q / Ctrl-C  Quit',
   '',

package/src/state.js

@@ -2,13 +2,26 @@ import { bdList, bdShow, bdDeps, bdDepListDown } from './bd.js';
 
 export const state = {
   beadsById: new Map(),
+  fullTreeItems: [],   // unfiltered ordered tree items (before typeFilter)
   listOrder: [],
   treeMeta: new Map(), // id -> { depth: 0|1, isLast: bool }
   selectedId: null,
   filter: 'ready',
+  typeFilter: 'all',   // 'all' | 'epic' | 'task'
   cwd: process.cwd(),
 };
 
+export function applyTypeFilter() {
+  let items = state.fullTreeItems;
+  if (state.typeFilter !== 'all') {
+    items = items
+      .filter((t) => state.beadsById.get(t.id)?.issue_type === state.typeFilter)
+      .map((t) => ({ id: t.id, depth: 0, isLast: false }));
+  }
+  state.listOrder = items.map((t) => t.id);
+  state.treeMeta = new Map(items.map((t) => [t.id, { depth: t.depth, isLast: t.isLast }]));
+}
+
 function buildTreeOrder(beads, parentOf) {
   const byId = new Map(beads.map((b) => [b.id, b]));
   const childrenOf = new Map();
@@ -73,13 +86,12 @@ export async function loadList() {
     }
   }
 
-  const treeItems = buildTreeOrder(beads, parentOf);
-  state.listOrder = treeItems.map((t) => t.id);
-  state.treeMeta = new Map(treeItems.map((t) => [t.id, { depth: t.depth, isLast: t.isLast }]));
-
   for (const b of beads) {
     state.beadsById.set(b.id, { ...state.beadsById.get(b.id), ...b });
   }
+
+  state.fullTreeItems = buildTreeOrder(beads, parentOf);
+  applyTypeFilter();
   return beads;
 }
 

package/src/views/detail.js

@@ -8,6 +8,7 @@ const STATUS_COLOR = {
 const PRIORITY_COLOR  = ['red', 'yellow', 'green', 'cyan', 'gray'];
 const PRIORITY_LABEL  = ['Critical', 'High', 'Normal', 'Low', 'Trivial'];
 
+function esc(s)          { return String(s ?? '').replace(/\{/g, '{open}').replace(/\}/g, '{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) : '—'; }
@@ -16,23 +17,72 @@ 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, arrow, color) {
-  const id    = dep.id || String(dep);
-  const type  = dep.dep_type || dep.type || 'blocks';
-  const title = dep.title ? ` ${t('gray', '— ' + dep.title)}` : '';
+  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}`;
 }
 
+// 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) {
-  for (const l of text.split('\n')) {
-    if (l.startsWith('## '))      lines.push(`  ${bold(t('cyan', l.slice(3)))}`);
-    else if (l.startsWith('# '))  lines.push(`  ${bold(t('white', l.slice(2)))}`);
-    else if (l.match(/^[-*] /))   lines.push(`  ${t('gray', '•')} ${l.slice(2)}`);
-    else                          lines.push(`  ${l}`);
+  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))}`);
   }
 }
 
@@ -78,29 +128,26 @@ export function renderDetail(box) {
   const lines = [];
 
   // ── Header ─────────────────────────────────────────────────────────────────
-  lines.push(`{bold}{white-fg}${b.id}{/} {gray-fg}—{/} ${b.title || ''}`);
+  lines.push(`{bold}{white-fg}${esc(b.id)}{/} {gray-fg}—{/} ${esc(b.title || '')}`);
   lines.push(t('gray', '═'.repeat(50)));
   lines.push('');
 
   // ── Fields ─────────────────────────────────────────────────────────────────
-  lines.push(
-    field('Status',   `{${statColor}-fg}{bold}${b.status || '—'}{/bold}{/}`) +
-    '    ' +
-    field('Priority', `{${prioColor}-fg}{bold}P${prio} ${prioLabel}{/bold}{/}`)
-  );
-  lines.push(
-    field('Type',     t('white', b.issue_type || '—')) +
-    '    ' +
-    field('Owner',    t('white', b.owner || '—'))
-  );
-  lines.push(
-    field('Created',  t('gray', fmtDate(b.created_at))) +
-    '    ' +
-    field('Updated',  t('gray', fmtDate(b.updated_at)))
-  );
+  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', l)).join('  ')));
+    lines.push(field('Labels', b.labels.map((l) => t('blue', esc(l))).join('  ')));
   }
 
   // ── Dependencies ───────────────────────────────────────────────────────────

package/src/views/modals.js

@@ -1,6 +1,6 @@
 import blessed from 'blessed';
 
-function listPicker(screen, label, items, borderColor = 'cyan') {
+function listPicker(screen, label, items, borderColor = 'cyan', width = 36, left = 'center') {
   return new Promise((resolve, reject) => {
     const height = Math.min(items.length + 4, 20);
     const picker = blessed.list({
@@ -8,8 +8,8 @@ function listPicker(screen, label, items, borderColor = 'cyan') {
       label: ` ${label} `,
       border: { type: 'line' },
       top: 'center',
-      left: 'center',
-      width: 36,
+      left,
+      width,
       height,
       items,
       keys: true,
@@ -87,6 +87,16 @@ export function textPrompt(screen, label, defaultVal = '') {
   });
 }
 
+export function skillPicker(screen, beadId) {
+  const items = [
+    `/executor-task ${beadId}`,
+    `/executor-task-worktree ${beadId}`,
+    `/executor-epic-task ${beadId}`,
+    `/executor-epic-task-worktree ${beadId}`,
+  ];
+  return listPicker(screen, 'Copy workflow command', items, 'magenta', 56, 1);
+}
+
 const DEP_TYPES = [
   'blocks', 'tracks', 'related', 'relates-to',
   'validates', 'caused-by', 'parent-child',