makersclaw 0.7.0 → 0.8.1

package/registry/blocks/automation-model/parts.jsx

@@ -0,0 +1,94 @@
+"use client";
+
+// The small pieces the automation blocks share: a health chip and dot, and
+// the side panel every settings view sits in (a head with the thing's
+// face, a scrolling body, a foot). Presentational; words and callbacks in.
+
+import { Icon, Select, cx } from "../../ui";
+import { creditsWords, runLine } from "./words";
+
+const CHIP = {
+  green: "border-success/40 text-success",
+  blue: "border-info/40 text-info",
+  amber: "border-warning/50 text-warning",
+  red: "border-destructive/50 text-destructive",
+  grey: "border-border text-muted-foreground",
+};
+const DOT = { green: "bg-success", blue: "bg-info", amber: "bg-warning", red: "bg-destructive", grey: "bg-muted-foreground/60" };
+
+/** A small word in a pill. tone: green | blue | amber | red | grey. */
+export function Chip({ tone = "grey", className, children }) {
+  return <span className={cx("inline-flex shrink-0 items-center whitespace-nowrap rounded-full border px-2 py-px text-xs font-medium", CHIP[tone] ?? CHIP.grey, className)}>{children}</span>;
+}
+
+/** A dot of the same tones, beside a health word. */
+export function Dot({ tone = "grey", className }) {
+  return <i aria-hidden="true" className={cx("inline-block size-2 shrink-0 rounded-full", DOT[tone] ?? DOT.grey, className)} />;
+}
+
+/**
+ * The panel beside (or, narrow, over) a canvas.
+ *   icon       a kit Icon name drawn in the head
+ *   glyph      or: a node here (automation-model's Glyph) instead
+ *   title, subtitle
+ *   onClose    draws the close button
+ *   footer     a node pinned under the body
+ *   label      what a screen reader calls it
+ */
+export function SidePanel({ icon, glyph, title, subtitle, onClose, footer, label, tone = "plain", className, children }) {
+  return (
+    <aside aria-label={label ?? title} className={cx("flex min-h-0 min-w-0 flex-col bg-card text-card-foreground", className)}>
+      <header className="flex min-w-0 items-start gap-2.5 border-b border-border px-3.5 py-3">
+        {glyph || icon ? (
+          <span className={cx("inline-flex size-9 shrink-0 items-center justify-center rounded-lg border", tone === "plain" ? "border-border text-muted-foreground" : "border-primary bg-primary/15 text-primary")}>
+            {glyph ?? <Icon name={icon} size={18} />}
+          </span>
+        ) : null}
+        <div className="grid min-w-0 flex-1 gap-0.5">
+          <h3 className="m-0 break-words text-sm font-semibold leading-tight">{title}</h3>
+          {subtitle ? <p className="m-0 text-xs text-muted-foreground">{subtitle}</p> : null}
+        </div>
+        {onClose ? (
+          <button type="button" aria-label="Close" onClick={onClose} className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <Icon name="x" size={16} />
+          </button>
+        ) : null}
+      </header>
+      <div data-scroll className="grid min-h-0 flex-1 content-start gap-4 overflow-y-auto px-3.5 py-3.5">
+        {children}
+      </div>
+      {footer ? <footer className="flex flex-wrap items-center gap-2 border-t border-border px-3.5 py-2.5">{footer}</footer> : null}
+    </aside>
+  );
+}
+
+/** A titled group inside a panel. */
+export function PanelSection({ title, children }) {
+  return (
+    <section className="grid gap-3 border-t border-border pt-3">
+      <h4 className="m-0 text-2xs font-semibold uppercase tracking-wide text-muted-foreground">{title}</h4>
+      {children}
+    </section>
+  );
+}
+
+/**
+ * Newest first, numbered from the oldest: the number a person says.
+ *   runs      [{ id, status, created_at, is_test, credits }]
+ *   value     the run shown, or null
+ *   onPick(runId)
+ */
+export function RunPicker({ runs, value = null, onPick, className }) {
+  if (!runs?.length) return null;
+  const total = runs.length;
+  return (
+    <span className={cx("block w-64 max-w-full", className)}>
+      <Select
+        aria-label="Pick a run"
+        value={value ?? ""}
+        onChange={(e) => e.target.value && onPick?.(e.target.value)}
+        options={[...(value === null ? [{ value: "", label: "Runs" }] : []), ...runs.map((r, i) => ({ value: r.id, label: `${runLine(r, total - i)} · ${creditsWords(r.credits)}` }))]}
+      />
+    </span>
+  );
+}

package/registry/blocks/automation-model/schedule.js

