@git-stunts/git-warp 10.1.1

package/src/visualization/renderers/ascii/check.js

@@ -0,0 +1,271 @@
+/**
+ * Check command ASCII visualization renderer.
+ *
+ * Renders a visual health dashboard with progress bars, status indicators,
+ * and color-coded health status.
+ */
+
+import chalk from 'chalk';
+import { createBox } from './box.js';
+import { progressBar } from './progress.js';
+import { colors } from './colors.js';
+import { padRight } from '../../utils/unicode.js';
+import { formatAge } from './formatters.js';
+
+// Health thresholds
+const TOMBSTONE_HEALTHY_MAX = 0.15;     // < 15% tombstones = healthy
+const TOMBSTONE_WARNING_MAX = 0.30;     // < 30% tombstones = warning
+const CACHE_STALE_PENALTY = 20;         // Reduce "freshness" score for stale cache
+
+/**
+ * Get cache freshness percentage and state.
+ * @param {Object} status - The status object from check payload
+ * @returns {{ percent: number, label: string }}
+ */
+function getCacheFreshness(status) {
+  if (!status) {
+    return { percent: 0, label: 'none' };
+  }
+
+  switch (status.cachedState) {
+    case 'fresh':
+      return { percent: 100, label: 'fresh' };
+    case 'stale':
+      return { percent: 100 - CACHE_STALE_PENALTY, label: 'stale' };
+    case 'none':
+    default:
+      return { percent: 0, label: 'none' };
+  }
+}
+
+/**
+ * Get tombstone health status and color.
+ * @param {number} ratio - Tombstone ratio (0-1)
+ * @returns {{ status: string, color: Function }}
+ */
+function getTombstoneHealth(ratio) {
+  if (ratio < TOMBSTONE_HEALTHY_MAX) {
+    return { status: 'healthy', color: colors.success };
+  }
+  if (ratio < TOMBSTONE_WARNING_MAX) {
+    return { status: 'warning', color: colors.warning };
+  }
+  return { status: 'critical', color: colors.error };
+}
+
+/**
+ * Create a custom progress bar with inverted colors for tombstones.
+ * Lower is better for tombstones.
+ * @param {number} percent - Percentage (0-100)
+ * @param {number} width - Bar width
+ * @returns {string}
+ */
+function tombstoneBar(percent, width = 20) {
+  const clampedPercent = Math.max(0, Math.min(100, percent));
+  const filledCount = Math.round((clampedPercent / 100) * width);
+  const emptyCount = width - filledCount;
+  const bar = '\u2588'.repeat(filledCount) + '\u2591'.repeat(emptyCount);
+
+  // Invert: lower tombstone ratio is better (green), higher is bad (red)
+  if (percent <= TOMBSTONE_HEALTHY_MAX * 100) {
+    return chalk.green(bar);
+  }
+  if (percent <= TOMBSTONE_WARNING_MAX * 100) {
+    return chalk.yellow(bar);
+  }
+  return chalk.red(bar);
+}
+
+/**
+ * Format writer information for display.
+ * @param {Object[]} heads - Writer heads array
+ * @returns {string}
+ */
+function formatWriters(heads) {
+  if (!heads || heads.length === 0) {
+    return colors.muted('none');
+  }
+
+  // For now, just list writer IDs with their SHA prefixes
+  return heads
+    .map((h) => `${colors.primary(h.writerId ?? 'unknown')} (${colors.muted((h.sha ?? '').slice(0, 7) || '?')})`)
+    .join(' | ');
+}
+
+/**
+ * Format checkpoint status line.
+ * @param {Object} checkpoint - Checkpoint info
+ * @returns {string}
+ */
+function formatCheckpoint(checkpoint) {
+  if (!checkpoint?.sha) {
+    return `${colors.warning('none')}`;
+  }
+
+  const sha = colors.muted(checkpoint.sha.slice(0, 7));
+  const age = formatAge(checkpoint.ageSeconds);
+
+  // Add checkmark for recent checkpoints (< 5 min), warning for older
+  let status;
+  if (checkpoint.ageSeconds !== null && checkpoint.ageSeconds < 300) {
+    status = colors.success('\u2713');
+  } else if (checkpoint.ageSeconds !== null && checkpoint.ageSeconds < 3600) {
+    status = colors.warning('\u2713');
+  } else {
+    status = colors.muted('\u2713');
+  }
+
+  return `${sha} (${age} ago) ${status}`;
+}
+
+/**
+ * Format hook status line.
+ * @param {Object|null} hook - Hook status
+ * @returns {string}
+ */
+function formatHook(hook) {
+  if (!hook) {
+    return colors.muted('unknown');
+  }
+
+  if (!hook.installed && hook.foreign) {
+    return `${colors.warning('\u26A0')} foreign hook present`;
+  }
+
+  if (!hook.installed) {
+    return `${colors.error('\u2717')} not installed`;
+  }
+
+  if (hook.current) {
+    return `${colors.success('\u2713')} installed (v${hook.version})`;
+  }
+
+  return `${colors.warning('\u2713')} installed (v${hook.version}) \u2014 upgrade available`;
+}
+
+/**
+ * Format coverage status line.
+ * @param {Object} coverage - Coverage info
+ * @returns {string}
+ */
+function formatCoverage(coverage) {
+  if (!coverage?.sha) {
+    return colors.muted('none');
+  }
+
+  const missing = coverage.missingWriters || [];
+  if (missing.length === 0) {
+    return `${colors.success('\u2713')} all writers merged`;
+  }
+
+  const missingList = missing.map((w) => colors.warning(w)).join(', ');
+  return `${colors.warning('\u26A0')} missing: ${missingList}`;
+}
+
+/**
+ * Get overall health status with color and symbol.
+ * @param {Object} health - Health object
+ * @returns {{ text: string, symbol: string, color: Function }}
+ */
+function getOverallHealth(health) {
+  if (!health) {
+    return { text: 'UNKNOWN', symbol: '?', color: colors.muted };
+  }
+
+  switch (health.status) {
+    case 'healthy':
+      return { text: 'HEALTHY', symbol: '\u2713', color: colors.success };
+    case 'degraded':
+      return { text: 'DEGRADED', symbol: '\u26A0', color: colors.warning };
+    case 'unhealthy':
+      return { text: 'UNHEALTHY', symbol: '\u2717', color: colors.error };
+    default: {
+      const safeStatus = typeof health.status === 'string' && health.status.length
+        ? health.status
+        : 'UNKNOWN';
+      return { text: safeStatus.toUpperCase(), symbol: '?', color: colors.muted };
+    }
+  }
+}
+
+/**
+ * Build the state section lines (cache, tombstones, patches).
+ * @param {Object} status - Status object
+ * @param {Object} gc - GC metrics
+ * @returns {string[]}
+ */
+function buildStateLines(status, gc) {
+  const lines = [];
+  const cache = getCacheFreshness(status);
+  const cacheBar = progressBar(cache.percent, 20, { showPercent: false });
+  lines.push(`  ${padRight('Cache:', 12)} ${cacheBar} ${cache.percent}% ${cache.label}`);
+
+  const tombstoneRatio = status?.tombstoneRatio ?? gc?.tombstoneRatio ?? 0;
+  const tombstonePercent = Math.round(tombstoneRatio * 100);
+  const tombstoneHealth = getTombstoneHealth(tombstoneRatio);
+  const tBar = tombstoneBar(tombstonePercent, 20);
+  lines.push(`  ${padRight('Tombstones:', 12)} ${tBar} ${tombstonePercent}% (${tombstoneHealth.color(tombstoneHealth.status)})`);
+
+  if (status?.patchesSinceCheckpoint !== undefined) {
+    lines.push(`  ${padRight('Patches:', 12)} ${status.patchesSinceCheckpoint} since checkpoint`);
+  }
+  return lines;
+}
+
+/**
+ * Build the metadata section lines (writers, checkpoint, coverage, hooks).
+ * @param {Object} opts - Metadata options
+ * @param {Object} opts.writers - Writers info
+ * @param {Object} opts.checkpoint - Checkpoint info
+ * @param {Object} opts.coverage - Coverage info
+ * @param {Object} opts.hook - Hook status
+ * @returns {string[]}
+ */
+function buildMetadataLines({ writers, checkpoint, coverage, hook }) {
+  return [
+    `  ${padRight('Writers:', 12)} ${formatWriters(writers?.heads)}`,
+    `  ${padRight('Checkpoint:', 12)} ${formatCheckpoint(checkpoint)}`,
+    `  ${padRight('Coverage:', 12)} ${formatCoverage(coverage)}`,
+    `  ${padRight('Hooks:', 12)} ${formatHook(hook)}`,
+  ];
+}
+
+/**
+ * Determine border color based on health status.
+ * @param {Object} overall - Overall health info
+ * @returns {string}
+ */
+function getBorderColor(overall) {
+  if (overall.color === colors.success) {return 'green';}
+  if (overall.color === colors.warning) {return 'yellow';}
+  return 'red';
+}
+
+/**
+ * Render the check view dashboard.
+ * @param {Object} payload - The check command payload
+ * @returns {string} Formatted dashboard string
+ */
+export function renderCheckView(payload) {
+  const { graph, health, status, writers, checkpoint, coverage, gc, hook } = payload;
+  const overall = getOverallHealth(health);
+
+  const lines = [
+    colors.bold(`  GRAPH HEALTH: ${graph}`),
+    '',
+    ...buildStateLines(status, gc),
+    '',
+    ...buildMetadataLines({ writers, checkpoint, coverage, hook }),
+    '',
+    `  Overall: ${overall.color(overall.symbol)} ${overall.color(overall.text)}`,
+  ];
+
+  const box = createBox(lines.join('\n'), {
+    title: 'HEALTH',
+    titleAlignment: 'center',
+    borderColor: getBorderColor(overall),
+  });
+  return `${box}\n`;
+}
+
+export default { renderCheckView };

