makersclaw 0.8.0 → 0.8.2

package/registry/blocks/step-settings/demo.jsx

@@ -0,0 +1,93 @@
+"use client";
+
+// StepSettings and FlowSettings — the gallery's and the smoke test's
+// surface. Not installed into apps. A step of each kind to look at, the
+// whole-automation panel, and a failed step in a run with the agent's fix.
+import { useState } from "react";
+import { Button, ButtonGroup } from "../components/ui";
+import { StepSettings, FlowSettings } from "../components/blocks/step-settings";
+import { availableBefore, blankAutomation, stepTitle, summarizeSteps, updateStep } from "../components/blocks/automation-model";
+
+const DEF = {
+  ...blankAutomation("Morning read", "morning-read", { type: "schedule", cron: "0 7 * * 1-5", tz: "team" }),
+  does: "Reads your mail and drafts the follow-ups that are owed.",
+  steps: [
+    { id: "mail", kind: "tool", label: "Read the mail", needs: { category: "mail" }, tool: "list_messages", input: { since: "{{ trigger.at }}", limit: 200 } },
+    { id: "touches", kind: "action", action: "record_touches", input: { touches: "{{ steps.mail.output.messages }}" } },
+    { id: "check", kind: "condition", if: "{{ steps.touches.output.saved > 0 }}", then: [{ id: "tell", kind: "notify", message: "Saved some." }], else: [] },
+    { id: "ask", kind: "llm", prompt: "Write one line about {{ steps.touches.output.saved }} people.", tier: "fast" },
+    { id: "agent", kind: "agent", instructions: "Look at the list and say what looks wrong.", cap_credits: 40 },
+  ],
+};
+const ACTIONS = [
+  { name: "record_touches", description: "Save who wrote and who was met" },
+  { name: "suggest", description: "Save a draft for a person" },
+];
+const OUTPUTS = { mail: { count: 12, messages: [{ from: "ana@x.com" }] } };
+const FAILED = summarizeSteps([
+  {
+    path: "touches",
+    step_id: "touches",
+    attempt: 2,
+    status: "done",
+    started_at: "2026-10-12T07:00:01Z",
+    ended_at: "2026-10-12T07:00:04Z",
+    credits: 0.4,
+    error: null,
+    input: { touches: ["Ana@x.com "] },
+    output: { saved: 1 },
+    fix: { by: "agent", kind: "format", before: "Ana@x.com ", after: "ana@x.com", why: "The mail tool refuses spaces." },
+  },
+]).get("touches");
+
+export default function StepSettingsDemo() {
+  const [def, setDef] = useState(DEF);
+  const [id, setId] = useState("touches");
+  const [which, setWhich] = useState("step");
+  const step = def.steps.find((s) => s.id === id) ?? def.steps[0];
+  return (
+    <div className="grid gap-4 p-4">
+      <div className="flex flex-wrap gap-2">
+        <ButtonGroup aria-label="Which panel">
+          {["step", "run", "flow"].map((w) => (
+            <Button key={w} size="sm" variant={which === w ? "primary" : "secondary"} onClick={() => setWhich(w)}>
+              {w === "step" ? "A step" : w === "run" ? "A step in a run" : "The automation"}
+            </Button>
+          ))}
+        </ButtonGroup>
+        {which !== "flow" ? (
+          <ButtonGroup aria-label="Which step">
+            {def.steps.map((s) => (
+              <Button key={s.id} size="sm" variant={s.id === step.id ? "primary" : "secondary"} onClick={() => setId(s.id)}>
+                {s.kind}
+              </Button>
+            ))}
+          </ButtonGroup>
+        ) : null}
+      </div>
+      <div className="h-[640px] w-full max-w-sm overflow-hidden rounded-lg border border-border">
+        {which === "flow" ? (
+          <FlowSettings def={def} versions={[{ version: 2, kind: "member", created_at: "2026-10-11T12:00:00Z", note: "Added the check" }, { version: 1, kind: "shipped", created_at: "2026-10-09T12:00:00Z" }]} liveVersion={2} onChange={setDef} onClose={() => {}} onReset={() => {}} />
+        ) : (
+          <StepSettings
+            key={`${which}:${step.id}`}
+            step={step}
+            available={{ ...availableBefore(def, step.id, stepTitle), inputs: [] }}
+            samples={OUTPUTS}
+            actions={ACTIONS}
+            ownedByApp
+            problems={step.kind === "agent" ? ["Tell the agent what to do."] : []}
+            readOnly={which === "run"}
+            summary={which === "run" && step.id === "touches" ? FAILED : null}
+            dataVisible
+            onChange={(patch) => setDef(updateStep(def, step.id, patch))}
+            onRemove={() => setDef({ ...def, steps: def.steps.filter((s) => s.id !== step.id) })}
+            onDuplicate={() => {}}
+            onKeepFix={async () => ({ ok: true })}
+            onClose={() => {}}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/registry/blocks/step-settings/fields.jsx

@@ -0,0 +1,58 @@
+"use client";
+
+// The plain form rows the settings panels share, on the kit's parts: a
+// labelled text, number, select or switch. Each is a real label over a
+// real control, so it works by keyboard and with a screen reader.
+
+import { useId } from "react";
+import { Field, Input, Select, Switch, Textarea } from "../../ui";
+
+export function TextField({ label, value, onChange, help, placeholder, mono = false, multiline = false, rows = 3, disabled = false }) {
+  const id = useId();
+  const common = { id, value, disabled, placeholder, className: mono ? "font-mono text-[13px]" : undefined, onChange: (e) => onChange(e.target.value) };
+  return (
+    <Field id={id} label={label} hint={help}>
+      {multiline ? <Textarea {...common} rows={rows} /> : <Input {...common} type="text" />}
+    </Field>
+  );
+}
+
+export function NumberField({ label, value, onChange, min, max, step, help, placeholder, disabled = false }) {
+  const id = useId();
+  return (
+    <Field id={id} label={label} hint={help}>
+      <Input
+        id={id}
+        type="number"
+        inputMode={step !== undefined && step < 1 ? "decimal" : "numeric"}
+        className="font-mono text-[13px]"
+        min={min}
+        max={max}
+        step={step}
+        value={value ?? ""}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value === "" ? undefined : Number(e.target.value))}
+      />
+    </Field>
+  );
+}
+
+export function SelectField({ label, value, onChange, options, help, disabled = false }) {
+  const id = useId();
+  return (
+    <Field id={id} label={label} hint={help}>
+      <Select id={id} value={value} disabled={disabled} options={options} onChange={(e) => onChange(e.target.value)} />
+    </Field>
+  );
+}
+
+export function SwitchField({ label, checked, onChange, help, disabled = false }) {
+  const id = useId();
+  return (
+    <div className="grid gap-0.5">
+      <Switch id={id} checked={checked} disabled={disabled} label={label} onChange={(e) => onChange(e.target.checked)} />
+      {help ? <p className="m-0 text-xs text-muted-foreground">{help}</p> : null}
+    </div>
+  );
+}

package/registry/blocks/step-settings/flow-settings.jsx

@@ -0,0 +1,115 @@
+"use client";
+
+// The panel for the automation as a whole: its name, what it does, what
+// happens when a step fails, what one run may spend, what a manual run
+// asks for first, and its versions. Props in; every change is
+// `onChange(nextDefinition)`.
+
+import { Button, Select, Input, cx } from "../../ui";
+import { Chip, Glyph, PanelSection, SidePanel, agoWords } from "../automation-model";
+import { NumberField, SelectField, SwitchField, TextField } from "./fields";
+
+const OVERLAP = [
+  { value: "skip", label: "Skip the new run" },
+  { value: "queue", label: "Queue it behind" },
+  { value: "allow", label: "Run both at once" },
+];
+const FAILURE = [
+  { value: "retry_then_agent", label: "Retry, then ask the agent to fix it" },
+  { value: "agent_first", label: "Ask the agent to fix it straight away" },
+  { value: "stop", label: "Stop the run" },
+];
+const INPUT_TYPES = [
+  { value: "string", label: "Text" },
+  { value: "number", label: "Number" },
+  { value: "boolean", label: "Yes or no" },
+  { value: "date", label: "Date" },
+];
+
+/**
+ *   def           the automation: { name, does, settings, inputs, … }
+ *   readOnly      shown, not editable
+ *   versions      [{ version, kind: shipped|member|agent, note, created_at }]
+ *   liveVersion   the version that runs
+ *   onChange(def)
+ *   onClose       draws the close button
+ *   onReset       draws "Reset to the app's version" when the automation
+ *                 was edited from a shipped one
+ */
+export function FlowSettings({ def, readOnly = false, versions = [], liveVersion = null, onChange, onClose, onReset }) {
+  const set = (patch) => onChange({ ...def, ...patch });
+  const setSettings = (patch) => onChange({ ...def, settings: { ...def.settings, ...patch } });
+  const inputs = Object.entries(def.inputs ?? {});
+  const setInputs = (next) => onChange({ ...def, inputs: Object.fromEntries(next) });
+
+  return (
+    <SidePanel glyph={<Glyph name="automation" size={20} />} title="This automation" subtitle="How it behaves as a whole" label="Flow settings" onClose={onClose}>
+      <TextField label="Name" value={def.name} disabled={readOnly} onChange={(v) => set({ name: v })} />
+      <TextField label="What it does" value={def.does ?? ""} multiline rows={3} disabled={readOnly} onChange={(v) => set({ does: v || undefined })} help="One sentence, for the list." />
+
+      <PanelSection title="When it runs">
+        <SelectField label="If it is still running when the next one is due" value={def.settings.overlap} options={OVERLAP} disabled={readOnly} onChange={(v) => setSettings({ overlap: v })} />
+        <SwitchField label="Only when something changed" checked={Boolean(def.settings.only_if_changed)} disabled={readOnly} onChange={(v) => setSettings({ only_if_changed: v })} help="Skip a scheduled run when nothing it reads has changed since the last one." />
+      </PanelSection>
+
+      <PanelSection title="When a step fails">
+        <SelectField label="What happens" value={def.settings.on_failure} options={FAILURE} disabled={readOnly} onChange={(v) => setSettings({ on_failure: v })} help="The agent changes only this run: a date format, a missing field. Never who gets what." />
+        <NumberField label="Most one run may spend" value={def.settings.run_cap_credits} min={1} disabled={readOnly} placeholder="No limit" onChange={(v) => setSettings({ run_cap_credits: v })} help="In credits. A run that reaches it stops." />
+      </PanelSection>
+
+      <PanelSection title="What a manual run asks for">
+        {inputs.length === 0 ? <p className="m-0 text-xs text-muted-foreground">Nothing. Add a question if a run needs an answer first.</p> : null}
+        {inputs.map(([name, spec], i) => (
+          <div key={i} className="flex min-w-0 items-center gap-1.5">
+            <Input
+              className="min-w-0 flex-1 font-mono text-[13px]"
+              aria-label={`Question name ${i + 1}`}
+              value={name}
+              disabled={readOnly}
+              onChange={(e) => setInputs(inputs.map((x, j) => (j === i ? [e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "_"), x[1]] : x)))}
+            />
+            <span className="w-28 shrink-0">
+              <Select aria-label={`Question type ${i + 1}`} value={spec.type} disabled={readOnly} options={INPUT_TYPES} onChange={(e) => setInputs(inputs.map((x, j) => (j === i ? [x[0], { ...x[1], type: e.target.value }] : x)))} />
+            </span>
+            {!readOnly ? (
+              <button type="button" aria-label={`Remove ${name}`} onClick={() => setInputs(inputs.filter((_, j) => j !== i))} className="inline-flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                ×
+              </button>
+            ) : null}
+          </div>
+        ))}
+        {!readOnly && inputs.length < 20 ? (
+          <Button size="sm" variant="secondary" className="justify-self-start" onClick={() => setInputs([...inputs, [`question_${inputs.length + 1}`, { type: "string", label: "" }]])}>
+            + Add a question
+          </Button>
+        ) : null}
+      </PanelSection>
+
+      {versions.length > 0 ? (
+        <PanelSection title="Versions">
+          <ol className="m-0 grid list-none gap-1.5 p-0">
+            {versions.map((v) => (
+              <li key={v.version} className={cx("grid gap-0.5 rounded-lg border px-2.5 py-1.5", v.version === liveVersion ? "border-success/50" : "border-border")}>
+                <span className="flex items-center gap-2">
+                  <b className="text-[13px] font-semibold">Version {v.version}</b>
+                  {v.version === liveVersion ? <Chip tone="green">Live</Chip> : null}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {v.kind === "shipped" ? "From the app" : v.kind === "agent" ? "By the agent" : "Edited"}
+                  {" · "}
+                  {agoWords(v.created_at) ?? ""}
+                </span>
+                {v.note ? <p className="m-0 text-xs">{v.note}</p> : null}
+              </li>
+            ))}
+          </ol>
+          {onReset && !readOnly ? (
+            <Button size="sm" variant="secondary" className="justify-self-start" onClick={onReset}>
+              Reset to the app's version
+            </Button>
+          ) : null}
+        </PanelSection>
+      ) : null}
+    </SidePanel>
+  );
+}

package/registry/blocks/step-settings/index.js

@@ -0,0 +1,5 @@
+// The StepSettings block — `makersclaw add step-settings`. Fixed: compose
+// it through its props (README.md beside this file).
+export { FlowSettings } from "./flow-settings";
+export { NumberField, SelectField, SwitchField, TextField } from "./fields";
+export { StepSettings } from "./step-settings";

package/registry/blocks/step-settings/step-settings.jsx

@@ -0,0 +1,290 @@
+"use client";
+
+// The panel for one step: its name, what it does (a form made for its
+// kind), what happens if it fails, and the plain list of what is wrong
+// with it. In a run the same panel is read-only and adds how the step went,
+// what went in and what came out, and, when the agent fixed the step,
+// what it changed (fix-note).
+//
+// Fields are written in a person's words; the definition's own keys stay
+// out of sight (the step id is shown small, because it is what a run's rows
+// and an app update match steps by). Props in, callbacks out: every change
+// is `onChange(patch)`, applied by the screen with automation-model's
+// updateStep.
+
+import { useState } from "react";
+import { Button, Confirm, Icon, cx } from "../../ui";
+import { Glyph, KINDS, SidePanel, creditsWords, innerCount, nodeStateWords, stepTitle } from "../automation-model";
+import { DataInput, DataPairs } from "../data-picker";
+import { FixNote } from "../fix-note";
+import { NumberField, SelectField, TextField } from "./fields";
+
+const FAIL_OPTIONS = [
+  { value: "stop", label: "Stop the run" },
+  { value: "continue", label: "Carry on without it" },
+];
+const OP_OPTIONS = [
+  { value: "search", label: "Search" },
+  { value: "get", label: "Get one" },
+  { value: "list", label: "List" },
+];
+const METHOD_OPTIONS = [
+  { value: "GET", label: "Ask (GET)" },
+  { value: "POST", label: "Send (POST)" },
+  { value: "PUT", label: "Replace (PUT)" },
+  { value: "PATCH", label: "Change (PATCH)" },
+];
+const TIER_OPTIONS = [
+  { value: "fast", label: "Quick" },
+  { value: "smart", label: "Careful" },
+];
+
+const show = (v) => JSON.stringify(v, null, 2) ?? "";
+
+function Data({ label, value }) {
+  if (value === undefined || value === null) return null;
+  const text = show(value);
+  return (
+    <details open={text.length < 240} className="rounded-md border border-border bg-muted">
+      <summary className="cursor-pointer px-2 py-1 text-xs font-medium">{label}</summary>
+      <pre className="m-0 max-h-64 overflow-auto px-2 pb-2 font-mono text-xs">{text.length > 4000 ? `${text.slice(0, 4000)}\n…` : text}</pre>
+    </details>
+  );
+}
+
+/** A run's own account of the step: how it went, what went in and out. */
+function RunBlock({ summary, dataVisible, title, fixProps }) {
+  const last = summary.rows[summary.rows.length - 1];
+  return (
+    <section aria-label="How it went" className="grid gap-2 rounded-lg border border-border bg-background p-3">
+      <h4 className={cx("m-0 text-sm font-semibold", summary.state === "failed" && "text-destructive", summary.state === "done" && "text-success", summary.state === "would" && "text-primary")}>{nodeStateWords(summary.state)}</h4>
+      <p className="m-0 text-xs text-muted-foreground">
+        {summary.passes > 1 ? `${summary.passes} times · ` : ""}
+        {creditsWords(summary.credits)}
+      </p>
+      {summary.words ? <p className="m-0 text-[13px] text-destructive">{summary.words}</p> : null}
+      {summary.state === "would" && summary.would ? <p className="m-0 text-[13px] text-primary">{summary.would}</p> : null}
+      {summary.unchecked ? <p className="m-0 text-[13px] text-muted-foreground">Not checked: it needs what an earlier step would have made.</p> : null}
+      {summary.fix ? <FixNote fix={summary.fix} stepTitle={title} {...fixProps} /> : null}
+      {dataVisible && last ? (
+        <>
+          <Data label="Went in" value={last.input} />
+          <Data label="Came out" value={last.output} />
+        </>
+      ) : (
+        <p className="m-0 text-xs text-muted-foreground">What went in and came out is shown to the automation's owner and the admins.</p>
+      )}
+    </section>
+  );
+}
+
+/**
+ *   step          the step shown
+ *   available     automation-model's availableBefore(def, id, stepTitle), plus
+ *                 optionally `inputs: [{ name, label }]` (what a manual run asks)
+ *   samples       { [stepId]: a real output } for the data picker, or null
+ *   apps          the workspace's apps, [{ id, name }], for an action in a team automation
+ *   actions       the app's declared actions, [{ name, description? }]: an action
+ *                 step picks from them instead of typing a name
+ *   ownedByApp    the automation belongs to an app (its actions need no app)
+ *   problems      lines about this step to fix
+ *   readOnly      shown, not editable (a run)
+ *   onChange(patch), onRemove(), onDuplicate(), onClose()
+ *   summary       a run: automation-model's summarizeSteps() entry for this step
+ *   dataVisible   the member may read what went in and out
+ *   fixProps      what FixNote needs for a step the agent fixed: { draft, onKeep, onDrop, onUndo }
+ *   onKeepFix()   keep a fix the agent made, for next time (shorthand for fixProps.onKeep)
+ *   runActions    a run: what the member can do with this step (a node), drawn under how it went
+ */
+export function StepSettings({ step, available, samples = null, apps = [], actions, ownedByApp = false, problems = [], readOnly = false, onChange, onRemove, onDuplicate, onClose, summary = null, dataVisible = false, fixProps, onKeepFix, runActions = null }) {
+  const info = KINDS[step.kind] ?? KINDS.action;
+  const dis = readOnly;
+  const set = (patch) => onChange?.(patch);
+  const inner = innerCount(step);
+  const [confirming, setConfirming] = useState(false);
+  const title = stepTitle(step);
+
+  const remove = () => {
+    if (inner > 0) setConfirming(true);
+    else onRemove?.();
+  };
+
+  return (
+    <SidePanel
+      glyph={<Glyph name={info.glyph} size={20} />}
+      tone={info.tone === "plain" ? "plain" : "ai"}
+      title={title}
+      subtitle={`${info.name}${info.paid ? " · costs credits" : " · free"}`}
+      label={`${info.name} settings`}
+      onClose={onClose}
+      footer={
+        readOnly ? null : (
+          <>
+            <Button size="sm" variant="secondary" icon="copy" onClick={onDuplicate}>
+              Duplicate
+            </Button>
+            <Button size="sm" variant="danger" icon="trash" onClick={remove}>
+              Remove
+            </Button>
+          </>
+        )
+      }
+    >
+      {summary ? <RunBlock summary={summary} dataVisible={dataVisible} title={title} fixProps={fixProps ?? (onKeepFix ? { onKeep: onKeepFix } : undefined)} /> : null}
+      {summary && runActions ? runActions : null}
+
+      <TextField label="Name" value={step.label ?? ""} placeholder={stepTitle({ ...step, label: undefined })} disabled={dis} onChange={(v) => set({ label: v.trim() ? v : undefined })} help="What this step is called on the canvas." />
+
+      {step.kind === "action" ? (
+        <>
+          {!ownedByApp ? (
+            <SelectField label="App" value={step.app ?? ""} disabled={dis} onChange={(v) => set({ app: v || undefined })} options={[{ value: "", label: "Pick an app" }, ...apps.map((a) => ({ value: a.id, label: a.name }))]} help="Which of your apps this action belongs to." />
+          ) : null}
+          {actions?.length ? (
+            <SelectField
+              label="Action"
+              value={step.action}
+              disabled={dis}
+              onChange={(v) => set({ action: v })}
+              options={[{ value: "", label: "Pick an action" }, ...actions.map((a) => ({ value: a.name, label: a.description ? `${a.name}: ${a.description}` : a.name })), ...(step.action && !actions.some((a) => a.name === step.action) ? [{ value: step.action, label: step.action }] : [])]}
+              help="The actions this app declares."
+            />
+          ) : (
+            <TextField label="Action" value={step.action} mono disabled={dis} placeholder="add_people" onChange={(v) => set({ action: v })} help="The name of the action the app declares." />
+          )}
+          <DataPairs label="What to give it" value={step.input} available={available} samples={samples} disabled={dis} onChange={(v) => set({ input: v })} />
+        </>
+      ) : null}
+
+      {step.kind === "tool" ? (
+        <>
+          <TextField label="Kind of account" value={step.needs?.category ?? ""} mono disabled={dis} placeholder="mail" onChange={(v) => set({ needs: { category: v } })} help="The account is chosen by kind (mail, calendar, chat), never by product." />
+          <TextField label="Tool" value={step.tool} mono disabled={dis} placeholder="list_messages" onChange={(v) => set({ tool: v })} />
+          <TextField label="Which account" value={step.account ?? ""} disabled={dis} placeholder="you@company.com" onChange={(v) => set({ account: v || undefined })} help="Only when you have several of that kind." />
+          <DataPairs label="What to give it" value={step.input} available={available} samples={samples} disabled={dis} onChange={(v) => set({ input: v })} />
+        </>
+      ) : null}
+
+      {step.kind === "brain.read" ? (
+        <>
+          <SelectField label="How" value={step.op} options={OP_OPTIONS} disabled={dis} onChange={(v) => set({ op: v })} />
+          <DataPairs label="What to look for" value={step.input} available={available} samples={samples} disabled={dis} onChange={(v) => set({ input: v })} />
+        </>
+      ) : null}
+
+      {step.kind === "condition" ? (
+        <DataInput label="Go the Yes way when" value={step.if} mono multiline rows={3} disabled={dis} available={available} samples={samples} onChange={(v) => set({ if: v })} help="Anything else goes the No way. Branches are drawn on the canvas; add steps to each with +." />
+      ) : null}
+
+      {step.kind === "loop" ? (
+        <>
+          <DataInput label="Go through" value={step.over} mono disabled={dis} available={available} samples={samples} onChange={(v) => set({ over: v })} help="A list from an earlier step." />
+          <NumberField label="At most" value={step.max} min={1} max={500} disabled={dis} onChange={(v) => set({ max: v })} help="How many items it will go through." />
+          <DataInput label="Collect from each pass" value={step.collect ?? ""} mono disabled={dis} available={available} samples={samples} onChange={(v) => set({ collect: v || undefined })} help="Optional: what to keep from every pass, as a list." />
+        </>
+      ) : null}
+
+      {step.kind === "set" ? <DataPairs label="Values" value={step.values} available={available} samples={samples} disabled={dis} keyLabel="Name" onChange={(v) => set({ values: v })} /> : null}
+
+      {step.kind === "wait" ? (
+        <>
+          <TextField label="Wait for" value={step.for ?? ""} mono disabled={dis} placeholder="10m" onChange={(v) => set({ for: v || undefined, ...(v ? { until: undefined } : {}) })} help="A number and a unit: 30s, 10m, 2h, 3d. Nothing runs while it waits." />
+          <DataInput label="Or wait until" value={step.until ?? ""} mono disabled={dis} available={available} samples={samples} onChange={(v) => set({ until: v || undefined, ...(v ? { for: undefined } : {}) })} help="A time, as data." />
+        </>
+      ) : null}
+
+      {step.kind === "stop" ? (
+        <>
+          <DataInput label="Message" value={step.message} multiline rows={3} disabled={dis} available={available} samples={samples} onChange={(v) => set({ message: v })} />
+          <SelectField
+            label="Ends as"
+            value={step.as ?? "done"}
+            disabled={dis}
+            onChange={(v) => set({ as: v === "done" ? undefined : v })}
+            options={[
+              { value: "done", label: "Done" },
+              { value: "failed", label: "Failed" },
+            ]}
+          />
+        </>
+      ) : null}
+
+      {step.kind === "notify" ? <DataInput label="Message" value={step.message} multiline rows={3} disabled={dis} available={available} samples={samples} onChange={(v) => set({ message: v })} help="A line for the owner, in their Needs you." /> : null}
+
+      {step.kind === "search" ? (
+        <>
+          <DataInput label="Search for" value={step.query} multiline rows={2} disabled={dis} available={available} samples={samples} onChange={(v) => set({ query: v })} />
+          <NumberField label="How many results" value={step.limit} min={1} max={20} disabled={dis} onChange={(v) => set({ limit: v })} />
+        </>
+      ) : null}
+
+      {step.kind === "llm" ? (
+        <>
+          <DataInput label="What to ask" value={step.prompt} multiline rows={6} disabled={dis} available={available} samples={samples} onChange={(v) => set({ prompt: v })} />
+          <SelectField label="Which model" value={step.tier ?? "fast"} options={TIER_OPTIONS} disabled={dis} onChange={(v) => set({ tier: v })} help="Quick is cheaper. Careful thinks longer." />
+          <TextField label="Standing instructions" value={step.system ?? ""} multiline rows={2} disabled={dis} onChange={(v) => set({ system: v || undefined })} help="Optional instructions that frame every answer." />
+        </>
+      ) : null}
+
+      {step.kind === "agent" ? (
+        <>
+          <DataInput label="What the agent should do" value={step.instructions} multiline rows={7} disabled={dis} available={available} samples={samples} onChange={(v) => set({ instructions: v })} help="Plain words. The agent may use your apps and connected accounts, within what you can reach." />
+          <NumberField label="Most it may spend" value={step.cap_credits} min={1} disabled={dis} onChange={(v) => set({ cap_credits: v })} help="In credits. The run stops the agent there." />
+        </>
+      ) : null}
+
+      {step.kind === "zero" ? (
+        <>
+          <TextField label="Paid service" value={step.capability ?? ""} mono disabled={dis} placeholder="the service's name" onChange={(v) => set({ capability: v })} help="The name the platform's catalog of paid services gave it." />
+          <DataInput label="Address" value={step.url ?? ""} mono disabled={dis} available={available} samples={samples} onChange={(v) => set({ url: v })} help="The service's own web address, starting with https://." />
+          <SelectField label="How it is called" value={step.method ?? "GET"} options={METHOD_OPTIONS} disabled={dis} onChange={(v) => set({ method: v === "GET" ? undefined : v })} help="Ask puts what you give it on the address; the others send it as a body." />
+          <DataPairs label="What to give it" value={step.input} available={available} samples={samples} disabled={dis} onChange={(v) => set({ input: v })} />
+          <NumberField label="Most one call may cost, in dollars" value={step.max_pay_usd} min={0.01} max={2} step={0.01} disabled={dis} onChange={(v) => set({ max_pay_usd: v })} help="The step never pays more than this, and the same call is not paid for twice. It comes out of your credits." />
+        </>
+      ) : null}
+
+      {step.kind === "automation" ? (
+        <>
+          <TextField label="Which automation" value={step.key} mono disabled={dis} placeholder="morning-read" onChange={(v) => set({ key: v })} />
+          <DataPairs label="What to give it" value={step.input} available={available} samples={samples} disabled={dis} onChange={(v) => set({ input: v })} />
+        </>
+      ) : null}
+
+      <section className="grid gap-3 border-t border-border pt-3">
+        <h4 className="m-0 text-2xs font-semibold uppercase tracking-wide text-muted-foreground">If it fails</h4>
+        <SelectField label="After the tries are used up" value={step.on_error ?? "stop"} options={FAIL_OPTIONS} disabled={dis} onChange={(v) => set({ on_error: v === "stop" ? undefined : v })} help="The agent steps in first, if the flow lets it." />
+        <NumberField label="Tries after the first" value={step.retry?.max} min={0} max={5} disabled={dis} placeholder="3" onChange={(v) => set({ retry: v === undefined ? undefined : { max: v } })} help="For a slow or busy service. Leave empty for the usual three." />
+      </section>
+
+      {problems.length > 0 ? (
+        <div role="alert" className="grid gap-1 rounded-lg border border-destructive/50 bg-destructive/10 p-3">
+          <h4 className="m-0 flex items-center gap-1.5 text-sm font-semibold text-destructive">
+            <Icon name="warning" size={14} /> To fix
+          </h4>
+          <ul className="m-0 grid list-disc gap-0.5 pl-5 text-[13px]">
+            {problems.map((x) => (
+              <li key={x}>{x}</li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      <p className="m-0 text-xs text-muted-foreground">
+        Step id <span className="font-mono">{step.id}</span>
+      </p>
+
+      <Confirm
+        open={confirming}
+        onClose={() => setConfirming(false)}
+        onConfirm={() => {
+          setConfirming(false);
+          onRemove?.();
+        }}
+        title="Remove this step?"
+        body={`This also removes the ${inner} step${inner === 1 ? "" : "s"} inside it.`}
+        confirmLabel="Remove"
+        tone="danger"
+      />
+    </SidePanel>
+  );
+}