reslop 0.2.3 → 0.2.5

package/lib/render/notes.js

@@ -5,9 +5,9 @@ const wrap = require('../wrap.js');
 const files = require('../files.js');
 const primitives = require('./primitives.js');
 
-const { REPO_TODOS_LABEL } = files;
-const { wrapMultiline, cursorInWrap } = wrap;
-const { THEME, visibleWidth, truncateVisible, seq, EL, RESET, BOLD } = ansi;
+const { REPO_TASKS_LABEL } = files;
+const { wrapMultiline, wrapDoc, cursorInWrap } = wrap;
+const { THEME, truncateVisible } = ansi;
 const { paintBar, paintCheckBar, windowRows } = primitives;
 const { LIST_PANES, CHECK_LEAD, paneResult } = primitives;
 
@@ -53,11 +53,35 @@ const todoCursor = (text, edit, inner, rowStart) => {
   return { x: pos.col + lead + 2, row: rowStart + pos.row };
 };
 
+const taskEditHits = (text, inner, rowStart, width) => {
+  const lead = checkLeadLen(text);
+  const body = text.slice(lead);
+  const bodyWidth = Math.max(1, inner - lead);
+  const doc = wrapDoc(body, bodyWidth);
+  const textX = lead + 2;
+  const hits = [];
+  for (let line = 0; line < doc.length; line++) {
+    const piece = doc[line];
+    hits.push({
+      row: rowStart + line,
+      x0: lead + 1,
+      textX,
+      x1: width + 1,
+      start: piece.start,
+      text: piece.text,
+      limit: piece.start + piece.text.length,
+      live: true,
+    });
+  }
+  return hits;
+};
+
 const paintTodoList = (texts, focus, width, color, edit) => {
   const inner = todoInnerWidth(width);
   const rows = [];
   const owners = [];
   const checks = [];
+  const editHits = [];
   let cursor = null;
   for (let i = 0; i < texts.length; i++) {
     const selected = i === focus;
@@ -73,6 +97,7 @@ const paintTodoList = (texts, focus, width, color, edit) => {
         fgRgb,
         bgRgb,
         color,
+        true,
       );
       rows.push(painted);
       owners.push(i);
@@ -80,8 +105,10 @@ const paintTodoList = (texts, focus, width, color, edit) => {
     }
     if (!edit || !selected) continue;
     cursor = todoCursor(text, edit, inner, rowStart);
+    const hits = taskEditHits(text, inner, rowStart, width);
+    for (const hit of hits) editHits.push(hit);
   }
-  return { rows, owners, checks, cursor };
+  return { rows, owners, checks, cursor, editHits };
 };
 
 const noteInnerWidth = (width) => Math.max(1, width - NOTE_PAD * 2);
@@ -100,11 +127,23 @@ const paintTemplateRow = (text, selected, width, color) => {
   return paintNoteLine(text, width, fgRgb, bgRgb, color);
 };
 
+const noteEditHit = (piece, row, width) => ({
+  row,
+  x0: 1,
+  textX: NOTE_PAD + 1,
+  x1: width + 1,
+  start: piece.start,
+  text: piece.text,
+  limit: piece.start + piece.text.length,
+  live: true,
+});
+
 const paintComposeNote = (view, width, color, cap) => {
   const inner = noteInnerWidth(width);
   const bgRgb = THEME.noteBg;
   const compose = view.compose;
-  const wrapped = wrapMultiline(compose.text, inner);
+  const doc = wrapDoc(compose.text ?? '', inner);
+  const wrapped = doc.map((piece) => piece.text);
   const { row, col } = cursorInWrap(compose.text, compose.cursor ?? 0, inner);
   const shown = windowRows(wrapped, row, INPUT_MAX);
   const rows = [];
@@ -123,8 +162,19 @@ const paintComposeNote = (view, width, color, cap) => {
     }
   }
   const templateCount = rows.length;
