makersclaw 0.8.0 → 0.8.1

package/registry/blocks/run-view/demo.jsx

@@ -0,0 +1,286 @@
+"use client";
+
+// RunView and RunsList over pretend runs — the gallery's and the smoke
+// test's surface. Not installed into apps. Pick a run: one that took the
+// Yes path and finished (the agent fixed a step and drafted a change to keep
+// or drop; a person changed another step's data), a test run (dashed pencil cards, the strip), one that failed in the
+// loop, and four that are not over: stuck at a step (try again, skip, change
+// its data), cut off in a send, held at its limit (raise it), and paused.
+// Press a step of a run that is over for "Retry from this step"; in the first
+// run it first answers that something already sent, and asks once.
+// The controls answer from memory. Press a card for the step's account. A
+// width picker shows 1280, 800, 368 and 320 px of the block's own width.
+import { useState } from "react";
+import { Button, ButtonGroup } from "../components/ui";
+import { RunView, RunsList } from "../components/blocks/run-view";
+
+const DEF = {
+  format: 1,
+  key: "morning-read",
+  name: "Morning read",
+  trigger: { type: "schedule", cron: "0 7 * * 1-5", tz: "team" },
+  inputs: {},
+  settings: { overlap: "skip", on_failure: "retry_then_agent" },
+  steps: [
+    {
+      id: "gate",
+      kind: "condition",
+      label: "Anything new?",
+      if: "{{ trigger.at }}",
+      then: [{ id: "mail", kind: "tool", label: "Read the mail", needs: { category: "mail" }, tool: "list_messages", input: { limit: 200 } }],
+      else: [{ id: "off", kind: "stop", message: "Nothing new" }],
+    },
+    { id: "touches", kind: "action", label: "Save who wrote", action: "record_touches", input: { touches: "{{ steps.mail.output.messages }}" } },
+    {
+      id: "drafts",
+      kind: "loop",
+      over: "{{ steps.touches.output.owed }}",
+      max: 8,
+      steps: [
+        { id: "draft", kind: "llm", label: "Write the follow-up", tier: "smart", prompt: "Write a short follow-up." },
+        { id: "save", kind: "action", label: "Save the draft", action: "suggest", input: { body: "{{ steps.draft.output.text }}" } },
+      ],
+    },
+    { id: "tell", kind: "notify", message: "Done." },
+  ],
+};
+
+const t = (m) => `2026-10-${m}:00.000Z`; // all in the past, so "3d ago" reads right
+const row = (step_id, over = {}) => ({ path: step_id, step_id, kind: "notify", attempt: 1, status: "done", started_at: t("08T07:00"), ended_at: t("08T07:01"), credits: 0, error: null, ...over });
+
+const RUNS = [
+  {
+    id: "r3",
+    status: "done",
+    version: 2,
+    trigger_type: "schedule",
+    is_test: false,
+    created_at: t("08T07:00"),
+    started_at: t("08T07:00"),
+    ended_at: t("08T07:02"),
+    credits: 4.4,
+    cap_credits: 900,
+    result: { people_saved: 4, drafts_written: 2 },
+    fixes: [{ id: "a1", step_path: "touches", step_id: "touches", attempt: 1, status: "applied", credits: 0.4, drafts: [{ id: "d1", why: "Trim the address before it is saved.", status: "proposed", base_version: 2, new_version: null }] }],
+    steps: [
+      row("gate", { kind: "condition", output: { taken: "then" } }),
+      row("mail", { kind: "tool", input: { limit: 200 }, output: { count: 38 } }),
+      row("touches", { kind: "action", fix: { id: "f1", by: "agent", kind: "format", status: "applied", before: "Ana@x.com ", after: "ana@x.com", why: "The mail tool refuses spaces.", credits: 0.4, effect: "write", undo: true } }),
+      row("drafts", { kind: "loop" }),
+      row("draft", { path: "drafts[0]/draft", kind: "llm", credits: 1.9 }),
+      row("save", { path: "drafts[0]/save", kind: "action" }),
+      row("draft", { path: "drafts[1]/draft", kind: "llm", credits: 2.1 }),
+      row("save", { path: "drafts[1]/save", kind: "action", fix: { id: "f2", by: "member", kind: "input", status: "applied", before: { body: "Hi Ana" }, after: { body: "Hi Ana, a quick follow-up" }, why: "You changed this step's data for this run." } }),
+      row("tell"),
+    ],
+  },
+  {
+    id: "r2",
+    status: "failed",
+    version: 2,
+    trigger_type: "schedule",
+    is_test: false,
+    created_at: t("07T07:00"),
+    started_at: t("07T07:00"),
+    ended_at: t("07T07:01"),
+    credits: 2.1,
+    result: null,
+    error: { words: "A draft could not be saved: that person was removed." },
+    steps: [
+      row("gate", { kind: "condition", output: { taken: "then" } }),
+      row("mail", { kind: "tool" }),
+      row("touches", { kind: "action" }),
+      row("drafts", { kind: "loop", status: "failed" }),
+      row("draft", { path: "drafts[0]/draft", kind: "llm", credits: 2.1 }),
+      row("save", { path: "drafts[0]/save", kind: "action", status: "failed", error: { code: "gone", words: "That person was removed." } }),
+    ],
+  },
+  {
+    id: "r5",
+    status: "needs_you",
+    version: 2,
+    trigger_type: "schedule",
+    is_test: false,
+    created_at: t("09T07:00"),
+    started_at: t("09T07:00"),
+    ended_at: null,
+    credits: 1.2,
+    cap_credits: 900,
+    result: null,
+    error: { code: "step_failed", words: "“Save who wrote” was refused: the address is not valid." },
+    steps: [
+      row("gate", { kind: "condition", output: { taken: "then" } }),
+      row("mail", { kind: "tool", output: { count: 3 } }),
+      row("touches", { kind: "action", status: "failed", input: { touches: [{ email: "ana@" }] }, error: { code: "bad_address", words: "The address is not valid." } }),
+    ],
+  },
+  {
+    id: "r6",
+    status: "needs_you",
+    version: 2,
+    trigger_type: "schedule",
+    is_test: false,
+    created_at: t("09T08:00"),
+    started_at: t("09T08:00"),
+    ended_at: null,
+    credits: 3,
+    cap_credits: 900,
+    result: null,
+    error: { code: "step_unknown", words: "“Tell the team” was cut off while it was sending." },
+    steps: [
+      row("gate", { kind: "condition", output: { taken: "then" } }),
+      row("mail", { kind: "tool" }),
+      row("touches", { kind: "action" }),
+      row("drafts", { kind: "loop" }),
+      row("tell", { status: "unknown", error: { code: "unknown_effect", words: "It may have been sent." } }),
+    ],
+  },
+  {
+    id: "r7",
+    status: "needs_you",
+    version: 2,
+    trigger_type: "manual",
+    is_test: true,
+    created_at: t("09T09:00"),
+    started_at: t("09T09:00"),
+    ended_at: null,
+    credits: 900,
+    cap_credits: 900,
+    result: null,
+    error: { code: "run_cap", words: "This run reached its limit of 900 credits." },
+    steps: [row("gate", { kind: "condition", output: { taken: "then" } }), row("mail", { kind: "tool", credits: 900 })],
+  },
+  {
+    id: "r8",
+    status: "running",
+    paused: true,
+    version: 2,
+    trigger_type: "schedule",
+    is_test: false,
+    created_at: t("09T10:00"),
+    started_at: t("09T10:00"),
+    ended_at: null,
+    credits: 0.2,
+    cap_credits: 900,
+    result: null,
+    steps: [row("gate", { kind: "condition", output: { taken: "then" } }), row("mail", { kind: "tool", status: "running", ended_at: null })],
+  },
+  {
+    id: "r9",
+    status: "done",
+    dry: true,
+    version: 2,
+    trigger_type: "manual",
+    is_test: true,
+    created_at: t("10T07:00"),
+    started_at: t("10T07:00"),
+    ended_at: t("10T07:01"),
+    credits: 0.4,
+    result: {
+      dry: {
+        simulated: 3,
+        would: [
+          { step: "save", path: "drafts[0]/save", kind: "action", effect: "write", words: "Would save the draft with suggest." },
+          { step: "tell", path: "tell", kind: "notify", effect: "note", words: "Would leave the note “Done.”" },
+        ],
+        unchecked: ["tell"],
+        sampled: [{ step: "drafts", of: 38, looked_at: 5 }],
+      },
+    },
+    steps: [
+      row("gate", { kind: "condition", output: { taken: "then" } }),
+      row("mail", { kind: "tool" }),
+      row("touches", { kind: "action", simulated: true, output: { simulated: true, would: { kind: "action", effect: "write", words: "Would record who wrote with record_touches." } } }),
+      row("drafts", { kind: "loop" }),
+      row("draft", { path: "drafts[0]/draft", kind: "llm", credits: 0.4 }),
+      row("save", { path: "drafts[0]/save", kind: "action", simulated: true, output: { simulated: true, would: { kind: "action", effect: "write", words: "Would save the draft with suggest." } } }),
+      row("tell", { simulated: true, unchecked: true }),
+    ],
+  },
+  { id: "r1", status: "done", version: 1, trigger_type: "manual", is_test: true, created_at: t("06T10:00"), started_at: t("06T10:00"), ended_at: t("06T10:01"), credits: 0, result: null, steps: [row("gate", { kind: "condition", output: { taken: "else" } }), row("off", { kind: "stop" })] },
+];
+const WIDTHS = [1280, 800, 368, 320];
+
+// What a control does to a pretend run: enough to see each state's next screen.
+function afterControl(run, op, extra) {
+  switch (op) {
+    case "pause":
+      return { ...run, paused: true };
+    case "stop":
+      return { ...run, status: "stopped", paused: false, ended_at: run.started_at };
+    case "resume":
+      return { ...run, paused: false, status: "running", cap_credits: (run.cap_credits ?? 0) + (extra.raiseBy ?? 0), error: null };
+    case "skip":
+      return { ...run, status: "running", error: null, steps: run.steps.map((s) => (s.path === extra.path ? { ...s, status: "skipped", error: null } : s)) };
+    case "retry_from": {
+      const at = DEF.steps.findIndex((top) => top.id === extra.path);
+      const after = new Set(DEF.steps.slice(at).map((top) => top.id));
+      return { ...run, status: "running", error: null, ended_at: null, steps: run.steps.filter((s) => !after.has(s.path.split("[")[0].split("/")[0])) };
+    }
+    case "retry":
+    case "edit":
+      return { ...run, status: "running", error: null, steps: run.steps.map((s) => (s.path === extra.path ? { ...s, status: "running", error: null, ...(extra.input ? { input: extra.input } : {}) } : s)) };
+    default:
+      return run;
+  }
+}
+
+export default function RunViewDemo() {
+  const [width, setWidth] = useState(1280);
+  const [id, setId] = useState("r3");
+  const [tab, setTab] = useState("run");
+  const [runs, setRuns] = useState(RUNS);
+  const [drafts, setDrafts] = useState({});
+  const run = runs.find((r) => r.id === id) ?? runs[0];
+  const fixes = (run.fixes ?? []).map((f) => ({ ...f, drafts: f.drafts.map((d) => (drafts[d.id] ? { ...d, ...drafts[d.id] } : d)) }));
+  return (
+    <div className="grid gap-4 p-4">
+      <ButtonGroup aria-label="The block's width">
+        {WIDTHS.map((w) => (
+          <Button key={w} size="sm" variant={w === width ? "primary" : "secondary"} onClick={() => setWidth(w)}>
+            {w} px
+          </Button>
+        ))}
+      </ButtonGroup>
+      <div className="flex h-[680px] w-full flex-col overflow-hidden rounded-lg border border-border" style={{ maxWidth: width }}>
+        {tab === "run" ? (
+          <RunView
+            key={run.id}
+            def={DEF}
+            detail={{ run, steps: run.steps, steps_visible: true, automation: { name: "Morning read" }, fixes }}
+            runs={runs}
+            tz="America/New_York"
+            name="Morning read"
+            tabs={
+              <Button size="sm" variant="secondary" onClick={() => setTab("runs")}>
+                Runs
+              </Button>
+            }
+            onBack={() => setTab("runs")}
+            onPickRun={setId}
+            onRunAgain={() => {}}
+            onControl={async (op, extra) => {
+              if (op === "skip" && extra.path === "touches" && run.id === "r5") return { ok: false, code: "output_needed", error: "A later step uses what this one makes, so it cannot be skipped." };
+              // A pretend send: starting over from "Save who wrote" or earlier asks first once.
+              if (op === "retry_from" && run.id === "r3" && !extra.confirmResend && ["gate", "touches", "drafts"].includes(extra.path)) return { ok: false, code: "needs_confirm_resend", error: "A step from here on already sent something." };
+              setRuns((all) => all.map((r) => (r.id === run.id ? afterControl(r, op, extra) : r)));
+              return { ok: true };
+            }}
+            onKeepFix={async () => (setDrafts((d) => ({ ...d, d1: { status: "kept", new_version: 3 } })), { ok: true })}
+            onDropFix={async () => (setDrafts((d) => ({ ...d, d1: { status: "dropped" } })), { ok: true })}
+            onUndoFix={async () => ({ ok: true })}
+          />
+        ) : (
+          <RunsList
+            runs={runs}
+            tz="America/New_York"
+            onOpen={(r) => {
+              setId(r);
+              setTab("run");
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/registry/blocks/run-view/index.js

@@ -0,0 +1,5 @@
+// The RunView block — `makersclaw add run-view`. Fixed: compose it
+// through its props (README.md beside this file).
+export { RunView } from "./run-view";
+export { RunsList } from "./runs-list";
+export { RetryFromStep, RunControls } from "./run-controls";

package/registry/blocks/run-view/run-controls.jsx

@@ -0,0 +1,266 @@
+"use client";
+
+// What a person can do with a run that is not over: pause it, let it go
+// on, stop it; and when it is stuck on a step, try that step again, skip it,
+// change the data it was given for this run, or raise the run's limit and
+// go on. It offers only what the run's state allows (automation-model's
+// controlsOf), says plainly what each does, and takes the platform's
+// refusal in the platform's words. It changes nothing itself: every press
+// is `onControl(op, extra)`, which resolves { ok } or { ok: false, error,
+// code }. Props in, callbacks out.
+
+import { useMemo, useState } from "react";
+import { Button, Field, Input, Textarea, cx } from "../../ui";
+import { CONTROL_DONE, CONTROL_REFUSED, PanelSection, RETRY_FROM, controlsOf, creditsWords, retryFromOf } from "../automation-model";
+
+const jsonText = (v) => (v === undefined || v === null ? "{}" : JSON.stringify(v, null, 2));
+
+/**
+ *   run           { status, paused, cap_credits, error }
+ *   steps         the run's step rows (for the step it is stuck at and its data)
+ *   stepsVisible  the member may read a step's data (so may change it)
+ *   titleOf(id)   a step's name
+ *   onControl(op, { path?, input?, confirmNotSent?, raiseBy?, confirmResend? })
+ *                 op: pause · resume · stop · retry · skip · edit · retry_from
+ *   busy          the op that is out, or null
+ */
+export function RunControls({ run, steps = [], stepsVisible = false, titleOf, onControl, busy = null, className }) {
+  const c = useMemo(() => controlsOf(run, steps, { stepsVisible }), [run, steps, stepsVisible]);
+  const [mode, setMode] = useState(null);
+  const [note, setNote] = useState(null);
+  const [text, setText] = useState("");
+  const [raise, setRaise] = useState("");
+  if (!onControl || c.state === "ended") return null;
+
+  const blockedRow = c.blocked ? steps.find((r) => r.path === c.blocked.path && r.status !== "done") : null;
+  const stuck = c.blocked ? (titleOf?.(c.blocked.stepId) ?? c.blocked.stepId) : null;
+
+  const send = async (op, extra = {}) => {
+    setNote(null);
+    let r;
+    try {
+      r = await onControl(op, extra);
+    } catch (e) {
+      r = { ok: false, error: e?.message ?? String(e) };
+    }
+    if (r && r.ok === false) {
+      setNote({ tone: "bad", text: r.error || CONTROL_REFUSED[r.code] || "That did not work. Try again." });
+      return false;
+    }
+    setMode(null);
+    setNote({ tone: "ok", text: CONTROL_DONE[op] ?? "Done." });
+    return true;
+  };
+
+  const openEdit = () => {
+    setText(jsonText(blockedRow?.input));
+    setNote(null);
+    setMode("edit");
+  };
+  const sendEdit = () => {
+    let input;
+    try {
+      input = JSON.parse(text);
+    } catch {
+      setNote({ tone: "bad", text: "That is not valid data. Check the commas and quotes." });
+      return;
+    }
+    if (input === null || typeof input !== "object" || Array.isArray(input)) {
+      setNote({ tone: "bad", text: "The data is a set of named values, like { \"limit\": 50 }." });
+      return;
+    }
+    void send("edit", { path: c.blocked.path, input });
+  };
+  const sendRaise = () => {
+    const by = Number(raise || c.raiseDefault);
+    if (!Number.isFinite(by) || by <= 0) {
+      setNote({ tone: "bad", text: "Say how many credits to add." });
+      return;
+    }
+    void send("resume", { raiseBy: by });
+  };
+  const off = busy !== null;
+
+  return (
+    <PanelSection title="What you can do">
+      <div className={cx("grid gap-2", className)}>
+        {c.state === "paused" ? <p className="m-0 text-[13px]">Paused. Nothing new starts until you resume it. A step that is already going finishes.</p> : null}
+        {c.state === "parked" && stuck ? (
+          <p className="m-0 text-[13px]">
+            {c.blocked.unknownSend ? `“${stuck}” was cut off while it was sending. Nobody knows whether it went.` : `It is stuck at “${stuck}”.`}
+          </p>
+        ) : null}
+        {c.state === "parked" && !stuck && !c.raise ? <p className="m-0 text-[13px]">It is waiting for its owner.</p> : null}
+
+        {mode === null ? (
+          <div className="flex flex-wrap gap-2">
+            {c.pause ? (
+              <Button size="sm" variant="secondary" icon="pause" loading={busy === "pause"} disabled={off} onClick={() => void send("pause")}>
+                Pause
+              </Button>
+            ) : null}
+            {c.resume && !c.raise ? (
+              <Button size="sm" variant="secondary" icon="play" loading={busy === "resume"} disabled={off} onClick={() => void send("resume")}>
+                {c.state === "paused" ? "Resume" : "Try again"}
+              </Button>
+            ) : null}
+            {c.raise ? (
+              <Button size="sm" variant="secondary" disabled={off} onClick={() => (setRaise(String(c.raiseDefault)), setMode("raise"))}>
+                Raise its limit
+              </Button>
+            ) : null}
+            {c.retry ? (
+              <Button size="sm" variant="secondary" icon="rotate-ccw" loading={busy === "retry"} disabled={off} onClick={() => void send("retry", { path: c.blocked.path, ...(c.blocked.unknownSend ? { confirmNotSent: true } : {}) })}>
+                {c.blocked.unknownSend ? "It did not go: send it again" : "Try this step again"}
+              </Button>
+            ) : null}
+            {c.skip ? (
+              <Button size="sm" variant="secondary" loading={busy === "skip"} disabled={off} onClick={() => void send("skip", { path: c.blocked.path })}>
+                {c.blocked.unknownSend ? "It did go: skip it" : "Skip this step"}
+              </Button>
+            ) : null}
+            {c.edit ? (
+              <Button size="sm" variant="secondary" icon="pencil" disabled={off} onClick={openEdit}>
+                Change its data
+              </Button>
+            ) : null}
+            {c.stop ? (
+              <Button size="sm" variant="quiet" icon="square" disabled={off} onClick={() => setMode("stop")}>
+                Stop
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
+
+        {mode === "stop" ? (
+          <div className="grid gap-2">
+            <p className="m-0 text-[13px]">Stop this run? It ends here and cannot be started again. Run the automation again to get a new one.</p>
+            <div className="flex flex-wrap gap-2">
+              <Button size="sm" variant="danger" loading={busy === "stop"} disabled={off} onClick={() => void send("stop")}>
+                Stop it
+              </Button>
+              <Button size="sm" variant="quiet" disabled={off} onClick={() => setMode(null)}>
+                Let it go on
+              </Button>
+            </div>
+          </div>
+        ) : null}
+
+        {mode === "raise" ? (
+          <div className="grid gap-2">
+            <p className="m-0 text-[13px]">
+              It stopped at its limit{run.cap_credits ? ` of ${creditsWords(run.cap_credits)}` : ""}. Add credits to this run’s limit and it goes on from where it stopped. The automation’s own limit stays as it is.
+            </p>
+            <Field id="raise-by" label="Add credits">
+              <Input id="raise-by" type="number" inputMode="numeric" min={1} value={raise} onChange={(e) => setRaise(e.target.value)} className="w-32" />
+            </Field>
+            <div className="flex flex-wrap gap-2">
+              <Button size="sm" variant="primary" loading={busy === "resume"} disabled={off} onClick={sendRaise}>
+                Add and go on
+              </Button>
+              <Button size="sm" variant="quiet" disabled={off} onClick={() => setMode(null)}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : null}
+
+        {mode === "edit" ? (
+          <div className="grid gap-2">
+            <p className="m-0 text-[13px]">What “{stuck}” is given, for this run only. The automation itself does not change.</p>
+            <Field id="run-data" label="Its data">
+              <Textarea id="run-data" rows={8} spellCheck={false} value={text} onChange={(e) => setText(e.target.value)} className="font-mono text-xs" />
+            </Field>
+            <div className="flex flex-wrap gap-2">
+              <Button size="sm" variant="primary" loading={busy === "edit"} disabled={off} onClick={sendEdit}>
+                Try it with this
+              </Button>
+              <Button size="sm" variant="quiet" disabled={off} onClick={() => setMode(null)}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : null}
+
+        {note ? (
+          <p role={note.tone === "bad" ? "alert" : "status"} className={cx("m-0 text-xs", note.tone === "bad" ? "text-destructive" : "text-muted-foreground")}>
+            {note.text}
+          </p>
+        ) : null}
+      </div>
+    </PanelSection>
+  );
+}
+
+/**
+ * "Retry from this step", for the step a member is looking at in a run that
+ * is over (done, failed, stopped) or waiting on its owner: start the run over
+ * at that step, running it and every step after it again. A step inside a
+ * loop starts over from the loop. If a step from there on already sent
+ * something, it asks first, in its own words, and only then sends again.
+ * Quiet: the common press is a look, not a redo. Draws nothing when the run
+ * or the step does not allow it, or without `onControl`.
+ *
+ *   run, steps, def   the run, its step rows, the definition it used
+ *   stepId            the step shown
+ *   onControl(op, { path, confirmResend? })   resolves { ok } or { ok: false, error, code }
+ *   busy              the op that is out, or null
+ */
+export function RetryFromStep({ run, steps = [], def, stepId, onControl, busy = null, className }) {
+  const r = useMemo(() => retryFromOf(run, steps, def, stepId), [run, steps, def, stepId]);
+  const [asking, setAsking] = useState(false);
+  const [note, setNote] = useState(null);
+  if (!onControl || !r.show) return null;
+
+  const go = async (confirmResend) => {
+    setNote(null);
+    let out;
+    try {
+      out = await onControl("retry_from", { path: r.path, ...(confirmResend ? { confirmResend: true } : {}) });
+    } catch (e) {
+      out = { ok: false, error: e?.message ?? String(e) };
+    }
+    if (out && out.ok === false) {
+      if (out.code === "needs_confirm_resend") {
+        setAsking(true);
+        return;
+      }
+      setAsking(false);
+      setNote({ tone: "bad", text: out.error || CONTROL_REFUSED[out.code] || "That did not work. Try again." });
+      return;
+    }
+    setAsking(false);
+    setNote({ tone: "ok", text: CONTROL_DONE.retry_from });
+  };
+  const off = busy !== null;
+
+  return (
+    <div className={cx("grid gap-2", className)}>
+      {asking ? (
+        <div className="grid gap-2">
+          <p className="m-0 text-[13px]">{RETRY_FROM.ask}</p>
+          <div className="flex flex-wrap gap-2">
+            <Button size="sm" variant="primary" loading={busy === "retry_from"} disabled={off} onClick={() => void go(true)}>
+              {RETRY_FROM.yes}
+            </Button>
+            <Button size="sm" variant="quiet" disabled={off} onClick={() => setAsking(false)}>
+              {RETRY_FROM.no}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center gap-2">
+          <Button size="sm" variant="quiet" icon="rotate-ccw" loading={busy === "retry_from"} disabled={off} onClick={() => (r.sent ? setAsking(true) : void go(false))}>
+            {RETRY_FROM.button}
+          </Button>
+        </div>
+      )}
+      <p className="m-0 text-xs text-muted-foreground">{r.inLoop ? `${RETRY_FROM.inLoop(r.loopTitle)} ` : ""}{RETRY_FROM.what}</p>
+      {note ? (
+        <p role={note.tone === "bad" ? "alert" : "status"} className={cx("m-0 text-xs", note.tone === "bad" ? "text-destructive" : "text-muted-foreground")}>
+          {note.text}
+        </p>
+      ) : null}
+    </div>
+  );
+}