reslop 0.2.5 → 0.2.7

package/lib/render/dash-activity.js

@@ -0,0 +1,212 @@
+'use strict';
+
+const tiles = require('./tiles.js');
+const { seg, spinner } = tiles;
+const table = require('./dash-table.js');
+const { ago, duration, isHot, waiting, cell, cellSegs, flexCell } = table;
+const { tableLines, stat, pairRows, titleAside, captionOver } = table;
+
+const NAME_MAX = 18;
+const RUN_ICON = {
+  passed: ['✔', 'add'],
+  failed: ['✖', 'error'],
+  aborted: ['⊘', 'muted'],
+};
+
+const blankCell = () => cell('', 'muted', 'r');
+
+const ageCell = (at, now) => cell(at ? ago(at, now) : '', 'muted', 'r');
+
+const rebaseStep = (rebase) => {
+  const total = rebase.total ? `/${rebase.total}` : '';
+  return `${rebase.step || '?'}${total}`;
+};
+
+const commitRow = (entry, ctx, hot) => [
+  cell(entry.short, hot ? 'warn' : 'sha', 'l', true),
+  flexCell(entry.subject, hot ? 'warn' : 'text'),
+  ageCell(entry.at, ctx.now),
+];
+
+const commitsBlock = (model, width, height, ctx, tile) => {
+  const data = model.commits;
+  if (!data.ready) return waiting('reading git…');
+  const { total, recent } = data.info;
+  const badge = [];
+  if (data.rebase) {
+    const step = rebaseStep(data.rebase);
+    badge.push(seg(`⟳ rebase ${step}`, 'warn', true));
+  }
+  const titleLine = titleAside(tile, [seg(`${total}`, 'muted')], width, badge);
+  if (!recent.length) return { titleLine, lines: [[seg('none', 'muted')]] };
+  const hot = isHot(data.changedAt, ctx.now);
+  const shown = recent.slice(0, Math.max(0, height));
+  const rows = shown.map((entry, i) => commitRow(entry, ctx, hot && i === 0));
+  return { titleLine, lines: tableLines(rows, width) };
+};
+
+const trackText = (entry) => {
+  if (entry.gone) return 'gone';
+  if (!entry.upstream) return '';
+  const ahead = entry.ahead ? `↑${entry.ahead}` : '';
+  const behind = entry.behind ? `↓${entry.behind}` : '';
+  return ahead + behind || '=';
+};
+
+const branchOrder = (list) =>
+  [...list].sort((left, right) => {
+    if (left.current !== right.current) return left.current ? -1 : 1;
+    return right.at - left.at || left.name.localeCompare(right.name, 'en');
+  });
+
+const blinkTone = (frame) => (Math.abs(frame) % 2 ? 'hot' : 'warn');
+
+const branchRow = (entry, data, ctx) => {
+  const hot = isHot(data.hot.get(entry.name) ?? 0, ctx.now);
+  const tone = hot ? blinkTone(ctx.frame) : 'text';
+  const mark = entry.current ? '▶' : ' ';
+  const name = entry.name.slice(0, NAME_MAX);
+  const track = trackText(entry);
+  const trackTone = entry.behind || entry.gone ? 'error' : 'warn';
+  return [
+    cellSegs([
+      seg(mark, 'sha', true),
+      seg(` ${name}`, tone, entry.current || hot),
+    ]),
+    cell(track, track === '=' ? 'muted' : trackTone),
+    flexCell(entry.subject),
+    ageCell(entry.at, ctx.now),
+  ];
+};
+
+const branchExtras = (data, ctx) => {
+  const rows = [];
+  if (data.rebase) {
+    const step = cell(rebaseStep(data.rebase), 'warn', 'l', true);
+    rows.push([cell('rebase', 'muted'), step]);
+  }
+  const last = data.switches[0];
+  if (last) {
+    rows.push([
+      cell('switched', 'muted'),
+      flexCell(`${last.from} → ${last.to}`),
+      ageCell(last.at, ctx.now),
+    ]);
+  }
+  return rows;
+};
+
+const branchesBlock = (model, width, height, ctx, tile) => {
+  const data = model.branches;
+  if (!data.ready) return waiting('reading git…');
+  const badge = data.rebase ? [seg('⟳', 'warn', true)] : [];
+  const aside = [seg(`${data.list.length}`, 'muted')];
+  const titleLine = titleAside(tile, aside, width, badge);
+  if (!data.list.length) {
+    return { titleLine, lines: [[seg('no branches', 'muted')]] };
+  }
+  const extras = branchExtras(data, ctx);
+  const room = Math.max(1, height - extras.length);
+  const shown = branchOrder(data.list).slice(0, room);
+  const rows = shown.map((entry) => branchRow(entry, data, ctx));
+  const lines = tableLines(rows, width);
+  const fits = extras.slice(0, Math.max(0, height - lines.length));
+  return { titleLine, lines: [...lines, ...tableLines(fits, width)] };
+};
+
+const runIcon = (run, ctx) => {
+  if (run.status === 'running') return [spinner(ctx.frame), 'warn'];
+  return RUN_ICON[run.status] ?? ['?', 'muted'];
+};
+
+const countCell = (value, tone) => {
+  if (typeof value !== 'number') return blankCell();
+  return cell(`${value}`, tone, 'r');
+};
+
+const failTone = (value) => (value ? 'error' : 'muted');
+
+const testMetrics = (done, ok, fail, total) => [
+  countCell(done, 'text'),
+  countCell(ok, ok ? 'add' : 'muted'),
+  countCell(fail, failTone(fail)),
+  countCell(total, 'text'),
+];
+
+const runMetrics = (run) => {
+  const result = run.result;
+  if (result && typeof result.tests === 'number') {
+    const fail = result.failed ?? 0;
+    const ok = result.passed ?? Math.max(0, result.tests - fail);
+    return testMetrics(result.tests, ok, fail, result.tests);
+  }
+  const live = run.status === 'running' && run.source !== 'reslop';
+  if (!live) return [blankCell(), blankCell(), blankCell(), blankCell()];
+  const total = run.expected > 0 ? run.expected : null;
+  return testMetrics(run.done + run.failed, run.done, run.failed, total);
+};
+
+const lintNote = (run) => {
+  const result = run.result;
+  if (!result || typeof result.tests === 'number') return [];
+  const { errors, warnings } = result;
+  if (typeof errors !== 'number') return [];
+  const note = [seg(`  ${errors} err`, failTone(errors))];
+  if (typeof warnings !== 'number') return note;
+  note.push(seg(`  ${warnings} warn`, warnings ? 'warn' : 'muted'));
+  return note;
+};
+
+const durationCell = (run, ctx) => {
+  const running = run.status === 'running';
+  const end = running ? ctx.now : run.endedAt;
+  if (!run.startedAt || !end) return blankCell();
+  return cell(duration(end - run.startedAt), running ? 'warn' : 'muted', 'r');
+};
+
+const named = (icon, tone, name, nameTone) => ({
+  segs: [seg(icon, tone, true), seg(' '), seg(name, nameTone)],
+  align: 'l',
+  flex: true,
+  min: 1,
+});
+
+const runHeader = () => [
+  cell(''),
+  cell('done', 'muted', 'r'),
+  cell('ok', 'muted', 'r'),
+  cell('fail', 'muted', 'r'),
+  cell('total', 'muted', 'r'),
+  cell('duration', 'muted', 'r'),
+];
+
+const runRow = (run, ctx) => {
+  const icon = runIcon(run, ctx);
+  const tone = run.status === 'running' ? 'text' : 'muted';
+  const label = named(icon[0], icon[1], run.name, tone);
+  label.segs.push(...lintNote(run));
+  return [label, ...runMetrics(run), durationCell(run, ctx)];
+};
+
+const runsBlock = (model, width, height, ctx, tile) => {
+  const rows = [];
+  if (model.busy) {
+    rows.push([named(spinner(ctx.frame), 'warn', model.busy, 'warn')]);
+  }
+  for (const run of model.runs) rows.push(runRow(run, ctx));
+  if (!rows.length) {
+    const items = [
+      stat('status', 'idle', 'muted'),
+      stat('usage', 'reslop t -- <command>', 'muted'),
+    ];
+    return { badge: [], lines: tableLines(pairRows(items, 1), width) };
+  }
+  const shown = rows.slice(0, Math.max(1, height));
+  const lines = tableLines([runHeader(), ...shown], width);
+  return {
+    titleLine: captionOver(tile, lines[0]),
+    lines: lines.slice(1),
+  };
+};
+
+module.exports = { commitsBlock, branchesBlock, runsBlock, runMetrics };

