reslop 0.2.6 → 0.2.7

package/lib/render/dash-blocks.js

@@ -2,8 +2,15 @@
 
 const files = require('../files.js');
 const { shortAge } = files;
+const npmInfo = require('../dashboard/npm.js');
+const { TOP_PACKAGES } = npmInfo;
+const utilities = require('../utilities.js');
+const { parseVersion, cmpVersion } = utilities;
+const ansi = require('../ansi.js');
+const { THEME, visibleWidth } = ansi;
+const { minuteOf } = require('../dashboard/model.js');
 const tiles = require('./tiles.js');
-const { seg, barSegments, sparkline, spinner } = tiles;
+const { seg, barSegments, spinner } = tiles;
 const table = require('./dash-table.js');
 const { num, size, delta, waiting, cell, cellSegs, flexCell } = table;
 const { tableLines, pickGroups, labelOf, stat, pairRows } = table;
@@ -12,7 +19,17 @@ const { titleAside, captionOver } = table;
 const BAR_W = 6;
 const FOLDER = '📁';
 const MARK_GAP = 1;
-const TREND_LABEL = 'trend  ';
+const ACTIVITY_LABEL = 'activity ';
+const PULSE = '∙';
+const ACTIVITY_MARK = [
+  ['fail', 'x'],
+  ['commit', '◉'],
+  ['pass', '*'],
+  ['abort', '!'],
+  ['branch', '⎇'],
+  ['rebase', '↻'],
+  ['npm', '✦'],
+];
 const UNKNOWN = '…';
 
 const share = (value, total) => (total > 0 ? value / total : 0);
@@ -113,11 +130,90 @@ const diffsHeader = (data, ctx) => {
   return row;
 };
 
-const trendFooter = (data, width) => {
-  const room = width - TREND_LABEL.length;
-  if (data.samples.length < 2 || room < 2) return null;
-  const trend = sparkline(data.samples, room);
-  return [seg(TREND_LABEL, 'muted'), seg(trend, 'trend')];
+const heatIndex = (level) => {
+  if (level >= 301) return 4;
+  if (level >= 81) return 3;
+  if (level >= 16) return 2;
+  if (level >= 1) return 1;
+  return 0;
+};
+
+const heatColor = (index) => {
+  if (index === 1) return THEME.heat1;
+  if (index === 2) return THEME.heat2;
+  if (index === 3) return THEME.heat3;
+  if (index === 4) return THEME.heat4;
+  return null;
+};
+
+const markGlyph = (marks) => {
+  const list = marks ?? [];
+  for (const [kind, glyph] of ACTIVITY_MARK) {
+    if (list.includes(kind)) return glyph;
+  }
+  return '';
+};
+
+const diffGlyph = (bucket) => {
+  if (!bucket) return '';
+  const added = bucket.added || 0;
+  const removed = bucket.removed || 0;
+  if (removed > added) return '-';
+  if (added > 0 || removed > 0 || bucket.level > 0) return '+';
+  return '';
+};
+
+const pulseGlyph = (level) => {
+  const index = heatIndex(level);
+  if (index >= 4) return '◎';
+  if (index >= 3) return '•';
+  return '◦';
+};
+
+const activityCell = (bucket, blink, track, pulse) => {
+  const level = bucket ? bucket.level : 0;
+  const glyph = markGlyph(bucket ? bucket.marks : null);
+  const index = heatIndex(level);
+  const mark = glyph || diffGlyph(bucket);
+  const phase = blink ? pulseGlyph(level) : PULSE;
+  const ch = pulse ? phase : mark || ' ';
+  const item = seg(ch, blink ? 'blink' : 'heat', Boolean(glyph) && !pulse);
+  let bg = track ? THEME.heatTrack : null;
+  const heat = heatColor(index);
+  if (heat) bg = heat;
+  if (blink) bg = THEME.heatBlink;
+  item.bg = bg;
+  return item;
+};
+
+const activityCells = (activity, ctx, width) => {
+  const minutes = activity && activity.minutes ? activity.minutes : [];
+  const byAt = new Map();
+  let start = null;
+  for (const row of minutes) {
+    byAt.set(row.at, row);
+    if (start === null || row.at < start) start = row.at;
+  }
+  const current = minuteOf(ctx.now);
+  const flash = Boolean(activity && activity.live);
+  const on = Math.abs(ctx.frame ?? 0) % 2 === 1;
+  const cells = [];
+  for (let i = 0; i < width; i++) {
+    const at = current - (width - 1 - i);
+    const last = i === width - 1;
+    const pulse = flash && last;
+    const blink = pulse && on;
+    const track = start !== null && at >= start;
+    cells.push(activityCell(byAt.get(at), blink, track, pulse));
+  }
+  return cells;
+};
+
+const activityFooter = (data, width, ctx) => {
+  const room = width - 1 - ACTIVITY_LABEL.length;
+  if (room < 2) return null;
+  const cells = activityCells(data.activity, ctx, room);
+  return [seg(ACTIVITY_LABEL, 'muted'), ...cells];
 };
 
 const diffsBlock = (model, width, height, ctx, tile) => {
@@ -126,7 +222,7 @@ const diffsBlock = (model, width, height, ctx, tile) => {
     const rows = pairRows([stat('changes', 'working tree clean', 'muted')], 1);
     return { badge: [], lines: tableLines(rows, width) };
   }
-  const footer = trendFooter(data, width);
+  const footer = activityFooter(data, width, ctx);
   const room = footer ? height - 1 : height;
   const picked = pickGroups(data.dirs, data.exts, room);
   const rows = [diffsHeader(data, ctx)];
@@ -137,6 +233,7 @@ const diffsBlock = (model, width, height, ctx, tile) => {
     titleLine: captionOver(tile, lines[0]),
     lines: lines.slice(1),
     footer,
+    footerFlush: true,
   };
 };
 
@@ -166,20 +263,129 @@ const npmAside = (data) => {
   ];
 };
 
