reslop 0.2.6 → 0.3.0

package/lib/render/packages.js

@@ -0,0 +1,89 @@
+'use strict';
+
+const { THEME, paint, visibleWidth } = require('../term/ansi.js');
+const { paintSegments } = require('./tiles.js');
+const { npmContent } = require('./dashboard/blocks.js');
+const primitives = require('./primitives.js');
+const { MARK_W, markPrefix, paintCursorList, fieldWindow, editSpan } =
+  primitives;
+
+const TILE = { key: 'n', title: 'npm' };
+const TAIL = 1;
+const LIST_PAD = 1;
+
+const paintMarginRow = (line, width, color, selected) => {
+  const bg = selected ? THEME.buttonBg : THEME.ctxBg;
+  const fg = selected ? THEME.chromeFg : THEME.mutedFg;
+  const inner = Math.max(1, width - MARK_W - TAIL);
+  const body = paintSegments(line, inner, bg, color);
+  const prefix = markPrefix(selected);
+  const tail = ' '.repeat(TAIL);
+  if (!color) return `${prefix}${body}${tail}`;
+  return paint(prefix, fg, bg, color) + body + paint(tail, fg, bg, color);
+};
+
+const paintPackageEdit = (compose, width, color) => {
+  const prefix = markPrefix(true);
+  const rest = Math.max(1, width - MARK_W - TAIL);
+  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 tail = ' '.repeat(TAIL);
+  const fg = THEME.chromeFg;
+  const bg = THEME.buttonBg;
+  let row = `${prefix}${win.text}${gap}${tail}`;
+  if (color) {
+    row = paint(prefix, fg, bg, color);
+    row += paint(win.text, THEME.buttonHotFg, bg, color);
+    row += paint(`${gap}${tail}`, fg, bg, 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 }] };
+};
+
+const paintBodyPackages = (view, width, color, bodyH, headerLines) => {
+  const ctx = { frame: view.progressFrame ?? 0 };
+  const inner = Math.max(1, width - MARK_W - TAIL);
+  const content = npmContent(view.packages, inner, null, ctx, TILE);
+  const headed = Boolean(content.titleLine) && content.lines.length > 0;
+  const rows = headed ? content.lines.slice(1) : content.lines;
+  const reserved = headed ? 1 : 0;
+  const last = Math.max(0, rows.length - 1);
+  const cursor = Math.min(view.packagesCursor ?? 0, last);
+  const pane = {
+    width,
+    color,
+    bodyH: Math.max(1, bodyH - reserved),
+    headerLines: headerLines + reserved,
+    offset: view.listScroll,
+  };
+  const paintRow = (line, selected) =>
+    paintMarginRow(line, width, color, selected);
+  const editing = view.compose && view.compose.kind === 'package';
+  let extra = null;
+  if (editing) {
+    const painted = paintPackageEdit(view.compose, width, color);
+    const at = 'index';
+    extra = { ...painted, at, index: cursor };
+  }
+  const painted = paintCursorList(rows, cursor, pane, paintRow, extra);
+  if (!headed) return painted;
+  const head = paintMarginRow(content.lines[0], width, color, false);
+  const body = painted.body.slice();
+  const pad = pane.bodyH >= LIST_PAD * 2 + 1 ? LIST_PAD : 0;
+  body.splice(pad, 0, head);
+  const nudge = (point) => {
+    if (!point || point.row < pad) return point;
+    return { ...point, row: point.row + 1 };
+  };
+  return {
+    ...painted,
+    body,
+    editHits: painted.editHits.map(nudge),
+    cursor: nudge(painted.cursor),
+  };
+};
+
+module.exports = { paintBodyPackages };

package/lib/render/primitives.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const ansi = require('../ansi.js');
-const actions = require('../session/actions.js');
+const { clamp, trimText } = require('../common/utilities.js');
+const ansi = require('../term/ansi.js');
+const { LIST_PANES } = require('../input/actions.js');
 
 const { THEME, paint, visibleWidth, graphemes, graphemeWidth } = ansi;
-const { LIST_PANES } = actions;
 
 const GUTTER_W = 2;
 const FILE_MARK = '▶';
@@ -17,11 +17,14 @@ const fill = (width, fgRgb, bgRgb, color) =>
 
 const markPrefix = (selected) => ` ${selected ? FILE_MARK : ' '} `;
 
-const isListPane = (pane) => LIST_PANES.includes(pane) || pane === 'dashboard';
+const isListPane = (pane) => {
+  if (LIST_PANES.includes(pane)) return true;
+  return pane === 'dashboard' || pane === 'repos';
+};
 
 const isTaskView = (view) => view.item?.origin === 'task';
 
