@pipefy/pipefy-process-coder 0.1.0

package/src/diff/flow.ts

@@ -0,0 +1,318 @@
+import { canonicalString } from '../util/json.ts';
+import type { FlowTree, FlowNode } from '../codec/flow.ts';
+import type { FlowsSection } from '../workspace/flows.ts';
+import { flowIdOf, isNewFlow } from '../workspace/flows.ts';
+
+/**
+ * Diffing flows.
+ *
+ * Node-by-node for the human, because that is how a person thinks about a flow and
+ * how the compiler will send it — the granular operations are per node. The
+ * whole-tree replace the API also offers is not used (see `IpaasClient.operate`),
+ * so there is no reason to diff whole-tree either.
+ *
+ * Coverage is respected exactly as it is for pipe entities: a workspace whose
+ * `flows` group is `unknown` is not diffed at all. Comparing against a group the
+ * read path could not see would propose deleting every flow in it.
+ */
+
+export type FlowChangeOp =
+  | 'flow.create'
+  | 'flow.delete'
+  | 'flow.rename'
+  | 'flow.status'
+  | 'node.create'
+  | 'node.update'
+  | 'node.delete'
+  | 'trigger.update';
+
+export type FlowChange = {
+  op: FlowChangeOp;
+  /** Stable key: the flow, plus the node when the change is a node's. */
+  key: string;
+  label: string;
+  flowId: string | null;
+  /** The flow's display name, for the label when there is no id yet. */
+  flowName: string;
+  nodeName?: string;
+  before?: FlowNode | null;
+  after?: FlowNode | null;
+  /** For flow-level changes. */
+  beforeFlow?: FlowTree | null;
+  afterFlow?: FlowTree | null;
+  deltas: Array<{ key: string; before: unknown; after: unknown }>;
+  flags: string[];
+};
+
+export type FlowChangeSet = {
+  changes: FlowChange[];
+  skipped: Array<{ reason: string }>;
+};
+
+/**
+ * Keys that never carry intent and must not produce a change.
+ *
+ * `sampleData` is generated by testing a step, `lastUpdatedDate` moves on every
+ * write, and the server-minted ids move whenever a version is created. Comparing
+ * them would make every flow permanently dirty.
+ */
+const VOLATILE_NODE_KEYS = new Set(['sampleData', 'lastUpdatedDate']);
+const VOLATILE_FLOW_KEYS = new Set([
+  'created',
+  'updated',
+  'publishedVersionId',
+  'operationStatus',
+  'timeSavedPerRun',
+  'createdBy',
+  'updatedBy',
+  'ownerId',
+  'externalId',
+  'id',
+  'flowId',
+  'projectId',
+  'templateId',
+  'backupFiles',
+  /**
+   * Derived by the API from the inline `{{connections[...]}}` references rather
+   * than supplied, so it is an echo of the nodes and never an intent of its own.
+   */
+  'connectionIds',
+  'state',
+]);
+
+const comparableNode = (n: FlowNode): Record<string, unknown> => {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(n)) {
+    if (VOLATILE_NODE_KEYS.has(k)) continue;
+    if (k.startsWith('_')) continue; // link metadata is compared separately, as structure
+    if (k === 'settings' && v && typeof v === 'object') {
+      const s: Record<string, unknown> = {};
+      for (const [sk, sv] of Object.entries(v as Record<string, unknown>)) {
+        if (VOLATILE_NODE_KEYS.has(sk)) continue;
+        s[sk] = sv;
+      }
+      out[k] = s;
+      continue;
+    }
+    out[k] = v;
+  }
+  return out;
+};
+
+const nodeDeltas = (before: FlowNode, after: FlowNode) => {
+  const a = comparableNode(before);
+  const b = comparableNode(after);
+  const keys = [...new Set([...Object.keys(a), ...Object.keys(b)])].sort();
+  const out: Array<{ key: string; before: unknown; after: unknown }> = [];
+  for (const k of keys) {
+    if (canonicalString(a[k]) !== canonicalString(b[k])) out.push({ key: k, before: a[k], after: b[k] });
+  }
+  // Structure: a node whose place in the chain moved is a change even when its
+  // settings are identical.
+  for (const link of ['_nextAction', '_firstLoopAction', '_children'] as const) {
+    if (canonicalString(before[link]) !== canonicalString(after[link])) {
+      out.push({ key: link, before: before[link], after: after[link] });
+    }
+  }
+  return out;
+};
+
+const flowLabel = (tree: FlowTree) => String(tree.version['displayName'] ?? flowIdOf(tree) ?? 'flow');
+
+/** Match flows by id, then by display name for one the workspace is creating. */
+const matchFlows = (before: FlowTree[], after: FlowTree[]) => {
+  const pairs: Array<[FlowTree, FlowTree]> = [];
+  const added: FlowTree[] = [];
+  const removed: FlowTree[] = [...before];
+
+  for (const a of after) {
+    const id = flowIdOf(a);
+    let hitAt = id ? removed.findIndex((b) => flowIdOf(b) === id) : -1;
+    if (hitAt < 0 && isNewFlow(a)) {
+      hitAt = removed.findIndex((b) => flowLabel(b) === flowLabel(a));
+    }
+    if (hitAt >= 0) {
+      pairs.push([removed[hitAt] as FlowTree, a]);
+      removed.splice(hitAt, 1);
+    } else {
+      added.push(a);
+    }
+  }
+  return { pairs, added, removed };
+};
+
+export const diffFlows = (before: FlowsSection | null, after: FlowsSection | null): FlowChangeSet => {
+  const changes: FlowChange[] = [];
+  const skipped: Array<{ reason: string }> = [];
+
+  if (!before || !after) {
+    return { changes, skipped: [{ reason: 'one side has no flows section, so flows are not diffed' }] };
+  }
+  if (before.meta.coverage !== 'complete' || after.meta.coverage !== 'complete') {
+    /**
+     * The whole reason coverage exists. A pipe whose iPaaS could not be reached
+     * reports zero flows, and diffing that against a workspace that has some would
+     * propose deleting every one of them.
+     */
+    return {
+      changes,
+      skipped: [
+        {
+          reason:
+            `flows coverage is ${before.meta.coverage}/${after.meta.coverage}, not complete — ` +
+            'not diffed, because absence here is not evidence of absence',
+        },
+      ],
+    };
+  }
+
+  const { pairs, added, removed } = matchFlows(before.flows, after.flows);
+
+  for (const tree of added) {
+    changes.push({
+      op: 'flow.create',
+      key: `flow:new:${flowLabel(tree)}`,
+      label: `create flow "${flowLabel(tree)}" (${tree.nodes.length} nodes)`,
+      flowId: null,
+      flowName: flowLabel(tree),
+      afterFlow: tree,
+      deltas: [],
+      flags: [],
+    });
+  }
+
+  for (const tree of removed) {
+    changes.push({
+      op: 'flow.delete',
+      key: `flow:${flowIdOf(tree)}`,
+      label: `delete flow "${flowLabel(tree)}"`,
+      flowId: flowIdOf(tree),
+      flowName: flowLabel(tree),
+      beforeFlow: tree,
+      deltas: [],
+      flags: ['destructive'],
+    });
+  }
+
+  for (const [b, a] of pairs) {
+    const flowId = flowIdOf(a) ?? flowIdOf(b);
+    const name = flowLabel(a);
+
+    if (flowLabel(b) !== flowLabel(a)) {
+      changes.push({
+        op: 'flow.rename',
+        key: `flow:${flowId}:name`,
+        label: `rename flow "${flowLabel(b)}" → "${flowLabel(a)}"`,
+        flowId,
+        flowName: name,
+        deltas: [{ key: 'displayName', before: flowLabel(b), after: flowLabel(a) }],
+        flags: [],
+      });
+    }
+
+    if (String(b.flow['status'] ?? '') !== String(a.flow['status'] ?? '')) {
+      changes.push({
+        op: 'flow.status',
+        key: `flow:${flowId}:status`,
+        label: `flow "${name}" ${b.flow['status']} → ${a.flow['status']}`,
+        flowId,
+        flowName: name,
+        deltas: [{ key: 'status', before: b.flow['status'], after: a.flow['status'] }],
+        // Enabling a flow arms it against live traffic. That is never incidental.
+        flags: String(a.flow['status']) === 'ENABLED' ? ['arms-flow'] : [],
+      });
+    }
+
+    const beforeNodes = new Map(b.nodes.map((n) => [n.name, n]));
+    const afterNodes = new Map(a.nodes.map((n) => [n.name, n]));
+
+    for (const [nodeName, node] of afterNodes) {
+      const prior = beforeNodes.get(nodeName);
+      if (!prior) {
+        changes.push({
+          op: 'node.create',
+          key: `flow:${flowId}:node:${nodeName}`,
+          label: `flow "${name}": add ${nodeName} [${node.type}] ${String(node['displayName'] ?? '')}`.trim(),
+          flowId,
+          flowName: name,
+          nodeName,
+          after: node,
+          /**
+           * The whole intended tree, not just the node: `ADD_ACTION` needs the
+           * parent this node hangs from, and that is a property of where `node`
+           * sits in the chain — found by scanning every node's `_nextAction` /
+           * `_firstLoopAction` / `_children` for `nodeName` (apply/flowops.ts
+           * `parentOf`), the same lookup a brand-new flow's build already uses.
+           */
+          afterFlow: a,
+          deltas: [],
+          flags: [],
+        });
+        continue;
+      }
+      const deltas = nodeDeltas(prior, node);
+      if (!deltas.length) continue;
+      const isTrigger = nodeName === 'trigger';
+      changes.push({
+        op: isTrigger ? 'trigger.update' : 'node.update',
+        key: `flow:${flowId}:node:${nodeName}`,
+        label: `flow "${name}": ${isTrigger ? 'trigger' : nodeName} — ${deltas.map((d) => d.key).join(', ')}`,
+        flowId,
+        flowName: name,
+        nodeName,
+        before: prior,
+        after: node,
+        deltas,
+        flags: [],
+      });
+    }
+
+    for (const [nodeName, node] of beforeNodes) {
+      if (afterNodes.has(nodeName)) continue;
+      changes.push({
+        op: 'node.delete',
+        key: `flow:${flowId}:node:${nodeName}`,
+        label: `flow "${name}": delete ${nodeName} [${node.type}]`,
+        flowId,
+        flowName: name,
+        nodeName,
+        before: node,
+        deltas: [],
+        flags: ['destructive'],
+      });
+    }
+  }
+
+  return { changes, skipped };
+};
+
+export const renderFlowChanges = (cs: FlowChangeSet): string => {
+  const lines: string[] = [];
+  for (const s of cs.skipped) lines.push(`  flows not diffed: ${s.reason}`);
+  if (!cs.changes.length) {
+    if (!cs.skipped.length) lines.push('  flows: no changes');
+    return lines.join('\n');
+  }
+
+  const byFlow = new Map<string, FlowChange[]>();
+  for (const c of cs.changes) {
+    const k = c.flowId ?? `new:${c.flowName}`;
+    byFlow.set(k, [...(byFlow.get(k) ?? []), c]);
+  }
+  for (const [, group] of byFlow) {
+    lines.push('');
+    lines.push(`  ${group[0]?.flowName ?? 'flow'}`);
+    for (const c of group) {
+      const mark = c.flags.includes('destructive') ? '-' : c.op.endsWith('create') ? '+' : '~';
+      lines.push(`    ${mark} ${c.label}`);
+      for (const d of c.deltas.slice(0, 6)) {
+        const short = (v: unknown) => {
+          const s = canonicalString(v);
+          return s.length > 90 ? `${s.slice(0, 90)}…` : s;
+        };
+        lines.push(`        ${d.key}: ${short(d.before)} -> ${short(d.after)}`);
+      }
+    }
+  }
+  return lines.join('\n');
+};

