makersclaw 0.8.0 → 0.8.2

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

@@ -0,0 +1,452 @@
+"use client";
+
+// The Automations page of an app, as one block. The places a member goes:
+//
+//   the list                 every automation as a row that opens whole, a switch,
+//                            New automation (starting points, Describe it), the
+//                            week's allowance once, and the app's own slots
+//   New                      a new one in the editor; not saved until Create
+//   one automation           its flow, edited, tested, kept and switched on;
+//                            its Runs; the app's own tabs
+//   one run                  step by step, with the run's controls and the
+//                            agent's fixes
+//
+// It composes `automation-list`, `automation-editor`, `run-view` and `cost`,
+// and decides only what they leave open: which place is showing (and how it
+// travels in a URL), Back to where the member WAS (the list with its search,
+// the Runs tab a run was opened from), what each editor is handed (the
+// platform's triggers, the webhook, the version a save began on), a delete
+// that asks first and can be undone, "Describe it", and the old schedule an
+// app has not updated yet (read-only).
+//
+// It reads nothing itself. The engine's hooks come in as `hooks`; a block may
+// not import lib/. Every wire is a prop; none given, the page still draws.
+
+import { useCallback, useMemo, useRef, useState } from "react";
+import { AppLayout, Button, Notice, Skeleton, Tabs, toast } from "../../ui";
+import { AutomationList } from "../automation-list";
+import { AutomationEditor } from "../automation-editor";
+import { RunView, RunsList } from "../run-view";
+import { STARTING_POINTS, blankAutomation, keyFromName, startsFromPlatform } from "../automation-model";
+import { Allowance } from "../cost";
+import { FLOW, NEW, RUNS, backFrom, combineStarts, deletedWords, hooksProblem, normalizePlace, originAfter, tabsOf } from "./screen-model";
+
+const FILL = "flex min-h-0 flex-1 flex-col";
+const LIST = normalizePlace(null);
+const UNDO_MS = 8000;
+const LEGACY_WORDS = "This one is the app's older schedule. Its steps come with the next update of the app; until then you can switch it on or off and run it.";
+const UNAVAILABLE_WORDS = "Automations are not set up on this Makersclaw yet.";
+
+/** A slot is a node, or a function that gets what it may need and returns one. */
+const slot = (s, arg) => (typeof s === "function" ? s(arg) : s ?? null);
+
+/** The frame when the app gives none: the kit's AppLayout, filling the slot it is in. */
+function defaultFrame({ label, fill, children }) {
+  return (
+    <AppLayout height="parent" contentLabel={label} contentMode={fill ? "fill" : "scroll"}>
+      {children}
+    </AppLayout>
+  );
+}
+
+function Said({ children, onBack, back = "Back to the automations" }) {
+  return (
+    <div className="grid content-start justify-items-start gap-3 p-5 text-sm">
+      <p className="m-0 text-muted-foreground">{children}</p>
+      {onBack ? (
+        <Button size="sm" variant="secondary" icon="arrow-left" onClick={onBack}>
+          {back}
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+/* ---- the list ---------------------------------------------------------- */
+
+function ListPage({ c }) {
+  const { list } = c;
+  const unavailable = Boolean(list.unavailable);
+  const waiting = list.loading && list.automations.length === 0 && !list.error && !unavailable;
+  const failed = !unavailable && !list.loading && list.automations.length === 0 && Boolean(list.error);
+  const ready = !unavailable && !waiting && !failed;
+  const a = c.allowance;
+  const body = (
+    <div className="@container grid min-w-0 content-start">
+      {a ? (
+        <div className="px-4 pt-4">
+          <Allowance used={a.used} of={a.of} words={a.words} title={null} className="max-w-md" />
+        </div>
+      ) : null}
+      {unavailable ? (
+        <p className="m-0 p-4 text-sm text-muted-foreground">{c.unavailableWords}</p>
+      ) : waiting ? (
+        <div aria-busy="true" aria-label="Loading the automations" className="grid gap-2 p-4">
+          <Skeleton className="h-6 w-1/3" />
+          <Skeleton shape="rect" className="h-16 w-full" />
+          <Skeleton shape="rect" className="h-16 w-full" />
+          <Skeleton shape="rect" className="h-16 w-full" />
+        </div>
+      ) : failed ? (
+        <div className="p-4">
+          <Notice tone="danger" title="The automations did not load." action={<Button size="sm" onClick={() => list.reload?.()}>Try again</Button>}>
+            Nothing was changed. Try again in a moment.
+          </Notice>
+        </div>
+      ) : (
+        <AutomationList
+          rows={list.automations}
+          grouped={false}
+          title={c.title}
+          intro={c.intro}
+          now={c.now}
+          starts={c.startList}
+          query={c.query}
+          onQueryChange={c.setQuery}
+          onOpen={(id) => c.go({ automation: id })}
+          onNew={(start) => c.go({ automation: NEW, ...(start ? { start: start.id } : {}) })}
+          onToggle={c.toggle}
+          canToggle={c.canToggle}
+          canCreate={c.canCreate}
+          canDelete={c.canDelete}
+          {...(c.remove ? { onDelete: (row) => c.remove(row.id) } : {})}
+          {...(c.describe ? { onDescribe: c.describe, describePrice: c.describePrice, describeChips: c.describeChips } : {})}
+        />
+      )}
+      {ready && c.onRequest ? <div className="px-4 pb-4">{slot(c.onRequest, { automations: list.automations })}</div> : null}
+      {ready && c.extras ? <div className="px-4 pb-4">{slot(c.extras, { automations: list.automations })}</div> : null}
+    </div>
+  );
+  return c.render([{ label: c.title }], c.title, false, body);
+}
+
+/* ---- one automation ---------------------------------------------------- */
+
+function OnePage({ c, id, runId, tab }) {
+  const { hooks, go, list } = c;
+  const a = hooks.useAutomation(id, c.every ? { every: c.every } : undefined);
+  const run = hooks.useAutomationRun(runId);
+  const root = { label: c.title, href: c.hrefOf?.(LIST), onPress: () => go({}) };
+  const crumb = [root, { label: a.automation?.name ?? "Automation" }];
+  const toList = () => go({});
+
+  if (a.unavailable) return c.render(crumb, "Automation", false, <Said>{c.unavailableWords}</Said>);
+  if (!a.automation || !a.definition) {
+    const gone = a.code === "not_found";
+    return c.render(
+      crumb,
+      "Automation",
+      false,
+      a.error ? <Said onBack={toList}>{gone ? "That automation is not there any more." : "That automation could not be opened."}</Said> : <Said>Opening…</Said>,
+    );
+  }
+
+  const au = a.automation;
+  const legacy = au.source === "legacy";
+  const tabList = tabsOf(c.extraTabs, au);
+  // The app's own tab pressed (tabsOf keeps only the keys and labels the strip needs).
+  const extra = tab !== FLOW && tab !== RUNS && tabList.some((t) => t.key === tab) ? (c.extraTabs ?? []).find((t) => t && t.key === tab) ?? null : null;
+  const here = (t) => (t === FLOW ? { automation: id } : { automation: id, tab: t });
+  const tabs = <Tabs value={extra ? tab : tab === RUNS ? RUNS : FLOW} onChange={(t) => go(here(t))} aria-label="This automation" tabs={tabList} className="border-b-0" />;
+  const ctx = { automation: au, definition: a.definition, tab, runId, go };
+
+  let body;
+  let fill = true;
+  if (runId) {
+    fill = Boolean(run.detail);
+    if (!run.detail) {
+      body = run.error ? <Said onBack={() => go(here(RUNS))} back="Back to the runs">That run could not be opened.</Said> : <Said>Opening the run…</Said>;
+    } else {
+      body = (
+        <>
+          <div className={FILL}>
+            <RunView
+              def={run.definition ?? a.definition}
+              versionNote={run.definition ? null : `This run used version ${run.run?.version}. The steps drawn are the current ones.`}
+              detail={run.detail}
+              runs={a.runs}
+              apps={c.apps}
+              tz={au.tz}
+              actions={c.actions}
+              ownedByApp={c.ownedByApp}
+              tabs={tabs}
+              name={au.name}
+              onBack={() => go(backFrom({ automation: id, run: runId }, c.origin.current))}
+              onPickRun={(r) => go({ automation: id, run: r })}
+              onRunAgain={async () => {
+                const r = await a.test({ dry: run.run?.dry === true });
+                if (r.ok) go({ automation: id, run: r.data.run_id });
+              }}
+              onControl={run.control}
+              controlBusy={run.busy}
+              onKeepFix={run.keepFix}
+              onDropFix={run.dropFix}
+            />
+          </div>
+          {slot(c.afterRun, { ...ctx, run: run.detail.run })}
+        </>
+      );
+    }
+  } else if (extra) {
+    fill = false;
+    body = (
+      <div>
+        <div className="px-4 pt-3">{tabs}</div>
+        {extra.render?.(ctx) ?? null}
+      </div>
+    );
+  } else if (tab === RUNS) {
+    fill = false;
+    body = (
+      <div>
+        <div className="px-4 pt-3">{tabs}</div>
+        <RunsList runs={a.runs} tz={au.tz} onOpen={(r) => go({ automation: id, run: r })} />
+      </div>
+    );
+  } else {
+    body = (
+      <div className={FILL}>
+        <AutomationEditor
+          key={id}
+          automationId={id}
+          status={au.status}
+          liveVersion={au.live_version}
+          draftVersion={au.draft_version}
+          baseline={a.definition}
+          versions={a.versions}
+          runs={a.runs}
+          estimate={a.estimate}
+          tests={a.tests}
+          apps={c.apps}
+          actions={c.actions}
+          runnable={c.runnable}
+          ownedByApp={c.ownedByApp}
+          triggers={list.triggers}
+          selfKey={au.key}
+          hook={a.hook}
+          onRotateHook={a.rotateHook}
+          source={au.source}
+          canEdit={!legacy}
+          canDelete={c.canDelete}
+          compareTo={a.live ? { version: a.live.version, definition: a.live.definition } : null}
+          tabs={tabs}
+          onBack={toList}
+          onSave={a.save}
+          onKeep={a.keep}
+          onLive={a.setLive}
+          onTest={async (inputs) => {
+            const r = await a.test({ inputs });
+            if (r.ok) go({ automation: id, run: r.data.run_id });
+            return r;
+          }}
+          onOpenRun={(r) => go({ automation: id, run: r })}
+          suggestions={a.suggestions}
+          onKeepSuggestion={a.keepSuggestion}
+          onDropSuggestion={a.dropSuggestion}
+          onFocus={c.onFocus}
+          {...(c.remove
+            ? {
+                onDelete: async () => {
+                  const r = await c.remove(id, au.name);
+                  if (r.ok) toList();
+                  return r;
+                },
+              }
+            : {})}
+        />
+      </div>
+    );
+  }
+
+  const above = slot(c.aboveOne, { ...ctx, run: run.detail?.run ?? null });
+  const label = au.name;
+  const framed = (
+    <div className={fill ? "flex h-full min-h-0 flex-col" : undefined}>
+      {legacy && c.legacyWords ? (
+        <div className="px-4 pt-3">
+          <Notice tone="info">{c.legacyWords}</Notice>
+        </div>
+      ) : null}
+      {above ? <div className="px-4 pt-3">{above}</div> : null}
+      {body}
+    </div>
+  );
+  return c.render(crumb, label, fill, framed);
+}
+
+/* ---- a new one --------------------------------------------------------- */
+
+function NewPage({ c, start }) {
+  const { go, list } = c;
+  const taken = new Set(list.automations.map((x) => x.key));
+  const picked = c.startList.find((s) => s.id === start);
+  const crumb = [{ label: c.title, href: c.hrefOf?.(LIST), onPress: () => go({}) }, { label: "New automation" }];
+  const body = (
+    <div className="flex h-full min-h-0 flex-col">
+      <AutomationEditor
+        key={start ?? "blank"}
+        automationId={null}
+        status="new"
+        baseline={picked ? picked.build(taken) : blankAutomation("", keyFromName("New automation", taken))}
+        apps={c.apps}
+        actions={c.actions}
+        runnable={c.runnable}
+        ownedByApp={c.ownedByApp}
+        triggers={list.triggers}
+        onFocus={c.onFocus}
+        onBack={() => go({})}
+        onSave={async (def) => {
+          const r = await list.create({ ...def, key: keyFromName(def.name, taken) });
+          if (r.ok) go({ automation: r.data.id });
+          return r;
+        }}
+      />
+    </div>
+  );
+  return c.render(crumb, "New automation", true, body);
+}
+
+/* ---- the screen -------------------------------------------------------- */
+
+export function AutomationsScreen({
+  hooks,
+  place: placeProp,
+  onPlace,
+  query: queryProp,
+  onQueryChange,
+  title = "Automations",
+  intro = "What this app does on its own. Open one to see its steps, change them, test it and switch it on.",
+  starts,
+  actions,
+  apps,
+  runnable,
+  ownedByApp = true,
+  allowance = null,
+  onRequest,
+  extras,
+  extraTabs,
+  aboveOne,
+  afterRun,
+  frame,
+  hrefOf,
+  onDescribe,
+  describePrice,
+  describeChips,
+  onToggled,
+  canToggle = true,
+  canCreate = true,
+  canDelete = true,
+  onFocus,
+  every,
+  legacyWords = LEGACY_WORDS,
+  unavailableWords = UNAVAILABLE_WORDS,
+  now,
+}) {
+  const problem = hooksProblem(hooks);
+  if (problem) return <Notice tone="danger">{problem}</Notice>;
+  return (
+    <Screen
+      {...{ hooks, placeProp, onPlace, queryProp, onQueryChange, title, intro, starts, actions, apps, runnable, ownedByApp, allowance, onRequest, extras, extraTabs, aboveOne, afterRun, frame, hrefOf, onDescribe, describePrice, describeChips, onToggled, canToggle, canCreate, canDelete, onFocus, every, legacyWords, unavailableWords, now }}
+    />
+  );
+}
+
+function Screen(p) {
+  const { hooks, placeProp, onPlace, queryProp, onQueryChange } = p;
+  // The place: the app's (a URL, say) when it passes one, else held here.
+  const controlled = placeProp !== undefined && placeProp !== null;
+  const [held, setHeld] = useState(LIST);
+  const place = normalizePlace(controlled ? placeProp : held);
+  const at = useRef(place);
+  at.current = place;
+  // Where a run was opened from, so Back returns there.
+  const origin = useRef(null);
+  const go = useCallback(
+    (next) => {
+      const to = normalizePlace(next);
+      origin.current = originAfter(at.current, to, origin.current);
+      at.current = to;
+      if (!controlled) setHeld(to);
+      onPlace?.(to);
+    },
+    [controlled, onPlace],
+  );
+  // The words in the list's search box outlive the automation that was opened.
+  const [typed, setTyped] = useState("");
+  const query = typeof queryProp === "string" ? queryProp : typed;
+  const setQuery = useCallback(
+    (t) => {
+      setTyped(t);
+      onQueryChange?.(t);
+    },
+    [onQueryChange],
+  );
+
+  const list = hooks.useAutomations(p.every ? { every: p.every } : undefined);
+  const platform = useMemo(() => startsFromPlatform(list.starts), [list.starts]);
+  const startList = useMemo(() => combineStarts(p.starts, platform, STARTING_POINTS), [p.starts, platform]);
+
+  const { deleteAutomation, restoreAutomation } = hooks;
+  const reload = list.reload;
+  // A delete that asks first (the blocks do) and can be taken back for a while.
+  const remove = useMemo(() => {
+    if (typeof deleteAutomation !== "function") return null;
+    return async (id, name = "") => {
+      const r = await deleteAutomation(id);
+      if (!r.ok) return { ok: false, error: r.error || "That did not work.", code: r.code };
+      const done = r.data && typeof r.data === "object" ? r.data : {};
+      reload?.();
+      const said = deletedWords({ id, ...done }, name);
+      toast(said.title, {
+        ...(said.detail ? { description: said.detail } : {}),
+        duration: UNDO_MS,
+        ...(said.undo && typeof restoreAutomation === "function"
+          ? {
+              action: {
+                label: "Undo",
+                onClick: async () => {
+                  const back = await restoreAutomation(done.id ?? id);
+                  if (back.ok) reload?.();
+                  else toast.error(back.error || "It could not be brought back.");
+                },
+              },
+            }
+          : {}),
+      });
+      return { ok: true };
+    };
+  }, [deleteAutomation, restoreAutomation, reload]);
+
+  const { setStatus } = list;
+  const { onToggled } = p;
+  const toggle = useCallback(
+    async (row, on) => {
+      const r = await setStatus(row.id, on);
+      if (!r.ok) throw new Error(r.error || "That did not work.");
+      await onToggled?.(row, on);
+    },
+    [setStatus, onToggled],
+  );
+
+  const { onDescribe } = p;
+  const describe = onDescribe === "platform" ? (ask) => list.describe(ask) : typeof onDescribe === "function" ? onDescribe : null;
+
+  const render = (crumb, label, fill, children) => (p.frame ?? defaultFrame)({ crumb, label, fill, children });
+  const c = {
+    ...p,
+    list,
+    startList,
+    go,
+    origin,
+    query,
+    setQuery,
+    remove,
+    toggle,
+    describe,
+    render,
+  };
+
+  if (place.automation === NEW) return <NewPage c={c} start={place.start} />;
+  if (place.automation) return <OnePage key={place.automation} c={c} id={place.automation} runId={place.run} tab={place.tab} />;
+  return <ListPage c={c} />;
+}

package/registry/blocks/automations-screen/block.json

@@ -0,0 +1,47 @@
+{
+  "name": "automations-screen",
+  "title": "AutomationsScreen",
+  "description": "The whole Automations page of an app as ONE block. The places a member goes: the list (every automation as a row that opens whole, a switch, New automation with starting points and Describe it, the week's allowance shown once, a slot for jobs that run on request and one for the app's own extras); a new automation in the editor; one automation (its flow, edited, tested, kept and switched on; its Runs; the app's own tabs); and one run, step by step with the run's controls and the agent's fixes. It composes automation-list, automation-editor, run-view and cost, and decides what they leave open: which place is showing and how it travels in a page address (placeFromParams, paramsOfPlace), Back to where the member WAS (the list with the words in its search box, the Runs tab a run was opened from), a save that names the version the copy began on, a delete that asks first and can be undone for a few seconds, the platform's triggers and webhook handed to both editors, Describe it (to the platform, or handed on to the agent beside the page), and an older schedule an app has not updated yet shown read-only. It reads nothing itself: the engine's hooks come in as a hooks prop.",
+  "useWhen": "An app has jobs that run on the automations engine and needs its Automations page: the list, the editor, the runs and a run, in the app's theme. One component, one source, so a fix to this page reaches every app through update. The app adds only what is its own: the allowance, jobs a press or an ask starts, extra tabs on an automation, a notice above one, its own starting points and its declared actions.",
+  "tags": [
+    "automation",
+    "automations",
+    "page",
+    "screen",
+    "workflow",
+    "builder",
+    "jobs",
+    "schedule",
+    "runs",
+    "run",
+    "editor",
+    "list",
+    "describe it",
+    "starting points",
+    "allowance",
+    "delete",
+    "undo",
+    "n8n",
+    "make",
+    "zapier"
+  ],
+  "exports": [
+    "AutomationsScreen",
+    "deletedWords",
+    "normalizePlace",
+    "paramsOfPlace",
+    "placeFromParams"
+  ],
+  "files": [
+    "index.js",
+    "automations-screen.jsx",
+    "screen-model.js"
+  ],
+  "requires": [
+    "automation-editor",
+    "automation-list",
+    "automation-model",
+    "cost",
+    "run-view"
+  ]
+}