@git-stunts/git-warp 10.1.1

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

@@ -0,0 +1,335 @@
+/**
+ * ASCII renderer for the `history --view` command.
+ * Displays a visual timeline of patches for one or more writers.
+ */
+
+import { colors } from './colors.js';
+import { createBox } from './box.js';
+import { padRight, padLeft } from '../../utils/unicode.js';
+import { truncate } from '../../utils/truncate.js';
+import { TIMELINE } from './symbols.js';
+
+// Default pagination settings
+const DEFAULT_PAGE_SIZE = 20;
+
+// Operation type to display info mapping
+const OP_DISPLAY = {
+  NodeAdd: { symbol: '+', label: 'node', color: colors.success },
+  NodeTombstone: { symbol: '-', label: 'node', color: colors.error },
+  EdgeAdd: { symbol: '+', label: 'edge', color: colors.success },
+  EdgeTombstone: { symbol: '-', label: 'edge', color: colors.error },
+  PropSet: { symbol: '~', label: 'prop', color: colors.warning },
+  BlobValue: { symbol: '+', label: 'blob', color: colors.primary },
+};
+
+// Default empty operation summary
+const EMPTY_OP_SUMMARY = Object.freeze({
+  NodeAdd: 0,
+  EdgeAdd: 0,
+  PropSet: 0,
+  NodeTombstone: 0,
+  EdgeTombstone: 0,
+  BlobValue: 0,
+});
+
+/**
+ * Summarizes operations in a patch.
+ * @param {Object[]} ops - Array of patch operations
+ * @returns {Object} Summary with counts by operation type
+ */
+function summarizeOps(ops) {
+  const summary = { ...EMPTY_OP_SUMMARY };
+  for (const op of ops) {
+    if (op.type && summary[op.type] !== undefined) {
+      summary[op.type]++;
+    }
+  }
+  return summary;
+}
+
+/**
+ * Formats operation summary as a colored string.
+ * @param {Object} summary - Operation counts by type
+ * @param {number} maxWidth - Maximum width for the summary string
+ * @returns {string} Formatted summary string
+ */
+function formatOpSummary(summary, maxWidth = 40) {
+  const order = ['NodeAdd', 'EdgeAdd', 'PropSet', 'NodeTombstone', 'EdgeTombstone', 'BlobValue'];
+  const parts = order
+    .filter((opType) => summary[opType] > 0)
+    .map((opType) => {
+      const display = OP_DISPLAY[opType];
+      return { text: `${display.symbol}${summary[opType]}${display.label}`, color: display.color };
+    });
+
+  if (parts.length === 0) {
+    return colors.muted('(empty)');
+  }
+
+  // Truncate plain text first to avoid breaking ANSI escape sequences
+  const plain = parts.map((p) => p.text).join(' ');
+  const truncated = truncate(plain, maxWidth);
+  if (truncated === plain) {
+    return parts.map((p) => p.color(p.text)).join(' ');
+  }
+  return colors.muted(truncated);
+}
+
+/**
+ * Ensures entry has an opSummary, computing one if needed.
+ * @param {Object} entry - Patch entry
+ * @returns {Object} Operation summary
+ */
+function ensureOpSummary(entry) {
+  if (entry.opSummary) {
+    return entry.opSummary;
+  }
+  if (entry.ops) {
+    return summarizeOps(entry.ops);
+  }
+  return { ...EMPTY_OP_SUMMARY };
+}
+
+/**
+ * Paginates entries, returning display entries and truncation info.
+ * @param {Object[]} entries - All entries
+ * @param {number} pageSize - Page size
+ * @param {boolean} showAll - Whether to show all
+ * @returns {{displayEntries: Object[], truncated: boolean, hiddenCount: number}}
+ */
+function paginateEntries(entries, pageSize, showAll) {
+  if (showAll || entries.length <= pageSize) {
+    return { displayEntries: entries, truncated: false, hiddenCount: 0 };
+  }
+  return {
+    displayEntries: entries.slice(-pageSize),
+    truncated: true,
+    hiddenCount: entries.length - pageSize,
+  };
+}
+
+/**
+ * Renders the truncation indicator at the top of the timeline.
+ * @param {boolean} truncated - Whether entries are truncated
+ * @param {number} hiddenCount - Number of hidden entries
+ * @returns {string[]} Lines to prepend
+ */
+function renderTruncationIndicator(truncated, hiddenCount) {
+  if (truncated) {
+    return [
+      colors.muted(`  ${TIMELINE.top}${TIMELINE.vertical} ... ${hiddenCount} older patches hidden`),
+      `  ${TIMELINE.vertical}`,
+    ];
+  }
+  return [`  ${TIMELINE.top}`];
+}
+
+/**
+ * Renders a single patch entry line.
+ * @param {Object} params - Entry parameters
+ * @returns {string} Formatted entry line
+ */
+function renderEntryLine({ entry, isLast, lamportWidth, writerStr, maxWriterIdLen }) {
+  const connector = isLast ? TIMELINE.end : TIMELINE.connector;
+  const shortSha = (entry.sha || '').slice(0, 7);
+  const lamportStr = padLeft(String(entry.lamport), lamportWidth);
+  const opSummary = ensureOpSummary(entry);
+  const opSummaryStr = formatOpSummary(opSummary, writerStr ? 30 : 40);
+
+  if (writerStr) {
+    const paddedWriter = padRight(writerStr, maxWriterIdLen);
+    return `  ${connector}${TIMELINE.dot} ${colors.muted(`L${lamportStr}`)} ${colors.primary(paddedWriter)}:${colors.muted(shortSha)} ${opSummaryStr}`;
+  }
+  return `  ${connector}${TIMELINE.dot} ${colors.muted(`L${lamportStr}`)} ${colors.primary(shortSha)}  ${opSummaryStr}`;
+}
+
+/**
+ * Renders single-writer timeline header.
+ * @param {string} writer - Writer ID
+ * @returns {string[]} Header lines
+ */
+function renderSingleWriterHeader(writer) {
+  return [colors.bold(`  WRITER: ${writer}`), ''];
+}
+
+/**
+ * Renders single-writer timeline footer.
+ * @param {number} totalCount - Total entry count
+ * @returns {string[]} Footer lines
+ */
+function renderSingleWriterFooter(totalCount) {
+  const label = totalCount === 1 ? 'patch' : 'patches';
+  return ['', colors.muted(`  Total: ${totalCount} ${label}`)];
+}
+
+/**
+ * Renders single-writer timeline view.
+ * @param {Object} payload - History payload
+ * @param {Object} options - Rendering options
+ * @returns {string[]} Lines for the timeline
+ */
+function renderSingleWriterTimeline(payload, options) {
+  const { entries, writer } = payload;
+  const { pageSize = DEFAULT_PAGE_SIZE, showAll = false } = options;
+
+  const lines = renderSingleWriterHeader(writer);
+
+  if (entries.length === 0) {
+    lines.push(colors.muted('  (no patches)'));
+    return lines;
+  }
+
+  const { displayEntries, truncated, hiddenCount } = paginateEntries(entries, pageSize, showAll);
+  if (displayEntries.length === 0) {
+    lines.push(colors.muted('  (no patches)'));
+    return lines;
+  }
+  const maxLamport = Math.max(...displayEntries.map((e) => e.lamport));
+  const lamportWidth = String(maxLamport).length;
+
+  lines.push(...renderTruncationIndicator(truncated, hiddenCount));
+
+  for (let i = 0; i < displayEntries.length; i++) {
+    const isLast = i === displayEntries.length - 1;
+    lines.push(renderEntryLine({ entry: displayEntries[i], isLast, lamportWidth }));
+  }
+
+  lines.push(...renderSingleWriterFooter(entries.length));
+  return lines;
+}
+
+/**
+ * Merges and sorts entries from all writers by lamport timestamp.
+ * @param {Object} writers - Map of writerId to entries
+ * @returns {Object[]} Sorted entries with writerId attached
+ */
+function mergeWriterEntries(writers) {
+  const allEntries = [];
+  for (const [writerId, writerEntries] of Object.entries(writers)) {
+    for (const entry of writerEntries) {
+      allEntries.push({ ...entry, writerId });
+    }
+  }
+  allEntries.sort((a, b) => a.lamport - b.lamport || a.writerId.localeCompare(b.writerId));
+  return allEntries;
+}
+
+/**
+ * Renders multi-writer timeline header.
+ * @param {string} graph - Graph name
+ * @param {number} writerCount - Number of writers
+ * @returns {string[]} Header lines
+ */
+function renderMultiWriterHeader(graph, writerCount) {
+  return [
+    colors.bold(`  GRAPH: ${graph}`),
+    colors.muted(`  Writers: ${writerCount}`),
+    '',
+  ];
+}
+
+/**
+ * Renders multi-writer timeline footer.
+ * @param {number} totalCount - Total entry count
+ * @param {number} writerCount - Number of writers
+ * @returns {string[]} Footer lines
+ */
+function renderMultiWriterFooter(totalCount, writerCount) {
+  const label = totalCount === 1 ? 'patch' : 'patches';
+  return ['', colors.muted(`  Total: ${totalCount} ${label} across ${writerCount} writers`)];
+}
+
+/**
+ * Renders multi-writer timeline view with parallel columns.
+ * @param {Object} payload - History payload with allWriters data
+ * @param {Object} options - Rendering options
+ * @returns {string[]} Lines for the timeline
+ */
+function renderMultiWriterTimeline(payload, options) {
+  const { writers, graph } = payload;
+  const { pageSize = DEFAULT_PAGE_SIZE, showAll = false } = options;
+  const writerIds = Object.keys(writers);
+
+  const lines = renderMultiWriterHeader(graph, writerIds.length);
+
+  if (writerIds.length === 0) {
+    lines.push(colors.muted('  (no writers)'));
+    return lines;
+  }
+
+  const allEntries = mergeWriterEntries(writers);
+
+  if (allEntries.length === 0) {
+    lines.push(colors.muted('  (no patches)'));
+    return lines;
+  }
+
+  const { displayEntries, truncated, hiddenCount } = paginateEntries(allEntries, pageSize, showAll);
+  if (displayEntries.length === 0) {
+    lines.push(colors.muted('  (no patches)'));
+    return lines;
+  }
+  const maxLamport = Math.max(...displayEntries.map((e) => e.lamport));
+  const lamportWidth = String(maxLamport).length;
+  const maxWriterIdLen = Math.max(...writerIds.map((id) => id.length), 6);
+
+  lines.push(...renderTruncationIndicator(truncated, hiddenCount));
+
+  for (let i = 0; i < displayEntries.length; i++) {
+    const entry = displayEntries[i];
+    const isLast = i === displayEntries.length - 1;
+    lines.push(renderEntryLine({
+      entry,
+      isLast,
+      lamportWidth,
+      writerStr: entry.writerId,
+      maxWriterIdLen,
+    }));
+  }
+
+  lines.push(...renderMultiWriterFooter(allEntries.length, writerIds.length));
+  return lines;
+}
+
+/**
+ * Renders the history view with ASCII timeline.
+ * @param {Object} payload - History payload from handleHistory
+ * @param {string} payload.graph - Graph name
+ * @param {string} [payload.writer] - Writer ID (single writer mode)
+ * @param {string|null} [payload.nodeFilter] - Node filter if applied
+ * @param {Object[]} [payload.entries] - Array of patch entries (single writer mode)
+ * @param {Object} [payload.writers] - Map of writerId to entries (multi-writer mode)
+ * @param {Object} [options] - Rendering options
+ * @param {number} [options.pageSize=20] - Number of patches to show per page
+ * @param {boolean} [options.showAll=false] - Show all patches (no pagination)
+ * @returns {string} Formatted ASCII output
+ */
+export function renderHistoryView(payload, options = {}) {
+  if (!payload) {
+    return `${colors.error('No data available')}\n`;
+  }
+
+  const isMultiWriter = payload.writers && typeof payload.writers === 'object';
+  const contentLines = isMultiWriter
+    ? renderMultiWriterTimeline(payload, options)
+    : renderSingleWriterTimeline(payload, options);
+
+  // Add node filter indicator if present
+  if (payload.nodeFilter) {
+    contentLines.splice(1, 0, colors.muted(`  Filter: node=${payload.nodeFilter}`));
+  }
+
+  const content = contentLines.join('\n');
+
+  const box = createBox(content, {
+    title: 'PATCH HISTORY',
+    titleAlignment: 'center',
+    borderColor: 'cyan',
+  });
+
+  return `${box}\n`;
+}
+
+export { summarizeOps };
+
+export default { renderHistoryView, summarizeOps };

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

