reslop 0.2.4 → 0.2.6

package/lib/render/diff.js

@@ -2,102 +2,61 @@
 
 const ansi = require('../ansi.js');
 const diff = require('../diff/diff.js');
-const { displayLines } = diff;
 const highlight = require('../highlight.js');
 const detect = require('../detect.js');
-const { detectLang } = detect;
 const files = require('../files.js');
 const wrap = require('../wrap.js');
 const primitives = require('./primitives.js');
 
+const { displayLines } = diff;
+const { detectLang } = detect;
 const { itemPath } = files;
 const { tokenize, overlayTokens } = highlight;
 const { wrapPlain } = wrap;
-const { THEME, CODE_FG, codeFg, paint, visibleWidth } = ansi;
-const { truncateVisible, graphemes, graphemeWidth } = ansi;
-const { GUTTER_W, fill, splitWidths, paintSplitRule, paneResult } = primitives;
+const { THEME, CODE_FG, codeFg, paint, visibleWidth, truncateVisible } = ansi;
+const { GUTTER_W, fill, splitWidths, paintSplitRule } = primitives;
+const { paneResult, sliceVisible } = primitives;
+
+const lineStyle = (baseFg, baseBg, chBg = baseBg, mark = ' ') => ({
+  baseFg,
+  baseBg,
+  chBg,
+  mark,
+});
 
 const STYLES = {
-  del: {
-    baseFg: THEME.delLineFg,
-    baseBg: THEME.delLineBg,
-    chBg: THEME.delCharBg,
-    mark: '-',
-  },
-  add: {
-    baseFg: THEME.addLineFg,
-    baseBg: THEME.addLineBg,
-    chBg: THEME.addCharBg,
-    mark: '+',
-  },
-  warn: {
-    baseFg: THEME.delLineFg,
-    baseBg: THEME.delLineBg,
-    chBg: THEME.delCharBg,
-    mark: ' ',
-  },
-  note: {
-    baseFg: THEME.chromeFg,
-    baseBg: THEME.noteBg,
-    chBg: THEME.noteBg,
-    mark: ' ',
-  },
-  noteSep: {
-    baseFg: THEME.mutedFg,
-    baseBg: THEME.chromeBg,
-    chBg: THEME.chromeBg,
-    mark: ' ',
-  },
-  ctx: {
-    baseFg: THEME.ctxFg,
-    baseBg: THEME.ctxBg,
-    chBg: THEME.ctxBg,
-    mark: ' ',
-  },
+  del: lineStyle(THEME.delLineFg, THEME.delLineBg, THEME.delCharBg, '-'),
+  add: lineStyle(THEME.addLineFg, THEME.addLineBg, THEME.addCharBg, '+'),
+  warn: lineStyle(THEME.delLineFg, THEME.delLineBg, THEME.delCharBg),
+  note: lineStyle(THEME.chromeFg, THEME.noteBg),
+  noteSep: lineStyle(THEME.mutedFg, THEME.chromeBg),
+  ctx: lineStyle(THEME.ctxFg, THEME.ctxBg),
 };
 
 const STAGED_STYLES = {
-  del: {
-    baseFg: THEME.stagedDelLineFg,
-    baseBg: THEME.stagedDelLineBg,
-    chBg: THEME.stagedDelCharBg,
-    mark: '-',
-  },
-  add: {
-    baseFg: THEME.stagedAddLineFg,
-    baseBg: THEME.stagedAddLineBg,
-    chBg: THEME.stagedAddCharBg,
-    mark: '+',
-  },
-  warn: {
-    baseFg: THEME.stagedDelLineFg,
-    baseBg: THEME.stagedDelLineBg,
-    chBg: THEME.stagedDelCharBg,
-    mark: ' ',
-  },
-  note: STYLES.note,
-  noteSep: STYLES.noteSep,
-  ctx: STYLES.ctx,
+  ...STYLES,
+  del: lineStyle(
+    THEME.stagedDelLineFg,
+    THEME.stagedDelLineBg,
+    THEME.stagedDelCharBg,
+    '-',
+  ),
+  add: lineStyle(
+    THEME.stagedAddLineFg,
+    THEME.stagedAddLineBg,
+    THEME.stagedAddCharBg,
+    '+',
+  ),
+  warn: lineStyle(
+    THEME.stagedDelLineFg,
+    THEME.stagedDelLineBg,
+    THEME.stagedDelCharBg,
+  ),
 };
 