@@ -0,0 +1,53 @@
+// A schedule in a person's terms and in cron, both ways.
+//
+// The trigger picker offers the shapes people ask for ("every weekday at
+// 07:00"); the definition holds a five-field cron. Anything the picker
+// cannot read back stays a custom cron, kept exactly as written.
+
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+
+/** parts: { freq: daily|weekdays|weekly|hourly|custom, hour, minute,
+ *  weekday (0 is Sunday), cron } */
+export function cronFromParts(p) {
+  const h = clamp(Math.round(p.hour), 0, 23);
+  const m = clamp(Math.round(p.minute), 0, 59);
+  switch (p.freq) {
+    case "daily":
+      return `${m} ${h} * * *`;
+    case "weekdays":
+      return `${m} ${h} * * 1-5`;
+    case "weekly":
+      return `${m} ${h} * * ${clamp(Math.round(p.weekday), 0, 6)}`;
+    case "hourly":
+      return `${m} * * * *`;
+    default:
+      return p.cron;
+  }
+}
+
+export function partsFromCron(cron) {
+  const c = String(cron ?? "").trim().replace(/\s+/g, " ");
+  const base = { hour: 7, minute: 0, weekday: 1, cron: c };
+  let m = /^(\d{1,2}) (\d{1,2}) \* \* \*$/.exec(c);
+  if (m) return { ...base, freq: "daily", minute: Number(m[1]), hour: Number(m[2]) };
+  m = /^(\d{1,2}) (\d{1,2}) \* \* 1-5$/.exec(c);
+  if (m) return { ...base, freq: "weekdays", minute: Number(m[1]), hour: Number(m[2]) };
+  m = /^(\d{1,2}) (\d{1,2}) \* \* ([0-6])$/.exec(c);
+  if (m) return { ...base, freq: "weekly", minute: Number(m[1]), hour: Number(m[2]), weekday: Number(m[3]) };
+  m = /^(\d{1,2}) \* \* \* \*$/.exec(c);
+  if (m) return { ...base, freq: "hourly", minute: Number(m[1]) };
+  return { ...base, freq: "custom" };
+}
+
+export const WEEKDAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+/** `07:00` for a time input. */
+export const timeText = (hour, minute) => `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+
+export function parseTime(text) {
+  const m = /^(\d{1,2}):(\d{2})$/.exec(String(text ?? ""));
+  if (!m) return null;
+  const hour = Number(m[1]);
+  const minute = Number(m[2]);
+  return hour <= 23 && minute <= 59 ? { hour, minute } : null;
+}

package/registry/blocks/automation-model/templates.js

@@ -0,0 +1,128 @@
+// Starting points: a few ready-made flows a person can open and change,
+// so a first automation is never a blank canvas. They use only steps the
+// engine runs today; each is a whole definition with its blanks marked (an
+// action to pick, a message to write).
+//
+// Content, not code: add one by adding an entry. An app may hand its own
+// list to the list screen (`starts`), which is how an app offers flows
+// that name its own actions.
+
+import { blankAutomation, keyFromName } from "./edit";
+
+function base(name, taken, trigger) {
+  return blankAutomation(name, keyFromName(name, taken), trigger);
+}
+
+/** Each: { id, name, blurb, glyph, needs, build(taken) → definition }. */
+export const STARTING_POINTS = [
+  {
+    id: "weekly-reminder",
+    name: "A reminder every Monday",
+    blurb: "Leaves a note for you at the start of each week.",
+    glyph: "trigger-schedule",
+    needs: null,
+    build: (taken) => ({
+      ...base("Monday reminder", taken, { type: "schedule", cron: "0 9 * * 1", tz: "team" }),
+      does: "Leaves a note for the owner every Monday morning.",
+      steps: [{ id: "note", kind: "notify", label: "Leave the reminder", message: "It is Monday. Look at the week ahead." }],
+    }),
+  },
+  {
+    id: "check-then-tell",
+    name: "Check something, then tell me",
+    blurb: "Goes one way when a condition holds and another way when it does not.",
+    glyph: "condition",
+    needs: "A condition to check",
+    build: (taken) => ({
+      ...base("Check and tell", taken, { type: "manual" }),
+      does: "Checks a condition and says which way it went.",
+      steps: [
+        {
+          id: "check",
+          kind: "condition",
+          label: "Is it worth a look?",
+          if: "{{ true }}",
+          then: [{ id: "say_yes", kind: "notify", label: "Tell me it is", message: "Yes, it is worth a look." }],
+          else: [{ id: "say_no", kind: "stop", label: "Nothing to do", message: "Nothing to look at today." }],
+        },
+      ],
+    }),
+  },
+  {
+    id: "wait-then-follow-up",
+    name: "Wait, then follow up",
+    blurb: "Waits a couple of days, then leaves a note. Nothing runs while it waits.",
+    glyph: "wait",
+    needs: null,
+    build: (taken) => ({
+      ...base("Follow up later", taken, { type: "manual" }),
+      does: "Waits two days, then reminds the owner.",
+      steps: [
+        { id: "pause", kind: "wait", for: "2d" },
+        { id: "remind", kind: "notify", label: "Remind me", message: "Time to follow up." },
+      ],
+    }),
+  },
+  {
+    id: "app-action-daily",
+    name: "Run an app's action every morning",
+    blurb: "Picks one of your apps' actions and runs it each weekday.",
+    glyph: "action",
+    needs: "An app and one of its actions",
+    build: (taken) => ({
+      ...base("Morning action", taken, { type: "schedule", cron: "0 7 * * 1-5", tz: "team" }),
+      does: "Runs an app's action each weekday morning.",
+      steps: [
+        { id: "act", kind: "action", label: "Run the action", action: "", input: {} },
+        { id: "done", kind: "notify", message: "It ran." },
+      ],
+    }),
+  },
+  {
+    id: "ask-model",
+    name: "Ask the model to write a line",
+    blurb: "One model call, then a note with what it wrote.",
+    glyph: "llm",
+    needs: "What to ask",
+    build: (taken) => ({
+      ...base("Write a line", taken, { type: "manual" }),
+      does: "Asks the model for a line and leaves it as a note.",
+      steps: [
+        { id: "write", kind: "llm", label: "Write the line", prompt: "Write one friendly line that wishes the team a good week.", tier: "fast" },
+        { id: "tell", kind: "notify", message: "{{ steps.write.output }}" },
+      ],
+    }),
+  },
+];
+
+/** The starting points the platform keeps (the desk's `GET automation-starts`
+ *  → `starts`), in the shape the list draws:
+ *  { id, name, blurb, glyph, needs (a line or null), ai (a line or ""),
+ *    price: { credits, per }, build(taken) → a whole definition }.
+ *  `needs` is joined into one plain line ("payments, a mailbox"); `price.per`
+ *  is "each" when the cost is per item, else null. `build` hands back a copy
+ *  of the definition with a key nobody has taken. Anything that is not a
+ *  start is left out. */
+export function startsFromPlatform(list) {
+  const out = [];
+  for (const s of Array.isArray(list) ? list : []) {
+    if (!s || typeof s !== "object" || typeof s.id !== "string" || !s.definition || typeof s.definition !== "object") continue;
+    const needs = (Array.isArray(s.needs) ? s.needs : []).filter((x) => typeof x === "string" && x.trim()).map((x) => x.trim());
+    const credits = Number(s.credits);
+    out.push({
+      id: s.id,
+      name: String(s.name ?? s.definition.name ?? s.id),
+      blurb: String(s.blurb ?? ""),
+      glyph: typeof s.glyph === "string" && s.glyph ? s.glyph : undefined,
+      needs: needs.length ? needs.join(", ") : null,
+      ai: typeof s.ai === "string" ? s.ai : "",
+      price: { credits: Number.isFinite(credits) && credits > 0 ? credits : 0, per: s.per === "each" ? "each" : null },
+      build: (taken) => {
+        const def = JSON.parse(JSON.stringify(s.definition));
+        def.key = keyFromName(def.name ?? s.name ?? s.id, taken instanceof Set ? taken : new Set(taken ?? []));
+        return def;
+      },
+    });
+  }
+  return out;
+}

package/registry/blocks/automation-model/values.js

@@ -0,0 +1,29 @@
+// A step's value as the text a person types, and back. Plain numbers,
+// true/false/null and JSON objects are kept as what they are; everything
+// else is text. A value that is one `{{ expression }}` is text the engine
+// reads later.
+
+/** A step's value, as the text a person types. */
+export function valueToText(v) {
+  if (v === undefined) return "";
+  if (typeof v === "string") return v;
+  if (v === null) return "null";
+  return typeof v === "object" ? JSON.stringify(v) : String(v);
+}
+
+/** What a person typed, as a value. */
+export function textToValue(text) {
+  const t = String(text ?? "").trim();
+  if (/^-?\d+(\.\d+)?$/.test(t)) return Number(t);
+  if (t === "true") return true;
+  if (t === "false") return false;
+  if (t === "null") return null;
+  if ((t.startsWith("{") && t.endsWith("}") && !t.startsWith("{{")) || (t.startsWith("[") && t.endsWith("]"))) {
+    try {
+      return JSON.parse(t);
+    } catch {
+      return text;
+    }
+  }
+  return text;
+}