makersclaw 0.7.0 → 0.8.1

package/registry/blocks/needs-you/block.json

@@ -0,0 +1,34 @@
+{
+  "name": "needs-you",
+  "title": "NeedsYou",
+  "description": "What waits on the member, in the app: NeedsYou is the queue of the agent's questions and yeses — a question is answered in place (QuestionBox: its options, and the member's own words where it welcomes them), a yes is the `approval` block's press frame (renderYes), and the rest open the desk (\"Waiting for your yes on the desk\" when the press frame cannot load, \"Connect on the desk\"); WaitingYes is the frozen-text card for that fallback — what goes out, frozen, then \"Waiting for your yes on the desk\", Open the desk and Take the ask back; AgentWorking is the strip while the agent works, with what it is on, Stop, and \"Stop keeps everything written so far\". Fed by useNeedsYou() (lib/hooks.js). Never an Approve in the app's own code: the yes is pressed in the Makersclaw-held frame; account sign-ins and money stay on the desk.",
+  "useWhen": "A home screen or a record that should say what the agent waits on and let the member settle it there (answer a question, give a yes before sending or spending), a screen where something is about to go out (a post, an email, a batch) and waits for the member's yes, or any place an ask is running and the member should be able to stop it. For the yes card itself use approval; for the conversation use agent-chat; for one job's progress use job-panel.",
+  "tags": [
+    "needs you",
+    "approval",
+    "yes",
+    "waiting",
+    "inbox",
+    "queue",
+    "agent",
+    "stop",
+    "working",
+    "take back",
+    "send",
+    "desk",
+    "question",
+    "answer",
+    "press"
+  ],
+  "exports": [
+    "NeedsYou",
+    "QuestionBox",
+    "WaitingYes",
+    "AgentWorking"
+  ],
+  "files": [
+    "index.js",
+    "needs-you.jsx"
+  ],
+  "requires": []
+}

package/registry/blocks/needs-you/demo.jsx

