@pipefy/pipefy-process-coder 0.1.0 → 0.1.2

package/{src/diff/html.ts → dist/diff/html.js}

@@ -1,322 +1,274 @@
-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>
-`;
-};
+const escapeHtml = (s) => 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) => {
+    if (v === null || v === undefined)
+        return 'null';
+    if (typeof v === 'string')
+        return v;
+    return JSON.stringify(v, null, 2);
+};
+export const renderHtml = (vm) => {
+    const cs = vm.changeSet;
+    const plan = vm.plan ?? null;
+    const stepFor = (key) => plan?.steps.filter((s) => s.changeKey === key) ?? [];
+    const supportFor = (key) => plan?.classifications.find((c) => c.changeKey === key);
+    const opCounts = cs.changes.reduce((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();
+    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>
+`;
+};