makersclaw 0.8.0 → 0.8.2

package/registry/blocks/ask-bar/ask-bar.jsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Icon, IconButton, Input, Spinner, cx } from "../../ui";
+
+// AskBar — one line to ask the app's agent, with chips that fit the
+// moment (the app kit, D15). It is the door into the conversation, not
+// the conversation: after a send it says where the ask stands in one
+// line ("Working…", "Waiting for you", "Answered") with an
+// Open that shows the chat wherever the screen keeps it (a sheet, the
+// inspector, the agent-chat block). Fed by the object useAgentThread()
+// returns (lib/hooks.js), or by your own `onAsk(text)`.
+//
+//   const chat = useAgentThread({ row: { kind: "deal", id, name } });
+//   <AskBar chat={chat} suggestions={["Who should I call today?"]} onOpen={() => setOpen(true)} />
+//
+// Never an Approve: an ask that needs the member's yes or answer says so
+// here ("Waiting for you") and Open shows it where the screen keeps its
+// chat, where the question is answered and the yes is given (the
+// `agent-chat` and `approval` blocks, D18/D19). A need the app cannot
+// settle (connecting an account, spending money) opens the desk.
+
+/** The thread's state as one line. */
+const STATE = {
+  queued: { words: "Working…", busy: true },
+  working: { words: "Working…", busy: true },
+  needs_you: { words: "Waiting for you", icon: "warning", tone: "text-warning" },
+  done: { words: "Answered", icon: "check", tone: "text-success" },
+  stopped: { words: "Stopped", icon: "stop", tone: "text-muted-foreground" },
+  failed: { words: "It didn't finish", icon: "warning", tone: "text-destructive" },
+};
+
+function lastAsk(chat) {
+  if (chat?.pending) return chat.pending;
+  const turns = chat?.turns ?? [];
+  for (let i = turns.length - 1; i >= 0; i -= 1) if (turns[i]?.member) return turns[i].member;
+  return null;
+}
+
+/**
+ *   chat         what useAgentThread() returns; asks go to chat.send(text)
+ *   onAsk(text)  instead of `chat`: your own sender (it may be async)
+ *   state        with onAsk: the ask's state as useAgentThread names it
+ *                (queued · working · needs_you · done · stopped · failed)
+ *   suggestions  asks that fit the moment, as chips; a chip sends its words
+ *   placeholder  the box's words (default "Ask the agent…")
+ *   label        the box's name for a reader (default "Ask the agent")
+ *   onOpen()     shows the conversation; without it there is no Open
+ *   openOnSend   true: a send also calls onOpen
+ *   className    layout around it. Never colour.
+ */
+export function AskBar({
+  chat,
+  onAsk,
+  state: stateProp,
+  suggestions = [],
+  placeholder = "Ask the agent…",
+  label = "Ask the agent",
+  onOpen,
+  openOnSend = false,
+  className,
+}) {
+  const [text, setText] = useState("");
+  const [asked, setAsked] = useState(null);
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(null);
+
+  const state = chat ? (chat.pending && !chat.state ? "queued" : chat.state) : stateProp;
+  const line = state ? STATE[state] : null;
+  const ask = chat ? lastAsk(chat) : asked;
+  const needsYou = state === "needs_you";
+  const unavailable = Boolean(chat?.unavailable);
+  const busy = sending || Boolean(chat?.sending);
+  const error = chat?.error || failed;
+  // Waiting on the member: Open shows the chat when the app settles it
+  // there (a question to answer, a yes to press); else it goes to the desk.
+  const inApp = chat?.needs?.in_app === "answer" || chat?.needs?.in_app === "press";
+  const toDesk = needsYou && !(inApp && onOpen) && Boolean(chat?.openOnDesk);
+  const openNow = toDesk ? () => chat.openOnDesk() : onOpen;
+
+  async function send(words) {
+    const t = String(words ?? text).trim();
+    if (!t || busy || needsYou || unavailable) return;
+    setFailed(null);
+    setText("");
+    setAsked(t);
+    if (chat?.send) chat.send(t);
+    else if (onAsk) {
+      setSending(true);
+      try {
+        const r = await onAsk(t);
+        if (r && r.ok === false) setFailed(r.error || "That ask didn't go through. Try again.");
+      } catch (e) {
+        setFailed(e?.message || "That ask didn't go through. Try again.");
+      }
+      setSending(false);
+    }
+    if (openOnSend && onOpen) onOpen();
+  }
+
+  return (
+    <div className={cx("@container grid grid-cols-1 min-w-0 gap-2 text-sm", className)}>
+      <form
+        className="flex min-w-0 items-center gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          send();
+        }}
+      >
+        <span className="relative min-w-0 flex-1">
+          <Icon name="sparkles" size={16} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            aria-label={label}
+            value={text}
+            disabled={needsYou || unavailable}
+            placeholder={needsYou ? (inApp ? "Answer in the chat first" : "Answer on the desk first") : placeholder}
+            onChange={(e) => setText(e.target.value)}
+            className="pl-9"
+          />
+        </span>
+        <IconButton icon="arrow-up" label="Send" variant="primary" type="submit" loading={busy} disabled={!text.trim() || busy || needsYou || unavailable} />
+      </form>
+
+      {suggestions.length && !needsYou && !unavailable ? (
+        <div className="flex min-w-0 flex-wrap gap-1.5" role="group" aria-label="Suggested asks">
+          {suggestions.map((s) => (
+            <button
+              key={s}
+              type="button"
+              disabled={busy}
+              onClick={() => send(s)}
+              className="flex max-w-full min-w-0 items-start gap-1.5 rounded-[var(--radius)] border border-border px-2.5 py-1 text-left text-xs hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50"
+            >
+              <Icon name="sparkles" size={12} className="mt-0.5 shrink-0 text-muted-foreground" />
+              <span className="min-w-0 break-words">{s}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {line ? (
+        // The state and Open on one line, the ask it is about under it,
+        // cut to one line: at 320px nothing wraps into a third.
+        <div role="status" className="grid grid-cols-1 min-w-0 gap-0.5 text-xs text-muted-foreground">
+          <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
+            {line.busy ? <Spinner size="sm" label="Working" /> : <Icon name={line.icon} size={14} className={cx("shrink-0", line.tone)} />}
+            <span className={cx("font-medium", needsYou ? "text-foreground" : null)}>{line.words}</span>
+            {openNow ? (
+              <Button variant="link" size="inherit" onClick={openNow} className="shrink-0">
+                {toDesk ? "Open the desk" : "Open"}
+              </Button>
+            ) : null}
+          </span>
+          {ask ? <span className="min-w-0 truncate pl-[22px]">“{ask}”</span> : null}
+        </div>
+      ) : null}
+
+      {error ? (
+        <p role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+      {unavailable ? <p className="text-xs text-muted-foreground">Asking from here is not connected yet.</p> : null}
+    </div>
+  );
+}

package/registry/blocks/ask-bar/block.json

@@ -0,0 +1,26 @@
+{
+  "name": "ask-bar",
+  "title": "AskBar",
+  "description": "One line to ask the app's agent, with chips that fit the moment (they wrap, never run off). After a send it says where the ask stands in one line — \"Working…\", \"Waiting for you on the desk\", \"Answered\" — with an Open that shows the conversation wherever the screen keeps it. It draws what useAgentThread() returns (lib/hooks.js) and sends through it, or calls your own onAsk(text). Never an Approve: a yes is given on the desk.",
+  "useWhen": "A home screen, a list's head or a record's timeline should take an ask in one line and keep the page in view: CRM's Today, the Ask box under a record. Pair it with agent-chat (in a Sheet or the inspector) for the conversation it opens. For the full chat in place, use agent-chat alone.",
+  "tags": [
+    "ask",
+    "agent",
+    "ai",
+    "prompt",
+    "command",
+    "chips",
+    "suggestions",
+    "assistant",
+    "copilot",
+    "search bar"
+  ],
+  "exports": [
+    "AskBar"
+  ],
+  "files": [
+    "index.js",
+    "ask-bar.jsx"
+  ],
+  "requires": []
+}

package/registry/blocks/ask-bar/demo.jsx

@@ -0,0 +1,78 @@
+"use client";
+
+// AskBar driven by a pretend thread, and frozen in each state — the
+// gallery's and the smoke test's surface. Not installed into apps. A send
+// works for a moment, then answers; an ask with "send" in it stops for a
+// yes on the desk; one with "fail" does not finish.
+import { useEffect, useRef, useState } from "react";
+import { Card } from "../components/ui";
+import { AskBar } from "../components/blocks/ask-bar";
+
+function usePretendThread() {
+  const [turns, setTurns] = useState([]);
+  const [state, setState] = useState(null);
+  const timers = useRef([]);
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+  const send = (text) => {
+    setTurns((ts) => [...ts, { id: `t${ts.length}`, member: text, parts: [], status: "working" }]);
+    setState("working");
+    timers.current.push(
+      setTimeout(() => setState(/send/i.test(text) ? "needs_you" : /fail/i.test(text) ? "failed" : "done"), 1600),
+    );
+  };
+  return { state, turns, pending: null, sending: false, error: null, unavailable: false, send, openOnDesk: () => true };
+}
+
+const frozen = (state, member) => ({ state, turns: [{ id: "t0", member }], send: () => undefined, openOnDesk: () => true });
+
+export default function AskBarDemo() {
+  const chat = usePretendThread();
+  const [opened, setOpened] = useState(0);
+  return (
+    <div className="grid gap-6 p-6">
+      <Card title="Ask" description={opened ? `Open pressed ${opened} time${opened === 1 ? "" : "s"}` : "Try a chip, or type “send them a note”."}>
+        <AskBar
+          chat={chat}
+          suggestions={[
+            "Who should I call today?",
+            "Find restaurant groups in New England with ten or more sites and a new head of operations",
+            "Send them a note",
+          ]}
+          onOpen={() => setOpened((n) => n + 1)}
+        />
+      </Card>
+
+      <div className="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))]">
+        <Card title="Empty">
+          <AskBar onAsk={() => ({ ok: true })} />
+        </Card>
+        <Card title="Working">
+          <AskBar chat={frozen("working", "Who is waiting on me?")} onOpen={() => undefined} />
+        </Card>
+        <Card title="Waiting for you">
+          <AskBar chat={frozen("needs_you", "Send the follow-ups to the twelve investors")} onOpen={() => undefined} />
+        </Card>
+        <Card title="Answered">
+          <AskBar chat={frozen("done", "What closes this month?")} onOpen={() => undefined} suggestions={["And next month?"]} />
+        </Card>
+        <Card title="Failed">
+          <AskBar
+            chat={{ ...frozen("failed", "Read every deal note since March"), error: "The agent could not start: credits ran out." }}
+            onOpen={() => undefined}
+          />
+        </Card>
+        <Card title="Not connected yet">
+          <AskBar chat={{ state: null, turns: [], unavailable: true, send: () => undefined }} />
+        </Card>
+      </div>
+
+      <div className="w-80 max-w-full rounded-lg border border-border p-3">
+        <AskBar
+          chat={frozen("working", "A very long ask that has to truncate in a narrow column without pushing the Open off the edge")}
+          suggestions={["A chip with a long ask that has to wrap inside 320 pixels of width"]}
+          onOpen={() => undefined}
+        />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/ask-bar/index.js

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

package/registry/blocks/automation-editor/README.md

@@ -0,0 +1,291 @@
+# AutomationEditor
+
+The whole editor for one automation, for an app's Automations page. It
+answers "how do I open, edit, test and switch on my app's automations?"
+inside the app, in the app's theme.
+
+- **The header** — Back, the name (editable), a status (New · Draft · Draft
+  ahead · Live · Off · Unsaved changes), the Flow / Runs tabs you hand it,
+  a **test chip** (see below), the run picker, the **Live** switch, **Test
+  run** with its price on it ("about 3 cr"), **Keep this version** and
+  **Save**.
+- **A strip** that says what is wrong with it, in words and by step, and
+  what the platform refused (with its lines).
+- **The canvas** (`flow-editor`) with undo and redo (Ctrl or ⌘ + Z), Delete
+  on the selected step, and a **list view** of the same flow.
+- **The panel** for whatever is pressed: the trigger (`trigger-picker`), a
+  step (`step-settings`) or the automation as a whole (`FlowSettings`).
+  Beside the canvas on a wide width; over it, from the bottom, on a narrow
+  one.
+- **Test run** asks the questions a manual run needs first (`RunInputs`).
+
+How saving works (nothing here is hidden from a member):
+
+1. **Save** makes a draft version; the live one keeps running as it was.
+2. **Test run** is a dry run of the draft (or the live one): it reads your
+   real data and changes nothing (nothing is sent, nothing is written). Its
+   run opens as a test, with what each step would have done.
+3. **Keep this version** makes the draft the one that runs.
+4. **Live** is the switch: it fires on its trigger, or it does not.
+
+Keep and Live need a passed test of that version. Without one the platform
+refuses (`needs_test`) and the editor shows its words with two buttons:
+**Run a test** (the same as Test run) and **Go live without a test** (**Keep
+without a test** for Keep). The second asks once more, inline: "Skip the
+test? It will run for real the first time it starts." with **Skip the test**
+and **Cancel**; only then does it call `onKeep({ skipTest: true })` or
+`onLive(on, { skipTest: true })` again. The skip is the member's own
+deliberate second press (some automations cannot be tested meaningfully);
+an agent never has it, and it is never silent.
+
+The **test chip** sits beside the status for the version being looked at
+(the draft if there is one, else the live one): "Not tested" (amber),
+"Tested · 3 steps would run" (green), "Last test failed" (red). Nothing
+without `tests`, or for the app's own shipped version (`exempt`).
+
+A draft never goes live by itself. An automation shipped with the app is
+edited the same way: a member's edit is a new version, the shipped one
+stays on file, and **Reset to the app's version** is one press (`onReset`).
+
+```jsx
+import { AutomationEditor } from "../components/blocks/automation-editor";   // a Makersclaw app
+import { AutomationEditor } from "@/components/makersclaw/blocks/automation-editor";   // a shadcn project
+```
+
+`makersclaw add automation-editor` lays `flow-editor`, `step-settings`,
+`trigger-picker`, `fix-note` and `automation-model` with it. A client component. It
+fills its parent's height (give it a parent with one) and its own width
+decides its layout: the panel sits beside the canvas from about 768 px.
+
+## Props
+
+- `automationId` — the saved id, or `null` for one not saved yet (the
+  button says Create).
+- `status` — `draft` · `on` · `off` · `needs_owner` · `"new"`.
+  `liveVersion`, `draftVersion` — the numbers, or null.
+- `baseline` — the definition as last saved (or the starting point). Key the
+  builder by id, never by version: when the saved version moves (a kept
+  suggestion, an agent's draft, another tab) an editor with nothing edited
+  opens the new one by itself, and one with edits keeps them and says so
+  (the strip below). Keying by version would throw the edits away.
+- `versions`, `runs` (for the picker), `apps`, `actions` (the app's declared
+  actions, for the action step), `ownedByApp`.
+- `estimate` — what a run is expected to cost (`useAutomation().estimate`):
+  paid steps wear a price, Test run says what it will spend.
+- `samples` — `{ [stepId]: a real output }` for the data picker.
+- `runnable` — a `Set` of the kinds the platform runs.
+- `backLabel`, `onBack`, `tabs`, `canEdit` (false: read-only).
+- `onSave(def, { baseVersion })`, `onKeep(opts?)`, `onLive(on, opts?)`, `onTest(inputs)` — each
+  resolves the platform's answer (`{ ok: true }` or `{ ok: false, error,
+  code?, problems }`, which is what `useAutomation`'s `save`, `keep`,
+  `setLive` and `test` resolve) or throws an Error. The builder shows the
+  words and the lines, and keeps the `code`. `opts` is `{ skipTest: true }`
+  only after the member's confirmed skip (above); otherwise they are called
+  as before, with none. Pass `keep` and `setLive` straight through. `onSave`'s
+  second argument is `{ baseVersion }`: the version the working copy began
+  on. **Send it to the platform as `expect_version`, never the newest
+  version you can see** (`useAutomation().save(def, { baseVersion })` does).
+  A refusal with the code `changed` (and `latest`, when it says) draws the
+  conflict strip (next section). A save that works may resolve `{ ok: true,
+  version }` (or the hook's `{ ok: true, data: { version } }`): the editor
+  then begins from that version.
+- `onFocus({ selected, unsaved, baseVersion })` — called whenever any of the
+  three changes: the pressed step (a step id, `"trigger"`, `"flow"` or
+  `null`), whether the working copy has edits that are not saved, and the
+  version it began on. For a pane beside the editor (the agent's) that
+  must know what the member is looking at. It never re-renders the editor:
+  keep the last value in a ref.
+- `compareTo` — `{ version, definition }`: what "What changed" compares an
+  agent's draft with (the version the member kept, usually the live one).
+  Without it the agent's line has no What changed.
+- `tests` — `{ live, draft }`, each a `TestView` `{ version, passed,
+  exempt, last: { run_id, status, ended_at, credits, would } | null }`
+  (`useAutomation().tests`): draws the test chip. Optional.
+- `suggestions` — the changes the agent drafted from failed runs, waiting
+  for a person: `[{ id, why, stale, patch }]` (`useAutomation().suggestions`).
+  `onKeepSuggestion(id)` keeps one (a new version that runs; refused with
+  `stale` when the automation moved on) and `onDropSuggestion(id)` forgets
+  it. They sit in a strip above the canvas; Keep waits while the working
+  copy is unsaved. Without the callbacks, or when `canEdit` is false, the
+  strip is not drawn. When the saved version moves under an editor with no
+  edits of its own, it opens the new one.
+- `triggers` — what can start an automation here (`useAutomations().triggers`):
+  the trigger panel offers events, an app's actions, records, a web address
+  and another automation, as the platform runs them. Without it: by hand and
+  a schedule. `selfKey` is this automation's key (it cannot follow itself,
+  defaults to the definition's), `hook` its webhook address once it is saved
+  (`useAutomation().hook`) and `onRotateHook` makes or replaces the webhook's
+  secret (`useAutomation().rotateHook`; the secret is shown once).
+- `onDelete(automation)` — async: **Delete automation**, in a menu at the end
+  of the header (never a button beside Save), for a saved automation the
+  member may edit. It asks first, in words that say what it does: `Deletes
+  "<name>". Its runs stay in history.` (and, for one that is on, that
+  deleting also switches it off). `automation` is `{ id, name, status }`.
+  Resolves `{ ok: true }` (the screen leaves the editor and says what
+  followed: an Undo, the automations that followed this one) or `{ ok:
+  false, error, code? }`, whose words are shown as they are (it is running,
+  only the owner or an admin may delete it…). `canDelete` hides the item
+  (default true). `source` is the automation's source: an app's own job
+  (`legacy`) and what an app shipped (`package`) get the item disabled, with
+  a line pointing at the app's settings.
+- `onOpenRun(runId)`, `onReset()`.
+
+## Shared with the agent
+
+The draft is shared: an agent (or another tab) may save a newer version while
+a member has edits that are not saved. The editor never lets a save bury it.
+
+- **The base.** The editor remembers the version its working copy began on
+  and sends that with every save. Nothing edited: it follows the saved
+  version, so a draft the agent saves simply appears on the canvas.
+- **Edits not saved, a newer version arrives:** a strip says "The agent drew
+  v5 from your last save. You have changes that are not saved." (or "Version 5
+  was saved after you opened this…" when a person saved it). **Look at v5**
+  replaces the working copy with it as one undoable step (Undo brings the
+  edits and the version they were made on back). **Keep mine** dismisses the
+  strip.
+- **A save the platform refuses as `changed`** (after Keep mine, or from
+  another tab) draws the same strip with **Save on top of v5**, the member's
+  deliberate press that names v5 as the base, and Look at v5.
+- **While the draft is the agent's** (its version is `kind: "agent"` and not
+  yet kept), a line under the header says "Drawn by the agent · from: <its
+  note> · What changed". What changed lists, in plain words, the steps added,
+  removed and changed against `compareTo` (`changeLinesBetween` in
+  automation-model).
+
+## Hooks (lib/hooks.js)
+
+`useAutomation(id)` → `{ automation, live, draft, definition, versions,
+estimate, tests, runs, suggestions, keepSuggestion(id), dropSuggestion(id),
+busy, save(def), keep({ skipTest }?), setLive(on, { skipTest }?),
+test({ inputs, sample, dry }?), loading, error, code, unavailable, reload }`.
+`test` is a dry run unless you pass `dry: false`. `definition` is the draft if
+there is one, else the live one: what the builder opens. A save names the
+version it was made against, so two people editing at once get "changed"
+rather than overwriting each other.
+
+## Who may do what
+
+Any member who opens the app edits and runs its automations (roles come
+later, decided in one place on the platform). A step's input and output are
+shown only to the automation's owner, the admins and whoever started the
+run; the others see status and the report. The platform refuses what a
+member may not do; a hidden button is never the guard.
+
+## Never
+
+- Never a draft that goes live by itself, or a switch that is on without a
+  version kept.
+- Never an approval step: an automation has none. When a yes is truly
+  needed it goes to the automation's owner, on the desk.
+- Never a step the platform cannot run without saying so: it says "soon"
+  and the save waits.
+
+## Example
+
+The whole Automations page of an app: the list, an automation, a run.
+
+```jsx
+"use client";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAutomation, useAutomationRun, useAutomations } from "../lib/hooks";
+import { AutomationList } from "../components/blocks/automation-list";
+import { AutomationEditor } from "../components/blocks/automation-editor";
+import { RunView, RunsList } from "../components/blocks/run-view";
+import { STARTING_POINTS, blankAutomation, keyFromName } from "../components/blocks/automation-model";
+
+function Tabs({ tab, onTab }) {
+  return (
+    <div role="tablist" className="flex gap-1">
+      {[["flow", "Flow"], ["runs", "Runs"]].map(([id, label]) => (
+        <button key={id} type="button" role="tab" aria-selected={tab === id} onClick={() => onTab(id)} className={tab === id ? "rounded-md bg-accent px-3 py-1 text-sm font-medium" : "rounded-md px-3 py-1 text-sm text-muted-foreground"}>
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function One({ id, runId, tab, go, triggers }) {
+  const a = useAutomation(id);
+  const run = useAutomationRun(runId);
+  if (a.unavailable) return <p className="p-4 text-sm">Automations are not set up here yet.</p>;
+  if (!a.automation || !a.definition) return <p className="p-4 text-sm text-muted-foreground">Opening…</p>;
+  const tabs = <Tabs tab={tab} onTab={(t) => go({ automation: id, tab: t })} />;
+  if (runId && run.detail) {
+    return <RunView def={run.definition ?? a.definition} detail={run.detail} runs={a.runs} tz={a.automation.tz} tabs={tabs} name={a.automation.name} onBack={() => go({ automation: id })} 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} />;
+  }
+  if (tab === "runs") return <RunsList runs={a.runs} tz={a.automation.tz} onOpen={(r) => go({ automation: id, run: r })} />;
+  return (
+    <AutomationEditor
+      key={id}
+      automationId={id}
+      status={a.automation.status}
+      liveVersion={a.automation.live_version}
+      draftVersion={a.automation.draft_version}
+      baseline={a.definition}
+      versions={a.versions}
+      runs={a.runs}
+      estimate={a.estimate}
+      ownedByApp
+      tabs={tabs}
+      onBack={() => go({})}
+      onSave={a.save}
+      onKeep={a.keep}
+      onLive={a.setLive}
+      tests={a.tests}
+      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}
+      triggers={triggers}
+      selfKey={a.automation.key}
+      hook={a.hook}
+      onRotateHook={a.rotateHook}
+    />
+  );
+}
+
+// A new one is not saved until Create: the platform wants a first step.
+function NewOne({ start, automations, create, go, triggers }) {
+  const taken = new Set(automations.map((a) => a.key));
+  const picked = STARTING_POINTS.find((s) => s.id === start);
+  return (
+    <AutomationEditor
+      key="new"
+      automationId={null}
+      status="new"
+      baseline={picked ? picked.build(taken) : blankAutomation("", keyFromName("New automation", taken))}
+      ownedByApp
+      triggers={triggers}
+      onBack={() => go({})}
+      onSave={async (def) => {
+        const r = await create({ ...def, key: keyFromName(def.name, taken) });
+        if (r.ok) go({ automation: r.data.id });
+        return r;
+      }}
+    />
+  );
+}
+
+export default function Automations() {
+  const router = useRouter();
+  const q = useSearchParams();
+  const go = (p) => router.push(`?${new URLSearchParams(p)}`);
+  const { automations, triggers, setStatus, create, unavailable } = useAutomations();
+  const id = q.get("automation");
+  if (id === "new") return <div className="flex h-[640px] flex-col"><NewOne start={q.get("start")} automations={automations} create={create} go={go} triggers={triggers} /></div>;
+  if (id) return <div className="flex h-[640px] flex-col"><One id={id} runId={q.get("run")} tab={q.get("tab") ?? "flow"} go={go} triggers={triggers} /></div>;
+  if (unavailable) return <p className="p-4 text-sm">Automations are not set up here yet.</p>;
+  return (
+    <AutomationList
+      rows={automations}
+      grouped={false}
+      onOpen={(i) => go({ automation: i })}
+      onToggle={async (row, on) => { const r = await setStatus(row.id, on); if (!r.ok) throw new Error(r.error); }}
+      onNew={(start) => go({ automation: "new", ...(start ? { start: start.id } : {}) })}
+    />
+  );
+}
+```