package/src/diff/html.ts

@@ -0,0 +1,322 @@
+import type { ChangeSet } from './diff.ts';
+import type { Plan } from '../apply/types.ts';
+
+/**
+ * A self-contained HTML diff view.
+ *
+ * The one thing a GUI genuinely buys is *seeing* a diff, so that is what this is:
+ * one file, no dependencies, no build, opens in any browser. It is the reason the
+ * desktop shell of PLAN.md phase 3 was dropped rather than built.
+ */
+
+export type ViewModel = {
+  changeSet: ChangeSet;
+  plan?: Plan | null;
+  workspace?: string;
+  generatedAt: string;
+};
+
+const escapeHtml = (s: string) =>
+  s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+const STYLE = `
+:root {
+  color-scheme: light dark;
+  --bg: #fbfbfa; --panel: #ffffff; --border: #e4e2dd; --text: #1c1b19;
+  --muted: #6f6b64; --add: #1a7f4b; --add-bg: #e8f5ee; --del: #b3261e;
+  --del-bg: #fdeceb; --upd: #8a6100; --upd-bg: #fdf3e2; --move: #6b4ea8;
+  --move-bg: #f1ecfa; --accent: #1f6feb; --code: #f4f3f0;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #171716; --panel: #1f1f1e; --border: #33322f; --text: #ecebe8;
+    --muted: #9b968d; --add: #56d38a; --add-bg: #14301f; --del: #ff8a80;
+    --del-bg: #331a18; --upd: #e5b567; --upd-bg: #32270f; --move: #b39ddb;
+    --move-bg: #241d33; --accent: #6ea8ff; --code: #262624;
+  }
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0; background: var(--bg); color: var(--text);
+  font: 14px/1.5 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
+}
+code, pre, .mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; }
+header {
+  position: sticky; top: 0; z-index: 5; background: var(--panel);
+  border-bottom: 1px solid var(--border); padding: 14px 20px;
+}
+h1 { font-size: 16px; margin: 0 0 4px; font-weight: 650; }
+.sub { color: var(--muted); font-size: 12.5px; }
+.counts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
+.pill {
+  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
+  font-size: 12px; background: var(--bg); cursor: pointer; color: var(--text);
+}
+.pill[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
+.pill.create { color: var(--add); } .pill.delete { color: var(--del); }
+.pill.update { color: var(--upd); } .pill.reorder { color: var(--move); }
+main { padding: 18px 20px 60px; max-width: 1100px; margin: 0 auto; }
+input[type=search] {
+  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
+  background: var(--bg); color: var(--text); margin-top: 10px; font-size: 13px;
+}
+.notice {
+  border: 1px solid var(--border); border-left: 3px solid var(--upd); background: var(--upd-bg);
+  padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-size: 13px;
+}
+.notice.block { border-left-color: var(--del); background: var(--del-bg); }
+.notice h3 { margin: 0 0 6px; font-size: 13px; }
+.notice ul { margin: 4px 0 0 18px; padding: 0; }
+.entity { margin: 22px 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.change {
+  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
+  margin-bottom: 8px; overflow: hidden;
+}
+.change > summary {
+  padding: 10px 12px; cursor: pointer; display: flex; gap: 10px; align-items: baseline;
+  list-style: none;
+}
+.change > summary::-webkit-details-marker { display: none; }
+.op {
+  flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
+  font-weight: 700; font-size: 13px;
+}
+.op.create { color: var(--add); background: var(--add-bg); }
+.op.delete { color: var(--del); background: var(--del-bg); }
+.op.update, .op.archive, .op.unarchive { color: var(--upd); background: var(--upd-bg); }
+.op.reorder { color: var(--move); background: var(--move-bg); }
+.title { font-weight: 550; }
+.flags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
+.flag {
+  font-size: 11px; border: 1px solid var(--border); border-radius: 999px;
+  padding: 1px 8px; color: var(--muted);
+}
+.flag.warn { color: var(--del); border-color: var(--del); }
+.body { border-top: 1px solid var(--border); padding: 10px 12px; }
+table.deltas { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+table.deltas td { vertical-align: top; padding: 5px 6px; border-top: 1px solid var(--border); }
+table.deltas tr:first-child td { border-top: 0; }
+td.k { width: 22%; color: var(--muted); }
+td.b, td.a { width: 39%; }
+.val { display: block; padding: 3px 6px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
+.val.before { background: var(--del-bg); color: var(--del); }
+.val.after { background: var(--add-bg); color: var(--add); }
+pre.json {
+  background: var(--code); border-radius: 8px; padding: 10px; overflow-x: auto;
+  font-size: 12px; max-height: 340px; margin: 8px 0 0;
+}
+.step { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
+.step b { color: var(--text); }
+.empty { color: var(--muted); padding: 40px 0; text-align: center; }
+footer { color: var(--muted); font-size: 12px; padding: 0 20px 30px; max-width: 1100px; margin: 0 auto; }
+`;
+
+const CLIENT = `
+const state = { ops: new Set(), entities: new Set(), q: '' };
+function apply() {
+  const q = state.q.toLowerCase();
+  let shown = 0;
+  document.querySelectorAll('.change').forEach(function (el) {
+    const op = el.dataset.op, ent = el.dataset.entity, hay = el.dataset.search;
+    let ok = true;
+    if (state.ops.size && !state.ops.has(op)) ok = false;
+    if (ok && state.entities.size && !state.entities.has(ent)) ok = false;
+    if (ok && q && hay.indexOf(q) === -1) ok = false;
+    el.hidden = !ok;
+    if (ok) shown++;
+  });
+  document.querySelectorAll('.entity').forEach(function (h) {
+    const any = document.querySelectorAll('.change[data-entity="' + h.dataset.entity + '"]:not([hidden])').length;
+    h.hidden = any === 0;
+  });
+  const empty = document.getElementById('empty');
+  if (empty) empty.hidden = shown !== 0;
+}
+document.querySelectorAll('.pill[data-op]').forEach(function (b) {
+  b.addEventListener('click', function () {
+    const op = b.dataset.op;
+    if (state.ops.has(op)) { state.ops.delete(op); b.setAttribute('aria-pressed', 'false'); }
+    else { state.ops.add(op); b.setAttribute('aria-pressed', 'true'); }
+    apply();
+  });
+});
+document.querySelectorAll('.pill[data-entity]').forEach(function (b) {
+  b.addEventListener('click', function () {
+    const e = b.dataset.entity;
+    if (state.entities.has(e)) { state.entities.delete(e); b.setAttribute('aria-pressed', 'false'); }
+    else { state.entities.add(e); b.setAttribute('aria-pressed', 'true'); }
+    apply();
+  });
+});
+const search = document.getElementById('q');
+if (search) search.addEventListener('input', function () { state.q = search.value; apply(); });
+document.addEventListener('keydown', function (e) {
+  if (e.key === 'e' && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault();
+    const open = document.querySelectorAll('.change[open]').length === 0;
+    document.querySelectorAll('.change').forEach(function (d) { d.open = open; });
+  }
+});
+`;
+
+const val = (v: unknown): string => {
+  if (v === null || v === undefined) return 'null';
+  if (typeof v === 'string') return v;
+  return JSON.stringify(v, null, 2);
+};
+
+export const renderHtml = (vm: ViewModel): string => {
+  const cs = vm.changeSet;
+  const plan = vm.plan ?? null;
+
+  const stepFor = (key: string) => plan?.steps.filter((s) => s.changeKey === key) ?? [];
+  const supportFor = (key: string) => plan?.classifications.find((c) => c.changeKey === key);
+
+  const opCounts = cs.changes.reduce<Record<string, number>>((a, c) => {
+    a[c.op] = (a[c.op] ?? 0) + 1;
+    return a;
+  }, {});
+  const entities = [...new Set(cs.changes.map((c) => c.entity))].sort();
+
+  const blocked = plan?.classifications.filter((c) => c.status === 'UNSUPPORTED') ?? [];
+
+  const byEntity = new Map<string, typeof cs.changes>();
+  for (const c of cs.changes) {
+    const arr = byEntity.get(c.entity) ?? [];
+    arr.push(c);
+    byEntity.set(c.entity, arr);
+  }
+
+  const changeHtml = [...byEntity.entries()]
+    .map(([entity, group]) => {
+      const rows = group
+        .map((c) => {
+          const sup = supportFor(c.key);
+          const steps = stepFor(c.key);
+          const search = [c.entity, c.label, c.op, ...c.flags, ...c.deltas.map((d) => d.key)]
+            .join(' ')
+            .toLowerCase();
+
+          const deltaRows = c.deltas
+            .map(
+              (d) => `<tr>
+              <td class="k mono">${escapeHtml(d.key)}</td>
+              <td class="b"><span class="val before mono">${escapeHtml(val(d.before))}</span></td>
+              <td class="a"><span class="val after mono">${escapeHtml(val(d.after))}</span></td>
+            </tr>`,
+            )
+            .join('');
+
+          const full =
+            c.op === 'create'
+              ? `<pre class="json mono">${escapeHtml(JSON.stringify(c.after, null, 2))}</pre>`
+              : c.op === 'delete'
+                ? `<pre class="json mono">${escapeHtml(JSON.stringify(c.before, null, 2))}</pre>`
+                : '';
+
+          const stepHtml = steps.length
+            ? `<div class="step">${steps
+                .map((s) => `<b>${escapeHtml(s.kind)}</b> ${escapeHtml(s.description)}`)
+                .join('<br>')}</div>`
+            : '';
+
+          const supHtml = sup
+            ? `<div class="step"><b>${sup.status}</b>${sup.via ? ` via <span class="mono">${escapeHtml(sup.via)}</span>` : ''}${
+                sup.reason ? ` — ${escapeHtml(sup.reason)}` : ''
+              }</div>`
+            : '';
+
+          const flagHtml = [
+            ...c.flags.map(
+              (f) =>
+                `<span class="flag${/destructive|readonly-edit|field-type-change|field-phase-move|phase-reorder|start-form/.test(f) ? ' warn' : ''}">${escapeHtml(f)}</span>`,
+            ),
+            sup && sup.status !== 'SUPPORTED' ? `<span class="flag warn">${sup.status}</span>` : '',
+          ]
+            .filter(Boolean)
+            .join('');
+
+          return `<details class="change" data-op="${c.op}" data-entity="${escapeHtml(c.entity)}" data-search="${escapeHtml(search)}">
+        <summary>
+          <span class="op ${c.op}">${c.op === 'create' ? '+' : c.op === 'delete' ? '−' : c.op === 'reorder' ? '↕' : '~'}</span>
+          <span class="title">${escapeHtml(c.label)}</span>
+          <span class="flags">${flagHtml}</span>
+        </summary>
+        <div class="body">
+          ${deltaRows ? `<table class="deltas">${deltaRows}</table>` : ''}
+          ${full}
+          ${supHtml}
+          ${stepHtml}
+        </div>
+      </details>`;
+        })
+        .join('\n');
+      return `<h2 class="entity" data-entity="${escapeHtml(entity)}">${escapeHtml(entity)} · ${group.length}</h2>\n${rows}`;
+    })
+    .join('\n');
+
+  const noticeBlocked = blocked.length
+    ? `<div class="notice block">
+        <h3>${blocked.length} change${blocked.length === 1 ? '' : 's'} cannot be applied</h3>
+        <ul>${blocked
+          .map(
+            (b) => `<li><span class="mono">${escapeHtml(b.entity)}.${escapeHtml(b.op)}</span> — ${escapeHtml(b.reason ?? 'no write path')}</li>`,
+          )
+          .join('')}</ul>
+      </div>`
+    : '';
+
+  const noticeSkipped = cs.skipped.length
+    ? `<div class="notice">
+        <h3>${cs.skipped.length} entity group${cs.skipped.length === 1 ? '' : 's'} not diffed</h3>
+        <ul>${cs.skipped
+          .map((s) => `<li><span class="mono">${escapeHtml(s.entity)}</span> — ${escapeHtml(s.reason)}</li>`)
+          .join('')}</ul>
+      </div>`
+    : '';
+
+  const opPills = Object.entries(opCounts)
+    .map(([op, n]) => `<button class="pill ${op}" data-op="${op}" aria-pressed="false">${op} ${n}</button>`)
+    .join('');
+  const entityPills = entities
+    .map((e) => `<button class="pill" data-entity="${escapeHtml(e)}" aria-pressed="false">${escapeHtml(e)}</button>`)
+    .join('');
+
+  const header =
+    cs.mode === 'cross-repo'
+      ? `${escapeHtml(cs.from.name)} <span class="mono">${cs.from.repoId}</span> &rarr; ${escapeHtml(cs.to.name)} <span class="mono">${cs.to.repoId}</span>`
+      : `${escapeHtml(cs.to.name)} <span class="mono">${cs.to.repoId}</span>`;
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>pipe diff — ${escapeHtml(cs.to.name)}</title>
+<style>${STYLE}</style>
+</head>
+<body>
+<header>
+  <h1>${header}</h1>
+  <div class="sub">
+    ${cs.mode} diff &middot; baseline from ${escapeHtml(cs.from.source)} &middot; compared tree from ${escapeHtml(cs.to.source)}
+    ${vm.workspace ? ` &middot; <span class="mono">${escapeHtml(vm.workspace)}</span>` : ''}
+  </div>
+  <div class="counts">${opPills}${entityPills}</div>
+  <input id="q" type="search" placeholder="filter by name, field or flag — cmd/ctrl+E toggles all">
+</header>
+<main>
+  ${noticeBlocked}
+  ${noticeSkipped}
+  ${cs.changes.length ? changeHtml : '<div class="empty">No changes. The edited workspace matches the baseline.</div>'}
+  <div class="empty" id="empty" hidden>Nothing matches this filter.</div>
+</main>
+<footer>
+  Generated ${escapeHtml(vm.generatedAt)} by <span class="mono">pipe diff --html</span>.
+  Webhook URLs and automation credentials can appear in these values — this file is as sensitive as the workspace.
+</footer>
+<script>${CLIENT}</script>
+</body>
+</html>
+`;
+};