makersclaw 0.8.0 → 0.8.2

package/registry/blocks/flow-editor/flow-canvas.jsx

@@ -0,0 +1,568 @@
+"use client";
+
+// An automation drawn as a real node canvas: pan, zoom, fit, a map, icon
+// cards with ports, curved connectors with arrowheads, a + on every
+// connector and at every path's end, labelled branches that meet again, a
+// dashed box for "for each", grouped steps that fold to one card, and a
+// palette.
+//
+// Built by hand, no graph library: the format is a tree, so the layout is
+// exact (automation-model graph.js). It takes a layout and callbacks and
+// paints with the app's tokens.
+//
+// Two uses, one picture:
+//  - editing (`editable`): + inserts, a card selects, the palette adds;
+//  - a run (`overlay`): each card wears how it went, the path taken is lit
+//    and the rest dimmed; nothing can be changed.
+//
+// Input: drag the ground to pan; the wheel pans, Ctrl/Cmd-wheel and pinch
+// zoom; the arrow keys walk the cards, Esc lets go. Everything the canvas
+// does with a pointer is also reachable by keys and by the outline.
+
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Icon, cx } from "../../ui";
+import { Glyph, KINDS, LABEL_W, T, curveBetween, fixTag, nodeIndex, readingOrder, slotWords, triggerGlyph } from "../automation-model";
+import { StepPicker, PaletteBar } from "../step-picker";
+import { MAP_H, MAP_W, Minimap } from "./minimap";
+
+const MIN_K = 0.2;
+const MAX_K = 1.6;
+const clampK = (k) => Math.min(MAX_K, Math.max(MIN_K, k));
+
+/** One decimal only when there is one: 3 → "3", 2.4 → "2.4". */
+const formatPrice = (n) => String(Math.round(n * 10) / 10);
+
+const STATE_ICON = { done: "check", would: "pencil", running: "loader", failed: "x", fixed: "wand", waiting: "clock", skipped: "minus", unknown: "circle-help" };
+const BADGE = {
+  done: "bg-success",
+  would: "bg-muted-foreground",
+  running: "bg-info",
+  failed: "bg-destructive",
+  fixed: "bg-primary",
+  waiting: "bg-warning",
+  skipped: "bg-muted-foreground",
+  unknown: "bg-muted-foreground",
+};
+// A tile: tone first, then how the run left it (the later wins by order).
+const TONE = {
+  plain: "border-border text-muted-foreground",
+  model: "border-primary/55 text-primary",
+  agent: "border-primary bg-primary/15 text-primary",
+};
+const RUNSTATE = {
+  done: "border-success/60",
+  // The pencil look: it would run, it did not. Dashed, no solid fill.
+  would: "border-dashed border-primary/70 bg-transparent text-primary",
+  running: "border-info ring-4 ring-info/20",
+  failed: "border-destructive",
+  fixed: "border-primary",
+  waiting: "border-warning ring-4 ring-warning/20",
+  skipped: "border-dashed border-muted-foreground/45 bg-transparent text-muted-foreground/60",
+  notreached: "border-dashed border-muted-foreground/45 bg-transparent text-muted-foreground/60",
+  unknown: "border-warning",
+};
+const EDGE = {
+  n: { path: "fill-none stroke-muted-foreground/55", head: "fill-muted-foreground/55", width: 1.6 },
+  t: { path: "fill-none stroke-success", head: "fill-success", width: 2.6 },
+  r: { path: "fill-none stroke-info", head: "fill-info", width: 2.6 },
+  d: { path: "fill-none stroke-muted-foreground/25", head: "fill-muted-foreground/25", width: 1.6 },
+};
+
+/**
+ *   layout            automation-model's layoutAutomation()
+ *   selectedId        a step id, "trigger", or null
+ *   onSelect(id|null)
+ *   editable          the + buttons, the palette and the add button
+ *   onInsert(slot, kind)         a + was pressed and a kind chosen
+ *   onAddAtSelection(kind)       the palette (or the round add) chose a kind
+ *   onToggleCollapse(stepId)     fold or open a for-each
+ *   overlay           a run's overlayOf(): each card and connector, how it went
+ *                     (in a test run a step that stood in for itself is "would":
+ *                     a dashed card with a pencil and one line of what it would do;
+ *                     a step it could not check says "Not checked")
+ *   flagged           a Set of step ids with something to fix (a red mark)
+ *   prices            a Map of step id to { credits, max }: the price tag
+ *   fitKey            changes when the picture should fit again
+ *   revealId          pan so this step is in view (after an insert)
+ *   info              floating, top left, after the zoom controls
+ *   runnable          a Set of kinds the platform runs (the picker says "soon" for the rest)
+ */
+export function FlowCanvas({ layout, selectedId = null, onSelect, editable = false, onInsert, onAddAtSelection, onToggleCollapse, overlay = null, flagged, prices, fitKey, revealId, info, runnable, className }) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const rootRef = useRef(null);
+  const [view, setViewState] = useState({ x: 40, y: 40, k: 1 });
+  const viewRef = useRef(view);
+  const [size, setSize] = useState({ w: 0, h: 0 });
+  const [picker, setPicker] = useState(null);
+  const fitted = useRef(null);
+
+  const setView = useCallback((next) => {
+    const v = typeof next === "function" ? next(viewRef.current) : next;
+    viewRef.current = v;
+    setViewState(v);
+  }, []);
+
+  const index = useMemo(() => nodeIndex(layout), [layout]);
+
+  /* ---- measuring and fitting ---------------------------------------- */
+
+  const fit = useCallback(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const w = el.clientWidth;
+    const h = el.clientHeight;
+    const b = layout.bounds;
+    if (!w || !h || b.w <= 0) return;
+    const k = clampK(Math.min(w / b.w, h / b.h, 1));
+    setView({ k, x: (w - b.w * k) / 2 - b.x * k, y: (h - b.h * k) / 2 - b.y * k });
+  }, [layout.bounds, setView]);
+
+  useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return undefined;
+    const measure = () => setSize({ w: el.clientWidth, h: el.clientHeight });
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    // Measure in the callback, act in the next frame: setting state that
+    // changes what is watched, inside its own delivery, is the browser's
+    // "ResizeObserver loop" notice (check rule 17).
+    let raf = 0;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(measure);
+    });
+    ro.observe(el);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, []);
+
+  // Fit once per fitKey, as soon as there is a size to fit into.
+  useEffect(() => {
+    const key = fitKey ?? "";
+    if (fitted.current === key || !size.w || !size.h) return;
+    fitted.current = key;
+    fit();
+  }, [fitKey, size.w, size.h, fit]);
+
+  // Bring a new step into view without moving the picture if it is already seen.
+  useEffect(() => {
+    if (!revealId || !size.w) return;
+    const n = index.get(revealId);
+    if (!n) return;
+    const v = viewRef.current;
+    const sx = n.x * v.k + v.x;
+    const sy = n.y * v.k + v.y;
+    const pad = 80;
+    const inside = sx > pad && sy > pad && sx + n.w * v.k < size.w - pad && sy + n.h * v.k < size.h - pad;
+    if (!inside) setView({ k: v.k, x: size.w / 2 - (n.x + n.w / 2) * v.k, y: size.h / 2 - (n.y + n.h / 2) * v.k });
+  }, [revealId, index, size.w, size.h, setView]);
+
+  /* ---- zoom and pan -------------------------------------------------- */
+
+  const zoomAt = useCallback(
+    (factor, cx0, cy0) => {
+      setView((v) => {
+        const k = clampK(v.k * factor);
+        const r = k / v.k;
+        return { k, x: cx0 - (cx0 - v.x) * r, y: cy0 - (cy0 - v.y) * r };
+      });
+    },
+    [setView],
+  );
+  const zoomCentre = (factor) => zoomAt(factor, size.w / 2, size.h / 2);
+
+  // The wheel needs a non-passive listener to keep the page from zooming.
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return undefined;
+    const onWheel = (e) => {
+      if (e.target.closest?.("[data-scroll]")) return;
+      e.preventDefault();
+      const r = el.getBoundingClientRect();
+      if (e.ctrlKey || e.metaKey) zoomAt(Math.exp(-e.deltaY * 0.01), e.clientX - r.left, e.clientY - r.top);
+      else setView((v) => ({ ...v, x: v.x - e.deltaX, y: v.y - e.deltaY }));
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [zoomAt, setView]);
+
+  const pointers = useRef(new Map());
+  const drag = useRef(null);
+  const pinch = useRef(null);
+
+  const onPointerDown = (e) => {
+    if (e.target.closest?.("button, input, select, textarea, [data-nopan]")) return;
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    if (pointers.current.size === 1) drag.current = { x: e.clientX, y: e.clientY, moved: false };
+    else {
+      drag.current = null;
+      const [a, b] = [...pointers.current.values()];
+      pinch.current = Math.hypot(a.x - b.x, a.y - b.y);
+    }
+  };
+  const onPointerMove = (e) => {
+    if (!pointers.current.has(e.pointerId)) return;
+    const prev = pointers.current.get(e.pointerId);
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointers.current.size === 2 && pinch.current) {
+      const [a, b] = [...pointers.current.values()];
+      const dist = Math.hypot(a.x - b.x, a.y - b.y);
+      const r = rootRef.current?.getBoundingClientRect();
+      if (r && dist > 0) zoomAt(dist / pinch.current, (a.x + b.x) / 2 - r.left, (a.y + b.y) / 2 - r.top);
+      pinch.current = dist;
+      return;
+    }
+    const d = drag.current;
+    if (!d) return;
+    if (!d.moved && Math.hypot(e.clientX - d.x, e.clientY - d.y) < 4) return;
+    d.moved = true;
+    setView((v) => ({ ...v, x: v.x + (e.clientX - prev.x), y: v.y + (e.clientY - prev.y) }));
+  };
+  const onPointerUp = (e) => {
+    pointers.current.delete(e.pointerId);
+    pinch.current = null;
+    const d = drag.current;
+    drag.current = null;
+    // A press on the ground that went nowhere lets go of the selection.
+    if (d && !d.moved) {
+      onSelect?.(null);
+      setPicker(null);
+    }
+  };
+
+  const onKeyDown = (e) => {
+    if (e.target.closest?.("input, textarea, select")) return;
+    if (e.key === "Escape") {
+      if (picker) setPicker(null);
+      else onSelect?.(null);
+    } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      const order = readingOrder(layout);
+      if (!order.length) return;
+      const at = order.findIndex((n) => (n.stepId ?? n.id) === selectedId || n.id === selectedId);
+      const next = order[Math.min(order.length - 1, Math.max(0, at + (e.key === "ArrowRight" ? 1 : -1)))];
+      if (next) onSelect?.(next.stepId ?? next.id);
+      e.preventDefault();
+    } else if (e.key === "+" || e.key === "=") zoomCentre(1.2);
+    else if (e.key === "-") zoomCentre(1 / 1.2);
+    else if (e.key === "0") fit();
+  };
+
+  /* ---- the picker ---------------------------------------------------- */
+
+  const openPicker = (slot, at) => {
+    const r = rootRef.current?.getBoundingClientRect();
+    const PW = 330;
+    const PH = 400;
+    const left = Math.max(8, Math.min(at.x - (r?.left ?? 0) - PW / 2, (r?.width ?? 800) - PW - 8));
+    const below = at.y - (r?.top ?? 0) + 16;
+    const top = Math.max(8, Math.min(below, (r?.height ?? 600) - PH - 8));
+    setPicker({ slot, left, top });
+  };
+
+  const pickedKind = (kind) => {
+    const p = picker;
+    setPicker(null);
+    if (!p) return;
+    if (p.slot) onInsert?.(p.slot, kind);
+    else onAddAtSelection?.(kind);
+  };
+
+  /* ---- drawing ------------------------------------------------------- */
+
+  const edges = layout.edges.map((e) => {
+    const a = index.get(e.from);
+    const b = index.get(e.to);
+    return a && b ? { e, curve: curveBetween(a, b) } : null;
+  });
+
+  const edgeKind = (id) => {
+    if (!overlay) return "n";
+    const s = overlay.edges.get(id) ?? "dim";
+    return s === "taken" ? "t" : s === "running" ? "r" : "d";
+  };
+  const stateOf = (n) => (overlay ? (overlay.nodes.get(n.id) ?? "notreached") : null);
+
+  const small = view.k < 0.45;
+  const showMap = size.w > MAP_W * 2 && size.h > MAP_H * 2.4;
+  const showPalette = editable && onAddAtSelection && size.w >= 560;
+  const dot = 24 * view.k;
+
+  return (
+    <div
+      ref={rootRef}
+      role="group"
+      aria-label="Automation canvas"
+      tabIndex={0}
+      onKeyDown={onKeyDown}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      className={cx("relative isolate min-h-[320px] flex-1 cursor-grab touch-none select-none overflow-hidden bg-background outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring active:cursor-grabbing", className)}
+    >
+      {/* The dotted ground travels with the picture. */}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 opacity-30"
+        style={{
+          backgroundImage: "radial-gradient(circle, var(--color-muted-foreground) 1px, transparent 1.4px)",
+          backgroundSize: `${dot}px ${dot}px`,
+          backgroundPosition: `${view.x}px ${view.y}px`,
+        }}
+      />
+      <div className="absolute left-0 top-0 origin-top-left will-change-transform" style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})` }}>
+        <svg className="pointer-events-none absolute left-0 top-0 overflow-visible" width="1" height="1" aria-hidden="true">
+          <defs>
+            {["n", "t", "r", "d"].map((k) => (
+              <marker key={k} id={`arr-${uid}-${k}`} viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
+                <path d="M 1 1 L 9 5 L 1 9 z" className={EDGE[k].head} />
+              </marker>
+            ))}
+          </defs>
+          {edges.map((x) => {
+            if (!x) return null;
+            const k = edgeKind(x.e.id);
+            const toEnd = index.get(x.e.to)?.type === "end";
+            return <path key={x.e.id} d={x.curve.d} className={EDGE[k].path} strokeWidth={EDGE[k].width} strokeDasharray={k === "d" ? "6 6" : toEnd ? "5 5" : undefined} markerEnd={`url(#arr-${uid}-${k})`} />;
+          })}
+        </svg>
+
+        {layout.groups.map((g) => {
+          const state = overlay ? (overlay.nodes.get(g.id) ?? "notreached") : null;
+          const sel = selectedId === g.stepId;
+          return (
+            <div
+              key={g.id}
+              style={{ left: g.x, top: g.y, width: g.w, height: g.h }}
+              className={cx(
+                "pointer-events-none absolute rounded-[20px] border-[1.5px] border-dashed bg-muted/55",
+                sel ? "border-solid border-foreground" : "border-muted-foreground/45",
+                (state === "done" || state === "fixed") && "border-success/70",
+                state === "would" && "border-primary/60",
+                state === "running" && "border-info",
+                state === "failed" && "border-destructive",
+                state === "notreached" && "opacity-50",
+              )}
+            >
+              <div data-nopan className="pointer-events-auto absolute -top-3.5 left-4 flex h-7 max-w-[calc(100%_-_2rem)] items-center gap-0.5 rounded-full border-[1.5px] border-dashed border-muted-foreground/45 bg-background">
+                <button type="button" aria-pressed={sel} onClick={() => onSelect?.(g.stepId)} className="inline-flex h-full min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap pl-3 pr-1 text-[13px] font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                  <Glyph name="loop" size={14} />
+                  <span className="truncate">{g.title}</span>
+                  <span className="truncate font-medium text-muted-foreground">{g.sub}</span>
+                </button>
+                {onToggleCollapse ? (
+                  <button type="button" aria-label={`Fold ${g.title}`} onClick={() => onToggleCollapse(g.stepId)} className="mr-0.5 inline-flex size-6 items-center justify-center rounded-full text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                    <Icon name="chevron-down" size={14} />
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          );
+        })}
+
+        {layout.nodes.map((n) => {
+          const state = stateOf(n);
+          if (n.type === "join") return <i key={n.id} style={{ left: n.x, top: n.y, width: n.w, height: n.h }} className="absolute rounded-full border-2 border-background bg-muted-foreground/70" />;
+          if (n.type === "port") {
+            return (
+              <i
+                key={n.id}
+                style={{ left: n.x, top: n.y, width: n.w, height: n.h }}
+                className={cx("absolute rounded border-2 border-background", state === "done" || state === "fixed" ? "bg-success" : state === "would" ? "bg-primary/60" : "bg-muted-foreground/70")}
+              />
+            );
+          }
+          if (n.type === "end") {
+            if (!editable || !n.slot) return <i key={n.id} style={{ left: n.x + n.w / 2 - 4, top: n.y + n.h / 2 - 4 }} className="absolute size-2 rounded-full bg-muted-foreground/50" />;
+            const slot = n.slot;
+            return (
+              <button
+                key={n.id}
+                type="button"
+                data-nopan
+                style={{ left: n.x, top: n.y, width: n.w, height: n.h }}
+                aria-label={`${n.title} ${slotWords(slot)}`}
+                title={n.title}
+                onClick={(ev) => openPicker(slot, { x: ev.clientX, y: ev.clientY })}
+                className="absolute flex items-center justify-center rounded-full border-[1.5px] border-dashed border-muted-foreground/70 bg-background text-muted-foreground hover:border-solid hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <Icon name="plus" size={14} />
+                {n.title === "Add the first step" ? <span className="absolute left-[38px] top-[5px] whitespace-nowrap text-[12.5px] text-muted-foreground">Add the first step</span> : null}
+              </button>
+            );
+          }
+          if (n.type === "card") {
+            const sel = selectedId === n.id;
+            return (
+              <div
+                key={n.id}
+                style={{ left: n.x, top: n.y, width: n.w, height: n.h }}
+                className={cx(
+                  "absolute rounded-2xl border bg-card p-3 text-card-foreground",
+                  sel && "outline outline-2 outline-offset-[3px] outline-foreground",
+                  state === "done" ? "border-success/60" : state === "would" ? "border-dashed border-primary/70" : state === "failed" ? "border-destructive" : state === "notreached" ? "border-dashed border-border opacity-60" : "border-border",
+                )}
+              >
+                <i className="pointer-events-none absolute -left-1 top-[calc(50%_-_8px)] h-4 w-[7px] rounded-sm bg-border" />
+                <i className="pointer-events-none absolute -right-1.5 top-[calc(50%_-_5px)] size-[11px] rounded-full border-2 border-background bg-muted-foreground/70" />
+                <div data-nopan className="flex items-center justify-between gap-2">
+                  <button type="button" aria-pressed={sel} onClick={() => onSelect?.(n.id)} className="inline-flex min-w-0 items-center gap-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                    <Glyph name="loop" size={16} />
+                    <b className="truncate">{n.title}</b>
+                  </button>
+                  <button type="button" onClick={() => onToggleCollapse?.(n.id)} className="inline-flex items-center gap-0.5 whitespace-nowrap text-xs text-muted-foreground underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                    <Icon name="chevron-right" size={14} /> Show steps
+                  </button>
+                </div>
+                <p className="m-0 mb-2 mt-0.5 text-xs text-muted-foreground">{n.sub}</p>
+                <ol className="m-0 flex list-none flex-col gap-1.5 p-0">
+                  {(n.items ?? []).map((it) => (
+                    <li key={it.id} className="rounded-lg border border-border bg-background px-2.5 py-1 text-[12.5px]">
+                      {it.title}
+                    </li>
+                  ))}
+                  {(n.items ?? []).length === 0 ? <li className="rounded-lg border border-border bg-background px-2.5 py-1 text-[12.5px] text-muted-foreground">No steps yet</li> : null}
+                </ol>
+              </div>
+            );
+          }
+          // A step or the trigger: an icon tile with its words below.
+          const glyph = n.type === "trigger" ? triggerGlyph(n.triggerType) : (KINDS[n.kind]?.glyph ?? "action");
+          const selected = selectedId === (n.stepId ?? n.id);
+          const badgeIcon = state ? STATE_ICON[state] : undefined;
+          const bad = n.stepId ? flagged?.has(n.stepId) : false;
+          const sum = overlay && n.stepId ? overlay.summary.get(n.stepId) : null;
+          const price = !overlay && n.stepId ? prices?.get(n.stepId) : null;
+          return (
+            <div key={n.id} style={{ left: n.x, top: n.y, width: T, height: T }} className={cx("absolute", state === "notreached" || state === "skipped" ? "opacity-55" : undefined)}>
+              {n.type !== "trigger" ? <i className="pointer-events-none absolute -left-1 top-[calc(50%_-_8px)] h-4 w-[7px] rounded-sm bg-border" /> : null}
+              {n.kind !== "stop" ? <i className="pointer-events-none absolute -right-1.5 top-[calc(50%_-_5px)] z-[1] size-[11px] rounded-full border-2 border-background bg-muted-foreground/70" /> : null}
+              <button
+                type="button"
+                data-nopan
+                aria-pressed={selected}
+                aria-label={`${n.title}${state ? `. ${state === "would" ? "would run" : state}` : ""}`}
+                onClick={() => onSelect?.(n.stepId ?? n.id)}
+                className={cx(
+                  "relative flex size-full cursor-pointer items-center justify-center rounded-xl border bg-card transition-colors hover:border-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  n.type === "trigger" && "rounded-l-[36px]",
+                  TONE[n.tone] ?? TONE.plain,
+                  state ? RUNSTATE[state] : null,
+                  bad && "border-destructive",
+                  selected && "outline outline-2 outline-offset-[3px] outline-foreground",
+                )}
+              >
+                <Glyph name={glyph} size={26} />
+                {n.mark ? (
+                  <span className={cx("absolute -bottom-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full border px-1.5 py-0.5 text-2xs font-semibold leading-none", n.tone === "agent" ? "border-transparent bg-primary text-primary-foreground" : "border-primary/55 bg-background text-primary")}>{n.mark}</span>
+                ) : null}
+              </button>
+              {n.num > 0 ? <span className="pointer-events-none absolute -left-1 -top-2.5 rounded bg-background px-1 font-mono text-2xs leading-[15px] text-muted-foreground">{n.num}</span> : null}
+              {badgeIcon && state ? (
+                <span aria-hidden="true" className={cx("pointer-events-none absolute -right-2 -top-2 z-[2] flex size-5 items-center justify-center rounded-full border-2 border-background text-background", BADGE[state])}>
+                  <Icon name={badgeIcon} size={11} className={state === "running" ? "animate-spin motion-reduce:animate-none" : undefined} />
+                </span>
+              ) : null}
+              {bad && !badgeIcon ? (
+                <span aria-label="Needs a look" className="pointer-events-none absolute -right-2 -top-2 z-[2] flex size-5 items-center justify-center rounded-full border-2 border-background bg-destructive text-xs font-extrabold text-background">
+                  !
+                </span>
+              ) : null}
+              <div className="pointer-events-none absolute flex flex-col gap-[3px] text-center" style={{ top: T + 12, left: (T - LABEL_W) / 2, width: LABEL_W }}>
+                <b className="break-words text-[13px] font-semibold leading-tight text-foreground [overflow-wrap:anywhere]">{n.title}</b>
+                {n.sub ? <span className="text-xs leading-snug text-muted-foreground [overflow-wrap:anywhere]">{n.sub}</span> : null}
+                {price ? <span className="self-center rounded-full border border-border px-2 font-mono text-2xs text-muted-foreground">about {formatPrice(price.credits)} cr</span> : null}
+                {sum && sum.passes > 1 ? <span className="font-mono text-xs text-muted-foreground">{sum.passes} times</span> : null}
+                {sum?.fix ? <span className="text-xs text-primary">{fixTag(sum.fix)}</span> : null}
+                {sum && state === "failed" && sum.words ? <span className="text-xs text-destructive">{sum.words}</span> : null}
+                {sum?.unchecked ? <span className="text-xs text-muted-foreground">Not checked</span> : sum && state === "would" && sum.would ? <span className="text-xs text-primary">{sum.would}</span> : null}
+              </div>
+            </div>
+          );
+        })}
+
+        {edges.map((x) => {
+          if (!x) return null;
+          const { e, curve } = x;
+          const state = overlay?.edges.get(e.id);
+          const dim = overlay && state === "dim";
+          const lab = e.label ? curve.at(0.24) : null;
+          return (
+            <span key={`m:${e.id}`}>
+              {lab ? (
+                <span
+                  style={{ left: lab.x, top: lab.y }}
+                  className={cx(
+                    "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border bg-background px-2.5 py-px text-xs font-semibold",
+                    state === "taken" || state === "running" ? "border-success text-success" : "border-border text-muted-foreground",
+                    dim && "opacity-50",
+                  )}
+                >
+                  {e.label}
+                </span>
+              ) : null}
+              {editable && e.plus && e.slot ? (
+                <button
+                  type="button"
+                  data-nopan
+                  style={{ left: curve.mid.x, top: curve.mid.y }}
+                  aria-label={`Add a step ${slotWords(e.slot)}`}
+                  title="Add a step"
+                  onClick={(ev) => openPicker(e.slot, { x: ev.clientX, y: ev.clientY })}
+                  className="absolute flex size-[22px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground hover:bg-foreground hover:text-background focus-visible:bg-foreground focus-visible:text-background focus-visible:outline-none"
+                >
+                  <Icon name="plus" size={12} />
+                </button>
+              ) : null}
+            </span>
+          );
+        })}
+      </div>
+
+      <div data-nopan className="pointer-events-none absolute left-3 top-3 z-[6] flex flex-wrap items-center gap-2 pr-16 [&>*]:pointer-events-auto">
+        <div role="group" aria-label="Zoom" className="flex items-center gap-px rounded-lg border border-border bg-card p-0.5">
+          <button type="button" aria-label="Zoom out" onClick={() => zoomCentre(1 / 1.25)} className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <Icon name="minus" size={15} />
+          </button>
+          <span aria-live="polite" className="min-w-[46px] text-center font-mono text-xs text-card-foreground">
+            {Math.round(view.k * 100)}%
+          </span>
+          <button type="button" aria-label="Zoom in" onClick={() => zoomCentre(1.25)} className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <Icon name="plus" size={15} />
+          </button>
+          <i className="mx-0.5 h-4 w-px bg-border" />
+          <button type="button" aria-label="Fit to the screen" title="Fit" onClick={fit} className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <Icon name="maximize" size={15} />
+          </button>
+        </div>
+        {info}
+      </div>
+
+      {editable && onAddAtSelection && !showPalette ? (
+        <button
+          type="button"
+          data-nopan
+          aria-label="Add a step"
+          title="Add a step"
+          onClick={(ev) => openPicker(null, { x: ev.clientX, y: ev.clientY })}
+          className="absolute right-3.5 top-3 z-[6] flex size-[38px] items-center justify-center rounded-full bg-foreground text-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Icon name="plus" size={18} />
+        </button>
+      ) : null}
+
+      {showPalette ? (
+        <div data-nopan className="absolute bottom-3 left-3 z-[6] overflow-x-auto" style={{ maxWidth: showMap ? `calc(100% - ${MAP_W + 36}px)` : "calc(100% - 24px)" }}>
+          <PaletteBar onAdd={onAddAtSelection} />
+        </div>
+      ) : null}
+
+      {showMap ? <Minimap layout={layout} view={view} size={size} overlay={overlay} onCenter={(wx, wy) => setView((v) => ({ ...v, x: size.w / 2 - wx * v.k, y: size.h / 2 - wy * v.k }))} /> : null}
+
+      {picker ? <StepPicker style={{ left: picker.left, top: picker.top }} runnable={runnable} onClose={() => setPicker(null)} onPick={pickedKind} /> : null}
+    </div>
+  );
+}