-const branchLabel = (name) => `${name ?? ''}`.trim();
+const branchLabel = (name) => trimText(name);
 
 const padVisible = (text, width, align) => {
   const gap = ' '.repeat(Math.max(0, width - visibleWidth(text)));
@@ -45,6 +48,11 @@ const paintBodyFill = (width, color, kind) => {
   return ctx(leftW) + paintSplitRule(color) + ctx(rightW);
 };
 
+const lazyRows = (length, paint) => ({ length, paint });
+
+const bodyRow = (body, index) =>
+  Array.isArray(body) ? body[index] : body.paint(index);
+
 const paneResult = (fields = {}) => ({
   body: fields.body ?? [],
   fileHits: fields.fileHits ?? [],
@@ -54,6 +62,7 @@ const paneResult = (fields = {}) => ({
   splitBody: fields.splitBody === true,
   listScroll: fields.listScroll ?? 0,
   editHits: fields.editHits ?? [],
+  scrollBar: fields.scrollBar ?? null,
 });
 
 const editSpan = (x0, textX, x1, start, text) => ({
@@ -78,7 +87,7 @@ const listWindowStart = (focus, offset, listH, count) => {
   let start = offset ?? 0;
   if (focus < start) start = focus;
   if (focus >= start + listH) start = focus - listH + 1;
-  return Math.max(0, Math.min(start, count - listH));
+  return clamp(start, 0, count - listH);
 };
 
 const rowCursor = (cursor, row) => {
@@ -89,10 +98,11 @@ const rowCursor = (cursor, row) => {
 
 const paintListWindow = (count, focus, pane, lineAt) => {
   const { width, color, bodyH, headerLines, offset } = pane;
-  const pad = bodyH >= LIST_PAD * 2 + 1 ? LIST_PAD : 0;
+  const padded = bodyH >= LIST_PAD * 2 + 1 ? LIST_PAD : 0;
+  const pad = pane.pad === 0 ? 0 : padded;
   const listH = bodyH - pad * 2;
   const start = listWindowStart(focus, offset, listH, count);
-  const blank = paintBodyFill(width, color, 'files');
+  const blank = pane.blank ?? paintBodyFill(width, color, 'files');
   const body = pad ? [blank] : [];
   const fileHits = [];
   const editHits = [];
@@ -104,18 +114,38 @@ const paintListWindow = (count, focus, pane, lineAt) => {
     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 y = headerLines + pad + i + 1;
+      for (const span of line.spans ?? []) {
+        fileHits.push({ y, cursor: line.index, ...span });
+      }
+      fileHits.push({ y, cursor: line.index });
     }
   }
   if (pad) body.push(blank);
   return paneResult({ body, fileHits, editHits, cursor, listScroll: start });
 };
 
+const insertedAt = (extra, count) => {
+  if (extra.at === 'start') return 0;
+  if (extra.at !== 'index') return count;
+  const index = extra.index ?? count;
+  return clamp(index, 0, count);
+};
+
+const lineFromPaint = (painted, index) => {
+  if (typeof painted === 'string') return listLine(painted, index);
+  const line = listLine(painted.row, index);
+  if (painted.hit === false) line.hit = false;
+  if (painted.spans) line.spans = painted.spans;
+  return line;
+};
+
 const paintCursorList = (items, cursor, pane, paintRow, extra = null) => {
   const lineAt = (index) => {
     const entry = items[index];
     if (!entry) return null;
-    return listLine(paintRow(entry, !extra && index === cursor), index);
+    const selected = !extra && index === cursor;
+    return lineFromPaint(paintRow(entry, selected, index), index);
   };
   if (!extra) return paintListWindow(items.length, cursor, pane, lineAt);
   const edit = listLine(extra.row, -1, extra.cursor, extra.edits);
@@ -124,10 +154,12 @@ const paintCursorList = (items, cursor, pane, paintRow, extra = null) => {
     const replaced = (i) => (i === at ? edit : lineAt(i));
     return paintListWindow(items.length, at, pane, replaced);
   }
-  const first = extra.at === 'start';
-  const at = first ? 0 : items.length;
-  const shift = first ? 1 : 0;
-  const inserted = (i) => (i === at ? edit : lineAt(i - shift));
+  const at = insertedAt(extra, items.length);
+  const inserted = (i) => {
+    if (i === at) return edit;
+    const index = i < at ? i : i - 1;
+    return lineAt(index);
+  };
   return paintListWindow(items.length + 1, at, pane, inserted);
 };
 
@@ -156,7 +188,7 @@ const sliceVisible = (text, skip, width) => {
 
 const fieldWindow = (text, cursor, scroll, width) => {
   if (width <= 0) return { text: '', col: 0, scroll: 0 };
-  const at = Math.max(0, Math.min(cursor ?? 0, text.length));
+  const at = clamp(cursor ?? 0, 0, text.length);
   const col = visibleWidth(text.slice(0, at));
   let next = Math.max(0, scroll ?? 0);
   if (col < next) next = col;
@@ -206,10 +238,67 @@ const paintColumns = (parts, widths, fgRgb, bgRgb, color, tones) => {
   return text;
 };
 
+const paintPathText = (text, fg, bg, color, bold, spans) => {
+  if (!spans.length) return paint(text, fg, bg, color, bold);
+  let out = '';
+  let at = 0;
+  for (const span of spans) {
+    if (span.start > at) {
+      out += paint(text.slice(at, span.start), fg, bg, color, bold);
+    }
+    const on = span.on === true;
+    const markFg = on ? THEME.searchOnFg : THEME.searchFg;
+    const markBg = on ? THEME.searchOnBg : THEME.searchBg;
+    const slice = text.slice(span.start, span.end);
+    out += paint(slice, markFg, markBg, color, true);
+    at = span.end;
+  }
+  if (at < text.length) out += paint(text.slice(at), fg, bg, color, bold);
+  return out;
+};
+
+const scrollThumb = (count, inner, start) => {
+  if (count <= inner || inner < 1) return null;
+  let size = Math.max(1, Math.round((inner * inner) / count));
+  if (inner > 1) size = Math.min(size, inner - 1);
+  const travel = inner - size;
+  const maxStart = count - inner;
+  const at = maxStart <= 0 ? 0 : Math.round((start * travel) / maxStart);
+  return { size, travel, maxStart, at };
+};
+
+const scrollMark = (index, count, inner, start) => {
+  const thumb = scrollThumb(count, inner, start);
+  if (!thumb) return '';
+  const end = thumb.at + thumb.size;
+  if (index >= thumb.at && index < end) return 'thumb';
+  return 'track';
+};
+
+const scrollAtThumb = (top, thumb) => {
+  if (!thumb || thumb.travel <= 0) return 0;
+  const at = clamp(top, 0, thumb.travel);
+  return Math.round((at * thumb.maxStart) / thumb.travel);
+};
+
+const placeHits = (hits, origin, width, side) => {
+  const placed = [];
+  for (const hit of hits) {
+    const x0 = (hit.x0 ?? 0) + origin;
+    const x1 = (hit.x1 ?? width) + origin;
+    placed.push({ ...hit, x0, x1, side });
+  }
+  return placed;
+};
+
 module.exports = {
+  scrollThumb,
+  scrollMark,
+  scrollAtThumb,
+  placeHits,
   GUTTER_W,
-  FILE_MARK,
   MARK_W,
+  LIST_PAD,
   fill,
   markPrefix,
   isListPane,
@@ -220,8 +309,11 @@ module.exports = {
   paintSplitRule,
   paintBodyFill,
   paneResult,
+  lazyRows,
+  bodyRow,
   editSpan,
   listLine,
+  listWindowStart,
   paintListWindow,
   paintCursorList,
   sliceVisible,
@@ -230,4 +322,5 @@ module.exports = {
   padColumns,
   joinColumns,
   paintColumns,
+  paintPathText,
 };

package/lib/render/render.js

@@ -1,16 +1,11 @@
 'use strict';
 
-const chrome = require('./chrome.js');
-const notes = require('./notes.js');
-const diff = require('./diff.js');
-const present = require('./present.js');
-const frame = require('./frame.js');
-
-const { formatBusyStatus, headerText, layoutButtons } = chrome;
-const { todoBodyWidth, noteInnerWidth } = notes;
-const { paintDiffLine, codeInnerWidth } = diff;
-const { presentCursor, presentRows } = present;
-const { renderFrame } = frame;
+const { formatBusyStatus } = require('./status.js');
+const { headerText } = require('./header.js');
+const { layoutButtons } = require('./footer.js');
+const { todoBodyWidth, noteInnerWidth } = require('./notes.js');
+const { paintDiffLine, codeInnerWidth, activeDigits } = require('./diff.js');
+const { renderFrame, presentCursor, presentRows } = require('./frame.js');
 
 module.exports = {
   formatBusyStatus,
@@ -20,6 +15,7 @@ module.exports = {
   noteInnerWidth,
   paintDiffLine,
   codeInnerWidth,
+  activeDigits,
   renderFrame,
   presentCursor,
   presentRows,

package/lib/render/repos.js

@@ -0,0 +1,214 @@
+'use strict';
+
+const { THEME } = require('../term/ansi.js');
+const { paintBodyFill, paneResult } = require('./primitives.js');
+const tiles = require('./tiles.js');
+const { RUN_ICON } = tiles;
+const { seg, spinner, equalGrid, pageWindow, placeEqualTiles } = tiles;
+const { paintTile, composeBands, tileHits, pageFill } = tiles;
+const { segmentsWidth, clipSegments, blinkTone } = tiles;
+const { size } = require('../common/format.js');
+const { isHot } = require('./table.js');
+
+const REPO_MIN_H = 6;
+const MARGIN_MIN_H = 12;
+const EXT_LIMIT = 3;
+const DIM_BACKS = {
+  head: THEME.dashDimHeadBg,
+  tile: THEME.dashDimTileBg,
+  row: THEME.dashDimRowBg,
+};
+const extName = (key) => {
+  const text = `${key ?? ''}`;
+  if (!text || text === '(none)') return 'none';
+  return text.startsWith('.') ? text.slice(1) : text;
+};
+
+const spin = (frame) => seg(spinner(frame), 'warn', true);
+
+const rowPending = (row) => {
+  if (!row.filesReady || !row.commitsReady) return true;
+  if (!row.diffReady || !row.tasksReady) return true;
+  return !row.runsReady || !row.npmReady;
+};
+
+const fitAside = (left, right, width) => {
+  const rightW = segmentsWidth(right);
+  const room = Math.max(0, width - rightW - 1);
+  const clipped = clipSegments(left, room);
+  const gap = Math.max(1, width - segmentsWidth(clipped) - rightW);
+  return [...clipped, seg(' '.repeat(gap)), ...right];
+};
+
+const titleLine = (row, ctx, selected, width) => {
+  const hot = isHot(row.activityAt, ctx.now);
+  const tone = hot ? blinkTone(ctx.frame) : 'text';
+  const left = [seg(row.name, tone, selected || hot)];
+  if (hot) left.push(seg(' ●', tone, true));
+  const right = [];
+  if (rowPending(row)) right.push(spin(ctx.frame), seg(' '));
+  const label = row.filesReady ? size(row.bytes) : '…';
+  const sizeTone = row.filesReady ? 'text' : 'muted';
+  right.push(seg(label, sizeTone, row.filesReady));
+  return fitAside(left, right, width);
+};
+
+const extLine = (row, ctx) => {
+  if (!row.filesReady) return [spin(ctx.frame)];
+  const exts = row.exts.slice(0, EXT_LIMIT);
+  if (!exts.length) return [seg('no files', 'muted')];
+  const segs = [];
+  for (let i = 0; i < exts.length; i++) {
+    if (i) segs.push(seg('  '));
+    segs.push(seg(extName(exts[i].key), 'sha'));
+    segs.push(seg(` ${size(exts[i].bytes)}`, 'text'));
+  }
+  return segs;
+};
+
+const countValue = (ready, text, frame) =>
+  ready ? seg(text, 'text', true) : spin(frame);
+
+const countLine = (row, ctx) => [
+  seg('tasks: ', 'muted'),
+  countValue(row.tasksReady, `${row.tasksDone}/${row.tasks}`, ctx.frame),
+  seg('   commits: ', 'muted'),
+  countValue(row.commitsReady, `${row.commits}`, ctx.frame),
+];
+
+const resultNote = (run) => {
+  const result = run.result;
+  if (!result) return [];
+  if (typeof result.tests === 'number') {
+    const note = [seg(` ${result.tests}`, 'muted')];
+    if (result.failed) note.push(seg(` ${result.failed} fail`, 'error'));
+    return note;
+  }
+  if (typeof result.errors === 'number') {
+    return [seg(` ${result.errors} err`, result.errors ? 'error' : 'muted')];
+  }
+  return [];
+};
+
+const runLine = (row, ctx) => {
+  if (!row.runsReady) return [seg('run: ', 'muted'), spin(ctx.frame)];
+  const run = row.run;
+  if (!run) return [seg('run: ', 'muted'), seg('idle', 'muted')];
+  if (run.status === 'running') {
+    const seen = run.done + run.failed;
+    const total = run.expected > 0 ? `/${run.expected}` : '';
+    const fail = run.failed ? ` ${run.failed} fail` : '';
+    return [
+      seg(`${spinner(ctx.frame)} `, 'warn', true),
+      seg(run.name || 'run', 'text'),
+      seg(` ${seen}${total}${fail}`, 'warn'),
+    ];
+  }
+  const icon = RUN_ICON[run.status] ?? ['?', 'muted'];
+  return [
+    seg(`${icon[0]} `, icon[1], true),
+    seg(run.name || 'run', 'text'),
+    seg(` ${run.status}`, icon[1]),
+    ...resultNote(run),
+  ];
+};
+
+const npmLine = (row, ctx) => {
+  if (!row.npmReady) return [seg('deps: ', 'muted'), spin(ctx.frame)];
+  const npm = row.npm;
+  if (!npm || !npm.hasManifest) return [seg('no package.json', 'muted')];
+  const modules = npm.modules || { count: 0, bytes: 0 };
+  const segs = [
+    seg('deps: ', 'muted'),
+    seg(`${npm.deps}`, 'text'),
+    seg('  dev: ', 'muted'),
+    seg(`${npm.dev}`, 'text'),
+    seg('  all: ', 'muted'),
+    seg(`${modules.count}`, 'text'),
+    seg(' (', 'muted'),
+    seg(size(modules.bytes), 'text'),
+    seg(')', 'muted'),
+  ];
+  if (npm.audit) {
+    segs.push(
+      seg('  '),
+      seg('🚨 ', 'error'),
+      seg(`${npm.audit}`, 'error', true),
+    );
+  }
+  if (npm.outdated) {
+    segs.push(
+      seg('  '),
+      seg('⚠️ ', 'warn'),
+      seg(`${npm.outdated}`, 'warn', true),
+    );
+  }
+  return segs;
+};
+
+const diffLine = (row, ctx) => {
+  if (!row.diffReady) return [seg('diff: ', 'muted'), spin(ctx.frame)];
+  const diff = row.diff;
+  const added = diff.stagedAdded + diff.unstagedAdded;
+  const removed = diff.stagedRemoved + diff.unstagedRemoved;
+  return [
+    seg('diff: ', 'muted'),
+    seg(`+${diff.stagedAdded}/${added}`, 'add'),
+    seg('  '),
+    seg(`-${diff.stagedRemoved}/${removed}`, 'del'),
+  ];
+};
+
+const repoContent = (row, ctx, selected, width) => ({
+  titleLine: titleLine(row, ctx, selected, width),
+  lines: [
+    extLine(row, ctx),
+    countLine(row, ctx),
+    runLine(row, ctx),
+    diffLine(row, ctx),
+    npmLine(row, ctx),
+  ],
+});
+
+const paintRepos = (model, bands, color) => {
+  const painted = new Map();
+  const ctx = { now: model.now, frame: model.frame };
+  const selected = model.tiles[model.cursor];
+  const selectedId = selected ? selected.id : '';
+  for (const band of bands) {
+    for (const place of band.tiles) {
+      const row = model.tiles.find((tile) => tile.id === place.id);
+      if (!row) continue;
+      const tile = { id: row.id, key: '', title: row.name };
+      const inner = Math.max(0, place.w - 2);
+      const picked = row.id === selectedId;
+      const content = repoContent(row, ctx, picked, inner);
+      const backs = picked ? null : DIM_BACKS;
+      const rows = paintTile(tile, content, place.w, band.h, color, backs);
+      painted.set(place.id, rows);
+    }
+  }
+  return painted;
+};
+
+const paintBodyRepos = (view, width, color, bodyH, headerLines) => {
+  const model = view.repos;
+  if (!model || !model.tiles.length) {
+    const blank = paintBodyFill(width, color, 'files');
+    return paneResult({ body: new Array(bodyH).fill(blank) });
+  }
+  const margin = bodyH >= MARGIN_MIN_H ? 1 : 0;
+  const height = Math.max(1, bodyH - margin * 2);
+  const grid = equalGrid(width, height, model.tiles.length, 34, REPO_MIN_H);
+  const page = pageWindow(model.tiles.length, model.cursor, grid.cap);
+  const shown = model.tiles.slice(page.start, page.end);
+  const bands = placeEqualTiles(shown, grid);
+  const painted = paintRepos(model, bands, color);
+  const rows = composeBands(bands, painted, width, height, color);
+  const pad = new Array(margin).fill(pageFill(width, color));
+  const body = [...pad, ...rows, ...pad];
+  const fileHits = tileHits(bands, headerLines + margin);
+  return { ...paneResult({ body, fileHits }), gridCols: grid.cols };
+};
+
+module.exports = { paintBodyRepos };