makersclaw 0.7.0 → 0.8.1

package/registry/blocks/run-view/run-view.jsx

@@ -0,0 +1,236 @@
+"use client";
+
+// One run, on the same canvas as the builder: every card wears how it
+// went, the path the run took is lit and the paths it did not take are
+// dimmed, and a step the agent fixed says so on its card and in its panel.
+//
+// Read-only: nothing here changes the flow. "Run again", the controls for
+// a run (pause, resume, stop; retry, skip, change the data
+// or raise the limit when it is stuck; retry from a step of one that is over) and keeping or dropping the change
+// the agent drafted from a fix are the platform's doors; the screen around
+// this view calls them. Props in, callbacks out.
+
+import { useMemo, useState } from "react";
+import { Button, Icon, cx } from "../../ui";
+import {
+  Chip,
+  RunPicker,
+  SidePanel,
+  PanelSection,
+  agoWords,
+  availableBefore,
+  clockWords,
+  creditsWords,
+  draftOfStep,
+  durationWords,
+  findStep,
+  layoutAutomation,
+  overlayOf,
+  reportLines,
+  runStatusWords,
+  stepTitle,
+  testWords,
+  triggerTypeWords,
+  triggerWords,
+} from "../automation-model";
+import { FlowEditor } from "../flow-editor";
+import { FixNote } from "../fix-note";
+import { StepSettings } from "../step-settings";
+import { RetryFromStep, RunControls } from "./run-controls";
+
+function titleOfId(def, id) {
+  const step = findStep(def.steps, id);
+  return step ? stepTitle(step) : id;
+}
+
+/** The strip over a test run's canvas: how the test went in a line, what the
+ *  steps would have done, what could not be checked, what was only sampled.
+ *  The platform's own account (`run.result.dry`); nothing here is invented. */
+function TestStrip({ detail, def }) {
+  const run = detail.run;
+  const line = testWords(detail);
+  const dry = run.result && typeof run.result === "object" ? run.result.dry : null;
+  const would = (Array.isArray(dry?.would) ? dry.would : []).filter((w) => w && typeof w.words === "string" && w.words.trim());
+  const unchecked = Array.isArray(dry?.unchecked) ? dry.unchecked.length : 0;
+  const sampled = (Array.isArray(dry?.sampled) ? dry.sampled : []).filter((x) => x && Number.isFinite(Number(x.of)) && Number.isFinite(Number(x.looked_at)));
+  const shown = would.slice(0, 5);
+  const tone = run.status === "failed" ? "border-destructive/50 bg-destructive/10" : run.status === "done" ? "border-border bg-muted/40" : "border-warning/50 bg-warning/10";
+  return (
+    <section aria-label="What this test did" className={cx("grid gap-1.5 border-b px-3 py-2 text-[13px]", tone)}>
+      {line ? <p className="m-0 font-medium">{line}</p> : null}
+      {shown.length > 0 ? (
+        <ul className="m-0 grid list-none gap-0.5 p-0 text-muted-foreground">
+          {shown.map((w, i) => (
+            <li key={`${w.path ?? w.step ?? i}`} className="flex min-w-0 gap-1.5">
+              <Icon name="pencil" size={13} className="mt-0.5 shrink-0" />
+              <span className="min-w-0 break-words">{w.words}</span>
+            </li>
+          ))}
+          {would.length > shown.length ? <li className="pl-5">and {would.length - shown.length} more</li> : null}
+        </ul>
+      ) : null}
+      {unchecked > 0 ? <p className="m-0 text-muted-foreground">{unchecked === 1 ? "1 step could not be checked" : `${unchecked} steps could not be checked`}: they need what an earlier step would have made.</p> : null}
+      {sampled.map((x) => (
+        <p key={x.step} className="m-0 text-muted-foreground">
+          Looked at the first {Number(x.looked_at)} of {Number(x.of)}
+          {x.step ? ` in “${titleOfId(def, x.step)}”` : ""}.
+        </p>
+      ))}
+    </section>
+  );
+}
+
+function Note({ tone, children }) {
+  return <p className={cx("m-0 rounded-md border px-3 py-2 text-[13px]", tone === "red" ? "border-destructive/50 bg-destructive/10" : "border-warning/50 bg-warning/10")}>{children}</p>;
+}
+
+/**
+ *   def          the definition the run used (or the closest one: say so in versionNote)
+ *   versionNote  "This run used version 3. The steps drawn are the current ones."
+ *   detail       a run's account: { run, steps, steps_visible, fixes? } (GET automation-runs/<id>);
+ *                `fixes` are the fixer's attempts and the changes it drafted
+ *   runs         the automation's runs, newest first, for the picker and the number
+ *   apps, actions, ownedByApp   as the builder's, for the read-only step panel
+ *   tz           the automation's time zone, for the clock words
+ *   tabs         the Flow / Runs tabs, drawn in the header
+ *   name         the automation's name, on the back button
+ *                A TEST run (`run.dry`: it read real data and changed nothing) draws a strip over the
+ *                canvas (`testWords`, what each step would have done from `run.result.dry`, what
+ *                could not be checked, what was only sampled), its chip says Test passed / Test
+ *                failed / Test stopped, its steps that stood in for themselves are dashed with a
+ *                pencil, and the button reads "Test again".
+ *   onBack, onPickRun(runId), onRunAgain(), runAgainBusy
+ *   onControl(op, { path?, input?, confirmNotSent?, raiseBy?, confirmResend? })   pause · resume · stop · retry ·
+ *                skip · edit (a run's step data) · retry_from (start over at a step, from its panel); resolves { ok } or { ok: false, error, code }
+ *   controlBusy  the op that is out
+ *   onKeepFix(stepId), onDropFix(stepId)   keep or drop the change the agent drafted for a
+ *                step it fixed (a new version that runs). A fix with no draft has no button.
+ *   onUndoFix(stepId)   take back a write the agent made while fixing a step
+ */
+export function RunView({ def, versionNote = null, detail, runs = [], apps = [], actions, ownedByApp = false, tz = "UTC", tabs, name, onBack, onPickRun, onRunAgain, runAgainBusy = false, onControl, controlBusy = null, onKeepFix, onDropFix, onUndoFix, className }) {
+  const run = detail.run;
+  const [selected, setSelected] = useState(null);
+  const fixes = detail.fixes ?? [];
+  // The change the agent drafted for a step it fixed: Keep and Drop act on it.
+  // With none drafted there is nothing to keep, so no button.
+  const keepProps = (stepId) => {
+    const draft = draftOfStep(fixes, stepId);
+    return {
+      draft,
+      onKeep: draft && draft.status === "proposed" && onKeepFix ? () => onKeepFix(stepId) : undefined,
+      onDrop: draft && draft.status === "proposed" && onDropFix ? () => onDropFix(stepId) : undefined,
+      onUndo: onUndoFix ? () => onUndoFix(stepId) : undefined,
+    };
+  };
+
+  const words = triggerWords(def.trigger);
+  const layout = useMemo(() => layoutAutomation(def, { triggerWords: words }), [def, words]);
+  const overlay = useMemo(() => overlayOf(layout, detail.steps, run.status), [layout, detail.steps, run.status]);
+
+  const dry = run.dry === true;
+  const status = runStatusWords(run.status, dry);
+  const at = runs.findIndex((r) => r.id === run.id);
+  const n = at >= 0 ? runs.length - at : 0;
+  const selectedStep = selected && selected !== "trigger" ? findStep(def.steps, selected) : null;
+  const fixed = [...overlay.summary.values()].filter((s) => s.fix && s.fix.by !== "member");
+  const edited = [...overlay.summary.values()].filter((s) => s.fix && s.fix.by === "member");
+  const lines = reportLines(run.result);
+  const errorWords = run.error && typeof run.error.words === "string" ? run.error.words : null;
+  const started = clockWords(run.started_at ?? run.created_at, tz);
+
+  const side = selectedStep ? (
+    <StepSettings
+      key={selectedStep.id}
+      step={selectedStep}
+      available={availableBefore(def, selectedStep.id, stepTitle)}
+      apps={apps}
+      actions={actions}
+      ownedByApp={ownedByApp}
+      problems={[]}
+      readOnly
+      summary={overlay.summary.get(selectedStep.id) ?? null}
+      dataVisible={detail.steps_visible}
+      fixProps={keepProps(selectedStep.id)}
+      runActions={<RetryFromStep run={run} steps={detail.steps} def={def} stepId={selectedStep.id} onControl={onControl} busy={controlBusy} />}
+      onChange={() => undefined}
+      onClose={() => setSelected(null)}
+    />
+  ) : (
+    <SidePanel title={`${run.is_test ? "Test run" : "Run"} ${n > 0 ? n : ""}`.trim()} subtitle={`${agoWords(run.created_at) ?? ""}${started ? ` · ${started}` : ""}`} label="This run">
+      <dl className="m-0 grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-[13px]">
+        <dt className="text-muted-foreground">Started by</dt>
+        <dd className="m-0">{triggerTypeWords(run.trigger_type)}</dd>
+        <dt className="text-muted-foreground">Took</dt>
+        <dd className="m-0">{durationWords(run.started_at, run.ended_at) ?? (run.status === "running" ? "Still running" : "—")}</dd>
+        <dt className="text-muted-foreground">Cost</dt>
+        <dd className="m-0 font-mono">
+          {creditsWords(run.credits)}
+          {run.cap_credits ? ` of ${creditsWords(run.cap_credits)}` : ""}
+        </dd>
+        <dt className="text-muted-foreground">Version</dt>
+        <dd className="m-0 font-mono">{run.version}</dd>
+      </dl>
+      {run.status === "waiting" && run.wake_at ? <Note tone="amber">Waiting until {clockWords(run.wake_at, tz)}.</Note> : null}
+      {run.status === "needs_you" && !onControl ? <Note tone="amber">It is waiting for its owner. Open the step that is marked.</Note> : null}
+      {errorWords ? <Note tone="red">{errorWords}</Note> : null}
+      <RunControls run={run} steps={detail.steps} stepsVisible={detail.steps_visible} titleOf={(id) => titleOfId(def, id)} onControl={onControl} busy={controlBusy} />
+      {fixed.length > 0 ? (
+        <PanelSection title={fixed.length === 1 ? "The agent fixed one step" : `The agent fixed ${fixed.length} steps`}>
+          {fixed.map((s) => (
+            <FixNote key={s.stepId} fix={s.fix} stepTitle={titleOfId(def, s.stepId)} compact {...keepProps(s.stepId)} />
+          ))}
+        </PanelSection>
+      ) : null}
+      {edited.length > 0 ? (
+        <PanelSection title={edited.length === 1 ? "You changed one step" : `You changed ${edited.length} steps`}>
+          {edited.map((s) => (
+            <FixNote key={s.stepId} fix={s.fix} stepTitle={titleOfId(def, s.stepId)} compact />
+          ))}
+        </PanelSection>
+      ) : null}
+      {lines.length > 0 ? (
+        <PanelSection title="What it did">
+          <dl className="m-0 grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 text-[13px]">
+            {lines.map((l) => (
+              <div key={l.label} className="contents">
+                <dt className="text-muted-foreground">{l.label.charAt(0).toUpperCase() + l.label.slice(1)}</dt>
+                <dd className="m-0 text-right font-mono">{l.value}</dd>
+              </div>
+            ))}
+          </dl>
+        </PanelSection>
+      ) : null}
+      <p className="m-0 text-xs text-muted-foreground">Press a card to see how that step went{detail.steps_visible ? ", and what went in and out" : ""}.</p>
+    </SidePanel>
+  );
+
+  return (
+    <div className={cx("@container flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground", className)}>
+      <header className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1.5 border-b border-border px-3 py-2">
+        {onBack ? (
+          <Button size="sm" variant="quiet" icon="arrow-left" onClick={onBack}>
+            {name ?? detail.automation?.name ?? "Back"}
+          </Button>
+        ) : null}
+        <Chip tone={run.paused ? "amber" : status.tone}>{run.paused ? "Paused" : status.text}</Chip>
+        {run.is_test ? <Chip tone="grey">Test</Chip> : null}
+        {tabs}
+        <span className="ml-auto" />
+        {runs.length ? <RunPicker runs={runs} value={run.id} onPick={onPickRun} /> : null}
+        {onRunAgain ? (
+          <Button size="sm" variant="secondary" icon="play" loading={runAgainBusy} onClick={onRunAgain}>
+            {dry ? "Test again" : "Run again"}
+          </Button>
+        ) : null}
+      </header>
+      {versionNote ? <div className="border-b border-warning/50 bg-warning/10 px-3 py-2 text-sm">{versionNote}</div> : null}
+      <div className="flex min-h-0 flex-1 flex-col @3xl:flex-row">
+        <div className="flex min-h-[360px] min-w-0 flex-1 flex-col">
+          {dry ? <TestStrip detail={detail} def={def} /> : null}
+          <FlowEditor def={def} selectedId={selected} onSelect={setSelected} overlay={overlay} fitKey={run.id} />
+        </div>
+        <div className="flex max-h-[60%] min-h-0 shrink-0 flex-col border-t border-border @3xl:max-h-none @3xl:w-[360px] @3xl:border-l @3xl:border-t-0 [&>aside]:min-h-0 [&>aside]:flex-1">{side}</div>
+      </div>
+    </div>
+  );
+}

