makersclaw 0.8.0 → 0.8.1

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

@@ -0,0 +1,134 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Icon, Input, cx } from "../../ui";
+
+// The agent's questions, as the desk's sidebar asks them (D27): every
+// question waiting is one form — its words, its options as chips, a box
+// for the member's own words where it welcomes them — and one submit
+// answers them all in a single resume, so an eight-question setup is one
+// form fill, not eight round trips. A lone question with options keeps the
+// old immediacy: a press on an option answers it.
+//
+// Fed by useAgentPane(): `questions` is chat.view.questions, `onSubmit` is
+// chat.answer({ answers }) → { ok } | { ok: false, error }. The door checks
+// each answer against the question as the session holds it.
+
+export function QuestionForm({ questions, onSubmit, className }) {
+  const [answers, setAnswers] = useState({});
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [sent, setSent] = useState(false);
+  if (!onSubmit || !questions?.length) return null;
+  const single = questions.length === 1;
+
+  const answered = (q) => {
+    const a = answers[q.id];
+    return Boolean(a?.optionId || a?.text?.trim());
+  };
+  const complete = questions.every(answered);
+  // A lone question that takes its options only is answered by a press on
+  // one; every other form has its submit.
+  const showSend = !single || questions[0].free !== false || !(questions[0].options?.length ?? 0);
+
+  async function send(list) {
+    if (busy || sent) return;
+    setBusy(true);
+    setError(null);
+    let r;
+    try {
+      r = await onSubmit(list);
+    } catch (e) {
+      r = { ok: false, error: e?.message ?? String(e) };
+    }
+    setBusy(false);
+    if (r && r.ok === false) setError(r.error || "That did not go through. Try again.");
+    else setSent(true);
+  }
+  const submit = () => {
+    if (!complete) return;
+    send(
+      questions.map((q) => {
+        const a = answers[q.id];
+        return a?.optionId ? { requestId: q.id, optionId: a.optionId } : { requestId: q.id, text: a?.text?.trim() ?? "" };
+      }),
+    );
+  };
+
+  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 (
+    <form
+      aria-label={single ? "A question for you" : `${questions.length} questions for you`}
+      className={cx("grid min-w-0 gap-3", className)}
+      onSubmit={(e) => {
+        e.preventDefault();
+        submit();
+      }}
+    >
+      {questions.map((q, index) => {
+        const a = answers[q.id];
+        const hasOptions = (q.options?.length ?? 0) > 0;
+        const free = q.free !== false || !hasOptions;
+        return (
+          <div key={q.id} className="grid min-w-0 gap-1.5">
+            <p className="flex min-w-0 items-start gap-2 text-sm font-medium">
+              {single ? null : (
+                <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] tabular-nums text-muted-foreground">{index + 1}</span>
+              )}
+              <span className="min-w-0 break-words">{q.prompt}</span>
+            </p>
+            {hasOptions ? (
+              <div className="flex min-w-0 flex-wrap gap-1.5">
+                {q.options.map((o) => (
+                  <Button
+                    key={o.id}
+                    size="sm"
+                    variant={a?.optionId === o.id ? "primary" : "secondary"}
+                    aria-pressed={a?.optionId === o.id}
+                    disabled={busy}
+                    onClick={() => {
+                      // A lone question with options answers on the spot.
+                      if (single) {
+                        send([{ requestId: q.id, optionId: o.id }]);
+                        return;
+                      }
+                      setAnswers((prev) => ({ ...prev, [q.id]: prev[q.id]?.optionId === o.id ? {} : { optionId: o.id } }));
+                    }}
+                  >
+                    {o.label}
+                  </Button>
+                ))}
+              </div>
+            ) : null}
+            {free ? (
+              <Input
+                aria-label={hasOptions ? `Or answer “${q.prompt}” in your own words` : `Answer “${q.prompt}”`}
+                placeholder={hasOptions ? "Or answer in your own words…" : "Your answer…"}
+                value={a?.text ?? ""}
+                disabled={busy}
+                onChange={(e) => setAnswers((prev) => ({ ...prev, [q.id]: e.target.value ? { text: e.target.value } : {} }))}
+                className="min-w-0"
+              />
+            ) : null}
+          </div>
+        );
+      })}
+      {showSend ? (
+        <Button size="sm" variant="primary" type="submit" loading={busy} disabled={!complete || busy} className="justify-self-start">
+          {single ? "Send answer" : "Send answers"}
+        </Button>
+      ) : null}
+      {error ? (
+        <p role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}

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

@@ -0,0 +1,268 @@
+"use client";
+
+import { Button, Icon, Spinner, cx } from "../../ui";
+import { Prose } from "./prose";
+import { WorkBlock } from "./work";
+
+// The cards of a turn, as the desk's sidebar draws them (D27): the plan
+// checklist, the one-line receipt an answered card shrinks to, the
+// "Needs your OK" note, an app it made, everything it made, a sign-in it
+// asks for. What each holds is decided by the platform (the rules the
+// sidebar runs) and arrives as data; these draw it.
+
+/* ---- the plan -------------------------------------------------------- */
+
+const PLAN_LABEL = { done: "Done", active: "Working on it", waiting: "Waiting for you", pending: "Not started", cancelled: "Dropped" };
+
+function PlanMark({ state }) {
+  const label = PLAN_LABEL[state] ?? "";
+  if (state === "done") return <Icon name="circle-check" size={14} className="shrink-0 text-success" label={label} />;
+  if (state === "active") return <Spinner size="sm" label={label} className="shrink-0 text-primary" />;
+  if (state === "waiting") return <Icon name="warning" size={14} className="shrink-0 text-warning" label={label} />;
+  if (state === "cancelled") return <Icon name="circle-x" size={14} className="shrink-0 text-muted-foreground" label={label} />;
+  return <Icon name="circle" size={14} className="shrink-0 text-muted-foreground" label={label} />;
+}
+
+function PlanCard({ items }) {
+  return (
+    <ol aria-label="The plan" className="grid min-w-0 divide-y divide-border overflow-hidden rounded-lg border border-border bg-card">
+      {items.map((item, i) => (
+        <li
+          key={`${i}-${item.text}`}
+          data-state={item.state}
+          className={cx("flex min-w-0 items-start gap-2 px-2.5 py-1.5 text-xs", item.state === "done" || item.state === "cancelled" ? "text-muted-foreground" : "text-foreground")}
+        >
+          <span className="mt-px">
+            <PlanMark state={item.state} />
+          </span>
+          <span className={cx("min-w-0 flex-1 break-words", item.state === "cancelled" && "line-through")}>{item.text}</span>
+          {item.state === "waiting" ? <span className="shrink-0 text-warning">Waiting for you</span> : null}
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+/* ---- decided cards, one line ------------------------------------------ */
+
+function Receipt({ block }) {
+  const clip = (s) => (s.length > 60 ? `${s.slice(0, 59)}…` : s);
+  const line =
+    block.decision === "approved"
+      ? `You approved · ${block.text}`
+      : block.decision === "declined"
+        ? `Not now · ${block.text}`
+        : block.prompt
+          ? `You answered “${clip(block.prompt)}” · ${block.text}`
+          : `You answered · ${block.text}`;
+  return (
+    <div role="status" data-decision={block.decision} className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+      <Icon name={block.decision === "declined" ? "x" : "check"} size={12} className="shrink-0" />
+      <span className="min-w-0 truncate" title={line}>
+        {line}
+      </span>
+    </div>
+  );
+}
+
+/** Parked tool approvals and the one ask, listed. Pressing happens in the
+ *  bar under the thread (the `approval` block) or on the desk. */
+function ApprovalNote({ block }) {
+  return (
+    <div role="group" aria-label="Needs your OK" className="grid min-w-0 gap-1 rounded-lg border border-warning/50 bg-card px-2.5 py-2 text-xs">
+      <span className="font-medium text-warning">Needs your OK</span>
+      <ul className="grid gap-0.5">
+        {block.items.map((item) => (
+          <li key={item.id} className="min-w-0 break-words">
+            {item.ask}
+            {item.grant ? <span className="block text-muted-foreground">{item.grant}</span> : null}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function RaisedNote({ block }) {
+  return (
+    <div className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+      <Icon name="warning" size={12} className="shrink-0 text-warning" />
+      <span className="min-w-0 truncate">{block.text} It waits on the desk.</span>
+    </div>
+  );
+}
+
+function Authorization({ block }) {
+  if (block.state === "completed") {
+    return (
+      <div role="status" className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+        <Icon name={block.outcome === "authorized" ? "check" : "x"} size={12} className="shrink-0" />
+        <span className="min-w-0 truncate">{block.outcome === "authorized" ? `Signed in to ${block.name}` : `The sign-in to ${block.name} didn’t finish`}</span>
+      </div>
+    );
+  }
+  return (
+    <div role="group" aria-label="Needs your OK" className="grid min-w-0 gap-2 rounded-lg border border-warning/50 bg-card px-2.5 py-2 text-xs">
+      <span className="font-medium text-warning">Needs you</span>
+      <span>Sign in to {block.name} so the agent can carry on.</span>
+      {block.url ? (
+        <a
+          href={block.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex w-fit items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-primary-foreground hover:opacity-90"
+        >
+          {block.instructions ?? "Sign in"}
+          {block.userCode ? ` (code: ${block.userCode})` : ""}
+        </a>
+      ) : null}
+    </div>
+  );
+}
+
+/* ---- what it made ------------------------------------------------------ */
+
+const APP_WORD = { building: "Being built", running: "Running", live: "Live", updated: "Updated", installed: "Installed" };
+
+function AppCard({ app, onOpen }) {
+  return (
+    <div data-app={app.key} className="flex min-w-0 items-center gap-2.5 rounded-lg border border-border bg-card px-3 py-2">
+      <Icon name="layers" size={18} className="shrink-0 text-muted-foreground" />
+      <div className="grid min-w-0 flex-1">
+        <b className="truncate text-sm">{app.name}</b>
+        <span className="text-xs text-muted-foreground">{APP_WORD[app.state] ?? app.state}</span>
+      </div>
+      {onOpen && app.id ? (
+        <Button size="sm" variant="secondary" onClick={() => onOpen({ kind: "app", id: app.id })}>
+          Open
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+function FileRow({ file, onOpen }) {
+  const body = (
+    <>
+      <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[10px] font-medium text-muted-foreground">{file.kind}</span>
+      <span className="min-w-0 flex-1 truncate" title={file.url ?? file.path}>
+        {file.name}
+      </span>
+      {file.meta ? <span className="shrink-0 text-muted-foreground">{file.meta}</span> : null}
+    </>
+  );
+  const cls = "flex w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-xs";
+  // An address opens in a tab; only http(s) is one.
+  if (file.where === "web" && file.url && /^https?:\/\//i.test(file.url))
+    return (
+      <a className={cx(cls, "hover:bg-muted")} href={file.url} target="_blank" rel="noopener noreferrer">
+        {body}
+      </a>
+    );
+  if (onOpen && (file.where === "workspace" || (file.where === "app" && file.appRef)))
+    return (
+      <button type="button" className={cx(cls, "hover:bg-muted")} onClick={() => onOpen({ kind: "file", path: file.path, where: file.where, appRef: file.appRef })}>
+        {body}
+      </button>
+    );
+  return <div className={cls}>{body}</div>;
+}
+
+function MadeList({ block, onOpen }) {
+  return (
+    <div className="grid min-w-0 gap-1.5">
+      <p className="text-sm">Here’s everything I made:</p>
+      <ul aria-label="Everything I made" className="grid min-w-0 divide-y divide-border overflow-hidden rounded-lg border border-border bg-card">
+        {block.apps.map((app) => (
+          <li key={`app-${app.key}`}>
+            <div className="flex min-w-0 items-center gap-2 px-2.5 py-1.5 text-xs">
+              <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[10px] font-medium text-muted-foreground">APP</span>
+              <span className="min-w-0 flex-1 truncate">{app.name}</span>
+              <span className="shrink-0 text-muted-foreground">{APP_WORD[app.state] ?? app.state}</span>
+              {onOpen && app.id ? (
+                <Button size="sm" variant="quiet" onClick={() => onOpen({ kind: "app", id: app.id })}>
+                  Open
+                </Button>
+              ) : null}
+            </div>
+          </li>
+        ))}
+        {block.files.map((file) => (
+          <li key={file.url ?? file.path}>
+            <FileRow file={file} onOpen={onOpen} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function AttachedFile({ block }) {
+  return (
+    <span className="inline-flex w-fit max-w-full min-w-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs">
+      <Icon name="paperclip" size={12} className="shrink-0 text-muted-foreground" />
+      <span className="min-w-0 truncate">{block.name}</span>
+    </span>
+  );
+}
+
+/* ---- the member's words ------------------------------------------------ */
+
+export function MemberWords({ children, files = [] }) {
+  return (
+    <div className="ml-auto grid max-w-[85%] min-w-0 gap-1.5 justify-items-end">
+      {files.map((f, i) => (
+        <span key={`${f.name}-${i}`} className="inline-flex max-w-full min-w-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs">
+          <Icon name="paperclip" size={12} className="shrink-0 text-muted-foreground" />
+          <span className="min-w-0 truncate">{f.name}</span>
+        </span>
+      ))}
+      {children ? <div className="min-w-0 whitespace-pre-wrap break-words rounded-[var(--radius)] bg-muted px-2.5 py-1.5">{children}</div> : null}
+    </div>
+  );
+}
+
+/* ---- a message ---------------------------------------------------------- */
+
+function Block({ block, live, load, onOpen, onOpenRequest }) {
+  switch (block.kind) {
+    case "text":
+      return <Prose text={block.streaming ? `${block.text}▍` : block.text} />;
+    case "plan":
+      return <PlanCard items={block.items} />;
+    case "work":
+      return <WorkBlock runs={block.runs} live={live} load={load} onOpenRequest={onOpenRequest} />;
+    case "approval":
+      return <ApprovalNote block={block} />;
+    case "receipt":
+      return <Receipt block={block} />;
+    case "raised":
+      return <RaisedNote block={block} />;
+    case "app":
+      // A card for an app only once it can be used; a building one waits.
+      return block.app.state === "building" ? null : <AppCard app={block.app} onOpen={onOpen} />;
+    case "made":
+      return <MadeList block={block} onOpen={onOpen} />;
+    case "file":
+      return <AttachedFile block={block} />;
+    case "authorization":
+      return <Authorization block={block} />;
+    default:
+      return null;
+  }
+}
+
+/** One message of the thread: the member's bubble, or the agent's blocks in order. */
+export function Message({ message, load, onOpen, onOpenRequest, mark }) {
+  if (message.role === "user") return <MemberWords files={message.files}>{message.text}</MemberWords>;
+  return (
+    <div data-role="assistant" className="flex min-w-0 items-start gap-2">
+      {mark ? <span className="mt-0.5 shrink-0">{mark}</span> : null}
+      <div className="grid min-w-0 flex-1 gap-2">
+        {message.blocks.map((block) => (
+          <Block key={block.key} block={block} live={message.live} load={load} onOpen={onOpen} onOpenRequest={onOpenRequest} />
+        ))}
+      </div>
+    </div>
+  );
+}