@syntax-syllogism/flow-delta 0.1.2 → 0.2.1

package/README.md

@@ -5,6 +5,11 @@ A semantic, visual diff for Salesforce Flows: parse two versions of a
 interactive HTML artifact (plus `diff.json`) that shows added / deleted /
 modified / unchanged nodes and edges with per-property deltas.
 
+Inspired by Google's [Flow Lens](https://github.com/google/flow-lens), with
+a focus on making it work with GitLab's pipelines. We also opted for our own HTML output over plantuml, graphviz, or mermaid.
+
+[Sample Gitlab Project with artifacts](https://gitlab.com/j.p.richter/flow-delta-example/-/merge_requests/1)
+
 ## Usage
 
 Runs as a TypeScript CLI via `tsx` (no build step). See [docs/cli.md](docs/cli.md)

package/dist/cli.js

@@ -737,7 +737,9 @@ function classifyNode(oldNode, newNode) {
     type: newNode.type,
     label: newNode.label,
     status: "modified",
-    changes
+    changes,
+    before: oldNode.properties,
+    after: newNode.properties
   };
 }
 function classifyEdge(oldEdge, newEdge) {
@@ -863,6 +865,66 @@ function measureBounds(nodes) {
   return { width: maxX + 40, height: maxY + 40 };
 }
 
+// src/render/section-schemas.ts
+var MAPPING_COLUMNS = [
+  { path: "field", label: "Field" },
+  { path: "value", label: "Value" }
+];
+var FILTER_COLUMNS = [
+  { path: "field", label: "Field" },
+  { path: "operator", label: "Operator" },
+  { path: "value", label: "Value" }
+];
+var PARAM_COLUMNS = [
+  { path: "name", label: "Name" },
+  { path: "value", label: "Value" },
+  { path: "assignToReference", label: "Assign To" }
+];
+var SECTION_SCHEMAS = {
+  decision: [{
+    name: "Outcomes",
+    paths: ["rules"],
+    render: "grouped-table",
+    groupLabelPath: "label",
+    innerArray: "conditions",
+    innerColumns: [
+      { path: "leftValueReference", label: "Resource" },
+      { path: "operator", label: "Operator" },
+      { path: "rightValue", label: "Value" }
+    ]
+  }],
+  assignment: [{
+    name: "Assignment Items",
+    paths: ["assignmentItems"],
+    render: "table",
+    columns: [
+      { path: "assignToReference", label: "Variable" },
+      { path: "operator", label: "Operator" },
+      { path: "value", label: "Value" }
+    ]
+  }],
+  recordCreate: [{ name: "Field Mappings", paths: ["inputAssignments"], render: "table", columns: MAPPING_COLUMNS }],
+  recordUpdate: [{ name: "Field Mappings", paths: ["inputAssignments"], render: "table", columns: MAPPING_COLUMNS }],
+  recordLookup: [{ name: "Filters", paths: ["filters"], render: "table", columns: FILTER_COLUMNS }],
+  recordDelete: [{ name: "Filters", paths: ["filters"], render: "table", columns: FILTER_COLUMNS }],
+  actionCall: [{ name: "Parameters", paths: ["inputParameters", "outputParameters"], render: "table", columns: PARAM_COLUMNS }],
+  apexPluginCall: [{ name: "Parameters", paths: ["inputParameters", "outputParameters"], render: "table", columns: PARAM_COLUMNS }],
+  wait: [{
+    name: "Wait Events",
+    paths: ["waitEvents"],
+    render: "table",
+    columns: [
+      { path: "label", label: "Label" },
+      { path: "offset", label: "Offset" },
+      { path: "offsetUnit", label: "Unit" },
+      { path: "resumeDateReference", label: "Resume Date" }
+    ]
+  }]
+};
+function getSectionSchemas(type) {
+  return SECTION_SCHEMAS[type] ?? [];
+}
+
 // src/render/render-html.ts
 function renderHtml(layout) {
   const data = {
@@ -871,7 +933,8 @@ function renderHtml(layout) {
     edges: layout.edges,
     width: layout.width,
     height: layout.height,
-    layouts: layout.views
+    layouts: layout.views,
+    sectionSchemas: Object.fromEntries(layout.diff.nodes.map((node) => [node.type, getSectionSchemas(node.type)]))
   };
   const json = JSON.stringify(data).replace(/</g, "\\u003c");
   const s = layout.diff.summary;
@@ -896,6 +959,7 @@ function renderHtml(layout) {
       --modified: #d97706; --modified-fill: #fef3c7;
       --unchanged: #94a3b8; --unchanged-fill: #e9edf3;
       --edge: #64748b; --fault: #7c3aed;
+      --panel-width: 34vw;
     }
     * { box-sizing: border-box; }
     body { margin: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; }
@@ -938,7 +1002,8 @@ function renderHtml(layout) {
     .legend .deleted::before { background: var(--deleted); }
     .legend .modified::before { background: var(--modified); }
     .legend .unchanged::before { background: var(--unchanged); }
-    main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 520px); min-height: 0; }
+    main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, var(--panel-width), 70vw); min-height: 0; }
+    body.panel-collapsed main { grid-template-columns: minmax(0, 1fr) 0; }
     .canvas { position: relative; overflow: hidden; }
     svg {
       width: 100%; height: 100%; display: block;
@@ -946,22 +1011,67 @@ function renderHtml(layout) {
         radial-gradient(circle, #dfe5ee 1px, transparent 1.4px) -11px -11px / 22px 22px,
         linear-gradient(#ffffff, #f7f9fc);
     }
-    .panel { min-width: 0; border-left: 1px solid var(--border); background: var(--surface); padding: 20px; overflow-y: auto; overflow-x: hidden; }
+    .panel { position: relative; min-width: 0; border-left: 1px solid var(--border); background: var(--surface); padding: 20px; overflow-y: auto; overflow-x: hidden; }
+    body.panel-collapsed .panel { padding: 0; border-left: 0; overflow: hidden; }
+    body.panel-collapsed .panel > *:not(.panel-resizer) { display: none; }
+    /* drag-to-resize handle on the panel's left edge */
+    .panel-resizer { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; transform: translateX(-50%); cursor: col-resize; z-index: 6; touch-action: none; }
+    .panel-resizer::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); transform: translateX(-50%); transition: background-color 0.12s ease, width 0.12s ease; }
+    .panel-resizer:hover::before, .panel-resizer.dragging::before { background: #93c5fd; width: 3px; }
+    body.panel-collapsed .panel-resizer { display: none; }
+    .panel-head { display: flex; align-items: flex-start; gap: 8px; }
+    .panel-head h2 { flex: 1; min-width: 0; }
+    .panel-toggle, .panel-reopen { border: 1px solid var(--border); background: #f8fafc; color: var(--muted); border-radius: 7px; cursor: pointer; font: inherit; line-height: 1; }
+    .panel-toggle { flex: none; width: 26px; height: 26px; font-size: 16px; display: grid; place-items: center; }
+    .panel-toggle:hover, .panel-reopen:hover { color: var(--text); border-color: #93c5fd; background: #eff6ff; }
+    .panel-toggle:focus-visible, .panel-reopen:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
+    /* floating tab to reopen the panel once collapsed */
+    .panel-reopen { display: none; position: absolute; top: 14px; right: 14px; z-index: 7; padding: 7px 12px; font-size: 12px; font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
+    body.panel-collapsed .panel-reopen { display: inline-flex; align-items: center; gap: 6px; }
     .panel h2 { margin: 0 0 8px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
     .panel .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; background: #eef1f6; color: var(--muted); margin-bottom: 16px; }
     .panel.added .badge { background: var(--added-fill); color: var(--added); }
     .panel.deleted .badge { background: var(--deleted-fill); color: var(--deleted); }
     .panel.modified .badge { background: var(--modified-fill); color: var(--modified); }
     .panel .empty { color: var(--muted); font-size: 13px; }
-    .changes { list-style: none; padding: 0; margin: 4px 0 0; }
-    .changes li { min-width: 0; margin-bottom: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; }
-    .change-title { font-weight: 600; margin-bottom: 5px; }
-    .change-path { margin-bottom: 12px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
-    .change-values { display: grid; gap: 10px; min-width: 0; }
-    .change-value { min-width: 0; }
-    .change-value-label { margin-bottom: 4px; color: #475569; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
-    .changes code { font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #eef1f6; padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
-    .changes pre { max-width: 100%; margin: 0; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; }
+    .detail-section { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; overflow: hidden; }
+    .detail-section summary { cursor: pointer; padding: 11px 13px; font-weight: 650; }
+    .detail-section[open] summary { border-bottom: 1px solid var(--border); }
+    .section-count { color: var(--muted); font-size: 11px; font-weight: 500; }
+    .section-body { padding: 12px; overflow-x: auto; }
+    .change-kind { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
+    .change-kind.added { color: var(--added); background: var(--added-fill); }
+    .change-kind.modified { color: var(--modified); background: var(--modified-fill); }
+    .change-kind.removed { color: var(--deleted); background: var(--deleted-fill); }
+    /* git-diff value grammar */
+    .val { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
+    .val.ins { color: #14532d; background: var(--added-fill); }
+    .val.del { color: #7f1d1d; background: var(--deleted-fill); text-decoration: line-through; text-decoration-color: rgba(127, 29, 29, 0.5); }
+    .val.faint { color: var(--muted); background: transparent; padding-left: 0; }
+    .val em { font-style: normal; color: var(--faint); }
+    .val pre { margin: 4px 0 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.5; }
+    .arrow { color: var(--faint); margin: 0 2px; }
+    /* scalar / fallback change lines */
+    .changes { list-style: none; padding: 0; margin: 0; }
+    .changes li { min-width: 0; margin-bottom: 9px; }
+    .changes li:last-child { margin-bottom: 0; }
+    .change-line-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
+    .change-line-label { font-weight: 600; font-size: 12px; }
+    .change-line-value { padding-left: 2px; }
+    /* item tables (field mappings, conditions, filters, parameters) */
+    .change-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    .change-table th, .change-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+    .change-table th { color: var(--muted); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }
+    .change-table tr:last-child td { border-bottom: 0; }
+    .change-table .row-idx { color: var(--faint); font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
+    .change-table tr.row-added { background: rgba(22, 163, 74, 0.06); }
+    .change-table tr.row-removed { background: rgba(220, 38, 38, 0.05); }
+    /* outcome groups (decisions) */
+    .outcome-group { margin-bottom: 12px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
+    .outcome-group:last-child { margin-bottom: 0; }
+    .group-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
+    .group-label { font-weight: 700; font-size: 12.5px; }
+    .outcome-group .changes { margin-bottom: 8px; }
     .edge { fill: none; }
     .edge.unchanged { stroke-width: 1.4; opacity: 0.55; }
     .edge.normal.unchanged { stroke: var(--edge); marker-end: url(#arrow-normal); }
@@ -981,8 +1091,18 @@ function renderHtml(layout) {
     .node.unchanged rect { fill: var(--unchanged-fill); stroke: var(--unchanged); }
     .node.selected rect { stroke-width: 3; filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18)); }
     .node-label { white-space: pre; }
+    /* Type-based styling \u2014 SHAPE & stroke pattern only. Status (added/deleted/
+       modified/unchanged) remains the sole authority on fill/stroke COLOR, so
+       the legend stays reliable. Start/end stand out via a pill shape, heavier
+       stroke, and a neutral emphasis halo \u2014 never via a status-like color. */
+    .node.type-start rect, .node.type-end rect { rx: 24; ry: 24; stroke-width: 2.5; filter: drop-shadow(0 0 0 3px rgba(15, 23, 42, 0.16)) drop-shadow(0 1px 3px rgba(15, 23, 42, 0.18)); }
+    .node.type-recordLookup rect, .node.type-recordCreate rect, .node.type-recordUpdate rect, .node.type-recordDelete rect { rx: 4; ry: 4; }
+    .node.type-screen rect { rx: 6; ry: 6; }
+    .node.type-subflow rect { stroke-width: 2.5; }
+    .node.type-loop rect { stroke-dasharray: 2 3; }
+    .node.type-wait rect { stroke-dasharray: 4 4; }
+    .node.selected.type-start rect, .node.selected.type-end rect { stroke-width: 3.5; filter: drop-shadow(0 0 0 5px rgba(15, 23, 42, 0.22)) drop-shadow(0 2px 6px rgba(15, 23, 42, 0.2)); }
     @media (max-width: 1000px) {
-      main { grid-template-columns: minmax(0, 1fr) minmax(320px, 42vw); }
       .panel { padding: 16px; }
     }
   </style>
@@ -1032,10 +1152,15 @@ function renderHtml(layout) {
       </svg>
     </div>
     <aside class="panel">
-      <h2 id="panel-title">Select a node</h2>
+      <div class="panel-resizer" id="panel-resizer" role="separator" aria-orientation="vertical" aria-label="Resize panel"></div>
+      <div class="panel-head">
+        <h2 id="panel-title">Select a node</h2>
+        <button type="button" id="panel-toggle" class="panel-toggle" aria-label="Collapse panel" title="Collapse panel">\u203A</button>
+      </div>
       <div id="panel-badge" class="badge">No selection</div>
       <div id="panel-body">Click a node to inspect its properties.</div>
     </aside>
+    <button type="button" id="panel-reopen" class="panel-reopen" aria-label="Show details panel" title="Show details">\u2039 Details</button>
   </main>
   <script>
     const DATA = ${json};
@@ -1188,7 +1313,7 @@ function renderHtml(layout) {
       panelBadge.textContent = node.status.toUpperCase();
       const changes = node.changes || [];
       panelBody.innerHTML = changes.length
-        ? "<ul class='changes'>" + changes.map(formatChange).join("") + "</ul>"
+        ? organizeChanges(node).map((section) => formatSection(section, node)).join("")
         : node.status === "added"
           ? "<div class='empty'>This node was added in the new version.</div>"
           : node.status === "deleted"
@@ -1196,6 +1321,228 @@ function renderHtml(layout) {
             : "<div class='empty'>No property changes.</div>";
     }
 
+    function owns(prefix, path) {
+      return path === prefix || path.startsWith(prefix + ".") || path.startsWith(prefix + "[");
+    }
+
+    function changeKind(change) {
+      return change.before === undefined ? "added" : change.after === undefined ? "removed" : "modified";
+    }
+
+    function capitalize(value) {
+      return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+
+    // Parse "base[idx]rest" \u2014 returns the item index and trailing path, or null.
+    function matchItem(path, base) {
+      if (!path.startsWith(base + "[")) return null;
+      const close = path.indexOf("]", base.length + 1);
+      if (close === -1) return null;
+      const idx = path.slice(base.length + 1, close);
+      if (!/^\\d+$/.test(idx)) return null;
+      return { idx, rest: path.slice(close + 1) };
+    }
+
+    // Group a node's flat change list into ordered sections: schema-driven first,
+    // then a generic fallback (array-prefixed groups, then a Configuration bucket).
+    function organizeChanges(node) {
+      const schemas = DATA.sectionSchemas[node.type] || [];
+      const sections = schemas.map((schema) => ({ schema, changes: [] }));
+      const fallback = new Map();
+      for (const change of node.changes || []) {
+        const sec = sections.find((s) => s.schema.paths.some((path) => owns(path, change.path)));
+        if (sec) { sec.changes.push(change); continue; }
+        const match = change.path.match(/^([^.[]+)(\\[\\d+\\])?/);
+        const isArray = !!(match && match[2] !== undefined);
+        const key = isArray ? match[1] : "Configuration";
+        if (!fallback.has(key)) fallback.set(key, []);
+        fallback.get(key).push(change);
+      }
+      const out = [];
+      for (const s of sections) {
+        if (s.changes.length) out.push({ name: s.schema.name, schema: s.schema, changes: s.changes });
+      }
+      for (const [key, changes] of fallback) {
+        out.push({
+          name: key === "Configuration" ? "Configuration" : humanizePath(key),
+          schema: { render: "lines", paths: [key] },
+          changes,
+        });
+      }
+      return out;
+    }
+
+    function formatSection(section, node) {
+      const body = renderSectionBody(section, node);
+      return "<details class='detail-section' open><summary>" + escapeHtml(section.name)
+        + " <span class='section-count'>(" + section.changes.length + ")</span></summary>"
+        + "<div class='section-body'>" + body + "</div></details>";
+    }
+
+    function renderSectionBody(section, node) {
+      const render = section.schema.render;
+      if (render === "grouped-table") return renderGroupedTable(section, node);
+      if (render === "table" && section.schema.columns) {
+        return renderTable(section.changes, section.schema.paths, section.schema.columns, { before: node.before, after: node.after, prefix: "" });
+      }
+      return renderLines(section.changes, {});
+    }
+
+    // Labeled before \u2192 after lines, for scalar changes and the generic fallback.
+    // The plain option drops per-line badges \u2014 used under a wholly added/removed
+    // outcome, where the single group badge already states the change (Finding 3).
+    function renderLines(changes, options) {
+      const plain = options && options.plain;
+      return "<ul class='changes'>" + changes.map((change) => {
+        const kind = changeKind(change);
+        const badge = plain ? "" : "<span class='change-kind " + kind + "'>" + capitalize(kind) + "</span>";
+        return "<li><div class='change-line-head'>" + badge
+          + "<span class='change-line-label'>" + escapeHtml(humanizePath(change.path)) + "</span></div>"
+          + "<div class='change-line-value'>" + diffValue(change.before, change.after) + "</div></li>";
+      }).join("") + "</ul>";
+    }
+
+    // Walk a path like "rules[0].conditions[2]" into an object.
+    function resolvePath(obj, path) {
+      if (obj == null || !path) return undefined;
+      let cur = obj;
+      const tokens = path.match(/[^.[\\]]+|\\[\\d+\\]/g) || [];
+      for (const token of tokens) {
+        if (cur == null || typeof cur !== "object") return undefined;
+        cur = token[0] === "[" ? cur[Number(token.slice(1, -1))] : cur[token];
+      }
+      return cur;
+    }
+
+    // Collapse arr[i].* leaf changes (and whole-item changes) into one row per
+    // item index, then fill any unchanged columns from the item snapshot so a
+    // modified row still shows its sibling context (Resource/Operator/etc.).
+    function buildRows(changes, basePaths, columns, ctx) {
+      const rows = new Map();
+      let order = 0;
+      for (const change of changes) {
+        let base = null, idx = null, rest = "";
+        for (const p of basePaths) {
+          const m = matchItem(change.path, p);
+          if (m) { base = p; idx = m.idx; rest = m.rest; break; }
+        }
+        if (base === null) continue;
+        const itemKey = base + "[" + idx + "]";
+        if (!rows.has(itemKey)) rows.set(itemKey, { kind: "modified", order: order++, idx, base, cells: {} });
+        const row = rows.get(itemKey);
+        if (rest === "") {
+          row.kind = changeKind(change);
+          for (const col of columns) {
+            const before = extractField(change.before, col.path);
+            const after = extractField(change.after, col.path);
+            row.cells[col.path] = { before, after, changed: !valuesEqual(before, after) };
+          }
+          continue;
+        }
+        const sub = rest.replace(/^\\./, "");
+        const col = columns.find((c) => sub === c.path || sub.startsWith(c.path + ".") || sub.startsWith(c.path + "["));
+        if (col) row.cells[col.path] = { before: unwrapValue(change.before), after: unwrapValue(change.after), changed: true };
+      }
+      const result = [...rows.values()].sort((a, b) => a.order - b.order);
+      if (ctx) {
+        for (const row of result) {
+          const abs = ctx.prefix ? ctx.prefix + "." + row.base + "[" + row.idx + "]" : row.base + "[" + row.idx + "]";
+          const snapshot = row.kind === "removed" ? resolvePath(ctx.before, abs) : resolvePath(ctx.after, abs);
+          if (!snapshot || typeof snapshot !== "object") continue;
+          for (const col of columns) {
+            if (row.cells[col.path]) continue;
+            const value = extractField(snapshot, col.path);
+            if (value !== undefined) row.cells[col.path] = { before: value, after: value, changed: false };
+          }
+        }
+      }
+      return result;
+    }
+
+    // options.uniformKind (a wholly added/removed group): drop the Change
+    // column and per-row badges, colouring every cell by that single kind.
+    function renderTable(changes, basePaths, columns, ctx, options) {
+      const uniform = options && options.uniformKind;
+      const rows = buildRows(changes, basePaths, columns, ctx);
+      if (!rows.length) return renderLines(changes, {});
+      const head = "<tr><th class='row-idx'>#</th>" + columns.map((c) => "<th>" + escapeHtml(c.label) + "</th>").join("")
+        + (uniform ? "" : "<th>Change</th>") + "</tr>";
+      const body = rows.map((row) => renderRow(row, columns, uniform)).join("");
+      return "<table class='change-table'><thead>" + head + "</thead><tbody>" + body + "</tbody></table>";
+    }
+
+    function renderRow(row, columns, uniform) {
+      const kind = uniform || row.kind;
+      const cells = columns.map((col) => {
+        const cell = row.cells[col.path];
+        if (!cell) return "<td></td>";
+        if (kind === "added") return "<td>" + insVal(cell.after !== undefined ? cell.after : cell.before) + "</td>";
+        if (kind === "removed") return "<td>" + delVal(cell.before !== undefined ? cell.before : cell.after) + "</td>";
+        return "<td>" + (cell.changed ? diffValue(cell.before, cell.after) : faintVal(cell.after)) + "</td>";
+      }).join("");
+      const badge = uniform ? "" : "<td><span class='change-kind " + row.kind + "'>" + capitalize(row.kind) + "</span></td>";
+      return "<tr class='row-" + kind + "'><td class='row-idx'>" + (Number(row.idx) + 1) + "</td>" + cells + badge + "</tr>";
+    }
+
+    // Decisions et al.: group by the outer array (one group per outcome/rule).
+    // A wholly added/removed outcome shows ONE group badge + plain context; a
+    // modified outcome shows its changed conditions in a per-row-badged table.
+    function renderGroupedTable(section, node) {
+      const schema = section.schema;
+      const groups = new Map();
+      let order = 0;
+      for (const change of section.changes) {
+        let matched = null;
+        for (const p of schema.paths) {
+          const m = matchItem(change.path, p);
+          if (m) { matched = { base: p, idx: m.idx, rest: m.rest }; break; }
+        }
+        if (!matched) continue;
+        const key = matched.idx;
+        if (!groups.has(key)) groups.set(key, { idx: matched.idx, base: matched.base, order: order++, label: null, kind: "modified", whole: false, inner: [], scalars: [] });
+        const g = groups.get(key);
+        if (matched.rest === "") {
+          g.kind = changeKind(change);
+          g.whole = true;
+          const obj = change.after !== undefined ? change.after : change.before;
+          if (obj && typeof obj === "object") {
+            if (schema.groupLabelPath && obj[schema.groupLabelPath]) g.label = obj[schema.groupLabelPath];
+            const inner = obj[schema.innerArray];
+            if (Array.isArray(inner)) {
+              inner.forEach((item, j) => g.inner.push({
+                path: schema.innerArray + "[" + j + "]",
+                before: g.kind === "removed" ? item : undefined,
+                after: g.kind === "removed" ? undefined : item,
+              }));
+            }
+            for (const k of Object.keys(obj)) {
+              if (k === schema.innerArray || k === schema.groupLabelPath) continue;
+              g.scalars.push({ path: k, before: g.kind === "removed" ? obj[k] : undefined, after: g.kind === "removed" ? undefined : obj[k] });
+            }
+          }
+          continue;
+        }
+        const sub = matched.rest.replace(/^\\./, "");
+        if (sub === schema.groupLabelPath) g.label = change.after !== undefined ? change.after : change.before;
+        if (sub === schema.innerArray || sub.startsWith(schema.innerArray + "[")) {
+          g.inner.push({ path: sub, before: change.before, after: change.after });
+        } else {
+          g.scalars.push({ path: sub, before: change.before, after: change.after });
+        }
+      }
+      return [...groups.values()].sort((a, b) => a.order - b.order).map((g) => {
+        const label = g.label != null ? String(g.label) : "Outcome " + (Number(g.idx) + 1);
+        const head = "<div class='group-head'><span class='change-kind " + g.kind + "'>" + capitalize(g.kind) + "</span>"
+          + "<span class='group-label'>" + escapeHtml(label) + "</span></div>";
+        const prefix = g.base + "[" + g.idx + "]";
+        const scalars = g.scalars.length ? renderLines(g.scalars, { plain: g.whole }) : "";
+        const inner = g.inner.length
+          ? renderTable(g.inner, [schema.innerArray], schema.innerColumns, { before: node.before, after: node.after, prefix }, g.whole ? { uniformKind: g.kind } : {})
+          : "";
+        return "<div class='outcome-group'>" + head + scalars + inner + "</div>";
+      }).join("");
+    }
+
     function selectNode(id) {
       selectedNodeId = id;
       document.querySelectorAll(".node").forEach((el) => el.classList.remove("selected"));
@@ -1205,24 +1552,6 @@ function renderHtml(layout) {
       if (node) updatePanel(node);
     }
 
-    function formatChange(change) {
-      const beforeMissing = change.before === undefined;
-      const afterMissing = change.after === undefined;
-      const action = beforeMissing ? "Added" : afterMissing ? "Removed" : "Changed";
-      const values = beforeMissing
-        ? formatLabeledValue("New value", change.after)
-        : afterMissing
-          ? formatLabeledValue("Previous value", change.before)
-          : formatLabeledValue("Before", change.before) + formatLabeledValue("After", change.after);
-      return "<li><div class='change-title'>" + action + ": " + escapeHtml(humanizePath(change.path)) + "</div>"
-        + "<div class='change-path'>Metadata path: <code>" + escapeHtml(change.path) + "</code></div>"
-        + "<div class='change-values'>" + values + "</div></li>";
-    }
-
-    function formatLabeledValue(label, value) {
-      return "<div class='change-value'><div class='change-value-label'>" + label + "</div>" + formatValue(value) + "</div>";
-    }
-
     function humanizePath(path) {
       const names = {
         assignmentItems: "Assignment item",
@@ -1237,11 +1566,54 @@ function renderHtml(layout) {
       }).join(" \u203A ");
     }
 
-    function formatValue(value) {
-      if (value === undefined) return "<em>Not present</em>";
-      if (value === null) return "<em>Empty value</em>";
+    // Collapse Salesforce typed-value wrappers to their scalar so reviewers see
+    // "true" / "Something Else" / "{!myVar}" instead of a JSON blob.
+    function unwrapValue(value) {
+      if (value === null || value === undefined || typeof value !== "object" || Array.isArray(value)) return value;
+      if ("elementReference" in value) return "{!" + value.elementReference + "}";
+      const keys = Object.keys(value);
+      if (keys.length === 1) {
+        const key = keys[0];
+        if (key === "stringValue" || key === "numberValue" || key === "dateValue" || key === "dateTimeValue") return value[key];
+        if (key === "booleanValue") return String(value[key]) === "true" ? "true" : "false";
+      }
+      return value;
+    }
+
+    function extractField(obj, path) {
+      if (obj === undefined || obj === null) return undefined;
+      let cur = obj;
+      for (const segment of path.split(".")) {
+        if (cur === null || typeof cur !== "object") return undefined;
+        cur = cur[segment];
+      }
+      return unwrapValue(cur);
+    }
+
+    function valuesEqual(a, b) {
+      if (a === b) return true;
+      if (a && b && typeof a === "object" && typeof b === "object") return JSON.stringify(a) === JSON.stringify(b);
+      return false;
+    }
+
+    function renderScalar(value) {
+      if (value === undefined) return "<em>\u2014</em>";
+      if (value === null) return "<em>empty</em>";
       if (typeof value === "object") return "<pre>" + escapeHtml(JSON.stringify(value, null, 2)) + "</pre>";
-      return "<code>" + escapeHtml(String(value)) + "</code>";
+      return escapeHtml(String(value));
+    }
+
+    function insVal(value) { return "<span class='val ins'>" + renderScalar(value) + "</span>"; }
+    function delVal(value) { return "<span class='val del'>" + renderScalar(value) + "</span>"; }
+    function faintVal(value) { return "<span class='val faint'>" + renderScalar(value) + "</span>"; }
+
+    // git-diff value grammar: removed (red strike) \u2192 added (green).
+    function diffValue(before, after) {
+      before = unwrapValue(before);
+      after = unwrapValue(after);
+      if (before === undefined) return insVal(after);
+      if (after === undefined) return delVal(before);
+      return delVal(before) + " <span class='arrow'>\u2192</span> " + insVal(after);
     }
 
     function pickInitialNode(visibleNodeIds) {
@@ -1356,6 +1728,39 @@ function renderHtml(layout) {
       });
     });
 
+    // Panel: collapse to focus on the canvas, and drag the left edge to resize.
+    const panelToggle = document.getElementById("panel-toggle");
+    const panelReopen = document.getElementById("panel-reopen");
+    const panelResizer = document.getElementById("panel-resizer");
+
+    function setPanelCollapsed(collapsed) {
+      document.body.classList.toggle("panel-collapsed", collapsed);
+      if (panelToggle) panelToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+    }
+    if (panelToggle) panelToggle.addEventListener("click", () => setPanelCollapsed(true));
+    if (panelReopen) panelReopen.addEventListener("click", () => setPanelCollapsed(false));
+
+    if (panelResizer) {
+      let resizeStart = null;
+      panelResizer.addEventListener("pointerdown", (event) => {
+        resizeStart = { x: event.clientX, width: panel.getBoundingClientRect().width };
+        panelResizer.classList.add("dragging");
+        panelResizer.setPointerCapture(event.pointerId);
+        event.preventDefault();
+      });
+      panelResizer.addEventListener("pointermove", (event) => {
+        if (!resizeStart) return;
+        // The handle is on the panel's left edge, so dragging left widens it.
+        const next = resizeStart.width - (event.clientX - resizeStart.x);
+        const max = Math.max(320, window.innerWidth - 360);
+        const clamped = Math.max(300, Math.min(max, next));
+        document.documentElement.style.setProperty("--panel-width", clamped + "px");
+      });
+      const endResize = () => { resizeStart = null; panelResizer.classList.remove("dragging"); };
+      panelResizer.addEventListener("pointerup", endResize);
+      panelResizer.addEventListener("pointercancel", endResize);
+    }
+
     applyView("all");
   </script>
 </body>
@@ -1390,7 +1795,7 @@ function renderNode(node) {
   const lines = wrapLabel(node.label, 22);
   const lineHeight = 14;
   const textY = node.height / 2 - (lines.length - 1) * lineHeight / 2 + 5;
-  return `<g class="node ${node.status}" data-node-id="${escapeHtml(node.id)}" transform="translate(${node.x},${node.y})">
+  return `<g class="node ${node.status} type-${node.type}" data-node-id="${escapeHtml(node.id)}" transform="translate(${node.x},${node.y})">
     <rect width="${node.width}" height="${node.height}"></rect>
     <text x="${node.width / 2}" y="${textY}" text-anchor="middle" class="node-label">
       ${lines.map((line, index) => `<tspan x="${node.width / 2}" dy="${index === 0 ? 0 : lineHeight}">${escapeHtml(line)}</tspan>`).join("")}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syntax-syllogism/flow-delta",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "type": "module",
   "description": "Semantic visual diff for Salesforce Flows",
   "license": "MIT",