makersclaw 0.8.0 → 0.8.1

package/registry/blocks/automation-editor/automation-editor.jsx

@@ -0,0 +1,656 @@
+"use client";
+
+// The builder: one automation on the canvas, with its header, its side
+// panel and its outline view. Everything an app's Automations page needs
+// to let a member open, edit, test and switch on an automation.
+//
+// It holds the working copy of the definition (an undo stack of pure
+// edits from automation-model) and says what is wrong with it (the quick
+// check); it knows nothing of the network. The screen around it saves,
+// keeps, switches live and runs, and hands the answers back as callbacks
+// that resolve the platform's answer: `{ ok: true }` or `{ ok: false,
+// error, problems? }` (what useAutomation's save, keep, setLive and test
+// resolve), or throw an Error with a message.
+//
+// The model of saving ("done is evidence"):
+//   Save    a draft version; the live one keeps running as it was
+//   Test    a DRY run of the draft (or live) version: it reads real data and
+//           changes nothing (nothing is sent, nothing is written)
+//   Keep    the draft becomes the version that runs
+//   Live    the switch: it fires on its trigger, or it does not
+// A draft never goes live by itself. Keep and Live need a passed test of that
+// version (the platform refuses with `needs_test` otherwise), unless the
+// member deliberately skips it: the second, inline-confirmed press calls
+// onKeep({ skipTest: true }) / onLive(on, { skipTest: true }). Never silently,
+// and never by an agent.
+//
+// The draft is shared with the agent: it may save a newer version while a
+// member has edits that are not saved. So the editor remembers the version
+// its working copy began on (`baseVersion`) and sends THAT with every save,
+// never "the newest I can see": the platform answers `changed` when the draft
+// moved, and the editor says so in a strip (Look at the new one, or Keep
+// mine and save on top of it on purpose). A save never buries a newer
+// version by accident.
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Confirm, Menu, Switch, cx } from "../../ui";
+import {
+  Chip,
+  RunPicker,
+  addStep,
+  agentDraftOf,
+  availableBefore,
+  canonicalJson,
+  changeLinesBetween,
+  checkAutomation,
+  creditsWords,
+  deleteWords,
+  duplicateStep,
+  findStep,
+  flaggedSteps,
+  issuesFor,
+  latestVersionOf,
+  newerVersionWords,
+  priceMap,
+  removeStep,
+  slotAfter,
+  slotAtEnd,
+  stepTitle,
+  updateStep,
+} from "../automation-model";
+import { FixProposal } from "../fix-note";
+import { FlowEditor } from "../flow-editor";
+import { FlowSettings, StepSettings } from "../step-settings";
+import { TriggerPicker } from "../trigger-picker";
+import { RunInputs } from "./run-inputs";
+
+const MAX_UNDO = 60;
+
+/** The version a successful save made: `{ ok, version }`, or the hook's `{ ok, data: { version } }`. */
+function versionOf(r) {
+  const n = r?.version ?? r?.data?.version;
+  return Number.isInteger(n) ? n : null;
+}
+
+/** Words for a refusal the platform sent, or a thrown error. `latest` is the
+ *  newest version the platform has, when it said (a `changed` refusal does). */
+function said(r, fallback) {
+  if (r && r.ok === false) return { text: r.error || fallback, lines: Array.isArray(r.problems) ? r.problems : [], code: typeof r.code === "string" ? r.code : null, latest: Number.isInteger(r.latest) ? r.latest : null };
+  return null;
+}
+
+/** The test chip for the version being looked at: the draft if there is one,
+ *  else the live one. Null when the app gave none, or the version is the app's
+ *  own shipped one (it needs no test). */
+function testChip(tests) {
+  if (!tests) return null;
+  const v = tests.draft ?? tests.live ?? null;
+  if (!v || v.exempt) return null;
+  if (v.passed) {
+    const n = Number(v.last?.would ?? 0);
+    return { tone: "green", text: n > 0 ? `Tested · ${n} ${n === 1 ? "step" : "steps"} would run` : "Tested" };
+  }
+  const last = v.last?.status;
+  if (last && last !== "done") return { tone: "red", text: "Last test failed" };
+  return { tone: "amber", text: "Not tested" };
+}
+
+/**
+ *   automationId  the saved automation's id, or null for one not saved yet
+ *   status        draft | on | off | needs_owner | "new"
+ *   liveVersion, draftVersion   the numbers, or null
+ *   baseline      the definition as last saved (or the starting point)
+ *   versions      [{ version, kind, note, created_at }]
+ *   runs          [{ id, status, created_at, is_test, credits }], newest first
+ *   apps          [{ id, name }], for an action in a team automation
+ *   actions       the app's declared actions, [{ name, description? }]
+ *   ownedByApp    the automation belongs to an app
+ *   estimate      what a run is expected to cost (GET automation's estimate)
+ *   samples       { [stepId]: a real output }, for the data picker
+ *   runnable      a Set of the kinds the platform runs
+ *   backLabel, onBack
+ *   onSave(def, { baseVersion }), onKeep(opts?), onLive(on, opts?), onTest(inputs), onOpenRun(runId)
+ *                 `baseVersion` is the version the working copy began on: send it to the platform as
+ *                 `expect_version`, never the newest one you can see. A save the platform refuses with
+ *                 the code "changed" (and `latest`, if it says) draws the conflict strip. A save that
+ *                 works may resolve `{ ok: true, version }` (or the hook's `{ ok: true, data: { version } }`): the editor then begins from that version.
+ *                 opts is `{ skipTest: true }` ONLY after the member pressed "Go live without a
+ *                 test" and then confirmed "Skip the test" in the note. Resolve like the others;
+ *                 a refusal keeps its `code` ("needs_test" shows the note with its two buttons).
+ *   tests         { live: TestView|null, draft: TestView|null } (useAutomation().tests), TestView =
+ *                 { version, passed, exempt, last: { run_id, status, ended_at, credits, would } | null };
+ *                 draws the test chip (Not tested · Tested · 3 steps would run · Last test failed).
+ *                 Without it, or for the app's own shipped version, no chip.
+ *   onReset       "Reset to the app's version", when it was edited from a shipped one
+ *   tabs          the Flow / Runs tabs, drawn in the header
+ *   suggestions   the changes the agent drafted from failed runs, waiting for a person
+ *                 [{ id, why, stale, patch }] (useAutomation().suggestions)
+ *   onKeepSuggestion(id), onDropSuggestion(id)   keep (a new version that runs) or drop one;
+ *                 resolve the platform's answer. Without them the strip is not drawn.
+ *   triggers      what can start it (useAutomations().triggers, the list door's
+ *                 `triggers`): the picker offers events, an app's actions, records,
+ *                 a web address and another automation. Without it: by hand and a schedule.
+ *   selfKey       this automation's key (it cannot follow itself)
+ *   hook          a webhook trigger's address once saved (useAutomation().hook)
+ *   onRotateHook  makes (or replaces) the webhook's secret; resolves { ok, hook: { secret } }
+ *   compareTo     { version, definition }: what "What changed" compares the agent's draft with
+ *                 (the version the member kept, usually the live one). Without it, no What changed.
+ *   onDelete(automation)  async: "Delete automation", in a menu at the end of the header (never beside Save),
+ *                 after a question that says what it does: Deletes "<name>". Its runs stay in history.
+ *                 (and, for a live one, that it is switched off). `automation` is `{ id, name, status }`.
+ *                 Resolves `{ ok: true }` (the screen leaves the editor and says what followed) or
+ *                 `{ ok: false, error, code? }`: the words are shown as they are. Only for a saved
+ *                 automation the member may edit; without it, no menu
+ *   canDelete     offer it at all (default true; hide it where the member may not)
+ *   source        the automation's source (member · agent · package · legacy). An app's own job and what an
+ *                 app shipped are not deleted from here: the item is disabled and points at the app's settings
+ *   onFocus       `{ selected, unsaved, baseVersion }` whenever any of the three changes: the step
+ *                 pressed (a step id, "trigger", "flow" or null), whether the working copy has edits
+ *                 that are not saved, and the version it began on. For a pane beside the editor
+ *                 (an agent) that needs to know what the member is looking at; it never re-renders it.
+ *   canEdit       false: read-only (default true)
+ */
+export function AutomationEditor({
+  automationId = null,
+  status = "new",
+  liveVersion = null,
+  draftVersion = null,
+  baseline,
+  versions = [],
+  runs = [],
+  apps = [],
+  actions,
+  ownedByApp = false,
+  estimate = null,
+  samples = null,
+  runnable,
+  backLabel = "Automations",
+  onBack,
+  onSave,
+  onKeep,
+  onLive,
+  onTest,
+  tests = null,
+  onOpenRun,
+  onReset,
+  tabs,
+  suggestions = [],
+  onKeepSuggestion,
+  onDropSuggestion,
+  triggers = null,
+  selfKey = null,
+  hook = null,
+  onRotateHook,
+  compareTo = null,
+  onFocus,
+  onDelete,
+  canDelete = true,
+  source = null,
+  canEdit = true,
+  className,
+}) {
+  const [hist, setHist] = useState({ past: [], present: baseline, future: [] });
+  const def = hist.present;
+  // The version this was opened on moved (a suggestion was kept, another tab
+  // saved): if nothing here was changed since, open the new one.
+  const [seen, setSeen] = useState(baseline);
+  if (canonicalJson(seen) !== canonicalJson(baseline)) {
+    setSeen(baseline);
+    if (canonicalJson(hist.present) === canonicalJson(seen)) setHist({ past: [], present: baseline, future: [] });
+  }
+  // The version the working copy began on (`baseVersion`). It moves to the
+  // newest only while the copy is in step with the saved one: a copy with
+  // edits keeps the version it was made from, so a newer version (the agent's)
+  // is seen as newer, and a save names the base, not the newest.
+  const latest = useMemo(() => latestVersionOf({ versions, draftVersion, liveVersion }), [versions, draftVersion, liveVersion]);
+  const [begun, setBegun] = useState(latest);
+  // What the member decided about a newer version: a conflict the platform
+  // reported ({ latest }), the newest version they chose to keep theirs over,
+  // and what "Look at" replaced (so Undo can bring the edits, and their base, back).
+  const [conflict, setConflict] = useState(null);
+  const [keptOver, setKeptOver] = useState(null);
+  const looked = useRef(null);
+  const [showChanges, setShowChanges] = useState(false);
+  if (canonicalJson(def) === canonicalJson(baseline)) {
+    if (begun !== latest) setBegun(latest);
+    if (conflict) setConflict(null);
+  }
+  const [selected, setSelected] = useState(null);
+  const [reveal, setReveal] = useState(null);
+  const [busy, setBusy] = useState(null);
+  const [note, setNote] = useState(null);
+  const [asking, setAsking] = useState(false);
+  const [skipAsk, setSkipAsk] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const commit = useCallback((next, keepSelection = true) => {
+    setHist((h) => (canonicalJson(h.present) === canonicalJson(next) ? h : { past: [...h.past, h.present].slice(-MAX_UNDO), present: next, future: [] }));
+    if (!keepSelection) setSelected(null);
+    setNote(null);
+  }, []);
+  const undo = () => {
+    if (hist.past.length === 0) return;
+    const back = hist.past[hist.past.length - 1];
+    setHist((h) => (h.past.length ? { past: h.past.slice(0, -1), present: h.past[h.past.length - 1], future: [h.present, ...h.future] } : h));
+    // Undoing "Look at" gives back the member's edits and the version they were made on.
+    const was = looked.current;
+    if (was && canonicalJson(back) === was.def) {
+      looked.current = null;
+      setBegun(was.begun);
+      setKeptOver(null);
+    }
+  };
+  const redo = () => setHist((h) => (h.future.length ? { past: [...h.past, h.present], present: h.future[0], future: h.future.slice(1) } : h));
+
+  const isNew = automationId === null;
+  // Something not saved yet is always a change to save.
+  const edited = useMemo(() => canonicalJson(def) !== canonicalJson(baseline), [def, baseline]);
+  const dirty = isNew || edited;
+  const issues = useMemo(() => checkAutomation(def, runnable ? { runnable } : undefined), [def, runnable]);
+  const flagged = useMemo(() => flaggedSteps(issues), [issues]);
+  const prices = useMemo(() => priceMap(estimate), [estimate]);
+  const hasLive = liveVersion !== null && liveVersion !== undefined;
+  const canKeep = !isNew && !dirty && draftVersion !== null && draftVersion !== undefined && draftVersion !== liveVersion;
+  const live = status === "on";
+
+  // Tell a pane beside the editor what the member is on: never re-renders the editor.
+  const focusRef = useRef(onFocus);
+  useEffect(() => {
+    focusRef.current = onFocus;
+  });
+  useEffect(() => {
+    focusRef.current?.({ selected, unsaved: edited, baseVersion: begun });
+  }, [selected, edited, begun]);
+
+  // A newer version arrived while the working copy has edits made on an older one.
+  const newerThanMine = !isNew && edited && begun !== null && latest !== null && latest > begun;
+  const sawNewer = conflict ? Math.max(latest ?? 0, conflict.latest ?? 0) : latest;
+  const strip = !isNew && edited && (conflict ? "conflict" : newerThanMine && keptOver !== latest ? "behind" : null);
+  const agentDraft = useMemo(() => (isNew ? null : agentDraftOf({ versions, draftVersion, liveVersion })), [isNew, versions, draftVersion, liveVersion]);
+  const changeLines = useMemo(() => (showChanges && compareTo?.definition ? changeLinesBetween(compareTo.definition, baseline) : []), [showChanges, compareTo, baseline]);
+
+  const inputsAsked = useMemo(() => Object.entries(def.inputs ?? {}).map(([name, spec]) => ({ name, label: spec.label })), [def.inputs]);
+
+  /* ---- editing ------------------------------------------------------- */
+
+  const insert = (slot, kind) => {
+    const r = addStep(def, slot, kind);
+    commit(r.def);
+    setSelected(r.id);
+    setReveal(r.id);
+  };
+  const addAtSelection = (kind) => {
+    const slot = (selected && selected !== "trigger" && selected !== "flow" ? slotAfter(def, selected) : null) ?? slotAtEnd(def);
+    insert(slot, kind);
+  };
+  const selectedStep = selected && selected !== "trigger" && selected !== "flow" ? findStep(def.steps, selected) : null;
+
+  /* ---- the server ---------------------------------------------------- */
+
+  // `again` says how to ask a second time, deliberately without the test, when
+  // the platform answers needs_test: { kind: "keep" } or { kind: "live", on }.
+  const run = async (kind, work, ok, again = null) => {
+    setBusy(kind);
+    setNote(null);
+    setSkipAsk(false);
+    try {
+      const r = await work();
+      const bad = said(r, "That did not work.");
+      if (bad && bad.code === "changed" && (kind === "save" || kind === "test")) {
+        // Someone (the agent, another tab) saved a newer version: the strip says so.
+        setConflict({ latest: bad.latest });
+        setKeptOver(null);
+      } else if (bad) setNote({ tone: "bad", text: bad.text, lines: bad.lines, code: bad.code, again: bad.code === "needs_test" ? again : null });
+      else {
+        if (kind === "save") {
+          setConflict(null);
+          if (versionOf(r) !== null) setBegun(versionOf(r));
+        }
+        if (ok) setNote({ tone: "ok", text: ok });
+      }
+    } catch (e) {
+      if (e?.code === "changed" && (kind === "save" || kind === "test")) {
+        setConflict({ latest: Number.isInteger(e.latest) ? e.latest : null });
+        setKeptOver(null);
+      } else setNote({ tone: "bad", text: e?.message || "That did not work.", lines: Array.isArray(e?.problems) ? e.problems : [] });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const save = () => run("save", () => onSave?.(def, { baseVersion: begun }), "Saved as a draft.");
+  // "Save on top of vN": the member's deliberate press, naming the newest version as the base.
+  const saveOnTop = () => run("save", () => onSave?.(def, { baseVersion: sawNewer ?? begun }), "Saved as a draft.");
+  // Replace the working copy with the saved one, as one step Undo can take back.
+  const lookAtNewer = () => {
+    looked.current = { def: canonicalJson(def), begun };
+    commit(baseline, false);
+    setBegun(latest);
+    setConflict(null);
+    setKeptOver(null);
+    setShowChanges(false);
+  };
+  const test = async (values) => {
+    setAsking(false);
+    await run("test", async () => {
+      if (dirty) {
+        const r = await onSave?.(def, { baseVersion: begun });
+        if (r && r.ok === false) return r;
+        if (versionOf(r) !== null) setBegun(versionOf(r));
+      }
+      return onTest?.(values);
+    });
+  };
+  const goLive = (on, opts) => run("live", () => (opts ? onLive?.(on, opts) : onLive?.(on)), undefined, { kind: "live", on });
+  const keep = (opts) => run("keep", () => (opts ? onKeep?.(opts) : onKeep?.()), "Kept. This version runs now.", { kind: "keep" });
+  // The member's deliberate second press: the same callback again, with the skip.
+  const skipTheTest = () => {
+    const again = note?.again;
+    if (!again) return;
+    if (again.kind === "keep") void keep({ skipTest: true });
+    else void goLive(again.on, { skipTest: true });
+  };
+  // The member said yes to the question: the platform answers, and a refusal is shown as it is.
+  const confirmDelete = () => {
+    setDeleting(false);
+    return run("delete", () => onDelete?.({ id: automationId, name: baseline.name, status }));
+  };
+  const pressTest = () => {
+    if (Object.keys(def.inputs ?? {}).length > 0) setAsking(true);
+    else void test({});
+  };
+
+  const onKeyDown = (e) => {
+    if (e.target.closest?.("input, textarea, select, [contenteditable]")) return;
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
+      e.preventDefault();
+      if (e.shiftKey) redo();
+      else undo();
+    } else if ((e.key === "Delete" || e.key === "Backspace") && selectedStep && canEdit) {
+      e.preventDefault();
+      commit(removeStep(def, selectedStep.id), false);
+    }
+  };
+
+  /* ---- the panel ----------------------------------------------------- */
+
+  let panel = null;
+  if (selected === "trigger") {
+    panel = (
+      <TriggerPicker
+        trigger={def.trigger}
+        readOnly={!canEdit}
+        catalog={triggers}
+        ownedByApp={ownedByApp}
+        selfKey={selfKey ?? def.key ?? null}
+        hook={hook}
+        onRotateHook={onRotateHook}
+        onChange={(trigger) => commit({ ...def, trigger })}
+        onClose={() => setSelected(null)}
+      />
+    );
+  } else if (selected === "flow") {
+    panel = <FlowSettings def={def} readOnly={!canEdit} versions={versions} liveVersion={liveVersion} onChange={commit} onClose={() => setSelected(null)} onReset={onReset} />;
+  } else if (selectedStep) {
+    panel = (
+      <StepSettings
+        key={selectedStep.id}
+        step={selectedStep}
+        available={{ ...availableBefore(def, selectedStep.id, stepTitle), inputs: inputsAsked }}
+        samples={samples}
+        apps={apps}
+        actions={actions}
+        ownedByApp={ownedByApp}
+        problems={issuesFor(issues, selectedStep.id)}
+        readOnly={!canEdit}
+        onChange={(patch) => commit(updateStep(def, selectedStep.id, patch))}
+        onRemove={() => commit(removeStep(def, selectedStep.id), false)}
+        onDuplicate={() => {
+          const d = duplicateStep(def, selectedStep.id);
+          if (d) {
+            commit(d.def);
+            setSelected(d.id);
+            setReveal(d.id);
+          }
+        }}
+        onClose={() => setSelected(null)}
+      />
+    );
+  }
+
+  const chip = isNew
+    ? { tone: "grey", text: "New" }
+    : !hasLive
+      ? { tone: "amber", text: "Draft" }
+      : canKeep
+        ? { tone: "amber", text: "Draft ahead" }
+        : live
+          ? { tone: "green", text: "Live" }
+          : { tone: "grey", text: "Off" };
+
+  const cost = estimate && !dirty ? creditsWords(estimate.credits) : null;
+  const testTitle = isNew
+    ? "Create it first"
+    : issues.length
+      ? "Fix what is marked first"
+      : estimate
+        ? `Reads your real data; nothing is sent or changed. About ${creditsWords(estimate.credits)}, at most ${creditsWords(estimate.credits_max)}.`
+        : "Reads your real data; nothing is sent or changed";
+  const tested = testChip(tests);
+
+  return (
+    <div onKeyDown={onKeyDown} className={cx("@container flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground", className)}>
+      <header className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1.5 border-b border-border px-3 py-2">
+        {onBack ? (
+          <Button size="sm" variant="quiet" icon="arrow-left" onClick={onBack}>
+            {backLabel}
+          </Button>
+        ) : null}
+        <label className="min-w-[10rem] max-w-md flex-1">
+          <span className="sr-only">Name</span>
+          <input
+            value={def.name}
+            maxLength={120}
+            placeholder="Name this automation"
+            readOnly={!canEdit}
+            onChange={(e) => commit({ ...def, name: e.target.value })}
+            className="min-h-9 w-full rounded-md border border-transparent bg-transparent px-2 text-sm font-semibold outline-none hover:border-border focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring"
+          />
+        </label>
+        <Chip tone={edited && !isNew ? "amber" : chip.tone}>{edited && !isNew ? "Unsaved changes" : chip.text}</Chip>
+        {tested ? <Chip tone={tested.tone}>{tested.text}</Chip> : null}
+        {tabs}
+        <span className="ml-auto" />
+        {!isNew && runs.length > 0 ? <RunPicker runs={runs} onPick={onOpenRun} /> : null}
+        {canEdit ? (
+          <>
+            <span title={hasLive ? undefined : "Keep a version first"}>
+              <Switch checked={live} disabled={!hasLive || busy !== null || dirty} label="Live" onChange={(e) => void goLive(e.target.checked)} />
+            </span>
+            <Button size="sm" variant="secondary" icon="play" disabled={isNew || busy !== null || issues.length > 0 || def.steps.length === 0} onClick={pressTest} title={testTitle}>
+              Test run
+              {cost ? <span className="font-normal text-muted-foreground">about {cost}</span> : null}
+            </Button>
+            {canKeep ? (
+              <Button size="sm" variant="secondary" disabled={busy !== null} onClick={() => void keep()}>
+                Keep this version
+              </Button>
+            ) : null}
+            <Button size="sm" variant="primary" loading={busy === "save"} disabled={busy !== null || !dirty || issues.length > 0 || !def.name.trim()} onClick={() => void save()} title={issues.length ? "Fix what is marked first" : undefined}>
+              {isNew ? "Create" : "Save"}
+            </Button>
+            {!isNew && onDelete && canDelete ? (
+              <Menu
+                label="More"
+                items={
+                  source === "legacy" || source === "package"
+                    ? [{ label: "Delete automation", icon: "trash", disabled: true, description: "Comes with the app. Switch it off, or remove it in the app's settings." }]
+                    : [{ label: "Delete automation", icon: "trash", tone: "danger", onSelect: () => setDeleting(true) }]
+                }
+              />
+            ) : null}
+          </>
+        ) : null}
+      </header>
+
+      {agentDraft ? (
+        <div role="status" className="border-b border-border bg-muted px-3 py-1.5 text-[13px] text-muted-foreground">
+          <span>
+            Drawn by the agent{agentDraft.note ? <> · from: {agentDraft.note}</> : null}
+          </span>
+          {compareTo?.definition ? (
+            <>
+              {" · "}
+              <button type="button" aria-expanded={showChanges} onClick={() => setShowChanges((v) => !v)} className="text-foreground underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                What changed
+              </button>
+            </>
+          ) : null}
+          {showChanges && compareTo?.definition ? (
+            <div className="mt-1">
+              <p className="m-0 text-xs">Compared with {compareTo.version ? `v${compareTo.version}` : "the version you kept"}:</p>
+              {changeLines.length ? (
+                <ul className="m-0 mt-0.5 list-disc pl-5">
+                  {changeLines.map((l) => (
+                    <li key={l}>{l}</li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="m-0 mt-0.5">Nothing in the steps differs.</p>
+              )}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {strip && canEdit ? (
+        <div role="status" className="flex flex-wrap items-center gap-2 border-b border-warning/50 bg-warning/10 px-3 py-2 text-sm">
+          <span className="min-w-0 flex-1">{newerVersionWords(sawNewer, versions)}</span>
+          {strip === "conflict" ? (
+            <Button size="sm" variant="secondary" disabled={busy !== null} onClick={() => void saveOnTop()}>
+              Save on top of v{sawNewer}
+            </Button>
+          ) : null}
+          <Button size="sm" variant="secondary" disabled={busy !== null} onClick={lookAtNewer}>
+            Look at v{sawNewer}
+          </Button>
+          {strip === "behind" ? (
+            <Button size="sm" variant="quiet" onClick={() => setKeptOver(latest)}>
+              Keep mine
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+
+      {note || (issues.length > 0 && canEdit) ? (
+        <div
+          role={note?.tone === "bad" ? "alert" : "status"}
+          className={cx("border-b px-3 py-2 text-sm", note?.tone === "bad" ? "border-destructive/50 bg-destructive/10" : note?.tone === "ok" ? "border-success/40 bg-success/10" : "border-warning/50 bg-warning/10")}
+        >
+          {note ? (
+            <>
+              <span>{note.text}</span>
+              {note.code === "needs_test" && note.again && canEdit ? (
+                skipAsk ? (
+                  <div className="mt-2 flex flex-wrap items-center gap-2">
+                    <span>Skip the test? It will run for real the first time it starts.</span>
+                    <Button size="sm" variant="secondary" disabled={busy !== null} onClick={skipTheTest}>
+                      Skip the test
+                    </Button>
+                    <Button size="sm" variant="quiet" onClick={() => setSkipAsk(false)}>
+                      Cancel
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="mt-2 flex flex-wrap items-center gap-2">
+                    <Button size="sm" variant="secondary" icon="play" disabled={busy !== null || isNew || issues.length > 0 || def.steps.length === 0} onClick={pressTest}>
+                      Run a test
+                    </Button>
+                    <Button size="sm" variant="quiet" disabled={busy !== null} onClick={() => setSkipAsk(true)}>
+                      {note.again.kind === "keep" ? "Keep without a test" : "Go live without a test"}
+                    </Button>
+                  </div>
+                )
+              ) : null}
+              {note.lines?.length ? (
+                <ul className="m-0 mt-1 list-disc pl-5 text-[13px]">
+                  {note.lines.slice(0, 3).map((l) => (
+                    <li key={l}>{l}</li>
+                  ))}
+                </ul>
+              ) : null}
+            </>
+          ) : (
+            <>
+              <span>{issues.length === 1 ? "One thing to fix before it can be saved." : `${issues.length} things to fix before it can be saved.`}</span>
+              <ul className="m-0 mt-1 list-disc pl-5 text-[13px]">
+                {issues.slice(0, 3).map((i) => (
+                  <li key={i.path + i.message}>
+                    {i.stepId ? (
+                      <button type="button" onClick={() => setSelected(i.stepId)} className="text-left underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                        {i.message}
+                      </button>
+                    ) : (
+                      i.message
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </div>
+      ) : null}
+
+      {canEdit && suggestions.length > 0 && (onKeepSuggestion || onDropSuggestion) ? (
+        <div className="grid max-h-[40%] gap-2 overflow-auto border-b border-border px-3 py-2">
+          {suggestions.slice(0, 2).map((s) => (
+            <FixProposal
+              key={s.id}
+              proposal={s}
+              def={def}
+              blocked={dirty && !isNew ? "Save or undo your changes first, so what is kept is what you see." : null}
+              onKeep={onKeepSuggestion ? () => onKeepSuggestion(s.id) : undefined}
+              onDrop={onDropSuggestion ? () => onDropSuggestion(s.id) : undefined}
+            />
+          ))}
+          {suggestions.length > 2 ? <p className="m-0 text-xs text-muted-foreground">{suggestions.length - 2} more suggestions after these.</p> : null}
+        </div>
+      ) : null}
+
+      <div className="relative flex min-h-0 flex-1">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+          <FlowEditor
+            def={def}
+            selectedId={selected}
+            onSelect={setSelected}
+            editable={canEdit}
+            onInsert={insert}
+            onAddAtSelection={addAtSelection}
+            flagged={flagged}
+            prices={prices}
+            fitKey={automationId ?? "new"}
+            revealId={reveal}
+            runnable={runnable}
+            undo={canEdit ? { canUndo: hist.past.length > 0, canRedo: hist.future.length > 0, onUndo: undo, onRedo: redo } : null}
+            onOpenFlow={() => setSelected("flow")}
+          />
+        </div>
+        {panel ? (
+          <div className="absolute inset-x-0 bottom-0 z-10 flex max-h-[75%] flex-col overflow-hidden rounded-t-xl border-t border-border shadow-lg [&>aside]:min-h-0 [&>aside]:flex-1 @3xl:relative @3xl:inset-auto @3xl:max-h-none @3xl:w-[380px] @3xl:shrink-0 @3xl:rounded-none @3xl:border-l @3xl:border-t-0 @3xl:shadow-none">{panel}</div>
+        ) : null}
+      </div>
+
+      <Confirm
+        open={deleting}
+        onClose={() => setDeleting(false)}
+        onConfirm={() => void confirmDelete()}
+        title="Delete this automation?"
+        body={deleteWords(baseline.name, status)}
+        confirmLabel="Delete"
+        tone="danger"
+      />
+
+      {asking ? <RunInputs open inputs={def.inputs} onCancel={() => setAsking(false)} onRun={(v) => void test(v)} /> : null}
+    </div>
+  );
+}