makersclaw 0.8.0 → 0.8.1

package/registry/blocks/automation-model/demo.jsx

@@ -0,0 +1,42 @@
+"use client";
+
+// AutomationModel's gallery surface: every kind of step with its face,
+// its group and whether it costs, and the words the blocks say. Not
+// installed into apps.
+import { Glyph, KINDS, clockWords, creditsWords, healthOf, paletteGroups, triggerWords } from "../components/blocks/automation-model";
+
+const NOW = new Date("2026-10-11T12:00:00.000Z");
+
+export default function AutomationModelDemo() {
+  return (
+    <div className="grid gap-6 p-4">
+      {paletteGroups().map((g) => (
+        <section key={g.group} className="grid gap-2">
+          <h3 className="m-0 text-sm font-semibold">{g.label}</h3>
+          <ul className="m-0 grid list-none gap-2 p-0 sm:grid-cols-2">
+            {g.kinds.map((k) => (
+              <li key={k.kind} className="flex items-start gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground">
+                <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-border">
+                  <Glyph name={KINDS[k.kind].glyph} size={18} />
+                </span>
+                <span className="grid gap-0.5">
+                  <b className="text-sm">{k.name}</b>
+                  <span className="text-xs text-muted-foreground">{k.blurb}</span>
+                  <span className="text-xs text-muted-foreground">{k.paid ? "Costs credits" : "Free"}</span>
+                </span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+      <section className="grid gap-1 text-sm">
+        <h3 className="m-0 text-sm font-semibold">The words</h3>
+        <p className="m-0">{triggerWords({ type: "schedule", cron: "0 7 * * 1-5", tz: "team" })}</p>
+        <p className="m-0">{triggerWords({ type: "schedule", cron: "0 13,21 * * 1-5", tz: "Europe/Paris" })}</p>
+        <p className="m-0">Next: {clockWords("2026-10-12T11:00:00.000Z", "America/New_York", NOW)}</p>
+        <p className="m-0">Cost: {creditsWords(3.24)}; free: {creditsWords(0)}</p>
+        <p className="m-0">Health: {healthOf({ status: "on", live_version: 1, last_run: { status: "failed" } }).text}</p>
+      </section>
+    </div>
+  );
+}

package/registry/blocks/automation-model/edit.js

@@ -0,0 +1,262 @@
+// Edits to a definition, as pure functions: each takes the definition and
+// returns a new one, never touching the old (so undo is a stack of them).
+//
+// The canvas speaks in slots (graph.js: a list and a place in it) and in
+// step ids; the format speaks in `then`, `else` and `steps` lists. This
+// file is the only place the two meet.
+//
+// Step ids are the merge key between a shipped version and a member's
+// edit, so an edit never renames one.
+
+import { newStep } from "./catalog";
+
+const clone = (v) => JSON.parse(JSON.stringify(v));
+
+/** Every step id in the definition, nested ones included. */
+export function allStepIds(steps) {
+  const ids = new Set();
+  const walk = (list) => {
+    for (const s of list) {
+      ids.add(s.id);
+      if (s.kind === "condition") {
+        walk(s.then ?? []);
+        walk(s.else ?? []);
+      } else if (s.kind === "loop") walk(s.steps ?? []);
+    }
+  };
+  walk(steps ?? []);
+  return ids;
+}
+
+/** A step by id, wherever it sits. */
+export function findStep(steps, id) {
+  for (const s of steps ?? []) {
+    if (s.id === id) return s;
+    if (s.kind === "condition") {
+      const hit = findStep(s.then ?? [], id) ?? findStep(s.else ?? [], id);
+      if (hit) return hit;
+    } else if (s.kind === "loop") {
+      const hit = findStep(s.steps ?? [], id);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+/** The list a ref names, in a (mutable, cloned) definition. A condition's
+ *  empty branch is made when it is first needed. */
+function listOf(steps, ref) {
+  if (ref.at === "root") return steps;
+  const owner = findStep(steps, ref.step);
+  if (!owner) return null;
+  if (ref.at === "loop") return owner.kind === "loop" ? (owner.steps ??= []) : null;
+  if (owner.kind !== "condition") return null;
+  if (ref.at === "then") return (owner.then ??= []);
+  return (owner.else ??= []);
+}
+
+/** Put a step into the definition at a slot. */
+export function insertStep(def, slot, step) {
+  const next = clone(def);
+  const list = listOf(next.steps, slot.list);
+  if (!list) return def;
+  list.splice(Math.max(0, Math.min(slot.index, list.length)), 0, step);
+  return next;
+}
+
+/** A new step of `kind` at a slot, with an id nobody uses. */
+export function addStep(def, slot, kind) {
+  const step = newStep(kind, allStepIds(def.steps));
+  return { def: insertStep(def, slot, step), id: step.id };
+}
+
+/** Where a step sits: its list and its index. */
+export function locate(steps, id, ref = { at: "root" }) {
+  for (let i = 0; i < (steps ?? []).length; i += 1) {
+    const s = steps[i];
+    if (s.id === id) return { list: ref, index: i };
+    if (s.kind === "condition") {
+      const hit = locate(s.then ?? [], id, { at: "then", step: s.id }) ?? locate(s.else ?? [], id, { at: "else", step: s.id });
+      if (hit) return hit;
+    } else if (s.kind === "loop") {
+      const hit = locate(s.steps ?? [], id, { at: "loop", step: s.id });
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+/** The slot right after a step: where "add a step here" puts one. */
+export function slotAfter(def, id) {
+  const at = locate(def.steps, id);
+  return at ? { list: at.list, index: at.index + 1 } : null;
+}
+
+/** The end of the main path: where a palette press adds a step when none
+ *  is selected. */
+export function slotAtEnd(def) {
+  return { list: { at: "root" }, index: def.steps.length };
+}
+
+/** How many steps a step holds inside it (a condition's branches, a loop). */
+export function innerCount(step) {
+  if (step.kind === "condition") return (step.then?.length ?? 0) + (step.else?.length ?? 0);
+  if (step.kind === "loop") return step.steps?.length ?? 0;
+  return 0;
+}
+
+/** Take a step out, with everything inside it. */
+export function removeStep(def, id) {
+  const next = clone(def);
+  const cut = (list) => {
+    const i = list.findIndex((s) => s.id === id);
+    if (i >= 0) {
+      list.splice(i, 1);
+      return true;
+    }
+    for (const s of list) {
+      if (s.kind === "condition" && (cut(s.then ?? []) || cut(s.else ?? []))) return true;
+      if (s.kind === "loop" && cut(s.steps ?? [])) return true;
+    }
+    return false;
+  };
+  return cut(next.steps) ? next : def;
+}
+
+/** Change a step's own fields. Its id and kind never change. */
+export function updateStep(def, id, patch) {
+  const next = clone(def);
+  const step = findStep(next.steps, id);
+  if (!step) return def;
+  for (const [k, v] of Object.entries(patch)) {
+    if (k === "id" || k === "kind") continue;
+    if (v === undefined) delete step[k];
+    else step[k] = v;
+  }
+  return next;
+}
+
+/** Move a step one place earlier or later within its own list. */
+export function nudgeStep(def, id, by) {
+  const at = locate(def.steps, id);
+  if (!at) return def;
+  const next = clone(def);
+  const list = listOf(next.steps, at.list);
+  if (!list) return def;
+  const to = at.index + by;
+  if (to < 0 || to >= list.length) return def;
+  const [moved] = list.splice(at.index, 1);
+  list.splice(to, 0, moved);
+  return next;
+}
+
+/** A copy of a step (and what is inside it) right after it, with fresh
+ *  ids. → { def, id } or null. */
+export function duplicateStep(def, id) {
+  const at = locate(def.steps, id);
+  const step = findStep(def.steps, id);
+  if (!at || !step) return null;
+  const taken = allStepIds(def.steps);
+  const copy = clone(step);
+  const rename = (s) => {
+    const base = s.id.replace(/_\d+$/, "");
+    let n = 2;
+    let fresh = `${base}_${n}`;
+    while (taken.has(fresh)) fresh = `${base}_${(n += 1)}`;
+    taken.add(fresh);
+    s.id = fresh;
+    if (s.kind === "condition") {
+      (s.then ?? []).forEach(rename);
+      (s.else ?? []).forEach(rename);
+    } else if (s.kind === "loop") (s.steps ?? []).forEach(rename);
+  };
+  rename(copy);
+  return { def: insertStep(def, { list: at.list, index: at.index + 1 }, copy), id: copy.id };
+}
+
+/** What a step may read: the steps that run before it (and, in a loop, the
+ *  item). For the data picker. → { steps: [{ id, kind, label }], inLoop } */
+export function availableBefore(def, id, titleOf) {
+  const out = [];
+  let inLoop = false;
+  const entry = (s) => ({ id: s.id, kind: s.kind, label: titleOf(s) });
+  const walk = (list, inside) => {
+    for (const s of list) {
+      if (s.id === id) {
+        inLoop = inside;
+        return true;
+      }
+      out.push(entry(s));
+      // A step inside a branch or a loop sees what ran before it there, and
+      // the step that holds it; never the sibling branch it did not take.
+      if (s.kind === "condition") {
+        const then = s.then ?? [];
+        const other = s.else ?? [];
+        if (findStep(then, id)) return walk(then, inside);
+        if (findStep(other, id)) return walk(other, inside);
+      } else if (s.kind === "loop" && findStep(s.steps ?? [], id)) return walk(s.steps ?? [], true);
+    }
+    return false;
+  };
+  walk(def.steps ?? [], false);
+  return { steps: out, inLoop };
+}
+
+/** A key from a name: `Morning read` becomes `morning-read`. */
+export function keyFromName(name, taken = new Set()) {
+  let base = String(name ?? "")
+    .toLowerCase()
+    .normalize("NFKD")
+    .replace(/[̀-ͯ]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 52);
+  if (!/^[a-z]/.test(base)) base = `a-${base}`.replace(/-+$/, "");
+  if (base === "a" || base === "") base = "automation";
+  if (!taken.has(base)) return base;
+  for (let n = 2; n < 1000; n += 1) if (!taken.has(`${base}-${n}`)) return `${base}-${n}`;
+  return `${base}-${taken.size + 1}`;
+}
+
+/** An empty automation: a trigger and nothing else. */
+export function blankAutomation(name, key, trigger = { type: "manual" }) {
+  return {
+    format: 1,
+    key,
+    name,
+    trigger,
+    inputs: {},
+    settings: { overlap: "skip", on_failure: "retry_then_agent", only_if_changed: false },
+    steps: [],
+  };
+}
+
+/** The step a problem's path points into, for the red mark on its card:
+ *  `steps[2].then[0].input.since` becomes the step at that place. A path
+ *  that is not inside a step (`trigger.cron`, `settings`) answers null. */
+export function stepIdForPath(def, path) {
+  const segs = [...String(path ?? "").matchAll(/(steps|then|else)\[(\d+)\]/g)].map((m) => ({ key: m[1], idx: Number(m[2]) }));
+  if (segs.length === 0 || segs[0].key !== "steps") return null;
+  let step = def.steps?.[segs[0].idx];
+  for (const seg of segs.slice(1)) {
+    if (!step) break;
+    let list;
+    if (step.kind === "condition" && (seg.key === "then" || seg.key === "else")) list = step[seg.key] ?? [];
+    else if (step.kind === "loop" && seg.key === "steps") list = step.steps;
+    const next = list?.[seg.idx];
+    if (!next) break;
+    step = next;
+  }
+  return step?.id ?? null;
+}
+
+/** A definition as text with its keys in order, so two that read the same
+ *  are equal whatever order they came in. */
+export function canonicalJson(value) {
+  const sort = (v) => {
+    if (Array.isArray(v)) return v.map(sort);
+    if (v && typeof v === "object") return Object.fromEntries(Object.keys(v).sort().map((k) => [k, sort(v[k])]));
+    return v;
+  };
+  return JSON.stringify(sort(value));
+}

package/registry/blocks/automation-model/fixes.js

@@ -0,0 +1,287 @@
+// The agent's fixes and a person's run controls, in words and in rules.
+//
+// Pure; no React. Three questions the screens ask:
+//
+//   draftOfStep(fixes, stepId)   is there a change for next time, drafted
+//                                for this step, and has a person decided?
+//   changeLines(patch, def)      what a drafted change would touch, by step
+//   controlsOf(run, rows, opts)  which controls a run offers right now
+//   retryFromOf(run, rows, def, stepId)
+//                                whether "Retry from this step" shows for a
+//                                step, where it starts, and whether it asks
+//
+// A run's `fixes` are the fixer's attempts (GET automation-runs/<id>):
+// [{ id, step_path, step_id, attempt, status, credits, drafts: [{ id, why,
+// status: proposed | kept | dropped, base_version, new_version }] }].
+// A drafted change is `{ changes: [{ id: <step id>, input?, values?, retry?,
+// prompt?, system?, query? }] }`.
+//
+// And the versions of one automation, for a screen that shares the draft with
+// the agent: which version is the newest, whether the draft is the agent's and
+// what it said it did, what changed between two definitions, and the words of
+// "a newer version was saved while you were editing".
+
+import { findStep } from "./edit";
+import { stepTitle } from "./catalog";
+import { latestRows } from "./overlay";
+import { ACTIVE, triggerWords } from "./words";
+
+/** The two words a card wears for a step that was fixed or changed:
+ *  "The agent fixed this" or, for a person's own edit, "You changed its data". */
+export function fixTag(fix) {
+  if (!fix) return "";
+  if (fix.by === "member") return fix.kind === "skip" ? "You skipped it" : "You changed its data";
+  return "The agent fixed this";
+}
+
+/** The newest draft the fixer made for a step id (any pass of it), or null. */
+export function draftOfStep(fixes, stepId) {
+  let found = null;
+  for (const f of fixes ?? []) {
+    if (f.step_id !== stepId) continue;
+    for (const d of f.drafts ?? []) found = d;
+  }
+  return found;
+}
+
+const PARTS = { retry: "how it tries again", prompt: "the words it asks with", system: "its instructions", query: "what it searches for" };
+
+/** What a drafted change touches: [{ stepId, title, what }], one line per
+ *  step. A value is named by its key, never shown. */
+export function changeLines(patch, def) {
+  const out = [];
+  for (const change of Array.isArray(patch?.changes) ? patch.changes : []) {
+    if (!change || typeof change.id !== "string") continue;
+    const step = def ? findStep(def.steps, change.id) : null;
+    const parts = [];
+    for (const field of ["input", "values"]) {
+      const v = change[field];
+      if (v && typeof v === "object") parts.push(...Object.keys(v).map((k) => `“${k}”`));
+    }
+    for (const [key, words] of Object.entries(PARTS)) if (change[key] !== undefined) parts.push(words);
+    out.push({ stepId: change.id, title: step ? stepTitle(step) : change.id, what: parts.length ? parts.join(", ") : "its settings" });
+  }
+  return out;
+}
+
+/** The step a parked run is stuck at: the last that failed or whose send is
+ *  not known to have gone. */
+function blockedRow(rows) {
+  let found = null;
+  for (const r of latestRows(rows)) if (r.status === "failed" || r.status === "unknown") found = r;
+  return found;
+}
+
+/** The ways a run can be limited by money: only the run's own limit can be
+ *  raised from here; the wallet, the owner's cap and the app's weekly
+ *  allowance are not this screen's to lift. */
+const RAISABLE = "run_cap";
+
+/**
+ * Which controls a run offers right now.
+ *
+ *   run    { status, paused?, cap_credits?, error? }
+ *   rows   the run's step rows
+ *   opts   { stepsVisible }: the member may read a step's data (so may edit it)
+ *
+ * → { state: ended | active | paused | parked, pause, resume, stop, retry,
+ *     skip, edit, raise, blocked: { path, stepId, unknownSend } | null,
+ *     raiseDefault }
+ */
+export function controlsOf(run, rows, { stepsVisible = false } = {}) {
+  const off = { state: "ended", pause: false, resume: false, stop: false, retry: false, skip: false, edit: false, raise: false, blocked: null, raiseDefault: 0 };
+  if (!run || !ACTIVE.has(run.status)) return off;
+  const paused = Boolean(run.paused);
+  const parked = run.status === "needs_you";
+  const row = parked ? blockedRow(rows) : null;
+  const blocked = row ? { path: row.path, stepId: row.step_id, unknownSend: row.status === "unknown" } : null;
+  const cap = Number(run.cap_credits) || 0;
+  return {
+    state: paused ? "paused" : parked ? "parked" : "active",
+    pause: !paused && !parked,
+    resume: paused || parked,
+    stop: true,
+    retry: Boolean(blocked),
+    skip: Boolean(blocked),
+    edit: Boolean(blocked) && stepsVisible && !blocked.unknownSend,
+    raise: parked && run.error?.code === RAISABLE,
+    blocked,
+    raiseDefault: cap > 0 ? Math.max(10, Math.ceil(cap / 2)) : 100,
+  };
+}
+
+const OVER = new Set(["done", "failed", "stopped"]);
+
+/**
+ * "Retry from this step": start a run over at a step, running it and every
+ * step after it again. It is offered for a step that ran, in a run that is
+ * over (done, failed, stopped) or parked on its owner; never in one that is
+ * going or paused, and never in a run the app's own job runner started.
+ *
+ *   run     { status, trigger_key? }
+ *   rows    the run's step rows
+ *   def     the definition the run used
+ *   stepId  the step the member is looking at
+ *
+ * → { show, path, title, inLoop, loopTitle, sent }
+ *   path      the step to start from, at the TOP level of the flow: a step
+ *             inside a loop or a branch starts over from the loop or branch
+ *             that holds it (the platform takes the top-level step's id)
+ *   inLoop    the step sits inside another step, so `path` is that step
+ *   loopTitle that holding step's name, for the words
+ *   sent      a step from there on is known to have sent something, so ask
+ *             first; the platform asks too (`needs_confirm_resend`) when this
+ *             cannot tell
+ */
+export function retryFromOf(run, rows, def, stepId) {
+  const off = { show: false, path: null, title: null, inLoop: false, loopTitle: null, sent: false };
+  if (!run || !def || !Array.isArray(def.steps) || !stepId) return off;
+  if (!OVER.has(run.status) && run.status !== "needs_you") return off;
+  if (run.paused || (typeof run.trigger_key === "string" && run.trigger_key.startsWith("brief:"))) return off;
+  const at = def.steps.findIndex((top) => top.id === stepId || findStep([top], stepId));
+  if (at < 0) return off;
+  const top = def.steps[at];
+  const latest = latestRows(rows);
+  // Only a step that ran can be started over from, and the platform starts at
+  // the top-level step's own place.
+  if (!latest.some((r) => r.step_id === stepId) || !latest.some((r) => r.path === top.id)) return off;
+  const index = new Map();
+  def.steps.forEach((s, i) => {
+    index.set(s.id, i);
+    for (const inner of nestedIds(s)) index.set(inner, i);
+  });
+  const sent = latest.some((r) => (index.get(r.step_id) ?? -1) >= at && (r.status === "done" || r.status === "unknown") && (r.status === "unknown" || r.effect === "send" || r.fix?.effect === "send"));
+  const inLoop = top.id !== stepId;
+  return { show: true, path: top.id, title: stepTitle(findStep([top], stepId)), inLoop, loopTitle: inLoop ? stepTitle(top) : null, sent };
+}
+
+function nestedIds(step) {
+  const out = [];
+  for (const list of [step.steps, step.then, step.else]) {
+    for (const s of Array.isArray(list) ? list : []) out.push(s.id, ...nestedIds(s));
+  }
+  return out;
+}
+
+/** The words of "Retry from this step". */
+export const RETRY_FROM = {
+  button: "Retry from this step",
+  what: "Runs this step and every step after it again. The steps before it keep what they made.",
+  inLoop: (title) => `This step is inside “${title}”, so it starts over from there.`,
+  ask: "It already sent something. Run it again from here?",
+  yes: "Run it again",
+  no: "Cancel",
+};
+
+/** A control's answer in words: what it did, or why it could not. */
+export const CONTROL_DONE = {
+  pause: "Paused. Nothing new starts until you resume it.",
+  resume: "Resumed.",
+  stop: "Stopped.",
+  retry: "Trying that step again.",
+  skip: "Skipped that step.",
+  edit: "Trying that step again with your data.",
+  retry_from: "Starting over from that step.",
+};
+
+/** The platform's refusal codes, for when it sends no words of its own. */
+export const CONTROL_REFUSED = {
+  not_found: "That run is gone.",
+  not_active: "This run has already ended.",
+  not_blocked: "Nothing is stuck right now.",
+  running: "A step is running. Try again in a moment.",
+  needs_confirm: "Say whether it went first.",
+  unknown_step: "That step is not part of this run.",
+  output_needed: "A later step uses what this one makes, so it cannot be skipped.",
+  bad_request: "That did not work. Check what you typed.",
+  bad_step: "That step has not run in this run, so there is nothing to start over from.",
+  busy: "This automation is already running. Let that one finish, or stop it, then start over here.",
+  not_controllable: "This run was started by the app's own job runner, so it cannot be changed here.",
+  needs_confirm_resend: "A step from here on already sent something. Confirm that is right, or start over from a later step.",
+};
+
+/* ---- the versions, and the agent's draft ------------------------------------ */
+
+/** The newest version number: the highest in `versions`, else the draft's,
+ *  else the live one's. Null when there is none (an automation not saved). */
+export function latestVersionOf({ versions, draftVersion, liveVersion } = {}) {
+  let top = null;
+  for (const v of Array.isArray(versions) ? versions : []) {
+    const n = Number(v?.version);
+    if (Number.isInteger(n) && (top === null || n > top)) top = n;
+  }
+  if (top !== null) return top;
+  for (const n of [draftVersion, liveVersion]) if (Number.isInteger(n) && (top === null || n > top)) top = n;
+  return top;
+}
+
+/** Whether a version row was written by the agent. */
+const byAgent = (v) => Boolean(v) && (v.kind === "agent" || v.author === "agent");
+
+/** The note on an agent's version, said as a person would: "also copy Owen".
+ *  The agent files it as "Changed: also copy Owen"; the prefix goes. */
+function noteWords(note) {
+  const text = typeof note === "string" ? note.trim().replace(/^changed:\s*/i, "").replace(/^changed by the agent\.?$/i, "").trim() : "";
+  return text.length > 160 ? `${text.slice(0, 159).trimEnd()}…` : text;
+}
+
+/**
+ * The draft, when the agent wrote it and it is not live yet: `{ version,
+ * note }` (the note may be ""), else null. The editor draws "Drawn by the
+ * agent · from: <note>" under its header while this is not null.
+ */
+export function agentDraftOf({ versions, draftVersion, liveVersion } = {}) {
+  if (!Number.isInteger(draftVersion) || draftVersion === liveVersion) return null;
+  const row = (Array.isArray(versions) ? versions : []).find((v) => v?.version === draftVersion);
+  return byAgent(row) ? { version: draftVersion, note: noteWords(row.note) } : null;
+}
+
+/**
+ * The words over "a newer version arrived while you have changes".
+ *   version   the newer version's number
+ *   versions  the version rows, to see who wrote it
+ */
+export function newerVersionWords(version, versions) {
+  const row = (Array.isArray(versions) ? versions : []).find((v) => v?.version === version);
+  return byAgent(row)
+    ? `The agent drew v${version} from your last save. You have changes that are not saved.`
+    : `Version ${version} was saved after you opened this. You have changes that are not saved.`;
+}
+
+/** Every step in a list with its nested ones, by id. */
+function indexSteps(steps, into = new Map()) {
+  for (const s of Array.isArray(steps) ? steps : []) {
+    into.set(s.id, s);
+    indexSteps(s.then, into);
+    indexSteps(s.else, into);
+    indexSteps(s.steps, into);
+  }
+  return into;
+}
+
+/** A step without the steps inside it: a container's own change is its own fields. */
+const bare = (s) => (s.kind === "condition" ? { ...s, then: undefined, else: undefined } : s.kind === "loop" ? { ...s, steps: undefined } : s);
+
+/**
+ * What changed between two definitions, one plain line each, at most 20:
+ * how it starts, its name, a step added, removed or changed (by its title),
+ * its settings. Pure; a value is never shown, only what it touched. The
+ * platform's agent writes the same lines for itself (agent-app
+ * automation-verbs `changeLines`); this is the screen's copy of it.
+ */
+export function changeLinesBetween(before, after) {
+  if (!before || !after) return [];
+  const a = indexSteps(before.steps);
+  const b = indexSteps(after.steps);
+  const out = [];
+  if (JSON.stringify(before.trigger ?? null) !== JSON.stringify(after.trigger ?? null)) out.push(`Starts: ${triggerWords(before.trigger)} → ${triggerWords(after.trigger)}`);
+  if ((before.name ?? "") !== (after.name ?? "")) out.push(`Renamed to “${after.name ?? ""}”`);
+  for (const [id, s] of b) if (!a.has(id)) out.push(`Added “${stepTitle(s)}”`);
+  for (const [id, s] of a) if (!b.has(id)) out.push(`Removed “${stepTitle(s)}”`);
+  for (const [id, s] of b) {
+    const was = a.get(id);
+    if (was && JSON.stringify(bare(was)) !== JSON.stringify(bare(s))) out.push(`Changed “${stepTitle(s)}”`);
+  }
+  if (JSON.stringify(before.settings ?? null) !== JSON.stringify(after.settings ?? null)) out.push("Changed its settings");
+  return out.slice(0, 20);
+}

package/registry/blocks/automation-model/glyph.jsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { Icon } from "../../ui";
+import { GLYPH_ICON } from "./catalog";
+
+// The face of a step kind, drawn with the kit's own icons. One table
+// (catalog.js GLYPH_ICON): the canvas, the picker, the outline and the
+// settings panel all ask it, so a kind wears one face everywhere.
+
+/** name: a glyph from the catalog ("action", "condition", "trigger-schedule" …). */
+export function Glyph({ name, size = 22, className }) {
+  return <Icon name={GLYPH_ICON[name] ?? "zap"} size={size} className={className} />;
+}