@git-stunts/git-warp 10.1.1

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

@@ -0,0 +1,255 @@
+/**
+ * Materialize command ASCII visualization renderer.
+ *
+ * Renders a visual dashboard showing materialization results with
+ * progress indicators, statistics bar charts, and checkpoint info.
+ */
+
+import { createBox } from './box.js';
+import { progressBar } from './progress.js';
+import { colors } from './colors.js';
+import { padRight } from '../../utils/unicode.js';
+import { truncate } from '../../utils/truncate.js';
+import { formatNumber, formatSha } from './formatters.js';
+
+// Bar chart settings
+const BAR_WIDTH = 20;
+const STAT_LABEL_WIDTH = 12;
+
+/**
+ * Create a scaled bar for statistics display.
+ * @param {number} value - The value to display
+ * @param {number} maxValue - Maximum value for scaling (0 = no scaling)
+ * @param {number} width - Bar width in characters
+ * @returns {string} Formatted bar string
+ */
+function statBar(value, maxValue, width = BAR_WIDTH) {
+  if (maxValue === 0 || value === 0) {
+    return colors.muted('\u2591'.repeat(width));
+  }
+  const percent = Math.min(100, (value / maxValue) * 100);
+  const filledCount = Math.round((percent / 100) * width);
+  const emptyCount = width - filledCount;
+  const bar = '\u2588'.repeat(filledCount) + '\u2591'.repeat(emptyCount);
+  return colors.primary(bar);
+}
+
+/**
+ * Render graph header with icon and name.
+ * @param {string} graphName - Name of the graph
+ * @returns {string[]} Header lines
+ */
+function renderGraphHeader(graphName) {
+  const graphIcon = '\uD83D\uDCCA'; // 📊
+  return [`  ${graphIcon} ${colors.bold(graphName)}`, ''];
+}
+
+/**
+ * Render error state for a graph.
+ * @param {string} errorMessage - Error message
+ * @returns {string[]} Error lines
+ */
+function renderErrorState(errorMessage) {
+  return [`  ${colors.error('\u2717')} Error: ${errorMessage}`];
+}
+
+/**
+ * Render no-op state (already materialized).
+ * @param {Object} graph - Graph data
+ * @returns {string[]} No-op state lines
+ */
+function renderNoOpState(graph) {
+  const lines = [
+    `  ${colors.success('\u2713')} Already materialized (no new patches)`,
+    '',
+    `  ${padRight('Nodes:', STAT_LABEL_WIDTH)} ${formatNumber(graph.nodes)}`,
+    `  ${padRight('Edges:', STAT_LABEL_WIDTH)} ${formatNumber(graph.edges)}`,
+  ];
+  if (typeof graph.properties === 'number') {
+    lines.push(`  ${padRight('Properties:', STAT_LABEL_WIDTH)} ${formatNumber(graph.properties)}`);
+  }
+  return lines;
+}
+
+/**
+ * Render empty graph state (0 patches).
+ * @param {Object} graph - Graph data
+ * @returns {string[]} Empty state lines
+ */
+function renderEmptyState(graph) {
+  const lines = [`  ${colors.muted('Empty graph (0 patches)')}`, ''];
+  if (graph.checkpoint) {
+    lines.push(`  Checkpoint: ${formatSha(graph.checkpoint)} ${colors.success('\u2713')}`);
+  }
+  return lines;
+}
+
+/**
+ * Render writer progress section.
+ * @param {Object} writers - Writer patch counts
+ * @returns {string[]} Writer lines
+ */
+function renderWriterSection(writers) {
+  if (!writers || Object.keys(writers).length === 0) {
+    return [];
+  }
+  const lines = [`  ${colors.dim('Writers:')}`];
+  const writerEntries = Object.entries(writers);
+  const maxPatches = Math.max(...writerEntries.map(([, p]) => p), 1);
+  const maxWriterWidth = Math.min(Math.max(...writerEntries.map(([id]) => id.length), 6), 16);
+  for (const [writerId, patchCount] of writerEntries) {
+    const bar = progressBar(Math.round((patchCount / maxPatches) * 100), 15, { showPercent: false });
+    const displayId = truncate(writerId, maxWriterWidth);
+    lines.push(`    ${padRight(displayId, maxWriterWidth)} ${bar} ${patchCount} patches`);
+  }
+  lines.push('');
+  return lines;
+}
+
+/**
+ * Render statistics section with bar charts.
+ * @param {Object} graph - Graph data
+ * @param {Object} maxValues - Max values for scaling
+ * @returns {string[]} Statistics lines
+ */
+function renderStatsSection(graph, { maxNodes, maxEdges, maxProps }) {
+  const lines = [
+    `  ${colors.dim('Statistics:')}`,
+    `  ${padRight('Nodes:', STAT_LABEL_WIDTH)} ${statBar(graph.nodes, maxNodes)} ${formatNumber(graph.nodes)}`,
+    `  ${padRight('Edges:', STAT_LABEL_WIDTH)} ${statBar(graph.edges, maxEdges)} ${formatNumber(graph.edges)}`,
+  ];
+  if (typeof graph.properties === 'number') {
+    lines.push(`  ${padRight('Properties:', STAT_LABEL_WIDTH)} ${statBar(graph.properties, maxProps)} ${formatNumber(graph.properties)}`);
+  }
+  lines.push('');
+  return lines;
+}
+
+/**
+ * Render checkpoint info line.
+ * @param {string|null} checkpoint - Checkpoint SHA or null
+ * @returns {string[]} Checkpoint lines
+ */
+function renderCheckpointInfo(checkpoint) {
+  if (checkpoint) {
+    return [`  Checkpoint: ${formatSha(checkpoint)} ${colors.success('\u2713 created')}`];
+  }
+  return [`  Checkpoint: ${colors.warning('none')}`];
+}
+
+/**
+ * Render a single graph's materialization result.
+ * @param {Object} graph - Graph result from materialize
+ * @param {Object} maxValues - Max values for scaling bars
+ * @returns {string[]} Array of lines for this graph
+ */
+function renderGraphResult(graph, maxValues) {
+  const lines = [...renderGraphHeader(graph.graph)];
+
+  if (graph.error) {
+    return [...lines, ...renderErrorState(graph.error)];
+  }
+  if (graph.noOp) {
+    return [...lines, ...renderNoOpState(graph)];
+  }
+  if (graph.patchCount === 0) {
+    return [...lines, ...renderEmptyState(graph)];
+  }
+
+  lines.push(...renderWriterSection(graph.writers));
+  lines.push(...renderStatsSection(graph, maxValues));
+  lines.push(...renderCheckpointInfo(graph.checkpoint));
+  return lines;
+}
+
+/**
+ * Calculate max values for scaling bar charts.
+ * @param {Object[]} graphs - Array of graph results
+ * @returns {Object} Max values object
+ */
+function calculateMaxValues(graphs) {
+  const successfulGraphs = graphs.filter((g) => !g.error);
+  return {
+    maxNodes: Math.max(...successfulGraphs.map((g) => g.nodes || 0), 1),
+    maxEdges: Math.max(...successfulGraphs.map((g) => g.edges || 0), 1),
+    maxProps: Math.max(...successfulGraphs.map((g) => g.properties || 0), 1),
+  };
+}
+
+/**
+ * Build summary line based on success/failure counts.
+ * @param {number} successCount - Number of successful graphs
+ * @param {number} errorCount - Number of failed graphs
+ * @returns {string} Summary line
+ */
+function buildSummaryLine(successCount, errorCount) {
+  if (errorCount === 0) {
+    const plural = successCount !== 1 ? 's' : '';
+    return `  ${colors.success('\u2713')} ${successCount} graph${plural} materialized successfully`;
+  }
+  if (successCount === 0) {
+    const plural = errorCount !== 1 ? 's' : '';
+    return `  ${colors.error('\u2717')} ${errorCount} graph${plural} failed`;
+  }
+  return `  ${colors.warning('\u26A0')} ${successCount} succeeded, ${errorCount} failed`;
+}
+
+/**
+ * Determine border color based on success/failure counts.
+ * @param {number} successCount - Number of successful graphs
+ * @param {number} errorCount - Number of failed graphs
+ * @returns {string} Border color name
+ */
+function getBorderColor(successCount, errorCount) {
+  if (errorCount > 0 && successCount === 0) {
+    return 'red';
+  }
+  if (errorCount > 0) {
+    return 'yellow';
+  }
+  return 'green';
+}
+
+/**
+ * Render the materialize view dashboard.
+ * @param {Object} payload - The materialize command payload
+ * @param {Object[]} payload.graphs - Array of graph results
+ * @returns {string} Formatted dashboard string
+ */
+export function renderMaterializeView(payload) {
+  if (!payload || !payload.graphs) {
+    return `${colors.error('No data available')}\n`;
+  }
+
+  const { graphs } = payload;
+
+  if (graphs.length === 0) {
+    const content = colors.muted('No WARP graphs found in this repository.');
+    return `${createBox(content, { title: 'MATERIALIZE', titleAlignment: 'center', borderColor: 'cyan' })}\n`;
+  }
+
+  const maxValues = calculateMaxValues(graphs);
+  const lines = [];
+  const separator = colors.muted(`  ${'\u2500'.repeat(50)}`);
+
+  for (let i = 0; i < graphs.length; i++) {
+    if (i > 0) {
+      lines.push('', separator, '');
+    }
+    lines.push(...renderGraphResult(graphs[i], maxValues));
+  }
+
+  const successCount = graphs.filter((g) => !g.error).length;
+  const errorCount = graphs.length - successCount;
+  lines.push('', buildSummaryLine(successCount, errorCount));
+
+  const box = createBox(lines.join('\n'), {
+    title: 'MATERIALIZE',
+    titleAlignment: 'center',
+    borderColor: getBorderColor(successCount, errorCount),
+  });
+
+  return `${box}\n`;
+}
+
+export default { renderMaterializeView };

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

