@percy/cli-command 1.32.0-beta.6 → 1.32.0-beta.8

package/dist/command.js

@@ -30,12 +30,20 @@ let shutdownState = {
 let activeContext = null;
 const DEFAULT_DRAIN_MS = 30_000;
 const HARD_EXIT_AFTER_FORCE_MS = 5_000;
-// POSIX-conventional signal exit codes: 128 + signal number.
-const EXIT_CODE_SIGINT = 130;
-const EXIT_CODE_SIGTERM = 143;
+// POSIX-conventional signal exit codes: 128 + signal number. SIGINT and
+// SIGTERM additionally engage drain semantics in beginShutdown; the
+// remaining signals only need an exit-code mapping so a signal-aborted
+// run never resolves as a false-positive success (PER-8678).
+const EXIT_CODE_SIGINT = 130; // 128 + 2
+const EXIT_CODE_SIGTERM = 143; // 128 + 15
 const SIGNAL_EXIT_CODES = {
   SIGINT: EXIT_CODE_SIGINT,
-  SIGTERM: EXIT_CODE_SIGTERM
+  SIGTERM: EXIT_CODE_SIGTERM,
+  SIGHUP: 129,
+  // 128 + 1
+  SIGUSR1: 138,
+  // 128 + 10
+  SIGUSR2: 140 // 128 + 12
 };
 
 // Begin or escalate drain. Idempotent on the same signal.
@@ -351,18 +359,32 @@ export function command(name, definition, callback) {
         if (err.exitCode === 0) log.warn(err.message);else log.error(err);
       }
 
-      // Signal-driven shutdown — when SIGINT/SIGTERM was received
-      // during this run, set the signal-derived exit code
-      // (130 SIGINT / 143 SIGTERM) and return. We deliberately set
-      // `process.exitCode` and unwind cleanly rather than calling
+      // Signal-driven shutdown — when ANY process signal aborted this
+      // run, set the signal-derived exit code (130 SIGINT / 143 SIGTERM
+      // / 129 SIGHUP / 138 SIGUSR1 / 140 SIGUSR2, defaulting to 1 for
+      // any other signal) and return. Keying off `err.signal` (set on
+      // the AbortError by the per-signal handler) rather than
+      // `shutdownState.signal` is deliberate: beginShutdown only records
+      // SIGINT/SIGTERM into shutdownState for drain semantics, so the
+      // old `shutdownState.signal` gate let SIGHUP/SIGUSR1/SIGUSR2 fall
+      // through to the exitCode-0 AbortError path and exit 0 — a
+      // false-positive CI success when a run was aborted during startup
+      // before the wrapped command launched (PER-8678). We deliberately
+      // set `process.exitCode` and unwind cleanly rather than calling
       // `process.exit()`, so the surrounding catch's finally block (and
       // the lockfile's `process.on('exit')` handler) still run. The
       // event loop drains naturally because the unref'd drain/hard-exit
       // timers don't keep it alive. Tests with `exitOnError: false`
       // preserve the legacy clean-resolution behavior because
-      // AbortError carries exitCode:0 and the gate below is skipped.
-      if (shutdownState.signal && err.signal && definition.exitOnError) {
-        let signalCode = SIGNAL_EXIT_CODES[shutdownState.signal];
+      // AbortError carries exitCode:0 and this gate is skipped.
+      if (err.signal && definition.exitOnError) {
+        // Defensive non-zero fallback: every signal in the registered
+        // handler set above is mapped in SIGNAL_EXIT_CODES, so the `?? 1`
+        // branch only fires if a future signal is added to the handler
+        // list without a code — kept non-zero so the false-positive
+        // success can't reappear (PER-8678).
+        /* istanbul ignore next */
+        let signalCode = SIGNAL_EXIT_CODES[err.signal] ?? 1;
         let percyExitWithZeroOnError = process.env.PERCY_EXIT_WITH_ZERO_ON_ERROR === 'true';
         process.exitCode = percyExitWithZeroOnError ? 0 : signalCode;
         return;

package/dist/graphTrace.js

@@ -0,0 +1,157 @@
+import fs from 'fs';
+import path from 'path';
+import url from 'url';
+
+// Template resolution mirrors core/utils.js's secretPatterns.yml lookup:
+// resolves relative to this file's URL so it works under src/ (dev) and
+// dist/ (installed) without bundler help. The .html file is copied alongside
+// by babel's copyFiles when cli-command is built.
+const TEMPLATE_PATH = path.resolve(url.fileURLToPath(import.meta.url), '../graphTraceTemplate.html');
+
+// Maps a (raw kind, changed) pair to the kind value the template expects:
+// 'package' | 'component' | 'story' | 'is_relevant'. `changed: true` wins
+// over the underlying kind so any node touched in the diff renders purple.
+function templateKindOf(v) {
+  if (v.changed) return 'is_relevant';
+  switch (v.kind) {
+    case 'dependency':
+      return 'package';
+    case 'component':
+      return 'component';
+    case 'story':
+      return 'story';
+    default:
+      return 'component';
+  }
+}
+
+// Sort order within a column: packages left, components middle, stories right.
+// `is_relevant` shares rank with components so a changed node doesn't jump
+// out of its own group — it just recolors.
+const KIND_RANK = {
+  package: 0,
+  component: 1,
+  is_relevant: 1,
+  story: 2
+};
+
+// Layout algorithm (ported from the original Ruby renderer):
+//   1. col = longest-path depth reaching the vertex (read from the
+//      transitive-closure triples the API sends), with dependencies pinned
+//      to col 0.
+//   2. Propagate over edges so col[target] > col[source]. Bounded loop
+//      guards against degenerate inputs.
+//   3. Stories pushed past the rightmost non-story column.
+//   4. Within each column, sort by (kind-rank, name) and assign row.
+function computeLayout(rawVertices, edges, transitiveClosure) {
+  const n = rawVertices.length;
+  const vertices = rawVertices.map((v, i) => ({
+    index: i,
+    name: v.file_path,
+    kind: v.kind,
+    changed: !!v.changed,
+    row: 0,
+    col: 0
+  }));
+
+  // 1. Seed col from incoming transitive-closure lengths.
+  const incomingMax = new Array(n).fill(0);
+  for (const triple of transitiveClosure) {
+    const [u, v, val] = triple;
+    if (u === v || val <= 0) continue;
+    if (v < 0 || v >= n) continue;
+    if (val > incomingMax[v]) incomingMax[v] = val;
+  }
+  for (let i = 0; i < n; i++) {
+    vertices[i].col = vertices[i].kind === 'dependency' ? 0 : incomingMax[i] + 1;
+  }
+
+  // 2. Propagate edge constraint. n+2 iterations is enough for any DAG
+  // and bounds the work on accidentally-cyclic input.
+  const iterations = n + 2;
+  for (let iter = 0; iter < iterations; iter++) {
+    let changed = false;
+    for (const [s, t] of edges) {
+      if (s < 0 || s >= n || t < 0 || t >= n) continue;
+      if (vertices[s].col < vertices[t].col) continue;
+      vertices[t].col = vertices[s].col + 1;
+      changed = true;
+    }
+    if (!changed) break;
+  }
+
+  // 3. Stories rightmost. Two passes: max across non-stories first, then
+  // push every story past that boundary. Folding into one loop would let
+  // stories visited before the last non-story keep a stale max.
+  let furthestNonStory = 0;
+  for (const v of vertices) {
+    if (v.kind === 'story') continue;
+    if (v.col > furthestNonStory) furthestNonStory = v.col;
+  }
+  for (const v of vertices) {
+    if (v.kind !== 'story') continue;
+    if (v.col < furthestNonStory + 1) v.col = furthestNonStory + 1;
+  }
+
+  // 4. Group by column, sort by (kind-rank, name), assign row.
+  const groups = new Map();
+  for (const v of vertices) {
+    let list = groups.get(v.col);
+    if (!list) groups.set(v.col, list = []);
+    list.push(v);
+  }
+  const rankOf = v => {
+    const r = KIND_RANK[templateKindOf(v)];
+    /* istanbul ignore next: templateKindOf always returns a kind present in
+       KIND_RANK, so the `=== undefined` fallback is defensive */
+    return r === undefined ? 99 : r;
+  };
+  for (const list of groups.values()) {
+    list.sort((a, b) => {
+      const ra = rankOf(a);
+      const rb = rankOf(b);
+      if (ra !== rb) return ra - rb;
+      // Byte-wise compare on name to match Ruby's String#<=> behaviour.
+      if (a.name < b.name) return -1;
+      if (a.name > b.name) return 1;
+      return 0;
+    });
+    list.forEach((v, row) => {
+      v.row = row;
+    });
+  }
+
+  // 5. Final shape the template consumes: drop `changed`, fold it into kind.
+  return vertices.map(v => ({
+    index: v.index,
+    name: v.name,
+    row: v.row,
+    col: v.col,
+    kind: templateKindOf(v)
+  }));
+}
+
+// Escapes characters that have meaning inside a <script> block so user-derived
+// strings (e.g. a vertex file_path) can't break out of the surrounding tag.
+// `</` covers `</script>`; `<!--`/`-->` cover HTML comment confusion; U+2028
+// and U+2029 are valid JSON but illegal in JS string literals pre-ES2019 and
+// have historically been XSS sinks.
+const LS = String.fromCharCode(0x2028);
+const PS = String.fromCharCode(0x2029);
+function safeJson(obj) {
+  return JSON.stringify(obj).replace(/<\//g, '<\\/').replace(/<!--/g, '<\\!--').replace(/--(!?)>/g, '--$1\\>').split(LS).join('\\u2028').split(PS).join('\\u2029');
+}
+
+// Populates the trace template with the three JSON payloads the page needs.
+// Input shape matches the API's graph data: `vertices` carries `kind`,
+// `file_path`, `changed`; `edges` and `transitive_closure_matrix_sparse`
+// are arrays of integer tuples.
+export function renderGraphTraceHtml({
+  vertices,
+  edges,
+  transitiveClosureMatrixSparse
+}) {
+  const laidOutVertices = computeLayout(vertices || [], edges || [], transitiveClosureMatrixSparse || []);
+  const template = fs.readFileSync(TEMPLATE_PATH, 'utf8');
+  return template.replace('__VERTICES_JSON__', safeJson(laidOutVertices)).replace('__EDGES_JSON__', safeJson(edges || [])).replace('__TRANSITIVE_CLOSURE_JSON__', safeJson(transitiveClosureMatrixSparse || []));
+}

package/dist/graphTraceTemplate.html

@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Smartsnap Graph</title>
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/drawflow@0.0.60/dist/drawflow.min.css"
+        integrity="sha384-IFh+Q6zh+LRcTjqVmAKetdGY59dT485vtvWT5DAKQy8iv5+fYWHXisHP7mFKcFqV"
+        crossorigin="anonymous">
+    <script
+        src="https://cdn.jsdelivr.net/npm/drawflow@0.0.60/dist/drawflow.min.js"
+        integrity="sha384-JsnM4f1X8b5e9VbQCj6Bt6840HQNDYVKohzbXJnqOetMno8i6cmKNLVkyK3snqSw"
+        crossorigin="anonymous"></script>
+    <style>
+        html, body {
+            margin: 0; padding: 0;
+            font-family: sans-serif; background: #fafafa;
+            width: 100%; height: 100%; overflow: hidden;
+        }
+        #drawflow {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: #fafafa;
+        }
+        #legend {
+            position: fixed; top: 8px; right: 8px;
+            background: rgba(255,255,255,0.95);
+            padding: 8px 12px; border: 1px solid #999;
+            font-size: 12px; z-index: 100;
+        }
+        #legend span {
+            display: inline-block; width: 12px; height: 12px;
+            vertical-align: middle; margin-right: 4px; border: 1px solid #333;
+        }
+        #controls {
+            position: fixed; top: 8px; left: 8px;
+            background: rgba(255,255,255,0.95);
+            border: 1px solid #999; z-index: 100;
+            display: flex; gap: 2px;
+        }
+        #controls button {
+            border: 0; background: transparent;
+            padding: 6px 10px; cursor: pointer;
+            font-size: 14px; font-family: inherit;
+        }
+        #controls button:hover { background: #eee; }
+
+        .drawflow .drawflow-node {
+            width: max-content;
+            min-width: 0; max-width: none;
+            height: auto; min-height: 0;
+            padding: 8px 14px;
+            white-space: nowrap;
+            font-size: 12px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+            background: #fff;
+            border: 2px solid #333;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: opacity 150ms;
+        }
+        .drawflow .drawflow-node .drawflow_content_node {
+            width: max-content;
+            white-space: nowrap;
+        }
+        .drawflow .drawflow-node.package    { background: #d4e5f7; border-color: #2a6db5; }
+        .drawflow .drawflow-node.component  { background: #daf0c1; border-color: #4a8e1f; }
+        .drawflow .drawflow-node.story      { background: #fce4b6; border-color: #b07310; }
+        .drawflow .drawflow-node.is-relevant { background: #d9b3ff; border-color: #6f30b0; }
+
+        .drawflow .drawflow-node .input,
+        .drawflow .drawflow-node .output {
+            width: 10px !important;
+            height: 10px !important;
+            border-width: 1px !important;
+        }
+
+        .drawflow .connection,
+        .drawflow .connection *,
+        .drawflow svg.connection,
+        .drawflow svg.connection * { pointer-events: none !important; }
+
+        .drawflow .drawflow-node.is-dim { opacity: 0.25; }
+        .drawflow .connection.is-dim { visibility: hidden; }
+
+        .drawflow .drawflow-node.is-selected {
+            box-shadow: 0 0 0 3px #2a6db5, 0 2px 8px rgba(0,0,0,0.2);
+        }
+
+        .measure-node {
+            position: absolute;
+            top: -9999px; left: -9999px;
+            opacity: 0;
+            pointer-events: none;
+            white-space: nowrap;
+            padding: 8px 14px;
+            font-size: 12px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+            border: 2px solid transparent;
+        }
+    </style>
+</head>
+<body>
+<div id="controls">
+    <button id="zoom-in" title="Zoom in">+</button>
+    <button id="zoom-out" title="Zoom out">-</button>
+    <button id="zoom-reset" title="Reset">reset</button>
+</div>
+<div id="legend">
+    <div><span style="background:#d4e5f7"></span>Package Dependency</div>
+    <div><span style="background:#daf0c1"></span>Component</div>
+    <div><span style="background:#fce4b6"></span>Story</div>
+    <div><span style="background:#d9b3ff"></span>Changed file</div>
+</div>
+<div id="drawflow"></div>
+<script type="module">
+// ---------------------------------------------------------------------------
+// Payload populated by the CLI before this template is written to disk.
+// Tokens are replaced by graphTrace.js via plain string substitution.
+//   vertices:                         [{ index, name, row, col, kind }, ...]
+//   edges:                            [[srcIndex, tgtIndex], ...]
+//   transitive_closure_matrix_sparse: [[srcIndex, tgtIndex, length], ...]
+// `kind` is one of: 'package' | 'component' | 'story' | 'is_relevant'.
+// ---------------------------------------------------------------------------
+const vertices = __VERTICES_JSON__;
+const edges = __EDGES_JSON__;
+const transitive_closure_matrix_sparse = __TRANSITIVE_CLOSURE_JSON__;
+const n = vertices.length;
+
+// ---------------------------------------------------------------------------
+// Width measurement: each node grows to fit its file path. We need the
+// rendered width (DOM-dependent) to lay out columns without overlap.
+// ---------------------------------------------------------------------------
+function measureWidth(text) {
+    const el = document.createElement('div');
+    el.className = 'measure-node';
+    el.textContent = text;
+    document.body.appendChild(el);
+    const w = el.offsetWidth;
+    el.remove();
+    return w;
+}
+
+// Drawflow adds port circles on each side (~25px) + border; pad generously.
+const PORT_PAD = 60;
+const nodeWidth = vertices.map(v => measureWidth(v.name) + PORT_PAD);
+
+// ---------------------------------------------------------------------------
+// Column X positions (cumulative by max width per column).
+// ---------------------------------------------------------------------------
+const PAD_X = 60, PAD_Y = 60, COL_GAP = 140, ROW_HEIGHT = 70;
+
+const colMaxWidth = {};
+for (let i = 0; i < n; i++) {
+    const c = vertices[i].col;
+    if (!colMaxWidth[c] || nodeWidth[i] > colMaxWidth[c]) colMaxWidth[c] = nodeWidth[i];
+}
+const sortedCols = Object.keys(colMaxWidth).map(Number).sort((a, b) => a - b);
+const colX = {};
+let cursor = PAD_X;
+for (const c of sortedCols) {
+    colX[c] = cursor;
+    cursor += colMaxWidth[c] + COL_GAP;
+}
+
+// ---------------------------------------------------------------------------
+// Boot Drawflow.
+// ---------------------------------------------------------------------------
+const container = document.getElementById('drawflow');
+const editor = new Drawflow(container);
+editor.reroute = false;
+editor.start();
+
+function escapeHtml(s) {
+    return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+// CSS classes per kind. `is_relevant` becomes `is-relevant` so it matches
+// the stylesheet rule.
+function cssClassFor(kind) {
+    if (kind === 'is_relevant') return 'is-relevant';
+    return kind;
+}
+
+// ---------------------------------------------------------------------------
+// Add nodes. row/col come from the server; pixel positions are computed
+// here using the measured widths so columns never overlap.
+// ---------------------------------------------------------------------------
+const nodeIds = new Array(n);
+for (let i = 0; i < n; i++) {
+    const v = vertices[i];
+    const id = editor.addNode(
+        'node',
+        1, 1,
+        colX[v.col],
+        PAD_Y + v.row * ROW_HEIGHT,
+        cssClassFor(v.kind),
+        { index: v.index, kind: v.kind, name: v.name },
+        escapeHtml(v.name),
+    );
+    nodeIds[i] = id;
+}
+
+// ---------------------------------------------------------------------------
+// Connections.
+// ---------------------------------------------------------------------------
+for (const e of edges) {
+    editor.addConnection(nodeIds[e[0]], nodeIds[e[1]], 'output_1', 'input_1');
+}
+
+editor.editor_mode = 'fixed';
+
+// ---------------------------------------------------------------------------
+// Arrowheads on connection paths.
+// ---------------------------------------------------------------------------
+const SVG_NS = 'http://www.w3.org/2000/svg';
+function addArrowhead(svg) {
+    if (svg.querySelector('marker')) return;
+    let defs = svg.querySelector('defs');
+    if (!defs) {
+        defs = document.createElementNS(SVG_NS, 'defs');
+        svg.insertBefore(defs, svg.firstChild);
+    }
+    const marker = document.createElementNS(SVG_NS, 'marker');
+    marker.setAttribute('id', 'arrowhead');
+    marker.setAttribute('viewBox', '0 0 10 10');
+    marker.setAttribute('refX', '9');
+    marker.setAttribute('refY', '5');
+    marker.setAttribute('markerWidth', '5');
+    marker.setAttribute('markerHeight', '5');
+    marker.setAttribute('orient', 'auto');
+    const tip = document.createElementNS(SVG_NS, 'path');
+    tip.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+    tip.setAttribute('fill', '#4ea9ff');
+    marker.appendChild(tip);
+    defs.appendChild(marker);
+    const path = svg.querySelector('path.main-path') || svg.querySelector('path');
+    if (path) path.setAttribute('marker-end', 'url(#arrowhead)');
+}
+container.querySelectorAll('svg.connection').forEach(addArrowhead);
+
+new MutationObserver((muts) => {
+    for (const m of muts) {
+        for (const node of m.addedNodes) {
+            if (node.nodeType !== 1) continue;
+            if (node.matches && node.matches('svg.connection')) addArrowhead(node);
+            if (node.querySelectorAll) {
+                node.querySelectorAll('svg.connection').forEach(addArrowhead);
+            }
+        }
+    }
+}).observe(container, { subtree: true, childList: true });
+
+// ---------------------------------------------------------------------------
+// Click-to-select with bidirectional reachability highlight.
+//
+// Reachability comes straight from transitive_closure_matrix_sparse: for a click
+// on vertex `start`, anything appearing as the target of a triple
+// (start, j, _) is reachable from `start`, and anything appearing as the
+// source of a triple (i, start, _) can reach `start`. No adjacency list —
+// we just iterate the triples each time. With small click counts and a
+// sparse matrix this is fast enough and avoids carrying redundant graph
+// state in the page.
+// ---------------------------------------------------------------------------
+const idxByDfId = new Map();
+for (let i = 0; i < n; i++) {
+    if (nodeIds[i] !== undefined) idxByDfId.set(nodeIds[i], i);
+}
+
+function connectedTo(start) {
+    const seen = new Set([start]);
+    for (const transitive_edge of transitive_closure_matrix_sparse) {
+        if (transitive_edge[0] === start) seen.add(transitive_edge[1]);
+        else if (transitive_edge[1] === start) seen.add(transitive_edge[0]);
+    }
+    return seen;
+}
+
+function parseEndpointIds(svg) {
+    let outId = null, inId = null;
+    for (const cls of svg.classList) {
+        if (cls.startsWith('node_out_node-')) outId = parseInt(cls.slice('node_out_node-'.length), 10);
+        else if (cls.startsWith('node_in_node-')) inId = parseInt(cls.slice('node_in_node-'.length), 10);
+    }
+    return { outId, inId };
+}
+
+let currentSelected = null;
+
+function clearSelection() {
+    container.querySelectorAll('.drawflow-node.is-dim, .drawflow-node.is-selected')
+        .forEach(el => el.classList.remove('is-dim', 'is-selected'));
+    container.querySelectorAll('svg.connection.is-dim')
+        .forEach(el => el.classList.remove('is-dim'));
+}
+
+function applySelection(startIdx) {
+    const connected = connectedTo(startIdx);
+
+    for (let i = 0; i < n; i++) {
+        const el = document.getElementById('node-' + nodeIds[i]);
+        if (!el) continue;
+        el.classList.toggle('is-dim', !connected.has(i));
+        el.classList.toggle('is-selected', i === startIdx);
+    }
+
+    container.querySelectorAll('svg.connection').forEach((svg) => {
+        const { outId, inId } = parseEndpointIds(svg);
+        const s = idxByDfId.get(outId);
+        const t = idxByDfId.get(inId);
+        const keep = (s !== undefined && t !== undefined
+                      && connected.has(s) && connected.has(t));
+        svg.classList.toggle('is-dim', !keep);
+    });
+}
+
+container.addEventListener('click', (evt) => {
+    const nodeEl = evt.target.closest('.drawflow-node');
+    if (!nodeEl) return;
+    const m = nodeEl.id.match(/^node-(\d+)$/);
+    if (!m) return;
+    const dfId = parseInt(m[1], 10);
+    const idx = idxByDfId.get(dfId);
+    if (idx === undefined) return;
+
+    if (currentSelected === idx) {
+        currentSelected = null;
+        clearSelection();
+    } else {
+        currentSelected = idx;
+        applySelection(idx);
+    }
+});
+
+// ---------------------------------------------------------------------------
+// Toolbar.
+// ---------------------------------------------------------------------------
+document.getElementById('zoom-in').onclick    = () => editor.zoom_in();
+document.getElementById('zoom-out').onclick   = () => editor.zoom_out();
+document.getElementById('zoom-reset').onclick = () => { editor.zoom_reset(); currentSelected = null; clearSelection(); };
+</script>
+</body>
+</html>

package/dist/index.js

@@ -1,5 +1,6 @@
 export { default, command, _resetShutdownForTest } from './command.js';
 export { legacyCommand, legacyFlags as flags } from './legacy.js';
+export { applySmartSnap, SmartSnapBailError } from './smartsnap.js';
 // export common packages to avoid dependency resolution issues
 export { default as PercyConfig } from '@percy/config';
 export { default as logger } from '@percy/logger';