reslop 0.1.4 → 0.1.6

package/lib/render.js

@@ -10,8 +10,8 @@ const { itemPath } = require('./files.js');
 const wrap = require('./wrap.js');
 
 const { tokenize, overlayTokens } = highlight;
-const { ACTIONS, ACTION_IDS, actionLetter, buttonWord } = keys;
-const { FILES_DISABLED } = keys;
+const { ACTION_IDS, BRANCH_ACTIONS, actionLetter, buttonWord } = keys;
+const { disabledActions } = keys;
 const { wrapPlain, wrapMultiline, cursorInWrap } = wrap;
 const { THEME, CODE_FG, codeFg, paint, visibleWidth } = ansi;
 const { truncateVisible, fg, RESET, ESC, EL, seq } = ansi;
@@ -113,32 +113,117 @@ const FILE_COL_ALIGN = {
   m: 'end',
 };
 
+const BRANCH_COL_KEYS = ['sha', 'ahead', 'behind', 'gone', 'date'];
+
+const BRANCH_COL_ALIGN = {
+  sha: 'end',
+  ahead: 'start',
+  behind: 'start',
+  gone: 'end',
+  date: 'end',
+};
+
+const BRANCH_COL_FG = {
+  sha: THEME.mutedFg,
+  ahead: THEME.addLineFg,
+  behind: THEME.delLineFg,
+  gone: THEME.delLineFg,
+  date: THEME.mutedFg,
+};
+
+const BRANCH_NAME_MAX = 24;
+
+const BUSY_BAR = ['▰▰▱▱▱▱', '▱▰▰▱▱▱', '▱▱▰▰▱▱', '▱▱▱▰▰▱', '▱▱▱▱▰▰', '▰▱▱▱▱▰'];
+const BUSY_PROGRESS = [
+  'pulling',
+  'pushing',
+  'loading',
+  'checking npm',
+  'updating reslop',
+  'npm i',
+  'npm uninstall',
+  'npm audit fix',
+  'checking out',
+  'creating branch',
+  'committing',
+  'force pushing',
+];
+
+const formatBusyStatus = (status, frame = 0) => {
+  const kind = `${status ?? ''}`;
+  if (!BUSY_PROGRESS.includes(kind)) return kind;
+  const i = Math.abs(frame) % BUSY_BAR.length;
+  return `${kind}  ${BUSY_BAR[i]}`;
+};
+
 const INFO_STATUS = [
   'copied',
   'staged',
   'unstaged',
   'not staged',
-  'reverted',
+  'dropped',
   'already staged',
   'read only',
-  'last block',
-  'first block',
-  'first file',
-  'last file',
   'nothing to review',
+  'nothing to commit',
   'unified',
   'mixed',
   'side-by-side',
   'saved',
+  'reloaded',
   'not a diff block',
+  'committed',
+  'amended',
+  'fixup',
+  'updated',
+  'updating reslop',
+  'loading',
+  'checking npm',
+  'npm i',
+  'npm uninstall',
+  'npm audit fix',
+  'pulling',
+  'pushing',
+  'pulled',
+  'pushed',
+  'force pushing',
+  'force pushed',
+  'checking out',
+  'creating branch',
+  'committing',
+  'checked out',
+  'created',
+  'empty branch name',
 ];
+const INFO_PREFIX = ['checked out ', 'created '];
 
-const QUIT_FINISH = 'f';
-const QUIT_CONTINUE = 'c';
-const QUIT_FINISH_LABEL = 'finish as ready';
-const QUIT_CONTINUE_LABEL = 'continue next time';
-const QUIT_PROMPT = ` ${QUIT_FINISH_LABEL}  ${QUIT_CONTINUE_LABEL}`;
+const QUIT_CHOICES = [
+  { letter: 'f', label: 'finish as ready', lead: ' ' },
+  { letter: 'c', label: 'continue next time', lead: '  ' },
+  { letter: 'd', label: 'discard', lead: '  ' },
+];
+const QUIT_PROMPT = QUIT_CHOICES.map(
+  (choice) => `${choice.lead}${choice.label}`,
+).join('');
+const COMMIT_CHOICES = [
+  { letter: 'c', label: 'commit', lead: ' ' },
+  { letter: 'a', label: 'amend', lead: '  ' },
+  { letter: 'f', label: 'fixup', lead: '  ' },
+];
+const COMMIT_PROMPT = COMMIT_CHOICES.map(
+  (choice) => `${choice.lead}${choice.label}`,
+).join('');
+const UPDATE_CHOICES = [
+  { letter: 'y', label: 'y', lead: ' ' },
+  { letter: 'n', label: 'n', lead: '  ' },
+];
+const updatePrompt = (from, to) => ` update reslop ${from} → ${to}? y  n`;
+const PUSH_CHOICES = [{ letter: 'f', label: 'force push', lead: ' ' }];
+const PUSH_REJECT_PREFIX = ' Need force-push?';
+const PUSH_PROMPT = `${PUSH_REJECT_PREFIX} force push`;
 
