@git-stunts/git-warp 10.1.1

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

@@ -0,0 +1,159 @@
+/**
+ * SVG renderer: generates an SVG string from a PositionedGraph.
+ *
+ * No jsdom or D3 dependency — pure string templating.
+ */
+
+const PADDING = 40;
+
+const PALETTE = {
+  bg: '#1e1e2e',
+  nodeFill: '#313244',
+  nodeStroke: '#89b4fa',
+  nodeText: '#cdd6f4',
+  edgeStroke: '#a6adc8',
+  edgeLabel: '#bac2de',
+  arrowFill: '#a6adc8',
+};
+
+function escapeXml(str) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function renderDefs() {
+  return [
+    '<defs>',
+    '  <marker id="arrowhead" markerWidth="10" markerHeight="7"',
+    `    refX="10" refY="3.5" orient="auto" fill="${PALETTE.arrowFill}">`,
+    '    <polygon points="0 0, 10 3.5, 0 7"/>',
+    '  </marker>',
+    '</defs>',
+  ].join('\n');
+}
+
+function renderStyle() {
+  return [
+    '<style>',
+    `  .node rect { fill: ${PALETTE.nodeFill}; stroke: ${PALETTE.nodeStroke}; stroke-width: 2; rx: 6; }`,
+    `  .node text { fill: ${PALETTE.nodeText}; font-family: monospace; font-size: 13px; dominant-baseline: central; text-anchor: middle; }`,
+    `  .edge polyline { fill: none; stroke: ${PALETTE.edgeStroke}; stroke-width: 1.5; marker-end: url(#arrowhead); }`,
+    `  .edge-label { fill: ${PALETTE.edgeLabel}; font-family: monospace; font-size: 11px; text-anchor: middle; }`,
+    '</style>',
+  ].join('\n');
+}
+
+function renderNode(node) {
+  const { x, y, width, height } = node;
+  const label = escapeXml(node.label ?? node.id);
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  return [
+    `<g class="node">`,
+    `  <rect x="${x}" y="${y}" width="${width}" height="${height}"/>`,
+    `  <text x="${cx}" y="${cy}">${label}</text>`,
+    '</g>',
+  ].join('\n');
+}
+
+function sectionToPoints(section) {
+  const pts = [];
+  if (section.startPoint) {
+    pts.push(section.startPoint);
+  }
+  if (section.bendPoints) {
+    pts.push(...section.bendPoints);
+  }
+  if (section.endPoint) {
+    pts.push(section.endPoint);
+  }
+  return pts;
+}
+
+function renderEdge(edge) {
+  const { sections } = edge;
+  if (!sections || sections.length === 0) {
+    return '';
+  }
+
+  const allPoints = [];
+  for (const s of sections) {
+    allPoints.push(...sectionToPoints(s));
+  }
+
+  if (allPoints.length < 2) {
+    return '';
+  }
+
+  const pointsStr = allPoints
+    .map((p) => `${p.x},${p.y}`)
+    .join(' ');
+
+  const lines = [
+    '<g class="edge">',
+    `  <polyline points="${pointsStr}"/>`,
+  ];
+
+  if (edge.label) {
+    const midIdx = Math.floor((allPoints.length - 1) / 2);
+    const a = allPoints[midIdx];
+    const b = allPoints[Math.min(midIdx + 1, allPoints.length - 1)];
+    const midX = (a.x + b.x) / 2;
+    const midY = (a.y + b.y) / 2;
+    lines.push(
+      `  <text class="edge-label" x="${midX}" y="${midY - 6}">${escapeXml(edge.label)}</text>`,
+    );
+  }
+
+  lines.push('</g>');
+  return lines.join('\n');
+}
+
+/**
+ * Renders a PositionedGraph as an SVG string.
+ *
+ * @param {Object} positionedGraph - PositionedGraph from runLayout()
+ * @param {{ title?: string }} [options]
+ * @returns {string} Complete SVG markup
+ */
+export function renderSvg(positionedGraph, options = {}) {
+  const { nodes = [], edges = [] } = positionedGraph;
+  const w = (positionedGraph.width ?? 400) + PADDING * 2;
+  const h = (positionedGraph.height ?? 300) + PADDING * 2;
+
+  const parts = [
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" width="${w}" height="${h}">`,
+  ];
+
+  if (options.title) {
+    parts.push(`<title>${escapeXml(options.title)}</title>`);
+  }
+
+  parts.push(`<rect width="100%" height="100%" fill="${PALETTE.bg}"/>`);
+  parts.push(renderDefs());
+  parts.push(renderStyle());
+
+  // Translate content to account for padding
+  parts.push(`<g transform="translate(${PADDING},${PADDING})">`);
+
+  // Edges first (behind nodes)
+  for (const edge of edges) {
+    const rendered = renderEdge(edge);
+    if (rendered) {
+      parts.push(rendered);
+    }
+  }
+
+  // Nodes on top
+  for (const node of nodes) {
+    parts.push(renderNode(node));
+  }
+
+  parts.push('</g>');
+  parts.push('</svg>');
+
+  return parts.join('\n');
+}

