makersclaw 0.8.0 → 0.8.2

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

@@ -0,0 +1,410 @@
+// The canvas's layout: an automation (a trigger and a tree of steps)
+// turned into boxes and curved connectors, left to right.
+//
+// Pure. No React, no DOM, no measuring: every size is a constant, so the
+// same definition always gives the same picture and a test can read it.
+//
+// What the picture says:
+// - the trigger at the left, then the steps, a connector with a + between
+//   any two of them, and a + bubble where a path ends;
+// - a condition is a router: its branches are labelled paths, one above
+//   the other, and they meet again at a small join dot where the next
+//   step carries on. A branch that ends in a Stop never meets it;
+// - "for each" is a dashed box around its steps, with a door in and a
+//   door out; collapsed it is one card that lists them.
+//
+// The format has no cycles and no free joins, so a branch can only rejoin
+// where its condition ends. That is what keeps this a layout, not a
+// graph-drawing problem.
+//
+// Every connector knows its `slot`: the place in the definition a step
+// inserted there would land (edit.js insertStep).
+
+import { KINDS, stepSub, stepTitle, triggerTitle } from "./catalog";
+
+/* ---- sizes -------------------------------------------------------------- */
+
+export const T = 72; // a step's tile
+const PITCH = 196; // one step's column: the tile, its label, room for a connector
+const LABEL_BELOW = 76; // the title and the quiet line under a tile
+const ABOVE_TILE = 22; // a badge and a step number above it
+const JOIN_W = 52; // the column a join dot takes
+const MIN_BRANCH = 110; // an empty branch is still a path
+const BRANCH_GAP = 30;
+const LOOP_PAD_L = 44;
+const LOOP_PAD_R = 44;
+const LOOP_PAD_T = 46;
+const LOOP_PAD_B = 22;
+const LOOP_LEAD = 28; // before the box's door
+const LOOP_MIN_INNER = 150;
+const PORT = 14;
+const END = 28; // the + bubble at a path's end
+const END_GAP = 64;
+const CARD_W = 232;
+export const MARGIN = 90;
+/** The label under a tile is this wide, centred on the tile. */
+export const LABEL_W = 156;
+
+/* ---- small helpers ------------------------------------------------------ */
+
+const emptyFrag = () => ({ nodes: [], edges: [], groups: [], entry: null, tails: [], w: 0, above: 0, below: 0 });
+
+function shift(f, dx, dy) {
+  for (const n of f.nodes) {
+    n.x += dx;
+    n.y += dy;
+  }
+  for (const g of f.groups) {
+    g.x += dx;
+    g.y += dy;
+  }
+  return f;
+}
+
+function absorb(into, f) {
+  into.nodes.push(...f.nodes);
+  into.edges.push(...f.edges);
+  into.groups.push(...f.groups);
+}
+
+let edgeCounter = 0;
+function edge(from, to, t, plus = true) {
+  edgeCounter += 1;
+  return { id: `e${edgeCounter}:${from}>${to}`, from, to, label: t.label, branch: t.branch, slot: t.slot, plus: plus && t.slot !== null };
+}
+
+export const sameSlot = (a, b) => a.index === b.index && JSON.stringify(a.list) === JSON.stringify(b.list);
+
+/* ---- steps -------------------------------------------------------------- */
+
+function leaf(step, num) {
+  const info = KINDS[step.kind] ?? KINDS.action;
+  return {
+    id: step.id,
+    type: "step",
+    stepId: step.id,
+    kind: step.kind,
+    x: (PITCH - T) / 2,
+    y: -T / 2,
+    w: T,
+    h: T,
+    title: stepTitle(step),
+    sub: stepSub(step),
+    tone: info.tone,
+    mark: info.mark,
+    num,
+  };
+}
+
+function stepFrag(step, ref, index, hasNext, ctx) {
+  const after = { list: ref, index: index + 1 };
+  if (step.kind === "condition") return conditionFrag(step, ref, index, hasNext, ctx);
+  if (step.kind === "loop") return loopFrag(step, ref, index, ctx);
+  const f = emptyFrag();
+  f.nodes.push(leaf(step, ctx.next()));
+  f.entry = step.id;
+  // A Stop ends its path: nothing follows it.
+  f.tails = step.kind === "stop" ? [] : [{ from: step.id, slot: after }];
+  f.w = PITCH;
+  f.above = T / 2 + ABOVE_TILE;
+  f.below = T / 2 + LABEL_BELOW;
+  return f;
+}
+
+function seq(steps, ref, ctx) {
+  const out = emptyFrag();
+  let prev = [];
+  let x = 0;
+  steps.forEach((step, i) => {
+    const f = shift(stepFrag(step, ref, i, i < steps.length - 1, ctx), x, 0);
+    absorb(out, f);
+    if (i === 0) out.entry = f.entry;
+    else if (f.entry) for (const t of prev) out.edges.push(edge(t.from, f.entry, t, true));
+    prev = f.tails;
+    x += f.w;
+    out.above = Math.max(out.above, f.above);
+    out.below = Math.max(out.below, f.below);
+  });
+  out.tails = prev;
+  out.w = x;
+  return out;
+}
+
+function conditionFrag(step, ref, index, hasNext, ctx) {
+  const f = emptyFrag();
+  f.nodes.push(leaf(step, ctx.next()));
+  f.entry = step.id;
+  const branches = [
+    { key: "then", label: "Yes", list: step.then ?? [], ref: { at: "then", step: step.id } },
+    { key: "else", label: "No", list: step.else ?? [], ref: { at: "else", step: step.id } },
+  ];
+  const built = branches.map((b) => ({ b, frag: seq(b.list, b.ref, ctx) }));
+  const wb = Math.max(MIN_BRANCH, ...built.map((x) => x.frag.w));
+
+  // Stack the branches: the first above the main line, the second below it.
+  const [first, second] = built;
+  const line0 = -(BRANCH_GAP / 2 + first.frag.below);
+  const line1 = BRANCH_GAP / 2 + second.frag.above;
+  const lines = [line0, line1];
+
+  const joinId = `${step.id}:join`;
+  const tails = [];
+  built.forEach(({ b, frag }, k) => {
+    const start = { from: step.id, label: b.label, branch: b.key, slot: { list: b.ref, index: 0 } };
+    if (frag.entry) {
+      shift(frag, PITCH, lines[k]);
+      absorb(f, frag);
+      f.edges.push(edge(step.id, frag.entry, start, true));
+      tails.push(...frag.tails);
+    } else {
+      tails.push(start);
+    }
+  });
+
+  const width = PITCH + wb;
+  if (hasNext) {
+    f.nodes.push({
+      id: joinId,
+      type: "join",
+      stepId: step.id,
+      kind: null,
+      x: width + JOIN_W / 2 - 7,
+      y: -7,
+      w: 14,
+      h: 14,
+      title: "",
+      sub: "",
+      tone: "plain",
+      num: 0,
+    });
+    for (const t of tails) f.edges.push(edge(t.from, joinId, t, true));
+    f.tails = [{ from: joinId, slot: { list: ref, index: index + 1 } }];
+    f.w = width + JOIN_W;
+  } else {
+    f.tails = tails;
+    f.w = width + 20;
+  }
+  f.above = Math.max(T / 2 + ABOVE_TILE, -line0 + first.frag.above);
+  f.below = Math.max(T / 2 + LABEL_BELOW, line1 + second.frag.below);
+  return f;
+}
+
+function loopFrag(step, ref, index, ctx) {
+  const f = emptyFrag();
+  const after = { list: ref, index: index + 1 };
+  const num = ctx.next();
+  const info = KINDS.loop;
+  const inId = `${step.id}:in`;
+  const outId = `${step.id}:out`;
+  const innerRef = { at: "loop", step: step.id };
+  const title = stepTitle(step);
+  const sub = stepSub(step);
+  const inside = step.steps ?? [];
+
+  if (ctx.collapsed.has(step.id)) {
+    // One card that lists what is inside.
+    const items = inside.map((s) => ({ id: s.id, title: stepTitle(s) }));
+    const h = 64 + Math.max(1, items.length) * 32;
+    f.nodes.push({
+      id: step.id,
+      type: "card",
+      stepId: step.id,
+      kind: "loop",
+      x: LOOP_LEAD,
+      y: -h / 2,
+      w: CARD_W,
+      h,
+      title,
+      sub,
+      tone: info.tone,
+      num,
+      items,
+    });
+    f.entry = step.id;
+    f.tails = [{ from: step.id, slot: after }];
+    f.w = LOOP_LEAD + CARD_W + 36;
+    f.above = h / 2 + 12;
+    f.below = h / 2 + 12;
+    return f;
+  }
+
+  const inner = seq(inside, innerRef, ctx);
+  const empty = inside.length === 0;
+  const innerW = empty ? LOOP_MIN_INNER : Math.max(LOOP_MIN_INNER, inner.w);
+  const above = empty ? T / 2 + ABOVE_TILE : inner.above;
+  const below = empty ? T / 2 + 12 : inner.below;
+  const w = LOOP_PAD_L + innerW + LOOP_PAD_R;
+  const h = above + below + LOOP_PAD_T + LOOP_PAD_B;
+  f.groups.push({ id: step.id, stepId: step.id, x: LOOP_LEAD, y: -(above + LOOP_PAD_T), w, h, title, sub });
+  const port = (id, x) => ({
+    id,
+    type: "port",
+    stepId: step.id,
+    kind: "loop",
+    x: x - PORT / 2,
+    y: -PORT / 2,
+    w: PORT,
+    h: PORT,
+    title: "",
+    sub: "",
+    tone: info.tone,
+    num: 0,
+  });
+  f.nodes.push(port(inId, LOOP_LEAD), port(outId, LOOP_LEAD + w));
+  f.entry = inId;
+  if (!empty && inner.entry) {
+    shift(inner, LOOP_LEAD + LOOP_PAD_L, 0);
+    absorb(f, inner);
+    f.edges.push(edge(inId, inner.entry, { slot: { list: innerRef, index: 0 } }, true));
+    for (const t of inner.tails) f.edges.push(edge(t.from, outId, t, true));
+  } else {
+    f.edges.push(edge(inId, outId, { slot: { list: innerRef, index: 0 } }, true));
+  }
+  f.tails = [{ from: outId, slot: after }];
+  f.w = LOOP_LEAD + w + 36;
+  f.above = above + LOOP_PAD_T + 6;
+  f.below = below + LOOP_PAD_B + 6;
+  return f;
+}
+
+/* ---- the whole picture --------------------------------------------------- */
+
+/**
+ * layoutAutomation(def, { triggerWords, collapsed })
+ *   → { nodes, edges, groups, bounds }
+ * `triggerWords` is the trigger in words ("Weekdays at 07:00"); `collapsed`
+ * a Set of loop step ids drawn as one card.
+ */
+export function layoutAutomation(def, opts = {}) {
+  edgeCounter = 0;
+  let counter = 0;
+  const ctx = { collapsed: opts.collapsed ?? new Set(), next: () => (counter += 1) };
+  const trig = def.trigger ?? { type: "manual" };
+
+  const f = emptyFrag();
+  f.nodes.push({
+    id: "trigger",
+    type: "trigger",
+    stepId: null,
+    kind: "trigger",
+    x: (PITCH - T) / 2,
+    y: -T / 2,
+    w: T,
+    h: T,
+    title: triggerTitle(trig.type),
+    sub: opts.triggerWords ?? (trig.type === "schedule" ? trig.cron : "Run it when you press Run"),
+    tone: "plain",
+    num: 0,
+    triggerType: trig.type,
+  });
+  const body = shift(seq(def.steps ?? [], { at: "root" }, ctx), PITCH, 0);
+  absorb(f, body);
+  const root = { list: { at: "root" }, index: 0 };
+  let tails;
+  if (body.entry) {
+    f.edges.push(edge("trigger", body.entry, { slot: root }, true));
+    tails = body.tails;
+  } else {
+    tails = [{ from: "trigger", slot: root }];
+  }
+
+  // A + bubble at the end of every path that goes on.
+  const byId = new Map(f.nodes.map((n) => [n.id, n]));
+  tails.forEach((t, i) => {
+    const src = byId.get(t.from);
+    if (!src) return;
+    const id = `end:${i}`;
+    f.nodes.push({
+      id,
+      type: "end",
+      stepId: null,
+      kind: null,
+      x: src.x + src.w + END_GAP,
+      y: src.y + src.h / 2 - END / 2,
+      w: END,
+      h: END,
+      title: body.entry ? "Add a step" : "Add the first step",
+      sub: "",
+      tone: "plain",
+      num: 0,
+      slot: t.slot,
+    });
+    f.edges.push(edge(t.from, id, t, false));
+  });
+
+  return { nodes: f.nodes, edges: f.edges, groups: f.groups, bounds: boundsOf(f.nodes, f.groups) };
+}
+
+function boundsOf(nodes, groups) {
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  for (const n of nodes) {
+    // A tile's label hangs below it and is wider than the tile.
+    const labelled = n.type === "step" || n.type === "trigger";
+    const nx0 = labelled ? n.x - (PITCH - T) / 2 : n.x;
+    const nx1 = labelled ? n.x + n.w + (PITCH - T) / 2 : n.x + n.w;
+    const ny1 = labelled ? n.y + n.h + LABEL_BELOW : n.y + n.h;
+    x0 = Math.min(x0, nx0);
+    y0 = Math.min(y0, n.y - (labelled ? ABOVE_TILE : 0));
+    x1 = Math.max(x1, nx1);
+    y1 = Math.max(y1, ny1);
+  }
+  for (const g of groups) {
+    x0 = Math.min(x0, g.x);
+    y0 = Math.min(y0, g.y);
+    x1 = Math.max(x1, g.x + g.w);
+    y1 = Math.max(y1, g.y + g.h);
+  }
+  if (!Number.isFinite(x0)) return { x: 0, y: 0, w: 0, h: 0 };
+  return { x: x0 - MARGIN, y: y0 - MARGIN, w: x1 - x0 + MARGIN * 2, h: y1 - y0 + MARGIN * 2 };
+}
+
+/* ---- connectors ---------------------------------------------------------- */
+
+/** A connector from one node's right side to another's left side:
+ *  { d, mid, start, end, at(t) }. `mid` is where the + sits. */
+export function curveBetween(a, b) {
+  const x1 = a.x + a.w;
+  const y1 = a.y + a.h / 2;
+  const x2 = b.x;
+  const y2 = b.y + b.h / 2;
+  const start = { x: x1, y: y1 };
+  const end = { x: x2, y: y2 };
+  const mid = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };
+  if (Math.abs(y2 - y1) < 1 || x2 <= x1) {
+    return { d: `M ${x1} ${y1} L ${x2} ${y2}`, mid, start, end, at: (t) => ({ x: x1 + (x2 - x1) * t, y: y1 + (y2 - y1) * t }) };
+  }
+  const dx = Math.max(48, (x2 - x1) * 0.5);
+  const c1 = { x: x1 + dx, y: y1 };
+  const c2 = { x: x2 - dx, y: y2 };
+  const at = (t) => {
+    const u = 1 - t;
+    return {
+      x: u * u * u * x1 + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * x2,
+      y: u * u * u * y1 + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * y2,
+    };
+  };
+  return { d: `M ${x1} ${y1} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${x2} ${y2}`, mid, start, end, at };
+}
+
+/** The nodes by id, for connectors. */
+export function nodeIndex(layout) {
+  return new Map(layout.nodes.map((n) => [n.id, n]));
+}
+
+/** The selectable nodes in reading order (left to right, top to bottom):
+ *  the keyboard's walk through the canvas. */
+export function readingOrder(layout) {
+  return layout.nodes
+    .filter((n) => n.type === "step" || n.type === "trigger" || n.type === "card")
+    .sort((a, b) => a.x - b.x || a.y - b.y);
+}
+
+/** What the end of a path is called, for a screen reader. */
+export function slotWords(slot) {
+  if (slot.list.at === "root") return slot.index === 0 ? "at the start" : "in the main path";
+  if (slot.list.at === "loop") return `inside ${slot.list.step}`;
+  return `in the ${slot.list.at === "then" ? "yes" : "no"} path of ${slot.list.step}`;
+}

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

