makersclaw 0.8.0 → 0.8.1

package/registry/blocks/automations-screen/demo.jsx

@@ -0,0 +1,364 @@
+"use client";
+
+// AutomationsScreen over a pretend platform — the gallery's and the smoke
+// test's surface. Not installed into apps. The platform's hooks are written
+// here, in memory, and handed to the block as `hooks`, exactly as an app hands
+// its lib/hooks. A scenario picker draws each state: many automations, one,
+// none (the first-run screen), still loading, the list failing to load, an
+// older platform without the engine, an app whose job is still its old
+// schedule (read-only), and an automation that will not open. A width picker
+// shows the page at 1280, 800, 368 and 320 px of the block's own width.
+//
+// Try: open a row (Back returns to the list with its search kept), Test run
+// then Back from the run, Runs then a run then Back (it returns to Runs),
+// the app's own tab on Morning read, Delete a row (a toast with Undo),
+// New automation from a starting point, the switch on a row. The line under
+// the pickers is the page address the place would travel in.
+import { useMemo, useState, useSyncExternalStore } from "react";
+import { AppLayout, Button, ButtonGroup, Notice } from "../components/ui";
+import { AutomationsScreen, paramsOfPlace, placeFromParams } from "../components/blocks/automations-screen";
+
+const MORNING = {
+  format: 1,
+  key: "morning-read",
+  name: "Morning read",
+  does: "Reads your mail, saves who wrote, drafts the follow-ups that are owed.",
+  trigger: { type: "schedule", cron: "0 7 * * 1-5", tz: "team" },
+  inputs: {},
+  settings: { overlap: "skip", on_failure: "retry_then_agent", only_if_changed: false },
+  steps: [
+    { id: "mail", kind: "tool", label: "Read the mail since the last read", needs: { category: "mail" }, tool: "list_messages", input: { since: "{{ trigger.at }}", limit: 200 } },
+    { id: "touches", kind: "action", label: "Save who wrote", action: "record_touches", input: { touches: "{{ steps.mail.output.messages }}" } },
+    { id: "write", kind: "llm", label: "Write the follow-up", tier: "smart", prompt: "Write a short follow-up to the last person who wrote." },
+    { id: "tell", kind: "notify", message: "Morning read done." },
+  ],
+};
+const simple = (key, name, trigger, message = "Done.") => ({ format: 1, key, name, trigger, inputs: {}, settings: { overlap: "skip", on_failure: "retry_then_agent", only_if_changed: false }, steps: [{ id: "tell", kind: "notify", message }] });
+const FRIDAY = simple("friday-review", "Friday review", { type: "schedule", cron: "0 16 * * 5", tz: "team" }, "Friday review is ready.");
+const LONG = simple("long", "Every Monday morning, collect every deal that has gone quiet for more than three weeks, draft a short note to each owner and leave all of it for the team lead to read before the stand-up", { type: "schedule", cron: "0 9 * * 1", tz: "team" });
+
+const ACTIONS = [
+  { name: "record_touches", description: "Save who wrote to whom" },
+  { name: "suggest", description: "Leave a suggestion on Today" },
+];
+
+const T0 = "2026-10-09T11:00:00.000Z";
+const auto = (id, def, over = {}) => ({ id, def, liveDef: def, status: "off", live: 1, draft: 1, source: "member", versions: [{ version: 1, kind: "member", created_at: T0 }], runs: [], suggestions: [], passed: null, ...over });
+const SCENARIOS = {
+  many: () => ({
+    a1: auto("a1", MORNING, { status: "on", source: "package", versions: [{ version: 1, kind: "shipped", created_at: T0 }], runs: ["r1"], passed: 1 }),
+    a2: auto("a2", FRIDAY, { status: "on", runs: ["r2"], passed: 1 }),
+    a3: auto("a3", simple("weekly-signups", "Weekly signups", { type: "schedule", cron: "0 9 * * 1", tz: "team" })),
+    a4: auto("a4", simple("a-draft", "A draft I started", { type: "manual" }), { status: "draft", live: null }),
+    a5: auto("a5", LONG, { status: "on", passed: 1 }),
+  }),
+  one: () => ({ a1: auto("a1", MORNING, { status: "on", source: "package", versions: [{ version: 1, kind: "shipped", created_at: T0 }], runs: ["r1"], passed: 1 }) }),
+  none: () => ({}),
+  loading: () => ({}),
+  failed: () => ({}),
+  unavailable: () => ({}),
+  readonly: () => ({ a1: auto("a1", simple("morning", "Morning read", { type: "schedule", cron: "0 7 * * 1-5", tz: "team" }), { status: "on", source: "legacy" }), a2: auto("a2", simple("weekly-review", "Weekly look back", { type: "schedule", cron: "0 16 * * 5", tz: "team" }), { source: "legacy" }) }),
+  unopenable: () => ({ a1: auto("a1", MORNING, { status: "on" }), a2: auto("a2", FRIDAY) }),
+};
+const SCENARIO_LABELS = { many: "Many", one: "One", none: "None", loading: "Loading", failed: "Failed to load", unavailable: "No engine", readonly: "Read-only", unopenable: "Will not open" };
+
+const row = (step_id, over = {}) => ({ path: step_id, step_id, kind: "notify", attempt: 1, status: "done", started_at: T0, ended_at: T0, credits: 0, error: null, ...over });
+const PAST = {
+  r1: { id: "r1", status: "done", version: 1, trigger_type: "schedule", is_test: false, created_at: T0, started_at: T0, ended_at: "2026-10-09T11:01:00.000Z", credits: 4.2, cap_credits: 900, result: null, error: null, steps: [row("mail", { kind: "tool" }), row("touches", { kind: "action" }), row("write", { kind: "llm", credits: 4.2 }), row("tell")] },
+  r2: { id: "r2", status: "failed", version: 1, trigger_type: "schedule", is_test: false, created_at: T0, started_at: T0, ended_at: T0, credits: 0.8, result: null, error: { words: "The note could not be left." }, steps: [row("tell", { status: "failed", error: { code: "x", words: "The note could not be left." } })] },
+};
+const flat = (steps) => steps.flatMap((s) => [s, ...(s.then ?? []).flatMap((x) => flat([x])), ...(s.else ?? []).flatMap((x) => flat([x])), ...flat(s.steps ?? [])]);
+
+/** A platform in memory: the three hooks and two doors the block asks for. */
+function createPlatform(scenario) {
+  const state = { autos: SCENARIOS[scenario](), runs: { ...(scenario === "many" || scenario === "one" ? PAST : {}) }, deleted: {}, n: 0, tick: 0 };
+  const subs = new Set();
+  const bump = () => {
+    state.tick += 1;
+    subs.forEach((f) => f());
+  };
+  const useTick = () => useSyncExternalStore((f) => (subs.add(f), () => subs.delete(f)), () => state.tick, () => state.tick);
+  const rowOf = (a) => {
+    const last = a.runs.map((id) => state.runs[id]).filter(Boolean)[0];
+    return {
+      id: a.id,
+      key: a.def.key,
+      name: a.def.name,
+      status: a.status,
+      live_version: a.live,
+      draft_version: a.draft,
+      trigger: a.def.trigger,
+      tz: "America/New_York",
+      next_run_at: a.status === "on" && a.def.trigger.type === "schedule" ? "2026-10-12T11:00:00.000Z" : null,
+      last_run: last ? { status: last.status, started_at: last.created_at, credits: last.credits } : null,
+      active_runs: 0,
+      owner_kind: "app",
+      app_id: "crm",
+      edited: a.versions.some((v) => v.kind === "member"),
+      source: a.source,
+    };
+  };
+  const testView = (a, version) => (version === null || version === undefined ? null : { version, exempt: a.versions.some((v) => v.version === version && v.kind === "shipped"), passed: a.passed === version, last: null });
+  const needsTest = (a, version, opts) => !opts?.skipTest && !testView(a, version)?.exempt && a.passed !== version;
+  const REFUSED = { ok: false, status: 409, code: "needs_test", error: "Run a test of this version first. It reads your real data and changes nothing." };
+  const wait = (ms = 250) => new Promise((r) => setTimeout(r, ms));
+
+  const useAutomations = () => {
+    useTick();
+    if (scenario === "unavailable") return { automations: [], triggers: null, starts: [], describe: async () => ({ ok: false, code: "unavailable" }), loading: false, error: null, unavailable: true, reload() {}, setStatus: async () => ({ ok: false }), create: async () => ({ ok: false }) };
+    const loading = scenario === "loading";
+    const error = scenario === "failed" ? "not reachable" : null;
+    return {
+      automations: loading || error ? [] : Object.values(state.autos).map(rowOf),
+      triggers: null,
+      starts: [],
+      describe: async (ask) => {
+        await wait(600);
+        return ask.length < 24 ? { ok: false, code: "needs_answer", error: "I need a little more.", questions: ["Who should it tell?", "How often should it run?"] } : { ok: true, id: "a1" };
+      },
+      describing: false,
+      loading,
+      error,
+      code: undefined,
+      unavailable: false,
+      reload: bump,
+      setStatus: async (id, on) => {
+        await wait(150);
+        state.autos[id] = { ...state.autos[id], status: on ? "on" : "off" };
+        bump();
+        return { ok: true, status: 200, data: {} };
+      },
+      create: async (def) => {
+        const id = `n${++state.n}`;
+        state.autos[id] = auto(id, def, { status: "draft", live: null });
+        bump();
+        return { ok: true, status: 200, data: { id } };
+      },
+    };
+  };
+
+  const useAutomation = (id) => {
+    useTick();
+    const a = state.autos[id];
+    if (scenario === "loading") return { automation: null, definition: null, versions: [], runs: [], suggestions: [], tests: null, hook: null, loading: true, error: null, unavailable: false, busy: null, reload: bump };
+    const dead = scenario === "unopenable" || !a;
+    if (dead) return { automation: null, definition: null, versions: [], runs: [], suggestions: [], tests: null, hook: null, loading: false, error: "That did not open.", code: a ? undefined : "not_found", unavailable: false, busy: null, reload: bump };
+    const set = (patch) => {
+      state.autos[id] = { ...state.autos[id], ...patch };
+      bump();
+    };
+    return {
+      automation: { ...rowOf(a), tz: "America/New_York" },
+      live: a.live ? { version: a.live, definition: a.liveDef } : null,
+      draft: a.draft !== a.live ? { version: a.draft, definition: a.def } : null,
+      definition: a.def,
+      versions: [...a.versions].reverse(),
+      estimate: { credits: 3, credits_max: 12, steps: [] },
+      tests: { live: testView(a, a.live), draft: a.draft !== a.live ? testView(a, a.draft) : null },
+      runs: a.runs.map((r) => state.runs[r]).filter(Boolean),
+      suggestions: a.suggestions,
+      keepSuggestion: async () => ({ ok: true }),
+      dropSuggestion: async () => ({ ok: true }),
+      hook: null,
+      rotateHook: async () => ({ ok: true, hook: null }),
+      busy: null,
+      save: async (def, how) => {
+        await wait(150);
+        const latest = a.versions.length;
+        const base = how && typeof how === "object" ? how.baseVersion : latest;
+        if (base !== latest) return { ok: false, status: 409, code: "changed", latest, error: "Someone saved a newer version while you were editing." };
+        set({ def, draft: latest + 1, versions: [...a.versions, { version: latest + 1, kind: "member", created_at: new Date().toISOString() }] });
+        return { ok: true, status: 200, data: { version: latest + 1 } };
+      },
+      keep: async (o) => {
+        if (needsTest(a, a.draft, o)) return REFUSED;
+        set({ live: a.draft, liveDef: a.def });
+        return { ok: true, status: 200, data: {} };
+      },
+      setLive: async (on, o) => {
+        if (on && needsTest(a, a.live ?? a.draft, o)) return REFUSED;
+        set({ status: on ? "on" : "off" });
+        return { ok: true, status: 200, data: {} };
+      },
+      test: async (given = {}) => {
+        await wait(300);
+        const dry = !(given && given.dry === false);
+        const id2 = `t${++state.n}`;
+        const t = new Date().toISOString();
+        const standIn = new Set(["action", "notify"]);
+        const steps = flat(a.def.steps).map((s) => {
+          const would = dry && standIn.has(s.kind);
+          return row(s.id, { kind: s.kind, started_at: t, ended_at: t, credits: s.kind === "llm" ? 3 : 0, ...(would ? { simulated: true, output: { simulated: true, would: { kind: s.kind, effect: s.kind === "notify" ? "note" : "write", words: s.kind === "notify" ? "Would leave a note." : `Would run ${s.action}.` } } } : { output: { ok: true } }) });
+        });
+        const woulds = steps.filter((x) => x.simulated);
+        state.runs[id2] = { id: id2, status: "done", dry, version: a.draft, trigger_type: "manual", is_test: dry, created_at: t, started_at: t, ended_at: t, credits: 3, result: dry ? { dry: { simulated: woulds.length, would: woulds.map((x) => ({ step: x.step_id, path: x.path, kind: x.kind, effect: x.output.would.effect, words: x.output.would.words })), unchecked: [], sampled: [] } } : null, error: null, steps, automation_id: id };
+        set({ runs: [id2, ...a.runs], passed: a.draft });
+        return { ok: true, status: 200, data: { run_id: id2, test: dry, dry, version: a.draft } };
+      },
+      loading: false,
+      error: null,
+      code: undefined,
+      unavailable: false,
+      reload: bump,
+    };
+  };
+
+  const useAutomationRun = (runId) => {
+    useTick();
+    const r = runId ? state.runs[runId] : null;
+    const none = { run: null, steps: [], stepsVisible: false, automation: null, definition: null, fixes: [], detail: null, control: async () => ({ ok: true }), keepFix: async () => ({ ok: true }), dropFix: async () => ({ ok: true }), busy: null, loading: false, error: null, unavailable: false, reload: bump };
+    if (!r) return runId ? { ...none, error: "gone" } : none;
+    return { ...none, run: r, steps: r.steps, stepsVisible: true, detail: { run: r, automation: { name: "" }, steps: r.steps, steps_visible: true, fixes: [] } };
+  };
+
+  const deleteAutomation = async (id) => {
+    await wait(200);
+    const a = state.autos[id];
+    if (!a) return { ok: false, status: 404, code: "not_found", error: "That automation is not there any more." };
+    if (a.source === "package" || a.source === "legacy") return { ok: false, status: 409, code: a.source, error: "This one came with the app. Switch it off in the app's settings instead." };
+    state.deleted[id] = a;
+    delete state.autos[id];
+    bump();
+    return { ok: true, status: 200, data: { ok: true, id, name: a.def.name, was_status: a.status, followers: id === "a2" ? [{ id: "a3", key: "weekly-signups", name: "Weekly signups" }] : [], undo: true } };
+  };
+  const restoreAutomation = async (id) => {
+    await wait(150);
+    if (!state.deleted[id]) return { ok: false, status: 404, code: "not_found", error: "It could not be brought back." };
+    state.autos[id] = state.deleted[id];
+    delete state.deleted[id];
+    bump();
+    return { ok: true, status: 200, data: { ok: true, id } };
+  };
+
+  return { useAutomations, useAutomation, useAutomationRun, deleteAutomation, restoreAutomation };
+}
+
+const WIDTHS = [1280, 800, 368, 320];
+const CHARGE = { many: { used: 4180, of: 10000 }, one: { used: 0, of: 10000 } };
+
+function Page({ scenario }) {
+  const hooks = useMemo(() => createPlatform(scenario), [scenario]);
+  const [place, setPlace] = useState(() => placeFromParams(null));
+  const [asked, setAsked] = useState(null);
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <p className="m-0 shrink-0 border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground" role="status">
+        Page address: <b className="font-semibold text-foreground">{`?${new URLSearchParams({ view: "automations", ...paramsOfPlace(place) })}`}</b>
+        {asked ? ` · Describe it handed on: “${asked}”` : ""}
+      </p>
+      <div className="flex min-h-0 flex-1 flex-col">
+        <AutomationsScreen
+          key={scenario}
+          hooks={hooks}
+          place={place}
+          onPlace={setPlace}
+          actions={ACTIONS}
+          title="Automations"
+          intro="What the CRM does on its own. Open one to see its steps, change them, test it and switch it on."
+          allowance={CHARGE[scenario] ? { ...CHARGE[scenario], words: CHARGE[scenario].used > 0 ? "4,180 of 10,000 credits this week" : "10,000 credits a week" } : null}
+          starts={[
+            {
+              id: "quiet-monday",
+              name: "Look at who has gone quiet every Monday",
+              blurb: "The agent drafts a short follow-up for the people on open deals who have gone quiet. Nothing is sent.",
+              glyph: "agent",
+              needs: null,
+              build: (taken) => ({ ...simple(taken.has("quiet-monday") ? "quiet-monday-2" : "quiet-monday", "Who has gone quiet", { type: "schedule", cron: "30 8 * * 1", tz: "team" }, "Drafted the follow-ups."), does: "Drafts follow-ups for people who have gone quiet." }),
+            },
+          ]}
+          onDescribe={scenario === "one" ? (ask) => (setAsked(ask), Promise.resolve({ ok: true })) : "platform"}
+          describePrice=""
+          onRequest={
+            <section aria-labelledby="demo-on-request" className="grid gap-2">
+              <h2 id="demo-on-request" className="m-0 text-[13px] font-semibold">
+                On request
+              </h2>
+              <ul className="m-0 grid list-none rounded-md border border-border p-0">
+                {[
+                  ["The first read", "Once, when a mailbox connects: the last 30 days of mail and meetings."],
+                  ["Fill in", "When someone presses Fill in on a person, a company or a list's column."],
+                ].map(([name, when]) => (
+                  <li key={name} className="grid gap-0.5 border-b border-border px-3.5 py-2.5 text-[13px] last:border-b-0">
+                    <b className="font-semibold">{name}</b>
+                    <span className="text-muted-foreground">{when}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          }
+          extras={({ automations }) => <p className="m-0 text-xs text-muted-foreground">{automations.length} of the app's own automations are drawn above.</p>}
+          extraTabs={[
+            {
+              key: "reads",
+              label: "What it reads",
+              when: (a) => a.key === "morning-read",
+              render: () => (
+                <div className="grid max-w-3xl gap-1.5 p-5 text-[13px]">
+                  <b className="font-semibold">Mail</b>
+                  <p className="m-0 text-muted-foreground">For each email: who wrote to whom, when, the subject and one line. Never the full text.</p>
+                </div>
+              ),
+            },
+          ]}
+          aboveOne={({ automation, runId }) => (automation.key === "morning-read" && !runId ? <Notice tone="info">It needs a mailbox. Connect one on the desk.</Notice> : null)}
+          afterRun={() => <p className="m-0 shrink-0 border-t border-border px-4 py-2 text-xs text-muted-foreground">The app's own account of this run sits here.</p>}
+          frame={({ crumb, label, fill, children }) => (
+            <AppLayout
+              height="parent"
+              contentLabel={label}
+              contentMode={fill ? "fill" : "scroll"}
+              header={
+                <nav aria-label="Where you are" className="flex min-h-11 min-w-0 items-center gap-1 px-3 text-sm">
+                  {crumb.map((c, i) =>
+                    c.onPress ? (
+                      <span key={c.label} className="flex items-center gap-1">
+                        <Button size="sm" variant="quiet" onClick={c.onPress}>
+                          {c.label}
+                        </Button>
+                        <span aria-hidden="true" className="text-muted-foreground">
+                          ›
+                        </span>
+                      </span>
+                    ) : (
+                      <b key={`${c.label}-${i}`} className="min-w-0 truncate font-semibold">
+                        {c.label}
+                      </b>
+                    ),
+                  )}
+                </nav>
+              }
+            >
+              {children}
+            </AppLayout>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function AutomationsScreenDemo() {
+  const [width, setWidth] = useState(1280);
+  const [scenario, setScenario] = useState("many");
+  return (
+    <div className="grid gap-4 p-4">
+      <ButtonGroup aria-label="The state">
+        {Object.entries(SCENARIO_LABELS).map(([key, label]) => (
+          <Button key={key} size="sm" variant={key === scenario ? "primary" : "secondary"} onClick={() => setScenario(key)}>
+            {label}
+          </Button>
+        ))}
+      </ButtonGroup>
+      <ButtonGroup aria-label="The block's width">
+        {WIDTHS.map((w) => (
+          <Button key={w} size="sm" variant={w === width ? "primary" : "secondary"} onClick={() => setWidth(w)}>
+            {w} px
+          </Button>
+        ))}
+      </ButtonGroup>
+      <div className="flex h-[720px] w-full flex-col overflow-hidden rounded-lg border border-border" style={{ maxWidth: width }}>
+        <Page key={scenario} scenario={scenario} />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/automations-screen/index.js

@@ -0,0 +1,4 @@
+// The AutomationsScreen block — `makersclaw add automations-screen`. Fixed:
+// compose it through its props (README.md beside this file).
+export { AutomationsScreen } from "./automations-screen";
+export { deletedWords, normalizePlace, paramsOfPlace, placeFromParams } from "./screen-model";

package/registry/blocks/automations-screen/screen-model.js

@@ -0,0 +1,129 @@
+// The pure part of AutomationsScreen: where the member is (the place), how
+// the place travels in a URL, where Back goes, what a delete says, which
+// starting points are offered, which tabs an automation has. No React, no
+// network: a test runs every function here.
+
+/** The `automation` value of a screen that makes a new one. */
+export const NEW = "new";
+/** The two places inside one automation that every automation has. */
+export const FLOW = "flow";
+export const RUNS = "runs";
+
+const text = (v) => (typeof v === "string" && v.trim() ? v.trim() : null);
+const list = (v) => (Array.isArray(v) ? v : []);
+
+/**
+ * A place, made well-formed. The list is `{ automation: null }`. One
+ * automation is `{ automation: <id>, tab, run }`: `tab` is `flow` (default),
+ * `runs`, or the key of an extra tab; `run` is a run's id. A new one is
+ * `{ automation: "new", start }`, `start` being the starting point's id.
+ */
+export function normalizePlace(p) {
+  const o = p && typeof p === "object" ? p : {};
+  const automation = text(o.automation);
+  if (!automation) return { automation: null, tab: FLOW, run: null, start: null };
+  if (automation === NEW) return { automation: NEW, tab: FLOW, run: null, start: text(o.start) };
+  return { automation, tab: text(o.tab) ?? FLOW, run: text(o.run), start: null };
+}
+
+/** Which screen a place is: list · new · one · run. */
+export function whereOf(place) {
+  const p = normalizePlace(place);
+  if (!p.automation) return "list";
+  if (p.automation === NEW) return "new";
+  return p.run ? "run" : "one";
+}
+
+export const samePlace = (a, b) => JSON.stringify(normalizePlace(a)) === JSON.stringify(normalizePlace(b));
+
+/** A place from the page's query string: `placeFromParams(useSearchParams())`,
+ *  a URLSearchParams, or a function name → value. The names are `automation`,
+ *  `tab`, `run`, `start`. */
+export function placeFromParams(params) {
+  const get = typeof params === "function" ? params : (name) => (params && typeof params.get === "function" ? params.get(name) : null);
+  return normalizePlace({ automation: get("automation"), tab: get("tab"), run: get("run"), start: get("start") });
+}
+
+/** The query parameters of a place, only what is set: the list is `{}`. Spread
+ *  them into your own (`{ view: "automations", ...paramsOfPlace(place) }`). */
+export function paramsOfPlace(place) {
+  const p = normalizePlace(place);
+  if (!p.automation) return {};
+  return {
+    automation: p.automation,
+    ...(p.tab !== FLOW && !p.run ? { tab: p.tab } : {}),
+    ...(p.run ? { run: p.run } : {}),
+    ...(p.start ? { start: p.start } : {}),
+  };
+}
+
+/**
+ * Where the member came from when a run opened: remembered so that Back from
+ * a run returns to the tab it was opened from (the Runs list), not always to
+ * the flow. `from` and `to` are the places before and after a move; `origin`
+ * is what was remembered. Choosing another run from inside a run keeps it.
+ */
+export function originAfter(from, to, origin = null) {
+  const a = normalizePlace(from);
+  const b = normalizePlace(to);
+  if (!b.run) return null;
+  if (a.run) return origin;
+  return a.automation === b.automation ? a : null;
+}
+
+/** The place Back from a run goes to: the tab the run was opened from, else the flow. */
+export function backFrom(place, origin = null) {
+  const p = normalizePlace(place);
+  const o = origin ? normalizePlace(origin) : null;
+  if (o && o.automation === p.automation && !o.run && o.tab !== FLOW) return { automation: p.automation, tab: o.tab, run: null, start: null };
+  return { automation: p.automation, tab: FLOW, run: null, start: null };
+}
+
+/**
+ * The words after a delete: a title, what followed it (the automations that
+ * started when it finished and now never will), and whether Undo is offered.
+ * `done` is the platform's answer `{ id, name, followers, undo }`.
+ */
+export function deletedWords(done, fallbackName = "") {
+  const name = text(done?.name) ?? text(fallbackName);
+  const followers = list(done?.followers).filter((f) => f && text(f.name));
+  return {
+    title: name ? `Deleted “${name}”.` : "Deleted.",
+    detail: followers.length
+      ? `${followers.length} ${followers.length === 1 ? "automation" : "automations"} followed it and will no longer start: ${followers.map((f) => f.name).join(", ")}.`
+      : "",
+    undo: Boolean(done?.undo) && Boolean(text(done?.id)),
+  };
+}
+
+/** The starting points offered under New: the app's own first, then the platform's
+ *  (already turned into the list's shape), else the built-in ones. One of each id. */
+export function combineStarts(app, platform, builtIn) {
+  const seen = new Set();
+  const out = [];
+  for (const s of [...list(app), ...(list(platform).length ? list(platform) : list(builtIn))]) {
+    if (!s || typeof s.id !== "string" || seen.has(s.id)) continue;
+    seen.add(s.id);
+    out.push(s);
+  }
+  return out;
+}
+
+/** The tabs of one automation: Flow, Runs, then the app's own that apply to it. */
+export function tabsOf(extras, automation) {
+  const more = [];
+  for (const t of list(extras)) {
+    if (!t || typeof t.key !== "string" || t.key === FLOW || t.key === RUNS || typeof t.label !== "string") continue;
+    if (more.some((x) => x.key === t.key)) continue;
+    if (typeof t.when === "function" && !t.when(automation)) continue;
+    more.push(t);
+  }
+  return [{ key: FLOW, label: "Flow" }, { key: RUNS, label: "Runs" }, ...more.map((t) => ({ key: t.key, label: t.label }))];
+}
+
+/** What `hooks` must hold. A string naming what is missing, else null. */
+export function hooksProblem(hooks) {
+  if (!hooks || typeof hooks !== "object") return "AutomationsScreen needs hooks={{ useAutomations, useAutomation, useAutomationRun }} (from lib/hooks).";
+  const missing = ["useAutomations", "useAutomation", "useAutomationRun"].filter((k) => typeof hooks[k] !== "function");
+  return missing.length ? `AutomationsScreen: hooks is missing ${missing.join(", ")}.` : null;
+}

package/registry/blocks/chat-pane/README.md

@@ -0,0 +1,143 @@
+# ChatPane
+
+The desk's chat pane, as the app's own, in the app's theme (0.8.1). The
+founder, after reviewing the app agent's message box next to the
+Automations window's: "add claw's ChatPane as a block in the makersclaw
+template". This is that port: claw's `web/src/os/windows/artifact/ChatPane`
+and the composer of its `EveChat`, in JSX, with the kit's `Icon` and
+`Button` and the app's tokens, talking to the agent through the app's own
+hook (`useAgentPane`, `lib/hooks.js`) instead of `eve/client`.
+
+It is the **chrome around a conversation**:
+
+- **The head**: the title, **New chat**, **Chats** (the past chats drop over
+  the conversation, newest first, with a dot on one that needs you or is
+  working), and a close.
+- **The empty state**: before the first ask, one line, the recent chats
+  ("No chats yet. Your first message starts one." when there are none), and
+  the app's suggestions.
+- **The conversation**: its lines are the children. It stays at the newest
+  words until the member scrolls up, then offers a jump to latest.
+- **The bar** between the conversation and the box: what waits on the member,
+  or that the agent is working.
+- **The message box**: the desk's composer. **One rounded box.** The words
+  on top, full width, growing with what is typed. Under them a row: **+**
+  (attach) at the left, and at the right the **microphone** and a **round
+  arrow** to send. **While a turn runs, a round stop takes the arrow's
+  place** (once the member types, the arrow comes back: a message sent then
+  waits its turn, as before). A quiet `hint` can sit under the box.
+- **Files** by the + button, by paste and by a drop anywhere on the pane (up
+  to 4 files and 3 MB together); **dictation** where the browser has speech
+  recognition; the box **closed** while something waits on the member, with
+  the reason in its placeholder.
+- **A starting line** from the dock: `openAgent({ ask })` (blocks/agent-dock).
+  The pane sends it as the member's first words in a new chat, or puts it
+  in the box. See "Have the agent do it" below.
+
+```jsx
+import { ChatPane } from "../components/blocks/chat-pane";   // a Makersclaw app ("./blocks/chat-pane" from components/)
+import { ChatPane } from "@/components/makersclaw/blocks/chat-pane";   // a shadcn project
+```
+
+A client component. It needs the kit and nothing else; it is not tied to the
+agent's lines. **For the agent's conversation use `agent-pane`**, which
+draws the plan, the work folded into "Worked through N steps", the
+questions, the yes and what the agent made, inside this pane. Use `ChatPane`
+itself for lines of your own in the desk's frame.
+
+## What was ported, and what was not
+
+Ported: the head (New chat, Chats), the past chats list and its marks, the
+empty state, the scroll that follows, the composer (its layout, the
+attachments, the dictation, the send and stop), the closed box, and the
+hand-off seam in a form the app needs (the starting line).
+
+Not ported, because the app has no such thing: the desk's **rail** beside the
+chat (an app's agent lives in the dock, a column; the Chats overlay is the
+column mode's), the **binding** (headers, scope, the session pointer: the
+app's `useAgentPane` holds those), **`openSession`/`pendingLine`** (the desk's
+hand-off of a request into the agent's chat; the app's starting line does
+that job), **`chatMarks` "In Makersclaw"** (an ask made in Makersclaw shows
+as a pointer in the conversation instead) and the wallet gate (the platform
+refuses a turn with no credits and says so).
+
+## Props
+
+- `chat` — what `useAgentPane()` returns. Required. The pane calls its
+  `send(text, { files })`, `stop()`, `newChat()` and `openSession(id)` and
+  reads `sessionId`, `request`, `chats`, `view`/`turns`/`pending`/`state`
+  (to follow the newest words), `sameConversation`, `sending`, `loading`,
+  `error`, `notice`, `unavailable`.
+- `title` — the head's words, and the box's label. Default `"Ask the agent"`.
+- `suggestions` — asks that fit the moment, as chips before the first ask.
+- `empty` — one line before the first ask.
+- `placeholder` — the box's words before the first ask. Once there is a
+  conversation it says "Ask a follow-up…" unless `chat.sameConversation` is
+  false.
+- `closedWords` — the box's words while `blocked` ("Answer above first").
+- `hint` — a quiet line under the box ("Enter sends · Shift+Enter is a new
+  line").
+- `recent` — past chats listed before the first ask. Default `5`; `0` none.
+- `bare` — no head, inside a `Sheet` or a `Card` that has its own.
+- `fill` — default `true`: the pane takes its container's height and the
+  conversation scrolls inside it. `false`: compact, a capped height.
+- `onClose` — a close in the head. Inside an `agent-dock` it is the dock's.
+- `started` — there is a conversation to draw (else the empty state).
+- `busy` — a turn runs: the arrow is a stop while the box is empty.
+- `blocked` — something waits on the member: the whole box is closed.
+- `bar` — a node between the conversation and the box.
+- `children` — the conversation's lines.
+- `className` — layout around it. Never colour.
+
+`ChatComposer` is also exported, for a box of your own around the same
+frame: `value`, `onChange`, `onSubmit`, `onStop`, `onAttach`, `files`,
+`onRemoveFile`, `busy`, `canStop`, `stopping`, `blocked`, `sending`,
+`encoding`, `dictation` (`useDictation()`), `placeholder`, `label`, `hint`,
+`textareaRef`, `fileInputRef`. `ChatsList` draws the past chats.
+
+## Have the agent do it
+
+A button that says the agent will do the work does not open a form. It calls
+`openAgent("Draft a project plan for me")` (blocks/agent-dock). The dock
+opens, tells this pane the line through `ChatDockContext`, and the pane:
+
+1. starts a new chat (if one is open; `fresh: false` carries on in it),
+2. sends the line as the member's first words, once,
+3. and tells the dock it took it.
+
+With `send: false` it puts the line in the box instead, with the cursor at
+its end (words the member already typed stay, and the line goes under them). A closed box (something waits on the member) always takes the line
+as a prefill. The pure rule is `startStep(...)` in `chat-model.js`.
+
+## The model (plain functions)
+
+`ago(iso)`, `startStep({ start, handled, sessionId, blocked, canNew, newed })`,
+and the composer's parts: `addFiles`, `filesFromTransfer`, `readFile`,
+`formatBytes`, `MAX_FILES`, `MAX_BYTES`, `useDictation`.
+
+## Example
+
+```jsx
+"use client";
+import { useAgentPane } from "../lib/hooks";
+import { ChatPane } from "../components/blocks/chat-pane";
+
+export default function Notes() {
+  const chat = useAgentPane({ key: "notes" });
+  const messages = chat.view?.messages ?? [];
+  return (
+    <ChatPane
+      chat={chat}
+      title="Ask about your notes"
+      suggestions={["Summarise this week"]}
+      hint="Enter sends · Shift+Enter is a new line"
+      started={messages.length > 0}
+      busy={chat.state === "working"}
+    >
+      {messages.map((m) => (
+        <p key={m.id}>{m.text}</p>
+      ))}
+    </ChatPane>
+  );
+}
+```