-const differs = (left, right) =>
-  left !== UNKNOWN && right !== UNKNOWN && left !== right;
+const npmStatus = (data) => {
+  if (!data || !data.ready || !data.hasManifest) return '';
+  const modules = data.modules || { count: 0, bytes: 0 };
+  let text = `deps: ${data.deps}  dev: ${data.dev}`;
+  text += `  all: ${modules.count} (${size(modules.bytes)})`;
+  if (data.audit) text += `  🚨 ${data.audit}`;
+  if (data.outdated) text += `  ⚠️ ${data.outdated}`;
+  return text;
+};
+
+const cmpText = (left, right) => {
+  const a = parseVersion(left);
+  const b = parseVersion(right);
+  if (!a || !b) return null;
+  return cmpVersion(a, b);
+};
+
+const boundHolds = (cmp, op) => {
+  if (op === '<') return cmp < 0;
+  if (op === '<=') return cmp <= 0;
+  if (op === '>') return cmp > 0;
+  return cmp >= 0;
+};
+
+const inClause = (version, clause) => {
+  const ver = parseVersion(version);
+  if (!ver) return false;
+  const bounds = [...clause.matchAll(/(>=|<=|>|<)\s*(\d+\.\d+\.\d+)/g)];
+  if (!bounds.length) return false;
+  for (const match of bounds) {
+    const bound = parseVersion(match[2]);
+    if (!bound) return false;
+    if (!boundHolds(cmpVersion(ver, bound), match[1])) return false;
+  }
+  return true;
+};
+
+const inRange = (version, range) =>
+  `${range ?? ''}`.split('||').some((clause) => inClause(version, clause));
+
+const hasRange = (range) => /[<>]=?\s*\d+\.\d+\.\d+/.test(`${range ?? ''}`);
+
+const vulnTone = (text, pkg) => {
+  if (!pkg.audit || !text || text === UNKNOWN) return '';
+  const fix = pkg.fix || '';
+  if (fix) {
+    const cmp = cmpText(text, fix);
+    if (cmp === null) return text === pkg.current ? 'error' : '';
+    return cmp < 0 ? 'error' : 'add';
+  }
+  const range = pkg.range || '';
+  if (hasRange(range)) {
+    if (inRange(text, range)) return 'error';
+    const cmp = cmpText(text, pkg.current);
+    if (cmp !== null && cmp > 0) return 'add';
+  }
+  return text === pkg.current ? 'error' : '';
+};
+
+const isOutdated = (pkg) => {
+  const current = pkg.current || '';
+  const wanted = pkg.wanted || '';
+  const latest = pkg.latest || '';
+  if (!current || current === UNKNOWN) return false;
+  if (wanted && wanted !== UNKNOWN && wanted !== current) return true;
+  return Boolean(latest && latest !== UNKNOWN && latest !== current);
+};
+
+const fixesOutdated = (text, pkg) => {
+  if (!isOutdated(pkg) || !text || text === UNKNOWN) return false;
+  const current = pkg.current || '';
+  const wanted = pkg.wanted || '';
+  const latest = pkg.latest || '';
+  if (text === wanted && wanted !== current) return true;
+  return text === latest && latest !== current;
+};
+
+const versionTone = (text, pkg) => {
+  const vuln = vulnTone(text, pkg);
+  if (vuln) return vuln;
+  if (fixesOutdated(text, pkg)) return 'add';
+  if (text === pkg.current && isOutdated(pkg)) return 'warn';
+  return 'muted';
+};
+
+const packageMark = (pkg, marks) => {
+  if (!marks) return cell('');
+  const segs = [];
+  if (pkg.audit) segs.push(seg('🛑 vulnerability detected', 'error'));
+  if (isOutdated(pkg)) {
+    if (segs.length) segs.push(seg('  '));
+    segs.push(seg('⚠️ outdated', 'warn'));
+  }
+  if (!segs.length) return cell('');
+  return cellSegs(segs);
+};
 
