makersclaw 0.1.0 → 0.3.0

package/registry/blocks/chat/demo.jsx

@@ -0,0 +1,578 @@
+"use client";
+
+// The Chat block — the gallery's and the smoke test's surface. Not
+// installed into apps. Four variants behind the switcher:
+//   Support    a pretend support thread: replies "stream" from a timer, the
+//              last message failed to send and can be retried, older
+//              messages load from the top.
+//   Assistant  a header, reasoning folded over replies, thumbs up/down,
+//              edit (Up arrow in the empty composer), suggestion chips.
+//   Ask        the "ask anything" pill with a + menu, a mic and chips.
+//   Prompt     a box composer with a model menu, a settings menu and
+//              starter cards.
+import { useEffect, useRef, useState } from "react";
+import { Button, Icon, Menu, Switch, Toggle, ToggleGroup } from "../components/ui";
+import { ChatThread, Composer } from "../components/blocks/chat";
+
+const MIN = 60 * 1000;
+const DAY = 24 * 60 * MIN;
+const ME = { name: "Maya Chen" };
+const ADA = { name: "Ada · Support" };
+
+// A picture of a bank statement, for the attachment's thumbnail: a real
+// 80×80 PNG, not SVG markup, which an app's check refuses in its code.
+const STATEMENT_PNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAh0lEQVR42u3YMQ0AIAwEQDSzsDJiATeYYmHCBKEhXFMDt3ybT/OzScDAwMDAwMDAwMBXwKX1kAUGBgYGdpaAgYGBgYGBgSPB48EBBgaW0sDAwMA+LXcYGNinJaWBgYH/Bq+awxcYGFhoAQMDA+u0NB7AwDotKQ0MDAwMDAwMDAwMDAwMDHxgNrTiMi0505F8AAAAAElFTkSuQmCC";
+
+function conversation(now) {
+  const at = (ms) => new Date(now - ms).toISOString();
+  return [
+    { id: "s1", role: "system", content: "Conversation started · Billing", createdAt: at(DAY + 12 * MIN) },
+    { id: "m1", role: "user", author: ME, content: "Hi! We were charged twice for the September invoice. Can you check?", createdAt: at(DAY + 11 * MIN) },
+    { id: "m2", role: "user", author: ME, content: "Workspace is Fernhill Bakery, if that helps.", createdAt: at(DAY + 10 * MIN) },
+    {
+      id: "m3",
+      role: "assistant",
+      author: ADA,
+      content:
+        "Sorry about that. I can see two charges of `$49.00` on 1 Sep — one of them is a pending hold from the card update, not a second payment. It should drop off within 3–5 business days.\n\nIf it is still there on Friday, send me the statement line and I will refund it straight away.",
+      createdAt: at(DAY + 8 * MIN),
+    },
+    {
+      id: "m4",
+      role: "user",
+      author: ME,
+      content: "It's Friday and it is still showing as posted. Here's the statement.",
+      createdAt: at(26 * MIN),
+      attachments: [
+        { id: "a1", name: "statement-september.pdf", size: 188_416, type: "application/pdf" },
+        { id: "a2", name: "posted-charges.png", size: 402_112, type: "image/png", url: STATEMENT_PNG },
+      ],
+    },
+    {
+      id: "m5",
+      role: "assistant",
+      author: ADA,
+      content:
+        "Thanks, Maya — that confirms it. I've refunded **$49.00** to the card ending 4417, reference `RF-20931`. It lands in 5–10 days.\n\nYour developer can check it from the API too:\n```bash\ncurl https://api.ledgerly.dev/v1/refunds/RF-20931 \\\n  -H \"Authorization: Bearer $LEDGERLY_KEY\"\n```",
+      createdAt: at(24 * MIN),
+    },
+    {
+      id: "m6",
+      role: "user",
+      author: ME,
+      content: "Could you also email the receipt to accounts@fernhill.co?",
+      createdAt: at(3 * MIN),
+      status: "failed",
+      error: "you are offline",
+    },
+  ];
+}
+
+function older(now) {
+  const at = (ms) => new Date(now - ms).toISOString();
+  return [
+    { id: "o1", role: "user", author: ME, content: "Is there a way to add a second admin to our workspace?", createdAt: at(3 * DAY + 40 * MIN) },
+    {
+      id: "o2",
+      role: "assistant",
+      author: ADA,
+      content: "Yes. Open **Settings → Members**, choose Invite, and pick the `Admin` role. The invite link is good for 7 days.",
+      createdAt: at(3 * DAY + 38 * MIN),
+    },
+    { id: "o3", role: "user", author: ME, content: "Perfect, thanks!", createdAt: at(3 * DAY + 37 * MIN) },
+  ];
+}
+
+const REPLIES = [
+  "Done — the receipt for RF-20931 is on its way to accounts@fernhill.co. It comes from billing@ledgerly.dev, so check the spam folder if it has not arrived in a few minutes.",
+  "Happy to help. I've added a note to your account so the next card update does not place a second hold.\n\nAnything else I can look at while I'm here?",
+  "Good question. Receipts live under **Billing → History**; each row has a `Download PDF` link, and the whole year exports as CSV from the same page.",
+];
+
+function SupportDemo() {
+  const [anchor] = useState(() => Math.floor(Date.now() / MIN) * MIN);
+  const [messages, setMessages] = useState(() => conversation(anchor));
+  const [hasMore, setHasMore] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [readOnly, setReadOnly] = useState(false);
+  const [empty, setEmpty] = useState(false);
+  const timers = useRef(new Set());
+  const replyIndex = useRef(0);
+  const streamId = useRef(null);
+
+  useEffect(() => {
+    const all = timers.current;
+    return () => all.forEach((t) => clearTimeout(t));
+  }, []);
+  const later = (ms, fn) => {
+    const t = setTimeout(() => {
+      timers.current.delete(t);
+      fn();
+    }, ms);
+    timers.current.add(t);
+  };
+  const patch = (id, change) => setMessages((all) => all.map((m) => (m.id === id ? { ...m, ...change } : m)));
+
+  // Stream `text` into message `id`, a few words at a time.
+  function stream(id, text) {
+    streamId.current = id;
+    const words = text.split(/(\s+)/);
+    let i = 0;
+    const tick = () => {
+      if (streamId.current !== id) return;
+      i = Math.min(words.length, i + 3);
+      const done = i >= words.length;
+      patch(id, { content: words.slice(0, i).join(""), status: done ? undefined : "streaming" });
+      if (done) streamId.current = null;
+      else later(60, tick);
+    };
+    later(700, tick);
+  }
+
+  function reply() {
+    const id = `r${Date.now()}`;
+    const text = REPLIES[replyIndex.current++ % REPLIES.length];
+    setMessages((all) => [...all, { id, role: "assistant", author: ADA, content: "", status: "streaming", createdAt: new Date().toISOString() }]);
+    stream(id, text);
+  }
+
+  function deliver(id) {
+    later(500, () => {
+      patch(id, { status: undefined, error: undefined });
+      reply();
+    });
+  }
+
+  async function send(text, attached) {
+    const id = `u${Date.now()}`;
+    setMessages((all) => [
+      ...all,
+      { id, role: "user", author: ME, content: text, createdAt: new Date().toISOString(), status: "sending", attachments: attached.map(({ progress, ...f }) => f) },
+    ]);
+    setFiles([]);
+    deliver(id);
+    return { ok: true };
+  }
+
+  function retry(m) {
+    patch(m.id, { status: "sending", error: undefined });
+    deliver(m.id);
+  }
+
+  function regenerate(m) {
+    patch(m.id, { content: "", status: "streaming" });
+    stream(m.id, REPLIES[replyIndex.current++ % REPLIES.length]);
+  }
+
+  function stop() {
+    const id = streamId.current;
+    streamId.current = null;
+    if (id) setMessages((all) => all.map((m) => (m.id === id ? { ...m, status: undefined, content: m.content || "(stopped)" } : m)));
+  }
+
+  function attach(picked) {
+    const added = picked.map((file, i) => ({
+      id: `f${Date.now()}-${i}`,
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      url: file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined,
+      progress: 0,
+    }));
+    setFiles((all) => [...all, ...added]);
+    for (const f of added) {
+      const step = (p) =>
+        later(220, () => {
+          setFiles((all) => all.map((x) => (x.id === f.id ? { ...x, progress: Math.min(100, p) } : x)));
+          if (p < 100) step(p + 20);
+        });
+      step(20);
+    }
+  }
+
+  function loadMore() {
+    setLoadingMore(true);
+    later(900, () => {
+      setMessages((all) => [...older(anchor), ...all]);
+      setHasMore(false);
+      setLoadingMore(false);
+    });
+  }
+
+  const streaming = messages.some((m) => m.status === "streaming");
+
+  return (
+    <div className="mx-auto grid max-w-3xl gap-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Switch id="chat-demo-readonly" label="Read-only thread" checked={readOnly} onChange={(e) => setReadOnly(e.target.checked)} />
+        <Button variant="quiet" size="sm" onClick={() => setEmpty((v) => !v)}>
+          {empty ? "Restore the conversation" : "Show an empty thread"}
+        </Button>
+      </div>
+      <ChatThread
+        messages={empty ? [] : messages}
+        onSend={send}
+        streaming={streaming}
+        onStop={stop}
+        onRetry={retry}
+        onRegenerate={regenerate}
+        actionsOf={(m) => [
+          { label: "Copy link", icon: "link", onSelect: () => navigator.clipboard?.writeText(`#message-${m.id}`).catch(() => {}) },
+          { label: "Delete message", icon: "trash", tone: "danger", onSelect: () => setMessages((all) => all.filter((x) => x.id !== m.id)) },
+        ]}
+        hasMore={!empty && hasMore}
+        loadingMore={loadingMore}
+        onLoadMore={loadMore}
+        attachments={files}
+        onAttach={attach}
+        onRemoveAttachment={(f) => setFiles((all) => all.filter((x) => x.id !== f.id))}
+        disabled={readOnly}
+        disabledPlaceholder="This conversation is closed"
+        assistantName="Ada · Support"
+        emptyTitle="No messages yet"
+        emptyBody="Ask about billing, your workspace or an invoice — Ada answers in a few seconds."
+        label="Support chat"
+        height="min(44rem, 85dvh)"
+      />
+    </div>
+  );
+}
+
+// ——— shared: a timer set that is cleared on unmount ———
+function useLater() {
+  const timers = useRef(new Set());
+  useEffect(() => {
+    const all = timers.current;
+    return () => all.forEach((t) => clearTimeout(t));
+  }, []);
+  return (ms, fn) => {
+    const t = setTimeout(() => {
+      timers.current.delete(t);
+      fn();
+    }, ms);
+    timers.current.add(t);
+  };
+}
+
+// ——— Assistant: header, reasoning, feedback, edit, suggestions ———
+
+const PIP = { name: "Pip · Planner" };
+
+function assistantThread(now) {
+  const at = (ms) => new Date(now - ms).toISOString();
+  return [
+    { id: "a1", role: "user", content: "Which of this week's orders are at risk of shipping late?", createdAt: at(9 * MIN) },
+    {
+      id: "a2",
+      role: "assistant",
+      author: PIP,
+      reasoning:
+        "Orders due by Friday: 14. Checked each against stock and the courier cut-off.\nTwo are waiting on the oak shelf restock (arrives Thursday). One is going to a Highlands postcode, which adds a day.",
+      reasoningDuration: 6,
+      content:
+        "Three orders are at risk:\n\n**Order 4471** and **order 4478** — both need the oak wall shelf, which is back in stock Thursday.\n**Order 4482** — Highlands address; the courier needs one extra day.\n\nThe other 11 are packed or ready to pack.",
+      createdAt: at(8 * MIN),
+      feedback: "up",
+    },
+    { id: "a3", role: "user", content: "Draft a short note to the two shelf customers.", createdAt: at(4 * MIN) },
+    {
+      id: "a4",
+      role: "assistant",
+      author: PIP,
+      reasoning: "Keep it short, apologise once, give the new date, offer a swap to the walnut shelf which is in stock.",
+      reasoningDuration: 3,
+      content:
+        "Here is a draft:\n\nHi — your oak wall shelf is running two days behind; it now leaves us on **Thursday** and reaches you Friday. If you would rather have it sooner, the walnut version is in stock and ships today at the same price. Just reply and we'll swap it.",
+      createdAt: at(3 * MIN),
+    },
+  ];
+}
+
+const PLAN_REPLIES = [
+  {
+    reasoning: "Looked at last month's returns by reason. Sizing on the linen apron is the top cause, then transit damage on ceramics.",
+    content: "Returns are mostly two things: the **linen apron** runs small (9 of 23 returns), and **ceramic mugs** break in transit (6). A size note on the apron page and double-boxing mugs would cover most of it.",
+  },
+  {
+    reasoning: "Stock under two weeks of cover at the current sell-through rate.",
+    content: "Four products drop below two weeks of stock by the 5th: oak wall shelf, stoneware bowl (large), linen apron (M) and the beeswax wraps. Want me to draft the purchase orders?",
+  },
+];
+
+const PLAN_SUGGESTIONS = [
+  { label: "What are customers returning?", icon: "refresh" },
+  { label: "What runs out soon?", icon: "package" },
+  { label: "Summarise this week", icon: "sparkles" },
+];
+
+function AssistantDemo() {
+  const [anchor] = useState(() => Math.floor(Date.now() / MIN) * MIN);
+  const [messages, setMessages] = useState(() => assistantThread(anchor));
+  const [failSaves, setFailSaves] = useState(false);
+  const [deep, setDeep] = useState(true);
+  const streamId = useRef(null);
+  const turn = useRef(0);
+  const later = useLater();
+  const patch = (id, change) => setMessages((all) => all.map((m) => (m.id === id ? { ...m, ...change } : m)));
+
+  function answer() {
+    const id = `p${Date.now()}`;
+    const r = PLAN_REPLIES[turn.current++ % PLAN_REPLIES.length];
+    const started = Date.now();
+    streamId.current = id;
+    setMessages((all) => [...all, { id, role: "assistant", author: PIP, content: "", reasoning: "", status: "streaming", createdAt: new Date().toISOString() }]);
+    later(900, () => patch(id, { reasoning: r.reasoning }));
+    const words = r.content.split(/(\s+)/);
+    let i = 0;
+    const tick = () => {
+      if (streamId.current !== id) return;
+      i = Math.min(words.length, i + 3);
+      const done = i >= words.length;
+      patch(id, { content: words.slice(0, i).join(""), status: done ? undefined : "streaming", reasoningDuration: Math.max(1, Math.round((Date.now() - started) / 1000)) });
+      if (done) streamId.current = null;
+      else later(60, tick);
+    };
+    later(1800, tick);
+  }
+
+  async function send(text) {
+    setMessages((all) => [...all, { id: `u${Date.now()}`, role: "user", content: text, createdAt: new Date().toISOString() }]);
+    answer();
+    return { ok: true };
+  }
+
+  function stop() {
+    const id = streamId.current;
+    streamId.current = null;
+    if (id) setMessages((all) => all.map((m) => (m.id === id ? { ...m, status: undefined, content: m.content || "(stopped)" } : m)));
+  }
+
+  function pause() {
+    return new Promise((r) => later(500, r));
+  }
+
+  async function feedback(m, value) {
+    await pause();
+    if (failSaves) return { ok: false, error: "Feedback not saved: the server did not answer." };
+    patch(m.id, { feedback: value ?? undefined });
+    return { ok: true };
+  }
+
+  async function edit(m, text) {
+    await pause();
+    if (failSaves) return { ok: false, error: "Not saved: the server did not answer." };
+    // An edit asks again: the replies after it go, a new one streams.
+    setMessages((all) => {
+      const at = all.findIndex((x) => x.id === m.id);
+      return [...all.slice(0, at), { ...m, content: text }];
+    });
+    answer();
+    return { ok: true };
+  }
+
+  const streaming = messages.some((m) => m.status === "streaming");
+
+  return (
+    <div className="mx-auto grid max-w-2xl gap-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Switch id="chat-demo-fail" label="Saves fail" checked={failSaves} onChange={(e) => setFailSaves(e.target.checked)} />
+        <Button variant="quiet" size="sm" onClick={() => setMessages([])}>
+          Show an empty thread
+        </Button>
+      </div>
+      <ChatThread
+        messages={messages}
+        onSend={send}
+        streaming={streaming}
+        onStop={stop}
+        onFeedback={feedback}
+        onEdit={edit}
+        onRegenerate={(m) => {
+          setMessages((all) => all.filter((x) => x.id !== m.id));
+          answer();
+        }}
+        header={{
+          title: "Pip",
+          status: { tone: "success", label: "Online · knows your orders and stock" },
+          avatar: { name: "Pip" },
+          actions: (
+            <Button variant="quiet" size="sm" icon="plus" onClick={() => setMessages([])}>
+              New chat
+            </Button>
+          ),
+          menu: [
+            { type: "checkbox", label: "Think before answering", checked: deep, onCheckedChange: setDeep },
+            { type: "separator" },
+            { label: "Clear this chat", icon: "trash", tone: "danger", onSelect: () => setMessages([]) },
+          ],
+        }}
+        suggestions={PLAN_SUGGESTIONS}
+        placeholder="Ask Pip about orders, stock or returns…"
+        emptyTitle="What should we look at?"
+        emptyBody="Pip reads your orders, stock and returns. Pick a question or ask your own."
+        label="Planning assistant"
+        height="min(40rem, 85dvh)"
+      />
+    </div>
+  );
+}
+
+// ——— Ask: the "ask anything" pill ———
+
+const ASK_CHIPS = [
+  { label: "Plan a spring sale", icon: "tag", prompt: "Plan a two-week spring sale for our ceramics: which products, what discount, and the emails to send." },
+  { label: "Write product copy", icon: "pencil", prompt: "Write a 60-word product description for the large stoneware bowl, warm and plain." },
+  { label: "Find slow sellers", icon: "trending-down", prompt: "Which products sold fewer than five units in the last 90 days?" },
+];
+
+function AskDemo() {
+  const [sent, setSent] = useState([]);
+  const [files, setFiles] = useState([]);
+  const [listening, setListening] = useState(false);
+  const [mode, setMode] = useState(null);
+  const later = useLater();
+
+  async function send(text, attached) {
+    await new Promise((r) => later(400, r));
+    if (/fail/i.test(text)) return { ok: false, error: "Could not reach the assistant. Your text is back in the box." };
+    setSent((all) => [{ id: Date.now(), text, files: attached.length, mode }, ...all].slice(0, 3));
+    setFiles([]);
+    return { ok: true };
+  }
+
+  return (
+    <div className="mx-auto grid w-full max-w-2xl gap-6 py-6 sm:py-10">
+      <h2 className="text-balance text-center text-2xl font-semibold tracking-tight sm:text-3xl">What should we work on today?</h2>
+      <Composer
+        shape="pill"
+        onSend={send}
+        placeholder={listening ? "Listening…" : "Ask anything"}
+        attachments={files}
+        onAttach={(picked) => setFiles((all) => [...all, ...picked.map((f, i) => ({ id: `${Date.now()}-${i}`, name: f.name, size: f.size, type: f.type }))])}
+        onRemoveAttachment={(f) => setFiles((all) => all.filter((x) => x.id !== f.id))}
+        menu={[
+          { label: "Research the web", icon: "globe", onSelect: () => setMode("research") },
+          { label: "Plan it step by step", icon: "list", onSelect: () => setMode("plan") },
+          { label: "Just answer", icon: "zap", onSelect: () => setMode(null) },
+        ]}
+        tools={<Toggle variant="quiet" icon="mic" label={listening ? "Stop listening" : "Speak"} pressed={listening} onPressedChange={setListening} className="rounded-full" />}
+        suggestions={ASK_CHIPS}
+        suggestionsLabel="Start from an idea"
+      />
+      <p className="text-center text-xs text-muted-foreground">
+        {mode ? `Mode: ${mode === "research" ? "research the web" : "plan step by step"} · ` : ""}Type a word with “fail” in it to see a send fail.
+      </p>
+      {sent.length ? (
+        <ul aria-label="Sent" className="grid gap-2 text-sm">
+          {sent.map((m) => (
+            <li key={m.id} className="rounded-md border border-border bg-card px-3 py-2">
+              <span className="text-muted-foreground">Sent{m.files ? ` with ${m.files} file${m.files === 1 ? "" : "s"}` : ""}: </span>
+              {m.text}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+// ——— Prompt: a box with tools and starter cards ———
+
+const MODELS = [
+  { value: "quick", label: "Quick", description: "Fast answers, short replies" },
+  { value: "balanced", label: "Balanced", description: "The everyday choice" },
+  { value: "deep", label: "Deep", description: "Slower, reads more, thinks longer" },
+];
+
+const STARTERS = [
+  { label: "Import a price list", description: "From a spreadsheet or a PDF", icon: "upload", prompt: "Import the attached price list and update our product prices." },
+  { label: "Build a customer list", description: "Everyone who ordered twice", icon: "users", prompt: "Build a list of customers who ordered at least twice this year." },
+  { label: "Draft the newsletter", description: "This month's news and offers", icon: "mail", prompt: "Draft this month's newsletter: new arrivals, the spring sale and a workshop date." },
+  { label: "Tidy the catalogue", description: "Missing photos and prices", icon: "package", prompt: "Find products that are missing a photo, a price or a description." },
+];
+
+function PromptDemo() {
+  const [model, setModel] = useState("balanced");
+  const [stream, setStream] = useState(true);
+  const [web, setWeb] = useState(false);
+  const [last, setLast] = useState(null);
+  const current = MODELS.find((m) => m.value === model) ?? MODELS[1];
+
+  return (
+    <div className="mx-auto grid w-full max-w-2xl gap-6 py-6">
+      <div className="grid gap-1 text-center">
+        <h2 className="text-balance text-2xl font-semibold tracking-tight">Describe it. We'll build it.</h2>
+        <p className="text-sm text-muted-foreground">Tell the assistant what you need, or start from one of these.</p>
+      </div>
+      <Composer
+        onSend={async (text) => {
+          setLast({ text, model: current.label, stream, web });
+          return { ok: true };
+        }}
+        placeholder="Ask anything"
+        hint={false}
+        onAttach={() => {}}
+        tools={
+          <>
+            <Menu
+              label={`Model: ${current.label}`}
+              align="start"
+              trigger={
+                <>
+                  <span>{current.label}</span>
+                  <Icon name="chevron-down" size={14} className="text-muted-foreground" />
+                </>
+              }
+              items={[{ type: "radio", value: model, onValueChange: setModel, options: MODELS }]}
+            />
+            <Menu
+              label="Settings"
+              align="start"
+              trigger={<Icon name="settings" />}
+              items={[
+                { type: "checkbox", label: "Stream the reply", checked: stream, onCheckedChange: setStream },
+                { type: "checkbox", label: "Search the web", checked: web, onCheckedChange: setWeb },
+              ]}
+            />
+          </>
+        }
+        suggestions={STARTERS}
+        suggestionsLook="cards"
+        suggestionsLabel="Starters"
+      />
+      {last ? (
+        <p className="rounded-md border border-border bg-card px-3 py-2 text-sm">
+          <span className="text-muted-foreground">
+            Sent to {last.model}
+            {last.web ? " · with web search" : ""}
+            {last.stream ? "" : " · no streaming"}:{" "}
+          </span>
+          {last.text}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+// ——— the switcher ———
+
+const VARIANTS = [
+  { value: "support", label: "Support" },
+  { value: "assistant", label: "Assistant" },
+  { value: "ask", label: "Ask" },
+  { value: "prompt", label: "Prompt" },
+];
+
+export default function ChatDemo() {
+  const [variant, setVariant] = useState("support");
+  return (
+    <div className="grid gap-4">
+      <ToggleGroup size="sm" aria-label="Variant" value={variant} onChange={setVariant} items={VARIANTS} className="max-w-full justify-self-start overflow-x-auto" />
+      {variant === "support" ? <SupportDemo /> : null}
+      {variant === "assistant" ? <AssistantDemo /> : null}
+      {variant === "ask" ? <AskDemo /> : null}
+      {variant === "prompt" ? <PromptDemo /> : null}
+    </div>
+  );
+}

package/registry/blocks/chat/header.jsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Avatar, Menu, StatusDot, cx } from "../../ui";
+
+// ChatHeader — the strip over a conversation: who you are talking to
+// (an avatar, a name, a line under it or a live status), then the
+// surface's own actions ("New chat") and a menu of the rest. ChatThread
+// draws it when given `header={{ title, … }}`; it is exported for a
+// thread you compose yourself.
+//
+//   <ChatHeader title="Ada" status={{ tone: "success", label: "Online" }}
+//               actions={<Button size="sm" variant="quiet" icon="plus" onClick={reset}>New chat</Button>} />
+
+export function ChatHeader({ title, subtitle, status, avatar, actions, menu, menuLabel = "Conversation options", className }) {
+  return (
+    <header className={cx("flex min-h-14 items-center gap-3 border-b border-border px-3 py-2 sm:px-4", className)}>
+      {avatar ? <Avatar name={avatar.name ?? title} src={avatar.src} size="sm" shape="square" status={avatar.status} /> : null}
+      <div className="min-w-0 flex-1">
+        {title ? <h2 className="truncate text-sm font-semibold leading-tight">{title}</h2> : null}
+        {status ? (
+          <StatusDot tone={status.tone} size="sm" pulse={status.pulse} label={status.label} className="max-w-full text-xs" />
+        ) : subtitle ? (
+          <p className="truncate text-xs text-muted-foreground">{subtitle}</p>
+        ) : null}
+      </div>
+      {actions || (menu && menu.length) ? (
+        <div className="flex shrink-0 items-center gap-1">
+          {actions}
+          <Menu items={menu} label={menuLabel} />
+        </div>
+      ) : null}
+    </header>
+  );
+}

package/registry/blocks/chat/index.js

@@ -0,0 +1,9 @@
+// The Chat block — `makersclaw add chat`. Fixed: compose it through its
+// props (README.md beside this file); a chat it cannot be is your own
+// component in components/, built from these parts.
+export { ChatThread } from "./chat";
+export { ChatHeader } from "./header";
+export { Message, Bubble } from "./message";
+export { Attachment } from "./attachment";
+export { MessageScroller } from "./scroller";
+export { Composer } from "./composer";