package/lib/render/dash-blocks.js

@@ -0,0 +1,496 @@
+'use strict';
+
+const files = require('../files.js');
+const { shortAge } = files;
+const npmInfo = require('../dashboard/npm.js');
+const { TOP_PACKAGES } = npmInfo;
+const utilities = require('../utilities.js');
+const { parseVersion, cmpVersion } = utilities;
+const ansi = require('../ansi.js');
+const { THEME, visibleWidth } = ansi;
+const { minuteOf } = require('../dashboard/model.js');
+const tiles = require('./tiles.js');
+const { seg, barSegments, spinner } = tiles;
+const table = require('./dash-table.js');
+const { num, size, delta, waiting, cell, cellSegs, flexCell } = table;
+const { tableLines, pickGroups, labelOf, stat, pairRows } = table;
+const { titleAside, captionOver } = table;
+
+const BAR_W = 6;
+const FOLDER = '📁';
+const MARK_GAP = 1;
+const ACTIVITY_LABEL = 'activity ';
+const PULSE = '∙';
+const ACTIVITY_MARK = [
+  ['fail', 'x'],
+  ['commit', '◉'],
+  ['pass', '*'],
+  ['abort', '!'],
+  ['branch', '⎇'],
+  ['rebase', '↻'],
+  ['npm', '✦'],
+];
+const UNKNOWN = '…';
+
+const share = (value, total) => (total > 0 ? value / total : 0);
+
+const markCell = (isDir) => cell(isDir ? FOLDER : '');
+
+const nameCell = (key, isDir, hot = false) => {
+  const name = cell(labelOf(key, isDir), hot ? 'warn' : 'sha', 'l', hot);
+  name.gap = MARK_GAP;
+  return name;
+};
+
+const fileName = (key, isDir, hot) => {
+  const name = nameCell(key, isDir, hot);
+  name.flex = true;
+  name.keep = true;
+  return name;
+};
+
+const fileRow = (group, isDir, data) => {
+  const hot = (isDir ? data.hot.dirs : data.hot.exts).has(group.key);
+  const ratio = share(group.bytes, data.total.bytes);
+  return [
+    markCell(isDir),
+    fileName(group.key, isDir, hot),
+    cell(`${group.files}`, 'muted', 'r'),
+    cell(size(group.bytes), 'text', 'r'),
+    cell(num(group.lines), 'muted', 'r'),
+    cellSegs(barSegments(ratio, BAR_W, 'sha')),
+  ];
+};
+
+const filesTotal = (data, ctx) => {
+  const { total } = data;
+  const name = cell('');
+  name.flex = true;
+  name.gap = MARK_GAP;
+  const row = [
+    cell(''),
+    name,
+    cell(`${total.files}`, 'text', 'r', true),
+    cell(size(total.bytes), 'text', 'r', true),
+    cell(num(total.lines), 'text', 'r', true),
+    cell(''),
+  ];
+  const moved = data.delta ? data.delta.lines : 0;
+  const change = delta(moved, ctx.now, data.delta?.at);
+  if (change) row.push(cellSegs([change]));
+  return row;
+};
+
+const filesBlock = (model, width, height, ctx, tile) => {
+  const data = model.files;
+  if (!data.ready) return waiting('scanning…');
+  const picked = pickGroups(data.dirs, data.exts, height - 1);
+  const labels = [
+    cell(''),
+    cell(''),
+    cell('files', 'muted', 'r'),
+    cell('size', 'muted', 'r'),
+    cell('lines', 'muted', 'r'),
+    cell(''),
+  ];
+  const rows = [labels];
+  for (const group of picked.dirs) rows.push(fileRow(group, true, data));
+  for (const group of picked.exts) rows.push(fileRow(group, false, data));
+  rows.push(filesTotal(data, ctx));
+  const lines = tableLines(rows, width);
+  return {
+    titleLine: captionOver(tile, lines[0]),
+    lines: lines.slice(1, -1),
+    footer: lines.at(-1),
+  };
+};
+
+const ratio = (sign, part, total) => `${sign}${part}/${total}`;
+
+const changeCells = (group, bold = false) => [
+  cell(ratio('+', group.stagedAdded, group.added), 'add', 'r', bold),
+  cell(ratio('-', group.stagedRemoved, group.removed), 'del', 'r', bold),
+  cell(`${group.staged}/${group.remaining}`, 'text', 'r', bold),
+  cell(shortAge(group.date), 'muted', 'r'),
+];
+
+const diffRow = (group, isDir) => [
+  markCell(isDir),
+  nameCell(group.key, isDir),
+  ...changeCells(group),
+];
+
+const diffsHeader = (data, ctx) => {
+  const name = cell('');
+  name.gap = MARK_GAP;
+  const row = [cell(''), name, ...changeCells(data.totals, true)];
+  const moved = data.delta ? data.delta.added + data.delta.removed : 0;
+  const change = delta(moved, ctx.now, data.delta?.at);
+  if (change) row[row.length - 1] = cellSegs([change], 'r');
+  return row;
+};
+
+const heatIndex = (level) => {
+  if (level >= 301) return 4;
+  if (level >= 81) return 3;
+  if (level >= 16) return 2;
+  if (level >= 1) return 1;
+  return 0;
+};
+
+const heatColor = (index) => {
+  if (index === 1) return THEME.heat1;
+  if (index === 2) return THEME.heat2;
+  if (index === 3) return THEME.heat3;
+  if (index === 4) return THEME.heat4;
+  return null;
+};
+
+const markGlyph = (marks) => {
+  const list = marks ?? [];
+  for (const [kind, glyph] of ACTIVITY_MARK) {
+    if (list.includes(kind)) return glyph;
+  }
+  return '';
+};
+
+const diffGlyph = (bucket) => {
+  if (!bucket) return '';
+  const added = bucket.added || 0;
+  const removed = bucket.removed || 0;
+  if (removed > added) return '-';
+  if (added > 0 || removed > 0 || bucket.level > 0) return '+';
+  return '';
+};
+
+const pulseGlyph = (level) => {
+  const index = heatIndex(level);
+  if (index >= 4) return '◎';
+  if (index >= 3) return '•';
+  return '◦';
+};
+
+const activityCell = (bucket, blink, track, pulse) => {
+  const level = bucket ? bucket.level : 0;
+  const glyph = markGlyph(bucket ? bucket.marks : null);
+  const index = heatIndex(level);
+  const mark = glyph || diffGlyph(bucket);
+  const phase = blink ? pulseGlyph(level) : PULSE;
+  const ch = pulse ? phase : mark || ' ';
+  const item = seg(ch, blink ? 'blink' : 'heat', Boolean(glyph) && !pulse);
+  let bg = track ? THEME.heatTrack : null;
+  const heat = heatColor(index);
+  if (heat) bg = heat;
+  if (blink) bg = THEME.heatBlink;
+  item.bg = bg;
+  return item;
+};
+
+const activityCells = (activity, ctx, width) => {
+  const minutes = activity && activity.minutes ? activity.minutes : [];
+  const byAt = new Map();
+  let start = null;
+  for (const row of minutes) {
+    byAt.set(row.at, row);
+    if (start === null || row.at < start) start = row.at;
+  }
+  const current = minuteOf(ctx.now);
+  const flash = Boolean(activity && activity.live);
+  const on = Math.abs(ctx.frame ?? 0) % 2 === 1;
+  const cells = [];
+  for (let i = 0; i < width; i++) {
+    const at = current - (width - 1 - i);
+    const last = i === width - 1;
+    const pulse = flash && last;
+    const blink = pulse && on;
+    const track = start !== null && at >= start;
+    cells.push(activityCell(byAt.get(at), blink, track, pulse));
+  }
+  return cells;
+};
+
+const activityFooter = (data, width, ctx) => {
+  const room = width - 1 - ACTIVITY_LABEL.length;
+  if (room < 2) return null;
+  const cells = activityCells(data.activity, ctx, room);
+  return [seg(ACTIVITY_LABEL, 'muted'), ...cells];
+};
+
+const diffsBlock = (model, width, height, ctx, tile) => {
+  const data = model.diffs;
+  if (!data.files) {
+    const rows = pairRows([stat('changes', 'working tree clean', 'muted')], 1);
+    return { badge: [], lines: tableLines(rows, width) };
+  }
+  const footer = activityFooter(data, width, ctx);
+  const room = footer ? height - 1 : height;
+  const picked = pickGroups(data.dirs, data.exts, room);
+  const rows = [diffsHeader(data, ctx)];
+  for (const group of picked.dirs) rows.push(diffRow(group, true));
+  for (const group of picked.exts) rows.push(diffRow(group, false));
+  const lines = tableLines(rows, width, 2, true);
+  return {
+    titleLine: captionOver(tile, lines[0]),
+    lines: lines.slice(1),
+    footer,
+    footerFlush: true,
+  };
+};
+
+const countSegs = (label, value) => [
+  seg(`${label}: `, 'muted'),
+  seg(`${value}`, 'text'),
+];
+
+const markSegs = (value, tone, mark) => {
+  if (!value) return [];
+  return [seg('  '), seg(mark), seg(`${value}`, tone, true)];
+};
+
+const npmAside = (data) => {
+  const modules = data.modules;
+  return [
+    ...countSegs('deps', data.deps),
+    seg('  '),
+    ...countSegs('dev', data.dev),
+    seg('  '),
+    ...countSegs('all', modules.count),
+    seg(' (', 'muted'),
+    seg(size(modules.bytes), 'text'),
+    seg(')', 'muted'),
+    ...markSegs(data.audit, 'error', '🚨 '),
+    ...markSegs(data.outdated, 'warn', '⚠️ '),
+  ];
+};
+
+const npmStatus = (data) => {
+  if (!data || !data.ready || !data.hasManifest) return '';
+  const modules = data.modules || { count: 0, bytes: 0 };
+  let text = `deps: ${data.deps}  dev: ${data.dev}`;
+  text += `  all: ${modules.count} (${size(modules.bytes)})`;
+  if (data.audit) text += `  🚨 ${data.audit}`;
+  if (data.outdated) text += `  ⚠️ ${data.outdated}`;
+  return text;
+};
+
+const cmpText = (left, right) => {
+  const a = parseVersion(left);
+  const b = parseVersion(right);
+  if (!a || !b) return null;
+  return cmpVersion(a, b);
+};
+
+const boundHolds = (cmp, op) => {
+  if (op === '<') return cmp < 0;
+  if (op === '<=') return cmp <= 0;
+  if (op === '>') return cmp > 0;
+  return cmp >= 0;
+};
+
+const inClause = (version, clause) => {
+  const ver = parseVersion(version);
+  if (!ver) return false;
+  const bounds = [...clause.matchAll(/(>=|<=|>|<)\s*(\d+\.\d+\.\d+)/g)];
+  if (!bounds.length) return false;
+  for (const match of bounds) {
+    const bound = parseVersion(match[2]);
+    if (!bound) return false;
+    if (!boundHolds(cmpVersion(ver, bound), match[1])) return false;
+  }
+  return true;
+};
+
+const inRange = (version, range) =>
+  `${range ?? ''}`.split('||').some((clause) => inClause(version, clause));
+
+const hasRange = (range) => /[<>]=?\s*\d+\.\d+\.\d+/.test(`${range ?? ''}`);
+
+const vulnTone = (text, pkg) => {
+  if (!pkg.audit || !text || text === UNKNOWN) return '';
+  const fix = pkg.fix || '';
+  if (fix) {
+    const cmp = cmpText(text, fix);
+    if (cmp === null) return text === pkg.current ? 'error' : '';
+    return cmp < 0 ? 'error' : 'add';
+  }
+  const range = pkg.range || '';
+  if (hasRange(range)) {
+    if (inRange(text, range)) return 'error';
+    const cmp = cmpText(text, pkg.current);
+    if (cmp !== null && cmp > 0) return 'add';
+  }
+  return text === pkg.current ? 'error' : '';
+};
+
+const isOutdated = (pkg) => {
+  const current = pkg.current || '';
+  const wanted = pkg.wanted || '';
+  const latest = pkg.latest || '';
+  if (!current || current === UNKNOWN) return false;
+  if (wanted && wanted !== UNKNOWN && wanted !== current) return true;
+  return Boolean(latest && latest !== UNKNOWN && latest !== current);
+};
+
+const fixesOutdated = (text, pkg) => {
+  if (!isOutdated(pkg) || !text || text === UNKNOWN) return false;
+  const current = pkg.current || '';
+  const wanted = pkg.wanted || '';
+  const latest = pkg.latest || '';
+  if (text === wanted && wanted !== current) return true;
+  return text === latest && latest !== current;
+};
+
+const versionTone = (text, pkg) => {
+  const vuln = vulnTone(text, pkg);
+  if (vuln) return vuln;
+  if (fixesOutdated(text, pkg)) return 'add';
+  if (text === pkg.current && isOutdated(pkg)) return 'warn';
+  return 'muted';
+};
+
+const packageMark = (pkg, marks) => {
+  if (!marks) return cell('');
+  const segs = [];
+  if (pkg.audit) segs.push(seg('🛑 vulnerability detected', 'error'));
+  if (isOutdated(pkg)) {
+    if (segs.length) segs.push(seg('  '));
+    segs.push(seg('⚠️ outdated', 'warn'));
+  }
+  if (!segs.length) return cell('');
+  return cellSegs(segs);
+};
+
+const nameTone = (pkg) => {
+  if (pkg.transitive) return 'pkg';
+  if (pkg.dev) return 'dev';
+  return 'dep';
+};
+
+const packageName = (pkg) => {
+  const segs = [seg(pkg.name, nameTone(pkg))];
+  if (pkg.chain) segs.push(seg(` 🢒 ${pkg.chain}`, 'chain'));
+  return {
+    segs,
+    align: 'l',
+    flex: true,
+    keep: true,
+    measure: visibleWidth(pkg.name),
+  };
+};
+
+const versionCell = (text, pkg) => cell(text, versionTone(text, pkg), 'r');
+
+const packageHead = () => {
+  const title = flexCell('');
+  title.keep = true;
+  return [
+    title,
+    cell(''),
+    cell('current', 'muted', 'r'),
+    cell('wanted', 'muted', 'r'),
+    cell('latest', 'muted', 'r'),
+    cell('size', 'muted', 'r'),
+  ];
+};
+
+const packageRow = (pkg, marks) => {
+  const current = pkg.current || UNKNOWN;
+  const wanted = pkg.wanted || UNKNOWN;
+  const latest = pkg.latest || UNKNOWN;
+  return [
+    packageName(pkg),
+    packageMark(pkg, marks),
+    versionCell(current, pkg),
+    versionCell(wanted, pkg),
+    versionCell(latest, pkg),
+    cell(size(pkg.bytes), 'muted', 'r'),
+  ];
+};
+
+const packageLines = (packages, width, limit) => {
+  const all = limit === null;
+  const headed = packages.length > 0 && (all || limit > 1);
+  const room = all ? packages.length : Math.max(0, limit - (headed ? 1 : 0));
+  const shown = packages.slice(0, room);
+  const rows = shown.map((pkg) => packageRow(pkg, all));
+  if (headed) rows.unshift(packageHead());
+  return tableLines(rows, width);
+};
+
+const npmContent = (data, width, limit, ctx, tile) => {
+  if (!data || !data.ready) return waiting('reading package.json…');
+  if (!data.hasManifest) return waiting('no package.json');
+  const badge = data.running ? [seg(spinner(ctx.frame), 'warn', true)] : [];
+  const titleLine = titleAside(tile, npmAside(data), width, badge);
+  const listed = data.modules && data.modules.packages;
+  const packages = listed ? listed : [];
+  const short = limit === null ? packages : packages.slice(0, TOP_PACKAGES);
+  return { titleLine, lines: packageLines(short, width, limit) };
+};
+
+const npmBlock = (model, width, height, ctx, tile) =>
+  npmContent(model.npm, width, height, ctx, tile);
+
+const TASK_GAP = 2;
+
+const ratioLabel = (done, total) => `${done}/${total}`;
+
+const taskSpecs = (data) => {
+  const rows = [{ title: '', done: data.done, total: data.total, bold: true }];
+  for (const kind of data.kinds) {
+    rows.push({
+      title: kind.title,
+      done: kind.done,
+      total: kind.total,
+      bold: false,
+    });
+  }
+  return rows;
+};
+
+const widest = (rows, read) => {
+  let width = 0;
+  for (const row of rows) {
+    const size = read(row).length;
+    if (size > width) width = size;
+  }
+  return width;
+};
+
+const taskBarWidth = (width, nameW, ratioW) => {
+  const room = width - nameW - ratioW - TASK_GAP * 2;
+  return room > 0 ? room : 0;
+};
+
+const taskLine = (row, barW) => {
+  const tone = row.bold ? 'text' : 'muted';
+  const line = [cell(row.title, 'text', 'l', row.bold)];
+  if (barW > 0) {
+    line.push(cellSegs(barSegments(share(row.done, row.total), barW)));
+  }
+  line.push(cell(ratioLabel(row.done, row.total), tone, 'r', row.bold));
+  return line;
+};
+
+const tasksBlock = (model, width, height, ctx, tile) => {
+  const specs = taskSpecs(model.tasks);
+  const nameW = widest(specs, (row) => row.title);
+  const ratioW = widest(specs, (row) => ratioLabel(row.done, row.total));
+  const barW = taskBarWidth(width, nameW, ratioW);
+  const rows = specs.map((row) => taskLine(row, barW));
+  const lines = tableLines(rows, width, TASK_GAP);
+  const shown = Math.max(0, height);
+  return {
+    titleLine: captionOver(tile, lines[0]),
+    lines: lines.slice(1, 1 + shown),
+  };
+};
+
+module.exports = {
+  filesBlock,
+  diffsBlock,
+  npmBlock,
+  npmContent,
+  npmStatus,
+  tasksBlock,
+};