reslop 0.2.5 → 0.2.7

package/lib/render/primitives.js

@@ -2,68 +2,31 @@
 
 const ansi = require('../ansi.js');
 const actions = require('../session/actions.js');
-const { LIST_PANES } = actions;
 
-const { THEME, paint, visibleWidth, truncateVisible, seq, EL, RESET } = ansi;
-const { graphemes, graphemeWidth } = ansi;
+const { THEME, paint, visibleWidth, graphemes, graphemeWidth } = ansi;
+const { LIST_PANES } = actions;
 
 const GUTTER_W = 2;
 const FILE_MARK = '▶';
+const MARK_W = visibleWidth(` ${FILE_MARK} `);
 const LIST_PAD = 1;
-const CHECK_DONE = 'xX';
-const CHECK_TOKEN = /\[([ xX])\]/;
-const CHECK_LEAD = /^\[[ xX]\] /;
+const NO_EDITS = [];
 
 const fill = (width, fgRgb, bgRgb, color) =>
   paint(' '.repeat(Math.max(0, width)), fgRgb, bgRgb, color);
 
-const paintBar = (text, width, fgRgb, bgRgb, color) => {
-  const clipped = truncateVisible(text, width);
-  const pad = Math.max(0, width - visibleWidth(clipped));
-  const filled = clipped + ' '.repeat(pad);
-  if (!color) return filled;
-  return `${seq(fgRgb, bgRgb)}${EL}${filled}${RESET}`;
-};
+const markPrefix = (selected) => ` ${selected ? FILE_MARK : ' '} `;
 
-const splitCheck = (text) => {
-  const match = CHECK_TOKEN.exec(text);
-  if (!match) return null;
-  const start = match.index;
-  const token = match[0];
-  const before = text.slice(0, start);
-  const mark = match[1];
-  const after = text.slice(start + token.length);
-  return { before, mark, token, after };
-};
+const isListPane = (pane) =>
+  LIST_PANES.includes(pane) || pane === 'dashboard' || pane === 'repos';
 
