@syntax-syllogism/flow-delta 0.2.1 → 0.4.3

package/dist/cli.js

@@ -628,6 +628,38 @@ function isPlainObject(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
 
+// src/model/flow-header.ts
+import { Parser as Parser2 } from "xml2js";
+var FLOW_HEADER_KEYS = [
+  "status",
+  "processType",
+  "runInMode",
+  "apiVersion",
+  "triggerOrder",
+  "description",
+  "interviewLabel",
+  "isTemplate"
+];
+async function extractFlowHeader(xml) {
+  try {
+    const parsed = await new Parser2({ explicitArray: false }).parseStringPromise(xml);
+    const flow = parsed.Flow;
+    if (!flow) {
+      return {};
+    }
+    const header = {};
+    for (const key of FLOW_HEADER_KEYS) {
+      const value = flow[key];
+      if (value !== void 0 && (value === null || typeof value !== "object")) {
+        header[key] = String(value);
+      }
+    }
+    return header;
+  } catch {
+    return {};
+  }
+}
+
 // src/diff/deep-diff.ts
 function deepDiff(before, after, path = "") {
   if (Object.is(before, after)) {
@@ -685,21 +717,32 @@ function diffModel(oldModel, newModel) {
   const edgeIds = [.../* @__PURE__ */ new Set([...oldEdges.keys(), ...newEdges.keys()])].sort();
   const nodes = nodeIds.map((id) => classifyNode(oldNodes.get(id), newNodes.get(id)));
   const edges = edgeIds.map((id) => classifyEdge(oldEdges.get(id), newEdges.get(id)));
+  const flowChanges = diffFlowHeaders(oldModel, newModel);
   const summary = {
     addedNodes: nodes.filter((node) => node.status === "added").length,
     removedNodes: nodes.filter((node) => node.status === "deleted").length,
     modifiedNodes: nodes.filter((node) => node.status === "modified").length,
     unchangedNodes: nodes.filter((node) => node.status === "unchanged").length,
     addedEdges: edges.filter((edge) => edge.status === "added").length,
-    removedEdges: edges.filter((edge) => edge.status === "deleted").length
+    removedEdges: edges.filter((edge) => edge.status === "deleted").length,
+    changedFlowAttributes: flowChanges.length
   };
   return {
     flowName: selectFlowName(oldModel, newModel),
     summary,
+    ...flowChanges.length > 0 ? { flowChanges } : {},
     nodes,
     edges
   };
 }
+function diffFlowHeaders(oldModel, newModel) {
+  if (!oldModel.header || !newModel.header) {
+    return [];
+  }
+  const changes = deepDiff(oldModel.header, newModel.header);
+  const order = new Map(FLOW_HEADER_KEYS.map((key, index) => [key, index]));
+  return changes.sort((left, right) => (order.get(left.path) ?? 999) - (order.get(right.path) ?? 999));
+}
 function selectFlowName(oldModel, newModel) {
   if (newModel.nodes.length > 0 || newModel.edges.length > 0) {
     return newModel.flowName;
@@ -714,10 +757,10 @@ function classifyNode(oldNode, newNode) {
     throw new Error("Cannot classify absent node");
   }
   if (!oldNode) {
-    return { id: newNode.id, type: newNode.type, label: newNode.label, status: "added" };
+    return { id: newNode.id, type: newNode.type, label: newNode.label, status: "added", after: newNode.properties };
   }
   if (!newNode) {
-    return { id: oldNode.id, type: oldNode.type, label: oldNode.label, status: "deleted" };
+    return { id: oldNode.id, type: oldNode.type, label: oldNode.label, status: "deleted", before: oldNode.properties };
   }
   const changes = [
     ...deepDiff(oldNode.label, newNode.label, "label"),
@@ -880,7 +923,37 @@ var PARAM_COLUMNS = [
   { path: "value", label: "Value" },
   { path: "assignToReference", label: "Assign To" }
 ];
+var SCREEN_SETTING_PATHS = [
+  "allowBack",
+  "allowFinish",
+  "allowPause",
+  "showFooter",
+  "showHeader"
+];
 var SECTION_SCHEMAS = {
+  screen: [
+    { name: "Screen Settings", paths: SCREEN_SETTING_PATHS, render: "lines" }
+  ],
+  start: [
+    {
+      name: "Trigger",
+      paths: ["object", "triggerType", "recordTriggerType", "schedule", "filterLogic"],
+      render: "lines"
+    },
+    { name: "Entry Conditions", paths: ["filters"], render: "table", columns: FILTER_COLUMNS },
+    {
+      name: "Scheduled Paths",
+      paths: ["scheduledPaths"],
+      render: "table",
+      columns: [
+        { path: "name", label: "Name" },
+        { path: "label", label: "Label" },
+        { path: "offsetNumber", label: "Offset" },
+        { path: "offsetUnit", label: "Unit" },
+        { path: "timeSource", label: "Time Source" }
+      ]
+    }
+  ],
   decision: [{
     name: "Outcomes",
     paths: ["rules"],
@@ -907,6 +980,7 @@ var SECTION_SCHEMAS = {
   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 }],
+  subflow: [{ name: "Parameters", paths: ["inputAssignments", "outputAssignments"], render: "table", columns: PARAM_COLUMNS }],
   actionCall: [{ name: "Parameters", paths: ["inputParameters", "outputParameters"], render: "table", columns: PARAM_COLUMNS }],
   apexPluginCall: [{ name: "Parameters", paths: ["inputParameters", "outputParameters"], render: "table", columns: PARAM_COLUMNS }],
   wait: [{
@@ -919,12 +993,571 @@ var SECTION_SCHEMAS = {
       { path: "offsetUnit", label: "Unit" },
       { path: "resumeDateReference", label: "Resume Date" }
     ]
-  }]
+  }],
+  customError: [{
+    name: "Error Messages",
+    paths: ["customErrorMessages"],
+    render: "table",
+    columns: [
+      { path: "name", label: "Name" },
+      { path: "errorMessage", label: "Message" }
+    ]
+  }],
+  transform: [
+    {
+      name: "Value Mappings",
+      paths: ["transformValues", "valueMappings"],
+      render: "table",
+      columns: [
+        { path: "name", label: "Name" },
+        { path: "sourceDataType", label: "Source Type" },
+        { path: "targetDataType", label: "Target Type" },
+        { path: "value", label: "Value" }
+      ]
+    },
+    {
+      name: "Data Type Mappings",
+      paths: ["dataTypeMappings"],
+      render: "table",
+      columns: [
+        { path: "name", label: "Name" },
+        { path: "sourceDataType", label: "Source Type" },
+        { path: "targetDataType", label: "Target Type" }
+      ]
+    }
+  ],
+  collectionProcessor: [
+    { name: "Collection Settings", paths: ["collectionReference", "operation"], render: "lines" },
+    { name: "Filters", paths: ["filters"], render: "table", columns: FILTER_COLUMNS },
+    {
+      name: "Sort Options",
+      paths: ["sortOptions"],
+      render: "table",
+      columns: [
+        { path: "field", label: "Field" },
+        { path: "sortOrder", label: "Order" }
+      ]
+    }
+  ],
+  orchestratedStage: [
+    { name: "Stage Settings", paths: ["stageLabel", "stageOrder"], render: "lines" }
+  ]
 };
 function getSectionSchemas(type) {
   return SECTION_SCHEMAS[type] ?? [];
 }
 
+// src/render/snapshot-panel.ts
+var LONG_TEXT_THRESHOLD = 160;
+var COLLECTION_KEY_NAMES = [
+  "assignmentItems",
+  "choiceReferences",
+  "choices",
+  "conditions",
+  "customErrorMessages",
+  "dataTypeMappings",
+  "fields",
+  "filters",
+  "inputAssignments",
+  "inputParameters",
+  "outputParameters",
+  "outputAssignments",
+  "processMetadataValues",
+  "rules",
+  "scheduledPaths",
+  "sortOptions",
+  "stageSteps",
+  "steps",
+  "storeOutputParameters",
+  "transformValues",
+  "valueMappings",
+  "waitEvents"
+];
+var COLLECTION_KEYS = new Set(COLLECTION_KEY_NAMES);
+function renderNodePanelBody(node, schemas = []) {
+  if (node.status === "unchanged") {
+    return "<div class='empty'>No property changes.</div>";
+  }
+  const before = node.status === "added" ? void 0 : node.before;
+  const after = node.status === "deleted" ? void 0 : node.after;
+  const options = { showUnchanged: node.status !== "modified", nodeStatus: node.status };
+  const sections = renderSections(before, after, schemas || [], options);
+  if (!sections.length) {
+    return "<div class='empty'>No configuration.</div>";
+  }
+  return sections.map((section, index) => {
+    const open = node.status === "modified" || index === 0 ? " open" : "";
+    return "<details class='detail-section snapshot-section " + node.status + "'" + open + "><summary>" + escapeHtml(section.name) + " <span class='section-count'>(" + section.count + ")</span></summary><div class='section-body'>" + section.html + "</div></details>";
+  }).join("");
+}
+function renderSections(before, after, schemas, options) {
+  const sections = [];
+  const owned = /* @__PURE__ */ new Set();
+  for (const schema of schemas) {
+    for (const path of schema.paths) owned.add(path);
+    const rendered = renderSchemaSection(before, after, schema, options);
+    if (rendered) sections.push(rendered);
+  }
+  const keys = unionKeys(before, after).filter((key) => !ownsAny(owned, key));
+  const settingsRows = [];
+  let settingsCount = 0;
+  const nestedSections = [];
+  for (const key of keys) {
+    const childBefore = getField(before, key);
+    const childAfter = getField(after, key);
+    const childChanged = hasChange(childBefore, childAfter, key);
+    const scalar = scalarPair(childBefore, childAfter);
+    if (scalar) {
+      if (options.showUnchanged || childChanged) {
+        settingsRows.push(scalarRow(key, scalar.before, scalar.after, statusOf(childBefore, childAfter), options.nodeStatus));
+      }
+      if (childChanged) settingsCount += 1;
+      continue;
+    }
+    const rendered = renderValue(getField(before, key), getField(after, key), {
+      ...options,
+      label: humanizePath(key),
+      pathKey: key,
+      depth: 0
+    });
+    if (rendered.html) {
+      nestedSections.push({ name: humanizePath(key), html: rendered.html, count: rendered.count });
+    }
+  }
+  if (settingsRows.length) {
+    sections.push({
+      name: "Settings",
+      html: "<table class='snapshot-kv'><tbody>" + settingsRows.join("") + "</tbody></table>",
+      count: settingsCount
+    });
+  }
+  sections.push(...nestedSections);
+  return sections;
+}
+function renderSchemaSection(before, after, schema, options) {
+  let rendered;
+  if (schema.render === "table" && schema.columns) {
+    rendered = renderTable(before, after, schema.paths, schema.columns, options);
+  } else if (schema.render === "grouped-table" && schema.innerArray && schema.innerColumns) {
+    rendered = renderGroupedTable(before, after, schema, options);
+  } else {
+    const sectionBefore = pickSectionObject(before, schema.paths);
+    const sectionAfter = pickSectionObject(after, schema.paths);
+    rendered = renderValue(sectionBefore, sectionAfter, {
+      ...options,
+      label: schema.name,
+      pathKey: schema.paths[0] || schema.name,
+      depth: 0
+    });
+  }
+  if (!rendered.html) return null;
+  return { name: schema.name, html: rendered.html, count: rendered.count };
+}
+function renderValue(before, after, ctx) {
+  const changed = hasChange(before, after, ctx.pathKey);
+  if (!ctx.showUnchanged && !changed) return { html: "", changed: false, count: 0 };
+  const scalar = scalarPair(before, after);
+  if (scalar) {
+    return {
+      html: renderLine(ctx.label, scalar.before, scalar.after, statusOf(before, after), ctx.nodeStatus),
+      changed,
+      count: changed ? 1 : 0
+    };
+  }
+  if (isCollection(before, after, ctx.pathKey)) {
+    const rendered2 = renderArray(before, after, ctx);
+    return { html: rendered2.html, changed, count: rendered2.count || (changed ? 1 : 0) };
+  }
+  const rendered = renderObject(before, after, ctx);
+  return { html: rendered.html, changed, count: rendered.count || (changed ? 1 : 0) };
+}
+function renderObject(before, after, ctx) {
+  const beforeObj = isObj(before) ? before : {};
+  const afterObj = isObj(after) ? after : {};
+  const keys = unionKeys(beforeObj, afterObj);
+  const scalarRows = [];
+  const nested = [];
+  let count = 0;
+  for (const key of keys) {
+    const childBefore = getField(beforeObj, key);
+    const childAfter = getField(afterObj, key);
+    const childChanged = hasChange(childBefore, childAfter, key);
+    const scalar = scalarPair(childBefore, childAfter);
+    if (scalar) {
+      if (ctx.showUnchanged || childChanged || ctx.depth > 0) {
+        scalarRows.push(scalarRow(key, scalar.before, scalar.after, statusOf(childBefore, childAfter), ctx.nodeStatus));
+      }
+      if (childChanged) count += 1;
+      continue;
+    }
+    const rendered = renderValue(childBefore, childAfter, {
+      ...ctx,
+      label: humanizePath(key),
+      pathKey: key,
+      depth: ctx.depth + 1
+    });
+    if (rendered.html) {
+      nested.push("<div class='snapshot-nested'><div class='snapshot-nested-title'>" + escapeHtml(humanizePath(key)) + "</div>" + rendered.html + "</div>");
+      count += rendered.count;
+    }
+  }
+  const table = scalarRows.length ? "<table class='snapshot-kv'><tbody>" + scalarRows.join("") + "</tbody></table>" : "";
+  return { html: table + nested.join(""), changed: count > 0, count };
+}
+function renderArray(before, after, ctx) {
+  const beforeItems = arr(before);
+  const afterItems = arr(after);
+  if (looksLikeNameValueArray(beforeItems, afterItems)) {
+    return renderTableFromItems(before, after, [""], [
+      { path: "name", label: "Name" },
+      { path: "value", label: "Value" }
+    ], ctx);
+  }
+  const max = Math.max(beforeItems.length, afterItems.length);
+  const cards = [];
+  let count = 0;
+  for (let i = 0; i < max; i += 1) {
+    const childBefore = beforeItems[i];
+    const childAfter = afterItems[i];
+    const childChanged = hasChange(childBefore, childAfter, "");
+    if (!ctx.showUnchanged && !childChanged) continue;
+    const title = itemTitle(childBefore, childAfter, i);
+    const rendered = renderValue(childBefore, childAfter, {
+      ...ctx,
+      label: title,
+      pathKey: "",
+      depth: ctx.depth + 1
+    });
+    if (!rendered.html) continue;
+    count += rendered.count || (childChanged ? 1 : 0);
+    cards.push("<div class='snapshot-card " + statusOf(childBefore, childAfter) + "'><div class='snapshot-card-title'>" + escapeHtml(title) + "</div>" + rendered.html + "</div>");
+  }
+  return { html: cards.join(""), changed: count > 0, count };
+}
+function renderTable(before, after, paths, columns, options) {
+  return renderTableFromItems(before, after, paths, columns, { ...options, label: "", pathKey: paths[0] || "", depth: 0 });
+}
+function renderTableFromItems(before, after, paths, columns, options) {
+  const rows = [];
+  for (const path of paths) {
+    const beforeItems = arr(resolvePath(before, path));
+    const afterItems = arr(resolvePath(after, path));
+    const max = Math.max(beforeItems.length, afterItems.length);
+    for (let i = 0; i < max; i += 1) {
+      const itemBefore = beforeItems[i];
+      const itemAfter = afterItems[i];
+      if (!options.showUnchanged && !hasChange(itemBefore, itemAfter, path)) continue;
+      const cells = {};
+      for (const col of columns) {
+        const cellBefore = resolvePath(itemBefore, col.path);
+        const cellAfter = resolvePath(itemAfter, col.path);
+        cells[col.path] = {
+          before: unwrapValue(cellBefore),
+          after: unwrapValue(cellAfter),
+          changed: hasChange(cellBefore, cellAfter, col.path)
+        };
+      }
+      rows.push({ idx: i, kind: statusOf(itemBefore, itemAfter), cells });
+    }
+  }
+  if (!rows.length) return { html: "", changed: false, count: 0 };
+  const showChange = options.nodeStatus === "modified" && !options.suppressChangeColumn;
+  const head = "<tr><th class='row-idx'>#</th>" + columns.map((col) => "<th>" + escapeHtml(col.label) + "</th>").join("") + (showChange ? "<th>Change</th>" : "") + "</tr>";
+  const body = rows.map((row) => renderRow(row, columns, showChange, options.nodeStatus)).join("");
+  return {
+    html: "<table class='change-table'><thead>" + head + "</thead><tbody>" + body + "</tbody></table>",
+    changed: rows.some((row) => row.kind !== "unchanged" || Object.values(row.cells).some((cell) => cell.changed)),
+    count: rows.filter((row) => row.kind !== "unchanged" || Object.values(row.cells).some((cell) => cell.changed)).length
+  };
+}
+function renderRow(row, columns, showChange, nodeStatus) {
+  const cells = columns.map((col) => {
+    const cell = row.cells[col.path];
+    return "<td>" + renderValueCell(cell.before, cell.after, cell.changed ? row.kind : "unchanged", nodeStatus) + "</td>";
+  }).join("");
+  const badge = showChange ? "<td><span class='change-kind " + row.kind + "'>" + capitalize(row.kind) + "</span></td>" : "";
+  return "<tr class='row-" + row.kind + "'><td class='row-idx'>" + (row.idx + 1) + "</td>" + cells + badge + "</tr>";
+}
+function renderGroupedTable(before, after, schema, options) {
+  const groups = [];
+  let count = 0;
+  for (const path of schema.paths) {
+    const beforeGroups = arr(resolvePath(before, path));
+    const afterGroups = arr(resolvePath(after, path));
+    const max = Math.max(beforeGroups.length, afterGroups.length);
+    for (let i = 0; i < max; i += 1) {
+      const groupBefore = beforeGroups[i];
+      const groupAfter = afterGroups[i];
+      if (!options.showUnchanged && !hasChange(groupBefore, groupAfter, path)) continue;
+      const kind = statusOf(groupBefore, groupAfter);
+      const present = groupAfter !== void 0 ? groupAfter : groupBefore;
+      const labelValue = schema.groupLabelPath && present ? resolvePath(present, schema.groupLabelPath) : void 0;
+      const label = labelValue != null ? stripHtml(String(labelValue)) : "Outcome " + (i + 1);
+      const scalarRows = renderGroupScalars(groupBefore, groupAfter, schema, options);
+      const inner = renderTableFromItems(groupBefore, groupAfter, [schema.innerArray || ""], schema.innerColumns || [], {
+        ...options,
+        suppressChangeColumn: kind !== "modified",
+        label,
+        pathKey: schema.innerArray || "",
+        depth: 1
+      }).html;
+      const head = "<div class='group-head'><span class='change-kind " + kind + "'>" + capitalize(kind) + "</span><span class='group-label'>" + escapeHtml(label) + "</span></div>";
+      groups.push("<div class='outcome-group'>" + head + scalarRows + inner + "</div>");
+      count += 1;
+    }
+  }
+  return { html: groups.join(""), changed: count > 0, count };
+}
+function renderGroupScalars(before, after, schema, options) {
+  const beforeObj = isObj(before) ? before : {};
+  const afterObj = isObj(after) ? after : {};
+  const skip = new Set([schema.innerArray, schema.groupLabelPath].filter(Boolean));
+  const rows = unionKeys(beforeObj, afterObj).filter((key) => !skip.has(key)).map((key) => {
+    const cellBefore = getField(beforeObj, key);
+    const cellAfter = getField(afterObj, key);
+    const scalar = scalarPair(cellBefore, cellAfter);
+    if (!scalar) return "";
+    if (!options.showUnchanged && !hasChange(cellBefore, cellAfter, key)) return "";
+    return scalarRow(key, scalar.before, scalar.after, statusOf(cellBefore, cellAfter), options.nodeStatus);
+  }).filter(Boolean).join("");
+  return rows ? "<table class='snapshot-kv'><tbody>" + rows + "</tbody></table>" : "";
+}
+function scalarRow(key, before, after, kind, nodeStatus) {
+  return "<tr><th>" + escapeHtml(humanizePath(key)) + "</th><td>" + renderValueCell(before, after, kind, nodeStatus) + "</td></tr>";
+}
+function renderLine(label, before, after, kind, nodeStatus) {
+  const badge = nodeStatus === "modified" ? "<span class='change-kind " + kind + "'>" + capitalize(kind) + "</span>" : "";
+  return "<ul class='changes'><li><div class='change-line-head'>" + badge + "<span class='change-line-label'>" + escapeHtml(label) + "</span></div><div class='change-line-value'>" + renderValueCell(before, after, kind, nodeStatus) + "</div></li></ul>";
+}
+function renderValueCell(before, after, kind, nodeStatus) {
+  if (nodeStatus === "added") return oneSidedVal(after !== void 0 ? after : before);
+  if (nodeStatus === "deleted") return oneSidedVal(before !== void 0 ? before : after);
+  if (kind === "added") return insVal(after !== void 0 ? after : before);
+  if (kind === "removed") return delVal(before !== void 0 ? before : after);
+  if (kind === "modified") return diffValue(before, after);
+  return faintVal(after !== void 0 ? after : before);
+}
+function statusOf(before, after) {
+  if (before === void 0) return "added";
+  if (after === void 0) return "removed";
+  return valuesEqual(before, after) ? "unchanged" : "modified";
+}
+function hasChange(before, after, pathKey = "") {
+  if (before === void 0 || after === void 0) return before !== after;
+  const scalar = scalarPair(before, after);
+  if (scalar) return !valuesEqual(scalar.before, scalar.after);
+  if (isCollection(before, after, pathKey)) {
+    const beforeItems = arr(before);
+    const afterItems = arr(after);
+    const max = Math.max(beforeItems.length, afterItems.length);
+    for (let i = 0; i < max; i += 1) {
+      if (hasChange(beforeItems[i], afterItems[i], "")) return true;
+    }
+    return false;
+  }
+  const beforeObj = isObj(before) ? before : {};
+  const afterObj = isObj(after) ? after : {};
+  for (const key of unionKeys(beforeObj, afterObj)) {
+    if (hasChange(beforeObj[key], afterObj[key], key)) return true;
+  }
+  return false;
+}
+function scalarPair(before, after) {
+  const beforeUnwrapped = unwrapValue(before);
+  const afterUnwrapped = unwrapValue(after);
+  const beforeScalar = beforeUnwrapped == null || typeof beforeUnwrapped !== "object";
+  const afterScalar = afterUnwrapped == null || typeof afterUnwrapped !== "object";
+  return beforeScalar && afterScalar ? { before: beforeUnwrapped, after: afterUnwrapped } : null;
+}
+function arr(value) {
+  if (value === void 0 || value === null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function isObj(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function isCollection(before, after, pathKey) {
+  return Array.isArray(before) || Array.isArray(after) || isCollectionKey(pathKey);
+}
+function isCollectionKey(key) {
+  return COLLECTION_KEYS.has(key);
+}
+function unionKeys(before, after) {
+  return [.../* @__PURE__ */ new Set([...Object.keys(before || {}), ...Object.keys(after || {})])].sort();
+}
+function ownsAny(paths, key) {
+  for (const path of paths) {
+    if (key === path || key.startsWith(path + ".") || key.startsWith(path + "[")) return true;
+  }
+  return false;
+}
+function pickSectionObject(obj, paths) {
+  if (!obj) return void 0;
+  const out = {};
+  for (const path of paths) {
+    const value = resolvePath(obj, path);
+    if (value !== void 0) out[path] = value;
+  }
+  return Object.keys(out).length ? out : void 0;
+}
+function getField(obj, key) {
+  return obj ? obj[key] : void 0;
+}
+function resolvePath(obj, path) {
+  if (obj == null || !path) return obj;
+  let cur = obj;
+  const tokens = path.match(/[^.[\]]+|\[\d+\]/g) || [];
+  for (const token of tokens) {
+    if (cur == null || typeof cur !== "object") return void 0;
+    cur = token[0] === "[" ? cur[Number(token.slice(1, -1))] : cur[token];
+  }
+  return cur;
+}
+function looksLikeNameValueArray(beforeItems, afterItems) {
+  const items = [...beforeItems, ...afterItems].filter(isObj);
+  return items.length > 0 && items.every((item) => "name" in item && "value" in item);
+}
+function itemTitle(before, after, index) {
+  const item = isObj(after) ? after : before;
+  if (item) {
+    for (const key of ["fieldText", "label", "name", "fieldType", "field"]) {
+      const value = unwrapValue(item[key]);
+      if (value !== void 0 && value !== null && typeof value !== "object") {
+        return stripHtml(String(value));
+      }
+    }
+  }
+  return "Item " + (index + 1);
+}
+function stripHtml(value) {
+  return value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+}
+function capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function humanizePath(path) {
+  const names = {
+    assignmentItems: "Assignment item",
+    choiceReferences: "Choice reference",
+    choices: "Choice",
+    conditions: "Condition",
+    customErrorMessages: "Custom error message",
+    dataTypeMappings: "Data type mapping",
+    fields: "Field",
+    filters: "Filter",
+    inputAssignments: "Input assignment",
+    inputParameters: "Input parameter",
+    outputParameters: "Output parameter",
+    processMetadataValues: "Process metadata value",
+    rules: "Rule",
+    scheduledPaths: "Scheduled path",
+    storeOutputParameters: "Store output parameter",
+    transformValues: "Transform value",
+    valueMappings: "Value mapping",
+    waitEvents: "Wait event"
+  };
+  return path.split(".").map((segment) => {
+    const match = segment.match(/^([^[]+)(?:\[(\d+)\])?$/);
+    if (!match) return segment;
+    const name = names[match[1]] || match[1].replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (char) => char.toUpperCase());
+    return match[2] === void 0 ? name : name + " " + (Number(match[2]) + 1);
+  }).join(" > ");
+}
+function unwrapValue(value) {
+  if (value === null || value === void 0 || 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];
+    const obj = value;
+    if (key === "stringValue" || key === "numberValue" || key === "dateValue" || key === "dateTimeValue") return obj[key];
+    if (key === "booleanValue") return String(obj[key]) === "true" ? "true" : "false";
+  }
+  return value;
+}
+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 === void 0) return "<em>-</em>";
+  if (value === null) return "<em>empty</em>";
+  if (typeof value === "object") return "<pre>" + escapeHtml(JSON.stringify(value, null, 2)) + "</pre>";
+  const text = String(value);
+  if (text.length > LONG_TEXT_THRESHOLD || text.includes("\n")) {
+    return "<pre>" + escapeHtml(text) + "</pre>";
+  }
+  return escapeHtml(text);
+}
+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>";
+}
+function oneSidedVal(value) {
+  return "<span class='val one-sided'>" + renderScalar(value) + "</span>";
+}
+function diffValue(before, after) {
+  before = unwrapValue(before);
+  after = unwrapValue(after);
+  if (before === void 0) return insVal(after);
+  if (after === void 0) return delVal(before);
+  return delVal(before) + " <span class='arrow'>-></span> " + insVal(after);
+}
+function escapeHtml(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function snapshotPanelClientScript() {
+  const functions = [
+    renderNodePanelBody,
+    renderSections,
+    renderSchemaSection,
+    renderValue,
+    renderObject,
+    renderArray,
+    renderTable,
+    renderTableFromItems,
+    renderRow,
+    renderGroupedTable,
+    renderGroupScalars,
+    scalarRow,
+    renderLine,
+    renderValueCell,
+    statusOf,
+    hasChange,
+    scalarPair,
+    arr,
+    isObj,
+    isCollection,
+    isCollectionKey,
+    unionKeys,
+    ownsAny,
+    pickSectionObject,
+    getField,
+    resolvePath,
+    looksLikeNameValueArray,
+    itemTitle,
+    stripHtml,
+    capitalize,
+    humanizePath,
+    unwrapValue,
+    valuesEqual,
+    renderScalar,
+    insVal,
+    delVal,
+    faintVal,
+    oneSidedVal,
+    diffValue,
+    escapeHtml
+  ].map((fn) => fn.toString()).join("\n\n");
+  return "const LONG_TEXT_THRESHOLD = " + LONG_TEXT_THRESHOLD + ";\nconst COLLECTION_KEYS = new Set(" + JSON.stringify(COLLECTION_KEY_NAMES) + ");\n\n" + functions;
+}
+
 // src/render/render-html.ts
 function renderHtml(layout) {
   const data = {
@@ -942,12 +1575,13 @@ function renderHtml(layout) {
   const edgeStat = s.addedEdges + s.removedEdges > 0 ? `<span class="sep">\xB7</span><span class="stat edges">+${s.addedEdges}/\u2212${s.removedEdges} edges</span>` : "";
   const metaHtml = `${stat(s.addedNodes, "added", "added")}<span class="sep">\xB7</span>${stat(s.removedNodes, "deleted", "deleted")}<span class="sep">\xB7</span>${stat(s.modifiedNodes, "modified", "modified")}${edgeStat}`;
   const viewBox = fitViewBox(layout.width, layout.height);
+  const flowBannerHtml = renderFlowBanner(layout.diff.flowChanges);
   return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>${escapeHtml(layout.diff.flowName)}</title>
+  <title>${escapeHtml2(layout.diff.flowName)}</title>
   <style>
     :root {
       color-scheme: light;
@@ -1035,6 +1669,11 @@ function renderHtml(layout) {
     .panel.modified .badge { background: var(--modified-fill); color: var(--modified); }
     .panel .empty { color: var(--muted); font-size: 13px; }
     .detail-section { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; overflow: hidden; }
+    .detail-section.snapshot-section { border-left-width: 3px; }
+    .detail-section.snapshot-section.added { border-left-color: rgba(22, 163, 74, 0.5); }
+    .detail-section.snapshot-section.deleted { border-left-color: rgba(220, 38, 38, 0.45); }
+    .detail-section.snapshot-section.added summary { background: rgba(220, 252, 231, 0.35); }
+    .detail-section.snapshot-section.deleted summary { background: rgba(254, 226, 226, 0.35); }
     .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; }
@@ -1048,8 +1687,9 @@ function renderHtml(layout) {
     .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.one-sided { color: var(--text); 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; }
+    .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; max-height: 220px; overflow: auto; }
     .arrow { color: var(--faint); margin: 0 2px; }
     /* scalar / fallback change lines */
     .changes { list-style: none; padding: 0; margin: 0; }
@@ -1066,12 +1706,31 @@ function renderHtml(layout) {
     .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); }
+    .snapshot-kv { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
+    .snapshot-kv th, .snapshot-kv td { padding: 6px 7px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+    .snapshot-kv th { color: var(--muted); width: 34%; font-weight: 650; }
+    .snapshot-kv tr:last-child th, .snapshot-kv tr:last-child td { border-bottom: 0; }
+    .snapshot-nested { border-left: 2px solid var(--border); padding-left: 10px; margin: 10px 0; }
+    .snapshot-nested-title { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 7px; }
+    .snapshot-card { border: 1px dashed var(--border); border-radius: 7px; padding: 9px 10px; margin: 8px 0; background: var(--surface); }
+    .snapshot-card.added { border-left: 2px solid rgba(22, 163, 74, 0.5); }
+    .snapshot-card.removed { border-left: 2px solid rgba(220, 38, 38, 0.45); }
+    .snapshot-card-title { font-size: 12px; font-weight: 700; margin-bottom: 7px; overflow-wrap: anywhere; }
     /* 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; }
+    .flow-banner { border-bottom: 1px solid var(--border); background: #fffaf0; padding: 12px 20px; }
+    .flow-banner-callout { margin-bottom: 8px; font-weight: 750; }
+    .flow-banner-callout.deactivated { color: var(--deleted); }
+    .flow-banner-callout.activated { color: var(--added); }
+    .flow-banner-callout.neutral { color: var(--modified); }
+    .flow-banner-list { display: grid; gap: 7px; max-width: 960px; }
+    .flow-change-row { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); align-items: start; gap: 10px; }
+    .flow-change-label { color: var(--muted); font-size: 12px; font-weight: 700; }
+    .flow-change-value { min-width: 0; max-height: 180px; overflow: auto; }
     .edge { fill: none; }
     .edge.unchanged { stroke-width: 1.4; opacity: 0.55; }
     .edge.normal.unchanged { stroke: var(--edge); marker-end: url(#arrow-normal); }
@@ -1110,7 +1769,7 @@ function renderHtml(layout) {
 <body>
   <header>
     <div>
-      <h1>${escapeHtml(layout.diff.flowName)}</h1>
+      <h1>${escapeHtml2(layout.diff.flowName)}</h1>
       <div class="meta">${metaHtml}</div>
     </div>
     <div class="header-actions">
@@ -1128,6 +1787,7 @@ function renderHtml(layout) {
       </div>
     </div>
   </header>
+  ${flowBannerHtml}
   <main>
     <div class="canvas">
       <svg id="flow-svg" viewBox="${viewBox}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Flow diff">
@@ -1178,14 +1838,6 @@ function renderHtml(layout) {
     let dragStart = null;
     let selectedNodeId = null;
 
-    function escapeHtml(value) {
-      return String(value)
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;");
-    }
-
     function isNodeVisible(node, mode) {
       if (mode === "after") return node.status !== "deleted";
       if (mode === "before") return node.status !== "added";
@@ -1311,237 +1963,10 @@ function renderHtml(layout) {
       panel.className = "panel " + node.status;
       panelTitle.textContent = node.label;
       panelBadge.textContent = node.status.toUpperCase();
-      const changes = node.changes || [];
-      panelBody.innerHTML = changes.length
-        ? 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"
-            ? "<div class='empty'>This node was removed in the new version.</div>"
-            : "<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, {});
+      panelBody.innerHTML = renderNodePanelBody(node, DATA.sectionSchemas[node.type] || []);
     }
 
-    // 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("");
-    }
+    ${snapshotPanelClientScript()}
 
     function selectNode(id) {
       selectedNodeId = id;
@@ -1552,70 +1977,6 @@ function renderHtml(layout) {
       if (node) updatePanel(node);
     }
 
-    function humanizePath(path) {
-      const names = {
-        assignmentItems: "Assignment item",
-        conditions: "Condition",
-        rules: "Rule",
-      };
-      return path.split(".").map((segment) => {
-        const match = segment.match(/^([^[]+)(?:\\[(\\d+)\\])?$/);
-        if (!match) return segment;
-        const name = names[match[1]] || match[1].replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (char) => char.toUpperCase());
-        return match[2] === undefined ? name : name + " " + (Number(match[2]) + 1);
-      }).join(" \u203A ");
-    }
-
-    // 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 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) {
       return DATA.nodes.find((node) => visibleNodeIds.has(node.id) && node.status === "modified")
         || DATA.nodes.find((node) => visibleNodeIds.has(node.id) && node.status !== "unchanged")
@@ -1766,6 +2127,48 @@ function renderHtml(layout) {
 </body>
 </html>`;
 }
+function renderFlowBanner(changes) {
+  if (!changes || changes.length === 0) {
+    return "";
+  }
+  const statusChange = changes.find((change) => change.path === "status");
+  const callout = statusChange ? renderStatusCallout(statusChange.before, statusChange.after) : "";
+  return `<section class="flow-banner" aria-label="Flow-level changes">
+    ${callout}
+    <div class="flow-banner-list">
+      ${changes.map((change) => `<div class="flow-change-row">
+        <div class="flow-change-label">${escapeHtml2(humanizePath(change.path))}</div>
+        <div class="flow-change-value">${renderValueDelta(change.before, change.after)}</div>
+      </div>`).join("")}
+    </div>
+  </section>`;
+}
+function renderStatusCallout(before, after) {
+  const beforeText = String(before);
+  const afterText = String(after);
+  if (beforeText === "Active" && afterText !== "Active") {
+    return `<div class="flow-banner-callout deactivated">Deactivated (${escapeHtml2(beforeText)} -> ${escapeHtml2(afterText)})</div>`;
+  }
+  if (beforeText !== "Active" && afterText === "Active") {
+    return `<div class="flow-banner-callout activated">Activated (${escapeHtml2(beforeText)} -> ${escapeHtml2(afterText)})</div>`;
+  }
+  return `<div class="flow-banner-callout neutral">Status: ${escapeHtml2(beforeText)} -> ${escapeHtml2(afterText)}</div>`;
+}
+function renderValueDelta(before, after) {
+  if (before === void 0) {
+    return `<span class="val ins">${escapeHtml2(formatValue(after))}</span>`;
+  }
+  if (after === void 0) {
+    return `<span class="val del">${escapeHtml2(formatValue(before))}</span>`;
+  }
+  return `<span class="val del">${escapeHtml2(formatValue(before))}</span><span class="arrow">-></span><span class="val ins">${escapeHtml2(formatValue(after))}</span>`;
+}
+function formatValue(value) {
+  if (value === void 0) {
+    return "(missing)";
+  }
+  return String(value);
+}
 function fitViewBox(contentWidth, contentHeight) {
   const minWidth = 720;
   const minHeight = 540;
@@ -1789,16 +2192,16 @@ function renderEdge(edge) {
     return "";
   }
   const d = points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
-  return `<path class="edge ${edge.kind} ${edge.status}" d="${d}" data-edge-id="${escapeHtml(edge.id)}"></path>`;
+  return `<path class="edge ${edge.kind} ${edge.status}" d="${d}" data-edge-id="${escapeHtml2(edge.id)}"></path>`;
 }
 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} type-${node.type}" data-node-id="${escapeHtml(node.id)}" transform="translate(${node.x},${node.y})">
+  return `<g class="node ${node.status} type-${node.type}" data-node-id="${escapeHtml2(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("")}
+      ${lines.map((line, index) => `<tspan x="${node.width / 2}" dy="${index === 0 ? 0 : lineHeight}">${escapeHtml2(line)}</tspan>`).join("")}
     </text>
   </g>`;
 }
@@ -1820,7 +2223,7 @@ function wrapLabel(label, maxChars) {
   }
   return lines.length ? lines.slice(0, 3) : [label];
 }
-function escapeHtml(value) {
+function escapeHtml2(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 
@@ -1929,8 +2332,10 @@ async function main(argv = process.argv.slice(2)) {
   }
 }
 async function runFileMode(oldPath, newPath, outDir, writeJson) {
-  const oldModel = buildModel(await parseXml(readFlowFromFile(oldPath)));
-  const newModel = buildModel(await parseXml(readFlowFromFile(newPath)));
+  const oldXml = readFlowFromFile(oldPath);
+  const newXml = readFlowFromFile(newPath);
+  const oldModel = await buildModelWithHeader(oldXml);
+  const newModel = await buildModelWithHeader(newXml);
   await writeArtifacts(oldModel, newModel, outDir, writeJson);
 }
 async function runGitMode(repo, from, to, pattern, outDir, writeJson, changedOnly) {
@@ -1940,8 +2345,8 @@ async function runGitMode(repo, from, to, pattern, outDir, writeJson, changedOnl
     try {
       const oldXml = readFlowFromGit(repo, from, filePath);
       const newXml = readFlowFromGit(repo, to, filePath);
-      const oldModel = oldXml ? buildModel(await parseXml(oldXml)) : buildEmptyModel();
-      const newModel = newXml ? buildModel(await parseXml(newXml)) : buildEmptyModel();
+      const oldModel = oldXml ? await buildModelWithHeader(oldXml) : buildEmptyModel();
+      const newModel = newXml ? await buildModelWithHeader(newXml) : buildEmptyModel();
       await writeArtifacts(oldModel, newModel, outDir, writeJson, filePath);
     } catch (error) {
       hadFailure = true;
@@ -1956,6 +2361,11 @@ async function parseXml(xml) {
   const parser = new FlowParser(xml);
   return parser.generateFlowDefinition();
 }
+async function buildModelWithHeader(xml) {
+  const model = buildModel(await parseXml(xml));
+  model.header = await extractFlowHeader(xml);
+  return model;
+}
 function buildEmptyModel() {
   return {
     flowName: "(unknown)",
@@ -1974,9 +2384,15 @@ async function writeArtifacts(oldModel, newModel, outDir, writeJson, sourcePath)
     writeFileSync(join(outDir, `${fileStem}.diff.json`), JSON.stringify(diff, null, 2), "utf8");
   }
   console.log(
-    `${diff.flowName}: nodes ${diff.summary.addedNodes} added, ${diff.summary.removedNodes} deleted, ${diff.summary.modifiedNodes} modified; edges ${diff.summary.addedEdges} added, ${diff.summary.removedEdges} deleted`
+    `${diff.flowName}: nodes ${diff.summary.addedNodes} added, ${diff.summary.removedNodes} deleted, ${diff.summary.modifiedNodes} modified; edges ${diff.summary.addedEdges} added, ${diff.summary.removedEdges} deleted${formatFlowAttributeSummary(diff.flowChanges)}`
   );
 }
+function formatFlowAttributeSummary(flowChanges) {
+  if (!flowChanges || flowChanges.length === 0) {
+    return "";
+  }
+  return `; flow attributes: ${flowChanges.length} changed (${flowChanges.map((change) => change.path).join(", ")})`;
+}
 function discoverGitFiles(repo, from, to, pattern, changedOnly) {
   const matcher = createPathMatcher(pattern);
   if (!changedOnly) {