makersclaw 0.7.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/chart/cartesian.jsx

@@ -523,7 +523,7 @@ function Cartesian({
         });
 
   return (
-    <div className={cx("grid min-w-0 gap-3", className)}>
+    <div className={cx("relative grid min-w-0 gap-3", className)}>
       <div
         ref={boxRef}
         tabIndex={0}

package/registry/blocks/chart/core.jsx

@@ -244,32 +244,42 @@ export function TooltipBox({ at, title, rows, footer }) {
 }
 
 /** The numbers behind the picture, for a screen reader: a real table,
- *  visually hidden. `head` the column names, `body` rows of strings. */
+ *  visually hidden. `head` the column names, `body` rows of strings.
+ *
+ *  The hiding is a div's, never the table's: a table takes `width: 1px`
+ *  as a least width and grows to its rows, and a browser need not clip a
+ *  table's overflow, so `sr-only` on the table itself left a box as wide
+ *  as its longest row, which pushed a phone's page past the window (the
+ *  store's probe at 375px, 2026-10-08). The div is 1px, clips what it
+ *  holds and is absolute inside the chart's own box (each chart's root
+ *  is `relative`); the table in it is a plain table, read as one. */
 export function DataTable({ caption, head, body }) {
   return (
-    <table className="sr-only">
-      <caption>{caption}</caption>
-      <thead>
-        <tr>
-          {head.map((h, i) => (
-            <th key={i} scope="col">{h}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {body.map((cells, r) => (
-          <tr key={r}>
-            {cells.map((c, i) =>
-              i === 0 ? (
-                <th key={i} scope="row">{c}</th>
-              ) : (
-                <td key={i}>{c}</td>
-              ),
-            )}
+    <div className="sr-only">
+      <table>
+        <caption>{caption}</caption>
+        <thead>
+          <tr>
+            {head.map((h, i) => (
+              <th key={i} scope="col">{h}</th>
+            ))}
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {body.map((cells, r) => (
+            <tr key={r}>
+              {cells.map((c, i) =>
+                i === 0 ? (
+                  <th key={i} scope="row">{c}</th>
+                ) : (
+                  <td key={i}>{c}</td>
+                ),
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
 

package/registry/blocks/chart/pie.jsx

@@ -168,7 +168,7 @@ export function PieChart({
       : { value: format(total), label: totalLabel };
 
   return (
-    <div className={cx("grid min-w-0 gap-3", className)}>
+    <div className={cx("relative grid min-w-0 gap-3", className)}>
       <div
         ref={boxRef}
         tabIndex={0}

package/registry/blocks/chat/README.md

@@ -127,7 +127,10 @@ not run.
   has no `author`.
 - `emptyTitle` · `emptyBody` · `emptyState` — what an empty thread says;
   `emptyState` replaces the whole thing.
-- `height` — default `"min(40rem, 80dvh)"`; the list scrolls inside it.
+- `height` — default `"min(40rem, 80dvh)"` (the block's own); the list
+  scrolls inside it. Yours is a length (`"40rem"`) or `"100%"` in a sized
+  box, such as the kit's `AppLayout contentMode="fill"`: a `vh` length in
+  your code is refused by `npm run check`.
 - `label` — what the thread is called to a screen reader.
 - `className` — layout around it (width, margin). Never colour.
 

package/registry/blocks/chat/demo.jsx

@@ -233,7 +233,7 @@ function SupportDemo() {
         emptyTitle="No messages yet"
         emptyBody="Ask about billing, your workspace or an invoice — Ada answers in a few seconds."
         label="Support chat"
-        height="min(44rem, 85dvh)"
+        height="44rem"
       />
     </div>
   );
@@ -412,7 +412,7 @@ function AssistantDemo() {
         emptyTitle="What should we look at?"
         emptyBody="Pip reads your orders, stock and returns. Pick a question or ask your own."
         label="Planning assistant"
-        height="min(40rem, 85dvh)"
+        height="40rem"
       />
     </div>
   );