@@ -0,0 +1,33 @@
+// The AutomationModel block — `makersclaw add automation-model`. The pure
+// part of the automation blocks: the step catalog, the layout, the edits,
+// what a run did, the words. Fixed: the other automation blocks require it.
+export { GLYPH_ICON, GROUP_LABELS, GROUP_ORDER, KINDS, RUNNABLE, TRIGGER_TITLES, humanize, isRunnable, newStep, paletteGroups, stepSub, stepTitle, triggerGlyph, triggerTitle, uniqueStepId } from "./catalog";
+export { Glyph } from "./glyph";
+export { Chip, Dot, PanelSection, RunPicker, SidePanel } from "./parts";
+export { LABEL_W, MARGIN, T, curveBetween, layoutAutomation, nodeIndex, readingOrder, sameSlot, slotWords } from "./graph";
+export {
+  addStep,
+  allStepIds,
+  availableBefore,
+  blankAutomation,
+  canonicalJson,
+  duplicateStep,
+  findStep,
+  innerCount,
+  insertStep,
+  keyFromName,
+  locate,
+  nudgeStep,
+  removeStep,
+  slotAfter,
+  slotAtEnd,
+  stepIdForPath,
+  updateStep,
+} from "./edit";
+export { latestRows, overlayOf, summarizeSteps } from "./overlay";
+export { ACTIVE, agoWords, clockWords, creditsWords, cronWords, deleteWords, durationWords, formatCreditAmount, healthOf, nodeStateWords, originWords, overviewOf, priceMap, reportLines, runLine, runStatusWords, summaryOf, testWords, triggerTypeWords, triggerWords, wouldWords } from "./words";
+export { WEEKDAYS, cronFromParts, parseTime, partsFromCron, timeText } from "./schedule";
+export { textToValue, valueToText } from "./values";
+export { checkAutomation, flaggedSteps, issuesFor, issuesFromProblems, plainWords } from "./check";
+export { STARTING_POINTS, startsFromPlatform } from "./templates";
+export { CONTROL_DONE, CONTROL_REFUSED, RETRY_FROM, agentDraftOf, changeLines, changeLinesBetween, controlsOf, draftOfStep, fixTag, latestVersionOf, newerVersionWords, retryFromOf } from "./fixes";

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

