reslop 0.1.8 → 0.2.0

package/lib/render/chrome.js

@@ -6,10 +6,12 @@ const files = require('../files.js');
 const primitives = require('./primitives.js');
 
 const { itemPath, TODO_FILE, isTodosEntry, fileTotals } = files;
-const { ACTION_IDS, BRANCH_ACTIONS, actionLetter, buttonWord } = keys;
-const { FILES_DISABLED, FILES_GIT_DISABLED, BRANCHES_DISABLED } = keys;
-const { TODO_DISABLED, DIFF_DISABLED, diffGitDisabled } = keys;
-const { branchGitDisabled, CONFIRM, confirmPrefix, promptFromChoices } = keys;
+const { ACTION_IDS, BRANCH_ACTIONS, COMMIT_ACTIONS, actionLetter } = keys;
+const { buttonWord } = keys;
+const { FILES_HIDDEN, FILES_GIT_DISABLED, BRANCHES_DISABLED } = keys;
+const { COMMITS_DISABLED, TODO_DISABLED, DIFF_DISABLED, UNIT_DISABLED } = keys;
+const { diffGitDisabled, branchGitDisabled, commitGitDisabled } = keys;
+const { CONFIRM, confirmPrefix, promptFromChoices } = keys;
 const { THEME, paint, visibleWidth } = ansi;
 const { truncateVisible, fg, RESET, EL, seq } = ansi;
 const { fill, branchLabel, paintBracketName } = primitives;
