makersclaw 0.7.0 → 0.8.1

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

@@ -0,0 +1,244 @@
+"use client";
+
+import { Button, Icon, Notice, Spinner, cx } from "../../ui";
+import { ChatPane } from "../chat-pane";
+import { QuestionBox } from "../needs-you";
+import { Prose } from "./prose";
+import { QuestionForm } from "./questions";
+import { MemberWords, Message } from "./transcript";
+
+// AgentPane — the desk's agent sidebar, as the app's own pane (0.8.1, D27;
+// docs/AGENT-BLOCK-PLAN.md). The founder: "the inapp component is not on
+// par with the desk agent sidebar, in terms of tool calls, questions,
+// showing information". So this is the sidebar, drawn in the app's theme:
+// the member's words, the agent's text as it is written, the plan, the
+// work folded into "Worked through N steps" (each step opening to its
+// facts and what came back), helpers, several questions as one form, the
+// one ask's yes as the `approval` block's press, what it made, the past
+// chats and New chat, Stop.
+//
+//   const chat = useAgentPane({ row: { kind: "person", id, name } });
+//   <AgentPane chat={chat} title={`Ask about ${name}`} suggestions={[…]} />
+//
+// It draws the object useAgentPane() returns (lib/hooks.js) and decides
+// nothing: which lines there are and what they say is the platform's (the
+// same rules the sidebar runs), sent as data. It is the SAME conversation
+// the desk's sidebar shows: one session, two views. An app that places it
+// says so in its package (`"agent_pane": true` in the blueprint), and the
+// desk then draws no sidebar for the app's window.
+//
+// The frame around the lines (the head with New chat and Chats, the empty
+// state, the scroll, the desk's composer with + and the round send, a
+// starting line from the dock) is the `chat-pane` block (X5); this file is
+// what the AGENT puts in it: the lines above, and the bar of what waits.
+//
+// What waits on the member is settled here, where it was asked. The
+// agent's QUESTIONS are answered in place (`chat.answer`); its YES is the
+// `approval` block's press frame, handed in as `yes` — this pane never
+// draws an Approve of its own. A sign-in, money, or a tool approval says
+// so and opens 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";
+}
+
+/** A claw from before the sidebar's view sends only the small turns: the
+ *  member's words, the agent's text, one line per step. Drawn plainly. */
+function LegacyTurn({ turn }) {
+  return (
+    <div className="grid min-w-0 gap-2">
+      {turn.member ? <MemberWords>{turn.member}</MemberWords> : null}
+      {(turn.parts ?? []).map((p, i) =>
+        p.type === "step" ? (
+          <p key={i} className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+            {p.status === "running" ? <Spinner size="sm" label="Working" /> : <Icon name={p.status === "failed" ? "warning" : "check"} size={12} className="shrink-0" />}
+            <span className="min-w-0 truncate">{p.label}</span>
+          </p>
+        ) : p.text?.trim() ? (
+          <Prose key={i} text={p.text} />
+        ) : null,
+      )}
+      {turn.writing ? <Prose text={`${turn.writing}▍`} /> : null}
+    </div>
+  );
+}
+
+/**
+ *   chat         what useAgentPane() 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
+ *   hint         a quiet line under the box
+ *   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).
+ *                Without it that yes opens the desk
+ *   mark         a node before the agent's turns (the app's mark), or none
+ *   onOpen       ({ kind: "app", id } | { kind: "file", path, where, appRef })
+ *                the "Open" of something it made. Default: `chat.open`
+ *                (the desk opens it); with neither there is no Open
+ *   onClose      a close in the head (a panel beside a record). Inside an
+ *                AgentDock it is the dock's own, unless this is given
+ *   recent       past chats listed before the first ask (default 5; 0
+ *                draws none)
+ *   bare         no head (inside a Sheet or a Card that has its own)
+ *   fill         take the height of its container (default). false: a
+ *                compact pane whose thread scrolls inside a capped height
+ *   className    layout around it. Never colour.
+ */
+export function AgentPane({
+  chat,
+  title = "Ask the agent",
+  suggestions = [],
+  empty,
+  placeholder,
+  hint,
+  yes,
+  mark,
+  onOpen,
+  onClose,
+  recent = 5,
+  bare = false,
+  fill = true,
+  className,
+}) {
+  const view = chat?.view ?? null;
+  const legacy = !view ? (chat?.turns ?? []) : [];
+  const messages = view?.messages ?? [];
+  const pending = chat?.pending && !messages.some((m) => m.role === "user" && m.text === chat.pending) && !legacy.some((t) => t.member === chat.pending) ? chat.pending : null;
+  const needs = chat?.state === "needs_you" ? (chat.needs ?? { kind: "other", text: "" }) : null;
+  const live = chat?.state === "working" || chat?.state === "queued" || Boolean(pending);
+  const started = messages.length > 0 || legacy.length > 0 || Boolean(pending);
+  const inMakersclaw = chat?.place === "makersclaw";
+  const questions = view?.questions ?? [];
+  const result = chat?.request?.status === "done" ? chat.request?.result?.sentence : null;
+  // The thinking row: the turn runs and nothing visibly grows yet (the
+  // platform says when, in the view); words just sent wait for their turn.
+  const lastLegacy = legacy[legacy.length - 1];
+  const starting = Boolean(pending) && !messages.some((m) => m.role === "assistant" && m.live);
+  const thinking =
+    !needs && !inMakersclaw && (pending ? true : view ? view.thinking : live && !(lastLegacy?.writing || lastLegacy?.parts?.length));
+
+  const openThing = onOpen ?? (typeof chat?.open === "function" ? chat.open : undefined);
+  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;
+  const closedWords = needs ? (answerHere ? "Answer above first" : pressHere ? "Say yes above first" : "Answer on the desk first") : "This ask is in Makersclaw";
+
+  // What sits between the lines and the box: what waits on the member, or
+  // that the agent works (its Stop is the box's, in the arrow's place), or
+  // how the ask ended.
+  const bar =
+    needs && pressHere ? (
+      <div className="max-h-[70%] shrink-0 overflow-y-auto border-t border-border p-2.5">{yes}</div>
+    ) : needs ? (
+      <div className="max-h-[70%] shrink-0 overflow-y-auto 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">
+                {answerHere && questions.length > 1 ? `${questions.length} questions for you` : needsTitle(needs.kind, answerHere ? "answer" : needs.in_app)}
+              </span>
+              {needs.text && !(answerHere && questions.length > 0) ? (
+                <span className={cx("break-words text-muted-foreground", !answerHere && "line-clamp-3")}>{needs.text}</span>
+              ) : null}
+            </div>
+          </div>
+          {answerHere && questions.length > 0 ? (
+            <QuestionForm key={needs.at ?? "q"} questions={questions} onSubmit={(answers) => chat.answer({ answers })} />
+          ) : answerHere ? (
+            <QuestionBox key={needs.at ?? "q"} 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>
+      </div>
+    ) : result ? (
+      <p className="flex shrink-0 items-start gap-2 border-t border-border px-3.5 py-1.5 text-xs text-muted-foreground">
+        <Icon name="circle-check" size={14} className="mt-px shrink-0 text-success" />
+        <span className="min-w-0 break-words">{result}</span>
+      </p>
+    ) : null;
+
+  return (
+    <ChatPane
+      chat={chat}
+      title={title}
+      suggestions={suggestions}
+      empty={empty}
+      placeholder={placeholder}
+      closedWords={closedWords}
+      hint={hint}
+      recent={recent}
+      bare={bare}
+      fill={fill}
+      onClose={onClose}
+      started={started || inMakersclaw}
+      busy={live && !inMakersclaw}
+      blocked={blocked}
+      bar={bar}
+      className={className}
+    >
+      {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>
+      ) : (
+        <>
+          {messages.map((m) => (
+            <Message key={m.id} message={m} load={chat.callDetail} onOpen={openThing} onOpenRequest={chat.openRequest} mark={mark} />
+          ))}
+          {legacy.map((t) => (
+            <LegacyTurn key={t.id} turn={t} />
+          ))}
+          {pending ? <MemberWords>{pending}</MemberWords> : null}
+          {thinking ? (
+            <div role="status" className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Spinner size="sm" label="Thinking" /> {starting ? "Starting…" : "Thinking…"}
+            </div>
+          ) : null}
+          {!live && view?.failure ? (
+            <p role="alert" className="text-xs text-destructive">
+              {view.failure.kind === "stopped" ? (
+                <>
+                  <b>You stopped it.</b> <span className="text-muted-foreground">Send a message to carry on.</span>
+                </>
+              ) : (
+                <>
+                  <b>It stopped before finishing.</b> {view.failure.words} <span className="text-muted-foreground">Send a message to carry on.</span>
+                </>
+              )}
+            </p>
+          ) : null}
+        </>
+      )}
+    </ChatPane>
+  );
+}

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

@@ -0,0 +1,41 @@
+{
+  "name": "agent-pane",
+  "title": "AgentPane",
+  "description": "The desk's agent sidebar, as the app's own pane, in the app's theme (D27): the member's words, the agent's text as it is written, the plan, the work folded into \"Worked through N steps\" with each step opening to its facts and what came back, reads folded, retries a later call fixed, helpers, the agent's questions as one form, the one ask's yes as the `approval` block's press, what it made, the past chats with a dot on those that need you, New chat and Stop; and the desk's message box (the chat-pane block's: the words on top, + to attach and a round send under them, a stop in its place while a turn runs), files to send with the words and dictation in the box; a tool's yes pressed in place; the thread streamed as the agent writes; Open under an app or file it made. It draws what useAgentPane() returns (lib/hooks.js): the same conversation and the same rules the desk's sidebar runs, one session, two views. The app places it and chooses where; the platform supplies what it shows.",
+  "useWhen": "The app should hold its conversation with its agent at the level of the desk's sidebar: an Ask panel beside a record, a sheet behind an Ask button, an inspector on a home screen. It replaces agent-chat. Place it and set \"agent_pane\": true in the package's blueprint, so the desk draws no sidebar for the app's window. For work the founder commissions from a verb and watches land, use job-panel.",
+  "tags": [
+    "chat",
+    "ask",
+    "assistant",
+    "conversation",
+    "thread",
+    "sidebar",
+    "tool calls",
+    "steps",
+    "plan",
+    "questions",
+    "stop",
+    "ai",
+    "copilot",
+    "inspector",
+    "record"
+  ],
+  "exports": [
+    "AgentPane",
+    "AgentDockContext"
+  ],
+  "files": [
+    "index.js",
+    "dock-context.js",
+    "agent-pane.jsx",
+    "transcript.jsx",
+    "work.jsx",
+    "prose.jsx",
+    "questions.jsx",
+    "composer.jsx"
+  ],
+  "requires": [
+    "needs-you",
+    "chat-pane"
+  ]
+}

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

@@ -0,0 +1,6 @@
+"use client";
+
+// The pane's composer parts — files to send with the words, and dictation —
+// are the chat-pane block's now (X5): the composer is the desk's box, and
+// this file keeps the names agent-pane has always exported.
+export { MAX_BYTES, MAX_FILES, addFiles, filesFromTransfer, formatBytes, readFile, useDictation } from "../chat-pane";

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

@@ -0,0 +1,233 @@
+"use client";
+
+// AgentPane driven by a pretend thread — the gallery's and the smoke test's
+// surface. Not installed into apps. The left pane opens on a finished turn
+// that shows what the desk's sidebar shows: a plan, the work folded into
+// one line (open it: reads folded, a failure a later step fixed, a search),
+// a step that opens to its facts, a helpers card, an app it made. The
+// right pane is live: ask anything and it works a few steps and writes;
+// "questions" stops on a form of two questions; "send them" stops for a
+// yes. Chats lists two past chats; New chat clears this one.
+import { useEffect, useRef, useState } from "react";
+import { AgentPane } from "../components/blocks/agent-pane";
+
+const call = (id, tag, line, status = "done", extra = {}) => ({ kind: "call", id, tag, line, status, reason: null, saysFailure: false, openRequest: null, ...extra });
+
+const FINISHED = {
+  messages: [
+    { id: "m1", role: "user", text: "Find restaurant groups in New England with 10 or more sites and add them to a list.", files: [] },
+    {
+      id: "m2",
+      role: "assistant",
+      live: false,
+      blocks: [
+        { kind: "text", key: "t0", text: "On it. Here is the plan.", streaming: false },
+        {
+          kind: "plan",
+          key: "plan",
+          items: [
+            { text: "Find the groups", state: "done" },
+            { text: "Check their site counts", state: "done" },
+            { text: "Add them to a list", state: "done" },
+          ],
+        },
+        {
+          kind: "work",
+          key: "w0",
+          runs: [
+            {
+              kind: "fold",
+              id: "fold-1",
+              summary: { steps: 9, failed: 0, running: false, stopped: false, latest: "Added 14 people to the list" },
+              rows: [
+                { kind: "reads", id: "reads-1", tag: "READ", label: "Read 3 files", status: "done", calls: [call("r1", "FILES", "Read story.md"), call("r2", "FILES", "Read lists.md"), call("r3", "FILES", "Read people.md")] },
+                call("s1", "WEB", "Searched the web for “restaurant groups New England 10+ sites”"),
+                { kind: "fixed", id: "fixed-1", fixes: [{ id: "f1", what: "Couldn’t read the old list", reason: "that file isn’t there", then: "worked after a change" }] },
+                { kind: "repeat", id: "rep-1", tag: "DATA", line: "Checked a group’s site count", count: 5, status: "done", reason: null, saysFailure: false, calls: [call("c1", "DATA", "Checked a group’s site count"), call("c2", "DATA", "Checked a group’s site count")] },
+                call("a1", "DATA", "Added 14 people to the list"),
+              ],
+            },
+          ],
+        },
+        { kind: "text", key: "t1", text: "Done. I added **14 groups** with 10 or more sites to the list *New England groups*:\n\n- Tavolo Hospitality — 22 sites\n- Harbor & Co — 15 sites\n- Pine Street Group — 11 sites\n\nWant me to find who to write to at each?", streaming: false },
+        { kind: "receipt", key: "rc", decision: "answered", text: "New England", prompt: "Which region first?", requestId: "q0" },
+        { kind: "made", key: "made", apps: [], files: [{ path: "reports/new-england.csv", name: "new-england.csv", kind: "CSV", meta: "14 rows", where: "workspace", appRef: null, url: null }] },
+      ],
+    },
+  ],
+  thinking: false,
+  failure: null,
+  questions: [],
+};
+
+const DETAIL = {
+  s1: { id: "s1", line: "Searched the web", status: "done", reason: null, said: null, facts: [{ label: "Searched for", value: "restaurant groups New England 10+ sites" }, { label: "Results", value: "8 pages" }], code: null, result: "Tavolo Hospitality — 22 sites\nHarbor & Co — 15 sites\nPine Street Group — 11 sites" },
+  r1: { id: "r1", line: "Read story.md", status: "done", reason: null, said: null, facts: [{ label: "File", value: "story.md" }, { label: "Size", value: "2 KB" }], code: null, result: null },
+  a1: { id: "a1", line: "Added 14 people to the list", status: "done", reason: null, said: null, facts: [{ label: "List", value: "New England groups" }], code: { label: "Statement", text: "add 14 people to the list New England groups, one row each" }, result: "14 rows written" },
+};
+const load = (id) => new Promise((resolve) => setTimeout(() => resolve({ ok: true, data: { ok: true, call: DETAIL[id] ?? { id, line: "", status: "done", reason: null, said: null, facts: [], code: null, result: null } } }), 350));
+
+const CHATS = {
+  items: [
+    { sessionId: "past-1", requestId: "q1", title: "Reach 50 investors", mark: "needs", at: new Date(Date.now() - 20 * 60 * 1000).toISOString() },
+    { sessionId: "past-2", requestId: "q2", title: "Weekly pipeline read", mark: null, at: new Date(Date.now() - 3 * 3600 * 1000).toISOString() },
+  ],
+  loading: false,
+  error: null,
+  unavailable: false,
+};
+
+function usePretendPane() {
+  const [view, setView] = useState({ messages: [], thinking: false, failure: null, questions: [] });
+  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) => setView((v) => ({ ...v, messages: v.messages.map((m, i) => (i === v.messages.length - 1 ? fn(m) : m)) }));
+
+  const send = (text) => {
+    const id = `m${Date.now()}`;
+    setState("working");
+    setNeeds(null);
+    setView((v) => ({
+      ...v,
+      thinking: true,
+      messages: [...v.messages, { id: `${id}u`, role: "user", text, files: [] }],
+    }));
+    const work = (rows, summary) => ({ kind: "work", key: "w", runs: [{ kind: "fold", id: "f", summary, rows }] });
+    later(500, () =>
+      setView((v) => ({
+        ...v,
+        thinking: false,
+        messages: [...v.messages, { id: `${id}a`, role: "assistant", live: true, blocks: [work([call("x1", "FILES", "Reading the people", "running")], { steps: 1, failed: 0, running: true, stopped: false, latest: "Reading the people" })] }],
+      })),
+    );
+    later(1300, () =>
+      patchLast((m) => ({
+        ...m,
+        blocks: [work([call("x1", "FILES", "Read the people"), call("x2", "WEB", "Searching the web", "running")], { steps: 2, failed: 0, running: true, stopped: false, latest: "Searching the web" })],
+      })),
+    );
+    if (/question/i.test(text)) {
+      later(2100, () => {
+        patchLast((m) => ({ ...m, blocks: [work([call("x1", "FILES", "Read the people"), call("x2", "WEB", "Searched the web")], { steps: 2, failed: 0, running: false, stopped: false, latest: null })] }));
+        setState("needs_you");
+        setNeeds({ kind: "question", in_app: "answer", text: "Two questions", at: "q" });
+        setView((v) => ({
+          ...v,
+          questions: [
+            { id: "qa", prompt: "Which list should I start with?", options: [{ id: "warm", label: "Warm leads" }, { id: "cold", label: "Cold" }], free: true },
+            { id: "qb", prompt: "Which day should the read go out?", options: [{ id: "mon", label: "Monday" }, { id: "fri", label: "Friday" }], free: false },
+          ],
+        }));
+      });
+      return;
+    }
+    if (/send/i.test(text)) {
+      later(2100, () => {
+        patchLast((m) => ({ ...m, live: false, blocks: [work([call("x1", "FILES", "Read the people"), call("x2", "WEB", "Searched the web")], { steps: 2, failed: 0, running: false, stopped: false, latest: null })] }));
+        setState("needs_you");
+        setNeeds({ kind: "yes", in_app: null, text: "Send 12 follow-ups from ada@acme.com?" });
+      });
+      return;
+    }
+    const reply = "I found **12 investors** who back seed-stage fintech.\n\nWant me to draft a first note to each?";
+    later(2000, () =>
+      patchLast((m) => ({
+        ...m,
+        live: false,
+        blocks: [
+          work([call("x1", "FILES", "Read the people"), call("x2", "WEB", "Searched the web")], { steps: 2, failed: 0, running: false, stopped: false, latest: null }),
+          { kind: "text", key: "tx", text: reply, streaming: false },
+        ],
+      })),
+    );
+    later(2100, () => setState("done"));
+  };
+
+  return {
+    sessionId: view.messages.length ? "demo" : null,
+    state,
+    needs,
+    turns: [],
+    view,
+    place: "app",
+    request: view.messages.length ? { id: "demo-request", title: "Investors" } : null,
+    pending: null,
+    sending: false,
+    loading: false,
+    error: null,
+    unavailable: false,
+    chats: CHATS,
+    send,
+    answer: async () => {
+      setNeeds(null);
+      setView((v) => ({ ...v, questions: [] }));
+      setState("working");
+      later(900, () => {
+        patchLast((m) => ({ ...m, blocks: [...m.blocks, { kind: "text", key: "ty", text: "Thanks — starting with warm leads on Mondays.", streaming: false }] }));
+        setState("done");
+      });
+      return { ok: true };
+    },
+    stop: () => {
+      timers.current.forEach(clearTimeout);
+      setState("stopped");
+      setView((v) => ({ ...v, thinking: false, failure: { kind: "stopped", words: "" } }));
+    },
+    openOnDesk: () => true,
+    openRequest: () => true,
+    openSession: () => undefined,
+    callDetail: load,
+    newChat: () => {
+      setView({ messages: [], thinking: false, failure: null, questions: [] });
+      setState(null);
+      setNeeds(null);
+    },
+    reload: () => undefined,
+  };
+}
+
+export default function AgentPaneDemo() {
+  const live = usePretendPane();
+  const finished = {
+    sessionId: "done",
+    state: "done",
+    needs: null,
+    turns: [],
+    view: FINISHED,
+    place: "app",
+    request: { id: "r", title: "New England groups", status: "done", result: { sentence: "14 groups are on the list New England groups." } },
+    pending: null,
+    sending: false,
+    loading: false,
+    error: null,
+    unavailable: false,
+    chats: CHATS,
+    send: () => undefined,
+    answer: async () => ({ ok: true }),
+    stop: () => undefined,
+    openOnDesk: () => true,
+    openRequest: () => true,
+    openSession: () => undefined,
+    callDetail: load,
+    newChat: () => undefined,
+    reload: () => undefined,
+  };
+  return (
+    <div className="grid gap-6 p-6 lg:grid-cols-2">
+      <div className="h-[640px] min-w-0 overflow-hidden rounded-lg border border-border">
+        <AgentPane chat={finished} title="Ask about Pinewood" onOpen={() => undefined} />
+      </div>
+      <div className="h-[640px] min-w-0 overflow-hidden rounded-lg border border-border">
+        <AgentPane
+          chat={live}
+          title="Ask the agent"
+          empty="The agent reads the whole app."
+          suggestions={["Who should we follow up with?", "Two questions first", "Send them a note"]}
+        />
+      </div>
+    </div>
+  );
+}

