makersclaw 0.8.0 → 0.8.1

package/registry/blocks/trigger-picker/trigger-picker.jsx

@@ -0,0 +1,374 @@
+"use client";
+
+// What starts an automation. Eight ways, the platform tells which it runs:
+// by hand; on a schedule in the team's time zone; when an app sends an
+// event; when one of an app's actions finishes; when a record is added or
+// changed; when the automation's own web address is called; when another
+// automation finishes. A connection's own events (a new mail) are listed as
+// "soon", with what to use until then.
+//
+// The schedule is offered in the shapes people ask for ("every weekday at
+// 07:00") and kept as a five-field cron; anything the picker cannot read
+// back stays the custom cron it was.
+//
+// Props in, callbacks out; the definition's trigger is one of
+//   { type: "manual" }
+//   { type: "schedule", cron, tz }
+//   { type: "event", topic, app? }
+//   { type: "action", action, app? }
+//   { type: "record", kinds?, ops?, app? }
+//   { type: "webhook" }
+//   { type: "automation", key, when }
+
+import { useId, useState } from "react";
+import { Button, Checkbox, Field, Input, Select, Switch, TimeInput, cx } from "../../ui";
+import { Glyph, SidePanel, WEEKDAYS, cronFromParts, cronWords, parseTime, partsFromCron, timeText, triggerGlyph, triggerTitle, triggerWords } from "../automation-model";
+
+const FREQS = [
+  { value: "daily", label: "Every day" },
+  { value: "weekdays", label: "Every weekday" },
+  { value: "weekly", label: "Every week" },
+  { value: "hourly", label: "Every hour" },
+  { value: "custom", label: "Another schedule" },
+];
+
+/** What a platform without the newer triggers offers: two ways, and the rest said honestly. */
+const FALLBACK_CHOICES = [
+  { type: "manual", label: "By hand", hint: "Someone presses Run, or the agent runs it.", available: true },
+  { type: "schedule", label: "On a schedule", hint: "Every day, every weekday, every hour.", available: true },
+];
+const LATER = [
+  { id: "record", label: "When something is added", hint: "A new person, a new row, a new message." },
+  { id: "automation", label: "From another automation", hint: "One flow starts the next." },
+];
+
+/** A fresh trigger of a type, with what the platform lists first filled in. */
+function startOf(type, { app, other }) {
+  switch (type) {
+    case "schedule":
+      return { type, cron: "0 7 * * 1-5", tz: "team" };
+    case "event":
+      return { type, topic: app?.topics?.[0] ?? "", ...(app && !app.own ? { app: app.name } : {}) };
+    case "action":
+      return { type, action: app?.actions?.[0]?.name ?? "", ...(app && !app.own ? { app: app.name } : {}) };
+    case "record":
+      return { type, ...(app && !app.own ? { app: app.name } : {}) };
+    case "automation":
+      return { type, key: other?.[0]?.key ?? "", when: "done" };
+    default:
+      return { type };
+  }
+}
+
+/** The ways, as a list of options for a Select: what is available, and the current one even if it is not. */
+function optionsOf(choices, current) {
+  const list = choices.filter((c) => c.available);
+  if (current && !list.some((c) => c.type === current)) list.push({ type: current, label: triggerTitle(current), hint: "", available: true });
+  return list.map((c) => ({ value: c.type, label: c.label }));
+}
+
+function Schedule({ uid, trigger, readOnly, onChange }) {
+  const parts = partsFromCron(trigger.cron ?? "0 7 * * 1-5");
+  const apply = (next) => onChange({ type: "schedule", cron: cronFromParts({ ...parts, ...next }), tz: trigger.tz ?? "team" });
+  const words = cronWords(trigger.cron);
+  const team = !trigger.tz || trigger.tz === "team";
+  return (
+    <>
+      <Field id={`${uid}-freq`} label="How often">
+        <Select id={`${uid}-freq`} value={parts.freq} disabled={readOnly} options={FREQS} onChange={(e) => apply({ freq: e.target.value })} />
+      </Field>
+      {parts.freq === "weekly" ? (
+        <Field id={`${uid}-day`} label="On">
+          <Select id={`${uid}-day`} value={String(parts.weekday)} disabled={readOnly} options={WEEKDAYS.map((d, i) => ({ value: String(i), label: d }))} onChange={(e) => apply({ weekday: Number(e.target.value) })} />
+        </Field>
+      ) : null}
+      {parts.freq === "daily" || parts.freq === "weekdays" || parts.freq === "weekly" ? (
+        <Field id={`${uid}-time`} label="At">
+          <TimeInput
+            id={`${uid}-time`}
+            value={timeText(parts.hour, parts.minute)}
+            disabled={readOnly}
+            onChange={(e) => {
+              const t = parseTime(e.target.value);
+              if (t) apply(t);
+            }}
+          />
+        </Field>
+      ) : null}
+      {parts.freq === "hourly" ? (
+        <Field id={`${uid}-min`} label="Minutes past the hour">
+          <Input id={`${uid}-min`} type="number" min={0} max={59} inputMode="numeric" value={parts.minute} disabled={readOnly} onChange={(e) => apply({ minute: Number(e.target.value) || 0 })} />
+        </Field>
+      ) : null}
+      {parts.freq === "custom" ? (
+        <Field id={`${uid}-cron`} label="Schedule" hint="Five fields: minute, hour, day, month, weekday.">
+          <Input id={`${uid}-cron`} className="font-mono text-[13px]" value={trigger.cron} disabled={readOnly} placeholder="0 7 * * 1-5" onChange={(e) => onChange({ type: "schedule", cron: e.target.value, tz: trigger.tz })} />
+        </Field>
+      ) : null}
+      <Switch id={`${uid}-team`} checked={team} disabled={readOnly} label="In the team's time zone" onChange={(e) => onChange({ type: "schedule", cron: trigger.cron, tz: e.target.checked ? "team" : "UTC" })} />
+      <p className="m-0 -mt-2 text-xs text-muted-foreground">07:00 stays 07:00 through daylight saving. Turn off to name another zone.</p>
+      {!team ? (
+        <Field id={`${uid}-tz`} label="Time zone">
+          <Input id={`${uid}-tz`} className="font-mono text-[13px]" value={trigger.tz} disabled={readOnly} placeholder="America/New_York" onChange={(e) => onChange({ type: "schedule", cron: trigger.cron, tz: e.target.value })} />
+        </Field>
+      ) : null}
+      <p className="m-0 text-xs text-muted-foreground">{words ? `Runs ${words.charAt(0).toLowerCase()}${words.slice(1)}${team ? ", team time" : ""}.` : "That schedule cannot be read yet."}</p>
+    </>
+  );
+}
+
+/** Which app a team automation hears: one picked from the platform's list. An app's own has no choice. */
+function AppField({ uid, trigger, apps, ownedByApp, readOnly, onApp, required }) {
+  if (ownedByApp || apps.length === 0) return null;
+  return (
+    <Field id={`${uid}-app`} label="In which app" hint={required ? undefined : "Leave it open to hear any app."}>
+      <Select
+        id={`${uid}-app`}
+        value={trigger.app ?? ""}
+        disabled={readOnly}
+        options={[{ value: "", label: required ? "Pick an app" : "Any app" }, ...apps.map((a) => ({ value: a.name, label: a.name }))]}
+        onChange={(e) => onApp(e.target.value)}
+      />
+    </Field>
+  );
+}
+
+function Webhook({ uid, hook, onRotate, readOnly, origin }) {
+  const [shown, setShown] = useState(null);
+  const [asking, setAsking] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [note, setNote] = useState(null);
+  if (!hook) {
+    return <p className="m-0 text-xs text-muted-foreground">Save it first. Its web address is made when it exists, and the secret after that.</p>;
+  }
+  const base = (origin ?? (typeof window !== "undefined" ? window.location.origin : "")).replace(/\/$/, "");
+  const address = `${base}${hook.path}`;
+  const make = async () => {
+    setBusy(true);
+    setNote(null);
+    try {
+      const r = await onRotate?.();
+      if (r && r.ok === false) setNote(r.error || "That did not work.");
+      else if (r?.hook?.secret) setShown(r.hook.secret);
+      setAsking(false);
+    } catch (e) {
+      setNote(e?.message || "That did not work.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <>
+      <Field id={`${uid}-addr`} label="Its web address" hint="Post to it with JSON. What it receives is on the run as trigger.payload.body.">
+        <Input id={`${uid}-addr`} readOnly className="font-mono text-[12.5px]" value={address} onFocus={(e) => e.target.select()} />
+      </Field>
+      {shown ? (
+        <Field id={`${uid}-secret`} label="Its secret" hint="Shown once: copy it now. Sign the body with it (x-makersclaw-signature), or add ?token=… to the address when a sender cannot sign.">
+          <Input id={`${uid}-secret`} readOnly className="font-mono text-[12.5px]" value={shown} onFocus={(e) => e.target.select()} />
+        </Field>
+      ) : (
+        <p className="m-0 text-xs text-muted-foreground">
+          {hook.has_secret ? "It has a secret, and only the sender who holds it can start a run." : "It has no secret yet, so nothing can start it."}
+          {hook.last_received_at ? " Last called " + new Date(hook.last_received_at).toLocaleString() + "." : ""}
+        </p>
+      )}
+      {!readOnly ? (
+        asking ? (
+          <div className="grid gap-2 rounded-md border border-border p-2.5">
+            <p className="m-0 text-xs">The old secret stops working at once. Anything that still uses it will be refused.</p>
+            <div className="flex gap-2">
+              <Button size="sm" variant="danger" onClick={make} disabled={busy}>
+                Make a new secret
+              </Button>
+              <Button size="sm" variant="secondary" onClick={() => setAsking(false)} disabled={busy}>
+                Keep the old one
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Button size="sm" variant="secondary" className="justify-self-start" icon="key" onClick={() => (hook.has_secret ? setAsking(true) : make())} disabled={busy}>
+            {hook.has_secret ? "Make a new secret" : "Make a secret"}
+          </Button>
+        )
+      ) : null}
+      {note ? (
+        <p role="alert" className="m-0 text-xs text-destructive">
+          {note}
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ *   trigger      the definition's trigger (see the list at the top)
+ *   onChange(trigger)
+ *   readOnly     shown, not editable
+ *   onClose      draws the close button
+ *   catalog      what the platform offers (the list door's `triggers`):
+ *                { choices: [{ type, label, hint, available, why? }],
+ *                  apps: [{ name, actions: [{ name, description }], kinds, topics }],
+ *                  automations: [{ key, name }] }. Without it: by hand and a
+ *                schedule, and `later` listed as "soon".
+ *   ownedByApp   the automation belongs to an app: its actions, kinds and
+ *                topics are that app's (the first of catalog.apps)
+ *   selfKey      this automation's key: it cannot follow itself
+ *   hook         a webhook trigger's address once the automation is saved:
+ *                { path, has_secret, rotated_at, last_received_at }
+ *   onRotateHook async () => { ok, hook: { secret } } | { ok: false, error }
+ *   origin       where the address lives (default: this page's origin)
+ *   later        the not-yet ways to start without a catalog, [{ id, label, hint }]
+ */
+export function TriggerPicker({ trigger, onChange, readOnly = false, onClose, catalog = null, ownedByApp = false, selfKey = null, hook = null, onRotateHook, origin, later }) {
+  const uid = useId();
+  const current = trigger ?? { type: "manual" };
+  const type = current.type;
+  const choices = catalog?.choices?.length ? catalog.choices : FALLBACK_CHOICES;
+  const apps = catalog?.apps ?? [];
+  const others = (catalog?.automations ?? []).filter((a) => a.key !== selfKey);
+  const scope = ownedByApp ? apps[0] : apps.find((a) => a.name === current.app);
+  const scoped = scope ? { ...scope, own: ownedByApp } : null;
+  const soon = catalog ? choices.filter((c) => !c.available) : (later ?? LATER).map((l) => ({ type: l.id, label: l.label, hint: l.hint, available: false }));
+  const switchTo = (next) => onChange(startOf(next, { app: ownedByApp ? scoped : apps.length === 1 ? { ...apps[0], own: false } : null, other: others }));
+  const setApp = (name) => {
+    const { app: _drop, ...rest } = current;
+    onChange(name ? { ...rest, app: name } : rest);
+  };
+
+  return (
+    <SidePanel glyph={<Glyph name={triggerGlyph(type)} size={20} />} title="What starts it" subtitle={triggerWords(current)} onClose={onClose} label="What starts it">
+      <Field id={`${uid}-type`} label="It starts">
+        <Select id={`${uid}-type`} value={type} disabled={readOnly} options={optionsOf(choices, type)} onChange={(e) => switchTo(e.target.value)} />
+      </Field>
+      <p className="m-0 -mt-2 text-xs text-muted-foreground">{choices.find((c) => c.type === type)?.hint ?? ""}</p>
+
+      {type === "manual" ? <p className="m-0 text-xs text-muted-foreground">Nothing starts it on its own. Press Run when you want it to go, or let the agent run it.</p> : null}
+
+      {type === "schedule" ? <Schedule uid={uid} trigger={current} readOnly={readOnly} onChange={onChange} /> : null}
+
+      {type === "event" ? (
+        <>
+          <AppField uid={uid} trigger={current} apps={apps} ownedByApp={ownedByApp} readOnly={readOnly} onApp={setApp} required={false} />
+          <Field id={`${uid}-topic`} label="Event" hint="The name an app sends, like rows.imported. Keyed events (with a key) run once per item.">
+            <Input id={`${uid}-topic`} className="font-mono text-[13px]" list={`${uid}-topics`} value={current.topic ?? ""} disabled={readOnly} placeholder="rows.imported" onChange={(e) => onChange({ ...current, topic: e.target.value.trim().toLowerCase() })} />
+            <datalist id={`${uid}-topics`}>{(scoped?.topics ?? apps.flatMap((a) => a.topics ?? [])).map((t) => <option key={t} value={t} />)}</datalist>
+          </Field>
+        </>
+      ) : null}
+
+      {type === "action" ? (
+        <>
+          <AppField uid={uid} trigger={current} apps={apps} ownedByApp={ownedByApp} readOnly={readOnly} onApp={(n) => onChange({ type: "action", action: "", ...(n ? { app: n } : {}) })} required />
+          <Field id={`${uid}-action`} label="Action" hint="Runs when a person or the app's agent has done it. An action another automation ran does not start this one.">
+            {scoped?.actions?.length ? (
+              <Select
+                id={`${uid}-action`}
+                value={current.action ?? ""}
+                disabled={readOnly}
+                options={[{ value: "", label: "Pick an action" }, ...scoped.actions.map((a) => ({ value: a.name, label: a.name.replace(/_/g, " ") }))]}
+                onChange={(e) => onChange({ ...current, action: e.target.value })}
+              />
+            ) : (
+              <Input id={`${uid}-action`} className="font-mono text-[13px]" value={current.action ?? ""} disabled={readOnly} placeholder="add_people" onChange={(e) => onChange({ ...current, action: e.target.value.trim() })} />
+            )}
+          </Field>
+        </>
+      ) : null}
+
+      {type === "record" ? (
+        <>
+          <AppField uid={uid} trigger={current} apps={apps} ownedByApp={ownedByApp} readOnly={readOnly} onApp={(n) => onChange({ type: "record", ...(n ? { app: n } : {}) })} required />
+          <fieldset className="m-0 grid min-w-0 gap-1 border-0 p-0">
+            <legend className="mb-1 p-0 text-sm font-medium">Which records</legend>
+            {(scoped?.kinds ?? []).map((k) => {
+              const picked = current.kinds ?? [];
+              return (
+                <Checkbox
+                  key={k}
+                  id={`${uid}-k-${k}`}
+                  label={k.replace(/_/g, " ")}
+                  checked={picked.includes(k)}
+                  disabled={readOnly}
+                  onChange={(e) => {
+                    const next = e.target.checked ? [...picked, k] : picked.filter((x) => x !== k);
+                    const { kinds: _drop, ...rest } = current;
+                    onChange(next.length ? { ...rest, kinds: next } : rest);
+                  }}
+                />
+              );
+            })}
+            <p className="m-0 text-xs text-muted-foreground">{(current.kinds ?? []).length ? "Only these." : "None picked: every kind of record the owner can read."}</p>
+          </fieldset>
+          <fieldset className="m-0 grid min-w-0 gap-1 border-0 p-0">
+            <legend className="mb-1 p-0 text-sm font-medium">When it is</legend>
+            {[
+              ["create", "Added"],
+              ["update", "Changed"],
+            ].map(([op, label]) => {
+              const ops = current.ops ?? ["create", "update"];
+              return (
+                <Checkbox
+                  key={op}
+                  id={`${uid}-op-${op}`}
+                  label={label}
+                  checked={ops.includes(op)}
+                  disabled={readOnly || (ops.length === 1 && ops[0] === op)}
+                  onChange={(e) => {
+                    const next = e.target.checked ? [...ops, op] : ops.filter((x) => x !== op);
+                    const { ops: _drop, ...rest } = current;
+                    onChange(next.length === 2 ? rest : { ...rest, ops: next });
+                  }}
+                />
+              );
+            })}
+          </fieldset>
+          <p className="m-0 text-xs text-muted-foreground">A person, a screen or the app's agent made the change; the app's own jobs do not start it. One run for each record, at most once a minute.</p>
+        </>
+      ) : null}
+
+      {type === "webhook" ? <Webhook uid={uid} hook={hook} onRotate={onRotateHook} readOnly={readOnly} origin={origin} /> : null}
+
+      {type === "automation" ? (
+        <>
+          <Field id={`${uid}-key`} label="Another automation" hint="It runs after that one has finished, with how it went.">
+            <Select
+              id={`${uid}-key`}
+              value={current.key ?? ""}
+              disabled={readOnly}
+              options={[{ value: "", label: others.length ? "Pick one" : "No other automation yet" }, ...others.map((a) => ({ value: a.key, label: a.name }))]}
+              onChange={(e) => onChange({ ...current, key: e.target.value })}
+            />
+          </Field>
+          <Field id={`${uid}-when`} label="When it">
+            <Select
+              id={`${uid}-when`}
+              value={current.when ?? "done"}
+              disabled={readOnly}
+              options={[
+                { value: "done", label: "finishes well" },
+                { value: "failed", label: "fails" },
+                { value: "any", label: "ends either way" },
+              ]}
+              onChange={(e) => onChange({ ...current, when: e.target.value })}
+            />
+          </Field>
+          <p className="m-0 text-xs text-muted-foreground">Two automations cannot start each other: the platform refuses a loop when you save.</p>
+        </>
+      ) : null}
+
+      {soon.length ? (
+        <ul className={cx("m-0 grid list-none gap-1.5 border-t border-border p-0 pt-3")} aria-label="Coming later">
+          {soon.map((l) => (
+            <li key={l.type} className="flex items-start justify-between gap-2 text-sm text-muted-foreground">
+              <span className="grid gap-0.5">
+                <span>{l.label}</span>
+                {l.why || l.hint ? <span className="text-xs">{l.why || l.hint}</span> : null}
+              </span>
+              <span className="shrink-0 rounded-full border border-border px-1.5 text-2xs">soon</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </SidePanel>
+  );
+}

package/registry/blocks/workflow-view/README.md

@@ -0,0 +1,123 @@
+# WorkflowView
+
+> **Superseded** (0.8.1, the automations engine, D26). One job drawn top to bottom, from `useJobs`, `useRuns` and `useRun`. For an app whose jobs run on the automations engine, use `automation-editor` (a node canvas a member can edit, test and switch on) and `run-view` (one run on the same canvas, the path taken lit). Keep using this block for an app that has not moved: it works as it did.
+
+
+One job of the app's agent, drawn as a graph on a dotted ground. Part of
+the agent kit (0.8.1): the app shows its agent's work itself; the
+window's Runs tab stays as the full history.
+
+- **The graph**: the Trigger ("Every weekday at 07:00", "When a deal is
+  created", "Run by Owen") → each step of the chosen run, with how it
+  went as a mark and a word → the result (what it wrote, what needs
+  you).
+- **Over it**: the run picker ("Run #7 · Tue 29 Sep, 07:02") and Re-run.
+- **In its head**: the Live switch and "Trigger manually · about 700 cr".
+- **Beside it**: the run history and the overview (the `run-history`
+  block's RunHistory and RunOverview).
+- **Before any run**: the job's declared steps (`plan`) drawn in pencil,
+  dashed, with an honest line ("No runs yet. The first runs Mon 12 Oct,
+  07:00, once a mailbox is connected."). A job not set up still has
+  something to look at.
+
+```jsx
+import { WorkflowView } from "../components/blocks/workflow-view";   // a Makersclaw app
+import { WorkflowView } from "@/components/makersclaw/blocks/workflow-view";   // a shadcn project
+```
+
+A client component. `makersclaw add workflow-view` lays `run-history`
+with it. Its own width decides its layout: under about 768 px the
+history and the overview stack under the graph. The graph always runs
+top to bottom, every step a full-width node with its whole title (a
+left-to-right strip scrolled sideways and cut titles at a desk window's
+width, 2026-10-11). It never scrolls sideways. It formats nothing.
+
+## Props
+
+- `title` — the job's name.
+- `trigger` — `{ label, detail }`: what starts it, in words.
+- `steps` — the chosen run's steps, `[{ label, status, detail? }]`.
+  `status` is `done` · `failed` · `running` · `needs_you` · `stopped` ·
+  `skipped` · `waiting` (not reached yet). useRun's `steps` pass as
+  they are.
+- `result` — `{ label, detail, status }`: what the run wrote, or what
+  waits on the member.
+- `runs` — RunHistory's rows (`{ id, status, title, line, when, cost }`),
+  newest first. `selected`, `onSelect(run)` — the run drawn; the picker
+  and the history both choose it.
+- `overview` — RunOverview's props (`{ completed, failed, running, avg,
+  credits }`), or null.
+- `live` — `{ on, onToggle(next), busy }`: the app's Live switch. Null:
+  no switch.
+- `run` — `{ label, price, onRun, loading, disabled, why }`: "Trigger
+  manually" with its price on the button. Null: no button.
+- `rerun` — `{ onRun, loading, label? }`: Re-run beside the picker.
+- `plan` — the job's declared steps (useJobs' `job.plan`), drawn in
+  pencil before any run.
+- `empty` — the honest line before any run: when it will first run, and
+  what it waits on.
+- `className` — layout around it. Never colour.
+
+## Hooks (lib/hooks.js)
+
+- `useJobs()` — the job (`words`, `plan`, `enabled`), the app's `live`,
+  `may`, `runNow(id)`, `pause()`, `resume()`.
+- `useRuns({ job })` — the runs and the overview.
+- `useRun(id)` — the chosen run's `steps`, `text` and `needs`.
+
+## Who may do what
+
+- Any member reads the graph, the runs and the overview (a teammate's
+  ask is never among the runs: the door leaves it out).
+- **Trigger manually**, **Re-run** and **Live**: the app's owner, a
+  workspace owner or an admin — `may.run` and `may.pause`. Pass `run`,
+  `rerun` and `live` only when they are true. The door refuses the
+  others anyway; a hidden button is never the guard.
+
+## Never
+
+- Never a press that spends without its price on it.
+- Never an Approve: a step that needs the member says "Needs you" and
+  the screen opens the desk (`openRequest`).
+- Never a status by colour alone: each comes with its mark and its
+  word.
+- Never a steps list made up when the run has none: pass the `plan`, or
+  nothing, and the empty line.
+
+## Example
+
+```jsx
+"use client";
+import { useState } from "react";
+import { useJobs, useRun, useRuns } from "../lib/hooks";
+import { WorkflowView } from "../components/blocks/workflow-view";
+
+const at = (iso) => new Date(iso).toLocaleString("en-GB", { weekday: "short", day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+
+export default function MorningReadFlow({ jobId }) {
+  const { jobs, app, may, busy, appBusy, runNow, pause, resume } = useJobs();
+  const job = jobs.find((j) => j.id === jobId);
+  const { runs, overview } = useRuns({ job: jobId });
+  const [picked, setPicked] = useState(null);
+  const selected = picked ?? runs[0]?.id ?? null;
+  const { run, steps } = useRun(selected);
+  if (!job) return null;
+  return (
+    <WorkflowView
+      title={job.name}
+      trigger={{ label: job.words ?? "On its schedule", detail: job.does }}
+      steps={steps}
+      result={run ? { label: run.state === "needs_you" ? "Waiting for your yes on the desk" : run.report ?? "Done", status: run.state } : null}
+      runs={runs.map((r) => ({ id: r.id, status: r.state, title: `Run #${r.number}`, when: at(r.started_at) }))}
+      selected={selected}
+      onSelect={(r) => setPicked(r.id)}
+      overview={overview && { completed: overview.completed, failed: overview.failed, running: overview.running, avg: overview.avg_ms == null ? null : `${Math.round(overview.avg_ms / 1000)} s` }}
+      live={may.pause ? { on: Boolean(app?.live), busy: Boolean(appBusy), onToggle: (on) => (on ? resume() : pause()) } : null}
+      run={may.run ? { label: "Trigger manually", price: "about 700 cr", onRun: () => runNow(job.id), loading: busy[job.id] === "run" } : null}
+      rerun={may.run ? { onRun: () => runNow(job.id), loading: busy[job.id] === "run" } : null}
+      plan={job.plan}
+      empty={job.next_run_at ? `No runs yet. The first runs ${at(job.next_run_at)}.` : "No runs yet. It starts once it is switched on."}
+    />
+  );
+}
+```

package/registry/blocks/workflow-view/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "workflow-view",
+  "title": "WorkflowView",
+  "description": "One job of the app's agent drawn as a graph on a dotted ground: the Trigger (\"Every weekday at 07:00\", \"When a deal is created\") → each step of the chosen run with how it went, as a mark and a word → the result. Over it a run picker with Re-run; in its head the Live switch and \"Trigger manually\" with its price; beside it the run history and the overview (run-history). Before any run it draws the job's declared steps in pencil, with an honest empty line. Fed by useJobs, useRuns and useRun (lib/hooks.js). Under about 768 px of its own width the history stacks under the graph and the graph runs top to bottom.",
+  "useWhen": "Superseded by automation-editor and run-view for an app whose jobs run on the automations engine; still the block for an app that has not moved (its jobs are the agent's wakes). A job's own page: the founder opens an automation to see what it does, how its last runs went and to run it now — a morning read, an inbox sweep, a nightly enrichment, an event-triggered workflow. For the job as a card beside the day's work use schedule-card; for a plain list of runs use run-history.",
+  "tags": ["workflow", "automation", "graph", "pipeline", "steps", "trigger", "runs", "run history", "re-run", "live", "schedule", "agent", "nodes", "kit"],
+  "exports": ["WorkflowView"],
+  "files": ["index.js", "workflow-view.jsx"],
+  "requires": ["run-history"]
+}

package/registry/blocks/workflow-view/demo.jsx

@@ -0,0 +1,90 @@
+"use client";
+
+// WorkflowView with a pretend job — the gallery's and the smoke test's
+// surface. Not installed into apps. A job with runs (one going, one
+// failed): pick a run, Re-run, Trigger manually, switch Live. Then the
+// same job before any run, its plan in pencil. A width picker shows the
+// layout at 1280, 800, 368 and 320 px of the block's own width.
+import { useState } from "react";
+import { Button, ButtonGroup } from "../components/ui";
+import { WorkflowView } from "../components/blocks/workflow-view";
+
+const STEPS = {
+  r14: [
+    { label: "Read mail", status: "running", detail: "12 of 40 emails since yesterday" },
+    { label: "Find people", status: "waiting" },
+    { label: "Draft follow-ups", status: "waiting" },
+  ],
+  r13: [
+    { label: "Read mail", status: "done", detail: "38 emails, 3 meetings" },
+    { label: "Find people", status: "done", detail: "4 new, 3 details" },
+    { label: "Draft follow-ups", status: "failed", detail: "The model timed out after 60 s; nothing was sent" },
+  ],
+  r12: [
+    { label: "Read mail", status: "done", detail: "22 emails" },
+    { label: "Find people", status: "done", detail: "1 new" },
+    { label: "Draft follow-ups", status: "needs_you", detail: "3 drafts wait for your yes" },
+  ],
+};
+const RESULTS = {
+  r14: { label: "Writing as it reads", detail: "People and deals appear on Today as they are found", status: "running" },
+  r13: { label: "Wrote 4 people, 1 deal move", detail: "Follow-ups not drafted", status: "failed" },
+  r12: { label: "Waiting for your yes on the desk", detail: "3 follow-ups to send", status: "needs_you" },
+};
+const RUNS = [
+  { id: "r14", status: "running", title: "Run #14 · Wed 30 Sep, 07:00", when: "now" },
+  { id: "r13", status: "failed", title: "Run #13 · Tue 29 Sep, 07:02", line: "Drafting failed: the model timed out", when: "yesterday", cost: "640 cr" },
+  { id: "r12", status: "needs_you", title: "Run #12 · Mon 28 Sep, 16:10", line: "Run now, by Owen", when: "2 days ago", cost: "420 cr" },
+];
+const PLAN = ["Read mail since the last read", "Find people and details", "Draft follow-ups owed"];
+const WIDTHS = [1280, 800, 368, 320];
+
+export default function WorkflowViewDemo() {
+  const [width, setWidth] = useState(800);
+  const [selected, setSelected] = useState("r13");
+  const [live, setLive] = useState(true);
+  const [busy, setBusy] = useState(null);
+  const press = (what, then) => {
+    setBusy(what);
+    setTimeout(() => {
+      then?.();
+      setBusy(null);
+    }, 800);
+  };
+  return (
+    <div className="grid gap-6 p-4">
+      <ButtonGroup aria-label="The block's width">
+        {WIDTHS.map((w) => (
+          <Button key={w} size="sm" variant={w === width ? "primary" : "secondary"} onClick={() => setWidth(w)}>
+            {w} px
+          </Button>
+        ))}
+      </ButtonGroup>
+      <div className="w-full" style={{ maxWidth: width }}>
+        <WorkflowView
+          title="Morning read"
+          trigger={{ label: "Every weekday at 07:00", detail: "Starts on its own; Owen can run it now" }}
+          steps={STEPS[selected]}
+          result={RESULTS[selected]}
+          runs={RUNS}
+          selected={selected}
+          onSelect={(r) => setSelected(r.id)}
+          overview={{ completed: 149, failed: 2, running: 1, avg: "1 min 52 s", credits: { used: 4180, of: 10000, words: "4,180 of 10,000 this week" } }}
+          live={{ on: live, busy: busy === "live", onToggle: (on) => press("live", () => setLive(on)) }}
+          run={{ label: "Trigger manually", price: "about 700 cr", onRun: () => press("run"), loading: busy === "run" }}
+          rerun={{ onRun: () => press("rerun"), loading: busy === "rerun" }}
+        />
+      </div>
+      <div className="w-full" style={{ maxWidth: width }}>
+        <WorkflowView
+          title="Friday review"
+          trigger={{ label: "Fridays at 16:00" }}
+          plan={PLAN}
+          empty="No runs yet. The first runs Fri 9 Oct, 16:00, once a mailbox is connected."
+          live={{ on: false, onToggle: () => {} }}
+          run={{ label: "Trigger manually", price: "about 900 cr", disabled: true, why: "Connect a mailbox first" }}
+        />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/workflow-view/index.js

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