-const delCharBg = () => ansi.bg(THEME.delCharBg);
-const addCharBg = () => ansi.bg(THEME.addCharBg);
+const gutterWidth = (width) => Math.min(GUTTER_W, Math.max(0, width));
 
-const skipText = (text, skip) => {
-  if (skip <= 0) return text ?? '';
-  const parts = graphemes(text ?? '');
-  let used = 0;
-  let i = 0;
-  while (i < parts.length) {
-    const w = graphemeWidth(parts[i], used);
-    if (used + w > skip) break;
-    used += w;
-    i += 1;
-  }
-  let out = '';
-  for (; i < parts.length; i++) out += parts[i];
-  return out;
-};
+const textWidth = (width) => Math.max(1, width - gutterWidth(width));
 
 const clipPieces = (pieces, skip) => {
   if (skip <= 0) return pieces;
@@ -110,54 +69,42 @@ const clipPieces = (pieces, skip) => {
       drop -= width;
       continue;
     }
-    const shown = drop > 0 ? skipText(text, drop) : text;
+    const shown = drop > 0 ? sliceVisible(text, drop, Infinity) : text;
     drop = 0;
     if (shown) out.push({ ...piece, text: shown });
   }
   return out;
 };
 
-const paintSpans = (pieces, lineStyle, budget, color) => {
+const paintSpans = (pieces, style, budget, color) => {
   let out = '';
   let used = 0;
   for (const piece of pieces) {
     if (used >= budget) break;
-    const room = budget - used;
-    const text = truncateVisible(piece.text, room);
+    const text = truncateVisible(piece.text, budget - used);
     const w = visibleWidth(text);
     if (w <= 0) continue;
-    const fgRgb = codeFg(piece.style);
-    const bgRgb = piece.changed ? lineStyle.chBg : lineStyle.baseBg;
-    out += paint(text, fgRgb, bgRgb, color);
+    const bgRgb = piece.changed ? style.chBg : style.baseBg;
+    out += paint(text, codeFg(piece.style), bgRgb, color);
     used += w;
   }
-  if (used < budget) {
-    out += fill(budget - used, CODE_FG.plain, lineStyle.baseBg, color);
-  }
-  return out;
+  return out + fill(budget - used, CODE_FG.plain, style.baseBg, color);
 };
 
 const paintAuditNote = (line, width, color) => {
-  const style = STYLES.note;
-  const gutterW = Math.min(GUTTER_W, Math.max(0, width));
-  const label = `${style.mark} `.slice(0, gutterW);
-  const gutter = paint(label, style.baseFg, style.baseBg, color);
+  const { baseFg, baseBg, mark } = STYLES.note;
+  const gutterW = gutterWidth(width);
+  const label = `${mark} `.slice(0, gutterW);
   const budget = Math.max(0, width - gutterW);
   const text = truncateVisible(line.text ?? '', budget);
-  const used = visibleWidth(text);
-  let out = gutter;
-  if (text) out += paint(text, style.baseFg, style.baseBg, color);
-  if (used < budget) {
-    out += fill(budget - used, style.baseFg, style.baseBg, color);
-  }
-  return out;
+  let out = paint(label, baseFg, baseBg, color);
+  out += paint(text, baseFg, baseBg, color);
+  return out + fill(budget - visibleWidth(text), baseFg, baseBg, color);
 };
 
 const paintAuditRule = (width, color) => {
-  const style = STYLES.noteSep;
-  const n = Math.max(0, width);
-  const bar = '─'.repeat(n);
-  return paint(bar, style.baseFg, style.baseBg, color);
+  const { baseFg, baseBg } = STYLES.noteSep;
+  return paint('─'.repeat(Math.max(0, width)), baseFg, baseBg, color);
 };
 
 const paintDiffLine = (line, width, color, origin, lang, scrollCol = 0) => {
@@ -168,32 +115,21 @@ const paintDiffLine = (line, width, color, origin, lang, scrollCol = 0) => {
   const diffSpans = line.spans ?? [{ text: line.text, changed: false }];
   const tokens = tokenize(lang, line.text ?? '');
   const pieces = clipPieces(overlayTokens(tokens, diffSpans), scrollCol);
-  const gutterW = Math.min(GUTTER_W, Math.max(0, width));
+  const gutterW = gutterWidth(width);
   const label = `${line.mark ?? style.mark} `.slice(0, gutterW);
   const gutter = paint(label, CODE_FG.punct, style.baseBg, color);
   const budget = Math.max(0, width - gutterW);
-  const rest = paintSpans(pieces, style, budget, color);
-  return gutter + rest;
-};
-
-const paintSplitHalf = (line, width, color, origin, lang, scrollCol) => {
-  if (!line || width <= 0) {
-    return fill(width, THEME.ctxFg, THEME.ctxBg, color);
-  }
-  return paintDiffLine(line, width, color, origin, lang, scrollCol);
+  return gutter + paintSpans(pieces, style, budget, color);
 };
 
 const paintSplitRow = (row, width, color, origin, lang, scrollCol) => {
   const { leftW, rightW } = splitWidths(width);
-  const left = paintSplitHalf(row.left, leftW, color, origin, lang, scrollCol);
-  const right = paintSplitHalf(
-    row.right,
-    rightW,
-    color,
-    origin,
-    lang,
-    scrollCol,
-  );
+  const half = (line, halfW) => {
+    if (!line) return fill(halfW, THEME.ctxFg, THEME.ctxBg, color);
+    return paintDiffLine(line, halfW, color, origin, lang, scrollCol);
+  };
+  const left = half(row.left, leftW);
+  const right = half(row.right, rightW);
   return `${left}${paintSplitRule(color)}${right}`;
 };
 
@@ -213,178 +149,137 @@ const sourceEmpty = (line) => {
   return !(line.text ?? '').trim();
 };
 
-const displayRowEmpty = (row, split) => {
+const rowEmpty = (row, split) => {
   if (!split) return sourceEmpty(row);
   return sourceEmpty(row.left) && sourceEmpty(row.right);
 };
 
 const dropLeadingEmpty = (lines, split) => {
-  let i = 0;
-  while (i < lines.length && displayRowEmpty(lines[i], split)) {
-    i += 1;
-  }
-  return i ? lines.slice(i) : lines;
+  const at = lines.findIndex((row) => !rowEmpty(row, split));
+  if (at < 0) return [];
+  return at ? lines.slice(at) : lines;
 };
 
 const cutSpans = (spans, count) => {
   const taken = [];
   const rest = [];
   let left = count;
-  let i = 0;
-  while (i < spans.length) {
-    const span = spans[i];
+  for (const span of spans) {
     const text = span.text ?? '';
     if (left <= 0) {
       rest.push(span);
-      i += 1;
-      continue;
-    }
-    if (text.length <= left) {
+    } else if (text.length <= left) {
       taken.push(span);
       left -= text.length;
-      i += 1;
-      continue;
+    } else {
+      const changed = span.changed === true;
+      taken.push({ text: text.slice(0, left), changed });
+      rest.push({ text: text.slice(left), changed });
+      left = 0;
     }
-    const changed = span.changed === true;
-    taken.push({ text: text.slice(0, left), changed });
-    rest.push({ text: text.slice(left), changed });
-    left = 0;
-    i += 1;
   }
   return { taken, rest };
 };
 
 const wrapSoftLine = (line, width) => {
-  const gutterW = Math.min(GUTTER_W, Math.max(0, width));
-  const budget = Math.max(1, width - gutterW);
-  const rows = wrapPlain(line.text ?? '', budget);
+  const rows = wrapPlain(line.text ?? '', textWidth(width));
   const changed = line.wrap === true;
-  const { length } = rows;
-  const pieces = new Array(length);
   let used = 0;
   let spans = line.spans ?? [{ text: line.text ?? '', changed }];
-  for (let i = 0; i < length; i++) {
-    const text = rows[i];
-    const last = i === length - 1;
+  return rows.map((text, index) => {
+    const last = index === rows.length - 1;
     const cut = cutSpans(spans, text.length);
     spans = cut.rest;
     const nextSpans = cut.taken.length ? cut.taken : [{ text, changed }];
     const next = { ...line, text, spans: nextSpans, editLast: last };
     if (line.editStart !== undefined) {
       next.editStart = line.editStart + used;
-      if (last) next.editEnd = line.editEnd;
-      else next.editEnd = next.editStart + text.length;
+      next.editEnd = last ? line.editEnd : next.editStart + text.length;
     }
     used += text.length;
-    pieces[i] = next;
-  }
-  return pieces;
+    return next;
+  });
 };
 
 const expandSoftRows = (lines, width, split, wrapView) => {
   const { leftW, rightW } = splitWidths(width);
-  const out = [];
   const partsOf = (line, lineW) => {
     if (!wrapView || !line || line.type === 'noteSep') return [line];
-    const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
-    const budget = Math.max(1, lineW - gutterW);
-    if (visibleWidth(line.text ?? '') <= budget) return [line];
+    if (visibleWidth(line.text ?? '') <= textWidth(lineW)) return [line];
     return wrapSoftLine(line, lineW);
   };
+  if (!split) return lines.flatMap((line) => partsOf(line, width));
+  const out = [];
   for (const row of lines) {
-    if (!split) {
-      for (const part of partsOf(row, width)) out.push(part);
-      continue;
-    }
     const leftParts = partsOf(row.left, leftW);
     const rightParts = partsOf(row.right, rightW);
     const n = Math.max(leftParts.length, rightParts.length);
     for (let i = 0; i < n; i++) {
-      out.push({
-        left: leftParts[i] ?? null,
-        right: rightParts[i] ?? null,
-      });
+      out.push({ left: leftParts[i] ?? null, right: rightParts[i] ?? null });
     }
   }
   return out;
 };
 
-const onCodePiece = (line, cursor) => {
-  if (!line || line.editStart === undefined) return false;
-  if (cursor < line.editStart) return false;
-  return cursor <= line.editEnd;
-};
-
-const codeCursorInRows = (rows, split, width, cursor, scrollCol = 0) => {
-  if (cursor === undefined || cursor === null) return null;
+const codeHits = (rows, split, width, overlay, editing, scrollCol) => {
   const { leftW, rightW } = splitWidths(width);
-  for (let i = 0; i < rows.length; i++) {
-    const line = split ? rows[i].right : rows[i];
-    if (!onCodePiece(line, cursor)) continue;
-    const lineW = split ? rightW : width;
-    const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
-    const take = Math.min(cursor - line.editStart, line.text.length);
+  const lineW = split ? rightW : width;
+  const x0 = split ? leftW + 1 : 0;
+  const textX = x0 + gutterWidth(lineW) + 1;
+  const at = overlay ? overlay.cursor : null;
+  const hasCursor = at !== null && at !== undefined;
+  const editHits = [];
+  let cursor = null;
+  for (let row = 0; row < rows.length; row++) {
+    const line = split ? rows[row].right : rows[row];
+    if (!line || line.editStart === undefined) continue;
+    if (editing) {
+      editHits.push({
+        row,
+        x0: x0 + 1,
+        textX,
+        x1: x0 + lineW + 1,
+        scroll: scrollCol,
+        start: line.editStart,
+        text: line.text ?? '',
+        limit: line.editEnd,
+        live: true,
+      });
+    }
+    if (cursor || !hasCursor) continue;
+    const onPiece = at >= line.editStart && at <= line.editEnd;
+    if (!onPiece) continue;
+    const take = Math.min(at - line.editStart, line.text.length);
     const col = visibleWidth(line.text.slice(0, take));
-    const shown = Math.max(0, col - scrollCol);
-    const x0 = split ? leftW + 1 : 0;
-    return { x: x0 + gutterW + shown + 1, row: i };
+    cursor = { x: textX + Math.max(0, col - scrollCol), row };
   }
-  return null;
+  return { cursor, editHits };
 };
 
-const codeInnerWidth = (width, layout = 'unified') => {
-  const lineW = layout === 'side' ? splitWidths(width).rightW : width;
-  const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
-  return Math.max(1, lineW - gutterW);
-};
+const codeInnerWidth = (width, layout = 'unified') =>
+  textWidth(layout === 'side' ? splitWidths(width).rightW : width);
 
 const paintBodyDiff = (view, width, color) => {
-  const item = view.item;
+  const { item, codeOverlay: overlay } = view;
   const layout = view.layout ?? 'unified';
-  const overlay = view.codeOverlay;
   const lang = detectLang(itemPath(item));
   const splitBody = layout === 'side' && !item.file.isBinary;
-  const editing = Boolean(overlay && typeof overlay.cursor === 'number');
-  const picked = editing ? overlay.scrollCol : 0;
-  const scrollCol = picked ?? 0;
+  const editing = typeof overlay?.cursor === 'number';
+  const scrollCol = (editing ? overlay.scrollCol : 0) ?? 0;
   const raw = dropLeadingEmpty(bodyLines(item, layout, overlay), splitBody);
   const lines = expandSoftRows(raw, width, splitBody, !editing);
-  const { length } = lines;
-  const body = new Array(length);
-  if (splitBody) {
-    for (let i = 0; i < length; i++) {
-      body[i] = paintSplitRow(
-        lines[i],
-        width,
-        color,
-        item.origin,
-        lang,
-        scrollCol,
-      );
-    }
-  } else {
-    for (let i = 0; i < length; i++) {
-      body[i] = paintDiffLine(
-        lines[i],
-        width,
-        color,
-        item.origin,
-        lang,
-        scrollCol,
-      );
-    }
-  }
-  const edit = overlay ? overlay.cursor : null;
-  const cursor = codeCursorInRows(lines, splitBody, width, edit, scrollCol);
-  return paneResult({ body, cursor, splitBody });
+  const paintRow = splitBody ? paintSplitRow : paintDiffLine;
+  const body = lines.map((line) =>
+    paintRow(line, width, color, item.origin, lang, scrollCol),
+  );
+  const hits = codeHits(lines, splitBody, width, overlay, editing, scrollCol);
+  return paneResult({ body, splitBody, ...hits });
 };
 
 module.exports = {
-  delCharBg,
-  addCharBg,
   paintDiffLine,
   codeInnerWidth,
   paintBodyDiff,
-  codeCursorInRows,
   expandSoftRows,
+  codeHits,
 };

package/lib/render/files.js

@@ -3,11 +3,11 @@
 const ansi = require('../ansi.js');
 const files = require('../files.js');
 const primitives = require('./primitives.js');
-const { measureColumns, padColumns } = primitives;
 
-const { isTodosEntry, shortAge } = files;
-const { THEME, paint, visibleWidth, truncateVisible, seq, EL } = ansi;
-const { fill, FILE_MARK, paintCursorList } = primitives;
+const { isTasksEntry, shortAge } = files;
+const { THEME, paint, visibleWidth, trimVisible, seq, EL } = ansi;
+const { fill, markPrefix, paintCursorList } = primitives;
+const { measureColumns, padColumns } = primitives;
 
 const FILE_STATUS_FG = {
   unstaged: THEME.delLineFg,
@@ -27,124 +27,70 @@ const FILE_COL_ALIGN = {
 
 const FILE_DATE_GAP = '   ';
 
-const signedCount = (sign, n) => `${sign}${n ?? 0}`;
-
 const fileRowFields = (entry) => {
-  if (isTodosEntry(entry)) {
-    const n = `${entry.staged ?? 0}`;
-    const m = `${entry.remaining ?? 0}`;
+  const n = `${entry.staged ?? 0}`;
+  const m = `${entry.remaining ?? 0}`;
+  if (isTasksEntry(entry)) {
     return { add: '', del: '', status: '', n, m, date: '' };
   }
-  const { added, removed, staged, remaining } = entry;
-  const add = signedCount('+', added);
-  const del = signedCount('-', removed);
+  const add = `+${entry.added ?? 0}`;
+  const del = `-${entry.removed ?? 0}`;
   const status = entry.status ?? '';
-  const n = `${staged ?? 0}`;
-  const m = `${remaining ?? 0}`;
-  const date = shortAge(entry.date ?? '');
-  return { add, del, status, n, m, date };
+  return { add, del, status, n, m, date: shortAge(entry.date) };
 };
 
-const fileRowFg = (status, selected) => {
-  const statusFg = FILE_STATUS_FG[status];
+const fileRowFg = (entry, selected) => {
+  if (isTasksEntry(entry)) return THEME.buttonHotFg;
+  const statusFg = FILE_STATUS_FG[entry.status];
   if (statusFg) return statusFg;
-  if (selected) return THEME.chromeFg;
-  return THEME.mutedFg;
-};
-
-const joinFileDate = (parts, cols) => {
-  if (!cols?.date) return '';
-  return `${FILE_DATE_GAP}${parts.date}`;
+  return selected ? THEME.chromeFg : THEME.mutedFg;
 };
 
-const joinFileMeta = (parts) => {
-  const { add, del, status, n, m } = parts;
-  return `  ${add}  ${del}  ${status}  ${n}/${m}`;
-};
-
-const paintFileSuffix = (parts, cols, fgRgb, bgRgb, color) => {
-  const { add, del, status, n, m } = parts;
+const paintFileMeta = (parts, fgRgb, bgRgb, color) => {
   const gap = paint('  ', fgRgb, bgRgb, color);
-  const addText = paint(add, THEME.addLineFg, bgRgb, color);
-  const delText = paint(del, THEME.delLineFg, bgRgb, color);
-  const statusText = paint(status, fgRgb, bgRgb, color);
-  const nText = paint(n, fgRgb, bgRgb, color);
-  const slash = paint('/', fgRgb, bgRgb, color);
-  const mText = paint(m, fgRgb, bgRgb, color);
-  const counts = addText + gap + delText;
-  const meta = statusText + gap + nText + slash + mText;
-  if (!cols?.date) return gap + counts + gap + meta;
-  const dateGap = paint(FILE_DATE_GAP, fgRgb, bgRgb, color);
-  const age = paint(parts.date, THEME.mutedFg, bgRgb, color);
-  return gap + counts + gap + meta + dateGap + age;
-};
-
-const paintTodosRow = (entry, width, color, selected, cols) => {
-  const inner = Math.max(1, width - 1);
-  const mark = selected ? FILE_MARK : ' ';
-  const prefix = ` ${mark} `;
-  const parts = padColumns(fileRowFields(entry), cols, FILE_COL_ALIGN);
-  const meta = joinFileMeta(parts);
-  const dated = joinFileDate(parts, cols);
-  const suffix = `${meta}${dated}`;
-  const pathW = Math.max(1, inner - visibleWidth(prefix + suffix));
-  const clipped = truncateVisible(entry.path, pathW);
-  const pad = Math.max(0, pathW - visibleWidth(clipped));
-  const left = `${prefix}${clipped}${' '.repeat(pad)}`;
-  const fgRgb = THEME.buttonHotFg;
-  const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
-  const edge = fill(1, fgRgb, bgRgb, color);
-  if (!color) return `${left}${suffix}${edge}`;
-  let out = `${seq(fgRgb, bgRgb)}${EL}`;
-  out += paint(left, fgRgb, bgRgb, color, true);
-  out += paint(meta, fgRgb, bgRgb, color, true);
-  if (!dated) return out + edge;
-  out += paint(FILE_DATE_GAP, fgRgb, bgRgb, color);
-  out += paint(parts.date, THEME.mutedFg, bgRgb, color);
-  return out + edge;
+  let out = gap + paint(parts.add, THEME.addLineFg, bgRgb, color);
+  out += gap + paint(parts.del, THEME.delLineFg, bgRgb, color);
+  out += gap + paint(parts.status, fgRgb, bgRgb, color);
+  out += gap + paint(parts.n, fgRgb, bgRgb, color);
+  out += paint('/', fgRgb, bgRgb, color);
+  return out + paint(parts.m, fgRgb, bgRgb, color);
 };
 
 const paintFileRow = (entry, width, color, selected, cols) => {
-  if (isTodosEntry(entry)) {
-    return paintTodosRow(entry, width, color, selected, cols);
-  }
+  const tasks = isTasksEntry(entry);
   const inner = Math.max(1, width - 1);
-  const mark = selected ? FILE_MARK : ' ';
-  const prefix = ` ${mark} `;
+  const prefix = markPrefix(selected);
   const parts = padColumns(fileRowFields(entry), cols, FILE_COL_ALIGN);
-  const suffix = `${joinFileMeta(parts)}${joinFileDate(parts, cols)}`;
-  const pathW = Math.max(1, inner - visibleWidth(prefix + suffix));
-  const { path, status } = entry;
-  const clipped = truncateVisible(path, pathW);
-  const pad = Math.max(0, pathW - visibleWidth(clipped));
-  const left = `${prefix}${clipped}${' '.repeat(pad)}`;
-  const fgRgb = fileRowFg(status, selected);
+  const { add, del, status, n, m } = parts;
+  const meta = `  ${add}  ${del}  ${status}  ${n}/${m}`;
+  const date = cols.date ? `${FILE_DATE_GAP}${parts.date}` : '';
+  const pathW = Math.max(1, inner - visibleWidth(prefix + meta + date));
+  const path = trimVisible(entry.path, pathW);
+  const pad = ' '.repeat(Math.max(0, pathW - visibleWidth(path)));
+  const left = `${prefix}${path}${pad}`;
+  const fgRgb = fileRowFg(entry, selected);
   const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
   const edge = fill(1, fgRgb, bgRgb, color);
-  if (!color) return `${left}${suffix}${edge}`;
+  if (!color) return `${left}${meta}${date}${edge}`;
   let out = `${seq(fgRgb, bgRgb)}${EL}`;
-  out += paint(left, fgRgb, bgRgb, color);
-  out += paintFileSuffix(parts, cols, fgRgb, bgRgb, color);
+  out += paint(left, fgRgb, bgRgb, color, tasks);
+  if (tasks) out += paint(meta, fgRgb, bgRgb, color, true);
+  else out += paintFileMeta(parts, fgRgb, bgRgb, color);
+  if (date) {
+    out += paint(FILE_DATE_GAP, fgRgb, bgRgb, color);
+    out += paint(parts.date, THEME.mutedFg, bgRgb, color);
+  }
   return out + edge;
 };
 
 const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
-  const files = view.files ?? [];
-  const cols = measureColumns(files, fileRowFields, FILE_COL_ALIGN);
+  const entries = view.files ?? [];
+  const cols = measureColumns(entries, fileRowFields, FILE_COL_ALIGN);
   const cursor = view.fileCursor ?? 0;
-  const paintRow = (entry, rowWidth, rowColor, selected) =>
-    paintFileRow(entry, rowWidth, rowColor, selected, cols);
-  return paintCursorList(
-    files,
-    cursor,
-    width,
-    color,
-    bodyH,
-    headerLines,
-    paintRow,
-    null,
-    view.listScroll,
-  );
+  const pane = { width, color, bodyH, headerLines, offset: view.listScroll };
+  const paintRow = (entry, selected) =>
+    paintFileRow(entry, width, color, selected, cols);
+  return paintCursorList(entries, cursor, pane, paintRow);
 };
 
 module.exports = { paintBodyFiles };