@@ -0,0 +1,240 @@
+/**
+ * ASCII renderer for the `path --view` command.
+ * Displays the shortest path between two nodes as a connected chain.
+ */
+
+import stringWidth from 'string-width';
+import { createBox } from './box.js';
+import { colors } from './colors.js';
+import { ARROW } from './symbols.js';
+
+// Default terminal width for wrapping
+const DEFAULT_TERMINAL_WIDTH = 80;
+
+// Box content padding (for inner width calculation)
+const BOX_PADDING = 4;
+
+/**
+ * Formats a node ID for display, truncating if necessary.
+ * @param {string} nodeId - The node ID to format
+ * @param {number} [maxLen=20] - Maximum length before truncation
+ * @returns {string} Formatted node ID with brackets
+ */
+function formatNode(nodeId, maxLen = 20) {
+  if (!nodeId || typeof nodeId !== 'string') {
+    return '[?]';
+  }
+  const truncated = nodeId.length > maxLen
+    ? `${nodeId.slice(0, maxLen - 1)}\u2026`
+    : nodeId;
+  return `[${truncated}]`;
+}
+
+/**
+ * Creates an arrow string for connecting nodes.
+ * @param {string} [label] - Optional edge label to display on the arrow
+ * @returns {string} Arrow string like " ---> " or " --label--> "
+ */
+function createArrow(label) {
+  if (label && typeof label === 'string') {
+    return ` ${ARROW.line}${ARROW.line}${label}${ARROW.line}${ARROW.line}${ARROW.right} `;
+  }
+  return ` ${ARROW.line}${ARROW.line}${ARROW.line}${ARROW.right} `;
+}
+
+/**
+ * Checks if a segment fits on the current line.
+ * @param {number} currentWidth - Current line width
+ * @param {number} segmentWidth - Width of segment to add
+ * @param {number} maxWidth - Maximum line width
+ * @returns {boolean} Whether the segment fits
+ */
+function segmentFits(currentWidth, segmentWidth, maxWidth) {
+  return currentWidth === 0 || currentWidth + segmentWidth <= maxWidth;
+}
+
+/**
+ * Creates a path segment with node and optional arrow.
+ * @param {Object} opts - Segment options
+ * @param {string} opts.nodeId - Node ID
+ * @param {number} opts.index - Position in path
+ * @param {number} opts.pathLength - Total path length
+ * @param {string[]} [opts.edges] - Optional edge labels
+ * @returns {{segment: string, width: number}} Segment string and its width
+ */
+function createPathSegment({ nodeId, index, pathLength, edges }) {
+  const node = formatNode(nodeId);
+  const isEndpoint = index === 0 || index === pathLength - 1;
+  const coloredNode = isEndpoint ? colors.primary(node) : node;
+  const arrow = index < pathLength - 1 ? createArrow(edges?.[index]) : '';
+  const segment = coloredNode + arrow;
+  return { segment, width: stringWidth(segment) };
+}
+
+/**
+ * Builds path segments that fit within the terminal width.
+ * Wraps long paths to multiple lines.
+ * @param {string[]} path - Array of node IDs
+ * @param {string[]} [edges] - Optional array of edge labels (one fewer than nodes)
+ * @param {number} maxWidth - Maximum line width
+ * @returns {string[]} Array of line strings
+ */
+function buildPathLines(path, edges, maxWidth) {
+  if (!path || path.length === 0) {
+    return [];
+  }
+
+  if (path.length === 1) {
+    return [colors.primary(formatNode(path[0]))];
+  }
+
+  const lines = [];
+  let currentLine = '';
+  let currentWidth = 0;
+
+  for (let i = 0; i < path.length; i++) {
+    const { segment, width } = createPathSegment({
+      nodeId: path[i],
+      index: i,
+      pathLength: path.length,
+      edges,
+    });
+
+    if (!segmentFits(currentWidth, width, maxWidth)) {
+      lines.push(currentLine);
+      currentLine = `  ${segment}`;
+      currentWidth = 2 + width;
+    } else {
+      currentLine += segment;
+      currentWidth += width;
+    }
+  }
+
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  return lines;
+}
+
+/**
+ * Renders the "no path found" case.
+ * @param {string} from - Source node ID
+ * @param {string} to - Target node ID
+ * @returns {string} Formatted ASCII output
+ */
+function renderNoPath(from, to) {
+  const lines = [
+    `  ${colors.error('No path found')}`,
+    '',
+    `  From: ${colors.primary(from || '?')}`,
+    `  To:   ${colors.primary(to || '?')}`,
+    '',
+    `  ${colors.muted('The nodes may be disconnected or unreachable')}`,
+    `  ${colors.muted('with the given traversal direction.')}`,
+  ];
+
+  return createBox(lines.join('\n'), {
+    title: 'PATH',
+    titleAlignment: 'center',
+    borderColor: 'red',
+  });
+}
+
+/**
+ * Renders the "already at destination" case (from === to).
+ * @param {string} nodeId - The node ID
+ * @returns {string} Formatted ASCII output
+ */
+function renderSameNode(nodeId) {
+  const lines = [
+    `  ${colors.success('Already at destination')}`,
+    '',
+    `  ${colors.primary(formatNode(nodeId))}`,
+    '',
+    `  ${colors.muted('Start and end are the same node.')}`,
+  ];
+
+  return createBox(lines.join('\n'), {
+    title: 'PATH',
+    titleAlignment: 'center',
+    borderColor: 'green',
+  });
+}
+
+/**
+ * Renders a found path.
+ * @param {Object} payload - Path payload
+ * @param {string} payload.graph - Graph name
+ * @param {string} payload.from - Source node ID
+ * @param {string} payload.to - Target node ID
+ * @param {string[]} payload.path - Array of node IDs in the path
+ * @param {number} payload.length - Path length (number of edges)
+ * @param {string[]} [payload.edges] - Optional array of edge labels
+ * @param {number} [terminalWidth] - Terminal width for wrapping
+ * @returns {string} Formatted ASCII output
+ */
+function renderFoundPath(payload, terminalWidth = DEFAULT_TERMINAL_WIDTH) {
+  const { graph, path, length, edges } = payload;
+
+  // Calculate available width for path (account for box borders and padding)
+  const maxWidth = Math.max(40, terminalWidth - BOX_PADDING - 4);
+
+  const hopLabel = length === 1 ? 'hop' : 'hops';
+  const pathLines = buildPathLines(path, edges, maxWidth);
+
+  const lines = [
+    `  Graph:  ${colors.muted(graph || 'unknown')}`,
+    `  Length: ${colors.success(String(length))} ${hopLabel}`,
+    '',
+  ];
+
+  // Add path visualization
+  for (const line of pathLines) {
+    lines.push(`  ${line}`);
+  }
+
+  return createBox(lines.join('\n'), {
+    title: `PATH: ${path[0] || '?'} ${ARROW.right} ${path[path.length - 1] || '?'}`,
+    titleAlignment: 'center',
+    borderColor: 'green',
+  });
+}
+
+/**
+ * Renders the path view.
+ * @param {Object} payload - The path command payload
+ * @param {string} payload.graph - Graph name
+ * @param {string} payload.from - Source node ID
+ * @param {string} payload.to - Target node ID
+ * @param {boolean} payload.found - Whether a path was found
+ * @param {string[]} payload.path - Array of node IDs in the path
+ * @param {number} payload.length - Path length (number of edges)
+ * @param {string[]} [payload.edges] - Optional array of edge labels
+ * @param {Object} [options] - Rendering options
+ * @param {number} [options.terminalWidth] - Terminal width for wrapping
+ * @returns {string} Formatted ASCII output
+ */
+export function renderPathView(payload, options = {}) {
+  if (!payload) {
+    return `${colors.error('No data available')}\n`;
+  }
+
+  const { from, to, found, path, length } = payload;
+  const terminalWidth = options.terminalWidth || process.stdout.columns || DEFAULT_TERMINAL_WIDTH;
+
+  // Handle "no path found" case
+  if (!found) {
+    return `${renderNoPath(from, to)}\n`;
+  }
+
+  // Handle "already at destination" case (from === to, length === 0)
+  if (length === 0 && path && path.length === 1) {
+    return `${renderSameNode(path[0])}\n`;
+  }
+
+  // Render the found path
+  return `${renderFoundPath(payload, terminalWidth)}\n`;
+}
+
+export default { renderPathView };

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

