makersclaw 0.8.0 → 0.8.2

package/r/automation-editor.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "automation-editor",
+  "type": "registry:block",
+  "title": "AutomationEditor",
+  "description": "The whole editor for one automation: a header with its name, a status (New, Draft, Draft ahead, Live, Off, Unsaved changes), a test chip (Not tested, Tested with the steps that would run, Last test failed), the run picker, the Live switch, Test run (a dry run: it reads real data and changes nothing) with its price on it, Keep this version and Save; a strip that says what is wrong with it, in words and by step; the node canvas (flow-editor) with an undo history; and the panel for whatever is pressed (the trigger, a step, or the automation as a whole), over the canvas on a narrow width and beside it on a wide one. It holds the working copy of the definition and knows nothing of the network: Save, Keep, Live and Test are callbacks that resolve the platform's answer. Keep and Live need a passed test; when the platform refuses for want of one, the editor offers a test or, after one more question, a deliberate skip. A draft shared with an agent is never buried: the editor remembers the version its copy began on, saves against it, and when a newer version arrives while there are edits not saved it says so (Look at it, Keep mine, or save on top of it on purpose); a line under the header says when the agent drew the draft. Delete automation is in a menu at the end of the header and asks first.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/automation-model.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/fix-note.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/flow-editor.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/step-settings.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/trigger-picker.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/automation-editor/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/automation-editor/index.js",
+      "content": "// The AutomationEditor block — `makersclaw add automation-editor`.\n// Fixed: compose it through its props (README.md beside this file).\nexport { AutomationEditor } from \"./automation-editor\";\nexport { RunInputs } from \"./run-inputs\";\n"
+    },
+    {
+      "path": "registry/blocks/automation-editor/automation-editor.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/automation-editor/automation-editor.jsx",
+      "content": "\"use client\";\n\n// The builder: one automation on the canvas, with its header, its side\n// panel and its outline view. Everything an app's Automations page needs\n// to let a member open, edit, test and switch on an automation.\n//\n// It holds the working copy of the definition (an undo stack of pure\n// edits from automation-model) and says what is wrong with it (the quick\n// check); it knows nothing of the network. The screen around it saves,\n// keeps, switches live and runs, and hands the answers back as callbacks\n// that resolve the platform's answer: `{ ok: true }` or `{ ok: false,\n// error, problems? }` (what useAutomation's save, keep, setLive and test\n// resolve), or throw an Error with a message.\n//\n// The model of saving (\"done is evidence\"):\n//   Save    a draft version; the live one keeps running as it was\n//   Test    a DRY run of the draft (or live) version: it reads real data and\n//           changes nothing (nothing is sent, nothing is written)\n//   Keep    the draft becomes the version that runs\n//   Live    the switch: it fires on its trigger, or it does not\n// A draft never goes live by itself. Keep and Live need a passed test of that\n// version (the platform refuses with `needs_test` otherwise), unless the\n// member deliberately skips it: the second, inline-confirmed press calls\n// onKeep({ skipTest: true }) / onLive(on, { skipTest: true }). Never silently,\n// and never by an agent.\n//\n// The draft is shared with the agent: it may save a newer version while a\n// member has edits that are not saved. So the editor remembers the version\n// its working copy began on (`baseVersion`) and sends THAT with every save,\n// never \"the newest I can see\": the platform answers `changed` when the draft\n// moved, and the editor says so in a strip (Look at the new one, or Keep\n// mine and save on top of it on purpose). A save never buries a newer\n// version by accident.\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button, Confirm, Menu, Switch, cx } from \"../../ui\";\nimport {\n  Chip,\n  RunPicker,\n  addStep,\n  agentDraftOf,\n  availableBefore,\n  canonicalJson,\n  changeLinesBetween,\n  checkAutomation,\n  creditsWords,\n  deleteWords,\n  duplicateStep,\n  findStep,\n  flaggedSteps,\n  issuesFor,\n  latestVersionOf,\n  newerVersionWords,\n  priceMap,\n  removeStep,\n  slotAfter,\n  slotAtEnd,\n  stepTitle,\n  updateStep,\n} from \"../automation-model\";\nimport { FixProposal } from \"../fix-note\";\nimport { FlowEditor } from \"../flow-editor\";\nimport { FlowSettings, StepSettings } from \"../step-settings\";\nimport { TriggerPicker } from \"../trigger-picker\";\nimport { RunInputs } from \"./run-inputs\";\n\nconst MAX_UNDO = 60;\n\n/** The version a successful save made: `{ ok, version }`, or the hook's `{ ok, data: { version } }`. */\nfunction versionOf(r) {\n  const n = r?.version ?? r?.data?.version;\n  return Number.isInteger(n) ? n : null;\n}\n\n/** Words for a refusal the platform sent, or a thrown error. `latest` is the\n *  newest version the platform has, when it said (a `changed` refusal does). */\nfunction said(r, fallback) {\n  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 };\n  return null;\n}\n\n/** The test chip for the version being looked at: the draft if there is one,\n *  else the live one. Null when the app gave none, or the version is the app's\n *  own shipped one (it needs no test). */\nfunction testChip(tests) {\n  if (!tests) return null;\n  const v = tests.draft ?? tests.live ?? null;\n  if (!v || v.exempt) return null;\n  if (v.passed) {\n    const n = Number(v.last?.would ?? 0);\n    return { tone: \"green\", text: n > 0 ? `Tested · ${n} ${n === 1 ? \"step\" : \"steps\"} would run` : \"Tested\" };\n  }\n  const last = v.last?.status;\n  if (last && last !== \"done\") return { tone: \"red\", text: \"Last test failed\" };\n  return { tone: \"amber\", text: \"Not tested\" };\n}\n\n/**\n *   automationId  the saved automation's id, or null for one not saved yet\n *   status        draft | on | off | needs_owner | \"new\"\n *   liveVersion, draftVersion   the numbers, or null\n *   baseline      the definition as last saved (or the starting point)\n *   versions      [{ version, kind, note, created_at }]\n *   runs          [{ id, status, created_at, is_test, credits }], newest first\n *   apps          [{ id, name }], for an action in a team automation\n *   actions       the app's declared actions, [{ name, description? }]\n *   ownedByApp    the automation belongs to an app\n *   estimate      what a run is expected to cost (GET automation's estimate)\n *   samples       { [stepId]: a real output }, for the data picker\n *   runnable      a Set of the kinds the platform runs\n *   backLabel, onBack\n *   onSave(def, { baseVersion }), onKeep(opts?), onLive(on, opts?), onTest(inputs), onOpenRun(runId)\n *                 `baseVersion` is the version the working copy began on: send it to the platform as\n *                 `expect_version`, never the newest one you can see. A save the platform refuses with\n *                 the code \"changed\" (and `latest`, if it says) draws the conflict strip. A save that\n *                 works may resolve `{ ok: true, version }` (or the hook's `{ ok: true, data: { version } }`): the editor then begins from that version.\n *                 opts is `{ skipTest: true }` ONLY after the member pressed \"Go live without a\n *                 test\" and then confirmed \"Skip the test\" in the note. Resolve like the others;\n *                 a refusal keeps its `code` (\"needs_test\" shows the note with its two buttons).\n *   tests         { live: TestView|null, draft: TestView|null } (useAutomation().tests), TestView =\n *                 { version, passed, exempt, last: { run_id, status, ended_at, credits, would } | null };\n *                 draws the test chip (Not tested · Tested · 3 steps would run · Last test failed).\n *                 Without it, or for the app's own shipped version, no chip.\n *   onReset       \"Reset to the app's version\", when it was edited from a shipped one\n *   tabs          the Flow / Runs tabs, drawn in the header\n *   suggestions   the changes the agent drafted from failed runs, waiting for a person\n *                 [{ id, why, stale, patch }] (useAutomation().suggestions)\n *   onKeepSuggestion(id), onDropSuggestion(id)   keep (a new version that runs) or drop one;\n *                 resolve the platform's answer. Without them the strip is not drawn.\n *   triggers      what can start it (useAutomations().triggers, the list door's\n *                 `triggers`): the picker offers events, an app's actions, records,\n *                 a web address and another automation. Without it: by hand and a schedule.\n *   selfKey       this automation's key (it cannot follow itself)\n *   hook          a webhook trigger's address once saved (useAutomation().hook)\n *   onRotateHook  makes (or replaces) the webhook's secret; resolves { ok, hook: { secret } }\n *   compareTo     { version, definition }: what \"What changed\" compares the agent's draft with\n *                 (the version the member kept, usually the live one). Without it, no What changed.\n *   onDelete(automation)  async: \"Delete automation\", in a menu at the end of the header (never beside Save),\n *                 after a question that says what it does: Deletes \"<name>\". Its runs stay in history.\n *                 (and, for a live one, that it is switched off). `automation` is `{ id, name, status }`.\n *                 Resolves `{ ok: true }` (the screen leaves the editor and says what followed) or\n *                 `{ ok: false, error, code? }`: the words are shown as they are. Only for a saved\n *                 automation the member may edit; without it, no menu\n *   canDelete     offer it at all (default true; hide it where the member may not)\n *   source        the automation's source (member · agent · package · legacy). An app's own job and what an\n *                 app shipped are not deleted from here: the item is disabled and points at the app's settings\n *   onFocus       `{ selected, unsaved, baseVersion }` whenever any of the three changes: the step\n *                 pressed (a step id, \"trigger\", \"flow\" or null), whether the working copy has edits\n *                 that are not saved, and the version it began on. For a pane beside the editor\n *                 (an agent) that needs to know what the member is looking at; it never re-renders it.\n *   canEdit       false: read-only (default true)\n */\nexport function AutomationEditor({\n  automationId = null,\n  status = \"new\",\n  liveVersion = null,\n  draftVersion = null,\n  baseline,\n  versions = [],\n  runs = [],\n  apps = [],\n  actions,\n  ownedByApp = false,\n  estimate = null,\n  samples = null,\n  runnable,\n  backLabel = \"Automations\",\n  onBack,\n  onSave,\n  onKeep,\n  onLive,\n  onTest,\n  tests = null,\n  onOpenRun,\n  onReset,\n  tabs,\n  suggestions = [],\n  onKeepSuggestion,\n  onDropSuggestion,\n  triggers = null,\n  selfKey = null,\n  hook = null,\n  onRotateHook,\n  compareTo = null,\n  onFocus,\n  onDelete,\n  canDelete = true,\n  source = null,\n  canEdit = true,\n  className,\n}) {\n  const [hist, setHist] = useState({ past: [], present: baseline, future: [] });\n  const def = hist.present;\n  // The version this was opened on moved (a suggestion was kept, another tab\n  // saved): if nothing here was changed since, open the new one.\n  const [seen, setSeen] = useState(baseline);\n  if (canonicalJson(seen) !== canonicalJson(baseline)) {\n    setSeen(baseline);\n    if (canonicalJson(hist.present) === canonicalJson(seen)) setHist({ past: [], present: baseline, future: [] });\n  }\n  // The version the working copy began on (`baseVersion`). It moves to the\n  // newest only while the copy is in step with the saved one: a copy with\n  // edits keeps the version it was made from, so a newer version (the agent's)\n  // is seen as newer, and a save names the base, not the newest.\n  const latest = useMemo(() => latestVersionOf({ versions, draftVersion, liveVersion }), [versions, draftVersion, liveVersion]);\n  const [begun, setBegun] = useState(latest);\n  // What the member decided about a newer version: a conflict the platform\n  // reported ({ latest }), the newest version they chose to keep theirs over,\n  // and what \"Look at\" replaced (so Undo can bring the edits, and their base, back).\n  const [conflict, setConflict] = useState(null);\n  const [keptOver, setKeptOver] = useState(null);\n  const looked = useRef(null);\n  const [showChanges, setShowChanges] = useState(false);\n  if (canonicalJson(def) === canonicalJson(baseline)) {\n    if (begun !== latest) setBegun(latest);\n    if (conflict) setConflict(null);\n  }\n  const [selected, setSelected] = useState(null);\n  const [reveal, setReveal] = useState(null);\n  const [busy, setBusy] = useState(null);\n  const [note, setNote] = useState(null);\n  const [asking, setAsking] = useState(false);\n  const [skipAsk, setSkipAsk] = useState(false);\n  const [deleting, setDeleting] = useState(false);\n\n  const commit = useCallback((next, keepSelection = true) => {\n    setHist((h) => (canonicalJson(h.present) === canonicalJson(next) ? h : { past: [...h.past, h.present].slice(-MAX_UNDO), present: next, future: [] }));\n    if (!keepSelection) setSelected(null);\n    setNote(null);\n  }, []);\n  const undo = () => {\n    if (hist.past.length === 0) return;\n    const back = hist.past[hist.past.length - 1];\n    setHist((h) => (h.past.length ? { past: h.past.slice(0, -1), present: h.past[h.past.length - 1], future: [h.present, ...h.future] } : h));\n    // Undoing \"Look at\" gives back the member's edits and the version they were made on.\n    const was = looked.current;\n    if (was && canonicalJson(back) === was.def) {\n      looked.current = null;\n      setBegun(was.begun);\n      setKeptOver(null);\n    }\n  };\n  const redo = () => setHist((h) => (h.future.length ? { past: [...h.past, h.present], present: h.future[0], future: h.future.slice(1) } : h));\n\n  const isNew = automationId === null;\n  // Something not saved yet is always a change to save.\n  const edited = useMemo(() => canonicalJson(def) !== canonicalJson(baseline), [def, baseline]);\n  const dirty = isNew || edited;\n  const issues = useMemo(() => checkAutomation(def, runnable ? { runnable } : undefined), [def, runnable]);\n  const flagged = useMemo(() => flaggedSteps(issues), [issues]);\n  const prices = useMemo(() => priceMap(estimate), [estimate]);\n  const hasLive = liveVersion !== null && liveVersion !== undefined;\n  const canKeep = !isNew && !dirty && draftVersion !== null && draftVersion !== undefined && draftVersion !== liveVersion;\n  const live = status === \"on\";\n\n  // Tell a pane beside the editor what the member is on: never re-renders the editor.\n  const focusRef = useRef(onFocus);\n  useEffect(() => {\n    focusRef.current = onFocus;\n  });\n  useEffect(() => {\n    focusRef.current?.({ selected, unsaved: edited, baseVersion: begun });\n  }, [selected, edited, begun]);\n\n  // A newer version arrived while the working copy has edits made on an older one.\n  const newerThanMine = !isNew && edited && begun !== null && latest !== null && latest > begun;\n  const sawNewer = conflict ? Math.max(latest ?? 0, conflict.latest ?? 0) : latest;\n  const strip = !isNew && edited && (conflict ? \"conflict\" : newerThanMine && keptOver !== latest ? \"behind\" : null);\n  const agentDraft = useMemo(() => (isNew ? null : agentDraftOf({ versions, draftVersion, liveVersion })), [isNew, versions, draftVersion, liveVersion]);\n  const changeLines = useMemo(() => (showChanges && compareTo?.definition ? changeLinesBetween(compareTo.definition, baseline) : []), [showChanges, compareTo, baseline]);\n\n  const inputsAsked = useMemo(() => Object.entries(def.inputs ?? {}).map(([name, spec]) => ({ name, label: spec.label })), [def.inputs]);\n\n  /* ---- editing ------------------------------------------------------- */\n\n  const insert = (slot, kind) => {\n    const r = addStep(def, slot, kind);\n    commit(r.def);\n    setSelected(r.id);\n    setReveal(r.id);\n  };\n  const addAtSelection = (kind) => {\n    const slot = (selected && selected !== \"trigger\" && selected !== \"flow\" ? slotAfter(def, selected) : null) ?? slotAtEnd(def);\n    insert(slot, kind);\n  };\n  const selectedStep = selected && selected !== \"trigger\" && selected !== \"flow\" ? findStep(def.steps, selected) : null;\n\n  /* ---- the server ---------------------------------------------------- */\n\n  // `again` says how to ask a second time, deliberately without the test, when\n  // the platform answers needs_test: { kind: \"keep\" } or { kind: \"live\", on }.\n  const run = async (kind, work, ok, again = null) => {\n    setBusy(kind);\n    setNote(null);\n    setSkipAsk(false);\n    try {\n      const r = await work();\n      const bad = said(r, \"That did not work.\");\n      if (bad && bad.code === \"changed\" && (kind === \"save\" || kind === \"test\")) {\n        // Someone (the agent, another tab) saved a newer version: the strip says so.\n        setConflict({ latest: bad.latest });\n        setKeptOver(null);\n      } else if (bad) setNote({ tone: \"bad\", text: bad.text, lines: bad.lines, code: bad.code, again: bad.code === \"needs_test\" ? again : null });\n      else {\n        if (kind === \"save\") {\n          setConflict(null);\n          if (versionOf(r) !== null) setBegun(versionOf(r));\n        }\n        if (ok) setNote({ tone: \"ok\", text: ok });\n      }\n    } catch (e) {\n      if (e?.code === \"changed\" && (kind === \"save\" || kind === \"test\")) {\n        setConflict({ latest: Number.isInteger(e.latest) ? e.latest : null });\n        setKeptOver(null);\n      } else setNote({ tone: \"bad\", text: e?.message || \"That did not work.\", lines: Array.isArray(e?.problems) ? e.problems : [] });\n    } finally {\n      setBusy(null);\n    }\n  };\n\n  const save = () => run(\"save\", () => onSave?.(def, { baseVersion: begun }), \"Saved as a draft.\");\n  // \"Save on top of vN\": the member's deliberate press, naming the newest version as the base.\n  const saveOnTop = () => run(\"save\", () => onSave?.(def, { baseVersion: sawNewer ?? begun }), \"Saved as a draft.\");\n  // Replace the working copy with the saved one, as one step Undo can take back.\n  const lookAtNewer = () => {\n    looked.current = { def: canonicalJson(def), begun };\n    commit(baseline, false);\n    setBegun(latest);\n    setConflict(null);\n    setKeptOver(null);\n    setShowChanges(false);\n  };\n  const test = async (values) => {\n    setAsking(false);\n    await run(\"test\", async () => {\n      if (dirty) {\n        const r = await onSave?.(def, { baseVersion: begun });\n        if (r && r.ok === false) return r;\n        if (versionOf(r) !== null) setBegun(versionOf(r));\n      }\n      return onTest?.(values);\n    });\n  };\n  const goLive = (on, opts) => run(\"live\", () => (opts ? onLive?.(on, opts) : onLive?.(on)), undefined, { kind: \"live\", on });\n  const keep = (opts) => run(\"keep\", () => (opts ? onKeep?.(opts) : onKeep?.()), \"Kept. This version runs now.\", { kind: \"keep\" });\n  // The member's deliberate second press: the same callback again, with the skip.\n  const skipTheTest = () => {\n    const again = note?.again;\n    if (!again) return;\n    if (again.kind === \"keep\") void keep({ skipTest: true });\n    else void goLive(again.on, { skipTest: true });\n  };\n  // The member said yes to the question: the platform answers, and a refusal is shown as it is.\n  const confirmDelete = () => {\n    setDeleting(false);\n    return run(\"delete\", () => onDelete?.({ id: automationId, name: baseline.name, status }));\n  };\n  const pressTest = () => {\n    if (Object.keys(def.inputs ?? {}).length > 0) setAsking(true);\n    else void test({});\n  };\n\n  const onKeyDown = (e) => {\n    if (e.target.closest?.(\"input, textarea, select, [contenteditable]\")) return;\n    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"z\") {\n      e.preventDefault();\n      if (e.shiftKey) redo();\n      else undo();\n    } else if ((e.key === \"Delete\" || e.key === \"Backspace\") && selectedStep && canEdit) {\n      e.preventDefault();\n      commit(removeStep(def, selectedStep.id), false);\n    }\n  };\n\n  /* ---- the panel ----------------------------------------------------- */\n\n  let panel = null;\n  if (selected === \"trigger\") {\n    panel = (\n      <TriggerPicker\n        trigger={def.trigger}\n        readOnly={!canEdit}\n        catalog={triggers}\n        ownedByApp={ownedByApp}\n        selfKey={selfKey ?? def.key ?? null}\n        hook={hook}\n        onRotateHook={onRotateHook}\n        onChange={(trigger) => commit({ ...def, trigger })}\n        onClose={() => setSelected(null)}\n      />\n    );\n  } else if (selected === \"flow\") {\n    panel = <FlowSettings def={def} readOnly={!canEdit} versions={versions} liveVersion={liveVersion} onChange={commit} onClose={() => setSelected(null)} onReset={onReset} />;\n  } else if (selectedStep) {\n    panel = (\n      <StepSettings\n        key={selectedStep.id}\n        step={selectedStep}\n        available={{ ...availableBefore(def, selectedStep.id, stepTitle), inputs: inputsAsked }}\n        samples={samples}\n        apps={apps}\n        actions={actions}\n        ownedByApp={ownedByApp}\n        problems={issuesFor(issues, selectedStep.id)}\n        readOnly={!canEdit}\n        onChange={(patch) => commit(updateStep(def, selectedStep.id, patch))}\n        onRemove={() => commit(removeStep(def, selectedStep.id), false)}\n        onDuplicate={() => {\n          const d = duplicateStep(def, selectedStep.id);\n          if (d) {\n            commit(d.def);\n            setSelected(d.id);\n            setReveal(d.id);\n          }\n        }}\n        onClose={() => setSelected(null)}\n      />\n    );\n  }\n\n  const chip = isNew\n    ? { tone: \"grey\", text: \"New\" }\n    : !hasLive\n      ? { tone: \"amber\", text: \"Draft\" }\n      : canKeep\n        ? { tone: \"amber\", text: \"Draft ahead\" }\n        : live\n          ? { tone: \"green\", text: \"Live\" }\n          : { tone: \"grey\", text: \"Off\" };\n\n  const cost = estimate && !dirty ? creditsWords(estimate.credits) : null;\n  const testTitle = isNew\n    ? \"Create it first\"\n    : issues.length\n      ? \"Fix what is marked first\"\n      : estimate\n        ? `Reads your real data; nothing is sent or changed. About ${creditsWords(estimate.credits)}, at most ${creditsWords(estimate.credits_max)}.`\n        : \"Reads your real data; nothing is sent or changed\";\n  const tested = testChip(tests);\n\n  return (\n    <div onKeyDown={onKeyDown} className={cx(\"@container flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground\", className)}>\n      <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\">\n        {onBack ? (\n          <Button size=\"sm\" variant=\"quiet\" icon=\"arrow-left\" onClick={onBack}>\n            {backLabel}\n          </Button>\n        ) : null}\n        <label className=\"min-w-[10rem] max-w-md flex-1\">\n          <span className=\"sr-only\">Name</span>\n          <input\n            value={def.name}\n            maxLength={120}\n            placeholder=\"Name this automation\"\n            readOnly={!canEdit}\n            onChange={(e) => commit({ ...def, name: e.target.value })}\n            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\"\n          />\n        </label>\n        <Chip tone={edited && !isNew ? \"amber\" : chip.tone}>{edited && !isNew ? \"Unsaved changes\" : chip.text}</Chip>\n        {tested ? <Chip tone={tested.tone}>{tested.text}</Chip> : null}\n        {tabs}\n        <span className=\"ml-auto\" />\n        {!isNew && runs.length > 0 ? <RunPicker runs={runs} onPick={onOpenRun} /> : null}\n        {canEdit ? (\n          <>\n            <span title={hasLive ? undefined : \"Keep a version first\"}>\n              <Switch checked={live} disabled={!hasLive || busy !== null || dirty} label=\"Live\" onChange={(e) => void goLive(e.target.checked)} />\n            </span>\n            <Button size=\"sm\" variant=\"secondary\" icon=\"play\" disabled={isNew || busy !== null || issues.length > 0 || def.steps.length === 0} onClick={pressTest} title={testTitle}>\n              Test run\n              {cost ? <span className=\"font-normal text-muted-foreground\">about {cost}</span> : null}\n            </Button>\n            {canKeep ? (\n              <Button size=\"sm\" variant=\"secondary\" disabled={busy !== null} onClick={() => void keep()}>\n                Keep this version\n              </Button>\n            ) : null}\n            <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}>\n              {isNew ? \"Create\" : \"Save\"}\n            </Button>\n            {!isNew && onDelete && canDelete ? (\n              <Menu\n                label=\"More\"\n                items={\n                  source === \"legacy\" || source === \"package\"\n                    ? [{ label: \"Delete automation\", icon: \"trash\", disabled: true, description: \"Comes with the app. Switch it off, or remove it in the app's settings.\" }]\n                    : [{ label: \"Delete automation\", icon: \"trash\", tone: \"danger\", onSelect: () => setDeleting(true) }]\n                }\n              />\n            ) : null}\n          </>\n        ) : null}\n      </header>\n\n      {agentDraft ? (\n        <div role=\"status\" className=\"border-b border-border bg-muted px-3 py-1.5 text-[13px] text-muted-foreground\">\n          <span>\n            Drawn by the agent{agentDraft.note ? <> · from: {agentDraft.note}</> : null}\n          </span>\n          {compareTo?.definition ? (\n            <>\n              {\" · \"}\n              <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\">\n                What changed\n              </button>\n            </>\n          ) : null}\n          {showChanges && compareTo?.definition ? (\n            <div className=\"mt-1\">\n              <p className=\"m-0 text-xs\">Compared with {compareTo.version ? `v${compareTo.version}` : \"the version you kept\"}:</p>\n              {changeLines.length ? (\n                <ul className=\"m-0 mt-0.5 list-disc pl-5\">\n                  {changeLines.map((l) => (\n                    <li key={l}>{l}</li>\n                  ))}\n                </ul>\n              ) : (\n                <p className=\"m-0 mt-0.5\">Nothing in the steps differs.</p>\n              )}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n\n      {strip && canEdit ? (\n        <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\">\n          <span className=\"min-w-0 flex-1\">{newerVersionWords(sawNewer, versions)}</span>\n          {strip === \"conflict\" ? (\n            <Button size=\"sm\" variant=\"secondary\" disabled={busy !== null} onClick={() => void saveOnTop()}>\n              Save on top of v{sawNewer}\n            </Button>\n          ) : null}\n          <Button size=\"sm\" variant=\"secondary\" disabled={busy !== null} onClick={lookAtNewer}>\n            Look at v{sawNewer}\n          </Button>\n          {strip === \"behind\" ? (\n            <Button size=\"sm\" variant=\"quiet\" onClick={() => setKeptOver(latest)}>\n              Keep mine\n            </Button>\n          ) : null}\n        </div>\n      ) : null}\n\n      {note || (issues.length > 0 && canEdit) ? (\n        <div\n          role={note?.tone === \"bad\" ? \"alert\" : \"status\"}\n          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\")}\n        >\n          {note ? (\n            <>\n              <span>{note.text}</span>\n              {note.code === \"needs_test\" && note.again && canEdit ? (\n                skipAsk ? (\n                  <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n                    <span>Skip the test? It will run for real the first time it starts.</span>\n                    <Button size=\"sm\" variant=\"secondary\" disabled={busy !== null} onClick={skipTheTest}>\n                      Skip the test\n                    </Button>\n                    <Button size=\"sm\" variant=\"quiet\" onClick={() => setSkipAsk(false)}>\n                      Cancel\n                    </Button>\n                  </div>\n                ) : (\n                  <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n                    <Button size=\"sm\" variant=\"secondary\" icon=\"play\" disabled={busy !== null || isNew || issues.length > 0 || def.steps.length === 0} onClick={pressTest}>\n                      Run a test\n                    </Button>\n                    <Button size=\"sm\" variant=\"quiet\" disabled={busy !== null} onClick={() => setSkipAsk(true)}>\n                      {note.again.kind === \"keep\" ? \"Keep without a test\" : \"Go live without a test\"}\n                    </Button>\n                  </div>\n                )\n              ) : null}\n              {note.lines?.length ? (\n                <ul className=\"m-0 mt-1 list-disc pl-5 text-[13px]\">\n                  {note.lines.slice(0, 3).map((l) => (\n                    <li key={l}>{l}</li>\n                  ))}\n                </ul>\n              ) : null}\n            </>\n          ) : (\n            <>\n              <span>{issues.length === 1 ? \"One thing to fix before it can be saved.\" : `${issues.length} things to fix before it can be saved.`}</span>\n              <ul className=\"m-0 mt-1 list-disc pl-5 text-[13px]\">\n                {issues.slice(0, 3).map((i) => (\n                  <li key={i.path + i.message}>\n                    {i.stepId ? (\n                      <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\">\n                        {i.message}\n                      </button>\n                    ) : (\n                      i.message\n                    )}\n                  </li>\n                ))}\n              </ul>\n            </>\n          )}\n        </div>\n      ) : null}\n\n      {canEdit && suggestions.length > 0 && (onKeepSuggestion || onDropSuggestion) ? (\n        <div className=\"grid max-h-[40%] gap-2 overflow-auto border-b border-border px-3 py-2\">\n          {suggestions.slice(0, 2).map((s) => (\n            <FixProposal\n              key={s.id}\n              proposal={s}\n              def={def}\n              blocked={dirty && !isNew ? \"Save or undo your changes first, so what is kept is what you see.\" : null}\n              onKeep={onKeepSuggestion ? () => onKeepSuggestion(s.id) : undefined}\n              onDrop={onDropSuggestion ? () => onDropSuggestion(s.id) : undefined}\n            />\n          ))}\n          {suggestions.length > 2 ? <p className=\"m-0 text-xs text-muted-foreground\">{suggestions.length - 2} more suggestions after these.</p> : null}\n        </div>\n      ) : null}\n\n      <div className=\"relative flex min-h-0 flex-1\">\n        <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n          <FlowEditor\n            def={def}\n            selectedId={selected}\n            onSelect={setSelected}\n            editable={canEdit}\n            onInsert={insert}\n            onAddAtSelection={addAtSelection}\n            flagged={flagged}\n            prices={prices}\n            fitKey={automationId ?? \"new\"}\n            revealId={reveal}\n            runnable={runnable}\n            undo={canEdit ? { canUndo: hist.past.length > 0, canRedo: hist.future.length > 0, onUndo: undo, onRedo: redo } : null}\n            onOpenFlow={() => setSelected(\"flow\")}\n          />\n        </div>\n        {panel ? (\n          <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>\n        ) : null}\n      </div>\n\n      <Confirm\n        open={deleting}\n        onClose={() => setDeleting(false)}\n        onConfirm={() => void confirmDelete()}\n        title=\"Delete this automation?\"\n        body={deleteWords(baseline.name, status)}\n        confirmLabel=\"Delete\"\n        tone=\"danger\"\n      />\n\n      {asking ? <RunInputs open inputs={def.inputs} onCancel={() => setAsking(false)} onRun={(v) => void test(v)} /> : null}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/automation-editor/run-inputs.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/automation-editor/run-inputs.jsx",
+      "content": "\"use client\";\n\n// The small question a manual run asks first: one field for each input the\n// automation declares, with its default. The values are typed to the\n// input's kind before they go (the platform checks them again).\n\nimport { useId, useState } from \"react\";\nimport { Button, Checkbox, Field, Input, Select, Sheet } from \"../../ui\";\n\nfunction initial(spec) {\n  if (spec.type === \"boolean\") return spec.default === true;\n  return spec.default === undefined ? \"\" : String(spec.default);\n}\n\n/**\n *   open, inputs   { name: { type: string|number|boolean|date, label, default, required, options } }\n *   onRun(values), onCancel()\n */\nexport function RunInputs({ open, inputs, onRun, onCancel }) {\n  const names = Object.keys(inputs ?? {});\n  const [values, setValues] = useState(() => Object.fromEntries(names.map((n) => [n, initial(inputs[n])])));\n  const id = useId();\n  const missing = names.filter((n) => inputs[n].required && inputs[n].type !== \"boolean\" && String(values[n] ?? \"\").trim() === \"\");\n\n  const submit = () => {\n    const out = {};\n    for (const n of names) {\n      const spec = inputs[n];\n      const v = values[n];\n      if (spec.type === \"boolean\") out[n] = v === true;\n      else if (String(v ?? \"\").trim() === \"\") continue;\n      else out[n] = spec.type === \"number\" ? Number(v) : String(v);\n    }\n    onRun(out);\n  };\n\n  return (\n    <Sheet\n      open={open}\n      onClose={onCancel}\n      side=\"center\"\n      title=\"Test run\"\n      footer={\n        <>\n          <Button variant=\"quiet\" onClick={onCancel}>\n            Cancel\n          </Button>\n          <Button variant=\"primary\" disabled={missing.length > 0} onClick={submit}>\n            Run it\n          </Button>\n        </>\n      }\n    >\n      <form\n        className=\"grid gap-4\"\n        onSubmit={(e) => {\n          e.preventDefault();\n          if (!missing.length) submit();\n        }}\n      >\n        <p className=\"m-0 text-sm text-muted-foreground\">It runs once with real data. Nothing is sent or changed by a step marked as a pencil draft.</p>\n        {names.map((n, i) => {\n          const spec = inputs[n];\n          const fid = `${id}-${i}`;\n          const label = `${spec.label || n}${spec.required ? \" *\" : \"\"}`;\n          if (spec.type === \"boolean\") {\n            return <Checkbox key={n} id={fid} label={label} checked={values[n] === true} onChange={(e) => setValues({ ...values, [n]: e.target.checked })} />;\n          }\n          return (\n            <Field key={n} id={fid} label={label}>\n              {spec.options?.length ? (\n                <Select id={fid} value={String(values[n] ?? \"\")} options={[{ value: \"\", label: \"\" }, ...spec.options.map((o) => ({ value: o, label: o }))]} onChange={(e) => setValues({ ...values, [n]: e.target.value })} />\n              ) : (\n                <Input id={fid} type={spec.type === \"number\" ? \"number\" : spec.type === \"date\" ? \"date\" : \"text\"} value={String(values[n] ?? \"\")} onChange={(e) => setValues({ ...values, [n]: e.target.value })} />\n              )}\n            </Field>\n          );\n        })}\n      </form>\n    </Sheet>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/automation-editor/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/automation-editor/README.md",
+      "content": "# AutomationEditor\n\nThe whole editor for one automation, for an app's Automations page. It\nanswers \"how do I open, edit, test and switch on my app's automations?\"\ninside the app, in the app's theme.\n\n- **The header** — Back, the name (editable), a status (New · Draft · Draft\n  ahead · Live · Off · Unsaved changes), the Flow / Runs tabs you hand it,\n  a **test chip** (see below), the run picker, the **Live** switch, **Test\n  run** with its price on it (\"about 3 cr\"), **Keep this version** and\n  **Save**.\n- **A strip** that says what is wrong with it, in words and by step, and\n  what the platform refused (with its lines).\n- **The canvas** (`flow-editor`) with undo and redo (Ctrl or ⌘ + Z), Delete\n  on the selected step, and a **list view** of the same flow.\n- **The panel** for whatever is pressed: the trigger (`trigger-picker`), a\n  step (`step-settings`) or the automation as a whole (`FlowSettings`).\n  Beside the canvas on a wide width; over it, from the bottom, on a narrow\n  one.\n- **Test run** asks the questions a manual run needs first (`RunInputs`).\n\nHow saving works (nothing here is hidden from a member):\n\n1. **Save** makes a draft version; the live one keeps running as it was.\n2. **Test run** is a dry run of the draft (or the live one): it reads your\n   real data and changes nothing (nothing is sent, nothing is written). Its\n   run opens as a test, with what each step would have done.\n3. **Keep this version** makes the draft the one that runs.\n4. **Live** is the switch: it fires on its trigger, or it does not.\n\nKeep and Live need a passed test of that version. Without one the platform\nrefuses (`needs_test`) and the editor shows its words with two buttons:\n**Run a test** (the same as Test run) and **Go live without a test** (**Keep\nwithout a test** for Keep). The second asks once more, inline: \"Skip the\ntest? It will run for real the first time it starts.\" with **Skip the test**\nand **Cancel**; only then does it call `onKeep({ skipTest: true })` or\n`onLive(on, { skipTest: true })` again. The skip is the member's own\ndeliberate second press (some automations cannot be tested meaningfully);\nan agent never has it, and it is never silent.\n\nThe **test chip** sits beside the status for the version being looked at\n(the draft if there is one, else the live one): \"Not tested\" (amber),\n\"Tested · 3 steps would run\" (green), \"Last test failed\" (red). Nothing\nwithout `tests`, or for the app's own shipped version (`exempt`).\n\nA draft never goes live by itself. An automation shipped with the app is\nedited the same way: a member's edit is a new version, the shipped one\nstays on file, and **Reset to the app's version** is one press (`onReset`).\n\n```jsx\nimport { AutomationEditor } from \"../components/blocks/automation-editor\";   // a Makersclaw app\nimport { AutomationEditor } from \"@/components/makersclaw/blocks/automation-editor\";   // a shadcn project\n```\n\n`makersclaw add automation-editor` lays `flow-editor`, `step-settings`,\n`trigger-picker`, `fix-note` and `automation-model` with it. A client component. It\nfills its parent's height (give it a parent with one) and its own width\ndecides its layout: the panel sits beside the canvas from about 768 px.\n\n## Props\n\n- `automationId` — the saved id, or `null` for one not saved yet (the\n  button says Create).\n- `status` — `draft` · `on` · `off` · `needs_owner` · `\"new\"`.\n  `liveVersion`, `draftVersion` — the numbers, or null.\n- `baseline` — the definition as last saved (or the starting point). Key the\n  builder by id, never by version: when the saved version moves (a kept\n  suggestion, an agent's draft, another tab) an editor with nothing edited\n  opens the new one by itself, and one with edits keeps them and says so\n  (the strip below). Keying by version would throw the edits away.\n- `versions`, `runs` (for the picker), `apps`, `actions` (the app's declared\n  actions, for the action step), `ownedByApp`.\n- `estimate` — what a run is expected to cost (`useAutomation().estimate`):\n  paid steps wear a price, Test run says what it will spend.\n- `samples` — `{ [stepId]: a real output }` for the data picker.\n- `runnable` — a `Set` of the kinds the platform runs.\n- `backLabel`, `onBack`, `tabs`, `canEdit` (false: read-only).\n- `onSave(def, { baseVersion })`, `onKeep(opts?)`, `onLive(on, opts?)`, `onTest(inputs)` — each\n  resolves the platform's answer (`{ ok: true }` or `{ ok: false, error,\n  code?, problems }`, which is what `useAutomation`'s `save`, `keep`,\n  `setLive` and `test` resolve) or throws an Error. The builder shows the\n  words and the lines, and keeps the `code`. `opts` is `{ skipTest: true }`\n  only after the member's confirmed skip (above); otherwise they are called\n  as before, with none. Pass `keep` and `setLive` straight through. `onSave`'s\n  second argument is `{ baseVersion }`: the version the working copy began\n  on. **Send it to the platform as `expect_version`, never the newest\n  version you can see** (`useAutomation().save(def, { baseVersion })` does).\n  A refusal with the code `changed` (and `latest`, when it says) draws the\n  conflict strip (next section). A save that works may resolve `{ ok: true,\n  version }` (or the hook's `{ ok: true, data: { version } }`): the editor\n  then begins from that version.\n- `onFocus({ selected, unsaved, baseVersion })` — called whenever any of the\n  three changes: the pressed step (a step id, `\"trigger\"`, `\"flow\"` or\n  `null`), whether the working copy has edits that are not saved, and the\n  version it began on. For a pane beside the editor (the agent's) that\n  must know what the member is looking at. It never re-renders the editor:\n  keep the last value in a ref.\n- `compareTo` — `{ version, definition }`: what \"What changed\" compares an\n  agent's draft with (the version the member kept, usually the live one).\n  Without it the agent's line has no What changed.\n- `tests` — `{ live, draft }`, each a `TestView` `{ version, passed,\n  exempt, last: { run_id, status, ended_at, credits, would } | null }`\n  (`useAutomation().tests`): draws the test chip. Optional.\n- `suggestions` — the changes the agent drafted from failed runs, waiting\n  for a person: `[{ id, why, stale, patch }]` (`useAutomation().suggestions`).\n  `onKeepSuggestion(id)` keeps one (a new version that runs; refused with\n  `stale` when the automation moved on) and `onDropSuggestion(id)` forgets\n  it. They sit in a strip above the canvas; Keep waits while the working\n  copy is unsaved. Without the callbacks, or when `canEdit` is false, the\n  strip is not drawn. When the saved version moves under an editor with no\n  edits of its own, it opens the new one.\n- `triggers` — what can start an automation here (`useAutomations().triggers`):\n  the trigger panel offers events, an app's actions, records, a web address\n  and another automation, as the platform runs them. Without it: by hand and\n  a schedule. `selfKey` is this automation's key (it cannot follow itself,\n  defaults to the definition's), `hook` its webhook address once it is saved\n  (`useAutomation().hook`) and `onRotateHook` makes or replaces the webhook's\n  secret (`useAutomation().rotateHook`; the secret is shown once).\n- `onDelete(automation)` — async: **Delete automation**, in a menu at the end\n  of the header (never a button beside Save), for a saved automation the\n  member may edit. It asks first, in words that say what it does: `Deletes\n  \"<name>\". Its runs stay in history.` (and, for one that is on, that\n  deleting also switches it off). `automation` is `{ id, name, status }`.\n  Resolves `{ ok: true }` (the screen leaves the editor and says what\n  followed: an Undo, the automations that followed this one) or `{ ok:\n  false, error, code? }`, whose words are shown as they are (it is running,\n  only the owner or an admin may delete it…). `canDelete` hides the item\n  (default true). `source` is the automation's source: an app's own job\n  (`legacy`) and what an app shipped (`package`) get the item disabled, with\n  a line pointing at the app's settings.\n- `onOpenRun(runId)`, `onReset()`.\n\n## Shared with the agent\n\nThe draft is shared: an agent (or another tab) may save a newer version while\na member has edits that are not saved. The editor never lets a save bury it.\n\n- **The base.** The editor remembers the version its working copy began on\n  and sends that with every save. Nothing edited: it follows the saved\n  version, so a draft the agent saves simply appears on the canvas.\n- **Edits not saved, a newer version arrives:** a strip says \"The agent drew\n  v5 from your last save. You have changes that are not saved.\" (or \"Version 5\n  was saved after you opened this…\" when a person saved it). **Look at v5**\n  replaces the working copy with it as one undoable step (Undo brings the\n  edits and the version they were made on back). **Keep mine** dismisses the\n  strip.\n- **A save the platform refuses as `changed`** (after Keep mine, or from\n  another tab) draws the same strip with **Save on top of v5**, the member's\n  deliberate press that names v5 as the base, and Look at v5.\n- **While the draft is the agent's** (its version is `kind: \"agent\"` and not\n  yet kept), a line under the header says \"Drawn by the agent · from: <its\n  note> · What changed\". What changed lists, in plain words, the steps added,\n  removed and changed against `compareTo` (`changeLinesBetween` in\n  automation-model).\n\n## Hooks (lib/hooks.js)\n\n`useAutomation(id)` → `{ automation, live, draft, definition, versions,\nestimate, tests, runs, suggestions, keepSuggestion(id), dropSuggestion(id),\nbusy, save(def), keep({ skipTest }?), setLive(on, { skipTest }?),\ntest({ inputs, sample, dry }?), loading, error, code, unavailable, reload }`.\n`test` is a dry run unless you pass `dry: false`. `definition` is the draft if\nthere is one, else the live one: what the builder opens. A save names the\nversion it was made against, so two people editing at once get \"changed\"\nrather than overwriting each other.\n\n## Who may do what\n\nAny member who opens the app edits and runs its automations (roles come\nlater, decided in one place on the platform). A step's input and output are\nshown only to the automation's owner, the admins and whoever started the\nrun; the others see status and the report. The platform refuses what a\nmember may not do; a hidden button is never the guard.\n\n## Never\n\n- Never a draft that goes live by itself, or a switch that is on without a\n  version kept.\n- Never an approval step: an automation has none. When a yes is truly\n  needed it goes to the automation's owner, on the desk.\n- Never a step the platform cannot run without saying so: it says \"soon\"\n  and the save waits.\n\n## Example\n\nThe whole Automations page of an app: the list, an automation, a run.\n\n```jsx\n\"use client\";\nimport { useRouter, useSearchParams } from \"next/navigation\";\nimport { useAutomation, useAutomationRun, useAutomations } from \"../lib/hooks\";\nimport { AutomationList } from \"../components/blocks/automation-list\";\nimport { AutomationEditor } from \"../components/blocks/automation-editor\";\nimport { RunView, RunsList } from \"../components/blocks/run-view\";\nimport { STARTING_POINTS, blankAutomation, keyFromName } from \"../components/blocks/automation-model\";\n\nfunction Tabs({ tab, onTab }) {\n  return (\n    <div role=\"tablist\" className=\"flex gap-1\">\n      {[[\"flow\", \"Flow\"], [\"runs\", \"Runs\"]].map(([id, label]) => (\n        <button key={id} type=\"button\" role=\"tab\" aria-selected={tab === id} onClick={() => onTab(id)} className={tab === id ? \"rounded-md bg-accent px-3 py-1 text-sm font-medium\" : \"rounded-md px-3 py-1 text-sm text-muted-foreground\"}>\n          {label}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nfunction One({ id, runId, tab, go, triggers }) {\n  const a = useAutomation(id);\n  const run = useAutomationRun(runId);\n  if (a.unavailable) return <p className=\"p-4 text-sm\">Automations are not set up here yet.</p>;\n  if (!a.automation || !a.definition) return <p className=\"p-4 text-sm text-muted-foreground\">Opening…</p>;\n  const tabs = <Tabs tab={tab} onTab={(t) => go({ automation: id, tab: t })} />;\n  if (runId && run.detail) {\n    return <RunView def={run.definition ?? a.definition} detail={run.detail} runs={a.runs} tz={a.automation.tz} tabs={tabs} name={a.automation.name} onBack={() => go({ automation: id })} onPickRun={(r) => go({ automation: id, run: r })} onRunAgain={async () => { const r = await a.test({ dry: run.run?.dry === true }); if (r.ok) go({ automation: id, run: r.data.run_id }); }} onControl={run.control} controlBusy={run.busy} onKeepFix={run.keepFix} onDropFix={run.dropFix} />;\n  }\n  if (tab === \"runs\") return <RunsList runs={a.runs} tz={a.automation.tz} onOpen={(r) => go({ automation: id, run: r })} />;\n  return (\n    <AutomationEditor\n      key={id}\n      automationId={id}\n      status={a.automation.status}\n      liveVersion={a.automation.live_version}\n      draftVersion={a.automation.draft_version}\n      baseline={a.definition}\n      versions={a.versions}\n      runs={a.runs}\n      estimate={a.estimate}\n      ownedByApp\n      tabs={tabs}\n      onBack={() => go({})}\n      onSave={a.save}\n      onKeep={a.keep}\n      onLive={a.setLive}\n      tests={a.tests}\n      onTest={async (inputs) => { const r = await a.test({ inputs }); if (r.ok) go({ automation: id, run: r.data.run_id }); return r; }}\n      onOpenRun={(r) => go({ automation: id, run: r })}\n      suggestions={a.suggestions}\n      onKeepSuggestion={a.keepSuggestion}\n      onDropSuggestion={a.dropSuggestion}\n      triggers={triggers}\n      selfKey={a.automation.key}\n      hook={a.hook}\n      onRotateHook={a.rotateHook}\n    />\n  );\n}\n\n// A new one is not saved until Create: the platform wants a first step.\nfunction NewOne({ start, automations, create, go, triggers }) {\n  const taken = new Set(automations.map((a) => a.key));\n  const picked = STARTING_POINTS.find((s) => s.id === start);\n  return (\n    <AutomationEditor\n      key=\"new\"\n      automationId={null}\n      status=\"new\"\n      baseline={picked ? picked.build(taken) : blankAutomation(\"\", keyFromName(\"New automation\", taken))}\n      ownedByApp\n      triggers={triggers}\n      onBack={() => go({})}\n      onSave={async (def) => {\n        const r = await create({ ...def, key: keyFromName(def.name, taken) });\n        if (r.ok) go({ automation: r.data.id });\n        return r;\n      }}\n    />\n  );\n}\n\nexport default function Automations() {\n  const router = useRouter();\n  const q = useSearchParams();\n  const go = (p) => router.push(`?${new URLSearchParams(p)}`);\n  const { automations, triggers, setStatus, create, unavailable } = useAutomations();\n  const id = q.get(\"automation\");\n  if (id === \"new\") return <div className=\"flex h-[640px] flex-col\"><NewOne start={q.get(\"start\")} automations={automations} create={create} go={go} triggers={triggers} /></div>;\n  if (id) return <div className=\"flex h-[640px] flex-col\"><One id={id} runId={q.get(\"run\")} tab={q.get(\"tab\") ?? \"flow\"} go={go} triggers={triggers} /></div>;\n  if (unavailable) return <p className=\"p-4 text-sm\">Automations are not set up here yet.</p>;\n  return (\n    <AutomationList\n      rows={automations}\n      grouped={false}\n      onOpen={(i) => go({ automation: i })}\n      onToggle={async (row, on) => { const r = await setStatus(row.id, on); if (!r.ok) throw new Error(r.error); }}\n      onNew={(start) => go({ automation: \"new\", ...(start ? { start: start.id } : {}) })}\n    />\n  );\n}\n```\n"
+    }
+  ],
+  "categories": [
+    "automation",
+    "workflow",
+    "builder",
+    "editor",
+    "canvas",
+    "save",
+    "test run",
+    "keep",
+    "live",
+    "draft",
+    "undo",
+    "n8n",
+    "make",
+    "zapier",
+    "page"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/automation-editor. Import: import { AutomationEditor, RunInputs } from \"@/components/makersclaw/blocks/automation-editor\". Props and an example: components/makersclaw/blocks/automation-editor/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.8.2",
+      "useWhen": "A member opens, edits, tests and switches on an automation inside an app. Pair it with automation-list (the rows) and run-view (a run), and the useAutomations / useAutomation / useAutomationRun hooks (lib/hooks.js)."
+    }
+  }
+}

