makersclaw 0.8.0 → 0.8.1

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

@@ -0,0 +1,203 @@
+"use client";
+
+// A job drawn as a graph on a dotted ground: its Trigger, each step of the
+// chosen run with how it went, and the result; over it the run picker and
+// Re-run; in its head the Live switch and "Trigger manually" with its
+// price; beside it the run history and the overview (the sibling
+// run-history block). Before any run it draws the job's declared steps
+// (`plan`) in pencil (dashed), with an honest line, so a job not set up
+// still has something to look at.
+//
+// Props in, callbacks out; it reads nothing and formats nothing. Tokens
+// only. Every status is a mark AND a word. Its own width decides its
+// layout (@container): under about 768 px the history and the overview
+// stack under the graph. The graph always runs top to bottom, each step a
+// full-width node with its whole title: it never scrolls sideways and
+// never cuts a title (a left-to-right strip did both at a desk window's
+// width once a job had six steps: the CRM, 2026-10-11).
+
+import { Button, Icon, Select, Switch, cx } from "../../ui";
+import { RunHistory, RunOverview } from "../run-history";
+
+const MARK = {
+  done: { icon: "circle-check", tone: "text-success", ring: "border-success", word: "Completed" },
+  ok: { icon: "circle-check", tone: "text-success", ring: "border-success", word: "Completed" },
+  complete: { icon: "circle-check", tone: "text-success", ring: "border-success", word: "Completed" },
+  failed: { icon: "circle-x", tone: "text-destructive", ring: "border-destructive", word: "Failed" },
+  running: { icon: "loader", tone: "text-info", ring: "border-info", word: "Running" },
+  needs_you: { icon: "circle-help", tone: "text-warning", ring: "border-warning", word: "Needs you" },
+  stopped: { icon: "stop", tone: "text-muted-foreground", ring: "border-border", word: "Stopped" },
+  skipped: { icon: "minus", tone: "text-muted-foreground", ring: "border-border", word: "Skipped" },
+  waiting: { icon: "circle-dashed", tone: "text-muted-foreground", ring: "border-border", word: "Not reached" },
+  planned: { icon: "pencil", tone: "text-muted-foreground", ring: "border-border", word: "Not run yet" },
+};
+const markOf = (s) => MARK[s] ?? MARK.waiting;
+
+/** The dotted ground: the theme's muted ink, faded by the layer's
+ *  opacity, so it reads on a light theme and a dark one alike. */
+const GROUND = { backgroundImage: "radial-gradient(var(--color-muted-foreground) 1px, transparent 1.5px)", backgroundSize: "16px 16px" };
+
+function StatusWord({ status }) {
+  const m = markOf(status);
+  return (
+    <span className={cx("inline-flex items-center gap-1 text-[11.5px]", m.tone)}>
+      <Icon name={m.icon} size={12} className={status === "running" ? "animate-spin motion-reduce:animate-none" : undefined} />
+      {m.word}
+    </span>
+  );
+}
+
+/** One node: a kicker over it (Trigger, Step 2, Result), the label, a
+ *  detail, its status. `pencil` draws it dashed: planned, not run. */
+function Node({ kicker, icon, label, detail, status, pencil = false }) {
+  const m = status ? markOf(status) : null;
+  return (
+    <div className="grid w-full min-w-0 gap-1">
+      <div className="flex min-w-0 items-center justify-between gap-2 text-[11.5px] text-muted-foreground">
+        <span className="truncate">{kicker}</span>
+        {status ? <StatusWord status={status} /> : null}
+      </div>
+      <div
+        className={cx(
+          "grid min-w-0 gap-0.5 rounded-[var(--radius)] border bg-card px-3 py-2.5 text-card-foreground",
+          pencil ? "border-dashed border-muted-foreground bg-transparent" : m && status !== "waiting" && status !== "skipped" ? m.ring : "border-border",
+        )}
+      >
+        <span className="flex min-w-0 items-start gap-2">
+          {icon ? <Icon name={icon} size={14} className="mt-0.5 shrink-0 text-muted-foreground" /> : null}
+          <b className={cx("min-w-0 break-words text-[13px] font-semibold", pencil && "font-medium text-muted-foreground")}>{label}</b>
+        </span>
+        {detail ? <span className="min-w-0 break-words text-xs text-muted-foreground">{detail}</span> : null}
+      </div>
+    </div>
+  );
+}
+
+/** The line between two nodes, going down. */
+function Link({ pencil }) {
+  return (
+    <span aria-hidden="true" className="flex shrink-0 justify-start pl-6">
+      <span className={cx("block h-5 w-0 border-l", pencil ? "border-dashed border-muted-foreground" : "border-border")} />
+    </span>
+  );
+}
+
+/**
+ *   title      the job's name ("Morning read")
+ *   trigger    { label: "Every weekday at 07:00", detail: "Starts on its own" }
+ *   steps      the chosen run's steps: [{ label, status, detail? }]
+ *              status: done|failed|running|needs_you|stopped|skipped|waiting
+ *   result     { label: "Wrote 4 people, 1 deal move", detail, status }
+ *   runs       RunHistory's rows ({ id, status, title, line, when, cost })
+ *   selected   the run drawn; onSelect(run)
+ *   overview   RunOverview's props, or null
+ *   live       { on, onToggle(next), busy } or null (no switch)
+ *   run        { label: "Trigger manually", price: "about 700 cr", onRun, loading, disabled, why } or null
+ *   rerun      { onRun, loading, label? } or null: Re-run the chosen run
+ *   plan       the job's declared steps, drawn in pencil before any run
+ *   empty      the honest line before any run
+ */
+export function WorkflowView({
+  title,
+  trigger,
+  steps = [],
+  result,
+  runs = [],
+  selected,
+  onSelect,
+  overview,
+  live = null,
+  run = null,
+  rerun = null,
+  plan = null,
+  empty,
+  className,
+}) {
+  const hasRuns = runs.length > 0;
+  const chosen = runs.find((r) => r.id === selected) ?? null;
+  const pencil = !hasRuns || (!steps.length && Boolean(plan?.length));
+  const drawn = pencil ? (plan ?? []).map((label) => ({ label, status: "planned" })) : steps;
+
+  return (
+    <section aria-label={title} className={cx("@container grid min-w-0 overflow-hidden rounded-[var(--radius)] border border-border bg-background text-foreground", className)}>
+      <header className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-border px-3 py-2">
+        <b className="min-w-[10rem] flex-1 truncate text-sm font-semibold">{title}</b>
+        {live ? (
+          <Switch
+            checked={Boolean(live.on)}
+            disabled={Boolean(live.busy)}
+            onChange={(e) => live.onToggle?.(Boolean(e?.target?.checked))}
+            label={live.on ? "Live" : "Off"}
+            className="-my-1.5 text-xs"
+          />
+        ) : null}
+        {run ? (
+          <Button size="sm" icon="play" loading={run.loading} disabled={run.disabled} onClick={run.onRun} title={run.why} className="max-w-full">
+            <span className="truncate">{run.label ?? "Trigger manually"}</span>
+            {run.price ? <span className="font-normal text-muted-foreground">{run.price}</span> : null}
+          </Button>
+        ) : null}
+      </header>
+
+      <div className="grid min-w-0 @3xl:grid-cols-[minmax(0,1fr)_300px]">
+        <div className="relative isolate grid min-w-0 content-start gap-4 p-3 @md:p-4">
+          <span aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 opacity-30" style={GROUND} />
+          {hasRuns ? (
+            <div className="flex min-w-0 max-w-full flex-wrap items-center gap-2 justify-self-start rounded-[var(--radius)] border border-border bg-card p-1.5 text-card-foreground">
+              <span className="block w-72 max-w-full">
+                <Select
+                  aria-label="The run shown"
+                  value={chosen?.id ?? ""}
+                  onChange={(e) => {
+                    const next = runs.find((r) => r.id === e.target.value);
+                    if (next) onSelect?.(next);
+                  }}
+                  options={runs.map((r) => ({ value: r.id, label: r.title }))}
+                  className="min-h-9 text-[13px]"
+                />
+              </span>
+              {rerun ? (
+                <Button size="sm" variant="quiet" icon="rotate-cw" loading={rerun.loading} disabled={rerun.disabled} onClick={rerun.onRun}>
+                  {rerun.label ?? "Re-run"}
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+
+          <ol aria-label={pencil ? "The steps it will take" : "The steps of this run"} className="m-0 flex min-w-0 max-w-xl list-none flex-col items-stretch p-0">
+            <li className="flex min-w-0 flex-col">
+              <Node kicker="Trigger" icon="zap" label={trigger?.label ?? "When it starts"} detail={trigger?.detail} pencil={pencil && !trigger} />
+            </li>
+            {drawn.map((s, i) => (
+              <li key={`${s.label}-${i}`} className="flex min-w-0 flex-col">
+                <Link pencil={pencil} />
+                <Node kicker={`Step ${i + 1}`} label={s.label} detail={s.detail} status={s.status} pencil={pencil} />
+              </li>
+            ))}
+            {result || pencil ? (
+              <li className="flex min-w-0 flex-col">
+                <Link pencil={pencil} />
+                <Node
+                  kicker="Result"
+                  icon="flag"
+                  label={result?.label ?? "What it wrote"}
+                  detail={result?.detail}
+                  status={pencil ? undefined : result?.status}
+                  pencil={pencil}
+                />
+              </li>
+            ) : null}
+          </ol>
+
+          {pencil ? <p className="m-0 max-w-prose rounded-[var(--radius)] bg-background px-2 py-1 text-[13px] text-muted-foreground justify-self-start">{empty ?? "No runs yet."}</p> : null}
+        </div>
+
+        <aside aria-label="Runs" className="grid min-w-0 content-start border-t border-border bg-card text-card-foreground @3xl:border-l @3xl:border-t-0">
+          <h3 className="m-0 px-3.5 pb-1 pt-3 text-sm font-semibold">Run history</h3>
+          <RunHistory runs={runs} selected={selected} onSelect={onSelect} label="Run history" empty={hasRuns ? undefined : "No runs yet."} />
+          {overview ? <RunOverview {...overview} className={cx("p-3.5", overview.className)} /> : null}
+        </aside>
+      </div>
+    </section>
+  );
+}

package/src/install.mjs

@@ -314,6 +314,44 @@ function ownedPath(path, tpl) {
   return tpl.files.some((f) => f.class === "fixed" && f.path === path);
 }
 
+/**
+ * The blocks an update must add: those the installed blocks require, and
+ * those they require in turn, that the app does not have and this version
+ * ships. In the order they are needed, each with the block that asked.
+ * A requirement that is a kit component, or a block this version does not
+ * ship, is not a block to add.
+ */
+function requiredMissing(installed, known) {
+  const have = new Set(installed);
+  const out = [];
+  const queue = [...installed];
+  while (queue.length) {
+    const name = queue.shift();
+    for (const r of known.find((b) => b.name === name)?.requires ?? []) {
+      const block = known.find((b) => b.name === r);
+      if (!block || have.has(r)) continue;
+      have.add(r);
+      out.push({ block, by: name });
+      queue.push(r);
+    }
+  }
+  return out;
+}
+
+/**
+ * The blocks an update should tell the app about and not add: those that
+ * carry an `offer` in their block.json, that the app does not have, born
+ * (`offer.since`) at or after the version the app was last laid from. An app
+ * decides to take one (`makersclaw add <name>`); update never does it for it,
+ * since a block replaces what the app drew itself. Each is
+ * { name, since, why, add }.
+ */
+export function offeredBlocks(known, have, appVersion) {
+  return known
+    .filter((b) => b.offer && !(b.name in have) && (!parseVersion(appVersion) || !newer(appVersion, b.offer.since)))
+    .map((b) => ({ name: b.name, since: b.offer.since, why: b.offer.why, add: `makersclaw add ${b.name}` }));
+}
+
 /**
  * Lay a template — and the blocks the app already has — over `dir`: the
  * one routine behind init, init --force, update and mode. Fixed files and
@@ -333,7 +371,7 @@ function ownedPath(path, tpl) {
  * lay is not pinned, and one that was pinned is removed as a retired one
  * is, so a switch of mode leaves only the new mode's fixed files.
  */
-function lay(dir, tpl, before, { tables, mode } = {}) {
+function lay(dir, tpl, before, { tables, mode, offer = false } = {}) {
   const v = version();
   const written = [];
   const kept = [];
@@ -383,6 +421,19 @@ function lay(dir, tpl, before, { tables, mode } = {}) {
   const blocks = {};
   const blockDeps = {};
   const known = loadBlocks();
+  const layBlock = (block) => {
+    for (const f of block.files) {
+      const bytes = readFileSync(f.from);
+      const hash = sha256(bytes);
+      if (hashFile(join(dir, f.to)) !== hash) {
+        writeFile(join(dir, f.to), bytes);
+        written.push(f.to);
+      }
+      pins[f.to] = hash;
+    }
+    blocks[block.name] = v;
+    Object.assign(blockDeps, block.dependencies);
+  };
   for (const [name, from] of Object.entries(before.manifest?.blocks ?? {})) {
     if (!existsSync(join(dir, BLOCK_DIR, name))) {
       notes.push(`${name}: its folder is gone — dropped from ${MANIFEST}`);
@@ -395,18 +446,20 @@ function lay(dir, tpl, before, { tables, mode } = {}) {
       notes.push(`${name}: not in makersclaw ${v} — left as installed (${from})`);
       continue;
     }
-    for (const f of block.files) {
-      const bytes = readFileSync(f.from);
-      const hash = sha256(bytes);
-      if (hashFile(join(dir, f.to)) !== hash) {
-        writeFile(join(dir, f.to), bytes);
-        written.push(f.to);
-      }
-      pins[f.to] = hash;
-    }
-    blocks[name] = v;
-    Object.assign(blockDeps, block.dependencies);
+    layBlock(block);
   }
+  // A block this version needs and the app does not have: one an installed
+  // block now requires (agent-pane has required chat-pane since 0.8.1). It is
+  // laid with it, or the installed block's imports would not resolve.
+  for (const { block, by } of requiredMissing(Object.keys(blocks), known)) {
+    layBlock(block);
+    notes.push(`${block.name}: added — ${by} requires it`);
+  }
+
+  // What is new and the app does not have: said, not added (update only).
+  const available = offer ? offeredBlocks(known, blocks, before.manifest?.version) : [];
+  for (const a of available) notes.push(`${a.name}: new in ${a.since}, not in this app — ${a.why}. ${a.add}`);
+  if (available.length > 1) notes.push(`to take them all: makersclaw add ${available.map((a) => a.name).join(" ")}`);
 
   // The blocks' npm packages, at the versions this release pins them to
   // (block.json `dependencies`): a block's files and its packages move
@@ -465,6 +518,7 @@ function lay(dir, tpl, before, { tables, mode } = {}) {
     install: fresh || lockWritten || pkg.some((c) => c.key !== "scripts"),
     pinned: Object.keys(pins).length,
     blocks: Object.keys(blocks),
+    available,
     notes,
   };
 }
@@ -494,7 +548,8 @@ export function init(dir, { template = "next", force = false, tables, mode: aske
 }
 
 /** `update [--major] [--adopt]` — this version's fixed files, docs and
- *  blocks. `--adopt` takes on an app laid before makersclaw kept a
+ *  blocks (and any block an installed one now requires: `requiredMissing`).
+ *  `--adopt` takes on an app laid before makersclaw kept a
  *  manifest — but only one from the kit's era (it has check/pins.json):
  *  its screens were written against this kit, so laying the fixed files
  *  again keeps them working. An older app drew its own controls; it needs
@@ -507,7 +562,7 @@ export function update(dir, { major = false, adopt = false } = {}) {
         "rebuild it onto the template — its screens need writing again, not just its files replacing",
       );
     }
-    return { ...lay(dir, loadTemplateOrFail("next"), readState(dir)), adopted: true };
+    return { ...lay(dir, loadTemplateOrFail("next"), readState(dir), { offer: true }), adopted: true };
   }
   const before = requireManifest(dir);
   const tpl = loadTemplateOrFail(before.manifest.template);
@@ -524,7 +579,7 @@ export function update(dir, { major = false, adopt = false } = {}) {
       "makersclaw diff shows what changes; makersclaw update --major lays it anyway",
     );
   }
-  return lay(dir, tpl, before);
+  return lay(dir, tpl, before, { offer: true });
 }
 
 /** What an app's own code must change when it moves to a mode. The
@@ -782,12 +837,18 @@ export function diff(dir) {
     }
   }
 
+  // …and the blocks an installed block now requires, which update adds.
+  const added = requiredMissing(Object.keys(manifest.blocks ?? {}), known);
+  for (const { block, by } of added) {
+    for (const f of block.files) entries.push({ item: block.name, path: f.to, status: "new", detail: `${by} requires it` });
+  }
+
   const pkgPath = join(dir, "package.json");
   const tplPkg = tpl.files.find((f) => f.class === "merged");
   const drop = modeDropScripts(tpl, appMode);
   const pkg = existsSync(pkgPath) && tplPkg ? mergePackage(readJson(pkgPath), modePackage(tpl, appMode), drop).changes : [];
   // …and the installed blocks' npm packages, which update lays with them.
-  const blockDeps = Object.assign({}, ...Object.keys(manifest.blocks ?? {}).map((n) => known.find((b) => b.name === n)?.dependencies ?? {}));
+  const blockDeps = Object.assign({}, ...[...Object.keys(manifest.blocks ?? {}), ...added.map((a) => a.block.name)].map((n) => known.find((b) => b.name === n)?.dependencies ?? {}));
   if (existsSync(pkgPath) && Object.keys(blockDeps).length) pkg.push(...mergePackage(readJson(pkgPath), { dependencies: blockDeps }).changes);
   // …and the lock update would cut for the package.json it would leave.
   if (existsSync(pkgPath) && tplPkg) {

package/src/registry.mjs

@@ -292,6 +292,9 @@ function loadBlocksFrom(root, defaultTier) {
         tags: meta.tags ?? [],
         useWhen: meta.useWhen ?? "",
         requires: meta.requires ?? [],
+        // { since, why }: update tells an app that lacks this block about it
+        // (it never adds it): the one top bar, the first run…
+        offer: meta.offer?.since && meta.offer?.why ? { since: String(meta.offer.since), why: String(meta.offer.why) } : null,
         dependencies: meta.dependencies ?? {},
         exports: meta.exports ?? [],
         files,

package/templates/next/browser/lib/data.js

@@ -10,9 +10,12 @@ import { surfaceOfPath } from "./platform";
 //
 // Also here: the hooks, which read on mount and again on dataChanged()
 // (every write that answers ok calls it), and whenLanded(), which waits
-// for those reads.
+// for those reads. afterWrite(write) is a write and then those reads, for
+// "make a row, then open it"; useNotFound(found, { loading }) is how a
+// record page may say "not found" (never while a write is out).
 
 export {
+  afterWrite,
   countBy,
   countRows,
   dataChanged,
@@ -22,8 +25,10 @@ export {
   useActivity,
   useCount,
   useCountBy,
+  useNotFound,
   useRow,
   useRows,
+  useSettled,
   whenLanded,
 } from "./door";