makersclaw 0.7.0 → 0.8.1

package/registry/blocks/source-receipt/README.md

@@ -0,0 +1,97 @@
+# SourceReceipt
+
+Where one value came from, drawn as a clipping:
+
+- the page's or the mail's title, with the trust mark's shape beside it;
+- its address (linked) or the mailbox, and the date it was read;
+- the words on it, with the **deciding words underlined** wherever they
+  appear;
+- a trust word ("their own site", "a 2023 directory");
+- **Open the source**.
+
+A member reads the claim and its proof in one look, and decides how far
+to trust it.
+
+It is not a second receipt. The clipping is `agent-column`'s (Data
+Enrichment's "the receipt"); this block wraps it for one source standing
+on its own: a CRM's found title, a note's proof margin, a newsletter's
+source line. Inside a column of answers, use `agent-column`'s `Receipt`.
+
+```jsx
+import { SourceReceipt } from "../components/blocks/source-receipt";   // a Makersclaw app ("./blocks/source-receipt" from components/)
+import { SourceReceipt } from "@/components/makersclaw/blocks/source-receipt";   // a shadcn project
+```
+
+A client component. It requires `agent-column` (and through it
+`agent-marks`), laid with it.
+
+## Which hook feeds it
+
+None. The source is app data the agent wrote beside the value: its
+address, its title, the words it read, the words that decided. Keep
+them in the record (a `source` column, a `sources` table) and pass them
+in.
+
+## Props
+
+- `title` — the page's or the mail's title ("Careers · Klarwerk").
+- `url` — the source's address. The clipping shows it short
+  ("klarwerk.de/careers") and links it.
+- `site` — where, when there is no `url`: a mailbox ("Sofia Reyes
+  <sofia@crumb.co>") or a site's name. From `url` when left out.
+- `kind` — `site` (default) or `mail`: the icon before the trust word.
+- `date` — when it was read or sent, in words ("read 22 Sep").
+- `trust` — a word for how far to trust it ("their own site", "her
+  signature", "a 2023 directory").
+- `sure` — `sure` · `likely` · `guess`: the trust mark's shape beside
+  the title (filled, half, dashed).
+- `excerpt` — the words on it.
+- `marks` — the deciding words, `string[]`. Every occurrence of each is
+  underlined, whatever its case. Without `marks`, an excerpt's own
+  `[[…]]` (the agent's marking) are underlined instead.
+- `onOpen()` — opens the source your way. Without it, a `url` opens in a
+  new tab.
+- `openLabel` — default "Open the source".
+- `action` — a node at the head's end: a "Pick 70" when two sources
+  disagree.
+- `picked` — drawn as the one chosen.
+- `className` — layout around it. Never colour.
+
+`markExcerpt(excerpt, marks)` is exported: the excerpt with `[[…]]`
+around every deciding word, as the clipping reads it.
+
+## Who may do what
+
+Anyone who can see the value can see its source. The receipt has no
+writes; a Pick is your own `action`, and your own action's rules hold.
+
+## Never
+
+- Never build the excerpt from HTML or inject it: it is drawn as text,
+  and the underlines are elements, never markup in a string.
+- Never show a value as found with no receipt to open.
+- Never colour the trust alone: the mark's shape and the word say it.
+
+## Example
+
+The source of a contact's job title, under the field.
+
+```jsx
+import { SourceReceipt } from "./blocks/source-receipt";
+
+export function TitleSource({ person }) {
+  const s = person.title_source;
+  if (!s) return null;
+  return (
+    <SourceReceipt
+      title={s.title}
+      url={s.url}
+      date={`read ${s.read_on}`}
+      trust={s.trust}
+      sure={s.sure}
+      excerpt={s.words}
+      marks={[person.job_title]}
+    />
+  );
+}
+```

package/registry/blocks/source-receipt/block.json

@@ -0,0 +1,30 @@
+{
+  "name": "source-receipt",
+  "title": "SourceReceipt",
+  "description": "Where one value came from, as a clipping: the page or the mail and its title, the address, the date it was read, a trust word (\"their own site\", \"a 2023 directory\") and the trust mark's shape, the words on it with the deciding ones underlined wherever they appear (case-insensitive, never HTML), and Open the source. A thin wrapper over agent-column's clipping (Data Enrichment's receipt) for a value that stands on its own, so every app draws a source the same way.",
+  "useWhen": "A value the agent found should show its proof beside it: a contact's title from an email signature, a company's size from its site, a figure in a note or a newsletter with its source in the margin, two sources side by side for a person to pick. For a whole column of answers across records use agent-column; for a value proposed but not kept yet, put the receipt under a suggestion.",
+  "tags": [
+    "source",
+    "citation",
+    "receipt",
+    "provenance",
+    "evidence",
+    "quote",
+    "clipping",
+    "trust",
+    "proof",
+    "reference",
+    "found"
+  ],
+  "exports": [
+    "SourceReceipt",
+    "markExcerpt"
+  ],
+  "files": [
+    "index.js",
+    "source-receipt.jsx"
+  ],
+  "requires": [
+    "agent-column"
+  ]
+}

package/registry/blocks/source-receipt/demo.jsx

@@ -0,0 +1,71 @@
+"use client";
+
+// SourceReceipt for a page, a mail, two sources to pick from, and a
+// source with nothing to underline — the gallery's and the smoke test's
+// surface. Not installed into apps.
+import { useState } from "react";
+import { Button } from "../components/ui";
+import { SourceReceipt } from "../components/blocks/source-receipt";
+
+export default function SourceReceiptDemo() {
+  const [picked, setPicked] = useState(null);
+  const pick = (which, words) =>
+    picked === which ? (
+      <Button size="sm" variant="primary" disabled>
+        Picked
+      </Button>
+    ) : (
+      <Button size="sm" onClick={() => setPicked(which)}>
+        {words}
+      </Button>
+    );
+  return (
+    <div className="grid gap-6 p-6 [grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))]">
+      <SourceReceipt
+        title="Careers · Klarwerk"
+        url="https://www.klarwerk.de/careers"
+        date="read 22 Sep"
+        trust="their own site, five months old"
+        sure="likely"
+        excerpt="We're a team of 70 across Berlin and Leipzig. Our team of 70 ships payroll software for 2,000 shops."
+        marks={["team of 70"]}
+      />
+      <SourceReceipt
+        kind="mail"
+        title="Re: scheduling for all the shops"
+        site="Sofia Reyes <sofia@crumb.co>"
+        date="Sat 12 Sep"
+        trust="her email signature"
+        sure="sure"
+        excerpt="Sofia Reyes — Head of Retail Operations, Crumb & Co. +1 612 555 0142"
+        marks={["head of retail operations"]}
+        onOpen={() => undefined}
+        openLabel="Open the mail"
+      />
+      <SourceReceipt
+        title="Klarwerk on LinkedIn"
+        url="linkedin.com/company/klarwerk"
+        date="read 22 Sep"
+        trust="a profile the company keeps"
+        sure="likely"
+        excerpt="[[51–200 employees]] · [[85]] members"
+        action={pick("one", "Pick 85")}
+        picked={picked === "one"}
+      />
+      <SourceReceipt
+        title="A 2023 directory"
+        url="https://directory.example.org/companies/klarwerk-gmbh-berlin-leipzig-payroll-software-2023"
+        date="read 22 Sep"
+        trust="a 2023 directory"
+        sure="guess"
+        excerpt="Klarwerk GmbH, payroll software, Berlin. About 60 staff."
+        marks={["about 60", "nothing that appears"]}
+        action={pick("other", "Pick 60")}
+        picked={picked === "other"}
+      />
+      <div className="w-80 max-w-full">
+        <SourceReceipt title="A source with no words kept" url="nordlicht.io/team" date="read 21 Sep" />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/source-receipt/index.js

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

package/registry/blocks/source-receipt/source-receipt.jsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Button, Icon, cx } from "../../ui";
+import { Clipping } from "../agent-column";
+
+// SourceReceipt — where one value came from, as a clipping (the app kit,
+// D15): the page or the mail, its date, a trust word ("their own site",
+// "a 2023 directory"), the words on it with the deciding ones underlined,
+// and Open the source. For a value that is not in an agent column: a
+// CRM's found title, a note's proof margin, a newsletter's source line.
+//
+// It is NOT a second receipt. The clipping is agent-column's (Data
+// Enrichment's "the receipt"); this wraps it for one source standing on
+// its own, so both draw the same thing. No door: the source is app data
+// the agent wrote. Props in, callbacks out.
+
+/** Wrap every occurrence of each mark in [[…]] (the clipping's mark for
+ *  deciding words), case-insensitive, longest first so no mark lands
+ *  inside another. With no marks, the excerpt's own [[…]] (the agent's)
+ *  stand; with marks, they replace them. Plain strings only: never HTML. */
+export function markExcerpt(excerpt, marks) {
+  const list = [...new Set((marks ?? []).map((m) => String(m ?? "").trim()).filter((m) => m && !/[[\]]/.test(m)))].sort((a, b) => b.length - a.length);
+  if (!list.length) return String(excerpt ?? "");
+  const text = String(excerpt ?? "").replace(/\[\[|\]\]/g, "");
+  if (!text) return text;
+  const re = new RegExp(list.map((m) => m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|"), "gi");
+  return text.replace(re, (hit) => `[[${hit}]]`);
+}
+
+/** "acme.com", from a URL; null when it is not one. */
+function siteOf(url) {
+  try {
+    return new URL(/^https?:/i.test(url) ? url : `https://${url}`).hostname.replace(/^www\./i, "");
+  } catch {
+    return null;
+  }
+}
+
+/**
+ *   title     the page's or the mail's title ("Careers · Klarwerk")
+ *   site      where: a site ("klarwerk.de") or a mailbox ("Sofia Reyes
+ *             <sofia@crumb.co>"); from `url` when left out
+ *   url       the source's address; the clipping links it
+ *   kind      "site" (default) or "mail": the icon before the trust word
+ *   date      when it was read or sent, in words ("read 22 Sep")
+ *   trust     a word for how far to trust it ("their own site")
+ *   sure      sure · likely · guess: the trust mark's shape, beside the title
+ *   excerpt   the words on it
+ *   marks     the deciding words, underlined wherever they appear
+ *   onOpen()  opens the source; without it, with a url, the source opens
+ *             in a new tab
+ *   openLabel default "Open the source"
+ *   action    a node at the head's end (a "Pick" for one of two)
+ *   picked    drawn as the one chosen
+ */
+export function SourceReceipt({
+  title,
+  site,
+  url,
+  kind = "site",
+  date,
+  trust,
+  sure,
+  excerpt,
+  marks = [],
+  onOpen,
+  openLabel = "Open the source",
+  action,
+  picked = false,
+  className,
+}) {
+  const where = site ?? (url ? siteOf(url) : null);
+  // The clipping draws a url as its linked address; a mailbox or a site
+  // without one rides in its date line instead.
+  const read = [url ? null : where, date].filter(Boolean).join(" · ") || undefined;
+  const href = url ? (/^https?:/i.test(url) ? url : `https://${url}`) : null;
+  return (
+    <Clipping
+      source={{ url: url || undefined, title: title || where || undefined, evidence: excerpt ? markExcerpt(excerpt, marks) : undefined, read }}
+      trust={sure}
+      title={title || where || "A source"}
+      action={action}
+      picked={picked}
+      className={cx("min-w-0 text-sm", className)}
+    >
+      {trust || onOpen || href ? (
+        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+          {trust ? (
+            <span className="inline-flex min-w-0 items-center gap-1 text-muted-foreground">
+              <Icon name={kind === "mail" ? "mail" : "globe"} size={12} className="shrink-0" />
+              <span className="min-w-0 break-words">{trust}</span>
+            </span>
+          ) : null}
+          {onOpen ? (
+            <Button variant="link" size="inherit" onClick={onOpen} className="ml-auto">
+              {openLabel} <Icon name="external" size={12} />
+            </Button>
+          ) : href ? (
+            <Button variant="link" size="inherit" href={href} target="_blank" rel="noreferrer" className="ml-auto">
+              {openLabel} <Icon name="external" size={12} />
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+    </Clipping>
+  );
+}

package/registry/blocks/spreadsheet/spreadsheet.jsx

@@ -154,13 +154,22 @@ export function Spreadsheet({
     const el = rootRef.current;
     if (!el) return;
     setBoxW(el.clientWidth);
-    const ro = new ResizeObserver(() => setBoxW(el.clientWidth));
+    // The new width is taken in the next frame, never inside the observer's
+    // own delivery: a change made there that touches anything observed
+    // (the virtualisers watch this grid too) makes the browser report
+    // "ResizeObserver loop completed with undelivered notifications".
+    let frame = 0;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => setBoxW(el.clientWidth));
+    });
     ro.observe(el);
     const mq = window.matchMedia?.("(pointer: coarse)");
     const onMq = () => setCoarse(Boolean(mq?.matches));
     onMq();
     mq?.addEventListener?.("change", onMq);
     return () => {
+      cancelAnimationFrame(frame);
       ro.disconnect();
       mq?.removeEventListener?.("change", onMq);
     };
@@ -1065,6 +1074,10 @@ export function Spreadsheet({
     overscan: 10,
     scrollMargin: headH,
     initialRect: { width: 1200, height: typeof height === "number" ? height : 560 },
+    // The scroller's new size is read in the next frame, not inside the
+    // observer's delivery (a synchronous re-render there is what the
+    // browser reports as a ResizeObserver loop).
+    useAnimationFrameWithResizeObserver: true,
     rangeExtractor: keepRow,
     getItemKey: (i) => viewRows[i]?.id ?? i,
   });
@@ -1077,6 +1090,7 @@ export function Spreadsheet({
     overscan: 2,
     scrollMargin: gutterW + frozenW,
     initialRect: { width: 1200, height: typeof height === "number" ? height : 560 },
+    useAnimationFrameWithResizeObserver: true,
     rangeExtractor: keepCol,
     getItemKey: (i) => scrollCols[i]?.key ?? i,
   });

package/registry/blocks/step-picker/README.md

@@ -0,0 +1,78 @@
+# StepPicker
+
+The two ways to choose a step of an automation. They only say which kind a
+person chose; where the step goes is the editor's call (`flow-editor` and
+`automation-editor` do it for you).
+
+- `StepPicker` — the popover a **+** on a connector opens: a search box,
+  then the kinds grouped Your apps · Think · Flow · Data · Tell · More,
+  each with one line on what it does and a tag: **free**, **paid** (it
+  costs credits when it runs) or **soon** (the platform does not run it
+  yet).
+- `PaletteBar` — the strip along the bottom of a canvas: one icon per
+  kind, grouped, with an "AI" mark on a model call and an "A" on the agent.
+
+```jsx
+import { StepPicker, PaletteBar } from "../components/blocks/step-picker";   // a Makersclaw app
+import { StepPicker, PaletteBar } from "@/components/makersclaw/blocks/step-picker";   // a shadcn project
+```
+
+`makersclaw add step-picker` lays `automation-model` with it, which holds
+the catalog both read. Client components. Tokens only: an agent step is
+drawn in the app's accent (`primary`, as the kit's AgentMark draws the agent: solid for the agent, outlined for one model call) and everything else plain.
+
+## Props
+
+### StepPicker
+
+- `onPick(kind)` — a kind was chosen: `action` · `tool` · `llm` · `agent` ·
+  `condition` · `loop` · `wait` · `stop` · `set` · `brain.read` · `search` ·
+  `notify` · `automation`.
+- `onClose()` — Escape, or a press outside it.
+- `title` — the dialog's name for a screen reader (default "Add a step").
+- `inline` — in the flow of a page (the outline view), not floating over a
+  canvas.
+- `runnable` — a `Set` of the kinds the platform runs. The rest say
+  "soon". Default: the kinds the engine runs today.
+- `style`, `className` — where the floating panel sits. Never colour.
+
+### PaletteBar
+
+- `onAdd(kind)` — a kind was pressed.
+- `className`.
+
+## Never
+
+- Never offer a kind the platform cannot run without saying "soon": the
+  save would refuse it later.
+- Never a price in the picker beyond free or paid: a step's price comes
+  from the automation's estimate, on its card.
+
+## Example
+
+```jsx
+"use client";
+import { useState } from "react";
+import { StepPicker } from "../components/blocks/step-picker";
+import { Button } from "../components/ui";
+
+export default function AddStep({ onAdd }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="relative">
+      <Button variant="secondary" icon="plus" onClick={() => setOpen(true)}>
+        Add a step
+      </Button>
+      {open ? (
+        <StepPicker
+          onClose={() => setOpen(false)}
+          onPick={(kind) => {
+            setOpen(false);
+            onAdd(kind);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+```

package/registry/blocks/step-picker/block.json

@@ -0,0 +1,31 @@
+{
+  "name": "step-picker",
+  "title": "StepPicker",
+  "description": "The two ways to choose a step of an automation: StepPicker, the popover a + on a connector opens (a search box, the kinds grouped Your apps / Think / Flow / Data / Tell, one line on what each does and whether it is free, paid or coming), and PaletteBar, the strip along the bottom of a canvas (one icon per kind). Both only say which kind a person chose; where it goes is the editor's call.",
+  "useWhen": "A screen lets a person add a step to an automation: from a + on the canvas or the outline (flow-editor does it for you), or from a button of your own. Not a general command palette (use Command).",
+  "tags": [
+    "automation",
+    "workflow",
+    "step",
+    "picker",
+    "palette",
+    "add",
+    "node",
+    "search",
+    "kinds",
+    "trigger",
+    "n8n",
+    "make"
+  ],
+  "exports": [
+    "PaletteBar",
+    "StepPicker"
+  ],
+  "files": [
+    "index.js",
+    "step-picker.jsx"
+  ],
+  "requires": [
+    "automation-model"
+  ]
+}

package/registry/blocks/step-picker/demo.jsx

@@ -0,0 +1,23 @@
+"use client";
+
+// StepPicker and PaletteBar — the gallery's and the smoke test's surface.
+// Not installed into apps. Press a kind: the page says which.
+import { useState } from "react";
+import { PaletteBar, StepPicker } from "../components/blocks/step-picker";
+
+export default function StepPickerDemo() {
+  const [said, setSaid] = useState("Nothing chosen yet.");
+  return (
+    <div className="grid gap-6 p-4">
+      <p className="m-0 text-sm" role="status">
+        {said}
+      </p>
+      <div className="max-w-sm">
+        <StepPicker inline onClose={() => setSaid("Closed.")} onPick={(kind) => setSaid(`Chose ${kind}.`)} />
+      </div>
+      <div className="max-w-full">
+        <PaletteBar onAdd={(kind) => setSaid(`Added ${kind}.`)} />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/step-picker/index.js

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

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

@@ -0,0 +1,144 @@
+"use client";
+
+// Two ways to choose a step: the picker a + on a connector opens (search,
+// the kinds grouped, what each does), and the palette along the bottom of
+// a canvas (one icon per kind, grouped). Both read the catalog
+// (automation-model); both only say which kind a person chose. Where it
+// goes is the editor's call. Props in, callbacks out; tokens only.
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Input, cx } from "../../ui";
+import { Glyph, KINDS, isRunnable, paletteGroups } from "../automation-model";
+
+const matches = (k, q) => {
+  if (!q) return true;
+  const hay = `${k.name} ${k.blurb} ${k.kind}`.toLowerCase();
+  return q
+    .toLowerCase()
+    .split(/\s+/)
+    .every((w) => hay.includes(w));
+};
+
+/** How a kind is dressed: the agent solid in the app's accent, a model
+ *  call outlined in it, every other kind plain. */
+const TILE = {
+  plain: "border-border bg-card text-muted-foreground",
+  model: "border-primary/55 bg-card text-primary",
+  agent: "border-primary bg-primary/15 text-primary",
+};
+
+/**
+ *   onPick(kind)   a kind was chosen ("action", "condition", "llm" …)
+ *   onClose()      Escape, or a press outside
+ *   title          the dialog's name (default "Add a step")
+ *   inline         in the flow of a page (the outline), not floating
+ *   runnable       a Set of the kinds the platform runs; the rest say "soon"
+ *                  (default: automation-model's RUNNABLE)
+ *   className, style   the floating panel's place (the editor sets it)
+ */
+export function StepPicker({ onPick, onClose, title = "Add a step", inline = false, runnable, className, style }) {
+  const [q, setQ] = useState("");
+  const ref = useRef(null);
+  const groups = useMemo(
+    () =>
+      paletteGroups()
+        .map((g) => ({ ...g, kinds: g.kinds.filter((k) => matches(k, q)) }))
+        .filter((g) => g.kinds.length),
+    [q],
+  );
+
+  useEffect(() => {
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose?.();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose?.();
+      }
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      ref={ref}
+      role="dialog"
+      aria-label={title}
+      style={style}
+      onPointerDown={(e) => e.stopPropagation()}
+      className={cx(
+        "z-20 flex min-w-0 flex-col gap-2 rounded-lg border border-border bg-popover p-2 text-popover-foreground",
+        inline ? "w-full" : "absolute w-[330px] max-w-[calc(100%_-_1rem)] shadow-lg",
+        className,
+      )}
+    >
+      <Input type="search" placeholder="Search steps" aria-label="Search steps" value={q} autoFocus onChange={(e) => setQ(e.target.value)} />
+      <div data-scroll className={cx("grid min-w-0 gap-2 overflow-y-auto", inline ? "max-h-72" : "max-h-[320px]")}>
+        {groups.length === 0 ? <p className="m-0 p-2 text-sm text-muted-foreground">No step matches “{q}”.</p> : null}
+        {groups.map((g) => (
+          <section key={g.group} aria-label={g.label} className="grid gap-0.5">
+            <h4 className="m-0 px-2 pt-1 text-2xs font-semibold uppercase tracking-wide text-muted-foreground">{g.label}</h4>
+            {g.kinds.map((k) => (
+              <button
+                key={k.kind}
+                type="button"
+                onClick={() => onPick?.(k.kind)}
+                className="flex min-w-0 items-center gap-2.5 rounded-md border border-transparent px-2 py-1.5 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <span className={cx("inline-flex size-9 shrink-0 items-center justify-center rounded-lg border", TILE[k.tone] ?? TILE.plain)}>
+                  <Glyph name={k.glyph} size={18} />
+                </span>
+                <span className="grid min-w-0 flex-1 gap-0.5">
+                  <b className="text-[13px] font-semibold">{k.name}</b>
+                  <span className="text-xs leading-snug text-muted-foreground">{k.blurb}</span>
+                </span>
+                <span className="shrink-0 rounded-full border border-border px-1.5 text-2xs text-muted-foreground">{k.paid ? "paid" : !isRunnable(k.kind, runnable) ? "soon" : "free"}</span>
+              </button>
+            ))}
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The bar along the bottom of a canvas: every kind, one icon each, grouped.
+ *   onAdd(kind)   a kind was pressed
+ */
+export function PaletteBar({ onAdd, className }) {
+  const groups = paletteGroups();
+  return (
+    <div role="toolbar" aria-label="Add a step" className={cx("flex max-w-full items-end gap-3 overflow-x-auto rounded-xl border border-border bg-card p-1.5 text-card-foreground shadow-md", className)}>
+      {groups.map((g) => (
+        <div key={g.group} className="grid shrink-0 gap-1">
+          <span className="px-1 text-2xs font-semibold uppercase tracking-wide text-muted-foreground">{g.label}</span>
+          <div className="flex gap-0.5">
+            {g.kinds.map((k) => (
+              <button
+                key={k.kind}
+                type="button"
+                title={`${k.name}: ${k.blurb}`}
+                aria-label={`Add ${KINDS[k.kind].name}`}
+                onClick={() => onAdd?.(k.kind)}
+                className={cx(
+                  "relative inline-flex size-9 items-center justify-center rounded-lg border border-transparent hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  k.tone === "plain" ? "text-muted-foreground hover:text-foreground" : "text-primary",
+                )}
+              >
+                <Glyph name={k.glyph} size={16} />
+                {k.mark ? <em className="absolute -bottom-0.5 -right-0.5 rounded-full bg-primary px-1 text-2xs font-bold not-italic leading-none text-primary-foreground">{k.mark === "model" ? "AI" : "A"}</em> : null}
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}