reslop 0.2.3 → 0.2.5

package/lib/render/diff.js

@@ -1,9 +1,11 @@
 'use strict';
 
 const ansi = require('../ansi.js');
-const { displayLines } = require('../diff/diff.js');
+const diff = require('../diff/diff.js');
+const { displayLines } = diff;
 const highlight = require('../highlight.js');
-const { detectLang } = require('../detect.js');
+const detect = require('../detect.js');
+const { detectLang } = detect;
 const files = require('../files.js');
 const wrap = require('../wrap.js');
 const primitives = require('./primitives.js');
@@ -11,7 +13,8 @@ const primitives = require('./primitives.js');
 const { itemPath } = files;
 const { tokenize, overlayTokens } = highlight;
 const { wrapPlain } = wrap;
-const { THEME, CODE_FG, codeFg, paint, visibleWidth, truncateVisible } = ansi;
+const { THEME, CODE_FG, codeFg, paint, visibleWidth } = ansi;
+const { truncateVisible, graphemes, graphemeWidth } = ansi;
 const { GUTTER_W, fill, splitWidths, paintSplitRule, paneResult } = primitives;
 
 const STYLES = {
@@ -77,10 +80,43 @@ const STAGED_STYLES = {
   ctx: STYLES.ctx,
 };
 
-const SOFT_WRAP = ['warn', 'note'];
 const delCharBg = () => ansi.bg(THEME.delCharBg);
 const addCharBg = () => ansi.bg(THEME.addCharBg);
 
+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 clipPieces = (pieces, skip) => {
+  if (skip <= 0) return pieces;
+  const out = [];
+  let drop = skip;
+  for (const piece of pieces) {
+    const text = piece.text ?? '';
+    const width = visibleWidth(text);
+    if (drop >= width) {
+      drop -= width;
+      continue;
+    }
+    const shown = drop > 0 ? skipText(text, drop) : text;
+    drop = 0;
+    if (shown) out.push({ ...piece, text: shown });
+  }
+  return out;
+};
+
 const paintSpans = (pieces, lineStyle, budget, color) => {
   let out = '';
   let used = 0;
@@ -124,14 +160,14 @@ const paintAuditRule = (width, color) => {
   return paint(bar, style.baseFg, style.baseBg, color);
 };
 
-const paintDiffLine = (line, width, color, origin, lang) => {
+const paintDiffLine = (line, width, color, origin, lang, scrollCol = 0) => {
   if (line.type === 'noteSep') return paintAuditRule(width, color);
   if (line.type === 'note') return paintAuditNote(line, width, color);
   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 pieces = clipPieces(overlayTokens(tokens, diffSpans), scrollCol);
   const gutterW = Math.min(GUTTER_W, Math.max(0, width));
   const label = `${line.mark ?? style.mark} `.slice(0, gutterW);
   const gutter = paint(label, CODE_FG.punct, style.baseBg, color);
@@ -140,17 +176,24 @@ const paintDiffLine = (line, width, color, origin, lang) => {
   return gutter + rest;
 };
 
-const paintSplitHalf = (line, width, color, origin, lang) => {
+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);
+  return paintDiffLine(line, width, color, origin, lang, scrollCol);
 };
 
-const paintSplitRow = (row, width, color, origin, lang) => {
+const paintSplitRow = (row, width, color, origin, lang, scrollCol) => {
   const { leftW, rightW } = splitWidths(width);
-  const left = paintSplitHalf(row.left, leftW, color, origin, lang);
-  const right = paintSplitHalf(row.right, rightW, color, origin, lang);
+  const left = paintSplitHalf(row.left, leftW, color, origin, lang, scrollCol);
+  const right = paintSplitHalf(
+    row.right,
+    rightW,
+    color,
+    origin,
+    lang,
+    scrollCol,
+  );
   return `${left}${paintSplitRule(color)}${right}`;
 };
 
@@ -183,6 +226,34 @@ const dropLeadingEmpty = (lines, split) => {
   return i ? lines.slice(i) : lines;
 };
 
+const cutSpans = (spans, count) => {
+  const taken = [];
+  const rest = [];
+  let left = count;
+  let i = 0;
+  while (i < spans.length) {
+    const span = spans[i];
+    const text = span.text ?? '';
+    if (left <= 0) {
+      rest.push(span);
+      i += 1;
+      continue;
+    }
+    if (text.length <= left) {
+      taken.push(span);
+      left -= text.length;
+      i += 1;
+      continue;
+    }
+    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);
@@ -191,11 +262,14 @@ const wrapSoftLine = (line, width) => {
   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;
-    const spans = [{ text, changed }];
-    const next = { ...line, text, spans, editLast: last };
+    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;
@@ -207,40 +281,30 @@ const wrapSoftLine = (line, width) => {
   return pieces;
 };
 
-const shouldWrap = (line) => {
-  if (!line) return false;
-  if (SOFT_WRAP.includes(line.type)) return true;
-  return line.wrap === true;
-};
-
-const expandSoftRows = (lines, width, split) => {
+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];
+    return wrapSoftLine(line, lineW);
+  };
   for (const row of lines) {
     if (!split) {
-      if (!shouldWrap(row)) {
-        out.push(row);
-        continue;
-      }
-      for (const part of wrapSoftLine(row, width)) out.push(part);
-      continue;
-    }
-    const right = row.right;
-    if (shouldWrap(right)) {
-      const parts = wrapSoftLine(right, rightW);
-      out.push({ left: row.left, right: parts[0] });
-      for (let i = 1; i < parts.length; i++) {
-        out.push({ left: null, right: parts[i] });
-      }
+      for (const part of partsOf(row, width)) out.push(part);
       continue;
     }
-    const left = row.left;
-    if (shouldWrap(left)) {
-      const parts = wrapSoftLine(left, leftW);
-      for (const part of parts) out.push({ left: part, right: 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(row);
   }
   return out;
 };
@@ -251,7 +315,7 @@ const onCodePiece = (line, cursor) => {
   return cursor <= line.editEnd;
 };
 
-const codeCursorInRows = (rows, split, width, cursor) => {
+const codeCursorInRows = (rows, split, width, cursor, scrollCol = 0) => {
   if (cursor === undefined || cursor === null) return null;
   const { leftW, rightW } = splitWidths(width);
   for (let i = 0; i < rows.length; i++) {
@@ -261,12 +325,39 @@ const codeCursorInRows = (rows, split, width, cursor) => {
     const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
     const take = Math.min(cursor - 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 + col + 1, row: i };
+    return { x: x0 + gutterW + shown + 1, row: i };
   }
   return null;
 };
 
+const codeEditHits = (rows, split, width, scrollCol = 0) => {
+  const { leftW, rightW } = splitWidths(width);
+  const hits = [];
+  for (let i = 0; i < rows.length; i++) {
+    const line = split ? rows[i].right : rows[i];
+    if (!line || line.editStart === undefined) continue;
+    const lineW = split ? rightW : width;
+    const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
+    const pane = split ? leftW + 1 : 0;
+    const textX = pane + gutterW + 1;
+    const end = split ? pane + rightW : width;
+    hits.push({
+      row: i,
+      x0: pane + 1,
+      textX,
+      x1: end + 1,
+      scroll: scrollCol,
+      start: line.editStart,
+      text: line.text ?? '',
+      limit: line.editEnd,
+      live: true,
+    });
+  }
+  return hits;
+};
+
 const codeInnerWidth = (width, layout = 'unified') => {
   const lineW = layout === 'side' ? splitWidths(width).rightW : width;
   const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
@@ -279,22 +370,42 @@ const paintBodyDiff = (view, width, color) => {
   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 raw = dropLeadingEmpty(bodyLines(item, layout, overlay), splitBody);
-  const lines = expandSoftRows(raw, width, 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);
+      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);
+      body[i] = paintDiffLine(
+        lines[i],
+        width,
+        color,
+        item.origin,
+        lang,
+        scrollCol,
+      );
     }
   }
   const edit = overlay ? overlay.cursor : null;
-  const cursor = codeCursorInRows(lines, splitBody, width, edit);
-  return paneResult({ body, fileHits: [], todoOwners: [], cursor, splitBody });
+  const cursor = codeCursorInRows(lines, splitBody, width, edit, scrollCol);
+  const editHits = editing
+    ? codeEditHits(lines, splitBody, width, scrollCol)
+    : [];
+  return paneResult({ body, cursor, splitBody, editHits });
 };
 
 module.exports = {
@@ -304,4 +415,6 @@ module.exports = {
   codeInnerWidth,
   paintBodyDiff,
   codeCursorInRows,
+  codeEditHits,
+  expandSoftRows,
 };

package/lib/render/files.js

@@ -5,9 +5,9 @@ const files = require('../files.js');
 const primitives = require('./primitives.js');
 const { measureColumns, padColumns } = primitives;
 
-const { isTodosEntry } = files;
+const { isTasksEntry, shortAge } = files;
 const { THEME, paint, visibleWidth, truncateVisible, seq, EL } = ansi;
-const { fill, FILE_MARK, paneResult, paintCursorList } = primitives;
+const { fill, FILE_MARK, paintCursorList } = primitives;
 
 const FILE_STATUS_FG = {
   unstaged: THEME.delLineFg,
@@ -30,7 +30,7 @@ const FILE_DATE_GAP = '   ';
 const signedCount = (sign, n) => `${sign}${n ?? 0}`;
 
 const fileRowFields = (entry) => {
-  if (isTodosEntry(entry)) {
+  if (isTasksEntry(entry)) {
     const n = `${entry.staged ?? 0}`;
     const m = `${entry.remaining ?? 0}`;
     return { add: '', del: '', status: '', n, m, date: '' };
@@ -41,7 +41,7 @@ const fileRowFields = (entry) => {
   const status = entry.status ?? '';
   const n = `${staged ?? 0}`;
   const m = `${remaining ?? 0}`;
-  const date = entry.date ?? '';
+  const date = shortAge(entry.date ?? '');
   return { add, del, status, n, m, date };
 };
 
@@ -105,7 +105,7 @@ const paintTodosRow = (entry, width, color, selected, cols) => {
 };
 
 const paintFileRow = (entry, width, color, selected, cols) => {
-  if (isTodosEntry(entry)) {
+  if (isTasksEntry(entry)) {
     return paintTodosRow(entry, width, color, selected, cols);
   }
   const inner = Math.max(1, width - 1);
@@ -132,27 +132,10 @@ const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
   const files = view.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);
-  const painted = paintCursorList(
-    files,
-    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,
-  });
+  const pane = { width, color, bodyH, headerLines, offset: view.listScroll };
+  const paintRow = (entry, selected) =>
+    paintFileRow(entry, width, color, selected, cols);
+  return paintCursorList(files, cursor, pane, paintRow);
 };
 
 module.exports = { paintBodyFiles };

package/lib/render/frame.js

@@ -1,7 +1,8 @@
 'use strict';
 
 const ansi = require('../ansi.js');
-const { overlayRows } = require('../select.js');
+const select = require('../select.js');
+const { overlayRows, markEditorSelection } = select;
 const primitives = require('./primitives.js');
 const chrome = require('./chrome.js');
 const files = require('./files.js');
@@ -15,8 +16,7 @@ const unit = require('./unit.js');
 const { RESET } = ansi;
 const { LIST_PANES, paintBodyFill, paneResult } = primitives;
 const { paintHeader, paintFooter, footerHits, paintStatusLine } = chrome;
-const { layoutButtons, statusBranchHit, statusChoiceHits } = chrome;
-const { hiddenActions, dimFooterActions, extraFooterActions } = chrome;
+const { footerLayout, statusBranchHit, statusChoiceHits } = chrome;
 const { paintNotePanel, paintBodyTodo } = notes;
 const { paintBodyFiles } = files;
 const { paintBodyBranches } = branches;
@@ -33,18 +33,11 @@ const bodyKind = (view) => {
   if (pane === 'npm') return 'npm';
   if (pane === 'unit') return 'unit';
   if (!view.item) return 'empty';
-  if (view.item.origin === 'todo') return 'todo';
+  if (view.item.origin === 'task') return 'tasks';
   return 'diff';
 };
 
-const paintBodyEmpty = () =>
-  paneResult({
-    body: [],
-    fileHits: [],
-    todoOwners: [],
-    cursor: null,
-    splitBody: false,
-  });
+const paintBodyEmpty = () => paneResult();
 
 const BODY_PAINT = {
   files: paintBodyFiles,
@@ -52,7 +45,7 @@ const BODY_PAINT = {
   commits: paintBodyCommits,
   npm: paintBodyNpm,
   empty: paintBodyEmpty,
-  todo: paintBodyTodo,
+  tasks: paintBodyTodo,
   diff: paintBodyDiff,
   unit: paintBodyUnit,
 };
@@ -106,145 +99,131 @@ const revealScroll = (owners, focus, height, prefer) => {
   return start;
 };
 
-const mapBodyCursor = (cursor, shift, scroll, headerLines, shown) => {
+const windowY = (win, row) => {
+  const at = row + win.shift - win.scroll;
+  if (at < 0 || at >= win.shown) return -1;
+  return win.headerLines + at + 1;
+};
+
+const mapEditHits = (hits, win) => {
+  const out = [];
+  for (const hit of hits) {
+    const y = windowY(win, hit.row);
+    if (y >= 0) out.push({ ...hit, y });
+  }
+  return out;
+};
+
+const mapBodyCursor = (cursor, win) => {
   if (!cursor) return null;
-  const row = cursor.row + shift;
-  if (row < scroll || row >= scroll + shown) return null;
-  return {
-    x: cursor.x,
-    y: headerLines + (row - scroll) + 1,
-  };
+  const y = windowY(win, cursor.row);
+  if (y < 0) return null;
+  const point = { x: cursor.x, y };
+  if (typeof cursor.scroll === 'number') point.scroll = cursor.scroll;
+  return point;
 };
 
-const windowBody = (view, width, color, bodyH, headerLines, paintedBody) => {
-  const sourceBody = paintedBody.body;
-  const sourceOwners = paintedBody.todoOwners;
-  const sourceChecks = paintedBody.todoChecks ?? [];
-  const splitBody = paintedBody.splitBody === true;
-  const pane = view.pane ?? 'diff';
-  const listPane = LIST_PANES.includes(pane);
-  const fillKind = bodyFillKind(listPane, splitBody);
+const windowBody = (view, paintedBody, frame) => {
+  const { width, color, bodyH, headerLines } = frame;
+  const listPane = LIST_PANES.includes(view.pane ?? 'diff');
+  const fillKind = bodyFillKind(listPane, paintedBody.splitBody);
   const filler = paintBodyFill(width, color, fillKind);
-  const lead = !listPane && sourceBody.length > 0;
-  const body = new Array(sourceBody.length + (lead ? 1 : 0));
-  let bodyAt = 0;
-  let shift = 0;
-  if (lead) {
-    body[bodyAt++] = filler;
-    shift = 1;
-  }
-  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 checkLead = lead && sourceChecks.length;
-  const todoChecks = new Array(sourceChecks.length + (checkLead ? 1 : 0));
-  let checkAt = 0;
-  if (checkLead) todoChecks[checkAt++] = false;
-  for (let i = 0; i < sourceChecks.length; i++) {
-    todoChecks[checkAt++] = sourceChecks[i];
-  }
-  const scrollRaw = view.scroll ?? 0;
+  const shift = !listPane && paintedBody.body.length > 0 ? 1 : 0;
+  const lead = (items, first) =>
+    shift && items.length ? [first, ...items] : items;
+  const body = lead(paintedBody.body, filler);
+  const taskOwners = lead(paintedBody.taskOwners, null);
+  const taskChecks = lead(paintedBody.taskChecks, false);
   const scrollMax = Math.max(0, body.length - bodyH);
-  let scroll = listPane ? 0 : Math.min(scrollRaw, scrollMax);
-  if (view.item && view.item.origin === 'todo') {
-    scroll = revealScroll(todoOwners, view.todoFocus ?? 0, bodyH, scroll);
+  let scroll = listPane ? 0 : Math.min(view.scroll ?? 0, scrollMax);
+  if (view.item && view.item.origin === 'task') {
+    scroll = revealScroll(taskOwners, view.tasksFocus ?? 0, bodyH, scroll);
   }
-  const end = Math.min(body.length, scroll + bodyH);
-  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 < copied; i++) {
-    const owner = todoOwners[scroll + i];
+  const slice = body.slice(scroll, scroll + bodyH);
+  const win = { shift, scroll, shown: slice.length, headerLines };
+  const taskHits = [];
+  for (let i = 0; i < slice.length; i++) {
+    const owner = taskOwners[scroll + i];
     if (owner === undefined || owner === null) continue;
     const y = headerLines + i + 1;
-    if (todoChecks[scroll + i]) {
-      todoHits.push({ y, cursor: owner, x0: 1, x1: 4, check: true });
+    if (taskChecks[scroll + i]) {
+      taskHits.push({ y, cursor: owner, x0: 1, x1: 4, check: true });
     }
-    todoHits.push({ y, cursor: owner });
+    taskHits.push({ y, cursor: owner });
   }
-  const cursor = mapBodyCursor(
-    paintedBody.cursor,
-    shift,
+  const cursor = mapBodyCursor(paintedBody.cursor, win);
+  const editHits = mapEditHits(paintedBody.editHits, win);
+  while (slice.length < bodyH) slice.push(filler);
+  const { listScroll, fileHits } = paintedBody;
+  return {
+    slice,
     scroll,
-    headerLines,
-    copied,
-  );
-  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 };
+    scrollMax,
+    listScroll,
+    taskHits,
+    fileHits,
+    editHits,
+    cursor,
+  };
 };
 
-const notePointerHits = (notesWanted, noteRows, noteCursor, bodyH) => {
-  let cursor = null;
-  if (noteCursor) {
-    cursor = { x: noteCursor.x, y: 2 + bodyH + noteCursor.row };
-  }
+const notePointerHits = (notes, bodyH) => {
+  const { notesWanted, noteRows, noteCursor } = notes;
+  const top = 2 + bodyH;
+  const x = noteCursor ? noteCursor.x : 0;
+  const y = noteCursor ? top + noteCursor.row : 0;
+  const cursor = noteCursor ? { x, y } : null;
   const templateHits = [];
   for (const hit of notesWanted.templateHits ?? []) {
     if (hit.row >= noteRows.length) continue;
-    templateHits.push({ y: 2 + bodyH + hit.row, cursor: hit.cursor });
+    templateHits.push({ y: top + hit.row, cursor: hit.cursor });
   }
-  return { cursor, templateHits };
-};
-
-const stackFrame = (view, width, color, rows, layout, windowed, notes) => {
-  for (const row of windowed.slice) rows.push(row);
-  for (const row of notes.noteRows) rows.push(row);
-  const status = view.status ?? '';
-  rows.push(paintStatusLine(view, status, width, color));
-  rows.push(paintFooter(view, layout, width, color));
-  return overlayRows(rows, view.selection);
+  const editHits = [];
+  for (const hit of notesWanted.editHits ?? []) {
+    if (hit.row >= noteRows.length) continue;
+    editHits.push({ ...hit, y: top + hit.row });
+  }
+  return { cursor, templateHits, editHits };
 };
 
 const renderFrame = (view, options = {}) => {
   const width = Math.max(20, options.width ?? 80);
   const height = Math.max(6, options.height ?? 24);
   const color = options.color ?? true;
-  const rows = [paintHeader(view, width, color)];
-  const extra = extraFooterActions(view);
-  const hidden = hiddenActions(view);
-  const dimmed = dimFooterActions(view);
-  const layout = layoutButtons(width, false, hidden, extra, dimmed);
+  const header = paintHeader(view, width, color);
+  const layout = footerLayout(view, width);
   const notes = frameNotes(view, width, height, color);
-  const headerLines = rows.length;
-  const bodyH = notes.bodyH;
+  const headerLines = 1;
+  const { bodyH } = notes;
   const paintedBody = paintFrameBody(view, width, color, bodyH, headerLines);
-  const windowed = windowBody(
-    view,
-    width,
-    color,
-    bodyH,
-    headerLines,
-    paintedBody,
-  );
-  const painted = stackFrame(view, width, color, rows, layout, windowed, notes);
-  const text = painted.map((row) => (color ? row + RESET : row)).join('\n');
-  const hits = notePointerHits(
-    notes.notesWanted,
-    notes.noteRows,
-    notes.noteCursor,
-    bodyH,
-  );
+  const frame = { width, color, bodyH, headerLines };
+  const windowed = windowBody(view, paintedBody, frame);
+  const rows = [
+    header,
+    ...windowed.slice,
+    ...notes.noteRows,
+    paintStatusLine(view, view.status ?? '', width, color),
+    paintFooter(view, layout, width, color),
+  ];
+  const painted = overlayRows(rows, view.selection);
+  const hits = notePointerHits(notes, bodyH);
   const statusY = painted.length - 1;
   const branchHit = statusBranchHit(view, width, statusY);
   const statusHits = branchHit ? [branchHit] : statusChoiceHits(view, statusY);
-  const { fileHits, todoHits, scroll, scrollMax, listScroll } = windowed;
+  const { fileHits, taskHits, scroll, scrollMax, listScroll } = windowed;
   const { templateHits } = hits;
+  const editHits = [...windowed.editHits, ...hits.editHits];
+  const shown = markEditorSelection(painted, view, editHits, color);
+  const text = shown.map((row) => (color ? row + RESET : row)).join('\n');
   const footerY = painted.length;
   return {
     text,
-    rows: painted,
+    rows: shown,
     buttons: footerHits(view, layout),
     fileHits,
-    todoHits,
+    taskHits,
     templateHits,
+    editHits,
     statusHits,
     footerY,
     height: footerY,
@@ -256,4 +235,4 @@ const renderFrame = (view, options = {}) => {
   };
 };
 
-module.exports = { BODY_PAINT, renderFrame };
+module.exports = { renderFrame };