makersclaw 0.8.0 → 0.8.1

package/registry/blocks/agent-pane/work.jsx

@@ -0,0 +1,368 @@
+"use client";
+
+import { Fragment, useEffect, useRef, useState } from "react";
+import { Button, Icon, Spinner, cx } from "../../ui";
+
+// The agent's work, as the desk's sidebar draws it (D27): the steps
+// between two things the agent said are ONE line, "Worked through 26
+// steps", or the step under way with a spinner; it opens to one line per
+// step — a mono tag, what happened in words, a status word — and a step
+// opens to its facts, the command or statement worth reading, what came
+// back and why it failed. Reads fold ("Read 6 files"), retries a later
+// call fixed fold ("Fixed 2 issues on the way"), the same line again is
+// one line with a count, helpers started side by side are a card.
+//
+// What the lines SAY and which lines there are is decided by the platform
+// (the rules the sidebar runs); this file only draws them, from the data
+// useAgentPane() hands over. A step's detail is asked for when it opens
+// (`load`), never carried with the line.
+
+const plural = (n, one, many) => (n === 1 ? `1 ${one}` : `${n} ${many}`);
+
+const STATUS_WORD = { failed: "didn’t work", interrupted: "stopped", denied: "not allowed" };
+
+/** Seconds since `running` went true; 0 while it is not. */
+function useElapsed(running) {
+  const start = useRef(null);
+  const [seconds, setSeconds] = useState(0);
+  useEffect(() => {
+    if (!running) return undefined;
+    start.current ??= Date.now();
+    const id = setInterval(() => setSeconds(Math.round((Date.now() - start.current) / 1000)), 1000);
+    return () => clearInterval(id);
+  }, [running]);
+  return running ? seconds : 0;
+}
+
+function Tag({ children }) {
+  return (
+    <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+      {children}
+    </span>
+  );
+}
+
+function Chevron({ open }) {
+  return <Icon name={open ? "chevron-down" : "chevron-right"} size={12} className="shrink-0 text-muted-foreground" />;
+}
+
+/** The row's button: tag, words, a word for how it ended, a chevron. */
+function Line({ tag, children, status, open, onToggle, running, elapsed, word, kind }) {
+  return (
+    <button
+      type="button"
+      aria-expanded={open}
+      data-status={status}
+      onClick={onToggle}
+      className={cx(
+        "flex w-full min-w-0 items-center gap-2 rounded-md px-1.5 py-1 text-left text-xs hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring",
+        status === "failed" || status === "denied" ? "text-destructive" : "text-muted-foreground",
+        kind === "fixed" && "text-success",
+      )}
+    >
+      <Tag>{tag}</Tag>
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {running && elapsed >= 3 ? <span className="shrink-0 tabular-nums">{elapsed}s</span> : null}
+      {running ? <Spinner size="sm" label="Working" className="shrink-0" /> : null}
+      {word ? <span className="shrink-0">{word}</span> : null}
+      <Chevron open={open} />
+    </button>
+  );
+}
+
+/* ---- one step, opened ------------------------------------------------ */
+
+function Pre({ children }) {
+  return (
+    <pre className="max-h-48 overflow-auto rounded-md bg-muted p-2 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words text-foreground">
+      {children}
+    </pre>
+  );
+}
+
+/** What a step opens to: asked for once, when it opens. */
+function Detail({ id, load, reason, status }) {
+  const [got, setGot] = useState(load ? { state: "loading" } : { state: "none" });
+  useEffect(() => {
+    if (!load) return undefined;
+    let alive = true;
+    Promise.resolve(load(id)).then(
+      (r) => {
+        if (alive) setGot(r?.ok && r.data?.call ? { state: "ok", call: r.data.call } : { state: "error" });
+      },
+      () => {
+        if (alive) setGot({ state: "error" });
+      },
+    );
+    return () => {
+      alive = false;
+    };
+  }, [id, load]);
+
+  const call = got.call;
+  const facts = call?.facts ?? [];
+  const empty = got.state === "ok" && !facts.length && !call.code && !call.result && !call.said && !reason;
+  return (
+    <div className="grid min-w-0 gap-2 rounded-md border border-border bg-card px-2.5 py-2 text-xs">
+      {status === "failed" && reason ? <p className="text-destructive">{reason}</p> : null}
+      {got.state === "loading" ? (
+        <p className="flex items-center gap-2 text-muted-foreground">
+          <Spinner size="sm" label="Loading" /> Opening this step…
+        </p>
+      ) : null}
+      {got.state === "error" ? <p className="text-muted-foreground">This step can’t be opened just now.</p> : null}
+      {got.state === "ok" && call.said ? (
+        <div className="grid gap-1">
+          <span className="text-[11px] text-muted-foreground">What it said</span>
+          <Pre>{call.said}</Pre>
+        </div>
+      ) : null}
+      {facts.length ? (
+        <dl className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1">
+          {facts.map((f, i) => (
+            <Fragment key={`${f.label}-${i}`}>
+              <dt className="text-muted-foreground">{f.label}</dt>
+              <dd className="min-w-0 break-words">{f.value}</dd>
+            </Fragment>
+          ))}
+        </dl>
+      ) : null}
+      {got.state === "ok" && call.code ? (
+        <div className="grid gap-1">
+          <span className="text-[11px] text-muted-foreground">{call.code.label}</span>
+          <Pre>{call.code.text}</Pre>
+        </div>
+      ) : null}
+      {got.state === "ok" && call.result ? (
+        <div className="grid gap-1">
+          <span className="text-[11px] text-muted-foreground">What came back</span>
+          <Pre>{call.result}</Pre>
+        </div>
+      ) : null}
+      {empty ? <p className="text-muted-foreground">{status === "running" ? "Still working on this." : "Nothing more to show."}</p> : null}
+    </div>
+  );
+}
+
+/* ---- the rows --------------------------------------------------------- */
+
+function CallRow({ call, live, load, onOpenRequest }) {
+  const [open, setOpen] = useState(false);
+  const running = call.status === "running" && live;
+  const elapsed = useElapsed(running);
+  return (
+    <div data-call={call.id} className="grid min-w-0 gap-1">
+      <Line
+        tag={call.tag}
+        status={call.status}
+        open={open}
+        onToggle={() => setOpen((o) => !o)}
+        running={running}
+        elapsed={elapsed}
+        word={call.saysFailure ? null : (STATUS_WORD[call.status] ?? null)}
+      >
+        {call.line}
+      </Line>
+      {call.status === "failed" && call.reason && !open ? <p className="pl-1.5 text-[11px] text-destructive">{call.reason}</p> : null}
+      {call.openRequest && onOpenRequest ? (
+        <div className="pl-1.5">
+          <Button size="sm" variant="secondary" onClick={() => onOpenRequest(call.openRequest)}>
+            Open in Makersclaw <Icon name="external" size={12} />
+          </Button>
+        </div>
+      ) : null}
+      {open ? <Detail id={call.id} load={load} reason={call.reason} status={call.status} /> : null}
+    </div>
+  );
+}
+
+function Sub({ children }) {
+  return <div className="ml-3 grid min-w-0 gap-0.5 border-l border-border pl-2">{children}</div>;
+}
+
+function ReadsRow({ row, live, load }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div data-reads={row.calls.length} className="grid min-w-0 gap-0.5">
+      <Line tag={row.tag} status={row.status} open={open} onToggle={() => setOpen((o) => !o)} running={row.status === "running" && live}>
+        {row.label}
+      </Line>
+      {open ? (
+        <Sub>
+          {row.calls.map((c) => (
+            <CallRow key={c.id} call={c} live={live} load={load} />
+          ))}
+        </Sub>
+      ) : null}
+    </div>
+  );
+}
+
+function RepeatRow({ row, live, load }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div data-repeat={row.count} className="grid min-w-0 gap-0.5">
+      <Line
+        tag={row.tag}
+        status={row.status}
+        open={open}
+        onToggle={() => setOpen((o) => !o)}
+        running={row.status === "running" && live}
+        word={row.saysFailure ? null : (STATUS_WORD[row.status] ?? null)}
+      >
+        {row.line} · {row.count} times
+      </Line>
+      {row.status === "failed" && row.reason && !open ? <p className="pl-1.5 text-[11px] text-destructive">{row.reason}</p> : null}
+      {open ? (
+        <Sub>
+          {row.calls.map((c) => (
+            <CallRow key={c.id} call={c} live={live} load={load} />
+          ))}
+        </Sub>
+      ) : null}
+    </div>
+  );
+}
+
+function FixedRow({ row }) {
+  const [open, setOpen] = useState(false);
+  const n = row.fixes.length;
+  return (
+    <div data-fixed={n} className="grid min-w-0 gap-0.5">
+      <Line tag="FIXED" kind="fixed" open={open} onToggle={() => setOpen((o) => !o)}>
+        {n === 1 ? "Fixed 1 issue on the way" : `Fixed ${n} issues on the way`}
+      </Line>
+      {open ? (
+        <ol className="ml-3 grid min-w-0 gap-1.5 border-l border-border pl-2 text-xs text-muted-foreground">
+          {row.fixes.map((f) => (
+            <li key={f.id} className="grid min-w-0 gap-0.5">
+              <span className="break-words">
+                {f.what}: <span className="text-destructive">{f.reason}</span>
+              </span>
+              <span className="break-words">→ {f.then}</span>
+            </li>
+          ))}
+        </ol>
+      ) : null}
+    </div>
+  );
+}
+
+const HELPER_WORD = { running: "Working", waiting: "Waiting for you", done: "Done", failed: "Didn’t finish", denied: "Not allowed", interrupted: "Stopped" };
+
+function HelperMark({ status }) {
+  if (status === "done") return <Icon name="circle-check" size={14} className="shrink-0 text-success" />;
+  if (status === "running") return <Spinner size="sm" label="Working" className="shrink-0 text-muted-foreground" />;
+  if (status === "failed" || status === "denied") return <Icon name="circle-x" size={14} className="shrink-0 text-destructive" />;
+  return <Icon name="circle" size={14} className="shrink-0 text-muted-foreground" />;
+}
+
+/** Helpers started side by side: a card, one row each; a row opens to its step. */
+function HelpersCard({ row, load }) {
+  const [open, setOpen] = useState(null);
+  return (
+    <div role="group" aria-label={`${row.calls.length} helpers`} data-helpers={row.calls.length} className="grid min-w-0 divide-y divide-border overflow-hidden rounded-lg border border-border bg-card">
+      {row.calls.map((c) => (
+        <div key={c.id} className="grid min-w-0">
+          <button
+            type="button"
+            aria-expanded={open === c.id}
+            data-state={c.status}
+            onClick={() => setOpen((o) => (o === c.id ? null : c.id))}
+            className="flex min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-xs hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring"
+          >
+            <HelperMark status={c.status} />
+            <span className="min-w-0 flex-1 truncate">{c.line}</span>
+            <span className="shrink-0 text-muted-foreground">{HELPER_WORD[c.status] ?? ""}</span>
+          </button>
+          {open === c.id ? (
+            <div className="px-2 pb-2">
+              <Detail id={c.id} load={load} reason={null} status={c.status} />
+            </div>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** The model's own reasoning is not carried: the line says it thought. */
+function ThoughtRow({ row }) {
+  return (
+    <div className="flex min-w-0 items-center gap-2 px-1.5 py-1 text-xs text-muted-foreground">
+      <Tag>THINK</Tag>
+      <span className="min-w-0 flex-1 truncate">{row.streaming ? "Thinking it through…" : "Thought it through"}</span>
+      {row.streaming ? <Spinner size="sm" label="Thinking" className="shrink-0" /> : null}
+    </div>
+  );
+}
+
+function Row({ row, live, load, onOpenRequest }) {
+  switch (row.kind) {
+    case "call":
+      return <CallRow call={row} live={live} load={load} onOpenRequest={onOpenRequest} />;
+    case "reads":
+      return <ReadsRow row={row} live={live} load={load} />;
+    case "repeat":
+      return <RepeatRow row={row} live={live} load={load} />;
+    case "fixed":
+      return <FixedRow row={row} />;
+    case "helpers":
+      return <HelpersCard row={row} load={load} />;
+    case "thought":
+      return <ThoughtRow row={row} />;
+    default:
+      return null;
+  }
+}
+
+/** A run of lines as one line, closed until opened; while a step runs the
+ *  line is that step with a spinner and the count so far. A failure
+ *  nothing fixed is counted on it, so a closed fold never hides it. */
+function Fold({ run, live, load, onOpenRequest }) {
+  const [open, setOpen] = useState(false);
+  const sum = run.summary;
+  const running = sum.running && live;
+  const stopped = !running && (sum.stopped || sum.running);
+  const label = running ? (sum.latest ?? "Working") : stopped ? `Stopped after ${plural(sum.steps, "step", "steps")}` : `Worked through ${plural(sum.steps, "step", "steps")}`;
+  return (
+    <div className="grid min-w-0 gap-1" data-open={open || undefined}>
+      <button
+        type="button"
+        aria-expanded={open}
+        data-status={running ? "running" : stopped ? "interrupted" : "done"}
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full min-w-0 items-center gap-2 rounded-md border border-border px-2.5 py-1.5 text-left text-xs text-muted-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring"
+      >
+        {running ? <Spinner size="sm" label="Working" className="shrink-0" /> : null}
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+        {running ? <span className="shrink-0">{plural(sum.steps, "step", "steps")}</span> : null}
+        {sum.failed > 0 ? <span className="shrink-0 text-destructive">{sum.failed} didn’t work</span> : null}
+        <Chevron open={open} />
+      </button>
+      {open ? (
+        <div className="grid min-w-0 gap-0.5 pl-1">
+          {run.rows.map((row) => (
+            <Row key={row.id} row={row} live={live} load={load} onOpenRequest={onOpenRequest} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/** The work between two things the agent said: folded into one line, with
+ *  a helpers card and a lone line standing as they are. */
+export function WorkBlock({ runs, live, load, onOpenRequest }) {
+  return (
+    <div className="grid min-w-0 gap-1.5">
+      {runs.map((run) =>
+        run.kind === "fold" ? (
+          <Fold key={run.id} run={run} live={live} load={load} onOpenRequest={onOpenRequest} />
+        ) : (
+          <Row key={run.row.id} row={run.row} live={live} load={load} onOpenRequest={onOpenRequest} />
+        ),
+      )}
+    </div>
+  );
+}

package/registry/blocks/ai-action/README.md

@@ -0,0 +1,94 @@
+# AiAction
+
+One model call on what the screen already holds: **Summarize**,
+**Shorter**, **Explain this score**, **Why did it move**.
+
+- The price is on the button **before** the press, drawn by the `cost`
+  block's `CostTag`: "Shorter · about 1 cr" (the most it can use is in
+  its tooltip).
+- While it runs, the button spins and the line says "One call to the
+  model…".
+- The answer appears in place, with **Use**, **Copy** and **Again**.
+- When the platform refuses, its own words show ("The app's weekly
+  allowance is used up."), with Try again.
+- On a claw without the door, a quiet "Shorter is not connected yet".
+
+One call is not the agent. It has no tools and no conversation, so it
+wears the dashed one-call mark (`CallMark` from `agent-marks`), never the
+agent's diamond.
+
+```jsx
+import { AiAction } from "../components/blocks/ai-action";   // a Makersclaw app ("./blocks/ai-action" from components/)
+import { AiAction } from "@/components/makersclaw/blocks/ai-action";   // a shadcn project
+```
+
+A client component. It requires `agent-marks` (laid with it).
+
+## Which hook feeds it
+
+```js
+const shorter = useLlmAction({ input: draft, system: "Make it shorter. Keep every fact." });   // lib/hooks.js
+// → { estimate: { credits, credits_max } | null, estimating, run(), result, loading, error, unavailable, reset() }
+```
+
+`useLlmAction` prices the call once per distinct input (`POST _claw/llm`
+with `estimate: true`: checked, never sent to a model, never charged),
+and `run()` makes it. `result` is the answer: `{ text }`, or `{ data }`
+with a `schema`.
+
+## Props
+
+- `label` — the verb, in the app's words ("Shorter", "Explain this
+  score").
+- `action` — what `useLlmAction()` returns. Required.
+- `icon` — a kit `Icon` name for the button. Default the one-call mark.
+- `render(result)` — draws the answer your way: a schema's `data` as a
+  list, a score's reasons. Default the text as written (a `data` without
+  `render` shows as plain JSON).
+- `onUse(result)` — puts the answer to work: replace the draft, fill the
+  field. Without it there is no Use. After a Use the button says "Used".
+- `useLabel` — default "Use" ("Replace the draft").
+- `title` — the answer's head. Default the label.
+- `className` — layout around it. Never colour.
+
+`priceWords({ credits, credits_max })` is exported for a screen reader
+and for callers: "1 cr", "1–3 cr".
+
+## Who may do what
+
+Any member who can open the app. The door holds the caps: the workspace's
+wallet, the member's monthly cap, the app's weekly allowance, 30 calls a
+minute. A refusal is shown in its own words; never retry it in a loop.
+
+## Never
+
+- **Never press without the price.** The button says it before the
+  press; while it is being priced the button waits.
+- Never write the answer into a record by itself: Use is the member's
+  press, and `onUse` does the write.
+- Never use it for work that needs tools (reading records, searching the
+  web, sending): that is an ask to the agent.
+- Never draw the agent's diamond on it.
+
+## Example
+
+A draft with Shorter beside it.
+
+```jsx
+"use client";
+import { useState } from "react";
+import { Textarea } from "../components/ui";
+import { useLlmAction } from "../lib/hooks";
+import { AiAction } from "../components/blocks/ai-action";
+
+export default function Draft({ initial }) {
+  const [draft, setDraft] = useState(initial);
+  const shorter = useLlmAction({ input: draft, system: "Make it shorter. Keep every fact and the writer's voice." });
+  return (
+    <div className="grid gap-3">
+      <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} autoGrow />
+      <AiAction label="Shorter" action={shorter} useLabel="Replace the draft" onUse={(r) => setDraft(r.text)} />
+    </div>
+  );
+}
+```

package/registry/blocks/ai-action/ai-action.jsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Button, Icon, IconButton, Spinner, cx } from "../../ui";
+import { CallMark } from "../agent-marks";
+import { CostTag, creditsWords } from "../cost";
+
+// AiAction — one model call on what the screen holds (the app kit, D15):
+// Summarize, Shorter, Explain this score, Why did it move. Its price is on
+// the button before the press ("Shorter · 1 cr"), the answer appears in
+// place with Use, Copy and Again, a refusal says its words, and a claw
+// without the door is a quiet "not connected yet".
+//
+//   const shorter = useLlmAction({ input: draft, system: "Make it shorter. Keep the facts." });
+//   <AiAction label="Shorter" action={shorter} onUse={(r) => setDraft(r.text)} />
+//
+// It draws what useLlmAction() returns (lib/hooks.js). One call is the
+// dashed CallMark, never the agent's diamond: no tools, no conversation.
+
+/** The price as words, for a screen reader and for callers: "1 cr", "1–3 cr".
+ *  What shows on the button is the cost block's CostTag. */
+export function priceWords(estimate) {
+  if (!estimate) return null;
+  const low = creditsWords(Number(estimate.credits));
+  if (low == null) return null;
+  const high = creditsWords(Number(estimate.credits_max));
+  return high && high !== low && Number(estimate.credits_max) > Number(estimate.credits) ? `${low}–${high} cr` : `${low} cr`;
+}
+
+/** The answer's words, when it has words: a string, { text }, or { ok, text }. */
+function textOf(result) {
+  if (result == null) return null;
+  if (typeof result === "string") return result;
+  if (typeof result.text === "string") return result.text;
+  return null;
+}
+
+/** Its data, when it came back shaped (a schema): { data } or an object. */
+function dataOf(result) {
+  if (result == null || typeof result === "string") return undefined;
+  if ("data" in result) return result.data;
+  return typeof result.text === "string" ? undefined : result;
+}
+
+/**
+ *   label       the verb ("Shorter", "Explain this score")
+ *   icon        a kit Icon name for the button; default the call's mark
+ *   action      what useLlmAction() returns: { estimate, estimating,
+ *               run(), result, loading, error, unavailable, reset() }
+ *   render(result)  draws the answer your way (a schema's data); default
+ *               the text as written
+ *   onUse(result)   puts the answer to work (replace the draft); without
+ *               it there is no Use
+ *   useLabel    default "Use"
+ *   title       the answer's head (default the label)
+ *   className   layout around it. Never colour.
+ */
+export function AiAction({ label, icon, action, render, onUse, useLabel = "Use", title, className }) {
+  const [copied, setCopied] = useState(false);
+  const [used, setUsed] = useState(false);
+  const timer = useRef(null);
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const a = action ?? {};
+  const price = priceWords(a.estimate);
+  const result = a.result;
+  const text = textOf(result);
+  const data = dataOf(result);
+  const has = result != null && (text != null ? text.trim() !== "" : data !== undefined);
+  const busy = Boolean(a.loading);
+
+  if (a.unavailable) {
+    return (
+      <p className={cx("inline-flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", className)}>
+        <CallMark />
+        <span className="min-w-0 break-words">{label} is not connected yet.</span>
+      </p>
+    );
+  }
+
+  const press = () => {
+    if (busy || !a.run) return;
+    setUsed(false);
+    a.run();
+  };
+
+  async function copy() {
+    if (text == null) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 1600);
+    } catch {
+      setCopied(false);
+    }
+  }
+
+  return (
+    <div className={cx("@container grid grid-cols-1 min-w-0 gap-2 text-sm", className)}>
+      <Button
+        size="sm"
+        variant="secondary"
+        className="max-w-full justify-self-start"
+        loading={busy}
+        disabled={busy || a.estimating || !a.run}
+        onClick={press}
+        aria-label={price ? `${label}, ${price === "1 cr" ? "1 credit" : price.replace(" cr", " credits")}` : undefined}
+      >
+        {icon ? <Icon name={icon} size={14} /> : <CallMark />}
+        <span className="min-w-0 truncate">{label}</span>
+        {price || a.estimating ? (
+          <>
+            <span aria-hidden="true">·</span>
+            <CostTag credits={Number(a.estimate?.credits)} max={Number(a.estimate?.credits_max)} loading={!price} icon={false} />
+          </>
+        ) : null}
+      </Button>
+
+      {busy ? (
+        <p role="status" className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Spinner size="sm" label="Asking" /> One call to the model…
+        </p>
+      ) : null}
+
+      {a.error && !busy ? (
+        <div role="alert" className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-destructive">
+          <Icon name="warning" size={14} className="shrink-0" />
+          <span className="min-w-0 break-words">{a.error}</span>
+          {a.run ? (
+            <Button variant="link" size="inherit" onClick={press}>
+              Try again
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+
+      {has && !busy ? (
+        <section aria-label={`${title ?? label}: the answer`} className="grid grid-cols-1 min-w-0 gap-2 rounded-[var(--radius)] border border-dashed border-border bg-card p-3 text-card-foreground">
+          <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+            <CallMark>{title ?? label}</CallMark>
+            <span className="shrink-0">· 1 call</span>
+            {a.reset ? <IconButton icon="x" size="sm" label="Put it away" className="ml-auto -my-1" onClick={a.reset} /> : null}
+          </div>
+          <div className="min-w-0 break-words">
+            {render ? render(result) : text != null ? <p className="whitespace-pre-wrap">{text}</p> : <pre className="overflow-x-auto whitespace-pre-wrap text-xs">{JSON.stringify(data, null, 2)}</pre>}
+          </div>
+          <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+            {onUse ? (
+              used ? (
+                <span className="inline-flex items-center gap-1 text-xs font-medium text-success">
+                  <Icon name="check" size={14} /> Used
+                </span>
+              ) : (
+                <Button
+                  size="sm"
+                  variant="primary"
+                  onClick={() => {
+                    onUse(result);
+                    setUsed(true);
+                  }}
+                >
+                  {useLabel}
+                </Button>
+              )
+            ) : null}
+            {text != null ? (
+              <Button size="sm" variant="quiet" onClick={copy}>
+                <Icon name={copied ? "check" : "copy"} size={14} /> {copied ? "Copied" : "Copy"}
+              </Button>
+            ) : null}
+            {a.run ? (
+              <Button size="sm" variant="quiet" onClick={press}>
+                <Icon name="refresh" size={14} /> Again
+                {price ? (
+                  <>
+                    <span aria-hidden="true">·</span>
+                    <CostTag credits={Number(a.estimate?.credits)} max={Number(a.estimate?.credits_max)} icon={false} />
+                  </>
+                ) : null}
+              </Button>
+            ) : null}
+          </div>
+        </section>
+      ) : null}
+    </div>
+  );
+}

package/registry/blocks/ai-action/block.json

@@ -0,0 +1,34 @@
+{
+  "name": "ai-action",
+  "title": "AiAction",
+  "description": "One model call on what the screen holds — Summarize, Shorter, Explain this score, Why did it move — with its price on the button before the press (\"Shorter · 1 cr\"), a running state, the answer in place (its text, or your render of a schema's data) with Use, Copy and Again, the refusal's own words when it fails, and a quiet \"not connected yet\" on a claw without the door. It draws what useLlmAction() returns (lib/hooks.js) and wears the dashed one-call mark, never the agent's diamond.",
+  "useWhen": "A screen wants a quick model answer about something it already shows, with no conversation and no tools: shorten a draft, summarize a thread, explain a score, say why a number moved, suggest a subject line. For work that reads, searches or writes records, ask the agent (ask-bar, agent-chat).",
+  "tags": [
+    "ai",
+    "llm",
+    "model",
+    "summarize",
+    "shorter",
+    "rewrite",
+    "explain",
+    "why",
+    "draft",
+    "one call",
+    "price",
+    "credits",
+    "generate",
+    "magic button"
+  ],
+  "exports": [
+    "AiAction",
+    "priceWords"
+  ],
+  "files": [
+    "index.js",
+    "ai-action.jsx"
+  ],
+  "requires": [
+    "agent-marks",
+    "cost"
+  ]
+}