makersclaw 0.7.0 → 0.8.1

package/registry/blocks/agent-column/receipt.jsx

@@ -0,0 +1,483 @@
+"use client";
+
+import { useId, useState } from "react";
+import { Button, Input, cx } from "../../ui";
+import { AgentMark } from "../agent-marks";
+import { CONFIDENCE, answerState, decidingWords, shortUrl } from "./model";
+
+// The receipt: an answer as a claim with its citation (grown in Data
+// Enrichment 0.5.0, the v2 design's signature). In a dense grid the
+// answer shrinks to one line, its value and its trust as a mark and a
+// word (AnswerLine, TrustMark); opened, it is drawn big: the value, how
+// sure, and each source as a clipping (the page's title, its address and
+// date, and the words on it with the deciding ones underlined). Two
+// answers are two clippings to pick from; "not found" is a receipt too,
+// every page the agent tried crossed off. And a column's heading as a job
+// (JobHeader): its name, how far it got, what a row costs, its menu.
+//
+// Every state is a shape and a word, never colour alone. Colours are the
+// theme's slots: chart-1 sure, chart-2 likely, chart-3 guess, chart-4
+// sent, chart-5 typed by a person, success a person's check, warning
+// two answers or a flag, info looking up, destructive failed; the rest
+// muted. Props in, callbacks out. Tokens only.
+
+/* ------------------------------ the marks ------------------------------ */
+
+// The agent's mark is the platform's one (the agent-marks block): a
+// filled diamond. Re-exported so a screen that took AgentMark from here
+// keeps it.
+export { AgentMark };
+
+const Dot = ({ kind }) =>
+  kind === "sure" ? (
+    <span aria-hidden="true" className="inline-block size-2 shrink-0 rounded-full bg-current" />
+  ) : kind === "likely" ? (
+    <span aria-hidden="true" className="relative inline-block size-2 shrink-0 overflow-hidden rounded-full border-[1.5px] border-current">
+      <span className="absolute inset-y-0 left-0 w-1/2 bg-current" />
+    </span>
+  ) : kind === "guess" ? (
+    <span aria-hidden="true" className="inline-block size-[9px] shrink-0 rounded-full border-[1.5px] border-dashed border-current" />
+  ) : kind === "two" ? (
+    <span aria-hidden="true" className="relative inline-block size-[9px] shrink-0 border-[1.5px] border-current">
+      <span className="absolute inset-y-0 left-1/2 w-[1.5px] -translate-x-1/2 bg-current" />
+    </span>
+  ) : kind === "wait" ? (
+    <span aria-hidden="true" className="inline-block size-2 shrink-0 rounded-full border-[1.5px] border-current border-t-transparent" />
+  ) : kind === "none" ? (
+    <span aria-hidden="true" className="relative inline-block size-[9px] shrink-0 overflow-hidden rounded-full border-[1.5px] border-current">
+      <span className="absolute left-1/2 top-[-2px] h-[13px] w-[1.5px] -translate-x-1/2 rotate-45 bg-current" />
+    </span>
+  ) : kind === "looking" ? (
+    <span aria-hidden="true" className="relative inline-block h-[3px] w-[18px] shrink-0 overflow-hidden rounded-full border border-current">
+      <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse bg-current motion-reduce:animate-none" />
+    </span>
+  ) : kind === "failed" ? (
+    <span aria-hidden="true" className="text-[10px] leading-none">▲</span>
+  ) : kind === "typed" ? (
+    <span aria-hidden="true" className="text-[11px] leading-none">✎</span>
+  ) : kind === "sent" ? (
+    <span aria-hidden="true" className="text-[11px] leading-none">↗</span>
+  ) : kind === "stale" ? (
+    <span aria-hidden="true" className="text-[11px] leading-none">↻</span>
+  ) : null;
+
+const TONE = {
+  sure: "text-chart-1",
+  likely: "text-chart-2",
+  guess: "text-chart-3",
+  two: "text-warning",
+  warn: "text-warning",
+  looking: "text-info",
+  failed: "text-destructive",
+  typed: "text-chart-5",
+  sent: "text-chart-4",
+  ok: "text-success",
+  quiet: "text-muted-foreground",
+};
+
+/**
+ * A trust mark and its word, in the state's tone: sure ●, likely ◐,
+ * guess ◌ (never shown as verified), two answers ▣, looking up ▬, waits
+ * ◔, not found ⊘, failed ▲, typed ✎, sent ↗, out of date ↻.
+ *
+ *   kind   sure · likely · guess · two · warn · looking · wait · none ·
+ *          failed · typed · sent · stale · quiet
+ *   word   the word beside it ("" for the mark alone, which still names
+ *          itself to a screen reader)
+ *   check  a person's tick after it
+ */
+export function TrustMark({ kind, word, check = false, className }) {
+  const glyph = { warn: "two", quiet: null }[kind] ?? kind;
+  const tone = TONE[kind] ?? TONE.quiet;
+  const said = word ?? CONFIDENCE[kind]?.label ?? "";
+  const aria = [said || CONFIDENCE[kind]?.label || kind, check ? "checked" : ""].filter(Boolean).join(", ");
+  return (
+    <span className={cx("relative inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[11px]", tone, className)}>
+      {glyph ? <Dot kind={glyph === "wait" || glyph === "none" ? glyph : glyph} /> : null}
+      {said ? <span>{said}</span> : <span className="sr-only">{aria}</span>}
+      {check ? (
+        <span className="text-[11px] font-bold text-success" aria-label="checked">
+          ✓
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+const sureKind = (c) => (c === "sure" || c === "likely" || c === "guess" ? c : "quiet");
+
+/* ------------------------------ the line ------------------------------ */
+
+/**
+ * One answer on one line, as a dense grid draws it: the value at the
+ * start, its trust at the end (a person's check after it); a state with
+ * no value says the state in words.
+ *
+ *   answer    the answer (model.js), or null for not asked yet
+ *   type      text · link · email · number · domain
+ *   onRetry   a failed answer's "Try again"
+ *   queuedWord  what a queued answer says ("queued", "back in the queue")
+ */
+export function AnswerLine({ answer, onRetry, queuedWord = "queued", className }) {
+  const st = answerState(answer);
+  const a = answer ?? {};
+  const value = (v, struck) => <span className={cx("min-w-0 flex-[0_1_auto] truncate", struck && "text-muted-foreground line-through decoration-muted-foreground")}>{v}</span>;
+  const row = (children) => <span className={cx("flex w-full min-w-0 items-center gap-1.5", className)}>{children}</span>;
+  const end = (node) => <span className="ml-auto flex shrink-0 items-center gap-1">{node}</span>;
+  switch (st) {
+    case "empty":
+      return row(<span className="text-input">—</span>);
+    case "queued":
+      return row(<TrustMark kind="quiet" word={a.value ? `${queuedWord} · ${a.value}` : queuedWord} />);
+    case "waiting":
+      return row(<TrustMark kind="wait" word={a.waitsFor?.length ? `waits for ${a.waitsFor.join(", ")}` : "waits for the row"} className="text-muted-foreground" />);
+    case "blocked":
+      return row(<TrustMark kind="wait" word={`can't fill · needs ${(a.blockedBy ?? []).join(" and ")}`} className="text-muted-foreground" />);
+    case "working":
+      return row(<TrustMark kind="looking" word={a.value ? "writing" : a.looking ? `looking up · ${a.looking}` : "looking up"} className="min-w-0 truncate" />);
+    case "not_found":
+      return row(<TrustMark kind="none" word={a.checked ? "not found, kept empty" : "not found"} check={a.checked} className="text-muted-foreground" />);
+    case "failed":
+      return row(
+        <>
+          <TrustMark kind="failed" word={`failed${a.detail || a.note ? ` · ${a.detail || a.note}` : ""}`} className="min-w-0 truncate" />
+          {onRetry ? (
+            <span className="ml-auto shrink-0">
+              <Button variant="link" size="inherit" onClick={(e) => (e.stopPropagation(), onRetry())} className="text-xs">
+                Try again
+              </Button>
+            </span>
+          ) : null}
+        </>,
+      );
+    case "two_answers":
+      return row(
+        <>
+          {value(`${a.value} · ${a.other?.value ?? ""}`)}
+          {end(<TrustMark kind="two" word="2 answers" />)}
+        </>,
+      );
+    case "stale":
+      return row(
+        <>
+          {value(a.value, true)}
+          {end(<TrustMark kind="stale" word="out of date" className="text-muted-foreground" />)}
+        </>,
+      );
+    case "typed":
+      return row(
+        <>
+          {value(a.value)}
+          {end(<TrustMark kind="typed" word="typed" />)}
+        </>,
+      );
+    default: {
+      if (a.flag && !a.checked) return row(<TrustMark kind="warn" word={a.flag === "left" ? `${a.value}${a.movedTo ? ` · ${a.movedTo}` : ""}` : `${a.value ?? ""}${a.flag === "may_not_fit" ? ": may not fit" : ""}`} className="min-w-0 truncate" />);
+      const checked = st === "checked";
+      const kind = sureKind(a.confidence);
+      return row(
+        <>
+          {value(a.value)}
+          {end(<TrustMark kind={kind} word={checked && kind !== "guess" ? "" : CONFIDENCE[kind]?.label ?? ""} check={checked} />)}
+        </>,
+      );
+    }
+  }
+}
+
+/* ------------------------------ the heading ------------------------------ */
+
+/**
+ * A column's heading as a job: the agent's mark and its name, its menu,
+ * then a bar of how far it got, the words ("138 of 480 · 2 to check")
+ * and what a row costs. A person's own column says where it came from.
+ *
+ *   name      "Headcount"
+ *   agent     false: a person's own column
+ *   source    for a person's column, the line under its name ("yours ·
+ *             summit-leads.csv"; default "yours")
+ *   progress  "21 of 22 · 3 to check"; part 0 to 1 for the bar
+ *   cost      "40 cr/row"
+ *   menu      a node at the end of the first line (a kit Menu)
+ */
+export function JobHeader({ name, agent = true, source, progress, part, cost, menu, className }) {
+  return (
+    <div className={cx("grid min-w-0 gap-1.5", className)}>
+      <div className={cx("flex min-w-0 items-center gap-1.5", agent ? "font-semibold" : "font-medium")}>
+        {agent ? <AgentMark /> : null}
+        <span className="min-w-0 flex-1 truncate">{name}</span>
+        {menu ?? null}
+      </div>
+      <div className={cx("flex min-w-0 items-center gap-1.5 whitespace-nowrap text-[11px] font-normal", agent ? "text-muted-foreground" : "text-chart-5")}>
+        {agent ? (
+          <>
+            <span aria-hidden="true" className="relative inline-block h-[3px] w-[30px] shrink-0 overflow-hidden rounded-full bg-muted">
+              <span className="absolute inset-y-0 left-0 bg-primary" style={{ width: `${Math.round(Math.max(0, Math.min(1, part ?? 0)) * 100)}%` }} />
+            </span>
+            <span className="min-w-0 truncate">{progress}</span>
+            {cost ? <span className="ml-auto shrink-0">{cost}</span> : null}
+          </>
+        ) : (
+          <span className="truncate">{source ?? "yours"}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------ the receipt ------------------------------ */
+
+/** The words on the page, the deciding ones underlined: `[[…]]` in the
+ *  words marks them, else the answer's value where it appears. */
+function Quote({ words, mark }) {
+  const parts = decidingWords(words, mark);
+  return (
+    <q className="block leading-normal [quotes:none] before:content-['\201C'] after:content-['\201D']">
+      {parts.map((p, i) =>
+        p.marked ? (
+          <mark key={i} className="bg-accent px-px text-accent-foreground underline decoration-primary decoration-2 underline-offset-[3px]">
+            {p.text}
+          </mark>
+        ) : (
+          <span key={i}>{p.text}</span>
+        ),
+      )}
+    </q>
+  );
+}
+
+/**
+ * A source as a clipping: its trust, the page's title, an action at the
+ * end (Pick 85), the address and when it was read, the words on it with
+ * the deciding ones underlined, and a footnote.
+ *
+ *   source    { url, title, evidence, read }  (read: "read 22 Sep")
+ *   trust     sure · likely · guess (the dot before the title), or null
+ *   mark      the value to underline when the words carry no [[…]]
+ *   title     overrides source.title ("62 people · likely")
+ *   action    a node at the head's end
+ *   footnote  a muted line under the words
+ *   picked    drawn as the one chosen
+ */
+export function Clipping({ source, trust, mark, title, action, footnote, picked = false, children, className }) {
+  const s = source ?? {};
+  const url = s.url ? shortUrl(s.url) : null;
+  return (
+    <div className={cx("grid gap-1.5 rounded-[var(--radius)] border bg-card px-3 py-2.5 text-card-foreground", picked ? "border-primary ring-1 ring-primary" : "border-border", className)}>
+      <div className="flex min-w-0 items-center gap-2">
+        {trust ? <TrustMark kind={sureKind(trust)} word="" /> : null}
+        <b className="min-w-0 flex-1 truncate font-semibold">{title ?? s.title ?? url ?? "A page"}</b>
+        {action ?? null}
+      </div>
+      {url || s.read ? (
+        <div className="min-w-0 truncate text-xs text-muted-foreground">
+          {url ? (
+            <a href={/^https?:/i.test(s.url) ? s.url : `https://${s.url}`} target="_blank" rel="noreferrer" className="underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring">
+              {url}
+            </a>
+          ) : null}
+          {url && s.read ? " · " : null}
+          {s.read ?? null}
+        </div>
+      ) : null}
+      {s.evidence ? <Quote words={s.evidence} mark={mark} /> : null}
+      {footnote ? <div className="text-xs text-muted-foreground">{footnote}</div> : null}
+      {children}
+    </div>
+  );
+}
+
+/** What the agent tried, each page crossed off, with why it gave up. */
+export function TriedList({ tried = [], className }) {
+  if (!tried.length) return null;
+  return (
+    <ul className={cx("grid gap-1 text-xs", className)}>
+      {tried.map((t, i) => (
+        <li key={i} className="flex min-w-0 items-baseline gap-2">
+          <s className="min-w-0 truncate text-muted-foreground">{t.title || shortUrl(t.url) || "a page"}</s>
+          {t.evidence ? <span className="min-w-0 truncate">{t.evidence}</span> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * The receipt: one answer opened, drawn big. Its head (the record, the
+ * question, the row), the value and its state in words, then the
+ * clippings: one for a found answer, two to pick from for two answers,
+ * the page that says a person left and who holds the role now, or what
+ * was tried for not found.
+ *
+ *   answer     the answer (model.js)
+ *   title      the record ("Klarwerk"); question ("Headcount"); where ("row 2")
+ *   onPick(which)  "one" | "other": Pick on each of two answers
+ *   pickWords(value)  the Pick button's words (default "Pick <value>")
+ *   picked     which of two was picked ("one" | "other"), drawn chosen
+ *   read       the date the pages were read ("read 22 Sep")
+ *   by         who found it, a node ("Found by the agent · 22 Sep, 10:31")
+ *   valueLabel overrides the big value ("Head of Product, or Product Lead")
+ *   stateWords overrides the state's words beside it
+ *   leftTitle  for a person who left: the title over who holds the role now
+ *   children   your actions, under the receipt
+ */
+export function Receipt({ answer, title, question, where, onPick, pickWords, picked, read, by, valueLabel, stateWords, leftTitle = "Now in the role", busy = false, children, className }) {
+  const st = answerState(answer);
+  const a = answer ?? {};
+  const two = st === "two_answers" || (a.other?.value && picked);
+  const left = a.flag === "left";
+  const kind = left || st === "two_answers" ? "two" : st === "not_found" ? "none" : st === "failed" ? "failed" : st === "typed" ? "typed" : st === "working" ? "looking" : sureKind(a.confidence);
+  const big =
+    valueLabel ??
+    (st === "two_answers" ? `${a.value} or ${a.other?.value ?? ""}` : st === "not_found" ? "Not found" : st === "failed" ? "Failed" : st === "working" ? "Looking up" : st === "empty" ? "Not asked yet" : a.value);
+  const words =
+    stateWords ??
+    (left
+      ? "left the company · needs you"
+      : st === "two_answers"
+        ? "two answers · the sources disagree"
+        : st === "checked"
+          ? `${CONFIDENCE[a.confidence]?.label ?? "found"} · checked`
+          : st === "typed"
+            ? "typed by a person · never overwritten"
+            : st === "not_found"
+              ? a.checked
+                ? "kept empty"
+                : "what it tried, crossed off"
+              : st === "failed"
+                ? "a page didn't answer"
+                : CONFIDENCE[a.confidence]
+                  ? `${CONFIDENCE[a.confidence].label} · ${CONFIDENCE[a.confidence].words}`
+                  : "");
+  const pickLabel = (v) => (pickWords ? pickWords(v) : `Pick ${v}`);
+  const withRead = (s) => (s ? { ...s, read: s.read ?? read } : s);
+  return (
+    <div className={cx("grid min-w-0 gap-3", className)}>
+      {title || question ? (
+        <div className="flex min-w-0 flex-wrap items-baseline gap-x-1.5">
+          {title ? <b className="text-sm font-semibold">{title}</b> : null}
+          {question || where ? <span className="text-muted-foreground">· {[question, where].filter(Boolean).join(" · ")}</span> : null}
+        </div>
+      ) : null}
+      <div className="grid gap-1">
+        <span className={cx("break-words font-semibold leading-tight", String(big ?? "").length > 24 ? "text-xl" : "text-2xl", a.confidence === "guess" && st === "found" && "italic")}>{big}</span>
+        {words ? <TrustMark kind={kind} word={words} check={st === "checked"} className="text-xs" /> : null}
+        {a.detail && !two && st !== "failed" ? <span className="text-xs text-muted-foreground">{a.detail}</span> : null}
+      </div>
+      {two && !left ? (
+        <>
+          <Clipping
+            source={withRead(a.source)}
+            trust={a.confidence ?? "likely"}
+            mark={a.value}
+            picked={picked === "one"}
+            action={onPick ? (picked === "one" ? <Button size="sm" variant="primary" disabled>Picked</Button> : <Button size="sm" onClick={() => onPick("one")} disabled={busy}>{pickLabel(a.value)}</Button>) : null}
+            footnote={a.detail}
+          />
+          <Clipping
+            source={withRead(a.other?.source)}
+            trust={a.other?.confidence ?? a.confidence ?? "likely"}
+            mark={a.other?.value}
+            picked={picked === "other"}
+            action={onPick ? (picked === "other" ? <Button size="sm" variant="primary" disabled>Picked</Button> : <Button size="sm" onClick={() => onPick("other")} disabled={busy}>{pickLabel(a.other?.value)}</Button>) : null}
+            footnote={a.other?.detail}
+          />
+        </>
+      ) : left ? (
+        <>
+          {a.source ? <Clipping source={withRead(a.source)} trust={a.confidence ?? "sure"} mark={a.value} footnote={a.note} /> : null}
+          {a.other?.value ? (
+            <>
+              <span className="text-[11px] uppercase tracking-[0.04em] text-muted-foreground">{leftTitle}</span>
+              <Clipping source={withRead(a.other.source)} trust="sure" title={`${a.other.value}${a.other.detail ? `, ${a.other.detail}` : ""}`} mark={a.other.value} />
+            </>
+          ) : null}
+        </>
+      ) : st === "not_found" || st === "failed" ? (
+        <Clipping source={{ title: st === "failed" ? "What it read" : "What it tried", read }} title={st === "failed" ? "What it read" : "What it tried"} footnote={a.note}>
+          <TriedList tried={a.tried?.length ? a.tried : a.source?.url ? [{ title: a.source.title, url: a.source.url, evidence: a.detail }] : []} />
+        </Clipping>
+      ) : a.source?.url || a.source?.evidence ? (
+        <Clipping source={withRead(a.source)} trust={a.confidence} mark={a.value} footnote={st === "stale" ? "Out of date: its question or its row changed since. It keeps this until a new answer lands." : undefined} />
+      ) : null}
+      {a.note && st !== "not_found" && st !== "failed" && !left ? (
+        <div className="text-xs">
+          <span className="text-[11px] uppercase tracking-[0.04em] text-muted-foreground">How it was found</span>
+          <br />
+          {a.note}
+        </div>
+      ) : null}
+      {by ? <div className="flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">{by}</div> : null}
+      {children}
+    </div>
+  );
+}
+
+/**
+ * What a person can do with an answer: type their own (theirs, never
+ * overwritten), or ask again with a hint, its price said.
+ *
+ *   onType(value) · typePlaceholder
+ *   onAskAgain(hint) · hintPlaceholder · askCost ("about 40 credits")
+ *   askNote    a line under it ("The old answers go into this answer's history.")
+ *   askLabel   the button's words (default "Ask again")
+ *   busy
+ */
+export function ReceiptActions({ onType, typePlaceholder = "Your answer", onAskAgain, hintPlaceholder = "Ask again with a hint", askCost, askNote, askLabel = "Ask again", hint: initialHint = "", busy = false, className }) {
+  const [typing, setTyping] = useState(false);
+  const [own, setOwn] = useState("");
+  const [hint, setHint] = useState(initialHint ?? "");
+  const ownId = useId();
+  const hintId = useId();
+  return (
+    <div className={cx("grid gap-2", className)}>
+      {onType ? (
+        typing ? (
+          <form
+            className="relative flex gap-2"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (own.trim()) onType(own.trim());
+            }}
+          >
+            <label htmlFor={ownId} className="sr-only">
+              Your own answer
+            </label>
+            <Input id={ownId} value={own} onChange={(e) => setOwn(e.target.value)} placeholder={typePlaceholder} className="min-w-0 flex-1" autoFocus />
+            <Button type="submit" size="sm" disabled={busy || !own.trim()}>
+              Save
+            </Button>
+          </form>
+        ) : (
+          <div className="flex flex-wrap items-center gap-2">
+            <Button size="sm" onClick={() => setTyping(true)} disabled={busy}>
+              Type my own
+            </Button>
+            <span className="text-xs text-muted-foreground">yours, never overwritten</span>
+          </div>
+        )
+      ) : null}
+      {onAskAgain ? (
+        <form
+          className="relative grid gap-1"
+          onSubmit={(e) => {
+            e.preventDefault();
+            onAskAgain(hint.trim());
+          }}
+        >
+          <div className="flex gap-2">
+            <label htmlFor={hintId} className="sr-only">
+              A hint for the agent
+            </label>
+            <Input id={hintId} value={hint} onChange={(e) => setHint(e.target.value)} placeholder={hintPlaceholder} className="min-w-0 flex-1" />
+            <Button type="submit" size="sm" disabled={busy}>
+              <AgentMark />
+              {askLabel}
+            </Button>
+          </div>
+          {askCost || askNote ? <span className="text-xs text-muted-foreground">{[askCost, askNote].filter(Boolean).join(". ")}</span> : null}
+        </form>
+      ) : null}
+    </div>
+  );
+}

package/registry/blocks/agent-column/spreadsheet-type.jsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { AnswerCell } from "./agent-column";
+import { answerWords } from "./model";
+
+// A column type for the spreadsheet block (and base-view, which passes
+// `types` through): the value is an answer, drawn by AnswerCell. A person
+// who types in the cell sets their own value (setBy "person"), which the
+// app saves and the agent never overwrites.
+//
+//   <Spreadsheet types={{ answer: answerColumnType }}
+//     columns={[{ key: "headcount", name: "Headcount", type: "answer", answerType: "number" }]} … />
+export const answerColumnType = {
+  label: "Agent answer",
+  icon: "sparkles",
+  width: 200,
+  editor: "text",
+  empty: (v) => v == null || (v.value == null && v.status == null),
+  parse: (text) => ({ value: { status: "found", value: String(text ?? "").trim(), setBy: "person" } }),
+  toText: (v) => (v?.value == null ? "" : String(v.value)),
+  format: (v) => (v?.value != null ? String(v.value) : answerWords(v)),
+  compare: (a, b) => String(a?.value ?? "").localeCompare(String(b?.value ?? ""), undefined, { numeric: true }),
+  render: (v, column) => <AnswerCell answer={v} type={column?.answerType ?? "text"} lines={1} />,
+};