@@ -0,0 +1,175 @@
+// What a run did, read off the canvas's layout.
+//
+// A run is a list of step rows, one per attempt per place a step ran; a
+// step inside a loop has a row for every pass (`loop[3]/step`). The
+// canvas draws a definition, not a run, so this file lines the two up:
+// for every node, how it went; for every connector, whether the run went
+// along it.
+//
+// Pure; no React. The rule that matters: the path taken is lit and the
+// paths not taken are dimmed, so a run reads as one route through the
+// flow.
+//
+// A step row: { path, step_id, kind?, attempt, status, started_at,
+// ended_at, credits, error: { code, words } | null, input?, output?,
+// fix?: { by: agent | member, kind, status?, before?, after?, why?, credits?,
+// effect?: read | write | send, undo? } | null }.
+// status: running | done | failed | skipped | waiting | unknown.
+// A TEST run (a dry run) reads real data and changes nothing: a step that
+// stood in for itself carries `simulated: true` (and `output.would` when the
+// viewer may read data), a step that needs what a simulated step would have
+// made carries `unchecked: true`.
+
+import { wouldWords } from "./words";
+
+const num = (v) => {
+  const n = typeof v === "string" ? Number(v) : (v ?? 0);
+  return Number.isFinite(n) ? n : 0;
+};
+
+/** The strongest state wins: a step that failed on one item failed. */
+const RANK = { failed: 8, unknown: 7, running: 6, waiting: 5, fixed: 4, would: 3, done: 2, skipped: 1, notreached: 0 };
+
+/** The latest attempt of every place a step ran. */
+export function latestRows(rows) {
+  const byPath = new Map();
+  for (const r of rows ?? []) {
+    const prior = byPath.get(r.path);
+    if (!prior || r.attempt > prior.attempt) byPath.set(r.path, r);
+  }
+  return [...byPath.values()];
+}
+
+// A step the AGENT fixed wears the fixed mark; a person's own edit of the
+// run's data is a step that is done, with the edit noted on it. A step that
+// stood in for itself in a test run is "would": it would have run, it did not.
+const stateOf = (row) => {
+  if (row.status === "done" && row.simulated === true) return "would";
+  return row.status === "done" && row.fix && row.fix.by !== "member" ? "fixed" : row.status;
+};
+
+/** Per step id: { stepId, state, passes, credits, words, would, unchecked,
+ *  fix, started_at, ended_at, rows }. `would` is what the step would have
+ *  done, in words, when its state is "would" (else null); `unchecked` is true
+ *  when a pass of it could not be checked in a test run. */
+export function summarizeSteps(rows) {
+  const out = new Map();
+  for (const row of latestRows(rows)) {
+    const state = stateOf(row);
+    const prior = out.get(row.step_id);
+    const words = row.error && typeof row.error.words === "string" ? row.error.words : null;
+    if (!prior) {
+      out.set(row.step_id, {
+        stepId: row.step_id,
+        state,
+        passes: 1,
+        credits: num(row.credits),
+        words: state === "failed" || state === "unknown" ? words : null,
+        would: state === "would" ? wouldWords(row) : null,
+        unchecked: row.unchecked === true,
+        fix: row.fix ?? null,
+        started_at: row.started_at ?? null,
+        ended_at: row.ended_at ?? null,
+        rows: [row],
+      });
+      continue;
+    }
+    prior.passes += 1;
+    prior.credits += num(row.credits);
+    prior.rows.push(row);
+    if (row.unchecked === true) prior.unchecked = true;
+    if (RANK[state] > RANK[prior.state]) {
+      prior.state = state;
+      prior.words = state === "failed" || state === "unknown" ? words : prior.words;
+    }
+    if (state === "would" && prior.state === "would" && !prior.would) prior.would = wouldWords(row);
+    if (row.fix && !prior.fix) prior.fix = row.fix;
+    if (row.started_at && (!prior.started_at || row.started_at < prior.started_at)) prior.started_at = row.started_at;
+    if (row.ended_at && (!prior.ended_at || row.ended_at > prior.ended_at)) prior.ended_at = row.ended_at;
+  }
+  return out;
+}
+
+/** Which way a condition went: its own output when the member may read it,
+ *  else whichever branch the run went into. */
+function branchTaken(cond, summary, layout) {
+  const own = summary.get(cond.id);
+  const out = own?.rows[0]?.output;
+  if (out && (out.taken === "then" || out.taken === "else")) return out.taken;
+  const target = (key) => {
+    const to = layout.edges.find((e) => e.from === cond.id && e.branch === key)?.to;
+    return to ? layout.nodes.find((n) => n.id === to) : undefined;
+  };
+  const isBody = (n) => !!n && (n.type === "step" || n.type === "card" || n.type === "port");
+  const entered = (n) => isBody(n) && (n.type === "port" ? summary.has(n.stepId ?? "") : summary.has(n.id));
+  const [yes, no] = [target("then"), target("else")];
+  if (entered(yes)) return "then";
+  if (entered(no)) return "else";
+  // A branch with nothing in it leaves no trace: if the condition finished
+  // and the other branch was never entered, the run went down the empty one.
+  if (own && (own.state === "done" || own.state === "fixed")) {
+    if (isBody(yes) && !isBody(no)) return "else";
+    if (isBody(no) && !isBody(yes)) return "then";
+  }
+  return null;
+}
+
+/**
+ * overlayOf(layout, rows, runStatus)
+ *   → { summary, nodes, edges, taken }
+ * `nodes` by node id: done | would | running | failed | fixed | waiting | skipped |
+ * unknown | notreached. `edges` by connector id: taken | running | dim.
+ * `taken` by condition id: "then" | "else".
+ */
+export function overlayOf(layout, rows, runStatus) {
+  const summary = summarizeSteps(rows);
+  const nodes = new Map();
+  const edges = new Map();
+  const taken = new Map();
+  const reached = new Set(["trigger"]);
+
+  nodes.set("trigger", (rows ?? []).length || runStatus ? "done" : "notreached");
+  // A loop's box wears its loop's state.
+  for (const g of layout.groups) nodes.set(g.id, summary.get(g.stepId)?.state ?? "notreached");
+  for (const n of layout.nodes) {
+    if (n.type === "step" || n.type === "card") {
+      const s = summary.get(n.id);
+      nodes.set(n.id, s ? s.state : "notreached");
+      if (s) reached.add(n.id);
+    }
+    // A loop's doors: in when it started, out once it came through.
+    if (n.type === "port" && n.stepId) {
+      const s = summary.get(n.stepId);
+      const isOut = n.id.endsWith(":out");
+      if (s && (!isOut || s.state === "done" || s.state === "fixed")) reached.add(n.id);
+    }
+  }
+  for (const n of layout.nodes) {
+    if (n.type === "step" && n.kind === "condition") {
+      const b = branchTaken(n, summary, layout);
+      if (b) taken.set(n.id, b);
+    }
+  }
+
+  const byId = new Map(layout.nodes.map((n) => [n.id, n]));
+  const decide = (e) => {
+    if (!reached.has(e.from)) return "dim";
+    if (e.branch && taken.get(e.from) !== e.branch) return "dim";
+    const to = byId.get(e.to);
+    if (!to || to.type === "end") return "dim";
+    if (to.type === "join") return "taken";
+    if (!reached.has(e.to)) return "dim";
+    return summary.get(e.to)?.state === "running" ? "running" : "taken";
+  };
+  // A join is reached once a connector into it was taken; a few passes
+  // settle the one level of joins a condition makes.
+  for (let round = 0; round < 3; round += 1) {
+    for (const e of layout.edges) {
+      const state = decide(e);
+      edges.set(e.id, state);
+      const to = byId.get(e.to);
+      if (to?.type === "join" && state === "taken") reached.add(to.id);
+    }
+  }
+  return { summary, nodes, edges, taken };
+}