reslop 0.3.1 → 0.3.3

package/lib/render/agents.js

@@ -17,10 +17,11 @@ const { flexCell, tableLines, titleAside } = table;
 const logPaint = require('./log.js');
 const { LOG_PAD_X } = logPaint;
 const { paintNpmLog, withLogScroller } = logPaint;
-const { paintField } = require('./field.js');
+const { paintField, queryTones, fieldHit } = require('./field.js');
 
 const BUBBLE = '●';
 const BUBBLE_GAP = 1;
+const COLUMN_GAP = 2;
 const BUBBLE_PHASE = ['key', 'add', 'sha', 'warn'];
 const PAD_W = 2;
 const TAIL = 2;
@@ -45,14 +46,8 @@ const COL_TITLES = {
 
 const agentFields = (row) => {
   if (!row.bin) {
-    return {
-      name: row.name,
-      model: row.model || '',
-      effort: '',
-      fast: '',
-      context: '',
-      plan: 'not installed',
-    };
+    const none = { model: '', effort: '', fast: '', context: '', plan: '' };
+    return { name: row.name, ...none };
   }
   const levels = row.efforts ?? [];
   return {
@@ -166,7 +161,28 @@ const cellFace = (text, width, query, end = false) => {
   return end && !query ? `${pad}${shown}` : `${shown}${pad}`;
 };
 
+// A missing agent has no settings: the row says what would bring it
+const paintHintRow = (row, width, color, selected, cols) => {
+  const prefix = ' '.repeat(PAD_W);
+  const tail = ' '.repeat(TAIL);
+  const gap = cols.gap || ' ';
+  const name = cellFace(row.name, cols.nameW, '');
+  const taken = PAD_W + TAIL + visibleWidth(name) + visibleWidth(gap);
+  const hint = cellFace(row.hint || 'not installed', width - taken, '');
+  const fgRgb = selected ? THEME.chromeFg : THEME.mutedFg;
+  const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
+  const text = `${prefix}${name}${gap}${hint}${tail}`;
+  if (!color) return { row: text, spans: [] };
+  let out = `${seq(fgRgb, bgRgb)}${EL}`;
+  out += paint(`${prefix}${name}`, THEME.mutedFg, bgRgb, color);
+  out += paint(gap, fgRgb, bgRgb, color);
+  out += paint(hint, THEME.warnFg, bgRgb, color);
+  out += paint(tail, fgRgb, bgRgb, color);
+  return { row: out, spans: [] };
+};
+
 const paintAgentRow = (row, width, color, selected, cols, search) => {
+  if (!row.bin) return paintHintRow(row, width, color, selected, cols);
   const fields = agentFields(row);
   const prefix = ' '.repeat(PAD_W);
   const rest = Math.max(1, width - PAD_W - TAIL);
@@ -183,6 +199,17 @@ const paintAgentRow = (row, width, color, selected, cols, search) => {
     ),
     plan: cellFace(fields.plan, cols.planW, typedQuery(search, 'plan'), true),
   };
+  if (!color && search?.editor) {
+    const size = colW(cols, search.field);
+    search.editor.reveal(size);
+    cells[search.field] = paintField(
+      search.query,
+      search.editor,
+      size,
+      false,
+      queryTones(THEME.warnFg, THEME.buttonBg),
+    );
+  }
   let mid = name;
   for (const field of VALUE_FIELDS) {
     if (colW(cols, field)) mid += `${gap}${cells[field]}`;
@@ -193,11 +220,9 @@ const paintAgentRow = (row, width, color, selected, cols, search) => {
   const fgRgb = selected ? THEME.chromeFg : THEME.mutedFg;
   const bgRgb = selected ? THEME.buttonBg : THEME.ctxBg;
   if (!color) return { row: `${prefix}${mid}${pad}${tail}`, spans };
-  const nameFg = row.bin ? THEME.buttonHotFg : THEME.mutedFg;
-  const modelFg = row.bin ? THEME.shaFg : THEME.shaDarkFg;
-  const valueFg = row.bin ? THEME.buttonHotFg : fgRgb;
+  const valueFg = THEME.buttonHotFg;
   const tones = {
-    model: { fg: modelFg, bold: Boolean(row.bin) },
+    model: { fg: THEME.shaFg, bold: true },
     effort: { fg: valueFg, bold: false },
     fast: { fg: valueFg, bold: false, glue: true },
     context: { fg: valueFg, bold: false },
@@ -205,7 +230,7 @@ const paintAgentRow = (row, width, color, selected, cols, search) => {
   };
   let out = `${seq(fgRgb, bgRgb)}${EL}`;
   out += paint(prefix, fgRgb, bgRgb, color);
-  out += paint(name, nameFg, bgRgb, color, Boolean(row.bin));
+  out += paint(name, valueFg, bgRgb, color, true);
   for (const field of VALUE_FIELDS) {
     const size = colW(cols, field);
     if (!size) continue;
@@ -219,14 +244,10 @@ const paintAgentRow = (row, width, color, selected, cols, search) => {
     out += paint(gap, valueFg, bgRgb, color);
     if (query && search.editor) {
       search.editor.reveal(size);
-      const queryTones = {
-        plain: { fg: THEME.searchFg, bg: THEME.searchBg },
-        select: { fg: THEME.chromeFg, bg: THEME.checkBg },
-        caret: { fg: THEME.searchOnFg, bg: THEME.searchOnBg },
-      };
-      out += paintField(query, search.editor, size, color, queryTones);
+      const typed = queryTones(THEME.warnFg, bgRgb);
+      out += paintField(query, search.editor, size, color, typed);
     } else if (query) {
-      out += paint(face, THEME.searchFg, THEME.searchBg, color, true);
+      out += paint(face, THEME.warnFg, bgRgb, color, true);
     } else {
       out += paint(face, tone.fg, bgRgb, color, tone.bold);
     }
@@ -273,7 +294,7 @@ const overlayMenu = (painted, view, cols, gap, width, color, headerLines) => {
   const boxW = menuBoxWidth(options, columnW, width - x);
   if (x + boxW > width) x = Math.max(0, width - boxW);
   const origin = down ? rowAt + 1 : Math.max(0, rowAt - box.span);
-  const faces = menuFaces(options, box, boxW, color, off);
+  const faces = menuFaces(options, box, boxW, color, view.agentQuery, off);
   const body = painted.body.slice();
   const fileHits = painted.fileHits.slice();
   for (let i = 0; i < faces.length && origin + i < body.length; i++) {
@@ -289,7 +310,13 @@ const overlayMenu = (painted, view, cols, gap, width, color, headerLines) => {
       field: 'menu',
     });
   }
-  return { ...painted, body, fileHits, menuScroll: box.start };
+  const editHits = painted.editHits.slice();
+  if (view.agentEditor) {
+    const start = fieldX(cols, gap, field);
+    const hit = fieldHit(view.agentEditor, start, columnW, rowHit.y);
+    editHits.push({ ...hit, row: rowAt });
+  }
+  return { ...painted, body, fileHits, editHits, menuScroll: box.start };
 };
 
 const chooserSplit = (width) => {
@@ -616,27 +643,50 @@ const agentLead = (item, frame) => {
   return cellSegs(segs);
 };
 
-const agentName = (item) => {
+// The last column clips its names when the tile is narrow
+const agentCells = (item, frame, last) => {
+  if (!item) return [];
   const tone = item.bin ? 'text' : 'muted';
-  const name = flexCell(item.name, tone);
+  const name = last ? flexCell(item.name, tone) : cell(item.name, tone);
   name.gap = BUBBLE_GAP;
-  return name;
+  return [agentLead(item, frame), name];
+};
+
+// Two columns while both fit their widest agent, else one
+const columnCount = (items, width) => {
+  let lead = 0;
+  let name = 0;
+  for (const item of items) {
+    const sessions = item.running ? ` ${item.running}` : '';
+    lead = Math.max(lead, visibleWidth(`${BUBBLE}${sessions}`));
+    name = Math.max(name, visibleWidth(item.name));
+  }
+  const entry = lead + BUBBLE_GAP + name;
+  return entry * 2 + COLUMN_GAP <= width ? 2 : 1;
 };
 
+// Agents fill the left column first
 const agentsBlock = (model, width, height, ctx, tile) => {
   const data = model.agents;
-  if (!data || !data.ready) return waiting('detecting clis…');
+  if (!data || !data.ready) return waiting('detecting agents…');
   const aside = [seg(`${data.running || 0}`, 'key', true)];
   const titleLine = titleAside(tile, aside, width);
   const items = data.items ?? [];
   if (!items.length) return notice('no agents', titleLine);
-  const shown = items.slice(0, Math.max(0, height));
-  const rows = shown.map((item) => [
-    agentLead(item, ctx.frame),
-    agentName(item),
-    cell(item.bin ? item.model : 'missing', item.bin ? 'sha' : 'muted', 'r'),
-  ]);
-  return { titleLine, lines: tableLines(rows, width) };
+  const columns = columnCount(items, width);
+  const perColumn = Math.ceil(items.length / columns);
+  const count = Math.min(Math.max(0, height), perColumn);
+  const rows = [];
+  for (let i = 0; i < count; i++) {
+    const left = agentCells(items[i], ctx.frame, columns === 1);
+    if (columns === 1) {
+      rows.push(left);
+      continue;
+    }
+    const right = agentCells(items[i + count], ctx.frame, true);
+    rows.push([...left, ...right]);
+  }
+  return { titleLine, lines: tableLines(rows, width, COLUMN_GAP) };
 };
 
 module.exports = { paintBodyAgents, agentsBlock };

package/lib/render/branches.js

@@ -5,9 +5,12 @@ const { shortAge } = require('../common/format.js');
 const primitives = require('./primitives.js');
 
 const { THEME, paint, visibleWidth, trimVisible, seq, EL } = ansi;
-const { MARK_W, markPrefix, branchLabel, editSpan } = primitives;
-const { paintCursorList, fieldWindow } = primitives;
+const { markPrefix, branchLabel, paintCursorList } = primitives;
+const { paintBodyFill } = primitives;
 const { measureColumns, padColumns, joinColumns, paintColumns } = primitives;
+const { paintNameEdit } = require('./name-edit.js');
+const { paintTreeBand } = require('./repos.js');
+const { tileHits, pageFill } = require('./tiles.js');
 
 const BRANCH_COL_ALIGN = {
   sha: 'end',
@@ -92,27 +95,23 @@ const paintBranchRow = (entry, width, color, selected, cols) => {
   return out + paint(tail, fgRgb, bgRgb, color);
 };
 
-const paintBranchEdit = (compose, width, color) => {
-  const prefix = markPrefix(true);
-  const rest = Math.max(1, width - MARK_W);
-  const text = `${compose.text ?? ''}`.replaceAll('\n', ' ');
-  const win = fieldWindow(text, compose.cursor, compose.scrollCol, rest);
-  const gap = ' '.repeat(Math.max(0, rest - visibleWidth(win.text)));
-  const fgRgb = THEME.chromeFg;
-  const bgRgb = THEME.buttonBg;
-  let row = `${prefix}${win.text}${gap}`;
-  if (color) {
-    row = `${seq(fgRgb, bgRgb)}${EL}`;
-    row += paint(prefix, fgRgb, bgRgb, color);
-    row += paint(win.text, THEME.buttonHotFg, bgRgb, color);
-    row += paint(gap, fgRgb, bgRgb, color);
-  }
-  const textX = MARK_W + 1;
-  const edit = editSpan(1, textX, textX + rest, 0, text);
-  const cursor = { x: textX + win.col, scroll: win.scroll };
-  return { row, cursor, edits: [{ ...edit, scroll: win.scroll }] };
-};
+// A title and the five lines of a tile
+const TREES_H = 6;
+const LIST_MIN_H = 4;
+// A blank line above the tiles, one under them, one under the list
+const TREES_GAPS = 3;
+
+// The tiles of the worktrees show when the list of branches can spare it
+const treesHeight = (bodyH) =>
+  bodyH - TREES_GAPS - LIST_MIN_H >= TREES_H ? TREES_H : 0;
+
+const shiftRows = (list, by) => ({
+  ...list,
+  cursor: list.cursor ? { ...list.cursor, row: list.cursor.row + by } : null,
+  editHits: list.editHits.map((span) => ({ ...span, row: span.row + by })),
+});
 
+// The worktrees above the branches; one element is selected, a tile or a branch
 const paintBodyBranches = (view, width, color, bodyH, headerLines) => {
   const branches = view.branches ?? [];
   const cols = measureColumns(branches, branchRowFields, BRANCH_COL_ALIGN);
@@ -123,12 +122,41 @@ const paintBodyBranches = (view, width, color, bodyH, headerLines) => {
   cols.name = Math.min(BRANCH_NAME_MAX, cols.name);
   const cursor = view.branchCursor ?? 0;
   const { compose } = view;
-  const branchEdit = compose?.kind === 'branch';
-  const edit = branchEdit ? paintBranchEdit(compose, width, color) : null;
-  const pane = { width, color, bodyH, headerLines, offset: view.listScroll };
+  const trees = view.trees ? treesHeight(bodyH) : 0;
+  const typing = compose?.kind === 'branch' || compose?.kind === 'worktree';
+  const typed = typing ? paintNameEdit(compose, width, color) : null;
+  const above = trees && compose?.kind === 'worktree' ? typed : null;
+  const edit = above ? null : typed;
+  const lead = above ? 1 : 0;
+  const top = trees ? lead + 1 + trees + 1 : 0;
+  const room = trees ? bodyH - top - 1 : bodyH;
+  const pane = { width, color, bodyH: room, headerLines: headerLines + top };
+  pane.offset = view.listScroll;
+  if (trees) pane.pad = 0;
+  const picked = !view.treeFocus;
   const paintRow = (entry, selected) =>
-    paintBranchRow(entry, width, color, selected, cols);
-  return paintCursorList(branches, cursor, pane, paintRow, edit);
+    paintBranchRow(entry, width, color, selected && picked, cols);
+  const list = paintCursorList(branches, cursor, pane, paintRow, edit);
+  if (!trees) return list;
+  const band = paintTreeBand(view.trees, width, trees, color);
+  const hits = tileHits(band.bands, headerLines + lead + 1);
+  const treeHits = hits.map((hit) => ({ ...hit, tree: true }));
+  const head = above ? [above.row] : [];
+  const gap = pageFill(width, color);
+  const tail = paintBodyFill(width, color, 'files');
+  const body = [...head, gap, ...band.rows, gap, ...list.body, tail];
+  const fileHits = [...treeHits, ...list.fileHits];
+  const moved = shiftRows(list, top);
+  const typedAbove = above ? { ...above.cursor, row: 0 } : null;
+  const spans = above ? above.edits.map((span) => ({ ...span, row: 0 })) : [];
+  return {
+    ...moved,
+    body,
+    fileHits,
+    cursor: typedAbove ?? moved.cursor,
+    editHits: [...spans, ...moved.editHits],
+    gridCols: band.cols,
+  };
 };
 
 module.exports = { paintBodyBranches };

package/lib/render/field.js

@@ -4,6 +4,16 @@ const ansi = require('../term/ansi.js');
 
 const { THEME, paint, graphemes, graphemeWidth, visibleWidth } = ansi;
 const { fileMatches } = require('../common/find.js');
+const { editSpan } = require('./primitives.js');
+
+// Inline fields paint their own selection; their spans map pointer positions.
+const fieldHit = (editor, x, width, y) => ({
+  ...editSpan(x + 1, x + 1, x + width + 1, 0, editor.text),
+  editor,
+  y,
+  scroll: editor.scrollCol,
+  live: false,
+});
 
 const pieceKind = (index, cursor, lo, hi) => {
   if (index === cursor) return 'caret';
@@ -62,6 +72,12 @@ const paintField = (text, editor, room, color, tones) => {
   return out + paint(pad, plain.fg, plain.bg, color);
 };
 
+const queryTones = (fgRgb, bgRgb) => ({
+  plain: { fg: fgRgb, bg: bgRgb },
+  select: { fg: THEME.chromeFg, bg: THEME.checkBg },
+  caret: { fg: THEME.searchOnFg, bg: THEME.searchOnBg },
+});
+
 const paintPlanFace = (view, face, fgRgb, bgRgb, color) => {
   const editor = view.planEditor;
   if (!editor || !view.planQuery) {
@@ -69,11 +85,7 @@ const paintPlanFace = (view, face, fgRgb, bgRgb, color) => {
   }
   const room = visibleWidth(face);
   if (room) editor.reveal(room);
-  const tones = {
-    plain: { fg: THEME.searchFg, bg: THEME.searchBg },
-    select: { fg: THEME.chromeFg, bg: THEME.checkBg },
-    caret: { fg: THEME.searchOnFg, bg: THEME.searchOnBg },
-  };
+  const tones = queryTones(fgRgb, bgRgb);
   return paintField(view.planQuery, editor, room, color, tones);
 };
 
@@ -125,7 +137,9 @@ const paintFindStatus = (view, width, color) => {
 
 module.exports = {
   paintField,
+  queryTones,
   paintPlanFace,
   paintImportStatus,
   paintFindStatus,
+  fieldHit,
 };

package/lib/render/footer.js

@@ -296,9 +296,10 @@ const agentListDim = (view) => {
   const off = [];
   if (!installed || levels.length < 2) off.push('agentEffort');
   if (!installed) off.push('agentFast');
-  if (!installed || !sizes.length) off.push('agentContext');
+  if (!installed || sizes.length < 2) off.push('agentContext');
   if ((view.agentPlanCount ?? 0) < 2) off.push('agentReview');
-  if (!view.agentCanContinue) off.push('agentContinue');
+  if (installed || !row || !row.installable) off.push('agentInstall');
+  if (!view.agentCanStart) off.push('agentStart');
   return off;
 };
 
@@ -331,14 +332,16 @@ const dimFooterActions = (view) => {
 const GIT_FOOTER = ['add', 'unstage', 'revert', 'ignore'];
 
 const FOOTER_EXTRA = {
-  repos: ['theme'],
+  repos: ['theme', 'worktreeNew', 'worktreeDrop'],
   dashboard: ['theme', 'pull', 'push'],
   unit: ['add', 'unstage', 'revert', 'feedback', 'code', 'lines'],
   files: [...GIT_FOOTER, 'code'],
   diff: [...GIT_FOOTER, 'feedback', 'code', 'layout', 'lines'],
-  branches: ['newBranch', 'rebase', 'drop', 'pull', 'push'],
+  branches: ['newBranch', 'worktreeBranch', 'rebase', 'drop', 'pull', 'push'],
+  trees: ['worktreeNew', 'worktreeDrop', 'pull', 'push'],
   commits: ['newCommit', 'apply', 'reword', 'drop', 'view', 'pull', 'push'],
   npmLog: ['npmVerbose', 'npmStop', 'npmRerun'],
+  npmFailedLog: ['npmVerbose', 'npmSolve', 'npmRerun'],
   npm: ['npmEdit', 'npmNew', 'npmDrop', 'npmLogs'],
   packages: ['packageNew', 'packageDrop', 'packageWanted', 'packageLatest'],
   agentLog: ['agentStop', 'agentRerun'],
@@ -348,14 +351,18 @@ const FOOTER_EXTRA = {
     'agentFast',
     'agentContext',
     'agentReview',
-    'agentContinue',
+    'agentInstall',
+    'agentStart',
   ],
   tasks: ['plan', 'import', 'drop', 'check', 'taskNudge'],
 };
 
 const extraFooterActions = (view) => {
   const { pane } = view;
-  if (pane === 'npm' && view.npmView) return FOOTER_EXTRA.npmLog;
+  if (pane === 'branches' && view.treeFocus) return FOOTER_EXTRA.trees;
+  if (pane === 'npm' && view.npmView) {
+    return view.npmCanSolve ? FOOTER_EXTRA.npmFailedLog : FOOTER_EXTRA.npmLog;
+  }
   if (pane === 'npm') return FOOTER_EXTRA.npm;
   if (pane === 'agents' && view.agentView) return FOOTER_EXTRA.agentLog;
   if (pane === 'agents') return FOOTER_EXTRA.agents;
@@ -382,4 +389,5 @@ module.exports = {
   paintFooter,
   footerHits,
   footerLayout,
+  dimFooterActions,
 };

package/lib/render/frame.js

@@ -18,11 +18,12 @@ const dashboard = require('./dashboard/dashboard.js');
 const packages = require('./packages.js');
 const agents = require('./agents.js');
 const repos = require('./repos.js');
+const { contextMenu } = require('./menu.js');
 
 const { isListPane, isTaskView, paintBodyFill, paneResult } = primitives;
 const { bodyRow } = primitives;
 const { paintStatusLine, statusBranchHit, statusChoiceHits } = status;
-const { statusPlanHit, planMenu } = status;
+const { statusPlanHit, statusEditHits, planMenu } = status;
 
 const PANE_BODY = {
   dashboard: dashboard.paintBodyDashboard,
@@ -250,8 +251,20 @@ const renderFrame = (view, options = {}) => {
     }
     statusHits.push(...menu.hits);
   }
-  const editHits = [...windowed.editHits, ...hits.editHits];
+  const editHits = [
+    ...windowed.editHits,
+    ...hits.editHits,
+    ...statusEditHits(view, width, statusY),
+  ];
   const shown = markEditorSelection(rows, view, editHits, color);
+  const popup = contextMenu(view.contextMenu, width, rows.length, color);
+  if (popup) {
+    for (const line of popup.lines) {
+      const index = line.y - 1;
+      if (index <= 0 || index >= rows.length - 1) continue;
+      shown[index] = stampVisible(shown[index], popup.x, line.text);
+    }
+  }
   const text = shown.map((row) => (color ? row + RESET : row)).join('\n');
   return {
     text,
@@ -262,6 +275,7 @@ const renderFrame = (view, options = {}) => {
     templateHits: hits.templateHits,
     editHits,
     statusHits,
+    contextHits: popup ? popup.hits : [],
     footerY: rows.length,
     height: rows.length,
     scroll: windowed.scroll,

package/lib/render/menu.js

@@ -4,6 +4,11 @@ const { clamp } = require('../common/utilities.js');
 const ansi = require('../term/ansi.js');
 const { listWindowStart, scrollMark } = require('./primitives.js');
 const { THEME, paint, visibleWidth, trimVisible } = ansi;
+const {
+  actionLetter,
+  actionCaption,
+  buttonWord,
+} = require('../input/actions.js');
 
 const menuBoxWidth = (options, columnW, room) => {
   let widest = Math.max(columnW, 4);
@@ -13,7 +18,24 @@ const menuBoxWidth = (options, columnW, room) => {
   return clamp(widest + 2, 4, room);
 };
 
-const menuItem = (label, boxW, color, selected, mark, disabled) => {
+const paintQuery = (text, query, fgRgb, bgRgb, color, bold) => {
+  const needle = `${query ?? ''}`.trim().toLowerCase();
+  if (!color || !needle) return paint(text, fgRgb, bgRgb, color, bold);
+  const hay = text.toLowerCase();
+  let out = '';
+  let from = 0;
+  let at = hay.indexOf(needle, from);
+  while (at >= 0) {
+    const end = at + needle.length;
+    out += paint(text.slice(from, at), fgRgb, bgRgb, color, bold);
+    out += paint(text.slice(at, end), THEME.warnFg, bgRgb, color, true);
+    from = end;
+    at = hay.indexOf(needle, from);
+  }
+  return out + paint(text.slice(from), fgRgb, bgRgb, color, bold);
+};
+
+const menuItem = (label, boxW, color, selected, mark, disabled, query) => {
   const barW = mark ? 1 : 0;
   const faceW = Math.max(1, boxW - barW);
   const room = Math.max(0, faceW - 1);
@@ -25,7 +47,7 @@ const menuItem = (label, boxW, color, selected, mark, disabled) => {
   const fgRgb = disabled ? THEME.mutedFg : THEME.chromeFg;
   const hotFg = hot ? THEME.buttonHotFg : fgRgb;
   const bgRgb = hot ? THEME.checkBg : THEME.noteBg;
-  let row = paint(face, hotFg, bgRgb, color, hot);
+  let row = paintQuery(face, query, hotFg, bgRgb, color, hot);
   if (!mark) return row;
   const barBg = mark === 'thumb' ? THEME.taskHeadBg : THEME.buttonBg;
   row += paint(' ', fgRgb, barBg, color);
@@ -40,7 +62,7 @@ const dropBox = (options, cursor, scroll, room) => {
   return { focus, inner, span: inner, start, count };
 };
 
-const menuFaces = (options, box, boxW, color, off = new Set()) => {
+const menuFaces = (options, box, boxW, color, query = '', off = new Set()) => {
   const faces = [];
   for (let i = 0; i < box.inner; i++) {
     const index = box.start + i;
@@ -50,11 +72,86 @@ const menuFaces = (options, box, boxW, color, off = new Set()) => {
     const focused = index === box.focus;
     const face =
       label === undefined
-        ? menuItem('none', boxW, color, false, mark, false)
-        : menuItem(label, boxW, color, focused, mark, disabled);
+        ? menuItem('none', boxW, color, false, mark, false, '')
+        : menuItem(label, boxW, color, focused, mark, disabled, query);
     faces.push({ index, face });
   }
   return faces;
 };
 
-module.exports = { menuBoxWidth, dropBox, menuFaces };
+const contextText = (id, keyWidth) => {
+  if (!keyWidth) return buttonWord(id);
+  const mark = actionLetter(id) ?? '';
+  const caption = actionCaption(id);
+  const key = mark.padEnd(keyWidth);
+  return `${key}  ${caption}`;
+};
+
+const contextLabel = (id, width, color, selected, disabled, keyWidth) => {
+  const label = contextText(id, keyWidth);
+  const mark = actionLetter(id) ?? '';
+  const shown = trimVisible(label, Math.max(1, width - 2));
+  const pad = ' '.repeat(Math.max(0, width - 2 - visibleWidth(shown)));
+  const face = ` ${shown}${pad} `;
+  if (!color || !mark) return face;
+  const bgRgb = selected && !disabled ? THEME.popupHotBg : THEME.popupBg;
+  const fgRgb = disabled ? THEME.popupDisabledFg : THEME.popupFg;
+  if (disabled) return paint(face, fgRgb, bgRgb, color);
+  const at = shown.indexOf(mark);
+  if (at < 0) return paint(face, fgRgb, bgRgb, color);
+  let out = paint(face.slice(0, at + 1), fgRgb, bgRgb, color);
+  out += paint(mark, THEME.buttonHotFg, bgRgb, color, true);
+  return out + paint(face.slice(at + mark.length + 1), fgRgb, bgRgb, color);
+};
+
+const contextMenu = (model, width, height, color) => {
+  if (!model || !model.actions || !model.actions.length) return null;
+  const keyWidth = model.editor
+    ? Math.max(
+        ...model.actions.map((id) => visibleWidth(actionLetter(id) ?? '')),
+      )
+    : 0;
+  const labels = model.actions.map((id) => contextText(id, keyWidth));
+  const widest = labels.reduce(
+    (size, label) => Math.max(size, visibleWidth(label)),
+    4,
+  );
+  const boxW = Math.min(width, widest + 2);
+  const count = model.actions.length;
+  const inner = Math.min(count, Math.max(1, height - 3));
+  const x = clamp(model.x ?? 0, 0, Math.max(0, width - boxW));
+  const anchorY = clamp(model.y ?? 2, 2, Math.max(2, height - 1));
+  const y = Math.min(anchorY, Math.max(2, height - inner - 1));
+  const cursor = clamp(model.cursor ?? 0, 0, count - 1);
+  const start = listWindowStart(cursor, 0, inner, count);
+  const lines = [];
+  const hits = [];
+  for (let row = 0; row < inner; row++) {
+    const index = start + row;
+    const id = model.actions[index];
+    const disabled = (model.disabled ?? []).includes(id);
+    const face = contextLabel(
+      id,
+      boxW,
+      color,
+      index === cursor,
+      disabled,
+      keyWidth,
+    );
+    lines.push({
+      y: y + row,
+      text: face,
+    });
+    hits.push({
+      id,
+      cursor: index,
+      disabled,
+      y: y + row,
+      x0: x,
+      x1: x + boxW,
+    });
+  }
+  return { x, lines, hits };
+};
+
+module.exports = { menuBoxWidth, dropBox, menuFaces, contextMenu };

package/lib/render/name-edit.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const ansi = require('../term/ansi.js');
+const primitives = require('./primitives.js');
+
+const { THEME, paint, visibleWidth, seq, EL } = ansi;
+const { MARK_W, markPrefix, editSpan, fieldWindow } = primitives;
+
+// The row where a name is typed: of a new branch or of a new worktree
+const paintNameEdit = (compose, width, color) => {
+  const prefix = markPrefix(true);
+  const rest = Math.max(1, width - MARK_W);
+  const text = `${compose.text ?? ''}`.replaceAll('\n', ' ');
+  const win = fieldWindow(text, compose.cursor, compose.scrollCol, rest);
+  const gap = ' '.repeat(Math.max(0, rest - visibleWidth(win.text)));
+  const fgRgb = THEME.chromeFg;
+  const bgRgb = THEME.buttonBg;
+  let row = `${prefix}${win.text}${gap}`;
+  if (color) {
+    row = `${seq(fgRgb, bgRgb)}${EL}`;
+    row += paint(prefix, fgRgb, bgRgb, color);
+    row += paint(win.text, THEME.buttonHotFg, bgRgb, color);
+    row += paint(gap, fgRgb, bgRgb, color);
+  }
+  const textX = MARK_W + 1;
+  const edit = editSpan(1, textX, textX + rest, 0, text);
+  const cursor = { x: textX + win.col, scroll: win.scroll };
+  return { row, cursor, edits: [{ ...edit, scroll: win.scroll }] };
+};
+
+module.exports = { paintNameEdit };