makersclaw 0.8.0 → 0.8.1

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

@@ -0,0 +1,476 @@
+"use client";
+
+// The list: every automation, each a WHOLE row you press to open. A row
+// says what it does, when it runs, how its last run went, when the next is
+// due (in the automation's own zone) and what the last one cost, and
+// carries its on and off switch. The switch and the row keep their own
+// press: the row is a stretched button under the switch.
+//
+// With none yet, the screen is the starting points: a few ready-made flows
+// and a "New automation" button. With `onDescribe` it also opens with
+// "Describe it": a sentence in a box, and the platform drafts the automation
+// for the member to read, test and switch on. Props in, callbacks out; it
+// formats nothing it was not given a clock for (`now`), and reads no door.
+
+import { useMemo, useRef, useState } from "react";
+import { Button, Confirm, Icon, Menu, Sheet, Switch, cx } from "../../ui";
+import { Dot, Glyph, STARTING_POINTS, agoWords, clockWords, creditsWords, deleteWords, healthOf, originWords, startsFromPlatform, summaryOf, triggerWords } from "../automation-model";
+
+const DESCRIBE_PRICE = "1 call · about 1 cr";
+const DESCRIBE_CHIPS = ["Every Monday, mail me…", "When a deal is won, tell…", "When a message arrives, sort it…"];
+
+/** Starting points as the card draws them: the app's own (`build`) as they are,
+ *  the platform's raw ones (`definition`) turned into the same shape. */
+function ready(starts) {
+  const out = [];
+  for (const s of starts ?? []) {
+    if (s && typeof s.build === "function") out.push(s);
+    else if (s && s.definition) out.push(...startsFromPlatform([s]));
+  }
+  return out;
+}
+
+/** "needs payments, a mailbox · a model writes three lines · about 6 cr" (or "free"). */
+function startLine(s) {
+  const n = Number(s.price?.credits ?? 0);
+  const price = n > 0 ? `about ${creditsWords(n)}${s.price?.per === "each" ? " each" : ""}` : "free";
+  return [s.needs ? `needs ${s.needs}` : null, s.ai || null, price].filter(Boolean).join(" · ");
+}
+
+/** "Describe it": say what it should do in a sentence; the platform drafts it.
+ *  On success the new automation opens; a question is listed under the box. */
+function DescribeIt({ onDescribe, onOpen, price, chips, className }) {
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [said, setSaid] = useState(null);
+  const box = useRef(null);
+  const draft = async () => {
+    const ask = text.trim();
+    if (!ask || busy) return;
+    setBusy(true);
+    setSaid(null);
+    try {
+      const r = await onDescribe(ask);
+      if (r && r.ok) {
+        // An id opens the new automation; none means the sentence was handed on
+        // (to an agent beside the list, say): the box is empty for the next one.
+        if (r.id !== undefined && r.id !== null) onOpen?.(r.id);
+        else setText("");
+      } else if (r && Array.isArray(r.questions) && r.questions.length > 0) {
+        setSaid({ questions: r.questions });
+      } else {
+        setSaid({ error: (r && r.error) || "That did not work. Try saying it another way." });
+      }
+    } catch (e) {
+      setSaid({ error: e instanceof Error && e.message ? e.message : "That did not work. Try saying it another way." });
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <section aria-label="Describe it" className={cx("grid gap-2 rounded-lg border border-border bg-card p-3 text-card-foreground", className)}>
+      <h3 className="m-0 flex items-center gap-1.5 text-sm font-semibold">
+        <Icon name="wand" size={15} className="text-primary" /> Describe it
+      </h3>
+      <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>
+      <textarea
+        ref={box}
+        rows={2}
+        value={text}
+        disabled={busy}
+        aria-label="What should it do?"
+        placeholder="Every Monday morning, mail me the deals that have gone quiet"
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            void draft();
+          }
+        }}
+        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"
+      />
+      <div className="flex flex-wrap items-center gap-2">
+        <Button variant="primary" icon="wand" aria-busy={busy || undefined} disabled={busy || !text.trim()} onClick={() => void draft()}>
+          {busy ? "Drawing it…" : "Draft it"}
+          {!busy && price ? <span className="font-normal opacity-80">{price}</span> : null}
+        </Button>
+        {chips.map((c) => (
+          <button
+            key={c}
+            type="button"
+            disabled={busy}
+            onClick={() => {
+              setText(c);
+              box.current?.focus();
+            }}
+            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"
+          >
+            {c}
+          </button>
+        ))}
+      </div>
+      {said?.questions ? (
+        <div role="status" className="grid gap-1 text-[13px]">
+          <b className="font-semibold">Ask me about:</b>
+          <ul className="m-0 list-disc pl-5">
+            {said.questions.map((q) => (
+              <li key={q}>{q}</li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+      {said?.error ? (
+        <p role="alert" className="m-0 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-[13px]">
+          {said.error}
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
+function groupRows(rows, appName) {
+  const team = rows.filter((r) => r.owner_kind === "workspace");
+  const byApp = new Map();
+  for (const r of rows) if (r.owner_kind === "app" && r.app_id) byApp.set(r.app_id, [...(byApp.get(r.app_id) ?? []), r]);
+  const groups = [];
+  if (team.length) groups.push({ key: "team", title: "Team", rows: team });
+  [...byApp.entries()]
+    .map(([id, rs]) => ({ key: id, title: `From ${appName?.(id) ?? "an app"}`, rows: rs }))
+    .sort((a, b) => a.title.localeCompare(b.title))
+    .forEach((g) => groups.push(g));
+  return groups;
+}
+
+/** The sources the platform never deletes from here: an app's own job and what it shipped. */
+const KEEPS = new Set(["legacy", "package"]);
+
+/** The row's menu: Delete automation, or why it cannot be. */
+function rowMenu(row, onDelete) {
+  if (!onDelete) return null;
+  if (KEEPS.has(row.source)) {
+    return [{ label: "Delete automation", icon: "trash", disabled: true, description: "Comes with the app. Switch it off, or remove it in the app's settings." }];
+  }
+  return [{ label: "Delete automation", icon: "trash", tone: "danger", onSelect: () => onDelete(row) }];
+}
+
+function Row({ row, appName, now, busy, canToggle, showOrigin, onOpen, onToggle, onDelete }) {
+  const menu = rowMenu(row, onDelete);
+  const health = healthOf(row);
+  const trig = triggerWords(row.trigger);
+  const last = row.last_run;
+  const next = row.status === "on" ? clockWords(row.next_run_at, row.tz, now) : null;
+  const lastWhen = last ? (agoWords(last.started_at ?? row.last_run_at, now) ?? "") : "";
+  return (
+    <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")}>
+      {canToggle ? (
+        <span className="relative z-10 shrink-0">
+          <Switch
+            checked={row.status === "on"}
+            disabled={busy || row.live_version === null || row.live_version === undefined}
+            label={<span className="sr-only">{`${row.name} is ${row.status === "on" ? "on" : "off"}`}</span>}
+            onChange={(e) => onToggle(row, e.target.checked)}
+          />
+        </span>
+      ) : null}
+      <button
+        type="button"
+        data-card-link
+        onClick={() => onOpen(row.id)}
+        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]"
+      >
+        <span className="grid min-w-0 gap-0.5">
+          <b className="truncate text-sm font-semibold">{row.live_name ?? row.name}</b>
+          <span className="truncate text-xs text-muted-foreground">
+            {showOrigin ? `${originWords(row, appName)} · ` : ""}
+            {trig}
+            {row.edited ? " · edited" : ""}
+          </span>
+        </span>
+        <span className="grid min-w-0 gap-0.5">
+          <span className="inline-flex min-w-0 items-center gap-1.5 text-[13px]">
+            <Dot tone={health.tone} />
+            <span className="truncate">{health.text}</span>
+          </span>
+          {lastWhen ? <span className="text-xs text-muted-foreground">{lastWhen}</span> : null}
+        </span>
+        <span className="grid min-w-0 gap-0.5">
+          <span className="text-xs text-muted-foreground">Next</span>
+          <b className="truncate text-[13px] font-medium">{next ?? "—"}</b>
+        </span>
+        <span className="font-mono text-xs text-muted-foreground @xl:text-right">{last ? creditsWords(last.credits) : ""}</span>
+      </button>
+      {menu ? (
+        <span className="relative z-10 shrink-0">
+          <Menu label={`More for ${row.name}`} items={menu} />
+        </span>
+      ) : null}
+      <Icon name="chevron-right" size={16} className="shrink-0 text-muted-foreground" />
+    </li>
+  );
+}
+
+function Start({ s, onPick, autoFocus }) {
+  return (
+    <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">
+      <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>
+      <span className="grid min-w-0 gap-0.5">
+        <b className="text-sm font-semibold">{s.name}</b>
+        <span className="text-xs text-muted-foreground">{s.blurb}</span>
+        {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}
+      </span>
+    </button>
+  );
+}
+
+/**
+ * The picker "New automation" opens when there are already some.
+ *   open, onClose
+ *   starts       the starting points (default automation-model's STARTING_POINTS);
+ *                [{ id, name, blurb, glyph, needs, build(taken) }], or the platform's
+ *                (startsFromPlatform): plus { ai, price: { credits, per } }, drawn as
+ *                "needs payments, a mailbox · a model writes three lines · about 6 cr"
+ *   onPick(s), onBlank()
+ *   onDescribe, onOpen, describePrice, describeChips   as AutomationList's: "Describe it" at the top
+ */
+export function StartingPoints({ open, onClose, starts = STARTING_POINTS, onPick, onBlank, onDescribe, onOpen, describePrice = DESCRIBE_PRICE, describeChips = DESCRIBE_CHIPS }) {
+  const list = useMemo(() => ready(starts), [starts]);
+  return (
+    <Sheet open={open} onClose={onClose} side="center" title="New automation">
+      <div className="grid gap-2">
+        {onDescribe ? <DescribeIt onDescribe={onDescribe} onOpen={onOpen} price={describePrice} chips={describeChips} /> : null}
+        <Start s={{ name: "Start empty", blurb: "A trigger and a blank canvas." }} onPick={() => onBlank?.()} autoFocus={!onDescribe} />
+        {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}
+        {list.map((s) => (
+          <Start key={s.id} s={s} onPick={onPick} />
+        ))}
+      </div>
+    </Sheet>
+  );
+}
+
+/**
+ *   rows          the list: useAutomations().automations
+ *   appName(id)   an app's name, or null (a team list names apps)
+ *   appFilter     the app the list is filtered to, if any
+ *   grouped       group by Team and each app (default true); an app's own
+ *                 page passes false
+ *   starts        the first-run starting points (default automation-model's), or the
+ *                 platform's (useAutomations().starts, raw or through startsFromPlatform):
+ *                 each card also says what it needs, what a model does and what it costs
+ *   onDescribe(ask)   async: "Describe it". Resolves { ok, id? } (the new automation opens through
+ *                 onOpen(id)), { ok: false, questions: [..] } (listed under the box: "Ask me
+ *                 about: ...") or { ok: false, error } (shown). Without it, no Describe it card
+ *   describePrice what the button says it costs (default "1 call · about 1 cr")
+ *   describeChips sentences that start the box (default three: Monday mail, a won deal, a message)
+ *   onOpen(id)    a whole row opens
+ *   onNew(start?) New automation, or a starting point from the first-run screen
+ *   onToggle(row, on)   async: the switch; a refusal throws its words
+ *   onDelete(row) async: "Delete automation", in each row's menu, after a question that says what it does
+ *                 (Deletes "<name>". Its runs stay in history.; and, for one that is on, that it is
+ *                 switched off). Resolves { ok: true } (the screen says what followed: Undo, the
+ *                 automations that followed it) or { ok: false, error } (shown as it is). An app's own
+ *                 job and what an app shipped (`row.source` legacy, package) get the item disabled,
+ *                 pointing at the app's settings. Without it, no menu
+ *   canDelete     offer Delete automation at all (default true; hide it where the member may not)
+ *   canToggle     draw the switch (default true; hide it where the member may not)
+ *   canCreate     draw New automation (default true)
+ *   onClearFilter "Showing one app. Show all"
+ *   query         the search box's words to start with (default ""). A screen that leaves the list
+ *                 (to open an automation) and comes back hands back what the member typed
+ *   onQueryChange(text)  the search box changed: keep it where the screen keeps its place
+ *   title, intro  the head's words
+ *   now           the clock (a test hands one in)
+ */
+export 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 }) {
+  const [q, setQ] = useState(typeof query === "string" ? query : "");
+  const [pending, setPending] = useState(null);
+  const [error, setError] = useState(null);
+  const [choosing, setChoosing] = useState(false);
+  const [deleting, setDeleting] = useState(null);
+  const [deletingBusy, setDeletingBusy] = useState(false);
+  const now = useMemo(() => nowProp ?? new Date(), [nowProp]);
+  const startList = useMemo(() => ready(starts), [starts]);
+  const describeBox = onDescribe && canCreate ? <DescribeIt onDescribe={onDescribe} onOpen={onOpen} price={describePrice} chips={describeChips} /> : null;
+  const shown = useMemo(() => {
+    const t = q.trim().toLowerCase();
+    return t ? rows.filter((r) => `${r.name} ${r.key}`.toLowerCase().includes(t)) : rows;
+  }, [rows, q]);
+  const groups = useMemo(() => (grouped ? groupRows(shown, appName) : [{ key: "all", title: "", rows: shown }]), [shown, appName, grouped]);
+  const sum = useMemo(() => summaryOf(rows, now), [rows, now]);
+
+  const toggle = async (row, on) => {
+    setPending(row.id);
+    setError(null);
+    try {
+      await onToggle?.(row, on);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "That did not work.");
+    } finally {
+      setPending(null);
+    }
+  };
+
+  const askDelete = onDelete && canDelete ? (row) => setDeleting(row) : null;
+  const confirmDelete = async () => {
+    const row = deleting;
+    if (!row) return;
+    setDeletingBusy(true);
+    setError(null);
+    try {
+      const r = await onDelete(row);
+      if (r && r.ok === false) setError(r.error || "That did not work.");
+    } catch (e) {
+      setError(e instanceof Error && e.message ? e.message : "That did not work.");
+    } finally {
+      setDeletingBusy(false);
+      setDeleting(null);
+    }
+  };
+
+  const newButton = canCreate ? (
+    <Button variant="primary" icon="plus" onClick={() => (rows.length ? setChoosing(true) : onNew?.())}>
+      New automation
+    </Button>
+  ) : null;
+
+  if (rows.length === 0) {
+    return (
+      <div className={cx("grid min-w-0 content-start gap-4 p-4", className)}>
+        <header className="flex flex-wrap items-start justify-between gap-3">
+          <div className="grid gap-0.5">
+            <h2 className="m-0 text-lg font-semibold">{title}</h2>
+            <p className="m-0 text-sm text-muted-foreground">{appFilter ? "This app has none yet." : "Nothing runs on its own yet."}</p>
+          </div>
+          {canCreate ? (
+            <Button variant="primary" icon="plus" onClick={() => onNew?.()}>
+              New automation
+            </Button>
+          ) : null}
+        </header>
+        {canCreate ? (
+          <>
+            {describeBox}
+            <section className="grid gap-1 rounded-lg border border-dashed border-border p-4">
+              <h3 className="m-0 text-sm font-semibold">Start from a ready one</h3>
+              <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>
+            </section>
+            <div className="@container">
+              <div className="grid gap-2 @xl:grid-cols-2">
+                {startList.map((s) => (
+                  <Start key={s.id} s={s} onPick={onNew} />
+                ))}
+              </div>
+            </div>
+          </>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx("@container grid min-w-0 content-start gap-3 p-4", className)}>
+      <header className="flex flex-wrap items-start justify-between gap-3">
+        <div className="grid gap-0.5">
+          <h2 className="m-0 text-lg font-semibold">{title}</h2>
+          <p className="m-0 text-sm text-muted-foreground">{intro}</p>
+        </div>
+        {newButton}
+      </header>
+
+      {describeBox}
+
+      <div role="status" className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+        <span>
+          <b className="font-semibold text-foreground">{sum.on}</b> on
+        </span>
+        {sum.failing > 0 ? (
+          <span className="text-destructive">
+            <b className="font-semibold">{sum.failing}</b> failed last time
+          </span>
+        ) : null}
+        {sum.needs > 0 ? (
+          <span className="text-warning">
+            <b className="font-semibold">{sum.needs}</b> need{sum.needs === 1 ? "s" : ""} their owner
+          </span>
+        ) : null}
+        {sum.next ? (
+          <span>
+            Next: <b className="font-semibold text-foreground">{sum.next.name}</b>, {clockWords(sum.next.next_run_at, sum.next.tz, now)}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <label className="relative block min-w-0 max-w-sm flex-1">
+          <Icon name="search" size={14} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <input
+            type="search"
+            placeholder="Search automations"
+            aria-label="Search automations"
+            value={q}
+            onChange={(e) => {
+              setQ(e.target.value);
+              onQueryChange?.(e.target.value);
+            }}
+            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"
+          />
+        </label>
+        {appFilter && onClearFilter ? (
+          <Button size="sm" variant="secondary" onClick={onClearFilter}>
+            Showing one app. Show all
+          </Button>
+        ) : null}
+      </div>
+
+      {error ? (
+        <p role="alert" className="m-0 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm">
+          {error}
+        </p>
+      ) : null}
+
+      {shown.length === 0 ? <p className="m-0 text-sm text-muted-foreground">No automation matches “{q}”.</p> : null}
+      {groups.map((g) => (
+        <section key={g.key} aria-label={g.title || "Automations"} className="grid gap-1.5">
+          {g.title ? <h3 className="m-0 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{g.title}</h3> : null}
+          <ul className="m-0 grid list-none gap-1.5 p-0">
+            {g.rows.map((r) => (
+              <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} />
+            ))}
+          </ul>
+        </section>
+      ))}
+
+      <Confirm
+        open={deleting !== null}
+        onClose={() => (deletingBusy ? undefined : setDeleting(null))}
+        onConfirm={() => void confirmDelete()}
+        title="Delete this automation?"
+        body={deleting ? deleteWords(deleting.name, deleting.status) : ""}
+        confirmLabel="Delete"
+        tone="danger"
+        busy={deletingBusy}
+      />
+
+      <StartingPoints
+        open={choosing}
+        onClose={() => setChoosing(false)}
+        starts={startList}
+        onDescribe={onDescribe}
+        describePrice={describePrice}
+        describeChips={describeChips}
+        onOpen={(id) => {
+          setChoosing(false);
+          onOpen?.(id);
+        }}
+        onBlank={() => {
+          setChoosing(false);
+          onNew?.();
+        }}
+        onPick={(s) => {
+          setChoosing(false);
+          onNew?.(s);
+        }}
+      />
+    </div>
+  );
+}

package/registry/blocks/automation-list/block.json

@@ -0,0 +1,35 @@
+{
+  "name": "automation-list",
+  "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.",
+  "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.",
+  "tags": [
+    "automation",
+    "workflow",
+    "list",
+    "rows",
+    "schedule",
+    "job",
+    "health",
+    "next run",
+    "last run",
+    "cost",
+    "switch",
+    "enabled",
+    "starting points",
+    "templates",
+    "n8n",
+    "make"
+  ],
+  "exports": [
+    "AutomationList",
+    "StartingPoints"
+  ],
+  "files": [
+    "index.js",
+    "automation-list.jsx"
+  ],
+  "requires": [
+    "automation-model"
+  ]
+}

package/registry/blocks/automation-list/demo.jsx

@@ -0,0 +1,67 @@
+"use client";
+
+// AutomationList with pretend automations — the gallery's and the smoke
+// test's surface. Not installed into apps. Whole rows open, the switches
+// work, New automation opens the starting points; then the same list with
+// none (the first-run screen). A width picker shows 1280, 800, 368, 320.
+import { useState } from "react";
+import { Button, ButtonGroup } from "../components/ui";
+import { AutomationList } from "../components/blocks/automation-list";
+import { startsFromPlatform } from "../components/blocks/automation-model";
+
+const NOW = new Date("2026-10-11T12:00:00.000Z");
+const ROWS = [
+  { id: "a1", key: "morning-read", name: "Morning read", status: "on", live_version: 3, draft_version: 3, edited: true, owner_kind: "app", app_id: "crm", trigger: { type: "schedule", cron: "0 7 * * 1-5", tz: "team" }, tz: "America/New_York", next_run_at: "2026-10-12T11:00:00.000Z", last_run: { status: "done", started_at: "2026-10-09T11:00:03.000Z", credits: 4.2 }, active_runs: 0 },
+  { id: "a2", key: "friday-review", name: "Friday review", status: "on", live_version: 1, trigger: { type: "schedule", cron: "0 15 * * 5", tz: "team" }, tz: "America/New_York", next_run_at: "2026-10-16T19:00:00.000Z", last_run: { status: "failed", started_at: "2026-10-09T19:00:03.000Z", credits: 0.8 }, active_runs: 0, owner_kind: "app", app_id: "crm" },
+  { id: "a3", key: "weekly-signups", name: "Weekly signups", status: "off", live_version: 2, trigger: { type: "schedule", cron: "0 9 * * 1", tz: "team" }, tz: "UTC", next_run_at: null, last_run: null, owner_kind: "workspace", app_id: null },
+  { id: "a4", key: "new-one", name: "A draft I started", status: "draft", live_version: null, draft_version: 1, trigger: { type: "manual" }, tz: "UTC", last_run: null, owner_kind: "workspace", app_id: null },
+];
+// What the desk's GET automation-starts sends, turned into the cards' shape.
+const STARTS = startsFromPlatform([
+  { id: "weekly-digest", name: "A weekly digest by mail", blurb: "Collects the week and mails it to you.", needs: ["a mailbox"], ai: "a model writes three lines", credits: 6, glyph: "llm", definition: { format: 1, key: "weekly-digest", name: "Weekly digest", trigger: { type: "manual" }, inputs: {}, settings: {}, steps: [{ id: "tell", kind: "notify", message: "Hi" }] } },
+  { id: "monday-note", name: "A note every Monday", blurb: "Leaves a note at the start of each week.", needs: [], ai: "", credits: 0, glyph: "trigger-schedule", definition: { format: 1, key: "monday-note", name: "Monday note", trigger: { type: "manual" }, inputs: {}, settings: {}, steps: [{ id: "tell", kind: "notify", message: "Hi" }] } },
+]);
+// A pretend "Describe it": a short sentence gets questions back, a longer one gets drawn.
+const describe = async (ask) => {
+  await new Promise((r) => setTimeout(r, 700));
+  return ask.length < 24 ? { ok: false, code: "needs_answer", questions: ["Who should it tell?", "How often should it run?"] } : { ok: true, id: "a1" };
+};
+const WIDTHS = [1280, 800, 368, 320];
+
+export default function AutomationListDemo() {
+  const [width, setWidth] = useState(800);
+  const [rows, setRows] = useState(ROWS);
+  const [said, setSaid] = useState("Nothing pressed.");
+  return (
+    <div className="grid gap-4 p-4">
+      <ButtonGroup aria-label="The block's width">
+        {WIDTHS.map((w) => (
+          <Button key={w} size="sm" variant={w === width ? "primary" : "secondary"} onClick={() => setWidth(w)}>
+            {w} px
+          </Button>
+        ))}
+      </ButtonGroup>
+      <p className="m-0 text-sm" role="status">
+        {said}
+      </p>
+      <div className="w-full rounded-lg border border-border" style={{ maxWidth: width }}>
+        <AutomationList
+          rows={rows}
+          now={NOW}
+          appName={(id) => (id === "crm" ? "CRM" : null)}
+          starts={STARTS}
+          onDescribe={describe}
+          onOpen={(id) => setSaid(`Opened ${id}.`)}
+          onNew={(s) => setSaid(s ? `New from “${s.name}”.` : "New, blank.")}
+          onToggle={async (row, on) => {
+            await new Promise((r) => setTimeout(r, 400));
+            setRows(rows.map((x) => (x.id === row.id ? { ...x, status: on ? "on" : "off" } : x)));
+          }}
+        />
+      </div>
+      <div className="w-full rounded-lg border border-border" style={{ maxWidth: width }}>
+        <AutomationList rows={[]} appFilter="crm" starts={STARTS} onDescribe={describe} onOpen={(id) => setSaid(`Opened ${id}.`)} onNew={(s) => setSaid(s ? `New from “${s.name}”.` : "New, blank.")} />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/automation-list/index.js

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