package/registry/blocks/agent-pane/dock-context.js

@@ -0,0 +1,10 @@
+"use client";
+
+// What an AgentPane placed inside an AgentDock (blocks/agent-dock) is told:
+// `close` folds the dock (the head's close, when the app gave no onClose of
+// its own), `mode` is "column" or "sheet", and `start` is the starting line
+// a "have the agent do it" button asked for (openAgent). Null outside a
+// dock, where nothing changes. It is the chat-pane block's context under
+// the name the dock and the apps have always used (X5: the pane's frame
+// moved to chat-pane, and the context with it).
+export { ChatDockContext as AgentDockContext } from "../chat-pane";

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

@@ -0,0 +1,4 @@
+// The AgentPane block — `makersclaw add agent-pane`. Fixed: compose it
+// through its props (README.md beside this file).
+export { AgentPane } from "./agent-pane";
+export { AgentDockContext } from "./dock-context";

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { Fragment } from "react";
+import { cx } from "../../ui";
+
+// The agent's text: plain words with the markdown agents write —
+// paragraphs, lists, headings, fenced code, **bold**, `code`, [links](https://…).
+// React nodes only, never HTML. A link opens in a new tab, and only an
+// http(s) address is a link.
+
+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, lists and fenced code from the agent's text. */
+export function Prose({ text, className }) {
+  // Fenced code first: it may hold blank lines.
+  const parts = String(text ?? "").replace(/\r/g, "").split(/^```[^\n]*\n([\s\S]*?)^```[ \t]*$/m);
+  return (
+    <div className={cx("grid min-w-0 gap-2 break-words", className)}>
+      {parts.map((part, p) => {
+        if (p % 2 === 1)
+          return (
+            <pre key={p} className="max-h-72 overflow-auto rounded-md bg-muted p-2.5 font-mono text-xs leading-relaxed whitespace-pre-wrap break-words">
+              {part.replace(/\n$/, "")}
+            </pre>
+          );
+        return part
+          .split(/\n{2,}/)
+          .map((block, b) => {
+            const lines = block.split("\n").filter((l) => l.trim());
+            if (!lines.length) return null;
+            const key = `${p}-${b}`;
+            if (lines.every((l) => LIST_ITEM.test(l))) {
+              const ordered = /^\s*\d/.test(lines[0]);
+              const List = ordered ? "ol" : "ul";
+              return (
+                <List key={key} className={cx("grid gap-1 pl-5", ordered ? "list-decimal" : "list-disc")}>
+                  {lines.map((l, j) => (
+                    <li key={j}>{inline(l.replace(LIST_ITEM, ""), `${key}-${j}`)}</li>
+                  ))}
+                </List>
+              );
+            }
+            return (
+              <p key={key} 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+/, ""), `${key}-${j}`)}</strong> : inline(l, `${key}-${j}`)}
+                  </Fragment>
+                ))}
+              </p>
+            );
+          });
+      })}
+    </div>
+  );
+}