+const NOTE_COMPOSE = ['feedback', 'commit'];
+const LIST_PANES = ['files', 'branches'];
 const GUTTER_W = 2;
 const BUTTON_GAP = '  ';
 const LOGO = '👁️';
@@ -340,6 +425,21 @@ const headerTarget = (view) => {
     if (!entry) return { path: '', origin: '', n, total };
     return { path: entry.path, origin: entry.status, n, total };
   }
+  if (pane === 'branches') {
+    const compose = view.compose;
+    const branches = view.branches ?? [];
+    if (compose && compose.kind === 'branch') {
+      const total = branches.length + 1;
+      return { path: compose.text || '', origin: 'new', n: total, total };
+    }
+    const cursor = view.branchCursor ?? 0;
+    const entry = branches[cursor];
+    const total = branches.length;
+    const n = total ? cursor + 1 : 0;
+    if (!entry) return { path: '', origin: 'branch', n, total };
+    const origin = entry.current ? 'current' : 'branch';
+    return { path: entry.name, origin, n, total };
+  }
   if (!view.item) return { path: '', origin: '', n: 0, total: view.total ?? 0 };
   return {
     path: itemPath(view.item),
@@ -414,17 +514,21 @@ const paintHeader = (view, width, color) => {
   return `${out}${RESET}`;
 };
 
-const bodyLines = (item, layout) => {
+const bodyLines = (item, layout, overlay) => {
   if (item.file.isBinary) {
     const text = '(binary)';
     return [{ type: 'ctx', text, spans: [{ text, changed: false }] }];
   }
   if (!item.hunk) return [];
   const radius = item.dep ? Number.MAX_SAFE_INTEGER : undefined;
-  return displayLines(item.hunk, item.blockId, layout, radius);
+  return displayLines(item.hunk, item.blockId, layout, radius, overlay);
 };
 
-const sourceEmpty = (line) => !line || !(line.text ?? '').trim();
+const sourceEmpty = (line) => {
+  if (!line) return true;
+  if (line.editStart !== undefined) return false;
+  return !(line.text ?? '').trim();
+};
 
 const displayRowEmpty = (row, split) => {
   if (!split) return sourceEmpty(row);
@@ -470,29 +574,37 @@ const paintMarkedWord = (label, letter, color, mark) => {
   return out;
 };
 
-const layoutButtons = (width, compact = false, disabled = []) => {
+const layoutButtons = (width, compact = false, hidden = [], extra = []) => {
+  const ids = [];
+  for (const id of ACTION_IDS) {
+    if (id === 'quit') {
+      for (const add of extra) {
+        if (!hidden.includes(add)) ids.push(add);
+      }
+    }
+    if (hidden.includes(id)) continue;
+    ids.push(id);
+  }
   const build = (short) => {
     const hits = [];
     const parts = [];
     let x = 0;
-    for (const id of ACTION_IDS) {
-      const action = { id, ...ACTIONS[id] };
-      const letter = actionLetter(action);
-      const word = buttonWord(action);
+    for (const id of ids) {
+      const letter = actionLetter(id);
+      const word = buttonWord(id);
       const label = short ? letter : word;
       const piece = `${BUTTON_GAP}${label}`;
       const w = visibleWidth(piece);
       if (x + w > width && parts.length) break;
-      const isDisabled = disabled.includes(id);
-      if (!isDisabled) hits.push({ id, x0: x, x1: x + w });
-      parts.push({ action, piece, letter, label, disabled: isDisabled });
+      hits.push({ id, x0: x, x1: x + w });
+      parts.push({ action: { id }, piece, letter, label });
       x += w;
     }
     return { hits, parts, width: x };
   };
   if (compact) return build(true);
   const words = build(false);
-  if (words.parts.length === ACTION_IDS.length) return words;
+  if (words.parts.length === ids.length) return words;
   return build(true);
 };
 
@@ -501,11 +613,7 @@ const paintButtons = (layout, width, color) => {
   let used = 0;
   for (const part of layout.parts) {
     out += paint(BUTTON_GAP, THEME.buttonFg, THEME.buttonBg, color);
-    if (part.disabled) {
-      out += paint(part.label, THEME.buttonFg, THEME.buttonBg, color);
-    } else {
-      out += paintMarkedWord(part.label, part.letter, color, BUTTON_MARK);
-    }
+    out += paintMarkedWord(part.label, part.letter, color, BUTTON_MARK);
     used += visibleWidth(part.piece);
   }
   if (used < width) {
@@ -514,6 +622,30 @@ const paintButtons = (layout, width, color) => {
   return out;
 };
 
+const branchLabel = (name) => {
+  const branch = `${name ?? ''}`.trim();
+  if (!branch) return '';
+  return `[${branch}]`;
+};
+
+const splitBracketName = (label) => {
+  const text = `${label ?? ''}`;
+  const open = text.startsWith('[') ? '[' : '';
+  const rest = open ? text.slice(1) : text;
+  const close = rest.endsWith(']') ? ']' : '';
+  const name = close ? rest.slice(0, -1) : rest;
+  return { open, name, close };
+};
+
+const paintBracketName = (label, nameFg, wrapFg, bgRgb, color) => {
+  const { open, name, close } = splitBracketName(label);
+  return (
+    paint(open, wrapFg, bgRgb, color, true) +
+    paint(name, nameFg, bgRgb, color) +
+    paint(close, wrapFg, bgRgb, color, true)
+  );
+};
+
 const remoteCounts = (kind, { counts, notes, sourceLabel }) => {
   const n = counts.pr ?? 0;
   const label = sourceLabel || kind;
@@ -527,12 +659,14 @@ const COUNTS_KIND = {
     const n = counts.commit ?? 0;
     return ` commit ${revShort}  ${n}  ${notes}`;
   },
-  worktree: ({ counts, notes }) => {
+  worktree: ({ counts, notes, branch }) => {
     const staged = counts.staged ?? 0;
     const unstaged = counts.unstaged ?? 0;
     const untracked = counts.untracked ?? 0;
     const gitCounts = `unstaged ${unstaged}  untracked ${untracked}`;
     const git = `staged ${staged}  ${gitCounts}`;
+    const mark = branchLabel(branch);
+    if (mark) return ` ${mark}  ${git}  ${notes}`;
     return ` ${git}  ${notes}`;
   },
 };
@@ -543,37 +677,92 @@ const countsKind = (sourceKind, revShort) => {
   return 'worktree';
 };
 
-const countsLine = (counts, revShort, sourceKind, sourceLabel) => {
+const countsLine = (counts, revShort, sourceKind, sourceLabel, branch) => {
   const feedback = counts.feedback ?? 0;
   const todo = counts.todo ?? 0;
-  const notes = `feedback ${feedback}  todo ${todo}`;
+  const code = counts.code ?? 0;
+  const notes = `feedback ${feedback}  todo ${todo}  code ${code}`;
   const kind = countsKind(sourceKind, revShort);
-  return COUNTS_KIND[kind]({ counts, notes, sourceLabel, revShort });
+  return COUNTS_KIND[kind]({ counts, notes, sourceLabel, revShort, branch });
 };
 
-const paintQuitPrompt = (width, color) => {
+const paintChoicePrompt = (choices, width, color, prefix = '') => {
   const bgRgb = THEME.chromeBg;
-  let body = QUIT_PROMPT;
-  if (color) {
-    const finish = ` ${QUIT_FINISH_LABEL}`;
-    const rest = `  ${QUIT_CONTINUE_LABEL}`;
-    const paintQuit = (label, letter) =>
-      paintMarkedWord(label, letter, color, QUIT_MARK);
-    body = paintQuit(finish, QUIT_FINISH) + paintQuit(rest, QUIT_CONTINUE);
+  const labels = choices
+    .map((choice) => `${choice.lead}${choice.label}`)
+    .join('');
+  const body = `${prefix}${labels}`;
+  if (!color) {
+    const pad = Math.max(0, width - visibleWidth(body));
+    return body + ' '.repeat(pad);
+  }
+  let out = '';
+  if (prefix) out += paint(prefix, THEME.mutedFg, bgRgb, color);
+  for (const choice of choices) {
+    const label = `${choice.lead}${choice.label}`;
+    out += paintMarkedWord(label, choice.letter, color, QUIT_MARK);
   }
   const pad = Math.max(0, width - visibleWidth(body));
-  return body + fill(pad, THEME.mutedFg, bgRgb, color);
+  return out + fill(pad, THEME.mutedFg, bgRgb, color);
+};
+
+const isInfoStatus = (status) => {
+  if (INFO_STATUS.includes(status)) return true;
+  for (const prefix of INFO_PREFIX) {
+    if (status.startsWith(prefix)) return true;
+  }
+  return false;
+};
+
+const paintStatusLeft = (text, color) => {
+  const bgRgb = THEME.chromeBg;
+  const muted = THEME.mutedFg;
+  if (!color) return text;
+  const open = text.indexOf('[');
+  const close = text.indexOf(']');
+  if (open < 0 || close <= open) return paint(text, muted, bgRgb, color);
+  const before = text.slice(0, open);
+  const name = text.slice(open + 1, close);
+  const after = text.slice(close + 1);
+  const label = `[${name}]`;
+  return (
+    paint(before, muted, bgRgb, color) +
+    paintBracketName(label, THEME.buttonHotFg, muted, bgRgb, color) +
+    paint(after, muted, bgRgb, color)
+  );
 };
 
 const paintStatusLine = (view, status, width, color) => {
   const { mode, counts, revShort, sourceKind, sourceLabel } = view;
-  if (mode === 'confirmQuit') return paintQuitPrompt(width, color);
-  const left = countsLine(counts ?? {}, revShort, sourceKind, sourceLabel);
+  if (mode === 'confirmQuit') {
+    return paintChoicePrompt(QUIT_CHOICES, width, color);
+  }
+  if (mode === 'confirmCommit') {
+    return paintChoicePrompt(COMMIT_CHOICES, width, color);
+  }
+  if (mode === 'confirmUpdate') {
+    const from = view.updateFrom ?? '';
+    const to = view.updateTo ?? '';
+    const prefix = ` update reslop ${from} → ${to}?`;
+    return paintChoicePrompt(UPDATE_CHOICES, width, color, prefix);
+  }
+  if (mode === 'confirmPush') {
+    return paintChoicePrompt(PUSH_CHOICES, width, color, PUSH_REJECT_PREFIX);
+  }
+  const branch = view.branch ?? '';
+  const left = countsLine(
+    counts ?? {},
+    revShort,
+    sourceKind,
+    sourceLabel,
+    branch,
+  );
+  const shown = formatBusyStatus(status, view.progressFrame ?? 0);
   let right = '';
   let msgFg = THEME.chromeFg;
-  if (status) {
-    right = ` ${status} `;
-    if (!INFO_STATUS.includes(status)) msgFg = THEME.errorFg;
+  if (shown) {
+    right = ` ${shown} `;
+    if (!isInfoStatus(status)) msgFg = THEME.errorFg;
   }
   const rightW = visibleWidth(right);
   const room = Math.max(0, width - rightW);
@@ -582,12 +771,39 @@ const paintStatusLine = (view, status, width, color) => {
   const gap = ' '.repeat(pad);
   const paintedRight = paint(right, msgFg, THEME.chromeBg, color);
   return (
-    paint(clipped, THEME.mutedFg, THEME.chromeBg, color) +
+    paintStatusLeft(clipped, color) +
     paint(gap, THEME.mutedFg, THEME.chromeBg, color) +
     paintedRight
   );
 };
 
+const statusBranchHit = (view, width, y) => {
+  const mode = view.mode;
+  if (mode === 'confirmQuit') return null;
+  if (mode === 'confirmCommit') return null;
+  if (mode === 'confirmUpdate') return null;
+  if (mode === 'confirmPush') return null;
+  const branch = view.branch ?? '';
+  if (!branchLabel(branch)) return null;
+  if (countsKind(view.sourceKind, view.revShort) !== 'worktree') return null;
+  const left = countsLine(
+    view.counts ?? {},
+    view.revShort,
+    view.sourceKind,
+    view.sourceLabel,
+    branch,
+  );
+  const status = view.status ?? '';
+  const shown = formatBusyStatus(status, view.progressFrame ?? 0);
+  const right = shown ? ` ${shown} ` : '';
+  const room = Math.max(0, width - visibleWidth(right));
+  const clipped = truncateVisible(left, room);
+  const open = clipped.indexOf('[');
+  const close = clipped.indexOf(']');
+  if (open < 0 || close <= open) return null;
+  return { id: 'branch', y, x0: open, x1: close + 1 };
+};
+
 const signedCount = (sign, n) => `${sign}${n ?? 0}`;
 
 const fileRowFields = (entry) => {
@@ -680,6 +896,12 @@ const paintFileRow = (entry, width, color, selected, cols) => {
 
 const todoInnerWidth = (width) => Math.max(1, width - 2);
 
+const codeInnerWidth = (width, layout = 'unified') => {
+  const lineW = layout === 'side' ? splitWidths(width).rightW : width;
+  const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
+  return Math.max(1, lineW - gutterW);
+};
+
 const checkLeadLen = (text) => {
   const match = CHECK_LEAD.exec(text);
   return match ? match[0].length : 0;
@@ -792,36 +1014,219 @@ const paintIdleNote = (view, width, color) => {
 
 const paintNotePanel = (view, width, color, cap) => {
   const empty = { rows: [], cursor: null, templateHits: [] };
-  if ((view.pane ?? 'diff') === 'files') return empty;
   const compose = view.compose;
-  if (compose && compose.kind === 'feedback') {
+  if (compose && NOTE_COMPOSE.includes(compose.kind)) {
     return paintComposeNote(view, width, color, cap);
   }
+  const pane = view.pane ?? 'diff';
+  if (LIST_PANES.includes(pane)) return empty;
   return paintIdleNote(view, width, color);
 };
 
-const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
-  const files = view.files ?? [];
-  const cols = fileColumns(files);
-  const cursor = view.fileCursor ?? 0;
+const paintCursorList = (
+  items,
+  cursor,
+  width,
+  color,
+  bodyH,
+  headerLines,
+  paintRow,
+  tail,
+) => {
   const pad = bodyH >= FILE_LIST_PAD * 2 + 1 ? FILE_LIST_PAD : 0;
   const listH = bodyH - pad * 2;
-  const start = cursor >= listH ? cursor - listH + 1 : 0;
+  const extra = tail ? 1 : 0;
+  const last = items.length + extra - 1;
+  const focus = extra ? last : cursor;
+  const start = focus >= listH ? focus - listH + 1 : 0;
   const blank = paintBodyFill(width, color, 'files');
   const body = [];
   const fileHits = [];
+  let textCursor = null;
   if (pad) body.push(blank);
   for (let i = 0; i < listH; i++) {
     const idx = start + i;
-    const entry = files[idx];
+    if (tail && idx === items.length) {
+      body.push(tail.row);
+      if (tail.cursor) {
+        textCursor = { x: tail.cursor.x, row: body.length - 1 };
+      }
+      continue;
+    }
+    const entry = items[idx];
     if (!entry) break;
-    const selected = idx === cursor;
-    body.push(paintFileRow(entry, width, color, selected, cols));
+    const selected = extra ? false : idx === cursor;
+    body.push(paintRow(entry, width, color, selected));
     const y = headerLines + pad + i + 1;
     fileHits.push({ y, cursor: idx });
   }
   if (pad) body.push(blank);
-  return { body, fileHits };
+  return { body, fileHits, cursor: textCursor };
+};
+
+const paintBodyFiles = (view, width, color, bodyH, headerLines) => {
+  const files = view.files ?? [];
+  const cols = fileColumns(files);
+  const cursor = view.fileCursor ?? 0;
+  const paintRow = (entry, rowWidth, rowColor, selected) =>
+    paintFileRow(entry, rowWidth, rowColor, selected, cols);
+  return paintCursorList(
+    files,
+    cursor,
+    width,
+    color,
+    bodyH,
+    headerLines,
+    paintRow,
+  );
+};
+
+const branchRowFg = (entry, selected) => {
+  if (selected) return THEME.chromeFg;
+  return THEME.mutedFg;
+};
+
+const branchRowFields = (entry) => {
+  const sha = entry.sha ?? '';
+  const date = entry.date ?? '';
+  const gone = entry.gone ? 'gone' : '';
+  const ahead = entry.ahead ? `⇡${entry.ahead}` : '';
+  const behind = entry.behind ? `⇣${entry.behind}` : '';
+  return { sha, ahead, behind, gone, date };
+};
+
+const branchColumns = (branches) => {
+  const widths = { name: 0 };
+  for (const key of BRANCH_COL_KEYS) widths[key] = 0;
+  for (const entry of branches) {
+    const nameW = visibleWidth(branchLabel(entry.name));
+    if (nameW > widths.name) widths.name = nameW;
+    const fields = branchRowFields(entry);
+    for (const key of BRANCH_COL_KEYS) {
+      const w = visibleWidth(fields[key]);
+      if (w > widths[key]) widths[key] = w;
+    }
+  }
+  widths.name = Math.min(BRANCH_NAME_MAX, widths.name);
+  return widths;
+};
+
+const branchRowParts = (entry, cols) => {
+  const fields = branchRowFields(entry);
+  const parts = {};
+  for (const key of BRANCH_COL_KEYS) {
+    const width = cols?.[key] ?? visibleWidth(fields[key]);
+    const align = BRANCH_COL_ALIGN[key];
+    parts[key] = padVisible(fields[key], width, align);
+  }
+  return parts;
+};
+
+const joinBranchSuffix = (parts, cols) => {
+  const bits = [];
+  for (const key of BRANCH_COL_KEYS) {
+    if (!cols[key]) continue;
+    bits.push(parts[key]);
+  }
+  if (!bits.length) return '';
+  return `  ${bits.join('  ')}`;
+};
+
+const paintBranchSuffix = (parts, cols, fgRgb, bgRgb, color) => {
+  const gap = paint('  ', fgRgb, bgRgb, color);
+  const bits = [];
+  for (const key of BRANCH_COL_KEYS) {
+    if (!cols[key]) continue;
+    const tone = BRANCH_COL_FG[key] ?? fgRgb;
+    bits.push(paint(parts[key], tone, bgRgb, color));
+  }
+  if (!bits.length) return '';
+  return gap + bits.join(gap);
+};
+
+const paintBranchRow = (entry, width, color, selected, cols) => {
+  const inner = Math.max(1, width - 1);
+  const mark = selected ? FILE_MARK : ' ';
+  const prefix = ` ${mark} `;
+  const parts = branchRowParts(entry, cols);
+  const suffix = joinBranchSuffix(parts, cols);
+  const rest = Math.max(1, inner - visibleWidth(prefix + suffix));
+  const nameW = Math.min(cols.name, rest);
+  const label = truncateVisible(branchLabel(entry.name), nameW);
+  const namePad = Math.max(0, nameW - visibleWidth(label));
+  const canSubject = rest >= nameW + 3;
+  const gap = canSubject ? '  ' : '';
+  const subjectW = canSubject ? rest - nameW - visibleWidth(gap) : 0;
+  const subject = truncateVisible(entry.subject ?? '', subjectW);
+  const mid = `${label}${' '.repeat(namePad)}${gap}${subject}`;
+  const pad = Math.max(0, rest - visibleWidth(mid));
+  const after = `${' '.repeat(namePad)}${gap}${subject}${' '.repeat(pad)}`;
+  const left = `${prefix}${label}${after}`;
+  const fgRgb = branchRowFg(entry, selected);
+  const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
+  const nameFg = entry.isDefault ? THEME.headerFg : THEME.buttonHotFg;
+  const nameBg = entry.isDefault ? THEME.buttonHotFg : bgRgb;
+  const edge = fill(1, fgRgb, bgRgb, color);
+  if (!color) return `${left}${suffix}${edge}`;
+  let out = `${seq(fgRgb, bgRgb)}${EL}`;
+  out += paint(prefix, fgRgb, bgRgb, color);
+  out += paintBracketName(label, nameFg, THEME.mutedFg, nameBg, color);
+  out += paint(after, fgRgb, bgRgb, color);
+  out += paintBranchSuffix(parts, cols, fgRgb, bgRgb, color);
+  return out + edge;
+};
+
+const paintBranchEdit = (compose, width, color) => {
+  const inner = Math.max(1, width - 1);
+  const prefix = ` ${FILE_MARK} `;
+  const prefixW = visibleWidth(prefix);
+  const rest = Math.max(1, inner - prefixW);
+  const text = compose.text ?? '';
+  const label = `[${text}]`;
+  const clipped = truncateVisible(label, rest);
+  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(1, fgRgb, bgRgb, color);
+  let row = `${left}${edge}`;
+  if (color) {
+    const gap = ' '.repeat(pad);
+    row = `${seq(fgRgb, bgRgb)}${EL}`;
+    row += paint(prefix, fgRgb, bgRgb, color);
+    row += paintBracketName(
+      clipped,
+      THEME.buttonHotFg,
+      THEME.mutedFg,
+      bgRgb,
+      color,
+    );
+    row += paint(gap, fgRgb, bgRgb, color);
+    row += edge;
+  }
+  const col = Math.min((compose.cursor ?? 0) + 1, visibleWidth(clipped));
+  return { row, cursor: { x: prefixW + col + 1 } };
+};
+
+const paintBodyBranches = (view, width, color, bodyH, headerLines) => {
+  const branches = view.branches ?? [];
+  const cols = branchColumns(branches);
+  const cursor = view.branchCursor ?? 0;
+  const compose = view.compose;
+  const editing = compose && compose.kind === 'branch';
+  const tail = editing ? paintBranchEdit(compose, width, color) : null;
+  const paintRow = (entry, rowWidth, rowColor, selected) =>
+    paintBranchRow(entry, rowWidth, rowColor, selected, cols);
+  return paintCursorList(
+    branches,
+    cursor,
+    width,
+    color,
+    bodyH,
+    headerLines,
+    paintRow,
+    tail,
+  );
 };
 
 const paintTodoCaption = (width, color) =>
@@ -851,34 +1256,93 @@ const wrapSoftLine = (line, width) => {
   const gutterW = Math.min(GUTTER_W, Math.max(0, width));
   const budget = Math.max(1, width - gutterW);
   const rows = wrapPlain(line.text ?? '', budget);
-  return rows.map((text) => {
-    const spans = [{ text, changed: false }];
-    return { ...line, text, spans };
-  });
+  const changed = line.wrap === true;
+  const pieces = [];
+  let used = 0;
+  for (let i = 0; i < rows.length; i++) {
+    const text = rows[i];
+    const last = i === rows.length - 1;
+    const spans = [{ text, changed }];
+    const next = { ...line, text, spans, editLast: last };
+    if (line.editStart !== undefined) {
+      next.editStart = line.editStart + used;
+      if (last) next.editEnd = line.editEnd;
+      else next.editEnd = next.editStart + text.length;
+    }
+    used += text.length;
+    pieces.push(next);
+  }
+  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 wrapWidth = split ? splitWidths(width).leftW : width;
+  const { leftW, rightW } = splitWidths(width);
   const out = [];
   for (const row of lines) {
-    const line = split ? row.left || row.right : row;
-    if (!line || !SOFT_WRAP.includes(line.type)) {
-      out.push(row);
+    if (!split) {
+      if (!shouldWrap(row)) {
+        out.push(row);
+        continue;
+      }
+      for (const part of wrapSoftLine(row, width)) out.push(part);
       continue;
     }
-    const parts = wrapSoftLine(line, wrapWidth);
-    for (const part of parts) {
-      if (split) out.push({ left: part, right: part });
-      else out.push(part);
+    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] });
+      }
+      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;
+    }
+    out.push(row);
   }
   return out;
 };
 
-const paintBodyDiff = (item, layout, width, color) => {
+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;
+};
+
+const codeCursorInRows = (rows, split, width, cursor) => {
+  if (cursor === undefined || cursor === null) return null;
+  const { leftW, rightW } = splitWidths(width);
+  for (let i = 0; i < rows.length; i++) {
+    const line = split ? rows[i].right : rows[i];
+    if (!onCodePiece(line, cursor)) continue;
+    const lineW = split ? rightW : width;
+    const gutterW = Math.min(GUTTER_W, Math.max(0, lineW));
+    const take = Math.min(cursor - line.editStart, line.text.length);
+    const col = visibleWidth(line.text.slice(0, take));
+    const x0 = split ? leftW + 1 : 0;
+    return { x: x0 + gutterW + col + 1, row: i };
+  }
+  return null;
+};
+
+const paintBodyDiff = (view, width, color) => {
+  const item = view.item;
+  const layout = view.layout ?? 'unified';
+  const overlay = view.codeOverlay;
   const lang = detectLang(itemPath(item));
   const splitBody = layout === 'side' && !item.file.isBinary;
-  const raw = dropLeadingEmpty(bodyLines(item, layout), splitBody);
+  const raw = dropLeadingEmpty(bodyLines(item, layout, overlay), splitBody);
   const lines = expandSoftRows(raw, width, splitBody);
   const body = [];
   if (splitBody) {
@@ -890,11 +1354,14 @@ const paintBodyDiff = (item, layout, width, color) => {
       body.push(paintDiffLine(line, width, color, item.origin, lang));
     }
   }
-  return { body, splitBody };
+  const edit = overlay ? overlay.cursor : null;
+  const cursor = codeCursorInRows(lines, splitBody, width, edit);
+  return { body, splitBody, cursor };
 };
 
 const bodyKind = (view) => {
-  if ((view.pane ?? 'diff') === 'files') return 'files';
+  const pane = view.pane ?? 'diff';
+  if (pane === 'files' || pane === 'branches') return pane;
   if (!view.item) return 'empty';
   if (view.item.origin === 'todo') return 'todo';
   return 'diff';
@@ -905,13 +1372,17 @@ const BODY_PAINT = {
     ...paintBodyFiles(view, width, color, bodyH, headerLines),
     todoOwners: [],
   }),
+  branches: (view, width, color, bodyH, headerLines) => ({
+    ...paintBodyBranches(view, width, color, bodyH, headerLines),
+    todoOwners: [],
+  }),
   empty: () => ({ body: [], fileHits: [], todoOwners: [] }),
   todo: (view, width, color) => ({
     ...paintBodyTodo(view, width, color),
     fileHits: [],
   }),
   diff: (view, width, color) => ({
-    ...paintBodyDiff(view.item, view.layout ?? 'unified', width, color),
+    ...paintBodyDiff(view, width, color),
     fileHits: [],
     todoOwners: [],
   }),
@@ -954,7 +1425,7 @@ const windowBody = (view, width, color, bodyH, headerLines, paintedBody) => {
   const todoOwners = paintedBody.todoOwners;
   const splitBody = paintedBody.splitBody === true;
   const pane = view.pane ?? 'diff';
-  const listPane = pane === 'files';
+  const listPane = LIST_PANES.includes(pane);
   const fillKind = bodyFillKind(listPane, splitBody);
   let shift = 0;
   if (!listPane && body.length > 0) {
@@ -1006,7 +1477,15 @@ const stackFrame = (view, width, color, rows, layout, windowed, notes) => {
   return overlayRows(rows, view.selection);
 };
 
-const frameResult = (text, painted, layout, windowed, hits, bodyH) => {
+const frameResult = (
+  text,
+  painted,
+  layout,
+  windowed,
+  hits,
+  bodyH,
+  statusHits,
+) => {
   const fileHits = windowed.fileHits;
   const todoHits = windowed.todoHits;
   const templateHits = hits.templateHits;
@@ -1020,6 +1499,7 @@ const frameResult = (text, painted, layout, windowed, hits, bodyH) => {
     fileHits,
     todoHits,
     templateHits,
+    statusHits,
     footerY,
     height: painted.length,
     scroll,
@@ -1028,14 +1508,18 @@ const frameResult = (text, painted, layout, windowed, hits, bodyH) => {
   };
 };
 
+const hiddenActions = (view) => {
+  const pane = view.pane ?? 'diff';
+  return disabledActions(pane, view.item);
+};
+
 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 pane = view.pane ?? 'diff';
-  const disabled = pane === 'files' ? FILES_DISABLED : [];
-  const layout = layoutButtons(width, false, disabled);
+  const extra = view.pane === 'branches' ? Object.keys(BRANCH_ACTIONS) : [];
+  const layout = layoutButtons(width, false, hiddenActions(view), extra);
   const notes = frameNotes(view, width, height, color);
   const headerLines = rows.length;
   const bodyH = notes.bodyH;
@@ -1056,7 +1540,10 @@ const renderFrame = (view, options = {}) => {
     notes.noteCursor,
     bodyH,
   );
-  return frameResult(text, painted, layout, windowed, hits, bodyH);
+  const statusY = painted.length - 1;
+  const branchHit = statusBranchHit(view, width, statusY);
+  const statusHits = branchHit ? [branchHit] : [];
+  return frameResult(text, painted, layout, windowed, hits, bodyH, statusHits);
 };
 
 const presentCursor = (cursor) => {
@@ -1080,9 +1567,10 @@ const presentRows = (rows, options = {}) => {
 };
 
 module.exports = {
-  QUIT_FINISH,
-  QUIT_CONTINUE,
   QUIT_PROMPT,
+  COMMIT_PROMPT,
+  PUSH_PROMPT,
+  updatePrompt,
   DEL_CHAR_BG,
   ADD_CHAR_BG,
   paintDiffLine,
@@ -1090,6 +1578,8 @@ module.exports = {
   layoutButtons,
   todoInnerWidth,
   noteInnerWidth,
+  codeInnerWidth,
+  formatBusyStatus,
   renderFrame,
   presentCursor,
   presentRows,