@@ -0,0 +1,32 @@
+import chalk from 'chalk';
+
+/**
+ * Renders a colored progress bar string.
+ *
+ * Color thresholds: green >= 80%, yellow >= 50%, red < 50%.
+ *
+ * @param {number} percent - Percentage value (clamped to 0-100)
+ * @param {number} [width=20] - Character width of the bar
+ * @param {Object} [options] - Display options
+ * @param {string} [options.filled='█'] - Character for filled segments
+ * @param {string} [options.empty='░'] - Character for empty segments
+ * @param {boolean} [options.showPercent=true] - Whether to append the percentage value
+ * @returns {string} The rendered progress bar with ANSI colors
+ */
+export function progressBar(percent, width = 20, options = {}) {
+  const clampedPercent = Math.max(0, Math.min(100, percent));
+  const { filled = '█', empty = '░', showPercent = true } = options;
+  const filledCount = Math.round((clampedPercent / 100) * width);
+  const emptyCount = width - filledCount;
+
+  let bar = filled.repeat(filledCount) + empty.repeat(emptyCount);
+
+  // Color based on value
+  if (clampedPercent >= 80) {bar = chalk.green(bar);}
+  else if (clampedPercent >= 50) {bar = chalk.yellow(bar);}
+  else {bar = chalk.red(bar);}
+
+  return showPercent ? `${bar} ${clampedPercent}%` : bar;
+}
+
+export default { progressBar };

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