package/src/visualization/utils/ansi.js

@@ -0,0 +1,14 @@
+import stripAnsiLib from 'strip-ansi';
+
+/**
+ * Strips ANSI escape codes from a string.
+ * Used primarily for snapshot testing to get deterministic output.
+ *
+ * @param {string} str - The string potentially containing ANSI escape codes
+ * @returns {string} The string with all ANSI codes removed
+ */
+export function stripAnsi(str) {
+  return stripAnsiLib(str);
+}
+
+export default { stripAnsi };

package/src/visualization/utils/time.js

@@ -0,0 +1,40 @@
+/**
+ * Formats a date as a human-readable relative time string (e.g. "5m ago", "3d ago").
+ *
+ * @param {string|number|Date} date - The date to format (any value accepted by `new Date()`)
+ * @returns {string} Relative time string, or 'unknown' if the date is invalid
+ */
+export function timeAgo(date) {
+  const ts = new Date(date).getTime();
+  if (isNaN(ts)) {
+    return 'unknown';
+  }
+  const seconds = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+
+  if (seconds < 60) {return `${seconds}s ago`;}
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {return `${minutes}m ago`;}
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {return `${hours}h ago`;}
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+/**
+ * Formats a duration in milliseconds as a human-readable string (e.g. "150ms", "3s", "2m 30s").
+ *
+ * @param {number} ms - Duration in milliseconds
+ * @returns {string} Formatted duration string
+ */
+export function formatDuration(ms) {
+  if (typeof ms !== 'number' || Number.isNaN(ms) || ms < 0) { return 'unknown'; }
+  if (ms < 1000) { return `${ms}ms`; }
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) { return `${seconds}s`; }
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) { return `${minutes}m ${seconds % 60}s`; }
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+}
+
+export default { timeAgo, formatDuration };

package/src/visualization/utils/truncate.js

@@ -0,0 +1,40 @@
+import stringWidth from 'string-width';
+
+/**
+ * Truncates a string to a maximum display width, appending an ellipsis if needed.
+ * Handles wide characters (CJK, emoji) correctly via string-width.
+ *
+ * @param {string} str - The string to truncate
+ * @param {number} maxWidth - Maximum display width in columns
+ * @param {string} [ellipsis='…'] - The ellipsis character(s) to append when truncating
+ * @returns {string} The truncated string, or original if it fits within maxWidth
+ */
+export function truncate(str, maxWidth, ellipsis = '…') {
+  const ellipsisWidth = stringWidth(ellipsis);
+
+  // Guard degenerate cases
+  if (maxWidth <= 0) {
+    return '';
+  }
+  if (maxWidth <= ellipsisWidth) {
+    return ellipsis.slice(0, maxWidth);
+  }
+
+  if (stringWidth(str) <= maxWidth) {
+    return str;
+  }
+
+  let result = '';
+  let width = 0;
+
+  for (const char of str) {
+    const charWidth = stringWidth(char);
+    if (width + charWidth + ellipsisWidth > maxWidth) {break;}
+    result += char;
+    width += charWidth;
+  }
+
+  return result + ellipsis;
+}
+
+export default { truncate };

package/src/visualization/utils/unicode.js

@@ -0,0 +1,52 @@
+import stringWidth from 'string-width';
+
+/**
+ * Right-pads a string to a target display width.
+ * Handles wide characters correctly via string-width.
+ *
+ * @param {string} str - The string to pad
+ * @param {number} width - Target display width in columns
+ * @param {string} [char=' '] - The padding character
+ * @returns {string} The padded string, or original if already >= width
+ */
+export function padRight(str, width, char = ' ') {
+  const currentWidth = stringWidth(str);
+  if (currentWidth >= width) {return str;}
+  return str + char.repeat(width - currentWidth);
+}
+
+/**
+ * Left-pads a string to a target display width.
+ * Handles wide characters correctly via string-width.
+ *
+ * @param {string} str - The string to pad
+ * @param {number} width - Target display width in columns
+ * @param {string} [char=' '] - The padding character
+ * @returns {string} The padded string, or original if already >= width
+ */
+export function padLeft(str, width, char = ' ') {
+  const currentWidth = stringWidth(str);
+  if (currentWidth >= width) {return str;}
+  return char.repeat(width - currentWidth) + str;
+}
+
+/**
+ * Centers a string within a target display width.
+ * Handles wide characters correctly via string-width.
+ * Extra padding goes to the right when the total padding is odd.
+ *
+ * @param {string} str - The string to center
+ * @param {number} width - Target display width in columns
+ * @param {string} [char=' '] - The padding character
+ * @returns {string} The centered string, or original if already >= width
+ */
+export function center(str, width, char = ' ') {
+  const currentWidth = stringWidth(str);
+  if (currentWidth >= width) {return str;}
+  const padding = width - currentWidth;
+  const left = Math.floor(padding / 2);
+  const right = padding - left;
+  return char.repeat(left) + str + char.repeat(right);
+}
+
+export default { padRight, padLeft, center, stringWidth };