@@ -63,6 +65,8 @@ const INFO_STATUS = [
   'saved',
   'reloaded',
   'not a diff block',
+  'file scope',
+  'diff mode',
   'committed',
   'amended',
   'fixup',
@@ -91,7 +95,6 @@ const INFO_STATUS = [
 const INFO_PREFIX = ['checked out ', 'created ', 'rebased onto ', 'dropped '];
 
 const QUIT_PROMPT = promptFromChoices(CONFIRM.confirmQuit.choices);
-const COMMIT_PROMPT = promptFromChoices(CONFIRM.confirmCommit.choices);
 const updatePrompt = (from, to) => ` update reslop ${from} → ${to}? y/n`;
 const dropPrompt = (name) => ` drop ${name}? y/n`;
 const PUSH_REJECT_PREFIX = CONFIRM.confirmPush.prefix;
@@ -112,8 +115,6 @@ const originLabel = (origin, view) => {
   return origin ?? 'unknown';
 };
 
-const headerRoleFg = (role) => HEADER_ROLE_FG[role] ?? THEME.headerChromeFg;
-
 const pathSegments = (rel) => {
   const segs = [];
   if (!rel) return segs;
@@ -160,6 +161,24 @@ const headerTarget = (view) => {
     const origin = entry.current ? 'current' : 'branch';
     return { path: entry.name, origin, n, total };
   }
+  if (pane === 'commits') {
+    const commits = view.commits ?? [];
+    const cursor = view.commitCursor ?? 0;
+    const entry = commits[cursor];
+    const total = commits.length;
+    const n = total ? cursor + 1 : 0;
+    if (!entry) return { path: '', origin: 'commit', n, total };
+    const origin = entry.head ? 'HEAD' : 'commit';
+    return { path: entry.subject ?? '', origin, n, total };
+  }
+  if (pane === 'unit') {
+    const path = view.reviewPath ?? '';
+    const lines = view.unitLines ?? [];
+    const top = Math.max(0, (view.scroll ?? 0) - 1);
+    const n = lines.length ? Math.min(lines.length, top + 1) : 0;
+    const origin = view.item ? originLabel(view.item.origin, view) : 'unit';
+    return { path, origin, n, total: lines.length };
+  }
   if (!view.item) return { path: '', origin: '', n: 0, total: view.total ?? 0 };
   if (view.item.origin === 'todo') {
     return { path: TODO_FILE, origin: 'todo', n: 1, total: 1 };
@@ -232,7 +251,8 @@ const paintHeader = (view, width, color) => {
     if (!piece.text) {
       continue;
     }
-    out += `${fg(headerRoleFg(piece.role))}${piece.text}`;
+    const roleFg = HEADER_ROLE_FG[piece.role] ?? THEME.headerChromeFg;
+    out += `${fg(roleFg)}${piece.text}`;
   }
   return `${out}${RESET}`;
 };
@@ -276,7 +296,7 @@ const layoutButtons = (width, compact, hidden, extra, disabled) => {
   for (const id of ACTION_IDS) {
     if (id === 'quit') {
       for (const add of extraIds) {
-        if (!hiddenIds.includes(add)) ids.push(add);
+        if (!ids.includes(add)) ids.push(add);
       }
     }
     if (hiddenIds.includes(id)) continue;
@@ -380,8 +400,8 @@ const statusDelta = (total) => {
   const hasDelta =
     stagedAdd || unstagedAdd || stagedDel || unstagedDel || total.added;
   if (!hasDelta && !total.removed) return '';
-  const plus = `+${stagedAdd}/${unstagedAdd}`;
-  const minus = `-${stagedDel}/${unstagedDel}`;
+  const plus = `+${stagedAdd}/${stagedAdd + unstagedAdd}`;
+  const minus = `-${stagedDel}/${stagedDel + unstagedDel}`;
   return joinStatus([plus, minus]);
 };
 
@@ -417,12 +437,14 @@ const statusLayout = (view, status, width) => {
 };
 
 const choiceHits = (choices, prefix, y) => {
-  const hits = [];
+  const { length } = choices;
+  const hits = new Array(length);
   let x = visibleWidth(prefix);
-  for (const choice of choices) {
+  for (let i = 0; i < length; i++) {
+    const choice = choices[i];
     const piece = `${choice.lead}${choice.label}`;
     const w = visibleWidth(piece);
-    hits.push({ id: choice.letter, y, x0: x, x1: x + w });
+    hits[i] = { id: choice.letter, y, x0: x, x1: x + w };
     x += w;
   }
   return hits;
@@ -525,10 +547,16 @@ const statusBranchHit = (view, width, y) => {
   return { id: 'branch', y, x0: open, x1: close + 1 };
 };
 
+const selectedBranch = (view) => (view.branches ?? [])[view.branchCursor ?? 0];
+
+const selectedCommit = (view) => (view.commits ?? [])[view.commitCursor ?? 0];
+
 const hiddenActions = (view) => {
   const pane = view.pane ?? 'diff';
-  if (pane === 'files') return FILES_DISABLED;
+  if (pane === 'files') return FILES_HIDDEN;
+  if (pane === 'unit') return UNIT_DISABLED;
   if (pane === 'branches') return BRANCHES_DISABLED;
+  if (pane === 'commits') return COMMITS_DISABLED;
   if (view.item && view.item.origin === 'todo') return TODO_DISABLED;
   return DIFF_DISABLED;
 };
@@ -541,23 +569,30 @@ const dimFooterActions = (view) => {
     if (!entry || entry.kind !== 'todos') return [];
     return FILES_GIT_DISABLED;
   }
-  if (pane === 'diff') return diffGitDisabled(view.item);
-  if (pane === 'branches') {
-    const branches = view.branches ?? [];
-    const entry = branches[view.branchCursor ?? 0];
-    return branchGitDisabled(entry);
+  if (pane === 'diff' || pane === 'unit') return diffGitDisabled(view.item);
+  if (pane === 'branches') return branchGitDisabled(selectedBranch(view));
+  if (pane === 'commits') {
+    const entry = selectedCommit(view);
+    const staged = (view.counts?.staged ?? 0) > 0;
+    if (!entry) return commitGitDisabled({ canCommit: staged });
+    return commitGitDisabled({ ...entry, canCommit: staged });
   }
   return [];
 };
 
 const extraFooterActions = (view) => {
-  if ((view.pane ?? 'diff') === 'branches') return Object.keys(BRANCH_ACTIONS);
+  const pane = view.pane ?? 'diff';
+  if (pane === 'files') {
+    const scope = view.fileScope === 'file' ? 'diff' : 'file';
+    return [scope, 'commit', 'pull', 'push'];
+  }
+  if (pane === 'branches') return Object.keys(BRANCH_ACTIONS);
+  if (pane === 'commits') return Object.keys(COMMIT_ACTIONS);
   return [];
 };
 
 module.exports = {
   QUIT_PROMPT,
-  COMMIT_PROMPT,
   PUSH_PROMPT,
   updatePrompt,
   dropPrompt,

package/lib/render/commits.js

@@ -0,0 +1,85 @@
+'use strict';
+
+const ansi = require('../ansi.js');
+const primitives = require('./primitives.js');
+const { measureColumns, padColumns, joinColumns, paintColumns } = primitives;
+
+const { THEME, paint, visibleWidth, truncateVisible, seq, EL } = ansi;
+const { fill, FILE_MARK, paneResult, paintCursorList } = primitives;
+
+const COMMIT_COL_ALIGN = {
+  sha: 'end',
+  author: 'start',
+  date: 'start',
+};
+
+const COMMIT_COL_FG = {
+  sha: THEME.shaFg,
+  author: THEME.mutedFg,
+  date: THEME.mutedFg,
+};
+
+const COMMIT_EDGE = 2;
+const COMMIT_TAIL = 1;
+const commitRowFields = (entry) => ({
+  sha: entry.shortSha ?? '',
+  author: entry.author ?? '',
+  date: entry.date ?? '',
+});
+
+const paintCommitRow = (entry, width, color, selected, cols) => {
+  const inner = Math.max(1, width - COMMIT_EDGE - COMMIT_TAIL);
+  const mark = selected ? FILE_MARK : ' ';
+  const prefix = ` ${mark} `;
+  const lead = ' ';
+  const parts = padColumns(commitRowFields(entry), cols, COMMIT_COL_ALIGN);
+  const suffix = joinColumns(parts, cols);
+  const rest = Math.max(1, inner - visibleWidth(prefix + lead + suffix));
+  const subject = truncateVisible(entry.subject ?? '', rest);
+  const pad = Math.max(0, rest - visibleWidth(subject));
+  const after = `${' '.repeat(pad)}`;
+  const left = `${prefix}${lead}${subject}${after}`;
+  const fgRgb = selected ? THEME.chromeFg : THEME.mutedFg;
+  const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
+  const nameFg = selected ? THEME.buttonHotFg : THEME.chromeFg;
+  const tail = ' '.repeat(COMMIT_TAIL);
+  const edge = fill(COMMIT_EDGE, fgRgb, THEME.ctxBg, color);
+  if (!color) return `${left}${suffix}${tail}${edge}`;
+  let out = `${seq(fgRgb, bgRgb)}${EL}`;
+  out += paint(prefix, fgRgb, bgRgb, color);
+  out += paint(lead, nameFg, bgRgb, color);
+  out += paint(subject, nameFg, bgRgb, color);
+  out += paint(after, fgRgb, bgRgb, color);
+  out += paintColumns(parts, cols, fgRgb, bgRgb, color, COMMIT_COL_FG);
+  out += paint(tail, fgRgb, bgRgb, color);
+  return out + edge;
+};
+
+const paintBodyCommits = (view, width, color, bodyH, headerLines) => {
+  const commits = view.commits ?? [];
+  const cols = measureColumns(commits, commitRowFields, COMMIT_COL_ALIGN);
+  const cursor = view.commitCursor ?? 0;
+  const paintRow = (entry, rowWidth, rowColor, selected) =>
+    paintCommitRow(entry, rowWidth, rowColor, selected, cols);
+  const painted = paintCursorList(
+    commits,
+    cursor,
+    width,
+    color,
+    bodyH,
+    headerLines,
+    paintRow,
+    null,
+    view.listScroll,
+  );
+  return paneResult({
+    body: painted.body,
+    fileHits: painted.fileHits,
+    todoOwners: [],
+    cursor: painted.cursor,
+    splitBody: false,
+    listScroll: painted.offset,
+  });
+};
+
+module.exports = { paintBodyCommits };

package/lib/render/diff.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const ansi = require('../ansi.js');
-const { displayLines } = require('../diff.js');
+const { displayLines } = require('../diff/diff.js');
 const highlight = require('../highlight.js');
 const { detectLang } = require('../detect.js');
 const files = require('../files.js');
@@ -81,8 +81,6 @@ const SOFT_WRAP = ['warn', 'note'];
 const DEL_CHAR_BG = ansi.bg(THEME.delCharBg);
 const ADD_CHAR_BG = ansi.bg(THEME.addCharBg);
 
-const lineStyles = (origin) => (origin === 'staged' ? STAGED_STYLES : STYLES);
-
 const paintSpans = (pieces, lineStyle, budget, color) => {
   let out = '';
   let used = 0;
@@ -129,13 +127,13 @@ const paintAuditRule = (width, color) => {
 const paintDiffLine = (line, width, color, origin, lang) => {
   if (line.type === 'noteSep') return paintAuditRule(width, color);
   if (line.type === 'note') return paintAuditNote(line, width, color);
-  const styles = lineStyles(origin);
+  const styles = origin === 'staged' ? STAGED_STYLES : STYLES;
   const style = styles[line.type] ?? styles.ctx;
   const diffSpans = line.spans ?? [{ text: line.text, changed: false }];
   const tokens = tokenize(lang, line.text ?? '');
   const pieces = overlayTokens(tokens, diffSpans);
   const gutterW = Math.min(GUTTER_W, Math.max(0, width));
-  const label = `${style.mark} `.slice(0, gutterW);
+  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);
@@ -190,11 +188,12 @@ const wrapSoftLine = (line, width) => {
   const budget = Math.max(1, width - gutterW);
   const rows = wrapPlain(line.text ?? '', budget);
   const changed = line.wrap === true;
-  const pieces = [];
+  const { length } = rows;
+  const pieces = new Array(length);
   let used = 0;
-  for (let i = 0; i < rows.length; i++) {
+  for (let i = 0; i < length; i++) {
     const text = rows[i];
-    const last = i === rows.length - 1;
+    const last = i === length - 1;
     const spans = [{ text, changed }];
     const next = { ...line, text, spans, editLast: last };
     if (line.editStart !== undefined) {
@@ -203,7 +202,7 @@ const wrapSoftLine = (line, width) => {
       else next.editEnd = next.editStart + text.length;
     }
     used += text.length;
-    pieces.push(next);
+    pieces[i] = next;
   }
   return pieces;
 };
@@ -249,8 +248,7 @@ const expandSoftRows = (lines, width, split) => {
 const onCodePiece = (line, cursor) => {
   if (!line || line.editStart === undefined) return false;
   if (cursor < line.editStart) return false;
-  if (line.editLast) return cursor <= line.editEnd;
-  return cursor < line.editEnd;
+  return cursor <= line.editEnd;
 };
 
 const codeCursorInRows = (rows, split, width, cursor) => {
@@ -283,14 +281,15 @@ const paintBodyDiff = (view, width, color) => {
   const splitBody = layout === 'side' && !item.file.isBinary;
   const raw = dropLeadingEmpty(bodyLines(item, layout, overlay), splitBody);
   const lines = expandSoftRows(raw, width, splitBody);
-  const body = [];
+  const { length } = lines;
+  const body = new Array(length);
   if (splitBody) {
-    for (const row of lines) {
-      body.push(paintSplitRow(row, width, color, item.origin, lang));
+    for (let i = 0; i < length; i++) {
+      body[i] = paintSplitRow(lines[i], width, color, item.origin, lang);
     }
   } else {
-    for (const line of lines) {
-      body.push(paintDiffLine(line, width, color, item.origin, lang));
+    for (let i = 0; i < length; i++) {
+      body[i] = paintDiffLine(lines[i], width, color, item.origin, lang);
     }
   }
   const edit = overlay ? overlay.cursor : null;
@@ -304,4 +303,5 @@ module.exports = {
   paintDiffLine,
   codeInnerWidth,
   paintBodyDiff,
+  codeCursorInRows,
 };

package/lib/render/files.js

@@ -3,10 +3,11 @@
 const ansi = require('../ansi.js');
 const files = require('../files.js');
 const primitives = require('./primitives.js');
+const { measureColumns, padColumns } = primitives;
 
 const { isTodosEntry } = files;
 const { THEME, paint, visibleWidth, truncateVisible, seq, EL } = ansi;
-const { fill, padVisible, FILE_MARK, paneResult, paintCursorList } = primitives;
+const { fill, FILE_MARK, paneResult, paintCursorList } = primitives;
 
 const FILE_STATUS_FG = {
   unstaged: THEME.delLineFg,
@@ -15,23 +16,24 @@ const FILE_STATUS_FG = {
   partial: THEME.warnFg,
 };
 
-const FILE_COL_KEYS = ['add', 'del', 'status', 'n', 'm'];
-
 const FILE_COL_ALIGN = {
   add: 'start',
   del: 'start',
   status: 'start',
   n: 'start',
   m: 'end',
+  date: 'start',
 };
 
+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}`;
-    return { add: '', del: '', status: '', n, m };
+    return { add: '', del: '', status: '', n, m, date: '' };
   }
   const { added, removed, staged, remaining } = entry;
   const add = signedCount('+', added);
@@ -39,20 +41,8 @@ const fileRowFields = (entry) => {
   const status = entry.status ?? '';
   const n = `${staged ?? 0}`;
   const m = `${remaining ?? 0}`;
-  return { add, del, status, n, m };
-};
-
-const fileColumns = (files) => {
-  const widths = {};
-  for (const key of FILE_COL_KEYS) widths[key] = 0;
-  for (const entry of files) {
-    const fields = fileRowFields(entry);
-    for (const key of FILE_COL_KEYS) {
-      const w = visibleWidth(fields[key]);
-      if (w > widths[key]) widths[key] = w;
-    }
-  }
-  return widths;
+  const date = entry.date ?? '';
+  return { add, del, status, n, m, date };
 };
 
 const fileRowFg = (status, selected) => {
@@ -62,23 +52,17 @@ const fileRowFg = (status, selected) => {
   return THEME.mutedFg;
 };
 
-const fileRowParts = (entry, cols) => {
-  const fields = fileRowFields(entry);
-  const parts = {};
-  for (const key of FILE_COL_KEYS) {
-    const width = cols?.[key] ?? visibleWidth(fields[key]);
-    const align = FILE_COL_ALIGN[key];
-    parts[key] = padVisible(fields[key], width, align);
-  }
-  return parts;
+const joinFileDate = (parts, cols) => {
+  if (!cols?.date) return '';
+  return `${FILE_DATE_GAP}${parts.date}`;
 };
 
-const joinFileSuffix = (parts) => {
+const joinFileMeta = (parts) => {
   const { add, del, status, n, m } = parts;
   return `  ${add}  ${del}  ${status}  ${n}/${m}`;
 };
 
-const paintFileSuffix = (parts, fgRgb, bgRgb, color) => {
+const paintFileSuffix = (parts, cols, fgRgb, bgRgb, color) => {
   const { add, del, status, n, m } = parts;
   const gap = paint('  ', fgRgb, bgRgb, color);
   const addText = paint(add, THEME.addLineFg, bgRgb, color);
@@ -89,15 +73,20 @@ const paintFileSuffix = (parts, fgRgb, bgRgb, color) => {
   const mText = paint(m, fgRgb, bgRgb, color);
   const counts = addText + gap + delText;
   const meta = statusText + gap + nText + slash + mText;
-  return gap + counts + gap + meta;
+  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 = fileRowParts(entry, cols);
-  const suffix = joinFileSuffix(parts);
+  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));
@@ -108,7 +97,10 @@ const paintTodosRow = (entry, width, color, selected, cols) => {
   if (!color) return `${left}${suffix}${edge}`;
   let out = `${seq(fgRgb, bgRgb)}${EL}`;
   out += paint(left, fgRgb, bgRgb, color, true);
-  out += paint(suffix, 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;
 };
 
@@ -119,8 +111,8 @@ const paintFileRow = (entry, width, color, selected, cols) => {
   const inner = Math.max(1, width - 1);
   const mark = selected ? FILE_MARK : ' ';
   const prefix = ` ${mark} `;
-  const parts = fileRowParts(entry, cols);
-  const suffix = joinFileSuffix(parts);
+  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);
@@ -132,13 +124,13 @@ const paintFileRow = (entry, width, color, selected, cols) => {
   if (!color) return `${left}${suffix}${edge}`;
   let out = `${seq(fgRgb, bgRgb)}${EL}`;
   out += paint(left, fgRgb, bgRgb, color);
-  out += paintFileSuffix(parts, fgRgb, bgRgb, color);
+  out += paintFileSuffix(parts, cols, fgRgb, bgRgb, color);
   return out + edge;
 };
 
 const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
   const files = view.files ?? [];
-  const cols = fileColumns(files);
+  const cols = measureColumns(files, fileRowFields, FILE_COL_ALIGN);
   const cursor = view.fileCursor ?? 0;
   const paintRow = (entry, rowWidth, rowColor, selected) =>
     paintFileRow(entry, rowWidth, rowColor, selected, cols);

package/lib/render/frame.js

@@ -6,8 +6,10 @@ const primitives = require('./primitives.js');
 const chrome = require('./chrome.js');
 const files = require('./files.js');
 const branches = require('./branches.js');
+const commits = require('./commits.js');
 const notes = require('./notes.js');
 const diff = require('./diff.js');
+const unit = require('./unit.js');
 
 const { RESET } = ansi;
 const { LIST_PANES, paintBodyFill, paneResult } = primitives;
@@ -17,11 +19,16 @@ const { hiddenActions, dimFooterActions, extraFooterActions } = chrome;
 const { paintNotePanel, paintBodyTodo } = notes;
 const { paintBodyFiles } = files;
 const { paintBodyBranches } = branches;
+const { paintBodyCommits } = commits;
 const { paintBodyDiff } = diff;
+const { paintBodyUnit } = unit;
 
 const bodyKind = (view) => {
   const pane = view.pane ?? 'diff';
-  if (pane === 'files' || pane === 'branches') return pane;
+  if (pane === 'files' || pane === 'branches' || pane === 'commits') {
+    return pane;
+  }
+  if (pane === 'unit') return 'unit';
   if (!view.item) return 'empty';
   if (view.item.origin === 'todo') return 'todo';
   return 'diff';
@@ -39,9 +46,11 @@ const paintBodyEmpty = () =>
 const BODY_PAINT = {
   files: paintBodyFiles,
   branches: paintBodyBranches,
+  commits: paintBodyCommits,
   empty: paintBodyEmpty,
   todo: paintBodyTodo,
   diff: paintBodyDiff,
+  unit: paintBodyUnit,
 };
 
 const paintFrameBody = (view, width, color, bodyH, headerLines) => {
@@ -84,24 +93,31 @@ const windowBody = (view, width, color, bodyH, headerLines, paintedBody) => {
   const listPane = LIST_PANES.includes(pane);
   const fillKind = bodyFillKind(listPane, splitBody);
   const filler = paintBodyFill(width, color, fillKind);
-  const body = [];
-  const todoOwners = [];
+  const lead = !listPane && sourceBody.length > 0;
+  const body = new Array(sourceBody.length + (lead ? 1 : 0));
+  let bodyAt = 0;
   let shift = 0;
-  if (!listPane && sourceBody.length > 0) {
-    body.push(filler);
-    if (sourceOwners.length) todoOwners.push(null);
+  if (lead) {
+    body[bodyAt++] = filler;
     shift = 1;
   }
-  for (const row of sourceBody) body.push(row);
-  for (const owner of sourceOwners) todoOwners.push(owner);
+  for (let i = 0; i < sourceBody.length; i++) body[bodyAt++] = sourceBody[i];
+  const ownerLead = lead && sourceOwners.length;
+  const todoOwners = new Array(sourceOwners.length + (ownerLead ? 1 : 0));
+  let ownerAt = 0;
+  if (ownerLead) todoOwners[ownerAt++] = null;
+  for (let i = 0; i < sourceOwners.length; i++) {
+    todoOwners[ownerAt++] = sourceOwners[i];
+  }
   const scrollRaw = view.scroll ?? 0;
   const scrollMax = Math.max(0, body.length - bodyH);
   const scroll = listPane ? 0 : Math.min(scrollRaw, scrollMax);
-  const slice = [];
   const end = Math.min(body.length, scroll + bodyH);
-  for (let i = scroll; i < end; i++) slice.push(body[i]);
+  const copied = Math.max(0, end - scroll);
+  const slice = new Array(bodyH);
+  for (let i = 0; i < copied; i++) slice[i] = body[scroll + i];
   const todoHits = [];
-  for (let i = 0; i < slice.length; i++) {
+  for (let i = 0; i < copied; i++) {
     const owner = todoOwners[scroll + i];
     if (owner === undefined || owner === null) continue;
     todoHits.push({ y: headerLines + i + 1, cursor: owner });
@@ -111,9 +127,9 @@ const windowBody = (view, width, color, bodyH, headerLines, paintedBody) => {
     shift,
     scroll,
     headerLines,
-    slice.length,
+    copied,
   );
-  while (slice.length < bodyH) slice.push(filler);
+  for (let i = copied; i < bodyH; i++) slice[i] = filler;
   const listScroll = paintedBody.listScroll ?? 0;
   const fileHits = paintedBody.fileHits;
   return { slice, scroll, scrollMax, listScroll, todoHits, fileHits, cursor };

package/lib/render/notes.js

@@ -36,10 +36,11 @@ const wrapTodoItem = (text, inner) => {
   const bodyWidth = Math.max(1, inner - lead);
   const hang = ' '.repeat(lead);
   const wrapped = wrapMultiline(body, bodyWidth);
-  const lines = [];
-  for (let i = 0; i < wrapped.length; i++) {
+  const { length } = wrapped;
+  const lines = new Array(length);
+  for (let i = 0; i < length; i++) {
     const prefix = i === 0 ? mark : hang;
-    lines.push(`${prefix}${wrapped[i]}`);
+    lines[i] = `${prefix}${wrapped[i]}`;
   }
   return lines;
 };

package/lib/render/primitives.js

@@ -8,7 +8,7 @@ const GUTTER_W = 2;
 const FILE_MARK = '▶';
 const FILE_LIST_PAD = 1;
 const CHECK_DONE = 'xX';
-const LIST_PANES = ['files', 'branches'];
+const LIST_PANES = ['files', 'branches', 'commits'];
 const CHECK_TOKEN = /\[([ xX])\]/;
 const CHECK_LEAD = /^\[[ xX]\] /;
 
@@ -180,7 +180,52 @@ const paneResult = (fields) => ({
   listScroll: fields.listScroll ?? 0,
 });
 
+const measureColumns = (entries, rowFields, align) => {
+  const keys = Object.keys(align);
+  const widths = Object.fromEntries(keys.map((key) => [key, 0]));
+  for (const entry of entries) {
+    const fields = rowFields(entry);
+    for (const key of keys) {
+      widths[key] = Math.max(widths[key], visibleWidth(fields[key]));
+    }
+  }
+  return widths;
+};
+
+const padColumns = (fields, widths, align) => {
+  const parts = {};
+  for (const key of Object.keys(align)) {
+    const width = widths?.[key] ?? visibleWidth(fields[key]);
+    parts[key] = padVisible(fields[key], width, align[key]);
+  }
+  return parts;
+};
+
+const columnGap = (key) => (key === 'date' ? '   ' : '  ');
+
+const joinColumns = (parts, widths) => {
+  let text = '';
+  for (const key of Object.keys(parts)) {
+    if (widths[key]) text += columnGap(key) + parts[key];
+  }
+  return text;
+};
+
+const paintColumns = (parts, widths, fgRgb, bgRgb, color, tones) => {
+  let text = '';
+  for (const key of Object.keys(parts)) {
+    if (!widths[key]) continue;
+    text += paint(columnGap(key), fgRgb, bgRgb, color);
+    text += paint(parts[key], tones[key] ?? fgRgb, bgRgb, color);
+  }
+  return text;
+};
+
 module.exports = {
+  measureColumns,
+  padColumns,
+  joinColumns,
+  paintColumns,
   GUTTER_W,
   FILE_MARK,
   LIST_PANES,