-const versionCell = (text, changed, audited) => {
-  const base = changed ? 'warn' : 'muted';
-  const tone = audited && text !== UNKNOWN ? 'error' : base;
-  return cell(text, tone, 'r');
+const nameTone = (pkg) => {
+  if (pkg.transitive) return 'pkg';
+  if (pkg.dev) return 'dev';
+  return 'dep';
+};
+
+const packageName = (pkg) => {
+  const segs = [seg(pkg.name, nameTone(pkg))];
+  if (pkg.chain) segs.push(seg(` 🢒 ${pkg.chain}`, 'chain'));
+  return {
+    segs,
+    align: 'l',
+    flex: true,
+    keep: true,
+    measure: visibleWidth(pkg.name),
+  };
 };
 
+const versionCell = (text, pkg) => cell(text, versionTone(text, pkg), 'r');
+
 const packageHead = () => {
   const title = flexCell('');
   title.keep = true;
   return [
     title,
+    cell(''),
     cell('current', 'muted', 'r'),
     cell('wanted', 'muted', 'r'),
     cell('latest', 'muted', 'r'),
@@ -187,54 +393,92 @@ const packageHead = () => {
   ];
 };
 
-const packageRow = (pkg) => {
-  const name = flexCell(pkg.name, pkg.dev ? 'sha' : 'add');
-  name.keep = true;
+const packageRow = (pkg, marks) => {
   const current = pkg.current || UNKNOWN;
   const wanted = pkg.wanted || UNKNOWN;
   const latest = pkg.latest || UNKNOWN;
   return [
-    name,
-    versionCell(current, differs(current, wanted), pkg.audit),
-    versionCell(wanted, differs(wanted, current), pkg.audit),
-    versionCell(latest, differs(latest, wanted), pkg.audit),
+    packageName(pkg),
+    packageMark(pkg, marks),
+    versionCell(current, pkg),
+    versionCell(wanted, pkg),
+    versionCell(latest, pkg),
     cell(size(pkg.bytes), 'muted', 'r'),
   ];
 };
 
-const npmBlock = (model, width, height, ctx, tile) => {
-  const data = model.npm;
-  if (!data.ready) return waiting('reading package.json…');
+const packageLines = (packages, width, limit) => {
+  const all = limit === null;
+  const headed = packages.length > 0 && (all || limit > 1);
+  const room = all ? packages.length : Math.max(0, limit - (headed ? 1 : 0));
+  const shown = packages.slice(0, room);
+  const rows = shown.map((pkg) => packageRow(pkg, all));
+  if (headed) rows.unshift(packageHead());
+  return tableLines(rows, width);
+};
+
+const npmContent = (data, width, limit, ctx, tile) => {
+  if (!data || !data.ready) return waiting('reading package.json…');
   if (!data.hasManifest) return waiting('no package.json');
   const badge = data.running ? [seg(spinner(ctx.frame), 'warn', true)] : [];
   const titleLine = titleAside(tile, npmAside(data), width, badge);
-  const packages = data.modules.packages;
-  const headed = packages.length > 0 && height > 1;
-  const shown = packages.slice(0, Math.max(0, height - (headed ? 1 : 0)));
-  const rows = shown.map(packageRow);
-  if (headed) rows.unshift(packageHead());
-  return { titleLine, lines: tableLines(rows, width) };
+  const listed = data.modules && data.modules.packages;
+  const packages = listed ? listed : [];
+  const short = limit === null ? packages : packages.slice(0, TOP_PACKAGES);
+  return { titleLine, lines: packageLines(short, width, limit) };
 };
 
-const taskName = (title) => {
-  const name = flexCell(title, 'text');
-  name.keep = true;
-  return name;
-};
+const npmBlock = (model, width, height, ctx, tile) =>
+  npmContent(model.npm, width, height, ctx, tile);
 
-const taskLine = (title, done, total, bold = false) => [
-  taskName(title),
-  cell(`${done}/${total}`, bold ? 'text' : 'muted', 'r', bold),
-  cellSegs(barSegments(share(done, total), BAR_W)),
-];
+const TASK_GAP = 2;
 
-const tasksBlock = (model, width, height, ctx, tile) => {
-  const data = model.tasks;
-  const rows = [taskLine('', data.done, data.total, true)];
+const ratioLabel = (done, total) => `${done}/${total}`;
+
+const taskSpecs = (data) => {
+  const rows = [{ title: '', done: data.done, total: data.total, bold: true }];
   for (const kind of data.kinds) {
-    rows.push(taskLine(kind.title, kind.done, kind.total));
+    rows.push({
+      title: kind.title,
+      done: kind.done,
+      total: kind.total,
+      bold: false,
+    });
   }
-  const lines = tableLines(rows, width);
+  return rows;
+};
+
+const widest = (rows, read) => {
+  let width = 0;
+  for (const row of rows) {
+    const size = read(row).length;
+    if (size > width) width = size;
+  }
+  return width;
+};
+
+const taskBarWidth = (width, nameW, ratioW) => {
+  const room = width - nameW - ratioW - TASK_GAP * 2;
+  return room > 0 ? room : 0;
+};
+
+const taskLine = (row, barW) => {
+  const tone = row.bold ? 'text' : 'muted';
+  const line = [cell(row.title, 'text', 'l', row.bold)];
+  if (barW > 0) {
+    line.push(cellSegs(barSegments(share(row.done, row.total), barW)));
+  }
+  line.push(cell(ratioLabel(row.done, row.total), tone, 'r', row.bold));
+  return line;
+};
+
+const tasksBlock = (model, width, height, ctx, tile) => {
+  const specs = taskSpecs(model.tasks);
+  const nameW = widest(specs, (row) => row.title);
+  const ratioW = widest(specs, (row) => ratioLabel(row.done, row.total));
+  const barW = taskBarWidth(width, nameW, ratioW);
+  const rows = specs.map((row) => taskLine(row, barW));
+  const lines = tableLines(rows, width, TASK_GAP);
   const shown = Math.max(0, height);
   return {
     titleLine: captionOver(tile, lines[0]),
@@ -242,4 +486,11 @@ const tasksBlock = (model, width, height, ctx, tile) => {
   };
 };
 
-module.exports = { filesBlock, diffsBlock, npmBlock, tasksBlock };
+module.exports = {
+  filesBlock,
+  diffsBlock,
+  npmBlock,
+  npmContent,
+  npmStatus,
+  tasksBlock,
+};

package/lib/render/dash-table.js

@@ -67,13 +67,18 @@ const flexCell = (text, tone = 'muted') => ({
 
 const blankCell = { segs: [], align: 'l', flex: false };
 
+const measuredWidth = (item) => {
+  if (typeof item.measure === 'number') return item.measure;
+  return segmentsWidth(item.segs);
+};
+
 const columnWidths = (rows, count) => {
   const widths = new Array(count).fill(0);
   for (const row of rows) {
     for (let c = 0; c < count; c++) {
       const item = row[c];
       if (!item || (item.flex && !item.keep)) continue;
-      widths[c] = Math.max(widths[c], segmentsWidth(item.segs));
+      widths[c] = Math.max(widths[c], measuredWidth(item));
     }
   }
   return widths;

package/lib/render/files.js

@@ -8,6 +8,10 @@ const { isTasksEntry, shortAge } = files;
 const { THEME, paint, visibleWidth, trimVisible, seq, EL } = ansi;
 const { fill, markPrefix, paintCursorList } = primitives;
 const { measureColumns, padColumns } = primitives;
+const searchPaint = require('./search.js');
+const { paintPathText } = searchPaint;
+const locate = require('../find.js');
+const { activeHit, spansFor } = locate;
 
 const FILE_STATUS_FG = {
   unstaged: THEME.delLineFg,
@@ -56,7 +60,13 @@ const paintFileMeta = (parts, fgRgb, bgRgb, color) => {
   return out + paint(parts.m, fgRgb, bgRgb, color);
 };
 
-const paintFileRow = (entry, width, color, selected, cols) => {
+const rowSpans = (entry, path, marks) => {
+  if (!marks || !marks.query) return [];
+  const hit = marks.hit && marks.hit.index === marks.index ? marks.hit : null;
+  return spansFor(path, entry.path ?? '', marks.query, hit);
+};
+
+const paintFileRow = (entry, width, color, selected, cols, marks) => {
   const tasks = isTasksEntry(entry);
   const inner = Math.max(1, width - 1);
   const prefix = markPrefix(selected);
@@ -72,8 +82,11 @@ const paintFileRow = (entry, width, color, selected, cols) => {
   const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
   const edge = fill(1, fgRgb, bgRgb, color);
   if (!color) return `${left}${meta}${date}${edge}`;
+  const spans = rowSpans(entry, path, marks);
   let out = `${seq(fgRgb, bgRgb)}${EL}`;
-  out += paint(left, fgRgb, bgRgb, color, tasks);
+  out += paint(prefix, fgRgb, bgRgb, color, tasks);
+  out += paintPathText(path, fgRgb, bgRgb, color, tasks, spans);
+  out += paint(pad, fgRgb, bgRgb, color, tasks);
   if (tasks) out += paint(meta, fgRgb, bgRgb, color, true);
   else out += paintFileMeta(parts, fgRgb, bgRgb, color);
   if (date) {
@@ -88,8 +101,14 @@ const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
   const cols = measureColumns(entries, fileRowFields, FILE_COL_ALIGN);
   const cursor = view.fileCursor ?? 0;
   const pane = { width, color, bodyH, headerLines, offset: view.listScroll };
-  const paintRow = (entry, selected) =>
-    paintFileRow(entry, width, color, selected, cols);
+  const hit = activeHit(entries, view.find);
+  const query = view.find && view.find.query ? view.find.query : '';
+  const paintRow = (entry, selected, index) =>
+    paintFileRow(entry, width, color, selected, cols, {
+      query,
+      hit,
+      index,
+    });
   return paintCursorList(entries, cursor, pane, paintRow);
 };
 

package/lib/render/frame.js

@@ -12,6 +12,8 @@ const npm = require('./npm.js');
 const diff = require('./diff.js');
 const unit = require('./unit.js');
 const dashboard = require('./dashboard.js');
+const packages = require('./packages.js');
+const repos = require('./repos.js');
 
 const { RESET } = ansi;
 const { overlayRows, markEditorSelection } = select;
@@ -23,10 +25,12 @@ const { paintBodyDiff } = diff;
 
 const PANE_BODY = {
   dashboard: dashboard.paintBodyDashboard,
+  repos: repos.paintBodyRepos,
   files: files.paintBodyFiles,
   branches: branches.paintBodyBranches,
   commits: commits.paintBodyCommits,
   npm: npm.paintBodyNpm,
+  packages: packages.paintBodyPackages,
   unit: unit.paintBodyUnit,
   tasks: paintBodyTodo,
 };

package/lib/render/notes.js

@@ -94,7 +94,10 @@ const taskLists = (view) => {
 };
 
 const paintSectionHead = (title, width, color) =>
-  paintBar(` ${title}`, width, THEME.mutedFg, THEME.ctxBg, color);
+  paintBar(` ${title}`, width, THEME.taskHeadFg, THEME.taskHeadBg, color);
+
+const paintSectionGap = (width, color) =>
+  paintBar('', width, THEME.ctxFg, THEME.ctxBg, color);
 
 const paintBodyTodo = (view, width, color) => {
   const focus = view.tasksFocus ?? 0;
@@ -105,7 +108,9 @@ const paintBodyTodo = (view, width, color) => {
   let editHits = [];
   let cursor = null;
   let index = 0;
-  for (const section of taskLists(view)) {
+  const sections = taskLists(view);
+  for (let sectionAt = 0; sectionAt < sections.length; sectionAt++) {
+    const section = sections[sectionAt];
     if (section.title) {
       body.push(paintSectionHead(section.title, width, color));
       taskOwners.push(null);
@@ -131,6 +136,12 @@ const paintBodyTodo = (view, width, color) => {
       }
       index += 1;
     }
+    const last = sectionAt === sections.length - 1;
+    if (section.title && !last) {
+      body.push(paintSectionGap(width, color));
+      taskOwners.push(null);
+      taskChecks.push(false);
+    }
   }
   return paneResult({ body, editHits, taskOwners, taskChecks, cursor });
 };

package/lib/render/packages.js

@@ -0,0 +1,93 @@
+'use strict';
+
+const ansi = require('../ansi.js');
+const { THEME, paint, visibleWidth } = ansi;
+const tiles = require('./tiles.js');
+const { paintSegments } = tiles;
+const blocks = require('./dash-blocks.js');
+const { npmContent } = blocks;
+const primitives = require('./primitives.js');
+const { MARK_W, markPrefix, paintCursorList, fieldWindow, editSpan } =
+  primitives;
+
+const TILE = { key: 'n', title: 'npm' };
+const TAIL = 1;
+const LIST_PAD = 1;
+
+const paintMarginRow = (line, width, color, selected) => {
+  const bg = selected ? THEME.buttonBg : THEME.ctxBg;
+  const fg = selected ? THEME.chromeFg : THEME.mutedFg;
+  const inner = Math.max(1, width - MARK_W - TAIL);
+  const body = paintSegments(line, inner, bg, color);
+  const prefix = markPrefix(selected);
+  const tail = ' '.repeat(TAIL);
+  if (!color) return `${prefix}${body}${tail}`;
+  return paint(prefix, fg, bg, color) + body + paint(tail, fg, bg, color);
+};
+
+const paintPackageEdit = (compose, width, color) => {
+  const prefix = markPrefix(true);
+  const rest = Math.max(1, width - MARK_W - TAIL);
+  const text = `${compose.text ?? ''}`.replaceAll('\n', ' ');
+  const win = fieldWindow(text, compose.cursor, compose.scrollCol, rest);
+  const gap = ' '.repeat(Math.max(0, rest - visibleWidth(win.text)));
+  const tail = ' '.repeat(TAIL);
+  const fg = THEME.chromeFg;
+  const bg = THEME.buttonBg;
+  let row = `${prefix}${win.text}${gap}${tail}`;
+  if (color) {
+    row = paint(prefix, fg, bg, color);
+    row += paint(win.text, THEME.buttonHotFg, bg, color);
+    row += paint(`${gap}${tail}`, fg, bg, color);
+  }
+  const textX = MARK_W + 1;
+  const edit = editSpan(1, textX, textX + rest, 0, text);
+  const cursor = { x: textX + win.col, scroll: win.scroll };
+  return { row, cursor, edits: [{ ...edit, scroll: win.scroll }] };
+};
+
+const paintBodyPackages = (view, width, color, bodyH, headerLines) => {
+  const ctx = { frame: view.progressFrame ?? 0 };
+  const inner = Math.max(1, width - MARK_W - TAIL);
+  const content = npmContent(view.packages, inner, null, ctx, TILE);
+  const headed = Boolean(content.titleLine) && content.lines.length > 0;
+  const rows = headed ? content.lines.slice(1) : content.lines;
+  const reserved = headed ? 1 : 0;
+  const last = Math.max(0, rows.length - 1);
+  const cursor = Math.min(view.packagesCursor ?? 0, last);
+  const pane = {
+    width,
+    color,
+    bodyH: Math.max(1, bodyH - reserved),
+    headerLines: headerLines + reserved,
+    offset: view.listScroll,
+  };
+  const paintRow = (line, selected) =>
+    paintMarginRow(line, width, color, selected);
+  const editing = view.compose && view.compose.kind === 'package';
+  const extra = editing
+    ? {
+        ...paintPackageEdit(view.compose, width, color),
+        at: 'index',
+        index: cursor,
+      }
+    : null;
+  const painted = paintCursorList(rows, cursor, pane, paintRow, extra);
+  if (!headed) return painted;
+  const head = paintMarginRow(content.lines[0], width, color, false);
+  const body = painted.body.slice();
+  const pad = pane.bodyH >= LIST_PAD * 2 + 1 ? LIST_PAD : 0;
+  body.splice(pad, 0, head);
+  const nudge = (point) => {
+    if (!point || point.row < pad) return point;
+    return { ...point, row: point.row + 1 };
+  };
+  return {
+    ...painted,
+    body,
+    editHits: painted.editHits.map(nudge),
+    cursor: nudge(painted.cursor),
+  };
+};
+
+module.exports = { paintBodyPackages };