makersclaw 0.8.0 → 0.8.2

package/registry/blocks/first-run/first-run.jsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import { ActionCard, Button, Card, Icon, cx } from "../../ui";
+import { columnsFor, stepsOf, stepsWords } from "./first-run-model";
+
+// FirstRun — an app's first page, before anything is made. Working-tool
+// style, not a landing page (UI review X10, 2026-10-12: Gantt Planner opened
+// on a 52px hero, four stacked cards, a big chart and a second shelf; each
+// app invented its own first run, Roadmap's, Newsletter's and Gantt's all
+// differed).
+//
+// In order, at the kit's normal sizes:
+//   1. one plain heading line, and one line of what the app does
+//   2. the first steps in a row, the agent's way in first (X9), then making
+//      the first thing yourself, then starting from the Library, then
+//      bringing it in from another tool. The first is the page's one main
+//      button
+//   3. the starting points shelf (the app passes its LibraryShelf)
+//   4. what the agent will do, and the accounts it can use, side by side
+//   5. a worked example, behind "See an example". Never filling the page
+//
+// `npm run check` (rule 24, hero) refuses an <h1> at 36px or more.
+//
+// One column, the page's own scroll (UI review X13, 2026-10-12: Newsletter
+// Engine's first run was a short intro on the left and a long "Name it" form
+// in the right column, so the left sat short and the right scrolled on). The
+// block has no side column and draws none: a form for "type it yourself"
+// (`children`) is revealed in the main flow, as its own card between the
+// steps and the shelf, when its step is pressed. Never beside them. Rule 27
+// (sidelong) refuses an app that puts a form in a side column.
+
+/** A step's button. */
+function StepButton({ action, variant, kind }) {
+  return (
+    <Button data-first-run-step={kind} variant={variant} icon={action.icon} href={action.href} onClick={action.onClick} disabled={action.disabled} loading={action.loading}>
+      {action.label}
+      {action.cost ? <span className="ml-1">{action.cost}</span> : null}
+    </Button>
+  );
+}
+
+function WhatTheAgentDoes({ title, items }) {
+  return (
+    <section aria-label={title} className="grid content-start gap-3">
+      <h2 className="text-xs font-semibold uppercase tracking-[0.06em] text-muted-foreground">{title}</h2>
+      <ul className="m-0 grid list-none gap-3 p-0">
+        {items.map((it) => (
+          <li key={it.name} className="flex gap-2.5">
+            <Icon name="sparkles" size={14} className="mt-1 shrink-0 text-muted-foreground" />
+            <div className="min-w-0">
+              <p className="font-semibold">
+                {it.name}
+                {it.when ? <span className="font-normal text-muted-foreground"> · {it.when}</span> : null}
+              </p>
+              {it.what ? <p className="text-[13px] text-muted-foreground">{it.what}</p> : null}
+              {it.cost ? <p className="text-xs">{it.cost}</p> : null}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+/**
+ *   title         the heading: one plain line ("Nothing is planned here yet.")
+ *   lede          one line of what the app does and what happens next
+ *   notice        a node above the steps (a Notice: a missing account, a limit)
+ *   choices       [{ key, kind, icon, title, description, action, status, note }]
+ *                 kind: agent · hand · library · import · other (the order they
+ *                 are offered in, whatever order they are given). action:
+ *                 { label, href | onClick, icon, cost, variant, disabled,
+ *                 loading }: a step with no action is dropped. An agent step
+ *                 opens the agent's dock with a starting line ("Draft a project
+ *                 plan for me") and the agent asks for what it is missing; it
+ *                 never opens a form first. status: { tone, children } (an
+ *                 ActionCard's); note: a node between the description and
+ *                 the status (a price line)
+ *   children      a node after the steps, in the main flow (a card that
+ *                 reveals the form to name the first thing when its step is
+ *                 pressed). Never a side column
+ *   shelf         the starting points: your LibraryShelf, as a node
+ *   agentDoes     [{ name, when, what, cost }]: what the agent will do, by
+ *                 itself, and when. `agentTitle` (default "What the agent will do")
+ *   accounts      a node: the accounts it can use, all optional (ConnectRow
+ *                 list). `accountsTitle` (default "Accounts, all optional")
+ *   example       { label, title, description, onOpen, children }: a worked
+ *                 example behind a button. With `onOpen` the button calls it
+ *                 (an example mode); with `children` it reveals them in place
+ *   className     spacing around the page
+ */
+export function FirstRun({ title, lede, notice, choices, children, shelf, agentDoes, agentTitle = "What the agent will do", accounts, accountsTitle = "Accounts, all optional", example, className }) {
+  const steps = stepsOf(choices);
+  const [open, setOpen] = useState(false);
+  const wide = Boolean(agentDoes?.length) && Boolean(accounts);
+  return (
+    <div data-first-run className={cx("@container grid gap-6 p-4 sm:p-6", className)}>
+      <header className="grid gap-1.5">
+        <h1 className="font-display text-2xl font-semibold leading-tight">{title}</h1>
+        {lede ? <p className="max-w-[62ch] text-[13px] text-muted-foreground">{lede}</p> : null}
+      </header>
+
+      {notice ?? null}
+
+      {steps.length ? (
+        <section aria-label={stepsWords(steps.length)} className={cx("grid gap-3", columnsFor(steps.length))}>
+          {steps.map((c) => (
+            <ActionCard
+              key={c.key ?? c.title}
+              icon={c.icon}
+              title={c.title}
+              description={c.description}
+              status={c.status}
+              action={<StepButton action={c.action} variant={c.variant} kind={c.kind} />}
+            >
+              {c.note ?? null}
+            </ActionCard>
+          ))}
+        </section>
+      ) : null}
+
+      {children ?? null}
+      {shelf ?? null}
+
+      {agentDoes?.length || accounts ? (
+        <div className={cx("grid gap-6", wide && "@3xl:grid-cols-2")}>
+          {agentDoes?.length ? <WhatTheAgentDoes title={agentTitle} items={agentDoes} /> : null}
+          {accounts ? (
+            <section aria-label={accountsTitle} className="grid content-start gap-3">
+              <h2 className="text-xs font-semibold uppercase tracking-[0.06em] text-muted-foreground">{accountsTitle}</h2>
+              {accounts}
+            </section>
+          ) : null}
+        </div>
+      ) : null}
+
+      {example ? (
+        <section aria-label={example.title ?? "Example"} className="grid gap-3">
+          <Card padding="sm" className="border-dashed">
+            <div className="flex flex-wrap items-center gap-3">
+              <div className="min-w-0 flex-1 basis-72">
+                {example.title ? <p className="font-semibold">{example.title}</p> : null}
+                {example.description ? <p className="text-[13px] text-muted-foreground">{example.description}</p> : null}
+              </div>
+              <Button variant="secondary" onClick={example.onOpen ?? (() => setOpen((v) => !v))} aria-expanded={example.onOpen ? undefined : open}>
+                {example.onOpen ? (example.label ?? "See an example") : open ? "Hide the example" : (example.label ?? "See an example")}
+              </Button>
+            </div>
+          </Card>
+          {open && !example.onOpen ? <div className="min-w-0">{example.children}</div> : null}
+        </section>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+// The FirstRun block — `makersclaw add first-run`. Fixed: compose it through
+// its props (README.md beside this file). The model's helpers are plain
+// functions; they work on the server too.
+export { FirstRun } from "./first-run";
+export { KINDS, columnsFor, orderChoices, stepsOf, stepsWords, variantFor } from "./first-run-model";

package/registry/blocks/first-run/probe-rules.js

@@ -0,0 +1,26 @@
+// The layout rules this block ships for the store's probe (makersclaw-store
+// scripts/probe.mjs --suite); see top-bar/probe-rules.js. Nothing imports this.
+export default {
+  block: "first-run",
+  rules: [
+    {
+      id: "no-hero-heading",
+      kind: "heading-max",
+      note: "UI review X10: a marketing hero on the first screen",
+      scope: "[data-first-run]",
+      max: 32,
+    },
+    {
+      id: "agent-step-opens-the-dock",
+      kind: "flow",
+      note: "UI review X9: a form before the agent",
+      scope: "[data-first-run-step='agent']",
+      sizes: ["375x812", "1280x900"],
+      steps: [
+        { click: { selector: "[data-first-run-step='agent']" }, neverText: [] },
+        { expect: { dock: "open" } },
+        { expect: { noDialog: true } },
+      ],
+    },
+  ],
+};

package/registry/blocks/fix-note/README.md

@@ -0,0 +1,79 @@
+# FixNote
+
+"The agent fixed this." When a step of an automation fails, the agent may
+change what it needs to so **this run** still finishes the same job: a date
+format, a missing field, a trimmed address, a different path that holds the
+same thing. This block says what it changed, in the run, in words.
+
+- A sentence on **why** ("The mail tool refuses spaces").
+- The value **as it was** and **as it is now**, side by side.
+- What kind of change it was, and what the fix cost.
+- **Keep this fix for next time** — keeps the change the agent drafted: a
+  new version of the automation, which runs from now on. A person keeps or
+  drops it; nothing the agent proposes goes live by itself, and the agent
+  never changes who gets what, an approved word, a schedule or a limit.
+- Whether it can be **taken back**: a write can, a send cannot.
+
+```jsx
+import { FixNote } from "../components/blocks/fix-note";   // a Makersclaw app
+import { FixNote } from "@/components/makersclaw/blocks/fix-note";   // a shadcn project
+```
+
+`makersclaw add fix-note` lays `agent-marks` and `automation-model` with
+it. A client component. Its own width decides its layout: before and after
+sit side by side from about 384 px.
+
+## Props
+
+- `fix` — what a run's step reports: `{ by, kind, before, after, why,
+  credits, effect, undo }`. `by` is `agent` or `member` (a person's own edit
+  of a run's data, worded as theirs). `kind` is `input` · `mapping` ·
+  `format` · `prompt` · `retry` · `skip`. `effect` is `read` · `write` ·
+  `send`: only a **write** offers to be taken back (`undo: true`); a send
+  says it cannot be. Null draws nothing.
+- `stepTitle` — the step's name, when the note stands apart from its step.
+- `draft` — the change the agent drafted for next time, from the run's
+  `fixes`: `{ id, status: proposed | kept | dropped, new_version }`. A kept
+  one says "Kept as version 3"; a dropped one says so; a proposed one shows
+  Keep and Drop.
+- `onKeep()` — async → `{ ok }` or `{ ok: false, error }`. With a `draft` it
+  keeps that draft (a new version that runs); with none it asks the platform
+  to draft one from this fix. Without it there is no button (the member may
+  not).
+- `onDrop()` — drops the drafted change. Needs a `draft`.
+- `onUndo()` — takes a write back. Without it the note only says it can be.
+- `kept` — true once it was proposed (the note says so, with no button).
+- `compact` — one paragraph with no before and after.
+- `className`.
+
+## FixProposal
+
+The same change on the automation itself: what the agent drafted from a
+failed run, for the automation as it stands. Why, which steps it would touch
+(named, never shown), **Keep it** and **Drop it**. A stale one (the
+automation moved on) can only be dropped.
+
+- `proposal` — `{ id, why, stale, patch }`, one of `suggestions` from
+  `useAutomation`.
+- `def` — the definition, to name the steps.
+- `onKeep()`, `onDrop()` — async, as above.
+- `blocked` — words for why Keep waits ("Save or discard your changes first").
+
+## Never
+
+- Never a fix that looks like the member's own edit: it is the agent's, and
+  the note says so.
+- Never "Keep" that publishes without a person: the agent drafts, a person
+  keeps, and kept saves a new version (the old one stays in the history).
+- Never an Undo for a send: a message that went out cannot be taken back.
+
+## Example
+
+```jsx
+"use client";
+import { FixNote } from "../components/blocks/fix-note";
+
+export default function Fixed({ step, onKeep }) {
+  return <FixNote fix={step.fix} stepTitle="Send the follow-up" onKeep={onKeep} />;
+}
+```

package/registry/blocks/fix-note/block.json

@@ -0,0 +1,35 @@
+{
+  "name": "fix-note",
+  "title": "FixNote",
+  "description": "\"The agent fixed this\": what the agent changed when a step of an automation failed, so the run still finished the same job. A sentence on why, the value as it was and as it is now, what the fix cost, and \"Keep this fix for next time\", which asks for a proposed change a person keeps or drops (nothing the agent proposes goes live by itself). It draws a run step's `fix`, says whether a write can be taken back (a send cannot), words a person's own edit of a run's data as theirs, and shows what became of the change the agent drafted: kept as a new version, dropped, or waiting. FixProposal is that drafted change on the automation itself, to keep or drop.",
+  "useWhen": "A run's screen shows a step the agent repaired: run-view and step-settings place it for you. Use it on its own in a needs-you list or an activity line about an automation.",
+  "tags": [
+    "automation",
+    "workflow",
+    "agent",
+    "fix",
+    "repair",
+    "run",
+    "failed step",
+    "before and after",
+    "keep",
+    "proposal",
+    "provenance",
+    "undo",
+    "draft",
+    "suggestion",
+    "version"
+  ],
+  "exports": [
+    "FixNote",
+    "FixProposal"
+  ],
+  "files": [
+    "index.js",
+    "fix-note.jsx"
+  ],
+  "requires": [
+    "agent-marks",
+    "automation-model"
+  ]
+}

package/registry/blocks/fix-note/demo.jsx

@@ -0,0 +1,30 @@
+"use client";
+
+// FixNote and FixProposal — the gallery's and the smoke test's surface. Not
+// installed into apps. Press Keep: the note says it was kept as a new
+// version, or (with no draft) that it was proposed, never that it is live by
+// itself. A write offers Undo; a send says it cannot be taken back; a
+// person's own edit is worded as theirs.
+import { useState } from "react";
+import { FixNote, FixProposal } from "../components/blocks/fix-note";
+
+const FIX = { by: "agent", kind: "format", before: "Ana@x.com ", after: "ana@x.com", why: "The mail tool refuses a space after the address.", credits: 0.4 };
+const DEF = { steps: [{ id: "mail", kind: "tool", label: "Read the mail" }, { id: "save", kind: "action", label: "Save the draft" }] };
+const PROPOSAL = { id: "d1", why: "The save step was given the address with a space after it. Trimming it stops this.", stale: false, base_version: 2, patch: { changes: [{ id: "save", input: { email: "{{ trim steps.mail.output.from }}" } }, { id: "mail", retry: { max: 3 } }] } };
+
+export default function FixNoteDemo() {
+  const [asked, setAsked] = useState(0);
+  return (
+    <div className="grid max-w-lg gap-4 p-4">
+      <FixNote fix={FIX} stepTitle="Send the follow-up" onKeep={async () => { setAsked((n) => n + 1); return { ok: true }; }} />
+      <FixNote fix={{ ...FIX, effect: "write", undo: true }} stepTitle="Save the draft" draft={{ id: "d1", status: "proposed" }} onKeep={async () => ({ ok: true })} onDrop={async () => ({ ok: true })} onUndo={async () => ({ ok: true })} />
+      <FixNote fix={{ ...FIX, effect: "send", undo: false }} compact draft={{ id: "d2", status: "kept", new_version: 3 }} />
+      <FixNote fix={FIX} compact draft={{ id: "d3", status: "dropped" }} />
+      <FixNote fix={{ by: "member", kind: "input", before: { limit: 200 }, after: { limit: 50 }, why: "Changed by you for this run." }} stepTitle="Read the mail" />
+      <FixNote fix={{ by: "agent", kind: "mapping", before: "steps.mail.output.items", after: "steps.mail.output.messages", why: "The mail step names its list messages." }} onKeep={async () => ({ ok: false, error: "Could not draft the change. Try again." })} />
+      <FixProposal proposal={PROPOSAL} def={DEF} onKeep={async () => ({ ok: true })} onDrop={async () => ({ ok: true })} />
+      <FixProposal proposal={{ ...PROPOSAL, id: "d2", stale: true }} def={DEF} onKeep={async () => ({ ok: true })} onDrop={async () => ({ ok: true })} />
+      <p className="m-0 text-xs text-muted-foreground">Keep pressed {asked} times.</p>
+    </div>
+  );
+}

package/registry/blocks/fix-note/fix-note.jsx

@@ -0,0 +1,235 @@
+"use client";
+
+// "The agent fixed this": what the agent changed when a step failed, so
+// the run still finished the same job. It says why in a sentence, shows
+// the value as it was and as it is now, what the fix cost, whether it can
+// be taken back (only a write can; a send cannot), and what became of the
+// change the agent drafted for next time: kept as a new version, dropped,
+// or still waiting for a person. Nothing the agent proposes goes live by
+// itself. It draws what a run's step reports in `fix`:
+// { by, kind, before, after, why, credits, effect, undo }, and the draft
+// from the run's `fixes`. A person's own edit of a run's data is the same
+// shape with `by: "member"` and is worded as theirs. Props in, callbacks out.
+//
+// FixProposal is the other half: a change the agent drafted from a failed
+// run, shown on the automation itself, to keep or drop.
+
+import { useState } from "react";
+import { Button, cx } from "../../ui";
+import { AgentMark } from "../agent-marks";
+import { changeLines, creditsWords } from "../automation-model";
+
+const KIND = {
+  input: "A value it was given",
+  mapping: "Where a value came from",
+  format: "The way a value is written",
+  prompt: "The words it asked with",
+  retry: "How it tries again",
+  skip: "A step that was skipped",
+};
+
+/** A value as text: words as they are, the rest as compact JSON. */
+const show = (v) => (typeof v === "string" ? v : (JSON.stringify(v) ?? ""));
+
+function Side({ label, value, tone }) {
+  return (
+    <div className="grid min-w-0 gap-0.5">
+      <dt className="text-2xs font-semibold uppercase tracking-wide text-muted-foreground">{label}</dt>
+      <dd className={cx("m-0 min-w-0 break-words rounded-md border px-2 py-1 font-mono text-xs", tone === "now" ? "border-primary/50 bg-primary/10" : "border-border bg-muted")}>{show(value) || "nothing"}</dd>
+    </div>
+  );
+}
+
+/** One press that may fail: busy while it runs, its refusal in words. */
+function usePress() {
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  async function press(what, work) {
+    if (!work || busy) return null;
+    setBusy(what);
+    setError(null);
+    let r;
+    try {
+      r = await work();
+    } catch (e) {
+      r = { ok: false, error: e?.message ?? String(e) };
+    }
+    setBusy(null);
+    if (r && r.ok === false) {
+      setError(r.error || "That did not work. Try again.");
+      return false;
+    }
+    return true;
+  }
+  return { busy, error, press };
+}
+
+/**
+ *   fix        { by, kind, before, after, why, credits, effect, undo }
+ *   stepTitle  the step's name, when the note stands apart from its step
+ *   draft      the change the agent drafted for next time, from the run's
+ *              `fixes`: { id, status: proposed | kept | dropped, new_version }.
+ *              With it, Keep and Drop act on that draft.
+ *   onKeep()   async → { ok } | { ok: false, error }: keep the fix for next
+ *              time. With a `draft` it saves a new version that runs; with
+ *              no draft the platform drafts one from this fix (a person
+ *              keeps it). Without onKeep there is no button.
+ *   onDrop()   async: drop the drafted change. Needs a `draft`.
+ *   onUndo()   async: take a write back. Without it the note only says it can be.
+ *   kept       true once it was proposed (the note says so, with no button)
+ *   compact    one paragraph, no before and after
+ */
+export function FixNote({ fix, stepTitle, draft = null, onKeep, onDrop, onUndo, kept: keptProp = false, compact = false, className }) {
+  const { busy, error, press } = usePress();
+  const [done, setDone] = useState(null);
+  if (!fix) return null;
+  const mine = fix.by === "member";
+  const has = fix.before !== undefined || fix.after !== undefined;
+  const state = draft && draft.status !== "proposed" ? draft.status : done;
+  const undone = done === "undone";
+
+  const keep = async () => {
+    if ((await press("keep", onKeep)) === true) setDone(draft ? "kept" : "proposed");
+  };
+  const drop = async () => {
+    if ((await press("drop", onDrop)) === true) setDone("dropped");
+  };
+  const undo = async () => {
+    if ((await press("undo", onUndo)) === true) setDone("undone");
+  };
+
+  const heading = mine
+    ? fix.kind === "skip"
+      ? "You skipped this step"
+      : stepTitle
+        ? `You changed the data for “${stepTitle}”`
+        : "You changed this step’s data"
+    : stepTitle
+      ? `The agent fixed “${stepTitle}”`
+      : "The agent fixed this";
+
+  return (
+    <section aria-label={mine ? "You changed this" : "The agent fixed this"} className={cx("@container grid min-w-0 gap-2 rounded-lg border p-3 text-sm text-foreground", mine ? "border-border bg-muted" : "border-primary/50 bg-primary/10", className)}>
+      <h4 className="m-0 flex min-w-0 items-center gap-1.5 text-[13px] font-semibold">
+        {mine ? null : <AgentMark />}
+        <span className="min-w-0">{heading}</span>
+      </h4>
+      {fix.why ? <p className="m-0 text-[13px]">{fix.why}</p> : null}
+      {!compact && has ? (
+        <dl className="m-0 grid gap-2 @sm:grid-cols-2">
+          <Side label="It was" value={fix.before} />
+          <Side label="Now" value={fix.after} tone="now" />
+        </dl>
+      ) : null}
+      <p className="m-0 text-xs text-muted-foreground">
+        {KIND[fix.kind] ? `${KIND[fix.kind]}, for this run only.` : "For this run only."}
+        {!mine && fix.credits ? ` It cost ${creditsWords(fix.credits)}.` : ""}
+      </p>
+      {fix.effect === "write" && fix.undo ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <p className="m-0 text-xs text-muted-foreground">{undone ? "Taken back." : "It wrote to the app. That can be taken back."}</p>
+          {onUndo && !undone ? (
+            <Button size="sm" variant="quiet" icon="undo" loading={busy === "undo"} onClick={undo}>
+              Undo
+            </Button>
+          ) : null}
+        </div>
+      ) : fix.effect === "send" ? (
+        <p className="m-0 text-xs text-muted-foreground">It sent something, so it cannot be taken back.</p>
+      ) : null}
+      {state === "kept" ? (
+        <p role="status" className="m-0 text-xs text-muted-foreground">
+          {draft?.new_version ? `Kept as version ${draft.new_version}. It runs this way from now on.` : "Kept. It runs this way from now on."}
+        </p>
+      ) : state === "dropped" ? (
+        <p role="status" className="m-0 text-xs text-muted-foreground">
+          Dropped. The automation stays as it was.
+        </p>
+      ) : state === "proposed" || keptProp ? (
+        <p role="status" className="m-0 text-xs text-muted-foreground">
+          Proposed as a change to this automation. It waits for you to keep it.
+        </p>
+      ) : onKeep ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <Button size="sm" variant="secondary" loading={busy === "keep"} disabled={busy !== null} onClick={keep}>
+            Keep this fix for next time
+          </Button>
+          {draft && onDrop ? (
+            <Button size="sm" variant="quiet" loading={busy === "drop"} disabled={busy !== null} onClick={drop}>
+              Drop it
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+      {error ? (
+        <p role="alert" className="m-0 text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
+/**
+ * A change the agent drafted from a failed run, for the automation as it
+ * stands: why, which steps it would touch and what in them (named, never
+ * shown), and Keep or Drop. Keeping saves a new version that runs; dropping
+ * forgets it. A change drafted against an older version is stale: it can only
+ * be dropped.
+ *
+ *   proposal   { id, why, stale, patch, base_version }  (GET automations/<id> `suggestions`)
+ *   def        the definition, to name the steps
+ *   onKeep(), onDrop()   async → { ok } | { ok: false, error }
+ *   blocked    words for why Keep waits ("Save or discard your changes first")
+ */
+export function FixProposal({ proposal, def, onKeep, onDrop, blocked = null, className }) {
+  const { busy, error, press } = usePress();
+  const [done, setDone] = useState(null);
+  if (!proposal) return null;
+  const lines = changeLines(proposal.patch, def);
+
+  return (
+    <section aria-label="The agent suggests a change" className={cx("@container grid min-w-0 gap-2 rounded-lg border border-primary/50 bg-primary/10 p-3 text-sm text-foreground", className)}>
+      <h4 className="m-0 flex min-w-0 items-center gap-1.5 text-[13px] font-semibold">
+        <AgentMark />
+        <span className="min-w-0">The agent suggests a change for next time</span>
+      </h4>
+      {proposal.why ? <p className="m-0 text-[13px]">{proposal.why}</p> : null}
+      {lines.length > 0 ? (
+        <ul className="m-0 grid list-disc gap-0.5 pl-5 text-[13px]">
+          {lines.map((l) => (
+            <li key={l.stepId} className="min-w-0 break-words">
+              <span className="font-medium">{l.title}</span>: {l.what}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {done ? (
+        <p role="status" className="m-0 text-xs text-muted-foreground">
+          {done === "kept" ? "Kept. This version runs now." : "Dropped. The automation stays as it was."}
+        </p>
+      ) : (
+        <>
+          {proposal.stale ? <p className="m-0 text-xs text-muted-foreground">The automation changed after this was suggested, so it is out of date. You can drop it.</p> : blocked ? <p className="m-0 text-xs text-muted-foreground">{blocked}</p> : null}
+          <div className="flex flex-wrap items-center gap-2">
+            {onKeep ? (
+              <Button size="sm" variant="secondary" loading={busy === "keep"} disabled={busy !== null || proposal.stale || Boolean(blocked)} onClick={async () => ((await press("keep", onKeep)) === true ? setDone("kept") : null)}>
+                Keep it
+              </Button>
+            ) : null}
+            {onDrop ? (
+              <Button size="sm" variant="quiet" loading={busy === "drop"} disabled={busy !== null} onClick={async () => ((await press("drop", onDrop)) === true ? setDone("dropped") : null)}>
+                Drop it
+              </Button>
+            ) : null}
+          </div>
+        </>
+      )}
+      {error ? (
+        <p role="alert" className="m-0 text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </section>
+  );
+}

package/registry/blocks/fix-note/index.js

@@ -0,0 +1,3 @@
+// The FixNote block — `makersclaw add fix-note`. Fixed: compose it
+// through its props (README.md beside this file).
+export { FixNote, FixProposal } from "./fix-note";