package/src/visualization/renderers/ascii/colors.js

@@ -0,0 +1,13 @@
+import chalk from 'chalk';
+
+export const colors = {
+  primary: chalk.cyan,
+  success: chalk.green,
+  warning: chalk.yellow,
+  error: chalk.red,
+  muted: chalk.gray,
+  bold: chalk.bold,
+  dim: chalk.dim,
+};
+
+export default colors;

package/src/visualization/renderers/ascii/formatters.js

@@ -0,0 +1,73 @@
+/**
+ * Shared formatting functions for ASCII renderers.
+ *
+ * Extracted from check.js, materialize.js, and info.js to eliminate
+ * duplicate formatting logic across renderers.
+ */
+
+import { colors } from './colors.js';
+
+/**
+ * Format seconds as human-readable time (e.g., "2m", "1h", "3d").
+ * @param {number|null} seconds
+ * @returns {string}
+ */
+export function formatAge(seconds) {
+  if (seconds === null || seconds === undefined) {
+    return 'unknown';
+  }
+  if (typeof seconds !== 'number' || !Number.isFinite(seconds) || seconds < 0) {
+    return 'unknown';
+  }
+  const secs = Math.floor(seconds);
+  if (secs < 60) {
+    return `${secs}s`;
+  }
+  const minutes = Math.floor(secs / 60);
+  if (minutes < 60) {
+    return `${minutes}m`;
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h`;
+  }
+  const days = Math.floor(hours / 24);
+  return `${days}d`;
+}
+
+/**
+ * Format a number with thousands separator for readability.
+ * @param {number} n - Number to format
+ * @returns {string} Formatted number string
+ */
+export function formatNumber(n) {
+  if (typeof n !== 'number' || !Number.isFinite(n)) {
+    return '0';
+  }
+  return n.toLocaleString('en-US');
+}
+
+/**
+ * Format a SHA for display (first 7 characters, muted color).
+ * @param {string|null} sha - Full SHA or null
+ * @returns {string} Shortened SHA or 'none'
+ */
+export function formatSha(sha) {
+  return sha ? colors.muted(sha.slice(0, 7)) : colors.muted('none');
+}
+
+/**
+ * Format a writer name for display, truncating to a max length.
+ * @param {string} writerId - Writer ID to format
+ * @param {number} [maxLen=16] - Maximum length before truncation
+ * @returns {string} Formatted writer display name
+ */
+export function formatWriterName(writerId, maxLen = 16) {
+  if (!writerId || typeof writerId !== 'string') {
+    return 'unknown';
+  }
+  if (writerId.length > maxLen) {
+    return `${writerId.slice(0, maxLen - 1)}\u2026`;
+  }
+  return writerId;
+}

package/src/visualization/renderers/ascii/graph.js

@@ -0,0 +1,344 @@
+/**
+ * ASCII graph renderer: maps ELK-positioned nodes and edges onto a character grid.
+ *
+ * Pixel-to-character scaling:
+ *   cellW = 8 px/char, cellH = 4 px/char (approximate monospace aspect ratio)
+ */
+
+import { createBox } from './box.js';
+import { colors } from './colors.js';
+import { ARROW } from './symbols.js';
+
+// ── Scaling constants ────────────────────────────────────────────────────────
+
+const CELL_W = 8;
+const CELL_H = 4;
+const MARGIN = 2;
+
+// ── Box-drawing characters (short keys for tight grid-stamping loops) ───────
+
+const BOX = {
+  tl: '\u250C', // ┌
+  tr: '\u2510', // ┐
+  bl: '\u2514', // └
+  br: '\u2518', // ┘
+  h: '\u2500',  // ─
+  v: '\u2502',  // │
+};
+
+// ── Grid helpers ─────────────────────────────────────────────────────────────
+
+function toCol(px) {
+  return Math.round(px / CELL_W) + MARGIN;
+}
+
+function toRow(px) {
+  return Math.round(px / CELL_H) + MARGIN;
+}
+
+function scaleW(px) {
+  return Math.round(px / CELL_W);
+}
+
+function scaleH(px) {
+  return Math.round(px / CELL_H);
+}
+
+function createGrid(rows, cols) {
+  const grid = [];
+  for (let r = 0; r < rows; r++) {
+    grid.push(new Array(cols).fill(' '));
+  }
+  return grid;
+}
+
+function writeChar(grid, r, c, ch) {
+  if (r >= 0 && r < grid.length && c >= 0 && c < grid[0].length) {
+    grid[r][c] = ch;
+  }
+}
+
+function readChar(grid, r, c) {
+  if (r >= 0 && r < grid.length && c >= 0 && c < grid[0].length) {
+    return grid[r][c];
+  }
+  return ' ';
+}
+
+function writeString(grid, r, c, str) {
+  for (let i = 0; i < str.length; i++) {
+    writeChar(grid, r, c + i, str[i]);
+  }
+}
+
+// ── Node stamping ────────────────────────────────────────────────────────────
+
+function stampNode(grid, node) {
+  const r = toRow(node.y);
+  const c = toCol(node.x);
+  const w = Math.max(scaleW(node.width), 4);
+  const h = Math.max(scaleH(node.height), 3);
+
+  // Top border
+  writeChar(grid, r, c, BOX.tl);
+  for (let i = 1; i < w - 1; i++) {
+    writeChar(grid, r, c + i, BOX.h);
+  }
+  writeChar(grid, r, c + w - 1, BOX.tr);
+
+  // Side borders
+  for (let j = 1; j < h - 1; j++) {
+    writeChar(grid, r + j, c, BOX.v);
+    writeChar(grid, r + j, c + w - 1, BOX.v);
+  }
+
+  // Bottom border
+  writeChar(grid, r + h - 1, c, BOX.bl);
+  for (let i = 1; i < w - 1; i++) {
+    writeChar(grid, r + h - 1, c + i, BOX.h);
+  }
+  writeChar(grid, r + h - 1, c + w - 1, BOX.br);
+
+  // Label (centered)
+  const label = node.label ?? node.id;
+  const maxLabel = w - 4;
+  const truncated = label.length > maxLabel
+    ? `${label.slice(0, Math.max(maxLabel - 1, 1))}\u2026`
+    : label;
+  const labelRow = r + Math.floor(h / 2);
+  const labelCol = c + Math.max(1, Math.floor((w - truncated.length) / 2));
+  writeString(grid, labelRow, labelCol, truncated);
+}
+
+// ── Edge tracing ─────────────────────────────────────────────────────────────
+
+function traceEdge(grid, edge, nodeSet) {
+  const { sections } = edge;
+  if (!sections || sections.length === 0) {
+    return;
+  }
+
+  for (const section of sections) {
+    const points = buildPointList(section);
+    drawSegments(grid, points, nodeSet);
+  }
+
+  // Arrowhead at the end of the last section
+  const lastSection = sections[sections.length - 1];
+  const ep = lastSection.endPoint;
+  if (ep) {
+    drawArrowhead(grid, lastSection, nodeSet);
+  }
+
+  // Edge label at midpoint of the longest section segment
+  if (edge.label) {
+    placeEdgeLabel(grid, sections, edge.label, nodeSet);
+  }
+}
+
+function buildPointList(section) {
+  const points = [];
+  if (section.startPoint) {
+    points.push(section.startPoint);
+  }
+  if (section.bendPoints) {
+    points.push(...section.bendPoints);
+  }
+  if (section.endPoint) {
+    points.push(section.endPoint);
+  }
+  return points;
+}
+
+function drawSegments(grid, points, nodeSet) {
+  for (let i = 0; i < points.length - 1; i++) {
+    const r1 = toRow(points[i].y);
+    const c1 = toCol(points[i].x);
+    const r2 = toRow(points[i + 1].y);
+    const c2 = toCol(points[i + 1].x);
+    drawLine(grid, r1, c1, r2, c2, nodeSet);
+  }
+}
+
+function drawLine(grid, r1, c1, r2, c2, nodeSet) {
+  if (r1 === r2) {
+    drawHorizontal(grid, r1, c1, c2, nodeSet);
+  } else if (c1 === c2) {
+    drawVertical(grid, c1, r1, r2, nodeSet);
+  } else {
+    // Diagonal: draw L-shaped bend (horizontal first, then vertical)
+    drawHorizontal(grid, r1, c1, c2, nodeSet);
+    drawVertical(grid, c2, r1, r2, nodeSet);
+  }
+}
+
+function drawHorizontal(grid, row, c1, c2, nodeSet) {
+  const start = Math.min(c1, c2);
+  const end = Math.max(c1, c2);
+  for (let c = start; c <= end; c++) {
+    if (!isNodeCell(nodeSet, row, c)) {
+      const existing = readChar(grid, row, c);
+      if (existing === BOX.v || existing === '|') {
+        writeChar(grid, row, c, '+');
+      } else {
+        writeChar(grid, row, c, BOX.h);
+      }
+    }
+  }
+}
+
+function drawVertical(grid, col, r1, r2, nodeSet) {
+  const start = Math.min(r1, r2);
+  const end = Math.max(r1, r2);
+  for (let r = start; r <= end; r++) {
+    if (!isNodeCell(nodeSet, r, col)) {
+      const existing = readChar(grid, r, col);
+      if (existing === BOX.h || existing === '-') {
+        writeChar(grid, r, col, '+');
+      } else {
+        writeChar(grid, r, col, BOX.v);
+      }
+    }
+  }
+}
+
+function drawArrowhead(grid, section, nodeSet) {
+  const ep = section.endPoint;
+  if (!ep) {
+    return;
+  }
+  const er = toRow(ep.y);
+  const ec = toCol(ep.x);
+
+  // Determine direction from last segment
+  const bends = section.bendPoints ?? [];
+  const prev = bends.length > 0 ? bends[bends.length - 1] : section.startPoint;
+  if (!prev) {
+    return;
+  }
+  const pr = toRow(prev.y);
+  const pc = toCol(prev.x);
+
+  let arrow;
+  if (er > pr) {
+    arrow = ARROW.down;
+  } else if (er < pr) {
+    arrow = ARROW.up;
+  } else if (ec > pc) {
+    arrow = ARROW.right;
+  } else {
+    arrow = ARROW.left;
+  }
+
+  if (!isNodeCell(nodeSet, er, ec)) {
+    writeChar(grid, er, ec, arrow);
+  }
+}
+
+function placeEdgeLabel(grid, sections, label, nodeSet) {
+  // Find midpoint of the full path
+  const allPoints = [];
+  for (const s of sections) {
+    allPoints.push(...buildPointList(s));
+  }
+  if (allPoints.length < 2) {
+    return;
+  }
+
+  // Pick midpoint of the longest segment
+  let bestLen = 0;
+  let midR = 0;
+  let midC = 0;
+  for (let i = 0; i < allPoints.length - 1; i++) {
+    const r1 = toRow(allPoints[i].y);
+    const c1 = toCol(allPoints[i].x);
+    const r2 = toRow(allPoints[i + 1].y);
+    const c2 = toCol(allPoints[i + 1].x);
+    const len = Math.abs(r2 - r1) + Math.abs(c2 - c1);
+    if (len > bestLen) {
+      bestLen = len;
+      midR = Math.floor((r1 + r2) / 2);
+      midC = Math.floor((c1 + c2) / 2);
+    }
+  }
+
+  const trunc = label.length > 10
+    ? `${label.slice(0, 9)}\u2026`
+    : label;
+  const startC = midC - Math.floor(trunc.length / 2);
+
+  for (let i = 0; i < trunc.length; i++) {
+    const tc = startC + i;
+    if (!isNodeCell(nodeSet, midR, tc)) {
+      writeChar(grid, midR, tc, trunc[i]);
+    }
+  }
+}
+
+// ── Node occupancy set ───────────────────────────────────────────────────────
+
+function buildNodeSet(nodes) {
+  const set = new Set();
+  for (const node of nodes) {
+    const r = toRow(node.y);
+    const c = toCol(node.x);
+    const w = Math.max(scaleW(node.width), 4);
+    const h = Math.max(scaleH(node.height), 3);
+    for (let dr = 0; dr < h; dr++) {
+      for (let dc = 0; dc < w; dc++) {
+        set.add(`${r + dr},${c + dc}`);
+      }
+    }
+  }
+  return set;
+}
+
+function isNodeCell(nodeSet, r, c) {
+  return nodeSet.has(`${r},${c}`);
+}
+
+// ── Public API ───────────────────────────────────────────────────────────────
+
+/**
+ * Renders a PositionedGraph (from ELK) as an ASCII box-drawing string.
+ *
+ * @param {Object} positionedGraph - PositionedGraph from runLayout()
+ * @param {{ title?: string }} [options]
+ * @returns {string} Rendered ASCII art wrapped in a box
+ */
+export function renderGraphView(positionedGraph, options = {}) {
+  const { nodes = [], edges = [] } = positionedGraph;
+
+  if (nodes.length === 0) {
+    return createBox(colors.muted('  (empty graph)'), {
+      title: options.title ?? 'GRAPH',
+      titleAlignment: 'center',
+      borderColor: 'cyan',
+    });
+  }
+
+  const totalCols = scaleW(positionedGraph.width) + MARGIN * 2;
+  const totalRows = scaleH(positionedGraph.height) + MARGIN * 2;
+
+  const grid = createGrid(totalRows, totalCols);
+  const nodeSet = buildNodeSet(nodes);
+
+  // Edges first (nodes overwrite on overlap)
+  for (const edge of edges) {
+    traceEdge(grid, edge, nodeSet);
+  }
+  for (const node of nodes) {
+    stampNode(grid, node);
+  }
+
+  // Colorize and join
+  const raw = grid
+    .map((row) => row.join('').replace(/\s+$/, ''))
+    .join('\n');
+
+  return createBox(raw, {
+    title: options.title ?? 'GRAPH',
+    titleAlignment: 'center',
+    borderColor: 'cyan',
+  });
+}