reslop 0.2.1 → 0.2.4

package/lib/remote.js

@@ -1,10 +1,15 @@
 'use strict';
 
-const { delay, jsonParse, isHashObject } = require('metautil');
-const { oneLine } = require('./utilities.js');
-const { itemPath, isPathInScope } = require('./files.js');
-const { parseDiff, itemsFromFiles, isCtxType } = require('./diff/diff.js');
-const { foldDepItems } = require('./deps.js');
+const metautil = require('metautil');
+const { delay, jsonParse, isHashObject } = metautil;
+const utilities = require('./utilities.js');
+const { oneLine } = utilities;
+const files = require('./files.js');
+const { itemPath, isPathInScope } = files;
+const diff = require('./diff/diff.js');
+const { parseDiff, itemsFromFiles, isCtxType } = diff;
+const deps = require('./deps.js');
+const { foldDepItems } = deps;
 
 const RETRY_ATTEMPTS = 3;
 const RETRY_DELAY_MS = 200;
@@ -323,13 +328,15 @@ const changeFiles = (items) => {
 
 const loadChange = async (ref, options, source) => {
   const { client, url, diffUrl = url, diffAccept } = source;
-  const paths = options.paths ?? [];
-  const request = {
-    fetch: options.fetch ?? globalThis.fetch,
-    token: options.token ?? '',
-    retry: options.retry ?? {},
-    signal: options.signal,
-  };
+  const {
+    cwd,
+    paths = [],
+    fetch = globalThis.fetch,
+    token = '',
+    retry = {},
+    signal,
+  } = options;
+  const request = { fetch, token, retry, signal };
   const jsonPage = await client.request(url, request);
   const data = client.parseJson(jsonPage.body, `${client.subject} payload`);
   const diffPage = await client.request(diffUrl, {
@@ -348,7 +355,7 @@ const loadChange = async (ref, options, source) => {
     if (isAbortError(error, request.signal)) throw error;
     // Discussion import is optional.
   }
-  return { top: options.cwd, items, sourceLabel, change, imported };
+  return { top: cwd, items, sourceLabel, change, imported };
 };
 
 module.exports = {

package/lib/render/branches.js

@@ -1,13 +1,15 @@
 'use strict';
 
 const ansi = require('../ansi.js');
+const files = require('../files.js');
 const primitives = require('./primitives.js');
+const { shortAge } = files;
 const { measureColumns, padColumns, joinColumns, paintColumns } = primitives;
 
 const { THEME, paint, visibleWidth, truncateVisible, seq, EL } = ansi;
-const { fill, FILE_MARK, paneResult } = primitives;
+const { FILE_MARK } = primitives;
 const { paintCursorList, paintListEdit } = primitives;
-const { branchLabel, paintBracketName } = primitives;
+const { branchLabel } = primitives;
 
 const BRANCH_COL_ALIGN = {
   sha: 'end',
@@ -31,13 +33,11 @@ const BRANCH_CURRENT_COL_FG = {
 };
 
 const BRANCH_NAME_MAX = 24;
-const BRANCH_EDGE = 2;
 const BRANCH_TAIL = 1;
 const branchNameChip = (entry, rowBg) => {
   if (entry.current) {
     return {
       nameFg: THEME.mutedFg,
-      wrapFg: THEME.mutedFg,
       nameBg: THEME.currentBg,
       nameBold: false,
     };
@@ -45,14 +45,12 @@ const branchNameChip = (entry, rowBg) => {
   if (entry.isDefault) {
     return {
       nameFg: THEME.warnFg,
-      wrapFg: THEME.mutedFg,
       nameBg: rowBg,
       nameBold: true,
     };
   }
   return {
     nameFg: THEME.buttonHotFg,
-    wrapFg: THEME.mutedFg,
     nameBg: rowBg,
     nameBold: false,
   };
@@ -65,15 +63,21 @@ const branchRowFg = (entry, selected) => {
 
 const branchRowFields = (entry) => {
   const sha = entry.sha ?? '';
-  const date = entry.date ?? '';
+  const date = shortAge(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 branchRowBg = (entry, selected) => {
+  if (entry.current) return THEME.currentBg;
+  if (selected) return THEME.buttonBg;
+  return THEME.ctxBg;
+};
+
 const paintBranchRow = (entry, width, color, selected, cols) => {
-  const inner = Math.max(1, width - BRANCH_EDGE - BRANCH_TAIL);
+  const inner = Math.max(1, width - BRANCH_TAIL);
   const mark = selected ? FILE_MARK : ' ';
   const prefix = ` ${mark} `;
   const parts = padColumns(branchRowFields(entry), cols, BRANCH_COL_ALIGN);
@@ -91,35 +95,23 @@ const paintBranchRow = (entry, width, color, selected, cols) => {
   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 chip = branchNameChip(entry, bgRgb);
-  const markFg = entry.current ? THEME.headerFg : fgRgb;
-  const markBg = entry.current ? THEME.currentBg : bgRgb;
+  const rowBg = branchRowBg(entry, selected);
+  const chip = branchNameChip(entry, rowBg);
+  const toneFg = entry.current ? THEME.headerFg : fgRgb;
   const tail = ' '.repeat(BRANCH_TAIL);
-  const edge = fill(BRANCH_EDGE, fgRgb, THEME.ctxBg, color);
-  if (!color) return `${left}${suffix}${tail}${edge}`;
-  let out = `${seq(fgRgb, bgRgb)}${EL}`;
-  out += paint(prefix, fgRgb, bgRgb, color);
-  out += paintBracketName(
-    label,
-    chip.nameFg,
-    chip.wrapFg,
-    chip.nameBg,
-    color,
-    chip.nameBold,
-  );
-  out += paint(after, markFg, markBg, color);
+  if (!color) return `${left}${suffix}${tail}`;
+  let out = `${seq(toneFg, rowBg)}${EL}`;
+  out += paint(prefix, toneFg, rowBg, color);
+  out += paint(label, chip.nameFg, chip.nameBg, color, chip.nameBold);
+  out += paint(after, toneFg, rowBg, color);
   const tones = entry.current
     ? { ...BRANCH_COL_FG, ...BRANCH_CURRENT_COL_FG }
     : BRANCH_COL_FG;
-  out += paintColumns(parts, cols, markFg, markBg, color, tones);
-  out += paint(tail, markFg, markBg, color);
-  return out + edge;
+  out += paintColumns(parts, cols, toneFg, rowBg, color, tones);
+  out += paint(tail, toneFg, rowBg, color);
+  return out;
 };
 
-const paintBranchEdit = (compose, width, color) =>
-  paintListEdit(compose, width, color, BRANCH_EDGE);
-
 const paintBodyBranches = (view, width, color, bodyH, headerLines) => {
   const branches = view.branches ?? [];
   const cols = measureColumns(branches, branchRowFields, BRANCH_COL_ALIGN);
@@ -131,10 +123,10 @@ const paintBodyBranches = (view, width, color, bodyH, headerLines) => {
   const cursor = view.branchCursor ?? 0;
   const compose = view.compose;
   const editing = compose && compose.kind === 'branch';
-  const tail = editing ? paintBranchEdit(compose, width, color) : null;
+  const tail = editing ? paintListEdit(compose, width, color) : null;
   const paintRow = (entry, rowWidth, rowColor, selected) =>
     paintBranchRow(entry, rowWidth, rowColor, selected, cols);
-  const painted = paintCursorList(
+  return paintCursorList(
     branches,
     cursor,
     width,
@@ -145,14 +137,6 @@ const paintBodyBranches = (view, width, color, bodyH, headerLines) => {
     tail,
     view.listScroll,
   );
-  return paneResult({
-    body: painted.body,
-    fileHits: painted.fileHits,
-    todoOwners: [],
-    cursor: painted.cursor,
-    splitBody: false,
-    listScroll: painted.offset,
-  });
 };
 
 module.exports = { paintBodyBranches };

package/lib/render/chrome.js

@@ -5,26 +5,38 @@ const keys = require('../keys.js');
 const files = require('../files.js');
 const primitives = require('./primitives.js');
 
-const { itemPath, TODO_FILE, isTodosEntry, fileTotals } = files;
+const { itemPath, REPO_TODOS_LABEL, isTodosEntry, fileTotals } = files;
 const { ACTION_IDS, BRANCH_ACTIONS, COMMIT_ACTIONS, actionLetter } = keys;
 const { buttonWord } = keys;
 const { FILES_HIDDEN, FILES_GIT_DISABLED, BRANCHES_DISABLED } = keys;
 const { COMMITS_DISABLED, TODO_DISABLED, DIFF_DISABLED, UNIT_DISABLED } = keys;
+const { NPM_DISABLED } = keys;
 const { diffGitDisabled, branchGitDisabled, commitGitDisabled } = keys;
 const { CONFIRM, confirmPrefix, promptFromChoices } = keys;
 const { THEME, paint, visibleWidth } = ansi;
 const { truncateVisible, fg, RESET, EL, seq } = ansi;
-const { fill, branchLabel, paintBracketName } = primitives;
+const { fill, branchLabel } = primitives;
 
 const HEADER_ROLE_FG = {
   repo: THEME.headerRepoFg,
   dir: THEME.headerDirFg,
   slash: THEME.headerSlashFg,
   file: THEME.headerFileFg,
-  meta: THEME.headerMetaFg,
 };
 
-const BUSY_BAR = ['▰▰▱▱▱▱', '▱▰▰▱▱▱', '▱▱▰▰▱▱', '▱▱▱▰▰▱', '▱▱▱▱▰▰', '▰▱▱▱▱▰'];
+const WAVE = '·•●•·';
+
+const busyBars = (wave) => {
+  const n = wave.length;
+  const frames = new Array(n);
+  for (let frame = 0; frame < n; frame++) {
+    const start = (n - frame) % n;
+    frames[frame] = wave.slice(start) + wave.slice(0, start);
+  }
+  return frames;
+};
+
+const BUSY_BAR = busyBars(WAVE);
 const BUSY_PROGRESS = [
   'pulling',
   'pushing',
@@ -34,6 +46,7 @@ const BUSY_PROGRESS = [
   'npm i',
   'npm uninstall',
   'npm audit fix',
+  'running',
   'checking out',
   'creating branch',
   'rebasing',
@@ -105,21 +118,12 @@ const dropPrompt = (name) => ` drop ${name}? y/n`;
 const PUSH_REJECT_PREFIX = CONFIRM.confirmPush.prefix;
 const PUSH_PROMPT = `${PUSH_REJECT_PREFIX} force push`;
 
+const BUTTON_LEAD = ' ';
 const BUTTON_GAP = '  ';
+const BUTTON_EDGE = 1;
+const buttonGap = (index) => (index ? BUTTON_GAP : BUTTON_LEAD);
 const LOGO = '👁️';
 
-const ORIGIN_LABEL = {
-  commit: (view) => view.revShort || 'commit',
-  pr: (view) => view.sourceLabel || 'pr',
-  todo: () => 'todo',
-};
-
-const originLabel = (origin, view) => {
-  const named = ORIGIN_LABEL[origin];
-  if (named) return named(view);
-  return origin ?? 'unknown';
-};
-
 const pathSegments = (rel) => {
   const segs = [];
   if (!rel) return segs;
@@ -137,126 +141,59 @@ const pathSegments = (rel) => {
   return segs;
 };
 
-const headerTarget = (view) => {
-  const pane = view.pane ?? 'diff';
-  if (pane === 'files') {
-    const files = view.files ?? [];
-    const cursor = view.fileCursor ?? 0;
-    const entry = files[cursor];
-    const total = files.length;
-    const n = total ? cursor + 1 : 0;
-    if (!entry) return { path: '', origin: '', n, total };
-    if (isTodosEntry(entry)) {
-      return { path: TODO_FILE, origin: 'todo', 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 (pane === 'commits') {
-    const compose = view.compose;
-    const commits = view.commits ?? [];
-    if (compose && compose.kind === 'commit') {
-      const path = `${compose.text || ''}`.replaceAll('\n', ' ');
-      if (compose.commitKind === 'amend' || compose.commitKind === 'reword') {
-        const cursor = view.commitCursor ?? 0;
-        const entry = commits[cursor];
-        const total = commits.length;
-        const n = total ? cursor + 1 : 0;
-        if (!entry) return { path, origin: 'commit', n, total };
-        const origin = entry.head ? 'HEAD' : 'commit';
-        return { path, origin, n, total };
-      }
-      const total = commits.length + 1;
-      return { path, origin: 'new', n: 1, total };
-    }
-    const cursor = view.commitCursor ?? 0;
-    const entry = commits[cursor];
-    const total = commits.length;
-    const n = total ? cursor + 1 : 0;
-    if (!entry) return { path: '', origin: 'commit', n, total };
-    const origin = entry.head ? 'HEAD' : 'commit';
-    return { path: entry.subject ?? '', origin, n, total };
-  }
-  if (pane === 'unit') {
-    const path = view.reviewPath ?? '';
-    const lines = view.unitLines ?? [];
-    const top = Math.max(0, (view.scroll ?? 0) - 1);
-    const n = lines.length ? Math.min(lines.length, top + 1) : 0;
-    const origin = view.item ? originLabel(view.item.origin, view) : 'unit';
-    return { path, origin, n, total: lines.length };
-  }
-  if (!view.item) return { path: '', origin: '', n: 0, total: view.total ?? 0 };
-  if (view.item.origin === 'todo') {
-    return { path: TODO_FILE, origin: 'todo', n: 1, total: 1 };
-  }
-  return {
-    path: itemPath(view.item),
-    origin: originLabel(view.item.origin, view),
-    n: view.index + 1,
-    total: view.total,
-  };
-};
-
 const headerScreen = (view) => {
   const pane = view.pane ?? 'diff';
   if (pane === 'branches') return 'branches';
-  if (pane === 'commits') return 'commits';
+  if (pane === 'commits') {
+    const mode = view.commitView === 'full' ? 'full' : 'brief';
+    return `commits ${mode}`;
+  }
+  if (pane === 'npm') return 'npm';
   if (pane === 'files') {
     const files = view.files ?? [];
     const entry = files[view.fileCursor ?? 0];
-    if (isTodosEntry(entry)) return TODO_FILE;
+    if (isTodosEntry(entry)) return REPO_TODOS_LABEL;
     return '';
   }
-  if (view.item && view.item.origin === 'todo') return TODO_FILE;
+  if (view.item && view.item.origin === 'todo') return REPO_TODOS_LABEL;
   return '';
 };
 
-const headerLabel = (view, target) => headerScreen(view) || target.path;
+const headerTarget = (view) => {
+  const pane = view.pane ?? 'diff';
+  if (pane === 'files') {
+    const entry = (view.files ?? [])[view.fileCursor ?? 0];
+    if (!entry || isTodosEntry(entry)) return '';
+    return entry.path;
+  }
+  if (pane === 'unit') return view.reviewPath ?? '';
+  if (!view.item || view.item.origin === 'todo') return '';
+  return itemPath(view.item);
+};
+
+const headerLabel = (view) => headerScreen(view) || headerTarget(view);
 
 const headerSep = (view) => (headerScreen(view) ? ': ' : '/');
 
-const headerPrefix = (view) => {
+const headerPrefix = (view, label) => {
   const repo = view.repoName || '';
-  const target = headerTarget(view);
-  const label = headerLabel(view, target);
   if (repo && label) return ` ${LOGO}  reslop: ${repo}${headerSep(view)}`;
   if (repo) return ` ${LOGO}  reslop: ${repo} `;
   return ` ${LOGO}  reslop: `;
 };
 
-const headerSuffix = ({ origin, n, total }) =>
-  origin ? ` ${origin} ${n}/${total}` : ` ${n}/${total}`;
-
 const headerText = (view) => {
-  const prefix = headerPrefix(view);
-  const target = headerTarget(view);
-  const label = headerLabel(view, target);
-  return `${prefix}${label}${headerSuffix(target)}`;
+  const label = headerLabel(view);
+  return `${headerPrefix(view, label)}${label}`;
 };
 
 const headerPieces = (view, width) => {
   const repo = view.repoName || '';
-  const target = headerTarget(view);
-  const path = headerLabel(view, target);
-  const suffix = headerSuffix(target);
+  const path = headerLabel(view);
   const right = ' ';
   const chrome = ` ${LOGO}  reslop: `;
-  const prefixW = visibleWidth(headerPrefix(view));
-  const used = prefixW + visibleWidth(suffix) + visibleWidth(right);
+  const prefixW = visibleWidth(headerPrefix(view, path));
+  const used = prefixW + visibleWidth(right);
   const room = Math.max(0, width - used);
   const clipped = truncateVisible(path, room);
   const pad = Math.max(0, room - visibleWidth(clipped));
@@ -277,7 +214,6 @@ const headerPieces = (view, width) => {
   if (pad) {
     pieces.push({ text: ' '.repeat(pad), role: 'chrome' });
   }
-  pieces.push({ text: suffix, role: 'meta' });
   pieces.push({ text: right, role: 'chrome' });
   return pieces;
 };
@@ -340,6 +276,7 @@ const layoutButtons = (width, compact, hidden, extra, disabled) => {
       for (const add of extraIds) {
         if (!ids.includes(add)) ids.push(add);
       }
+      continue;
     }
     if (hiddenIds.includes(id)) continue;
     ids.push(id);
@@ -348,13 +285,15 @@ const layoutButtons = (width, compact, hidden, extra, disabled) => {
     const hits = [];
     const parts = [];
     let x = 0;
+    const limit = Math.max(0, width - BUTTON_EDGE);
     for (const id of ids) {
       const letter = actionLetter(id);
       const word = buttonWord(id);
       const label = short ? letter : word;
-      const piece = `${BUTTON_GAP}${label}`;
+      const gap = buttonGap(parts.length);
+      const piece = `${gap}${label}`;
       const w = visibleWidth(piece);
-      if (x + w > width && parts.length) break;
+      if (x + w > limit && parts.length) break;
       const off = disabledIds.includes(id);
       if (!off) hits.push({ id, x0: x, x1: x + w });
       parts.push({ action: { id }, piece, letter, label, disabled: off });
@@ -373,8 +312,10 @@ const paintButtons = (layout, width, color) => {
   let used = 0;
   const fgRgb = THEME.buttonFg;
   const bgRgb = THEME.buttonBg;
-  for (const part of layout.parts) {
-    out += paint(BUTTON_GAP, fgRgb, bgRgb, color);
+  for (let i = 0; i < layout.parts.length; i++) {
+    const part = layout.parts[i];
+    const gap = buttonGap(i);
+    out += paint(gap, fgRgb, bgRgb, color);
     if (part.disabled) out += paint(part.label, fgRgb, bgRgb, color);
     else out += paintMarkedWord(part.label, part.letter, color, BUTTON_MARK);
     used += visibleWidth(part.piece);
@@ -456,7 +397,9 @@ const statusStats = (view) => {
   const fallbackN = counts.staged ?? 0;
   const n = hasGit ? total.staged : fallbackN;
   const m = hasGit ? total.remaining : counted;
-  return joinStatus([statusDelta(total), `${n}/${m}`]);
+  const git = joinStatus([statusDelta(total), `${n}/${m}`]);
+  if (!view.npmLogs) return git;
+  return joinStatus([view.npmLogs, git]);
 };
 
 const statusLayout = (view, status, width) => {
@@ -512,14 +455,11 @@ const paintChoicePrompt = (choices, width, color, prefix = '') => {
   return out + fill(pad, THEME.mutedFg, bgRgb, color);
 };
 
-const STATUS_MARK = /(\[[^\]]+\]|\+[0-9]+(?:\/[0-9]+)?|-[0-9]+(?:\/[0-9]+)?)/g;
+const STATUS_MARK = /(\+[0-9]+(?:\/[0-9]+)?|-[0-9]+(?:\/[0-9]+)?)/g;
+const OLD_LOGS = /old logs \S+/;
 
 const paintStatusMark = (token, color) => {
   const bgRgb = THEME.chromeBg;
-  const muted = THEME.mutedFg;
-  if (token.startsWith('[')) {
-    return paintBracketName(token, THEME.buttonHotFg, muted, bgRgb, color);
-  }
   if (token.startsWith('+')) {
     return paint(token, THEME.addLineFg, bgRgb, color);
   }
@@ -530,6 +470,18 @@ const paintStatusLeft = (text, color) => {
   const bgRgb = THEME.chromeBg;
   const muted = THEME.mutedFg;
   if (!color) return text;
+  const found = text.match(OLD_LOGS);
+  if (found) {
+    const at = found.index;
+    const token = found[0];
+    const before = text.slice(0, at);
+    const after = text.slice(at + token.length);
+    return (
+      paintStatusLeft(before, color) +
+      paint(token, THEME.shaFg, bgRgb, color) +
+      paintStatusLeft(after, color)
+    );
+  }
   let out = '';
   let last = 0;
   for (const match of text.matchAll(STATUS_MARK)) {
@@ -547,6 +499,68 @@ const paintStatusLeft = (text, color) => {
   return out;
 };
 
+const paintBranchHead = (text, branch, color) => {
+  const name = branchLabel(branch);
+  if (!name || !text.startsWith(' ')) return null;
+  const head = ` ${name}`;
+  const shown = text.startsWith(head) ? name : text.slice(1);
+  if (!shown || !name.startsWith(shown)) return null;
+  const rest = text.slice(1 + shown.length);
+  const bgRgb = THEME.chromeBg;
+  return (
+    paint(' ', THEME.mutedFg, bgRgb, color) +
+    paint(shown, THEME.buttonHotFg, bgRgb, color, true) +
+    paintStatusLeft(rest, color)
+  );
+};
+
+const SAVE_HINT = 'Press **Ctrl-S** or **Enter** at EOF to save';
+const HINT_HOT_FG = 0xff;
+
+const hintParts = (source) => {
+  const bits = source.split('**');
+  const parts = [];
+  for (let i = 0; i < bits.length; i++) {
+    if (!bits[i]) continue;
+    parts.push({ text: bits[i], hot: i % 2 === 1 });
+  }
+  return parts;
+};
+
+const saveHintText = () => SAVE_HINT.replaceAll('**', '');
+
+const commitSaveHint = (view) => {
+  if (view.mode !== 'compose' || view.commitView !== 'full') return false;
+  const compose = view.compose;
+  return Boolean(compose && compose.kind === 'commit');
+};
+
+const paintSaveHintBar = (width, color) => {
+  const bgRgb = THEME.buttonBg;
+  const plain = `${BUTTON_LEAD}${saveHintText()}`;
+  if (!color) {
+    const pad = Math.max(0, width - visibleWidth(plain));
+    return plain + ' '.repeat(pad);
+  }
+  let out = paint(BUTTON_LEAD, THEME.buttonFg, bgRgb, color);
+  for (const part of hintParts(SAVE_HINT)) {
+    const tone = part.hot ? HINT_HOT_FG : THEME.buttonFg;
+    out += paint(part.text, tone, bgRgb, color, part.hot);
+  }
+  const pad = Math.max(0, width - visibleWidth(plain));
+  return out + fill(pad, THEME.buttonFg, bgRgb, color);
+};
+
+const paintFooter = (view, layout, width, color) => {
+  if (commitSaveHint(view)) return paintSaveHintBar(width, color);
+  return paintButtons(layout, width, color);
+};
+
+const footerHits = (view, layout) => {
+  if (commitSaveHint(view)) return [];
+  return layout.hits;
+};
+
 const paintStatusLine = (view, status, width, color) => {
   const confirm = CONFIRM[view.mode];
   if (confirm) {
@@ -560,8 +574,13 @@ const paintStatusLine = (view, status, width, color) => {
     return layout.clipped + leftGap + layout.msg + rightGap + layout.right;
   }
   const bgRgb = THEME.chromeBg;
+  const worktree = countsKind(view.sourceKind, view.revShort) === 'worktree';
+  const head = worktree
+    ? paintBranchHead(layout.clipped, view.branch, color)
+    : null;
+  const left = head ?? paintStatusLeft(layout.clipped, color);
   return (
-    paintStatusLeft(layout.clipped, color) +
+    left +
     paint(leftGap, THEME.mutedFg, bgRgb, color) +
     paint(layout.msg, layout.msgFg, bgRgb, color) +
     paint(rightGap, THEME.mutedFg, bgRgb, color) +
@@ -583,10 +602,10 @@ const statusBranchHit = (view, width, y) => {
   if (!branchLabel(branch)) return null;
   if (countsKind(view.sourceKind, view.revShort) !== 'worktree') return null;
   const layout = statusLayout(view, view.status ?? '', width);
-  const open = layout.clipped.indexOf('[');
-  const close = layout.clipped.indexOf(']');
-  if (open < 0 || close <= open) return null;
-  return { id: 'branch', y, x0: open, x1: close + 1 };
+  const name = branchLabel(branch);
+  const at = layout.clipped.indexOf(name);
+  if (at < 0) return null;
+  return { id: 'branch', y, x0: at, x1: at + visibleWidth(name) };
 };
 
 const selectedBranch = (view) => (view.branches ?? [])[view.branchCursor ?? 0];
@@ -599,6 +618,7 @@ const hiddenActions = (view) => {
   if (pane === 'unit') return UNIT_DISABLED;
   if (pane === 'branches') return BRANCHES_DISABLED;
   if (pane === 'commits') return COMMITS_DISABLED;
+  if (pane === 'npm') return NPM_DISABLED;
   if (view.item && view.item.origin === 'todo') return TODO_DISABLED;
   return DIFF_DISABLED;
 };
@@ -616,9 +636,18 @@ const dimFooterActions = (view) => {
   if (pane === 'commits') {
     const entry = selectedCommit(view);
     const staged = (view.counts?.staged ?? 0) > 0;
-    if (!entry) return commitGitDisabled({ canCommit: staged });
-    return commitGitDisabled({ ...entry, canCommit: staged });
+    const unstagedCurrent = !view.rev && !view.revShort;
+    return commitGitDisabled({
+      ...entry,
+      canCommit: staged,
+      unstagedCurrent,
+    });
+  }
+  if (pane === 'npm' && view.npmView) {
+    if (view.npmRunning) return ['npmRerun'];
+    return [];
   }
+  if (pane === 'npm' && !view.npmLogs) return ['npmLogs'];
   return [];
 };
 
@@ -626,10 +655,14 @@ const extraFooterActions = (view) => {
   const pane = view.pane ?? 'diff';
   if (pane === 'files') {
     const scope = view.fileScope === 'file' ? 'diff' : 'file';
-    return [scope, 'commit', 'pull', 'push'];
+    return ['npm', scope, 'commit', 'pull', 'push'];
   }
   if (pane === 'branches') return Object.keys(BRANCH_ACTIONS);
   if (pane === 'commits') return Object.keys(COMMIT_ACTIONS);
+  if (pane === 'npm') {
+    if (view.npmView) return ['npmStop', 'npmRerun'];
+    return ['npmEdit', 'npmNew', 'npmDrop', 'npmLogs'];
+  }
   return [];
 };
 
@@ -643,6 +676,8 @@ module.exports = {
   paintHeader,
   layoutButtons,
   paintButtons,
+  paintFooter,
+  footerHits,
   paintStatusLine,
   statusChoiceHits,
   statusBranchHit,