@@ -0,0 +1,33 @@
+/**
+ * Shared Unicode symbol constants for ASCII renderers.
+ *
+ * Extracted from history.js, info.js, path.js, and graph.js to eliminate
+ * duplicate character constant definitions across renderers.
+ */
+
+/** Timeline characters for patch history and writer timelines. */
+export const TIMELINE = {
+  vertical: '\u2502',     // │
+  dot: '\u25CF',          // ●
+  connector: '\u251C',    // ├
+  end: '\u2514',          // └
+  top: '\u250C',          // ┌
+  line: '\u2500',         // ─
+};
+
+/** Arrow characters for path and graph visualization. */
+export const ARROW = {
+  line: '\u2500',      // ─
+  right: '\u25B6',     // ▶
+  left: '\u25C0',      // ◀
+  down: '\u25BC',      // ▼
+  up: '\u25B2',        // ▲
+};
+
+/** Tree characters for hierarchical displays. */
+export const TREE = {
+  branch: '\u251C',    // ├
+  last: '\u2514',      // └
+  vertical: '\u2502',  // │
+  space: ' ',
+};

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

@@ -0,0 +1,19 @@
+import Table from 'cli-table3';
+
+/**
+ * Creates a cli-table3 instance with default WARP styling.
+ *
+ * @param {Object} [options] - Options forwarded to cli-table3 constructor
+ * @param {string[]} [options.head] - Column headers
+ * @param {Object} [options.style] - Style overrides (defaults: head=cyan, border=gray)
+ * @returns {import('cli-table3')} A cli-table3 instance
+ */
+export function createTable(options = {}) {
+  const defaultStyle = { head: ['cyan'], border: ['gray'] };
+  return new Table({
+    ...options,
+    style: { ...defaultStyle, ...options.style },
+  });
+}
+
+export default createTable;

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

@@ -0,0 +1 @@
+// Placeholder for M5