-  for (const line of shown.rows) {
-    rows.push(paintNoteLine(line, width, THEME.chromeFg, bgRgb, color));
+  const editHits = [];
+  for (let i = 0; i < shown.rows.length; i++) {
+    const piece = doc[shown.offset + i];
+    const painted = paintNoteLine(
+      shown.rows[i],
+      width,
+      THEME.chromeFg,
+      bgRgb,
+      color,
+    );
+    rows.push(painted);
+    if (!piece) continue;
+    editHits.push(noteEditHit(piece, templateCount + i, width));
   }
   return {
     rows,
@@ -133,11 +183,12 @@ const paintComposeNote = (view, width, color, cap) => {
       row: templateCount + row - shown.offset,
     },
     templateHits,
+    editHits,
   };
 };
 
 const paintIdleNote = (view, width, color) => {
-  const empty = { rows: [], cursor: null, templateHits: [] };
+  const empty = { rows: [], cursor: null, templateHits: [], editHits: [] };
   const text = view.noteText;
   if (!text) return empty;
   const inner = noteInnerWidth(width);
@@ -158,7 +209,7 @@ const paintIdleNote = (view, width, color) => {
 };
 
 const paintNotePanel = (view, width, color, cap) => {
-  const empty = { rows: [], cursor: null, templateHits: [] };
+  const empty = { rows: [], cursor: null, templateHits: [], editHits: [] };
   const compose = view.compose;
   if (compose && NOTE_COMPOSE.includes(compose.kind)) {
     return paintComposeNote(view, width, color, cap);
@@ -168,43 +219,40 @@ const paintNotePanel = (view, width, color, cap) => {
   return paintIdleNote(view, width, color);
 };
 
-const paintTodoCaption = (width, color) => {
-  const text = ` ${REPO_TODOS_LABEL}`;
-  const clipped = truncateVisible(text, width);
-  const pad = Math.max(0, width - visibleWidth(clipped));
-  const filled = clipped + ' '.repeat(pad);
-  if (!color) return filled;
-  const fgRgb = THEME.buttonHotFg;
-  const bgRgb = THEME.ctxBg;
-  return `${BOLD}${seq(fgRgb, bgRgb)}${EL}${filled}${RESET}`;
-};
+const paintTodoCaption = (width, color) =>
+  paintBar(` ${REPO_TASKS_LABEL}`, width, THEME.mutedFg, THEME.ctxBg, color);
 
 const paintBodyTodo = (view, width, color) => {
-  const texts = view.todos ?? [];
+  const texts = view.tasks ?? [];
   let lines = texts;
   if (!lines.length && view.noteText) lines = [view.noteText];
   const painted = paintTodoList(
     lines,
-    view.todoFocus ?? 0,
+    view.tasksFocus ?? 0,
     width,
     color,
-    view.todoEdit,
+    view.taskEdit,
   );
   const caption = paintTodoCaption(width, color);
   const body = [caption, ...painted.rows];
-  const todoOwners = [null, ...painted.owners];
-  const todoChecks = [false, ...painted.checks];
+  const taskOwners = [null, ...painted.owners];
+  const taskChecks = [false, ...painted.checks];
   let cursor = null;
   if (painted.cursor) {
     cursor = { x: painted.cursor.x, row: painted.cursor.row + 1 };
   }
+  const editHits = [];
+  for (const hit of painted.editHits) {
+    editHits.push({ ...hit, row: hit.row + 1 });
+  }
   const fileHits = [];
   const splitBody = false;
   return paneResult({
     body,
     fileHits,
-    todoOwners,
-    todoChecks,
+    editHits,
+    taskOwners,
+    taskChecks,
     cursor,
     splitBody,
   });

package/lib/render/npm.js

@@ -10,7 +10,7 @@ const { clipAnsi, stripAnsi, RESET, foregroundOn } = ansi;
 const { formatBusyStatus } = chrome;
 const { TABLE_KEY, TABLE_VAL } = npmCommands;
 const { fill, FILE_MARK, paneResult, paintCursorList } = primitives;
-const { paintListEdit } = primitives;
+const { fieldWindow } = primitives;
 
 const EDGE = 2;
 const TAIL = 1;
@@ -64,39 +64,117 @@ const paintNpmRow = (entry, width, color, selected, nameCol = 0) => {
   return out + edge;
 };
 
+const editNameSource = (view, compose, field) => {
+  if (field === 'name') return compose.text;
+  return view.npmDraftName ?? '';
+};
+
+const editNameWidth = (commands, live) => {
+  const typed = visibleWidth(`${live ?? ''}`);
+  return Math.min(NPM_NAME_MAX, Math.max(npmNameWidth(commands), typed));
+};
+
+const paintNpmEdit = (view, width, color, nameW) => {
+  const compose = view.compose;
+  const field = view.npmEditField === 'command' ? 'command' : 'name';
+  const nameSource = editNameSource(view, compose, field);
+  const draft = view.npmDraftCommand ?? '';
+  const commandSource = field === 'command' ? compose.text : draft;
+  const inner = Math.max(1, width - EDGE - TAIL);
+  const prefix = ` ${FILE_MARK} `;
+  const prefixW = visibleWidth(prefix);
+  const rest = Math.max(1, inner - prefixW);
+  const colW = Math.min(Math.max(0, nameW), rest);
+  const flatName = `${nameSource ?? ''}`.replaceAll('\n', ' ');
+  const nameAt = field === 'name' ? compose.cursor : 0;
+  const nameScroll = field === 'name' ? compose.scrollCol : 0;
+  const nameWin = fieldWindow(flatName, nameAt, nameScroll, colW);
+  const name = nameWin.text;
+  const gap = rest > colW + 2 ? '  ' : '';
+  const gapW = visibleWidth(gap);
+  const detailW = Math.max(0, rest - colW - gapW);
+  const flatCommand = `${commandSource ?? ''}`.replaceAll('\n', ' ');
+  const commandAt = field === 'command' ? compose.cursor : 0;
+  const commandScroll = field === 'command' ? compose.scrollCol : 0;
+  const commandWin = fieldWindow(
+    flatCommand,
+    commandAt,
+    commandScroll,
+    detailW,
+  );
+  const command = commandWin.text;
+  const namePad = ' '.repeat(Math.max(0, colW - visibleWidth(name)));
+  const mid = `${name}${namePad}`;
+  const after = `${gap}${command}`;
+  const pad = Math.max(0, rest - visibleWidth(mid + after));
+  const tail = ' '.repeat(TAIL);
+  const left = `${prefix}${mid}${after}${' '.repeat(pad)}`;
+  const fgRgb = THEME.chromeFg;
+  const bgRgb = THEME.buttonBg;
+  const edge = fill(EDGE, fgRgb, THEME.ctxBg, color);
+  let row = `${left}${tail}${edge}`;
+  if (color) {
+    row = `${seq(fgRgb, bgRgb)}${EL}`;
+    row += paint(prefix, fgRgb, bgRgb, color);
+    row += paint(mid, THEME.buttonHotFg, bgRgb, color, true);
+    row += paint(`${after}${' '.repeat(pad)}${tail}`, fgRgb, bgRgb, color);
+    row += edge;
+  }
+  const active = field === 'name' ? nameWin : commandWin;
+  const lead = field === 'name' ? 0 : colW + gapW;
+  const nameX = prefixW + 1;
+  const commandX = prefixW + colW + gapW + 1;
+  const edits = [
+    {
+      field: 'name',
+      x0: 1,
+      textX: nameX,
+      x1: commandX,
+      start: 0,
+      text: flatName,
+      limit: flatName.length,
+      scroll: nameWin.scroll,
+      live: field === 'name',
+    },
+    {
+      field: 'command',
+      x0: commandX,
+      textX: commandX,
+      x1: width + 1,
+      start: 0,
+      text: flatCommand,
+      limit: flatCommand.length,
+      scroll: commandWin.scroll,
+      live: field === 'command',
+    },
+  ];
+  const cursor = {
+    x: prefixW + lead + active.col + 1,
+    scroll: active.scroll,
+  };
+  return { row, cursor, edits };
+};
+
 const paintNpmList = (view, width, color, bodyH, headerLines) => {
   const commands = view.npmCommands ?? [];
-  const nameW = npmNameWidth(commands);
-  const cursor = view.npmCursor ?? 0;
   const compose = view.compose;
   const editing = compose && compose.kind === 'npm';
-  const paintRow = (entry, rowWidth, rowColor, selected) =>
-    paintNpmRow(entry, rowWidth, rowColor, selected, nameW);
+  const field = view.npmEditField === 'command' ? 'command' : 'name';
+  const live = editing ? editNameSource(view, compose, field) : '';
+  const nameW = editing
+    ? editNameWidth(commands, live)
+    : npmNameWidth(commands);
+  const cursor = view.npmCursor ?? 0;
+  const pane = { width, color, bodyH, headerLines, offset: view.listScroll };
+  const paintRow = (entry, selected) =>
+    paintNpmRow(entry, width, color, selected, nameW);
   let extra = null;
   if (editing) {
-    const painted = paintListEdit(compose, width, color, EDGE);
+    const painted = paintNpmEdit(view, width, color, nameW);
     const at = view.npmEditName ? 'replace' : 'end';
-    extra = { row: painted.row, cursor: painted.cursor, at, index: cursor };
+    extra = { ...painted, at, index: cursor };
   }
-  const painted = paintCursorList(
-    commands,
-    cursor,
-    width,
-    color,
-    bodyH,
-    headerLines,
-    paintRow,
-    extra,
-    view.listScroll,
-  );
-  return paneResult({
-    body: painted.body,
-    fileHits: painted.fileHits,
-    todoOwners: [],
-    cursor: painted.cursor,
-    splitBody: false,
-    listScroll: painted.offset,
-  });
+  return paintCursorList(commands, cursor, pane, paintRow, extra);
 };
 
 const logStart = (view, count, rows) => {
@@ -213,10 +291,6 @@ const paintNpmLog = (view, width, color, bodyH) => {
   for (let i = 0; i < padY - top; i++) body.push(blank);
   return paneResult({
     body,
-    fileHits: [],
-    todoOwners: [],
-    cursor: null,
-    splitBody: false,
   });
 };
 

package/lib/render/present.js

@@ -1,6 +1,7 @@
 'use strict';
 
-const { ESC } = require('../ansi.js');
+const ansi = require('../ansi.js');
+const { ESC } = ansi;
 
 const presentCursor = (cursor) => {
   if (!cursor || cursor.x <= 0 || cursor.y <= 0) return `${ESC}[?25l`;

package/lib/render/primitives.js

@@ -1,14 +1,16 @@
 'use strict';
 
 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 GUTTER_W = 2;
 const FILE_MARK = '▶';
-const FILE_LIST_PAD = 1;
+const LIST_PAD = 1;
 const CHECK_DONE = 'xX';
-const LIST_PANES = ['files', 'branches', 'commits', 'npm'];
 const CHECK_TOKEN = /\[([ xX])\]/;
 const CHECK_LEAD = /^\[[ xX]\] /;
 
@@ -34,14 +36,21 @@ const splitCheck = (text) => {
   return { before, mark, token, after };
 };
 
-const paintCheckBar = (text, width, fgRgb, bgRgb, color) => {
+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);
-  const chipFg = done ? THEME.checkDoneFg : THEME.checkFg;
-  const chipBg = done ? THEME.checkDoneBg : THEME.checkBg;
+  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);
@@ -111,49 +120,110 @@ const extraIdx = (extraRow, cursor, count) => {
   return count;
 };
 
-const paintCursorList = (
-  items,
-  cursor,
-  width,
-  color,
-  bodyH,
-  headerLines,
-  paintRow,
-  extraRow,
-  offset = 0,
-) => {
-  const pad = bodyH >= FILE_LIST_PAD * 2 + 1 ? FILE_LIST_PAD : 0;
+const paneResult = (fields = {}) => ({
+  body: fields.body ?? [],
+  fileHits: fields.fileHits ?? [],
+  taskOwners: fields.taskOwners ?? [],
+  taskChecks: fields.taskChecks ?? [],
+  cursor: fields.cursor ?? null,
+  splitBody: fields.splitBody === true,
+  listScroll: fields.listScroll ?? 0,
+  editHits: fields.editHits ?? [],
+});
+
+const NO_EDITS = [];
+
+const listLine = (row, index, cursor = null, edits = NO_EDITS) => {
+  const hit = index >= 0;
+  return { row, index, hit, cursor, edits };
+};
+
+const rowCursor = (cursor, row) => {
+  const out = { x: cursor.x, row };
+  if (typeof cursor.scroll === 'number') out.scroll = cursor.scroll;
+  return out;
+};
+
+const paintListWindow = (count, focus, pane, lineAt) => {
+  const { width, color, bodyH, headerLines, offset } = pane;
+  const pad = bodyH >= LIST_PAD * 2 + 1 ? LIST_PAD : 0;
   const listH = bodyH - pad * 2;
-  const inserting = extraRow && extraRow.at === 'start';
-  const extra = extraRow && extraRow.at !== 'replace' ? 1 : 0;
-  const count = items.length + extra;
-  const extraAt = extraIdx(extraRow, cursor, items.length);
-  const focus = extraRow ? extraAt : cursor;
   const start = listWindowStart(focus, offset, listH, count);
   const blank = paintBodyFill(width, color, 'files');
   const body = [];
   const fileHits = [];
-  let textCursor = null;
+  const editHits = [];
+  let cursor = null;
   if (pad) body.push(blank);
   for (let i = 0; i < listH; i++) {
-    const idx = start + i;
-    if (extraRow && idx === extraAt) {
-      body.push(extraRow.row);
-      if (extraRow.cursor) {
-        textCursor = { x: extraRow.cursor.x, row: body.length - 1 };
-      }
-      continue;
+    const line = lineAt(start + i);
+    if (!line) break;
+    const row = body.push(line.row) - 1;
+    if (line.cursor) cursor = rowCursor(line.cursor, row);
+    for (const edit of line.edits) editHits.push({ ...edit, row });
+    if (line.hit) {
+      fileHits.push({ y: headerLines + pad + i + 1, cursor: line.index });
     }
-    const itemIdx = inserting ? idx - 1 : idx;
-    const entry = items[itemIdx];
-    if (!entry) break;
-    const selected = extraRow ? false : itemIdx === cursor;
-    body.push(paintRow(entry, width, color, selected));
-    const y = headerLines + pad + i + 1;
-    fileHits.push({ y, cursor: itemIdx });
   }
   if (pad) body.push(blank);
-  return { body, fileHits, cursor: textCursor, offset: start };
+  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 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 entry = items[index];
+    if (!entry) return null;
+    return listLine(paintRow(entry, !edit && index === cursor), index);
+  };
+  const focus = edit ? extraAt : cursor;
+  return paintListWindow(items.length + extra, focus, pane, lineAt);
+};
+
+const sliceVisible = (text, skip, width) => {
+  if (width <= 0) return '';
+  const parts = graphemes(`${text ?? ''}`);
+  let used = 0;
+  let i = 0;
+  const drop = Math.max(0, skip);
+  while (i < parts.length) {
+    const w = graphemeWidth(parts[i], used);
+    if (used + w > drop) break;
+    used += w;
+    i += 1;
+  }
+  let out = '';
+  let taken = 0;
+  for (; i < parts.length; i++) {
+    const w = graphemeWidth(parts[i], drop + taken);
+    if (taken + w > width) break;
+    out += parts[i];
+    taken += w;
+  }
+  return out;
+};
+
+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;
+  if (col < next) next = col;
+  if (col >= next + width) next = col - width + 1;
+  const shown = sliceVisible(raw, next, width);
+  return { text: shown, col: col - next, scroll: next };
 };
 
 const branchLabel = (name) => `${name ?? ''}`.trim();
@@ -164,7 +234,8 @@ const paintListEdit = (compose, width, color, edgeW = 0) => {
   const prefixW = visibleWidth(prefix);
   const rest = Math.max(1, inner - prefixW);
   const text = `${compose.text ?? ''}`.replaceAll('\n', ' ');
-  const clipped = truncateVisible(text, rest);
+  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;
@@ -179,20 +250,23 @@ const paintListEdit = (compose, width, color, edgeW = 0) => {
     row += paint(gap, fgRgb, bgRgb, color);
     row += edge;
   }
-  const col = Math.min(compose.cursor ?? 0, visibleWidth(clipped));
-  return { row, cursor: { x: prefixW + col + 1 } };
+  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 paneResult = (fields) => ({
-  body: fields.body,
-  fileHits: fields.fileHits,
-  todoOwners: fields.todoOwners,
-  todoChecks: fields.todoChecks ?? [],
-  cursor: fields.cursor ?? null,
-  splitBody: fields.splitBody === true,
-  listScroll: fields.listScroll ?? 0,
-});
-
 const measureColumns = (entries, rowFields, align) => {
   const keys = Object.keys(align);
   const widths = Object.fromEntries(keys.map((key) => [key, 0]));
@@ -251,9 +325,11 @@ module.exports = {
   paintSplitRule,
   paintBodyFill,
   windowRows,
-  listWindowStart,
+  listLine,
+  paintListWindow,
   paintCursorList,
   paintListEdit,
+  fieldWindow,
   branchLabel,
   paneResult,
 };

package/lib/render/render.js

@@ -4,7 +4,8 @@ const chrome = require('./chrome.js');
 const notes = require('./notes.js');
 const diff = require('./diff.js');
 const present = require('./present.js');
-const { renderFrame } = require('./frame.js');
+const frame = require('./frame.js');
+const { renderFrame } = frame;
 
 const { QUIT_PROMPT, PUSH_PROMPT } = chrome;
 const { updatePrompt, dropPrompt } = chrome;

package/lib/render/unit.js

@@ -1,23 +1,30 @@
 'use strict';
 
-const { detectLang } = require('../detect.js');
+const detect = require('../detect.js');
+const { detectLang } = detect;
 const primitives = require('./primitives.js');
 const diff = require('./diff.js');
 
 const { paneResult } = primitives;
-const { paintDiffLine, codeCursorInRows } = diff;
-const { sameHunk } = require('../diff/diff.js');
+const { paintDiffLine, codeCursorInRows, codeEditHits } = diff;
+const { expandSoftRows } = diff;
+const diffLib = require('../diff/diff.js');
+const { sameHunk } = diffLib;
 
 const paintBodyUnit = (view, width, color) => {
   const lines = view.unitLines ?? [];
   const item = view.item;
   const lang = detectLang(view.reviewPath ?? '');
   const overlay = view.codeOverlay;
-  const editing = view.mode === 'compose' && overlay;
-  const { length } = lines;
+  const editing =
+    view.mode === 'compose' && overlay && typeof overlay.cursor === 'number';
+  const picked = editing ? overlay.scrollCol : 0;
+  const scrollCol = picked ?? 0;
+  const source = editing ? lines : expandSoftRows(lines, width, false, true);
+  const { length } = source;
   const body = new Array(length);
   for (let i = 0; i < length; i++) {
-    const line = lines[i];
+    const line = source[i];
     const isBlock = item && sameHunk(line.item, item);
     const row = { ...line };
     if (editing) {
@@ -25,16 +32,15 @@ const paintBodyUnit = (view, width, color) => {
     } else if ((row.type === 'add' || row.type === 'del') && !isBlock) {
       row.mark = ' ';
     }
-    body[i] = paintDiffLine(row, width, color, row.origin, lang);
+    body[i] = paintDiffLine(row, width, color, row.origin, lang, scrollCol);
   }
   const edit = overlay ? overlay.cursor : null;
-  const cursor = codeCursorInRows(lines, false, width, edit);
+  const cursor = codeCursorInRows(source, false, width, edit, scrollCol);
+  const editHits = editing ? codeEditHits(source, false, width, scrollCol) : [];
   return paneResult({
     body,
-    fileHits: [],
-    todoOwners: [],
     cursor,
-    splitBody: false,
+    editHits,
   });
 };