package/r/automation-list.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "automation-list",
+  "type": "registry:block",
+  "title": "AutomationList",
+  "description": "An app's automations as rows, each a WHOLE row you press to open: what it is called, when it runs (in words, in the automation's own time zone), how its last run went as a dot and a word, when the next is due, what the last one cost, and an on/off switch that keeps its own press. A line above counts what is on, what failed and what waits for its owner; a search box; grouping into Team and each app when asked. With none yet it is the first-run screen: a few ready-made starting points. StartingPoints is the picker New automation opens. With onDescribe it opens with \"Describe it\": a sentence in a box that the platform turns into a draft; the platform's own starting points say what they need and cost. Each row has a menu with Delete automation, which asks first, says what it does and leaves the runs in history.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/automation-model.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/automation-list/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/automation-list/index.js",
+      "content": "// The AutomationList block — `makersclaw add automation-list`. Fixed:\n// compose it through its props (README.md beside this file).\nexport { AutomationList, StartingPoints } from \"./automation-list\";\n"
+    },
+    {
+      "path": "registry/blocks/automation-list/automation-list.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/automation-list/automation-list.jsx",
+      "content": "\"use client\";\n\n// The list: every automation, each a WHOLE row you press to open. A row\n// says what it does, when it runs, how its last run went, when the next is\n// due (in the automation's own zone) and what the last one cost, and\n// carries its on and off switch. The switch and the row keep their own\n// press: the row is a stretched button under the switch.\n//\n// With none yet, the screen is the starting points: a few ready-made flows\n// and a \"New automation\" button. With `onDescribe` it also opens with\n// \"Describe it\": a sentence in a box, and the platform drafts the automation\n// for the member to read, test and switch on. Props in, callbacks out; it\n// formats nothing it was not given a clock for (`now`), and reads no door.\n\nimport { useMemo, useRef, useState } from \"react\";\nimport { Button, Confirm, Icon, Menu, Sheet, Switch, cx } from \"../../ui\";\nimport { Dot, Glyph, STARTING_POINTS, agoWords, clockWords, creditsWords, deleteWords, healthOf, originWords, startsFromPlatform, summaryOf, triggerWords } from \"../automation-model\";\n\nconst DESCRIBE_PRICE = \"1 call · about 1 cr\";\nconst DESCRIBE_CHIPS = [\"Every Monday, mail me…\", \"When a deal is won, tell…\", \"When a message arrives, sort it…\"];\n\n/** Starting points as the card draws them: the app's own (`build`) as they are,\n *  the platform's raw ones (`definition`) turned into the same shape. */\nfunction ready(starts) {\n  const out = [];\n  for (const s of starts ?? []) {\n    if (s && typeof s.build === \"function\") out.push(s);\n    else if (s && s.definition) out.push(...startsFromPlatform([s]));\n  }\n  return out;\n}\n\n/** \"needs payments, a mailbox · a model writes three lines · about 6 cr\" (or \"free\"). */\nfunction startLine(s) {\n  const n = Number(s.price?.credits ?? 0);\n  const price = n > 0 ? `about ${creditsWords(n)}${s.price?.per === \"each\" ? \" each\" : \"\"}` : \"free\";\n  return [s.needs ? `needs ${s.needs}` : null, s.ai || null, price].filter(Boolean).join(\" · \");\n}\n\n/** \"Describe it\": say what it should do in a sentence; the platform drafts it.\n *  On success the new automation opens; a question is listed under the box. */\nfunction DescribeIt({ onDescribe, onOpen, price, chips, className }) {\n  const [text, setText] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const [said, setSaid] = useState(null);\n  const box = useRef(null);\n  const draft = async () => {\n    const ask = text.trim();\n    if (!ask || busy) return;\n    setBusy(true);\n    setSaid(null);\n    try {\n      const r = await onDescribe(ask);\n      if (r && r.ok) {\n        // An id opens the new automation; none means the sentence was handed on\n        // (to an agent beside the list, say): the box is empty for the next one.\n        if (r.id !== undefined && r.id !== null) onOpen?.(r.id);\n        else setText(\"\");\n      } else if (r && Array.isArray(r.questions) && r.questions.length > 0) {\n        setSaid({ questions: r.questions });\n      } else {\n        setSaid({ error: (r && r.error) || \"That did not work. Try saying it another way.\" });\n      }\n    } catch (e) {\n      setSaid({ error: e instanceof Error && e.message ? e.message : \"That did not work. Try saying it another way.\" });\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <section aria-label=\"Describe it\" className={cx(\"grid gap-2 rounded-lg border border-border bg-card p-3 text-card-foreground\", className)}>\n      <h3 className=\"m-0 flex items-center gap-1.5 text-sm font-semibold\">\n        <Icon name=\"wand\" size={15} className=\"text-primary\" /> Describe it\n      </h3>\n      <p className=\"m-0 text-xs text-muted-foreground\">Say what you want in a sentence. It draws the steps for you to read, test and switch on.</p>\n      <textarea\n        ref={box}\n        rows={2}\n        value={text}\n        disabled={busy}\n        aria-label=\"What should it do?\"\n        placeholder=\"Every Monday morning, mail me the deals that have gone quiet\"\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault();\n            void draft();\n          }\n        }}\n        className=\"min-h-16 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60\"\n      />\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button variant=\"primary\" icon=\"wand\" aria-busy={busy || undefined} disabled={busy || !text.trim()} onClick={() => void draft()}>\n          {busy ? \"Drawing it…\" : \"Draft it\"}\n          {!busy && price ? <span className=\"font-normal opacity-80\">{price}</span> : null}\n        </Button>\n        {chips.map((c) => (\n          <button\n            key={c}\n            type=\"button\"\n            disabled={busy}\n            onClick={() => {\n              setText(c);\n              box.current?.focus();\n            }}\n            className=\"inline-flex min-h-8 items-center rounded-full border border-border px-3 text-xs text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60\"\n          >\n            {c}\n          </button>\n        ))}\n      </div>\n      {said?.questions ? (\n        <div role=\"status\" className=\"grid gap-1 text-[13px]\">\n          <b className=\"font-semibold\">Ask me about:</b>\n          <ul className=\"m-0 list-disc pl-5\">\n            {said.questions.map((q) => (\n              <li key={q}>{q}</li>\n            ))}\n          </ul>\n        </div>\n      ) : null}\n      {said?.error ? (\n        <p role=\"alert\" className=\"m-0 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-[13px]\">\n          {said.error}\n        </p>\n      ) : null}\n    </section>\n  );\n}\n\nfunction groupRows(rows, appName) {\n  const team = rows.filter((r) => r.owner_kind === \"workspace\");\n  const byApp = new Map();\n  for (const r of rows) if (r.owner_kind === \"app\" && r.app_id) byApp.set(r.app_id, [...(byApp.get(r.app_id) ?? []), r]);\n  const groups = [];\n  if (team.length) groups.push({ key: \"team\", title: \"Team\", rows: team });\n  [...byApp.entries()]\n    .map(([id, rs]) => ({ key: id, title: `From ${appName?.(id) ?? \"an app\"}`, rows: rs }))\n    .sort((a, b) => a.title.localeCompare(b.title))\n    .forEach((g) => groups.push(g));\n  return groups;\n}\n\n/** The sources the platform never deletes from here: an app's own job and what it shipped. */\nconst KEEPS = new Set([\"legacy\", \"package\"]);\n\n/** The row's menu: Delete automation, or why it cannot be. */\nfunction rowMenu(row, onDelete) {\n  if (!onDelete) return null;\n  if (KEEPS.has(row.source)) {\n    return [{ label: \"Delete automation\", icon: \"trash\", disabled: true, description: \"Comes with the app. Switch it off, or remove it in the app's settings.\" }];\n  }\n  return [{ label: \"Delete automation\", icon: \"trash\", tone: \"danger\", onSelect: () => onDelete(row) }];\n}\n\nfunction Row({ row, appName, now, busy, canToggle, showOrigin, onOpen, onToggle, onDelete }) {\n  const menu = rowMenu(row, onDelete);\n  const health = healthOf(row);\n  const trig = triggerWords(row.trigger);\n  const last = row.last_run;\n  const next = row.status === \"on\" ? clockWords(row.next_run_at, row.tz, now) : null;\n  const lastWhen = last ? (agoWords(last.started_at ?? row.last_run_at, now) ?? \"\") : \"\";\n  return (\n    <li className={cx(\"@container relative flex min-w-0 items-center gap-3 rounded-lg border border-border bg-card px-3 py-2.5 text-card-foreground hover:bg-accent/30\", row.status === \"off\" && \"opacity-75\")}>\n      {canToggle ? (\n        <span className=\"relative z-10 shrink-0\">\n          <Switch\n            checked={row.status === \"on\"}\n            disabled={busy || row.live_version === null || row.live_version === undefined}\n            label={<span className=\"sr-only\">{`${row.name} is ${row.status === \"on\" ? \"on\" : \"off\"}`}</span>}\n            onChange={(e) => onToggle(row, e.target.checked)}\n          />\n        </span>\n      ) : null}\n      <button\n        type=\"button\"\n        data-card-link\n        onClick={() => onOpen(row.id)}\n        className=\"grid min-w-0 flex-1 items-center gap-x-4 gap-y-1 text-left after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring after:rounded-lg @xl:grid-cols-[minmax(0,2fr)_minmax(0,1.2fr)_minmax(0,0.9fr)_auto]\"\n      >\n        <span className=\"grid min-w-0 gap-0.5\">\n          <b className=\"truncate text-sm font-semibold\">{row.live_name ?? row.name}</b>\n          <span className=\"truncate text-xs text-muted-foreground\">\n            {showOrigin ? `${originWords(row, appName)} · ` : \"\"}\n            {trig}\n            {row.edited ? \" · edited\" : \"\"}\n          </span>\n        </span>\n        <span className=\"grid min-w-0 gap-0.5\">\n          <span className=\"inline-flex min-w-0 items-center gap-1.5 text-[13px]\">\n            <Dot tone={health.tone} />\n            <span className=\"truncate\">{health.text}</span>\n          </span>\n          {lastWhen ? <span className=\"text-xs text-muted-foreground\">{lastWhen}</span> : null}\n        </span>\n        <span className=\"grid min-w-0 gap-0.5\">\n          <span className=\"text-xs text-muted-foreground\">Next</span>\n          <b className=\"truncate text-[13px] font-medium\">{next ?? \"—\"}</b>\n        </span>\n        <span className=\"font-mono text-xs text-muted-foreground @xl:text-right\">{last ? creditsWords(last.credits) : \"\"}</span>\n      </button>\n      {menu ? (\n        <span className=\"relative z-10 shrink-0\">\n          <Menu label={`More for ${row.name}`} items={menu} />\n        </span>\n      ) : null}\n      <Icon name=\"chevron-right\" size={16} className=\"shrink-0 text-muted-foreground\" />\n    </li>\n  );\n}\n\nfunction Start({ s, onPick, autoFocus }) {\n  return (\n    <button type=\"button\" onClick={() => onPick(s)} autoFocus={autoFocus} className=\"flex min-w-0 items-start gap-3 rounded-lg border border-border bg-card p-3 text-left text-card-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\">\n      <span className=\"inline-flex size-10 shrink-0 items-center justify-center rounded-lg border border-border text-muted-foreground\">{s.glyph ? <Glyph name={s.glyph} size={20} /> : <Icon name=\"plus\" size={20} />}</span>\n      <span className=\"grid min-w-0 gap-0.5\">\n        <b className=\"text-sm font-semibold\">{s.name}</b>\n        <span className=\"text-xs text-muted-foreground\">{s.blurb}</span>\n        {s.price ? <span className=\"text-xs text-muted-foreground\">{startLine(s)}</span> : s.needs ? <span className=\"text-xs text-muted-foreground\">You add: {s.needs}</span> : null}\n      </span>\n    </button>\n  );\n}\n\n/**\n * The picker \"New automation\" opens when there are already some.\n *   open, onClose\n *   starts       the starting points (default automation-model's STARTING_POINTS);\n *                [{ id, name, blurb, glyph, needs, build(taken) }], or the platform's\n *                (startsFromPlatform): plus { ai, price: { credits, per } }, drawn as\n *                \"needs payments, a mailbox · a model writes three lines · about 6 cr\"\n *   onPick(s), onBlank()\n *   onDescribe, onOpen, describePrice, describeChips   as AutomationList's: \"Describe it\" at the top\n */\nexport function StartingPoints({ open, onClose, starts = STARTING_POINTS, onPick, onBlank, onDescribe, onOpen, describePrice = DESCRIBE_PRICE, describeChips = DESCRIBE_CHIPS }) {\n  const list = useMemo(() => ready(starts), [starts]);\n  return (\n    <Sheet open={open} onClose={onClose} side=\"center\" title=\"New automation\">\n      <div className=\"grid gap-2\">\n        {onDescribe ? <DescribeIt onDescribe={onDescribe} onOpen={onOpen} price={describePrice} chips={describeChips} /> : null}\n        <Start s={{ name: \"Start empty\", blurb: \"A trigger and a blank canvas.\" }} onPick={() => onBlank?.()} autoFocus={!onDescribe} />\n        {onDescribe && list.length > 0 ? <h3 className=\"m-0 mt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">Start from a ready one</h3> : null}\n        {list.map((s) => (\n          <Start key={s.id} s={s} onPick={onPick} />\n        ))}\n      </div>\n    </Sheet>\n  );\n}\n\n/**\n *   rows          the list: useAutomations().automations\n *   appName(id)   an app's name, or null (a team list names apps)\n *   appFilter     the app the list is filtered to, if any\n *   grouped       group by Team and each app (default true); an app's own\n *                 page passes false\n *   starts        the first-run starting points (default automation-model's), or the\n *                 platform's (useAutomations().starts, raw or through startsFromPlatform):\n *                 each card also says what it needs, what a model does and what it costs\n *   onDescribe(ask)   async: \"Describe it\". Resolves { ok, id? } (the new automation opens through\n *                 onOpen(id)), { ok: false, questions: [..] } (listed under the box: \"Ask me\n *                 about: ...\") or { ok: false, error } (shown). Without it, no Describe it card\n *   describePrice what the button says it costs (default \"1 call · about 1 cr\")\n *   describeChips sentences that start the box (default three: Monday mail, a won deal, a message)\n *   onOpen(id)    a whole row opens\n *   onNew(start?) New automation, or a starting point from the first-run screen\n *   onToggle(row, on)   async: the switch; a refusal throws its words\n *   onDelete(row) async: \"Delete automation\", in each row's menu, after a question that says what it does\n *                 (Deletes \"<name>\". Its runs stay in history.; and, for one that is on, that it is\n *                 switched off). Resolves { ok: true } (the screen says what followed: Undo, the\n *                 automations that followed it) or { ok: false, error } (shown as it is). An app's own\n *                 job and what an app shipped (`row.source` legacy, package) get the item disabled,\n *                 pointing at the app's settings. Without it, no menu\n *   canDelete     offer Delete automation at all (default true; hide it where the member may not)\n *   canToggle     draw the switch (default true; hide it where the member may not)\n *   canCreate     draw New automation (default true)\n *   onClearFilter \"Showing one app. Show all\"\n *   query         the search box's words to start with (default \"\"). A screen that leaves the list\n *                 (to open an automation) and comes back hands back what the member typed\n *   onQueryChange(text)  the search box changed: keep it where the screen keeps its place\n *   title, intro  the head's words\n *   now           the clock (a test hands one in)\n */\nexport function AutomationList({ rows, appName, appFilter = null, grouped = true, starts = STARTING_POINTS, onDescribe, describePrice = DESCRIBE_PRICE, describeChips = DESCRIBE_CHIPS, onOpen, onNew, onToggle, canToggle = true, canCreate = true, onDelete, canDelete = true, onClearFilter, query = \"\", onQueryChange, title = \"Automations\", intro = \"What runs on its own, for your team and for each app.\", now: nowProp, className }) {\n  const [q, setQ] = useState(typeof query === \"string\" ? query : \"\");\n  const [pending, setPending] = useState(null);\n  const [error, setError] = useState(null);\n  const [choosing, setChoosing] = useState(false);\n  const [deleting, setDeleting] = useState(null);\n  const [deletingBusy, setDeletingBusy] = useState(false);\n  const now = useMemo(() => nowProp ?? new Date(), [nowProp]);\n  const startList = useMemo(() => ready(starts), [starts]);\n  const describeBox = onDescribe && canCreate ? <DescribeIt onDescribe={onDescribe} onOpen={onOpen} price={describePrice} chips={describeChips} /> : null;\n  const shown = useMemo(() => {\n    const t = q.trim().toLowerCase();\n    return t ? rows.filter((r) => `${r.name} ${r.key}`.toLowerCase().includes(t)) : rows;\n  }, [rows, q]);\n  const groups = useMemo(() => (grouped ? groupRows(shown, appName) : [{ key: \"all\", title: \"\", rows: shown }]), [shown, appName, grouped]);\n  const sum = useMemo(() => summaryOf(rows, now), [rows, now]);\n\n  const toggle = async (row, on) => {\n    setPending(row.id);\n    setError(null);\n    try {\n      await onToggle?.(row, on);\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"That did not work.\");\n    } finally {\n      setPending(null);\n    }\n  };\n\n  const askDelete = onDelete && canDelete ? (row) => setDeleting(row) : null;\n  const confirmDelete = async () => {\n    const row = deleting;\n    if (!row) return;\n    setDeletingBusy(true);\n    setError(null);\n    try {\n      const r = await onDelete(row);\n      if (r && r.ok === false) setError(r.error || \"That did not work.\");\n    } catch (e) {\n      setError(e instanceof Error && e.message ? e.message : \"That did not work.\");\n    } finally {\n      setDeletingBusy(false);\n      setDeleting(null);\n    }\n  };\n\n  const newButton = canCreate ? (\n    <Button variant=\"primary\" icon=\"plus\" onClick={() => (rows.length ? setChoosing(true) : onNew?.())}>\n      New automation\n    </Button>\n  ) : null;\n\n  if (rows.length === 0) {\n    return (\n      <div className={cx(\"grid min-w-0 content-start gap-4 p-4\", className)}>\n        <header className=\"flex flex-wrap items-start justify-between gap-3\">\n          <div className=\"grid gap-0.5\">\n            <h2 className=\"m-0 text-lg font-semibold\">{title}</h2>\n            <p className=\"m-0 text-sm text-muted-foreground\">{appFilter ? \"This app has none yet.\" : \"Nothing runs on its own yet.\"}</p>\n          </div>\n          {canCreate ? (\n            <Button variant=\"primary\" icon=\"plus\" onClick={() => onNew?.()}>\n              New automation\n            </Button>\n          ) : null}\n        </header>\n        {canCreate ? (\n          <>\n            {describeBox}\n            <section className=\"grid gap-1 rounded-lg border border-dashed border-border p-4\">\n              <h3 className=\"m-0 text-sm font-semibold\">Start from a ready one</h3>\n              <p className=\"m-0 text-sm text-muted-foreground\">{onDescribe ? \"Pick one, change what you like, test it with real data, then switch it on.\" : \"Pick one, change what you like, test it with real data, then switch it on. Or ask the agent to draw one from a sentence.\"}</p>\n            </section>\n            <div className=\"@container\">\n              <div className=\"grid gap-2 @xl:grid-cols-2\">\n                {startList.map((s) => (\n                  <Start key={s.id} s={s} onPick={onNew} />\n                ))}\n              </div>\n            </div>\n          </>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"@container grid min-w-0 content-start gap-3 p-4\", className)}>\n      <header className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div className=\"grid gap-0.5\">\n          <h2 className=\"m-0 text-lg font-semibold\">{title}</h2>\n          <p className=\"m-0 text-sm text-muted-foreground\">{intro}</p>\n        </div>\n        {newButton}\n      </header>\n\n      {describeBox}\n\n      <div role=\"status\" className=\"flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground\">\n        <span>\n          <b className=\"font-semibold text-foreground\">{sum.on}</b> on\n        </span>\n        {sum.failing > 0 ? (\n          <span className=\"text-destructive\">\n            <b className=\"font-semibold\">{sum.failing}</b> failed last time\n          </span>\n        ) : null}\n        {sum.needs > 0 ? (\n          <span className=\"text-warning\">\n            <b className=\"font-semibold\">{sum.needs}</b> need{sum.needs === 1 ? \"s\" : \"\"} their owner\n          </span>\n        ) : null}\n        {sum.next ? (\n          <span>\n            Next: <b className=\"font-semibold text-foreground\">{sum.next.name}</b>, {clockWords(sum.next.next_run_at, sum.next.tz, now)}\n          </span>\n        ) : null}\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <label className=\"relative block min-w-0 max-w-sm flex-1\">\n          <Icon name=\"search\" size={14} className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\" />\n          <input\n            type=\"search\"\n            placeholder=\"Search automations\"\n            aria-label=\"Search automations\"\n            value={q}\n            onChange={(e) => {\n              setQ(e.target.value);\n              onQueryChange?.(e.target.value);\n            }}\n            className=\"min-h-9 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n          />\n        </label>\n        {appFilter && onClearFilter ? (\n          <Button size=\"sm\" variant=\"secondary\" onClick={onClearFilter}>\n            Showing one app. Show all\n          </Button>\n        ) : null}\n      </div>\n\n      {error ? (\n        <p role=\"alert\" className=\"m-0 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm\">\n          {error}\n        </p>\n      ) : null}\n\n      {shown.length === 0 ? <p className=\"m-0 text-sm text-muted-foreground\">No automation matches “{q}”.</p> : null}\n      {groups.map((g) => (\n        <section key={g.key} aria-label={g.title || \"Automations\"} className=\"grid gap-1.5\">\n          {g.title ? <h3 className=\"m-0 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">{g.title}</h3> : null}\n          <ul className=\"m-0 grid list-none gap-1.5 p-0\">\n            {g.rows.map((r) => (\n              <Row key={r.id} row={r} appName={appName} now={now} busy={pending === r.id} canToggle={canToggle} showOrigin={grouped && !appFilter} onOpen={onOpen} onToggle={toggle} onDelete={askDelete} />\n            ))}\n          </ul>\n        </section>\n      ))}\n\n      <Confirm\n        open={deleting !== null}\n        onClose={() => (deletingBusy ? undefined : setDeleting(null))}\n        onConfirm={() => void confirmDelete()}\n        title=\"Delete this automation?\"\n        body={deleting ? deleteWords(deleting.name, deleting.status) : \"\"}\n        confirmLabel=\"Delete\"\n        tone=\"danger\"\n        busy={deletingBusy}\n      />\n\n      <StartingPoints\n        open={choosing}\n        onClose={() => setChoosing(false)}\n        starts={startList}\n        onDescribe={onDescribe}\n        describePrice={describePrice}\n        describeChips={describeChips}\n        onOpen={(id) => {\n          setChoosing(false);\n          onOpen?.(id);\n        }}\n        onBlank={() => {\n          setChoosing(false);\n          onNew?.();\n        }}\n        onPick={(s) => {\n          setChoosing(false);\n          onNew?.(s);\n        }}\n      />\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/automation-list/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/automation-list/README.md",
+      "content": "# AutomationList\n\nAn app's automations as rows. **The whole row opens the automation** (a\nstretched button under the switch), so a member is never hunting for a\nsmall arrow. Each row says what it is called and when it runs (in words, in\nthe automation's own time zone), how its last run went as a dot and a word\n(Healthy, Last run failed, Needs its owner, Waiting, Running, Off, Not live\nyet), when the next is due, what the last one cost, and an on/off switch\nthat keeps its own press.\n\n- A line above the rows counts what is on, what failed last time, what\n  waits for its owner, and which runs next.\n- A search box; **New automation** (a picker of starting points once there\n  are some, straight to a blank when there are none).\n- **First run** — with no automations, a few ready-made flows to start\n  from (a Monday reminder, check then tell me, wait then follow up, an\n  app's action every morning, ask the model for a line).\n- **Describe it** (with `onDescribe`) — a box at the top, above the rows, on\n  the first-run screen and in the New automation sheet: say what it should\n  do in a sentence, press \"Draft it\" (the button carries its price), and the\n  platform draws it; it opens when ready. It says \"Drawing it…\" while it\n  works. A question back is listed under the box (\"Ask me about: …\"); any\n  other refusal shows its words. Three chips start the sentence. Without\n  `onDescribe` nothing changes.\n- On a team page, the rows are grouped Team and From &lt;app&gt;; on an app's\n  own page pass `grouped={false}`.\n\n```jsx\nimport { AutomationList } from \"../components/blocks/automation-list\";   // a Makersclaw app\nimport { AutomationList } from \"@/components/makersclaw/blocks/automation-list\";   // a shadcn project\n```\n\n`makersclaw add automation-list` lays `automation-model` with it. A client\ncomponent. It replaces `schedule-card` for an app whose jobs run on the\nautomations engine (the card still works for an app that has not moved).\nIts own width decides its layout: under about 576 px a row stacks its\nfacts under its name.\n\n## Props\n\n- `rows` — the list: `useAutomations().automations`. Each: `{ id, name,\n  key, status (on · off · draft · needs_owner), live_version, trigger,\n  next_run_at, tz, last_run: { status, started_at, credits }, active_runs,\n  edited, owner_kind, app_id }`.\n- `onOpen(id)` — a whole row was pressed.\n- `onNew(start?)` — New automation; `start` is a starting point (`{ id,\n  name, build(takenKeys) }`) when one was picked, else a blank is meant.\n- `onDelete(row)` — async: **Delete automation**, in a menu on each row. It\n  asks first, in words that say what it does (`Deletes \"<name>\". Its runs\n  stay in history.`, and for a row that is on, that deleting also switches it\n  off). Resolves `{ ok: true }` (the screen says what followed) or `{ ok:\n  false, error }` (shown above the rows as it is). A row from an app's own job\n  or one an app shipped (`row.source` `legacy`, `package`) has the item\n  disabled, pointing at the app's settings. `canDelete` hides the menu\n  (default true). Without `onDelete`, no menu.\n- `onToggle(row, on)` — async; the switch. A refusal throws its words\n  (shown above the rows). `canToggle` — draw the switch (default true).\n  `canCreate` — draw New automation (default true).\n- `appName(id)`, `appFilter`, `onClearFilter`, `grouped`.\n- `query`, `onQueryChange(text)`: the search box starts with `query` and reports each change. A screen that opens an automation and comes back keeps the words in its own place and hands them back, so the list returns as it was left.\n- `starts` — your own starting points (default automation-model's\n  `STARTING_POINTS`). An app offers flows that name its own actions here.\n  The platform's own come through `startsFromPlatform(useAutomations().starts)`\n  (automation-model): each card then also says what it needs, what a model\n  does and what it costs (\"needs payments, a mailbox · a model writes three\n  lines · about 6 cr\", or \"free\"). The raw list is also accepted.\n- `onDescribe(ask)` — async: `useAutomations().describe`. Resolves `{ ok,\n  id }` (the list calls `onOpen(id)`), `{ ok: true }` with no id (the\n  sentence was handed on, to an agent beside the list say: the box empties),\n  `{ ok: false, questions }` or `{ ok: false, error }`. `describePrice` — what the button says it costs (default\n  \"1 call · about 1 cr\"); `describeChips` — the sentences that start the\n  box (default three).\n- `title`, `intro`, `now` (the clock, for a test), `className`.\n\n### StartingPoints\n\nThe picker New automation opens: `open`, `onClose`, `starts`, `onPick(s)`,\n`onBlank()`, and (for Describe it) `onDescribe`, `onOpen`, `describePrice`,\n`describeChips`. With Describe it, the ready-made ones sit under \"Start from\na ready one\".\n\n## Hooks (lib/hooks.js)\n\n`useAutomations()` → `{ automations, triggers, starts, describe(ask, app?),\ndescribing, busy, creating, setStatus(id, on), create(definition), loading,\nerror, unavailable, reload }`. It reads\n`GET _claw/automations`; `setStatus` patches `status`; `create` posts a\ndefinition and resolves `{ ok, data: { id } }` or `{ ok: false, error,\nproblems }`. Looks every 30 s (5 s while one runs), not at all while the\npage is hidden. On a claw from before the engine it is `unavailable`:\nshow a quiet \"not set up yet\". `starts` is `[]`: the desk's starting points are not served to an app\n(`_claw/automation-starts` does not exist), so the lib asks nothing and\nan app brings its own; `describe(ask, app?)` posts `_claw/automation-draft`\nand resolves `{ ok: true, id, … }`, `{ ok: false, error, code, questions? }`\nor `{ ok: false, code: \"unavailable\" }`, never thrown.\n\n## Never\n\n- Never switch an automation on that has no version kept: the switch is\n  disabled until one is (`live_version`).\n- Never show a time in the viewer's zone: `next_run_at` is shown in `tz`.\n\n## Example\n\n```jsx\n\"use client\";\nimport { useRouter } from \"next/navigation\";\nimport { useAutomations } from \"../lib/hooks\";\nimport { AutomationList } from \"../components/blocks/automation-list\";\n\nexport default function Automations() {\n  const router = useRouter();\n  const { automations, setStatus, unavailable } = useAutomations();\n  if (unavailable) return <p className=\"p-4 text-sm text-muted-foreground\">Automations are not set up here yet.</p>;\n  return (\n    <AutomationList\n      rows={automations}\n      grouped={false}\n      title=\"Automations\"\n      onOpen={(id) => router.push(`?automation=${id}`)}\n      onToggle={async (row, on) => {\n        const r = await setStatus(row.id, on);\n        if (!r.ok) throw new Error(r.error);\n      }}\n      onNew={(start) => router.push(`?automation=new${start ? `&start=${start.id}` : \"\"}`)}\n    />\n  );\n}\n```\n"
+    }
+  ],
+  "categories": [
+    "automation",
+    "workflow",
+    "list",
+    "rows",
+    "schedule",
+    "job",
+    "health",
+    "next run",
+    "last run",
+    "cost",
+    "switch",
+    "enabled",
+    "starting points",
+    "templates",
+    "n8n",
+    "make"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/automation-list. Import: import { AutomationList, StartingPoints } from \"@/components/makersclaw/blocks/automation-list\". Props and an example: components/makersclaw/blocks/automation-list/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.8.2",
+      "useWhen": "The Automations page of an app, or of the desk's own Automations window: the rows a member opens, switches and starts from. It replaces schedule-card for an app whose jobs run on the automations engine."
+    }
+  }
+}