@@ -0,0 +1,14 @@
+/**
+ * ASCII renderer exports
+ */
+
+export { colors, default as colorsDefault } from './colors.js';
+export { createBox } from './box.js';
+export { createTable } from './table.js';
+export { progressBar } from './progress.js';
+export { renderInfoView } from './info.js';
+export { renderCheckView } from './check.js';
+export { renderMaterializeView } from './materialize.js';
+export { renderHistoryView, summarizeOps } from './history.js';
+export { renderPathView } from './path.js';
+export { renderGraphView } from './graph.js';

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

@@ -0,0 +1,245 @@
+/**
+ * ASCII renderer for the `info --view` command.
+ * Displays a beautiful box with graph summaries and writer timelines.
+ */
+
+import boxen from 'boxen';
+import stringWidth from 'string-width';
+import { colors } from './colors.js';
+import { padRight } from '../../utils/unicode.js';
+import { timeAgo } from '../../utils/time.js';
+import { TIMELINE } from './symbols.js';
+
+// Box drawing characters (info.js uses verbose key names for card rendering)
+const BOX = {
+  topLeft: '\u250C',     // ┌
+  topRight: '\u2510',    // ┐
+  bottomLeft: '\u2514',  // └
+  bottomRight: '\u2518', // ┘
+  horizontal: '\u2500',  // ─
+  vertical: '\u2502',    // │
+};
+
+// Maximum timeline width for patches
+const MAX_TIMELINE_WIDTH = 40;
+
+/**
+ * Builds a timeline string for a writer based on patch count.
+ * @param {number} patchCount - Number of patches
+ * @param {number} maxPatches - Maximum patches across all writers (for scaling)
+ * @returns {string} Timeline string like "────●────●────●────● (12 patches)"
+ */
+function buildTimeline(patchCount, maxPatches) {
+  if (patchCount === 0) {
+    return colors.muted('(no patches)');
+  }
+
+  // Scale timeline width based on patch count relative to max
+  const scaledWidth = Math.max(
+    4,
+    Math.floor((patchCount / Math.max(maxPatches, 1)) * MAX_TIMELINE_WIDTH)
+  );
+
+  // Determine number of dots (max 8 dots for visual clarity)
+  const dotCount = Math.min(patchCount, 8);
+  const segmentWidth = Math.floor(scaledWidth / dotCount);
+
+  let timeline = '';
+  for (let i = 0; i < dotCount; i++) {
+    if (i > 0) {
+      timeline += colors.muted(TIMELINE.line.repeat(segmentWidth));
+    }
+    timeline += colors.primary(TIMELINE.dot);
+  }
+
+  // Add trailing line
+  const remaining = scaledWidth - (dotCount * segmentWidth);
+  if (remaining > 0) {
+    timeline += colors.muted(TIMELINE.line.repeat(remaining));
+  }
+
+  const patchLabel = patchCount === 1 ? 'patch' : 'patches';
+  return `${timeline} ${colors.muted(`(${patchCount} ${patchLabel})`)}`;
+}
+
+/**
+ * Builds the writer names display string.
+ * @param {string[]} writerIds - Array of writer IDs
+ * @returns {string} Formatted writer names
+ */
+function formatWriterNames(writerIds) {
+  if (writerIds.length === 0) {
+    return '';
+  }
+  const displayed = writerIds.slice(0, 5).join(', ');
+  return writerIds.length > 5 ? `${displayed}...` : displayed;
+}
+
+/**
+ * Renders the header lines for a graph card.
+ * @param {Object} graph - Graph info object
+ * @param {number} contentWidth - Available content width
+ * @returns {string[]} Header lines
+ */
+function renderCardHeader(graph, contentWidth) {
+  const lines = [];
+  const graphIcon = '\uD83D\uDCCA'; // 📊
+  const graphName = `${graphIcon} ${colors.bold(graph.name)}`;
+  lines.push(`${BOX.topLeft}${BOX.horizontal.repeat(contentWidth + 2)}${BOX.topRight}`);
+  lines.push(`${BOX.vertical} ${padRight(graphName, contentWidth)} ${BOX.vertical}`);
+
+  // Writers summary
+  const writerCount = graph.writers?.count ?? 0;
+  const writerIds = graph.writers?.ids ?? [];
+  const writerNames = formatWriterNames(writerIds);
+  const writerLine = writerNames
+    ? `Writers: ${writerCount} (${writerNames})`
+    : `Writers: ${writerCount}`;
+  lines.push(`${BOX.vertical} ${padRight(writerLine, contentWidth)} ${BOX.vertical}`);
+
+  return lines;
+}
+
+/**
+ * Renders writer timeline lines for a graph card.
+ * @param {Object} writerPatches - Map of writerId to patch count
+ * @param {number} contentWidth - Available content width
+ * @returns {string[]} Timeline lines
+ */
+function renderWriterTimelines(writerPatches, contentWidth) {
+  if (!writerPatches || Object.keys(writerPatches).length === 0) {
+    return [];
+  }
+
+  const lines = [];
+  const patchCounts = Object.values(writerPatches);
+  const maxPatches = Math.max(...patchCounts, 1);
+
+  // Find the longest writer ID for alignment
+  const maxWriterIdLen = Math.max(
+    ...Object.keys(writerPatches).map((id) => stringWidth(id)),
+    6
+  );
+
+  for (const [writerId, patchCount] of Object.entries(writerPatches)) {
+    const paddedId = padRight(writerId, maxWriterIdLen);
+    const timeline = buildTimeline(patchCount, maxPatches);
+    const writerTimeline = `  ${colors.muted(paddedId)} ${timeline}`;
+    lines.push(`${BOX.vertical} ${padRight(writerTimeline, contentWidth)} ${BOX.vertical}`);
+  }
+
+  return lines;
+}
+
+/**
+ * Renders checkpoint and coverage lines for a graph card.
+ * @param {Object} graph - Graph info object
+ * @param {number} contentWidth - Available content width
+ * @returns {string[]} Status lines
+ */
+function renderCardStatus(graph, contentWidth) {
+  const lines = [];
+
+  // Checkpoint info
+  if (graph.checkpoint) {
+    const { sha, date } = graph.checkpoint;
+    if (sha) {
+      const shortSha = sha.slice(0, 7);
+      const timeStr = date ? timeAgo(date) : '';
+      const checkIcon = colors.success('\u2713'); // ✓
+      const timePart = timeStr ? ` (${timeStr})` : '';
+      const checkpointLine = `Checkpoint: ${shortSha}${timePart} ${checkIcon}`;
+      lines.push(`${BOX.vertical} ${padRight(checkpointLine, contentWidth)} ${BOX.vertical}`);
+    } else {
+      const warnIcon = colors.warning('\u26A0'); // ⚠
+      const noCheckpointLine = `Checkpoint: none ${warnIcon}`;
+      lines.push(`${BOX.vertical} ${padRight(noCheckpointLine, contentWidth)} ${BOX.vertical}`);
+    }
+  }
+
+  // Coverage info (if present)
+  if (graph.coverage?.sha) {
+    const shortSha = graph.coverage.sha.slice(0, 7);
+    const coverageLine = `Coverage: ${shortSha}`;
+    lines.push(`${BOX.vertical} ${padRight(colors.muted(coverageLine), contentWidth)} ${BOX.vertical}`);
+  }
+
+  return lines;
+}
+
+/**
+ * Renders a single graph card.
+ * @param {Object} graph - Graph info object
+ * @param {number} innerWidth - Available width inside the card
+ * @returns {string[]} Array of lines for this graph card
+ */
+function renderGraphCard(graph, innerWidth) {
+  const contentWidth = innerWidth - 4; // Account for │ padding on each side
+
+  const headerLines = renderCardHeader(graph, contentWidth);
+  const timelineLines = renderWriterTimelines(graph.writerPatches, contentWidth);
+  const statusLines = renderCardStatus(graph, contentWidth);
+  const bottomBorder = `${BOX.bottomLeft}${BOX.horizontal.repeat(contentWidth + 2)}${BOX.bottomRight}`;
+
+  return [...headerLines, ...timelineLines, ...statusLines, bottomBorder];
+}
+
+/**
+ * Renders the info view with ASCII box art.
+ * @param {Object} data - Info payload from handleInfo
+ * @param {string} data.repo - Repository path
+ * @param {Object[]} data.graphs - Array of graph info objects
+ * @returns {string} Formatted ASCII output
+ */
+export function renderInfoView(data) {
+  if (!data || !data.graphs) {
+    return `${colors.error('No data available')}\n`;
+  }
+
+  const { graphs } = data;
+
+  if (graphs.length === 0) {
+    const content = colors.muted('No WARP graphs found in this repository.');
+    const box = boxen(content, {
+      title: 'WARP GRAPHS',
+      titleAlignment: 'center',
+      padding: 1,
+      borderStyle: 'double',
+      borderColor: 'cyan',
+    });
+    return `${box}\n`;
+  }
+
+  // Calculate inner width (for consistent card sizing)
+  const innerWidth = 60;
+
+  // Build content
+  const contentLines = [];
+
+  for (let i = 0; i < graphs.length; i++) {
+    const graph = graphs[i];
+    const cardLines = renderGraphCard(graph, innerWidth);
+
+    // Add spacing between cards
+    if (i > 0) {
+      contentLines.push('');
+    }
+
+    contentLines.push(...cardLines);
+  }
+
+  const content = contentLines.join('\n');
+
+  // Wrap in outer box
+  const output = boxen(content, {
+    title: 'WARP GRAPHS IN REPOSITORY',
+    titleAlignment: 'center',
+    padding: 1,
+    borderStyle: 'double',
+    borderColor: 'cyan',
+  });
+
+  return `${output}\n`;
+}
+
+export default { renderInfoView };