makersclaw 0.8.0 → 0.8.1

package/registry/blocks/agent-chat/agent-chat.jsx

@@ -0,0 +1,415 @@
+"use client";
+
+import { Fragment, useEffect, useRef, useState } from "react";
+import { Button, Icon, IconButton, Notice, Spinner, Textarea, cx } from "../../ui";
+import { QuestionBox } from "../needs-you";
+
+// AgentChat — the app's own chat with its agent, in the app's look (0.8.1,
+// the workspace's docs/APP-AGENT-BLOCKS-PLAN.md phase 1). It draws the
+// object `useAgentThread()` returns (lib/hooks.js): the member's words,
+// the agent's answer as it is written, one line per step, and where the
+// thread stands. It is the SAME conversation the desk's agent column
+// shows — one session, two views — so an app that places it says so in
+// its package (`"agent_in_app": true` in the blueprint), and the desk then
+// keeps its column folded for the app.
+//
+//   const chat = useAgentThread({ row: { kind: "person", id, name } });
+//   <AgentChat chat={chat} title={`Ask about ${name}`} suggestions={[…]} />
+//
+// What waits on the member is settled in the chat, where it was asked
+// (0.8.1, D18/D19): the agent's QUESTION is answered in place (its options,
+// and the member's own words where it welcomes them: `chat.answer`), and
+// its YES is the `approval` block's press frame, handed in as `yes`. The
+// chat never draws an Approve of its own — the press is Makersclaw's, in
+// a frame app code cannot script. Without `yes`, or for a need the app
+// cannot settle (connecting an account, spending money, several questions
+// at once), the bar says so and opens the desk: "Waiting for your yes on
+// the desk".
+
+const STATE_LINE = {
+  queued: "Queued — it starts when the one before it ends",
+  working: "Working on it",
+};
+
+/** What waits on the member, as the bar under the thread says it. */
+function needsTitle(kind, inApp) {
+  if (kind === "yes" || kind === "approval") return inApp === "press" ? "Waiting for your yes" : "Waiting for your yes on the desk";
+  if (kind === "question") return inApp === "answer" ? "A question for you" : "Waiting for your answer on the desk";
+  if (kind === "connect") return "Waiting for you to connect an account on the desk";
+  if (kind === "limit") return "Paused for credits — see the desk";
+  return "Needs you on the desk";
+}
+
+// ---------------------------------------------------------------------------
+// The agent's text: plain words with the little markdown agents write —
+// paragraphs, lists, **bold**, `code`, [links](https://…). React nodes
+// only, never HTML.
+
+const INLINE = /(\*\*[^*]+\*\*|`[^`]+`|\[[^\]]+\]\((?:https?:\/\/)[^)\s]+\))/g;
+
+function inline(text, key) {
+  const out = [];
+  let last = 0;
+  let i = 0;
+  for (const m of String(text).matchAll(INLINE)) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    const tok = m[0];
+    const k = `${key}-${i++}`;
+    if (tok.startsWith("**")) out.push(<strong key={k}>{tok.slice(2, -2)}</strong>);
+    else if (tok.startsWith("`")) out.push(<code key={k} className="rounded bg-muted px-1 font-mono text-[0.92em]">{tok.slice(1, -1)}</code>);
+    else {
+      const label = tok.slice(1, tok.indexOf("]("));
+      const href = tok.slice(tok.indexOf("](") + 2, -1);
+      out.push(
+        <a key={k} href={href} target="_blank" rel="noopener noreferrer" className="break-all text-primary underline underline-offset-2">
+          {label}
+        </a>,
+      );
+    }
+    last = m.index + tok.length;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+const LIST_ITEM = /^\s*(?:[-*•]|\d+[.)])\s+/;
+
+/** Paragraphs and lists from the agent's text. */
+function Prose({ text, className }) {
+  const blocks = String(text ?? "").replace(/\r/g, "").split(/\n{2,}/);
+  return (
+    <div className={cx("grid min-w-0 gap-2 break-words", className)}>
+      {blocks.map((block, b) => {
+        const lines = block.split("\n").filter((l) => l.trim());
+        if (!lines.length) return null;
+        if (lines.every((l) => LIST_ITEM.test(l))) {
+          const ordered = /^\s*\d/.test(lines[0]);
+          const List = ordered ? "ol" : "ul";
+          return (
+            <List key={b} className={cx("grid gap-1 pl-5", ordered ? "list-decimal" : "list-disc")}>
+              {lines.map((l, j) => (
+                <li key={j}>{inline(l.replace(LIST_ITEM, ""), `${b}-${j}`)}</li>
+              ))}
+            </List>
+          );
+        }
+        return (
+          <p key={b} className="whitespace-pre-wrap">
+            {lines.map((l, j) => (
+              <Fragment key={j}>
+                {j > 0 ? "\n" : null}
+                {/^#{1,6}\s/.test(l) ? <strong>{inline(l.replace(/^#{1,6}\s+/, ""), `${b}-${j}`)}</strong> : inline(l, `${b}-${j}`)}
+              </Fragment>
+            ))}
+          </p>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+function StepMark({ status }) {
+  if (status === "done") return <Icon name="check" size={14} className="shrink-0 text-success" />;
+  if (status === "failed") return <Icon name="warning" size={14} className="shrink-0 text-destructive" />;
+  return <Spinner size="sm" label="Working" className="shrink-0 text-muted-foreground" />;
+}
+
+/** A run of steps: the one running now while the turn works, else one
+ *  line that opens to the list. */
+function Steps({ steps, live }) {
+  const [open, setOpen] = useState(false);
+  const running = live ? steps.filter((s) => s.status === "running").at(-1) : null;
+  const count = `${steps.length} ${steps.length === 1 ? "step" : "steps"}`;
+  if (running) {
+    return (
+      <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+        <StepMark status="running" />
+        <span className="min-w-0 truncate">{running.label}</span>
+        {steps.length > 1 ? <span className="shrink-0">· {count}</span> : null}
+      </div>
+    );
+  }
+  return (
+    <div className="min-w-0 text-xs text-muted-foreground">
+      <button
+        type="button"
+        className="flex min-w-0 items-center gap-1.5 rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <Icon name={open ? "chevron-down" : "chevron-right"} size={14} className="shrink-0" />
+        <span className="truncate">Worked through {count}</span>
+      </button>
+      {open ? (
+        <ul className="mt-1.5 grid gap-1 pl-5">
+          {steps.map((s, i) => (
+            <li key={i} className="flex min-w-0 items-center gap-2">
+              <StepMark status={s.status} />
+              <span className="min-w-0 truncate">{s.label}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+function MemberWords({ children }) {
+  return (
+    <div className="ml-auto max-w-[85%] min-w-0 whitespace-pre-wrap break-words rounded-[var(--radius)] bg-muted px-2.5 py-1.5">
+      {children}
+    </div>
+  );
+}
+
+/** One turn: the member's words, then the agent's text and steps in the
+ *  order they came, steps that follow each other folded into one line. */
+function Turn({ turn, last }) {
+  const live = last && turn.status === "working";
+  const groups = [];
+  for (const part of turn.parts ?? []) {
+    const prev = groups[groups.length - 1];
+    if (part.type === "step") {
+      if (prev?.type === "steps") prev.steps.push(part);
+      else groups.push({ type: "steps", steps: [part] });
+    } else if (part.text?.trim()) groups.push(part);
+  }
+  return (
+    <div className="grid min-w-0 gap-2">
+      {turn.member ? <MemberWords>{turn.member}</MemberWords> : null}
+      {groups.map((g, i) =>
+        g.type === "steps" ? (
+          <Steps key={i} steps={g.steps} live={live && i === groups.length - 1 && !turn.writing} />
+        ) : (
+          <Prose key={i} text={g.text} />
+        ),
+      )}
+      {turn.writing ? (
+        <Prose text={`${turn.writing}▍`} />
+      ) : live && !groups.length ? (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Spinner size="sm" label="Working" /> Thinking…
+        </div>
+      ) : null}
+      {turn.status === "stopped" ? <p className="text-xs text-muted-foreground">Stopped.</p> : null}
+      {turn.status === "failed" ? <p className="text-xs text-destructive">It didn't finish. Ask again, or open it on the desk.</p> : null}
+    </div>
+  );
+}
+
+/**
+ *   chat         what useAgentThread() returns (required)
+ *   title        the head's words ("Ask about Pinewood"); default "Ask the agent"
+ *   suggestions  asks that fit the moment, shown before the first ask
+ *   empty        one line before the first ask
+ *   placeholder  the box's words
+ *   yes          a node drawn in the needs slot when the agent waits on a
+ *                yes the app can take (`chat.needs.in_app === "press"`):
+ *                the `approval` block, fed by useApproval(chat.request.id)
+ *                (D18). Without it that yes opens the desk
+ *   onClose      a close in the head (a panel beside a record)
+ *   bare         no head (inside a Sheet or a Card that has its own)
+ *   fill         take the height of its container (default). false: a
+ *                compact chat whose thread scrolls inside a capped height,
+ *                for a card in a column
+ *   className    layout around it. Never colour.
+ */
+export function AgentChat({
+  chat,
+  title = "Ask the agent",
+  suggestions = [],
+  empty,
+  placeholder,
+  yes,
+  onClose,
+  bare = false,
+  fill = true,
+  className,
+}) {
+  const [text, setText] = useState("");
+  const listRef = useRef(null);
+  const turns = chat?.turns ?? [];
+  const pending = chat?.pending && !turns.some((t) => t.member === chat.pending) ? chat.pending : null;
+  const lastTurn = turns[turns.length - 1];
+  const writing = lastTurn?.writing ?? "";
+  const needs = chat?.state === "needs_you" ? (chat.needs ?? { kind: "other", text: "" }) : null;
+  const live = chat?.state === "working" || chat?.state === "queued" || Boolean(pending);
+  const started = turns.length > 0 || Boolean(pending);
+  const inMakersclaw = chat?.place === "makersclaw";
+
+  // The newest words stay in view while the agent writes.
+  useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [turns.length, writing, pending, lastTurn?.parts?.length, chat?.state]);
+
+  const send = (words) => {
+    const t = String(words ?? text).trim();
+    if (!t || !chat?.send) return;
+    setText("");
+    chat.send(t);
+  };
+  const answerHere = needs?.in_app === "answer" && typeof chat?.answer === "function";
+  const pressHere = needs?.in_app === "press" && yes != null && yes !== false;
+  const blocked = Boolean(needs) || inMakersclaw;
+
+  return (
+    <div className={cx("flex min-w-0 flex-col bg-background text-sm", fill && "h-full min-h-0", className)}>
+      {!bare ? (
+        <div className="flex h-10 shrink-0 items-center gap-2 border-b border-border pl-3.5 pr-2 font-semibold">
+          <Icon name="sparkles" size={16} className="shrink-0 text-primary" />
+          <span className="min-w-0 flex-1 truncate">{title}</span>
+          {started && chat?.newChat ? <IconButton icon="plus" size="sm" label="New chat" onClick={chat.newChat} /> : null}
+          {onClose ? <IconButton icon="x" size="sm" label="Close" onClick={onClose} /> : null}
+        </div>
+      ) : null}
+
+      <div
+        ref={listRef}
+        role="log"
+        aria-live="polite"
+        aria-label={title}
+        className={cx(
+          "grid min-w-0 content-start gap-3 overflow-y-auto overscroll-contain p-3.5",
+          fill ? "min-h-0 flex-1" : started ? "max-h-96" : "",
+        )}
+      >
+        {inMakersclaw ? (
+          <Notice
+            tone="info"
+            title="This ask is in Makersclaw"
+            action={
+              <Button size="sm" variant="secondary" onClick={() => chat.openOnDesk?.()}>
+                Open <Icon name="external" size={12} />
+              </Button>
+            }
+          >
+            {chat.request?.title ?? "It is followed there."}
+          </Notice>
+        ) : (
+          <>
+            {turns.map((t, i) => (
+              <Turn key={t.id ?? i} turn={t} last={i === turns.length - 1 && !pending} />
+            ))}
+            {pending ? (
+              <div className="grid min-w-0 gap-2">
+                <MemberWords>{pending}</MemberWords>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Spinner size="sm" label="Starting" /> Starting…
+                </div>
+              </div>
+            ) : null}
+          </>
+        )}
+        {!started && !inMakersclaw ? (
+          <>
+            {empty ? <p className="text-muted-foreground">{empty}</p> : null}
+            {chat?.loading ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Spinner size="sm" label="Loading" /> Opening the chat…
+              </div>
+            ) : null}
+            {suggestions.length ? (
+              <div className="flex min-w-0 flex-wrap gap-1.5">
+                {suggestions.map((s) => (
+                  <button
+                    key={s}
+                    type="button"
+                    onClick={() => send(s)}
+                    className="flex max-w-full min-w-0 items-start gap-1.5 rounded-[var(--radius)] border border-border px-2.5 py-1 text-left text-xs hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring"
+                  >
+                    <Icon name="sparkles" size={12} className="mt-0.5 shrink-0 text-muted-foreground" />
+                    <span className="min-w-0 break-words">{s}</span>
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+
+      {needs && pressHere ? (
+        <div className="max-h-[70%] shrink-0 overflow-y-auto border-t border-border p-2.5">{yes}</div>
+      ) : needs ? (
+        <div className="shrink-0 border-t border-border p-2.5">
+          <div className="grid min-w-0 gap-2 rounded-[var(--radius)] border border-warning p-2.5">
+            <div className="flex min-w-0 items-start gap-2">
+              <Icon name="warning" size={16} className="mt-px shrink-0 text-warning" />
+              <div className="grid min-w-0 gap-0.5">
+                <span className="font-medium">{needsTitle(needs.kind, answerHere ? "answer" : needs.in_app)}</span>
+                {needs.text ? <span className={cx("break-words text-muted-foreground", !answerHere && "line-clamp-3")}>{needs.text}</span> : null}
+              </div>
+            </div>
+            {answerHere ? (
+              <QuestionBox options={needs.options ?? []} free={needs.free} onAnswer={(payload) => chat.answer(payload)} />
+            ) : (
+              <Button size="sm" variant="primary" className="justify-self-start" onClick={() => chat.openOnDesk?.()}>
+                Open on the desk <Icon name="external" size={12} />
+              </Button>
+            )}
+          </div>
+        </div>
+      ) : live && !inMakersclaw ? (
+        <div className="flex shrink-0 items-center gap-2 border-t border-border px-3.5 py-1.5 text-xs text-muted-foreground">
+          <Spinner size="sm" label="Working" />
+          <span className="min-w-0 flex-1 truncate">{STATE_LINE[chat?.state] ?? STATE_LINE.working}</span>
+          {chat?.request?.id && chat?.stop ? (
+            <Button size="sm" variant="quiet" onClick={() => chat.stop()}>
+              <Icon name="stop" size={12} /> Stop
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+      {chat?.error ? <p className="shrink-0 px-3.5 pt-2 text-xs text-destructive">{chat.error}</p> : null}
+      {chat?.unavailable ? (
+        <p className="shrink-0 px-3.5 pt-2 text-xs text-muted-foreground">
+          This chat needs a newer Makersclaw.{" "}
+          {chat.request ? (
+            <Button variant="link" size="inherit" onClick={() => chat.openOnDesk?.()}>
+              Open it on the desk
+            </Button>
+          ) : null}
+        </p>
+      ) : null}
+
+      <form
+        className="flex shrink-0 items-end gap-2 border-t border-border px-3 py-2.5"
+        onSubmit={(e) => {
+          e.preventDefault();
+          send();
+        }}
+      >
+        <Textarea
+          aria-label={title}
+          autoGrow
+          minRows={1}
+          maxRows={6}
+          placeholder={
+            blocked
+              ? needs
+                ? answerHere
+                  ? "Answer above first"
+                  : pressHere
+                    ? "Say yes above first"
+                    : "Answer on the desk first"
+                : "This ask is in Makersclaw"
+              : (placeholder ?? "Ask anything…")
+          }
+          value={text}
+          disabled={blocked}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+              e.preventDefault();
+              send();
+            }
+          }}
+          className="min-w-0 flex-1"
+        />
+        <IconButton icon="arrow-up" label="Send" variant="primary" size="sm" type="submit" disabled={blocked || !text.trim() || chat?.sending} />
+      </form>
+    </div>
+  );
+}

package/registry/blocks/agent-chat/block.json

@@ -0,0 +1,30 @@
+{
+  "name": "agent-chat",
+  "title": "AgentChat",
+  "description": "The app's own chat with its agent, in the app's look: the member's words, the agent's answer as it is written, one line per step (\"Worked through 6 steps\"), Stop while it works, and what waits on the member settled in place — the agent's question is answered in the chat (its options, and the member's own words where it welcomes them), and its yes is the `approval` block's press frame, handed in as `yes`; a need the app cannot settle (connecting an account, spending money) says so and links to the desk. It draws what useAgentThread() returns (lib/hooks.js): the same conversation the desk's agent column shows, one session, two views. Optional row makes it a chat about one record. fill=false for a compact card in a column.",
+  "useWhen": "The app should hold its conversation with its agent: an Ask panel beside a record, an ask box on a home screen, a sheet behind an Ask button. Place it and set \"agent_in_app\": true in the package's blueprint, so the desk keeps its agent column folded for the app. For work the founder commissions from a verb and watches land, use job-panel.",
+  "tags": [
+    "chat",
+    "ask",
+    "assistant",
+    "conversation",
+    "thread",
+    "messages",
+    "ai",
+    "copilot",
+    "stop",
+    "needs-you",
+    "inspector",
+    "record"
+  ],
+  "exports": [
+    "AgentChat"
+  ],
+  "files": [
+    "index.js",
+    "agent-chat.jsx"
+  ],
+  "requires": [
+    "needs-you"
+  ]
+}

package/registry/blocks/agent-chat/demo.jsx

@@ -0,0 +1,165 @@
+"use client";
+
+// AgentChat driven by a pretend thread — the gallery's and the smoke
+// test's surface. Not installed into apps. A send answers with two steps
+// and a reply written a few words at a time; "send them" stops for a yes,
+// pressed in the approval card above the box; "which list" stops for a
+// question, answered in the chat's bar (0.8.1, D18/D19). The same chat as
+// a compact card sits beside it.
+import { useEffect, useRef, useState } from "react";
+import { Card } from "../components/ui";
+import { AgentChat } from "../components/blocks/agent-chat";
+import { Approval } from "../components/blocks/approval";
+
+// A stand-in for the Makersclaw press frame (a page in another origin in
+// an app): inline styles and the browser's colour names only.
+const FRAME = (scheme) =>
+  `<!doctype html><meta charset="utf-8"><meta name="color-scheme" content="${scheme}">` +
+  `<body style="margin:0;font:14px/1.45 system-ui,sans-serif"><main style="border:1px solid GrayText;border-radius:10px;padding:12px 14px;display:grid;gap:8px">` +
+  `<b>Send 12 follow-ups from ada@acme.com to the investors on the list?</b>` +
+  `<span style="display:flex;gap:8px;justify-content:flex-end"><button style="font:inherit;padding:8px 14px;border-radius:8px;border:1px solid GrayText;background:transparent;color:inherit">Not now</button>` +
+  `<button style="font:inherit;font-weight:600;padding:8px 14px;border-radius:8px;border:0;background:Highlight;color:HighlightText">Send 12</button></span></main>`;
+
+function usePretendThread() {
+  const [turns, setTurns] = useState([]);
+  const [state, setState] = useState(null);
+  const [needs, setNeeds] = useState(null);
+  const timers = useRef([]);
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+  const later = (ms, fn) => timers.current.push(setTimeout(fn, ms));
+  const patchLast = (fn) => setTurns((ts) => ts.map((t, i) => (i === ts.length - 1 ? fn(t) : t)));
+
+  const send = (text) => {
+    const id = `t${Date.now()}`;
+    setState("working");
+    setNeeds(null);
+    setTurns((ts) => [...ts, { id, member: text, parts: [], writing: "", status: "working" }]);
+    later(400, () => patchLast((t) => ({ ...t, parts: [{ type: "step", label: "Reading the people", status: "running" }] })));
+    later(1100, () =>
+      patchLast((t) => ({
+        ...t,
+        parts: [
+          { type: "step", label: "Reading the people", status: "done" },
+          { type: "step", label: "Searching the web", status: "running" },
+        ],
+      })),
+    );
+    if (/send/i.test(text)) {
+      later(1900, () => {
+        patchLast((t) => ({ ...t, parts: t.parts.map((p) => ({ ...p, status: "done" })), status: "waiting" }));
+        setState("needs_you");
+        setNeeds({ kind: "yes", in_app: "press", text: "Send 12 follow-ups from ada@acme.com to the investors on the list?" });
+      });
+      return;
+    }
+    if (/which|list/i.test(text)) {
+      later(1900, () => {
+        patchLast((t) => ({ ...t, parts: t.parts.map((p) => ({ ...p, status: "done" })), status: "waiting" }));
+        setState("needs_you");
+        setNeeds({
+          kind: "question",
+          in_app: "answer",
+          text: "Which list should I start with?",
+          options: [
+            { id: "warm", label: "Warm leads" },
+            { id: "cold", label: "Cold" },
+          ],
+          free: true,
+        });
+      });
+      return;
+    }
+    const reply = "I found **12 investors** who back seed-stage fintech:\n\n- Pennant Capital — met in March\n- Harbor Seed — warm intro from Ana\n- Lowline Ventures\n\nWant me to draft a first note to each?";
+    const words = reply.split(" ");
+    words.forEach((_, i) =>
+      later(1800 + i * 60, () => patchLast((t) => ({ ...t, writing: words.slice(0, i + 1).join(" ") }))),
+    );
+    later(1900 + words.length * 60, () => {
+      patchLast((t) => ({
+        ...t,
+        parts: [...t.parts.map((p) => ({ ...p, status: "done" })), { type: "text", text: reply }],
+        writing: "",
+        status: "done",
+      }));
+      setState("done");
+    });
+  };
+
+  return {
+    sessionId: turns.length ? "demo" : null,
+    state,
+    needs,
+    turns,
+    place: "app",
+    request: turns.length ? { id: "demo-request", title: "Investors" } : null,
+    pending: null,
+    sending: false,
+    loading: false,
+    error: null,
+    unavailable: false,
+    send,
+    // The agent's question, answered where it was asked (D19).
+    answer: async ({ optionId, text }) => {
+      setNeeds(null);
+      setState("working");
+      later(900, () => {
+        patchLast((t) => ({
+          ...t,
+          parts: [...t.parts, { type: "text", text: `Starting with ${optionId ? optionId : `“${text}”`}. I'll draft the first three now.` }],
+          status: "done",
+        }));
+        setState("done");
+      });
+      return { ok: true };
+    },
+    needsAt: "demo",
+    stop: () => {
+      timers.current.forEach(clearTimeout);
+      patchLast((t) => ({ ...t, writing: "", status: "stopped" }));
+      setState("stopped");
+    },
+    openOnDesk: () => true,
+    newChat: () => {
+      setTurns([]);
+      setState(null);
+      setNeeds(null);
+    },
+    reload: () => undefined,
+  };
+}
+
+export default function AgentChatDemo() {
+  const chat = usePretendThread();
+  const card = usePretendThread();
+  // The yes, as useApproval(chat.request.id) would hand it: the frame is a stand-in.
+  const [scheme, setScheme] = useState("light dark");
+  useEffect(() => {
+    const read = getComputedStyle(document.documentElement).colorScheme;
+    if (read && read !== "normal") setScheme(read);
+  }, []);
+  const frameRef = useRef(null);
+  const approval = {
+    approval: { request_id: "demo-request", question: "Send 12?", label: "Send 12" },
+    state: "ready",
+    always: false,
+    fallback: false,
+    frame: { srcDoc: FRAME(scheme), ref: frameRef, title: "Approve" },
+    height: 170,
+  };
+  return (
+    <div className="grid gap-6 p-6 lg:grid-cols-[minmax(0,1fr)_320px]">
+      <div className="h-[560px] min-w-0 overflow-hidden rounded-lg border border-border">
+        <AgentChat
+          chat={chat}
+          title="Ask about Pinewood"
+          empty="The agent reads Pinewood's story, its deals and its people."
+          suggestions={["Who should we follow up with?", "Find restaurant groups in New England with 10 or more sites", "Send them a note", "Which list first?"]}
+          yes={<Approval approval={approval} title="Send 12 follow-ups" />}
+        />
+      </div>
+      <Card title="Or ask" padding="none" className="min-w-0 overflow-hidden">
+        <AgentChat chat={card} title="Ask the agent" bare fill={false} suggestions={["Who is waiting on me?", "What closes this month?"]} />
+      </Card>
+    </div>
+  );
+}

package/registry/blocks/agent-chat/index.js

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