package/registry/blocks/run-view/runs-list.jsx

@@ -0,0 +1,99 @@
+"use client";
+
+// An automation's runs, newest first: what ran, how it ended, when, how
+// long, what it cost. Above them the little overview a person wants first:
+// how many finished, how many failed, what is still going, what it cost.
+// A row opens the run on the canvas. Props in, callbacks out.
+
+import { useMemo, useState } from "react";
+import { cx } from "../../ui";
+import { ACTIVE, Dot, agoWords, clockWords, creditsWords, durationWords, overviewOf, runStatusWords, triggerTypeWords } from "../automation-model";
+
+const FILTERS = [
+  { value: "all", label: "All" },
+  { value: "done", label: "Done" },
+  { value: "failed", label: "Failed" },
+  { value: "active", label: "In progress" },
+];
+
+const STATUS_TEXT = { green: "text-success", blue: "text-info", amber: "text-warning", red: "text-destructive", grey: "text-muted-foreground" };
+
+/**
+ *   runs      [{ id, status, trigger_type, is_test, dry?, created_at, started_at, ended_at, credits }], newest first
+ *   tz        the automation's time zone, for the clock words
+ *   onOpen(runId)
+ *   howToTest the words under "It has not run yet" (default says Test run)
+ */
+export function RunsList({ runs, tz = "UTC", onOpen, howToTest = "When it runs, each run is listed here, with how it went and what it cost. Use Test run to try it once.", className }) {
+  const [filter, setFilter] = useState("all");
+  const total = runs.length;
+  const o = useMemo(() => overviewOf(runs), [runs]);
+  const shown = runs.filter((r) => (filter === "all" ? true : filter === "active" ? ACTIVE.has(r.status) : r.status === filter));
+
+  if (total === 0) {
+    return (
+      <div className={cx("grid content-start gap-1 p-6", className)}>
+        <h3 className="m-0 text-base font-semibold">It has not run yet</h3>
+        <p className="m-0 text-sm text-muted-foreground">{howToTest}</p>
+      </div>
+    );
+  }
+  return (
+    <div data-scroll className={cx("@container grid min-h-0 min-w-0 flex-1 content-start gap-3 overflow-y-auto p-4", className)}>
+      <dl className="m-0 grid grid-cols-2 gap-2 @xl:grid-cols-4">
+        {[
+          ["Done", o.done, false],
+          ["Failed", o.failed, o.failed > 0],
+          ["In progress", o.active, false],
+          ["Spent", creditsWords(o.credits), false],
+        ].map(([label, value, bad]) => (
+          <div key={label} className="grid gap-0.5 rounded-lg border border-border bg-card px-3 py-2 text-card-foreground">
+            <dt className="text-xs text-muted-foreground">{label}</dt>
+            <dd className={cx("m-0 text-lg font-semibold tabular-nums", bad && "text-destructive")}>{value}</dd>
+          </div>
+        ))}
+      </dl>
+      <div role="group" aria-label="Show" className="flex flex-wrap gap-1">
+        {FILTERS.map((f) => (
+          <button
+            key={f.value}
+            type="button"
+            aria-pressed={filter === f.value}
+            onClick={() => setFilter(f.value)}
+            className={cx("min-h-9 rounded-full border px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", filter === f.value ? "border-foreground bg-accent font-medium" : "border-border text-muted-foreground hover:bg-accent")}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+      {shown.length === 0 ? (
+        <p className="m-0 text-sm text-muted-foreground">No run matches.</p>
+      ) : (
+        <ol className="m-0 grid list-none gap-1.5 p-0">
+          {shown.map((r) => {
+            const idx = total - runs.indexOf(r);
+            const h = runStatusWords(r.status, r.dry === true);
+            return (
+              <li key={r.id}>
+                <button type="button" onClick={() => onOpen?.(r.id)} className="grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-0.5 rounded-lg border border-border bg-card px-3 py-2 text-left text-card-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring @xl:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto]">
+                  <Dot tone={h.tone} />
+                  <span className="grid min-w-0 gap-0.5">
+                    <b className="text-sm font-semibold">
+                      {r.is_test ? "Test run" : "Run"} {idx}
+                    </b>
+                    <span className="truncate text-xs text-muted-foreground">
+                      {triggerTypeWords(r.trigger_type)} · {clockWords(r.started_at ?? r.created_at, tz) ?? ""} · {agoWords(r.created_at) ?? ""}
+                    </span>
+                  </span>
+                  <span className={cx("text-[13px] font-medium", STATUS_TEXT[h.tone])}>{h.text}</span>
+                  <span className="hidden font-mono text-xs text-muted-foreground @xl:inline">{durationWords(r.started_at, r.ended_at) ?? "—"}</span>
+                  <span className="hidden font-mono text-xs text-muted-foreground @xl:inline">{creditsWords(r.credits)}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ol>
+      )}
+    </div>
+  );
+}

package/registry/blocks/schedule-card/README.md

@@ -0,0 +1,121 @@
+# ScheduleCard
+
+> **Superseded** (0.8.1, the automations engine, D26). A job's card for an app whose jobs still run as the agent's wakes (`useJobs`). For an app whose jobs run on the automations engine (`useAutomations`), use `automation-list`: whole rows that open the automation, with the switch, health, next and last run and cost, and the editor and run views behind them. Keep using this block for an app that has not moved: it works as it did.
+
+
+One scheduled job of the app's agent, on a card beside the day's work:
+its name, how its last run went (a mark and words), one line of what it
+did, this run's cost and the week's credits against the allowance as a
+bar, when it runs next, **Run now** with its price on the button, and an
+on/off switch.
+
+It is part of the agent kit (0.8.1). The app shows its agent's work
+itself, in its own look; the window's Runs tab stays as the full
+history.
+
+```jsx
+import { ScheduleCard } from "../components/blocks/schedule-card";   // a Makersclaw app ("./blocks/schedule-card" from components/)
+import { ScheduleCard } from "@/components/makersclaw/blocks/schedule-card";   // a shadcn project
+```
+
+A client component. It formats nothing: every line comes in as words,
+so the screen says "Next: Wed 30 Sep, 07:00" in the app's voice. Its own
+width decides its layout: under about 320 px the next run and Run now
+stack, the button full width.
+
+## Props
+
+- `title` — "Morning read". `icon` — a kit `Icon` name (default
+  `"clock"`).
+- `state` — `{ tone, words }`. `tone` is `ok` · `failed` · `running` ·
+  `off` · `none`; `words` "Ran 07:02", "Didn't run", "Reading now",
+  "Off", "Not set up". Each tone has its own mark, so the state is never
+  told by colour alone.
+- `summary` — what the last run did, one or two lines. A failed run's
+  summary is the reason, in plain words.
+- `cost` — this run's cost, in words ("640 credits").
+- `allowance` — `{ used, of, words }`: the week's credits as a bar, in
+  the danger tone once full.
+- `next` — "Next: Wed 30 Sep, 07:00".
+- `run` — `{ label, price, onRun, loading, disabled, why }`: Run now,
+  its price muted inside the button ("Read now · about 700 cr"). `why`
+  is the button's title when it is disabled. Leave `run` out where the
+  member may not run the job.
+- `enabled`, `onToggle(next)` — the on/off switch. Drawn only when
+  `onToggle` is given; leave it out where the member may not switch the
+  job. `toggleLabel` — its words (default "On" / "Off"). `toggleBusy` —
+  the press is out.
+- `href` — the job's page. The whole card opens it (the chevron is a stretched link over the card); the switch, the Run button and any link or button in `children` keep their own press.
+- `children` — more under the summary: a reason, a link to the desk.
+- `className` — layout around it. Never colour.
+
+## useJobs (lib/hooks.js)
+
+```js
+const { jobs, budget, may, busy, runNow, setEnabled } = useJobs();
+```
+
+It reads `GET _claw/jobs`: each job's `id`, `name`, `does`, `words` (the
+schedule in words, "Weekdays at 07:00"), `enabled`, `next_run_at`,
+`last_run` (`{ id, status, ended_at }`), `plan`; the week's `budget`
+(`{ week_cap_credits, week_used_credits }`, or null with no cap); and
+`may` (`{ run, switch, pause }`). `runNow(id)` posts `_claw/run`,
+`setEnabled(id, on)` patches `_claw/jobs/<id>`; both look again after.
+`busy[id]` is `"run"` or `"switch"` while a press is out. It looks every
+30 s, every 5 s while a run is going, and not at all while the page is
+hidden. On a claw from before the door it is `unavailable`: show the
+card's quiet "Not set up", never an error.
+
+## Who may do what
+
+- Anyone who opens the app reads the card.
+- **Run now** and **the switch**: the app's owner, a workspace owner or
+  an admin — `may.run` and `may.switch`. Pass `run` and `onToggle` only
+  when they are true. The door refuses the others anyway; a hidden
+  button is never the guard.
+
+## Never
+
+- Never Run now without its price on the button: the press spends.
+- Never an Approve: a run that needs the member's yes waits for it on
+  the desk.
+- Never change the schedule's time here: that is the window's Settings ›
+  Schedule.
+- Never a colour of your own: the app's theme paints it.
+
+## Example
+
+```jsx
+"use client";
+import { useJobs } from "../lib/hooks";
+import { ScheduleCard } from "../components/blocks/schedule-card";
+
+const when = (iso) => (iso ? new Date(iso).toLocaleString("en-GB", { weekday: "short", day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }) : null);
+
+export default function MorningRead() {
+  const { jobs, budget, may, busy, runNow, setEnabled } = useJobs();
+  const job = jobs.find((j) => j.name === "Morning read");
+  if (!job) return null;
+  const last = job.last_run;
+  return (
+    <ScheduleCard
+      title={job.name}
+      icon="sun"
+      state={
+        !job.enabled ? { tone: "off", words: "Off" }
+        : !last ? { tone: "none", words: "Not run yet" }
+        : last.status === "running" ? { tone: "running", words: "Reading now" }
+        : last.status === "failed" ? { tone: "failed", words: "Didn't run" }
+        : { tone: "ok", words: `Ran ${when(last.ended_at)}` }
+      }
+      summary={job.does}
+      allowance={budget && { used: budget.week_used_credits, of: budget.week_cap_credits, words: `${budget.week_used_credits} of ${budget.week_cap_credits} credits this week` }}
+      next={job.enabled && job.next_run_at ? `Next: ${when(job.next_run_at)}` : null}
+      run={may.run ? { label: "Read now", price: "about 700 cr", onRun: () => runNow(job.id), loading: busy[job.id] === "run" } : undefined}
+      enabled={job.enabled}
+      onToggle={may.switch ? (on) => setEnabled(job.id, on) : undefined}
+      toggleBusy={busy[job.id] === "switch"}
+    />
+  );
+}
+```

package/registry/blocks/schedule-card/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "schedule-card",
+  "title": "ScheduleCard",
+  "description": "One scheduled job of the app's agent on a card: its name, how its last run went as a mark and words (Ran 07:02, Didn't run, Reading now, Off, Not set up), one line of what it did, this run's cost and the week's credits against the allowance as a bar, when it runs next, Run now with its price on the button, and an on/off switch. It draws what useJobs() returns (lib/hooks.js, GET _claw/jobs); Run now and the switch show only where the door says the member may press them. Its own width decides its layout.",
+  "useWhen": "Superseded by automation-list 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). An app whose agent runs on a schedule shows that job beside the day's work: a CRM's morning read on Today, a nightly import, a weekly report, an inbox checked every 15 minutes. For the runs themselves use run-history; for the job drawn as a graph with its runs use workflow-view; for one ask in progress use job-panel.",
+  "tags": ["schedule", "job", "automation", "agent", "run now", "next run", "cron", "credits", "allowance", "cost", "switch", "enabled", "status", "kit"],
+  "exports": ["ScheduleCard"],
+  "files": ["index.js", "schedule-card.jsx"],
+  "requires": []
+}

package/registry/blocks/schedule-card/demo.jsx

@@ -0,0 +1,82 @@
+"use client";
+
+// ScheduleCard with pretend jobs — the gallery's and the smoke test's
+// surface. Not installed into apps. Four states: a job that ran, one that
+// is reading now, one that did not run (the allowance spent), and one not
+// set up yet; at 320, 368 and 800 px so the layout by its own width
+// shows. The switch and Run now answer after a moment.
+import { useState } from "react";
+import { ScheduleCard } from "../components/blocks/schedule-card";
+
+function useJob(initial) {
+  const [on, setOn] = useState(initial);
+  const [busy, setBusy] = useState(null);
+  const press = (what, then) => {
+    setBusy(what);
+    setTimeout(() => {
+      then?.();
+      setBusy(null);
+    }, 700);
+  };
+  return { on, busy, toggle: (next) => press("switch", () => setOn(next)), run: () => press("run") };
+}
+
+export default function ScheduleCardDemo() {
+  const read = useJob(true);
+  const inbox = useJob(true);
+  const report = useJob(false);
+  return (
+    <div className="grid gap-6 p-4">
+      <div className="flex flex-wrap items-start gap-4">
+        <ScheduleCard
+          className="w-full max-w-[320px]"
+          title="Morning read"
+          icon="sun"
+          href="#"
+          state={read.on ? { tone: "ok", words: "Ran 07:02" } : { tone: "off", words: "Off" }}
+          summary="Read 38 emails and 3 meetings from Mon 28 Sep. Found 4 people, 3 details and 1 deal move."
+          cost="640 credits"
+          allowance={{ used: 4180, of: 10000, words: "4,180 of 10,000 this week" }}
+          next={read.on ? "Next: Wed 30 Sep, 07:00" : "Off: it runs again once switched on"}
+          run={{ label: "Read now", price: "about 700 cr", onRun: read.run, loading: read.busy === "run" }}
+          enabled={read.on}
+          onToggle={read.toggle}
+          toggleBusy={read.busy === "switch"}
+        />
+        <ScheduleCard
+          className="w-full max-w-[368px]"
+          title="Inbox sweep"
+          icon="inbox"
+          state={{ tone: "running", words: "Reading now · 12 of 40" }}
+          summary="Every 15 minutes: files new mail under its deal and drafts a reply where one is owed."
+          cost="about 90 credits a run"
+          next="Next: 10:45"
+          run={{ label: "Run now", price: "about 90 cr", disabled: true, why: "It is running now" }}
+          enabled={inbox.on}
+          onToggle={inbox.toggle}
+          toggleBusy={inbox.busy === "switch"}
+        />
+      </div>
+      <div className="flex flex-wrap items-start gap-4">
+        <ScheduleCard
+          className="w-full max-w-[800px]"
+          title="Friday review"
+          icon="calendar"
+          state={{ tone: "failed", words: "Didn't run" }}
+          summary="Fri 07:00 · The week's 10,000 credits were spent by Thursday. Nothing was read and nothing was charged."
+          allowance={{ used: 10000, of: 10000, words: "10,000 of 10,000 credits this week · back Monday" }}
+          next="Next: Fri 9 Oct, 07:00"
+          enabled={report.on}
+          onToggle={report.toggle}
+          toggleBusy={report.busy === "switch"}
+        />
+        <ScheduleCard
+          className="w-full max-w-[320px]"
+          title="Weekly digest"
+          state={{ tone: "none", words: "Not set up" }}
+          summary="It starts once a mailbox is connected."
+        />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/schedule-card/index.js

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