@@ -0,0 +1,143 @@
+"use client";
+
+// NeedsYou, WaitingYes and AgentWorking in every state, with fake data
+// shaped as useNeedsYou() returns it — the gallery's and the smoke test's
+// surface. Not installed into apps.
+import { useState } from "react";
+import { NeedsYou, WaitingYes, AgentWorking } from "../components/blocks/needs-you";
+
+const ITEMS = [
+  {
+    id: "n1",
+    request: { id: "r1" },
+    kind: "yes",
+    title: "Follow-ups to the investor list",
+    text: "Send 12 follow-ups from ada@acme.com to the investors on the list?",
+    at: "2026-10-09T09:12:00Z",
+  },
+  {
+    id: "n2",
+    request: { id: "r2" },
+    kind: "question",
+    title: "Pinewood's renewal",
+    text: "Pinewood has two contacts named Sam. Which one owns the renewal: Sam Ortiz (operations) or Sam Lee (finance)?",
+    at: "09:40",
+  },
+  { id: "n3", request: { id: "r3" }, kind: "connect", title: "Morning read", text: "Connect a mailbox so the agent can read replies.", at: "Yesterday" },
+  { id: "n4", request: { id: "r4" }, kind: "spend", title: "Enrich 480 companies", text: "This uses about 19,200 credits, at most 24,000.", at: "Mon" },
+];
+
+// The same queue with what the app can settle itself (0.8.1, D18/D19): a
+// question answered in place, a yes through the approval card.
+const IN_APP = [
+  {
+    id: "a1",
+    request: { id: "r5" },
+    kind: "question",
+    via: "answer",
+    options: [
+      { id: "ortiz", label: "Sam Ortiz (operations)" },
+      { id: "lee", label: "Sam Lee (finance)" },
+    ],
+    free: true,
+    title: "Pinewood's renewal",
+    text: "Pinewood has two contacts named Sam. Which one owns the renewal?",
+    at: "09:40",
+  },
+  {
+    id: "a2",
+    request: { id: "r6" },
+    kind: "yes",
+    via: "press",
+    title: "Follow-ups to the investor list",
+    text: "Send 12 follow-ups from ada@acme.com to the investors on the list?",
+    at: "09:12",
+  },
+  { id: "a3", request: { id: "r7" }, kind: "connect", via: null, title: "Morning read", text: "Connect a mailbox so the agent can read replies.", at: "Yesterday" },
+];
+
+const POST = `How to cover a sudden sick day
+
+When someone calls in sick at 6 a.m., the shift still has to open. Here is the three-message routine our customers use…`;
+
+const pause = (ms) => new Promise((r) => setTimeout(r, ms));
+
+export default function NeedsYouDemo() {
+  const [stopping, setStopping] = useState(false);
+  const [stopped, setStopped] = useState(false);
+  return (
+    <div className="grid gap-6 p-6">
+      <div className="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))]">
+        <NeedsYou items={ITEMS} onOpen={() => pause(500)} />
+        <NeedsYou
+          title="Needs you · settled here"
+          items={IN_APP}
+          onOpen={() => pause(500)}
+          onAnswer={() => pause(600).then(() => ({ ok: true }))}
+          renderYes={() => <p className="rounded-[var(--radius)] border border-border p-2.5 text-muted-foreground">The approval card sits here.</p>}
+        />
+        <div className="grid content-start gap-4">
+          <NeedsYou items={[]} />
+          <NeedsYou items={[]} loading title="Needs you · loading" />
+          <NeedsYou items={[]} unavailable />
+        </div>
+      </div>
+
+      <div className="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))]">
+        <WaitingYes
+          title="How to cover a sudden sick day"
+          frozen={POST}
+          body="Say yes there, and the agent makes this one post live on Webflow, then adds its link here."
+          onOpen={() => true}
+          onTakeBack={() => pause(700).then(() => ({ ok: true }))}
+        />
+        <WaitingYes title="Kickoff note to Harbor Seed" frozen="Hi Ana — thanks for the intro…" kicker="Ready to send" state="ready" />
+        <WaitingYes title="Weekly digest" frozen="Five things that moved this week…" state="approved" />
+        <WaitingYes
+          title="Price change to the Pro plan"
+          frozen="From 1 November, Pro is $35 a month."
+          state="failed"
+          error="Webflow refused the change: the page is locked by another editor."
+          onOpen={() => true}
+        />
+        <WaitingYes
+          title="A take back that fails"
+          frozen="Hi team — the release moves to Thursday."
+          onOpen={() => true}
+          onTakeBack={() => pause(500).then(() => ({ ok: false, error: "The agent already started sending. Stop it on the desk." }))}
+        />
+      </div>
+
+      <div className="grid gap-3">
+        {stopped ? (
+          <p className="text-sm text-muted-foreground">Stopped. Everything written so far is kept.</p>
+        ) : (
+          <AgentWorking
+            words="Writing the follow-ups"
+            steps={[
+              { label: "Reading the investor list", status: "done" },
+              { label: "Reading last month's notes", status: "done" },
+              { label: "Drafting note 4 of 12", status: "running" },
+            ]}
+            stopping={stopping}
+            onStop={() => {
+              setStopping(true);
+              setTimeout(() => {
+                setStopping(false);
+                setStopped(true);
+              }, 700);
+            }}
+          />
+        )}
+        <AgentWorking words="Sorting the stickies into groups" />
+        <div className="w-80 max-w-full">
+          <AgentWorking
+            words="Reading every deal note since March and writing a summary for each account owner"
+            steps={[{ label: "Reading notes for Pinewood Restaurant Group, Harborview and nine more", status: "running" }]}
+            onStop={() => undefined}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/registry/blocks/needs-you/index.js

@@ -0,0 +1,3 @@
+// The NeedsYou block — `makersclaw add needs-you`. Fixed: compose it
+// through its props (README.md beside this file).
+export { NeedsYou, QuestionBox, WaitingYes, AgentWorking } from "./needs-you";

package/registry/blocks/needs-you/needs-you.jsx

@@ -0,0 +1,441 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Icon, Input, Skeleton, Spinner, cx } from "../../ui";
+
+// What waits on the member, in the app (the app kit, D15). Four pieces:
+//
+//   NeedsYou      the queue: the agent's questions and its yeses. A
+//                 question is answered in place (QuestionBox, 0.8.1, D19);
+//                 a yes is the `approval` block's press frame, given to
+//                 `renderYes` (D18); everything else opens the desk.
+//   QuestionBox   the agent's question answered where it was asked: its
+//                 options as one press each, and the member's own words
+//                 where the question welcomes them.
+//   WaitingYes    the frozen-text card: what goes out, frozen, then
+//                 "Waiting for your yes on the desk", Open the desk, and
+//                 Take the ask back (Blog Post Studio's design).
+//   AgentWorking  the strip while the agent works: what it is on, Stop,
+//                 and "Stop keeps everything written so far".
+//
+// Fed by useNeedsYou() (lib/hooks.js). An answer is words, so the app
+// takes it (D19). The YES is not: these blocks never draw an Approve — the
+// press is the Makersclaw-held frame of the `approval` block, which app
+// code cannot press (D18). The account sign-in and money stay on the
+// desk. WaitingYes is the card for when the press frame cannot load: it
+// says the yes waits on the desk and opens it. Props in, callbacks out.
+
+const ISO = /^\d{4}-\d{2}-\d{2}T/;
+
+/** "11:20" today, "12 Sep" another day; words as given. */
+function when(at) {
+  if (at == null || at === "") return null;
+  const d = at instanceof Date ? at : typeof at === "string" && ISO.test(at) ? new Date(at) : null;
+  if (!d) return { words: String(at) };
+  if (Number.isNaN(d.getTime())) return null;
+  const today = d.toDateString() === new Date().toDateString();
+  return {
+    words: today ? d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }) : d.toLocaleDateString("en-GB", { day: "numeric", month: "short" }),
+    iso: d.toISOString(),
+  };
+}
+
+/** Each kind of need: its word, its icon, what its one press says. */
+const KINDS = {
+  question: { word: "A question", icon: "circle-help", head: "Waiting for your answer on the desk", press: "Answer on the desk" },
+  yes: { word: "Your yes", icon: "shield-check", head: "Waiting for your yes on the desk", press: "Open the desk" },
+  approval: { word: "Your yes", icon: "shield-check", head: "Waiting for your yes on the desk", press: "Open the desk" },
+  spend: { word: "Spending", icon: "credit-card", head: "Waiting for your yes to spend, on the desk", press: "Open the desk" },
+  limit: { word: "Credits", icon: "credit-card", head: "Paused for credits — see the desk", press: "Open the desk" },
+  connect: { word: "An account", icon: "link", head: "Waiting for you to connect an account on the desk", press: "Connect on the desk" },
+};
+const OTHER = { word: "Needs you", icon: "bell", head: "Needs you on the desk", press: "Open the desk" };
+const kindOf = (k) => KINDS[k] ?? OTHER;
+
+/**
+ * The agent's question, answered where it was asked (D19). Its options are
+ * one press each (a lone question with options answers on the spot, as the
+ * desk's form does), and where the question welcomes words there is a box
+ * for them.
+ *
+ *   options    [{ id, label }] the question offers (none: words only)
+ *   free       false when the question takes one of its options only
+ *   onAnswer({ optionId } | { text })   async → { ok } | { ok: false, error }
+ *   placeholder, sendLabel   the box's words
+ *
+ * Fed by useNeedsYou().answer(item, …) or useAgentThread().answer(…). The
+ * door checks it all again (the member who asked, one of the options, the
+ * words not empty): a refusal is shown as it is.
+ */
+export function QuestionBox({ options = [], free = true, onAnswer, placeholder, sendLabel = "Send answer", className }) {
+  const list = Array.isArray(options) ? options.filter((o) => o && o.id) : [];
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(null); // an option id, or "text"
+  const [error, setError] = useState(null);
+  const [sent, setSent] = useState(false);
+  if (!onAnswer) return null;
+
+  async function give(payload, which) {
+    if (busy || sent) return;
+    setBusy(which);
+    setError(null);
+    let r;
+    try {
+      r = await onAnswer(payload);
+    } catch (e) {
+      r = { ok: false, error: e?.message ?? String(e) };
+    }
+    setBusy(null);
+    if (r && r.ok === false) setError(r.error || "That did not go through. Try again.");
+    else setSent(true);
+  }
+  const words = text.trim();
+  const hasBox = free !== false || list.length === 0;
+
+  if (sent)
+    return (
+      <p role="status" className={cx("flex items-center gap-2 text-sm text-success", className)}>
+        <Icon name="check" size={14} className="shrink-0" /> Sent. The agent is on it.
+      </p>
+    );
+  return (
+    <div className={cx("grid grid-cols-1 min-w-0 gap-2", className)}>
+      {list.length ? (
+        <div className="flex min-w-0 flex-wrap gap-1.5">
+          {list.map((o) => (
+            <Button key={o.id} size="sm" variant="secondary" loading={busy === o.id} disabled={Boolean(busy) && busy !== o.id} onClick={() => give({ optionId: o.id }, o.id)}>
+              {o.label}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+      {hasBox ? (
+        <form
+          className="flex min-w-0 items-center gap-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (words) give({ text: words }, "text");
+          }}
+        >
+          <Input
+            aria-label={placeholder ?? (list.length ? "Or answer in your own words" : "Your answer")}
+            placeholder={placeholder ?? (list.length ? "Or answer in your own words…" : "Your answer…")}
+            value={text}
+            disabled={Boolean(busy)}
+            onChange={(e) => setText(e.target.value)}
+            className="min-w-0 flex-1"
+          />
+          <Button size="sm" variant="primary" type="submit" loading={busy === "text"} disabled={!words || Boolean(busy)}>
+            {sendLabel}
+          </Button>
+        </form>
+      ) : null}
+      {error ? (
+        <p role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/** One thing that waits. */
+function Need({ item, onOpen, onAnswer, renderYes }) {
+  const k = kindOf(item.kind);
+  const answerHere = item.via === "answer" && Boolean(onAnswer);
+  const pressHere = item.via === "press" && typeof renderYes === "function";
+  const t = when(item.at);
+  const [opening, setOpening] = useState(false);
+  async function open() {
+    if (!onOpen || opening) return;
+    setOpening(true);
+    try {
+      await onOpen(item);
+    } finally {
+      setOpening(false);
+    }
+  }
+  return (
+    <li
+      className={cx(
+        "grid grid-cols-1 min-w-0 gap-2 border-b border-border px-3.5 py-3 last:border-b-0",
+        !answerHere && !pressHere && "@lg:grid-cols-[minmax(0,1fr)_auto] @lg:items-start",
+      )}
+    >
+      <div className="flex min-w-0 items-start gap-2.5">
+        <Icon name={k.icon} size={16} className="mt-0.5 shrink-0 text-warning" />
+        <div className="grid grid-cols-1 min-w-0 gap-0.5">
+          <p className="flex min-w-0 flex-wrap items-baseline gap-x-2 text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">{k.word}</span>
+            {item.title ? <span className="min-w-0 break-words">{item.title}</span> : null}
+            {t ? <time dateTime={t.iso}>{t.words}</time> : null}
+          </p>
+          <p className="font-medium">{answerHere ? "A question for you" : pressHere ? "Waiting for your yes" : k.head}</p>
+          {item.text ? <p className={cx("break-words text-muted-foreground", !answerHere && !pressHere && "line-clamp-3")}>{item.text}</p> : null}
+        </div>
+      </div>
+      {answerHere ? (
+        <QuestionBox
+          options={item.options ?? []}
+          free={item.free}
+          onAnswer={(payload) => onAnswer(item, payload)}
+          className="pl-[26px]"
+        />
+      ) : pressHere ? (
+        <div className="min-w-0 pl-[26px]">{renderYes(item)}</div>
+      ) : onOpen ? (
+        <Button size="sm" variant="secondary" loading={opening} onClick={open} className="justify-self-start @lg:justify-self-end">
+          {k.press} <Icon name="external" size={12} />
+        </Button>
+      ) : null}
+    </li>
+  );
+}
+
+/**
+ *   items        what useNeedsYou() returns as `items`:
+ *                [{ id, request, kind, text, title, at, via, options,
+ *                free, needsAt }]; kind is question · yes · spend ·
+ *                connect (another word reads "Needs you"); `via` says how
+ *                the app can settle it ("answer", "press" or null: the desk)
+ *   onOpen(item) opens it on the desk (useNeedsYou's `open`); the press
+ *                of everything the app cannot settle itself
+ *   onAnswer(item, { optionId | text })   answers a question in place
+ *                (useNeedsYou's `answer`, D19): an item with via "answer"
+ *                shows its QuestionBox; without it, it opens the desk
+ *   renderYes(item)   draws the yes of an item with via "press" (D18):
+ *                `<YesCard item={item} />`, a component of yours that
+ *                calls useApproval(item.id) and returns the `approval`
+ *                block; without it the item opens the desk
+ *   empty        the line when nothing waits (default "Nothing waits on
+ *                you here."); `false` draws nothing at all then
+ *   title        the head (default "Needs you"); `null` for none
+ *   loading      skeleton rows before the first read
+ *   unavailable  a quiet "not connected yet" instead of the list
+ */
+export function NeedsYou({ items = [], onOpen, onAnswer, renderYes, empty = "Nothing waits on you here.", title = "Needs you", loading = false, unavailable = false, className }) {
+  const list = (items ?? []).filter(Boolean);
+  if (!list.length && empty === false && !loading) return null;
+  return (
+    <section aria-label={typeof title === "string" ? title : "Needs you"} className={cx("@container min-w-0 overflow-hidden rounded-lg border border-border bg-card text-sm text-card-foreground", className)}>
+      {title ? (
+        <div className="flex min-w-0 items-center gap-2 border-b border-border px-3.5 py-2.5 font-semibold">
+          <span className="min-w-0 flex-1 truncate">{title}</span>
+          {list.length ? <span className="shrink-0 rounded-full bg-warning/15 px-2 text-xs font-medium text-warning">{list.length}</span> : null}
+        </div>
+      ) : null}
+      {unavailable ? (
+        <p className="px-3.5 py-3 text-muted-foreground">What waits on you is not connected yet.</p>
+      ) : loading && !list.length ? (
+        <div aria-busy="true" aria-label="Loading" className="grid grid-cols-1 gap-3 px-3.5 py-3">
+          <Skeleton className="w-3/4" />
+          <Skeleton className="w-1/2" />
+        </div>
+      ) : !list.length ? (
+        <p className="flex items-center gap-2 px-3.5 py-3 text-muted-foreground">
+          <Icon name="check" size={14} className="shrink-0 text-success" />
+          {empty}
+        </p>
+      ) : (
+        <ul className="m-0 grid grid-cols-1 list-none p-0">
+          {list.map((item, i) => (
+            <Need key={item.id ?? i} item={item} onOpen={onOpen} onAnswer={onAnswer} renderYes={renderYes} />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+/** What WaitingYes says in each state. */
+const YES = {
+  ready: null,
+  waiting: { icon: "clock", head: "Waiting for your yes on the desk", tone: "text-primary" },
+  approved: { icon: "check", head: "You said yes · the agent is on it", tone: "text-success" },
+  declined: { icon: "x", head: "You said no on the desk. Nothing went out.", tone: "text-muted-foreground" },
+  taken: { icon: "undo", head: "Taken back. Nothing went out.", tone: "text-muted-foreground" },
+  failed: { icon: "warning", head: "It didn't go through", tone: "text-destructive" },
+};
+
+/**
+ * The frozen-text card: what goes out, frozen while the ask waits, and
+ * where it stands. Never an Approve: the yes is the `approval` block's
+ * press frame (D18), and this card is what shows when that frame cannot
+ * load — "Waiting for your yes on the desk", with the desk one press away.
+ *
+ *   title         what it is ("How to cover a sudden sick day")
+ *   frozen        what goes out, as it will go (text or a node)
+ *   kicker        the line over it (default "Ready to send")
+ *   state         ready · waiting (default) · approved · declined ·
+ *                 taken · failed
+ *   body          one sentence under the state, in the app's words
+ *                 (default: "The ask is on your desk. Say yes there, and
+ *                 the agent does it.")
+ *   error         the words for `failed`
+ *   onOpen()      opens the desk on this ask (useNeedsYou's `open`)
+ *   onTakeBack()  async → { ok } | { ok: false, error }: stops the ask
+ *                 while the agent has not acted (useNeedsYou's `takeBack`);
+ *                 without it there is no Take back
+ *   takeBackLabel default "Take the ask back"
+ */
+export function WaitingYes({
+  title,
+  frozen,
+  kicker = "Ready to send",
+  state = "waiting",
+  body = "The ask is on your desk. Say yes there, and the agent does it.",
+  error,
+  onOpen,
+  onTakeBack,
+  takeBackLabel = "Take the ask back",
+  className,
+}) {
+  const [taking, setTaking] = useState(false);
+  const [takeError, setTakeError] = useState(null);
+  const [taken, setTaken] = useState(false);
+  const now = taken ? "taken" : state;
+  const s = YES[now] ?? YES.waiting;
+
+  async function takeBack() {
+    if (!onTakeBack || taking) return;
+    setTaking(true);
+    setTakeError(null);
+    let r;
+    try {
+      r = await onTakeBack();
+    } catch (e) {
+      r = { ok: false, error: e?.message ?? String(e) };
+    }
+    setTaking(false);
+    if (r && r.ok === false) setTakeError(r.error || "Couldn't take it back. Open the desk to stop it there.");
+    else setTaken(true);
+  }
+
+  return (
+    <section
+      aria-label={typeof title === "string" ? title : "What goes out"}
+      className={cx("@container grid grid-cols-1 min-w-0 content-start gap-3 rounded-lg border border-border bg-card p-3.5 text-sm text-card-foreground", className)}
+    >
+      <div className="grid grid-cols-1 min-w-0 gap-1">
+        {kicker ? (
+          <p className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            {now !== "ready" && now !== "taken" ? <Icon name="lock" size={12} label="Frozen while it waits" /> : null}
+            {kicker}
+          </p>
+        ) : null}
+        {title ? <p className="break-words text-[15px] font-semibold leading-snug">{title}</p> : null}
+      </div>
+      {frozen != null && frozen !== "" ? (
+        <div
+          className={cx(
+            "min-w-0 whitespace-pre-wrap break-words rounded-[var(--radius)] border border-border px-3 py-2.5",
+            now === "ready" || now === "taken" ? "bg-background" : "bg-muted text-muted-foreground",
+          )}
+        >
+          {frozen}
+        </div>
+      ) : null}
+
+      {s ? (
+        <div role="status" className="grid grid-cols-1 min-w-0 gap-2 border-t border-border pt-3">
+          <p className={cx("flex min-w-0 items-center gap-2 font-medium", now === "waiting" ? null : s.tone)}>
+            <Icon name={s.icon} size={16} className={cx("shrink-0", s.tone)} />
+            <span className="min-w-0 break-words">{s.head}</span>
+          </p>
+          {now === "waiting" && body ? <p className="text-muted-foreground">{body}</p> : null}
+          {now === "failed" && error ? <p className="text-destructive">{error}</p> : null}
+          {now === "waiting" ? (
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              {onOpen ? (
+                <Button size="sm" variant="primary" onClick={onOpen}>
+                  Open the desk <Icon name="external" size={12} />
+                </Button>
+              ) : null}
+              {onTakeBack ? (
+                <>
+                  <Button size="sm" variant="quiet" loading={taking} onClick={takeBack}>
+                    {takeBackLabel}
+                  </Button>
+                  <span className="text-xs text-muted-foreground">while the agent hasn't acted</span>
+                </>
+              ) : null}
+            </div>
+          ) : now === "failed" && onOpen ? (
+            <Button size="sm" variant="secondary" className="justify-self-start" onClick={onOpen}>
+              Open the desk <Icon name="external" size={12} />
+            </Button>
+          ) : null}
+          {takeError ? (
+            <p role="alert" className="text-xs text-destructive">
+              {takeError}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+/**
+ * The strip while the agent works on an ask: what it is on now, Stop,
+ * and what Stop keeps.
+ *
+ *   words      what it is doing ("Writing the draft"); default "Working on it"
+ *   steps      [{ label, status: running · done · failed }]: the running
+ *              step's label shows, with the count
+ *   onStop()   stops it (useNeedsYou's `stop`, useAgentThread's `stop`);
+ *              may be async → { ok } | { ok: false, error }; without it
+ *              there is no Stop (the member may not stop it)
+ *   stopping   true while a stop you track is out
+ *   stopHint   default "Stop keeps everything written so far"; null for none
+ */
+export function AgentWorking({ words = "Working on it", steps, onStop, stopping = false, stopHint = "Stop keeps everything written so far", className }) {
+  const list = Array.isArray(steps) ? steps : [];
+  const running = list.filter((s) => s?.status === "running").at(-1);
+  const done = list.filter((s) => s?.status === "done").length;
+  // useNeedsYou's stop(request) answers { ok } | { ok: false, error }: the
+  // strip spins while it is out and says why when it fails.
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  async function stop() {
+    if (!onStop || busy || stopping) return;
+    setBusy(true);
+    setError(null);
+    let r;
+    try {
+      r = await onStop();
+    } catch (e) {
+      r = { ok: false, error: e?.message ?? String(e) };
+    }
+    setBusy(false);
+    if (r && r.ok === false) setError(r.error || "Couldn't stop it. Open the desk to stop it there.");
+  }
+  return (
+    <div role="status" className={cx("@container flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 rounded-lg border border-border bg-card px-3.5 py-2.5 text-sm text-card-foreground", className)}>
+      <Spinner size="sm" label="Working" className="shrink-0 text-primary" />
+      <div className="grid grid-cols-1 min-w-0 flex-1 basis-48 gap-0.5">
+        <span className="min-w-0 break-words font-medium">{words}</span>
+        {running || list.length ? (
+          <span className="min-w-0 truncate text-xs text-muted-foreground">
+            {running ? running.label : null}
+            {running && list.length > 1 ? " · " : null}
+            {list.length > 1 ? `${done} of ${list.length} steps done` : null}
+          </span>
+        ) : null}
+      </div>
+      {onStop ? (
+        <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
+          {stopHint ? <span className="text-xs text-muted-foreground">{stopHint}</span> : null}
+          <Button size="sm" variant="secondary" loading={stopping || busy} onClick={stop}>
+            <Icon name="stop" size={12} /> Stop
+          </Button>
+        </span>
+      ) : null}
+      {error ? (
+        <p role="alert" className="basis-full text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/registry/blocks/org-chart/README.md

@@ -73,7 +73,9 @@ One row per person, as a table holds them:
   reports: kit parts (their open deals, a "Message" button).
 - `onSelectionChange(person | null)` — the selected card changed.
 - `height` — px or any CSS length, default `640`. A height class in
-  `className` (`h-dvh`, `h-full`, `flex-1`) replaces it.
+  `className` (`h-full`, `min-h-0 flex-1`) replaces it: `min-h-0 flex-1`
+  fills what the surface has left (the Example). Never `h-dvh` or a `vh`
+  height, which `npm run check` refuses.
 - `label` — the chart's accessible name (default "Org chart").
 - `className` — layout around it (margin, width, height). Never colour.
 
@@ -124,7 +126,7 @@ export default function TeamChart() {
         if (res.ok) await whenLanded(); // the people are read again: the chart draws the new manager
         return res;
       }}
-      className="h-[calc(100dvh-8rem)]"
+      className="min-h-0 flex-1"
     />
   );
 }