-const paintCheckBar = (text, width, fgRgb, bgRgb, color, plain = false) => {
-  const clipped = truncateVisible(text, width);
-  const parts = color ? splitCheck(clipped) : null;
-  if (!parts) return paintBar(text, width, fgRgb, bgRgb, color);
-  const pad = Math.max(0, width - visibleWidth(clipped));
-  const done = CHECK_DONE.includes(parts.mark);
-  let chipFg = THEME.checkFg;
-  let chipBg = THEME.checkBg;
-  if (plain) {
-    chipFg = fgRgb;
-    chipBg = bgRgb;
-  } else if (done) {
-    chipFg = THEME.checkDoneFg;
-    chipBg = THEME.checkDoneBg;
-  }
-  const after = `${parts.after}${' '.repeat(pad)}`;
-  let out = `${seq(fgRgb, bgRgb)}${EL}`;
-  if (parts.before) out += paint(parts.before, fgRgb, bgRgb, color);
-  out += paint(parts.token, chipFg, chipBg, color);
-  if (after) out += paint(after, fgRgb, bgRgb, color);
-  return out;
-};
+const isTaskView = (view) => view.item?.origin === 'task';
+
+const branchLabel = (name) => `${name ?? ''}`.trim();
 
 const padVisible = (text, width, align) => {
-  const n = Math.max(0, width - visibleWidth(text));
-  const gap = ' '.repeat(n);
-  if (align === 'end') return `${text}${gap}`;
-  return `${gap}${text}`;
+  const gap = ' '.repeat(Math.max(0, width - visibleWidth(text)));
+  return align === 'end' ? `${text}${gap}` : `${gap}${text}`;
 };
 
 const splitWidths = (width) => {
@@ -75,49 +38,12 @@ const splitWidths = (width) => {
 const paintSplitRule = (color) =>
   fill(1, THEME.splitGutterFg, THEME.splitGutterBg, color);
 
-const paintSplitBlank = (width, color) => {
-  const { leftW, rightW } = splitWidths(width);
-  return (
-    fill(leftW, THEME.ctxFg, THEME.ctxBg, color) +
-    paintSplitRule(color) +
-    fill(rightW, THEME.ctxFg, THEME.ctxBg, color)
-  );
-};
-
 const paintBodyFill = (width, color, kind) => {
-  if (kind === 'files') {
-    const inner = Math.max(1, width - 1);
-    const main = fill(inner, THEME.ctxFg, THEME.ctxBg, color);
-    const edge = fill(1, THEME.ctxFg, THEME.ctxBg, color);
-    return main + edge;
-  }
-  if (kind === 'split') return paintSplitBlank(width, color);
-  return fill(width, THEME.ctxFg, THEME.ctxBg, color);
-};
-
-const windowRows = (rows, focus, cap) => {
-  if (rows.length <= cap) return { rows, offset: 0 };
-  let start = focus - cap + 1;
-  if (start < 0) start = 0;
-  if (start + cap > rows.length) start = rows.length - cap;
-  return { rows: rows.slice(start, start + cap), offset: start };
-};
-
-const listWindowStart = (focus, offset, listH, count) => {
-  let start = offset ?? 0;
-  if (focus < start) start = focus;
-  if (focus >= start + listH) start = focus - listH + 1;
-  const maxStart = Math.max(0, count - listH);
-  if (start > maxStart) start = maxStart;
-  if (start < 0) start = 0;
-  return start;
-};
-
-const extraIdx = (extraRow, cursor, count) => {
-  if (!extraRow) return -1;
-  if (extraRow.at === 'start') return 0;
-  if (extraRow.at === 'replace') return extraRow.index ?? cursor;
-  return count;
+  const ctx = (n) => fill(n, THEME.ctxFg, THEME.ctxBg, color);
+  if (kind === 'files') return ctx(Math.max(1, width - 1)) + ctx(1);
+  if (kind !== 'split') return ctx(width);
+  const { leftW, rightW } = splitWidths(width);
+  return ctx(leftW) + paintSplitRule(color) + ctx(rightW);
 };
 
 const paneResult = (fields = {}) => ({
@@ -131,11 +57,29 @@ const paneResult = (fields = {}) => ({
   editHits: fields.editHits ?? [],
 });
 
-const NO_EDITS = [];
+const editSpan = (x0, textX, x1, start, text) => ({
+  x0,
+  textX,
+  x1,
+  start,
+  text,
+  limit: start + text.length,
+  live: true,
+});
 
-const listLine = (row, index, cursor = null, edits = NO_EDITS) => {
-  const hit = index >= 0;
-  return { row, index, hit, cursor, edits };
+const listLine = (row, index, cursor = null, edits = NO_EDITS) => ({
+  row,
+  index,
+  hit: index >= 0,
+  cursor,
+  edits,
+});
+
+const listWindowStart = (focus, offset, listH, count) => {
+  let start = offset ?? 0;
+  if (focus < start) start = focus;
+  if (focus >= start + listH) start = focus - listH + 1;
+  return Math.max(0, Math.min(start, count - listH));
 };
 
 const rowCursor = (cursor, row) => {
@@ -150,11 +94,10 @@ const paintListWindow = (count, focus, pane, lineAt) => {
   const listH = bodyH - pad * 2;
   const start = listWindowStart(focus, offset, listH, count);
   const blank = paintBodyFill(width, color, 'files');
-  const body = [];
+  const body = pad ? [blank] : [];
   const fileHits = [];
   const editHits = [];
   let cursor = null;
-  if (pad) body.push(blank);
   for (let i = 0; i < listH; i++) {
     const line = lineAt(start + i);
     if (!line) break;
@@ -169,30 +112,35 @@ const paintListWindow = (count, focus, pane, lineAt) => {
   return paneResult({ body, fileHits, editHits, cursor, listScroll: start });
 };
 
-const editLine = (extraRow) => {
-  const { row, cursor, edit, edits = [] } = extraRow;
-  return listLine(row, -1, cursor, edit ? [...edits, edit] : edits);
+const insertedAt = (extra, count) => {
+  if (extra.at === 'start') return 0;
+  if (extra.at !== 'index') return count;
+  const index = extra.index ?? count;
+  return Math.max(0, Math.min(index, count));
 };
 
-const paintCursorList = (items, cursor, pane, paintRow, extraRow = null) => {
-  const edit = extraRow ? editLine(extraRow) : null;
-  const inserting = edit !== null && extraRow.at === 'start';
-  const extra = edit && extraRow.at !== 'replace' ? 1 : 0;
-  const extraAt = extraIdx(extraRow, cursor, items.length);
-  const lineAt = (idx) => {
-    if (edit && idx === extraAt) return edit;
-    const index = inserting ? idx - 1 : idx;
+const paintCursorList = (items, cursor, pane, paintRow, extra = null) => {
+  const lineAt = (index) => {
     const entry = items[index];
     if (!entry) return null;
-    return listLine(paintRow(entry, !edit && index === cursor), index);
+    const selected = !extra && index === cursor;
+    return listLine(paintRow(entry, selected, index), index);
   };
-  const focus = edit ? extraAt : cursor;
-  return paintListWindow(items.length + extra, focus, pane, lineAt);
+  if (!extra) return paintListWindow(items.length, cursor, pane, lineAt);
+  const edit = listLine(extra.row, -1, extra.cursor, extra.edits);
+  if (extra.at === 'replace') {
+    const at = extra.index;
+    const replaced = (i) => (i === at ? edit : lineAt(i));
+    return paintListWindow(items.length, at, pane, replaced);
+  }
+  const at = insertedAt(extra, items.length);
+  const inserted = (i) => (i === at ? edit : lineAt(i < at ? i : i - 1));
+  return paintListWindow(items.length + 1, at, pane, inserted);
 };
 
 const sliceVisible = (text, skip, width) => {
   if (width <= 0) return '';
-  const parts = graphemes(`${text ?? ''}`);
+  const parts = graphemes(text);
   let used = 0;
   let i = 0;
   const drop = Math.max(0, skip);
@@ -214,59 +162,16 @@ const sliceVisible = (text, skip, width) => {
 };
 
 const fieldWindow = (text, cursor, scroll, width) => {
-  const raw = `${text ?? ''}`;
   if (width <= 0) return { text: '', col: 0, scroll: 0 };
-  const at = Math.max(0, Math.min(cursor ?? 0, raw.length));
-  const col = visibleWidth(raw.slice(0, at));
-  let next = scroll ?? 0;
-  if (next < 0) next = 0;
+  const at = Math.max(0, Math.min(cursor ?? 0, text.length));
+  const col = visibleWidth(text.slice(0, at));
+  let next = Math.max(0, scroll ?? 0);
   if (col < next) next = col;
   if (col >= next + width) next = col - width + 1;
-  const shown = sliceVisible(raw, next, width);
+  const shown = sliceVisible(text, next, width);
   return { text: shown, col: col - next, scroll: next };
 };
 
-const branchLabel = (name) => `${name ?? ''}`.trim();
-
-const paintListEdit = (compose, width, color, edgeW = 0) => {
-  const inner = Math.max(1, width - edgeW);
-  const prefix = ` ${FILE_MARK} `;
-  const prefixW = visibleWidth(prefix);
-  const rest = Math.max(1, inner - prefixW);
-  const text = `${compose.text ?? ''}`.replaceAll('\n', ' ');
-  const win = fieldWindow(text, compose.cursor, compose.scrollCol, rest);
-  const clipped = win.text;
-  const pad = Math.max(0, rest - visibleWidth(clipped));
-  const left = `${prefix}${clipped}${' '.repeat(pad)}`;
-  const fgRgb = THEME.chromeFg;
-  const bgRgb = THEME.buttonBg;
-  const edge = fill(edgeW, fgRgb, THEME.ctxBg, color);
-  let row = `${left}${edge}`;
-  if (color) {
-    const gap = ' '.repeat(pad);
-    row = `${seq(fgRgb, bgRgb)}${EL}`;
-    row += paint(prefix, fgRgb, bgRgb, color);
-    row += paint(clipped, THEME.buttonHotFg, bgRgb, color);
-    row += paint(gap, fgRgb, bgRgb, color);
-    row += edge;
-  }
-  const flat = text;
-  return {
-    row,
-    cursor: { x: prefixW + win.col + 1, scroll: win.scroll },
-    edit: {
-      x0: 1,
-      textX: prefixW + 1,
-      x1: prefixW + 1 + rest,
-      start: 0,
-      text: flat,
-      limit: flat.length,
-      scroll: win.scroll,
-      live: true,
-    },
-  };
-};
-
 const measureColumns = (entries, rowFields, align) => {
   const keys = Object.keys(align);
   const widths = Object.fromEntries(keys.map((key) => [key, 0]));
@@ -282,7 +187,7 @@ const measureColumns = (entries, rowFields, align) => {
 const padColumns = (fields, widths, align) => {
   const parts = {};
   for (const key of Object.keys(align)) {
-    const width = widths?.[key] ?? visibleWidth(fields[key]);
+    const width = widths[key] ?? visibleWidth(fields[key]);
     parts[key] = padVisible(fields[key], width, align[key]);
   }
   return parts;
@@ -309,27 +214,27 @@ const paintColumns = (parts, widths, fgRgb, bgRgb, color, tones) => {
 };
 
 module.exports = {
-  measureColumns,
-  padColumns,
-  joinColumns,
-  paintColumns,
   GUTTER_W,
   FILE_MARK,
-  LIST_PANES,
-  CHECK_LEAD,
+  MARK_W,
   fill,
-  paintBar,
-  paintCheckBar,
+  markPrefix,
+  isListPane,
+  isTaskView,
+  branchLabel,
   padVisible,
   splitWidths,
   paintSplitRule,
   paintBodyFill,
-  windowRows,
+  paneResult,
+  editSpan,
   listLine,
   paintListWindow,
   paintCursorList,
-  paintListEdit,
+  sliceVisible,
   fieldWindow,
-  branchLabel,
-  paneResult,
+  measureColumns,
+  padColumns,
+  joinColumns,
+  paintColumns,
 };

package/lib/render/render.js

@@ -5,30 +5,21 @@ const notes = require('./notes.js');
 const diff = require('./diff.js');
 const present = require('./present.js');
 const frame = require('./frame.js');
-const { renderFrame } = frame;
 
-const { QUIT_PROMPT, PUSH_PROMPT } = chrome;
-const { updatePrompt, dropPrompt } = chrome;
 const { formatBusyStatus, headerText, layoutButtons } = chrome;
-const { delCharBg, addCharBg, paintDiffLine, codeInnerWidth } = diff;
-const { todoInnerWidth, todoBodyWidth, noteInnerWidth } = notes;
+const { todoBodyWidth, noteInnerWidth } = notes;
+const { paintDiffLine, codeInnerWidth } = diff;
 const { presentCursor, presentRows } = present;
+const { renderFrame } = frame;
 
 module.exports = {
-  QUIT_PROMPT,
-  PUSH_PROMPT,
-  updatePrompt,
-  dropPrompt,
-  delCharBg,
-  addCharBg,
-  paintDiffLine,
+  formatBusyStatus,
   headerText,
   layoutButtons,
-  todoInnerWidth,
   todoBodyWidth,
   noteInnerWidth,
+  paintDiffLine,
   codeInnerWidth,
-  formatBusyStatus,
   renderFrame,
   presentCursor,
   presentRows,

package/lib/render/report.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const commands = require('../npm-commands.js');
+const { formatTable } = commands;
+const reportRender = require('../report-render.js');
+const { summaryRows, problemRows, displayMessage, quoteLines } = reportRender;
+
+const reportProblem = (item) => {
+  const title = item.name || item.message || item.code || 'problem';
+  const mark = item.severity === 'warning' ? '△' : '✖';
+  const count = item.count > 1 ? `  × ${item.count}` : '';
+  const lines = ['', `${mark} ${title.split('\n')[0]}${count}`, ''];
+  lines.push(...formatTable(problemRows(item)));
+  const message = displayMessage(item);
+  if (message) lines.push('', ...quoteLines(message));
+  if (item.trace) {
+    lines.push('', 'Stack');
+    for (const row of item.trace.split(/\r?\n/)) {
+      const frame = row.trim().replace(/^at\s+/, '');
+      if (frame) lines.push(`  at ${frame}`);
+    }
+  }
+  if (item.related.length) {
+    lines.push('', 'Related failures');
+    for (const row of item.related) lines.push(`  ↳ ${row}`);
+  }
+  return lines;
+};
+
+const renderReport = (doc) => {
+  const lines = [];
+  for (const item of doc.reports) {
+    if (lines.length) lines.push('');
+    const mark = item.ok ? '✔' : '✖';
+    lines.push(`${mark} ${item.tool}  ·  exit ${doc.exit}`, '');
+    lines.push(...formatTable(summaryRows(item.summary)));
+    for (const entry of item.problems) lines.push(...reportProblem(entry));
+  }
+  if (doc.stderr) lines.push('', 'Stderr', doc.stderr);
+  return `${lines.join('\n')}\n`;
+};
+
+module.exports = { renderReport };

package/lib/render/repos.js

@@ -0,0 +1,226 @@
+'use strict';
+
+const ansi = require('../ansi.js');
+const { THEME } = ansi;
+const primitives = require('./primitives.js');
+const { paintBodyFill, paneResult } = primitives;
+const tiles = require('./tiles.js');
+const { seg, spinner, equalGrid, pageWindow, placeEqualTiles } = tiles;
+const { paintTile, composeBands, tileHits, pageFill } = tiles;
+const { segmentsWidth, clipSegments } = tiles;
+const table = require('./dash-table.js');
+const { size, isHot } = table;
+
+const REPO_MIN_H = 6;
+const MARGIN_MIN_H = 12;
+const EXT_LIMIT = 3;
+const DIM_BACKS = {
+  head: THEME.dashDimHeadBg,
+  tile: THEME.dashDimTileBg,
+  row: THEME.dashDimRowBg,
+};
+const RUN_ICON = {
+  passed: ['✔', 'add'],
+  failed: ['✖', 'error'],
+  aborted: ['⊘', 'muted'],
+};
+
+const extName = (key) => {
+  const text = `${key ?? ''}`;
+  if (!text || text === '(none)') return 'none';
+  return text.startsWith('.') ? text.slice(1) : text;
+};
+
+const blinkTone = (frame) => (Math.abs(frame) % 2 ? 'hot' : 'warn');
+
+const spin = (frame) => seg(spinner(frame), 'warn', true);
+
+const rowPending = (row) =>
+  !row.filesReady ||
+  !row.commitsReady ||
+  !row.diffReady ||
+  !row.tasksReady ||
+  !row.runsReady ||
+  !row.npmReady;
+
+const fitAside = (left, right, width) => {
+  const rightW = segmentsWidth(right);
+  const room = Math.max(0, width - rightW - 1);
+  const clipped = clipSegments(left, room);
+  const gap = Math.max(1, width - segmentsWidth(clipped) - rightW);
+  return [...clipped, seg(' '.repeat(gap)), ...right];
+};
+
+const titleLine = (row, ctx, selected, width) => {
+  const hot = isHot(row.activityAt, ctx.now);
+  const tone = hot ? blinkTone(ctx.frame) : 'text';
+  const left = [seg(row.name, tone, selected || hot)];
+  if (hot) left.push(seg(' ●', tone, true));
+  const right = [];
+  if (rowPending(row)) right.push(spin(ctx.frame), seg(' '));
+  const label = row.filesReady ? size(row.bytes) : '…';
+  const sizeTone = row.filesReady ? 'text' : 'muted';
+  right.push(seg(label, sizeTone, row.filesReady));
+  return fitAside(left, right, width);
+};
+
+const extLine = (row, ctx) => {
+  if (!row.filesReady) return [spin(ctx.frame)];
+  const exts = row.exts.slice(0, EXT_LIMIT);
+  if (!exts.length) return [seg('no files', 'muted')];
+  const segs = [];
+  for (let i = 0; i < exts.length; i++) {
+    if (i) segs.push(seg('  '));
+    segs.push(seg(extName(exts[i].key), 'sha'));
+    segs.push(seg(` ${size(exts[i].bytes)}`, 'text'));
+  }
+  return segs;
+};
+
+const countValue = (ready, text, frame) =>
+  ready ? seg(text, 'text', true) : spin(frame);
+
+const countLine = (row, ctx) => [
+  seg('tasks: ', 'muted'),
+  countValue(row.tasksReady, `${row.tasksDone}/${row.tasks}`, ctx.frame),
+  seg('   commits: ', 'muted'),
+  countValue(row.commitsReady, `${row.commits}`, ctx.frame),
+];
+
+const resultNote = (run) => {
+  const result = run.result;
+  if (!result) return [];
+  if (typeof result.tests === 'number') {
+    const note = [seg(` ${result.tests}`, 'muted')];
+    if (result.failed) note.push(seg(` ${result.failed} fail`, 'error'));
+    return note;
+  }
+  if (typeof result.errors === 'number') {
+    return [seg(` ${result.errors} err`, result.errors ? 'error' : 'muted')];
+  }
+  return [];
+};
+
+const runLine = (row, ctx) => {
+  if (!row.runsReady) return [seg('run: ', 'muted'), spin(ctx.frame)];
+  const run = row.run;
+  if (!run) return [seg('run: ', 'muted'), seg('idle', 'muted')];
+  if (run.status === 'running') {
+    const seen = run.done + run.failed;
+    const total = run.expected > 0 ? `/${run.expected}` : '';
+    const fail = run.failed ? ` ${run.failed} fail` : '';
+    return [
+      seg(`${spinner(ctx.frame)} `, 'warn', true),
+      seg(run.name || 'run', 'text'),
+      seg(` ${seen}${total}${fail}`, 'warn'),
+    ];
+  }
+  const icon = RUN_ICON[run.status] ?? ['?', 'muted'];
+  return [
+    seg(`${icon[0]} `, icon[1], true),
+    seg(run.name || 'run', 'text'),
+    seg(` ${run.status}`, icon[1]),
+    ...resultNote(run),
+  ];
+};
+
+const npmLine = (row, ctx) => {
+  if (!row.npmReady) return [seg('deps: ', 'muted'), spin(ctx.frame)];
+  const npm = row.npm;
+  if (!npm || !npm.hasManifest) return [seg('no package.json', 'muted')];
+  const modules = npm.modules || { count: 0, bytes: 0 };
+  const segs = [
+    seg('deps: ', 'muted'),
+    seg(`${npm.deps}`, 'text'),
+    seg('  dev: ', 'muted'),
+    seg(`${npm.dev}`, 'text'),
+    seg('  all: ', 'muted'),
+    seg(`${modules.count}`, 'text'),
+    seg(' (', 'muted'),
+    seg(size(modules.bytes), 'text'),
+    seg(')', 'muted'),
+  ];
+  if (npm.audit) {
+    segs.push(
+      seg('  '),
+      seg('🚨 ', 'error'),
+      seg(`${npm.audit}`, 'error', true),
+    );
+  }
+  if (npm.outdated) {
+    segs.push(
+      seg('  '),
+      seg('⚠️ ', 'warn'),
+      seg(`${npm.outdated}`, 'warn', true),
+    );
+  }
+  return segs;
+};
+
+const diffLine = (row, ctx) => {
+  if (!row.diffReady) return [seg('diff: ', 'muted'), spin(ctx.frame)];
+  const diff = row.diff;
+  const added = diff.stagedAdded + diff.unstagedAdded;
+  const removed = diff.stagedRemoved + diff.unstagedRemoved;
+  return [
+    seg('diff: ', 'muted'),
+    seg(`+${diff.stagedAdded}/${added}`, 'add'),
+    seg('  '),
+    seg(`-${diff.stagedRemoved}/${removed}`, 'del'),
+  ];
+};
+
+const repoContent = (row, ctx, selected, width) => ({
+  titleLine: titleLine(row, ctx, selected, width),
+  lines: [
+    extLine(row, ctx),
+    countLine(row, ctx),
+    runLine(row, ctx),
+    diffLine(row, ctx),
+    npmLine(row, ctx),
+  ],
+});
+
+const paintRepos = (model, bands, color) => {
+  const painted = new Map();
+  const ctx = { now: model.now, frame: model.frame };
+  const selected = model.tiles[model.cursor];
+  const selectedId = selected ? selected.id : '';
+  for (const band of bands) {
+    for (const place of band.tiles) {
+      const row = model.tiles.find((tile) => tile.id === place.id);
+      if (!row) continue;
+      const tile = { id: row.id, key: '', title: row.name };
+      const inner = Math.max(0, place.w - 2);
+      const picked = row.id === selectedId;
+      const content = repoContent(row, ctx, picked, inner);
+      const backs = picked ? null : DIM_BACKS;
+      const rows = paintTile(tile, content, place.w, band.h, color, backs);
+      painted.set(place.id, rows);
+    }
+  }
+  return painted;
+};
+
+const paintBodyRepos = (view, width, color, bodyH, headerLines) => {
+  const model = view.repos;
+  if (!model || !model.tiles.length) {
+    const blank = paintBodyFill(width, color, 'files');
+    return paneResult({ body: new Array(bodyH).fill(blank) });
+  }
+  const margin = bodyH >= MARGIN_MIN_H ? 1 : 0;
+  const height = Math.max(1, bodyH - margin * 2);
+  const grid = equalGrid(width, height, model.tiles.length, 34, REPO_MIN_H);
+  const page = pageWindow(model.tiles.length, model.cursor, grid.cap);
+  const shown = model.tiles.slice(page.start, page.end);
+  const bands = placeEqualTiles(shown, grid);
+  model.cols = grid.cols;
+  const painted = paintRepos(model, bands, color);
+  const rows = composeBands(bands, painted, width, height, color);
+  const pad = new Array(margin).fill(pageFill(width, color));
+  const body = [...pad, ...rows, ...pad];
+  const fileHits = tileHits(bands, headerLines + margin);
+  return paneResult({ body, fileHits });
+};
+
+module.exports = { REPO_MIN_H, extName, paintBodyRepos };

package/lib/render/search.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const ansi = require('../ansi.js');
+const { THEME, paint } = ansi;
+
+const paintPathText = (text, fg, bg, color, bold, spans) => {
+  if (!spans.length) return paint(text, fg, bg, color, bold);
+  let out = '';
+  let at = 0;
+  for (const span of spans) {
+    if (span.start > at) {
+      out += paint(text.slice(at, span.start), fg, bg, color, bold);
+    }
+    const on = span.on === true;
+    const markFg = on ? THEME.searchOnFg : THEME.searchFg;
+    const markBg = on ? THEME.searchOnBg : THEME.searchBg;
+    const slice = text.slice(span.start, span.end);
+    out += paint(slice, markFg, markBg, color, true);
+    at = span.end;
+  }
+  if (at < text.length) out += paint(text.slice(at), fg, bg, color, bold);
+  return out;
+};
+
+module.exports = { paintPathText };